Descarga la aplicación para disfrutar aún más
Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!
Practica 4 - HTML
Castañeda Gonzalez Giovanni
Compartir
Vista previa del material en texto
INSTITUTO POLITÉCNICO NACIONAL ESCUELA SUPERIOR DE CÓMPUTO Práctica 4 - HTML “CSS” Materia: Tecnologías para el Desarrollo de Aplicaciones Web Profesor: Sandra Luz Morales Güitrón Grupo: 4CV3 Alumno: Giovanni Castañeda González Índice Introducción 3 Cuerpo 4 Practica 1 4 Practica 2 5 Práctica 3 5 Práctica 4 6 Práctica 5 6 Practica 6 7 Practica 7 7 Practica 8 8 Practica 9 8 Practica 10 9 Practica 11 9 Práctica 12 10 Práctica 13 11 Practica 14 12 Practica 15 12 Práctica 16 12 Practica 17 13 Practica 18 14 Practica 19 14 Practica 20 15 Conclusión 16 Introducción La etiqueta de estilo y CSS (Cascading Style Sheets) son herramientas esenciales para dar estilo y formato a los elementos en una página web. La etiqueta de estilo se utiliza para definir estilos dentro del documento HTML. Puede colocarse en la sección <head> del documento y dentro de ella se pueden definir reglas de estilo para diferentes elementos HTML, como texto, encabezados, listas, tablas y otros. Por otro lado, CSS es un lenguaje de hojas de estilo que se utiliza para aplicar estilos a los elementos HTML de una página web. Con CSS, se pueden definir propiedades como el color, el tamaño, la fuente, la alineación, el fondo y la disposición de los elementos HTML. En general, el uso de CSS permite separar la estructura del contenido y la presentación visual en una página web, lo que facilita la gestión y el mantenimiento del sitio. Además, permite un mayor control sobre el aspecto de la página y la capacidad de aplicar estilos consistentes en toda la página o en todo el sitio. Cuerpo Practica 1 Para definir el color de un elemento HTML utilizando CSS, se pueden utilizar diferentes métodos, como especificar el nombre de un color predefinido, utilizar un valor hexadecimal o un valor RGB. Por ejemplo, si queremos definir el color de fondo de un elemento div como rojo, podemos utilizar la propiedad "background-color". Practica 2 La propiedad "background-color" de CSS se utiliza para definir el color de fondo de un elemento HTML. Esta propiedad se puede utilizar para establecer un color sólido, un gradiente o una imagen como fondo de un elemento. Práctica 3 La propiedad "font-family" de CSS se utiliza para definir la familia de fuentes de un elemento HTML. Esta propiedad se puede utilizar para establecer una fuente genérica o una fuente específica para un elemento. Práctica 4 Para establecer el tamaño de fuente en CSS, se puede utilizar la propiedad "font-size" seguida de un valor numérico y una unidad de medida. Práctica 5 La propiedad CSS "text-align" se utiliza para alinear el texto dentro de un elemento en la dirección horizontal. Esta propiedad acepta los siguientes valores: "left": Alinea el texto a la izquierda. "right": Alinea el texto a la derecha. "center": Alinea el texto en el centro. "justify": Justifica el texto, lo que significa que el espacio entre las palabras se ajusta para que el texto se alinee a ambos lados del contenedor. Practica 6 CSS se puede agregar a documentos HTML de 3 maneras: En línea -usando el atributo style dentro de elementos HTMLInterno -mediante el uso de un elemento <style> en el <head>sección Externo : mediante el uso de un <link> elemento para vincular a un archivo CSS externoLa forma más común de agregar CSS es mantener los estilos en CSS externos. Practica 7 La propiedad CSS "padding" se utiliza para agregar espacio de relleno alrededor del contenido de un elemento. Esta propiedad acepta valores en píxeles, porcentajes o em. Practica 8 La propiedad CSS "margin" se utiliza para agregar espacio en blanco alrededor de un elemento, es decir, para definir la separación entre el borde de un elemento y el borde del elemento vecino. Practica 9 Puede dar estilo a los enlaces HTML utilizando CSS, para cambiar su color, subrayado, estilo y otros aspectos. Practica 10 El atributo target especifica dónde abrir el documento vinculado.Target puede tener uno de los siguientes valores: self-Por defecto. Abre el documento en la misma ventana/pestaña en la que se hizo clic. blank-Abre el documento en una nueva ventana o pestaña. parent-Abre el documento en el marco principal. top-Abre el documento en el cuerpo completo de la ventana. Practica 11 Para agregar un vínculo a una imagen en CSS, puede utilizar la etiqueta HTML "a" (para crear el enlace) y la etiqueta "img" (para insertar la imagen). Práctica 12 Para crear un enlace a una dirección de correo electrónico en HTML, puede utilizar la etiqueta "a" y especificar la dirección de correo electrónico en el atributo "href" utilizando el prefijo "mailto:". Práctica 13 Para crear un botón como un vínculo en CSS, puede utilizar la etiqueta "a" en HTML y aplicar estilos CSS al enlace para darle el aspecto de un botón. Practica 14 Puede agregar títulos a los enlaces en HTML utilizando el atributo "title". El atributo "title" se utiliza para proporcionar información adicional sobre un enlace cuando el usuario pasa el cursor sobre el enlace. Practica 15 Para cambiar el color de los vínculos en CSS, puede utilizar la propiedad "color" y aplicar el valor deseado. Práctica 16 Para crear un botón como un vínculo en CSS, puede utilizar la etiqueta "a" en HTML y aplicar estilos CSS al enlace para darle el aspecto de un botón. Practica 17 En CSS, puede personalizar los marcadores y los vínculos utilizando diferentes propiedades. Para personalizar los marcadores, puede utilizar la propiedad "list-style-type" y especificar el tipo de marcador que desea utilizar. Practica 18 En CSS, puede establecer la altura y la anchura de los elementos utilizando las propiedades "height" y "width". Practica 19 En CSS, puede utilizar la propiedad "float" para hacer que las imágenes floten a la izquierda o a la derecha del texto u otros elementos en una página. Practica 20 En CSS, puede utilizar los mapas de imagen para dividir una imagen en varias áreas sensibles en las que se pueden hacer clic para dirigir a un enlace específico. Conclusión En conclusión, CSS es una herramienta poderosa para dar estilo y formato a los elementos en una página web. Permite separar la estructura del contenido y la presentación visual, lo que facilita la gestión y el mantenimiento del sitio. Además, permite una mayor flexibilidad y control sobre el diseño de la página, lo que se traduce en una mejor experiencia de usuario. CSS también permite aplicar estilos consistentes en toda la página o en todo el sitio, lo que ayuda a mantener una identidad visual coherente. Además, con la capacidad de definir estilos para diferentes dispositivos y tamaños de pantalla, CSS permite crear diseños responsivos que se adaptan a cualquier dispositivo o resolución de pantalla. En resumen, CSS es una herramienta esencial para cualquier desarrollador web y su uso adecuado puede mejorar significativamente la calidad de una página web.
Compartir