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