Come scrivere una pagina WEB
(di Silvia Cappelli, Segreteria Scientifica, INFN Firenze)

Questo documento è destinato a quelli che, come la sottoscritta, hanno l'esigenza di imparare a scrivere pagine WEB semplici senza ambizioni grafico/estetiche particolari. Non ha la pretesa di essere un manuale di riferimento ma solo un aiuto per "cominciare".

Come fare ...
	... per creare una pagina WEB ... per iniziare a scrivere un documento in HTML ... le intestazioni ... le liste ... gli evidenziatori di frase ... le tabelle ... i riferimenti ipertestuali (link o ancore) ... per inserire le immagini ... altri comandi utili ... caratteri speciali ... per controllare la pagina WEB che abbiamo scritto ... per saperne di più

[Home INFN] [Servizio di Direzione]

... per creare una pagina WEB

Bisogna innanzitutto sapere che anche le più semplici pagine che vediamo su Internet hanno alle loro "spalle" una serie di comandi che servono al browser (il programma che le visualizza, vedi Netscape, Internet Explorer, ecc.) per sistemare visivamente i caratteri nel modo voluto dall'autore (grandezza, fine riga, fine paragrafo, tabelle, colori, ecc.). Questi comandi devono far parte del linguaggio HTML (HyperText Markup Language). Per chi vuole cimentarsi nel creare pagine WEB si aprono quattro possibilità :

Chi non ritiene necessario imparare l'HTML può creare i suoi file tranquillamente con un programma WYSIWYG (What You See Is What You Get). Netscape stesso (dalla versione 3.0 in poi) contiene il comando EDIT PAGE/MODIFICA PAGINA che permette di modificare la pagina visualizzata senza conoscere un comando di HTML. Analogamente con Microsoft Word 97 si può creare pagine WEB, compresive di figure, form, colori, ecc. in modo WYSIWYG. Se scegliete questa strada, il presente documento non vi servirà ma dovete tener presente che rimarrete sempre legati alla possibilità di avere a disposizione questi programmi.
Un'altra possibilità che evita di imparare l'HTML, potrebbe essere quella di scrivere una pagina usando un programma di videoscrittura (tipo Word97 o Excel97) che, contenendo l'opzione SALVA COME HTML..., permette alla fine di convertire il risultato in un file HTML. I convertitori possono essere estremamente utili, specialmente per rendere disponibili il più in fretta possibile i documenti preesistenti. Accade però che i convertitori interpretino in modo indesiderato i contenuti, costringendo a perdere più tempo di quanto sarebbe stato necessario per scrivere manualmente in HTML.
Nel caso invece che si scelga di essere dei puristi e quindi indipendenti da ogni programma di videoscrittura, bisogna sapere che un file in linguaggio HTML può essere creato e modificato con qualsiasi text-editor (Blocco Note, WordPad, WORD, PFE, ecc.). L'importante è che il file creato abbia come estensione ".html" altrimenti il browser (Netscape o Internet Explorer) non lo riconosce. Se si usa un programma di videoscrittura (tipo Word) come text-editor (cioè immettendo a mano i comandi HTML) occorre assicurarsi di salvare sempre il file in formato di puro testo.
Una quarta possibilità è quella di usare dei text-editor pensati per scrivere in html. Questi infatti permettono di lavorare sul file sorgente (quello con i comandi per intendersi) ma contengono menu e bottoni che suggeriscono i comandi. Questi text-editor offrono un valido aiuto senza far perdere "la padronanza" della pagina. La mia preferenza personale va al programma "Arachnophilia" che è un editor di testo gratuito (anzi "care ware") contenente alcuni pulsanti che consentono di inserire con maggior facilità i comandi HTML senza doverli ricordare a memoria. Si può usare solo con sistema Windows 95/98/NT e si può scaricare da http://www.arachnoid.com/arachnophilia/index.html.

Ciò premesso,consiglio, per prima cosa, di cercare su Internet una pagina che abbia grossomodo la struttura che si desidera e salvarla con il comando SAVE AS.../SALVA COME.... sotto il menu FILE (ATTENZIONE: salvare come file HTML o "source" e non "solo testo"). Poi si riapre il file salvato con l'editor che si preferisce e si fanno le modifiche opportune. ATTENZIONE: in questo modo non si salvano anche le figure che vediamo inserite nella pagina. Il file che abbiamo salvato infatti contiene solo i riferimenti ai file contenenti le figure che normalmente sono di formato GIF o JPEG (vedi anche ... per inserire le immagini). Se ci interessa salvare sul nostro computer anche le figure bisogna collocarsi col puntatore del mouse sulla figura in questione, cliccare col pulsante destro del mouse e scegliere SAVE IMAGE AS.../SALVA IMMAGINE COME.... Un altro trucco essenziale: quando si sta guardando una pagina WEB che contiene qualcosa che ci piace si seleziona il comando DOCUMENT SOURCE/SORGENTE PAGINA sotto il menu VIEW/VISUALIZZA. Si aprirà un'altra finestra dove si vedono i comandi che hanno prodotto quella pagina e che possiamo eventualmente copiare.
C'è inoltre da tener presente che, per rendere le pagine sempre più accattivanti, gli autori delle pagine WEB fanno un uso sempre più pesante di grafica e animazioni. Vi capiterà quindi spesso di scoprire che quello che sembrava testo (per esempio una lista di parole cliccabili) si riveli una figura. In tal caso non la potrete modificare e adattare alla vostra pagina se non tramite un programma di grafica. Anche gli sfondi, se non sono di un colore uniforme, sono figure (cioè file in formato GIF).
[Torna all'indice]

... per iniziare a scrivere un documento in HTML

Un documento HTML si compone di due parti: l'intestazione (HEAD) e il corpo (BODY). Esempio:

<HTML>
<HEAD>
<TITLE>
questo è il titolo che appare sulla striscia alta della finestra
</TITLE>
</HEAD>
<BODY>

Qui si scrive il documento.

</BODY>
</HTML>

Per far apparire il testo che scriviamo nel formato voluto si usano i vari comandi (detti "tag") la maggior parte dei quali hanno un inizio <iniziocomando> e una fine </finecomando>. I comandi possono essere scritti indifferentemente con lettere maiuscole o minuscole.
ATTENZIONE: i browser ignorano gli spazi aggiuntivi, le tabulazioni e gli a capo forzati. [Torna all'indice]

... le intestazioni

Sono previsti sei tipi di intestazioni (headings) che possono essere usati come titoli delle diverse porzioni del testo:

H1

H2

H3

H4

H5

H6

Per ottenerle basta scrivere i comandi di inizio e di fine ai relativi titoli.
Per esempio scrivendo:

<H1> Titolo che si vuole in H1 </H1>

Si ottiene:

Titolo che si vuole in H1

[Torna all'indice]

... le liste

Liste non ordinate
Scrivendo

<UL>
<LI> primo elemento
<LI> secondo elemento
<LI> ...
</UL>

si ottiene

primo elemento
secondo elemento
...

Liste ordinate
Scrivendo

<OL>
<LI> primo elemento
<LI> secondo elemento
<LI> ...
</OL>

si ottiene

primo elemento
secondo elemento
...

Questi due tipi di lista si possono combinare annidandole tra loro. Per esempio:

primo elemento
- primo sottoelemento
- secondo sottoelemento
secondo elemento
terzo elemento

Liste di definizioni
Scrivendo

<DL>
<DT> termine </DT> <DD> definizione primo termine </DD> 
<DT> termine </DT> <DD> definizione secondo termine </DD> 
<DT> termine </DT> <DD> definizione terzo termine </DD> 
</DL>

si ottiene

termine: definizione primo termine
termine: definizione secondo termine
termine: definizione terzo termine

[Torna all'indice]

... evidenziatori di frase

Ci sono vari comandi che rendono dei caratteri particolari per evidenziare:

testo in grassetto

testo in grassetto
oppure testo in grassetto

testo in corsivo

testo in italico
oppure testo in italico
oppure <VAR> testo in italico </VAR>
oppure <CITE> testo in italico </CITE>

testo mono-spaziato

<KBD> testo mono-spaziato</KBD>
oppure <CODE> mono-spaziato </CODE>
oppure <SAMP> mono-spaziato </SAMP>
oppure <PRE> mono-spaziato </PRE> può essere usato per più linee e infatti crea automaticamente una riga vuota dopo.

[Torna all'indice]

... le tabelle

titolo della tabella (facoltativo)
intestazione della colonna	intestazione della colonna
cella 1	cella 2
cella 3	cella 4

Per ottenere una tabella semplice come quella che precede si fa:

<TABLE BORDER="BORDER"> 
<CAPTION> titolo della tabella  (facoltativo) </CAPTION> 
<TR>
  <TH> intestazione della colonna </TH>
  <TH> intestazione della colonna </TH>
</TR>
<TR>
  <TD> cella 1  </TD>
  <TD> cella 2  </TD>
</TR>
<TR>
  <TD> cella 3  </TD>
  <TD> cella 4  </TD>
</TR>
</TABLE>

I </TR> e </TD> sono facoltativi. Si possono formattare le tabelle con un gran numero di attributi (bordo, larghezza, spaziatura, allineamento, ecc.) che riguardano la tabella nel suo insieme oppure le singole righe (TR) o le singole celle (TD). Il tema però comincia ad essere un po' complicato e quindi consiglio di consultare un "vero" manuale (vedi il paragrafo ... per saperne di più). [Torna all'indice]

... i riferimenti ipertestuali (link o ancore)

Il piatto forte di tutto il WWW sono i riferimenti ipertestuali o addirittura ipermediali: ciò significa che in una pagina WEB, anche la più semplice, c'è sempre qualcosa che si può cliccare con il mouse, normalmente riconoscibile dal colore diverso e dalla sottolineatura, e che ci fa apparire un altro documento oppure ci fa aprire una finestra di composizione di un messaggio all'indirizzo specificato oppure un suono o un video, ecc.. Per ottenere nella nostra pagina un riferimento (detto anche link o ancora) si scrive:

<A HREF="indirizzo (URL) del documento con cui si vuole il 
collegamento"> parole che si vuole che appaiano cliccabili </A>

Per esempio:

<A HREF="http://www.fi.infn.it/sezione/infn.html"> Home INFN</A>

E si ottiene:
Home INFN Il riferimento può essere anche all'interno del nostro documento (questo documento ne contiene diversi). In questo caso:
... i riferimenti ipertestuali (link o ancore)

<A HREF="#link">... i riferimenti ipertestuali (link o ancore)</A>

Nel punto del documento al quale vogliamo rimandare si scrive:

<A name="link">

Il riferimento può essere inoltre l'indirizzo di una persona. In questo caso si scrive:

<A HREF="mailto:silvia.cappelli@fi.infn.it">
silvia.cappelli@fi.infn.it</A>

E si ottiene:
silvia.cappelli@fi.infn.it
cliccando il quale si apre una finestra che consente di spedire un messaggio di posta elettronica. [Torna all'indice]

... per inserire le immagini

Le figure che vediamo nelle pagine WEB sono in realtà dei riferimenti a file di formato particolare (gif o jpeg) che devono essere presenti nella directory che indichiamo nel nostro testo. Per esempio, per inserire questo pallino blu

si scrive:

<IMG SRC="http://www.fi.infn.it/icons/blueball.gif" 
WIDTH=14 HEIGHT=14 ALT=".">

tra le " " si deve scrivere l'URL (comunemente detto l'indirizzo) del file contenente la figura. WIDTH e HEIGHT sono le dimensioni che vogliamo dare alla figura e ALT è la descrizione della figura che appare a chi usa il browser senza il caricamento automatico delle immagini oppure un browser non grafico e quindi è auspicabile inserire una descrizione più chiara possibile. [Torna all'indice]

... altri comandi

Altri comandi utili per scrivere pagine WEB sono:

 per commentare parti del testo che poi non saranno visibili.
  per andare a capo (interruzione di linea).
 per delimitare i paragrafi (va a capo e lascia una riga bianca dopo).
<HR> produce una linea orizzontale.
<ADDRESS> ..... </ADDRESS> per la parte che fa da "firma" del documento contenente il nostro nome e/o indirizzo.

[Torna all'indice]

... caratteri speciali

Tabella contenente i caratteri speciali di uso più frequente.

carattere speciale	come si ottiene	carattere speciale	come si ottiene
<	<	Ò	&Ograve
>	>	Ô	&Ocirc
&	&	Õ	&Otilde
"	"	Ö	&Ouml
Á	Á	Ø	&Oslash
À	&Agrave	Ó	&Oacute
Â	&Acirc	Ú	&Uacute
Ã	&Atilde	Ù	&Ugrave
Å	&Aring	Û	&Ucirc
Ä	&Auml	Ü	&Uuml
Æ	&AElig	Ý	&Yacute
Ç	&Ccedil	Þ	&THORN
É	&Eacute	æ	&aelig
È	&Egrave	é	&eacute
Ê	&Ecirc	è	&egrave
Ë	&Euml	ê	&ecirc
Í	&Iacute	ë	&euml
Ì	&Igrave	Ñ	&Ntilde
Î	&Icirc	®	®
Ï	&Iuml	©	©
Ð	&ETH	(Non breaking space)

[Torna all'indice]

... per controllare la pagina WEB che abbiamo scritto

Una volta scritti tutti i comandi HTML che ci sembrano opportuni nella nostra pagina WEB oppure, meglio, di volta in volta che aggiungiamo parti nuove alla nostra pagina, per controllare il risultato si richiama il browser Web (cioè si apre Netscape o Internet Explorer) e si seleziona il comando OPEN FILE IN BROWSER .... oppure OPEN PAGE... sotto il menu FILE. Si seleziona nella finestra che viene il nostro file (ATTENZIONE: se non gli abbiamo dato un nome con l'estensione ".html" potremmo non vederlo!) e ci apparirà la nostra pagina.
Se già ce l'abbiamo visualizzata basterà cliccare l'apposito pulsante della Toolbar "RELOAD" e saranno visibili le modifiche fatte (se le abbiamo precedentemente salvate nel nostro file originale).
Al momento essa è visibile "in locale", cioè solo sul computer su cui stiamo lavorando, per renderla visibile a tutti (tecnicamente si dice metterla "in linea" o "in rete") va inviata (insieme agli eventuali file di figure che abbiamo inserito) al gestore del Server Web che la collocherà sul computer opportuno.
Prima di inviare il file consiglio:

di provare se funzionano tutti i link.
di visualizzare la pagina con almeno due browser diversi e possibilmente su computer diversi (tipo un PC e un MAC). Potreste scoprire differenze inaspettate!

[Torna all'indice]

... per saperne di più

Per imparare a scrivere in linguaggio HTML, esistono un numero vastissimo di siti. Quelli che seguono sono alcuni esempi (in inglese) che ho visitato ma ognuno di essi rimanda ad altri ancora e così via: http://www.w3.org/MarkUp/
(la "Home Page" sull'HTML per WWW).
http://www.december.com/html/
(organizzato in livelli di difficoltà).
http://webreference.com/html3andns/
(chiari gli esempi, contiene numerosi confronti tra le varie versioni di HTML).
http://lcweb.loc.gov/global/internet/html.html
(a cura della Library of Congress: un elenco di link, suddivisi per argomento, che riguardano tutte le più varie necessità nello scrivere pagine WEB).
Per chi trova difficoltà o non ha voglia di affrontare un testo in inglese, le possibilità di trovare guide in italiano sull'HTML sono minori, ma stanno aumentando di giorno in giorno. Per esempio, ho trovato:
http://www.html.it/
(un sito dedicato proprio all'apprendimento dell'HTML, strutturato in corsi di vario livello, con linguaggio chiaro e immediato).
http://werbach.com/barebones/it/it_intro.html
(si legge nell'introduzione: "Questa guida è rivolta alle persone che ne sanno abbastanza da non aver bisogno di istruzioni passo-per-passo, ma non conoscono a memoria la sintassi esatta di ogni comando HTML. Se vuoi un "veloce riferimento" che puoi consultare senza dover leggere tutte le informazioni complete, questa guida è per te".)
http://www.dada.it/html/
(rispetto a qualche tempo fa, questa guida è stata snellita nelle immagini con conseguente risparmio di tempo di consultazione).
http://www.rccr.cremona.it/tutorial_html/index.html
(chiaro ma molto sintetico)
[Torna all'indice]

Silvia Cappelli -URL: http://www.fi.infn.it/info/manuale.html

Cerca nel blog

Il BLOG di Paolo Latella