Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 1
IL LINGUAGGIO HTML
Html è il linguaggio con cui le pagine web vengono scritte e progettate, anche se molti progettisti si rifiutano di pensare
all'html come ad un linguaggio di layout. In effetti l'Html non è nato per essere un linguaggio di progettazione, ma per
essere un linguaggio di visualizzazione, che possa essere mostrato in modo diverso a seconda dei diversi computer e dei
diversi sistemi operativi.
L'Html, però, che ci piaccia o meno, è il linguaggio del web e quindi se si vuole costruire un sito o una pagina web
bisogna conoscerlo. Magari non è necessario conoscere tutti i tag e tutti gli attributi, anche perchè oggi disponiamo di
editor WYSIWYG molto potenti e precisi, ma conoscere almeno a grandi linee il linguaggio Html è fondamentale e
risulta di grande aiuto nella realizzazione di qualunque progetto web.
Un file HTML non è altro che un file di testo (definito genericamente "puro testo" o "testo ASCII"), sostanzialmente
identico ai file di tipo TXT che si possono scrivere con un comune editor di testo, come il blocco note di windows. Per
funzionare come pagina web, questo file di testo deve essere rinominato con il suffisso .HTML o .HTM e deve
contenere, oltre al testo vero e proprio, anche le istruzioni che consentono al browser di riconoscerlo e gestirlo
correttamente. Queste istruzioni sono chiamate Tag (marcatori).
Un tag è un comando racchiuso tra i segni < (minore) e > (maggiore), chiamati anche parentesi angolari. Quando il
browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo
schermo.
Nella maggior parte dei casi i tag funzionano in coppia, richiedono cioè un'istruzione d'apertura ed una di chiusura
secondo lo schema:
<TAG DI INIZIO>elemento Cui si applica l’istruzione</TAG DI FINE>
È anche possibile includere coppie di tag all'interno d'altre coppie di tag mantenendo una sequenza simmetrica. A titolo
d'esempio, il tag <B> identifica il grassetto ed il tag <I> il corsivo. Così per formattare in grassetto e corsivo una parola
si deve scrivere:
<B><I>Testo</I></B> oppure: <I><B>Testo</B></I>
ma non: <B><I>Testo</B></I>
I tag in generale possono contenere attributi che ne definiscono determinate proprietà. Ogni attributo può assumere
differenti valori. Quasi tutti i tag prevedono attributi che sono specifiche aggiuntive che ne influenzano il risultato.
La sintassi è: <TAG ATTRIBUTO="valore">; ad esempio: <IMG SRC="foto.jpg">.
Le virgolette che racchiudono il valore di un attributo a volte sono obbligatorie ed a volte no. In ogni caso sono sempre
accettabili anche quando non sono necessarie.
Come già detto, per creare un file HTML è sufficiente un editor di testo come il blocco note di Windows.
Conoscendo bene il linguaggio HTML si può abbozzare una pagina o un intero sito con un editor WYSIWYG e in
seguito apportare a mano al codice HTML generato tutti i ritocchi necessari per raffinare e perfezionare ulteriormente i
risultati.
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 2
I tag essenziali
La struttura essenziale di ogni pagina web e costituita da:
I tag <HTML> e </HTML> all'inizio ed alla fine del documento; essi indicano al browser che tutto ciò che è compreso
nel mezzo è una pagina web.
I tag <HEAD> e </HEAD> racchiudono l'intestazione del documento dove si possono inserire informazioni che non
vengono visualizzate nella pagina, ma che ne descrivono caratteristiche come titolo, autore e parole-chiave. Quando il
browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo
schermo.
I tag <BODY> e </BODY> racchiudono il corpo del documento dove si inserisce il contenuto da visualizzare nella
pagina (testo, collegamenti, immagini e così via).
Esempio di pagina web vuota:
<HTML>
<HEAD>
Sezione relativa all’intestazione
</HEAD>
<BODY>
Sezione relativa al corpo vero e proprio del documento
</BODY>
</HTML>
<!- commento ->: questo tag consente di commentare alcune parti del codice della pagina e può essere inserito in
qualsiasi punto.
Quando nel codice HTML si inseriscono questi tag aggiuntivi bisogna fare sempre attenzione a non accrescere
esageratamente ed inutilmente le dimensioni della pagina che incidono sensibilmente sui tempi di trasmissione,
caricamento e visualizzazione nel browser.
I tag di intestazione
I tag di intestazione sono:<TITLE> e <META>.
Con <TITLE> si definisce il titolo della pagina web. Il titolo appare sulla barra superiore della finestra del browser
quando la pagina viene visualizzata durante la navigazione. Questo tag richiede un'istruzione di apertura ed una di
chiusura. La sintassi corretta è:
<HEAD>
<TITLE>Titolo della pagina</TITLE>
</HEAD>
È buona norma specificare il titolo di ogni pagina web perché una pagina senza titolo è anonima e poco professionale.
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 3
Non è possibile inserire nella stessa intestazione più di un tag <TITLE>.
Mediante il tag <META> si possono inserire nell'intestazione dei dati che non vengono visualizzati nella pagina ma
servono al browser e ai motori di ricerca per gestirne i contenuti in modo più efficace. È possibile specificare con il tag
<META> informazioni come: il nome dell'autore della pagina, una breve descrizione dei contenuti della pagina ed un
elenco schematico di parole-chiave legate ai contenuti. Il tag <META> non richiede chiusura ma l'aggiunta di alcuni
attributi e dei rispettivi valori.
La sintassi generica è:
<META ATTRIBUTO1=”VALORE” ATTRIBUTO2=”VALORE”>
dove la voce ATTRIBUTO1 serve ad indicare il tipo di informazione e la voce ATTRIBUTO2 serve a specificare il
contenuto concreto della meta-informazione.
Per inserire nell'intestazione il nome dell'autore si utilizza:
<META NAME=author CONTENT=”nome e cognome”>
Per inserire nell'intestazione una descrizione del documento si utilizza:
<META NAME=description CONTENT=”breve descrizione della pagina”>
Per inserire nell'intestazione un elenco di parole-chiave che specificano l'argomento della pagina si utilizza:
<META NAME=keywords CONTENT=”parola1, parola2, parola3, parola4”>
Le parole chiave possono essere separate sia da spazi che da virgole; alcuni motori di ricerca prediligono la prima
tecnica, altri la seconda.
Il tag BODY
La sezione <BODY> è il corpo principale del documento HTML dove vanno inseriti tutti i contenuti che devono
apparire nella pagina web. Vedremo adesso alcune caratteristiche generali del corpo del documento, come lo sfondo
della pagina, il colore del testo ed il colore dei collegamenti ipertestuali, che possono essere specificate mediante
attributi da aggiungere al tag <BODY>.
Per impostare un colore come sfondo della pagina web si usa l'attributo BGCOLOR. Se vogliamo realizzare una pagina
con lo sfondo nero scriveremo allora:
<BODY BGCOLOR=”#000000”>
dove il codice del colore è in formato esadecimale.
Si può indicare il colore mediante il nome in inglese anziché il formato esadecimale:
<BODY BGCOLOR=”black”>
Questa però non è una pratica comune perché non tutti i browser sono in grado di interpretare correttamente tale genere
di espressione.
È possibile impostare come sfondo della pagina web un'immagine in formato GIF o JPEG utilizzando l'attributo
BACKGROUND secondo la sintassi:
<BODY BACKGROUND=”percorso e nome del file”>
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 4
Se l'immagine si trova nella stessa cartella della pagina HTML e si chiama sfondo.gif scriveremo:
<BODY BACKGROUND=”sfondo.gif”>
Inserendo un'immagine come sfondo della pagina web, questa viene automaticamente replicata dal browser in modo da
coprire l'intero spazio visibile. Allora è opportuno scegliere un'immagine che si presti ad essere replicata e affiancata in
un numero indefinito di copie, senza che si vedano le giunture o si creino stacchi poco estetici.
Per impostare a priori il colore del testo del testo della pagina si usa l'attributo <TEXT> secondo la sintassi:
<BODY TEXT=”#codice del colore”>
Se non specificato, il colore di default del testo è il nero.
Tramite
gli attributi
del tag <BODY>
si possono definire anche i colori dei collegamenti
ipertestuali.
I colori da definire sono tre: per i collegamenti ipertestuali in condizioni normali si usa l'attributo LINK="codice del
colore"; per i collegamenti attivi, nel momento cioè in cui vi si fa clic, si usa l'attributo ALINK="codice del colore"; per
i collegamenti già visitati si usa l'attributo VLINK="codice del colore".
In pratica per personalizzare il colore dei collegamenti la sintassi è:
<BODY LINK=”colore1” ALINK=”colore2” VLINK=”colore3”>
Paragrafi (Tag BR, P)
Quando si scrive il codice HTML, per mandare a capo il testo che segue non basta premere il tasto Invio. Anche se nel
codice una frase sembra andare a capo, ciò non accade una volta che la pagina viene visualizzata nel browser. Per
mandare a capo il testo di una pagina web si usano i tag <BR>, <P>.
Il tag <BR> equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo
mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag <BR> non
richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la frase vada a capo.
Il tag <P> crea invece un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e
può essere formattato in maniera diversa rispetto al testo precedente. Il tag <P> d e v e es s er e us a t o con la rispettiva
chiusura </P>.
Allineamenti di testo
Per impostare gli allineamenti di testo che valgono paragrafo per paragrafo si usa l'attributo ALIGN del tag <P>
secondo la sintassi:
<P ALIGN=“valore“>paragrafo da allineare</P>
dove il valore di ALIGN può essere:
•
left per l'allineamento a sinistra,
•
center per l'allineamento al centro,
•
right per l'allineamento a destra,
•
justify per l'allineamento giustificato.
L'allineamento a sinistra è quello predefinito, quindi specificare l'attributo ALIGN="left" è superfluo, mentre il valore
justify è stato introdotto a partire da Html 4.0 e quindi non tutti i browser sono in grado di interpretarlo correttamente.
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 5
Formattazione
I tag per la formattazione del testo si suddividono in stili fisici e stili logici. Gli stili fisici sono tag definiscono in modo
univoco gli attributi grafici dei caratteri.
I principali tag fisici sono:
<B>... </B>: testo in grassetto;
<SUP>... </SUP>: testo apice;
<I>... </I>: testo in corsivo;
<SUB>... </SUB>: testo pedice.
<U>... </U>: testo sottolineato;
<Q>……</Q>: citazione breve tra apici;
<CITE>…….</CITE>: il testo viene visualizzato in corsivo
Usare il tag <U>... </U> è sconsigliabile perché un testo sottolineato può creare confusione con i collegamenti
ipertestuali che solitamente appaiono sottolineati.
Scegliere il font del testo
Il tipo di carattere (cioè il "font") che il browser visualizza di default è il "Times New Roman".
Purtroppo questo carattere (ottimo per la carta stampata) non è adatto a essere visualizzato sul monitor di un computer: è una
questione di "grazie" (le grazie sono quegli abbellimenti tipografici delle lettere, che dovrebbero servire per rendere più
leggibile il carattere).
Dal momento che i caratteri con grazie non ottengono il risultato voluto sul monitor (quello cioè di rendere le lettere
maggiormente riconoscibili e di conseguenza il testo più leggibile), ma anzi ottengono l’effetto contrario, si preferisce di solito
utilizzare dei caratteri senza grazie come il "Verdana", l’"Arial" o l’"Helvetica".
E’ bene sottolineare da subito che non è possibile far sì che l’utente visualizzi un testo in un carattere fantasioso scelto da noi.
Allo stato attuale dell’arte l’utente che naviga in internet può visualizzare solo i caratteri che sono installati nel suo sistema: in
Windows si tratta dei caratteri presenti in: Pannello di controllo > Tipi di caratteri.
Se ad esempio scarichiamo dal nostro archivio preferito di font il carattere «Hackers» e lo inseriamo nella cartella dei caratteri,
saremo poi in grado di visualizzare sul nostro computer il testo in Hackers.
Per questo motivo è bene tener conto di due accorgimenti:
scegliere caratteri "sicuri" , che siano cioè senz’altro presenti sul pc dell’utente
non indicare un solo carattere, ma una serie di caratteri che gradualmente si allontanano dal risultato che vorremmo
ottenere, ma non di molto, fino ad indicare la famiglia a cui il nostra carattere appartiene. In questo modo il browser
dell’utente cercherà di trovare nella propria cartella dei fonts il primo carattere indicato, se non lo trova passerà al
secondo, e solo come ultima spiaggia sceglierà si utilizzare il carattere predefinito (il famigerato "Times")
Vediamo alcuni esempi di famiglie "sicure" di caratteri:
<font face="Verdana, Arial, Helvetica, sans-serif">Verdana e caratteri simili</font>
<font face="Arial, Helvetica, sans-serif">Arial e caratteri simili</font>
<font face="Times New Roman, Times, serif">Times e caratteri simili</font>
<font face="Courier New, Courier, mono">Curier e caratteri simili</font>
Verdana e caratteri simili
Arial e caratteri simili
Times e caratteri simili
Curier e caratteri
simili
<font face="Georgia, Times New Roman, Times, serif">Georgia e caratteri simili </font> Georgia e caratteri simili
Geneva e caratteri simili
<font face="Geneva, Arial, Helvetica, sans-serif">Geneva e caratteri simili</font>
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 6
È vero: l’impossibilità di scegliere i caratteri che preferiamo limita terribilmente le nostre possibilità espressive, ma il bello di
sviluppare per il web è proprio accettare di creare con delle regole ben definite, e a volte anche molto vincolanti.
Per i titoli delle pagine, i menu, e quant’altro potremmo poi sempre utilizzare delle immagini con il nostro carattere tipografico
preferito (ad esempio delle "gif").
Scegliere il colore del testo
Una volta scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, ecco il codice:
<font color="blue">testo blu</font>
oppure:
<font color="#0000FF">testo blu</font>
La scelta del colore può essere effettuata nello stesso momento in cui si sceglie il tipo di carattere (dal momento che "face" e
"color" sono entrambi attributi del tag <font>):
<font face="Verdana, Arial, Helvetica, sans-serif" color="blue"> testo blu in Verdana </font>
Una volta scelto il colore possiamo sempre decidere di cambiarlo:
<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">testo blu in Verdana</font>
<br >
<font face="Verdana, Arial, Helvetica, sans-serif" color="red">testo rosso</font>
<br>
o meglio ancora:
<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">testo blu in Verdana<br>
<font color="red">testo rosso</font>
<br>
</font>
La seconda codifica è preferibile alla precedente, perché la scelta del tipo di carattere viene effettuata una sola volta, evitando
così di scrivere del codice inutile. È importante notare che per evitare la ripetizione i due tag sono annidati l'uno dentro l'altro.
Le dimensioni del testo
Le dimensioni del testo si attribuisco mediante l'attributo 'size' del tag <font>. Ci sono due modi per dare attribuire le
dimensioni al testo tramite il tag <font>:
valori interi da 1 a 7
valori relativi alla dimensione di base del tag font (di default "3")
Nel caso dei valori interi, ecco la scala di grandezza:
Codice
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Effetto
Pag. 7
<font size="1">testo di grandezza 1</font>
<br>
<font size="2">testo di grandezza 2</font>
<br>
<font size="3">testo di grandezza 3</font>
<br>
<font size="4">testo di grandezza 4</font>
<br>
<font size="5">testo di grandezza 5</font>
<br>
<font size="6">testo di grandezza 6</font>
<br>
<font size="7">testo di grandezza 7</font>
Nel caso dei valori relativi alla dimensione di base è possibile "spostarsi" nella scala di grandezza utilizzando i segni "+" e "-".
Abbiamo detto che la grandezza del font di base di default nel browser è 3.
Dunque se utilizziamo un size="+2", vuol dire che la dimensione del font deve essere di 2 misure più grande della dimensione
del font di base, quindi avremo un font di grandezza 5.
Vediamo l'esempio:
Codice
Effetto
<font size="+2">
Testo di grandezza +2 rispetto al font di base (3).<br />
Cioè font di grandezza 5.
</font>
<br/>
<font size="5">
Testo di grandezza 5.
</font>
Come si può vedere le due sintassi sono equivalenti.
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 8
È importante evitare di cadere nell'errore di pensare che la dimensione relativa faccia riferimento al precedente tag font. La
dimensione relativa fa sempre riferimento alla dimensione del font di base:
Codice
Effetto
<font size="7">
Testo di grandezza 7
<font size="-1">
testo di grandezza inferiore di 1 al font di base (che di default è 3), NON al
tag precedente
</font>
</font>
Quando state utilizzando il tag <font> sia che utilizziate il size di valori interi, sia che utilizziate i valori relativi al tag di base,
in realtà la grandezza del carattere dipende dalle impostazioni del browser dell'utente (come già abbiamo visto per i tag
"heading").
Con Internet Explorer ad esempio andando in: Visualizza > Carattere.
Se cambiate le dimensioni del carattere, vedrete cambiare le dimensioni dei font.
Questo appunto per le grandezze da 1 a 7 sono grandezze anch'esse relative.
Questa caratteristica da un lato è positiva (permette di ingrandire testi piccoli), dall'altra può risultare molto fastidiosa per il
webmaster.
L'unico modo per fissare il carattere è (ancora una volta) quello di utilizzare i fogli di stile, esprimendo le dimensioni in pixel.
Titoli , elenchi, righe orizzontali
Titoli
Mediante l'inserimento di opportuni titoli il testo di una pagina HTML può essere suddivisa in capitoli e sottocapitoli.
Per i titoli HTML sono previsti sei livelli gerarchici.
Il tag per definire un titolo è <Hn>... </Hn> dove n è un valore che va da 1 a 6. Ciò significa che si possono avere sei
livelli di titolazione, da <H1> (livello superiore) a<H6> (livello inferiore).
In visualizzazione i titoli appaiono come paragrafi a sé stanti con caratteristiche di formattazione legate al livello di
titolazione. L'aspetto dei titoli può essere personalizzato per quanto riguarda l'allineamento e la formattazione. È
importante inserire dei titoli nei testi delle pagine web perché questo incrementa notevolmente la leggibilità e perché i
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 9
motori di ricerca, quando catalogano i siti web, spesso si basano anche sui titoli presenti nella pagina per classificarne
gli argomenti.
Righe Orizzontali
Per tracciare una riga orizzontale, da usare come divisorio, si usa il tag <HR> che significa Horizontal Roules. Questo tag
prevede i seguenti attributi:
ALIGN=”right” “left” o “center”
COLOR=come per gli altri tag
NOSHADE la linea non prevede ombreggiatura
SIZE=”numero” indica la dimensione in pixel
WIDTH=”numero” o “n%” indica la lunghezza della riga in pixel o in misura percentuale rispetto alla pagina
Esempio: <HR ALIGN=”left” COLOR=”red” SIZE=”2” WIDTH=”100%”>
Elenchi Puntati, Numerati, Di Definizione
Il primo tipo di elenco che vedremo è quello puntato; le voci di questo elenco non hanno un ordine di successione ed
ogni voce viene evidenziata da un simbolo.
Il tag è <UL> (Unordered List) e funziona con il rispettivo </UL>. Nel mezzo del tag <UL>... </UL> ciascuna voce è
identificata dal tag <LI>. Esempio:
<UL>
<LI> voce a
<LI> voce b
<LI> voce c
</UL>
Al tag <UL> si può aggiungere l'attributo TYPE="tipo di simbolo" che permette di scegliere un simbolo personalizzato.
I valori previsti sono:
disc: punto pieno
circle: punto vuoto
square: quadrato nero.
Esempio: <UL TYPE=”square”>
Un altro tipo di elenco è quello numerato; le voci di questo elenco hanno un preciso ordine di successione ed ogni voce
viene evidenziata da un numero oppure opzionalmente, da una lettera.
Il tag è <OL> (Ordered List) e funziona con il rispettivo </OL>. Nel mezzo del tag <OL>... </OL> ciascuna voce è
identificata dal tag <LI>. Al tag <OL> si può aggiungere l'attributo TYPE="tipo di numerazione" che permette di
scegliere numeri o lettere.
I valori previsti sono:
1
numeri arabi,
I
numeri romani maiuscoli,
i
numeri romani minuscoli,
A
lettere maiuscole,
a
lettere minuscole.
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 10
Si può anche usare l'attributo START="numero" per far iniziare il conteggio da un qualsiasi valore.
Elenco di definizione
E’ possibile anche creare degli elenchi di definizione utilizzando i seguenti tag:
Il tag e <DL> (Definition List con il rispettivo tag di chiusura </DL>
Nel mezzo del tag <DL> ciascuna voce è identificata dal tag <DT> (Definition term) con il rispettivo tag di chiusura
</DT>.
Nel mezzo del tag >DT> ciascuna definizione della voce è identificata dal tag <DD> (Definition Description) con il tag
di chiusura <DD>.
Esempio:
<DL>
<DT>Voce a</DT>
<DD>Definizione della voce a</DD>
<DT>Voce b</DT>
<DD>Definizione della voce a</DD>
</DL>
Darà come risultato:
Voce A
Definizione della voce a
Voce B
Definizione della voce b
Immagini
Il tag IMG
Per inserire un'immagine in una pagina HTML basta inserire il tag: <IMG SRC="nome immagine">; questo tag non ha
bisogno di chiusura.
Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nome, l'estensione e l'eventuale
percorso. Usando il tag in questo modo l'immagine appare allineata alla base della riga di testo corrispondente, senza
spazi aggiuntivi e mantiene le sue dimensioni assolute.
Adesso vedremo gli attributi del tag <IMG> che ci permettono di personalizzare l'impaginazione dell'immagine.
Possiamo definire le dimensioni di visualizzazione di un'immagine specificando gli attributi WIDTH (larghezza in
pixel) e HEIGHT (altezza in pixel). Ad esempio
<IMG SRC=”image.jpg” WIDTH=”100” HEIGHT=”50”>
Quando si specificano le dimensioni di un'immagine è necessario conoscerne le dimensioni effettive per mantenere
inalterato il rapporto larghezza/altezza evitando così di deformare l'immagine.
Anche se si vuole visualizzare l'immagine a grandezza naturale è sempre preferibile specificare i valori di WIDTH e
HEIGHT perché così il browser ha maggiori informazioni per collocare l'immagine ed il caricamento della pagina
risulta molto più rapido.
Oltre alle dimensioni di visualizzazione possiamo definire anche l'allineamento dell'immagine rispetto al testo
circostante mediante l'attributo ALIGN. Esempio:
<IMG SRC=”image.jpg” ALIGN=”bottom”>
I valori di ALIGN ammessi sono:
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 11
Bottom: il lato inferiore dell'immagine appare allineato alla base della riga di testo (valore predefinito);
Middle: il punto mediano dell'altezza dell'immagine si allinea alla base della riga di testo; il testo si spezza e prosegue
sotto l'immagine;
Left: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato destro;
Right: l'immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato sinistro.
Nel caso in cui si voglia allontanare l'immagine dal testo si può aumentare lo spazio vuoto che circonda l'immagine
attraverso gli attributi VSPACE (spazio verticale, in pixel) e HSPACE (spazio orizzontale, in pixel). Ad esempio
scrivendo:
<IMG SRC=”image.jpg ” VSPACE=”10” HSPACE=”20”>
oltre ad inserire nella pagina web image.jpg si specifica che sopra e sotto l'immagine devono rimanere 10 pixel vuoti, e
a destra e sinistra dell'immagine devono rimanere 20 pixel vuoti.
Si può anche aggiungere un bordo intorno all'immagine tramite l'attributo BORDER che deve essere espresso in pixel
secondo la sintassi:
<IMG SRC=”image.jpg” BORDER=”5”>
Attributi fondamentali del tag <IMG> sono: ALT (testo alternativo) e TITLE.
Grazie all’attributo ALT si può definire un testo descrittivo dell'immagine.
L’attributo TITLE invece farà visualizzare all'utente cosa succederà in caso di click o, al non vedente, farà ascoltare cosa
succederà quando cliccherà.
La sintassi corretta è:
<IMG SRC=”nome immagine” ALT=”Testo descrittivo dell’immagine” TITLE=”Cosa succede al click? Di cosa si parla qui?”>
Riassumendo: Con l'alt dovresti fornire una piccola descrizione nel caso manchi l'immagine o, per l'accessibilità, cosa leggerà il
software di un non vedente. Col title invece farai visualizzare all'utente cosa succederà in caso di click o, al non vedente, farai
ascoltare cosa succederà quando cliccherà.
Questa didascalia associata all'immagine appare durante il caricamento della pagina o quando si passa con il mouse sopra
l'immagine. I vantaggi principali dell'usare l'attributo ALT sono:
i visitatori possono capire prima del caricamento completo il contenuto delle immagini;
i browser speciali per non-vendenti sono in grado di interpretare correttamente la pagina;
diversi motori di ricerca tengono conto del valore dell'attributo ALT delle immagini di una pagina per catalogarla con
precisione.
Ad ogni immagine si può associare un collegamento ipertestuale includendo il tag <IMG> all'interno della coppia di tag
<A HREF> e </A> secondo la sintassi:
<A HREF=”index.html”><1MG SRC=”index.gif”></A>
Associare un collegamento ipertestuale ad un'immagine è molto utile quando si vuole creare ad esempio un menù
grafico di navigazione per un sito web. Creando immagini ad hoc come icone o pulsanti il visitatore né intuirà la
funzione a colpo d'occhio.
Però quando un'immagine è cliccabile, appare generalmente circondata da un bordo di colore blu che risulta antiestetico. In questo caso basta indicare all'interno del tag <IMG> l'attributo BORDER="0" per fare in modo che il bordo
resti invisibile.
I collegamenti ipertestuali
I collegamenti ipertestuali si creano associando l'indirizzo (percorso/nome file) del nodo di destinazione ad un elemento
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 12
visualizzato nella pagina corrente che può essere una stringa di testo o un'immagine.
Questa associazione è basata sull'utilizzo del tag <A HREF> dove A sta per ancoraggio ed HREF è l'abbreviazione di
Hypertext-Reference (riferimento ipertestuale). Per creare un collegamento verso un'altra pagina dello stesso sito la
sintassi è:
<A HREF=”pagina2.html”> Vai a pagina 2 </A>
Affinché il collegamento funzioni è fondamentale scrivere il nome del file di destinazione correttamente, rispettando
maiuscole e minuscole. Nel caso in cui il file di destinazione non si trovi nella stessa directory del file di posizione
bisogna specificare anche il percorso completo.
Il tag <A HREF> permette di puntare un collegamento anziché ad una pagina web ad un'immagine. La sintassi è:
<A HREF=”foto.jpg”> Vai a foto </A>
Anche in questo caso bisogna specificare correttamente il nome dell'immagine e l'eventuale percorso; supponendo che
l'immagine si trovi nella cartella images si dovrà scrivere:
<A HREF=”images/foto.jpg”> Vai a foto </A>
Se si vuole creare un collegamento ad un file da aprire o da scaricare come ad esempio un filmato o un pacchetto
compresso la sintassi è:
<A HREF=”file.zip”> Scarica il file in formato zip </A>
dove file.zip è il file che verrà scaricato sul computer di chi naviga.
Per creare un collegamento verso un altro sito web è sufficiente inserire nel tag <A HREF> l'indirizzo completo del sito
in questione:
<A HREF=http://www.gdesign.it> Principi di Web Design by GDC </A>
Quando una pagina è molto lunga e suddivisa in sezioni distinte si possono creare dei collegamenti all'interno della
stessa pagina che permettono al lettore di saltare facilmente da un punto all'altro del testo.
Per creare i collegamenti interni bisogna innanzitutto definire le destinazioni (ancore) nei vari punti prescelti mediante
il tag <A NAME="nome scelto dal webmaster">. Supponiamo di aver definito due destinazioni all'interno della nostra
pagina:
<A NAME=”sezione1”>Sezione 1 </A>
<A NAME=”sezione2”>Sezione 2 </A>
adesso possiamo creare i collegamenti che ci portano alle due destinazioni secondo la sintassi:
<A HREF=”#sezione1”> Vai alla sezione 1 </A>
<A HREF=”#sezione2”> Vai alla sezione 2 </A>
È consigliabile inserire nelle proprie pagine web un indirizzo di posta elettronica cui i visitatori possano rivolgersi.
Allora si può inserire un indirizzo cliccabile, associato cioè alla casella e-mail corrispondente, in modo che l'invio del
messaggio sia quasi automatizzato. La sintassi è:
<A HREF=”mailto:[email protected]>Scrivimi per informazioni</A>
Sino ad ora abbiamo visto collegamenti associati ad un testo, ma i collegamenti possono essere associati anche
ad un'immagine. Quindi è possibile avere un'immagine cliccabile che ci porti ad un'altra pagina web, a un sito, ad
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 13
una sezione e via dicendo.
Per associare un collegamento ad un'immagine si usa il tag <IMG SRC> con l'attributo BORDER="0". Ad esempio:
<A HREF=”pagina2.html”><IMG SRC=”pagina2.gif” BORDER=”0”></A>
Se non si specifica l'attributo BORDER="0" l'immagine apparirà contornata da un profilo colorato e ciò è sconsigliabile
dal punto di vista estetico.
Quando si clicca su un collegamento in una pagina web, viene caricata la nuova destinazione (immagine, pagina o sito)
nella stessa finestra del browser. Seguendo i vari collegamenti ipertestuali, il lettore potrebbe non ricordarsi più il punto
di destinazione.
Per prevenire questo inconveniente si può fare in modo che la destinazione del collegamento venga visualizzata in una
nuova finestra del browser che si sovrappone a quella di partenza. Per ottenere questo risultato basta aggiungere al tag
<A HREF> di partenza l'attributo TARGET. Ad esempio:
<A HREF=”pagina2.html” TARGET=”_blank”> Vai a pagina 2 </A>
Il valore dell'attributo TARGET (nell'esempio:_blank) è un nome convenzionale e il suo effetto è di aprire in ogni caso
una finestra a sé stante.
Concetti di base linguaggio HTML – Ultima revisione 16/12/2015
Pag. 14
