learning-front

Nivel 1 · HTML y CSS: la estructura y la piel

Qué es HTML: tu primera página

HTML es el lenguaje con el que se describe una página. Aquí ves qué es una etiqueta, cómo se monta el esqueleto de un documento y cómo abrir tu primer fichero .html en el navegador. Empezamos de cero.

Una página web no es un objeto mágico: es un fichero de texto. Lo escribes con letras normales, lo guardas, lo abres con el navegador y el navegador lo convierte en algo que se ve. Ese texto está escrito en HTML, y aprender frontend empieza por entender exactamente qué es ese texto y cómo se organiza. No hace falta nada previo: vamos desde la primera línea.

Aquí arranca el Overwatch Team Builder, el proyecto que crece contigo durante todo el curso. Su primera pieza es la más pequeña posible: una página que muestra la ficha de un héroe.

HTML describe, no programa#

HTML son las siglas de HyperText Markup Language: un lenguaje de marcado. Marcar significa rodear cada trozo de contenido con una marca que dice qué es: “esto es un título”, “esto es un párrafo”, “esto es una imagen”. Y ya está. HTML no hace cuentas, no toma decisiones, no guarda datos. Solo nombra las partes de la página.

Esa distinción importa desde el primer día, porque el frontend se reparte en tres lenguajes con tres trabajos distintos, y conviene no mezclarlos en la cabeza:

  • HTML — la estructura: qué hay en la página y qué es cada cosa.
  • CSS — el aspecto: cómo se ve (colores, tamaños, posición). Lo verás a partir del capítulo Qué es CSS.
  • JavaScript — el comportamiento: qué pasa cuando interactúas. Es el Nivel 2.

En este capítulo solo tocamos el primero.

Una etiqueta, un elemento, un atributo#

Esta es la unidad básica de HTML. Míralo despacio:

html
<h1>Tracer</h1>
  • <h1> es una etiqueta de apertura. Le dice al navegador “aquí empieza un encabezado”.
  • Tracer es el contenido: lo que se verá.
  • </h1> es la etiqueta de cierre. La barra / indica que aquí termina. El navegador no muestra las etiquetas: las usa para entender el texto.

Las tres cosas juntas —apertura, contenido y cierre— forman un elemento. Un elemento es la pieza completa; la etiqueta es solo la marca.

A una etiqueta de apertura se le pueden añadir atributos: información extra en forma nombre="valor". Por ejemplo, para decir en qué idioma está la página:

html
<html lang="es">

Aquí la etiqueta es <html> y el atributo es lang, con el valor "es" (español). Los atributos no se ven en la página; configuran o describen el elemento.

Hay un puñado de elementos que no tienen contenido y, por tanto, no llevan cierre. Se escriben en una sola etiqueta, a menudo con una barra al final por costumbre:

html
<meta charset="utf-8" />

<meta> no envuelve nada: solo aporta un dato (aquí, la codificación del texto). Estos elementos “vacíos” son la excepción; la inmensa mayoría se abren y se cierran.

Cómo se anidan#

Los elementos se meten unos dentro de otros, formando una jerarquía. A eso se le llama anidamiento, y tiene una sola regla de oro: se cierran en el orden inverso al que se abren, como muñecas rusas. El último en abrirse es el primero en cerrarse.

html
<body>
  <h1>Tracer</h1>
  <p>Héroe de daño.</p>
</body>

<h1> y <p> están dentro de <body>, así que <body> se cierra el último. Esto está mal, porque las etiquetas se cruzan:

html
<!-- MAL: <p> se abre dentro de <h1> pero se cierra fuera -->
<h1>Tracer <p>Héroe</h1></p>

La sangría (los espacios al principio de cada línea) no es obligatoria para el navegador, pero hace el anidamiento evidente de un vistazo. Sángralo siempre.

El esqueleto de toda página#

Cualquier documento HTML, por pequeño que sea, tiene la misma estructura mínima. Este es el esqueleto que vas a escribir una y otra vez:

html
<!-- declara que el documento sigue HTML moderno -->
<!doctype html>
<!-- elemento raíz; lang="es" indica el idioma -->
<html lang="es">
  <!-- información para el navegador (no se ve) -->
  <head>
    <!-- codificación del texto: tildes y ñ correctas -->
    <meta charset="utf-8" />
    <!-- le dice al móvil que use su ancho real -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- texto de la pestaña y los buscadores -->
    <title>Tracer — Overwatch Team Builder</title>
  </head>
  <!-- todo lo que se ve en la ventana -->
  <body>
    <!-- encabezado principal: el título de la página -->
    <h1>Tracer</h1>
    <!-- párrafo de texto -->
    <p>Héroe de daño.</p>
  </body>
</html>

Pieza a pieza:

  • <!doctype html> — la primera línea, siempre. Le dice al navegador “interpreta esto con las reglas modernas”. No es una etiqueta normal; es una declaración, y va sola.
  • <html lang="es"> — el elemento que envuelve todo lo demás. El lang declara el idioma.
  • <head> y <body> — los dos hijos de <html>, y la división más importante del documento.

head y body: lo que el navegador necesita y lo que se ve#

Es la distinción que más cuesta al principio, y la que más se usa:

  • El <head> guarda información para el navegador, que no se ve en la página: la codificación del texto (<meta charset>), el título de la pestaña (<title>) y, más adelante, los enlaces a las hojas de estilo.
  • El <body> contiene todo lo que se ve en la ventana: títulos, párrafos, imágenes, enlaces, botones.

Dos piezas del <head> que ya usas en el esqueleto:

  • <meta charset="utf-8" /> declara que el texto está en utf-8, la codificación que entiende cualquier carácter: tildes, la ñ, símbolos. Sin ella, “Campeón” puede acabar mostrándose como “Campeón”. Es de lo primero que se escribe.
  • <title> es el nombre de la página: lo que aparece en la pestaña del navegador, en un marcador guardado y en los resultados de Google. No se ve dentro de la página, pero importa mucho fuera de ella.

También en el <head> irá casi siempre esta línea:

html
<!-- le dice al móvil que use su ancho real, no el de escritorio -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

Le dice al móvil que use su ancho real en vez de fingir ser una pantalla de escritorio. Sin ella, un diseño pensado para móvil no se activa. La verás a fondo en el capítulo de Responsive; por ahora basta con saber que va aquí y para qué sirve.

Tu primer fichero, paso a paso#

  1. Crea un fichero de texto y nómbralo index.html. La extensión .html es lo que le dice al sistema (y al navegador) que es una página.
  2. Escribe dentro el esqueleto de arriba.
  3. Ábrelo en el navegador: doble clic sobre el fichero, o botón derecho → “Abrir con…”. No hace falta ningún programa especial ni ningún servidor: el navegador abre ficheros locales.

Una última herramienta: los comentarios. Un comentario es una nota para quien lee el código que el navegador ignora por completo. Se escribe entre <!-- y -->:

html
<!-- Esto no se ve en la página: es una nota para mí -->

Pruébalo#

Esta es una página mínima, con su esqueleto completo. A la izquierda, el HTML; a la derecha, lo que el navegador pinta. Cambia el texto del <h1> o de los <p>, añade otro párrafo, y observa cómo cambia al instante. Fíjate en que, sin una sola línea de CSS, el navegador ya muestra el título grande: son sus estilos por defecto.

Comprueba lo que sabes#

Pregunta 1 de 5

¿Qué es HTML?

Tu turno#

Escribe tu primera página de cero aquí mismo, en el playground de abajo. No hay CSS: lo que importa es que el documento esté bien construido. Parte del starter, edita el HTML en la pestaña izquierda y observa el resultado en el preview. Cuando creas que lo tienes, despliega las soluciones y compáralas con la tuya.

Ejercicio · en esta página

Tu primera página HTML

Escribe de cero la ficha de un héroe en HTML: el esqueleto completo (doctype, html, head y body) con un meta charset, un title, un h1 con el nombre y uno o dos párrafos de descripción. Luego ábrela en tu navegador con doble clic, sin ningún servidor. No hay CSS todavía: lo que se evalúa es que el documento esté bien construido.

Paso 1: Que se vea

  • El navegador muestra el nombre del héroe y su descripción.
  • Vale aunque le falte el esqueleto (sin doctype, sin head, sin charset).
Ver soluciones 
<html>
  <body>
    <h1>Tracer</h1>
    <p>Héroe de daño. Rápida y escurridiza: su trabajo es presionar la retaguardia rival.</p>
    <p>Partidas jugadas: 120. Victorias: 78.</p>
  </body>
</html>

Por qué este nivel

  • Funciona: el navegador muestra el nombre y la descripción. Ese es el primer requisito, y lo cumple.
  • Le falta el esqueleto. Sin <!doctype html>, el navegador puede caer en un modo de compatibilidad antiguo; y sin <head>, no hay sitio para la información que el navegador necesita.
  • Sin <meta charset="utf-8">, las tildes y la ñ de la descripción pueden salir como caracteres rotos. Y sin <title>, la pestaña muestra la ruta del fichero en vez de un nombre.