Guida html

Questo sito utilizza cookie, anche di terze parti. Se vuoi saperne di più leggi la nostra Cookie Policy. Scorrendo questa pagina o cliccando qualunque suo elemento acconsenti all’uso dei cookie.I testi seguenti sono di proprietà dei rispettivi autori che ringraziamo per l'opportunità che ci danno di far conoscere gratuitamente a studenti , docenti e agli utenti del web i loro testi per sole finalità illustrative didattiche e scientifiche.

Introduzione HTML

Html (HyperText Markup Language) è il linguaggio standard per la creazione di pagine strutturare per il Web, in grado di essere interpretate da un browser, un software tramite cui è possibile effettuare una connessione ad Internet per mezzo del protocollo http (HyperText Transfert Protocol), intraprendendo una comunicazione con un server Web.
In poche righe abbiamo già parlato di cose che, i meno avvezzi, non conosceranno e non potranno capire al volo, mi vorranno quindi perdonare il lettori più esperti, ma spendere qualche parola introduttiva mi pare cosa dovuta, è possibile considerarla una piccola ripetizione.

Linguaggi di markup e linguaggi di programmazione

Un linguaggio di markup, di cui l'Html ne è il maggior esponente, si differenzia da un linguaggio di programmazione, in quanto il suo solo scopo è quello di utilizzare una serie di comandi marcatori chiamati Tag per formattare una pagina e renderla stilisticamente pronta ad ospitare immagini e grafica.
Un linguaggio di programmazione, invece, permette di creare programmi per mezzo di cui un utente possa interagire e scambiare dati ed informazioni col programma stesso, o con altri utenti, il tutto in maniera dinamica.

Browser Web

I browser Web altro non sono che software in grado di interpretare il codice Html che compone una pagina Web, sia essa presente su di un server Web, sia essa sull'hard disk del nostro PC.
I più utilizzati sono Microsoft Internet Explorer (che da ora in poi chiameremo MSIE) e Netscape Navigator (da ora in poi NN).
Per questioni commerciali tra le case fornitrici di software, non tutto quello che è l'Html è compatibile con tutti i browser, esistono Tag o intere porzioni di codice che funzionano solo con un tipo di browser rispetto ad un'altro, o addirittura solo con versioni più aggiornate del browser stesso.
In questo manuale focalizzeremo l'attenzione su MSIE, che, anche se non sarà il miglior browser sul mercato, è il più diffuso; tuttavia saranno analizzate anche le caratteristiche riguardanti NN.

Il protocollo http

Prima di entrare nei dettagli del protocollo http, iniziamo con una semplice spiegazione di cos'è un protocollo informatico e perchè viene utilizzato.
Pensiamo ad un protocollo come ad un insieme di regole che permettono a due computer di comunicare.
Tutti siamo, chi più chi meno, siamo dei navigatori Internet; per reperire una pagina scriviamo nella barra degli indirizzi qualcosa del genere: http://www.lucaruggiero.it
Questa è una URL (Unite Resource Locator), ovvero un indirizzo Internet che ci consente di arrivare ad un file presente su un computer da qualche parte nel mondo, ovvero un server Web. Questi due argomenti saranno ampliati a breve.
Proviamo a salvare sul Desktop del nostro PC un file creato col Word e chiamiamolo esempio; proviamo poi a cliccare su "Start" sul nostro PC, scegliamo la voce "Esegui", digitiamo C:\WINDOWS\Desktop\esempio.doc e clicchiamo su Ok. Si aprirà il file che abbiamo creato.
In questo caso non abbiamo bisogno di ricorrere ad un protocollo perchè stiamo inviando una richiesta dal nostro PC a se stesso; se il file esempio.doc non fosse presente sul nostro hard disk, bensì su un server Web, dovremmo ricorrere al protocollo http e scrivere http://nomeserver/esempio.doc, o qualcosa del genere.

I server Web

I server Web sono programmi in grado di ospitare pagine Web e di inviarle al browser di un utente che le richiede.
Dato che questo Sito tratta prevalentemente linguaggi e tecnologie di casa Microsoft, non che io sia un amante, premetto che focalizzerò l'attenzione sulle sue componenti.
I server Web vengono installati su dei server, intesi come PC, connessi ad internet 24 ore su 24 con installato un sistema operativo ad hoc, come ad esempio Windows NT Server o Windows 2000 Server.
I più noti server Web di casa Microsoft sono IIS (Internet Information Service), quello che ospita tutti i siti pubblicati su server Microsoft, e PWS (Personal Web Server), versione ridotta di IIS, destinato ad un uso domestico.
Quando ci colleghiamo ad un sito Internet, non facciamo altro che chiedere ad un server Web di inviarci la pagina che desideriamo visualizzare e lui, se trova la pagina, da personcina educata ce la invia, oppure, in caso non la trovi o la pagina non esista, ci manda una pagina di errore.

Indirizzi Internet: le URL

Come già accennato, le URL sono degli indirizzi Internet. Non risciolgo l'acronimo perchè, vi assicuro, non è di vitale importanza ricordarlo!
Collegandovi a questa pagina, dunque, avete digitato una URL... ma probabilmente sarete arrivati a questa pagina dalla pagina principale, quindi forse non è vero che l'avete digitata voi!
Le URL relative sono indirizzi "incompleti", ma che tuttavia restituiscono la pagina che cerchiamo. La pagina iniziale di questo sito, ad esempio, è raggiungibile all'indirizzo http://www.lucaruggiero.it, ma la pagina vera si chiama default.htm.
Le URL assolute, invece, seguono il percorso completo di un file fino alla sua posizione esatta: la pagina iniziale di questo sito è http://www.lucaruggiero.it/default.htm e questa pagina, invece, si trova all'indirizzo http://www.lucaruggiero.it/html/manuale.asp
Spese tante parole sulle URL, analizziamone una nelle sue più piccole forme:

http://www.lukeonweb.net
http:// - protocollo di comunicazione www - World Wide Web, ovvero servizio di interscambio di file Html da un server Web ad un browser Web lukeonweb- dominio Web, ovvero un nome univoco ed identificativo di un sito .net - suffisso di un sito: il dominio "lukeonweb" ad esempio, è univoco come "lukeonweb.net". Sarà possibile, ad esempio, creare un nuovo dominio del tipo "lukeonweb.com".
I suffissi standard sono .net, utilizzato per siti di natura generica, .com, per siti di tipo commerciale, .org, per siti di organizzazioni, .info, nuovissimo suffisso, simile al .net; ogni paese poi ha un suo suffisso, ad esempio in Italia esiste il .it, in Inghilterra il .uk, in Francia il .fr, ecc.

Indirizzi IP

IP è l'acronimo di "Internet Protocol", sono indirizzi numerici, formati in genere da cifre di tre unità separate da un punto.
I domini in formato alfabetico, come lukeonweb.net, sono stati creati per semplificare lo sforzo di memoria per far riferimento ad un sito: è molto più facile ricordare il nome esplicativo di un dominio invece del suo indirizzo IP.

Root

Una root è la cartella principale di un sito, presente su di un server Web. Tutti i file che compongono un sito si trovano all'interno di questa directory e possono essere organizzati in sub-directory, come ad esempio la cartella html che contiene il file che state visualizzando in questo momento.

Conclusioni

Finita questa larga panoramica sul mondo del Web, concludo questo primo capitolo del manuale di Html e rimando i lettori alla prossima puntata, dedicando tutta l'attenzione all'Html, al suo utilizzo ed alla sia sintassi.
Prego di fissare bene questi concetti, dato che dal prossimo capitolo se ne parlerà partendo dl presupposto che il lettore sappia bene di cosa si stia parlando.

Struttura di un file HTML

Nella lezione precedente si è parlato di come avviene una comunicazione attraverso varie componenti di Internet, ora ci accingiamo a creare una pagina Web secondo le specifiche dell'Html.
Per creare un file Html è sufficiente creare un file di testo col Blocco note e salvarlo con un nome qualunque, magari meglio se indicativo, con estensione .html o preferibilmente .htm, a causa del mancato supporto da parte di sistemi obsoleti di file con estensione superiore a tre caratteri.
Salvare il file come Tutti i File [*.*] nella root (lezione precedente) che si intende utilizzare per il proprio sito.
Esempio: salviamo il file iniziale come default.htm oppure index.htm (nomi preferiti per una homepage) nella cartella myweb sul Desktop o nella cartella Documenti.
Fatto questo, troveremo nella root un file con l'icona col simbolo del browser che utilizziamo come predefinito.
Aprendo il file troveremo una pagina vuota. Per visualizzare il codice sorgente abbiamo due possibilità:
1. tasto destro sulla pagina e selezionare la vice HTML
2. selezionare la voce HTML dal menu Visualizza
Aperto il Blocco note possiamo iniziare a scrivere il codice. E' indifferente scrivere il codice Html in maiuscolo o in minuscolo; per questa guida si è scelto di scrivere i Tag in minuscolo.
Iniziamo con la dichiarazione del tipo di documento, il !doctype:

<!doctype html public "-//w3c//dtd html 4.0//en">

Questo codice risulterà a prima vista incomprensibile, ma più avanti con la pratica risulterà semplice anche ricordarlo, tuttavia la dichiarazione è opzionale.
Esaminiamolo: !doctype indica la dichiarazione del tipo di documento, public indica una pagina di un possibile ente o possessore non statale o governativo, l'alternativa è private. il simbolo - (trattino) indica una pagina non certificate ISO, w3c indica l'organizzazione mondiale del World Wide Web, dtd html 4.0 indica la versione ultima riconosciuta dell'Html, en (english) indica che il documento è scritto con Tag in inglese, quindi è fissa!
Creiamo ora la struttura Html per creare una pagina corretta:

<!doctype html public "-//w3c//dtd html 4.0//en">

<html lang="it">

 <head>

  <title>La mia prima pagina Web</title>

 </head>

<body>

<!-- Questo è un commento, questo codice non verrà interpretato dal browser -->

<!--

Questo è un commento su più righe

I commenti sono molto importanti per tenere ordine nel codice, ad esempio

è possibile scriverci cose del tipo:

QUESTO CODICE SERVE PER "QUESTA COSA" E VA AGGIORNATO OGNI DUE GIORNI

o cose del genere!!!

-->

</body>

</html>

Questa parte è di fondamentale importanza, prego di prestare la massima attenzione, ci accingiamo a spiegare la struttura di una pagina Html. Per visualizzare sulla pagina le modifiche al codice è sufficiente "aggiornare", cliccando l'apposito tasto sulla barra degli strumenti del browser o dalla tastiera con l'utilizzo del tasto F5.
Il Tag <html> indica l'apertura della pagina e lang="it" indica che il contenuto della pagina è in italiano.

Ci troviamo subito di fronte ad un concetto interessante, la differenza tra Tag e attributi. Abbiamo spiegato nella lezione precedente cos'è un Tag, ovvero un comando Html che può essere vuoto o avere una chiusura, (ad esempio </html>), un attirbuto invece è una proprietà attribuibile ad uno o più Tag che può avere un valore, come nell'esempio, oppure agire da solo senza necessitare di un valore.
L'attributo lang="it" è comunque facoltativo. Invito il lettore ad una seconda lettura di questa lezione più avanti dopo aver terminato il manuale, molti concetti risulteranno più chiari con l'aiuto di esempi pratici.
Il Tag <head> è fondamentale nella struttura di un documento, indica l'intestazione della pagina ed è possibile includervi codice che deve essere eseguito prima del caricamento completo della pagina.
Il Tag <title> permette di inserire un titolo nell'apposita barra blu del browser in alto, per intenderci sulla stessa orizzontale dove ci sono i pulsantini per chiudere, minimizzare o iconizzare una finestra.
Il <body> rappresenta il corpo della pagina, ovvero da qui inizia la progettazione fisica.
Quest'ultimo presenta una vasta serie di attributi, esaminiamo quelli che ci serviranno per la maggiore:

Atributo	Descrizione
bgcolor	Colore di sfondo della pagina, assume un valore letterale (white), esadecimale (#FFFFFF) o RGB (255,255,255)
background	Permette di inserire un'immagine di sfondo nella pagina, richiamando, ad esempio, il file "sfondo.jpg" oppure "sfondo.gif"
text	Permette di definire il colore del testo per tutta la pagina
link	Permette di definire il colore dei link per tutta la pagina
alink	Permette di definire il colore dei link attivi per tutta la pagina
vlink	Permette di definire il colore dei link già visitati per tutta la pagina
topmargin	Permette di definire la distanza tra il bordo superiore della pagina dagli elementi che contiene, utilizzando un valore numerico
leftmargin	Permette di definire la distanza tra il bordo sinistro della pagina dagli elementi che contiene, utilizzando un valore numerico
rightmargin	Permette di definire la distanza tra il bordo destro della pagina dagli elementi che contiene, utilizzando un valore numerico
bottommargin	Permette di definire la distanza tra il bordo inferiore della pagina dagli elementi che contiene, utilizzando un valore numerico
onLoad	Permette di far verificare un evento al caricamento della pagina
onContextMenu	Col valore "return false;" inibisce l'utilizzo del tasto destro del mouse sulla pagina
scroll	Permette di agire sulle barre di scorrimento, col valore "Yes" le lascia li dove sono (predefinito), col valore "No" le elimina e col valore "Auto" le visualizza solo se la pagina è abbastanza lunga da richiederle
style	Permette di definire uno stile per lo sfondo o per le caratteristiche della pagina non attribuibili ai singoli elementi (vedi Manuale CSS)

Nota: nessuno di questi attributi è obbligatorio, servono solo a rendere il sito meglio formattato ed accattivante, lascio alla fantasia ed alle conoscenze del lettore la possibilità.
Vediamo un esempio di come si utilizzano gli attributi, esempio generico che tornerà utile per tutti i Tag Html:

<tag attributo="valore" attributo="valore">

Per testare quanto imparato prego i lettori di effettuare la seguente prova: creare un file col nome default.htm e di impostare il colore di sfondo nero, il colore del testo bianco (nomi dei colori in inglese), distanza dal bordo destro "50", inibire l'utilizzo del tasto destro del mouse e nascondere le barre di scorrimento solo se non necessarie.
Dalla prossima lezione ci renderemo conto al 100% della validità di questo esempio.

Inserimento di elementi di testo HTML

Al suo principio l'Html era utilizzato, causa le scarse confronto alle odierne tecnologie, come sistema di scambio di informazioni testuali.
Nonostante le appena citate "evoluzioni della specie", un'eredità che ci viene lasciata è quella di poter utilizzare elementi di testo. Possiamo considerare tre diversi gruppi di elementi di testo:
1. Titoli
2. Paragrafi
3. Elenchi
Tutti con diverse sfaccettature e differenze tra loro e nell'ambito degli stessi.

Inserimento di Titoli

Abbiamo 5 livelli di titoli, tutti definibili allo stesso modo, l'unica differenza che intercorre tra loro è la dimensione del carattere, 1 più grande in assoluto a 5 più piccolo in assoluto.
Vediamo un esempio:

<h1>Titolo di primo livello</h1>

<h2>Titolo di secondo livello</h2>

<h3>Titolo di terzo livello</h3>

<h4>Titolo di quarto livello</h4>

<h5>Titolo di quinto livello</h5>

Nota: gli esempi forniti nella parte iniziale di questo manuale sono solo di natura didattica e privi di uno sbocco pratico, più avanti, acquisite le nozioni più importanti, gli esempi che ci si troverà ad implementare troveranno applicabilità e concretezza.
Ci troviamo di fronte ad un Tag non vuoto, cioè che richiede la chiusura dello stesso, cioè ad <h1> corrisponde </h1> e tutto quello che vi si trova in mezzo farà parte del titolo di primo livello (in questo caso) di cui sopra.
Un Tag chiuso crea un'interruzione di riga, ovvero manderà a capo un prossimo elemento Html.
C'è poi da dire che, e questo vale per tutti gli elementi Html di questo tipo, non c'è differenza tra

<h1>Titolo di primo livello</h1>

 <h1> Titolo di primo livello </h1>

è a libera discrezione dello sviluppatore indentare (formattare, giustificare, scrivere come vi pare) il codice, purchè risulti chiaro e leggibile., pronto quindi ad essere agevolmente corretto o modificato.

Inserimento di Paragrafi

Nello stesso modo in cui si lavora per i titoli è possibile lavorare per i paragrafi, utilizzando il Tag <p> e </p>.
Vediamo un esempio:

<p>

Questo è un paragrafo ... ... ...

</p>

Per questo Tag consiglio l'indentatura del tipo dell'esempio presentato, cioè mandando a capo il Tag di apertura, il testo, poi il Tag di chiusura, dato che si presume che un paragrafo sia abbastanza lungo da far risultare più comoda la sua stesura in questo modo.
Per quanto riguarda il ritorno a capo sulla pagina, il browser manda automaticamente a capo il testo appena finisce lo spazio a disposizione, ovvero alla fine della pagina Hrml fisica.
Si provi a sostituire nella pagina di esempio il testo di esempio con un passo della Divina Commedia, una barzelletta o comunque un testo abbastanza lungo, scrivendolo nel codice su di una sola riga, e poi a verificarne il risultato.

Inserimento di elenchi puntati e numerati

E' possibile creare elenchi e liste ordinate, come in un normale word processor, iniziamo a vedere come si crea un elenco puntato e su quali caratteristiche possiamo lavorare:

<ul>

  <li>Prima voce dell'elenco puntato</li>

  <li>Seconda voce dell'elenco puntato</li>

  <li>Terza voce dell'elenco puntato</li>

</ul>

La chiusura del Tag <li> è opzionale, ne è tuttavia, per una questione di correttezza sintattica, consigliato l'utilizzo.
Possiamo agire sul puntatore dell'elenco modificandone l'aspetto, utilizzando l'attributo type nel Tag ul: per default il suo valore è disc che può essere modificato in circle (cerchio vuoto) o square (quadrato pieno):

<ul type="circle">

  <li>Prima voce dell'elenco puntato</li>

  <li>Seconda voce dell'elenco puntato</li>

  <li>Terza voce dell'elenco puntato</li>

</ul>

<ul type="square">

  <li>Prima voce dell'elenco puntato</li>

  <li>Seconda voce dell'elenco puntato</li>

  <li>Terza voce dell'elenco puntato</li>

</ul>

E' possibile nidificare gli elenchi puntati ed ottenere un effetto grafico e funzionale ad alto livello:

<ul>

  <li>Prima voce dell'elenco puntato</li>

    <ul>

      <li>Prima sottovoce dell'elenco puntato</li>

      <li>Seconda sottovoce dell'elenco puntato</li>

      <li>Terza sottovoce dell'elenco puntato</li>

    </ul>

  <li>Seconda voce dell'elenco puntato</li>

  <li>Terza voce dell'elenco puntato</li>

</ul>

Poco differenti dagli elenchi puntati sono gli elenchi numerati, la sintassi è la stessa e le regole di formattazione sono pressochè identiche, l'unico cambiamento è l'utilizzo del Tag <ol> invece di <ul>:

<ol>

  <li>Prima voce dell'elenco numerato</li>

  <li>Seconda voce dell'elenco numerato</li>

  <li>Terza voce dell'elenco numerato</li>

</ol>

Anche qui possiamo agire sul puntatore dell'elenco modificandone l'aspetto, utilizzando l'attributo type nel Tag ol: per default il suo valore è 1 che può essere modificato in a (elenco alfabetico in minuscolo), A (elenco alfabetico in maiuscolo) ed I (elenco con numeri romani):

<ol type="a">

  <li>Prima voce dell'elenco numerato</li>

  <li>Seconda voce dell'elenco numerato</li>

  <li>Terza voce dell'elenco numerato</li>

</ol>

<ol type="A">

  <li>Prima voce dell'elenco numerato</li>

  <li>Seconda voce dell'elenco numerato</li>

  <li>Terza voce dell'elenco numerato</li>

</ol>

<ol type="I">

  <li>Prima voce dell'elenco numerato</li>

  <li>Seconda voce dell'elenco numerato</li>

  <li>Terza voce dell'elenco numerato</li>

</ol>

Possiamo stabilire l'inizio dell'elenco numerato, o quel che sia, utilizzando l'attributo start nel Tag ol, possiamo quindi, ad esempio, stabilire di far partire un elenco numerato da 5:

<ol start="5">

  <li>Quinta voce dell'elenco numerato</li>

  <li>Sesta voce dell'elenco numerato</li>

  <li>Settima voce dell'elenco numerato</li>

</ol>

Altri elementi di testo

Non sono finiti gli elementi di testo che troviamo in Html, esamineremo ora i più usati:
<tt>
<address>
<cite>
<div>
<span>
Si tratta di Tag che prevedono una chiusura.
Vediamo un esempio globale con spiegazione inclusa:

<tt>Testo a spaziatura fissa, non fa differenza

tra lettere di dimensioni diverse come la "m" o la "l"</tt>

<address>Usato per un indirizzo o per una firma</address>

<cite>Usato per una citazione, include il testo in corsivo</cite>

<div>Usato per i fogli di stile Css</div>

<span>Usato per i fogli di stile Css, non prevede ritorno a capo</span>

Nella prossima lezione vedremo tutti i metodi per dare un'estetica al testo e tutti i trucchi per ottenere, con pochi comandi, una formattazione ed una visualizzazione corretta dello stesso.

Formattazione del testo

Nella lezione scorsa abbiamo visto come inserire elementi di testo Html in una pagina Web e ci siamo potuti accorgerci di alcune cose: il colore del testo è impostato per default in nero, il font (carattere) è il Times New Roman, l'allineamento è a sinistra ed ha una certa dimensione.

Colore, dimensione e tipi di carattere per il testo

Vediamo ora come formattare il testo e modificare queste impostazioni di default del browser; per agire sul colore, dimensione e carattere utilizziamo il Tag <font> e </font> ed utilizziamo tre attributi, color (colore), size (dimensione) e face (carattere).
Proviamo a formattare un testo qualsiasi, impostando il colore rosso, una dimensione inferiore a quella di default ed il Verdana come carattere:

<p>

   <font color="Red" size="3" face="Verdana">

      Testo formattato!

   </font>

</p>

Nota: nessuno dei tre attributi è obbligatorio, è possibile decidere ad esempio di cambiare solo il colore, solo il carattere e cosi via.
Impostiamo il font in apertura all'inizio del testo che vogliamo formattare il quella maniera e lo chiudiamo alla fine.
I caratteri, o font, sono dei file con estensione .ttf (True Type Font) che si trovano sul sistema operativo, su Windows '98 nel percorso C:\WINDOWS\Fonts, su Windows 2000 e Windows NT nel percorso C:\WINNT\Fonts, che è una directory di sistema; tengo a puntualizzare questo perchè, se decidessimo di utilizzare un font particolare per una nostra pagina, si corre il rischio che un utente che non ha quel font installato sul proprio PC, non potrà leggerlo e di conseguenza perderebbe parte del senso del sito.
I font più usati e di sicuro presenti su tutti i sistemi, che sono poi quelli che normalmente troviamo sulle pagine Web, sono:
Arial
Arial Narrow
Arial Black
Tahoma
Verdana
Sans Serif
Times New Roman
La categoria Sans Serif indica tutti i caratteri senza grazie, ovvero senza particolari sfumature di stile, di quelli elencati fanno tutti parte di questa categoria, meno il Times New Roman.
All'interno di un Tag <font face="[carattere]"> possiamo inserire più font (intesi come caratteri), separandoli da una virgola e da uno spazio (lo spazio è opzionale), in modo che, in mancanza di uno, troviamo immediatamente il successivo, e cosi via; si consiglia di non inserirne più di tre o quattro:

<font face="Verdana, Tahoma, Sans Serif">

ovvero, "cerca il Verdana, se non lo trovi cerca il Tahoma, se non lo trovi cerca il primo carattere senza grazie ed usa quello".
La dimensione del testo è impostata per default a 3 e possiamo modificarla impostando il size da 1 a 7; un testo con dimensione del carattere impostata a 7 è più grande di un titolo di primo livello <h1>.
Nota: per quanto riguarda il colore, abbiamo ter diversi modi di definirlo, con nomi di colori (in inglese), con Codici Esadecimali e con Codici RGB. Visualizza la tabella dei colori.

Allineamento del testo sulla pagina

Per allineare un testo sulla pagina utilizziamo l'attributo align per tutti gli elementi di testo, i cui valori possono essere left (di default), center e right: quindi <p align="center"> allineerà un testo al centro della pagina.
Si implementi questo esempio in un file già creato per gli esempi scorsi.
Esiste poi il Tag <center> e </center> per l'allineamento al centro di un elemento, a cui però viene preferito l'utilizzo di align.

Grassetto, corsivo e caratteri sottolineati

Possiamo definire lo stile del testo utilizzando il grassetto, il corsivo ed il sottolineato, rispettivamente con i Tag <b> (bold), <i> (italic) e <u> (underline).
Vediamo un esempio:

<p><b>Testo in grassetto</b></p>

<p><i>Testo in corsivo</i></p>

<p><u>Testo sottolineato</u></p>

Interruzione di riga e caratteri speciali Possiamo creare un'interruzione di riga con l'utilizzo del Tag <br> (break), a tanti break corrispondono tanti ritorni a capo:

<p>

   Questo testo andrà<br>

   a capo!

</p>

Parliamo ora dei caratteri speciali: si tratta di un tipo di simbologia che ci permette di scrivere caratteri che normalmente non saremmo in grado scrivere col proprio simbolo, ad esempio immaginiamo di voler scrivere su di una pagina un Tag Html... normalmente il browser lo interpreta come Tag e lo esegue, ma con l'utilizzo di caratteri speciali questo diventa possibile.
Riporto alcuni esempi:
  spazio vuoto ed unificatore
© ©
® ®
< <
> >
» »
« «
Nota: naturalmente questo elenco è incompleto, i caratteri speciali sono moltissimi.
Mi vorrei soffermare per un momento sullo spazio unificatore; il simbolo   provoca uno spazio bianco, che normalmente otteniamo digitandolo con la barra spaziatrice della tastiera, ma se ne volessimo ottenere due o più? con la tastiera non è possibile, quindi, inserendo tra due lettere o parole più spazi unificatori, si otterrà una spaziatura maggiore:

<p>C&nbsp;&nbsp;I&nbsp;&nbsp;A&nbsp;&nbsp;O</p>

In più, due lettere o parole con in mezzo uno spazio unificatore, non finiranno mai per andare a capo se si trovano a fine pagina, ad esempio, le parole Hello World cosi scritte non andranno mai a capo.

Inserimento di immagini

Una delle maggiori possibilità offerta dall'Html per rendere una pagina maggiormente professionale, o semplicemente più esplicativa, è l'inserimento di immagini, mediante il Tag vuoto <img>, ricordo che un Tag è vuoto quando non ha la relativa chiusura, in questo caso NON utilizzeremo qualcosa tipo </img>.
Per inserire fisicamente l'immagine utilizziamo l'attributo src (source) passandogli il nome (o percorso) dell'immagine con relativa estensione (ad esempio .jpg).
Prima di fornire qualche esempio e di analizzare tutti gli attributi di questo Tag è necessario chiarire quali sono i tipi di file immagine utilizzabili sul Web:
.jpg - formato a più di 16 milioni di colori, consigliato solo per fotografie che necessitino di una certa nitidità
.gif - più utilizzato sul Web leggero a 256 colori, questi file possono essere anche animati *
.png - simile al precedente, è un nuovo formato definibile come un potenziamento dei .gif
.bmp - valido ma sconsigliato, causa il suo "peso" rallenterebbe notevolmente i tempi di caricamento di una pagina
* I file .gif, come detto, possono anche essere animati, nel senso che è possibile utilizzare programmi che assemblano una serie di file .gif in più fotogrammi che, una volta uniti in un unico file, presentano l'animazione, per spratichirsi in questo ambito.
Vediamo ora un semplice esempio di inserimento di un file immagine su di una pagina Web:

<img src="immagine.gif">

Analizziamo i suoi principali attributi:

border
Consente di impostare un bordo all'immagine, oppure di eliminarlo nel caso in cui l'immagine sia un link (lezione successiva)

<img src="immagine.gif" border="1">

Il suo valore di default, nel caso non sia un link, è zero (0).
bordercolor
Imposta il colore del bordo dell'immagine

<img src="immagine.gif" border="1" bordercolor="#800000">

Per default è nero.
alt
Testo alternativo, utilissimo nel caso in cui l'immagine, ad esempio per un malfunzionamento momentaneo del server Web, l'immagine non venga riportata sulla pagina, fornisce quindi un testo all'interno dell'immagine non trovata, e comunque, al passaggio del mouse sull'immagine, appare un'etichetta gialla contenente il testo descrittivo associato:

<img src="immagine.gif" alt="Testo alternativo">

width
Imposta la larghezza dell'immagine (se omesso l'immagine prenderà le sue dimensioni di default)

<img src="immagine.gif" width="150">

height
Imposta l'altezza dell'immagine (se omesso l'immagine prenderà le sue dimensioni di default)

<img src="immagine.gif" height="150">

vspace
Imposta un distanziamento in verticale tra l'immagine e gli altri elementi Html presenti sopra e sotto l'immagine stessa

<img src="immagine.gif" vspace="30">

hspace
Come sopra, in orizzontale

<img src="immagine.gif" hspace="30">

I link

La principale caratteristica dell'Html è quella di permettere al navigatore di muoversi agevolmente tra pagina e pagina mediante l'utilizzo di collegamenti ipertestuali, tecnicamente più noti come link.
I link sono generati da un Tag detto ancora o area identificato sintatticamente come <a>, il cui unico attributo obbligatori è href (riferimento ipertestuale) che, come il source per le immagini, identifica il file che deve raggiungere, ovvero la URL di destinazione del link.
Come già detto nell'introduzione al manuale, esistono URL relative ed assolute in cui è possibile specificare rispettivamente solo il nome del file o una parte del percorso, oppure l'intero percorso di un file, a partire dalla root fino alla sua identificazione nella cartella in cui risiede.
Utilizziamo questo concetto per fornire due esempi pratici di codice:

<a href="index.htm">Esempio di URL relativo</a>

<a href="http://www.server.it/index.htm">

Esempio di URL assoluto

</a>

Possiamo quindi stabilire che per creare un link dobbiamo inserire il testo che ci interessa che diventi un link tra i Tag ancora.
Il Tag <a> è dotato di alcuni importanti attributi, analizziamoli singolarmente:
target
Serve a specificare se il file di destinazione del link si deve aprire nella stessa finestra, in una nuova istanza del browser (una nuova finestra a se stante) o in un frameset (di questo parleremo più avanti nel corso del manuale).
Esistono alcuni valori predefiniti, _blank apre il file in una nuova finestra, _self è stabilito per default ed apre il link nella stessa finestra, _parent è _top servono a lavorare con i frame, ne parleremo quindi più avanti.
Vediamo un esempio:

<a href="index.htm" target="_blank">Clicca qui</a>

title
Serve a definire un testo di etichetta per il link, ovvero passandoci sopra apparirà una descrizione in un'etichetta, nello stesso modo in cui accade per alt nelle immagini:

<a href="index.htm" title="Descrizione del link ... ... ...">

Clicca qui</a>

name
Serve a creare link ad uno specifico punto di una pagina, sia che si tratti della pagina corrente sia di un'altra pagina, è sufficiente assegnare una nome ad un'ancora ed utilizzare il carattere cancelletto (#) nel link che dovrà raggiungere quel punto della pagina seguito dal nome assegnato al primo link (che non si comporterà in questo caso da tale).
Un esempio servirà a chiarire le idee, creiamo una pagina con un testo qualsiasi contrassegnato da un marcatore <a> con un nome, forziamo la discesa della pagina con una serie di a capo (aggiungetene anche di più di quelli in esempio) ed alla fine della pagina creiamo un link che punti al punto che desideriamo, includendo nell'href #nome_del_primo_link

<a name="esempio">Cliccando sul link arriverai qui</a>

<br><br><br>

<br><br><br>

<br><br><br>

<br><br><br>

<br><br><br>

<br><br><br>

<br><br><br>

<br><br><br>

<a href="#esempio">Clicca qui</a>

Possiamo assegnare un link solo ad un testo o ad un'immagine, racchiudendola tra i Tag area, a questo punto ci torna utile impostare il bordo dell'immagine a zero:

<a href="index.htm"><img src="immagine.gif" border="0"></a>

Le tabelle in HTML

La formattazione di una pagina Html trae il suo massimo beneficio tramite l'utilizzo delle tabelle, un insieme di celle sulla falsa riga del noto programma Microsoft Excel, questa tecnica permette di creare template anche piuttosto complessi.
Per non girare intorno alle parole facciamoci subito un'idea di cosa sia una tabella, copiate dogmaticamente questo codice all'interno di una pagina Html:

<table align="center" width="300" border="1">

   <tr>

      <td align="center" width="150">Cella # 1</td>

      <td align="center" width="150">Cella # 2</td>

   </tr>

   <tr>

      <td align="center" width="150">Cella # 3</td>

      <td align="center" width="150">Cella # 4</td>

   </tr>

</table>

Questo è quanto ne risulterà:

Cella # 1	Cella # 2
Cella # 3	Cella # 4

Una tabella viene generata mediante l'utilizzo di una serie di Tag, il principale dei quali è <table> con relativa chiusura finale </table>, gli altri sono Tag "accessori", nel senso che nulla significherebbero se non inclusi in una serie di istruzioni <table> e </table>, si tratta dei Tag <tr> e </tr>, e <td> che ha come chiusura opzionale (ma consigliata) </td>.
Iniziamo ad esaminare <table>, i suoi possibili attributi sono:
bgcolor - stabilisce il colore di sfondo della tabella, per default è trasparente, si adatta cioè al colore di sfondo della pagina
width - stabilisce la larghezza della tabella, è possibile esprimerla sia in con numeri interi che in percentuale (%)
height - stabilisce l'altezza, poco utilizzato in quanto la tabella sarà alta tot in base al contenuto
align - permette di allineare la tabella al centro, a sinistra (per default) oppure a destra rispetto alla finestra del browser
border - stabilisce il bordo della tabella, per default è zero, è quindi, in caso, inutile stabilirlo
bordercolor - stabilisce il colore del bordo della tabella, per default è grigio
cellpadding - stabilisce la distanza tra i lati interni di una cella e gli elementi Html contenuti in essa
cellspacing - stabilisce la distanza tra le celle
Abbiamo già incontrato i primi sei attributi elencati già in precedenza nel corso del manuale, essendo essi adattabili ad altri elementi Html, mentre gli ultimi due, cellpadding e cellspacing, sono proprietari delle tabelle e si utilizzano esclusivamente all'interno del Tag <table>, proviamo a comprenderne meglio il significato aggiungendoli al codice precedente assegnandogli valori differenti a seconda dei casi:

<table align="center" width="300" border="1"

                       cellpadding="20" cellspacing="10">

   <tr>

      <td align="center" width="150">Cella # 1</td>

      <td align="center" width="150">Cella # 2</td>

   </tr>

   <tr>

      <td align="center" width="150">Cella # 3</td>

      <td align="center" width="150">Cella # 4</td>

   </tr>

</table>

Ecco il risultato:

Cella # 1	Cella # 2
Cella # 3	Cella # 4

Potremmo invece impostare a zero (0) entrambi i valori ottenendo un effetto totalmente diverso dal precedente ed altrettanto utile a seconda delle occasioni:

Cella # 1	Cella # 2
Cella # 3	Cella # 4

L'utilizzo delle tabelle nel Web è davvero massiccio, basta consultare il codice sorgente di questa pagina per farsi un'idea di quante occorrenze dei Tag <table>, <tr> e <td> sono prensenti, consiglio dunque di prestare particolare attenzione a questa lezione, lo scopo sarà, oltre a quello di comprendere la struttura e la tecnica di creazione di una tabella, anche quello di imparare ad utilizzarle al meglio per la costruzione di pagine anche di una certa complessità.
Il codice presentato in questi esempi, già nella sua formattazione mostra una chiara gerarchia che intercorre tra i Tag utilizzati, possiamo dunque stabilire che ogni <tr> permette di definire una serie di celle <td> in orizzontale, per impostare una serie di celle in verticale sarà dunque necessario assegnare una singole cella <td> per ogni coppia di istruzioni <tr> e </tr>.
Impostiamo una tabella con tre celle in orizzontale, utilizziamo dunque questo codice:

<table align="center" width="300" border="1">

   <tr>

      <td align="center" width="150">Cella # 1</td>

      <td align="center" width="150">Cella # 2</td>

   </tr>

   <tr>

      <td align="center" width="150">Cella # 3</td>

      <td align="center" width="150">Cella # 4</td>

   </tr>

</table>

il risultato

Cella # 1

Cella # 2

Cella # 3

mentre per impostarle in verticale il codice sarà:

<table align="center" border="1">

   <tr>

      <td>Cella # 1</td>

   </tr>

   <tr>

      <td>Cella # 2</td>

   </tr>

   <tr>

      <td>Cella # 3</td>

   </tr>

</table>

il risultato

Cella # 1

Cella # 2

Cella # 3

Il Tag <tr> non è dotato di particolari attributi, supponiamo di avere una tabella, magari di una certa complessità, che vogliamo colorare impostando il colore cella per cella per differenziare parti dedicate ad un argomento piuttosto che ad un altro, quindi non agiremo direttamente sul colore di tutta la tabella, bensì su singola cella, ma ipotizziamo di aver anche bisogno che una serie di celle vicine siano di uno stesso colore, per cui il codice risulterebbe

<table align="center" border="1">

   <tr>

      <td bgcolor="#FF0000">Cella # 1</td>

      <td bgcolor="#FF0000">Cella # 2</td>

      <td bgcolor="#FF0000">Cella # 3</td>

   </tr>

</table>

è dunque semplice intuire come possa tornare più comodo "colorare" direttamente il <tr>

<table align="center" border="1">

   <tr bgcolor="#FF0000">

      <td>Cella # 1</td>

      <td>Cella # 2</td>

      <td>Cella # 3</td>

   </tr>

</table>

Le tabelle in HTML

Il fulcro della gestione di una tabella è senza dubbio l'elemento "cella" <td> che presenta gli stessi attributi del Tag <table> (ad eccezione di cellpadding e cellspacing), in più ci sono quattro altri attributi, tre dei quali proprietari di questo Tag, esaminiamoli:
valign - vertical align - serve ad impostare l'allineamento verticale del contenuto di una cella

Ipotizziamo di avere tre celle in orizzontale e che il contenuto di una di queste celle sia maggiore (in altezza) del contenuto delle altre, il contenuto di queste si posizionerebbe a metà cella in verticale, effetto che può risultare tremendamente scomodo ed antiestetico in taluni casi, ad esempio in un sito impostato integralmente in tabelle, vediamo un esempio:

<table align="center" border="1">

   <tr>

      <td>Cella # 1<br>...<br>...<br>...</td>

      <td>Cella # 2</td>

      <td>Cella # 3</td>

   </tr>

</table>

il risultato

Cella # 1
...
...
...

Cella # 2

Cella # 3

Vediamo dunque come impostare il contenuto di una cella sempre al suo inizio in senso verticale:

<table align="center" border="1">

   <tr>

      <td valign="top">Cella # 1<br>...<br>...<br>...</td>

      <td valign="top">Cella # 2</td>

      <td valign="top">Cella # 3</td>

   </tr>

</table>

il risultato

Cella # 1
...
...
...

Cella # 2

Cella # 3

I possibili valori di valign sono middle (centrato, di default), top (inizio cella) e bottom (fine cella).
Gli altri tre attributi del Tag <td> accennati in precedenza sono:
nowrap - impedisce al contenuto di una cella di andare a capo

<td nowrap>Questo testo non andrà a capo</td>

colspan - unisce due o più celle in orizzontale
rowspan - unisce due o più celle in verticale.
Per sua natura una cella DEVE formare un quadrilatero, non si può pensare di creare quindi una tabella composta da un numero dispari di celle, o meglio, con ad esempio una sola cella nella parte superiore con due celle in quella inferiore... tutte e tre della stessa grandezza! il codice proposto di sotto contiene dunque un ERRORE:

<table align="center" border="1">

   <tr>

      <td>Cella # 1</td>

   </tr>

   <tr>

      <td>Cella # 2</td>

      <td>Cella # 3</td>

   </tr>

</table>

questo è quanto ne risulterebbe:

Cella # 1
Cella # 2	Cella # 3

Viene comunque generato un quadrilatero con un pezzo erroneamente mancante, è necessario creare una struttura con un numero pari di celle... ma allora non è possibile in nessun caso avere una tabella con un numero dispari di celle?
Si, è possibile.
Ci torna in aiuto l'attributo colspan che viene incluso nella prima cella, il suo impiego è atto a creare virtualmente due celle e ad unirle, vediamo il codice corretto con il relativo risultato finale:

<table align="center" border="1">

   <tr>

      <td colspan="2">Cella # 1</td>

   </tr>

   <tr>

      <td>Cella # 2</td>

      <td>Cella # 3</td>

   </tr>

</table>

Cella # 1
Cella # 2	Cella # 3

Il valore numerico assegnato a colspan è identificativo per il numero di celle sottostanti, se fossero state cinque celle sotto la cella "unica", il suo valore sarebbe stato colspan="5"

Cella unica (colspan="5")
Cella # 1	Cella # 2	Cella # 3	Cella # 4	Cella # 5

Allo stesso modo si comporta rowspan, per però unire celle in verticale, vediamo un esempio:

<table align="center" border="1">

   <tr>

      <td rowspan="2">Cella # 1</td>

      <td>Cella # 2</td>

  </tr>

  <tr>

      <td>Cella # 3</td>

  </tr>

</table>

il risultato:

Cella # 1	Cella # 2
	Cella # 3

Il meccanismo in questo caso è leggermente più contorto e non immediato come il precedente, il mio consiglio è quello di effettuare centinaia prove, specialmente con quest'ultimo metodo di formattazione delle tabelle che, a dire il vero, è il meno utilizzato.

Formattazione di un'intera pagina in tabelle

L'utilizzo delle tabelle, come predetto, è molto diffuso tra i designer per la realizzazione delle strutture delle pagine, in questo scorcio della lezione riprendiamo in considerazione uno degli esempi finora esaminati ed immaginiamolo come struttura di una pagina:

LOGO
MENU Link Link Link Link Link	Corpo della pagina, quest'area sarà dedicata agli effettivi contenuti della pagina, è stato utilizzato uno dei codici già presentati ed è stato lievemente ritoccato... ... vi lascio come esercizio il compito di ricostruirlo e migliorarlo fino a raggiungere gli effetti desiderati!

Ultimi ritocchi...

Esistono altri elementi facenti parte della famiglia delle tabelle Html, esaminiamoli:
<tbody> - definisce il corpo di una tabella, ad esempio

<table align="center" border="1">

   <tbody>

      <tr>

         <td>Cella # 1</td>

         <td>Cella # 2</td>

         <td>Cella # 3</td>

      </tr>

   </tbody>

</table>

<thead> - si comporta come il <tr>, utilizzato per definire aree di intestazione
<th> - si comporta come il <td>, utilizzato per definire le singole intestazioni di una cella evidenziando il testo.
Un esempio:

<table align="center" border="1">

   <thead>

      <th>Intestazione # 1</th>

      <th>Intestazione # 2</th>

   </thead>

   <tr>

      <td>Cella # 1 ... ... ...</td>

      <td>Cella # 2 ... ... ...</td>

   </tr>

</table>

il risultato:

Intestazione # 1	Intestazione # 2
Cella # 1 ... ... ...	Cella # 2 ... ... ...

I Frame

Comporre una pagina in frame

Cosa sono i frame; la struttura di un frameset; i frameset annidati

Attributi dei frames per la visualizzazione

Gli attributi: scrolling, noresize, frameborder, marginheight e marginwidth

I link in un frameset e il tag noframes

ICome gestire i collegamenti all'interno di un frameset; il tag NOFRAME

L'iframe

Un particolare tipo di frame: gli iframe o inline frame

Vantaggi e svantaggi dei frames

Quali motivi per usare o non usare una struttura a Frame

Impaginare a livelli con i CSS

Un altro metodo di impaginazione: i livelli e i CSS

Comporre una pagina in frame

I frame (“riquadri”) comparvero per la prima volta con Netscape Navigator 2: si tratta della possibilità di suddividere una medesima finestra del browser in vari riquadri indipendenti.
Questa soluzione all’epoca si rivelò un successo, dal momento che permetteva notevoli vantaggi:

Fino a qualche tempo fa la velocità di navigazione era ben poca cosa, e si navigava con modem analogici molto lenti (anche da 14.4 kbs): i frame hanno l’indubbio vantaggio di non costringere a ricaricare tutta quanta la pagina, accelerando così la navigazione dell’utente all’interno di un sito web. D’altro canto il fatto che solo una parte del contenuto sia ricaricata fa risparmiare banda anche dal punto di vista del server che deve erogare le pagine
Per quel che riguarda i webmaster, i frame hanno la caratteristica di utilizzare una struttura che consente di non ripetere le parti comuni nelle varie pagine di un sito, dal momento che il contenuto della pagina (per sua natura) è organizzato “a zone”
Il fatto di poter mantenere fisso su un lato del monitor il menu di navigazione e far scorrere sull’altro lato il contenuto piace a molti utenti, soprattutto quando la risoluzione del monitor è bassa (800 x 600 o 640x480, magari su un monitor da 15’’)

Tutte queste caratteristiche hanno causato un vero e proprio boom dei frames, tanto che subito dopo l’invenzione della Netscape, anche Microsoft si trovò a “copiare” la possibilità di strutturare le pagine in questo modo; in seguito (con l’HTML 4) i frames divennero una specifica ufficiale del W3C.

Struttura di un frameset

Per utilizzare i frame, è necessario creare una pagina che contenga la dichiarazione della struttura che vogliamo utilizzare. Vediamo subito il codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML.it</title>
</head>

<frameset rows="50%,50%" cols="50%, 50%">
<frame src="prima.html">
<frame src="seconda.html">
<frame src="terza.html">
<frame src="quarta.html">

<noframes>
  <p>Qui può essere indicato il link a
   <a href="senzaFrame.html"> una versione del sito</a>
   che non utilizzi un layout a frame
  </p>
</noframes>

</frameset>
</html>
Come vi sarete accorti, rispetto alle pagine che abbiamo studiato finora cambiano alcune cose. In primo luogo cambia il doctype, cioè il tipo di documento di riferimento.
All’inizio del documento al posto di questa riga:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
compare ora infatti questa dicitura:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">
stiamo indicando semplicemente al browser che facciamo riferimento alle specifiche che servono per regolare il comportamento dei frame.
Avrete notato inoltre che scompare il tag <body> e al suo posto troviamo il tag <frameset> (“set di riquadri”), che ci permette di indicare come devono essere indicati i frames all’interno della pagina
Il tag <frameset> ha sostanzialmente due importanti attributi: rows e cols:

rows permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso, significa che ci troviamo di fronte a una struttura a colonne . Ad esempio:

cols permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso significa che ci troviamo di fronte una struttura a righe

<frameset rows="33%, 33%,*">
Nell’indicare la grandezza di ciascuna riga (o colonna) possiamo poi lasciare che una o più righe si auto-dimensionino, occupando tutto lo spazio che rimane, in questo caso utilizzeremo l’asterisco (“wild card”); normalmente invece potremo esprimere la grandezza dei riquadri secondo uno dei seguenti sistemi di misura (da scegliere a nostra discrezione):

dimensione fissa

Questa sintassi crea un frameset di 2 righe con 3 colonne ciascuna, per un totale di 6 riquadri:
<frameset rows="150,*" cols="100,200,*">
L’altezza della 1a riga è di 150 pixel, mentre la seconda si adatta al resto della pagina. Le tre colonne sono larghe rispettivamente: 100 pixel, 200 pixel, e la terza colonna si adatta al resto della pagina

percentuale

Questa sintassi crea un frameset che si adatta alla risoluzione. La grandezza dei riquadri è espressa in percentuale:
<frameset rows="20%,80%" cols="25%,25%,50%">
come si può vedere la prima riga occupa il 20% dell’altezza, la seconda il rimanente 80%.
Le 3 colonne si dividono la larghezza: la prima colonna occupa il 25%, la seconda nuovamente il 25%, la terza il 50% dello spazio

proporzionale

In questo caso la ripartizione è proporzionale:
<frameset rows="1*,3*" cols="3*,2*,1*">

per ciò che riguarda le righe: l’altezza viene suddivisa in 4 parti (1+3); la prima riga ne occupa 1 parte e la seconda riga ne occupa 3
per ciò che riguarda le colonne: l’altezza viene suddivisa in 6 parti (3+2+1); la prima colonna occupa 3 parti, la seconda riga ne occupa 2 e la terza 1

Una volta creata la nostra griglia con il tag <frameset>, incrociando le righe e le colonne, dobbiamo specificare dove si trova il file di origine di ciascun frame. Possiamo farlo con la sintassi:
<frame src="prima.html">
come si può vedere l’origine di ciascun frame è un documento HTML standard (come quelli che abbiamo analizzato finora): avrà dunque la sua dichiarazione di documento, la sua <head> e il suo <body>.

Se le dimensioni del riquadro non sono sufficienti a mostrare il documento nella sua interezza, il frame avrà delle barre di scorrimento, a meno che non sia stato esplicitamente specificato il contrario negli attributi (che vedremo tra breve).
Per visualizzare il codice HTML di ciascun frame è sufficiente andare nel riquadro desiderato e poi digitare il tasto destro del mouse. Quindi:

Con Internet Explorer:
selezionare HTML
Con Mozilla:
selezionare this frame > view frame source

È possibile anche individuare un frame in modo più preciso, assegnandogli un nome:
<frame id=”primoRiquadro” name=”primoRiquadro” src="prima.html">
la sintassi corretta per dare un nome a un frame dovrebbe essere:
id=”primoRiquadro”
tuttavia per questioni di retro-compatibilità (con Netscape 4) è oramai entrato nell’uso utilizzare anche name=”primoRiquadro”.

Frameset annidati

È possibile annidare diversi frames l’uno dentro l’altro. In questo caso, al posto di uno dei tag <frame> è sufficiente includere le indicazioni del nuovo frameset. Così:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML.it</title>
</head>
<frameset rows="15%,70%,15%">
  <frame src="11.html">

   <frameset cols="25%,50%,25%">
    <frame src="21.html">
    <frame src="22.html">
    <frame src="23.html">
   </frameset>

  <frame src="12.html">

<noframes>
<p>Qui può essere indicato il link a <a href="senzaFrame.html"> una versione del sito</a> che non
utilizzi un layout a frame</p> </noframes>
</frameset>
</html>

Attributi del frameset

Il tag frameset non ha (secondo le specifiche ufficiali) attributi per la visualizzazione. Alcuni attributi tuttavia sono entrati nell’uso e sono correttamente supportati dai browser attuali:

<frameset frameborder="no" cols="25%,75%">	L’attributo frameborder (di default impostato a “yes”) permette di specificare se nel frameset devono essere presenti i bordi. L'esempio è qui
<frameset framespacing="20" border=”20” cols="25%,75%">	framespacing funziona solo con Internet Explorer e permette di impostare lo spazio tra un frame e l’altro. Di fatto equivale all’attributo border, che permette di specificare lo spessore dei bordi in pixel. Per mantenere la compatibilità con Internet Explorer 4 (che non legge l’attributo border), di solito si specificano sia il framespacing, sia il border. L'esempio è qui
<frameset border="10" framespacing="10" bordercolor=”#FF0000” cols="25%,75%">	bordercolor permette di specificare il colore dei bordi del frameset. L'esempio è qui

Attributi dei frame

A differenza degli attributi del tag frameset, che sono dovuti alla convenzione, i seguenti attributi del tag frame sono invece descritti nelle specifiche del W3C e permettono di modificare l’aspetto dei riquadri e il modo in cui l’utente può interagire con essi:

<frame src=”prima.html” scrolling=”no”> <frame src=”prima.html” scrolling=”auto”>	L’attributo scrolling (di default impostato a “yes”) indica se si vuol consentire all’utente di poter scorrere il frame oppure no. Nel caso sia impostato a “no”, il frame non ha la barra di scorrimento anche nel caso in cui il contenuto della pagina HTML vado oltre la cornice, come si può vedere nell’esempio. L'esempioè qui scrolling può anche essere impostato ad “auto”. In questo caso la barra di scorrimento compare in automatico, ma solo se necessario
<frame src=”prima.html” scrolling=”no”> <frame src=”prima.html” scrolling=”no” noresize>	noresize impedisce al singolo frame di essere ridimensionato. L'esempio è qui Se usato in unione con scrolling=”no”,di fatto “blocca” il contenuto del frame. L'esempio è qui Un uso maldestro di questa tecnica potrebbe però impedire all'utente la corretta visualizzazione dei contenuti
<frame src=”prima.html” frameborder=”0”>	frameborder conesente di far apparire o meno i bordi del frame (i valori ammessi sono "0" e "1", ovvero "no" e "yes"). Se frameborder è impostato a “0” i bordi non sono visibili L'esempio è qui Attenzione però a come impostate i bordi nei vari frame, dal momento che i bordi di frame adiacenti non sempre vanno d’accordo(provate) Questo attributo permette di specificare un valore differente da quello impostato nel frameborder del <frameset>
<frame marginwidth="50" marginheight="50" src="prima.html">	marginheight e marginwidth permettono di impostare la distanza erticale (marginheigth) e orizzontale (marginwidth) ra i bordi del frame e il suo contenuto. L'esempio è qui

Approfondimenti

Ovviamente sarebbe meglio impostare i bordi e gli spazi tra i frame attraverso i CSS. Nella lezione della guida ai fogli di stile dedicata ai bordi con i CSS è spiegato come fare.

Il target dei link in un frameset

In una struttura a frames può apparire difficile caricare il contenuto di un link nella sezione appropriata. Grazie all'attributo target possiamo specificare qual'è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno:

<a href="paginaDaLinkare.html" target="nomeDelFrame">

come si può vedere nell'esempio.
Ci sono poi delle "parole chiave" che ci consentono di ricaricare i link in destinazioni predefinite:

Codice	Descrizione
target="_blank"	Apre il link in una nuova finestra, senza nome L'esempio è qui
target="_self"	Apre il link nel frame stesso (è così di default) L'esempio è qui
target="_parent"	Il documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore) L'esempio è qui Il comportamento di _parent è particolarmente evidente in una struttura annidata in cui alcune pagine HTML contengono a loro volta dei frameset, come nell'esempio: in questo caso viene caricato il contenuto del link nel frameset immediatamente precedente alla pagina del link.
target="_top"	Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame. L'esempio è qui (si noti la differenza con "_parent"). Più esattamente il documento viene carictao nella parte piùalta ("top") della struttura, ed è questo il motivoper cui il frameset stesso viene annullato e sostituito dal contenutodel link.

Può essere noioso specificare per tutti i link il target appropriato. Ci viene in aiuto allora il tag <base> che ci consente di specificare la destinazione dei tutti link in una sola volta. Il tag va inserito nella pagina contenente i link. Ad esempio:
<base target="_blank">
a questo indirizzo è possibile visualizzare l'esempio completo.
Abbiamo già incontrato il tag <base> per impostare un percorso predefinito di default. Ovviamente è possibile combinare i due attributi di <base>:
<base href="http://www.html.it" target="_blank">
Questa sintassi indica che l'indirizzo di base per i percorsi della pagina è http://www.html.it e che tutti i link vanno aperti in una nuova pagina.

Il tag noframes

All'interno della dichiarazione del <frameset> abbiamo sempre visto comparire l'elemento <noframes>: questo tag serviva per browser particolarmente obsoleti (come Mosaic 2) che non erano in grado di leggere e visualizzare una struttura frameset. In previsione di situazioni di questo genere è possibile inserire all'interno del tag <noframes> un contenuto appositamente studiato per questa eventualità, ad esempio l'avvertimento che il sito è strutturato a frame, o un contenuto alternativo, oppure una descrizione per i motori di ricerca (come vedremo tra breve).
La struttura è la seguente:

<frameset rows="50%,50%">

  <frame src="prima.html">

  <frame src="seconda.html">

  <noframes>

    <p>Qui può essere indicato il link a

    <a href="senzaFrame.html">una versione del sito</a>

    che non utilizzi un layout a frame, oppure un

    contenuto alternativo, o anche una descrizione

    per i motori di ricerca.</p>

  </noframes>

</frameset>

È importante capire una volta per tutte come funziona questo genere di tag, dal momento che un tipo di struttura di questo genere ricorre in diverse occasioni nell'HTML: il tag <noscript> e i contenuti alternativi nel caso dell'<iframe> utilizzano infatti gli stessi principi di funzionamento.
I browser obsoleti non sono in grado di interpretare né la struttura di un frameset, né tanto meno il <noframes>: non essendo un tag previsto nelle specifiche rilasciate all'epoca in cui questi browser sono stati costruiti, si tratta infatti di una sintassi del tutto oscura per loro.
Di tutto il codice in questione l'unica parte comprensibile a questo genere di browser è l'HTML standard compreso all'interno del <noframes>: e questo si limitano a leggere.
Sono invece i browser moderni che sanno di dover ignorare il <noframes>, dal momento che il suo contenuto non li riguarda.
C'è da dire che, se tutti i browser odierni sono in grado di interpretare correttamente la struttura di un frameset, viceversa sotto molti punti di vista i motori di ricerca sono paragonabili a browser obsoleti, e non è raro che un sito organizzato a frame sia inserito nell'indice dei motori di ricerca in maniera non corretta: per questo motivo alcuni di essi "catturano" il contenuto del <noframes> come descrizione di un sito.
Quindi per evitare messaggi di questo genere a seguito di una ricerca in rete:
Figura 1. Messaggio del motore di ricerca per pagine senza "noframes"

è bene utilizzare il tag noframes per indicare la descrizione del sito: in questo modo miglioriamo anche il posizionamento nei motori di ricerca. Ad esempio:

<frameset rows="50%,50%">

  <frame src="prima.html">

  <frame src="seconda.html">

  <noframes>

    <p>Su PRO.HTML.it - Approfondimenti sul Web Publishing e articoli per webmaster</p>

  </noframes>

</frameset>

“Iframe” significa “inline frame”: in qualsiasi momento in un documento che non utilizzi una struttura a frame è possibile creare un frame al volo grazie a questo tag.
Possiamo specificare la larghezza e l’altezza del tag, mentre gli attributi di visualizzazione sono gli stessi del tag <frame>: si tratta di una vera e propria finestra verso l’esterno all’interno di un documento ordinario.
Questo tag è correttamente supportato da tutti i browser moderni (Netscape 4 non lo supporta, ma questo browser oramai sta scomparendo). La sintassi è:
<iframe src="http://pro.html.it" width="300" height="300">
  Contenuto alternativo per i browser che non leggono gli iframe.
</iframe>
Come si può vedere tra l’apertura e la chiusura del tag è possibile specificare un contenuto alternativo per i browser che non siano in grado di leggere l’<iframe>: in realtà questi browser sono ciechi a questo tag (come abbiamo visto per il <noframes>) e dunque leggono direttamente il contenuto al suo interno. Sono invece i browser che supportano questa sintassi a ignorare volutamente quanto viene compreso tra apertura e chiusura del tag.
Anche in questo caso sarò opportuno utilizzare la possibilità di inserire un contenuto alternativo per migliorare il posizionamento nei motori di ricerca. Ad esempio:
<iframe src="http://pro.html.it" width="300" height="300">
  <p>Su <a href="http://pro.html.it">PRO.HTML.it</a> -
  Approfondimenti sul Web Publishing e articoli per webmaster</p>
</iframe>
Abbiamo già visto all’inizio delle lezioni sui frames quali sono stati alcuni dei motivi di successo dei frames. E cioè:

Dal punto di vista dell’utente: evitare di ricaricare le parti comuni
Dal punto di vista del webmaster: includere il layout comune in pochi files
Dal punto di vista dell’utente: mantenere in vista alcuni punti del layout

Tuttavia gli svantaggi che comporta un uso scorretto di un layout a frame sono superiori ai vantaggi che possono derivare dal loro utilizzo.
I motori di ricerca infatti navigano di link in link attraverso il web per catturare contenuti da indicizzare.
È frequente allora che una struttura a frame sia inserita all’interno di un motore di ricerca in modo errato: a volte viene catturato solo un menù (come in questo caso), altre volte compare soltanto la parte interna con il contenuto del frame e dunque viene perso ogni menu di navigazione (come in questo caso).
Per evitare problematiche di questo genere, è meglio evitare di utilizzare una struttura a frame; o nel caso in cui la si desideri utilizzare è bene prevedere sin da subito dei metodi che ricostruiscano il frameset, nel caso in cui sia catturata soltanto una pagina interna. È possibile farlo utilizzando JavaScript (un linguaggio di programmazione lato-client).
C’è anche da dire che oggi molti dei motivi che rendevano vantaggioso l’utilizzo dei frames sono venuti meno: la banda a disposizione si è ampliata, i CSS alleggeriscono la struttura dei siti e rendono possibile alcune soluzioni che prima erano difficili (come quella di mantenere un menu di navigazione sempre a portata di mano), e la gestione dei contenuti può essere semplificata utilizzando le inclusioni lato server.
Viceversa una struttura a frame risulta molto vantaggiosa nel caso in cui si utilizzino delle vere e proprie applicazioni che utilizzano internet (come le piattaforme di e-learning, la webmail, eventuali aree riservate del sito con accesso tramite login e password). In questo caso la suddivisione dei contenuti evita di sovraccaricare il server (dal momento che così vengono ri-caricati solo le parti strettamente necessari), semplifica la gestione, e quindi si rivela estremamente utile.
Abbiamo già visto due stili di impaginazione: le tabelle e i frame. Come accennato più volte all’interno del corso esiste una terza via: l’impaginazione tramite i fogli di stile (ovvero "CSS", cioè "Cascading Style Sheets", che significa "fogli di stile a cascata").
La sintassi dei CSS esula dall’argomento del corso presente, è importante tuttavia afferrare il concetto che un elemento può essere disposto all’interno della pagina, semplicemente specificando le sue coordinate, o indicando il modo in cui deve essere spostato rispetto agli elementi che lo circondano.
Nel caso dell’impaginazione tramite i fogli di stile abbiamo per lo più a che fare con i tag <span> e <div>, che possono essere accuratamente posizionati e visualizzati specificando ad esempio:

larghezza
altezza
distanza dall’alto
distanza da sinistra
colore o immagine di sfondo
colore, tipo e grandezza dei bordi
distanza tra il contenuto e il bordo (padding) e tra il bordo e l’esterno (margin)

Per “livello” (o “layer”) in HTML si intende appunto un <div> posizionato tramite i CSS all’interno della pagina.
La sintassi dei CSS è molto diversa da quella dell’HTML solito.
Ad esempio per posizionare la testata di HTML.it a 50 pixel dall’alto della pagina e 200 pixel da sinistra, con lo sfondo a righe, bordo nero, e una dimensione di 600 x 80 pixel di è necessario utilizzare questa sintassi.
Nella <head>:
<style type="text/css">
#logo {
   position:absolute;
   left:200;
   top:50;
   width:600px;
   height:80px;
   background-image: url(sfondo.gif);
   border: 1px solid #000000;
}
</style>
nel <body>:
<div id="logo">
  <img src="logo.gif" alt="HTML.it" title="HTML.it" width="224" height="69">
  <img src="logo1.gif" alt="HTML.it" title="HTML.it" width="59" height="70">
</div>
L’esempio completo si trova a questo indirizzo.
Il vantaggio di questa impostazione è quella di avere una pagina molto pulita: infatti il file HTML è composto soltanto dai <div> (o dagli span) con i contenuti, mentre lo stile di visualizzazione dei contenuti è affidato ai fogli di stile (per lo più espressi in un file separato).
Per gli approfondimenti vi rimandiamo alla guida sui fogli di stile di HTML.it che approfondisce questo argomento.

I Moduli (forms)

Struttura del tag form

La struttura del tag Form e i suoi principali utilizzi

Un po' d'ordine: raggruppare i moduli

Come rendere più eleganti e razionali i nostri moduli con il tag fieldset

Il tag Input

I campi dei form: come utilizzare il tag input

I bottoni (sumbit, reset, button, image)

Inserire i bottoni o bottoni di immagine per inviare i moduli

Inserire testo (campo testo, textarea, password)

Inserire nella pagina i campi testuali per l'inserimento del testo

Consentire delle scelte (checkbox, radio, select)

Permettere all'utente di effettuare delle scelte singole o multiple

Altri campi (file e hidden)

Come inviare un file o delle variabili nascoste ad un server

Approfondimenti sui form

Controllare il passaggio da un campo all'altro e gestire il layout dei form

Uno dei fattori che ha decretato il successo del Web è senz'altro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list), ma soprattutto di partecipare a vere e proprie comunità virtuali, come il forum di HTML.it .
Per organizzare questo genere di servizi è necessario raccogliere in qualchemodo i dati dell'utente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form).
L'invio dei dati è solitamente organizzato in due parti:

una pagina principale che contiene i vari campi dei form, che consentono all'utente di effettuare delle scelte, scrivere del testo, inserire un'immagine
una pagina secondaria che viene richiamata dalla principale e che effettua "il lavoro" vero e proprio di processare e raccogliere i dati. Di norma sitratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp o altro

Noi ci occuperemo della sola pagina principale, dal momento che il modo incui struttura una pagina di programmazione esula dagli obiettivi della presenteguida.

Name e action

Per creare una pagina con dei moduli, bisogna utilizzare l'apposito tag <form>: si tratta di un elemento di blocco, come il <p>, quindi il tag <form> lasciauno spazio prima dell'apertura e dopo la chiusura.
<form name="datiUtenti"action="paginaRisposta.php">
...
</form>
Nel caso in non si desideri avere dello spazio superfluo è possibilemodificare i bordi del tag utilizzando i fogli di stile. Con questa semplice sintassi:
<form name="datiUtenti" style="border:0px"action="paginaRisposta.php">
Come si può vedere, "name" serve per indicare il nome del form, "action" indica l'URL del programma o della pagina dirisposta che processerà i dati.
Grazie all'"action" è anche possibile far sì che i dativengano inviati in e-mail al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). Il codice è questo:
<form action="mailto:tuamail@nomeDominio.it?subject=Oggetto predefinito"
enctype="text/plain" method="POST">
vedremo in una delle prossime lezioni come utilizzare concretamente questa sintassi.

Method

Quando creiamo un form possiamo scegliere due metodi di invio: GETe POST.
Con il metodo GET la pagina di risposta viene contattata e idati vengono inviati in un unico step. Nell'URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (piùprecisamente nella "query string", cioè nella "stringa di interrogazione") secondo questa forma:
paginaRisposta.php?nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio
i dati (nella forma nome del campo = valore del campo) sono appesi alla pagina dopo il punto interrogativo.
Alcuni server hanno tuttaviahanno delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 carattericomplessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi perl'invio in get è:
<form name="datiUtenti" action="paginaRisposta.php"method="GET">
Nel metodo POST invece l'invio dei dati avviene in due stepdistinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri noncompaiono nella query string (dunque se non si desidera che i parametri siano mostrati all'utente questo metodo è preferibile).
In questo caso non ci sonolimiti sulla lunghezza dei caratteri. La sintassi è:
<form name="datiUtenti" action="paginaRisposta.php"method="POST">

Enctype (tipo di codifica)

Prima di passare i dati alla pagina di risposta, che si trova sul server, questi vengono codificati dal browser in modo da non poter dare adito ad errori(ad esempio gli spazi vengono convertiti in "+"). Normalmente non è necessario specificare come si vuole effettuare la codifica dei dati, perché è sottintesol'invio di semplice testo.
A volte però, come quando è necessario inviare un'immagine, è tuttavia indispensabile dichiarare espressamente quali dativogliamo inviare. Per farlo è necessario utilizzare l'attributo "enctype" ("encoding type", cioè "tipodi codifica").
Come dicevamo normalmente non è necessario farlo, perché viene sottintesoquesto tipo di sintassi:
<form name="datiUtenti" action="paginaRisposta.php"enctype="text/plain">
Ma nel caso di invio di immagini dovremo dichiarare:
<form name="datiUtenti" action="paginaRisposta.php"method="post" enctype="multipart/form-data">

target

Grazie all'attributo "target" è possibile far aprire i dati del form in una pagina differente rispetto a quella corrente (o in una determinata parte di un frameset):
<form name="datiUtenti" action="paginaRisposta.php" method="get" target="_blank">
Per la loro natura di "raccoglitori di informazioni", i moduli tendono a ingigantirsi e diventare lunghissimi. Per questo, con l'HTML 4 sono statiintrodotti dei tag per fare un po' d'ordine all'interno dei form.
Grazie al tag <fieldset> possiamo creare dellemacro-aree all'interno dei form, e grazie al tag <legend>, possiamo indicare il nome di ciascunamacro-area.
Poniamo ad esempio di dover raccogliere i dati di un utente, raccogliendodati anagrafici, residenza, domicilio e reperibilità sul lavoro.
Possiamo farlo con la seguente sintassi:
<form action=ìì>
<fieldset>
  <legend>Datianagrafici</legend>
  <br><br><br>
</fieldset>

<fieldset>
  <legend>Residenza</legend>
  <br><br><br>
</fieldset>

eccetera

</form>
che dà:
Datianagrafici

Residenza

come si può vedere vengono creati dei riquadri con un indicazione del tipo dicontenuto.
Un altro tag particolarmente utile - si può utilizzare con ogni tipo di campoche vedremo d'ora in poi - è il tag <label>, che permette di indicare un'etichetta per il nome del campo.
Ad esempio:
<form action=ìì>
<fieldset>
  <legend>Datianagrafici</legend>
  <label>Anno di nascita: <input type="text"></label>
</fieldset>
</form>
che dà:
DatianagraficiAnno di nascita:
oppure (cambiando la posizione del testo):
<fieldset>
  <legend>Dati anagrafici</legend>
  <label><input type="text">: anno di nascita</label>
</fieldset>
che dà:
Dati anagrafici: anno di nascita
Come si può vedere il campo su cui si vogliono dare delle indicazioni deve essere compreso all'interno del tag label stesso.
Il TAG INPUT
Per quel che riguarda i campi dei form il tag più utilizzato è l'<input>, che è senza chiusura. Per specificare undeterminato tipo di campo è sufficiente indicare il tipo di input.
Ad esempio:
<input type="text">
crea un campo di testo.
<input type="button">
crea un bottone.
I vari <input> sono dotati di attributi che consentonodi indicare il tipo di campo, il nome (ad esempio per interagire con JavaScript), e il valore (per lo più il testo visualizzato).
<input type="text" name="tuoTesto" value="qui il tuo testo">
che dà:

I bottoni (sumbit, reset, button, image)

Non c'è form che si rispetti senza bottone di invio. La sintassi tradizionale per creare un bottone di invio è:
<input type="submit" value="invia I dati">
Ad esempio:
<form action=http://www.html.it target="_blank">
<input type="submit"value="visita HTML.it">
</form>
cioè:

Un altro bottone utile è il "reset" che - una volta premuto - consente di riportare il form allo stato originario, cancellando ogni cosa scritta finora dall'utente. Ecco un esempio:
<form action=ìì>
<inputtype="text"><br>
<input type="reset" value="cancella">
</form>
cioè

Esiste infine un tipo di bottone generico, che non esegue nessuna azioneparticolare, ma che può essere ad esempio utilizzato per associare degli eventi tramite JavaScript.
<form action=ìì>
<input type="button"value="bottone generico">
</form>
che dà:

Il tag <button>

Con l'HTML 4 è stato introdotto il tag <button> cheoffre la possibilità di creare dei bottoni con un aspetto particolarmente ricco.
Il tag <button>, a differenza del tag <input>, dà la possibilità di inserire il testo del bottone tra l'apertura e la chiusura del tag medesimo. Questo ci consente di specificare anche del codice HTML all'interno del tag.
I bottoni che abbiamo appena visto dovrebbero dunque avere questa forma:
<form action=http://www.html.ittarget="_blank">

<input type="text"><br>

<buttontype="button">
   bottone generico
</button>

<buttontype="reset">
   cancella
</button>

<button type="submit">
   invia
</button>

</form>
cioè:

Ed ecco un esempio complesso:
<form action=http://www.html.it target=_blank>
<button name="vai" type="submit">
   invia

   <img src="puntoEsclamativo.gif" width="23" height="67" title="invia adesso" border="1" vspace="5"
alt="invia adesso" align="middle">
   <b>invia adesso</b>
</button>
</form>
che dà:

Grazie all'attributo "disable" è infine possibile disabilitare i bottoni.
Es:
<input type="submit" value="invia" disabled>
o anche:
<form action=ìì>
<input disabled="disabled" type="submit" value="invia">

<button disabled="disabled" type=submit>
invia
</button>
</form>
cioè:

Il campo image

Il campo "image" ci consente di utilizzare come bottoni del form delle vere e proprie immagini e assegnare loro un valore grazie a JavaScript; in questo caso non si tratta propriamente di un bottone ma la funzionalità è la medesima. Ecco il codice:
<form action=http://www.html.it target=_blank>

<input name="invia il modulo" type="image" src="invia.gif" alt="invia il modulo" title="invia il modulo" width="78"
height="38">
</form>
cioè:

come si può vedere, se non si specifica nulla, l'immagine ha valore di submit.
Gli attributi del campo immagine sono molto simili a quelli del tag <img>.

Inserire testo (campo testo, textarea, password)

Per consentire all'utente di inserire del testo è possibile utilizzare un "campo testo". Se il campo è su una singola linea avremo:

<input name="mioTesto" type="text" value="qui il tuo testo" size="40" maxlength="200" />

L'attributo maxlength indica il numero massimo di caratteri che l'utente può inserire, con size si esprimono invece le dimensioni del campo di testo (la larghezza è data dal numero di caratteri).
Se si ha la necessità di indicare un campo che consenta di inserire una grande quantità di testo conviene invece utilizzare una "textarea" (area di testo). Ecco la sintassi:

<textarea name="testo" rows="5" cols="40">

  qui puoi scrivere il tuo testo

</textarea>

L'attributo rows indica il numero di righe della textarea, cols il numero di caratteri (cioè di colonne) che ogni riga può contenere.
Come si può vedere, se si vuol indicare del testo predefinito in questo caso bisogna inserirlo fra l'apertura e la chiusura del tag.
Esiste infine il campo password che mostra degli asterischi (o palline) al posto dei caratteri inseriti :

<input type="password" maxlength="8" size="18" value="mia_password" name="mioTesto" />

risultato:

Nota: la codifica fornisce una protezione soltanto per chi eventualmente stia sbirciando sul monitor dell'utente. L'invio dei dati attraverso il Web, se non vengono adottate altre misure di sicurezza, avviene 'in chiaro'.
Possiamo prevedere campi di testo accessibili solo in lettura. Ad esempio:

<input readonly="readonly" maxlength="8" size="25" value="leggere l'informativa" name="mioTesto" />

che risulta:

Oppure possiamo impostare le aree di testo come campi disabilitati:

<input disabled="disabled" maxLength="8" size="25" value="leggere l'informativa" name="mioTesto" />

cioè

Si possono anche selezionare uno o più valori di default:
<form action=ìì>
<input name="html" type="checkbox" value="html" checked="checked"/>
</form>
cioè

ed è possibile disabilitare una casella:
<form action=ìì>
<input name="html" type="checkbox" value="html" disabled="disabled"/>
</form>
cioè:

Radio button

I "radio button" ("bottoni circolari") invece consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude l'altra. Per ottenere questo effetto i campi devono avere lo stesso nome e differente valore:
<form>
<fieldset>
  <legend>Linguaggi conosciuti</legend>
  HTML<input type="radio" name="linguaggio" value="html"/>
  CSS <input type="radio" name="linguaggio" value="css"/>
  JavaScript <input type="radio" name="linguaggio" value="javascript"/>
</fieldset>
</form>
che viene così visualizzato:

Anche in questo caso è possibile assegnare un valore di default o disabilitare un pulsante.
<form action=ìì>
<input type="radio" name="linguaggio" value="html" checked="checked" disabled="disabled"/>
</form>
cioè:

Menu di opzioni (select)

Grazie al tag <select> è possibile costruire dei menu di opzioni. In questo caso ciascuna voce deve essere compresa all'interno del tag <option> (la chiusura del tag è opzionale) e il valore deve essere specificato attravero l'attributo "value". Con l'attributo "selected" si può indicare una scelta predefinita:
<form>
<fieldset>
  <legend>Siti per webmaster</legend>

  <select name="siti" >
   <option value="http://www.html.it" selected="selected">www.html.it  </option>
   <option value="http://freephp.html.it">frephp.html.it  </option>
   <option value="http://freasp.html.it">freasp.html.it  </option>
  </select>
</fieldset>
</form>
che da luogo a:

Siccome i menu di scelta tendono a diventare particolarmente lunghi, nell'HTML 4 è stato introdotto il tag <optgroup> che consente di suddividere le varie possibilità di scelta in gruppi tramite l'utilizzo di apposite etichette. Ecco l'esempio:
<form action=ìì>
<select name="siti" >
  <optgroup label="siti per webmaster">
   <option value="http://www.html.it">www.html.it  </option>
   <option value="http://freephp.html.it">frephp.html.it  </option>
   <option value="http://freasp.html.it">freasp.html.it  </option>
  </optgroup>

  <optgroup label="risorse per webmaster">
   <option value="http://font.html.it">font.html.it  </option>
   <option value="http://cgipoint.html.it">cgipoint.html.it  </option>
  </optgroup>
</select>
</form>

che dà luogo al seguente menu:

Infine con il tag select è possibile impostare anche delle scelte multiple. Come si può vedere, utilizzando l'attributo "multiple" l'aspetto del tag select cambia notevolmente:
<form action=ìì>
<label>Quale siti visiti?<br>

  <select name="siti" multiple="multiple">
   <option value="http://www.html.it">www.html.it  </option>
   <option value="http://freephp.html.it">frephp.html.it  </option>
   <option value="http://freasp.html.it">freasp.html.it  </option>
   <option value="http://font.html.it">font.html.it  </option>
   <option value="http://cgipoint.html.it" >cgipoint.html.it  </option>
  </select>
</label>
</form>
cioè:

Utilizzando il tasto "ctrl" l'utente può così effettuare delle scelte multiple.
Tramite l'attributo "size" si può specificare il numero delle voci che devono comparire nel menu, e conseguentemente regolare l'altezza del menu, aggiungendo o togliendo la barra di scorrimento verticale.
<form action=ìì>
<label>Quale siti visiti?<br>

  <select name="siti" size="5" multiple="multiple">
   <option value="http://www.html.it">www.html.it  </option>
   <option value="http://freephp.html.it">frephp.html.it  </option>
   <option value="http://freasp.html.it">freasp.html.it  </option>
   <option value="http://font.html.it">font.html.it  </option>
   <option value="http://cgipoint.html.it" >cgipoint.html.it  </option>
  </select>
</label>
</form>
che viene così visualizzato:

"size" indica la larghezza del campo. Come si può vedere, a fianco del modulo compare il pulsante "sfoglia" o "browse" (a seconda della lingua del browser dell'utente).

Un esempio concreto

Riprendendo un esempio accennato in precedenza, possiamo vedere come sia possibile consentire all'utente di inviarci il contenuto di un questionario tramite e-mail.
Dal punto di vista dell'utente si aprirà un messaggio che domanda se si vuole inviare una mail, ma ciò è inevitabile se si utilizza questo metodo: per evitare questa eventualità bisognerebbe infatti usare dei programmi che inviino e-mail lato-server.
<form name="datiUtente" enctype="text/plain" method="post" action="mailto:tuamail@nomeDominio.it?subject=Questionario proveniente dal web">/

<fieldset>
  <legend>Dati Utente</legend>
  <label>Nome: <input name="nome" type="text" size="20" maxlength="30"></label>/
  <label>Cognome: <input name="cognome" type="text" size="20" maxlength="30"></label>/
  <label>Professione: <input name="cognome" type="text" size="20" maxlength="30"/> </label>
</fieldset>
<br/>
<fieldset>
  <legend>Questionario</legend>
  <label>Siti visitati:<br>
   <select name="siti" size="5" multiple="multiple">
    <option value="http://www.html.it">www.html.it</option>
    <option value="http://freephp.html.it">frephp.html.it</option>
    <option value="http://freasp.html.it">freasp.html.it</option>
    <option value="http://font.html.it">font.html.it</option>
    <option value="http://cgipoint.html.it" >cgipoint.html.it </option>
   </select>
  </label>
</fieldset>
<br/>
<fieldset>
  <legend>Campo libero</legend>
  <label>Lasciami un parere:<br>
   <textarea name="parere" cols="20" rows="10">
   </textarea>
  </label>
</fieldset>
<br/>
<button type="reset">annulla</button>
   
<button type="submit">invia</button>
che dà luogo a questo form:

L'attributo tabindex

Utilizzando il tasto "tab" della tastiera l'utente può passare da un campo del form all'altro. Per varie ragioni di impaginazione l'ordine così ottenuto potrebbe però non essere quello desiderato. Grazie all'attributo "tabindex" che si applica ai campi dei moduli è possibili specificare in quale ordine deve avvenire il passaggio da un campo all'altro. Il valore di questo attributo può variare tra 0 e 32767. Vediamo un esempio:
<form action="datiUtente">
<fieldset>
  <legend>Dati utente</legend>

  <table width="300" border="1" cellspacing="0" cellpadding="5">
   <tr>
    <td>
     <label>Nome:
      <input tabindex="1" name="nome" type="text" size="30" maxlength="30"/>
     </label>
    </td>
    <td>
     <label>Professione:
      <input tabindex="3" name="professione" type="text" size="30" maxlength="100"/>
     </label>
    </td>
   </tr>

   <tr>
    <td>
     <label>Cognome:
      <input tabindex="2" name="cognome" type="text" size="30" maxlength="30"/>
     </label>
    </td>
    <td> </td>
   </tr>
  </table>
</fieldset>
</form>
che viene così visualizzato:

come si può vedere, digitando il tasto "tab", l'ordine di passaggio da un campo all'altro non è quello indicato nell'HTML, ma è modificato secondo il valore di "tabindex".

Il layout dei form

Se siete alle vostre prima pagine HTML, può apparire difficile avere il controllo perfetto dei form. Si trovano validi suggerimenti tra gli articoli correlati alla guida:

I Form: segreti e trucchi di personalizzazione
I Form: risposte a domande frequenti

Includere elementi multimediali e script

Premessa: il tag object

Suggerimenti per l'inclusione di file esterni. La sintassi del tag Object

Includere un file Audio

Inserire un file audio di sottofondo o un elemento del lettore RealOne

Includere un file Video

Inserire un fimato video e accenni allo streaming sul Web

Includere un file Flash

Come includere nelle vostre pagine un filmato Flash

Includere un file Java

Come includere un file Java definendo un testo alternativo

Includere file di scripting o CSS

Inclusione di file JavaScript, VBScript e CSS
Se volete inserire file multimediali (audio e video), oppure effetti grafici particolari scritti in qualche linguaggio di programmazione, ricordatevi sempre di fare attenzione al peso dei file che state inserendo. Siamo infatti sul web e dunque tutti i file, in un modo o nell'altro, dovranno essere scaricati dal visitatore del vostro sito per essere correttamente visualizzati.
Bisogna anche considerare che - sebbene la banda a disposizione del pubblico si stia allargando grazie all'adsl e alle fibre ottiche - non tutte le zone sono "coperte" da questa tecnologia, e la maggioranza dei visitatori naviga ancora con modem analogici da 56 Kb.
In ogni caso - banda larga o no - inserire ad esempio un file mp3 da 3 Mb come musica di sottofondo sarebbe esagerato anche per una connessione adsl.
Quindi: attenzione al peso dei file che inserite!. Per approfondimenti vi consigliamo la lettura della lezione dedicata alla leggerezza dei siti Web della nostra guida all'Usabilità.
Nelle lezioni successive ci occuperemo di come includere in pagine Web elementi multimediali o file di scripting. Per chi fosse interessato alle inclusioni di file HTML in file HTML rimandiamo all'articolo «Come includere codice esterno nelle pagine web». Per chi volesse invece includere del codice XML in pagine HTML vi consigliamo la lettura dell'articolo: «Data binding client-side con XML Data Islands».
La maggior parte dei file multimediali che vedremo nel corso delle lezioni si inserisce all'interno delle pagine con il tag <object>, che è il tag corretto - secondo le indicazioni del W3C - per inserire elementi multimediali, tanto che nelle specifiche dell'XHTML 2 (l'evoluzione dell'HTML) persino le immagini devono essere inserite tramite questo tag.
Un altro tag che spesso viene utilizzato per la multimedialità è <embed>: si tratta di un elemento che non è nelle specifiche del W3C, ma che è stato a lungo utilizzato, perché supportato sia da Internet Explorer, sia da Netscape Navigator, a differenza di <object>, che ha dei problemi di compatibilità.
Vediamo i principali attributi di <object>:

data	questo attributo può essere utilizzato per specificare il percorso dell'oggetto da inserire nella pagina
classid	dà indicazioni sul percorso dell'oggetto, ed è utile per identificare il tipo di plugin con cui eseguire l'oggetto
codebase	serve per indicare l'URL di base, a cui il codice indicato in "data" o in "classid" fa riferimento
type	è il tipo di oggetto da inserire (più esattamente è il MIME type dell'oggetto)
archive	si può indicare una lista di URL, separati da virgola, contenti risorse relative all'oggetto inserito
width, height	se necessario, si possono indicare una larghezza e una altezza

All'interno del tag <object> è possibile specificare una sintassi alternativa per i browser che non leggono questo tag. Inoltre all'interno del tag è possibile specificare eventuali parametri necessari all'esecuzione dell'oggetto.
In molti casi il tag object si occupa di attivare un "plug-in", cioè un componente aggiuntivo che si integra nel browser, per lo più fornito dal produttore del software multimediale (es. Flash), in grado di leggere il file multimediale (qualsiasi esso sia).
Vedremo nelle lezioni seguenti quali sintassi specifiche utilizzare per includere questi oggetti nelle vostre pagine Web.

Includere un file Audio

Per impostare un suono di sottofondo si può utilizzare il tag <bgsound>
Sintassi di <bgsound>
<bgsound src="url del file audio" loop="numero di ripetizioni" />
Basta quindi inserire il riferimento del file audio (es. wav) e lasciare che il suono venga riprodotto:

una volta: loop="1" oppure omettendo l'attributo loop
due volte o anche di più: loop="2" basta indicare il numero di ripetizioni desiderato
infinite volte: loop="infinite"

In realtà questo non è il modo migliore, né il più efficace, per inserire un file audio, perché obsoleto e compatibile soltanto con Internet Explorer.
Un'altro modo obsoleto, ma crossbrowser prevede l'uso di <embed>.
Sitassi di <embed>
<embed src="url del file audio" autostart="true" />
Un esempio in questa pagina.
Se invece vogliamo seguire le specifiche dell'HTML 4.01, utilizziamo il tag <object>.
Sintassi di <object>
<object data="url del file audio" type="audio/wav" autostart="true">
  <embed src="url del file audio" autostart="true">
</object>
tuttavia, affinché tutto funzioni perfettamente, spesso conviene indicare il tipo di plugin da utilizzare grazie all'attributo classid.
Vediamo il codice necessario ad aprire la barra del lettore multimediale RealOne (se RealOne non è presente, l'utente verrà avvisato). Notare che all'interno del tag <object> vengono espressi i parametri che indicano come devono essere visualizzati i controlli di RealOne, e la sintassi alternativa per browser obsoleti (indicata tramite <embed>):
<object id="sound1" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
  <param name="src" value="multimedia/audio/jet_pubb.wav">
  <param name="controls" value="All">
  <param name="console" value="sound1">
  <param name="autostart" value="false">

  <embed src="http://html.it/guide/esempi/guida_html/multimedia/audio/jet_pubb.wav"
      type="audio/wav" console="sound1" controls="All" autostart="false" name="sound1">

</object>
Quando inserite dei file audio, fate sempre caso ad essere i proprietari dei diritti d'autore, o ad avere l'autorizzazione a utilizzare la musica (o il suono) in questione.
Ricordiamo anche che l'uso di suoni o musica di sottofondo se utilizzata in modo eccessivo può compromettere l'usabilità del sito.

Includere un file Video

Come per l'audio anche per i video si dovrebbe utilizzare il tag <object>. La sintassi è identica a quella dei file audio:
<object data="filmato.mov" type="video/quicktime" width="164" height="140">
<embed src="filmato.mov" type="video/quicktime" width="164" height="140">
</object>
come abbiamo visto per i filmati audio, è possibile utilizzare l'attributo "classid" con gli appropriati parametri per aprire barre di visualizzazione e controlli vari ed eventuali.
Data la grande dimensione che questi file possono raggiungere, per i filmati (ma anche per l'audio) è possibile utilizzare lo streaming attraverso il web. Si tratta di un procedimento che consente di scaricare il filmato gradualmente dal server, a mano a mano che lo si sta vedendo e in modo del tutto trasparente all'utente.
Per maggiori informazioni sullo streaming video, vi rimandiamo alla sezione «streaming» di PRO.HTML.it.
Finora abbiamo visto come inserire singoli filmati audio e video all'interno di una pagina web, se invece volete sincronizzare diversi filmati audio e video, dovete utilizzare un linguaggio apposito che prende il nome di «SMIL».

Includere un file Flash

Flash è un software molto potente sviluppato da Macromedia a partire dal 1996. Si tratta di un programma che utilizza grafica vettoriale: significa che le immagini non vengono descritte attraverso mappe di bit (bitmap), ma attraverso formule matematiche. Per questo motivo i filmati in Flash pesano molto meno della grafica tradizionale, e per lo stesso motivo i colori sono "piatti".
Inoltre, proprio perché le immagini sono espresse da formule matematiche, non c'è il problema dell'effetto "sgranato" dovuto al ridimensionamento proprio della grafica tradizionale, perché i filmati in flash si adattano automaticamente alle dimensioni indicate nel codice HTML (o se le dimensioni sono espresse in percentuale, si adattano alla pagina).
Ovviamente il fatto che le immagini siano espresse grazie a delle formule è una caratteristica di questo software che non tocca minimamente il webmaster, il quale - quando sviluppa filmati in flash - si ritrova ad usare un "normale" software visuale.
I file sorgenti dei filmati (quelli su cui gli sviluppatori lavorano) hanno estensione .fla, i file compilati (quello che si possono vedere in giro per il web) hanno invece estensione .swf (cioè "Shockwave Flash"): è quest'ultimo tipo di file che dovremo inserire dunque nelle nostre pagine HTML.
Per inserire un filmato in flash in una pagina HTML è sufficiente utilizzare la seguente sintassi:
<object type="application/x-shockwave-flash" data="http://html.it/guide/esempi/guida_html/multimedia/flash/bottone_in-out.swf" width="450" height="164">
<param name="movie" value="http://html.it/guide/esempi/guida_html/multimedia/flash/bottone_in-out.swf"/>
</object>
Maggiori informazioni su Flash si possono trovare sul nostro sito dedicato a Flash.

Includere un file Java

Java è un linguaggio di programmazione rilasciato dalla Sun nel 1995, ma in corso di sviluppo sin dal 1991. Il suo successo nel web è dovuto alle famose "applet" (fusione delle parole "application" e "gadget") che permettono di aggiungere interattività alle pagine web.
Le applet Java hanno tracciato la strada verso una migliore esperienza utente per i siti Web. Sono le antesignane dei diversi plugin come il Flash Player, Silverlight e del canvas di HTML 5.
Tutto quello che si può fare con le applet Java oggi lo si può fare anche con Flash o JavaScript e in molti casi si preferisce utilizzare questi linguaggi.
Java rimane una valida alternativa per applicazioni web complesse (ad esempio i dati e i grafici delle quotazioni finanziarie, che devono essere aggiornati in tempo reale), o anche per applicazioni come la chat (i client in Java sono tuttora insuperati).
I file con il codice sorgente hanno estensione .java, i file compilati (da inserire nelle nostre pagine web) hanno invece estensione .class.
Come per tutti i plugin oggi possiamo inserire un applet Java grazie al tag <object> ed una sintassi simile a questa:

<object id="appletLake"

        codetype="application/java"

        codebase="applet_dir/"

        width="500" height="400" >

  <param name="image" value="myimage.jpg">

  <!--html alternativo -->

  <img src="http://html.it/guide/esempi/guida_html/multimedia/java/logo.gif" width="263" height="65" alt="html.it">

  <!-- fine html alternativo -->

</object>

Diamo uno sguardo alle proprietà che abbiamo inserito:

Proprietà	Descrizione
codetype	Stabilisce il tipo di oggetto (nel nostro caso application/java) che stiamo inserendo
codebase	Indica l'indirizzo della cartella che contiene il file .class della nostra applet
width e height	Sono le dimensioni (larghezza e altezza) del box in cui eseguire l'applicazione

Oltre alle proprietà necessarie a definire l'applicazione da caricare, possiamo utilizzare anche un tag <param> per passare dei valori all'applet. Nel nostro caso le passiamo l'url di un'immagine da visualizzare.
Infine, per coloro che non hanno installato il plugin per la visualizzazione delle applet, abbiamo inserito del markup HTML alternativo, per mostrare comunque l'immagine.
Nota: In passato si utilizzava il tag <applet>, che però, è stato da tempo deprecato dal W3C e può causare anche problemi di visualizzazione su alcuni browser.

Includere file di scripting o CSS JavaScript e VbScript

Cominciamo subito con il dire che JavaScript non è Java. JavaScript è un linguaggio di scripting, eseguito dal browser, che permette di creare interattività all'interno della pagina.
La sintassi JavaScript deve essere inserita all'interno del tag <script>. Così:

<script type="text/javascript">

function ciao()

  alert ("ciao");

</script>

e poi nella pagina:

<input type="button" value="clicca" onClick="ciao()">

che dà il seguente output:
Per imparare a programmare in JavaScript è possibile iniziare con la nostra guida. Inoltre su HTML.it è disponibile una numerosa raccolta di JavaScript pronti da usare così come sono, o utili per prendere spunto e costruire nuove funzioni.
VbScript ("Visual Basic Script") è anch'esso un linguaggio di scripting eseguito dal browser, ma è possibile utilizzarlo soltanto con Internet Explorer.

I CSS (i fogli di stile)

Infine i fogli consentono di impostare il layout di un documento. La sintassi per includerli all'interno della pagina è:
<style type="text/css">
...
</style>

Linguaggi e strumenti

I meta tag

Come migliorare il posizionamento sui motori. Titolatura, Meta Tag

Il DocType (DTD)| Guida HTML | HTML.it

Dichiarare la tipologia del documento con il DocType

Configurare un programma FTP

Come pubblicare i file sul proprio sito con un programma FTP

Gli editor visuali

Come scrivere una pagina Web. I principali editor WYSIWYG

Una precisazione sul WWW e sui linguaggi

L'invenzione del WWW e le specifiche dei nuovi linguaggi

Conclusioni

Validare i propri documenti e continuare ad imparare a costruire siti Web

I meta tag

Adesso che abbiamo terminato il nostro sito possiamo occuparci di farlo trovare dai motori di ricerca.
È utile allora impostare correttamente i meta tag all interno della <head> del documento: si tratta di una serie di parole chiave e descrizioni, che aiutano i motori di ricerca a classificare il sito.
Abbiamo già visto il <title>, che è il titolo della pagina; ma il testo ivi contenuto può comparire anche in seguito alla ricerca in un motore, come titolo del link. Sarà dunque importante impostarlo in modo pertinente:
<title>HTML.it - il sito italiano sul webpublishing</title>
C'è poi il meta-tag "description" che permette di impostare una descrizione sintetica del sito stesso. Anche in questo caso, la descrizione compare talvolta nei risultati della ricerca:
<meta name="description" content="HTML.it - il sito italiano sul Web publishing">
Infine il meta-tag "keywords" permette di indicare alcuni contenuti relativi al sito stesso.
Le keywords (a seconda del webmaster) compaiono separate da virgola, da punto e virgola, oppure senza alcun segno di interpunzione:
<meta name="keywords" content="html wml xml smil javascript js dhtml dynamic xhtml vbscript coldfusion photoshop paint shop pro risorse webmaster webdesigner flash grafica css applet java asp cgi perl guida free corso php mysql tutorial lezioni sql database realizzazione siti web leggi mailing list newsletter gif jpg publishing editor iis webserver apache linux raccolte script news chat forum fogli di stile hdml wap linux mac apple palmari computer c++ delphi visual basic vb vbasic">
È fortemente sconsigliabile l'inserimento di keyword "astute" non relative al contenuto effettivo del sito per migliorare il posizionamento (tipo le ricercatissime "sesso", "mp3", ecc.). Quando i motori di ricerca se ne accorgono, per lo più cancellano il sito dalle loro liste.
Su HTML.it sono presenti molte risorse sull'argomento. L'articolo «I Meta-tag: come scriverli correttamente», ad esempio, è un approfondimento su come impostare i meta-tag.
Un buon posizionamento all'interno dei motori di ricerca è una meta difficile da raggiungere e l'argomento non si esaurisce certo in poche righe. Per cui, se siete interessati all'argomento, è utile consultare i nostri articoli sui motori di ricerca e il topic "Motori di Ricerca e Web Marketing" sul nostro forum.

Il DocType (DTD)| Guida HTML | HTML.it

Finora abbiamo tralasciato l'analisi della prima riga di una pagina HTML (quella che consente di specificare di che tipo di documento si tratta). Il <!DOCTYPE> assume un aspetto di questo genere:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

http://www.w3.org/TR/html4/loose.dtd>

Questa riga fornisce alcune informazioni sul documento:

Elemento	Descrizione
HTML	il tipo di linguaggio utilizzato è l'HTML
PUBLIC	il documento è pubblico
W3C	il documento fa riferimento alle specifiche rilasciate dal W3C
-	(è il segno "meno") le specifiche non sono registrate all'ISO (organizzazione di standardizzazione nternazionale). Se lo fossero state, ci sarebbe stato un "+"
DTD HTML 4.01 Transitional	il documento fa riferimento a una DTD ("Document Type Definition" cioè "Definizione del tipo di documento"); la versione di HTML supportata è la 4.01 "transitional"
EN	la lingua con cui è scritta la DTD è l'inglese

Inoltre, se necessario, è possibile specificare l'indirizzo di riferimento a cui è possibile trovare la DTD: per l'HTML non lo si fa quasi mai, perché gli URL a cui trovare la documentazione sono universalmente noti.
Per quel che riguarda l'HTML le indicazioni possibili sono tre:

Strict: è una DTD particolarmente rigorosa: esclude ogni elemento che riguarda il layout (la cui formattazione è affidata all'utilzzo dei CSS) e non è consentito l'uso degli elementi deprecati:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
http://www.w3.org/TR/html4/strict.dtd>

Transitional: è una versione temporanea, per consentire il passaggio da una specifica all'altra. Nella DTD transitionali tag deprecati sono ammeesi. Questa DTD andrà bene nella maggior parte dei casi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>

Frameset. È la DTD che riguarda i frames:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
http://www.w3.org/TR/html4/frameset.dtd>
Nelle ultime versioni il tipo di <!DOCTYPE> utilizzato influisce sulla visualizzazione della pagina da parte del browser. Tale tecnica, chiamata <!DOCTYPE> switch, è una delle principali cause di visualizzazione delle pagine sul Web. A questo argomento HTML.it ha dedicato un lungo e dettagliato approfondimento nell'articolo «Il <!DOCTYPE> ed il <!DOCTYPE> switch nei moderni browser»

Configurare un programma FTP

Abbiamo detto sin dall'inizio che un sito internet, per essere visibile da tutti, deve essere presente su un computer che faccia da server, che sia in grado cioè di distribuire i contenuti di un sito a chi ne faccia richiesta nel web.
È giunto il momento di spostare il nostro sito internet sul server e per farlo dobbiamo utilizzare un protocollo che si chiama FTP ("file transfer protocol").
Per prima cosa, cercate uno spazio web in cui trasferire il vostro sito (ce ne sono di gratuiti, ad esempio su Digiland). Dobbiamo quindi procurarci un programma che ci consenta di trasferire i file in maniera visuale dal nostro computer al computer in remoto. Nella sezione «Download» ce ne sono alcuni: i più famosi sono CuteFtp e WS-Ftp.
Durante la configurazione del programma dovrete inserire alcuni dati che vi fornirà il gestore dello spazio:

indirizzo ftp del sito
nome utente
password

Una volta che effettuata correttamente la procedura di login, non avete che da spostare i file dal vostro computer (di solito alla vostra sinistra) al computer in remoto (a destra).
Se avete impostato i collegamenti in modo corretto - in modo che non facciano riferimento al vostro computer di casa, ma a riferimenti relativi - avete messo il vostro primo sito nel Web!

Gli editor visuali

Finora abbiamo scritto tutto il codice a mano, ma vi accorgerete presto che esistono dei programmi che permetto di inserire immagini, tabelle, frame, form e quant'altro in maniera più intuitiva: si tratta degli editor visuali, quelli che gli anglosassoni chiamano editor WYSIWYG ("What you see is what you get", che significa "ciò che vedi è quello che ottieni").
Ad oggi gli editor visuali più utilizzati sono:

Dreamweaver della Macromedia: un editor molto potente e pieno di funzionalità, ma forse proprio per questo inizialmente difficile da usare. Sicuramente il migliore.
FrontPage della Microsoft: è l'editor che tutti solitamente utilizzano, perché incluso nel pacchetto Office. In realtà "sporca" molto il codice, visto che la sua attenzione è concentrata su Internet Explorer.
Golive di Adobe: negli ultimi anni ha perso notevoli quote di mercato, rimane tuttavia un editor serio e una valida alternativa a FrontPage

Il WWW (Word Wide Web) come lo conosciamo oggi fu inventato da Tim Berners Lee al Cern di Ginevra nel 1991. Egli inventò sostanzialmente tre procedimenti standard grazie ai quali far colloquiare gli elaboratori fra loro:

HTTP ("Hyper Text Tranfer Protocol"): è il protocollo grazie a cui due computer differenti si scambiano le informazioni
URI ("Uniform Resource Identifiers") e URL ("Unified Resource Locator"): sono due sistemi per individuare in modo univoco la collocazione di una determinata macchina, di un determinato documento o di una determinata risorsa all'interno del Web. Un esempio di URI è l'indirizzo web http://www.html.it.
HTML: un linguaggio standard. Oramai dovrebbe essere chiaro di cosa si tratta

Linguaggi di markup

A scanso di equivoci, ecco qui una piccola panoramica dei linguaggi che sono strettamente parenti dell'HTML:

SGML ("Standard Generalized Markup Language"). in pratica l'HTML è stato scritto seguendo le specifiche di questo linguaggio. L'SGML serve infatti per creare linguaggi di contrassegno. La maggior parte di noi non se ne occuperà mai, ma l'SGML ha fornito la struttura per creare l'HTML
XML (Extensible Markup Language). L'XML (modellato anch'esso sull'SGML) è nato per superare i limiti dell'HTML: è infatti possibile creare dei tag personalizzati, che si adattino ad ogni esigenza. Questa caratteristica facilita l'interscambio dei dati tra piattaforme differenti grazie all'uso dell'XML.
In pratica si tratta di un meta-linguaggio, in grado di creare altri linguaggi, adattabili per le esigenze più disparate.
Es: il WML (Wirless markup Language) per i telefonini, MathML per descrivere espressioni matematiche, l'SVG (Scalable Vector Graphics) per la grafica vettoriale, lo stesso XHTML
XHTML ("Extensible HyperText Markup Language"): l'XHTML non è nient'altro che la riformulazione dell'HTML come linguaggio XML. Infatti - dopo l'HTML 4.01 - non ci saranno più nuove versione dell'HTML, perché l'HTML si è evoluto in XHTML

A questo punto dovreste essere in grado di costruire i vostri siti con le vostre stesse forze.
È una buona abitudine quella di validare il vostro codice HTML, per vedere se fate degli errori. Per farlo potete utilizzare lo stesso validatore del W3C (che è il più noto), ma ne esistono anche altri.
Se costruire un sito per voi è un'occasione sporadica, questo corso dovrebbe essere abbastanza esauriente per tutto quello che dovete fare. Ma se "da grandi" volete fare i Webmaster, il prossimo passo da affrontare è la «guida ai fogli di stile».
Se poi volete aggiungere effetti grafici particolari ai vostri siti web, potete anche dedicarvi alla «guida a JavaScript».
In ogni caso nel sito HTML.it potete trovare dei validi suggerimenti per i vostri prossimi passi.
Se avete dei dubbi sul codice, potete sempre cercare aiuto nel «forum di discussione di HTML.it».

Alcune Precisazioni

Evitare il ridimensionamento delle immagini in IE 6

MS Internet Explorer 6 ha il "brutto vizio" di dimensionare le immagini ed il fenomeno non è controllabile per default: si corre quindi il rischio di vedere layout sfalsati se non oculatamente ottimizzati.
Esiste un particolare Meta Tag che permette di far fronte al problema, semplicemente impostando l'intestazione AutoSize su Off.
Di seguito il codice:

<meta http-equiv="AutoSize" content="Off">

Sovrapporre un'immagine ad un layer

Sovrapporre un'immagine ad un layer senza posizionamento assoluto
Abbiamo visto con i CSS come sovrapporre più livelli con l'ausilio del posizionamento assoluto. In questo articolo vediamo come sovrapporre un'immagine ad un layer di tipo div senza utilizzo dei Css ma di solo Html:

<div style="border-bottom: Solid 1px #000000; padding: 3px;">

    <img src="icona.gif" border="1" align="left" hspace="5">

    Inserire qui il testo che deve comparire al fianco dell'icona...

</div>

Il solo utilizzo di align="left" sull'immagine fa si che il livello non sia obbligato ad espandersi in altezza per la grandezza dell'immagine ed evita l'utilizzo di una tabella per affiancare l'elemento testo; il codice Css utilizzato si limita a creare un bordo inferiore ed una spaziatura interna al layer per rendere evidente la sovrapposizione.
L'effetto ottico è davvero interessante!

Selezionare un campo di un modulo cliccando la sua dicitura

Lavorando con applicazioni Windows User Interface, piuttosto che con applicazioni Web, siamo abituati a non dover necessariamente selezionare un pulsante di opzione cliccando sul controllo stesso, ma è possibile accedervi anche cliccando sulla sua dicitura descrittiva. Nell'esempio che segue dobbiamo necessariamente cliccare sul radio-button per selezionare il sesso:
Maschio
Femmina
Potremmo invece cliccare sulle diciture Maschio o Femmina e riuscire lo stesso a selezionare il sesso!
Maschio
Femmina
E' necessario includere il testo della descrizione del radio-button nel Tag <label> e </label> specificando l'attributo for="ID del radio-button"
Di seguito un esempio:

<form name="modulo">

    <input type="radio" name="sesso" id="sesso_m" value="M">

        <label for="sesso_m">Maschio</label><br>

    <input type="radio" name="sesso" id="sesso_f" value="F">

        <label for="sesso_f">Femmina</label>

</form>

Utilizzo del Tag <base>

Pensare di realizzare la struttura di una pagina Web col solo utilizzo del linguaggio Html è una scelta in partenza sbagliata, grazie all'utilizzo dei fogli di stile Css possiamo snellire, velocizzare e migliorare il nostro lavoro, tuttavia a volte capita di dover realizzare, per un motivo o per un altro, pagine di una certa semplicità e potremmo prenderci il "lusso" di non ricorrere ai Css: anche in questo caso possiamo snellire e migliorare il nostro lavoro, in questo articolo vedremo come.
Il Tag <base> ci permette di agire in questo senso su alcune componenti della pagina, come ad esempio la dimensione del testo ed il carattere, con i link, con il target di indirizzamento verso un frame o una nuova finestra, ecc...
Il Tag <base> va incluso nell'header della pagina in questione e può essere facoltativamente chiuso tra il Tag </body> ed il Tag </html>, iniziamo con un primo esempio, formattiamo per default la dimensione del testo ed il suo carattere:

<html>

 <head>

  <title>lukeonweb.net</title>

  <basefont size="2" face="Verdana">

<body>

<p>Testo della pagina ... ... ...</p>

</body>

</basefont>

</html>

Attenzione: l'utilizzo di <basefont> non avrà effetto sui testi contenuti all'interno di una tabella Html per quanto riguarda il size del testo, bisognerà specificarlo per singola cella oppure, a questo punto, ricorrere solo per questa sottigliezza ai Css.
Vediamo adesso come lavorare con i link e risparmiare tempo e fatica, supponiamo che si voglia da un sito qualsiasi, ad esempio www.quellochesia.it, creare una pagina con soli link verso questo sito, quindi www.lukeonweb.net, dovremmo per ogni singolo link inserire la URL assoluta del sito esterno.
Mediante l'utilizzo di <base> possiamo snellire il lavoro, vediamo un esempio:

<html>

 <head>

  <title>quellochesia.it</title>

  <base href="http://www.lucaruggiero.it/">

<body>

<p>

   <a href="html/trucchi/trucco_06.asp">

      LINK VERSO LUKEONWEB.NET

   </a>

</p>

</body>

</base>

</html>

Possiamo in questo modo raggiungere la URL assoluta di un sito esterno utilizzando nel link il percorso assoluto, come se il file da raggiungere fosse presente sullo stesso server Web.
Allo stesso modo è possibile impostare il target di un link verso un determinato frame o verso un'altra finestra del browser:

<html>

 <head>

  <title>quellochesia.it</title>

  <base target="_blank">

<body>

<p>

   <a href="index.htm">

      Apri in una nuova finestra

   </a>

</p>

</body>

</base>

</html>

In questo modo è possibile aprire tutti i file di una pagina Web in una nuova finestra senza dover utilizzare in tutti i link.

<a href="index.htm" target="_blank">

Differenza tra i tag testuali <p> e <div>

La differenza sostanziale che passa tra i Tag testuali <p> e <div> è sostanzialmente una: entrambi, al contrario del Tag <span>, comportanpo un ritorno a capo, ma <div> non comporta un'interlinea vuoto che si somma al ritorno a capo.
Mi spiegherò meglio con un esempio:

<p>Hello, World!</p>

equivale a scrivere

<div>Hello, World!</div><br>

Creare tabelle con i bordi curvi

Le tabelle Html, per loro natura, hanno un aspetto poco aggraziato, anche la loro stilizzazione con l'ausilio dei fogli di stile CSS non è delle più semplici, bisogna selezionare cella per cella il bordo, il suo spessore ed il suo colore, complicando non poco la vita dello sviluppatore.
Una soluzione per altro molto sfruttata in molti siti è quella di utilizzare una tabella colorata con delle immagini create ad hoc, possibilmente dello stesso colore della tabella, per simulare l'effetto "bordi curvi", classico effetto che si utilizza per piccoli moduli con funzionalità tipo area di accesso privato, o di login.
Si avvii il proprio programma di grafica e si crei un'immagine lunga quanto la tabella in questione (ad esempio 150 X 25 pixel), con le estremità curve su di un lato, come questa:

Si sfruttino le utility del programma e si capovolga l'immagine, ottenendo questo effetto (oppure la si crei nuova):

Si crei a questo punto, nel caso di un'area di login, una tabella dal seguente aspetto divisa in celle:

Popoliamo queste celle per dar vita alla nostra area di login:

<table width="150" cellpadding="0" cellspacing="0">

 <tr>

   <td colspan="2"><img src="bordo_superiore.gif"></td>

 </tr>

 <tr bgcolor="#003366">

   <td><font color="#FFFFFF">Username</font></td>

   <td><input type="text" size="10"></td>

 </tr>

 <tr bgcolor="#003366">

   <td><font color="#FFFFFF">Password</font></td>

   <td><input type="password" size="10"></td>

 </tr>

 <tr>

   <td colspan="2" bgcolor="#003366" align="right">

   <input type="submit" value="Login"></td>

 </tr>

 <tr>

   <td colspan="2"><img src="bordo_inferiore.gif"></td>

 </tr>

</table>

ed ecco il risultato:


Username
Password

Nota: questo è un esempio basilare di come utilizzare questo metodo di stilizzazione delle tabelle, non sono infatti stati utilizzati attributi particolari agli elementi interni alla tabella, come i campi di input, ne i Tag <form> e </form> che consiglio si inserire in questo modo:

<table width="150" cellpadding="0" cellspacing="0">

 <form ...>

  <tr>

...

...

  </tr>

 </form>

</table>

Buon divertimento :-)

Editare codice Html sulla pagina come testo

Un classico problema che affrontano coloro che desiderano editare codice sorgente su di una pagina al fine di pubblicarla come materiale didattico, è quello di evitare che il browser lo interpreti come codice e lo esegua, invece che stamparlo a video, pronto per essere semplicemente letto.
I Tag Html sono racchiusi tra i caratteri < e >, quindi il browser interpreterà come codice <img src="immagine.jpg"> e tenterà di inserire un'immagine.
Per stampare a video il codice e non eseguirlo, si utilizzano una serie di caratteri speciali formati da simboli, numeri e lettere, ad esempio, il carattere < si può stampare a video con la combinazione <, mentre l carattere > utilizza la combinazione >.
Dunque, per scrivere <html> dovremo scrivere <html>.
Per scrivere un lungo codice, che si tratti di Html o di un linguaggio di scripting, si utilizza del Tag <pre> e </pre>, ovvero "testo preformattato" che non necessita di giustificazioni particolari del testo per stamparlo a video in un certo modo.
Per fornire un esempio completo, espongo il codice di un semplice Javascript che invento al momento:

<pre>

&lt;script language="javascript"&gt;

 &lt;!--

  function Esempio() {

    document.write("Codice di esempio");

    alert("Codice di esempio");

 --&gt;

&lt;/script&gt;

</pre>

Questo è il risultato:

<script language="javascript">

 <!--

  function Esempio() {

    document.write("Codice di esempio");

    alert("Codice di esempio");

-->

</script>

Ritorno a capo nei button di form HTML

Quando si inserisce un testo su di un button (o submit) di un form Html, spesso nasce l'esigenza di ottimizzare in termini di spazio e mandare a capo il suo testo.
Utilizziamo un semplice codice all'interno del value del button:

<input type="button" value="PRIMA RIGA&#10;SECONDA RIGA">

Ecco l'esempio:

Impostare i dati in un link di tipo mailto

Impostare i dati in un link di tipo mailto: è molto semplice ed utile, è necessario utilizzare i metodi di aggregazione dei dati che utilizzano per default i vari client di posta elettronica:
• mailto: utilizzato per default per definire il destinatario principale della mail
• Cc utilizzato per definire altri destinatari visibili a tutti gli altri
• Bcc utilizzato per definire altri destinatari invisibili a tutti gli altri
• Subject definisce l'oggetto della mail
• Body definisce il corpo della mail
• X-Priority definisce il grado di priorità della mail (bassa=Low, normale=Normal, alta=High)
Quest'ultimo parametro è valido solo per Microsoft Outlook Express: Altri client di posta elettronica, tra cui quelli di Netscape Navigator, utilizzano la dicitura Priority
La sintassi per l'utilizzo è semplice, basta accodare di seguito nel link di tipo mailto: i vari parametri; vediamo un esempio basilare:

<a href="mailto:pippo@server.it?

Subject=Oggetto&Body=Corpo della mail">

Scrivimi

</a>

Disabilitare una casella di testo

In Html è molto semplice disabilitare una casella di testo ed impedire che un utente vi scriva dentro. Ci sono due metodi, uno mediante l'utilizzo della patola chiave disabled ed uno mediante l'utilizzo della patola chiave readonly.
Vediamo un esempio:

<input type="text" name="campo1" value="scrivi qui..." disabled>

<input type="text" name="campo2" value="scrivi qui..." readonly>

Esiste tuttavia un altro metodo, ma non si tratta di puro Html, ma di un sistema che richiede l'ausilio di Javascript; il fine è quello di spostare altrove il cursore quando si tenta di posizionarlo nella casella di testo:

<input type="text" name="campo3" value="scrivi qui..."

onFocus="this.blur()">

Impedire ad un testo di andare a capo

Nell'editoria Web è molto importante presentare contenuti scritti in maniera chiara e precisa, in modo da permettere al lettore di leggere con semplicità e di far saltare all'occhio in maniera chiara una fase importante del brano testuale.
Nel Manuale di Html, precisamente nella lezione Formattazione del testo, abbiamo visto che è possibile unire due parole grazie allo spazio unificatore  , che oltre ad unire due parole senza mandarle a capo, crea nella pagina uno spazio vuoto.
Ma se le parole da mandare a capo fossero comunque unite? Mi spiego: alcuni caratteri, come il trattino (-), per i browser Web rappresentano un carattere che, a fine del capoverso, o per dirla in gergo tecnico alla fine dell'area del browser, non creano unione fisica, pur creandola visivamente.
Può capitare di utilizzare, ad esempio, il termine by-passare (evitare, scavalcare, far fronte a) che il browser, nel caso di un ritorno a capo, restituirà in questo modo:

by-
  passare

Per evitare che ciò accada è necessario utilizzare un Tag che non consenta il ritorno a capo: utilizzate quindi:

<nobr>by-passare</nobr>

e dormite sonni tranquilli :-)

Referenze dei Tag HTML

Tag	Descrizione
a	Crea un collegamento ipertestuale (link); necessita dell'attributo href
abbr	Utilizzato per racchiudere delle abbreviazioni
acronym	Utilizzato per racchiudere degli acronimi
address	Scrive un testo impostandolo come un indirizzo di una persona, di un'azienda, ecc...
applet	Include un'applet Java all'interno di una pagina Html
area	Crea un'area linkabile su un'immagine
b	Imposta il testo compreso tra i Tag di apertura e chiusura in grassetto
base	Stabilisce alcune caratteristiche di base della pagina corrente
basefont	Stabilisce alcune stilizzazioni di base per la pagina corrente
bdo	Necessita dell'attributo dir e serve a cambiare direzione al testo compreso: da destra verso sinistra (ltr di default) e da sinistra verso destra (rtl)
bgsound	Permette di inserire una musica di sottofondo; si consiglia di utilizzarlo con parsimonia e alla fine della pagina
big	Aumenta la dimensione del testo rispetto a quella specificata esplicitamente o per default
blink	Crea l'effetto testo lampeggiante (valido solo per Netscape Navigator)
blockquote	Crea uno spazio di tabulatura sulla sinistra per gli elementi inclusi nei Tag di apertura e di chiusura
body	Specifica il corpo della pagina: tutto ciÃ² che Ã¨ compreso tra i tag di apertura e di chiusura saranno mostrati a video
br	Imposta un ritorno a capo senza lasciare un'interlinea vuota
button	Simile ad un input con type="button" crea un bottone per un modulo HTML
caption	Aggiunge un titolo ad una tabella, senza necessitÃ di includerlo in una cella
center	Centra gli elementi compresi tra i Tag di apertura e di chiusura; in disuso, si preferisce usare align="center" su p o su div
cite	Evidenzia una citazione indentando il testo contenuto ed impostandolo in corsivo
code	Utilizzato per aggiungere ad una pagina un esempio di codice; simile al Tag pre, con la differenza che non indenta il testo riconoscendo tutti gli spazi vuoti
col	Con l'utilizzo di un colgroup aggiunge un gruppo ad una tabella
colgroup	Crea un gruppo per una tabella
dd	Tag testuale utilizzato per enfatizzare definizioni
del	Come strike sbarra un testo
dfn	Utilizzato per racchiudere delle definizioni: enfatizza il testo in corsivo, come i
dir	Permette di creare elenchi come il Tag ul
div	Tag di testo che comporta un ritorno a capo ma non un'interlinea vuoto alla chiusura
dl	Apre un blocco di definizioni
doctype	Riporta le specifiche e la versione Html utilizzata nella pagina corrente
dt	Specifica il testo a cui fa riferimento una definizione scritta in un dd
em	Enfatizza un testo stilizzandolo in corsivo; equivale ad i
embed	Permette di inserire un filmato o altri tipi di elementi multimediali, utilizzando il lettore predefinito del client connesso
fieldset	Crea un'area dedicabile ad un form e permette di inserire un titolo compreso nel box con l'utilizzo dei Tag legend
font	Permette la formattazione del testo: colore, dimensione e carattere da utilizzare
form	Apre un modulo Html; Ã¨ necessario specificare il method da utilizzare e l'action a cui dirigere i dati
frame	Indica i riferimenti ad un file contenuti in un frameset; necessita dell'attributo src per specificare il file
frameset	Crea un set di frame

h1	Titolo di primo livello
h2	Titolo di secondo livello
h3	Titolo di terzo livello
h4	Titolo di quarto livello
h5	Titolo di quinto livello
h6	Titolo di sesto livello
head	Contiene gli elementi di back-office di intestazione della pagina, quali script, meta Tag, stilizzazioni, ecc...
hr	Crea una linea orizzontale di separazione
html	Apre e chiude il codice Html della pagina, ad eccezione della dichiarazione doctype
i	Imposta il testo compreso tra i Tag di apertura e chiusura in corsivo
iframe	Imserisce in una pagina un frame in linea
img	Imserisce un'immagine nella pagina; necessita dell'attributo src
input	Permette di creare una casella di testo, pulsanti di scelta o bottoni; Ã¨ necessario specificare l'attributo type; va inserito in un form
ins	Sottolinea il testo compreso tra i Tag di apertura e di chiusura, come il Tag u
isindex	Sostituisce alcuni elementi dei form HTML
kbd	Enfatizza un testo che viene richiesto dal sistema all'utente
label	Permette ad un testo di far riferimento ad un elemento di un form grazie al suo attributo for legandolo all'id dell'elemento del modulo
legend	Inserito in un fieldset permette di specificarne il titolo in una legenda
li	Crea degli item per un elenco numerato (ol) o puntato (ul)
link	Permette di includere un file Css esterno
map	Inizializza una mappa d'immagine
marquee	Crea l'effetto testo scorrevole (valido solo per Ms Internet Explorer)
menu	Anche questo Tag puÃ² sostituire il classico ul per l'elenco puntato
meta	Specifica una serie di parametri per la pagina corrente, come il titolo della pagina, le parole chiave per i motori di ricerca, l'autore, ecc...
nobr	Impedisce ad una frase compresa tra i Tag di apertura e di chiusura di andare a capo
noframes	Presenta un messaggio a video sui browser che non supportano i frames
noscript	Presenta un messaggio a video sui browser che non supportano il linguaggio di scripting utilizzato
object	Specifica un elemento multimediale tipo filmati Flash
ol	Crea un elenco numerato; gli itam sono racchiusi nei Tag di apertura e di chiusura li
optgroup	Con l'attributo label crea un elenco definito in una select, dividendo i vari option per categoria
option	Specifica gli item di una casella di scorrimento select
p	Tag di testo che comporta un ritorno a capo ed un'interlinea vuoto alla chiusura
param	Specifica i parametri di un'applet Java
pre	Testo preformattato; non necessita di br per andare a capo e conta tutti gli spazi vuoti
q	Enfatizza ed indenta del testo
s	Abbraviazione di strike
samp	Enfatizza un testo di esempio
script	Accetta codice Javascript o VBScript tra i Tag di alertura e di chiusura; si consiglia di specificare il linguaggio nell'attributo language
select	Permette di creare una casella di scorrimento; Ã¨ necessario utilizzare il Tag option per specificare gli item; va inserito in un form

small	Diminuisce la dimensione del testo rispetto a quella specificata esplicitamente o per default
span	Tag testuale che non comporta ritorno a capo
strike	Sbarra il testo compreso tra i Tag di apertura e di chiusura
strong	Equivale a b per impostare il grassetto
style	Specifica stilizzazioni Css tra i tag di apertura e di chiusura
sub	Imposta come "pedice" il testo compreso tra i Tag di apertura e di chiusura
sup	Imposta come "apice" il testo compreso tra i Tag di apertura e di chiusura
table	Apre una tabella per la formattazione di un layout o di una serie di dati
tbody	Contiene il corpo di una tabella
td	Rappresenta una cella di una tabella; da inserire nei tag table
textarea	Permette di creare un'area di testo; inserito in un form
tfoot	Specifica una frase per la fine di una tabella
th	Specifica l'intestazione per il titolo di una tabella
thead	Contiene un'intestazione per il titolo di una tabella
title	Specifica il titolo della pagina; va inserito tra i Tag di apertura e di chiusura head
tr	Contiene una serie di td disposte in orizzontale; da inserire nei tag table
tt	Testo a spaziatura fissa: riporta perfettamente in colonna tutte le lettere e/o simboli, anche di dimensioni differenti
u	Sottolinea il testo compreso tra i Tag di apertura e chiusura
ul	Crea un elenco puntato; gli itam sono racchiusi nei Tag di apertura e di chiusura li
var	In un blocco di codice di esempio stampato a video evidenzia parole chiave del codice stesso
xml	Permette di far riferimento ad un file Xml; necessita dell'attributo src per richiamare il file e di un id per un riferimento univoco

Fonte: http://www.gcaruso.eu/Manuali%20e%20dispense/Informatica/manualehtml-1.doc

Data creazione: 14/02/2011 9.57 Creato da: Bologna Rocco
Data ultima modifica: 14/02/2011 9.57 Modificato da: Bologna Rocco

Guida rapida di HTML

per il corso di Fondamenti di informatica

Introduzione

In questo documento vogliamo raccogliere le informazioni relative ai comandi che abbiamo incontrato nel corso base di programmazione HTML.
L'idea è quella di creare un documento agile ed efficace, che possa aiutarci nella scrittura di documenti in HTML.
Non ci proponiamo di realizzare quindi un vero e proprio manuale utente, esaustivo e dettagliato, quanto piuttosto di avere a portata di mano quelle spiegazioni sintetiche dei singoli comandi che ci permetteranno di ricordarci rapidamente quanto abbiamo sperimentato durante il corso; si spera che, grazie a queste spiegazioni, capiamo come comportarci nella scrittura del nostro documento, restando inteso che, in difetto di funzionamento di questo sistema di illuminazione, informazioni più complete potranno essere recuperate sfruttando i testi o visitando i siti WEB indicati a lezione.
Non dimentichiamo, inoltre, che le lezioni si sono limitate alla presentazione dei principali comandi HTML standard con alcune delle loro opzioni. In questo documento, quindi, non troveranno molto spazio caratteristiche proprie di particolari implementazioni del linguaggio, né verranno documentate tutte le opzioni di tutti i comandi (anche se qualcosa in più di quanto visto a lezione ci sarà).

Impaginazione e simbologia

Nel documento, ciascun comando viene descritto da una linea di testo. Se il comando ammette attributi, essi sono spiegati nelle linee seguenti a quella della descrizione primaria del comando, generalmente dedicando una linea a ciascun attributo. Ciò non deve far dimenticare che in un singolo comando possono essere espressi più attributi allo stesso tempo.
I nomi dei comandi sono scritti in carattere maiuscole per agevolarne la lettura. Resta inteso che i visualizzatori sono in grado di interpretarne anche la versione minuscola.
Per descrivere i comandi vengono usate le seguenti convenzioni:

URL	URL di un file esterno oppure nome di un file locale; in entrambi i casi URL rappresenta la destinazione del collegamento
?	una cifra (per esempio, <H?> sta per <H1>, <H2> e così via)
??	due cifre, applicando due volte quanto appena detto
?*	numero di una o più cifre, iterando la convenzione detta sopra (per esempio: <HR WIDTH=“?*%”> significa che WIDTH può assumere valori (interi) percentuali di una o più cifre)
.*	testo arbitrario di uno o più caratteri alfanumerici (per esempio, ALT=".*" significa che il valore dell’attributo ALT sarà una stringa)
*.[,.]*	una o più porzioni di testo separate da virgole
\|	separatore di valori alternativi per un attributo (per esempio, ALIGN=“LEFT\|RIGHT\|CENTER” significa che l’attributo ALIGN può assumere uno dei tre valori alternativi LEFT, RIGHT e CENTER)
RGB	tripletta di numeri esadecimali di due cifre (per esempio, BGCOLOR="#RGB" significa che BGCOLOR è composto da tre coppie di numeri esadecimali, ciascuna delle quali può assumere, indipendentemente dalle altre, i valori compresi fra 00 e FF)
<tag></tag>	comando parentetico: ha effetto sulla porzione di documento compresa fra la marca di inizio, cioè <tag>, e quella di fine comando, cioè </tag> (per esempio: <em>testo da evidenziare</em> istruisce il visualizzatore a evidenziare il testo compreso fra le due marche)

Elementi di sintassi HTML

Comandi di formattazione del documento

Identificatore di tipo	<HTML></HTML>	all’inizio e alla fine del file
Testa	<HEAD></HEAD>	informazioni descrittive, per esempio il titolo o i metacomandi
Corpo	<BODY></BODY>	contenuto vero e proprio del documento

La struttura di una pagina HTML dovrebbe sempre essere come segue:

<HTML>
<HEAD>
informazioni descrittive
</HEAD>
<BODY>
il contenuto vero e proprio della pagina
</BODY>
</HTML>

Nella sezione HEAD possono trovare spazio i seguenti comandi:

Titolo	<TITLE></TITLE>	nome del documento; il visualizzatore lo scrive generalmente nella barra del titolo della finestra
Meta-informazioni	<META>	informazioni descrittive, usate spesso da programmi di catalogazione automatica di pagine web
Contenuto della pagina	<META NAME=“description” content=“.*”>	riassunto del documento
Parole chiave della pagina	<META NAME=“keywords” content=“.[,.]”>	parole chiave separate da virgole, sono usate principalmente dai classificatori dei motori di ricerca per classificare il documento

Autore	<META NAME="author" content=".*">	il nome dell'autore del codice
Generatore	<META NAME="generator" CONTENT=".*">	il programma di impaginazione che ha generato il codice HTML
Auto-aggiornamento del documento	<META HTTP-EQUIV=“refresh” CONTENT=“?*”>	il documento viene aggiornato ogni ?* secondi
Aggiornamento remoto del documento	<META HTTP-EQUIV=“refresh” CONTENT=“?*; URL=URL”>	dopo ?* secondi il documento originario viene sostituito con quello di URL; notare che nel comando la prima stringa URL è la parola chiave composta dai caratteri U, R e L, mentre la seconda è una variabile che rappresenta qualunque valore impiegabile come collegamento valido

Il comando BODY permette di definire varie caratteristiche dell’intero foglio tramite l’assegnamento di valori ai suoi atttributi. Queste caratteristiche sono illustrate nel seguito. È importante notare due cose:

a differenza delle informazioni che possono trovare posto nella sezione HEAD, fra il tag d’inizio e quello di fine testata, quelli che seguono sono attributi del tag BODY e quindi devono trovarsi nella linea di definizione del comando;
il comando BODY va scritto una sola volta, con tutte le sue opzioni l’una di seguito all’altra: è solo per chiarezza espositiva che qui sono riportate su righe diverse.

Colore di sfondo	<BODY BGCOLOR="#RGB">
Immagine di sfondo	<BODY BACKGROUND="URL">
Colore del testo	<BODY TEXT="#RGB">
Colore dei collegamenti non ancora visitati	<BODY LINK="#RGB">	di solito è blu: #0000FF
Colore dei collegamenti visitati	<BODY VLINK="#RGB">	dove V sta per visited; di solito è porpora: #800080
Colore del collegamento selezionato	<BODY ALINK="#RGB">	dove A sta per active; di solito è rosso: #FF0000

Comandi per la formattazione della pagina

Titoli di sezioni	<H?></H?>	sono previsti 6 livelli di titolazione; i visualizzatori evidenziano il testo dei titoli rispetto a quello del resto del documento, con enfasi decrescente al crescere del livello di titolazione
Allineamento dei titoli	<H? ALIGN=“LEFT\|CENTER\| RIGHT”></H?>
Testo preformattato	<PRE></PRE>	visualizzato come testo ASCII formattato con carattere a passo fisso
Blocco di citazioni	<BLOCKQUOTE> </BLOCKQUOTE>	di solito rientrato
Blocco di codice	<CODE></CODE>	per listati di programmi
Indirizzo dell'autore del documento	<ADDRESS></ADDRESS>	spesso in corsivo

Comandi per la formattazione del testo

Enfatizzato	<EM></EM>	di solito in corsivo
Molto enfatizzato	<STRONG></STRONG>	di solito in neretto
Corsivo	<I></I>	dove I sta per italics
Neretto	<B></B>	dove B sta per bold
Citazione	<CITE></CITE>	di solito in corsivo
Sottolineato	<U></U>
Lampeggiante	<BLINK></BLINK>	chi lo conosce, lo evita
Apice	<SUP></SUP>
Pedice	<SUB></SUB>
Centrato	<CENTER></CENTER>	applicabile anche alle immagini
Corpo (dimensione) del carattere	<FONT SIZE=“?”></FONT>	può variare fra 1 e 7
Impostazione della dimensione di base	<BASEFONT SIZE=“?”>	in difetto di opzioni è 3
Variazione del corpo	<FONT SIZE="+\|-?"></FONT>	incrementa o diminuisce il valore attuale
Incremento unitario del corpo	<BIG></BIG>	equivalente a SIZE=“+1”
Riduzione unitaria del corpo	<SMALL></SMALL>	equivalente a SIZE=“-1”

Colore del testo	<FONT COLOR="#RGB"> </FONT>	alcuni colori possono essere indicati con il loro nome inglese: red, green, blue, black, eccetera
Testo su più colonne	<MULTICOL COLS=“?”> </MULTICOL>
Spaziatura	<SPACER>
Tipo di spaziatura	<SPACER TYPE=“horizontal\| vertical\|block”>
Ampiezza della spaziatura	<SPACER SIZE=“?”>

Interruzioni del testo

A capo	<BR>	dove BR sta per branch
Paragrafo	<P></P>	il tag finale può essere omesso
Paragrafo allineato	<P ALIGN=“LEFT\|CENTER\| RIGHT”></P>
A capo con ripristino dei margini	<BR CLEAR=“LEFT\|RIGHT\| ALL”>	clear=“all” è la bacchetta magica di HTML
Riga orizzontale	<HR>	dove HR sta per horizontal ruler
Riga orizzontale allineata	<HR ALIGN=“LEFT\|RIGHT\| CENTER”>
Larghezza della riga	<HR WIDTH=“?\|?%”>	espressa in pixel o in percentuale rispetto alla larghezza della pagina
Spessore della riga	<HR SIZE=“?*”>	espresso in pixel
Riga colorata	<HR COLOR=“#RGB”>
Riga piatta	<HR NOSHADE>	senza l'effetto tridimensionale

Caratteri speciali

I caratteri appartenenti all’insieme di caratteri noto come US-ASCII o ISO-8859-1, che codifica il font detto Latin Alphabet No 1 (abbreviato di solito in Latin-1), possono essere rappresentati in un documento sorgente HTML da sequenze di caratteri del tipo &#?*; dove ?* sta per il numero da 09 a 255 che il carattere occupa nell’ordine di definizione di Latin-1 (i caratteri da 00 a 08 non sono usati; non tutti i visualizzatori sono in grado di rappresentare tutti i caratteri). Per esempio, la frazione un quarto (¼) è rappresentabile con ¼ il simbolo tilde (~) con ~ e così via.
Per alcuni caratteri esiste anche la possibilità di usare un nome al posto del numero. Per esempio, la a minuscola con accento grave (à, non presente sulle tastiere americane) si rappresenta sia con à che con à.
In Appendice è riportata una tabella dei caratteri speciali Latin 1 con la relativa codifica.

Collegamenti ipertestuali

Marcatura di un punto di un documento	<A NAME=".*"></A>
Collegamento a un punto dello stesso documento	<A HREF="#.*"></A>
Collegamento generico	<A HREF="URL"></A>	può essere anche un’immagine, un filmato, eccetera
Collegamento a un punto dell’URL	<A HREF="URL#.*"></A>	dove “.*” è un nome definito in URL con <NAME>
Collegamento da visualizzare in una finestra specifica	<A HREF="URL" TARGET=".*"></A>	dove in TARGET si riferisce una finestra definita secondo la sintassi dei frames; la pagina definita da URL verrà visualizzata nella finestra scritta in TARGET

Trattamento delle immagini

Immagine incorporata	<IMG SRC="URL">
Didascalia	<IMG SRC="URL" ALT=".*">	scritta su video quando non viene visualizzata l'immagine; alcuni visualizzatori mostrano la didascalia quando il cursore passa sull’immagine
Dimensioni dell’imagine	<IMG SRC="URL" HEIGHT=“?” WIDTH=“?”>	in pixel; rendono più rapida la visualizzazione; se diversi dalle dimensioni reali dell’immagine, il visualizzatore allarga o stringe l’immagine per adattarla ai valori specificati
Spessore del bordo	<IMG SRC="URL" BORDER=“?*”>	espresso in pixel
Allineamento dell’immagine	<IMG SRC="URL" ALIGN=“LEFT\|RIGHT\|TOP\| MIDDLE\|BOTTOM”>

Mappe sensibili

Mappa sensibile remota	<IMG SRC="URL" ISMAP>	tipo server-side
Mappa sensibile locale	<IMG SRC="URL" USEMAP="URL">	tipo client-side; l’URL identifica la definizione di mappa
Mappa locale	<MAP NAME=".*"></MAP>
Aree sensibili della mappa	<AREA SHAPE="RECT\|POLY\| CIRCLE" COORDS=".[,.]" HREF="URL">

Liste

Esistono vari tipi di liste; ciascuno di essi rispetta la struttura che segue:

<Tag_che_identifica_il_tipo_di_lista>
<LI>il testo del primo elemento della lista
<LI>il testo del secondo elemento della lista
...
<LI>il testo dell’ultimo elemento della lista
</Tag_che_identifica_il_tipo_di_lista>

Le liste di definizioni usano, al posto del tag LI, una coppia di descrittori:
<DT>la voce da definire <DL>la definizione
Nel seguito sono elencati i vari tipi di lista, ognuno con il proprio Tag_che_identifica_il_tipo_di_lista e le eventuali opzioni:

Lista ordinata	<OL></OL>
Lista ordinata compatta	<OL COMPACT></OL>
Tipo di numerazione	<OL TYPE=“1\|I\|i\|A\|a”>	lista ordinata con numeri arabi, romani maiuscoli, minuscoli, lettere maiuscole, minuscole, l’ordine è ascendente
Alterazione del tipo di numerazione	<LI TYPE=“1\|I\|i\|A\|a”>	vale per la voce corrente e le seguenti
Numero di partenza	<OL START=“?*”>	il valore deve essere espresso in numeri arabi, qualunque sia il tipo di numerazione scelto
Alterazione della numerazione	<LI VALUE=“?*”>	vale per la voce corrente e le seguenti
Lista non ordinata	<UL></UL>	ogni voce è preceduta da un carattere grafico segnaposto
Lista non ordinata compatta	<UL COMPACT></UL>
Tipo di segnaposto	<UL TYPE=“DISC\|CIRCLE\| SQUARE”>
Cambio di segnaposto	<LI TYPE=“DISC\|CIRCLE\| SQUARE”>	vale per la voce corrente e le seguenti
Lista di definizioni	<DL></DL>
Lista di definizioni compatta	<DL COMPACT></DL>

Menu	<MENU></MENU>
Menu compatto	<MENU COMPACT></MENU>
Direttorio	<DIR></DIR>
Direttorio compatto	<DIR COMPACT></DIR>

Tabelle

Delimitatore di tabella	<TABLE></TABLE>
Delimitatore di riga	<TR></TR>
Cella di dati all’interno di una riga	<TD></TD>
Cella di intestazione	<TH></TH>	di norma centrata e in grassetto
Bordo	<TABLE BORDER=“?*”>	espresso in unità che sono implementate a discrezione del visualizzatore
Colore di sfondo	<TABLE BGCOLOR=“#RGB”>
Immagine di sfondo	<TABLE BACKGROUND=“URL”>	l’immagine viene visualizzata dietro tutte le celle
Spazio tra celle	<TABLE CELLSPACING=“?*”>	in difetto di opzioni è 2
Spazio interno	<TABLE CELLPADDING=“?*”>	lo spazio fra il bordo di una cella e il suo dato; in difetto di opzioni è 1
Larghezza della tabella	<TABLE WIDTH=“?\|?%”>	espressa in pixel o in percentuale rispetto alla larghezza della pagina

Allineamento del testo della tabella:

Allineamento orizzontale nella riga	<TR ALIGN=“LEFT\|CENTER\|RIGHT”>
Allineamento verticale nella riga	<TR ALIGN=“TOP\|MIDDLE\|BOTTOM\| BASELINE”>
Allineamento orizzontale nella cella	<TD ALIGN=“LEFT\|CENTER\|RIGHT”>
Allineamento verticale nella cella	<TD ALIGN=“TOP\|MIDDLE\|BOTTOM\| BASELINE”>
Allineamento orizzontale nella intestazione	<TH ALIGN=“LEFT\|CENTER\|RIGHT”>
Allineamento verticale nella intestazione	<TH ALIGN=“TOP\|MIDDLE\|BOTTOM\| BASELINE”>

Estensione di una cella:

Estensione in colonne	<TD COLSPAN=“?*”>
Estensione in righe	<TD ROWSPAN=“?*”>
Larghezza della cella	<TD WIDTH="?\|?%">	espressa in pixel o in percentuale rispetto alla larghezza della tabella
Colore di sfondo della cella	<TD BGCOLOR="#RGB">

Estensione di una cella di intestazione:

Estensione in colonne	<TH COLSPAN=“?*”>
Estensione in righe	<TH ROWSPAN=“?*”>
Larghezza della intestazione	<TH WIDTH="?\|?%">	espressa in pixel o in percentuale rispetto alla larghezza della tabella
Colore di sfondo della intestazione	<TH BGCOLOR="#RGB">
Didascalia	<CAPTION></CAPTION>

Riquadri (frames)

Pagina composta a riquadri	<FRAMESET></FRAMESET>	sostituisce <BODY>
Altezza delle righe	<FRAMESET ROWS= “.,.[.\|.]”></FRAMESET>	espressa in pixel o in percentuale
Larghezza delle colonne	<FRAMESET COLS= “.,.[.\|.]”></FRAMESET>	espressa in pixel o in percentuale
Dichiarazione di frame	<FRAME>	definizione di ogni riquadro
Documento incorporato nel riquadro	<FRAME SRC="URL">
Denominazione del riquadro	<FRAME NAME=".*">	nomi predefiniti: _blank, _self, _parent, _top
Rientro orizzontale	<FRAME MARGINWIDTH=“?*”>	distanza in pixel del contenuto dai margini destro e sinistro
Rientro verticale	<FRAME MARGINHEIGHT=?>	distanza in pixel del contenuto dai margini alto e basso
Barra di scorrimento	<FRAME SCROLLING="YES\| NO\|AUTO">
Ridimensionamento impedito	<FRAME NORESIZE>

Cornice del riquadro	<FRAME FRAMEBORDER="yes\|no">
Spazio intorno al riquadro	<FRAME FRAMESPACING="?*">	espresso in pixel; effetto riquadro flottante
Contenuto in mancanza di riquadri	<NOFRAMES></NOFRAMES>	per i visualizzatori che non supportano i riquadri

Moduli

Definizione	<FORM ACTION="URL" METHOD=GET\|POST> </FORM>
Campo di immissione	<INPUT TYPE="TEXT\|PASSWORD\| IMAGE\|CHECKBOX\|RADIO\| HIDDEN\|RESET\|SUBMIT">
Nome del campo	<INPUT NAME=".*">
Valore del campo	<INPUT VALUE=".*">
Inizializzazione di una scelta	<INPUT CHECKED>	per checkbox e radio
Dimensione del campo	<INPUT SIZE=“?*”>	espressa in caratteri
Lunghezza massima	<INPUT MAXLENGTH=“?*”>	espressa in caratteri
Lista di opzioni	<SELECT></SELECT>	ciascuna opzione è identificata da un tag OPTION
Numero di opzioni	<SELECT SIZE=“?*”> </SELECT>
Nome del campo	<SELECT NAME=".*"> </SELECT>
Scelta multipla	<SELECT MULTIPLE>	permette di selezionare più opzioni
Opzioni	<OPTION>
Opzione standard	<OPTION SELECTED>
Finestra di immissione	<TEXTAREA></TEXTAREA>
Dimensioni del campo di immissione	<TEXTAREA ROWS=“?” COLS=“?”></TEXTAREA>
Nome del campo	<TEXTAREA NAME=".*"> </TEXTAREA>

Miscellanea

Prologo	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
URL di riferimento del documento	<BASE HREF="URL">	nella testa della pagina
Nome della finestra standard	<BASE TARGET=".*">	nella testa della pagina
Commento	<!--.*-->

Appendice: i caratteri speciali

Simbolo	Entità HTML	Codice ISO Latin-1
¡	¡	¡
¿	¿	¿
"	"	"
« »	« »	« »
*(C’è, ma non si vede)*
&	&	&
¢	¢	¢
©	©	©
÷	÷	÷
>	>	>
<	<	<
µ		µ
·	·	·
¶	¶	¶
±	±	±
£	£	£
®	®	®
§	§	§
¥	¥	¥
á Á	á Á	á Á
à À	à À	à À
â Â	&acric; Â	â Â
å Å	å Å	å Å
ã Ã	ã Ã	ã Ã
ä Ä	ä Ä	ä Ä
æ Æ	æ Æ	æ Æ
ç Ç	ç Ç	ç Ç
é É	é É	é É
è È	è È	è È
ê Ê	ê Ê	ê Ê
ë Ë	ë Ë	ë Ë
í Í	í Í	í Í
ì Ì	ì Ì	ì Ì
î Î	î Î	î Î
ï Ï	ï Ï	ï Ï
ñ Ñ	ñ Ñ	ñ Ñ
ó Ó	ó Ó	ó Ó
ò Ò	ò Ò	ò Ò
ô Ô	ô Ô	ô Ô
ø Ø	ø Ø	ø Ø
õ Õ	õ Õ	õ Õ
ö Ö	ö Ö	ö Ö
ß	ß	ß
ú Ú	ú Ú	ú Ú
ù Ù	ù Ù	ù Ù
û Û	û Û	û Û
ü Ü	ü Ü	ü Ü
ÿ	ÿ	ÿ
´ `		´ `

Fonte: http://dinamico2.unibg.it/lazzari/manuhtml.doc

UNIVERSITÀ DEGLI STUDI DI BERGAMO
Facoltà di Lingue e Letterature Straniere
Autore: Marco Lazzari

Guida html

HTML
Guida di base

Pag	Argomento	Specifiche
1	L'HTML e i browser
3	Cosa è un editor ? e cosa è il codice html ?
4	Struttura base di un documento HTML
5	Testata	Title - Meta
6	Il Corpo	Body
7	Il testo	Headings – Font – caratteri speciali – stili testo -
10	Liste	Ordinate – Non ordinate
13	Link
14	Immagini	IMG e attributi
15	Tabelle
17	Frames	Frameset e frame
20	Form

ITSOS “A. Steiner” - Milano
Comunicazioni Multimediali

A cura dei docenti di STC

L'HTML e i browser

L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web. Un documento html, infatti, non è nient'altro che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, su come far scorrere il testo, e altre cose di questo genere.
Il Browser è il programma che usate quando navigate nel Web e svolge principalmente due compiti:

scarica i vari files che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo
legge i documenti scritti in html, e a seconda delle indicazioni ivi contenute, visualizza la pagina in un modo, piuttosto che in un altro; inoltre i vari files associati a quel documento (ad esempio le immagini, o i filmati in flash) vengono disposti secondo le indicazioni del codice html

Oltre ad Internet Explorer, il browser più diffuso, esistono altri browser: prima di tutto lo "storico" Netscape Navigator, con cui la Microsoft ha ingaggiato una vera e propria guerra (vincendola). Poi il browser open source Mozilla, che nasce da Netscape e ha la particolarità di essere a codice aperto, cioè con la possibilità per gli sviluppatori di vedere com'è fatto il programma. Una parte di utenti (si tratta sempre di una minoranza comunque rispetto allo strapotere di Internet Explorer) utilizza poi Opera, un browser norvegese celebre per la sua velocità di visualizzazione delle pagine. Ovviamente esistono anche molti altri browser. Per ciascuno di essi esistono poi differenti versioni a seconda del sistema operativo (Windows, Mac OS, Linux, o altri).
È importante sin dall'inizio acquisire una mentalità multi-browser, perché il mestiere del webmaster non consiste tanto nel conoscere nei minimi dettagli il codice HTML, quanto piuttosto nel sapere come il codice HTML verrà visualizzato sul computer dell'utente: infatti uno dei lavori più difficili è quello di riuscire a far vedere correttamente il proprio sito con i browser e le piattaforme più svariate.
I files scaricati dal web vengono memorizzati in una particolare cartella del computer che prende il nome di cache.
In Internet Explorer è possibile visualizzarla utilizzando i comandi:
Strumenti > Opzioni Internet > Generale > Impostazioni > Visualizza file
In questo modo verrà mostrato il percorso della cartella in cui i documenti vengono temporaneamente memorizzati.
La visualizzazione di un file html da parte del browser prende il nome di rendering della pagina. Motore di rendering è dunque quella sezione del browser che si occupa di mostrare sul video la pagina.
Il compito del linguaggio HTML è dunque quello di spiegare al browser come i vari files relativi al documento in esame devono essere disposti all'interno della pagina che stiamo visualizzando.
In qualsiasi momento è possibile visualizzare il codice HTML delle pagine che stiamo visitando. Con Internet Explorer:
Visualizza > HTML
HTML ( Hyper Text Markup Language) è formato da definizioni, elementi (tags), questi impartiscono al browser delle direttive ben precise al fine di ottenere il risultato a video, una sorta di interpretazione che varia a volte a seconda del tipo di browser adoperato. Si tratta dunque di conoscere il significato dei vari elementi e come questi possono essere combinati per avere la padronanza del linguaggio.
Per la stesura di questo linguaggio si fa uso di un normale editor di testi quale potrebbe essere il semplicissimo Blocco Note di Windows, o di editor specifici per HTML o, ancora, di editor visuali.

Cosa è un editor ? e cosa è il codice html ?
Un editor, altro non è che uno strumento che ci consente di scrivere in modo semplice e veloce righe di codice html; il codice che i browser di navigazione, qualunque essi siano, riconoscono ed interpretano. Si potrebbe paragonarlo ad un programma per videoscrittura, anzi sono moltissime le similitudini, con la sola differenza che il testo scritto da questi editors è formattato nel modo giusto per dare vita a pagine di ipertesto; da qui il nome HTML: Hyper Text Markup Language.
Gli editors si dividono sostanzialmente in due categorie:
Testuali, bisogna scrivere il codice, quindi conoscerlo, offrono gli strumenti giusti con suggerimenti necessari alle varie esigenze, si ha il pieno controllo della situazione superando quelli che spesso sono i limiti degli editors visuali.
Visuali, molto semplici, simili ai programmi di grafica permettono di disegnare o semplicemente trascinare quello che serve all'interno dell'ambiente di sviluppo, operazione che genera automaticamente codice html.
Dopo questa considerazione chi avesse deciso di affidarsi agli editors visuali può tranquillamente smettere di leggere il seguito di queste pagine, non gli serviranno a molto, parleremo di codice che l'editor visuale gestisce in assoluta autonomia. Un saluto a queste persone che probabilmente torneranno non appena insorgeranno le prime difficoltà, dovute alla mancata realizzazione di determinate cose possibili solo se a conoscenza del codice giusto.
Un'ultima raccomandazione prima di passare in rassegna i vari elementi (tags); sarà bene ricordare sempre, che qualsiasi pagina creata per la rete, prima di essere visualizzata dovrà essere scaricata nella memoria (cache) del browser; quindi pagine lunghe o farcite di molte immagini e suoni, sono spesso motivo di abbandono della visita di un visitatore a causa dell’eccessiva attesa. Evitatele nel modo più assoluto, meglio pianificare diverse pagine al posto di una singola. Suddividere il lavoro in più pagine non costa nulla ed offre maggiore flessibilità anche a voi stessi per eventuali modifiche.
Html non è un vero e proprio linguaggio di programmazione, o almeno non come si è abituati a credere quando si parla di programmazione. HTML è molto più semplicemente un insieme di istruzioni: <TAGS> ,che il browser legge in maniera sequenziale, dall'alto verso il basso, da sinistra verso destra; esattamente come avviene la normale lettura di un testo per noi umani.
Queste istruzioni, o meglio questi elementi (tags), sono racchiusi fra parentesi angolari: <queste> ogni elemento (tag) ha un compito preciso e termina con lo stesso elemento preceduto da una barra retroversa, per rifarsi all'esempio appena citato: </queste>.

Struttura base di un documento HTML
Si potrebbe decidere quali elementi (tags) adoperare a seconda di quello che abbiamo intenzione di fare. Il linguaggio HTML non ha variabili da dichiarare o cose di questo genere, ma ha comunque delle regole da rispettare, la più importate di queste regole è la struttura entro la quale lavorano tutti i singoli elementi, questa dovrà essere sempre presente su ogni pagina che andremo a creare, vediamo come è composta questa struttura:

<html>
<head>
<title>la mia prima pagina web</title>
</head>
<body>
Ecco la mia prima pagina in html destinata al web.
</body>
</html>

Di tutto il codice scritto sopra, noi vedremo soltanto ciò che è stato scritto nel corpo (body) del listato; quindi fra gli elementi <body> e </body>:

Ecco la mia prima pagina in html destinata al web.

Ogni pagina html grande o piccola che sia dovrà obbligatoriamente avere sempre i due tags di definizione <html></html>, i due tags per la testata <head></head>, il tag per il titolo <title></title> e i due tags per il corpo <body></body>.
Vediamo in dettaglio tutte queste cose:

<html>

Inizio codice html: tutto ciò che sarà posto all'interno di questo documento e fino al relativo tag di chiusura sarà inteso come struttura del codice html

<head>

Testata o head del documento, in questa sezione trovano posto tutti quei tags che impartiscono direttive al browser quali: titolo, comandi Meta, richiami ai fogli di stile, scripts. Tutto ciò che si trova all'interno della struttura head non sarà visualizzato ma interpretato dal browser, una zona quindi destinata ad uso esclusivo dei soli comandi che impartiscono direttive ben specifiche.

</head>
<body>

Corpo o body del documento, è in questa sezione che lavoreremo maggiormente ed è proprio qui che andranno messe immagini, suoni , filmati, testo, form, tabelle, links e quant'altro faccia parte di html.

</body>
</html>

La chiusura dei vari elementi (tags) e un elemento da non dimenticare mai, solo cosi' potremo avere la certezza di una giusta e corretta interpretazione da parte del browser.

I tags possono essere scritti indifferentemente sia in minuscolo che in maiuscolo, gli spazi lasciati fra un tag e l'altro e fra una parola e l'altra saranno ignorati.

La Testata
La testata (HEAD) di un HTML definisce le caratteristiche principali dell' intero documento, che non verranno direttamente visualizzate dal browser. La mancata definizione di tali caratteristiche non pregiudica la leggibilità del BODY (e quindi fra <head> e </head> potrebbe anche non esserci alcunché), ma, almeno nel caso del tag <TITLE>, sminuisce il contenuto informativo del documento, ed è quindi opportuno non trascurarle.
Ecco i principali tag possibili all'interno di una testata:

1. TITLE : è il titolo del documento, normalmente una mezza dozzina di parole, che serve per la sua identificazione (ad es. da parte di un "motore di ricerca"), e compare nella title bar della finestra del browser.
Sintassi :
<TITLE>....</TITLE>

2. META: invia al server meta-informazioni relative al documento, che non siano trattabili con altri tag della testata. Il server può così identificare e catalogare tali meta-informazioni, ed eventualmente generare risposte al browser a seconda del valore assegnato agli attributi.
Tali attributi sono:
•   CONTENT="valore": definisce il contenuto della meta-informazione. E' obbligatorio.
•   NAME="valore": definisce il nome della meta-informazione. Si usa quando si vuole semplicemente inviare la meta-informazione, senza richiedere risposta.
•   HTTP-EQUIV="valore".

Se valore="Refresh", e se dopo un certo tempo (specificabile), l'utente non si è connesso ad altri documenti, il browser ricarica automaticamente il file, oppure carica un nuovo file HTML, di cui deve essere specificato l'URL.
Ad esempio:
<META HTTP-EQUIV="Refresh" CONTENT="n">
<META HTTP-EQUIV="Refresh" CONTENT="n; risorsa://indirizzoIP/percorso/docum.html">
nel primo caso, dopo n secondi viene ricaricato il file di partenza;
nel secondo caso, n sec dopo il caricamento del file in cui si trova il tag META, viene caricato il file doc.html, che si trova all'URL precisato; ( tale file a sua volta potrebbe contenere un altro tag META, che potrebbe far caricare un altro HTML, ecc.)

Se valore="Description" o se valore="Keywords", è possibile nel valore di CONTENT specificare una descrizione del sito o le parole chiave che lo identificano, che verranno utilizzate dai motori di ricerca presenti in INTERNET.
Ad esempio:
<META HTTP-EQUIV="Keywords" CONTENT="italia,scuola,sperimentazione,milano,multimedia">

Il Corpo
Il corpo (BODY) di un HTML comprende tutto quanto verrà visualizzato all'interno della finestra del browser.

Attributi di BODY

Il tag BODY (come molti altri tag html) ammette diversi attributi, ai quali si possono assegnare dei valori per definire il colore del testo, quello dei link e dello sfondo.
Inoltre, è possibile assegnare come background un'immagine che, replicata automaticamente più volte dal browser, riempirà completamente la pagina video, facendo da sfondo ai testi e alle immagini che compaiono successivamente.
Gli attributi non sono obbligatori, possono essere presenti solo in parte, e non hanno, fra loro, un ordine vincolante. Tuttavia, se sono presenti, devono essere collocati all'inizio del corpo del documento, prima dei tag relativi ai testi, ai link, e alle immagini.
Sintassi :
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb" BACKGROUND="percorso/immagine">

•   BGCOLOR : stabilisce il colore dello sfondo (se assente il background)
•   TEXT : stabilisce il colore del testo
•   LINK : stabilisce il colore di un link non ancora visitato
•   ALINK : stabilisce il colore di un link nell'istante in cui viene attivato
•   VLINK : stabilisce il colore di un link già visitato
•   BACKGROUND : stabilisce l'immagine di sfondo

nota: il valore "#rrggbb" si riferisce a una tripletta di numeri esadecimali che definiscono le componenti di rosso, verde e blu del colore prescelto; ad esempio:
"#FF0000"=rosso; "#00FF00"=verde; "#0000FF"=blu; "#FFFFFF"=bianco;"#000000"=nero; "#FFFF00"=giallo; "#FF00FF"=magenta; "#00FFFF"=cyan;"#545454"=grigio"#4F2F4F"=viola; "#CD7F32"=oro; "#E6E8FA"=argento;

Un esempio di attributi di body:
<BODY BGCOLOR="#000000" TEXT="#F0F0F0" LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF" BACKGROUND="paesaggio.gif">
...
</BODY>
con questi attributi avremo un testo grigio chiaro su sfondo nero; i link saranno inizialmente gialli, blu-verde mentre vengono attivati, e grigio scuro dopo essere stati attivati.

Il Testo
Come detto, i testi (come anche le immagini, i link, ecc.) che il browser dovrà visualizzare si devono immettere all'interno del BODY (e dopo gli attributi di BODY)
Nella presentazione dei testi tramite l'HTML si deve tener conto che:

•   nella lettura del file sorgente, i browser non tengono conto di più spazi bianchi di seguito, dei tabs o delle interruzioni di linea; ad es., un testo che nell’editor viene scritto nel modo:
oggi        è          una

bella          giornata
nel browser apparirà come:
"oggi è una bella giornata"
senza gli spazi bianchi in eccesso, le interruzioni di linea, e la riga vuota in mezzo.

• il browser manda a capo automaticamente il testo in relazione della larghezza della finestra: quindi, a seconda di come l'utente dimensiona la finestra, la pagina verrà visualizzata in modo un po' diverso

Per superare in parte queste limitazioni e formattare il testo in un modo più vario sono previsti dei particolari tag, che ora esamineremo .

1. Headings
Consentono di presentare porzioni del testo di importanza diversa (titoli, sottotitoli, brani, ecc.) differenziandole con caratteri di dimensioni diverse. Esistono sei livelli di headings, numerati da 1 (il maggiore) a 6 (il minore).
Sintassi :
<Hn>Heading</Hn>
dove n è un numero compreso fra 1 e 6.

nota: si tenga presente che introducendo un heading diverso dal precedente si genera automaticamente un ritorno a capo.

Ad esempio:
<H1>TITOLO</H1><H3>Questo è un sottotitolo</H3>
verrà visualizzato in questo modo:
TITOLO
Questo è un sottotitolo

2. Font
Volendo modificare le dimensioni, il colore e il tipo di carattere da utilizzare, è possibile utilizzare il tag <FONT> con i suoi diversi attributi:

- l'attributo SIZE permette di stabilire la dimensione del carattere
Sintassi :
<FONT SIZE=n>testo</FONT>
dove il valore n può variare da 7 (il maggiore) a 1 (il minore).

Ad esempio:
<FONT SIZE=7>Questo </FONT><FONT SIZE=6>testo </FONT>
<FONT SIZE=5>cambia </FONT><FONT SIZE=4>dime</FONT>
<FONT SIZE=3>nsi</FONT><FONT SIZE=2>one</FONT>

apparirà nel seguente modo:

Questo testo cambia dimensione

nota: Il SIZE di default ha valore 3. E' possibile modificarlo con il tag:
<BASEFONT SIZE= n> con n sempre compreso fra 7 e 1.
E' possibile anche un'altra sintassi per l'attributo SIZE, utilizzando il segno "+" o il segno "-". Ad es.:
<FONT SIZE=+2>testo</FONT>
visualizzerà il testo con una dimensione dei caratteri di due gradi maggiore rispetto alla precedente (il massimo è sempre 7).

- l’attributo COLOR permette di stabilire il colore del testo:
<FONT COLOR=#rrggbb>testo</FONT>
oppure
<FONT COLOR= nome in inglese del colore >testo</FONT>

Ad esempio:
<FONT COLOR=#ff0000>Questo testo è rosso</FONT>
<FONT COLOR=green >e questo è verde</FONT>

apparirà nel seguente modo:

Questo testo è rosso e questo è verde

-l’attributo FACE permette di stabilire il tipo di carattere da utilizzare:
<FONT FACE=nome del font>testo</font>
dove « nome del font » è il nome di uno dei caratteri disponibili nel sistema.

Ad esempio:
<FONT FACE=Comic Sans MS> Questo testo appare nel carattere Comic Sans</FONT>

apparirà nel seguente modo:

Questo testo appare nel carattere Comic Sans

E' possibile specificare quale carattere adoperare dando anche delle eventuali alternative separandole da virgole. Se il font scelto non fosse presente sulla macchina del visitatore si tenterà di visualizzare il secondo font, poi il terzo, e se nessuno dei tre fosse presente il browser adopererà il suo, quello di default. Evitate dunque fonts particolari o meglio poco comuni, quasi sicuramente nessuno riuscirà a vedere il testo allo stesso modo di come avreste voluto.

Gli attributi possono essere adoperati contemporaneamente:
<FONT FACE="Comic Sans MS" COLOR="red" SIZE="-1">
Testo con font Comic di colore rosso ed una dimensione -1
</FONT>

3. Caratteri accentati e speciali
I browser supportano anche caratteri accentati definiti dall'International Standards Organization. Per essere leggibili su tutti i computer, essi devono essere inseriti nel testo in un modo particolare, specificandoli fra una '&' commerciale e un punto e virgola .
Così per scrivere "perchè" entro un testo HTML, bisogna digitare:
perchè

Ecco una lista dei caratteri accentati e speciali più importanti:
à    mostra una a minuscola, con accento grave (à) (ì sarà una ì, ecc.)
À    mostra una a maiuscola, con accento grave (À).
á     mostra una a minuscola, con accento acuto (á).
â       mostra una a minuscola, con accento circonflesso (â).
&         mostra una & commerciale.
Æ       mostra il dittongo AE maiuscolo (Æ).
æ        mostra il dittongo AE minuscolo (æ).
ã     mostra una a minuscola, con tilde (ã).
ä       mostra una a minuscola, con dieresi (ä).
ç      mostra una c minuscola, con cedilla (ç).
Ø     mostra una O maiuscola, con lo slash (Ø).
ø     mostra una o minuscola, con lo slash (ø).
"        mostra le virgolette (").
>            mostra il segno maggiore (>).
<            mostra il segno minore (<).
        mostra uno spazio che non ammette rimando a capo
©       mostra il simbolo di copyright (©)
®         mostra il simbolo di registrazione (®)

nota: molti editor HTML consentono di inserire direttamente nel testo queste stringhe, semplicemente digitando il carattere speciale da tastiera.

La stringa   è particolarmente interessante, perchè consente di introdurre uno o più spazi bianchi (no breaking space) che possono essere inseriti dove si vuole per distanziare tra loro le parole con più di uno spazio come succede normalmente.

4. Stili di testo
E' possibile ottenere ulteriori differenziazioni nel layout del testo introducendo stili diversi.
•   <B>...</B>: grassetto (bold).
•   <I>...</I>: corsivo (italic).
•   <U>...</U>: sottolineato (underlined).

5. Altri effetti di Layout

Interruzioni forzate di riga: si ottengono con il tag <BR>: dopo di esso, testi o immagini vengono visualizzati nella riga successiva.
Ad esempio:
<H3>Questo testo<BR>va a capo<BR><BR>due volte.</H3>
verrà visualizzato così:
Questo testo
va a capo

due volte.

nota: in questo modo abbiamo ottenuto anche una riga bianca.

Linee di separazione: è possibile introdurre una linea orizzontale di separazione fra testi o immagini, con il tag <HR>. Esso ammette gli attributi SIZE, ALIGN, WIDTH, e NOSHADE, utili per dimensionare in vari modi la linea.
Sintassi :
<HR SIZE="valore" WIDTH="valore" ALIGN="valore">
•   SIZE determina lo spessore della linea, espresso in pixel attraverso un valore numerico che può variare da 1 a 100.
•   WIDTH determina la lunghezza in percentuale (100%=tutto schermo) o in pixel della linea.
•   ALIGN imposta la collocazione della linea e ammette i valori "right", "left" e "center".
•   NOSHADE consente di visualizzare una linea piena; in sua assenza, appaiono solo i contorni della linea, come se fosse in rilievo.
Esempio:
<HR NOSHADE SIZE="10" ALIGN="center" WIDTH="30%">

nota: non esiste ordine vincolante per gli attributi, né è obbligatorio che siano indicati; in loro assenza vengono impostati i valori di default SIZE=2, ALIGN=center, WIDTH=100%.

Attenzione!
I tag <BR> e <HR> sono due dei pochi tag html che non hanno tag di chiusura, in quanto non agiscono su un blocco di testo o di istruzioni ma hanno solo l’effetto di inserire qualcosa in un punto esatto della pagina.

Centratura: in generale, è possibile ottenere la centratura di un testo , di un'immagine, di una tabella, ecc. con i tag <CENTER>...</CENTER>, che vanno posti all'inizio e alla fine di tutto ciò che deve essere centrato, anche se si trova su più righe. In caso di ridimensionamento della finestra, la centratura viene automaticamente ripetuta dal browser.

nota: dopo l'end-tag </CENTER> viene automaticamente inserito un ritorno a capo.

Paragrafi: il tag <P> è stato ideato per separare i paragrafi di un testo, o comunque per introdurre linee bianche.
<P> ammette, volendo, l'attributo ALIGN che permette di allineare il testo in quattro possibili modi: CENTER, LEFT, RIGHT, JUSTIFY, rispettivamente per: Centrato, a sinistra, a destra , giustificato

<P ALIGN="center">Questo è <BR>un semplice paragrafo<BR> che è stato centrato.</P>
verrà visualizzato così:
Questo è
un semplice paragrafo
che è stato centrato.

nota: lo stesso effetto, comunque, si otterrebbe con:
<CENTER>Questo è <BR>un semplice paragrafo<BR>che è stato centrato.</CENTER>.

Liste
Una lista è una sequenza di paragrafi rientrati, ciascuno dei quali deve essere preceduto da un tag particolare. In HTML sono possibili diversi tipi di liste: ordinate, non-ordinate, di definizioni, menù e directory.

Liste Ordinate: sono liste che vengono numerate automaticamente dal browser, e, se si cancellano o si inseriscono oggetti, essi saranno rinumerati automaticamente.
I tag che identificano una lista ordinata sono <OL>...</OL>.
Al loro interno, ogni elemento della lista deve trovarsi fra i tag <LI>...</LI> (l'end-tag non è obbligatorio, ma è opportuno metterlo).
Si possono, come evidenziato nell'esempio seguente, inserire liste nelle liste (ordinate e non).
Ecco un esempio di lista ordinata:

<OL>
<LI>primo elemento</LI>
<LI>secondo elemento</LI>
<LI>Lista in lista
<OL>
<LI>oggetto A</LI>
<LI>oggetto B</LI>
<LI>oggetto C</LI>
</OL>
</OL>

che verrà visualizzata così:

1. primo elemento
2. secondo elemento
3. Lista in lista
1. oggetto A
2. oggetto B
3. oggetto C

nota: il tag <OL> ammette l'attributo TYPE, i cui possibili valori sono "A" (la numerazione avverrà con lettere maiuscole), "a" (lettere minuscole), "I" (numeri romani maiuscoli) e "i" (numeri romani minuscoli). Ad es.: <OL TYPE="I">
Inoltre, <OL> ammette l'attributo START, che serve per indicare un numero di partenza della lista diverso da 1. Ad es.: <OL START= "5">.
Infine, <LI> ammette l'attributo VALUE, al quale è possibile assegnare un valore numerico, che farà ripartire da tale valore la numerazione della lista.

Liste Non-ordinate: sono liste utilizzate dove non è importante numerare la sequenza degli oggetti. Vengono presentate sotto forma di un elenco nel quale, al posto dei numeri, compaiono dei bullets (palline).
I tag che identificano una lista ordinata sono <UL>...</UL>, mentre si usano ancora i tag <LI>...</LI> per gli oggetti della lista.
Ecco un esempio di lista non ordinata:
<UL>
<LI>primo elemento</LI>
<LI>secondo elemento</LI>
<LI>Lista in lista<LI>
<UL>
<LI>oggetto A</LI>
<LI>oggetto B</LI>
<LI>oggetto C</LI>
</UL>
</UL>
che verrà visualizzata così:

• primo elemento
• secondo elemento
• Lista in lista
o oggetto A
o oggetto B
o oggetto C

nota: anche il tag <UL> ammette l'attributo TYPE, con il quale è possibile assegnare un ordine dei contrassegni a piacere, diverso da quello di default. I possibili valori di TYPE sono "disc" (compare un dischetto pieno), "circle" (circoletto vuoto), e "square" (quadratino). Ad es.: <UL TYPE="square">

Liste di Definizioni: se si vogliono inserire fra gli oggetti di una lista paragrafi non contrassegnati da numeri o bullets, si possono usare le liste di definizioni, che sono identificate dai tag <DL>...</DL>; ogni oggetto della lista è inserito tra i tag <DT>...</DT>, e ognuno di essi può essere seguito da uno o più paragrafi, ciascuno racchiuso dai tag <DD>...</DD>.
Ecco un esempio:
<DL>
<DT>Primo termine</DT>
<DD>Primo paragrafo del primo termine</DD>
<DD>Secondo paragrafo del primo termine</DD>
<DT>Secondo termine</DT>
<DD>Definizione del secondo termine</DD>
</DL>

l'esempio verrà visualizzato così:
Primo termine
Primo paragrafo del primo termine
Secondo paragrafo del primo termine
Secondo termine
Definizione del secondo termine
nota: l'indentazione utilizzata negli esempi sopra riportati è fatta solo per maggiore chiarezza espositiva, e non è assolutamente necessaria.

7. Commenti
In una pagina html si possono inserire commenti, la cui visualizzazione è limitata alla fase di editing, utilizzando il tag :

ad esempio:

nota: il testo di commento all' interno dei tag può essere di più linee.

I Link
I link sono le entità che permettono la creazione di un ipertesto WWW, consentendo di passare da un documento ad un altro semplicemente con un click sulla parola, frase o immagine che è stata predisposta per fungere da collegamento.
Le parole cliccabili vengono evidenziate dai browser con colori differenti dal rimanente testo (i colori sono selezionabili con gli attributi di <BODY>) e con sottolineature. Nel caso sia un' immagine a contrassegnare il link, l' area cliccabile che la racchiude viene segnalata con una bordatura colorata.
Un link è identificato da tag chiamati Anchors (<A>...</A>), che consentono di saltare sia all'inizio sia ad un punto qualsiasi di un documento; quest'ultimo può essere lo stesso documento di partenza, o un altro documento, che può trovarsi anche su un'altra macchina. Per fare tutto ciò lo il tag <A> ammette degli attributi, che consentono di specificare la destinazione del link:
• HREF="valore": si usa obbligatoriamente nel link di partenza per indicare, come valore, la locazione del documento (URL) a cui ci si vuole collegare.
Nel caso ci si voglia collegare all'inizio di un nuovo documento, la sintassi sarà:
<A HREF="risorsa://indirizzoIP/percorso/nomefile">clicca qui</A>. In questo modo il browser visualizzerà la frase 'clicca qui' con un colore diverso dal rimanente testo (e/o sottolineata), e cliccando su di essa, verrà mostrato il documento reperito con l' URL 'risorsa://indirizzoIP/percorso/nomefile'.

Se il documento da ricercare si trova sulla stessa macchina, è possibile anche utilizzare un indirizzo relativo invece di quello assoluto dell'esempio precedente; nel caso più semplice in cui il documento B si trovi in una sottodirectory di quella corrente, è sufficiente indicare il percorso a partire da tale sottodirectory. Ad esempio:
<A HREF="sottodir/nomefile">clicca qui</A>

Se ci si vuole collegare ad una sezione interna di un documento (dove sia presente un'etichetta definita con l'attributo NAME), la sintassi sarà:
<A HREF="risorsa://indirizzoIP/percorso/nomefile#sezione">capitolo</A>.
Cliccando su 'capitolo', verrà mostrato il documento 'nomefile' a partire dall'etichetta 'sezione'.
Ovviamente, qualora la destinazione del link sia interna al documento di partenza, la sintassi si può semplificare in <A HREF="#sezione">capitolo</A>

• NAME="valore": si usa come un'etichetta che funge da destinazione di un link quando tale destinazione non si trova all'inizio, ma all' interno di un documento. La presenza di questo attributo conferisce quindi all' Anchor la funzione di 'destinazione' di un link, identificata dal valore fra le virgolette. Ad esempio:
<A NAME="sezione">Capitolo 2</A>
In questo modo, per chi si collega a 'sezione'(vedi es. precedente), il documento viene mostrato a partire da 'Capitolo 2'.

Le immagini
Immagini grafiche GIF o JPG possono essere incluse in ogni punto del documento attraverso il tag <IMG> (che non prevede tag di chiusura). Esso comporta l'attributo obbligatorio SRC="valore", nel quale il valore è l' URL del file che contiene l'immagine da mostrare.
Sintassi :
<IMG SRC="risorsa://indirizzoIP/percorso/nomefile">
Come nel caso di <A HREF="....">, anche qui si possono usare indirizzi relativi .

Il tag <IMG> ammette numerosi altri attributi:
•   ALIGN="valore": determina l'allineamento dell'immagine e può assumere i seguenti valori:
* "bottom": allinea il margine inferiore dell'immagine con la linea base della riga che contiene l'immagine. E' il valore di default.
* "top": allinea il margine superiore dell'immagine con il più alto elemento della        riga che contiene l'immagine
* "middle": allinea il centro dell'immagine con la linea base della riga che contiene l'immagine.
* "left": pone l'immagine all'estrema sinistra della riga.
* "right": pone l'immagine all'estrema destra della riga.
* "center": pone l'immagine al centro della riga.
•   ALT="valore": permette di specificare come valore un testo qualsiasi che apparirà al posto dell'immagine con browser non-grafici, e, con gli altri browser, apparirà nei casi in cui l'immagine non sia reperibile. Si può settarlo a null (alt=""), se si vuole che in alternativa all'immagine non venga visualizzato alcunché.
•   VSPACE="valore" e HSPACE="valore": consentono di definire, in pixel, lo spazio verticale e orizzontale che deve essere lasciato libero intorno ad una immagine.
E' utile per distanziare un'immagine da un testo o da un'altra immagine, ma può essere d'intralcio il fatto che lo spazio si crea sia da una parte che dall'altra.
•   BORDER="valore": definisce intorno all'immagine un bordo avente il colore del testo, la cui dimensione in pixel può essere specificata tramite un valore numerico. Il valore di default è "0". Tuttavia, con BORDER="0", si ottiene anche l'effetto di eliminare la bordatura che viene automaticamente tracciata se l'immagine segnala un link (può servire per eliminare ridondanze, se l'immagine di per sé esplicita già chiaramente l'esistenza del link)
•   WIDTH="valore" e HEIGHT="valore": specificano larghezza e altezza, in pixel, dell'immagine da caricare, in modo che tali valori non debbano essere calcolati dal browser, velocizzando quindi la visualizzazione.
Esempio:
<IMG ALIGN="left" VSPACE="10" WIDTH="200" HIGHT="100" SRC="images/fiore.gif" ALT="gardenia">
Potremo così visualizzare l'immagine di una gardenia che si trova nella sottodirectory 'images', avente le dimensioni di 200x100 pixel, e posta a 10 pixel dall'estrema sinistra della riga. Se l'immagine non può essere caricata, verrà mostrata la scritta 'gardenia'.
Come già detto, gli attributi non hanno un ordine obbligato.

Le Tabelle
Le tabelle possono rivelarsi utili non solo per incolonnare dati, ma anche per formattare una qualsiasi pagina che richieda un layout particolare: infatti, poiché le tabelle possono venire automaticamente proporzionate dal browser in relazione alle dimensioni di ciò che contengono e della pagina, consentono -entro ragionevoli limiti- di mantenere inalterati i rapporti spaziali fra i testi e le immagini al loro interno.

1. I tag <TABLE>...</TABLE> : permettono la creazione delle tabelle; essi devono aprire e chiudere la parte dell' HTML dedicata a costruire una tabella, e quindi gli altri tag di tabella (<TR>...</TR>, <TD>...</TD>) devono essere compresi all' interno di <TABLE>...</TABLE>.
Il tag di apertura <TABLE> ammette i seguenti attributi:
•   BORDER="valore": definisce la presenza o no di un bordo in rilievo intorno alla tabella, il cui spessore può essere specificato in pixel. Se il valore è settato a zero (BORDER="0"), viene annullato lo spazio normalmente riservato al bordo, e si ottengono tabelle compatte. Se invece il valore non è specificato, viene assunto quello di default, che è "1". In assenza dell'attributo, il bordo non appare.
•   CELLSPACING="valore": definisce lo spazio fra le celle della tabella; il suo valore di default è "2".
•   CELLPADDING="valore": definisce lo spazio in pixel fra il bordo interno delle celle e il loro contenuto; il suo valore di default è "1". Volendo una tabella particolarmente compatta, si può usare:
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
......
</TABLE>
•   WIDTH="valore": e HIGHT="valore" definiscono larghezza e altezza della tabella, con un valore assoluto in pixel, oppure, a scelta, con un valore percentuale riferito alle dimensioni della pagina. In tal modo viene annullato il complesso sistema con cui il browser razionalizza automaticamente le misure delle tabelle in funzione del loro contenuto e delle dimensioni della pagina, e vengono imposte una larghezza e/o un'altezza prefissate.

2. I tag <TR>...</TR> : definiscono una riga della tabella. Il numero di righe in una tabella
è specificato dal numero di tag <TR> compresi fra <TABLE> e </TABLE>.
Il tag di apertura <TR> ammette come attributi:
• ALIGN="left/center/right"
• VALIGN="top/middle/bottom"
tali attributi determinano l'allineamento orizzontale e verticale di default del contenuto delle celle dell'intera riga.

3. I tag <TD>...</TD> : definiscono una cella della riga, e contengono al loro interno i dati
(testi, immagini, liste, ecc.) da visualizzare. Devono essere compresi fra i tag che
definiscono la riga (<TR>...</TR>). Il numero di celle in una riga è quindi specificato dal
numero di tag <TD> situati fra <TR> e </TR>.
Ogni cella può contenere qualunque tag normalmente presente nel BODY dell'HTML.
Il tag di apertura <TD> ammette come attributi:
•   ALIGN="left/center/right" e VALIGN="top/middle/bottom"
L' allineamento attribuito ad una singola cella viene rispettato anche se quello attribuito alla riga dove si trova la cella è differente.
I valori di default sono ALIGN="left" e VALIGN="middle"
•   NOWRAP (senza valore): serve per fare in modo che una riga all'interno della cella non venga interrotta; infatti, per proporzionare la cella rispetto alle altre, il browser può interrompere ovunque le righe interne, mandando a capo l'eventuale testo; invece, con NOWRAP, ciò non avviene. Ad es.:
<TD NOWRAP>questo testo non verrà troncato</TD>
•   COLSPAN="valore": specifica con un numero quante colonne della tabella verranno occupate dalla cella. Il valore di default è "1".
•   ROWSPAN="valore": specifica con un numero quante righe della tabella verranno occupate dalla cella. Il valore di default è "1".

nota : celle vuote senza elementi appaiono normalmente prive di bordo; volendo mostrare una cella vuota con il bordo si può inserire un' interruzione di riga nella cella: <TD><BR></TD> oppure uno spazio: <TD> </TD>

4. I tag <TH>...</TH> : servono per le intestazioni; hanno le stesse caratteristiche di <TD>...</TD> e ammettono gli stessi attributi, con l'eccezione che i testi appaiono in grassetto. Per default, ALIGN="left" e VALIGN="middle".

5. I tag <CAPTION>...</CAPTION> : permettono, volendo, di attribuire un titolo alla tabella; questo può apparire a scelta sopra o sotto di essa, tramite l'attributo ALIGN="top/bottom" (di default è "top"). Il titolo appare sempre centrato rispetto alla lunghezza della tabella e, se è più lungo, può subire uno o più ritorni a capo mantenendo la centratura.

I Frames
I Frames sono un'ottima soluzione per la struttura di un sito più o meno complesso. Essi permettono infatti di suddividere la finestra del browser in sezioni separate, ciascuna delle quali può essere aggiornata o contenere dati in modo completamente autonomo e diverso rispetto alle altre.
Frame principale è il più grande, dove visualizzare le varie pagine.

Per creare una pagina sudivisa in più frame si usa il tag
<FRAMESET>...</FRAMESET>
cha va a sostituirsi al tag <body>

Il tag <FRAMESET> è l'elemento principale, possiede due attributi quali ROWS e COLS. Al suo interno può contenere annidati altri elementi quali <FRAMESET>, <FRAME> o <NOFRAME>.

ROWS
L'attributo ROWS raccoglie i valori per l'altezza della riga, quando si suddivide la finestra principale in righe. Questi valori devono essere separati da virgole e possono essere espressi sia in numeri interi che in numeri percentuale; nel primo caso equivalgono al numero di pixel, mentre nel secondo caso sono in percentuale delle dimensioni della finestra del browser.

Ad esempio:
<FRAMESET ROWS="30%, 70%">
crea una cornice suddividendo orizzontalmente la finestra in due parti, la prima che occupa il 30% delle dimensioni totali lasciando il rimanente 70% alla seconda finestra.

Si possono adoperare anche valori numerici, senza il simbolo di % percentuale, in questo caso si fa riferimento al numero di pixel dello schermo. Queste dimensioni restano fisse indipendentemente dalle dimensioni della finestra del browser
Ad esempio:
<FRAMESET ROWS="150, 600">
crea due finestre con dimensioni fisse (150 e 600 px) indipendentemente dalla risoluzione e dalle dimensioni del monitor, grandi o piccoli che siano.

Per evitare questa limitazione, si possono adoperare i caratteri jolly (asterisco *) che significano imposta la massima dimensione rimanente.
Ad esempio:
<FRAMESET ROWS="150, *">
crea un frame orizzontale di dimensione fissa di 150 pixel lasciando per il secondo frame tutto lo spazio rimanente, qualsiasi esso sia, è ovvio che dipende soltanto dl monitor e dalla risoluzione grafica adoperata dal visitatore. L'esempio pratico sotto è al solo scopo di rendere l'idea di come avviene la suddivisione.

Frame superiore fisso 150 pixel

Frame inferiore
che varia occupando il rimanente spazio della finestra

COLS
L'attributo COLS raccoglie i valori per la larghezza della colonna, quando si suddivide la finestra principale in colonne. Il principio di funzionamento è identico a quanto detto per l’attributo ROWS con la sola differenza che la suddivisione avviene in verticale invece che in orizzontale.

L'esempio pratico sotto è al solo scopo di rendere l'idea di come avviene la suddivisione.

Frame laterale sinistro fisso 150 pixel

Frame laterale destro che varia occupando il rimanente spazio della finestra

<FRAME>

Il tag FRAME definisce le proprietà del frame stesso all'interno di FRAMESET,. questi gli attributi fondamentali:

SRC
NAME
SCROLLING
NORESIZE

SRC="url"
L'attributo SRC="url" definisce l'indirizzo del file html che verrà visualizzato nella sezione frame nel frameset. Potrebbe sembrare complicato ma altro non è che il file html da visualizzare.
Ad esempio:
<FRAME SRC="nome_file.html”>

NAME="nome_frame"
L'attributo NAME è di vitale importanza ai fini di un corretto funzionamento, serve infatti per assegnare un nome al frame stesso facendolo diventare bersaglio di collegamenti da altri frames o semplici links tramite l'attributo TARGET.
Non confondete il nome che avete scelto per il file html con il nome da assegnare al frame, questi potrebbero essere due nomi completamente diversi. Se tutto ciò può sembrare complesso, a fine paragrafo un esempio riassuntivo chiarirà sicuramente meglio ogni cosa.

SCROLLING="yes|no|auto"
L'attributo SCROLLING serve per il controllo della barra laterale di scorrimento, quando il contenuto della pagina supera le dimensioni del frame viene visualizzata una barra di scorrimento.
yes= attiva la visualizzazione di questa barra,
no= nessuna barra,
auto= solo se il contenuto del frame la richiede.

NORESIZE
L'attributo NORESIZE non ha alcun parametro, se impostato evita il ridimensionamento del frame quando la pagina viene visualizzata nel browser. Diversamente sarà possibile, portando il puntatore del mouse nella divisione dei due frames, ottenere una doppia freccia di posizionamento.

<NOFRAMES>...</NOFRAMES>

Il tag NOFRAMES serve per creare un alternativa a quei browser che non supportano i frames. Infatti non tutti i browser, specie quelli di vecchia generazione, supportano la gestione dei frames, conviene quidi creare un'alternativa o semplicemente un messaggio di avviso fra i tags <NOFRAMES>...</NOFRAMES>

Ad esempio:
<NOFRAMES>
Spiacente ma il tuo browser non supporta i frames, clicca su questo link per continuare
</NOFRAMES>

ESEMPIO DI CREAZIONE DI UN SITO CON FRAME
Forse un esempio pratico potrebbe chiarire ogni dubbio, diciamo subito che la struttura di un sito a frames si basa su almeno 3 pagine web:
Una per dichiararne la struttura.
Le altre due rispettivamente per i due frames.

Ipotizziamo di voler creare un sito con un frame laterale per il menu, uno centrale principale per la navigazione, ed uno fisso in alto per eventuali sponsor, musica, informazioni varie.

Inizieremo col creare le tre pagine menu.htm, home.htm e sponsor.htm che conterranno il normale codice html per ottenere ciò che si vuole visualizzare.

Fatto questo non resta che creare la pagina per i frames che chiameremo index.html:

Il listato sopra produrrà un risultato simile a questo sotto, si noti la struttura nidificata del frameset che crea a sua volta due finestre dalle due precedentemente impostate.

Frame menu	Frame Sponsor
	Frame Home Page

I form
Uno dei fattori che ha decretato il successo del Web è senz’altro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list), ma soprattutto di partecipare a vere e proprie comunità virtuali..
Per organizzare questo genere di servizi è necessario raccogliere in qualche modo i dati dell’utente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form).
L’invio dei dati è solitamente organizzato in due parti:

una pagina principale che contiene i vari campi dei form, che consentono all’utente di effettuare delle scelte, scrivere del testo, inserire un’immagine
una pagina secondaria che viene richiamata dalla principale e che effettua "il lavoro" vero e proprio di processare e raccogliere i dati. Di norma si tratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp o altro

Noi ci occuperemo della sola pagina principale, dal momento che il modo in cui struttura una pagina di programmazione esula dagli obiettivi della presente guida.
1. Name, action e Method
Per creare una pagina con dei moduli, bisogna utilizzare l’apposito tag <form>: si tratta di un elemento di blocco, come il <p>, quindi il tag <form> lascia uno spazio prima dell’apertura e dopo la chiusura.

Nel caso in non si desideri avere dello spazio superfluo è possibile modificare i bordi del tag utilizzando i fogli di stile. Con questa semplice sintassi:
<form name="datiUtenti" style="border:0px" action="paginaRisposta.php">

Come si può vedere, "name" serve per indicare il nome del form, "action" indica l’URL del programma o della pagina di risposta che processerà i dati.
Grazie all’"action" è anche possibile far sì che i dati vengano inviati in e-mail al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). Il codice è questo:
<form action="mailto:tuamail@nomeDominio.it?subject=Oggetto predefinito"
enctype="text/plain" method="POST">
vedremo in una delle prossime lezioni come utilizzare concretamente questa sintassi.

La sintassi per l’invio in get è:
<form name="datiUtenti" action="paginaRisposta.php" method="GET">

Nel metodo POST invece l’invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri non compaiono nella query string (dunque se non si desidera che i parametri siano mostrati all’utente questo metodo è preferibile).
In questo caso non ci sono limiti sulla lunghezza dei caratteri. La sintassi è:
<form name="datiUtenti" action="paginaRisposta.php" method="POST">

2. Il tag Input
Per quel che riguarda i campi dei form il tag più utilizzato è l’<input>, che è senza chiusura. Per specificare un determinato tipo di campo è sufficiente indicare il tipo di input.
Ad esempio:
<input type="text">
crea un campo di testo.
<input type="button">
crea un bottone.
I vari <input> sono dotati di attributi che consentono di indicare il tipo di campo, il nome ( ad esempio per interagire con Javascript ), e il valore (per lo più il testo visualizzato).
<input type="text" name="tuoTesto" value="qui il tuo testo">
che dà:

3. I bottoni (sumbit, reset)
Non c’è form che si rispetti senza bottone di invio.
La sintassi tradizionale per creare un bottone di invio è:
<input type="submit" value="invia I dati">
Ad esempio:
<form action=http://www.itsosmilano.it target="_blank">
<input type="submit" value="visita HTML.it">
</form>
cioè:
Un altro bottone utile è il "reset" che – una volta premuto - consente di riportare il form allo stato originario, cancellando ogni cosa scritta finora dall’utente. Ecco un esempio:
<form>
<input type="text"><br>
<input type="reset" value="cancella">
</form>
Esiste infine un tipo di bottone generico, che non esegue nessuna azione particolare, ma che può essere ad esempio utilizzato per associare degli eventi tramite Javascript.
<form>
<input type="button" value="bottone generico">
</form>

4. Inserire testo (campo testo, textarea, password)
Per consentire all’utente di inserire del testo è possibile utilizzare un campo testo.
Se il campo è su una singola linea avremo:
<input name="mioTesto" type="text" value="qui il tuo testo" size="40" maxlength="200">
"maxlenght" indica il numero massimo di caratteri che l’utente può inserire, con "size" si esprimono invece le dimensioni del campo di testo (la larghezza è data dal numero di caratteri).
Se si ha la necessità di indicare un campo che consenta di inserire una grande quantità di testo conviene invece utilizzare una "textarea" ("area di testo"). Ecco la sintassi:
<textarea name="testo" cols="40" rows="10">
qui puoi scrivere il tuo testo
</textarea>
"rows" indica il numero di righe della textarea, "cols" il numero di caratteri (cioè di colonne) che ogni riga può contenere.
Come si può vedere, se si vuol indicare del testo predefinito in questo caso bisogna inserirlo fra l’apertura e la chiusura del tag.
Esiste infine il campo password che codifica i caratteri insieriti con degli asterischi:
<input name="mioTesto" type="password" size="18" maxlength="8">
da notare che la codifica fornisce una protezione soltanto per chi eventualmente stia sbirciando sul monitor dell’utente. L’invio dei dati attraverso il web avviene,se non vengono adottate altre misure di sicurezza, 'in chiaro'.
I campi di testo possono essere anche di sola lettura. Ad esempio:
<input name="mioTesto" type="text" value="leggere l'informativa" size="25" maxlength="8" readonly>
O disabilitati:
<input name="mioTesto" type="text" value="leggere l'informativa" size="25" maxlength="8" disabled>

5. Checkbox
Con i checkbox possiamo consentire all’utente di operare delle scelte multiple. Ad esempio:
<fieldset>
<div>Linguaggi conosciuti</div><br>
<input type="checkbox" name="html" value="html"> html
<br>
<input type="checkbox" name="css" value="css"> css
<br>
<input type="checkbox" name="javascript" value="javascript"> JavaScript
</fieldset>
Si possono anche selezionare uno o più valori di default:
<input name="html" type="checkbox" value="html" checked>
ed è possibile disabilitare una casella:
<input name="html" type="checkbox" value="html" disabled>

6. Radio button
I "radio button" ("bottoni circolari") invece consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude l’altra. Per ottenere questo effetto i campi devono avere lo stesso nome e differente valore:
<fieldset>
<div>Linguaggi conosciuti</div>
HTML<input type="radio" name="linguaggio" value="html">
CSS <input type="radio" name="linguaggio" value="css">
JavaScript <input type="radio" name="linguaggio" value="javascript">
</fieldset>
Anche in questo caso è possibile assegnare un valore di default o disabilitare un pulsante.
<input type="radio" name="linguaggio" value="html" checked disabled>
7. Menu di opzioni (select)
Grazie al tag <select> è possibile costruire dei menu di opzioni. In questo caso ciascuna voce deve essere compresa all’interno del tag <option> (la chiusura del tag è opzionale) e il valore deve essere specificato attraverso l'attributo "value". Con l’attributo "selected" si può indicare una scelta predefinita:
<select name="siti" >
<option value="1" selected> www.itsosmilano.it
<option value="2">studenti.it
<option value="3">essereononessere.it
</select>

Infine con il tag select è possibile impostare anche delle scelte multiple. Come si può vedere, utilizzando l’attributo "multiple" l’aspetto del tag select cambia notevolmente:

Quale siti visiti?<br>
<select name="siti" multiple>
<option value="1"> www.itsosmilano.it
<option value="2"> studenti.it
<option value="3"> agratis.it
<option value="4">font.it
<option value="5" >altroconsumo.it
</select>

Utilizzando il tasto "ctrl" l’utente può così effettuare delle scelte multiple.
Tramite l’attributo "size" si può specificare il numero delle voci che devono comparire nel menu, e conseguentemente regolare l’altezza del menu, aggiungendo o togliendo la barra di scorrimento verticale.

Quale siti visiti?<br>
<select name="siti" size="5" multiple>
<option value="1"> www.itsosmilano.it
<option value="2"> studenti.it
<option value="3"> agratis.it
<option value="4"> font.it
<option value="5" > altroconsumo.it
</select>

Fonte: http://dokeos.irrelombardia.it/courses/MOLINARI1/document/STC/materialeV/maturita/Html_-_Guida_di_base.doc?cidReq=MOLINARI1

Autore : www.itsosmilano.it

Appunti per guida HTML

La semplice pagina web

La più semplice pagina web qui presentata ha l'intenzione di mostrarti la facilità del linguaggio HTML. Se poi vorrai aggiungere optionals alla tua pagina web, le nostre guide e lezioni online ti insegneranno come fare.
Per creare questa semplice pagina puoi utilizzare Windows Notepad o qualsiasi Word Processor. Una volta terminato terminato di scrivere il testo salvalo come file .txt o file testo, in seguito rinominalo con estensione .html. Carica il nuovo file html sul tuo web server XOOM.it utilizzando una delle modalità presentate nelle lezioni FTP.
Apri Notepad o un word processor e digita quanto segue... <HTML> <HEAD> <TITLE> Questa è la mia prima pagina web! </TITLE> <BODY> Presto il mio sito web si arricchirà con l'aiuto di XOOM.it Homepage Help Center. </BODY> </HTML>
Congratulazioni, hai appena creato una semplice pagina web. Ricordati di sfogliare la parte restante della guida html o di seguire le nostre lezioni online per imparare ancor di più.

Aggiungi un colore o un'immagine di background alla tua pagina

Una delle cose più semplici da imparare riguarda l'aggiunta di un colore o di una immagine di background alla tua web page. Se consulti la nostra semplice pagina d'esempio, noterai un tag html denomitato <Body>. All'interno del tag Body noi possiamo fissare il colore o l'immagine di background desiderata per la nostra web page.
Per avere un background bianco, è necessario aggiungere al tag <BODY> la seguente stringa <Body BGCOLOR="#FFFFFF">
Naturalmente potrai adottare altri colori oltre al bianco. Puoi consultare l'intera lista dei colori disponibili nella nostra tabella dei colori.
Per utilizzare un'immagine invece di un colore, aggiungiamo al tag <BODY>: <BODY BACKGROUND="filename.gif">
Naturalmente filename.gif è da sostituire con il nome della tua immagine. Non dimenticare che quando utilizzi un file immagine come background, è necessario fare l'upload di quell'immagine sia separatamente dal tuo web site, che insieme al tuo file html.

Aggiungi testo in corsivo, grassetto o sottolineato

Per dare maggior enfasi ad una pagina web si possono usare diversi accorgimenti fra i quali l'uso dei tags Grassetto, Corsivo e Sottolineato.
Per creare un testo in grassetto utilizza il seguente tag: <b>Questo testo è in grassetto</b>
Per creare un testo in corsivo utilizza il seguente tag:
<i>Questo testo è in corsivo</i>
Per creare un testo sottolineato utilizza il seguente tag: <u>Questo testo è sottolineato</u>
Se tu scegli di usare questi tags, ricordati che utilizzandoli in modo poco frequente darai maggior enfasi al testo. Al contrario se verranno ripetuti con troppa frequenza il testo rimarrà poco enfatizzato.

Aggiungi intestazioni alla tua pagina

Talvolta è necessario utilizzare delle intestazioni per titoli e sottotitoli. Per creare titoli e sottotitoli segui gli esempi qui di seguito riportati:
<H1>

Intestazione esempio

</H1>
<H2>

Intestazione esempio

</H2>
<H3>

Intestazione esempio

</H3>
<H4>

Intestazione esempio

</H4>
<H5>

Intestazione esempio

</H5>
<H6>

Intestazione esempio

</H6>
Come appena mostrato sono disponibili sei grandezze.

Aggiungi un collegamento E-mail alla tua pagina

Uno dei tags più comunemente usati in html è il tag "mailto". Il tag "mailto" permette agli utenti di inviare posta semplicemente cliccando sul tuo link "mailto".
Per creare un link email usa la seguente stringa:
<A HREF="mailto:username@domain.com">Mandami posta</A>
Se lo desideri puoi aggiungere due righe descrittive al tag mailto così come segue:
<A HREF="mailto:username@domain.com?subject=place your subject here">Mandami posta</A>
E' importante sottolineare che non tutti i browsers sopportano l'uso di righe descrittive.

Aggiungi un link ad altre pagine

O prima o poi aggiungerete nuove pagine web al vostro server XOOM.it. Naturalmente prima di fare ciò dovrete creare un link a pagine aggiuntive nella vostra Home Page.
Dovete sapere che il file index.html è la vostra home page mentre la nuova pagina a cui è diretto il collegamento si chiama welcome.html
Per creare un link da index.html verso welcome.html è necessario utilizzare questa stringa html nella pagina index.html.
<A HREF="welcome.html">
Clicca qui per vedere la pagina welcome</A>
E' molto semplice! Se il file denominato welcome.html si trova in una directory diversa sul tuo server, devi specificare il nome della directory così come segue:
<A HREF="http://xoom.it/username/directory/welcome.html">
Clicca qui per vedere la pagina welcome</A>
Naturalmente devi inserire il tuo username, e sostituire il nome della vecchia directory con la tua creata sul server.

Aggiungi immagini alla tua pagina

Aggiungere immagini alla tua pagina web è un lavoro facile e divertente! Per prima cosa scegli l'immagine che desideri inserire nella tua pagina. Nell'esempio che segue ho incluso un'immagine chiamata welcome.gif
Per inserire l'immagine welcome.gif sulla mia pagina web io ho usato la seguente stringa html:
<IMG SRC="welcome.gif">
Qui di seguito vengono mostrate altre caratteristiche attribuibili alle immagini.
<IMG SRC="welcome.gif" height=100 width=400 border=0 alt="welcome to my page"> l'altezza e la larghezza dell'immagine sono specificate in pixels. Utilizzando i tags altezza e larghezza l'immagine si caricherà più velocemente sul browser. L'attributo border=0 indica che l'immagine è priva di bordo; alt= mostra il testo in alternativa all'immagine che non appare sul browser.
Se cerchi invano di far comparire un'immagine... lascia un messaggio sul nostro message boards e un esperto dell' Help Center ti aiuterà. Ricordati di lasciare il tuo nome utente, l'indirizzo URL della pagina e il nome dell'immagine che non compare

Aggiungi un file scaricabile

Puoi includere nella tua web page files direttamente scaricabili. Se hai intenzione di inserire un file scaricabile, si consiglia di comprimere prima il file in formato .zip (per chi utilizza Windows) o formato .sit (per chi utilizza Mac)
I programmi di compressione più conosciuti sono disponibili in Shareware.com
Una volta zippato o compresso il tuo file o i tuoi file, tu puoi aggiungere un link al seguente file con questa procedura:
<A HREF="filename.zip">Clicca qui per scaricare il file</A>
Naturalmente dovrai sostituire filename.zip con il nome del file scaricabile che tu hai compresso. E' necessario anche fare l'upload del tuo file compresso sul tuo web server.

Tutto sui Fonts per la tua Web Page

L'uso dei Fonts offre alle tue pagine un tocco di personalità. Con questa guida imparerai ad utilizzare i tags Font Face, Font Size e Font Color.
Font Face:
Per utilizzare il tag Font Face nelle tue pagine web registra la seguente stringa html:
<Font Face="arial">Questo testo appare con Font Arial.</Font>
Nota bene, il Font Face che tu specifichi deve essere installato sul computer dell'utente che visita il tuo sito, solo in questo modo potrà vedere il font da te indicato. Se l'utente non ha installato tale font, vedrà semplicemente il testo con il font di default del suo browser.
Per questa ragione molti web designers stanno unificando i loro fonts per includere i Font faces che la Microsoft distribuisce dal suo web site all'indirizzo http://www.microsoft.com/truetype
Font Size:
Per utilizzare il tag Font Size nelle tue pagine web registra la seguente stringa html:
<Font Size=5>Questo Font è grandezza 5</Font>
Puoi scegliere 7 diverse grandezze di fonts, che spaziano dal Font Size 1 (il più piccolo) al Font Size 7 (il più grande). Prova a sostituire nelle righe che seguono il font 5 al font 1 e osserva cosa succede quando apri la tua pagina da un browser.
Font Color:
Il tag Font Color fa esattamente ciò che suggerisce il nome... cambia il colore dei tuoi fonts.
Per utilizzare il tag Font Color nelle tue pagine web registra la seguente stringa html:
<Font Color="#F0F8FF">Questo Font è stato scritto utilizzando il colore blu alice.</Font>
se desideri vedere una lista color chart.
Ancora una nota finale riguardo ai font tags:
Se desideri usare un Font Size 2 di colore Alice Blue e specificare il carattere arial tutto allo stesso tempo. devi utilizzare la seguente stringa html:
<font size="2" face="Arial" color="#F0F8FF">Questo testo è scritto con font size 2 carattere arial e colore blu alice.</font>

Aggiungi file audio alla tua Web Page

Puoi aggiungere un file audio che si attiva automaticamente all'apertura della tua Web Page con l'apposito tag < EMBED SRC="sound.wav">. Utilizzando entrambi i tags EMBED SRC e BGSOUND SRC sarai sicuro che tutti gli utenti che entreranno nel tuo sito, sia attraverso Netscape che Internet explorer, potranno ascoltare il suono in sottofondo.
<EMBED SRC="sound.wav" AUTOSTART="True" HIDDEN="True">
<BGSOUND SRC="sound.wav">
La scritta HIDDEN="True" del tag EMBED permetterà di avere musica di fondo in Netscape.
Invece di aggiungere uno sfondo musicale alla tua web page, potresti optare per l'aggiunta di un link a un file musicale. Per creare un link al tuo file musicale, prima scegli il file che tu desideri usare. Nell'esempio qui di seguito riportato, io ho scelto il file "welcome.wav"
<A HREF="welcome.wav">Clicca qui per ascoltare welcome</A>
Come per tutti i link che fanno riferimento ad altri files, assicurati di fare l'upload del file welcome.wav oltre ai file html.

Aggiungi una lista alla tua pagina Web

Stai cercando una maniera semplice per elencare tutte le tue informazioni? Se così è puoi utilizzare questa guida che ti insegnerà a creare delle liste nella tua pagina web.
HTML sopporta diversi tipi di liste. Tre delle forme più note sono presentate qui di seguito:
<DL> ... </DL> - Lista di definizioni.
<OL> ... </OL> - Lista numerata
<UL> ... </UL> - Lista senza ordine
La lista di definizioni è semplicemente una lista di termini e loro definizioni. Questo esempio illustra come aggiungere liste di definizione nella tua pagina html:
<DL>
<DT>Parola<DD>Questa è la definizione del primo termine.
<DT>Parola<DD>Questa è la definizione del secondo termine.
</DL>
La lista ordinata si usa per presentare una lista numerata. Questo esempio mostra come creare una lista ordinata:
<OL>
<LI>Per imparare a lavorare con HTML segui una di queste sessioni.
<LI>Dai poi un'occhiata alle nostre lezioni e FAQ.
<LI>E se hai delle domande chiedi al nostro staff.
</OL>
La lista senza ordine solitamente è usata per separare voci precedute da bottoni. Questo è un esempio di lista senza ordine:
<UL>
<LI>Prima voce della lista
<LI>Seconda voce della lista
<LI>Terza voce della lista
</UL>

Aggiungi righe orizzontali alla tua pagina !

Impara a creare una riga orizzontale (separatore)!
Durante la navigazione spesso ti sarà capitato di incontrare righe orizzontali.
Una riga orizzontale appare così:

Per riprodurre l'esempio sopra riportato devi semplicemente digitare <HR>
Ora impariamo a personalizzare una riga orizzontale
I seguenti attributi ti permetteranno di creare una riga orizzontale secondo le tue idee:

Dimensione
Ampiezza
Allineamento
Senza ombra
Colore

Ecco la dimostrazione di una riga orizzontale di dimensione 4, spessore 50% e allineata a sinistra.

Questa è la stringa html da utilizzare per creare la riga sopra descritta:
<HR Size=4 width=50% Align="left"> Naturalmente puoi anche creare una riga orizzontale utilizzando un file immagine. Per avere maggiori informazioni consulta le nostre guide html riguardo all'inserimento di immagini su una pagina web.

Fonte: http://web.tiscali.it/ocalesteppe/fileDOWNLOAD/appunti%20html.doc

Autore del testo: non indicato nel documento di origine

Appunti di Tecnologia e Informatica
(informatica_html_01.doc)

IL LINGUAGGIO HTML

(Hyper Text Markup Language)

(linguaggio di contrassegno di ipertesti)

Il linguaggio HTML non è un vero e proprio linguaggio di programmazione ma può essere definito come un linguaggio di marcatura che permette di descrivere come il contenuto di un documento verrà presentato.

A cosa potrebbe servirti?
Quasi tutti i documenti sul Web (una rete di migliaia di computer) sono scritti con questo linguaggio che consente di visualizzare i contenuti delle pagine nella veste grafica preferita e permette l'introduzione di elementi multimediali (suoni, immagini, filmati...) nonché la consultazione di documenti in modo non sequenziale. In altre parole non c'è bisogno di passare da una pagina all'altra come in un libro, basta cliccare su un “link” e si passa immediatamente ad altra pagina. Puoi riconoscere facilmente un “link” perchè è scritto in modo un po' diverso dal resto delle parole e soprattutto perchè quando la freccetta del mouse ci passa sopra si trasforma in una manina.
Con questo linguaggio puoi realizzare un tuo sito personale, modificare un sito già esistente, organizzare in modo dinamico i tuoi appunti, classificare una serie di oggetti, realizzare giochi a quiz, realizzare semplici videoclip in cui associare immagini o testi alle canzoni preferite, ….
Comprendere come funziona questo linguaggio ti aiuta inoltre a capire come funziona un calcolatore.

Di cosa hai bisogno?
Per creare la tua pagina HTML non hai bisogno di programmi particolari. Hai già tutto quello che ti serve sul computer, cioè un programma che si chiama "blocco note", e si trova generalmente installato su tutti i computer.

E’ importante ricordarsi di dare correttamente il nome alla pagina:

dove è scritto "nome file" scrivi "nome.html"
dove è scritto "salva come" clicca su "Tutti i File *.*"

Un documento scritto in HTML contiene sia il testo, sia il codice necessario a determinarne l'aspetto finale in tutti i suoi contenuti, compresi collegamenti, immagini e così via.
Il testo viene scritto normalmente, mentre gli elementi che caratterizzano la struttura del documento vengono chiusi fra < e >, dette parentesi angolari.
Gli elementi del linguaggio vengono detti TAG, essi di solito sono utilizzati a coppie, e possono contenere uno o più attributi.

I Tag: Nome - Parametri - Valori

I tag sono i comandi di HTML, dunque eseguono azioni specifiche (andare a capo, scrivere in grassetto, ecc.) e non vengono visualizzati nella pagina finale.
I tag HTML devono rispettare regole sintattiche

Un tag inizia sempre con il carattere < (minore) e finisce sempre con il carattere > (maggiore);

Un tag può avere oltre al nome uno o più parametri che specificano le modalità della sua azione.
La sintassi dei parametri è nomeparametro = "valore"; i parametri ammissibili per ogni tag sono in genere molto numerosi ed alcuni di essi sono accettati da alcuni browser e non da altri. (gli esempi successivi chiariranno meglio)
Alcuni tag fanno da delimitatori e richiedono un tag terminale; per esempio <b> significa grassetto ed è quindi necessario anche un terminatore </b> che indichi dove deve finire il grassetto.
Alcuni tag non richiedono terminatore e si dicono vuoti; per esempio <hr> dice semplicemente al browser di tracciare una linea orizzontale e non richiede terminatore.
I tag possono essere scritti indifferentemente con lettere minuscole o maiuscole

Le pagine HTML sono sempre aperte e chiuse con un tag particolare che è <HTML>. Quindi la prima parola che scriverai sul qualunque pagina web sarà <HTML> e l'ultima sarà </HTML>.
Tutto ciò che andrai a inserire tra questi tag sarà letto dal computer come codice HTML.
Dopo aver aperto il documento bisogna scrivere un'intestazione (head) che comprende il titolo della pagina e altre informazioni di carattere generale sulla pagina; l'intestazione inizia con il tag <head> e finisce con il tag </head>; il titolo deve essere compreso tra i tag <title> e </title>; il titolo della pagina è ciò che comparirà sulla barra superiore della finestra di Windows.
All’intestazione segue il corpo (body) che contiene il testo vero e proprio che deve essere compreso tra i tag <body> e </body>.

Esempio di documento html:
<HTML>
<HEAD>
<TITLE> TITOLO SULLA BARRA SUPERIORE </TITLE>
</HEAD>
<BODY>
TESTO DEL DOCUMENTO
</BODY>
</HTML>

N.B. un TAG è così strutturato:

<NOME PARAMETRO=”VALORE”>

</NOME>

Nelle pagine seguenti analizzeremo I principali Tag.

<HTML>
Apre e chiude </html> un documento Html. Serve per far capire al Browser che stiamo visualizzando un documento HTML

<HEAD>
Limita la testata o intestazione del documento. Tutte le informazioni contenute nell’intestazione sono utili per il Browser, per il Webmaster (il “costruttore” della pagina) e per i motori di ricerca.

<TITLE>
E’ compreso nella testata. Definisce ciò che compare sulla barra superiore della finestra.

<BODY>
Questo Tag delimita il corpo del documento, la parte del documento che verrà visualizzata. Anche nel body possiamo aggiungere parametri validi per tutto il documento:

Parametri:       background (imposta un’immagine come sfondo)             valore: sfondo.jpg
bgcolor (colore di sfondo)                                        valore: green, red, ecc
text (colore del testo)                                                valore: green, red, ecc
link (colore del link)                                                  valore: green, red, ecc
vlink (colore del link già visitato)                              valore: green, red, ecc
alink (colore dell’ultimo link cliccato)                                   valore: green, red, ecc

<BR>
Se si vuole andare a capo,senza che sia terminata una riga, non basta premere il tasto Invio, che ha effetto nel Blocco Note ma non nella visualizzazione della pagina con un browser (un programma come explorer che serve per navigare nel Web o visualizzare ipertesti). Occorre perciò usare il tag <BR>.

<B> </B> Ciò che è compreso tra questi tag è scritto in grassetto

<I> </I> Ciò che è compreso tra questi tag è scritto in corsivo

<SUB> </SUB> Definisce il pedice: esempio H<sub> 2</SUB>O viene scritto H2O

<SUP> </SUP> Definisce l’apice: esempio x<SUP> 2</SUP> viene scritto x2

<TT> </TT> Il testo compreso sembra scritto da una macchina da scrivere

<FONT nomeparametro = "valore">testo da modificare</FONT>
Definisce il testo compreso tra i due tag

Parametri:       color(colore)              valore:             aqua, black, blue, fuchsia, gray, green,                                                                                      lime, maroon, navy, olive, purple, red,
silver, teal, white, yellow, #35b800,ecc
size(dimensione)       valore:             da 1 a 10, oppure +1; +2 ecc
face(tipo di carattere) valore:             arial, tahoma, ecc

<HR>
Crea una linea orizzontale. Non ha bisogno di essere chiuso.

Parametri:       align(definisce l’allineamento)          valore: center, left, right
size(dimensione)                               valore: 1, 2, ecc
color(colore)                                     valore: aqua, black, blue, fuchsia, ecc
width(lunghezza in pixel)                  valore: 1, 2, ecc
noshade(per eliminare l’effetto 3d) (SENZA VALORE)

<MARQUEE testo da far scorrere </ MARQUEE >
Fa scorrere il testo compreso tra i due tag

Parametri:       align(definisce l’allineamento)          valore: top, middle, bottom.
behavior(comportamento)               valore: scroll, alternate, slide.
bgcolor(colore di sfondo)                 valore: aqua, black, blue, fuchsia, ecc
width(lunghezza in pixel)                  valore: 100, 222, ecc
height(altezza in pixel)                      valore: 100, 222, ecc
direction                                           valore: left, right, up, down.
hspace(spazio libero ai lati)              valore: 100, 222, ecc
vspace(spazio libero sopra e sotto)              valore: 100, 222, ecc
loop(passaggi)                                              valore: 1, 2, ecc
scrollamount(pixel tra 2 spostament)         valore: 1, 2, ecc
scrolldelay(millisecondi tra 2 spostamenti) valore: 1, 2, ecc

Gli elenchi non ordinati

<UL> apre l’elenco: parametro: TYPE (definisce il simbolo) valore (disc, circle, square)
<LI> precede ogni elemento dell’elenco
</UL> chiude l’elenco

Gli elenchi Ordinati

<OL> apre l’elenco: parametro: TYPE (definisce il simbolo) valore (a, A, I, i)
<LI> precede ogni elemento dell’elenco
</OL> chiude l’elenco

Le Tabelle

<TABLE> apre la tabella

parametro:      border (definisce il bordo)                            valore (1, 2, 3, ecc.)
parametro:      bordercolor (definisce il colore del bordo)    valore (red, blue, ecc.)
parametro:      width (definisce la larghezza)                       valore (100, 230, 339, ecc.)
parametro:      height (definisce l’altezza)                            valore (100, 230, 339, ecc.)
parametro:      cellpadding (spazio intorno alla scritta)        valore (1, 2, 3, ecc.)
parametro:      cellscpacing (spazio tra le celle)                  valore (1, 2, 3, ecc.)

<TR> inizia una riga
</TR> chiude la riga

<TD> inizia una cella
parametro:      align (definisce l’allineamento orizzontale) valore (center, left, ecc.)
parametro:      valign(definisce l’allineamento verticale)      valore (top, bottom, ecc.)
parametro:      bgcolor (definisce il colore di sfondo)          valore (red, ecc.)
parametro:      background (definisce l’immagina di sfondo)
</TD>             chiude la cella
</TABLE> chiude la tabella

I Collegamenti

I link sono la parte più importante del world wide web. Ci sono tre tipi di link:

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

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

Come fare un link

I tag usati per generare i link sono <A> e </A>. Tutto quello che è contenuto tra questi due tag si comporterà come un link. La meta del link viene specificata aggiungendo al tag <A> l'attributo href.

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

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

I colori per i link di testo

Ci sono alcuni attributi che possono essere utili per il controllo dei colori dei link di testo.Possiamo:
a) Definire i colori per tutti i link sulla pagina: Il colore generale dei link di testo è specificato nel tag <body>, come già visto utilizzando link, vlink, alink.
b) Definire i colori per i singoli link sulla pagina: Mettendo dei TAG “font” tra i tag <a href> e </a>. Questo metodo funziona su tutti i browser tranne MSIE 3.

Esempio:<a href="http://www.yahoo.com"><font color="FF00CC"> cerca</font></a>
Nota: E' importante che i due tag <font> e </font> siano scritti tra i tag <a href> e </a>.

Tipi di mete dei 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 il parametro 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.

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>

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.
Quando crei un link per un'ancora sulla stessa pagina, inserisci semplicemente:<a href="#YourAnchor">……….</a>
Quando crei un link per ancore di pagine esterne, usa questa sintassi:<a href="http://www.yahoo.com#YahoosAnchor">……….</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.

Le Immagini

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

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.

Il tag usato per inserire un'immagine si chiama img.
Es: <img src="nomeimmagine.gif">

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.

esempio: <img src="nomeimmagine.gif" width="60" height="60">

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

BORDO INTORNO

Puoi aggiungere un bordo all'immagine usando l'opzione border come puoi vedere nell'esempio qui sotto:
Esempio: <img src="nomeimmagine.gif" border="4">

TESTO ALTERNATIVO

Puoi aggiungere un testo alternativo a un'immagine usando l'opzione
alt, come puoi vedere qui sotto:
esempio <img src="nomeimmagine.gif" alt=" testo alternativo ">

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.

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 usando l'attributo Hspace.
Ecco un esempio: <img src="nomeimmagine.gif" Hspace="30" Vspace="10">
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: align=”………….”

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.
Esempio: <img src="rainbow.gif" align="texttop">

Per finire 10 consigli per un sito perfetto:

Dai sempre un nome in lettere minuscole e non superiore agli 8 caratteri ai file delle tue pagine. Per esempio: non "PAGINA.html" ma "pagina.html".
Se possibile non inserire nella pagina immagini e foto superiori a 300 Kb.
Le dimensioni del testo non devono essere né troppo piccole né troppo grandi. Meglio una dimensione media, che permetta di leggere senza problemi.
Il colore del testo della pagina non deve essere simile a quello di sfondo, altrimenti il testo si leggerà con difficoltà.
Ricorda che il tuo sito sarà visto su molti computer diversi dal tuo e che sicuramente alcuni non lo vedranno come lo vedi tu.
Non utilizzare tipi di font troppo particolari, perché rischi che altri, che non li hanno nel loro computer, non riescano a vederli.
Utilizza GIF animate per abbellire il tuo sito, ma non metterne troppe.
Osserva e prendi spunto dai siti già esistenti. E' così che si diventa capaci di fare siti sempre più belli.
È facendo pagine web che si diventa bravi a fare pagine web! Non preoccuparti se i tuoi primi lavori non saranno strabilianti... prima o poi lo saranno!
La tua pagina web deve piacere prima di tutto a te, ma riesce a migliorare chi fa tesoro dei consigli, degli apprezzamenti e delle critiche altrui!

Buon Lavoro…
Scuola Secondaria di Primo Grado
“Enrico Fermi”
Pizzighettone

Nome:	Professione:
Cognome:

Guida html

Guida html

Introduzione HTML

Linguaggi di markup e linguaggi di programmazione

Browser Web

Il protocollo http

I server Web

Indirizzi Internet: le URL

Indirizzi IP

Root

Conclusioni

Struttura di un file HTML

Inserimento di elementi di testo HTML

Inserimento di Titoli

Inserimento di Paragrafi

Inserimento di elenchi puntati e numerati

Altri elementi di testo

Formattazione del testo

Colore, dimensione e tipi di carattere per il testo

Allineamento del testo sulla pagina

Grassetto, corsivo e caratteri sottolineati

Inserimento di immagini

Analizziamo i suoi principali attributi:

I link

Le tabelle in HTML

Le tabelle in HTML

Formattazione di un'intera pagina in tabelle

Ultimi ritocchi...

I Frame

Comporre una pagina in frame

Struttura di un frameset

Frameset annidati

Attributi del frameset

Attributi dei frame

Approfondimenti

Il target dei link in un frameset

Il tag noframes

I Moduli (forms)

Name e action

Method

Enctype (tipo di codifica)

target

I bottoni (sumbit, reset, button, image)

Il tag <button>

Il campo image

Inserire testo (campo testo, textarea, password)

Consentire delle scelte (checkbox, radio, select)

Checkbox

Radio button

Menu di opzioni (select)

Altri campi (file e hidden)

Un esempio concreto

L'attributo tabindex

Il layout dei form

Includere elementi multimediali e script

Includere un file Audio

Includere un file Video

Includere un file Flash

Includere un file Java

Includere file di scripting o CSS JavaScript e VbScript

I CSS (i fogli di stile)

Linguaggi e strumenti

I meta tag

Il DocType (DTD)| Guida HTML | HTML.it

Configurare un programma FTP

Gli editor visuali

Linguaggi di markup

Alcune Precisazioni

Evitare il ridimensionamento delle immagini in IE 6

Sovrapporre un'immagine ad un layer

Selezionare un campo di un modulo cliccando la sua dicitura

Utilizzo del Tag <base>

Differenza tra i tag testuali <p> e <div>

Creare tabelle con i bordi curvi

Editare codice Html sulla pagina come testo

Ritorno a capo nei button di form HTML

Impostare i dati in un link di tipo mailto

Disabilitare una casella di testo

Impedire ad un testo di andare a capo

Referenze dei Tag HTML