Lezione HTML 4 PDF

Lezione HTML 4 HTML→ acronimo per HyperText Markup Language. Il testo dei documenti è marcato con tag: Presentazionali: caratteri e paragrafi Strutturali: titoli, elenchi e tabelle Ipertestuali: collegamenti ipertestuali Multimediali: immagini e altri contenuti multimediali Qualc...

Lezione HTML 4 HTML→ acronimo per HyperText Markup Language. Il testo dei documenti è marcato con tag: Presentazionali: caratteri e paragrafi Strutturali: titoli, elenchi e tabelle Ipertestuali: collegamenti ipertestuali Multimediali: immagini e altri contenuti multimediali Qualcosa di simile viene fatto anche da OpenOffice Writer e Microsoft Word. Il protocollo di scambio è http o https. Supponiamo di voler definire un linguaggio per descrivere il formato che gli studenti devono seguire per scrivere la propria tesi di laurea. Una tesi ha: una intestazione, che contiene titolo, nome autore un corpo, che contiene una sequenza di capitoli ogni capitolo ha un titolo, un prologo ed una sequenza di sezioni Ogni sezione ha un titolo, ed una sequenza di paragrafi Ogni paragrafo, … Possiamo definire un DTD che definisce questa organizzazione, ed ogni tesi di laurea dovrà essere scritta in un documento XML valido rispetto a questo DTD. Chiamiamo questo linguaggio con il quale andranno scritte le tesi UTML (Unical Tesi Mark-up Language). Il DTD per il linguaggio UTML Poiché siamo fiduciosi del fatto che questo linguaggio sarà molto diffuso, creiamo un browser specializzato nella visualizzazione di questo tipo di documenti. Quello che abbiamo appena descritto più o meno corrisponde a ciò che è avvenuto nella realtà quando nel '93 Tim Berners Lee e Dave Raggett definirono un linguaggio di marcatura per ipertesti (HyperText Markup Language). HTML5 Abbandona il concetto di DTD Elemento radice: Un attributo opzionale ma importante (utile) dell'elemento html è lang, che serve a dichiarare la lingua in cui è scritto il documento. HTML(5): metadati Alcuni metadati importanti: Character encoding: Necessario per esempio per I caratteri accentati  Titolo della pagina: (i browser lo utilizzano come titolo della barra, e come titolo di default per i bookmark) Tag e Attributi I tag sono indicati tra parentesi angolari porzione a cui si applica il tag Se il tag non ha contenuto, si può scrivere I tag possono avere attributi … Primi passi I file HTML hanno estensione.htm o.html. L'intero documento è marcato con il tag html. Il testo del documento è marcato con il tag body. Gli spazi bianchi (multipli) vengono ignorati. I paragrafi sono marcati con il tag p. L'attributo align specifica l'allineamento left (predefinito) center right justify Diversi tag: Corsivo: i o em Grassetto: b o strong Sottolineato: u Barrato: del Apice: sup Pedice: sub Il tag font: Font: face Dimensione: size, con valori da 1 a 7 (3 di default) Colore: color I documenti possono essere strutturati su sei livelli. Possono essere visti come capitoli, sezioni, sottosezioni, … I titoli sono marcati con i tag h1,..., h6 I collegamenti consentono una lettura non sequenziale. Documenti ipertestuali. I collegamenti sono marcati con il tag a. L'indirizzo della pagina da collegare si specifica con href. Le liste puntate sono marcate con il tag ul. Le liste numerate sono marcate con ol. Gli elementi delle liste sono marcati con li. Le liste possono essere innestate. Le tabelle sono marcate con table. Le righe con tr. Le celle di intestazioni con th. Le altre celle con td. Il bordo può essere specificato con l'attributo border. HTML(5): Embedded content Elementi che importano un’ altra risorsa (ad es. un'immagine, un video, …) nel documento Alcuni elementi: ha come attributi obbligatori:  src il suo valore indica l’url della risorsa alt il suo valore è un testo che descrive il contenuto dell’immagine (utile ad esempio ai non vedenti) La codifica si specifica con l'attributo charset del tag meta. Il tag meta è marcato con il tag head. Il tag head precede il tag body.