[HTML] Formattazione del testo

In questo articolo vediamo tutti i tags esistenti per la formattazione e personalizzazione dei testi in HTML. Il precedente articolo lo avevamo concluso spiegando come impostare dei colori al testo e ai links che valgono per tutta la pagina. Però, come ben immaginerete, questo non ci basta: una pagina è formata da titoli, paragrafi, testi in grassetto, in corsivo, liste, eccetera. Quindi, lo scopo di questo articolo, è vedere i tags più importanti per la formattazione del testo.

Heading: i titoli

I titoli si esprimono con i tags “h” (appunto, heading) e vanno da “h1” fino ad “h6”: ogni testo espresso con questo tag, viene reso in grassetto e viene lasciato un “a capo” prima e dopo la riga dov’è scritto. <h1>Titolo Grande</h1> <h2>Titolo leggermente meno grande</h2> E così via. Questo titoletto quì avanti (“Paragrafi”) per esempio, è un tag <h2> 🙂

Paragrafi

I paragrafi si dichiarano utilizzando il tag <p>, e la sua apertura stà ad indicare l’inizio di un nuovo paragrafo: per questo motivo,  appena aperto p lascia una riga vuota (e ne lascierà un’altra quando verrà chiuso). <p>Questo è un paragrafo</p>

Div e Span

Il div come il p permette di specificare blocchi di testo, e la nuova apertura di questo tag avviene su una nuova riga:

<div>Ciao</div></div>Questo è il secondo div</div>

Sarà:

Ciao Questo è il secondo div

Mentre il tag Span è un contenitore generico inline (non ci sono “a capo” ne prima ne dopo il tag) e può essere annidato nei div:

<div><span>Questo sarà sulla stessa riga</span><span>Di questo quì.</span></div>

Allineamento e A capo

Nonostante quasi tutti i tag visti finora possiedono un’attributo chiamato “align” (allineamento, appunto), questo andrebbe fatto utilizzando i fogli di stile di css. Vediamo quindi, l’attributo align: questo ci permette di definire appunto l’allineamento del testo, che può essere:

• center; centrato
• left; allineato a sinistra
• right; allineato a destra
• justify; giustificato

<p align=”right”>Questo testo verrà allineato a destra.</p>

Per quanto riguarda gli “A capo” questi si fanno con un tag chiamato br: <br /> Ogni br, equivale ad una “pressione del tasto enter”.

Stili Fisici

Ecco una serie di stili chiamati fisici, perchè definiscono lo stile grafico del testo indipendentemente dalla funzione di contenuto del tag:

• Grassetto: <b>Testo in Grassetto </b> – Oppure <strong>Testo in Grassetto</strong>
• Corsivo: <i>Testo in Corsivo</i>
• Preformattato: <pre>Testo Preformattato</pre> (ripete gli spazi e gli a capo come nel codice)
• Sottolineato: <u>Testo Sottolineato</u>
• Barrato: <strike>Testo Barrato</strike>
• Apice: ^{Testo in Apice}
• Pedice: _{Testo in Pedice}

Stili Logici

Vediamo adesso alcuni stili logici:

• Abbreviazione: <abbr>Abbrev</<abbr>
•  Acronimo: <acronym>SPA</acronym>
•  Indirizzo: <address>indirizzo</address>
•  Citazione: <blockquote>blocco di citazione</blockquote>

Il Font

Il font è il tipo di carattere utilizzato durante la scrittura. Per scegliere che tipo di font visualizzare si utilizza un tag in disuso e sconsigliato ma che comunque dobbiamo conoscere, il tag font appunto: <font> Seguito dall’attributo face, quindi: <font face=”NomeFont”>Testo in NomeFont</font> Separate da virgole, è possibile specificare una famiglia di font che funziona più o meno come copertura: se l’utente non ha installato il primo font, prova a visualizzare il testo con il secondo specificato e così via. Nel caso in cui l’utente non abbia il font da noi specificato installato nel computer, il font visualizzato sarà quello di default nel suo browser. Sempre con il tag font poi, possiamo specificare il colore:

<font color=”red”>Testo in rosso</font>

Possiamo specificare inoltre la grandezza, con un attributo chiamato size che prende valori interi da 0 a 7:

<font size=”7″>Testo di grandezza 7, quindi molto grande</font>

Infine, facciamo una considerazione che abbiamo ripetuto per diversi tag, essendo tutti attributi di font possiamo mettere tutto insieme:

<font face=”Verdana” size=”5″ color=”red”>Questo potrebbe essere un titolo…</font>

Elenchi

Gli elenchi in HTML sono piuttosto comuni, e possono essere numerati oppure non ordinati. Nel caso delle liste ordinate, queste si specifica utilizzando il tag ol (ordinated list) che specifica l’inizio di una lista ordinata, poi un delimitare chiamato li (list item) che racchiude ogni elemento della lista:

<ol> <li>Primo elemento</li> <li>Secondo elemento</li> </ol>

Per quanto riguarda invece le liste non ordinate, si creano allo stesso modo solo che viene utilizzato il tag di apertura ul (unordered list):

<ul> <li>Primo elemento</li> <li>Secondo elemento</li> </ul>

E’ possibile poi specificare il tipo di segno (o numero) grafico utilizzando l’attributo type, ma risulta deprecato in quanto lo stile viene definito dai fogli CSS.

I Collegamenti Ipertestuali (o Links)

Web: la traduzione letterale è “ragnatela”. Il web è appunto una ragnatela di pagine collegate fra loro attraverso ipertesti: appunto, i collegamenti ipertestuali. Per capire immediatamente di cosa parliamo, in pratica per link si intende una cosa come questa:

Questo è un link.

Sostanzialmente, quello che facciamo quando creiamo un link, è collegare “Qualcosa” (un’immagine, un testo, o altro) ad un’altra pagina che conterrà altro o un altro oggetto (file in pdf, exe, un video, un’altra pagina in HTML).

Per spiegare meglio come funzionano i links, riprendiamo come esempio la cartella della guida precedente:

…/
files – Una directory
immagini – Directory contenente le immagini che usiamo nel sito
index.html – L’ index che stiamo facendo
pagina.html – Un’altra pagina HTML
sfondo2.jpg – Una immagine di sfondo

Dando per scontato che noi stiamo modificando la nostra pagina “index.html”, quello che sostanzialmente dobbiamo fare è dire per esempio “Se volete avere più informazioni su questa cosa, recatevi su questa pagina”.

Ora, dovremo dare la possibilità ai nostri utenti di recarsi sulla pagina “pagina.html” cliccando sul testo “questa pagina”. Per farlo, facciamo così:

<a href=”pagina.html” title=”Titolo della pagina”>questa pagina</a>

Quindi il testo diventerà:

Se volete avere più informazioni su questa cosa, recatevi su <a href=”pagina.html” title=”Titolo della pagina”>questa pagina</a>

Se invece avessimo voluto, avremmo potuto linkare al file sfondo2.jpg usando la stessa sintassi ma cambiando gli attributi:
<a href=”sfondo2.jpg” title=”Lo sfondo della pagina”>Guarda lo sfondo della pagina</a>

Adesso dovremo parlare un pò di più su come funzionano i collegamenti ipertestuali, per evitare di linkare a pagine inesistenti o sbagliate.

Eseguire link corretti

Allora intanto dobbiamo differenziare i links a seconda di dove puntano: ad una pagina interna al sito, oppure esterna.
Se la risorsa si trova all’interno del sito, come abbiamo visto poco fà, abbiamo tre situazioni:

OnSite – Prima situazione: Link a file nella stessa cartella

Quando il file a cui stiamo puntando (sia esso una pagina HTML o un immagine)  si trova nella stessa cartella, ci basterà dare come valore all’attributo href il nome del file a cui vogliamo collegarci, includendo ovviamente l’estensione! (.jpg, .html e così via).

OnSite – Seconda situazione: Link in una cartella

Riprendiamo l’esempio di prima, ma questa volta specifichiamo il contenuto della cartella immagini:

…/
files – Una directory
immagini – Directory contenente le immagini che usiamo nel sito
–   immagine1.jpg
–   immagine2.jpg
–   logo.jpg
index.html – L’ index che stiamo facendo
pagina.html – Un’altra pagina HTML
sfondo2.jpg – Una immagine di sfondo

Facciamo finta che stiamo modificando la pagina index.html. Per puntare al file logo.jpg presente nella cartella immagini, ci basta fare così:

<a href=”immagini/logo.jpg” title=”Logo del sito”>Logo del Sito</a>

In pratica, per specificare la cartella in cui è contenuto il file, ci basta inserire il nome seguito da una slash /

OnSite – Terza Situazione: da cartella a cartella

Adesso riprendiamo lo stesso albero di file, e questa volta specifichiamo anche il contenuto della cartella files:

…/
files – Una directory
– index.html – Index che stiamo modificando
– programma.exe – Un programma
– libro.pdf – Un file PDF
immagini – Directory contenente le immagini che usiamo nel sito
–   immagine1.jpg
–   immagine2.jpg
–   logo.jpg
index.html
pagina.html
sfondo2.jpg

Ok, adesso stiamo modificando il file index.html contenuto dentro alla cartella files: la domanda ora è, e se noi volessimo creare un collegamento ipertestuale che và da questo file al logo contenuto dentro alla cartella immagini?

Ecco come fare:

<a href=”../immagini/logo.jpg” title=”Il logo del sito”>il Logo del sito</a>

In pratica, con i due puntini sospensivi e una slash, stiamo specificando che vogliamo salire di una cartella. Se volessimo salire di più cartelle, ci basterebbe ripetere la sintassi.

Perciò se volessimo salire di due cartelle, dovremmo fare: ../../cartella/file.html

OutSite – Collegamento ad un sito esterno

Per eseguire un collegamento ad un sito esterno, la cosa è molto più semplice ma deve essere precisa:

<a href=”http://google.it/index.php” title=”Google”>Google</a>

Quello che dobbiamo fare, è specificare esattamente l’ URL completo del file a cui vogliamo accedere.

I più attenti noteranno che quando ci colleghiamo a Google, non specifichiamo mai il file “index.php”: questo perchè il nostro server (computer su cui risiede il nostro sito) quando viene richiesta una cartella, rimanda automaticamente il visitatore al file “index.estensione” dove estensione (a seconda della configurazione) può essere: html, php, asp,htm. Solitamente comunque, i file .html hanno la precedenza sugli altri.