La struttura dell’HTML

Nella prima lezione abbiamo introdotto l'HTML e visto alcuni esempi di tag e attributi. In questa lezione approfondiremo ulteriormente l'HTML e vedremo come utilizzare i tag per creare un sito web.

Parti di un documento HTML

Un documento HTML è composto da diverse parti, tra cui l'head, il body e il doctype.

Il doctype

Il doctype è la prima riga di un documento HTML ed è fondamentale per il corretto funzionamento del browser. Esso indica al browser quale versione di HTML viene utilizzata nel documento. Ecco un esempio di doctype:

<!DOCTYPE html>

L'head

L'intestazione è la parte superiore del documento HTML, tra le tag <head> e </head>. Contiene informazioni di base sul documento, come il titolo, la descrizione e le parole chiave. Queste informazioni aiutano i motori di ricerca a indicizzare il documento e a mostrarlo correttamente nelle SERP (pagine dei risultati dei motori di ricerca). L'intestazione non è visibile all'utente, ma è fondamentale per la corretta formattazione del documento.

L'head è la sezione iniziale di un documento HTML e contiene le informazioni di base sulla pagina web, come il titolo della pagina, l'autore, le keyword per i motori di ricerca, il tipo di carattere, etc. Ecco un esempio di head:

<head>
	<title>Titolo della pagina</title>
	<meta name="description" content="Breve descrizione della pagina">
	<meta name="author" content="Andrea Ottomanelli">
	<meta name="keywords" content="prova1, prova2, prova3">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

I meta tag

I meta tag sono elementi HTML che forniscono informazioni aggiuntive sulla pagina web, ma non vengono visualizzati direttamente nel contenuto della pagina. Invece, i meta tag vengono utilizzati dai motori di ricerca, dai browser e da altri servizi web per comprendere il contenuto e le caratteristiche della pagina.

Ci sono diversi tipi di meta tag che possono essere utilizzati all'interno dell'elemento <head> della pagina HTML, tra cui:

<meta charset="utf-8">: specifica la codifica dei caratteri utilizzata per la pagina web.
<meta name="description" content="Breve descrizione della pagina">: fornisce una breve descrizione della pagina web, che può essere utilizzata dai motori di ricerca per visualizzare un'anteprima della pagina nei risultati di ricerca.
<meta name="keywords" content="parole chiave, separate da una virgola">: specifica le parole chiave che descrivono il contenuto della pagina web.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: definisce le proprietà di visualizzazione della pagina, come ad esempio le dimensioni e il fattore di zoom iniziale su dispositivi mobili.
<meta name="robots" content="index, follow">: specifica se i motori di ricerca devono indicizzare la pagina e seguire i link contenuti in essa.

Ecco un esempio di come possono essere utilizzati i meta tag all'interno dell'elemento <head> di una pagina HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Titolo della pagina</title>
	<meta name="description" content="Breve descrizione della pagina">
	<meta name="keywords" content="parola chiave1, parola chiave2, parola chiave3">
</head>
<body>
	<!-- contenuto della pagina web -->
</body>
</html>

Nel codice HTML sopra, abbiamo inserito due meta tag: "description" e "keywords". Il tag "description" fornisce una breve descrizione della pagina, mentre il tag "keywords" elenca le parole chiave associate alla pagina. Tieni presente che il tag "keywords" non è più considerato un fattore di ranking importante dai motori di ricerca, ma può comunque essere utile per scopi di indicizzazione.

Il body

Il corpo è la parte centrale del documento HTML, tra le tag <body> e </body>. Contiene il contenuto effettivo del documento, come testo, immagini, video e altri elementi multimediali. Il corpo può essere formattato utilizzando i tag HTML appropriati, come <h1> per i titoli, <p> per i paragrafi, <img> per le immagini, <video> per i video e così via.

<body>
  <h1>Benvenuti nel mio sito web</h1>
  <p>Questo è un esempio di paragrafo</p>
  <img src="immagine.jpg" alt="Una bellissima immagine">
  <video src="video.mp4" controls></video>
</body>

Il footer

Piede di pagina (footer) Il piede di pagina è la parte inferiore del documento HTML, tra le tag <footer> e </footer>. Contiene informazioni aggiuntive sul documento, come il copyright, le informazioni di contatto e i link alle pagine correlate. Il piede di pagina non è essenziale, ma è una buona pratica includerlo per fornire informazioni aggiuntive all'utente.

Esempio di piede di pagina:

<footer>
  <p>&copy; 2023 Il mio sito web. Tutti i diritti riservati.</p>
  <p>Contattaci: [email protected]</p>
  <ul>
    <li><a href="pagina1.html">Pagina 1</a></li>
    <li><a href="pagina2.html">Pagina 2</a></li>
    <li><a href="pagina3.html">Pagina 3</a></li>
  </ul>
</footer>

Struttura di base di una pagina HTML

Tutte le pagine HTML seguono una struttura di base che inizia con l'elemento HTML e comprende gli elementi head e body. L'elemento HTML delinea l'inizio e la fine della pagina, l'elemento head contiene le informazioni di intestazione, come il titolo della pagina, e l'elemento body contiene tutto il contenuto visibile della pagina.

Ecco un esempio di struttura di base di una pagina HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Il titolo della tua pagina</title>
  </head>
  <body>
    <h1>Benvenuti nel mio sito web</h1>
    <p>Questa è la mia prima pagina HTML</p>
  </body>
</html>

Come puoi vedere, il tag HTML delinea l'inizio e la fine della pagina. L'elemento head contiene il tag title, che indica il titolo della pagina che appare nella scheda del browser. L'elemento body contiene l'header della pagina (un tag h1) e un paragrafo (un tag p).

Layout con Div

Il tag div è utilizzato per creare sezioni o blocchi di contenuto all'interno della pagina. Può essere utilizzato per raggruppare elementi HTML in modo da poterli stilizzare in modo uniforme. Ad esempio, si potrebbe utilizzare un tag div per raggruppare il menu di navigazione della pagina.

Ecco un esempio di come utilizzare il tag div per creare una sezione nella pagina:

<div class="sezione">
  <h2>Titolo della sezione</h2>
  <p>Questo è il testo della sezione.</p>
</div>

In questo esempio abbiamo creato una sezione utilizzando il tag div. All'interno della sezione abbiamo un titolo (h2) e del testo (p). Il class attributo è utilizzato per associare una classe CSS alla sezione.

Creare un layout con HTML

Per creare un layout per il tuo sito web, utilizzerai una combinazione di tag HTML e CSS (fogli di stile in cascata). In questa lezione ci concentreremo principalmente sui tag HTML utilizzati per creare un layout.

L'utilizzo di tabelle: si possono creare tabelle con righe e colonne e inserire i contenuti del sito all'interno di esse. Tuttavia, questa tecnica può diventare complessa e poco flessibile per la gestione dei layout moderni.
L'utilizzo di div: si possono creare contenitori div e posizionarli all'interno della pagina. La posizione dei div può essere gestita attraverso il CSS. Questa tecnica è molto più flessibile rispetto all'utilizzo delle tabelle.
L'utilizzo di grid: è una tecnica più recente che permette di creare layout complessi utilizzando una griglia, in cui si possono definire le righe e le colonne e posizionare i contenuti all'interno di esse.

Il tag <div> è un contenitore generico utilizzato per raggruppare elementi di una pagina, come testo, immagini e altri elementi HTML. È possibile utilizzare il tag <div> per creare sezioni distintive di una pagina web e applicare stili CSS specifici a ciascuna sezione. Ad esempio, si può utilizzare il tag <div> per creare una barra di navigazione in cima alla pagina o una sezione separata per i commenti degli utenti.

Le tabelle, d'altra parte, sono utilizzate principalmente per visualizzare dati tabellari. La struttura di base di una tabella è costituita dai tag <table>, <tr> e <td>. Il tag <table> definisce la tabella stessa, il tag <tr> definisce le righe della tabella e il tag <td> definisce le celle della tabella. È possibile utilizzare anche il tag <th> per definire le celle delle intestazioni di colonna.

Ad esempio, si può utilizzare il seguente codice HTML per creare un layout semplice con due colonne:

<!DOCTYPE html>
<html>
<head>
	<title>Layout con HTML</title>
	<style>
		.container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 20px;
		}
		.left-column {
			background-color: #ccc;
			padding: 20px;
		}
		.right-column {
			background-color: #eee;
			padding: 20px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="left-column">
			<h2>Titolo della prima colonna</h2>
			<p>Contenuto della prima colonna</p>
		</div>
		<div class="right-column">
			<h2>Titolo della seconda colonna</h2>
			<p>Contenuto della seconda colonna</p>
		</div>
	</div>
</body>
</html>

In questo esempio, si utilizza la tecnica del grid per creare un contenitore con due colonne. La classe "container" viene utilizzata per definire il layout a griglia, mentre le classi "left-column" e "right-column" vengono utilizzate per definire le stili delle due colonne. All'interno di ciascuna colonna si possono inserire i propri contenuti.

Utilizzando il CSS, è possibile definire lo stile dei contenitori div e delle varie parti della pagina, come il colore di sfondo, il padding, i margini, i bordi e molto altro ancora. In questo modo, è possibile creare layout personalizzati e adattabili a diverse dimensioni di schermo e dispositivi.

Tabelle

Un'altra tecnica comune per organizzare il contenuto della pagina è l'utilizzo di tabelle HTML. Le tabelle possono essere utilizzate per visualizzare dati in modo ordinato e organizzato.

Ecco un esempio di come utilizzare il tag table per creare una tabella:

<table>
  <tr>
    <th>Nome</th>
    <th>Cognome</th>
    <th>Età</th>
  </tr>
  <tr>
    <td>Mario</td>
    <td>Rossi</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Giovanni</td>
    <td>Bianchi</td>
    <td>25</td>
  </tr>
</table>

In questo esempio abbiamo creato una tabella con tre colonne (Nome, Cognome ed Età) e due righe di dati. Il tag tr viene utilizzato per creare una riga, mentre th e td vengono utilizzati per creare celle di intestazione e celle di dati, rispettivamente.

id e class

Gli attributi id e class sono due degli attributi più importanti in HTML e CSS. Consentono di identificare e definire uno o più elementi HTML in modo da poterli manipolare attraverso CSS e JavaScript.

L'attributo id consente di identificare in modo univoco un elemento HTML all'interno della pagina. Il valore dell'attributo id deve essere unico all'interno della pagina, non è consentito avere due elementi con lo stesso id. L'utilizzo di un id consente di manipolare l'elemento tramite JavaScript, nonché di creare link interni che puntano all'elemento specifico.

Esempio di attributo id:

<h1 id="titolo-principale">Titolo principale</h1>

<a href="#titolo-principale">Vai al titolo della pagina</a>

In questo esempio, l'attributo id è utilizzato per identificare il titolo principale della pagina con il valore "titolo-principale".

L'attributo class consente invece di assegnare una o più classi ad un elemento HTML. Le classi sono utilizzate per definire lo stile di un elemento attraverso il CSS e per selezionare un gruppo di elementi tramite JavaScript. A differenza dell'attributo id, l'attributo class può essere assegnato a più elementi HTML nella pagina.

Esempio di attributo class:

<p class="highlighted">Questo è un testo evidenziato</p>

In questo esempio, l'attributo class è utilizzato per assegnare la classe "highlighted" al paragrafo, che può essere utilizzata per definire uno stile specifico tramite il CSS.

Inoltre, è possibile utilizzare le classi in combinazione con gli elementi di selezione.