HTML y CSS - Columnas e Imágenes

Aprendiendo a estructurar y diseñar páginas web

1. Estructura y Flexbox

Imagen de diseño web

La estructura de una página web empieza con etiquetas como <html> y <body>. Para el diseño, utilizamos Flexbox, una técnica de CSS muy potente. Al usar display: flex, convertimos el contenedor padre en un "flex container", lo que nos permite alinear sus elementos hijos fácilmente. La propiedad flex: 1 es la clave para que las columnas tengan exactamente el mismo tamaño, ya que les indica que deben ocupar el espacio disponible de manera equitativa.

.contenedor {
    display: flex;
}
.columna {
    flex: 1;
}

2. Agregando Imágenes

Para insertar una imagen en una página, usamos la etiqueta <img>. Es importante usar los atributos correctos:

  • src: Define la URL o la ruta de la imagen.
  • alt: Proporciona un texto alternativo que se muestra si la imagen no carga o para lectores de pantalla.
  • class: Para aplicar estilos de Tailwind, como el ancho y los bordes.
imagen de estilos