Editor di codice HTML istantaneo

Editor di codice HTML istantaneo

Editor di codice HTML online gratuito con anteprima istantanea dal vivo. Inserisci il tuo codice nell’editor e vedi l’anteprima che cambia durante la digitazione. Componi facilmente i tuoi documenti senza installare alcun programma.

C’è un altro editor HTML online che utilizza un editor visuale WYSIWYG collegato all’editor di origine, ma abbiamo trovato necessario creare un compositore separato in cui TinyMCE non sovrascrive gli errori e dà più libertà e controllo., Quel particolare editor corregge il nostro codice ogni volta che considera qualcosa un errore, anche se non lo volevamo. Ora possiamo usare tag e attributi non standard, ASP.NET tag e altro ancora.

Come utilizzare l’editor di codice HTML?

Vedrai l’editor di origine pre-popolato con un testo demo quando carichi il sito Web per la prima volta, permettendoti di sperimentare con lo strumento. Carica questo testo ogni volta che vuoi usando l’opzione di menu allocata. Per aprire un nuovo tag utilizzare l’elenco sopra l’area di testo. Chiudere i tag aperti facendo clic sul pulsante Chiudi sul lato destro della sezione superiore., Questo chiuderà gli articoli uno per uno in ordine di apertura inverso.

L’area di composizione HTML principale utilizza l’evidenziazione della sintassi per rendere i tag del linguaggio di markup facilmente distinguibili e più leggibili. La quantità di caratteri viene visualizzata insieme ai pulsanti di controllo principali: annulla, nuova pagina, regolatore dimensione carattere, compressore e il pulsante di pulizia HTML principale che esegue tutte le opzioni di pulizia selezionate.

L’area di anteprima si trova sul lato destro dell’editor di origine e le modifiche vengono riflesse qui istantaneamente per rendere la composizione HTML più umana., Questa sezione utilizza il CSS Bootstrap, che consente di utilizzare gli stili del framework front-end più popolare.

Scorrendo più in basso si possono trovare molti utili strumenti integrati. Utilizzare la procedura guidata tag per eseguire operazioni di massa sul codice. Dopo la prima colonna tag name list ci sono opzioni aggiuntive per creare nuovi tag, sostituirli, eliminarli completamente con il loro contenuto, rimuovere solo i tag, eliminare gli attributi tag di determinati tag ed è possibile convertire tabelle ed elenchi in elementi div strutturati., Oltre ai tag iframe, table, link, span, image, form e list predefiniti è possibile definire e manipolare ulteriori tag inserendoli nei campi di input. Ogni azione tag wizard può essere eseguita singolarmente con i piccoli pulsanti di gioco o possono essere impostati attivi controllando i punti grigi e applicarli tutti insieme con il pulsante principale nell’angolo in alto a destra della finestra.

Le funzioni di pulizia HTML più basilari sono disponibili e possono essere applicate una per una o tutte le opzioni attive allo stesso tempo., Cancella gli stili in linea, le classi e gli ID indesiderati, i tag vuoti, i tag contenenti solo uno spazio non interrompibile, gli spazi successivi, i commenti. Puoi anche eliminare tutti gli attributi dei tag (eccetto src delle immagini e href dei tag di ancoraggio) o rimuovere tutti i tag con un clic del mouse, rendendo il documento un testo normale.

Lo strumento sostituisci può guardare e scambiare bit di testo nell’intero documento, il contenuto, gli attributi dei tag, gli stili o nelle classi / id. Questo non supporta le espressioni regolari.,

Il selettore colore è un’altra caratteristica importante dell’editor di codice HTML che ci permette di selezionare facilmente il colore desiderato e salvarli per un uso successivo. I frammenti di codice più comuni possono essere facilmente copiati nell’editor.

Il generatore di testo senza senso popola l’editor o l’area allocata sulla pagina con alcuni paragrafi Lorem Ipsum di base.

Consigli utili

Mantenere un backup del contenuto e salvare sempre lo stato di avanzamento del lavoro.
Assicurati di convalidare il codice HTML prima della pubblicazione per evitare errori.
Leggi tutte le cattive pratiche HTML qui.,

Usa il CSS qui sotto per modellare i div convertiti dalle tabelle:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *