Mini Tutorial HTML per le pagine su Gecoaching.com

Questo tutorial non vuole essere un manuale esaustivo sull'HTML, ma una piccola guida per consentire ai Geocacher di formattare in maniera personalizzata le pagine dei propri cache su Geocaching.com.

A volte, un piccolo tocco personale, oltre a rendere graficamente più gradevoli i propri cache, consente di suddividere il testo inserito in modo da facilitare il colpo d'occhio sulle informazioni più rilevanti (es. lingua, collegamenti particolari, ecc), facilitando la lettura ai giocatori.

Non è necessario essere dei programmatori provetti, o conoscere a menadito il linguaggio HTML. E' sufficiente semplicemente impadronirsi dei "Tag" più importanti, o eventualmente tenere sotto mano una piccola guida.

Ecco gli elementi essenziali.

Formattazione del testo

Questi sono il tag principali per modificare il formato del testo. Per le pagine dei cache è sufficiente utilizzare questo tipo di tag, senza dover prendere in considerazione altro che andrebbe a complicare la stesura delle nostre descrizioni.

Tipo di testo Tag Esempio Risultato
corsivo <i></i> <i>Testo di prova</i> Testo di prova
grassetto <b></b> <b>Testo di prova</b> Testo di prova
sottolineato <u></u> <u>Testo di prova</u> Testo di prova
superscript <sup></sup> Prova testo<sup>superscript</sup> Prova testo superscript
subscipt <sub></sub> Prova testo<sub>subscript</sub> Prova testo subscript

Allineamento del testo

Se per qualche ragione volete modificare l'allineamento del testo (che per default è a sinistra), dovete fare uso dei paragrafi definiti con i tag <p></p>, all'interno dei quali specificherete l'allineamento come indicato nella tabella.

allineamento sintassi
a sinistra <p align="left">testo</p>
a destra <p align="right">testo</p>
giustificato <p align="justify">testo</p>
centrato <p align="center">testo</p>

Tipo di font e di colore

Per dare risalto ad alcune parti del testo, potreste decidere di volere utilizzare un font e/o un colore particolare. Tenete presente che a seconda del browser che viene utilizzato, non tutti i tipi di font sono disponibili e quindi visibili dagli altri. E' pertanto una buona abitudine mantenere un set di caratteri standard (tipo Verdana, Times, ecc) e comunque utilizzare una famiglia di font.

Il Tag che dovrete adoperare è font che supporta poi una serie di atributi. Il formato specifico è:

<font attributo1="valore attributo2="valore" ...>Testo</font>

Con un esempio:

<font face="Verdana, Arial, Helvetica" color="red">Ecco un testo in Verdana scritto in rosso</font>

Che produrrà il risultato seguente:

Ecco un testo in Verdana scritto in rosso

Gli attributi face e color possono essere usati assieme o singolarmente.

Paragrafi e ritorni a capo

L'HTML consente di utilizzare spaziature per paragrafi o spaziature manuali.
La spaziatura per paragrafi si ottiene rachiudendo il testo di ogni paragrafo fra i tag

<p></p>

Se ci troviamo nella necessità di aumentare la spaziatura, possiamo farlo a piacimento inserendo una serie di semplici tag

<br>

che corrispondono a una interlinea l'uno.

Collegamenti

Potremmo avere la necessità di inserire alcuni collegamenti all'interno della nostra pagina, che rimandano a altre pagine, indirizzi mail e/o fotografie . Ecco come fare.

tipo di collegamento Tag Esempio Risultato
collegamento a una pagina Internet <a href="indirizzo">Testo</a> <a href="http://www.geocaching-italia.com">Geocaching-Italia</a> Geocaching-Italia
collegamento a una pagina Internet in una nuova finestra <a href="indirizzo">Testo</a> <a href="http://www.geocaching-italia.com">Geocaching-Italia</a> Geocaching-Italia
indirizzo mail <a href="mailto:indirizzo">testo</a> <a href="mailto:geocaching-bounces@lists.geocaching-italia.com">mailing list</a> moc.ailati-gnihcacoeg.stsil|secnuob-gnihcacoeg#tsil gniliam
immagine <img src="indirizzo immagine"> <a href="http://www.geocaching.com/images/WptTypes/2.gif"> 2.gif

NB: il tag img supporta alcuni attributi che consentono di modificare le dimensioni in vario modo. Per non complicarci l'esistenza, se possediamo uno spazio personale ci conviene ridimensionare le foto al formato desiderato e caricarle già ridotte sul sito, in modo da poterle in seguito semplicemente linkare così come sono. Geocaching.com consente l'inserimento di immagini. Per linkarle dobbiamo semplicemente cliccarci sopra per arrivare alla pagina in cui la foto è nel formato originale. A questo punto clicchiamo sulla foto col pulsante destro, quindi su proprietà e da qui risaliamo all'indirizzo esatto da utilizzare col tag img.

Elenchi puntati e numerati

Per poter utilizzare gli elenchi puntati o numerati, spesso utili per definire una serie di informazioni (ad es. tutti gli oggetti originariamenti riposti nel cache) il testo va inserito all'interno di questa stringa:

<ol type="1">
 <li>pin</li>
 <li>matita</li>
 <li>logbook</li>
</ol>

Che produrrà il seguente risultato:

  1. pin
  2. matita
  3. logbook

Al posto dei numeri arabi puntati, possono essere usati altri numeri o simboli, semplicemente variando l'attributo di type fra gli apici.
In particolare possiamo ottenere:

tipo di elenco attributo
numeri arabi 1
numeri romani minuscoli i
numeri romani maiuscoli I
alfabeto minuscolo a
alfabeto maiuscolo A
pallino tondo pieno disc
pallino tondo vuoto circle
quadratino pieno square

Linea divisoria orizzontale

A volte può essere interessante suddividere il testo con una linea orizzontale, che definisce in maniera netta per esempio due argomenti distinti dei quali si sta parlando. Per ottenere una linea orizzontale, il tag da utilizzare è <hr> che come <br> non necessita di un tag di chiusura.

Segnalibri

E' una funzione particolarmente interessante che consente di "puntare" direttamente a una porzione specifica del testo in una data pagina web, attraverso un link. In qualche modo l'effetto finale è simile a quello che si ottiene quando si clicca su una voce della Table of Contents del wiki, che trovate descritta alla voce indice. Nella descrizione dei cache, può essere utile se il testo è molto lungo e se si vuole rimandare i giocatori a paragrafi specifici in maniera veloce.

Vediamola meglio con un esempio.

Il testo del cache è diviso in 3 paragrafi, che corrispondono a 3 lingue diverse:

  • italiano
  • inglese
  • tedesco

Per far sì che ognuno arrivi direttamente alla propria lingua, è possibile usare dei segnalibri, da attribuire a ogni paragrafo.

Il tag per definire un segnalibro è:

@a name="nome-del-segnalibro"@

Questo andrà scritto all'inizio del paragrafo cui si vuole "puntare". Naturalmente non sarà visibile, ma servirà solo come punto di riferimento.

Per puntare a quel determinato segnalibro, si userà invece il tag:

@a href="#nome-del-segnalibro">testo-da-visualizzare</a@

Ora vediamolo impiegato nella pratica:

Lingue: @a href="#italiano">Versione italiana</a> - <a href="#inglese">English version</a@


@a name="italiano"@<p>Le saline di Cervia sono un angolo naturalistico che da sempre cattura la mia attenzione per la possibilità di godere di panorami straordinari, soprattutto all'imbrunire, quando il sole calando all'orizzonte, dipinge la superfice delle acque con pennellate di colori dalle sfumature sempre diverse.</p>
<p>Attualmente fanno parte di un parco naturalistico protetto e pertanto non sono accessibili in tutta la loro superficie.</p>
ecc, ecc…

@a name="inglese"@<p>Cervia salt pans are a naturalistic corner that always captures my attention for the possibility to enjoy extraordinary panoramas, especially when it gets dark, when the sun decreasing to the horizon, paints the surface of the water with various shadings of color brush-strokes.</p>
<p>Nowadays they are part of a protected naturalistic park, therefore they are not completely accessible</p>
ecc, ecc…

Una volta inserito il testo, la pagina del cache apparirà come segue:

Lingue: Versione italiana - English version


Le saline di Cervia sono un angolo naturalistico che da sempre cattura la mia attenzione per la possibilità di godere di panorami straordinari, soprattutto all'imbrunire, quando il sole calando all'orizzonte, dipinge la superfice delle acque con pennellate di colori dalle sfumature sempre diverse.

Attualmente fanno parte di un parco naturalistico protetto e pertanto non sono accessibili in tutta la loro superficie.

ecc, ecc…

Cervia salt pans are a naturalistic corner that always captures my attention for the possibility to enjoy extraordinary panoramas, especially when it gets dark, when the sun decreasing to the horizon, paints the surface of the water with various shadings of color brush-strokes.

Nowadays they are part of a protected naturalistic park, therefore they are not completely accessible…

ecc, ecc…

Il codice HTML ovviamente non sarà più visibile, ma saranno presenti due collegamenti (Italiano, English) che punteranno rispettivamente al testo in italiano e a quello in inglese.

N.B.: la sintassi utilizzata in questo modo funziona solo se i segnalibri si trovano nella stessa pagina.

Risorse

Qui potete scaricare un piccolo manuale riassuntivo con i tag HTML più importanti (archivio ZIP) manuale_html.zip