Estilos Modernos con CSS3: Flexbox, CSS Grid y Diseño Responsive

📌 En síntesis: Maquetación profesional en la web: modelo de caja, posicionamiento avanzado con Flexbox, grillas bidimensionales con CSS Grid y Media Queries.

Guía técnica desarrollada por el equipo de Proyecto Luna para formación profesional y consulta técnica abierta.

Como es de saber en la actualidad, la Web se ha transformado en un ecosistema tecnológico amplio y dinámico, formando parte esencial de la vida cotidiana de las personas. Su uso se extiende a prácticamente todos los ámbitos de la actividad humana, permitiendo el acceso a una gran diversidad de servicios orientados al entretenimiento, la educación, la comunicación, el comercio y la gestión de información, entre otros. Gracias al avance y evolución continua de las tecnologías web, han surgido nuevas competencias entre los diversos servicios del mismo rubro, por lo que es de total relevancia la buena presentación y distribución de elementos implicados en las páginas web utilizadas por el usuario. En este marco, el Lenguaje de Etiquetado HTML5 y CSS tienen un rol clave en la confección de la estructura y estilo base de una página web. El presente documento tiene la ﬁnalidad de entregar una base conceptual introductoria sobre el uso de HTML5, abordando conceptos básicos del lenguaje, sus principales utilidades, el uso de los elementos/tags que incorpora, así como la correcta utilización de encabezados y estructuras de texto para una adecuada presentación de los contenidos. En síntesis, el documento abordará, por parte del apartado HTML5, los siguientes contenidos:

Conceptos básicos de HTML5
Estructura web con HTML5
Uso aplicado de tags y su función
Estructura de una tabla en XHTML Para concluir con este apartado, el contenido en un apartado diferente a gran parte del material de este documento se encargará de introducir y explicar la relevancia y uso práctico de un software de control de versiones en particular la plataforma GitHub, como herramienta fundamental para el respaldo, gestión y seguimiento del código fuente.

🚀 Introducción

HTML (Hyper Text Markup Language) es un lenguaje de etiquetas enfocado en la creación y maquetación de una página web. Su función clave es deﬁnir la estructuración y distribución de los contenidos a través de etiquetas o tags que serán expuestos a través de la interfaz de la página web mediante un navegador web. Estas etiquetas o tags pueden representar imágenes, enlaces, tablas, formularios, textos, entre otros. HTML se caracteriza por ser un lenguaje de etiquetas, ya que no posee lógica ni la capacidad de procesar datos como los lenguajes de programación convencionales, más bien se encarga de describir la estructura y el signiﬁcado de los elementos dentro de un documento web, en concreto un documento con extensión .html A continuación, se adjunta un archivo web o HTML En este caso, el archivo HTML se denomina “index.html” porque, por conﬁguración estándar de los servidores web, se busca automáticamente ese archivo como la página principal de un sitio web. Sin embargo, no es obligatorio que contenga esa denominación, ya que puede tener cualquier nombre, siempre que se indique correctamente como archivo de inicio dentro del servidor o se acceda a él de forma explícita.

🧠 ¿Qué es HTML?

Imagen 1: Muestra Index.HTML

⚙️ ¿Cómo se estructura una página web con HTML5?

Una página web en HTML5 tal como se mencionó anteriormente, se conforma a partir de un conjunto de etiquetas que permiten organizar y distribuir el contenido de manera estructurada de un documento html. Esta estructura está deﬁnida por distintas secciones que componen una página, facilitando tanto su visualización en el navegador como su comprensión a nivel de técnico. Toda página HTML comienza con una declaración del tipo de documento, la cual indica a los navegadores que interpreten el código plasmado como un documento html (). Por otro lado, se obtiene la etiqueta html que contiene todo el contenido del documento y dentro de la cual se dividen dos apartados esenciales: y . A continuación, se adjunta una tabla resumen con la funcionalidad de cada etiqueta y una captura que muestra la visualización de un documento HTML estándar. Tabla 1. Resumen etiquetas y Etiqueta Función Contenido Visible para usuario Contiene las conﬁguraciones generales y descriptivas del documento Título de la página (), codiﬁcación de caracteres (<meta charset>), enlaces a hojas de estilo (<link>), metadatos, script, entre otros. <head> No Contiene todo el contenido principal de la página web Textos, imágenes, enlaces, tablas, formularios, videos, audios y demás elementos visibles <body> Sí Lo que se observa en la imagen corresponde a la estructura básica de un documento HTML5, es decir, el esqueleto mínimo necesario para crear una página web funcional. En primer lugar, ¡la línea <!DOCTYPE html> indica al navegador que el documento está escrito bajo el estándar HTML5, permitiendo que este sea interpretado correctamente. A continuación, se encuentra la etiqueta <html lang="es">, la cual deﬁne el inicio del documento HTML y especiﬁca que el idioma principal del contenido es español. Dentro de la etiqueta <head> se incluye información general del documento que no es visible directamente para el usuario, como: <ul> <li> <meta charset="UTF-8">, que deﬁne la codiﬁcación de caracteres. </li> <li> <meta name=“viewport”…>, que permite adaptar la visualización a distintos dispositivos. </li> <li> <title>Document, que establece el nombre de la página que

aparece en la pestaña del navegador. Finalmente, la etiqueta representa el cuerpo del documento, donde se insertará todo el contenido visible de la página web, como textos, imágenes, enlaces, tablas y otros elementos. En este caso, el se encuentra vacío, ya que aún no se ha agregado contenido. Fuente: Captura de documento HTML

En síntesis, la imagen muestra la plantilla base de una página HTML5, sobre la cual se construirá posteriormente el contenido y diseño del sitio web.

🔹 Etiquetas semánticas y no semánticas

En el apartado , HTML incorpora etiquetas de Carácter Semántico, es decir etiquetas que permiten organizar el contenido de forma clara y precisa, de manera que estas representan de forma puntual, distintas secciones claves de una página, como una cabecera, menú de navegación, contenido principal, pie de página, entre otros. Gracias a esta estructura semántica, es posible construir páginas web bien organizadas, accesibles y fáciles de mantener. Sin embargo, a contraparte de las etiquetas semánticas, existen las etiquetas que son de carácter No semántico, las cuales no entregan una información particular sobre el signiﬁcado del contenido que contienen, más bien se utilizan exclusivamente como contenedores genéricos para agrupar o distribuir los elementos de una página web de manera estructurada. El uso de estas, generalmente diﬁcultan la accesibilidad y la correcta interpretación del contenido, por lo que HTML recomienda priorizar el uso de etiquetas semánticas siempre que sea posible. Nota: Las etiquetas No semánticas más utilizadas son

y A continuación, se adjunta una tabla resumen que compara etiquetas Semánticas con etiquetas No Semánticas.

📌 Uso aplicado de Tags y sus funciones

En HTML, las etiquetas o tags cumplen la función de deﬁnir los distintos elementos que componen una página web. A través de estas etiquetas, es posible estructurar y organizar el contenido que será visualizado por el usuario dentro del navegador, tales como textos, imágenes, enlaces, tablas, formularios y recursos multimedia. Las etiquetas se utilizan dentro de la estructura del documento HTML, siendo el apartado el espacio donde se incorpora principalmente el contenido visible para el usuario. No obstante, existen también etiquetas que se ubican en el apartado y que cumplen funciones de conﬁguración, metadatos o vinculación de recursos externos, tales como hojas de estilo (CSS) y archivos JavaScript (JS). Cada etiqueta posee una función especíﬁca, permitiendo deﬁnir y organizar los elementos de una página web, lo que facilita la correcta interpretación de la información por parte del navegador. A continuación, se presenta un listado de las etiquetas más utilizadas en HTML, particularmente en el cuerpo del documento: Tabla 1. Tabla síntesis etiquetas semánticas y no semánticas Aspectos Semánticas No semánticas Representan el signiﬁcado del contenido. No representan el signiﬁcado de forma directa. Deﬁnición Organizan el contenido de forma lógica. Agrupan elementos genéricamente. Función Mejoran accesibilidad y comprensión. No aportan contexto semántico. Aporte Uso prioritario. Uso complementario. Uso en HTML5

Tabla 3. Tags HTML Etiqueta Función Tipo Deﬁne la cabecera de una página o sección. Semántica

Representa un menú de navegación. Semántica