Iniziamo a fare la conoscenza dei tag basilari per la scrittura dei contenuti in una pagina HTML e orientarci con elementi di base del Web design.
HTML <p> : testo e paragrafi
Innanzitutto il tag <p>, paragrafo. All'interno di esso sono contenute quelle porzioni di testo che tipicamente noi interpretiamo come paragrafi: piccoli brani formati da uno o più periodi, distanziati tra loro tramite apposita spaziatura.
Per andare invece a capo semplicemente, senza cambiare paragrafo, si utilizza il tag
, che sta per break, interruzione di linea. Ecco un esempio:
<p>Testo qui</p><p>Secondo paragrafo di testo</p>La porzione di testo compresa fra l'apertura e la chiusura del tag verrà interpretata come paragrafo. Pertanto al termine del primo <p>, il testo andrà a capo, dove inizierà il secondo paragrafo. È scorretto usare il break (<br />) per "mandare a capo" se poi effettivamente ciò che segue è, a livello logico, un paragrafo a sé stante. Ecco perchè viene usato raramente.
Inoltre non preoccupatevi, in questo caso, di voler "mandare a capo" il testo nei punti in cui la grafica lo richiederebbe: il paragrafo infatti occupa tutto lo spazio possibile in orizzontale proprio in virtù del fatto, come vedremo di seguito, che è considerato un "elemento di blocco".
Se occorrerà andare a capo per via della grafica, correggerete in un secondo momento tramite i CSS questo aspetto.
Titoli e sottotitoli (h1, h2, ...)
Per identificare invece un titolo all'interno di una pagina si usa un tag al quale viene associato anche un numero a seconda dell'importanza di tale titolo: <h1> è quello fondamentale, che si usa normalmente per definire il titolo della pagina e/o del sito.
Si differenzia dal tag <title> perchè il primo si visualizza esclusivamente nella barra del browser, mentre questo è visibile all'interno della pagina stessa.
A seguire potremo usare gli <h2>, <h3> etc a seconda dell'importanza del titolo all'interno del contesto dei contenuti (attenzione, a seconda dell'importanza e non della "consequenzialità" degli stessi).
Elementi HTML inline e block
Gli elementi <p> e <h1>, etc sono definiti anche come "elementi di tipo blocco" (block) in quanto come comportamento di base hanno quello di occupare in larghezza tutto lo spazio occupabile e di andare a capo non appena il tag viene chiuso, lasciando anche una spaziatura di default (correggibile e definibile tramite CSS).
I tag che seguono invece sono definiti "tag in linea" (inline) perché il loro uso non comporta un "andare a capo" e sono usati all'interno degli elementi di blocco.
I più usati sono:
| Tag inline | Descrizione |
|---|---|
<strong></strong> |
definisce l'importanza di alcune porzioni di testo ed ha come comportamento tipico quello di restituire in "grassetto" il testo |
<em></em> |
altro tipo di enfasi, che restituisce il testo in corsiv |
<a href="pagina.html" title="testo">nome del link</a> |
definisce i link (o àncore di testo) |
HTML <img> : le immagini
Infine, ci sono gli elementi cosiddetti "rimpiazzati" (replaced), che vengono richiamati all'interno della pagina. Il più comune è il tag per le immagini.
<img src="nome.jpg" alt="testo alternativo" width="100" height="50" />che definisce un'immagine "contenuto" e che possidede i tre attributi che vedete:
- testo alternativo (alt), necessario per mostrare un alternativa in mancanza del caricamento dell'immagine o per i non vedenti
- larghezza e altezza, sempre meno utilizzati perché queste grandezze sono definite tramite CSS
La stessa immagine è trasformabile in immagine cliccabile con l'uso delle àncore ed è definita tramite un tag "autoconclusivo" perchè non contiene porzioni di testo da formattare.
Links (collegamenti) o àncore
È sufficiente differenziarli nei seguenti tre tipi:
Link assoluti
Puntano ad un indirizzo contenente l'indirizzo completo di http://www... e che possono puntare pertanto anche a siti esterni, per esempio:
<a href="http://www.lauryn.it" title="Sito esterno">Lauryn</a>Link relativi
Puntano a pagine che vengono cercate sul server dove risiede il sito, pertanto è sufficiente mettere il percorso (o path) dove risiede la pagina ricercata, ed il browser la cercherà nell'url del nostro sito stesso. Esempio:
<a href="/cartella/pagina.html" title="Pagina del sito">Pagina</a>I percorsi si definiscono con la seguente sintassi: / (slash) posto all'inizio sta per root (o radice) principale, i successivi indicano precedono il nome di una cartella o del nome finale della pagina da richiamare. Quando il percorso viene richiamato da una pagina che risiede nella root sarà simile a quello indicato nell'esempio.
Viceversa se la pagina che contiene il link si trova in una cartella del sito e deve richiamare un'altra pagina che sia, ad esempio, sulla root, il link sarà:
<a href="../../pagina.html" title="Pagina del sito">Pagina</a>dove i due puntini indicano di tornare indietro di una cartella, qualsiasi essa sia.
Àncore HTML
Scrivendo #nome al posto di un altro indirizzo, cercherà all'interno della pagina stessa, il div che abbia quell'identificativo, e muoverà la scrollbar, se il contenuto lo permette, facendo iniziare la pagina in coincidenza dell'inizio dello stesso (è più facile vederla in azione che spiegarla ;-)):
<a href="#luna" title="Sezione Luna">Sezione che parla della luna</a>Da qualche parte sulla pagina dovrà esserci un div siffatto:
<div id="luna">
...
</div>