IntroduzioneAltervista (www.altervista.org) mette adisposizione le più moderne tecnologieweb 2.0 per creare un proprio sito web.In questo tutorial vogliamo guidarvi nellaregistrazione al sito e nella creazione diuna vostra pagina web.

Rimandiamo a ulteriori guide evidenziatein appendice per l'approfondimento dellinguaggio HTML la cui conoscenzaavanzata permette di personalizzare lepagine in modo creativo e professionale.

I prerequisiti per la creazione del sitoweb sono quelli di possedere una propriacasella di posta elettronica che servirà infase di registrazione, e di avere un po' dimanualità con la navigazione su Internet.

RegistrazioneIl primo passo per la realizzazione delproprio sito web su altervista è laregistrazione sul sito. La registrazioneserve per scegliere un nome chevogliamo assegnare al nostro sito web.Tutti i siti gratuiti creati su altervistasono del tipo nomesito.altervista.orgdove al posto di nomesito ci sarà il nomeche avete scelto.

Scelta del nomePer scegliere il nome del proprio sito ilprimo passo è quello di aprire il propriobrowser preferito e digitare l'indirizzodel sito di Altervista.Il browser, per chi non lo sapesse, è ilprogramma che viene utilizzato pernavigare (o in gergo "andare") in Internet.

I browser più utilizzati sono InternetExplorer, Chrome, Firefox, Opera oSafari. Nei cellulari sono disponibilimolti altri browser.Una volta aperto il browser doveteinserire l'indirizzo di Altervista nellabarra degli indirizzi (quella dovescrivete il nome del sito che voletevisitare). L'indirizzo di Altervista è ilseguente: www.altervista.org.

Una volta raggiunto l'indirizzo si apriràla home page di Altervista e al centrodella pagina si troverà un pannello comequello nell'immagine seguente in cuiavremo la possibilità di inserire il nomedel sito che vogliamo creare.

All'interno della casella in cui comparela scritta "scrivi il nome del tuo sito" è

possibile inserire il nome che abbiamoscelto. Una volta fatto si premerà il tastocontinua.E' importante sapere che possiamoutilizzare un nome qualunque, in questotutorial ad esempio creeremo un sito chesi chiama provolone.altervista.org,purché il nome non sia già stato registratoe utilizzato da qualcun altro.

Una volta scelto un nome non utilizzatoda nessuno e premuto il tasto continua ilsito di altervista ci mostrerà la secondapagina in cui andremo ad inserire i datipersonali e dovremo accettare lecondizioni del sito.

Inserimento dei nostridati personaliNella seconda pagina della registrazioneil sito di Altervista ci ripresenterà il

nome del sito che abbiamo scelto comemostrato nella figura seguente.

L'ok verde ci ricorda che il nome cheabbiamo scelto è tuttora disponibile.Sotto il promemoria del nome scelto ilsito ci presenta altre caselle in cuiinserire i nostri dati personali.

Per cominciare il nostro nome ecognome.

Il sesso, la data di nascita, la nazione, laprovincia e il CAP.

La nostra email e il codice di sicurezza.

L'email deve essere ripetuta due volteper evitare che sia scritta in modo errato.L'email è infatti il dato più importanteche inseriremo nella registrazione perchéAltervista ci invierà le credenziali diaccesso al sito.Il codice di sicurezza deve essereinserito così come appare nell'immaginedeformata a sinistra ed ha lo scopo diverificare che l'inserimento dei dati siastato effettuato da una persona reale. Iprogrammi automatici infatti fanno faticaa leggere i caratteri deformati, ancheperché ogni immagine deforma i cartteri

in modo diverso.

In ultima ci vengono chieste di accettarele condizioni del sito e di privacy.

La prima casella è obbligatoria in quantoè obbligatorio accettare i termini e lecondizioni del sito. La seconda casella èinvece opzionale e va selezionata solo sesi vuole essere contattati per informativecommerciali da parte di Altervista.

Per concludere la registrazione èsufficiente premere nel tasto "prosegui"in fondo alla pagina.

Una volta premuto il tasto "prosegui" ilsistema invierà automaticamenteall'indirizzo email che abbiamo fornito inprecedenza una email con la nostra logine la nostra password. Il contenuto diquesta email sarà simile all'immaginesottostante.

L'ultimissimo passaggio è la scelta deltipo di sito che vogliamo creare. Perquesto tutorial la scelta da fare è quelladi gestire il sito in modalità manuale. Perfare questo dovrete premere nel tasto"Vai i file" mostrato in fondoall'immagine seguente.

Possiamo ora entrare nel sistema ecominciare a lavorare!

Accesso al sistema

LoginPer accedere al sistema è necessarioinviare la login e la password cheabbiamo ricevuto via email al momentodella registrazione.L'emal conterrà delle informazioni perl'accesso come indicato nell'immagineseguente.

Premendo il tasto accedi nell'email siverrà portati nella home page diAltervista e sarà possibile inserire lapropria login e password.Alternativamente è possibile accedere

andando sul sito web di altervistawww.altervista.org, premere nel tasto inalto a destra "pannello".

Una volta premuto nel tasto "pannellosarà possibile inserire la propria login epassword.

La casella "resta connesso", chenell'immagine precedente è marcata,consente di rimanere connesso al sito dialtervista anche dopo la chiusura delbrowser. In sostanza chiudendo eriaprendo il browser non sarà più

necessario reinserire nome utente epassword. In genere è una opzione moltocomoda a meno che non si acceda alproprio sito in una postazione utilizzatada molte persone, nel qual caso si rischiache qualcun altro possa utilizzare ilnostro sito.Il link "Password dimenticata?" invececonsente di farsi reinviare la password alproprio indirizzo di posta elettronica nelcaso avessimo perso l'email iniziale.

Una volta effettuato il login si presenteràuna schermata composta da un menu chepermette di accedere alle risorse piùimportanti messe a disposizione diAltervista. In questo tutorial andremo avedere solo quanto viene visualizzatonell'area "Applicazioni", quellaevidenziata qui sotto.

Sotto il menu, nell'area applicazioni,troviamo l'elenco dei file presenti nelsito. Dopo il primo accesso la situazioneè la sequente

ed esiste un solo file, index.html, cherappresenta il contenuto della primapagina del sito creata automaticamente daAltervita.

Sotto l'elenco dei file si presenta unabarra che ci consente di visualizzarequanto spazio è stato utilizzato e quantone abbiamo a disposizione. Questoperché sul nostro sito di Altervistapossiamo caricare fino ad 1 GByte didati.

Dopo essere entrati ed avere effettuato illogin non ci resta che creare la nostraprima pagina.

Creazione dellaprima paginaHTML

LoginPrima di potere modificare o creare unapagina nel nostro sito è necessarioeffettuare il login con le nostrecredenziali.

Come spiegato in modo dettagliato nelcapitolo precedente, e in ogni casoinserendo login e password nella paginaraggiungibile cliccando in alto a destrasu "pannello" nella pagina all'indirizzowww.altervista.org.

Creazione della primapaginaQuando il sito di Altervista viene creatoviene creata una pagina "index.html" chenon può essere modificata. E' necessariocancellarla.

Nell'area menu premere "Applicazioni"

scegliere Gestione File nel boxsottostante

e successivamente portare il puntatoredel mouse sopra il file index.html.

Sotto il nome del file compariranno dellevoci che consentiranno alcune semplicioperazioni come rinominare e modificareil file. Quella che ci interessa almomento è la funzionalità dieliminazione, l'ultima a destra.

Una volta premuto su "Elimina" ilsistema chiederà la conferma dellacancellazione

e quindi dovremo premere nel linkverdino "Conferma".

Una volta cancellata la pagina potremocreare la nostra nuova pagina. E'importante che la pagina si chiamiindex.html in quanto è il nome standarddella prima pagina di ogni sito.Per creare la nuova index, quindi,possiamo posizionarci nella casella difianco al tasto "crea" e riscrivere index.L'estensione .html viene aggiunta inautomatico ed è indicata nella tendina adestra.

Premendo quindi sul tasto "Crea File"verrà creato il nuovo file html e il sito ciporterà alla pagina di editing cherisulterà come la seguente.

In questa pagina è possibile modificare ilcontenuto del file, ma per il momentolimitiamoci a premere il tasto Salva, inmodo da salvare la pagina.Una volta salvata la pagina Altervista ciriporterà alla schermata con l'elenco deifile e confermerà la creazione dellapagina.

Premendo questa volta nell'elenco deifile sopra il nome del file index.html siaprirà un'altra pagina del browser con ilcontenuto della nostra pagina. Per orasarà ovviamente vuoto.

Nella prossima pagina vedremo come

modificare la pagina.

Modifica dellaprima paginaHTML

LoginCome nel precedente caso prima dipotere modificare una pagina ènecessario effettuare l'accesso al sistema,inserendo login e password nel pannelloraggiungibile cliccando sul tasto"pannello" in alto a destra nella paginaall'indirizzo www.altervista.org.

Capiamo il contenutodella prima pagina

Una volta effettuato il login ci troveremodi fronte come le altre volte l'elenco deifile presenti e passando il mouse sopra alnome del file index.html

compariranno altre voci come era giàsuccesso nel caso dell'eliminazione delfile. In questo caso ci interesseràutilizzare la seconda funzionalità, quelladi "Modifica".

Il file index.html aperto in modifica saràmostrato come nella figura seguente.

Ogni file html è strutturato con dei tagche racchiudono delle informazioni. Adesempio sopra possiamo identificare iltag <html> che si apre con <html>all'inizio del file e si chiude con </html>alla fine del file. Tutto ciò che ècompreso tra l'apertura e la chiusura diun tag si dice che è incluso o compresonel tag.

Di alcuni tag possiamo riconoscere gliattributi. Ad esempio nel tag meta èpresente l'attributo name con il valore"generator". Tutti gli attributi sonoracchiusi tra virgolette.

Vediamo ora nel dettaglio come èstrutturato il file html generato in

automatico.

La prima riga <!doctype html>indica che si tratta di un file htmlIl tag <html> apre e chiude tutto ildocumentoSubito dopo <html> troviamo il tag<head> che viene utilizzato perracchiudere tutte le informazioni chenon devono essere visualizzate mache possono dare delle informazionicome itl titolo della paginaIl tag <title> consente di dare untitolo alla paginail tag <meta> consente di assegnaredelle informazioni supplementarialla paginail tag <body> racchiude tutto ilcontenuto che deve esserevisualizzato nella paginaIl tag <p> serve per suddividere iltesto in paragrafi e tutto il testocontenuto in un <p> appartiene adun singolo paragrafo.

Modifichiamo la primapaginaRiprendiamo per comodità il contenutodella pagina iniziale

e proviamo a modificarla in modo daaggiungere il titolo, del testo dentro ilparagrafo e una intestazione della pagina.Arriveremo così al seguente risultato

Abbiamo qui modificato:

Aggiunto Il titolo della pagina "Ilprovolone" compreso nel tag<head> dentro il tag titoloAggiunto un tag <h1> che vieneutilizzato per scrivere del testo sottoforma di titoloModificato il contenuto del tag <p>.

Una trascritte tutte le modifiche, sipossono salvare premendo il tasto salva

e il sistema tornerà immediatamente allalista del file.

Visualizzazione dellapaginaUna volta tornati nella lista dei file

premete sul file nome del file modificatoindex.html

e si aprirà una nuova finestra del vostrobrowser in cui potrete vedere il risultatodel vostro lavoro.

Ora provate a modificare a piacere ilcodice html dela pagina e lasciatevitrasportare dalla vostra fantasia perscrivere il testo che più vi ispira.

Nella prossima pagina con i riferimentipotrete trovare l'indirizzo di un sito checomprende una guida HTML perimparare ad aggiungere immagini e

quant'altro alla pagina indexl.html.

RiferimentiIl sito di Altervista (www.altervista.org)Il sito di w3schools contiene moltissimiesempi da provare in html(www.w3schools.com)