I riassunti , gli appunti i testi contenuti nel nostro sito sono messi a disposizione gratuitamente con finalità illustrative didattiche, scientifiche, a carattere sociale, civile e culturale a tutti i possibili interessati secondo il concetto del fair use e con l' obiettivo del rispetto della direttiva europea 2001/29/CE e dell' art. 70 della legge 633/1941 sul diritto d'autore
Le informazioni di medicina e salute contenute nel sito sono di natura generale ed a scopo puramente divulgativo e per questo motivo non possono sostituire in alcun caso il consiglio di un medico (ovvero un soggetto abilitato legalmente alla professione).
Le pagine web sono scritte in HTML - un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language
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...
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 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")
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.
Normalmente le pagine web consistono in una "testa", in inglese head e un "corpo", detto anche body.
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>
<!-- Questa sezione è per il titolo e le informazioni sulla pagina. -->
</head>
<body>
<!-- Questa sezione è per tutto quello che vuoi mostrare sulla pagina . -->
</body>
</html>
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".
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:
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.
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.
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>
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).
Il tag <font> cambia il font.
Esempio: come appare il comando nel browser.
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.
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:
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.
Questi sono I tags per variare la dimensione del font
<big>text</big> Incrementa la dimensone di un’unità
<small>text</small> Decrementa la dimensione di un’unità
<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
Questi tags servono a controllare il layout.
HTML |
SPIEGAZIONE |
<p>text</p> |
Aggiunge un'interruzione di paragrafo dopo il testo. |
<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 |
text<wbr> |
Permette al browser di inserire un "a capo" |
<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. |
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.
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.
Questo paragrafo mostra come ottenere diversi tipi di liste a punti. Puoi scegliere tra questi tipi di punti:
Guarda questi esempi e il modo in cui sui ottengono.
CODICE HTML |
SPIEGAZIONE / ESEMPIO |
<ul> |
Crea una lista a punti usando il tipo di punto del default:
|
<ul type="disc"> |
Inizia una lista a punti usando dischi come punti:
|
<ul type="circle"> |
Inizia una lista a punti usando cerchi come punti:
|
<ul type="square"> |
Inizia una lista a punti usando quadrati come punti:
|
Questa pagina mostra come si possono creare diversi tipi i liste a numeri. Queste sono le opzioni numeriche disponibili:
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> |
Crea una lista a numeri usando il valore di default:
|
<ol start="5"> |
Inizia una lista a numeri, partendo dal n. 5.
|
|
7. E questa è l'ultima riga |
<ol type="A"> |
Inizia una lista a numeri, usando lettere maiuscole.
|
<ol type="a"> |
Inizia una lista a numeri, usando lettere minuscole.
|
<ol type="I"> |
Inizia una lista a numeri, usando numeri romani maiuscoli.
|
<ol type="i"> |
Inizia una lista a numeri, usando numeri romani minuscoli.
|
<ol type="1"> |
Inizia una lista a numeri, usando numeri normali.
|
<ol type="I" start="7"> |
Un esempio di come type (tipo) e start (inizio) possono essere combinati.
|
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 .
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. |
Questo significa che:
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.
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.
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.
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.
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.
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">
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.
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!
Si possono allineare le immagini in conformità con il testo che le circonda, usando i seguenti allineamenti:
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.
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:
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ù.
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.
Ci sono alcuni attributi che possono essere utili per il controllo dei colori dei link di testo.
Questa sezione ti insegnerà a:
Il colore generale dei link di testo è specificato nel tag <body>, come nell'esempio qui sotto:
<body link="#C0C0C0" vlink="#808080" alink="#FF0000">
#800080).
#FF0000).
Nota:
In HTML i colori sono codificati con i valori esadecimali per i singoli canali R G B.
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:
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.
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.
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:
In aggiunta a questo, si può anche inserire il nome di una finestra "frame" se la pagina è all'interno di un "frameset".
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>
<head>
<title>Questa è la mia pagina</title>
<style type="text/css">
<!--
A{text-decoration:none}
-->
</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.
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">
<!--
A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline}
-->
</style>
</head>
<body>
Benvenuto nel mio mondo!<br>
<a href="http://www.yahoo.com>Questo link per yahoo non è sotttolineato </a>
</body>
</html>
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"><!-- A.set1:link {color: #FF00FF; } A.set1:active {color: #FFFF00; } A.set1:visited {color: #00FFFF; }
--></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>
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>:
<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>
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:
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.
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:
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.
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.
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.
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>.
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.
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.
Se invece di un colore singolo vuoi aggiungere un'immagine allo sfondo, ci sono alcune considerazioni preliminari che dovresti fare:
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).
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".
Le tabelle (tables) vengono adoperate nei siti per due ragioni principali:
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:
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.
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.
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. |
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>.
Le seguenti proprietà possono essere aggiunte al tag <table>:
Proprietà |
Descrizione |
align= left center right |
Tabella allineata a sinistra Tabella al centro |
background=filename |
immagine inserita dietro alla tabella |
bgcolor=#rrggbb |
colore dello sfondo |
border=n |
spessore del bordo |
bordercolor=#rrggbb |
colore del bordo |
bordercolordark=#rrggbb |
ombra del bordo |
cellpadding=n |
spazio tra le celle |
cellspacing=n |
distanza tra cella e contenuto |
nowrap |
impedisce l'interruzione di riga, anche se il contenuto è più grande della finestra del browser. |
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 |
valign= top bottom |
allinea il contenuto con il lato superiore 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.
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 |
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 |
width= n |
specifica l'ampiezza minima delle celle in pixel specifica l'ampiezza minima delle celle in percentuale rispetto all'ampiezza della tabella |
height= n |
altezza minima delle celle in pixel |
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>).
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:
Quando una pagina frameset viene scaricata, il browser automaticamente scarica ognuna delle pagine associate ai frame.
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>
<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...
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.
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" >
<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.
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 |
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>
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à.
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:
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.
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>
<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 |
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>
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.
Un tipico esempio di form potrebbe essere un motore di ricerca.
Inviando questo form, ecco cosa succede:
Un altro esempio potrebbe essere una pagina di logon.
Inviando questo form, ecco cosa succede:
In entrambi i casi, i contenuti dei "form field" vengono inviati a programmi che girano sul server.
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.
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>
<!-- Qui va HTML -->
<form>
<!-- Qui vanno form field e HTML -->
</form>
<!-- Qui va HTML -->
</body>
</html>
Nota:
Diversamente da una tavola, i form non sono visibili sulla pagina.
Il form nel nostro esempio è inutile :
Per fare sì che il browser sappia dove inviare il contenuto, dobbiamo aggiungere questi attributi al tag <form>:
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>
<!-- Qui va HTML -->
<form method="post" action="http://www.kadath.com/cgi-bin/formmail.cgi">
<!-- Qui vanno form field e HTML -->
</form>
<!-- Qui va HTML -->
</body>
</html>
Adesso non resta che dare possibilità al visitatore di inserire alcune informazioni.
I field di testo (text fields) sono aree di una riga sola che permettono all'utente di inserire testo.
Se hai bisogno di più righe, devi usare un text area.
Ecco una lista di attributi validi per i text field:
HTML |
SPIEGAZIONE |
ESEMPIO |
text size= |
Text field di una riga Caratteri mostrati. |
|
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.
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!">
<br><br>
</div>
</form>
</body>
</html>
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.
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. |
|
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.
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>
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.
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>
</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.
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".
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.
Ignora gli "a capo" |
|
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".
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".
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>
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. |
|
||
|
|
|
||
|
||||
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.
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>
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. |
|
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.
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.
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>
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
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.
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 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:
50
<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>
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>
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.
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. |
|
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 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.
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>
Quando un visitatore clicca su un bottone di reset, le entrate sono resettate ai valori di default.
Ecco una lista degli attributi validi per i bottoni di reset:
HTML |
SPIEGAZIONE |
ESEMPIO |
reset name= value= align= tabindex= |
Bottone reset Nome 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.
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.
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>
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.
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. |
|
|
|
|
||
|
|||
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.
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>
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 |
textarea rows= cols= name= wrap= off virtual physical |
Text area - diverse righe Righe nel field. Controllo fine riga. Ignora gli "a capo". |
|
||||
text size= |
Text field di una riga Caratteri mostrati. |
|
||||
password size= maxlength= name= value= |
Password field. Caratteri mostrati. |
|
||||
checkbox name= value= |
Scegli una o più opzioni Nome del field. |
|
||||
|
|
|
||||
|
||||||
radio name= value= |
Scegli una sola opzione Nome del field. |
|
||||
select name= size= multiple= option selected value= |
Menù a discesa Nome del field. Voci individuali nel menù. Creare una voce default. |
|
||||
hidden name= value= |
Non mostra il form. Nome del field. |
|
||||
reset name= value= |
Bottone per resettare tutti i field. Nome del bottone. |
Reset |
||||
submit name= value= |
Bottone per inviare il form Nome del bottone. |
Submit |
||||
image name= |
Immagine funzionante come bottone Nome dell'immagine. |
|
|
|
||
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".
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.
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.
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.
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.
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.
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.
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))'>
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.
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...
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.
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.
Ecco una tipica definizione di colore in HTML:
<body bgColor="#FF8C67">
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.
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:
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!
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.
Alcuni colori possono essere indicati usando nomi invece dei valori esadecimali.
<body bgColor=Navy>
Ecco la lista dei colori con i loro nomi:
|
Black |
|
|
|
Maroon |
|
Gray |
|
|
|
Olive |
|
Silver |
|
|
|
Navy |
|
White |
|
|
|
Teal |
Red |
Green |
Blue |
Purple |
Yellow |
Lime |
Aqua |
Fuchsia |
Fonte: http://www.kadath.it/public/Kadath/HTML.pdf
Sito web da visitare: http://www.kadath.it
Autore del testo: prof. Gennaro Cavazza
Il testo è di proprietà dei rispettivi autori che ringraziamo per l'opportunità che ci danno di far conoscere gratuitamente i loro testi per finalità illustrative e didattiche. Se siete gli autori del testo e siete interessati a richiedere la rimozione del testo o l'inserimento di altre informazioni inviateci un e-mail dopo le opportune verifiche soddisferemo la vostra richiesta nel più breve tempo possibile.
I riassunti , gli appunti i testi contenuti nel nostro sito sono messi a disposizione gratuitamente con finalità illustrative didattiche, scientifiche, a carattere sociale, civile e culturale a tutti i possibili interessati secondo il concetto del fair use e con l' obiettivo del rispetto della direttiva europea 2001/29/CE e dell' art. 70 della legge 633/1941 sul diritto d'autore
Le informazioni di medicina e salute contenute nel sito sono di natura generale ed a scopo puramente divulgativo e per questo motivo non possono sostituire in alcun caso il consiglio di un medico (ovvero un soggetto abilitato legalmente alla professione).
"Ciò che sappiamo è una goccia, ciò che ignoriamo un oceano!" Isaac Newton. Essendo impossibile tenere a mente l'enorme quantità di informazioni, l'importante è sapere dove ritrovare l'informazione quando questa serve. U. Eco
www.riassuntini.com dove ritrovare l'informazione quando questa serve
