Caratteri speciali e cosmesi del testo

Dopo aver visto come si adoperano i links torniamo adesso sul testo. Se avete fatto delle prove, e mi auguro proprio di si, vi sarete sicuramente già accorti che scrivendo in XHTML non sempre è possibile ottenere lo stesso risultato che si ottiene con la normale scrittura di un testo. Certi caratteri infatti hanno regole precise, si tratta semplicemente di conoscerle ed applicarle.

Una delle prime cose che si notano è la difficoltà di poter lasciare più di uno spazio vuoto fra una parola e l'altra. Xhtml infatti ignora tutti gli spazi inseriti con il metodo normale e ne lascia di fatto uno soltanto, provate dunque a scrivere una frase mettendo più spazi vuoti 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, questa è una caratteristica di XHTML, come fare allora per avere più di un solo spazio nel caso in cui servisse distanziare maggiormente le parole?

Con appositi codici che servono esclusivamente ad introdurre spazi:

  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 il ; punto e virgola finale fa parte del comando

Esempio: lascio tre spazi fra questa    e le parole che seguono.

Anche tornare a capo diventa difficile all'interno di uno stesso paragrafo; la semplice pressione del tasto invio (o return a seconda del tipo di tastiera), non è sufficiente per forzare un ritorno a capo, per questa operazione si adopera il tag <br /> (break) questo tag forza un ritorno a capo, più <br /> consecutivi equivalgono a più ritorni a capo, saltare tante righe quanti sono i br inseriti.

I due metodi sopra sono di gran lunga i più adoperati durante la scrittura di un testo xhtml, da qui la logica considerazione: per ottenere un semplice spazio vuoto c'è bisogno di un'operazione macchinosa come digitare quella sequenza di 5 caratteri? Se adoperate un normale editor di testi si, se invece vi siete procurati un editor html, probabilmente si tratta di fare click su un pulsantino grafico che introdurrà quella sequenza di caratteri automaticamente, quasi come premere il tasto spazio sulla tastiera.

E' possibile inserire una riga divisoria adoperando il tag <hr /> (horizontal rule), il risultato sarà questo sotto:

Ci sono anche altri caratteri che conviene introdurre con le corrette regole che XHTML impone, si tratta di caratteri particolari ma che spesso si adoperano nella comune scrittura; per esempio noi Italiani 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 :

à = &agrave;
è = &egrave;
é = &eacute;
ì  = &igrave;
ò = &ograve;
ù = &ugrave;

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:

"  = &quot;
& = &amp;
< = &lt;
> = &gt;
€ = &euro;

Per concludere, alcuni caratteri speciali che potrebbero risultare utili:

© = &copy;
® = &reg;
® = &reg;
Ø = &Oslash;
£  = &pound;
¼ = &frac14;
½ = &frac12;
¾ = &frac34;
¹  = &sup1;
º  = &ordm;

Per rendere una pagina più leggibile si fa spesso ricorso ad una specie di cosmesi del testo, si usa infatti sottolinearlo, enfatizzarlo, inclinarlo, ridimensionarlo, ecc. ecc.
Tutte cose affidate al foglio di style nel quale sarà possibile definire parametri, titoli o elementi a blocco da utilizzare per il teso, ma oltre a questo potrebbe essere utile evidenziare una parola o una frase, vediamo quali sono gli elementi (tags)  che producono questi effetti.

<strong> </strong> = bold o grassetto.
Tutto quello che sarà scritto all'interno dei tag <strong> e </strong> sarà visualizzato in grassetto, facciamo un esempio: dovendo scrivere
" www.Web-Link.it tutto per la tua pagina web"
e volendo la scritta Web-Link.it in grassetto, si dovrà racchiudere questa fra i due tag <strong> e </strong>, in  questo modo:

Questo il risultato:

www.web-link.it tutto per la tua pagina web

Avremo potuto ottenere lo stesso risultato adoperando <b> e </b> che sono equivalenti ma che in futuro potrebbero essere deprecati.


<em> </em> = Italico o inclinato.
Tutto quello che sarà scritto all'interno dei tag <em> e </em> sarà visualizzato in italico, facciamo ancora lo stesso esempio: dovendo scrivere
" www.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 tag <em> e </em>, in questo modo:

Questo il risultato:

www.web-link.it tutto per la tua pagina web

Avremo potuto ottenere lo stesso risultato adoperando <i> e </i> che sono equivalenti ma che in futuro potrebbero essere deprecati.

Ho riportato questi due perchè a volte risultano più pratici da adoperare nel caso in cui si volesse evidenziare una piccola parte del testo, è anche possibile ridefinire strong e em all'interno del foglio di style assengando loro magari diversi parametri per esaltare meglio la loro modifica sul testo.

Ci sono una serie di "titoli" sei livelli di intestazioni, da h1 (il più importante) ad h6 (il meno importante) che è possibile adoperare con o senza una redifinizione di style: <h1> <h2> <h3> <h4> <h5> <h6>

Grassetto, carattere molto grande, una o due righe vuote sopra e sotto.

Grassetto, carattere grande, una o due righe vuote sopra e sotto.

Corsivo, carattere grande leggermente rientrato sul margine sinistro, una o due righe vuote sopra e sotto.

Grassetto, carattere normale, rientro maggiore rispetto a H3, una riga vuota sopra e sotto.

Corsivo, carattere normale, rientro normale come H4, una riga vuota sopra.

Grassetto, rientro come testo normale ma più di H5, una riga vuota sopra.

Personalmente li trovo orrèndi esteticamente parlando, ma visto che piacciono dal punto di vista strutturale ai motori di ricerca ai quali danno una certa importanza e visto che tutto quello inserito in un titolo ha sicuramente un maggiore peso e quindi maggiore importanza, il consiglio è di usarli magari inserendo al loro interno semplicemente una immagine grafica o altri elementi di html o dopo averli ridefiniti a proprio gusto e piacere nel foglio di style, come dall'esempio che segue.

Ottenendo un risultato leggermente più accettabile:

Grassetto, carattere molto grande, una o due righe vuote sopra e sotto.

Grassetto, carattere grande, una o due righe vuote sopra e sotto.

Corsivo, carattere grande leggermente rientrato sul margine sinistro, una o due righe vuote sopra e sotto.

Grassetto, carattere normale, rientro maggiore rispetto a H3, una riga vuota sopra e sotto.

Corsivo, carattere normale, rientro normale come H4, una riga vuota sopra.

Grassetto, rientro come testo normale ma più di H5, una riga vuota sopra.

Con questa lezione avete imparato ad introdurre caratteri speciali e modificare il testo in modo da renderne più gradevole la sua lettura, nella prossima lezione vedremo come usare i colori e le immagini grafiche di sfondo.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.