Questo tutorial spiega come decorare una pagina web aggiungendovi elementi grafici. Conosceremo i formati di immagine più comuni, scopriremo quale tag viene utilizzato per aggiungere immagini alla pagina e comprenderemo le etichette alternative e l'allineamento di testo e grafica. Conosceremo anche gli attributi di base delle immagini e impareremo come regolare la larghezza e l'altezza dell'immagine. Successivamente, alcune parole sull'utilizzo delle immagini come collegamenti e su cosa sono le miniature delle immagini. In conclusione, ecco alcuni suggerimenti generali per l'utilizzo della grafica in una pagina web.

Aggiunta di immagini a una pagina Web
Se una pagina web non contiene altro che informazioni testuali, qualcuno potrebbe trovarla interessante per le informazioni presentate in essa, ma difficilmente qualcuno oserebbe definirla attraente. Aggiungere immagini a una pagina web è molto semplice. L'aggiunta di grafica in grado di conferire a una pagina un aspetto professionale richiede una certa conoscenza. Ecco di cosa tratta la lezione di oggi.

I due formati di immagine più comunemente utilizzati su Internet sono GIF e JPEG. Il formato, sviluppato e denominato dal gruppo JPEG (Joint Photographic Experts Group), viene generalmente utilizzato per salvare immagini con transizioni di colore uniformi, come le fotografie.

Quasi tutti gli altri elementi grafici vengono salvati nel formato GIF (Graphics Interchange Format), un formato di scambio grafico. Attualmente esiste un altro nuovo formato grafico che sta diventando sempre più popolare: PNG (Portable Network Graphics). Si prevede che alla fine sostituirà il formato GIF. Tuttavia, non affrettarti a salvare tutti i tuoi file grafici in questo formato, poiché non è ancora supportato da tutti i browser.

Tutte le immagini vengono aggiunte a una pagina Web utilizzando lo stesso tag, chiamato tag sorgente immagine . Probabilmente ora puoi determinare tu stesso che questa voce è costituita dal tag vero e proprio , il suo attributo (scr) e il valore di questo attributo (posizione). Tuttavia, poiché l'uso dell'attributo scr è obbligatorio, è più conveniente parlare di questa voce come di un tag generale. Potresti anche aver notato che il tag di origine dell'immagine non ha un tag di chiusura corrispondente. Questo è un tag separato e autonomo, quindi non dimenticare di aggiungere una barra finale alla fine: .

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd"> Prime immagini e> Questa immagine è stata aggiunta alla mia prima pagina web.r >

Aggiunta di didascalie alternative
Viaggiando su Internet, probabilmente avrai notato più di una volta varie iscrizioni che vengono visualizzate quando passi il mouse su qualche elemento grafico di una pagina web. Queste etichette solitamente forniscono alcune informazioni aggiuntive sull'immagine stessa o sull'area della pagina che occupa.

Il codice HTML di esempio riportato di seguito mostra come viene aggiunto l'attributo alt all'interno di un tag . Come l'attributo src, l'attributo alt comunica al browser web alcune informazioni aggiuntive sull'immagine e può sempre essere utilizzato insieme a un tag .

L'attributo alt specifica il testo alternativo per un elemento grafico aggiunto a una pagina web. Questo testo è chiamato testo alternativo perché può apparire sullo schermo in alternativa all'immagine stessa. L'attributo alt ha un altro scopo molto importante. Molti visitatori Internet che utilizzano velocità dati basse potrebbero istruire i propri browser a non caricare o visualizzare informazioni grafiche. Ciò consente loro di caricare le pagine Web più velocemente sui propri computer.

Inoltre, ricorda che non tutti i browser sono in grado di visualizzare la grafica nelle proprie finestre. Ad esempio, il browser Lynx non supporta affatto questa funzionalità. Pertanto, l'attributo alt consente a un web designer di essere sicuro che se un visitatore della sua pagina web non vede un'immagine sul suo schermo, sarà almeno in grado di vedere le informazioni testuali aggiunte a quell'immagine.

Sebbene l'attributo alt possa essere definito per ciascun tag , fai attenzione a non assegnare ad alcuni elementi grafici messaggi di testo inappropriati. Ad esempio, non ha senso aggiungere etichette di testo alternative ai diversi elementi dell'aspetto di una pagina web. Per evitare tali errori, è possibile assegnare all'attributo alt di tali elementi un valore vuoto (alt=""). Se non imposti nessun altro valore di attributo, il browser eseguirà il rendering dell'immagine nella sua dimensione originale, allineando il bordo superiore dell'immagine con il bordo superiore della stringa di testo adiacente. Puoi modificare entrambe queste opzioni utilizzando i tag del foglio di stile.

Attributi dell'immagine
Per etichetta Vengono forniti gli attributi che consentono di ridimensionare l'immagine. Alcuni di questi attributi sono elencati di seguito.
altezza— Specificato in pixel o percentuali — Determina l'altezza dell'immagine
larghezza— Specificato in pixel o percentuali — Determina la larghezza dell'immagine.

Regolazione dell'altezza e della larghezza dell'immagine
Le dimensioni di un'immagine inserita in una pagina web possono essere specificate utilizzando gli attributi altezza e larghezza. I valori di questi attributi sono specificati come numero fisso di pixel o come percentuale relativa alla dimensione della pagina. Dai un'occhiata al codice HTML qui sotto. Nel primo tag le dimensioni dell'immagine originale, che hai già visto nei disegni precedenti di questa lezione, sono impostate su 60 pixel in verticale e 60 pixel in orizzontale. Nel secondo tag, la larghezza della stessa immagine è impostata al 6% della larghezza della pagina e l'altezza al 10% dell'altezza della pagina. L'immagine mostra come appaiono entrambe queste immagini in una finestra del browser.

Quando si visualizza un'immagine nella sua finestra, il browser è altrettanto bravo ad elaborare i valori specificati in pixel e percentuali, ma tieni presente che i computer dei visitatori della tua pagina web potrebbero essere impostati su una risoluzione dello schermo diversa da quella installata per il tuo monitor. Cosa ne consegue? Ad esempio, la risoluzione del monitor è impostata su 800x600. Nell'esempio precedente, la larghezza dell'immagine aggiunta alla pagina web era impostata al 6% della larghezza della pagina, che a questa risoluzione sarebbe di 48 pixel. Se visualizzi la stessa immagine su un monitor con una risoluzione di 1024x800, il 6% specificato della larghezza della pagina corrisponderà ad una larghezza di 61 pixel.

Quando ridimensioni un'immagine, assicurati di impostare entrambi i valori in modo che corrispondano alla sua altezza e larghezza. Se si modifica solo uno di questi valori, l'immagine stessa apparirà allungata verticalmente o orizzontalmente sullo schermo. Un'opzione alternativa è regolare le dimensioni dell'immagine utilizzando un editor grafico.

Puoi creare l'illusione che l'immagine si carichi più velocemente. Indipendentemente dal fatto che l'immagine venga ridimensionata o meno, includi sempre i valori per gli attributi altezza e larghezza, poiché diranno al browser informazioni importanti su quanto spazio dovrebbe essere allocato sulla pagina per ospitare l'immagine. In questo caso il browser può designare lo spazio richiesto per l'immagine e continuare a costruire altri elementi della pagina senza interrompere il caricamento dell'immagine stessa. In questo modo, la pagina sembra caricarsi più velocemente perché i visitatori non dovranno attendere che l'immagine si carichi completamente prima di vedere finalmente le altre informazioni presentate sulla pagina.

Se hai davvero bisogno che l'immagine occupi una quantità specifica di spazio lungo la larghezza della pagina, utilizza valori percentuali. In questo caso, sullo schermo di qualsiasi monitor l'immagine occuperà la stessa parte della pagina che occupa sullo schermo. Se vuoi che la risoluzione dell'immagine stessa (la sua dimensione in pixel) rimanga costante, utilizza valori espressi in pixel.

Allineamento di testo e grafica
Attributo di allineamento tag consente di allineare l'immagine al bordo destro (valore destro) o sinistro (valore sinistro) della riga di testo. Esempi di utilizzo di questo attributo sono mostrati nella figura.

Lo stesso attributo può essere utilizzato anche per allineare un'immagine verticalmente (sempre rispetto alla stringa di testo). Può assumere altri tre valori: superiore, inferiore e centrale. Se l'attributo di allineamento è impostato su top, il bordo superiore dell'immagine viene allineato con il bordo superiore dell'eventuale testo circostante. Se l'attributo di allineamento è impostato su bottom, il bordo inferiore dell'immagine viene allineato con il bordo inferiore del testo circostante. Se l'attributo di allineamento è impostato su center, il centro dell'immagine viene allineato al centro della riga di testo.

Utilizzo delle immagini come collegamenti
Le immagini sono utili per qualcosa di più del semplice design della pagina web. Possono essere utilizzati con successo come collegamenti ipertestuali ad altri documenti. L'HTML risolve facilmente questo problema perché le immagini vengono trasformate in collegamenti ipertestuali esattamente allo stesso modo delle didascalie. Per fare questo, devi anche applicare un tag, racchiudendo un elemento della pagina web che dovrebbe diventare un collegamento ad un altro documento. Pertanto, se si deve seguire un collegamento ipertestuale dopo aver fatto clic su un'immagine, il tag deve includere il tag di quell'immagine.

In questo caso, dopo che il visitatore di una pagina web passa il mouse sopra questa immagine, accanto al cursore verrà visualizzato il messaggio di testo "Questo è il mio autoritratto!". Facendo clic sull'immagine si aprirà il documento DOC2.htm a cui punta il collegamento ipertestuale.

Immagini in miniatura
Un altro modo comune di utilizzare la capacità dell'HTML di creare collegamenti ipertestuali è utilizzare alcune immagini per collegarsi ad altre. Perché è necessario? Il fatto è che molto spesso la dimensione delle immagini che si desidera pubblicare su una pagina web è troppo grande e non vi è alcuna garanzia che i visitatori abbiano la pazienza di attendere che finiscano di caricarsi. In questi casi, viene creata una copia più piccola dell'immagine originale, chiamata miniatura, che il browser può caricare molto più velocemente. Se un visitatore è interessato all'immagine e desidera scaricarne una copia completa, tutto ciò che deve fare è cliccare su questa miniatura. Ecco come appaiono i codici HTML corrispondenti.

Come puoi vedere, facendo clic sull'immagine Thumbnail.jpg si apre un altro file immagine (image.jpg). La stringa di testo, specificata come valore dell'attributo alt, indica al visitatore come aprire l'immagine principale.

Segreti per utilizzare le immagini con successo
Le immagini sono interessanti e attraenti, forniscono molte informazioni visive e sono molto facili da aggiungere alle pagine Web, ma dovresti comunque seguire alcune delle seguenti regole se vuoi davvero creare un sito che diventi popolare tra gli utenti di Internet.

Maggiore è la dimensione del file immagine, maggiore sarà il tempo necessario per scaricarlo sul computer dell'utente. Poiché la maggior parte dei visitatori di Internet utilizza ancora connessioni a bassa larghezza di banda per accedere al Web, le dimensioni dei download dei file continuano ad essere di fondamentale importanza per loro. Assicurati di tenerne conto e prova a posizionare le immagini sulle tue pagine web il più piccole possibile.

Non è importante solo la dimensione del file di una singola immagine, ma anche la dimensione complessiva del file dell'intero documento HTML. Più immagini aggiungi a una pagina web, anche quelle piccole, maggiore sarà la dimensione del file del documento finale. Visualizza l'anteprima della tua pagina in diversi browser e stima quanto tempo impiegherà ciascun browser per caricarla.

Poiché l'attributo alt è così importante (si consiglia di definirlo per ciascun tag , fare attenzione quando lo si utilizza. Assicurati che il contenuto del messaggio di testo corrisponda sempre all'immagine stessa, altrimenti i visitatori della tua pagina potrebbero essere indotti in inganno. Lo stesso discorso vale al contrario: assicurati che le immagini corrispondano alle informazioni testuali presentate sulla pagina web. La foto di un aereo sarebbe appropriata su un sito web sui viaggi aerei, ma completamente fuori luogo su un sito web sulla fauna selvatica.

Puoi trovare molte immagini interessanti su Internet e salvarle facilmente sul tuo computer. Tuttavia, molte di queste immagini sono protette da copyright. Se trovi un'immagine che ti piace su un sito commerciale, controlla se sono presenti avvisi sul copyright e se l'immagine è disponibile per l'uso gratuito.

Se l'immagine presentata sulla pagina web non è protetta da copyright, puoi copiarla nella memoria del tuo computer. Per fare ciò, è sufficiente fare clic con il tasto destro su questa immagine e selezionare Salva immagine con nome dal menu che si apre. Una volta salvata l'immagine sul tuo computer, puoi utilizzarla ulteriormente come qualsiasi altra immagine.

Definizione 1

Una pagina Web è un file di testo creato in HTML e ospitato sul World Wide Web (WWW). Oltre al testo, una pagina Web può contenere collegamenti ipertestuali tramite i quali è possibile navigare e visualizzare altre pagine Web, nonché inserti sotto forma di grafica, animazione, clip video e musica.

Usando HTML puoi:

1. Creare e modificare pagine Web.
2. Modifica documenti HTML da Internet, tenendo conto del funzionamento di tutti gli oggetti incorporati nel documento (immagini, animazioni, ecc.).
3. Utilizzando collegamenti ipertestuali e la possibilità di incorporare disegni, diagrammi, animazioni, videoclip, musica e parlato, effetti speciali di testo in un documento HTML, creare presentazioni multimediali, presentazioni e progetti dimostrativi.

Nota 1

Le immagini grafiche vengono solitamente archiviate in file separati. Il linguaggio HTML dispone di tag speciali con cui vengono scritti i collegamenti nei codici delle pagine Web, che sono gli indirizzi effettivi di questi file su Internet. Quando incontra tali tag, il browser Web effettua una richiesta al server Web per il file corrispondente con un'immagine, audio o video e lo visualizza sulla pagina Web nella posizione di questo tag. Tutti i dati (immagini, audio e video, ecc.) archiviati in file separati dalla pagina Web sono chiamati elementi incorporati delle pagine Web. Diamo uno sguardo più da vicino al processo di aggiunta di un'immagine a una pagina Web.

Aggiunta di immagini a una pagina Web

L'attrattiva delle pagine Web risiede proprio nella grafica e negli altri vari oggetti utilizzati su di esse. Aggiungere un'immagine a una pagina non è difficile. Ma aggiungere grafica che possa rendere una pagina Web più presentabile e professionale è molto più difficile e richiede conoscenze specifiche.

Puoi aggiungere un'immagine a una pagina utilizzando il tag image source, che assomiglia a:

dove è il tag stesso e scr è il suo attributo. Poiché l'attributo scr è obbligatorio, possiamo dire che l'intera voce è un tag comune. Il tag di origine dell'immagine non utilizza un tag di chiusura corrispondente perché il tag di origine è autonomo e pertanto richiede una barra di chiusura alla fine quando viene utilizzato: .

Aggiunta di didascalie alternative

Su Internet è spesso possibile trovare varie iscrizioni che vengono visualizzate quando si passa il mouse su qualsiasi oggetto grafico su una pagina Web. Queste didascalie contengono solitamente informazioni aggiuntive sull'immagine stessa o sull'area della pagina in cui si trova.

Di seguito è riportato il codice HTML con l'attributo alt aggiunto all'interno del tag. Questo attributo, simile all'attributo src, comunica al browser alcune informazioni aggiuntive sull'immagine e può essere sempre utilizzato anche insieme ad un tag.

alt="Questa è una foto!" />!}

La funzione dell'attributo alt è definire un testo alternativo per un elemento grafico aggiunto a una pagina Web. Si chiama alternativa perché viene visualizzata sullo schermo come alternativa all'immagine stessa. L'attributo alt svolge un'altra importante funzione. Permette al web designer di essere sicuro che se il visitatore della pagina non vede un'immagine sul suo schermo, sarà almeno in grado di vedere le informazioni di testo aggiunte a questa immagine.

Quando si utilizza l'attributo alt per ogni tag è importante fare attenzione a non assegnare agli elementi grafici messaggi di testo inappropriati. Ad esempio, non ha senso aggiungere etichette di testo alternative agli elementi di progettazione della pagina. Per evitare tali errori, puoi impostare l'attributo alt di questi elementi su un valore vuoto (alt=" "). Se non imposti nessun altro attributo, il browser eseguirà il rendering dell'immagine nella sua dimensione originale, ma allineerà il bordo superiore dell'immagine con il bordo superiore della stringa di testo adiacente. Tuttavia, puoi modificare entrambe queste impostazioni utilizzando i tag del foglio di stile.

Attributi dell'immagine

Il tag ha attributi che ti consentono di ridimensionare le immagini. Ecco qui alcuni di loro:

• altezza – viene utilizzato per determinare l'altezza dell'immagine in pixel o percentuali;
• larghezza – viene utilizzato per determinare la larghezza dell'immagine in pixel o percentuali.

Regolazione dell'altezza e della larghezza dell'immagine

Le dimensioni delle immagini inserite nelle pagine Web possono essere impostate utilizzando gli attributi sopra. Inoltre, i loro valori sono impostati come numero fisso di pixel o come percentuale relativa alla dimensione della pagina. Nel codice HTML riportato di seguito, il primo tag contiene le dimensioni dell'immagine originale in pixel (60 pixel in verticale e 60 pixel in orizzontale), il secondo tag imposta la larghezza della stessa immagine al 6% della larghezza della pagina e l'altezza a 10% dell'altezza della pagina.

alt="Questa è una foto!" altezza="60" larghezza="60" />

alt="Questa è una foto!" altezza="10%" larghezza="6%" />

Nota 2

Quando si visualizzano le immagini nella propria finestra, il browser fa un lavoro altrettanto buono elaborando entrambi i tipi di valori. Tuttavia, è necessario ricordare che i visitatori delle pagine Web potrebbero avere una risoluzione dello schermo diversa da quella dei loro computer. Pertanto, quando si ridimensiona un'immagine, è necessario specificare entrambi i valori dell'immagine (altezza e larghezza). Se si modifica solo uno di questi valori, l'immagine sullo schermo potrebbe apparire allungata verticalmente o orizzontalmente.

Può essere utilizzato per creare l'illusione di un caricamento più rapido delle immagini. Per fare ciò devi sempre specificare i valori degli attributi altezza e larghezza, indipendentemente dal fatto che l'immagine sia stata ridimensionata o meno. Perché comunicano al browser informazioni importanti sulla quantità di spazio necessario per posizionare un'immagine su una pagina. In risposta, il browser alloca lo spazio necessario per l'immagine e continua a costruire altri elementi della pagina senza interrompere il caricamento dell'immagine stessa. Ciò fa sembrare che la pagina si carichi più velocemente perché i visitatori non devono attendere che l'immagine venga caricata completamente prima di vedere altre informazioni sulla pagina.

Per garantire che l'immagine su qualsiasi schermo, indipendentemente dalla sua risoluzione, occupi esattamente una certa quantità di spazio lungo la larghezza della pagina, è necessario utilizzare valori percentuali. Se desideri che la risoluzione dell'immagine stessa sia costante (la sua dimensione in pixel), devi utilizzare i valori in pixel.

Allineamento di testo e grafica

Per allineare un'immagine al bordo destro o sinistro di una riga di testo, utilizza l'attributo align del tag. Per esempio:

alt="Questa è una foto!" altezza="60" larghezza="60" align="destra" />

Per allineare verticalmente un'immagine rispetto ad una stringa di testo è possibile utilizzare anche questo attributo, che può assumere i valori top, bottom e center. Il valore top specifica che il bordo superiore dell'immagine deve essere allineato con il bordo superiore del testo circostante. Il valore bottom specifica che il bordo inferiore dell'immagine deve essere allineato con il bordo inferiore del testo circostante. Il valore centro specifica che il centro dell'immagine deve essere allineato con il centro della riga di testo.

Utilizzo delle immagini come collegamenti

Le immagini vengono utilizzate anche per creare collegamenti ipertestuali ad altri documenti. In HTML, un'immagine diventa un collegamento ipertestuale allo stesso modo di una casella di testo. Per fare questo viene utilizzato un tag che racchiude un elemento della pagina (nel nostro caso un'immagine) che dovrebbe diventare un link. Il collegamento verrà seguito cliccando su questa immagine.

Immagini in miniatura

Oltre al metodo sopra descritto, in cui un'immagine funge da collegamento ipertestuale, può essere utilizzata anche come collegamento ipertestuale che passa da un'immagine all'altra. Ciò è necessario nei casi in cui la dimensione dell'immagine che si desidera pubblicare su una pagina Web è piuttosto grande e richiederà molto tempo per essere caricata, il che è inaccettabile per molti visitatori. Pertanto, creano una copia ridotta di questa immagine (miniatura) e la rappresentano con un collegamento ipertestuale. Se un visitatore della pagina è interessato a questa immagine, può fare clic sulla miniatura per visualizzare l'immagine completa. Ecco un esempio di codice:

alt="Clicca per vedere l'immagine normale."

altezza="60" larghezza="60" />

Segreti per utilizzare le immagini con successo

Le immagini forniscono molte informazioni visive ai visitatori, e questo le rende attraenti, e sono anche abbastanza semplici da aggiungere a una pagina Web, ma ci sono alcune regole per la creazione di un sito che devono essere seguite se vogliamo che diventi popolare su Internet.

Quando crei pagine, dovresti provare a posizionare piccole immagini su di esse, poiché le immagini di grandi dimensioni impiegheranno molto tempo a caricarsi e alcuni utenti utilizzano ancora connessioni a larghezza di banda ridotta per accedere alla rete, e quindi le dimensioni dei file di download sono limitate per loro fondamentale importanza.

Nota 3

Importante è anche la dimensione complessiva del file dell'intero documento HTML, che a sua volta dipenderà non solo dalla dimensione delle immagini in esso contenute, ma anche dal loro numero. È necessario fare attenzione quando si utilizza l'attributo alt in modo che il contenuto del messaggio di testo corrisponda sempre all'immagine stessa. E nel caso opposto: è necessario assicurarsi che l'immagine corrisponda alle informazioni testuali presentate sulla pagina.

Quando utilizzi immagini prese in prestito da Internet sulla pagina che stai creando, devi verificare se queste immagini sono protette da copyright.

È grazie alla grafica delle pagine Web che il WWW è diventato il servizio Internet più popolare, ed è a lui che dobbiamo tutta questa varietà di pagine.

La particolarità della grafica utilizzata nelle pagine web è che presenta alcuni limiti, di cui dobbiamo tenere conto e da cui trarre vantaggio.

Esistono due formati di file principali utilizzati sui siti Web: GIF e JPG. Viene promosso un nuovo formato per la grafica web chiamato PNG (pronunciato "ping"), ma non è ancora ampiamente utilizzato e non tutti i browser lo comprendono, quindi per ora non ci occuperemo di questo formato.

Iniziamo quindi ad analizzare i formati GIF e JPG, descrivendone le principali proprietà e caratteristiche.

Formato GIF

Supporta non più di 256 colori (meno è possibile e spesso necessario);

Utilizza una tavolozza di colori;

Utilizza la compressione senza perdita utilizzando il metodo LZW (che è simile a quello utilizzato nell'archiviatore PKZIP, e quindi i file GIF non sono praticamente compressi);

Supporta la scansione interlacciata;

È un formato di streaming, ad es. la visualizzazione delle immagini si avvia durante l'estrazione;

Permette di assegnare ad uno dei colori della tavolozza l'attributo trasparente, che viene utilizzato durante la creazione delle cosiddette GIF trasparenti;

Ha la capacità di salvare più immagini in un unico file, che viene utilizzato nella produzione di GIF animate;

Supporta la possibilità di inserire blocchi di controllo in un file, che consentono di inserire commenti nel file (ad esempio, sul copyright:), ritardo tra la visualizzazione delle immagini, ecc.

E ora un piccolo chiarimento: a cosa possono portare queste proprietà. GIF supporta un massimo di 256 colori, il che significa che tutte le immagini che salviamo nel formato GIF riducono esplicitamente o implicitamente il numero di colori per soddisfare questo limite (programmi diversi con successo variabile). E da qui la conclusione: se devi posizionare una bella fotografia con transizioni fluide e sottili sfumature di colore, dopo la trasformazione tutto andrà molto peggio: le sfumature non saranno più sottili e l'intera fotografia assumerà un aspetto innaturale, aspetto irrealistico. Pertanto, se hai ancora bisogno di salvare la foto in formato GIF e trasmettere tutte le sfumature, dovrai ricorrere ai trucchi. Ad esempio, puoi applicare un filtro artistico a una fotografia e trasformarla in un disegno o applicare dei toni. Ma non ci sono problemi con il salvataggio di immagini e disegni in questo formato, di regola sono ben compressi e non contengono molti colori. Ora diamo un'occhiata alle proprietà e alle caratteristiche del secondo formato più popolare su Internet.

Formato JPEG

Consente di salvare immagini a colori con un numero di colori di 16,7 milioni di colori (o 24 bpp) e se l'immagine ha meno colori, prima di salvare il file viene comunque convertita in un'immagine a colori; Utilizza la compressione con perdita, grazie alla quale raggiunge livelli selvaggi di compressione dei file; Supporta la scansione progressiva, ad es. L'immagine appare inizialmente di scarsa qualità e migliora gradualmente durante il processo di caricamento. Forse questi sono tutti i vantaggi del formato JPG e il suo scopo principale è archiviare immagini di qualità fotografica.

Ottimizzazione grafica

Tutto il lavoro di elaborazione grafica viene eseguito in un formato intermedio

Diamo un'occhiata ad alcune funzionalità del lavoro con la grafica. Nonostante salviamo le immagini in un file GIF con supporto per 256 colori o in un file JPG con 16,7 milioni di colori, dobbiamo lavorare con l'immagine in un formato intermedio che ci permetta di salvare l'immagine senza distorsioni e senza perdita di colore. colori di profondità (ad esempio, TIFF e formati interni di editor come PSD). Il fatto è che durante il lavoro dovrai modificare o distorcere l'immagine molte volte, il che alla fine porta a ripetute riscritture del file. La registrazione ripetuta nel formato GIF porterà alla perdita delle sfumature dell'immagine e nel formato JPG ogni nuova sovrascrittura del file introdurrà nuove distorsioni e dopo un po' la foto sembrerà terribile. Pertanto, tutto il lavoro sull'elaborazione grafica viene eseguito in un formato intermedio (sebbene abbia file di grandi dimensioni) e solo nell'ultima fase l'immagine viene convertita nel formato desiderato (spesso contemporaneamente all'ottimizzazione della dimensione del file).

Per le pagine web, la questione della dimensione delle foto è molto importante. Che taglia dovrei farli? Ci vorrà troppo tempo per caricarsi? Durante l'ottimizzazione è possibile ridurre le dimensioni del file, ma difficilmente vale la pena ottimizzare una foto che non ha alcun significato. La prima fase dell'ottimizzazione consiste nell'evidenziare l'elemento principale nella fotografia (scartando tutto il resto) e nel concentrarsi sull'elemento illustrato. Ciò si ottiene attraverso l'operazione di ritaglio e ricerca della parte più espressiva che trasmette il significato della fotografia. Dopo questa operazione potete già ottimizzare l'immagine, e in questo caso avrà effettivamente la dimensione più piccola.

E con le dimensioni delle fotografie, devi rispettare un certo compromesso: non renderle troppo piccole, in cui non puoi vedere nulla nemmeno sotto una lente d'ingrandimento, e non renderle troppo grandi, per non allungare il tempo nell'eternità. Anche se, ovviamente, ci sono delle eccezioni: una foto grande adeguatamente ottimizzata può richiedere un tempo di trasferimento equivalente al tempo di trasferimento di una foto normale e, al contrario, una piccola foto scarsamente ottimizzata impiegherà fino alla fine dei giorni per caricarsi. Una fotografia normale può essere considerata una foto di circa 250x300 pixel e occupa circa 6-10 kilobyte. Ciò non significa che tutte le fotografie debbano avere queste dimensioni, ma che l'area della fotografia dovrebbe essere equivalente ad essa. Queste raccomandazioni si applicano alle fotografie che “illustrano” il testo e non si applicano ai disegni che fungono da elementi di navigazione.

Il secondo componente più importante nel riempire le pagine Web dopo il testo sarà senza dubbio il design grafico. Si tratta di vari tipi di disegni, fotografie e forse anche videoclip. Possiamo anche usare l'audio per visualizzare le pagine Web.
Inizieremo inserendo immagini grafiche. I browser sono in grado di visualizzare solo tre tipi di file grafici. Questi sono file GIF, JPEG e PNG. I file GIF ti consentono di creare immagini animate. I file JPEG sono comunemente usati per salvare immagini fotografiche. Il formato PNG recentemente introdotto consente di combinare una buona qualità dell'immagine e una piccola dimensione del file grafico. Ma dopo che l'immagine è stata inserita in un file grafico, deve ancora essere incorporata in qualche modo nella pagina Web.

Il tag viene utilizzato per questo con molti parametri Questo tag non ha una coppia di chiusura perché non crea alcun ambito per la regola di visualizzazione, incorpora solo un'immagine grafica nel contenuto della pagina web. Infatti un'immagine grafica può anche essere un collegamento ipertestuale o addirittura nascondere dietro di sé più collegamenti ipertestuali, ma dei collegamenti ipertestuali parleremo nella prossima sezione di questo capitolo, ma per ora comprenderemo le regole per l'utilizzo del tag .

L'attributo principale e obbligatorio del tag è l'attributo src. Il valore di questo attributo è l'indirizzo del file grafico inserito, o più precisamente la sua URL. Se il file grafico si trova sullo stesso server Web, è sufficiente annotare il nome completo del file, incluso il percorso ad esso nelle sottodirectory, ad es. se la directory delle immagini con immagini, verrà utilizzato il tag di inserimento dell'immagine grafica il seguente modulo:

In questo esempio, stiamo utilizzando un'immagine GIF situata in un file chiamato pictl.gif, che a sua volta si trova in una directory chiamata images. Va notato che le barre - barre - sono inclinate in una direzione diversa rispetto a quando vengono utilizzate nei percorsi dei file dei sistemi operativi delle famiglie DOS e Windows. Il fatto è che inizialmente i server Web erano basati sul sistema operativo Unix, che supporta un file system con barre simili. Ora non importa quale sistema operativo supporti il ​​server con il sito Web, tutti i percorsi vengono scritti allo stesso modo ed elaborati correttamente dal software del server.

Agli albori dello sviluppo del WWW, i browser visualizzavano solo informazioni di testo; non era supportata la grafica. Al giorno d'oggi non si verificano praticamente mai, ma ogni browser ha la possibilità di disabilitare il caricamento della grafica. Pertanto, dovresti sempre utilizzare la rappresentazione testuale alternativa dell'immagine. Semplicemente, devi preparare il testo che verrà visualizzato al posto dell'immagine se per qualche motivo non può essere caricato dal browser. Questo testo viene aggiunto al tag utilizzando il parametro ait, il cui valore è la stringa di testo desiderata, ovvero si ottiene approssimativamente la seguente costruzione:

Nel caso in cui l'immagine grafica venga comunque visualizzata dal browser, il testo della rappresentazione testuale alternativa viene visualizzato come un "suggerimento", un breve suggerimento testuale quando l'utente posiziona il cursore del mouse sull'immagine grafica desiderata.

Tuttavia, esiste un'opzione più dettagliata per creare tali messaggi di testo. Utilizzando il parametro longdesс, viene specificato l'indirizzo della risorsa Internet, che contiene una descrizione completa di questa immagine grafica. Il valore di questo parametro è, ovviamente, l'URL della risorsa con la descrizione dell'immagine.

Il parametro name consente di specificare un nome immagine univoco che identifica questo elemento di progettazione della pagina Web. Questa opzione viene mantenuta per scopi di compatibilità con le versioni precedenti; rimane dalle versioni precedenti dello standard HTML. Attualmente tutti i tag utilizzano il parametro id per questi scopi.

Per impostazione predefinita, l'immagine grafica viene mostrata esattamente come è stata creata, mantenendo le sue dimensioni verticale e orizzontale. Abbiamo tuttavia la possibilità di impostare esplicitamente le dimensioni dell'immagine a nostra discrezione. A questo scopo vengono utilizzati i parametri di altezza e larghezza. Sappiamo già come impostare le dimensioni in pixel o percentuali. È solo necessario notare che i browser si sforzano di mantenere le proporzioni dell'immagine, quindi l'impostazione esplicita delle dimensioni che modificano le proporzioni può essere ignorata dal browser e sceglierà le dimensioni che sarebbero il più vicino possibile a quelle specificate dal browser. utente senza violare le proporzioni. Pertanto, per le pagine Web vengono solitamente preparate immagini grafiche delle dimensioni che verranno utilizzate durante la visualizzazione come parte delle pagine Web. E se un'immagine deve essere visualizzata più volte con dimensioni diverse, è più semplice preparare diversi file grafici piuttosto che fornire i propri disegni al browser per una visualizzazione non autorizzata, che può interrompere l'intero layout delle pagine Web.

Utilizzando i parametri, possiamo specificare la quantità di spazio libero che separerà l'immagine grafica dagli altri elementi di design della pagina Web che la circondano, ovvero, di fatto, impostare il rientro dell'immagine. A questo scopo vengono utilizzati i parametri hspace e vspace. Il parametro hspace imposta la spaziatura orizzontale in pixel e il parametro vspace imposta la spaziatura verticale. Tieni presente che come valori per questi parametri possono essere utilizzati solo valori numerici che indicano le distanze in pixel. Non è previsto un valore nullo per questi parametri, ma in genere ogni browser utilizza un piccolo valore diverso da zero.

E usando il parametro border, possiamo impostare lo spessore del bordo che circonda l'immagine. Come al solito, il valore del parametro è un numero che indica lo spessore in pixel. Il valore predefinito è zero, rendendo il bordo invisibile.

È necessario menzionare anche l'allineamento dell'oggetto grafico rispetto al testo che lo avvolge. A questo scopo viene utilizzato il parametro di allineamento. È possibile utilizzare come valore una parola chiave da un insieme predefinito di esse. I valori inferiore, centrale e superiore vengono utilizzati per posizionare la prima riga di testo che scorre verticalmente attorno all'immagine. Il valore top la sposta in alto, bottom la sposta in basso e middle consente di centrare la linea verticalmente. I valori sinistra e destra vengono utilizzati per allineare orizzontalmente l'immagine grafica. Il primo valore, a sinistra, come puoi immaginare, sposta l'immagine sul bordo sinistro del blocco in cui viene visualizzata e da destra a destra.

Adesso è il momento di vedere con degli esempi come possiamo posizionare un disegno ed abbinarlo al testo che dovrà scorrere attorno all'immagine grafica desiderata.

Listato 1.11

"http://www.w3.org/TR/htm!4/strict.dtd">




<р>
Questo è il testo che avvolge l'immagine.
Questo è il testo che avvolge l'immagine.

L'aspetto di questo documento HTML quando visualizzato utilizzando un browser è mostrato in Fig. 1.11.

Riso. 1.11. Finestra del browser che mostra il risultato della visualizzazione del file mostrato nel Listato 1.11

In questo esempio abbiamo utilizzato un semplice tag di inserimento immagine senza parametri aggiuntivi. Come possiamo vedere, l'immagine viene inserita subito dopo la prima frase, dove abbiamo posizionato il tag . Allo stesso tempo, se riducessimo orizzontalmente la dimensione della finestra di visualizzazione del browser in modo che la prima frase e il disegno non potessero stare su una riga, verrebbe visualizzata prima la frase e poi il disegno sottostante, premuto sulla bordo sinistro della finestra di visualizzazione. A destra di esso, il testo che lo segue inizierà ad essere visualizzato in modo che la linea di base della linea coincida con il bordo inferiore del disegno.

Ora aggiungiamo un parametro di allineamento orizzontale al tag di visualizzazione dell'immagine. Il codice risultante è mostrato nel Listato 1.12.

Listato 1.12

"http://www.w3.org/TR/html4/strict.dtd">


<р>Questo è il testo che avvolge l'immagine. allineare="ieft">
Questo è il testo che avvolge l'immagine. Questo è il testo che avvolge l'immagine.
Questo è il testo che avvolge l'immagine.

Come potete vedere, anche in questo caso, inizia ad essere visualizzato prima il testo, poi l'immagine grafica, premuta sul bordo sinistro, secondo la direttiva data con il parametro align, e il resto del testo viene posizionato a destra dell'immagine (Fig. 1.12), cioè l'immagine non può occupare la prima riga, poiché il testo inizia prima di essa. La stessa cosa accadrà se utilizzi il parametro di allineamento con il valore right, ma l'immagine verrà premuta solo sul bordo destro della finestra e il testo scorrerà attorno ad essa sul lato sinistro. Questi sono tutti i cambiamenti.

Ora diamo un'occhiata a come funziona l'allineamento verticale. Sebbene l'impostazione dell'allineamento sia inserita nel tag dell'immagine, i cambiamenti maggiori si vedono nel testo che circonda l'immagine. Vediamo l'effetto del parametro di allineamento verticale utilizzando un esempio.

Riso. 1.12. Finestra del browser che mostra il risultato del file mostrato nel Listato 1.12

Listato 1.13

"http://www.w3.org/TR/html4/striqt.dtd">




<р>Questo è il testo che avvolge l'immagine. allinea="centro">
Questo è il testo che avvolge l'immagine. Questo è il testo
che scorre attorno al disegno.
Questo è il testo che avvolge l'immagine.

Il risultato della visualizzazione di questo documento HTML è mostrato in Fig. 1.13.

Riso. 1.13. Finestra del browser che mostra il risultato del file mostrato nel Listato 1.13

In questo esempio, impostiamo l'allineamento verticale al centro, ovvero la prima riga di testo dopo il tag di inserimento dell'immagine appare centrata verticalmente nello spazio bianco a destra dell'immagine. Il resto del testo appare sotto l'immagine. Se impostassimo il parametro di allineamento su top, la prima linea apparirebbe accanto al bordo superiore dell'immagine. E quando si utilizza il valore inferiore, la prima riga di testo apparirà accanto al bordo inferiore dell'immagine. Tieni presente che il browser riconosce solo un parametro di allineamento, il che significa che possiamo specificare l'allineamento verticale o orizzontale. Se gli strumenti integrati per il posizionamento e l'allineamento dell'immagine non sono sufficienti, puoi passare al processo di layout utilizzando le tabelle. Esamineremo l'uso delle tabelle in una delle sezioni seguenti di questo capitolo.

Abbiamo l'opportunità di utilizzare video nella progettazione di pagine Web. Dovresti fare molta attenzione quando li usi, poiché i file che contengono queste risorse video sono generalmente piuttosto grandi. E affinché un utente remoto possa visualizzarli nel suo browser, dovrà scaricare completamente questo file sul suo computer. Utilizzando i canali disponibili per la maggior parte degli utenti di Internet, tale procedura può richiedere molto tempo. Ma a nessuno di noi piace aspettare il caricamento di una pagina Web.

I browser sono generalmente in grado di riprodurre file video AVI, Real Video e Windows Media. E la loro implementazione nella pagina Web avviene utilizzando lo stesso tag . Ma il parametro dunscr viene utilizzato per specificare la posizione del file video. Per impostazione predefinita, un clip video incorporato in una pagina Web viene riprodotto una volta, immediatamente dopo il caricamento completo della pagina. Ma abbiamo alcune opportunità per regolare il processo di riproduzione di una clip o dare all'utente la possibilità di controllarne la riproduzione.

Se incluso nel tag Se abilitiamo il parametro start possiamo specificare esplicitamente un evento dopo il quale il browser dovrà riprodurre il videoclip scaricato. Le parole chiave mouseover e fileopen possono essere utilizzate come valori per questo parametro. Il primo specifica che la clip deve essere riprodotta dopo che l'utente ha posizionato il cursore del mouse sullo spazio assegnato per l'inserimento video, mentre la seconda specifica che la riproduzione inizierà immediatamente dopo il caricamento completo del file HTML. Possiamo però combinare queste due opzioni. In questo caso, il tag di incorporamento del video sarà simile al seguente:

Possiamo specificare quante volte il video deve essere riprodotto utilizzando il parametro loop a questo scopo. Il valore di questo parametro è un numero che specifica il numero di volte in cui il video clip verrà ripetuto. Tuttavia, se vogliamo che il video venga riprodotto continuamente, senza un numero fisso di ripetizioni, allora dovremmo utilizzare il valore infinito. E utilizzando il parametro loopdelay, possiamo impostare un ritardo temporale tra le ripetizioni di un video clip. Il valore di questo parametro è un numero che indica il periodo di tempo in millisecondi. Diamo un'occhiata all'uso di questi parametri utilizzando come esempio il seguente frammento di codice:

Qui specifichiamo esplicitamente che il video clip verrà riprodotto due volte immediatamente dopo il caricamento della pagina Web, con un ritardo di cinque secondi tra le riproduzioni.

In questo caso, controlliamo noi stessi la visualizzazione del file video. Ma possiamo trasferire questa prerogativa ad un utente remoto che caricherà la pagina Web. Per fare ciò, è necessario inserire il tag controlla il parametro senza alcun valore. La presenza di questo parametro nel tag indica chiaramente che i controlli di riproduzione verranno visualizzati insieme al video clip sulla pagina Web.

I parametri che abbiamo considerato sono abbastanza sufficienti per la corretta integrazione dei file video nel contenuto di una pagina Web. Consideriamo un esempio dettagliato (Fig. 1.14).

Listato 1.14

"http://www.w3.org/TR/html4/strict.dtd">
.

<р>Testo semplice.

Riso. 1.14. Finestra del browser che mostra il risultato del file mostrato nel Listato 1.14

Naturalmente, poiché la procedura per inserire un frammento video nel corpo di una pagina Web è un caso speciale di inserimento di grafica, tutti gli altri parametri applicabili al tag vengono applicati al tag di inserimento del frammento video , come parametri di allineamento, indicazione esplicita della dimensione e altri.

Le funzionalità multimediali includono anche la progettazione del suono di una pagina Web. Ma possiamo utilizzare l'audio solo come formato di sfondo, ovvero un determinato file audio verrà riprodotto sul computer dell'utente remoto dopo aver caricato la pagina Web. Se ovviamente sul suo computer è installata una scheda audio, cioè sul computer dell'utente remoto viene inizialmente scaricato un file HTML con una pagina Web, quindi tutti gli altri file utilizzati nella progettazione di questa pagina Web, come file grafici, vengono scaricati video e clip audio.

Pertanto, affinché la visualizzazione di una pagina Web sia accompagnata dalla riproduzione del suono, è necessario inserire il tag nel codice della pagina . Il tag non viene inserito nel corpo della pagina Web, ma nel suo titolo, cioè tra i tag E. Questo tag ha un parametro src obbligatorio, il cui valore è l'URL del file audio incluso. Va notato che i browser sono garantiti per riconoscere e riprodurre file audio MIDI e WAV. La riproduzione di altri formati, come MP3 e Real Audio, è possibile solo quando i moduli aggiuntivi sono collegati ai browser.

Come per i video clip, possiamo impostare il numero di volte in cui un file audio verrà riprodotto utilizzando il parametro loop. Il valore di questo parametro è il numero di ripetizioni. Se desideri riprodurre costantemente un frammento audio, dovresti utilizzare il valore "-1", cioè se vogliamo che un determinato file audio venga riprodotto continuamente durante il caricamento di una pagina Web, dovremmo utilizzare la seguente costruzione:

Con questo si conclude la nostra considerazione sull'uso degli oggetti multimediali e grafici nella progettazione delle pagine Web e si passa alla parte successiva del primo capitolo.

Una delle caratteristiche più interessanti del WWW è la capacità di includere collegamenti a file grafici e multimediali che rendono una pagina web più attraente e interessante. Ciò può includere icone, disegni, fotografie, mappe di immagini e l'uso di dati audio, video e di animazione.

2.2.1. Inserimento di grafica in un documento html

L'importanza delle immagini grafiche nell'aspetto della creazione di documenti elettronici non può essere sopravvalutata; i documenti diventano più espressivi e vibranti e saranno percepiti più facilmente e in modo più naturale. Tuttavia, bisogna sempre ricordare il senso delle proporzioni in ogni cosa. La saturazione eccessiva di un documento con materiale illustrativo distrarrà ingiustificatamente l'attenzione degli utenti dal vero contenuto della pagina e porterà anche a un caricamento più lento della pagina a causa della presenza di un gran numero di immagini.

Gli elementi grafici di una pagina web possono essere suddivisi in tre grandi categorie in base alla loro finalità:

– grafica illustrativa, comprese fotografie di testo di accompagnamento, disegni esplicativi , disegni, diagrammi;

– grafica funzionale, che rappresenta i controlli (pulsanti di navigazione, contatori ed elementi del modulo interattivo);

– grafica decorativa – elementi di design della pagina inclusi per bellezza e non portanti un carico di informazioni (immagini di sfondo, divisori realizzati sotto forma di file grafici, intestazioni e molto altro).

Formati grafici. A causa dell'utilizzo di Internet, il download della grafica richiede un certo tempo. E più breve è questo tempo, più conveniente è per l'utente. Pertanto, i tre formati più popolari attualmente utilizzati per le immagini grafiche sono GIF, JPEG e PNG. Contengono vari algoritmi di compressione delle immagini con perdita di dati, che possono ridurre significativamente la dimensione del file di destinazione.

GIF-formato. Nel 1978, i ricercatori israeliani Jacob Ziv e Abraham Lempel svilupparono un nuovo algoritmo di compressione dei dati per l’epoca senza perdita di dati (LZ78 è il nome del progetto). Alcuni anni dopo, il programmatore americano Terry Welch lo migliorò (LZW) e presentò il suo sviluppo affinché potesse essere utilizzato da tutti.

Nel 1987 Bob Berry creò un formato grafico fondamentalmente nuovo, GIF, basato sull'algoritmo LZW. L'essenza dell'algoritmo di compressione: la riduzione delle dimensioni di un file grafico si ottiene mescolando sfumature simili in una; le informazioni sull'immagine nel file GIF vengono registrate riga per riga, ad es. si tratta di una serie di descrizioni di linee alte un pixel. Proprietà: mescolare tonalità simili in una, operando con una tavolozza fissa di 256 colori.

Il formato GIF viene utilizzato in un documento HTML solo per visualizzare grafica aziendale: diagrammi, loghi, pulsanti, altri elementi di progettazione della pagina e immagini con una tavolozza di 256 colori.

Un'altra proprietà della GIF è l'interlacciamento, ad es. l'immagine non viene caricata interamente, ma in parti (vengono lette la 1a, 5a, 10a riga, poi la 2a, 6a, 11a, ecc. ), cioè sembra manifestarsi.

Nel 1989, CompuServe ha rilasciato una nuova versione di GIF89a, che utilizza il cosiddetto "canale alfa" - che è una maschera della trasparenza dell'immagine - per creare un'immagine con uno sfondo trasparente salvandola insieme al file. I colori saturati come trasparenti diventano invisibili nel browser.

Un'altra caratteristica di GIF89a è che questo formato consente di memorizzare diverse immagini diverse in una formula con un titolo fisico, visualizzandole sullo schermo in sequenza una dopo l'altra.

JPEG-formato. Lo standard JPEG viene utilizzato per pubblicare fotografie, riproduzioni di dipinti e immagini con un gran numero di colori e transizioni di colore. Formato JPEG, creato sulla base di un algoritmo di compressione delle immagini unidirezionale con perdita di qualità, che codifica non elementi identici, come gli algoritmi LZW, ma intervalli interpixel.

Il meccanismo di compressione è costituito da tre fasi.

L'immagine viene convertita in un'immagine a colori LAB, che scompone l'immagine in tre canali indipendenti: L – preservando l'intensità del colore, A e B – per memorizzare le informazioni sul colore.

Compressione: circa tre quarti delle informazioni sul colore vengono rimosse dal modello di colore risultante, quindi l'immagine viene divisa in sezioni di 8x8 pixel e convertita in un array di dati numerici. Il titolo di ogni blocco descrive il colore dominante dell'area, il resto delle informazioni descrive le sfumature meno evidenti.

Nella terza fase di compressione, una certa parte delle informazioni che descrivono le sfumature secondarie viene rimossa dall'array di dati e la quantità di dati rimossi dipende dalla qualità dell'immagine risultante selezionata dall'utente. Infine, il file finito viene compresso secondo l'algoritmo Hoffman, che prevede la sostituzione dei caratteri più frequenti nell'array di dati con una codifica a due bit più compatta.

La decompressione JPEG viene eseguita in ordine inverso.

Il numero massimo di colori che può contenere un'immagine JPEG è 16 milioni.

PNG-formato. Questo formato è stato sviluppato nel 1995 per sostituire il formato GIF dopo che Unisys ha protetto da copyright il suo algoritmo di compressione LZW. Allo stesso tempo sono state sviluppate alcune caratteristiche tecniche, in particolare migliorando la qualità e aumentando il numero di colori supportati.

Abilitazione della grafica inragnatela-pagina. L'integrazione della grafica in un documento HTML viene eseguita utilizzando un singolo tag < IMG >.

L'attributo SRC (source) specifica l'URL dell'immagine (Figura 2.3).

Riso. 2.3. Esempio di visualizzazione con tag < IMG >

Questo attributo è obbligatorio nel tag < IMG > (Tabella 2.2).

Tabella 2.2

Attributi dei tag< IMG>

Fine del tavolo. 2.2

ALTEZZA="215" BORDER="5" ALT="lily">!}

L'utilizzo di un tag in questo esempio consente di posizionare un'immagine da un file sul lato destro della finestra del browser, impostare la dimensione di questa immagine e posizionarla in una cornice (vedere Figura 2.3).