Creiamo un sito Web con Notepad di Windows
e con Netscape Composer. Note generali

- La digitazione del testo potrà essere effettuata direttamente con il blocco note di Windows oppure nella pagina di Netscape Composer (o di altro editor html, per esempio FrontPage). Il testo che si vorrà utilizzare per creare la pagina html potrà altresì essere inserito nell’editor web con il metodo del copia/incolla da file di testo già disponibili nei formati txt, rtf, doc

- Una nota particolare per l’utilizzo di Netscape Composer o di un qualsiasi altro editor di pagine web: tali programmi hanno un’interfaccia del tutto simile a quella di un qualsiasi altro editor (o word processor). Per intenderci, la struttura del programma prevede la presenza dei menu (a seconda che si tratti di edizione in inglese o in italiano: File; Edit (Modifica); View (Visualizza); Insert (Inserisci); Format (Formato); Tools (Strumenti) – FrontPage ha inoltre menu specifici per la creazione di Tabelle e di Frame). 

Comandi da tastiera

- Per aprire una pagina nuova con Netscape Composer:

ALT+f = menu File +n +p = apre una pagina nuova – bianca

- Per impostarne le caratteristiche:

ALT+o = menu Format +g = apre una finestra per impostare le PageProperties ov-vero le proprietà della pagina. Tale cartella contiene tre “schede”: General / Colors and Background / Meta Tags

- Selezionando la scheda General (dal menu Format):
ALT+t = titolo della pagina = corrisponde al <title></title>
ALT+u = nome dell’autore (meta tag)
ALT+d = descrizione del contenuto della pagina (meta tag)
ALT+k = parole chiave = corrispondenti al meta tag keywords

- Selezionando la scheda Colors and Background (sempre dal menu Format):
ALT+u = selezionare i colori del browser (se si vogliono utilizzare i colori di default)
ALT+i = usare un’immagine per lo sfondo della pagina
ALT+h = si apre una finestra che elenca le directory dell’hard disk, entro le quali scegliere il file che si intende utilizzare per il file (gif o jpg) di sfondo per la pagina
ALT+n = salva le scelte effettuate per l’impostazione di ulteriori pagine. In questo ca-so, per esempio, tutte le pagine di un sito potranno avere gli stessi colori o le stesse immagini di sfondo.

- Per effettuare inserimenti nella pagina nuova:

(inserire una tabella) ALT+i (menu Insert) +t (tabella) +t (proprietà della tabella)

Spostandosi nei vari campi con il tasto tabulazione potranno essere inseriti i dati relativi alle proprietà che dovrà avere la tabella (numero di righe, numero di colonne, allineamento sinistro-centrato-destro, bordi, larghezza); si potrà indicare se le colonne dovranno o meno avere una medesima larghezza, se la tabella, ogni singola riga oppure ogni singola cella dovrà avere un colore diverso o una differente immagine di sfondo.

- Tramite il menu Insert si potranno altresì inserire:
ALT+i +l = link
ALT+i +a = target
ALT+i +i = immagini
ALT+i +o = linee rette orizzontali
ALT+i +h = tag html

Per ciascun sottomenu si aprirà una finestra nella quale, servendosi del tasto tabulazione, si potranno inserire tutte le istruzioni relative alle scelte che intenderemo utilizzare nella nostra pagina.

- Con il menu Format (ALT+o) sarà possibile principalmente agire sui caratteri (font) da utilizzare, la loro dimensione, lo stile, il colore; sul paragrafo, per indicare se lo vorremo allineato a sinistra, al centro o a destra oltreché, come detto, impostare o correggere le proprietà delle tabelle.

- Tramite il menu Tools (Netscape 4.51) è possibile inserire nel testo caratteri speciali (per esempio, lettere maiuscole accentate); aprire la pagina sorgente html (blocco note, sul quale è possibile scrivere o correggere le impostazioni della pagina).

- Al termine delle selezioni (con tutti i menu): 
ALT+a = applica (apply) conferma le selezioni da applicare alla pagina
ENTER = chiude la finestra relativa alla proprietà della pagina e riporta alla pagina bianca.

Consigli pratici

Creare anzitutto una propria directory (cartella) sull’hard disk, nominandola, per esempio, pagina personale oppure pagina web: in tale cartella dovranno essere contenuti tutti i file riguardanti un singolo sito comprendenti i file.html e gli elementi grafici o multimediali presenti nel sito. Tutto il contenuto di tale cartella corrisponderà esattamente a quanto sarà inviato sul Web via FTP non appena il sito sarà stato creato.

- Nominare la pagina principale o home page (generalmente la prima che dev’essere prodotta) index.html; altri file che comporranno il sito web nella sua interezza potranno avere l’estensione più breve: .htm 

- Nominare sempre i file che man mano vengono prodotti (esclusa la pagina principale) scrivendo preferibilmente in tutte lettere minuscole nomi che permettano una facile identificazione del contenuto del file stesso, evitando per esempio nomi quali pagina01, pagina02…, immagine01, immagine02… ecc. 

- Qualora sia richiesto un nome composto da più parole non lasciare spazi, ma unire le diverse parole con trattini-bassi (es: rosa_rossa.jpg; poesia_pascoli.html… oppure anche rosarossa.jpg, poesiapascoli.html…ecc.): i server sui quali si “spediscono” le pagine per Internet generalmente non accettano

1. Nomi di file composti da più parole con spaziatura
2. Nomi di file con lettere maiuscole
3. Nomi di file con lettere accentate

Solo qualche server accetta file con lettere maiuscole, ma è meglio “non rischiare” di farsi respingere un file e utilizzare di conseguenza nomi di file (e relative estensioni) scritti in tutto minuscolo (questo vale non solo per l’estensione .html, ma anche per tutte le altre: .jpg .gif .mid .ram ecc.).

- Per le immagini utilizzare formati .jpg (.jpeg) e .gif. Le immagini animate sono in ogni caso in formato .gif; evitare di inserire immagini "pesanti" poiché ciò rallenta notevolmente l'apertura delle pagine e scoraggia il visitatore del sito.

- Per i file sonori utilizzare formati .mid .au .ram .mp3:; anche in questo è consigliabile non utilizzare file oltre i 60 Kb

- È possibile inserire file .zip per il download di singole pagine o di tutto il sito, oppure dei testi contenuti nelle pagine stesse.

- Prima di inviare via FTP il sito al server (per la pubblicazione sul Web) controllare accuratamente che tutti i link interni alle varie pagine siano funzionanti e che i link ad altri siti Internet siano digitati correttamente (http://www.nome del sito linkato). 

Tale controllo potrà essere effettuato anche rileggendo tutto il file “sorgente” (html o htm) con il blocco note (Notepad di Windows). Controllare anche con particolare attenzione la precisione dei comandi digitati, e soprattutto che a un comando di “apertura” (<center>, se si vorrà indicare per esempio un titolo centrato) corrisponda sempre un comando di “chiusura” (</center> al termine della parola o delle parole che compongono tale titolo). I comandi di formattazione del testo che non pretendono “chiusura” sono <p> [nuovo paragrafo] e <br> [ritorno a capo].

Costruire un sito. La pagina principale (Home Page)
[esempio01 – esempio02 da scaricare]

È consigliabile progettare anzitutto i contenuti del sito web che si intende costruire. Se si tratta di una pagina personale (per presentare se stessi, il proprio lavoro, i propri interessi in funzione, per esempio, di creare comunicazione con i visitatori di Internet) occorrerà fare un appunto del progetto che si intende attuare e degli argomenti che si vogliono trattare (esempio01_pagina personale). Se si tratta di una pagina da realizzare per conto terzi occorre conoscere anzitutto la finalizzazione del sito (pubblicità, comunicazione, divulgazione, presentazione prodotti ecc.) e, anche in questo caso, preparare un appunto sintetico che potrà servire come punto di partenza per un sommario dei contenuti.

Analisi dell’“Esempio01_pagina personale”

Qui di seguito viene analizzato il contenuto (da ciò che è scritto in Notepad – o blocco note) della pagina principale del sito esemplificato. Vale la pena ricordare che nel blocco note i comandi possono essere scritti indifferentemente sia in lettere maiuscole sia in lettere minuscole.

- Occorre indicare sempre (vale per qualsiasi pagina html) i comandi <html> <head> (in apertura di documento) e </html> </head> (in chiusura di documento). 

- Nella sezione aperta da <head> e chiusa da </head> vengono inseriti i meta tag e il titolo [si noterà che sono state inserite anche le “keywords”, che sono utilizzate dai motori di ricerca per la registrazione del sito nei propri elenchi – si veda il capitolo sui meta tag]:

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="Author" content="nome autore">
   <meta name="GENERATOR" content="Mozilla/4.51 [en] (Win98; I) [Netscape] Win-dows98 Notepad">
   <meta name="Keywords" content="scuola, minibasket, pianoforte, birdwatching, 
CNN, Atlanta, Italia, Milano, Conservatorio, Giuseppe, Verdi, Roma, Sicilia, Lombardia">
   <title>titolo del sito</title>
</head>

- Subito dopo, se vi è inserimento di un oggetto multimediale (un file musicale, un filmato ecc.), occorrerà indicarlo (l’esempio01 comprende il file scottjoplin.mid):

<EMBED src="scottjoplin.mid" align="baseline" border="0" width="0"
height="0" autostart="true" volume="100">

[avvertenza: border="0" width="0" height="0" possono essere tralasciati nel caso – come questo – di inserimento di un file midi]

- Se la pagina deve contenere uno sfondo occorre indicarlo con la stringa sottoriportata (l’esempio01 comprende uno sfondo “bianco_quadratini.jpg)

<body background="bianco_quadratini.jpg">
</body>

- La pagina esemplificata prevede un titolo, centrato, corsivo, bold (grassetto) e in colore rosso

<center>
<b>
<i>
<font face="Arial,Helvetica">
<font color="#CC0000">
<font size=+4>
Il mio sito
</font>
</font>
</font>
</i>
</b>

- Il successivo comando <br> segnala un “a capo”. Dopodiché nella pagina è stata inserita un’immagine (bambina103x107.jpg): l’inserimento è completato dalla scritta ALT="Foto di Laura bambina con fiocco bianco tra i capelli - bambina103x107.jpg b/n da 4 Kb" che sarà leggibile sul monitor e servirà a indicare il contenuto dell’immagine oltreché la grandezza espressa in Kb (utile soprattutto nel caso si voglia consentire di scaricare l’immagine stessa). La stringa completa, relativa all’inserimento dell’immagine, è la seguente:

<img SRC="bambina103x107.jpg" 
ALT="Foto di Laura bambina con fiocco bianco tra i capelli - 
bambina103x107.jpg b/n da 4 Kb"

- Dopo un ulteriore “a capo” (<br>) è stata inserita una tabella, con unica colonna, centrata, di 650 pixel, che conterrà il testo, le eventuali immagini e i link relativi all’argomento che viene trattato nella pagina principale:

<center>
<table BORDER=0 COLS=1 WIDTH="650" >
<tr>

Lo scopo della tabella, in questo caso, è di fornire il layout alla pagina: è uno scopo per così dire estetico che mette in condizioni di impaginare correttamente ed elegantemente la pagina stessa e anche di fare in modo che essa possa essere letta correttamente con qualsiasi risoluzione video. 

La tabella creerà infatti uno spazio in centro alla pagina nel quale saranno contenute tutte le informazioni. Tale spazio farà in modo che il contenuto della pagina non risulti “appiccicato” ai margini del monitor. Dal margine sinistro e dal margine destro del monitor vi sarà infatti un margine - sul quale non appariranno scritte - di circa 70-80 pixel per lato [l’impaginazione è in questo caso simile a quella di una qualsiasi pagina di un libro].

- Seguono le indicazioni relative ai caratteri da utilizzare nel testo che verrà inserito nella tabella (il primo testo inserito è un “sottotitolo” – Benvenuti nella mia pagina personale!)

<center>
<font face="Arial,Helvetica"><font color="#000099"><font size=+3>
Benvenuti nella mia pagina personale!</font></font></font>
</center>

- Segue il testo, di normale digitazione. Si deve tenere presente che nella programmazione html le lettere accentate hanno una loro specifica sintassi.

Esempio: attività andrà digitato
  attivit&agrave;

Vale a dire che, per le lettere accentate, occorrerà farle precedere dal simbolo "&" e seguire dall’indicazione "grave;" se si tratta di accento grave, "acute;" se si tratta di accento acuto. Le vocali accentate maggiormente utilizzate sono:

&agrave; à
&ugrave; ù
&egrave; è
&eacute; é
&igrave;   ì
&ograve; ò

- La pagina in esame (home page) contiene poi tre link ad altrettante pagine collegate:

- mia zia Piera = zia_piera.htm
- i libri che preferisco = libri_preferiti.htm
- lo studio della geografia = geografia_italia.htm

[I nomi dei tre argomenti sono preceduti da un pulsante animato-lampeggiante rosso e blu che può anche essere eliminato e che, oltre a quella decorativa, ha la funzione di attirare l’attenzione del lettore della pagina]- 

La sintassi utilizzata per i link è la seguente:

<p>
<a href="zia_piera.htm">
<img SRC="pulsanteanimato_rossoblu25x12.gif" 
BORDER=0 height=12 width=25>
</a>
<font face="Arial,Helvetica">
<a href="zia_piera.htm">
mia zia Piera
</a>
</font>
<br>
<a href="libri_preferiti.htm">
<img SRC="pulsanteanimato_rossoblu25x12.gif" 
BORDER=0 height=12 width=25>
</a>
<font face="Arial,Helvetica">
<a href="libri_preferiti.htm">i libri che preferisco
</a>
</font>
<br>
<a href="geografia_italia.htm">
<img SRC="pulsanteanimato_rossoblu25x12.gif" 
BORDER=0 height=12 width=25>
</a>
<font face="Arial,Helvetica">
<a href="geografia_italia.htm">lo studio della geografia
</a>
</font>

- Continuando l’esame della pagina, sono contenuti anche i link (centrati nella pagina) ad alcune pagine web [amici, in questo caso, ma potrebbero essere altrettanti siti di interesse comune o di significato particolare riguardo a ciò che si sta dicendo nella propria pagina]. La sintassi per evidenziare tali link è la seguente:

<center>
<p>
<font face="Arial,Helvetica">
<a href="http://www.geocities.com/Vienna/Strasse/6311">
La pagina di Giancarlo
</a>
</font>
<br>
<font face="Arial,Helvetica">
<a href="http://www.geocities.com/Vienna/Strasse/9035">
La pagina di Francesco
</a>
</font>
<br>
<font face="Arial,Helvetica">
<a href="http://www.geocities.com/Athens/Parthenon/1635">
La pagina di Angela
</a>
</font>
<br>
<font face="Arial,Helvetica">
<a href="http://www.geocities.com/Vienna/Strasse/7570">
La pagina di Battista
</a>
</font>
</center>

- Dopo l’inserimento di un’altra immagine (il Conservatorio Giuseppe Verdi di Milano) e l’augurio di “Buona navigazione!” vi è infine l’indicazione della propria casella di posta, alla quale potranno essere fatti pervenire gli eventuali messaggi dei visitatori:

<a href="mailto:a.molt@iol.it">
<img SRC="cassetta posta44x32.gif" ALT="Mailbox - apre il programma di posta 
elettronica con il quale puoi scrivermi" 
BORDER=0 height=32 width=44>
</a>

- Seguono, e concludono la pagina, tutti i comandi di chiusura, della tabella/layout di pagina e della stessa home page

</center>
</td>
</tr>
</table>
</center>
</body>
</html>

Analisi dell’“Esempio02_ipertesto_target”

Il secondo esempio riguarda un ipertesto in cui vengono effettuati link ad alcune parti del testo debitamente contrassegnate (target). 

I comandi <html></html>, quelli di <head></head> e di <body></body> rispettivamente in apertura e chiusura del file sono identici a quelli già visti nel primo esempio. 

- È stata poi inserita una tabella per l’impaginazione del testo, a colonna singola di 650 pixel [la funzione di detta tabella è la stessa indicata per l’esempio01]. Non è stato aggiunto sfondo, né alcun elemento multimediale.

- La particolarità di questa pagina/ipertesto consiste nel fatto che essa contiene tre argomenti elencati nel sommario: a ciascuno dei titoli dei tre argomenti e alla parola “sommario” sono associati altrettanti target (etichette): 

<a NAME="1sommario"></a> = SOMMARIO
<a NAME="2significato_html"></a> = Che cosa significa HTML
<a NAME="3creazione_pagine"></a> = Progettazione e creazione di pagine Web
<a NAME="4strumenti_www"></a> = Con che cosa scrivere documenti e navigare 

- Il target (per esempio, <a NAME="1sommario">) dev’essere inserito prima di ciò che si intende contrassegnare e degli attributi che dovrà possedere la scritta (o l’eventuale immagine) 

<a NAME="1sommario"></a>
<b>
<font face="Arial,Helvetica">
<font size=+1>
SOMMARIO
</font>
</font>
</b>

- Si effettuerà quindi il link relativo ai vari “capitoli” contrassegnati da target sui titoli elencati nel sommario

<a href="#2significato_html">Che cosa significa HTML</a>

mentre un link sulle parole “TORNA AL SOMMARIO” poste al termine di ogni “capitolo” [<a href="#1sommario">TORNA AL SOMMARIO</a>] ricondurrà in testa alla pagina ed esattamente al sommario stesso.
 
 

Tutti i comandi
 

Da “La guida Bare Bones di HTML” di Kevin Werbach
http://werbach.com
Traduzione a cura di Kay Martha Quittan <kay@kmq.inet.it>
versione 4.0 - gennaio 1999
 
 

La guida elenca i comandi supportati nelle versioni attuali della maggioranza dei browser. I comandi sono elencati in carattere maiuscolo; la maggior parte dei comandi può comunque essere scritta indifferentemente in minuscolo o maiuscolo. La guida qui presentata è una sintesi di quella di riferimento citata nel titolo. 
 

? ELEMENTI DI BASE 
(tutti i documenti HTML devono contenere questi comandi)

Tipo documento <HTML></HTML> (all'inizio e alla fine del file)
Titolo <TITLE></TITLE> (deve essere nella testata)
Testata <HEAD></HEAD> (informazioni descrittive; come il titolo)
Corpo <BODY></BODY> (contenuto della pagina)
 

? FORMATO DI STRUTTURA 
(le caratteristiche di visualizzazione sono definite dal browser)

Titoli <H?></H?> (sono definiti 6 livelli)
allineamento  <H? ALIGN=LEFT|CENTER|RIGHT></H?> 
(sinistra|centrato|destra)
Separazione <DIV></DIV>
allineamento <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
(sinistra|centrato|destra|giustificato)
Contenuto <SPAN></SPAN>
Citazione <BLOCKQUOTE></BLOCKQUOTE> (in genere visualizzato come blocco di testo rientrato)
Citazione <Q></Q> (per citazioni brevi)
con URL <Q CITE="URL"></Q> 
Evidenziato <EM></EM> (in genere visualizzato in corsivo)
Molto evidenziato <STRONG></STRONG> (in genere visualizzato in neretto)
Citazione <CITE></CITE> (in genere visualizzato in corsivo)
Codice <CODE></CODE> (per listati di programmazione)
Esempio di output <SAMP></SAMP>
Immissione da tastiera <KBD></KBD>
Variabile <VAR></VAR>
Definizione <DFN></DFN> (poco utilizzato)
Indirizzo dell'autore <ADDRESS></ADDRESS>
Font molto grande <BIG></BIG>
Font molto piccolo <SMALL></SMALL>
Inserito <INS></INS> (segna le modifiche introdotte in una nuova versione)
data modifica <INS DATETIME=":::"></INS>
commenti <INS CITE="URL"></INS>
Cancellato <DEL></DEL> (segna le cancellazioni apportate in una nuova versione)
data modifica <DEL DATETIME=":::"></DEL>
commenti <DEL CITE="URL"></DEL>
Acronimo <ACRONYM></ACRONYM>
Abbreviazione  <ABBR></ABBR>
 

? FORMATO DI PRESENTAZIONE
(formattazione dei caratteri)

Neretto <B></B>
Corsivo <I></I>
Sottolineato <U></U> (poco utilizzato)
Barrato <STRIKE></STRIKE> (poco utilizzato)
Barrato <S></S> (poco utilizzato)
Pedice <SUB></SUB>
Apice <SUP></SUP>
Macchina da scrivere <TT></TT> (visualizzato a spaziatura fissa)
Preformattato <PRE></PRE> (visualizzato tale e quale)
Centrato <CENTER></CENTER> (sia per testo che immagini)
Lampeggiante <BLINK></BLINK> 
Dimensione del carattere <FONT SIZE=?></FONT> (valori da 1 a 7)
modifica misura  <FONT SIZE="+|-?"></FONT>
colore  <FONT COLOR="#$$$$$$"></FONT>
tipo  <FONT FACE="***"></FONT>
dimensione in punti  <FONT POINT-SIZE=?></FONT>
spessore  <FONT WEIGHT=?></FONT> (valori da 100 a 900)
Font misura base <BASEFONT SIZE=?> (da 1 a 7; valore default 3)
Testo scorrevole <MARQUEE></MARQUEE>
 

? COLLOCAZIONE 

Multicolonne  <MULTICOL COLS=?></MULTICOL>
spazio tra colonne <MULTICOL GUTTER=?></MULTICOL>
larghezza colonna  <MULTICOL WIDTH=?></MULTICOL>
Spazio  <SPACER>
tipo  <SPACER TYPE=HORIZONTAL|VERTICAL|BLOCK> (orizzonta-le|verticale|blocco)
misura   <SPACER SIZE=?>
dimensioni  <SPACER WIDTH=? HEIGHT=?> (larghezza altezza) 
allineamento     <SPACER ALIGN=LEFT|RIGHT|CENTER> (sini-stra|destra|centrato)
Layer (strato)  <LAYER></LAYER>
nome <LAYER ID="***"></LAYER>
ubicazione <LAYER LEFT=? TOP=?></LAYER>
posizione (x,y) <LAYER PAGEX=? PAGEY=?></LAYER>
file sorgente <LAYER SRC="***"></LAYER>
stacking (z) <LAYER Z-INDEX=?></LAYER>
posizione stack  <LAYER ABOVE="***" BELOW="***"></LAYER>
dimensioni <LAYER HEIGHT=? WIDTH=?></LAYER>
ritaglio <LAYER CLIP=,,,></LAYER>
visibile ? <LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER>
colore sfondo <LAYER BACKGROUND="$$$$$$"></LAYER>
colore sfondo <LAYER BGCOLOR="$$$$$$"></LAYER>
Inline Layer <ILAYER></ILAYER> (con gli stessi attributi di LAYER)
Contenuto in alternativa <NOLAYER</NOLAYER>
 

? COLLEGAMENTI – IMMAGINI - SUONI 

Collegamento a:
un documento  <A HREF="URL"></A
un riferimento  <A HREF="URL#***"></A> (in un altro documento)
                        <A HREF="#***"></A> (nello stesso documento)
una finestra <A HREF="URL" TARGET="***"></A>
mouse click <A HREF="URL" ONCLICK="***"></A> (Javascript)
mouse selezione <A HREF="URL" ONMOUSEOVER="***"></A> (Javascript)
mouse deselezione <A HREF="URL" ONMOUSEOUT="***"></A>  (Javascript)
indirizzo email <A HREF="mailto:@"></A> 
Definizione del riferimento  <A NAME="***"></A> 
Visualizzazione immagine <IMG SRC="URL"> 
allineamento <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> 
allineamento <IMG SRC="URL" ALIGN=TEXTTOP | ABSMIDDLE | BASELINE | ABSBOTTOM>
testo in alternativa <IMG SRC="URL" ALT="***"> (se l'immagine non viene visua-lizzata)
dimensioni <IMG SRC="URL" WIDTH=? HEIGHT=?> (in pixel)
                  <IMG SRC="URL" WIDTH=% HEIGHT=%> (in percentuale della lar
                  ghezza e altezza della pagina)
bordo <IMG SRC="URL" BORDER=?> (in pixel)
spazio perimetrale <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixel) 
mappa <IMG SRC="URL" ISMAP>        (richiede uno script)
mappa URL <IMG SRC="URL" USEMAP="URL">
clip di film <IMG DYNSRC="***" START="***" LOOP=?>
Suono di fondo <BGSOUND SRC="***" LOOP=?|INFINITE>
Incorporazione oggetti <EMBED SRC="URL">  (inserisce l'oggetto nella pagina)
(inserisce un suono di fondo – valido per tutti i browser)
misure <EMBED SRC="URL" WIDTH=? HEIGHT=?>
Oggetto <OBJECT></OBJECT>
parametri <PARAM>
 

? DIVISORI 
(formattazione dei paragrafi) 

Paragrafo <P></P> (il comando di chiusura viene generalmente omesso)
allineamento <P ALIGN=LEFT|CENTER|RIGHT></P>
giustificazione <P ALIGN=JUSTIFY></P>
Interruzione riga <BR> (singolo ritorno a capo)
pulizia margini <BR CLEAR=LEFT|RIGHT|ALL>
Riga orizzontale <HR>
allineamento <HR ALIGN=LEFT|RIGHT|CENTER>
spessore <HR SIZE=?> (in pixel)
larghezza <HR WIDTH=?> (in pixel)
larghezza %  <HR WIDTH="%"> (come percentuale rispetto alla larghezza della pagina)
piena <HR NOSHADE> (senza l'effetto ombra)
Senza interruzione <NOBR></NOBR> (per evitare l'interruzione automatica della riga)
Interruzione <WBR> (per inserire l'interruzione in NOBR)
 

? LISTE 

Liste senza ordine  <UL><LI></UL> (<LI> prima di ogni elemento)
compatta <UL COMPACT></UL>
tipo di puntatore <UL TYPE=DISC|CIRCLE|SQUARE> (per tutta la lista)
                           <LI TYPE=DISC|CIRCLE|SQUARE> (questo e successivi)
Liste numerate <OL><LI></OL> (<LI> prima di ogni elemento)
compatta  <OL COMPACT></OL>
tipo di numero <OL TYPE=A|a|I|i|1> (per tutta la lista)
                        <LI TYPE=A|a|I|i|1> (questo e successivi)
num. di partenza <OL START=?> (per tutta la lista)
                           <LI VALUE=?> (questo e successivi)
Lista di definizioni <DL><DT><DD></DL> (<DT>=termine, <DD>=definizione)
compatta <DL COMPACT></DL>
Lista tipo Menu <MENU><LI></MENU> (<LI> prima di ogni elemento)
compatta  <MENU COMPACT></MENU>
Lista tipo indirizzario <DIR><LI></DIR> (<LI> prima di ogni elemento)
compatta <DIR COMPACT></DIR>
 

? SFONDI E COLORI 

Immagine di sfondo  <BODY BACKGROUND="URL">
fissa (senza scorrimento verticale) <BODY BGPROPERTIES="FIXED">
Colore di sfondo <BODY BGCOLOR="#$$$$$$"> (codice Red/Green/Blue) 
del testo <BODY TEXT="#$$$$$$">
dei collegamenti <BODY LINK="#$$$$$$">
dei collegamenti visitati <BODY VLINK="#$$$$$$">
del collegamento selezionato <BODY ALINK="#$$$$$$">

(Sono disponibili maggiori informazioni riguardanti le stringhe di identificazione di tutti i colori all'indirizzo <http://werbach.com/web/wwwhelp.html#color>)
 
 

? CARATTERI SPECIALI
 (devono essere digitati in caratteri minuscoli)

Carattere speciale 
&#?;   (dove ? indica il codice ISO 8859-1)
<        &lt;
>        &gt;
&        &amp;
"         &quot;
Marchio registrato (TM)  &#174;
Marchio registrato (TM)  &reg;
Copyright                &copy;
Spazio da mantenere      &nbsp;

(La lista completa e' disponibile all'indirizzo 
<http://www.uni-passau.de/%7Eramsch/iso8859-1.html>)
 

? MODULI  [FORM]
 (generalmente richiedono uno script sul server)

Definizione <FORM ACTION="URL" METHOD=GET|POST></FORM>
Upload file <FORM ENCTYPE="multipart/form-data"></FORM>
campo di immissione <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|
FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET">
nome del campo <INPUT NAME="***">
valore del campo <INPUT VALUE="***">
segnato ?  <INPUT CHECKED>  (checkbox e radio)
misura  <INPUT SIZE=?> (in caratteri)
lunghezza massima <INPUT MAXLENGTH=?>    (in caratteri)
Bottone  <BUTTON></BUTTON>
nome <BUTTON NAME="***"></BUTTON>
tipo <BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON>
valore iniziale  <BUTTON VALUE="***"></BUTTON>
Etichetta <LABEL></LABEL> 
elemento <LABEL FOR="***"></LABEL>
Lista di selezione <SELECT></SELECT>
nome della lista <SELECT NAME="***"></SELECT>
numero di opzioni <SELECT SIZE=?></SELECT>
scelta multipla  <SELECT MULTIPLE> (per selezionare più di un elemento)
Opzioni <OPTION>    (elementi che possono essere selezionati)
opzione iniziale <OPTION SELECTED>
valore <OPTION VALUE="***">
Gruppo di opzioni <OPTGROUP LABEL="***"></OPTGROUP> 
Area di immissione <TEXTAREA ROWS=? COLS=?></TEXTAREA>
nome dell'area <TEXTAREA NAME="***"></TEXTAREA>
ritorno a capo nel testo <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>
Gruppo di campi <FIELDSET></FIELDSET> 
Legenda <LEGEND></LEGEND>     (didascalia per i fieldset)
allineamento <LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT">
</LEGEND>
 

? TABELLE 

Definizione <TABLE></TABLE>
allineamento <TABLE ALIGN=LEFT|RIGHT|CENTER>
bordo <TABLE BORDER=?></TABLE>
spessore bordo <TABLE BORDER=?></TABLE> (valore)
spazio tra celle <TABLE CELLSPACING=?>
spazio nella cella <TABLE CELLPADDING=?>
larghezza <TABLE WIDTH=?> (in pixel)
larghezza % <TABLE WIDTH="%"> (in percentuale rispetto alla pagina)
colore sfondo <TABLE BGCOLOR="$$$$$$"></TABLE>
cornice <TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS|
VSIDES|BOX|BORDER></TABLE> 
regole <TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE>
colore bordo <TABLE BORDERCOLOR="$$$$$$"></TABLE>
colore scuro <TABLE BORDERCOLORDARK="$$$$$$"></TABLE>
colore chiaro <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE>
Riga <TR></TR>
allineamento  <TR ALIGN=LEFT|RIGHT|CENTER 
VALIGN=TOP|MIDDLE|BOTTOM>
Cella  <TD></TD> (deve essere all'interno di una riga)
allineamento <TD ALIGN=LEFT|RIGHT|CENTER
VALIGN=TOP|MIDDLE|BOTTOM>
senza  interruzione <TD NOWRAP>
unione colonne <TD COLSPAN=?>
unione righe <TD ROWSPAN=?>
larghezza <TD WIDTH=?> (in pixel)
larghezza % <TD WIDTH="%"> (in percentuale rispetto alla tabella)
colore di sfondo della cella <TD BGCOLOR="#$$$$$$">
Titolo  <TH></TH> (uguale alle celle di dati, ma in neretto e centrate)
allineamento <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
senza interruzione <TH NOWRAP>
unione colonne   <TH COLSPAN=?>
unione righe <TH ROWSPAN=?>
larghezza <TH WIDTH=?> (in pixel)
larghezza %  <TH WIDTH="%"> (in percentuale rispetto alla tabella)
colore di sfondo della cella <TH BGCOLOR="#$$$$$$">
Corpo tabella <TBODY>
Piè di pagina <TFOOT></TFOOT> (deve essere indicato prima di THEAD)
Titolo  <THEAD></THEAD>
Legenda <CAPTION></CAPTION>
allineamento <CAPTION ALIGN=TOP|BOTTOM> (sopra o sotto alla tabella)
Colonna <COL></COL> (attributi per gruppi di colonne)
unione colonne <COL SPAN=?></COL>
larghezza <COL WIDTH=?></COL>
larghezza % <COL WIDTH="%"></COL>
Gruppo colonne <COLGROUP></COLGROUP>   (struttura di gruppi di colonne)
unione colonne <COLGROUP SPAN=?></COLGROUP>
larghezza <COLGROUP WIDTH=?></COLGROUP>
larghezza % <COLGROUP WIDTH="%"></COLGROUP>
 

? FRAME
 (definizione e gestione di specifiche sezioni della finestra)

Documento Frame <FRAMESET></FRAMESET> (al posto di <BODY>)
altezza in righe <FRAMESET ROWS=,,,></FRAMESET> (pixel o %)
altezza in righe <FRAMESET ROWS=*></FRAMESET> (* = misura relativa)
larghezza in colonne <FRAMESET COLS=,,,></FRAMESET> (pixel o %)
larghezza in colonne <FRAMESET COLS=*></FRAMESET> (* = misura relativa)
cornice <FRAMESET FRAMEBORDER="yes|no"></FRAMESET>
larghezza <FRAMESET BORDER=?>
colore <FRAMESET BORDERCOLOR="#$$$$$$">
spaziatura <FRAMESET FRAMESPACING=?></FRAMESET>
Definizione del frame <FRAME> (contenuto di una sezione)
documento da visualizzare  <FRAME SRC="URL">
denominazione <FRAME NAME="***"|_blank|_self|_parent|_top>
larghezza dei margini <FRAME MARGINWIDTH=?> (margine destro e sinistro)
altezza dei margini  <FRAME MARGINHEIGHT=?> (margine alto e basso)
barra di scorrimento ? <FRAME SCROLLING="YES|NO|AUTO">
dimensione non modificabile <FRAME NORESIZE>
cornice <FRAME FRAMEBORDER="yes|no">
colore della cornice <FRAME BORDERCOLOR="#$$$$$$">
Contenuto in assenza di frame <NOFRAMES></NOFRAMES> (per i browser che non
supportano i frame)
Inline Frame <IFRAME></IFRAME> (con gli stessi attributi di FRAME)
dimensioni <IFRAME WIDTH=? HEIGHT=?></IFRAME>
dimensioni % <IFRAME WIDTH="%" HEIGHT="%"></IFRAME>
 

? SCRIPT E JAVA 

Script <SCRIPT></SCRIPT> 
Ubicazione <SCRIPT SRC="URL"></SCRIPT>
Tipo <SCRIPT TYPE="***"></SCRIPT>
Linguaggio <SCRIPT LANGUAGE="***"></SCRIPT>
Contenuto alt. <NOSCRIPT></NOSCRIPT> (se il browser non supporta gli script) 
Applet <APPLET></APPLET>
nome del file <APPLET CODE="***">
parametri <APPLET PARAM NAME="***">
ubicazione <APPLET CODEBASE="URL">
denominazione <APPLET NAME="***"> (per riferimenti)
testo in alternativa <APPLET ALT="***"> (per i browser che non supportano Java)
allineamento <APPLET ALIGN="LEFT|RIGHT|CENTER">
dimensioni <APPLET WIDTH=? HEIGHT=?> (in pixel)
spaziatura <APPLET HSPACE=? VSPACE=?> (in pixel)
Server Script <SERVER></SERVER>
 

? VARI 

Commenti <!-- *** --> (non visualizzati dal browser)
Prologo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
Ricerca <ISINDEX> (indica un documento indice)
Prompt <ISINDEX PROMPT="***"> (testo da anteporre alla casella di inserimento)
Invio ricerca <A HREF="URL?***"></a> (usare il punto di domanda)
URL di base per questo file <BASE HREF="URL"> (deve essere nella testata)
Nome della finestra di base  <BASE TARGET="***"> (deve essere nella testata)
Relazioni <LINK REV="***" REL="***" HREF="URL"> (deve essere nella testata)
Meta Informazioni <META> (deve essere nella testata)
Fogli di stile <STYLE></STYLE> (varie modalità di impiego)
Bidirect Off  <BDO DIR=LTR|RTL></BDO> (per alcuni set di caratteri)
 

? SIMBOLI UTILIZZATI NEL CAPITOLO “COMANDI”

1. URL  URL di un file esterno (oppure solo il nome del file se presente nello stesso in-dirizzario)
2. ?       Numero arbitrario (per esempio: <H?> [intestazione] significa <H1>,<H2>,<H3> ecc.)
3. %      Percentuale arbitraria (ad esempio: <HR WIDTH=%> significa <HR WIDTH=50%>, ecc.)
4. ***    Testo arbitrario (per esempio: ALT="***" significa spazio da riempire con testo)
5. $$$$$$ Numeri esadecimali (hex) arbitrari (per esempio: BGCOLOR="#$$$$$$" si-gnifica BGCOLOR="#00FF1C", ecc.)
6. :::      Data arbitraria (per esempio DATETIME=":::" significa "1994-11-05T08:15:30" ecc.)
7. @      Indirizzo email (per esempio "mailto:@" significa "mailto:kevin@werbach.com" ecc.)
8. …      Valori separati da virgole (per esempio COORDS=",,," significa COORDS="0,0,50,50", ecc.)
9. |        In alternativa (per esempio: ALIGN=LEFT|RIGHT|CENTER significa scegli una di queste tre variabili)