Il Linguaggio HTML

Nota didattica
Questo materiale include esempi storici (es. <font>, attributi come align, bgcolor, tabelle per layout, frame) oggi deprecati. Sono mantenuti a scopo formativo. Per i progetti moderni usa HTML semantico + CSS (Flexbox/Grid) + JavaScript. Nei punti opportuni trovi box [Nota moderna] con le pratiche attuali.

Introduzione

L’acronimo HTML (Hyper Text Markup Language) può essere tradotto con Linguaggio per IperTesti a Marcatori. Il linguaggio nasce da un’idea di Tim Berners‑Lee (CERN di Ginevra) per condividere documenti scientifici tramite collegamenti tra computer eterogenei.

Per capire la filosofia dei marcatori (tag), immaginiamo un libro descritto con tag di apertura e chiusura che racchiudono contenuti:

<libro>
  ...
  Contenuto del libro
</libro>

Suddividiamolo in sezioni logiche:

<libro>
  <introduzione>
    ...contenuto dell’introduzione...
  </introduzione>

  <capitolo>
    ...contenuto del capitolo...
  </capitolo>

  <capitolo>
    ...contenuto del capitolo...
  </capitolo>
</libro>

Aggiungiamo attributi (informazioni aggiuntive sul tag):

<libro titolo="Pagine Internet" autore="Pinco Pallino">
  <introduzione>
    <strong><em>Si tratta di un libro sul Web</em></strong>
  </introduzione>

  <capitolo titolo="Primo capitolo">
    ...
  </capitolo>

  <capitolo titolo="Ultimo capitolo">
    ...
  </capitolo>
</libro>

Regola: i tag devono essere annidati correttamente: l’ultimo aperto è il primo a chiudersi.

Struttura di una pagina HTML

Una pagina è composta da Intestazione (<head>) e Corpo (<body>):

<!DOCTYPE html>
<html lang="it">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Il titolo va in <title> (sezione <head>). I browser ignorano gli a‑capo e gli spazi multipli nel codice: la resa dipende dai tag, non dalle righe.

[Nota moderna]
Includi sempre <!DOCTYPE html> e l’attributo lang in <html>. Per meta e charset vedi esempio nella sezione Head.

La sezione <head>

Contiene metadati, titolo, risorse esterne e indicazioni per SEO/accessibilità.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Il sito della 5B</title>
  <meta name="description" content="Un esempio di intestazione di una pagina web" />
  <meta name="keywords" content="meta, keywords, description, HTML" />
  <!-- link a CSS/Font/Script -->
  <link rel="stylesheet" href="stili.css" />
</head>

[Nota moderna]
keywords ha impatto minimo sui motori moderni; privilegia titoli chiari, description e contenuto di qualità.

Il tag <body>

Raccoglie gli elementi visibili. Storicamente si usavano attributi come bgcolor, link, vlink, alink, topmargin, leftmargin, ecc.

<body bgcolor="#ffffff" link="#0000ff" vlink="fuchsia">
  <p>Benvenuti</p>
</body>

[Nota moderna]
Evita attributi di presentazione su <body>: usa il CSS.

body {
  background: #fff;
  color: #111;
}
a { color: #06c; }
a:visited { color: fuchsia; }

Testo e paragrafi

Paragrafi con <p>...</p>. Spazi multipli non sono rispettati: usa entità come &nbsp; solo se necessario.

Stile tipografico:

<p align="center">Benvenuti sul <b>nostro sito</b></p>
<p align="center">Benvenuti sul <em>nostro sito</em></p>

[Nota moderna]
Preferisci <strong> a <b> e <em> a <i> per dare enfasi semantica. Non usare align sugli elementi:

<p class="center">Benvenuti sul <strong>nostro sito</strong></p>
.center { text-align: center; }

Titoli gerarchici: <h1> … <h6>.

<h1>Titolo principale</h1>
<h6>Titolo di tipo 6</h6>

Sezioni logiche con <div> (o meglio con tag semantici moderni: <header>, <main>, <section>, <article>, <footer>).

Immagini

Inserimento di immagini esterne con <img> (tag vuoto, niente chiusura):

<p style="text-align:center">
  <img src="miacartella/pubblicita.jpg" alt="Banner pubblicitario" width="120" height="60" border="0" />
</p>

Percorsi relativi/assoluti:

<!-- stessa cartella -->
<img src="logo.jpg" alt="Logo" />

<!-- sottocartella -->
<img src="immagini/imm1.jpg" alt="Esempio" />

<!-- risalita di un livello -->
<img src="../immagini/imm1.jpg" alt="Esempio" />

<!-- URL assoluto -->
<img src="https://www.sito.it/immagini/imm.gif" alt="Illustrazione" />

[Nota moderna]
Usa sempre alt descrittivo per l’accessibilità. Evita border, align, hspace, vspace: sostituiscili con CSS. Valuta width/height corretti per evitare layout shift.

Collegamenti ipertestuali (link)

Tag: <a> con attributo obbligatorio href.

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

Apertura in nuova scheda/finestra:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Apri in nuova scheda</a>

Link su immagine:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  <img src="images/altavista.gif" alt="Altavista – Motore di ricerca" width="102" height="23" />
</a>

Altri schemi:

<a href="ftp://example.com/file.zip">Scarica via FTP</a>
<a href="mailto:nome@dominio.it">Scrivimi</a>
<a href="files/manuale.zip">Scarica il manuale</a>

[Nota moderna]
target supporta anche _self (default), _parent, _top. Aggiungi sempre rel="noopener noreferrer" quando usi _blank per sicurezza/performance.

Tabelle

Struttura base: <table> → righe <tr> → celle <td> (e <th> per intestazioni).

<table border="2" width="30%">
  <tr>
    <td>Contenuto della tabella</td>
  </tr>
</table>

Più righe/colonne:

<table border="2" width="100%">
  <tr>
    <td width="15%">Prima Cella</td>
    <td width="35%">Seconda Cella</td>
    <td width="50%">Terza Cella</td>
  </tr>
</table>

Altezze righe e ripartizione celle:

<table border="2" width="100%">
  <tr>
    <td>Destra Alta</td>
    <td>Centrale Alta</td>
    <td>Sinistra Alta</td>
  </tr>
  <tr style="height:80px">
    <td>Destra Bassa</td>
    <td>Centrale Bassa</td>
    <td>Sinistra Bassa</td>
  </tr>
</table>

Unione celle:

<!-- rowspan -->
<table border="2" width="100%">
  <tr>
    <td rowspan="2">Cella che occupa 2 righe</td>
    <td>Destra Alto</td>
  </tr>
  <tr>
    <td>Destra Basso</td>
  </tr>
</table>

<!-- colspan -->
<table border="2" width="100%">
  <tr>
    <td>Sinistra Alto</td>
    <td>Destra Alto</td>
  </tr>
  <tr>
    <td colspan="2">Cella che occupa 2 colonne</td>
  </tr>
</table>

Spaziatura tra celle e padding interno:

<table border="2" width="100%" cellspacing="4" cellpadding="5">
  <tr>
    <td>Notate lo spazio tra le celle</td>
    <td>e il padding interno</td>
  </tr>
</table>

Colore di sfondo/immagine:

<table border="1" width="100%">
  <tr>
    <td colspan="3" bgcolor="#cccccc" align="center">Testa</td>
  </tr>
  <tr>
    <td bgcolor="#808080">Sinistra</td>
    <td background="fondo2.gif">Centro</td>
    <td bgcolor="#808080">Destra</td>
  </tr>
  <tr>
    <td colspan="3" bgcolor="#cccccc" align="center">Fine</td>
  </tr>
</table>

[Nota moderna]
Le tabelle non si usano per l’impaginazione del layout: usa CSS Grid/Flexbox. Le tabelle sono solo per dati tabellari (con <caption>, ambiti scope sulle <th>, ecc.).

Elenchi

  • Non ordinati: <ul> con elementi <li>
  • Ordinati: <ol> con <li>
<ul>
  <li>Juventus</li>
  <li>Inter</li>
  <li>Milan</li>
  <li>Lazio</li>
  <li>Roma</li>
</ul>

<ol>
  <li>Buffon</li>
  <li>Pessotto</li>
  <li>Nesta</li>
  <li>Cannavaro</li>
  <li>Maldini</li>
</ol>

Annidamento liste:

<ul>
  <li>Juventus
    <ol>
      <li>Del Piero</li>
      <li>Trezeguet</li>
    </ol>
  </li>
  <li>Inter
    <ol>
      <li>Vieri</li>
      <li>Crespo</li>
    </ol>
  </li>
</ul>

[Nota moderna]
Non usare type su <ul>/<ol> per i puntatori: preferisci list-style-type in CSS.

Form (moduli)

I form permettono l’interazione utente → server o script.

<form action="/elabora" method="post">
  <input type="text" name="nome" size="20" />
  <input type="checkbox" name="consenso" value="si" />
  <input type="submit" value="Invia" />
  <input type="reset" value="Cancella" />
</form>

Radio button (mutuamente esclusivi tramite stesso name):

<form>
  <p>
    M <input type="radio" name="sesso" value="maschio" />
    F <input type="radio" name="sesso" value="femmina" />
  </p>
</form>

Select (menu a discesa):

<form name="provaselect" method="post" action="ricevi.asp">
  <label for="elenco">Scegli un elemento</label>
  <select name="elenco" id="elenco">
    <option value="1">Primo elemento</option>
    <option value="2">Secondo elemento</option>
    <option value="3" selected>Terzo elemento</option>
  </select>
</form>

Form impaginato con tabella (storico):

<form>
  <table width="80%">
    <tr>
      <td align="right" width="50%">
        <label for="cognome"><strong>Cognome</strong></label>
      </td>
      <td width="50%"><input type="text" id="cognome" name="cognome" /></td>
    </tr>
    <tr>
      <td align="right"><label for="nome"><strong>Nome</strong></label></td>
      <td><input type="text" id="nome" name="nome" /></td>
    </tr>
    <tr>
      <td align="right"><strong>Sesso</strong></td>
      <td>
        M <input type="radio" name="sesso" value="maschio" />
        &nbsp;F <input type="radio" name="sesso" value="femmina" />
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        Sport <input type="checkbox" name="sport" value="sport" />
        &nbsp;Spettacolo <input type="checkbox" name="spettacolo" value="spettacolo" />
        &nbsp;Motori <input type="checkbox" name="motori" value="motori" />
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <input type="submit" value="Invia" />
        &nbsp;
        <input type="reset" value="Cancella" />
      </td>
    </tr>
  </table>
</form>

[Nota moderna]
Usa <label for> per ogni controllo, campi richiesti con required, convalida con attributi (type="email", pattern, min, max, ecc.). Per invio asincrono usa fetch()/AJAX.

Frame (storico/obsoleto)

I frame dividevano la finestra in più zone tramite <frameset> e <frame>. Oggi sono obsoleti e non supportati in HTML5; si preferisce il layout CSS o, per incorporare contenuti esterni, <iframe>.

Esempio storico (solo a fini didattici):

<!DOCTYPE html>
<html>
  <frameset rows="20%,80%">
    <frame src="paginasuperiore.htm" name="sopra" />
    <frame src="paginainferiore.htm" name="sotto" />
  </frameset>
  <noframes>
    <body>contenuto alternativo</body>
  </noframes>
</html>

Target nei link all’interno di un frameset:

<a href="nuovapagina.htm" target="centro">link nella porzione centrale</a>

Valori target standard: _blank, _parent, _top, _self.

[Nota moderna]
Per layout usa CSS Grid/Flex; per contenuti esterni usa <iframe> con attributi di sicurezza (loading="lazy", referrerpolicy, sandbox).

ESERCIZI (con soluzioni)

1. A che cosa servono i tag <html>, <head> e <body>?

Soluzione: <html> racchiude l’intero documento; <head> contiene metadati, titolo, link a risorse; <body> contiene i contenuti visibili.

2. Elenca gli attributi storici di <body> e le alternative moderne.

Soluzione: Storici: bgcolor, background, text, link, vlink, alink, topmargin, leftmargin, rightmargin, bottommargin. Oggi CSS: background, color, a:link/:visited/:active, margin.

3. Definisci le caratteristiche dei marcatori <meta> e <title>.

Soluzione: <title> imposta il titolo della pagina (scheda/SEO). <meta> fornisce metadati (es. charset, name="description", keywords, viewport).

4. Elenca i marcatori per la formattazione del testo e i relativi attributi/uso.

Soluzione: <b>/<strong>, <i>/<em>, <u> (sconsigliato), <font> (storico: color, face, size; oggi CSS), titoli <h1>..<h6>.

5. Elenca i marcatori per la formattazione dei paragrafi e i principali attributi.

Soluzione: <p> (storico align), <br>, <div>, <blockquote>; stile via CSS.

6. Elenca i marcatori per le immagini e i loro attributi essenziali.

Soluzione: <img> con src, alt, width, height, (storici: border, align, hspace, vspace). Layout oggi via CSS.

7. Spiega come creare collegamenti ipertestuali tra pagine web.

Soluzione: <a href="URL">testo</a>; URL assoluti o relativi; opzionale target (_blank, ecc.).

8. Esempi di URL relativo e URL assoluto.

Soluzione: Relativi: immagini/logo.png, ../img/pic.jpg, ./docs/file.pdf. Assoluti: https://www.esempio.it/immagini/logo.png, http://dominio.com/pagina.

9. A cosa servono gli URL che iniziano con http(s)?

Soluzione: Richiedono risorse via protocollo HTTP/HTTPS (pagine, immagini, file) da server web.

10. A cosa servono gli URL che iniziano con ftp?

Soluzione: Accesso a file su server FTP per download/upload (ftp://server/percorso/file).

11. A cosa servono gli URL che iniziano con mailto?

Soluzione: Aprono il client email per inviare un messaggio all’indirizzo indicato (es. mailto:info@dominio.it).

12. A cosa serve l’attributo target del tag <a>?

Soluzione: Indica dove aprire il link: _self (default), _blank (nuova scheda), _parent, _top o un nome di frame.

13. Come creare un elenco numerato in HTML?

Soluzione: <ol><li>Voce 1</li><li>Voce 2</li></ol>.

14. Come creare un elenco puntato in HTML?

Soluzione: <ul><li>Voce</li><li>Voce</li></ul> (storico type="square|circle").

15. Mostra la struttura di un elenco annidato a più livelli.

Soluzione: <ul><li>Squadra<ol><li>Giocatore 1</li><li>Giocatore 2</li></ol></li></ul>.

16. Quali tag si usano per le tabelle?

Soluzione: <table>, <tr>, <td>, <th>. Attributi storici: border, width, cellspacing, cellpadding, align, valign.

17. Dalle tabelle viste, ricava l’HTML corrispondente (approccio).

Soluzione (metodo): 1) Conta righe → <tr>; 2) per ogni riga conta celle → <td>/<th>; 3) applica colspan/rowspan dove serve; 4) imposta width/height o CSS.

18. A cosa servono rowspan e colspan?

Soluzione: rowspan estende la cella su più righe; colspan su più colonne.

19. Come dividere una pagina in frame orizzontali?

Soluzione: Con <frameset rows="20%,80%"> … </frameset> e due <frame>. (Storico; oggi layout CSS o <iframe> per incorpori.)

20. Come dividere una pagina in frame verticali?

Soluzione: Con <frameset cols="100,*,200"> … </frameset> e tre <frame>. (Obsoleto.)

21. A cosa può servire una strutturazione a frame?

Soluzione: Tenere fissa un’area (menu) e cambiare i contenuti nell’altra. Svantaggi: usabilità/SEO/URL → caduta in disuso.

22. Differenza tra _blank, _top, _self e _parent.

Soluzione: _self stessa finestra; _blank nuova scheda; _top sostituisce l’intera finestra; _parent nel frame genitore.

23. Mostra la struttura di un sito a frame annidati (esempio concettuale).

Soluzione (schema): <frameset rows="20%,80%"> <frame src="top.htm"> <frameset cols="25%,75%"> <frame src="nav.htm" name="nav"> <frame src="main.htm" name="main"> </frameset> </frameset>.

24. Che cosa sono i moduli (form)?

Soluzione: Interfacce per inviare dati dall’utente al server/app (ricerche, login, registrazioni) tramite <form> e controlli (<input>, <select>, ecc.).

25. Codice HTML per una casella di testo in un modulo.

Soluzione: <form action="..." method="post"><input type="text" name="nome" size="20"></form>.

26. Codice HTML per un radio button in un modulo.

Soluzione: <input type="radio" name="sesso" value="maschio"> M <input type="radio" name="sesso" value="femmina"> F (stesso name = esclusivi).

27. Codice HTML per una casella di spunta (checkbox) in un modulo.

Soluzione: <input type="checkbox" name="sport" value="si"> Sport.

28. Codice HTML per inserire un pulsante in un modulo.

Soluzione: <input type="submit" value="Invia">, <input type="reset" value="Cancella">, oppure <button type="button">Azione custom</button> (con JS).

29. Codice HTML per un menu a discesa in un modulo.

Soluzione: <select name="elenco"><option value="1">Uno</option><option value="2" selected>Due</option></select>.

30. Quali tipi di pulsanti possono essere inseriti in un modulo?

Soluzione: submit (invia), reset (azzera), button (azioni personalizzate via JS).

Articoli correlati

Evoluzione delle Macchine da calcolo

Hardware

Software

Let’s Create Your Own Event Group.

Proudly powered by WordPress | Tema: Newsup di Themeansar.