Tag: alt immagini html

Html: le immagini  

realizzato da , il 28 mag. 2011, categoria Html/Css

Html/Css
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

Fino ad ora si è concentrata l’attenzione alla formattazione del testo, quindi paragrafi, titoli e contenitori di testo, consapevoli che il moderno web non mette a disposizione solo questo tipo di informazioni.
Siamo lontani dai siti web dei primissimi anni ’90, quando le pagine erano composte totalmente da testo, oggi è impensabile non visualizzare in una pagina web un’immagine, un video o qualche altro elemento grafico.
Per inserire un’immagine in una pagina html si utilizza il tag <img>. La sintassi per inserire un’ipotetica immagine è:

<img src=‘immagini/foto.jpg’ />

Il tag <img> si compone essenzialmente di un attributo obbligatorio src, che indica l’url dell’immagine da visualizzare.
In fase di visualizzazione quando il browser incontra il tag img, analizza l’url associato e carica l’immagine, ponendola all’interno della pagina dove questa è stata definita dallo sviluppatore.
Il seguente codice HTML descrive in maniera completa l’inserimento di un immagine in una pagina html:

<html>
     <head>
     <title>IMMAGINI</title>
     </head>

     <body>

          <div>La nostra prima immagine : </div>

          <!-- INSERISCO L’IMMAGINE logo.jpg -->
          <img src=‘img/logo.jpg’ />

     </body>
</html>

Il risultato nel browser è il seguente:

Immagini html

Non avendo specificato allineamento e altri attributi, l’immagine viene stampata a sinistra e dopo l’elemento che lo precede nel codice (nel nostro caso il div che contiene il testo).

I formati per le immagini web.

Nonostante non siano definiti in maniera precisa i formati ammissibili per le immagini è bene sottolineare che nella scelta del formato va tenuta in grande considerazione la pesantezza dell’immagine (espressa in byte).
I formati più indicati per il web sono sostanzialmente tre:

Formati immagini html

Indipendentemente dal formato utilizzato è importante ricordare che abusare delle immagini incide negativamente sulle prestazioni del browser. Difatti caricare una pagina html con molte immagini richiede un tempo maggiore rispetto ad una pagina con testo e poche immagini.
Una volta scelte le immagini da inserire queste vanno ottimizzate, regolando la dimensione e il formato. La regola alla quale attenersi per scegliere il formato corretto è riassunta di seguito:

  • se bisogna inserire una foto allora scegliamo il formato jpg;
  • se bisogna inserire un logo o un disegno scegliamo il formato gif o png.

L’attributo ALT e le regole di accessibilità.

Un aspetto importante di cui tener conto è che non tutti i browser visualizzano le immagini presenti in una pagina html, o ad esempio per scelta un utente potrebbe non visualizzare le immagini.
Alcuni utenti, quali gli ipovedenti, non sono in grado di mettere a fuoco del tutto le immagini inserite nelle pagine web, i non vedenti sono del tutto esclusi anche da questa pur limitata possibilità; altri ancora utilizzano browser che non supportano immagini e interpretano solamente i testi contenuti nelle pagine stesse.
Pensare di creare pagine web alternative a quelle che utilizzano le immagini significherebbe di fatto discriminare tali utenti da una completa fruizione di tutto ciò che di positivo spesso riserva la rete.
Fornire invece un testo equivalente per le immagini garantisce in tutti i casi sopraelencati l’accessibilità, oltre a essere utile indistintamente a tutti gli utenti: si tratta in ogni caso di un elemento irrinunciabile per assicurare sempre e comunque accessibilità alle immagini inserite in una pagina web.

L’attributo ALT permette appunto di definire un testo da visualizzare in assenza dell’immagine.

<img src=‘img/logo.jpg’  alt=‘Il logo del corso HTML’ />

Seppur non obbligatorio come attributo, l’uso dell’attributo alt è opportuno sulle principali immagini incluse in una pagina, in modo particolare nel caso in cui l’immagine rappresenta un prodotto, un servizio, o comunque un elemento relativo alla pagina.
Utilizzando l’attributo alt si potrà notare come in Internet Explorer il testo venga visualizzato anche in presenza dell’immagine qualora l’utente trascini su di essa il puntatore del mouse; negli altri browser invece il testo viene visualizzato solo in assenza dell’immagine.

Altezza e larghezza delle immagini.

Gli attributi width e height possono essere usati per impostare l’altezza e la larghezza di una immagine. Per impostare l’altezza e la larghezza viene usato, solitamente, un valore in pixel.
A differenza dei centimetri, i pixel sono unità di misura relative che dipendono dalla risoluzione dello schermo. Ad un utente con uno schermo ad alta risoluzione, 25 pixel possono corrispondere ad 1 centimetro, mentre gli stessi 25 pixel su uno schermo a bassa risoluzione possono corrispondere sullo schermo a 1.5 centimetri.
Se non vengono impostate l’altezza e la larghezza, l’immagine verrà inserita con le sue dimensioni originali. Bisogna comunque tenere in considerazione che il browser conosce le dimensioni di un’immagine solo nel momento in cui questa viene caricata completamente, in ogni caso è consigliabile indicare le dimensioni dell’immagine favorendo la realizzazione del layout al browser.
Gli attributi width e height possono inoltre essere utilizzati per scalare le immagini troppo grandi.

Il codice html sottostante descrive l’utilizzo degli attributi width e height:

<html>
     <head>
     <title>ALTEZZA E LARGHEZZA IMMAGINI</title>
     </head>
     <body>
     <div>Dimensione delle immagini : </div>

     <img src='img/logo.jpg' width='82px' height='200px' alt='Il logo del corso HTML!'/>
     <img src='img/logo.jpg' width='70px' height='170px' alt='Il logo del corso HTML!'/>
     <img src='img/logo.jpg' width='50px' height='150px' alt='Il logo del corso HTML!'/>

     </body>
</html>

Nel codice sono presenti tre immagini in sequenza con dimensioni diminuite di volta in volta.
Di seguito è mostrato il risultato:
Altezza e larghezza immagini
In definitiva la sintassi per impostare altezza e larghezza di un immagine è:

<img src=”‘immagine.jpg’” alt=”” width=”‘100px’” height=”‘100px’” />


Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:, , ,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑


Spazio Pubblicitario

Archivio

luglio: 2014
L M M G V S D
« ago    
 123456
78910111213
14151617181920
21222324252627
28293031  
Fabio Donatantonio - Salerno - Città di Castello (PG) - fabio@donatantonio.net



About me

Fabio Donatantonio Fabio Donatantonio nasce a Salerno il 17 Settembre 1983.
Cresce coltivando due grandi passioni: la musica e l'informatica.
... [continua]

Bing

Tutti gli articoli per categoria

Html/Css [35]

· CSS: pseudo-classi e pseudo-elementi
· CSS: selettori speciali
· CSS: i selettori (parte II)
· CSS: i selettori (parte I)
· CSS: sintassi di una regola CSS
· CSS: introduzione ai fogli di stile
· Html: bordi, margini e spaziatura
· Html: dimensione degli elementi
· Html: i colori e gli sfondi
· Html: altri campi di input
· Html: checkbox e radio button
· Html: le select
· Html: ulteriori campi di testo
· Html: i bottoni
· Html: i form
· Html: unione di celle
· Html: le tabelle
· Html: immagini come link e mappe
· Html: allineamento delle immagini e altri attributi
· Html: le immagini
· Html: realizzare un menu (esercizio guidato)
· Html: i segnalibri
· Html: i collegamenti ipertestuali
· Html: annidamento, indentazione e commenti
· Html: le entità
· Html: separatori ed elenchi
· Html: stile per il testo
· Html: i tag di uso frequente
· Validazione del codice HTML
· Il tag HTML, HEAD e META
· I documenti HTML
· Html: concetti preliminari
· Regole di progettazione ipertestuale
· Tipologie di Ipertesto
· Ipertesti, ipermedia e multimedialità

Java [30]

· Esercizio 30 – Semplice gioco del TRIS
· Esercizio 29 – Simulazione banca (ArrayList)
· Esercizio 28 – Implementazione di un portafoglio
· Esercizio 27 – Simulazione Casinò
· Esercizio 26 – Ricerca e conteggio di parole
· Esercizio 25 – Generatore numeri primi
· Esercizio 24 – Generatore numeri di Fibonacci
· Esercizio 23 – Triangolo con asterischi
· Esercizio 22 – Tasso di cambio
· Esercizio 21 – Serratura
· Esercizio 20 – Simple Calendario
· Esercizio 19 – Ordine lessicografico
· Esercizio 18 – Stampa stringa in base ad input
· Esercizio 17 – Numeri in virgola mobile (ordinamento)
· Esercizio 16 – Nomi dei mesi
· Esercizio 15 – Stampa al contrario
· Esercizio 14 – Erogazione del resto
· Esercizio 13 – Calcola quadrato
· Esercizio 12 – Simulatore lancio dado
· Esercizio 11 – Contatore di monete
· Esercizio 10 – Cartoline con testo fisso
· Esercizio 9 – Popolazione scarafaggi
· Esercizio 8 – Voto medio studente
· Esercizio 7 – Distributore di bibite (simple version)
· Esercizio 6 – Gestione conto bancario (con interessi)
· Esercizio 5 – Classe Rectangle
· Esercizio 4 – Cliente e gestione Conto Bancario
· Esercizio 3 – Realizzazione di Classi (Punto – Rettangolo)
· Esercizio 2 – Menu di scelta (istruzione if)
· Esercizio 1 – Modifica di stringhe

JavaScript [33]

· tScroll (tabella con scroll) – Plugin jQuery
· Finestra news con effetto fade (news ticker) – v 2.0 news da file esterno
· toolTitle (simple toolTip) – Plugin jQuery
· Number_format Javascript
· Testo animato: macchina da scrivere
· Str_replace Javascript
· Maxlength textarea
· tZebra (tabella zebrata) – Plugin jQuery
· JQuery, il metodo .remove()
· JQuery, il metodo .text()
· JQuery, il metodo .html()
· JQuery, il metodo .val()
· Ricerca in tabella html
· News a scorrimento (news ticker)
· Finestra news con effetto fade (news ticker)
· Div al centro che segue lo scrolling
· Aggiungere righe a tabella in maniera dinamica
· Presentazione di diapositive con JQuery
· Presentazione di diapositive temporizzata
· Costruire un orologio con cicli di temporizzazione
· Gestione dei link con Javascript
· Form dinamico – Aggiunta elementi di input
· Controllo importo in Javascript e messaggio di errore
· Div con bordo lampeggiante
· Controllo data in Javascript e messaggio di errrore
· Formattare una data in Javascript
· Finestra popup sempre in primo paino
· Barra di caricamento in Javascript
· Stampare contenuto di un div con Javascript
· Attesa caricamento pagina in Javascript
· Div al centro della finestra del browser
· Ultimo giorno del mese
· Funzione Trim

Chat