Folder Open Duotone Icon
,

HTML – Linguaggio di scripting

Avatar Mario Giagnotti
Mario Giagnotti

·

·

29 min read

HTML

Una breve guida su HTML – Linguaggio di scripting per la creazione di pagine WEB statiche


main.zip (302 download )

Sommario

Cos’è HTML e come funziona?

HTML (Hypertext Markup Language) è il linguaggio alla base delle pagine web. Si tratta di un sistema di markup in cui ogni elemento rappresenta un contenuto specifico. Il termine markup indica che HTML descrive la struttura di una pagina, definendo quali contenuti vengono visualizzati, ma non il loro aspetto grafico. La presentazione visiva è infatti gestita dai CSS (Cascading Style Sheets) ed elaborata dai browser. In passato, HTML includeva elementi per la formattazione diretta del testo, come <font>, ma oggi questi sono completamente obsoleti e non devono essere più utilizzati.

HTML è un linguaggio di programmazione?

Spesso si sente dire che HTML è un linguaggio di programmazione, ma in realtà non lo è. A differenza dei veri linguaggi di programmazione, HTML non include logica o istruzioni condizionali: è esclusivamente un linguaggio di markup. I suoi tag forniscono significato semantico ai contenuti e permettono ai browser di interpretarli correttamente.

La struttura di un elemento HTML

Un elemento HTML è composto generalmente da:

  • Un tag di apertura (es. <p>)
  • Un tag di chiusura (es. </p>)
  • Il contenuto all’interno dei tag

Esempio:

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

Alcuni elementi, chiamati void elements, non necessitano di un tag di chiusura né contengono contenuti. Tra questi troviamo:

  • <img> (immagini)
  • <meta> (metadati)
  • <link> (collegamenti a risorse esterne)
  • <input> (campi di input nei form)

Tag ed elementi: qual è la differenza?

È importante distinguere tra elementi e tag:

  • Gli elementi definiscono il tipo di contenuto (es. video, audio, tabella).
  • I tag sono la rappresentazione sintattica di un elemento, racchiusi tra parentesi angolari (es. <video>, <audio>, <table>).

Esempio di elementi e relativi tag:

  • Elemento: video → Tag: <video>...</video>
  • Elemento: tabella → Tag: <table>...</table>

Come funziona una pagina HTML?

Un documento HTML può contenere centinaia di elementi, ognuno con un ruolo specifico nella struttura della pagina. Il browser legge il codice, lo interpreta e lo trasforma in contenuti visivi o accessibili tramite assistenti vocali per gli utenti.

Con questa base, HTML diventa il punto di partenza per qualsiasi sito web, definendo la sua struttura prima che CSS e JavaScript ne migliorino l’aspetto e le funzionalità interattive.

Anatomia di un Tag HTML

Per comprendere meglio HTML, analizziamo la struttura di un tag.

Il tag <p> rappresenta un paragrafo di testo e segue una sintassi precisa:

  • Tag di apertura: <p>
  • Tag di chiusura: </p> (identico a quello di apertura, ma con una barra / prima del nome dell’elemento)
  • Contenuto all’interno dei tag

Ogni elemento HTML è strutturato in questo modo, permettendo ai browser di interpretare correttamente il contenuto di una pagina.

Vediamo ora come creare una pagina web di base contenente il classico messaggio “Hello World”.

Scrivere e Salvare un File HTML

I file HTML possono essere creati con qualsiasi editor di testo e devono essere salvati con estensione .html o .htm per essere riconosciuti dai browser. Una volta salvato, il file può essere aperto direttamente in un qualsiasi browser web.

Esempio di Pagina HTML

Ecco un esempio di codice HTML per creare una pagina web semplice:

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="UTF-8">
        <title>Hello!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>Questo è un semplice paragrafo.</p>
    </body>
</html>

Per visualizzare la pagina occorre salvare lo script in un file con estensione .html ed aprirlo con un browser

Analisi dei Tag Utilizzati

Ecco una spiegazione dei principali tag utilizzati in questa pagina:

Guida ai Doctype in HTML

I Doctype (abbreviazione di “document type”) aiutano i browser a identificare la versione di HTML utilizzata in un documento, migliorando l’interpretazione e il rendering della pagina. Sebbene possano sembrare tag HTML, i Doctype non lo sono e devono essere posizionati sempre all’inizio del documento.

Come dichiarare un Doctype

La dichiarazione <!DOCTYPE> deve sempre precedere il tag <html>, garantendo che il browser interpreti correttamente la struttura del file.

Doctype in HTML5

Con l’introduzione di HTML5, il Doctype è stato semplificato. A differenza delle versioni precedenti basate su SGML (Standard Generalized Markup Language), HTML5 non necessita di un riferimento a un DTD (Document Type Definition).

Ecco il Doctype corretto per un documento HTML5:

<!DOCTYPE html>

Case Insensitivity del Doctype

Secondo le specifiche W3C per HTML5, la dichiarazione <!DOCTYPE> non è case-sensitive. Questo significa che tutte le seguenti dichiarazioni sono valide:

<!doctype html>
<!dOCtyPe html>
<!DocTYpe html>

Tuttavia, per una maggiore leggibilità e compatibilità, è sempre consigliato utilizzare la versione standard:

<!DOCTYPE html>

Guida ai Titoli in HTML: Struttura e Best Practices

HTML non si limita a gestire semplici paragrafi, ma offre sei diversi tag di intestazione ( – ) per indicare titoli di varie dimensioni e importanza. Il tag rappresenta il titolo principale con la dimensione e lo spessore maggiori, mentre il tag indica il livello di intestazione più basso, vicino alla dimensione del testo normale.

Uso Corretto dei Titoli

I titoli in HTML servono a definire il contenuto che segue e migliorano l’accessibilità e l’indicizzazione da parte dei motori di ricerca. Sono definiti dai tag fino a e supportano tutti gli attributi globali di HTML.

Esempio di utilizzo:

<h1>Titolo Principale</h1>
<h2>Sottotitolo</h2>
<h3>Sezione</h3>
<h4>Sotto-sezione</h4>
<h5>Dettaglio</h5>
<h6>Nota aggiuntiva</h6>

Importanza della Struttura Corretta

Una struttura ben organizzata aiuta sia gli utenti che i motori di ricerca a comprendere la gerarchia delle informazioni. I motori di ricerca utilizzano i titoli per creare indici e tabelle dei contenuti, rendendo più efficace la ricerca delle informazioni.

Regole generali:

  • Un solo <h1> per pagina, che rappresenta il titolo principale.
  • Utilizzare <h2> per i sottotitoli principali e <h3>, <h4>, ecc., per suddividere ulteriormente i contenuti.
  • Mantenere una progressione logica, evitando di saltare livelli di intestazione (es. non passare da <h2> a <h4> senza un <h3> intermedio).
  • Non usare <h1> solo per ingrandire il testo: è un elemento semantico e deve essere riservato esclusivamente al titolo principale della pagina.

Esempio di documento ben strutturato:

<h1>Introduzione al Web Design</h1>
<p>Breve introduzione al concetto di Web Design.</p>
    <h2>Principali elementi</h2>
        <h3>Tipografia</h3>
        <p>Il ruolo della tipografia nel design.</p>
        <h3>Colori</h3>
        <p>Scelta e armonia dei colori.</p>
    <h2>Conclusione</h2>
    <p>Riassunto dei concetti chiave.</p>

I Commenti in HTML: Cosa Sono e Come Utilizzarli

Quando si scrive codice HTML, può essere utile inserire delle annotazioni che aiutino a comprendere meglio la struttura della pagina o a fornire istruzioni per eventuali modifiche future. Questo è possibile grazie ai commenti HTML, che non vengono interpretati dal browser e servono esclusivamente come note per chi legge il codice.

Sintassi dei commenti in HTML

Un commento in HTML si scrive utilizzando la seguente sintassi:

Copy
<!-- Questo è un commento e non sarà visibile nel browser -->

I commenti possono essere utilizzati per:

  • Spiegare parti di codice complesse
  • Disabilitare temporaneamente porzioni di codice
  • Inserire promemoria o linee guida per sviluppatori

Esempio pratico:

Copy
<!DOCTYPE html>
<html>
<head>
    <title>Esempio di commento HTML</title>
</head>
<body>
    <!-- Questo è l’intestazione della pagina -->
    <h1>Benvenuti nel mio sito</h1>

    <!-- Qui verrà aggiunta un'immagine -->
    <img src="immagine.jpg" alt="Descrizione dell'immagine">

    <!-- Commento: il link sottostante porta alla pagina contatti -->
    <a href="contatti.html">Contattaci</a>
</body>
</html>

Case-Sensitive e Spaziatura

HTML non è Case-Insensitive

A differenza di altri linguaggi, HTML non fa distinzione tra lettere maiuscole e minuscole. Ad esempio, i seguenti tag sono equivalenti:

<TITLE>Pagina di esempio</TITLE>
<title>Pagina di esempio</title>

Tuttavia, per migliorare la leggibilità e mantenere uno standard, è consigliato scrivere i tag in minuscolo.

Spazi e Caratteri Speciali in HTML

Quando scrivi un testo in HTML, il browser interpreta qualsiasi spazio multiplo come un singolo spazio.

Esempio:

<p>Questo   testo   verrà   mostrato   con   spazi   normali.</p>

Risultato visualizzato nel browser:

Questo testo verrà mostrato con spazi normali.

Se si desidera inserire più spazi consecutivi, è necessario utilizzare il carattere speciale &nbsp; (non-breaking space).

Esempio corretto:


Copied!

<p>Lorem ipsum&nbsp;&nbsp;&nbsp;dolor sit amet.</p>

Risultato nel browser:

Lorem ipsum dolor sit amet.

Questo è utile quando si desidera mantenere una certa formattazione nel testo.

La Struttura di una Pagina HTML

Quando si crea una pagina web, il codice HTML segue sempre una struttura ben definita, suddivisa in tre sezioni principali:

  1. Il DOCTYPE, che specifica la versione di HTML utilizzata.
  2. L’header (<head>), che contiene informazioni per il browser e i motori di ricerca.
  3. Il body (<body>), che rappresenta il contenuto visibile della pagina.
struttura pagina html
struttura pagina html

Abbiamo già discusso del DOCTYPE per cui ora ci occupiamo delle altre due sezioni: Header e Body

L’Header

La sezione <head> è compresa tra i tag <head> e </head> e contiene informazioni che non sono visibili direttamente sulla pagina, ma che servono per la sua configurazione. Anche se il suo contenuto non è visibile direttamente sulla pagina, ha un ruolo fondamentale per la corretta visualizzazione e indicizzazione del sito.

All’interno dell’<head> troviamo elementi come:

  • Il titolo della pagina, visibile nella scheda del browser.
  • I metadati, che descrivono il contenuto per i motori di ricerca.
  • I collegamenti ai file CSS, per lo stile della pagina.
  • Gli script JavaScript, per aggiungere funzionalità interattive.

Esempio di <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

💡 Suggerimento: Questo metadato è fondamentale per creare siti web responsive, cioè pagine che si adattano bene su computer, tablet e smartphone.

Impostare la Codifica dei Caratteri (charset)

Per evitare problemi con caratteri speciali (è, ò, à, ü, ecc.), è importante definire la codifica UTF-8:

<meta charset="UTF-8">

UTF-8 è lo standard universale per il web e supporta tutti i caratteri speciali.

Ecco una struttura di base che ogni pagina HTML dovrebbe avere:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Titolo della Pagina</title>
    <meta name="description" content="Descrizione breve della pagina">
    <meta name="keywords" content="HTML, tutorial, guida">
    <meta name="author" content="Mario Rossi">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <h1>Benvenuti!</h1>
    <p>Questa è una semplice pagina HTML.</p>
</body>

</html>

Il Body

La sezione <body> è compresa tra i tag <body> e </body> e contiene tutto ciò che l’utente può vedere sulla pagina:

  • Testi
  • Immagini
  • Link
  • Video
  • Pulsanti
  • Form

Esempio di <body>:

<body>
    <h1>Benvenuti nel mio sito!</h1>
    <p>Questa è una pagina HTML di esempio.</p>
    <img src="immagine.jpg" alt="Descrizione dell'immagine">
    <a href="contatti.html">Contattaci</a>
</body>

Struttura Completa di una Pagina HTML

Unendo tutte le sezioni, la struttura completa di una pagina HTML sarà:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Titolo della Pagina</title>
    <meta name="description" content="Descrizione breve della pagina">
    <meta name="keywords" content="HTML, tutorial, guida">
    <meta name="author" content="Mario Rossi">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <h1>Benvenuti!</h1>
    <p>Questa è una semplice pagina HTML.</p>
</body>

</html>

L’Importanza dell’Indentazione

Come nei linguaggi di programmazione, anche in HTML è fondamentale usare l’indentazione per rendere il codice più leggibile.

Utilizzare una corretta indentazione aiuta a:

  • Comprendere meglio la struttura del documento
  • Evitare errori di chiusura dei tag
  • Rendere il codice più facile da modificare in futuro

Motori di Ricerca e Indicizzazione

I motori di ricerca, come Google, mantengono indici di parole chiave per associare le pagine web ai termini di ricerca degli utenti.

Questo processo avviene grazie a web crawler (o spider), programmi automatici che visitano i siti, leggono il contenuto e aggiornano gli indici.

Per migliorare l’indicizzazione:

  • Usa titoli chiari e pertinenti
  • Scrivi descrizioni efficaci con il metadato <meta name="description">
  • Evita contenuti duplicati o di bassa qualità

Formattazione del testo in HTML

Abbiamo già visto come HTML offre sei diverse strutture per evidenziare i titoli di un paragrafo (da <h1> ad <h6>) e abbiamo già visto che un paragrafo va racchiuso nei tag <p> … </p>.

La formattazione del testo in HTML permette di applicare stili e strutture ai contenuti, rendendoli più leggibili e semantici.

HTML offre tag specifici per modificare l’aspetto e la disposizione del testo, come:

  • Interruzioni di riga (<br>)
  • Testo in corsivo (<i>, <em>)
  • Testo in grassetto (<b>, <strong>)
  • Linee orizzontali (<hr>)
  • Testo preformattato (<pre>)

Vediamo ogni elemento nel dettaglio.

L’Interruzione di Riga

Il tag <br> viene utilizzato per andare a capo all’interno del testo.
È un tag vuoto, quindi non ha un tag di chiusura.

Esempio:

<p>Questa è una riga di testo.<br>Questa è la riga successiva.</p>

Risultato visivo:
Questa è una riga di testo.
Questa è la riga successiva.

Nota: A differenza del tag <p>, che crea un nuovo paragrafo con spazio sopra e sotto, <br> spezza solo la linea.

Il Testo in Corsivo

Entrambi questi tag servono per rendere il testo italico (corsivo), ma hanno differenze semantiche:

Esempio:

<p>Questa parola è <i>in corsivo</i>.</p>
<p>Questa parola è <em>molto importante</em>.</p>

Risultato visivo:
Questa parola è in corsivo.
Questa parola è molto importante.

Suggerimento: Usa <em> se il testo è importante per il significato della frase, altrimenti <i>.

Il Testo in Grassetto

Anche per il grassetto ci sono due alternative con differenze semantiche:

Esempio:

<p>Questa parola è <b>in grassetto</b>.</p>
<p>Questa parola è <strong>molto importante</strong>.</p>

Risultato visivo:
Questa parola è in grassetto.
Questa parola è molto importante.

Suggerimento: Usa <strong> per testo critico (es. avvisi di sicurezza) e <b> solo per enfasi visiva.

La Linea Orizzontale

Il tag <hr> crea una linea di separazione orizzontale nella pagina.
È utile per dividere sezioni di contenuto.

Caratteristiche:

  • È un tag vuoto (non ha chiusura).
  • Occupa tutta la larghezza della pagina.

Esempio:

<p>Paragrafo sopra la linea.</p>
<hr>
<p>Paragrafo sotto la linea.</p>

Risultato visivo:

Paragrafo sopra la linea.
───────────────
Paragrafo sotto la linea.

Il Testo Preformattato

Il tag <pre> mantiene spazi, indentazioni e ritorni a capo così come scritti nel codice.

Esempio:

<pre>
    Questo testo
        conserva la sua 
    formattazione originale.
</pre>

Risultato visivo:

    Questo testo
        conserva la sua 
    formattazione originale.

Utile per:

  • Mostrare codice sorgente
  • Scrivere poesie o testi con formattazione specifica

Testo evidenziato, sottolineato e cancellato

  • Il tag <mark> evidenzia in giallo il testo
  • Il tag <u> sottolinea il testo
  • Il tag <del> cancella con una linea il testo

Esempio:

<mark>Questo testo è evidenziato</mark>
<u>Questo testo è sottolineato</u>
<del>Questo testo è cancellato</del>

Testo con apice e pedice

  • Per inserire un apice si utilizza il tag <sup>
  • Per inserire un pedice si utilizza il tag <sub>

Esempio:

<p>Formula: log<sub>2</sub>(x<sup>3</sup>)</p>

Tabella dei Caratteri Speciali HTML

Alcuni caratteri hanno significati speciali in HTML (es. <, > e &).
Per visualizzarli correttamente, usiamo entità HTML.

tabella caratteri speciali
tabella caratteri speciali

Esempio di utilizzo:


Copied!

<p>&lt;h1&gt; è il tag per i titoli in HTML.</p>
<p>&copy; 2025 - Tutti i diritti riservati.</p>

Risultato visivo:
<h1> è il tag per i titoli in HTML.
© 2025 – Tutti i diritti riservati.

Gli elenchi e le tabelle in HTML

Elenchi

Per organizzare il contenuto di una pagina web in forma di elenco, HTML fornisce diversi tipi di elenchi:

  1. Elenchi non ordinati (<ul>): ogni elemento dell’elenco è preceduto da un simbolo (pallino, quadrato, etc.).
  2. Elenchi ordinati (<ol>): ogni elemento è numerato.
  3. Elenchi di definizione (<dl>): utilizzati per coppie di termini e definizioni.

Esempio di elenco non ordinato

<!DOCTYPE html>
<html>
<head>
   <title>Esempio di Elenco</title>
</head>
<body>
   <p>Elenco:</p>
   <ul>
      <li>prima voce dell'elenco</li>
      <li>seconda voce dell'elenco</li>
      <li>terza voce dell'elenco</li>
   </ul>
</body>
</html>

Il browser visualizzerà l’elenco con i pallini accanto a ogni voce.

Esempio di elenco ordinato

<!DOCTYPE html>
<html>
<head>
   <title>Esempio di Elenco</title>
</head>
<body>
   <p>Elenco:</p>
   <ol>
     <li>Prima voce</li>
     <li>Seconda voce</li>
     <li>Terza voce</li>
  </ol>
</body>
</html>

Il browser visualizzerà le voci con numerazione crescente.

Esempio di elenco di definizione

<!DOCTYPE html>
<html>
<head>
   <title>Esempio di Elenco</title>
</head>
<body>
   <h2>Elenchi definiti</h2>
   <dl>
      <dt>Elemento 1</dt>
      <dd>Descrizione 1</dd>
      <dt>Elemento 2</dt>
      <dd>Descrizione 2</dd>
      <dt>Elemento 3</dt>
      <dd>Descrizione 3</dd>
    </dl>
</body>
</html>

Il browser visualizzerà le voci con elemento e descrizione indentata

Tabelle

Le tabelle HTML sono composte da righe (<tr>) e celle (<td> per i dati, <th> per le intestazioni). Il numero di colonne è determinato dal numero di celle in ciascuna riga.

Esempio di tabella semplice

<table border="1">
   <tr>
      <td>contenuto cella [1,1]</td>
      <td>contenuto cella [1,2]</td>
      <td>contenuto cella [1,3]</td>
   </tr>
   <tr>
      <td>contenuto cella [2,1]</td>
      <td>contenuto cella [2,2]</td>
      <td>contenuto cella [2,3]</td>
   </tr>
</table>

Tabelle con intestazioni

Per assegnare un’intestazione alle colonne, si usa il tag <th> invece di <td>.

<table border="1">
   <tr>
      <th>Titolo colonna 1</th>
      <th>Titolo colonna 2</th>
   </tr>
   <tr>
      <td>contenuto cella [2,1]</td>
      <td>contenuto cella [2,2]</td>
   </tr>
</table>

Sezioni nelle tabelle

HTML permette di suddividere una tabella in tre sezioni:

  • <thead>: intestazione
  • <tbody>: corpo della tabella
  • <tfoot>: piè di pagina

Esempio di tabella con sezioni

<table border="1">
   <thead>
      <tr>
         <th>Prodotto</th>
         <th>Prezzo</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Pane</td>
         <td>1.00€</td>
      </tr>
      <tr>
         <td>Latte</td>
         <td>1.50€</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td>Totale</td>
         <td>2.50€</td>
      </tr>
   </tfoot>
</table>

Le tabelle in HTML permettono di organizzare i dati in righe e colonne. In alcuni casi, può essere utile unire più celle per ottenere un layout più leggibile. Questo si può fare utilizzando gli attributi colspan e rowspan.

Unire Celle in Orizzontale: l’Attributo colspan

L’attributo colspan serve per unire più celle sullo stesso livello orizzontale.

Esempio:
Creiamo una tabella in cui l’intestazione “Nome Completo” occupa due colonne, invece di avere “Nome” e “Cognome” separati.

<!DOCTYPE html>
<html>
<head>
    <title>Tabella con Colspan</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="2">Nome Completo</th>
            <th>Età</th>
        </tr>
        <tr>
            <td>Mario</td>
            <td>Rossi</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Anna</td>
            <td>Bianchi</td>
            <td>30</td>
        </tr>
    </table>
</body>
</html>

Unire Celle in Verticale: l’Attributo rowspan

L’attributo rowspan serve per unire più celle nella stessa colonna, occupando più righe.

Esempio:
Creiamo una tabella in cui una cella “Corso” si estende su due righe.

<!DOCTYPE html>
<html>
<head>
    <title>Tabella con Rowspan</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Corso</th>
            <th>Studente</th>
            <th>Voto</th>
        </tr>
        <tr>
            <td rowspan="2">Matematica</td>
            <td>Luigi</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Francesca</td>
            <td>30</td>
        </tr>
    </table>
</body>
</html>

Combinare colspan e rowspan

È possibile combinare entrambi gli attributi per creare tabelle più complesse.

Esempio:
Creiamo una tabella in cui una cella dell’intestazione occupa due colonne e una cella della prima colonna occupa due righe.

<!DOCTYPE html>
<html>
<head>
    <title>Tabella con Colspan e Rowspan</title>
</head>
<body>
    <table border="1">
        <tr>
            <th rowspan="2">Materia</th>
            <th colspan="2">Studente</th>
        </tr>
        <tr>
            <th>Nome</th>
            <th>Cognome</th>
        </tr>
        <tr>
            <td>Fisica</td>
            <td>Giulia</td>
            <td>Verdi</td>
        </tr>
        <tr>
            <td>Chimica</td>
            <td>Marco</td>
            <td>Neri</td>
        </tr>
    </table>
</body>
</html>

n HTML, i link e le ancore vengono creati usando il tag <a> (ancora), che permette di collegare una pagina web a un’altra risorsa, come un’altra pagina, un documento, un indirizzo email, o anche una sezione specifica all’interno della stessa pagina.

Un link di base in HTML è creato utilizzando il tag <a>, e il suo attributo href definisce l’URL di destinazione del collegamento.

Esempio:

<a href="https://www.google.com">Vai a Google</a>

Questo codice crea un link che, quando cliccato, porta l’utente a Google.

2. Attributo target

L’attributo target è usato per specificare dove aprire il collegamento. I valori più comuni di target sono:

  • _self: apre il link nella stessa finestra o scheda (è il comportamento predefinito).
  • _blank: apre il link in una nuova finestra o scheda.
  • _parent: apre il link nella finestra o scheda del genitore (utile nei frame).
  • _top: apre il link nella finestra o scheda intera (ripristina la finestra al massimo).

Esempio:

<a href="https://www.google.com" target="_blank">Apri Google in una nuova scheda</a>

In questo caso, il link aprirà Google in una nuova scheda del browser.

Collegamento a una sezione della stessa pagina (ancora)

Un collegamento a un’ancora è un modo per creare link che rimandano a una specifica sezione della stessa pagina web. Puoi usare un ID per identificare la sezione e fare riferimento ad essa tramite un link.

Sintassi di base:

  1. Definisci un ID sulla sezione di destinazione:
<h2 id="section1">Sezione 1</h2>

2.Crea il link che rimanda a questa sezione:

<a href="#section1">Vai alla Sezione 1</a>

Quando l’utente clicca su “Vai alla Sezione 1”, la pagina scorrerà fino alla sezione con l’ID section1.

Collegamento a un indirizzo email

Per creare un link che apre un client di posta elettronica e permette di inviare una email, utilizziamo il protocollo mailto:. Il link deve includere l’indirizzo email e, opzionalmente, un oggetto e un corpo del messaggio.

esempio:

<a href="mailto:email@dominio.com">Invia una email</a>

Inserimento di Elementi Multimediali in HTML

HTML offre un’ampia gamma di possibilità per integrare contenuti multimediali come immagini, video e audio nelle pagine web. Questi elementi possono migliorare l’esperienza dell’utente, rendendo le pagine più interattive e coinvolgenti.

Immagini in HTML

Per inserire un’immagine in una pagina web, si utilizza il tag <img>. Questo tag è auto-chiudente e richiede almeno l’attributo src, che definisce il percorso dell’immagine.

Sintassi di base:

<img src="percorso_immagine" alt="descrizione dell'immagine">

Attributi principali:

  • src: Indica il percorso dell’immagine (può essere un URL o un percorso relativo nel server).
    • Esempio: <img src="images/foto.jpg">
  • alt: Fornisce una descrizione testuale dell’immagine per i lettori di schermo e per i casi in cui l’immagine non può essere caricata.
    • Esempio: <img src="images/foto.jpg" alt="Una foto del tramonto">
  • align (obsoleto nelle versioni moderne): Consente di allineare l’immagine rispetto al testo circostante.
    • Esempio: <img src="images/foto.jpg" align="left">
  • width e height: Permettono di specificare la larghezza e l’altezza dell’immagine.
    • Esempio: <img src="images/foto.jpg" width="200" height="150">

Formati di immagine:

I formati più comuni per le immagini sono:

  • JPEG/JPG: Ottimo per fotografie o immagini con molti colori.
  • PNG: Supporta la trasparenza, utile per loghi o icone.
  • GIF: Supporta l’animazione, ma con una gamma di colori limitata.
  • SVG: Un formato vettoriale che scala bene per immagini di alta qualità.

Esempio completo:

<img src="images/foto.jpg" alt="Una bella fotografia di montagna" width="500" height="300">

Video in HTML

Per inserire un video nella pagina web, si utilizza il tag <video>. Questo tag permette di controllare la riproduzione del video, come la possibilità di metterlo in pausa, fare avanzamenti, e altro ancora.

Sintassi di base:

<video src="video.mp4" controls>
  Il tuo browser non supporta il video.
</video>

Attributi principali:

  • src: Specifica il percorso del file video.
  • controls: Aggiunge i controlli del lettore (play, pausa, volume, ecc.).
  • poster: Definisce l’immagine che viene mostrata come anteprima prima che il video venga riprodotto.
    • Esempio: <video src="video.mp4" poster="poster.jpg" controls>
  • autoplay: Fa partire automaticamente il video non appena la pagina viene caricata.
    • Esempio: <video src="video.mp4" autoplay controls>
  • loop: Fa ripetere il video in loop una volta finito.
    • Esempio: <video src="video.mp4" loop autoplay controls>
  • preload: Controlla se il video deve essere caricato automaticamente quando la pagina viene caricata. I valori possibili sono auto (precarica il video), metadata (precarica solo i metadati come la durata), o none (non precarica nulla).
    • Esempio: <video src="video.mp4" preload="auto" controls>

Formati di video:

  • MP4 (H.264): Il formato più comune e compatibile con la maggior parte dei browser.
  • WebM: Un formato open-source che offre una buona qualità e compressione.
  • OGG: Un altro formato open-source, ma con una compatibilità più limitata.

Esempio completo:

<video src="video.mp4" poster="video_poster.jpg" controls autoplay loop preload="auto">
  Il tuo browser non supporta il video.
</video>

Audio in HTML

Per inserire un file audio in una pagina web, si utilizza il tag <audio>. Questo consente di includere tracce audio che gli utenti possono ascoltare direttamente nel browser.

Sintassi di base:

<audio src="audio.mp3" controls>
  Il tuo browser non supporta il formato audio.
</audio>

Attributi principali:

  • src: Specifica il percorso del file audio.
  • controls: Aggiunge i controlli del lettore audio (play, pausa, volume, ecc.).
  • autoplay: Avvia automaticamente la riproduzione dell’audio quando la pagina viene caricata.
    • Esempio: <audio src="audio.mp3" autoplay controls>
  • loop: Ripete l’audio in loop una volta che è terminato.
    • Esempio: <audio src="audio.mp3" loop controls>
  • preload: Permette di scegliere se il file audio debba essere precaricato. Può avere i valori auto, metadata, o none.
    • Esempio: <audio src="audio.mp3" preload="auto" controls>

Formati di audio:

  • MP3: Il formato audio più comune e ampiamente supportato.
  • OGG: Un formato open-source, spesso utilizzato per audio di alta qualità.
  • WAV: Un formato audio non compresso, ma con una grande dimensione del file.

Esempio completo:

<audio src="audio.mp3" controls autoplay loop preload="auto">
  Il tuo browser non supporta il formato audio.
</audio>

Iframe per Includere Contenuti Esterni

L’elemento <iframe> è usato per incorporare un’altra pagina web all’interno della tua pagina. Può essere utile per visualizzare contenuti esterni come video di YouTube, mappe, ecc.

Esempio:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Hn57qdu01kk?si=k4c3e-P1CFCX4JXW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

  • Il tag <img> è utilizzato per inserire immagini e ha attributi come src, alt, width, height, e align.
  • Il tag <video> consente di incorporare video con attributi come src, controls, autoplay, loop, poster, e preload.
  • Il tag <audio> è utilizzato per integrare file audio, con attributi come src, controls, autoplay, loop, e preload.
  • Il tag <iframe> serve per incorporare risorse esterne come video o mappe.

Questi elementi multimediali sono fondamentali per arricchire il contenuto delle pagine web e migliorare l’interazione con gli utenti.

I file di esempio possono essere scaricati qui: https://profgiagnotti.it/download/4791/?tmstv=1744547321 o nella pagina dei DOWNLOAD

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *