HTML • • HTML: HyperText Markup Language Il linguaggio principale usato per definire l’ aspetto di una pagina web (il colore dello sfondo, il layout, le tabelle ecc.) • Il codice HTML deve essere scritto in formato “solo testo” (ASCII) Informatica Parte applicativa Un’introduzione a HTML – • Consiglio: usare un semplice editor di testo come Blocco Note o Notepad Tag: elementi non visualizzati nella pagina web, che descrivono le caratteristiche grafiche della pagina Laurea magistrale in psicologia – Laurea magistrale in psicologia dello sviluppo e dell'educazione Anno accademico: 2008-2009 Normalmente i tag hanno una parte di apertura (per esempio, <b>) e una parte di chiusura, indicato con uno slash / (per esempio, </b>) Alcuni tag hanno solo una parte (per esempio, <hr> ) – Tag • Per esempio: Tag • – Grassetto: <b>Informatica</b> – Corsivo: <i>Informatica</i> Per creare i paragrafi, usiamo <p> e </p>: <p>Informatica.</p> <p>Psicologia.</p> • Combinazioni di tag: <p><b><i>Informatica</i></b></p> Tag • In alcuni casi, l ’ordine dei tag non ha importanza – • … ma è importante che i tag siano nidificati correttamente – • <p><b><i>Informatica</i></b></p> è equivalente a <p><i><b>Informatica</b></i></p> <p><b><i>Informatica</b></i></p> non è corretto Tag • Intestazioni: – – Vari livelli, da <h1> e </h1>, a <h8> e </h8> Per esempio: <h1>Europa</h1> <h2>Italia</h2> <h3>Piemonte</h3> Spesso in HTML, le pagine che contengono errori sono comunque visualizzate in un modo corretto 1 Tag • Una pagina HTML: – – – Tag • Comincia sempre con il tag <html>, finisce con </html> Contiene una sezione indicata con <head> e </head>, poi una sezione indicata con <body> e </body> Struttura complessiva: <html> <head> informazioni preliminari </head> <body> contenuto principale della pagina </body> </html> Spazio bianco, tabulazione, carattere di a capo: HTML considera tutti come un singolo carattere di spazio Quindi i seguenti esempio di codice HTML sono equivalente: • <h1>Europa</h1> <h2>Italia</h2> <h3>Piemonte</h3> <h1>Europa</h1> <h2>Italia</h2> <h3>Piemonte</h3> Tag • • Tutto l ’informazione tra <pre> e </pre > viene visualizzata con spazi bianchi, tabulazioni, carattere di a capo Per esempio: Tag • Carattere di escape &: – – Tag Commenti: – Testo che potrebbe essere incluso nel sorgente, ma che non è visualizzato nel browser – Inizio commento: <!-– Fine commento: --> • Per esempio: – <!-- Questo è un commento.--> < è visualizzato come < > è visualizzato come > & è visualizzato come & Anche per scrivere caratteri con accenti • • • • Italia </pre> • Per esempio, per scrivere i caratteri “<” e “>” • • • <pre> Informatica Psicologia <h1>Europa</h1> <h2>Italia</h2> <h3>Piemonte</h3> è è visualizzato come è é è visualizzato come è À è visualizzato come À Ecc. Attributi dei tag • Diversi tag hanno diversi attributi, che possono essere aggiunti nelle parentesi angoli del tag di apertura Alcuni tag come <p> e <h1> … <h8> hanno l’attributo align, che potrebbe essere “left”, “center” o “right” • – • Per esempio: <p align=“center”>Informatica</p> Alcuni tag come < hr> (riga orizzontale) hanno l’attributo width, che viene espresso come un percentuale dell’ampiezza della pagina web – • Per esempio: <hr width=“75% ”> Il tag <hr> ance ha l’attributo size , che indica l’ altezza della riga orizzontale, e viene espresso n termini di numeri di pixel – Per esempio: <hr width=“25% ” size=“5 ”> 2 Attributi dei tag • I tag HTML principali Per esempio: <h1 align="center">Informatica</h1> <p>La lezione del 21/03/07 si terrà in aula 8 anziché in aula 9.</p> Apertura Chiusura Significato <html> </html> Il primo e l’ ultimo tag in una pagina HTML <title> </title> Testo sulla barra del titolo <head> </head> Informazione introduttive (incl. il titolo) <body> </body> La parte principale della pagina <p> </p> Paragrafo (usa l’ attributo align) <hr /> <p align="right">Jeremy Sproston</p> <hr width="50%" size=“3”> Riga orizzontale (usa gli attributi width e size) <h1> … <h8> </h1> … </h8> Intestazioni (usano l’attributo align ) <b> </b> Grassetto <i> </i> Corsivo <a href=” percorso”> </a> Àncora (percorso a un file HTML) <img src=”percorso” /> Immagine (percorso a un file immagine) <br /> Forza a capo Collegamenti • • Collegamenti Per creare un hyperlink a un’altra pagina web: usiamo i tag <a href=“percorso”> e </a> Per esempio: <a href=“ http://www.di.unito.it/sproston/Psicologia/0809/ magistrale.html”>Informatica</a> Riferimento ipertestuale • • • Àncora Il percorso potrebbe essere assoluto (come sulla diapositiva precedente) o relativo alla posizione nel file system della pagina corrente Per esempio, vorremmo creare un link alla pagina della Patente Europea del Computer direttamente nella pagina del corso di Informatica – Consideriamo il caso in cui il file della pagina del corso di Informatica (informatica.html) e la pagina della Patente Europea del Computer (patente_europea.html) risiedono nella stessa cartella nel file system – Per la parte “percorso ”, basta scrivere il nome del file: L’àncora è tipicamente visualizzato colorato e sottolineato: <a href=“patente_europea.html ”>la Patente Europea del Computer</a> Collegamenti • Adesso consideriamo il caso in cui: Collegamenti • • Per creare un link alla pagina patente_europea.html dalla pagina informatica.html , mettiamo il “path relativo ” della pagina patente_europea.html nella parte “percorso”: Terzo caso: – La pagina informatica.html risiede nella cartella Corsi_principali – La pagina patente_europea.html risiede nella cartella Altri_corsi – Le cartelle Corsi_principali e Altri_corsi risiedono nella stessa cartella – La pagina informatica.html e la cartella Altri_corsi risiedono nella stessa cartella – La pagina patente_europea.html risiede nella cartella Altri_corsi • Per creare un link alla pagina patente_europea.html dalla pagina informatica.html : <a href=“../Altri_corsi/patente_europea.html ”>la Patente Europea del Computer</a> <a href=“Altri_corsi/patente_europea.html ”>la Patente Europea del Computer</a> • • “..” significa cambiare posizione alla cartella direttamente più alto nella gerarchia del file system Altro esempio: <a href=“../../Universita/Biografia/Arte/magritte_bio.html”> 3 Collegamenti • Per creare un link interno in una pagina: – Per esempio, per mettere un link interno all’inizio della pagina – Aggiungere il tag <a name=“inizio"> </a> al punto del codice HTML che corrisponde all’inizio della pagina (per esempio, subito dopo il tag <body>) Collegamenti • Si può anche creare i link a una sezione di un’altra pagina: – Per esempio: <a href=“../Altri_corsi/patente_europea.html#esami ">link all’informazioni sugli esami </a> • Attenzione! Deve esserci qualcosa tra <a name=“inizio"> e </a> (per esempio, almeno uno spazio bianco) – Per creare il link (in un’altra parte della pagina), scrivere, per esempio: <a href="#inizio">link all’inizio</a> – In generale, I link interni possono essere usati per saltare a un’altra sezione di una pagina I tag immagine • • • • I tag immagine I tag immagine: per includere un’immagine direttamente in una pagina web Formato: < img src=”nome_file” /> Nome_file potrebbe includere un percorso nel file system, per esempio < img src=“../Altri_corsi/ecdl.jpg ” /> • Per esempio: Posizione di un’immagine: Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. – L’immagine viene posizionata in esattamente il punto in cui si trova il tag <img src=”nome_file” /> – La corrispondente riga di testo si allinea al suo margine inferi ore <p> <img src="basilica.jpg “ /> </p> I tag immagine I tag immagine • Per esempio: • Per esempio: <p> <p> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. <img src="basilica.jpg “ /> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, <img src="basilica.jpg “ /> (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. </p> </p> 4 I tag immagine • Per esempio: <p> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: <img src="basilica.jpg “ /> gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. I tag immagine • Attributo align con top, middle o bottom: per spostare l’allineamento della riga – align= “top”: spostare l’allineamento al margine superiore dell’immagine – align= “middle”: spostare l’allineamento al punto centrale dell’immagine – align =“bottom”: spostare l’allineamento al margine inferiore dell’immagine (il default) • Attributo align con “left” o “right”: per inserire l’immagine in modo tale che il testo il testo scorra intorno alla figura </p> I tag immagine I tag immagine • Per esempio: • Per esempio: <p> <p> <img src="basilica.jpg “ align= “top” /> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. <img src="basilica.jpg “ align= “middle” /> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. </p> </p> I tag immagine I tag immagine • Per esempio: • Per esempio: <p> <p> <img src="basilica.jpg “ align= “left” /> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. <img src="basilica.jpg “ align= “right” /> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. </p> </p> 5 I tag immagine • • Per inserire un’immagine “da sola” (senza testo): racchiudere il tag del immagine tra quelli del paragrafo I tag immagine • Attributo height (altezza) e width (larghezza) – Per specificare precisamente le dimensioni dell’immagine – Le dimensioni sono specificati in numeri di pixel – Se la dimensione originale della figura è diversa dalla dimensione specificata in height/width, il browser la adatter à – Per ottenere la dimensione (in pixel) di un’immagine: ottenere la finestra Propriet à dell’immagine (per esempio, cliccando con il tasto destro del mouse sopra l’icona dell’immagine, poi scegliendo la voce Propriet à, poi cliccando sulla linguetta Riepilogo) Per esempio: <p> <img src="basilica.jpg ” /> </p> <p> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. </p> I tag immagine I tag immagine • Per esempio: • Per esempio: <p> <img src="basilica.jpg“ align=“right” height=“225” width=“300” /> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. <p> <img src="basilica.jpg“ align=“right” height=“112” width=“150” /> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. </p> </p> I tag immagine • Per esempio: <p> <img src="basilica.jpg“ align=“right” height=“350” width=“200” /> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. I tag immagine • Tassellamento (tiling ): usare un’immagine per lo sfondo di una pagina web – L’immagine viene copiata più volte, per coprire la zona principale dello browser – Attributo del tab body: <body background= “nome_file”> – Attenzione ai colori dell’immagine: la pagina può diventare illegibile </p> 6 Gestire i colori • Per cambiare il colore dello sfondo di una pagina: – Usare l’attributo bgcolor del body tag : <body bgcolor =“silver”> Gestire i colori • I colori predefiniti (da http://en.wikipedia.org/wiki/Web_colors): • Per cambiare il colore del testo e il colore deilink: – Usare gli attributi text e link/vlink/alink del body tag: <body text=“blue” link=“red” vlink=“green” alink=” yellow”> – vlinksta per link visitati, alinksta per link attivati • Per cambiare il colore del testo solo in alcuni punti: – Usare il tag font con l’attributo color <font color=“navy”>Ciao</font> • Per definire più colori, usiamo i codici numerici Gestire i colori • Solitamente nei computer, i colori sono espressi come combinazione di rosso, verde e blu • Rappresentiamo l ’intensità di uno di questi tre colori come un numero compreso tra 0 e 255 • Rappresentiamo i colori in generale come tre numeri (in ordine rosso, verde e blue) – Per esempio: • • • • • • (0, 0, 0) – nero (255, 255, 255) – bianco (255, 0, 0) – rosso intenso (0, 255, 0) – verde intenso (0, 0, 255) – blu intenso (255, 142, 42) – arancione carota Gestire i colori • In HTML, rappresentiamo i codici per i numeri usando le cifre esadecimali tra 00 e FF • Il cancelletto (#) indica che quello che segue è un numero esadecimale • Per esempio: – – – – #FF0000 – rosso intenso #00FF00 – verde intenso #0000FF – blu intenso #FF8E2A – arancione carota • Esempio dell’uso: – <font color=“#FF8E2A”>Ciao</font> Liste • Elenco puntato: Liste • Elenco numerato: – Per definire un elenco puntato: < ul> e </ul> ( unordered list) – Ogni elemento del elenco è racchiuso nelle coppie di tag <li> e </li> (list item) – Per esempio: – Per definire un elenco numerato: < ol> e </ol> ( ordered list) – Usiamo <li> e </li> come per un elenco puntato – Per esempio: <ul> <li>Martin Scorsese</li> <li>Sofia Coppola</li> <li>George Lucas</li> </ul> <ol> <li>Martin Scorsese</li> <li>Sofia Coppola</li> <li>George Lucas</li> </ol> 7 Liste • Elenco di definizioni: Liste • – Per definire un elenco di definizioni: <dl> e </dl> (definitional list) – Elementi da definire: tra <dt> e </dt> – Le definizioni degli elementi: tra <dd> e </dd> – Per esempio: <dl> <dt>Martin Scorsese</dt> <dd>Un regista, sceneggiatore, attore e produttore cinematografico statunitense di origini italiane.</dd> <dt>Sofia Coppola</ dt> <dd>Una regista, sceneggiatrice ed attrice cinematografica statunitense.</dd> </dl> Elenco di definizioni: – Includere l’attributo compact per ottenere una forma più compatta di un elenco di definizioni – L’elemento da definire e la sua definizione vengono visualizzati sulla stessa riga – Per esempio: <dl compact> <dt>TO</dt><dd >Torino</dd> <dt>AL</dt><dd>Alessandria</dd> <dt>BI</dt><dd>Biella</dd> </dl> Liste • È possibile nidificare gli elenchi: – Per esempio: <ul> <li>Piemonte</li> <ul> <li>Torino</li> <li>Alessandria</li> </ul> <li>Lombardia</li> <li>Liguria</li> </ul> Tabelle • Per creare una tabella: <table> e </table> (con attributo border per aggiungere un bordo) – Lo spessore del bordo è 1 – Per cambiare lo spessore del border , scriviamo border =“n”, dove n è un numero • Per creare una riga della tabella: <tr> e </tr> • Per creare una cella di una riga: <td> e </td> (table data) • Definizione degli elementi della tabella: come un elenco (elenco di righe) dei elenchi (elenchi di celle) Tabelle • Per esempio: <table border> <tr> <td>Piemonte</td> Tabelle • Per esempio: <table border= “5”> <tr> <td>Piemonte</td> <td>Torino</td> <td>4.350.521</td> </tr> <td>Torino</td> <td>4.350.521</td> </tr> <tr> <tr> <td>Lombardia</td> <td>Milano</td> <td>Lombardia</td> <td>Milano</td> <td>9.509.135</td> </tr> </table> <td>9.509.135</td> </tr> </table> 8 Tabelle • Per creare un’intestazione per l ’intera tabella: <caption> e </caption> – Inseriti all’interno dei tag <table> e <table> della tabella • Per creare le intestazioni delle singole colonne: <th> e <th> (table heading) – Inseriti all’interno dei tag <tr> e </tr> della prima riga della tabella Tabelle • Per esempio: <table border > <caption >Regioni d ’Italia</caption > <tr> <th>Regione</th> <th>Capoluogo</th> <th>Num. abitanti</th> </tr> <tr> <td>Piemonte</td> <td>Torino</td> <td>4.350.521</td> </tr> <tr> <td>Lombardia</td> <td>Milano</td> <td>9.509.135</td> </tr> </table> Tabelle • Possiamo specificare il colore dello sfondo della tabella, di una riga, e di una cella <body bgcolor ="silver "> <table border bgcolor="white "> <tr bgcolor="gray"> <th>Regione</th> <th>Capoluogo</th> <th>Num. abitanti</th> </tr> <tr> <td bgcolor="blue">Piemonte</td> <td>Torino</td> <td>4.350.521</td> </tr> <tr> <td bgcolor="red ">Lombardia</td> <td>Milano</td> <td>9.509.135</td> </tr> </table> </body> Tabelle • <table border bordercolor="green"> Tabelle • Possiamo usare l’attributo align (per l’intera tabella, per righe, e per celle) <table border align=“center”> <tr> <th>Regione</th> <th>Capoluogo</th> <th>Num. abitanti</th> </tr> <tr align=”right”> <td>Piemonte</td> <td>Torino</td> <td>4.350.521</td> </tr> <tr> <td>Lombardia</td> <td align=“right”>Milano</td> <td>9.509.135</td> </tr> </table> bordercolor : attributo del tag table; per cambiare il colore del bordo Tabelle • cellpadding : attributo per cambiare lo spazio intorno agli elementi delle celle (valore di default è 2) <table border cellpadding =“0”> <table border cellpadding =“5”> 9 Tabelle • cellspacing : attributo per cambiare lo spazio tra le celle (valore di default è 2) Tabelle • • width: espresso in pixel, oppure in un percentuale Può essere applicato all’intera tabella, oppure alle celle <table border width=“75%”> <table border cellspacing =“0”> <table border cellspacing =“5”> <table border width=“450”> Tabelle <table border> <tr> <td>Piemonte</td> <td width=“5 0 %”>Torino</td> <td>4.350.521</td> Tabelle • height: come width, può essere espresso in pixel o come un percentuale, e può essere applicata all’intera tabelle o a righe </tr> <tr> <td>Lombardia</td> <td>Milano</td> <td width=“1 0 0”>9.509.135</td> <table border height= “75%”> </tr> </table> Tabelle <table border> <tr height=“60 ”> <td>Piemonte</td> <td>Torino</td> <td>4.350.521</td> </tr> <tr height=“75%”> <td>Lombardia</td> <td>Milano</td> <td>9.509.135</td> </tr> </table> Tabelle • • valign: come align, ma per l’allineamento verticale (usa i valori “top”, “middle” e “bottom”, con “ middle” come default) Può essere applicato all’intera tabella, alle righe, alle celle <table border height=“75%” valign=“middle”> <tr> <td valign="top">Piemonte</ td> <td>Torino</td> <td>4.350.521</td> </tr> <tr valign= "bottom "> <td>Lombardia</t d> <td>Milano</td> <td>9.509.135</td> </tr> </table> 10 Tabelle • • colspan e rowspan: per creare l’ unione di pi ù celle Per esempio: <table border> Tabelle • colspan – secondo esempio: <table border> <tr> <td colspan="2" align="center">Scienze MFN</t d> <td>Psicologia</t d> </tr> <tr> <td>Informatica</t d> <td>Fisica</td> <td>Psicologia</t d> </tr> </table> <tr> <td colspan="3" align="center">Corsi</t d> </tr> <tr> <td>Informatica</t d> <td>Psicologia</t d> <td>Biologia</td> </tr> </table> Tabelle • rowspan – esempio: Tabelle • Si può nidificare la tabelle: <table border> <tr> <td>Prima cella nella prima tabella</td> <td> <table border> <tr><td>Tabella nidificata</ td></ tr> <tr><td>Tabella nidificata</ td></ tr> </table> </td> </tr> </table> <table border> <tr> <td rowspan="2">Scienze MFN</td> <td>Informatica</td> </tr> <tr> <td>Fisica</td> </tr> </table> Tabelle • Le tabelle (spesso senza l ’attributo border) sono utile anche per controllare l ’organizzazione della pagina • Per esempio: una sequenza di link a pagine sulle città Italiane <a <a <a <a href=“pie.html”>Piemonte</a> href=“lom.html”>Lombardia</a> href=“lig.html”>Liguria</a> href=“abr.html”>Abruzzo</a> oppure Tabelle <a <a <a <a href=“pie.html”>Piemonte</a> href=“lom.html”>Lombardia</a> href=“lig.html”>Liguria</a> href=“abr.html”>Abruzzo</a> oppure <table> <tr> <td><a href=“pie.html”>Piemonte</a></t d> <td><a href=“lom.html”>Lombardia</a></td> <td><a href=“lig.html”>Liguria</a></t d> <td><a href=“abr.html”>Abruzzo</a></ td> </tr> </table> <table> <tr> <td><a href=“pie.html”>Piemonte</a></t d> <td><a href=“lom.html”>Lombardia</a></td> <td><a href=“lig.html”>Liguria</a></t d> <td><a href=“abr.html”>Abruzzo</a></ td> </tr> </table> 11 Tabelle <a <a <a <a href=“pie.html”>Piemonte</a> href=“lom.html”>Lombardia</a> href=“lig.html”>Liguria</a> href=“abr.html”>Abruzzo</a> oppure <table> <tr> <td><a href=“pie.html”>Piemonte</a></t d> <td><a href=“lom.html”>Lombardia</a></td> <td><a href=“lig.html”>Liguria</a></t d> <td><a href=“abr.html”>Abruzzo</a></ td> </tr> </table> Cambiato la larghezza della finestra: diversi effetti 12
Scarica
