Guida Html
(tratta da www.web-link.it)
<!DOCTYPE...>
Affinché un documento sia identificato come HTML esso deve iniziare con il suo
identificatore di prologo: <!DOCTYPE...
HTML 4.01 prevede tre tipi di DTD e sono rispettivamente:
Strict, la più rigida che prevede l'abolizione dei tag deprecati a favore dei CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Transitional, maggiormente tollerante è quella più largamente usata.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Frameset, nel caso in cui il sito sia strutturato a frames
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Questo tipo di riga chiamata prologo, è solitamente generata in modo automatico
dall'editor che adoperate per la stesura del codice html, visuale o testuale che sia. Non
è obbligatoria anche se molto consigliata, specialmente in caso di validazione del
documento da parte del W3C. Ha il compito di informare il browser che si tratta di un
documento html relativo a quelle determinate specifiche, in mancanza di questa
dichiarazione il documento sarà identificato come rispondente alla specifica HTML 2.0
<html>...</html>
L'elemento <html> identifica un documento che contiene elementi HTML, esso
dovrebbe seguire l'identificatore di prologo e circondare tutto il testo restante, inclusi
tutti gli altri elementi o tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
la parte restante del documento
</html>
<head>...</head>
L'elemento <head> viene utilizzato per fornire informazioni sul documento, in questa
sezione trovano posto tutti quei tags che impartiscono direttive ai browser quali:
titolo, Meta comandi , richiami ai fogli di stile, script.
Notare che tutto ciò che si trova all'interno della struttura head non sarà visualizzato,
ma interpretato dal browser, quindi una zona destinata ad uso esclusivo dei soli
comandi che impartiscono direttive ben specifiche.
< !DOCTYPE HTML...>
< html>
<head>
elementi di informazione quali:
</head>
la parte restante del documento
< /html>
<base>
<link>
<meta>
<style>
<title>
<script>
<base>
Consente di specificare la destinazione per tutti i link della pagina, qualora questa
fosse strutturata in frames:
<base target="nome_del_frame_sul_quale_aprire_i_links">
<link>
Ha diverse funzioni ma la più adoperata è il richiamo a fogli di style esterni:
<link rel="stylesheet href="weblink.css" type="text/css">
<meta>
Sono davvero molti i Meta Comandi che si possono inserire:
<meta http equiv="clicca questo link per un elenco completo.">
<style>...</style>
Dichiarazione di uno stile interno alla pagina che contiene la dichiarazione:
<style type="text/css"...">
<title>...</title>
Il titolo da assegnare alla pagina.
<title>Web-Link - Tutto per la costruzione delle tue pagine web </title>
<script>...</script>
Inserimento di funzioni, effetti, controlli e molto altro sotto forma di script (linguaggio
di programmazione lato client):
<script type="text/javascript">......</script>
<body>...</body>
L'elemento <body> contiene la pagina vera e propria, quello che si vedrà a video:
testo, immagini e tutti gli elementi che forniscono il controllo e la formattazione della
pagina stessa. I possibili attributi sono: background, bgcolor, link, vlink, alink, text.
<body attributo>
background
bgcolor
Molti gli attributi associabili a questo link
tag:
vlink
alink
text
evidenziati in giallo gli attributi
proprietari di singoli browser dei
quali si sconsiglia l'utilizzo.
bgproperties
topmargin
bottommargin
leftmargin
rightmargin
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body{
background-image: url("sfondo.gif");
background-attachment: fixed;
background-color: #ff00ff;
color: #000066;
margin-left: 2px;
}
background
Permette di adoperare un'immagine come sfondo della pagina, immagine che dovrà
essere di tipo .gif .jpg o .png. Indipendentemente dalle dimensioni verrà usata a
riempimento di tutta la finestra del browser, qualunque sia la sua dimensione e
risoluzione del video:
< body background="nome_immagine.gif">
E' possibile richiamare l'immagine anche da altro sito, specificandone l'indirizzo
completo (URL)
< body background="http://www.weblink.altervista.org/nome_immagine.gif">
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body{
background-image: url("nome_immagine.gif");
}
bgproperties
L'immagine adoperata a riempimento può essere tenuta ferma durante lo
spostamento verticale (scrolling) sulla pagina, dando l'impressione di scivolare con le
immagini e i testi sullo sfondo.
Attributo proprietario di alcuni browser non riconosciuto dal W3C.
< body background="nome_immagine.gif" bgproperties="fixed">
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body{
background-attachment: fixed;
}
bgcolor
Si adopera questo attributo per colorare lo sfondo della pagina di una tinta unita, il
colore può essere espresso sia col nome inglese che nel relativo codice esadecimale. A
questo proposito su questa pagina è possibile vedere 140 colori di base con relativo
nome e codice esadecimale.
< body bgcolor="green">
oppure
< body bgcolor="#006600">
La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità
di poter scegliere fra una tavolozza di ben 16 Mil. di colori.
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body{
background-color: #006600;
}
link
Si adopera questo attributo per decidere il colore di tutti i links facenti parte della
pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale.
A questo proposito su questa pagina è possibile vedere 140 colori di base.
< body link="green">
oppure
< body link="#006600">
La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità
di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è
blu (blue) #0000ff
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
a:link{
color: #006600;
}
vlink
Si adopera questo attributo per decidere il colore di tutti i links, dopo che questi sono
stati visitati, può essere espresso sia col nome inglese che col relativo codice
esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di
base.
< body vlink="green">
oppure
< body vlink="#006600">
La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità
di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è
porpora (purple) #800080
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
a:visited{
color: #800080;
}
alink
Si adopera questo attributo per decidere il colore di tutti i links attivi, colore che
cambierà nel momento del click su di esso, può essere espresso sia col nome inglese
che col relativo codice esadecimale. A questo proposito su questa pagina è possibile
vedere 140 colori di base.
< body alink="green">
oppure
< body alink="#006600">
La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità
di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è
rosso (red) #ff0000
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
a:active{
color: #800080;
}
text
Si adopera questo attributo per decidere il colore di tutto il testo nella pagina, può
essere espresso sia col nome inglese che col relativo codice esadecimale. A questo
proposito su questa pagina è possibile vedere 140 colori di base.
< body text="green">
oppure
< body text="#006600">
La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità
di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Fate attenzione a non
assegnare colori assomiglianti allo sfondo, scelta che renderebbe il testo quasi
invisibile.
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body{
color: #006600;
}
MARGINI
topmargin, bottommargin, leftmargin, rightmargin sono i quattro attributi per definire
la distanza in pixel rispettivamente da: margine superiore, margine inferiore, margine
sinistro e margine destro. Un margine uguale a zero farà si che il testo inizi
praticamente sul bordo della finestra del browser.
Attributo proprietario di alcuni browser non riconosciuto dal W3C.
<
<
<
<
body
body
body
body
topmargin="30">
bottommargin="30">
leftmargin="30">
rightmargin="30">
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body {
margin-bottom: 30px;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
}
ESEMPIO
Riassumendo, questa potrebbe essere una definizione del corpo (body), di una pagina
che abbia uno sfondo come riempimento, e questo resti fisso durante le operazioni di
spostamento (scrolling), con un testo di colore nero, i links di colore rosso, i links
visitati di colore verde, il tutto con una distanza dai quattro margini di 50 pixel.
< body background="nome_immagine.gif"
bgproperties="fixed" text="black" link="red" vlink="green"
topmargin="50" bottommargin="50" leftmargin="50"
rightmargin="50" >
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body {
background-image: url("nome_immagine.gif");
background-attachment: fixed;
color: black;
margin: 50px;
}
a:link { color: red; }
a:visited { color: green;}
Il Testo
Cosa sarebbe una pagina web senza testo?
Impossibile anche solo pensarlo. Questo elemento è senza alcun dubbio di primaria
importanza. Oltre al colore e al tipo di font (carattere) ci sono molti altri elementi che
servono per formattarlo ed impaginarlo.
<BASEFONT>
Specifica le dimensioni del font (carattere) di base su cui si basano poi tutte le relative
modifiche di <font size=.......> Il valore di default è 3 e può essere compreso tra 1
e 7. Questo Tag è in via di estinzione visto che i nuovi browser ed i relativi fogli di
style hanno fatto si che vi sia una tendenza a non adoperarlo più
<basefont size="4">
Si possono inserire anche altri due attributi
face specifica il tipo di font
color specifica il colore che potrebbe essere espresso oltre che col nome in inglese
anche con il codice numerico esadecimale.
<basefont size="4" face="arial" color="green">
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body {
font-size: 14pt;
font-family: arial, verdana, sans-serif;
color: green;
}
<BR> <BR />
L'elemento <br> specifica che una nuova riga deve iniziare in un determinato punto,
un ritorno a capo forzato, più <br> consecutivi equivalgono a più righe saltate.
<br>
Con l'aggiunta di immagini flottanti, allineate a destra o sinistra con il testo che le
contorna, è possibile aggiungere l'attributo CLEAR con i seguenti risultati:
clear="left": spezza la riga e si sposta verticalmente verso il basso fino ad avere un
margine sinistro libero.
clear="right": stessa cosa ma con margine libero destro.
clear="all": Si sposta verso il basso fino a quando entrambi i margini non siano liberi
da immagini.
<br clear="all">
<CENTER>...</CENTER>
Tutto ciò che si trova fra gli elementi center e /center sarà centrato rispetto ai margini
destro e sinistro della finestra del browser. Questo Tag è in disuso da quando elementi
quali <DIV> offrono maggiore flessibilità, si ottengono analoghi risultati anche
assegnando l'attributo align="center" ai vari tags di formattazione.
<center>
Questo testo è centrato sulla finestra di visualizzazione
</center>
Deprecato, meglio usare un contenitore come <div> al quale assegnare un attributo
di allineamento centrato:
< div align="center">...</div>
<!-- -->
Consente di lasciare un testo di commento all'interno del listato html senza che questo
possa influire o essere visualizzato dal browser.
<!-Questo testo non serve a niente per il buon funzionamento della pagina web, è
semplicemente un commento, un qualcosa da ricordare dovendo visionare e
modificare il listato.
-->
I simboli di commento sono molto utili anche per gli script ed i fogli di style e servono
a nascondere il listato a quei browser che non supportano ne script ne fogli di style,
anche se mi chiedo quanti e quali saranno i browser ancora in funzione che non
supportano queste due cose divenute ormai parte integrante del web.
<DIV>...</DIV>
L'elemento <DIV> non ha una sua vera e propria caratteristica, serve infatti da
supporto, da scatola contenitore ed è molto usato anche con l'associazione dei fogli di
style. Tutti gli attributi e le associazioni applicate al tag DIV saranno estese a tutto il
blocco di codice in esso contenuto.
<div align="center">
Questa riga di testo ed anche eventuali altri elementi,
se presenti,
subiranno l'allineamento centrato.
</div>
L'uso del contenitore div provoca un ritorno a capo con la sua chiusura /div
<SPAN>...</SPAN>
L'elemento <span> non ha alcuna caratteristica se non quella di fare da supporto per
gli stili, come DIV si presta bene come contenitore per l'associazione di tutto quello
che serve ad Html.
<span style="color: red">
Questa riga di testo è colorata di rosso, anzi di red. :-)
</span>
L'uso del contenitore SPAN non provoca alcun ritorno a capo con la sua chiusura
/SPAN, a differenza di /DIV ed è quindi indicato per assegnare attributi con i CSS a
parti di un testo senza scombinarne l'impaginazione.
<FONT>...</FONT>
L'elemento <FONT> definisce le dimensioni, il colore ed il tipo di carattere adoperato
per la scrittura del testo. Questo Tag viene adoperato sempre meno dal momento che
i fogli di style riescono a gestire il tutto in modo più semplice e versatile. Il Tag
<font> ha dimensione di base (default) del carattere uguale a 3, si veda a questo
proposito anche <basefont>. Font da solo non ha ragione di esistere, al suo interno si
deve sempre inserire almeno un attributo.
<font attributo="specifica">
Testo che avrà tutti gli attributi specificati nel tag font
</font>
E' possibile specificare quale carattere adoperare dando anche delle eventuali
alternative separandole da virgole. Se il font scelto non fosse presente sulla macchina
del visitatore si tenterà di visualizzare il secondo font, poi il terzo, e se nessuno dei tre
fosse presente il browser adopererà quello di default. Evitate dunque fonts particolari
e poco comuni o quasi sicuramente nessuno riuscirà poi a vedere il testo allo stesso
modo di come avreste voluto voi.
face="nome" [,nome] [,nome] L'attributo face imposta il carattere utilizzato e
questo deve trovarsi già installato nel computer dell'utente, le alternative sono
separate da uno spazio e da una virgola.
<font face="Comic Sans MS">Testo con font Comic Sans MS</font>
color="#rrggbb" oppure COLOR="nome" in inglese del colore.
<font color="red">Testo con font di colore rosso</font>
SIZE="n" oppure SIZE="+n" o anche SIZE="-n" dove n è un numero compreso
fra 1 e 7, mentre i vari + o - si riferiscono al numero che per default è 3, salvo
variazioni specificate con basefont
<font size="-1">Testo con font di dimensione -1 rispetto a quella di default.
Tutti gli attributi di font possono essere adoperati anche contemporaneamente
<font face="Comic Sans MS" color="red" size="-1">
Testo con font Comic di colore rosso ed una dimensione -1
</font>
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body {
font-size: 14pt;
font-family: "Comic Sans MS", arial, sans-serif;
color: red;
}
<HR>
L'elemento <HR> Horizontal Rules, altro non è che una linea orizzontale divisoria,
come quella che potete vedere in questa pagina a divisione dei vari elementi (tags),
per default questa linea è ombreggiata e in rilievo. Si possono modificare i vari
attributi.
<hr> questo sotto il risultato
attributi di formattazione quali:
align
noshade
size
width
color
evidenziati in giallo gli attributi proprietari di singoli browser dei quali si sconsiglia
l'utilizzo.
<hr align=left | right | center>Dove left right center sono allineamento a sinistra,
a destra o centrato
Adopero una linea ridotta del 50% per meglio rendere l'idea
<hr align="left">
<hr align="right">
<hr align="center">
<HR COLOR=nome | #rrggbb>Dove nome è il nome in inglese di uno dei colori
possibili, mentre #rrggbb è il codice numerico esadecimale del colore scelto.
L'attributo color è supportato dai soli browser IE.
<hr color="red">
color attributo proprietario di singoli browser, se ne sconsiglia l'utilizzo.
<hr noshade>Nessuna ombreggiatura, praticamente una barra solida.
<hr noshade>
<HR SIZE=numero>Dove numero è espresso in pixel e si riferisce allo spessore
della barra.
una riga di spessore 5 pixel<hr size="50">
<HR WIDTH=numero | percentuale>Senza alcuna specifica la linea orizzontale
occupa tutta la largezza della pagina. Con questo attributo si possono specificare con
esattezza la sua ampiezza, dove numero sono i pixel.percentuale invece è relativa
alla percentuale della finestra del browser
una riga di lunhezza 150 pixel<hr width="150">
Si possono anche combinare i vari attributi, quello sotto è un esempio per ottenere
una riga che sia di colore blu, spessore 3 pixel, che occupi il 70% della finestra alla
quale è destinata e che non sia ombreggiata (la percentuale di ampiezza è relativa alla
cornice che la ospita):
<hr width="70%" size="3" noshade>
Consiglio, meglio usare una dichiarazione di style, in linea o su foglio esterno
creando una classe o un identificatore e richiamare questo dal tag hr:
hr {
height: 3px;
width: 70%;
}
<Hx>...<Hx>
Titoli - è possibile avere sei livelli di titolo che dimensionano i caratteri. Il più alto
livello è <H1> scalano a salire tutti gli altri:
<H1>...</H1>
Grassetto, carattere molto grande
e centrato, una o due righe vuote
sopra e sotto.
<H2>...</H2>
Grassetto, carattere grande a sinistra, una o due
righe vuote sopra e sotto.
<H3>...</H3>
Corsivo, carattere grande leggermente rientrato sul margine sinistro, una o
due righe vuote sopra e sotto.
<H4>...</H4>
Grassetto, carattere normale, rientro maggiore rispetto a H3, una riga vuota sopra e
sotto.
<H5>...</H5>
Corsivo, carattere normale, rientro normale come H4, una riga vuota sopra.
<H6>...</H6>
Grassetto, rientro come testo normale ma più di H5, una riga vuota sopra.
Consiglio, è possibile ridefinire in un foglio di stile CSS i vari tags <h1>, <h2>,
<h3>, <h4>, <h5>, <h6> inserendo tutte le personalizzazioni che si desiderano,
basterà poi richiamarlo alla solita maniera per avere un risultato decisamente diverso
che definirei molto più versatile e comodo.
h1{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16pt;
color: #006400;
font-style: italic;
text-indent: 12pt;
}
<P>...</P>
L'elemento <P> specifica un paragrafo di testo, ha come attributo ALIGN che
permette di allineare il testo in quattro possibili modi: CENTER, LEFT, RIGHT, JUSTIFY,
rispettivamente per: Centrato, a sinistra, a destra e giustificato. Viene adoperato
prevalentemente con l'attributo CLASS che richiama una classe di style in modo da
avere paragrafi con font, colori e formattazioni personalizzate. Si veda a questo
proposito le spiegazioni relative ai fogli di stile.
<p align="left">Questo paragrafo è allineato a sinistra.</p>
Questo paragrafo è allineato a sinistra.
<p align="right">Questo paragrafo invece è allineato a destra.</p>
Questo paragrafo invece è allineato a destra.
<p align="center">Questo paragrafo è allineato al centro.</p>
Questo paragrafo è allineato al centro.
<p align="justify">Questo paragrafo è allineato al centro con giustificazione.</p>
Questo paragrafo invece è allineato al centro con giustificazione, che cosa è la
giustificazione ? Guardate attentamente i due margini, destro e sinistro, come potete
notare il testo è allineato sia a destra che a sinistra; per fare questo il comando
aggiunge in automatico degli spazi fra le parole.
Consiglio, è possibile ridefinire il tag <p> all'interno di un foglio di stile (CSS) o
creare una apposita classe ed inserire tutte le varie personalizzazioni, basterà poi
richiamare questa classe per avere un risultato uguale su tutti i paragrafi della pagina
web.
p{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16pt;
color: #006400;
text-indent: 12pt;
}
<B>...</B>
L'elemento <B> specifica un blocco di testo da mostrare in grassetto (bold). Risultato
simile si ottiene anche con <STRONG>...</STRONG>
Questa guida è offerta da <b> Web-Link </b> tutto per la tua pagina web.
Questa guida è offerta da Web-Link tutto per la tua pagina web.
Consiglio, è preferibile usare questi attributi all'interno dei fogli di style.
TT: Riproduce come testo di telescrivente o a spaziatura fissa.
I: Riproduce come stile corsivo del testo.
B: Riproduce come stile grassetto del testo.
BIG: Riproduce il testo con un carattere "grande".
SMALL: Riproduce il testo con un carattere "piccolo".
STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.
U:Disapprovato. Riproduce del testo sottolineato.
<U>...</U>
L'elemento <U> specifica un blocco di testo da mostrare sottolineato (underline).
Questa guida è offerta da <u> Web-Link </u> tutto per la tua pagina web.
Questa guida è offerta da Web-Link tutto per la tua pagina web.
Consiglio, è preferibile usare questi attributi all'interno dei fogli di style.
TT: Riproduce come testo di telescrivente o a spaziatura fissa.
I: Riproduce come stile corsivo del testo.
B: Riproduce come stile grassetto del testo.
BIG: Riproduce il testo con un carattere "grande".
SMALL: Riproduce il testo con un carattere "piccolo".
STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.
U:Disapprovato. Riproduce del testo sottolineato.
<I>...</I>
L'elemento <I> specifica un blocco di testo da mostrare in corsivo (italic). Risultato
simile si ottiene anche con <EM>...</EM>
Questa guida è offerta da <i> Web-Link </i> tutto per la tua pagina web.
Questa guida è offerta da Web-Link tutto per la tua pagina web.
Gli elementi possono essere fra loro nidificati, combinando i vari attributi, per esempio
posso scrivere weblink in modo marcato, inclinato e sottolineato:
Questa guida è offerta da <U><I><B> Alberto </B></I></U> tutto per la tua
pagina web.
Questa guida è offerta da Alberto tutto per la tua pagina web.
Consiglio, è preferibile usare questi attributi all'interno dei fogli di style.
TT: Riproduce come testo di telescrivente o a spaziatura fissa.
I: Riproduce come stile corsivo del testo.
B: Riproduce come stile grassetto del testo.
BIG: Riproduce il testo con un carattere "grande".
SMALL: Riproduce il testo con un carattere "piccolo".
STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.
U:Disapprovato. Riproduce del testo sottolineato.
<PRE>...</PRE>
L'elemento <PRE> specifica un blocco di testo preformattato, cioè a larghezza e
spaziatura fissa. Attenzione: talmente fissa che non torna neppure a capo se non con
il comando <br>.
<pre> Questo è un testo preformattato che manterrà una certa spaziatura
indipendentemente <br> dai vari parametri di pagina </pre>
Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente
dai vari parametri di pagina
Le immagini
Cosa sarebbe una pagina web senza immagini?
Impossibile anche solo pensarlo. Questo elemento è senza alcun dubbio di primaria
importanza. I formati supportati dal www sono diversi e variano a seconda del
browser adoperato, diciamo che .gif .jpg e .png sono quelli riconosciuti ufficialmente
da tutti i browser e non si dovrebbero usare formati diversi da questi.
<IMG...>
L'elemento <img> necessita di attributi, di cui almeno uno necessariamente
obbligatorio: src, a differenza di molti altri elementi html (tags), questo non ha
bisogno di essere concluso dallo stesso elemento preceduto dalla barra retroversa
</img>. vediamo gli attributi più comuni:
SRC
L'attributo src è indispensabile per l'elemento img, senza di questo non
funzionerebbero neppure tutti gli altri. Permette di specificare il nome dell'immagine
da visualizzare quando questa si trovasse nella stessa cartella (dir) in cui è presente la
pagina web che la richiama. E' possibile specificare anche percorsi (path) fatti da
cartelle (directory) e/o sottocartelle (subdirectory) compresi gli URL assoluti
richiamanti l'immagine da altri siti.
Il tag img src può essere adoperato anche all'interno del tag <a href (ancora o link),
potrà essere cliccato come un normale link testo.
Questa la sintassi:
<img src="nome_immagine.jpg">
o anche
<img src="http://www.weblink.it/nome_immagine.jpg">
ALIGN
L'attributo align permette di specificare l'allineamento dell'immagine rispetto alla riga
di testo successiva, i valori ammessi sono: left, right, top, middle, baseline e bottom.
I due valori principali left e right fanno si che l'immagine diventi di tipo flottante,
vediamo come:
align="left" Allinea l'immagine sul bordo sinistro della finestra di visualizzazione del
browser, il testo che segue circonda la parte destra dell'immagine.
Allineamento di tipo left,
il contorno immagine e
stato riempito
volutamente per meglio
risaltare questo tipo di
allineamento. Provate a variare le
dimensioni della finestra del browser per
meglio capire l'allineamento.
align="right" Allinea l'immagine sul bordo destro della finestra di visualizzazione del
browser, il testo che segue circonda la parte sinistra dell'immagine.
Allineamento di tipo right
il contorno immagine e
stato riempito
volutamente per meglio
risaltare questo tipo di
allineamento. Provate a variare le
dimensioni della finestra del browser per
meglio capire l'allineamento.
Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno
creando una classe o un identificatore e richiamare questo dal tag img usando la
proprietà float:
img { float: left; }
valori per float sono: left, right, none, inherith
align="top" Allinea il testo che segue l'immagine con la parte superiore dell'elemento
più alto nella riga.
Allineamento di tipo top il
contorno immagine e stato riempito
volutamente per meglio risaltare questo
tipo di allineamento. Provate a variare le
dimensioni della finestra del browser per
meglio capire l'allineamento.
align="middle" Allinea la linea di base della riga corrente con la parte centrale
dell'immagine.
Allineamento di tipo middle
il contorno immagine e stato riempito
volutamente per meglio risaltare questo
tipo di allineamento. Provate a variare le
dimensioni della finestra del browser per
meglio capire l'allineamento.
align="bottom" Allinea il testo che segue l'immagine con la parte inferiore
dell'elemento più basso nella riga di testo.
Allineamento di tipo
bottom il contorno immagine e stato
riempito volutamente per meglio risaltare
questo tipo di allineamento. Provate a
variare le dimensioni della finestra del
browser per meglio capire l'allineamento.
Alcuni attributi sembrano gli stessi di altri, è vero, ma ognuno svolge una funzione
differente. L'importante è farsi un'idea, ognuno di noi poi adopererà quello che riterrà
più adatto alle proprie esigenze.
Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno
creando una classe o un identificatore e richiamare questo dal tag img usando la
proprietà vertical-align:
img { vertical-align: top; }
valori per vertical-align sono: baseline, middle, top, super, sub, text-top, bottom e
text-bottom
ALT
L'attributo alt (alternativa alla grafica), permette di specificare un testo per quei
browser non grafici. Viene adoperato per descrivere l'immagine e non va confuso con
title spiegato sotto. Il testo apparirà nel caso in cui l'immagine non venisse caricata,
per questo motivo l'attributo ALT diventa obbligatorio ai fini di una validazione del
W3C.
Questo il codice:
<img src="tarta.jpg" alt="Questa è una tartaruga">
Ho volutamente tolto l'immagine e come potete vedere al suo posto
c'è il testo alternativo immesso con l'attributo ALT.
TITLE
L'attributo Title (titolo), permette di specificare un testo che descriva l'immagine,
simile ad alt viene interpretato correttamente a prescindere se l'immagine grafica sia
visibile o meno.
Questo il codice:
<img src="tarta.jpg" title="Ciao sono una tartaruga">
Provate a posizionare il mouse sull'immagine, sarà così possibile
leggere il testo immesso con l'attributo Title.
BORDER
L'attributo border permette di specificare lo spessore del bordo intorno all'immagine.
Risulta utile impostare border="0" quando l'immagine fa parte di un collegamento
(link o ancora) e non si vuole visualizzare quel bordino azzurro di default, tipico delle
immagini facenti parte di un link.
Questo il codice:
<img src="tarta.jpg" border="3">
Si noti lo spessore del bordo dell'immagine che in questo caso è stato
impostato come spessore 3.
Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno
creando una classe o un identificatore e richiamare questo dal tag img usando la
proprietà border:
img { border: 3px solid #ff0000; }
Per non avere un bordo sulle immagini linkate si usa border: none. E' possibile
specificare il tipo di bordo, per esempio solid o anche il colore, per esempio #ff0000.
VSPACE e HSPACE
L'attributo VSPACE così come l'attributo HSPACE vengono adoperati nelle immagini
flottanti, cioè quelle immagini allineate con left e right, servono ad impostare
rispettivamente degli spazi verticali ed orizzontali (vertical space ed horizontal space)
fra il testo e l'immagine stessa, ed anche fra l'immagine e la sua cornice. Un esempio
chiarirà sicuramente meglio:.
Questa la sintassi:
<img src="tarta.jpg"
hspace="25">
ho impostato uno
spazio orizzontale di 25
pixel.
Questa la sintassi:
<img src="tarta.jpg"
vspace="25">
ho impostato uno spazio
verticale di 25 pixel.
Questa la sintassi:
<img src="tarta.jpg"
hspace="25"
vspace="25">
ho impostato uno
spazio orizzontale ed
uno spazio verticale entrambi di 25 pixel.
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno
usando la proprietà float insieme a quella padding:
{
float: left;
padding: 25px 10px 35px 5px;
}
Avendo il pieno controllo sui quattro lati in modo indipendente grazie alla proprietà
padding
WIDTH e HEIGHT
L'attributo WIDTH, così come l'attributo HEIGHT, vengono adoperati per specificare le
dimensioni orizzontale e verticale dell'immagine; se omessi il browser impiegherà più
tempo per calcolare l'area sulla quale disporre eventuale testo, per questo motivo
conviene impostare sempre questi valori, visto poi che sono noti. Si possono
impostare anche valori diversi da quelli reali nel caso in cui si volesse adattare
l'immagine a certe dimensioni, compreso un'eventuale distorsione.
Questa la sintassi:
<img src="tarta.jpg" width="114"
height="75">
ho impostato le dimensioni orizzontali e
verticali dell'immagine.
potrei decidere di modificare l'immagine assegnando valori diversi da quelli
reali, come in questo caso:
<img src="tarta.jpg" width="60" height="35">
ho impostato le dimensioni orizzontali a 60 px e verticali a 45 px.
Potrei deformare l'immagine assegnando valori sproporzionati, come in
questo caso:
<img src="tarta.jpg" width="35" height="60">
ho impostato dimensioni orizzontali 50 px e verticali 100 px.
Consiglio, è preferibile usare questi attributi all'interno dei fogli di style.
{
width: 114px;
}
Con i CSS è possibile esprimere le dimensioni anche in em o in percentuale
USEMAP
L'attributo USEMAP viene adoperato per indicare che l'immagine è una mappa
d'immagine sul lato client. Cosa significa mappa di immagini ? E' possibile suddividere
un'immagine in diverse aree tipo una mappa, da qui appunto il nome. Associare ad
ognuna di queste aree la possibilità di richiamare un link diverso. In pratica la stessa
immagine usata come link è in grado di richiamare links diversi a seconda del punto in
cui viene cliccata. Se l'argomento USEMAP inizia con un simbolo # si assume che la
descrizione della mappa si trovi nello stesso documento in cui si trova il tag IMG;
risulta infatti possibile avere la definizione della mappa anche su un file di testo
separato.
Questo un esempio:
<img src="../img/tarta.jpg" usemap="map.htm#mappa1" >
Questo codice utilizza la mappa descritta come mappa1 in map.htm, per il file di
immagine tarta.jpg
Le aree attive dell'immagine vengono descritte adoperando i tags MAP e AREA
<MAP>...</MAP>
L'elemento MAP descrive ciascuna delle aree dell'immagine a cui è stata assegnata
una mappa, e indica la posizione del documento da scaricare quando viene attivata
l'area definita.
Questo un esempio:
<map name="nome">
< area [shape="forma"] coords="x,y,..." [href="riferimento"] [nohref] >
</map>
dove:
nome specifica il nome della mappa in modo che USEMAP possa fare riferimento ad
essa.
forma fornisce la forma dell'area specificata es. RECT per rettangolo.
Nel caso si omettesse l'attributo SHAPE viene assunto SHAPE="RECT" per default, le
altre forme sono circle e poly.
L'attributo COORDS fornisce le coordinate nella forma utilizzando pixel dell'immagine
come unità. Per un rettangolo le coordinate vengono fornite - sinistro, alto, destro,
basso - L'area rettangolare definita comprende l'angolo inferiore destro specificato , se
per esempio si volesse specificare l'intera area di una immagine 100 x 100 pixel le
coordinate saranno:"0,0,99,99"
HREF richiama il link ad esso associatoNOHREF indica che eventuali clic in questa
zona non richiameranno alcun link.
<AREA>
L'elemento AREA specifica le diverse aree, nel caso in cui due aree si intersecano
quella che appare per prima nella definizione avrà prevalenza.
Vediamo un esempio per riassumere il tutto:
<map name="tartaruga">
< area shape="circle" coords="57,65,14" href="interno.htm">
< area shape="rect"coords="13,2,99,37" href="guscio.htm">
< /map>
< img src="../img/tarta.jpg" usemap="#tartaruga">
Provate a cliccare sulla testa o sul guscio della tartaruga, per andare rispettivamente
ad inizio o fine di questo documento.
Non so bene se funzioni con tutti i browser, alcuni infatti supportano solo RECT e non
CIRCLE e POLY. Questa spiegazione ha il solo scopo di chiarire meglio il
funzionamento di una immagine suddivisa in mappa. Per la sua realizzazione nessuno
ricorre ai comandi manuali, i programmi in grado di generare mappe da un'immagine
sono infatti ormai moltissimi. Esistono anche editors HTML in grado di generare
automaticamente codice per mappe cliccabili, sarà sufficiente tracciare le aree da
cliccare, esattamente come adoperare un programma di grafica.
Links o Ancore
Una pagina senza Links (ancore) non sarebbe una pagina web. La vera forza delle
pagine web è proprio quella di agganciare ed essere a sua volta agganciate alle altre
pagine rendendo tutta la rete un unico grande documento. Quando cliccate sopra un
link azionate un meccanismo, di fatto interagite con la pagina web. Questo
meccanismo potrebbe essere semplicemente un cambio pagina o l'inizio dello
scaricamento di un file o l'apertura del vostro programma di posta elettronica preferito
per inviare mail. Tutte queste azioni sono gestite dal tag ancora <A> di sicuro uno dei
tags più importanti di HTML
<A>...</A>
L'elemento <A> necessita di uno dei due attributi possibili, e cioè NAME o HREF, da
solo infatti non servirebbe a nulla. Vediamo questi due attributi:
NAME
L'attributo NAME serve per creare una specie di etichetta, questa viene collocata nel
punto esatto in cui è stata creata, sarà poi possibile richiamarla con l'elemento <A>
seguito dall'attributo HREF. In questo modo anziché richiamare una pagina
richiameremo quel punto preciso dove si trova l'etichetta.
Complicato?
Con NAME si crea un punto nel documento e con HREF="#nome assegnato al name"
si raggiunge quel punto, praticamente un collegamento ipertestuale normalissimo con
la sola differenza che anziché richiamare una nuova pagina se ne richiama anche o un
punto preciso della stessa.
Vediamo un esempio:
<a name="weblink"></a>
Così facendo ho creato un'etichetta col nome weblink
L'etichetta risulterà essere completamente trasparente alla pagina web, cioè non si
vedrà nulla a video. Fatto questo non resta che richiamarla da qualsiasi altra parte del
documento o da qualsiasi altra pagina web. Il link cliccato sposterà la visualizzazione
nel punto preciso dove è stata creata e collocata l'etichetta. Poco più avanti,
spiegando le varie possibilità di HREF, sarà possibile avere una dimostrazione pratica
di come funziona l'etichetta WebLink appena creata.
HREF
L'attributo HREF (Hypertext REFerence) all'interno dell'elemento <A> trasforma in un
collegamento ipertestuale il testo o l'immagine che segue fino alla chiusura
dell'elemento con </A>.
Generalmente il testo o la cornice dell'immagine diventa di colore blu sottolineato
salvo diverse impostazioni volute all'interno dell'elemento <body> o di un CSS.
Questo per meglio evidenziare che si tratta di un collegamento, il cursore del mouse
una volta posizionato sopra la scritta (o l'immagine usata) si trasformerà in una
piccola mano col dito indice teso pronto a premere il link. Vediamo quali sono le
diverse forme per questo attributo:
Deprecato, per cambiare colore ai links meglio usare una dichiarazione di style, in
linea o su foglio esterno:
a:link {color: #0000cc;}
a:visited {color: #009900;}
con possibilità di eliminare la sottolineatura grazie alla proprietà: text-decoration:
none;
Nota:, in aggiunta alle due pseudoclassi: link e visited ne esistono altre dinamiche
quali: hover focus ed active. Molto interessante hover che permette di rendere
dinamico il passaggio del mouse sopra ad un link creando un effetto di animazione,
come per esempio un semplice cambio di colore.
a:link { ~ }
a:visited { ~ }
a:hover { ~ }
a:focus { ~ }
a:active { ~ }
Per evitare conflitti le pseudoclassi dovranno essere inserite nell'ordine sopra
riportato. Se infatti venisse dichiarata prima hover di visited quando si passa col
cursore del mouse su un link già visitato questo non farebbe alcun cambiamento
legato ad hover avendo prevalenza la pseudoclasse visited.
Questo simbolo # (pound o cancelletto) seguito dal nome che è stato assegnato con
l'attributo NAME permette di saltare nel punto esatto in cui l'etichetta è stata
posizionata, si veda la spiegazione di NAME un paio di righe sopra. Vediamo un
esempio pratico:
<a href="#weblink"></a>
Clicca su questa scritta per saltare all'etichetta WebLink definita sopra.
Si possono richiamare punti precisi presenti su altre pagine web, facendo precedere al
nome dell'etichetta creata con name, il nome della pagina o l'intero percorso: <a
href="http://web-link.it/html/link.htm#weblink"></a>
http:// questo tipo di ancora è senza dubbio la più adoperata e serve per richiamare
altre pagine. E' sufficiente specificare l'intero percorso. Vediamo un esempio pratico:
<a href="http://www.web-link.it"></a>
Clicca su questa scritta per accedere a WebLink tutto per la tua pagina web.
mailto: questo tipo di ancora serve per ricevere un msg nella propria casella postale,
oltre all'indirizzo è possibile impostare anche il subject della mail ed il corpo della mial
stessa, infatti questo collegamento richiama il programma client di posta elettronica
adoperato dal navigatore. Vediamo qualche esempio pratico:
<A HREF="mailto:Tuo_Nome@Server_di_posta.it"></A>
Clicca su questa scritta per inviare una e-mail
E' possibile impostare anche il subject, si dovrà aggiungere un punto interrogativo e la
parola subject dopo l'indirizzo. Questo un esempio:
<a href="mailto:Tuo_Nome@Server_di_posta.it?subject=La tua guida HTML"></a>
Per inviare una mail con soggetto: la tua guida HTML
Infine è possibile impostare anche il corpo del messaggio, aggiungendo &body= quindi
il corpo del messaggio. Questo un esempio:
<a href="mailto:Tuo_Nome@Server_di_posta.it?subject=La tua guida
HTML&body=corpo della e-mail"></a>
Per inviarmi una mail con soggetto: la tua guida HTML e al suo interno parte del
messaggio preconfezionato con la frase: tutto quello che vi pare dalla guida html
Queste le altre forme che sono ammesse dall'attributo HREF:
<a href="nome_pagina.html">Realizza un collegamento ad una pagina che si
trova nella stessa cartella
<a href="http://www.nome_server.it/nome_pagina.html">Realizza un
collegamento ad una pagina che si trova in un server web
<a href="ftp://nome_del_server.it">Realizza un collegamento di tipo FTP
<a href="gopher://nome_del_server.com">Realizza un collegamento ad un
server gopher
<a href="mailto:indirizzo@di_posta.it">Realizza un collegamento al client di
posta elettronica (per farsi scrivere dal proprio sito una e-mail)
<a href="news:...">Realizza un collegamento a NewsGroup Usenet
<a href="nome_file.zip">Realizza un collegamento ad un file da scaricare in
formato compresso (zip o rar) che avvierà un download
Ci sono anche altre forme quali newsrc:... nntp://... telnet://... wais://... ma credo
siano adoperate molto raramente.
TARGET
L'attributo TARGET serve per aprire il collegamento su un frame diverso da quello in
cui si trova. Ovviamente questo attributo è adoperato solo in caso di un sito
strutturato in frames, è utile specialmente per chi avendo un menu laterale voglia fare
in modo che i links richiamati dal menu siano visualizzati sulla pagina principale. Per
fare questo si dovrà specificarne il nome, quello che è stato assegnato al frame.
Ipotizziamo di avere con nome home il frame principale , volendo fare in modo che il
link venga aperto su quel frame questa la sintassi:
<a href="http://www.web-link.it" target="home"></a>
Nel caso in cui non esistesse un frame con nome home verrà aperta una nuova
finestra del browser.
Le altre possibili destinazioni sono:
_blank: Apri
_self:
Apri
_parent: Apri
_top:
Apri
il
il
il
il
collegamento
collegamento
collegamento
collegamento
su una nuova finestra.
sulla finestra che ha generato il collegamento
sul frame di origine o su quello corrente
al livello superiore
Le Tabelle
Non servono soltanto per incolonnare e tabulare i dati come si potrebbe facilmente
pensare. Le tabelle se sapientemente sfruttate permettono una precisa impaginazione
di tutti gli elementi che compongono la pagina web, siano questi semplici testi,
immagini o qualsiasi altra cosa. Un esempio è questa mia guida che è impaginata
proprio con l'uso delle tabelle.
Ci sono elementi ed attributi ad uso esclusivo dei soli browser IE, alcuni li ho
volutamente trascurati oltre che per la loro esclusiva anche perchè personalmente li
ritengo inutili.
Chi sono per poter giudicare cosa serve e cosa non serve?
Nessuno, non sono nessuno... ma se pensate che potevano esservi utili potete sempre
ricredervi più avanti :-)
<TABLE>...</TABLE>
Una tabella inizierà sempre con questo elemento: <TABLE> e finirà con </TABLE>
delimitatore della tabella stessa. Questo elemento da solo non dice nulla, necessita di
una definizione di celle e colonne che vedremo più avanti. Sono molti gli attributi che
si possono assegnare a table:
<table>
attributi assegnabili
all'elemento table:
align
bgcolor
border
cellpadding
cellspacig
frame
rules
summary
width
background
bordercolor
evidenziati in giallo gli
bordercolordark
attributi proprietari di singoli bordercolorlight
browser dei quali si sconsiglia height
l'utilizzo.
Si inseriscono lasciando uno spazio vuoto fra la scritta table e la sua chiusura > gli
attributi possono essere più di uno e specificati uno di seguito all'altro.
ALIGN
Consente di specificarne l'allineamento della tabella rispetto al documento, con le
seguenti possibilità: Center, Left e Right rispettivamente per centrato, a sinistra, a
destra.
E' possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che
costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.
BACKGROUND
Permette di avere un'immagine come sfondo della tabella, è possibile applicarlo oltre
che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della
tabella stessa quali: <TD> e <TH> descritti più avanti.
Si possono utilizzare come immagini di sfondo i vari tipi di file grafici consentiti dal
web: gif, jpg, png.
Attributo proprietario di alcuni browser non riconosciuto dal W3C ma approvato se
inserito in un CSS
<table background="immagine_di_sfondo.jpg">
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno
riconosciuta da tutti i browser:
table {
background-image: url(immagine_di_sfondo.jpg);
}
BGCOLOR
Permette di avere un colore in tinta unita come sfondo della tabella, è possibile
applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la
struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.
Il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di
numeri esadecimali. A questo proposito su questa pagina è possibile vedere 140 colori
di base. E' possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che
costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.
<table bgcolor="Yellow">
<table bgcolor="#ffa500">
BORDER
Permette di avere un bordo perimetrale che contorna tutte le celle facenti parte della
tabella; è possibile impostarne anche lo spessore. Alcuni browser in mancanza di
questo attributo lasciano un piccolo spazio pur non facendo vedere alcun bordo, per
recuperare quello spazio è necessario impostare il border a zero.
<table border ="1">
<table border ="5">
<table border ="10">
Consiglio, è preferibile usare questi attributi all'interno dei fogli di style dove oltre
allo spessore del bordo è possibile scegliere il tipo ed il colore del bordo stesso.
table {
border: solid 3px #000000;
}
<table con richiamo al CSS>
<table con richiamo al CSS>
BORDERCOLOR
Permette di selezionare il colore del bordo, questo attributo supportato solo da IE per
funzionare deve necessariamente avere impostato anche l'attributo border, il colore
può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri
esadecimali. A questo proposito su questa pagina è possibile vedere 140 colori di
base.
Attributo proprietario di alcuni browser non riconosciuto dal W3C ma approvato se
inserito in un CSS.
<table border="1" bordercolor="Red">
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno
riconosciuta da tutti i browser:
table {
border: double 3px #ff0000;
}
BORDERCOLORDARK
Permette di selezionare il colore più scuro su un bordo (l'opposto di
BORDERCOLORLIGHT); creando un effetto di luce. Questo attributo supportato
soltanto da IE per funzionare deve necessariamente avere impostato anche l'attributo
border. Meglio fare uso dei CSS con i quali è possibile ottenere un effetto simile ma
visto da tutti i tipi di browser.
BORDERCOLORLIGHT
Permette di selezionare il colore più chiaro su un bordo (l'opposto di
BORDERCOLORDARK); creando un effetto di luce. Questo attributo supportato
soltanto da IE per funzionare deve necessariamente avere impostato anche l'attributo
border. Meglio fare uso dei CSS con i quali è possibile ottenere un effetto simile ma
visto da tutti i tipi di browser.
CELLPADDING
Specifica la quantità di spazio vuoto lasciato tra i bordi delle celle di una tabella e il
dato vero e proprio in esse contenuto, il valore per default è 2 , quindi per tabelle più
compresse si dovrà impostare cellpadding uguale a zero.
<table cellpadding="0"> <table cellpadding="0">
Consiglio, è preferibile usare questi attributi all'interno dei fogli di style dove
cellpadding è sostituito dalla proprietà padding.
td {
padding: 10px;
}
CELLSPACING
Specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati di una
tabella, il valore per default è 2, per tabelle più compresse si dovrà impostare
cellspacing uguale a zero .
<table cellspacing="0"> <table cellspacing="0">
<table cellspacing="10">
<table cellspacing="10">
Consiglio, è preferibile usare questi attributi all'interno dei fogli di style dove
cellspacing è sostituito dalla proprietà border-spacing.
{
border-spacing: 10px;
}
IE non supporta la proprietà border-spacing che regola lo spazio fra i bordi delle celle
e fra il bordo delle celle e quello della tabella. Per eliminare questo spazio esiste la
proprietà border-collapse che accetta due valori: separate e collapse, rispettivamente
per separare o unire le celle:
HEIGHT
Permette di specificare l'altezza della tabella, può essere in pixel o in percentuale
dell'altezza della finestra del browser che la visualizza. Questo attributo è supportato
soltanto dai browser IE e non riconosciuto dal W3C. Diventa un attributo valido se
applicato ai singoli elementi che costituiscono la struttura della tabella stessa quali:
<TD> e <TH>.
<table height="50">
SUMMARY
A differenza di caption serve per una descrizione più lunga e dettagliata a beneficio
soprattutto di quei browser non grafici che fanno uso di programmi vocali o con
sistema Braille.
<table summary="descrizione dettagliata">
WIDTH
Permette di specificare la larghezza della tabella, che può essere in pixel o in
percentuale della larghezza della finestra del browser che la visualizza. E' possibile
applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la
struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.
<table width="300">
<table width="25%">
Provate a variare le dimensioni della vostra finestra del browser, quella in cui state
vedendo questa pagina, noterete che anche la larghezza della tabella espressa in
percentuale varia mantenendo il 25% di visualizzazione specificato.
Consiglio, è preferibile usare questi attributi all'interno dei fogli di style dove width è
sostituito dalla proprietà width.
{
width: 350px;
width: 50%;
}
<CAPTION>...</CAPTION>
L'elemento <caption> rappresenta la didascalia della tabella, deve trovarsi all'interno
della tabella subito dopo table e non all'interno di righe (tr) o di celle (td).
< table>
<caption align="attributo">Didascalia della tabella</caption>
< tr><td>cella</td></tr>< /table>
align di caption
L'attributo ALIGN imposta la posizione della didascalia rispetto alla tabella. Gli attributi
possibili sono TOP, BOTTOM, LEFT e RIGHT. rispettivamente per:
Didascalia con align top
1
2
3
4
5
6
Didascalia con align right
1
2
3
4
5
6
Didascalia con align left
1
2
3
4
5
6
1
2
3
4
5
6
Didascalia con align bottom
VALIGN
Permette di specificare l'allineamento verticale del testo visualizzato all'interno delle
celle di una tabella, i valori attribuibili sono: middle, top, baseline, bottom.
baseline
middle
testo che serve
solo per
evidenziare le
bottom altre quattro
celle che
Top
contengono un
allineamento
verticale
Consiglio, è preferibile usare questi attributi all'interno dei fogli di style con la
proprietà text-align:
{
vertical-align: top;
}
ALIGN
Permette di specificare l'allineamento orizzontale del testo visualizzato all'interno delle
celle di una tabella, i valori attribuibili sono: left, right, center,char e justify
center
char . con
riferimento al punto
nella nostra lingua
italiana
left
right
justify - Testo giustificato su
entrambi i lati, per poterlo
notare la quantità di testo deve
tornare a capo nella cella.
Consiglio, è preferibile usare questi attributi all'interno dei fogli di style con la
proprietà text-align:
{
text-align: justify;
}
HEIGHT
Permette di specificare l'altezza della cella, può essere espresso in pixel o in
percentuale dell'altezza della tabella. Più celle affiancate avranno tutte l'altezza max
specificata in una delle celle della stessa riga.
<td height="50">
<td height="50"> < td height="10">
<td height="10"> < td height="10">
WIDTH
Permette di specificare la larghezza della cella, che può essere espresso in pixel o in
percentuale della larghezza della tabella. Più celle incolonnate avranno tutte la
larghezza max specificata in una delle celle della stessa colonna.
<td width="300">
<td width="300">
<td
width="100">
<td width="100">
<td
width="100">
<TR>...</TR>
Questo tag inserito all'interno di table definisce l'inizio di una riga della tabella,
significa che il numero di righe di una tabella è pari al numero di elementi TR in essa
contenuti. Supporta molti degli attributi di TABLE e di TD. A differenza di TD non
contiene dati al suo interno in quanto serve solo per creare la struttura, non hanno
quindi ragione di esistere attributi quali BGCOLOR o BACKGROUND che se occorrono
potranno essere definiti nel tag TD inserito all'interno di TR stesso.
<tr><td>questa è una riga con una cella </td></tr>
<tr><td>queste sono due righe </td></tr>
<tr><td>con una cella per riga </td></tr>
<TH>...</TH>
Questo tag inserito all'interno di table e di tr definisce la cella intestazione della
tabella. Praticamente il testo all'interno di questo tag sarà in neretto, supporta tutti gli
attributi di TABLE e di TD. Attenzione all'attributo NOWRAP, se presente impedisce il
ritorno a capo del contenuto della cella forzando questa a mantenere le dimensioni
necessarie per contenere tutto il testo su una sola riga. Necessita di essere racchiuso
fra i tags <TR> e </TR> esattamente come TD
<table>
<tr><th> questa la cella th </th></tr>
<tr><td> questa la cella td </td></tr>
</table>
Questo il risultato
questa la cella TH
questa la cella TD
<TD>...</TD>
Questa coppia di tags inseriti all'interno di table e di tr definiscono la cella vera e
propria della tabella, TD supporta tutti gli attributi di TABLE; quindi non soltanto i vari
allineamenti ma è possibile avere anche colori e/o immagini di sfondo e volendo tutti
diverse fra le singole celle. Attenzione però, a differenza di table è possibile adoperare
anche l'attributo NOWRAP, che se presente impedisce il ritorno a capo del contenuto
della cella, forzando questa a mantenere le dimensioni necessarie per contenere tutto
il testo su una sola riga. Questo tag è di norma preceduto dal tag <tr> che definisce
l'inizio della riga. All'interno di una stessa tabella si dovranno definire lo stesso
identico numero di celle, a meno che non si faccia uso dell'attributo COLSPAN che sarà
visto più avanti.
<tr><td>questa è una cella </td></tr>
<tr><td>queste sono due</td> <td>queste sono due</td></tr>
<tr><td>queste sono
tre</td>
<td>queste sono
tre</td></tr>
<td>queste sono
tre</td></tr>
E così via... Il tutto rigorosamente all'interno dei tags <table> e </table> e di <tr> e
</tr>. Ho reso visibile il bordo per permettere di capirne meglio il funzionamento,
molto spesso invece il bordo è impostato a zero in modo da usare la tabella solo come
struttura portante dei dati. Oggi con XHTML e l'uso dei box non sarebbe forse più
necessario ma vi assicuro che è e resta comunque una buona tecnica di
impaginazione.
Le tabelle si possono nidificare, cioè è possibile mettere delle tabelle all'interno di celle
di altre tabelle creando così strutture più complesse che si adattano perfettamente a
qualsiasi tipo di impaginazione voluta.
Potrebbero persino contenere parti di immagini che si ricompongono cella per cella
come se si trattasse di un puzzle. Anzi, per immagini di grosse dimensioni vengono
ancora oggi adoperate a questo scopo per non creare lunghe attese di caricamento.
ROWSPAN e COLSPAN
Come già accennato le tabelle, salvo casi particolari, hanno un numero di celle uguale
per ogni riga se per esempio su una riga abbiamo tre celle si dovranno avere tre celle
per ogni altra riga precedente e seguente.
Fortunatamente però è possibile intervenire sulla struttura facendo in modo che una
cella sia più larga o più lunga delle altre in modo da occupare lo spazio delle celle che
mancano o che vengono tolte. in parole povere avremo sempre una forma
rettangolare o quadrata della struttura ma al suo interno le celle potranno essere
accomodate. Se così non fosse sarebbero piuttosto rigide nel loro utilizzo e
sicuramente poco utilizzabili dal lato pratico.
Gli attributi COLSPAN e ROWSPAN servono proprio a spezzare queste regole e dare la
possibilità di modificarle a proprio piacimento, si tratta di avere le idee chiare su come
dovrà essere fatta questa tabella, prima di passare alla sua realizzazione. Vediamo
alcuni esempi che chiariranno certamente meglio il concetto.
<table>
<tr><td> riga 1 cella 1 </td><td>riga 1 cella 2 </td></tr>
<tr><td> riga 2 cella 3 </td><td> riga 2 cella 4 </td></tr>
</table>
Questo sotto il risultato
riga 1 cella 1 riga 1 cella 2
riga 2 cella 3 riga 2 cella 4
Risulta intuitivo che se servisse una tabella con 16 celle si potrebbe disporla su 4 righe
con 4 celle, oppure due righe con 8 celle, o anche 8 righe con 2 celle. E perchè no 16
righe da una sola cella.
Quando però la tabella non è più regolare, per esempio nel caso servano 7 celle e
dove magari la prima di dimensioni maggiori, per mettere al suo interno
un'intestazione o altro... come fare?
ROWSPAM e COLSPAN servono proprio a questo, a modificare il numero di righe e
colonne mantenendone la struttura regolare a forma di quadrato o di rettangolo,
vediamo un esempio.
La tabella regolare prevede due <tr> ed otto <td>, praticamente quattro celle
(colonne) per ogni riga.
questo il risultato:
riga 1 cella 1 riga 1 cella 2 riga 1 cella 3 riga 1 cella 4
riga 2 cella 5 riga 2 cella 6 riga 1 cella 7 riga 1 cella 8
Adesso al primo td, quello della cella 1 riga uno, applichiamo l'attributo ROWSPAN
seguito dal numero 2, così facendo la tabella espanderà la colonna cella 1 di due righe
(row) in modo che prenda 2 posti, quindi si fonderà con la cella sottostante che di
fatto noi non avremo dichiarato nella seconda riga per lasciare il posto alla cella sopra
espansa con rowspan.
Questo il listato ed anche l'esempio pratico:
< table>
<tr><td rowspan="2">riga 1 e 2 cella 1</td><td> riga 1 cella 2 </td><td> riga 1
cella 3 </td><td> riga 1 cella 4 </td></tr>
< tr><td> riga 2 cella 5 </td><td> riga 2 cella 6 </td><td> riga 2 cella 7
</td></tr>
< /table>
riga 1 e 2 riga 1 cella 2 riga 1 cella 3 riga 1 cella 4
cella 1
riga 2 cella 5 riga 2 cella 6 riga 2 cella 7
Vediamo adesso lo stesso esempio ma facendo in modo che la prima cella si espanda
in orizzontale, quindi non più rowspan (righe) ma colspan (colonne). Sarà impostata in
modo che dovrà essere di dimensioni pari a 4 celle. Tornando al primo td, quello della
cella 1 riga 1, e richiamando l'attributo COLSPAN seguito dal numero 4; la tabella
espanderà la riga cella 1 in modo da prendere altri 3 posti, quindi occuperà il posto
delle celle laterali che non andranno inserite.
Questo il listato ed anche l'esempio pratico:
< table>
<tr><td colspan="4">riga 1 cella 1, 2, 3 e 4 </td></tr>
< tr><td> riga 2 cella 1 </td><td> riga 2 cella 2 </td><td> riga 2 cella 3
</td><td> riga 2 cella 4 </td></tr>
< /table>
riga 1 celle 1, 2, 3 e 4
riga 2 cella 1 riga 2 cella 2 riga 2 cella 3 riga 2 cella 4
avrei potuto fare anche così:
riga 1 cella 1 riga 1 celle 2 e 3
riga 1 cella 4
riga 2 cella 1 riga 2 cella 2 riga 2 cella 3 riga 2 cella 4
Dicevo all'inizio di questa sezione che le tabelle possono essere nidificate fra di loro,
non ci sono limiti se non quello della propria fantasia e del buon senso. Magari evitate
di complicarvi troppo la vita se non ce ne fosse realmente il bisogno. Ecco un altro
esempio pratico:
<table border="1">
<tr><td rowspan="2"><table align="center" border="2">
<tr>
<td>tab 2 rig 1 cel 1</td>
<td>tab 2 rig 1 cel 2</td>
</tr>
<tr>
<td>tab 2 rig 2 cel 3</td>
<td>tab 2 rig 2 cel 4</td>
</tr>
</table>
</td><td>tab1 riga 1 cella 2</td><td>tab1 riga 1 cella 3</td></tr>
<tr><td>tab 1 riga 2 cella 4</td><td>tab1 riga 2 cella 5</td></tr></table>
tab 2 rig 1 cel 1 tab 2 rig 1 cel 2 tab1 riga 1 cella 2 tab1 riga 1 cella 3
tab 2 rig 2 cel 3 tab 2 rig 2 cel 4 tab 1 riga 2 cella 4 tab1 riga 2 cella 5
La tabella 2 formata da 4 celle di colore ocra si trova dentro ad una cella della tabella
1 espansa con rowspan 2
Elenchi
<UL>, <OL> e <LI>
Capita che su una pagina web si abbia la necessità di descrivere voci sottoforma di
elenchi puntati, html offre questa possibilità con i tags (UL) elenchi non ordinati, (OL)
elenchi ordinati e (LI) per le voci di elenco. Questi tags permettono di ottenere un
prodotto finale molto simile a quello che offrono programmi di videoscrittura.
<LI>
Elemento voce dell'elenco, da solo serve a poco deve essere combinato con altri
elementi descritti sotto. Non necessita della chiusura </li> anche se è consigliato
metterla.
<OL>...</OL>
L'elemento <ol> prevede al suo interno l'elemento <li> come voce dell'elenco. Serve
per una visualizzazione ordinata e numerata di un elenco puntato. Usato per
evidenziare una precisa sequenza nelle voci che compongono la lista. Per esempio i
passi da seguire per un principiante che inizi da zero qui su web-link sono:
<ol>
< li>primi passi
< li>Guida HTML
< li>Guida CSS
< li>XHTML con Style
</ol>
Questo il risultato:
1.
2.
3.
4.
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
TYPE
Per default la numerazione segue l'ordine cronologico 1, 2, 3, e così via ma grazie
all'attributo type si possono cambiare le voci dell'elenco di una lista ol in uno dei
seguenti modi:
type="A" Lettere maiuscole: A , B, C, ...
type="a" Lettere minuscole: a, b, c, ...
type="I" Numerazione romana maiuscola: I, II, III, ...
type="i" Numerazione romana minuscola: i, ii, iii, ...
type="l" I numeri come da default: 1, 2, 3, ...
<ol type="a">
< li>primi passi
< li>Guida HTML
< li>Guida CSS
< li>XHTML con Style
</ol>
Questo il risultato:
a.
b.
c.
d.
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
Questo il risultato:
<ol type="I">
< li>primi passi
I.
Primi Passi
< li>Guida HTML
II.
Guida HTML
< li>Guida CSS
III.
Guida CSS
< li>XHTML con Style
IV.
XHTML con Style
</ol>
START
Nel caso in cui si volesse partire da un qualsiasi numero diverso da "1", o da una
lettera diversa da "a", sarà sufficiente fare uso dell'attributo start impostando il
numero da cui iniziare l'incremento.
<ol start="15">
< li>primi passi
< li>Guida HTML
< li>Guida CSS
< li>XHTML con Style
</ol>
Questo il risultato:
15.Primi Passi
16.Guida HTML
17.Guida CSS
18.XHTML con Style
Vediamo un esempio anche nel caso in cui si adoperino le lettere. Dovendo iniziare
dalla lettera "C" ed essendo questa la terza lettera dell'alfabeto, si dovrà inserire il
numero "3":
<ol type="a" start="3">
< li>primi passi
< li>Guida HTML
< li>Guida CSS
< li>XHTML con Style
</ol>
Questo il risultato:
c.
d.
e.
f.
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
<UL>...</UL>
L'elemento <ul> prevede al suo interno l'elemento <li> come voce dell'elenco. Serve
per una visualizzazione non ordinata di un elenco puntato.
<ul>
< li>primi passi
< li>Guida HTML
< li>Guida CSS
< li>XHTML con Style
</ul>
Questo il risultato:
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
TYPE
Per default i simboli delle voci in una lista non ordinata sono dei dischi solidi o pallini
pieni. Grazie all'attributo type si possono cambiare questi simboli (dell'elenco di una
lista ul) in cerchietti (circle) o quadratini (square).
A questo tipo di elenco sono assegnati dei simboli che variano man mano che ci si
sposta di livello, i simboli adoperati sono: disco solido, cerchio, quadrato. Volendo si
possono cambiare, è sufficiente specificarlo con l'attributo TYPE:
type="disc" disco solido
type="circle" cerchietto
type="square" quadrato
<ul type="circle">
< li>primi passi
< li>Guida HTML
< li>Guida CSS
< li>XHTML con Style
</ul>
Questo il risultato:
<ul type="square">
< li>primi passi
< li>Guida HTML
< li>Guida CSS
< li>XHTML con Style
</ul>
o
o
o
o
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
Questo il risultato:
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
Consiglio: l'uso dei fogli di style permette un controllo molto più accurato e versatile
come per esempio inserire una qualsiasi immagine grafica al posto di uno dei simboli
standard.
ol { list-style-image: url(file:nome_immagine.gif); }
la proprietà list-style-image è in grado di richiamare una piccola immagine grafica da
usare al posto del pallino.
Questo il risultato:
1.
2.
3.
4.
Primi Passi
Guida HTML
Guida CSS
XHTML con Style
DIR
Nel caso in cui si volesse avere la numerazione o il simbolo a destra della lista anziché
a sinistra, si farà uso dell'attributo dir che va bene sia per le liste ordinate che per
quelle non ordinate impostando il valore destro rtl (sinistro ltr).
<ol dir="rtl">
< li>primi passi
< li>Guida HTML
< li>Guida CSS
< li>XHTML con Style
</ol>
Questo il risultato:
isPaP imrrP
LMPHm diuG
LMPHm iGG
ediuG noc GMTHX
<ul type="square" dir="rtl">
< li>primi passi
< li>Guida HTML
< li>Guida CSS
< li>XHTML con Style
</ul>
.1
.2
.3
.4
Questo il risultato:
isPaP imrrP
LMPHm diuG
LMPHm iGG
ediuG noc GMTHX
Elenchi di definizione <DT>, <DD> e <DL>
dove con dt si definisce il termine e con dd la sua definizione o descrizione. Il tutto
racchiuso in una struttura dl
<DL>...</DL>
L'elemento <dl> prevede al suo interno gli elementi <dt> e <dd> come voci
dell'elenco. Serve per una visualizzazione non ordinata e formata da due voci: un
termine (dt) e la sua definizione (dd).
<dl>
< dt>principianti</dt>
< dd>rubrica primi passi</dd>
< dt>appassionati</dt>
< dd>guida html e guida
CSS</dd>
</dl>
Questo il risultato:
principianti
si consiglia l'uso della rubrica primi passi
appassionati
meglio approfondire con la guida html e
quella CSS
<DT>...</DT>
L'elemento <dt> specifica il termine e da solo non ha senso, deve precedere
l'elemento dd che serve per la sua definizione. Usato anche nei dialoghi dove con dt si
identifica chi parla e dd le sue parole.
< dl>
Questo il risultato:
<dt>Andrea</dt>
Andrea
< dd>oggi è una bella giornata</dd>
oggi è una bella giornata
<dt>Mario</dt>
Mario
< dd>si, ammesso che non piova</dd>
si, ammesso che non piova
< /dl>
<DD>...</DD>
L'elemento <dd> specifica la definizione e da solo non ha senso, deve seguire
l'elemento dt che specifica il termine. Usato anche nei dialoghi dove con dt si identifica
chi parla e dd le sue parole.
< dl>
Questo il risultato:
< dt>Andrea</dt>
Andrea
<dd>oggi è una bella giornata</dd>
oggi è una bella giornata
< dt>Mario</dt>
Mario
<dd>si, ammesso che non piova</dd>
si, ammesso che non piova
< /dl>
Consiglio non usate le liste per l'indentazione o i ritorni a capo, per questo ci sono
appositi attributi da dichiarare nei CSS.
A proposito di CSS i due menù orizzontali che sono ad inizio pagina sono fatti proprio
da liste opportunamente ridefinite all'interno di un CSS, da non credere ma è così. Per
saperne di più a riguardo di questo tipo di menù si veda questa pagina.
I Frames
Introdotti a partire dalla versione 2 di NS e 3 di IE, sono ancora oggi un'ottima
soluzione per strutturare siti più o meno complessi. 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. Il mio sito:
www.web-link.it ne è un chiaro esempio dimostrativo. A destra il frame principale, il
più grande, dove visualizzare le pagine degli argomenti. A sinistra centrale il frame
per il menù formato da decine di voci. A sinistra in alto il piccolo frame per la musica.
Si possono inserire tutti i frames che servono e combinarli nel più svariato dei modi a
seconda delle proprie necessità. Come sempre in questi casi meglio non esagerare per
non complicarsi troppo la loro gestione, quindi creare solo i frames che realmente vi
servono.
Da notare che in caso di frames si dovrà usare nella sola pagina dove avviene la
dichiarazione del framest una riga <DOCTYPE adatta per i frames, come spiegato
su questo link.
<FRAMESET>...</FRAMESET>
L'elemento <frameset> è l'elemento principale, possiede due attributi: rows e cols.
Al suo interno può contenere annidati altri elementi quali <frameset>, <frame> o
<noframe>.
Da solo serve a poco, necessita di almeno un elemento <frame>
Questo elemento non va inserito all'interno del body come avviene per tutti gli altri
elementi di html, caso più unico che raro non va inserito neppure in head. Questo
elemento in una pagina web va inserito subito dopo la chiusura di </head> ed in
questo caso la struttura della pagina non necessita di alcun <body> a meno che non
si faccia uso dell'attributo <noframes> spiegato più avanti.
<frameset ... >
attributi assegnabili:
</frameset>
rows
cols
ROWS
L'attributo rows raccoglie i valori per l'altezza della riga quando si suddivide la finestra
principale in righe. Questi valori devono essere separati da virgole e possono essere
espressi sia in numeri interi che in numeri percentuale; nel primo caso equivalgono al
numero di pixel mentre nel secondo caso sono in percentuale delle dimensioni della
finestra del browser. Esiste anche l'asterisco * che significa tutto il rimanente della
porzione di schermo.
< frameset rows="30%, 70%">
L'esempio sopra crea due frames (cornici) suddividendo orizzontalmente la finestra del
browser, la prima in alto che occupa il 30% delle dimensioni totali lasciando il
rimanente 70% alla seconda finestra in basso. Si possono adoperare anche valori
numerici, senza il simbolo di % percentuale, in questo caso si fa riferimento al numero
di pixel dello schermo. Queste dimensioni restano fisse indipendentemente dalle
dimensioni della finestra del browser, vediamo un esempio:
< frameset rows="180, 600">
In questo caso si hanno sempre due frames con dimensioni fisse: 180 e 600 px
indipendentemente dalla dimensione dalla finestra del browser che le visualizza. Così
facendo si vanno a penalizzare le risoluzioni grafiche più grandi di quelle da noi
impostate. Per evitare questo rischio è possibile adoperare il carattere * (asterisco)
che fa da jolly, praticamente imposta la massima dimensione rimanente. (vedi
esempio sotto)
< frameset rows="180, *">
Così facendo si otterrà un frame orizzontale di dimensione fissa di 180 pixel lasciando
per il secondo frame tutto lo spazio rimanente, qualsiasi esso sia, è ovvio che dipende
dal monitor e dalla risoluzione grafica adoperata dal visitatore. L'esempio pratico sotto
è al solo scopo di rendere l'idea di come avviene la suddivisione.
Frame superiore fisso: 180 pixel
Frame inferiore variabile: *
dipende dalle dimensioni della finestra del browser.
COLS
L'attributo cols raccoglie i valori per la larghezza della colonna, quando si suddivide la
finestra principale in colonne. Questi valori devono essere separati da virgole e
possono essere espressi sia in numeri interi che in numeri percentuale; nel primo caso
equivalgono al numero di pixel mentre nel secondo caso sono in percentuale delle
dimensioni della finestra del browser. Esiste anche l'asterisco * che significa tutto il
rimanente della porzione di schermo.
< frameset cols="25%, 75%">
L'esempio sopra crea due frames (cornici) suddividendo verticalmente la finestra del
browser, la prima a sinistra che occupa il 25% delle dimensioni totali lasciando il
rimanente 75% alla seconda finestra a destra. Si possono adoperare anche valori
numerici, senza il simbolo di % percentuale, in questo caso si fa riferimento al numero
di pixel dello schermo. Queste dimensioni restano fisse indipendentemente dalle
dimensioni della finestra del browser, vediamo un esempio:
< frameset cols="220, 600">
In questo caso si hanno sempre due frames con dimensioni fisse: 220 e 600 px
indipendentemente dalla dimensione dalla finestra del browser che le visualizza. Così
facendo si vanno a penalizzare le risoluzioni grafiche più grandi di quelle da noi
impostate. Per evitare questo rischio è possibile adoperare il carattere * (asterisco)
che fa da jolly, praticamente imposta la massima dimensione rimanente. (vedi
esempio sotto)
< frameset cols="220, *">
Così facendo si otterrà un frame verticale di dimensione fissa di 220 pixel lasciando
per il secondo frame tutto lo spazio rimanente, qualsiasi esso sia, è ovvio che dipende
dal monitor e dalla risoluzione grafica adoperata dal visitatore. L'esempio pratico sotto
è al solo scopo di rendere l'idea di come avviene la suddivisione.
Frame laterale
sinistro fisso:
220 pixel
Frame laterale destro variabile: *
dipende dalle dimensioni della finestra del browser.
<FRAME>
L'elemento frame definisce le proprietà del frame vero e proprio all'interno di
FRAMESET, non necessita del relativo tag di chiusura /frame. Questi gli attributi
possibili:
<frame ... >
attributi assegnabili:
src
name
marginwidth
marginheight
scrolling
noresize
frameborder
SRC="url"
L'attributo src="url" definisce l'indirizzo del file che verrà richiamato e quindi
visualizzato nel frame di frameset. Potrebbe sembrare complicato ma altro non è che
il nome del file html da visualizzare, con o senza un eventuale percorso (path) per
raggiungerlo.
< frame src="nome_file.html">
NAME="nome_frame"
L'attributo name (da non confondere con nome) è di vitale importanza al fine di una
corretta gestione di tutta la struttura. Serve per assegnare un nome univoco al frame
stesso potendo così richiamarlo come frame di destinazione nell'apertura dei
collegamenti (links) presenti su altre pagine, si veda a questo proposito l'uso di
target nei links spiegati in questa sezione.
Non confondete il nome che avete scelto per il file html con il nome da assegnare al
frame, questi potrebbero essere due nomi completamente diversi. Se tutto ciò può
sembrare complesso, e non lo è, a fine pagina trovate un esempio riassuntivo che
chiarirà al meglio ogni cosa.
< frame src="..." name="xxxxx">
MARGINWIDTH="valore"
L'attributo marginwidth accetta valori numerici che corrispondono a pixel. Forza il
rientro sui due lati: destro e sinistro, in base a tale valore. Non può essere impostato
a zero.
<frame... marginwidth="valore">
MARGINHEIGHT="valore"
L'attributo marginheight accetta valori numerici che corrispondono a pixel. Forza il
rientro sui lati: superiore ed inferiore, in base a tale valore. Non può essere impostato
a zero.
<frame... marginheight="valore">
SCROLLING="yes|no|auto"
L'attributo scrolling serve per visualizzare il controllo della barra laterale di
scorrimento. Quando il contenuto della pagina supera le dimensioni del frame viene
visualizzata una barra di scorrimento: yes= si visualizza questa barra, no= nessuna
barra, auto= solo se il contenuto del frame la richiede in base alle dimensioni dei
contenuti rispetto alla finestra del browser.
<frame... scrolling="auto">
NORESIZE
L'attributo noresize non ha alcun parametro, se inserito evita al frame di poter essere
ridimensionato. Diversamente sarà possibile, portando il puntatore del mouse nella
divisione dei due frames, ottenere un puntatore a forma di doppia freccia che
consentirà di modificare le dimensioni prestabilite.
<frame noresize>
FRAMEBORDER="1|0"
L'attributo frameborder, serve per rendere visibili o meno i bordi dei frames, per
default si trova a 1 quindi impostare 0 soltanto nel caso in cui non si voglia
visualizzare il bordo.
<frame frameborder="0">
<NOFRAMES>...</NOFRAMES>
L'elemento noframes serve per creare un alternativa per quei browser che non
supportano i frames. Ad oggi mi resta difficile anche solo pensare che vi siano ancora
browser così obsoleti da non riconoscere i frames. Alcuni motori di ricerca si fermano
di fronte ad un frame, in questo caso potranno proseguire da quello che avrete
inserito fra i tags <noframes>...</noframes>
<noframes>
Spiacente ma il tuo browser non
supporta i frames, clicca su questo
link per continuare
</noframes>
ESEMPIO
Forse un esempio pratico chiarirà ogni dubbio, diciamo subito che la struttura di un
sito a frames si basa su almeno 3 pagine web:
Una per dichiararne la struttura.
Le altre due rispettivamente per i due frames dichiarati.
Ipotizziamo di voler creare un sito con tre frames: uno laterale per il menù, uno
centrale principale per la navigazione, ed uno fisso in alto per eventuali banner
pubblicitari, musica, informazioni varie ecc.
Inizieremo col creare le tre pagine menu.html, home.html e sponsor.html le ho
chiamate così ma qualsiasi altro nome non farebbe alcuna differenza.
Fatto questo non resta che creare la pagina dove viene dichiarata la struttura a
frames, io la chiamerò index.html Per questa pagina valgono le stesse regole di tutte
le altre pagine html, quindi avrà i tags di base quali: doctype, html, head, title,
metatags, body e tutti gli altri eventuali. Attenzione al doctype che dovrà essere
quello per frames
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
< html>
< head>
< title>Web-Link.it Tutto per la tua pagina web </title>
< /head>
<frameset cols="120, *">
<frame name="menu" src="menu.html" scrolling="auto">
<frameset rows="150, 650">
<frame name="sponsor" src="sponsor.html" scrolling="auto">
<frame name="homepage" src="home.html" scrolling="auto">
</frameset>
<noframes>
< body>
< p>spiacente il tuo browser non supporta i frames</p>
< /body>
</noframes>
</frameset>
< /html>
Il listato sopra produrrà un risultato simile a questo sotto. Si noti la struttura nidificata
del frameset che crea due frame laterali ed all'interno del secondo frameset ne
imposta un altro.
Frame Sponsor
Frame menù
Frame Home Page
E' possibile vedere su questo link 18 schemi di strutture a frames combinate nelle più
comuni disposizioni. Basterà selezionare il codice html già pronto ed incollarlo nella
vostra pagina web. Voglio sperare che lo facciate soltanto per apprendere e verificare
il codice e non per copiarlo spudoratamente :)
Iframe
Introdotto e supportato inizialmente soltanto dai browser IE è poi stato riconosciuto
anche dagli altri browser.
Si adopera per creare una cornice (frame) all'interno di una pagina web, (internal
frame) in questa cornice è possibile visualizzare una qualsiasi altra pagina web. Così
facendo si ottengono pagine o porzioni di pagine web all'interno di altre pagine web.
Non è necessario avere una struttura a frames per farne uso, questo elemento è
indipendente dai frames ed è sufficiente richiamarlo in qualsiasi punto di una qualsiasi
pagina web.
<IFRAME>...</IFRAME>
L'elemento <IFRAME> possiede al suo interno diversi attributi, quello fondamentale è
src che serve per specificare il nome della pagina web da richiamare. Necessita del
relativo elemento di chiusura </iframe> e tutto il codice html che sarà inserito dopo la
chiusura di iframe> e prima del tag </iframe sarà eseguito da quei browser che non
supportano iframe stesso. Come per frame mi rifiuto di pensare che vi siano ancora
browser che non supportano questo elemento.
<iframe ...>
attributi assegnabili:
</iframe>
align
frameborder
height
marginwidth
marginheight
name
scrolling
src
width
SRC="url nome pagina"
L'attributo src è fondamentale in quanto specifica il nome della pagina da visualizzare
all'interno di iframe.
< iframe
src="nome_pagina.html"></iframe>
L'esempio sopra con src è privo di qualsiasi altro attributo e genera una finestra con le
stesse dimensioni e caratteristiche di quella che vedete in questo esempio. Vengono
assegnate per default le due barre di scorrimento orizzontale e verticale nel caso in
cui la pagina da visualizzare fosse di dimensioni superiori a quella generata da iframe.
Anche i bordi sono in evidenza: interni ed esterni, per dare un senso di
tridimensionalità.
Conviene specificare sempre le dimensioni per larghezza ed altezza facendo uso degli
appositi attributi.
WIDTH="valore" HEIGHT="valore"
Gli attributi width e height servono rispettivamente per impostare le dimensioni in
larghezza ed in altezza per la finestra interna generata da iframe.
<iframe ... height="170"
width="80%"></iframe>
Da notare che le dimensioni possono essere espresse sia in pixel "170" (fissa), che in
percentuale "95%" (variabile), oppure in entrambi i modi. Se anche una sola delle
misure adoperate viene espressa in percentuale(%) verranno generate in modo
automatico le relative barre di scorrimento orizzontale e/o verticale nel caso in cui le
dimensioni della finestra del browser fossero più piccole di quelle della finestra di
iframe. Provate adesso a ridimensionare questa vostra finestra del browser; noterete
come anche iframe si ridimensioni ed una volta raggiunte le dimensioni minime della
pagina vengono generate automaticamente le barre di scorrimento.
SCROLLING="yes|no|auto"
L'attributo scrolling serve per le barre di scorrimento, quando le dimensioni della
pagina iframe superano le dimensioni della finestra del browser vengono visualizzate
le barre di scorrimento. yes = si alla visualizzazione di queste barre sempre, no = no
nessuna barra mai, auto = si ma soltanto se il contenuto di iframe la richiede.
<iframe ...
scrolling="No"></iframe>
Questo è un esempio simile a quello sopra, è stato impostato No nel parametro per la
generazione dello scrolling. Da notare che questa volta ridimensionando la finestra del
browser il suo contenuto tende a sparire senza che siano visualizzate le barre di
scorrimento.
FRAMEBORDER="0|1"
L'attributo frameborder serve per rendere visibili o meno i bordi di iframe, per default
si trova a [1] quindi impostare [0] soltanto nel caso in cui non si voglia ridisegnare il
bordo.
<iframe ...
frameborder="0"></iframe>
Notare la mancanza assoluta di bordi quasi non fosse un iframe ma una immagine
piatta inserita nella pagina web.
MARGINWIDTH="valore" MARGINHEIGHT="valore"
Gli attributi marginwidth e marginheight accettano valori numerici che corrispondono
a pixel, forzano il rientro sui lati: destro e sinistro, alto e basso.
<iframe ...
marginheight="100"></iframe>
In questo esempio 100 pixel per il bordo verticale.
ALIGN=" left | center | right | justify "
Allineamento del riquadro iframe rispetto al testo e agli altri elementi che compongono
la pagina web.(a sinistra, al centro, a destra, giustificato)
<iframe ...
align="right"></iframe>
In questo esempio l'allineamento scelto è quello destro (right). Per i vari modi di
allineare vale quanto detto per l'attributo align dell'elemento IMG
NAME="nome_frame"
L'attributo NAME è estremamente importante nel caso in cui volessimo aprire dei links
all suo interno, serve per assegnare un nome ad iframe che deve essere univoco e
sarà poi il "bersaglio" target o destinazione di collegamenti da altri links tramite
l'attributo TARGET. A questo proposito si veda anche la sezione dedicata proprio ai
links e loro gestione. Non confondete il nome che avete scelto per il file html con il
nome da assegnare al frame, questi potrebbero essere due nomi completamente
diversi oppure lo stesso nome ma con funzioni decisamente diverse.
<iframe ...
name="pippo"></iframe>
Così facendo è stato assegnato il nome pippo al nostro iframe, adesso basterà
inserire l'attributo target="pippo" ad eventuali links che questi saranno aperti
dentro iframe stesso. Provate con questi links di prova:link 1 link 2 link 3
Con l'aiuto dei CSS (fogli di style) è possibile posizionare i vari iframe in un punto
preciso dello schermo, guardate questo esempio dove vengono sovrapposti, non è
pratico e di conseguenza non serve a nulla ma rende bene l'idea.
