Possiamo definire l'HTML come un "linguaggio" artificiale (con un ottimo livello di standardizzazione mondiale) che permette di generare pagine interattive, essenzialmente destinate ad essere "pubblicate" su un sito Internet.
Requisiti richiesti per questo corso
Si presuppone un livello medio-basso di conoscenza informatica: un minimo di dimestichezza con l'ambiente WINDOWS, saper utilizzare un programma di video scrittura, aprire e chiudere delle cartelle, cancellare, rinominare, copiare dei file, ecc.In caso di utilizzo del sistema operativo LINUX, si presuppone l'utilizzo di un editor di base, quali vi, emacs, ecc., l'uso di uno tra i numerosi programmi di grafica liberamente distribuiti, ecc.
Data, "purtroppo", la maggiore diffusione di WINDOWS, gli ESEMPI OPERATIVI saranno effettuati su quest'ultimo, mentre resteranno comunque valide, per qualunque altro sistema operativo, le istruzioni HTML.
Introduzione e concetti fondamentali
Non è questa la sede per descrivere
gli innumerevoli vantaggi di Internet e delle pagine rese pubbliche grazie
a tale tecnologia: i settori interessati spaziano infatti dal commercio
alla cultura, dalla didattica all'interscambio e alla cooperazione scientifica,
dal semplice svago e divertimento alla divulgazione e all'informazione,
ecc. La filosofia di fondo è che noi, dal Ns computer, possiamo
collegarci ad un'altra macchina magari presente in Australia, e da quella
prelevare dei dati che ci interessano, oppure semplicemente visualizzare
delle pagine ivi pubblicate. Il fatto straordinario è che tutto
questo è stato reso possibile dall'utilizzo dell'unico mezzo che,
più o meno capillarmente, raggiunge ogni angolo del mondo: il telefono.
Naturalmente il Ns computer non è connesso direttamente a quello
in Australia, ma ad un elaboratore "centrale" geograficamente
"vicino", nella Ns regione o in una confinante. A questo elaboratore
centrale detto server, come noi, sono connessi migliaia di utenti,
in quella che è una vera rete geografica che gestisce un certo
bacino d'utenza. Anche in Australia, dunque, ci saranno una o più
reti che fanno riferimento a dei server, ovvero a degli elaboratori che
condividono delle risorse con gli utenti di una determinata area geografica.
Di queste reti ne esistono migliaia, in tutto il mondo, e sono intercollegate
da particolari dispositivi di "smistamento" detti router.
Ogni utente è collegato ad un server tramite la propria linea telefonica,
mentre i server sono connessi alla rete mondiale con collegamenti particolari
ad altissima velocità, chiamati dorsali.
 |
Poichè
Internet effettivamente connette dei computer attrraverso il collegamento
tra diverse reti, può essere più correttamente definita
come una rete tra reti.
Oggi
saper realizzare delle pagine web è sicuramente facilitato dalla
miriade di programmi circolanti. Ma in base alle esperienze di lavoro
e didattiche, ritengo che una conoscenza solida, seppur di base, del linguaggio
fondamentale compreso dai browser,
sia indispensabile.
Il linguaggio d'elezione utilizzato dalle pagine del World
Wide Web si chiama HTML,
ed è costituito da istruzioni che indicano al browser come disporre
testo, figure, suoni, filmati, ecc. su un documento elettronico che è,
in definitiva, la Ns pagina web. In effetti, più che da istruzioni,
potremmo dire che l'HTML è formato da tag, ovvero da "marcatori"
che specificano il formato con il quale gli oggetti (testo, immagini,
ecc.) andranno "disposti" e le eventuali azioni sugli stessi.
La pagina così prodotta è definita ipertestuale (HyperText),
intendendo con tale termine un testo che consente l'inserimento di "azioni",
appunto, quali la comparsa di un messaggio cliccando su una parola, o
il "salto" verso altre pagine...
Ma cosa accade quando sul Ns computer visualizziamo una pagina web? Ricordiamo
che la pagina potrebbe essere su un CD-ROM o su un dischetto, ma, molto
più probabilmente, potrebbe essere memorizzata su un computer a
chilometri di distanza, guarda caso in Australia.
Attraverso un insieme di "regole" di comunicazione tra
computer, che viene definito protocollo, il nostro computer ha
inviato la richiesta di voler visualizzare delle pagine e le stesse ci
vengono inviate "spezzettate" sotto forma di tanti "pacchetti"
di dati, che, attraverso le linee telefoniche (o, per i più
fortunati attraverso un ricevitore satellitare...) raggiungono il nostro
PC e vengono poi ricostruiti in modo a noi trasparente.
I protocolli di comunicazione sono la parte più astratta e lontana
dall'utente, in Internet. Tuttavia essi ne sono parte essenziale, in quanto
consentono la comunicazione e lo scambio dati tra milioni e milioni di
utenti.
Il protocollo standard che tutti i computer connessi tramite Internet
debbono usare si chiama TCP/IP.
Esso è del tipo a commutazione di pacchetti, ovvero consente
il trasferimento di dati, come detto, spezzettandoli in più pacchetti,
ciascuno dei quali ha, tra le altre cose, un indirizzo di recapito, nel
nostro caso l'indirizzo
del nostro computer. Il TCP/IP è tuttavia parte di un sistema di
trasferimento dati molto più ampio, che comprende 1) l'hardware,
ovvero le linee, i cavi, le schede, 2) i driver di rete (programmi che
gestiscono le schede), 3) il TCP/IP stesso, ecc. Quando si debbono trasferire
dei dati attraverso una rete, occorre definire protocolli specifici a
seconda del tipo di dati. Il TCP/IP è infatti a sua volta suddiviso
in livelli, e al primo di essi appartengono protocolli specifici quali
FTP (per traferire file), SMTP per la posta elettronica, HTTP per il trasferimento
di file ipertestuali tra cui le nostre pagine HTML.
Un approfondimento di tali concetti, tuttavia, esula dal presente corso,
percui possiamo procedere, finalmente, con la costruzione delle pagine
HTML.
Facilitiamo
il primo approccio immaginando che dobbiamo dettare telefonicamente un
volantino ad un tipografo, che "impersona" un generico browser.
Per convenzione il documento, volantino o quantaltro, lo chiameremo pagina
HTML.
Il nostro interlocutore, inoltre, non ha tempo da perdere, quindi esige
un insieme di regole che permettano di NON perderci in chiacchiere, ma
di comunicare in modo veloce ed essenziale: 1) il testo da pubblicare
e 2) COME lo vogliamo stampato.
Vediamo
in "italiano" come potrebbe essere costituito un ipotetico documento
HTML:
<questa è una pagina HTML>
ciao a tutti
<fine pagina HTML>
Il tipografo, dall'altro capo del telefono, riceve la frase "questa
è una pagina HTML", e capisce che deve interpretare tutto
quanto seguirà, ma non scrive niente sul volantino. Poi riceve
la frase ciao a tutti e la copia sul volantino, con un carattere generico
standard, visto che non gli abbiamo detto diversamente. Infine riceve
"fine pagina HTML", quindi chiude il ricevitore e va a stampare
il volantino.
In ambiente web, se attraverso il collegamento di rete arrivassero ad
un browser le righe precedenti in formato testo, cioè esattamente
come noi le vediamo, il browser visualizzerebbe la scritta
ciao
a tutti
su una pagina vuota bianca.
NON visualizzerebbe le scritte contenute tra <...> in quanto le
stesse sarebbero interpretate come istruzioni e non come contenuto. Cerchiamo
di capire meglio con un ulteriore esempio, mettendoci per un attimo nei
panni del tipografo:
<questa
è una pagina HTML>
ciao a <scrivi in grassetto>tutti<fine scrittura in grassetto>,
come va?
<fine pagina HTML>
il risultato prodotto sarebbe
ciao
a tutti, come va?
In modo un
pò semplicistico potremmo dire che una "pagina 'HTML"
è un insieme di 1) dati da visualizzare e di 2) istruzioni, comandi,
marcatori o più correttamente TAG, che dicono "come"
tali dati debbono essere visualizzati.
Quando scriviamo le istruzioni in un tag possiamo utilizzare indifferentemente
lettere maiuscole e/o minuscole.
Le "istruzioni",
o TAG, sono espresse tra i due caratteri < > e, in genere,
devono essere "chiuse" da un analogo "contrordine".
Nell'esempio visto una istruzione dice al browser di iniziare a scrivere
il testo in neretto, un'altra dice che è terminata la scrittura
in neretto.
Ovviamente il browser interpreta le regole e a noi fa vedere solo i dati.
Per semplificare potremmo decidere che, dato un tag, il relativo tag
di chiusura è come il primo, ma preceduto dal carattere / (slash).
Per semplificare ulteriormente, inoltre, il TAG di chiusura necessita
solo della prima parola presente in quello di apertura: <a voi
un tag di apertura>qui scriviamo</a>. Questa convenzione ci evita
di dover riscrivere in chiusura, un tag particolarmente lungo!
L'esempio
precedente (ciao a tutti, come va?) diverrebbe dunque:
<pagina HTML>
ciao a <grassetto: inizia a scrivere con questo stile>tutti</grassetto>,
come va?
</pagina>
Se un TAG
NON ha lo slash, si potrebbe leggere implicitamente come "inizio
di....". Ad esempio <pagina html> si potrebbe leggere come
inizio di una pagina html, <grassetto> come inizio della scrittura
in grassetto, ecc..
Lo slash / andrebbe letto come "fine di...." e implica la cessazione
del comando relativo.Ad esempio </pagina html> diventerebbe "fine
della pagina html", </grassetto> fine della scrittura in grassetto,
ecc.
Arricchiamo
l'esempio:
<pagina HTML>
ciao a <grassetto: inizia a scrivere con questo stile>tutti</grassetto>,
come va?<accapo>
Scriviamo anche <corsivo: inizia a scrivere con questo stile>in
corsivo</corsivo>.
</pagina>
e vediamo il risultato:
ciao
a tutti, come va?
Scriviamo
anche in corsivo.
Notiamo che per andare correttamente accapo, abbiamo dovuto inserire un "ordine" apposito, ovvero un TAG: <accapo>, che non ha bisogno di un analogo TAG di chiusura. La sua azione inizia e termina lì, con l'andare accapo, appunto!
Prima o poi,
però, dovremo abbandonare l'esempio con il Ns amico tipografo e
prepararci a comunicare con un freddo browser, quindi con un programma
che gira su un qualsiasi elaboratore, con un qualsiasi sistema operativo,
ed in grado di "capire" l'HTML.
A questo punto incontreremmo una sconcertante verità: l'HTML, come
i linguaggi artificiali di programmazione, è essenzialmente scritto
in inglese, quindi dovremo imparare almeno alcune fondamentali parole,
ovvero le loro iniziali.
Gli esempi italianizzati che abbiamo visto, a questo
punto, lasciano il posto ai veri comandi HTML, che sarebbero correttamente
interpretati da qualunque browser:
<HTML>
ciao a <B>tutti</B>, come va?
</HTML>
Il risultato sullo schermo sarebbe effettivamente: ciao a tutti,
come va?
L'esempio più completo che abbiamo visto, dove c'è un accapo e il corsivo, diventa, in una corretta forma HTML:
<HTML>
ciao a <B>tutti</B>, come va?<br>
Scriviamo anche <I>in corsivo</I>.
</HTML>
ciao
a tutti, come va?
Scriviamo
anche in corsivo.
questo
codice HTML equivale ai successivi (riportati per farVi capire
che al browser NON importa come noi impaginiamo il documento: lui interpreta
SOLO i TAG).
<HTML>
ciao a <B>tutti</B>, come va?<br> Scriviamo anche
<I>in corsivo</I>.
</HTML>
oppure
<HTML>ciao a <B>tutti</B>, come va?<br> Scriviamo
anche <I>in corsivo</I>.</HTML>
Nel linguaggio
HTML è possibile inserire dei comandi all'interno di altri comandi.
Se ci pensiamo bene, tutti i comandi di formattazione sinora visti <b>,
<br>, ecc., sono scritti all'interno dei due tag di apertura e
chiusura <HTML>.... </HTML>.
Ma lo scopo che vogliamo raggiungere è quello di scrivere una
parola, ad esempio, non solo in grassetto, ma anche in corsivo. A tale
scopo non è stato necessario creare un tag tipo <grassetto+corsivo>,
ovvero <bi>, ma è si è consentito semplicemente
di utilizzare i due comandi già esistenti uno dentro l'altro,
ovvero nidificati, come si dice in... gergo.
Vediamo un esempio:
ciao
a <B><I>tutti</I></B>, mi auguro che questo
<I><B>esempio sia</B></I> chiaro
produrrà
un output di questo tipo: ciao a tutti, mi
auguro che questo esempio sia chiaro
Notiamo come non sia importante quale tag utilizziamo per primo: quello
che conta è che si adotti la logica del "primo ad essere
aperto, ultimo ad essere chiuso" (in gergo FILO: First In Last
Out).