In questa lezione, impareremo a creare pagine web utilizzando l'HTML (HyperText Markup Language). L'HTML è un linguaggio di marcatura utilizzato per creare pagine web, che possono essere visualizzate su qualsiasi browser web. Prima di iniziare a scrivere codice, è importante conoscere i concetti di base dell'HTML.
L'HTML è un linguaggio di marcatura, il che significa che utilizza tag per descrivere il contenuto della pagina. I tag sono delimitati da parentesi angolari, ad esempio <tag>. I tag HTML possono essere usati per descrivere il testo, le immagini, i link, i video, i suoni e altri tipi di contenuti.
Il formato generale di un documento HTML è il seguente:
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
Contenuto della pagina
</body>
</html>Nella prima riga, dichiariamo il tipo di documento HTML che stiamo utilizzando. In questo caso, stiamo utilizzando l'ultima versione, HTML5. La seconda riga definisce l'inizio del documento HTML, mentre la terza riga contiene l'intestazione del documento HTML, che contiene il titolo della pagina. La quarta riga rappresenta il corpo del documento HTML, che contiene il contenuto della pagina.
Tag HTML di base
Vediamo ora alcuni dei tag HTML di base e il loro utilizzo:
<html>e</html>: Questi tag delimitano il documento HTML.<head>e</head>: Questi tag delimitano l'intestazione del documento HTML. L'intestazione contiene informazioni come il titolo della pagina e i link alle risorse esterne.<title>e</title>: Questi tag delimitano il titolo della pagina. Il titolo della pagina appare nella scheda del browser web.<body>e</body>: Questi tag delimitano il contenuto della pagina. Tutto il contenuto della pagina viene inserito tra questi tag.<h1>e</h1>: Questi tag delimitano l'intestazione di primo livello. Il testo racchiuso tra questi tag viene visualizzato con un font più grande rispetto al testo normale.<p>e</p>: Questi tag delimitano un paragrafo di testo.<img>: Questo tag viene utilizzato per inserire un'immagine nella pagina web.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>La mia pagina web</title>
</head>
<body>
<h1>Benvenuti nella mia pagina web</h1>
<p>Questa è la mia prima pagina web. Spero vi piaccia!</p>
<img src="immagine.jpg" alt="Un'immagine"/>
</body>
</html>
In questo esempio, abbiamo creato una pagina web semplice con un titolo, un'intestazione, un paragrafo di testo e un'immagine.
Link e attributi HTML
I link consentono di collegare le pagine web tra di loro o di collegare una pagina ad una risorsa esterna come un'immagine o un video.
Per creare un link, si utilizza il tag <a> seguito dall'attributo href che indica l'URL a cui il link punta. Il testo del link è inserito tra i tag di apertura e chiusura del tag <a>.
Esempio di codice HTML per un link che porta ad un'altra pagina web:
<a href="https://www.google.it">Vai a Google</a>
In questo esempio, il testo del link è "Vai a Google" e l'attributo href contiene l'URL di Google.
Esempio di codice HTML per un link che apre una email precompilata:
<a href="mailto:[email protected]">Invia una email</a>
In questo esempio, l'attributo href contiene l'indirizzo email e il testo del link è "Invia una email".
Esempio di codice HTML per un link che apre un file PDF:
<a href="document.pdf">Apri il documento PDF</a>
In questo esempio, il testo del link è "Apri il documento PDF" e l'attributo href contiene il nome del file PDF.
Conclusioni
In questa lezione abbiamo visto i concetti base dell'HTML e alcuni esempi di codice HTML. L'HTML è il linguaggio di base per creare pagine web e la conoscenza dei suoi elementi fondamentali è essenziale per creare siti web funzionali e ben strutturati.
Ricorda che l'HTML è solo una parte di ciò che costituisce un sito web completo e che ci sono altri linguaggi come il CSS e il JavaScript che sono fondamentali per la creazione di un sito web moderno e interattivo. Ma l'HTML è la base su cui si costruiscono tutti gli altri elementi, quindi è importante padroneggiarlo bene prima di passare ad altre tecnologie.