L'ipertesto
è un semplice testo con la capacità di collegare un file all'altro.
Markup Language è un modo per scrivere informazioni sul layout dei documenti
Un file HTML non è altro che un file di testo.
Quando un
browser (Internet Explorer, Netscape, Opera o altri) apre un file HTML cerca
i codici e li interpreta visualizzando tabelle, immagini, colori ed il testo.
Visto che un file HTML è un semplice file di testo, questi pò essere creato
utilizzando un normalissimo text editor (blocco note). D'altro canto è possibile
utilizzare programmi che permettono di creare pagine web con la semplicità con
cui si scrive una lettera con un programma come word.
Questi programmi sono denominati WYSIWYG ("What You See Is What You Get"). I
più famosi tra questi programmi sono Frontpage (Microsoft) e Dreamweaver (Macromedia).
E dunque perchè spendere del tempo prezioso per imparare l'HTML?
1- Anche
il più sofisticato editor produce un codice non perfetto ed un pò piu pesante
2- Conoscendo il codice è possibile leggere quello di altri siti ed imparare
nuovi trucchi
3- E' possibile "pulire" il codice prodotto dagli editor visuali e rendere le
tue pagine più leggere
4- E' il primo passo per apprendere altri linguaggi di programmazione come DHTML...
5- E' possibile creare le proprie pagine utilizzando editor leggerissimi come
il Notepad di Windows
Un tag HTML
è un comando che permette di delineare un elemento, e di influenzarlo attraverso
l'istruzione che contiene.
Ad esempio se vogliamo applicare il grassetto ad una parola, useremo la coppia
di tag <b></b> (tag di apertura e tag di chiusura) e al loro interno
digiteremo la parola in questione.
Un ATTRIBUTO,
associato ad un tag, è un'ulteriore proprietà di formattazione.
| ESEMPIO: | RISULTATO: |
| <font face="Verdana" color="red" size="2">PROVA 1</font> | PROVA 1 |
L'attributo "face" formatta il nostro testo, associando ad esso il
carattere verdana una dimensione di 2 pixel e il colore rosso.
IL CODICE:
IL RISULTATO:
Il tag <html></html> indica l'inizio e la fine della pagina web
Il tag <head></head> conterrà al suo interno il titolo e i META TAGS
Il tag <title></title> definisce il titolo della nostra pagina web:
Infine
il tag <body></body> racchiude al suo interno tutti gli elementi
che saranno inseriti nella nostra pagina web.
La funzione del tag BODY è quella di mostrare gli elementi (testo, immagini,
suoni, applet, ecc) della pagina. Il tag BODY è utilizzato sia per fornire al
browser indicazioni sulla posizione degli oggetti nel documento sia per impostare
vari attributi di visualizzazione per la pagina web come, ad esempio, il colore
di sfondo o il colore del testo. La sintassi del tag può assumere la forma:
<BODY BGCOLOR="colore scelto" TEXT="colore scelto" LINK="colore scelto">
che indica rispettivamente il colore di sfondo della pagina, il colore dei caratteri,
il colore dei link. Nel caso in cui questi campi fossero omessi il browser visualizzerà
tutti i particolari con caratteri e colori standard.
Il tag <h1></h1> indica al browser che il testo indicato deve essere un Titolo di primo livello.
La scelta
del carattere col quale scrivere il testo che compone il sito deve essere vagliata
attentamente. Il colore dei caratteri non dev'essere troppo acceso e deve avere
il maggior contrasto possibile rispetto al colore di sfondo in maniera tale
da non disturbare durante la lettura.
Per un sito commerciale o dedicato ad un'azienda è consigliabile usare sempre
il nero con lo sfondo delle pagine in bianco. La dimensione del carattere è
strettamente legata al gusto della persona che crea il sito comunque sarà sufficiente
usare misure nè troppo grandi nè troppo piccole.
Per impostare le caratteristiche del carattere si usa il tag con la seguente
sintassi:
<FONT FACE="nome del carattere" SIZE="valore da 1 a 7" COLOR="codice del colore">Testo</font>
Per quanto riguarda il carattere è possibile inserirne più più di uno separando i loro nomi da una virgola. Esempio: ... FACE="Arial, Verdana, Optima"...
Nel caso in cui nessuno di questi parametri sia impostato oppure nessuno dei caratteri è presente nel computer del visitatore, verranno visualizzati i caratteri standard. In alcuni casi si rende necessario utilizzare un carattere che sia identico a quello usato nell'eventuale logo ma bisogna tenere presente la possibilità che non tutti i visitatori abbiano quel carattere installato nel computer.
L'unica maniera di ovviare all'eventuale download del font e relativa installazione da parte dei naviganti è realizzare delle immagini con le scritte che vogliamo riprodurre ma questo è un argomento che tratteremo in un'altra sezione di questa guida.
PARAGRAFI
Per definire
un paragrafo occorre utilizzare gli appositi tag <p>testo del paragrafo</p>.
Tutto il testo che racchiudono, farà parte dello stesso paragrafo.
Per allineare il testo occorre utilizzare l'attributo align.
Esempio 1: <p align=center>testo allineato al centro</p> - Il testo
sarà allineato al centro della pagina;
Esempio 2: <p align=left>testo allineato a sinistra</p> - Il testo
sarà allineato sul lato sinistro della pagina;
Esempio 3: <p align=right>testo allineato a destra</p> - Il testo
sarà allineato sul lato destro della pagina
Esempio 4: <p align=justify>testo giustificato</p> - Il testo sarà
giustificato e si adatterà alla pagina e ai margini.
INTERRUZIONI DI RIGA
Le interruzioni di riga servono per interrompere appunto una riga di testo in
un punto, facendola riprendere a capo rigo.
Il tag utilizzato è <br> (break) e non prevede un ulteriore tag di chiusura.
DEFINIZIONE DI BLOCCHI
Spesso in html è utile definire dei blocchi, siano essi di solo testo, testo
e immagini, o altri elementi.
La coppia di tag utilizzata è <div></div> che indicano l'inizio
e la fine di un blocco.
Il tag <div> supporta l'attributo align (come abbiamo visto per i paragrafi).
LISTE
Esistono due tipi di liste: a punti e numerate.
Per creare una lista contrassegnata da punti si utilizza il tag <ul> </ul>.
Per le liste contrassegnate da numeri si utilizza il tag <ol> </ol>.
Liste a punti HTML Spiegazione
<ul>
<li>text </li>
<li>text </li>
<li>text </li>
</ul>
Crea una lista a punti usando il tipo di punto del default.
<ultype="disc">
Inizia una lista a punti usando dischi come punti
<ul type="circle"> Inizia una lista a punti usando cerchi come punti
<ul type="square"> Inizia una lista a punti usando quadrati come punti
Liste numerate HTML Spiegazione
<ol>
<li>text </li>
<li>text< /li>
<li>text </li>
</ol>
Crea una lista a numeri usando il valore di default
<ol
start="5">Inizia una lista a numeri, partendo dal n. 5.
<ol type="A">Inizia una lista a numeri, usando lettere maiuscole.
<ol type="a">Inizia una lista a numeri, usando lettere minuscole.
<ol type="I">Inizia una lista a numeri, usando numeri romani maiuscoli.
<ol type="i">Inizia una lista a numeri, usando numeri romani minuscoli.
<ol type="1">Inizia una lista a numeri, usando numeri normali.
<ol type="I" start="7">Un esempio di come type (tipo) e start (inizio) possono
essere combinati.
IL CODICE:
IL RISULTATO:
Per inserire
un'immagine in HTML, viene usato il tag <img> insieme all'attributo src:
<img src="immagine"> (se l'immagine non si trova nella stessa
cartella, occorre definire il path). Come per il tag <br>, anche il tag
<img> è di sola apertura (non prevede un tag di chiusura).
Tra gli attributi che il tag <img> supporta, quelli che occorre conoscere
sono:
src - path immagine
alt - testo che appare quando ci fermiamo col puntatore sull'immagine o quando
non visualizziamo l'immagine stessa
border - valore numerico
width - valore numerico che esprime la larghezza in pixel
height - valore numerico che esprime la larghezza in pixel
Eempio: <img src="immagine.gif" width=40 height=70 alt="la
mia immagine" border="0"> - Stiamo inserendo l'immagine 'immagine.gif',
la larghezza è di 40 pixel, l'altezza di 70, il testo alternativo o esplicativo
è 'la mia immagine', il bordo è uguale a 'zero' (nessun bordo).
Probabilmente
rappresentano la parte più importante nell'HTML poichè ci permettono di spostarci
all'interno di un sito, visitandone tutte le pagine, o da un sito all'altro.
La coppia di tag utilizzata per inserire un collegamento ipertestuale è <a></a>.
Al tag <a> bisogna associare l'attributo href. All'interno dei tag <a></a>
andrà il testo o l'immagine, a cui vogliamo assegnare il collegamento.
Se ad esempio vogliamo fare in modo che il visitatore del sito, cliccando sull'immagine
'immagine.gif' venga portato al sito 'http://www.istruzione.it', useremo la
seguente sintassi:
<a href="http://www.istruzione.it"><img src="immagine.gif"
border=0></a>
Nel tag img abbiamo utilizzato l'attributo 'border=0' per fare in modo che l'immagine
non sia bordata. Infatti, quando applichiamo un link a un'immagine, essa, di
default, viene bordata.
L'uso dei TARGET*
Il tag <a> prevede, tra gli altri, l'attributo target="destinazione
del collegamento", dove, per destinazione del collegamento si intende in
quale finestra sarà aperta la pagina a cui è collegato il link su cui andremo
a cliccare. Se non impostiamo alcun target, verrà riutilizzata la medesima finestra
del browser. Se invece all'attributo target daremo il valore _blank, vale a
dire target="_blank", cliccando sul collegamento ipertestuale, la
pagina ad esso collegata sarà aperta in una nuova finestra.
*L'impiego dei target è molto utile se si utilizzano i frame.
Ancoraggi con nome
Creare un ancoraggio con nome significa definire un 'segnalibro' all'interno
di una pagina web e far puntare ad esso un collegamento ipertestuale. Si tratta
in pratica di costituire un link che consente la navigazione all'interno dello
stesso documento web. Prima di tutto occorre definire il segnalibro:
<a name="segnalibro">Testo</a>
In secondo luogo bisognerà creare il collegamento che punta al segnalibro così
creato:
<a href="#segnalibro">Vai al segnalibro creato</a>
Ora cliccando sul link 'Vai al segnalibro creato', saremo portati direttamente
alla parola 'Testo'.
(è possibile assegnare segnalibri non solo al testo ma anche ad altri elementi,
come ad esempio alle immagini).
Le tabelle,
in HTML, oltre ad un uso classico (catalogazione ecc..) vengono usate per creare
il layout delle pagine web.
UN giusto utilizzo, infatti, anche se comunque limitato, consente di creare
siti web di grande impatto visivo.
Per inserire una tabella si utilizzano i tag <table></table>.
Al loro interno vanno ancora i tag <tr></tr> che marcano una riga; nidificati tra questi, a loro volta, vanno i tag <td></td> che delineano invece le colonne (celle).
All'interno di questi ultimi andranno gli elementi racchiusi nella tabella. Il codice sorgente avrà così la seguente struttura:
<table
width=100 height=100 align=center bgcolor=#ffffff background="path/img.jpg"
cellspacing=0 cellpadding=0>
<tr>
<td width=50 height=50 valign=top bgcolor=#000000 background="path/img.gif">testo,
immagini, altri elementi</td>
</tr>
</table>
Come si
può notare sono stati inseriti degli attributi propri delle tabelle (e delle
celle in esse contenute): width
- larghezza tabella o cella espressa in pixel;
height - altezza tabella o cella espressa in pixel;
align - allineamento tabella o allineamento elementi cella (center, left,
right, justify);
bgcolor - colore di sfondo della tabella o della cella, espresso in codici
esadecimali o nomi dei colori;
background - immagine di sfondo della tabella o della cella;
valign - allineamento verticale degli elementi contenuti nella cella
(top, middle, bottom...);
cellspacing - lo spazio (in pixel) tra le celle che compongono la tabella;
cellpadding - lo spessore (in pixel) del margine delle celle che compongono
la tabella;
Esistono inoltre due ulteriori attributi,
colspan=numero
e rowspan=numero, che applicati ad una cella (td) specificano rispettivamente
il numero di colonne e righe espandibili su una cella:
|
1 |
2 |
|
3 |
|
ecco il
codice che genera la tabella sopraindicata:
<table
width="100" border="1" cellspacing="0" cellpadding="0"
align="center">
<tr> ........................................(inizio prima riga)
<td>1</td> .............................(prima cella/colonna)
<td>2</td> .............................(seconda cella/colonna)
</tr> ......................................(fine prima riga)
<tr> .......................................(inizio seconda riga)
<td colspan="2">3</td> .........(terza cella/colonna)
</tr> ......................................(fine seconda riga)
</table>
L'utilizzo
dei frame in un sito web è da sempre stato oggetto di accesi dibattiti. Molte
volte si è discusso se fosse giusto o meno suddividere una pagina web in più
frame differenti.. Fondamentalmente si tratta di gusti personali visto che le
nuove versioni dei browser più diffusi li supportano appieno. Diciamo solo che
in termini di risorse tecniche, una pagina che utilizza i frame ne richiede
di più di una che non li impiega (inoltre è più difficile il processo d'indicizzazione
sui motori di ricerca).
Infatti una pagina contenente dei frame deve essere composta come minimo da
tre pagine html, una nella quale sono presenti le istruzioni di base (frameset)
e altre due che saranno richiamate in due diverse finestre (o frame). L'una
sarà indipendente dall'altra.
Per prima cosa bisogna creare un FRAMESET che conterrà i tag e gli attributi
necessari a determinare la struttura della pagina completa. Esso avrà generalmente
questa struttura:
<html>
<head>
<title>Frameset</title>
<frameset rows="50,*">
(il frameset crea un frame in alto con larghezza relativa, 100%, e altezza 50
pixel)
<frame src="intestazione.html" name="intestazione">
(nel frame superiore è richiamato il file 'intestazione.html')
<frameset cols="30%,*">
(il frameset crea due ulteriori frame affiancati, entrambi con larghezza relativa
30% e 70%)
<frame src="sx.html" name="sinistro">
(il tag richiama nel frame di sinistra il file 'sx.html')
<frame src="dx.html" name="destro">
(il tag richiama nel frame di destra il file 'dx.html')
</frameset>
</frameset>
</html>
Alcuni attributi del FRAMESET
Border - spessore bordo espresso in pixel"
Frameborder - 1 per sì, 0 per no
Rows - misura1, misura2 ...
Cols - misura1, misura2 ...
L'attributo TARGET e i frame
Supponendo di avere una pagina composta da due frame, ipotizziamo di aver creato
nel frame superiore un collegamento ipertestuale ad una nuova pagina con questa
sintassi:
<a href="pagina.html">PAGINA</a>
Cliccando sul link ci renderemo conto che il documento html verrà visualizzato
nell'interezza della finestra del browser facendoci uscire dalla pagina con
i frame. Da quio l'utilità dell'attributo TARGET che ci consente di definire
la destinazione del collegamento ipertestuale. Se infatti vogliamo che la pagina
'pagina.html' venga visualizzata nel frame inferiore, supponendo di aver precedentemente
nominato questo frame 'inferiore' (con l'attributo 'name'), basterà modificare
il codice in questo modo:
<a href="pagina.html" target="inferiore">PAGINA</a>
Così per i restanti links.
Il tag NOFRAME
Per evitare che i browser di vecchia generazione, non compatibili con la teconologia
dei frame, visualizzino una pagina bianca al posto di una pagina web composta
da più frame, si utilizza la coppia di tag <noframe></noframe>,
inserendo al loro interno ciò che vogliamo venga visualizzato in questa situazione.
IFRAME, il frame interno
La coppia di tag <iframe></iframe> ci permette di inserire un frame
interno, in un punto ben definito di una pagina web, e di richiamare al suo
interno un qualsiasi file html (come per i normali frame). La sintassi utilizzata
è la seguente:
<iframe src="pagina.html" width="200" height="300"></iframe>
Il tag IFRAME è stato inserito con la versione 4.0 del linguaggio HTML e non
è compatibile con tutti i browser di navigazione.
Pino Lazzara 02/01/2003