L’elemento img

Per inserire un’immagine all’interno della pagina bisogna utilizzare il tag <img>, che non prevede chiusura. Esso supporta i seguenti attributi:

  • src assume come valore il percorso relativo o l’URL del file di immagine da inserire;
  • height definisce l’altezza dell’immagine in pixel. Se non specificato,l’immagine verrà visualizzata nelle sue dimensioni reali: se invece si definiscono un’altezza e una larghezza differenti da quelle reali, è importante inserire valori che mantengono la proporzione originale , altriemnti l’immagine risulterà deformata;
  • width definisce la larghezza dell’immagine in pixel. Se non è indicato, l’immagine sarà visualizzata nelle sue dimensioni reali;
  • border è lo spessore in pixel del bordo dell’immagine. Se non è specificato il bordo non è visualizzato, a meno che l’immagine non venga utilizzata come link: in questo caso, eliminare il bordo è necessario impostare border a nero;
  • align permette di definire l’allineamento, dell’immagine rispetto al testo che la circonda. Può assumere i seguenti valori;
  • bottom (default),la riga di testo in cui si trova l’immagine viene allineata al margine inferiore dell’immagine stessa;
  • middle, la riga di testo in cui si trova l’immagine è all’ineata al margine superiore dell’immagine;
  • right, l’immagine viene allineata a destra e gli altri contenuti le girano intorno;
  • left, l’immagine viene all’allineata a sinistra e il resto dei contenuti el gira intorno.
  • alt permette di specificare un testo alternativo. il testo alternativo viene mostrato nel broweser in cui è stata disattivata la visualizzazione delle immagini, e come etichetta quando si passa sopra l’immagine con il mouse. E’ molto importante ai fini dell’accessibilità, in quanto viene utilizzato dai dispositivi per non vedenti e ipovedenti al fine di descrivere il contenuto dell’immagine;
  • vspace permette di definire il valore in pixel della spaziatura superiore e inferiore dell’immagine rispetto al resto dei contenuti;
  • hspace permette di definire il valore in pixel della spaziatura destra e sinistra dell’immagine rispetto al resto dei contenuti.

Con qualche esempio di codice il funzionamento del tag <img> e dei suoi attributi sarà più chiaro. Ecco un tag di base per caricare un’immagine:

<img src="immagine.gif">

Questo è invece un tag d’immagine con tutti gli attributi definiti:

<img src="immagine.gif" height="100" width="150" align="left" alt="Immagine di prova" border="2" vspace="4" hspace="4>

Questo codice dice al browser di caricare il file immagine.gif contenuto nella stessa directory del file HTML, con un’altezza di 100 pixel e una larghezza di 150 allineamento a sinistra rispetto al testo, testo alternativo “Immagine di prova” un bordo largo 2 pixel e una spaziatura su ogni lato di 4 pixel.

 


<body>
<h1>Allineamento "bottom"</h1>
<p><img src="tempio.gif" width="150" height="199">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Ut
orci erat, viverra ac, pretium ut, placerat sed, nibgh.
Vestibulum gravida elementum neque. Nunc viverra.</p>
<h1>Allineamento &qut;middle"</h1>
<p><img src="tempio.jpg" width="150" height="199" align="middle">
Lorem ipsu dolor sit amet, consectetuer adipiscing
elit. Ut orci erat, viverra ac, pretium ut, placerat sed,
nibh. Vestibulum gravida elementum neque. Nunc viverra. </p>
nibh. Vestibulum gravida elementum neque. Nunc viverra. </p>
<h1>Allineamento "top"</h1>
<p>>img src="tempio.jpg" width="150" height="199"
aligin="top">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Ut orci erat, viverra ac, pretium ut, placerat sed, nibh.
Vestibulum gravida elementum neque. Nunc viverra. </p>
</body>

Perchè siti web accessibili

Le problematiche legate all’accesibilità dei siti Wb sono molto attuali, sopratutto in considerazione del sempre maggior numero di servizi che vengonio offerti mediante della Rete, anche da parte della Pubblica Amministrazione. Per accessibilità di un sito Web si intende la predisposizione tecnica del sito a essere consultato da persone disabili, che utilizzano dispositivi specifici per accere ai contenuti come interpreti braille e sintetizzatori vocali. In Italia la “Legge Stanca” (9 gennaio 2004. n. 4) ha stabilito che i siti della Pubblica Amministrazione siano sviluppati seguendo criteri di accessibilità. Il regolamento attuativo della legge, indispensabile per la sua effettiva applicazione, era ancora in fase di approvazione nel momento in cui questo articolo è stato scritto:)

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...