A capo automatico
Il testo può essere inserito come in qualunque editor di testi o di documenti e fin qui nulla di nuovo. Per orientarsi meglio durante l'inserimento è disponibile un'opzione tramite menù contestuale sul documento chiamata Word wrap o anche tramite la barra strumenti di Edit.
Tale opzione consente di attivare l'a capo automatico in fase di editing; in fase di visualizzazione è attivo comunque. Per ammissione del produttore stesso, tale opzione non funziona correttamente, quindi può capitare di averla attiva ma non funzionante. In tal caso basta disattivarla e riattivarla nuovamente. Il problema verrà risolto con la prossima uscita del programma (fra breve).
Caratteri speciali
Considerando che Internet permette la comunicazione fra sistemi operativi diversi e nazioni diverse, alcuni caratteri possono dare incompatibilità. Per questo motivo andrebbero sempre sostituiti con degli strani codici che garantiscono la compatibilità totale. Con 1st Page non è necessario ricordarsi tali codici a memoria ma basta ricorrere alla finestra di visualizzazione caratteri e selezionare quello di interesse; con un doppio click esso verrà inserito correttamente nel punto di inserimento del documento attivo. Per richiamare la tabella:
Menù: [View->Special character symbols]
Easy: Properties->View special characters list
Expert:View->View Extended Characters (c'è disegnata una C); la toolbar View è quella che sta in alto a sinistra nella seconda riga. In pratica se non avete modificato le opzioni, non fa parte della Tooltab.
Come potete notare, anche le doppie virgolette, i segni di maggiore e minore e la e commerciale fanno parte dei caratteri speciali. Un 'non breaking space' cioè uno spazio che separa due parole che dovrebbero stare su una stessa riga, può comodamente essere inserito da: Expert->Standard->Non Breaking Space.
Un piccolo trucco: se non avete la pazienza di selezionare di volta in volta i caratteri speciali, stilate il documento usando i caratteri della tastiera e poi effettuate le sostituzioni n seguito (l'importante è ricordarsi di farle!).
Un altro trucco (ancora più comodo): andare sul menù: [Options->Editing Preferences->Auto Correct]: qui è possibile impostare delle correzioni automatiche. Questo strumento è utilissimo al nostro scopo in quanto basterà impostarlo affinché sostituisca tutti i caratteri normali (digitati sulla tastiera) con quelli speciali e la sostituzione avverrà in automatico ogni volta che digiteremo tale carattere. La sostituzione avviene se il carattere o la sequenza di caratteri è seguita da uno spazio. Quindi ricordatevi di mettere uno spazio dopo i caratteri speciali (se non volete lo spazio digitatelo ugualmente in modo che avvenga la correzione automatica, dopodiché lo cancellate con BACKSPACE). Il fatto che debba essere digitato lo spazio è comunque comodo perché se si vogliono sostituire ad esempio i simboli di < e >, quando inseriamo un comando come ad esempio <BODY>, esso verrà lasciato giustamente inalterato.
Un terzo metodo di sostituzione dei caratteri speciali consiste nella sostituzione a documento terminato tramite lo strumento Tidy HTML.
Inserire commenti
I commenti sono parti di testo non visibili all'interno del browser. Possono essere utilizzati per commentare il codice, oppure possono contenere informazioni sull'autore, e sul sito, il che può essere utile perché le pagine in formato HTML sono comunque facilmente visibili nel loro formato originale. Il tasto apposito presente sulla toolbar Expert è: Standard->Comment. Oppure dal menù contestuale: HTML->HTML Comment. Infine è molto utile la funzione presente su menù contestuale: dopo aver selezionato la parte di testo da trasformare in commento andare su: Selected->Comment this text.
Formattazione del testo
Se ci si limita ad inserire del testo all'interno di una pagina web, senza nessuna formattazione, esso apparirà con le caratteristiche standard, quindi con un carattere Times New Roman, dimensione normale, nero su sfondo grigio chiaro, allineato a sinistra. Con l'impostazione del tag BODY visto in una precedente lezione, è però possibile modificare tale impostazione di base. Se però non ci limitiamo a creare pagine dall'aspetto molto spartano, ci sono buone possibilità che si voglia intervenire su singole porzioni del testo per fargli assumere un aspetto particolare. Grosso modo come accade con l'utilizzo di un programma di videoscrittura, c'è la possibilità di formattare uno o più caratteri (tipo e dimensione del font, grassetto, corsivo, sottolineato, ecc.), l'aspetto generale di uno o più paragrafi (allineamento del testo, titoli, ecc.) e intere sezioni contenenti sia testi che immagini (allineamento).
La formattazione può essere di tipo logico o fisico. Mentre con una formattazione di tipo fisico si indica direttamente il risultato che si vuole ottenere graficamente (es. grassetto o allineamento centrato), con quello logico si indica lo stile che si vuole applicare ad una parte del testo e la formattazione fisica è una conseguenza dello stile scelto (ad es., se indico che voglio un titolo di 1° livello, ottengo un testo più grande e con una certa spaziatura prima e dopo). N.B.: La formattazione logica qui indicata si ottiene sfruttando direttamente l'HTML di base senza fogli di stile (CSS). Utilizzando i CSS è possibile modificare l'impostazione dei vari stili e crearne di nuovi, cosa che non si può fare con l'HTML puro.
Considerazioni generali
Vorrei sottolineare che qualsiasi comando di formattazione può essere richiamato dopo aver selezionato una porzione di testo in modo da ottenere automaticamente l'inserimento del codice in maniera da formattare la parte di testo selezionata.
Inoltre molti comandi di seguito descritti, sono richiamabili anche tramite menù contestuale HTML. Eviterò di indicare tale funzione ogni volta.
Sulla barra Hardcore->Text Formatting è presente una lista completa di codici di formattazione del testo.
Formattare i caratteri
Un comodo strumento presente in 1st Page è il font Tag Editor richiamabile in questo modo:
- Menù: [Format->font]
- Easy: Layout->font Tag Editor
- Expert: fonts->font Tag Editor
Questo strumento consente di impostare velocemente e tramite un'unica finestra di dialogo, diverse impostazioni relative ai caratteri. Le varie impostazioni verranno viste separatamente.
Formattazione fisica
Tipo di font
Il font Tag Editor contiene al suo interno una lista dei font disponibili, ognuno visualizzato con se stesso (cioè ogni font contiene un'anteprima). È una cosa molto utile purtroppo assente in molti programmi commerciali, non solo di creazione siti Internet. Occorre però una certa attenzione nella scelta di un carattere. Infatti non è detto che tutti i possibili lettori della nostra pagina abbiano disponibile sul proprio computer il carattere che abbiamo scelto noi. Perciò è buona norma indicare anche delle alternative o, ancora meglio, delle famiglie di caratteri (in pratica un gruppo di caratteri simili) in modo che, se chi visualizza la nostra pagina non ha a disposizione un certo carattere, vengono fornite una o più alternative. Anche in questo caso 1st Page ci viene in aiuto tramite il menù: [Tags->Common font faces]. Qui vengono elencati alcuni dei font più comuni e alcune combinazioni di quelli che si somigliano maggiormente. È possibile selezionando una delle voci, avere direttamente il codice che fornisce le varie alternative di visualizzazione (le alternative vengono cercate a partire dalla prima indicazione a sinistra in poi).
Dimensione dei font
L'HTML prevede 7 dimensioni. Esse possono essere indicate in maniera assoluta con numeri da 1 a 7 oppure in relazione al font utilizzato in precedenza tramite dei numeri preceduti dal segno meno per diminuire e dal segno più per aumentare (per es. +1 significa che voglio aumentare il font di 1 rispetto alla dimensione attualmente utilizzata). Le dimensioni assolute consentono un maggior controllo sul risultato (ma non è detto che sia adatto alla risoluzione utilizzata dal lettore), mentre quelli relativi danno delle indicazioni di massima più adattabili alle varie situazioni. tramite il font Tag Editor sono utilizzabili entrambi i metodi. In alternativa è possibile utilizzare i bottoni della barra Expert: fonts->Decrease font size e fonts->Increase font size. Essi inseriscono rispettivamente il codice SMALL e BIG che modificano di 1 punto per volta la dimensione; possono essere utilizzati anche più volte in sequenza (ad esempio per ottenere -2 si inserisca 2 volte il codice SMALL). Personalmente preferisco i codici numerici perché più leggibili.
Gestione Colori
Nel font Tag Editor è disponibile una comoda tavolozza colori che, una volta selezionato un colore di base, consente di modificarlo agendo sulle tonalità RGB (rosso, verde, blu). Viene inoltre visualizzato il codice del colore e premendo sul tasto '!' a fianco al codice del colore, esso viene copiato negli appunti di Windows in modo da poterlo incollare dove occorre. È comunque un'operazione superflua normalmente perché il codice viene comunque inserito automaticamente sulla finestra principale del font tag editor.
A proposito di gestione colori, consiglio a chi non lo avesse ancora fatto, di leggere il capitolo apposito.
Posizione del testo
I bottoni Expert fonts->Subscript e fonts->Superscript consentono di inserire testo in posizione inferiore e superiore alla normale riga di scrittura. Tali opzioni sono presenti anche sul font Tag Editor (Text Position).
Altro
Possiamo applicare anche:
- grassetto o bold
- corsivo o italic
- sottolineato o underlined
- lampeggiante o blink (funziona solo su Netscape e HTML 1.0)
barrato o strike(barrato o strike)- teletype
Sono tutti richiamabili sia dal font Tag Editor che dalla barra Expert.
Formattazione logica
Effettuabile sempre dal font Tag Editor (in cui sono visibili anche i risultati in anteprima) e dalla barra Expert. Segue un breve elenco:
- Citazione o Citation
<cite> </cite>
- Codice o Code
<CODE> </CODE>
: usato in genere per inserire parti di codice in linguaggi di programmazione;
- Emphasis
<EM> </EM>
: per enfatizzare il testo;
- Tastiera o Keyboard
<KBD> </KBD>
: per indicare il testo che deve digitare l'utente;
- Sample
<SAMP> </SAMP>
: sequenza di caratteri letterali;
- Strong: mette in evidenza;
- Variable
</VAR> </VAR>
: indicato per definire variabili;
Formattare i paragrafi
Formattazione fisica
Un paragrafo è delimitato dal tag P. Esso può contenere anche l'indicazione dell'allineamento a destra, al centro, a sinistra e, solo per i browser dalla 4^ generazione in poi, anche giustificato (era ora!!!). L'unico metodo per inserire velocemente un nuovo paragrafo con tanto di indicazione sull'allineamento consiste nell'utilizzare il tasto destro: HTML->alignment->Paragraph...;oltre naturalmente alla solita barra Expert: fonts->align...; si può anche andare a capo senza definire la fine di un paragrafo, in questo caso basta premere il tasto Expert: Standard->Break; andare a capo senza creare un nuovo paragrafo consente di continuare a scrivere su una nuova riga, con lo stesso allineamento già definito e senza nessuno spazio aggiuntivo. Nella maggior parte dei casi non si nota la differenza fra creazione di un nuovo paragrafo ed inserimento di un BREAK, ma se il paragrafo ha una formattazione logica particolare la differenza si nota. Ad esempio per avere un titolo di 1° livello su due righe va utilizzato il BREAK in quanto diversamente le due righe verrebbero formattate come se fossero due titoli diversi (con tanto di spaziatura verticale aggiuntiva). Il paragrafo centrato è ottenibile anche con il comando CENTER disponibile, oltre che sul menù contestuale, anche tramite menù: [Tags->Center align].
Nel menù contestuale potete notare che non esistono solo 3 opzioni di allineamento ma ben 7: questo perchè sono stati creati nel tempo diversi tag di allineamento. Non mi risulta che ci siano dei tag preferenziali rispetto ad altri.
Personalizzazione tag allineamento su barra Expert
Utilizzando la barra Expert, vengono inseriti certi tag di allineamento. Se se ne vogliono usare degli altri, basta andare sul menù: [Options->General Program Preferences->HTML Tags]; sulla parte destra della schermata c'è la possibilità di indicare il tag che si preferisce venga inserito premendo i 3 tasti di allineamento.
Formattazione logica
Titoli
Prima di tutto abbiamo la possibilità di definire 6 livelli gerarchici di titoli. I due metodi di inserimento utilizzabili sono i soliti: menù contestuale: HTML->Format->Heading..; barra Expert: fonts->Heading levels; è consigliabile usarli sia per mettere facilmente in evidenza i titoli, sia per mantenere una formattazione comune tra i titoli dello stesso livello ed infine per facilitare i motori di ricerca che ultimamente danno una certa importanza ai titoli.
Liste
Ci sono poi le liste che, sulla barra Expert hanno una voce completamente dedicata. Purtroppo però, sul programma che ho installato io in questo momento, alcuni tasti sono stati invertiti, in particolare le icone sono errate, ma la scritta che appare corrisponde al comando che viene inserito, quindi attenzione al loro utilizzo.
Due dei tasti sono molto intuitivi (bullet list o lista puntata e numbered list o lista numerata) e consentono la creazione di una nuova lista; al suo interno, per l'inserimento di ogni elemento, andrà premuto il tasto list item.
Segue poi la menu list i cui elementi si inseriscono sempre con il tasto list item.
Per quanto riguarda la definition list, gli elementi sono formati da titolo e descrizione; la definizione del primo elemento è inserita in automatico. Non è stato aggiunto un tasto unico per l'inserimento dei nuovi elementi ma due tasti: uno per il titolo (definition term) ed uno per la descrizione (definition). Considerate che con lo stesso codice delle liste numerate si possono creare anche liste alfabetiche o liste numeriche con numeri romani (vedi lezioni HTML).
Consiglio:
c'è un metodo ancora più veloce per creare o trasformare del testo in liste: basta scrivere il testo andando a capo con INVIO (senza bisogno di inserire BR a fine riga) alla fine di ogni elemento e poi, dopo aver selezionato il testo andare sul menù contestuale: Selected->Convert Lines to Ordered List (o Unordered List) e il gioco è fatto.
Infine qualcuno potrebbe chiedersi: "Come si fa ad inserire delle liste che al posto del solito punto in formato testo utilizzano un'immagine?". Esistono alcuni programmi che effettuano tale operazione automaticamente, ma 1st Page non è fra questi. Comunque l'effetto si ottiene senza difficoltà creando una tabella.
Formattare le sezioni
È possibile impostare parti particolari del documento con tanto di allineamento (usando i CSS si può fare molto di più). tramite menù contestuale: HTML>alignment->DIV...
Questa è la stessa opzione già vista per l'allineamento dei paragrafi, ma quest'ultimo comando è forse più indicato per la formattazione di lunghe sezioni contenenti magari anche immagini, tabelle ed altri elementi.
Linee orizzontali
Inoltre, tramite la barra Expert: Standard->Horizontal Line, o Easy: Extras->Horizontal Rule o menù: [Insert->Horizontal Rule], è possibile inserire linee divisorie definendone le caratteristiche dalla finestra di dialogo. Possiamo indicare la lunghezza assoluta o in percentuale (Line width), la larghezza (Line Tickness), l'allineamento ed eventualmente, disabilitare l'ombreggiatura; il tutto con l'anteprima del risultato. Andando sulla scheda "Browser Specific" è possibile poi cambiare colore alla linea (come indicato l'opzione colore funziona solo su Explorer).
Per richiamare il semplice tag di inserimento linea andare su Hardcore: Block->hr.
