HTML è l'acronimo di Hypertext Markup Language . È un linguaggio speciale utilizzato per creare pagine web. Quando visiti un sito web, il computer legge l'HTML per mostrarti parole, immagini e link. Pensa all'HTML come ai mattoni di un sito web. Proprio come usi i mattoncini Lego per costruire una casa o un'auto, noi usiamo i tag HTML per creare una pagina web.
L'HTML è il codice che indica a un computer come visualizzare testo, immagini, video e link su una pagina web. È come dare istruzioni a un amico che sta disegnando per te. L'HTML utilizza parole racchiuse tra parentesi angolari, chiamate tag , per contrassegnare l'inizio e la fine di una parte della pagina web.
Ogni sito web che visiti utilizza l'HTML in qualche modo. Senza HTML, non ci sarebbero pagine web da visualizzare. L'HTML aiuta a organizzare i contenuti e indica al computer come visualizzare la pagina. È la prima cosa che si impara nello sviluppo web perché fa funzionare Internet!
Un documento HTML ha una struttura speciale. Inizia con una dichiarazione chiamata <code><!DOCTYPE html></code> che indica al computer che la pagina utilizza HTML. Il documento è poi diviso in due parti principali: l'intestazione e il corpo.
Un documento HTML molto semplice si presenta così:
<codice><!DOCTYPE html>
<html>
<testa>
<title>La mia prima pagina web</title>
</testa>
<corpo>
<p>Ciao, mondo!</p>
</corpo>
</html> </code>
In questo esempio, la sezione <head> fornisce il titolo della pagina, mentre la sezione <body> è quella in cui si inserisce il contenuto che appare sullo schermo.
L'HTML utilizza i tag per contrassegnare le diverse parti della pagina web. Un tag è una parola racchiusa tra parentesi angolari. Ad esempio, <code><p></code> indica al computer che il testo che segue è un paragrafo. Una volta terminato il paragrafo, si utilizza il tag di chiusura, <code></p></code>, per indicarne la fine.
Un elemento in HTML è costituito da un tag di apertura, del contenuto e un tag di chiusura. Ad esempio:
<code><p>Questo è un paragrafo.</p></code>
Ogni tag indica al browser web come visualizzare il contenuto.
Ci sono molti tag in HTML. Alcuni dei più comuni sono:
Gli attributi forniscono informazioni aggiuntive su un elemento HTML. Vengono aggiunti al tag di apertura, all'interno delle parentesi angolari del tag. Gli attributi più comuni sono src e alt, utilizzati con il tag immagine.
Ad esempio, per aggiungere un'immagine, potresti scrivere:
<code><img src="picture.jpg" alt="Una bella foto"></code>
In questo caso, src indica al browser dove si trova il file immagine, mentre alt fornisce una descrizione dell'immagine se non può essere visualizzata.
Il documento HTML è diviso in due parti:
I link consentono di passare da una pagina all'altra. In HTML, i link vengono creati utilizzando il tag <a> . L'attributo href all'interno del tag indica al browser la destinazione del link.
Per esempio:
<code><a href="https://www.example.com">Visita Example.com</a></code>
Cliccando su questo link, il tuo browser aprirà il sito web example.com .
Le immagini ravvivano una pagina web e la rendono più interessante. Per aggiungere un'immagine, si utilizza il tag <img> . Ricordate che il tag <img> non ha un tag di chiusura.
Ecco come aggiungere un'immagine:
<code><img src="sunflower.jpg" alt="Un girasole luminoso"></code>
Questo codice indica al browser di visualizzare l'immagine di un girasole. L'attributo src punta alla posizione dell'immagine e l'attributo alt fornisce una descrizione dell'immagine.
Gli elenchi organizzano le informazioni in un formato ordinato. Esistono due tipi principali di elenchi in HTML:
Ecco un esempio di elenco non ordinato:
<codice><ul>
<li>Mela</li>
<li>Banana</li>
<li>Ciliegia</li>
</ul> </code>
Ed ecco un esempio di elenco ordinato:
<codice><ol>
<li>Primo</li>
<li>Secondo</li>
<li>Terzo</li>
</ol> </code>
Le tabelle aiutano a visualizzare le informazioni in righe e colonne. Sono utili quando è necessario confrontare dati o elencare elementi in una griglia.
Ecco un semplice esempio di tabella HTML:
<codice><bordo della tabella="1">
<tr>
<th>Nome</th>
<th>Età</th>
</tr>
<tr>
Alice
10
</tr>
</tabella> </codice>
In questa tabella, <tr> definisce una riga della tabella, <th> è utilizzato per l'intestazione della tabella (testo in grassetto) e <td> è utilizzato per i dati della tabella (le celle).
L'HTML consente anche di aggiungere contenuti multimediali come audio e video. Con il tag <audio> , puoi includere file audio. Con il tag <video> , puoi incorporare lettori video nella tua pagina web.
Ecco un esempio di codice di incorporamento video:
<code><video width="320" height="240" controlli>
<source src="film.mp4" type="video/mp4">
</video> </codice>
Questo codice crea un lettore video con pulsanti per riprodurre, mettere in pausa o regolare il volume. L'attributo controls indica al browser di visualizzare questi pulsanti.
Ogni sito web su Internet è realizzato in HTML. Immagina di visitare il sito web della tua scuola, un sito di giochi divertenti o di leggere una storia online. L'HTML lavora dietro le quinte per organizzare testo, immagini e altri contenuti in modo che tu possa vederli chiaramente.
Ad esempio, quando vedi online un'immagine del tuo personaggio dei cartoni animati preferito o clicchi su un collegamento per saperne di più su un argomento divertente, l'HTML è lì per aiutarti.
Diamo un'occhiata a un progetto semplice. Immagina di voler creare una piccola pagina web sul tuo animale preferito, come un gatto. Puoi includere un titolo, un paragrafo sui gatti, un'immagine e persino un link a un sito web con curiosità sui gatti.
Il tuo codice HTML potrebbe apparire così:
<codice><!DOCTYPE html>
<html>
<testa>
<title>Il mio animale preferito</title>
</testa>
<corpo>
<h1>Tutto sui gatti</h1>
<p>I gatti sono giocherelloni e teneri. Amano dormire e fare le fusa. Molte persone adorano avere gatti come animali domestici.</p>
<img src="cat.jpg" alt="Un gatto carino">
<a href="https://www.catfacts.com">Scopri di più sui gatti</a>
</corpo>
</html> </code>
Questo progetto utilizza titoli, paragrafi, immagini e link. Mostra come l'HTML viene utilizzato per creare una pagina web completa, composta da più parti.
Mentre l'HTML crea la struttura di una pagina web, esistono altri strumenti che rendono i siti web più divertenti sia nell'aspetto che nel comportamento.
Anche se oggi stiamo imparando a usare l'HTML, conoscere CSS e JavaScript ci aiuta a capire come vengono realizzati i siti web.
Esplorando l'HTML, troverai molti altri tag. Eccone alcuni che vale la pena conoscere:
Questi tag ti danno un maggiore controllo su come i tuoi contenuti appaiono su una pagina web.
L'HTML è cambiato molto dalla sua creazione. Nel tempo sono stati aggiunti molti nuovi tag e funzionalità. Ogni nuova versione dell'HTML semplifica la creazione di siti web complessi e accattivanti. Oggi, l'HTML si integra con CSS e JavaScript per creare siti web moderni, divertenti da usare e dall'aspetto accattivante.
Questa evoluzione fa sì che l'HTML sia facile da imparare e sufficientemente potente per creare di tutto, dalle semplici pagine web alle complesse applicazioni web.
Anche se imparare l'HTML è divertente, è sempre importante rimanere al sicuro su Internet. Quando visiti siti web o esplori contenuti online, ricorda di chiedere sempre aiuto a un adulto in caso di dubbi. La tua sicurezza viene prima di tutto e imparare l'HTML dovrebbe essere sempre un'esperienza divertente e sicura.
Diamo un'occhiata ad alcuni termini importanti che hai imparato oggi:
L'HTML è utilizzato in molti contesti reali. Ecco alcuni esempi:
Questi esempi dimostrano come l'HTML sia uno strumento molto utile in molti ambiti della vita quotidiana.
Oggi abbiamo imparato che HTML è l'abbreviazione di Hypertext Markup Language . È il linguaggio di base utilizzato per creare pagine web. Ecco i punti chiave da ricordare:
L'HTML è il fondamento di ogni sito web che vedi su Internet. Con semplici elementi costitutivi come tag e attributi, puoi creare pagine divertenti e interattive. Continuando a imparare, scoprirai come l'HTML contribuisce a dare vita alle pagine web, rendendo Internet un luogo utile ed entusiasmante da esplorare.
