I TAG HTML / XHTML Introduzione al webdesign

Transcript

1 I TAG HTML / XHTML Introduzione al webdesign

2 I TAG (X)HTML // STRUTTURA dei TAG 2/15 Una pagina web è sostanzialmente un semplice file di testo con estensione.html o.htm che viene interpretato da un browser (Internet Explorer, Mozilla Firefox, Opera, Netscape, Safari, ecc.) come una pagina web. Il file è scritto secondo una precisa sintassi / struttura che è definita HyperText Markup Language (HTML). Nella versione XHTML la sintassi è simile, ma vengono adottate alcune regole aggiuntive. Si tratta di linguaggi di marcatura: il contenuto testuale visibile della pagina web è marcato ovvero contrassegnato dalle istruzioni (TAG). I tag prevedono un apertura e una chiusura (per esempio <p>... </p> che delimitano una porzione di testo dandole un significatyo semantico (paragrafo, heading, elemnto di lista, ecc.). Nell XHTML i tag che non prevedono aperture e chiusura (per esempio <br> break Row = interruzione di riga) devono contenere apertura e chiusura nel singolo tag (<br> diventa <br />). La struttura dei tag è nidificata (un tag dentro l altro, dentro un altro, ecc.). La struttura base di una pagine è la seguente <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional... (continua) <html xmlns= > <head> <title>titolo della pagina</title> <meta http-equiv= Content-Type content= text/html; charset=iso /> </head> <body> <h1>hi!</h1> <p>hello<br />World</p> </body> </html>

3 I TAG (X)HTML // TAG e ATTRIBUTI 3/13 Alcuni tag posssono prevedere degli attributi che servono a determinare specifici parametri dell elemento costituito dal tag e dal suo contenuto. Per esempio, il seguente tag <img src= foto.jpg width= 18 height= 18 alt= Panorama /> ha come attributi: src, width, height e alt. Gli attributi sono sempre scritti all interno del tag di apertura, sono separati da uno spazio e hanno sempre la sintassi attributo= parametro.

4 I TAG (X)HTML // TITOLO della PAGINA <title> 4/15 <title> (titolo della pagina) Tag molto rilevante (per i motori di ricerca). Si trova nel tag <head> della pagina web: il suo non è un contenuto visibile dall utente nella pagina. <head> <title>titolo della pagina</title> </head> Viene visualizzato nella barra della finestra del browser, come nome del bookmark, e come titolo del record nella lista di risultati di un motore di ricerca..

5 I TAG (X)HTML // <p> + <br> 5/15 <p> (paragrafo) e <br /> (break row / interruzione di riga) Per mandare a capo il contenuto testuale incluso in una pagina html, è necessario indicare l interruzione attraverso un marcatore. Il tag <p> separa due porzioni di testo che vengono identificate come blocchi distinti (paragrafi: possono avere diversi attributi). Prevede sempre apertura <p> e chiusura </p> <body> <p align= left >Testo del primo paragrafo</p> <p align= right >Testo del secondo paragrafo</p> </body> Di default, tra un paragrafo e l altro, viene imposta una riga vuota (a capo di due righe). Il tag <br /> serve a mandare a capo il testo di una riga, senza definire un nuovo paragrafo. Tra le due porzioni di testo non possono essere definiti diversi attributi. <body> <p align= left >Prima riga del primo paragrafo.<br /> Seconda riga del primo paragrafo</p> <p align= right >Testo del secondo paragrafo</p> </body>

6 I TAG (X)HTML // HEADING <h1>, <h2>,... 6/15 <h1>, <h2>, <h3>, <h4>,... (heading) Si possono definire come dei paragrafi speciali che hanno un ordine gerarchico di importanza semantica. Il contenuto di <h1> è più rilevante del contenuto di <h2> e così via. <p> ha rilevanza inferiore a tutti gli <h_>. <body> <h1>la mia prima pagina web</h1> <h2>un semplice esperimento</h2> <p>il testo della pagina in un paragrafo</p> </body> <h1> andrebbe usato una sola volta per pagina <h2>, <h3>, ecc. possono essere ripetuti più volte nella pagina

7 I TAG (X)HTML // LISTE <ul> / <ol> + <li> 7/15 <ul> (unordered list), <ol> (ordered list) e <li> (list item) Le liste sono porzioni di testo di una pagina html strutturate in una serie di elementi (list item). La struttura è costituita dal tag lista (<ul> o <ol>) che contiene uno o più tag elemento (<li>) <ul> <li>primo elemento della lista</li> <li>altro elemento</li> <li>ultimo elemento</li> </ul> <ol> <li>primo elemento della lista</li> <li>altro elemento</li> <li>ultimo elemento</li> </ol> Le liste possono essere nidificate <ul> <li>primo elemento della lista</li> <li>secondo elemento (con sottolista) <ul> <li>primo elemento della sottolista</li> <li>altro elemento della sottolista</li> <li>ultimo elemento della sottolista</li> </ul> </li> <li>ultimo elemento</li> </ul>

8 I TAG (X)HTML // LINK <a href= file > 8/15 I link contenuti in una pagina HTML possono puntare a: - pagina HTML > aperta ed interpretata dal browser; - file immagine (.GIF o.jpg) > visualizzata dal browser; - documenti di testo (.TXT,.RTF,.DOC) o Acrobat (.PDF) > aperti ed interpretati (browser abilitati) o scaricati e salvati in locale; - file generico > scaricato e salvato in locale; - > apertura del client di posta predefinito sul pc locale I link possono essere di tre tipi: 1) relativi > il percorso del file puntato fa riferimento alla posizione del file che contiene il link xes: Esci, gira a sinistra, in fondo alla strada gira a destra. <a href=../folder/file.htm >testo linkato</a> 2) assoluti > il percorso del file puntato è indicato con l URL completo, indipendentemente dalla posizione del file che contiene il link xes: Italia, Milano, viale Pirelli n.18, 4 piano, aula U6-09 <a href= >testo linkato</a> Anche il link ad un alias è un link assoluto: <a href= mailto:alias@dominio.it >testo linkato</a> 3) interni > il link punta ad una particolare posizione interna alla pagina html stessa in cui è contenuto il link. <a href= #obiettivo >testo linkato</a> nel codice, dovrà essere presente l àncora (destinazione del link) <a name= obiettivo id= obiettivo ></a>

9 I TAG (X)HTML // IMMAGINI <img src= file > 9/15 <img src=... /> Immagini inserite nelle pagine web Il tag <img /> serve a caricare un file grafico esterno al documento XHTML e collocarlo all interno del flusso di contenuti della pagina web. I formati grafici utilizzabili per le immagini caricate nelle pagine web sono: GIF e JPG (ne esistono altri). Il tag <img /> include apertura e chiusura in un unico marcatore. Il tag <img /> prevede sempre degli attributi per fuzionare. <img src=../cartella/immagine.gif width= 20 height= 70 alt= Logo aziendale /> src (obbligatorio): specifica un file grafico da caricare. Funziona come un link: specifica il percorso relativo o assoluto per caricare un dato file grafico (gif o jpg). width e height (opzionali): impongono larghezza e altezza di visualizzazione (usare immagini correttamente dimensionate) alt (x accessibilità): attribuisce una descrizione alternativa all immagine, usata da browser vocali o in caso di mancato caricamento del file

10 I TAG (X)HTML // TABELLE <table> 10/15 <table>,, <td> Le tabelle Per strutturare dati tabellari in una pagina web, si usano essenzialmente tre tag nidificati: <table> definisce una tabella definisce una riga della tabella (deve essere inserito in <table>) <td> definisce un dato tabellare (cella di una riga, deve essere contenuto in un ) Le tabelle: struttura nidificata di <table>,, <td> <table border= 1 > <td>a1</td> <td>a2</td> <td>a3</td> <td>b1</td> <td>b2</td> <td>b3</td> <td>c1</td> <td>c2</td> <td>c3</td> </table>

11 I TAG (X)HTML // TABELLE <table> 11/15 Le tabelle, raggruppamento TD: attributo colspan=... Nota: nella TR i TD relativi a B2 e B3 sono incorporati nel COLSPAN Le tabelle, raggruppamento TD: attributo rowpan=... Nota: nella TR manca il TD relativo a C2 in quanto già incorporato nel ROWSPAN <table border= 1 > <td>a1</td> <td>a2</td> <td>a3</td> <td>b1</td> <td colspan= 2 >B2+B3</td> <td>c1</td> <td>c2</td> <td>c3</td> </table> <table border= 1 > <td>a1</td> <td>a2</td> <td>a3</td> <td>b1</td> <td rowspan= 2 >B2+C2</td> <td>b3</td> <td>c1</td> <td>c3</td> </table>

12 I TAG (X)HTML // TABELLE <table> 12/15 Le tabelle, raggruppamento TD : attributo colspan e rowspan usati per raggruppare celle di diverse righe e colonne <table border= 1 > <td>a1</td> <td>a2</td> <td>a3</td> <td>b1</td> <td colspan= 2 rowspan= 2 >B2+B3+C2+C3</td> <td>c1</td> </table> Nota: le TR rimangono sempre invariate. I TD relativi a B2 e B3 e quelli relativi a C2 e C3 non ci sono, in quanto incorporati nel COLSPAN e ROWSPAN dichiarati con il TD della seconda riga.

13 I TAG (X)HTML // ENFASI e altri TAG 13/15 <strong>...</strong> rende il testo racchiuso in grassetto, attribuento un valore semantico. Sostituisce il vecchio <b> che attribuiva solo un valore visivo (grassetto). <em>...</em> rende il testo racchiuso in corsivo, attribuento un valore semantico. Sostituisce il vecchio <i> che attribuiva solo un valore visivo. <blockquote>...</blockquote> per definire citazioni. Può contenere l attributo title. <acronym>...</acronym> con l attributo title, ha la funzionalità semantica di aggiungere il significato esteso di un acronimo; <abbr>...</abbr> idem, ma viene usato per le abbreviazioni; <address>...</address> racchiude dati relativi ad un indirizzo; <code>...</code> per racchiudere porzioni di codice; <dfn>...</dfn> per racchiudere definizioni. <form>...</form> insieme ad altri tag specifici, può essere agganciato a un applicazione per consentire all utente di inviare input <span>...</span> marcatore privo di valore semantico. In XHTML serve ad identificare una porzione di testo in linea da trattare con una particolare resa visiva determinata con regole CSS*. In genere viene usato per marcare piccole porzioni di testo. <div>...</div> marcatore privo di valore semantico. Identifica un blocco di altri tag da impostare visivamente secondo un particolare stile determinato tramite i CSS*. A differenza di <span> (elemento in linea) è un blocco: si posiziona sotto il tag precedente e sopra quello successivo e se non diversamente specificato si allarga per tutta la larghezza resa disponibile dal suo tag contenitore (se posizionato nel <body> si allarga per tutta la larghezza della pagina. * CSS: set di regole per il trattamento visivo dei tag html.

14 I TAG (X)HTML // META TAG 14/13 Un file HTML è costituito di due tag principali: il tag <HEAD> ed il tag <BODY>. Nel tag <BODY> sono contenute le informazioni che vengono interpretate e visualizzate dal browser dell utente. Nel tag <HEAD> sono contenute informazioni che non vengono visualizzate nella finestra del browser, ma che sono molto importanti per la sua corretta interpretazione. Tra queste informazioni ci sono: <!DOCTYPE... > che definisce il tipo di documento che il browser deve interpretare (dichiara linguaggio, sintassi, ecc.; <TITLE>...</TITLE> che definisce il titolo della pagina che sarà visualizzato nella barra della finestra del browser e come link alla pagina nelle liste di risultati di ricerche effettuate per esempio con Google; e una serie di tag chiamati metatag, che forniscono informazioni metatestuali sui contenuti della pagine e, se correttamente impostati, aumentano il valore semantico della pagina relativamente ad alcune parole. In particolare: DESCRIPTION <meta name= description content= Laboratorio di comunicazi... /> include una descrizione, meglio se breve che viene interpretata dal motore di ricerca per stimare il peso semantico della pagina in relazione alle parole effettivamente contenute nel teso della pagina stessa. Spesso viene visualizzato nelle liste di risultati di una ricerca subito dopo il link alla pagina. KEYWORDS <meta name= keywords content= comunicazione visiva, bicocca,... /> elenca una serie di parole chiave che vengono confrontate con i contenuti della pagina e contribuiscono a determinare il valore (posizionamento) della pagina nei risultati di un motore di ricerca.

15 I TAG (X)HTML // COMMENTI AL CODICE 15/15 Nella compilazione del codice, anche se assistita da un compilatore WYSIWYG (What You See Is What You Get) come Dreamweaver, è utile partizionare il codice con opportuni commenti che consentono di capire dove finisce un blocco di istruzini specifiche (per esempio quelle che definiscono l intestazione grafica della pagina) da un altro blocco con diversa funzione (per esempio quelle che definiscono il menu di navigazione). In questo modo si semplifica il lavoro di manutenzione quando si riprende un file costruito precedentemente, ma soprattutto è possibil analizzare il codice a blocchi in caso di errori o problemi di visualizzazione. In HTML e XHTML per inserire un commento testuale nel codice è sufficiente racchiuderlo nei tag  <h1>labaoratorio di comunicazione visiva</h1>  <ul> <li><a href= home.html >Home page</a></li> <li><a href= chisiamo.html >Chi siamo</a></li>...