Tu primer archivo y carpeta para la web

Una web vive en una carpeta

Toda web del mundo es en realidad un montón de archivos en una carpeta. Vamos a preparar la tuya.

Crea una carpeta llamada my-website. En el escritorio, clic derecho → Nueva carpeta (en Mac también es New Folder, en Windows es Nuevo → Carpeta) y nómbrala my-website.
Abre la carpeta en VS Code. Lanza VS Code y en el menú elige File → Open Folder… y busca tu carpeta my-website. Si VS Code pregunta si confías en los autores de esta carpeta, haz clic en Yes, I trust the authors – ¡al fin y al cabo, el autor eres tú!
Crea un archivo llamado index.html. En el panel izquierdo, pasa el ratón sobre el nombre de la carpeta y haz clic en el icono New File (una página con un signo más). Escribe exactamente: index.html y pulsa Enter.

💡

¿Por qué index.html en concreto? Es el nombre acordado para la página principal de una web. Cuando un navegador llega a una carpeta, busca primero un archivo llamado index.html – como entrar al cole y ir directo a tu clase.

Escribe tu primer código

En el archivo index.html, escribe esto (o cópialo con el botón de arriba a la derecha):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My website</title>
  </head>
  <body>
    <h1>It works!</h1>
    <p>This is my very first file. From here I'll build a whole website.</p>
  </body>
</html>

Guarda el archivo: Ctrl+S (en Mac, Cmd+S). Guarda a menudo – un archivo sin guardar tiene un puntito al lado del nombre en VS Code.

Abre tu página en el navegador

Busca el archivo index.html en tu carpeta (en el escritorio → my-website) y haz doble clic para abrirlo. Se abrirá un navegador mostrando tu página con las palabras “It works!”.

✅

Compruébalo tú: Ves un título grande que dice “It works!” en el navegador. Si es así – ya tienes un taller web funcionando, ¡y puedes ir directo al Nivel 1!

💡

Un truco útil: mantén VS Code y tu navegador abiertos uno al lado del otro. Cada vez que cambies algo en el código, guárdalo (Ctrl+S) y pulsa F5 en el navegador para actualizar. Tu cambio aparece al instante.

Lo que te llevas de este capítulo

Una web es una carpeta llena de archivos. La tuya se llama my-website.
La página principal de una web siempre se llama index.html.
El bucle de trabajo: escribir código → guardar (Ctrl+S) → actualizar el navegador (F5). Lo harás una y otra vez.