Corso HTML e CSS (Lezione 7)

Impariamo a costruire un sito Web

Lezione 7: I tag del <body> : Tag per immagini e links

I tag che abbiamo incluso nel raggruppamento per le immagini sono:

<img> Definisce un’immagine
<map> Definisce una mappa con delle aree cliccabili
<area> Fornisce un area cliccabile di una mappa

 

I tag che abbiamo incluso nel raggruppamento per i links invece sono:

<a> Anchor text, cioè un testo sul quale sarà messo un link
<link> Il link ad un documento esterno od ad un altro punto della pagina

Vediamoli in dettaglio:

1) <img … />

Questo tag viene usato per definire un’ immagine inserita in una pagina HTML. Non ha un tag di chiusura e viene quindi chiuso con i due caratteri  ‘/>’
Per essere precisi non si inserisce fisicamente un’immagine nella pagine, ma semplicemente viene riservato lo spazio e l’immagine viene linkata.

Gli attributi per questo tag sono:

Attributo Valore Descrizione Obblig./Facolt.
alt testo Specifica un testo alternativo nel caso l’immagine per qualche motivo non possa essere visualizzata Obbligatorio
src URL Specifica l’URL dell’ immagine Obbligatorio
height pixels
%
Specifica l’altezza dell’immagine in pixel oppure in % rispetto all’altezza reale dell’immagine linkata Facoltativo
ismap ismap Specifica che un’ immagine è parte di una image-map lato server. Se si clicca sull’immagine il browser invierà le coordinate del click ad un’applicazione lato server. Utilizzabile solo se si ha un’applicazione server-side che può essere scritta per esempio in PHP o ASP. Facoltativo
usemap #mapname Specifica che un’ immagine è una image-map Facoltativo
width pixels
%
Specifica la larghezza dell’immagine in pixel oppure in % rispetto alla larghezza reale dell’immagine linkata Facoltativo

più gli attributi standard che sono:

Attributo Valore Descrizione Obblig./Facolt.
class classname Attribuisce uno stile abbinando una classe. Vedremo successivamente con i CSS Facoltativo
dir ltr
rtl
Specifica la direzione del testo (ltr o rtl) Facoltativo
id id Specifica un id univoco per l’elemento. Vedremo successivamente con i CSS Facoltativo
lang language- code Specifica un codice linguaggio per il testo associato all’immagine. Facoltativo
style elemento di stile Attribuisce un elemento di stile senza far ricorso ad un foglio CSS. Vedremo successivamente. Facoltativo
title testo Titolo dato all’immagine che comparirà quando si porterà il mouse sull’immagine stessa. Facoltativo
xml:lang language- code Specifica un codice linguaggio per il testo associato all’immagine in un documento XHTML. Facoltativo

Chiariamo che anche in questo caso molti attributi sono superflui. Ci riferiamo in particolare aquelli relativi alla lingua (lang e xml:lang) e a dir. Inoltre come al solito abbiamo tralasciato gli attributi deprecati, il cui uso non è più accettato.

Ricordiamo inoltre che l’analisi dettagliata dell’uso degli attributi dei tag è materia che svilupperemo in seguito.

Vediamo ora un esempio dell’utilizzo del tag <img>. Se scriviamo:

<img src="contact_book.jpg" height="200px" width="200px" alt="Contact Book" title="Contact Book"/>

Il risulto sarà:

 

 

 

 

 

 
 

  

 

Chiariamo che scrivendo src=”contact_book.jpg” come nell’esempio, si suppone che il file immagine sia nella stessa directory del documento html, altrimenti andrà indicato il percorso dove si trova l’immagine.

Gli attributi height e width se si mostra l’immagine nella sua dimensione reale potrebbero essere superflui, in quanto l’effetto finale per l’utente è il medesimo. E’ tuttavia importante indicarli altrimenti il browser non può sapere lo spazio da riservare fintanto che non ha prelevato l’immagine dal server e l’utente potrebbe vedere il layout del documento deformato e modificarsi durante il caricamento.

L’uso degli attributi ismap e usemap verrà mostrato al prossimo punto contestualmente al tag <map>.

2) <map> …. </map>

<area />

Questi tag come detto definiscono una mappa, cioè un’immagine con delle aree cliccabili collegate a URL differenti. Il significato e l’uso sarà sicuramente più chiaro vedendo l’esempio sotto riportato.

Il tag <map> ha un solo attributo obbligatorio che è:

Attributo Valore Descrizione Obblig./Facolt.
name nome della mappa Specifica il nome della mappa Obbligatorio

mentre il tag <area> ha gli attributi:

Attributo Valore Descrizione Obblig./Facolt.
alt testo Specifica un testo alternativo per l’area dell’immagine Obbligatorio
coords coordinates Coordinate dell’area Facoltativo
href URL Indirizzo a cui l’area è collegata Facoltativo
nohref nohref Specifica che un’area non ha alcun link associato Facoltativo
shape default
rect
circle
poly
Specifica la forma dell’area Facoltativo
target _blank
_parent
_self
_top
Specifica dove va aperta la nuova pagina quando si clicca su un link. Facoltativo

Entrambi poi possono avere gli attributi standard descritti già al punto 1.

Vediamo subito un esempio:

<p> <img src="europa.jpg" alt="Europa" width="550" height="387" usemap="#Map" />
 <map name="Map">
 <area shape="default" href="#" alt="Resto d'Europa" title="Resto d'Europa" />
 <area shape="poly" coords="251,270,233,286,205,275,192,276,189,291,130,269,144,228,129,201,104,178,104,167,120,168,126,169,145,176,149,154,151,155,164,166,194,138,182,154,191,144,198,139,238,163,259,180,246,207,234,228,241,241,246,243,239,253" href="#" alt="Francia" title="Francia"/>

 <area shape="poly" coords="252,267,244,250,246,235,260,227,274,233,278,224,301,214,320,223,324,233,310,250,324,272,337,292,360,300,361,306,396,322,397,332,380,327,373,339,385,348,370,371,365,365,364,338,345,324,288,285,285,267,270,264,271,264" href="#" alt="Italia" title="Italia"/>
 </map>
</p>

Il browser mostrerà:

Europa

Resto d'Europa Francia Italia

Spieghiamo un po’ cosa è stato fatto:

  • Al tag <img> abbiamo aggiunto l’attributo usemap che indica al browser che l’immagine è da intendersi come una image-map e fornisce il nome come riferimento preceduto dal segno# (nel nostro caso #Map)
  • Abbiamo quindi inserito un tag <map> che definisce la image-map. Il legame con l’immagine è dato dal nome (name=”Map”). Da notare che l’attributo name ha come valore il nome della mappa che deve essere scritto senza il segno #.
  • All’interno del tag <map>, cioè prima della chiusura con </map>, inseriamo tanti tag <area> quante sono le aree con link differenti che abbiamo. Nel nostro esempio ne abbiamo inserite tre:
    – Una con attributo shape (forma) = default che fa riferimento all’intera immagine;
    – Due con attributo shape (forma) =  poly (poligono) che disegnano aree poligonali per mezzo delle coordinate a cui si da un nome ed ovviamente un link (nel nostro caso è inutile che clicchiate perché resterete su questa pagina). Ci siamo limitati nell’esempio a Francia ed Italia.
    L’attributo alt del tag area è obbligatorio. L’attributo title è facoltativo, ma è molto utile per far apparire il nome dell’area quando il mouse passerà sopra a quell’area. Con href si indica l’URL della pagina che si deve aprire quando si clicca sull’area. In questo caso il segno# indica al browser di restare sulla stessa pagina.
    L’attributo coorddeve indicare le coordinate x e y che individuano l’area. Questo dipende ovviamente dalla forma dell’area:

    • per shape=”rect” (rettangolo) le coordinate sono x1,y1,x2,y2 rispettivamente per sinistra, alto, destra, basso. Le coordinate sono relative all’immagine, per cui x1 = 0 significa che la parte sinistra corrisponde al bordo sinistro dell’immagine, y2 = 120 significa che l’estremo più basso del rettangolo è 120 px dal bordo alto dell’immagine ecc.
    • per shape=”circle” (cerchio) le coordinate sono x,y,raggio dove x e y sono le coordinate del centro sempre con la logica vista sopra, mentre il raggio è ovviamente la lunghezza del raggio in pxixel.
    • per shape=”poly” (poligono) le coordinate sono x1,y1,x2,y2,..,xn,yn dove ciascuna coppia x,y rappresenta le coordinate dei vertici del poligono.

3) <a> …. </a>

Questo tag è usato per definire un testo con un link ad un’altra pagina oppure in un altro punto della stessa pagina

Gli attributi per questo tag sono:

Attributo Valore Descrizione Obblig./Facolt.
hreflang codice della lingua Specifica la lingua del documento linkato Facoltativo
href URL Specifica l’URL del documento che verrà richiamato Facoltativo
rel testo Specifica la relazione tra il documento corrente e quello linkato Facoltativo
rev testo Specifica la relazione tra il documento corrente e quello linkato. E’ l’inverso di rel Facoltativo
target _blank
_parent
_self
_top
framename
Specifica dove va aperta la nuova pagina quando si clicca su un link. Facoltativo

Inoltre vi sono altri attributi che però non sono supportati da tutti i browser e di conseguenza non vanno usati (per altro di nessuna rilevanza).

Oltre ai su citati attributi il tag <a> può avere anche gli attributi standard descritti al punto1 con l’aggiunta di un altro attributo standard:
accesskey col formato accesskey=”lettera” dove lettera è una lettera della tastiera che, se premuta contestualmente al tasto Alt manda direttamente al documento linkato. Firefox anziché Alt + lettera usa la lettera + Invio.

Gli attributi rel e rev non hanno alcun effetto nel browser. Vengono tuttavia letti dai motori di ricerca, quindi possono essere usati se ha senso passare qualche informazione ai motori di ricerca. I valori che possono assumere sono:

Valore Descrizione
alternate Una versione alternativa del documento (es. pagina di stampa)
stylesheet un CSS
start Il primo documento di una selezione
next Il successivo documento di una selezione
prev Il precedente documento di una selezione
contents L’indice di un documento
index Una reference table del documento
glossary Un glossario
copyright Un documento che contiene informazioni di copyright
chapter Un capitolo del documento
section Una sezione del documento
subsection Una sottosezione del documento
appendix Un’appendice del documento
help un documento di help
bookmark Un segnalibro sulla pagina
nofollow “nofollow” è usato da Google, per specificare che lo spider di Google non deve seguire il link.
license Link ad informazioni di copyright del documento
tag Un tag (parola chiave) del corrente documento
friend

Questi attributi sono di scarsissima rilevanza per il tag <a>

Vediamo un esempio di uso del tag <a>:

<a href="http://www.weweb.in" target="_blank" title="Home Page di WeWeb">Vai alla Home Page di WeWeb</a>

e l’effetto sarà:

 

Con target=_blank diciamo al browser di aprire il nuovo documento in una pagina separata.

L’attributo title, come più volte detto mostra il testo in un fumetto quando si passa il mouse sopra al link.

4) <link />

Questo tag, che non ha tag di chiusura ma è chiuso con ‘/>’) è usato per definire una relazione con un documento esterno.

Viene usato praticamente solo per richiamare i fogli di stile CSS nella <head> del documento.

Gli attributi di questo tag sono quelli visti per il tag <a> con l’unica esclusione dell’attributo accesskey e con due attributi in più che sono:

Attributo Valore Descrizione Obblig./Facolt.
media screen
tty
tv
projection
handheld
print
braille
aural
all
Specifica su quale device il documento deve essere mostrato Facoltativo
type MIME_type Specifica il MIME type del documento linkato Facoltativo

In questo caso l’attributo rel viene usato e l’unico valore supportato da tutti i browser che può assumere è stylesheet (per l’appunto foglio di stile).

L’esempio che proponiamo è l’unico utilizzo pratico del tag <link>. Tra i tag <head> e </head>del documento scriviamo:

<link rel="stylesheet" type="text/css" href="Stile.css"  media="screen" />

Il browser come conseguenza caricherà il foglio di stile Stile.css. Notiamo che l’attributo media che abbiamo inserito è in realtà superfluo, così come l’assenza dell’attributo type non avrebbe influenza sul funzionamento né darebbe errore il controllo di validità dal punto prettamente formale.

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.