Da cosa è composta una pagina web

Quali sono i file che mi permettono di creare la struttura, definire gli stili e programmare le interazioni in una pagina web?

creativecode avatar Giulio Tiseo

14 Ago, 2019

~3min.

Vedrai da cosa è composta una pagina web, in modo da sapere quali sono i linguaggi da conoscere per sviluppare un sito web da zero.

Requisiti

Per capire a fondo i contenuti presenti in questo articolo è importante che tu conosca i principi di funzionamento della rete. Leggere l’articolo Come funziona internet ti sarà senz’altro di aiuto e ti permetterà di avere una buona base per proseguire le letture successive.

# Cosa scarichiamo dal server dopo la richiesta di accesso al sito?

Nell’articolo  Come funziona internet, hai scoperto che alla richiesta di accesso a un sito web, il server risponde con tre tipologie di file che rappresentano l’intera composizione della pagina visualizzata nel browser. Tali file sono l’HTML, il CSS e il Javascript.

Il documento scritto nel linguaggio HTML rappresenta il file più importante di un sito. Senza di esso infatti non sarebbe possibile dar luogo ad alcuna pagina web in quanto verrebbe a mancare la struttura principale che permette la visualizzazione dei contenuti nel browser. In pratica è come se ipotizzassimo di costruire una casa senza le fondamenta! ^^”

# HTML: Cosa deve contenere il sito web?

L’HTML è il documento chiave di un sito web, ovvero il responsabile della struttura e dei contenuti presenti nella pagina. Attraverso il linguaggio HTML potrai creare testi, immagini, audio e video e inserirli all’interno di sezioni strutturate. Uno degli aspetti fondamentali del linguaggio HTML è che grazie ad esso puoi creare relazioni fra pagine diverse o fra sezioni contenute nella stessa pagina, attraverso l’inclusione di bottoni e link ipertestuali.

Tutti gli elementi di cui avrai bisogno, quindi, li definirai all’interno di un documento HTML.

# CSS: Come deve essere il sito web?

Il CSS è responsabile dello stile di una pagina. Immagina per un attivo di aver già creato la tua struttura HTML e di averla riempita con informazioni, testi, liste, paragrafi, tabelle, ecc. Immagino che la prima cosa che vorrai fare a questo punto sarà senz’altro rendere maggiormente presentabili i tutti questi contenuti. Questo passaggio è possibile collegando le pagine HTML ai fogli di stile CSS, che consistono in un elenco di istruzioni utili a definire l’aspetto della pagina. Attraverso i CSS potrai inserire i tuoi font personalizzati, potrai realizzare il layout e formattare i contenuti garantendo inoltre la totale accessibilità della pagina sui vari dispositivi (desktop, mobile, ecc…).

# Javascript: Cosa deve fare il sito web?

Il Javascript è responsabile della maggior parte dei sistemi interattivi di un sito web. Nell’ambito della programmazione di siti web o di web application, il Javascript è senza dubbio uno dei linguaggi più affermati e utilizzati fra gli sviluppatori. Immagina il linguaggio Javascript come l’addetto alla gestione di tutti quegli aspetti del sito web che rispondono a degli eventi (spesso causati dall’utente) e che creano un cambiamento di stato della pagina.

Cerco di farti capire questo concetto con un esempio molto pratico e semplice: pensa ad un e-commerce che ad ogni click effettuato sul bottone Aggiungi, aggiornerà la lista della spesa mostrandoti il totale nel carrello, oppure immagina l’astronave di Arkanoid che si sposta lateralmente quando premi le freccette destra e sinistra della tastiera. Questo genere di azioni o più precisamente “eventi“, possono essere gestiti facilmente attraverso il linguaggio javascript! Perciò, ogni fase dello sviluppo che riguarda l’interazione del client con gli elementi della pagina, può essere gestita e programmata in Javascript in un file che è incluso, così come il CSS, nella pagina HTML.

Un sito web completo è composto da nient’altro che questi tre elementi. In questa guida ci concentreremo molto sugli aspetti relativi all’HTML e non affronteremo gli altri due linguaggi che saranno oggetto delle prossime guide, ma è bene sapere fin dall’inizio il compito che svolge ciascun linguaggio quando si è in fase di sviluppo di un sito web.

Prima di cominciare a sporcarci le mani con il coding, voglio mostrarti nel dettaglio la costruzione di una pagina web esistente permettendoti di sbirciare il codice sorgente o facendo uso degli strumenti speciali che il browser mette a disposizione degli sviluppatori. Ricorda: quando vuoi imparare qualcosa di nuovo, non c’è niente di meglio che osservare, capire e studiare un codice pronto e funzionante. 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *