La creazione di una pagina standard

Tag di formattazione fondamentali

La struttura fondamentale di un documento HTML è la seguente:

tutto il documento dovrà essere contenuto fra <html> e </html>;
nella sezione <head> andrà inserito solamente il titolo e
nella sezione <body> il documento vero e proprio.

Nota Bene: come osserverete subito, anche se non rispettiamo rigorosamente questa struttura alcuni browser daranno lo stesso un risultato voluto. Introduciamo qui subito la problematica del cross-browser, cioè costruire una pagina Web che sia egualmente visibile da tutti i browser. Questo è uno degli aspetti più difficili della composizione HTML, in quanto il risultato visto da diversi browser in generale è diverso. Non rispettare le specifiche del W3C significa rendere non consultabili le nostre pagine web da qualsiasi client; anche se non c'è nessun problema ad esempio con Microsoft Internet Explorer, ci possono invece essere con altri browser come Amaya e Netscape Navigator che sono maggiormente aderenti alle specifiche W3C.

Nel tag <body> inseriremo le informazioni riguardanti l'aspetto del documento secondo questo schema:

dove:

bgcolor e' il colore dello sfondo,
text il colore del testo del documento,
link il colore dei caratteri per le parole linkate,
vlink il colore del testo per i link già visitati (visited),
alink il colore del testo al momento del click sul link (active);

I colori sono espressi in RGB in formato esadecimale (ad es. #000000 corrisponde a R=0 G=0 B=0, quindi nero; #FFFFFF a R=255 G=255 B=255 quindi bianco).

Digressione sui colori web-safe

Esercizio 1: Scrivere un semplice documento HTML che rispetti le seguenti condizioni:

Colore dello sfondo: giallo
Testo: rosso
Link: verde
Link visitato: nero
ALink: viola.

Suggerimento: per la codifica dei colori usare il Paint.

Se come sfondo vogliamo utilizzare una immagine o una texture al posto di BGCOLOR (oppure associato ad esso) si utlizza BACKGROUND="nome_file".

Guardiamo quest'esempio:

<html> <head> <title>HTML di Esempio</title> </head> <body bgcolor="#FFFFFF" link="#FF0000" vlink="#9F0000" alink="#0000FF"> <h2>Titolo della Pagina</h2> Questo è solo un esempio<br> Che mostra dei semplici tag<br> come <br>, <p>, <h2> </body> </html>

Verrà mostrato così:

Titolo della Pagina

Questo è solo un esempio
Che mostra dei semplici tag

come <BR>, <P>, <H2>

I tag vengo racchiusi da <...> e da un corrispondente </...> alla fine del testo da formattare.

Nell'esempio il titolo (che verrà mostrato sopra al menu del browser) è contrassegnato da <title> e dal corrispondente </title> alla fine.

Nel minuscolo esempio illustrato vengono utilizzati anche

i tag di intestazione -Headers- (in questo caso <h2>) che definiscono la dimensione del carattere dell'header (l'intestazione);
il tag di Line Break (<br>) che forza il testo su una nuova linea e
il tag Paragraph (<p>) che oltre a mandare a capo lascia una linea vuota. I contrassegni <p> e <br>
Quando si vuole che il browser vada a capo, si deve usare uno di questi due tag, poiché i caratteri di a capo che sono contenuti nel file di testo HTML vengono interpretati dal browser come dei caratteri spazio.

Questi sono i tag fondamentali per creare una pagina standard semplice; vedremo più avanti come creare effetti particolari usando dei tag che vanno ad influenzare il testo stesso.

Allineamento

Ogni tag ha un insieme specifico di attributi che servono ad introdurre formattazioni più avanzate.

Ad esempio, il tag <p> possiede l'attributo align che serve per allineare il testo a sinistra, al centro oppure a destra.

<p align="right">Questa riga è allineata a destra.</p>

produrrà l'output seguente nel navigatore:

Questa riga è allineata a destra.

Esercizio 2: scrivere una pagina HTML con sfondo azzurro chiaro e con il testo con le seguenti caratteristiche:

Riga 1: Concluso il mondiale di Formula 1 2000 (allineata a destra carattere 4)

Riga 2: Ferrari, testa rossa (al centro, carattere 1)

Riga 3: Lo staff Ferrari si produce in un grottesco travestimento "festiaiolo". (allineata a sinstra carattere 3)

Abbiamo visto il tag che si utilizza per creare un Header (nel nostro caso di dimensione 2 <h2>), l'header è il tipo di testo che viene utilizzato solitamente come titolo per la pagina all'interno del documento; e viene definito attraverso questo tag <hn> e </hn> dove 'n' è un numero compreso fra 6 e 1 (dal più piccolo al più grande), dopo l'header non è necessario inserire il tag di paragrafo o di Line Break.
Digitando il documento invece bisogna ricordarsi di utilizzarli ogni qual volta si voglia andare a capo o saltare una riga (come già detto il browser non è sensibile alla formattazione utilizzata in fase di creazione).

Per conservare la formattazione del testo si può utilizzare il tag <pre>...</pre> che conserva gli a capo, le tabulazioni, gli spazi aggiuntivi e rende il testo con carattere a spaziatura fissa.

Esempio:

<pre> Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura che la diritta via era smarrita </pre>

che viene reso nel modo seguente:

		 Nel mezzo del cammin di nostra vita
		 mi ritrovai per una selva oscura
		 che la diritta via 			era	smarrita

Esercizio 3: Si verifichi che non si riesce a conservare la formattazione senza usare il tag <pre>

Esercizio 4: Ripetere l'esercizio 2 utilizzando come sfondo l'immagine "schumi.jpg"

Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.