Creazione di un nuovo documento

Un nuovo documento, come già avrete capito, può essere creato in vari modi che per semplicità elenco tutti qui di seguito:

·        Tramite impostazione di creazione nuovo documento all'avvio

·        Tramite tasto Creates a new web document in modalità Esperto; corrispondente del menu: [File->New web document]

·        Tramite Start Manager scegliendo tra i templates predefiniti e quelli personalizzati

·        Tramite altre opzioni del menu [File->New] che non sto ad elencare perché richiamano alcuni dei comandi presenti nello start manager

·        Tramite menu contestuale. Se è aperto almeno un file, noterete in basso una o più linguette con i nomi dei files aperti. Premendo con il tasto destro del mouse sarà possibile richiamare la voce New.

Partendo da un documento completamente vuoto, è possibile inserire velocemente la struttura di base di un documento web anche tramite un tasto presente nella barra strumenti expert: Standard->Fast Start; tale opzione inserisce nel documento lo stesso contenuto che si avrebbe partendo dal template "HTML Document".

Come impostare la creazione/non creazione di un nuovo documento all'avvio

Tramite il menu: [Options->General program preferences->Startup->Create a new (untitled) document on startup].

1st Page viene fornito senza una guida (è anche per questo che ne ho creato una). Andando sulla linguetta "Reference" però, è possibile seguire una panoramica in inglese sulle caratteristiche del programma e trovare diverse guide dettagliate (sempre in inglese) create dalla Web Design Group (WDG) e riguardanti HTML 4, novità di HTML 4 rispetto alla versione precedente e CSS. Inoltre una lista piuttosto estesa di FAQ (domande frequenti) e cenni su SSI più qualche altro documento.
Vorrei però evidenziare che basterà premere F1 mentre si è all'interno di un qualunque tag HTML per avere immediatamente accesso alla guida relativa a quel tag. Per quanto riguarda i wizard poi, sono forniti di fumetti a comparsa su ogni campo.
Infine, sulla Sidebar <1stpage2000_06.htm>, la prima opzione sulla destra, presenta una lista dei tag HTML 4.0 affiancati da una descrizione rapida (ad esempio il tag B viene indicato come "Bold Text"); inoltre basta premere sul tag stesso per vedere la guida completa relativa ad esso.

Consultazione guida e barra strumenti

Durante la consultazione delle guide, sul lato sinistro dello schermo, appare la barra strumenti che vedete qui a fianco. Essa consente di andare avanti ed indietro nella consultazione (BACK e FORWARD), di raggiungere immediatamente la lista delle guide (SHOW REFERENCE CONTENTS), di vedere una lista di tutti i comandi HTML ordinata alfabeticamente o per categorie (SHOW ELEMENTS LIST IN ...). Infine possiamo selezionare una parte della guida da copiare negli appunti (ad esempio un esempio di codice) ma, considerando che i normali strumenti di copia negli appunti non funzionano durante la visualizzazione della guida, tale operazione va fatta ancora da questa barra strumenti. Infine abbiamo il comando di stampa e quello che consente di visualizzare la guida all'interno di Internet Explorer.

Gestione Documenti
Può sembrare superfluo un capitolo dedicato all'apertura dei documenti, so che tutti voi siete in grado di aprire un documento senza bisogno di una guida, ma il presente capitolo vuole solo mettere in evidenza alcuni pregi e difetti di 1st Page riguardanti questo comando.
Oltre il classico comando presente sia sul menu che sulla barra Expert, vorrei farvi notare quanto segue:

Lista files recenti
[(File->Reopen)]; visualizza una lista degli ultimi 20!!! files aperti.

Apertura files Internet
Possibilità di richiedere direttamente l'apertura di una pagina tramite url internet ([File->Open from the web]); utile per studiare su siti altrui :)

Menu contestuale in 1st Page
Se avete già almeno un file aperto, noterete in basso una o più linguette con i nomi dei files aperti. Premendo sulla linguetta col tasto destro del mouse, vengono visualizzate diverse voci tra cui Open.
Il menu contestuale, se aperto mentre il mouse è posizionato sul nome di un file in modalità Edit, presenta una voce apposita: Open File at cursor che apre il file sul cui nome si è posizionati.

Menu contestuale in Windows
Dopo aver installato il programma, viene aggiunta una voce al menu contestuale di Windows (quello richiamabile con tasto destro del mouse da Esplora Risorse). La nuova voce, attiva per i tipi di files riconosciuti da 1st Page è "Edit with 1st Page 2000" e consente naturalmente di aprire direttamente il programma con quel documento.

Side Bar contenente il Local Tab ed il Project Manager
La side bar è un pannello che può essere visualizzato a sinistra o a destra e che a sua volta può visualizzare diverse schermate utili (per ora ne vediamo solo due). Se non sapete di cosa sto parlando probabilmente non l'avete abilitato. È attivabile/disattivabile tramite menu: [View->Side Panel] o con tasto F9; se l'avete attivato e continuate a non vederlo, noterete almeno la presenza di una barra verticale con dei puntini e due frecce all'estrema sinistra dello schermo (o all'estrema destra, ma prima della tavolozza colori). In tal caso basta trascinare la barra verso l'interno per ridimensionare lo spazio da dedicare al fatidico Side Panel. Per spostarlo da destra a sinistra e viceversa: [View->Sidebar options->Docking].

Nell'immagine a destra potete notare le varie opzioni di visualizzazione della Side Bar (o side panel)

Local tab (File Explorer)

È la prima visualizzazione che si ottiene all'attivazione del side panel ed è richiamabile premendo sul computerino (in basso). Come avrete notato, contiene in alto l'albero delle directory, o meglio tutte le Risorse del computer (è anche possibile ad esempio aprire il Pannello di Controllo) ed in basso la lista di files o di risorse della directory attiva.
Le 2 finestre sono ridimensionabili a piacere.
La finestra in basso ha un menu contestuale con diverse opzioni tra le quali segnalo:
 Edit che apre la pagina all'interno dell'editor,
Insert as link che inserisce nel punto di inserimento un link a quel file
View che apre la pagina in anteprima in una piccola finestra esterna
Filter che consente di filtrare la visualizzazione dei files
Explore from here che apre una finestra di Esplora Risorse a partire dalla directory selezionata, ed infine la possibilità di creare una propria lista di percorsi preferiti richiamabili rapidamente.
Non mi dilungo in ulteriori spiegazioni perché sono opzioni abbastanza semplici, ma utili.
Infine, sotto la seconda finestra (quella dei files), può essere visualizzata o meno (Options->Quick path bar) una barra che consente di inserire direttamente un percorso.

Directory di apertura del File Explorer
Può essere impostata in maniera fissa o sull'ultima visualizzata. Tale impostazione va effettuata su: [Options->General Program Preferences->Startup->Side File Explorer]

Project Manager

Il Project Manager (secondo tasto da destra, quello con un mondo ed un foglio) consente di elencare una serie di documenti, anche appartenenti a cartelle diverse, all'interno di un unico progetto.
Un file può appartenere anche a diversi progetti.
Inoltre (tramite menu contestuale) è possibile gestire i progetti indicando per ogni file lo stato di avanzamento (completato/in progresso) e assegnare diverse icone ad alcuni files (utili le icone numerate per indicare uno stato di avanzamento da 1 a 9).
Utili anche in questo caso, la possibilità di inserire uno o più files come link, o di aprire uno o più documenti o di aggiornare la data/ora.
Per vedere tutti i dettagli dei files ingrandite il side panel o scorrete orizzontalmente la lista. Il menu di gestione dei progetti (crea, apri, salva, chiudi) è accessibile tramite il tasto in alto "Project Manager".
Attenzione: Selezionando "Delete File(s)" dal menu contestuale, si ha l'eliminazione dal progetto ma non l'eliminazione fisica del file dal supporto di memorizzazione.

Chiusura files
Visto che ci siamo, accenno alla possibilità di chiudere i files sempre dal menu contestuale (in basso) e tramite il tastino rosso a forma di X presente appena sotto la linguetta "Edit". Su tale barra sono inoltre presenti molte altre funzioni che vedremo in seguito. Molto utile infine la voce del menu [File->Close all] che consente di chiudere tutti i documenti aperti.

Salvataggio files
Anche questo è possibile dal menu normale e da quello contestuale, oltre che tramite la barra Expert. Vorrei però segnalare due opzioni aggiuntive: [File->Save All] che consente di salvare in un'unica operazione tutti i files aperti e [File->Save as template] che consente di creare dei modelli riutilizzabili e richiamabili tramite lo Start Manager <1stpage2000_03.htm.htm>. Infine [File->Save to FTP] non sembra che sia attivo (peccato).
Un'altra opzione presente e non funzionante consiste nella possibilità di impostare tramite [Options->General Program Preferences->General->Documents->Default file extension when saving] l'estensione dei file durante il salvataggio (che viene aggiunta in automatico se non ne viene specificata una dall'utente), ma in realtà l'estensione predefinita rimane sempre HTML.

Difetti
Un piccolo difetto (secondo me) è il fatto che quando non è aperto nessun documento, non è possibile né utilizzare il Local Tab, né aprire un progetto. Spero che la cosa venga modificata in una prossima versione. Per il momento il problema può essere evitato attivando la creazione automatica di un nuovo documento all'avvio <1stpage2000_04.htm.htm>.

Personalizzazione di 1st Page 2000
Si tratta di un'impostazione semplicissima e fondamentale che è importante vedere subito.
Se sul menu [Options->Grouped Undo] è presente un segno di spunta, sono consentite più azioni di annullamento con uno storico piuttosto lungo. Sullo stesso menu: [Options->Undo after save], la presenza del baffetto indica che possiamo annullare un'azione anche dopo aver salvato un documento (chiaramente prima di chiudere il programma). Consiglio vivamente di lasciare il baffetto su entrambe le opzioni.

Usare e modificare i tasti di scelta rapida
Molti tasti di scelta rapida risultano già impostati ed indicati a fianco della rispettiva voce di menu. Si possono impostare tasti di scelta rapida per qualunque impostazione tramite: [Options->Customize Keyboard Shortcuts].

Personalizzare le barre Expert
Premendo su una delle barre Expert col tasto destro, è possibile abilitarne/disabilitarne alcune, andando sul menu contestuale Organize è possibile cambiarne l'ordine di visualizzazione, mentre andando su Customize, è possibile cambiarne i contenuti cioè spostare, rimuovere o aggiungere alcuni strumenti e creare delle nuove barre aggiuntive. Infine, premendo sulla doppia linea verticale che sta alla sinistra di ogni barra, è possibile spostarla all'esterno della tooltab e posizionarla dove si preferisce su qualunque lato dello schermo o addirittura lasciarla fluttuante. Infine anche le 4 barre che stanno normalmente alla sinistra dello schermo possono essere spostate o inserite all'interno della Tooltab e una volta inserite lì, possono essere anche personalizzate. La stessa opzione di personalizzazione di cui vi ho parlato (anzi scritto) è raggiungibile anche dal menu [Options->Customize Toolbar].

Attenzione: Le personalizzazioni effettuate eventualmente sulla barra Expert (o Palette) restano memorizzate anche passando alla modalità Normale e viceversa.

Modalità di lavoro personalizzata e lista comandi della SideBar
Se non vi è piaciuta nessuna delle barre strumenti presenti, esiste un'ulteriore possibilità: si può lavorare in modalità Normal disabilitando tutte le barre e eventualmente, abilitare la Sidebar <1stpage2000_06.htm.htm> e all'interno di questa andare sulla lista di visualizzazione comandi (secondo tasto da sinistra).
Da qui sarà disponibile tutta la lista dei comandi HTML e ColdFusion. Partendo dall'alto vediamo:

Un elenco a discesa da cui possiamo filtrare i tipi di comandi che vogliamo visualizzare; possiamo scegliere in base ad una delle versioni di standard HTML, o in base alla compatibilità con una specifica versione di browser Explorer o Netscape. Infine possiamo chiedere di visualizzare i comandi di ColdFusion 3 oppure le estensioni relative alla WebTv.

Se vogliamo visualizzare in contemporanea più tipi di comandi, basta premere sulla scritta "Filter Tags" e attivare o disattivare le varie opzioni.
A fianco alla scritta "Filter Tags", ci sono due bottoni che permettono di riordinare i comandi rispettivamente in ordine alfabetico o in ordine di categoria.

Se poi ingrandiamo la Side bar, possiamo notare che a fianco ad ogni comando ci sono altri dati: in particolare abbiamo la descrizione, la categoria di appartenenza, il codice iniziale e quello finale, e l'indicazione del comando completo di opzioni. Infine la prima colonna sulla sinistra, è occupata da una casella di controllo (checkbox, in pratica il quadratino che può essere segnato o meno). Considerando che la lista dei comandi è a disposizione perché possano essere inseriti agevolmente nel punto di inserimento con un doppio click del mouse, la checkbox serve ad indicare se vogliamo inserire il comando in formato base (cioè comando di apertura e di chiusura) o in formato esteso (cioè con tutte le opzioni). Una volta che ci personalizziamo tale lista dei comandi, potremo agire con la massima semplicità e inoltre con la certezza di usare i comandi corretti in base alla compatibilità che ci interessa. Quindi, se vogliamo creare un documento compatibile ad esempio con lo standard HTML 3.2, basterà impostare il filtro e non correremo il rischio di inserire comandi che siano successivi e quindi incompatibili con alcuni browser.

Ma la possibilità di personalizzazione non finisce qui: infatti, se non ci piacciono le categorie a cui sono stati assegnati alcuni comandi o se vogliamo modificarne le opzioni, basta selezionare il tag incriminato e scegliere dal menu contestuale la voce: Edit Tag che ci consentirà di modificare tutto ciò che vogliamo.

Impostazione di HEAD
In questo capitolo vedremo alcuni comandi che vanno necessariamente inseriti all'interno del tag HEAD.
Raggiungimento veloce del tag HEAD: Barra Navigation->Goto Head Tag (omino con la testa rossa). Mediante l'utilizzo del tasto di inserimento rapido visto in precedenza, si ha una struttura di base (ma veramente molto di base). Infatti all'interno di HEAD è presente solamente il tag TITLE. Considerando che questo non è un corso di HTML, ma è finalizzato all'apprendimento dell'uso di un determinato programma, non posso spiegare ogni elemento HTML nei dettagli, vorrei però soffermarmi un attimo almeno sui tag principali di HEAD la cui importanza è spesso ignorata.

TITLE
Iniziamo con TITLE che è il più conosciuto e che permette di visualizzare un titolo qui definito, all'interno della barra del titolo del browser (programma di navigazione) utilizzato da chi visualizza la pagina. Inoltre è il titolo che appare quando si va a salvare l'indirizzo del sito sui Preferiti di Explorer o di altri programmi. Infine alcuni motori di ricerca ne tengono conto durante l'indicizzazione.

META KEYWORDS
Può essere inserito tramite la toolbar Hardcore Document->Meta->Keywords.
Consente l'indicazione delle parole chiave che, se inserite all'interno di un motore di ricerca, danno all'interno della lista dei risultati di ricerca la nostra pagina. È quindi di fondamentale importanza sfruttare al meglio questo meta tag.
Nota:Quelli di 1st Page devono essere dei pacifisti come me, infatti inserendo il tag dalla barra, esso conterrà già 3 parole chiave pacifiste. Le vostre parole chiave andranno inserite al posto della scritta "peace, world, love".
<meta-http-equiv="keywords" content="peace, world, love">

META DESCRIPTION
Richiamabile tramite la toolbar Hardcore Document->Meta->Description.
Consente di indicare una breve descrizione del sito che apparirà nella lista su menzionata subito sotto il titolo del nostro sito.

META AUTHOR
Non sto ad annoiarvi con la modalità di inserimento perché si trova tutto nella barra strumenti indicata sopra. Qui si indica il nome dell'autore della pagina.

META GENERATOR

A differenza di altri editor, 1st Page non inserisce questo tag che gli consentirebbe di autopubblicizzarsi. Se volete potete sempre inserirlo.

Inoltre chi vuole, può inserire sul proprio sito un bottoncino che indica "Powered by 1st Page". Lo trovate sul menu: [Insert->Special->Made with 1st Page 2000 logo].

META REDIRECT
Consente di reindirizzare ad un'altra pagina dopo un certo numero di secondi. Richiamandolo da 1st Page, viene anche indicato esattamente dove inserire il numero di secondi (al posto del #); la pagina a cui reindirizzare il visitatore va invece inserita al posto dell'indirizzo indicato. Può essere molto utile quando si cambia indirizzo internet, comunque non tutti i browser sono in grado di interpretare tale comando, quindi si consiglia di inserire anche una scritta con tanto di link ipertestuale che consente di effettuare il reindirizzamento anche manualmente.

!DOCTYPE
Questo comando consente di indicare quale versione di HTML è stata utilizzata per creare la pagina. Può essere utile ai server web per interpretare il documento in maniera corretta. N.B.: Deve essere la prima riga di un documento, quindi deve precedere sia HEAD che HTML.

ISINDEX
È un comando obsoleto, è quindi sconsigliato utilizzarlo. Viene degnamente sostituito dai vari comandi di gestione forms <1stpage2000_19.htm>.

LINK
Serve ad indicare un percorso esterno utile all'interno di una pagina. Utilizzato ad esempio per indicare un foglio di stile (CSS).

STYLE
Al contrario di LINK, definisce un foglio di stile direttamente all'interno del documento HTML.
Per maggiori informazioni sui meta tags, si rimanda alla guida sull'HTML <http://www.html.it/guida/index.html> presente su questo stesso sito.

Inserire data e ora
Anche se questa impostazione non fa necessariamente parte dell'HEAD, molti hanno l'abitudine di inserire data e ora di creazione o di ultima modifica proprio all'interno dell'head (sotto forma di commento). Questa operazione può essere effettuata facilmente dal menu contestuale Date/Time Stamp; si può scegliere tra vari formati sia di sola data, di solo orario o di entrambi.

Impostazione di BODY
Innanzitutto anche il tab BODY è raggiungibile tramite un tasto della barra Expert: Navigation->Goto Body Tag (omino col corpo rosso).

Finestra di dialogo Body
Inoltre è possibile impostare le principali opzioni del documento tramite una comoda finestra di dialogo. Tale finestra è utilizzabile anche per effettuare modifiche (il programma seleziona automaticamente il tag BODY e riconosce e sostituisce eventuali cambiamenti). La finestra di dialogo è selezionabile nei seguenti modi:

·        menu: [Format->Document Properties]

·        Easy: Properties->Document Properties

·        Expert: Standard->Document Body

·        Hardcore: Document->Body Tag Editor

Oltre a poter impostare immagine di sfondo (Background image) e colori con tanto di anteprima, sono presenti altre due opzioni un po' meno visibili: "Watermark Fixed (Explorer only)" che permette di tenere l'immagine di sfondo fissa anche quando si scorre la pagina (come indicato funziona solo su Explorer); "Disable Scrollbars" che consente di non visualizzare le barre di scorrimento durante la visualizzazione della pagina; quest'ultima opzione è consigliata solo per finestrelle piccole; inoltre ricordate che anche se la pagina viene visualizzata per intero sul vostro pc, non è detto che accada lo stesso su qualunque altro pc (dipende dalla risoluzione, dalla grandezza del monitor, dal programma di navigazione, dal numero di barre strumenti visualizzate e dalle loro dimensioni).

Altre opzioni sulla barra Hardcore
Sulla barra Hardcore il tasto Document contiene altre opzioni relative al BODY. Tra queste abbiamo:

·        BASE che consente di indicare il percorso di base del sito Internet. Questo consente la corretta visualizzazione delle pagine online anche partendo da una parte del sito memorizzato per la visualizzazione offline.

·        BASEFONT che indica il tipo di font di base da utilizzare per il documento. Viene utilizzato sempre se non diversamente specificato.

Gestione colori
Come vedremo nei capitoli successivi, vari strumenti di 1st Page richiamano, quando necessario, una tavolozza dei colori.
Se si preferisce però, si può utilizzare per la scelta dei colori, la tavolozza che appare alla destra dello schermo e attivabile mediante menu: [View->View color palette]; essa è ancora più comoda in quanto permette prima di tutto di selezionare due diversi colori (background e foreground), di copiarli comodamente nel punto di inserimento desiderato premendo sulle scritte 'FG' (foreground) e 'BG' (background); inoltre, selezionando la casella in basso 'Font', viene inserito (sempre con i 2 bottoni appena visti) l'intero codice di formattazione del testo. Se poi la tavolozza non è sufficiente perché troppo piccola, basta premere sul colore attivo e viene richiamata una tavolozza colori più completa. Peccato che definendo un colore personalizzato dalla tavolozza del Font tag editor, lo stesso colore non venga reso disponibile all'interno dell'altra tavolozza.

Tavolozza Color Saver per Internet
Infine, sulla barra Standard Quick Tools->Color Picker (in alto a sinistra), è disponibile una tavolozza con soli 216 colori; è consigliabile l'utilizzo di quest'ultima perché compatibile universalmente. Premendo il tasto MORE, si ha una tavolozza con i colori supportati da Windows (351). In alto a sinistra abbiamo in anteprima il colore scelto ed il relativo codice.

Inserimento e formattazione testo

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 <images/barra_edit.jpg>. 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 <1stpage2000_15.htm> in 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 <1stpage2000_29.htm>.

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 <1stpage2000_10.htm>, 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)

·        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;

·        Codice o Code: usato in genere per inserire parti di codice in linguaggi di programmazione;

·        Emphasis: per enfatizzare il testo;

·        Tastiera o Keyboard: per indicare il testo che deve digitare l'utente;

by HTML.it