Guide

Corso HTML – Lezione 3 : La struttura della pagina HTML

HTMLIl codice di una pagina HTML è sempre formato da tre parti differenti :

  • l’intestazione , costituita dal seguente tag che non necessita di essere chiuso :
<!doctype html>
  • lo header , compreso tra i tag <head> e </head>
  • il body , compreso tra i tag <body> </body>

L’intestazione deve necessariamente essere posta all’inizio del codice , in quanto ha la funzione di comunicare al browser il linguaggio in cui la pagina web è scritta . Lo header e il body sono compresi nel tag <html> e contengono rispettivamente la parte invisibile ( titolo , descrizione ecc . ) e la parte visibile della pagina web . La struttura fondamenta di una pagina HTML è di conseguenza sempre la seguenta :

<!doctype html>
<html>
   <head>
   </head>
   <body>
   </body>
</html>

[box type=”info” ] Come negli altri linguaggi di programmazione , l’indentazione del codice HTML viene utilizzata per evidenziarne la struttura di nidificazione che , in questo caso è composta da 2 parti ovvero dal tag html che funge da contenitore e racchiude gli altri due tag head e body .[/box]
All’interno dello header è possibile indicare il titolo della pagina qeb che sarà visibile nella ” barra del titolo ” del browser o all’interno dei risultati di un motore di ricerca ; per farlo è sufficiente utilizzare il tag <title> contenente il titolo desiderato all’interno dello header :

<head>
   <title>Titolo della pagina</title>
</head>

Utilizzando il tag <meta> nello header si ha la possibilità di aggiungere alla pagina alcune parole chiave e una breve descrizione del contenuto : quesi sono elementi essenziali per il posizionamento della pagina nei risultati forniti dai motori di ricerca .
[box type=”info” ]Un motore di ricerca come Google mantiene sui propri server le associazioni tra il testo contenuto nelle pagine web e i loro URL in modo da poter fornire , partire da una richiesta basata su alcune parole chiave , un elenco di pagina pertinenti opportunamente ordinate . L’aggiornamento delle associazioni è demandato a programmi ( noti come web crawler o spider ) che visitano automaticamente i siti presenti in Internet , aggiornando gli indici della parole chiave utilizzati dal motore di ricerca .[/box]
Il tag <meta> ha due attributi principali – name e content – e non necessita di essere chiuso , in quanto presenta già il simobolo ” / ” all’interno del tag di apertura .
Per inserire la descrizione è necessario assegnare il valore description all’attributo name e assegnare la stringa di descrizione all’attributo content . Per aggiungere le parole chiave è necessario assegnare il valore “keywords” all’attributo name e assegnare l’elenco delle parole chiave – separate dal carattere ” , ” (virgola) – all’attributo content .

[box type=”info” ]A eccezione del titolo ( tag

) , ciò che viene inserito nello header di una pagina HTML non viene visualizzato quando essa viene aperta dal browser.[/box]

Facciamo un rapido esempio : La home-page di un sito web dedicato alla storia del computer potrebbe avere uno header come il seguente :
<head>
   <title>La storia del computer</title>
   <meta name="description" content= "Il computer dal 1945 ad oggi "/>
   <meta name="keywords" content="computer,storia,Von Neumann,Pc , Personal Computer"/>
</head>

[box type=”info” ]A eccezione del titolo ( tag) , ciò che viene inserito nello header di una pagina HTML non viene visualizzato quando essa viene aperta dal browser.[/box]

Il body invece è la parte visibile della pagina HTML ; infatti è all’interno del tag body che deve essere inserito il contenuto della pagina /testi, immagini, video, audio ecc.. ) .

Lascia un commento

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

Le guide più interessanti