Redazione
a- a+

Inserimento di immagini

Inserire immagini in un documento XHTML non ha differenze con HTML salvo che l'attributo "alt" è stato reso obbligatorio.

Vediamo il codice sul nostro articolo da giornalista sportivo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">
h1 { color: black; background: yellow; }
</style>

<html>
<head>

<title>0001: "Gol di Sergio Verdi"</title>

</head>
<body>

<h1>"Gol di Sergio Verdi"</h1>

<p>

<img src="gol.jpg" align="right" alt="Gol" />

Oggi allo stadio grande esibizione<br />
del centrocampista Sergio Verdi.
</p>
<span> Marco Bianchi</span>
</body>
</html



La riga aggiunta

<img src="gol.jpg" align="right" alt="Gol" />

permette la visualizzazione dell'immagine nel nostro articolo; analizziamola meglio.
I comandi img src stanno per cerca l'immagine, a cui, tra virgolette segue il nome dell'imagine che ovviamente dovremo già avere nella stessa cartella dove risiede l'intero documento, in alternativa occorre digitare l'intero indirizzo dell'immagine.

Nella costruzione di un sito, spesso si usa tenere una cartella apposita per le immagini, in questo caso la riga in questione diventerebbe <img src="immagini/gol.jpg" align="right" alt="Gol" /> ovviamente è aggiunto all'indirizzo dell'immagine il nome della cartella che la contiene. L'elemento align="right" in realtà non è obbligatorio, ma serve per specificare in quale modo il testo si debba allineare all'immagine; può essere dunque left (sinistra) e right (destra).

L'elemento alt="…" è invece obbligatorio in quanto serve agli user agent non in grado di visualizzare immagini per visualizzare il testo contenuto tra le virgolette come alternativa. Molto utile dunque per i monitor brail.

Le immagini previste per XHTML sono due : jpg o jpeg e gif. Sono usate le estensioni jpg o jpeg per fotografie disegni con molti colori, mentre l'estensione gif è riservata ai disegni o alle piccole animazioni grafiche (immagini animate .gif). Il codice così impostato è perfettamente funzionante.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Lorenzo
Hai qualche domanda da fare?