Guida HTML

Nella grafica cartacea con "stile di un testo" si intende la variante del "tondo", del "corsivo", o del "grassetto" di un carattere tipografico.

Nel parlare di stili del testo in HTML solitamente si suddividono i tag in grado di attribuire lo stile al testo in stili fisici e stili logici:

• vengono definiti come fisici quei tag che definiscono graficamente lo stile del carattere, indipendentemente
  dalla funzione del contenuto del tag
• vengono definiti come logici quei tag che forniscono anche informazioni sul ruolo svolto dal contenuto del
  tag, e in base a questo adottano uno stile grafico

Gli stili fisici

I principali stili fisici sono:

PHP_FUNCTION
{
 zval **parameters;
 zval *value;
 char* str;

 

Di fatto i tag <b> e <i> sono molto utilizzati, perché consentono di cambiare lo stile del testo al volo.

Gli stili logici

Come abbiamo visto gli stili logici forniscono anche informazioni sul contenuto e la loro formattazione è
spesso lasciata al browser con risultati a volte deludenti. Proprio per questo gli stili logici sono entrati in disuso e sono poco usati.

Riportiamo di eseguito i principali stili logici, per completezza, ma non sarà necessario ricordarseli.

Approfondimenti

Come si può vedere molti tag (logici e fisici) tradiscono l’origine scientifica e informatica del Web (sono
presenti tag per blocchi di codice di programmazione, per definizioni, per l’indicazione delle variabili…).

Sorprendentemente nessuno dei tag fisici o logici è stato dichiarato "deprecato" dal W3C, ma anzi tutti
questi tag sono passati dall’HTML 3.2 originario fino all’XHTML (passando illesi attraverso l’HTML 4).

Per quel che riguarda i tag fisici: a rigor di logica lo stile "grassetto" dovrebbe essere ottenuto con i fogli
di stile (così come tutte le formattazioni), ma evidentemente la possibilità di ottenere un testo in grassetto semplicemente scrivendo "<b>testo</b>" è troppo comoda per poter essere considerata obsoleta.

Per quel che riguarda i tag logici: in realtà questo tipo di tag offrono un ulteriore aiuto al webmaster anche in
un approccio a fogli di stile. Se infatti si ha l’accortezza di ridefinire i tag all’interno della definizione degli stili, si hanno molte occasioni di utilizzare una formattazione mirate a seconda della funzione del contenuto: in quest’ottica, il fatto che alcuni tag logici non restituiscano nessun rendering particolare è addirittura un invito a ri-definire lo stile del tag.

Adesso che abbiamo scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, con la
sintassi:

La scelta del colore può essere effettuata
nello stesso momento in cui si sceglie il tipo di carattere (dal
momento che "face" e "color" sono entrambi
attributi del tag "font"). La sintassi è:

Una volta scelto il colore possiamo sempre decidere
di cambiarlo:

La seconda sintassi è preferibile alla
precedente, perché la scelta del tipo di carattere viene
effettuata una sola volta, evitando così di scrivere del
codice inutile. Da notare che per evitare la ripetizione i due tag
sono annidati l’uno dentro l’altro.

Le dimensioni del testo

Le dimensioni del testo si attribuisco mediante
l’attributo "size" del tag font.

Ci sono due modi per dare attribuire le dimensioni al
testo tramite il tag <font>:

• valori interi da 1 a 7


• valori relativi alla dimensione di base del tag font (di default "3")

Nel caso dei valori interi, ecco la scala di grandezza:

Nel caso dei valori relativi alla dimensione di base è possibile "spostarsi" nella scala di grandezza
del <font> utilizzando i segni "+" e "-".

Abbiamo detto che la grandezza del font di base di default nel browser è 3.

Dunque se utilizziamo un size="+2", vuol dire che la dimensione del font deve essere di 2 misure più
grande della dimensione del font di base, quindi avremo un font di grandezza 5. Vediamo l’esempio:

Come si può vedere le due sintassi sono
equivalenti.

La grandezza del font di base può anche esser
cambiata:

<basefont size="1">

<font size="+2">

Testo di 2 grandezze superiore al font di base, sopra definito.

</font>
<br>
<font size="3">


Testo di grandezza 3.
</font>
<br><br>
<basefont
size="2">

<font size="+2">

Testo di 2 grandezze superiore al font di base, sopra ridefinito.

</font>
<br>
<font size="3">


Testo di grandezza 3.
</font>

Come si può vedere nella pagina esemplificativa.

È importante evitare di cadere nell’errore di pensare che la dimensione relativa faccia riferimento al
precedente tag font. La dimensione relativa fa sempre riferimento alla dimensione del font di base:

Anche se non è corretto farlo, Internet
Explorer consente di utilizzare il tag <basefont> per
impostare in una sola volta il tipo di carattere del testo e il suo
colore, come si
può vedere nell’esempio.

Tuttavia questo tipo di trucco non funziona
correttamente né con Mozilla (e quindi neanche con Netscape 6
o superiore, dal momento che eredita il motore di rendering di
Mozilla), né con Opera.

NOTA BENE

Quando state utilizzando il tag <font> - sia
che utilizziate il size i valori interi, sia che utilizziate le i
valori relativi al tag di base -, in realtà la grandezza del
carattere dipende dalle impostazioni del browser dell’utente
(come già abbiamo visto per i tag "heading").

Con Internet Explorer ad esempio andando in: Visualizza > Carattere.

Se cambiate le dimensioni del carattere, vedrete
cambiare le dimensioni dei font.

Questo appunto per le grandezze da 1 a 7 sono
grandezze anch’esse relative.

Questa caratteristica da un lato è positiva
(permette di ingrandire testi piccoli), dall’altra può
risultare molto fastidiosa per il webmaster.

L’unico modo per fissare il carattere è (ancora una volta) quello di utilizzare i fogli di stile, esprimendo
le dimensioni in pixel.

Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le "liste", che sono sostanzialmente di tre tipi:

• Elenchi ordinati


• Elenchi non ordinati


• Elenchi di definizioni

Tutti e tre i tipi di elenchi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell’elenco. La sintassi ha quindi questa forma:

<elenco>

 <elemento>nome del primo elemento

 <elemento>nome del secondo elemento

</elenco>

come si può vedere, il tag che individua l’elemento della lista non ha bisogno di chiusura (la sua chiusura, in questo caso, è opzionale). Le liste di definizioni hanno una struttura leggermente diversa che vedremo a breve.

Gli elenchi ordinati

Gli elenchi ordinati sono contraddistinti dall’enumerazione degli elementi che compongono la lista. Avremo quindi una serie progressiva ordinata e individuata da lettere o numeri (se utilizzate un programma di videoscrittura, siete abituati a chiamarli elenchi numerati).

Il tag da utilizzare per aprire un elenco ordinato è <ol> ("ordered list") e gli elementi sono individuati dal tag <li>("list item"):

Da notare che il tag che individua l’elenco lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda (come avviene per il <p>); fa eccezione però l’inclusione di un nuovo elenco all’interno di un elenco preesistente: in questo caso non viene lasciato spazio, néprima, né dopo.

Gli elementi dell’elenco sono sempre rientrati di uno spazio verso destra: tutto questo serve a individuare in modo inequivocabile l’elenco.

Lo stile di enumerazione visualizzata di default dal browser è quello numerica, ma è possibile indicare uno stile differente specificandolo per mezzo dell’attributo type. Ad esempio:

<ol type="a">


  <li>primo elemento

  <li>secondo elemento

  <li>terzo elemento

</ol>

Gli stili consentiti sono:

Gli elenchi non ordinati

Gli elenchi non ordinati sono individuati dal tag <ul> ("unordered list"), e gli elementi dell’elenco sono contraddistinti anch’essi dal tag <li> (in buona sostanza si tratta di quello che i programmi di videoscrittura chiamano elenchi puntati):

<ul>

  <li>primo elemento

  <li>secondo elemento

  <li>terzo elemento

</ul>

il tipo di segno grafico utilizzato per individuare gli elementi dell’elenco di default dipende dal browser, ma di solito è un "pallino pieno". È possibile comunque scegliere un altro tipo di segno:

Elenchi di definizioni

Gli elenchi di definizioni sono individuati dal tag <dl>. Gli elementi dell’elenco (a differenza delle liste ordinate, e delle liste non ordinate) questa volta sono formati da due parti:

Vediamo un esempio:

Approfondimenti

Ovviamente la scelta del tipo di elenco attraverso l’attributo type è deprecato dal W3C, perché si tratta di una caratteristica che riguarda la formattazione, e dunque andrebbe effettuata utilizzando i CSS. Con i fogli di stile c’è anche la possibilità di scegliere un’immagine (ad esempio una GIF) come segno distintivo per l’elenco puntato. Chi fosse interessato ad approfondire può consultare la relativa lezione della guida ai fogli di stile.