CREARE SITI WEB in HTML e CSS > Inserire un'immagine - Il TAG <img>
Vediamo ora come inserire un'immagine nella pagina web.
Fondamentale è copiare l'immagine nella stessa cartella o in una sottocartella in cui risiede il file index.html
Quindi, per mantenere ordinato il tuo sito web,
- crea una cartella dove è ubicato il file index.html e nominala "immagini".
Copia all'interno della cartella "immagini", le immagini o foto che vorrai pubblicare sul tuo sito web.
Prendiamo ad esempio qualche immagine da internet.
1 - Collegati al link www.bigfoto.com/
2 - dal menu orizzontale scegli la categoria e in seguito le foto da scaricare
3 - clicca con il tasto destro sopra la foto da salvare
4 - dal menu a discesa clicca su "Salva immagine con nome"
5 - e salvala all'interno della cartella siti-web, dentro la cartella immagini.
Per inserire un'immagine all'interno di una pagina web,
1 - apri il file con HTML-Kit (ad esempio citta-nel-mondo.html)
2 - posiziona il cursore nel "punto giusto" (ad esempio sotto il codice <h3>Italia</h3>)
3 - clicca sulla scheda "Objects"
4 - clicca sul comando "Insert Image" (seconda icona da sinistra)
5 - dalla finestra di dialogo apertasi, clicca sul pulsante "Add".
6 - trova la cartella "immagini" del tuo sito web locale, selezionala e clicca su OK
7 - fai un doppio clic sull'immagine da inserire (sotto la voce "File:").
Oppure,
7b - fai un solo clic sull'immagine da inserire
8b - verifica se l'anteprima dell'immagine è quella desiderata
9b - clicca su Ok, per confermare.
Ecco come si presenta il codice dopo l'inserimento di un'immagine:
<img alt="colosseo-roma (3K)" src="immagini/colosseo-roma.jpg" height="95" width="150" />
Quindi, l'elemento per l'inserimento di immagini o foto in una pagina web è <img />
Per indicare quale foto visualizzare si deve necessariamente inserire l'attributo "src".
In questo caso, il file della foto è "colosseo-roma.jpg" e si trova all'interno della cartella immagini; e tale percorso viene indicato all'interno dell'elemento <img /> :
<img src="immagini/colosseo-roma.jpg" />
Gli altri attributi (alt="..." ; height="..." ; width="...") non sono strettamente necessari e omettendoli, la foto viene comunque visualizzata..
Più avanti vedrai come utilizzarli.
| codice HTML | risultato pagina web |
|
... <body> <h1>Le città nel mondo</h1> <h2>Europa</h2> <h3>Italia</h3> <img src="immagini/colosseoroma.jpg" /> Roma, Milano, Venezia<br /> <h3>Francia</h3> ... |
|
Esercitati ad inserire altre immagini. Ad esempio salva un'immagine rappresentativa della Francia ed inseriscila sotto il codice "<h3>Francia</h3>"