Aprendiendo HTML

Guía completa desde cero hasta profesional

Introducción a HTML

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. Es un lenguaje de marcado que define la estructura y el contenido de una página web mediante el uso de etiquetas (tags). HTML no es un lenguaje de programación, sino de marcado, lo que significa que se usa para organizar y dar formato al contenido.

Características principales:

  • Define la estructura de una página web
  • Utiliza elementos (etiquetas) para marcar diferentes partes del contenido
  • Permite incluir otros recursos como imágenes, videos y scripts
  • Es interpretado por los navegadores web para mostrar el contenido

Historia y evolución de HTML

HTML fue creado por Tim Berners-Lee en 1991 como parte de la World Wide Web. Desde entonces ha evolucionado significativamente:

  • HTML 2.0 (1995): Primera versión estandarizada
  • HTML 3.2 (1997): Agregó tablas, applets y flujo de texto alrededor de imágenes
  • HTML 4.01 (1999): Introdujo hojas de estilo (CSS) y scripting
  • XHTML (2000): Versión más estricta basada en XML
  • HTML5 (2014): Versión actual con soporte para multimedia y aplicaciones web modernas

HTML5 introdujo elementos semánticos, soporte nativo para audio y video, canvas para gráficos, y mejoras en APIs para aplicaciones web.

Estructura Básica

Etiquetas fundamentales

Toda página HTML tiene una estructura básica que incluye:

<!DOCTYPE html>
<html>
<head>
    <title>Título de la página</title>
    <meta charset="UTF-8">
</head>
<body>
    Contenido visible de la página
</body>
</html>

Etiquetas esenciales:

  • <!DOCTYPE html>: Declara el tipo de documento
  • <html>: Elemento raíz que contiene todo el documento
  • <head>: Contiene metadatos y enlaces a recursos externos
  • <title>: Define el título que aparece en la pestaña del navegador
  • <body>: Contiene todo el contenido visible de la página

Comentarios y buenas prácticas

Los comentarios en HTML se escriben así:

<!-- Esto es un comentario -->

Buenas prácticas:

  • Usar indentación consistente
  • Cerrar todas las etiquetas
  • Usar minúsculas para nombres de etiquetas
  • Incluir el atributo alt en imágenes
  • Validar el código HTML
  • Separar estructura (HTML), presentación (CSS) y comportamiento (JavaScript)

Elementos de Texto

Títulos y párrafos

HTML proporciona 6 niveles de títulos:

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Encabezado de sección</h3>
...
<h6>Encabezado menor</h6>

Para párrafos:

<p>Este es un párrafo de texto.</p>
<p>Este es otro párrafo.</p>

Formato de texto

HTML ofrece varias etiquetas para formato de texto:

  • <strong> o <b>: Texto en negrita
  • <em> o <i>: Texto en cursiva
  • <u>: Texto subrayado
  • <mark>: Texto resaltado
  • <small>: Texto más pequeño
  • <sup>: Superíndice
  • <sub>: Subíndice
  • <del>: Texto eliminado (tachado)
  • <ins>: Texto insertado (subrayado)

Ejemplo:

<p>Este es un texto <strong>importante</strong> y <em>enfatizado</em>.</p>

Imágenes y Multimedia

Insertar imágenes

Para insertar imágenes:

<img src="imagen.jpg" alt="Descripción de la imagen" width="500" height="300">

Atributos importantes:

  • src: Ruta a la imagen
  • alt: Texto alternativo (accesibilidad y SEO)
  • width y height: Dimensiones (en píxeles o porcentaje)

Enlaces, video y audio

Enlaces:

<a href="https://www.ejemplo.com" target="_blank">Texto del enlace</a>

Video (HTML5):

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Tu navegador no soporta el elemento de video.
</video>

Audio (HTML5):

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Tu navegador no soporta el elemento de audio.
</audio>

Listas y Tablas

Listas ordenadas y no ordenadas

Lista no ordenada (con viñetas):

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Lista ordenada (numerada):

<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ol>

Lista de definición:

<dl>
  <dt>Término 1</dt>
  <dd>Definición 1</dd>
  <dt>Término 2</dt>
  <dd>Definición 2</dd>
</dl>

Tablas básicas

Estructura básica de una tabla:

<table border="1">
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

Elementos de tabla:

  • <table>: Contenedor principal
  • <tr>: Fila de tabla
  • <th>: Celda de encabezado
  • <td>: Celda de datos
  • <caption>: Título de la tabla
  • <thead>, <tbody>, <tfoot>: Agrupación semántica

Atributos comunes:

  • border: Grosor del borde
  • colspan: Expandir celda a través de columnas
  • rowspan: Expandir celda a través de filas