La etiqueta Head
Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 4 de 76.
En HTML, la etiqueta head es un contenedor para metadatos sobre el documento HTML. Los metadatos son datos que describen el documento pero no se muestran en la página misma. El elemento head se coloca entre la etiqueta <html> y la etiqueta <body>.
La etiqueta head puede incluir varios elementos, tales como:
<title>: Especifica el título del documento HTML, el cual se muestra en la barra de título o en la pestaña del navegador.
<style>: Contiene estilos CSS internos para el documento.<link>: Enlaza a recursos externos, como archivos CSS.
<meta>: Proporciona metadatos sobre el documento, como el conjunto de caracteres, la descripción y las palabras clave.<script>: Incrusta scripts del lado del cliente, como JavaScript.
Aquí tienes un ejemplo de cómo se utiliza la etiqueta head en un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>En este ejemplo, la etiqueta head contiene la etiqueta title de la página y algunos estilos CSS internos. El título "Mi página web" se mostrará en la barra de título del navegador, y el color de fondo del cuerpo se establecerá en azul claro.
Desafío
FácilSe te proporciona un documento HTML con una etiqueta <head>. En su interior, añade <style> y agrega el siguiente código CSS dentro de ella:
body {
background-color: lightgreen;
}Pruébalo tú mismo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Styling with CSS
4Fundamentos del texto
Color de textoFamilia de fuentesTamaño de fuenteGrosor de fuenteAlineación de textoDecoración de textoDesafío de repaso #1Desafío de repaso #27Modelo de caja - Parte 1
¿Qué es el modelo de caja?PaddingMárgenesBordesAncho y altoDesafío de repaso
3Selectores básicos
Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección9Flex Box
¿Qué es Flex Box?Flex DirectionJustify ContentAlign ItemsEl centrado perfectoDesafío de Flex Box12Fundamentos de Diseño Responsivo
¿Qué es el Diseño Responsivo?Etiqueta Meta ViewportDiseños FluidosUnidades de ViewportFundamentos de Media QueriesImágenes Flexibles