Dominando los metadatos del documento HTML

Introducción

En este laboratorio, aprenderá a crear un documento HTML utilizando la etiqueta HTML <head>. La etiqueta <head> se utiliza para proporcionar metadatos y otra información sobre la página web que no es visible para el usuario. Veremos los pasos necesarios para crear una etiqueta <head> para su documento HTML.

Nota: Puede 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 intermedio con una tasa de finalización del 78%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Crea un documento HTML

Primero, creemos un documento HTML en un archivo llamado index.html:

<!doctype html>
<html>
  <head> </head>
  <body></body>
</html>

Agrega un título a tu documento HTML

La etiqueta <title> se utiliza para definir el título de la página web. Debe estar ubicada dentro de la etiqueta <head>. Agrega la etiqueta <title> a tu documento HTML:

<!doctype html>
<html>
  <head>
    <title>Mi impresionante página web</title>
  </head>
  <body>
    <h1>Hola, Mundo!</h1>
  </body>
</html>

Modifica el título de tu documento HTML

Modifiquemos el título del documento HTML cambiando el texto "Mi impresionante página web" por algo más. Reemplaza el texto "Mi impresionante página web" con el título que desees:

<!doctype html>
<html>
  <head>
    <title>Mi asombrosa página web</title>
  </head>
  <body>
    <h1>Hola, Mundo!</h1>
  </body>
</html>

Agrega codificación de caracteres

La codificación de caracteres se utiliza para definir cómo se muestran los caracteres en el navegador. Podemos definir la codificación de caracteres utilizando la etiqueta <meta>. Agrega la siguiente etiqueta <meta> dentro de la etiqueta <head>:

<!doctype html>
<html>
  <head>
    <title>Mi asombrosa página web</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hola, Mundo!</h1>
  </body>
</html>

Agrega estilo CSS a tu documento HTML

Puedes utilizar la etiqueta <style> dentro de la etiqueta <head> para proporcionar estilos CSS a la página web. Agrega la siguiente etiqueta <style> dentro de la etiqueta <head>:

<!doctype html>
<html>
  <head>
    <title>Mi asombrosa página web</title>
    <meta charset="UTF-8" />
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hola, Mundo!</h1>
  </body>
</html>

Agrega enlaces a hojas de estilo externas

También puedes enlazar hojas de estilos CSS externas a tu documento HTML utilizando la etiqueta <link>. Crea un nuevo archivo llamado styles.css y agrega los siguientes estilos CSS:

h1 {
  color: red;
}

Luego, enlaza esta hoja de estilos a tu documento HTML utilizando la siguiente etiqueta <link> dentro de la etiqueta <head>:

<!doctype html>
<html>
  <head>
    <title>Mi asombrosa página web</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hola, Mundo!</h1>
  </body>
</html>

Agrega una URL base

La etiqueta <base> se utiliza para proporcionar una URL base para todas las URL relativas utilizadas en el documento HTML. Agrega la etiqueta <base> dentro de la etiqueta <head>:

<!doctype html>
<html>
  <head>
    <title>Mi asombrosa página web</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <base href="https://example.com" />
  </head>
  <body>
    <h1>Hola, Mundo!</h1>
  </body>
</html>

Resumen

En este laboratorio, aprendiste cómo utilizar la etiqueta <head> de HTML para proporcionar metadatos y otra información sobre la página web. Puedes utilizar la etiqueta <title> para definir el título del documento HTML, la etiqueta <meta> para definir la codificación de caracteres y otras información meta, la etiqueta <style> para proporcionar estilos CSS, la etiqueta <link> para enlazar hojas de estilos externas y la etiqueta <base> para proporcionar una URL base para todas las URL relativas.

Metadatos del documento HTML