HTML - Tag basiliari

Il tag Intestazione

Qualsiasi documento inizia con un'intestazione. È possibile utilizzare diverse dimensioni per le intestazioni. HTML ha inoltre sei livelli di intestazioni, utilizzabili tramite i tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Durante la visualizzazione di un intestazione, il browser aggiunge una riga prima e una riga dopo l'intestazione.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Esempio Intestazioni</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Produrrà il seguente risultato:

Il Tag Paragrafo

Il tag <p> offre la possibilità di strutturare il testo in diversi paragrafi. Ogni paragrafo del testo dovrebbe essere scritto tra un tag di apertura <p> e un tag di chiusura </p> come illustrato nell'esempio seguente:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Primo paragrafo.</p>
<p>Secondo paragrafo.</p>
<p>Terzo paragrafo.</p>
</body>
</html>

Produrrà il seguente risultato:

Primo paragrafo.

Secondo paragrafo.

Terzo paragrafo.

Il Tag di fine riga (Line Break)

Ogni volta che viene utilizzato l'elemento <br />, tutto ciò che segue andrà nella riga successiva. Questo tag è un esempio di elemento vuoto, poichè non vi è la necessità di tag di apertura e chiusura, e non necessità di nessun testo all'interno.

Il tag <br /> ha uno spazio fra br e lo slash. Se viene omesso questo spazio, alcuni vecchi browser potrebbero avere problemi nell'interpretare il line break, mentre se viene omesso lo slash e digitato semplicemente <br> non viene considerato un tag valido in XHTML.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Esempio Line Break</title>
</head>
<body>
<p>Ciao<br />
Il tuo ordine ` stato spedito in tempo.<br />
Grazie<br />
Mahnaz</p>
</body>
</html>

Produrrà il seguente risultato:

Ciao
Il tuo ordine ` stato spedito in tempo.
Grazie
Mahnaz

Centrare Contenuto

Per centrare il contenuto nella pagina o all'interno della cella di una tabella si può utilizzare il tag <center>.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Esempio Centrare Contenuto</title>
</head>
<body>
<p>Questo testo non è centrato.</p>
<center>
<p>Questo testo si trova al centro.</p>
</center>
</body>
</html>

Produrrà il seguente risultato:

Questo testo non è centrato.

Questo testo si trova al centro.

Linee Orizzontali

Le linee orizzontali vengono possono essere utilizzate per separare graficamente le sezioni all'interno del documento. Il tag <hr> crea una linea dalla posizione in cui viene inserita, fino al margine destro della pagina.

Per esempio potremmo inserire una linea fra due paragrafi come nell'esempio seguente:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Esempio Linea Orizzonale</title>
</head>
<body>
<p>Questo è il primo paragrafo e sarà in alto.</p>
<hr />
<p>Questo è il secondo paragrafo e sarà in basso.</p>
</body>
</html>

Produrrà il seguente risultato:

Questo è il primo paragrafo e sarà in alto.

Questo è il secondo paragrafo e sarà in basso.

Anche il tag <hr /> è un esempio di elemento vuoto, che non necessita di tag di apertura e chiusura, nè di alcun testo al suo interno.

L'elemento <hr /> necessità di uno spazio fra il testo hr e lo slash. Se viene omesso questo spazio, alcuni vecchi browser potrebbero avere problemi nell'interpretare la linea orizzontale, mentre se viene omesso lo slash e digitato semplicemente <hr> non viene considerato un tag valido in XHTML.

Mantenere Formattazione

A volte si desidera che il testo segua la formattazione esatta di come viene scritto nel documento HTML. In questi casi, è possibile utilizzare il tag <pre>.

Qualsiasi testo che si trova tra il tag di apertura <pre> e il tag di chiusura </pre> manterrà la formattazione del documento HTML di origine.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Esempio Formattazione</title>
</head>
<body>
<pre>
function testFunction( strText ){
   alert (strText)
}
</pre>
</body>
</html>

Produrrà il seguente risultato:

function testFunction( strText ){
   alert (strText)
}

Per capire ancora meglio l'esempio prova a riscriverlo senza i tags <pre>...</pre>

Nonbreaking Spaces

Supponiamo di voler inserire la frase "12 Angry Men." e non vogliamo che il browser separi "12, Angry" e "Men" in due righe:

Un esempio di questa tecnica appare nel film "12 Angry Men".

Per fare in modo che il browser non spezzi il testo, bisogna utilizzare i così detti nonbreaking space   al posto della normale spaziatura. Per esempio, quando scriveremo "12 Angry Men" all'interno di un paragrafo, dovremmo scrivere un codice simile al seguente:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Esempio Nonbreaking Spaces</title>
</head>
<body>
<p>Un esempio di questa tecnica appare nel film "12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>