4.20. Introducción a HTML: estructura básica, etiquetas y atributos
HTML, que significa lenguaje de marcado de hipertexto, es el lenguaje de marcado estándar para crear páginas web y aplicaciones. Junto con CSS y JavaScript, HTML es una tecnología fundamental utilizada por la mayoría de los sitios web para crear páginas web visualmente atractivas, interfaces de usuario para aplicaciones web e interfaces de usuario para muchas aplicaciones móviles.
Estructura básica de un documento HTML
Un documento HTML tiene una estructura de árbol, donde cada elemento y su contenido se representan como un objeto del Modelo de objetos de documento (DOM).
<!DOCTYPE html> <html> <cabeza> <title>Título de la página</title> </cabeza> <cuerpo> <h1>Este es un encabezado</h1> <p>Este es un párrafo.</p> <p>Este es otro párrafo.</p> </cuerpo> </html>
El archivo <!DOCTYPE html> es la declaración del tipo de documento y ayuda a los navegadores a mostrar las páginas web correctamente. Sólo debería aparecer una vez, en la parte superior de la página (antes de cualquier etiqueta HTML).
El <html> es la raíz de una página HTML. La <cabeza> contiene metainformación sobre el documento HTML. El <título> especifica un título para el documento HTML (que se muestra en la barra de título del navegador o en la pestaña de la página).
El <cuerpo> define el cuerpo del documento y es un contenedor para todas las partes visibles del documento HTML.
Etiquetas y atributos HTML
Las etiquetas HTML son la base de cualquier página web. Se utilizan para definir y organizar el contenido de una página web. Cada etiqueta HTML tiene una sintaxis específica que se debe seguir para que el navegador pueda interpretarla correctamente.
Un elemento HTML se define mediante una etiqueta de inicio y, normalmente, una etiqueta de cierre. El contenido del elemento es todo lo que se encuentra entre la etiqueta inicial y la etiqueta final. Algunos ejemplos de elementos HTML incluyen <h1>, <p>, <div>, <body>, <head>, <title>, etc.
Los atributos HTML se utilizan para proporcionar información adicional sobre los elementos. Siempre se especifican en el elemento inicial y normalmente vienen en pares de nombre/valor como: nombre="valor". Por ejemplo, el atributo 'clase' se utiliza para especificar una o más clases para un elemento HTML. El atributo 'id' se utiliza para especificar una identificación única para un elemento HTML.
Posicionamiento en CSS
CSS, que significa Cascading Style Sheets, es un lenguaje de hojas de estilo utilizado para describir la apariencia de un documento escrito en HTML. CSS se utiliza para controlar el diseño de varias páginas web a la vez.
El posicionamiento en CSS es un concepto importante que le permite controlar dónde y cómo se colocan los elementos HTML en la página web. Hay varias propiedades de posicionamiento en CSS que puede utilizar para controlar el posicionamiento, como: 'estático', 'relativo', 'fijo', 'absoluto' y 'fijo'.
De forma predeterminada, los elementos se colocan en posición "estática", lo que significa que se muestran en la página en el orden en que aparecen en el código HTML. Si desea mover un elemento en relación con su posición normal, puede utilizar la posición "relativa". Si desea colocar un elemento en relación con la ventana gráfica, puede utilizar la posición "fija". Si desea colocar un elemento en relación con el elemento principal más cercano (en lugar de una posición "estática"), puede usar la posición "absoluta". Si desea posicionar un elemento según el desplazamiento del usuario, puede utilizar la posición "fija".
Además, puede usar las propiedades 'arriba', 'abajo', 'izquierda' y 'derecha' para mover el elemento desde su posición original cuando usa las propiedades 'relativa', 'absoluta', 'fija' o 'pegajoso'.
