sabato 1 febbraio 2025

Corso di HTML: 1 - Introduzione al Web

1 – Introduzione al Web

Cos’è Internet e il World Wide Web

In questo primo modulo ci addentreremo nel mondo del web partendo dalle basi. È fondamentale comprendere la differenza tra Internet e il World Wide Web. Internet è la rete globale di computer collegati tra loro, mentre il World Wide Web è l’insieme di pagine web accessibili tramite browser. Quando digitiamo l’indirizzo di un sito, ad esempio www.wikipedia.org, il nostro computer (il cosiddetto “client”) invia una richiesta al server remoto che ospita la pagina. Il server risponde inviando il codice della pagina, composto da HTML, CSS e JavaScript, e il browser lo interpreta per visualizzare la pagina sullo schermo.

Differenza tra HTML, CSS e JavaScript

Per costruire pagine web funzionali e gradevoli è indispensabile conoscere le tre tecnologie principali. HTML (HyperText Markup Language) definisce la struttura della pagina: titoli, paragrafi, link, immagini ed elenchi. CSS (Cascading Style Sheets) si occupa dello stile grafico, gestendo colori, font, spaziature e layout. JavaScript, infine, permette di aggiungere dinamismo e interattività, reagendo agli input dell’utente, modificando contenuti in tempo reale e creando animazioni. Una metafora utile è: HTML = scheletro, CSS = vestiti e design, JavaScript = impianti elettrici e automatismi.

Strumenti necessari per lavorare

Prima di scrivere codice, è fondamentale predisporre l’ambiente di lavoro. È necessario avere un computer aggiornato e un browser moderno, come Google Chrome o Firefox. Successivamente, è consigliabile installare Visual Studio Code, un editor di testo professionale che facilita la scrittura del codice grazie alle estensioni. Tra le più utili troviamo Live Server, per vedere in tempo reale le modifiche effettuate, Prettier, per mantenere il codice ordinato e leggibile, e HTML CSS Support, per suggerimenti e completamento automatico durante la scrittura.

Creare la prima pagina web

Dopo aver configurato l’ambiente, possiamo passare alla pratica. Creeremo un file chiamato index.html contenente HTML, CSS e JavaScript di base. Questo ci permetterà di comprendere come le tre tecnologie interagiscono tra loro. Ecco un esempio:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Prima Pagina Web</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 20px;
    }
    h1 {
      color: #2c3e50;
    }
    p {
      color: #34495e;
    }
    button {
      padding: 10px 15px;
      background-color: #2980b9;
      color: white;
      border: none;
      cursor: pointer;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Ciao, mondo!</h1>
  <p>Questa è la mia prima pagina web in HTML, CSS e JavaScript.</p>
  <button onclick="alert('Hai cliccato il pulsante!')">Cliccami!</button>
</body>
</html>

Spiegazione del codice

Il tag <style> contiene regole CSS che definiscono il font, i colori e l’aspetto del pulsante. L’elemento <button> utilizza JavaScript per generare un messaggio di alert al click, aggiungendo interattività alla pagina. Ogni elemento HTML ha una funzione chiara: <h1> per il titolo principale, <p> per il paragrafo descrittivo e <button> per creare un pulsante cliccabile.

Questa esperienza permette di comprendere come HTML, CSS e JavaScript lavorino insieme per creare una pagina completa e interattiva. Inoltre, impostare correttamente l’ambiente di sviluppo consente di testare subito le modifiche, rendendo l’apprendimento più efficace e immediato.

Ecco una versione dettagliata e narrativa del mini-esercizio operativo, con spiegazioni passo passo e le motivazioni dietro le modifiche, in modo che sia immediatamente fruibile dagli studenti. Ho mantenuto il tono educativo e ho spiegato le scelte fatte nel codice:

📝 Mini-Esercizio Operativo – Personalizzare la prima pagina

In questo esercizio metteremo in pratica quanto appreso nel modulo precedente modificando alcuni elementi della nostra pagina web. L’obiettivo è comprendere come HTML, CSS e JavaScript lavorino insieme per creare contenuti interattivi e personalizzabili.

Passo 1 – Modificare il titolo della pagina

Il titolo della pagina appare nella scheda del browser e aiuta l’utente a riconoscere il sito. Per cambiarlo, individua il tag <title> all’interno della sezione <head> del file index.html e sostituisci il testo con:

<title>Benvenuto nel mio sito personale</title>

Spiegazione:

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

  • Cambiare questo testo non influisce sul contenuto visibile della pagina, ma migliora l’esperienza dell’utente e l’indicizzazione SEO.

Passo 2 – Modificare il colore dello sfondo

Per rendere la pagina più accogliente, possiamo modificare lo sfondo usando CSS. Individua lo stile del body nella sezione <style> e sostituisci il colore di sfondo con lightblue:

body {
  font-family: Arial, sans-serif;
  background-color: lightblue;
  margin: 20px;
}

Spiegazione:

  • background-color imposta il colore di sfondo della pagina.

  • L’utilizzo di lightblue rende la pagina più luminosa e gradevole.

  • Modificare lo stile tramite CSS consente di separare la struttura (HTML) dall’aspetto grafico, facilitando future personalizzazioni.

Passo 3 – Cambiare il messaggio dell’alert

Il pulsante presente nella pagina attiva un messaggio tramite JavaScript. Per rendere l’interazione più significativa, modifica il testo del messaggio così:

<button onclick="alert('Ottimo lavoro, sei pronto per il prossimo modulo!')">Cliccami!</button>

Spiegazione:

  • onclick è un attributo HTML che associa un’azione JavaScript al click del pulsante.

  • La funzione alert() mostra una finestra pop-up con il messaggio desiderato.

  • Cambiando il testo, rendiamo l’interazione più motivante e contestualizzata all’apprendimento.

Risultato finale del codice completo della pagina

Dopo le modifiche, il file index.html sarà così:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Benvenuto nel mio sito personale</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: lightblue;
      margin: 20px;
    }
    h1 {
      color: #2c3e50;
    }
    p {
      color: #34495e;
    }
    button {
      padding: 10px 15px;
      background-color: #2980b9;
      color: white;
      border: none;
      cursor: pointer;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Ciao, mondo!</h1>
  <p>Questa è la mia prima pagina web in HTML, CSS e JavaScript.</p>
  <button onclick="alert('Ottimo lavoro, sei pronto per il prossimo modulo!')">Cliccami!</button>
</body>
</html>

✅ Competenze acquisite

Dopo aver completato questo mini-esercizio, avrai sviluppato le seguenti competenze:

  1. Comprensione del funzionamento di Internet e del Web: sai come il browser comunica con i server e interpreta i contenuti HTML, CSS e JavaScript.

  2. Conoscenza dei ruoli di HTML, CSS e JavaScript: HTML struttura la pagina, CSS ne definisce l’aspetto e JS la rende interattiva.

  3. Installazione e configurazione degli strumenti di lavoro: sai usare Visual Studio Code, Live Server e altre estensioni utili.

  4. Creazione e modifica di una pagina web interattiva: sei in grado di personalizzare titoli, colori e 

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...