El editor y el documento HTML

Empezarás identificando qué es un documento HTML y construirás tu primera página. El recorrido orientativo reserva 5 minutos al punto de partida, 25 a la explicación, 140 al trabajo y 10 a comprobar lo aprendido.

Se explica

25 minutos · conceptos y demostración

Hoy no se memoriza ninguna lista de etiquetas. Se trata de entender cuatro cosas que vas a usar durante seis semanas: qué te da un editor de código, qué es un elemento, por qué el navegador no te sirve como corrector y qué declara cada pieza del esqueleto de un documento.

Un editor no es un Bloc de notas con colores

Durante el módulo usaremos Visual Studio Code. Nos ayuda a organizar proyectos, detectar errores, navegar entre archivos, completar y formatear código, buscar información y ejecutar herramientas.

Su desconocimiento previo no supone ningún obstáculo: aprender a manejar herramientas nuevas forma parte del trabajo.

VS Code ya trae de serie todo lo que necesitamos para HTML: resaltado de sintaxis, sugerencias, cierre automático de etiquetas, documentación al pasar el ratón, formateo y Emmet. El resultado lo comprobaremos en el navegador. No hace falta instalar diez extensiones para empezar.

Un sitio web está formado por un conjunto de archivos que se referencian entre sí, y no por un archivo aislado. Si abres archivos sueltos, el editor no sabe dónde está la raíz del sitio.

Un programa que revisa mientras escribes

Linter

Un programa que analiza el código mientras lo escribes y avisa de errores y malas prácticas, sin llegar a ejecutarlo.

La única extensión obligatoria del módulo es HTMLHint. Avisará de cosas como estas, y sus avisos aparecen en el panel de problemas, en View → Problems:

<h1>Mi web

<img src="">

También existe Prettier, que aplica automáticamente un formato consistente. Puedes instalarlo, pero durante las primeras sesiones no vamos a depender de él: primero tienes que aprender a escribir código legible tú. Automatizar lo que no sabes hacer a mano solo esconde el problema.

Elemento, etiqueta y atributo no son lo mismo

Se usan como sinónimos y no lo son.

<p>Hola</p>

<p>       etiqueta de apertura
Hola      contenido
</p>      etiqueta de cierre

Elemento

La unidad completa: apertura, contenido y cierre. La etiqueta es solo la marca que lo delimita. Cuando decimos «un párrafo» hablamos del elemento; cuando decimos «falta el </p>» hablamos de la etiqueta.

Los elementos contienen otros elementos, y eso crea una estructura jerárquica, un árbol, que es lo que después leerán el CSS, el buscador y el lector de pantalla.

<p>
    Estoy estudiando <strong>DAW</strong>.
</p>

Los elementos tienen atributos, que aportan información adicional sobre ellos:

<html lang="es">

elemento    html
atributo    lang
valor       es

Algunos elementos están vacíos: no envuelven nada, aportan algo por sí mismos, se escriben con una sola etiqueta y no se cierran. Escribir </img> no es otro estilo, es un error.

<meta charset="UTF-8">
<img src="teclado.webp" alt="Teclado mecánico compacto">
<br>
<hr>

<!-- Correcto -->
<p>Un <strong>teclado <em>mecánico</em></strong> compacto.</p>

<!-- Incorrecto -->
<p>Un <strong>teclado <em>mecánico</strong></em> compacto.</p>

El navegador no es un corrector

Este documento tiene cierres importantes pendientes y le faltan las declaraciones que vamos a aprender. Observa especialmente <title>: si no lo cierras, el navegador puede interpretar como texto del título lo que pretendías mostrar en la página.

<html>
<head>
<title>PixelStore
</head>
<body>
<h1>Bienvenido
<p>Componentes para desarrolladores
</body>

Ábrelo: el contenido no aparece en la página, porque falta </title>. Añade ese cierre justo después de «PixelStore», guarda y recarga. Ahora aparece contenido, aunque todavía quedan problemas. El navegador aplica reglas para procesar HTML incompleto; algunos errores producen cambios visibles y otros pasan inadvertidos.

Que una página se vea bien no demuestra que su HTML esté bien. Hay que revisar también su estructura.

Recuerda esta frase, porque es el hilo de toda la unidad y volveremos a ella en la sesión 6.

Las cinco piezas del esqueleto

Usaremos estas cinco piezas en el esqueleto de nuestras páginas. Las escribirás a mano en el paso 3 y comprobarás algunos cambios en el paso 5. La ausencia de una declaración no siempre produce un síntoma visible: depende también del navegador y de cómo se abra el archivo.

Se trabaja

140 minutos · práctica sobre tu propio proyecto

Los siete pasos retiran la ayuda poco a poco: primero copias, después completas, después reparas y al final decides tú. Comprueba cada paso antes de pasar al siguiente, porque casi todos dejan algo escrito que se reutiliza más adelante.

Paso 1 · Montar el entorno · 15 min

1. Crea una carpeta para tu proyecto. Por ejemplo mi-web.
2. En VS Code, Archivo → Abrir carpeta, y selecciona la carpeta, no un archivo.
3. En el explorador lateral, crea index.html. Ese nombre no es casual: es el que los servidores sirven por defecto como página principal.
4. Instala HTMLHint desde Ctrl + Shift + X.
5. Localiza estas zonas, porque las vas a usar seis semanas: Explorer, Search, Extensions, el editor, la barra de estado y el panel Problems.
6. Abre la paleta de comandos con Ctrl + Shift + P y pruébala escribiendo Format Document. Permite ejecutar prácticamente cualquier acción de VS Code por su nombre, en lugar de recordar en qué menú está.

Antes de continuar: la carpeta está abierta como proyecto, index.html existe y HTMLHint aparece entre las extensiones instaladas.

Paso 2 · Del ejemplo resuelto al documento propio · 25 min

Todavía no tienes que inventar una solución desde cero. Avanza de una versión resuelta a otra con menos ayuda.

2.1 · Observa uno resuelto

<h1>Aula web</h1>
<h2>Primer curso</h2>
<p>Hoy abrimos nuestro <strong>primer proyecto</strong>.</p>

El primer encabezado nombra la página, el segundo introduce un nivel inferior, el párrafo agrupa una idea y strong señala importancia. Copia el fragmento, cambia cada texto y comprueba qué permanece igual.

2.2 · Completa cuatro huecos

<__>Mi portfolio</__>
<h2>Sobre mí</h2>
<__>Estoy aprendiendo <strong>HTML</strong>.</__>

2.3 · Repara uno parecido

<h1>Proyecto de clase<h1>
<h2>Objetivo</h3>
<p>Construir una web completa.</p>

Explica cada reparación antes de hacerla.

2.4 · Ahora sí, reconstruye

Esto es lo que debe verse en el navegador. Ahora no recibes el código, solo el resultado:

Marc Semper
Desarrollo de Aplicaciones Web
Primer curso

Bienvenido a mi primera página web. Estoy aprendiendo a estructurar
documentos utilizando HTML5 estándar.

Escribe el HTML mínimo que represente esa información: un encabezado principal, un encabezado secundario, un párrafo, y énfasis donde tenga sentido.

La palabra importante es mínimo. Si has escrito una etiqueta que no aporta significado, sobra.

Paso 3 · El esqueleto completo, escrito a mano · 20 min

Todavía no vamos a usar atajos. Escribe esto letra a letra, en index.html:

<!doctype html>

<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Mi primera web</title>
</head>

<body>
    <h1>Mi primera página web</h1>

    <p>
        Esta página está construida utilizando HTML.
    </p>
</body>

</html>

Mi primera página web

Esta página está construida utilizando HTML.

El title aparecería en la pestaña; dentro de la página vemos lo que contiene body.

Guarda con Ctrl + S. Localiza index.html en el explorador de archivos y ábrelo con tu navegador. Después de cada cambio, guarda de nuevo y recarga la pestaña. Durante el desarrollo tendrás normalmente estas dos cosas a la vista:

1. Escribes en VS Code
2. Guardas
3. Miras el resultado en el navegador

Consultar · qué declara cada pieza, una por una

<!doctype html> indica al navegador que el documento es HTML moderno. Sin él, el navegador entra en modo compatibilidad y aplica reglas de hace veinte años.

<html lang="es"> es el elemento raíz: todo lo demás va dentro. El atributo lang declara el idioma principal, y lo usan los lectores de pantalla para elegir la voz y la pronunciación, los navegadores para ofrecer traducción, y los buscadores para clasificar la página. Si no lo declaras, la herramienta puede recurrir a otra información o a su configuración y elegir una pronunciación inadecuada; no cambia necesariamente al inglés.

<head> contiene información sobre el documento. Nada de lo que hay aquí se ve en la ventana.

<meta charset="UTF-8"> define la codificación: cómo se traducen los bytes del archivo a caracteres. Gracias a UTF-8 se escriben correctamente á é í ó ú, ñ, € y ¿ ?. Si el archivo se interpreta con una codificación distinta de la que se utilizó al guardarlo, pueden aparecer caracteres extraños. Omitir esta declaración no produce siempre ese fallo: el navegador puede obtener la codificación por otra vía.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> indica al navegador que use el ancho real del dispositivo. Sin él, un navegador móvil puede utilizar un área de escritorio y reducirla para mostrarla en la pantalla. Se entiende del todo al estudiar CSS responsive; por ahora forma parte de la estructura fija.

<title> no aparece dentro de la página: aparece en la pestaña, en los favoritos y como titular en un buscador. Compara <title>Inicio</title> con <title>PixelStore | Componentes para desarrolladores</title> e imagina cuál identifica la web en una lista de veinte pestañas abiertas.

<body> contiene el contenido que verá el usuario.

Antes de continuar: el documento se abre en el navegador, el título aparece en la pestaña y el panel de problemas está en cero.

Paso 4 · Reparar un documento roto · 25 min

Copia en un archivo roto.html el fragmento defectuoso de la explicación.

4.1 · Ejemplo resuelto

¿Qué está mal?

La etiqueta <title> se abre y nunca se cierra antes de </head>.

¿Qué hace el navegador con eso?

Sigue leyendo el resto del archivo como texto del título. </head> no sustituye a </title>: en este ejemplo el cuerpo queda sin el contenido esperado.

¿A quién perjudica?

A quien visita la página: el contenido no está en el cuerpo del documento y no puede utilizarse como estaba previsto. También se altera la estructura que reciben las herramientas de accesibilidad.

Corrección

<title>PixelStore</title>

No basta con decir «falta una etiqueta»: interesa qué consecuencia tiene, porque es lo que te permitirá priorizar cuando encuentres veinte fallos a la vez.

4.2 · Ahora tú

1. Abre el panel de problemas con Ctrl + Shift + M y anota qué detecta HTMLHint y qué no.
2. Cierra primero title y comprueba el cambio. Después añade doctype, lang, codificación y viewport, y escribe explícitamente los cierres del esqueleto y del contenido.
3. Al final del archivo, escribe un comentario HTML explicando tres correcciones del original: qué cambiaste, para qué sirve y si observaste un efecto en el navegador.

Estoy atascado · cómo explicar una corrección

Por ejemplo: «He añadido el cierre de title. Antes el cuerpo no mostraba el contenido; después aparecen los encabezados y el párrafo». Para lang puedes indicar que declara el idioma aunque no cambie la apariencia. Distingue lo que has observado de lo que sabes que aporta cada declaración.

Paso 5 · Cambia la página y observa el resultado · 25 min

Sobre una copia de la página del paso 3, realiza estos seis cambios de uno en uno. Guarda, recarga y observa antes de deshacer cada cambio. No todos son errores: queremos distinguir un cambio válido, un problema de estructura y una declaración ausente.

1. Elimina </h1>.
2. Elimina </body>.
3. Escribe una etiqueta que no existe, como <titulo>.
4. Duplica un párrafo completo: <p>Texto de prueba.</p>.
5. Cambia UTF-8 por ISO-8859-1.
6. Elimina lang.

Registra cada uno en esta tabla:

Al terminar, restaura el documento inicial. Duplicar un párrafo es válido, aunque quizá repita contenido innecesario. En este documento, omitir </body> también está permitido por HTML; seguiremos escribiéndolo para reconocer mejor el esqueleto. En cambio, el encabezado necesita su cierre y <titulo> no es una etiqueta estándar. La codificación y el idioma requieren comprobar su función, aunque no siempre cambien lo que ves. HTMLHint solo detecta lo que contemplan sus reglas: cero avisos no demuestra que todo sea correcto.

Paso 6 · Emmet, ahora que ya sabes escribirlo · 10 min

Has escrito el esqueleto a mano, así que ya puedes abreviarlo. VS Code incluye Emmet: escribe ! y pulsa Tab para generar la estructura completa de un documento. O escribe p*3, que genera tres párrafos:

<p></p>
<p></p>
<p></p>

Prueba ambas abreviaturas en un archivo de pruebas y compara el resultado con lo que escribiste a mano en el paso 3.

Paso 7 · La portada de tu proyecto · 20 min

Construye index.html en la raíz de tu carpeta, ahora como portada real del sitio que entregarás dentro de seis semanas y no como un ejercicio desechable:

• El esqueleto completo y los cuatro metadatos correctos.
• Un <title> descriptivo, con el tema de tu proyecto.
• Un único <h1> con el nombre del proyecto.
• Al menos tres <h2> que dividan la portada en áreas temáticas.
• Párrafos descriptivos reales, con una descripción del proyecto.

Ampliación si has completado el trabajo

Primero termina y comprueba los siete pasos. Estos dos retos no sustituyen la entrega ni añaden etiquetas nuevas: se resuelven con lo que ya sabes, y lo que exigen es decidir y justificar. No tienen una única solución correcta, así que no se acaban tecleando deprisa.

Reto 1 · Marcar un texto que no has escrito

Un cliente entrega este texto sin ninguna marca, tal como lo escribiría en un correo. Conviértelo en un documento HTML completo usando solo encabezados, párrafos, strong y em.

TALLER BICICLETA URBANA

Reparamos bicicletas de ciudad desde 2011 en el barrio de Russafa. Somos
tres mecánicos y atendemos sin cita previa.

Qué hacemos

Ponemos a punto frenos, cambios y transmisión. Montamos ruedas a medida.
Reparamos pinchazos en el momento, normalmente en menos de veinte minutos.
También revisamos bicicletas eléctricas, aunque no reparamos motores ni
baterías: para eso derivamos al servicio técnico de cada marca.

Horario

De lunes a viernes, de 9:30 a 14:00 y de 16:30 a 20:00. Los sábados solo
por la mañana. Cerramos en agosto.

Antes de venir

Si la bicicleta no frena, no la traigas rodando. Es el motivo más
frecuente de accidente entre nuestros clientes.

El texto plano no dice qué es cada cosa, y ahí está el trabajo. Escribe debajo del documento, en un comentario HTML, la respuesta a estas cuatro decisiones:

1. Cuántos niveles de encabezado necesita y por qué no más ni menos. El nombre del taller y los tres rótulos intermedios, ¿están al mismo nivel?
2. Dónde termina un párrafo y empieza otro. El bloque de «Qué hacemos» describe cuatro servicios seguidos: ¿es un párrafo o son varios? Justifica el criterio que aplicas, no el resultado.
3. Qué merece strong y qué no merece ninguna marca. El aviso sobre los frenos y el cierre de agosto compiten por esa marca; «en menos de veinte minutos» probablemente no. Si todo se marca como importante, nada lo es.
4. Qué información del texto no puedes representar todavía con lo que sabes. Nómbrala y di qué elemento crees que le corresponderá.

Compara después tu documento con el de otra persona. Donde las dos marcas coincidan, el texto era claro; donde difieran, hay una decisión que cada parte debe poder defender.

Reto 2 · El esqueleto de tres webs reales

Abre tres sitios web que uses de verdad. En cada uno, muestra el código fuente con Ctrl + U y localiza las cinco piezas de la tabla de la explicación.

Para el title, además de anotar si existe, copia su contenido y valora si identifica la página en una lista de veinte pestañas.

Responde al terminar:

1. ¿Alguno declara un lang que no corresponde a su idioma real? Es un fallo frecuente y no produce ningún síntoma visible.
2. ¿Alguno carece de alguna de las cinco piezas? Anota cuál y qué consecuencia tendría, según la tabla.
3. Las tres páginas se ven correctamente en tu navegador. Relaciona ese hecho con la frase de la explicación.

Cierre

10 minutos · comprobación y recuerdo

Ver respuestas

1 · Para que el editor conozca la raíz del proyecto: así resuelve y autocompleta las rutas relativas, busca en todos los archivos y aplica el linter a todo el sitio.

2 · El elemento es la unidad completa: apertura, contenido y cierre. La etiqueta es la marca que lo delimita.

3 · Por ejemplo <meta>, <img>, <br> o <hr>.

4 · Porque rompe el orden de anidación: em se abrió el último y debería cerrarse el primero. El navegador reconstruye un árbol distinto del escrito, y ese árbol es el que verán el CSS, el buscador y el lector de pantalla.

5 · Pueden aparecer caracteres extraños. Que los acentos se vean bien no demuestra por sí solo que hayas incluido la declaración de codificación.

6 · Dos párrafos completos pueden ser HTML válido, aunque su contenido esté repetido. La corrección de la sintaxis y la calidad del contenido son comprobaciones diferentes.

---