Caratteri speciali, fonts e cosmesi del testo

Una delle primissime cose che si notano è la difficoltà di poter lasciare più di uno spazio vuoto fra una parola e l'altra. Html ignora tutti gli spazi in più inseriti con il metodo normale (barra spaziatrice) e ne lascia di fatto uno soltanto.

Se non ve ne siete accorti provate a scrivere una frase mettendo più spazi fra le varie parole, provate poi a guardare il risultato sul vostro browser, noterete con sorpresa che tutti gli spazi sono stati ignorati e sostituiti da uno soltanto. Questo è del tutto normale trattandosi di una caratteristica di HTML.

Come fare per averne più spazio nel caso in cui servisse distanziare le parole?

Con appositi codici che servono esclusivamente ad introdurre spazi vuoti. Questo simbolo   significa non-breaking space, (da notare che non va inserito fra parentesi angolari non essendo un elemento o tag), se ne possono mettere tanti quanti sono gli spazi desiderati, così facendo il browser eseguirà la richiesta.

Anche tornare a capo diventa difficile all'interno di uno stesso paragrafo; come già detto nella prima lezione: la semplice pressione del tasto invio (o return a seconda del tipo di tastiera), non è sufficiente per forzare un ritorno a capo, per fare questa operazione si adopera il tag
maiuscolo o minuscolo che sia non importa, questo tag forza un ritorno a capo, più

Codice:

<br>

consecutivi equivalgono a più ritorni a capo e di conseguenza saltare tante righe quanti sono i br inseriti.

I due metodi sopra descritti sono di gran lunga i più adoperati durante la scrittura di un testo html, da qui la logica considerazione: per ottenere un semplice spazio vuoto c'è bisogno di un'operazione così macchinosa come digitare una sequenza di 5 caratteri?

Se adoperate un normale editor di testi si, se invece vi siete procurati un editor specifico per html no, nella peggiore delle ipotesi si tratta probabilmente di fare click su un pulsantino che introdurrà quella sequenza di caratteri, quasi come premere la barra spaziatrice sulla tastiera.

Ci sono anche altri caratteri che conviene introdurre con le corrette regole che HTML richiede, si tratta di caratteri particolari che spesso si adoperano nella comune scrittura. Noi Italiani per esempio abbiamo le vocali accentate, se scritte come da tastiera queste potrebbero mettere in crisi il browser che le visualizza, è perciò preferibile adoperare il relativo codice per ottenerle:

Codice:

à = à
è = è
ì = ì
ò = ò
ù = ù

Anche le doppie virgolette, le parentesi angolari e tutto quello che potrebbe essere male interpretato conviene scriverlo con il suo codice; ecco qui di seguito l'elenco dei caratteri di uso più comune:

Codice:

" = "
& = &
< = <
> = >
€ = €

Per concludere alcuni caratteri speciali che potrebbero risultare utili:

Codice:

= ©
= ®
£ = £
¼ = ¼
½ = ½
¾ = ¾
¹ = ¹
º = º

Per rendere una pagina più leggibile o anche solo più gradevole, si fa spesso ricorso ad una specie di cosmesi del testo, si usa infatti sottolinearlo, enfatizzarlo, inclinarlo, ridimensionarlo, ecc. ecc.

Vediamo quali sono gli elementi (tags) che producono questi effetti.


--------------------------------------------------------------------------------

Codice:

<strong></strong>

= bold o grassetto.

Tutto quello che sarà scritto all'interno dei tags e sarà visualizzato in grassetto.

Facciamo un esempio: dovendo scrivere "Web-Link.it tutto per la tua pagina web" e volendo evidenziare la scritta Web-Link.it in grassetto, si dovrà racchiudere questa fra i due tags e in questo modo:

Codice:

<strong>tuo link</strong>

tutto per la tua pagina web.
Questo il risultato:

yuo tutto per la tua pagina web

Avremo potuto ottenere lo stesso risultato adoperando che sono equivalenti di

Codice:

<strong></strong>.

B è stato usato fino ad oggi ed era l'iniziale della parola inglese Bold.


--------------------------------------------------------------------------------

Codice:

<em> </em>

= Italico, inclinato.

Tutto quello che sarà scritto all'interno dei tags

Codice:

<em> e </em>

sarà visualizzato in italico.

Facciamo ancora lo stesso esempio: dovendo scrivere "Web-Link.it tutto per la tua pagina web"
e volendo la scritta Web-Link.it in italico, si dovrà racchiudere questa fra i due tags e , in questo modo:

Codice:

<em>mio link</em>

tutto per la tua pagina web.
Questo il risultato:

web-link.it tutto per la tua pagina web

Avremo potuto ottenere lo stesso risultato adoperando

Codice:

<i></i>

che sono equivalenti di

Codice:

<em></em>.

I è stato usato fino ad oggi ed era l'iniziale della parola inglese Italic.


--------------------------------------------------------------------------------


Risulta abbastanza logico pensare che si possono combinare i vari tags fra di loro nidificandoli e di conseguenza sommandone i vari effetti: grassetto più inclinato: tuo così da ottenere: tuot tutto per la tua pagina web.

Consiglio: Alcuni attributi non sono più ammessi e di conseguenza disapprovati dal W3C anche se di fatto funzionerebbero ugualmente. E' preferibile usare questi attributi all'interno dei fogli di style anche se in questo contesto ritengo sia prematuro.

TT: Riproduce come testo di telescrivente o a spaziatura fissa.
I: Riproduce come stile corsivo del testo.
B: Riproduce come stile grassetto del testo.
BIG: Riproduce il testo con un carattere "grande".
SMALL: Riproduce il testo con un carattere "piccolo".
STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.
U:Disapprovato. Riproduce del testo sottolineato.




--------------------------------------------------------------------------------


E' anche possibile cambiare il colore, le dimensioni, il tipo di font ed altro ancora. I metodi sono due:

Adoperare il tag

Codice:

<font>

con i relativi parametri o fare uso di un foglio di style, prima di parlare di fogli di style aspetterei di aver acquisito un minimo di familiarità con il linguaggio html di base.

Per il tag font l'operazione è molto semplice, si tratta di racchiudere il testo fra i tags e con la consueta procedura adoperata per tutti gli altri elementi (tags). Fra gli attributi (parametri) adoperabili con font si trovano: color, face e size. Rispettivamente per: colore, tipo di carattere e dimensioni dello stesso.

Vediamo come si adoperano:

Codice:

<font color="valore o nome">

fra le doppie virgolette sono ammessi i nomi dei colori in lingua inglese o il numero del colore in formato esadecimale (un numero formato da tre coppie esadecimali precedute dal simbolo # cancelletto). Su questo link alcuni esempi.

Codice:

<font color="green">

o anche

Codice:

<font color="#008000">

produrranno lo stesso effetto e cioè questo:

testo scritto in verde

cambia il tipo di font o carattere adoperando quello specificato fra le doppie virgolette:

Codice:

<font face="Comic Sans MS">

Testo scrivendo con il font Comic Sans MS

Codice:

<font size="valore numerico">

cambia le dimensioni del font o carattere, dove il valore specificato può avere un numero compreso fa -6 e +7:

Codice:

<font size="3">

Sto scrivendo con un font dimensione 3

Codice:

<font size="-2">

Sto scrivendo con un font dimensione -2

Codice:

<font size="+2">

Sto scrivendo con un font dimensione +2

Anche in questo caso si possono avere più attributi per lo stesso font e combinarli fra di loro:

Codice:

<font color="#008000" size="3" face="Comic Sans MS">