Corso HTML - Pagina 3 di 3

I domìni di Internet

L'estensione .com nell'esempio potrebbe essere sostituita da altri suffissi come .mil, .edu, .gov, .org: sono i cosiddetti domìni (Domain), che indicano il tipo di attività svolta da chi gestisce il server: .com per le imprese private, .mil per le istituzioni militari, .edu, per le università, .gov per le istituzioni pubbliche e governative, .org per organizzazioni di altro genere. Questo tipo di estensione può essere sostituito dalla sigla del paese in cui si trova il server (.it per l'Italia).

Collegamenti esterni

Una volta compresa la sintassi di un URL, inserire un indirizzo all'interno di una pagina Web è veramente molto semplice: è sufficiente infatti utilizzare il comando <A> (Anchor) per "ancorare" il collegamento alla pagina. Ovviamente questo comando costituisce una semplice indicazione della presenza di un indirizzo; esso necessita quindi di un attributo che specifichi la natura dell'indirizzo a cui ancorarsi. Quando, nel corso della creazione di una pagina Web, ci troveremo di fronte alla necessità di inserire un collegamento, dovremo porre all'interno del comando <A> l'attributo HREF= seguito dall'URL che vogliamo collegare alla nostra pagina racchiuso tra virgolette. Ad esempio, nel caso in cui volessimo collegare alla nostra pagina quella del motore di ricerca Virgilio, il cui indirizzo è: http://www.virgilio.it , la sintassi del nostro comando sarà la seguente:

<A HREF="http://www.virgilio.it">Il Motore di Ricerca Virgilio</A>

La scritta collocata all'interno dei comandi di apertura e di chiusura apparirà sullo schermo con un colore diverso e sottolineata.

Collegamenti interni

Il comando HREF sta per Hypertext Reference (riferimento ipertestuale), ovvero indica al browser il collegamento a un'altra pagina Web, trasformando così il nostro testo in un ipertesto.

Gli URL inseriti in un ipertesto possono essere assoluti (ovvero, riferirsi, come in questo caso, a una pagina esterna al nostro server) o relativi, come nel caso di collegamenti tra diverse pagine nello stesso server. In quest'ultimo caso l'URL può essere costituito unicamente dal nome del file contenente il la pagina HTML desiderata, o, nel caso in cui la pagina desiderata si trovi in un'altra directory, dal percorso interno al server.

Posta elettronica

Un altro collegamento ipertestuale che si incontra frequentemente nelle pagine Web è quello relativo all'indirizzo di posta elettronica dell'autore della pagina. Includendo il nostro indirizzo di posta elettronica nella pagina consentiremo a quanti la visualizzeranno di inviarci i loro commenti o di mettersi in contatto con noi per un'eventuale approfondimento e scambio di opinioni sui temi trattati nel nostro testo.

Per fare ciò è sufficiente assegnare come valore all'attributo HREF= il nostro indirizzo

e-mail preceduto dall'indicazione mailto: In tal modo il browser interpreterà l'attributo come in indirizzo di posta elettronica e avvierà il programma per la gestione della posta. Ecco un esempio:

<A HREF=mailto:nome.utente@provider>Mandatemi le vostre opinioni sulla mia pagina</A>

Inserire immagini

L'uso delle immagini all'interno di un pagina Web contribuisce certamente ad arricchirne il contenuto e a renderla più interessante agli occhi del lettore.

All'interno di una pagina Web le immagini possono inoltre assumere funzioni e significati diversi: possiamo avere delle semplici immagini interne alla pagina, o immagini a cui si può accedere solo facendo clic su un link, o ancora immagini che costituiscono esse stesse un collegamento; infine, una singola immagine, trasformata in mappa sensibile al contesto, può contenere in sé più riferimenti ipertestuali.

Sebbene sia molto semplice dal punto di vista dei comandi HTML, l'utilizzo dei file di immagine può però causare dei problemi legati sia ai limiti posti dalla rete telefonica alla velocità di trasferimento dei dati sia alla tecnologia di digitalizzazione delle immagini stesse: esistono infatti molti formati di immagine, e non è sempre facile riuscire a visualizzarli tutti o a convertirli nello standard desiderato.

In ogni caso, il comando HTML fondamentale per inserire immagini è <IMG> (Image). Saranno poi i diversi attributi a fornire indicazioni riguardanti la localizzazione dell'immagine nel server, la sua natura e l'allineamento nell'ambito della pagina. Un attributo comunque irrinunciabile è SRC= (Source), seguito dal nome del file desiderato posizionato tra virgolette subito dopo il segno di uguale.

Il comando più semplice per inserire un'immagine in una pagina sarà dunque:

Come per i comandi che determinano la suddivisione del testo in paragrafi o il posizionamento di linee separatrici orizzontali, anche in questo caso non è necessario indicare il comando di chiusura, essendo l'immagine un'unità compiuta in se stessa.

Allineare le immagini

Utilizzando l'attributo ALIGN= in combinazione con il comando IMG e con l'attributo SRC=, possiamo assegnare all'immagine prescelta l'allineamento preferito rispetto alla linea di testo in cui la suddetta immagine è inserita. Il valore dell'attributo ALIGN= sarà "top" per le immagini il cui nome è allineato con il testo, "bottom" per le immagini allineate lungo il lato inferiore, e "middle" per le immagini allineate lungo la linea mediana. I valori "left" e "righ" consentono di collocare l'immagine sul lato sinistro o su quello destro dello schermo; mentre il valore "center" consente di collocare l'immagine al centro della pagina.

Trasformare l'immagine in un collegamento

E' possibile utilizzare le immagini anche associandole a collegamenti con altre pagine. In questo modo, facendo clic sull'immagine ci collegheremo al sito desiderato. Per fare ciò è sufficiente aggiungere, di seguito al comando <A>, il comando <IMG SRC= seguito dal nome dell'immagine desiderata racchiuso tra virgolette.

Dimensioni e bordi delle immagini

Alcune estensioni Netscape successivamente accolte nelle specifiche HTML 3.2 E 4 consentono di fornire informazioni al browser riguardanti altezza e larghezza delle immagini. Si tratta degli attributi HEIGHT e WIDTH. Il loro utilizzo consente al browser di calcolare lo spazio occupato dalle immagini e di disporre in anticipo il testo della pagina, permettendo così al lettore di iniziare a leggere prima che le immagini vengano visualizzate.

La creazione di tabelle

Attraverso il comando <TABLE> e relativi attributi è possibile costruire delle tabelle del tutto simili a quelle degli editor di testo (come Word) o dei fogli elettronici (come Excel), dove le singole celle sono ordinate in righe e colonne. Chiunque abbia un minimo di dimestichezza con i suddetti programmi sa di certo che ogni cella può essere utilizzata non solo per inserire dati, ma anche per creare variazioni ed effetti particolari nell'impaginazione del testo e delle illustrazioni. E' quanto consentono di fare anche i comandi HTML che ci apprestiamo a esaminare. Innanzi tutto possiamo decidere, inserendo l'attributo BORDER= (Bordo, Limite), di assegnare alla nostra tabella un bordo, il cui spessore può essere specificato con un numero (ad esempio <TABLE BORDER=4>); tale valore si applica solo al bordo esterno e non alle divisioni interne della tabella. Fatto ciò, è necessario inserire le righe che compongono la nostra tabella; ciò si ottiene ripetendo per ogni riga il comando <TR> (Table Row). All'interno di ogni riga le singole celle verranno poi inserite attraverso il comando <TD> (Table Data). Al comando <TD> faremo poi seguire il testo desiderato. Questi due passaggi andranno ripetuti fino a ottenere il numero di righe voluto.

Come per altri comandi illustrati precedentemente, i comandi <TR> e <TD>, indicando entrambi una nuova entità logica all'interno della pagina, non necessitano dei comandi di chiusura </TD> e </TR>.

Le celle vuote si ottengono inserendo il comando <TD> senza specificare alcun valore, ma facendo subito seguire da un nuovo comando <TD> (o dal comando di chiusura </TD> e da un nuovo comando <TD>.

Nel costruire una tabella, di solito si utilizza la prima riga per inserire i campi, evidenziandone il testo in neretto. Tuttavia esiste già un comando HTML che consente di fare ciò automaticamente, con l'ulteriore vantaggio di centrare i titoli: tramite l'uso di <TH> (Table Header) possiamo infatti inserire una riga destinata unicamente a delimitare i campi della stessa tabella. Per aggiungere invece una descrizione alla nostra tabella, possiamo ricorrere al comando <CAPTION> (Intestazione, titolo). Anche <CAPTION> supporta l'attributo ALIGN= (Allineamento) già considerato a proposito delle immagini: assegnando a tale attributo il valore "top", la descrizione apparirà sopra la tabella; scegliendo invece "bottom", il testo esplicativo figurerà sotto la tabella.

L'attributo ALIGN= può inoltre essere assegnato a qualsiasi delle nostre celle, consentendoci così di collocare il testo (o le immagini) al centro, a sinistra o a destra ("center", "left" "right").

Con le Netscape Extensions possiamo inoltre inserire un valore di larghezza percentuale rispetto alla larghezza della pagina visualizzata dal browser: se decidiamo cioè che la larghezza della nostra tabella non debba essere superiore all'80% della larghezza della pagina, dobbiamo compilare una stringa di questo tipo:

Tale attributo può anche essere assegnato a una singola cella: nel caso in cui decidessimo che una cella debba occupare metà della larghezza della tabella, la sintassi del comando sarà la seguente:

Gli sfondi

Un'altra possibilità offerta dalle Netscape Extensions, è quella di definire un colore di sfondo della pagina attraverso l'attributo BGCOLOR= (Background Color) inserito nel comando <BODY>. Il valore del colore desiderato andrà indicato tra virgolette e preceduto dal carattere #. Il TAG:

<BODY BACKGROUND="immagine.gif">	Imposta un file gif o jpg come sfondo
<BODY TEXT="000000">	Imposta il colore del testo
<BODY LINK="000000">	Imposta il colore degli Hyperlink
<BODY VLINK="000000">	Imposta il colore degli Hyperlink già selezionati
<BODY ALINK="000000">	Imposta il colore degli Hyperlink nel momento in cui sono attivi

Variare le dimensioni dei caratteri

Un'altra possibilità offerta dalle Netscape Extension è quella di variare le dimensioni dei caratteri. L'attributo SIZE=, riferito al comando FONT e seguito da un numero variabile da 1 a 7, consente per l'appunto di assegnare una dimensione maggiore o minore al corpo del testo. Il valore predefinito, corrispondente a quello di quei browser che non utilizzano queste estensioni, è 3.

Esistono alcune differenze con il comando <H> seguito da un numero da 1 a 6 che abbiamo visto analizzando gli HEADER; in quel caso si trattava di un comando per differenziare le dimensioni dei vari titoli e sottotitoli all'interno della pagina, e infatti la sezione di testo interessata dal comando veniva visualizzata in neretto. Inoltre, i valori numerici sono ordinati al contrario: nel caso del comando <H>, 1 era il valore più grande e 6 il più piccolo.

Per <FONT SIZE=> invece, 7 darà un testo molto grande, e 1 un valore molto piccolo.