Codice e anteprima

Scrivi la pagina HTML a sinistra: il CSS va in <style>, il JavaScript in <script>. Premi Esegui oppure Ctrl + Invio per vederla a destra. L’anteprima non si aggiorna da sola: mostra il codice dell’ultima esecuzione, e accanto al titolo leggi Da eseguire quando hai modificato qualcosa. A ogni esecuzione lo stato JavaScript riparte da zero. Gli errori JavaScript compaiono sotto l’anteprima.

Nella barra sopra il codice, ↶ e ↷ annullano e ripetono le modifiche, Trova cerca e sostituisce nel testo, ⋯ cambia la dimensione dei caratteri. Trascina il separatore centrale per dare più spazio al codice o all’anteprima. Sul telefono alterna Codice e Anteprima.

Esercizi

Un esercizio è una pagina con le sue immagini, conservata sul server nel tuo account. Premi Accedi con Google ed entra con l’account della scuola, dai un nome all’esercizio e premi Salva o Ctrl + S. Il salvataggio non è automatico: il pulsante mostra ✓ Salvato quando non c’è nulla da salvare e torna Salva, pieno, appena cambi qualcosa.

I miei esercizi è l’elenco dei tuoi lavori, che ritrovi anche da un altro computer. Un clic sul nome apre l’esercizio, Duplica ne crea una copia, Elimina lo cancella insieme alle sue immagini. Nuovo esercizio ne comincia un altro, da una pagina vuota o dall’esempio della lampadina. Senza accesso puoi scrivere, eseguire ed esportare, ma non salvare.

Prima di cambiare esercizio o di chiudere la pagina vieni avvisato se ci sono modifiche non salvate. Se hai lo stesso esercizio aperto in due schede e lo salvi in una, l’altra non può più salvarlo: l’avviso propone Salva come nuovo esercizio, per non perdere il testo. Se la sessione scade, accedi di nuovo: il codice resta nell’editor. Per uscire premi il tuo nome in alto a destra e poi Esci.

Importa ed Esporta

Importa porta nell’editor un lavoro che hai sul computer, come nuovo esercizio con il nome del file. Da un file HTML carica solo il testo della pagina, che resta da salvare. Da uno ZIP con immagini legge la pagina index.html e la cartella images/: se ci sono immagini serve l’accesso, e l’esercizio viene salvato subito fra i tuoi. Gli altri file dello ZIP vengono ignorati.

Esporta scarica sul computer il codice che vedi in quel momento. Solo la pagina dà un file .html, senza immagini. Pagina e immagini dà un file ZIP con index.html e la cartella images/: estratto, è un piccolo sito che funziona aprendo index.html, e si può reimportare. Sul telefono Importa ed Esporta sono sotto ⋯ in alto.

Immagini

Apri Immagini e premi Carica immagini: serve l’accesso e, se l’esercizio non è ancora salvato, viene salvato prima. Sono accettati PNG, JPG, GIF e WebP, fino a 5 MB ciascuno. Le immagini vengono convertite in WebP, quindi il nome da usare nel codice finisce sempre con .webp.

Sotto ogni immagine, Tag inserisce nel punto del cursore il tag completo e Percorso soltanto images/foto.webp, utile dentro un src già scritto, in url(...) nel CSS o in JavaScript. In entrambi i casi, se hai selezionato del testo, viene sostituito.

<img src="images/foto.webp" alt="Descrizione">

Le immagini restano private e appartengono all’esercizio in cui le carichi. Massimo 40 immagini e 20 MB per esercizio, 50 MB complessivi e 100 esercizi per account. La pagina non può leggere i file del tuo computer: carica le immagini oppure usa un indirizzo HTTPS accessibile.

Scorciatoie

Ctrl + Invio: esegui · Ctrl + S: salva · Ctrl + F: trova · Ctrl + Z: annulla · Ctrl + Y: ripeti · Tab: indenta. Su Mac usa ⌘ al posto di Ctrl; per ripetere, ⌘ + Maiusc + Z. Con il separatore selezionato, le frecce ridimensionano i pannelli.