Guida HTML 4.

01
Andiamo alla scoperta dell'HTML, che cos', quando nato, come si usa e quali sono i suoi segreti. Tutto quello che occorre sapere per realizzare ottime pagine Web.

L'HTML il linguaggio pi utilizzato per la pubblicazione di pagine Web, la guida che i propongo suddi isa in !" lezioni ed completa di trucchi, esempi per capire al meglio i concetti espressi, ri#erimenti e strumenti che ho appreso e scoperto durante oltre $" anni di esperienza, s iluppo e na igazione sul Web. %ndice

1. %ntroduzione 2. % Marcatori &TA'( 3. 'li attributi 4. )truttura di una pagina HTML 5. % titoli 6. 'estire il testo con paragra#i, blocchi, contenitori 7. La #ormattazione 8. 'li stili 9. % lin* 10.Le immagini 11.Le tabelle 12.% moduli &#orms( 13.% #rames 14.% colori 15.'estire gli elementi nella testata 16.HTML e Meta 17.+lementi multimediali 18.'li script 19.%l ,)) 20.HTML e Web )er er

%ntroduzione L'HTML &H-perTe.t Mar*up Language( non un ero e proprio linguaggio di programmazione dato che non

supporta nessuna gestione di istruzioni, ariabili, #unzioni ecc..., ma come dice la parola stessa un linguaggio di descrizione per ippertesti. Lo scopo quello di creare una struttura all'interno delle pagine Web. %l compito di interpretare questo linguaggio lasciato al bro/ser che dopo a er letto ed interpretato la pagina la restituisce all'utente che precedentemente ne a e a #atto richiesta. ,ome abbiamo detto in precedenza, l'HTML non un linguaggio di programmazione, ma un linguaggio di Mar*up, o impaginazione, isualizzazione e #ormattazione del contenuto. Possiamo riconoscere un file HTML dall'estensione (.html) o (.htm). L'HTML un linguaggio di dominio pubblico e i propri standard sono de#initi dal W1, &World Wide Web ,onsortium(. Ad in entarlo stato Tim 2erners3Lee erso la #ine degli anni ottanta, ma la sua inizia intorno al $445, do uto anche alla grande di##usione dei computer nelle case. era di##usione ero descri e le modalit0 di

Il Web pi un'inno a!ione sociale che un'inno a!ione tecnica. L'ho pro"ettato perch# a esse una ricaduta sociale$ perch# aiutasse le persone a collaborare$ e non come un "iocattolo tecnolo"ico. Il fine ultimo del Web mi"liorare la nostra esisten!a reticolare nel mondo. %i solito noi ci a""lutiniamo in fami"lie$ associa!ioni e a!iende. &i fidiamo a distan!a e sospettiamo appena oltato l'an"olo. (Tim 'erners(Lee da )L'architettura del nuo o Web) ). ,ome dice amo in precedenza, il bro/ser ha il compito di interpretare il linguaggio HTML presente nelle pagine /eb 6.html o .html6, elaborarlo e restituirlo all'utente per una chiara isualizzazione. +sistono molti 2ro/ser in circolazione oltre a %nternet +.plorer di Microso#t & anche il pi #amoso( come ad esempio Mozilla 7ire#o., )a#ari &s iluppato da Apple %nc.(, 8pera, il recente 'oogle ,hrome &di 'oogle %nc.(. 9onostante il W1, abbia de#inito degli standard, la isualizzazione di un #ile html da parte dei bro/ser non

sempre la stessa. La isualizzazione prende il nome di rendering della pagina, nentre il Motore di rendering la parte so#t/are del bro/ser che interpreta le in#ormazioni in ingresso codi#icate secondo uno speci#ico #ormato &HTML( e le elabora creandone una rappresentazione gra#ica &La pagina Web(. 8gni bro/ser ha motori di rendering di##erenti, per questo moti o la progettare il la-out( quello di non #ar i notare questo cambiamento. % Marcatori &TA'( isualizzazione di una pagina /eb pu:

cambiare a seconda del bro/ser che state utilizzando. %l compito di ogni Web ;esigner &oltre a quello di

Le pagine Web sono #ormate da marcatori, chiamati 6TA'6, i tag ser ono per dare una struttura alla pagina, un esempio di tag < <tag> il nostro contenuto </tag> % tag anno inseriti tra parentesi uncinate e la chiusura del tag si e##ettua con il simbolo & = ( anche

comunemente chiamato 6slash6. la struttura dei tag di tipo< <tag attributo="valore"> il nostro contenuto </tag> >n tag pu: essere composto da un attributo, pi attributi o nessun attributo. >n esempio di tag con pi attributi <

<tag attributo-1="valore" attributo-2="valore"> il nostro contenuto </tag> 9el linguaggio HTML tutta ia i sono anche tag che non presentano alcun tag di chiusura e non hanno

contenuto, come ad esempio il tag per inserire un immagine all'interno della pagina /eb< <img src="percorso_immagine" alt="descrizione_immagine"> ?uesto tipo di tag iene detto 6empt-6, uoto. 9otate anche come in questo tag siano presenti due attributi, il

primo 6src6 che ser e per indicare al bro/ser il percorso dell'immagine presente sul ser er, ed l'attributo 6alt6 per dare una descrizione all'immagine. A rei anche potuto inserire ulteriori tag, ad esempio a rei potuto impostare lunghezza e larghezza dell'immagine con gli attributi 6/idth6 e 6height6. @icorda sempre che la struttura di un attributo < attributo="valore" % tag possono anche essere annidati tra loro< <tag-1 attributo="valore"> Contenuto uno <tag-2 attributo ="valore"> Contenuto due </tag-2> </tag-1> 9otate che la parte interna del sorgente in posizione pi interna rispetto a alla parte iniziale e #inale del sorgenteA per #are ci: utilizzo il tasto 6tab6 presente alla sinistra della lettera 6?6 sulla nostra tastiera. ?uesta si chiama indentazione. %l #atto di indentare correttamente una pagina presenta di ersi antaggi< %l codice risulta pi #acile da leggere e correggere nel caso i siano errori %ndentare il codice consente di a ere una struttura a blocchi di #acile interpretazione, /eb che contengono oltre !""" righe di codice, pro ate a leggerle. ;i seguito mostrer: due esempi per #armi capire meglio< )orgente indentato< <html> <head> <title>il mio titolo </title> <meta http-equiv="Content- !pe" content="te"t/html# charset=iso-$$%&-1"> </head> </html> )orgente non indentato< <html><head><title>il mio titolo </title><meta http-equiv="Content- !pe" content="te"t/html# charset=iso-$$%&-1"></head></html> %l risultato nella isualizzazione della pagina Web non cambia, ma indentare il codice presenta i bene#ici mostrati prima. i possono essere pagine

'li Attributi

,ome abbiamo isto in precedenza, 'li elementi HTML&i tag( possono a ere pi attributi oppure nessuno, hanno l'obbietti o di aggiungere in#ormazioni all'elemento, de ono essere speci#icati nel tag iniziale e la loro struttura di tipo< nome="valore" ;etto questo, possiamo de#inere attributi le propriet0 che si occupano di descri ere quali caratteristiche assumeranno gli elementi, tramite il alore che gli iene assegnato. Bossiamo de#inire elemento l'intera struttura< <a title="'itveloce(it - )*+," hre-="http./////(bitveloce(it/">)*+,</a> Bossiamo de#inire attributi< hre-=" " ed title=" " +ssi descri ono le caratteristiche dell'elemento. %l primo si occupa di indicare il percorso del collegamento, mentre il secondo assegna un titolo al collegamento. Bossiamo de#inire contenuto dell'elemento, qualsiasi cosa si tro i all'interno del tag di apertura e del tag di chiusura. 9ell'esempio precedente, contenuto dell'elemento< )*+, 9ell'HTML i sono attributi standard che possono essere impiegati in tutti gli elementi, ad eccezzione di< head,

html, meta, param, script, st-le e title. ?uesti attributi si classi#icano come< Attributi #ondamentali<

Attributo ID style class title

Valore ID gli stili nome%classe testo

Descrizione Specifica il nome dell'id ll'inte!no " conten#to lo stile $SS Inline Specifica il nome della classe Specifica il titolo dell'elemento

Attributi per la localizzazione<

Attributo Valore Descrizione di! lt!& !tl Specifica la di!e'ione del testo pe! il conten#to in #n elemento. lang lang#age%code Specifica il codice della ling#a pe! il conten#to di #n elemento. Specifica il codice della ling#a pe! il conten#to di #n elemento nei doc#menti di tipo (ml)lang lang#age%code *+,-..
*' possibile isuali!!are tutti i alori che pu+ assumere l'attributo lan" e l'attributo ,ml-lan" nella tabella delle locali!!a!ioni standard del W.& Attributi per la tastiera<

Attributo Valore Descrizione access/ey c0a!acte! Specifica #na sco!ciatoia da tastie!a pe! accede!e a #n elemento ta1inde( n#m1e! Specifica l'o!dine di ta1#la'ione di #n elemento

)truttura di una pagina HTML

;opo a er spiegato come sono strutturati i tag, procediamo con il mostrar i la struttura standard di una pagina Web< Listato ".$ <01*C 23, ) +4 35'46C "-//78C//1 1 ) +4 9(:1 <html> <head> <title></title> <meta http-equiv="Content- !pe" content="te"t/html# charset=iso-$$%&-1"> </head> <bod!> <h1>4a mia prima pagina 7eb</h1> </bod!> </html> ransitional//,;">

*' possibile isuali!!are il risultato del listato /.0 1ui2 %niziamo subito spiegando la prima riga< <01*C 23, ) +4 35'46C "-//78C//1 1 ) +4 9(:1 ransitional//,;">

%l ;8,TCB+ ser e per indicare che si stiamo utilizzando gli standard del W1,, ogni ;8,TCB+ ha standard di##erenti, in questo esempio abbiamo utilizzato HTML D."$, di tipo Transitional. 8ra non mi so##ermer: a spiegare tutte le tipologie di ;8,TCB+, ma pre#erisco mandar i a<

,he cos' un ;T; ;T; standard del W1,

)ostanzialmente il ;8,TCB+ come un all'interno della pagina Web. %l tag< <html>e il suo tag di chiusura</html> %ndica il bro/ser che all'interno presente la pagina /eb, pi precisamente il contenuto di tipo html. %l tag< <head>e il suo tag di chiusura</head> @appresentano la testata della pagina Web. La testata, chiamata anche 6Header6 composta da< %l titolo della pagina /eb< <title> itolo della pagina 7eb </title> +d i meta tag< <meta http-equiv="Content- !pe" content="te"t/html# charset=iso-$$%&-1"> ocabolario che spiega al bro/ser come erranno espressi i contenuti

3ffronteremo i meta ta" piu' a anti 1uesta "uida. + per #inire, l'header pu: contenere e entuali )cript in Ea a)cript, Fb)cript ecc... %l tag< <bod!> e il suo tag di chiusura </bod!> Hanno la #unzione di segnalare al bro/ser che all'interno si tro a il corpo della pagina, o nostra pagina Web. % titoli ero, il contenuto della

L'utilizzo dei titoli nelle pagine HTML ha uno scopo di primaria importanza, o

ero quello di de#inire una

gerarchia del contenuto del nostro sito /eb. L'uso dei titoli non de e a ere lo scopo di ingrandire il testo o renderlo in grassetto, ma gestire il contenuto nel do uto modo. % titoli nell'HTML sono assegnati all'elemento Gh$H #ino ad GhIH. Listato ".! <html> <head> <title>5tilizzo dei titolo nell<) +4</title> </head> <bod!> <h1>il mio titolo con h1</h1> <h2>il mio titolo con h2</h2> <h8>il mio titolo con h8</h8> <h9>il mio titolo con h9</h9> <h%>il mio titolo con h%</h%> <h=>il mio titolo con h=</h=> </bod!> </html>

*' possibile isuali!!are il risultato del listato /.4 1ui2 'eneralmente all'elemento Gh$H la na igazione &o iene assegnato il titolo nel sito /eb, all'elemento Gh!H possiamo assegnare

ero racchiudere tra i tag Gh!H G=h!H il nome della pagina(, il men in un sito /eb ha

primaria importanza, in#atti quello che ci permette di e##ettuare la na igazione all'interno del sito. )e un sito /eb ha molti contenuti, una sidebar, oppure una sezione e.tra con il men secondario potremmo utilizzare l'elemento Gh1H per descri ere questo men. Bossiamo s#ruttare l'elemento GhDH per assegnare i titoli alle pagine oppure al contenuto. L'elemento Gh5H potrebbe essere impiegato per assegnare un titolo elle sezioni del sito /eb e cosJ ia. 5i sono infinite possibilit6 di utili!!o dei titoli$ ma l'importante rispettarne la "erarchia di asse"na!ione- ad 7h08 a asse"nato il contenuto pi importante del sito ("eneralmente il titolo)$ ad 7h48 un contenuto meno importante di 7h08$ se"uito da oci meno importanti con 7h.8 e cos9 ia. % motori di ricerca s#ruttano le intestazioni per indicizzare la struttura e il contenuto delle pagine /eb, per questo moti o mantenere una struttura corretta nell'assegnare i titoli durante lo s iluppo importante al #ine di ottenere un buon posizionamento all'interno dei motori di ricerca.

'estire il testo con paragra#i, blocchi, contenitori

%l World Wide Web cresce ertiginosamente, giorno dopo giorno, la quantit0 di siti /eb, blog e ser izi sepre pi asta. ?ueste piatta#orme generano in#ormazione e condi idono contenuti. ,ome possiamo gestire tutto questo contenutoA L'elemento GspanH Lo span un contenitore come il paragra#o GpH ed il contenitore per eccellenza Gdi H, nell'HTML de#inito dall'elemento GspanHG=spanH. Listato ".1 <html> <head> <title>5tilizzo dell<elemento span</title> </head> <bod!> questo > un normalissimo <span> testo </span> </bod!> </html>

*' possibile isuali!!are il risultato del listato /.. 1ui2 Lo span risulta utile quando ogliamo modi#icare lo stile di una singola oce o pi oci all'interno di un paragra#o. L'elemento GspanH gode della propriet0 'inline', a di##erenza del paragra#o non stessa riga. )e non GspanH. %l paragra#o GpH % paragra#i sono de#initi nell'HTML dall'elemento GpH. % bro/ser lasciano automaticamente una riga uota prima e dopo il tag GpHG=pH. :on obbli"atorio inserire il ta" 7span8 7;span8 all'interno del ta" 7p8 7;p8 Listato ".D <html> <head> <title>5tilizzo dei paragra-i</title> </head> <bod!> <p>,cco il mio <span> paragra-o </span></p> </bod!> </html> enisse assegnata alcuna #ormattazione al tag GspanH nella a a capo, ma rimane sulla isualizzazione della pagina

HTML non si noterebbe la di##erenza #ra il testo all'interno del paragra#o e quello all'interno dell'elemento

*' possibile isuali!!are il risultato del listato /.< 1ui2 %l contenitore Gdi H %l contenitore Gdi H il contenitore per eccellenza, gode della propriet0 bloc*, paragra#o non lascia spazi prima e dopo il testo. Listato ".5 a a capo ed a di##erenza del

<html> <head> <title>5tilizzo del contenitore div</title> </head> <bod!> <div> <p>,cco il mio <span> paragra-o </span></p> </div> </bod!> </html>

*' possibile isuali!!are il risultato del listato /.= 1ui2 La #ormattazione

7ormattare il testo all'interno di un documento HTML, signi#ica modi#icarne l'aspetto, al #ine di aggiungere e##icacia nella comunicazione. Bossiamo esprimere un contenuto in moltissimi modi, ma pro ate a pensare all'e##icacia della comunicazione. )e scri essi un paragra#o senza aggiungere il grassetto, senza sottolineare le parti pi importanti, senza utilizzare il corsi o ecc... rispetto ad un documento #ormattato correttamente, quale dei due documenti rappresenterebbe una comunicazione e##icaceA ?uesto lo scopo della comunicazione, #are in modo che il rice ente comprenda il signi#icato del messaggio, la #ormattazione ser e proprio a questo. Listato ".I <html> <head> <title>5tilizzo del contenitore div</title> </head> <bod!> <div> <p><b>?uesto testo > in grassetto</b></p> <p><i>?uesto testo > in corsivo</i></p> <p><big>?uesto testo > grande</big></p> <p><em>?uesto testo > en-atizzato</em></p> <p>?uesto testo > _subscript e ^supscript</p> </div> </bod!> </html>

*' possibile isuali!!are il risultato del listato /.> 1ui2 %ifferen!e tra 7b8 e 7stron"8$ 7i8 e 7em8 ?pesso l'utili!!o di 1uesti elementi iene impie"ato in modo non del tutto corretto nelle pa"ine. La differen!a

de"li elementi sta nella lo"ica dell'utili!!o che ne iene fatto.

@li elementi 7stron"8 ed 7em8 hanno lo scopo di enfati!!are il contenuto al proprio interno$ l'elemento 7stron"8 iene isto dal broAser come un contenuto eramente importante$ a differen!a dell'elemento 7b8 che iene isto pi come uno stile "rafico ("rassetto). Lo stesso concetto ale anche per 7em8 ed 7i8. La differen!a sostan!iale proprio 1uesta$ mentre 7stron"8 da importan!a al contenuto$ l'elemento 7b8 iene isto pi come una scelta di stile all'interno del documento. L'output de"li elementi il medesimo$ o possiamo inter enire facendo uso di &??. 3ltre differen!e possono risiedere nel tipo di %octBpe impie"ato Tag di #ormattazione HTML iamente

Tag 213 21ig3 2em3 2i3 2small3 2st!ong3 2s#13 2s#p3 2ins3 2del3 2code3 2/1d3 2samp3 2tt3 24a!3 2p!e3 2a11!3 2ac!onym3 2add!ess3 21do3 21loc/6#ote3 263 2cite3 2dfn3

Descrizione fo!matta il testo in 'g!assetto' fo!matta il testo in 'g!ande' fo!matta il testo in 'enfati''ato' fo!matta il testo in 'co!si4o' fo!matta il testo in 'piccolo' 5o!matta il testo in 'fo!te' 5o!matta il testo in 'pedice' 5o!matta il testo in 'apice' 5o!matta il testo in 'inse!ito' 5o!matta il testo in 'cancellato' Defines comp#te! code te(t Defines /ey1oa!d te(t Defines sample comp#te! code Defines teletype te(t Definisce #na 4a!ia1ile Definisce #n testo p!efo!mattato definisce #n a11!e4ia'ione Definsce #n ac!onimo Definisce le info!ma'ioni di contatto dell'a#to!e del doc#mento Definisce la di!e'ione del testo Definisce #na l#nga cita'ione Definisce #na 1!e4e cita'ione Definisce #na cita'ione ssegna #na defini'ione al te!mine

,ollegamenti esterni

What's the di##erence bet/een GbH and GstrongH, GiH and GemHA The b element on /1.org )tructured te.t
% lin*s

% lin*s sono l'essenza del WWW, essi permettono all'utente di na igare tra le pagine del sito /eb oppure in tutto il /eb. % lin*s &collegamenti( sono #ormati da una parola, un gruppo di parole o immagini e possiamo utilizzarli per na igare tra i documenti, oppure come segnalibro per spostarci rapidamente all'interno dello stesso documento. % lin*s sono speci#icati in HTML usando il tag GaH

La sintassi corretta di tipo< <a hre-="url"> esto del lin@</a> +cco un esempio< Listato ".K <html> <head> <title>5tilizzo lin@s</title> </head> <bod!> <div> <a hre-="http./////(bitveloce(it/">Aisita 'itveloce(it</a> </div> </bod!> </html>

*' possibile isuali!!are il risultato del listato /.C 1ui2 Il contenuto del colle"amento$ nel listato /.C '5isita 'it eloce.it' non de e essere essen!ialmente un testo$ ma potrebbe anche essere un'imma"ine o 1ualsiasi altro elemento HTML 9ei collegamenti anche possibile gestire il documento che err0 aperto con l'attributo Target. <a hre-="http./////(bitveloce(it/" target="_blan@">Aisita 'itveloce(it</a> ?uesto collegamento aprir0 il documento in una nuo a pagina e=o tab. Per edere 1uali alori pu+ assumere l'attributo tar"et in 1uesta pa"ina. Ber spostarsi all'interno di un documento utilizzando i lin*s che in questo caso s olgono la #unzione di segnalibro, iene in nostro aiuto l'attributo9ame.