COME CREARE LE PAGINE WEB
DA PUBBLICARE IN INTERNET

By dr. Mario Rizzi ( www.viveremeglio.org )

Hai qualche suggerimento per migliorare questo mini corso?

Sommario

Lezione 13
Come inserire una tabella a una sola riga
Come inserire una tabella a più righe
Come inserire una tabella con una cella larga come alcune celle

Lezione 14
Come stabilire la larghezza di una tabella
Come fare una tabella centrata

Lezione 15
Come stabilire la larghezza di una cella
Come stabilire l'altezza di una cella

Lezione 16
I parametri relativi al contenuto di una cella

Lezione 17
Come inserire un'immagine in una tabella
Come prelevare un'immagine da un sito in Internet

Lezione 18
Come saltare ad un punto all'interno della pagina

Lezione 19
Come saltare ad un'altra pagina
Come saltare ad un punto all'interno di un'altra pagina

Lezione 20
Come creare uno sfondo a tinta unita per la pagina Web

Lezione 21
Come creare uno sfondo per la pagina Web usando un'immagine

******* LEZIONE 13 ********

Come inserire una tabella a una sola riga

Le tabelle sono molto utili, e non solo per metterci una sfilza di informazioni ben allineate! Possono infatti servire per dare un layout (forma o struttura) alle vostre pagine Web. Con l'uso di una tabella anche la gestione delle immagini diventa molto più facile.

Per creare le pareti esterne della tabella si utilizza il tag <table>, mentre per crare le divisioni interne si usano i tag:

• <border=x> per definire che ci vuole un bordino, dove x sta per lo spessore del medesimo: può essere 1, 2, ecc.
• <bordercolor=xxx> per definire il colore del bordino. Per conoscere come si usano il colori vedere la lezione che tratta il colore del testo.
• <cellpadding=xxx> per definire lo spazio (in pixel) che deve essere lasciato intorno al testo all'interno della tabella. Il suo uso apparirà chiaro vedendo gli esempi seguenti.
• <tr> </tr> per definire l'inizio e la fine di una riga
• <td> </td> per definire l'inizio e la fine di una cella all'interno della riga

Esempio di codice per una tabella, con un bordo=1 (non colorato), suddivisa in una riga divisa in due celle:

<table border=1>
<tr>
<td>questa è la prima cella</td>
<td>questa è la seconda cella</td>
</tr>
</table>

Ecco come apparirà la tabella di cui sopra:

Ecco come apparirà la tabella di cui sopra:

Come inserire una tabella a più righe

Esempio del codice per una tabella con tre righe divisa in due celle. È indicato che ci vuole un bordo di spessore=1 ed il medesimo deve essere rosso. introno al testo viene lasciato uno spazio di 5 pixel (vedi il parametro "cellpadding=5").

<table border=1 bordercolor=red cellpadding=5>
<tr>
<td>prima riga, prima cella</td>
<td>prima riga, seconda cella</td>
</tr>
<tr>
<td>seconda riga, prima cella</td>
<td>seconda riga, seconda cella</td>
</tr>
<tr>
<td>terza riga, prima cella</td>
<td>terza riga, seconda cella</td>
</tr>
</table>

Ecco come apparirà la tabella di cui sopra:

Come inserire una tabella con una cella larga come alcune celle

Vi sono dei casi in cui torna utile avere una cella larga come due o più celle. In questo caso, all'interno del tad <td>, si specifica il parametro "colspan=x", dove x indica il numero delle celle che la cella stessa deve comprendere.

Esempio del codice per una tabella con tre righe divisa in due celle. Si vuole che la prima riga contenga una cella sola, larga come le altre tre presenti sulla altre righe. Si vuole un bordo di spessore=2 senza alcun colore.

<table border=2>
<tr>
<td colspan=3>prima riga, larga come le altre due</td>
</tr>
<tr>
<td>seconda riga, prima cella</td>
<td>seconda riga, seconda cella</td>
</tr>
<tr>
<td>terza riga, prima cella</td>
<td>terza riga, seconda cella</td>
</tr>
</table>

Ecco come apparirà la tabella di cui sopra:

******* LEZIONE 14 ********

Come stabilire la larghezza di una tabella

Se non si stabilisce nessuna larghezza della tabella, essa verrà creata (automaticamente) abbastanza larga da poter contenere tutto quello che è stato posto nelle sue celle.

La larghezza di una tabella si stabilisce nel tag <table> con il parametro "width=". Si possono usare due modi:

1. Stabilirla in pixel. Esempio: <table width=200>
2. Stabilirla in percentuale sulla larghezza dello schermo (consigliata in quanto la larghezza non è influenzata dalle impostazioni del monitor). Esempio: <table width="80%">

Come fare una tabella centrata

Esempio del codice per una tabella centrata. La tabella è larga il 70% dello schermo, ha una riga divisa in 4 celle ed ha il bordino arancione. È richiesto che tra il testo e le pareti delle celle venga lasciato uno spazio di 15 pixel (vedi il parametro "cellpadding=15").

<center>
<table width="70%" border=1 bordercolor=#cc6600 cellpadding=15>
<tr>
<td>prima cella</td>
<td>seconda cella</td>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>
</center>

Ecco come apparirà la tabella di cui sopra:

******* LEZIONE 15 ********

Come stabilire la larghezza di una cella

Se non si stabilisce nessuna larghezza della cella, essa verrà creata (automaticamente) abbastanza larga da poter contenere quello che è stato posto al suo interno.

La larghezza di una cella si stabilisce nel tag <td> con il paramentro "width=". Si possono usare due modi:

1. Stabilirla in pixel. Esempio: <td width=200>
2. Stabilirla in percentuale sulla larghezza della tabella. Esempio: <td width="80%">

ATTENZIONE! Se si stabilisce la larghezza in una riga di celle anche le celle delle altre righe avranno la stessa larghezza (vedi esempio seguente).

Come stabilire l'altezza di una cella

Se non si stabilisce nessuna altezza della cella, essa verrà creata (automaticamente) abbastanza alta da poter contenere quello che è stato posto al suo interno.

L'altezza di una cella si stabilisce nel tag <td> con il parametro "height" e si stabilisce in pixel. Esempio: <td height=100>

ATTENZIONE! Se si stabilisce l'altezza di una cella tutte le celle di quella riga saranno alte uguali ad essa (vedi esempio seguente).

Esempio dei codici usati nella lezione 15. La tabella è larga 400 pixel, è centrata, ha una prima riga divisa in 4 celle che hanno una larghezza differente ed una seconda riga con altezza diversa dalla prima. Notare come:

<center>
<table width=400 border=2 bordercolor=red cellpadding=5>
<tr>
<td width="10%">prima cella</td>
<td width="20%">seconda cella</td>
<td width="20%">terza cella</td>
<td width="50%">quarta cella</td>
</tr>
<tr>
<td height=100>prima cella</td>
<td>seconda cella</td>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>
</center>

Ecco come apparirà la tabella di cui sopra:

******* LEZIONE 16 ********

I parametri relativi al contenuto di una cella

In una cella si può mettere del testo, dei grafici o delle immagini. La posizione di tutti questi elementi può essere decisa a priori utilizzando dei parametri appositi all'interno del tag <td>. Vediamoli nei dettagli:

Posizionamento orizzontale

• <td align=left>         Posiziona a sinistra (è il defoult se non si mette nulla)
• <td align=center>     Posiziona al centro
• <td align=right>       Posiziona a destra

Posizionamento verticale

• <td valign=top>        Posiziona in alto
• <td valign=middle>   Posiziona al centro (è il defoult se non si mette nulla)
• <td valign=bottom>  Posiziona in basso

NOTA: i due parametri "align=" e "valign=" possono essere utilizzati contemporaneamente.

Esempio di tabella centrata, larga 450 pixel, con quattro righe. Due righe sono usate come descrizione e le altre due contengono del testo posizionato (allineato) in modo diverso.

<center>
<table width=450 border=1 bordercolor=#cc6600 cellpadding=5>
<tr>
<td align=center colspan=3>Esempi di posizionamento orizzontale</td>
</tr>
<tr>
<td align=left>a sinistra</td>
<td align=center>al centro</td>
<td align=right>a destra</td>
</tr>
<tr>
<td align="middle" colspan=3>Esempi di posizionamento verticale</td>
</tr>
<tr>
<td height=100 valign=top>in alto</td>
<td valign=middle>al centro</td>
<td valign=bottom>in basso</td>
</tr>
</table>
</center>

Ecco come apparirà la tabella di cui sopra:

******* LEZIONE 17 ********

Come inserire un'immagine in una tabella

Importante! Per evitare inutili complicazioni ponete tutte le pagine e le immagini del sito che state creando nella stessa cartella!

Usando le tabella risulta assai facile la gestione delle immagini.

Per inserire un'immagine in una tabella si usa lo stesso tag visto nella Lezione sull'inserimento di un immagine.

IMPORTANTE! Se non definisci le misure dell'immagine, e la medesima è più grande della cella che la deve contenere, le misure della cella verranno allargate per contenerla, e questo ti può creare dei problemi. Morale: dai alle tue immagini le giuste dimensioni prima di utilizzarle, oppure defisci le loro dimensioni (in pixel!) con i parametri "width=" (larghezza) e "height=" (altezza) all'interno del tag <img>.

Un uso assai comune è quello di creare una tabella con due celle, una per l'immagine ed una per il testo. In questo caso è bene utilizzare:

• Il parametro "align=center" nel tag <td> della cella con l'immagine, al fine di posizionare l'immagine al centro della cella.
• Il parametro "valign=top" nel tag <td> della cella con il testo, al fine di posizionarlo in alto nella cella.

Esempio di utilizzo di una tabella a due celle, una per il testo ed una per l'immagine.

<center>
<table width="70%" border=3 bordercolor=blue cellpadding=15>
<tr>
<td valign=top>Solo pochi decenni fa questo era considerato uno strumento meraviglioso!</td>
<td align=center><img src="radio90x94.jpg" width=90 height=94 alt="radio.jpg"></td>
</tr>
</table>
</center>

Qui di seguito come apparirà la tabella con l'immagine. Va notato che non è stata definita la dimensione delle celle. La prima è stata creata delle dimensioni giuste per contenere l'immagine della radio, considerando anche i 15 pixel di bordo richiesti con il parametro "cellpadding=15", e alla seconda è stata attribuita la larghezza che è avanzata dopo aver creato la prima.

L'immagine nella prima cella è stata posizionata al centro con il parametro "align=center". Il testo nella seconda cella è stato posizionato in alto con il parametro "valign=top".

Solo pochi decenni fa questo era considerato uno strumento meraviglioso!

Come prelevare un'immagine da un sito in Internet

Per prelevare una immagine è sufficiente che clicchi col tasto destra sull'immagine, quindi clicchi su SALVA CON NOME e dici al computer dove la deve salvare.

Ciò vale per quasi tutte le immagini che trovi in Internet, ma stai attento! se le usi nella tua pagina Web devi sempre specificare il sito da cui le hai prese!

Importante! Per evitare inutili complicazioni ponete tutte le pagine e le immagini del sito che state creando nella stessa cartella!

******* LEZIONE 18 ********

Come saltare ad un punto all'interno della pagina

All'interno di un pagina web può nascere la necessità di saltare dal punto in cui ci si trova ad un altro punto, non importa se è localizzato prima o dopo. In altre parole si può dire che in un certo punto si vuole porre un "collegamento" in modo che il visitatore, cliccando su detto "collegamento", possa andare in una altro punto della pagina, magari lontano, senza dover far scorrere la pagina stessa.

Per poter fare questo collegamento è prima necessario che nel punto di arrivo (che potremmo paragonare alla casa verso cui viene indirizzata una lettera con la posta normale), vi sia il tag

<a name="xxxxx"> seguito dala suo tag di chiusura </a>. Tecnicamente il porre questo tipo di tag viene definito "Creare un'ancora".

Al posto di xxxxx si può mettere qualsiasi carattere alfabetico o numerico. È comunque molto consigliabile mettere un nome che si riferisce al quel punto della pagina Web. In altre parole se a quel punto parli delle mele rosse, il tag da usare potrebbe essere:

<a name="melerosse"> </a>

Dopo aver creato il tag di arrivo (ancora) puoi posizionare un collegamento a tale ancora in qualsiasi punto della tua pagina. Per creare questo collegamento devi usare il tag

<a href="#xxxxx"> seguito dala suo tag di chiusura </a>. Ovviamente al posto di xxxxx dovrai mettere il nome usato nell'ancora, nell'esempio "melerosse". Attenzione, prima del nome ci vuole sempre il segno cancelletto, ovvero #.

Esempio pratico: all'inizio della pagina WEB si vuole creare un sommario che permetta di andare due punti diversi (ancore) all'interno della stessa pagina.

<p><b>Sommario:</b>
<br><a href="#melerosse">Mele rosse</a>
<br><a href="#fragole">Fragole</a></p>
--------------------
--------------------
--------------------
--------------------

<a name="melerosse"> </a>
<h5>Le mele rosse</h5>
<p>Quando si parla di mele rosse si intende una particolare qualità di mele che... ecc.
--------------------
--------------------
--------------------
--------------------

<a name="fragole"> </a>
<h5>Le fragole</h5>
<p>Le fragole sono un frutto di bosco, ecc.

Il codice di cui sopra apparirà nella pagina come illustrato qui di seguito. Se clicchi su una delle voci del sommario andrai all'ancora corrispondente.

******* LEZIONE 19 ********

Come saltare ad un'altra pagina

Come saltare ad un punto all'interno di un'altra pagina

Un sito Web è sempre costituito da varie pagine, pertanto nasce la necessità di poter andare da una pagina all'altra. Questa operazione è molto simile a quella usata per saltare all'interno della stessa pagina, ed utilizza il tag

<a href="xxxx.htm"> dove xxxx.htm è il nome della pagina a cui si vuole andare, seguito da una descrizione che servirà al visitatore per sapere dove porta quel collegamento seguita da </a>

Esempio pratico

• Sulla pagina home.htm si vuole mettere un collegamento alla pagina Frutta.htm
  Soluzione: <a href="frutta.htm">Va a frutta.htm</a>

• Sulla pagina home.htm si vuole mettere un collegamento alla voce "fragole" nalla pagina Frutta.htm.
  Soluzione: <a href="frutta.htm#fragole">Va a Fragole</a>
  Nella pagina di arrivo (Frutta.htm) bisogna mettere il codice seguente (detto ancora)
  <a name="fragole"> </a> appena prima del punto in cui si inizia a parlare delle fragole.

• Sulla pagina frutta.htm si vuole mettere un collegamento per tornare alla Home page, ovvero alla index.htm
  Soluzione: <a href="index.htm">Torna a Home page</a>

Come creare uno sfondo a tinta unita per la pagina Web

Talvolta può essere simpatico dare alla pagina un colore che funga di sfondo a tutto ciò che vi viene posto. Si può ottenere questo risultato utilizzando il parametro "bgcolor=" all'interno del tag <body> che hai posto tra le prime righe della pagina. Per conoscere i nomi o i codici esadecimali da usare per i colori fa' riferimento alla Lezione sui colori.

Esempio di codice per dare allo sfondo il color grigio (in inglese gray blue: <body bgcolor=gray>
Clicca qui per vedere una pagina con tale sfondo.

Esempio di codice per dare allo sfondo il color azzurro: <body bgcolor=#00ffff>
Clicca qui per vedere una pagina con tale sfondo.

******* LEZIONE 21 ********

Come creare uno sfondo per la pagina Web usando un'immagine

In questo caso si può usare una immagine grande come la pagina, ma non è pratico ed allora non viene mai usata. In alternativa si una piccola immagine, che il programma di navigazione utilizza per riempire tutta la pagina, non importa quanto grande sia.

Per utilizzare una piccola immagine come sfondo si mette il suo nome nel parametro "background=" all'interno del tag <body> che hai posto tra le prime righe della pagina. Esempio pratico: <body background=3.jpg>

Qui di seguito vi sono delle immagini che puoi liberamente utilizzare come sfondo, più sotto trovi qualche esempio pratico sul loro utilizzo. Per prelevare le immagini è sufficiente che clicchi col tasto destra sull'immagine, quindi clicchi su SALVA CON NOME e dici al computer dove la deve salvare. Ciò vale per quasi tutte le immagini che trovi in Internet, ma stai attento! se le usi nella tua pagina Web devi sempre specificare il sito da cui le hai prese!

Se vuoi scegliere tra molti sfondi gratuiti, va alla pagina:
http://gifanimate.html.it/sfondi.asp

Importante! Per evitare inutili complicazioni ponete tutte le pagine, le immagini e gli sfondi, del sito che state creando nella stessa cartella!

0.gif	1.gif	2.gif	3.gif	4.gif
0.jpg	1.jpg	2.jpg	3.jpg	4.jpg

Esempio di codice per usare come sfondo l'immagine 0.jpg:
<body background=0.jpg>
Clicca qui per vedere una pagina con tale sfondo.

Esempio di codice per usare come sfondo l'immagine 2.gif:
<body background=2.gif>
Clicca qui per vedere una pagina con tale sfondo.

Esempio di codice per usare come sfondo l'immagine 3.jpg:
<body background=3.jpg>
Clicca qui per vedere una pagina con tale sfondo.