Testo + Immagine = Multimediale
Multimediale + WWW = Global HyperMedia
Ci siamo?
"grande M".Il codice HTML per quest'immagine inlinea e':
<img src="filename.gif">
dove filename.gif e' il nome di un file GIF che risiede nella stessa directory/folder del tuo documento HTML. Per "InLinea" si intendono immagini che il web browser visualizzera' in mezzo al testo.
Nota come il testo segua immediatamente la "Grande M" man mano che si procede. Cosa dobbiamo fare se, invece, vogliamo che la "Grande M" stia in una sua riga? Per forzare l'immagine ad apparire in una linea separata,
possiamo semplicemente inserire il tag paragraph prima del tag image:
<p> <img src="filename.gif">
 |
|
sta per Maricopa Community
Colleges
creata nella Valley of the Sun, metropolitan Phoenix, Arizona. La targa della nostra macchina dice Stato del Grand Canyon...
|
|
|
sta per Maricopa Community
Colleges creata in Valley of the Sun, metropolitan Phoenix, Arizona. La targa della nostra macchina dice Stato del Grand Canyon...
|
|
|
sta per Maricopa Community
Colleges creata in Valley of the Sun, metropolitan Phoenix, Arizona. La targa della nostra macchina dice Stato del Grand Canyon...
|
Nota come il testo si allinei per una sola riga... (restringi o allarga la finestra del tuo programma per vedere cosa succede). Con HTML 2.0, non puoi ottenere blocchi di testo adiacenti ad un'immagine. In una lezione successiva vedrai un modo per allineare blocchi di testo in modo che questi scorrano attorno i lati di un'immagine.
In quest'esercizio, aggiungerai alla tua lezione un'immagine introduttiva di un vulcano.
<img src="lava.gif">Questo codice inserira', nella parte piu' alta della pagina, l'immagine della lava che tu hai scaricato nella lezione precedente.
Con queste condizioni, un utente con un tipo di browser "solo-testo" vedra' un elemento di rimpiazzo simile a quello presente nella parte alta della pagina della nostra lezione:
|
[IMAGE]
Volcano Web
In questa lezione userai la Rete per cercare informazioni sui
|
<img alt="Una Lezione su:" src="lava.gif">L'attributo alt="..." sostituisce l'elemento di rimpiazzo con una stringa di testo che in un web browser "solo-testo" (o quando il caricamento delle immagini e' disattivato), dovrebbe ora apparire cosi':
|
Una Lezione Su
Volcano Web
In questa lezione userai la Rete per cercare informazioni sui
|
A questo punto, digita lo stesso testo nel tuo file HTML per il tag <img> che visualizza la figura con il vulcano.
Il codice HTML per includere quest'opzione e':
<img src="filename.gif" width=X height=Y >dove X e' la larghezza dell'immagine e Y e' l'altezza dell'immagine in pixel.
Eventualmente puoi usare un tipo di programma grafico o di utility per ricavare questi numeri. Un altro modo per trovare le dimensioni di un'immagine e' quello di caricarla nel tuo web browser -- dovresti essere in grado di fare un drag and drop dell'icona dell'immagine nella finestra del tuo browser -- e l'altezza e la larghezza saranno visualizzate nella barra del titolo del browser (ora come ora funziona solo con Netscape).
Per il nostro esempio in questa lezione, l'immagine lava.gif e' 300 pixel in larghezza e 259 pixel in altezza. Quindi dovresti scrivere nel tuo file volc.html quanto segue:
<img alt="Una Lezione su:" src="lava.gif" width=300 height=259>
NOTA: l'ordine degli attributi all'interno del tag <img> non importa.Spesso ci viene chiesto se sia possibile variare le dimensioni dell'immagine inserendo numeri diversi da quelle che sono l'altezza e la larghezza attuali della figura. La risposta e' si ma il risultato potrebbe non essere quello sperato. Se si inseriscono numeri maggiori (per ampliare l'immagine) il risultato sara' una figura "a strisce". A volte questo puo' essere un effetto utile per immagini con ampie aree di colori pieni. Dai un'occhiata al nostro esempio Da Grande A Piccolo. Se usi numeri minori (per rimpicciolire l'immagine) il risultato potrebbe essere un'immagine distorta. In piu' si debbono scaricare sempre la stessa quantita' di informazioni che per visualizzare la figura a dimensioni originali, quindi non c'e' nessun risparmio in termini di tempo di download. Ogni ridimensionamento di un'immagine richiede "lavoro" extra da parte del web browser che si deve ricalcolare il layout della pagina.
Potresti anche provare per conto tuo e fare esperimenti! Ci potremmo anche essere sbagliati!
Puoi anche specificare la dimensione dell'immagine InLinea anche come percentuale delle dimensioni correnti della pagina web, in modo che l'immagine si ridimensionera' da sola se gli utenti aumentano o riducono le dimensioni delle loro finestre web. Dai un'occhiata al nostro esempio di Scale Percentuali. Caveat Emptor! Potrebbe non funzionare su tutti i web browser!
Se vedi una iconcina con un punto interrogativo:
|
blah blah blah blah blah blah blah blah blah blah blah blah
|
prima controlla che il file HTML e l'immagine GIF siano nella stessa folder/directory. Poi, potresti assicurarti che il nome del file digitato nel <img... > corrisponda al nome del file GIF.
NOTA: Alcuni computer system (UNIX) sono case sensitive per i nomi dei file. Questo vuol dire che le maiuscole non hanno lo stesso valore delle minuscole e quindi che il file "lava.GIF" NON e' uguale al "lava.gif". Altri computer (Macintosh) li considerano come lo stesso file. Anche se il tuo computer non fa questa differenza, ti suggeriamo di essere coerente nel nominare i file nel modo con cui ci si riferisce nel tuo codice HTML e di usare lettere minuscole. (Molti server WWW girano su UNIX).
The Internet Connection at MCLI is
Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing
HTML