INTRODUZIONE
Scopo di questo
breve tutorial è quello di spiegare, nella maniera più
intuitiva possibile, i principali e più comuni comandi
utilizzati nel linguaggio HTML (HyperText Mark-up Language) cioè
il linguaggio utilizzato dai browser per visualizzare i documenti
sul World Wide Web.
L' approccio è quello di presentare molto codice d'esempio così
da rendere più facile e veloce l'apprendimento.
Quindi, mettetevi comodi e iniziate a leggere....HTML è un
linguaggio molto semplice e in pochi minuti anche voi sarete in
grado scrivere la vostra pagina..
DI
COSA AVETE BISOGNO
Per scrivere
pagine HTML è sufficiente utilizzare un editor di testi (Notepad
per esempio). Tuttavia esistono diversi programmi (commerciali e
shareware) che aiutano e semplificano la redazione di tali
pagine. Per adesso sarà sufficiente usare Notepad.
CARATTERISTICHE
Prima di iniziare è necessario
specificare che HTML è un linguaggio basato su tag. Un tag è
una parola
chiave che dice al browser (il programma che visualizza le pagine
HTML) cosa fare e come visualizzare le successive parole,
qualcosa di simile a:
<tag>Questa
è una prova</tag>
Se, quindi, ci fosse al posto di tag la parola chiave b
(che sta per bold), il testo verrebbe visualizzato così:
Questa è una prova
Il corrispondente codice html
sarebbe <b>Questa è una prova</b>.
Analogamente
<i>Questa è una prova</i> visualizzarebbe il testo:
Questa è una prova
Questo concetto è alla base di
tutti i costrutti html.
INIZIAMO
E' buona
abitudine iniziare ogni documento html con il tag <html> e
chiuderlo con il tag </html>.
Ad. es., con notepad aprite un Nuovo file, Prova.html, e
scrivete:
<html>
<head>
<title>Questo è il titolo della Pagina</title>
</head>
<body>
<h1>Intestazione </h1>
<br>
<p>
Questo è un semplice documento di prova.
Questo documento mostra i comandi html più semplici.
</p>
</body>
</html>
Salvate il file ed apritelo con il vostro browser preferito.
Commentiamolo.
<html> ogni documento html
dovrebbe iniziare con questo tag, sebbene non sia obbligatorio;
<head> identifica l'intestazione
del file html: in questa sezione è possibile utilizzare solo
particolari tag;
<title>
setta
il titolo della pagina;
<body> è il corpo vero e proprio
del documento;
<h1> Intestazione
al livello 1: il testo racchiuso tra questi tag viene ingrandito.
Provate anche:
<h2>Livello
2</h2>
<h3>Livello 3</h3>
<h4>Livello 4</h4>
<h5>Livello 5</h5>
<h6>Livello 6</h6>
Ricordate che il
font di default utilizzato laddove non venga specificato
diversamente, è il Times New Roman. Per usare un font diverso
potrete dichiarare:
<font
face="Arial" size="24"
color="red">E' una prova</font>
che visualizzaerà:
E' una
prova
<br> viene
inserita un'interruzione di riga nella posizione di questo tag:
ritorno a capo forzato. Infatti HTML non riesce a riconoscere
automaticamente un ritorno a capo oppure una tabulazione. E'
necessario specificarlo;
<p> inizia il
paragrafo: segue il testo del paragrafo. Noterete che nonostante
tale testo sia scritto su 2 righi il browser lo mostra su un rigo
solo. Questo perché, come detto, è necessario specificare,
tramite tag specifici il ritorno a capo, la tabulazione e quindi
la formattazione intera del documento.
</p></body></html> sono tutti tag di chiusura.
Il precedente esempio visualizzerebbe:
Questo è un semplice documento di
prova.Questo documento mostra i comandi html più semplici.
ATTRIBUTI
Quasi tutti i
tag html hanno delle particolari caratteristiche che possono
essere settate utilizzando determinati valori: ad es. sostituendo
il comando <body> con <body
bgcolor="red">, nell'esempio precedente, otterremmo la
visualizzazione del medesimo documento ma questa volta su sfondo
rosso. Esistono un centinaio di nomi che identificano altrettanti
colori. Troverai un breve elenco di questi nomi a fondo pagina.
LINK
E ANCORE
Le capacità
ipertestuali di un documento html, ovvero la proprietà di
utilizzare i link ad altri documenti, si ottengono implementando
il seguente tag:
<a
href="http://www.miosito.com">Clicca qui per andare
su Miosito</a>
Otterremo un link come questo:
Clicca
qui per andare su Miosito
Un'ancora, invece, è un link ad un'altra sezione del documento
correntemente visualizzato.
La si dichiara con:
<a
name="Ancora">Ancora</a>
Utilizzando:
<a
href="#Ancora">Vai all'ancora!!!</a>
sarà sufficiente cliccare su "Vai all'ancora!!!" per
spostarsi nel punto del documento identificato da
"Ancora". Notare l'uso del carattere "#" per
riconoscere un'ancora.
IMMAGINI
E SUONI
E' ovvio che
per dare maggior rilievo alle vostre pagine sarà necessario
utilizzare dei file grafici. Con il comando:
<img
src="Mioviso.gif" width="100"
height="100">
si farà caricare un'immagine dal browser, che la visualizzerà
nel punto del documento nel quale questo tag viene specificato.
Ovviamente "Mioviso.gif" identifica il nome del
file, width e height la sua larghezza ed altezza
in pixel (opzionali). Un'immagine può anche puntare ad un sito.
Niente di più semplice:
<a
href="http://www.miosito.com><img
src="Mioviso.gif" width="100"
height="100"></a> Clicca su questa immagine
per andare su Miosito!
Invece:
<bgsound
src="Sinfonia.mid" loop=3>
farà eseguire il file musicale Sinfonia.mid per 3 volte.
ESEMPIO
Vediamo un esempio che riassuma ciò che
abbiamo visto:
<html>
<head>
<title>Esempio numero 1</title>
</head>
<body bgcolor="steelblue">
<bgsound src="Sinfonia.mid" loop=infinite>
<font face="Arial Rounded MT Bold"
color="red">
<a href="#MyText"><h1>Vai
giù!</h1></a>
</font><br>
<p align="center">
<img src="Pippo.gif">
HTML è un linguaggio basato su tag.<br>
HTML sta per Hyper Text Markup Language.<br>
<br><br><br><font face="Humanst512
BT" size="30" color="orange">
HTML è un linguaggio basato su tag.<br>
HTML sta per Hyper Text Markup Language.</font><br>
<br><br><br>
<font face="Courier" size="20"
color="lime">
HTML è un linguaggio basato su tag.<br>
HTML sta per Hyper Text Markup Language.</font><br>
<br><br><br>
<a name="MyText">Fine documento.</a>
</p>
</body>
</html>
TABELLE
Come detto, per
la formattazione di un documento html è necessario utilizzare
sempre e solo i tag.
Le tabelle sono
il modo più efficiente per formattare il testo di una pagina
html.
Ad esempio, vediamo questa semplice tabella:
<html>
<h1 align="center">Una Semplice
tabella</h1>
<body bgcolor="white">
<table border="6" width="100%"
bordercolor="#C0C0C0"
bordercolordark="black"
bordercolorlight="#808080">
<tr>
<th align="top" width="150"
bgcolor="#775EC4"
height="50"><font color="#FFFFFF"
size="5"
face="Comic Sans MS">CURRICULUM
VITAE</font></th>
<td width="80%" bgcolor="#82CCFD"
border="3" bordercolor="#C0C0C0"
bordercolordark="#0000FF"
bordercolorlight="#808080"><br>
<br>Mario Rossi
<br>nato a Roma il 10/10/70<br>
<br>Laurea in Giurisprudenza
<br>
<a
href="http://wwwunifg.iqsnet.it/economia/default.htm">
Università degli Studi di Foggia.</a>
<br>
<br>
Tesi di laurea<br>
<a
href="http://wwwunifg.iqsnet.it/economia/default.htm">Teshis
</a><br>
<br>
Conoscenze informatiche:<br>
HTML, Javascript and Java, C, CGI, Visual Basic Script.
<br>
<br>
Lingue Straniere:<br>
Inglese e Francese<br>
<br><br><br>
</td></tr></table>
</body>
</html>
I tag relativi
alle tabelle sono: Sezione da ultimare
<table>
<tr>
<th>
FORMS,
SCRIPT E CGI
Talvolta si ha
la necessità di richiedere alcuni dati a chi visita le nostre
pagine. Immaginate un comune
motore di ricerca: inseriamo una nostra richiesta e il sito ci
mostra i risultati. Per ottenere qualcosa del
genere utilizziamo i form che si dichiarano così:
<FORM
ACTION="http://www.tuosito/tuoscript" METHOD=POST>
...
</FORM>
Con questo comando
diciamo al browser che ciò che seguirà farà parte di un form
che dovrà essere inviato allo script tuoscript sul sito http://www.tuosito/. Per ulteriori info sugli script CGI Clicca Qui
I comandi compresi tra i tag <form></form> possono essere:
Nome:<INPUT TYPE="text" NAME="Testo"
SIZE=30 MAXLENGTH=50> che visualizza:
Password:
<INPUT TYPE="password" NAME="Pass" SIZE=30
MAXLENGTH=50> che
visualizza una casella di testo dove pero' i caratteri sono
sostituiti dal carattere *:
<TEXTAREA
NAME="Campo" ROWS=2 COLS=30>Testo di Default.
</TEXTAREA> che
visualizzerà una casella a più righe:
Sei italiano <INPUT TYPE="checkbox"
NAME="Casella"> che visualizza una casella da selezionare:
<INPUT TYPE="radio" NAME="m"
VALUE="male" checked>Maschio
<INPUT TYPE="radio" NAME="f"
VALUE="female">Femmina
<INPUT TYPE="radio" NAME="b"
VALUE="unknown">Boh?
che visualizza dei
radio buttons mutualmente esclusivi:
<SELECT SIZE=2 NAME="Altezza">
<OPTION SELECTED> Alto
<OPTION> Basso
<OPTION> Nella media
</SELECT> che
visualizza un menu a discesa a scelta unica:
<INPUT TYPE="submit" VALUE="Invia">
<INPUT TYPE="reset" VALUE="Cancella">
che visualizza un
pulsante di invio e uno di reset del form.
<INPUT TYPE="hidden" NAME="vble_name7"
VALUE="I am invisible."> che non visualizza alcun tipo di campo ma
viene utilizzato per inviare altri dati allo script CGI.
Ebbene,
utilizzando questi tag è possibile costruire l'interfaccia per
l'input di dati da parte del visitatore delle nostre pagine.
Tuttavia per gestire questi dati è necessario usare uno script
CGI che, ad esempio invia una e-mail automaticamente, oppure li
raccoglie in un database o ancora mostra una pagina di
accettazione. Per fare ciò è necessario conoscere un linguaggio
di programmazione, il Perl ad esempio ma anche il C o il VBasic,
e il protocollo CGI che è appunto lo standard utilizzato sulla
Rete per l'invio di dati tramite form.
Per saperne di più sugli script CGI vai al TUTORIAL
CGI .
STYLEDa ultimare
<style>
è un nuovo tag, molto potente, che ci permette di creare dei
"tipi", cioé dei formati di stile di carattere:
<html>
<head>
<style>
A.pippo {font-family:"Impact"; font-size:3in;
color:white; background:black} ;
A.poppi {font-family:"Arial"; font-size:30pt;
background:red; color:white}
</style>
</head>
<body>
<A class="pippo">Questo testo è
gigantesco</a>
<br><br><br>
<A class="poppi">Questo è su sfondo
rosso</a>
</body>
</html>
Il tag style deve essere dichiarato
nell'intestazione tra i tag <head> e </head>. In questo modo, definendo
una classe, sarà sufficiente far riferimento a quella classe con
la dichiarazione:
<a
class="miaclasse">Testo</a>
per conformare quel testo alle specifiche fatte nella classe. Le
proprietà che è possibile settare sono:
PROPRIETA'
font-family per esempio: ...{font-family:
Arial, Times, Impact} specifica il tipo di font da usare;
font-size specifica la grandezza del
font;
font-weight...{font-weight:
bold; ...} valori possibili sono bold and normal;
font-style specifica lo stile (per
esempio: ...{font-style:italic;...);
text-decoration valori permessi sono: none (rimuove tutte le decorazioni),
line-through (traccia una linea sul
testo) e underline (sottolinea il testo);
line-height specifica l'altezza di una
linea ( ...{line-height:
5cm; ...} );
background specifica il colore o
l'immagine per lo sfondo. (per esempio: {...background:
forestgreen...}; o anche {...background: #FF00CC...} opppure un'immagine {...background
URL(http://myimage.com/imag.gif);...};
margin-left specifica il margine sinistro. Il valore in
the length can be any of the measurements listed in table 2.12 ({el]{margin-left:
10in;...}) setta il margine sinistro a 10 pollici;
margin-right specifica la lunghezza del
margine destro per l'elemento specificato ({el]{margin-right:
10in;...});
text-indent setta il rientro per ogni
paragrafo;
text-align setta l'allineamento per l'elemento
specificato. Valori sono: left, center e right.
color specifica il colore del testo.
Il colore può essere un nome o un valore esadecimale #RRGGBB.
Elenco
nomi dei colori.
by Vincenzo Canestrale 1997