AWC | Clase 3: Modelo de caja
Imágenes
El elemento img en HTML es una etiqueta vacía (sin cierre) que se utiliza para incrustar imágenes en una página web, definiendo su ubicación y propiedades visuales mediante atributos.
El atributo src (source) es obligatorio y especifica la ruta o URL del archivo de imagen (relativa o absoluta), indicando al navegador dónde cargar el recurso; si la ruta es incorrecta o el archivo no existe, la imagen no se mostrará y aparecerá un icono de error.
Por otro lado, el atributo alt (texto alternativo) es crucial por accesibilidad y robustez: proporciona una descripción textual de la imagen que se lee en lectores de pantalla para usuarios con discapacidad visual, se muestra cuando la imagen no puede cargarse (por ejemplo, por conexión lenta o src roto) y mejora el SEO al ayudar a los motores de búsqueda a entender el contenido. Un buen alt debe ser descriptivo pero conciso, reflejando el propósito de la imagen en el contexto de la página.
Propiedades CSS utilizadas en el ejemplo:
Modelo de Caja
En CSS llamamos "caja" a las propiedades que controlan los elementos que envuelven a cada uno de los nodos del DOM. Consiste en:
Modelo de caja en la W3CTipos de elementos
Block | Bloque
- Tienden a ocupar el ancho disponible de su contenedor.
- Agregan saltos de línea antes y después de su posición.
- Pueden contener elementos de línea y bloque.
- Admiten parámetros de alto y ancho
<body>, <header>, <nav>, <div>
Inline | En línea
- Ocupan sólo el área de su contenido
- No agregan saltos de línea.
- Pueden contener solamente otros elementos de línea.
- No admiten parámetros de alto y ancho.
<a>, <strong>, <em>, <span>
Inline-block | En línea-bloque
- Ocupan sólo el área de su contenido
- No agregan saltos de línea.
- Pueden contener solamente otros elementos de línea.
- Admiten parámetros de alto y ancho.
<img>, <input>
Box-sizing
La propiedad box-sizing sirve para indicar si el tamaño final del elemento debe incluir el padding y border del elemento si o no. box-sizing en la W3C.
Desafío: header
Deben armar un header que tenga el 'logo' del catálogo y un nav con los links para poder navegar a otras secciones.
El 'logo' puede ser solamente texto, no es necesario que sea una imagen.
También pueden improvisar un footer inicial.