Il linguaggio per creare pagine per il web HTML Il linguaggio per creare pagine per il web
World Wide Web Si basa sul protocollo http ed è la vera novità degli anni ’90. Sviluppato presso il CERN di Ginevra (da Tim Berners-Lee) è il più potente mezzo di diffusione telematica di documenti elettronici. Mezzo di comunicazione globale, interattivo, multimediale e ipertestuale ha cambiato radicalmente il modo di comunicare e di lavorare.
Organizzazione di un testo Accesso sequenziale
Organizzazione di un ipertesto Accesso secondo legami associativi
Linguaggi di markup In un documento il markup è il codice che contiene le informazioni per la sua formattazione.
Linguaggi di markup (II) Nell’ambito dell’elaborazione elettronica dei testi sono stati creati strumenti informatici per automatizzare alcune operazioni per la creazione dei documenti. Esistono programmi per l’elaborazione dei testi di tipo diverso. Gli editor WYSIWYG. Gli editor che usano il concetto di markup. Nel caso di editor che usano il concetto di markup, un testo è costituito da due parti Il contenuto vero e proprio. Le “istruzioni” che specificano come il contenuto deve essere rappresentato sul dispositivo (lo schermo di un PC, ma anche per esempio una stampante). In genere si racchiude il testo fra istruzioni chiamate tag (o etichette, o codici). I tag sono scritti usando i normali caratteri e quindi i documenti possono essere creati usando semplici editor di testo.
File Word (.doc)
File Word (.doc) Aprendo il file precedente con Blocco Note si vede il formato interno di Word e non si distinguono markup.
File in formato RTF (.rtf) RTF è un formato solo testo in cui si distinguono informazioni legate alla presentazione del documento e informazioni che fanno parte del contenuto.
File in formato PostScript (.ps) Questo è un formato usato per la stampa. Anche in questo caso si distinguono informazioni legate alla presentazione del documento e informazioni che fanno parte del documento stesso.
HTML Gli ipertesti del web sono scritti usando il linguaggio HyperText Markup Language (HTML). HTML non è un linguaggio di programmazione! HTML è un linguaggio di markup e permette di descrivere la disposizione di tutti gli elementi presenti all’interno di un documento. I documenti HTML sono dei file in formato testo (codice ASCII). Si possono creare con degli editor di testo dando l’estensione .htm o .html. I browser leggono i documenti HTML e li visualizzano interpretando le specifiche di formattazione in modo sequenziale.
HTML: esempio <html> <head> <title>Pagina HTML di prova</title> </head> <body> Utilizzare un editor di testo: in ambiente Windows WordPad va bene, in ambiente Unix vi per esempio </body> </html>
HTML: sintassi <nomecomando> informazioni </nomecomando> Un documento HTML inizia sempre con il tag <html> e termina sempre con il tag </html>. NB: il linguaggio HTML è case-insensitive e quindi <HTML>, <html>, <Html> sono tutti tag leciti (lo stesso vale per gli altri tag). Suggerimenti: È meglio decidere all’inizio come si scriveranno i tag ed essere consistenti. Per analogia con XHTML (derivato dell’XML e dell’HTML che è case-sensitive) è consigliabile scrivere tutto in minuscolo.
HTML: sintassi (II) <html> <head> caratteristiche del documento </head> <body> documento </body> </html>
HTML: <head> <html> <head> <title>titolo del documento</title> <meta name=“keywords” content=“parole chiave qui”> <meta name=“author” content=“nome e cognome qui”> </head> ………………………… </html>
HTML: <head> Questa sezione del documento contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto ed interpretato. È la parte del documento dove vengono inseriti i metatag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, i fogli di stile, ecc.
HTML: <body> <html> <head> <title>titolo del documento</title> </head> <body lista di opzioni> documento vero e proprio </body> </html>
HTML: <body> <body bgcolor=“colore sfondo” background=“nome file con l’immagine” text=“colore testo” link=“colore link da visitare” vlink=“colore link visitato” alink=“colore link selezionato” > NB: l’ordine in cui si scrivono gli attributi non è importante.
HTML: <body> bgcolor=“red” bgcolor=“yellow” bgcolor=“#00ffff” text=“#eeeeee” link=“#ffffff” background=“images/sfondo.gif” <body text= “white” link=“#cc0000” background=“images/sabbia.gif>
HTML: RGB Ogni colore può essere codificato mediante tre numeri compresi tra 0 e 255 che rappresentano le quantità di ROSSO VERDE e BLU presenti nel colore stesso. Ogni numero compreso tra 0 e 255 deve essere trasformato nella rappresentazione esadecimale corrispondente (base 16). Con questa codifica si possono rappresentare più di 16,7 milioni di colori diversi.
HTML: RGB (II) NB: nei file HTML le codifiche esadecimali vanno scritte senza lasciare spazi vuoti tra le cifre.
HTML: titoli Il documento inserito nel <body> viene visualizzato secondo le direttive di formattazione. Per scrivere titoli si possono usare: <h1>titolo1</h1> <h2>titolo2</h2> …… <h6>titolo6</h6> Per andare a capo: <br> <p>……….</p>
HTML: caratteri Formato dei caratteri: <b> grassetto </b> <i> corsivo </i> <em> enfatizzato </em> <code> codice </code> <strong> grassetto </strong> <font size=“3”> testo </font> <font color=“blue”> … </font> <font face=“Arial”> … </font>
HTML: allineamento Allineamento: <p align=“center”> <p align=“right”> <p align=“justify”> <center> testo da centrare </center>
HTML: elenchi <ul> e <li> (unordered list) <ul> <li>primo elemento<\li> <li>secondo elemento<\li> </ul> <ol> e <li> (ordered list) <ol> </ol>
HTML: altri marcatori Linee orizzontali <hr>: <hr width=“90%” size=3> Testo lampeggiante (solo per Netscape): <blink> questo testo lampeggia </blink> Testo scorrevole (solo per Explorer): <marquee> questo testo scorre </marquee> Commenti: <!-- questo testo non viene visualizzato -->
HTML: <a href> Link <a> ……… </a> <a href=“URL”>testo del link</a> Gli indirizzi per “trovare” i documenti nel web sono detti Uniform Resource Locator (URL) e li identificano in modo univoco. protocollo://indirizzo internet del server/pathname
Indirizzo internet del server HTML: <a href> <a href=“http://www.unifi.it”>Università di Firenze</a> protocollo Indirizzo internet del server <a href=“http://www.dsi.unifi.it/~ferrari/DIDATTICA/aa07/index.htm”> Anno Accademico 2006/2007</a>
HTML: link interni (ancore) Link interni allo stesso documento: si usa l’attributo name del tag <a>.
HTML: link interni (ancore) (II) Si devono marcare quelle porzioni del documento dove si vuole saltare.
HTML: link interni (ancore) (III) Per i link interni si deve usare nell’attributo href il nome scelto come valore dell’attributo name, preceduto dal simbolo #.
HTML: <IMG> <img src=“nome file dell’immagine” align=“left” | “right” | “center” border=“numero” height=“numero” width=“numero” hspace=“numero” vspace=“numero” alt=“testo alternativo all’immagine”> NB: l’immagine deve essere su un file a parte in formato GIF, PNG o JPEG (BMP solo per Explorer).
HTML: audio Formati audio .au .aiff .mid .wav <a href=“nome file audio”>clicca qui</a> <bgsound src=“nome file audio” loop=“10”> NB: bgsound fa partire l’audio quando si entra nella pagina ma funziona solo in Explorer.
HTML: video Formati video .mpeg .avi .mov <a href=“nome file video”>clicca qui</a> <img dynsrc=“nome file video” src=“nome file immagine”> NB: dynsrc fa partire automaticamente il video ma funziona solo in Explorer.
HTML: tabelle Per creare una tabella in HTML si usano i tag: <table> </table> all’interno dei quali si deve definire il contenuto della tabella. Per definire una tabella si procede nel modo seguente: Si realizza la prima riga facendo uso del tag <tr> (table row) Si indicano le varie celle facendo uso: Del tag <th> per le intestazioni di cella </th> (table header). Del tag <td> per i dati della cella </td> (table data). Si passa alla seconda riga con le relative celle avendo cura di usare il tag </tr>.
HTML: tabelle
HTML: <table> (II) width=“larghezza della tabella” cellpadding=“numero” indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla. cellspacing=“numero” specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri. border=“numero” specifica la larghezza dei bordi di una tabella (in pixel). bgcolor=“colore sfondo tabella” > <table width=“80%” cellpadding=“5” bgcolor=“#ff3300”>
HTML: <td> <th> width=“dimensione della cella” colspan=“numero” rowspan=“numero” bgcolor=“colore sfondo cella” align=”right” | ”left” | ”center” valign=“top” | “bottom” | “middle” nowrap > <td width=“100” bgcolor=“#0033aa” align=“right”>
HTML: tabelle Le tabelle si usano principalmente per organizzare gli elementi all’interno di una pagina. Per fare questo non si visualizzano i bordi. <table border=“0”> righe e colonne <\table>
HTML: frame I frame servono per suddividere il browser in parti indipendenti all’interno delle quali si possono caricare documenti HTML diversi. È necessario innanzitutto realizzare un file HTML che definisca la struttura della pagina (ovvero la sua suddivisione in parti indipendenti). Il tag <frameset> serve per creare una pagina strutturata in frame. <frameset> </frameset> <noframes> </noframes> <frameset> sostituisce il comando <body>
HTML: <frameset> <frameset> ha due attributi: rows divide lo schermo in righe orizzontali; cols divide lo schermo in colonne verticali. Le dimensioni delle righe e delle colonne possono essere espresse in pixel oppure in percentuale. Tra gli altri attributi si può usare frameborder per associare un bordo alle varie porzioni dello schermo (esteticamente discutibile).
HTML: <frame> All’interno di ogni porzione di interfaccia del browser si deve aprire un documento usando il tag <frame> <frame src=“file HTML da aprire nel frame” name=“nome della finestra” scrolling=“yes” | “no” | “auto” noresize marginwidth=“numero” marginheight=“numero” >
HTML: target In una struttura a frames può apparire difficile caricare il contenuto di un link nella sezione appropriata. Grazie all’attributo target possiamo specificare qual è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno: <a href=“paginaDaLinkare.html” target=“nomeDelFrame”>
HTML: target (esempi) Ci sono poi delle “parole chiave” che ci consentono di ricaricare i link in destinazioni predefinite: target=“_blank”. Apre il link in una nuova finestra, senza nome; target=“_self”. Apre il link nel frame stesso (è così di default); target=“_parent”. Il documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore); target=“_top”. Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame (si noti la differenza con “_parent”). Più precisamente il documento viene caricato nella parte più alta (“top”) della struttura, ed è questo il motivo per cui il frameset stesso viene annullato e sostituito dal contenuto del link.
HTML: image map Una image map è un’immagine cui si possono associare link diversi. È necessario avere il file dell’immagine (.gif o .jpeg) e una specifica della mappatura, cioè l’indicazione di quali parti dell’immagine sono attive e quali no.
HTML: <map> <html> <head> <title>Esempio map</title> </head> <body background=“bckgrnd.gif”> <center> <map name=“picture”> <area href=“form.html” shape=“rect” coords=“3,122,73,143” alt=“Go to the form”> <area href=“contact.html” shape=“rect” coords=“109,123,199,142” alt=“Go to the contact page”> <area href=“main.html” shape=“rect” coords=“1,2,72,17” alt=“Go to the homepage”> <area href=“links.html” shape=“rect” coords=“155,0,199,18” alt=“Go to the links page”> <area href=“mailto:prova@prova.com” shape=“poly” coords=“28,22,24,68,46,114,84,111,99,56,86,13” alt=“Invio email”> <area href=“mailto:prova@prova.com” shape=“circle” coords=“146,66,42” alt=“Invio email”> <\map> <img src=“deitel.gif” width=“200” height=“144” border=“1” alt=“Harvey and Paul Deitel” usemap=“#picture”> </center> </body> </html>
HTML: <map> Come si possono mappare le regioni italiane?
HTML: form Uno dei fattori che hanno decretato il successo del Web è senz’altro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list). Per organizzare questo genere di servizi è necessario raccogliere in qualche modo i dati dell’utente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form). L’invio dei dati è solitamente organizzato in due parti: Una pagina principale che contiene i vari campi del form, che consentono all’utente di effettuare delle scelte, scrivere del testo, inserire un’immagine … Una pagina secondaria che viene richiamata dalla principale e che effettua il “lavoro” vero e proprio di processare e raccogliere i dati. Di norma si tratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp o altro. In questa parte ci occuperemo della sola pagina principale.
HTML: form (name e action) Per creare una pagina con dei moduli, bisogna usare l’apposito tag <form> <form name=“datiUtenti” action=“paginaRisposta.php”> ………… </form> Come si può vedere, “name” serve per indicare il nome del form, “action” indica l’URL del programma o della pagina di risposta che processerà i dati. Grazie all’ “action” è anche possibile far sì che i dati vengano inviati in e-mail al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). <form action=mailto:tuamail@nomeDominio.it?subject=Oggetto predefinito” enctype=“text/plain” method=“POST”>
HTML: form (metodo) Quando creiamo un form possiamo scegliere due metodi di invio: GET e POST. Con il metodo GET la pagina di risposta viene contattata e i dati vengono inviati in un unico step. Nell’URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (più precisamente nella “query string”, cioè nella “stringa di interrogazione”) secondo questa forma: http://www.html.it/esempioForm/paginaRisposta.php?nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio I dati (nella forma nome del campo=valore del campo) sono appesi alla pagina dopo il punto interrogativo. Alcuni server hanno tuttavia delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 caratteri complessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi per l’invio in GET è: <form name=“datiUtenti” action=“paginaRisposta.php” method=“GET”>
HTML: form (metodo) Nel metodo POST invece l’invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri non compaiono nella query string. In questo caso non ci sono limiti sulla lunghezza dei caratteri. La sintassi è: <form name=“datiUtenti” action=“paginaRisposta.php” method=“POST”>
HTML: form (Enctype) Prima di passare i dati alla pagina di risposta, che si trova sul server, questi vengono codificati dal browser in modo da non poter dare adito a errori (ad esempio gli spazi vengono convertiti in “+”). Normalmente non è necessario specificare come si vuole effettuare la codifica dei dati, perché è sottinteso l’invio di semplice testo. A volte però, come quando è necessario inviare un’immagine, è tuttavia indispensabile dichiarare espressamente quali dati vogliamo inviare. Per farlo è necessario inviare l’attributo “enctype” (“encoding type”, cioè “tipo di codifica”). <form name=“datiUtenti” action=“paginaRisposta.php” enctype=“text/plain”> Ma nel caso di invio di immagini dovremo dichiarare: <form name=“datiUtenti” action=“paginaRisposta.php” method=“post” enctype=“multipart/form-data”>
HTML: form (target) Grazie all’attributo “target” è possibile far aprire i dati del form in una pagina differente rispetto a quella corrente o in una determinata parte di un frameset: <form name=“datiUtenti” action=“paginaRisposta.php” method=“get” target=“_blank”>
HTML: form - raggruppare i moduli Con l’HTML4 sono stati introdotti dei tag per fare un po’ d’ordine all’interno dei form. Grazie al tag <fieldset> possiamo creare delle macro-aree all’interno dei form, e grazie al tag <legend> possiamo indicare il nome di ciascuna macro-area. Es.: raccogliere i dati di un utente, raccogliendo dati anagrafici, residenza, domicilio e reperibilità sul lavoro: <fieldset> <legend>Dati anagrafici</legend> <br><br><br> </fieldset> <legend>Residenza</legend>
HTML: form - raggruppare i moduli Un altro tag particolarmente utile – si può utilizzare con ogni tipo di campo che vedremo d’ora in poi – è il tag <label>, che permette di indicare un’etichetta per il nome del campo: <fieldset> <legend>Dati anagrafici</legend> <label>Anno di nascita: <input type=“text”></label> </fieldset>
HTML: form – Il tag input Per quel che riguarda i campi del form, il tag più utilizzato è <input>, che è senza chiusura. Per specificare un determinato tipo di campo è sufficiente indicare il tipo di input: <input type=“text”> (crea un campo di testo) <input type=“button”> (crea un bottone). I vari <input> sono dotati di attributi che consentono di indicare il tipo di campo, il nome (ad esempio, per interagire con JavaScript), e il valore (per lo più il testo visualizzato): <input type=“text” name=“tuoTesto” value=“qui il tuo testo”>
I bottoni (submit, reset) Creare un bottone di invio: <input type=“submit” value=“Invia i dati”> <form action=“http://www.dsi.unifi.it” target=“_blank”> <input type=“submit” value=“visita www.dsi.unifi.it”> </form> Un altro bottone utile è il “reset” che, una volta premuto, consente di riportare il form allo stato originario: <form> <input type=“text”><br> <input type=“reset” value=“Cancella”>
Campo testo, textarea, password Per consentire all’utente di inserire del testo è possibile utilizzare un campo testo. Se il campo è su una singola linea avremo: <input name=“mioTesto” type=“text” value=“qui il tuo testo” size=“40” maxlength=“200”> “maxlength” indica il numero massimo di caratteri che l’utente può inserire, con “size” si esprimono invece le dimensioni del campo di testo. Se si ha la necessità di indicare un campo che consenta di inserire una grande quantità di testo conviene invece utilizzare una “textarea” <textarea name=“testo” cols =“40” rows=“10”>qui puoi scrivere il tuo testo</textarea>
Campo testo, textarea, password Esiste infine il campo password che codifica i caratteri inseriti con degli asterischi: <input name=“mioTesto” type=“password” size=“18” maxlength=“8”>
Scelte: Checkbox Con i checkbox possiamo consentire all’utente di operare delle scelte multiple: <fieldset> <legend>Linguaggi conosciuti</legend><br> <input type=“checkbox” name=“html” value=“html”>html <br> <input type=“checkbox” name=“css” value=“css”>css <input type=“checkbox” name=“javascript” value=“javascript”>JavaScript </fieldset> Si possono anche selezionare uno o più valori di default: <input name=“html” type=“checkbox” value=“html” checked> È possibile disabilitare una casella: <input name=“html” type=“checkbox” value=“html” disabled>
Scelte: Radiobutton I “radio button” invece consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude l’altra. Per ottenere questo effetto i campi devono avere lo stesso nome e differente valore: <fieldset> <legend>Linguaggi conosciuti</legend> HTML<input type=“radio” name=“linguaggio” value=“html”> CSS<input type=“radio” name=“linguaggio” value=“css”> JavaScript<input type=“radio” name=“linguaggio” value=“javascript”> </fieldset> Anche in questo caso è possibile assegnare un valore di default o disabilitare un pulsante: <input type=“radio” name=“linguaggio” value=“html” checked\disabled>
Scelte: Menu di opzioni (select) Grazie al tag <select> è possibile costruire dei menu di opzioni. In questo caso ciascuna voce deve essere compresa all’interno del tag <option> (la chiusura del tag è opzionale) e il valore deve essere specificato attraverso l’attributo “value”. Con l’attributo “selected” si può indicare una scelta predefinita: <fieldset> <legend>Siti per webmaster</legend> <select name=“siti”> <option value=“http://www.html.it” selected>www.html.it <option value=“http://freephp.html.it”>freephp.html.it <option value=“http://freasp.html.it”>freasp.html.it </select> </fieldset>
Scelte: Menu di opzioni (select) Nell’HTML 4 è stato introdotto il tag <optgroup> che consente di suddividere le varie possibilità di scelta in gruppi tramite l’utilizzo di apposite etichette <select name=“siti”> <optgroup label=“siti per webmaster”> <option value=http://www.html.it>www.html.it <option value=http://freephp.html.it>freephp.html.it <option value=“http://freasp.html.it”>freasp.html.it </optgroup> <optgroup label=“risorse per webmaster”> <option value=http://font.html.it>font.html.it <option value=http://cgipoint.html.it>cgipoint.html.it </select>
Scelte: Menu di opzioni (select) Infine con il tag select è possibile impostare anche delle scelte multiple. Come si può vedere, utilizzando l’attributo “multiple” l’aspetto del tag select cambia notevolmente <label>Quali siti visiti?<br> <select name=“siti” multiple> <option value=http://www.html.it>www.html.it <option value=http://freephp.html.it>freephp.html.it <option value=“http://freasp.html.it”>freasp.html.it <option value=http://font.html.it>font.html.it <option value=http://cgipoint.html.it>cgipoint.html.it </select> </label>
HTML HTML ha anche altri tag Molti manuali sono in rete, ad esempio si veda http://www.html.it/ Libri: HTML 4.0 flash – Apogeo HTML 4.0 – McGraw Hill