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. Puoi utilizzare un semplice browser per aprire il file HTML.
Ogni pagina web in HTML deve essere scritta attraverso dei tag, che servono a dare una struttura alla pagina web. La maggior parte dei tag deve essere aperto e chiuso in questo modo:
<nometag>;</nometag>.Ci sono alcuni tag che sono indispensabili per una pagina web, e altri no. Vediamo in dettaglio alcuni dei tag HTML più importanti da conoscere.
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. Ancora più importante, inoltre, è il tag <html>, che deve essere inserito all'inizio e alla fine della pagina web, perché delinea il contenuto HTML della pagina, specificando qual è l'inizio e la fine.
I tag <head> e <body> indicano rispettivamente la testa della pagina HTML e il corpo. In <head> si inseriscono le informazioni utili per la pagina (che l'utente non vede) e in <body> è il vero e proprio corpo, dove si inserisce il contenuto testuale.
Avendo visto i tag minimi per un file HTML, ora possiamo metterli in pratica. Ad esempio, creiamo 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 nella scheda del 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 correttamente. Nel programma di editor, salva il file e aggiorna la pagina nel browser quando effettui una qualsiasi modifica del codice. Con l'editor online di HTML, invece, non ce n'è bisogno.
I commenti sono informazioni che non sono visibili nella pagina web, ma solo nel codice HTML. Servono, di solito, come annotazione per facilitare la modifica del codice in futuro. I commenti HTML si devono racchiudere tra i simboli <!-- e --> e si possono scrivere su più righe.
<!DOCTYPE html>
<body>
<!—
Questo è un commento
su più righe che nella pagina non si vede
-->
</body>
All’interno dei tag sono contenuti gli attributi, che vedremo in dettaglio nelle prossime lezioni. Gli attributi aggiungono un'impostazione o uno stile ad un tag HTML. Gli attributi si inseriscono in questo modo: <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>