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 Angry Men."</p>
</body>
</html>
