Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Tag HTML fondamentali per i contenuti

Link copiato negli appunti

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"   />

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.

È sufficiente differenziarli nei seguenti tre tipi:

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>

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>


Ti consigliamo anche