Guida html facile! In .

PDF
Tratta dal sito internet ilMioPrimoSito.net

1.1 - Cosa un sito internet?

Un sito internet un insieme di file che tutte le persone connesse a internet possono vedere. Questi documenti che contengono testi, immagini, filmati e suoni, possono essere visitati da tutti perch sono ospitati dentro dei computer speciali chiamati server.

Un sito pu essere formato da tante pagine collegate tra loro tramite i link . I link sono quelle scritte o quelle immagine su cui si pu fare click per visitare unaltra pagina. I link vengono anche chiamati collegamenti ipertestuali.

Le pagine internet o pagine web sono documenti scritti in codice html (HyperText Markup Language). Non spaventarti di fronte a questa sigla: Il linguaggio html non nulla di incomprensibile, anzi, molto semplice da capire e da imparare!

1.2 - Con cosa si naviga su internet?

Quando entri su internet lo fai cliccando su unicona, giusto? Questa icona pu chiamarsi Internet Explorer oppure Firefox , Safari, Chrome, Opera, oppure in altri modi. Quando clicchi questa icona non apri internet: internet non un programma. Quando clicchi su questa icona apri un tipo di programma installato sul tuo computer che si chiama Browser, che un programma creato per navigare su internet. Il browser quindi il programma che serve per visualizzare le pagine web.

Perch il browser si pu chiamare in tanti modi diversi? Semplicemente perch sono programmi diversi! Se hai un computer Windows probabilmente utilizzi Internet Explorer per navigare e se hai un computer Mac probabilmente usi Safari, perch sono i programmi predefiniti gi installati nel computer quando lo compri. Pu darsi invece che un tuo genitore o un tuo famigliare pi grande si intenda di informatica e che abbia installato dei Browser pi efficienti sul tuo computer come Firefox, Chrome o Opera. Tutti questi programmi hanno un aspetto leggermente diverso luno dallaltro ma svolgono tutti la stessa funzione: visualizzare le pagine web.

2.1 - Creazione del documento

La teoria a volte veramente noiosa: quindi passiamo subito alla pratica.Crea un nuovo documento di testo, uno di quei file che si apre con il blocco note (per intenderci un documento con estensione .txt, ad esempio Nuovo documento di testo.txt ) e rinominalo con una estensione .html (ad esempio documento.html).

Lestensione di un file la sigla di tre o quattro lettere dopo il nome del file e il punto. Se non riesci a vedere le estensioni dei file vuol dire che il tuo computer le nasconde e quindi devi togliere questa opzione dalle preferenze di sistema; in questo caso se non riesci a risolvere da solo il problema ti consiglio di farti aiutare da un genitore o da un adulto esperto. Una volta rinominato il file sar gi possibile aprirlo con un browser e ovviamente se il file vuoto verr mostrata una pagina completamente bianca.

Ora prova ad aprire il tuo file con estensione .html con il blocco note e scrivi qualcosa, per esempio: ciao, sono la tua prima pagina web!.

Salva le modifiche e riapri il file con il browser. Vedrai che la scritta apparir nera e in piccolo nella parte alta-sinistra della pagina.

Bene, hai creato il tuo primo documento .html con scritto una frase! Per un po limitata come cosa, vero? Ora che sai come si crea un documento web ora di imparare il linguaggio html per riuscire a fare cose pi elaborate.

2.2 - Come si fa a scrivere con l'html?

Lhtml non un linguaggio di programmazione, solo un linguaggio particolare che viene interpretato dal browser. La prima cosa da imparare sono i tag. I tag sono quelle parole o lettere racchiuse tra i simboli < > Ecco alcuni esempi di tag: <br> <hr> <p> </p> <img src= > <a href= > </a> Probabilmente ti sar gi capitato di vederli nei forum, nei blog o nei social network per inserire immagini, video o link. Ogni tag ha la sua funzione

specifica. Ne esistono tanti ma in questa guida descriver solo quelli pi essenziali.

Esistono varie versioni standard del linguaggio HTML, la versione utilizzata per questa guida l'HTML 4.01 Transitional

2.3 - I paragrafi: il tag <p>

Iniziamo con il pi usato in assoluto: il tag <p>. La lettera p vuol dire paragrafo, cio un pezzettino di testo. Quando si inserisce un testo tra il tag <p> ed il tag </p> si crea un paragrafo e questo pezzo di scritto viene separato da un po di spazio bianco dagli altri contenuti. Prova a scrivere, sempre con il blocco note, nel tuo documento .html questo pezzettino di testo: Ciao, sono il tuo secondo esperimento. Se scrivi dentro i tag p crei un paragrafo. Se invece scrivi fuori dai tag, il testo non viene separato. Ora salva e apri il documento con il browser: il testo non va a capo e non viene separato!

Prova invece a scrivere questo pezzo di codice: Ciao, sono il tuo secondo esperimento. <p> Se scrivi dentro i tag p crei un paragrafo.</p> Se invece scrivi fuori dai tag, il testo non viene separato. Ora salva e apri il documento con il browser: il testo stato impaginato in modo diverso!

Il modo corretto di scrivere un documento web quello di usare sempre i tag, quindi lesempio precedente per essere corretto dovrebbe diventare: <p>Ciao, sono il tuo terzo esperimento.</p> <p>se scrivi dentro i tag "p" crei un paragrafo </p> <p>Se invece scrivi fuori dai tag. il testo non viene impaginato </p>

Parentesi dapprofondimento: scrittura del codice vs software visuali

Utilizzare il codice html la maniera pi corretta di creare un sito internet ma anche la pi complicata. Esistono infatti molti software visuali gratuiti e a pagamento che permettono di creare siti internet come se fossero pagine di Microsoft Word, con pochi click e senza conoscere il codice html.

Allora perch imparare il codice html quando ci sono soluzioni pi facili? Spesso la strada pi veloce e pi facile quella sbagliata: questi software creano pagine .html in modo automatico e quindi creano in modo automatico anche il codice che le compongono; nel 99% dei casi questo codice creato automaticamente fa cagare: confuso, strutturato male e difficile da leggere, sia per gli umani sia per i motori di ricerca. Per creare un buon sito internet bisogna avere il pieno controllo del codice di cui fatto, bisogna sapere come strutturato e non si devono avere dubbi del tipo: dove sta scritto che questa parola deve apparire in rosso e questaltra parola deve apparire in blu?. Imparare in modo perfetto lhtml pu essere impegnativo, ma limpegno sar sicuramente compensato dai tuoi risultati, che saranno di alto livello! Non saranno minimamente paragonabili a quelle ciofeche create in cinque minuti con due click.

2.4 - Separare i paragrafi: i tag <br> e <hr>

Ora impariamo ad usare altri due tag semplici ma indispensabili per impaginare correttamente un testo: <br> e <hr>. <br> viene usato per andare a capo. Una cosa importante da sapere che anche se scrivendo allinterno di un paragrafo vai a capo, il browser non va a capo. Per capire fai una prova, scrivi: <p>Oggi non sono andato a scuola perch ho fatto finta di avere la febbre. Poi per mia mamma mi ha scoperto e mi ha messo

in castigo e adesso non posso usare l'Xbox. </p> Ora apri il file con il browser e vedrai che nonostante sei andato a capo dodici volte il testo sul browser non va a capo.

Come si risolve questo problema? Usando il tag <br>! Prova a riscrivere il testo in questo modo: <p>Oggi non sono <br> andato a scuola <br> perch ho fatto <br> finta di avere <br> la febbre. <br> Poi per <br> mia mamma <br> mi ha scoperto <br> e mi ha messo <br> in castigo <br> e adesso non posso <br> usare l'Xbox. </p>

Inserendo il tag <br> nei punti in cui vuoi andare a capo il testo andr a capo. Nota che puoi anche scrivere il testo senza andare a capo ma inserendo i tag <br> e il browser andr a capo lo stesso. Quindi puoi anche scrivere lo stesso testo in questo modo: <p>Oggi non sono <br> andato a scuola <br> perch ho fatto <br> finta di avere <br> la febbre. <br> Poi per <br> mia mamma <br> mi ha scoperto <br> e mi ha messo <br> in castigo <br> e adesso non posso <br> usare l'Xbox.</p> Il risultato sul browser non cambia. Il tag <br> pu anche essere usato per aumentare lo spazio bianco tra un paragrafo e laltro (anche se non un metodo molto corretto). Esempio: <p>Oggi non sono andato a scuola perch ho fatto finta di avere la febbre.<br> Poi per mia mamma mi ha scoperto e</p> <br> <br> <br> <br> <p>mi ha messo in castigo<br> e adesso non posso usare l'Xbox.<br></p>

Ora vediamo invece il tag <hr>. <hr> serve a dividere due paragrafi con una linea oltre che con un po di spazio bianco. Prova a scrivere: <p>Oggi dovevo andare dal dentista ma avevo troppa paura e alla fine non ci sono andato.</p> <hr> <p>Allora mia mamma mi ha di nuovo messo in castigo e adesso non posso usare nemmeno il computer!</p>

Vedrai che una linea separa i due paragrafi, nulla di pi semplice.

2.5 - La struttura di un documento web

Adesso che sai cosa sono i tag e conosci tre tag principali per sistemare un testo, arrivato il momento di vedere e capire come deve essere la struttura di una pagina. Eccola: <! DOCTYPE> <html> <head> </head> <body> </body> </html> Dora in poi tutte le pagine che creerai dovranno avere questa struttura principale. Ora Andiamo a vedere cosa significano questi tag.

<! DOCTYPE> il tag che specifica il tipo di documento, per ora non farci caso, un po complicato e lo te lo spiegher pi avanti. <html></html> il tag che contiene tutto il documento. <head></head> il tag in cui vanno inserite le informazioni e i dettagli riguardanti la pagina. <body></body> il tag in cui vanno inseriti i contenuti della pagina. In questa guida ci concentreremo pi che altro sui contenuti, cio in tutto ci che va inserito dentro il tag <body>. Quindi ora vediamo un esempio di pagina abbastanza completa e corretta ma sintetica e facile da capire:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Titolo della pagina </title> <meta name="description" content=" Qui viene descritto il contenuto della pagina "> <meta name="keywords" content="parole, chiave, pagina"> </head> <body> <p>Contenuto della pagina: pagina di esempio</p> </body> </html> Se provate a scrivere il codice precedente e visualizzarlo sul browser noterete che di tutte le cose scritte solo ci che c scritto allinterno dei tag <body> viene visualizzato nellarea bianca del browser.

Allora a cosa servono le altre informazioni comeTitle (Titolo) description (Descrizione) ekeywords (Parole chiave)? Servono per dareinformazioni sulla pagina, per i visitatori ma soprattutto per i motori di ricerca (come ad esempio google).

2.6 - L'ordine dei contenuti: <h1>, <h2>, <h3>.

Torniamo ora a parlare dei contenuti che vanno inseriti nei tag <body>; per ora hai imparato a gestire i paragrafi, ma ti sarai reso conto che organizzare il testo in quel modo non sufficiente per creare un documento decente! Solitamente ogni pagina e ogni paragrafo ha un proprio titolo o comunque un nome significativo che viene scritto in grande e in grassetto. Come si fa a inserire questi titoli nel testo? Con i tag <h1>, <h2>,<h3>! Questi tag funzionano come i tag <p> ma al posto di creare un testo piccolo creano un testo grande e in grassetto: un titolo. Ecco un esempio (nota la parte in grassetto): <body> <h1>Titolo principale della pagina</h1> <p>Primo paragrafo </p> <h2>Titolo secondo paragrafo</h2> <p>Secondo paragrafo</p> <h2>Titolo terzo paragrafo</h2> <p>Terzo paragrafo</p> <h3>Titolo miniparagrafo dentro il terzo paragrafo</h3> <p>Miniparagrafo dentro il terzo paragrafo</p> </body>

Noterai subito che il titolo scritto tra i tag <h1> il pi grande. Il secondo pi grande quello tra i tag <h2> e quello pi piccolo quello tra i tag <h3>. Questo perch i titoli hanno una gerarchia. I titoli <h1> sono pi importanti dei titoli <h2> che a loro volta sono pi importanti dei titoli <h3>. Curiosit: la gerarchia dei titoli non finisce con <h3>, in realt esistono anche i tag <h4>, <h5>, <h6> Ma il loro utilizzo sconsigliato, oltre che inutile nella maggior parte dei casi!

2.7 - Le immagini: il tag <img>

Ora impariamo ad inserire la cosa pi divertente: le immagini! Per inserire le immagini bisogna usare il tag <img src= >. Ecco un esempio facile: <body> <p>Questo gatto temerario o idiota?</p> <img src=gatto.jpg> </body>

Img vuol dire image (immagine) e src vuol diresource (risorsa). Tra le virgolette dopo src= va inserito il nome del file, scrivendo anche la sua estensione (nellesempio lestensione del file gatto .jpg che un formato molto comune per le fotografie). N.B. non usare mai gli spazi nei nomi dei file ma usa i trattini. Ad esempio, se una immagine si chiama immagine idiota.jpg, rinominala immagine-idiota.jpg.

2.8 - I percorsi relativi e assoluti

Ora che sai come si inserisce unimmagine, purtroppo devo per forza spiegarti un concetto un po noioso: i percorsi relativi e i percorsi assoluti.

gatto.jpg un percorso relativo perch si riferisce ad un file che si trova nella stessa cartella in cui si trova il documento .html su cui stai lavorando. Potrebbe anche essere che quella immagine si trovi in una cartella che si chiama immagini che a sua volta si trova nella cartella principale in cui stai lavorando: in quel caso lattributo src dellimmagine dovr essere immagini/gatto.jpg. Con questo metodo puoi indicare la posizione di immagini che si trovano allinterno di molte sottocartelle, ad esempio: immagini/immaginidivertenti/gatti/gatto.jpg. Limportante di non utilizzare mai i percorsi relativi per indicare dei file che si trovano fuori dalla cartella principale in cui stai lavorando!

Ora ti faccio un esempio di percorso assoluto: http://www.html.it/common/img/html-logo.png Questo un percorso che si riferisce ad unimmagine che gi allinterno del web, ovvero non si trova sul tuo computer ma puoi vederla perch ospitata allinterno di un server. Usa questo tipo di percorso per riferirti a file che sono al di fuori del tuo computer.

2.9 - I link: il tag <a>

Dopo una cosi ampia rottura di coglioni sullargomento dei percorsi ora di vedere e capire come si utilizzano ilink o collegamenti ipertestuali. I collegamenti ipertestuali sono quelle parole o immagini su cui puoi fare click per visitare altre pagine web o scaricare qualcosa. Per creare un link bisogna usare i tag: <a href= > </a >. Ecco un esempio: <body> <a href=http://www.youtube.com> Se clicchi qui vai a finire sul sito YouTube. </a> </body>

Aprendo il documento con il browser vedrai che il testo diventato blu e sottolineato; inoltre se ti avvicini con la freccia del mouse il puntatore diventa una manina: il testo diventato un link! Se lo cliccherai andrai a finire sulla homepage di YouTube.

Nota: nellesempio ho usato un percorso assoluto, perch ho linkato un sito (YouTube) che ovviamente non si trova sul mio computer! Ricordati per che puoi usare anche i percorsi relativi (approfondirai questa cosa nel capitolo 4). Ora che abbiamo applicato un link a un pezzettino di testo proviamo ad applicarlo ad una immagine. Niente di pi semplice, ecco un esempio:

<body> <a href=http://www.youtube.com> <img src=gatto.jpg></a> </body>

3.1 - introduzione alla modifica della grafica

Per ora hai creato dei documenti web con una grafica che si pu definire standard: testo nero, sfondo bianco e un carattere del testo usuale. Navigando sul web ti sarai sicuramente reso conto che, ormai, pochissime pagine sono cosi spoglie, la maggior parte delle pagine ha una grafica accattivante e strafiga, anche se a volte qualcuno esagera con la creativit e crea delle vere e proprie cacofonie di immagini, animazioni e colori: alcune pagine pubblicate sul web sono talmente brutte e inutilizzabili che quando per disgrazia le si visita, difficile non rigurgitare il pranzo sulla tastiera.

In ogni caso: come si fa a personalizzare le proprie pagine web? Principalmente ci sono due modi: 1 - intervenendo sui tag html delle pagine 2 - utilizzando i css Il primo metodo stato il pi usato fino a qualche anno fa, ora diventato un metodo sorpassato poich si ritenuto che i contenuti reali del sito vadano separati dalla loro presentazione grafica.

3.2 - I CSS ovvero i fogli di stile a cascata

Dallintroduzione avrete capito che non parler dei vecchi attributi html per modificare la grafica ma parler solamente dei pi essenziali codici css. Ecco un esempio di codice css: body { margin: 0px; padding: 0px; border: 0px; text-align: center; font-family: verdana, sans-serif; font-size: 12px; color: #000000; background-color: #ffffff; background-image: url("images/bck.gif"); } La sigla css significa fogli di stile a cascata (cascading style sheet). Questi possono essere dei file esterni, dei pezzi di codice allinterno tra i tag <head> o addirittura in linea col testo. Per ora, per praticit, vi descriver solo il secondo metodo, ovvero: pezzi di codice tra i tag <head>. La struttura di un pezzo di codice css abbastanza semplice:

Si sceglie il tag html da modificare (nellesempio il tag <body>) e lo si trascrive senza i simoli < > dopodich si apre la parentesi graffa (premi contemporaneamente i tasti ctrl+maiusc+alt+) e si scrive lattributo di quel tag che si vuole modificare seguito dal simbolo :, il valore che gli vogliamo dare e il simolo ;.

3.3 - Cambiare i colori del testo e dello sfondo

Facciamo subito un esempio pratico, facciamo diventare il testo rosso in una pagina completa: (Nota la parte in grassetto) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Primo esempio utilizzo css</title> <meta name="description" content="Primo esempio di utilizzo dei css"> <meta name="keywords" content="primo, css, esempio"> <style type: text/css> body {color: red;} </style> </head> <body> <p>Questo testo apparir in rosso</p> </body> </html> In questo modo tutto il testo contenuto nel tag <body> diventer rosso.

Proviamo ora a fare qualcosa di pi complesso sempre modificando i colori: <!DOCTYPE ...> <html> <head> ... <style type: text/css> body {color: red; background-color: lime;} h1 {color: blue;} h2 {color: white; background-color: black;} </style> </head> <body> <h1>Questo testo apparir in blu</h1> <p>Questo testo apparir in rosso</p> <h2>Questo testo apparir in bianco su sfondo nero</h2> </body> </html>

Ora lo sfondo verde limone, il testo normale apparir in rosso, il titolo <h1> in blu e il titolo <h2> in bianco su sfondo nero: una grossa personalizzazione!

Per completare largomento eccoti una immagine con tutte le parole che esprimono un valore di colore:

3.4 - Grandezza, peso e stile del testo

Per cambiare lo stile del testo ci sono tante propriet. Ve ne descriver tre delle pi importanti: font-size, per modificare la dimensione del testo. Come unit di misura puoi usare i punti tipografici (pt) o i pixel (px). Esempio:

<style type: text/css> body {font-size: 12px;} h1 {font-size: 32pt;} </style> font-style, per modificare lo stile del testo. Esempio: <style type: text/css> body {font-style: italic;} </style> Puoi usare i valori normal e italic. Italic fa diventare il testo in corsivo. font-weight, per modificare il peso del testo. Esempio: <style type: text/css> body {font-weight: bold;} </style> Puoi usare i valori normal e bold. Bold si fa diventare il testo in grassetto.

Un altro metodo valido e corretto per ottenere il grassetto quello di utilizzare i tag <strong> </strong> direttamente nel codice html. Esempio: <body> <p> La parola <strong>casa</strong> apparir in grassetto</p> </body>

Questo metodo a volte pi pratico e veloce. Inoltre evidenziare una o pi parole utilizzando il tag <strong> migliora la loro importanza agli occhi dei motori di ricerca: quindi ricordati di evidenziare col grassetto solo le cose importanti!

3.5 - Altri colori: RGB e codice esadecimale!

Per ora per cambiare colore al testo hai usato come valori delle parole in inglese come red, black, white, green ecc ma come si fa ad usare dei colori particolari come per esempio un verde acqua scuro o un lilla chiaro? Partiamo dalle basi: i colori per essere visualizzati sullo schermo del computer (ma anche su quello di un televisore o di un cellulare) utilizzano un sistema di colore che si chiama RGB che significa Red, Green,Blue. Mischiando sul monitor questi tre colori e modificando la loro lintensit si pu ottenere praticamente qualsiasi colore. Specifico che ci vero solo nella pratica perch in teoria le sfumature di colori presenti in natura sono infinitamente di pi anche se locchio umano non sempre riesce a coglierne le differenze. Ma come funziona questo sistema RGB applicato ai siti internet? Si utilizza il codice esadecimale! Ad esempio: <style type: text/css> body {font-color: #003344;} </style> Cosa vuol dire il valore #003344? Ogni due cifre si riferiscono a un colore base: 00 si riferisce al Red, 33 si riferisce al Green e 44 si riferisce al Blue. (#003344) Inoltre la scala dei valori non si limita da 0 a 9 ma continua con le lettere da a a f per indicare i valori da 11 a 16, da qui il nome esadecimale (esadeca=16): 0 1 2 3 = = = = 1 Ovvero minima luminosit 2 3 4

4=5 5=6 6=7 7=8 8=9 9 = 10 a = 11 b = 12 c = 13 d = 14 e = 15 f = 16 Ovvero massima luminosit Il rosso diventa quindi #ff0000 (massima luminosit su R e minima luminosit su G e B) il verde #00ff00 (massima luminosit su G e minima luminosit su R e B) il blu #0000ff (massima luminosit su B e minima luminosit su R e G)

Ecco una tabella con i 216 colori base:

Per prendere confidenza con il codice esadecimale prova a giocare un po con i colori; prova ad esempio combinazioni bizzarre come queste e divertiti a vedere i risultati: #bf3347 #acfd24 #0bb0fa

#123456 #abcdef #ababab #0f0f0f

3.6 - Cambiare carattere ai testi

Per cambiare carattere al testo devi usare font-family. Per esempio, per fare diventare il testo in

questo modo:

<style type: text/css> body {font-family: chiller;} </style> Ecco una dimostrazione pratica in una pagina completa: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Esempio utilizzo css</title> <meta name="description" content=esempio di utilizzo dei css"> <meta name="keywords" content="css, esempio"> <style type: text/css> h1 {font-family: chiller} h2 {font-family: impact} </style> </head> <body> <h1>Questo testo sar scritto col carattere chiller</h1>

<h2>Questo testo apparir in carattere impact</h2> </body> </html> Il risultato questo:

3.7 - Modificare l'allineamento dei testi

Con text-align possibile modificare lallineamento di paragrafi, titoli e immagini. Come valori puoi usare "center", "left" e "right". Esempio pratico in una pagina completa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html>

<head> <title>Secondo esempio utilizzo css</title> <meta name="description" content="Secondo esempio di utilizzo dei css"> <meta name="keywords" content="primo, css, esempio"> <style type: text/css> h1 {text-align:center;} h2 {text-align:left;} p {text-align:right;} </style> </head> <body> <h1>Questo testo sar allineato al centro</h1> <h2>Questo testo sar allineato a sinistra</h2> <p>Questo testo sar allineato a destra</p> </body> </html>

Questo il risultato:

3.8 - Ultime considerazioni sulla grafica

Se stai creando un tuo sito personale hai tutto il diritto di personalizzarlo come meglio credi ma tieni comunque conto di alcune regole essenziali: Contrasto: fai sempre in modo che il testo risalti facilmente, non usare per esempio scritte gialle su sfondo bianco o testo nero su sfondo grigio scuro! Dimensioni: va bene dare le giuste dimensioni ai titoli ma non esagerare con la grandezza del testo nei paragrafi, tantomeno non farlo diventare troppo piccolo: le giuste dimensioni per il font dei paragrafi sono di 10-12pt. Carattere: anche se sono meno fighi, utilizza caratteri normali: sans-serif che si leggano bene, come Arial o Verdana. Ed evita caratteri fantasia come Algerian, Castellar, Papyrus, Chiller al massimo usa questi caratteri solo per brevi titoli. Per concludere: ricorda che un sito internet pu avere una grafica incredibile ed essere il pi figo del mondo, ma se non comodo da leggere e da navigarenessuno lo visiter una seconda volta!

Se invece non stai creando un tuo sito personale, quando lo abbellisci fatti sempre questa domanda: chi che legger questo sito? o meglio : a chi destinato questo sito? E destinato ad altri giovani? Se si, allora puoi sbizzarrirti con la grafica e il colore, perch alla maggior parte dei ragazzi e alla totalit dei bambini piacciono le cose originali e colorate. E destinato agli adulti? Se si, allora cerca di mantenere una grafica sobria, perch alla maggior parte degli adulti piacciono le cose semplici, pulite e ordinate.

3.9 - Cosa sono in grado di fare ora?

In questo capitolo abbiamo visto un bel po di argomenti su come si struttura una pagina web e su come personalizzarla. Ora proviamo a mettere insieme tutte le nozioni acquisite creando una bella pagina di esempio: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ecco cosa sono in grado di fare </title> <meta name="description" content="esempio completo html e css"> <meta name="keywords" content="esempio, completo, html, css"> <style type: text/css>

body { font-family: verdana; font-size: 10pt; background-color: #000000; } h1 { text-align:center; font-family: chiller; color: #ffffff; font-size: 60pt; } h2 {text-align: right; color: #ff0000; font-size: 20pt; } p {text-align: right; color: #cccccc;} strong {color: #ffffff;} </style> </head> <body> <h1>Ecco cosa sono in grado di fare!</h1> <h2>Qui sotto una breve dimostrazione</h2> <p>Questo un testo riempitivo:<br> Ora di cena a tavola: mamma, pap, tre figli e la nonna che sferruzza sulla poltrona.<br>

Uno dei bambini a un certo punto chiede:<br> - Mamma, come sono nato io? <br> La mamma un po' imbarazzata, improvvisa:<br> - Sai, un giorno arrivata una bella e grande aquila e ha appoggiato un fagottino sulla finestra, ed eri tu!<br> La nonna continua a sferruzzare e alza un sopracciglio.<br> Allora il secondo bambino, incuriosito chiede: <br> - E io, come sono nato? <br> La mamma prosegue con lo stesso tema: <br> - Tu invece sei stato portato da un grande condor! <br> La nonna continua sempre a sferruzzare e alza l'altro sopracciglio. <br> Il terzo bambino ovviamente vuole sapere anche lui com' nato. E la mamma:<br> - Un giorno arrivata una bellissima cicogna e ti ha depositato sul davanzale della finestra! <br> La nonna smette di sferruzzare e bisbiglia sottovoce:<br> - Mi pareva infatti che fossero tre uccelli diversi! </p> <hr> <p>Una figlia rientra a casa e chiede al pap: - Pap, che cos' un microscopio? <br> E il pap gli risponde:<br> - E' uno strumento che serve a ingrandire gli oggetti. E lei:<br>

- Ah, ora capisco perch Giovanni mi dice sempre che ho una mano microscopica!<br> <p> <p>Ecco dei link verso altri siti di barzellette:<br> <a href=http://barzellette.dada.net>Sito barzellette 1<a> <br> <a href=http://www.barzellette.net/>Sito barzellette 2<a> </p> <hr> <p> Per concludere, ecco una immagine:<br> <img src=gatto.jpg> </p> </body> </html>

Questo il risultato:

Ti consiglio di lavorare per un po' su questo esempio: personalizzalo pi volte fino ad ottenere un risultato che ti piace. In questo modo prenderai familiarit con i tag e i css che hai imparato fino ad ora.

4.1 - Come si fa a fare un sito con tante pagine?

Un sito internet di solito fatto da tante pagine collegate tra loro ma come si fa a sviluppare un sito su pi pagine? E pi facile di quello che sembra, basta creare delle pagine simili tra loro come struttura e collegarle tra di loro con dei link relativi. Facciamo subito un esempio: creiamo, dentro la nostra cartella degli esperimenti, tre documenti .html che chiameremo index.html, chisono.html e links.html.

Ricordati sempre, quando dai un nome alle pagine, di separare le parole con un trattino -. Ora modifichiamo la pagina index.html che sar la nostra home page (dai sempre questo nome alla home page!): DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Il mio sito internet</title> <meta name="description" content="esempio sito con pi pagine"> <meta name="keywords" content="esempio, sito, pi, pagine"> <style type="text/css"> body{text-align: center; font-size: 30px;} </style> </head>

<body> <h1>IL MIO SITO INTERNET</h1> <p><a href=index.html>Home page</a> | <a href=chi-sono.html>Chi sono</a> | <a href=links.html>Links</a></p> <p>Benvenuto nella homepage del mio sito internet!</p> </body> </html> Copia e incolla il codice della home page e inseriscilo nelle altre due pagine, dopodich modifica il paragrafo dopo i link. Ad esempio nella pagina chi-sono.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Il mio sito internet</title> <meta name="description" content="esempio sito con pi pagine"> <meta name="keywords" content="esempio, sito, pi, pagine"> <style type="text/css"> body{text-align: center; font-size: 30px;} </style>

</head> <body> <h1>IL MIO SITO INTERNET</h1> <p><a href=index.html>Home page</a> | <a href=chi-sono.html>Chi sono</a> | <a href=links.html>Links</a></p> <p>Ciao, sono Francesco Cortesi, ho 19 anni e vivo vicino a Bergamo.</p> </body> </html> Invece nella pagina links.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Il mio sito internet</title> <meta name="description" content="esempio sito con pi pagine"> <meta name="keywords" content="esempio, sito, pi, pagine"> <style type="text/css"> body{text-align: center; font-size: 30px;} </style> </head>

<body> <h1>IL MIO SITO INTERNET</h1> <p><a href=index.html>Home page</a> | <a href=chi-sono.html>Chi sono</a> | <a href=links.html>Links</a></p> <p>Ecco alcuni dei miei siti preferiti: <a href=www.youtube.com>YouTube</a><br> <a href=www.gioco.it>Gioco.it</a><br> <a href=www.altervista.org>Altervista</a> </ p> </body> </html>

Ecco quindi che le pagine possono essere visitate partendo dalla home page (ma anche da una qualsiasi delle tre, dato che tutte contengono gli stessi link).

4.3 - Come si fa a mettere un sito su internet?

Per ora hai sviluppato i tuoi esperimenti sul tuo computer, ma come si fa a mettere questi file su internet in modo che tutti possano vederli?

Bisogna caricare questi file su un server. Puoi farlo in modo gratuito su dei siti come Altervista o Netsons, che con una semplice registrazione ti da un piccolo spazio web e un dominio del tipo www.miosito.altervista.org. Una volta creato il tuo account puoi inserire facilmente i tuoi file su internet tramite un semplice pannello (Ma puoi anche trasferire i file tramite programmi come FileZilla che utilizzano il protocollo FTP). Per avere invece un dominio del tipo www.miosito.it bisogna per forza spendere un po di soldi, in genere un dominio associato ad un servizio di hosting di qualit parte come mino da 20-30 euro allanno. Uno dei servizi di web hosting pi famosi in Italia Aruba.

4.4 Altre informazioni

Per articoli e lezioni pi avanzate visita: http://www.ilmioprimosito.net/impara-cose-un-po'-pi%C3%B9-difficili.html

Francesco Cortesi