Lezione 1: Panoramica sull'HTML e CSS per la creazione di pagine web

Lezione 1 Panoramica su HTML

ITIS Di Vittorio Lattanzio - Anno 2024/25 - Prof. E. Bonaccorso

Panoramica su HTML

Obiettivi

• Creare una pagina Web di base usando HTML
• Applicare stili agli elementi della pagina usando CSS
• Creare temi usando CSS
• Aggiungere il supporto per il passaggio tra temi con JavaScript
• Esaminare il sito Web usando gli strumenti di sviluppo del browser

Configurazione IDE

Integrated Development Environment

HTML extensions Install an extension to add more functionality. Go to the Extensions view ( +#X ) and type 'html' to see a list of relevant extensions to help with creating and editing HTML.

HTML CSS Support ecmel ₺ 7.5M CSS Intellisense for HTML

HTML 5 HTML Snippets abusaidm ± 6.1M Full HTML tags including HTML5 Snippets medl):/pre Type:"weit IntelliSense for CSS cl ... Zignd ± 3.9M CSS class name completion for the HTML class attribut ... < /> HTML Hint HTMLHint mkaufman ± 817.7K VS Code integration for HTMLHint - A Static Code ...

Configurazione IDE

Integrated Development Environment

Prettier - Code formatter Prettier 10.276.200 ***** Code formatter using prettier Install

Live Server ritwickdey.liveserver Ritwick Dey | 9.326.92 ***** Repository | License | v5.6.1 Launch a development local Server with live reload feature for static & dynamic pages Install

vscode-icons vscode-icons-team.vscode-icons VSCode Icons Team 6.904.270 *** Icons for Visual Studio Code Install

Configurazione IDE

Configurazione Formatter

File Edit Selection View Go Run Terminal Help Settings - es_html - Visual Studio Code - Insiders EXTENSIONS ... 5 index.html Settings × Search Extensions in Marketplace Formatter V INSTALLED 3 User Workspace Live Server 5.6.1 Launch a development local Server wi .... Ritwick Dey v Text Editor (3) Formatting (2) Editor: Default Formatter Prettier - Code formatter 5.8.0 Code formatter using prettier Prettier Defines a default formatter which takes precedence over all other forma contributing a formatter. esbenp.prettier-vscode vscode-icons 11.1.0 Icons for Visual Studio Code VSCode Icons Team v Extensions (5) HTML (1) JSON (1) Prettier (1) TypeScript (2) Editor: Format On Paste Controls whether the editor should automatically format the pasted formatter should be able to format a range in a document. Editor: Format Ön Save (Modified in: User)

Panoramica su HTML

Cosa vedremo

I componenti di base di un sito Web e gli strumenti che è possibile usare per iniziare a sviluppare il sito web del corso. Si useranno HTML, CSS e JavaScript insieme per creare un sito Web semplice e gli strumenti di sviluppo nel browser per verificare il risultato.

Panoramica su HTML

Quali sono gli elementi in una pagina Web?

In una pagina Web si usano: Q il linguaggio HTML (Hypertext Markup Language) per includere il contenuto; Qi fogli di stile CSS per definire l'aspetto della pagina e il linguaggio; ] JavaScript per offrire l'interattività con l'utente, ovvero la logica di business. Il contenuto, lo stile e la logica di business sono separati rispettivamente in file HTML, CSS e JavaScript.

Panoramica su HTML

Quali sono gli elementi in una pagina Web?

Un principio di progettazione nella programmazione moderna è: la separazione delle problematiche. Tra i vari motivi alla base di questo principio vi sono la semplicità e il riutilizzo. Se ad esempio per gli elementi HTML si creano stili tramite CSS, è possibile semplicemente formattare le pagine applicando gli stili CSS a tutti gli elementi, a prescindere dalla complessità, invece di scrivere codice separato all'interno di ogni elemento HTML. È anche possibile collegare più pagine HTML a un singolo file CSS, ottenendo così un aspetto coerente nell'intero sito Web.

Esercizio - Impostiamo la struttura di base

Quali sono gli elementi in una pagina Web?

In questa esercizio usiamo Visual Studio Code per creare una struttura di progetto semplice costituita da tre file: 1.un file HTML, 2.un file CSS 3.un file JavaScript.

Esercizio - Impostiamo la struttura di base

Visual Studio Code

Quando si apre Visual Studio Code, viene visualizzata la pagina Benvenuti. Si noti che è possibile creare un nuovo file o aprire una cartella nella sezione Avvia. File Modfica Selezione Visualizza Vai Esegui Terminale Guida Eerwinuti - Visual Studio Code X XI Benvenuti X 8 Visual Studio Code Evoluzione dell'editor "Inizio Personalizza Nuovo file Apn cartella Aggiungi cartela dell'area di lavoro ... Strumenti e linguaggi Installare il supporto per JavaScript, Python, PHP, Azure, Docker e altri

Esercizio - Impostiamo la struttura di base

Visual Studio Code

Se la pagina Benvenuti non è visibile, è possibile visualizzare la finestra iniziale **** selezionando Guida > Benvenuti nel menu di VS Code. In alternativa, è possibile visualizzare la finestra Benvenuti usando il riquadro comandi di VS Code. È possibile aprire il riquadro comandi usando i tasti di scelta rapida MAIUSC+CTRL+P ]in un computer Windows o MAIUSC+CMD+P in macOS oppure scegliendo Visualizza > Riquadro comandi dal menu di VS Code. Quando viene visualizzato il riquadro comandi, immettere >;Guida: Benvenuti nel campo di ricerca per aprire la finestra Benvenuti.

Esercizio - Impostiamo la struttura di base

Creiamo index.html

1. Creare un nuovo file scegliendo File > Nuovo file dal menu di VS Code oppure usando CTRL+N in Windows o CMD+N in macOS.
2. Salvare il file usando CTRL+S in Windows o CMD+S in macOS.
3. Immettere index. html come nome del file e quindi selezionare Salva.
4. Ripetere i passaggi precedenti per creare altri due file, main. css e app. js . Al termine, la cartella del progetto conterrà i file seguenti che costituiscono il sito Web:
   • index.html
   • main.css
   • app.js

Esercizio - Impostiamo la struttura di base

Sotto il nome della cartella nella finestra Explorer vengono visualizzati i tre file che costituiscono il sito Web. File Modifica Selezione Visualizza Vai Esegui Terminale Guida EXPLORER V SIMPLE-WEBSITE JS app.js <> index.html # main.css

Panoramica su HTML

Quali sono gli elementi in una pagina Web?

È possibile creare un sito Web includendo tutto il codice HTML, gli stili CSS e JavaScript all'interno di un singolo file. Ma la struttura di base di una buona organizzazione prevede:

• un file HTML per il contenuto e la struttura della pagina,
• un file CSS per la presentazione e lo stile
• un file JavaScript per i comportamenti e l'interattività.

La configurazione di tre file consente di mantenere organizzato il progetto di sito Web e la separazione di contenuto, stili e logica è un esempio di miglioramento progressivo. Se JavaScript non è abilitato o supportato dai clienti, CSS e HTML continueranno a funzionare. Tuttavia, se CSS non è supportato dai clienti, verrà visualizzato almeno il contenuto HTML.

Esercizio - Aggiungiamo il codice HTML

Quali sono gli elementi in una pagina Web?

Al momento, il sito Web include un file HTML vuoto. a cui è possibile aggiungere codice. L'obiettivo è usare HTML (Hypertext Markup Language) per descrivere la pagina Web che verrà visualizzata nel browser dei clienti. Sarebbe molto utile avere un modello da cui partire. Gli editor sono in grado di compilare automaticamente parte del tipico codice boilerplate o della struttura HTML.

Esercizio - Aggiungiamo il codice HTML

Visual Studio Code offre supporto di base predefinito per la programmazione HTML. Sono disponibili l'evidenziazione della sintassi, il completamento intelligente con IntelliSense e la formattazione personalizzabile. 1. Aprire il sito Web in Visual Studio Code, quindi aprire il file index.html selezionando index.html nella finestra Explorer. 2. Nella pagina index.html digitare html:5 e quindi premere INVIO . Il codice del modello HTML5 viene aggiunto al file.

Esercizio - Aggiungiamo il codice HTML

Modificare il codice in modo che sia simile al codice seguente, quindi salvare il file premendo CTRL+S in Windows o CMD+S in macOS.

HTML Copia <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

Esercizio - Aggiungiamo il codice HTML

Sono state realizzate diverse versioni del codice HTML. Il tipo di documento <! DOCTYPE html> indica che si tratta di codice HTML5. Il tag meta indica informazioni sui metadati che in genere non sono visibili all'utente a meno che non visualizzi il codice sorgente nel browser. Gli elementi meta o i tag offrono informazioni descrittive sulla pagina Web. Consentono ad esempio ai motori di ricerca di elaborare le informazioni contenute nelle pagine Web da restituire nei risultati della ricerca. Il set di caratteri (charset) UTF-8 è fondamentale per definire come vengono interpretati i caratteri dai computer. il boilerplate VS Code fornisce alcune impostazioni predefinite significative.

Esercizio - Modificare l'intestazione

I metadati definiscono i dati relativi al documento HTML, come:

• il set di caratteri,
• gli script
• il browser in cui viene aperta la pagina Web.

Il titolo di una pagina Web viene visualizzato nella parte superiore della finestra del browser ed è significativo per diversi motivi. Ad esempio viene usato dai motori di ricerca e visualizzato nelle ricerche. Proviamo ad aggiungere un titolo.

Esercizio - Modificare l'intestazione

5 index.html > html 1 <! DOCTYPE html> 2 <html lang="it"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Corso HTML - E. FERMI</title> 7 8 </head> 9 <body> 10 11 </body> 12 </html>

Esercizio - Modificare l'intestazione

Per applicare gli stili agli elementi HTML nella pagina Web, si potrebbe scrivere il codice CSS direttamente nell'intestazione della pagina Web. Questo tipo di codice è denominato CSS interno. Tuttavia, è consigliabile separare la struttura HTML e lo stile CSS. L'uso di una pagina CSS separata viene detto CSS esterno. È possibile usare uno o più fogli di stile esterni per più pagine Web. Invece di aggiornare ogni pagina HTML con codice CSS replicato, è possibile apportare le modifiche a un singolo file CSS e applicare gli aggiornamenti a tutte le pagine Web dipendenti. Creiamo un collegamento a un foglio di stile esterno.