Dónde se escribe el código: archivos, extensiones y editor

En la consola del navegador el código desaparece al cerrar la pestaña. Para guardar un programa y volver a usarlo, se escribe en un archivo. Parece obvio, pero es donde más se atasca quien empieza: el archivo se guarda con el nombre equivocado, el navegador no lo abre o la imagen no aparece. Esta guía explica lo que nadie suele contar antes de la primera línea de HTML o de Python.

El código es texto plano

Un archivo de código contiene solo texto plano: letras, números y símbolos, sin negritas, colores ni tamaños de letra. Por eso no sirve Word: un documento de Word guarda, además del texto, el formato y muchos datos internos que un navegador o Python no entienden.

Para escribir código vale cualquier editor de texto plano:

• Bloc de notas, que ya viene con Windows. Suficiente para tus primeros archivos.
• Un editor de código, como Visual Studio Code: colorea el código, completa lo que escribes y marca los errores. Es lo que usarás en cuanto escribas algo más largo.

Los colores que ves en un editor de código no se guardan en el archivo: el editor los pinta para que lo leas mejor.

La extensión dice qué es cada archivo

Un nombre de archivo tiene dos partes: el nombre y la extensión, separadas por el último punto. En index.html, el nombre es index y la extensión es html. La extensión le dice al sistema qué tipo de contenido tiene y con qué programa abrirlo.

Muestra las extensiones en Windows

Windows oculta las extensiones por defecto, y eso provoca el error más típico al empezar: crees que tu archivo se llama index.html, pero en realidad se llama index.html.txt y el navegador lo trata como texto. Para verlas siempre, en el Explorador de archivos ve a Ver > Mostrar > Extensiones de nombre de archivo.

Guardar bien desde el Bloc de notas

1. Escribe el código y ve a Archivo > Guardar como.
2. En Tipo, elige Todos los archivos (*.*).
3. Escribe el nombre completo con su extensión, por ejemplo index.html.
4. En Codificación, deja UTF-8: así las tildes y la ñ se ven bien.

Cómo nombrar archivos y carpetas

Los nombres que funcionan en tu ordenador pueden fallar en un servidor o en la terminal. La recomendación de MDN para no tener problemas:

• Todo en minúsculas. Muchos servidores distinguen mayúsculas: Foto.jpg y foto.jpg son archivos distintos.
• Sin espacios. Separa las palabras con guiones: mi-pagina.html, no mi pagina.html. En la terminal, un nombre con espacios se interpreta como dos cosas, y en una dirección web el espacio se convierte en %20.
• Sin tildes ni símbolos raros como ñ, ? o &.
• La página principal de una web se llama index.html: los servidores la muestran cuando alguien entra en la carpeta.

Una carpeta por proyecto

Guarda cada proyecto en su propia carpeta, con subcarpetas para cada tipo de archivo. Una web sencilla queda así:

mi-web/
├── index.html
├── imagenes/
│   └── foto.jpg
├── estilos/
│   └── estilos.css
└── scripts/
    └── principal.js

Rutas: cómo un archivo encuentra a otro

Cuando un HTML usa una imagen o una hoja de estilos, indica dónde está con una ruta relativa, contada desde la carpeta del propio HTML:

• imagenes/foto.jpg: entra en la carpeta imagenes y coge foto.jpg.
• estilos/estilos.css: lo mismo con la hoja de estilos.
• ../logo.png: los dos puntos significan «sube una carpeta».

Las barras de las rutas web son siempre /, aunque Windows use \ en el Explorador. Si una imagen no aparece, casi siempre es porque la ruta no coincide letra por letra con el nombre real del archivo.

Cómo se ejecuta lo que escribes

• Una página web: haz doble clic en el .html y se abre en tu navegador. Si cambias el archivo, guarda y recarga con F5.
• Un programa de Python: se ejecuta desde la terminal con python nombre.py. El intérprete de Python lee el archivo y ejecuta sus instrucciones de arriba abajo. Lo tienes paso a paso en instalar Python y tu primer programa.

Con esto ya puedes crear tu primer archivo de verdad: sigue con qué es HTML, desde cero.