[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico] [volume] [parte]

Capitolo 481.   Inserzione di immagini

L'elemento OBJECT consente di incorporare qualunque tipo di «oggetto», incluse le immagini; tuttavia, ci sono dei navigatori che considerano tale elemento in modo speciale e pretendono che sia disponibile del software specifico per qualunque tipo di contenuto multimediale. In altri termini, dovendo realizzare un documento da consultare con qualunque tipo di navigatore, l'inserzione delle immagini conviene attuarla con l'elemento tradizionale IMG ed è opportuno che i file siano in formato JPG.

Tabella 481.1. Attributi indispensabili dell'elemento IMG.

Attributo Significato
SRC Riferimento al file dell'immagine.
ALT Descrizione alternativa all'immagine.

L'elemento IMG può essere vuoto, perché si limita a stabilire la collocazione dell'immagine all'interno di un contesto lineare.

481.1   File «immagini-01.html»

Si realizzi il file immagini-01.html con il contenuto seguente. Per completare il lavoro, serve il file philosophical-gnu-sm.jpg, che si può prelevare da <http://www.gnu.org/graphics/philosophical-gnu-sm.jpg>. Il disegno è di Markus Gerwinski e il titolo è Philosophical GNU. In mancanza di un collegamento alla rete, si può usare un'immagine qualunque, purché in formato JPG che è quello più comune, modificando in modo appropriato i riferimenti al nome del file relativo.

      1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
      2 <HTML LANG="it">
      3 <HEAD>
      4     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
      5     <META NAME="Description" CONTENT="Incorporazione di immagini,
      6         esempio 01">
      7     <META NAME="Keywords" CONTENT="HTML, immagine, immagini, esempio">
      8     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      9     <META NAME="Date" CONTENT="2007.01.01">
     10     <META NAME="Resource-type" LANG="en" CONTENT="Document">
     11     <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
     12     <META NAME="Robots" CONTENT="ALL">
     13     <TITLE>Immagini</TITLE>
     14 </HEAD>
     15 <BODY>
     16 
     17 <H1>Inclusione di immagini</H1>
     18 
     19 <P>Per includere un'immagine si usa l'elemento <SAMP>IMG</SAMP>, come in
     20 questo caso, in cui si incorpora un file JPG nel flusso del testo di
     21 questo paragrafo: <IMG SRC="philosophical-gnu-sm.jpg" ALT="GNU
     22 filosofico">.</P>
     23 
     24 </BODY>
     25 </HTML>

Ciò che si ottiene cambia anche in base all'ampiezza orizzontale disponibile.

Figura 481.3. Aspetto del file immagini-01.html.

immagini-01.html

Viene mostrato anche cosa si vede con un navigatore non grafico:

                             Inclusione di immagini

   Per includere un'immagine si usa l'elemento IMG, come in questo caso, in
   cui si incorpora un file JPG nel flusso del testo di questo paragrafo: GNU
   filosofico.

Generalmente, per evitare problemi di compatibilità con i vari programmi di navigazione, è meglio evitare di fare scorrere il testo a fianco delle immagini, per cui è bene staccare il testo normale racchiudendolo esplicitamente all'interno di un elemento P (paragrafo).

481.2   File «immagini-02.html»

Si realizzi il file immagini-02.html con il contenuto seguente:

      1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
      2 <HTML LANG="it">
      3 <HEAD>
      4     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
      5     <META NAME="Description" CONTENT="Incorporazione di immagini,
      6         esempio 02">
      7     <META NAME="Keywords" CONTENT="HTML, immagine, immagini, esempio">
      8     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      9     <META NAME="Date" CONTENT="2007.01.01">
     10     <META NAME="Resource-type" LANG="en" CONTENT="Document">
     11     <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
     12     <META NAME="Robots" CONTENT="ALL">
     13     <TITLE>Convalida</TITLE>
     14 </HEAD>
     15 <BODY>
     16 
     17 <H1>Fieri di essere standard</H1>
     18 
     19 <P>Quando si &egrave; certi della validit&agrave; del proprio documento
     20 HTML ISO 15445, si pu&ograve; aggiungere un'icona racchiusa da un
     21 riferimento ipertestuale che rimanda al servizio di verifica offerto dal
     22 consorzio W3C. Per verificare che questo documento sia valido
     23 effettivamente, basta fare un &laquo;clic&raquo; sulla stessa:</P>
     24 
     25 <P><A HREF="http://validator.w3.org/check/referer"><IMG
     26 SRC="http://validator.w3.org/images/v15445" ALT="Valid
     27 ISO-HTML!"></A></P>
     28 
     29 <P>Se per&ograve; questo file non &egrave; accessibile attraverso la
     30 rete esterna, ci si deve accontentare di verificare a partire dalla
     31 pagina <A HREF="http://validator.w3.org/file-upload.html">
     32 http://validator.w3.org/file-upload.html</A>, attraverso la quale
     33 &egrave; possibile inviare il file, pur non essendo accessibile
     34 pubblicamente.</P>
     35 
     36 </BODY>
     37 </HTML>

Il risultato che si ottiene con un navigatore grafico lo si può vedere nella figura successiva. Si osservi che l'icona può apparire solo se è disponibile un collegamento alla rete esterna, che consenta di raggiungere l'indirizzo <http://validator.w3.org/images/v15445>.

Figura 481.6. Aspetto del file oggetti-02.html.

immagini-02.html

Ecco cosa si vede con un navigatore senza grafica:

                         Fieri di essere standard

Quando si è certi della validità del proprio documento HTML ISO 15445, si
può aggiungere un'icona racchiusa da un riferimento ipertestuale che
rimanda al servizio di verifica offerto dal consorzio W3C. Per verificare
che questo documento sia valido effettivamente, basta fare un «clic»
sulla stessa:

Valid ISO-HTML!

Se però questo file non è accessibile attraverso la rete esterna, ci si
deve accontentare di verificare a partire dalla pagina
http://validator.w3.org/file-upload.html, attraverso la quale è possibile
inviare il file, pur non essendo accessibile pubblicamente.

481.3   Verifica sull'inserzione di immagini

Questa verifica è identica a quella della sezione 480.3.

In base a quanto appreso fino a questo punto, si realizzi il file verifica-immagini-01.html che produca un risultato abbastanza simile a quello mostrato di seguito (sia in modo grafico, sia in modo non grafico), quando viene visto attraverso un navigatore:

verifica-immagini-01.html 

                         Le cose che mi piacciono

Ci sono due cose che mi piacciono: il software libero e gli standard
liberi. Per saperne di più sul software libero si può leggere qualcosa di
utile a partire dal sito http://www.gnu.org (basta fare clic sull'immagine
del "GNU filosofico" che appare qui sotto).

GNU filosofico

Per quanto riguarda gli standard, si veda in particolare il W3C
(http://www.w3.org), ma per verificare la correttezza sintattica di
questa pagina basta fare un bel clic sulla superficie di questa icona:
Valid ISO-HTML!

Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Inoltre, le figure devono incorporare il riferimento ipertestuale appropriato al contesto. Si deve consegnare per la valutazione:

  1. la stampa del risultato ottenuto attraverso il navigatore;

  2. la stampa del sorgente.

Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.

Appunti di informatica libera 2007.02 --- Copyright © 2000-2007 Daniele Giacomini -- <daniele (ad) swlibero·org>

Dovrebbe essere possibile fare riferimento a questa pagina anche con il nome inserzione_di_immagini.htm

[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico]

Valid ISO-HTML!

CSS validator!