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:

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

  1. Voce numero 1.
  2. Voce numero 2.
  3. 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:

  1. Voce numero 1.
  2. Voce numero 2.
  3. 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:

  1. Voce numero 1.
  2. Voce numero 2.
  3. 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à:

Con il codice:

<ul type="circle">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>

si otterrà:

Con il codice:

<ul type="square">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>

si otterrà:

 

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:

 

 

 

 

 

 

 

 

 

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

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 1

cella 2

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

Tabella2
cella1

Tabella2
cella2

Tabella2
cella3

Tabella2
cella4

Tabella2
cella5

Tabella2
cella6

Tabella1
cella2

Tabella1
cella3

Tabella1
cella2

Tabella1
cella2

Tabella1
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

cella3

cella4

cella5

cella6

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:tuoindirizzo@email.it", 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 è:

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

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

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

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

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="indirizzo@email.it">
  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


Metodo di pagamento
Carta di credito
Bonifico
Contrassegno

Servizi aggiuntivi
Spedizione a domicilio
Pacco assicurato
Spedizione urgente

Messaggi e commenti eventuali


 

 

 

 

 

Scarica la Guida in formato Doc                                                                          Scarica la Guida in formato Pdf