Appunti e codice: Tecnologie e Sistemi Web, 2025/26

Presentazione

Il World Wide Web e architettura di rete

Il World Wide Web (WWW) non va confuso con Internet: mentre Internet è la rete fisica e logica di basso livello (basata su protocolli come TCP/IP), il WWW è un sistema applicativo di alto livello che si appoggia su Internet per l'accesso e lo scambio di ipertesti.

L'architettura del web è di tipo Client-Server: un web client (il browser) inoltra richieste per accedere a risorse, mentre un web server remoto le elabora e fornisce le risposte.

HTML

La comunicazione avviene tramite il protocollo HTTP (HyperText Transfer Protocol), che definisce le regole per lo scambio dei messaggi. L'HTTP è un protocollo stateless (o connectionless): ogni interazione (richiesta-risposta) nasce e si esaurisce istantaneamente senza mantenere una connessione persistente aperta, motivo per cui ogni azione dell'utente (es. click o refresh) genera nuove connessioni indipendenti.

I messaggi HTTP si dividono in un Header (che contiene metadati come mittente, destinatario e codici di stato come il 200 per il successo o il 404 per risorsa non trovata) e un Body (che contiene i dati effettivi o il codice HTML). I metodi principali di richiesta HTTP sono:

• GET: Recupera una risorsa (es. scaricare una pagina); i parametri sono visibili nell'URL ed è un metodo idempotente.
• POST: Invia dati al server (es. compilazione di un form, creazione di un account); i dati sono nascosti nel corpo della richiesta.
• PUT / PATCH / DELETE: Rispettivamente per sostituire, modificare parzialmente o eliminare una risorsa sul server.
• HEAD: Simile alla GET, ma richiede al server di restituire solo l'Header senza scaricare il corpo del messaggio.

Indirizzamento e nomi a dominio

Ogni risorsa web è identificata univocamente da un URL (Uniform Resource Locator) o, in senso più ampio, da un URI (Uniform Resource Identifier). La sintassi di un URL comprende:

• Protocollo (Scheme): Es. http:// o https://.
• Dominio (Host): Il nome simbolico del computer su cui risiede il server.
• Porta: Opzionale, per default HTTP usa la porta 80.
• Path (Percorso): L'indirizzo logico del file o della risorsa all'interno del server.
• Query (?): Parametri aggiuntivi passati al server come coppie chiave-valore.
• Fragment (#): Identificativo per accedere direttamente a una sezione specifica all'interno del documento scaricato.

Per tradurre i nomi di dominio (es. www.uniroma1.it) negli effettivi indirizzi IP delle macchine, si utilizza il protocollo DNS (Domain Name System). Il sistema si basa su una gerarchia di domini: domini di primo livello (.com, .org, .it), domini di secondo livello gestiti autonomamente (es. uniroma1.it) e sottodomini successivi (es. diag.uniroma1.it). È importante distinguere il dominio (la macchina/server), il sito web (l'insieme logico di pagine e risorse gestite da un'entità) e la singola pagina web (il documento HTML).

Ipertesti, HTML e breve storia del Web

Un ipertesto è un documento multimediale che contiene testo, immagini, audio, video e collegamenti ipertestuali (link) che permettono di superare la lettura sequenziale tipica dei libri, consentendo all'utente di navigare liberamente tra le informazioni. L'insieme degli ipertesti, uniti a script e fogli di stile, forma un sito web moderno.

Il linguaggio standard per creare questi documenti è l'HTML (HyperText Markup Language), un linguaggio di formattazione derivato dall'SGML (Standard Generalized Markup Language). Funziona tramite l'uso di "marcatori" o tag per definire la struttura e l'aspetto dei contenuti.

Evoluzione storica

• L'HTML e il protocollo HTTP sono stati inventati nel 1989 da Tim Berners-Lee presso il CERN di Ginevra per permettere ai fisici di scambiare dati superando le incompatibilità tra sistemi informatici eterogenei. Il primo sito web fu pubblicato nel 1991.
• Negli anni '90, con la diffusione dei primi browser commerciali come Mosaic e Netscape, iniziò la cosiddetta "guerra dei browser", in cui le aziende creavano tecnologie proprietarie frammentando il mercato.
• Per riportare ordine, nel 1995 nacque il W3C (World Wide Web Consortium), l'ente incaricato di standardizzare le tecnologie web, che nel 1999 rilasciò lo standard HTML 4.0.
• Nel 2000, il W3C tentò di imporre l'XHTML, una versione estremamente rigida basata su XML. Tuttavia, questa rigidità e la mancanza di retrocompatibilità si scontravano con le reali necessità di mercato, che andavano verso applicazioni web dinamiche (Single Page Applications, contenuti generati dagli utenti).
• In opposizione al W3C, colossi come Apple, Mozilla, Opera (e poi Google) fondarono nel 2004 il WHATWG, concentrandosi sullo sviluppo di una tecnologia "application-oriented" che non "rompesse" il web esistente.
• Il frutto di questo lavoro fu l'HTML5. Il W3C riconobbe il proprio errore, abbandonò l'XHTML e standardizzò l'HTML5 nel 2014.
• Dal 2019, W3C e WHATWG hanno unito gli intenti adottando il modello del "Living Standard": oggi l'HTML non ha più un numero di versione fisso (come HTML 4 o 5.1), ma è un linguaggio in continua e costante evoluzione.

Fondamenti di HTML: sintassi e semantica

HTML è un linguaggio a marcatori la cui sintassi è basata sui tag, scritti tra parentesi angolari (es. <nome-tag>). I tag sono case-insensitive. Un elemento HTML è composto dal tag di apertura, dal contenuto testuale e dal tag di chiusura (es. <b>testo</b>). Esistono anche tag autochiudenti (es. <br> o <img>) che non necessitano del tag di chiusura.

HTML distingue tra semantica e presentazione: lo standard HTML definisce cosa rappresenta un tag (il suo significato logico), mentre l'aspetto visivo è storicamente delegato al comportamento di default dei browser o, nelle moderne best practice, ai CSS. Mantenere una buona semantica è fondamentale per l'accessibilità (es. screen reader per ipovedenti) e per la SEO (ottimizzazione per i motori di ricerca tramite i bot/scraper).

Attributi dei tag

Gli attributi specificano metadati aggiuntivi per un elemento e si scrivono nel tag di apertura come coppie chiave="valore".

• Esistono attributi booleani (come hidden) a cui non serve assegnare un valore: la loro sola presenza li rende "veri".
• Esistono attributi globali applicabili a qualsiasi tag: id (identificativo univoco dell'elemento nel documento), class (per raggruppare elementi ai fini del CSS), style (per applicare stili inline, pratica sconsigliata) e title (per creare un tooltip testuale al passaggio del mouse).

Struttura del documento HTML

Ogni documento HTML moderno inizia con la dichiarazione <!DOCTYPE html> e prosegue con l'elemento radice <html>, il quale contiene due soli figli diretti: <head> e <body>.

L'intestazione (<head>)

Contiene metadati non visualizzati direttamente nella pagina. I principali tag al suo interno sono:

• <title>: Il titolo della pagina mostrato nella scheda del browser e nei risultati di ricerca.
• <meta>: Usato per definire la codifica (charset="UTF-8"), viewport (per l'adattamento ai dispositivi mobili), autore e parole chiave (utili per la SEO).
• <link>: Per collegare risorse esterne, come i fogli di stile CSS (rel="stylesheet") o l'icona del sito (rel="icon").
• <style> e <script>: Rispettivamente per includere CSS locale o codice JavaScript.

Il corpo (<body>)

Contiene il vero e proprio contenuto visibile all'utente. Al suo interno si distinguono due macro-categorie di contenitori neutri, usati prevalentemente in accoppiata con il CSS:

• <div>: Contenitore di tipo block, occupa tutta la larghezza disponibile e va a capo.
• <span>: Contenitore di tipo inline, non forza l'andata a capo e si adatta al contenuto.

Formattazione testo e tag logici vs fisici

Nel <body> possiamo usare due tipologie di tag per il testo:

• Tag puramente fisici: Controllano solo l'aspetto visivo. Esempi sono <b> (grassetto), <i> (corsivo), <u> (sottolineato), <s> (sbarrato). Anche l'elemento <font> (usato un tempo per impostare grandezza, famiglia o colore del carattere) rientra qui, ma oggi è deprecato e va sostituito con le proprietà CSS.
• Tag logici: Conferiscono significato semantico al testo. Ad esempio <strong> e <em> per enfatizzare concetti (che i browser rendono di default rispettivamente come grassetto e corsivo), <address> per gli indirizzi, <q> e <blockquote> per le citazioni, <cite>, <dfn>, e tag per marcare porzioni di codice come <var>, <kbd> o <code>.

Per allineare e separare il testo si usano:

• <p>: Definisce un paragrafo.
• <br>: Forza l'andata a capo.
• <hr>: Traccia una linea orizzontale.
• <h1>...<h6>: Definiscono i titoli (intestazioni) a vari livelli di importanza (sono elementi di tipo block).
• <pre>: Mostra il testo esattamente come scritto nel codice sorgente, preservando tutti gli spazi vuoti e le andate a capo, usando un font a larghezza fissa.

Liste, link e immagini

• Liste: Possono essere puntate <ul> (unordered list) o numerate <ol> (ordered list). I singoli elementi all'interno sono definiti dal tag <li> (list item). Le liste possono essere annidate le une dentro le altre e l'attributo type (sebbene gestibile meglio via CSS) permette di cambiare il tipo di indicizzazione (es. numeri romani, lettere).
• Collegamenti ipertestuali (<a>): Il tag anchor crea i link. L'attributo essenziale è href, che contiene la URL di destinazione. Si può usare href="#id" per collegarsi a una specifica "ancora" interna alla stessa pagina. L'attributo target permette di decidere dove aprire il link (es. target="_blank" lo apre in un nuovo tab).
• Immagini (<img>): È un tag autochiudente che usa l'attributo src per specificare l'URL dell'immagine. L'attributo alt è fondamentale per fornire un testo alternativo in caso l'immagine non venga caricata o per i browser testuali/screen reader. Si possono specificare anche larghezza (width) e altezza (height), anche in forma percentuale rispetto al contenitore.

Mappe cliccabili

È possibile associare link multipli a diverse zone di una singola immagine. Questo si fa principalmente lato client usando l'attributo usemap sul tag <img>, che richiama un tag <map> (associato tramite l'attributo name). All'interno del tag <map> si usano elementi <area> per definire la forma della zona interattiva (shape="rect", circle, o poly), le sue coordinate matematiche (coords) e il link di destinazione (href). Le mappe lato server (tramite attributo ismap) sono un approccio vecchio e sconsigliato in cui il browser inviava le coordinate fisiche del clic direttamente al server. Un'alternativa moderna per creare mappe vettoriali è l'uso del tag <svg>.

Immagini vettoriali e SVG

Oltre alle mappe cliccabili tradizionali (<map> e <area>), HTML5 supporta l'uso di immagini vettoriali tramite il linguaggio SVG (Scalable Vector Graphics), basato su XML. A differenza delle immagini raster (basate su pixel), le immagini vettoriali sono definite da oggetti geometrici (come <circle>, <rect>, <polygon>) e non perdono risoluzione se ingrandite.

In HTML5 è possibile includere il codice SVG in vari modi: tramite il tag <img>, oppure incorporando direttamente il tag <svg> nel codice sorgente della pagina. Un aspetto molto potente è che i singoli oggetti geometrici all'interno dell'SVG possono essere racchiusi in un tag <a> per creare link ipertestuali (es. un'ellisse cliccabile), e possono essere manipolati con CSS o JavaScript per creare effetti dinamici (es. reazioni al passaggio del mouse).

Inclusione di oggetti generici

I tag <object> e <embed> servono per incorporare all'interno della pagina HTML risorse esterne generiche (come PDF, file audio, video o altre pagine HTML). Oggi sono considerati retaggi delle vecchie versioni di HTML e sono poco utilizzati, poiché HTML5 ha introdotto tag semantici specifici come <audio> e <video>.

Entità HTML

Le entità nascono storicamente per risolvere il problema di rappresentare caratteri non inclusi nel set ASCII (come le lettere accentate &egrave; per la "è") o simboli speciali/riservati. Tutte le entità iniziano con una e-commerciale (&) e terminano con un punto e virgola (;). Oggi, grazie all'adozione standard della codifica UTF-8, le entità per le lettere accentate non sono quasi più necessarie. Tuttavia, rimangono fondamentali per i caratteri riservati del linguaggio HTML, in modo che il browser non li confonda con l'apertura o chiusura di un tag. I più importanti sono:

• &lt; (less than) per il simbolo <.
• &gt; (greater than) per il simbolo >.
• &amp; per la e-commerciale &.

Tabelle

Le tabelle servono per rappresentare dati in formato tabulare (righe e colonne). In passato venivano usate per definire il layout (la struttura visiva) delle intere pagine web, ma questa pratica oggi è fortemente sconsigliata perché le tabelle hanno una struttura rigida che non si adatta bene ai dispositivi mobili (mancanza di "responsiveness"); oggi per i layout si usano i tag <div> e i CSS. Gli elementi fondamentali di una tabella sono:

• <table>: Il tag contenitore principale.
• <tr> (Table Row): Definisce una riga.
• <td> (Table Data): Definisce una normale cella di dati all'interno di una riga.
• <th> (Table Header): Definisce una cella di intestazione (solitamente resa dal browser in grassetto e centrata).

Attributi per unire le celle

• colspan="n": Permette a una cella di espandersi orizzontalmente occupando "n" colonne.
• rowspan="n": Permette a una cella di espandersi verticalmente occupando "n" righe.

Tag di raggruppamento (semantica delle tabelle)

Per separare logicamente le parti della tabella, si usano i tag <thead> (intestazione), <tbody> (corpo dei dati) e <tfoot> (piè di pagina, utile per note o somme totali). Questi tag sono utili sia per la semantica sia per applicare stili CSS a blocchi specifici della tabella. Inoltre, il tag <caption> permette di aggiungere una didascalia alla tabella.

Frame

I frame permettono di dividere la finestra del browser per mostrare documenti indipendenti. L'unico tag ancora supportato nello standard HTML moderno è <iframe> (inline frame). Un iframe crea un riquadro (con larghezza e altezza definite) al cui interno viene caricata un'altra pagina web specificata tramite l'attributo src. Se un link all'interno dell'iframe o della pagina principale deve interagire con il frame, si usa l'attributo target del tag <a> (es. target="_self" apre la risorsa dentro l'iframe stesso, mentre target="_top" o _parent sovrascrive l'intera pagina annullando i frame).

Form (moduli) e protocollo HTTP

Le form servono per raccogliere input dall'utente e inviarli a un server web per essere elaborati (es. per fare un login o una ricerca). Tutto il modulo è racchiuso nel tag <form>, che ha due attributi fondamentali:

• action: Specifica la URL del programma sul server che riceverà ed elaborerà i dati.
• method: Specifica il metodo HTTP usato per l'invio.

GET: Le coppie chiave-valore vengono accodate visibilmente nella URL (es. o ?q=ricerca). Si usa per interrogazioni al server che non alterano dati, ma ha un limite massimo di caratteri.

POST: I dati vengono inseriti in maniera nascosta nel "corpo" (body) della richiesta HTTP. Permette di inviare quantità illimitate di caratteri ed è usato per dati sensibili (come le password) per evitare che restino memorizzati nei log della URL o nella cronologia. (Nota bene: il POST non cripta i dati, per la vera sicurezza serve il protocollo HTTPS).

Tag di input all'interno delle form

L'elemento principale per raccogliere dati è <input> (che è autochiudente e "inline"). Due attributi globali sono indispensabili per il funzionamento logico di un input verso il server:

1. name: È la "chiave" o il nome della variabile che il server riceverà.
2. value: È il valore associato a quella chiave. Se non specificato, il value sarà il testo inserito dall'utente. Se specificato nel codice HTML, funge da valore di default o da valore fisso da inviare.

L'aspetto e il comportamento dell'input sono determinati dall'attributo type:

• type="text": Crea una classica casella di testo su una singola riga. Supporta gli attributi maxlength e minlength (per limitare i caratteri inseribili) e size (per definire la larghezza visiva della casella in caratteri).
• type="hidden": Crea un campo invisibile all'utente. Viene usato dagli sviluppatori per inviare al server dati nascosti ma necessari (es. tracciare l'ID dell'utente durante l'invio della form).
• type="password": Crea una casella in cui i caratteri digitati vengono mascherati con asterischi o pallini. (Il testo reale farà comunque parte del value inviato, non viene criptato).
• type="checkbox": Crea una casella quadrata spuntabile (on/off). Spesso si assegnano più checkbox allo stesso name per permettere selezioni multiple (es. name="ingrediente", l'utente può scegliere sia "prosciutto" che "peperoni"). L'attributo booleano checked fa sì che