Editor HTML e CSS

Come usare l’editor HTML

Usa l’editor per piccoli layout statici, come un blocco di contenuto, una tabella o un esperimento CSS. Il testo chiaro nei campi HTML e CSS è un esempio e la prima anteprima ne mostra il risultato. Seleziona un campo di esempio per iniziare da vuoto. Lasciandolo vuoto riappare l’esempio chiaro, senza ripristinare risultati precedenti o abilitare l’esportazione.

Inserisci il tuo markup e gli stili. Puoi incollare un frammento, come un articolo, o il contenuto di un documento HTML completo. L’editor ricostruisce un documento statico con gli elementi supportati, senza conservarne i metadati. Dopo l’inizio della modifica usa solo il testo effettivamente inserito: gli esempi chiari in altri campi vuoti non vengono aggiunti. Il testo rimane passando da un campo all’altro.

Cosa mostra l’anteprima

L’anteprima è una pagina separata in ambiente isolato. Mostra HTML supportato e CSS inserito senza applicare gli stili all’editor. Puoi esaminare testo, titoli, elenchi, tabelle, normali controlli di modulo e layout CSS. L’area scorre se il layout supera lo spazio disponibile. La larghezza segue il pannello dell’editor: non è un simulatore di dispositivo a dimensioni fisse.

JavaScript, gestori di eventi, pagine incorporate, SVG, lettori multimediali e risorse esterne sono esclusi o bloccati. I link non navigano e i moduli non inviano dati. Immagini remote, font, fogli di stile e importazioni CSS non vengono caricati. Si possono visualizzare immagini PNG, JPEG, GIF e WebP incorporate in base64. Un avviso segnala elementi o attributi rimossi; le risorse nel CSS sono bloccate dalla policy del documento. I campi mantengono il testo originale, anche il codice non supportato, per consentire revisione e modifiche.

Due piccoli esempi

Per un titolo, inserisci HTML e CSS qui sotto. L’anteprima mostra “Hello” in verde scuro. Modifica il testo tra i tag per cambiare le parole visualizzate; cambia il colore CSS per modificarne l’aspetto.

Per un elenco usa <ul><li>Plan</li><li>Review</li></ul> con CSS li { margin-bottom: 8px; }. Vedrai due punti elenco con spazio dopo ciascuno. È utile per verificare un piccolo blocco prima di copiarlo nel tuo progetto.

HTML: <h1>Hello</h1>
CSS:  h1 { color: #166534; }

Copia e download

Copia HTML e Scarica HTML usano lo stesso documento statico corrente dell’anteprima. L’esportazione unisce markup e CSS supportati in un unico file UTF-8 page.html con una policy restrittiva sui contenuti. Aprilo in un browser per visualizzarlo o in un editor per leggerne il codice. È una bozza statica autonoma, non un sito ospitato o un’applicazione distribuibile con script funzionanti.

Cancella rimuove HTML, CSS e risultato, chiedendo conferma se hai inserito codice. I campi vuoti mostrano di nuovo esempi chiari, che non sono contenuti utente salvati. La digitazione segue il normale comportamento del browser. La pagina avvisa prima di uscire dopo modifiche, ma non salva automaticamente una bozza. Scarica il file HTML statico prima di chiudere per conservare il risultato supportato.

Limiti e risoluzione dei problemi

Il testo complessivo è limitato a 100,000 caratteri, con massimo 3,000 nodi HTML e 64 livelli annidati. Superato un limite il testo resta visibile, ma anteprima ed esportazione sono disabilitate. Riducilo per continuare. Un input vuoto non produce risultati scaricabili.

I browser spesso riparano tag di chiusura mancanti e possono ignorare dichiarazioni CSS non valide. Questo editor non verifica gli standard: un’anteprima visibile non dimostra che il codice sia valido, accessibile o pronto per la produzione. Se una regola non ha effetto, controlla selettore e sintassi, poi verifica se dipende da una risorsa remota bloccata. Per un’analisi completa usa gli strumenti di sviluppo del browser nel tuo progetto.

Domande frequenti