HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web. R. C. Esposito 1

Transcript

1 HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web R. C. Esposito 1

2 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire il contenuto e l'aspetto delle pagine sul World Wide Web Markup codice che mantiene informazioni sulla formattazione del testo Hypertext il testo e disseminato di hyperlink, ossia di punti speciali che ci permettono di collegarci ad una pagina nuova semplicemente cliccando su una sezione di testo, un immagine, un bottone, R. C. Esposito 2

3 Introduzione HTML non e un linguaggio di programmazione HTML e un linguaggio di formattazione R. C. Esposito 3

4 Struttura principale di un documento Il codice HTML si basa su coppie di tag di apertura e di chiusura che delimitano attributi e valori. I tag definiscono ogni elemento di una pagina Web, quale un paragrafo di testo, una tabella o un'immagine. R. C. Esposito 4

5 Struttuta di un documento HTML R. C. Esposito 5

6 Tag per definire la struttura di un documento R. C. Esposito 6

7 Come appare un documento R. C. Esposito 7

8 Come creare un documento HTML I file HTML hanno estensione.html oppure.htm Sono dei semplici file di testo e quindi possiamo crearli utilizzando un qualunque editor Dobbiamo ricordarci di salvarli con l estensione giusta, se vogliamo che siano interpretati correttamente dal browser Web. R. C. Esposito 8

9 Come creare un documento HTML Esistono degli applicativi che permettono di creare pagine HTML complesse in modo abbastanza semplice. Esempi: Microsoft Frontpage Dreamweaver di Macromedia Noi non li utilizzeremo! Questa e una breve introduzione agli aspetti base di HTML; questi strumenti potranno essere utili a chi di voi decidera di cimentarsi con design di pagine strutturate. R. C. Esposito 9

10 Sintassi: primi passi Qualunque comando di formattazione ha la seguente forma: <comando> Body </comando> E utile ricordare i comandi principali Esistono comunque molte guide online: R. C. Esposito 10

11 Sintassi: primi passi Le parole scritte tra cunei si chiamano tag ; sono parole speciali che creano la formattazione del documento (il browser le interpreta e sa come comportarsi). Sono divise in due gruppi principali: otag di inizio comando, ad esempio <HTML> otag di fine comando, ad esempio </HTML> R. C. Esposito 11

12 Sintassi: primi passi Tutto quello che compare tra questi due tag è univocamente definito e descritto dai tag stessi Il testo contenuto tra <HTML> e </HTML> è un documento html. Quindi OGNI file html inizia con <HTML> e finisce con </HTML>. NOTA IMPORTANTE: i tag possono essere scritti equivalentemente con lettere maiuscole o minuscole! R. C. Esposito 12

13 Prova.html <html> <head> <title> Pagina di Francesca </title> </head> <body> <H1> Titolo del testo </H1> Questa è una pagina di prova, scritta all'interno di Notepad seguendo le prime semplici istruzioni su HTML. Ho scelto di scrivere un titolo grande e un testo stupido </body> </html> R. C. Esposito 13

14 Cosa vedo R. C. Esposito 14

15 Per fare le cose secondo gli standard... Seguendo le indicazioni del W3C (consorzio internazionale che si occupa di armonizzare l'utilizzo dell'html) Doctype deve essere il primo elemento ad aprire il documento. Si tratta di un tag che non ha bisogno di chiusura e che ha il compito di fornire informazioni al server Web che ospita la pagina: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"> HTML PUBLIC: il documento è pubblico IETF: il tipo di HTML pubblico è gestito dalla Internet Engineering Task Force DTD HTML 4.0: la versione di HTML supportata è la 4.0 EN: la lingua del documento è l'inglese R. C. Esposito 15

16 Arricchisco le proprieta di <body> La sintassi corretta per l'elemento <BODY> è la seguente: <BODY> Contenuto del documento </BODY> Il tag <BODY> è utilizzato, oltre che per fornire al browser indicazioni sulla posizione degli oggetti nel documento, anche per impostare vari attributi di visualizzazione per il documento. Di seguito vediamo quali. R. C. Esposito 16

17 Arricchisco le proprieta di <body> <body bgcolor= colore sfondo Background= immagine di sfondo Text= colore del testo Link= colore di un link da visitare Vlink= colore di un link visitato > l ordine degli attributi e ininfluente R. C. Esposito 17

18 Arricchisco le proprieta di <body> <html> <head> <title> Pagina di Francesca </title> </head> <body bgcolor= yellow" text="blue"> <H1> Titolo del testo </H1> Questa è una pagina di prova, scritta all'interno di Notepad seguendo le prime semplici istruzioni su HTML. Ho scelto di scrivere un titolo grande e un testo stupido </body> </html> R. C. Esposito 18

19 Come scegliere il colore dello sfondo Impostare lo sfondo del documento L'attributo BGCOLOR imposta un colore unitario di sfondo. <BODY BGCOLOR="red"> E' possibile sostituire al nome in inglese, valori esadecimali (in base 16). Per esempio, il colore rosso (red) si sostituisce in questo modo: <BODY BGCOLOR="#ff0000"> L'utilità dei colori esadecimali si ha laddove non si vuole un colore standard ma sfumato o con diversa tonalità. R. C. Esposito 19

20 Come scegliere il colore dello sfondo La rappresentazione esadecimale codifica le informazioni in RGB. Vediamo prima cosa significa rappresentazione RGB in decimale: Red Green Blue Ogni campo di colore ha valori da 0 (nero o assenza di colore) a 255 (bianco o valore massimo). Esempi: Il rosso ha valori RGB=(255,0,0) Il verde e RGB=(0,255,0) Il blu e RGB=(0,0,255) Il bianco e RGB=(255,255,255) R. C. Esposito 20

21 Come scegliere il colore dello sfondo Possiamo usare il color editor di paint per selezionare un colore e scoprire le componenti RGB RGB=(0,164,242) R. C. Esposito 21

22 Come scegliere il colore dello sfondo Usiamo la calcolatrice per calcolare i valori esadecimali 0 -> > A4 242-> F2 <body bgcolor="#00a4f2 " text="blue"> R. C. Esposito 22

23 Arricchisco le proprieta dei tag Ogni tag può essere personalizzato da una serie di attributi. <p align="left"> Questa è una pagina di prova, scritta all'interno di Notepad seguendo le prime semplici istruzioni su HTML. </p> Abbiamo definito un paragrafo di testo con i tag <P> e </P>. Abbiamo anche aggiunto un attributo al tag <P>, ossia abbiamo specificato che vogliamo allineare il testo rispetto al margine sinistro del documento. L attributo è stato scritto all interno dei cunei di P. R. C. Esposito 23

24 Arricchisco le proprieta dei tag Non tutti i tag supportano attributi e non tutti gli attributi sono uguali Alcuni tag hanno degli attributi obbligatori. Ad esempio il tag <A> </A> si chiama tag ancora e serve per includere link all interno della pagina. E obbligatorio inserire l attributo che specifica a cosa vogliamo fare puntare questo link, altrimenti il tag è inutile. R. C. Esposito 24

25 Formattazione di caratteri Dimensione: <h1></h1> <...><...> <h1></h6> Stile: <B> Testo grassetto</b> <I> Testo corsivo </I> <U> Testo sottolineato</u> <STRIKE> Testo barrato </STRIKE> R. C. Esposito 25

26 Formattazione di caratteri: i font <FONT> Il tag FONT è uno dei più usati e frequenti nell'attuale Web publishing. Il tag FONT ha la funzione di formattare tipo e grandezza del testo limitatamente ad alcuni punti del documento. il tag FONT può definire: tipo di font utilizzato, grandezza e colore. <FONT FACE= arial" SIZE=5 COLOR=red>Carattere da formattare</font> R. C. Esposito 26

27 Formattazione dei paragrafi Andare a capo <BR> Creare un paragrafo <P> paragrafo...</p>: Possiamo allineare il paragrafo a sinistra, a destra o al centro, usando l attributo ALIGN R. C. Esposito 27

28 Inserire linee orizzontali Il tag HR (acronimo che sta per Horizontal Rule) non ha bisogno di chiusure successive. <HR align="center" size="2" width="400" color="red" noshade> Si compone di diversi attributi: align="center": definisce la posizione della riga (center, right, left). size="2": definisce l'altezza, in pixel, della riga. width="400": definisce lunghezza orizzontale, in pixel, della linea. Può anche esprimersi in percentuale di spazio disponibile: width=80%. color="red": definisce il colore della linea. noshade: se presente questo attributo elimina l'effetto 3D della linea. Se omesso produce tale effetto. R. C. Esposito 28

29 Formattazione di liste Con HTML si possono costruire liste puntate o numerate: Occorre definire l inizio e la fine della lista e poi definire ogni singolo elemento della lista. Le liste numerate si costruiscono con il comando <ol> </ol> Le liste non numerate col comando <ul></ul> Ogni elemento della lista e delimitato dai tag <li> </li> R. C. Esposito 29

30 Formattazione di liste Ora faccio una lista numerata: <ol> <li> questo è il primo elemento </li> <li> e questo è il secondo... </LI> </ol> Ora faccio una lista numerata: <ol> <li> questo è il primo elemento, diviso in due punti </li> <ul> <li> questo è uno </li> <li> questo è l altro </li> </ul> <li> e questo è il secondo... </LI> </ol> R. C. Esposito 30

31 Tag di testo logici e fisici Un tag fisico ha il compito di formattare visivamente un documento, cioè di renderlo grassetto, corsivo, sottolineato ecc. La funzione di questi tag non è quella di dare un aspetto al documento, ma di marcare determinati punti per definirne una struttura. Un tag logico, al contrario ha la funzione di definire una struttura indipendentemente dal suo aspetto. Ovvero, indipendentemente dal modo in cui il browser interpreterà visivamente il contrassegno. R. C. Esposito 31

32 Tag logici <ADDRESS> Contrassegna informazioni di indirizzo (mail, telefono ecc.) <BLOCKQUOTE> Usato per citazioni più lunghe di due o tre righe <CITE> Usato per indicare la fonte della citazione <DFN> Indica che il testo compreso è una definizione. <EM> Enfatizza il testo compreso all'interno del tag <STRONG> Enfatizza il testo R. C. Esposito 32

33 Inserire immagini Il comando per inserire immagini e <img> A differenza di molti editor di testo gli ipertesti non vengono "fusi" con le immagini. I documenti HTML si limitano a prevedere uno spazio al proprio interno entro il quale vanno inserite le immagini richiamate. Il tag <IMG> non ha bisogno di chiusura e la sua corretta sintassi è la seguente: <IMG SRC="immagine.gif"> Tra virgolette occorre specificare il nome dell immagine corredata dal cammino che occorre seguire per trovarla. R. C. Esposito 33

34 Inserire immagini: attributi aggiuntivi <img src= cammino del file align= top middle bottom left center right border= numero di pixel height= numero di pixel width= numero di pixel hspace= numero di pixel vspace= numero di pixel alt= testo alternativo > R. C. Esposito 34

35 Inserire immagini: attributi aggiuntivi Gli attributi WIDTH e HEIGHT permettono di definire in modo esplicito le dimensioni delle immagini Gli attributi HSPACE e VSPACE permettono di stabilire la distanza in pixel dell'immagine dagli oggetti che si trovano ai quattro lati della stessa L'attributo ALIGN definisce la posizione dell'immagine rispetto al testo posto immediatamente prima o dopo la stessa R. C. Esposito 35

36 Inserire link <a></a> a sta per anchor Ha un attributo obbligatorio, HREF,che permette di specificare a cosa punta il link: <a HREF= unige.it/>uni Genova </a> <a HREF= immagine.gif >clicca qui</a> <a HREF= ><img src= logo.gif ></a> <a HREF=mailto:odone@disi.unige.it> scrivetemi!</a> R. C. Esposito 36

37 Inserire link interni al documento Inserisci il tag <A NAME="ancora"> nel punto del documento da raggiungere. ancora è il nome identificativo del punto in cui il browser dovrà visualizzare la pagina. Nel collegamento dal quale vuoi raggiungere il punto del nuovo documento inserisci la seguente sintassi: <A HREF="#ancora">Punta ad un altra parte del documento </A> Il cancelletto (#) indica che si tratta di un link interno. R. C. Esposito 37

38 Inserire link <A HREF=" TITLE= Universita di Genova">Universita di Genova </A> questo comando permette di inserire un titolo che compare quando si passa con il mouse sulla scritta del link. R. C. Esposito 38

39 Inserire tabelle Definisco la tabella:<table></table> Definisco una riga : <tr></tr> Definisco una cella: <td></td> decidete il numero di righe e colonne; ogni riga è delimitata dai tag <tr> e </tr> per ogni riga gli elementi delle colonne (celle) si delimitano con <td> e </td> R. C. Esposito 39

40 Tabelle: attributi <TABLE border= numero align=left center right cellspacing= numero cellpadding= numero width= numero o % > spessore della linea di bordo; mettere 0 se non vogliamo linee spazio in pixel tra celle spazio tra bordo e contenuto celle larghezza della tabella in pixel o %tuale di pagina R. C. Esposito 40

41 Tabelle: attributi <TR valign=top middle bottom align=left center right bgcolor= colore > allineamento orizzontale allineamento verticale colore di sfondo per la riga <TH></TH> permette di aggiungere titoli (in grassetto e centrati) <CAPTION></CAPTION> aggiunge didascalie R. C. Esposito 41

42 Tabelle: attributi Gli attributi di TD, TH e CAPTION sono analoghi a quelli di TR. Qui di seguito vediamo alcuni attributi aggiuntivi di TD (che vanno bene anche per TH) <TD width= numero o % colspan= numero rowspan= numero > larghezza della cella in pixel o in % di pixel numero di colonne su cui si distribuisce la cella numero di righe su cui si distribuisce la cella R. C. Esposito 42

43 Tabelle: esempio 1 <table ALIGN=CENTER BORDER=1> <CAPTION align="bottom"> Questa e' la didascalia </CAPTION> <tr> <th> Titolo della colonna1 </th> <th> Titolo della colonna2 </th> <th> Titolo della colonna3 </th> </tr> <tr> <td ALIGN=LEFT> 1 </td> <td ALIGN=LEFT> 2 </td> <td ALIGN=LEFT> 3</td> </tr> <tr> <td ALIGN=LEFT> 4 </td><td ALIGN=LEFT> 5 </td> <td ALIGN=LEFT> 6</td> </tr> <tr> <td ALIGN=LEFT> 7 </td><td ALIGN=LEFT> 8 </td><td ALIGN=LEFT> 9</td> </tr> </table> R. C. Esposito 43

44 Tabelle: esempio 1 R. C. Esposito 44

45 Tabelle: esempio 2 Le tabelle sono anche molto utili per centrare le immagini, quando il browser non vuole collaborare provate la differenza fra questi due modi (su una vostra immagine a scelta ): <img align="center" src=immagine a scelta> <table align=center> <tr> <TD ALIGN=center><img align="center" src=immagine a scelta></td> </TR> </TABLE> R. C. Esposito 45

46 Tabelle: esempio 3 tabelle per centrare immagini e testo <table align=center border=1> <caption align=top> esempio di uso di tabelle per allineare immagini e testo </caption> <tr> <td align=center> <img align="center" src=immagine></td> <td align=center> <img align="center" src=immagine></td> </TR> <tr> <td align=center> immagine originale</td> <td align=center> immagine negativo</td> </TR> </table> R. C. Esposito 46

48 Tabelle: esempio 4 <table width=100% border=1 align=center> <caption> Celle di dimensione variabile </caption> <tr> <td colspan=2 align=center> <b>mammiferi</b></td> </tr> <tr> <td align=center> <b>cani</b> </td> <td align=center> <b>gatti</b> </td> </tr> <tr> <td align=center> fido </td> <td align=center> fuffi </td></tr> <tr> <td align=center> pluto </td> <td align=center> minu' </td></tr> </table> R. C. Esposito 48

50 Tabelle: esempio 5 <table width=80% border=1 align=center> <caption align=bottom> Tabella complessa </caption> <tr> <td rowspan=2 colspan=2></td> <td colspan=2 align=center> <b>valori</b> </td> </tr> <tr> <td align=center> <b>temperatura</b> </td> <td align=center> <b>umidita'</b> </td></tr> <tr> <td rowspan=2> <b>citta'</b></td> <td align=left> Milano </td> <td align=center> 18 </td> <td align=center> 60% </td></tr> <tr> <td align=left> Genova </td> <td align=center> 24 </td> <td align=center> 80% </td></tr> </table> R. C. Esposito 50

52 Frame Servono per dividere il documento in più parti ognuna delle quali può essere gestita in modo indipendente. Sono molto utili nel caso di siti di dimensioni medio/grandi. TAG importanti: <FRAMESET> </FRAMESET> che sostituisce il tag <BODY> <FRAME> indica il singolo frame R. C. Esposito 52

53 Frame Se vogliamo organizzare le nostre pagine con una struttura a frame dobbiamo prima di tutto pensare ad una struttura. Solitamente i frame sono composti da parti che rimangono invariate e parti che cambiano: avremo un file.htm principale, che punta a tutti gli altri file R. C. Esposito 53

54 Frameset: attributi <FRAMESET> ha due attributi principali: rows che divide lo schermo in zone orizzontali cols che divide lo schermo in zone verticali Posso usarli insieme, ma l ordine in cui li applico e importante R. C. Esposito 54

55 Frameset: attributi <FRAMESET rows= numero1,...,numeron numero1%,...,numeron% * cols= numero1,...,numeron numero1%,...,numeron% * frameborder=yes no > dimensioni in pixel dimensioni in percentuale resto della riga R. C. Esposito 55

56 Frameset: esempi <FRAMESET rows= 150,* frameborder= no >...</...> <FRAMESET cols= 30%,70% >...</> R. C. Esposito 56

57 Frame: attributi <FRAME src=url, name= nome finestra scrolling=yes no auto noresize... > all interno di ogni porzione posso aprire pagine diverse usando il tag FRAME il nome e importante perché se voglio aprire un link su una finestra specifica uso un target su questo nome (vedi esempio) R. C. Esposito 57

58 Frame: esempi <FRAMESET cols= 200,* > <FRAME src= image.jpg name= win1 > <FRAME src= text.htm name= win2 > </FRAMESET> R. C. Esposito 58

59 Target Se all interno di un frame c è un link, questo viene aperto nella stessa finestra Altrimenti si può usare l attributo TARGET del TAG <a>: <a target= win2 href=... > clicca </a> Valori base di TARGET sono: target= _self (finestra stessa) target= _top (finestra intera) target= _blank (in una nuova finestra) target= _parent (frameset in cui si trova il frame) R. C. Esposito 59

60 Frame: un esempio R. C. Esposito 60

61 Frame: esempio per produrre una pagina funzionante come quella vista prima ci servono 6 file.htm (o.html): 1. il file principale 2. il file del titolo 3. il file del menu 4. un file per ogni elemento cliccabile del menu (3 file, uno per HOME, uno per TABELLE, uno per LINK) R. C. Esposito 61

62 Frame: file principale (frame.html) <html> <head><title>esercitazione 3, esercizio 2</title></head> <frameset rows="140,*"> <FRAME src=logo.html name="logo" scrolling="no"> <frameset cols="25%,75%"> <FRAME src= menu.html" name= menu"scrolling="auto"> <FRAME src="intro.html" name="corpo" scrolling="auto"> </frameset> </html> R. C. Esposito 62

63 Frame: file del titolo (logo.html) <html> <head></head> <body> <img src="./immagini/esempio.jpg" width="100" height="100"> <font face="arial" size="10" color="blue"> Esercitazione su HTML </body> </html> R. C. Esposito 63

64 Frame: file del menu (menu.html) <html> <head></head> <body> <h2> Menu </h2> <ul> <li><a href="esempio1.html" target="corpo">home</a></li> <li><a href=" esempio2.html" target="corpo">tabelle</a></li> <li><a href=" esempio3.html" target="corpo">link</a></li> </ul> </body> </html> R. C. Esposito 64

65 MAP: attributi <MAP name= nome mappa > dettagli </MAP> I dettagli riguardano la forma (o le forme) della mappa R. C. Esposito 65

66 AREA: attributi <AREA SHAPE= rect circle polygon default coords= x1,y1,x2,y2 (rettangolo) x1,y1,...,xn,yn (poligono) href= URL > nohref x,y,r (cerchio) R. C. Esposito 66

67 MAP <img src= immagine.gif usemap= #mappa > <map name=mappa> <area shape= rect href=... > coords= 50,50,100,100 <area shape= polygon coords= 120,130,180,200,400,400 href=... > </map> R. C. Esposito 67

68 Come costruire le forme Aprire l immagine con Paint e identificare le zone in cui vogliamo dividere la mappatura Visualizzate le coordinate (x,y) degli angoli dei rettangoli con paint R. C. Esposito 68

69 Image map: esempio <html> <body> <img src="mappa.gif" usemap="#mappa"> <map name="mappa"> <area shape "rect" coords="60,60,240,180" href=" <area shape "rect" coords="248,60,430,180" href=" <area shape "rect" coords="60,190,430,240" href=" <area shape "rect" coords="60,250,428,311" href=" </body> <html> R. C. Esposito 69

70 Image map: esempio R. C. Esposito 70