Abbiamo visto nella lezione precedente, come organizzare il testo in liste ordinate e non, ma una pagina web che si rispetti non può essere priva di immagini ed è proprio di queste che ci occuperemo in questa lezione.

Aprite il vostro editor e richiamate la pagina che avevate creato, quella della lezione precedente per intenderci. Posizionate il cursore nel punto in cui dovrà essere inserita l'immagine, questo il tag o elemento, da adoperare:

<img src="xxxxxxxxx.yyy" />

Dove xxxxxxxxxxx è il nome dell'immagine e yyy la sua estensione grafica. Le immagini consentite dal linguaggio html sono .gif .jpg .png

Si adoperano quelle di tipo gif quando servono immagini animate o che abbiano delle trasparenze (quelle che lasciano vedere lo sfondo), mentre per tutti gli altri casi è preferibile adoperare quelle di tipo jpg essendo questo un formato compresso risulta molto più snello e di conseguenza più veloce da caricare; un aspetto quest'ultimo da non trascurare mai quando si adoperano le immagini. Ricordatevi che dimensioni esagerate sono sinonimo di peso esagerato; sulla rete un'immagine da 500 Kb spesso induce il visitatore ad abbandonare il sito prima ancora che questa sia stata completamente visualizzata, mai dimenticare che nonostante le attuali linee a larga bande super veloci (ADSL) ci sono ancora molti utenti che accedono alla rete con modem analogici o chiavette lente, fate dunque in modo da evitare immagini pesanti ed anzi, al contrario, preoccupatevi che queste siano le più "leggere possibili".

Il formato .png ultimo nato più per problemi legali che non per reali esigenze tecniche, è veniva adoperato raramente in quanto browser obsoleti, come IE6, per esempio, non lo supportavano. Per molti risulta essere "ottimale" dal punto di vista qualitativo.

Detto questo, passiamo ad inserire la nostra prima immagine. Supponiamo che questa si chiami web-link.gif, sarà inserita nel listato in questa maniera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title> Titolo della mia pagina Web</title>
<link rel="stylesheet" type="text/css" href="foglio.css" />
</head>
<body>
<p>Questa è la mia prima pagina web in xhtml</p>
<img src="web-link.gif" />
</body>
</html>

Notare la sintassi del comando img che è leggermente diversa da quella adoperata per inserire il testo con <p>, il tag per le immagini non ha il relativo tag di chiusura, non serve mettere </img>, ma come tutti i tags di xhtml deve essere chiuso ed è possibile farlo con la barra prima della parentesi angolare che determina la fine del tag stesso.

Noterete anche che dopo la parola chiave: img, che indica "immagine", c'è un: "src" che significa: source, ovvero sorgente, cioè quale immagine deve essere visualizzata. Questo nome va inserito all'interno dei doppi apici ed è praticamente il nome dell'immagine stessa. Tutto chiaro?

Se adesso salvate il file sovrascrivendo quello che avevate richiamato e lo andate poi a visualizzare, noterete che l'immagine non c'è; o meglio c'è qualcosa di nuovo ma non si vede. Come mai? Semplice, vi serve un'immagine che si chiami "web-link.gif" e che si trovi nella stessa cartella dove si trova il file html che la richiama, cioè il vostro file che avete appena modificato e salvato.

A questo punto vi consiglio di lasciare perdere l'immagine web-link.gif e procuratevi una qualsiasi immagine vostra, quella che preferite, a patto che sia in uno dei formati validi gif, jpg o png, mettetela nella stessa cartella dove avete il file html e cambiate il nome all'interno di src=" " inserendo il nome esatto dell'immagine che intendete usare.

Adesso portatevi una riga sotto il tag che è servito per inserire l'immagine ed aprite un nuovo paragrafo scrivendo: La mia prima pagina web ha finalmente anche la sua prima immagine.

Se tutto quanto è stato fatto correttamente, la vostra pagina comincerà a prendere una certa consistenza, con la stessa procedura potete inserire tutti i testi e tutte le immagini che vorrete ma senza mai dimenticare che non si deve esagerare. Il peso in Kb di tante piccole immagini viene sommato e potrebbe creare lo stesso problema di una sola immagine da molti kb. Per evitare questo conviene suddividere in più pagine i documenti lunghi o ricchi di immagini.

Vediamo cosa dobbiamo o potremo aggiungere al tag: <img src="web-link.gif" />

 

Molto importante ai fini dell'accessibilità è l'attributo alt che significa alternate cioè testo alternativo usato per descrivere l'immagine nel caso in cui questa per qualche motivo non fosse visibile.

<img src="web-link.gif" alt="Logo grafico di web-link" />

Logo grafico di web-link

Provate a portare il cursore del mouse sull'immagine e lasciatelo fermo per un momento, a seconda del browser adoperato si potrà leggere il testo inserito con l'attributo alt. Questo è un comportamento anomalo perchè l'immagine è visibile. In effetti non servirebbe a nulla dal momento che alt dovrebbe essere in alternativa all'immagine mancante ma il browser IE si comporta in questo strano modo.

Se è un testo descrittivo che vogliamo visualizzare passando sopra all'immagine si deve adoperare l'attributo title riconosciuto da tutti i browser e serve proprio per dare un titolo, o una descrizione testuale, all'immagine grafica, si possono e si dovrebbero adoperare entrambi (alt e title) per il browser IE avrebbe comunque priorità l'attributo title.

<img src="web-link.gif" alt="descrizione con alt" title="descrizione con title" />

descrizione con alt

Se la nostra immagine non si trovasse nella stessa cartella dove c'è il file che la richiama dovremo necessariamente farla precedere dal "path", cioè specificare il percorso che identifica la sua posizione all'interno del nostro PC, questo potrebbe essere anche un URL valido, cioè un indirizzo di un sito Internet che la contiene, in questo caso però l'immagine sarà visibile soltanto nel caso in cui ci si trovi collegati alla rete internet.

Questi alcuni probabili validi percorsi:

<img src="nome_cartella/weblink.gif" />

<img src="http://www.web-link.it/weblink.gif" />

<img src="../nome_cartella/weblink.gif" />

Quei due punti ../ nell'ultimo esempio servono per dire al browser di tornare indietro di una cartella, lì troverà l'immagine specificata.

Se vengono specificate le dimensioni dell'immagine, il browser sarà molto più rapido nel generare tutta la pagina, per cui sarebbe opportuno inserirle sempre. Per farlo si adoperano i due attributi in lingua inglese width per la larghezza ed height per l'altezza.

<img src="web-link.gif" alt="Logo grafico di web-link" width="165" height="120"/>

I numeri 165 e 120 sono pixel, l'unità di misura per le dimensioni dell'immagine. E' anche possibile specificare se l'immagine deve avere un bordo perimetrale e di quale spessore; per ottenere questo si adopera l'attributo: border seguito dal numero dello spessore, è ammesso anche valore zero nel caso in cui non si volesse alcun bordo come negli esempi sopra.

Avrete certamente notato che tutti i vari attributi restano all'interno delle parentesi angolari,<queste> potrebbero essere disposti anche in ordine diverso da quello che ho adoperato io a patto che sia rispettata la corretta sintassi e per sintassi si intende: spazio fra un parametro e l'altro, segno di = uguale, le virgolette " (doppi apici) " la chiusura /> del tag img.

In xhtml strict non è ammesso specificare il tag immagine al di fuori di un elemento blocco o di un contenitore on line come: paragrafo, titoli, tabelle. ecc.ecc.

Ci sono molti altri attributi che potrebbero essere inseriti allo stesso modo, vi rimandando alla  guida HTML nel caso si volesse conoscere l'elenco completo.

I fogli di style introducono molti nuovi parametri per la gestione ed il posizionamento delle immagini e gestiscono alcuni di quelli tradizionali, per esempio è possibile specificare le dimensioni in em in modo che varino col variare delle dimensioni del testo impostate dall'utente, o in percentuale % in modo che la variazione dipenda dalla risoluzione grafica e dalle dimensioni della finestra del browser lasciando a questo il compito di calcolare le dimensioni mantenendo le giuste proporzioni. Aggiungete il codice sotto al vostro foglio di style esterno:

img#ridimensiona { width: 80%; }

E' stato creato un ID dal nome ridimensiona associato al tag img, le dimensioni di questo id sono 80%, adesso richiamando questo ID l'immagine sarà visualizzata con dimensione 80% della finestra che la incorpora. Un esempio chiarirà meglio la funzione del codice css riportato sopra, su questa pagina è possibile vederlo in azione.

Il suo richiamo nel codice xhtml dovrà essere fatto in questo modo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title> Titolo della mia pagina Web</title>
<link rel="stylesheet" type="text/css" href="foglio.css" />
</head>
<body>
<p>
<img id="ridimensiona" src="web-link.gif" alt="Logo grafico di web-link" / >
</p>
</body>
</html>

Nota: il nome dell'immagine deve essere scritto esattamente come è realmente, rispettando cioè eventuali maiuscole/minuscole/spazi, questo perché a differenza di windows che non farebbe alcuna distinzione, una volta trasferito il lavoro sul server web l'immagine di nome Web-link.gif sarà considerata un'immagine diversa dalla stessa immagine che si chiamasse WEB-link.gif (differenza dovuta alle maiuscole e minuscole).

Esercitatevi per capire questo meccanismo, la guida CSS potrà essere di particolare aiuto per i principianti. Nella prossima lezione vedremo come inserire le immagini col testo e come posizionarle all'interno dello schermo.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Di Redazione

La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

Lascia un commento

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

NON seguire questo link o sarai bannato dal sito!