Tutti i diritti sono riservati. Per pubblicazioni od utilizzo di questo materiale pregasi contattare l autore al seguente indirizzo: andreavasini@libero.it Andrea Vasini HTML.IT HTML.IT - Andrea Vasini 1
Non ho mai previsto che il codice sorgente di HTML (cioè la roba con le parentesi angolate) fosse visibile agli utenti. Un browser/editor avrebbe fatto vedere o editare all'utente soltanto il linguaggio di una pagina di ipertesto, come se stesse usando un word processor. Per me, e credevo anche per gli altri, l'idea di chiedere al pubblico di battere a mano le parentesi era inaccettabile quanto chiedere a qualcuno di scrivere un documento in Microsoft Word stendendo il formato in codice binario. Ma la leggibilità dell'html si rivelò una manna inaspettata. Con mia grande sorpresa molte persone si familiarizzarono alla svelta con i tag, e iniziarono a scrivere direttamente propri documenti in HTML Tim Berners-Lee, L'architettura del nuovo Web, Feltrinelli, Milano, 2001 HTML.IT - Andrea Vasini 2
BROWSER E S.O. Explorer Netscape Mozilla Firefox Opera Safari Lynx (testuale) Windows Mac OS Linux.. Ogni Browser possiede una cache ed anche la possibilità di visualizzare il codice HTML della pagina.. HTML.IT - Andrea Vasini 3
Cos è HTML Hypertext Markup Language Linguaggio di marcatura per gli Ipertesti Non è un linguaggio di programmazione Non ha meccanismi di controllo (cicli, if then, case, do while ecc.) Non esistono variabili, operatori, array ecc. Non è compilato ma interpretato dal Browser E sviluppabile con un semplice Blocco Note E e sarà ancora per diversi anni la BASE per lo sviluppo di pagine web Lo Standard HTML W3C (www.w3.org) è il Word Wide Web Consortium ha rilasciato HTML 2.0, HTML 3.2, HTML 4.0, XHTML (HTML riformulato come XML), HTML5 HTML 4.01 è l ultima, non ve ne saranno più ed è del 24 dicembre 1999 Non si può non conoscere HTML Chi conosce XHTML non può non conoscere HTML HTML.IT - Andrea Vasini 4
Cosa possiamo trovare in una pagina web Linguaggi HTML (XHTML) CSS (Cascading Style Sheets) JavaScript (linguaggio client) PHP, ASP, CGI,.. (linguaggi server) Oggetti Incorporati Oggetti Prodotti Testo Moduli Tabelle Livelli Elenchi Mappe Frames Immagini Flash Applet Java Audio Video HTML.IT - Andrea Vasini 5
Pagine statiche e dinamiche: il WEB e lo stato Cosa succede quando il browser richiede una pagina dinamica al Server? Il Web Server richiama il PHP engine, se si tratta di una pagina PHP, o IIS per le ASP. Il motore elabora lo script presente nella pagina e restituisce al browser, creandolo al volo, l'output HTML, che viene visualizzato. Quindi la pagina costruita e caricata sul Server non presenta lo stesso codice che legge il navigatore dopo "clic tasto destro+visualizza HTML". Qui è il nocciolo della questione. HTML.IT - Andrea Vasini 6
Le Estensioni Pagine Statiche.htm,.html Pagine Dinamiche.php,.asp,.aspx,.cgi,.. Immagini WEB.gif,.jpg (.jpeg),.png Flash.swf Fogli di Stile.css (importati) Java Script.js (importati) Applet Java.class Nota: Se non riuscite a visualizzare le estensioni.opzioni cartella.. Audio WEB.mid (.midi),.au,.wav,.mov,.ra,.ram,.mp3,.wma,.ogg,.mp4,.webm Video WEB.avi,.mov,.mpeg,.wmv,.rm,.flv,.ogg,.mp4,.webm HTML.IT - Andrea Vasini 7
I TAG (marcatori, modificatori) Sintassi e attributi dei tag <tag attributo1= valore attributo2= valore > contenuto </tag> Tag Chiuso <tag attributo1= valore attributo2= valore > Tag Vuoto Scriviamo in minuscolo per uniformarci all XHTML. Ad esempio in XHTML un tag vuoto è sempre terminato così: <tag attributo1= valore attributo2= valore /> Esempi: <p align= right id= paragrafo1 > testo. </p> <img width= 200 height= 100 src= immagine.gif alt= commento > HTML.IT - Andrea Vasini 8
I TAG Principali differenze con XHTML Gli elementi devono essere correttamente annidati I nomi di elementi e attributi devono essere in minuscolo Gli elementi non vuoti devono essere chiusi I valori degli attributi devono essere posti tra virgolette HTML.IT - Andrea Vasini 9
I TAG Principali differenze con XHTML Ogni attributo deve avere un valore Gli elementi vuoti devono terminare con /> Uso di id e name HTML.IT - Andrea Vasini 10
I TAG Annidamento, Indentazione, Irrilevanze Esempio di Annidamento <div> <p>questo è un <em><strong>esempio</strong></em> di tag annidati </p> </div> Esempio di Indentazione <div> <p>questo è un <em><strong>esempio</strong></em> di tag annidati </p> </div> Esempio di Irrilevanze <div> <p> Questo è un <em><strong> </strong></em> di tag annidati </p> </div> esempio HTML.IT - Andrea Vasini 11
I TAG Commenti Esempio di Commento <div> <!-- Qui scriviamo il commento alle linee di codice che seguono --> <p> Questo è un <em><strong> esempio </strong></em> di tag </div> annidati </p> Ogni linguaggio ha la propria sintassi per i commenti: /* commento */ Questo per i fogli di stile // commento oppure /* commento */ Questo in php Nota: I commenti che comprendono tag di chiusura possono anche essere scritti su più righe, gli altri NO! HTML.IT - Andrea Vasini 12
Struttura classica di una pagina HTML (1/3) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> Titolo del documento</title> Qui si possono trovare oltre al titolo ed ai meta-tags anche i fogli di stile, blocchi di codice Javascript e il tag "link" che serve per importare blocchi di codice esterni alla nostra pagina. </head> <body> Contenuto vero e proprio del documento </body> </html> HTML.IT - Andrea Vasini 13
Struttura classica di una pagina HTML (2/3) <meta http-equiv="content-type" content="text/html; charset=utf-8"> Indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3.org/tr/html4/loose.dtd"> HTML: il tipo di linguaggio utilizzato è l'html PUBLIC: il documento è pubblico W3C: il documento fa riferimento alle specifiche rilasciate dal W3C - (è il segno "meno"): le specifiche non sono registrate all'iso (organizzazione di standardizzazione internazionale). Se lo fossero state, ci sarebbe stato un "+" DTD HTML 4.01 Transitional: il documento fa riferimento a una DTD ("Document Type Definition" cioè "Definizione del tipo di documento"); la versione di HTML supportata è la 4.01 "transitional" EN: la lingua utilizzata per descrivere la DTD HTML.IT - Andrea Vasini 14
Struttura classica di una pagina HTML (3/3) Per quel che riguarda l'html le indicazioni possibili sono tre: Strict: è una DTD particolarmente rigorosa: esclude ogni elemento che riguarda il layout (la cui formattazione è affidata all'utilzzo dei CSS) e non è consentito l'uso degli elementi deprecati: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" http://www.w3.org/tr/html4/strict.dtd > Transitional: è una versione temporanea, per consentire il passaggio da una specifica all'altra. Nella DTD transitionali tag deprecati sono ammeesi. Questa DTD andrà bene nella maggior parte dei casi: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/tr/html4/loose.dtd > Frameset. È la DTD che riguarda i frames: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" http://www.w3.org/tr/html4/frameset.dtd > Nota: Nelle ultime versioni il tipo di <!DOCTYPE> utilizzato influisce sulla visualizzazione della pagina da parte del browser. Con HTML5 basta scrivere <!DOCTYPE HTML> HTML.IT - Andrea Vasini 15
I TAG - Elementi Blocco, Inline e Liste (1/2) GUIDA HTML 4.01 <p>, <div>, <br> Costituiscono un blocco attorno a loro stessi e sostanzialmente ciò comporta che questi elementi provocano un ritorno a capo. <img>, <b>, <em>, <i>, <font> Non vanno a capo e possono essere integrati nel testo. <li> Comprende in pratica solo questo elemento. HTML.IT - Andrea Vasini 16
I TAG - Elementi Blocco, Inline e Liste (2/2) Una pagina (X)HTML, per iniziare, non è altro che un insieme di rettangoli disposti sullo schermo di un monitor. Non importa che si tratti di paragrafi, titoli, tabelle o immagini: sempre di box rettangolari si tratta. Nell'immagine potete però osservare che non tutti i box sono uguali. Alcuni contengono altri box al loro interno. Altri sono invece contenuti all'interno dei primi e se si trovano (come si trovano) in mezzo a del testo notate che esso scorre intorno senza interrompere il suo flusso e senza andare a capo. Avete nell'immagine la rappresentazione visiva, anche se un pò semplificata, della fondamentale distinzione tra gli elementi (X)HTML, quella tra elementi blocco ed elementi inline. Gli elementi blocco sono i box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento. Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline (oltre che, ovviamente, il loro stesso tipo di contenuto, essenzialmente testo). Nell'immagine sono i rettangoli con il bordo verde. Come si può notare, quando sono inseriti nel documento non danno origine ad una nuova riga. Una terza categoria è quella degli elementi lista. Comprende in pratica solo l'elemento LI (list item). Il comportamento è simile ad un elemento blocco ma può essere contenuto solo all interno di OL oppure UL. HTML.IT - Andrea Vasini 17
ATTRIBUTI - Impostare colore di sfondo della pagina GUIDA HTML 4.01 La sintassi: <body bgcolor= nome_colore > o meglio <body bgcolor= codice_colore > Nota: Quando le schede video erano meno potenti i grafici usavano la palette web safe che contiene 216 colori sicuri. Esempio: <body bgcolor="#0000ff"> <body bgcolor="blue"> Con xhtml transitional bgcolor va bene, con strict no. Html5 tutto ok. HTML.IT - Andrea Vasini 18
ATTRIBUTI - Inserire una immagine di sfondo GUIDA HTML 4.01 La sintassi: <body background= path/nome_immagine > Esempio: <body bgcolor= #ff0000 background= immagini/sfondo_home.gif > Considerazioni: L immagine in questo caso viene ripetuta orizzontalmente e verticalmente coprendo tutta l area della pagina. Il peso totale resta comunque quello della singola immagine. E vivamente consigliato impostare sempre anche il colore di sfondo per evitare che cambiamenti dell utente possano creare problemi cromatici. (vedi Accessibilità ) HTML.IT - Andrea Vasini 19
Percorsi Assoluti e Relativi (1/4) GUIDA HTML 4.01 Percorso Assoluto Se esaminiamo: Leggi le risorse sui <a href="http://www.html.it/css/index.html">fogli di stile</a> Possiamo vedere chiaramente che il link indica un percorso assoluto e fa riferimento a una particolare directory. In particolare: http:// Indica al browser di utilizzare il protocollo per navigare nel web (l http) www.html.it/ Indica di fare riferimento al sito www.html.itcss/indica che la risorsa indicata si trova all interno della cartella "css index.html Indica che il file da collegare è quello chiamato "index.html" Insomma, per creare un collegamento assoluto è sufficiente fare riferimento all url che normalmente vedete scritto nella barra degli indirizzi. I percorsi assoluti si usano per lo più, quando si ha la necessità di fare riferimento a risorse situate nei siti di terze persone. Nota: Un altro esempio di percorso assoluto potrebbe essere file:///c percorso\file.htm oppure C:\Documents and Settings\Pippo\Desktop\nomefile HTML.IT - Andrea Vasini 20
Percorsi Assoluti e Relativi (2/4) GUIDA HTML 4.01 Percorso Relativo I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento. Per linkare due pagine che si trovano all interno della stessa directory è sufficiente scrivere: <a href="paginadalinkare.html">collegamento alla pagina da linkare nella stessa directory della pagina presente</a> Vediamo il caso di directory diverse: La sintassi è la seguente: <a href="prima/interna/interna.html">visita la pagina interna</a> HTML.IT - Andrea Vasini 21
Percorsi Assoluti e Relativi (3/4) GUIDA HTML 4.01 Percorso Relativo Vediamo adesso l esempio opposto: dalla pagina interna vogliamo far riferimento a una pagina ("index.html") che si trova più in alto di due livelli: La sintassi è la seguente: <a href="../../index.html">torna alla home</a> HTML.IT - Andrea Vasini 22
Percorsi Assoluti e Relativi (4/4) GUIDA HTML 4.01 Riassumendo: Per far riferimento a un file che si trovi all interno della stessa directory basta linkare il nome del file <a href="paginadalinkare.html">collegamento alla pagina</a> Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, basta nominare la cartella seguita dallo "slash", e poi il nome del file. Secondo la formula: cartella/nomefile.html <a href="prima/interna/interna.html"> Visita la pagina interna </a> Per tornare su di un livello, è sufficiente utilizzare la notazione:../nomefile.html<a href="../../index.html">torna alla home</a> Nota1: Un percorso relativo valido solo lato server è: Leggi le risorse sui <a href="/css/index.html">fogli di stile</a>. La / iniziale significa posizionarsi sulla root (directory principale) del sito. Nota2 (consigli sui nomi): Non mettete mai spazi nei nomi dei file, al limite usate _ oppure - Scrivete tutti i nomi di file e cartelle SEMPRE minuscoli. HTML.IT - Andrea Vasini 23
Struttura base di un sito: La prima pagina html GUIDA HTML 4.01 Esercizio: Scriviamo una pagina index.htm che ha come colore di sfondo il giallo e come immagine di sfondo foglia1.gif La posizione di index.htm è, come da figura, interna alla cartella col vostro nome e cognome, fuori quindi dalle altre quattro cartelle. Ricordatevi la teoria sui percorsi relativi e non dimenticate di inserire Doctype <!DOCTYPE. e dichiarazione sul set di caratteri da caricare <meta httpequiv="content-type HTML.IT - Andrea Vasini 24