Header o banner CURSO HTML+CSS PÁGINA WEB BÁSICA PARTE 03

Summary

En este video, se explica cómo desarrollar un banner o encabezado básico para una página web, utilizando un logotipo y una imagen de fondo. Se abordan pasos como la organización de imágenes en una carpeta, la inserción de imágenes con HTML, y la implementación de estilos CSS para centrar el logotipo y hacer la imagen responsiva. También se destaca el uso de herramientas del navegador para ajustar la posición y verificar la adaptabilidad de la página a diferentes dispositivos, garantizando una correcta visualización en pantallas de cualquier tamaño.

Takeaways

• 😀 Crea una carpeta llamada 'img' para almacenar las imágenes necesarias para tu página web.
• 😀 Utiliza imágenes proporcionadas por el curso o recursos propios para el diseño del banner.
• 😀 Coloca un `div` para el banner, dentro del cual irán el logotipo y la imagen de fondo.
• 😀 El logotipo debe estar encima de la imagen de fondo, utilizando estilos CSS para posicionarlo.
• 😀 Para centrar el logotipo verticalmente, usa las herramientas de inspección del navegador (Chrome DevTools).
• 😀 La propiedad `position` en CSS ayuda a colocar el logotipo correctamente en el banner.
• 😀 Asegúrate de que el logotipo esté correctamente alineado con la imagen de fondo para lograr un diseño limpio.
• 😀 Usa el atributo `width` en la etiqueta `<img>` para hacer la imagen del banner responsiva y adaptativa a distintos tamaños de pantalla.
• 😀 Verifica cómo se adapta el banner en dispositivos móviles utilizando la vista de dispositivo en las herramientas de desarrollador del navegador.
• 😀 En el siguiente video, aprenderás a diseñar un menú responsivo horizontal para complementar la estructura de tu página web.

Q & A

¿Qué se está desarrollando en el video?

En el video se está desarrollando el banner o la cabecera (vigía) de una página web básica, que incluirá un logotipo y una imagen de fondo.

¿Cómo se organiza la estructura de archivos para agregar la imagen?

Se crea una carpeta llamada 'img' donde se almacenarán las imágenes necesarias, como el logotipo y la imagen de fondo, para su posterior implementación en el banner.

¿Qué recurso se utiliza para obtener las imágenes?

Las imágenes se obtienen desde los recursos proporcionados por el curso, ubicados en el directorio correspondiente dentro de la página web.

¿Cómo se inserta el logotipo en el banner?

El logotipo se coloca en un contenedor 'div' dentro del banner. Para ello, se accede a la carpeta 'img', se selecciona el archivo del logotipo y se carga en el código.

¿Qué se hace después de cargar el logotipo?

Una vez cargado el logotipo, se guarda el archivo y se actualiza la página web para ver el resultado.

¿Cómo se agrega la imagen de fondo al banner?

La imagen de fondo se agrega utilizando una etiqueta de imagen con formato JPG dentro del código HTML y se guarda para ver los cambios en la página.

¿Qué ajustes se hacen para que el logotipo se posicione correctamente?

Se realizan ajustes de estilo en el código, utilizando un lector de código en el navegador para inspeccionar el logotipo y asegurarse de que esté centrado verticalmente.

¿Cómo se verifica si el banner es responsivo?

Se verifica el comportamiento responsivo al ver si el logotipo y las imágenes se adaptan correctamente a diferentes tamaños de pantalla, como en dispositivos móviles.

¿Qué método se utiliza para hacer que la imagen sea responsiva?

Se utiliza el atributo 'image width' en la etiqueta de la imagen para hacer que la imagen se ajuste automáticamente al tamaño de la pantalla del dispositivo.

¿Qué ocurre cuando se amplía la vista en un dispositivo móvil?

Cuando se amplía la vista en un dispositivo móvil, la imagen se adapta bien al tamaño de la pantalla, manteniendo la proporción y la visibilidad adecuada.