Gerarchia di un sito web:
Definizione della root di un sito
Quando costruiamo un sito web la prima cosa da
fare è definire una struttura logica del sito
stesso.
Macromedia Dreamweaver permette di
visualizzare in una struttura ad albero la nostra
mappa concettuale.
La home page del sito sarà la root (radice).
Per ogni pagina “figlia” viene creato l’elenco dei
link tra le pagine.
1
Lezione 4
Gerarchia di un sito web:
Percorsi relativi e assoluti
Quando inseriamo un collegamento ipertestuale in una pagina
possiamo scegliere di scrivere i path (percorsi) relativi e assoluti.
Leggi le risorse sui <a
href="http://www.html.it/css/index.html">fogli di stile</a>
Possiamo vedere chiaramente che il link indica un percorso assoluto e
fa riferimento ad una particolare directory.
http:// Indica al browser di utilizzare il protocollo per navigare nel
web (l’http)
www.html.it/ Indica di fare riferimento al sito www.html.it css/
Indica che la risorsa indicata si trova all’interno della cartella "css"
index.html Indica che il file da collegare è quello chiamato
"index.html"
2
Lezione 4
Gerarchia di un sito web:
Percorsi relativi e assoluti
<a href="paginaDaLinkare.html">collegamento alla
pagina da linkare nella stessa directory della pagina
presente</a>
Dalla pagina "index.html" vogliamo cioè far riferimento al file
"interna.html", che si trova all’interno della directory "interna",
che a sua volta si trova all’interno della directory "prima".
La sintassi è la seguente:
<a href="prima/interna/interna.html">Visita la pagina
interna</a>
3
Lezione 4
Gerarchia di un sito web:
Percorsi relativi e assoluti
Vediamo adesso l’esempio opposto: dalla pagina interna
vogliamo far riferimento a una pagina ("index.html") che si
trova più in alto di due livelli:
La sintassi è la seguente:
<a href="../../index.html">Visita la pagina
interna</a>
4
Lezione 4
Gerarchia di un sito web:
Estensione dei file
Quando creiamo una pagina web possiamo scegliere l’estensione
del file HTML.
Le estensioni più comuni per una pagina HTML sono:
*.html, *.htm, *.xhtml.
Quando ci troviamo davanti un file *.php, *.jsp, *.asp, ci troviamo
davanti ad una pagina “script”, cioè una pagina scritta in linguaggio
di programmazione che può essere utilizzata per esempio per
l’elaborazione dei dati provenienti da un modulo web.
5
Lezione 4
Gerarchia di un sito web:
Il tag BODY e i suoi attributi
Il tag BODY rappresenta il corpo del documento HTML.
Gli attributi di BODY possono essere sostituiti integralmente dai
fogli di stile.
L’attributo MARGIN consente di ridefinire i margini della pagina.
Il margine della pagina è la distanza del testo dal bordo della
finestra del browser.
Esempio:
<BODY LEFTMARGIN=“30” TOPMARGIN=“30”></BODY>
Si imposta il margine sinistro e superiore a 30 px
6
Lezione 4
Gerarchia di un sito web:
Il tag BODY e i suoi attributi
L’attributo TEXT descrive il colore del testo.
<BODY TEXT=“#000000”></BODY>
L’attributo LINK descrive il colore dei collegamenti ipertestuali.
<BODY LINK=“#000000”></BODY>
L’attributo BGCOLOR descrive il colore di sfondo della pagina.
<BODY BGCOLOR=“#000000”></BODY>
L’attributo BACKGROUND specifica l’immagine di sfondo. Bisogna
specificare il path dell’immagine per dare un valore a questo
attibuto.
<BODY BACKGROUND=“image/sfondo.jpg”></BODY>
7
Lezione 4
Gerarchia di un sito web:
Il tag BODY e i suoi attributi
Con dreamweaver si possono impostare gli attributi di body tramite
la finestra di proprietà
8
Lezione 4
Gerarchia di un sito web:
I tag per la formattazione del testo
Esistono due diversi stili di formattazione del testo
•Stile logico
•Stile fisico
Lo stile fisico definisce esclusivamente l’aspetto del delimitato dai
tag, permette di definire il grassetto, il corsivo, di cambiare
carattere e così via.
9
TAG
Significato
<STRONG>
Grassetto
<EM>
Corsivo
<CODE>
Carattere Courier
Lezione 4
Gerarchia di un sito web:
I tag per la formattazione del testo
Il tag per il ritorno a capo è il tag BR. E’ un tag di tipo empty.
Iserito all’interno di un testo consente di andare a capo.
Più tag BR consecutivi permettono l’interruzione di una o più righe.
</head>
<body>
...:: Esempio ::...<BR />
Testo di prova<BR /><BR />
Testo di prova con una riga di interruzione <BR />
</body>
</html>
10
Lezione 4
Gerarchia di un sito web:
I tag per la formattazione del testo
Il tag per delimitare un paragrafo di un testo è il tag P.
Questo tag produce una spaziatura di riga maggiore per separarlo
in modo evidente dal testo che precede.
<body>
...:: Esempio di paragrafo ::...
<p>Paragrafo 1</p>
<p>Paragrafo 2</p>
</body>
</html>
11
Lezione 4
Gerarchia di un sito web:
I tag per la formattazione del testo
Ci sono 4 possibili allineamenti per il tag di paragrafo:
•ALIGN=“left” – Allineamento a sinstra
•ALIGN=“right” – Allineamento a destra
•ALIGN=“center” – Allineamento al centro
•ALIGN=“justify” – Allineamento giustificato
12
Lezione 4
Gerarchia di un sito web:
I tag per la formattazione del testo
Il tag per creare una indentazione (testo rientrato a destra) è il tag
BLOCKQUOTE
</head>
<body>
...:: Esempio di blockquote ::...
<blockquote>Ogni volta che si usa il tag blockquote si riproduce
<BR /><blockquote>un rientro a destra</blockquote></blockquote>
</body>
</html>
13
Lezione 4
Gerarchia di un sito web:
I tag per la formattazione del testo
Il tag DIV ha la stessa funzione di quello di paragrafo P, ovvero
separare una parte di testo da quello che lo precede, ma a differenza
del tag P non inserisce separazioni di righe.
Si può allineare il testo racchiuso tra tag DIV con gli stessi criteri di allineamento
per il tag P.
14
Lezione 4
Gerarchia di un sito web:
Link e ancore
È possibile anche creare un indice interno al documento, utilizzando le àncore.
Ciascuna àncora può avere infatti un nome:
<a name="primo">Stiamo per esaminare la struttura…. Eccetera…</a>
In un ipotetico indice è allora possibile far riferimento all’àncora presente
all’interno del documento attraverso un link che punti ad essa:
<a href="#primo">vai al primo paragrafo</a>
Se non si specifica il nome dell’àncora a cui si vuol puntare, viene comunque
creato un link che punta ad inizio pagina (viene cercata un’àncora il cui nome
non è specificato). Questo infatti è un ottimo escamotage per creare link "vuoti"
(in alcuni casi vi occorreranno). Ad esempio:
<a href="#">link vuoto</a>
15
Lezione 4
Gerarchia di un sito web:
Link, ancore e titoli
Per specificare invece un collegamento ad una pagina (o ad un indirizzo di posta
elettronica) e non ad un’àncora si specifica il pathname come valore
dell’attributo href.
<a href="pag1.html" target="_parent">Collegamento 1</a>
<a href="mailto:">Collegamento ad un'indirizzo di posta</a>
Per specificare che un testo è una intestazio di un paragrafo si usano gli empty
tag seguenti:
H1, H2, H3, H4, H5, H6.
Anche i paragrafi si possono allineare.
16
Lezione 4
Gerarchia di un sito web:
Link, àncore e titoli
<html
<body>
<H1>Titolo
<H2>Titolo
<H3>Titolo
<H4>Titolo
<H5>Titolo
</body>
</html>
17
1</H1>
2</H2>
3</H3>
4</H4>
5</H5>
Lezione 4
Gerarchia di un sito web:
Link, àncore e titoli
Per inserire una immagine si usa il tag IMG.
Bisogna sempre specificare una sorgente (il path assoluto o relativo delle
immagini), si deve sempre specificare un testo alternativo.
La sintassi per inserire una immagine è:
<img src="Simona/Server/esis/prova/aperfectcircle.jpg" width="121"
height="81" alt="immagine" />
•img significa image, cioè immagine
•src significa source, cioè origine
Il tag <img> è un tag “vuoto”, che non ha la necessità di essere chiuso.
•Width specifica la larghezza in pixel dell’immagine
•Height specifica l’altezza in pixel dell’immagine
•Si può specificare l’allineamento delle immagin
18
Lezione 4
Gerarchia di un sito web:
Link, àncore e titoli
I formati ammessi nel Web sono sostanzialmente tre:
•GIF (Graphic Interchange Format): le GIF sono immagini con non più di
256 colori (dunque con colori piatti e senza sfumature), come grafici o icone
•JPG: è l’acronimo del gruppo di ricerca che ha ideato questo formato (il Joint
Photographic Experts Group), idoneo per le immagini di qualità fotografica
•PNG (Portable Network Graphic). Il PNG è un tipo di immagine introdotto
più recentemente, elaborato dal W3C per risolvere i problemi di copyright del
formato GIF (che è appunto proprietario); tuttavia oggi il PNG è letto oramai da
tutti i browser e offre alcune caratteristiche che gli altri formati non hanno
(come il supporto al canale alfa, caratteristica questa non ancora perfettamente
supportata da ogni browser).
19
Lezione 4
Gerarchia di un sito web:
Link, àncore e titoli
Si possono attribuire collegamenti ipertestuali ad una immagine.
In questo caso il tag IMG va inserito dentro il tag A per l’àncora.
<a href=http://www.miosito.it align=“left ”target="_blank"><img
src="logo.gif" width="224" height="69“ border=0>Collegamento
ipertestuale</a>
Gli allineamenti per le immagini possono essere:
•Left – allineamento a sinistra
•Right - allineamento a destra
•Top - testo che si dispone sopra l’immagine
•Bottom - testo che si dispone alla base dell’imm.
20
Lezione 4
Gerarchia di un sito web:
Elenchi
In HTML possiamo creare due tipi di elenchi
•Numerati/ordinati in modo progressivo
•Puntati/non ordinati
Gli elenchi puntati si dividono in 3 categorie:
•Elenchi di definizione
•Elenchi a directory
•Elenchi a menu
21
Lezione 4
Gerarchia di un sito web:
Elenchi numerati
Il tag per gli elenchi numerati è <OL>, che sta per ordered list.
Ogni elemento della lista deve essere racchiuso tra il tag <LI>, che sta per list
item.
Esempio:
Questa è una lista ordinata
<OL>
<LI>Primo elemento della lista</LI>
<LI>Secondo elemento della lista</LI>
</OL>
Il tag <OL> lascia uno spazio prima e dopo la lista come avviene per il tag <P>.
22
Lezione 4
Gerarchia di un sito web:
Elenchi numerati
Possiamo specificare il tipo degli elementi che ordinano la lista (numeri, lettere,
numeri romani ecc..)
Descrizione
Sintassi
Indicizzazione alfabetica maiuscola <OL TYPE=“A”>
(A, B, C..)
Indicizzazione alfabetica minuscola <OL TYPE=“a”>
(a, b, c..)
Numeri romani maiuscoli
<OL TYPE=“I”>
Numeri romani minuscoli
<OL TYPE=“i”>
Numeri semplici
<OL TYPE=“1”>
23
Lezione 4
Gerarchia di un sito web:
Elenchi numerati
In Macromedia Dreamweaver è possibile inserire elenchi tramite la barra menu
in alto dopo aver selezionato l’opzione “testo”
<body>
Questa è una lista ordinata
<ol type="1">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
<li>Quarto elemento</li>
</ol>
</body>
24
Lezione 4
Gerarchia di un sito web:
Elenchi numerati
<body>
Questa è una lista ordinata
<ol type=“A">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
<li>Quarto elemento</li>
</ol>
</body>
25
Lezione 4
Gerarchia di un sito web:
Elenchi numerati
<body>
Questa è una lista ordinata
<ol type=“I">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
<li>Quarto elemento</li>
</ol>
</body>
26
Lezione 4
Gerarchia di un sito web:
Elenchi non ordinati
Il tag per gli elenchi numerati è <UL>, che sta per unordered list.
Anche qui ogni elemento della lista deve essere racchiuso tra il tag <LI>, che
sta per list item.
Esempio:
Questa è una lista ordinata
<UL>
<LI>Primo elemento della lista</LI>
<LI>Secondo elemento della lista</LI>
</UL>
Il tag <UL> lascia uno spazio prima e dopo la lista come avviene per il tag <P>.
27
Lezione 4
Gerarchia di un sito web:
Elenchi non ordinati
Possiamo specificare il tipo dei simboli che ordinano la lista (pallini pieni, pallini
vuoti e quadrati)
Descrizione
Sintassi
Pallino pieno
<OL TYPE=“disc”>
Pallino vuoto
<OL TYPE=“circle”>
Quadrato
<OL TYPE=“square”>
28
Lezione 4
Gerarchia di un sito web:
Elenchi non ordinati
<body>
Questa è una lista non ordinata
<ul type="disc">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
<li>Quarto elemento</li>
</ul>
</body>
29
Lezione 4
Gerarchia di un sito web:
Elenchi non ordinati
<body>
Questa è una lista non ordinata
<ul type=“square">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
<li>Quarto elemento</li>
</ul>
</body>
30
Lezione 4
Gerarchia di un sito web:
Elenchi non ordinati
<body>
Questa è una lista non ordinata
<ul type=“circle">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
<li>Quarto elemento</li>
</ul>
</body>
31
Lezione 4
Gerarchia di un sito web:
Elenchi non ordinati
Da notare che il simbolo varia al variare dell’annidamento nella lista:
<ul>
<li>primo della 1a lista</li>
<li>secondo della 1a lista</li>
<ul>
<li>primo della 2a lista</li>
<li>secondo della 2a lista</li>
<ul>
<li>primo della 3a lista</li>
</ul>
</ul>
<li>terzo della 1a lista</li>
</ul>
32
Lezione 4
Gerarchia di un sito web:
Elenchi di definizione
Gli elenchi di definizioni sono individuati dal tag <DL>.
Gli elementi dell’elenco (a differenza delle liste ordinate, e delle liste non
ordinate) questa volta sono formati da due parti:
•<dt> definition term: indica il termine da definire. A differenza dell’elemento
<li> in questo caso non c’è rientro.
•<dd> definition description: è la definizione vera e propria del termine. In
questo caso c’è rientro.
Questi tipi di elenchi possono essere utili quando dobbiamo usare descrizioni
molto lunghe degli elementi della lista.
33
Lezione 4
Gerarchia di un sito web:
Elenchi di definizione
<body>
Questa è una lista di definizione
<dl>
<dt>Windows Xp</dt>
<dd>Descrizione del sistema
operativo Windows XP</dd>
<dt>Windows Vista</dt>
<dd>Descrizione del sistema
operativo Windows Vista</dd>
</dl>
</body>
34
Lezione 4
Gerarchia di un sito web:
Elenchi strutturati
E’ possibile combinare insieme tutti i tipi di elenchi visti creando così elenchi
“strutturati” secondo le nostre esigenze
<body>
Questa è una lista strutturata
<ol>
<li>Italia</li>
<ol type="a">
<li>Campania</li>
<li>Basilicata</li>
<li>Calabria</li>
<li>Ecc...</li>
</ol>
<li>Francia</li>
<ul>
<li>Loira</li>
<li>Provenza</li>
<li>ecc..</li>
</ul>
</ol>
</body>
35
Lezione 4
Scarica
