Le immagini
Anche l'occhio vuole la sua parte, quindi cosa c'è di meglio che una bella immagine per valorizzare la nostra pagina web?
Se poi le immagini sono tante meglio no?
No! o meglio sì, ma con cognizione di causa.
Così come abbiamo visto insieme lungo il percorso dedicato all'HTML esistono poche semplici regole che se applicate ci rendono la vita e lo sviluppo di pagine web più semplice e consono alle nostre aspettative.
Le immagini supportate dai browser sono generalmente .jpg, .gif, e .png. Quindi qualsiasi altro formato rischia di non essere visualizzato. Altra nota importante è quella riguardante il peso (in KB) delle vostre graziose fotografie, infatti queste devono necessariamente essere ottimizzate in quanto ancora moltissime persone navigano con i cari vecchi modem analogici a 56 Kbs. Quindi una volta creata, elaborata ed ottimizzata (photoshop, the GIMP, Paint sono programmi che un webmaster dovrebbe saper usare )una foto è pronta per essere inserita nelle nostre pagine web.
Es. <img src="http://miosito/miefoto/miaImmagine.gif">
Si noti che abbiamo inserito un percorso assoluto, qualora l'immagine si fosse trovata nella stessa cartella del file html avremmo potuto omettere l'intero percorso e scrivere quindi <img src="miaImmagine.gif">).
img è il tag per le immagini enon ha bisogno del tag di chiusura
src è l'attributo che specifica il percorso (source) .
Alcune buone abitudini da prendere sono quelle relative alla dimensione e al testo alternativo della nostra immagine.
Es. <img src="Mia Immagine .gif" alt="La mia foto " width="224" height="69">
Con l'attributo alt inseriamo un testo alternativo all'immagine, qualora questa non venga caricata, o da visualizzare durante il caricamento.
Con gli attributi width e heigth diamo al browser la possibilità di conoscere in anticipo le dimensioni della foto ed eviteremo, quindi, il fastidioso caricamento a strisce dell'immagine man mano che viene caricata. Nel caso in cui la spiegazione dell’immaginedovesse essere particolarmente lunga, è possibile espandere la descrizione sintetica - fornita tramite l’attributo "alt" grazie ad un altro attributo: longdesc (long description), che permette di specificare un file con una spiegazione estesa dell’immagine. Ecco la sintassi:
<img src="MiaImmagine.gif" alt="la mia foto " longdesc=“descrizione.html“ width="224" height="69">
Dove descrizione.html sarà un file html dove avremo preventivamente inserito in formato testo una descrizione di ciò che la foto rappresenta.
L'attributo title, così come gia visto per i link ci restituirà una ulteriore descrizione non appena il mouse si sposterà sull'immagine.
Es.<img src="Mia Immagine .gif" alt="La mia foto " width="224" height="69" title="Ciao" >.
Con l'esempio che segue faremo si che la nostra immagine diventi un link, (utile ad esempio se abbiamo costruito l' immagine di un pulsante) e faremo in modo che il collegamento apra una nuova finestra(come già visto nella sezione dedicata ai link)
<a href="http://www.TuoSito.it"
target="_blank">
<img src="Pulsante.gif" width="224" height="69">
</a>
L'attributo border, così come le tabelle definisce il bordo attorno alla immagine e se non si desidera nessun bordo bisognerà specificare scrivendo border="0"
Nessun commento:
Posta un commento