práctica paso a paso

Elaboración paso a paso

Estructura mínima del documento

Un documento HTML está compuesto tiene la siguiente estructura:

<!DOCTYPE html> - Declara el tipo de documento HTML5
<html lang="es"> - Elemento raíz que contiene todo el documento. El atributo lang especifica el idioma del contenido. Es importante darnos cuenta que todo lo que esté entre la etiqueta de apertura del html y la de cierre es todo nuestro documento y siempre se divide en dos partes:

<head> - Contiene información para navegadores y buscadores (metadatos). Este contenido no se visualiza en la página.
<body> - Cuerpo del documento donde va todo el contenido visible. Todo lo que se visualiza debe estar necesariamente contenido entre las etiquetas de apertura y cierre del body.

</html> - Cierre del documento. No debe aparecer nada por debajo de esta línea.

Esta estructura básica es la base de toda página web y debe respetarse siempre para que el documento sea válido.

Metadatos

Los metadatos son información sobre el documento que se coloca en el <head> y que no se visualiza en la página, pero es fundamental para navegadores y buscadores.

<meta charset="UTF-8"> - Define la codificación de caracteres. UTF-8 permite mostrar correctamente acentos, eñes y caracteres especiales. Antes de la aparición del UTF-8 era común el ISO-8859-1 para poder representar los caracteres españoles (entre otros).

<meta name="viewport"> - Esencial para diseño responsive. width=device-width ajusta el ancho al dispositivo. Las opciones de escala controlan el zoom:

initial-scale=1.0 - La página se muestra al 100% (tamaño normal, sin zoom)
initial-scale=0.5 - La página aparece reducida al 50%
initial-scale=2.0 - La página aparece ampliada al 200%
maximum-scale=3.0 - El usuario puede hacer zoom hasta 300% máximo
minimum-scale=0.5 - El usuario puede reducir hasta 50% mínimo
user-scalable=no - Impide que el usuario haga zoom (no recomendado por accesibilidad)
user-scalable=yes - Permite zoom (por defecto)
Lo más común y recomendado es width=device-width, initial-scale=1.0 que muestra la página a tamaño normal y permite zoom.

<title> - Título que aparece en la pestaña del navegador y en los resultados de búsqueda de Google. Recomendado: 50-60 caracteres máximo.
<meta name="description"> - Descripción breve que aparece en los resultados de búsqueda. Importante para SEO. Longitud recomendada: 150-160 caracteres.
<meta name="keywords"> - Palabras clave relacionadas con el contenido, separadas por comas. Menos relevante actualmente para SEO, pero útil para documentación.
<meta name="author"> - Identifica al creador o autor del documento. Puede incluir nombre completo, empresa o seudónimo.
<meta name="language"> - Especifica el idioma del contenido. Valores comunes: es (español), en (inglés), fr (francés).
<meta name="robots"> - Controla el comportamiento de los buscadores:

index, follow - Indexa la página y sigue enlaces (por defecto)
noindex, follow - No indexa pero sigue enlaces
index, nofollow - Indexa pero no sigue enlaces
none - No indexa ni sigue enlaces

<meta name="date"> - Fecha de creación o última modificación en formato YYYY-MM-DD.

Estos metadatos mejoran la accesibilidad, SEO y funcionalidad de la página web.

Layout básico - parte 1

El layout básico más simple es que la página tenga tres partes: Una cabecera (header), una zona principal (main) y un pie (footer).

Además los elementos son de tipo bloque, es decir que ocupan todo el ancho de la página y la altura determinada por el contenido. Eso permite que puedan crecer hacia abajo indefinidamente

Layout básico - parte 2

Pero con el HTML solamente no se aprecia la estructura. Por eso vamos a añadirle colores a cada parte

Ahora podemos apreciar lo que queríamos decir con "elementos bloque". Ocupan todo el ancho de la página y se van apilando hacia abajo. Sin embargo un párrafo se va construyendo de izquierda a derecha y se denomina un "elemento inline"

Sin embargo, tal como decíamos, los elementos bloque sólo ocupan el espacio vertical que precise el contenido, por lo que una página así no queda bien y tendremos que fijar un alto para cada elemento en la asi

Layout básico - parte 3

layout-básico parte 4

En este caso podemos apreciar que tenemos las tres bandas horizontales principales (header, main y footer) claramente diferenciadas. Además, la zona central está definida por un contenedor que agrupa los elementos relacionados (sidebar y main) con la propiedad de que cuando la pantalla se hace pequeña el main cae debajo del sidebar (para que se pueda ver en móviles)