Editor HTML

Editor HTML è un editor di testo che si utilizza per le pagine Web. Fornisce la maggior parte delle funzioni più comunemente utilizzate negli editor desktop, da Word al Web. Editor HTML permette di scrivere testo, formattare testo, creare tabelle e molto altro.

Apprendere l’utilizzo di Editor HTML

Funzioni dei menu

Apri file – questa funzione permette di aprire il File Manager dove è possibile lavorare su un file esistente oppure accedere ai dati precedentemente memorizzati.

Salva – consente di mettere al sicuro il lavoro eseguito e riprendere dal punto in cui è stato interrotto o di salvare le modifiche nel lavoro.

Salva con nome – questa funzione consente di salvare le modifiche in file separati.

Nuova pagina – utilizzare questa funzione per iniziare un nuovo progetto.

Origine – questa funzione consente di visualizzare il codice HTML; con questa funzione è possibile anche modificare la pagina.

Anteprima – consente di visualizzare la pagina Web prima della pubblicazione.

Stampa – se il proprio computer è collegato a una stampante, è possibile selezionare l’icona di stampa.

Modelli – questa funzione permette di visualizzare blocchi e fornisce esempi di organizzazione/struttura della pagina.

Taglia – consente di tagliare il testo e di incollarlo all’interno del file o altrove.

Copia – consente di copiare il testo e di incollarlo all’interno del file o altrove.

Incolla – consente di inserire il testo che è stato tagliato all’interno del file o altrove.

Incolla come testo normale – se è presente testo formattato che non si desidera come tale, tale testo apparirà come non formattato quando viene incollato (Nota: questa funzione viene generalmente utilizzata per il codice).

Incolla da Word – questa funzione consente di incollare testo da Microsoft Word.

Annulla – permettere di ritornare all’azione precedente.

Ripeti – permettere di annullare la precedente azione di annullamento.

Trova – permette di individuare testo/codice all’interno del file.

Sostituisci – inserire il testo/codice che si desidera trovare e selezionare l’opzione Trova. Il testo immesso nel campo di ricerca verrà evidenziato nell’editor. Selezionare quindi Sostituisci e scegliere il testo da sostituire in una o in tutte le ricorrenze di tale testo.

Seleziona tutto – consente di selezionare tutto il testo.

Modulo – è possibile creare un modulo che contenga testo e campi e che l’utente può inviare. Consente di ottenere i dati dell’utente.

Casella di controllo – una casella di controllo permette all’utente di selezionare più voci in un elenco di opzioni.

Pulsante di opzione – simile alle caselle di controllo, ma generalmente con una sola voce da selezionare tramite clic del mouse, le altre non saranno selezionabili. (ad esempio: scegliere una delle seguenti opzioni).

Campo di testo – consente al visitatore del sito di digitare in un campo che può essere inviato all’amministratore del sito.

Area di testo – viene utilizzata in HTML per contenere un numero illimitato di caratteri, ma con altezza e larghezza limitate.

Campo di selezione – fornisce un modulo contenente opzioni selezionabili dall’utente.

Pulsante – può essere utilizzato per funzioni diverse, vale a dire per inviare un modulo, ripristinare un modulo o attivare uno script, a seconda del caso di utilizzo.

Pulsante Immagine – funge da pulsante ma contiene un’immagine.

Campo nascosto – utilizzato prevalentemente per la memorizzazione di informazioni quando vengono inviati i moduli.

Grassetto – enfatizza il testo (acquisisce maggiore spessore).

Corsivo – consente di enfatizzare o denotare titoli e nomi.

Sottolineato – consente di sottolineare il testo.

Barrato – consente di barrare il testo.

Pedice – consente di scrivere il testo sotto la riga.

Apice – consente di scrivere il testo sopra la riga.

Rimuovi formattazione – consente di rimuovere la formattazione dal testo.

Numeri – un elenco ordinato (numerato).

Punti di elenco – un elenco non ordinato.

Aumenta/Riduci rientro – consente di aumentare o ridurre il rientro del testo.

Citazione – omette le virgolette in un testo citato di grandi dimensioni (formatta i blocchi di testo con il rientro corretto).

Div contenitori – crea contenitori intorno al contenuto della pagina Web.

Allinea a sinistra, al centro, a destra, giustifica – posizionamento del contenuto/testo.

Direzione testo sinistra, destra – il simbolo indica la direzione.

Collegamento – evidenzia il testo per allegare un collegamento esterno alla pagina (noto anche come collegamento ipertestuale).

Scollega – evidenzia il testo collegato e rimuove il collegamento allegato.

Ancoraggio – collega a un’altra sezione della pagina.

Carica immagine – nell’editor, quando si fa clic su un’immagine, sono disponibili tre opzioni.

• Sarà chiesto di inviare l’URL per l’immagine (percorso file), testo alternativo, dimensioni, bordo e allineamento. È anche possibile aggiungere un’anteprima del testo.
• È possibile inoltre specificar il collegamento all’immagine direttamente e specificare la destinazione.
• La funzione Opzioni avanzate consente di specificare l’ID, la direzione della lingua, il codice lingua, l’URL a descrizione estesa, le classi di fogli di stile, il titolo di avviso e lo stile.

Flash – in questo punto deve essere specificato un URL e le dimensioni, nonché l’anteprima. Per fornire ulteriori dettagli, è possibile impostare proprietà quali la scala, accesso allo script, la modalità finestra, la qualità e l’allineamento. Sono inoltre disponibili variabili per Flash che permettono l’abilitazione del menu Flash, dell’esecuzione automatica e la riproduzione ciclica nonché la visualizzazione a schermo intero.

Tabella – è possibile aggiungere facilmente una tabella e specificare la larghezza e l’altezza, il numero di righe e di colonne, le intestazioni, la dimensione del bordo, la spaziatura e l’allineamento.

Inserisci riga orizzontale – selezionando questo pulsante, sarà aggiunta automaticamente una riga alla pagina.

Emoticon – scegliere da una gamma di emoticon per esprimere le diverse emozioni.

Caratteri speciali – quando si fa clic su questo pulsante, sarà visualizzata un’ampia scelta di caratteri speciali per i diversi scopi (lingue diverse, simboli di valuta e altro).

Interruzione pagina – questa funzione viene generalmente utilizzata per la stampa della pagina.

Iframe – un riquadro in cui è possibile aggiungere contenuto HTML da un’altra origine all’interno di un altro documento HTML (vale a dire, un annuncio pubblicitario o un banner).

Creare una nuova pagina HTML

1. Dall’elenco delle app Web, selezionare “Editor HTML” sotto i file.
2. Creare la pagina aggiungendo testo, tabelle, immagini, ecc.
3. Una volta completato, selezionare “Salva con nome”.
4. Digitare il nome che si desidera assegnare al file (Nota: è necessario utilizzare l’estensione .htm o .html per tutti i file che potranno visualizzare gli utenti).
5. È possibile visualizzarlo successivamente in File Manager.
6. Fare clic su Salva per rendere permanenti le modifiche.

Aggiornare/modificare una pagina HTML esistente

1. Selezionare Apri dal menu in alto.
2. Individuare e fare clic sul file che si desidera modificare utilizzando l’elenco di directory.
3. Apportare le modifiche necessarie alla pagina.
4. Dopo aver completato, fare clic su Salva per rendere permanenti le modifiche.

Caricamento dei file sul server

1. Fare clic su ‘‘Sfoglia’’, selezionare un file dal desktop o da File Manager.
2. Successivamente, selezionare il pulsante “Carica”.

Nota: È possibile caricare solo documenti HTML, file Flash e immagini. È possibile visualizzare e memorizzare i file nella cartella pubblica.