Objetivo:
Introducción: Este proyecto es una galería de imágenes, el cual solo usaremos los lenguajes arquitectónicos HTML & CSS.
HTML:
DOCTYPE HTML: Esta línea indica al navegador que el documento está escrito en HTML5, el estándar más reciente de HTML.
Elemento HTML (<html lang “en”>): Engloba todo el contenido y define el idioma del documento.
Elemento HEAD (<head>): Contiene información sobre la página, como el título, el conjunto de caracteres y enlaces a archivos externos como CSS y fuentes.
Enlaces externos (<link>): Vincula un archivo de estilo local y una fuente de Google Fonts para dar estilo al contenido.
Elemento BODY (<body>): Contiene el contenido visible de la página.
Encabezado (<header>): Contiene el título de la galería.
Contenido principal (<main>): Contiene la sección que muestra las imágenes de la galería.
Sección de imágenes (<section>): Contiene las imágenes de la galería.
Div contenedor (<div>): Agrupa todas las imágenes de la galería.
Imágenes (<img>): Cada imagen se representa con un elemento <img>, y cada una tiene un atributo “src” que especifica la URL de la imagen y un atributo “alt”
Que proporciona un texto alternativo para la accesibilidad.
CSS:
Selector universal (*): En el selector estableceremos estas reglas, como eliminar el relleno y el margen predeterminado, especificar la fuente para todo el texto y establecer un color de fondo para toda la página.
Encabezado (header): Lo que se hará es centrar el texto y agregar un relleno en la parte superior e inferior para que no quede pegado al borde superior
Título (h1): Se definen estilos para el título, como un peso (grosor) de fuente fuerte, un tamaño grande y un color.
Sección de imágenes (section): Se establecen estilos para la sección que contiene las imágenes, como un color de fondo, bordes redondeados, márgenes y rellenos internos y un diseño de caja flexible con espacio alrededor de los elementos.
Contenedor de imágenes (div): Se aplican estilos al contenedor que contiene las imágenes, como relleno interno, bordes redondeados y un desplazamiento horizontal cuando el contenido excede el tamaño del contenedor.
Imágenes (img): Se definen estilos para las imágenes, como bordes redondeados, tamaño predeterminado con una transición suave al hacer hover y un borde sólido blanco.
Desplazamiento de la barra de desplazamiento (::webkit-scrollbar y ::webkit-scrollbar-thumb): Se personaliza la apariencia de la barra de desplazamiento en navegadores webkit, como Google Chrome, para que se ajuste al estilo general de la página.
Coach: Julian Charris
Temas relacionados
Comments