Il layout html

Il layout HTML è una parte fondamentale della progettazione di siti web e consiste nella disposizione e organizzazione degli elementi della pagina web, come testo, immagini, form e altri contenuti. In questa lezione, ci concentreremo sul ruolo delle immagini e dei tag semantici nella creazione di un layout efficace e user-friendly.

Le immagini

Le immagini sono un elemento essenziale del design di una pagina web e possono essere utilizzate per attirare l'attenzione dell'utente, migliorare la comprensione del contenuto e arricchire l'esperienza visiva generale. Tuttavia, è importante utilizzare le immagini in modo appropriato e coerente con il contenuto della pagina, per evitare di appesantire la pagina web e rallentarne il caricamento.

Per aggiungere un'immagine a una pagina web, è necessario utilizzare il tag HTML <img>. Il tag richiede alcune informazioni essenziali, come l'URL dell'immagine e il testo alternativo (alt) da mostrare in caso di errore del caricamento dell'immagine o per gli utenti non vedenti che utilizzano lettori di schermo.

Per migliorare l'accessibilità dell'immagine, è inoltre possibile utilizzare l'attributo "title" per fornire una descrizione più dettagliata dell'immagine e l'attributo "longdesc" per collegare ad una pagina che fornisce ulteriori informazioni sull'immagine.

Un po' di esempi

Aggiungere un'immagine con URL esterno

<img src="https://www.example.com/images/pic.jpg" alt="Descrizione dell'immagine">

In questo esempio, il tag img include l'attributo "src" che indica l'URL dell'immagine da caricare. L'attributo "alt" viene utilizzato per fornire una descrizione testuale dell'immagine in caso di errore del caricamento o per gli utenti con disabilità visiva.

Aggiungere un'immagine con URL relativo

<img src="/images/pic.jpg" alt="Descrizione dell'immagine">

In questo esempio, l'URL dell'immagine è specificato come un percorso relativo all'interno del sito web. Questo può essere utile per facilitare la manutenzione del sito web, poiché il percorso relativo rimane valido anche se l'URL del sito web cambia.

Aggiungere un'immagine con attributo "title"

<img src="/images/pic.jpg" alt="Descrizione dell'immagine" title="Titolo dell'immagine">

In questo esempio, l'attributo "title" viene utilizzato per fornire una descrizione più dettagliata dell'immagine quando il cursore viene posizionato sopra l'immagine. Questo può essere utile per fornire ulteriori informazioni sull'immagine o sul contenuto della pagina.

Aggiungere un'immagine con attributo "longdesc"

<img src="/images/pic.jpg" alt="Descrizione dell'immagine" longdesc="/images/pic-description.html">

In questo esempio, l'attributo "longdesc" viene utilizzato per collegare ad una pagina che fornisce ulteriori informazioni sull'immagine. Questo può essere utile per gli utenti con disabilità che utilizzano lettori di schermo o per fornire ulteriori informazioni sull'immagine o sul contenuto della pagina.

È inoltre possibile utilizzare altre opzioni per formattare e modificare le immagini, come l'attributo "width" e "height" per specificare le dimensioni dell'immagine, l'attributo "border" per aggiungere un bordo intorno all'immagine, l'attributo "align" per allineare l'immagine a destra o a sinistra e l'attributo "style" per applicare stili CSS all'immagine.

In generale, è importante utilizzare le immagini in modo appropriato e coerente con il contenuto della pagina, evitando di utilizzare immagini di grandi dimensioni o troppo pesanti che possono rallentare il caricamento della pagina. Inoltre, è importante fornire descrizioni alternative e ulteriori informazioni per garantire l'accessibilità e la comprensione del contenuto anche per gli utenti con disabilità.

I tag semantici

Oltre alle immagini, i tag semantici sono un'altra importante componente del layout HTML. I tag semantici sono stati introdotti con HTML5 e sono stati progettati per descrivere il contenuto della pagina in modo più preciso e significativo per i motori di ricerca e per gli utenti con disabilità.

Alcuni esempi di tag semantici includono <header> per la sezione di intestazione della pagina, <nav> per la navigazione principale, <section> per le sezioni di contenuto autonomo, <article> per i contenuti autonomi come notizie o articoli e <footer> per la sezione di piè di pagina della pagina.

Header

Il tag <header> indica l'area di intestazione di una pagina web, che generalmente contiene il logo e il titolo del sito, nonché i link di navigazione principali. Ad esempio:

<header>
  <img src="logo.png" alt="Logo del sito">
  <h1>Titolo del sito</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Prodotti</a></li>
      <li><a href="#">Contatti</a></li>
    </ul>
  </nav>
</header>

Nav

Il tag <nav> viene utilizzato per indicare l'area di navigazione principale del sito web. Ad esempio:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Prodotti</a></li>
    <li><a href="#">Contatti</a></li>
  </ul>
</nav>

Section

Il tag <section> viene utilizzato per raggruppare il contenuto di una pagina web in sezioni logiche. Ad esempio:

<section>
  <h2>Titolo della sezione</h2>
  <p>Testo della sezione</p>
</section>

Article

Il tag <article> viene utilizzato per indicare un contenuto autonomo e completo, che può essere distribuito o riutilizzato separatamente dal resto della pagina. Ad esempio:

<article>
  <h2>Titolo dell'articolo</h2>
  <p>Testo dell'articolo</p>
</article>

Aside

Il tag <aside> viene utilizzato per indicare un contenuto secondario e complementare al contenuto principale della pagina web. Ad esempio:

<main>
  <article>
    <h2>Titolo dell'articolo</h2>
    <p>Testo dell'articolo</p>
  </article>
  <aside>
    <h3>Articoli correlati</h3>
    <ul>
      <li><a href="#">Articolo 1</a></li>
      <li><a href="#">Articolo 2</a></li>
      <li><a href="#">Articolo 3</a></li>
    </ul>
  </aside>
</main>

Footer

Il tag <footer> viene utilizzato per indicare l'area di chiusura di una pagina web, che generalmente contiene le informazioni di contatto e i link di copyright. Ad esempio:

<footer>
  <p>Copyright © 2023, Nome del sito</p>
  <nav>
    <ul>
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Cookie</a></li>
    </ul>
  </nav>
</footer>

Details e summary

I tag <details> e <summary> sono utilizzati per creare un menu a tendina contenente informazioni aggiuntive che possono essere espansi o compressi a seconda della scelta dell'utente. Ad esempio:

<details>
  <summary>Informazioni aggiuntive</summary>
  <p>Testo delle informazioni aggiuntive</p>
</details>

Main

Il tag <main> viene utilizzato per indicare il contenuto principale della pagina web, che è solitamente racchiuso in un unico elemento. Ad esempio:

<main>
  <h1>Titolo principale</h1>
  <p>Testo principale</p>
</main>

Time

Il tag <time> viene utilizzato per indicare una data o un orario. È anche possibile specificare un formato per l'ora o la data. Ad esempio:

<p>La pagina è stata aggiornata il <time datetime="2022-06-21T09:00:00+02:00">21 giugno 2022</time>.</p>