Esercitazioni di HTML

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Esercitazioni di HTML"

Paolina Francesca Ceccarelli
8 anni fa
Visualizzazioni

1 Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) maria.finazzi@unipv.it pagine web: <

2 Dietro una pagina web Alcuni esempi: <> (html generico) <> (HTML 4.0) < w3c/firstcss.html> (HTML 4.01) < (XHTML 1.0) HTML: HyperText Markup Language 2

com/ w3c/firstcss.html> (HTML 4.01) <http://it.wikipedia.

3 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): < (Raccomandazioni 1999) XHTML 1.0 (Extensible HyperText Markup Language): < (Raccomandazioni 2000) Software per la visualizzazione e la navigazione: browser web (due tipi: grafici e di testo) 3

W3): HTML 4.01 (HyperText Markup Language): <http://www.w3.org/tr/html4/> (Raccomandazioni 1999) XHTML 1.

4 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:  4

</h1> (non sempre obbligatorio ma consigliato) vuoti (privi di contenuto): es.

5 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

> Esempio: <h1>primo capitolo</h1> Per gli elementi privi di contenuto la sintassi è leggermente diversa: il tag

6 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

7 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

8 1. Macrostruttura Definizione del tipo di documento: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " Macrostruttura: intestazione (metadati) e corpo del documento <html> <head> <title>testo del titolo</title>... <meta http-equiv="content-type" content="text/html; charset=iso " > <meta name="author" content="nome dell'autore" > <meta name="keywords" content="parole chiave" >... </head> <body> testo del documento </body> </html> 8

dtd"> Macrostruttura: intestazione (metadati) e corpo del documento <html> <head> <title>testo del titolo</title>.

9 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

10 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

<div> <h2>titolo della sezione</h2> <h3 align="left">sottotitolo</h3> <p>paragrafo

11 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

12 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

.. </tr> <tr> <td>prima riga, prima colonna</td> <td>prima riga, seconda

13 2d. glossari Definition list: <dl> <dt>lemma</dt> <dd>definizione</dd> <dt>lemma</dt> <dd>definizione</dd> </dl> 13

14 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

<strike></strike> Elementi HTML consigliati: enfasi: <em></em> (di

15 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=" 15

Di ogni immagine vanno specificati nome del file, percorso e testo alternativo: <img src="../pavia.

16 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

su un'immagine: <a href="altrapagina.html">vai all'altra pagina</a> <a href="altrapagina.

17 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

#sezione1">vai alla sezione 1</a> áncora nel testo

18 Problema: caratteri speciali Entità carattere (consigliate) e entità numeriche (sconsigliate) Carattere à è È é Entità carattere à è È é Entità numerica à è È é < ESERCIZIO: costruire una pagina web 18

carattere à è È é Entità numerica à è È é <http://www.w3.

19 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

bgcolor="silver" / "#cccccc" / "#ccc" colore [deprecato]: color="silver" / "#cccccc" / "#ccc" tipo di carattere [deprecato]: <font

20 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: < (1999) Nuove specifiche: XHTML (Extensible Hypertext Markup Language) XHTML 1.0: < (2000) 20

fogli di stile CSS (Cascading Style Sheet) CSS2: <http://www.w3.

21 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

22 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: < stcss.html> ESERCIZIO: formattare una pagina web 22

23 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

24 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

25 Bibliografia su HTML T. A. Powell, HTML la Reference, McGraw-Hill 2001 Specifiche HTML 4.01 (trad. italiana di Michele Diodati) < Specifiche XHTML 1.0 (trad. it. di Patrizia Andronico) < Validatore del W3C: < 25

26 Tutorial di HTML HTML Tutorial (in inglese) < Introduzione all'html (Dave Raggett, revisionato il 29 Agosto 2000) < Caratteristiche più avanzate (Dave Raggett, 29 Agosto 2000) < Aggiungere un tocco di stile (Dave Raggett, 29 Agosto 2000) < Guida HTML < 26

27 Software per HTML editor: PSPad (freeware) < editor: Textpad browser: Mozilla Firefox (open source) < 27

Documenti analoghi

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es: