Tu primera página HTML
Todo documento HTML comparte el mismo marco pequeño: una línea que declara el tipo de documento, un elemento raíz que envuelve todo, un head para información sobre la página, y un body para el contenido que la gente ve. Este capítulo desglosa ese marco línea por línea y luego lo guarda en un archivo que puedes abrir en un navegador.
El esqueleto del documento
Aquí está el esqueleto del que comienza cada página. Puedes copiarlo exactamente y cambiar las partes dentro del body:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>Hola</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>La primera línea, <!DOCTYPE html>, le dice al navegador que esta es una página HTML moderna. Después viene el elemento raíz, <html>, que envuelve todo lo demás en la página. Dentro de él hay dos cajas: <head> para información detrás de escenas, y <body> para las palabras e imágenes que ve un visitante. Tu encabezado y párrafo van en el body, porque esa es la parte que se muestra.
Piensa en todo como en un paquete etiquetado. El doctype es el sello que indica qué sistema postal usar, <html> es la caja, el head es la etiqueta en el exterior, y el body es lo que está empaquetado dentro.
<!DOCTYPE html>, luego <html> envolviendo un <head> y un <body>. Cópialo tal cual y pon tus propias palabras en el body. No se espera que lo memorices aún; lo escribirás suficientes veces como para que se quede por sí solo. Qué va en el head versus el body
Las dos cajas dentro de <html> tienen diferentes funciones. El <head> contiene cosas que el navegador necesita saber pero que el visitante no lee en la página. El <body> contiene todo lo que el visitante sí ve.
<head>
<title>Mis notas de recetas</title>
</head>
<body>
<h1>Pan de plátano</h1>
<p>Mezcla, vierte, hornea durante una hora.</p>
</body>El <title> está en el head, y es el nombre de la página: aparece en la pestaña del navegador, no en el medio de la página. El encabezado y el párrafo están en el body, así que aparecen en la página misma. Una regla simple para empezar: si un visitante debe leerlo, va en el body.
<title> vive en el head y nombra la pestaña del navegador; tus encabezados y párrafos viven en el body donde la gente los lee. Si un visitante debe verlo, va en el body. Esa una pregunta ordena casi todo. Charset y viewport
Dos líneas más van en el head de casi todas las páginas. Puedes copiarlas tal cual:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mi primera página</title>
</head>La primera línea le dice al navegador cómo leer tu texto para que las letras acentuadas, comillas curvas y emojis salgan bien en lugar de convertirse en símbolos raros. La segunda línea le dice al navegador que ajuste la página al ancho de la pantalla, que es lo que la hace verse sensato en un teléfono en lugar de una versión diminuta y alejada de la página de escritorio. No necesitas entender cada palabra aún. Pon ambas cerca del inicio del head y tus páginas se comportarán bien.
Guardando y abriendo un archivo .html
Una página HTML es un archivo de texto plano, así que puedes hacer uno en cualquier editor de texto. Lo único que importa es el nombre: guárdalo terminando en .html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Mi primera página</title>
</head>
<body>
<h1>Hola</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>Guárdalo como index.html. Luego encuentra el archivo en tu computadora y haz doble clic: se abre en tu navegador y muestra tu encabezado y párrafo. No hay servidor que iniciar y nada que instalar. La terminación .html es la señal que le dice a tu computadora que lo abra como una página web en lugar de como un muro de código. Cambia una palabra, guarda, y actualiza la pestaña del navegador para ver la actualización.
.html. Guarda la tuya como index.html, haz doble clic, y el navegador la abre de inmediato, sin configuración alguna. Para ver un cambio, guarda el archivo y actualiza la pestaña. Ese loop de guardar y actualizar es todo el ritmo de construir una página.