Sommario
Ci sono momenti in cui non tutto è per generare un modulo all'interno dei nostri documenti HTML, molte volte dobbiamo includere altri elementi come immagini all'interno di alcuni tag per modellare la nostra pagina, per questo vedremo in questo tutorial come farlo e le diverse funzionalità inclusa in se stessa.Per visualizzare un'immagine all'interno del nostro documento HTML, dobbiamo usare l'elemento img che ha i seguenti attributi:
- src
- alt
- altezza
- larghezza
- mappa d'uso
- ismap
In questo momento ci concentreremo sui primi due attributi, src sì alt; src ci permette di dare il percorso da cui il browser cercherà l'immagine, può essere un percorso relativo o anche un URL, l'attributo alt ci permette di inserire un testo, questo testo verrà mostrato solo quando l'immagine non è disponibile, sia che non sia nel percorso in cui è stato specificato nella src o anche il browser non può interpretarlo.
Vediamo un esempio di come includere un'immagine all'interno del nostro documento HTML:
Esempio Ecco una forma comune per rappresentare le tre attività in un triathlon.La prima icona rappresenta il nuoto, la seconda rappresenta il ciclismo e la terza rappresenta la corsa.
In questo esempio vediamo anche altri due attributi, il larghezza e il altezza Questi, come indicano i loro nomi, servono a regolare la larghezza e l'altezza dell'immagine, con questo possiamo garantire che l'immagine rimarrà all'interno delle dimensioni da noi stabilite, anche se l'immagine è più grande di quella verrà ridimensionata, senza Tuttavia, bisogna fare attenzione poiché l'immagine avrà lo stesso peso, quindi è consigliabile posizionare l'immagine già modificata della dimensione richiesta e che la nostra pagina si carichi più velocemente.
Un altro uso abbastanza comune è quello di utilizzare un'immagine come collegamento ad altre pagine, sia posizionando l'icona di una squadra, ad esempio una freccia successiva, ovviamente, ora con i nuovi framework CSS questo potrebbe essere meno comune, comunque vediamo come è fatto per avere questa opzione all'interno del nostro portafoglio di strumenti HTML.
Per incorporare l'immagine posizioneremo semplicemente l'elemento img all'interno di un elemento che fa riferimento a una pagina come:
Esempio Ecco una forma comune per rappresentare le tre attività in un triathlon.La prima icona rappresenta il nuoto, la seconda rappresenta il ciclismo e la terza rappresenta la corsa.
Con ciò otteniamo che l'immagine sia ora il nostro collegamento come vedremo nella schermata successiva l'immagine non cambia nel modo in cui viene mostrata:
