Editor HTML Online
Scrivi da un lato, guarda dall’altro
Questo editor HTML online unisce due pannelli di codice a un’anteprima dal vivo. Scrivi markup e CSS, vedi comparire il risultato mentre digiti e lo provi a larghezza di telefono, tablet e desktop. Nulla di ciò che scrivi lascia il browser.
- GratisPrezzo
- DuePannelli
- NessunaRegistrazione
- NessunaCaricamenti
Editor HTML online
HTML e CSS da un lato, un’anteprima dal vivo dall’altro
Pronto. Scrivi in uno dei pannelli e l’anteprima si ridisegna un attimo dopo.
Cosa fa un editor HTML online
Un editor HTML online ti fa scrivere una pagina web e vederla subito. Scrivi l’HTML in un pannello e il CSS nell’altro. Un attimo dopo, l’editor ridisegna la pagina. Così non salvi mai un file, non cambi finestra e non ricarichi solo per controllare una modifica.
I pannelli stanno a sinistra e l’anteprima a destra. Su uno schermo stretto, si impilano. Sopra, una fila di pulsanti imposta la larghezza della vista, così vedi la stessa pagina come la mostrerebbe un telefono, un tablet o un desktop.
Non serve installare nulla. Apri una scheda invece di un editor di codice e la chiudi quando il layout è a posto. Inoltre l’intera bozza resta in questo browser. Una pagina non pubblicata o il prototipo di un cliente non arriva mai al nostro server, perché non c’è alcun passaggio sul server.
Sotto il risultato, l’editor mostra un report che legge il tuo lavoro. Conta gli elementi e le regole CSS. Nomina le regole che non colpiscono nulla ed elenca le lacune di accessibilità che riesce a trovare. Infine elenca tutto ciò che ha bloccato. Così una pagina che sembra a posto ma si legge male emerge qui, e non in una revisione successiva.
Come l’anteprima resta separata da questa pagina
L’anteprima non viene incollata in questa pagina. Invece l’editor la disegna dentro uno shadow root, che funziona come un giardino recintato dentro il browser.
Uno shadow root separa gli stili in entrambe le direzioni, come descrive la specifica HTML. Così la tua regola h1 non raggiunge il titolo sopra, e il nostro foglio di stile non può schiacciare la scheda che stai costruendo.
Grazie a quel muro, l’editor resta onesto. Vedi il tuo markup sotto le tue regole, senza niente di nostro mescolato dentro.
L’editor trasforma anche il tuo testo in elementi veri. Perciò il browser impagina la tua pagina come impaginerebbe un file salvato. Questo conta per una griglia o una riga flex, perché una vista finta spesso nasconde il punto in cui una riga va a capo.
Perché gli script qui non partono
L’editor spegne gli script. È una scelta, non una mancanza. Rimuove i tag script, toglie onclick e ogni altro attributo di evento, e rifiuta i link javascript:.
Ci sono due motivi. Primo, una pagina che esegue il tuo script può essere usata per agire per conto di chi ti ha mandato il frammento. Secondo, un editor che esegue codice non può promettere che nulla esca dal tuo browser.
Quindi il report elenca ogni gestore e ogni tag script che ha tolto. Di conseguenza non ti chiedi mai perché un pulsante non ha fatto nulla.
Se ti serve un ambiente di prova per JavaScript, questa non è la pagina giusta. Costruisci invece qui la struttura e gli stili, poi collega il comportamento nel tuo editor di codice.
Link e moduli sono inattivi per lo stesso motivo. Un clic nell’anteprima potrebbe portare la scheda lontano dal tuo lavoro, quindi l’editor mostra una breve nota.
Provare un layout a tre larghezze
L’editor usa una larghezza, non il nome di un dispositivo. Le preimpostazioni coprono 375 pixel per un telefono, 768 per un tablet e 1280 per un desktop. Inoltre il campo personalizzato accetta qualsiasi larghezza da 200 a 2560.
Le tue media query rispondono a quella larghezza. L’editor trasforma ogni regola @media che guarda solo la larghezza in una container query sul riquadro dell’anteprima. Così un breakpoint a 600 pixel scatta quando la vista è larga 600 pixel, anche se questa pagina è più larga.
La larghezza personalizzata è spesso la più utile. Tra circa 320 e 900 pixel quasi ogni griglia si rompe da qualche parte, e quel punto cade su un numero strano che nessuna preimpostazione copre.
Una pagina larga sta comunque nel tuo schermo. L’editor la riduce allo spazio disponibile, ma tiene la vera larghezza del layout. Per questo a 1280 il testo sembra piccolo, ma va a capo esattamente come su un desktop.
Cosa elenca il report
Il report trasforma l’editor in uno strumento di revisione veloce. Legge markup e foglio di stile dopo ogni ridisegno, poi annota cosa ha trovato.
Prima vengono i conteggi: quanti elementi ha la pagina e quante regole CSS. Poi arriva l’elenco delle regole che non colpiscono nulla. Un refuso nel nome di una classe fallisce in silenzio, perché il browser salta la regola. Perciò il report ti dà il selettore.
Dopo arrivano le note di accessibilità. Un’immagine senza testo alternativo, un campo senza etichetta, un link che contiene solo un’immagine e un titolo che salta dal livello due al livello quattro hanno ciascuno la sua riga.
Poi vengono i tag che un browser riparerebbe da solo, come un div mai chiuso o un tag di chiusura senza apertura. Infine l’elenco dei blocchi nomina ogni script, gestore di eventi, immagine remota, font web e @import fermati. Così un logo mancante arriva con un motivo, non con un mistero.
Video guida: Editor HTML online
Un breve video mostra ogni passaggio. Poi scegli la tua lingua qui sotto e attiva i sottotitoli se vuoi.
Come usare l’editor HTML online
Quattro passi, e nessuno richiede un account.
- 1
Scrivi il markup
Scrivi nel pannello HTML, oppure scegli un esempio per partire da codice che funziona. L’editor ridisegna la pagina un attimo dopo che smetti di scrivere.
- 2
Dagli stile nel secondo pannello
Poi scrivi le regole nel pannello CSS. Entrambi i pannelli alimentano la stessa vista, quindi una modifica in uno dei due compare nello stesso punto.
- 3
Scegli una larghezza
Poi passa per 375, 768 e 1280 pixel, oppure scrivi una tua larghezza. Così trovi l’a capo che succede solo a 420 pixel prima di chiunque altro.
- 4
Leggi il report, poi esporta
Infine correggi le regole morte e le note di accessibilità. Dopo, copia ogni pannello o scarica un solo file HTML che li contiene entrambi.
Perché usare questo editor HTML online
Cinque motivi, e ognuno ti risparmia un giro.
L’anteprima non può toccare questa pagina
L’editor disegna la tua pagina in uno shadow root, quindi una tua regola vagante non può cambiare lo stile della pagina intorno. Anche un selettore universale resta innocuo.
Nulla si carica da un altro server
Un frammento copiato da una pagina sconosciuta non può chiamare casa mentre lo guardi. Di conseguenza puoi aprire il prototipo di un cliente senza preoccuparti dei tracker.
Un report, non un’anteprima vuota
Quando la pagina sembra sbagliata, l’editor spesso dice perché. Per esempio elenca un’immagine mancante come bloccata, invece di lasciarti un riquadro vuoto.
Larghezze vere, media query vere
L’editor impagina la tua pagina alla larghezza che scegli, quindi i tuoi breakpoint scattano davvero. Un layout che regge a 375 e 768 probabilmente reggerà sugli schermi che quei numeri rappresentano.
Esce un solo file
Il download mette markup e foglio di stile in un unico file HTML. Così puoi passarlo a un collega o aprirlo offline, senza passaggi di build in mezzo.
Abitudini che rendono utile l’editor
Sei abitudini che trasformano una bozza in un vero flusso di lavoro.
- Parti da un esempio Carica la griglia di schede, il modulo o l’articolo, poi taglia. Uno scheletro che funziona batte un pannello vuoto quando ti serve un solo componente.
- Scrivi prima il markup L’HTML semplice si legge già bene in un browser, quindi la struttura appare prima di qualsiasi regola. Poi il CSS deve solo sistemare ciò che c’è già.
- Dai un motivo a ogni regola Cancella una regola appena non colpisce nulla. Il report nomina quelle regole, e un foglio di stile senza regole morte è molto più facile da mantenere.
- Controlla prima la larghezza stretta Parti da 375 pixel e allarga da lì. Un layout che funziona stretto di solito si allarga bene, mentre il contrario capita di rado.
- Dai alle classi il nome del loro compito Scrivi card-foot invece di grey-small. Il nome di una classe passa al redesign successivo, e un nome legato a un colore o a una misura invecchia male.
- Svuota l’elenco degli alt prima di esportare Compila ogni testo alternativo che il report chiede. Così il markup lascia la pagina in condizioni migliori di come è arrivato.
Sei modi in cui un’anteprima dal vivo ti inganna
Ognuno sembra a posto nel pannello e ti sorprende dopo.
Fidarsi di un’anteprima che non è la pagina vera
Un frammento che funziona da solo può rompersi dentro un template, e ogni anteprima ha questo limite. Quindi incollalo nel sito vero e controllalo lì prima di pubblicarlo.
Lasciare gli script e aspettarsi che partano
Questo editor toglie apposta i tag script e i gestori di eventi. Perciò un pulsante che qui non fa nulla non è un bug, e il report nomina ciò che ha tolto.
Dimenticare che i file remoti non si caricano mai
Un logo, un font di icone o uno sfondo da un altro server non apparirà. Usa quindi una data URI mentre lavori, oppure accetta il vuoto e aggiungi il file vero più tardi.
Dare stile a un elemento che non c’è
Una regola per una classe che il tuo markup non usa mai non cambia nulla. La pagina non lo segnala, quindi il report è l’unico posto in cui l’errore emerge.
Provare solo la larghezza maggiore
Un controllo solo desktop perde molti lettori, dato che molti navigano dal telefono. Per questo la fila delle preimpostazioni parte dalla larghezza del telefono.
Chiudere la scheda con l’unica copia
La bozza vive solo in questo browser, e cancellare i dati del sito la elimina. Quindi scarica il file quando il layout è a posto.
Domande sull’editor HTML online
Questo editor HTML online è gratis?
Sì. Non ci sono account, limiti o piani a pagamento. Aprilo tutte le volte che vuoi.
Che cos’è un editor HTML online?
È una pagina dove scrivi HTML e CSS e vedi il risultato mentre digiti. In breve, l’editor trasforma il tuo browser nel risultato, così smetti di cambiare finestra per vedere l’effetto di una modifica.
Esegue il mio JavaScript?
No. Tag script, attributi di evento e link javascript: vengono tutti rimossi, e il report li elenca uno per uno. Così un frammento di uno sconosciuto non può agire mentre lo leggi.
L’anteprima può rompere questa pagina?
No. Viene disegnata dentro uno shadow root, quindi una tua regola non raggiunge la pagina, e una nostra regola non raggiunge il tuo markup.
Posso caricare un’immagine da un altro sito?
No. L’editor blocca le richieste verso altri server, e il report lo dice. Tuttavia una data URI funziona, perché viaggia dentro il markup.
Quali larghezze posso provare?
Le preimpostazioni coprono 375, 768 e 1280 pixel, e il campo personalizzato accetta qualsiasi larghezza da 200 a 2560. Quindi puoi fermarti proprio sul numero in cui la griglia si rompe.
Le mie media query funzionano?
Sì, quelle di larghezza. L’editor trasforma ognuna in una container query sul riquadro dell’anteprima, così scatta alla larghezza scelta nell’editor. Le altre, come print o hover, mantengono il loro significato normale.
Cosa controlla il report?
Conta gli elementi e le regole CSS, ed elenca le regole che non colpiscono nulla. Inoltre elenca le lacune di accessibilità, i tag che un browser riparerebbe e tutto ciò che ha bloccato.
Il mio markup viene salvato da qualche parte?
Solo in questo browser, come bozza. Quando torni, l’editor la ricarica. Cancellare i dati del sito la elimina, quindi scarica il file per tenerla.
Posso incollare markup che non ho scritto io?
Sì. L’editor toglie le parti che potrebbero agire per conto di altri prima di disegnare qualsiasi cosa. Perciò un frammento sconosciuto si può guardare qui senza rischi.
Posso incollare una pagina intera?
Sì. Un documento completo funziona. L’editor tiene i blocchi style dell’head e mostra il contenuto del body dentro l’editor.
Mi dirà se il mio HTML non è valido?
Segnala un tag mai chiuso e un tag di chiusura senza apertura. Un browser ripara entrambi in silenzio, quindi la pagina da sola li nasconderebbe.
Supporta grid e flexbox?
Sì. L’editor disegna un riquadro vero in un browser vero, quindi entrambe le modalità di layout si comportano come in produzione.
Posso copiare il codice alla fine?
Sì. Ogni pannello ha il suo pulsante di copia. Inoltre il download mette entrambi i pannelli in un unico file HTML.
Che fine fanno gli script nel download?
Il file tiene il tuo markup e i tuoi stili. Tuttavia i tag script diventano brevi commenti e gli attributi di evento spariscono, quindi il file corrisponde a ciò che hai visto.
Posso annullare una modifica?
Sì. Ogni pannello è una normale casella di testo, quindi l’annulla del browser funziona al suo interno. Per ricominciare, scegli un esempio e caricalo di nuovo.
Formatta o minifica il codice?
No, ed è voluto. Ogni pannello tiene gli spazi che hai digitato. Quando il markup è pronto, passalo invece al minificatore.
Funziona sul telefono?
Sì. I pannelli si impilano su uno schermo stretto, e l’editor tiene la pagina alla sua larghezza. Così puoi sistemare un a capo anche lontano dalla scrivania.
Di chi è il markup che scrivo?
Tuo. Non devi citare nessuno e non abbiamo pretese, quindi puoi usarlo in lavori pagati.
Mi serve un account o un’estensione?
No. La pagina funziona da sola, senza registrazione e senza nulla da installare.
Strumenti che vanno con questo
Quattro pagine a cui lo stesso lavoro porta spesso.
Prova un selettore sul markup che incolli e guarda cosa prende. Un selettore che non colpisce nulla sfugge facilmente all’occhio, quindi questa pagina lo nomina.
Apri lo strumento →Quando il layout è pronto, togli i commenti e gli spazi in più. Così il file che pubblichi porta la struttura, non gli appunti dietro.
Apri lo strumento →Prima di spedire il markup come email, controllalo come lo legge un client di posta. Un client di posta toglie molto più di un’anteprima web.
Apri lo strumento →Quando una pagina ha bisogno di un’icona o di un piccolo schema, disegnalo e sistemalo lì. Poi incolla il codice SVG pulito direttamente nel pannello HTML.
Apri lo strumento →
Scrivi il markup e guardalo prendere forma
Scrivi l’HTML, dagli stile nel pannello accanto, passa per le tre larghezze e leggi il report. Nulla si carica da un altro server, nessuno script parte e l’intera bozza resta nel tuo browser.