Crear tu primera página web puede parecer intimidante, pero con las herramientas correctas y una guía paso a paso, cualquier persona puede empezar desde cero. En este tutorial aprenderás a crear páginas web en HTML usando Notepad++, uno de los editores de texto más populares y recomendados para quienes dan sus primeros pasos en el desarrollo web.
No necesitas experiencia previa ni instalar programas complejos. Solo un editor de texto, un navegador y ganas de aprender.
¿Qué es HTML y por qué aprenderlo?
HTML (HyperText Markup Language) es el lenguaje base de todas las páginas web. Define la estructura y el contenido de un sitio: títulos, párrafos, imágenes, enlaces, formularios y más.
No es un lenguaje de programación en sentido estricto — es un lenguaje de marcado. Esto significa que trabaja con etiquetas que le indican al navegador cómo mostrar cada elemento. Por ejemplo:
<h1>Este es un título</h1>
<p>Este es un párrafo de texto.</p>
Aprender HTML es el primer paso obligatorio para cualquier persona que quiera trabajar en diseño web, desarrollo frontend o simplemente entender cómo funciona internet. Y la buena noticia es que los fundamentos de HTML no cambian: lo que aprendes hoy seguirá siendo válido en 5 o 10 años.
¿Qué herramienta necesito para escribir HTML?
Para crear HTML solo necesitas un editor de texto. Puedes usar el Bloc de notas de Windows, pero existen opciones mucho mejores que hacen el trabajo más fácil y cómodo.
Notepad++ (recomendado para principiantes)
Notepad++ es un editor gratuito, liviano y de código abierto, ideal para quienes están aprendiendo. Sus ventajas principales:
- Coloreo de sintaxis: diferencia visualmente las etiquetas HTML del texto
- Autocompletado: sugiere etiquetas mientras escribís
- Numeración de líneas: facilita encontrar errores
- Ligereza: no consume recursos del sistema
Es una excelente primera herramienta antes de pasar a editores más avanzados.
Alternativas populares
Una vez que domines los fundamentos, podés explorar otras opciones:
- Visual Studio Code (VS Code): gratuito, con miles de extensiones, el más usado por profesionales hoy en día
- Sublime Text: rápido y minimalista, con versión gratuita
- Brackets: diseñado específicamente para desarrollo web
Para este tutorial trabajaremos con Notepad++, pero los conceptos aplican a cualquier editor.
Instalación y configuración de Notepad++
Paso 1: Descargar e instalar
- Entrá a notepad-plus-plus.org
- Hacé clic en Download
- Elegí la versión acorde a tu sistema (32 o 64 bits)
- Ejecutá el instalador y seguí los pasos
Paso 2: Configurar la codificación UTF-8
Este paso es fundamental. UTF-8 permite que tus páginas muestren correctamente tildes, la ñ y otros caracteres especiales.
- Abrí Notepad++
- Ir al menú Formato (o Encoding en inglés)
- Seleccioná Codificar en UTF-8 sin BOM
⚠️ Hacé esto antes de empezar a escribir código. Si lo cambiás después, los caracteres especiales ya escritos pueden corromperse.
Paso 3: Seleccionar el lenguaje HTML
Para activar el coloreo de sintaxis HTML:
- Ir al menú Lenguaje
- Buscá la letra H
- Seleccioná HTML
A partir de ahora, las etiquetas HTML se colorearán automáticamente, facilitando la lectura del código.
Paso 4: Activar el autocompletado
El autocompletado sugiere etiquetas y atributos mientras escribís, reduciendo errores tipográficos.
- Ir a Configuración → Preferencias
- En el panel izquierdo, seleccioná Autocompletar
- Marcá la opción Activar autocompletado al escribir
- Asegurate de tener seleccionado Palabras clave de función y del lenguaje
Estructura básica de una página HTML
Toda página web tiene una estructura mínima obligatoria. Copiá y pegá este código en Notepad++ para empezar:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página web</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página web creada con HTML.</p>
</body>
</html>
¿Qué significa cada parte?
| Etiqueta | Función |
|---|---|
<!DOCTYPE html> | Declara que el documento es HTML5 |
<html lang="es"> | Elemento raíz; lang="es" indica que el idioma es español |
<head> | Contiene metadatos (no visibles en la página) |
<meta charset="UTF-8"> | Habilita tildes y caracteres especiales |
<meta name="viewport"> | Hace la página adaptable a móviles |
<title> | El texto que aparece en la pestaña del navegador |
<body> | Todo el contenido visible de la página va aquí |
Guardar y abrir tu primera página
Guardar el archivo
- En Notepad++, ir a Archivo → Guardar como
- Poné un nombre como
index.html - En tipo de archivo, seleccioná Hyper Text Markup Language file o simplemente guardá con la extensión
.html - Elegí una carpeta fácil de recordar, por ejemplo
C:\MiWeb\
El nombre
index.htmles especial: los servidores web lo reconocen como la página principal de una carpeta.
Abrir en el navegador
- Encontrá el archivo
index.htmlen tu carpeta - Hacé doble clic — se abrirá en tu navegador predeterminado
- Verás tu página con el título «¡Hola, mundo!»
Para ver los cambios después de editar: guardá en Notepad++ (Ctrl+S) y recargá el navegador (F5).
Etiquetas HTML esenciales que debes conocer
Texto y títulos
HTML tiene seis niveles de títulos, del <h1> al <h6>:
<h1>Título principal (el más importante)</h1>
<h2>Subtítulo</h2>
<h3>Sección de tercer nivel</h3>
<p>Este es un párrafo normal.</p>
<p>Podés poner texto en <strong>negrita</strong> o en <em>cursiva</em>.</p>
En SEO, usá un solo
<h1>por página — es el título principal. Los<h2>y<h3>organizan el contenido.
Enlaces
<a href="https://www.google.com">Ir a Google</a>
<a href="contacto.html">Página de contacto</a>
<a href="https://ejemplo.com" target="_blank">Abrir en nueva pestaña</a>
Imágenes
<img src="foto.jpg" alt="Descripción de la foto" width="400">
El atributo alt es importante para accesibilidad y SEO — describe la imagen para personas que usan lectores de pantalla y para los motores de búsqueda.
Listas
<!-- Lista sin orden (viñetas) -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Lista ordenada (numerada) -->
<ol>
<li>Instalar Notepad++</li>
<li>Crear el archivo HTML</li>
<li>Abrir en el navegador</li>
</ol>
Tu primera página web completa
Juntando todo lo aprendido, acá tenés un ejemplo de página más completa:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio personal</title>
</head>
<body>
<h1>Bienvenido a mi sitio</h1>
<p>Soy una persona aprendiendo a crear páginas web con HTML.</p>
<h2>Mis tecnologías favoritas</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Contacto</h2>
<p>Podés escribirme a <a href="mailto:tucorreo@ejemplo.com">tucorreo@ejemplo.com</a></p>
</body>
</html>
Guardá esto como index.html, abrilo en el navegador y verás una página funcional con título, párrafo, lista y enlace.
¿Y el diseño visual? Introducción a CSS
HTML define la estructura; CSS (Cascading Style Sheets) define el aspecto visual: colores, fuentes, márgenes, tamaños. Son dos lenguajes complementarios.
Un ejemplo básico de cómo agregar estilos directamente en tu HTML:
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #0066cc;
}
</style>
</head>
El paso natural después de dominar HTML es aprender CSS. No hace falta aprenderlos por separado — podés ir combinándolos gradualmente.
Errores comunes al empezar con HTML
Estos son los problemas más frecuentes y cómo evitarlos:
1. Olvidar cerrar etiquetas
<!-- Incorrecto -->
<p>Texto sin cerrar
<!-- Correcto -->
<p>Texto correctamente cerrado</p>
2. Guardar sin extensión .html Si el archivo se guarda como .txt, el navegador no lo reconocerá como página web. Verificá siempre la extensión.
3. Rutas de imágenes incorrectas Si la imagen y el HTML están en carpetas diferentes, la ruta debe reflejar eso:
<img src="imagenes/foto.jpg" alt="Mi foto">
4. No recargar el navegador Después de guardar cambios en Notepad++, presioná F5 en el navegador para ver las actualizaciones.
Próximos pasos: ¿qué aprender después?
Una vez que te sientas cómodo con HTML básico, el camino natural es:
- CSS — Para dar diseño y estilo visual a tus páginas
- CSS Flexbox y Grid — Para crear layouts modernos y responsivos
- JavaScript — Para agregar interactividad (menús, formularios dinámicos, animaciones)
- Un editor más avanzado — VS Code con sus extensiones acelera mucho el trabajo
- Subir tu web a internet — Con servicios como GitHub Pages (gratuito) podés publicar tu primera página online
Recursos para seguir aprendiendo
- MDN Web Docs — La referencia más completa y confiable sobre HTML, CSS y JavaScript. En español.
- W3Schools — Tutoriales con ejemplos interactivos, ideal para practicar
- freeCodeCamp — Curso gratuito y completo de desarrollo web desde cero
Todo desarrollador web empezó exactamente aquí
Crear páginas web con HTML y Notepad++ es una de las formas más directas de empezar en el mundo del desarrollo web. No necesitás software costoso ni conocimientos previos — solo un editor de texto, un navegador y la disposición de experimentar.
Los fundamentos que aprendiste en esta guía no cambian: HTML sigue siendo el esqueleto de toda página web, independientemente de las tecnologías que se usen encima. Dominar esta base te dará una ventaja real para cualquier camino que elijas en el desarrollo web.
El siguiente paso es el tuyo: creá tu archivo index.html, experimentá con las etiquetas y no temas cometer errores. Así es exactamente como se aprende.
- Lectura recomendada: Cómo optimizar la carga de CSS en WordPress: Guía completa para mejorar el LCP
