3 – immagini e link

Il tag per le immagini è <img> l’attributo src indica il file da usare.

<img src="prova.jpg"/>

Un cosa Importante è usare il percorso relativo rispetto al file nel quale inserire l’immagine.

<img src="/img/prova.jpg"/>

In questo caso l’immagine si trova nella cartella img che sta a pari livello rispetto al ns file html. Se dovessi puntare ad una cartella superiore, dovrei indicare la salita di livello con ../

<img src="../img/prova.jpg"/>

Il source può puntare anche a un server esterno, in questo caso il logo di google:

<img src="http://www.google.it/images/srpr/logo3w.png"/>

L’attributo alt serve ad ottenere una descrizione dell’immagine visibile ai visitatori qualora la risorsa dell’immagine non sia disponibile, mentre se si vuole ottenere una descrizione visibile quando si ci ferma col mouse per qualche istante sull’immagine, l’attributo da usare è title:

<img alt="il logo di google" title="Ciao sono Didle" src="http://www.google.it/images/srpr/logo3w.png"/>

altri attributi utili sono le dimensioni width larghezza e height altezza.

Per Associare una parte cliccabile ad un’immagine si usa l’attributo usemap uguale al nome che assegneremo alla nostra area cliccabile, preceduto dal simbolo cancelletto

<img usemap="#googleLogoMap" src="http://www.google.it/images/srpr/logo3w.png"/>

quindi useremo il tag <map> con il suo nome e il tag <area/> :

<img usemap="#googleLogoMap" src="http://www.google.it/images/srpr/logo3w.png">
<map name="googleLogoMap">
    <area shape="rect" coords="0,0,75,75" href="letteraG.html" />
</map>

map contiene il nome che corrisponde a quello dell’attributo usemap.  Nel tag area l’attributo shape indica la forma. coords sono le cordinate, i primi due valori sono il punto iniziale del mio rettangolo (shape=”rect”) gli altri due sono il secondo punto che delinea il mio rettangolo. Nel ns esempio 0 , 0 indica il punto più in alto a sinistra mentre 75 , 75 indica il punto dove all’incirca termina la G del logo di Google. L’attributo href indica il riferimento testuale (link) al quale verremo reindirizzati al click. Creiamone un secondo all’incirca in corrispondenza della seconda o del logo:

<img usemap="#googleLogoMap" src="http://www.google.it/images/srpr/logo3w.png">
<map name="googleLogoMap">
    <area shape="rect" coords="0,0,75,75" href="letteraG.html" />
    <area shape="circle" coords="75,35,30" href="letteraO.html">
</map>

Questa volta l’attributo shape è circle (cerchio) e le coordinate indicano il primo e il secondo valore indicano il centro del cerchio e la terza il raggio.

Tag anchor <a>

Ora vediamo come usare i link, chiamati anche ancore <a>, il nome deriva dal fatto che sarebbe come se ancorassi da una pagina un altra.

<a href="html/gatti.html">Clicca qui</a>

posso mettere anche link esterni

<a href="www.google.it">Clicca qui</a>

Per aprire il link in una nuova pagina del browser useremo l’attributo target, impostandolo a _blank:

target="_blank"

Vediamo come linkare punti diversi della stessa pagina

<a href="#ultimoParagrafo">Clicca qui</a>
<p id="ultimoParagrafo">Sono il pragrafo finale</p>

nell’ href inseriamo il nome dell’id a cui puntare preceduto dal simbolo cancelletto. Oppure potrebbe essere il name:

<a href="#ultimoParagrafo">Clicca qui</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- qui potrebbero esserci
numerosi elementi nella pagina 
-->
<a name="ultimoParagrafo"/>
<p id="ultimo">Sono il pragrafo finale</p>

Ho inserito diversi <br /> per creare più righe vuote prima di inserire l’ultimo paragrafo. Ho inserito anche alcuni commenti tramite il simbolo indicante i commenti <!– e quello di chiusura –> . Questa volta il link punta al name del secondo tag <a>.

Ultimo esempio di ancoraggio è l’invio di una mail, tramite il comando mailto nell’attributo href

<a href="mailto:pico@pallino.it">clicca per inviare una mail</a>