Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) e-mail: maria.finazzi@unipv.it pagine web: <http://lettere.unipv.it/infoum/finazzi/>
Dietro una pagina web Alcuni esempi: <> (html generico) <> (HTML 4.0) <http://www.osservatoriosullacomunicazione.com/ w3c/firstcss.html> (HTML 4.01) <http://it.wikipedia.org/w/index.php?title=xml> (XHTML 1.0) HTML: HyperText Markup Language 2
Documenti HTML File di testo (estensione:.html o.htm) Linguaggio di codifica per la pubblicazione di documenti sul world wide web Specifiche del W3C (Consorzio W3): HTML 4.01 (HyperText Markup Language): <http://www.w3.org/tr/html4/> (Raccomandazioni 1999) XHTML 1.0 (Extensible HyperText Markup Language): <http://www.w3.org/tr/xhtml1/> (Raccomandazioni 2000) Software per la visualizzazione e la navigazione: browser web (due tipi: grafici e di testo) 3
Codifica HTML: la struttura del codice Le istruzioni di visualizzazione per il browser sono rappresentate con appositi marcatori Elementi: (due tipi): delimitati da un tag iniziale, es. <h1>, e un tag finale, es. </h1> (non sempre obbligatorio ma consigliato) vuoti (privi di contenuto): es. <br> (a capo), <hr> (linea) Attributi: <h1 align="left"> (meglio tra virgolette) Contenuto degli elementi (testo presente fra il tag iniziale e il tag finale): <h1>titolo</h1> Possono inoltre essere presenti: commenti: <!-- testo del commento --> 4
Codifica HTML: i marcatori Per gli elementi con un contenuto: i tag iniziali cominciano con il carattere < i tag finali cominciano con i caratteri </ entrambi sono seguiti dal nome dell'elemento e si concludono con il carattere > Esempio: <h1>primo capitolo</h1> Per gli elementi privi di contenuto la sintassi è leggermente diversa: il tag comincia con il carattere < il tag prosegue con il nome dell'elemento il tag si conclude con il carattere > Esempio: <hr> 5
Codifica HTML: la sintassi Consigliato: chiudere gli elementi annidare i marcatori (scatole cinesi) mantenere lo stesso case (maiuscole o minuscole) mettere i valori degli attributi tra virgolette 6
Codifica HTML: gli elementi Le istruzioni previste nelle specifiche HTML riguardano principalmente: 1. la macrostruttura del documento 2. la struttura e il formato del documento 3. stili dei caratteri 4. l'inserimento di immagini 5. i collegamenti o link 7
1. Macrostruttura Definizione del tipo di documento: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Macrostruttura: intestazione (metadati) e corpo del documento <html> <head> <title>testo del titolo</title>... <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" > <meta name="author" content="nome dell'autore" > <meta name="keywords" content="parole chiave" >... </head> <body> testo del documento </body> </html> 8
2. Struttura e formato del documento Due tipi di elementi all'interno del <body> (con differenti proprietà): elementi block-level: isolano una porzione di testo fra due a capo (es. titoli, paragrafi, liste) elementi inline: all'interno di una porzione di testo (es. singole parole o frasi) 9
2a. Titoli e paragrafi Titoli (6 livelli): da <h1> a <h6> Paragrafi: <p>testo del paragrafo</p> Interruzione di riga: <br> Riga orizzontale: <hr width="600"> Sezioni: <div> <h2>titolo della sezione</h2> <h3 align="left">sottotitolo</h3> <p>paragrafo della sezione</p> </div> Citazione: <blockquote> <p>testo rientrante</p> </blockquote> 10
2b. Elenchi Elenco non ordinato (punto elenco): <ul> <li>primo lemma</li> <li>secondo lemma</li>... </ul> Elenco ordinato (lettere o numeri): <ol> <li>primo lemma</li> <li>secondo lemma</li>... </ol> 11
2c. Tabelle <table> <tr> <th>intestazione prima colonna</th> <th>intestazione seconda colonna</th>... </tr> <tr> <td>prima riga, prima colonna</td> <td>prima riga, seconda colonna</td>... </tr> <tr> <td>seconda riga, prima colonna</td> <td>seconda riga, seconda colonna</td>... </tr> </table> 12
2d. glossari Definition list: <dl> <dt>lemma</dt> <dd>definizione</dd> <dt>lemma</dt> <dd>definizione</dd> </dl> 13
3. Stili dei caratteri Elementi HTML ora deprecati: grassetto: <b></b> corsivo: <i></i> sottolineato: <u></u> barrato: <strike></strike> Elementi HTML consigliati: enfasi: <em></em> (di default: corsivo) enfasi rafforzata: <strong></strong> (di default: grassetto) 14
4. Inserimento di immagini All'interno di una pagina HTML è possibile visualizzare singole immagini, salvate a a parte in un formato supportato dai browser (JPEG, GIF, PNG,...). Di ogni immagine vanno specificati nome del file, percorso e testo alternativo: <img src="../pavia.jpg" alt="veduta di Pavia"> Il percorso delle directory per arrivare all'immagine può essere: relativo: src="immagine.jpg" src="immagini/immagine.jpg" src="../immagini/immagine.jpg" assoluto (un indirizzo web): src="http://www.sitoweb.it/immagine.jpg" 15
5a. Collegamenti o link All'interno di una pagina HTML è possibile attivare dei collegamenti con altri documenti, specificandone il percorso; il collegamento può essere collocato su una stringa di testo o su un'immagine: <a href="altrapagina.html">vai all'altra pagina</a> <a href="altrapagina.html"><img src="immagine.jpg"></a> Per gli URL valgono le stesse indicazioni fornite per l'inserimento di immagini 16
5b. Collegamenti interni Si possono attivare collegamenti anche all interno della stessa pagina: link: <a href= #sezione1">vai alla sezione 1</a> áncora nel testo (destinazione all interno della pagina): <a name= sezione1">sezione 1</a> 17
Problema: caratteri speciali Entità carattere (consigliate) e entità numeriche (sconsigliate) Carattere à è È é Entità carattere à è È é Entità numerica à è È é <http://www.w3.org/tr/html4/sgml/entities.html> ESERCIZIO: costruire una pagina web 18
Formattazione di un documento HTML Per ogni elemento: attributi per precisare aspetti della visualizzazione (variabili a seconda dell'elemento): allineamento: align="left" / "center" / "right" dimensioni: size="10", width="100", height="150" sfondo [deprecato]: bgcolor="silver" / "#cccccc" / "#ccc" colore [deprecato]: color="silver" / "#cccccc" / "#ccc" tipo di carattere [deprecato]: <font face="arial"></font> Regole di visualizzazione spesso disattese (da alcuni browser (es. Internet Explorer), con conseguente "anarchia" nel web 19
Formattazione: diversa tecnologia Nuova tendenza: separazione della struttura dalla sua rappresentazione (HTML logico e non fisico) Nuova tecnologia per la gestione dell aspetto: fogli di stile CSS (Cascading Style Sheet) CSS2: <http://www.w3.org/tr/css2/> (1999) Nuove specifiche: XHTML (Extensible Hypertext Markup Language) XHTML 1.0: <http://www.w3.org/tr/xhtml1/> (2000) 20
Esempio di CSS: interno <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>titolo della pagina</title> <style type="text/css"> body { color: black; background: white; font-family: "Gill Sans", sans-serif; font-size: 12pt; } h1 { color: red; background: white } </style> </head> <body> <h1>titolo</h1> <p>primo paragrafo</p> </body> </html> 21
Esempio di CSS: esterno <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>titolo della pagina</title> <link rel="stylesheet" href="foglio_di_stile.css" type="text/css"> </head>... </html> Un tutorial in italiano: <http://www.osservatoriosullacomunicazione.com/w3c/fir stcss.html> ESERCIZIO: formattare una pagina web 22
CSS: attributi id e class A molti elementi si possono assegnare gli attributi: id: identificatore univoco (una sola occorrenza) esempio: <p id= stile8 > </p> regole CSS: #stile8 { font-size: 8pt;} class: classe di appartenenza (una o più occorrenze) esempio: <p class= rosso > </p> regole CSS:.rosso { font-color: red; } p.rosso { font-color:red; } 23
Regole di XHTML doctype: obbligatorio virgolette sugli attributi: obbligatorie nidificare i tag chiudere tutti i tag aperti chiudere anche i tag vuoti: <br/> (o: <br />) tag: solo minuscoli 24
Bibliografia su HTML T. A. Powell, HTML la Reference, McGraw-Hill 2001 Specifiche HTML 4.01 (trad. italiana di Michele Diodati) <http://www.diodati.org/w3c/html401/cover.html> Specifiche XHTML 1.0 (trad. it. di Patrizia Andronico) <http://www.w3c.it/traduzioni/xhtml1-it.html> Validatore del W3C: <http://validator.w3.org/> 25
Tutorial di HTML HTML Tutorial (in inglese) <http://www.w3schools.com/html/default.asp> Introduzione all'html (Dave Raggett, revisionato il 29 Agosto 2000) <http://www.diodati.org/w3c/raggett/overview.asp> Caratteristiche più avanzate (Dave Raggett, 29 Agosto 2000) <http://www.diodati.org/w3c/raggett/advanced.asp> Aggiungere un tocco di stile (Dave Raggett, 29 Agosto 2000) <http://www.diodati.org/w3c/raggett/style.asp> Guida HTML <http://www.html.it/guida/> 26
Software per HTML editor: PSPad (freeware) <http://www.pspad.com/it/index.html> editor: Textpad browser: Mozilla Firefox (open source) <http://www.mozilla.org/products/firefox/> 27