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

20. Allineamenti Speciali

Obiettivi

• Creare testo che sia allineato al centro della pagina.
• Allineare immagini e blocchi di testo.
• Creare testo che sia giustificato a destra.

Lezione

Allineamento del Testo

Questo ci porta in una di quelle pericolose situazioni in cui Netscape si contrappone all'HTML "standard". Netscape introdusse un'estensione HTML -- il tag <center>...</center> -- che allinea con il centro della pagina web qualsiasi cosa contenuta al suo interno. Ti sembra che abbia senso? Beh, se parli con un purista dell'HTML, l'allineamento e' un attributo. Un codice piu' generale per un allineamento centrato e' una variazione del tag <p>:

  <p align=center>
  blah blah blah
  <img src="file.gif"><br>
  blah blah
  </p>

Molti altri browser e gli standard di HTML 3.2 ora supportano il tag di Netscape <center>...</center>. Ricorda che se un browser non riconosce un tag, semplicemente lo ignora.

Per gli effetti dell'allineamento centrato, confronta:

Il Formaggio nella Storia Il formaggio e' stato presente durante molti grandi avvenimenti Quando Magellano navigo' attraverso gli angusti Stretti, egli mangiava formaggio. Quando le truppe Alleate sbarcarono in Europa, il formaggio era li'. Quando Neil Armstrong impresse le sue orme sulla luna, egli aveva appena concluso uno snack a base di formaggio. ritorna all'home page del formaggio

con questo esempio che allinea al centro il contenuto:

Il Formaggio nella Storia Il formaggio e' stato presente durante molti grandi avvenimenti Quando Magellano navigo' attraverso gli angusti Stretti, egli mangiava formaggio. Quando le truppe Alleate sbarcarono in Europa, il formaggio era li'. Quando Neil Armstrong impresse le sue orme sulla luna, egli aveva appena concluso uno snack a base di formaggio. ritorna all'home page del formaggio

Ora modificheremo le nostra copertina (index.html) per usare il tag <center>...</center> nella lista delle sezioni di lezione. Faremo anche altri cambiamenti per migliorare il suo aspetto.

1. Apri il file index.html nel tuo text editor.
2. Trova la sezione che fa:

     <B>In questa Lezione...</B>
     <ul>
     <i>
     <li><A HREF="intro.html">Introduzione</A>
     <li><A HREF="term.html">Glossario</A>
     <li><A HREF="usa.html">Luoghi vulcanici negli USA</A>
     <li><A HREF="mars.html">Luoghi vulcanici su Marte</A>
     <li><A HREF="proj.html">Progetti di Ricerca</A>
     </i>
     </ul>

   e sostituiscila col seguente HTML:

     <p align=center>
     <font size=+1>
     <i>
     <A HREF="intro.html">Introduzione</A><br>
     <A HREF="term.html">Glossario</A><br>
     <A HREF="usa.html">Luoghi vulcanici negli USA</A><br>
     <A HREF="mars.html">Luoghi vulcanici su Marte</A><br>
     <A HREF="proj.html">Progetti di Ricerca</A><br>
     </i>
     </font>
     </p>
   

3. Salva ed Aggiorna nel tuo web browser.

NOTA: Osserva per bene le modifiche che abbiamo apportato. Quest'intera sezione e' racchiusa dai tag d'allineamento <p align=center>..</p>. La lista non ordinata che avevamo costruito nella lezione 6 sarebbe risultata centrata in un modo strano -- i simbolini sarebbero stati sfasati. Cosi' abbiamo rimosso la struttura <ul><li>...<li>...</ul>. I tag <br> alla fine di ogni riga forzeranno una rottura della linea stessa. Ed infine, abbiamo aggiunto un tag <font>...</font> per aumentare la dimensione del testo.

Se vuoi puoi anche usare i tag <center>...</center> al posto di <p align=center>...</p>

Ogni intestazione <hN>...</hN> dovrebbe essere centrata, aggiungendo l'attributo:

  <hN align=center>blah blah blah</hN>

1. Apri i tuoi file HTML nel tuo text editor.
2. Per ciascuno di essi, inserisci il testo che appare vicino alla parte alta, nel tag <h1> o <h2>, seguendo questo esempio dal file intro.html :

     <h2>Introduzione</h2>

   a

     <h2 align=center>Introduzione</h2>

3. Salva ed Aggiorna nel tuo web browser.

NOTA: Esiste anche un attributo d'allineamento per il tag <hr> che e' rilevante per le altre opzioni che abbiamo rivisto nella lezione 19 "Semplici Divisioni Orizzontali". Quando specifichi una lunghezza minore per una barra orizzontale, puoi anche specificare se la vuoi allineata a destra o a sinistra (il valore predefinito e' al centro):

<hr size=8 width=60% align=right> : <hr size=8 width=60% align=left> :

Allineare Immagini e Testo

Con l'attributo align nel tag <img> possiamo specificare se vogliamo avere un'immagine allineata con il margine destro o sinistro della pagina. Ma ancora, possiamo avere qualsiasi codice successivo a "riempire" lo spazio vuoto. L'HTML per fare cio' é:

  <img src="filename.gif" align=right>
  <img src="filename.gif" align=left>

no attributo align align=bottom (default se non specificato)
Il Formaggio nella Storia Il formaggio e' stato presente durante molti grandi avvenimenti Quando Magellano navigo' attraverso gli angusti Stretti, egli mangiava formaggio. Quando le truppe Alleate sbarcarono in Europa, il formaggio era li'. Quando Neil Armstrong impresse le sue orme sulla luna, egli aveva appena concluso uno snack a base di formaggio.
flusso di testo align=left
Il Formaggio nella Storia Il formaggio e' stato presente durante molti grandi avvenimenti Quando Magellano navigo' attraverso gli angusti Stretti, egli mangiava formaggio. Quando le truppe Alleate sbarcarono in Europa, il formaggio era li'. Quando Neil Armstrong impresse le sue orme sulla luna, egli aveva appena concluso uno snack a base di formaggio.

Accorcia ed allunga la finestra del tuo browser per vedere la tua pagina come risulta ora.

Un'altra nota. Ci saranno momenti in cui il testo od altri elementi allineati con l'immagine saranno piuttosto corti e tu vorrai forzarli a mettersi sotto la figura. C'e' un attributo per il tag <br> per togliere l'allineamento:

  <br clear=left>
  <br clear=right>
  <br clear=all>

Ora torneremo alla pagina index.html per riformattare la pagina d'apertura. L'immagine e' carina, ma prende molto spazio verticale per avere il testo che segue la figura. Useremo l'allineamento immagine/testo per mettere un po' di testo al lato della figura.

1. Apri il file index.html.
2. Trova la parte che fa:

     <img alt="Una Lezione su:"   src="../pictures/lava.gif">
     <p>
     <B><font size=+4 color=#FF66FF>V</font>
     <font size=+3 color=#DD0055>OLCANO WEB</font></B>
     <BLOCKQUOTE>
     <B><I><font size=+1>"La natura urla selvaggiamente,
     distruggendo le terre"</font></I></B><br>
     -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm"> Plinio il Vecchio</A>,  
     il quale mori' di asfissia dopo aver osservato la distruzione
     di Pompei a causa dell'eruzione
     del 79 A.C. del Vesuvio.
     </BLOCKQUOTE>
   
     In questa lezione userai la Rete per cercare informazioni sui vulcani
     e poi scrivere il tuo resoconto
     sui risultati.

   e sostituiscilo con:

     <img alt="A Lesson on:" src="../pictures/lava.gif"   align=left>
     <B><I><font size=+1>
     "La natura urla selvaggiamente, distruggendo le terre"
     </font></I></B><br>
     -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
   Plinio il Vecchio</A>, il quale mori' di asfissia dopo aver osservato la distruzione di Pompei a causa dell'eruzione
   del 79 A.C. del Vesuvio.
     <p>
     <B><font size=+4 color=#FF66FF>V</font>
     <font size=+3 color=#DD0055>OLCANO WEB</font></B>
     <p>
    In questa lezione userai la Rete per cercare informazioni sui 
    vulcani e poi scrivere il tuo resoconto
    sui risultati.
     <br clear=left>

3. Salva ed Aggiorna

NOTA: Tutto tra il tag <img... align=left> ed il tag <br clear=left> sara' adiacente alla figura -- l'immagine e' allineata a sinistra e l'altro codice riempie lo spazio vuoto.

Abbiamo messo la quotazione sopra anche per attirare l'attenzione. Con questo nuovo aspetto, il tag <blockquote> non era efficiente, cosi' e' stato rimosso.

Allineamento/Giustificazione del Testo

  <div align=left>...</div>
  <div align=right>...</div>
  <div align=center>...</div>

Ora useremo questo tag per rendere la nostra quotazione d'apertura con il testo allineato a destra:

1. Apri il tuo file index.html.
2. Aggiungi i tags <div> e </div> come mostrato sotto:

     <div align=right>
     <B><I><font size=+1>
     "La natura urla selvaggiamente, distruggendo le terre"
     </font></I></B><br>
     -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
   Plinio il Vecchio</A>, il quale mori' di asfissia dopo aver osservato la distruzione di Pompei a causa dell'eruzione
   del 79 A.C. del Vesuvio.
     <p>
     <B><font size=+4 color=#FF66FF>V</font>
     <font size=+3 color=#DD0055>OLCANO WEB</font></B>
     </div>

3. Salva ed Aggiorna

Controlla il Tuo Lavoro

Verifica

1. Come fai ad allineare certe parti della tua pagina con il centro?
2. Qual e' il modo corretto con cui allineare un'immagine inlinea con il lato destro della web page?
3. Come fai a creare testo giustificato a destra?

Pratica Indipendente

Prossimamente....

VAI A.... | Indice Delle Lezioni | indietro: "Semplici Divisioni Orizzontali" | avanti: "Tabelle" |