Se hai letto l’introduzione, avrai capito che il linguaggio HTML è la base per programmare un sito web. Ogni file nel linguaggio HTML deve essere salvato con .html per essere letto correttamente dal sistema. Utilizza un browser per aprire il file.
Tag iniziali
Ogni pagina web in HTML deve essere scritta con dei tag, che servono per dare la struttura alla pagina. La maggior parte dei tag deve essere aperto e chiuso:
Ci sono alcuni tag da inserire sempre, altri no. Vediamo assieme quelli indispensabili.
<!DOCTYPE HTML> e <HTML>
La dicitura <!DOCTYPE HTML> non è un vero tag, ma un’informazione che deve essere data al browser perché comprenda che è un file in linguaggio HTML. Più importante, invece, è il tag <html>, che deve essere inserito all’inizio e alla fine della pagina web, perché ne rappresenta l’inizio e la fine.
<head> e <body>
I tag <head> e <body> indicano rispettivamente la testa della pagina e il corpo. In <head> si inseriscono informazioni utili per la pagina e in <body> è il vero e proprio corpo, dove si inserisce il contenuto.
Struttura minima di una pagina
Avendo visto i tag minimi per un file HTML, mettiamoli in pratica. Creiamo per esempio una pagina con la scritta "La mia prima pagina web!". In <head> inseriamo anche il tag <title>, che da un titolo alla pagina, visibile in alto nel browser. Ecco come si fa:
<!DOCTYPE html>
<html>
<head>
<title>Il titolo di questa pagina</title>
</head>
<body>
La mia prima pagina web!
</body>
</html>
Possiamo vedere che all’interno dei tag si salta un po’ di spazio: questo perché in grandi pagine web si può vedere velocemente dove inizia e si chiude un tag. Per creare uno spazio basta cliccare Tab sulla tastiera. Ricorda sempre di chiudere i tag, perché il browser potrebbe non visualizzare la pagina. Nel programma di editor, salva il file e aggiorna la pagina nel browser quando effettui una qualsiasi modifica del codice.
I commenti
I commenti sono informazioni che solo nel codice HTML si possono vedere e servono per, ad esempio, appuntarci qualcosa. Per aprirli si usa <!-- e per chiuderli --> e si possono inserire su più righe. Non appariranno nella pagina web.
<!DOCTYPE html>
<body>
<!—
Questo è un commento
su più righe che nella pagina non si vede
-->
</body>
Attributi
All’interno dei tag sono contenuti gli attributi, che vedremo in dettaglio nelle prossime lezioni. Gli attributi attribuiscono, appunto, una impostazione ad un tag. Gli attributi si inseriscono così: <nometag attributo=”valore”> </nometag>.
Per esempio, nel tag <html> possiamo inserire l’attributo lang, che indica al browser la lingua della pagina, per esempio l’italiano. Dopo lang si inserisce =”nome_lingua” sottoforma di sigla (come IT) e diventa:
<!DOCTYPE html>
<html lang="it">
// Contenuto della pagina
</html>
| Prossima lezione |