HTML/Organizzare il testo: differenze tra le versioni

Wikibooks, manuali e libri di testo liberi.
Contenuto cancellato Contenuto aggiunto
Diablo (discussione | contributi)
mNessun oggetto della modifica
Diablo (discussione | contributi)
m +cat
Riga 190: Riga 190:
Il testo sarà si muoverà all'infinito da sinistra a destra.
Il testo sarà si muoverà all'infinito da sinistra a destra.
{{Nota|titolo=Nota|larghezza=100%|contenuto=Il tag <nowiki><marquee></nowiki> è proprietario di Microsoft, non rientra quindi nelle speficiche del W3C, pertanto ve ne sconsigliamo l'uso|}}
{{Nota|titolo=Nota|larghezza=100%|contenuto=Il tag <nowiki><marquee></nowiki> è proprietario di Microsoft, non rientra quindi nelle speficiche del W3C, pertanto ve ne sconsigliamo l'uso|}}

[[Categoria:Linguaggio HTML]]

Versione delle 15:50, 18 ago 2006

Template:Linguaggio HTML

Titoli

I titoli sono molto utili nelle pagine per dare maggior visiblità a un elemento che, solitamente, racchiude ciò che sarà possibile leggere nei paragrafi che seguono. Vi sono 6 livelli di titoli, il primo è quello più grande e man mano che si va verso il sesto il titolo risulterà più piccolo.

I titoli sono automaticamente visualizzati dall'interprete in grassetto e lasciano prima e dopo di sè, una riga vuota (in modo da essere più leggiblie). La sintassi per definire un titolo è la seguente: <h1>Inseriamo il titolo del paragrafo</h1>.
Al posto del numero uno ovviamente si possono inserire i numeri: 2,3,4,5,6 a seconda della grandezza che si desidera visualizzare.

Paragrafi

Vi sono essenzialmente tre tag che svolgono la funzione di suddivisione del testo: <p>,<div>,e <span>. Le differenze tra questi tag sono minime ma abbastanza determinati, nel contesto della pagina, per ciò che verrà visualizzato dal browser.

Tag Significato
<p> Lascia una riga vuota prima e dopo il testo al suo interno
<div> Non lascia righe vuote, dopo il testo al suo interno va a capo
<span> Non lascia nè linee vuote, nè va a capo
  • <p> sta per paragraph ed è infatti l'elemento che rappresenta la nostra concezione di paragrafo.
  • <div> sta per division e definisce un blocco di testo al suo interno.
  • <span> fa da contenitore al testo presente al suo interno, viene molto usato per essere altamente personalizzabile attraverso i fogli di stile.

Ecco un esempio:

<body>
 <p>Questo è un paragrafo</p>
<div>A cui seguono due blocchi di testo, questo è il primo.</div>
<div>Questo è il secondo</div>
<span>Questo è un contenitore niente di più</span> </body>

Approfondimento

I tag <p>,<div>,e <span> supportano sia l'attributo class che id, essenziali per l'interazione con i fogli di stile.

Linee divisorie

Per impaginare meglio un testo si potrebbe rendere necessaria una linea che divida ad esempio un articolo dall'altro il tag che svolge questa funzione è <hr>. I suoi principali attributi sono width che ne indica la larghezza, richiede un valore in pixel o in precentuale; size che ne regola le dimensioni, il cui valore viene espresso in pixel di default 2; e infine align che ci permetterà di allineare la barra rispettivamente a destra, al centro o a sinistra.

Ecco un esempio:

 <body>
   <h1>Wikibooks</h1>
   <hr width="100%" size="3">
   <div>Questo è una guida a contenuto aperto</div>
 </body>

Nota

Il tag <hr> non prevede un tag di chiusura

Andare a capo

Il tag che svolge la funzione per andare a capo è <br>. Alcuni webmaster gli preferiscono dei tag <p> senza il tag di chiusura perchè sono più veloci da scrivere però così facendo lasciano il paragrafo aperto incorrendo ad un errore sintattico.

Esempio di codice sintatticamente sbagliato:

 <body>
   <h1>Wikibooks</h1>
   <p>
   <p>
   <p>
   <div>Questo è una guida a contenuto aperto</div>
 </body>

Ecco la versione corretta:

 <body>
   <h1>Wikibooks</h1>
   <br>
   <br>
   <br>
   <div>Questo è una guida a contenuto aperto</div>
 </body>

Nota

Il tag <br> non prevede un tag di chiusura

Testo preformattato

Indica del testo che verrà visualizzato così come è scritto all'interno del documento HTML, rispettando rigorosamente gli spazi. Questo tag è molto usato ad esempio nei forum per rappresentare il sorgente delle applicazioni.
La sua sintassi è la seguente: <pre>Inserite del testo con diversi spazi di separazione tra le parole e il browser lo riporterà così come l'avete scritto.</pre>

Elenchi

Per definire un elenco o lista nell'HTML abbiamo a disposizione diversi tag che ci permetto di creare tre tipi di elenchi: elenco ordinato, elenco non ordinato, e infine elenco di definizione.

Elenchi ordinati

Gli elenchi ordinati vengono definiti attraverso il tag <ol> che sta per Ordered List. Gli elementi dell'elenco, devono essere inclusi all'interno dei tag <li></li> ossia List Item. Ogni elemento verrà automaticamente preceduto da un numero.

Esempio di elenco ordinato:

 <body>
 <ol>
   <li>1° Elemento in ordine numerico</li>
   <li>2° Elemento in ordine numerico</li>
   <li>3° Elemento in ordine numerico</li>
 </ol>
 </body>

Elenchi non ordinati

Gli elenchi non ordinati, le cui voci sono precedute da un pallino, vengono definiti attraverso il tag <ul> che sta per Unordered List. Gli elementi dell'elenco, devono sempre essere inclusi all'interno dei tag <li></li>.

Esempio di elenco non ordinato:

 <body>
 <ul>
   <li>Elemento uno</li>
   <li>Elemento due</li>
   <li>Elemento tre</li>
 </ul>
 </body>

E' possibile anche cambiare l'immagine del pallino attraverso l'attributo type i cui possibili valori sono:

  • circle: visualizzarà un pallino vuoto dentro (bianco al suo interno).
  • disc: visualizzerà un pallino pieno (nero al suo interno) è il valore di default.
  • square: visualizzerà un quadratino pieno (nero al suo interno).

I browser che non supportano questo attributo lo ignoreranno.

Esempio di elenchi con diversi stili:

 <body>
   <ul type="disc">
      <li>Elemento con pallino</li>
      <li>Elemento con pallino 2</li>
   </ul>
   <ul type="circle">
      <li>Elemento con pallino vuoto</li>
      <li>Elemento con pallino vuoto due</li>
    </ul>
    <ul type="square">
      <li>Elemento con quadratino pieno</li>
      <li>Elemento con quadratino pieno 2</li>
    </ul>
 </body>

Elenchi di definizioni

Gli elenchi di definizioni sono degli elenchi un po' particolari che prevedono due parti:

  • Un elemento di testo
  • Una spiegazione dell'elemento

Questa caratteristica renderà questo tipo di elenchi utili per piccoli glossari, o anche per la gestione delle FAQ sul proprio sito.

Per poterle usare sono necessari tre tag: <dl>, Definition List; <dt>, Definition Term; e <dd>, Definition Defined. Il primo tag serve per contenere l'elenco ed indicare di che tipo è, in questo caso di definizione. Il secondo tag serve per specificare la parola che verrà spiegata o meglio definita. Il terzo tag serve per contenere la spiegazione che verrà rientrata rispetto alla parola da definire.

Vediamo un esempio che chiarirà meglio le idee:

 <body>
  <dl>
    <dt>Wikibooks</dt>
      <dd>Stiamo sviluppando e distribuendo libri di testo, 
   manuali e altri testi   educativi, tutti gratis e a contenuto aperto.</dd>
    <dt>Wikipedia</dt> 
      <dd>Wikipedia è un'enciclopedia libera</dd>
  </dl>
 <body>

Testo dinamico

Testo lampeggiante

Un modo molto semplice per far apparire e scomparire rapidamente il testo, ottenendo un lampeggiamento, è l'uso del tag <blink>.

Ecco un esempio:

 <body>
   <blink>Testo lampeggiante</blink>
 </body>

Nota

Il tag <blink> non rientra nelle speficiche del W3C, pertanto ve ne sconsigliamo l'uso

Testo scorrevole

Per inserire un testo scorrevole è necessario far uso del tag <marquee> i cui principali attributi sono direction, i cui valori possono essere left e right; height e width, i cui valori possono essere espressi o in pixel o in precentuale e deteminano l'area di sfondo su cui si muoverà il testo; loop, il cui valore può essere un numero e determina quante volte dovrà essere visualizzata la scritta (-1 o infinite per far sì che venga mostrata all'infinito).

Ecco un esempio:

 <body>
   <marquee direction="left" width="100%" height="10%" loop="-1">Testo scorrevole</marquee>
 </body>

Il testo sarà si muoverà all'infinito da sinistra a destra.

Nota

Il tag <marquee> è proprietario di Microsoft, non rientra quindi nelle speficiche del W3C, pertanto ve ne sconsigliamo l'uso