Titoli e paragrafi

Vi descrivo alcuni elemeti (tag) di html utili per il loro valore semantico, che potreste adottare nei vostri blog: Se ad esempio voglio specificare che la tale parola e' un titolo, andra' racchiusa tra i relativi tag di apertura e chiusura, così: <h1>questo e' un titolo 1</h1>
<h2>questo e' un titolo 2</h2> notate che i tag vanno scritti in minuscolo, e che la chiusura e' uguale all'apertura salvo il simbolo /. Il browser, salvo specifiche indicazioni, lo rappresenterà così:

questo è un titolo 1

questo è un titolo 2

anzitutto ci sono i titoli (header), ce ne sono sei livelli e i relativo tag sono h1, h2, etc. Il paragrafo <p></p>viene automaticamente creato dall'interfaccia programmi di blogger, basta andare a capo.

top↑

Elenchi

Gli elenchi,fondamentale il loro valore semantico (una lista di libri, scadenze, lezioni) nei siti vengono spesso utilizzati per creare i menù di navigazione. Essi hanno un sistema indentato, con tag uno nell'altro, ed esattamente c'è n'è una coppia che racchiude la lista e poi ogni elemento va racchiuso in quello di "elemeto di lista"<li>(list item). Quello che racchiude la lista puo' specificare se sarà una lista ordinata <ol> (sono quelle con numerazione automatica) o meno <ul>(unordered list), che sono quelle che appaiono con i pallini. Sarò più chiaro con un esempio:

<ol>
<!-- inizio lista ordinata-->
<li>primo elemento</li>
<li>secondo elemento</li>
</ol> <!-- fine lista ordinata-->

sul browser apparirà così:

1. primo elemento
2. secondo elemento

analogamente una lista "un"ordinata sarà:

<ul> <!-- inizio lista non ordinata-->
<li>primo elemento</li>
<li>secondo elemento</li>
</ul> <!-- fine lista non ordinata--> sul browser apparirà così:

• primo elemento
• secondo elemento

E' più semplice a farsi che a raccontarsi.

top↑

Liste di definizioni

La lista di definizioni <dl> si distingue dalle precedenti in quanto le voci sono costituite da due elementi:il termine da definire <dt>(definition term) e la sua definizione <dd>(definition). pertanto andrà scritta così: <dl>
<dt>canguro</dt>
<dd>bestia marsupiale</dd>
<dt>piccione urbano</dt>
<dd>bestia immonda</dd>
</dl>

e apparirà così:

canguro

bestia marsupiale

piccione urbano

bestia immonda

bello non è, ma questo dipende dai browser che lo visualizzano e con i CSS se ne può sistemare l'aspetto. Insisto che ciò che ha importanza è la semantica.

top↑

Citazioni e codici

Per indicare una citazione esistono tre elementi: <cite> consente di inserire una citazione "inline", ovvero all'interno, per esempio, di un paragrafo, <q> (quote) semple in linea, fa apparire le virgolette (sui browsere standard, non IE) mentre <blockquote> la tratta come un "blocco", ovvero un paragrafo a sé stante. Gli esempi:

<p>Gennaro dice <cite>Vabbuò</cite>quando gli va</p>

ecco come appare:

Gennaro dice Vabbuò quando gli va

Mentre:

<p>Gennaro dice <q>Vabbuò</q> quando gli va</p> ecco come appare:

Gennaro dice Vabbuò quando gli va

Mentre:

<p>Mio padre dice spesso: <blockquote>La vecchiaia è una brutta malattia, ma nessuno ci rinuncia. </blockquote>e ora che sto arrivando ai 40, neanch'io mi sento tanto bene.</p>

appare così:

Mio padre dice spesso:

La vecchiaia è una brutta malattia, ma nessuno ci rinuncia.

e ora che sto arrivando ai 40, neanch'io mi sento tanto bene.

Similmente a <blockquote>, per evidenziare i frammenti di codice in questi stessi post, sto usando l'elemento <code>. L'ultimo qui sopra è scritto così:

<code> <p>Mio padre dice spesso: <blockquote>La vecchiaia è una brutta malattia, ma nessuno ci rinuncia. </blockquote>e ora che sto arrivando ai 40, neanch'io mi sento tanto bene.</p></code>

top↑

Attenzione!

Ricordate che tutti questi tag possono trovarsi uno all'interno dell'altro, ma mai incrociarsi, ovvero se ad esempio ho una citazione all'interno di un paragrafo, badare bene a concludere la citazione con l'apposito tag di chiusura prima di chiudere il paragrafo: Cosi' va bene:

<p>ecco la citazione: <cite>citazione</cite></p>

Così è sbagliato:

<p>ecco la citazione: <cite>citazione</p></cite>

Magari i browser ve la lasciano passare liscia, perché talvolta sono tolleranti, ma sarebbe un grave errore sia per gli standard xhtml che per la semantica.

top↑

Abbreviazioni e acronimi.

Abbreviazioni <abbr> e acronimi <acronym> funzionano identicamente, ma hanno un diverso valore semantico. Ora, poiché Internet Explorer non supporta l'abbreviazione, di fatto si usa sempre, anche impropriamente, l'acronimo. Peculiarità di questi elementi è che all'interno del tag si userà l'attributo title, il cui valore è la spiegazione dell'acronimo/abbreviazione stesso. un esempio chiarirà tutto:

<acronym title="extended hypertext markup language">xhtml</acronym>

normalmente il "titolo" appare andando col cursore sulla parola a cui è stato associato:

xhtml

Analogamente con l'abbreviazione:

<abbr title="extended hypertext markup language">xhtml</abbr>

eccolo qui (se usate qualcosa di meglio di Internet Explorer):

xhtml

Ricordate che "title" è un'attributo del tag, a cui si assegna un valore con il simbolo di uguale e racchiudendolo tra virgolette; non è limitato ad abbreviazioni e acronimi ma lo si può usare con qualsiasi altro elemento, anche un paragrafo, verosimilmente non per l'effetto speciale di far apparire qualcosa quando gli si va sopra col cursore, ma per aggiungere significato semantico:

<p title="paragrafo con titolo">paragrafo</p>

eccolo qui:

paragrafo.

top↑

Il Link

Il link, elemento base dell'ipertesto, è un tag <a></a> che in inglese sta per anchor [ancora]. All'interno del tag di apertura <a> va inserito l'attributo href [hipertext reference] con l'indicazione dell'indirizzo a cui ci si collega, grammaticalmente va scritto

href="indirizzo tra virgolette".

Come al solito un esempio varrà più di cento parole:

<a href="http://www.q-e-d.it">testo che appare come link</a>

testo che appare come link

oltre href si possono aggiungere altri attributi come title oppure target il primo ha significato semantico, e normalmente il browser ne fa apparire il contenuto quando si va col cursore sopra al link, il secondo, se ha valore blank forza il link ad aprirsi in una nuova finestra, io lo utilizzo quando linko siti esterni al mio. Ecco l'esempio completo:

<a href="http://www.q-e-d.it" title="apre in una nuova finestra" target="blank">testo che appare come link e a pre una nuova finestra</a>

ed ecco il risultato:

testo che appare come link e apre una nuova finestra

Se ci si va sopra col mouse apparità il titolo. Non si linkano solo altre pagine web, ma anche pdf, jpeg o contenuti multimediali, basta che href punti al file in questione, ad esempio se si vuol metter a disposizione un pdf salvato nella cartella http://www.miosito.com/download/documento.pdf il codice sarà:

<a href="http://www.miosito.com/download/documento.pdf" scarica il pdf</a>

e il risultato appare così:

scarica il pdf (il link naturalmente non funziona, non esistendo il documento).

top↑

I percorsi dei link

Questo argomento probabilmente non è inerente alla gestione di un blog, ma ai siti web più in generale. Il seguente è un percorso di un link di tipo assoluto:

<a href="http://www.sample.it/pages/samplepage.html"> link</a>

ovvero punta ad una pagina precisa in riferimento all'intero web. All'interno di un sito si possono usare anche percorsi relativi, se ad esempio in samplepage.html avessi un link a pagetwo.html che stesse nella medesima directory (cartella) il link relativo sarebbe semplicemente così:

href="pagetwo.html".

se invece pagetwo.html si trovasse nella directory superiore, ovvero come percorso assoluto fosse http://www.sample.it/pages/samplepage.html,

il percorso relativo, sempre a partire da samplepage.html, sarebbe href="../pagetwo.html".

Se ancora fosse in una directory più interna, ad esempio href="http://www.sample.it/pages/subpages/samplepage.html",

il percorso relativo sarebbe

href="subpages/pagetwo.html".

Infine, se si dovesse risalire di una directory per scendere in un ramo diverso, come ad esempio href="http://www.sample.it/otherpages/subpages2/samplepage.html",

il percorso relativo dovrebbe risalire (../) per poi ridiscendere lungo il ramo, così:

href="../othepages/subpages2/pagetwo.html".

e così via.

E ricordate: per quelli di voi abituati a DOS o M$Windows, che nei percorsi web si usa sempre "/" e mai "\" (come usa fare M$word sui documenti html, rendendoli inaccessibili a tutti i browser eccetto IE)

top↑

Enfasi

Due elementi dell'html sono deprecati nelle ultime versioni, ma purtroppo ancora molto in uso: <b> e <i>, che stanno rispettivamente per bold (grassetto) e italic (corsivo, italico). Dallo standard html 4.0 e nel piu' recente xhtml sono stati rispettivamente sostituiti da

<strong></strong> (forte) e <em></em>

(emphasis-enfasi) che hanno un valore semantico anziché meramente tipografico. I browser attuali li renderizzano come i precedenti, quindi vi invito a usarli:

strong anziché bold enfasi anziché italic

top↑

Cancellare e inserire testo

Il testo cancellato (del=delete) o inserito (ins) si indica così:

<del>testo cancellato</del>
<ins>testo inserito</ins>

e appare così:

testo cancellato testo inserito

top↑

Indirizzi

<address> è il tag per specificare gli indirizzi, comuni o e-mail:

<address>Via dai Piedi, Genova</address>

ed ecco come appare:

Via dai Piedi, Genova

top↑

Apici e pedici

Ci sono anche apici (superscript) e pedici (subscript), sebbene mi sambrino maggiormente di significato presentazionale che semantico, e si possano usare i CSS se siano privi di un senso pregnate.

se a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup> allora a, b e c formano un triangolo rettangolo.

apparirà così:

se a²+b²=c² allora a, b e c formano un triangolo rettangolo

la formula dell'acqua è H<sub>2</sub>O.

viene così:

la formula dell'acqua è H₂O.