Per mettere il tuo sito on line hai bisogno di:

• uno spazio web
• un programma per trasferire i file dal tuo pc allo spazio web

In calce a questo articolo trovi i riferimenti di alcuni provider (società che forniscono spazi web sia gratuitamente sia a pagamento).

Quando si sceglie di utilizzare uno spazio web il provider fornisce le caratteristiche dello spazio che offre: il prezzo dello spazio varia a seconda dei servizi abbinati allo spazio. Per tutto gli esempi che trovi su questo blog un qualunque spazio web va benissimo (non è necessario disporre di servizi particolari).

Alcuni provider permettono di trasferire i file dal proprio pc allo spazio web tramite il browser (Internet Explorer o Mozilla Firefox) altri invece richiedono di utilizzare un programma apposito. In qualuque caso il provider ti fornisce le seguenti informazioni

• Nome del Host: è il nome dello spazio, in molti casi questo combacia con l’indirizzo del tuo sito (es. www.calcabrinas.com)
• Login (o username): è il nome dell’utente con il quale hai il permesso di accedere allo spazio web
• Password: è la password che devi inserire per accedere allo spazio web.

Dopo aver inserito queste informazioni clicca su “Connetti”, ti troverai una finestra divisa in 2 parti. In una vedrai le cartelle presenti sul tuo pc, nell’altra vedrai le cartelle presenti nel tuo spazio web.

Per copiare i file sul tuo spazio web devi:

1. cliccare sulle cartelle presenti sul tuo pc fino a raggiungere i file che contengono il tuo sito
2. selezionare tutte le pagine, le immagini e eventuali altre cartelle che compongono il tuo sito
3. spostare i file all’interno del tuo spazio web(trascinado le icone, o utilizzando un pulsante con la freccia rivolta verso la parte che contiene i file presenti nello spazio web)

Basta non c’è altro! Se tutto ha funzionato puoi aprire il browser e raggiungere il tuo sito che è entrato a far parte di Internet!

Software FTP gratuiti
Fire FTP (è un plugin di firefox)
FileZilla

Provider gratuiti
Atervista
FreeHostia

Provider a pagamento
Aruba
Register

Un buon sito web contiene:

collegamenti (link) ad altri siti interessanti,
collegamenti ad altre pagine del tuo sito
collegamenti a singoli file da scaricare (questi possono trovarsi sul tuo sito, oppure su siti esterni)

Quello che segue è un esempio di link esterno

<a href=”http://www.google.it”>Questo è un link a un sito esterno</a>

Come puoi vedere nella prima parte si indica l’indirizzo del sito esterno (http://www.google.it), nella seconda parte si scrive il testo che apparirà cliccabile.

Quando il nostro sito comincia ad arricchirsi di diverse pagine ed immagini è necessario pensare alla struttura del sito organizzanolo in cartelle.

Il nostro sito ad es. potrebbe essere

pagina iniziale
cartella hobby
–i_miei_hobby.html
cartella immagini
cartella download
–cv.pdf

Se vuoi inserire un collegamento che dalla tua pagina iniziale rimandi alla pagina dei tuoi hobby puoi usare

<a href=”hobby/i_miei_hobby.html”>Guarda i miei hobby</a>

Come puoi notare nella prima parte si indica l’indirizzo relativo alla pagina del proprio sito (hobby/i_miei_hobby.html), nella seconda parte si scrive il testo che apparirà cliccabile.

Se, all’interno della pagina dei tuoi hobby, vuoi inserire un link alla pagina iniziale puoi usare

<a href=”../index.html”>Torna alla pagina iniziale</a>

N.B. Una convenzione vuole che la pagina iniziale di ogni sito si chiami index.html

Da questi due esempi noti che:
quando la pagina di destinazione si trova in una cartella di livello inferiore occorre inserire la cartella, seguita dal nome del file con l’estensione.
quando la pagina di destinazione si trova in una cartella di livello superiore occorre inserire ../ per ogni livello che occorre risalire (seguito dal nome del file con l’estensione).

Per maggiori chiarimenti sull’uso dei collegamenti interni puoi consultare HTML.it

Il terzo tipo d collegamento è quello che porta il visitatore del tuo sito a scaricare un file, di qualunque tipo esso sia (pdf, un video, un file musicale, ecc..)
Per creare un link che dalla tua pagina iniziale permetta di scaricare un file puoi usare

<a href=”download/cv.pdf”>Scarica il mio curriculim vitae

Come puoi notare non vi è differenza tra creare un link a un’altra pagina del tuo sito e creare un link a un file da scaricare.

Adesso prova tu!

1)Pensa alla struttura da dare al tuo sito (fai uno schema su carta), indicando tutte le pagine, i file e le cartelle
2)Alla fine della pagina iniziale inserisci i link a tutte le altre pagine del sito
3)Alla fine di ogni pagina del sito inserisci un collegamento che rimandi alla pagina iniziale.

Per allineare un testo o un’immagine occorre inserirle in un paragrafo e assegnare al tag <p> l’attributo align

<p align=”center”>

Un paragrafo può essere allineato a sinistra, destra o al centro

<html>
<head><title>Titolo della pagina</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
</head>
<body>
<p align=”center”>Il primo paragrafo allineato al centro.</p>
<p>Il secondo paragrafo.<br />
Questa riga appartiene al secondo paragrafo.</p>
<p>Il terzo paragrafo.</p>
<p align=”center”><img src=”foto.jpg”></p>
<p>Il quarto paragrafo.</p>
</body>
</html>

Prova ad inserire l’attributo align ai paragrafi che hai già creato, prova inoltre ad allineare le immagini inserendole dentro a nuovi paragrafi, seguendo l’esempio presente in questa pagina.

Per facilitare la lettura della pagina potresti voler inserire dei titoli, del testo in grassetto o in corsivo

Per inserire un titolo occorre racchiuderlo tra i tag <h1></h1>
<html>
<head><title>Titolo della pagina</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
</head>
<body>
<h1>Primo Titolo</h1>
<p>Il primo paragrafo</p>
<h2>Primo Sottotiolo</h2>
<p>testo del paragrafo in <strong>grassetto</strong>.</p>
<h1>Secondo titolo</h1>
<p>testo del paragrafo in <em>corsivo</em>.</p>
</body>
</html>

Come puoi notare dall’esempio, per scrivere del testo in grassetto occorre racchiuderlo tra i tag <strong>. Per scrivere del testo in corsivo occorre racchiuderlo tra i tag <em>.

Modifica la tua pagin inserendo dei titoli e mettendo in evidenza i concetti più importanti utilizzando il grassetto e il corsivo.

<html>
<head><title>Titolo della pagina</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
</head>
<body>
<p>Il primo paragrafo.</p>
<p>Il secondo paragrafo.<br />
Questa riga appartiene al secondo paragrafo.</p>
<p>Il terzo paragrafo.</p>
<img src=foto.jpg>
<p>Il quarto paragrafo.</p>
</body>
</html>

Per inserire un’immagine occorre utilizzare un tag che dica al browser dove si trova e come si chiama l’immagine che vuoi inserire
<img src=foto.jpg>
In questo esempio l’immagine si chiama foto.jpg e si trova nella stessa cartella in cui c’è il file che stai modificando.

Copia il codice dell’esempio e incollalo dentro un nuovo file di Blocco Note.
Scrivi un breve testo e organizzalo in paragrafi utilizzando i tag <p></p> e inserisci una o più immagini.
Apri la pagina con il tuo browser e guarda il risultato!

Tutte le pagine web ha questa struttura

<html>
<head><title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
</head>
<body>
</body>
</html>

Come si può notare la pagina è divisa in sezioni che vengono delimatate da tag (marcatori) ad es. body.
Ogni marcatore viene racchiuso dai simboli di < e >. Ogni volta che inserisci un marcatore per indicare l’inizio di una sezione (ad es. <body>), devi ricordarti di inserirne uno che chiuda la sezione (ad es. </body>).

Analizziamo la struttura di una pagina web

<html> indica al browser (il programma che usi per navigare su internet) che questa è una pagina web.

<head> contiene tutta una serie di informazioni che il browser “legge” prima di mostrare la pagina. In questa sezione vengono inserite le parole chiave che servono ai motori di ricerca, l’indicazione del set di caratteri utilizzato (ad es. alfabeto occidentale, piuttosto che giapponese o altro).

<meta> lo utilizziamo per indicare al browser che verrà utilizzato il set di caratteri UTF-8 che è un formato generale per supportare quasi tutti i caratteri (lettere accentate, @, ecc…). In questa guida utilizzeremo sempre questo set di caratteri.

<body> contiene tutti gli elementi (testo, immagini, video,..) che compongono la pagina. In questa sezione c’è il contenuto vero e proprio della pagina.

Dentro una sezione è possibile inserire altre sezioni. Ad esempio dentro la sezione <head> c’è la sezione <title>. Qui puoi inserire il titolo della pagina che comparirà nella prima barra orizzontale in alto nella finestra del browser.

Copia la struttura che trovi in questa pagina (da <html> fino a </html>) e incollala dentro un nuovo file di Blocco Note. Scrivi un titolo nella sezione <title>, salva il file come prova.html, aprilo con il tuo browser e guarda il risultato!
Hai appena creato la tua prima pagina web!