Crear sección de encabezado en HTML

Introducción

En este laboratorio, aprenderemos cómo crear la sección de encabezado de una página HTML utilizando la etiqueta <header>. La sección de encabezado de una página web generalmente contiene el logotipo del sitio web, el menú de navegación, la barra de búsqueda, etc. La etiqueta <header> es un elemento de nivel de bloque utilizado para agrupar otros elementos HTML juntos y crear la sección de encabezado de una página web.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 86%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Configurando el documento HTML

Comenzaremos creando un nuevo archivo HTML llamado index.html. En index.html, agregaremos la estructura básica del documento HTML utilizando el siguiente código:

<!doctype html>
<html>
  <head>
    <title>Tutorial de encabezado HTML</title>
  </head>
  <body></body>
</html>

Creando la sección de encabezado

Crearemos la sección de encabezado de la página HTML utilizando la etiqueta <header>. Dentro de la etiqueta <body>, agregue el siguiente código:

<header>
  <h1>Bienvenido a mi sitio web</h1>
  <nav>
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Acerca de</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </nav>
</header>

En el código anterior, hemos agregado una etiqueta <h1> para definir el título de la sección de encabezado y una etiqueta <nav> para definir el menú de navegación. Dentro de la etiqueta <nav>, hemos agregado una lista no ordenada <ul> y tres elementos de lista <li> con las correspondientes etiquetas anclaje <a> para crear el menú de navegación.

Agregando estilos a la sección de encabezado

Para agregar estilos a la sección de encabezado, crearemos un archivo CSS llamado style.css. En style.css, escribiremos el siguiente código:

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav li a {
  color: #fff;
  display: block;
  padding: 0.5em;
  text-decoration: none;
}

En el código anterior, hemos agregado estilos a la etiqueta <header> para establecer el color de fondo, el color de texto y el relleno. También hemos agregado estilos a la etiqueta <nav> y sus elementos hijos para establecer los estilos del menú de navegación.

Vinculando el archivo CSS

Para vincular el archivo CSS al archivo HTML, agregue el siguiente código dentro de la etiqueta <head>:

<link rel="stylesheet" href="style.css" />

Guarde los cambios en index.html y abra el archivo en un navegador web. Debería ver la siguiente salida:

HTML Header Example

Resumen

¡Felicidades! Has creado con éxito una sección de encabezado básica de HTML utilizando la etiqueta <header>. En este laboratorio, aprendiste cómo crear la sección de encabezado de una página HTML, agregar estilos a ella y vincular un archivo CSS al documento HTML. La sección de encabezado es una parte esencial de cualquier página web ya que proporciona el contenido introductorio y el menú de navegación a los visitantes.

Sección de encabezado de HTML