Ensambla una página web completa con el doctype y las etiquetas html, head, meta y body.
Abrir esta lección en KodokonHasta ahora has escrito fragmentos de HTML. Sin embargo, una página web real siempre sigue la misma estructura completa, un poco como una carta formal siempre tiene un encabezado, un cuerpo y una firma. Todo empieza con la declaración <!DOCTYPE html>, escrita en la primera línea: le indica al navegador que el documento usa HTML moderno. No es una etiqueta, es una simple declaración, y nunca se cierra.
A continuación viene el elemento <html>, la raíz de la página: todo lo demás va dentro de él. Su atributo lang="en" indica el idioma del documento. Contiene exactamente dos hijos. Primero <head>: la tarjeta de identidad de la página, con información que es invisible para el visitante. Luego <body>: todo el contenido visible, es decir, tus títulos, párrafos, listas, enlaces, imágenes y tablas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>It contains everything I have learned.</p>
</body>
</html>Veamos el contenido del <head>. La etiqueta autocerrada <meta charset="UTF-8"> especifica la codificación de caracteres: es lo que garantiza que los caracteres acentuados (é, à, ç) se muestren correctamente. La etiqueta <title> define el título de la página, que se muestra en la pestaña del navegador y en los resultados de búsqueda. A menudo se añade una segunda etiqueta <meta>, conocida como etiqueta viewport, para que la página se adapte al ancho de las pantallas de los teléfonos.
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>Puedes probarlo ahora mismo, sin instalar nada. Abre un editor de texto sencillo (Bloc de notas en Windows, TextEdit en Mac en modo texto sin formato), copia el esqueleto completo y luego guarda el archivo con la extensión .html, por ejemplo index.html. Después haz doble clic en el archivo: se abre en tu navegador y aparece tu primera página.