Lezioni Di HTML: A Cura Del Prof. Gennaro Cavazza

Il documento fornisce un'introduzione ai concetti di base di HTML. Spiega cosa è HTML e come viene utilizzato per creare pagine web. Descrive le sezioni head e body di una pagina HTML e introduce i tag di testo di base come font, link, formattazione e dimensione del testo.

Caricato da

Ivano Antar Vagnotti

Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.

Formati disponibili

Scarica in formato PDF, TXT o leggi online su Scribd

Il 0% ha trovato utile questo documento (0 voti)

232 visualizzazioni62 pagine

Lezioni Di HTML: A Cura Del Prof. Gennaro Cavazza

Caricato da

Ivano Antar Vagnotti

Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.

Formati disponibili

Scarica in formato PDF, TXT o leggi online su Scribd

Sei sulla pagina 1/ 62

Lezioni di HTML

A cura del prof. Gennaro Cavazza

2
Fondamentali

INTRODUZIONE

Le pagine web sono scritte in HTML - un semplice linguaggio di scrittura.

HTML la forma abbreviata di HyperText Markup Language
L'ipertesto semplicemente un testo che funziona come un link.
Markup Language una maniera di scrivere informazioni sul layout dei documenti.

In pratica un documento in HTML soltanto un file che contiene solamente testo e nient'altro.

Quando un browser apre un file HTML, sar lo stesso browser a cercare codici HTML nel testo e ad
usarli per modificare il layout, inserire immagini, o creare link per altre pagine.

Essendo dei semplici file di testo, i documenti HTML possono essere scritti anche col pi semplice
text editor.

Molti preferiscono per usare uno speciale HTML editor - possibilmente in grado di evidenziare il
risultato visivo piuttosto che i codici - un cosiddetto WYSIWYG ("What You See Is What You
Get").

Alcuni dei pi diffusi HTML editor, come Frontpage o Dreamweaver danno la possibilit di creare
pagine pi o meno nello stesso momento in cui si scrivono documenti in Word o qualsiasi altro text
editor.

Comunque, ci sono alcuni buoni motivi per creare le tue pagine - o parti di queste - a mano...

PERCHE' IMPARARE HTML?

E' possibile creare pagine web senza conoscere il codice HTML .

Esistono sul mercato degli eccellenti editor che si occupano di tutte le parti in HTML . Il tuo lavoro
sar soltanto quello di progettare la pagina.

Comunque, se vuoi creare pagine con un buon livello di design, ti consigliamo di conoscere pi da
vicino i tag.

Questi sono i principali vantaggi:

Puoi usare tag che un editor non adopera.
Puoi leggere il codice delle pagine di altre persone e "prendere in prestito" degli effetti che ti
interessano.
Puoi creare da solo degli effetti quando un editor non in grado di produrli.

3
Puoi scrivere il tuo HTML a mano con quasi tutti i text editor disponibili, anche il blocco note
incluso di norma in Windows.

Devi soltanto digitare il codice, poi salvare il documento, ricordandoti di dare al file un'estensione
.html oppure un'estensione .htm (per esempio "pagina.html")

TAGS

In pratica, un computer vede una "A" soltanto come una "A" - senza differenze tra grassetto,
corsivo, maiuscolo o minuscolo.

Per dire al browser che una "A" deve essere in grassetto dobbiamo aggiungere una sigla davanti alla
A.

Questo tipo di sigla si chiama Tag.

Tutti i tag HTML sono racchiusi in < e >.

Esempio: un testo come appare sullo schermo.
Questo un esempio di testo in grassetto.

lo stesso testo in HTML:
Questo un esempio di testo in <b>grassetto</b>.

Come puoi vedere, il tag iniziale <b> indica che tutto quello che segue dovr essere scritto in
grassetto. Il corrispondente tag finale </b> indica che il browser non dovr pi scrivere in
grassetto.

STRUTTURA DELLA PAGINA

Normalmente le pagine web consistono in una "testa", in inglese head e un "corpo", detto anche
body.

L'head viene usata per testo e tag che non vengono mostrati direttamente sulla pagina.
Il body viene usato per testo e tag che sono visibili direttamente sulla pagina.

In pratica, tutte le pagine web hanno un tag <html> all'inizio e alla fine, che indicano al browser
l'inizio e la fine del documento.

Il codice pi semplice - quello che userai per ogni pagina che farai, questo:

<html>

<head>

</head>

<body>
4

</body>

</html>

SEZIONE "HEAD"

La sezione "head" della pagina web comprende tutto quello che non viene mostrato direttamente
sulla stessa pagina.
I tag <title> e </title> racchiudono il titolo della tua pagina. Il titolo quello che si vede in
cima alla tua finestra browser quando la pagina scaricata.

Un'altra cosa che ti capiter spesso di vedere nella sezione "head" metatags. I metatag vengono
adoperati, tra le altre cose, per aggiornare le classifiche nei motori di ricerca.

Molto spesso la sezione "head" contiene javascript che un linguaggio di programmazione per
pagine HTML pi complesse.

Infine, molte pagine contengono codici per CSS (cascading style sheets).
CSS una tecnica piuttosto nuova che serve ad ottimizzare i layout dei siti pi complessi.

Siccome questi aspetti sono ancora troppo complicati per questo livello, continuiamo quindi
spiegando la sezione "body".

SEZIONE BODY

Il corpo, "body", del documento, contiene tutto ci che visibile quando la pagina viene scaricata.

Nel resto di questo corso potrai imparare dettagliatamente tutti i diversi aspetti di HTML, compresi:

Testo
o Formattazione
o Ridimensionamento
o Layout
o Listing
Link
o A pagine locali
o A pagine di altri siti
o A segnalibri
Immagini
o Inserimento di immagini (GIF e jpg)
o Aggiunta di un link a un'immagine
Fondali
o Colori
o Immagini
o Immagine fissa
Tabelle
o Frame
5
o Form
o Metatag
o Colori Esadecimali (Hex)

6
Testo HTML :

INTRODUZIONE

Per inserire un testo nelle tue pagine - devi semplicemente inserire il testo.

Non specificando particolari attributi per il testo, questo assumer i valori di default (dimensione,
font, eccetera) del browser del visitatore.

I browsers possono soltanto mostrare i font disponibili sul PC del visitatore.

In questo modo, devi limitarti ad usare i font che sono disponibili per la maggioranza dei computer.

Se ti va di usare un font fuori dalla norma, faresti bene ad usare il tuo programma di grafica e
trattare il testo come un'immagine. Con questo procedimento puoi essere sicuro che il visitatore sar
in grado di ricevere il tuo font particolare, anche se questo non contenuto nel suo computer.

Siccome le immagini prendono pi spazio di un semplice testo, aumentando cos il tempo di
scarico, cerca di limitare il pi possibile questa opzione.

Nelle pagine seguenti imparerai a personalizzare gli attributi dei font - sia per i testi normali, sia per
quelli che funzionano come links.

In pi, imparerai a controllare l'allineamento del testo sulla pagina.

BASEFONT

Per specificare il font principale della tua pagina, aggiungi il tag <basefont> (font di base)
all'inizio della sezione <body>.

Esempio: la pagina come appare nel browser.

Ciao! Questa la mia pagina.
Il testo tutto uguale
perch ho specificato soltanto un basefont.

HTML: Il codice per produrre l'esempio qui sopra.

<html>
<head>
<title>my page</title>
</head>

<body>
<basefont face="arial, verdana, courier" size="4" color="#FFFFFF">
Ciao! Questa la mia pagina.<br>
Il testo tutto uguale<br>
7
perch ho specificato soltanto un basefont.<br>
</body>
</html>

L'attributo colore seleziona il colore prescelto per il tuo testo. L'attributo face seleziona il font
desiderato.

Nota:
Se inserisci una lista di font, come nell'esempio, il browser user il primo font della lista disponibile sul computer del
visitatore.

L'attributo size (misura) specifica la misura desiderata, tra 1 (la pi piccola) e 7 (la pi grande).

FONT

Il tag <font> cambia il font.

Esempio: come appare il comando nel browser.

Ciao! Questa la mia pagina.

Questa parte di testo diversa.

Questo testo come la prima riga.

HTML: Il codice per produrre l'esempio qui sopra.

<html>
<head>
<title>My Page</title>
</head>

<body>
<basefont color="#FFFFFF" face="arial" size="4">
Ciao! Questa la mia pagina .<br><br>
<font color=#00FF00 face=arial size=2>
Questa parte di testo diversa.
</font>
<br><br>
Questo testo come la prima riga.
</body>
</html>

L'attributo colore seleziona il colore prescelto per il tuo testo. L'attributo face seleziona il font
desiderato.

Nota:
Se inserisci una lista di font, come nell'esempio, il browser user il primo font della lista disponibile sul computer del
visitatore.

8
LINKS DI TESTO

I tag che si adoperano per creare link sono <a> e </a>.

Il tag <a> definisce l'inizio del link, mentre </a> ne indica la fine.

Tutto quello che sta tra questi due tag si comporter come un link.

La meta del link si aggiunge al tag <a> usando
il comando href="http://www.nomesito.com"

L'esempio qui sotto mostra come far far s che la parola qui diventi un link per yahoo.

Clicca <a href="http://www.yahoo.com">qui</a> per andare su yahoo.

Devi soltanto:
Specificare la meta nel <a href=" ">.
Poi aggiungere il testo che fa partire il link.
Infine aggiungere un tag </a> per indicare la fine del link.

FORMATO DEL TESTO

Questi sono iI tag per specificare il formato del testo:

<b>text</b>
<strong>text</strong> Scrive il testo in grassetto

<i>text</i>
<em>text</em> Scrive il testo in italico

<u>text</u> Sottolinea il testo
<sub>text</sub> Scrive in basso (pedice) e piccolo
<sup>text</sup> Scrive in alto (apice) e piccolo
<blink>text</blink> Scrive il testo lampeggiante
<strike>text</strike> Traccia una line ache taglia il testo
<tt>text</tt> Scrive come su di una macchina da scrivere
Text Scrive il testo cos com, inclusi gli spazi

Nota:
Il tag <blink> funziona solamente sui browsers Netscape, e dovrebbe essere evitato.

MISURA DEL TESTO

Questi sono I tags per variare la dimensione del font

<big>text</big> Incrementa la dimensone di ununit
9
<small>text</small> Decrementa la dimensione di ununit
<h1>text</h1> Scrive con il titolo pi grande
<h6>text</h6> Scrive con il titolo pi piccolo
<font size="1">text</font> Scrive il testo con la minima dimensione (8 pt)
<font size="7">text</font> Scrive il testo con la dimensione massima (36 pt)

Nota:
Se nessuna delle misure qui sopra va bene, ti consigliamo di salvare il testo come un'immagine, e poi di inserire
l'immagine sulla pagina.

I tag <small> e <big> hanno la particolarit di poter essere ripetuti. Se vuoi aumentare la misura
del font di un fattore due, ecco come puoi fare:

bla bla bla <big><big>qualcosa</big></big> bla bla bla

PROGETTAZIONE DEL TESTO
Questi tags servono a controllare il layout.

HTML SPIEGAZIONE
<p>text</p>
Aggiunge un'interruzione di
paragrafo dopo il testo.
(2 linebreaks).
<p align="left">text</p>
Giustifica a sinistra il testo nel
paragrafo.
<p align="center">text</p> Testo centrale nel paragrafo.
<p align="right">text</p>
Giustifica a destra il testo nel
paragrafo.
text<br>
Aggiunge una singola interruzione di
riga dove c' il tag.
<nobr>text</nobr>
Elimina gli "a capo" automatici
- anche se il testo pi esteso della
finestra.
text<wbr>
Permette al browser di inserire un "a
capo"
esattamente in questo punto
- anche se il testo compreso tra
tags <nobr>.
<center>text</center> Testo centrale.
<div align="center">text</div> Testo centrale.
<div align="left">text</div> Testo giustificato a sinistra.
<div align="right">text</div> Testo giustificato a destra.

10
Nota in particolare la differenza tra i tag <p> e <div>. Il tag <div> ti permette di giustificare il
contenuto senza essere costretto ad aggiungere una doppia interruzione di riga.

Ancora, osserva che questi tag di allineamento non si limitano al solo testo. Funzionano su testo,
immagine, o su tutto quello che si vuole inserire nella pagina.
11
Liste HTML :

INTRODUZIONE

Per creare una lista contrassegnata da punti devi inserire un tag <ul> e un tag </ul> all'inizio e
alla fine della lista.

Le liste contrassegnate da numeri hanno i tag <ol> invece di <ul>.

Per separare le singole voci della lista, usa i tag <li> e </li>.

Ci sono particolari attributi che puoi adoperare per personalizzare le liste sulla tua pagina.

Nelle due pagine seguenti troverai notizie pi dettagliate sulle liste a punti e su quelle numerate.

LISTE A PUNTI

Questo paragrafo mostra come ottenere diversi tipi di liste a punti.

Puoi scegliere tra questi tipi di punti:

disc
circle
square

Guarda questi esempi e il modo in cui sui ottengono.

CODICE HTML SPIEGAZIONE / ESEMPIO
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Crea una lista a punti usando il tipo di punto
del default:
text
text
text

<ul type="disc">
Inizia una lista a punti usando dischi come
punti:
Questa una riga
Questa un'altra riga
E questa l'ultima riga

12
<ul type="circle">
Inizia una lista a punti usando cerchi come
punti:
o Questa una riga
o Questa un'altra riga
o E questa l'ultima riga

<ul type="square">
Inizia una lista a punti usando quadrati
come punti:
Questa una riga
Questa un'altra riga
E questa l'ultima riga

LISTE NUMERATE

Questa pagina mostra come si possono creare diversi tipi i liste a numeri.

Queste sono le opzioni numeriche disponibili:

Numeri
Lettere maiuscole
Lettere minuscole
Numeri romani maiuscoli
Numeri romani minuscoli

In aggiunta a queste opzioni puoi specificare il numero di partenza della lista. Il valore di default
per le liste a numeri 1 (o la lettera A).

Guarda questi esempi e il modo in cui sui ottengono.

CODICE HTML SPIEGAZIONE / ESEMPIO
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Crea una lista a numeri usando il valore di default:
1. text
2. text
3. text

<ol start="5">
Inizia una lista a numeri, partendo dal n. 5.
5. Questa una riga
6. Questa un'altra riga
13
7. E questa l'ultima riga

<ol type="A">
Inizia una lista a numeri, usando lettere maiuscole.
A. Questa una riga
B. Questa un'altra riga
C. E questa l'ultima riga

<ol type="a">
Inizia una lista a numeri, usando lettere minuscole.
a. Questa una riga
b. Questa un'altra riga
c. E questa l'ultima riga

<ol type="I">
Inizia una lista a numeri, usando numeri romani maiuscoli.
I. Questa una riga
II. Questa un'altra riga
III. E questa l'ultima riga

<ol type="i">
Inizia una lista a numeri, usando numeri romani minuscoli.
i. Questa una riga
ii. Questa un'altra riga
iii. E questa l'ultima riga

<ol type="1">
Inizia una lista a numeri, usando numeri normali.
1. Questa una riga
2. Questa un'altra riga
3. E questa l'ultima riga

<ol type="I" start="7">
Un esempio di come type (tipo) e start (inizio) possono essere combinati.
VII. Questa una riga
VIII. Questa un'altra riga
IX. E questa l'ultima riga

14

Immagini HTML :

INTRODUZIONE

Questa sezione ti insegner ad aggiungere immagini alle tue pagine.
Cominciamo con la presentazione dei due principali tipi di immagini per pagine web: jpg e gif.

Quindi procederemo spiegandoti i vari modi di inserire e personalizzare le immagini, soffermandoci
sui diversi allineamenti che si possono scegliere.

Anche se l'argomento centrale di queste pagine sono le immagini, ci sono un paio di aspetti relativi
alle immagini che non verranno trattati qui.

Se vuoi imparare a creare delle immagini che funzionano anche come link, devi andare alla sezione
link.

Se vuoi sapere quali sono i colori "browser safe" per le immagini, devi andare alla sezione colori
hex.

Se ti interessa imparare qualcosa sugli effetti che si possono ottenere passando il mouse sulle
immagini, devi andare alla sezione javascript .

GIF E JPG

I computer immagazzinano le immagini in diverse maniere.

Alcuni metodi si basano sulla massima compressione possibile dell'immagine.

Uno dei maggiori problemi circa l'uso delle immagini nei siti web consiste nel fatto che scaricare le
immagini richiede molto pi tempo rispetto al testo.

Per ridurre il pi possibile il tempo necessario a scaricare, vengono usati dei formati di
compressione di immagini. I due migliori usati sul web sono:

GIF JPG
256 colori Colori illimitati
Pu gestire aree trasparenti Non pu gestire aree trasparenti
Questo formato non va bene
per comprimere fotografie
Eccellente nella compressione di
fotografie e immagini complesse
In generale, eccellente per
titoli, bottoni e clipart
In generale, non adatto per titoli,
bottoni e clipart.
15

Questo significa che:

Titoli, bottoni, divisori, clipart e altre semplici immagini funzionano meglio in GIF.
Fotografie e immagini complesse normalmente funzionano meglio in JPG.

Se vuoi usare un'immagine che in formato diverso da JPG o GIF, devi scaricare l'immagine in un
programma di grafica e salvarla sia come JPG che come GIF.

Inserimento in HTML

Il tag usato per inserire un'immagine si chiama <img>.

Qui sotto puoi vedere un'immagine chiamata "rainbow.gif".

Ecco il codice HTML usato per inserire l'immagine in una pagina web:

<img src="http://www.kadath.com/rainbow.gif">

Se l'immagine viene immagazzinata nello stesso folder della pagina HTML, si pu tralasciare il
riferimento al dominio (in questo caso, http://www.kadath.com/) e passare direttamente a inserire
l'immagine con questo codice:

<img src="rainbow.gif">

Nelle pagine seguenti tratteremo i diversi modi di controllare come l'immagine viene inserita.

RIDIMENSIONAMENTO

Puoi cambiare le dimensioni di un'immagine usando gli attributi width e height (larghezza e
altezza).

In generale, non consigliabile ridurre le dimensioni delle immagini usando questi comandi, in
quanto l'immagine viene trasferita in internet nella sua misura originale, indipendentemente dalla
riduzione che si operata su di essa. Questo rallenterebbe lo scaricamento della tua pagina web.

Questo significa che se hai un'immagine pi grande di quanto la vorresti, per inserirla in dimensioni
ridotte sulla tua pagina, dovrai ridurla in un programma di grafica, invece di ridurne semplicemente
le dimensioni sulla pagina usando gli attributi width e height.

Al contrario, a volte, pu essere vantaggioso ingrandire le immagini usando questa tecnica.

16
Ecco due presentazioni della stessa identica immagine - con differenti opzioni per larghezza (width)
e altezza (height).

<img src="http://www.kadath.com/rainbow.gif" width="60" height="60">

<img src="http://www.kadath.com/rainbow.gif" width="120" height="120">

Se non vengono specificate le opzioni di larghezza e altezza, il browser automaticamente user le
dimensioni reali dell'immagine.

Comunque, dovresti sempre specificare le opzioni di larghezza e altezza, anche quando usi
un'immagine nelle sue dimensioni reali!

Il motivo che se queste opzioni vengono tralasciate, il browser non pu costruire la pagina finch
l'immagine non completamente scaricata.

Questo vuol dire che il visitatore non pu leggere il testo intorno all'immagine mentre l'immagine
stessa viene scaricata - e questo d come risultato l'impressione di una pagina "lenta".

Questo ancora pi evidente se l'immagine all'interno di una tebella.
In tal caso, l'intera tabella appare solo quando l'immagine completamente scaricata.

BORDO INTORNO

Puoi aggiungere un bordo all'immagine usando l'opzione border

Nota:
I browser Netscape mostreranno il bordo soltanto se l'immagine un link.

<img src="http://www.kadath.com/rainbow.gif" border="5">

L'aggiunta di un bordo all'immagine serve anche per aiutare il visitatore a capire immediatamente
che l'immagine in questione un link. Comunque, la rete piena di immagini - link che non hanno
bordi, cos normalmente i visitatori fanno scorrere il mouse sulle immagini per vedere se queste
sono anche link.

Comunque - se hai un'immagine che crea spesso dubbi, dovresti considerare l'ipotesi di aggiungerle
un bordo - o forse faresti addirittura meglio a cambiare del tutto l'immagine - perch se questa non
mostra chiaramente di essere un link, vuol dire che non efficace.

TESTO ALTERNATIVO

Puoi aggiungere un testo alternativo a un'immagine usando l'opzione alt

<img src="http://www.kadath.com/rainbow.gif" alt="Questo un testo che va con
l'immagine">

17
Bisognerebbe sempre aggiungere testi alternativi alle immagini, in modo che gli utenti possano farsi
un'idea dell'immagine prima che questa venga scaricata.

Questo particolarmente importante se l'immagine un link.

Ci sono poche cose che irritano di pi di voler lasciare la pagina corrente - e allo stesso tempo
essere obbligati ad aspettare che un'immagine venga completamente scaricata prima di poterlo fare.

Viene allora quasi spontaneo adoperare i semplici comandi del browser e abbandonare l'intero sito.

SPAZIO INTORNO

Puoi facilmente aggiungere spazio sopra e sotto le tue immagini con l'attributo Vspace .

In modo simile puoi aggiungere spazio a destra e a sinistra dell'immagine usando l'attributo
Hspace .

Ecco un esempio sull'uso di questi attributi:

<img src="rainbow.gif" Hspace="30" Vspace="10">

Come vedi queste opzioni ti permettono di aggiungere spazio intorno alla tua immagine. Purtroppo
ti obbligano ad aggiungere la stessa quantit di spazio a ogni lato dell'immagine (sopra e sotto - o
destra e sinistra).

Il modo per aggirare il problema, se si vuole aggiungere spazio solo ad un lato dell'immagine, di
usare un'immagine gif trasparente di 1x1 pixel.

Se, per esempio, vuoi uno spazio di 10 pixel sul lato destro dell'immagine, puoi usare l'immagine
trasparente (pixel.gif) in questo modo:

<img src="pixel.gif" width="10" height="1"><img src="rainbow.gif">

L'immagine gif trasparente di 1x1 pixel viene semplicemente "tirata" fino a raggiungere la
dimensione desiderata.

Il "trucchetto" dell' 1x1 pixel probabilmente uno degli stratagemmi pi usati sull'intera rete per
risolvere problemi.

I motivi sono ovvi: funziona su tutti i browsers e assicura una assoluta precisione di pixel nel
progetto!

ALLINAEAMENTO

Si possono allineare le immagini in conformit con il testo che le circonda, usando i seguenti
allineamenti:

18
default allinea l'immagine usando gli attributi di default del Web browser. E' come baseline.
left allinea l'immagine al margine sinistro e avvolge il testo che segue l'immagine.
right allinea l'immagine al margine destro e avvolge il testo che precede l'immagine.
top allinea la parte superiore dell'immagine con il testo intorno.
texttop allinea la parte superiore dell'immagine con la parte superiore del testo situato pi in
alto sulla linea.
middle allinea la parte mediana dell'immagine con il testo intorno.
absmiddle alinea l'immagine con il centro della linea corrente.
baseline allinea l'immagine con il baseline della linea corrente.
bottom allinea la parte inferiore dell'immagine con il testo intorno.
absbottom allinea l'immagine con la parte inferiore della linea corrente.
center allinea il centro dell'immagine con il testo intorno.

RACCHIUDERE IL TESTO

In aggiunta agli allineamenti verticali trattati nella pagina precedente, ci sono anche i possibili
allineamenti orizzontali dell'immagine.

Per fare questo, basta aggiungere align="left" o align="right" al tag <img>.

Lo stesso effetto si pu ottenere inserendo immagine e testo in una tabella invisibile. Inserendo il
testo in una colonna e l'immagine in un'altra, si creer un effetto simile.
19
Links HTML :

INTRODUZIONE

I link sono la parte pi importante del world wide web. Sono i link che tengono insieme la rete.

Ci sono tre tipi di link che puoi avere nel tuo sito:

Link che si agganciano alla pagina corrente (Interni).
Link per altre pagine dello stesso sito (Locali).
Link per pagine al di fuori del sito (Globali).

E' possibile creare testi e immagini funzionanti come link. Con un po' di creativit, anche altri
oggetti, come bottoni o persino men a discesa possono diventare link.

Questa sezione tratter i link pi "tradizionali": Testi e Immagini.

Altri tipi di link pi avanzati richiedono l'uso di javascript. Guarda nella sezione javascript per
saperne di pi.

COME FARE UN LINK

I tag usati per generare i link sono <a> e </a>.

Il tag <a> indica dove il link ha inizio, mentre </a> ne indica la fine.

Tutto quello che contenuto tra questi due tag si comporter come un link.

La meta del link viene specificata aggiungendo al tag <a> usando l'attributo
href="http://www.pagina.com".

L'esempio qui sotto ti mostra come far diventare la parola qui un link per yahoo.

Clicca <a href="http://www.yahoo.com">qui</a> per andare su yahoo.

Devi soltanto:
Specificare la meta nello spazio <a href=" ">.
Inserire il testo che fa partire il link.
Aggiungere infine un tag </a> per indicare la fine del link.

COLORI PER I LINK DI TESTO

Ci sono alcuni attributi che possono essere utili per il controllo dei colori dei link di testo.
20

Questa sezione ti insegner a:

Definire i colori per tutti i link sulla pagina.
Definire i colori per i singoli link sulla pagina.
Definire i colori per tutti i link sulla pagina

Il colore generale dei link di testo specificato nel tag <body>, come nell'esempio qui sotto:

<body link="#C0C0C0" vlink="#808080" alink="#FF0000">

link - link normale - per una pagina dove il visitatore non ancora stato. (il colore standard
blu - #0000FF).

vlink - link visitato - per una pagina dove il visitatore gi stato. (il colore standard viola -
#800080).

alink - link attivo - il colore del link quando toccato dal mouse. (il colore standard rosso -
#FF0000).

Nota:
In HTML i colori sono codificati con i valori esadecimali per i singoli canali R G B.

Definire i colori per i singoli link sulla pagina

Il metodo descritto sopra vale per dare un colore comune ai link della pagina. Comunque, puoi
sempre scegliere di dare a uno o pi link colori diversi dal resto della pagina.

Ci sono due modi per farlo:

Mettendo dei font tag tra i tag <a href> e </a>. Questo metodo funziona su tutti i browser
tranne MSIE 3.

Usando un attributo di stile nel tag <a>. Questo metodo funziona su MSIE3 e i browser pi
recenti.

Ecco il primo metodo:

Clicca <a href="http://www.yahoo.com"><font color="FF00CC">qui</font></a> per
andare su yahoo.

Nota:
E' importante che i due tag <font> e </font> siano scritti tra i tag <a href> e </a>.

Ecco il secondo metodo:

Clicca <a href="http://www.yahoo.com" style="color: rgb(0,255,0)">qui</a> per
andare su yahoo.

Nota:
I numeri RGB indicano le quantit di rosso, verde e blu usando valori compresi tra 0 e 255.

21
Ora, siccome nessuno dei due metodi funziona su tutti i browser, dobbiamo usarli insieme,
combinandoli.

Questo esempio funzioner su tutti i browser:

Clicca
<a href="http://www.yahoo.com" style="color: rgb(0,255,0)">
<font color="FF00CC">qui</font>
</a> per andare su yahoo.

Quest'ultimo esempio interessante. Non solo perch in grado di funzionare su tutti i browser, ma
anche perch mostra un approccio generale alla creazione di pagine "sicure" su tutti i browser.

Siccome i browser ignorano tutte le informazioni che non capiscono, puoi aggirare le differenze tra
i browser semplicemente aggiungendo differenti attributi per diversi browser.

Se vuoi effetti pi sofisticati, consulta la sezione dedicata ai fogli di stile.

METE DEL LINK

Per default, i link si aprono nella finestra o schermata corrente. Se vuoi che il link si apra in un'altra
finestra, devi stabilire una meta ("target").

Per fare questo ti basta aggiungere target="" al tag <a href>.

Proviamo ad aprire yahoo in una nuova finestra:

<a href="http://www.yahoo.com" target="_blank">

Le mete predefinite sono:

_blank scarica la pagina in una nuova finestra del browser.
_self scarica la pagina nella finestra corrente.
_parent scarica la pagina in una cornice superiore a quella in cui si trova l'hyperlink.
_top cancella tutte le cornici, e scarica in una finestra intera del browser.

In aggiunta a questo, si pu anche inserire il nome di una finestra "frame" se la pagina all'interno
di un "frameset".

SENZA SOTTOLINEATURA

Per default, i link di testo vengono sottolineati dal browser. Se la tua pagina viene visitata da MSIE
(3 o pi recente), puoi disattivare la sottolineatura per un'intera pagina aggiungendo un tag style
nella sezione head del documento.

Guarda questo esempio:

<html>
22

<head>
<title>Questa la mia pagina</title>
<style type="text/css">

</style>
</head>

<body>
Benvenuto nel mio mondo!<br>
<a href="http://www.yahoo.com>Questo link per yahoo non sottolineato</a>
</body>

</html>

Nota:
L'attributo style non genera errori nei browser che non lo supportano. Il browser semplicemente ignorer l'effetto - il
link apparir sottolineato - ma non verr segnalato alcun errore.

LINK DI TESTO AVANZATI

Invece di eliminare la sottolineatura di tutti i link, potresti invece precisare meglio il modo in cui
vuoi che i tuoi link funzionino.

Nell'esempio qui sotto la sottolineatura stata disattivata per tutti i link.

L' A:hover dice al browser che quando il mouse sopra un link, apparir la sottolineatura.
L'opzione hover funziona solo su MSIE 4+, ma non causa alcun errore su Netscape se viene inclusa
- l'effetto semplicemente non apparir.

<html>

<head>
<title>Questa la mia pagina</title>
<style type="text/css">

</style>

</head>

<body>
Benvenuto nel mio mondo!<br>
<a href="http://www.yahoo.com>Questo link per yahoo non sotttolineato </a>
</body>

</html>

23
I metodi descritti qui sopra disattiveranno l'effetto di sottolineatura per i link dell'intera pagina.

Se vuoi disattivare l'effetto solo per un singolo link, aggiungi una propriet style al tag <a
href>:

<a href="http://www.yahoo.com" style="text-decoration: none">Vai su Yahoo</a>

NOTA :
Il metodo descritto qui sopra funziona solo su MSIE3, Netscape 4 o su browser pi recenti.

Si possono anche combinare diversi attributi "style", invece di togliere la sottolineatura e basta.
Perch ad esempio non definire anche i colori per i link visitati?

Questo esempio ti mostra come fare:

<html>

<head>
<title>Questa la mia pagina</title>

<STYLE TYPE="text/css"></STYLE>

</head>

<body>
Benvenuto nel mio mondo!<br>
<a href="http://www.yahoo.com CLASS=set1> Yahoo </a>
<a href="http://www.hotbot.com CLASS=set2> Hotbot </a>
</body>

</html>

LINK DI IMMAGINE

Se vuoi che un'immagine funzioni come un link, il metodo lo stesso che si usa per i testi.

Devi soltanto sistemare i tag <a href> e </a> su ogni lato dell'immagine.

Qui sotto vedrai il codice HTML usato per far s che un'immagine si comporti come un link per una
pagina chiamata myfile.htm:

<a href="myfile.htm"><img src="rainbow.gif"></a>

Se non hai inserito un'attributo border ("bordo") vedrai un piccolo bordo intorno all'immagine dopo
che stata trasformata in link. Per eliminare questo bordo, aggiungi semplicemente border="0"
al tag <img>:
24

<a href="myfile.htm"><img src="rainbow.gif" border="0"></a>

Le immagini che si comportano come link possono mostrare un testo che appare quando il mouse
scorre su di esse. Questo si ottiene con la propriet alt nel tag <img>.

Per esempio:

<a href="myfile.htm"><img src="rainbow.gif" border="0" alt="Link per questa
pagina"></a>

MAPPATURA DELL'IMMAGINE

E' possibile fare s che un'immagine serva da link per diverse pagine, a seconda del punto in cui
l'immagine viene cliccata. Questa tecnica chiamata imagemapping ("mappatura dell'immagine").

Devi solamente specificare i collegamenti tra le aree dell'immagine e le mete del link.

Nell'esempio qui sotto, se posizioni il mouse sull'angolo in alto a sinistra ti colleghi con yahoo... e
se vai sull'angolo in basso a destra... vai su hotbot.

<img src="rainbow.gif" usemap = #example border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com">
</map>

Nell'esempio abbiamo usato soltanto mappature rettangolari. Le forme possibili sono:

<area shape=rect coords= x1,y1, x2,y2 Href="http://www.domain.com">
<area shape=circle coords= x1,y1, x2,y2 Href="http://www.domain.com">
<area shape=polygon coords= x1,y1, x2,y2, .., xn,yn
Href="http://www.domain.com">

Esistono degli strumenti eccellenti che possono aiutarti a creare mappature di immagini. Nessuno
calcola le coordinate a mano; se per il tuo sito vuoi adoperare le immagini in questa maniera, avrai
bisogno di un programma che ti permetta semplicemente di far scorrere il mouse sulle aree che vuoi
far funzionare come link. La maggior parte dei programmi per l'uso di HTML ha questa funzione
gi inserita.

LINK ALL'INTERNO DI UNA PAGINA

Creare dei link per le ancore ("anchors") molto simile a creare link nomali. Normalmente i link
puntano sull'inizio di una pagina. Le ancore puntano invece su una zona all'interno di una pagina.

Il simbolo # davanti alla locazione di un link specifica che il link punta sull'ancora di una pagina.
(Per ancora si intende un luogo specifico al centro della pagina).

Per fare un link ad un'ancora devi:
25

Creare un link che punti sull'ancora
Creare l'ancora vera e propria.

L'ancora viene creata usando il tag <a>.
Se vuoi creare un'ancora chiamata capitolo4, devi soltanto inserire questa riga nel punto in cui vuoi
mettere l'ancora:

<a name="capitolo4"></a>

Dopo aver fatto questo, puoi creare un link puntato sull'ancora usando normalmente il tag <a
href>, in questa maniera:

Clicca <a href="#capitolo4">qui</a> per leggere il capitolo 4.

Nota:
Ricordati di mettere il simbolo # davanti all'ancora.

Quando crei un link per un'ancora sulla stessa pagina, inserisci semplicemente:

<a href="#YourAnchor">blabla</a>

Quando crei un link per ancore di pagine esterne, usa questa sintassi:

<a href="http://www.yahoo.com#YahoosAnchor">blabla</a>

Le ancore sono usate in genere quando si hanno pagine con una mole considerevole di testo. Il
modo tipico di procedere creare in cima alla pagina un indice funzionante come link per le ancore
che sono state sistemate in determinati punti nel testo che segue.

I LINK NEL FRAMESET

Se un documento in HTML non basato su frame contiene un hyperlink che rimanda a una pagina
chiamata analisi.htm, ecco come va formulato:

Clicca qui per vedere l' <a href="analysis.htm">Analisi</a> del progetto.

Se invece lo stesso link fosse in un frameset (per esempio nel frame window chiamato menu) e
volessimo puntarlo su una pagina che caricata sull'altro frame window, (chiamato main), ecco
come sarebbe il codice HTML:

Clicca qui per vedere l' <a href="analisi.htm" target="main">Analisi</a> del
progetto

Abbiamo semplicemente aggiunto il frame window desiderato (main), designandolo come meta del
link. Il link si aprir nel frame window main invece che nel frame window menu dove situato il
link stesso.

26
LINK A UNA NUOVA FINESTRA

Se vuoi che il tuo link apra una pagina in una nuova finestra usa il target _blank nel tag <a
href>. Puntando il link su _blank si apre una nuova finestra del browser che caricher la pagina
del link.

Per collegarti con Yahoo nella maniera tradizionale, adopera questo link:

<a href="http://www.yahoo.com">Vai Su Yahoo</a>

Se si aggiunge un target="_blank", la pagina si aprir in una nuova finestra:

<a href="http://www.yahoo.com" target="_blank">Vai Su Yahoo</a>

Se vuoi personalizzare la nuova finestra dandole altre dimensioni, oppure corredandola di bottoni,
men, ecc., devi servirti di javascript.

27
Sfondi HTML :

INTRODUZIONE

Se stai decidendo se usare un colore unico o un'immagine, tieni comunque presente che, tra i 100
siti pi visitati nella rete, pochissimi usano immagini come sfondo. Pi del 90 per cento hanno uno
sfondo bianco. Le poche pagine che usano immagini come sfondo, adoperano immagini molto
discrete e rapidamente scaricabili.

Quando scegli il colore - sia un colore pieno o un'immagine - devi anche pensare che alcuni colori
sono efficaci accanto a quasi tutti gli altri colori, mentre ce ne sono altri che permettono un numero
limitato di contrasti.

Se adoperi il verde su uno sfondo rosso, avrai un risultato diverso da quello che otterresti abbinando
lo stesso verde a uno sfondo blu. Senza addentrarci nella teoria del colore, ti facciamo
semplicemente notare che il bianco, il grigio e il nero tendono a bilanciarsi con gli altri colori. In
breve, questi tre colori sono efficaci accanto a tutti i colori dell'arcobaleno. Questo
verosimilmente il motivo per cui bianco, grigio e nero sono i colori che nella rete vengono usati pi
comunemente per lo sfondo.

Se stai progettando un sito per una compagnia che ha un particolare colore che viene usato in altre
forme grafiche, una grande tentazione utilizzare proprio quel colore per lo sfondo della pagina
web. Questa potrebbe essere una buona idea, ma esistono anche altri modi di enfatizzare un colore.

Se, per esempio, vedi una grande parete bianca dove dipinto un punto rosso brillante, quale colore
ti colpisce di pi? I 50 metri quadri di bianco o i 15 centimetri di rosso?

La conclusione che l'uso limitato dei colori rende la loro apparenza pi efficace.

Oltretutto, limitando l'uso dei colori, questi possono essere usati anche per facilitare la navigazione
nella pagina. Se gli elementi secondari di navigazione vengono caratterizzati da colori pi discreti,
mentre quelli pi importanti sono colorati pi vivacemente - l'utente, usando l'intuito, potr
muoversi pi agevolmente.

Sia che tu voglia adoperare un'immagine o un colore come sfondo, devi ricordarti di specificarlo nel
tag <body>.

COLORE DELLO SFONDO

Aggiungere uno sfondo colorato alla tua pagina facile: devi soltanto specificare la propriet
"bgcolor" al tag "body".

<body bgcolor="#FF0000">

Come vedi, il colore dello sfondo (#FF0000) inserito come valore esadecimale (hex color). Puoi
cliccare qui se vuoi saperne di pi sul sistema esadecimale usato nelle pagine HTML.

28
Anche se bianco e nero sono i colori pi adoperati sulla rete, sta cominciando a imporsi l'abitudine
di usare leggere variazioni di queste due tinte.

Il motivo che il forte contrasto tra bianco (o nero) allo stato puro e il colore del testo rende a volte
poco piacevole la lettura rispetto all'impatto pi "morbido" che si ottiene usando sfumature di
bianco o nero.

Un'altra tecnica molto in voga per dare allo sfondo un aspetto "effetto carta" quella di usare
un'immagine come sfondo.

IMMAGINE SULLO SFONDO

Se invece di un colore singolo vuoi aggiungere un'immagine allo sfondo, ci sono alcune
considerazioni preliminari che dovresti fare:

Lo sfondo abbastanza discreto da non distrarre l'attenzione dalle scritte?
L'immagine dello sfondo si armonizza con i colori del testo e con quelli dei link?
L'immagine dello sfondo si armonizza con le altre immagini che voglio mettere sulla
pagina?
Quanto tempo impiega la pagina a scaricare l'immagine dello sfondo?
E' troppo grande?
L'immagine dello sfondo, dopo essere stata copiata, riesce a riempire l'intera pagina? Con
schermi di ogni risoluzione?

Dopo aver risposto a queste domande, se pensi ancora di volere un'immagine come sfondo dovrai
specificare nel tag <body> quale immagine dovr essere usata per lo sfondo.

<body background="drkrainbow.gif">

Nota:
Se l'immagine che usi pi piccola dello schermo, quasta verr replicata fino a riempire l'intero schermo.

Se ad esempio vuoi uno sfondo a righe, non hai bisogno di creare un'immagine di grandi
dimensioni. In pratica ti basta fare un'immagine alta due pixel e larga un pixel. Quando questa viene
inserita nella pagina i due punti verranno copiati fino a riempire l'intera pagina - creando cos
un'immagine di righe a tutto schermo.

Quando decidi di usare un'immagine come sfondo, sempre consigliabile specificare anche un
colore di sfondo.

<body background="drkrainbow.gif" bgcolor="#333333">

Il motivo che, intanto che l'immagine viene scaricata, sullo sfondo apparir il colore che hai
scelto. Se c' troppa differenza tra il colore dello sfondo e l'immagine-sfondo, quando il browser
passer dal colore all'immagine si avr un effetto fastidioso, perci una buona idea specificare un
colore per lo sfondo che si armonizzi il pi possibile con i colori dell'immagine prescelta.

Forse hai notato che le immagini dello sfondo scorrono insieme alla pagina quando usi la barra di
scorrimento (scroll bar).
29
IMMAGINE FISSA

L'immagine dello sfondo scorrer quando l'utente far scorrere in basso la pagina, a meno che tu
non l'abbia definita come immagine fissa:

<body background="drkrainbow.gif" bgproperties="fixed">

Aggiungendo il bgproperties="fixed" costringerai il browser a lasciare lo sfondo fisso
anche quando l'utente far scorrere la pagina.

Nota: Gli sfondi fissi sono solo supportati da MSIE e non funzionano nei browser Netscape - in questi, scorrono come
sfondi normali.

Come abbiamo gi detto in questa sezione, l'uso limitato dei colori risulta assai efficace, grazie al
contrasto tra i pochi colori scelti. Lo strumento pi importante per assegnare colori a specifiche aree
della pagina invece che all'intero sfondo si chiama "tables".
30
Tabelle HTML

INTRODUZIONE

Le tabelle (tables) vengono adoperate nei siti per due ragioni principali:

La prima, pi ovvia, quella di sistemare le informazioni in una tabella.
La seconda quella di creare il layout della pagina servendosi di tabelle nascoste.

L'uso delle tabelle per dividere la pagina in diverse sezioni uno strumento estremamente efficace.
Quasi tutti i siti pi grandi sulla rete si servono di tabelle nascoste per strutturare le pagine. Gli
aspetti pi importanti della progettazione di una pagina che si possono trattare con l'uso di tabelle
sono:

La divisione della pagina in sezioni separate. Una tabella invisibile una risorsa eccellente
per questo scopo.
La creazione di men. In genere con un colore per la voce principale e un altro per i link che
seguono nelle righe successive.
L'inserimento di form field interattivi. Generalmente un'area grigia contenente un'opzione di
ricerca.
La creazione di titoli di pagina rapidamente scaricabili. Una tabella colorata con un testo
viene scaricata in un batter d'occhio rispetto ad un banner anche semplicissimo.
L'allineamento di immagini che sono state tagliate in parti pi piccole.
La disposizione del testo in due o pi colonne sistemate una accanto all'altra.

L'importanza delle tabelle nella progettazione non deve essere tuttavia sopravvalutata. Ci sono
alcune cose da tenere presenti quando si decide di farne uso.

La pi importante che il contenuto della tabella viene mostrato solo quando l'intera tabella
scaricata. Se hai pagine molto lunghe, ti consigliamo di dividerle in pi tabelle - in modo che
l'utente possa leggerne l'inizio, mentre il resto della pagina viene scaricato.

TAG FONDAMENTALI

Le tabelle sono definite con il tag <table>.

Per inserire una tabella sulla tua pagina devi semplicemente aggiungere questi tag nel punto in cui
vuoi metterla.

<table>
</table>

La tabella qui sopra non pu funzionare, perch non ha n righe n colonne.

RIGHE:

31
Per inserire le righe nella tua tabella, adopera i tag <tr> e </tr>.
Esempio:

<table>
<tr>Questa la prima riga.</tr>
<tr>Questa la seconda riga.</tr>
</table>

Risultato:

Questa la prima riga.
Questa la seconda riga.

COLONNE:

Puoi dividere le righe in colonne con i tag <td> e </td>:

Esempio:

<table>
<tr> <td>Prima riga, sinistra.</td> <td>Prima riga, destra.</td> </tr>
<tr> <td>Seconda riga, sinistra.</td> <td>Seconda riga, destra.</td> </tr>
</table>

Risultato:

Prima riga, sinistra. Prima riga, destra.
Seconda riga, sinistra. Seconda riga, destra.

Questa sezione ti ha mostrato i punti essenziali delle tabelle. Devi sapere che esistono diverse
opzioni per personalizzare le tue tabelle.
Le prossime pagine sono dedicate ai diversi attributi per i tag <table>, <tr> e <td>.

TAG PER LE TABELLE

Le seguenti propriet possono essere aggiunte al tag <table>:

Propriet Descrizione
align=
left
center
right

Tabella allineata a sinistra
Tabella al centro
Tabella allineata a destra
background=filename immagine inserita dietro alla tabella
bgcolor=#rrggbb colore dello sfondo
32
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.
frame=
void,
above,
below,
lhs,
rhs,
hsides,
vsides,
box

elimina tutti i bordi esterni
mostra il bordo solo in alto
mostra il bordo solo in basso
mostra il bordo solo sul lato sinistro
mostra il bordo solo sul lato destro
mostra il bordo solo sui lati orizzontali
mostra il bordo solo sui lati verticali
mostra il bordo su tutti i lati
valign=
top
bottom

allinea il contenuto con il lato superiore
della cella
allinea il contenuto con il lato inferiore
della cella
width=
n,n
n,n%

ampiezza minima della tabella in pixel
ampiezza minima in percentuale rispetto
alla misura della finestra

Nota:
Le propriet della tabella si intendono per l'intera tabella.
Se determinate propriet sono destinate alle singole celle, avranno priorit rispetto agli attributi fissati per l'intera
pagina.

I TAG ROW/CELL

Questi attributi si possono aggiungere ai tag <tr> e <td>.

PROPRIETA' DESCRIZIONE
align=
left
right
center

allinea il contenuto a sinistra nelle celle
allinea il contenuto a destra nelle celle
allinea il contenuto al centro delle celle
background=filename definisce un'immagine di sfondo per le celle
bgcolor=#rrggbb definisce un colore di sfondo per le celle
bordercolor=#rrggbb definisce il colore del bordo delle celle
33
bordercolordark=#rrggbb definisce il colore per l'ombra del bordo delle celle
valign=
top
middle
bottom

allinea al lato superiore delle celle
allinea al centro delle celle
allinea al lato inferiore delle celle
width=
n
n%

specifica l'ampiezza minima delle celle in pixel
specifica l'ampiezza minima delle celle in
percentuale rispetto all'ampiezza della tabella
height=
n
n%

altezza minima delle celle in pixel
altezza minima delle celle in percentuale rispetto
all'altezza della tabella

Questi attributi sono validi soltanto per i tag <td>.

PROPRIETA' DESCRIZIONE
colspan=n numero delle colonne nella cella
nowrap
impedisce l'interruzione di riga, anche se il contenuto della cella
pi grande della finestra del browser.
rowspan=n numero delle righe nella cella

Nota:
Gli attributi per le colonne (tag <td>) hanno priorit rispetto a quelli per le righe (tag <tr>).

Gli attributi per le celle (tag <tr> o <td>) hanno priorit rispetto agli attributi per l'intera tabella (tag <table>).
34
Frames HTML

INTRODUZIONE

I frame ("cornici") possono dividere lo schermo in finestre separate.

Ognuna di queste finestre pu contenere un documento in HTML. Un file che specifica il modo in
cui lo schermo diviso si chiama frameset. Se vuoi creare una pagina con dei frame, ecco cosa devi
fare:

creare un documento HTML con il frameset
creare i normali documenti HTML che dovranno essere contenuti in ognuno di questi frame.

Quando una pagina frameset viene scaricata, il browser automaticamente scarica ognuna delle
pagine associate ai frame.

ESEMPIO BASE

Un frameset in poche parole un documento HTML che dice al browser come dividere lo schermo
in finestre separate.

Ecco l'HTML per il frameset qui sopra:

<html>

<head>
<title>La Mia Pagina Frame</title>
</head>

35
<frameset cols="120,*">
<frame src="menupage.htm" name="menu">
<frameset rows="*,50">
<frame src="welcomepage.htm" name="main">
<frame src="bottombanner.htm" name="bottom">
</frameset>
</frameset>

</html>

Hai notato? Il frameset di sole sette righe. Dividiamolo e osserviamo le righe una ad una...

LA CREAZIONE DI UN FRAMESET

Come abbiamo detto nella pagina precedente, un frameset semplicemente un documento HTML
che indica al browser come dividere lo schermo in finestre separate.

Se il frameset fosse cos:

Il suo codice sarebbe:

<frameset cols="120,*">
</frameset>

Lo schermo diviso in due colonne.
Quella a sinistra di 120 pixel e quella di destra occupa il resto dello schermo (indicato con *).
Se le finestre non avessero un nome, sarebbe impossibile usare il frameset.
Andiamo avanti e impariamo ad aggiungere nomi e pagine default alle finestre frame.

PAGINE DI DEFAULT

Puoi aggiungere pagine default alle finestre frame con l'attributo src. Le pagine default sono le
pagine che verranno scaricate quando il frameset verr aperto per la prima volta.

Possiamo ulteriormente aggiungere nomi ad ognuna delle finestre frame adoperando l'attributo
name . Questo ci permetter di creare un link in una finestra frame, aprire una pagina in un'altra
finestra frame.
In questo esempio abbiamo aggiunto nomi e pagine default alle finestre frame:

<frameset cols="120,*" >
<frame src="menu.htm" name="menu" >
36
<frame src="frontf.htm" name="principale" >
</frameset>

Ecco come apparir l'intero frameset:

m
e
n
u

principale

Abbiamo ancora diviso lo schermo in due colonne, quella di sinistra misura 120 pixel, mentre
quella di destra occupa il resto dello schermo. (Alcuni schermi misurano in larghezza 640 pixel,
altri 800 e alcuni fino a 1024, ecco perch c' bisogno del *).

Ma stavolta abbiamo anche detto al browser che la finestra frame di sinistra deve contenere una
pagina HTML chiamata menu.htm e che la colonna a destra deve contenere un documento HTML
chiamato frontf.htm.

In pi abbiamo assegnato i nomi "menu" e "principale" alle due finestre frame, cos adesso siamo
anche in grado di creare link per finestre specifiche.

Abbiamo chiamato i frame menu e principale, ma sarebbe stato possibile dargli qualsiasi altro
nome.

Il tipo di impaginazione con una finestra di men a sinistra e una finestra principale a destra il
frameset pi comune che si pu incontrare sulla rete.

Ci sono alcuni altri attributi che potremmo aggiungere al frameset, per esempio potresti voler
rendere invisibili i bordi della cornice.

BORDI

Per rendere invisibili i bordi devi semplicemente aggiungere i parametri "cols-line" al frameset :

<frameset cols="120,*" frameborder="0" border="0" framespacing="0">
<frame src="menu.htm" name="menu" >
<frame src="frontf.htm" name="principale" >
</frameset>

Ora l'intero frameset apparir cos:

m
e
n
u

principale

37

FINESTRE RIDIMENSIONABILI

Se vuoi che la grandezza delle finestre non sia modificabile, devi soltanto aggiungere il parametro
noresize al frame:

<frameset cols="120,*" frameborder="0" border="0" framespacing="0">
<frame src="menu.htm" name="menu" noresize>
<frame src="frontf.htm" name="principale" noresize>
</frameset>

BARRE DI SCORRIMENTO

Poniamo che tu non voglia la scroll bar (la barra - cursore di scorrimento pagina) nella finestra del
menu.

Inoltre la finestra principale dovrebbe avere la barra di scorrimento solo quando ci fosse necessario
(se il documento HTML non entrasse tutto nella finestra), ma se non ce ne fosse bisogno - non
dovrebbero esserci barre di scorrimento. Il codice sarebbe questo:

<frameset cols="120,*" frameborder="0" border="0" framespacing="0">
<frame src="menu.htm" name="menu" noresize scrolling=no>
<frame src="frontf.htm" name="principale" noresize scrolling=auto>
</frameset>

Tralasciando di specificare l'attributo per lo scorrimento della pagina, la barra apparir soltanto in
caso di necessit.

LINKS ALL'INTERNO

Se hai un documento HTML con un link sul testo "Analisi" per esempio, che porta a una pagina
chiamata "analisi.htm", questo apparir nel documento come:

Vai all' <a href="analisi.htm">Analysis</a> del progetto

Ora, se il link fosse nella finestra del menu del nostro esempio, e volessimo che questo caricasse
una pagina nella finestra principale, il codice HTML sarebbe:

Vai all' <a href="analisi.htm" target="principale">Analisi</a> del progetto

Abbiamo semplicemente aggiunto il parametro target="principale" al tag <a href>.

Ora il link si aprir sulla finestra frame principale invece che su quella del men, dove si trova il
link stesso.

Quattro nomi di target sono riservati, e il browser li interpreter in questo modo:

38
_blank scarica la pagina in una nuova finestra browser
_self scarica la pagina nella finestra corrente.
_parent scarica la pagina nel frame superiore a quello in cui si trova l'hyperlink .
_top cancella tutti i frames, scarica la finestra browser al completo.

E' possibile perfezionare il controllo dei tuoi frameset con javascript. Per esempio, javascript pu
impedire alle pagine progettate per funzionare solo all'interno di frameset, di venire scaricate fuori
dal frameset.

ESEMPI

In questa pagina puoi vedere alcuni esempi di diversi frameset:

top
bottom

<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frame src="bottom.htm" name="bottom">
</frameset>

Tl tr
bottom

<frameset rows="16%,84%">
<frameset cols="50%,50%">
<frame src="tl.htm" name="tl">
<frame src="tr.htm" name="tr">
</frameset>
<frame src="bottom.htm" name="bottom">
</frameset>

top

left

right

<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frameset cols="50%,50%">
<frame src="left.htm" name="left">
<frame src="right.htm" name="right">
</frameset>
</frameset>

topleft topright
39

botleft

botright

<frameset rows="50%,50%" cols="50%,50%">
<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset>

topleft topright

botleft
brtl brtr
botrbot

<frameset rows="50%,50%" cols="50%,50%">
<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="brtl.htm" name="brtl">
<frame src="brtr.htm" name="brtr">
</frameset>
<frame src="botrbot.htm" name="botrbot">
</frameset>
</frameset>

topleft topright

botleft

botright

<frameset rows="240,240" cols="320,320">
<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset>

topleft topright

botleft

botright

<frameset rows="50%,*" cols="320,*">
<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset>
40
Forms HTML :

INTRODUZIONE

Un form ("scheda") semplicemente un'area che pu contenere "form fields". I form field sono
oggetti che permettono al visitatore di accedere a informazioni - per esempio box di testo, menu a
discesa o tasti radio.

Quando il visitatore clicca su un tasto di accesso, il contenuto della scheda viene normalmente
mandato a un programma che gira sul server. Comunque, possono esservi delle eccezioni.

Javascript qualche volta viene adoperato per fare vere e proprie magie con i form field. Per esempio
si possono trasformare le opzioni di un men a discesa in link normali.

ESEMPI

Un tipico esempio di form potrebbe essere un motore di ricerca.

SEARCH!

SEARCH THIS SITE

Inviando questo form, ecco cosa succede:

Le parole di ricerca vengono mandate a un programma sul server.
Il programma cerca un database per i riscontri.
Il programma crea una pagina web con i risultati.
La pagina web con i risultati viene rimandata al visitatore.

Un altro esempio potrebbe essere una pagina di logon.

WEB-EMAIL GRATIS SU
KADATH.COM

Username:

Password:

Log In

NUOVI UTENTI: ISCRIVETEVI QUI!

HAI DIMENTICATO LA TUA PASSWORD?
41

Inviando questo form, ecco cosa succede:

L'identificazione e la password vengono mandate ad un programma sul server.
Il programma cerca un database per le entrate valide.
Se l'entrata valida il visitatore viene mandato alla pagina protetta.
Se l'entrata non valida il visitatore viene mandato a una pagina di "non validit".

In entrambi i casi, i contenuti dei "form field" vengono inviati a programmi che girano sul server.

PROGRAMMI CGI

In presenza di un form, necessario avere un programma in grado di riceverne le informazioni e di
adoperarle. I programmi di questo tipo sono detti anche programmi CGI.

CGI significa Common Gateway Interface; questa sigla sta ad indicare un programma che traduce
informazioni.

Questa traduzione fondamentale, perch il server potrebbe essere una macchina Unix mentre il
visitatore potrebbe mandare informazioni da una piattaforma Windows. Windows e Unix trattano le
informazioni in maniera diversa - quindi, senza CGI, le macchine Unix potrebbero comunicare solo
con altre macchine Unix ecc. e tutto questo sarebbe assai lontano dall'idea originaria di world wide
web.

A questo punto potresti pensare "Beh, non posso girare programmi sul mio server, quindi tutto
questo non fa per me", per fortuna ti stai sbagliando: ci sono dozzine di servizi gratis sulla rete che
ti offrono CGI gratuitamente per quasi tutti gli usi possibili.

IL TAG FORM

Quando viene lanciato un form, tutti i suoi campi vengono inviati.

Il tag <form> indica al browser l'inizio e la fine del form. Puoi aggiungere tutti i tipi di tag HTML
tra i tag <form> e </form>.

Questo significa che un form pu agevolmente includere una tavola o un'immagine insieme ai form
field indicati nella prossima pagina.

Guarda questo esempio:

<html>
<head>
<title>La mia pagina</title>
</head>

<body>

<form>
42

</form>

</body>
</html>

Nota:
Diversamente da una tavola, i form non sono visibili sulla pagina.

Il form nel nostro esempio inutile :

Innanzitutto non contiene form field. E' paragonabile ad un semplice foglio di carta bianco.
In secondo luogo, non contiene un ricevente per il form.

Per fare s che il browser sappia dove inviare il contenuto, dobbiamo aggiungere questi attributi al
tag <form>:

action=address
method=post oppure method=get

L' address l'url del programma cgi a cui il contenuto deve essere inviato.
I metodi post e get sono semplicemente due metodi differenti di mandare dati al programma.

Se stai adoperando un programma pre - programmato (come stiamo presumendo qui) non
importante capire la differenza tra get e post.

Nella descrizione del programma che stai usando indicato in maniera chiara quale dei due metodi
si debba usare per inviare i programmi.

Qui sotto puoi vedere un esempio di un tipico form tag, con azione e metodo specificati.

<html>
<head>
<title>La mia pagina</title>
</head>

<body>

<form method="post" action="http://www.kadath.com/cgi-bin/formmail.cgi">

</form>

</body>
</html>

Adesso non resta che dare possibilit al visitatore di inserire alcune informazioni.

FIELD TESTO

I field di testo (text fields) sono aree di una riga sola che permettono all'utente di inserire testo.

43
Se hai bisogno di pi righe, devi usare un text area.
ATTRIBUTI:

Ecco una lista di attributi validi per i text field:

HTML SPIEGAZIONE ESEMPIO
text
size=
maxlength=
name=
value=
align=
tabindex=
Text field di una riga
Caratteri mostrati.
Numero massimo di
caratteri.
Nome del field.
Valore iniziale nel field
Allineamento del field.
Tab order del field.

L'opzione size definisce la larghezza del field. Da ci deriva la quantit dei caratteri visibili che il
field riesce a contenere.

L'opzione maxlength definisce la lunghezza massima del field. Da ci deriva la quantit di
caratteri che possono entrare nel field. Se non viene specificata una lunghezza massima, il visitatore
pu facilmente inserire pi caratteri di quanti se ne possano visualizzare nel campo.

L'attributo name aggiunge un nome interno al field, cos il programma che decifra il form pu
identificare i field.

L'attributo value definisce cosa apparir nel box come valore di default.

L'attributo align definisce l'allineamento del field.
Entrate valide sono: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM. Gli allineamenti sono spiegati nella sezione immagine.

L'attributo tabindex stabilisce l'ordine in cui i diversi fields devono essere attivati quando il
visitatore clicca sul tasto tab.

UN ESEMPIO:

Guarda questo esempio di HTML:

<html>
<head>
<title>La mia pagina</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Scrivi qui il tuo nome!">
44
<br><br>
</div>
</form>
</body>
</html>

PAROLA D'ORDINE

I field di password ("parola d'ordine") sono simili a quelli di testo.

La differenza che ci che viene inserito in un field di password viene mostrato sotto forma di
puntini sullo schermo. Questo serve, naturalmente, a evitare che altri possano leggere la password
sullo schermo.

ATTRIBUTI:

Qui sotto ecco una lista di attributi validi per i password field:

HTML SPIEGAZIONE ESEMPIO
password
size=
maxlength=
name=
value=
align=
tabindex=
Password field di una riga
Caratteri visibili.
Numero massimo di caratteri.
Nome del field.
Valore iniziale nel field.
Allineamento del field.
Tab order del field.

L'opzione size definisce la larghezza del field. Stabilisce quanti caratteri visibili pu contenere.

L'opzione maxlength definisce la lunghezza massima del field. Da ci deriva la quantit di
caratteri che possono essere inseriti nel field. Se non viene specificata una lunghezza massima, il
visitatore pu facilmente inserire pi caratteri di quanti ne vengano mostrati sullo schermo.

L'opzione name aggiunge un nome interno al field, in modo che il programma che gestisce il form
possa identificare i field.

L'attributo value definisce cosa apparir nella casella come valore di default.

L'attributo align definisce l'allineamento del field.
Le entrate valide sono: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP,
BASELINE, ABSMIDDLE, ABSBOTTOM. Gli allineamenti sono spiegati nella sezione
immagini.

L'attributo tabindex definisce in quale ordine i differenti field dovranno attivarsi quando il
visitatore clicca sul tasto tab.

UN ESEMPIO:

45
Guarda questo esempio di HTML:

<html>
<head>
<title>La mia pagina</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/handler.cgi" method="POST">
<div align="center">
Inserire Password : <input type="password" size="25">
<br><br>
</div>
</form>
</body>
</html>

FIELD NASCOSTO

I field nascosti ("hidden fields") sono simili a field di testo, con una differenza importantissima: il
field nascosto non mostrato sulla pagina. Di conseguenza il visitatore non pu scriverci nulla
sopra; lo scopo di questo tipo di field dunque quello di introdurre informazioni non accessibili al
visitatore.

ATTRIBUTI:

Ecco qui una lista di attributi validi per field nascosti:

HTML SPIEGAZIONE ESEMPIO
hidden
name=
value=
Hidden field
Nome del field.
Valore del field.

L'attributo name aggiunge un nome interno al field, in modo che il programma che decifra il form
possa identificare i fields.

L'attributo value definisce cosa verr mandato al momento dell'invio del form.

UN ESEMPIO:

Guarda questo esempio di HTML:

<html>
<head>
<title>La mia pagina</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/handler.cgi" method="POST">
<div align="center">
<input type="text" size="25" value="Scrivi qui il tuo nome!">
<input type="hidden" name="Language" value="Italian">
<br><br>
46
</div>
</form>
</body>
</html>

Il field nascosto non si vede, ma quando il form viene inviato, il field nascosto viene mandato
insieme ad esso. In questo esempio il field nascosto indica al programma che decifra il form, che
sarebbe preferibile che la lingua adoperata dall'utente fosse l'italiano.

AREA DI TESTO

Le textarea (aree di testo) sono field di testo che possono occupare diverse righe. Diversamente
dalla maggior parte dei form field, le aree di testo non sono definite con un tag <input>.

Devi invece inserire un tag <textarea> nel punto in cui vuoi iniziare un'area di testo, e chiudere
con un tag </textarea> nel punto in cui vuoi che l'area finisca.

Tutte le cose scritte tra questi tag saranno inserite nel box "text area".

ATTRIBUTI:

Ecco una lista di attributi validi per le aree di testo:

HTML SPIEGAZIONE ESEMPIO
textarea
rows=
cols=
name=
tabindex=

wrap=
off
virtual

physical
Area di testo - alcune righe
Righe nel field.
Colonne nel field.
Nome del field.
Ordine tab del field.

Ignora gli "a capo"
Mostra gli "a capo", ma
manda il testo come viene inserito.
Inserisce gli " a capo" quando
necessario e li trasmette.

Gli attributi cols e rows sono diretti e semplici. Specificano il numero di colonne e righe che si
vogliono inserire nell'area di testo.

L'attributo name aggiunge un nome interno al field, in modo che il programma che decifra il form
sia in grado di identificare i field.

L'attributo tabindex definisce l'ordine di attivazione dei diversi field nel momento in cui il
visitatore cliccher sul tasto tab.

Le opzioni wrap sono la parte pi complicata delle aree di testo:
Se scegli di mettere il wrap in posizione off il testo viene considerato come una lunga sequenza di
testo senza gli "a capo".
47
Dando al wrap la qualit di virtual il testo appare sulla pagina come se riconoscesse le interruzioni
degli "a capo", ma quando il form viene inviato, le interruzioni non vengono attivate.
Dando al wrap la qualit di physical il testo viene mandato esattamente come appare sullo
schermo, compresi gli "a capo".

UN ESEMPIO:

Guarda questo esempio HTML:
<html>
<head>
<title>La mia Pagina</title>
</head>

<body>
<form name="myform" action="http://www.mydomain.com/handler.cgi" method="POST">
<div align="center">
Questo fuori dall'area<br><br>
<textarea cols="40" rows="5" name="myname">
Ora siamo dentro l'area - che bello!.
</textarea>
<br><br>
E ora siamo di nuovo fuori dall'area.
</div>
</form>
</body>
</html>

CHECKBOX
Le caselle di scelta ("check boxes") si adoperano quando si vuole dare al visitatore la possibilit di
selezionare una o pi opzioni da una serie di alternative. Se si vuole permettere una sola opzione,
bisogna allora usare i bottoni radio.

ATTRIBUTI:

Ecco una lista di attributi validi per i check box:

HTML SPIEGAZIONE
ESEMPIO Scegli una o pi
opzioni
checkbox
name=
value=
align=
tabindex=
checked
Scegli una o pi opzioni
Nome del field.
Valore inviato se
selezionato.
Allineamento del field.
Ordine tab del field.
Selezione default per questo
field.

L'attributo name aggiunge un nome interno al field, in modo che il programma che decifra il form
sia in grado di identificare i field.

L'attributo value definisce cosa sar inviato al momento della selezione.

48
L'attributo align definisce l'allineamento del field.
Le entrate valide sono: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP,
BASELINE, ABSMIDDLE, ABSBOTTOM.
Gli allineamenti sono trattati nella sezione dedicata all'immagine.

L'attributo tabindex definisce l'ordine in cui i diversi field si attiveranno quando il visitatore
cliccher sul tasto tab.
UN ESEMPIO:

Guarda questo esempio HTML:

<html>
<head>
<title>La mia Pagina</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/handler.cgi" method="POST">
<div align="center"><br>
<input type="checkbox" name="option1" value="Latte"> Latte<br>
<input type="checkbox" name="option2" value="Burro" checked> Burro<br>
<input type="checkbox" name="option3" value="Formaggio"> Formaggio<br>
<br>
</div>
</form>
</body>
</html>

RADIO BUTTONS

I radio buttons ("bottoni radio") vengono usati quando si vuole che il visitatore selezioni una - e
soltanto una - opzione da una serie di alternative. Se si vogliono permettere pi opzioni
conteemporaneamente, bisogna invece usare i checkbox.

ATTRIBUTI:

Ecco una lista degli attributi validi per i bottoni radio:

HTML SPIEGAZIONE ESEMPIO
radio
name=
value=
align=
tabindex=
checked
Scegli una - e soltanto una - opzione
Nome del gruppo.
Valore inviato se prescelto.
Allineamento del field.
Ordine tab del field.
Controllo default del field.

L'attributo name indica a quale gruppo di bottoni radio appartiene il field. Selezionando un bottone,
tutti gli altri bottoni dello stesso gruppo non possono essere selezionati. Se non si in grado di
definire a quale gruppo appartenga il bottone prescelto, si pu soltanto avere un gruppo di bottoni
radio su ogni pagina.

49
L'attributo value definisce cosa verr inviato al momento della scelta.

L'attributo align definisce il tipo di allineamento del field.
Le entrate valide sono: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP,
BASELINE, ABSMIDDLE, ABSBOTTOM. Gli allineamenti sono trattati nella sezione delle
immagini.

L'attributo tabindex definisca l'ordine in cui i diversi field verranno attivati nel momento in cui il
visitatore cliccher sul tasto tab.

UN ESEMPIO:

Guarda questo esempio HTML:

<html>
<head>
<title>La Mia Pagina</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div align="center"><br>
<input type="radio" name="group1" value="Latte"> Latte<br>
<input type="radio" name="group1" value="Burro" checked> Burro<br>
<input type="radio" name="group1" value="Formaggio"> Formaggio
<hr>
<input type="radio" name="group2" value="Acqua"> Acqua<br>
<input type="radio" name="group2" value="Birra"> Birra<br>
<input type="radio" name="group2" value="Vino" checked> Vino<br>
</div>
</form>
</body>
</html>

MENU' A DISCESA

I drop-down menus ("men a discesa") sono probabilmente gli oggetti pi flessibili che puoi
aggiungere ai tuoi form.

Il men a discesa ha lo stesso scopo dei bottoni radio (una selezione soltanto) o dei "check boxes"
(dove sono permesse selezioni multiple).

Il vantaggio del men a discesa, se confrontato con i bottoni radio e i check box, che occupa meno
spazio. Ma questo allo stesso tempo uno svantaggio, perch non si possono vedere
immediatamente tutte le opzioni.

C' un modo di aggirare il problema - con l'attributo "size", si pu personalizzare il men e rendere
visibile pi di un'opzione alla volta, ma facendo questo si perde il vantaggio di occupare meno
spazio. Insomma, per ogni decisione presa, c' il rovescio della medaglia...

Alcune volte meglio mettere dei men a discesa al posto di field di testo, perch selezionare da un
men pi facile che scrivere. Altre volte ci vivamente consigliabile, ad esempio quando il
50
programma che decifra il form non in grado di interpretare un testo qualsiasi in entrata. Per
esempio, capita spesso di dover scegliere il proprio stato da un men a discesa. Questo perch
scegliere da un men pi facile che scrivere il nome dello stato.

Nello stesso modo, pu capitare spesso che ti venga chiesto di digitare le 2 lettere iniziali del tuo
stato, sempre da un men a discesa. Questo serve ad evitare confusione per il programma che
decifra il form. Se, per esempio, il programma accettasse soltanto le maiuscole, il men a discesa
assicurerebbe la completa validit di tutte le entrate.

Un altro esempio tipico quello di sostituire i link con men a discesa. Questo si pu fare con
javascript.

ATTRIBUTI:

Ecoco una lista di attibuti validi per i men a discesa:

HTML SPIEGAZIONE ESEMPIO
select
name=
size=
multiple=

option
selected
value=
Men a discesa
Nome del field.
Voci visibili nella lista.
Permette scelte multiple se specificato.

Voci individuali nel men.
Seleziona la voce per default.
Valore da inviare se selezionato.

I men a discesa combinano <select> e <option>. Entrambi i tag hanno un tag di apertura e
chiusura.

Un tipico esempio potrebbe essere:

<select>
<option>Latte</option>
<option>Caff</option>
<option>T</option>
</select>

Il tag <select> definisce il men

L'attributo name aggiunge un nome interno al field, in modo che il programma che decifra il form
sia in grado di identificare i field.

L'opzione size stabilisce quante voci sono visibili nello stesso momento. Default una delle voci.

L'attributo multiple, quando presente, permette la scelta multipla.

Il tag <option> definisce le singole voci nel men.

L'attributo value definisce cosa verr inviato se la voce viene selezionata. Questo non sempre la
stessa cosa che compare sul men. Se il nostro field fosse definito in questo modo:
51

<option value="ID">Idaho</option>

nel men comparirebbe "Idaho", ma quando il form viene inviato, soltanto la forma abbreviata "ID"
verrebbe effettivamente mandata.

Puoi stabilire che una voce venga selezionata come default, aggiungendo l'opzione: <option
selected>

UN ESEMPIO:

Guarda questo esempio HTML:

<html>
<head>
<title>La Mia Pagina</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/handler.cgi" method="POST">
<div align="center">
<select name="mydropdown">
<option value="Latte">Latte Fresco</option>
<option value="Formaggio">Formaggio Stagionato</option>
<option value="Pane">Pane Caldo</option>
</select>
</div>
</form>
</body>
</html>

BOTTONE DI INVIO

Quando un visitatore clicca su un tasto d'invio, il form viene mandato all'indirizzo specificato
nell'attributo action del tag <form>. Siccome i visitatori non sempre sono dei perfezionisti,
dovresti considerare l'ipotesi di aggiungere una convalida javascript del contenuto prima che questo
venga effettivamente inviato.

ATTRIBUTI:

Ecco una lista degli attributi validi per i bottoni di invio:

HTML SPIEGAZIONE ESEMPIO
submit
name=
value=
align=
tabindex=
Bottone di invio
Nome del bottone.
Testo scritto sul bottone.
Alineamento del bottone.
Ordine tab del bottone.

L'attributo name aggiunge un nome interno al bottone, in modo che il programma che decifra il
form non confonda il bottone con gli altri field.
52

L'attributo value definisce cosa c' scritto sul bottone.

L'attributo align definisce l'allineamento del bottone.
Le entrate valide sono: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP,
BASELINE, ABSMIDDLE, ABSBOTTOM. Gli allineamenti sono trattati nella sezione sulle
immagini.

L'attributo tabindex definisce l'ordine in cui i differenti fields verranno attivati quando il
visitatore cliccher sul tasto tab.

UN ESEMPIO:

Guarda questo esempio HTML

<html>
<head>
<title>La Mia Pagina</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/handler.cgi" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Inserisci qui il tuo nome!">
<br><input type="submit" value="Mandami il tuo nome!"><br>
</div>
</form>
</body>
</html>

BOTTONE RESET

Quando un visitatore clicca su un bottone di reset, le entrate sono resettate ai valori di default.

ATTRIBUTI:

Ecco una lista degli attributi validi per i bottoni di reset:

HTML SPIEGAZIONE ESEMPIO
reset
name=
value=
align=
tabindex=
Bottone reset
Nome del bottone.
Testo scritto sul bottone.
Allineamento del bottone.
Ordine tab del bottone.

L'attributo name aggiunge un nome interno al bottone, in modo che il programma che decifra il
form non confonda il bottone con gli altri fields.

L'attributo value definisce cosa c' scritto sul bottone.

53
L'attributo align definisce l'allineamento del bottone.
Le entrate valide sono: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP,
BASELINE, ABSMIDDLE, ABSBOTTOM. Gli allineamenti sono trattati nella sezione sulle
immagini.

L'attributo tabindex definisce l'ordine in cui i differenti field verranno attivati quando il
visitatore cliccher sul tasto tab.

UN ESEMPIO:

Guarda questo esempio HTML:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/handler.cgi" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Scrivi qui il tuo nome!">
<br><input type="submit" value="Mandami il tuo nome!"> <input type="reset"
value="Reset!"><br>
</div>
</form>
</body>
</html>

BOTTONE IMMAGINE

I bottoni di immagine hanno lo stesso effetto dei bottoni di invio. Quando un visitatore clicca su un
bottone di immagine il form viene mandato all'indirizzo specificato nell'attributo action del tag
<form>. Siccome i visitatori non sempre sono dei perfezionisti, dovresti considerare l'ipotesi di
aggiungere una convalida javascript del contenuto prima che questo venga effettivamente inviato.

ATTRIBUTI:

Ecco una lista di attributi validi per i bottoni di immagine:

HTML SPIEGAZIONE ESEMPIO
image
name=
src=
align=
border=
width=
height=
vspace=
hspace=
tabindex=
Bottone di invio
Nome dell'immagine.
Url dell'immagine.
Allineamento dell'immagine.
Spessore del bordo intorno all'immagine.
Larghezza dell'immagine.
Altezza dell'immagine.
Spazio sopra e sotto l'immagine.
Spazio a destra e sinistra dell'immagine.
Ordine tab dell'immagine.

54
L'attributo name aggiunge un nome interno al bottone, in modo che il programma che decifra il
form non confonda il bottone con gli altri field.

L'attributo src definisce l'URL dell'immagine.

L'attributo align definisce l'allineamento dell'immagine.
Le entrate valide sono: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP,
BASELINE, ABSMIDDLE, ABSBOTTOM. Gli allineamenti sono trattati nella sezione sulle
immagini.

L'attributo border definisce lo spessore (in pixel) del bordo intorno all'immagine.

L'attributo width definisce la larghezza dell'immagine.

L'attributo height definisce l'altezza dell'immagine.

L'attributo vspace definisce lo spazio sopra e sotto l'immagine.

L'attributo hspace definisce lo spazio a destra e a sinistra dell'immagine (in pixel).

L'attributo tabindex definisce l'ordine in cui i differenti field devono attivarsi quando il visitatore
clicca sul tasto tab.

UN ESEMPIO:

Guarda questo esempio HTML:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/handler.cgi" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Scrivi qui il tuo nome!">
<br><input type="image" src="rainbow.gif" name="image" width="60"
height="60"><br>
</div>
</form>
</body>
</html>

RIFERIMENTO VELOCE

Se non sei pratico di form tag, puoi usare questa tavola riassuntiva per avere uno sguardo d'insieme
sui form tag e sulle loro propriet.

HTML SPIEGAZIONE ESEMPIO
55
textarea
rows=
cols=
name=

wrap=
off
virtual

physical
Text area - diverse righe
Righe nel field.
Colonne nel field.
Nome del field.

Controllo fine riga.
Ignora gli "a capo".
Inserisce gli "a capo", ma
invia il testo come stato inserito.
Inserisce gli "a capo" quando
necessario e li invia.

text
size=
maxlength=
name=
value=
Text field di una riga
Caratteri mostrati.
Max caratteri permessi.
Nome del field.
Valore iniziale nel field.

password
size=
maxlength=
name=
value=
Password field.
Caratteri mostrati.
Caratteri autorizzati a entrare.
Nome del field.
Valore iniziale nel field.

checkbox
name=
value=
Scegli una o pi opzioni
Nome del field.
Valore iniziale nel field.

radio
name=
value=
Scegli una sola opzione
Nome del field.
Valore iniziale nel field.

select
name=
size=
multiple=

option
selected
value=
Men a discesa
Nome del field.
Numero di voci nella lista.
Se s, permette scelte multiple.

Voci individuali nel men.
Creare una voce default.
Valore da inviare se selezionato..

hidden
name=
value=
Non mostra il form.
Nome del field.
Valore da inviare.

reset
name=
value=
Bottone per resettare tutti i field.
Nome del bottone.
Testo mostrato sul bottone.
Reset

submit
name=
value=
Bottone per inviare il form
Nome del bottone.
Testo mostrato sul bottone.
Submit

image
name=
Immagine funzionante come bottone
Nome dell'immagine.

56
Metatags HTML :

INTRODUZIONE

I meta tag sono usati per immagazzinare informazioni solitamente importanti per il browser e i
motori di ricerca, per esempio, alcuni motori di ricerca trovano sui meta tag le informazioni relative
alle descrizioni, le parole chiave, ecc.

Altri esempi invece riguardano il browser. Ci sono tag che dicono al browser di scaricare un url
dopo x secondi, oppure tag che lo avvertono che una certa pagina non deve essere temporaneamente
memorizzata (cached).

Un altro esempio il meta tag RSACi. Questo tag pu impedire che siti con contenuti non adatti ai
bambini vengano visti su browser MSIE.

Infine, alcuni meta tag perseguono scopi riguardanti solamente il sito dove sono inseriti. Un
esempio potrebbe essere il sito di un quotidiano, dove il giornalista invia il testo di un articolo ad un
programma avanzato che lo trasforma in un documento in HTML. Questo programma potrebbe
aggiungere dei meta tag per permettere l'archiviazione degli articoli. Quindi, se ti capiter mai di
incontrare uno strano meta tag che non viene menzionato nei libri, il motivo potrebbe essere che si
tratta di un meta tag "su misura".

MOTORI DI RICERCA

Il mito
Tra i web designer c' il mito che con i meta tag giusti si possono raggiungere risultati eccezionali
su tutti i motori di ricerca. La verit piuttosto il contrario: con i meta tag sbagliati si possono
raggiungere risultati pessimi, ma i meta tag da soli non danno alcun risultato eccezionale.

L'abuso
Due meta tag hanno un'importanza speciale per i motori di ricerca: Description e Keywords.

Quando i motori di ricerca hanno iniziato a cercare questi meta tag, l'intenzione era quella di fare s
che i creatori di siti avessero la possibilit di mettere in risalto il contenuto delle pagine. Per
esempio, una pagina scientifica sulla superficie della luna poteva non contenere la parola "luna",
anche se la pagina era completamente dedicata all'argomento "luna".

Alcune menti creative non ci hanno messo molto a capire che i meta tag potevano rappresentare uno
strumento eccellente per migliorare le classificazioni per la ricerca. Molti webmaster hanno
cominciato ad includere parole chiave e descrizioni che nulla avevano a che fare con il reale
contenuto delle pagine.

La vendetta
Dopo un po', i meta tag non servivano pi allo scopo per cui erano stati creati. Sempre pi spesso
venivano usati per inviare pubblicit indesiderata. Per questo, molti motori di ricerca, come Excite,
hanno smesso del tutto di considerarli.

57
Altri motori di ricerca, come Infoseek, hanno ripagato le pubblicit indesiderate con la stessa
moneta, mettendo in fondo alle classifiche i siti caratterizzati da meta tag che includevano parole
non attinenti al contenuto reale delle pagine.

La conclusione

Usa i meta tag con attenzione.
Non includere parole che non sono presenti nelle tue pagine.
Non ripetere le parole.
Usa i meta tag correttamente, perch i motori di ricerca sanno bene che i meta tag sono un
eccellente filtro per siti di pubblicit indesiderata.

Passiamo ora ai dettagli sui tag.

DESCRPTION

<META name="DESCRIPTION" content="Corso di HTML">

La maggior parte dei motori di ricerca evidenziano la descrizione quando elencano i risultati di una
ricerca. Se non includi questo tag, il motore metter nella lista soltanto la prima parola che appare
sulla tua pagina - e questo pu spesso creare malintesi.

KEYWORDS

<META name="KEYWORDS" content="html, webdesign, javascript">

Questo meta tag stato inventato per essere adoperato per parole chiave attinenti alla pagina.
Ma a causa dell'uso sbagliato che se ne fatto, molti motori lo ignorano. Altri lo usano per capire se
una pagina contiene o meno pubblicit indesiderata. I pochi motori che se ne servono per indicare il
vero contenuto della pagina, non danno ad esso la stessa importanza di un tempo.

ALTRI TAG

Molti programmi per l'uso di HTML creano un meta tag che indica quale programma stato usato
per la pagina.

<META name="GENERATOR" content="Frontpage 3.0">

Un altro tag piuttosto comune indica il nome di chi ha creato la pagina:

<META name="AUTHOR" content="Bill Gates">

Infine ci sono dei meta tag che vengono letti solo da alcuni motori di ricerca.

I singoli motori di ricerca sono in grado di riconoscere i differenti tag che ordinano di andare
indietro, reindicizzare il sito, ecc. In ogni caso, controlla nella sezione "aiuto" dei motori di ricerca
di cui non sei sicuro per verificare quali meta tag siano supportati.

58
PAGINE AUTOCARICANTI

Puoi usare il meta tag "refresh" per scaricare una pagina automaticamente dopo x secondi.

<META http-equiv="REFRESH" content="5; url=http://www.kadath.com">

Nell'esempio, www.kadath.com viene scaricato dopo 5 secondi.

Ecco alcuni esempi su come usare questo tag.

ESEMPIO 1: INDIRIZZARE A NUOVO DOMICILIO

L'uso pi comune che si fa del meta tag REFRESH quello di inviare i visitatori di un sito che ha
cambiato indirizzo al nuovo domicilio. Se qualcuno entra nel tuo sito attraverso il suo vecchio
indirizzo memorizzato sul segnalibro ("bookmarks"), comparir la scritta: Error 404 - File Not
Found.

Per evitare questo, devi inserire una pagina sul vecchio domicilio dicendo qualcosa come: "Questo
sito ha cambiato indirizzo. Per favore attendi qualche istante e sarai portato al nuovo indirizzo.
Ricorda di aggiornare l'indirizzario". Se mantieni per qualche mese questa pagina al vecchio
indirizzo, non perderai i visitatori che avevano gi archiviato il tuo vecchio indirizzo.

ESEMPIO 2: SEQUENZE PER INTRODURRE LA PAGINA

Un altro uso pi divertente del tag REFRESH la creazione di una sequenza carina per introdurre
un sito. Poniamo che tu voglia che la pagina scriva "Benvenuto!", poi dopo 1 secondo, "Preparati!"
e dopo un altro secondo "A un'Esperienza Speciale". Infine, dopo pochi secondi, che la pagina vera
e propria venga scaricata.

Questo si pu ottenere creando 3 pagine contenenti il tag refresh. La prima pagina dopo un secondo
scaricher la seconda, che a sua volta, grazie al tag refresh, scaricher la terza dopo un altro
secondo.

CONTENUTO RSACi

E' possibile impedire al browser di mostrare pagine che non sono state classificate usando il sistema
RSACi. (su MSIE, vai su View, poi su "Internet Options" e infine fai partire il "content advisor").

Internet Explorer 3.0 e oltre, come anche le nuove versioni di Netscape supportano questo servizio.

Informazioni specifiche sul controllo dei contenuti:

<META
http-equiv="PICS-Label"
content='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true comment
"RSACi North America Server" for "http://www.kadath.com" on "1998.09.09T15:45-
0800" r (n 0 s 0 v 0 l 0))'>

59
Per una descrizione completa di questo tag, e per ottenere il codice per la tua pagina ti consigliamo
di visitare il sito www.rsac.org.

Il servizio gratuito e dovrebbe essere usato su tutte le pagine, anche quando non contengono
argomenti dedicati agli adulti. Il motivo che molti browsers non permettono la visione di pagine il
cui contenuto non sia stato classificato.
60
Colori hex HTML :

INTRODUZIONE

Per alcune ragioni i colori in HTML sono specificati usando i numeri esadecimali (hex numbers).
I numeri esadecimali sono numeri basati su un valore di 16, diversamente dai numeri classici, basati
su un valore di 10.

Ecco come si conta fino a 15 usando i numeri esadecimali:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Come puoi vedere, i numeri da 10 a 15 sono stati sostituiti da lettere. Un tipico valore esadecimale
potrebbe essere A53C8D.

In questa sezione imparerai a capire i codici dei colori esadecimali, imparerai anche a convertire i
codici esadecimali in codici di colore RGB. (I codici RGB sono usati dalla maggior parte dei
programmi di grafica per identificare i colori).

Infine scoprirai che nei browser Netscape c' un errore di interpretazione dei colori, il che significa
che soltanto 216 colori appaiono uguali su tutti i browser.

Cominciamo innanzitutto a imparare la differenza tra numeri esadecimali e numeri tradizionali...

DECIMALI CONTRO HEX

Nei numeri classici ci sono dieci diverse cifre, mentre nei numeri esadecimali ce ne sono 16.
Ecco i numeri da 0 a 15 secondo i due sistemi:

DEC 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
ESA 0 1 2 3 4 5 6 7 8 9 A B C D E F

Il numero esadecimale pi alto che si pu indicare usando una sola cifra F, equivalente a 15.
Il numero a due cifre pi alto FF, che equivale a 255.

Per evitare confusione nei numeri maggiori di 9, i colori esadecimali sono generalmente preceduti
dal simbolo #.

In HTML, i codici del colore hanno 6 caratteri, come ad esempio #FF3C96.

COLORI RGB

61
I colori dello schermo sono definiti dai colori Rosso, Verde e Blu, quindi i colori in HTML sono
definiti in un sistema basato sulla quantit di ognuno dei tre colori base.

Questo sistema si chiama RGB color system. La maggior parte dei programmi di grafica
(Photoshop, Photopaint, Paintshop Pro etc.) in grado di lavorare con colori in un sistema RGB. Il
problema che mentre gran parte dei dei programmi di grafica definiscono il codice RGB usando
normali numeri decimali, HTML adopera i numeri esadecimali. Questo significa che, se vuoi usare
gli stessi colori nel tuo programma di grafica e sulla tua home page, dovrai convertire i numeri
decimali in esadecimali.

RGB ESADECIMALI

Ecco una tipica definizione di colore in HTML:

<body bgColor="#FF8C67">

Il colore definito come "#FF8C67".
Il simbolo # indica semplicemente che i seguenti numeri sono esadecimali.
I primi due caratteri specificano la quantit di rosso (FF).
I caratteri 3 e 4 specificano la quantit di verde (8C).
I caratteri 5 e 6 specificano la quantit di blu (67).

Qui sotto puoi vedere un esempio che mostra come i diversi colori vengono mescolati per ottenere il
risultato desiderato:

FF + 8C + 67 = FF8C67

Essendovi due cifre esadecimali per ogni colore, si possono specificare 256 gradazioni di ogni
colore base. Questo d un totale di 256*256*256 = 16.777.216 differenti combinazioni. Comunque,
non tutti questi colori si vedranno allo stesso modo su tutti i browser e i sistemi operativi.

216 COLORI SICURI

Soltanto 216 colori sono quelli che vengono considerati "sicuri" ("browser safe"). I colori sicuri
sono colori che si vedono nello stesso modo, indipendentemente dal browser in cui appaiono. Il
motivo che i browser che girano su diverse piattaforme interpretano i colori diversamente.

Gli unici 216 colori che si vedono sempre e comunque allo stesso modo, sono quelli composti da
coppie di 00, 33, 66, 99, CC e FF. Un esempio potrebbe essere: "#990066". Cerca di limitarti
sempre ad usare i colori caratterizzati da queste combinazioni.

Il motivo tecnico dell'esistenza di colori non sicuri che i browsers Netscape hanno un diverso
sistema di colori. Questo sistema non corrisponde perfettamente ai pi diffusi programmi di grafica.

Puoi fare tu stesso una semplice prova dell'errore di Netscape:

62
Prova a fare una piccola immagine nel tuo programma di grafica.
L'immagine dovr essere interamente colorata con un colore non sicuro.
Ora converti il valore del colore in esadecimali.
Crea una pagina con il colore esadecimale come sfondo.
Infine inserisci l'immagine sulla pagina.

Siccome hai usato lo stesso colore RGB sia per la tua pagina che per l'immagine, l'immagine
dovrebbe risultare invisibile sulla pagina, ma sui browsers Netscape l'immagine si pu vedere!

CONVERSIONE HEX-DEC

E' semplice convertire valori esadecimali in valori decimali e viceversa, ti serve soltanto una
calcolatrice in grado di gestire entrambi i sistemi.

Se adoperi Windows, usa pure la calcolatrice del sistema operativo, ricordandoti di scegliere
l'opzione "scientifico".

Inserisci il valore decimale e poi clicca sul campo Hex - guarda la calcolatrice convertire il numero
in esadecimali.

E' superfluo dire che si pu fare anche il percorso inverso, cio calcolare i valori decimali partendo
da un esadecimale.

Ci sono alcuni colori che sono talmente usati da poter essere definiti col proprio nome.

COLORI NOMINATI

Alcuni colori possono essere indicati usando nomi invece dei valori esadecimali.

<body bgColor=Navy>

Ecco la lista dei colori con i loro nomi:

Black Yellow Red Maroon
Gray Lime Green Olive
Silver Aqua Blue Navy
White Fuchsia Purple Teal

Se vuoi usare altri colori, devi essere certo di avere scelto colori sicuri.

Potrebbero piacerti anche

SVILUPPO WEB La Guida Completa Alla Programmazione Web Lato Client e Server (Italian Edition) by Oscar R. Frost (Frost, Oscar R.)
Nessuna valutazione finora
SVILUPPO WEB La Guida Completa Alla Programmazione Web Lato Client e Server (Italian Edition) by Oscar R. Frost (Frost, Oscar R.)
319 pagine
Guida Html5 Italiano
100% (1)
Guida Html5 Italiano
93 pagine
Raccolta Cromopuntura
100% (1)
Raccolta Cromopuntura
40 pagine
01 HTML
Nessuna valutazione finora
01 HTML
84 pagine
Fondamenti Di XML - Steven Holzner
Nessuna valutazione finora
Fondamenti Di XML - Steven Holzner
79 pagine
Corso HTML Css PPT
Nessuna valutazione finora
Corso HTML Css PPT
140 pagine
03 Hypertext Markup Language
Nessuna valutazione finora
03 Hypertext Markup Language
61 pagine
02 HTML
Nessuna valutazione finora
02 HTML
76 pagine
I Cing (Libro Dei Mutamenti) Spiegati Da Daniele Ferrero
Nessuna valutazione finora
I Cing (Libro Dei Mutamenti) Spiegati Da Daniele Ferrero
39 pagine
1 05 CSS
Nessuna valutazione finora
1 05 CSS
86 pagine
Css
100% (1)
Css
75 pagine
Appunti CSS 22-23 PDF
Nessuna valutazione finora
Appunti CSS 22-23 PDF
77 pagine
Ifabbricantidistupidi 24 Giugno 2016 e Book
Nessuna valutazione finora
Ifabbricantidistupidi 24 Giugno 2016 e Book
185 pagine
Pagine Web
Nessuna valutazione finora
Pagine Web
45 pagine
Informatica 4°
Nessuna valutazione finora
Informatica 4°
41 pagine
Nvu Guida
Nessuna valutazione finora
Nvu Guida
87 pagine
Guida Al Codice Di Enrico Mensa
Nessuna valutazione finora
Guida Al Codice Di Enrico Mensa
37 pagine
Introduzione A HTML
Nessuna valutazione finora
Introduzione A HTML
45 pagine
Guida HTML Facile
Nessuna valutazione finora
Guida HTML Facile
41 pagine
HTML
Nessuna valutazione finora
HTML
57 pagine
Comandi HTML
Nessuna valutazione finora
Comandi HTML
2 pagine
2-Struttura Pagina
Nessuna valutazione finora
2-Struttura Pagina
36 pagine
Guida Base Css
Nessuna valutazione finora
Guida Base Css
27 pagine
CSS (Cascading Style Sheet)
Nessuna valutazione finora
CSS (Cascading Style Sheet)
31 pagine
Visual Design Ed Elaborazione Grafica
Nessuna valutazione finora
Visual Design Ed Elaborazione Grafica
32 pagine
UA3 LEZ2 Introduzione all'HTML
Nessuna valutazione finora
UA3 LEZ2 Introduzione all'HTML
29 pagine
HTML
Nessuna valutazione finora
HTML
33 pagine
Spiega HTML
Nessuna valutazione finora
Spiega HTML
52 pagine
Corso HTML Base
Nessuna valutazione finora
Corso HTML Base
70 pagine
HTML
Nessuna valutazione finora
HTML
104 pagine
HTML
Nessuna valutazione finora
HTML
19 pagine
Slide Info
Nessuna valutazione finora
Slide Info
24 pagine
Linguaggi Del Web
Nessuna valutazione finora
Linguaggi Del Web
23 pagine
Slide HTML 5
Nessuna valutazione finora
Slide HTML 5
27 pagine
Guida HTML Css
Nessuna valutazione finora
Guida HTML Css
24 pagine
Tutorial HTML e CSS Italian
Nessuna valutazione finora
Tutorial HTML e CSS Italian
20 pagine
Lezione 6
Nessuna valutazione finora
Lezione 6
15 pagine
Guida Pratica Ai CSS-Come Usare Da Zero I Fogli Di Stile Con Stile
Nessuna valutazione finora
Guida Pratica Ai CSS-Come Usare Da Zero I Fogli Di Stile Con Stile
41 pagine
Guida Tag HTML
Nessuna valutazione finora
Guida Tag HTML
12 pagine
INFORMATICA HTML
Nessuna valutazione finora
INFORMATICA HTML
15 pagine
Guida HTML
Nessuna valutazione finora
Guida HTML
100 pagine
Studio Tecnologie Web
Nessuna valutazione finora
Studio Tecnologie Web
8 pagine
Web Design 1
Nessuna valutazione finora
Web Design 1
5 pagine
Guida Pratica HTML e CSS
Nessuna valutazione finora
Guida Pratica HTML e CSS
31 pagine
Comandi Base HTML
Nessuna valutazione finora
Comandi Base HTML
6 pagine
Appunti Di Apicoltura
Nessuna valutazione finora
Appunti Di Apicoltura
13 pagine
Sis e Reti + Info
Nessuna valutazione finora
Sis e Reti + Info
4 pagine
Dermoriflessologia Riequilibrio Emozioni Organi PDF
100% (3)
Dermoriflessologia Riequilibrio Emozioni Organi PDF
4 pagine
Manuale Css
Nessuna valutazione finora
Manuale Css
6 pagine
Programmare Per Il Web - Lato Client (2012)
Nessuna valutazione finora
Programmare Per Il Web - Lato Client (2012)
334 pagine
Lista Dei TAG HTML: Elementi Di Base
Nessuna valutazione finora
Lista Dei TAG HTML: Elementi Di Base
4 pagine
HTML
Nessuna valutazione finora
HTML
1 pagina
Roulette Il Sistema Del Notaro
Nessuna valutazione finora
Roulette Il Sistema Del Notaro
3 pagine
Index
Nessuna valutazione finora
Index
2 pagine
Guida HTML
Nessuna valutazione finora
Guida HTML
11 pagine
Prontuario HTML
Nessuna valutazione finora
Prontuario HTML
10 pagine
Lista Dei Tag HTML
Nessuna valutazione finora
Lista Dei Tag HTML
2 pagine