🚀 Tu primera página web
Módulo 1 - Capítulo 4 | Fundamentos de la Web
¡Llegó el momento de crear! En esta lección pasarás de la teoría a la práctica creando tu primera página web real. Aprenderás a crear archivos HTML, abrirlos en el navegador y entender el concepto de código fuente. Es el inicio de tu viaje como desarrollador web.
El momento de la verdad
Después de entender los conceptos teóricos y preparar tu entorno de trabajo, es hora de poner manos a la obra. En esta lección crearás una página web funcional desde cero.
💡 Piénsalo así:
Has aprendido sobre los ingredientes (HTML, CSS), has preparado tu cocina (VS Code), y ahora vas a cocinar tu primer plato (página web). ¡Es emocionante!
Crear un archivo HTML
Vamos a crear tu primera página web paso a paso. Sigue estas instrucciones cuidadosamente:
Creación de tu primera página:
Abre VS Code
Inicia Visual Studio Code y abre la carpeta de proyecto que creaste en la lección anterior.
Crea un nuevo archivo
Haz clic derecho en el explorador de archivos y selecciona "New File". Nombra el archivo mi-primera-pagina.html
Escribe la estructura básica
Copia y pega el siguiente código en tu archivo:
<!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>¡Bienvenido a mi página web!</h1>
<p>Esta es mi primera página web creada desde cero.</p>
<p>Estoy aprendiendo desarrollo web y esto es solo el comienzo.</p>
</body>
</html>
Guarda el archivo
Guarda el archivo presionando Ctrl + S (o Cmd + S en Mac).
¡Felicidades!
Acabas de crear tu primera página web. Ahora vamos a verla en acción.
Abrir en el navegador
Hay varias formas de ver tu página web en el navegador. Te mostraremos las dos más comunes:
Método 1: Live Server (Recomendado)
Si instalaste la extensión Live Server como recomendamos:
- Haz clic derecho en tu archivo HTML
- Selecciona "Open with Live Server"
- Tu página se abrirá automáticamente en el navegador
💡 Ventaja
Los cambios se actualizan automáticamente cuando guardas el archivo.
Método 2: Abrir directamente
Si no tienes Live Server:
- Abre el explorador de archivos de tu sistema
- Navega hasta tu archivo HTML
- Haz doble clic en el archivo
- Se abrirá en tu navegador predeterminado
⚠️ Desventaja
Debes actualizar manualmente para ver los cambios.
¡Bienvenido a mi página web!
Esta es mi primera página web creada desde cero.
Estoy aprendiendo desarrollo web y esto es solo el comienzo.
🎉 ¡Lo lograste!
Si puedes ver tu página en el navegador como en el ejemplo anterior, ¡felicidades! Has creado exitosamente tu primera página web. Este es un momento significativo en tu viaje como desarrollador.
Concepto de código fuente
Ahora que tienes tu página funcionando, es importante entender qué es el "código fuente" y cómo inspeccionarlo.
📌 ¿Qué es el código fuente?
El código fuente es el código HTML original que escribiste. Es lo que el navegador "lee" para saber cómo mostrar la página.
Cuando ves una página web, en realidad estás viendo el resultado de que el navegador interpretó el código fuente.
Cómo ver el código fuente de cualquier página
Puedes ver el código HTML de cualquier página web que visites. Esto es una herramienta invaluable para aprender:
Abre cualquier página web
Ve a cualquier sitio que te interese (como Google, Facebook, o esta misma página del curso).
Haz clic derecho
Haz clic derecho en cualquier parte de la página (excepto en imágenes o enlaces).
Selecciona "Ver código fuente"
En el menú contextual, selecciona "Ver código fuente de la página" o similar.
Explora
Se abrirá una nueva pestaña con todo el código HTML de la página.
🔍 Herramientas de desarrollador
Una forma más avanzada de ver el código es usando las Herramientas de desarrollador del navegador (F12). Esto te permite inspeccionar elementos específicos y ver el CSS y JavaScript asociado.
Por ahora, concéntrate en entender el código fuente básico. Exploraremos las herramientas de desarrollador más adelante.
Anatomía de tu primera página
Vamos a desglosar cada parte del código que escribiste para entender qué hace cada elemento:
<!-- Declara que este es un documento HTML5 -->
<!DOCTYPE html>
<!-- Elemento raíz que contiene todo el documento -->
<html lang="es">
<!-- Contiene metadatos e información no visible -->
<head>
<!-- Especifica la codificación de caracteres -->
<meta charset="UTF-8">
<!-- Hace la página responsive en móviles -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Título que aparece en la pestaña del navegador -->
<title>Mi Primera Página Web</title>
</head>
<!-- Contiene todo el contenido visible de la página -->
<body>
<!-- Encabezado principal (solo uno por página) -->
<h1>¡Bienvenido a mi página web!</h1>
<!-- Párrafo de texto -->
<p>Esta es mi primera página web creada desde cero.</p>
<p>Estoy aprendiendo desarrollo web y esto es solo el comienzo.</p>
</body>
</html>
Práctica: Personaliza tu página
Ahora es tu turno de experimentar. Vamos a modificar tu página web para hacerla única:
🎯 Ejercicio práctico
Modifica tu archivo HTML para que incluya:
- Cambia el título de la pestaña a "Mi Sitio Web Personal"
- Modifica el texto del encabezado h1 con tu nombre
- Añade un nuevo párrafo sobre tus hobbies
- Cambia un párrafo existente para hablar sobre por qué quieres aprender desarrollo web
- Guarda los cambios y observa cómo se actualiza en el navegador
<!-- Ejemplo de cómo podría quedar tu código -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Sitio Web Personal</title>
</head>
<body>
<h1>¡Hola, soy [Tu Nombre]!</h1>
<p>Estoy aprendiendo desarrollo web porque me encanta crear cosas para Internet.</p>
<p>En mi tiempo libre me gusta [tus hobbies].</p>
<p>Esta es mi primera página web y estoy muy emocionado por aprender más.</p>
</body>
</html>
Errores comunes y cómo solucionarlos
Al empezar, es normal cometer errores. Aquí tienes algunos comunes y cómo solucionarlos:
❌ La página no se ve
Posible causa: El archivo no se guardó o tiene extensión .txt
Solución: Asegúrate de que el archivo termina en .html y está guardado
❌ Los cambios no aparecen
Posible causa: No guardaste los cambios o el navegador tiene caché
Solución: Guarda el archivo (Ctrl+S) y actualiza el navegador (F5)
❌ Caracteres extraños
Posible causa: Falta la etiqueta meta charset
Solución: Asegúrate de incluir <meta charset="UTF-8">
❌ Live Server no funciona
Posible causa: La extensión no está instalada o hay conflicto de puertos
Solución: Verifica que Live Server esté instalado y reinicia VS Code
Checklist de logros
Antes de continuar, verifica que has completado todos estos hitos:
✅ Lo que has logrado en esta lección
- Creaste un archivo HTML desde cero
- Escribiste la estructura básica de una página web
- Guardaste el archivo con la extensión correcta (.html)
- Abriste tu página en el navegador
- Viste el resultado de tu código
- Aprendiste a ver el código fuente de cualquier página
- Personalizaste tu página con tu propio contenido
- Entendiste la anatomía básica de un documento HTML
Cierre
¡Has dado un paso enorme! Crear tu primera página web es un hito significativo en tu camino como desarrollador. Ahora entiendes el flujo básico de trabajo: escribir código, guardar, y ver el resultado en el navegador.
✨ Reflexión importante
Piensa en esto: hace solo unas lecciones, una página web era algo mágico que simplemente "aparecía" en tu navegador. Ahora entiendes que detrás de cada página hay código HTML, y tú mismo puedes crear ese código.
Esta comprensión fundamental es lo que separa a los usuarios de Internet de los creadores de Internet. ¡Tú ahora eres un creador!
🚀 Próximos pasos
En el siguiente módulo, nos sumergiremos profundamente en HTML. Aprenderás todos los elementos esenciales para crear páginas web ricas en contenido: encabezados, párrafos, listas, enlaces, imágenes, tablas y formularios.
Tu página web actual es solo el comienzo. Pronto estarás creando sitios completos con múltiples páginas y contenido interactivo.
¡No te detengas aquí! Sigue experimentando con tu página. Cambia textos, añade más párrafos, prueba diferentes encabezados (h2, h3, etc.). Cuanto más experimentes, más natural te resultará trabajar con HTML.
