<!-- TESTO DEL COMMENTO

Il corpo della pagina: il tag <body> Come abbiamo già avuto modo di osservare, il tag <body> definisce ed identifica il corpo della pagina, cioè la "porzione visibile" di un qualsiasi documento HTML. Avendo lo scopo di contenere tutti gli elementi visibili, è evidente che i tag <body> e </body> saranno rispettivamente il tag di apertura e di chiusura al cui interno verranno inseriti elementi quali paragrafi di testo, tabelle, immagini, link, ecc. I principali attrinuti del tag <body> sono: bgcolor - viene utilizzato per definire un colore per lo sfondo della pagina background - viene utilizzato per assegnare un'immagine di sfondo text - viene utilizzato per definire un colore per il testo link - viene utilizzato per definire un colore per i link alink - viene utilizzato per definire un colore per i link attivi vlink - viene utilizzato per definire un colore per i link già visitati Inserire commenti nel codice HTML La presenza di annotazioni all'interno del codice rappresenta non solo una buona regola di programmazione, ma è anche una pratica utilissima che faciliterà ogni tipo di intervento futuro (effettuato da noi o da terzi) all'interno del codice. E' appena il caso di ricordare che i commenti all'interno del codice non sono visibili agli utenti in quanto si tratta di porzioni di testo che non verranno renderizzate dal browser, ma saranno visibili solo aprendo il codice sorgente della pagina web. La sintassi di un commento in HTML è la seguente:  Come potete notare il commento deve iniziare con . Qualora si desiderasse aggiungere un commento su più linee, quindi, sarà necessario fare in questo modo:  Elenchi HTML: liste ordinate, non ordinate Vediamo adesso il cosa sono e come funzionano gli elenchi HTML, i quali possono essere numerati o puntati o, più correttamente, ordinati o non ordinati: i primi sono elenchi caratterizzati da una scaletta numerica o alfabetica, mentre i secondi sono elenchi di voci senza un ordine preciso. Da un punto di vista funzionale, per fare un esempio, è corretto utilizzare un elenco puntato per una lista della spesa, mentre è preferibile un elenco numerato per descrivere i diversi passaggi di un procedimento matematico o di una ricetta in cui debba essere rispettata una precisa sequenza. Esempio di elenco ordinato (o numerato): 1. Prendi la mela 2. Sbucciala 3. Mangiala Esempio di elenco non ordinato (o puntato): 1

Pippo Pluto Topolino I tag <ol>, <ul> e <li> In HTML, gli elenchi ordinati (cd. elenchi numerati) si generano attraverso il tag ol (ordered list) mentre quelli non ordinati (cd. elenchi puntati) mediante ul (unordered list). Entrambi utilizzano il tag li (list item) per specificare le singole voci (item) dell'elenco. Vediamo adesso un esempio di codice HTML per creare un elenco ordinato: <ol> Vediamo ora un esempio di elenco non ordinato: <ul> </ul> Gli attributi type e start Entrambi i tipi di elenco supportano l'attributo type, che permette di specificare il tipo di elenco, mentre gli elenchi ordinati supportano anche l'attributo start, che permette di far partire l'elenco dal numero o lettera che si desidera. L'attributo type supporta i seguenti valori: Elenchi ordinati A - visualizza l'elenco alfabetico con lettere maiuscole a - visualizza l'elenco alfabetico con lettere minuscole I - visualizza l'elenco con i numeri romani maiuscoli i - visualizza l'elenco con i numeri romani minuscoli 1 - visualizza l'elenco con i numeri arabi Elenchi non ordinati disc - visualizza un cerchio pieno (di default) square - visualizza un quadrato pieno circle - visualizza un cerchio vuoto Vediamo un esempio che comprenda sia type che start all'interno di un elenco ordinato: <ol type="a" start="5"> Questo il risultato: E. Open F. Fiat 2

G. Lancia E' bene precisare che è possibile annidiare elenchi all'interno di altri elenchi. Vediamo un esempio: <ol type="a"> <li>astra</li> <li>corsa</li> <li>500</li> <li>idea</li> <li>delta</li> Formattazione del testo: il tag Il tag in oggetto supporta gli attributi face per la scelta del carattere, size per la definizione delle dimensioni del testo e color per la definizione del colore. Vediamo un esempio pratico di utilizzo del tag : Testo formattato con HTML puro L'attributo face Per quanto riguarda l'attributo face si consiglia di utilizzare un carattere standard, cioè un font presente per default su tutti i computer, come ad esempio: Arial Thaoma SansSerif Verdana Utilizzando un carattere NON standard, infatti, si corre il rischio che molti browser che non hanno quel font installato non vedano la pagina come noi vorremmo. L'attributo size Per quanto riguarda l'attributo size questo deve avere un valore numerico necessariamente compreso tra 1 e 7 dove 1 è la dimensione minima e 7 la massima. La dimensione impostata di default dal browser è 3. L'attributo color Questo attributo è utilizzato per definire il colore del testo. Accetta diverse tipologie di valori: esadecimale => es: #FF0000 rgb => es: rgb(255,0,0) nome del colore => es: red 3

Superare il tag font mediante i CSS (cenni) Per definire l'aspetto del testo è possibile utilizzare i CSS assegnando gli opportuni stili ai vari contenitori di testo. Testo formattato coi CSS Inserire immagini in HTML (il tag IMG) In questa lezione vedremo come inserire un'immagine in un documento HTML. I principali e più diffusi formati immagine utilizzati sul Web sono: GIF (adatto a loghi e bottoni, e possono essere immagini animate, quindi in movimento) JPG (adatto alle foto, dato che si tratta di un formato ad alta risoluzione) PNG (molto portabile su tutte le piattaforme e meglio trattabile attraverso software di grafica). Raccomandazione importante riguarda il "peso" delle immagini. E' consigliabile, infatti, utilizzare immagini non troppo pesanti in quanto potrebbero rallentare notevolmente il caricamento della pagina. Al fine di inserire immagini all'interno delle pagine Web è necessario utilizzare il tag img. Il tag img si dice vuoto, quindi non prevede l'omonimo tag di chiusura. La sintassi di base del tag img è la seguente: <img src="nome-del-file.gif" alt="breve descrizione dell'immagine"> L'attributo src L attributo src che è utilizzato per definire la URL dell'immagine Nulla vieta di inserire all'interno delle nostre pagine delle immagini reperibili su altri siti web semplicemente indicandone la URL all'interno dell'attributo src: <img src="http://www.sito.ext/file-remoto.gif" alt="breve descrizione dell'immagine"> Il rischio di una simile prassi, tuttavia, è che l'immagine remota venga sostituita o cancellata. L'attributo alt Mediante questo attributo, infatti, viene definito un testo alternativo che sarà utile ogni qualvolta l'immagine - per una qualsiasi ragione - non possa essere visualizzata. Altri attributi del tag <img> border - imposta la dimensione (in pixel) dell'eventuale bordo all'immagine (0 = nessun bordo); width - imposta in modo esplicito la larghezza in pixel dell'immagine (facoltativo); height - imposta in modo esplicito l'altezza in pixel dell'immagine (facoltativo); hspace - imposta la distanza in orizzontale tra l'immagine ed altri elementi; vspace - imposta la distanza in verticale tra l'immagine ed altri elementi; align - imposta un'allineamento dell'immagine; Considerazioni sugli attributi width e height del tag <img> Il browser è in grado di rilevare automaticamente le dimensioni delle immagini inserite nel codice HTML. Questi attributi, infine, consentono anche di ridimensionare al volo un'immagine senza modificare il file originale. Si supponga ad esempio di avere una foto di 400 x 200 pixel ma di volerne pubblicare una miniatura. In questo caso le strade sono due: o creiamo una versione ridotta della foto oppure, tramite width e height, impostiamo dimensioni ridotte al file. 4

<img src="immagine.jpg" width="20" height="10"> Linkare un'immagine (immagini cliccabili) Per creare un'immagine cliccabile è sufficiente applicare il tag <a> "attorno" ad un tag <img> in questo modo: <a href="pippo.html"><img src="/foto/pippo.jpg" alt="una foto di Pippo"></a> 5