domenica 2 febbraio 2025

Corso di HTML: 2 Fondamenti di HTM

 2 – Fondamenti di HTML

In questo modulo ci concentreremo sulla costruzione di pagine web utilizzando HTML, il linguaggio di markup che fornisce la struttura ai contenuti del Web. HTML permette di definire titoli, paragrafi, liste, link e immagini, nonché di aggiungere attributi che ne modificano il comportamento o l’aspetto. Lo scopo principale è comprendere come creare una pagina funzionante da zero e prepararsi per l’integrazione di CSS e JavaScript nei moduli successivi.

📌 Struttura base di una pagina HTML

Ogni pagina HTML ha una struttura fondamentale che deve essere rispettata affinché il browser interpreti correttamente il contenuto e lo mostri all’utente in modo coerente. La struttura di base si compone di quattro elementi principali:

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <body>

1. Questa dichiarazione va sempre all’inizio del documento HTML e indica al browser che il documento è scritto in HTML5, la versione più recente e standardizzata di HTML.

  • Senza <!DOCTYPE html>, i browser potrebbero interpretare la pagina in “modalità quirks”, cioè comportarsi come se fosse HTML vecchio, causando problemi di visualizzazione o compatibilità.

  • Pensalo come un istruzione di compatibilità: “Browser, interpreta questo documento come HTML5”.

2. Il tag <html> racchiude tutti gli elementi della pagina, sia quelli visibili all’utente che quelli non visibili ma utili per i browser e i motori di ricerca.

  • Spesso si specifica l’attributo lang per indicare la lingua del documento, ad esempio lang="it" per l’italiano.

  • Questo aiuta i motori di ricerca e gli screen reader a interpretare correttamente i contenuti, migliorando accessibilità e SEO.

Esempio concettuale:

<html lang="it">
  <!-- contenuti della pagina -->
</html>

3. La sezione <head> contiene tutte le informazioni non visibili direttamente all’utente ma fondamentali per il funzionamento della pagina.

  • Alcuni dei principali elementi contenuti in <head>:

    • <title> → definisce il titolo della pagina, visibile nella scheda del browser e nei risultati dei motori di ricerca.

    • <meta> → definisce metadati, come la codifica dei caratteri (charset="UTF-8") e le informazioni per SEO.

    • <link> → permette di collegare fogli di stile esterni (CSS) o icone.

    • <script> → eventuali script JavaScript da caricare nella pagina.

Perché è importante il head:

  • Senza un head correttamente strutturato, i browser potrebbero mostrare caratteri strani, non applicare correttamente i CSS o penalizzare la pagina nei risultati di ricerca.

4. Il tag <body> contiene tutti i contenuti visibili all’utente, come testi, immagini, link, video e moduli.

  • Ogni elemento che l’utente vede deve essere all’interno del body: se metti contenuti fuori dal body, il browser potrebbe ignorarli o mostrarli in modo irregolare.

  • Possiamo pensare al body come il “palco” della nostra pagina: tutto ciò che l’utente può vedere e interagire deve trovarsi qui.

📌 Elementi di testo

Per strutturare correttamente i contenuti testuali, HTML mette a disposizione tag semantici che aiutano sia l’utente che i motori di ricerca a comprendere il significato delle informazioni.

Titoli

  • <h1> → titolo principale della pagina (unico per pagina).

  • <h2> → sottotitolo, di secondo livello.

  • <h3> … <h6> → titoli di importanza decrescente.
    Consiglio: Utilizzare i titoli in ordine logico, senza saltare livelli, per migliorare leggibilità e SEO.

Paragrafi

  • <p> serve a creare paragrafi di testo separati.

  • Consente di organizzare il contenuto in blocchi leggibili e stilizzabili tramite CSS.

Elenchi

  • Elenchi puntati → <ul> + <li>

  • Elenchi numerati → <ol> + <li>

  • Gli elenchi permettono di presentare informazioni in modo chiaro e ordinato, facilitando la lettura.

Link

  • <a href="URL">Testo del link</a>

  • L’attributo href indica la destinazione del collegamento.

  • Altri attributi utili:

    • title → testo informativo che appare al passaggio del mouse.

    • target="_blank" → apre il link in una nuova scheda.

📌 Attributi più comuni

Gli attributi sono proprietà che modificano il comportamento di un elemento HTML.

Ecco i più frequenti:

  1. src → definisce la sorgente di immagini o media.

    <img src="foto.jpg" alt="Descrizione della foto">

  2. alt → testo alternativo per immagini; utile per accessibilità e SEO.

  3. title → informazioni aggiuntive visibili al passaggio del mouse.

  4. href → URL di destinazione dei link.

Nota importante: L’uso corretto degli attributi aumenta:

  • L’accessibilità per utenti con disabilità.

  • La comprensibilità dei contenuti da parte dei motori di ricerca.

  • La professionalità e chiarezza della pagina.

✅ Consigli pratici per principianti

  1. Sempre chiudere i tag: <p>Testo</p>.

  2. Organizzare il contenuto: titolo → sottotitoli → paragrafi → elenchi.

  3. Usare attributi significativi: nomi di immagini chiari, link descrittivi.

  4. Validare il codice: strumenti come W3C Validator aiutano a verificare errori HTML.

  5. Testare su più browser: Chrome, Firefox, Edge, Safari.


⚡ Esempio: Creare la propria prima pagina “Hello World”

Per mettere in pratica quanto appreso, creeremo una pagina HTML minimale. Apri il tuo editor di testo (come VS Code) e crea un file chiamato index.html. Inserisci il seguente codice:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Questa è la mia prima pagina web in HTML.</p>
  <a href="https://www.google.com" title="Vai a Google" target="_blank">Visita Google</a>
</body>
</html>

In questo esempio, il titolo della pagina viene visualizzato nella scheda del browser grazie a <title>, mentre il contenuto visibile include un titolo principale, un paragrafo descrittivo e un link cliccabile. L’attributo target="_blank" fa sì che il link si apra in una nuova scheda del browser.

📝 Esercizi Operativi

1. Modifica il titolo della pagina in “La mia prima pagina HTML”.
2. Cambia il testo del paragrafo con una breve descrizione di te stesso o del tuo progetto.
3. Aggiungi un secondo paragrafo e inserisci un elenco numerato dei tuoi hobby utilizzando <ol>.
4. Aggiungi un link a un sito a tua scelta, impostando il titolo con l’attributo title.
5. Inserisci una seconda intestazione <h2> e prova a scrivere un testo di sottotitolo.


⚡ Esercizi Svolti: La mia prima pagina HTML

Abbiamo gli esercizi operativi:

  1. Modifica il titolo della pagina in “La mia prima pagina HTML”.

  2. Cambia il testo del paragrafo con una breve descrizione di te stesso o del tuo progetto.

  3. Aggiungi un secondo paragrafo e inserisci un elenco numerato dei tuoi hobby utilizzando <ol>.

  4. Aggiungi un link a un sito a tua scelta, impostando il titolo con l’attributo title.

  5. Inserisci una seconda intestazione <h2> e scrivi un testo.

Soluzione completa

Apri il tuo editor di testo (ad esempio VS Code) e crea un file chiamato index.html. Inserisci il seguente contenuto:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>La mia prima pagina HTML</title>
</head>
<body>
  <!-- Intestazione principale -->
  <h1>Ciao! Benvenuto nel mio sito</h1>
  <!-- Paragrafo con descrizione personale -->
  <p>Mi chiamo Alessandra Bianchi e sono appassionata di scrittura, lettura e tecnologia. In questo sito condivido alcune informazioni su di me e sui miei interessi.</p>

  <!-- Secondo paragrafo con elenco numerato dei miei hobby -->
  <p>I miei hobby principali sono:</p>
  <ol>
    <li>Scrivere racconti e poesie</li>
    <li>Leggere libri di fantascienza</li>
    <li>Programmare piccole pagine web</li>
    <li>Suonare la chitarra</li>
  </ol>

  <!-- Link a un sito a scelta -->
  <p>Un sito che consiglio per aggiornamenti tecnologici è:
    <a href="https://www.techcrunch.com" title="Vai a TechCrunch" target="_blank">TechCrunch</a>
  </p>

  <!-- Seconda intestazione con testo -->
  <h2>Il mio percorso di apprendimento</h2>
  <p>Sto imparando a costruire pagine web passo dopo passo, iniziando dalle basi dell'HTML e proseguendo con CSS e JavaScript. L’obiettivo è creare siti completi e funzionali.</p>
</body>

</html>

Spiegazione dettagliata di ogni esercizio e soluzione

1. Modifica del titolo

<title>La mia prima pagina HTML</title>

  • Il titolo appare nella scheda del browser.

  • Abbiamo sostituito “Hello World” con un titolo più personale e descrittivo.

2. Paragrafo con descrizione personale

<p>Mi chiamo Alessandra Bianchi e sono appassionata di scrittura, lettura e tecnologia...</p>

  • Abbiamo inserito una breve presentazione personale.

  • <p> serve a delimitare un paragrafo di testo.

3. Secondo paragrafo con elenco numerato

<p>I miei hobby principali sono:</p>
<ol>
  <li>Scrivere racconti e poesie</li>
  <li>Leggere libri di fantascienza</li>
  <li>Programmare piccole pagine web</li>
  <li>Suonare la chitarra</li>
</ol>

  • <ol> crea un elenco numerato.

  • <li> definisce ciascun elemento della lista.

  • Abbiamo aggiunto un secondo paragrafo introduttivo prima dell’elenco per chiarezza.

4. Aggiunta di un link

<a href="https://www.techcrunch.com" title="Vai a TechCrunch" target="_blank">TechCrunch</a>

  • href indica l’URL del sito.

  • title è il testo che appare al passaggio del mouse.

  • target="_blank" apre il link in una nuova scheda.

  • L’utente può sostituire l’URL e il testo a suo piacimento.

5. Seconda intestazione con testo

<h2>Il mio percorso di apprendimento</h2>
<p>Sto imparando a costruire pagine web passo dopo passo...</p>

  • <h2> serve come sottotitolo, crea una gerarchia logica nella pagina.

  • Il testo spiega il proprio percorso di apprendimento, ma può essere personalizzato.

Risultato visivo nel browser

  1. Titolo della pagina: “La mia prima pagina HTML”.

  2. Intestazione principale <h1>: “Ciao! Benvenuto nel mio sito”.

  3. Paragrafo descrittivo con informazioni personali.

  4. Secondo paragrafo con elenco numerato dei hobby.

  5. Link a un sito esterno cliccabile che si apre in una nuova scheda.

  6. Sottotitolo <h2> con testo descrittivo del proprio percorso.

Questo esempio mostra come strutturare una prima pagina HTML completa rispettando le richieste degli esercizi. Gli studenti possono copiare il codice e vedere subito i risultati nel browser, imparando il significato di ogni tag e attributo.

✅ Risultati Attesi

Al termine di questo modulo, sarai in grado di creare pagine HTML strutturate, utilizzare correttamente titoli, paragrafi, elenchi e link, applicare gli attributi principali e comprendere come la struttura base di HTML costituisca la spina dorsale di ogni sito web. Queste competenze ti renderanno pronto a procedere con CSS e JavaScript nei moduli successivi, aggiungendo stile e interattività alle tue pagine.



alle
Etichette: ,

Nessun commento:

Posta un commento

Iscriviti a: Commenti sul post (Atom)

Corso Fondamenti di Informatica e Reti: 6 Reti di computer e Internet

Reti di computer e Internet Introduzione Prova a pensare alla vita quotidiana senza reti informatiche: niente messaggi WhatsApp, niente m...