Lezioni di HTML

Lezioni di HTML

 

 

 

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).

 

 

 

 

Lezioni di HTML

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.

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>
<!-- Questa sezione è per il titolo e le informazioni sulla pagina. -->
</head>

<body>


<!-- Questa sezione è per tutto quello che vuoi mostrare sulla pagina . -->
</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
    • Formattazione
    • Ridimensionamento
    • Layout
    • Listing
  • Link
    • A pagine locali
    • A pagine di altri siti
    • A segnalibri
  • Immagini
    • Inserimento di immagini (GIF e jpg)
    • Aggiunta di un link a un'immagine
  • Fondali
    • Colori
    • Immagini
    • Immagine fissa
  • Tabelle
    • Frame

  • Form
  • Metatag
  • Colori Esadecimali (Hex)

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.

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).

 

FONT

 

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.


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 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

 

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.


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.


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

 

 

<ul type="circle">

Inizia una lista a punti usando cerchi come punti:

  • Questa è una riga
  • Questa è un'altra riga
  • 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:

  • text
  • text
  • text

 

<ol start="5">

Inizia una lista a numeri, partendo dal n. 5.

  • Questa è una riga
  • Questa è un'altra riga

 

7.   E questa è l'ultima riga

 

 

<ol type="A">

Inizia una lista a numeri, usando lettere maiuscole.

  • Questa è una riga
  • Questa è un'altra riga
  • E questa è l'ultima riga

 

 

<ol type="a">

Inizia una lista a numeri, usando lettere minuscole.

  • Questa è una riga
  • Questa è un'altra riga
  • E questa è l'ultima riga

 

 

<ol type="I">

Inizia una lista a numeri, usando numeri romani maiuscoli.

  • Questa è una riga
  • Questa è un'altra riga
  • E questa è l'ultima riga

 

 

<ol type="i">

Inizia una lista a numeri, usando numeri romani minuscoli.

  • Questa è una riga
  • Questa è un'altra riga
  • E questa è l'ultima riga

 

 

<ol type="1">

Inizia una lista a numeri, usando numeri normali.

  • Questa è una riga
  • Questa è un'altra riga
  • E questa è l'ultima riga

 

 

<ol type="I" start="7">

Un esempio di come type (tipo) e start (inizio) possono essere combinati.

  • Questa è una riga
  • Questa è un'altra riga
  • E questa è l'ultima riga

 

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.


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.


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">


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:


  • 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.


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.


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.


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>


<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.

 

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">
<!--
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; }

  • set2:link {color: #AA00FF; background: #FF00AA; text-decoration: none} A.set2:active {color: #FF00AA; background: none transparent;} A.set2:visited {color: #FFFF00; text-decoration: none}

--></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>:


<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:


    • 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.


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.


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.


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).


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".


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:


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


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


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>).


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>


<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" >


<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


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:


  • _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>

 

<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>


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.


 

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.


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>
<!-- 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 :

  • 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>
<!-- 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.

 

FIELD TESTO

 

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.

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!">


<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:


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>


</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".


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.


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.


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


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:
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>

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.


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.


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.

 

 

 

 


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


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.

 

 

 


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.


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.


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))'>


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.


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


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:


  • 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

 

 

 

Maroon

 

Gray

 

 

 

Olive   

 

Silver

 

 

 

Navy   

 

White

 

 

 

Teal     

Red

Green

Blue

Purple

 

Yellow

Lime

Aqua

Fuchsia

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

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.

 

Lezioni di HTML

 

 

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).

 

Lezioni di HTML

 

"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

 

Argomenti

Termini d' uso, cookies e privacy

Contatti

Cerca nel sito

 

 

Lezioni di HTML