HTML 4.01 XHTML 1.0 Il linguaggio dei siti web

Transcript

2 Copyright 2013 Dott.Ing. Ivan Ferrazzi Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. 2/37

3 Indice generale Introduzione...4 HTML...5 XHTML...6 I tag e gli attributi...6 I commenti...7 I tag di struttura...9 Il tag...9 Il tag...10 Il tag <body>...10 Tipi di tag...14 Tag a blocco...14 Tag in linea...14 Tag a blocco in linea...14 Tag per i testi...15 I tag per definire i titoli...15 Il tag per tipo, dimensione e colore del carattere...15 Lo stile dei testi...16 I paragrafi...17 Interruzione di riga...17 Il tag per definire i link (le ancore)...18 Le linee divisorie...18 Le tabelle...20 Le immagini...25 Gli elenchi...27 Tag per moduli da compilare...29 Il tag <input />...30 Il tag <lable>...</lable>...31 Il tag <fieldset>...</fieldset>...31 Il tag <textarea>...</textarea>...32 Il tag <select>...</select>...32 I frame...34 Validare il codice /37

4 Introduzione. Internet è divenuto ormai il canale di comunicazione per eccellenza. L'Internet ci permette di trasportare in tempo reale testi, voce e video da una parte all'altra del mondo. Una parte dell'internet che permette di trasferire informazioni di ogni genere mediante il protocollo HTTP è il World Wide Web (WWW). Il software necessario sul nostro computer per poter usufruire di questo servizio è il web browser, oppure comunemente chiamato browser. Alcunti dei browser più conosciuti sono MS Internet Explorer, Mozilla Firefox, Opera. Le informazioni vengono trasmesse attraverso il WWW utilizzando il linguaggio HTML (Hyper Text Markup Language) che poi viene interpretato dal relativo browser che ripropone i contenuto del giusto formato. 4/37

5 HTML HTML (Hypertext Markup Language) è un linguaggio con il quale si può definire l'aspetto delle pagine Web. Possiamo definire come disporre le immagini, come formattare ed allineare il testo, effettuare collegamenti tra varie pagine Web, ecc. utilizzando dei marcatori, chiamati tag. Quello che invece non possiamo fare è modificare il flusso di elaborazione durante l'interpretazione, come viene fatto con tutti i normali linguaggi di programmazione. Proprio per questo motivo HTML non può essere classificato un linguaggio di programmazione. Un file HTML può essere creato con un qualsiasi editor testuale che permetta il salvataggio del solo testo, senza quindi aggiunta di formattazione. L'estensione utilizzata per un file HTML è.html oppure.htm. Un nome di dominio (es. fa riferimento ad uno spazio Web che deve contenere (parlando di sole pagine HTML) la pagina index.html, oppure index.htm per funzionare in maniera corretta. Una volta creato il file HTML viene quindi trasmesso o copiato sul server Web da dove può essere scaricato utilizzando un browser (programma per la navigazione su Internet). E' poi compito del browser interpretare il linguaggio HTML presente all'interno del relativo file scaricato e visualizzare la pagina Web in maniera corretta. Lo stesso codice può, infatti, essere interpretato differentemente da vari browser (tipo Internet Explorer, oppure Mozilla Firefox) che può quindi portare a risultati diversi. E' quindi consigliabile effettuare dei test su più browser prima di pubblicare le pagine create. L'organizzazione che si occupa di standardizzare il linguaggio HTML è il W3C, ossia World Wide Web Consortium. L'ultima versione rilasciata da questa organizzazione è HTML 4.01 ed è quella che tratteremo in questa documentazione. 5/37

6 XHTML XHTML (Extensible Hypertext Markup Language) è identico a HTML 4.01, infatti, utilizza le definizioni di HTML come applicazione XML. Le direttive di XHTML definiscono che: i tag devono essere incorporati gli uni negli altri; ogni tag deve essere chiuso, anche quelli privi di tag di chiusura; tutti gli elementi (tag e attributi) vengono scritti in minuscolo; i valori degli attributi vengono scritti tra virgolette ( ); gli attributi non possono essere minimizzati (checked= checked al posto di un semplice checked); l'attributo id dovrebbe sostituire l'attributo name; ogni pagina deve avere un elemento root (...); ogni pagina deve contenere i tag <!DOCTYPE>,,, <title> e <body>, esempio: <!DOCTYPE...> <html xmlns= > <title>...</title> <body>... L'attributo xmlns all'interno del tag può anche essere lasciato via visto e considerato che viene aggiunto automaticamente durante l'interpretazione del codice. All'interno di questo manuale cercherò di indicare gli attributi possibili e le rispettive proprietà CSS. Gli attributi vengono indicati anche se le direttive specificano l'obbligo di utilizzo di stili piuttosto che gli attributi dove possibile. I tag e gli attributi Il linguaggio HTML è un insieme di marcatori (detti tag ) che permettono di definire la visualizzazione di una pagina Web. Un tag è di solito composto da due parti: una apertura, il contenuto e una chiusura. L'apertura contiene un nome che ne identifica la funzione e una serie di attributi che permettono di modificare il comportamento della funzione stessa. Il tutto viene inserito all'interno di parentesi uncinate. Il contenuto è di solito quello che viene presentato direttamente all'interno della pagina Web. La chiusura, invece, contiene uno slash / prima del nome che identifica la funzione del tag aperto. Anche la chiusura viene inserita all'interno di parentesi uncinate. 6/37

7 <tag attributo attributo...>contenuto</tag> La struttura utilizzata per gli attributi è nome_attributo= valore. Un esempio concreto potrebbe essere: <span id= saluto >Benvenuti sul mio sito</font> Non tutti i tag hanno una chiusura. In questo caso si parla di tag vuoti (empty tags). Il tag per l'inserimento delle immagini, ad esempio, viene utilizzato come segue <img src= immagine.gif /> La chiusura in questione avviene all'interno dello stesso tag di apertura. I tag possono essere annidati l'uno dentro l'altro, ma è importante chiudere i tag partendo dall'ultimo aperto. Esempio: <TAG1 attributo> contenuto1 <TAG2 attributo> contenuto2 </TAG2> </TAG1> Dall'esempio visualizzato diventa chiara anche l'importanza dell'indentazione del codice per renderlo più leggibile. Più spazi ed invii consecutivi vengono interpretati da un browser come un unico spazio. I seguenti attributi non verranno descritti per i vari tag perché disponibili per un qualsiasi elemento: class id style title permette di definire una o più classi di stile per l'elemento in questione permette di specificare un identificatore univoco permette di specificare le proprietà CSS per l'elemento permette di aggiungere un testo all'elemento visualizzato come etichetti nel momento in cui ci si trova sopra con il puntatore del mouse I commenti Per aumentare ulteriormente il grado di leggibilità del codice possiamo inserire anche dei blocchi di commento come segue:  7/37

8 Questi blocchi sono presenti, ma non vengono interpretati dal web browser. 8/37

9 I tag di struttura Vediamo in questa sezione i principali tag utilizzati per creare la struttura iniziale di una pagina html. Il tag... Il tag principale che definisce il contenuto della pagina HTML è... All'interno di esso possiamo trovare i tag... e <body>... che permettono di definire rispettivamente informazioni particolari della pagina stessa (head) ed il suo contenuto (body). Vediamo ora un esempio pratico. Creiamo utilizzando il seguente codice un semplice file di testo che andremo a chiamare hello.html: <body> Hello World! Se, dopo averlo creato, clicchiamo due volte con il tasto sinistro del mouse sull'icona del file stesso vedremo apparire la scritta Hello World! all'interno del nostro web browser predefinito. 9/37

10 Il tag... All'interno del tag... possiamo trovare diversi tag alcuni dei quali sono: <title>...</title> <meta... /> <script>...</script> <style>...</style> Questo tag permette di definire il titolo che vogliamo dare alla nostra pagina HTML e dovrebbe sempre essere presente. Il testo che viene inserito all'interno di questo tag viene visualizzato nella barra dei titoli del web browser. I META-tag sono dei tag che permettono di dare delle informazioni aggiuntive della pagina stessa al web browser, come la lingua utilizzata, il charset, l'autore della pagina, la descrizione dei contenuti, ecc. Questo tag permette di utilizzare codice di linguaggi di programmazione aggiuntivo come ad esempio Javascript. All'interno di questo tag possiamo definire gli stili da utilizzare per i singoli contenuti della pagina. Proviamo a modificare il nostro semplice esempio iniziale come segue: <title>titolo della pagina</title> <body> Hello World! Il tag <body>... Come precedentemente accennato utilizziamo questo tag per definire tutto il contenuto della pagina stessa, quindi quello che vediamo direttamente all'interno del web browser. Questo tag consente l'utilizzo di vari attributi che ne modificano il comportamento. HTML 4, però, ha introdotto un l'attributo style con il quale possiamo specificare il comportamento dell'elemento utilizzando i fogli di stille (CSS). background= [percorso/]file_immagine style= background-image:url([percorso/]file_immagine) Con l'utilizzo di questo attributo possiamo inserire un'immagine come sfondo del web browser. L'immagine verrà inserite con le sue dimensioni originali e moltiplicata verticalmente ed orizzontalmente nel caso in cui lo spazio 10/37

11 all'interno del web browser fosse più grande delle dimensioni originali dell'immagine stessa. Il percorso serve a definire la posizione attuale dell'immagine a partire dalla posizione del file html che contiene questa richiesta. Se questa indicazione viene omessa l'immagine verrà cercata nella stessa posizione del file html in esecuzione. Poniamo come esempio la seguente struttura: - immagini - sfondo.jpg - sito - index.html Dove immagini e sito sono le cartelle principale, mentre sfondo.jpg è il file dell'immagine che vogliamo utilizzare e index.html la pagina web per la quale vogliamo definire un'immagine come sfondo. Nel file index.html troviamo il seguente codice: <title>il mio sfondo</title> <body background=../immagini/sfondo.jpg > Hello World! Siccome dobbiamo definire l'esatta posizione dell'immagine a partire dalla posizione della pagina html che ne vuole fare utilizzo mettiamo il../ per uscire dall'attuale cartella sito e immagini/ per entrare nella rispettiva cartella che contiene l'immagine desiderata. bgcolor= {colore codice esadecimale} style= background-color:{colore codice esadecimale} Questo attributo viene utilizzato per definire il colore di sfondo della pagina html che vogliamo visualizzare. Come valori possiamo utilizzare il colore in lingua inglese (es. red, black, yellow, ecc.), oppure il codice esadecimale con un # posto davanti utilizzando il formato #RRVVBB. Il codice permette di identificare l'esatta sfumatura tra i 16 milioni di colori possibili utilizzando quindi la combinazione tra i valori di rosso (RR), verde (VV) e blu (BB) (es. #FF0000 per il rosso, #00FF00 per il verde e #0000FF per il blu). <title>lo sfondo diventa rosso</title> <body bgcolor= #FF0000 > Hello World! 11/37

12 bgproperties= fixed style= background-attachment:fixed Nel caso in cui volessimo utilizzare un'immagine di sfondo all'interno di una pagina html che mette a disposizione un contenuto che supera la singola videata possiamo utilizzare la relativa barra di scorrimento per visualizzare l'intero contenuto della pagina stessa. Utilizzando un'immagine di sfondo abbiamo il probabilmente indesiderato effetto di ripetizione dell'immagine inserita come sfondo. Per evitare questo comportamento possiamo utilizzare questo attributo che fissa l'immagine allo sfondo e permette di farci scorrere sopra il contenuto dell'intera pagina html. Il primo attributo (BGPROPERTIES) viene utilizzato per attivare la rispettiva proprietà sul browser Internet Explorer, proprietà che però non funziona ad esempio su Mozilla Firefox per il quale dobbiamo utilizzare la seconda proprietà indicata (STYLE) ossia la modifica dello stile. link= {colore codice esadecimale} (solo Internet Explorer) Questo attributo permette di definire il colore (vedi BGCOLOR) da utilizzare per i link della pagina. vlink= {colore codice esadecimale} (solo Internet Explorer) Questo attributo permette di definire il colore (vedi BGCOLOR) da utilizzare per i link già visitati della pagina. alink= {colore codice esadecimale} (solo Internet Explorer) Questo attributo permette di definire il colore (vedi BGCOLOR) da utilizzare per i link attivi della pagina. text= {colore codice esadecimale} style= color:{colore codice esadecimale} Questo attributo permette di definire il colore (vedi BGCOLOR) da utilizzare per l'intero testo della pagina. topmargin= valore style= margin-top:valore Questo attributo permette di definire la distanza in pixel (valore) dal margine superiore al contenuto più alto della pagina. bottommargin= valore style= margin-bottom:valore Questo attributo permette di definire la distanza in pixel (valore) dal margine inferiore al contenuto basso della pagina. leftmargin= valore style= margin-left:valore Questo attributo permette di definire la distanza in pixel (valore) dal margine 12/37

13 sinistro al contenuto più a sinistra della pagina. rightmargin= valore style= margin-right:valore Questo attributo permette di definire la distanza in pixel (valore) dal margine destro al contenuto più a destra della pagina. Esempio: <title>pagina con margini</title> <body background= sfondo.jpg topmargin= 60 bottommargin= 20 leftmargin= 70 rightmargin= 50 > Hello World! 13/37

14 Tipi di tag I tipi di tag si dividono principalmente in tag a blocco, tag in linea, oppure tag a blocco in linea. Tag a blocco Questi tag identificano dei contenitori che utilizzano di default l'intera larghezza messa a disposizione dall'elemento padre. Inoltre sono caratterizzati da un break line (nuova riga) prima e dopo la sua visualizzazione all'interno del browser. Alcuni dei tag a blocco sono: div, h1...h6, p, ul, ol. Tag in linea Questi tag identificano gli elementi che di default possono essere inseriti in sequenza orizzontale. Il break line deve quindi avvenire in maniera forzata (es. con br). Gran parte degli elementi in linea non reagiscono ad eventuali impostazioni di dimensione. Alcuni dei tag in linea sono: b, strong, span, u, i. Tag a blocco in linea Questi tag identificano gli elementi che di default possono essere inseriti in sequenza orizzontale mantenendo però la possibilità di essere personalizzati da un punto di vista di dimensione. Il tag che utilizza questa impostazione di default è il tag img. 14/37

15 Tag per i testi I seguenti tag possono essere utilizzati per visualizzare in maniera specifica parole, frasi, oppure blocchi di testo. I tag per definire i titoli I tag <hx>...</hx> dove x sta per il numero di livello che va dal valore 1 (titolo con caratteri più grandi) al valore 6 (titolo con caratteri più piccoli). Esempio: <title>testo con titolo</title> <body> <h1>il mio titolo</h1> <font face= Verdana,Arial size= 2 color=#ff0000 > Hello World! </font> Il tag per tipo, dimensione e colore del carattere. Il tag utilizzato per definire il tipo, la dimensione ed il colore del carattere era il font che però è ormai deprecato da tempo e quindi non più utilizzato. Il tag che lo sostituisce è span. Gli attributi indicati in questa sezione funzionano esclusivamente con il tag font, mentre per lo span è indispensabile l'utilizzo 15/37

16 delle proprietà CSS. Vediamo comunque gli attributi più importanti del vecchio tag e i corrispettivi stili da utilizzare con span: face= tipo carattere[,tipo carattere,...] style= font-family:tipo carattere[,tipo carattere,...] Questo attributo permette di definire quale tipo di carattere utilizzare per la visualizzazione del testo. Possiamo aggiungere anche più di un tipo di carattere, in questo caso verrà utilizzato il primo (a partire da sinistra) dei tipi di carattere presenti sul computer del client che sta visualizzando la nostra pagina. Nel caso in cui nessuno dei tipi di carattere elencati fosse presente sul sistema del client il web browser userebbe il suo tipo di carattere di default. size= valore style= font-size:valore px Questo attributo ci da la possibilità di definire la dimensione del carattere con un valore che va da 1 (piccolo) a 6 (molto grande). color= {colore valore esadecimale} style= color:{colore valore esadecimale} Con questo attributo possiamo definire il colore (vedi bgcolor) del testo compreso tra il file di apertura e chiusura. Esempio: <title>il testo formattato</title> <body> <font face= Verdana,Arial size= 2 color=#ff0000 > Hello World! </font> Lo stile dei testi Precedentemente abbiamo visto il tag <font>...</font> (anche se deprecato) che permette di definire il tipo di carattere, la dimensione ed il colore del testo. Senza utilizzare gli stili non ci è possibile modificare con questo tag lo stile del testo inserito. Per questo motivo ci vengono messi a disposizione diversi tag alcuni dei quali sono: <strong>...</strong> per il grassetto style= font-weight:bold Questo tag permette di mettere in grassetto il testo contenuto tra il tag iniziale e quello finale. <u>...</u> per la sottolineatura style= text-decoration:underline 16/37

17 Questo tag permette di sottolineare il testo contenuto tra il tag iniziale e quello finale. <i>...</i> per il corsivo style= font-style:italic Questo tag permette di mettere in corsivo il testo contenuto tra il tag iniziale e quello finale. Gli stili possono essere utilizzati anche in combinazione l'uno con l'altro, ma è molto importante che venga chiuso per primo l'ultimo tag iniziale utilizzato. Esempio: <title>grassetto e corsivo</title> <body> <font face= Verdana,Arial size= 2 color=#ff0000 > <strong><i>hello World!</i></strong> </font> Nel precedente esempio chiudiamo, infatti, prima il tag <i> utilizzato per ultimo e poi il tag <i> utilizzato per primo. I paragrafi Con il tag <p>...</p> possiamo definire dei paragrafi, ossia dei blocchi di testo per i quali valgono delle precise regole di formattazione. Queste regole possono essere definite con l'utilizzo degli attributi uno dei quali è align. align= allineamento style= text-align:{left center right justify} Con questo attributo possiamo definire l'allineamento all'interno del paragrafo. I valori che possiamo utilizzare sono center, per centrare il testo, left per allineare a sinistra, right per allineare a destra e justify per giustificare il testo. Interruzione di riga Il tag <br />, privo di tag finale e quindi terminato con /> costringe il web browser ad andare a capo. Esempio: <title>a capo</title> 17/37

18 <body> Hello World!<br /> Ciao mondo!<br /> Bye. Il tag per definire i link (le ancore) Un link non è altro che un collegamento ad un'altra pagina. Cliccando sul link che verrà poi visualizzato all'interno della pagina html ne possiamo vedere la pagina di destinazione. Il tag che utilizziamo per definire i link è <a>...</a>. All'interno di questo link possiamo trovare tra l'altro dei blocchi di testo, oppure delle immagini. Questo tag mette a disposizione una vasta gamma di attributi alcuni dei quali sono: href= [percorso/]pagina_web Questo attributo permette di definire la pagina di destinazione da aprire nel caso in cui si clicchi sopra il rispettivo link. target= posizione_di_caricamento Con questo attributo è possibile definire il dove viene visualizzata la pagina di destinazione identificata dal link stesso. Alcuni valori possono essere _blank per aprire la destinazione all'interno di una nuova finestra del web browser (la precedente rimane visualizzata all'interno di una precedente finestra), top evita di rimanere legati ad un'eventuale struttura definita con FRAME (vedi più avanti ) e ne carica completamente il contenuto, oppure il nome del FRAME (vedi più avanti) per identificare il frame all'interno del quale vogliamo visualizzare il contenuto della pagina di destinazione. Se questo attributo non viene utilizzato la pagina di destinazione viene caricata al posto della pagina attualmente visualizzata. <title>link</title> <body> <a href= prova.html target= _blank >Hello World!</a> Le linee divisorie <hr /> si utilizza per creare una linea divisoria orizzontale e, a differenza degli altri tag visti precedentemente, non necessita di chiusura. Questo tag supporta diversi attributi alcuni dei quali sono: color= {colore valore esadecimale} 18/37

19 style= color:{colore valore esadecimale} Questo attributo permette di definire il colore (vedi bgcolor) della linea divisoria. align= allineamento style= text-align:{left center right} Questo attributo permette di definire l'allineamento della linea divisoria nel caso in qui la sua dimensione fosse inferiore dell'intera larghezza utilizzata. Come valori possiamo utilizzare left, per allinearla a sinistra, right per allinearla a destra e center per centrarla. size= valore style= height:valore Questo attributo permette di definire lo spessore della linea divisoria. Il valore definisce lo spessore in pixel. width= valore style= width:valore Con questo attributo possiamo definire la larghezza della linea. Come valore possiamo utilizzare un numero che ne definisce la dimensione in pixel, oppure un valore percentuale, per definirne la dimensione in base all'intera larghezza messa a disposizione. Esempio: <title>linea divisoria</title> <body> <hr width= 70% /> Hello World! <hr width= 50 /> noshade= noshade Permette di inserire una linea divisoria senza ombreggiatura. 19/37

20 Le tabelle La tabella ha come tag principale <table>...</table> all'interno del quale si inserisce con dei tag particolari l'intera struttura della tabella. Il tag principale può contenere degli attributi che definiscono il comportamento di visualizzazione dell'intera tabella. Gli attributi più utilizzati sono: border= valore style= border:valore Questo attributo permette di definire lo spessore delle linee verticali ed orizzontali che delimitano le parti dell'intera tabella. Un valore pari a 0 rende invisibili queste linee delimitatrici. bordercolor= {colore valori esadecimali} style= border-color:{colore valori esadecimali} Questo attributo ci da la possibilità di definire il colore (vedi bgcolor) del bordo utilizzato. Il colore è visualizzabile solo se viene utilizzato un valore per border superiore a 0. cellpadding= valore style= padding:valore Con questo attributo possiamo definire lo spazio tra il bordo della cella ed il suo contenuto. Un valore pari a 0 permette di attaccare il contenuto direttamente al bordo della cella. cellspacing= valore style= border-spacing:valore[[,valore],valore,valore] Questo attributo ci permette di modificare lo spazio tra il bordo di una cella ed il bordo delle altre celle della tabella. Un valore pari a 0 permette di attaccare 20/37

21 una cella direttamente all'altra. width= valore style= width:valore Questo attributo permette di definire la larghezza dell'intera tabella. Il valore può essere messo come numero che identifica la larghezza in pixel, oppure come valore percentuale dove verrebbe utilizzata come larghezza la dimensione percentuale relativa all'interno spazio disponibile. HEIGHT= valore style= height:valore Questo attributo permette di definire l'altezza dell'intera tabella. Il valore può essere messo come numero che identifica l'altezza in pixel, oppure come valore percentuale dove verrebbe utilizzata come altezza la dimensione percentuale relativa all'interno spazio disponibile. align= allineamento style= text-align:{left center right} Con questo attributo possiamo definire l'allineamento della tabella. I possibili valori per definire l'allineamento sono center, che centra la tabella rispetto al restante contenuto, left che allinea la tabella a sinistra e right che la allinea a destra. bgcolor= {colore valore esadecimale} style= background-color:{colore valore esadecimale} Questo attributo definisce il colore di sfondo dell'intera tabella. Possiamo inserire il nome inglese relativo al colore che desideriamo (es. red) oppure inserire il codice con il formato esadecimale (es. #ff0000). Il colore definito con questo attributo viene utilizzato per tutte quelle celle dove non è stato definito a loro volta un eventuale colore di sfondo. background= [percorso/]file_immagine style= background-image:url([percorso/]file_immagine) Questo attributo permette di definire un'immagine da utilizzare come sfondo dell'intera tabella (vedi background del tag body). Esempio: <title>la mia tabella</title> <body> <table border= 0 cellpadding= 0 cellspacing= 0 >... </table> Per creare l'effettiva struttura della tabella possiamo utilizzare <tr>...</tr> 21/37

22 all'interno del quale viene definita la struttura per un'intera riga ed il tag <th>...</th> che permette di definire una riga di titolo, mentre <td>...</td> permette di definire le singole celle all'interno di una riga. Cerchiamo di creare la seguente semplice tabella per capire bene l'utilizzo di questi due tag. Cognome Nome Nr.telefono Pinco Palla Il codice HTML che permette di realizzare questa tabella è: <title>elenco</title> <body> <table> <tr><th>cognome</th> <td>nome</th> <td>nr.telefono</th></tr> <tr><td>pinco</td> <td>palla</td> <td>123456</td></tr> </table> Andiamo ora ad analizzare quello che abbiamo scritto. Il tag principale <table>...</table> definisce il contenuto dell'intera tabella. Utilizziamo all'interno di questo tag il <tr> per definire l'inizio di una nuova riga, seguito subito dai tre tag <th>...</th> che contengono il testo relativo ai titoli di colonna. Poi apriamo una nuova riga con il tag <tr> seguito dai tre tag <td>...</td> che contengono il testo relativo alle singole cella appartenenti alla stessa riga. Definiamo la fine della riga con il tag di chiusura </tr>. Poi nuovamente un blocco <tr>...</tr> che contiene per ogni cella un <td>...</td> con i rispettivi contenuti. Il tag <td>...</td> mette a disposizione una vasta gamma di attributi che ne definiscono il comportamento. Tra questi troviamo: colspan= numero_celle L'attributo COLSPAN permette di adattare la larghezza di una cella alla larghezza di numero_celle celle. Per utilizzare in maniera corretta questo attributo è importante capire come il tag TABLE identifica il numero delle colonne della struttura che stiamo cercando di creare. Vediamo un semplice esempio: Titolo1 Titolo2 Titolo3 CellaA CellaB 22/37

23 CellaC CellaD Nella tabella precedente vediamo che il numero delle colonne dipende dalla riga con all'interno il numero più elevato di celle. In questo caso prediamo come punto di riferimento la prima riga composta dai valori Titolo1, Titolo2 e Titolo3. Nella seconda riga notiamo la cella con il contenuto CellaA che deve avere una larghezza pari alle prime due celle della riga di riferimento (quella con il numero più alto di celle). La stessa situazione la troviamo nella terza riga dove la cella CellaD deve essere lunga quanto le ultime due della riga di riferimento. Vediamo come scrivere il relativo codice html: <title>tabella</title> <body> <table> <tr><td>titolo1</td> <td>titolo2</td> <td>titolo3</td></tr> <tr><td colspan= 2 >CellaA</td> <td>cellab</td></tr> <tr><td>cellac</td> <td colspan= 2 >CellaD</td></tr> </table> Notiamo nel presente codice l'utilizzo dell'attributo COLSPAN che permette di definire a quanti blocchi <td>...</td> corrisponde il relativo <td> di riferimento. rowspan= numero_celle Come l'attributo precedente, ma permette di definire quante celle in altezza deve utilizzare la cella desiderata in base alla colonna con più celle. width= valore style= width:valore Questo attributo permette di definire la larghezza della cella. Il valore può essere messo come numero che identifica la larghezza in pixel, oppure come valore percentuale dove verrebbe utilizzata come larghezza la dimensione percentuale relativa all'interno spazio messo a disposizione dalla tabella. height= valore style= height:valore Questo attributo permette di definire l'altezza della riga. Il valore può essere messo come numero che identifica l'altezza in pixel, oppure come valore percentuale dove verrebbe utilizzata come altezza la dimensione percentuale relativa all'interno spazio messo a disposizione dalla tabella. align= allineamento 23/37

24 style= text-align:{left center right} Con questo attributo possiamo definire l'allineamento orizzontale del contenuto della cella. I possibili valori per definire l'allineamento sono center, che centra il contenuto, left che allinea il contenuto a sinistra e right che lo allinea a destra. valign= allineamento style= vertical-align:{top middle bottom} Con questo attributo possiamo definire l'allineamento verticale del contenuto della cella. I possibili valori per definire l'allineamento sono top, che allinea il contenuto in alto, center che centra il contenuto e bottom che lo allinea in basso. bgcolor= {colore valore esadecimale} style= background-color:{colore valore esadecimale} Questo attributo definisce il colore di sfondo (vedi bgcolor) della cella. background= [percorso/]file_immagine style= background-image:url([percorso/]file_immagine) Questo attributo permette di definire un'immagine da utilizzare come sfondo della cella (vedi background del tag body). 24/37

25 Le immagini Le immagini in una pagina web sono di fondamentale importanza, un sito senza immagini sarebbe noioso e privo di ogni tipo di struttura grafica. I formati sicuramente supportati dai web browser sono.jpg ed il.gif, si consiglia quindi di utilizzare uno di questi per le proprie realizzazioni. Per inserire le immagini utilizziamo il tag <img> che non necessita di chiusura. Per utilizzarlo usiamo la seguente forma: <img src= [percorso/]file_immagine /> L'attributo SRC (source) serve per definire la posizione del file immagine che vogliamo presentare all'interno del nostro sito. Se l'immagine non si trova direttamente all'interno della stessa cartella usata per il file html che la contiene possiamo utilizzare../ (andare al livello superiore) ed i nomi delle singole cartelle separate da uno slash (/) per definirne l'esatta posizione. Il tag <img> supporta diversi attributi alcuni dei quali sono: width= larghezza style= width:larghezza Con questo attributo possiamo definire il valore larghezza in pixel (o in percentuale in base alla dimensione originale) che vogliamo utilizzare per la visualizzazione dell'immagine sul sito. Se non viene utilizzato l'attributo height l'altezza verrà adattata proporzionalmente. height= altezza style= height:altezza Con questo attributo possiamo definire il valore altezza in pixel (o in percentuale in base alla dimensione originale) che vogliamo utilizzare per la 25/37

26 visualizzazione dell'immagine sul sito. Se non viene utilizzato l'attributo width la larghezza verrà adattata proporzionalmente. alt= testo Questo attributo è molto importante e non dovrebbe mancare mai all'interno del tag img. Infatti permette di definire un testo che il browser deve visualizzare nel caso in cui non fosse possibile la visualizzazione dell'immagine stessa. title= testo Con questo attributo possiamo definire il testo che deve comparire all'interno dell'etichetta che appare nel web browser quando rimaniamo fermi con il puntatore del mouse sopra l'immagine o se l'immagine, per un qualsiasi motivo, non venisse visualizzata. border= spessore style= border-width:spessore Se il tag <img> viene utilizzato all'interno di un tag di ancoraggio <a>...</a> possiamo utilizzare questo attributo per definire con il valore spessore lo spessore del bordo da visualizzare intorno all'immagine stessa. 26/37

27 Gli elenchi Gli elenchi si dividono in tre categorie: elenchi puntati, elenchi numerati e elenchi di definizioni. <ul>...</ul> Questo tag permette di definire un elenco puntato. I singoli elementi della lista vengono aggiunti con il tag <li>...</li>. <ul> <li>elemento 1</li> <li>elemento 2</li> </ul> <ol>...</ol> Questo tag permette di definire un elenco numerato. I singoli elementi della lista vengono aggiunti con il tag <li>...</li>. <ol> <li>elemento 1</li> <li>elemento 2</li> </ol> <dl>...</dl> Questo tag permette di definire un elenco di definizioni. I titoli di definizione vengono inseriti con il tag <dt>...</dt> mentre i blocchi descrittivi vengono aggiunti con il tag <dd>...</dd>. <dl> <dt>elemento 1</dt> <dd>descrizione 1</dd> <dt>elemento 2</dt> 27/37

28 <dd>descrizione 2</dd> </dl> 28/37

29 Tag per moduli da compilare Il tag principale che permette di definire l'intero contenuto di un modulo è <form>...</form>. Questo tag mette a disposizione vari attributi alcuni dei quali sono: method= {post get} Questo attributo definisce la modalità di trasferimento dei dati inseriti nei componenti del modulo. Il trasferimento può avvenire mediante modalità get oppure post. Il metodo get inserisce i valori da trasferire direttamente dietro la URI della pagina da caricare e quindi è legata ad un determinato limite di lunghezza, mentre post li manda nascosti all'interno degli header della pagina. action= pagina_web Con questo attributo definiamo quale sarà la pagina web alla quale verrà inviato l'intero contenuto del modulo. Per definire un form possiamo quindi scrivere: <title>il mio modulo</title> <body> <form method= post action= prova.php >... </form> 29/37

30 Il tag <input /> Questo tag è un tag particolare senza tag di chiusura che permette di definire diversi tag utilizzati per l'inserimento di dati direttamente dall'utente della pagina web. Questo tag mette a disposizione vari attributi alcuni dei quali sono: type= {text password checkbox radio button submit} Questo attributo è l'attributo più importante perchè ne definisce il comportamento. Utilizziamo text per definire una campo di inserimento testo, password per campi per l'inserimento di parole chiave (quello che viene digitato viene nascosto), checkbox per le caselle che permettono di attivare o disattivare determinate opzioni, radio per creare liste di opzioni all'interno delle quali può essere scelta un'unica opzione, button per creare dei pulsanti e submit per definire il pulsante che verrà utilizzato per l'invio dei dati del modulo. name= nome Questo attributo permette di definire il nome che vogliamo dare al componente presente nel nostro modulo. Il nome viene utilizzato per riconoscere l'appartenenza di un determinato valore trasmesso. In alcuni casi (ad esempio con i componenti radio) il nome deve essere uguale per tutti i componenti dello stesso gruppo. value= valore iniziale Questo attibuto permette di definire il valore iniziale del componente (solo con i componenti text o password) o il valore da utilizzare nel caso in qui venisse scelto il rispettivo componenti (con i componenti radio o checkbox). Utilizziamo VALUE anche per assegnare il testo da utilizzare all'interno di un componente BUTTON oppure SUBMIT. size= lunghezza (solo per input oppure password) Questo parametro permette di definire la lunghezza stimando il numero di caratteri direttamente visualizzabili. maxlength= lunghezza (solo per input oppure password) Con questo attributo definiamo quanto lungo può essere al massimo il testo che viene inserito. checked= checked (solo per checkbox) Questo attributo, senza assegnazione di valori, permette di spuntare l'eventuale componente checkbox di riferimento. selected= selected (solo per radio) Questo attributo, senza assegnazione di valori, permette di attivare il componente presente all'interno di una lista di opzioni radio. I componenti possono essere disposti all'interno di un form con l'utilizzo di una 30/37

31 tabella. Vediamo un semplice esempio: <title>il mio modulo</title> <body> <form name= login method= post action= checklogin.php > <table> <tr><td>nome utente:</td> <td><input type= text name= UID value= nome /></td> </tr> <tr><td>nome utente:</td> <td><input type= password name= PWD /></td> </tr> <tr><td colspan= 2 align= center > <input type= submit value= login /> </td> </tr> </table> </form> Il tag <lable>...</lable> Questo tag viene utilizzato per definire un'etichetta da aggingere ad un input di selezione (ad esempio radio). In questo caso possiamo scegliere una delle opzioni possibili cliccando direttamente sul nome definito per l'input in questione: for= id Questo attributo permette di inserire l'id dell'elemento input per il quale si vuole aggiungere l'etichetta. Il tag <fieldset>...</fieldset> Questo tag viene utilizzato per creare un bordo intorno a degli elementi. All'interno del bordo possiamo inserire un'etichetta che ne definisce il titolo utilizzando il tag <legend>...</legend>. <title>fieldset</title> <body> <fieldset> <legend>titolo</legend> Nome: <input type= text /><br /> Cognome: <input type= text /><br /> </fieldset> 31/37

32 Il tag <textarea>...</textarea> Questo tag viene utilizzato per definire una casella di inserimento testo composto da più righe. Il testo compreso tra i due tag, di apertura e di chiusura, viene visualizzato direttamente all'interno del componente stesso. Tra i vari attributi che questo tag mette a disposizione vediamo quelli più importanti: name= nome Questo attributo permette di definire il nome che vogliamo dare al componente presente nel nostro modulo. Il nome viene utilizzato per riconoscere l'appartenenza di un determinato valore trasmesso. cols= numero_caratteri Questo attributo permette di definire la larghezza del componenti stimando il numero di caratteri che possiamo inserire in una riga. Nel caso in cui si inseriscono più caratteri vediamo apparire la barra di scorrimento orizzontale. rows= numero_righe Questo attributo permette di definire il numero delle righe direttamente visualizzabili all'interno del componente. Nel caso in cui si inserisce un testo più lungo di numero_righe righe appare la barra di scorrimento verticale. Vediamo ora un semplice esempio: <title>il messaggio</title> <body> <form name= messaggio method= post action= invio.php > <table> <tr><td>messaggio:</td> <td><textarea name= testo rows= 30 cols= 5 > Questo testo viene visualizzato! </textarea> </td> </tr> <tr><td colspan= 2 align= center > <input type= submit value= invia > </td> </tr> </table> </form> Il tag <select>...</select> Con questo tag possiamo definire dei menu a tendina. Il tag principale <select> mette a disposizione diversi attributi, ma quello più utilizzato è il seguente: name= nome 32/37

33 Questo attributo permette di definire il nome che vogliamo dare all'intero componente. Il nome viene utilizzato per riconoscere l'appartenenza del valore selezionato. All'interno del tag principale inseriamo una serie di tag <option>...</option> per definire le singole righe di menu del nostro menu a tendina. Alcuni degli attributi che possiamo utilizzare all'interno di questo sono: value= valore Questo attributo permette di definire il valore che viene inviato nel caso in cui questa voce di menu fosse quella attualmente selezionata. selected= selected Questo attributo permette di definire quale delle voci inserite deve essere quella selezionata (quindi visualizzata all'interno del componente menu a tendina chiuso). I vari tag <option>...</option> possono essere raggruppati utilizzando il tag <optgroup>...</optgroup>. All'interno di quest'ultimo possiamo inserire l'attributo label che permette di definire il nome del gruppo. label= nome Questo attributo permette di definire il nome del gruppo all'interno del menu a tendina. Vediamo ora un esempio: <title>menu a tendina</title> <body> <select name= scelta > <optgroup label= gruppo 1 > <option value= 1 >Elemento 1</option> <option value= 2 selected= selected >Elemento 2</option> </optgroup> <optgroup label= gruppo 2 > <option value= 3 >Terza riga</option> </optgroup> </select> 33/37

34 I frame I FRAME venivano utilizzati per suddividere una pagina web in sezioni separate, le quali erano completamente indipendenti l'una dall'altra. I frame sono attualmente deprecati e non si dovrebbero più utilizzare. Manteniamo comunque questa sezione per dare la possibilità di interpretare eventuale codice datato. La suddivisione viene definita utilizzando il tag <frameset>...</frameset> e gli attributi principali rows e cols che definiscono rispettivamente quante righe oppure colonne utilizzare per la visualizzazione della sezione in questione. All'interno di una pagina web utilizzata per definire la struttura di suddivisione di un'intera pagina viene normalmente utilizzato senza blocco <body>... rows= alt_riga_1,alt_riga_2,...,alt_riga_n Questo attributo permette di suddividere l'intero spazio in altezza dedicato al frameset. I valori possono essere espressi in pixel, oppure come valore percentuale in proporzione all'intero spazio dedicato. Possiamo anche utilizzare l'asterisco che permette di definire il restante spazio disponibile. cols= lar_col_1,lar_col_2,...,lar_col_n Questo attributo permette di suddividere l'intero spazio in larghezza dedicato al frameset. I valori possono essere espressi in pixel, oppure come valore percentuale in proporzione all'intero spazio dedicato. Possiamo anche utilizzare l'asterisco che permette di definire il restante spazio disponibile. Ad ogni singola suddivisione va assegnata una rispettiva pagina web da caricare con il tag <frame> che non possiede un tag di chiusura, oppure può essere suddivisa ulteriormente utilizzando un nuovo frameset. Alcuni degli 34/37

35 attributi che possiamo utilizzare all'interno del tag <frame> sono: name= nome Con l'utilizzo di questo attributo è possibile assegnare un nome alla relativa sezione creata. Questo nome può essere utilizzato ad esempio dal tag con il quale si crea dei link <a>...</a> per definire all'interno di quale sezione caricare l'eventuale pagina web collegata (vedi l'attributo target). src= [percorso/]pagina_web Questo attributo ci permette di definire quale pagina web caricare all'interno della sezione definita. Se la pagina che definisce la struttura con frameset non si trova all'interno della stessa cartella delle pagine da caricare possiamo definire l'intero percorso a partire dalla pagina stessa. Per semplificare la comprensione vediamo ora il codice di una pagina web che definisce la seguente struttura: intestazione.html menu.html main.html Vediamo ora la relativa pagina web: <frameset rows= 100,* > <frame name= intestazione src= intestazione.html > <frameset cols= 200,* > <frame name= menu src= menu.html > <frame name= main src= main.html > </frameset> </frameset> Nel primo frameset notiamo la suddivisione dell'altezza con l'attributo rows dove 100 pixel vengono dedicati all'intestazione, mentre il resto (*) viene dedicato al menu e al blocco centrale (main). Nelle righe successive notiamo che i primi 100 pixel vengono dedicati interamente al FRAME chiamato intestazione, mentre il resto viene ulteriormente suddiviso in larghezza mediante l'attributo cols. I 200 pixel di larghezza vengono quindi dedicati al FRAME chiamato menu ed il restante spazio al FRAME chiamato main. 35/37

36 Validare il codice Con l'aggiunta di uno dei seguenti blocchi di codice all'inizio della nostra pagina (quindi prima del tag...) possiamo validare il proprio codice come HTML 4.01 oppure come XHTML 1.0. Il primo blocco definito come strict DTD include tutti gli elementi e attributi che non sono stati deprecati: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Il prossimo codice, invece, definito come transitional DTD include gli elementi ed attributi inclusi dal blocco strict DTD con l'aggiunta degli elementi e degli attributi deprecati: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Il prossimo codice permette di validare la pagina come frameset DTD, ossia come transitional DTD con l'aggiunta degli elementi e degli attributi per i frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " 36/37

37 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " 37/37