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 immagini. Ricordatevi che dimensioni esagerate significa anche peso esagerato; sulla rete un'immagine da 200 Kb spesso induce il visitatore ad abbandonare il sito prima ancora che questa sia stata completamente visualizzata, ricordatevi anche che nonostante le attuali linee a larga bande super veloci (ADSL) ci sono ancora molti utenti che accedono alla rete con modem analogici da 56 Kb, fate dunque in modo da evitare sempre immagini pesanti ed anzi, al contrario, preoccupatevi che queste siano le più "leggere possibili".

Il formato .png nato abbastanza recentemente più per problemi legali che non per reali esigenze tecniche, è adoperato raramente in quanto non risulta poi così "ottimale", ma questo è un mio modesto parere per altro molto discutibile.

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>

Notate la sintassi del comando img che è leggermente diversa da quella adoperata per inserire il testo con <p>, infatti 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 anche il file html, cioè questo 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 della vostra immagine.

Adesso portatevi una riga sotto il tag che è servito per inserire l'immagine e 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 che descrive l'immagine nel caso in cui questa 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 e 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 adoperare entrambi (alt e title) per i browser come 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è il percorso che specifica 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" />

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 dove è ammesso anche valore zero nel caso in cui non si volesse alcun bordo.

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%; }

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 da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.


=> Vuoi anche tu una pagina web gratis? Clicca qui! <=