banner come creare una pagina HTML

Nello scrivere questo documento, suppongo che Tu abbia gia' una qualche dimestichezza con WWW ed i suoi browser piu' noti ed usati, ovvero Lynx, Mosaic o Netscape, e con le idee di base delle architetture client-server. Il fatto che Tu stia leggendo e' gia' un buon indice che questo sia vero!


Note importanti:

1. Questo documento e' ancora provvisorio. L'ho scritto molto in fretta e quindi non e' ancora ne' completo, ne' error-free. Qualunque commento o correzione e' benvenuta (cfr le conclusioni)

2. Dato che pare ormai che l'uso di chi costruisce un nuovo broswer sia quello di inserirvi delle possibilità "proprietarie" e quindi incompatibili con gli altri, qui mi limiterò per lo più all'HTML "standard" (se non capite quello che sto dicendo, rileggete la frase dopo aver letto tutto il tutorial).
Eventuali caratteristiche utili ed ormai largamente diffuse sono comunque trattate, magari in breve.
A favore dei suddetti costruttori c'è comunque da dire che l'unica versione standard di HTML sarebbe effettivamente la 1.0, mentre la 2.0 è in avanzata via di standardizzazione e la 3.0 è completamente in discussione..

3. Nonostante la crescente lunghezza, ho mantenuto tutto in un unico grande file, per facilitare chi voglia stampare il tutto e averlo a portata di mano.

break

 

break

Cosa e' WWW

Dato che centinaia di ore, bytes e sforzi sono stati spesi per spiegare al mondo WWW, saro' breve: la sigla sta per World Wide Web e si tratta di un sistema client-server per fornire e recuperare informazioni su rete. Il sistema e' nato al CERN ma il client grafico piu' noto ed utilizzato e' Mosaic, sviluppato all'NSCA. (Questo era vero quando è uscita la prima versione di questo documento.. ora Netscape la fa da padrone, ed è peggio, perchè si compra!). Mosaic e' solo un possibile client mentre il Web, il protocollo Http (hypertext transfer protcol) etc sono stati sviluppati al Cern.

break

Requisiti minimi per costruire una home

Il primo e' quello di disporre di un client http. Dato che stai leggendo, direi che questo e' ok! :-)
Il secondo e' avere l'autorizzazione del tuo sysadm. In genere se il tuo sistema possiede un client, possiedera' anche un server WWW.. il nome del server sara' del tipo www.mio.dominio; questo e' un cosiddetto alias ovvero un nome che in realta' viene rimappato su una particolare directory di una macchina del tuo sistema (ad esempio, di nome /web-data).
Siccome tale directory non e' generalmente accessibile in scrittura ma solo in letture ed esecuzione (a parte per il gestore del web, naturalmente), dovrai espressamente chiedere al gestore stesso che ti crei una sottodirectory dove mettere effettivamente i tuoi documenti html.
Otterrai quindi una directory del tipo /web-data/utenti/mionome all'interno della quale avrai pieni diritti.

break

Cos'e' una homepage ?

Una homepage e' un documento Html che puo' essere usata come punto di raccolta di informazioni che interessano il possessore e possono interessare altre persone.
E' buona norma che il suo nome contenga in qualche parte la parola 'home': ad esempio, home.html, myhome.html, etc.. Quasi tutti i browser, poi, cercano un documento di default quando si specifica solo una directory. Per molti il nome e' DEFAULT.HTML che quindi e' un'ottima scelta per il nome del documento principale.

break

Html, cosa diavolo e' ?

HTML sta per HyperText Markup Language. L'idea di base e' che un documento html e' un normale testo ascii al cui interno sono pero' presenti dei 'tags' dal formato specifico che aggiungono informazioni; il client, leggendo un documento, scandisce il testo e, quando trova un tag, modifica in modo opportuno il modo di visualizzazione e/o l'azione associata a quel testo.
Per essere chiari, il formato dei tags e' il seguente:

  

<nometag>

Alcuni tags tra i più usati sono specificati più avanti, inoltre un'ottima versione inglese si puo' trovare in A beginner's guide to Html.

break

Le regole d'oro per la scrittura html

Una regola importante e' di non mettere troppe immagini! Un'immagine richiede tempo per essere caricata e chi ha selezionato il vostro link puo' non avere voglia di aspettare dieci minuti; l'ideale e' che la home non abbia nessun'immagine, ed eventuali vostre fotografie etc siano presenti sotto forma di link. (con alcuni browser, ad esempio Mosaic, e' possibile ritardare il caricamento delle immagini in modo da evitare questo problema)
Una seconda regola e' quella di ricordare sempre di rendere accessibile 'al mondo' il vostro documento.
Una terza regola e' quella di cercare il piu' possibile di commentare i vostri link; una lista di URL senza alcun commento serve a poco: e' meglio spendere qualche parola in modo che l'utente della vostra pagina si faccia un idea di che cosa contenga l'URL che gli proponete.
Infine, cercate per quanto possibile di indirizzare tutti alla vostra home page, e non a vostri documenti ad essa collegati: infatti (per esperienza) nomi e contenuti di questi tendono a cambiare con frequenza, e quindi e' meglio fornire riferimenti a links nella home che non a file fisici.

break

Caccia un URL!

Gli URL (Uniform Resource Locator) costituiscono un formato "uniforme" (appunto!) per dichiarare sia la locazione fisica di un documento che il protocollo del documento stesso; il formato generico è 

	formato://..host../path

Più, concretamente, qualcosa del tipo 

	http://www.mio.host/Public/mydoc.html

indica che il file /Public/mydoc.html è accessibile sul webserver "www.mio.host" e ha formato http. L'URL puo' non essere completamente specificato: se per esempio volete indicare un documento presente sul vostro Webserver locale, è sufficiente specificare il path del file: 

	http:/Public/mydoc.html

ha lo stesso effetto del precedente se vi trovate sulla macchina "www.mio.host". Se l'URL indica il formato http ma non il nome del documento da aprire, il vostro browser cercherà di aprire un file (solitamente chiamato "index.html" oppure "welcome.html" e varianti con minuscole e maiuscole); se questo non c'è, è possibile che vi sia presentata una lista dei files nella directory oppure un errore (dipende da come è stato configurato il server).

Ecco alcuni protocolli tipici:

gopher una directory gopher; il browser presenta il menu gopher e permette di selezionare e leggere documenti 
 gopher://gopher.dsi.unimi.it/11/DSI
ftp il file specificato si trova su un server ftp; il browser permette di eseguire il trasferimento e, a volte, gestisce automaticamente la decompressione 
 ftp://ftp.dsi.unimi.it/pub/Conventions
file il file è un file "plain", senza formati particolari 
 file:mydoc.txt
news l'argomento e' un gruppo delle news 
 news: soc.culture.italian

break

Lo Scheletro

 

Ovvero, qual'è la struttura generica di un documento HTML?. Niente di più facile: ogni file html ha almeno due sezioni, una testa, delimitata dai tags <HEAD>...</HEAD>, e un corpo, delimitato dai tags <BODY>...</BODY>. Il tutto viene poi racchiuso dai tags <HTML>...</HTML> che indicano che l'intero documento è, appunto, in formato html.
Nella testata vanno in genere informazioni sul titolo del documento, metainformazioni su autore e contenuto, e tante altre cosette che potete guardarvi a w3.org. Nel body, invece, va il documento vero e proprio.

Riassumendo, quindi, lo scheletro di un documento html è suppergiù questo: 

	<html>
	<head>
	<title>Titolo</title>
	</head>
	<body>
	....
	</body>
	</html>

break

ESCappiamo via!

Ok. Abbiamo detto che un documento html è un semplice file di testo, con dei tags racchiusi tra parentesi acute, ovvero i simboli "maggiore di" e "minore di". Ora, se voglio avere nel testo proprio uno di questi due simboli, come faccio ?
La risposta sta nelle sequenze di Escape.

Una sequenza di escape ha il formato 

		&nome;
		&#codice;

e, sostanzialmente, rappresenta un carattere.
Per ogni carattere, esiste una corripondente sequenza di escape, e la cosa, di solito, è abbastanza inutile: per fare un esempio, &#65; rappresenta la sequenza di escape per la lettera A (il cui codice è 65); oppure, &amp; rappresenta proprio la 'e commerciale' (ampersand, in inglese).
Questo significa che quando il browser incontra nel testo una sequenza di escape, visualizza il carattere corrispondente; come accennavo, ciò è piuttosto inutile per i caratteri "normali", (per scrivere una 'A' maiuscola, digitare il carattere 'A' è decisamente la cosa migliore..), mentre diventa essenziale per ottenere i caratteri che, scritti come caratteri veri e proprio, verrebbero intrepretati dal browser in maniera errata; ecco alcuni dei più comuni:

 

 

 

 

 

break

Alcuni Tag tra i piu' usati

Una nota: alcuni tag qui elencati si "aprono" (es <B>) e si "chiudono" (</B>) e hanno effetto sul testo così racchiuso. In genere si possono innestare con tranquillità, l'importante è mantenere lo stesso ordine: quindi <B><I>CIAO</I></B> va bene, ma <B><I>CIAO</B></I> no.

 

Liste numerate Come sopra, tranne che i tag sono <OL> e </OL>. Un esempio:

 

  1. Elemento A
  2. Elemento B

Liste di definizioni L'aspetto è del tipo di questa che state leggendo..
Si apre con <DL> e si chiude con </DL>, e per specificare gli elementi della lista ci sono due tag: <DT> che indica l'oggetto definito, e <DD> che indica la definizione. Così 

<DL> 
<DT> Aereoplano
<DD> Oggetto che vola
<DT> Automobile
<DD> Oggetto che non vola (tranne le GolfGTI16V dopo la discoteca)
</DL>

produce

 

Aereoplano
Oggetto che vola
Automobile
Oggetto che non vola (..e gli sta bene!)

break

Incorniciamoci..

La versione 2.0 di Netscape ha incorporata un'ulteriore caratteristica interessante: i frames.
Questi permettono di suddividere lo spazio nel browser dove normalmente è contenuta una pagina in più sottospazi, ciascuno indipendente dagli altri; ciascun frame può contenere una pagina html differente: così, in una striscia in alto si può caricare una pagina contenente un logo, e in un frame laterale mettere una toolbar o dei link per muoversi velocemente, mentre la parte centrale contiene i dati veri e propri.

Come si realizza in pratica il tutto ? In modo molto semplice: in un file html separato si definiscono dettagliatamente i frames, mediante dei tags opportuni; un frame è definito da 

	<frame scrolling="no|yes|auto" name="nome"
	src="URL"
	marginwidth="numero" marginheigth="numero">

I significati dovrebbero essere ovvi: scrolling può valere yes,no o auto e controlla la presenza della barra di scorrimento, name serve per dare un nome al frame (per potercisi riferire, come vedremo subito), gli altri due elementi danno le dimensioni dei margini; volendo, si può aggiungere il tag noresize che impedisce al lettore di ridimensionare il frame.
La proprietà src indica qual'è il documento da caricare inizialmente nel frame.
Tutte le definizioni<frame> devono essere racchiuse in una coppia di tags 

	<frameset rows="10%,30%,*">
	...
	</frameset>

che servono a definire quanta parte dello spazio disponibile vada assegnato a ciascun frame: qui, ad esempio, si indica che il primo frame avrà il 10% di spazio, il secondo il 30%, e il terzo tutto lo spazio rimanente (*).

Resta solo da vedere come si fà ad indicare che un particolare documento sia caricato in un dato frame, quando viene selezionato un anchor
Per fare questo, alla Netscape hanno definito una nuova proprietà per il tag <a>, ovvero la proprietà target="nomeframe"; ad esempio: 


	<a href="pippo.html" target="frame1">

questo indica semplicemente che, quando viene selezionato un anchor, la pagina corrispondente verrà caricata nel frame chiamato frame1.

Se poi volete vedere un tutorial esclusivamente sui frames, potete fare un click nelle pagine dell'amico Davide, esattamente qui

break

..con tabelle

Una caratteristica interessante introdotta dalla specifica 3.0 di HTML (in corso di definizione) è quella di permettere la costruzione di tabelle, come sempre attraverso tags opportuni.
Una tabella è consiste, per quel che ci riguarda, in una serie di righe, ciascuna contenete un certo numero di celle dati.

Per definire una tabella, si usa la coppia di tag 

	<table border width="xxx" height="xxx" 
	valign="top|center|bottom">
	...
	</table>

border è opzionale la presenza o meno di una cornice (e la sua dimensione, con Netscape, mediante la notazione border="xx". width ed height specificano larghezza ed altezza della tabella, mentre valign l'allineamento di default per le singole celle.
Una riga si specifica mediante i tags "table row" 

	<tr>
	...
	</tr>

che, a loro volta, racchiudono i singoli dati, specificati con 

	<td>dato</td>

Un esempio: la specifica 

	<table border width="400" height="50" valign="center">
	<caption>Tabella di test</caption>
	<tr>
	<td align="center">Ciao
	<td>a
	<tr>
	<td>tutti
	<td>voi!
	<table>

produce

 

Tabella di test
Ciao a
tutti voi!

Come vedete, è possibile tranquillamente ignorare i tag di chiusura, e il modificatore align può essere associato a ciascun dato per definirne la centratura.

Infine, vediamo come è possibile ottenere celle che "spazino" su più linee o colonne: si fa usando per tag <tt> un modificatore colspan="xx" oppure rowspan="xx"; per esempio, 

	<table border width="400" height="50" valign="center">
	<caption>Tabella di test 2</caption>
	<tr>
	<td align="center" rowspan="2">Ciao
	<td>a
	<tr>
	<td>tutti
	<table>

produce

 

Tabella di test 2
Ciao a
tutti

break

Forms ed interazione

E veniamo ad un punto dolente. Tutte le belle cose descritte sopra aiutano a costruire una pagina che contiene informazioni che possano essere lette. Ma come fare se si vuole che il lettore possa anche fornire informazioni, oltre che leggerle? La risposta, in una parola, si chiama forms. Dato che una parola sola è un po' poco, mi spiegherò meglio. Andiamo ad incominciare.

L'idea è piuttosto semplice. Per prima cosa, nella pagina si specificano, attraverso opportuni tags, delle zone di input, in cui chi accede alla pagina potrà scrivere, o comunque interagire: i form, quindi, specificano sia zone di input alfanumerico (il lettore scrive quello che vuole, magari un bel complimento per la foto che avete digitalizzato con due ore di lavoro), di scelta guidata (tipicamente, una lista di possibilità), oppure di input univoci (un bottone di OK, per esempio, o dei radio button)

Nota: com'è ovvio, l'interazione con l'utente avviene attraverso il particolare client che questi usa: Mosaic, Netscape, Arena, Lynx, e chi più ne ha più ne metta; perchè i form funzionino, quindi, il client deve avere il supporto per i form. In realtà da un po' questo non è più un problema, dato che tutti i browsers "moderni" ce l'hanno. Comunque, uomo avvisato mezzo salvato: non provatevi a leggere pagine con forms usando Mosaic 0.94b!

Più avanti presento una serie di tags usati per far questo in pratica. Per ora rimaniamo sulla teoria. Quando un utente capita in una pagina con un form, probabilmente vorrà inserirvi dei dati (Altrimenti state leggendo per niente.. :^) ); in particolare, uno dei form è di solito un bottone che manda al client il messaggio "Ok, ho finito". Quando il client riceve questo messaggio, prende tutto ciò che l'utente ha scritto o selezionato, impacchetta questi dati con un formato preciso, e li spedisce al server.

A questo punto, il server che ci fa? Dato che la vostra pagina potrebbe servire a comunicare ricette di cucina marziane oppure i saluti alla nonna, è chiaro che non può essere il server ad elaborare i dati. Quindi, il server a sua volta passa i dati ad un altro programma (che voi avete scritto) che li mastica, li digerisce, e poi specifica un documento (html) di risposta, che viene inviato al client, che lo mostra. Questo programma si chiama query-server in quanto serve le richieste relativa ad una specifica serie di form.

La specifica di quale queryserver utilizzare per masticare ecc.. i dati viene fornita nello stesso tag con cui si dichiara il form.

Esempio pratico e chiarificatore (speriamo): supponiamo che la pagina di Pinco Pallino contenga un form che permette di scrivere un messaggio: l'utente scrive, poi "schiaccia" il pulsante "send"; il client guarda nella pagina, scopre che queryserver va utilizzato, e manda al server web i dati più quest'ultima informazione; il server web chiama il queryserver, passandogli i dati; il queryserver aggiunge l'header SMTP (quello delle mail, per intenderci) e chiama il programma di posta; poi genera una pagina temporanea con dentro scritto "Complimenti! Il tuo messaggio è stato spedito a Pinco Pallino!", la manda al client che la visualizza.
Niente di così difficile, vero?

Questo è quanto. Rimangono solo due problemi da chiarire: come si scrive un queryserver adatto ai dati eccezionali che arriveranno da chi legge la nostra pagina (e dove lo si deve mettere), e poi vedere quali sono i tags in gioco.

CGI&c

"Query-server", come dovrebbe ormai essere chiaro, è solo un nome altisonante per un programma che accetta dei dati in un formato specifico, fa qualcosa, e poi rimanda indietro un documento di risposta.

Questo programma si può scrivere in molti linguaggi diversi, da C, a Perl, oppure come script di shell .
Le specifiche di come interfacciare il proprio programma, scritto nel linguaggio prediletto, con il server web (ovvero: come accettare i dati, come "spacchettarli", come rispondere) costiuiscono la cosiddetta CGI (Common Gateway Interface). In pratica, per il C, si tratterà di linkare una libreria che contiene delle funzioni apposite; per gli script di shell, di leggere il contenuto di alcune variabili di environment;etc. Dato che fornire le specifiche precise è davvero troppo lungo, potete direttamente riferivi alla pagina apposita all'NCSA . Ci sono anche numerosi esempi di query server già pronti all'uso.

Un unico dettaglio in più: ricordate che i queryserver devono essere visibili al server web (cioè, in pratica, al daemon http) e che spesso quindi devono risiedere in una directory particolare, che a volte, per motivi di sicurezza, non è direttamente scrivibile dagli utenti di un sistema. Quindi potreste dover chiedere al vostro webmaster di piazzare il programma nella directory giusta.

break

I tags

Ecco alcuni tags per dichiarare i form più comuni. Questi tags potrebbero essere istanziati in modo differente da browser a browser. Ciò che segue vale per Mosaic per X-Window con Motif. Si spera che valga, all'incirca, per molti altri browser.

 

Dettagli e precisazioni si possono ottenere nella documentazione di Mosaic premendo qui

break

Java! (it's really hot!)

Forse avrete sentito parlare di Java e HotJava. Bè, se non l'avete ancora fatto, fatelo ora! Per il momento, non ho avuto tempo di scrivere nulla di dettagliato.. tuttavia, potete scaricare due tutorial che esistono in rete: sull'AWT (Applet Window Toolkit) e un tutorial (ahimè, in inglese) sul linguaggio.

Cosa sono Java e HotJava?

Java è un linguaggio di programmazione simile al C++, e HotJava è un browser WWW (scritto, guarda caso, in Java) che permette, in soldoni, di vedere dei programmi integrati (scritti in Java,C o C++), detti applet, all'interno di pagine web.
La cosa richiede ovviamente molte altre spiegazioni (e questo è solo un possibile uso del linguaggio), ma il tempo manca.. quindi, quando ne avrò un po' di più, lo userò per darle!

break

Conclusioni

Questo e' per ora tutto. Provate e riprovate e vedrete che qualcosa saltera' fuori. Un trucco per imparare e' questo: (funziona per pagine non-framed) se vedete qualcosa che vi piace in un dato documento ma non sapete come si fa, usate l'opzione "VIEW SOURCE" che vi mostra il file html completo di tags ed istruzioni!
Al limite salvatelo e poi editatelo e correggetelo. Se volete ho due link interessanti sulla mia home-page dove potrete trovare una lista aggiornatissima di tutti i tag HTML, e dopo a voi il divertimento di navigare e imparare:

Inoltre, nella mia homepage potete trovare un certo numero di altri riferimenti interessanti a caratteristiche piu' avanzate.

Spero che questo documento vi sia d'aiuto. Per richieste, commenti, correzioni (tutti benvenuti) mandatemi pure un messaggio

buon divertimento

break

Ottobre 1996 y smaggioni@frankeser.ch