Curso HTML | Encabezado de construcción del sitio web

Navegación del curso 
 

Hasta ahora, hemos creado la barra de navegación para el encabezado de nuestro sitio web. Lo siguiente para completar el encabezado es incluir la imagen y el texto encima de la imagen como se muestra en la siguiente captura de pantalla: 
 

Veamos nuevamente la parte del código del encabezado en nuestro archivo index.html . La parte resaltada del código muestra el menú de la imagen del encabezado: 
 

<!-- Header Menu of the Page -->
<header>
         
    <!-- Top header menu containing
        logo and Navigation bar -->
    <div id="top-header">
             
        <!-- Logo -->
        <div id="logo">
            <img src="images/logo.png" />
        </div>   
                 
        <!-- Navigation Menu -->
        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
    </div>   
 
    <!-- Image menu in Header to contain an Image and
        a sample text over that image -->
    <div id="header-image-menu">
 
    </div>
</header>

Para completar el menú de imagen, primero debemos agregar la imagen y el texto dentro de la etiqueta div con id «header-image-menu» como se muestra en el código anterior.
Añadir imagen : 
 

• Haga clic aquí para descargar la imagen dada.
• Agrégalo a la carpeta de imágenes de tu proyecto.
• Inclúyelo dentro del div con id = “header-image-menu” .

Adición de texto : agregue el texto dentro de una etiqueta <h2> y asigne a la etiqueta una identificación = «imagen-texto» que se utilizará para agregar estilos.
A continuación se muestra el código HTML final para el menú de encabezado después de agregar las imágenes y el texto: 

<!-- Header Menu of the Page -->
<header>
          
    <!-- Top header menu containing
         logo and Navigation bar -->
    <div id="top-header">
              
        <!-- Logo -->
        <div id="logo">
            <img src="images/logo.png" />
        </div>   
                  
        <!-- Navigation Menu -->
        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
    </div>   
  
    <!-- Image menu in Header to contain an Image and
         a sample text over that image -->
    <div id="header-image-menu">
        <img src="images/slider.jpg">
        <h2 id = "image-text">
            A Basic Web Design course by GeeksforGeeks
        </h2>
    </div>
</header>

Nuestra página web ahora se verá como en la siguiente captura de pantalla: 
 

¿ Puedes señalar qué está mal con la imagen de arriba ? La respuesta es que el texto está debajo de la imagen y no en su posición correcta como se muestra en la plantilla.
Tendremos que usar CSS para agregar estilos al texto y la imagen para colocar el texto sobre la imagen. Comencemos agregando CSS.
 

• Aplicar estilo al menú de la imagen principal (#header-image-menu) : asigne al menú principal de la imagen un margen superior de 10 px y establezca su posición en relativa. 
  Agregue el siguiente código a style.css: 
   

#header-image-menu{
    top: 10px;
    position: relative;
}

• Aplicar estilo a la imagen dentro del menú de la imagen : Establezca el ancho de la imagen al 100 % del padre y elimine los márgenes y el relleno. 
  Agregue el siguiente código a style.css: 
   

#header-image-menu img{
    width: 100%;
    margin: none;
    padding: none;
}

• Posicionamiento del texto (#imagen-texto) : Establezca la posición del texto en primer lugar absoluto y proporcione los márgenes apropiados desde la izquierda y la parte superior. Establezca el color y traduzca el texto en un 30% usando la función translate().
  Agregue el siguiente código a style.css: 
   

#image-text{
    position: absolute;
    top: 60%;
    left: 60%;
    font-family: 'Roboto';
    color: #000;
    transform: translate(-30%, -30%);
    text-align: center;
}

El código CSS completo para el menú de la imagen se verá como se muestra a continuación: 
 

/*****************************/
/* Styling Header Image Menu */
/*****************************/
#header-image-menu{
    top: 10px;
    position: relative;
}
 
#header-image-menu img{
    width: 100%;
    margin: none;
    padding: none;
}
 
#image-text{
    position: absolute;
    top: 60%;
    left: 60%;
    font-family: 'Roboto';
    color: #000;
    transform: translate(-30%, -30%);
    text-align: center;
}

Al abrir index.html en el navegador ahora, verá exactamente el mismo encabezado que se muestra en el video de muestra al comienzo del curso. 
 

Hemos completado la construcción del encabezado de nuestro sitio web. 
 

Navegador compatible:

• Google Chrome
• Borde de Microsoft
• Firefox
• Ópera
• Safari