1/69 IL LINGUAGGIO HTML 2/69 Definizioni SITO WEB SITO WEB: Insieme di informazioni (testuali,...

1/69

IL LINGUAGGIO HTMLIL LINGUAGGIO HTML

2/69

DefinizioniDefinizioniSITO WEBSITO 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 SITOPROGETTARE 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 SITOBUON 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.

IPERTESTOIPERTESTO: Testo costituito da segmenti autonomi di informazioni legati tra loro da “linklink”, ossia Nodi Associativi che permettono al lettore di navigare liberamente da una pagina all’altra.

ARCHITETTURAARCHITETTURA: Il modo in cui un sito organizza le proprie pagine.

3/69

MODELLO CLIENT-SERVERMODELLO 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

URLURL: 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

DefinizioniDefinizioni

4/69

PROTOCOLLOPROTOCOLLO: 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 (http://www.scienze.univr.it/index.html ) permette di ricercare e visualizzare in locale il documento index.html dall'indirizzo specificato.

DOMINIODOMINIO: 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.

HTMLHTML: HyperText Markup Language - Linguaggio per pubblicare informazioni sul WWW

DefinizioniDefinizioni

5/69

Html: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: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: 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

Linguaggi di programmazione per la Linguaggi di programmazione per la creazione di siti webcreazione di siti web

6/69

Linguaggio HTMLLinguaggio HTMLHTML: 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.

7/69

Linguaggio HTMLLinguaggio HTML 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 TESTOTESTO (che si vuole pubblicare)2. una serie di COMANDICOMANDI (“tag”) per la formattazione del testo, l’inserimento di link ipertestuali e di grafica

8/69

I TAG:

-Possiedono nomi diversi a seconda della loro funzione

- Possono assumere diverse forme: Tag Semplici o vuotiTag Semplici o vuoti: servono a formattare le pagine <ISTRUZIONE>

<ISTRUZIONE>xxxxx</ISTRUZIONE>

Tag ad apertura/chiusuraTag ad apertura/chiusura detti contenitoricontenitori: utilizzati per manipolare i dati posti al loro interno.

Linguaggio HTML – I TAGLinguaggio HTML – I TAG

9/69

I TAGI TAGTAG VUOTOTAG 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 CONTENITORITAG 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>

10/69

Esempi di TAGEsempi di TAG<html><html> indica l’inizio del documento Html; non obbligatorio ma consigliato

<title>Il Mio <title>Il Mio Documento</title>Documento</title>

Definisce il titolo (“Il Mio Documento”) del documento che stiamo per creare.

<body><body> Definisce l’inizio del corpo vero e proprio del documento.

Verrà chiuso da un tag </body>

<H1> testo </H1><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><P> testo </P> Definisce l’apertura e la chiusura di un paragrafo. Il tag di chiusura </P> può essere omesso.

<br><br> causa un ritorno a capo (Break).

<I> testo </I> Il testo compreso tra questi tag verrà visualizzato in corsivo (Italic)

11/69

<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; &(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

Esempi di TAGEsempi di TAG

12/69

HTML: struttura del documentoHTML: struttura del documento

<HEAD>xxxxxxxxxxxxx

</HEAD>

<BODY>

bla bla bla bla bla

</BODY>

<HTML>

</HTML>

Un documento HTML è normalmente diviso in due sezioni:

13/69

- <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-8859-1">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-8859-1">

<title>Corso su HTML</title>

</head><body>

Qui il nostro contenuto

</body></html>

14/69

<html> <head><head> <title>La mia prima pagina web</title> <title>La mia prima pagina web</title> </head></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/69

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:



e ci permette di "commentare" i vari punti della pagina. Ad esempio:

16/69

EsempioEsempio

<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="http://www.unile.it/">questo 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>

Di tutto il codice scritto i browser visualizzeranno solo ciò che è presente nel corpo (body) del listato; quindi fra gli elementi <body> e </body>,

17/69

I TAG - I TAG - Allineamento e indentazioneAllineamento 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>

18/69

I TAG - I TAG - Allineamento e indentazioneAllineamento 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>

19/69

Allineamento del testoAllineamento del testoL'attributo 'align' , consente l’allineamento del testo a sinistra, a destra o al centro della pagina

AllineamentoAllineamento SintassiSintassi

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/69

Le listeLe 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/69

Gli elenchi ordinatiGli elenchi ordinati

Esempio:

<div>Elenco elementi <ol> <li>primo elemento <li>secondo elemento <li>terzo elemento </ol>testo che segue la lista</div>

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.

22/69

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>

Gli elenchi ordinatiGli elenchi ordinati

23/69

Gli elenchi ordinati: stili consentitiGli elenchi ordinati: stili consentitiValore 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

<ol type="1">

<li>primo

<li>secondo

<li>terzo

</ol>

type=“A” Alfabeto maiuscolo

<ol type="1">

<li>primo

<li>secondo

<li>terzo

</ol>

24/69

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

<ol type="1">

<li>primo

<li>secondo

<li>terzo

</ol>

Gli elenchi ordinati: stili consentitiGli elenchi ordinati: stili consentiti

25/69

ListeListe

L'attributo “start” consente di indicare l'inizio della numerazione quando questo è diverso da uno. Esempio:

<ol start="10"> <li>Primo elemento della lista</li> <li>Secondo elemento della lista</li>

</ol>

10. Primo elemento della lista 11. Secondo elemento della lista

26/69

Gli elenchi non ordinatiGli elenchi non ordinati

Esempio:

<ul> <li>primo elemento

<li>secondo elemento <li>terzo elemento

</ul>

<ul>: “unordered list” è il tag da usare per aprire un elenco ordinato<li>: “list item” individua gli elementi

27/69

Gli elenchi non ordinatiGli elenchi non ordinatiIl 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">

<li>primo

<li>secondo

<li>terzo

</ul>

type=“square” Visualizza un quadrato pieno

<ul type=“square">

<li>primo

<li>secondo

<li>terzo

</ul>

28/69

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>

Gli elenchi di definizioniGli 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

29/69

<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>

Liste annidateListe annidate

• 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/69

Attributo bgcolorbgcolorPer 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 backgroundbackgroundConsente 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”>

31/69

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"

Codici esadecimali dei colori

32/69

Tag di formattazioneTag di formattazioneAll'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

33/69

Modifica del fontModifica del font

Esempio:

<font color=red size=5 face=“Courier”>CIAO</font>

Tag per la definizione del font

Specifica il colore

Specifica la dimensione del carattere

Specifica il tipo di carattere

34/69

Titoli, paragrafi, blocchi di testo e contenitoriTitoli, paragrafi, blocchi di testo e contenitori

Nome tagNome tag DescrizioneDescrizione

<h1></h1><h1></h1>

……

<h6></h6><h6></h6>

H sta per “heading”, ossia titolo. E’ formattato in grassetto e lascia una riga vuota prima e dopo di sé.

<p></p><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><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><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/69

LinkLink

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/69

LinkLinkUno schema di link (storyboard) è un diagramma che illustra come sono

collegate due o più pagine Web.

37/69

I link interni o ancoreI link interni o ancorePer 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:

Es:<a href=”#primo”>vai al primo paragrafo</a>

38/69

Link a documenti esterniLink a documenti esterni

Per creare un riferimento ipertestuale si usa l'attributo 'href''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="http://arena.sci.univr.it/pippo.html">Home page di Pippo</a> l’indirizzo URL è assoluto

<a href="mailto:[email protected]">Invia i tuoi commenti a [email protected]!</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:'.

Link: indirizzi e-mailLink: indirizzi e-mail

mailto:[email protected]!%3C/a

39/69

Link: attributiLink: attributiTarget: 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=”http://www.google.it”>visita 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).

Es. <a title=“in GOOGLE puoi trovare qualsiasi riferimento” href=http://www.google.it/”

target=”_blank” >Visita GOOGLE</a>

Hreflang: indica la lingua del documento

Es. Nel sito del <a href=http://www.w3c.org/” hreflang=”eng” target=”_blank” >Word Wide

Web Consortium</a>puoi trovare le specifiche dell’HTML in lingua inglese

40/69

Link: attributiLink: attributiModificare il colore

E’ possibile colorare i link all’interno della pagina annidando il tag <font> all’interno del link:

Es. <a href="http://www.google.it/” target=”_blank” ><font color=”red” size=”2” face=”Verdana, Arial, Helvetica, sans-serif”>Torna alla

home page di www.google.it</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=”http://www.mioSitoWeb.com/miaCartella”>

E poi nel documento si scriverà:<a href=”mioFile.html”>collegamento al mio file</a>che farà riferimento a:http://www.mioSitoWeb.com/miaCartella/mioFile.html

41/69

Link: possibili statiLink: possibili stati

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">

Collegamento normale: link Collegamento visitato: visited Collegamento attivo: active

42/69

Le immaginiLe 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/69

Le immaginiLe immaginiEcco 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=”http://www.netscape.com/logo.gif”>

44/69

Le immagini: attributiLe 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/69

TabelleTabelle

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>

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

46/69

Tabelle: attributiTabelle: 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. Esempio: <table bgcolor="#FF0000"> oppure < table bgcolor="red">)

47/69

TabelleTabelle

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/69

TabelleTabelle

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/69

Tabelle: tag opzionaliTabelle: 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

50/69

TabelleTabelleEsempio

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

Esempio di tabella

n. Prodotti

1 Caffè

2 Tè

51/69

Tabelle: raggruppamento celleTabelle: 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/69

<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>

Tabelle: raggruppamento celleTabelle: raggruppamento celle

53/69

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>

Tabelle: annidamentoTabelle: annidamento

54/69

I SuoniI Suoni<a href="esempi/start.wav"> Kde start (file WAV 278 kb) </a>

• I più comuni file audio utilizzabili in rete sono quelli WAVE

<a href="esempi/clock.avi">breve filmato (formato avi 81 KB)</a>

I Video DigitaliI Video Digitali

Impostare la lingua del documentoImpostare 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/69

Testo scorrevoleTesto scorrevole

<marquee>…….</marquee>Questo tag consente di rendere scorrevoli sia le scritte che le immagini

Esempio

<font color=red size=5 face=“Courier”> <marquee loop=-1> CIAO </marquee></font>

Esempio

<marquee loop=-1> <img src=“sign1.gif”></marquee>

AttributiLoop=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

leftrightUpdown

56/69

I FrameI FrameIl 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/69

I FrameI FrameSebbene 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> </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/69

I Frame: I Frame: sistemi di misura della grandezza dei riquadrisistemi 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

percentualeQuesta 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/69

Frameset: attributiFrameset: 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/69

Frame: attributiFrame: 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/69

Frame: attributiFrame: 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/69

Frameset: il target dei linkFrameset: il target dei linkL’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/69

HTML: separare il layout dal contenutoHTML: 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>

64/69

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/69

HomePage.htm

Biografia.htm

Esercitazione: riprodurre le seguenti due pagine

66/69

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/69

<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><tr>

<td width="194" bgcolor="#FF00FF"><b>Luogo di nascita</b></td><td>Lecce</td>

</tr><tr>

<td width="194" bgcolor="#FF00FF"><b>Studi effettuati</b></td><td>Laurea in Biologia</td>

</tr>

Biografia.htm …

68/69

<tr><td width="194" bgcolor="#FF00FF"><b>Esperienze

lavorative</b></td><td>Collaborazione presso laboratorio di analisi</td>

</tr></table>

</body>

</html>

… Biografia.htm

69/69

Riferimenti: http://www.w3.org/TR/REC-html40/index/list.html

IL LINGUAGGIO HTMLIL LINGUAGGIO HTML

http://www.w3.org/TR/REC-html40/index/list.html

1/69 IL LINGUAGGIO HTML 2/69 Definizioni SITO WEB SITO WEB: Insieme di informazioni (testuali,...

Documents

Transcript of 1/69 IL LINGUAGGIO HTML 2/69 Definizioni SITO WEB SITO WEB: Insieme di informazioni (testuali,...