1 of 96

Web Development

HTML

FB - 12.2023 - v1.0 (new)

2 of 96

Web Development

Progettazione, sviluppo e manutenzione di siti web, utilizzando tecnologie come HTML, CSS, JavaScript. Creazione di esperienze utente uniche e funzionali, che soddisfino le esigenze degli utenti e dei proprietari del sito web.

2

3 of 96

Indice

Struttura e layout delle pagine

Elementi strutturali Html5
Layout
hero section

Form e Contenuti Multimediali

Form
Audio e video

Concetti avanzati

L’elemento div
Frames

Esercitazioni

-------------

4 of 96

Introduzione

4

5 of 96

Approfondimenti

5

6 of 96

Web development

Il web development è un processo che si occupa dello sviluppo e della creazione di siti web, applicazioni web e servizi online. Inclusi la progettazione, la programmazione, il testing e la manutenzione delle piattaforme web. Il web development si basa su una combinazione di tecnologie, tra cui HTML, CSS, JavaScript e altri linguaggi di programmazione come PHP, Python e Ruby. L'obiettivo principale del web development è quello di creare un'esperienza utente efficace e intuitiva per gli utenti che visitano un sito web.

6

7 of 96

Internet

L'inizio di Internet risale agli anni '60, quando il Dipartimento della Difesa degli Stati Uniti ha sviluppato una rete di computer chiamata ARPANET per condividere informazioni tra le università e le agenzie governative.

Nel corso degli anni '70 e '80, ARPANET si è espansa e ha evoluto in una rete globale di computer nota come Internet. Nel 1983, il protocollo TCP/IP (Transmission Control Protocol/Internet Protocol) è stato formalmente adottato come standard per la comunicazione tra i computer in Internet.

Nel 1991, nasce il World Wide Web (WWW), un sistema di informazione ipertestuale accessibile da qualsiasi luogo del mondo.

Nel corso degli anni '90, Internet è diventato sempre più popolare e accessibile a un pubblico più ampio. La nascita di browser web come Mosaic e Netscape Navigator ha reso possibile la navigazione semplice e intuitiva dei siti web. Nel 2000, Google è diventato il motore di ricerca più popolare, rendendo ancora più facile per gli utenti trovare le informazioni desiderate su Internet.

Oggi, Internet è una parte integrante della vita quotidiana e del commercio globale, con miliardi di utenti in tutto il mondo che lo utilizzano per comunicare, imparare, intrattenere e molto altro. La storia di Internet continua ad evolversi e ad avere un impatto sempre più significativo sulla società.

7

8 of 96

Le pagine web

La storia delle pagine web ha inizio nel 1989, quando Sir Tim Berners-Lee, un ingegnere del CERN (Organizzazione Europea per la Ricerca Nucleare), ha proposto l'idea di un sistema di informazione ipertestuale che potesse essere accessibile da qualsiasi luogo del mondo.

Nel 1991, il 6 agosto, Sir Tim ha presentato la prima versione del World Wide Web, che consisteva in un browser web semplice e un linguaggio di markup (HyperText Markup Language - HTML) per creare pagine web interattive. Il primo sito web è stato pubblicato nello stesso anno all'indirizzo http://info.cern.ch/hypertext/WWW/TheProject.html.

Negli anni successivi, il World Wide Web ha continuato a evolversi e migliorare. Il CSS (Cascading Style Sheets) è stato introdotto nel 1996 per gestire il design e l'aspetto visivo delle pagine web. Il JavaScript, un linguaggio di programmazione per il lato client, è stato introdotto nel 1995 e ha reso possibile la creazione di pagine web dinamiche e interattive.

Con l'aumento della velocità della connessione Internet e della potenza di elaborazione dei computer, il web è diventato sempre più importante nella vita quotidiana e commerciale. Oggi, il web è utilizzato per molte attività, tra cui la comunicazione, lo shopping, l'intrattenimento, l'educazione, la ricerca e molto altro ancora. La storia delle pagine web continua ad evolversi e a migliorare ogni giorno.

8

9 of 96

front-end e back-end

Il front-end, o sviluppo lato client, si riferisce alla parte dello sviluppo web che si occupa dell'interfaccia utente e dell'esperienza dell'utente di un sito web. Ciò include la struttura, il design e la percezione generale di un sito web, nonché il modo in cui gli utenti lo interagiscono. Gli sviluppatori front-end utilizzano linguaggi come HTML, CSS e JavaScript per creare l'aspetto e la sensazione di un sito web e per assicurarsi che venga visualizzato correttamente in diversi browser web.

Il back-end, o sviluppo lato server, si occupa invece della parte "non visibile" del funzionamento di un sito web. Ciò include cose come script lato server, database e logica applicativa. Gli sviluppatori back-end utilizzano linguaggi come PHP, Python, Ruby e Java per costruire il back-end di un sito web, che comunica con il front-end e i database per fornire i dati e i contenuti corretti agli utenti.

Il termine sviluppo full stack si riferisce a sviluppatori in grado di lavorare sia sul front-end che sul back-end di un sito web, in grado di creare siti web completi e funzionali dall'inizio alla fine.

9

10 of 96

Siti web statici e dinamici

I siti web possono essere classificati in base alla loro capacità di generare contenuti. Ci sono principalmente due tipi di siti web: statici e dinamici.

Siti web statici: sono siti web i cui contenuti non cambiano. Ogni pagina del sito è scritta in modo statico, ovvero in HTML puro, e gli stessi contenuti vengono visualizzati per tutti gli utenti che accedono alla pagina. I siti web statici vengono solitamente utilizzati per siti che non richiedono un'interazione frequente con l'utente, come siti aziendali o di portfolio, o per siti che vengono aggiornati solo occasionalmente.

Siti web dinamici: sono siti web i cui contenuti cambiano in base all'input dell'utente o a condizioni specifiche. La dinamicità può essere ottenuta utilizzando linguaggi di programmazione lato server, come PHP o Python, che generano dinamicamente il contenuto della pagina. I siti web dinamici sono spesso utilizzati per siti che richiedono una maggiore interazione con l'utente, come forum, siti di e-commerce, social network, e molti altri.

In un sito web dinamico è in grado di creare contenuti o pagine specifiche in base all'input dell'utente o a specifiche situazioni, anche utilizzando database per salvare informazioni di stato.

In generale, i siti web dinamici sono più complessi da creare e mantenere rispetto ai siti web statici, ma offrono funzionalità aggiuntive che possono essere necessarie per alcuni tipi di siti.

10

11 of 96

Le tecnologie web (HTML, CSS, JavaScript)

HTML, CSS e JavaScript sono tre delle tecnologie fondamentali utilizzate nello sviluppo web.

HTML (Hypertext Markup Language) è il linguaggio di marcatura principale utilizzato per creare le strutture delle pagine web. Gli sviluppatori utilizzano tag HTML per definire i titoli, i paragrafi, le immagini e altri elementi della pagina. HTML definisce la struttura logica della pagina, ad esempio un'intestazione, un contenitore di un articolo, un menu di navigazione.
CSS (Cascading Style Sheets) è utilizzato per dare stile e formattazione alle pagine web. Con CSS, gli sviluppatori possono modificare il colore, il font, la disposizione e molti altri aspetti dell'aspetto della pagina. CSS permette di separare la presentazione (aspetto) dalla struttura (HTML), rendendo più facile la manutenzione e l'aggiornamento dello stile della pagina senza dover toccare il codice HTML.
JavaScript è un linguaggio di programmazione utilizzato per creare funzionalità interattive e dinamiche su una pagina web. Ad esempio, JavaScript può essere utilizzato per creare form di input, pulsanti di condivisione sui social media e effetti di animazione. JavaScript permette di aggiungere logica e comportamento alle pagine web rendendole più interattive e dinamiche.

In generale, HTML definisce la struttura della pagina, CSS ne regola l'aspetto e JavaScript ne aggiunge interattività e dinamicità. Queste tre tecnologie lavorano insieme per creare una pagina web completa e funzionale.

11

12 of 96

Concetti di base

Il web development è un campo in continua evoluzione, ma ci sono alcuni concetti di base che sono importanti per capire come funzionano i siti web e come vengono creati:

HTTP (Hypertext Transfer Protocol): è il protocollo utilizzato per trasferire informazioni su Internet. Quando un utente inserisce un URL in un browser, il browser invia una richiesta HTTP al server per ottenere la pagina web richiesta. Il server risponde inviando la pagina web al browser, che la visualizza all'utente.
Browser: sono i programmi utilizzati per visualizzare le pagine web. I browser più comuni sono Google Chrome, Firefox, Safari e Internet Explorer. Gli sviluppatori devono tenere conto delle differenze tra i browser per assicurarsi che le loro pagine web vengano visualizzate correttamente su tutti i browser.
Server: sono i computer che ospitano i siti web e rispondono alle richieste dei browser. I server possono essere configurati in modo da eseguire diverse attività, come la gestione dei database o l'elaborazione dei dati.
Database: sono archivi di dati utilizzati per archiviare informazioni su un sito web, come i dati degli utenti, i contenuti delle pagine e altre informazioni. I database possono essere utilizzati con i linguaggi di programmazione lato server per recuperare, modificare e memorizzare i dati.

12

13 of 96

14 of 96

15 of 96

16 of 96

Il protocollo HTTP

16

17 of 96

18 of 96

19 of 96

20 of 96

21 of 96

22 of 96

23 of 96

24 of 96

I Cookies

24

25 of 96

26 of 96

27 of 96

28 of 96

Il linguaggio HTML e gli standard

HTML (HyperText Markup Language) è un linguaggio di marcatura (non è un linguaggio di programmazione) che viene utilizzato per creare pagine web. Il codice HTML descrive la struttura e il contenuto di una pagina web, specificando come i vari elementi devono essere visualizzati sul browser web. Gli elementi HTML sono definiti da etichette (o tag), che vengono racchiusi tra parentesi angolari.

Gli standard HTML sono stati sviluppati per la prima volta nel 1990 da Tim Berners-Lee, che ha creato HTML per dare struttura ai documenti sul World Wide Web. La prima versione di HTML, HTML 1.0, è stata pubblicata nel 1993 ed è stata seguita da molte altre versioni, ognuna delle quali ha introdotto nuove funzionalità e strumenti per creare documenti web più avanzati e interattivi.

Nel 1996 è stata fondata l'Organizzazione per la Standardizzazione del Web (W3C), che si è impegnata a definire e mantenere gli standard HTML e altri standard web. Il W3C ha continuato a pubblicare nuove versioni di HTML, come HTML 4.0 nel 1997 e HTML5 nel 2014, che hanno introdotto importanti funzionalità come il supporto per i media come video e audio, e l'introduzione di API per l'elaborazione di dati sul lato client.

Gli standard HTML sono essenziali per la creazione di siti web moderni e accessibili. Essi forniscono una struttura e una sintassi standardizzate per il contenuto e il layout dei siti web, che aiutano a garantire che i siti siano visualizzati correttamente su tutti i browser web e su tutti i dispositivi, indipendentemente dalla piattaforma o dalle capacità tecnologiche dell'utente.

28

29 of 96

HTML5

HTML5 è la quinta revisione del linguaggio di markup HTML (HyperText Markup Language). È il linguaggio standard utilizzato per strutturare e presentare il contenuto delle pagine web. HTML5 è stato sviluppato per migliorare le funzionalità, la compatibilità con i dispositivi mobili e l'interattività delle pagine web.

Le caratteristiche principali di HTML5 includono:

Nuovi elementi semantici: HTML5 introduce una serie di nuovi elementi semantici, come <header>, <nav>, <article>, <section>, <aside>, <footer>, che consentono di strutturare il contenuto in modo più significativo e comprensibile per i motori di ricerca e gli sviluppatori.
Supporto per contenuti multimediali: HTML5 supporta nativamente l'inclusione di elementi multimediali come video e audio, senza la necessità di plugin esterni. Vengono introdotti i tag <video> e <audio> per incorporare e controllare i file multimediali direttamente nella pagina web.
Grafica e animazioni: HTML5 introduce il tag <canvas> che permette di creare grafica e animazioni 2D e 3D utilizzando JavaScript. Inoltre, sono introdotti nuovi elementi come <svg> per la grafica vettoriale scalabile.
Supporto per la memorizzazione locale: HTML5 introduce il concetto di Web Storage che consente ai siti web di memorizzare dati in modo locale sul dispositivo dell'utente, consentendo un accesso più rapido e una migliore esperienza utente.
Supporto per la geolocalizzazione: HTML5 fornisce una API per accedere alle informazioni sulla posizione geografica dell'utente, consentendo ai siti web di fornire contenuti e funzionalità personalizzate in base alla posizione dell'utente.
Miglioramenti per l'accessibilità: HTML5 introduce nuovi attributi e tecniche per migliorare l'accessibilità delle pagine web, consentendo una migliore fruibilità per utenti con disabilità visive o motorie.

HTML5 ha rivoluzionato lo sviluppo web, consentendo di creare pagine web più ricche di contenuti, interattive e compatibili con una vasta gamma di dispositivi. È ampiamente supportato dai moderni browser web e offre una vasta gamma di funzionalità per lo sviluppo di siti web avanzati.

29

30 of 96

Ambiente di sviluppo

30

31 of 96

Approfondimenti

31

32 of 96

Ambiente di sviluppo per pagine web

Ci sono diversi strumenti che possono essere utilizzati per questo scopo, tra cui:

Editor di testo: è un software utilizzato per modificare i file di codice sorgente. Esistono molti editor di testo popolari tra cui scegliere, come Sublime Text, Atom, Visual Studio Code, Notepad++.
Browser: è il software utilizzato per visualizzare i siti web. I browser più comuni sono Google Chrome, Mozilla Firefox, Safari e Microsoft Edge.
Strumenti di sviluppo del browser: sono strumenti integrati nei browser per aiutare gli sviluppatori a debug e ispezionare il codice. Tra questi strumenti: la console JavaScript, l'ispezione degli elementi, e il controllo dei network.
Git: è un sistema di controllo versione utilizzato per gestire le modifiche al codice sorgente.
Servizi di hosting: sono servizi utilizzati per ospitare i siti web su Internet. Ci sono diversi servizi di hosting disponibili, tra cui GitHub Pages, Heroku, AWS, e molti altri.
Framework e librerie: ci sono diverse librerie e framework che possono essere utilizzati per semplificare il processo di sviluppo front-end, come Bootstrap, Foundation, Materialize, React, Angular, Vue.js
Strumenti per il testing e la performance: sono utilizzati per testare il codice e valutare le prestazioni del sito web, tra cui Jest, Mocha, Selenium, Lighthouse

32

33 of 96

Code playground

I code playground sono ambienti di sviluppo web interattivi che permettono agli sviluppatori di scrivere, eseguire e testare il codice HTML, CSS e JavaScript direttamente nel browser, senza la necessità di impostare un ambiente di sviluppo locale. Questi ambienti sono solitamente semplici da usare e offrono una vasta gamma di strumenti per la modifica e il testing del codice in tempo reale.

StackBlitz
CodeSandbox
CodePen
JSFiddle (login non necessario)
Playcode.io (login non necessario)
Replit
Codeply
JsBin
Plunker
Glitch (react, electron)

33

34 of 96

Editor WYSIWYG

Gli editor WYSIWYG sono programmi che permettono di creare e modificare pagine web senza conoscere i linguaggi di markup HTML, CSS e JavaScript. WYSIWYG significa "What You See Is What You Get" (Ciò che vedi è ciò che ottieni), il che significa che ciò che vedi sullo schermo mentre utilizzi l'editor è ciò che gli utenti vedranno quando accederanno alla pagina web.

Offrono un'interfaccia grafica semplice e intuitiva che consente agli utenti di creare e modificare le pagine web utilizzando elementi visivi come pulsanti, immagini, testo e tabelle. Questi editor generano automaticamente il codice HTML, CSS e JavaScript necessario per la visualizzazione della pagina web.

https://toolset.mrw.it/html/editor-html.html

34

35 of 96

Servizi di hosting

I servizi di hosting consentono agli utenti di ospitare i propri siti web o le proprie applicazioni web su server accessibili tramite Internet. Mettono a disposizione degli utenti una quantità di spazio sul server per memorizzare i file del sito web o dell'applicazione web, oltre a fornire connettività Internet, sicurezza, backup e supporto tecnico.

Ecco alcuni servizi di hosting gratuito

Altervista.org è uno dei servizi di hosting gratuiti italiani più famosi. Offre hosting per siti web basati su Wordpress, Joomla e Drupal, oltre a una serie di altre piattaforme.
Netlify
Glitch
OCI - Creare un server su Oracle Cloud Infrastructure (OCI) per ospitare un server web personale.

35

36 of 96

Fondamenti di Html5

36

37 of 96

Approfondimenti

37

38 of 96

Struttura HTML di base

38

39 of 96

Struttura di base di un documento HTML

La struttura di base di un documento HTML comprende diversi elementi fondamentali. Ecco un esempio di struttura di base di un documento HTML:

<!DOCTYPE html>

<html>

<head>

<title>Titolo della pagina</title>

</head>

<body>

</body>

</html>

<!DOCTYPE html>: indica che il documento è scritto in HTML5; <html>: Questo elemento racchiude tutto il contenuto del documento HTML; <head>: Questo elemento contiene metadati e informazioni sul documento, come il titolo della pagina, collegamenti a fogli di stile CSS e script JavaScript, caratteristiche di visualizzazione e altro ancora; <title>: Questo elemento definisce il titolo della pagina che verrà visualizzato nella barra del titolo del browser o in altre aree in cui vengono visualizzati i titoli delle pagine; <body>: Questo elemento contiene il contenuto visibile della pagina, come testo, immagini, link, tabelle e altri elementi HTML.

39

40 of 96

Sintassi degli elementi HTML

La sintassi generale per un elemento HTML è la seguente:

<tag attributo1="valore1" attributo2="valore2">Contenuto dell'elemento</tag>

Dove:

<tag> rappresenta il nome dell'elemento HTML, come "div", "p", "a", "img", ecc.
Gli attributi sono opzionali e vengono utilizzati per fornire informazioni aggiuntive sull'elemento.
"valore" rappresenta il valore dell'attributo.
Il contenuto dell'elemento è il testo o altri elementi HTML all'interno dell'elemento di apertura e chiusura.

40

41 of 96

Tag annidati

Nei documenti HTML, è comune annidare tag, ovvero posizionarne uno all'interno di un altro. Questa pratica è essenziale per la corretta strutturazione e formattazione delle pagine web. Ecco un esempio di tag HTML annidati:

<body>

<div>

<p>Questo è un paragrafo all'interno di un div.</p>

<ul>

<li>Elemento 1</li>

<li>Elemento 2</li>

</ul>

</div>

</body>

All'interno del <body>, c'è un tag <div> che racchiude un paragrafo <p> e una lista non ordinata <ul>. La lista non ordinata <ul> contiene due elementi di lista <li>

L'annidamento è importante perché aiuta a organizzare e strutturare il contenuto in maniera gerarchica. Ad esempio, il paragrafo e la lista sono entrambi contenuti nel <div>. Quando si applicano stili o si manipola il DOM utilizzando JavaScript, la struttura annidata può influenzare il comportamento e l'aspetto degli elementi.

41

42 of 96

Tag vuoti

In HTML5, i tag vuoti (o autochiusi) sono quei tag che non hanno bisogno di un tag di chiusura separato e terminano con uno slash (/) prima della parentesi angolare di chiusura. Questi tag rappresentano elementi che non hanno contenuto ma sono essenziali per la struttura o la presentazione della pagina web. Di seguito sono riportati alcuni esempi:

<br>: Interruzione di linea.

<img>: Incorporamento di un'immagine.

<hr>: Rappresenta una riga orizzontale.

<input>: Utilizzato nei moduli per creare campi di input.

In XML, i tag vuoti possono essere rappresentati utilizzando la notazione "self-closing" che termina il tag con uno slash ("/") immediatamente prima della parentesi angolare di chiusura. Ad esempio:

<br />

<hr />

Nel contesto di HTML5, è accettabile omettere la barra inclinata finale in questi casi. Entrambe le forme (con o senza la barra inclinata finale) sono considerate valide e produrranno lo stesso risultato. Ad esempio, <br> e <br /> sono entrambi accettati in HTML5. Tuttavia, è comune vedere la forma più breve senza la barra inclinata finale per la maggior parte dei tag vuoti in HTML5.

42

43 of 96

Esempio pratico: creazione di una pagina HTML di base

Per creare una pagina HTML di base, è necessario conoscere i principali tag HTML e come utilizzarli. Ecco un esempio di come potrebbe essere strutturata una pagina HTML di base (link al codice):

<!DOCTYPE html>

<html>

<head>

<title>Pagina di esempio</title>

</head>

<body>

<h1>Titolo della pagina</h1>

<p>Questo è un paragrafo di esempio.</p>

<p>Uno spazio due spazi     .

Per andare a capo <br> Serve il tag <br>

</p>

<p>Un'altro paragrafo.</p>

<ul>

</ul>

</body>

</html> img

43

44 of 96

Esempio pratico: creazione di una pagina HTML di base

Ecco una breve descrizione di ciò che ciascuno di questi tag fa:

<!DOCTYPE>: specifica il tipo di documento HTML.
<html>: indica l'inizio della pagina HTML.
<head>: contiene informazioni sulla pagina, come il titolo (che viene visualizzato nella scheda del browser) e i link ai fogli di stile.
<title>: indica il titolo della pagina.
<body>: contiene tutto il contenuto della pagina.
<h1>: indica un'intestazione di primo livello. Ci sono anche tag per intestazioni di livello inferiore, come <h2>, <h3>, etc.
<p>: indica un paragrafo.
<ul>: indica una lista non ordinata.
<li>: indica un elemento della lista.
<img>: incorpora un'immagine nella pagina. Il tag richiede l'attributo src per specificare il percorso dell'immagine e l'attributo alt per descrivere l'immagine.

Una volta creato il codice HTML, è possibile salvarlo come un file con estensione ".html" e aprirlo con un browser web per vedere il risultato.

44

45 of 96

I tag head e body

45

46 of 96

ref

47 of 96

Il tag body

Il tag <body> è uno degli elementi fondamentali in HTML e rappresenta il contenuto principale del documento HTML. È un elemento di livello di blocco che contiene tutti gli elementi visibili sullo schermo, come testo, immagini, link, tabelle, form e altro ancora.

All'interno del tag <body> puoi inserire tutti gli elementi HTML che compongono il contenuto visibile della pagina. Puoi creare la struttura della pagina utilizzando elementi di sezione come <header>, <main>, <footer>, <nav>, <section>, ecc. Puoi anche incorporare contenuti multimediali come immagini, audio e video, creare tabelle, form e altri elementi interattivi.

In breve, il tag <body> definisce l'area del documento HTML in cui viene visualizzato il contenuto effettivo della pagina. È il punto di partenza per creare la struttura e il layout del tuo sito web, nonché per inserire il contenuto visibile agli utenti.

47

48 of 96

Testo e Formattazione

48

49 of 96

Approfondimenti

49

50 of 96

I tag hyperlink e immagine

50

51 of 96

Il tag hyperlink

Il tag "a" in HTML è utilizzato per creare un collegamento ipertestuale o hyperlink, che permette ai visitatori di un sito web di navigare verso altre pagine web, file, sezioni della stessa pagina o ancoraggi all'interno di una pagina web.

La sintassi di base del tag "a" è la seguente:

<a href="url">testo del collegamento</a>

Il parametro "href" specifica l'URL di destinazione del collegamento, che può essere un'altra pagina web, un file, una sezione della stessa pagina o un ancoraggio. Il testo del collegamento è ciò che appare come link sulla pagina web.

Ad esempio, il seguente codice HTML crea un link ipertestuale alla pagina principale di Google:

<a href="https://www.google.com/">Visita Google</a>

Quando un visitatore fa clic sul link, il browser lo reindirizza alla pagina principale di Google.

51

52 of 96

Il tag hyperlink

Il tag "a" può essere utilizzato anche per creare un ancoraggio o "bookmark" all'interno di una pagina web. In pratica, un ancoraggio è un punto di riferimento all'interno della stessa pagina a cui si può accedere attraverso un link.

Per creare un ancoraggio, è necessario aggiungere l'attributo "name" o "id" ad un elemento HTML, come ad esempio un titolo, una sezione o un paragrafo. L'attributo deve contenere un identificatore univoco all'interno della pagina, ad esempio:

<h2 id="sezione1">Sezione 1</h2>

Una volta creato l'ancoraggio, è possibile creare un link alla sezione utilizzando l'attributo "href" del tag "a" seguito dal simbolo "#" e dall'identificatore dell'ancoraggio, ad esempio:

<a href="#sezione1">Vai alla sezione 1</a>

Quando un visitatore fa clic sul link, il browser scorre automaticamente verso l'ancoraggio, posizionandolo al centro o in cima alla finestra del browser, a seconda della sua posizione all'interno della pagina.

Si noti che l'identificatore dell'ancoraggio deve essere univoco all'interno della pagina web e non deve contenere spazi o caratteri speciali. Inoltre, l'attributo "id" può essere utilizzato anche per applicare stili CSS o JavaScript all'elemento corrispondente.

https://kinsta.com/it/blog/come-rendere-link-cliccabile/

52

53 of 96

Il tag img

Il tag "img" in HTML viene utilizzato per inserire un'immagine all'interno di una pagina web. Questo tag è uno dei tag più comuni in HTML, poiché le immagini sono uno dei modi più efficaci per comunicare visivamente con gli utenti.

La sintassi di base del tag "img" è la seguente:

L'attributo "src" specifica l'URL dell'immagine da caricare. L'attributo "alt" fornisce un testo alternativo per l'immagine, che viene visualizzato quando l'immagine non può essere caricata, quando il cursore del mouse viene posizionato sopra l'immagine o quando gli utenti che utilizzano uno screen reader accedono alla pagina web.

Ad esempio, il seguente codice HTML inserisce un'immagine di un gatto all'interno di una pagina web:

Si noti che l'attributo "src" può essere un percorso relativo o assoluto. Se l'immagine si trova nella stessa cartella della pagina web, è possibile specificare solo il nome dell'immagine. In caso contrario, è necessario specificare il percorso completo dell'immagine.

Inoltre, è possibile utilizzare altri attributi dell'immagine, come "width" e "height", per specificare la larghezza e l'altezza dell'immagine in pixel, o "title", per fornire un testo descrittivo aggiuntivo quando il cursore del mouse viene posizionato sopra l'immagine.

https://www.tutorialrepublic.com/html-tutorial/html-images.php

53

54 of 96

Gestione del testo

54

55 of 96

Gestione del testo

La gestione del testo in HTML coinvolge l'utilizzo di vari elementi e attributi per formattare, strutturare e stilizzare il testo all'interno di una pagina web. Ecco alcuni concetti chiave relativi alla gestione del testo in HTML:

Paragrafi (<p>): Il tag <p> è utilizzato per definire i paragrafi. Ogni nuovo paragrafo dovrebbe essere racchiuso in un tag <p>.

<p>Questo è un paragrafo.</p>

<p>Questo è un altro paragrafo.</p>

Intestazioni (<h1> - <h6>): I tag di intestazione vanno da <h1> (il più grande) a <h6> (il più piccolo) e sono utilizzati per definire i livelli di titoli e sottotitoli.

<h1>Titolo Principale</h1>

<h2>Sottotitolo</h2>

55

56 of 96

Gestione del testo

Testo in Grassetto (<strong>) e Corsivo (<em>): Il tag <strong> è utilizzato per evidenziare il testo in grassetto, mentre <em> è utilizzato per evidenziare il testo in corsivo.

<p>Questo è un <strong>testo in grassetto</strong>.</p>

<p>Questo è un <em>testo in corsivo</em>.</p>

Sottolineato (<u>): Il tag <u> viene utilizzato per applicare lo stile di sottolineatura al testo.

<p>Questo testo è <u>sottolineato</u>.</p>

Citazioni (<blockquote> e <q>): <blockquote> è utilizzato per citazioni di testo più lunghe, mentre <q> è per citazioni più brevi.

Questa è una citazione più lunga.

</blockquote>

<p>Un famoso detto è: <q>La conoscenza è potere</q>.</p>

56

57 of 96

Gestione del testo

Il tag <br> crea un'interruzione di linea, utile per andare a capo senza creare un nuovo paragrafo.

<p>Prima riga.<br>Seconda riga.</p>

Il tag <hr> in HTML viene utilizzato per inserire una riga orizzontale (horizontal rule o linea orizzontale) all'interno della pagina. Questo tag non ha tag di chiusura e viene spesso utilizzato per separare visivamente le sezioni di contenuto o per indicare una transizione tra diverse parti di una pagina web.

<p>Questo è un paragrafo.</p>

<hr>

<p>Questo è un altro paragrafo.</p>

57

58 of 96

Gestione del testo

Liste (<ul>, <ol>, <li>): I tag <ul> e <ol> creano rispettivamente elenchi non ordinati e ordinati, mentre <li> definisce gli elementi di lista.

<ul>

<li>Elemento 1</li>

<li>Elemento 2</li>

</ul>

<ol>

<li>Primo</li>

<li>Secondo</li>

</ol>

58

59 of 96

Caratteri speciali

59

60 of 96

Caratteri speciali

In HTML, alcuni caratteri hanno un significato speciale e non possono essere utilizzati direttamente all'interno del testo di una pagina web senza essere interpretati in modo errato. Per rappresentare questi caratteri speciali, è possibile utilizzare entità HTML o codici di escape. Di seguito sono riportati alcuni esempi di caratteri speciali comuni e le loro rappresentazioni HTML:

<: Meno di (<)

>: Maggiore di (>)

&: E commerciale (&)

": Doppio apice (")

': Apostrofo (')

elenco completo

Ad esempio, per inserire il simbolo "&" in una pagina HTML, è necessario utilizzare &. Questo garantisce che il browser interpreti correttamente il carattere senza confonderlo con l'inizio di un'entità HTML.

Inoltre, esistono entità HTML per caratteri speciali come © (©), ® (®), e così via.

Utilizzare entità HTML o codici di escape è una pratica comune per garantire che i caratteri speciali vengano visualizzati correttamente nelle pagine web e per evitare problemi di interpretazione.

60

61 of 96

Approfondimenti

Tabella HTML, il tag : struttura di base e complessa

Esempio completo

61

62 of 96

Struttura e layout delle pagine

62

63 of 96

Elementi strutturali Html5

63

64 of 96

Elementi strutturali Html5

HTML5 specifica diversi elementi strutturali che si possono utilizzare per organizzare e strutturare il contenuto di una pagina web. Ecco alcuni degli elementi strutturali più comuni:

64

65 of 96

Elementi strutturali Html5

HTML5 specifica diversi elementi strutturali che si possono utilizzare per organizzare e strutturare il contenuto di una pagina web. Ecco alcuni degli elementi strutturali più comuni:

<header>: Rappresenta l'intestazione o il banner superiore di una pagina o di una sezione specifica.
<nav>: Rappresenta una sezione di navigazione che contiene link o menu di navigazione.
<main>: Rappresenta il contenuto principale di una pagina. È consigliabile utilizzare questo elemento solo una volta all'interno di un documento HTML.
<article>: Rappresenta un'area autonoma di contenuto che può essere considerata indipendentemente dal resto del documento. Ad esempio, può rappresentare un post di un blog o un articolo di notizie.
<section>: Rappresenta una sezione generica o un gruppo di contenuti correlati. Può essere utilizzato per suddividere il contenuto in parti distintive.
<aside>: Rappresenta una sezione di contenuto che è correlata al contenuto principale, ma può essere considerata separata da esso. Ad esempio, può contenere barre laterali, box promozionali o contenuti correlati.
<footer>: Rappresenta il piè di pagina di una pagina o di una sezione specifica. Solitamente contiene informazioni di contatto, link legali o altre informazioni di riferimento.
<hgroup>: È un elemento deprecato in HTML5 e non viene più consigliato l'uso. In precedenza veniva utilizzato per raggruppare gli elementi di intestazione (<h1>, <h2>, ecc.) in un unico gruppo.

L'uso appropriato di questi elementi può migliorare l'accessibilità, la semantica e la comprensione del codice HTML. È importante notare che l'uso corretto degli elementi strutturali dipende dal contesto e dalla struttura del tuo contenuto.

65

66 of 96

Layout

66

67 of 96

Tabelle e Layout

Nella progettazione moderna delle pagine web, è sconsigliato utilizzare le tabelle HTML per creare i layout delle pagine. Le tabelle sono state originariamente concepite per mostrare dati tabulari e non per la struttura del layout della pagina.

Ci sono diverse ragioni per evitare di utilizzare le tabelle per i layout:

Prestazioni: Le tabelle richiedono un maggior carico di lavoro al browser per renderizzare la pagina. Questo può comportare tempi di caricamento più lunghi, specialmente su dispositivi mobili o connessioni lente.
Manutenibilità: Utilizzare tabelle per i layout rende il codice HTML più complesso e difficile da gestire. È più complicato apportare modifiche al layout o aggiungere nuovi contenuti. Inoltre, può essere difficile mantenere la separazione tra struttura (HTML), presentazione (CSS) e comportamento (JavaScript) nel caso di layout basati su tabelle.
Accessibilità: Le tabelle di layout possono creare problemi di accessibilità per gli utenti con disabilità, come lettori di schermo o dispositivi di assistenza. Un layout ben strutturato utilizzando gli elementi semantici appropriati permette una migliore accessibilità per tutti gli utenti.

Invece di utilizzare tabelle per i layout, si consiglia di utilizzare le tecniche di layout CSS, come Flexbox o CSS Grid, che offrono maggiore flessibilità, prestazioni migliorate e facilità di manutenzione. Questo consente di creare layout moderni e responsivi per le pagine web. Le tabelle dovrebbero essere riservate esclusivamente alla presentazione di dati tabulari, come tabelle di dati o calcoli complessi.

67

68 of 96

Hero section

Le sezioni principali di un sito web possono variare a seconda del tipo di sito e del suo scopo, ma in generale possiamo individuare alcune sezioni comuni a molti siti web. Servono a organizzare i contenuti in modo logico e a rendere la navigazione più facile per gli utenti. Ecco alcune delle sezioni principali di un sito web:

Header: è la sezione in alto della pagina, che contiene il logo del sito, il menu di navigazione e altre informazioni importanti
Hero section: è la sezione principale del sito, che ha lo scopo di attirare l'attenzione degli utenti e di presentare il messaggio principale del sito
Body: è la sezione centrale del sito, che contiene i contenuti principali, come il testo, le immagini e i video
Footer: è la sezione in basso della pagina, che contiene informazioni aggiuntive sul sito, come i contatti, i link alle pagine principali e altre informazioni utili
Sidebar: è una sezione laterale del sito, che può contenere informazioni aggiuntive, come i link alle pagine correlate, i widget e altre informazioni
Navigazione: è la sezione che permette di navigare tra le diverse pagine del sito web
Contatti: è la sezione che contiene le informazioni di contatto del sito, come l'indirizzo email, il numero di telefono e l'indirizzo fisico
Social media: è la sezione che contiene i link ai profili social del sito

Queste sono solo alcune delle sezioni principali di un sito web, ma la loro presenza e organizzazione dipendono dal tipo di sito e dal suo scopo.

68

69 of 96

Hero section

La hero section è una parte fondamentale del web design e della progettazione di un sito web che si trova all'inizio di una pagina web e ha lo scopo di catturare l'attenzione dell'utente e di comunicare efficacemente il messaggio principale del sito. Solitamente, la hero section include immagini, testo e/o video di grande impatto visivo con l'obiettivo di creare un'esperienza coinvolgente per l'utente. In alcuni casi, la hero section può assumere anche funzioni interattive, come ad esempio una form di registrazione o una ricerca. ^[¹^]

69

70 of 96

Approfondimenti

70

71 of 96

Form e Contenuti Multimediali

71

72 of 96

Form

72

73 of 96

Form

I form HTML sono uno strumento fondamentale per interagire con gli utenti attraverso le pagine web. Essi consentono agli sviluppatori di creare moduli che gli utenti possono compilare e inviare con le informazioni desiderate.

Un form HTML è costituito da una serie di elementi, tra cui campi di input, bottoni e menu a discesa, che consentono agli utenti di inserire dati. Quando un utente compila un form e lo invia, i dati vengono inviati al server web per l'elaborazione o l'archiviazione.

Tag <form> racchiude tutto il contenuto del form e ne definisce l'inizio e la fine. L’ attributo “action” specifica l'URL del server o lo script che elaborerà i dati del form. L'attributo “method” specifica il metodo di invio dei dati del form al server, come "GET" o "POST".

</form>

73

74 of 96

Elementi presenti all’interno dei Form

<input> è l'elemento più utilizzato per creare campi di input, come campi di testo, checkbox, radio button, pulsanti di invio, ecc.
<label> per associare un'etichetta ad un campo di input.
<textarea> rappresenta un controllo di modifica di testo in formato testo normale a più righe, utile quando si vuole consentire agli utenti di inserire una quantità considerevole di testo libero.
<option> viene utilizzato per definire un elemento contenuto in un <select>, un <optgroup> o un <datalist>.

<datalist> per fornire un elenco di opzioni predefinite per un campo di input.
<select>: per creare menu a tendina.

<optgroup> crea un raggruppamento di opzioni all'interno di un elemento <select>

<button> è un elemento interattivo attivato dall'utente con un mouse, una tastiera, un dito, un comando vocale o altre tecnologie assistive. Una volta attivato, esegue un'azione, come l'invio di un form o l'apertura di una finestra di dialogo.
<fieldset> per raggruppare elementi del form.

<legend> per definire il titolo di un gruppo di elementi del form (<fieldset>).

<output> per visualizzare il risultato di un calcolo o di un'operazione in un campo di output.
<progress> e <meter> per visualizzare una barra di avanzamento.

74

75 of 96

Elementi Input presenti all’interno dei Form

All’interno del tag <form> troviamo diversi tipi di elementi <input> che possono essere utilizzati all'interno di un form, come ad esempio: [ref1, ref2]

<input type="text"> per inserire testo
<input type="password"> per inserire password
<input type="radio"> per selezionare una sola opzione tra diverse
<input type="checkbox"> per selezionare una o più opzioni tra diverse
<input type="submit"> per inviare i dati del form
…

75

76 of 96

Nuovi tipi di input introdotti con HTML5

HTML5 ha introdotto diversi nuovi tipi di input che hanno migliorato significativamente la funzionalità e l'usabilità dei form. Ecco un elenco dei principali nuovi tipi di input introdotti con HTML5 (esempio completo):

Color: consente di selezionare un colore da una tavolozza di colori predefiniti o direttamente dal suo codice in #esadecimale.
Date: consente di selezionare una data tramite un calendario.
Datetime: consente di selezionare una data e un'ora tramite un calendario.
Datetime-local: consente di selezionare una data e un'ora tramite un calendario, senza il fuso orario.
Email: consente di inserire un indirizzo email.
Month: consente di selezionare un mese e un anno tramite un calendario.
Number: consente di inserire un numero.
Range: consente di selezionare un valore numerico all'interno di un intervallo.
Search: consente di inserire un termine di ricerca.
Tel: consente di inserire un numero di telefono.
Time: consente di selezionare un'ora tramite un orologio.
Url: consente di inserire un indirizzo web.
Week: consente di selezionare una settimana dell'anno tramite un calendario.

76

77 of 96

Attributi comuni

Gli elementi <input> in HTML5 hanno diverse proprietà che possono essere utilizzate per personalizzare il comportamento e l'aspetto dei campi di input all'interno di un form. Alcune delle proprietà più comuni sono:

type: specifica il tipo di input, come ad esempio "text", "password", "radio", "checkbox", "submit", "email", "tel", "date", "color", "range", "file", "number", "search", "time", "url", "datetime-local", "month", "week", "hidden"
name: specifica il nome del campo di input, che viene utilizzato per identificare il campo quando i dati del form vengono inviati al server
value: specifica il valore predefinito del campo di input
placeholder: fornisce un suggerimento sul tipo di dati da inserire in un campo di input
required: indica che un campo di input è obbligatorio
autofocus: imposta il focus su un campo di input specifico quando la pagina viene caricata
readonly: indica che un campo di input è di sola lettura
disabled: indica che un campo di input è disabilitato
maxlength: specifica il numero massimo di caratteri che possono essere inseriti in un campo di input
min e max: specificano il valore minimo e massimo che possono essere inseriti in un campo di input di tipo "number" o "range"
step: specifica l'incremento o il decremento del valore di un campo di input di tipo "number" o "range"
pattern: specifica un'espressione regolare che deve essere soddisfatta dal valore inserito in un campo di input
list: specifica l'id di un elemento <datalist> che contiene elementi predefiniti per un campo di input di tipo "text" o "search"
autocomplete: specifica se il browser deve suggerire o meno i valori inseriti in un campo di input.

77

78 of 96

Label

L'etichetta (label) è un elemento HTML che serve ad associare un'etichetta ad un campo di input di un form. L'utilizzo dell'etichetta è importante per migliorare l'accessibilità del form e per facilitare la comprensione dell'utente. L'attributo "for" dell'etichetta deve corrispondere all'attributo "id" del campo di input.

Esempio di utilizzo:

L'etichetta può essere personalizzata utilizzando CSS e JavaScript. Ad esempio, è possibile nascondere l'etichetta e utilizzare un'icona al suo posto.

In generale, l'utilizzo dell'etichetta è importante per migliorare l'accessibilità del form e facilitare la comprensione dell'utente. L'etichetta deve essere utilizzata per ogni campo di input del form e deve essere associata correttamente al campo di input tramite gli attributi "for" e "id".

78

79 of 96

Datalist

Datalist: l'elemento datalist consente di fornire un elenco di opzioni predefinite per un campo di input. Ad esempio, è possibile fornire un elenco di città per un campo di input "città".

Esempio di utilizzo:

<label for="citta">Città:</label>

</datalist>

79

80 of 96

Elementi progress e meter

Progress: l'elemento progress consente di visualizzare una barra di avanzamento per un'operazione in corso. Ad esempio, è possibile visualizzare una barra di avanzamento per il caricamento di un file. Esempio di utilizzo: [ref]

<label for="file">Carica file:</label>

Meter: l'elemento meter consente di visualizzare una barra di avanzamento per un valore numerico. Ad esempio, è possibile visualizzare una barra di avanzamento per il punteggio di un quiz. Esempio di utilizzo:

<label for="punteggio">Punteggio:</label>

80

81 of 96

TODO

l’elemento form e i suoi attributi
input, label, textarea, button, …
fieldset e legend
i vari tipi di elementi input: text, password, reset, radio, …
gli attributi dell’elemento input: value, name, id, checked, … [ref]

81

82 of 96

Best practice per la creazione di form HTML

Ecco alcune best practice per la creazione di form HTML:

Utilizzare il tag <form> per definire il form e specificare l'attributo action per indicare la pagina a cui inviare i dati del form.
Utilizzare l'attributo method per specificare il metodo di invio dei dati, che può essere "GET" o "POST".
Utilizzare il tag <label> per associare una descrizione a ogni campo del form.
Utilizzare l'attributo for dell'elemento <label> per associare il campo del form alla sua descrizione.
Utilizzare l'attributo name per identificare ogni campo del form.
Utilizzare l'attributo id per identificare ogni campo del form in modo univoco.
Utilizzare l'attributo required per indicare i campi obbligatori.
Utilizzare l'attributo placeholder per fornire un suggerimento sul tipo di dati da inserire in un campo.
Utilizzare l'attributo autocomplete per abilitare o disabilitare il completamento automatico dei campi del form.
Utilizzare l'attributo pattern per specificare un'espressione regolare che definisce il formato dei dati da inserire in un campo.
Utilizzare il tag <fieldset> per raggruppare campi del form correlati.
Utilizzare il tag <legend> per fornire una descrizione del gruppo di campi del form racchiusi nel tag <fieldset>.
Utilizzare il tag <button> per creare pulsanti personalizzati all'interno del form.

82

83 of 96

Concetti avanzati

83

84 of 96

L’elemento div

84

85 of 96

L’elemento div

L'elemento <div> è un elemento generico di divisione o contenitore. A differenza degli elementi di sectioning come <section>, <article>, <aside>, <nav>, che hanno uno scopo semantico specifico, l'elemento <div> non ha un significato specifico di per sé. L'elemento <div> viene utilizzato principalmente per raggruppare e suddividere il contenuto in sezioni o blocchi distinti, consentendo di applicare stili CSS o aggiungere funzionalità specifiche tramite JavaScript.

Ecco alcuni casi comuni in cui viene utilizzato l'elemento <div>:

Raggruppare elementi correlati: Può essere utilizzato per raggruppare insieme elementi correlati o per creare blocchi di contenuto indipendenti.

<h3>Prodotto 1</h3>

<p>Descrizione del prodotto</p>

</div>

<h3>Prodotto 2</h3>

<p>Descrizione del prodotto</p>

</div>

85

86 of 96

L’elemento div

Applicare stili CSS o aggiungere funzionalità: Può essere utilizzato come contenitore per applicare stili specifici o per collegare funzionalità specifiche tramite classi o identificatori.

<p>Contenuto con stili personalizzati</p>

</div>

<p>Contenuto del modal</p>

<button id="close-btn">Chiudi</button>

</div>

In sostanza, l'elemento <div> offre flessibilità nel raggruppare e suddividere il contenuto della pagina in modo più personalizzato, senza implicare un significato semantico specifico. Tuttavia, è sempre consigliabile utilizzare elementi più specifici e semantici quando possibile, per rendere il codice HTML più comprensibile e accessibile.

86

87 of 96

Tutti i tag Html5

87

88 of 96

Elenco completo dei tag html5

88

89 of 96

Altro

89

90 of 96

Altro

nidificare e indentare correttamente i tag html

<body>

<h1>Titolo</h1>

<p>Paragrafo di testo</p>

</body>

90

91 of 96

Altro

91

92 of 96

Esercitazioni

92

93 of 96

Esercitazioni

93

94 of 96

Grazie per l’attenzione

95 of 96

Link/Riferimenti

95

96 of 96

Revisioni

v1.0 12/09/22 - versione iniziale