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.
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
|
 Lo stesso argomento in dettaglio: Elementi HTML. |
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
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]
