Writing HTML | Riguardo A | FAQ | Riferimenti | Tag | Lezioni | indietro | avanti |

22. Ancora su Immagini e Liste

Vaporizza quelle noiose scatole attorno ai bottoni grafici,

o aggiungi bordi extra, e poi:

Obiettivi

• Creare un link grafico senza bordi a cornice
• Posizionare un bordo a cornice attorno ad un'immagine inlinea
• Scrivere il codice per una lista non ordinata che usi diversi tipi di simbolini
• Scrivere una lista ordinata che enumeri gli elementi con lettere minuscole e maiuscole o con numeri romani piccoli o grandi
• Modificare una lista ordinata per cominciare a contare da un valore positivo qualunque

Lezione

Niente Bordi per i Link ad Immagine

funziona come gli altri link.

Comunque la cornice spesso distrae, specialmente se l'immagine non e' squadrata. L'utente puo' riconoscere un link notando il cambiamento del cursore quando questo passa sull'immagine.

Puoi eliminare la scatola aggiungendo un attributo al tag <img...>:

  <a href="bigpict.gif"><img src="lilpict.gif" border=0>

Abbiamo due posti, nella nostra lezione Volcano Web dove abbiamo link ad immagine -- ti ricordi dove?

La prima e' nel file usa.html, dove una piccola immagine di un sismografo fa da link alla stessa piu' grande. La seconda e' un bottone a freccia sulla pagina msh.html che porta indietro alla lezione,

1. Apri sia usa.html che msh.html
2. Localizza il posto in cui abbiamo una immagine che fa da link a qualcos'altro.
3. Modifica ciascun tag <img src=....> che sia un link in modo che contenga un attributo border=0. Per esempio, nel file ci dovrebbe essere:

     <a href="usa.html"> 
     <img src="../pictures/left.gif" alt="** " border=0> 
     Ritorna alla <i>Volcano Web</i></a>

4. Salva ed Aggiorna nel tuo browser i file usa.html e msh.html.
5. se l'immagine ha perso il suo bordo ma continua a funzionare come link, il lavoro e' fatto.

Mettere i Bordi attorno alle Immagini

bordo di 8 pixel in un'immagine inlinea

<IMG SRC="pictures/disk.gif" WIDTH=48 HEIGHT=40 border=8>

bordo di 8 pixel in un'immagine inlinea, link ad un'altra pagina

<A HREF="page.html">
  <IMG SRC="pictures/disk.gif" WIDTH=48 HEIGHT=40 border=8></a>

Simboletti per Liste Non Ordinate

 <ul type=xxxx>

• type=circle
• type=square
• type=disc [simbolo di default per liste di primo livello]

HTML	Come Risulta
<ul type=square> <li>questo e' l'elemento 1 <li>questo e' l'elemento 2 <li>questo e' l'elemento 3 <li type=circle> Hey! cosa ne pensi di questi simboletti? <li>questo e' un altro elemento <li>e questo un altro <li type=disc> Hey! cosa ne pensi di questi simboletti? </ul>	questo e' l'elemento 1 questo e' l'elemento 2 questo e' l'elemento 3 Hey! cosa ne pensi di questi simboletti? questo e' un altro elemento e questo un altro Hey! cosa ne pensi di questi simboletti?

Nota che il tipo specificato nel tag <li type=xxxx> e' usato da tutti i tags <li> successivi fino a quando non viene selezionato un altro tipo di simboletto.

Ora cambieremo lo stile di simboletto usato nella nostra pagina Progetti di Ricerca (file proj.html).

1. Apri il file proj.html.
2. La prima lista del file e' di tipo ordinato <ol>...</ol> ma lo cambieremo in una di tipo non ordinato e con i cerchietti. Inserisci il tuo codice per questa prima lista:

   
     <ul type=circle>
       <li>Tipo di vulcano
       <li>Posizione geografica 
       <li>Nome, distanza, e popolazione della citta' vicina piu' grande
       <li>Data dell'eruzione piu' recente e quella della piu' distruttiva
       <li>Altri eventi associati con l'ultima eruzione (terremoti, colate 
       di fango, inondazioni, etc)
      </ul>

3. Salva ed Aggiorna nel tuo web browser. Puoi confrontare i tuoi sforzi con questo esempio di come la tabella dovrebbe risultare a questo punto.

Stili e Valori per Liste Ordinate

Cifre Arabe	Maiuscole	Minuscole	Romane Maiuscole	Romane Minuscole
<ol type=1>	<ol type=A>	<ol type=a>	<ol type=I>	<ol type=i>
Io sono primo! Io secondo! Io terzo! Io sono quarto! Io quinto!	Io sono primo! Io secondo! Io terzo! Io sono quarto! Io quinto!	Io sono primo! Io secondo! Io terzo! Io sono quarto! Io quinto!	Io sono primo! Io secondo! Io terzo! Io sono quarto! Io quinto!	Io sono primo! Io secondo! Io terzo! Io sono quarto! Io quinto!

Presentiamo un esempio dell'uso di liste ordinate dentro liste ordinate per creare contorni -- con l'attributo type possiamo ottenere pagine con formato standard:

1. Il Formaggio nella Preistoria
   1. Africa
      1. Paesi Lontani
      2. East Coast
   2. Asia
   3. Europa
      1. Francia
         1. Incisioni nelle caverne descrivono la produzione di formaggio
         2. Rituali funebri inferti da avanzi di formaggio secco
      2. Isole Britanniche
   4. Nord America
2. Il Formaggio nel Medioevo
   1. King Arthur's Longhorn
   2. Cheddar piccante per le Crociate
3. Il Formaggio nell'Era Spaziale

Cifre Arabe	Maiuscole	Minuscole	Romane Maiuscole	Romane Minuscole
<ol type=1 start=11>	<ol type=A start=11>	<ol type=a start=11>	<ol type=I start=11>	<ol type=i start=11>
Io sono undicesimo! Io dodicesimo! Io tredicesimo! Io sono quattordicesimo! Io quindicesimo!	Io sono undicesimo! Io dodicesimo! Io tredicesimo! Io sono quattordicesimo! Io quindicesimo!	Io sono undicesimo! Io dodicesimo! Io tredicesimo! Io sono quattordicesimo! Io quindicesimo!	Io sono undicesimo! Io dodicesimo! Io tredicesimo! Io sono quattordicesimo! Io quindicesimo!	Io sono undicesimo! Io dodicesimo! Io tredicesimo! Io sono quattordicesimo! Io quindicesimo!

Ed infine puoi cambiare la sequenza di numerazione dentro una lista aggiungendo un attributo value=z al tag <li>. Guarda questo esempio:

HTML	Come Risulta
<ol type=A start=5><i> Leggi Importanti per il Formaggio</i> <li>Cheese Curing Act del 1905 <li>Milk Content Ruling del 1923 <p> <li value=12>Cheese Import Tariff del 1942 <li>Cheese Freshness Codes del 1942 <p> <li value=1>Cheese Values Act del 1789	Leggi Importanti per il Formaggio Cheese Curing Act del 1905 Milk Content Ruling del 1923 Cheese Import Tarif del 1942 Cheese Freshness Codes del 1942 Cheese Values Act del 1789

Potrebbe non essere chiaro quando dovresti usare questi tags (soprattutto da questo stupido esempio!) -- tienteli solo in mente come potenziali strumenti per il tuo web writing. Dimostreremo ancora una volta il loro uso nella nostra pagina Progetti di Ricerca (file proj.html). Se ricordi, nella nostra lezione sulle tabelle abbiamo diviso in due colonne una lista non ordinata di siti di riferimento. Cambiamola in una ordinata e usiamo l'attributo type per metterci le minuscole. Poiche' ora che si hanno due liste singole, dovresti capire perche' usiamo anche l'attributo start.

1. Apri il tuo file proj.html nel text editor.
2. Guarda la tabella che abbiamo creato sotto la sezione Riferimenti. Cambia sia i tag <ul> e </ul> che i <ol type=a> e </ol>.
3. Ora, abbiamo 6 elementi nella prima lista e quindi la seconda lista deve partire dal numero 7. Modifica cosi' il tag <ol>:

     <ol type=a start=7>

4. Salva ed Aggiorna nel tuo web browser. Puoi confrontare il tuo file con questo esempio di come dovrebbe essere ora la tabella. La prima colonna dovrebbe andare da "a" ad "f" e la seconda da "g" a "l"

Controlla il Tuo Lavoro

Verifica

1. Come ti liberi della cornice per il link grafico?
2. Come fai a mettere un bordo da 20 pixel? Di che colore sara'?
3. Come fai a cambiare i simbolini per una lista non ordinata?
4. Devi per forza usare gli stessi simbolini per un'intera lista? Se no, come fai a cambiarli a meta' lista?
5. Come fai a creare una lista che segni gli elementi con numeri romani?

Pratica Indipendente

<ol>...</ol>

Prossimamente....

VAI A.... | Indice Delle Lezioni | indietro: "Tabelle" | avanti: "Mappe ad Immagini" |