CREARE SITI WEB in HTML e CSS > Inserire un'immagine - Il TAG <img>
CREARE UNA CARTELLA IMMAGINI
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"
Apri l'editor Visual Studio Code
- seleziona la cartella del tuo sito web
- clicca sul pulsante "Nuova cartella"
- digita il nome della cartella, ad esempio digita immagini- premi invio per confermare
SALVARE LE IMMAGINI NELLA RELATIVA CARTELLA
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 pixabay.com
2 - 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 "SWN1", dentro la cartella immagini.
INSERIRE UN'IMMAGINE NELLA PAGINA WEB
Per inserire un'immagine all'interno di una pagina web,1 - fai un clic sulla cartella dove risiede l'immagine
2 - fa clic con il tasto destro sopra il nome dell'immagine da inserire
Apparirà un menu a discesa.
3 - scegli con un clic la voce "Copia il percorso relativo"
- Ora apri con un clic il file della pagina web (ad esempio "citta-nel-mondo.html")
- fai un clic sul punto in cui desideri inserire l'immagine
- digita img e premi invio da tastiera
Apparirà il codice già preconfenzionato per l'inserimento dell'immagine; ovvero il seguente:
<img src="" alt="">
E se noterai vedrai il cursore/focus tra i doppi apici dell'attributo src (che sta per source o sorgente).
Ebbene ora ti basterà incollare il codice che avevi copiato precedentemente.
- premi la combinazione di tasti CTRL+V per incollare in modo veloce.
Otterrai così il seguente codice (da esempio)
<img src="immagini\venezia.jpg" alt="">
Anche se non strettamente necessario,
completa inserendo nell'attributo "alt" una descrizione dell'immagine
in questo modo:
<img src="immagini\venezia.jpg" alt="canale di Venezia">
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 è "venezia.jpg" e si trova all'interno della cartella immagini; e tale percorso viene indicato all'interno dell'elemento <img> :
<img src="immagini\venezia.jpg" />
Altri attributi come:
alt="..." ; height="..." ; width="..."
non sono strettamente necessari e anche se ommessi, l'immagine viene comunque visualizzata..
Più avanti vedremo come utilizzarli.
| codice HTML | risultato pagina web |
|
... <body> <h1>Le città nel mondo</h1> <h2>Europa</h2> <h3>Italia</h3> <img src="immagini\venezia.jpg" alt="canale di Venezia"> 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>"
Ti potrebbe interessare anche...
Fare calcoli e creare elenchi con
- Come creare un blog gratis
- Come creare siti web gratis
- Gestisci le tue foto con Picasa
- Naviga veloce con Google Chrome
- Scarica video e musica con Free Studio
Frasi celebri
“Se non lo sai spiegare in modo semplice, non l'hai capito abbastanza bene” (Albert Einstein).