Documenti Web - HTML / CSS / Javascript

Un documento web "ben formato" è composto da 3 componenti distinti e separati (si capirà meglio in seguito il motivo):

strato contenuto (HTML/XHTML)
strato presentazione (CSS)
strato comportamento (Javascript)

Strato contenuto - HTML/XHTML

Il contenuto è l'informazione che si vuole trasmettere all'utente. Comprende testo, immagini, suoni, video, altro.

L'informazione è descritta strutturalmente e semanticamente attraverso i linguaggi HTML o XHTML (o l'uno o l'altro).

Vediamo di capire meglio cosa si intende: un contenuto (es. il testo di un libro) è strutturato in titoli, sottotitoli e paragrafi i quali possono comprendere citazioni, indirizzi, codici, immagini, suoni, video etc.

HTML o XHTML devono essere usati solo ed esclusivamente per descrivere il contenuto. In altri termini è utilizzato per dire: "questo è un titolo" (h1, h2, ...), "questo è un paragrafo"(p), "questa è una citazione" (cite), "questa è una tabella che ha queste intestazioni di colonna" (table, tr, th, td) etc.

HTML o XHTML, pur permettendolo, non devono essere usati per definire l'aspetto del documento (compito dello strato presentazione e dei CSS) e non devono includere regole di comportamento (poichè compito dello strato comportamento).

Da qui è possibile proseguire con l'introduzione a HTML/XHTML.

Strato presentazione - CSS

Definisce l'aspetto dei contenuti. Per aspetto non si intende solo quello grafico: un documento può essere visualizzato anche in altre forme su altri dispositivi. Ad esempio per i non vedendi potrebbe esserci un lettore vocale, oppure potrebbe essere una "visualizzazione cartacea" su stampante.

L'aspetto dei contenuti è definito attraverso l'uso dei CSS che permettono di specificare, attraverso i selettori, come visualizzare/presentare gli elementi del contenuto.

HTML e XHTML permettono di includere CSS direttamente inline negli elementi. Questa è una pratica da evitare. I CSS devono essere su file esterni richiamati dai file dello strato contenuto.

Da qui è possibile proseguire con un'introduzione ai CSS.

Strato comportamento - Javascript

Definisce l'interazione con l'utente attraverso il linguaggio di scripting Javascript. Con interazione si intende ad es. la semplice validazione dei dati immessi dall'utente in un form oppure anche la gestione di un'interfaccia simile alle applicazioni standalone.

In questo strato è utile l'uso di librerie o framework che ci semplificano il lavoro. Tra i vari framework disponibili segnalo JQuery.

HTML e XHTML permettono di includere codice Javascript direttamente inline negli elementi o nel contenuto. Anche questa è una pratica da evitare e sarebbe opportuno portare tutto all'esterno su file separati.

Da quì è possibile proseguire con Introduzione a Javascript.

Per approfondire ...

È possibile approfondire gli argomenti trattati nelle pagine seguenti:

Se invece si ha già una conoscenza di base è possibile proseguire con il tutorial che mostra come creare un documento web mantenendo la separazione dei 3 strati descritti: