Lezioni
Inizia
Inizia il corso
CodeGym /Corsi /Python SELF IT /Introduzione a HTML

Introduzione a HTML

Python SELF IT
Livello 29 , Lezione 0
Disponibile

1. Tag in HTML

Che cos'è HTML?

HTML (HyperText Markup Language) è un linguaggio di markup utilizzato per creare e strutturare le pagine web. Con HTML possiamo organizzare il contenuto della pagina utilizzando diversi tag e attributi, in modo che il browser sappia come visualizzare le informazioni. In questa lezione esamineremo i concetti principali di HTML, come i tag, l'albero dei tag, gli attributi, i tag singoli e la struttura di un documento HTML.

In HTML, i tag sono gli elementi chiave che consentono di strutturare il contenuto. Racchiudono il testo e altri elementi, aiutando il browser a capire come mostrarli correttamente. Ad esempio, i tag <h1> e <p> indicano al browser che il testo al loro interno è un'intestazione o un paragrafo.

I tag sono scritti tra parentesi angolari <>. La maggior parte dei tag si apre e si chiude, cioè consiste in un tag iniziale e uno finale. Ad esempio:

HTML 
                      
                        <h1>Questa è un'intestazione</h1>
                        <p>Questo è un paragrafo di testo.</p>
C++

Qui <h1> è il tag iniziale e </h1> è il tag finale.

L'albero dei tag

Un documento HTML ha una struttura gerarchica, dove i tag sono nidificati l'uno dentro l'altro, formando una struttura ad albero. Questo "albero dei tag" definisce come gli elementi sulla pagina sono legati tra loro e in che ordine devono essere visualizzati.

Ecco un esempio di un semplice albero dei tag:

Python 

<html>
<head>
  <title>Esempio di pagina</title>
</head>
<body>
  <h1>Titolo della pagina</h1>
  <p>Qui c'è un testo di paragrafo.</p>
</body>
</html>

In questo esempio, il tag <html> è l'elemento radice, al cui interno troviamo <head> e <body>. All'interno di <body> ci sono i tag <h1> e <p>. Questa struttura consente di organizzare logicamente il contenuto della pagina.

Attributi

Gli attributi in HTML vengono utilizzati per aggiungere informazioni aggiuntive ai tag. Si trovano nel tag iniziale e consistono in un nome e un valore. Ad esempio:

HTML 

<a href="https://example.com">Link al sito</a>
<img src="image.jpg" alt="Descrizione dell'immagine">
  • href indica l'indirizzo del link.
  • src — il percorso dell'immagine.
  • alt — testo alternativo che verrà mostrato se l'immagine non viene caricata.

Gli attributi consentono di aggiungere caratteristiche aggiuntive agli elementi, come l'identificatore (id), classi (class), stili (style) e molto altro.

Tag singoli

Alcuni tag HTML non contengono contenuto interno e non richiedono un tag di chiusura. Questi tag sono chiamati tag singoli. Ad esempio, il tag <img> viene utilizzato per aggiungere un'immagine, e la sua struttura è simile a questa:

CSS 
  
    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Descrizione dell'immagine">
HTML 
  
    <img src="image.jpg" alt="Descrizione dell'immagine">

Altri esempi di tag singoli:

  • <br> — per andare a capo.
  • <hr> — per aggiungere una linea orizzontale.

2. Introduzione al documento HTML

Un documento HTML inizia con la dichiarazione <!DOCTYPE html>, che informa il browser che si tratta di un documento HTML5. Successivamente troviamo il tag radice <html>, che contiene i tag <head> e <body>. Nel <head> si trovano i metadati del documento (titolo, stili, script), mentre nel <body> c'è il contenuto principale della pagina.

Esempio di documento HTML

Python 
      
        <!DOCTYPE html>
        <html lang="it">
        <head>
          <meta charset="UTF-8">
          <title>La mia prima pagina</title>
        </head>
        <body>
          <h1>Benvenuto!</h1>
          <p>Questo è un esempio di documento HTML.</p>
          <a href="https://example.com">Visita il nostro sito</a>
        </body>
        </html>
  • <!DOCTYPE html> informa il browser che il documento è scritto in HTML5.
  • <html lang="it"> specifica la lingua del documento.
  • <meta charset="UTF-8"> definisce la codifica per visualizzare correttamente i caratteri.
  • <title> imposta il titolo della pagina visibile nella barra del titolo del browser.

Tag aggiuntivi in <head>

Il tag <head> contiene informazioni che non vengono visualizzate direttamente sulla pagina, ma sono importanti per il funzionamento del sito. All'interno di <head> è possibile includere i seguenti tag:

  • <meta name="description" content="Descrizione della pagina"> — breve descrizione della pagina per i motori di ricerca.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — per rendere il sito adattivo per dispositivi mobili.
  • <link rel="stylesheet" href="styles.css"> — collegamento al file CSS per gli stili.
  • <script src="script.js"></script> — collegamento a un file JavaScript esterno.

Questi tag aiutano a migliorare l'interazione con l'utente, ottimizzare la pagina per i motori di ricerca e collegare le risorse necessarie.

Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION