Come funziona l'html.

La struttura di una pagina html prevede 2 sezioni, la testa (header) e il corpo (body). All'interno dell'header si trovano informazioni che riguardano la pagina ma che non vengono visualizzate nella consultazione della pagina. Principalmente vi si trovano i metatag che servono a dare informazioni ai motori di ricerca, e i CSS con cui formattiamo la struttura della pagina.

Nel body trovano posto tutti i contenuti (testi, immagini...) che vengono visualizzati nella pagina web.

La struttura dell'html è composta dai tags. Essi hanno quasi sempre bisogno di chiusura ma esistono tags che non vengono chiusi (esempio il tag delle immagini). All'interno del tag si trova il contenuto, cioè l'elemento che verrà visualizzato nella pagina.

Sintassi dei tags:

Il tag si apre in questo modo: <p>
Lo si chiude così: </p>

Vediamo adesso com'è fatta la struttura di una pagina html.

Iniziamo con la dichiarazione di conformità al World Wide Web Consortium (W3C):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
Di seguito apriamo il tag principale:
<html>
Apriamo la testa della pagina:
<header>
Inseriamo il tag per il titolo (il testo che inseriamo dentro questo tag sarà visualizzato sulla barra del documento del browser ma non nella pagina:
<title>
Chiudiamo il tag del titolo:
</title>
Chiudiamo la testa:
</header>
Apriamo il corpo della pagina:
<body>

All'interno del body vi saranno molti altri tags con cui costruire la pagina web.

Chiudiamo il body:
</body>
Chiudiamo il tag di apertura:
</html>

Questo è un esempio semplice di struttura e mostra i tags principali e indispensabili.

Come detto, all'interno del body trovano posto molti altri tags, facciamo qualche esempio:

Il tag del paragrafo:
<p></p>

Il tag dei titoli:
<h></h>

Il tag dei link:
<a></a>

Il tag delle immagini (ha l'apertura ma non la chiusura):
<img>

Il tag generico div:
<div></div>

Il tag della tabella:
<table></table>

Facciamo un esempio concreto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<header>
<title>pagina di esempio</title>
</header>
<body>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>

<p>Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
</body>
</html>

Il risultato è una pagina con un titolo e 2 paragrafi di testo. Il tag <p> è contenuto nel body.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *