Immagini in HTML

Immagini vengono aggiunte a pagine Web in HTML tramite il tag <img>.

L'uso della grafica rende pagine web visivamente attraenti. Immagini aiutano a trasmettere meglio l'essenza e il contenuto del documento Web.

Con HTML-tag <map> e <area> puoi trasformare la tua immagine in una mapa interattiva con regioni attive e cliccabili.

Come inserire immagini in un documento HTML 

1. Tag <img>

Le immagini vengono aggiunti alle pagine Web utilizzando il tag <img> è un tag singolo, quindi  quello di chiusura non serve. Dal momento che tag <img> rapresenta un elemento inline, si consiglia di posizionarlo all'interno di un elemento di blocco, per esempio, <p> o <div>.

Tag <img> ha un attributo obbligatorio  src, il cui valore è l'indirizzo dell'immagine, e un altro attributo consigliato è alt, per esempio:

<img src="/image.png" alt="Imagine della casa">

Per il tag <img> sono disponibili i seguenti attributi:

Attributo Descrizione
alt Attributo alt Rappresenta un testo alternativo per l'immagine. Aappre al posto di visualizzazione d'immagine prima che esso sara completamente caricata oppure nel caso della sua mancanza, nonche è visualizzata come un suggerimento al passagio del puntatore sopra l'immagine.
Possibile valore : testo.
crossorigin Attributo crossorigin Esso consente di caricare immagini da altre risorse da domini diversi utilizzando CORS-richieste. Immagini sono caricate sulla pagina con CORS-richieste possono essere riutilizzati.
height Attributo height indica l'altezza del immagine.
Valori consentiti: px/%.
ismap Attributoismap significa che l'immagine fa parte del immagine- mappa, che si trova sul server (mappa di immagine una immagine con aree interattive ). Cliccando sull'immagine coordinate della mappa vengono trasmessi al server sotto forma di una stringa di query di un indirizzo URL. Attributo ismap è consentito solo se la voce <img> è un discendente di un elemento<a> con attributo reale действительным атрибутом href.
Valori consentite : ismap.
src Attributo src Specifica l'URL-indirizzo dell'immagine.
usemap Attributo usemap determina l'immagine come la mappa immagine. Il valore deve iniziare con il canceletto #.
width Attributo width indica la larghezza dell'immagine.
Valori consentite: px/%.

animatedDude

video prevui

1.1. Indirizzo dell'immagine.

Indirizzo d'immagine può essere specificato completamente (URL completo), per esempio:
url (http://anysite.it/images/anyphoto.png)

O tramite un percorso relativo dalla radice di un documento o di un sito:
url (../ images / anyphoto.png) - un percorso relativo al documento,
url (/images/anyphoto.png) - un percorso relativo alla cartella principale.

Vediamo subbito cosa significa ogni simbolo del codice sopra:
../ - significa di salire di un livello rispetto la cartella principale,
images / - entrare nella cartella con le immagini,
anyphoto.png – indica il file di immagine.

1.2. Dimensioni immagine

Senza un indicazioni di dimensioni  immagine viene visualizzata sulla pagina in dimensioni reali. E' possibile modificare le dimensioni dell'immagine, modificando valori dei attributi  larghezza e altezza. Se è indicato solo un valore il secondo sarà calcolato automaticamente per mantenere le proporzioni della figura.

1.3. Formati di file grafici

Formato JPEG (Joint Photographic Experts Group). Immagini JPEG sono ideali per foto, possono contenere milioni di colori diversi. Questo formato comprimere immagine meglio di GIF, ma sul  testo e grandi aree di colore  possono apparire delle macchie.

Il formato GIF (Graphics Interchange Format). Ideale per la compressione di immagini dove è un'area grande con un colore solido, come loghi. Il GIF-files consentono di impostare uno dei colori come  trasparente, consentendo visualizzazione dello sfondo della pagina web. Inoltre, i GIF-files possono includere semplice animazione. Le GIF-immagini contengono solo 256 colori, il motivo per cui le immagini di questo formato appaiono di  colori strani  e irrealistici come poster.

Il formato PNG (Portable Network Graphics). Esso poside le migliori caratteristiche di formati GIF e JPEG. Esso contiene 256 colori e permette di avere un colore trasparente, nello stesso tempo  comprime le immagini meglio rispetto formato  GIF.

Format APNG (Animated Portable Network Graphics). formato di immagine in base al formato PNG. Esso consente di memorizzare l'animazione, e supporta la trasparenza.

Formato SVG (Scalable Vector Graphics). SVG- disegno contiene una serie di figure geometriche, descritte in  forma del codice  XML: come la linea  ellisse, poligono etc. Supporta sia la grafica statici che animazione. Il set di funzionalità include varie maschere, trasformazioni alpha, effetti filtro, l'utilizzo di modelli. Le immagini in formato SVG possono essere modificate in termini di dimensioni, senza compromettere la qualità.

Formato BMP (Bitmap Picture ). Rappresenta immagine bitmap non compresso (originale) che è composta da una griglia rettangolare di pixel. Bitmap-file è costituito da un'intestazione, i dati della tavolozza e di immagine. L'intestazione contiene varie informazioni sulla immagini  (profondità di  pixel, altezza, larghezza e numero di colori).. La profondità di colore in questo formato può essere 1, 2, 4, 8, 16, 24, 32, 48 bit per pixel.

ICO (Windows icon ) formato. Il formato del file di icone di archiviazione in Microsoft Windows. Inoltre, Windows icon , viene utilizzato come icona sui siti web su Internet. Di solito potete vedere questo formato d'immagine accanto a l'indirizzo del sito nel browser. Unoi fail ICO puo contenere  include una o più icone, la dimensione e il colore di ciascuna delle quali è specificato separatamente. La dimensione delle icone può essere qualsiasi, ma le icone più utilizzati sono quadrati con i  lati da 16, 32 e 48 pixel.

2. Il tag <map>

Il tag <map> è usato per rappresentare le immagini grafiche in forma di carte con regioni attive. Regioni attive cambiano l'aspetto del cursore quando ci si passa con il mouse. Cliccando con il mouse sopra le regioni attive, l'utente può navigare ai documenti correlati.

Per il tag <map> è disponibile  attributo<map>, che specifica il nome della mappa in formato digitale . Il valore dell'attributo name per il tag <map> deve corrispondere al nome dell'attributo  usemap del elemento <img>:

<img src="/url" usemap="#nome della mappa ">
<map name="nome della mapa ">
...
</map>

L'ellemento <map> contiene una serie di elementi <area>, che indicano le aree interattive sulla mappa dell'immagine.

3. Il tag <area>

Il tag <area> descrive una sola regione attiva all'interno di una mappa d' immagine sul lato client. L'elemento non ha tag di chiusura. Se una regione attiva sovrappone l'altra, sara attivo il primo collegamento nell'elenco delle aree .

<map name="nome della mappa">
<area attributti -coordinate>
</map>

Attributo Descrizione
alt Specifica il testo alternativo per l'area attiva della mappa.
coords Specifica la posizione del campo sullo schermo. Le coordinate sono specificati in unità di lunghezza, separate da virgole:
per il cerchio — coordinate del centro e il raggio del cerchio;
rettangolo - le coordinate del angoli superiori sinistro e inferiore destro;
Poligono - coordinate dei vertici del poligono nell'ordine corretto, si consiglia anche di indicare come le ultime coordinate quelli i primi per chiudere cosi la figura.
download Specifica l'attributo href dicendo al browser che ellemento deve essere caricato quando l'utente clicca sul link, invece di, ad esempio, pre-apertura di esso (come PDF). Specificando il nome dell'attributo, dimo anche il nome all'oggetto che viene caricato. È possibile utilizzare l'attributo senza un valore.
href Specifica l'URL-indirizzo per il collegamento. Puo essere specificato in forma di un collegamento assoluto o relativo.
hreflang Specifica la lingua del documento legato al aria. Può essere usato solo insieme con l'attributo href. I valori accettati - un acronimo composto da una coppia di lettere che identificano la lingua.
media Determina i tipi di dispositivi per le quali sarà ottimizzato il fail. Il valore può essere qualsiasi media richiesta.
rel Commenta attributo href d'informazioni sul rapporto tra il documento corrente e il documento associato. I valori accettati:
alternate — link alla versione alternativa del documento (ad esempio, alla versione della pagina stampata, tradotta o specchio).
author — un riferimento all'autore del documento.
bookmark — URL permanente utilizzato per i segnalibri.
help — link a FAQ.
license — un riferimento per le informazioni sul copyright al documento Web.
next/prev — indica il rapporto tra varie URL. Attraverso questo partizionamento Google può stabilire che le relative pagine sono legati in una sequenza logica.
nofollow — vieta al motore di ricerca per seguire i link in questa pagina o un determinato link.
shape Specifica la forma della regione attiva sulla mappa e le sue coordinate. Esso può assumere i seguenti valori:
rect — area attiva di forma rettangolare;
circle — area attiva in forma di un cerchio;
poly — area attiva sotto forma di un poligono;
default — area attiva occupa l'intera area dell'immagine.

4. Esempio di creazione di una image map

Guarda il video:animatedDude

video prevui

Letto 925 volte
Altro in questa categoria: « HTML5 audio Forme nel HTML5 »

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso