HTML y CSS: los pilares del diseño web

Toda página web que ves en internet se construye con HTML y CSS: uno define el contenido y su estructura, el otro le da forma y estilo visual. Este OVA está pensado para estudiantes universitarios que dan sus primeros pasos en desarrollo web y quieren entender cómo se conectan ambos lenguajes.

Objetivos de aprendizaje

Comprender la estructura semántica de un documento HTML.
Aplicar selectores y propiedades CSS para estilizar contenido.
Reconocer el modelo de caja y los principios básicos del diseño responsivo.

Estructura HTML: los cimientos de una página web

HTML (HyperText Markup Language) organiza el contenido mediante etiquetas anidadas que forman una jerarquía. Etiquetas como header, main y footer aportan significado semántico, lo que ayuda a los navegadores y a las tecnologías de accesibilidad a interpretar la página correctamente.

CSS: estilos y selectores

CSS (Cascading Style Sheets) permite aplicar color, tipografía, tamaño y posición a los elementos HTML. Los selectores determinan a qué elementos se aplica cada regla, y la especificidad decide qué regla gana cuando hay conflictos entre varias.

Selector de clase

Se escribe con un punto (.card) y aplica el estilo a todos los elementos que tengan esa clase.

Selector de id

Se escribe con numeral (#menu) y aplica el estilo a un único elemento con ese identificador.

Pseudo-clase

Selecciona un elemento según un estado especial, como :hover cuando el cursor pasa por encima.

Especificidad

Es el peso que tiene una regla CSS para decidir cuál se aplica cuando varias compiten por el mismo elemento.

Diseño visual: modelo de caja y responsividad

Cada elemento HTML se representa como una caja formada por contenido, padding, borde y margen. Entender este modelo es clave para controlar espacios y tamaños. Además, técnicas como Flexbox, Grid y las media queries permiten que un diseño se adapte a distintos tamaños de pantalla.

HTML y CSS: los pilares del diseño web