CORSO Di
WEB DESIGN
prof. Leonardo Moriello
Lezione 3: i frame
Anatomia di una pagina Web
Il codice HTML si caratterizza sempre per la presenza al
suo interno di tre TAG fondamentali:
<HTML>
<HEAD>
<BODY>
La struttura di base di ogni documento HTML è quindi
articolata in questo modo:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Progettare una pagina web con notebook
<html>
<head>
<title> Benvenuti nel mio sito </title>
</head>
<body>
entra nel mio sito
</body>
</html>
Il browser sa che deve leggere tutto ciò che è contenuto
entro i TAG <HTML>...</HTML> come codice HTML
ed è in grado di riconoscere il punto di inizio e quello di
chiusura rispettivamente della testa e del corpo del
documento.
Un documento HTML si divide in due parti fondamentali:
l'intestazione e il corpo del documento.
<head> = intestazione
Gli elementi <head> e </head> sono posti
immediatamente dopo l'apertura del TAG <html> e
racchiudono l'intestazione vera e propria del documento.
In questa parte del codice si deve mettere tutte le
informazioni necessarie al browser per una corretta
interpretazione del documento, l'utente non le visualizzerà
sullo schermo.
Tali informazioni verranno visualizzate solo aprendo la
finestra del browser che fa visualizzare il codice sorgente.
L'intestazione fornisce: il titolo della pagina e le parole
chiave per i motori di ricerca.
Le parole chiave altro non sono che delle informazioni che
vengono passate al browser tramite dei TAG specifici, e
che servono ai motori di ricerca per comprendere il
contenuto del sito.
<html>
<head>
<title>titolo del documento</title>
</head>
<body>
</body>
</html>
Il tag BODY
La sezione <BODY> è il corpo principale del documento
HTML dove vanno inseriti tutti i contenuti che devono
apparire nella pagina web.
Vedremo adesso alcune caratteristiche generali del corpo
del documento, come lo sfondo della pagina, il colore del
testo ed il colore dei collegamenti ipertestuali, che possono
essere specificate mediante attributi da aggiungere al tag
<BODY>.
Per impostare un colore come sfondo della pagina web si
usa l'attributo BGCOLOR.
Se vogliamo realizzare una pagina con lo sfondo nero
scriveremo allora:
<BODY BGCOLOR="#000000">
dove il codice del colore è in formato esadecimale.
Si può indicare il colore mediante il nome in inglese
anziché il formato esadecimale:
<BODY BGCOLOR="black">
possibile impostare come sfondo della pagina web
un'immagine in formato GIF o JPEG utilizzando
l'attributo BACKGROUND secondo la sintassi:
<BODY BACKGROUND="percorso e nome del
file">
Paragrafi (Tag BR, P, DIV)


Il tag <BR> equivale ad un'interruzione di riga che non
spezza il paragrafo. Infatti, il testo che segue va a capo
mantenendo tutte le caratteristiche del testo precedente
e senza che si crei spazio vuoto tra le righe. Il tag
<BR> non richiede un corrispondente tag di chiusura,
basta inserirlo nel punto in cui si vuole che la frase vada
a capo.
Il tag <P> crea invece un'interruzione di paragrafo; il
testo successivo va a capo, lasciando una riga di spazio
vuoto, e può essere formattato in maniera diversa
rispetto al testo precedente. Il tag <P> può essere usato
singolo oppure con la rispettiva chiusura </P>.
Formattazione
I principali tag di formattazione sono:
<B>... </B> : testo in grassetto;
<I>... </I> : testo in corsivo;
<U>... </U> : testo sottolineato;
<STRIKE>... </STRIKE> : testo barrato o depennato;
<SUP>... </SUP> : testo apice;
<SUB>... </SUB> : testo pedice.
Usare il tag <U>... </U> è sconsigliabile perché un testo
sottolineato può creare confusione con i collegamenti
ipertestuali che solitamente appaiono sottolineati.
Titoli
Il tag per definire un titolo è <H>... </H> dove n è
un valore che va da 1 a 6. Ciò significa che si possono
avere sei livelli di titolazione, da <H1> (livello
superiore) a <H6> (livello inferiore).
È importante inserire dei titoli nei testi delle pagine web
perché questo incrementa notevolmente la leggibilità e
perché i motori di ricerca, quando catalogano i siti web,
spesso si basano anche sui titoli presenti nella pagina
per classificarne gli argomenti.
Immagini: Il tag IMG
Per inserire un'immagine in una pagina HTML basta
inserire il tag: <IMG SRC="nome immagine">; questo
tag non ha bisogno di chiusura.
Affinché l'immagine venga visualizzata nella pagina web
bisogna specificarne il nome, l'estensione e l'eventuale
percorso.
Usando il tag in questo modo l'immagine appare allineata
alla base della riga di testo corrispondente, senza spazi
aggiuntivi e mantiene le sue dimensioni assolute.
Il tag <a href>
Per inserire un documento in una pagina HTML basta
inserire il tag: <a href=“documento.html">
Quindi per creare un link dalla nostra home page .html
ad un altra pagina occorre usare questo tag
Tabelle(<TABLE>)
Il tag per creare una tabella è
<TABLE> con il rispettivo </TABLE>.
Ogni riga si definisce con la coppia di tag <TR>....</TR>
All'interno di ogni riga si creano le celle desiderate;
ogni cella si definisce
con la coppia di tag <TD>.…..</TD>
<head>
<title> tabella menù</title>
</head>
<body>
<table border="2">
<tr>
<td>pagina 1 </td>
<td>pagina 2 </td>
<td>pagina 3</td>
</tr>
</table>
<body>
</html>
PAGINA 1
PAGINA 2
PAGINA 3
Pagina web-Curriculum vitae
<html>
<head>
<title> Curriculum-vitae </title>
</head>
<body bgcolor="gray">
<font face=Verdana" size"1">
<font color="blue">
<h1>La mia prima pagina web </h1>
</font>
<h2>Curriculum-vitae</h2>
<p><b>cognome e nome:</b> </p>
<p><b>professione:</b></p>
<p><b>esperienze lavorative:</b></p>
<p><a href=contatti.html">contatti</a></p>
</font>
</body>
</html>
I Frame
I Frames permettono di suddividere la finestra del
browser in sezioni separate, ciascuna delle quali può
essere aggiornata o contenere dati in modo
completamente autonomo rispetto alle altre .
Regole fondamentali:
1. ogni frame è una pagina HTML indipendente.
2.. I frame si agganciano ad una pagina principale detta
frameset
Il framset altro non è che una pagina HTML che
definisce la struttura e le proprietà della pagina Web,
comprese le informazioni sul numero di frame
visualizzati su una pagina, la dimensione dei frame,
l'origine della pagina caricata in un frame e altre
proprietà definibili.
Struttura del FRAMSET
Frameset –Home page
Frame
Menu
Frame
BANNER
Frame
BODY
BANNER
MENU
BODY(CONTENUTO)
http://users.libero.it/luclep/itaint.htm COLORI RGB
Supponiamo di voler costruire una pagina web che
contiene tre frame.
Di quante pagine HTML hai bisogno?
La risposta è semplice: le pagine che ti occorrono sono
quattro: il file frameset e i tre file con il contenuto che
viene visualizzato all'interno dei frame.
Quando si progetta una pagina mediante i set di frame, si
deve salvare ciascuno di questi quattro file per garantire
che la pagina funzioni correttamente nel browser.
Creare un pagina web
-creare
un documento HTML con il frameset
-creare i normali documenti HTML che dovranno
essere contenuti in ognuno di questi frame.
-Quando una pagina frameset viene scaricata, il
browser automaticamente scarica ognuna delle
pagine associate
-Un frameset è in poche parole un documento HTML
che dice al browser come dividere lo schermo in
finestre separate.
I tag del frameset
<FRAMESET>…....</FRAMESET>
<Frameset cols> ……< /frameset > (Colonne)
<Frameset rows> ……< /frameset > (Righe)
L'elemento <frameset> è l'elemento
principale, possiede due attributi: rows
e cols.
Pagina framset
<html>
<head>
<title>La Mia Pagina Frame</title>
</head>
<frameset cols="120,*">
<frame src="barra di navigazione.html" name="menu">
<frameset rows="50,*">
<frame src="banner.html" name="banner">
<frame src="presentazione.htm" name="presentazione">
</frameset>
</frameset>
</html>
<html>
<head>
<title>barra di navigazione</title>
</body>
</html>
</head>
<body bgcolor="9F9FFF">
<font face="verdana"size"1">
<table border="2">
Pagina frame -barra di
navigazione
<tr>
<td><a href="chi sono.html">chi sono</a></td>
CHI SONO
</tr>
PORTFOLIO
<tr>
CONTATTI
<td><a href="portfolio.html">portfolio</a></td>
</tr>
<tr>
<td><a href="contatti.html">contatti</a></td>
</table>
Pagina frame -Banner
<html>
<head>
<title> Curriculum vitae </title>
</head>
<body bgcolor="9F9FFF">
<font face="Verdana"size"1">
<font color="blue">
<h1><a name="sopra">La mia prima pagina Web</a></h2>
</font>
</font>
</body>
</html>
Pagina frame -Presentazione
<html>
</font>
<head>
</body>
<title> Presentazione </title>
</html>
</head>
<body bgcolor="9F9FFF">
<font face="Verdana"size"1">
<font color="black">
<h2><i>Benvenuto nel mio sito<i></h2>
<h3>Presentazione</h3>
<p><b>cognome e nome:</b></p>
<p><b>professione:</b></p>
<p><b>esperienze lavorative:</b></p>