Guida html facile! In.PDF

Transcript

1 Guida html facile! In.PDF Tratta dal sito internet ilmioprimosito.net 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 un altra pagina. I link vengono anche chiamati collegamenti ipertestuali.

2 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! Con cosa si naviga su internet? Quando entri su internet lo fai cliccando su un icona, 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 l uno dall altro ma svolgono tutti la stessa funzione: visualizzare le pagine web.

3 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 ).

4 L estensione 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.

5 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 Come si fa a scrivere con l'html? L html 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

6 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 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!

7 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 l esempio 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 d approfondimento: 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.

8 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 quest altra parola deve apparire in blu?. Imparare in modo perfetto l html può essere impegnativo, ma l impegno 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 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 all interno 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

9 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>

10 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 l altro (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>

11 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.

12 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> D ora 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:

13 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <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 all interno dei tag <body> viene visualizzato nell area bianca del browser. Allora a cosa servono le altre informazioni come Title (Titolo) description (Descrizione) e keywords (Parole chiave)? Servono per dareinformazioni sulla pagina, per i visitatori ma soprattutto per i motori di ricerca (come ad esempio google).

14 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>

15 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! 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>

16 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 (nell esempio l estensione 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 I percorsi relativi e assoluti Ora che sai come si inserisce un immagine, 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 l attributo src dell immagine dovrà essere immagini/gatto.jpg. Con questo metodo puoi indicare la posizione di immagini che si trovano all interno di molte sottocartelle, ad esempio: immagini/immaginidivertenti/gatti/gatto.jpg. L importante è 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: Questo è un percorso che si riferisce ad un immagine che è già all interno del web, ovvero non si trova sul tuo computer ma puoi vederla perché è ospitata all interno di un server. Usa questo tipo di percorso per riferirti a file che sono al di fuori del tuo computer.

17 2.9 - I link: il tag <a> Dopo una cosi ampia rottura di coglioni sull argomento 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= 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.

18 Nota: nell esempio 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= > <img src= gatto.jpg ></a> </body> 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.

19 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 I CSS ovvero i fogli di stile a cascata Dall introduzione 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 all interno 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:

20 Si sceglie il tag html da modificare (nell esempio 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 l attributo di quel tag che si vuole modificare seguito dal simbolo :, il valore che gli vogliamo dare e il simolo ; 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" " <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.

21 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!

22 Per completare l argomento eccoti una immagine con tutte le parole che esprimono un valore di colore: 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:

23 <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>

24 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! 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 l intensità 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 l occhio 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 Ovvero minima luminosità 1 = 2 2 = 3 3 = 4

25 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)

26 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

27 # #abcdef #ababab #0f0f0f 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"" <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>

28 <h2>questo testo apparirà in carattere impact </h2> </body> </html> Il risultato è questo: Modificare l'allineamento dei testi Con text-align è possibile modificare l allineamento 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"" <html>

29 <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:

30 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!

31 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 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"" <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>

32 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>

33 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>

34 - 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= barzellette 1<a> <br> <a href= barzellette 2<a> </p> <hr> <p> Per concludere, ecco una immagine:<br> <img src= gatto.jpg > </p> </body> </html> Questo è il risultato:

35 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 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.

36 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"" <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>

37 <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"" <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>

38 </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"" <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>

39 <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= <a href= <a href= </ 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).

40 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?

41 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 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 bisogna per forza spendere un po di soldi, in genere un dominio associato ad un servizio di hosting di qualità parte come mino da euro all anno. Uno dei servizi di web hosting più famosi in Italia è Aruba. 4.4 Altre informazioni Per articoli e lezioni più avanzate visita: Francesco Cortesi