PCdaZERO.it - Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

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".
24-cartella-web (15K)
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"
26-objects (3K)
4 - clicca sul comando "Insert Image" (seconda icona da sinistra)
27-insert-image (3K)
5 - dalla finestra di dialogo apertasi, clicca sul pulsante "Add".
28-add (5K)
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".
29-cartella-immagini (14K)
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>
...
25-img (17K)


Esercitati ad inserire altre immagini. Ad esempio salva un'immagine rappresentativa della Francia ed inseriscila sotto il codice "<h3>Francia</h3>"







Link sponsorizzati