Le Basi del HTML

HTML (HyperText Markup Language) è il linguaggio standard per creare pagine web. In questa guida, esploreremo le basi del HTML, inclusi gli elementi fondamentali, le strutture e i tag principali.

Che Cos'è l'HTML?

L'HTML è un linguaggio di markup utilizzato per strutturare i contenuti sul web. Utilizza tag per creare elementi come titoli, paragrafi, link, immagini e molto altro.

Struttura di Base di un Documento HTML

Un documento HTML tipico ha una struttura di base che include i seguenti elementi:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titolo della Pagina</title>
</head>
<body>
    <!-- Contenuto della pagina -->
</body>
</html>

Spieghiamo questi elementi:

<!DOCTYPE html>: Dichiara il tipo di documento come HTML5.
<html>: Tag radice che racchiude tutto il contenuto HTML.
<head>: Contiene metadati e informazioni di configurazione, come il titolo della pagina e i link ai fogli di stile.
<meta charset="UTF-8">: Specifica la codifica dei caratteri del documento.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Imposta la visualizzazione su dispositivi mobili.
<title>: Definisce il titolo della pagina che appare nella scheda del browser.
<body>: Contiene il contenuto visibile della pagina.

Tag Principali del HTML

Esaminiamo alcuni dei tag HTML più utilizzati:

Titoli

I tag di titolo (<h1> a <h6>) definiscono i titoli nella pagina. <h1> è il titolo più importante, mentre <h6> è il meno importante.

<h1>Titolo Principale</h1>
<h2>Sottotitolo</h2>

Paragrafi

Il tag <p> è utilizzato per creare paragrafi di testo.

<p>Questo è un paragrafo di esempio.</p>

Link

Il tag <a> crea collegamenti ipertestuali. L'attributo href specifica l'URL di destinazione.

<a href="https://www.example.com">Visita Example</a>

Immagini

Il tag <img> incorpora immagini. Gli attributi src e alt specificano rispettivamente la sorgente dell'immagine e il testo alternativo.

<img src="/path/to/image.jpg" alt="Descrizione dell'immagine">

Liste

Le liste non ordinate (<ul>) e ordinate (<ol>) contengono elementi di lista (<li>).

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
</ul>

<ol>
    <li>Primo</li>
    <li>Secondo</li>
</ol>

Formattazione del Testo

È possibile formattare il testo utilizzando vari tag HTML:

<strong>: Testo in grassetto.
<em>: Testo in corsivo.
<mark>: Testo evidenziato.
<small>: Testo più piccolo.
<del>: Testo barrato.
<ins>: Testo sottolineato.

<p>Questo è <strong>grassetto</strong>, questo è <em>corsivo</em>.</p>

Elementi di Divisione e Contenitori

I tag <div> e <span> sono utilizzati per raggruppare e stilizzare blocchi di contenuto:

<div>: Crea una sezione o un blocco di contenuto.
<span>: Stilizza una porzione di testo all'interno di un elemento.

<div>
    <p>Questo è un paragrafo dentro un div.</p>
</div>

<p>Questo è un <span style="color: red;">testo rosso</span> dentro un paragrafo.</p>

Commenti

I commenti in HTML sono utilizzati per aggiungere note al codice. Non vengono visualizzati nel browser.

<!-- Questo è un commento -->

Conclusione

Questa guida ha coperto le basi del HTML, dai tag di struttura ai tag di contenuto e di formattazione. Con queste conoscenze, puoi iniziare a creare le tue pagine web. Buona codifica!