Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
PDF
Tratta dal sito internet ilMioPrimoSito.net
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!
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.
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.
Esistono varie versioni standard del linguaggio HTML, la versione utilizzata per questa guida l'HTML 4.01 Transitional
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>
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.
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>
<! 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).
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!
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.
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.
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:
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.
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 ;.
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:
<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!
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)
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
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>
<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:
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.
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.
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).
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.
Francesco Cortesi