Tag "Img"   

<img src="pippo.gif" alt="Pippo" width="150" height="52">

attributi:   attributi globali || attributi di evento || crossorigin || height || ismap || longdesc || src

usemap || width || align || border || hspace || vspace

Video guide xx - xx

 

 

Esempio 58: grazie al float l'immagine si posiziona a sinistra del testo. La proprietà float viene utilizzata per posizionare e formattare il contenuto, ad es. lascia che un'immagine fluttui a sinistra nel testo in un contenitore. Il contenitore è delimitato dal div, gli stili per il div sono collegati ad una classe (wrapper).  Risultato

Esempio 41: diverse posizioni dipendono dal rapporto di nidificazione o meno dei 2 tag "P" e "IMG". Nel primo caso i 2 tag sono separati - nel secondo l'immagine è dentro al paragrafo (inizio paragrafo) - nel terzo l'immagine è dentro al paragrafo (metà paragrafo) - nel quarto l'immagine è tra due paragrafi. Risultato

Esempio 36: uso degli attributi width ed height per modificare altezza e larghezza di una immagine. Risultato

Esempio 32: utilizzare un elemento <figure> per contrassegnare una foto in un documento. L'elemento <figure> può contenere anche un <figcaption>. Il tag <figcaption> definisce una didascalia per un elemento <figure>.  L'elemento <figcaption> può essere posizionato come primo o ultimo elemento dell'elemento <figure>.  Risultato

Esempio 26: usiamo una immagine come link che punta ad un altra pagina del sito.  Risultato

Esempio 13: diversi tag "meta" inseriti nella sezione "head" della pagina ... proprio come nell'esempio 3 ma qui salta nella stessa pagina dell'esempio 3 ... quindi poi abbiamo un doppio salto !! Usato attributo "http-equiv" che permette di saltare in una nuova pagina web dopo tot secondi che si impostano con altro attributo "content". Risultato

Esempio 12: diversi tag "meta" inseriti nella sezione "head" della pagina ... uno di questi con attributo "http-equiv" permette di saltare in una nuova pagina web dopo tot secondi che si impostano con altro attributo "content". Nella pagina è anche presente una immagine "gif-animata" che intrattiene il visitatore fino al momento del "salto". Risultato

Esempio 03: vediamo una pagina Html Css semplice semplice ... intestazione paragrafo ed una immagine + paragrafi rossi.  Risultato

Esempio 02: vediamo una pagina Html semplice semplice ... struttura di base Html + intestazione paragrafo e una immagine.  Risultato

Esempio 09: creiamo un link (tag "a") usando una immagine .  Risultato