Clase 3

Estructura semántica en HTML

La estructura semántica consiste en utilizar etiquetas que describen el significado del contenido que contienen, en lugar de simplemente definir su apariencia. Esto facilita la accesibilidad, mejora el SEO y hace que el código sea más fácil de mantener y entender.

<header>: Encabezado de la página o sección.
<nav>: Contiene enlaces de navegación.
<main>: Contenido principal de la página.
<section>: Agrupa contenido relacionado.
<article>: Contenido independiente (como un artículo de blog).
<footer>: Pie de página o cierre de una sección.

Breve historia de CSS

CSS (Cascading Style Sheets) fue desarrollado a mediados de los años 90 para separar la estructura del contenido (HTML) del diseño visual. Su evolución permitió crear sitios web más atractivos, rápidos y adaptables.

Principales hitos:

CSS1 (1996): Introducción básica de estilos (colores, fuentes, márgenes).
CSS2 (1998): Nuevos selectores, posicionamiento absoluto y relativo.
CSS3 (2000s en adelante): Módulos como transiciones, animaciones, grid y flexbox.

Selectores en CSS

De elemento: Selecciona todas las etiquetas de un tipo (ej: p, h1).
De clase: Selecciona todos los elementos con una determinada clase (ej: .destacado).
De ID: Selecciona un único elemento (ej: #menu).
De atributo: Selecciona según un atributo específico (ej: input[type="text"]).

Modelo de Caja (Box Model)

En CSS, todos los elementos se representan como cajas rectangulares compuestas por:

Contenido: El área donde se muestra el texto o imagen.
Padding (Relleno): Espacio entre el contenido y el borde.
Border (Borde): Línea alrededor del padding (y contenido).
Margin (Margen): Espacio exterior que separa un elemento de otros.

Unidades de medida en CSS

Unidades absolutas:

px: Píxeles.
cm: Centímetros.
mm: Milímetros.
pt: Puntos tipográficos.

Unidades relativas:

em: Relativo al tamaño de fuente del elemento padre.
rem: Relativo al tamaño de fuente del elemento raíz (html).
vw: Porcentaje del ancho de la ventana.
vh: Porcentaje del alto de la ventana.

Conclusión

Comprender la estructura semántica y el uso de CSS es esencial para construir sitios web bien organizados, accesibles y atractivos visualmente. El conocimiento del modelo de caja y las unidades de medida también es fundamental para controlar la disposición y el diseño de los elementos en una página web.

← Volver al inicio