HTML-XML - Dipartimento di Ingegneria dell`Informazione

Transcript

Corso di Laurea in Scienze della Formazione
Continua e Tecnologie dell’Istruzione
Parte IV
HTML
Corso: Computer Graphics
Docente: Ing. Ivan Bruno
E-mail: [email protected]
HTML-XML- SMIL-X3D




07/04/2011
HyperText Markup Language
(HTML)
Extensible Markup Language (XML)
Synchronized Multimedia
Integration Language (SMIL) – si
pronucia come „smile‟
X3D – extensible 3D
Sistemi di Elaborazione Dati
2
1
HTML - HyperText Markup
Language
Introduzione e nozioni
Obiettivi





07/04/2011
Mostrare, nella pratica, il concetto di ipertesto.
Fornire, in pratica, il concetto di interprete.
Senza avere alcuna conoscenza di
programmazione scrivere (forse per la prima
volta) un semplice programma (… la L di HTML
sta per Language).
Fornire conoscenze per costruire pagine web
statiche senza l‟ausilio di editor specializzati (i.e.
Frontpage, HTML Edit, …).
Fornire conoscenze per la costruzione di pagine
web nelle quali poter ospitare i vostri “contributi
multimediali”.
4
2
Un po’ di storia




07/04/2011
Il WWW (Word Wide Web) fu inventato nel 1991
da Tim Berners Lee al CERN di Ginevra.
Esso consisteva in un sistema per rendere
disponibili su Internet dei contenuti di testi ed
immagini (pagine Web) con facilità, mediante
protocolli di comunicazione (+773), linguaggi di
codifica dei contenuti (+70/), e sintassi per
indicare la collocazione dei contenuti (85/).
Lo standard HTML fu inizialmente sviluppato
dall‟IETF.
Oggi le specifiche dello standard e le sue
evoluzioni sono manutenute World Wide Web
Consosrtium (www.w3c.org).
5
HTML – Le specifiche standard




07/04/2011
Lo standard HTML si è evoluto in diverse versioni
successive: 1.0, 2.0, 3.0, 3.2, 4.0, 4.01.
Un cambio nel nome: la versione attualmente più
recente si chiama XHTML 1.0
Molto simile alla precedente HTML 4.01.
Il cambiamento da HTML a XHTML riguarda
principalmente l‟adozione delle regole più rigide
utilizzate già da XML (un altro tipo di markup
language usato per altri scopi e leggermente più
complesso) per HTML, in modo da renderlo più
facile da processare e manutenere.
6
3
HTML - tag



Un documento HTML è composto sia dal
contenuto che da comandi
Il contenuto è ciò che viene visualizzato
dall‟utente con un browser.
I comandi (o tag) sono le istruzioni che
fanno sì che il documento venga
visualizzato correttamente in tutte le sue
parti così come appare nel browser.
07/04/2011
7
HTML

Le pagine Web, dunque, contengono
due tipi di oggetti:



Il testo del documento;
I tag HTML che indicano gli elementi, la
struttura, la formattazione e i link
ipertestuali con altre pagine, ….
I tag hanno il seguente aspetto:
<NomeTag>testo su cui il tag ha effetto</NomeTag>
07/04/2011
8
4
HTML

I tag definiscono:




intestazioni, paragrafi, elenchi e tabelle
lo stile dei caratteri, ad esempio il
grassetto
…
HTML è un “markup language”

07/04/2011
partendo dal testo si possono poi
applicare alcuni particolari tag a parole
e paragrafi per ottenere la
formattazione richiesta
9
HTML: una semplice pagina



Una pagina Web è un file con estensione .htm o
.html
Il modo migliore per iniziare a creare pagine Web
è quello di usare un semplice editor di testi, ad
esempio Notepad o WordPad
Esistono anche:




07/04/2011
editor grafici di HTML (es. Front Page di Microsoft,
Dreamweaver, HTML Edit…)
editor a Tag
programmi convertitori (Word, WordPerfect ecc.)
L‟altro strumento di cui avremo bisogno per
visualizzare le pagine che scriveremo è il browser.
10
5
La struttura di un documento HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.0//EN">
<HTML>
<HEAD>
<TITLE>Titolo del documento</TITLE>
</HEAD>
<BODY>
<P>Testo di un paragrafo</P>
</BODY>
</HTML>
07/04/2011
11
HTML - Esempio

Primo esempio:
<HTML>
<HEAD>
<TITLE> Home Page di Nome </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
07/04/2011
12
6
HTML – Il Tag <body>



07/04/2011
Dopo l'intestazione deve essere inserito il
corpo del documento, identificato dal
marcatore <body>:
<body>...</body>
Il testo del documento va inserito tra
questi due marcatori, includendo tutti gli
altri marcatori con i quali si vorrà
descriverne la struttura e la forma.
L'elemento '<body>' prevede alcuni
attributi che analizzeremo in seguito.
13
HTML – La prima pagina Web

Cominciamo, dunque, a comporre la nostra
pagina digitando quanto segue:
<HTML>
<HEAD>
<TITLE>La mia prima pagina Web</TITLE>
</HEAD>
<BODY>
<h1>Questa è la home page di Nome Cognome</h1>
<p>Questa e‟ la mia prima pagina in HTML</p>
</BODY>
</HTML>
07/04/2011
14
7
HTML – Cosa appare
07/04/2011
15
HTML



I titoli di un documento possono essere articolati su
vari livelli gerarchici (titolo di sezione, titolo di
capitolo, titolo di paragrafo etc.)
Gli elementi per codificare questi titoli interni hanno
un marcatore della forma <hn>
In HTML sono disponibili sei diversi livelli di titoli:
<h1> è il livello più alto e <h6> il più basso

07/04/2011
Il primo viene solitamente utilizzato per marcare il
titolo di un capitolo, o di una sezione importante, e i
successivi per indicare sottosezioni progressivamente
più piccole.
16
8
HTML - Esempio
<HTML>
<HEAD>
<TITLE>La mia prima pagina Web</TITLE>
</HEAD>
<BODY>
<h1>Questa è la home page di Nome Cognome</h1>
<p>Questa e‟ la mia prima pagina in HTML</p>
<h1>Primo Livello</h1>
<h2>Secondo Livello</h2>
<h3>Terzo Livello</h3>
<h4>Quarto Livello</h4>
<h5>Quinto Livello</h5>
<h6>Sesto Livello</h6>
</BODY>
</HTML>
07/04/2011
17
HTML - Risultato
07/04/2011
18
9
HTML



E‟ possibile inserire più titoli all'interno della
pagina, anche dello stesso livello.
Tutti i marcatori di questi titoli interni supportano
un attributo che permette di specificare
l'allineamento del testo.
Il nome dell'attributo è 'align', e i valori possibili,
che specificano il tipo di allineamento, sono:




center
left
right
Ad esempio:
<h1 align=“center”>Home Page di Nome Cognome</h1>
07/04/2011
19
HTML – L’elemento <p>



07/04/2011
Un documento HTML può essere diviso in
capoversi (paragrafi): a tale fine va
utilizzato l'elemento <p>.
L'effetto visivo di questa istruzione è
quello di inserire un ritorno a capo e una
riga vuota nel testo a video.
Si noti che dopo ogni titolo <hn> il
browser va a capo automaticamente.
20
10
HTML – L’elemento <p>

Riportiamo nel nostro file le due
parti che seguono:
<p>Questa riga</p><p>va a capo</p>
<p>Questa, invece,
appare scritta riga su un’unica riga
nonostante ci siano degli a capo</p>
07/04/2011
21
HTML


L‟esempio precedente ci dice che l‟HTML visualizza i
capoversi separandoli in funzione dell‟istruzione <p> e
non degli “a capo” eventualmente presenti nel nostro
file.
Anche il marcatore <p> può avere degli attributi di tipo
'align'.


Un altro marcatore che riguarda la gestione dei salti di
linea è <br> (break).



07/04/2011
<p align=“right”>, ad esempio, sposterà a destra il
capoverso.
La sua funzione è quella di provocare un “ritorno a capo”
senza introdurre una riga vuota.
<br> non ha un marcatore di chiusura in quanto indica
semplicemente il punto in cui intervenire.
Ricorrendo a più marcatori <br> in sequenza si possono
creare delle spaziature verticali.
22
11
HTML – Liste non numerate



In un documento possono comparire anche elenchi
ordinati di voci, o liste che possono essere numerate
(ad ogni voce della lista è assegnato automaticamente
un numero progressivo) o non numerate (ogni voce
della lista è preceduta da un pallino).
HTML fornisce una serie di elementi per inserire liste
all'interno di pagine Web.
La sintassi per le liste non numerate è la seguente:
<ul>
<li>Prima voce</li>
<li>Seconda voce</li>
<li>Terza voce</li>
</ul>
07/04/2011
23
HTML – Liste numerate

Le liste numerate si costruiscono nello
stesso modo, ma il tag di apertura è <ol>
(ordered list) e quello di chiusura,
ovviamente, </ol>. All'interno, ancora
una serie di elementi <li>
<ol>
<li>Prima voce</li>
<li>Seconda voce</li>
<li>Terza voce</li>
</ol>
07/04/2011
24
12
HTML - Evoluzione
07/04/2011
25
HTML – Le liste

Il formato delle liste può essere
controllato mediante alcuni attributi
tra cui:

type=“x” dove x può assumere uno dei
seguenti valori:
circle = cerchio
square = quadratino
 I = numeri romani maiuscole
 i = numeri romani minuscoli
 a = lettere minuscole
 A = lettere maiuscole


07/04/2011
26
13
HTML – Gli stili

In genere gli stili di carattere sono corsivo,
grassetto, sottolineato. HTML dispone dei
seguenti stili:
<strong> … … </strong>
Testo molto rilevante (viene reso di norma in
grassetto)
 <em>… … </em>
Testo enfatizzato (viene reso di norma in corsivo)
 <cite>… …</cite>
Testo citato (viene reso di norma in corsivo)
 <address>……</address>
Indirizzo (viene reso in corsivo o in grassetto con un
carattere piccolo)

07/04/2011
27
HTML – Gli stili







<b>……</b> grassetto
<u>……</u> carattere sottolineato
<i>……</i> carattere italico o corsivo
<big>……</big> carattere più grande
<small>……</small> carattere più piccolo
Il tag <blockquote> consente di aggiungere degli
spazi (come fosse un tabulatore)
Gli stili possono essere sommati; ad esempio, per
ottenere un testo corsivo neretto si può scrivere:
<b><i>Questa riga è in neretto e corsivo</i></b>

07/04/2011
La cosa importante è creare codice nidificato
28
14
HTML - Evoluzione
07/04/2011
29
HTML – Righe orizzontali

L'elemento <hr> ha lo scopo di inserire una linea
orizzontale fra blocchi di testo o immagini
all'interno di una pagina Web. Si tratta di un
marcatore che non richiede tag di chiusura. Alcuni
attributi applicabili sono:




07/04/2011
size =“n” dove n indica lo spessore della riga (es.;
<hr size=“5”>)
noshade serve a eliminare l‟effetto ombra della
linea <hr noshade>)
width=“n%|n” regola la larghezza della riga, sia in
percentuale, relativamente alla larghezza dello
schermo, sia in assoluto, in pixel (es.: <hr
width=“50%” oppure <hr width=250>)
align=“left|center|right” allinea la riga
rispettivamente a sinistra, al centro e a destra, ad
es.:<hr aligh=“right” width=“80%”>
30
15
Evoluzione
07/04/2011
31
HTML – Attributi di Body

Ci sono degli attributi che possono essere aggiunti
all'elemento <body> per specificare l'aspetto del testo
e dello sfondo in una pagina Web:

background = “file grafico”


bgcolor =“#colore RGB”

text =“#colore RGB”

link =“#colore RGB”

vlink =“#colore RGB”

alink =“#colore RGB”





07/04/2011
permette di indicare un file grafico (in formato GIF o JPEG)
che viene inserito sullo sfondo della pagina; se l'immagine è
più piccola rispetto alla pagina, essa viene automaticamente
duplicata e affiancata alle sue copie
permette di assegnare un colore allo sfondo
indica il colore del testo all'interno della pagina
indica il colore dei link
indica il colore dei link già attivati
indica il colore dei link mentre si attivano con il mouse
32
16
HTML - Colori
Colore
Arancione
Bianco
Blu
Celeste
Giallo
Grigio
Marrone
Nero
Rosa
Rosso
Verde
Viola
Esadecimale
# FF8000
# FFFFFF
# 0000FF
# 80FFFF
# FFFF00
# C0C0C0
# 804040
# 000000
# FF8080
# FF0000
# 00FF00
# 8080FF



Il valore che segue
l‟attributo BGCOLOR è un
valore esadecimale che
indica il colore.
I l colore è dato dalla
fusione dei tre colori
principali RGB
Le prime due cifre
indicano la quantità di
Rosso, le seconde la
quantità di Verde mentre
le terze la quantità di Blu
(# rrvvbb).
07/04/2011
33
07/04/2011
34
17
HTML - Colori
<HTML>
<HEAD>
<TITLE>IMMAGINE</TITLE>
</HEAD>
<BODY BGCOLOR=“#00FF00”>
<B>Prova colore sfondo</B>
<P>
</BODY>
</HTML>
07/04/2011
35
36
Risultato
07/04/2011
18
HTML – Dimensionamento dei caratteri



Nel caso di dimensionamento in termini assoluti si
usa il seguente marcatore:
<font size="n">testo</font>
Dove “n” è un numero che va da 1 a 7, ad es.:
<font size="4">Prova</font>.
La dimensione normale del font è 3. Dunque se si
usano gli indici 1 o 2 si ottiene un font ridotto
rispetto al testo normale, mentre con 4, 5, 6 e 7
si ottiene un font ingrandito.
07/04/2011
37
HTML – Dimensionamento dei caratteri


Nel caso di dimensionamento in termini relativi si
usa la seguente marcatura:
<font size="+/- n">testo</font>
In questo caso n può variare da -2 a +4. Usando
in modo combinato i vari tag è possibile ottenere
effetti come questo:
<font
<font
<font
<font
07/04/2011
size="+4">H</font>
size="+3">E</font>
size="-1">L</font>
size="+2">LO</font>
38
19
HTML - Immagini
<HTML>
<HEAD>
<TITLE>Esempio pagina con IMMAGINE</TITLE>
</HEAD>
<BODY BGCOLOR=“#000000”>
<IMG src=“tango1.jpg” alt=“Hugo Pratt/CortoMaltese e il tango”>
<P>
</BODY>
</HTML>


Se il file che contiene l‟immagine non si trova nella stessa
directory del file html che lo include, si dovranno specificare
anche i nomi delle directory (cartelle) fino a quella in cui si
trova il file HTML (specificare il path), separati dalla barra (/),
in questo modo:
< img src='„immagini/tango1.jpg''>
L‟attributo alt
07/04/2011
39
HTML - Immagini
07/04/2011
40
20
HTML - Immagini

L‟elemento <img> è corredato da diversi attributi:

per modificare le dimensioni (consigliati programmi di grafica) si
può disporre degli attributi width e height. Ad esempio:
<img src=“esempio.gif” height=“150” width=“45”>


Attributo alt consente di inserire un testo accanto all‟immagine:
alt=“testo descrittivo”
Attributo align per definire posizione dell‟immagine rispetto al
testo. Esempi:



align=“top”
align=“middle”
align=“bottom”
Altri attributi

testo allineato in alto
testo allineato al centro
testo allineato in basso
hspace = spaziatura orizzontale (in pixel)
vspace = spaziatura verticale (in pixel)
border = il bordo (in pixel)
Un‟immagine può essere usata anche come sfondo come visto in
precedenza
<body background=“path completo”>
07/04/2011
41
HTML - Link
I link sono definiti attraverso l‟elemento A (anchor interno al documento) e
LINK (relazione tra documenti).
Alcuni attributi:





HREF: specifica una destinazione. Quindi <A HREF="xx"> è un estremo di partenza.
La destinazione è specificata come un URL (Universal Resource Locator). Gli URL
sono o assoluti ("http://www.cs.unibo.it/~fabio/index.html") o relativi
("esempio2.html").
NAME: specifica un nome utilizzabile come destinazione puntuale di un link.
 Es: <A HREF="esempio2.html#prova">click </A> conduce al frammento <A
NAME=“prova”>blah blah</A> del documento “esempio2.html”
REL e REV: definiscono un tipo di realazione (e la relazione inversa) che esiste tra un
documento e l‟altro grazie al link. Esempi: Alternate, Stylesheet, Start, Next, Prev,
Contents, Index, Copyright, ecc.
TARGET: con i frame, permette di specificare in quale frame avverrà la
visualizzazione del link. Esistono alcuni target predefiniti.
 L‟attributo TARGET= “_new” indica al browser di caricare il link a
http://www.ciao.it in una nuova (_new) finestra.
07/04/2011
42
21
HTML – Link ed e-mail

E‟ possibile inserire collegamenti anche
verso indirizzi e-mail, attraverso una
sintassi leggermente diversa da quella
indicata per le URL:
<A HREF="mailto:[email protected]">Scrivimi!</A>

07/04/2011
Cliccando su questo link viene
automaticamente aperto il programma di
posta predefinito con il campo TO/A già
impostato su [email protected].
43
URL assoluti e relativi (1)



Un URL individua una risorsa esterna a cui il documento
fa riferimento (es. immagini, link, script, fogli di stile,
oggetti multimediali, ecc.)
Un URL assoluto specifica senza default tutte le parti
rilevanti dell'indirizzo della risorsa:
http://www.sito.com/dir1/dir2/name.html#pippo




07/04/2011
Protocollo: (http://): il protocollo di connessione
Nome di dominio: il computer su cui risiede il server Web
Nome locale: l'insieme di directory e il nome del documento
Frammento: la parte interna al documento in cui voglio
individuare la risorsa.
44
22
URL assoluti e relativi (2)


Un URL relativo, invece, non specifica alcune parti a
partire da sinistra. Queste parti si assumono specificate
per default sulla base del documento visualizzato (detto
base)
Se la base è
http://www.sito.com/dir1/dir2/pippo.html#pluto







… allora…
/dir3/paperino.html corrisponde a
http://www.sito.com/dir3/paperino.html,
minnie.html corrisponde a
http://www.sito.com/dir1/dir2/minnie.html
#nonnapapera corrisponde a
http://www.sito.com/dir1/dir2/pippo.html#nonnapapera

07/04/2011
45
Link ed immagini
<BODY>
<H1>Questa è una prova di IMG ed A</H1>
<P>L'elemento <A> definisce gli estremi dei link. </P>
<UL>
<LI>L'attributo HREF del tag A crea l'estremo di
partenza di un documento. Qui c'è un
esempio che porta al <A HREF="1.html">primo
documento</A>. </LI>
<LI>L'attributo NAME specifica quello come luogo di
destinazione di un link. Ad esempio:
<A NAME="prova">dell'estremo di un link</A>. </LI>
</UL>
<P>L'elemento <IMG> inserisce in questa posizione
un'immagine posta in un file esterno. <BR>Ad esempio:
<IMG SRC="esempio.gif" ALT="Un rettangolo ed un'ellisse">
<UL>
</UL>
</BODY>
07/04/2011
<LI>L'attributo SRC specifica l'URL del file che
contiene l'immagine. </LI>
<LI>L'attributo ALT specifica una stringa da
visualizzare se non si può visualizzare
l'immagine. </LI>
46
23
Il risultato su Netscape
07/04/2011
47
HTML - Tabelle





07/04/2011
Le tabelle vengono specificate riga per riga.
Di ogni riga si possono precisare gli elementi, che
sono o intestazioni o celle normali.
Una tabella può anche avere una didascalia,
un‟intestazione ed una sezione conclusiva.
E‟ possibile descrivere insieme le caratteristiche
visive delle colonne.
Le celle possono occupare più righe o più colonne.
48
24
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:



07/04/2011
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>
49
Un esempio di tabella
<table border="2" align="center" width="50%”
cellpadding="5" cellspacing="0">
<tr>
<th>Venditore</th><th>Gennaio</th>
<th>Febbraio</th> <th>Marzo</th>
</tr>
<tr>
<td>Mario Rossi</td> <td>12000</td>
<td>13000</td><td>15000</td>
</tr>
<tr>
<td>Ugo Verdi</td><td>7000</td>
<td>9000</td><td>11000</td>
</tr>
<tr>
<td>Andrea Bruni</td><td>25000</td>
<td>23000</td><td>30000</td>
</tr>
</table>
07/04/2011
50
25
Il risultato della tabella
07/04/2011
51
Il codice della tabella
Le celle possono occupare più righe o più colonne.
<table border=2 align=center>
<tr>
<td>Prima riga <br> Prima colonna</td>
<td colspan="2">Prima riga<br>Seconda colonna</td>
</tr>
<tr>
<td colspan="2">Seconda riga <br> Prima colonna</td>
<td rowspan="2">Seconda riga <br> Terza colonna</td>
</tr>
<tr>
<td>Terza riga <br> Prima colonna</td>
<td>Terza riga <br> Seconda colonna</td>
</tr>
</table>
07/04/2011
52
26
Un altro esempio di tabella
07/04/2011
53
HTML – Tabelle e attributi

border=“n" (es.: <table border="1">)


cellpadding=“n" (es.: <table cellpadding="10">)


a larghezza della tabella relativamente allo schermo, espressa con i valori
percentuali, oppure in assoluto, in pixel.
bgcolor="#rrggbb" (es.: <table bgcolor="#FF0000"> oppure < table
bgcolor="red">)

07/04/2011
è la distanza tra una cella e un‟altra.
width=“n | n%" (es.: <table width="100%"> oppure <table
width="250">)


è lo spazio tra il bordo della tabella e il testo contenuto all‟interno delle
celle.
cellspacing=“n" (es.: <table cellspacing="5">)


rende visibile il bordo della tabella. Il valore Q è in pixel.
determina il colore di sfondo della tabella. La sintassi di rrggbb è la
medesima vista per attribuire colori allo sfondo del documento o ai
caratteri. In alternativa ai valori esadecimali si possono anche qui usare i
nomi dei colori, in inglese (red, green, ecc.)
54
27
I tag delle tabelle (1)

TABLE
Introduce una tabella, ed è composto di una etichetta,
una descrizione di colonne, una intestazione, una
conclusione ed un corpo. Attributi:




SUMMARY: una descrizione testuale del contenuto
della tabella per browser non grafici
ALIGN, WIDTH: allineamento e larghezza della
tabella rispetto alla pagina. Deprecati
CELLPADDING, CELLSPACING: spazio tra cella e
testo e tra cella e cella, espresso in pixel.
FRAME, RULES, BORDER: tipo di bordo associato alla
tabella o alle singole celle.
07/04/2011
55

CAPTION
Introduce una etichetta per la tabella.

THEAD, TFOOT e TBODY
La testa, la coda e il corpo della tabella. Tutti e tre
contengono righe di tabella (elementi TR)

COLGROUP, COL
Permettono di descrivere l‟aspetto di colonne e gruppi
di colonne della tabella. Attributi:



07/04/2011
SPAN: il numero di colonne a cui assegnare le
proprietà
WIDTH: la larghezza in pixel della colonna
ALIGN, VALIGN: allineamento orizzontale e
verticale del contenuto della colonna
56
28

TR
Introduce una riga di una tabella. Attributi:


verticale del contenuto della tabella
TD, TH
Una cella di dati o di intestazione. Attributi:




07/04/2011
WIDTH, HEIGHT (deprecati): larghezza ed altezza
della cella
NOWRAP (deprecato): esclude la formattazione in
paragrafo del contenuto
verticale del contenuto della colonna
COLSPAN, ROWSPAN: estende la cella a coprire più
colonne o più righe della tabella.
57
Entità in HTML




HTML definisce un certo numero di entità per
quei caratteri che sono:
proibiti perché usati in HTML (<, >, &, “, ecc.)
proibiti perché non presenti nell‟ASCII a 7 bit.
Ad esempio:
amp
&
quot
“

lt (less than)
<

gt (greater than) >

reg
®

nbsp (non-breaking space)

Aelig
Æ

Aacute
Á

Agrave
À

Auml
Ä

aelig
æ

aacute
á

agrave
à

auml
ä

ccedil
ç

ntilde
ñ
ecc.


07/04/2011
58
29
HTML - commenti
Sintassi per un commento (ovunque nel
file):


Utilizzati per segnalare delle sezioni di
codice o altre informazioni utili a chiunque
utilizzi la pagina HTML


NON interpretate da BROWSER

Utilizzare la scrittura indentata (soprattutto
per programmi particolarmente lunghi)
07/04/2011
59
HTML - Frames

Una pagina WEB può essere suddivisa in
più aree indipendenti denominate frame.




07/04/2011
Permettono di visualizzare più elementi di
interesse primario
Migliorano l‟aspetto finale della pagina WEB
E‟ consigliabile non eccedere nel loro uso per
non appesantire la realizzazione del sito.
Un punto a loro sfavore è l‟incompatibilità con
alcuni browser che non supportano il loro
utilizzo per cui, di norma, si crea una versione
del sito con frames ed una versione senza
frames.
60
30
HTML – Esempio di utilizzo dei frames
Frame per il
documento
HOME
Frame per la
navigazione
Link 1
Link 2
Contenuto
Home Page
Link 3
07/04/2011
61
HTML – Suddivisione orizzontale
Riga 1
Riga 2
07/04/2011
62
31
HTML – Frames, tag
Occorre utilizzare i TAG
<frameset>…</frameset>
Che servono per delimitare la definizione di tutta la
struttura
…e i TAG
<frame src=“nome1.htm” name=“alias1”>
<frame src=“nome2.htm” name=“alias2”>
Che servono a definire il nome convenzionale alle righe o
alle colonne
07/04/2011
63
HTML – Frames e Tag



07/04/2011
<frameset> è il tag iniziale (sostituisce a tutti gli
effetti il tag <body>) e raccoglie la descrizione
dei frame presenti nella pagina. Quando la lista
dei frame termina, si inserisce il tag finale
</frameset>
Il tag <frame> serve alla definizione di ogni
singolo frame e non necessita di chiusura, dato
che esso termina quando se ne definisce uno
nuovo oppure quando si usa il tag </frameset>
Per organizzare una pagina con frame occorre
dapprima costruire e predisporre le pagine html
che riempiranno i diversi frame e
successivamente definire i frame all‟interno della
pagina principale.
64
32
HTML – Frames, struttura a colonne
<HTML>
<HEAD>
<TITLE>Pagina con Frame</TITLE>
</HEAD>
<FRAMESET COLS=“15%, 85%">
<frame src=“primo.html" name="menu">
<frame src=“secondo.html" name="mypage">
</FRAMESET>
</HTML>
07/04/2011
65
HTML – Frames, risultato (colonne)
07/04/2011
66
33
HTML – Frames, struttura a righe
<HTML>
<HEAD>
<TITLE>Pagina con Frame</TITLE>
</HEAD>
<FRAMESET ROWS="25%, 75%">
<frame src=“primo.html" name="menu">
<frame src=“secondo.html" name="mypage">
</FRAMESET>
</HTML>
07/04/2011
67
HTML – Frames, risultato (righe)
07/04/2011
68
34
Un altro esempio di frame
07/04/2011
69
Il codice del frame
<HTML>
<FRAMESET COLS="50%,*">
<FRAME SRC="f2.html" NAME="sinistra">
<FRAMESET ROWS="30%,*">
<FRAME SRC="f3.html" NAME="destra alto">
<FRAME SRC="f4.html" NAME="destra basso">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
<P>Testo per browser che non supportano i
frame</P>
</BODY>
</HTML>
07/04/2011
70
35
I tag dei frame (1)
FRAMESET
Introduce un gruppo di frame. Attributi:
ROWS, COLS: la disposizione delle righe o delle
colonne del frameset. Il valore è una lista di numeri
separati da virgole. Ogni numero identifica la
dimensione di un frame. Espresso o in pixel, o in
percentuale, o con un asterisco (divisione equa del
rimanente spazio)

<FRAMESET ROWS=“30,30%,*,*”>: quattro righe, una
alta 30 pixel, una alta il 30 per cento dello spazio
rimanente, la terza e la quarta si dividono lo spazio
rimanente.
NOFRAMES
Blocco di dati da visualizzare nel caso non si sappiano
visualizzare i frame.
07/04/2011
71
I tag dei frame (2)
FRAME
Introduce un frame. Attributi:




SRC: l‟URL del documento da visualizzare nel frame.
NAME: il nome del frame, da usare nel target dei link
<A>
FRAMEBORDER, MARGINWIDTH, MARGINHEIGHT:
misure di visualizzazione dei margini dei frame
NORESIZE, SCROLLING: controllano il
ridimensionamento e la possibilità di scrolling del
frame.
IFRAME
Inserisce un frame all‟interno di un documento HTML
normale (non diviso in frame). Attributi:


07/04/2011
Gli stessi di frame
ALIGN e WIDTH: controllano la posizione e la
dimensione del frame rispetto alla pagina.
72
36

HTML-XML - Dipartimento di Ingegneria dell`Informazione

Transcript

Documenti analoghi

Scheda HTML - Istituto Montani

RIGIDITÀ STIFFNESS COMFORT COMFORT

Lista dei TAG HTML - ITP Francesco BENIGNETTI

Orologio per controllo ronda mod. Proxipen Caratteristiche Principali

HTML HTML Cosa sono le pagine HTML Un

(VI) - Italy TEL: +39/0445/579035 FAX: +39/0445/575708

HTML - Lorenzo Mucchi

HTML Tutorial - "E. Fermi"

Dispensa in pdf

FRUTTA, VERDURA FRESCHI CONAD MARLENE