Teoría
Teoría

La etiqueta head: información sobre la página

La etiqueta <head> guarda información sobre la página. Es la primera dentro de <html>, justo antes de <body>.

Dentro de <head> suelen aparecer el título, las palabras clave, la descripción de la página y otros datos. También se conectan recursos externos, como los estilos. Su contenido no se muestra directamente en la página.

¿Recuerdas que en la primera parte ya modificamos el contenido de <head>? Usamos <link> para conectar distintos archivos CSS:

<head>
  <link href="archivo_de_estilos.css" rel="stylesheet">
</head>

En <link>, el atributo href indica la dirección del archivo. El atributo rel con el valor stylesheet le dice al navegador que estamos conectando una hoja de estilos.

Antes conectamos estilos que definían un diseño completo. Ahora usaremos unos estilos especiales para crear prototipos. Harán visibles los grandes bloques y cambiarán un poco el aspecto del texto. Así será más fácil diseñar el sitio y ver la estructura de toda la página.

Los estilos suelen conectarse dentro de <head>, aunque también puedes hacerlo dentro de <body>. No es un error, pero no es la opción recomendada.

index.html

HTML

<!DOCTYPE html> <html lang="es"> <head>  </head> <body> ¡Hola a todos! Te doy la bienvenida a mi primer sitio web. Hasta hace poco no sabía qué hacía alguien que se dedica a la maquetación web. Ahora encontré estos ejercicios de HTML y CSS y quiero dedicarme a eso. Incluso tengo un instructor, Cupcake, que no me dejará distraerme y seguirá mis avances. Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros. </body> </html>

ObjetivosRealizado

Conecta el archivo de estilos para crear prototipos:

Agrega una etiqueta <link> dentro de <head>.
Agrega a <link> el atributo rel con el valor stylesheet.
Agrega también el atributo href con el valor outlines.css.