docLezione 3
download 
Reclamo Transcript
Lezione 3
Lezione 3 Cosa vedremo Come si aggiunge struttura a un testo con HTML I tag di base e i loro attributi Progettazione di siti web a.a. 2015/16 HTML per cominciare Maria Simi Febbraio, 2016 Tag per il testo Inserire link Inserire immagini Tabelle Tag buoni, tag deprecati, tag obsoleti Documenti (X)HTML5 Validazione o controllo di conformità [Learning web design, design, Niederst, cap. 4-9] Editori HTML Editori HTML Sono editori di testo (evitare "rich text") Ci aiutano a scrivere HTML corretto Suggerimenti sui tag, evidenziazione della sintassi Quali strumenti Windows: NotePad++, Emacs (HTML mode) Mac: TextEdit (in Text mode), BBEdit, Emacs Pagina strumenti su Moodle I tag HTML Un linguaggio formale di marcatura (markup (markup)) Le marche HTML (d'ora in poi tag tag)) sono direttive che i browser interpretano contenitori per porzioni di documento: gli elementi HTML Uso dei tag HTML si aprono con <nome elemento> elemento> si chiudono con </ </nome nome elemento> elemento> <p>Paragrafo Paragrafo di testo</p> <p> testo</p> 1 Lezione 3 HTML: attributi I tag possono avere attributi che compaiono nel tag di apertura (in viola), con relativo valore (in verde): id= ="es1" "es1"> >Esempio Esempio</a> </a> <a href= href="esempio.html" id <p class= class="right"> "right">Paragrafo allineato a destra</p> destra</p> L'attributo class ha come valore "right" Gli attributi non compaiono mai nei tag di chiusura Quale versione di HTML Sintassi XML Un parser XML è molto meno tollerante di un interprete HTML I browser fanno del loro meglio nell’interpretare documenti HTML anche in presenza di una sintassi "zoppicante" Ad un documento XHTML si richiede di essere formalmente corretto e di seguire delle regole sintattiche molto più rigide XHTML1.0 è un variante di HTML che rispetta le regole di XML HTML5 è la nuova versione di HTML che non segue XML Useremo un versione "pulita" di HTML5: (X)HTML5 XHTML: regole per i tag XHTML: regole per gli attributi i tag sono scritti in minuscolo nome dell'attributo minuscolo tutti i tag si aprono e si chiudono si possono usare solo gli attributi previsti per un certo tag; l'ordine non conta gli elementi vuoti (quelli che non hanno contenuti) vanno comunque chiusi, così: <br /> che è come <br></br> annidamento corretto dei tag (si chiudono in ordine inverso a quello in cui si aprono) /i></b b></ ></p p> SI <p><b><i> Esempio </i></ /b></i i></ ></p p> NO <p><b><i> Esempio </b></ restrizioni di annidamento specifiche: a esempio un p non può stare dentro un altro p. Documento (X)HTML valido o conforme Documento XHTML valido Rispetta le regole sintattiche generali di XML (ben formato) Documento ben formato che è conforme alle specifiche del linguaggio Un validatore XHTML controlla la sintassi XML e la conformità rispetto alle specifiche Documento HTML conforme Usa un linguaggio conforme alle specifiche I validatori HTML5 sono in realtà controllori di conformità (HTML5 Conformance Checker) rigorosamente nella forma: attributo = "valore" gli attributi hanno sempre un valore (non minimizzati) checked= ="checked" checked virgolette singole o doppie intorno al valore (si raccomanda un uso coerente) Virgolette normali (codice ASCII): evitare caratteri speciali usati per virgolette di apertura e chiusura … usare un editore di testo e non di testo arricchito! Informazioni ignorate dai browser Interruzioni di linea nel file HTML non servono per andare a capo, sono come spazi TAB e spazi multipli <p> multipli: non servono per inserire più righe bianche Tag e attributi non previsti vengono ignorati ma creano problemi di validazione I commenti si inseriscono così ... <!-- Commento nel file HTML --> È comunque una buona pratica seguire la sintassi XML 2 Lezione 3 Struttura minima del documento <html> <head> <title>Il Il titolo del documento</title> <title> documento</title> </head> <body> ... Il corpo del documento: contiene tutto ciò che il browser visualizzerà ... </body> </html> 1. Scrivere questo con un editore di testo 2. Salvarlo con estensione html 3. Visualizzarlo con il browser Esempio browser Esempio 1 Tre varianti di XHTML 1.0 Tre DTD (Document Type Definition) che definiscono linguaggi XHTML diversi: STRICT:: il più restrittivo. Esclude tag e attributi deprecati STRICT TRANSITIONAL:: di transizione, consente anche i tag in via di estinzione TRANSITIONAL per tenere conto dei vecchi browser FRAMESET:: come TRANSITIONAL ma consente anche l'uso dei frame. FRAMESET :-Q Validazione Per la validazione: http://validator.w3.org Motivi per farlo per catturare errori aiutare il browser a interpretare correttamente il documento aumentare la compatibilità passare l'esame :-) Perché passi la validazione devono essere presenti: il DOCTYPE: ci dice qual è il linguaggio usato tag meta charset charset:: ci dice la codifica dei caratteri utilizzata Il validatore si comporterà in maniera diversa a seconda del DOCTYPE Dichiarazione DOCTYPE Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Documento HTML5 minimo validabile <!DOCTYPE html> <html> <head> <title>Il Il titolo del documento</title> <title> documento</title> charset= ="UTF-8" /> <meta charset </head> <body> <p>Il Il corpo del documento: contiene tutto ciò <p> che il browser visualizzerà</p> visualizzerà</p> </body> </html> Tag buoni e meno buoni Separazione stile-contenuto HTML per la struttura del testo CSS per lo stile Tag strutturali o semantici: buoni = :-) Tag di presentazione o stilistici o proprietari: deprecati = :-Q Distinzione da puristi ma tanto vale abituarsi: HTML5 fa pulizia. Esempio 1 (HTML5 validabile) Considera obsoleti i tag deprecati Introduce nuovi tag semantici 3 Lezione 3 Tag strutturali e semantici Body Titoli, Paragrafi Tutti gli elementi visibili stanno dentro body Citazioni, indirizzi, testo preformattato Attributi leciti di body (e di ogni altro tag): Abbreviazioni, variabili Enfasi ed evidenza Liste I collegamenti ipertestuali Le immagini Le tabelle Intestazioni Intestazioni di diverso livello (fino a 6) h1> >Un titolo di primo livello Un titolo di primo livello</ </h1 h1> > <h1 h2> >Un titolo di secondo livello Un titolo di secondo livello</ </h2 h2> > <h2 h3> >Un titolo di terzo livello Un titolo di terzo livello</ </h3 h3> > <h3 h2> >Un altro titolo di secondo livello Un altro titolo di secondo livello</ </h2 h2> > <h2 Attributi leciti id, class, style, title Attributi deprecati align = center | right | left left :-Q id, class, style … servono per i CSS e gli script title … per usabilità Tutti gli altri tag sono deprecati: <body text= text=“black” link= link=“blue” bgcolor= bgcolor=“white”> “white”> :-Q font= =“arial” “arial”> > <body font :-Q Paragrafi Questo è un primo paragrafo di testo</ </p p> <p>Questo è un primo paragrafo di testo <p>Questo è un secondo paragrafo di testo un po’ più lungo del primo</ </p p> un po’ più lungo del primo Un paragrafo non può contenerne un altro Attributi id, class, style, title left :-Q align = center | right | left Nota: non usare Hx per la grandezza del carattere Citazioni, indirizzi, testo preformattato Abbreviazioni, variabili, enfasi … Citazioni: blockquote, q, cite, address Si usano dentro i testi acronym è obsoleto, sostituito da abbr blockquote> > <blockquote < <p>Il miglior modo di prevedere il futuro è quello di inventarlo</ </p p> quello di inventarlo </blockquote blockquote> > </ address> >Alan Key, U.S.A. Alan Key, U.S.A.</ </address address> > <address <p> cite> >La Divina Commedia La Divina Commedia</ </cite cite> > di Dante <cite Alighieri </p p> </ Testo preformattato <p> < <abbr abbr title title= ="Hyper Text Transfer Protocol" "Hyper Text Transfer Protocol"> >HTTP HTTP</ </abbr abbr> > è un protocollo di comunicazione tra client e server. </p p> </ Il web è stato inventato da < <abbr abbr> >T. T.</ </abbr abbr> > <abbr abbr> >B. B.</ </abbr abbr> > Lee. Lee.</ </p p> <p>Il web è stato inventato da Sia < <var var> >x</ </var var> > una variabile … una variabile … </ </p p> <p>Sia Sia < <em em> >x</ </em em> > una variabile … una variabile … </ </p p> <p>Sia pre> > <pre Un frammento di codice Un frammento di codice rientrato di tre Un frammento di codice rientrato di tre caratteri </pre pre> > </ Esempio 2 4 Lezione 3 Enfasi ed evidenza Tag strutturali vs stilistici Enfasi ed evidenza Strutturali <p>Questo Questo è molto <em> <em>interessante interessante</em> </em>! !</p> <p> <p>Questo Questo è molto <strong> <strong>importante importante</strong> </strong>! !</p> <p> Diverso da italico o grassetto che sono annotazioni stilistiche <p>Questo Questo è molto <i> <i>interessante interessante</i> </i>! !</p> :-Q <p> <p>Questo Questo è molto <b> <b>importante importante</b> </b>! !</p> :-Q <p> Una distinzione da puristi? Stilistici strong forte b bold :-Q "spicca" in HTML5 em enfasi i italic :-Q "cambio di tono" in HTML5 code codice tt teletype :-Q del cancella strike riga sopra :-Q testo scorretto em enfasi u sottolinea :-Q :-Q var variabile i italic :-Q sup apice small testo piccolo :-Q testo piccolo inf pedice big testo grande :-Q abbr address ... altri <blink> lampeggia :-Q :-Q Esempio 3 Il tag <font> :-Q :-Q Caratteri speciali <font> può (poteva) essere usato per definire il tipo di carattere tipografico, le sue dimensioni, il colore I seguenti caratteri hanno un significato speciale per gli interpreti HTML e i parser XML: <, >, &, ", ' Se vogliamo visualizzarli come tali è necessario usare le loro corrispondenti entità carattere o il corrispondente codice Unicode. face= ="Verdana" size size= ="+2" color color= ="red" "red"> > <font face In dettaglio: size:: le dimensioni del carattere size face:: il carattere tipografico (tipo o font) face color:: il colore dei caratteri (vedi dopo) color Altre entità carattere Carattere Entità carattere Caratteri Unicode < < < > > > &; & & " " ... ' ' ... Liste non numerate e numerate Lettere accentate Simboli à à à © © © è è è ® ® ® é é é " " " ì ì ì ’ ’ ... ò ò ò º º º ù ù ù ˜ ˜ ... ì ì ì ” ” ... spazio   € € ... § § § TABELLA ul> > <ul < <li li> >il primo elemento della lista il primo elemento della lista</ </li li> > < <li li> >il secondo elemento il secondo elemento</ </li li> > < <li li> >il terzo elemento il terzo elemento</ </li li> > </ul ul> > </ Attributo: type = disc | circle | square :-Q ol> > <ol < <li li> >il primo elemento della lista il primo elemento della lista</ </li li> > < <li li> >il secondo elemento il secondo elemento</ </li li> > < <li li> >il terzo elemento il terzo elemento</ </li li> > </o o> </ Attributo: type = 1 | I | i | A | a :-Q 5 Lezione 3 Liste di definizioni dl> > <dl < dt> > <dt> dt>primo elemento</ primo elemento</dt < <dd dd> >definizione definizione</ </dd dd> > < <dt dt> >secondo elemento secondo elemento</ </dt dt> > < <dd dd> >definizione definizione</ </dd dd> > < <dt dt> >terzo elemento terzo elemento</ </dt dt> > < <dd dd> >definizione definizione</ </dd dd> > </dl dl> > </ Interruzioni di linea e linee orizzontali Per andare a capo <br /> Per inserire una riga orizzontale <hr /> Tutti gli elementi stilistici da definire nel foglio di stile I collegamenti ipertestuali (link) Per i collegamenti si usa il tag <a> con attributo href il cui valore è l’URL della pagina che vogliamo collegare. href= ="http://..." "http://..."> >Pagina collegata</a> <a href collegata</a> Link assoluti e relativi Link esterni: URL completo "http://www.w3.org/"> >W3C W3C</a> </a> <a href= href="http://www.w3.org/" href= ="http://infouma.di.unipi.it/"> IU</a> </a> <a href "http://infouma.di.unipi.it/">IU Link a risorse sullo stesso server Link relativi alla radice del web server Il testo tra <a> e </a> è il testo del collegamento che normalmente sarà visualizzato in blu e sottolineato dai browser. href= ="/infouma/corsi/simi/" "/infouma/corsi/simi/"> >Pagina PSW</a> <a href PSW</a> Cliccando sul collegamento l'effetto "normale" è che viene caricata la pagina collegata al posto di quella attuale "biblio.html"> >Bibliografia Bibliografia</a> </a> <a href= href="biblio.html" href= ="../psw/biblio.html"> Bibliografia</a> </a> <a href "../psw/biblio.html">Bibliografia Link relativi al file, specificando il percorso Attenzione alla rilocabilità!! href= ="C://infouma/psw/biblio.html" "C://infouma/psw/biblio.html"> > crea problemi <a href Collegamenti all’interno delle pagine Sono possibili anche collegamenti che ci portano all'interno di una pagina piuttosto che all'inizio: è necessario marcare la destinazione con un id Salto all'interno della stessa pagina href= ="#qui" "#qui"> >Sezione 3</a> <a href 3</a> ... id= ="qui" "qui"> >Sezione 3</h3> <h3 id 3</h3> Salto nel mezzo di una pagina diversa (pag.html) "http://sito/pag.html#li"> > <a href= href="http://sito/pag.html#li" Salta li</a> li</a> ... ... "li"> >Inizio testo testo</ </p p> <p id= id="li" ... 6 Lezione 3 Le immagini Inserire un’immagine img src src= ="images/micio.gif" "images/micio.gif" <img width width= ="278px" "278px" height height= ="278px" alt alt= ="il mio gatto preferito" "il mio gatto preferito" /> href= ="Esempi/file.html" "Esempi/file.html"> > <a href img src src= ="images/micio.gif" "images/micio.gif" <img width width= ="100px" "100px" height height= ="100px" alt alt= ="il mio gatto preferito" "il mio gatto preferito" /> </a </a> Tabelle per i dati table> > <table th> > <th> th> ></tr > <tr> tr><th> th>Anno</ Anno</th th>Vendite</ Vendite</th </tr> <tr tr> ><td td> >2000 2000</ </td td> > <td td> >18M 18M</ </td td> ></ </tr tr> > <tr tr> ><td td> >2001 2001</ </td td> > <td td> >25M 25M</ </td td> ></ </tr tr> > <tr tr> ><td td> >2002 2002</ </td td> > <td td> >36M 36M</ </td td> ></ </tr tr> > </table table> > </ Proviamo come cambia la tabella con <table border="1px"> :-Q, ci mostra il bordo della tabella e delle celle. <table cellpadding="8px"> :-Q, definisce lo spazio interno ad ogni cella padding)) (padding Nota: width e height non sono deprecati in XHTML ma diventano "obsoleti" in HTML5. Ampiezza di tabelle e colonne table border border= ="1px" "1px"; ; width width= ="80%" "80%"> > <table <tr tr> ><th th> >Anno Anno</ </th th> ><th th> >Vendite Vendite</ </th th> ></ </tr tr> > <tr tr> ><td td> >2000 2000</ </td td> ><td td> >18M 18M</ </td td> ></ </tr tr> > <tr tr> ><td td> >2001 2001</ </td td> ><td td> >25M 25M</ </td td> ></ </tr tr> > <tr tr> ><td td> >2002 2002</ </td td> ><td td> >36M 36M</ </td td> ></ </tr tr> > </table table> > </ width è deprecato sulle celle e le righe :-Q width è obsoleto in HTML5 :-Q Esempio 4 <table cellspacing="6px"> :-Q, definisce lo spazio tra le celle Celle che si espandono colspan=" ="n n" di una cella dice che quella cella si L’attributo colspan estende su n colonne rowspan=" ="n n" di una cella dice che quella cella si L’attributo rowspan estende su n righe. table border border= ="1px" "1px"> > <table tr> ><td td colspan colspan= ="3" "3"> >Titolo Titolo</ </td td> ></ </tr tr> > <tr tr> > <tr <td td> >Uno Uno</ </td td> > <td td> >Due Due</ </td td> > <td td> >Tre Tre</ </td td> > </tr tr> > </ </table table> > </ Esempio 5 Tabelle per il layout :-Q Rigorosamente senza bordi Testo con margini Layout 1 Testo su due colonne Layout 2 Uno schema di pagina Layout 3 Un po' di colore Colori: un certo numero sono disponibili con il loro nome in inglese blue, green, yellow, red, magenta... magenta... I colori sono codificati con un numero di 6 cifre esadecimali (codifica RGB per Red-Green-Blue) #ffff00 corrisponde al giallo #ff0000 corrisponde al rosso Tabella di colori body,, td … per colorare lo sfondo L’attributo bgcolor di body della pagina o di una cella è deprecato :-Q 7 Lezione 3 Conclusioni Il nucleo di HTML "incoraggiato" è molto piccolo: contiene solo tag di tipo strutturale o semantico Quasi tutto il resto ha a che fare con aspetti di presentazione; in genere sono tag deprecati :-Q. Ciò che è "deprecato" diventa "obsoleto" o addirittura "assente" in HTML5. Gli aspetti di presentazione sono delegati ai fogli di stile in base al principio della separazione contenuto/stile. Prossima lezione: un esercitazione sulla marcatura 8
