 |
| Fig. 7: Aspetto di una finestra in HomeSite. |
In questo documento spieghiamo come generare una semplice pagina Web contenente alcuni tipi di tag e ne analizziamo la sua struttura. Va comunque ribadito che il programma utilizzato per comporre il codice HTML, HomeSite 4.0, è stato scelto solo per motivi didattici e di opportunità ma le medesime istruzioni possono essere scritte anche con programmi molto più semplici (gli editor di puro testo ASCII) o, per altro verso, più sofisticati (editor visuali che nascondono all'autore la presenza di tali codici). Di conseguenza, tutte le volte che ci troveremo a comporre un file html converrà tener presente che
Entrati nell'editor HTML HomeSite, ci si trova in un ambiente apparentemente complicato, abbastanza ricco di icone ma con una zona dello schermo riservata al contenuto di un file HTML che, per ora, non possiede un nome (fig. 7).
|
| Fig. 7: Aspetto di una finestra in HomeSite. |
Tale editor ci permette di scrivere immediatamente del testo in un file HTML ma prima di far ciò conviene analizzare la struttura essenziale di un file di tale tipo. Il linguaggio HTML definisce tre tag per descrivere la struttura generale del documento.
Il tag <HTML>. Il primo tag di strutturazione della pagina presente in ogni documento HTML è <HTML>; questo tag specifica che il file è realizzato in linguaggio HTML. Tutto il testo e i comandi HTML presenti nella pagina HTML devono trovarsi all'interno dei tag HTML iniziale e finale: è pertanto un tag contenitore, anzi il più importante! Va notato che questi tag possono essere scritti sia in maiuscolo che in minuscolo in quanto il browser non fa alcuna differenza tra la forma <HTML> e l'alternativa <html>. Noi utilizzeremo la forma maiuscola in questo testo ma converrà, per brevità, scrivere in minuscolo quando immettiamo realmente le istruzioni HTML.
Il tag <HEAD>. Il tag <HEAD> non ha attributi e serve soltanto per contenere i tag che formano l'intestazione (header) di un documento HTML. L'unico tag che è richiesto all'interno di <HEAD> è <TITLE>: questo è molto importante perché descrive sinteticamente il contenuto della pagina.
Modifichiamo quindi il titolo proposto dall'editor scrivendo in luogo di untitled (che va cancellato), Questo è un titolo. Ovviamente il testo del titolo dev'essere breve: difatti il browser pone il titolo nella barra del titolo della finestra entro la quale viene visualizzata la pagina cosicché il numero delle parole conviene che sia piuttosto limitato.
Incidentalmente notiamo come l'editor, dopo aver inserito il titolo, abbia modificato il carattere accentato è in è. Questo fatto ci indica che i caratteri accentati non sono dei simboli universalmente riconosciuti: HomeSite pertanto li codifica automaticamente nel modo opportuno lasciando al browser il compito di visualizzarli correttamente.
Il tag <BODY>. La parte rimanente del documento HTML, che include tutto il testo e ogni altro elemento (link, immagini e così via) è racchiusa tra i tag <BODY> e </BODY>. Pertanto la parte su cui si interviene per la maggior parte del tempo nella stesura di un tale tipo di file è quella compresa tra questi due tag. Attributi molto utilizzati di questo tag sono quelli che controllano il colore di sfondo della pagina (BGCOLOR) e l'attributo (BACKGROUND) che consente di inserire un'immagine nello sfondo della pagina Web.
Diamo intanto un'occhiata a come apparirebbe il file attuale in un browser: per far ciò è sufficiente
 |
| Fig. 8: Modalità per passare alla visualizzazione nel browser. |
Si ottiene nient'altro che una pagina vuota con lo sfondo di color grigio. Volendo come colore di sfondo il bianco vediamo come, in HomeSite, sia possibile inserire l'attributo BGCOLOR con relativa facilità:
Appare una finestra dove, in seconda riga, viene riportata la voce Background color. Agendo sulla piccola freccia verso il basso alla destra della corrispondente cella, si apre un menu che dà la possibilità di selezionare, scorrendolo, il colore voluto. Alla fine chiudere la finestra con un clic su OK. Per notare il cambio del colore si faccia clic sulla modalità Browse: il colore di sfondo è ora quello voluto.
Come si vede, osservando il testo inserito automaticamente dall'editor (si sarebbe potuto sempre inserirlo da tastiera ma...si ricordi la nota iniziale), non è stato necessario conoscere nei dettagli la sintassi dell'attributo (che comunque è formata dal nome dell'attributo, seguito dal simbolo di uguale e quindi, tra doppie virgolette, da un'opportuna specificazione) in quanto la finestra che è stata attivata ha reso immediata questa operazione. Questo meccanismo funziona, in HomeSite, con tutti i tag che possiedono attributi per cui, pur non conoscendo la loro esistenza e il loro significato, si potranno condurre delle prove e sperimentare la loro azione sul testo compreso e/o sull'intero documento.
La procedura per salvare un file in HomeSite è quella usuale in ciascun programma e cioè dopo la sequenza File/Save viene aperta la finestra che ci permette di selezionare la cartella dove salvare, con il relativo nome, il file. L'estensione predefinita è invece html.
Nel caso si lavori con più file (caso non raro) è anche possibile attivare una vista del tipo "Gestione Risorse" di una particolare cartella e dei file ivi contenuti: ciò si ottiene attivando le voci View/Resource Tab dal menu principale o con un clic sull'icona corrispondente 
nella barra degli strumenti. Appare sul lato sinistro della finestra principale una nuova sezione. Il contenuto di questa sezione può cambiare a seconda di quale vista risulta attualmente attivata. Questa si può scegliere agendo sulle piccole frecce poste nella parte inferiore 
. Apparsa l'icona che simbolizza un computer 
, selezionandola verrà aperta una cartella sul disco rigido e sarà possibile muoversi nel modo usuale tra file e cartelle.
Le intestazioni consentono di distinguere le parti di un testo, proprio come avviene in ogni scritto (e anche in questo documento). Un documento che contenesse molte pagine di testo senza interruzioni potrebbe in effetti risultare difficile da leggere. Pertanto anche le pagine Web possono essere interrotte da opportuni titoli in modo da ripartire il flusso del testo in sezioni più facili da gestire. Il linguaggio HTML prevede sei livelli di intestazioni: i tag corrispondenti assumono il seguente aspetto
<H1>Questa è un'intestazione di primo livello</H1>.
Il numero indica il livello dell'intestazione (pertanto si potranno usare i tag <H1></H1>...<H6></H6>). In fase di visualizzazione il testo delle intestazioni viene rappresentato con caratteri più grandi o in grassetto oppure centrato o sottolineato o tutto in lettere maiuscole (e ciò dipende dal browser), ovvero in qualche modo che lo distingua rispetto al normale testo.
Proviamo tutti e sei i livelli sfruttando un'altra caratteristica dell'editor. In modalità Edit dell'editor,
Ripetiamo la medesima operazione per i tag H2 e H3 mentre per i successivi operiamo in quest'altro modo:
L'effetto, come si può vedere, è stato quello di circondare il testo selezionato con la corretta coppia di tag. In effetti tutte le volte che si vuole marcare una porzione di testo con un certo tag questo modo di procedere si dimostra particolarmente comodo ed immediato.
Procedere ora analogamente per i rimanenti tag H5, H6 e al termine passare a come la pagina verrà visualizzata dal browser selezionando Browse. Si dovrebbe ottenere un risultato analogo a quello della figura sottostante (fig. 9) dove, per confronto, è stato aggiunto del testo normale. In questo caso particolare notiamo come il browser non faccia una grande differenza tra i livelli 3 e 6.
 |
| Fig. 9: I diversi livelli di intestazione. |
Quando si scrive un documento tradizionale su un foglio di carta, di solito i testi vengono distribuiti in varie sezioni o paragrafi. Per farlo, questi blocchi di testo vengono separati da una o più righe vuote come quella che segue.
Poiché i browser comprimono tutti gli spazi in un unico spazio vuoto la formattazione esistente fatta di spazi inseriti tramite la barra-spazio della tastiera, tramite il tasto di tabulazione o, ancora, con il tasto di invio, è del tutto illusoria! Proviamo a vederne l'effetto:
Come si può ben vedere le due righe non appaiono più separate ma il testo della seconda segue immediatamente quello della prima. Il browser ha eliminato tutti gli spazi in eccesso riducendoli ad un unico spazio. Non essendo pertanto possibile inserire delle semplici righe vuote per separare i blocchi di testo, occorre un altro strumento per suddividere i testi in sezioni logiche.
Il modo definito da HTML per dividere i testi in blocchi logici consiste nel disporli all'interno del tag contenitore dei paragrafi: <P>...</P>. Analizziamo il suo uso e contemporaneamente sfruttiamo alcune caratteristiche dell'editor.
 |
| Fig. 10: Parte destra della barra degli strumenti. |
Immediatamente vengono inseriti i relativi tag di apertura e chiusura agli estremi del testo. Inseriamo dell'altro testo per aggiungere ulteriori paragrafi ed attributi.
Procedere analogamente per il terzo paragrafo scegliendo però l'attributo CENTER. Infine confrontare il risultato nel browser passando alla modalità Browse. Si dovrebbe ottenere una visualizzazione coerente con quanto espresso dal testo, dove ciascun paragrafo appare separato dagli altri da una riga vuota. Poiché nel primo caso non è stato inserito alcun attributo e l'allineamento avviene sul margine sinistro si deduce che questa è anche la modalità di default per il browser: se quindi non si aggiunge alcun attributo di allineamento il browser allinea il testo alla sinistra.
Il tag <BR>, al quale non è associato alcun tag di chiusura, consente di spezzare una riga di testo. Quando un browser incontra un tag <BR>, fa ripartire il testo sulla riga seguente. Si può utilizzare questo tag anche all'interno di altri elementi identificati da un tag, come ad esempio entro un paragrafo; il tag non aggiunge alcuno spazio prima o dopo la nuova riga e, soprattutto, non altera in alcun modo lo stile e gli attributi dell'entità in cui è compreso. In pratica il tag <BR> non fa altro che riportare il testo sulla riga successiva. Applichiamo queste caratteristiche nel seguente esempio, dove ogni riga termina con il tag <BR>. Immettere il testo proposto (Dante!) tenendo presente che l'inserimento del tag <BR> alla fine del versetto si ottiene selezionando la relativa icona presente nei tag più comuni (Common) sulla parte destra della barra degli strumenti.
<p>Nel mezzo di cammin di nostra vita<br>
mi ritrovai per una selva oscura<br>
chè la diritta via era smarrita.</p>
La prossima terzina verrà invece allineata a destra
<p align="right">Ah quanto a dir qual era è cosa dura<br>
esta selvaggia e aspra e forte<br>
che nel pensier rinova la paura!</p>
Il risultato finale dovrebbe apparire simile all'immagine sottostante
 |
| Fig. 11: Output delle due terzine dantesche. |
 |
 |
 |
 |