¡Bienvenidos a la primera clase de nuestro curso! Si alguna vez quisiste entender cómo se construyen las páginas que usas todos los días, estás en el lugar correcto. Hoy vamos a dar el primer paso y, al final de esta clase, tendrás tu propia página web.
Para entender lo que vamos a hacer, usa esta analogía: crear una página web es como construir una casa.
HTML (HyperText Markup Language) es el esqueleto. Define la estructura: las paredes, los techos, las puertas. Sin él, la casa no se mantiene en pie.
CSS (Cascading Style Sheets) es la decoración. Le da estilo: el color de las paredes, la forma de las ventanas, los muebles. Sin CSS, todo sería muy aburrido.
JavaScript (JS) es la electricidad. Le da vida a la casa: las luces se prenden, el televisor funciona, la alarma suena. Con JavaScript, la página reacciona a lo que haces.
En esta clase, nos concentraremos en el esqueleto: el HTML.
Paso 1: Prepara tu Entorno de Trabajo
Antes de escribir una sola línea de código, necesitas una herramienta. Aunque podrías usar el Bloc de Notas, te recomendamos una herramienta profesional y gratuita que te hará la vida mucho más fácil: Visual Studio Code (VS Code).
Descarga e instala VS Code: Ve al sitio oficial de Visual Studio Code y descarga la versión para tu sistema operativo.
Crea una carpeta de proyecto: En tu escritorio o en cualquier lugar que prefieras, crea una nueva carpeta. Nómbrala MiPrimeraWeb. Aquí guardaremos todos los archivos de nuestro proyecto.
Abre tu carpeta en VS Code: Abre VS Code y ve a Archivo > Abrir carpeta y selecciona la que acabas de crear. ¡Ahora estás listo para trabajar!
Paso 2: Escribe tu Primer Código HTML
Ahora vamos a crear el archivo principal de nuestra página.
En la barra lateral de VS Code, haz clic en el ícono de "Nuevo archivo" y nómbralo index.html. El nombre index es el estándar para el archivo principal de cualquier sitio web.
Dentro de este archivo, escribe un signo de exclamación ! y presiona Tab. VS Code generará automáticamente la estructura básica de un documento HTML5.
Vamos a ver qué significa cada parte de esta estructura:
<!DOCTYPE html>: Declara que es un documento HTML5.
<html>: Es el contenedor de todo el código de la página.
<head>: Contiene información sobre la página que no es visible para el usuario, como el título que aparece en la pestaña del navegador.
<body>: Contiene todo el contenido visible, como textos, imágenes y enlaces.
Ahora, ¡vamos a agregar contenido! Dentro de la etiqueta <body>, escribe estas líneas de código:
HTML
<h1>¡Hola, Mundo!</h1>
<p>Esta es mi primera página web. ¡Estoy aprendiendo a programar!</p>
<a href="https://www.google.com">Ir a Google</a>
<img src="https://via.placeholder.com/150" alt="Una imagen de ejemplo">
Paso 3: Visualiza tu Página
¡Es hora de ver tu trabajo!
Guarda el archivo: Presiona Ctrl + S (o Cmd + S en Mac).
Abre en tu navegador: Ve a la carpeta MiPrimeraWeb en tu sistema. Haz doble clic en el archivo index.html. Se abrirá en tu navegador predeterminado y verás tu primera página web.
¡Felicidades! Has escrito tu primera página web y has dado el primer paso para convertirte en un desarrollador. Para la próxima clase, te animamos a que sigas practicando: intenta agregar más párrafos, otros títulos o más enlaces. ¡Nos vemos en la siguiente clase!
