Apuntes html

HTML nunca falla, solo se ve raro.

Introducción: ¿Qué se necesita para escribir páginas web?

Escribir páginas web es muy sencillo. Con unas pocas nociones y en poco tiempo, cualquiera puede aprender a crear páginas web que se vean bien en cualquier ordenador o dispositivo. Las páginas web se escriben en lenguaje HTML: es un lenguaje de marcas, universal y sencillo, diseñado para ser interpretado por cualquier navegador web (como Chrome, Firefox o Safari), independientemente del fabricante o del sistema operativo.

En estas lecciones aprenderás los fundamentos para crear páginas web. Pronto descubrirás que pensar en el contenido de tu página es más complicado que aprender a escribir el código HTML.

¿Qué necesito para aprender HTML?

Para aprender HTML no necesitas nada especial. Es un lenguaje sencillo, basado en etiquetas (o marcas, tags en inglés), que describen la estructura y el propósito de cada parte de tu página. Las etiquetas son fáciles de entender, incluso para principiantes.

Puedes aprender a escribir HTML de muchas formas:

  • Mirando el código fuente de páginas web que te gusten (en tu navegador, haz clic derecho y selecciona "Ver código fuente" o usa las herramientas de desarrollador con F12).
  • Consultando manuales en línea, como este.
  • O incluso tomando notas en una servilleta mientras tomas un café.

No necesitas experiencia previa ni herramientas caras. Solo curiosidad y ganas de experimentar.

¿Qué necesito para escribir HTML?

Para escribir HTML necesitas muy poco:

  • Un ordenador: Cualquier ordenador sirve, no importa si es viejo o nuevo.
  • Un editor de texto: Cualquier editor que guarde archivos en formato de texto plano (con extensión .txt) es suficiente. Por ejemplo, el Bloc de Notas (Notepad) de Windows funciona perfectamente. Sin embargo, editores modernos como Visual Studio Code, Notepad++ o Sublime Text son más cómodos porque resaltan el código y ofrecen herramientas útiles. Muchos son gratuitos y fáciles de conseguir en internet.
  • Un navegador: Para ver el resultado de tu trabajo necesitas un navegador como Chrome, Firefox, Safari o Edge. No hace falta estar conectado a internet: puedes escribir y probar tus páginas directamente en tu ordenador.

Nota sobre editores

Aunque puedes usar editores visuales (como Wix o programas que generan HTML automáticamente), no son ideales para aprender. Estos programas ocultan las etiquetas y no te dan control sobre el código. Para dominar HTML, es mejor escribir las etiquetas tú mismo en un editor de texto plano. Si quieres una recomendación, Visual Studio Code es gratuito, fácil de usar y muy popular actualmente entre desarrolladores.

Publicar tu página

Para que tu página sea visible en internet, necesitarás un servicio de alojamiento web (hosting). Hoy en día, plataformas como GitHub Pages, Netlify o Vercel ofrecen espacio gratuito para publicar páginas. Pero no te preocupes por esto ahora: primero aprenderás a crear páginas y probarlas en tu ordenador.

Antes de empezar

La forma de escribir páginas web ha evolucionado mucho desde los comienzos de internet, allá en la década de los 90. HTML precede a otros lenguajes y herramientas web, como CSS o javascript, lo que significa que originariamente, HTML tenía que ser autosuficiente. El propio lenguaje se usaba para estructurar el documento, y para darle un mínimo control de su apariencia (color de texto, alineación etc). Las consecuencias de esta necesidad de autosuficiencia fueron, entre otras, la de su fragmentación. Las páginas web no se vveían igual en los navegadores de entonces.
Hoy, el estándar HTML5 se centra en la estructura y el contenido de la página, mientras que los estilos (colores, fuentes, disposición) se manejan con CSS (hojas de estilo en cascada).

En este manual nos centramos en escribir HTML limpio y estándar, que se vea bien en cualquier navegador moderno. Evitaremos trucos específicos de un navegador y etiquetas obsoletas que ya no son recomendables. El resultado será código simple, claro y preparado para el futuro.

CSS será imprescindible para dar estilo a tus páginas, pero lo trataremos en un manual separado. Aunque en estos apuntes mencionaremos el uso de CSS cuando sea aconsejable, dejamos su desarrollo para los apunbtes correspondientes. Los apuntes no estan diseñados para leerse uno despues de otro, sino como material de consulta.

Primeros pasos:

HTML (HyperText Markup Language) es un lenguaje de etiquetas que indica al navegador cómo tiene que estructurar y mostrar una página web. Estas etiquetas son instrucciones simples, encerradas entre < y >, que marcan diferentes partes del documento. Por ejemplo: 

<strong>Este texto está en negrita</strong>

En este caso:

  • <strong> y </strong> son las etiquetas (la primera abre, la segunda cierra).
  • El texto entre ellas ("Este texto está en negrita") es lo que se ve en el navegador.
  • La barra / en la etiqueta de cierre distingue el final del elemento.

El navegador lee las etiquetas, las interpreta y muestra el contenido según sus instrucciones, pero no muestra las etiquetas mismas.

puedes ver el efecto en este ejemplo.

Reglas básicas de las etiquetas

  1. Escribir en minúsculas: Aunque HTML5 permite mayúsculas o minúsculas (<P> y <p> son lo mismo), la convención moderna es usar minúsculas para que el código sea más legible y consistente.
  2. Etiquetado en pares: La mayoría de las etiquetas funcionan en pareja (una de apertura y una de cierre). Por ejemplo: <p>Texto</p>.
  3. Etiquetas simples: Algunas etiquetas no encierran contenido y se escriben solas, como <br> (que inserta un salto de línea). Aunque en HTML5 puedes escribir <br> o <br/>, es recomendable usar la primera forma.

Las etiquetas y atributos que uses deben seguir el estándar HTML5 para garantizar que tu página funcione correctamente en todos los navegadores. Para mantener la homogeneidad, las etiquetas, atributos y valores que puedes utilizar son solamente las admitidas en el estándar HTML5, es decir, no puedes inventarte tu propia etiqueta o atributos.

Anidamiento de etiquetas

Las etiquetas HTML no solo se usan de forma individual; también puedes incluir unas dentro de otras. A esto se le llama anidamiento. Por ejemplo: 

<strong>Texto en negrita</strong>
<em>Texto en cursiva</em>
<strong><em>Texto en negrita y cursiva</em></strong>

Cuando anidas etiquetas, debes cerrarlas en el orden inverso al que las abriste para mantener la simetría. Esto es correcto:

<strong><em>Texto</em></strong>

Pero esto es incorrecto, porque rompe la simetría:

<strong><em>Texto</strong></em>

El anidamiento te permite combinar efectos o estructurar contenido, pero debe hacerse con cuidado para que el navegador interprete correctamente el código.

Nota sobre estilos

Algunas etiquetas, como <strong> o <em>, indican importancia (énfasis), y suelen representarse por los navegadores en negrita y cursiva respectivamente. Pero si tu intención es solamente lograr un efecto visual, no remarcar la especial importacia de algún texto, ten en cuenta que dicha apariencia puede obtenerse con CSS.
Por ejemplo, si quieres que aparezca un texto en negrita no por ser importante, sino por el efecto visual que deseas, podrías usar CSS para aplicar negrita a cualquier elemento, en lugar de strong: 

span.negrita { font-weight: bold; }

Estas posibilidades las veremos en el manual de CSS. Por ahora, retén la idea de que HTML se centra en la estructura de la página y el significado del contenido, mientras que CSS se encarga de la presentación visual.

Aunque estos apuntes se centran en HTML y no en CSS, haremos alguna referencia a las reglas de estilo, para destacar las buenas prácticas.

Elementos y atributos

Una página web está formada por elementos: un párrafo, una imagen, un enlace, un salto de línea, etc. Cada elemento está marcado por etiquetas. Además, las etiquetas pueden incluir atributos, que dan información extra sobre el elemento. Los atributos se escriben en la etiqueta de apertura con la sintaxis atributo="valor". Por ejemplo: 

<img src="foto.jpg" alt="Una foto">

Aquí, <img> es la etiqueta, y src="foto.jpg" y alt="Una foto" son atributos que indican la ubicación de la imagen y una descripción que se utiliza cuando la foto no puede mostrarse, para mejorar la accesibilidad.

Puedes usar varios atributos en una misma etiqueta, en cualquier orden. Por ejemplo:

<a href="https://ejemplo.com" title="Visitar ejemplo">Enlace</a>

Estructura básica de una página HTML

Toda página HTML tiene una estructura básica que actúa como el esqueleto del documento:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Título de la página</title>
</head>
<body>
  <!-- Aquí va el contenido visible -->
</body>
</html>

Explicación de las etiquetas

  • <!DOCTYPE html>: Va al principio y le dice al navegador que el documento usa HTML5. Esta es una de las etiquetas que no tiene etiqueta de cierre. Sin ella, el navegador podría interpretar el código de forma incorrecta.
  • <html lang="es">: Indica que el documento es HTML y que está en español (aunque no es obligatoria, es útil para accesibilidad y buscadores).
  • <head>: Contiene información sobre la página que no se visualiza directamente, pero el navegador utiliza e interpreta, como el título, metadatos y enlaces a archivos CSS. Mas adelante hablaremos con mas detalle sobre ello. El <title> es obligatorio y aparece en la pestaña del navegador o en los marcadores.
  • <meta charset="UTF-8">: importante ya que asegura que caracteres como ñ o á se muestren correctamente.
  • <body>: Aquí va todo el contenido visible: textos, imágenes, enlaces, etc.

Tu primera página: "Adiós, mundo cruel"

Vamos a crear una página sencilla con un párrafo que diga "Adiós, mundo cruel". Este es el código completo, donde verás que introducimos una etiqueta nueva: p de párrafo, indica que encierra anidamiento. Por texto: 

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Una página de prueba</title>
</head>
<body>
  <p>Adiós, mundo cruel...</p>
</body>
</html>

Cómo crearla

  1. Abre un editor de texto (Bloc de Notas, VS Code, etc.).

  2. Escribe o copia el código de arriba. Asegúrate de escribir las etiquetas en minúsculas.

  3. Guarda el archivo en el editor con la extensión html (por ejemplo, prueba.html):

    • Ve a Archivo > Guardar como.
    • Escribe el nombre (ej. prueba.html).
    • Asegúrate de que tu sistema operativo no oculta la extensión en los nombres de los archivos, para evitar que, por ejemplo, se guarde como prueba.html.txt
    • Elige una carpeta donde guardarlo (créate una carpeta para tus experimentos).

  4. Abre el archivo en un navegador:

    • En Chrome, Firefox, etc., ve a Archivo > Abrir archivo o arrastra el archivo al navegador (o usa el atajo de teclado, normalmente es ctrl + o.
    • Verás el párrafo "Adiós, mundo cruel..." en la página.

No necesitas internet para esto: todo funciona en tu ordenador.

¿Qué deberías ver?

Una página simple con un párrafo. El título "Una página de prueba" aparecerá en la pestaña del navegador. Si algo no funciona, revisa que:

  • El archivo tiene extensión .html.
  • No hay errores en las etiquetas (como olvidar la barra / en una etiqueta de cierre).

Recapitulación

En esta introducción hemos visto:

  • HTML es un lenguaje de etiquetas que estructura páginas web.
  • Las etiquetas marcan elementos (párrafos, imágenes, etc.) y pueden incluir atributos para dar más información.
  • Las etiquetas pueden anidarse, pero deben mantener simetría.
  • Toda página HTML se divide en dos partes: <head> (metainformación) y <body> (contenido visible).
  • Puedes escribir HTML con un editor de texto plano y verlo en un navegador, sin necesidad de internet.
  • HTML5 es el estándar actual, y CSS se encarga de los estilos.

En el próximo tema, exploraremos más etiquetas HTML para añadir contenido, como encabezados, listas o imágenes. Por ahora, experimenta con tu página "Adiós, mundo cruel": prueba cambiar el texto o el título y vuelve a abrirlo en el navegador.

TOP