Guida base al linguaggio
HTML
Introduzione
Al giorno d'oggi esistono decine di software di impaginazione HTML che permettono di
fare velocemente dei siti web ottenendo dei buoni risultati, ma quando ci si cimenta con un
progetto web più impegnativo, o si vogliono ottenere risultati particolari, allora bisogna
intervenire direttamente nel codice HTML in quanto gli editor WYSIWYG (sigla che sta per
"What You See Is What You Get", che tradotto sarebbe "quel che vedi è quel che ottieni",
cioè quei programmi che permettono di disegnare tabelle, scrivere testi, scegliere colori, e
che poi generano il codice HTML), di solito non permettono una gestione totale e completa
sul codice, ma spesso e volentieri prendono decisioni diverse a discapito dell'utente che li
utilizza, dando risultati differenti da quel che ci si e' prefissi, quindi a volte è necessario
scrivere di proprio pugno intere sezioni di una pagina HTML affinchè il risultato sia davvero
conforme a quel che vogliamo.
D'altro canto, fino a qualche anno fa, non esistevano editor HTML avanzati come ai giorni
nostri e tutte le pagine visibili sul web si scrivevano completamente a mano utilizzando il
"Blocco Note" di Windows o altri editor testuali; le persone che hanno fatto questo
percorso hanno, al giorno d'oggi, sicuramente una marcia in più, nello sviluppo web,
rispetto a chi si affida completamente ai vari editor HTML senza conoscere il codice che
sta sotto alle proprie realizzazioni.
Inoltre sviluppare le proprie pagine web scrivendo direttamente l'HTML rappresenta un
valido metodo per realizzare un sito web semplice ed efficace per chi non vuole o non ha
la possibilità di spendere somme di denaro per acquistare licenze di costosi programmi di
sviluppo web.
Questa guida base all'utilizzo dell'HTML ti insegnerà a compredere questo linguaggio e a
realizzare in modo completo pagine e siti web senza utilizzare alcun tipo di editor, questo
non significa che non si debbano utilizzare mai e in nessun caso gli editor HTML (che
produttivamente velocizzano il lavoro), ma significa che una volta che avrai imparato a fare
una pagina web completamente a mano ti muoverai, successivamente, con o senza
editor, con maggiore disinvoltura, sicurezza e professionalità nello sviluppo web,
ottenendo risultati maggiori, pagine più affidabili e più precise, siti più visibili e navigabili,
ecc ecc; quindi durante la lettura di questa guida dimentica i tuoi editor preferiti, armati di
Blocco Note di Windows (o altro editor di puro testo, no Word e simili) e del tuo browser
preferito e iniziamo l'avventura.
Indice
Cos' è l' HTML
Scrivere il primo file HTML
Il Tag BODY e i colori
Formattazione del testo
Paragrafi ed allineamenti
Elenchi puntati e numerati
Uso ed inserimento di immagini
Link, ovvero i collegamenti ad altre pagine, siti o immagini
Tabelle
Divisione delle pagine in Frame
Form
Cos'è l'HTML?
HTML significa "Hyper Text Markup Language" e non è comparabile ad un vero e proprio
linguaggio di programmazione, ma è più vicino ad uno script, cioè una serie di istruzioni
testuali che vengono interpretate da un programma esterno, in questo caso il browser.
Quando si naviga in internet il browser che utilizziamo invia continuamente dati e ne riceve
(cioè comunica con il server dove si trovano le pagine web), quando riceve un codice
HTML il browser lo legge, lo interpreta e visualizza il contenuto della pagina a seconda
delle istruzioni che il codice HTML gli fornisce, in definitiva quindi il codice HTML è in
realtà una serie di descrizioni su come la pagina web deve essere visualizzata nel
browser.
Il codice HTML e' composto da diversi "Tag", questi Tag rappresentano le parole chiave
che i browser riconoscono ed intepretano, e servono a "marcare" per esempio un testo in
modo che questo abbia una parola in grassetto.
Per esempio se volessi scrivere la frase "Confronta i nostri prezzi utilizzando i listini." in
modo che "nostri prezzi" sia scritto in grassetto, scriverò il seguente codice:
Confronta i <b>nostri prezzi</b> utilizzando i listini.
Il Tag "<b>" serve per il grassetto; il risultato sarà:
Confronta i nostri prezzi utilizzando i listini.
Come e' possibile vedere sopra, tutti i Tag HTML si scrivono tra i caratteri "<" e ">", e tutti
quanti (a parte alcuni) hanno un inizio ed una fine, in questo caso la parte del codice
"<b>nostri prezzi</b>" indica al broswer, che interpreta il codice, di scrivere in grassetto
tutto quel che si trova fra il Tag "<b>" (inizio grassetto) e il Tag "</b>" (fine grassetto), tutto
il resto viene visualizzato con il carattere predefinito.
Il codice HTML non è case sensitive, cioe' si può scrivere sia tutto maiuscolo che tutto
minuscolo, cioè il codice "<B>nostri prezzi</B>" e "<b>nostri prezzi</b>" verrà intepretato
allo stesso modo ed avrà lo stesso risultato. E' consigliabile però scrivere tutto in
minuscolo in quanto il testo maiuscolo è fastidioso alla lettura e, a lungo andare, più
laborioso da scrivere, ed inoltre è buona norma nel web scrivere tutto quanto in minuscolo,
specialmente i nomi dei file, per esempio è meglio scrivere "indice.htm" che "INDICE.HTM"
o peggio ancora "Indice.HTM", oppure "Logo.JPG" va scritto "logo.jpg", e così via; questo
per pure ragioni tecniche legate ai differenti tipi di server che sono utilizzati, se fate largo
uso di nomi di file e link scritti in maiuscolo (totalmente o in parte) è possibile che
cambiando spazio web, oppure se l'amministratore del server passa da sistemi Windows a
sistemi Unix a vostra insaputa, vi potreste ritrovare con lo spiacevole risultato che la metà
del vostro sito risulti irraggiungibile o con le pagine web che di colpo e senza apparente
motivo non visualizzano più le immagini, oppure con link malfunzionanti; questo perchè, in
poche parole, i sistemi Unix fanno distinzione fra un file scritto in maiuscolo ed uno scritto
in minuscolo, in pratica il file "Logo.JPG" e "logo.jpg", anche se si chiamano esattamente
uguale, sono visti come differenti file e quindi non riconosciuti. E' molto importante inoltre
dare dei nomi semplici ai file che si utilizzano, evitando caratteri strani e spaziature, per
esempio è sconsigliabile nominare un file "Foto mare Luglio '01.jpg", oppure
"$contenuto[1].htm" e così via, in quanto questi caratteri vengono tradotti con codici
particolari che in alcuni casi compromettono la visualizzazione corretta della pagina
mandando in tilt il browser o il server, oppure facendovi perdere tempo negli
aggiornamenti futuri; chiunque abbia un'esperienza di sviluppo web si è già scontrato
inevitabilmente più volte con problemi (e ore perse) riguardanti nomi di file scritti con
caratteri strani o spaziature. Quando si nomina un file, che sia un'immagine o un file
HTML, utilizzare solamente lettere dell'alfabeto e numeri, evitando assolutamente simboli
e spazi, scrivendo tutto minuscolo
Scrivere il primo file HTML
Create una cartella sul destop e nominatela come preferite (es. "sitoweb"), aprite il Blocco
Note (o qualsiasi editor di testo puro, come Edit del DOS, VI di Unix, SimpleText del Mac,
ecc), fate un nuovo documento e scrivete quanto segue:
<html>
</html>
e salvatelo, nella cartella creata in precedenza, dando come nome del file "index.htm"
oppure "index.html". I file HTML possono essere salvati sia con l'estensione *.htm che con
*.html, non fa differenza, ma è consigliabile scegliere una delle due e salvare ogni file, per
praticità, sempre con la stessa estensione.
Questi due Tag HTML rappresentano l'inizio e la fine di una pagina web, il browser sa che
quando legge il Tag "<html>" è l'inizio di una pagina web, e quando arriva a "</html>" ne è
la fine.
Ora fate doppio clic sul file "index.htm" che avete salvato, se è andato tutto bene dovrebbe
aprirsi il browser visualizzando una pagina vuota (in quanto non c'è ancora nessun
contenuto), se invece si apre il Blocco Note di nuovo vuol dire che avete salvato un file
con un nome sbagliato, per esempio "index.htm.txt", se così fosse rinominate il file con il
nome giusto; se facendo doppio clic non succede nulla, o si apre qualche altro
programma, controllate che nel vostro computer tutto sia installato correttamente e che le
estensioni dei file siano assegnate in modo corretto; provate eventualmente ad aprire il
browser e tramite il menu File>Apri aprire il file HTML che avete salvato.
Il Tag BODY e i colori
Ora procederemo con l'aggiungere il contenuto alla nostra pagina web, per far questo
(sempre utilizzando lo stesso file di prima) scrivere in mezzo a "<html>" e "</html>" i
seguenti Tag:
<body>
Ciao mondo!
</body>
ottendendo in totale il seguente codice:
<html>
<body>
La mia pagina web personale.
</body>
</html>
Salvate e visualizzate la pagina facendo doppio clic sul file o premendo il tasto "Aggiorna"
del vostro browser. Il risultato sarà una pagina vuota con la semplice scritta:
La mia pagina web personale.
Nel Tag "<body>" è possibile specificare molte informazioni utili, quali il colore del testo, il
colore dei link, lo sfondo della pagina, sia inteso come colore che come immagine
(texture).
I colori in HTML
I colori in HTML si specificano utilizzando il sistema RGB (Red, Green, Blu, cioe' rosso,
verde, blu) scrivendoli in esadecimale, con il prefisso "#", miscelando questi valori è
possibile ottenere tutta la scala cromatica.
Per esempio il colore rosso e' rappresentato dai valori RGB 255,0,0. La scala RGB va da 0
a 255, quindi il valore 255,0,0 significa che il rosso e' in quantità massima e che il verde e
il blu sono completamente assenti, quindi il risultato è che avremo un colore rosso acceso,
e questo in esadecimale di scrive "#ff0000". Il blu in RGB è uguale a 0,0,255 e in
esadecimale lo 0 si scrive con "00" e il 255 di scrive con "ff", quindi si traduce in "#0000ff",
e così via.
Per le varie sfumature e colori fare riferimento ad una tabella colori in esadecimale, oppure
potete utilizzare programmi appositi che miscelano i colori e restituiscono il valore
esadecimale.
Colore del testo
Il colore del testo (se non differentemente specificato) è preimpostato su nero, per
specificare un colore diverso, per esempio giallo, bisogna aggiungere, al Tag "<body>" il
seguente attributo "text":
<body text="#ffff00">
Colore dello sfondo
Il colore dello sfondo preimpostato è bianco, ma possiamo sia cambiarlo che utilizzare una
texture, o una foto, come immagini di sfondo. E' consigliabile evitare di scegliere colori
molto forti come sfondo in quanto potrebbero infastidire l'utente che visita il vostro sito,
quindi ridurre la sua permanenza o addirittura spingere gli utenti ad andare altrove quasi
subito.
Per semplicemente il colore di sfondo, per esempio azzurro chiaro, dobbiamo aggiungere
l'attibuto "bgcolor":
<body bgcolor="#ccffff">
Se si visualizza la pagina nel browser si vedrà che lo sfondo ha assunto un colore azzurro
chiaro.
Per impostare invece una texture di sfondo abbiamo bisogno di un'immagine, questa non
deve essere troppo grande o pesante altrimenti aumenterà il tempo di scaricamento. Uno
sfondo adatto è rappresentato dall'immagine sotto riportata, se non hai nulla a portata di
mano puoi scaricarla e salvarla nella cartella che hai creato precedentemente insieme al
file HTML che hai creato.
Per inserire questo sfondo nella tua pagina bisogna inserire la specifica "background" al
Tag "<body>", come sotto riportato:
<body background="sfondo.jpg">
Salva e visualizza la pagina, vedrai che ora questa presenterà uno sfondo uniforme
composto da tante copie, affiancate in righe e colonne all'infinito, di questa immagine
scelta e, scorrendo in basso nel caso in cui la pagina abbia un lungo testo) lo sfondo
scorrera' insieme alla pagina, cioè il testo sembrerà stampato sullo sfondo come se questo
fosse una carta, se invece vogliamo ottenere l'effetto che il testo sembri stampato su un
lucido che scorre sullo sfondo fisso dobbiamo aggiungere un'ulteriore specifica, cioè
"bgproperties", quindi:
<body background="sfondo.jpg" bgproperties="fixed">
Questo è molto comodo quando, per esempio, come sfondo ultilizziamo una grande
immagine che rimane fissa e non scorre, però è sconsigliabile utilizzare quest'ultima
specifica per lo sfondo in quanto non tutti i browser la supportano, e il fine del buon
sviluppatore web è di realizzare siti che siano visibili ugualmente da differenti browser in
modo da rendere un'immagine unica per tutti i visitatori.
Nota: è possibile mettere lo sfondo in una sottocartella, per esempio al fine di organizzare
meglio i files nel sito, in questo caso si dovrà specificare il percorso relativo dalla directory
dove si trova il file html alla directory e al filename che rappresenta lo sfondo. Poniamo il
caso che lo sfondo si trovi nella cartella "images", nel valore dell'attributo "background"
dovremo specificare, al posto di "sfondo.jpg", il seguente valore: "images/sfondo.jpg".
Nota: se si utilizzano contemporaneamente sia il colore di sfondo (bgcolor) che una
texture (background) quest'ultima andra' a coprire completamente il colore di sfondo,
pertanto se decidiamo di utilizzare una texture di sfondo è inutile specificare anche il
colore in quanto non cambierà nulla nella visualizzazione finale della pagina.
Colore dei link
I link (o collegamenti) verranno trattati più avanti, tuttavia nel tag "<body>" è possibile
specificarne i colori in quanto è proprio qui che si impostano gli attributi generali di una
pagina web.
Le proprietà dei colori dei link hanno 3 diverse specifiche relative ad un link visitato, ad un
link non visitato, e ad un link attivo, cioè mentre lo si clicca, e queste 3 differenti specifiche
sono: "link" per i link non visitati, "vlink" per i link visitati, "alink" per i link attivi o mentre si
cliccano.
Nell'esempio vogliamo far si che i link nella nostra pagina siano blu intenso quando non
sono mai stati cliccati, blu dopo che sono stati cliccati, e neri mentre si cliccano, quindi
aggiungeremo questi attributi al Tag "<body>":
<body link="#0000ff" vlink="#000080" alink="000000">
Nota: Se non viene specificato nessun colore i colori saranno: blu primario per i link non
visitati, viola per i link visitati e rosso per i link attivi.
Riassumendo...
Ora scriveremo un file html contenente tutte queste specifiche sopra descritte, quindi:
<html>
<body text="#ffff00" bgcolor="#ccffff" link="#0000ff" vlink="#000080" alink="000000">
La mia pagina web personale.
</body>
</html>
Salva e visualizza il file nel browser, avrai una pagina azzurra con una scritta gialla e
nessun link in quanto non è stato ancora inserito. La scritta gialla è illeggibile quindi
cambiamola in nera sostituendo: text="#ffff00" con text="#000000" quindi salva e
visualizza, ora la scritta è leggibile, ma cambiamo anche lo sfondo con la texture, per far
questo
eliminiamo
la
specifica:
bgcolor="#ccffff"
e
sostituiamola
con:
background="sfondo.jpg"
Il codice HTML definitivo è questo:
<html>
<body text="#000000" background="sfondo.jpg" link="#0000ff" vlink="#000080" alink="000000">
La mia pagina web personale.
</body>
</html>
Se viene visualizzato nel browser si vedrà una pagina con una texture di sfondo uniforme
e la scritta sopra in nero.
Il prossimo passo sarà di aggiungere un titolo e formattare il testo.
Formattazione del testo
In HTML esistono molti differenti Tag per scrivere il testo in tutte le maniere possibili, per
titoli, paragrafi, giustificazioni, citazioni, grassetto, corsivo, e molti altri. Analizziamo i più
utili.
Headers
I Tag "headers" sono specifici per i titoli e titoletti, infatti sono già pronti, per così dire,
all'utilizzo, senza che si specifichino direttive per grandezza del carattere, grassetto, ecc.
In tutto sono sei Tag e la sintassi è la seguente "<hX>...testo...</hX>", dove X viene
sostituito da un numero da 1 a 6, dove 1 è il titolo più grande e 6 il più piccolo, per
esempio:
<h1>Titolo grandezza 1</h1>
<h2>Titolo grandezza 2</h2>
<h3>Titolo grandezza 3</h3>
<h4>Titolo grandezza 4</h4>
<h5>Titolo grandezza 5</h5>
<h6>Titolo grandezza 6</h6>
Se scriviamo questo all'interno di un file html, poi lo salviamo e lo visualizziamo, il risultato
è questo:
Titolo grandezza 1
Titolo grandezza 2
Titolo grandezza 3
Titolo grandezza 4
Titolo grandezza 5
Titolo grandezza 6
Formattazione del carattere
Ovviamente, oltre alle specifiche per il testo che si inseriscono nel Tag "<body>" della
pagina, ne esistono altri, per permettere di ottenere testi multicolori, con grassetti, corsivi,
sottolineati, piu' grandi e piu' piccoli, questi si ottiene con il Tag "<font>"
Se scriviamo in un file html la seguente linea:
<font face="verdana" size="2" color="#0000ff">Ultime novità</font>
Otterremo il risultato:
Ultime novità
Come si può vedere la scritta "Ultime novità" si trova fra il Tag "<font>" e "</font>" che
delimitano la porzione di testo da formattare. L'attributo "face" specifica il tipo di carattere e
fra virgolette deve essere scritto il nome del font, per esempio "verdana", "arial", "times",
ecc. L'attributo "size" specifica la dimensione, che va da un massimo di 6 ad un minimo di
1, praticamente l'inverso del comportamento degli "headers" (vedi su)
E' possibile specificare più colori o più dimensioni utilizzando sempre il Tag "<font>" per
delimitare il testo a cui si devono applicare gli attributi di colore e dimensioni, per esempio:
<font face="verdana" size="2" color="#0000ff">Questo testo di colore blu e grandezza 2 contiene una parola
<font color="#ff0000">rossa</font> e una parola <font color="#00ff00">verde</font>, alcune parole <font
size="3">più grandi</font> e alcune <font size="1">più piccole</font>.</font>
Il risultato sarà:
Questo testo di colore blu e grandezza 2 contiene una parola rossa e una parola verde, alcune
parole più grandi e alcune più piccole.
A capo
Per andare a capo si utilizza il Tag "<br>" e il suo utilizzo e' molto semplice, infatti questo
Tag si usa da solo e non c'e' bisogno di scrivere il corrispondente "</br>" come tutti gli altri
Tag, ma semplicemente, ogni volta che vogliamo andare a capo, scriviamo "<br>" nel
punto desiderato, per esempio la frase:
<font face="verdana" size="2" color="#000000">Sopra la panca la capra campa, sotto la panca la capra
crepa.</font>
viene scritto tutto in una riga, se proviamo a scriverlo in HTML e visualizzarlo, ma se
vogliamo mettere delle mandate a capo possiamo scrivere:
<font face="verdana" size="2" color="#ff0000">Sopra la panca <br>la capra campa, <br>sotto la panca
<br>la capra crepa.</font>
il risultato sarà:
Sopra la panca
la capra campa,
sotto la panca
la capra crepa.
Stili per arricchire il testo
Esistono svariati Tag che servono per abbellire e arricchire il testo, o per renderlo più
chiaro e versatile, eccone un elenco dei più utilizzati:
<font face="verdana" size="2" color="#0000ff">
<b>questo testo è grassetto</b><br>
<u>questo testo è sottolineato</u><br>
<i>questo testo è corsivo</i><br>
<strike>questo testo è barrato</strike><br>
<pre>questo testo è preformattato</pre><br>
questa <sup>parola</sup> è allineata in alto<br>
questa <sub>parola</sub> è allineata in basso
</font>
Ancora una volta, se scriviamo questo codice in un file HTML e poi lo visualizziamo,
otterremo questo risultato:
questo testo è grassetto
questo testo è sottolineato
questo testo è corsivo
questo testo è barrato
questo testo è preformattato
questa parola è allineata in alto
questa parola è allineata in basso
Esistono molti altri Tag per formattare il testo ma sono più che altro riproposizioni dei Tag
basilari sopra descritti.
Paragrafi ed allineamenti
Il testo, oltre che ad essere formattato, può, ovviamente, anche essere allineato a destra,
al centro e a sinistra.
Ci sono svariati modi per allineare un testo, tramite il Tag "<p>", "<div>" e "<center>" ma
mentre i primi due servono per allineare il testo in tutti i modi, l'ultimo serve solo per
centrarlo ed è stato dichiarato obsoleto, anche se è tuttora supportato grazie alla sua
grande diffusione in rete.
Per allineare un testo a destra è possibile farlo tramite il seguente codice:
<p align="right">Testo allineato a destra</p>
oppure con:
<div align="right">Testo allineato a destra</div>
in entrambi i casi si otterrà questo:
Testo allineato a destra
Testo allineato a destra
Se al posto di "right" scriviamo "left" il testo verrà allineato a sinistra, se al posto di "right"
scriviamo "center" il testo verrà allineato al centro, per esempio:
<p align="center">Testo allineato al centro</p>
<div align="center">Testo allineato al centro</div>
<p align="left">Testo allineato a sinistra</p>
<div align="left">Testo allineato a sinistra</div>
si otterra:
Testo allineato al centro
Testo allineato al centro
Testo allineato a sinistra
Testo allineato a sinistra
Ovviamente questi testi possono essere formattati utilizzando il Tag "<font>" e gli stili
come descritto nella sezione precedente, per esempio
<p align="right"><font size="2" color="#ff0000">Testo rosso allineato a destra</font></p>
<div align="right"><font size="2" color="#0000ff">Testo blu allineato a destra</font></div>
<p align="center"><font size="2" color="#00ff00">Testo verde allineato al centro</font></p>
<div align="center"><font size="2"><b>Testo grassetto allineato al centro</b></font></div>
<p align="left"><font size="2" color="#0000ff"><i>Testo blu corsivo allineato a sinistra</i></font></p>
<div align="left"><font size="3" color="#00ff00">Testo verde piu' grande allineato a sinistra</font></div>
si otterrà:
Testo rosso allineato a destra
Testo blu allineato a destra
Testo verde allineato al centro
Testo grassetto allineato al centro
Testo blu corsivo allineato a sinistra
Testo verde piu' grande allineato a sinistra
Come è possibile notare, l'uso di "<div>" o "<p>" e' completamente indifferente.
Per allineare al centro è possibile scrivere anche:
<center>Testo allineato al centro</center>
e si otterrà:
Testo allineato al centro
ma come abbiamo detto, questo Tag è obsoleto anche se ancora supportato, quindi se ne
sconsiglia l'utilizzo.
Per giustificare un paragrafo di un lungo testo si usano le stesse istruzioni sopra descritte,
in questo caso useremo per praticità il Tag "<p>", il codice è il seguente:
<p align="left">
SINISTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo
ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis.
Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et
in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue
locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit
extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo
et ante omnia dixisset ‘Deus’.
</p>
<p align="right">
DESTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo ipsum
fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis. Absurdum
atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum
factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis incipit
ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra Deum, sed
totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo et ante omnia
dixisset ‘Deus’.
</p>
<p align="center">
CENTRATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo
ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis.
Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et
in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue
locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit
extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo
et ante omnia dixisset ‘Deus’.
</p>
<p align="justify">
GIUSTIFICATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse non titubo
ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per modum responsionis.
Absurdum atque rationi videtur orrificum ante Deum ab homine quicquam nominatum fuisse, cum ab ipso et
in ipsum factus fuisset homo. Nam sicut post prevaricationem humani generis quilibet exordium sue
locutionis incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit
extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus loquens primo
et ante omnia dixisset ‘Deus’.
</p>
Se scriviamo questo codice in un file HTML, salviamo e visualizziamo, il risultato sarà il
seguente:
SINISTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu
esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel
per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine
quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post
prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’,
rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra
Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus
loquens primo et ante omnia dixisset ‘Deus’.
DESTRA Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu esse
non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel per
modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine
quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post
prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’,
rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra
Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus
loquens primo et ante omnia dixisset ‘Deus’.
CENTRATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in promptu
esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum interrogationis vel
per modum responsionis. Absurdum atque rationi videtur orrificum ante Deum ab homine
quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset homo. Nam sicut post
prevaricationem humani generis quilibet exordium sue locutionis incipit ab ‘heu’,
rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium sit extra
Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod primus
loquens primo et ante omnia dixisset ‘Deus’.
GIUSTIFICATO Quid autem prius vox primi loquentis sonaverit, viro sane mentis in
promptu esse non titubo ipsum fuisse quod ‘Deus’ est, scilicet El, vel per modum
interrogationis vel per modum responsionis. Absurdum atque rationi videtur orrificum ante
Deum ab homine quicquam nominatum fuisse, cum ab ipso et in ipsum factus fuisset
homo. Nam sicut post prevaricationem humani generis quilibet exordium sue locutionis
incipit ab ‘heu’, rationabile est quod ante qui fuit inciperet a gaudio; et cum nullum gaudium
sit extra Deum, sed totum in Deo, et ipse Deus totus sit gaudium, consequens est quod
primus loquens primo et ante omnia dixisset ‘Deus’.
Elenchi puntati e numerati
In HTML ci sono molti tipi di elenchi puntati e numerati in diverse maniere, i Tag per
ottenere questo sono: "<ol>...<li>...</ol>", dove "<ol>" si mette all'inizio dell'elenco, "<li>" si
mette davanti ad ogni nuova voce e "</ol>" si mette alla fine dell'elenco puntato, nel caso
di elenchi numerati. Nel caso di elenchi puntati senza alcun tipo di ordinazione al posto di
"ol" si mette "ul".
Elenchi numerati
Gli elenchi numerati sono quelli in cui all'inizio è presente una numerazione o
un'ordinazione con lettere o numeri romani; vediamo alcuni esempi:
con il codice:
<ol>
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco numerato con numeri:
1. Voce numero 1.
2. Voce numero 2.
3. Voce numero 3.
con il codice:
<ol type="A">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con lettere maiuscole:
A. Voce numero 1.
B. Voce numero 2.
C. Voce numero 3.
con il codice:
<ol type="a">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con lettere minuscole:
a. Voce numero 1.
b. Voce numero 2.
c. Voce numero 3.
con il codice:
<ol type="I">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con numeri romani maiuscoli:
I.
II.
III.
Voce numero 1.
Voce numero 2.
Voce numero 3.
con il codice:
<ol type="i">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
si ottiene un elenco ordinato con numeri romani minuscoli:
i.
ii.
iii.
Voce numero 1.
Voce numero 2.
Voce numero 3.
Elenchi puntati non numerati
Questo tipo di elenchi sono, come dice il titoletto, solamente puntati e non hanno un
ordinazione di alcun tipo, possiamo però scegliere il tipo di punto che verrà messo ad ogni
voce, ma vediamo alcuni esempi:
Con il codice:
<ul type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>
si otterrà:
Voce numero 1.
Voce numero 2.
Voce numero 3.
Con il codice:
<ul type="circle">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>
si otterrà:
o
o
o
Voce numero 1.
Voce numero 2.
Voce numero 3.
Con il codice:
<ul type="square">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>
si otterrà:
Voce numero 1.
Voce numero 2.
Voce numero 3.
Elenchi puntati e numerati nidificati.
E' ovviamente possibile creare elenchi puntati che contengono elenchi numerati che a loro
volta ne contengono altri e cosi' via, per esempio il codice:
<ol type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<ul type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<ol type="A">
<li>Voce numero 1.
<ol type="I">
<li>Voce numero 1.
<li>Voce numero 2.
</ol>
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
<li>Voce numero 3.
</ul>
<li>Voce numero 3.
</ol>
genera il seguente risultato:
Voce numero 1.
Voce numero 2.
Voce numero 1.
Voce numero 2.
A. Voce numero 1.
I.
Voce numero 1.
II. Voce numero 2.
B. Voce numero 2.
C. Voce numero 3.
Voce numero 3.
Voce numero 3.
Uso ed inserimento di immagini
Per inserire un'immagine in un qualunque punto della pagina web si utilizza il seguente
Tag: "<img src="nomefile">", il suo utilizzo è alquanto semplice, infatti se utilizziamo il
codice:
<img src="fiore.jpg">
otterremo il seguente risultato:
E' possibile inoltre specificare con l'attributo "border" un bordo colorato intorno
all'immagine, per esempio:
<img src="fiore.jpg" border="3">
si otterrà:
E' possibile anche specificare, con l'attributo "alt", un'etichetta di testo che verrà
visualizzata quando ci soffermeremo con il mouse sopra all'immagine, come nell'esempio
sotto riportato:
<img src="fiore.jpg" border="3" alt="questo è un fiore di loto">
Tramite gli attributi "height" e "width" si possono modificare le dimensioni di un'immagine,
ma questo e' sconsigliabile in quanto questa perderà di qualità, si consiglia di preparare
l'immagine già nelle dimensioni desiderate.
Con il codice:
<img src="fiore.jpg" width="50" height="50">
si ottiene
Con il codice:
<img src="fiore.jpg" width="250" height="250">
si ottiene:
Con il codice:
<img src="fiore.jpg" width="400" height="60">
si ottiene:
Tramite gli attributi "hspace" e "vspace" è possibile specificare una distanza in pixel dagli
altri oggetti che si trovano lungo i quattro lati dell'immagine. Per esempio scrivendo il
seguente codice:
<div align="center">
<img src="fiore.jpg" width="50" height="50"><br>
<img src="fiore.jpg" width="50" height="50">
<img src="fiore.jpg" width="50" height="50" hspace="10" vspace="5">
<img src="fiore.jpg" width="50" height="50"><br>
<img src="fiore.jpg" width="50" height="50">
</div>
otterremo:
Dove la spaziatura orizzontale, intorno all'immagine al centro, è di 10 pixel, e la spaziatura
verticale e' di 5 pixel.
Tramite l'attributo "align" infine e' possibile specificare l'allineamento dell'immagine rispetto
ad altre immagini o al testo; vediamo alcuni esempi:
Con il codice:
<p><img src="fiore.jpg" align="top">questo è un testo</p>
otterremo il testo allineato in alto rispetto all'immagine:
questo è un testo
Con il codice:
<p><img src="fiore.jpg" align="middle">questo è un testo</p>
otterremo il testo allineato al centro rispetto all'immagine:
questo è un testo
Con il codice:
<p><img src="fiore.jpg" align="bottom">questo è un testo</p>
otterremo il testo allineato in basso rispetto all'immagine:
questo è un testo
I prossimi due attributi sono molti utili per l'inserimento di immagini all'interno di un testo
lungo:
Con il codice:
<p><img src="fiore.jpg" align="left"> rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x
te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose
rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x
te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose
rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te, rose rosse x te,</p>
otterremo l'immagine inglobata nel testo e allineata a sinistra:
rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse
x te rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose
rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse
x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose
rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x
te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse
x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose
rosse x te, rose rosse x te, rose rosse x te, rose rosse x te.
Con il codice:
<p><img src="fiore.jpg" align="right"> rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x
te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose
rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x
te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose
rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x
te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose
rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,</p>
otterremo l'immagine inglobata nel testo e allineata a destra:
rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse
x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose
rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse
x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose
rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x
te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse
x te,
rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose
rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te, rose rosse x te,
rose rosse x te, rose rosse x te, rose rosse x te.
Link, ovvero i collegamenti ad altre
pagine, siti o immagini.
Il link rappresenta in realtà l'anima del web in quanto senza di esso non sarebbe possibile
alcuna navigazione, e tutte le funzioni principali del web (motori di ricerca, portali, ecc)
sarebbero impossibili da gestire.
Per aggiungere un link dalla nostra pagina web ad un altra pagina, o sito, e' necessario
utilizzare il Tag "<a href=link>...testo e/o immagine</a>", per esempio se volessimo linkare
un sito web dal nostro sito, scriveremo:
<a href="http://www.feelingrose.com">Sito web di Silvy</a>
otterremo:
Sito web di Silvy
Se facciamo clic su questo link andremo nel sito di Silvy, come specificato, ma questo
andrà a sostituire il nostro sito, quindi perchè non farlo aprire in una nuova finestra,
affinchè l'utente non vada via dal nostro sito? Questo è possibile tramite l'attributo "target",
come nel seguente esempio:
<a href="http://www.feelingrose.com" target="_blank">Sito web di Silvy</a>
e il risultato sara':
Sito web di Silvy
però in questo caso quando faremo clic su di esso si aprirà una nuova finestra con il link
da noi specificato.
Se si vuole scrivere un testo corto ma allo stesso tempo si vuole fornire una descrizione
del link, è possibile farlo con l'attributo "title", per esempio:
<a href="http://www.feelingrose.com" target="_blank" title="Sito web di Silvy">Silvy</a>
otterremo:
Silvy
e quando andremo con il mouse sopra al link apparirà il testo specificato.
Ovviamente è possibile sostituire l'indirizzo web http://www.feelingrose.com con un file
HTML del nostro sito che avremmo realizzato in precedenza, ad esempio "news.htm",
oppure ad un'immagine, ad esempio "fiore.jpg", cliccando sul link si aprirà il collegamento
specificato.
E' possibile inoltre utilizzare un'immagine come link cliccabile, scrivendo il seguente
codice:
<a href="http://www.feelingrose.com" target="_blank" title="Sito web di Silvy"><img src="fiore.jpg"></a>
otterremo:
Questa è un'immagine cliccabile e funziona esattamente con il link testuale descritto
sopra. Nel caso che si voglia rimuovere il bordo blu basta specificare "border=0" nel Tag
dell'immagine.
Bookmark (segnalibri)
Un bookmark non è altro che un collegamento ad una sezione specifica della stessa
pagina dove si trova il link, questo si ottiene inserendo un Tag particolare all'interno della
pagina, cioe' "<a name=nome>", che ne segnala la posizione (come una bandierina o un
segnalibro), poi utilizzando la solita sintassi per creare il collegamento.
Ad esempio, all'inizio di questa sezione, è stato inserito il tag:
<a name="collegamenti"></a>
quindi utilizzando il codice:
<a href="collegamenti">Torna all'inizio della sezione</a>
si otterrà:
Torna all'inizio della sezione
e cliccando su questo link l'utente verrà sbalzato all'inizio del capitolo.
Link ad email
E' possibile anche inserire un collegamento ad un indirizzo email, in modo che l'utente,
cliccando sopra, si ritrovi con il proprio client di posta aperto pronto per spedire un
messaggio di posta elettronica all'indirizzo email che verrà specificato, questo
aggiungendo "mailto:" nell'url, come nell'esempio:
<a href="mailto:indirizzo@email">Contattaci</a>
si otterrà:
Contattaci
cliccando su questo link ci ritroveremo il nostro client di posta aperto con l'indirizzo email
già preimpostato.
Target
L'attributo "target" è molto utile alla navigazione quando abbiamo la necessità di far aprire
una pagina web o un URL esterno in una nuova finestra o in un determinato frame (che
sono trattati più avanti).
Si utilizza così:
<a href="pagina.htm" target="nome">link</a>
Nel valore di "target" va specificato un nome di un frame, al clic quella determinata pagina
si aprirà nel nome del frame specificato nel valore di "target, oppure in questo valore è
possibile anche specificare una delle parole chiave predefinite per far aprire, per esempio,
la pagina in una nuova finestra del browser. Le principali parole chiave sono:
"_self" per aprire la pagina nello stesso frame.
"_top" per annullare i frame.
"_blank" per aprire la pagina in una nuova finestra del browser.
Tabelle
In HTML le tabelle sono degli strumenti molto utili per l'impaginazione e la formattazione
dei contenuti delle pagine web, se utilizzate in modo corretto spesso sono la soluzione di
molte problematiche e possono dare un aspetto grafico più gradevole al contenuto della
pagina e all'organizzazione di dati, come schede prodotto, elenchi, ecc.
La tabella può essere sia visibile che invisibile, fissa oppure adattarsi ad una pagina ed
essere formattata in varie maniere; si tratta di un elemento molto flessibile.
Il Tag "<table>"
La sintassi per creare una tabella di 2x2 celle è questa:
<table width="400" border="3" cellpadding="3" cellspacing="3">
<tr>
<td>cella 1</td>
<td>cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</table>
Il risultato nel browser è questo:
cella 1
cella 2
cella 3
cella 4
Analizziamo
questo
codice.
I
Tag
per
l'inizio
e
la
fine
della
tabella
sono
"<table>...</table>", in mezzo a questi ci sono i Tag per la definizione di righe e colonne,
ma vediamo gli attributi principali della tabella. L'attributo "width" ne determina la larghezza
in pixel, se omesso la tabella si allargherà o restringerà a seconda del contenuto, è
possibile inoltre specificare una larghezza della tabella in percentuale, se per esempio
scriviamo come valore "70%" la tabella si dimensionerà automaticamente al 70% dello
spazio disponibile adattandosi alla larghezza della finestra del . E' possibile anche
specificare la proprietà "height" che ne specifica l'altezza, ma si consiglia di non usarla.
L'attributo "border" specifica la larghezza del bordo, se come valore si da zero allora la
tabella risulterà completamente trasparente però manterrà la forma e il contenuto, più si
aumenta questo valore e più si otterrà un bordo ampio, come preimpostazione il bordo
avrà un aspetto rialzato, ma anche i bordi possono essere colorati. Gli attributi
"cellpadding" e "cellspacing" specificano rispettivamente lo spazio che c'è fra l'interno della
cella e il proprio contenuto e lo spazio che c'è fra una cella e l'altra.
Per speficificare un colore di sfondo globale per la tabella basta aggiungere la proprietà
"bgcolor" seguito da un valore esadecimale per il colore, in questo modo:
bgcolor="#0000ff", e la tabella si colorerà tutta con quel colore.
Per specificare il colore del bordo chiaro bisogna aggiungere la proprietà "bordercolorlight"
seguito da un valore esadecimale per il colore, la stessa cosa vale per il bordo scuro con
la proprietà "bordercolordark"
Vediamo un esempio di codice per tutto ciò:
<table width="400" border="3" cellpadding="3" cellspacing="3" bordercolordark="#cc0000"
bordercolorlight="#ffff00" bgcolor="#ccffff">
<tr>
<td>cella 1</td>
<td>cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</table>
Il risultato sarà:
cella 1
cella 2
cella 3
cella 4
E' possibile inoltre specificare un'immagine di sfondo, proprio come nel tag "<body>", in
questo modo: background="sfondo.jpg"; un esempio pratico:
<table width="400" border="3" cellpadding="3" cellspacing="3" bordercolordark="#cc0000"
bordercolorlight="#ffff00" bgcolor="#ccffff" background="sfondo.jpg">
<tr>
<td>cella 1</td>
<td>cella 2</td>
</tr>
<tr>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</table>
risultato:
cella 1
cella 2
cella 3
cella 4
ll Tag <tr>
Il Tag "<tr>...</tr>" specifica l'inizio e la fine di una riga, ogni volta che avremo bisogno di
una nuova riga bisognerà aggiungere questi due Tag fra "<table>...</table>", ma non è
possibile inserire alcun contenuto in mezzo ai Tag che specificano la riga in quanto c'è
comunque bisogno di specificare la colonna, anche se questa fosse unica.
Il Tag <td>
Il Tag "<td>...</td> specifica una colonna ed è proprio fra questi due che vengono inseriti i
contenuti, praticamente tutti gli altri Tag costituiscono solo informazioni sulla struttura
globale della tabella. Il contenuto di questo tag può essere qualsiasi cosa: un testo
formattato e colorato, delle immagini, paragrafi o altre tabelle. Può anche essere colorato,
avere degli sfondi grafici ed essere allineato.
Vediamo un esempio di tutto ciò:
<table width="400" border="3" cellpadding="3" cellspacing="3" bordercolordark="#cc0000"
bordercolorlight="#ffff00" bgcolor="#ccffff">
<tr>
<td bgcolor="#00FF00" align="center"><b><font face="arial">cella 1</font></b></td>
<td bgcolor="#0000FF" align="right"><font color="#ffff00" face="verdana" size="1">cella 2</font></td>
</tr>
<tr>
<td bgcolor="#800000" align="left"><b><i><font color="#ffffff">cella 3</font></i></b></td>
<td background="sfondo.jpg">cella 4</td>
</tr>
</table>
Il risultato sarà:
cella 2
cella 1
cella 3
cella 4
Il contenuto del Tag "<td>" può anche essere allineato verticalmente, utilizzando la
proprietà "valign" assegnando i valori "top" (sopra), "middle" (centro) e "bottom" (sotto),
come nell'esempio:
<table border="3" cellpadding="3" cellspacing="3" width="400" height="200">
<tr>
<td valign="top">cella 1</td>
<td valign="middle">cella 2</td>
<td valign="bottom">cella 3</td>
</tr>
</table>
Risultato:
cella 1
cella 2
cella 3
Tabelle dentro altre tabelle
E' possibile inserire tabelle dentro ad altre celle di una tabella preesistente, in modo molto
semplice, basta reinserire il codice di un'intera tabella all'interno dei Tag "<td>...</td>", ad
esempio:
<table border="3" cellpadding="3" cellspacing="3" width="400">
<tr>
<td valign="top">Tabella1<br>cella1
<table border="3" cellpadding="3" cellspacing="3" width="100%">
<tr>
<td>Tabella2<br>cella1</td>
<td>Tabella2<br>cella2</td>
<td>Tabella2<br>cella3</td>
</tr>
<tr>
<td>Tabella2<br>cella4</td>
<td>Tabella2<br>cella5</td>
<td>Tabella2<br>cella6</td>
</tr>
</table>
</td>
<td valign="top">Tabella1<br>cella2</td>
<td valign="top">Tabella1<br>cella3</td>
</tr>
<tr>
<td valign="top">Tabella1<br>cella2</td>
<td valign="top">Tabella1<br>cella2</td>
<td valign="top">Tabella1<br>cella2</td>
</tr>
</table>
Il risultato è:
Tabella1
cella1
Tabella1 Tabella1
cella2
cella3
Tabella2 Tabella2 Tabella2
cella1
cella2
cella3
Tabella2 Tabella2 Tabella2
cella4
cella5
cella6
Tabella1
cella2
Tabella1 Tabella1
cella2
cella2
Unione di celle
Le celle di una tabella possono essere unite, sia in senso verticale che orizzontale, per
creare impaginazioni particolari, questo si ottiene con gli attributi "rowspan" per unire
verticalmente e con "colspan" per unire orizzontalmente. Ma vediamo un esempio pratico:
<table border="3" cellpadding="3" cellspacing="3">
<tr>
<td colspan="3">cella1</td>
<td>cella2</td>
</tr>
<tr>
<td rowspan="3">cella3</td>
<td>cella4</td>
<td>cella5</td>
<td>cella6</td>
</tr>
<tr>
<td>cella7</td>
<td>cella8</td>
<td>cella9</td>
</tr>
<tr>
<td>cella10</td>
<td>cella11</td>
<td>cella12</td>
</tr>
</table>
si ottiene
cella1
cella2
cella4
cella5
cella6
cella3 cella7
cella8
cella9
cella10 cella11 cella12
Divisione delle pagine in Frame
Prima di iniziare a trattare questo argomento è necessario chiarire bene che i motori di
ricerca non indicizzano i siti e le pagine web sviluppate con i frame, questi interrompono
l'indicizzazione del sito non appena appare la struttura di un frame, fermandosi a quella
pagina web, quindi se il sito è tutto sviluppato con i frame sin dalla prima pagina avete
poche speranze che il sito abbia molte visite. Quindi dimenticatevi dei frame e sviluppate
solo pagine intere. Se proprio avete vagliato ogni possibile soluzione e non vi resta altro
che suddividere le vostre pagine in frame allora dovrete mettere un particolare impegno
nella cura dei Meta Tags , del titolo e del contenuto che andrete a mettere in mezzo ai Tag
"<noframes>...</noframes>", inoltre se sviluppate tutto un sito basato sui frame è buona
norma affiancarlo ad un sito alternativo, magari solo testuale, in modo che i motori di
ricerca possano indicizzare nei loro database tutte le pagine e sottopagine.
Una pagina in frame non è altro che un contenitore che contiene altre sottopagine, quindi
se per esempio creiamo una pagina web suddivisa in due frame indipendenti ci
ritroveremo a lavorare con 3 pagine web, cioè la prima che rappresenta la struttura base e
altre due che riempiono questa struttura.
Per impostare una pagina in frame dovremo, come detto sopra, creare un documento
HTML dove ci sarà specificata la struttura e le divisioni, poi altrettante pagine web (di
contenuto) per quante divisioni avremo impostato. Un esempio di struttura base è questo:
<html>
<head>
<title>Titolo</title>
</head>
<frameset rows="100,*">
<frame name="intestazione" src="intestazione.htm">
<frame name="principale" src="principale.htm">
</frameset>
</html>
Per visualizzare il risultato clicca qui.
Come è possibile vedere dall'esempio abbiamo ottenuto una pagina web divisa in due
frame orizzontali, che rappresentano due pagine indipendenti, questi due frame sono divisi
da una barra che è possibile anche spostare ridimensionando così i frame stessi, se si
vuole invece rendere invisibile questa barra divisoria basta aggiungere nel Tag
"<frameset>" gli attributi: framespacing="0" border="0" frameborder="0" , in questo modo:
<frameset rows="100,*" framespacing="0" border="0" frameborder="0">
Righe e colonne
Il Tag "<frameset>" è quello che determina la struttura base delle divisioni della pagina
che può essere divisa più volte in righe, tramite l'attributo "rows", e colonne, tramite
l'attributo "cols", la larghezza, o altezza, di queste divisioni può essere specificata sia in
pixel che in percentuale, per esempio se scriviamo:
<frameset cols="100,*,100">...</frameset>
avremo una pagina divista in tre frame verticali, di cui quello a sinistra e quello a destra
saranno larghi 100 pixel, quello al centro invece si adatterà a quanto spazio disponibile è
rimasto, indipendentemente dalla larghezza della finestra del browser.
Se scriviamo:
<frameset rows="20%,15%,*">
avremo una pagina web divisa in tre frame orizzontali, di cui il primo in alto sarà alto il 20%
dell'altezza totale della finestra del browser, il secondo (in mezzo) il 15% dell'altezza totale
della finestra del browser, e il terzo in basso prenderà tutto lo spazio rimasto disponibile.
Se scriviamo:
<frameset rows="*,*,*">
avremo una pagina web divisa in tre frame orizzontali, semplicemente divisi in parti uguali,
ognuno di 1/3 l'altezza totale della finestra del browser.
Contenuti
Se per esempio dividiamo la pagina in tre colonne, quindi tre frames verticali, dovremo
inserire altrettante pagine web di contenuto, tramite le istruzioni:
<frame name="sinistra" src="sx.htm">
<frame name="centro" src="centro.htm">
<frame name="destra" src="dx.htm">
queste vanno inserite ovviamente, come nell'esempio sopra, fra i Tag
"<frameset>...</frameset>".
L'attributo "name" serve appunto per dare un nome al frame, questo sarà utile per la
navigazione, infatti se c'e' un link nel primo frame che, al clic, deve far aprire una pagina
web nel frame al centro, dovremo utilizzare l'attributo "target" nel link (come spiegato
sopra nella sezione link), specificando il nome del frame che ospiterà la pagina web.
L'attributo "src" indica quale pagina web deve essere aperta inizialmente in quello
specifico frame, come valore deve contenere il nome del file HTML.
Il Tag "<noframes>"
Questo Tag è molto utile per due ragioni principali, la prima è relativa ai motori di ricerca,
in quanto possono indicizzare il contenuto che va inserito in questo Tag, la seconda è che
da la possibilità, ai browser che non supportano i frame, di visualizzare comunque un
minimo di contenuto.
Si utilizza così:
<frameset rows="100,*">
<frame name="intestazione">
<frame name="principale">
<noframes>
<body>
...contenuto...
</body>
</noframes>
</frameset>
Fra i Tag "<noframes>...</noframes>" va inserita una vera e propria pagina web completa,
partendo da "<body>" fino a "</body>", è consigliabile sviluppare una pagina HTML
testuale, completa di link alle sottopagine, poi fare copia/incolla del codice fra i due Tag,
questo, come detto sopra, permetterà sia ai motori di ricerca di indicizzare un minimo di
contenuto, che ai (pochi) utenti che non posseggono un browser aggiornato di visualizzare
la pagina.
Frame dentro ad altri frame.
E' possibile nidificare le divisioni in frame in modo che la pagina sia divisa molte volte in
sezioni che contengono altre sezioni, sia righe che colonne; vediamo un esempio:
<html>
<head>
<title>Titolo</title>
</head>
<frameset rows="100,*,100">
<frame name="sopra1" src="f1.htm">
<frameset cols="30%,*,30%">
<frame name="sinistra2" src="f2.htm">
<frameset rows="50%,*">
<frameset cols="30%,*,30%">
<frame name="sinistra4" src="f3.htm">
<frame name="destra4" src="f4.htm">
<frame name="destra4" src="f5.htm">
</frameset>
<frame name="sotto3" src="f6.htm">
</frameset>
<frame name="destra2" src="f7.htm">
</frameset>
<frame name="sotto1" src="f8.htm">
<noframes>
<body>
...contenuto...
</body>
</noframes>
</frameset>
</html>
Per visualizzare l'esempio pratico clicca qui.
Abbiamo ottenuto una pagina web con ben 8 divisioni, per cui sono stati necessari ben 9
file HTML!
Form
Fino ad ora abbiamo visto come è possibile utilizzare i vari Tag HTML per descrivere
l'aspetto di una pagina, però fin qui ci siamo limitati al senso unidirezionale del Web; per
rendere bidirezionale, quindi interattiva, una pagina web si usano le Form, che servono
per raccogliere dati che poi verranno elaborati da programmi (CGI) residenti sul server
oppure da script inseriti nell'HTML.
Le Form vengono spesso anche utilizzate come modulo da compilare che poi verrà
spedito ad un indirizzo email, questo richiede sempre un CGI o uno script che invii i dati ad
un dato indirizzo di posta elettronica.
Ci sono molti siti in internet che offrono CGI e script gratuiti quindi se si ha bisogno di
attuare qualcosa di specifico, come la lettura/scrittura di un database, l'invio di dati ad un
indirizzo email, ecc, basta fare delle ricerche e molto probabilmente si troveranno esempi
e tutorial completi di quel che si vuole attuare.
Il Tag "<form>"
Nel codice HTML le form sono delimitate dai Tag "<form>...</form>", fra questi due Tag ne
vengono inseriti altri che specificano diversi tipi tipologie di immissione dati, opzioni, valori,
ecc.
Ad ogni Form va sempre associata un'azione, cioè i dati specificati ed immessi dall'utente
vengono inviati ad un CGI o ad uno script che li elabora e fa il lavoro e le procedure per
cui è stato creato; la sintassi è questa:
<form method="post" action="cgi-bin/script.cgi">
...
</form>
La proprietà "action" indica al browser la posizione dello script che deve analizzare e
processare i dati. E' possibile anche fare degli esperimenti con la Form immettendo la
seguente stringa nel valore di "action", cioe': "mailto:[email protected]", immettendo il
tuo indirizzo email, ogni volta che si invierà la Form tramite l'apposito pulsante, i dati
verranno inviati nella propria casella di posta elettronica, ma saranno pressochè illeggibili
in quanto codificati, però risulta un buon metodo per fare degli esperimenti.
La proprietà "method" indica in che formato i dati devono essere inviati allo script, se si
utilizza "get" il limite massimo di caratteri contenuti nella form è di 255, se si utilizza "post" i
dati vengono inviati come un flusso direttamente al CGI quindi non c'è limite nella
lunghezza dei dati.
Il Tag "<input>"
Questo Tag ha molteplici sfaccettature che permettono di utilizzarlo in molte maniere,
specificando il tipo con "type", il nome con "name" e il valore con "value", ma vediamo
alcuni esempi pratici:
Per inserimento di testi:
<input type="text" name="cognome" size="20">
Il risultato è:
Come tipo, cioe' "type", è stato specificato "text" e questo ha reso il tipo di input una
casella di inserimento testo, come nome, cioe' "name", è stato specificato "cognome",
quando i dati verranno inviati di conseguenza al CGI questi conterranno una variabile che
si chiama "cognome" e che avrà come valore il testo che l'utente avra' inserito.
Opzioni con scelte multiple:
Colore Blu <input type="checkbox" name="colore" value="blu"><br>
Colore Verde <input type="checkbox" name="colore" value="verde"><br>
Colore Rosso <input type="checkbox" name="colore" value="rosso">
Il risultato è:
Colore Blu
Colore Verde
Colore Rosso
Il tipo di input "checkbox" permette di dare all'utente una serie di opzioni a selezione
multipla, cioe' alla stessa variabile "colore" verrà assegnato un valore oppure più valori,
come in un array.
Opzioni con scelta singola:
Colore Blu <input type="radio" name="colore" value="blu"><br>
Colore Verde <input type="radio" name="colore" value="verde"><br>
Colore Rosso <input type="radio" name="colore" value="rosso">
Il risultato è:
Colore Blu
Colore Verde
Colore Rosso
Contrariamente al tipo "checkbox", il tipo "radio" permette di dare una sola opzione
possibile alla variabile "colore", infatti se si prova a selezionare un differente colore si
noterà che il precedente selezionato si deseleziona automaticamente e all'invio della form,
la variabile colore, avrà un solo valore.
Inserimento di password:
<input type="password" name="codicesegreto" size="20">
Il risultato è:
Usando il tipo "password" se si prova a inserire del testo nella casella si noterà che questo
è mascherato.
Pulsante di invio della Form:
<input type="submit" name="pulsante" value="Invia">
Il risultato è:
Invia
Specificando il tipo "submit" il Tag si e' trasformato in un pulsante, che indica come scritta
il testo che è specificato nella proprietà "value", e si utilizza alla fine della Form quando
l'utente ha compilato tutto il resto delle caselle ed opzioni e vuole inviare tutti i dati al CGI,
infatti premendo il pulsante tutti i dati immessi vengono raccolti, codificati e inviati al
programma che li analizza e fa le procedure per cui è stato creato.
Per resettare la Form:
<input type="reset" value="Pulisci la form">
Il risultato è:
Pulisci la form
Il tipo "reset" di solito si affianca al tipo "submit", infatti "reset" serve per pulire la Form da
tutti i dati immessi e ripristinare le condizioni iniziali.
Utilizzare un'immagine al posto di un pulsante.
<input type="image" src="invia.jpg">
Il risultato è:
Funziona esattamente come il tipo "submit" solo che e' possibile sostituire il pulsante con
un'immagine.
Il Tag "<textarea>"
Con il Tag "<textarea>...</textarea>" è possibile utilizzare in una Form un'area di testo
dove l'utente può inserire un testo lungo, per esempio per scrivere il testo di un
messaggio, un curriculum, ecc. E' possibile utilizzare quest'area di testo anche al di fuori di
una Form, per esempio per visualizzare un lungo testo in un'area ristretta senza inserire il
testo medesimo in una lunga pagina.
Con il codice:
<textarea rows="6" name="messaggio" cols="41"></textarea>
si ottiene:
Dove l'utente può inserire un testo, se si vuole già inserire un testo nell'area di testo è
sufficiente inserirlo nella posizione fra i due Tag "<textarea>...</textarea>".
Per specificare la larghezza e l'altezza dell'area di testo è sufficiente cambiare i valori di
"rows" e "cols", rispettivamente per l'altezza e la larghezza.
Menù a tendina
E' possibile creare un menù a tendina con varie scelte, praticamente il concetto è lo stesso
dell'input type radio o checkbox ma il menù a tendina permette di raggruppare in un
piccolo spazio molte scelte, anche decine e decine.
La sintassi è questa:
<select name="scelta">
<option>Scelta 1</option>
<option>Scelta 2</option>
<option>Scelta 3</option>
<option>Scelta 4</option>
<option>Scelta 5</option>
<option>Scelta 6</option>
<option>Scelta 7</option>
<option>Scelta 8</option>
<option>Scelta 9</option>
<option>Scelta 10</option>
</select>
Il risultato è:
Scelta 1
Se si vuole espandere il menù in modo che non sia a tendina, ma sia a scorrimento,
bisogna specificarne l'altezza tramite "size", in questo modo:
<select name="scelta" size="4">
<option>Scelta 1</option>
<option>Scelta 2</option>
<option>Scelta 3</option>
<option>Scelta 4</option>
<option>Scelta 5</option>
<option>Scelta 6</option>
<option>Scelta 7</option>
<option>Scelta 8</option>
<option>Scelta 9</option>
<option>Scelta 10</option>
</select>
Il risultato sarà:
Scelta 1
Scelta 2
Scelta 3
Scelta 4
Se si vuole inoltre dare all'utente la possibilità di scegliere più di una voce nell'elenco,
basta aggiungere la parola "multiple", in questo modo:
<select name="scelta" size="4" multiple>
<option>Scelta 1</option>
<option>Scelta 2</option>
<option>Scelta 3</option>
<option>Scelta 4</option>
<option>Scelta 5</option>
<option>Scelta 6</option>
<option>Scelta 7</option>
<option>Scelta 8</option>
<option>Scelta 9</option>
<option>Scelta 10</option>
</select>
E si avrà:
Scelta 1
Scelta 2
Scelta 3
Scelta 4
Sarà possibile scegliere più di una voce cliccando e tenendo premuto il tasto Control.
Esempio pratico di una Form completa
Per completare questa sezione scriviamo una Form completa con tutti gli elementi
spiegati:
<form method="post" action="inviaemail.asp">
<input type="hidden" name="indirizzoemail" value="[email protected]">
Nome<br>
<input type="text" name="nome" size="20"><br>
<br>
Cognome<br>
<input type="text" name="cognome" size="20"><br>
<br>
Email<br>
<input type="text" name="email" size="20"><br>
<br>
Indirizzo completo<br>
<textarea rows="3" name="indirizzo" cols="27"></textarea><br>
<br>
Scelgli il prodotto<br>
<select size="1" name="prodotto">
<option>Servizio A</option>
<option>Servizio B</option>
<option>Servizio C</option>
<option>Servizio D</option>
<option>Servizio E</option>
<option>Servizio F</option>
<option>Servizio G</option>
<option>Servizio H</option>
</select><br>
<br>
Metodo di pagamento<br>
<input type="radio" value="cartadicredito" checked name="pagamento">Carta di
credito<br>
<input type="radio" name="pagamento" value="bonifico">Bonifico<br>
<input type="radio" name="pagamento" value="contrassegno">Contrassegno<br>
<br>
Servizi aggiuntivi<br>
<input type="checkbox" name="serviziaggiuntivi" value="domicilio">Spedizione a
domicilio<br>
<input type="checkbox" name="serviziaggiuntivi" value="assicurato">Pacco
assicurato<br>
<input type="checkbox" name="serviziaggiuntivi" value="urgente">Spedizione
urgente<br>
<br>
Messaggi e commenti eventuali<br>
<textarea rows="7" name="messaggio" cols="35"></textarea><br>
<br>
<input type="submit" value="Invia richiesta" name="B3">
<input type="reset" value="Cancella tutto" name="B4"><br>
<p>&nbsp;</p>
<p><input type="submit" value="Invia" name="B1">
<input type="reset" value="Reimposta" name="B2"></p>
</form>
Si ottiene:
Nome
Cognome
Email
Indirizzo completo
Scelgli il prodotto
Servizio A
Metodo di pagamento
Carta di credito
Bonifico
Contrassegno
Servizi aggiuntivi
Spedizione a domicilio
Pacco assicurato
Spedizione urgente
Messaggi e commenti eventuali
Invia richiesta
Invia
Reset
Cancella tutto
