Le Immagini - Tutto per la costruzione delle tue pagine web-

Le Immagini

Abbiamo visto nella lezione precedente, come creare la nostra prima pagina web, abbiamo inserito anche del testo, ma in una "bella" pagina web che si rispetti non possono mancare le immagini, ed è proprio di queste che ci occuperemo in questa lezione.

Aprite il vostro editor, qualunque esso sia, 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:

Dove xxxxxxxxxxx è il nome della vostra immagine e yyy la sua estensione. Le immagini consentite dal linguaggio html sono .gif .jpg e .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ù 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 superveloci ADSL ci sono ancora molti utenti che accedono alla rete con modem analogici da 56Kb, fate dunque in modo da evitare nel modo più assoluto queste immagini pesanti, ed anzi, al contrario, preoccupatevi che queste siano le più "leggere possibili". Il formato .png nato ultimamente più per problemi legali che non per reali esigenze tecniche, è adoperato molto raramente in quanto non risulta poi così "ottimale", ma questo è un mio modesto parere per altro molto personale.

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

<html>
<head>
</head>
<body>
<p>Questa è la mia prima pagina web </p>

</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, quindi non serve mettere </img>. Noterete anche che dopo la parola chiave: img, che indica appunto "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?

Perfetto, se adesso salvate il vostro 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 "mypic.gif" e che si trovi nella stessa cartella dove si trova il file html, cioè questo file che avete appena modificato e salvato.

A questo punto vi consiglio di lasciare perdere l'immagine mypic.gif e procuratevi una qualsiasi immagine vostra, quella che preferite, a patto che sia in uno dei due formati gif o jpg, mettetela nella stessa cartella dove avete il file html e cambiate il nome all'interno di SRC=" " inserendo il nome della vostra immagine, fatto? Adesso portatevi una riga sotto il tag che è servito per inserire l'immagine e scrivete: La mia prima pagina web ha finalmente anche la sua prima immagine.

Se avete fatto tutto quanto correttamente, la vostra pagina comincia a prendere consistenza, con la stessa procedura potete inserire tutti i testi e le immagini che vorrete, ricordandovi sempre di non superare mai certe dimensioni. Tante piccole immagini vengono sommate e potrebbero 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 fotografiche.

Prima di proseguire vediamo cosa potremo aggiungere al tag: <img src="mypic.gif">

Intanto se la nostra fotografia non si trovasse nella stessa cartella dove c'è il file che la richiama, dovremo necessariamente farla precedere dal "path" cioè il percorso che specifica appunto la sua posizione all'interno del vostro 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 siate collegati alla rete internet.

Questi alcuni probabili validi percorsi:

<img src="nome_cartella/mypic.gif">
<img src="http://www.mio-sito.it/mypic.gif">
<img src="../nome_cartella/mypic.gif">

Se specifichiamo le dimensioni dell'immagine, aiuteremo il browser a visualizzare tutta la pagina con molta più rapidità, per cui sarebbe opportuno inserire sempre queste informazioni. Per farlo si adoperano i due termini in lingua inglese per larghezza ed altezza:

I numeri 64 e 128 sono pixel, l'unità di misura dell'immagine stessa, rispettivamente: width per la larghezza, e height per l'altezza. E' anche possibile specificare se l'immagine deve avere un bordo e di quale spessore; per ottenere questo si adopera l'attributo: border dove è ammesso anche il valore zero nel caso in cui non si volesse alcun bordo. Attenzione: se non viene specificato alcun border, nel senso che l'attributo viene omesso sarà assunto per default un bordo impostato ad 1 e spesso oltre che fastidioso risulta non voluto, per questo che conviene inserirlo sempre.

Avrete certamente notato che tutti i vari attributi restano all'interno delle parentesi angolari, <queste> e potrebbero essere messi anche in ordine diverso da quello che ho adoperato io purché ne sia rispettata la corretta sintassi, e per sintassi intendo il segno di = uguale e le virgolette ", anzi i doppi apici".

alt = nome dell'immagine. Questo nome viene visualizzato passando sull'immagine stessa con il puntatore del mouse ed è ritenuto molto importante per chi naviga con la visualizzazione delle immagini disabilitata o per i non vedenti.

align = Allineamento dell'immagine: destro, sinistro, nel mezzo, sopra, sotto. Tutti questi termini vanno scritti con l'equivalente termine in lingua inglese: right, left, middle, top, bottom.

hspace = Spazio laterale destro e sinistro dall'eventuale testo, da un'altra immagine o dal bordo di una tabella se inserita al suo interno. Questo valore è espresso in pixel.

vspace = Spazio laterale sopra sotto dall'eventuale testo, da un'altra immagine o dal bordo si una tabella se inserita al suo interno. Questo valore è espresso in pixel.

Gli attributi inseribili all'interno del tag IMG sono molti di più, ma visto il loro utilizzo e considerato che queste lezioni sono destinate ai principianti, credo che quelli citati siano più che sufficienti per coprire la maggior parte delle necessità.

Questo un esempio di un richiamo ad un'immagine adoperando tutti gli attributi fino ad ora descritti.

Da notare che fra un attributo e l'altro si lascia uno spazio vuoto.

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 l'immagine di nome mypic.gif sarà considerata un'immagine diversa dalla stessa immagine che si chiamasse invece mypic.gif (differenza dovuta alle maiuscole).

Una difficoltà che si incontra quando si vogliono inserire delle immagini è il loro posizionamento preciso all'interno della pagina stessa, gli attributi di allineamento infatti non bastano per questo posizionamento, essi sono sempre riferiti al testo, ad un'altra immagine o ad una tabella; ed è proprio una tabella che vi consiglio di adoperare per impaginare con una certa precisione non soltanto le vostre immagini ma praticamente tutto ciò che serve per comporre l'intera pagina.

Anche per questa lezione credo possa bastare... Avete così imparato ad introdurre testi ed immagini, nella prossima lezione conosceremo i links, la vera forza delle pagine web.

Lezione Precedente

Lezione Successiva