Editor html visivo. Editor HTML visivo

HTML visivo- un editor simile a Macromedia Dreamweaver, ma completamente gratuito. Un ottimo strumento per i principianti che stanno appena iniziando a padroneggiare la scienza della creazione di siti Web.

Perché è bravo? Sì, il fatto che per creare una pagina web non sia necessario preoccuparsi dello studio dei linguaggi di programmazione web. Basta digitare testo, inserire immagini o animazioni e NVU si occupa di tutto il lavoro "sporco" di decorare tutto questo in HTML.

Purtroppo al momento lo sviluppo di NVU è stato sospeso, ma il progetto è cresciuto fino alla prima versione stabile, e questo è già tanto. Diamo un'occhiata più in dettaglio.

Capacità della NVU

• diverse modalità di visualizzazione della pagina modificata;
• ampie opportunità per la progettazione del testo;
• inserimento di immagini (inclusi sfondi);
• la capacità di lavorare sull'intero sito, e non solo sulle singole pagine;
• creazione di tabelle e moduli;
• pubblicazione del sito modificato direttamente dall'editore;
• proprio editor CSS (Cascading Style Sheet) e console Java Script.

Tutto questo e molto altro ci permette di realizzare un piccolo sito da zero con conoscenze minime (preferibilmente) nel campo dell'HTML (o la loro totale assenza :)).

Installazione dell'editor visivo

Download in corso... Installazione in corso... Avvio e visualizzazione :) (esatto: nessun gesto non necessario con Russification, immissione di informazioni aggiuntive, ecc.).

Accettiamo di creare un collegamento sul desktop e di avviare NVU con esso.

Interfaccia NVU

A prima vista, NVU somiglia ad alcuni editor di testo. Questo è il suo merito principale: visivo GUI.

Ma guardando in basso, vedrai che oltre alle solite, ci sono molte altre modalità per visualizzare le informazioni inserite:

• tag HTML;
• e anteprima.

Modalità tag HTML

I "tag HTML" sono una specie di mosaico di testo e tag, progettati come rettangoli colorati.

Questa modalità di visualizzazione è utile per gli utenti inesperti, in quanto mostra tutti i principali tag utilizzati e allo stesso tempo non si preoccupa di un gran numero di essi, pur rimanendo lo stesso editor visivo.

Inoltre, in questa modalità è conveniente studiare i nomi dei tag, in modo da poterli utilizzare facilmente in seguito nella modalità di modifica del codice.

Codice modalità

La modalità "Codice" è una finestra familiare a tutti gli sviluppatori web con il codice HTML della pagina in fase di modifica. È da qui, da tutti questi scarabocchi, che crescono tutte le risorse di Internet.

Avendo imparato il linguaggio del codice, puoi facilmente aggiungere al tuo sito qualsiasi controllo, script e altri "chicche" che sei abituato ad ammirare sui siti di altre persone :).

Anteprima

E, infine, "Anteprima" permette di valutare il risultato dei nostri sforzi, visualizzando la pagina nella forma che acquisirà su Internet.

Nello screenshot, non differisce dalla controparte testuale, ma vale la pena aggiungere eventuali elementi di navigazione o script, poiché la differenza si rivelerà da sola:

Se stavi modificando questa pagina in Blocco note come un programmatore hardcore, avresti bisogno almeno di un browser e di un server Web locale per visualizzarla.

E qui, come si suol dire, già "tutto compreso".

Ora che le opzioni di visualizzazione e modifica sono state un po' chiarite, diamo uno sguardo più approfondito alle capacità di NVU.

Funzionalità nascoste dell'editor HTML visivo di NVU

Tutte le opzioni di formattazione di base sono disponibili come icone, ma alcune opzioni sono nascoste nella barra dei menu.

Ad esempio, nel menu "File" troverai funzioni come:

1. "Apri un indirizzo su Internet". Grazie al motore di Mozilla permette di aprire e modificare le pagine direttamente da Internet.

Questo può essere molto utile se vuoi vedere come viene eseguita questa o quella funzionalità per il sito. Basta inserire l'indirizzo nella finestra che si apre e ammirare il risultato:

2. "Esporta in formato testo". Dopo aver ammirato il sito, puoi salvarne il codice sorgente in formato .txt sul tuo disco rigido.

In "Modifica" ci sono strumenti per cercare le parole giuste nel testo e controllare l'ortografia.

Nel menu "Inserisci", puoi prestare attenzione alla possibilità di inserire codice PHP e caratteri che non sono sulla tastiera.

"Formato" offre un'ampia gamma di opzioni per personalizzare l'aspetto di testo, immagini e altre informazioni.

La caratteristica più interessante e, soprattutto, non visualizzata da nessuna parte qui è "Colore e sfondo della pagina". Usando questa opzione, puoi facilmente aggiungere qualsiasi immagine di sfondo o semplicemente scegliere un buon colore di sfondo per il sito.

Infine, il menu "Strumenti" fornisce opzioni come l'accesso a una console JavaScript, un editor CSS e uno strumento di ispezione del codice HTML.

Inoltre da qui puoi accedere alle impostazioni del programma e alle impostazioni del tema NVU.

conclusioni

NVU è facile da capire, poiché tutti i controlli del programma sono forniti con suggerimenti e spiegazioni e, grazie a un gruppo di sviluppatori russi del team Mozilla.ru, c'è anche un ottimo aiuto in russo.

L'unico svantaggio di NVU è che il codice generato dal programma è molto ingombrante e ha molti tag non necessari. Ma lascia che questo sia solo un incentivo per te a studiare HTML, ottimizzare e portare il tuo sito alla perfezione.

Buona fortuna per i tuoi sviluppi e successo in tutti i tuoi sforzi!

PS È consentito copiare e citare liberamente questo articolo, a condizione che sia indicato un collegamento attivo aperto alla fonte e sia preservata la paternità di Ruslan Tertyshny.

NVU è un piccolo programma per la modifica del codice HTML. Editor HTML NVU ha un'interfaccia visiva ed esiste per vari sistemi operativi. Questo editor di codice è stato creato sulla base dell'editor HTML di Mozilla Composer, grazie al quale NVU è abbastanza semplice e comprensibile, e in termini di capacità è già molto più avanti del programma originale e si è avvicinato alla funzionalità di editori a pagamento come Dreamweaver e FrontPage.

Uno dei vantaggi di questo editor di codice è che puoi scaricare NVU in russo. La pagina russa NVU è completamente tradotta, il che rende più facile per gli utenti che non hanno familiarità con lingua inglese. Se scarichi NVU gratuitamente in russo, otterrai programma conveniente per creare la tua pagina o sito di buona qualità, anche se sei un principiante assoluto. Nell'editor puoi creare siti che soddisfano tutti gli standard Internet necessari.

Gli utenti più esperti, se lo desiderano, possono passare direttamente alla modifica del codice. Inoltre, NVU ha altri strumenti come Site Manager e CSS Editor. Con loro, puoi modificare le pagine che sono su Server remoto, usa l'evidenziazione della sintassi, verifica la presenza di errori nel codice, ecc. L'interfaccia dell'editor è facile da modificare attraverso l'uso di vari temi e le possibilità sono facilmente estese installando estensioni create per NVU.

Puoi utilizzare tutte le funzionalità dell'editor se scarichi la NVU in un paio di minuti. Questo editor HTML ha schede, anteprime e accesso ai tag più comunemente usati, rendendo lo sviluppo del sito molto più veloce. Ci sono anche molte opzioni per cambiare il testo: centratura, carattere, stile, ecc.

Caratteristiche dell'editor HTML NVU

• può essere installato su Windows, Linux, Mac OS X;
• codice open source disponibile per la visualizzazione e la modifica;
• l'utente può modificare o modificare personalmente il programma per i propri scopi;
• la possibilità di modificare direttamente codice HTML e CSS;
• una piccola quantità di spazio su disco occupato dal computer;
• gli elementi hanno proprietà i cui parametri sono configurabili;
• evidenziazione della sintassi.

Vlad Merzevich

Per un lavoro efficace, non puoi fare a meno degli strumenti necessari e familiari, anche durante la scrittura di codice HTML. Pertanto, per lo sviluppo iniziale di pagine Web o anche di un piccolo sito - questo è il nome di un insieme di pagine interconnesse da collegamenti e un unico design, abbiamo bisogno dei seguenti programmi.

• Editor di testo.
• Browser per visualizzare i risultati.
• Validator è un programma per controllare la sintassi HTML e rilevare gli errori nel codice.
• Editor grafico.
• Riferimento ai tag HTML.

Editor di testo

Un documento HTML può essere creato in qualsiasi editor di testo, anche Blocco note, tuttavia, non tutti i programmi sono adatti a questo scopo. Hai bisogno di uno che supporti le seguenti funzionalità:

• evidenziazione della sintassi - evidenziazione di tag, testo, parole chiave e parametri in diversi colori. Ciò semplifica la ricerca dell'elemento desiderato, velocizza il lavoro dello sviluppatore e riduce il verificarsi di errori;
• lavoro a schede. Il sito è un insieme di file che devono essere modificati separatamente, il che richiede un editor che possa lavorare contemporaneamente con più documenti contemporaneamente. Allo stesso tempo, è conveniente aprire i file in schede separate per passare rapidamente al documento desiderato;
• verificando la presenza di errori nel documento corrente.

PSPad

Lettore HTML

Blocco note++

Modifica più

Browser

Un browser è un programma progettato per visualizzare le pagine web. All'inizio va bene qualsiasi browser, ma con l'aumento dell'esperienza e delle conoscenze, sarà necessario avviare un intero "serraglio" per verificare la corretta visualizzazione del sito nei diversi browser. Il fatto è che ogni browser ha le sue caratteristiche uniche, quindi per verificare l'universalità del codice, è necessario rivedere e adattare il codice per tenerne conto. I tre browser più popolari oggi sono Firefox, Internet Explorer e Opera.

Mozilla Firefox

Un browser promettente e in via di sviluppo che ha ricevuto riconoscimenti in tutto il mondo. La sua caratteristica è la semplicità e l'estendibilità, che si ottiene attraverso apposite prolunghe, come vengono chiamate. Inizialmente, Firefox ha un insieme delle sole funzioni più necessarie, ma installando le estensioni desiderate, puoi eventualmente trasformare il browser in un sistema che esegue tutte le azioni necessarie per svolgere il tuo lavoro. Il browser Firefox è un sistema aperto sviluppato dal gruppo Mozilla.

Microsoft Internet Explorer (IE)

Uno dei browser più vecchi che viene fornito con il sistema operativo gratuitamente Sistema Windows. Questo ha determinato la sua popolarità. La versione IE 7 è più vicina in termini di praticità ai suoi vecchi concorrenti, in particolare sono apparse le schede. Sfortunatamente, questo browser supporta la specifica HTML la peggiore di tutte, quindi per una corretta visualizzazione in IE, a volte devi eseguire il debug separatamente del codice specifico per esso.

musica lirica

Un browser veloce e conveniente che supporta molte funzionalità aggiuntive che aumentano il comfort di lavorare con i siti.

safari

Sviluppato da Apple, questo browser è integrato in iPhone e sistema operativo MacOS su computer Apple. Esiste anche una versione per Windows.

Google Chrome

Un browser apparso sul mercato alla fine del 2008. Sviluppato da Google.

Validatore

La convalida di un documento HTML è progettata per rilevare errori nella sintassi di una pagina Web e discrepanze con la specifica HTML. Di conseguenza, un programma o sistema per tale verifica è chiamato validatore.

Come verificare la validità del file HTML

Se hai accesso a Internet, dovresti andare su http://validator.w3.org e inserire il percorso del documento o del sito da controllare in un modulo speciale. Dopo la convalida, verranno visualizzati eventuali errori o apparirà un'iscrizione che indica che il documento è stato convalidato con successo.

Ordinata

Per controllare un file HTML locale o quando non c'è connessione a Internet, è progettato il programma Tidy. Alcuni editor, come PSPad, contengono già Tidy integrato e la convalida dei documenti può essere eseguita senza strumenti aggiuntivi.

Editor grafico

È necessario un editor grafico per elaborare le immagini e prepararle per la pubblicazione su una pagina web. Il programma più popolare di questo tipo è Photoshop, che è diventato lo standard per l'elaborazione di foto e la creazione di grafica per siti Web. Ma la maggior parte delle volte la potenza di Photoshop è eccessiva ed è meglio usare qualcosa di più semplice e agile. In particolare, il programma Paint.Net ti consente di eseguire tutte le manipolazioni necessarie con le immagini, inoltre è gratuito.

Riferimento tag HTML

All'inizio ricordare a memoria tutti i tag e i relativi parametri è difficile, quindi è necessario esaminare periodicamente il manuale per chiarire un problema particolare. In generale, tutti hanno bisogno di una buona guida, indipendentemente dal livello di formazione.

Elenchi in linea

Descrizione dei tag HTML (in inglese)
http://www.w3.org/TR/html4/index/elements.html

Su questo sito troverai anche una delle migliori guide ai tag in Runet.

Un editor HTML visivo simile a Macromedia Dreamweaver ma gratuito.

L'ultima volta ti ho parlato di come controllare le prestazioni del tuo sito utilizzando server locale di Denver. Ma la questione stessa della creazione di questo sito è rimasta irrisolta. Proviamo a rimediare a questa fastidiosa svista: oggi vi parlerò di un programma con il quale potete realizzare un semplice sito web, anche senza conoscere la programmazione HTML e altri trucchi.

Porto alla vostra attenzione editor HTML visivo gratuito NVU.

Perché è bravo? Sì, il fatto che per creare una pagina web non sia necessario preoccuparsi dello studio dei linguaggi di programmazione web. Basta digitare testo, inserire immagini o animazioni e tutto il lavoro "sporco" di decorare tutto questo in HTML prende il sopravvento NVU.

Purtroppo, attualmente lo sviluppo NVU sospeso, ma il progetto è cresciuto fino alla prima versione stabile, e questo è già molto.

Capacità della NVU

• sostegno più modalità di visualizzazione pagina modificabile;
• opzioni avanzate per modifica del testo;
• inserire immagini(compreso lo sfondo);
• la modifica singole pagine e interi siti;
• creazione di moduli e tabelle;
• controllo ortografico;
• possibilità pubblicazioni del sito direttamente dal programma;
• editor CSS integrato e console Java Script.

Tutto questo e molto altro ci permette di realizzare un piccolo sito da zero con conoscenze minime (preferibilmente) nel campo dell'HTML (o la loro totale assenza :)).

Download in corso... Installazione in corso... Avvio e visualizzazione :) (esatto: nessun gesto non necessario con Russification, immissione di informazioni aggiuntive, ecc.). Accetta di creare un collegamento sul desktop ed eseguirlo con esso NVU:

Interfaccia NVU

Da uno sguardo NVU sembra una specie di editor di testo. Questo è il suo merito principale: un'interfaccia grafica visiva. Ma, guardando sotto, vedrai che oltre al solito ce ne sono molti altri modalità di visualizzazione informazioni inserite: tag HTML, codice e anteprima.

Modalità tag HTML

"Tag HTML" sono una sorta di mosaico di testo e tag, disegnati come rettangoli colorati. Questa modalità di visualizzazione è utile per gli utenti inesperti, in quanto mostra tutti i principali tag utilizzati e allo stesso tempo non si preoccupa di un gran numero di essi, pur rimanendo lo stesso editor visivo. In questa modalità è bene imparare i nomi dei tag, in modo da poterli utilizzare facilmente in seguito nella modalità di modifica del codice.

Codice modalità

Modalità "Il codice"è una finestra con il codice HTML della pagina in fase di modifica, familiare a tutti gli sviluppatori web. È da qui che tutte le risorse di Internet crescono da tutti questi scarabocchi. Avendo imparato il linguaggio del codice, puoi facilmente aggiungere al tuo sito qualsiasi controllo, script e altri "chicche" che sei abituato ad ammirare sui siti di altre persone :).

Anteprima

E infine "Anteprima" consente di valutare il risultato dei nostri sforzi, visualizzando la pagina nella forma che acquisirà su Internet. Nello screenshot, non differisce dalla controparte testuale, ma vale la pena aggiungere eventuali elementi di navigazione o script, poiché la differenza si rivelerà da sola:

Ora che le opzioni di visualizzazione e modifica sono state un po' chiarite, diamo uno sguardo più approfondito alle possibilità. NVU. Interagire con il programma, puoi usare barra dei menu o usando pittogrammi e simboli sotto di esso.

Funzionalità nascoste dell'editor HTML visivo di NVU

Tutte le opzioni di formattazione di base sono disponibili come icone, ma alcune opzioni sono nascoste nella barra dei menu e non vengono visualizzate immediatamente.

Ad esempio, nel menu "File" Lo troverai funzioni,, come:

1. "Apri un indirizzo su Internet". Grazie al motore di Mozilla permette di aprire e modificare le pagine direttamente da Internet. Questo può essere molto utile se vuoi vedere come viene eseguita questa o quella funzionalità per il sito. Basta inserire l'indirizzo nella finestra che si apre e ammirare il risultato:

2. "Esporta in formato testo". Dopo aver ammirato il sito, puoi salvarne il codice sorgente in formato .txt sul tuo disco rigido.

A "La modifica" ci sono strumenti per ricerca le parole giuste nel testo e correttore ortografico.

Sul menu "Inserire" attenzione può essere prestata alla possibilità Inserti di codice PHP e caratteri che non sono sulla tastiera.

"Formato" offre le maggiori opportunità per impostazioni di visualizzazione del testo, immagini e altre informazioni. L'opportunità più interessante e, soprattutto, non mostrata da nessuna parte qui è "Colore e sfondo della pagina". Usando questa opzione, puoi facilmente aggiungere qualsiasi immagine di sfondo o semplicemente impostare il colore di sfondo per il sito.

Finalmente il menù "Strumenti" fornisce funzionalità come l'accesso a Console JavaScript, editore css e strumento per Convalida HTML codice. Anche da qui puoi accedere impostazioni programmi e impostazioni tema disegno NVU.

A NVU facile da capire, poiché tutti i comandi del programma sono dotati di suggerimenti e spiegazioni, e grazie a un gruppo di sviluppatori russi di Squadra Mozilla c'è anche un molto buono aiuto in russo. L'unico aspetto negativo NVU c'è che il codice generato dal programma è molto ingombrante e ha molti tag extra. Ma lascia che questo sia solo un incentivo per te a studiare HTML, ottimizzare e portare il tuo sito alla perfezione.

Buona fortuna con i tuoi sviluppi e successo in tutti i tuoi sforzi :)!!!

PS Questo articolo è destinato alla distribuzione gratuita. È possibile copiarlo salvaguardando la paternità Ruslan Tertyshny e tutto P.S. e P.P.S.

P.P.S. Potrebbe piacerti anche un altro piuttosto sensato

Vorrei anche consigliare un bene Libro HTML che ho usato io stesso: