Guida alla formattazione in HTML

Per imparare l'html ci sono ottimi siti in giro per la rete (HTML.it, ecc.), capaci di spiegarvi in poche semplici parole questo linguaggio dalla A alla Z. Quello che mi interessa ora è piuttosto riassumere in breve come potete formattare il vostro testo, con grassetti, corsivi, sottolineati e così via.

Grassetto

Per rendere una parola o una frase o un brano in grassetto, sarà sufficiente usare la tag <b> (e la corrispettiva chiusura, </b>) nel seguente modo:

<b>Testo in grassetto</b> (testo normale)

Il risultato è il seguente:

Testo in grassetto (testo normale)

Meglio ancora se al posto di <b> usate <strong> (è la stessa cosa, ma la seconda è più moderna). Ovviamente, o usate solo una, o usate solo l'altra.

Notare che la chiusura della tag è importantissima (altrimenti l'intero testo dal primo <b> risulterà tutto in grassetto), e che le tag di chiusura sono sempre uguali a quelle di apertura salvo la slash davanti al loro nome. (<b> e </b>, <strong> e </strong> e così via)

Corsivo, sottolineato, ecc.

Funziona esattamente come il grassetto, solo cambiano le tag.

Corsivo: <i> e </i>; <em> e </em> (o usate una o l'altra!)

Sottolineato: <u> e </u>

Barrato: <strike> e </strike>

Andare a capo

Lo script del Sito riconosce gli "a capo", ma poiché sicuramente vi trovere spesso davanti alla tag <br> è meglio specificare la sua funzione.

Per andare a capo si usa la tag <br> (più corretto <br />), e nel seguente modo:

Prima frase.<br /> Seconda frase.

Il risultato sarà:

Prima frase.
Seconda frase.

La tag <br> non si chiude. (Lo stesso vale per <hr>, la linea di separazione)

Inserire un link

<a href="http://url-del-sito" target="_blank">Link</a>

Risultato:

Link

L'attributo target="" serve a specificare dove il link in questione va aperto. _blank è per nuova pagina, _self è la stessa pagina dove si trova il link.

Inserire un'immagine

Per questo si usa la tag <img> (che non si chiude).

Gli attributi della tag <img> sono i seguenti:

src="" all'interno delle virgolette va l'url dell'immagine.

width="" all'interno delle virgolette va la larghezza dell'immagine (in pixel).

height="" altezza in pixel.

alt="" testo di sostituzione all'immagine (quello che compare se vi fermate sopra con il mouse).

<img src="http://www.acciofanfiction.com/images/aim.gif" width="16" height="15" alt="Immagine">

Risultato:

Paragrafi

Il paragrafo si apre con la tag <p> e - checché se ne veda in giro - si deve chiudere sempre (con </p>). Sul Sito non c'è bisogno di usare questa tag, e infatti il Convertitore la cancella.

Cambiare carattere

<font> si usa per stabilire grandezza, colore e carattere del testo. (Usatelo solo nei titoli, il corpo della storia non ne ha bisogno!)

<font color="#FF0000" size="4" face="Courier New, Courier, mono">Testo</font>

Risultato:

Testo

color="codice-colore" serve per stabilire il colore. Il codice del colore è sempre preceduto da # e potete trovare moltissimi siti che offrono tabelle con colori e rispettivi codici (una la trovate qui).

size="numero" serve per stabilire la grandezza. In genere dipende dall'unità di misura che usate, ma se non usate nulla, sappiate che io sto scrivendo in grandezza 3. Anteponendo un segno (+ o -) ad un numero, modificate la grandezza attuale di più o meno taglie (dipende dal segno e dal numero, appunto).

face="nome-carattere" serve per il tipo di carattere. I più usati sono Verdana, Arial, Times New Roman, Georgia, Courier New, ecc.

Altre tags

<center> si può usare per allineare il testo al centro. (La tag va chiusa!)

<ol>, <ul> e <li> si utilizzato per creare elenchi.