15-Il Linguaggio HTML

{gspeech style=2}

Introduzione
L’acronimo HTML (Hyper Text Markup Language) può essere tradotto con Linguaggio per IperTesti a Marcatori. Questo linguaggio nasce da un’intuizione di Tim Berners–Lee, del CERN (Centro Europeo per la Ricerca Nucleare) di Ginevra. Egli si pose il problema di sviluppare un codice che permettesse lo scambio di documenti di natura scientifica usando i collegamenti a distanza tra computer anche su macchine con sistemi operativi differenti.
Per capire la filosofia con cui vengono composte le pagine Internet, consideriamo la possibile descrizione di un libro. Per noi il libro sarà un’entità delimitata da due particolari simboli che chiamiamo marcatori (tag).

<libro>
…
Suo contenuto

…
</libro>

I marcatori sono una sorta di parentesi entro cui si racchiudono dei contenuti.
Il nostro ipotetico libro avrà un’introduzione e dei capitoli; dunque miglioriamo la nostra descrizione inserendo nuovi tag:

<libro>
<introduzione>
…
contenuto dell’introduzione
…
</introduzione>
<capitolo>
…
contenuto del capitolo
…
</capitolo>
…
…
<capitolo>
…
contenuto del capitolo
…
</capitolo>
</libro>

Abbiamo diviso il libro in una sezione introduttiva e nei suoi vari capitoli. La nostra opera ha bisogno di avere un titolo, degli autori, un testo per l’introduzione. Sviluppiamo ulteriormente la nostra descrizione logica:

<libro titolo=“Pagine Internet” autore=“Pinco Pallino”>
<introduzione>
<grassetto><corsivo>Si tratta di un libro sul Web</grassetto></corsivo>
</introduzione>
<capitolo titolo=“primo capitolo”>
…
contenuto del capitolo
…
</capitolo>
…
…
<capitolo titolo=“ultimo capitolo”>
…
contenuto del capitolo
…
</capitolo>
</libro>

Si noti la seguente porzione di codice:

Abbiamo modificato il marcatore <libro> aggiungendogli degli elementi descrittivi che ne indicano il titolo e l’autore. Queste nuove entità vengono dette attributi del tag. Dando un’occhiata all’introduzione ed al suo contenuto vediamo altri nuovi tag:

<introduzione>
<grassetto><corsivo>
Si tratta di un libro sul web
</corsivo></grassetto>
</introduzione>

Si tratta della coppia <grassetto></grassetto> e <corsivo></corsivo>. I nuovi marcatori non hanno più la funzione di definire unità logiche del libro, piuttosto di indicare caratteristiche tipografiche del testo che costituisce l’introduzione stessa. Notate che, come le coppie di parentesi di vario tipo nell’usuale algebra, i tag devono essere richiusi nell’ordine inverso rispetto all’apertura.

L’html è stato concepito proprio su questa falsariga. La prima versione comprendeva dodici tipi di marcatore che suddividevano le pagine web in unità logiche: titoli, sezioni, paragrafi con elementari istruzioni per la formattazione dei testi rappresentati. Non erano previste tabelle né tantomeno immagini. Con l’esplosione del fenomeno Internet è sorta l’esigenza di espandere il linguaggio aumentandone l’espressività per quanto riguarda le possibilità di rappresentazione tipografica dell’informazione fino a giungere all’attuale versione 5.0 comprendente un centinaio di tag di svariata natura. Lo standard html è definito da un organismo internazionale W3C (World Wide Web Consortium). Le sue specifiche sono delle raccomandazioni a cui i produttori software dovrebbero attenersi anche se ciò non avviene sempre.

Si noti che tutti i programmi applicativi di word processing e di grafica utilizzano formati proprietari che si riconducono a strategie analoghe per rappresentare le proprie informazioni. La differenza sostanziale consiste nel fatto che i formati di tali programmi sono proprietari e dunque non utilizzabili se non si ha il software corrispondente, mentre l’html nasce per essere un formato universale, indipendente dall’hardware e dalla piattaforma su cui viene rappresentata l’informazione che esso veicola. Per curiosità è possibile visualizzare il formato interno con cui viene salvato un file con estensione .rtf. Si tratta del formato Rich Text Format, uno fra i tanti disponibili per il salvataggio dei documenti con Word. Aprite il programma e scrivete semplicemente la parola Ciao.
Salvate in seguito nel formato .rtf.

Provate poi ad aprire con il Blocco Note il file appena salvato ciò che dovreste vedere è rappresentato in figura.
Notate la complessità del codice equivalente. Per curiosità ciò che avete scritto nella finestra del programma lo vedete indicato nella ultima riga del codice.

La struttura di una pagina html
Una pagina web è composta da due sezioni: l’Intestazione (head) ed il Corpo (body) secondo la struttura delineata qui di seguito.

Il codice della pagina è delimitato dalla coppia di marcatori <html> </html>.
Nell’intestazione individuata dai tag <head> </head>, vengono inseriti i parametri di formattazione della pagina, il titolo del documento, i tag necessari al riconoscimento e all’indicizzazione della stessa nei motori di ricerca e quant’altro serva al browser o al server per classificare la pagina.
Nel corpo viene inserito tutto il resto e cioè gli elementi che comporranno visivamente il documento.
Il titolo della pagina deve essere inserito nella sezione head, e digitato tra i tag <title> </title>. Esso comparirà nella barra del titolo, la barra in alto del browser.

I browser non considerano la struttura tipografica che viene inserita nelle varie righe di codice html, ma si limitano a leggerne tag ed attributi, codificandoli in pagine visuali. Quindi, che scriviate tutto il codice su una sola riga, o su più righe, la visualizzazione del documento non ne verrà influenzata, in quanto per effettuare il posizionamento di un elemento, sia questo testo, immagini, tabelle o quant’altro desideriate è necessario utilizzare gli appositi marcatori definiti dal linguaggio. Anche lasciare varie righe vuote tra un paragrafo e l’altro, non servirà a creare spazio tra questi, durante la visualizzazione. La posizione del codice su più righe, in realtà, risulta utile per raggiungere velocemente la stringa di codice desiderato, per esempio durante una correzione. Si tenga inoltre presente che nei nomi dei tag html non si fa differenza tra l’uso di maiuscole o minuscole. I codici che analizzeremo da qui in avanti possono essere composti semplicemente utilizzando blocco note o un qualsiasi editor di testo. Non considereremo l’utilizzo di editor visuali WYSWIG (What You See is What You Get), cioè programmi che permettono di inserire graficamente, come se lavoraste in Word, gli elementi nelle pagine. Hanno indubbiamente dei vantaggi a livello di produttività, però non permettono la stessa flessibilità e pienezza di controllo che invece si ottiene dalla scrittura a mano del codice. Inoltre nel prosieguo del corso ci si renderà conto di come la conoscenza del codice html sia indispensabile allorquando ci si occupi di interattività delle pagine (programmazione JavaScript) e di sviluppo di siti dinamici (programmazione ASP o PHP). Citamo in questa sede comunque alcuni degli editor:

Front Page di MicroSoft
DreamWeaver di Macromedia
Golive di Adobe
Composer di Netscape

Si noti che l’ultimo citato è gratuitamente allegato ai browser di Netscape, così come la versione Express di Front Page con funzionalità ridotte rispetto al software originale è messo a disposizione con l’installazione standard di Windows.

La sezione Head
Essa è strutturata utilizzando i tag META ed il tag TITLE. La forma sintattica di questo marcatore è la seguente:

Esempio:

In questo modo si comunica all’eventuale motore di ricerca che indicizza la pagina una indicazione sui contenuti della stessa. Vediamo un esempio:

<html>
<head>
<title>Il sito della 5°B </title>
<META NAME=“Description” CONTENT=“Un esempio di intestazione di una pagina web“>
<META NAME=“Keywords” CONTENT=“Meta, Keywords, Description, HTML”>
</head>
<body>
Il contenuto visuale della pagina
</body>
</html>

Tutta l’informazione della sezione Head non verrà visualizzata dall’utente, tranne il tag «title». Il modificatore Keywords, permette di elencare una serie di parole chiave utilizzabili per una catalogazione della pagina.

Il tag < Body >
Questo tag introduce il browser nella sezione della pagina corrispondente alle informazioni mostrate a video. All’interno di questo marcatore, è possibile (a volte indispensabile) inserire una serie di attributi, con i rispettivi valori, per istruire il browser su come visualizzare alcuni particolari della pagina.
Le istruzioni principali riguardano il colore o l’immagine di sfondo, il colore del testo, quello dei link, dei link visitati, dei link attivi e i margini laterali superiore e inferiore della pagina. Vediamo in dettaglio questi attributi, anche se prima è necessario fare un inciso sulla rappresentazione dei colori in Internet.

I colori nel web
Nel web i colori sono rappresentati da terne di 2 byte precedute dal simbolo # , indicati in codice esadecimale. Ogni valore può variare da 00 (0 in decimale) a FF (255 in decimale). Delle sei cifre esadecimali le prime due indicano la componente rossa (Red), le seconde la componente verde (Green) ed infine le ultime due sono associate alla componente cromatica blu (Blue). A seconda di come si combinano queste tre terne otteniamo una gamma di 16 milioni circa di colori. Facciamo degli esempi:

# 000000: primi due byte a 0, ovvero componente rossa assente, secondi due byte a 0, ovvero verde assente, terza coppia a 0, ovvero blu assente. Abbiamo la totale assenza di colore e dunque indichiamo il nero.
#ffffff: primi due byte a 255 (ff), massima intensità del rosso, secondi due byte a 255 cioè massima intensità del verde ed analogamente massima intensità per la componente blu. Quando i tre colori si mischiano in questo modo abbiamo il bianco che infatti è definito come la sovrapposizione di tutti i colori.
# 808080: l’80 in esadecimale corrisponde al 128 decimale. Ci troviamo in una situazione intermedia alle due viste in precedenza. Appare dunque logico che in questo modo si ottenga un grigio. In generale mantenere uguali le tre componenti cromatiche equivale a percorrere tutta la scala possibile dei grigi.
# ffff00: in questo caso vengono mescolate le componenti rosse e verdi. Si ottiene il giallo puro. Se non vi fidate aprite Paint, fate un doppio clic su uno dei colori della tavolozza in basso a sinistra, e vi comparirà la finestra Modifica colori. Premendo il tasto Definisci colori personalizzati, la finestra si espande permettendovi di selezionare i vari possibili colori e di visualizzarne il codice numerico, per maggiore comodità in decimale. Digitate la coppia 225 per rosso verde, scrivendo lo 0 nel blu e vedrete cosa succede.

Fortunatamente non è necessario per tutti i tipi di colore indicare espressamente il codice esadecimale. Lo standard html 5.0 specifica la possibilità di indicare 16 colori fondamentali anche con una stringa di testo. Seppure il W3C abbia reso standard solo 16 nomi di colore, Internet Explorer e Netscape Navigator, nelle ultime versioni, riconoscono anche altri 125 nomi simbolici.

Dopo questa parentesi, possiamo introdurre gli attributi del tag body. Ecco i principali:

text=“#FFFFFF”: colore del testo;
link=“#0000FF”: colore del link;
vlink=“fuchsia”: colore del link visitato;
alink=“yellow”: colore del link attivo;
topmargin= “2”: margine vuoto superiore espresso in pixel;
leftmargin= “3”: margine vuoto sinistro espresso in pixel;
rightmargin= “3”: margine vuoto destro espresso in pixel;
bottommargin=“5”: margine vuoto inferiore espresso in pixel;
bgcolor=“#000000”: colore di sfondo;
background=“#nome_file.gif”: immagine di sfondo.

Quando vengono digitati entrambi gli attributi “bgcolor” e “background”, quest’ultimo annulla il precedente; vengono comunque inseriti entrambi poiché, se per qualsiasi ragione l’immagine di sfondo non venisse caricata, comunque verrebbe fissato un colore compatibile con il resto della grafica utilizzata.
L’istruzione “background” inoltre può usufruire di un ulteriore attributo utile a bloccare l’immagine selezionata per lo sfondo, durante lo scorrimento della pagina. L’istruzione è “bgproperties” e il valore “fixed”. Esempio:

Possiamo combinare tutti gli attributi esaminati e completare la nostra pagina di esempio:

<html>
<head>
<title>il sito della 5°b</title>
<meta name=“description”
content=“un esempio di intestazione di una pagina web”>
<meta name=“keywords” content=“meta, keywords, description, html”> </head>
<body bgcolor=“#ffffff” topmargin=“2” bottommargin=“5” leftmargin=“3” rightmargin=“3” link=“0000ff” vlink=“fuchsia”> <p>benvenuti</p>
</body>
</html>

Il testo
Abbiamo visto la struttura base di una pagina html. Ora però bisogna capire come il testo possa essere correttamente formattato in una pagina.
Le possibilità sono molte, e riguardano il carattere, il colore, la dimensione, lo stile, l’allineamento. Innanzitutto di solito il testo è racchiuso in paragrafi individuati dalla coppia <p> </p>:

<p> Primo esempio di paragrafo.</p>

Quando digitiamo il testo, a volte si ha il bisogno di lasciare più di uno spazio tra una parola e l’altra.
Partendo dal presupposto che i browser considerano un solo spazio tra le varie parole, per visualizzare effettivamente più spazi, si renderà necessario inserire il simbolo   per ogni ulteriore spazio desiderato tra una parola e l’altra.

<p>Spazio normale.</p> Spazio normale
<p>Spazio  doppio</p> Spazio doppio
<p>Spazio    triplo.</p> Spazio triplo

La sequenza di caratteri   è un esempio di una categoria di caratteri speciali utilizzati in html. Vengono tutti individuati all’inizio da una & e terminati da ;
nbsp sta per no breaking space.

Sulla tastiera abbiamo anche altri caratteri speciali che come lo spazio, richiedono un simbolo particolare per essere correttamente interpretati dai browser. La tabella contiene una serie di simboli con il rispettivo carattere speciale.

Per allineare il testo nella pagina si usano i seguenti valori:

left = sinistra, right = destra, center = centro, justify = giustificato

Per testo giustificato si intende che le parole vengono allineate ad entrambi i lati fino a toccare i due margini laterali della pagina. Per configurare correttamente questi parametri, è necessario inserire align =“xxx” all’interno del tag di apertura dopo uno spazio:

<p align=“left”>Testo allineato a sinistra</p>

Passiamo ora ad osservare le varie possibilità di stile tipografico applicabili al testo del documento. A volte si rende necessario sottolineare, enfatizzare o inclinare parte o tutto il paragrafo di testo. Per fare questo si usano i tag:

<b></b> oppure <strong></strong> per rendere enfatizzato il testo:

<p align=“center”>Benvenuti sul <b>nostro sito</b></p>

dà come risultato:

Benvenuti sul nostro sito

<u></u> per sottolineare il testo:

<p align=“center”>Benvenuti sul<u>nostro sito</u></p>

dà come risultato:

Benvenuti sul nostro sito

L’uso del tag <u> è comunque sconsigliabile in quanto può indurre in confusione il visitatore facendo scambiare del testo normale con dei link.

<i></i> oppure <em></em> per inclinare il testo corsivo:

<p align=“center”>Benvenuti sul <i>nostro sito </i></p>

dà come risultato:

Benvenuti sul nostro sito

Si noti la presenza di più marcatori dedicati alla medesima funzione. Gli esperti di usabilità del web, cioè la disciplina che si occupa di progettazione Internet centrando l’attenzione alla massima fruibilità del sito sviluppato, consigliano l’utilizzo di <em> invece di <i> e di <strong> invece di <b>. Infatti i browser a sintesi vocale riconoscono i due tag <em> e <strong>, ma non gli altri. In corrispondenza a tali tag il testo verrà pronunciato enfatizzato o con tonalità più elevata. Per compatibilità con le precedenti versioni i tag <b> e <i> vengono comunque correttamente interpretati nelle normali pagine.
Possiamo abbellire le nostre pagine, scegliendo il tipo di carattere, il colore, e la dimensione. Per avere i risultati desiderati, è necessario inserire gli attributi “color”, “face” e “site” nel tag di apertura <font>, con i successivi valori possibili.
Se non viene specificato anticipatamente attraverso la formattazione della pagina, il colore del testo contenuto nella pagina in creazione sarà automaticamente quello predefinito nelle preferenze del browser utente. Ma anche avendo anticipatamente assegnato un colore specifico, possiamo in ogni momento cambiarlo, indicandolo all’inizio del paragrafo, o addirittura prima della sola frase o della sola parola che desideriamo colorare. Il colore va specificato usando i corrispettivi nomi in lingua inglese, oppure il numero esadecimale preceduto dal simbolo # come abbiamo già visto in precedenza.

<p align=“center”><font color=“#FF0000”>Benvenuti sul mio sito</font></p>

Altro esempio:

<p align=“center”>Benvenuti sul <font color=“red”>mio sito</font></p>

Con l’istruzione “face” si specifica il carattere tipografico per il paragrafo, la frase o la parola in questione. Per utilizzare correttamente questa istruzione è necessario digitare il nome del carattere specifico come valore tra le solite virgolette “ ”.

<p align=“center”><font face= “Arial“>Benvenuti sul mio sito</font></p>

Altro esempio:

<p align=“center”>Benvenuti sul<font face=“Arial”>mio sito</font></p>

È possibile indicare più di un font per la frase da evidenziare.

<p align=“center”>Benvenuti sul<font face=“Arial,Helvetica,sans serif”>mio sito</font></p>

In questo caso il browser userà, se presente, il font Arial (di default solo su macchine Windows) altrimenti il font Helvetica che è tipico delle macchine Macintosh, e se nessuno dei due fosse presente un carattere di tipo sans serif.
Tornando ai tag html, introduciamo infine l’attributo “size” che indica al browser la dimensione con cui il testo dovrà essere visualizzato. I valori impostabili vanno da un minimo di 1 ad un massimo di 7.

<p align=“center”><font size=“5”>Benvenuti sul mio sito</font></p>

dà come risultato:

Benvenuti sul mio sito

<p align=“center”>Benvenuti sul<font size”5″>mio sito</font></p>
dà come risultato:

Benvenuti sul mio sito

È lasciato al browser scegliere la dimensione in numero di punti corrispondente al size.

Citiamo anche i tag <h1> </h1>, <h2> </h2>…<h6> </h6>. Questi ultimi hanno una funzione analoga al modificatore size del tag <font>. Sono storicamente nati prima, con lo scopo di suddividere logicamente il livello dei titoli nel documento. La h sta infatti per header, ovvero «titolo» in italiano. Ricordiamo che html nasce per la formattazione logica dei documenti. In seguito si trasforma sempre più in un linguaggio per la descrizione della struttura tipografica.
<h1> è il titolo principale, ovvero la dimensione tipografica superiore, <h6> quello più piccolo.

ESEMPIO

<h1>Titolo principale</h1>

dà come risultato:

Titolo principale

<h6> Titolo di tipo 6</h6>

dà come risultato:

Titolo di tipo 6

Un altro tag per definire una struttura logica è il <div> con il corrispondente </div>. Definisce una sezione logica del documento.

ESEMPIO

<div align=“center”>
<p>Prima sezione</p>
<p>Primo paragrafo</p>
<p> Secondo paragrafo</p>
.
.
.
<p>Ultimo paragrafo</p>
</div>
<div align=“left”>
<p>Seconda sezione</p>
<p>Primo paragrafo</p>
<p>Secondo paragrafo</p>
.
.
.
<p>Ultimo paragrafo</p>
</div>

Tutti i tag, istruzioni e valori esaminati in questa sezione, possono combinarsi tra loro, formando dei paragrafi personalizzabili. L’unica regola da seguire è quella di interporre uno spazio tra un attributo e l’altro.

ESEMPIO

<p align”center”><font size=“4” color=#FF0000 face=“Comic Sans MS”>Benvenuti sul mio sito</font></p>

dà come risultato:

Benvenuti sul mio sito

È possibile anche includere lo stile desiderato.

<p align=“center”><font color=blue size=“2”><b>Benvenuti sul</b></font>
<font color=red face=“Comic Sans MS”><u><i>mio sito</i></u></font></p>

dà come risultato:

Benvenuti sul mio sito

Le immagini
Le regole da rispettare nell’uso di immagini per il web sono poche e semplici:

non inserire immagini troppo grosse e pesanti;
nel caso non si possa fare a meno di inserirle, sezionarle in varie parti, in modo da renderne il caricamento graduale;
non inserirne troppe nella stessa pagina;
inserendo animazioni, trovare un buon compromesso tra qualità e numero di fotogrammi di cui l’animazione stessa si compone;
usare formati compressi, ovvero .jpg, .gif e .png.

Fatta questa doverosa premessa, passiamo ad analizzare la procedura con cui le immagini, siano queste statiche o animate, vanno inserite correttamente in un documento html.
Essendo l’immagine un file esterno al documento, è necessario istruire il browser sulla posizione in cui esso si trova rispetto alla pagina, il nome del file e la dimensione in larghezza e altezza dell’immagine stessa. Le immagini non sono come in Word incorporate nel documento ma sono ad esso collegate. Il tag da utilizzare è <img> gli attributi principali “src” “alt”, “width”, “height” e “border”.

Per inserire un’immagine possiamo comporre il seguente codice:

Analizziamone il codice:

src=“miacartella/pubblicita.jpg”

src= Questo attributo viene dato al browser, per indicargli l’esatta posizione dell’immagine (il file) rispetto alla pagina (src è l’abbreviazione di source).
“miacartella/pubblicita.jpg” Indica che il file “pubblicita.jpg” è situato in una cartella chiamata “miacartella” residente nella stessa directory della pagina in via di composizione.
alt=“testo alternativo” Rappresenta un testo in sostituzione dell’immagine da inserire qualora essa per qualsivoglia motivo non venga caricata.

Per poter chiarire meglio i termini del discorso relativo alla sorgente (source ovvero src) dell’immagine in un file html, facciamo riferimento alla figura. In essa è mostrata la struttura di un ipotetico sito web. Viene lì mostrata la disposizione delle pagine e delle immagini costituenti tutto l’insieme del sito. La pubblicazione consiste nel trasferimento di tutta questa serie di dati su di un server.

Supponiamo che nella pagina home.htm vada inserita l’immagine logo.jpg. Il codice corretto è:
<img src=“logo.jpg”…>
Visto che l’immagine è memorizzata nella stessa cartella della pagina in via di composizione, ne possiamo indicare solo il nome con l’estensione. Vogliamo adesso, sempre nella pagina home.htm, inserire l’immagine imm1.jpg. Il codice corretto è:
<img src=“immagini/imm1.jpg”…>
L’immagine è inserita in una cartella al fianco della pagina in composizione che dovrà essere aperta per poterla reperire. Il percorso corretto è:
nomedellacartella/nomedell’immagine.
Adesso immaginiamo di comporre la pagina pag2.htm e di voler inserire il logo. Il codice dovrà essere:
<img src=“../logo.gif”…>
Bisogna, per andare a recuperare l’immagine che ci interessa, risalire di un livello (../) ed è così possibile trovare il file che ci interessa. La scrittura ../ in un indirizzo relativo indica la risalita di un livello nella struttura di cartelle del sito.
Se in pagina2.htm volessimo inserire la figura imm1.jpg dovremmo comporre il seguente codice:
<img src=“../immagini/imm1.jpg”…>
Infatti sarà necessario risalire di un livello, aprire la cartella immagini e qui verrà trovato il file corrispondente. Notiamo infine ancora un modo in cui è possibile specificare percorsi relativi per l’identificazione di risorse nel sito.
<img src=“./immagini/imm1.jpg”…>
Con la scrittura ./, indichiamo che il percorso che stiamo indicando va fatto partire dalla radice del sito, nel nostro caso la cartella sito.

Da qualsiasi livello di profondità all’interno della struttura del sito noi specifichiamo quel percorso, esso ci rimanda alla imm1.jpg dentro la cartella immagini. Volendo, è possibile specificare un indirizzo assoluto per identificare la posizione di un’immagine.
<img src=“http://www.sito.it/immagini/imm.gif”>
In questo modo l’immagine caricata viene recuperata da un generico sito che può essere il nostro o meno. L’indirizzo deve essere completo della specifica di protocollo http://.
Per proseguire si noti che il tag <img> è il primo esempio di marcatore aperto che incontriamo, cioè di tag che non ammette il corrispondente di chiusura.

Consideriamo adesso l’elenco dei principali attributi del tag <img>
alt = Ogni immagine può contenere un testo alternativo che viene visualizzato dall’utente ogni volta che passa il puntatore del mouse su di essa. Inoltre se la funzione di visualizzazione delle immagini è stata disattivata durante la configurazione personalizzata del browser, questo testo andrà a sostituire l’immagine. Tra le doppie virgolette è possibile digitare qualsiasi commento desideriate far leggere all’eventuale utente. Tenete presente l’esistenza di browser a sintesi vocale o di browser per siti cellulari (siti WAP) nei quali ovviamente le immagini non possono in alcun modo essere visualizzate. Usando l’attributo alt possiamo adattare la nostra pagina ai mezzi di riproduzione di svariata capacità.
width =, height = Questi attributi (dall’inglese «larghezza» e «altezza») indicano al browser le dimensioni reali dell’immagine. I valori vanno specificati in pixel.
border = Se si desidera che l’immagine sia bordata come fosse in una cornice, applichiamo questo attributo, assegnando il valore dello spessore bordo, sempre in pixel. In questo caso specifico, il valore «0» rappresenta l’assoluta mancanza di bordi intorno all’immagine.

Se desideriamo che l’immagine appaia a lato di un’altra immagine, o di un paragrafo di testo, inseriamo i seguenti attributi:

align = Indica la posizione dell’immagine nella pagina o in rapporto al paragrafo. I valori possibili sono: left, right, center, top, bottom, middle ossia rispettivamente sinistra, destra, centro, sopra, sotto e ancora centro.
vspace= Inserito dopo l’istruzione “align” indica al browser la posizione orizzontale dell’immagine rispetto al paragrafo. I valori vanno espressi in pixel.
hspace= Inserito dopo l’istruzione “align” indica al browser la posizione verticale dell’immagine rispetto al paragrafo. I valori vanno espressi in pixel.

Esempio

<html>
<head>
<title>Esempio di posizionamento di immagini</title>
</head>
<body>
<p>Distanza dell’immagine 10 pixel orizzontali e 10 verticali<img src=“quadrato.gif” width=110 height=110 hspace=10 vspace=10></p>
</body>
</html>

ESEMPIO 2
Inseriamo l’attributo align=top e vediamo cosa succede:

ESEMPIO 3
Per ultimo, vediamo l’effetto di un allineamento di tipo middle:

Collegamenti Ipertestuali
Le ancore (anchor) dette più comunemente link, sono fondamentalmente il cuore della pagina web. Grazie a questi collegamenti è possibile spostarsi da una pagina all’altra, da un sito all’altro, da un server all’altro. E possibile collegare un testo, un’immagine, un file, un’applicazione, e quant’altro si voglia. Il tag per collegare un link ad un file (di qualsiasi genere esso sia) è <a> con l’attributo “href=”. È un tag chiuso e prevede dunque il terminatore </a>. Come valore per href va digitato l’indirizzo completo dove il file risiede. È difatti indispensabile segnalare l’esatta cartella dove la pagina, o comunque il file collegato, dimora.

Esempio
<a href=“http://www.altavista.com”>Altavista il Motore di Ricerca</a>
dà come risultato:

Altavista il Motore di Ricerca

Si noti che il collegamento ipertestuale viene automaticamente sottolineato e colorato con il colore impostato per l’attributo link nella sezione body (il blu per default).
È possibile decidere, con l’istruzione “target=”, se far caricare la pagina linkata nella stessa finestra, o in un’altra. Se non viene specificata la destinazione, questa sarà automaticamente la stessa della finestra. In altre parole la pagina a cui il link fa riferimento verrà caricata nella stessa finestra.
I possibili valori sono diversi, ma principalmente se ne usano due, e sono:
• _top;
• _blank.
Con il valore “_top”, si specifica al browser che l’apertura della pagina dovrà avvenire nella stessa finestra.
Il valore “_blank” ordina al browser il caricamento della pagina collegata, in una nuova finestra.

Osserviamo ora come applicare questi valori ad una riga di codice per il collegamento ipertestuale.
<a href=“http://www.altavista.com” target=“_blank”>Altavista il Motore di Ricerca</a>
I collegamenti ai documenti desiderati possono essere effettuati partendo anche da un’immagine. Nel codice sottostante viene specificato oltre all’indirizzo a cui il link fa riferimento, anche il percorso esatto dove l’immagine risiede (in questo caso nella cartella “images” residente nella directory principale del sito) ed il nome del file con la sua estensione.
<p align=“center”><ahref=“http://www.altavista.com” target=“_blank”>
<img src=“images/altavista.gif” alt=“Altavista il Motore dì Ricerca” width=“102″ height=“23” border=“0”></a></p>

Se l’immagine dovesse risiedere in un altro sito o server, il percorso da specificare dovrà essere completo, e cioè:
src=“http://www.altrosito.com/images/altavista.gif”
Come riferimenti inoltre, è possibile usare altri valori come:
<a href=”ftp://…
<a href”mailto:…
<a href “nome_file.zip
Con il valore “ftp: / /” ci si può collegare ad un sito ftp, o ad un file residente in questo sito.
Con il valore “mailto:” viene effettuata la spedizione di una e-mail all’indirizzo specificato, richiamando il programma di posta elettronica che viene utilizzato dall’utente.
“nome_file.zip”:linkando un qualsiasi file con la sua estensione, creeremo un collegamento di download. Per collegarsi alle pagine interne al proprio sito basterà, come per le immagini specificare il percorso relativo.

Le tabelle

Con l’ausilio delle tabelle, tenere ordinati gli elementi che costituiscono la pagina diventa semplice e immediato. Per far sì che la tabella non rovini la grafica della pagina, è possibile renderla invisibile, cioè non far visualizzare i bordi. L’utente giunto sul vostro sito visualizzerà i contenuti delle pagine in maniera ordinata, senza vedere come questo sia possibile.
Il tag necessario a creare una tabella è <table> che si chiude con </table>. Per la corretta gestione della tabella da parte del browser, necessitano altri due tag che delineano righe e colonne della tabella in questione, e sono <tr> e <td>.
ESEMPIO
<table border=“2” wídth=“30%”>
<tr>
<td>Contenuto della Tabella</td>
</tr>
</table>
Risultato:

Lo spazio occupato dalla tabella in orizzontale è definito dall’attributo width associato al tag <table>. Esso permette di associare una dimensione relativa alla tabella, come visto nell’esempio appena presentato, in cui specifichiamo una grandezza percentuale rispetto alla dimensione della finestra attiva del browser, oppure una grandezza assoluta in termini di pixel. Il tag <tr> indica in una tabella la creazione di una riga che termina con </tr>, mentre la coppia <td> </td> genera la vera e propria cella. Volendo quindi creare una tabella formata da varie righe, ognuna delle quali rappresenta una cella, dovremo operare di conseguenza:

<table border=“2” width=“400”>
<tr>
<td>Contenuto della Prima Cella</td>
</tr>
<tr>
<td>Contenuto della Seconda Cella</td>
</tr>
<tr>
<td>Contenuto della Terza Cella</td>
</tr>
</table>
dà come risultato:

E se invece avessimo voluto una tabella con una sola riga, ma con tre colonne? Fino a che il tag <tr> non verrà chiuso con </tr>, tutte le celle create con il marcatore <td> al suo interno verranno allineate sulla stessa riga.
Esempio
table border=“2” width=“100%”> <tr>
<td width=“15%”>Prima Cella</td>
<td width=“35%”>Seconda Cella</td>
<td width=“50%”>Terza Cella</td>
</tr>
</table>
dà come risultato:

Prima Cella Seconda Cella Terza Cella

Si noti come nel codice appena visto si siano specificate le dimensioni percentuali delle varie celle con l’attributo width, entro i vari <td>. Anche in questo caso sarebbe possibile una specifica in termini assoluti usando i pixel. Volendo una tabella con due righe e tre colonne dovremo digitare:

<table border=“2” width=“100%”>
<tr>
<td>Destra Alta</td>
<td>Centrale Alta</td>
<td>Sinistra Alta</td>
</tr>
<tr height=“80”>
<td>Destra Bassa</td>
<td>Centrale Bassa</td>
<td>Sinistra Bassa</td>
</tr>
</table>

dà come risultato:

Nell’esempio abbiamo specificato una dimensione percentuale per la tabella, ma non per le singole celle, che dunque in automatico dal browser verranno equiripartite nello spazio messo a disposizione dalla finestra attiva del browser. Si noti che però abbiamo indicato l’altezza delle celle della seconda riga con l’attributo height del tag <tr>. Tale altezza è intesa in numero di pixel.
Capiti i concetti base per creare una tabella composta da varie righe e colonne, passiamo ad osservare le possibili combinazioni ottenibili con gli attributi “rowspan” e “colspan”.
Essendo caratteristiche applicabili soltanto alle celle, questi attributi vanno inseriti nei soli tag <td> costituenti la tabella.
L’attributo “rowspan” si applica ad una cella che intendiamo estendere per un numero di righe specificato dal valore che imposteremo.

Quindi, volendo creare una tabella avente la cella destra di dimensione pari alle altre due di sinistra dovremo digitare il seguente codice:

<table border=“2” width=“100%”>
<tr>
<td rowspan=“2”>Cella che occupa 2 Righe</td><td>Destra Alto</td> </tr>
<tr>
<td>Destra Basso</td>
</tr>
</table>

dà come risultato:

Si noti come il browser automaticamente salti (interpretando la seconda riga) la prima cella poiché sa, avendo letto rowspan=“2”, che la prima cella è già occupata.

Con l’istruzione “colspan” allo stesso modo indichiamo al browser che la tabella dovrà contenere una cella di dimensioni pari alle colonne che il valore assegnato designerà.

Esempio
<table width=“100%”>
<tr>
<td>Sinistra Alto</td><td>Destra Alto</td>
</tr>
<tr>
<td colspan=“2”>Cella che occupa 2 Colonne</td>
</tr>
</table>

dà come risultato:

Consideriamo ora come sia possibile strutturare dei contenuti utilizzando le nozioni viste fino ad ora e, inoltre, come sia possibile annidare tabelle le une dentro le altre. Si vuole ottenere la struttura seguente:

Vediamo il codice necessario:
<table width=”100%” border=”2″ >
<th colspan=”3″> Cella Testata</th>
<tr>
<td> Cella Sinistra</td>
<td> Cella Centrale</td>
<td> Cella Destra</td>
</tr>
<tr>
<td rowspan=”2″>
<table width=”100%” border=”2″>
<tr><td align=”center”> Tabella Nidificata Sinistra Alto</td></tr>
<tr><td align=”center”> Tabella Nidificata Sinistra Basso</td></tr>
</table>
</td>
<td><hr></td> <td rowspan<“2”>
<table width=”100%” border=”2″>
<tr><td align=”center”> Tabella Nidificata Destra Alto</td></tr> <tr><td align=”center”> Tabella Nidificata Destra Basso</td></tr> </table>
</td>
</tr>
<tr><td><hr></tr></td>
</table>

In questo codice abbiamo introdotto due ulteriori novità. La prima è il marcatore <th>, che sta per table header, ovvero intestazione di tabella. Permette di definire una prima riga che logicamente fa da intestazione alla tabella stessa. Notate che, automaticamente, il testo dell’intestazione viene centrato e grassettato dal browser. Nelle due ultime celle della colonna centrale, invece, è stato inserito il filetto orizzontale, di solito usato come separatore tipografico tra varie sezioni del documento. Il marcatore corrispondente è <hr>, ovvero horizontal rule.

Consideriamo adesso alcuni attributi dei tag associati alle tabelle che ci possono risultare utili per un’impaginazione personalizzata del materiale sul web. È possibile stabilire quanto spazio lasciare tra una cella e l’altra, e quanto tra il bordo e il contenuto della cella. Gli attributi necessari a fare ciò sono:

cellspacing=xx lasciamo xx pixel di spazio tra le varie celle;
cellpadding=xx lasciamo xx pixel di margine laterale all’interno delle singole celle della tabella.

Dove, con xx si intende un generico numero intero positivo.
Tali attributi definiscono una caratteristica comune a tutti gli elementi della tabella e dunque sono associati al tag
<table>:
<table border=1 cellspacing=10 cellpadding=8>

Vediamo un esempio:
<table width=“100%” border=2 cellspacing=4 cellpadding=5>
<tr>
<td> Notate lo spazio</td>
<td> tra le celle</td>
</tr>
<tr>
<td> Notate lo spazio</td>
<td> tra il testo ed il bordo della cella</td>
</tr></table>

Possiamo anche colorare o inserire un’immagine di sfondo per l’intera tabella oppure per ogni singola cella con gli attributi “bgcolor”e “background”. Ricordiamo che un attributo elimina l’altro. Inutile quindi inserire entrambe le istruzioni nel tag <table> o <td>. Vediamo un esempio:

<table border=”1″ width=”100%”>
<tr>
<td colspan=”3″ bgcolor=#cccccc align=”center”>Testa</td>
</tr> <tr>
<td bgcolor=#808080>Sinistra</td>
<td background=”fondo2.gif”>Centro</td>
<td bgcolor=#808080>Destra</td>
</tr> <tr>
<td colspan=”3″ bgcolor=#cccccc align=”center”>Fine</td>
</tr> </table>
</body>

Per terminare l’argomento tabelle, esaminiamo altri attributi indispensabili per configurare le celle in modo personale.
Abbiamo già visto che per allineare i contenuti che posizioneremo all’interno delle celle in orizzontale possiamo inserire all’interno dei tag <td> l’attributo “align” usando i valori “left”, “right”, “center” e “justify”.
Per la posizione verticale esiste l’attributo “valign” con i valori “top”, “middle” e “bottom”.

Esempio:

<table width=”100%” border=”1″ height=”134″> <tr>
<td colspan=”3″ align=”center”>
questa cella contiene del testo che è stato allineato nel mezzo. Come potete osservare il testo riempie completamente la cella e l’a capo è automatico. Le dimensioni verticali della cella si addattano automaticamente per contenere il testo digitato.
</td> </tr> <tr>
<td align=left valign=top> allineato a sinistra in alto
</td>
<td align=center>
allineato al centro in mezzo
</td>
<td align=right valign=bottom> allineato a destra in basso
</td> </tr></table>

Avevamo anche già visto come specificare le dimensioni in pixel o in percentuale delle celle con gli attributi “width” e “height”.
Facciamo un piccolo ripasso.
ESEMPIO
<table border=”1″ width=”100%”>
<tr>
<td width=”50″>50 Pixel</td>
<td width=”100″>100 Pixel</td>
<td width=”200″>200 Pixel</td>
</tr>
</table>

ESEMPIO
<table border=”1″ width=”100%”>
<tr>
<td height=”20″>20 Pixel</td>
</tr>
<tr>
<td height=”50″>50 Pixel</td>
</tr>
<tr>
<td height=”100″>100 Pixel</td>
</tr>
</table>

ESEMPIO

Gli elenchi
Come nella normale videoscrittura, può capitare la necessità, durante lo sviluppo di pagine web, di dover comporre degli elenchi di informazioni tra loro correlate. In un applicativo come Word si distinguono elenchi puntati ed elenchi numerati. Nelle pagine web essi hanno come corrispondenti le liste non ordinate e le liste ordinate. Per lista non ordinata si intende l’analogo dell’elenco puntato. Essa è definita dal tag <ul> (Unordered List), con il corrispondente terminatore </ul>. Tali marcatori racchiudono le voci dell’elenco, ciascuna delle quali è definita dalla coppia di tag <li> </li>.

ESEMPIO
<ul type=”square”>
<li>Juventus</li>
<li>Inter</li>
<li>Milan</li>
<li>Lazio</li>
<li>Roma</li>
</ul>

L’attributo type del tag <ul> permette di scegliere la forma del punto elenco. Le due principali opzioni sono “square” come nell’esempio precedente e “circle” (pallino nero) che è il simbolo di default. Per quanto riguarda le liste ordinate, il corrispondente degli elenchi numerati, abbiamo la coppia di tag <ol> e </ol> che serve per definirli.

ESEMPIO
<ol>
<li>Buffon</li>
<li>Pessotto</li>
<li>Nesta</li>
<li>Cannavaro</li>
<li>Maldini</li>
</ol>

Combinando tra di loro i due tipi di marcatore per gli elenchi è possibile costruirne versioni annidate.

ESEMPIO
<html>
<body>
<ul type=”square”>
<li>Juventus
<ol>
<li>Del Piero</li>
<li>Trezeguet</li>
</ol>
</li>
<li>Inter
<ol>
<li>Vieri</li>
<li>Crespo</li>
</ol>
</li>
<li>Milan
<ol>
<li>Inzaghi</li>
<li>Rivaldo</li>
</ol>
</li>
</ul>
</body>
</html>

I form o moduli
Grazie alla presenza dei moduli, fare interagire i visitatori con il nostro sito web non è più un problema. Unendo le possibilità che l’html ci offre alle potenzialità di alcuni linguaggi quali il JavaScript, Asp, PHP o gli script CGI (oramai datati), possiamo rendere i form degli strumenti atti a sviluppare qualsiasi tipo di funzione od operazione utile nella gestione dinamica dei siti. Si pensi alla ricerca, alla registrazioine degli utenti nel sito, ai forum, ai guestbooks e così via.
Osserviamo come un form viene creato in html.
Il tag necessario al browser per identificarlo è <form> con la sua chiusura </form>. Per funzionare correttamente un modulo necessita di alcuni attributi. Due sono obbligatori: “action” e “method”. Con il primo, specificheremo nel valore l’indirizzo completo della pagina destinata a elaborare i contenuti spediti tramite il form. Con il secondo dichiareremo quale dei due possibili metodi “post” e “get” usare per trasmettere i dati all’indirizzo precedentemente indicato. Un’acquisizione completa del significato dei due attributi appena considerati va comunque rinviata al modulo relativo alla programmazione di siti dinamici. Altri attributi opzionali sono “name” ed “enctype”. L’attributo “name” assegna un nome simbolico al modulo mentre “enctype” specifica la codifica dei dati, che potranno essere trasmessi anche crittografati.
Per creare un form dobbiamo specificare come inserire i vari elementi che lo compongono. Per fare ciò si useranno i tag <input> con gli attributi:

type= per specificare il tipo di elemento da inserire nel modulo;
name= per specificarne il nome univoco.

Con l’istruzione type= possiamo specificare di che elemento si tratta. Consideriamo l’inserimento di una casella di testo (type=”text”).
<form>
<input type=”text” name=”nome_desiderato” size=”20″>
</form>

L’istruzione “size” specifica al browser la dimensione dell’elemento in questo caso «20» caratteri. Analizziamo adesso l’inserimento di una casella di controllo (check box).

L’istruzione “value”, personalizzabile a piacimento, riporta nei risultati del form, l’avvenuta spunta della «casella di controllo».
Infine per far sì che i dati inseriti dall’eventuale visitatore vengano inviati, dobbiamo inserire un bottone di “submit” .
<form>
<input type=”submit” value=”Invia” name=”Invia”> </form>

Per quanto riguarda i pulsanti di comando ne abbiamo di tre tipi selezionabili a seconda del diverso type. Abbiamo già visto submit che invia i dati del form. Il tipo Reset invece cancella qualsiasi contenuto precedentemente immesso nel form stesso. Esiste infine un terzo tipo: button che in automatico non ha associata alcuna azione. Esso viene fornito per permettere la programmazione di azioni personalizzate dall’utente tramite opportuni programmi scritti in JavaScript.
Un altro elemento utilizzabile nei form è il radio button.

Si noti come in questo caso abbiamo inserito due radio button contraddistinti dal medesimo nome. Ciò fa sì che i due pulsanti siano mutuamente esclusivi come ci si aspetta nel nostro caso.

Ci resta ancora da considerare l’unico elemento di un form che non corrisponde al tag input. Si tratta del solito menu a discesa presente in tutte le interfacce grafiche moderne. Il tag corrispondente è <select> e le varie voci di menu sono indicate dal tag <option>.

ESEMPIO
<form name=”provaselect” method=”post“ action=”ricevi.asp”>
<select name=”elenco”>
<option value=”1″ >Primo elemento</option>
<option value=”2″ >Secondo elemento</option>
<option value=”3″ selected>Terzo elemento</option>
</select>
</form>

Le varie voci del menu sono indicate dal tag <option>, in cui è possibile specificare un valore da associare alla selezione effettuata e disponibile per l’elaborazione sul server. È inoltre possibile indicare quale degli elementi è inizialmente selezionato con la voce selected. Se non specificato altrimenti sarà il primo degli elementi ad essere selezionato. Ricordiamo che è possibile usare all’interno di una form le tabelle per impostare i moduli in maniera ordinata.

ESEMPIO
<html>
<body>
<form>
<center>
<table width=”80%”><tr>
<td align=”right” width=”50%”>
<b><font color=”#ff0000″ size=”2″>Cognome</font> </td>
<td align=”left ” width=”50%”> <input type=”text” name=”cognome”> </td></tr>
<tr><td align=”right” width=”50%”>
<b><font color=”#ff0000″ size=”2″>Nome </font></td>
<td align=”left ” width=”50%”> <input type=”text” name=”nome” ></td></tr><tr>
<td align=”right” width=”50%”>
<b><font color=”#ff0000″ size=”2″>Sesso </font> </td><td align=”left ” width=”50%”>M
<input type=”radio” name=”sesso ” value=”maschio”>  F
<input type=”radio” name=”sesso ” value=”femmina”>
</td></tr><tr>
<td colspan=”2″ align=”center”> Sport
<input type=”checkbox” name=”sport” value=”sport”>  Spettacolo
<input type=”checkbox” name=”spettacolo ” value=”spettacolo”>  Motori
<input type=”checkbox” name=”motori ” value=”motori”>
</td></tr><tr>
<td colspan=”2″ align=”center”>
<input type=”Submit” name=”Invia ” value=”Invia “> 
<input type=”Reset” name=”reset ” value=”Cancella”></td></tr></table></center>
</form>
</body>
</html>

I frame
Con i frame si indica al browser la volontà di dividere la pagina in due (o più zone).
Per comporre una struttura di questo genere si ha la necessità di costruire ben tre pagine. Una fa da contenitore generale mentre la altre due definiscono i contenuti delle due zone individuate nella prima. Vediamo come sia possibile fare ciò. Si usa la coppia di tag <frameset> </frameset> come nel codice seguente:

<html>
<frameset rows=”20%,80%”>
<frame src=” paginasuperiore.htm” name=”sopra”>
<frame src=”paginainferiore.htm” name=”sotto”>
</frameset>
<noframes>
<body>
contenuto alternativo
/body>
</noframes>
</html>

Con il tag <frameset rows=”20%, 80%”> si indica al browser la volontà di dividere la pagina in due zone disposte orizzontalmente una sopra l’altra di cui la prima occupa il 20% dell’altezza della finestra del browser, l’altra l’80 %. In seguito compare il seguente codice:

Con esso si specificano le due pagine che vanno caricate nelle due porzioni di finestra. L’attributo src, come nel caso delle immagini, indica il percorso necessario per reperire la pagina, mentre name definisce un nome simbolico associato alla pagina stessa e che vedremo in seguito come debba essere utilizzato. Con il tag <noframes>, a causa del fatto che non tutti i browser sono in grado di visualizzare i frame, definiamo un contenuto alternativo all’interno della coppia <body> </body>.

Se si volesse una barra di scorrimento, dovremmo modificare il codice nel seguente modo:

Con l’attributo scrolling=”yes”, indichiamo che è richiesta, anche se non logicamente necessaria poiché nella nostra situazione i contenuti della pagina non superano lo spazio riservato al frame, la presenza di una barra di scorrimento laterale. Il valore scrolling=”no” esclude la presenza della barra, mentre l’assenza di scrolling, o scrolling=”auto” fa sì che la barra sia presente solo se necessario.

Così come si è divisa la finestra in due parti orizzontali è possibile dividerla in porzioni verticali. Il modo è il seguente:

<html>
<frameset cols=”100,500,200″>
<frame src=”paginalatosinistro.htm” name=”latosinistro”>
<frame src=”paginacentro.htm” name=”centro”>
<frame src=”paginalatodestro.htm” name=”latodestro”>
</frameset>
<noframes>
<body>
contenuto alternativo
</body>
</noframes>
</html>

Questa volta la dimensione dei frame è stata specificata in numero di pixel invece che in percentuale. Ci resta da capire ancora come sia possibile gestire i link all’interno di una struttura a frame. Di solito essi vengono utilizzati quando è necessario condividere a livello di intero sito degli elementi. Tipicamente si tratta delle barre di navigazione. Ovunque ci si sposti all’interno del sito saranno sempre presenti in alto, oppure su di un lato, degli elementi utilizzati per i collegamenti ipertestuali. Significa che in una delle due zone del frameset rimane bloccato il contenuto della pagina, mentre nell’altra zona vengono caricate di volta in volta pagine diverse. Quando si specificano le caratteristiche di un collegamento ipertestuale è possibile indicare quale sia la porzione del frameset in cui caricare la nuova pagina. A tal fine si rende necessario l’utilizzo dell’attributo name del tag <frame>. Nel tag <a> invece bisognerà specificare il target.

<a href = “nuovapagina .htn” target=”centro”>link nella porzione centrale< /a>

In questo modo si ordina al browser di caricare nuovapagina.htm nel frame centrale della nostra struttura a tre pagine.

Oltre ad usare come target un name definito nel frameset, si possono specificare 4 valori definiti dall’html:

_blank
_parent
_top
_self

Il valore _blank indica la volontà di caricare la pagina in una nuova finestra per cui avremo due finestre attive, quella del frameset ed una con una nuova pagina.
Il valore _parent indica un caricamento nella zona della finestra destinata a contenere il frameset, di cui la pagina che contiene il link fa parte. Nel caso della struttura a tre frame verticali la nuova pagina viene caricata al posto di tutto il frameset.
Il valore _top invece indica un caricamento su tutta la finestra. Il risultato nel nostro caso è identico all’utilizzo del target _parent.
Per apprezzare la differenza tra i due tipi bisogna far riferimento ad un caso in cui la struttura a frame si annida a più livelli.
Modifichiamo il codice nel seguente modo:

<html>
<frameset cols=”100,500,200″>
<frame src=”paginalatosinistro.htm” name=”latosinistro”> <frame src=”paginacentro.htm” name=”centro”>
<frame src=”paginalatodestro.htm” name=”latodestro”> /frameset>
<noframes> <body> contenuto alternativo
</body>
</noframes></html>

Valutazione della capacità di applicazione ed approfondimento

1. Si consideri una generica pagina web e si disegni la possibile impaginazione usando delle tabelle.
2. Si consideri una semplice pagina web e si provi a riprogettarne il codice usando delle tabelle.
3. Scaricando delle immagini dal web, si costruisca una semplice pagina Internet relativa ad un argomento a piacere.
4. Si pianifichi lo sviluppo di un semplice sito personale a 5 o 6 pagine non usando i frame.
5. Si pianifichi lo sviluppo di un semplice sito personale a 5 o 6 pagine usando i frame.
6. Si scelgano una serie di siti a grande diffusione, ad esempio portali. Si scarichi in locale, la home page del sito con i vari elementi che la costituiscono e si faccia una media delle dimensioni di tutta l’informazione contenuta in termini di KByte.
7. Si visualizzino le home page dei portali considerati in precedenza a diverse risoluzioni e si notino i modi differenti con cui ci si adegua a varie risoluzioni.
8. Svolgendo gli esercizi precedenti, dovreste aver notato che quasi nessun portale utilizza dei frame. Provate ad indagare sul motivo.

{/gspeech}

ESERCIZI

1. A che cosa servono i tag <html>, <head> e <body>?
2. Si elenchino gli attributi conosciuti del tag <body>, spiegandone gli utilizzi.
3. Si definiscano le caratteristiche dei marcatori <meta> e <title>.
4. Si elenchino i marcatori per la formattazione del testo conosciuti, indicandone gli attributi.
5. Si elenchino i marcatori per la formattazione dei paragrafi conosciuti, indicandone gli attributi.
6. Si elenchino i marcatori per la formattazione delle immagini conosciuti, indicandone gli attributi.
7. Si spieghi come sia possibile creare collegamenti ipertestuali tra varie pagine web.
8. Si indichi tramite vari esempi la struttura di un URL relativo ed un URL assoluto.
9. A che cosa servono gli URL che iniziano con http?
10. A che cosa servono gli URL che iniziano con ftp?
11. A che cosa servono gli URL che iniziano con mailto?
12. A che cosa serve l’attributo target del tag <a>?
13. Si spieghi come sia possibile creare un elenco numerato in una pagina web.
14. Si spieghi come sia possibile creare un elenco puntato in una pagina web.
15. Si mostri la struttura del codice html di un elenco annidato a più livelli.
16. Quali sono i tag utilizzati per la formattazione di tabelle?
17. Date le tabelle viste nel testo, si provi dalla struttura grafica a risalire in modo autonomo al codice html corrispondente.
18. A che cosa servono gli attributi rowspan e colspan?
19. Come si fa a dividere una pagina in frame orizzontali?
20. Come si fa a dividere una pagina in frame verticali?
21. A che cosa può servire una strutturazione di un sito a frame?
22. Si mostri chiaramente la differenza tra i target _blank, _top, _self e _parent.
23. Si mostri la struttura del codice html per una struttura di sito a frame annidati.
24. Che cosa sono i moduli?
25. Si mostri il codice html per inserire una casella di testo in un modulo.
26. Si mostri il codice html per inserire un radio button in un modulo.
27. Si mostri il codice html per inserire una casella di spunta in un modulo.
28. Si mostri il codice html per inserire un pulsante in un modulo.
29. Si mostri il codice html per inserire menu a discesa in un modulo.
30. Quali tipi di pulsanti possono essere inseriti in un modulo?

15-Il Linguaggio HTML

Commento all'articolo Annulla risposta