| Introduzione | Indice | Tag Logici |
Nel precedente capitolo sono stati introdotti alcuni dei termini fondamentali del linguaggio HTML. Scopo di questo capitolo è spiegare come è struttura una semplice pagina Web. A tal fine, dopo aver ricordato i due tipi di tag fondamentali, si introducono lo schema di un documento HTML e i 3 tag fondamentali di tale schema: html, head e body. Nei capitoli successivi saranno introdotti tutti gli altri tag in ordine di importanza e tipologia.
Creare un documento HTML, magari da rendere disponibile sulla rete WWW, non significa dare esibizione delle proprie capacità di usare colori o effetti speciali, ma dovrebbe significare fornire delle informazioni utili in modo semplice e chiaro, in un formato condiviso da tutti.
Si ricordi inoltre, che non tutti gli utenti hanno browser grafici. Di conseguenza è bene creare pagine Web che possano essere rappresentate sia in modalità testo sia in modalità grafica.
Il linguaggio HTML ha due tipi principali di tag: tag vuoti e tag contenitori. I tag vuoti servono a formattare le pagine; i tag contenitori sono utilizzati per manipolare i dati posti al loro interno.
Un tag vuoto non ha il tag finale e non racchiude alcun testo al suo interno; inizia con una parentesi angolare aperta (<) seguita dal nome del tag; seguono eventuali attributi (codici che agiscono sul modo in cui opera il tag) separati da spazi vuoti; il tag termina con una parentesi angolare chiusa (>). Per esempio, <hr height="5px"> è un tag vuoto che inserisce una linea orizzontale nel punto in cui viene inserito; l'attributo height="5px" determina lo spessore della linea, "5px" indica 5 pixel dove un pixel è la dimensione di un punto dello schermo.
I tag contenitori sono costituiti, in ordine, da:
Il tag finale inizia con una parentesi angolare aperta (<) seguita dal simbolo '/' (slash), dal nome del tag e dalla parentesi angolare chiusa (>): </p>. Un tag finale non ha attributi.
La struttura di un documento HTML può essere così schematizzata:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>La mia prima pagina web</title>
</head>
<body>
<p>La mia prima pagina web</p>
</body>
</html>
Di tutto il codice scritto sopra, i browser visualizzeranno soltanto ciò che è stato scritto nel corpo (body) del listato; quindi fra gli elementi <body> e </body>, la cui resa è
La mia prima pagina web
I tag che sono contenuti all'interno del tag 'head' servono per definire le proprietà del documento.
Analizziamo ora i singoli tag presenti nello schema.
Questa è l'unico tag che non fa parte propriamente di un documento HTML. Serve per identificare la versione del linguaggio HTML che è stato utilizzato. Il W3C raccomanda che gli autori usino il tag SGML <!DOCTYPE> per identificare correttamente la versione HTML in modo da facilitare ai browser il riconoscimento dei tag..
Se utilizzato, <! DOCTYPE> è un tag vuoto che precede il tag contenitore <html> </html>. Se volete utilizzare la specifica HTML 4.0 in lingua italiana per creare un documento, inserite la seguente istruzione all'inizio del documento:
L'URL presente in questo tag fa riferimento al sito Web con la specifica HTML 4.01. Analogamente agli altri tag, <!DOCTYPE> può occupare più righe di testo: è possibile spezzare un tag su più righe in corrispondenza degli spazi (quando ci sono). L'effetto del tag non cambia. Spezzare tag lunghi su più righe facilita la loro lettura.
Esistono diverse specifiche dello stesso linguaggio HTML 4.01. Per maggiori dettagli si rimanda alla raccomandazione del linguaggio HTML 4.01 all'indirizzo http://www.w3.org/TR/html4
| Descrizione | prima e ultima riga di ogni documento HTML. |
| Tipo | tag contenitore. |
| Attributi | version, dir e lang. |
Questo tag serve a identificare l'inizio e la fine del documento HTML. Il tag <html> </html> contiene tutti gli altri tag.
Il tag <html> ha tre attributi. L'attributo 'version' è
stato definito deprecated (deprecato) nello standard HTML 4.0. Al
suo posto si consiglia l'utilizzo del tag <!DOCTYPE>. Entrambi
indicano quale specifica HTML deve essere utilizzata per creare il
documento. Per esempio, version="-//W3C//DTD HTML 4.0
Final//EN" indica che il documento è stato creato
utilizzando la specifica HTML 4.0 in lingua inglese (EN sono le iniziali
di english). Quando un attributo è deprecato significa che
l'attributo sarà eliminato nelle revisioni future in quanto
sostituito da altri attributi o meccanismi migliori. Si consiglia quindi
di evitare di usare attributi o tag dichiarati deprecati in quanto non
è garantito che le versioni aggiornate dei browser riconoscano tali
tag/attributi in futuro.
L'attributo 'lang' specifica la lingua con cui è scritto il documento. Questa informazione è utile ai browser per determinare il formato con cui visualizzare i dati quali l'ora e i giorni o la suddivisione delle parole. Il valore che può assumere questo attributo è la sigla della lingua come specificato dallo standard ISO 639. In tabella sono riportate le sigle delle lingue principali.
| Lingua | Codice |
|---|---|
| Cinese | zh |
| Francese | fr |
| Tedesco | de |
| Italiano | it |
| Giapponese | ja |
| Russo | ru |
| Spagnolo | es |
La lingua di default è l'inglese ('en').
| Descrizione | contiene le informazioni che formano l'intestazione di documento HTML. |
| Tipo | tag contenitore. |
| Attributi | profile, dir e lang. |
Il tag <head>serve per racchiudere gli altri tag che formano l'intestazione (header) di un documento HTML. <head> si trova sempre fra i tag <html> e <body>. il tag <head> può includere vari tag che definiscono e controllano il contenuto di un documento (vedi tabella). Il tag più utilizzato all'interno del contenitore <head> è <title>. In tabella sono riportati i tag di intestazione più comuni.
| Tag | Funzione |
|---|---|
| base | Imposta l'indirizzo URL di base del documento; è utilizzato per dare una base comune a tutti i link del documento. |
| basefont | deprecato! |
| isindex | specifica che la pagina può essere oggetto di ricerche nel Web. |
| style | identifica i fogli stile che controllano la formattazione di un documento HTML. |
| script | contiene una o più funzioni scritte in uno dei linguaggi di scripting, come JavaScript o VisualBasic |
| title | tag richiesto all'interno di <head>. Permette di specificare il titolo del documento.Attenzione! Questo titolo NON è visualizzato all'interno del documento. È una meta informazione. Alcuni browser fanno vedere il contenuto di questo tag nel titolo della finestra del browser stesso. |
| Descrizione | contiene il titolo del documento che sarà solitamente visualizzato nel bordo superiore della finestra del browser. |
| Tipo | tag contenitore. |
| Attributi | dir e lang. |
| Nota | obbligatorio! |
È utilizzato per assegnare un titolo al documento HTML e deve essere posto all'interno del tag <head>. Non può contenere altri tag. Il titolo è importante per tre ragioni:
È importante quindi dare titoli che descrivono sinteticamente i contenuto del documento. Il titolo deve essere anche molto conciso, perché molti browser lo inseriscono nella barra superiore delle loro finestre; se il titolo è lungo potrebbe essere troncato. Esempi di titoli:
I seguenti titoli sono da evitare perché non descrivono bene il contenuto delle pagine Web o sono troppo lunghi.
| Descrizione | identifica le modifiche di formattazione degli elementi che sono all'interno del tag 'body'. |
| Tipo | tag contenitore. |
| Attributi | dir, lang, media, title e type. |
| Nota | Può essere utilizzato solo dentro il tag 'head'. |
A partire dalla versione 4.01 del linguaggio HTML, per ogni tag del linguaggio è possibile definire come deve essere formattato graficamente mediante l'uso di questo tag e di altri meccanismi collegati. Per i dettagli di come inserire le istruzioni all'interno di questo tag si rimanda al capitolo sui fogli di stile. A titolo di esempio, se si vuole modificare la formattazione di tutti i titoli del documento in modo tale che vengano scritti in grassetto e con colore ruggine e di tutti i paragrafi in modo tale che siano giustificati sia a sinistra che a destra, è sufficiente inserire la seguente dichiarazione di stile:
<style>
h1, h2, h3. h4, h5, h6 {
font-weight: bold;
color: #996666; /* ruggine */
}
p {
text-align: justify;
}
</style>
| Descrizione | contiene il documento vero e proprio |
| Tipo | tag contenitore. |
| Attributi | alink, background, bgcolor, class, dir, id, lang, link, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onUnload, style, text, title e vlink. |
| Nota | obbligatorio! |
Contiene tutti i tag e il testo che compongono un documento HTML. I tag che possono essere inclusi all'interno del tag 'body' possono essere suddivisi in due grandi famiglie: tag logici e tag di formattazione. I primi permettono di definire un blocco logico del testo, demandando del tutto al browser il compito di come rendere 'rappresentare graficamente' il blocco. I secondi invece permettono di definire qualche caratteristica sulla formattazione, vincolando, per quanto possibile, il browser nella visualizzazione. Nei prossimi due capitoli introdurremo, nell'ordine, i principali tag di queste due famiglie, rimandando il lettore alla specifica tecnica del linguaggio HTML 4.0 per ulteriori dettagli e per la lista completa dei tag disponibili.
Il tag 'body', come altri tag che possono essere inseriti al suo interno, prevede due tipi di attributi particolarmente importanti: stili ed eventi.
Uno stile è un insieme di regole di formattazione che indicano a un browser come l'autore vorrebbe rappresentare i contenuti di una pagina Web o di una sua parte. Per esempio, uno stile può definire l'allineamento e/o il colore di un testo. A partire dalla versione 4 del linguaggio HTML, gli stili e i fogli di stile CSS (Cascading Style Sheets) sono stati introdotti quali nuovi meccanismi per controllare meglio la formattazione: questo ha portato a definire deprecati alcuni tag di formattazione già presenti come vedremo nei capitoli successivi.
Un foglio stile CSS può essere un documento indipendente collegato con un link alla pagina Web o un testo specifico che è definito all'interno della stessa pagina. In entrambi i casi, le regole di formattazione definite nel foglio stile hanno la precedenza sulle impostazioni di default (standard) dei tag HTML. Una gestione appropriata dei fogli stile può fare risparmiare ai Web master parecchie ore di lavoro quando modificano i documenti HTML. Per ulteriori dettagli circa i fogli di stile, consultare il capitolo 9.
Il modo più semplice per cambiare il valore di default di un attributo consiste nell'utilizzare uno stile inline. Con questo termine s'intende uno stile che viene modificato mentre viene rappresentato dal browser. Per fare questo, basta utilizzare l'attributo style per impostare le opzioni di formattazione preferite. Per esempio, se si vuole modificare lo stile con cui viene reso un paragrafo, è possibile utilizzare le apposite opzioni dell'attributo 'style' del tag 'p':
paragrafo rosso in italico
Gli stili inline hanno la precedenza sui fogli stile.
Le operazioni del mouse (un clic o un doppio clic) e le modifiche dei documenti (caricare o scaricare una pagina dal Web) rappresentano degli eventi intrinseci. Spostare il puntatore del mouse su un'area dello schermo, caricare un'immagine o svolgere un'attività qualsiasi del computer avviandola con una pagina Web sono esempi di eventi intrinseci.
Le pagine Web sofisticate impiegano il codice JavaScript per intercettare tutti questi eventi intrinseci e svolgere operazioni appropriate. La gestione degli eventi con JavaScript è descritta nel Capitolo 11. Gli attributi che permettono di gestire gli eventi intrinseci sono del tipo 'onClick' e 'onLoad' elencati per vari tag all'interno di <body>.
Descriviamo di seguito gli attributi più comuni del tag <body>.
L'attributo 'bgcolor' controlla il colore di sfondo delle pagine Web; è espresso da una combinazione di tre componenti: rosso, verde e blu (RGB o Red Green Blue). Ciascuna di queste componenti ha un valore compreso fra O e 255; il valore O significa che la componente di quel colore è assente, mentre 255 rappresenta l'intensità massima. Le intensità dei colori devono essere espresse in numeri esadecimali (le cifre esadecimali sono 0123456789ABCDEF).
Il seguente prospetto riporta i valori esadecimali di alcuni dei colori principali:
|
Black (nero) = "#000000" | |
Green (verde) = "#008000" |
|
Silver (argento) = "#C0C0C0" | |
Lime (verde limone/tiglio) = "#00FF00" |
|
Gray (grigio) = "#808080" | |
Olive (verde oliva) = "#808000" |
|
White (bianco) = "#FFFFFF" | |
Yellow (giallo) = "#FFFF00" |
|
Maroon (marron) = "#800000" | |
Navy (blu marino) = "#000080" |
|
Red (rosso) = "#FF0000" | |
Blue (blu) = "#0000FF" |
|
Purple (viola) = "#800080" | |
Teal = "#008080" |
|
Fuchsia (fucsia) = "#FF00FF" | |
Aqua (acqua marina) = "#00FFFF" |
Per semplificare le cose, alcuni browser supportano anche i nomi (inglesi) dei colori, oltre ai numeri esadecimali.
Per definire il colore di sfondo (background) di una pagina Web è sufficiente quindi impostare:
dove FF0000 è il codice esadecimale del colore azzurro. Il simbolo # fa parte del codice del colore; la sua funzione è indicare al browser che il valore che segue è un numero esadecimale che rappresenta il colore, non il nome del colore. Specificate sempre questo simbolo come primo carattere di un colore.
La scelta dei colori di una pagina Web non è un'operazione semplice. Spesso si ottengono delle combinazioni di colori davvero infelici, come i caratteri rossi su sfondo blu. Uno cattivo sfondo può rendere difficile la lettura della pagina. Tenete presente inoltre che i lettori delle vostre pagine potrebbero configurare i browser in modo da impostare le loro combinazioni di colori, rendendo invano tutto il vostro lavoro di scelta dei colori.
L'attributo 'background' consente di inserire un'immagine nello sfondo di una pagina Web. I browser visualizzano l'immagine a partire dall'angolo superiore sinistro della finestra e la ripetono fino a riempire tutto lo sfondo della pagina (effetto mattonella o tiling).
Se decidete di utilizzare un'immagine di sfondo, il colore di sfondo impostato dall'attributo 'bgcolor' sarà nascosto dall'immagine di sfondo.
Il valore specificato nell'attributo 'background' è un path (percorso delle directory) o un indirizzo URL che identifica il file dell'immagine da utilizzare come sfondo della pagina. Questo file deve avere dimensioni molto piccole perché dovrà raggiungere (attraverso Internet) i computer dei visitatori delle vostre pagine Web.
Tutte le immagini di sfondo interferiscono più o meno con il testo o le immagini del documento vero e proprio: si deve quindi verificare sempre che tale interferenza non renda difficoltoso la lettura.
| Introduzione | Indice | Tag Logici |