HTML desde cero

HTML (HyperText Markup Language) es el lenguaje fundamental de la web. Todas las páginas web que visitas están construidas, en gran parte, con HTML. Aprender HTML es el primer paso para convertirte en desarrollador web y crear sitios interactivos y funcionales.

¿Qué es HTML y por qué es importante?

HTML no es un lenguaje de programación, sino un lenguaje de marcado. Esto significa que su función principal es definir la estructura y contenido de una página web. Con HTML puedes:

Crear títulos y párrafos.
Insertar imágenes, videos y enlaces.
Diseñar formularios para capturar información del usuario.
Organizar contenido en listas, tablas y secciones.

Sin HTML, los navegadores no podrían mostrar el contenido de manera estructurada.

Requisitos para empezar con HTML

Antes de empezar, asegúrate de tener lo siguiente:

Una computadora con Windows, Mac o Linux.
Un navegador web moderno (Chrome, Firefox, Edge, Safari).
Un editor de texto o un IDE. Visual Studio Code es altamente recomendado por su facilidad de uso y extensiones.
Ganas de practicar y experimentar con código.

Instalación del entorno de desarrollo

Para programar en HTML no necesitas instalar software pesado, pero un buen editor hace la diferencia. Aquí te mostramos cómo instalar Visual Studio Code:

1. Descargar Visual Studio Code

Visita https://code.visualstudio.com/ y descarga la versión adecuada para tu sistema operativo.

2. Instalación en Windows

Ejecuta el instalador descargado.
Acepta los términos y condiciones.
Selecciona la carpeta de instalación o deja la predeterminada.
Marca las opciones “Agregar a PATH” y “Crear acceso directo en escritorio”.
Haz clic en “Instalar” y espera a que finalice.

3. Instalación en Mac

Abre el archivo .dmg descargado.
Arrastra el icono de Visual Studio Code a la carpeta de Aplicaciones.
Abre la aplicación y permite que se ejecute.

4. Instalación en Linux

Dependiendo de tu distribución:

Debian/Ubuntu: sudo apt install ./<archivo_descargado>.deb
Fedora/Red Hat: sudo rpm -i <archivo_descargado>.rpm
Snap: sudo snap install code --classic

Tu primer archivo HTML

Ahora que tienes tu editor, vamos a crear tu primer archivo HTML:

Abre Visual Studio Code y selecciona Archivo > Nuevo archivo.
Guarda el archivo como index.html.
Escribe el siguiente código:

<!DOCTYPE html><html lang="es"><head>  <meta charset="UTF-8">  <title>Mi primera página</title></head><body>  <h1>¡Hola mundo!</h1>  <p>Estoy aprendiendo HTML y esto es mi primera página web.</p></body></html>

Guarda y abre el archivo en tu navegador para ver tu primera página web.

Estructura básica de HTML

Un archivo HTML tiene varias secciones:

<!DOCTYPE html>: indica al navegador que es un documento HTML5.
<html>: etiqueta raíz que contiene todo el contenido.
<head>: contiene información meta, títulos y enlaces a estilos o scripts.
<body>: contiene todo el contenido visible de la página.

Etiquetas HTML más importantes

<h1> a <h6>: títulos, <h1> es el más importante.
<p>: párrafos.
<a>: enlaces.
<img>: imágenes.
<ul> / <ol>: listas.
<div>: contenedores genéricos para secciones.
<span>: texto en línea para estilos.
<form>: formularios para capturar información.

Buenas prácticas para aprender HTML

Escribe código limpio y bien indentado.
Usa nombres de archivo y carpetas descriptivos.
Aprende a validar tu HTML usando W3C Validator.
Combina HTML con CSS para dar estilo a tus páginas.
Experimenta creando pequeños proyectos: páginas de portafolio, blogs o páginas de información.

Recursos adicionales

MDN HTML: Documentación oficial y ejemplos.
W3Schools HTML: Tutorial interactivo y ejemplos.
Canales de YouTube especializados en desarrollo web.

Conclusión

HTML es la piedra angular del desarrollo web. Con este tutorial, tienes lo esencial para instalar tu entorno, crear tus primeros archivos y empezar a aprender de manera práctica. La clave está en practicar constantemente y combinar HTML con CSS y JavaScript para crear páginas web completas y atractivas.