LEZIONE 4
HTML avanzato
La quarta lezione entrerà ancora di più nel linguaggio HTML, verranno fornite nozioni relative alla creazione delle tabelle e alla creazione di frameset. L'esercitazione presente in calce alla lezione darà gli spunti necessari per applicare nella pratica gli argomenti trattati.
HTML AVANZATO
CREARE TABELLE
Le tabelle sono strutture definite per righe e colonne che possono contenere dati oppure per gestire la formattazione della pagina web.
Il TAG principale per creare le tabelle è <TABLE>, mentre si definiscono le righe attraverso il TAG <TR>.
Esempio
<table>
<tr>Questa è la prima riga.</tr>
<tr>Questa è la seconda riga.</tr>
</table>
Per dividere una riga si usa il TAG <TD> all'interno di una riga della tabella.
Esempio
<table>
<tr> <td>Prima riga di sinistra.</td> <td>Prima riga di destra.</td> </tr>
<tr> <td>Seconda riga di sinistra.</td> <td>Seconda riga di destra.</td> </tr>
</table>
Per ogni tabella è possibile impostare dei valori relativi all'intera tabella, al suo allineamento, colore, ecc oppure ad una riga o colonna. Gli attributi a disposizione nella gestione delle tabelle sono:
Per il TAG <TABLE>
align=
Left: Tabella allineata a sinistra
Center: Tabella al centro
Right: Tabella allineata a destra
valign=
top: allinea il contenuto con il lato superiore della cella
bottom: allinea il contenuto con il lato inferiore della cella
background=filename: immagine inserita dietro alla tabella
bgcolor=#rrggbb: colore dello sfondo
border=n: spessore del bordo
bordercolor=#rrggbb: colore del bordo
bordercolordark=#rrggbb: ombra del bordo
cellpadding=n: spazio tra le celle
cellspacing=n: distanza tra cella e contenuto
nowrap: impedisce l'interruzione di riga, anche se il contenuto è più grande della finestra del browser.
width=
n,n : ampiezza minima della tabella in pixel
n,n%: ampiezza minima in percentuale rispetto alla misura della finestra
Per il TAG <TR> e <TD>
align=
Left: Tabella allineata a sinistra
Center: Tabella al centro
Right: Tabella allineata a destra
valign=
top: allinea il contenuto con il lato superiore della cella
Middle: allinea il contenuto al centro della cella
bottom: allinea il contenuto con il lato inferiore della cella
background=filename: immagine inserita dietro alla tabella
bgcolor=#rrggbb: colore dello sfondo
bordercolor=#rrggbb: colore del bordo
bordercolordark=#rrggbb: ombra del bordo
height =
n : altezza minima della tabella in pixel
n%: altezza minima in percentuale rispetto alla misura della finestra
width=
n : ampiezza minima della tabella in pixel
n%: ampiezza minima in percentuale rispetto alla misura della finestra
Per il TAG solo <TD>
colspan=n: numero delle colonne nella cella
rowspan=n: numero delle righe nella cella
nowrap: impedisce l'interruzione di riga, anche se il contenuto della cella è più grande della finestra del browser.
Esempio di tabella
<table width="70%" border="1" align="center" cellpadding="2" cellspacing="2">
<tr bgcolor="#333333">
<td colspan="3"><strong><font size="3" face="Verdana, Arial, Helvetica, sans-serif">
LA TABELLA</font></strong></td>
</tr>
<tr>
<td>Prima colonna, prima riga</td>
<td>Seconda colonna, prima riga</td>
<td>Terza colonna, prima riga</td>
</tr>
<tr>
<td>Prima colonna, seconda riga</td>
<td>Seconda colonna, seconda riga</td>
<td>Terza colonna, seconda riga</td>
</tr>
</table>
Attraverso questo esempio vengono applicati gran parte degli attributi relativi a una tabella, riga o colonna. Da notare il comando COLSPAN applicato al primo TD che unice le prime tre celle in un'unica riga all'interno della quale si trova la scritta "La Tabella".
COLSPAN Controlla il numero di colonne su cui una cella si può estendere. Utilizzandolo insieme a ROWSPAN è possibile creare delle celle larghe 2 o piu' righe/colonne.
ROWSPAN Definisce il numero di righe su cui incide la casella.
LINK
Un documento ipertestuale contiene al suo interno degli elementi chiamati link (collegamenti) che consentono, dopo averci cliccato sopra, di raggiungere determinate parti del documento stesso oppure indirizzi web esterni.
Nel codice html il collegamento ipertestuale viene attivato con il tag <a> iniziale di anchor ed il suo attributo è href (Hypertext REFerence) o riferimento testuale.
Questo attributo definisce il percorso che punta alla destinazione del link o indirizzo URL (Uniform Resource Locator) in questo modo:
<a href=url>descrizione</a>.
Quando si clicca sul collegamento, il browser va a leggere il valore che è contenuto nell'attributo href e attiva il trasferimento all'indirizzo indicato.
Altro tipo di collegamento è quello interno alla pagina per poter facilmente arrivare ad un determinato punto senza scorrere la pagina o quello di risalire senza cliccare sulla barra di scorrimento alla nostra destra.
Per fare ciò si deve deve definire un etichetta cioè un punto all'interno del documento dove volete che sia indirizzato il link.
Per creare un etichetta si usa l'attributo:
<a name=valore></a>
dove al posto della parola valore dovete inserire una parola a vostra scelta. Invece dove parte il collegamento la sintassi è : <a href=#valore>clicca qui</a>. Il nome dell'etichetta deve essere preceduto dal cancelletto (#).
Esempio
Il primo link fa saltare il blocco di testo e indirizza direttamente sul secondo link che apre un sito esterno:
<a href="#prossimolink">Salta il testo riportato qui sotto e vai al prossimo link</a>
<p>Il primo sforzo è stato per l'integrazione scolastica, togliere
cioè i giovani minorati della vista dalla emarginazione degli istituti
speciali, per immetterli nelle scuole normali. I risultati, per la verità, non
sono ancora ottimali, poichè gli intoppi burocratici rendono ancora
troppo difficile la piena disponibilità dei supporti necessari: gli
insegnanti di sostegno non sono nel numero necessario, l'assistenza domiciliare è carente,
i libri in Braille vengono forniti spesso ad anno scolastico inoltrato, e la
loro qualità non è delle migliori.</p>
<a name="#prossimolink"></a>
<a href="http://irifor.uiciechi.it">Vai al sito web dell'IRiFoR</a>
TARGET
Al TAG <a> può essere aggiunto l'attributo TARGET che dà indicazioni sulla modalità di apertura del link:
_blank: carica la pagina in una nuova finestra browser
_self: carica la pagina nella finestra corrente
_parent: carica la pagina nel frame superiore a quello in cui si trova l'hyperlink
_top: carica la pagina nella finestra principale del browser
FRAME
I frame HTML permettono di presentare i documenti in visualizzazioni multiple, che possono essere finestre indipendenti o sub-finestre. Le visualizzazioni multiple offrono ai progettisti un modo per mantenere visibili certe informazioni, mentre altre visualizzazioni vengono fatte scorrere oppure rimpiazzate. Per esempio, all'interno della stessa finestra, un frame potrebbe visualizzare un banner statico, il secondo un menu di navigazione, e il terzo il documento principale che può essere fatto scorrere comunque o rimpiazzato navigando nel secondo frame.
I vantaggi, rispetto ad una tabella, consistono nella possibilità di mantenere fissa una parte (per esempio l'intestazione e la palette di navigazione) e di evitare quindi il tempo del loro ulteriore caricamento.
Gli svantaggi consistono nell'impossibilità di visualizzazione da parte dei vecchi browser ancora diffusi, nella difficoltà di progettazione (la sintassi è complessa) e nella cattiva visualizzazione in monitor 640x480.
Esempio
Viene riportato di seguito un file contenente 2 frame.
<HTML>
<HEAD>
<TITLE>frames</TITLE>
</HEAD>
<FRAMESET COLS="150,*">
<FRAME SRC="menu.html">
<FRAME SRC="pagina_principale.html">
</FRAMESET>
<NOFRAMES>
<BODY>
Testo da visualizzare nel caso in cui il browser non supporti i FRAME
</BODY>
</NOFRAMES>
</HTML>
FRAMESET
Il frameset dà indicazioni riguardo il "taglio" della pagina e i file da caricare all'interno di ogni frame.
Poichè ci sono solo istruzioni di visualizzazione/struttura e non contenuti, non esiste la tag BODY. Il Frameset inizia subito dopo l'HEAD.
<FRAMESET COLS="150,*">
COLS = colonne (cioè il frameset si divide verticalmente). Per una divisione orizzontale l'attributo è ROWS .
Il numero 150 dà le dimensioni dei singoli frames: in questo caso 2 frames, dimensionati in pixel. Quando si definiscono le misure in pixel è prudente non definire la misura della finestra più grande: l'asterisco (*) sta a significare che l'ultimo frames prenderà lo spazio che rimane.
E' possibile dare anche le misure in percentuale. In questo caso la sintassi sarà:
<FRAMESET COLS="20%,80%">
Tra i TAG <NOFRAMES> (non obbligatorie, ma auspicabili se vogliamo che il nostro sito sia visto da tutti) è possibile posizionare tutto il contenuto di una normale pagina html (o almeno un breve messaggio che rimanda ad una parte del sito per cui non sono necessari i frames).
I vecchi browser visualizzeranno solo questo, mentre i nuovi non ne terranno conto.
LINK e TARGET nei FRAME
Il browser, in assenza di specifiche, visualizza la pagina linkata all'interno della finestra che contiene il link. Bisogna specificare al browser dove vogliamo che sia visualizzata la nuova pagina. Questo richiede due passaggi e cioè dare un nome alle "finestre", cioe' ai diversi frames, cosa che si fa nel file che descrive il frameset e specificare, per ogni link, in quale finestra dovrà apririsi il file linkato. Questo si fa -ovviamente- nei file che contengono i link in questione, cioè nei files visualizzati all'interno dei vari frames.
Esempio frameset
<FRAMESET COLS="150,*">
<FRAME SRC="menu.html" name="menu">
<FRAME SRC="pagina_principale.html" name="principale">
</FRAMESET>
Quando si farà click un uno dei link contenuti nel frame menu all'interno del quale è caricata la pagina menu.html, verrà aggiornata la pagina principale se viene indicato il target "principale" all'interno del link.
Esempio file menu.html
<a href="pagina_principale.html" target="principale">Vai alla pagina principale</a>
<a href="pagina_principale2.html" target="principale">Vai alla pagina principale2</a>
BARRE DI SCORRIMENTO
Per default le barre di scorrimento sono attivate per ogni frame, possono, però, essere disabilitate tramite:
SCROLLING=YES oppure NO
si indica per ciascun frame, all'interno della tag FRAME. Le indicazioni - ovviamente - possono essere diverse nei diversi frames (cioè è possibile indicare scrolling=yes per un frame e per l'altro scrolling=no)
<FRAMESET COLS="150,*">
<FRAME SRC="menu.html" name="menu" scrolling=no>
<FRAME SRC="pagina_principale.html" name="principale" scrolling=yes>
</FRAMESET>
ALTRI ATTRIBUTI
Normalmente è possibile ridimensionare le finestre interne di un frameset posizionando il mouse sopra i bordi e "tirando" nella direzione voluta, quando appare la doppia freccia.
Il comando NORESIZE impedisce di farlo.
Nell'esempio è stato abbinato ad una finestra sottodimensionata e ad uno SCROLLING=NO per evidenziarne l'effetto. Normalmente viene utilizzato per motivi più sensati, e a fronte di un accurato dimensionamento della finestra.
FRAMEBORDER=NO è l'istruzione per eliminare i bordi 3D tra un frames e l'altro.
BORDER=0 indica lo spessore in pixel dell'eventuale bordo (di default è 5).
ESERCITAZIONE
Applicheremo le nozioni raccolte attravero questa lezione creando diverse pagine collegate tra di loro e visualizzate in un Frameset, ovvero un insieme di frame.
CREAZIONE DEL FRAMESET
Copiare questo testo in un file e registrarlo come "default.html":
<HTML>
<HEAD>
<TITLE>Corso HTML IRiFoR FRAME</TITLE>
</HEAD>
<FRAMESET COLS="150,*">
<FRAME SRC="menu.html" name="menu" scrolling=no>
<FRAME SRC="pagina_principale.html" name="principale" scrolling=yes>
</FRAMESET>
<NOFRAMES>
<BODY>
Testo da visualizzare nel caso in cui il browser non supporti i FRAME
</BODY>
</NOFRAMES>
</HTML>
CREAZIONE FILE del MENU
Copiare questo testo in un file e registrarlo come "menu.html":
<HTML>
<HEAD>
<TITLE>Menu FRAME</TITLE>
</HEAD>
<BODY>
<h6>Voci del menu</h6>
<ul>
<li><a href="pagina_principale.html" target="principale">Vai alla pagina principale</a></li>
<li><a href="pagina_principale2.html" target="principale">Vai alla pagina principale2</a> </li>
</ul>
</BODY>
</HTML>
CREAZIONE FILE PRINCIPALE 1
Copiare questo testo in un file e registrarlo come "pagina_principale.html":
<HTML>
<HEAD>
<TITLE>Pagina Principale FRAME</TITLE>
</HEAD>
<BODY>
<h1>Pagina Principale 1</h1>
<p>Questa pagina rappresenta un esempio di struttura dei frame.</p>
<p>Fare click su una delle voci del menu nel frame di sinistra per aggiornare questa pagina.</p>
</BODY>
</HTML>
CREAZIONE FILE PRINCIPALE 2
Copiare questo testo in un file e registrarlo come "pagina_principale2.html":
<HTML>
<HEAD>
<TITLE>Pagina Principale FRAME</TITLE>
</HEAD>
<BODY>
<h2>Pagina Principale 2</h2>
<p>Questa pagina rappresenta un esempio di struttura dei frame</p>
<p>Fare click su una delle voci del menu nel frame di sinistra per aggiornare questa pagina.</p>
</BODY>
</HTML>