// Programación I · 01 · Introducción a HTML

# Trabajar con VS Code

El editor, la carpeta del proyecto y el navegador

Tres ventanas para trabajar

01La carpetadonde viven todos los archivos de la web
02El editordonde escribes el código: Visual Studio Code
03El navegadordonde ves el resultado

VS Code es gratuito, funciona en Windows, Mac y Linux, y es hoy el editor más usado.

Una web es una carpeta

index.html es siempre la página principal
Cada página es un archivo .html distinto
Los estilos y las imágenes, en sus propias carpetas

Abre la carpeta, no el archivo

Crea primero la carpeta del proyecto, con un nombre sin espacios: mi-web
En VS Code: Archivo → Abrir carpeta
Así ves todos los archivos a la vez, las rutas funcionan y Live Server sabe dónde está tu web

La ventana de VS Code

Barra de actividad · el explorador, el buscador y las extensiones
Explorador · los archivos y carpetas del proyecto
Pestañas · los archivos abiertos. El punto ● avisa de que hay cambios sin guardar
Editor · donde escribes
Barra de estado · el botón Go Live de Live Server

Crear archivos y carpetas

Pasa el ratón por el nombre del proyecto y aparecen los botones de nuevo archivo y nueva carpeta
Escribe el nombre con su extensión: contacto.html, estilos.css
Para crearlo dentro de una carpeta, selecciona antes la carpeta

Cómo nombrar los archivos

Todo en minúsculas
Sin espacios: guiones para separar palabras
Sin tildes, eñes ni símbolos
Nombres cortos que describan el contenido

En tu ordenador, Foto.jpg y foto.jpg pueden parecer el mismo archivo, pero en la mayoría de servidores son distintos.

La plantilla en un segundo

en un archivo .html vacío, escribe

!+Tab

Es una abreviatura de Emmet, que viene con VS Code. Luego cambia lang="en" por lang="es".

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="…">
  <title>Document</title>
</head>
<body>

</body>
</html>

Más abreviaturas de Emmet

p

<p></p>

h1+p

<h1></h1>
<p></p>

ul>li*3

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

a{Inicio}

<a href="">Inicio</a>

> mete una dentro de otra, + las pone al lado, * repite y { } pone el texto. La lista completa está en los apuntes, al final de «Introducción a HTML».

Guarda, guarda, guarda

El navegador sólo ve lo que está guardado
Cmd + S en Mac, Ctrl + S en Windows
O activa Archivo → Guardado automático

Ver el resultado

Doble clic

Abre el .html desde la carpeta. En la barra pone file:/// y hay que recargar a mano cada vez.

Live Server

Pulsa Go Live en la barra de estado. Se abre en el navegador y se recarga sola cada vez que guardas.

Tres extensiones para empezar

Se instalan desde el icono de los cuatro cuadrados de la barra de actividad.

SpanishLanguage Pack: pone el programa en español

Live Serverabre tu web y la recarga sola al guardar

Prettierordena y sangra el código automáticamente

Atajos que te ahorran tiempo

Cmd SCtrl SGuardar

Cmd ZCtrl ZDeshacer

Cmd /Ctrl /Comentar la línea

Cmd PCtrl PBuscar un archivo

Cmd DCtrl DSeleccionar la siguiente palabra igual

⇧ ⌥ F⇧ Alt FOrdenar el código

Mac a la izquierda · Windows a la derecha

Errores típicos

Abrir sólo el archivoAbre siempre la carpeta del proyecto.

Escribir en Word o Google DocsCambian las comillas y añaden formato invisible. El código deja de funcionar.

No ver los cambios¿Has guardado? Mira si la pestaña tiene el punto ●.

index.html.txtActiva ver las extensiones en el Finder o el Explorador.

Imágenes que no salen al publicarMayúsculas en el nombre: Foto.jpg no es foto.jpg.

// y ahora

¡Crea tu carpeta!

Tu primera web empieza con una carpeta y un index.html.

Archivos y carpetas en los apuntes →