Pagina web

In informatica una pagina web (in inglese webpage) è un documento ipertestuale pubblicato sul World Wide Web e leggibile dall'utente mediante un apposito programma detto browser. Un sito web è un insieme di pagine web collegate da uno o più nomi a dominio (o sottodomini) con il quale possono essere raggiunte dall'utente. Sono mantenute online e fornite all'utente da uno o più server web.

Descrizione

Una pagina web è un file di testo che viene composto in linguaggio di programmazione HTML il quale, come dice il nome (HyperText Markup Language), è quello utilizzato per rendere le funzioni ipertestuali. La pagina è infatti un documento strutturato la cui principale caratteristica è quella di contenere del testo connesso a un collegamento ipertestuale, il quale punta ad un altro contenuto del World Wide Web, in genere un'altra pagina web (oppure immagini, documenti e in genere altri tipi di file), o anche a una data sezione della medesima pagina.

Il contenuto della pagina comprende le informazioni testuali o grafiche che il creatore della pagina intende trasmettere, e la formattazione che le include. Le informazioni trasmesse possono essere solo testuali, solo grafiche (file multimediali come immagini, video, audio), oppure assiemate in una combinazione di testo e grafica. La pagina può includere anche altre pagine web (in embedding o framing).

Il documento HTML può includere opzioni di formattazione che il browser trasforma in effetti grafici leggibili dall'utente; ci possono essere riferimenti a uno o più fogli di stile con i quali in genere si rendono omogenee le rese di alcuni elementi delle pagine del sito (ad esempio il colore dei link, il formato dei caratteri, le scelte tipografiche di raggruppamento o distribuzione del testo, etc) di modo che, impostando le scelte nel foglio di stile, queste saranno applicate a tutte le pagine che lo richiamano.

La pagina può anche richiamare o includere codice JavaScript, Java, o altri linguaggi (oggi preferibilmente compatibili con lo standard WebAssembly)) con cui è possibile consentire interattività e/o rendere la pagina dinamica.

Navigazione

L'indirizzo con cui si può accedere a una pagina web è strutturato come URL (Uniform Resource Locator)^[1]. Per lo più gli indirizzi sono strutturati per i protocolli di rete http (o https per i domini certificati).

L'URL digitato nel web browser dell'utente è convertito dal DNS in un indirizzo IP necessario per l'instradamento della comunicazione tra web server e client nei nodi interni di commutazione (router).^[2]

La pagina web principale di un sito web è la cosiddetta home page, dalla quale le altre pagine del sito possono essere raggiunte mediante link esterni o interni (ancore), spesso riuniti in menu e/o widget.

Struttura

Una pagina web, nel suo codice sorgente testuale, si compone di una dichiarazione di linguaggio, di una testa e di un corpo.

La dichiarazione di linguaggio è la prima istruzione nel sorgente, e la sua funzione è comunicare al browser che tipo di documento sta per scaricare e rendere all'utente. In dettaglio, fa riferimento al linguaggio HTML, con o senza ulteriori specificazioni, ad esempio con il tag <!DOCTYPE html>. Dopo questa riga inizia il contenuto della pagina web, racchiuso fra i tag <html> e </html>; il secondo tag è in genere l'ultima riga del sorgente della pagina.

La testa, o header (delimitata dai tag <head> e </head>), è la prima parte più specifica del sorgente della pagina, non è visibile all'utente e richiama istruzioni <meta> per la codifica di caratteri da utilizzare (ad esempio UTF-8), il titolo della pagina, le parole chiave, descrizioni e identificativi per la geolocalizzazione o per altri servizi specifici. Può contenere anche stili di formattazione degli elementi non inclusi nei fogli di stile che richiama (dallo stesso server o da altri server esterni), e anche degli script da attivare nel seguito della pagina.

Il corpo della pagina è delimitato dai tag <body> e </body> e comprende le parti più direttamente visibili dall'utente. In assenza di formattazioni o altre istruzioni tecniche, l'utente leggerebbe pressoché fedelmente quanto è in quella parte del sorgente. In pratica, però, già la semplice definizione di un paragrafo (delimitato dai tag <p> e </p>) sollecita il browser a un rendering specifico (ne applica uno predefinito se non ci sono stili dichiarati).

La struttura del sorgente quindi segue questo schema:

<!DOCTYPE html> (dichiarazione html)

<html> (apertura sessione html)

<head> (apertura header)

istruzioni meta, titolo, stile, script

</head> (chiusura header)

<body> (apertura body)

contenuto della pagina

</body> (chiusura body)

</html> (chiusura sessione html)

Grafica

I formati di file della grafica in una pagina web sono in genere JPEG, GIF, PNG, WebP (tutti formati raster) o SVG (formato vettoriale, spesso reso però con PNG).

I formati GIF e PNG sono utilizzati per lo più per le foto, ma talora è preferito il JPEG, che è un formato a perdita d'informazione ma con maggior livello di compressione e quindi con dimensioni più ridotte, a favore della velocità di trasferimento. GIF consente anche piccole animazioni, GIF e PNG permettono immagini con pixel trasparenti, PNG per immagini con pixel parzialmente trasparenti.

I modi più comuni di impiegare grafica vettoriale nelle pagine web sono due:^[3]

utilizzando il già citato formato SVG;
inserendo dei file di Flash (obsoleto dal 2020^[4]), che permetteva l'animazione degli elementi e l'utilizzo di musica ed effetti sonori.

Tipologia

Esistono tre tipi di pagine web che identificano rispettivamente diversi paradigmi di programmazione Web^[5]:

pagina web statica afferente al paradigma del Web statico;
pagina web dinamica afferente al paradigma del Web dinamico;
pagina web responsiva afferente al paradigma del design responsivo.

Nel primo caso la struttura (presentazione) e i contenuti sono descritti tutti in un file di ipertesto in formato HTML o XHTML, eventualmente con supporto di fogli di stile CSS, e l'unica interazione con il server web è lo scaricamento e la visualizzazione del file nel browser senza ulteriori elaborazioni lato server; per cambiare i contenuti è necessario modificare lato server anche il file sorgente. Nel secondo caso invece il file ipertestuale serve principalmente per impostare solo la struttura di presentazione mentre i contenuti sono generati al momento tramite un'elaborazione lato server, usando opportuni linguaggi di scripting in grado di interagire con sorgenti di dati residenti sul server quali ad esempio i database, ricreando dinamicamente un file HTML completo anche dei contenuti. In questo modo, è possibile presentare nella stessa pagina contenuti differenti nel tempo, a seconda del tipo di elaborazione, senza dover modificare lato server anche il file sorgente.

Con la diffusione di dispositivi portatili come smartphone e tablet in grado di accedere a internet e visualizzare pagine web, è sorta l'esigenza di garantire una resa dei contenuti corretta e fruibile tenendo conto anche della differenza di dimensioni dei vari tipi di schermi. Il design responsivo consiste nell'impiego combinato di fogli di stile e tecniche HTML quali JavaScript e jQuery che permettono di adattare la presentazione e la disposizione di testi, immagini e contenuti in modo differenziato o ottimizzato sul dispositivo finale dell'utente, partendo dallo stesso file sorgente.^[6]

Standard per pagine web

A sinistra una pagina web visualizzata online, a destra la stessa pagina stampata. Con i CSS si può infatti escludere alcune parti della pagina che in stampa non verranno impresse, perché generalmente non interessano agli utenti.

Dal punto di vista tecnologico i vari aspetti caratteristici di una pagina vengono realizzati utilizzando i seguenti standard^[7]^[8]:

linguaggi di markup per la definizione della struttura e dell'impaginazione: HTML e XHTML;
linguaggio di formattazione per il controllo della resa (colori, caratteri, dimensioni, visibilità) su dispositivi diversi (schermi di varie dimensioni, stampa eccetera): CSS e XSL;
linguaggi di scripting lato client (browser): JavaScript e librerie basate su JavaScript come jQuery

A livello di normativa tecnica, la standardizzazione dei linguaggi di markup e di formattazione lato client fa capo al World Wide Web Consortium (W3C)^[9] mentre l'ente di riferimento per JavaScript è ECMA International con lo standard ECMA-262.^[10]

In aggiunta a questi, vanno menzionati anche gli strumenti utilizzati lato web server per la realizzazione di pagine web dinamiche, in particolare i linguaggi di programmazione in grado di interagire sia con database residenti sul server che col web server stesso per la generazione del codice HTML risultante. Tra questi, i più utilizzati sono PHP, ASP, .NET, Python e Ruby.^[11] Per il web dinamico, tra i database di appoggio più comuni per la generazione dei dati vi sono MySQL, MS Access, PostgreSQL (tutti di tipo relazionale) e MongoDB e CouchDB per quanto riguarda i database non relazionali.^[12]

Operazioni sulle pagine web

Visualizzare una pagina web

Le pagine web composte da solo testo possono essere visualizzate in qualsiasi applicazione che possa leggere i documenti di testo. Invece, per vedere una pagina web che contiene ipertesto e grafica, c'è bisogno di un web browser.

Ci sono differenti tipi di browser per il web disponibili con differenti caratteristiche e su un gran numero di piattaforme. Nel caso di pagine web statiche il browser interpreta il codice HTML e CSS restituendo all'utente il contenuto informativo nella veste grafica predefinita. Nel caso di pagine web dinamiche il server oppure il client elaborano lo script (se l'applicazione è client-side) restituendo codice HTML e CSS poi usualmente interpretato dal web browser per visualizzare la pagina sul monitor o sul display dell'utente.

Salvataggio di una pagina web

Una pagina web salvata con un browser web. Non sempre la pagina viene scaricata sul dispositivo con tutti gli elementi originali.

Quando si salva una copia locale di una pagina WEB, il browser web di solito permette la scelta tra^[13]:

salvare il testo senza formattazione o immagini senza mantenere i link e la loro destinazione;
salvare il file HTML senza modifiche ma senza immagini (salva il codice sorgente);
salva il file HTML modificando i link relativi in assoluti, senza immagini;
anche salvando le immagini e correggendo i riferimenti ad esse; sia nel caso si crei una cartella separata (IE, Mozilla) o che sia la stessa utilizzata dal file HTML (Opera);

Internet Explorer (obsoleto in favore di Microsoft Edge^[14]) può anche salvare la pagina includendo le immagini in un solo file MHT, similmente a Apple Safari che permette la stessa operazione salvando la pagina (anche animazioni e applet) in un archivio web (.webarchive).

I web browser più comuni, come Mozilla, Mozilla Firefox e Internet Explorer, permettono anche di stampare la pagina web correntemente visualizzata e opzionalmente "stamparla" su un file che successivamente può essere visualizzato o stampato.
Generalmente, il browser crea due file, uno per il testo e uno per tutti gli altri tipi di oggetti (immagini, link, ecc.) per ogni pagina web salvata. Internet Explorer supporta il formato .mht che permette di salvare tutto il contenuto di una pagina web in solo file.

Per una breve pagina un'altra possibilità è salvare un'istantanea dello schermo (utile in alcuni casi particolari): vengono visualizzati i collegamenti ma non la loro destinazione.

Ci sono anche alcuni software che permettono di scaricare sul proprio computer le pagine web^[15].

Strumenti per la creazione di pagine web

Le pagine web statiche sono normali file di testo realizzabili tramite web editor testuali oppure visuali (es. i cosiddetti WYSIWYG^[16]^[17]) o tramite convertitori in formato HTML integrati in programmi di produzione come ad esempio Microsoft Word e Microsoft Excel.

Per la realizzazione di pagine web responsive, è sempre più diffuso l'impiego di framework front-end e back-end rispettivamente per la gestione dei contenuti in modalità responsiva e per la gestione delle funzionalità lato server^[18].

Note

^ (EN) RFC 1738 — Uniform Resource Locators (URL), su datatracker.ietf.org, Internet Engineering Task Force.
^ (EN) RFC 1101 — DNS Encoding of Network Names and Other Types, su datatracker.ietf.org, Internet Engineering Task Force.
^ (EN) Adding vector graphics to the web, su developer.mozilla.org.
^ Flash & The Future of Interactive Content | Adobe Blog, su web.archive.org, 2 dicembre 2017. URL consultato il 9 marzo 2021 (archiviato dall'url originale il 2 dicembre 2017).
^ (EN) Static and Dynamic Websites, su researchguides.uic.edu.
^ (EN) Responsive design - Learn web Development, su developer.mozilla.org.
^ html, su html.it.
^ css, su w3schools.com.
^ (EN) W3C Mission, su w3.org.
^ (EN) ECMA-262 ECMAScript 2022 language specification, su ecma-international.org.
^ (EN) Introduction to the server Side - Learn web Development, su developer.mozilla.org.
^ (EN) Adam Michael Wood, Databases & Hosting: Everything You Need to Know, su digital.com, 15 novembre 2022.
^ chrome, su support.google.com.
^ Dario d’Elia, Microsoft 365 abbandonerà Internet Explorer 11 da agosto 2021, su Corriere della Sera, 21 agosto 2020. URL consultato il 9 marzo 2021.
^ HTTrack Website Copier - Free Software Offline Browser (GNU GPL), su httrack.com. URL consultato il 9 marzo 2021.
^ bluegriffon, su bluegriffon.org.
^ adobe, su adobe.com.
^ (EN) Liz Simmons, Front-End vs. Back-End: What’s the Difference?, su computerscience.org, 12 settembre 2022.

Voci correlate

Collegamenti esterni

(EN) Web page, su Enciclopedia Britannica, Encyclopædia Britannica, Inc.
(EN) Denis Howe, web page, in Free On-line Dictionary of Computing. Disponibile con licenza GFDL

Controllo di autorità	GND (DE) 4356308-9

Portale Internet

Portale Telematica

[1] (EN) RFC 1738 — Uniform Resource Locators (URL), su datatracker.ietf.org, Internet Engineering Task Force.

[2] (EN) RFC 1101 — DNS Encoding of Network Names and Other Types, su datatracker.ietf.org, Internet Engineering Task Force.

[3] (EN) Adding vector graphics to the web, su developer.mozilla.org.

[4] Flash & The Future of Interactive Content | Adobe Blog, su web.archive.org, 2 dicembre 2017. URL consultato il 9 marzo 2021 (archiviato dall'url originale il 2 dicembre 2017).

[5] (EN) Static and Dynamic Websites, su researchguides.uic.edu.

[6] (EN) Responsive design - Learn web Development, su developer.mozilla.org.

[7] tml, su html.it.

[8] ss, su w3schools.com.

[9] (EN) W3C Mission, su w3.org.

[10] (EN) ECMA-262 ECMAScript 2022 language specification, su ecma-international.org.

[11] (EN) Introduction to the server Side - Learn web Development, su developer.mozilla.org.

[12] (EN) Adam Michael Wood, Databases & Hosting: Everything You Need to Know, su digital.com, 15 novembre 2022.

[13] rome, su support.google.com.

[14] Dario d’Elia, Microsoft 365 abbandonerà Internet Explorer 11 da agosto 2021, su Corriere della Sera, 21 agosto 2020. URL consultato il 9 marzo 2021.

[15] HTTrack Website Copier - Free Software Offline Browser (GNU GPL), su httrack.com. URL consultato il 9 marzo 2021.

[16] uegriffon, su bluegriffon.org.

[17] , su adobe.com.

[18] (EN) Liz Simmons, Front-End vs. Back-End: What’s the Difference?, su computerscience.org, 12 settembre 2022.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]