COME CREARE LE PAGINE WEB
DA PUBBLICARE IN INTERNET
Hai creato un sito utilizzando questo corso?
Mandami il tuo nome e cognome, l'indirizzo del tuo sito e la tua e-mail,
e lo pubblicherò nella "Galleria dei siti in HTML" (la Galleria l'allestirò con i vostri siti).
Hai qualche suggerimento per migliorare questo mini corso?
Per scrivermi
In questo corso verranno proposti vari esempi di codici che puoi
utilizzare copiandoli dalla pagina che stai leggendo nella tua pagina.
Se non hai l'esperienza necessaria per fare questo lavoro di copia/incolla
clicca qui. Se vuoi altri utili suggerimenti
per usare il programma Word clicca qui.
Sommario
Per vari Manuali su come imparare HTML clicca qui.
Lezione 1
Introduzione all'HTML
Lezione 2
Quale programma useremo per fare pratica?
Come creare un'icona per richiamare un programma dallo schermo (desk top)
Le impostazioni iniziali di una pagina Web
Come dare il nome ad una pagina Web
Come salvare la pagina Web
Come vedere la pagina Web
Lezione 3
I tipi di titolo disponibili
Come inserire un "Titolo" nella pagina Web
Come inserire tre paragrafi nella pagina Web
Lezione 4
Come centrare un Titolo (header)
Come centrare un paragrafo
Lezione 5
La formattazione del testo: lo stile
Lezione 6
La formattazione del testo: la grandezza
Lezione 7
La formattazione del testo: il colore
La formattazione dei titoli: il colore
Lezione 8
La formattazione del colore con i caratteri esadecimali
Lezione 9
Come importare del testo da Word o altro programma
Lezione 10
Come andare a capo senza creare una riga vuota
Lezione 11
Il formato delle immagini: i pixel
Immagini GIF O JPEG?
Come inserire un'immagine
Allineamento orizzontale di un'immagine
Allineamento del testo con l'immagine
Lezione 12
Come inserire una riga che funge da separatore
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 22
Come inserire il tuo e_mail in una pagina Web
Lezione 23
Come inserire un brano musicale in una pagina Web
Elenco di siti con file MIDI
Lezione 24
Come inserire un testo scorrevole o marquee
Lezione 25
Come inserire una riga di commento
Come leggere il codice HTML dei siti in Internet
Lezione 26
Come cambiare il tipo (font) dei caratteri
Lezione 27
Come creare un elenco puntato o numerato
Lezione 28
Come creare uno sfondo colorato a una o più parole
Lezione 29
Come creare uno sfondo colorato a una tabella
Lezione 30
Come inserire un numero in posizione apice (elevaz. di potenza)
o pedice (logaritmo)
Lezione 31
Come creare delle informazioni già pronte per chi
ti scrive dal sito
Lezione 32
Come fare domande e dare risposte ai visitatori
Lezione 33
Come dare una descrizione ad un link
Lezione 34
Come inserire alcuni caratteri particolari
Lezione 35
Come far tradurre una pagina dall'italiano all'inglese
Lezione 36
Metti un contavisitatori gratuito nella tua home page!
Lezione 37
Metti un cercaparole gratuito nella tuo sito!
Lezione 38
Come inserire il codice per farti scrivere una e-mail
Lezione 39
Ulteriori informazioni utili
Lezione 40
Come aggiungere un video al sito
MANUALI DI APPROFONDIMENTO IN LINGUA ITALIANA
MANUALI DI APPROFONDIMENTO IN LINGUA INGLESE
SITI CON INFORMAZIONI UTILI
******* LEZIONE 1 *******
Una delle prime cose che devi sapere, prima di creare un pagina Web
("World Wide Web" ovvro "la ragnatela ampia come il mondo"), è il modo di
utilizzare i codici che trasformano il tuo testo in una pagina adatta ad essere
pubblicata in Internet. Questi codici si chiamano HTML
(Hyper Text Markup Language), ovvero un liguaggio di testo
codificato.
Imparare ad usare HTML è come imparare ad andare in bicicletta. Una volta che cominci,
continuerai a "pedalare" fintanto che non ne avrai acquisito la padronanza!
E quando l'avrai acquisita potrai fare tutto quello che vuoi.
Con l'HTML puoi mettere nelle tue pagine Web del testo normale, titoli, immagini, tabelle e
link (collegamenti) ad altre pagine. Senza i codici HTML una pagina di Internet sarebbe solo
una pagina di testo, con esso acquista invece la possibilità di essere pubblicata e vista
dagli eventuali visitatori.
Per darti un'idea di come si usano i codici (detti TAG) dell'HTML facciamo qualche
esempio pratico. Vuoi scrivere un titolo (header) molto grande? Ebbene userai il tag
<h1>>, esempio:
<h1>Titolo molto grande</h1>
che nella pagina web pubblicata in Internet apparirà come:
Titolo molto grande
Ti prego di notare che il tag <h1> è stato posto prima del titolo, per dire a
Internet che sta iniziando un titolo. Poi, per dire che il titolo è finito, si usa
lo stesso tag, ma preceduto da un barra, ovvero: </h1>.
Questo vale per quasi tutti i tag (codici) che si usano in HTML.
Uno, all'inizio, determina cosa fare e l'altro, alla fine,
dice che quel lavoro è finito.
******* LEZIONE 2 *******
Attenzione: dove sta scritto solo "clic"
si intende cliccare col tasto sinistro del mouse
Per creare la nostra pagina web useremo un piccolo programma che fa parte di tutte le
versioni di Window, si chiama Blocco Note (Note Pad), per aprirlo:
- clic su START,
- clic su PROGRAMMI
- clic su ACCESSORI
- ciic su BLOCCO NOTE
Se vuoi facilitarti il lavoro puoi creare un'icona sullo schermo un'icona per aprire il
Blocco Note ogni volta che lo vuoi utilizzare. Per creare tale icona:
- clic su START
- clic su PROGRAMMI
- clic su ACCESSORI
- clic col tasto destro su BLOCCO NOTE
- clic su CREA COLLEGAMENTO, apparirà una riga con scritto "Blocco Note 2"
- clic col tasto destro sulla riga "Blocco Note 2"
- clic su TAGLIA
- clic col tasto destro sullo schermo, in un punto dove è vuoto
- clic su INCOLLA, l'icona del Blocco Note apparirà sullo schermo
Quanto sopra vale per qualsiasi programma o file
di cui desideri avere una icona sulla schermo per fare un richiamo immediato.
Per impostare una nuova pagina apri il programma Blocco Note, quindi
inserisci, una riga sotto l'altra, i seguenti codici obbligatori in una pagina che
dovrà essere pubblicata in Internet ovvero una pagina WEB.
Nello spazio tra
<body> e </body> scriverai in seguito il contenuto della tua pagina.
ATTENZIONE! Se non vuoi perdere tempo a scrivere i codici puoi
fare copia e incolla!
<html>
<head>
<title>Pagina di prova (il titolo serve quando si mette la pagina nei preferiti)</title>
</head>
<body>
</body>
</html>
ATTENZIONE, IMPORTANTE!
- Tutte le pagine Web devono finire con .htm. Se usi il Blocco note dovrai rinominare
le pagine perché le salva con .txt come parte finale del nome.
Se non la rinomini non potrai vederle usando Internet Explorer o un altro programma
per navigare in Internet!
- La prima (o unica pagina di un sito) si deve chiamare index.htm.
- Per stabilire il nome da dare alla tue pagine suggeriamo di usare solo
i caratteri alfabetici, i numeri ed al limite i caratteri - e _,
utili per creare nomi formati da due o più parole, ad es. "frutta_estiva_01.htm",
"prova-01.htm".
A questo punto puoi salvare la pagina Web sul disco, e quindi provare ad aprirla
con Internet Explorer o qualche altro programma che usi per navigare in Internet.
- clic su FILE
- clic su SALVA CON NOME
- nel Nome del file inserisci il nome scelto.
- clic su SALVA
- apri Internet Explorer o il programma che usi per navigare in Internet
- clic su FILE
- clic su APRI
- trova la pagina che hai salvato in precedenza e cliccaci sopra un paio di volte.
ATTENZIONE! Per vedere, con Internet Explorer,
una pagina che hai modificato e salvato devi aprirla di nuovo
oppure fare clic sulle due freccette in alto (funzione "Aggiorna") localizzate accanto
alla finistrella dove viene visualizzato il nome del file.
******* LEZIONE 3 *******
Vi sono diverse misure di titoli, dal più grande (tag <h1>)
al più piccolo (tag <h6>) che, nella pagina web appariranno come:
Titolo 1
Titolo 2
Titolo 3
Titolo 4
Titolo 5
Titolo 6
Esempio, vuoi inserire un Titolo di tipo 3, devi usare il tag <h3>.
ovvero:
- nella riga dopo il codice <body> inserisci:
- <h3>ESEMPIO DI PAGINA WEB</h3>
ATTENZIONE! Per vedere, con Internet Explorer,
una pagina che hai modificato e salvato devi aprirla di nuovo
oppure fare clic sulle due freccette in alto (funzione "Aggiorna") localizzate accanto
alla finistrella dove viene visualizzato il nome del file.
- nella riga dopo il Titolo inserisci le tre righe seguenti:
- <p>Questa è la mia prima pagina Web creata con i codice HTML</p>
- <p>In questa pagina appariranno un titolo di media grandezza e tre paragrafi di testo.</p>
- <p>Questo è il terzo paragrafo</p>
******* LEZIONE 4 *******
Semplice, si scrive il Tag del Titolo con il parametro aggiuntivo "align=center".
Esempio: <h4 align=center>Questo è un Titolo 4 centrato</h4>
che apparirà come:
Questo è un Titolo 4 centrato
Come sopra, si scrive il Tag del paragrafo con il parametro aggiuntivo 'align=center'.
Esempio: <p align=center>Questo è un paragrafo centrato</p>
che apparirà come:
Questo è un paragrafo centrato
Pratica
Apri la pagina Web che hai creato in precedenza e centra il titolo ed una riga di paragrafo.
Vai poi a vedere con Internet Explorer (o altro programma) il risultato ottenuto.
******* LEZIONE 5 *******
Per dare al testo lo stile Grassetto: (bold) si usa il tag <strong>
Esempio: <strong>testo in grassetto</strong>
che apparirà come testo in grassetto.
Per dare al testo lo stile Corsivo: (italic) si usa il tag <i>
Esempio: <i>testo in grassetto</i>
che apparirà come testo in corsivo.
Per dare al testo lo stile Sottolineato: (underline) si usa il tag <u>
Esempio: <u>testo in grassetto</u>
che apparirà come testo sottolineato.
È possibile applicare più stili allo stesso testo, esempio
Esempio: <i><b><u>testo in corsivo, grassetto e sottolineato.</i></b></u>
che apparirà come testo in corsivo, grassetto e sottolineato.
Pratica
Apri la pagina Web che hai creato in precedenza e cambia lo stile dei caratteri di qualche parola.
Vai poi a vedere con Internet Explorer (o altro programma) il risultato ottenuto.
******* LEZIONE 6 *******
Per modificare la grandezza di uno o più caratteri si usa il tag
<font size=x> dove x sta per la grandezza dei caratteri che varia da 1
(il più piccolo) a 7 (il più grande).
Esempi:
<p><font size=1>Caratteri a grandezza 1</font></p>
che apparirà come: Caratteri a grandezza 1
<p><font size=5>Caratteri a grandezza 5</font></p>
che apparirà come: Caratteri a grandezza 5
Pratica
Apri la pagina Web che hai creato in precedenza, cambia la grandezza di qualche parola.
Vai poi a vedere con Internet Explorer (o altro programma) il risultato ottenuto.
******* LEZIONE 7 *******
Per modificare il colore di uno o più caratteri si usa il tag <font color=xxx>
dove xxx sta per il colore che va definito in lingua inglese.
Esempi:
<font color=blue> colore blu
<font color=green> colore verde
<font color=yellow> colore giallo
<font color=red> colore rosso
<font color=grey> colore grigio
Va notato che nella tag <font> si possono mettere più opzioni, è perciò possibile, con
un solo tag, definire sia la grandezza che il colore.
Esempio:
<font size=4 color=blue>caratteri grandi 4 e colorati di blu</font>
che apparirà come caratteri grandi 4 e colorati di blu
Quanto detto sopra si applica anche la tag che si usa per i titoli.
Esempio di "Titolo 4" colorato in blu:
<h4><font color=blue>ESEMPIO DI TITOLO 4 IN BLU</font></h4>
che apparirà come:
ESEMPIO DI TITOLO 4 IN BLU
Apri la pagina Web che hai creato in precedenza, cambia il colore del titolo e di
qualche parola.
Vai poi a vedere con Internet Explorer (o altro programma) il risultato ottenuto.
******* LEZIONE 8 *******
A volte, per poter dare un colore insolito, vengono usati dei codici detti "esadecimali".
Per utilizzare i codici viene usato il tag <font color=> in questo modo:
<font color=#xxxxxx>, dove xxxxxx è il codice esadecimale.
Esempio: <font color=#ff0000>testo in rosso</font>
che apparirà come testo in rosso.
TABELLA DEI COLORI CON IL CODICE ESADECIMALE
 |
black = "#000000" |
 |
green = "#008000"
|
 |
silver = "#C0C0C0" |
 |
lime = "#00FF00"
|
 |
gray = "#808080" |
 |
olive = "#808000"
|
 |
white = "#FFFFFF" |
 |
yellow = "#FFFF00"
|
 |
maroon = "#800000" |
 |
navy = "#000080"
|
 |
red = "#FF0000" |
 |
blue = "#0000FF"
|
 |
purple = "#800080" |
 |
teal = "#008080"
|
 |
fuchsia = "#FF00FF" |
 |
aqua = "#00FFFF"
|
Per vedere una tabella con moltissimi colori ed i codici correlati
clicca qui
Trovi un ottimo strumento per scegliere i colori da una tavolozza ed averli convertiti
in codici esadecimali nel sito http://wellstyled.com/tools/colorscheme2/index-en.html
Se vuoi puoi prelevare lo strumento per usarlo al di fuori di Internet
cliccando qui.
******* LEZIONE 9 ********
- fai partire il programma con cui è stato fatto il documento da importare, supponiamo il Word.
- apri detto documento.
- seleziona i caratteri o il blocco di caratteri che vuoi importare.
- clicca sul menu MODIFICA e quindi sull'opzione COPIA.
- in alternativa: tieni premuto il tasto
CONTROL (CTRL) e premi il tasto INSERISCI (Ins).
- clicca sul - che sta in un quadratino in alto,
alla tua destra, il Word (o il programma che stai usando) scomparirà dalla schermo
ed apparirà una piccola icona sulla barra in basso.
Se lo devi usare ancora è sufficiente che clicchi su tale icona.
- fai partire il Blocco note.
- apri la pagina Web che in costruzione.
- porta il cursore del mouse nel punto in cui si vuole inserire il blocco di
caratteri.
- clicca sul menu MODIFICA e quindi sull'opzione INCOLLA. Ora il testo è inserito.
- in alternativa: tieni premuto il tasto MAIUSCOLE
e premi il tasto INSERISCI (Ins). Ora il testo è inserito.
Avrai notato che il testo inserito è formato da tante righe, una per ogni paragrafo che
hai importato. Se vi era un paragrafo era lungo, la riga che gli corrisponde sarà
molto larga ed uscirà dallo schermo. Questo, comunque, non costituisce un problema
perché HTML è capace di suddividere il testo in modo da creare tante righe,
una sotto l'altra.
Ora, per finire il lavoro, devi:
- mettere la tag di inizio paragrafo <p> all'inizio di ogni riga
che hai importato.
- teoricamente dovresti anche mettere il tag di fine paragrafo </p>
alla fine di ogni riga, ma è sufficiente che lo metti all'inizio della riga che
sta sotto l'ultima riga importata.
Esempio pratico. Il seguente brano, nel programma Word, era disposto su 6 righe. Dopo
l'importazione nella pagina Web occupava una riga sola, molto larga.
All'inizio di tale riga è stato posto il tag <p> e nella riga subito sotto è stato
posto il tag </p>. Ecco come è stato sistemato nella pagina Web:
<p>Bernardino Del Boca ha paragonato l'uomo ad una carrozza... ecc.
</p>
******* LEZIONE 10 ********
Talvolta può essere utile andare a capo senza che si venga a creare una riga vuota tra
l'ultima riga scritta e quella che vuoi scrivere, esempio:
Mario Rizzi ha scritto un volume di preghiere
a grandi caratteri, adatto per le persone anziane, che ha chiamato Con te.
Anno di pubblicazione: 1992.
Casa editrice: Mimep Docete.
In questo caso si usa il tag <br>.
Segue un esempio pratico di come
devi codificare il brano di cui sopra per renderlo adatto ad una pagina Web.
<p><font color=blue>Mario Rizzi ha scritto un volume di preghiere
a grandi caratteri, adatto per le persone anziane, che ha chiamato <b><i>Con te.</i></b>
<br>Anno di pubblicazione: 1992.
<br>Casa editrice: Mimep Docete.</font></p>
******* LEZIONE 11 ********
Un pixel è la più piccola unità di luce sul monitor di un
computer. Il pixel è una misura relativa, ciò significa che un
monitor di 17 pollici configurato a 640 pixel di larghezza e 480 di altezza, ha i pixel
più grandi di quelli su un monitor configurato a 800 X 600 pixel.
Dovrebbe risultare evidente che un'immagine NON deve essere più grande, misurata in pixel,
delle misure in cui è stato impostato il monitor. Attualmente la maggior parte degli
utenti usa la configurazione 800 x 600.
Ciò non vale per gli sfondi che sono costituiti da
un'immagine piccola ripetuta molte volte.
Le normali applicazioni Windows (come Paint), per gestire le immagini
utilizzano lo standard bitmap (cioè i file con estensione .BMP). Purtroppo tali
immagini non si possono usare in una pagina Web perché i file che le contengono
sono troppo grandi. La loro presenza, infatti, rallenterebbe eccessivamente il tempo di
caricamento della pagina stessa.
Un formato più agile è il GIF (Graphic Image Format). La stessa immagine, salvata nei
formati BMP sarà contenuta in un file molto più grande che non se fosse salvata in GIF.
Un altro formato, di dimensioni ancor più ridotte, è detto JPEG (Joint
Photographic Experts Group), ed è contrassegnato dalle
estensioni .JPG e .JPE.
- Il formato .GIF si usa quando le immagini hanno delle zone di colore ben definito,
ovvero non hanno sfumature. Va bene, ad esempio, per un disegno in bianco e nero, oppure
per un collage fatto di pezzi di carta colorata.
- Il formato .JPG si usa quando le immagini hanno delle sfumature. Va bene, ad esempio,
per un ritratto o un panorama. Si può usare per qualsiasi tipo di immagine.
Le immagini destinate alla tua pagina Web dovranno perciò essere
create (o convertite) in uno dei due formati sopra indicati. Per farlo
potete ricorrere a uno dei molti programmi per la gestione delle immagini, Windows stesso vi
offre Paint nella sezione Accessori, del menù programmi accessibile cliccando sul
pulsante START.
Immagine nuova. Quando la salvi devie specificare .GIF o .JPG.
Immagine con un formato diverso da .GIF o .JPG. Devi aprirla con un
programma per la gestione delle immagini, quindi usare SALVA CON NOME (menu FILE) e
salvarla specificando uno dei due formati adatti alla pagina Web.
Per inserire un'immagine si usa il tag <img> che necessita vari parametri,
ma non necessita il tag di chiusura, ovvero </img>.
L'unico parametro obbligatorio è quello in blu.
- src="nnnnn" dove nnnnn è il nome del file contenente l'immagine da inserire. Per
evitare complicazioni è bene che tale immagine sia posta nella
stessa cartella dove si trova la pagina Web in costruzione.
- width=xxxxx dove xxxxx è la larghezza dell'immagine in pixel.
Cambiando questo valore si può allargare o restringere l'immagine.
- height=yyyyy dove yyyyy è l'altezza dell'immagine in pixel.
Cambiando questo valore si può allungare o accorciare l'immagine.
- alt="zzzzz" dove zzzzz è una breve descrizione dell'immagine, che verrà usata
in alternativa all'immagine da parte di quei browser che non possono
visualizzare le immagini o quando viene disabilitata la visualizzazione delle stesse.
Esempio di inserimento del file "casetta66x66.gif":
<img src="casetta_66x66.gif" width=66 height=66 alt="casetta">
Per allineare l'immagine a sinistra, centro e destra dello schermo, è sufficiente
inserirla in un paragrafo, insieme o al posto del testo. Il paragrafo, a sua volta, verrà
allineato nel modo desiderato.
Esempio di immagine a sinistra:
<p><img src="casetta_66x66.gif" width=66 height=66 alt="casetta"></p>
Esempio di immagine al centro:
<p align=center><img src="casetta_66x66.gif" width=66 height=66 alt="casetta"></p>
Esempio di immagine a destra:
<p align=right><img src="casetta_66x66.gif" width=66 height=66 alt="casetta"></p>
Seguono i vari valori da utilizzare con il paramentro "align=", all'interno del tag img.
- top la sommità dell'immagine è allineato con la parte alta
della riga contenente l'immagine stessa,
- middle il centro dell'immagine è allineato con la parte centrale della
riga che contiene l'immagine,
- bottom la base dell'immagine è allineata con la parte bassa della
riga contenente l'immagine stessa,
Esempi di uso del paramentro "align=":
<img src="casetta_66x66.gif" align=top width=66 height=66 alt="casetta">
Immagine a sinistra con align=top
<img src="casetta_66x66.gif" align=middle width=66 height=66 alt="casetta">
Immagine a sinistra con align=middle
<img src="casetta_66x66.gif" align=bottom width=66 height=66 alt="casetta">
Immagine a sinistra con align=bottom
******* LEZIONE 12 ********
Per inserire una riga usa il tag <hr> in cui si possono mettere vari parametri,
che non sono obbligatori.
Questo tag non necessita il tag di chiusura, ovvero </hr>.
Esempi:
Inserendo il tag <hr> si visualizzerà la riga seguente:
Inserendo il tag <hr color=blue> si visualizzerà la riga seguente (si possono usare
tutti i colori, per dettagli vedi la lezione che tratta il
colore del testo).
Inserendo il tag <hr color=blue width=200 align=center> si visualizzerà la riga seguente, larga
200 pixel e allineata al centro.
Seconda parte