IL LINGUAGGIO HTML Dr.ssa Angela Sansonetti.

Presentazione sul tema: "                               IL LINGUAGGIO HTML Dr.ssa Angela Sansonetti."— Transcript della presentazione:

1                                IL LINGUAGGIO HTML Dr.ssa Angela Sansonetti

2 Definizioni SITO WEB: Insieme di informazioni (testuali, grafiche o sonore) consultabili telematicamente, che l’autore organizza, struttura e rende visibilmente attraenti allo scopo di offrire ad una grande quantità di persone una forma di comunicazione. PROGETTARE UN SITO: Raccogliere il materiale, individuare i contenuti da presentare, organizzare i dati definendone la struttura delle relazioni, definire il tipo di architettura ed individuare la tipologia di utenza. BUON SITO: Se è USABILE (soddisfa i bisogni dell’utente – è facile l’accesso e la navigazione), se riesce a COMUNICARE EFFICACEMENTE, se le INFORMAZIONI sono COMPRENSIBILI e i CONTENUTI risultano COMPLETI. IPERTESTO: Testo costituito da segmenti autonomi di informazioni legati tra loro da “link”, ossia Nodi Associativi che permettono al lettore di navigare liberamente da una pagina all’altra. ARCHITETTURA: Il modo in cui un sito organizza le proprie pagine. Dr.ssa Angela Sansonetti

3 Definizioni MODELLO CLIENT-SERVER: un Server è un software che risiede su di un computer collegato in rete e che eroga un particolare servizio. Gli utenti per usufruire dei servizi offerti da un Server devono utilizzare un particolare software, il Client (i Client WWW sono detti browser), che è in grado di inoltrare le richieste al Server BROWSER: programma usato per la navigazione sul Web e che svolge principalmente due compiti: - scaricare i vari files che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo - leggere i documenti scritti in html, e a seconda delle indicazioni ivi contenute, visualizzare la pagina in un modo, piuttosto che in un altro URL: Uniform Resource Locator - si intende un luogo (o indirizzo Internet) in cui si trova una determinata risorsa che si vuole utilizzare. Formato: protocollo://nome del dominio/cammino/nome del file                                Dr.ssa Angela Sansonetti

4 Definizioni PROTOCOLLO: indica il tipo di risorse a cui si sta accedendo (ftp, http..) Es. protocollo ftp (ftp://ftp.sci.univr.it/index.html) permette di copiare il file index.html dal dominio specificato al computer locale. Es. protocollo http ( ) permette di ricercare e visualizzare in locale il documento index.html dall'indirizzo specificato. DOMINIO: specifica la posizione fisica dove si trova la risorsa che si vuole recuperare. Si può rappresentare o con indirizzo IP (Internet Protocol) o utilizzando un nome che corrisponde all'indirizzo IP. HTML: HyperText Markup Language - Linguaggio per pubblicare informazioni sul WWW                               

5 Linguaggi di programmazione per la creazione di siti web
Html: (Hyper text markup language) Linguaggio di impaginazione per la creazione di documenti ipertestuali contenenti testo, immagini, suoni ed altri oggetti multimediali. I documenti creati con questa sintassi hanno estensione .html o .htm ASP: (Active Server Pages) Tecnologia sviluppata da Microsoft per la creazione di pagine web dinamiche e l'integrazione di database relazionali. Le pagine create con le Active server pages hanno estensione .asp Php: (Hypertext preprocessor). Utilizzato per rendere le pagine Web più dinamiche ed interagire con i database My Sql. I documenti diffusi con questa tecnologia dovranno avere estensione .php Dr.ssa Angela Sansonetti

6 HTML: Linguaggio di programmazione per la creazione di pagine Web
Linguaggio HTML HTML: Linguaggio di programmazione per la creazione di pagine Web HTML (acronimo di Hypertext Markup Language - Linguaggio di contrassegno per gli Ipertesti): - non è un linguaggio di programmazione (sono linguaggi di programmazione il C, il C++, il Pascal, il Java, e sono linguaggi di scripting il PHP, l'ASP, il PERL, il JavaScript). - è un linguaggio di contrassegno (o 'di marcatura'), che permette di indicare come disporre gli elementi all'interno di una pagina: le indicazioni vengono date attraverso degli appositi marcatori, detti "tag". - non ha meccanismi che consentono di prendere delle decisioni e non è in grado di compiere delle iterazioni, né ha altri costrutti propri della programmazione. - pur essendo dotato di una sua sintassi, non presuppone la logica ferrea e inappuntabile dei linguaggi di programmazione. Dr.ssa Angela Sansonetti

7 Linguaggio HTML Per creare pagine web occorre avere a disposizione:
 Per creare pagine web occorre avere a disposizione: uno o più browser per visualizzare le pagine un editor testuale per scrivere il codice HTML (Es. Blocco Note di Windows) Estensione del file: il file potrà avere estensione “html“ o “htm”. Un documento scritto in html è costituito da 2 elementi: 1. il TESTO (che si vuole pubblicare) 2. una serie di COMANDI (“tag”) per la formattazione del testo, l’inserimento di link ipertestuali e di grafica Dr.ssa Angela Sansonetti

8 <ISTRUZIONE>xxxxx</ISTRUZIONE>
Linguaggio HTML – I TAG I TAG: Possiedono nomi diversi a seconda della loro funzione Possono assumere diverse forme: Tag Semplici o vuoti: servono a formattare le pagine <ISTRUZIONE> Tag ad apertura/chiusura detti contenitori: utilizzati per manipolare i dati posti al loro interno. <ISTRUZIONE>xxxxx</ISTRUZIONE> Dr.ssa Angela Sansonetti

9 I TAG TAG VUOTO : Es: <hr height="5px">
inserisce una linea orizzontale nel punto in cui viene inserito; l'attributo height="5px" determina lo spessore della linea, "5px“ indica 5 pixel (1 pixel=dimensione di un punto dello schermo). TAG CONTENITORI costituiti da: tag iniziale (che ha lo stesso formato di un tag vuoto) <istruzione>, un testo (su cui agisce il tag) tag finale (che segna la fine dell'effetto dei tag). </istruzione> Dr.ssa Angela Sansonetti

10 Esempi di TAG <html>
indica l’inizio del documento Html; non obbligatorio ma consigliato <title>Il Mio Documento</title> Definisce il titolo (“Il Mio Documento”) del documento che stiamo per creare. <body> Definisce l’inizio del corpo vero e proprio del documento. Verrà chiuso da un tag </body> <H1> testo </H1> Definisce un livello di intestazione. Esistono 6 livelli di intestazione diversi, da H1 ad H6, associati a fonti di larghezza decrescente (H1 = fonte più larga, H6=fonte più piccola) <P> testo </P> Definisce l’apertura e la chiusura di un paragrafo. Il tag di chiusura </P> può essere omesso. <br> causa un ritorno a capo (Break). <I> testo </I> Il testo compreso tra questi tag verrà visualizzato in corsivo (Italic) Dr.ssa Angela Sansonetti

11 Esempi di TAG <B> testo </B>
Il testo compreso tra questi tags verrà visualizzato in “grassetto” (Bold) <A href=”(Url)”> click here</A> Definisce un link ipertestuale ad un documento esterno, ad esempio: <A href=”documento.html”>click here</A> (facendo “click” su “click here” il browser “punterà” al documento “documento.html”) <IMG src=”immagine.gif”> Inserisce nel testo l’immagine contenuta nel file “immagine.gif” &(vocale)grave; &(vocale)acute; una vocale con l’accento grave, ad es.: “è”: è “ì”: ì una vocale con l’accento acuto; ad es.: “ú”: ú “è”: é </body> Definisce la chiusura del corpo del messaggio </html> Definisce la chiusura del documento Dr.ssa Angela Sansonetti

12 HTML: struttura del documento
Un documento HTML è normalmente diviso in due sezioni: <HTML> <HEAD> xxxxxxxxxxxxx </HEAD> HEAD <BODY> bla bla bla bla bla </BODY> BODY </HTML> Dr.ssa Angela Sansonetti

13 HTML: struttura del documento
- <head> contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Due tag presenti in questa sezione: <meta http-equiv="Content-Type" content="text/html; charset=iso "> indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese). <title>Nome del sito</title> Il title è il titolo della pagina e compare in alto sulla barra del browser. <html> <head>    <meta http-equiv="Content-Type" content="text/html; charset=iso ">    <title>Corso su HTML</title> </head> <body>    <!-- Scriveremo qui --> Qui il nostro contenuto </body> </html>

14 HTML: struttura del documento
<head> <title>La mia prima pagina web</title> </head> <body> <p>La mia prima pagina web</p> </body> </html> I tag contenuti all'interno del tag 'head' servono per definire le proprietà del documento.

15 <!-- questo è un commento -->
I TAG - commenti Utilizzati per rendere il codice più leggibile, possono essere inseriti nei punti più significativi: Si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Consentono di mantenere l’orientamento anche in file molto complessi e lunghi. La sintassi è la seguente: <!-- questo è un commento --> e ci permette di "commentare" i vari punti della pagina. Ad esempio: <!-- menu di sinistra -->

16 Esempio Di tutto il codice scritto i browser visualizzeranno solo ciò che è presente nel corpo (body) del listato; quindi fra gli elementi <body> e </body>, <html> <title>Il mio documento</title> <body> <h1>Il mio documento di prova</h1> <p>Cosí questo è il mio primo testo di prova. Premendo in <A href=" punto</A> potete visitare l'Università di Lecce. <br> <b>Questo testo viene visualizzato in neretto</b> mentre il testo che segue <i>viene visualizzato in corsivo</i> <br><br> In questo punto <IMG src="immagini/disegno.gif"> viene visualizzato un disegno. </P> </body> </html> Dr.ssa Angela Sansonetti

17 I TAG - Allineamento e indentazione
I tag possono essere annidati l'uno dentro l'altro. Anzi molto spesso è necessario farlo. Esempio: <TAG1 attributi> contenuto 1 <TAG2> contenuto 2 </TAG2>  </TAG1> Potremmo quindi avere: <P align="right"> testo 1 <P align="left"> testo 2 </P>  </P> Dr.ssa Angela Sansonetti

18 I TAG - Allineamento e indentazione
E’ una buona norma utilizzare dei caratteri di tabulazione per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento. Questa procedura si chiama indentazione, e grazie ad essa il codice HTML risulta più leggibile. Si confronti ad esempio: <P align="right">testo 1<P align="left">testo 2</P></P> con: <P align="right"> testo 1 <P align="left"> testo 2 </P>  </P> Dr.ssa Angela Sansonetti

19 Allineamento del testo
L'attributo 'align' , consente l’allineamento del testo a sinistra, a destra o al centro della pagina Allineamento Sintassi Testo allineato a sinistra <p align="left">testo</p> Testo allineato a destra <p align="right">testo</p> Testo giustificato <p align="justify">testo</p>

20 Le liste Esistono tre tipi di liste: Elenchi ordinati
Elenchi non ordinati Elenchi di definizioni In tutti e tre i casi la sintassi ha questa forma: <elenco> <elemento>nome del primo elemento <elemento>nome del secondo elemento </elenco>

21 Gli elenchi ordinati Esempio:
Le liste ordinate richiedono due tag HTML: contenitore <ol> che delimita la lista contenitore <li> che introduce ogni elemento della lista. Molti browser numerano automaticamente gli elementi della lista; per default, i numeri sono quelli arabi e la numerazione inizia da 1. Esempio: <div>Elenco elementi <ol> <li>primo elemento <li>secondo elemento <li>terzo elemento </ol>testo che segue la lista </div>

22 Gli elenchi ordinati Lo stile di enumerazione visualizzata di default dal browser è quello numerico, ma è possibile indicare uno stile differente specificandolo per mezzo dell’attributo type. Esempio: <ol type="a"> <li>primo elemento <li>secondo elemento <li>terzo elemento </ol>

23 Gli elenchi ordinati: stili consentiti
Valore dell’attributo type Stile di numerazione type=“1” (default) Numeri arabi <ol type="1"> <li>primo <li>secondo <li>terzo </ol> type=“a” Alfabeto minuscolo type=“A” Alfabeto maiuscolo

24 Gli elenchi ordinati: stili consentiti
Valore dell’attributo type Stile di numerazione type=“i” Numeri romani minuscoli <ol type="1"> <li>primo <li>secondo <li>terzo </ol> type=“I” Numeri romani maiuscoli

25 Liste L'attributo “start” consente di indicare l'inizio della numerazione quando questo è diverso da uno. Esempio: 10. Primo elemento della lista 11. Secondo elemento della lista <ol start="10"> <li>Primo elemento della lista</li> <li>Secondo elemento della lista</li> </ol> Dr.ssa Angela Sansonetti

26 Gli elenchi non ordinati
<ul>: “unordered list” è il tag da usare per aprire un elenco ordinato <li>: “list item” individua gli elementi Esempio: <ul> <li>primo elemento <li>secondo elemento <li>terzo elemento </ul>

27 Gli elenchi non ordinati
Il tipo di segno grafico utilizzato per individuare gli elementi dell’elenco di default dipende dal browser. E’ possibile scegliere un altro tipo di segno: Valore dell’attributo type Stile di numerazione type=“disc” (default) Visualizza un punto pieno <ul type=“disc"> <li>primo <li>secondo <li>terzo </ul> type=“circle” Visualizza un cerchio vuoto <ul type=“circle"> type=“square” Visualizza un quadrato pieno <ul type=“square">

28 Gli elenchi di definizioni
<dl>: individua gli elenchi di definizioni <dt>: “definition term” indica il termine da definire <dd>: “definition description” è la definizione vera e propria del termine Esempio: <p>Ecco i principali tag per delimitare il testo: <dl> <dt>Il tag p <dd>individua l'apertura di un nuovo paragrafo <dt>Il tag div <dd>individua l'apertura di un nuovo blocco di testo <dt>Il tag span <dd>individua l'apertura di un elemento inline, cui attribuire una formattazione atraverso gli stili </dl> ci sono poi altri tag che... </p>

29 Liste annidate <ul>
<li>Primo elemento della lista esterna </li> <li>Secondo elemento della lista esterna </li> <li>Terzo elemento con lista <ol> <li>Primo elemento della lista interna</li> <li>Secondo elemento della lista interna</li> </ol> </li> </ul> Primo elemento della lista esterna Secondo elemento della lista esterna Terzo elemento con lista 1. Primo elemento della lista interna 2. Secondo elemento della lista interna

30 <body bgcolor="cyan"> oppure <body bgcolor="#ff0000">
Attributo bgcolor Per definire il colore di sfondo di una pagina Web è sufficiente quindi impostare: <body bgcolor="cyan"> oppure <body bgcolor="#ff0000"> ff0000 codice esadecimale del colore azzurro. Il simbolo # fa parte del codice del colore ed indica al browser che il valore che segue è un numero esadecimale che rappresenta il colore. Attributo background Consente di inserire un'immagine nello sfondo di una pagina Web. I browser visualizzano l'immagine a partire dall'angolo superiore sinistro della finestra e la ripetono fino a riempire tutto lo sfondo della pagina (effetto mattonella o tiling). <body background=“imgSfondo.gif”> E’ anche possibile combinare i due attributi in modo che, mentre l’immagine di sfondo viene caricata, venga comunque visualizzata una colorazione della pagina: <body bgcolor="#ff0000“ background=“imgSfondo.gif”> Dr.ssa Angela Sansonetti

31 Codici esadecimali dei colori
Black (nero) = "#000000" Green (verde) = "#008000" Silver (argento) = "#C0C0C0" Lime (verde limone/tiglio) = "#00FF00" Gray (grigio) = "#808080" Olive (verde oliva) = "#808000" White (bianco) = "#FFFFFF" Yellow (giallo) = "#FFFF00" Maroon (marron) = "#800000" Navy (blu marino) = "#000080" Red (rosso) = "#FF0000" Blue (blu) = "#0000FF" Purple (viola) = "#800080" Teal = "#008080" Fuchsia (fucsia) = "#FF00FF" Aqua (acqua marina) = "#00FFFF" Dr.ssa Angela Sansonetti

32 Tag di formattazione All'interno del tag 'body' è possibile individuare blocchi di testo per i quali si vuole imporre una formattazione particolare per poter evidenziare una parte del testo che si ritiene importante. <br>: Indica al browser di eseguire un “a capo”. Viene utilizzato per formattare i testi o per inserire delle righe vuote in un documento. <hr>: Visualizza una linea orizzontale (filetto). Possiede alcuni attributi di personalizzazione: 'align‘: determina la posizione orizzontale (allineamento) della linea all'interno della pagina. 'size‘: determina lo spessore della linea. 'width‘: determina la lunghezza della linea (espresso sia in numero di pixel sia come % della larghezza dello schermo) <b>Espressione</b>: specifica che “Espressione” dovrà essere in grassetto <i>Espressione</i>: specifica che “Espressione” dovrà essere in corsivo <u>Espressione</u>: specifica che “Espressione” dovrà essere sottolienato <strike>Espressione</strike>: specifica che “Espressione” dovrà essere sbarrato Dr.ssa Angela Sansonetti

33 Modifica del font Esempio: <font color=red size=5 face=“Courier”>CIAO</font> Specifica il colore Specifica il tipo di carattere Specifica la dimensione del carattere Tag per la definizione del font

34 Titoli, paragrafi, blocchi di testo e contenitori
Nome tag Descrizione <h1></h1> … <h6></h6> H sta per “heading”, ossia titolo. E’ formattato in grassetto e lascia una riga vuota prima e dopo di sé. <p></p> Il paragrafo è l’unità di base entro cui suddividere un testo. Il tag <P> lascia una riga vuota prima della sua apertura e dopo la sua chiusura. <div></div> Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura. <span></span> Lo span è un contenitore generico che può essere annidato (ad es.) all’interno dei DIV. Si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.

35 Link Costituiscono il ponte che consente di passare da un testo all’altro. Sono formati da due elelmenti: il contenuto che “nasconde” il collegamento la risorsa verso cui il collegamento punta I link possono avere lo scopo di: Raggiungere un'altra parte del documento. Aprire un altro documento nello stesso sito Web. Aprire un documento che si trova in qualche altro sito del WWW

36 Link Uno schema di link (storyboard) è un diagramma che illustra come sono collegate due o più pagine Web.

37 I link interni o ancore Per creare un indice interno alla pagina si procede in due fasi distinte: creazione dell’ancora a cui puntare (<a name=”mioNome”>) creazione del collegamento all’ancora appena creata e riferimento attraverso il cancelletto (<a href=”#mioNome”>) Ciascuna ancora può avere un nome: Es: <a name=”primo”>Stiamo per esaminare la struttura…. Eccetera…</a> In un ipotetico indice è allora possibile far riferimento all’ancora presente all’interno del documento attraverso un link che punti ad essa: <a href=”#primo”>vai al primo paragrafo</a> Dr.ssa Angela Sansonetti

38 Link a documenti esterni
Per creare un riferimento ipertestuale si usa l'attributo 'href' che specifica il percorso delle directory ed il nome del file da raggiungere <a href="indice.html">Indice</a> l'indirizzo URL è locale o relativo <a href=" page di Pippo</a> l’indirizzo URL è assoluto Link: indirizzi <a i tuoi commenti a il browser attiverà un programma di posta elettronica (quale particolare programma dipende dalla configurazione del browser) per proporre una finestra per inviare un messaggio di posta elettronica con l'indirizzo già scritto e pari a quello specificato nell'attributo 'href' dopo la stringa 'mailto:'.

39 Link: attributi Target: consente di specificare in quale finestra la pagina linkata deve essere aperta: di default infatti la pagina viene aperta all’interno del documento stesso, ma è possibile specificare che la pagina sia aperta in una nuova finestra: Es. <a target=”_blank” href=” GOOGLE</a> Title: serve per specificare un testo esplicativo per l’elemento a cui l’attributo è riferito (il title si può infatti utilizzare anche per elementi differenti dalle ancore). <a title=“in GOOGLE puoi trovare qualsiasi riferimento” href= target=”_blank” >Visita GOOGLE</a> Hreflang: indica la lingua del documento Nel sito del <a href= hreflang=”eng” target=”_blank” >Word Wide Web Consortium</a>puoi trovare le specifiche dell’HTML in lingua inglese Dr.ssa Angela Sansonetti

40 Link: attributi Modificare il colore
E’ possibile colorare i link all’interno della pagina annidando il tag <font> all’interno del link: Es. <a href=" target=”_blank” > <font color=”red” size=”2” face=”Verdana, Arial, Helvetica, sans-serif”>Torna alla home page di </font> </a> Il tag BASE I percorsi relativi fanno di norma riferimento alla directory in cui si trova il file HTML che stiamo scrivendo. Se tuttavia vogliamo far riferimento a un differente percorso per tutti i percorsi relativi, possiamo farlo specificandolo grazie al tag base, che va incluso nella head del documento. Ad esempio con: <base href=” E poi nel documento si scriverà: <a href=”mioFile.html”>collegamento al mio file</a> che farà riferimento a:

41 Link: possibili stati Collegamento normale: link
Collegamento visitato: visited Collegamento attivo: active Per modificare il colore del link <body link="red"> Per modificare il colore ai link visitati <body vlink="green"> Per modificare il colore dei link attivi <body alink="yellow"> La sintassi completa per impostare i link è, quindi: <body link="red" alink="yellow" vlink="green">

42 Le immagini Il formato grafico da utilizzare per inserimento di immagini è: GIF e JPG Sarebbe opportuno inserire tutte le immagini utilizzate in un’unica cartella “IMMAGINI”

43 Le immagini <IMG src=”logo.gif”>
Ecco come appariranno i tags <img> all’interno del documento ELENCO.HTML (contenuto nella cartella "immagini"): Esempi: <IMG src=”logo.gif”> <IMG src=”ponti/brooklyn.gif”> <IMG src=”ponti/londra.jpg”> <IMG src=”pianeti/marte.gif”> <IMG src=”pianeti/venere.jpg”> <IMG src=”../banner.gif”> <IMG src=” Dr.ssa Angela Sansonetti

44 Le immagini: attributi
align Influenza la disposizione dell'immagine rispetto al testo che la precede e la segue. Può assumere uno dei seguenti valori: left, right, top, bottom, middle alt Inserisce una descrizione dell'immagine. Tale descrizione viene visualizzata dai browser mentre l'immagine viene prelevata; si sostituisce alle immagini se il browser ne ha disabilitato il prelievo automatico e, infine, appare sullo schermo ogni qualvolta il puntatore del mouse si porta sull'immagine. Esempio: <img src=“cartina.gif" alt=“Mappa topografica"> border Quando un’immagine è associata a un altro documento appare circondata da una cornice. L'attributo 'border' ne determina lo spessore in pixel. È possibile fare in modo che tale cornice non venga visualizzata: basta assegnare il valore zero all'attributo 'border‘. Esempio <img src="tigre.gif" border="0">

45 Tabelle I tag per creare una tabella sono i seguenti:
<table> apre la tabella <tr> “table row”: indica l’apertura di una riga <td> “table data”: indica una cella all’interno di una riga Esempio: <table border="1>     <tr>        <td>prima cella</td>        <td>seconda cella</td>    </tr>    <tr>       <td>terza cella</td>       <td>quarta cella</td>    </tr> </table>

46 Tabelle: attributi border permette di specificare di quanti pixel deve essere il bordo delle tabelle. width definisce la larghezza della tabella relativamente allo schermo, espressa con i valori percentuali, oppure in assoluto, in pixel. Esempio: <table width="100%"> oppure <table width="250"> bgcolor determina il colore di sfondo della tabella. <table bgcolor="#FF0000"> oppure < table bgcolor="red">)

47 Tabelle E’ possibile specificare larghezza ed altezza delle tabelle mediante gli attributi width ed height che possono essere riferiti a tutti e tre i tag (<table>, <tr>, <td>). Esempio: <table width="300" height="200" border="1>     <tr>        <td>prima cella</td>        <td>seconda cella</td>    </tr>    <tr>       <td>terza cella</td>       <td>quarta cella</td>    </tr> </table>

48 Tabelle Esempio: <table width="75%" border="1>     <tr>        <td width="25%">prima cella</td>        <td width="75%">seconda cella</td>    </tr>    <tr>       <td width="25%">terza cella</td>       <td width="75%">quarta cella</td>    </tr> </table>

49 Tabelle: tag opzionali
<caption> è l’intestazione, il titolo con un commento esplicativo sulla tabella <thead> è la testa, la parte iniziale della tabella in cui sono contenute le indicazioni sul contenuto delle celle <tfoot> è il piede, la conclusione della tabella, quella che consente ad esempio di tirare le somme <tbody> è il corpo, la parte centrale con il contenuto vero e proprio della tabella <thead>, <tfoot>, <tbody> sono tag che consentono di individuare gruppi di righe Dr.ssa Angela Sansonetti

50 Tabelle <table border="1" >
Esempio <table border="1" > <caption>Esempio di tabella</caption> <thead> <tr> <td>n.</td> <td>Prodotti</td> </tr> </thead> <tbody> <td>1</td> <td>Caffè</td> <td>2</td> <td>Tè</td> </tbody> </table> Esempio di tabella n. Prodotti 1 Caffè 2 Tè

51 Tabelle: raggruppamento celle
<colspan>: Consente di raggruppare le celle all’interno delle colonne Esempio: <table width="430" border="1" bordercolor="#000000">     <tr>          <td width="30%"> <br> <br> <br> </td>          <td width="30%"> </td>          <td width="30%"> </td>     </tr>     <tr>          <td><br> <br> <br> </td>          <td colspan="2"> </td>    </tr> </table>

52 Tabelle: raggruppamento celle
<rowspan>: Consente di raggruppare le celle all’interno delle righe Esempio: <table width="430" border="1" bordercolor="#000000">    <tr>          <td width="30%"> <br> <br> <br> </td>          <td width="30%" rowspan="2"> </td>          <td width="30%"> </td>    </tr>    <tr>          <td><br> <br> <br> </td>          <td> </td>    </tr> </table>

53 Tabelle: annidamento E’ possibile annidare le tabelle le une dentro le altre. Esempio: <table width="430" border="1">    <tr>         <td width="50%"> </td>         <td width="50%"> </td>    </tr>     <tr>         <td height="24"> </td>         <td><table width="100%" border="1">                  <tr>                       <td> </td>                        <td> </td>                         <td> </td>                   </tr>                   <tr>                        <td> </td>                         <td> </td>                         <td> </td>                   </tr>         </table></td>    </tr> </table>

54 Impostare la lingua del documento
I Suoni <a href="esempi/start.wav"> Kde start (file WAV 278 kb) </a> I più comuni file audio utilizzabili in rete sono quelli WAVE I Video Digitali <a href="esempi/clock.avi">breve filmato (formato avi 81 KB)</a> Impostare la lingua del documento <body lang=“it”> Questo attributo non carica automaticamente il set di caratteri necessari alla visualizzazione della lingua, ma si limita a specificare che il documento (o parte del documento) è nella lingua indicata.

55 Testo scorrevole <marquee>…….</marquee>
Questo tag consente di rendere scorrevoli sia le scritte che le immagini <marquee>…….</marquee> Attributi Loop=n numero di iterazioni (-1 scorrimento continuo) Behavior= funzionamento scroll slide alternate (il testo rimbalza da una parte all’altra dello schermo) Direction= verso di scorrimento left right Up down Esempio <font color=red size=5 face=“Courier”> <marquee loop=-1> CIAO </marquee></font> Esempio <marquee loop=-1> <img src=“sign1.gif”></marquee>

56 I Frame <html> <head>
Il tag frame permette di suddividere una finestra di un browser in sotto finestre ciascuna delle quali può visualizzare un documento HTML indipendente dagli altri. <html> <head> <title>Esempio di frame</title> </head> <frameset rows="15%,*"> <frame src="file1.html"> <frame src="file2.html"> </frameset></html> L'attributo scr serve per poter indicare quali file html devono essere caricati nei vari frame.

57 I Frame Sebbene i documenti che riempiono i frame siano normali documenti HTML, il documento che contiene i frame non ha il tag <body> all'interno del codice HTML. Il tag <frameset> sostituisce il tag <body> nel documento con i frame. <html> <head> <title>Esempio di frame annidati</title> </head> <frameset cols="40%,*"> <frame src="file1.html"> <frameset rows="40%,33%,*"> <frame src="file2.html"> <frame src="file3.html"> <frame src="file4.html"> </frameset> </html> Il tag <frameset> ha sostanzialmente due importanti attributi: Rows, permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso, significa che ci troviamo di fronte a una struttura a colonne. Cols, permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso significa che ci troviamo di fronte una struttura a righe

58 I Frame: sistemi di misura della grandezza dei riquadri
dimensione fissa Questa sintassi crea un frameset di 2 righe con 3 colonne ciascuna, per un totale di 6 riquadri: <frameset rows="150,*" cols="100,200,*"> L’altezza della 1a riga è di 150 pixel, mentre la seconda si adatta al resto della pagina. Le tre colonne sono larghe rispettivamente: 100 pixel, 200 pixel, e la terza colonna si adatta al resto della pagina percentuale Questa sintassi crea un frameset che si adatta alla risoluzione. La grandezza dei riquadri è espressa in percentuale: <frameset rows="20%,80%" cols="25%,25%,50%"> proporzionale In questo caso la ripartizione è proporzionale: <frameset rows="1*,3*" cols="3*,2*,1*"> per quel che riguarda le righe: l’altezza viene suddivisa in 4 parti (1+3); la prima riga ne occupa 1 parte e la seconda riga ne occupa 3 per quel che riguarda le colonne: l’altezza viene suddivisa in 6 parti (3+2+1); la prima colonna occupa 3 parti, la seconda riga ne occupa 2 e la terza 1

59 Frameset: attributi <frameset frameborder="no" cols="25%,75%">
L’attributo frameborder (di default impostato a “yes”) permette di specificare se nel frameset devono essere presenti i bordi. <frameset framespacing="20" border=”20” cols="25%,75%"> framespacing funziona solo con Internet Explorer e permette di impostare lo spazio tra un frame e l’altro. Di fatto equivale all’attributo border, che permette di specificare lo spessore dei bordi in pixel. Per mantenere la compatibilità con Internet Explorer 4 (che non legge l’attributo border), di solito si specificano sia il framespacing, sia il border. <frameset border="10" framespacing="10" bordercolor=”#FF0000” cols="25%,75%"> bordercolor permette di specificare il colore dei bordi del frameset.

60 Frame: attributi <frame src=”nomefile.html” scrolling=”no”> <frame src=”nomefile.html” scrolling=”auto”> L’attributo scrolling (di default impostato a “yes”) specifica se si vuol consentire o meno all’utente di poter scorrere il frame. Nel caso sia impostato a “no”, il frame non ha la barra di scorrimento anche nel caso in cui il contenuto della pagina HTML vado oltre la cornice. “scrolling” può anche essere impostato ad “auto”.In questo caso la barra di scorrimento compare in automatico, ma solo se necessario. <frame src=”nomefile.html” scrolling=”no”> <frame src=”nomefile.html” scrolling=”no” noresize> noresize impedisce al singolo frame di essere ridimensionato. Se usato insieme a scrolling=”no”, di fatto “blocca” il contenuto del frame. Un uso maldestro di questa tecnica potrebbe però impedire all'utente la corretta visualizzazione dei contenuti.

61 Frame: attributi <frame src=”nomefile.html” frameborder=”0”>
frameborder consente di far apparire o meno i bordi del frame (i valori ammessi sono "0" e "1", ovvero "no" e "yes"). Questo attributo permette di specificare un valore differente da quello impostato nel frameborder del <frameset> <frame marginwidth="50" marginheight="50" src=“nomefile.html"> marginheight e marginwidth permettono di impostare la distanza verticale (marginheigth) e orizzontale (marginwidth) tra i bordi del frame e il suo contenuto.

62 Frameset: il target dei link
L’attributo target consente di 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”> Esistono, poi, delle parole chiave che 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). Il comportamento di “_parent” è particolarmente evidente in una struttura annidata in cui alcune pagine HTML contengono a loro volta dei frameset: in questo caso viene caricato il contenuto del link nel frameset immediatamente precedente alla pagina del link. target=”_top” Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame. Più esattamente il documento viene carictao nella parte più alta ("top") della struttura, ed è questo il motivo per cui il frameset stesso viene annullato e sostituito dal contenuto del link.

63 HTML: separare il layout dal contenuto
Problema: Se avessimo tutti i titoli del nostro documento in rosso e in grassetto e decidessimo di trasformarli in verde e in corsivo, con l’HTML classico (cioè l’HTML 3.2) dovremmo modificare a mano ogni tag contente le indicazioni della formattazione. Fogli di stile: consentono di separare il contenuto dalla formattazione <p> <font color="green"> <i> titolo 1 </i> </font> </p> <p class="formattaTitoli"> titolo 1 </p> Dr.ssa Angela Sansonetti

64 HTML: MAIUSCOLO O MINUSCOLO?
L’HTML è “case unsensitive”, cioè indipendente dal formato. Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo. <P ALIGN=”RIGHT”> e <p align=”right”> vengono letti allo stesso modo dal browser. - Per aumentare la leggibilità del codice è consigliabile scrivere in maiuscolo il nome del tag (es: <P>) e in minuscolo gli attributi (es: align=”right”). Quindi: <P align=”right”>

65 HomePage.htm Biografia.htm
Esercitazione: riprodurre le seguenti due pagine HomePage.htm Biografia.htm

66 Index.htm <html> <head>
<title>Benvenuti nella mia pagina personale</title> </head> <body bgcolor="#0000FF"> <p><b><font face="Arial" size="4" color="#FF1000">Benvenuti nella mia pagina personale!</font></b></p> <p><font face="Arial">Esplorando questo sito potrete consultare la mia biografia</font></p> <p> </p> <p><img border="0" src="FPTutor001.jpg" width="216" height="140"></p> </body> </html>

67 Biografia.htm … <html> <head>
<title>La mia biografia</title> </head> <body> <p><b><font color="#0000FF" size="4">La mia biografia</font></b></p> <table border="1" width="55%" id="table1"> <tr> <td width="194" bgcolor="#FF00FF"><b>Data di nascita</b></td> <td>03/09/1980</td> </tr> <td width="194" bgcolor="#FF00FF"><b>Luogo di nascita</b></td> <td>Lecce</td> <td width="194" bgcolor="#FF00FF"><b>Studi effettuati</b></td> <td>Laurea in Biologia</td>

68 … Biografia.htm <tr>
<td width="194" bgcolor="#FF00FF"><b>Esperienze lavorative</b></td> <td>Collaborazione presso laboratorio di analisi</td> </tr> </table> </body> </html>

69 IL LINGUAGGIO HTML Riferimenti: