El editor de código permite crear y probar una página web sencilla en el navegador. El HTML define el contenido, el CSS su aspecto y el JavaScript cómo responde a las acciones. Los archivos se agrupan en un proyecto que puedes descargar como ZIP.
Crea tu primera página
Abre index.html en las pestañas de archivos.
Pega el siguiente HTML en el editor.
El título Hello aparecerá en «Vista previa». La vista previa se actualiza poco después de dejar de escribir.
Abre style.css y añade el siguiente CSS. El título se volverá azul.
Abre script.js y añade el siguiente JavaScript. El título cambiará a It works.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="greeting">Hello</h1>
<script src="script.js"></script>
</body>
</html>h1 { color: blue; }document.querySelector("h1").textContent = "It works";El proyecto inicial contiene index.html, style.css y script.js. El HTML debe enlazar los archivos CSS y JavaScript, como en este ejemplo. Crearlos no basta para que el navegador los utilice.
Comprueba la vista previa y la consola
La sección «Vista previa» muestra la página creada con tus archivos. Usa index.html si existe o, en su defecto, el primer archivo HTML del proyecto. Las referencias locales a CSS y JavaScript se resuelven desde las carpetas del proyecto.
Abre «Consola» para leer los mensajes y errores de la vista previa. Puedes escribir console.log("Preview ready") en JavaScript para mostrar un mensaje. Escribe 2 + 3 en el campo de la consola y pulsa Intro para evaluar la expresión en la vista previa.
La vista previa ejecuta JavaScript para el navegador. No inicia servidores, instala paquetes ni ejecuta Python, PHP, Java u otros lenguajes del servidor. Elegir un tipo de archivo permite escribirlo, pero no significa que el navegador pueda ejecutarlo.
El código se ejecuta en un marco de vista previa separado, con las restricciones del navegador. Aun así, los scripts externos, las imágenes y las peticiones de red de tu código pueden contactar con otros sitios. Ejecuta solo código cuyos efectos entiendas.
Añade, renombra y elimina archivos
Pulsa «Añadir archivo», elige un tipo de archivo e introduce un nombre. La extensión seleccionada se añade automáticamente. Si el nombre ya existe, se añade un número para no sobrescribir el archivo anterior.
Abre un archivo desde su pestaña o su nombre en «Carpetas y archivos». Las pestañas muestran los archivos de la carpeta seleccionada. El botón más junto a una carpeta permite crear un archivo o una subcarpeta dentro de ella.
Usa el lápiz junto al archivo para renombrarlo. Intro o un clic fuera del campo guarda el nombre, y Escape cancela el cambio. Conserva la extensión, por ejemplo .css.
La cruz de la pestaña elimina el archivo tras pedir confirmación. No se limita a ocultar la pestaña abierta. Descarga una copia de seguridad antes de eliminar trabajo que puedas necesitar más adelante.
Renombrar o mover archivos no modifica los enlaces del HTML. Si mueves style.css a una carpeta assets, cambia su enlace a assets/style.css. Un enlace incorrecto puede dejar la vista previa sin estilos o sin el script.
Organiza los archivos en carpetas
Abre el explorador de carpetas para recorrer el proyecto. Despliega una carpeta para ver su contenido y selecciónala para mostrar las pestañas de sus archivos. «Nueva carpeta» crea una carpeta dentro de la seleccionada.
Arrastra un archivo o una carpeta sobre otra carpeta para moverlo. En una pantalla táctil, mantén pulsado el elemento antes de arrastrarlo. No puedes mover una carpeta dentro de sí misma ni de una de sus subcarpetas.
Hay dos formas de eliminar una carpeta. «Eliminar carpeta» elimina la carpeta y mueve su contenido a la raíz del proyecto. «Eliminar carpeta y contenido» elimina también los archivos y las subcarpetas, y exige escribir DELETE. La carpeta raíz no se puede eliminar.
En una pantalla grande, «Fijar como ventana flotante» mantiene visible el explorador de carpetas mientras editas. El control de minimizar pliega la ventana y «Cerrar» la cierra.
Trabaja en proyectos separados
«Proyectos» abre tus proyectos guardados. Selecciona uno para seguir trabajando o elige «Crear proyecto» e introduce un nombre. Usa el lápiz para renombrar un proyecto y la acción de eliminar para borrarlo tras confirmar.
Los proyectos se guardan en este navegador y en este dispositivo. El indicador de guardado muestra si se han guardado los últimos cambios. Esto no sube el proyecto a una cuenta ni crea un archivo de copia de seguridad en el equipo.
«Exportar como ZIP» descarga el proyecto actual con sus archivos y carpetas. Conserva una copia antes de borrar los datos del navegador, cambiar de dispositivo o hacer cambios que quizá quieras deshacer. El editor actual no permite restaurar un proyecto desde un ZIP.
Empieza con un ejemplo que funcione
En el ordenador, «Plantillas» ofrece los ejemplos «Juego de la serpiente», «Calculadora» y «Aplicación de dibujo». Elegir una plantilla crea un proyecto separado con su propio HTML, CSS y JavaScript. Los proyectos anteriores permanecen en la lista.
Prueba la vista previa, cambia una pequeña parte del código y comprueba el resultado. Así verás mejor qué archivo controla cada parte de la página.
Dale más espacio al editor
| Vista | Cómo se usa |
|---|---|
| Vista dividida | Cambia de archivo con las pestañas mientras la vista previa permanece junto al editor. |
| Paneles apilados | Trabaja con varios paneles de archivos colocados uno debajo de otro. |
| Varias ventanas | Organiza los paneles de archivos en columnas junto al resultado. |
| Modo de concentración | Oculta el resto de la página para ampliar el espacio de trabajo. Usa el mismo botón para volver. |
En el ordenador, «Disposición» permite elegir la distribución. Arrastra los separadores disponibles para cambiar el tamaño de los paneles o usa sus controles de minimizar y maximizar. El teléfono utiliza una distribución compacta del editor y la vista previa, sin el selector de distribución del ordenador.
«Modo de concentración» forma parte de la distribución del editor. Escape cierra sus cuadros de diálogo, pero no sale de este modo. Para salir, pulsa de nuevo su botón.
Haz que el código sea más legible
En «Ajustes» puedes configurar el tema del editor, los números de línea, el ajuste de línea, el cierre automático de etiquetas y paréntesis, y el resaltado de la línea activa. «Sistema» sigue la configuración del dispositivo, mientras que «Oscuro» y «Claro» fijan el tema del editor.
En «Fuente» puedes elegir la fuente y un tamaño de 12 a 24 píxeles. «Sangría» fija el ancho del tabulador en dos, cuatro u ocho espacios. Estas preferencias se guardan en el navegador.
«Eliminar todos los datos del editor» es una acción independiente dentro de «Ajustes». Elimina todos los proyectos, archivos, datos guardados, estadísticas y preferencias. Para confirmar, debes escribir DELETE. Exporta primero los proyectos que quieras conservar.
Usa el teclado
| Acción | Teclas |
|---|---|
| Guardar el proyecto actual en este navegadorEsta acción no descarga ningún archivo. |
MacCommand + S
Windows / LinuxCtrl + S
|
| Seleccionar todo el textoSitúa primero el cursor en el editor. |
MacCommand + A
Windows / LinuxCtrl + A
|
| Deshacer un cambioSe aplica al editor activo. |
MacCommand + Z
Windows / LinuxCtrl + Z
|
| Rehacer un cambio |
MacCommand + Shift + Z
Windows / LinuxCtrl + Shift + Z
|
| Comentar o descomentar una línea o la selección |
MacCommand + /
Windows / LinuxCtrl + /
|
| Mover una línea o la selección hacia arriba |
MacOption + ↑
Windows / LinuxAlt + ↑
|
| Mover una línea o la selección hacia abajo |
MacOption + ↓
Windows / LinuxAlt + ↓
|
| Mostrar las sugerencias disponibles para completar códigoEl sistema operativo puede tener reservado este atajo. |
MacControl + Space
Windows / LinuxCtrl + Space
|
| Buscar texto en el editor activo |
MacCommand + F
Windows / LinuxCtrl + F
|
| Ejecutar un comando en la consolaSitúa primero el cursor en el campo de la consola. | Enter |
| Confirmar el nombre de un archivo o carpetaDurante el cambio de nombre. | Enter |
| Cancelar el cambio de nombre o cerrar el cuadro de diálogo | Escape |
Si no aparece el resultado
Si la vista previa está vacía, comprueba que el proyecto contiene un archivo HTML con contenido visible. Si la página aparece sin estilos o sin las funciones esperadas, revisa los nombres y las rutas de los archivos enlazados, incluidos los posibles errores al escribirlos.
Abre «Consola» para consultar los errores de JavaScript. Un error puede impedir que se ejecuten las instrucciones restantes del script. El editor no repara el código automáticamente.
Si el indicador de guardado no vuelve a «Guardado», mantén la página abierta y exporta el proyecto antes de recargarla. La navegación privada, las restricciones de almacenamiento o borrar los datos del sitio pueden hacer que los proyectos guardados dejen de estar disponibles.