Lezione

Sviluppo web 

Introduzione all'HTML

Benvenuti nel mondo dello sviluppo web! Questa lezione vi introdurrà ai blocchi fondamentali di costruzione di Internet: l'HTML. HTML sta per HyperText Markup Language (Linguaggio di Markup per Ipertesti) ed è il linguaggio standard per la creazione di pagine web. Pensatelo come lo scheletro di un sito web – fornisce la struttura e il contenuto.

Senza HTML, i browser web non saprebbero come visualizzare testo, immagini o link. È essenziale per chiunque sia interessato a costruire siti web, da semplici pagine personali ad applicazioni web complesse. Inizieremo con le basi e arriveremo a creare un layout di pagina web semplice.

Struttura HTML: Il Template Base

Ogni documento HTML segue una struttura di base. Questa struttura dice al browser che sta leggendo un file HTML e fornisce gli elementi essenziali per la pagina. Ecco un template HTML minimale:

            
<!DOCTYPE html>
<html>
<head>
    <title>Titolo della Pagina</title>
</head>
<body>
    <!-- Il contenuto della pagina va qui -->
</body>
</html>

Analizziamo ogni parte:

  • <!DOCTYPE html>: Questa dichiarazione dice al browser che il documento è un documento HTML5. Dovrebbe essere sempre la prima cosa nel vostro file HTML.
  • <html>: Questo è l'elemento radice della pagina. Tutto il resto va all'interno di questo tag.
  • <head>: Questa sezione contiene meta-informazioni sul documento HTML, come il titolo, il set di caratteri e i link ai fogli di stile.
  • <title>: Specifica un titolo per la pagina HTML (che viene mostrato nella barra del titolo o nella scheda del browser).
  • <body>: È qui che va tutto il contenuto della vostra pagina web – il testo, le immagini, i link e tutto il resto che gli utenti vedono.

Tag HTML: Elementi e Attributi

L'HTML utilizza i tag per definire gli elementi. La maggior parte dei tag si presenta in coppia: un tag di apertura e un tag di chiusura. Ad esempio, <p> è il tag di apertura per un paragrafo, e </p> è il tag di chiusura.

Alcuni tag sono auto-chiudenti, il che significa che non necessitano di un tag di chiusura separato. Un esempio è il tag <br>, che crea un'interruzione di riga. I tag possono anche avere attributi, che forniscono informazioni aggiuntive sull'elemento. Ad esempio, il tag <img> (per le immagini) utilizza l'attributo src per specificare la sorgente dell'immagine.

Intestazioni: da <h1> a <h6>

Le intestazioni vengono utilizzate per strutturare il contenuto e renderlo più facile da leggere. L'HTML fornisce sei livelli di intestazioni, da <h1> (la più importante) a <h6> (la meno importante). Tipicamente, <h1> viene utilizzato per il titolo principale della pagina.

Ecco un esempio:

            
<h1>Questa è un'intestazione di Livello 1</h1>
<h2>Questa è un'intestazione di Livello 2</h2>
<h3>Questa è un'intestazione di Livello 3</h3>

Paragrafi: <p>

I paragrafi vengono utilizzati per visualizzare blocchi di testo. Il tag <p> definisce un paragrafo.

Esempio:

            
<p>Questo è un paragrafo di testo. Può contenere più frasi e parole.</p>
<p>Questo è un altro paragrafo. I paragrafi sono automaticamente separati da una riga vuota.</p>

Elenchi: <ul> e <ol>

L'HTML fornisce due tipi di elenchi: elenchi non ordinati (<ul>) ed elenchi ordinati (<ol>). Gli elenchi non ordinati vengono utilizzati per elementi che non hanno un ordine specifico, mentre gli elenchi ordinati vengono utilizzati per elementi che devono seguire una sequenza particolare. Gli elementi dell'elenco sono definiti utilizzando il tag <li>.

Ecco esempi di entrambi:

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

<ol>
    <li>Primo elemento</li>
    <li>Secondo elemento</li>
    <li>Terzo elemento</li>
</ol>

Link: <a>

I link consentono agli utenti di navigare tra diverse pagine web o sezioni all'interno della stessa pagina. Il tag <a> definisce un collegamento ipertestuale. L'attributo più importante è href, che specifica l'URL del link.

Esempio:

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

L'attributo target può essere utilizzato per specificare dove aprire il documento collegato. target="_blank" apre il link in una nuova scheda o finestra.

Immagini: <img>

Il tag <img> viene utilizzato per incorporare immagini in una pagina web. L'attributo src specifica il percorso del file immagine. L'attributo alt fornisce un testo alternativo per l'immagine, che viene visualizzato se l'immagine non può essere caricata ed è importante per l'accessibilità.

Esempio:

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

Costruire un Layout Semplice di Pagina Web

Ora, combiniamo tutto ciò che abbiamo imparato per creare un layout di pagina web di base. Includeremo un'intestazione, un paragrafo, un elenco, un link e un'immagine.

Ecco il codice HTML completo:

            
<!DOCTYPE html>
<html>
<head>
    <title>La Mia Prima Pagina Web</title>
</head>
<body>
    <h1>Benvenuti nella Mia Pagina Web!</h1>
    <p>Questa è una semplice pagina web creata utilizzando i fondamenti dell'HTML.</p>
    <ul>
        <li>Impara l'HTML</li>
        <li>Fai pratica con la programmazione</li>
        <li>Costruisci siti web fantastici</li>
    </ul>
    <a href="https://www.google.com" target="_blank">Visita Google</a>
    <img src="placeholder.jpg" alt="Un'immagine segnaposto">
</body>
</html>

Ricordate di sostituire "placeholder.jpg" con il percorso effettivo di un file immagine. Salvate questo codice come file HTML (ad esempio, "index.html") e apritelo nel vostro browser web per vedere il risultato. Ora avete una pagina HTML completamente funzionale!



-/- ✔: 0, ✖: 0