H T M L. Mariachiara Pezzotti

Transcript

1 H T M L Mariachiara Pezzotti

2 che cos'è l'html è un linguaggio usato per descrivere i documenti ipertestuali disponibili su Internet. Non è un linguaggio di programmazione, ma un linguaggio di markup, ossia descrive il contenuto, testuale e non, di una pagina web. 1 documeni ipertestuali I documenti ipertestuali sono testi, immagini, filmati fruibili grazia ad dispositivi elettronici. A differenza di un testo normale, gli ipertesti possono essere letti in maniera non sequenziale attraverso una rete di collegamenti detti Hyperlink. Linguaggio di markup Il termine markup indicava un tempo le annotazioni su bozze tipografiche, contenenti indicazioni per i dattilografi. Analogamente il Linguaggio HTML è costituito da una serie di etichette, denominate TAG, che consentono di indicare per ciascun elemento del testo la sua funzione all'interno del documento. Metaforicamente, possiamo pensare di apporre un etichetta su ogni oggetto che ci circonda (sedia --> etichetta sedia), come se dovessimo indicare ad una persona che non conosce il modo con cui vengono chiamati gli oggetti, di capire di che cosa si sta parlando. Così funziona anche per un testo, il cui titolo, avrà un'etichetta titolo, un paragrafo un'etichetta paragrafo, un'immagine un'etichetta immagine e via dicendo. Che cos'è un browser Le pagine HTML vengono interpretate da programmi denominati Browser, che comprendono i diversi tag,fanno sì che il documento venga visualizzato in maniera corretta e rendono possibile la navigazione tramite hyperlink. Oggi sul mercato esistono diversi browser. Come mostra il grafico, il più diffuso è IE (Internet Explorer di Microsoft), a seguire Firefox di Mozzilla. Purtroppo ciascun browser interpreta determinate proprietà del linguaggio HTML in maniera differente. Un buon sviluppatore web deve tenere conto della visualizzazione su buona parte dei browser, e possibilmente le pagine prodotte devono essere consultabili anche su browser completamente testuali (lynx). Evoluzioni e standard Il linguaggio HTML ha subito nel tempo numerose evoluzioni. L'ultima versione 4.01 è stata rilasciata dal W3C nel Molto probabilmente, in futuro, tale linguaggio verrà sostituito dall'xml e dall'xhtml. Tuttavia è basilare conoscere HTML per avere una base solida di conoscenze e comprendere questi due nuovi linguaggi di markup. Come scrivere l'html. I file HTML hanno un'estensione.htm o.html. Essi possono essere redatti con un qualsiasi editor di testo, anche il notepad. Esistono però diversi tool: sia per facilitare la scrittura dello svluppatore web, con sistemi di autocompletamento dei tag, colorazione del codice etcc. Sia editor visuali che generano automaticamente il codice html. 1 Fonte:

3 Guide disponibili Vi è un'enorme scelta sia di libri sia di siti che mettono a disposizione guide fruibili gratuitamente. In particolare La struttura dei Tag ogni etichetta ha la seguente struttura: tag di apertura <nometag> tag di chiusura </nometag> ESEMPIO: in tag <h1> indica il titolo di un documento: <h1>titolo del documento </h1> Esistono poi tag autochiusi, che hanno la seguente struttura: <nometag /> ESEMPIO: il tag <br/>serve per il ritorno a capo del testo. Alcuni tag possono necessitano di una serie di attributi. La struttura dell'attributo è: NomeAttributo= valore ESEMPIO: il tag Img serve per inserire nel documento un'immagine. L'attributo src indica il percorso del file della stessa. <img src= immagine.jpg /> I commenti Per inserire all'interno di un documento html un commento, visualizzabile solo dallo sviluppatore, ma che non viene interpretati dai browser, si usa la seguente struttura: <!-- testo del commento --> annidiamenti e indentazioni Spesso è necessario annidiare i tag uno dentro l'altro, ovvero si apre un tag e al suo interno (come suo contenuto) si apre un altro tag, e via dicendo. <tag1> <tag2>... </tag2> </tag1> ATTENZIONE: è necessario fare attenzione alla precedenza delle chiusure dei tag, l'ultimo aperto deve essere il primo ad essere chiuso, e così via. Ogni volte che si annida un tag dentro un altro è buona norma usare delle regole di indentazione. indentare del codice significa porre prima di ogni blocco annidato una o più tabulazioni, a seconda del livello di indentazione. Le indentazioni non hanno alcun effetto sulla resa finale del codice interpretato dal browser, ma hanno lo scopo di rendere leggibile a colpo d'occhio il codice allo sviluppatore.

4 case sensitive o unsensitive? L'HTML è case unsensitive, ciò significa che il testo dei tag può essere scritto indifferentemente in lettere maiuscole o minuscole. ESEMPI: <tag1>ciao Mondo!</tag1> <TAG1>Ciao Mondo!</TAG1> <tag1>ciao Mondo!</Tag1> funzionano allo stesso modo. Diversamente l'xhtml è case sensitive, ovvero riconosce come diverse lettere maiuscole e minuscole. Di norma quindi è meglio adottare la convenzione di scrivere tutto in minuscolo. La struttra di un documento HTML Ogni documento HTML sarà strutturato nella seguente maniera: si apre il tag <html>, che conterrà tutto il codice e verrà chiuso alla fine del documento. Il tag <head>, letteralmente testa, che contiene a sua volta tag relativi a informazioni non visualizzabili, ma che indicano come la pagina deve essere interpretata, o informazioni complementari, come il titolo della pagina (quello che viene visualizzato sulla barra del titolo del browser). Il tag <body>, che contiene i tag di formattazione del reale contenuto della pagina. <html> <head> </head> <body> </body> </html>......

5 HEAD: elementi essenziali Questa è la parte di codice relativa all'head del portare Le parti fondamentali dell'head sono costitute da: TAG <title>: <title>alice Oggi</title> Il testo compreso fra l'apertura e la chiusura del tag è visualizzato sulla barra del titolo del browser. TAG <meta> I tag meta sono tag HTML necessari e a definire informazioni aggiuntive, solitamente per i browser, del documento ipertestuale stesso. Quanti e quali meta tag inserire nel documento dipende dalle necessità dello

6 sviluppatore. Di quelli elencati nell'esempio è importante sottolineare: <meta http-equiv="content-type" content="text/html; charset=iso "> In questo modo viene definito il charset (il set di caratteri da usare per interpretare il contenuto del documento) di riferimento. TAG <link> Sono necessari per aggiungere i fogli di stile o altri elementi grafici (come le icone). Verranno trattati in dettaglio in seguito.

7 BODY: elementi essenziali Separazione fra struttura, contenuto e formattazione L'XHTML ha come presupposto la separazionedi tutti gli elementi di formattazione del testo (colore, font, margini e tutte quelle proprietà relative all'aspetto visuale del testo) da quelli di contenuto. Per questo motivo gli attributi dei tag relativi alla formattazione sono stati definiti come Deprecati (disapprovato). Questo non significa che non vengono interpretati dai browser, ma che per scrivere un codice rigoroso sono da evitare. Tutta la parte di formattazione viene inserita attraverso i fogli di stile (CSS). Colori In HTML i colori sono identificati da un codice esadecimale (RGB). Ecco una tabella con i codici dei colori fondamentali. Elementi di blocco Sono sostanzialmente gli elementi che costituiscono un blocco attorno a sé, e che di conseguenza vanno a capo, come i paragrafi, le tabelle, le form. Elementi inline Sono gli elementi che non andando a capo - possono essere integrati nel testo, come i collegamenti o le immagini Intestazioni Esistono 6 livelli possibili di intestazioni: da H1, a H6, dove H1 è il più importante (generalmente il titolo del documento), e H6 il sottotitolo meno importante. Ovviamente non è necessario usarli tutti! <h1>titolo del documento</h1> <h2>sottotitolo 1</h2> L'utilizzo del livello di gerarchia è stabilito in base alla strutturazione logica del documento. Paragrafi Il tag per creare un paragrafo di testo è il tag P (di tipo block). Non può contenere al suo interno altri elementi di tipo block. Per tanto non è possibile annidare un P dentro l'altro. Di default il tag P lascia un'interlinea tra un paragrafo e l'altro (se si vogliono impostare delle spaziature diverse, si possono definire misure specifiche nel CSS). E' inoltre buona norma non utilizzare i paragrafi senza contenuto (lasciare il taf vuoto).

8 <p> questo è il testo del paragrafo! Interruzione forzata di riga: BR All'interno di un paragrafo può essere necessario mandare il testo a capo con un'interlinea singola. Si realizza con il tag BR. <p> questo è il testo del paragrafo!<br/> questo è testo del paragrafo, a capo! E' bene ricordarsi la chiusura del tag br. ATTENZIONE: la formattazione del testo all'interno del codice, non ha attienza con l'effettiva visualizzazione del browser. Ad esempio il codice: <p> Questo è il testo! Questo è il testo! Verrà visualizzato dal browser in questo modo: Per mandare il testo a capo, è necessario usare il br. <p> Questo è il testo!<br/> Questo è il testo!

9 Altri TAG per il testo <em>: Denota enfasi del contenuto. In genere dai browser viene visualizzato come corsivo. <p> Ognuno sta <em>solo</em> sul cuor della terra <strong>: Denota un'enfasi più forte rispetto al tag em, e in genere dai browser viene visualizzato in grassetto. <p> Ognuno sta <strong>solo</strong> sul cuor della terra <acronym>: Denota un acronimo (es., WAC, C.A.P., etc...) Indica la spiegazione estesa dell'acronimo: ESEMPIO: <p> E' bene tenere presente le linee guida del <acronym title="web Accessibility Initiative">WAI</acronym>. Gli acronimi estesi vengono visualizzati dal browser, al passaggio del mouse, in questo modo:

10 I collegamenti I collegamenti, noti anche come puntatori o semplicemente come link, si realizzano attraverso il tag <a>. Un link ha la funzione di rimandare un parte di testo, o un'immagine, ad un altro documento ipertestuale dislocato altrove. Affinchè il collegamento funzioni, è necessario usare l'attributo: href= indirizzo della pagina di destinazione La parte di testo, o l'immagine compresa tra l'apertura e la chiusura del tag a sarà l'oggetto del link, e quando l'utente vi clicca sopra, il browser aprirà l'indirizzo della pagina di destinazione. Ad esempio: <p> nel mondo di internet esistono diversi motori di ricerca, il più famoso è <a href= >google</a>. Ogni borwser identifica i link in modo proprio, in genere colorati di blu e sottolineati. E' possibile modificare queste impostazioni in diversi modi, più avanti vedremo come farlo con i fogli di stile. I collegamenti sono la vera innovazione che ha permesso ai documenti ipertestuali di diffondersi. Essi sono lo strumento attraverso il quale si realizza la navigazione all'interno di un sito web. Ad esempio mettiamo il caso di avere due pagine.htm situate nella medesima cartella, rispettivamente: home.htm guida.htm per creare un link dalla prima alla seconda: <p> Benvenuto nel sito realtivo alla documentazione di HTML.<br/> Se vuoi vedere la guida <a href= guida.htm >clicca qui</a>. [Se il file guida fosse stato salvato in una cartella diversa da quella del file home.htm sarebbe stato necessario specificare nel link il percorso del file.] mailto Per inserire un link ad un indirizzo di posta si usa la seguente sintassi: <a href= mailto:info@prova.it >Scrivimi!</a> si fa precedere l'indirizzo mail, nell'attributo href, dal suffisso mailto. Cliccandovi sopra si aprirà il client di posta predefinito.

11 Le immagini Per inserire delle immagini all'interno di un documento ipertestuale si utilizza il tag <img>. Questo tag è autochiuso e necessita dell'attributo: src= percorso/nomeimmagine.jpg Se vogliamo inserire l'immagine dal nome mucca.jpg, si procederà nel seguente modo: <img src= mucca.jpg /> E' NECESSARIO inoltre inserire un ulteriore attributo: alt= Breve descrizione dell'immgine Questo attributo consente a Browser testuali o a strumenti di fruizione della pagina web per utenti diversamente abili (ad esempio uno screen-reader per i non vedenti) di poter comprendere il significato del contenuto dell'immagine pur non potendola vedere. Correggiamo quindi l'esempio precedente: <img src= mucca.jpg alt= Una mucca arancio! /> NB: il tag img NON ha il tag di chiusura <img src= mucca.jpg alt= Una mucca arancio! /></img> E' UN ERRORE!!!! NB2: è possibile fare in modo che un'immagine sia cliccabile come un link: <a href=" src="bottone.jpg" alt="clicca Qui"/></a>

12

13 Liste Attraverso le liste è possibile creare una serie di elenchi puntati o numerati. Elenchi puntati. Per realizzare un elenco puntato, ovvero una lista di elementi che abbiamo ad inizio riga un simbolo detto bullett o punto elenco. Ad esempio possiamo pensare ad un elenco di ingredienti: 100 gr di farina 50 gr di burro 100 gr di zucchero Per realizzare un testo simile si usano due tag distinti: <ul>: <li>: indica l'inizio di un elenco puntato. Necessita del tag di chiusura alla fine della lista. Al suo interno verranno annidati una serie di tag <li>. indica l'elemento di lista, necessita della chiusura e contiene il testo di un elemento Il codice dell'esempio precedente sarà: <ul> <li> 100 gr di farina </li> <li>50 gr di burro</li> <li>100 gr di zucchero</li> </ul> Elenchi numerati Sono elenchi che indicano una serie numerata di elementi. Ad esempio una serie di nomi: 1. Mario Rossi 2. Giulio Bianchi 3. Marta Verdi Per realizzare un testo simile si usano due tag distinti: <ol>: indica l'inizio di un elenco numerato. Necessita del tag di chiusura alla fine della lista. Al suo interno verranno annidati una serie di tag <li>. <li>: indica l'elemento di lista, necessita della chiusura e contiene il testo di un elemento Quindi, il codice dell'esempio sara; <ol> <li>mario Rossi</li> <li>giulio Bianchi</li> <li>marta Verdi</li> </ol>

14 Come realizzare una tabella. Realizzare una tabella in HTML è un processo macchinoso e per realizzarlo è necessario comprendere la logica con la quale è stato pensato. Una tabella viene considerata come una serie di righe. A loro volta ciascuna riga può essere considerata come una serie di colonne una. In questo modo vengono costruite le varie celle. <table>: che indica da quel punto in poi inizia il codice relativo ad una tabella. Necessita del tag di chiusura </table> che andrà posizionato alla fine del codice relativo alla tabella. All'interno di <table> andranno annidati i tag relativi alla costituzione delle righe e delle colonne. Attributi più importanti: width= valore Indica la larghezza della tabella, il valore può essere espresso in pixel o in percentuale. Se non è specificato la tabella assumerà la larghezza minima adatta al suo contenuto. [può essere impostata anche tramite i CSS] border= valore_px indica il valore dello spessore del bordo delle celle. Se non è specificato assume valore 0. Deve essere espresso in px. [può essere impostata anche tramite i CSS] bordercolor= #ffffff indica il colore del bordo delle celle. [può essere impostata anche tramite i CSS] cellspacing= valore cellpadding= valore indica quanto spazio lasciare dal bordo al contenuto delle celle, in particolare 2 : : indica l'aggiunta di una riga. Il tag di chiusura non è necessario, ma è preferibile metterlo per rendere il codice più leggibile. Tra il tag di apertura e quello di chiusura, andranno 2 Fonte:

15 <td>: annidati i tag relativi alle colonne. indica la suddivisione della riga in una cella. Il tag di chiusura </td> è facoltativo, ma è bene metterlo per rendere più leggibile il codice. Tra il tag di apertura e quello di chiusura andrà inserito il contenuto della cella. Ad esempio pensiamo di dover costruire una tabella di 3 righe e 4 colonne. Iniziamo con l'utilizzare il tag <table> <table width="50%" border="1" > <td>riga 1 colonna 1</td> <td>riga 1 colonna 2</td> <td>riga 1 colonna 3</td> <td>riga 1 colonna 4</td> <td>riga 2 colonna 1</td> <td>riga 2 colonna 2</td> <td>riga 2 colonna 3</td> <td>riga 2 colonna 4</td> <td>riga 3 colonna 1</td> <td>riga 3 colonna 2</td> <td>riga 3 colonna 3</td> <td>riga 3 colonna 4</td> </table> E' possibile avere la necessità di creare tabelle particolari la cui struttura necessita dell'unione di più celle. Ad esempio 3 : Per effettuare le unioni di cella si utilizzano due attributi del tag <td>: 3 Fonte:

16 colspan= valore è necessario per unire due celle in senso orizzontale (due colonne), e il suo valore indica per quante celle (a destra) si estende il valore della cella sulla quale è settato il colspan. Di default il valore è 1 (si estende su 1 sola cella), se viene settato a 0, automaticamente la cella si estende su tutte le cella della riga. Ad esempio, per realizzare la tabella della figura 4, il codice sarà il seguente: <table border="1"> <td>1 </td> <td>2 </td> <td>3</td> <td colspan="2">4 </td> <td>6</td> <td>7 </td> <td>8 </td> <td>9 </td> </table> rowspan= valore è necessario per unire due celle in senso verticale (due righe), e il suo valore indica per quante celle (verso il basso)si estende il valore della cella sulla quale è stato settato il rowspan. Ad esempio, per realizzare la tabella della figura 5, il codice sarà il seguente: 4 Fonte: 5 Fonte:

17 <table border="1"> <td>1 </td> <td rowspan="2">2 </td> <td>3</td> <td >4 </td> <td>6</td> <td>7 </td> <td>8 </td> <td>9 </td> </table> ATTENZIONE: definire i <td> delle celle che vengono sovrapposte è un errore!!! <table border="1"> <td>1 </td> <td>2 </td> <td>3</td> <td colspan="2">4 </td> <td>5</td> <td>6</td> <td>7 </td> <td>8 </td> <td>9 </td> </table> Viene visualizzato nel browser in questo modo: