In questo articolo, inizieremo a creare un documento HTML di base per familiarizzare con l’argomento. È importante notare che per creare una semplice pagina HTML, non è necessario disporre di software o editor particolari. Puoi creare una pagina HTML utilizzando un semplice editor di testo. Un file HTML è in realtà un documento plain text in cui, grazie all’utilizzo dei tag, è possibile gestire formattazioni specifiche e inserire link ed elementi multimediali.
Editor di file HTML
Se stai usando un computer Windows, basta creare un nuovo documento di testo con Notepad (o Blocco note) e salvarlo, avendo cura di cambiare l’estensione del file da .txt a .html o .htm. Se stai usando un Mac o un sistema Unix, puoi utilizzare un qualsiasi editor di testo semplice come Vim o Emacs.
Dopo aver creato il tuo primo file HTML, dovrai fare doppio clic sull’icona del file per aprire il tuo browser predefinito all’interno del tuo sistema operativo. Su Windows, molto probabilmente, si aprirà Microsoft Edge o Google Chrome, a seconda di quale browser hai impostato come predefinito. Attraverso il browser, potrai visualizzare il risultato del tuo lavoro. Poiché non abbiamo ancora inserito nulla nel file, vedrai una semplice pagina bianca. Per visualizzare il codice sorgente di una pagina web aperta nel browser, puoi utilizzare la funzione di visualizzazione del codice sorgente HTML. Ecco come farlo in vari browser:
- In Microsoft Edge: Fai clic destro sulla pagina > Visualizza codice sorgente, oppure usa la scorciatoia da tastiera Ctrl+U
- In Google Chrome: Fai clic destro sulla pagina > Ispeziona, oppure usa la scorciatoia da tastiera Ctrl+Shift+I e poi vai nella scheda "Elements"
- In Firefox: Vai a Strumenti > Sviluppo Web > Sorgente pagina
- In Safari: Vai a Sviluppo > Mostra sorgente Pagina
Creiamo il nostro primo file HTML
Adesso, possiamo iniziare a scrivere la nostra prima pagina HTML. Come abbiamo accennato nella lezione introduttiva, i comandi che compongono il codice HTML vengono chiamati tag. I tag sono composti dal nome del tag, eventuali attributi e un tag di chiusura corrispondente, se previsto (cosa che avviene nella maggior parte dei casi).
Un tag è racchiuso nei simboli matematici di minore (<) e maggiore (>). È indifferente scrivere i tag in maiuscolo o in minuscolo. Tuttavia, dal momento che le regole dell’HTML suggeriscono di utilizzare le lettere minuscole e quelle dell’XHTML lo richiedono, è meglio abituarsi a utilizzare le minuscole.
Guardiamo un esempio della struttura di una generica pagina HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
<html>
<head>
<title>Titolo della pagina...</title>
</head>
<body>
<!-- Questo è un commento! -->
</body>
</html>Come avrai notato, il simbolo / inserito prima del nome del tag viene utilizzato per indicare la chiusura del tag stesso. Ad esempio:
<html>
...
...
...
</html>Sebbene non ci siano differenze pratiche, ti consigliamo vivamente di chiudere sempre i tag "a specchio", ovvero:
<a><b>bla bla bla</b></a>e non:
<a><b>bla bla bla</a></b>In questo modo, il tuo documento sarà più ordinato e facile da modificare.
Alcune considerazioni sul codice visto sopra:
- L’intero documento (ad esclusione del DOCTYPE di cui parleremo approfonditamente in una lezione futura) è racchiuso tra i tag <html> e </html>;
- Il documento si suddivide in due macro-aree:
- Header (porzione invisibile all’utente e compresa tra i tag <head> e </head>);
- Corpo della pagina (porzione di pagina che contiene gli elementi visibili all’utente; è compresa tra i tag <body> e </body>).
Nell’header (intestazione) della pagina troviamo attualmente solo il tag <title> con la relativa chiusura </title>. Questo rappresenta il titolo che appare nella barra del titolo del browser. Si consiglia sempre di assegnare un titolo significativo a una pagina per favorire l’indicizzazione nei motori di ricerca. Oltre al titolo, l’header del documento può contenere altri elementi come, ad esempio, i meta-tag, gli script e i fogli di stile. Discuteremo più in dettaglio la struttura e il contenuto della sezione header in una futura lezione di questa guida.
Per quanto riguarda il corpo della pagina, nel nostro esempio, esso è vuoto e contiene solo un commento, ovvero una nota invisibile agli utenti inserita come riferimento per lo sviluppatore. In una delle prossime lezioni, tratteremo in dettaglio come gestire i commenti all’interno del codice HTML.
