Creando contenido Parte 1 - header

El <header> tiene tres secciones “banner”, “logo”, “buscador”.

Iremos integrando contenido, empezamos por la sección “banner”.

Vamos a poner un video, para ello nos vamos a YouTube y elegimos un video, pinchamos en compartir.

Pinchamos en Insertar.

<iframe width="560" height="315" src="https://www.youtube.com/embed/imqzsiXcxdg?si=XLezJLI5V-fQuD-U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Como nuestro banner tiene height = 250px y width = 500px lo modificamos en el código que nos inserta el video

<iframe width="500" height="250" src="https://www.youtube.com/embed/imqzsiXcxdg?si=XLezJLI5V-fQuD-U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Así nos quedaría insertado en el html.

Sección "logo".

Hemos definido que el logo tiene height = 125px y width = 250px

Este va a ser nuestro logo, lo copiamos en la carpeta imágenes

Ya solo nos falta insertar el código html en la sección “logo”

Para ello empleamos la etiqueta <img> con el atributo “src” donde tendremos que poner la ruta relativa a la ubicación de la imagen Una URL relativa indica la ruta donde está almacenada la imagen tomando como base el directorio donde está almacenado el archivo HTML desde el cual se está insertando la imagen. En nuestro caso sería.

Si el logo fuera más grande del tamaño que hemos definido, le tendríamos que ajustar el tamaño igual que hicimos con el video.

Sección “buscador”.

Buscamos una imagen de Google para hacer el ejercicio, la descargamos y guardamos en la carpeta imágenes.

Configuramos la sección “buscador”

comprobamos.

Ajustamos la imagen a nuestra sección.

Ahora queremos que cuando pinche en la imagen de Google me abra en otra pestaña el buscador de Google, para eso utilizamos el elemento <a> que crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL.

Con “href” indicamos la página a la que queremos ir al hacer clic sobre la imagen.

Con “target” indicamos que queremos que se abra en una nueva pestaña

Con<img> indicamos la ruta a la ubicación de la imagen.

Observamos que al poner el puntero sobre la imagen cambia para indicar que tiene un enlace.