Un file HTML è semplicemente un file di testo salvato con estensione .html o .htm.
Inizio
In questo tutorial imparerai come è facile creare un documento HTML o una pagina web. Per iniziare a codificare l’HTML hai bisogno solo di due cose: un editor di testo semplice e un browser web.
Bene, iniziamo a creare la tua prima pagina HTML.
Creare il tuo primo documento HTML
Passiamo attraverso i seguenti passi. Alla fine di questo tutorial, avrai creato un file HTML che visualizza il messaggio “Hello world” nel tuo browser web.
Passo 1: Creazione del file HTML
Apri l’editor di testo semplice del tuo computer e crea un nuovo file.
Suggerimento: Ti suggeriamo di usare Notepad (su Windows), TextEdit (su Mac) o qualche altro semplice editor di testo per fare questo; non usare Word o WordPad! Una volta che hai capito i principi di base, puoi passare a strumenti più avanzati come Adobe Dreamweaver.
Step 2: Digitare del codice HTML
Inizia con una finestra vuota e digita il seguente codice:
Esempio
Prova questo codice ”
<!DOCTYPE html><html lang="en"><head> <title>A simple HTML document</title></head><body> <p>Hello World!<p></body></html>Step 3: Salvare il file
Ora salva il file sul tuo desktop come “myfirstpage.html “.
Nota: E’ importante che sia specificata l’estensione .html – alcuni editor di testo, come Notepad, lo salveranno automaticamente come .txt altrimenti.
Per aprire il file in un browser. Naviga fino al tuo file e fai doppio clic su di esso. Si aprirà nel tuo browser web predefinito. Se non lo fa, apri il tuo browser e trascina il file su di esso.
Spiegazione del codice
Potresti pensare a cosa fosse tutto quel codice. Bene, scopriamolo.
- La prima linea
<!DOCTYPE html>è la dichiarazione del tipo di documento. Indica al browser web che questo documento è un documento HTML5. E’ case-insensitive. - L’elemento
<head>è un contenitore per i tag che forniscono informazioni sul documento, per esempio, il tag<title>definisce il titolo del documento. - L’elemento
<body>contiene il contenuto effettivo del documento (paragrafi, link, immagini, tabelle, e così via) che viene reso nel browser web e mostrato all’utente.
Apprenderai i diversi elementi HTML in dettaglio nei prossimi capitoli. Per ora, concentrati solo sulla struttura di base del documento HTML.
Nota: Una dichiarazione DOCTYPE appare all’inizio di una pagina web prima di tutti gli altri elementi; tuttavia la dichiarazione doctype stessa non è un tag HTML. Ogni documento HTML richiede una dichiarazione del tipo di documento per assicurare che le tue pagine siano visualizzate correttamente.
Tip: I tag <html><head>, e <body> costituiscono lo scheletro di base di ogni pagina web. Il contenuto all’interno dei tag <head> e </head> è invisibile agli utenti con una sola eccezione: il testo tra i tag <title> e </title> che appare come titolo su una scheda del browser.
Taghette ed elementi HTML
HTML è scritto sotto forma di elementi HTML composti da tag di markup. Questi tag di markup sono la caratteristica fondamentale dell’HTML. Ogni tag di markup è composto da una parola chiave, circondata da parentesi angolari, come <html><head><body><title><p> e così via.
I tag HTML normalmente vengono in coppie come <html> e </html>. Il primo tag di una coppia è spesso chiamato tag di apertura (o tag iniziale), e il secondo tag è chiamato tag di chiusura (o tag finale).
Un tag di apertura e un tag di chiusura sono identici, tranne una barra (/) dopo la parentesi angolare di apertura del tag di chiusura, per dire al browser che il comando è stato completato.
Tra i tag iniziale e finale puoi mettere contenuti appropriati. Per esempio, un paragrafo, che è rappresentato dall’elemento p, sarebbe scritto come:
Esempio
Prova questo codice ”
<p>This is a paragraph.</p><!-- Paragraph with nested element --><p> This is <b>another</b> paragraph.</p>Apprenderai i vari elementi HTML nel prossimo capitolo.