html inserire immaginiSpesso chi gioca nel mondo dei siti internet trova difficoltà con il codice html, è per questo che abbiamo pensato di inserire delle mini guide che spiegano i punti principali del codice html, o almeno i codici più utilizzati.

Iniziamo con il vedere come inserire un immagine con il codice html. Innanzi tutto è importante vedereil formato dell’immagine che volete caricare sul vostro hosting. L’html non legge tutti i formati di immagini che troviamo in giro, per questo è importante ricordare che possiamo caricare i seguenti tipi di file immagine:

- GIF (Graphic Interchange Format) Solitamente si utilizza per file di icone o di piccolissimi banner perchè questo tipo di file non può superare i 256 colori.

- JPG o JPEG  (Joint Photographic Experts Group) Si tratta di un formato davvero comune che viene utilizzato per la maggior parte delle immagini o foto.

– PNG  (Portable Network Graphic) Anche questo è un formato molto comune però possiamo dire che è un tipo di file molto più potente del JPG, infatti supporta caratteristiche non supportate da quest’ultimo, come la trasparenza nelle immagini. In più permette di giocare sulla qualità e sulla pesantezza delle immagini potendo ridurne il numero di colori o di sfumature nel momento del salvataggio.

Ora che abbiamo visto quali formati possiamo caricare non ci resta che uppare l’immagine ( caricarla sul nostro spazio hosting). Adesso dobbiamo dire alla nostra pagina html di tirare su l’immagine dallo spazio hosting e di mostrarla sulla nostra pagina. Come facciamo questo? La stringa di codice che dobbiamo utilizzare è questa:

<img src="http://miosito.it/miaImmagine.gif"

     alt="testo" />
Vediamo con precisione cosa significano le varie parti del codice:
- img   È il nome del tag per inserire le immagini
- src    Non è altro che lka nostra fonte da dove dobbiamo prendere un immagine, ovvero l’indirizzo di dove abbiamo caricato l’immagine sull’hosting.
- alt    È il testo che comparirà se il browser non riesce a caricare l’immagine, in più è molto utile per i motori di ricerca

Sarebbe una buona abitudine inserire nel codice la larghezza (width) e l’altezza (height) dell’immagine; questo perchè se l’immagine è molto pesante il browser caricherà lentamente la pagina che comparirà con il ritmo del caricamento dell’immagine. Inserendo invece già altezza e larghezza stiamo dando un’idea al browser delle dimensioni della foto, per cui potrà caricare il resto della pagina lasciando lo spazio necessario per l’immagine.

<img src="http://miosito.it/miaImmagine.gif" width="224" height="69" />
Si può inserire anche un link dove deve puntare l’immagine nel caso venga cliccata. Di default le immagini con link hanno un bordo intorno blu o del colore specificato. Se vogliamo che la nostra immagine non abbia bordo lo dobbiamo inserire = “0″. Ecco il codice per un link sull’immagine senza però avere nessun bordo.
<a href="http://miosito.it/miaImmagine.gif" target="_blank"><img src="logo.gif" border="0" width="224" height="69" /></a>