Se vi venisse chiesto di identificare le tre tecnologie sulle quali si fonda lo sviluppo di un portale internet la risposta che dovreste dare è la stessa del titolo di questa lezione: HTML, CSS e Javascript ricoprono tutti gli aspetti che ruotano attorno ad una pagina web, dalla sua componente strutturale, alla sua disposizione, al mondo in cui questa deve reagire di fronte a specifici eventi, siano essi scatenati dall'utente, dal browser o da elementi della pagina.

In questo articolo approfondiremo le tre tecnologie, cogliendo l'occasione per cominciare a strutturare la nostra applicazione.

HTML

L'HTML nasce nel 1992 e in 20 anni ha subito una marcata evoluzione.

• In principio vigeva l'ipertesto: documenti, principalmente testuali, collegati fra loro da link che l'utente poteva seguire cliccando. La finalità era completamente informativa ed ogni utente poteva accedere allo stesso set di informazioni, il web era un gigantesca "enciclopedia libera" (più o meno attendibile).
• Oggi il concetto di navigazione è affiancato da quello di azione e siamo passati dall'ipertesto a vere e proprie applicazioni web, i cui dati sono prodotti.

Nonostante l'imponente cambio di paradigma l'HTML del 1992 resta la base solida dell'intero Web; ci sono nuove possibilità, come il poter aggiungere video nelle pagine, ma la sintassi e gli elementi principali sono rimasti praticamente invariati.

Ad essere cambiato radicalmente è l'approccio degli sviluppatori che, per i quali l'HTML ha assunto esclusivamente il ruolo di strumento per definire la struttura e il contenuto della pagina, non la sua rappresentazione grafica.

Sperimentiamo un po' di HTML introducendo nel file index.html il seguente listato:

<section id="ricerca">
<h1>Find Your Language</h1>
<p>Inserisci nella form sottostante un linguaggio di programmazione per effettuare una ricerca in merito a quel linguaggio.</p>
<form action="dettaglio.cshtml" method="get">
<label for="box_ricerca">Ricerca: </label>
<input type="search" name="box_ricerca" placeholder="Inserisci il nome di un liguaggio di programmazione (es: Ada)"
required />
<input type="submit" value="Ricerca" />
</form>
</section>
<section id="classifica">
<h1>La Classifica</h1>
<p>Ecco i linguaggi più ricercati:</p>
<ol>
<li><a href="dettaglio.cshtml?box_ricerca=C#">C#</a></li>
<li><a href="dettaglio.cshtml?box_ricerca=Python">Python</a></li>
<li><a href="dettaglio.cshtml?box_ricerca=Ruby">Ruby</a></li>
</ol>
</section>

In questa pagina trovano posto due sezioni, entrambe delimitate dall'elemento section (<section></section>). Questo elemento è stato introdotto dalle recenti specifiche HTML5 con l'intento di arricchire semanticamente il più classico elemento contenitore <div>, una section
indica infatti che tutte le informazioni racchiuse in essa condividono una caratteristica comune.

La prima section è incentrata sul tema della ricerca, al suo interno trova spazio il titolo della sezione
(tra <h1> e </h1>), un paragrafo con delle spiegazioni (tra <p> e </p>) e una maschera di inserimento (<form> e </form>).

Nella maschera abbiamo poi un'etichetta (<label> e </label>) relazionata ad un campo di inserimento testuale (<input type="search" ... />) e ad un pulsante (<input type="submit">) per l'invio dei dati contenuti nella maschera all'indirizzo specificato dall'attributo action del form (la pagina dettaglio.cshtml).

La seconda sezione invece incornicia il tema della classifica e contiene, oltre al titolo ed un
paragrafo di spiegazione, un elenco dei linguaggi più ricercati espresso attraverso una lista ordinata
di elementi (<ol>) nella quale ogni elemento (<li>) è caratterizzato da un link (<a>) che punta alla pagina di dettaglio (dettaglio.cshtml) con l'aggiunta di un parametro a specificare quale sia il linguaggio del quale vogliamo ricevere dettagli.

Se lanciamo l'applicazione resteremo probabilmente delusi... il risultato infatti è un ammasso disordinato di testo, liste e aree di inserimento che si susseguono senza coerenza. È giunto il momento di dare un po' di stile a quanto creato, è giunto il momento di un po' di CSS.

CSS

I CSS, sono un insieme di modificatori di proprietà come dimensione, posizione, colore e altre. Ogni modificatore viene applicato a specifici elementi della pagina web, identificati attraverso l'uso dei selettori. Facciamo un esempio:

.commento { width: 100px; }

in questo caso impostiamo una larghezza di 100px per tutti gli elementi della pagina il cui attributo class sia uguale a "commento".

La lista dei selettori è molto vasta, così come quella delle proprietà utilizzabili. Inseriamo il seguente listato all'interno del file frontend.css e commentiamolo insieme:

/* tutti gi elementi di tipo section */
section { width: 960px; margin: 10px auto; }
/* tutti gli elementi all'interno della section
* con id 'ricerca' */
section#ricerca * { text-align: center; }
/* la section con id 'classifica' */
section#classifica { margin-top: 30px; }
/* tutti gli elementi di tipo li */
li { list-style-type: decimal; list-style-position: inside; }
/* tutti gli elementi di tipo h1 */
h1 { font-size: 24px; line-height: 30px; }
/* tutti gli elementi di tipo p */
p { font-size: 16px; margin-bottom: 10px; }
/* tutti gli elementi di tipo input con attributo
* type uguale a 'search' */
input[type=search] { width: 500px; }

Nel primo blocco impostiamo per entrambe le sezioni della nostra pagina una larghezza di 960px adatta ad una visualizzazione 1024x768. Quindi centriamo le sezioni nella pagina, impostando margini (margin) automatici a destra e a sinistra (auto) e le distanziamo di 10px in alto e in basso.

Nel secondo blocco impostiamo il margine superiore (margin-top)solo per la sezione con attributo id uguale a 'classifica'. Questa istruzione viene perciò applicata ad un elemento che già possiede un margin con il risultato di sovrascrivere la proprietà precedente (ma solo per la parte superiore).

Infine decidiamo che la lista ordinata sia un elenco di tipo decimale, che abbia un titolo di corpo 24px e che l'altezza del testo sia di 30px. Applichiamo qualche modifica anche all'elemento paragrafo ed infine aumentiamo la larghezza del campo di inserimento testo. Eseguiamo ora la pagina e apprezziamo il deciso miglioramento.

Javascript

Non bastano poche righe per introdurre quello che a tutti gli effetti si presenta come un completo linguaggio di programmazione. Avremo modo di sperimentare Javascript nelle prossime lezioni, per ora basti sapere che la sua funzione più classica è quella di poter eseguire azioni allo scatenarsi di specifici eventi, come l'invio di un form, il movimento del mouse, il click su di un pulsante e così via.