Lezione 1: Cominciamo In questa prima lezione faremo una breve presentazione degli strumenti necessari per fare un sito web. Di cosa hai bisogno? Molto probabilmente hai già tutto quello che ti serve. Hai un ”browser”. Un browser è un programma che ti permette di navigare e aprire i siti web. In questo momento stai guardando questa pagina sul tuo browser. Il browser che usi è importante. Il più comune è Microsoft Internet Explorer, ma ce ne sono anche altri, come Opera e Mozilla Firefox. Si possono usare tutti. Forse hai sentito parlare, o hai usato, programmi come Microsoft FrontPage, Macromedia Dreamweaver o Microsoft Word. Questi programmi possono - o affermano di poterlo fare - creare siti web per te. Dimentica tutti questi programmi per ora! Non ti aiutano affatto se vuoi imparare a scrivere il codice del tuo sito web. Al contrario hai bisogno di un semplice editor di testo. Se stai usando Windows puoi utilizzare Notepad, che normalmente si trova nel menu avvio sotto Programmi in Accessori: Se non stai usano Windows puoi usare un editor di testo simile, come per esempio Pico (Linux) o TextEdit (Mac). Notepad è un editor di testo di base ottimo per scrivere il codice in quanto non interferisce con quello che stai digitando, lasciandoti il completo controllo. Il problema con molti programmi che affermano di poter creare un sito web per te è proprio quello di avere molte funzioni standard da dover selezionare. Lo svantaggio è che qualsiasi cosa deve adattarsi perfettamente a queste funzioni standard. Questo significa che questo tipo di programmi spesso non possono creare un sito web esattamente come lo vorresti tu. O - ed è ancora
Transcript
Lezione 1: Cominciamo In questa prima lezione faremo una breve presentazione degli strumenti necessari per fareun sito web.
Di cosa hai bisogno?Molto probabilmente hai già tutto quello che ti serve.
Hai un ”browser”. Un browser è un programma che ti permette di navigare e aprire i sitiweb. In questo momento stai guardando questa pagina sul tuo browser.
Il browser che usi è importante. Il più comune è Microsoft Internet Explorer, ma ce ne sonoanche altri, come Opera e Mozilla Firefox. Si possono usare tutti.
Forse hai sentito parlare, o hai usato, programmi come Microsoft FrontPage, MacromediaDreamweaver o Microsoft Word. Questi programmi possono - o affermano di poterlo fare -creare siti web per te. Dimentica tutti questi programmi per ora! Non ti aiutano affatto sevuoi imparare a scrivere il codice del tuo sito web.
Al contrario hai bisogno di un semplice editor di testo. Se stai usando Windows puoiutilizzare Notepad, che normalmente si trova nel menu avvio sotto Programmi inAccessori:
Se non stai usano Windows puoi usare un editor di testo simile, come per esempio Pico(Linux) o TextEdit (Mac).
Notepad è un editor di testo di base ottimo per scrivere il codice in quanto non interferiscecon quello che stai digitando, lasciandoti il completo controllo. Il problema con moltiprogrammi che affermano di poter creare un sito web per te è proprio quello di avere moltefunzioni standard da dover selezionare. Lo svantaggio è che qualsiasi cosa deve adattarsiperfettamente a queste funzioni standard. Questo significa che questo tipo di programmispesso non possono creare un sito web esattamente come lo vorresti tu. O - ed è ancora
più seccante - questi programmi apportano dei cambiamenti al tuo codice. Con Notepad ocon editor di testo semplici, devi solo ringraziare te stesso per i tuoi successi e per i tuoierrori.
Un browser e Notepad (o editor di testo semplici simili) sono tutto quello di cui hai bisognoper andare avanti con questo tutoriale fare il tuo sito web.
Devo avere una connessione?Non hai bisogno di avere una connessione ad Internet - nè mentre leggi questo tutorial, nèmentre stai facendo il tuo sito web.
Se vuoi evitare di essere collegato mentre leggi questo tutorial, puoi stamparlo osemplicemente sconnetterti da Internet mentre leggi sullo schermo. Puoi fare il sito websul disco fisso del tuo computer e pubblicarlo su Internet una volta finito.
E dopo ?Vai alla prossima lezione e leggi qualcosa sull'HTML prima di iniziare la parte divertentenella Lezione 3.
Lezione 2: Cosa è l'HTML?In questa lezione ti verrà fatta una breve presentazione del tuo nuovo amico, l'HTML.
Cosa è l'HTML?L'HTML è la "lingua madre" del tuo browser.
Riassumendo una lunga storia, l'HTML fu inventato nel 1990 da uno scienziato chiamatoTim Berners-Lee. Lo scopo finale era quello di semplificare l'accesso alle pubblicazioiscientifiche tra scienziati di diverse università. Il progetto riscosse un successo molto piùgrande di quanto avesse mai immaginato lo stesso Tim Berners-Lee. Con l'invenzionedell'HTML si stese il fondamento per il web come lo conosciamo noi oggi.
L'HTML è un linguaggio che permette di presentare le informazioni su Internet (peresempio le ricerche scientifiche). Quello che vedi quando visualizzi una pagina su Internetè l'interpretazione che fa il tuo browser del codice HTML. Per vedere il codice HTML diuna pagina su Internet è sufficiente fare click su "Visualizza" nel menu del tuo browser escegliere "Sorgente".
Per un occhio inesperto il codice HTML appare complicato, ma questo tutorial ti aiuterà acomprenderne il senso.
Per cosa posso usare l'HTML?Se vuoi fare dei siti web non puoi prescindere dall'HTML. Anche quando usi unprogramma per creare i siti web, come Dreamweaver, la conoscenza di base dell'HTMLpuòsemplificare molto la tua vita e migliorare il tuo sito. La buona notizia è che l'HTML èfacile da imparare e da usare. In sole due lezioni da questo punto, avrai imparato comefare il tuo primo sito web.
L'HTML viene usato per fare i siti web. Più semplice di così!
Va bene, ma cosa significa H-T-M-L?HTML è l'abbreviazione di "HyperText Mark-up Language" - ed in questo momento tipotrebbe essere più che sufficiente. In ogni caso, tuttavia, nell'interesse di un migliorordine, te lo spieghiamo più dettagliatamente.
• Hyper è l'opposto di lineare. Tempi addietro - quando il topo era qualcosa a cui ilgatto dava la caccia - i programmi per computer giravano linearmente: quando ilprogramma aveva eseguito un'azione passava alla linea successiva, quindi allalinea successiva e così di seguito. Ma l'HTML è diverso - tu puoi andare in qualsiasiposto in qualsiasi momento. Per esempio, non è necessario visitare MSN.comprima di visitare HTML.net.
• Text è auto-esplicativo. • Mark-up è quello che fai con il testo. Tu marchi il testo così come fai con un
programma di editing quando usi le intestazioni, i punti elenco, il grassetto per iltesto, e così via.
• Language è quello che è l'HTML, che utilizza molte parole inglesi.
In questo tutorial imparerai quello che si chiama XHTML (Extensible HyperText Mark-upLanguage) che in poche parole è un modo di scrivere l'HTML nuovo e meglio e strutturato.
Ora che sai cosa vuole dire HTML (e XHTML) iniziamo a vedere quello di cui cioccuperemo: fare siti web.
Lezione 3: Elementi e tagAdesso sei pronto per imparare la sostanza dell'HTML: gli elementi.
Gli elementi forniscono la struttura di un documento HTML e dicono come il browser dovràvisualizzare il tuo sito web. In generale gli elementi sono formati da un tag iniziale, delcontenuto e un tag finale.
"Tag"?Tag sono le etichette che si usano per marcare l'inizio e la fine di un elemento.
Tutti i tag hanno lo stesso formato: iniziano con il segno minore di "<" e terminano con ilsegno maggiore di ">".
In generale ci sono due tipi di tag - i tag di apertura: e i tag di chiusura: . L'unica differenzatra un tag di apertura e uno di chiusura è la barra "/". Tu etichetti il contenuto inserendolotra un tag di apertura e un tag di chiusura.
L'HTML è tutto fatto di elementi. Imparare l'HTML significa imaprare e usare i diversi tag.
Puoi farmi qualche esempio?Va bene, l'elemento b viene usato per i caratteri in grassetto. Tutto il testo tra il tag diapertura <b> e il tag di chiusura </b> viene visualizzato sul browser con caratteri ingrassetto. ("b" è l'abbreviazione della parola inglese "bold".)
Esempio 1:
<b>Questo testo deve essere un grassetto.</b>
Sul browser lo vedrai in questo modo:
Questo testo deve essere un grassetto.
Gli elementi h1, h2, h3, h4, h5 e h6 vengono usati per i titoli (h è l'iniziale della parolainglese "heading"), dove h1 è il primo livello e normalmente il testo più grande, h2 è ilsecondo livello e normalmente un testo leggermente più piccolo, e h6 è il sesto e ultimolivello della gerarchia dei titoli e normalmente viene rappresentato con un testo piccolo.
Esempio 2:
<h1>questo è un heading</h1> <h2>questo è un subheading</h2>
Questo è quello che vedrai sul browser:
Questo è un headind
Questo è un subheading
Quindi ho sempre bisogno di un tag di apertura e di untag di chiusura?Come si dice, ci sono eccezioni ad ogni regola, e in HTML l'eccezione è che esistonopochi elementi che hanno l'apertura e la chiusura nello stesso tag. Questi elementivengono chiamati elementi vuoti. Non sono collegati a specifici passaggi nel testo, mapiuttosto sono etichette isolate, come per esempio, a linea vuota che si indica con <br />.
I tag devono essere scritti maiuscoli o minuscoli?A molti browser non interessa se scrivi i tag tutti maiuscoli, tutti minuscoli o misti.Normalmente forniscono lo stesso risultato. In ogni caso il modo corretto è quello discriverli tutti minuscoli. Quindi abituati a scrivere i tuoi tag con i caratteri minuscoli.
Dove devo mettere tutti questi tag?Tu scrivi i tuoi tag nel documento HTML. Un sito web contiene uno o più documenti HTML.Quando navighi sul Web, ti limiti ad aprire diversi documenti HTML.
Se continui con la prossima lezione in 10 minuti avrai fatto il tuo primo sito web.
Lezione 4: Crea il tuo primo sito web Con quello che hai imparato nella lezione precedente ti mancano solo pochi minuti perfare il tuo primo sito web.
Come?Nella Lezione 1 abbiamo visto quello che ci serviva per fare un sito web: un browser eNotepad (o un editor di testo simile). Poiché stai leggendo questo documento, moltoprobabilmente hai un browser aperto. L'unica cosa di cui hai bisogno ora è aprire un'altrafinestra di browser (apri il browser un'altra volta) in modo da poter leggere questo tutorial evedere il tuo sito nello stesso momento.
Apri anche Notepad (da Accessori sotto Programmi nel menu Avvio):
Adesso siamo pronti!
Cosa posso fare?Iniziamo con qualcosa di semplice. Cosa ne pensi di una pagina che dice: "Hurra! Questoè il mio primo sito web." Continua a leggere e scoprirai come è semplice farlo.
L'HTML è semplice e logico. Il browser legge l'HTML come fai tu: dall'alto al basso e
da sinistra a destra. Questo significa che un documento HTML inizia con quello che
dovrebbe venire per primo sulla tua pagina e termina con quello che normalmente vieneper ultimo.
La prima cosa che devi fare è dire al browser che "parlerai" con lui con il linguaggio HTML.Questo viene fatto con il tag <html> (nessuna sorpresa). Quindi, prima di fare qualsiasialtra cosa, scrivi "<html>" nella prima linea del tuo documento in Notepad.
Come ricorderai dalla precedente lezione <html> è un tag di apertura e deve esserechiuso con un tag di chiusura quando hai terminato di scrivere l'HTML. Per essere sicuri dinon dimenticarsi il tag di chiusura dell'HTML scrivi "</html>" dopo aver lasciato un paio dilinee vuote e scrivi il resto del documento tra i due tag <html> e </html>.
La prossima cosa che serve al tuo documento è un "head", che contiene informazioni sultuo documento, e un "body", che è il contenuto del tuo documento. Poichè l'HTML non èniente se non è logico, la testa (<head> e </head>) starà sopra il corpo (<body> e</body>).
Il tuo documento ora sarà così:
<html>
<head> </head>
<body> </body>
</html>
Nota come abbiamo strutturato i tag su linee nuove (usando il tasto Invio) e utilizzandoanche l'indentazione (usando il tasto Tab). In linea di principio non importa come strutturi iltuo documento HTML, ma se lo fai, ti aiuta, e aiuta altri a leggere meglio il codice. Tiraccomando fortemente di strutturare il tuo HTML in maniera pulita con linee vuotee indentazioni, come l'esempio sopra .
Se il tuo documento appare come il l'esempio riportato sopra, allora hai fatto il tuo primosito web - un sito particolarmente noioso e probabilmente non quello che avevi sognato difare quando hai iniziato questo tutorial . Quello che hai fatto sarà il template di base pertutti i tuoi documenti HTML futuri.
Fin qui tutto bene, ma come faccio ad aggiungerecontenuto al mio sito web?Come hai imparato prima, il tuo documento HTML è diviso in due parti: una testa (head) eun corpo (body). Nella sezione section scriverai informazioni riguardanti la pagina,mentre il body contiene le informazioni che formano la pagina.
Per esempio, se vuoi dare un titolo alla pagina in modo che appaia nella barra in alto deltuo browser, lo dovrai fare nella sezione "head". L'elemento usato per un titolo è title. Cioè,scrivi il titolo della pagina tra il tag di apertura <title> e il tag di chiusura </title>:
<title>Il mio primo sito Web</title>
Ricordati che questo titolo non apparirà sulla pagina. Tutto quello che vuoi che appaiasulla pagina è il contenuto e dovrà quindi essere aggiunto tra i tag "body".
Come promesso vogliamo che sulla pagina dica "Hurra! Questo è il mio primo sito web."Questo è il testo che vogliamo comunicare e deve quindi appartenente alla sezione delcorpo. Perciò scrivi nella sezione body quello che vedi nell'esempio:
<p>Hurra! Questo è il mio primo sito web.</p>
La p in <p> è l'abbreviazione della parola inglese "paragraph" ad indicare esattamentequello che è - un paragrafo di testo.
Il tuo HTML dovrebbe apparire come segue:
<html>
<head> <title>Il mio primo sito web</title> </head>
<body> <p>Hurra! Questo è il mio sito web.</p>
</body>
</html>
Fatto! Hai costruito realmente il tuo primo sito web!
Adesso tutto quello che devi fare è salvare il file sul tuo disco fisso e poi aprirlo dentro iltuo browser:
• In Notepad scegli "Salva come ..." sotto "File" nei menu in alto. • Scegli "Tutti i file" nel box "Salva come ... ". Questo è molto importante - altrimenti
salvi il file come un documento di testo e non come un documento HTML. • Adesso salva il tuo documento come "pagina1.htm" (il suffisso ".htm" indica che è
un documento HTML. ".html" da lo stesso risultato. La maggior parte usa sempre".htm", ma tu puoi scegliere l'estensione che preferisci fra le due). Non importa inquale posizione del tuo disco fisso hai salvato il tuo documento - basta che ti ricordidove lo hai messo per poterlo trovare di nuovo.
Adesso vai al browser:
• Nei menu in alto scegli "Apri" sotto "File" (CTRL+O). • Ti appare un box, fai click su "Browse". • Ora cerca il tuo documento HTML e scegli "Apri".
Sul tuo browser ora dovresti vedere "Hurra! Questo è il mio primo sito web.".Congratulazioni!
Se assolutamente vuoi che tutto il mondo veda il tuo capolavoro, fai un salto alla Lezione13 dove imparerai come pubblicare la tua pagina su Internet. Altrimenti sii paziente e vaiavanti con la lettura. La parte divertente è appena cominciata.
Lezione 5: Cosa hai imparato fino ad ora?Inizia sempre con il template di base che abbiamo fatto nella precedente lezione:
<html> <head> <title></title> </head>
<body> </body>
</html>
Scrivi sempre un titolo nella sezione head: <title>Il titolo della tua pagina </title>. Notacome viene visualizzato il titolo nell'angolo in alto a sinistra del tuo browser:
Il titolo è particolarmente importante perché viene usato dai motori di ricerca (comeGoogle) per indicizzare il tuo sito web e mostrato nei risultati delle ricerche.
Nella sezione body, scrivi il vero contenuto della tua pagina. Già conosci alcuni deglielementi più importanti:
<p>E' usato per i paragrafi.</p> <b>Scrive il testo in grassetto.</b> <h1>Heading</h1> <h2>Subhead</h2> <h3>Sub-subhead</h3>
Ricordati che il solo modo di imparare l'HTML è facendo prove ed errori. Ma non tipreoccupare, non c'è nessuna possibilità che tu possa distruggere il tuo computer oInternet. Quindi continua a sperimentare - che è il modo migliore di aumentare
l'esperienza.
Cosa dovrebbe significare?Nessuno diventa un buon creatore di siti web imparando gli esempi di questo tutorial.Quello che otterrai con questo tutorial è semplicemente una conoscenza di base deglielementi basilari - per diventare bravo devi usare gli elementi basilari in modi nuovi ecreativi.
Quindi vieni fuori dall'acqua e rimani in piedi sui tuoi due piedi... Okay, forse no, maprovaci e sperimenta con quello che hai imparato.
Quindi cosa viene dopo ?Cerca di creare da solo qualche altra pagina. Per esempio, fai una pagina con un titolo,una intestazione, del testo, un sottotitolo e altro testo ancora. Va benissimo se guardi iltutorial mentre fai le tue prime pagine. Ma dopo, vedi se riesci a farlo da solo - senzaguardare.
Lezione 6: Altri elementi Sei riuscito/a a fare le pagine da solo/a? Se no, qui c'è un esempio:
<html>
<head>
Un titolo
testo, testo, testo, testo
Un sottotitolo
testo, testo, testo, testo
Ora cosa ?
Ora è tempo di imparare sette nuovi elementi.
Allo stesso modo con cui hai fatto il testo in grassetto inserendolo tra il tag di apertura <b>e il tag di chiusura </b>, puoi rendere il tuo testo corsivo usando il tag di apertura <i> e iltag di chiusura </i>. E si, "i" è l'abbreviazione della parola inglese "italic".
Esempio 1:
<i>Questo dovrebbe essere corsivo.</i>
Si vedrà in questo modo sul tuo browser:
Questo dovrebbe essere corsivo.
In maniera simile puoi rimpicciolire il tuo testo usando small:
Esempio 2:
<small>Questo dovrebbe essere più piccolo</small>
Si vedrà in questo modo sul tuo browser:
Questo dovrebbe essere più piccolo.
Posso utilizzare diversi elementi contemporaneamente?Puoi usare facilmente diversi elementi contemporaneamente basta che eviti la lorosovrapposizione. Questo viene spiegato bene nell'esempio:
Esempio 3:
Se vuoi scrivere un testo in grassetto e in corsivo, dovresti fare in questo modo:
<b><i>Testo in grassetto e corsivo<i><b>
MA NON COSI'
<b><i>Testo in grassetto e corsivo<b><i>
La differenza è che nel primo esempio abbiamo chiuso prima il tag che avevamo apertoper ultimo. In questo modo evitiamo di confonderci, sia noi che il browser.
Ancora elementi !Come abbiamo già accennato nella Lezione 3 ci sono elementi che vengono aperti echiusi nello stesso tag. Questi elementi vengono chiamati "elementi vuoti"e non sono
collegati con uno specifico passaggio nel testo ma sono etichette isolate. Un esempio diquesto tipo di tag è <br /> che crea una linea vuota forzatamente:
Esempio 4:
Un po' di testo </br> e un altro po' di testo su una nuova riga
Si vedrà così nel browser:
Un po' di testoe un altro po' di testo su una nuova riga
Nota che il tag è scritto come contrazione di un tag aperto e uno chiuso, con uno spaaziobianco e una barra alla fine: <br />.
Un altro elemento che viene aperto e chiuso nello stesso tag è <hr /> usato per disegnareuna linea orizzontale ("hr" è l'abbreviazione per le parole inglesi "horizontal rule"):
<hr />
Si vedrà così nel browser:
Esempi di elementi che necessitano sia del tag di apertura che del tag di chiusura - comefanno la maggior parte degli elementi - sono ul, ol e li. Questi elementi vengono usatiquando vuoi fare delle liste.
ul è l'abbreviazione delle parole inglesi "unordered list" (lista non ordinata) e inserisce unsimbolo per ogni elemento della lista. ol è l'abbreviazione delle parole inglesi "ordered list"(lista ordinata) e numera ogni elemento della lista. Per fare gli elementi delle liste si deveusare il tag li (abbreviazione delle parole inglesi "list item", cioè elemento della lista).Confuso? Guarda l'esempio:
Esempio 7:
<ul>
<li>Elemento della lista</li>
<li>Altro elemento della lista</li>
</ul>
si vedrà così nel browser:
• Elemento della lista• Altro elemento della lista
Esempio 8:
<ol>
<li>Primo elemento della lista</li>
<li>Secondo elemento della lista</li>
</ol>
Si vedrà nel browser:
1. Primo elemento della lista
2. Secondo elemento della lista
Uff! Tutto qui?Questo è tutto per ora. Di nuovo cerca di sperimentare e fare le tue pagine usando alcunidei sette nuovi elementi che hai imparato in questa lezione:
<i>Corsivo</i>
<small>Testo piccolo</small>
<br />linea nuova
A<hr />linea orizzontale
<ul>Lista</ul>
<ol>Lista ordinata</ol>
<li>Elemento della lista</li>
Lezione 7: AttributiPuoi aggiungere degli attributi a molti elementi.
Cosa è un attributo?Come ricorderai sicuramente, gli elementi danno struttura ad un documento HTML e dicono al browser come vuoi che venga visualizzato il tuo sito web (per esempio, <br /> informa il browser che deve lasciare una linea vuota). In alcuni elementi si possono inserire informazioni aggiuntive. Queste informazioni aggiuntive vengono chiamate attributi.
Esempio 1:
<h2 style="background-color:#ff0000;">La mia amicizia con l'HTML</h2>
Gli attributi vengono scritti sempre all'interno del tag di apertura e sono seguiti da unsegno di uguaglianza e dal dettaglio degli attributi tra apici. Il punto e virgola dopo gliattributi serve a separare i diversi comandi di stile. Torneremo su questo argomento piùtardi.
Cosa?Ci sono molti tipi diversi di attributi. Il primo che imparerai è lo style. Con l'attributo di stile puoi aggiungere un layout al tuo sito web. Per esempio un colore di sfondo:
Esempio 2:
<html> <head> </head>
<body style="background-color:#ff0000;"> </body>
</html>
visualizzerà sul tuo browser una pagina completamente rossa - vai avanti e prova da solo. Fra poco ti spiegheremo con più dettagli come funziona il sistema dei colori.
Nota che alcuni tag e attributi usano l'ortografia degli USA, come per esempio color invecedi colour. E' importante che usi la stessa ortografia che stiamo usando negli esempi di
questo tutorial, altrimenti il browser non riuscirà ad interpretare il codice. Non ti dimenticare di chiudere gli apici dopo ogni attributo.
Come hanno fatto a diventare rosse le pagine?Nell'esempio sopra abbiamo chiesto un colore di sfondo con il codice "#ff0000". Questo è il codice del colore rosso in una notazione detta numeri esadecimali. Ogni colore è individuato dal suo proprio numero esadecimale. Vediamo un esempio:
Un codice esadecimale per un colore è formato da una gratella (#) e da sei cifre o lettere. Ci sono più di 1000 codici esadecimali e non è semplice capire la corrispondenza tra questi codici e uno specifico colore. Per semplificare abbiamo costruito una tabella dei 216colori più utilizzati: 216 Tabella dei colori per il web:
Per la maggior parte dei colori puoi usare anche il nome inglese (white, black, red, blue, green e yellow).
Esempio 3:
<body style="background-color: red;">
Abbastanza sui colori. Torniamo indietro sugli attributi.
Quali elementi possono utilizzare gli attributi?I diversi attributi possono essere applicati alla maggior pate degli elementi.
Spesso userai gli attributi nel tag body, mentre raramente li userai per esempio nel tag br in quanto una linea vuota normalmente è una linea vuota senza necessità di altri parametri.
Proprio come esistono molti elementi diversi, esistono anche molti attributi diversi. Alcuni attributi sono specifici per un elemento particolare, mentre altri possono essere usati per elementi diversi. Viceversa: alcuni elementi possono contenere solo un tipo di attributo mentre altri ne possono contenere molti.
Sembra un po' strano, ma una volta che hai acquisito familiarità con i diversi attributi, tutto ti apparirà più logico e vedrai immediatamente la facilità con cui si utilizzano e le diverse
Questo tutorial ti mostrerà alcuni degli attributi più importanti.
Esattamente, di quante parti è formato un attributo?Generalmente un elemento è formato da un tag iniziale con o senza uno o più attributi, delcontenuto e un tag finale. Semplice no? Guarda la figura sotto.
Lezione 8: LinkIn questa lezione imparerai a fare i collegamenti (link) tra le pagine.
Cosa mi serve per fare un link?Per fare i link usi sempre quello che ti serve per costruire il codice HTML: un elemento. Unelemento semplice con un solo attributo che ti permetterà di fare un link a qualsiasi cosa. Qui c'è un esempio di come appare un link a HTML.net:
Esempio 1: <a href="http://www.html.net/">Questo è il link a HTML.net</a>
Sul tuo browser si vedrà in questo modo:
Questo è il link a HTML.net
L'elemento a è l'abbreviazione della parola inglese "anchor" (ancora), mentre l'attributo href sta per "hypertext reference" (cioè, riferimento ipertestuale), che specifica dove deve portare il link - tipicamente un indirizzo su Internet o un nome di un file.
Nell'esempio sopra l'attributo href ha il valore "http://www.html.net", che è l'indirizzo
completo di HTML.net e viene chiamato URL (Uniform Resource Locator). Nota che "http://" deve essere sempre inclusa in una URL. La frase "Questo è il link a HTML.net" è iltesto che viene mostrato sul browser come link. Ricordati di chiudere l'elemento con il tag di chiusura </a>.
Cosa mi dici dei link tra le mie stesse pagine?Se vuoi fare un link tra pagine dello stesso sito web, non hai bisogno di specificare in dettagli l'intero indirizzo (URL) del documento. Per esempio, se hai fatto due pagine (chiamiamole pagina1.htm e pagina2.htm) e le hai salvate nella stessa cartella, puoi fare un link da una pagina all'altra semplicemente digitando il nome del file nel link. In questo caso un link dalla pagina1.htm alla pagina2.htm potrbbe apparire come segue:
Esempio 2: <a href="pagina2.htm">Fai click qui per andare alla pagina 2</a>
Se la pagina 2 è posizionata in una sottocartella (chiamata "sottocartella"), allora il link dovrebbe apparire come questo:
Esempio 3: <a href="sottocartella/pagina2.htm">Fai click qui per andare alla pagina2</a>
Il contrario, un link dalla pagina 2 (nella sottocartella) alla pagina 1, si vedrà come segue:
Esempio 4: <a href="../pagina1.htm">Un link alla pagina 1</a>
I caratteri "../" puntano alla cartella posizionata un livello sopra del file da cui hai fatto il link. Con lo stesso sistema puoi puntare a due (o più) cartelle di livello superiore, scrivendo "../../".
Hai capito il sistema? In alternativa puoi sempre digitare l'indirizzo completo del file (URL).
Come faccio per i link interni alla pagina?Puoi creare anche dei link interni alla stessa pagina - per esempio un sommario in cima alla pagina che punta a ciascuno capitolo sotto. Tutto quello che ti serve è utilizzare un utilissimo attributo chiamato id (identification, identificativo) e il simbolo "#".
Usa l'attributo id per marcare l'elemento che vuoi linkare. Per esempio:
<h1 id="heading1">Titolo 1</h1>
Adesso puoi creare un collegamento a quell'elemento usando "#" nell'attributo del link. La gratella "#" deve essere seguita dall'id del tag che vuoi linkare. Per esempio:
<a href="#heading1">Link a titolo 1</a>
Tutto sarà più chiaro con un esempio:
Esempio 5: <html> <head> </head>
<body>
<p><a href="#heading1">Link a titolo 1</a></p> <p><a href="#heading2">Link a titolo 2</a></p>
Posso fare un link a qualcos'altro?Puoi fare dei link anche ad un indirizzo di mail. Si fa pressochè come un link ad un documento:
Esempio 6:
<a href="mailto:[email protected]">Manda una e-mail a nessuno a gmail.com</a>
sul browser apparirà così:
Manda una e-mail a nessuno a gmail.com
L'unica differenza tra un link ad una e-mail e un link ad un file è che invece di digitare l'indirizzo di un documento, scriverai mailto: seguito dall'indirizzo di e-mail. Quando viene fatto click sul link si aprirà il programma di posta elettronica con un nuovo messaggio vuoto e l'indirizzo di e-mail specificato. Nota che questo funziona solo se sul tuo computer è stato istallato un programma di posta. Fai una prova!
Ci sono altri attributi che dovrei conoscere?Per cercare un link devi sempre usare l'attributo href. In aggiunta, puoi anche mettere un title al tuo link:
Esempio 7: <a href="http://www.html.net/" title="Visita HTML.net e impara l'HTML">HTML.net</a>
Sul browser si vedrà così:
HTML.net
L'attributo title viene usato per inserire una breve descrizione al link. Se posizioni il cursoredel mouse sopra il link - senza cliccare - vedrai apparire il testo "Visita HTML.net e impara l'HTML".
Lezione 9: ImmaginiNon sarebbe bello poter aggiungere una foto di Tim Bernes-Lee, l'inventore dell'HTML, proprio al centro della tua pagina?
Suona come un compito difficile...Forse, ma invece è decisamente facile farlo. Tutto quello che ti serve è un elemento:
Esempio 1:
<img src="tim.jpg" alt="Tim" />
sul tuo browser apparirà così:
Tutto quello che devi fare è per prima cosa dire al tuo browser che vuoi inserire un'immagine (img) e dove trovarla (src, sta per "source", cioè sorgente). Hai la foto?
Nota come l'elemento img venga aperto e chiuso nello stesso tag. Come il tag <br />, non è legato a nessun pezzo di testo.
"tim.jpg" è il nome del file immagine che vuoi inserire nella tua pagina. ".jpg" è il tipo di file dell'immagine. Proprio come l'estensione ".htm" mostra che quel file è un documento HTML,".jpg" dice al browser che quel file è un'immagine. Ci sono tre tipi diversi di file immagine che possono essere inseriti nelle tue pagine:
Le immagini GIF generalmente sono migliori per i grafici e i disegni, mentre le immagini JPEG sono migliori per le fotografie. Questo per due ragioni principali: primo,le immagini GIF possono avere solo 256 colori, mentre le immagini JPEG sono formate damilioni di colori e secondo, il formato GIF è migliore per comprimere immagini semplici, mentre il formato JPEG è stato ottimizzato per immagini più complesse. Migliore è la compressione, più piccola sarà la dimensione del file immagine,e più veloce il caricamentosulla tua pagina. Come probabilmente sai già dall'esperienza, le pagine "pesanti" senza motivazione possono annoiare pesantemente un visitatore.
In passato i formati GIF e JPEG sono stati i due formati immagine dominanti. Negli ultimi
anni il formato PNG è diventato sempre più popolare (soprattutto a spese del formato GIF). Il formato PNG è fatto in modo da avere il meglio da entrambi i formati JPEG e GIF: milioni di colori e una compressione efficace.
Da dove prendo le mie immagini?Per fare le tue immagini ti serve un programma apposito per l'editing delle immagini. Un programma di editing delle immagini è uno degli strumenti più importanti per crearedei siti web bellissimi.
Sfortunatamente i programmi per l'editing delle immagini non sono compresi in Windows onegli altri sistemi operativi. Quindi dovresti considerare il fatto di investire in Paint Shop Pro, o PhotoShop o Macromedia Fireworks, che sono tre dei migliori programmi per immagini oggi sul mercato.
In ogni caso, come abbiamo già detto, non è necessario comprare programmi costosi per terminare questo tutorial. Per il momento puoi scaricarti un eccellente programma per l'editing di immagini, IfranView , detto freeware, cioè gratuito.
O puoi prendere in prestito le immagini scaricandole da altri siti web. Ma per favore stai attento a non violare i diritti di copyright quando scarichi le immagini. Tuttavia è bene sapere come si fa per scaricare delle immagini, quindi guarda qui come farlo:
1. Con il tasto destro del mouse posizionati su una qualsiasi immagine su Internet. 2. Scegli "Salva immagine come ..." dalla tendina di menu che ti appare. 3. Scegli una posizione sul tuo computer dove mettere l'immagine e premi "Salva".
Fai questo con l'immagine sotto e salvala sul tuo computer nella stessa cartella dove hai salvato i tuoi documenti HTML. (Nota che il logo viene salvato come un file PNG: logo.png):
Adesso puoi inserire questa immagine in una delle tue pagine. Prova da solo.
Questo è tutto quello che mi serve sapere sulle immagini?Ci sono un altro paio di cosette che dovresti sapere sulle immagini.
Primo, puoi inserire facilmente le immagini posizionate su un'altra cartella, o anche immagini posizionate su un altro sito web:
sul tuo browser apparirà così (prova a cliccare sull'immagine):
Ci sono altri attributi che dovrei conoscere?Devi sempre usare l'attributo src, che dice al browser dove sono posizionate le immagini. Oltre a questo ci sono altri attributi che potrebbero essere utili quando inserisci le immagini.
L'attributo alt viene usato per fornire una descrizione alternativa di una immagine nel caso in cui, per qualche ragione, l'immagine non viene visualizzata all'utente. Questo attributo è particolarmente utile per utenti con disabilità visive, o se la pagina si carica molto lentamente. Pertanto, usa sempre l'attributo alt:
Esempio 5:
<img src="logo.gif" alt="HTML.net logo" />
Alcuni browser mostrano il testo dell'attributo alt in una piccola box di pop-up quando si posiziona il cursore del mouse sopra l'immagine. Per favore nota che l'uso dell'attributo alt ha lo scopo di fornire una descrizione alternativa dell'immagine. Non dovrebbe quindi essere usato per creare messaggi speciali di pop-up dato che i non-vedenti sentiranno il messaggio senza sapere niente dell'immagine.
L'attributo title può essere usato per aggiungere informazioni all'immagine:
Esempio 6:
<img src="logo.gif" title="Impara l'HTML su HTML.net" />
Senza cliccare, prova a posizionare il cursore sopra l'immagine, vedrai il testo "Impara l'HTML su HTML.net" apparire in una box di pop-up.
Altri due attributi importanti sono width e height:
Esempio 7:
<img src="logo.png" width="141" height="32" />
sul browser si vedrà in questo modo:
Gli attributi width e height possono essere usati per impostare l'altezza e la larghezza di una immagine. Per impostare l'altezza e la larghezza viene usato un valore in pixel. I pixel sono l'unità di misura utilizzata per misurare la risoluzione degli schermi. (Gli schermi più comuni hanno una risoluzione di 1024x768 pixel). A differenza dei centimetri, i pixel sono unità di misura relative che dipendono dalla risoluzione dello schermo. Ad un utente con uno schermo ad alta risoluzione, 25 pixel possono corrispondere ad 1 centimetro, mentre gli stessi 25 pixel su uno schermo a bassa risoluzione possono corrispondere sullo schermo a 1.5 centimetri.
Se non vengono impostate l'altezza e la larghezza, l'immagine verrà inserita con le sue dimensioni originali. Modificando altezza e larghezza, invece, è possibile manipolare la dimensione della stessa immagine:
Esempio 8:
<img src="logo.gif" width="32" height="32" />
sul browser si vedrà così:
Comunque vale la pena ricordare che la dimensione originale dell'immagine, in kilobyte, rimarrà la stessa. Quindi ci vorrà lo stesso tempo di prima per caricare l'immagine, anche se questa volta sullo schermo appare più piccola. Quindi, non dovresti mai diminuire la dimensione dell'immagine usando gli attributi width e height. Dovresti invece sempre ridimensionare l'immagine direttamente da un programma per l'editing di immagini, in modo da rendere le tue pagine più leggere e veloci.
Detto questo è ancora una buona idea usare gli attributi width e height perché il browser sarà in grado di sapere lo spazio che servirà all'immagine nella pagina finale prima che siacompletamente scaricata. Questo permette al tuo browser di predisporre esattamente la pagina nella maniera più veloce.
Per ora è tutto su Tim Berners-Lee e sulle immagini.
Lezione 10: TabelleLe tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne.
E' difficile?All'inizio costruire le tabelle in HTML può sembrare complicato, ma se mantieni la calma e fai attenzione, in effetti è esattamente logico - proprio come ogni altra cosa in HTML.
Che differenza c'è tra <tr> e <td>?Come vedrai dall'esempio sopra, questo probabilmente è l'esempio HTML più complicato che abbiamo fatto finora. Scomponiamolo e spieghiamo i diversi tag:
Vengono usati 3 elementi diversi per costruire una tabella:
• il tag di apertura <table> e il tag di chiusura </table> iniziano e terminano la tabella. Logico.
• <tr> è la sigla delle parole inglesi "table row" (cioè, riga della tabella) e inizia e termina una riga orizzontale. Ancora logico.
• <td> è la sigla delle parole inglesi "table data" (cioè, dati della tabella). Questo tag inizia e termina ogni cella della riga della tua tabella. Tutto semplice e logico.
Questo è quello che succede nell'Esempio 1: la tabella inizia con un <table>, seguito da un <tr>, che indica l'inizio di una nuova riga. In ogni riga vengono inserite due celle: <td>Cella 1</td> e <td>Cella 2</td>. In seguito la riga viene chiusa con un </tr> e immeditamente dopo inizia una nuova riga <tr>. Anche la nuova riga contiene due celle. La tabella viene chiusa con </table>.
Solo per chiarire: le righe sono le linee orizzontali di celle e le colonne sono linee verticali di celle:
Cella 1
Cella 2
Cella 3
Cella 4
Cella 1 e Cella 2 formano una riga. Cella 1 e Cella 3 formano una colonna.
Nell'esempio sopra la tabella è formata da due righe e due colonne. Tuttavia, una tabella può avere un numero illimitato di righe e di colonne.
Ci sono degli attributi?Naturalmente ci sono degli attributi. Per esempio, l'attributo border viene usato per specificare lo spessore del bordo intorno alla tua tabella:
• align: specifica l'allineamento orizzontale di tutta la tabella, in una riga o in una singola cella. Per esempio, sinistro, centro o destro.
• valign: specifica l'allineamento verticale del contenuto di una cella. Per esempio, alto, mezzo o basso.
Esempio 5:
<td align="right" valign="top">Cell 1</td>
Cosa posso inserire nella mia tabella?In teoria nella tabella puoi inserire qualsiasi cosa: testo, link, immagini ...MA, le tabelle sono destinate alla presentazione di dati tabellari (cioè dati che possono essere significativamente presentati in righe e colonne), quindi evita di mettere nelle tabelle oggetti, semplicemente perché vuoi che siano posizionati uno accanto all'altro.
Tempo fa su Internet - cioè pochi anni fa - le tabelle venivano spesso usate come strumento per il layout. Ma se vuoi avere il controllo di come verranno presentati testo e immagini c'è un modo molto più interessante per farlo (suggerimento: CSS). Ne parleremodi più in seguito.
Adesso metti in pratica quello che hai appena imparato e progetta tabelle di diverse misure, con diversi attributi e contenuto. Questo ti dovrebbe tenere impegnato per un po' di ore.
Lezione 11: Ancora sulle tabelle Il titolo "Ancora sulle tabelle " potrebbe suonare un pochino noioso. Ma guarda il lato positivo. Quando sei diventato padrone delle tabelle, non c'è assolutamente niente dell'HTML che ti sfinirà.
Allora cosa manca?I due attributi colspan e rowspan vengono usati quando vuoi creare delle tabelle elaborate.
Colspan è l'abbreviazione delle parole inglesi "column span" (cioè, colonne accoppiate). Colspan viene usato nel tag <td> per specificare quante colonne dovranno essere unite insieme:
Fissando colspan a "3", la cella nella prima riga occupa tre colonne. Se invece avessimo fissato colspan a "2", la cella sarebbe stata formata solo da due colonne e sarebbe stato necessario inserire una cella aggiuntiva nella prima riga in modo da fare combaciare le due righe.
Nell'esempio sopra rowspan è fissato a "3" nella Cella 1. Questo significa che la cella sarà formata da 3 righe (la sua stessa riga più altre due). Così la Cella 1 e la Cella 2 stanno sulla stessa riga, mentre la Cella 3 e la Cella 4 formano due righe indipendenti.
Confuso? Bene, non è semplice ed è facile perdersi. Quindi, sarebbe una buona idea disegnare la tabella su un pezzo di carta prima di iniziare con l'HTML.
Non sei confuso? Allora vai avanti e crea da solo un paio di tabelle con colspan e rowspaninsieme.
Lezione 12: Layout (CSS)Non sarebbe figo se tu riuscissi a dare alle tue pagine il layout che si meritano?
Certo, ma come?Per dare un layout al tuo sito web usa i Cascading Style Sheets (CSS) (in italiano, Fogli di Stile). In questa lezione vedrai una breve introduzione ai CSS. In seguito potrai imparare tutto sui CSS dall'inizio. Quindi per favore, considera questa lezione solo come un aperitivo.
CSS è la metà migliore dell'HTML. Per quanto riguarda il codice le condizioni sono diverse: l'HTML si prende cura della materia grezza (la struttura), mentre i CSS danno il tocco attraente (layout).
Come mostrato nella Lezione 7, i CSS possono essere aggiunti con l'attributo style. Per esempio, per un paragrafo puoi definire il tipo di carattere (font) e la sua grandezza:
Esempio 1:
<p style="font-size:20px;">Questo è scritto con dimensione 20</p> <p style="font-family:courier;">Questo è Courier</p> <p style="font-size:20px; font-family:courier;">Questo è Courier di dimensione20</p>
Sul browser si vedrà così :
Questo è scritto con dimensione 20
Questo è Courier
Questo è Courier di dimensione 20
Nell'esempio sopra abbiamo usato l'attributo style per specificare il tipo di carattere da utilizzare (con il comando font-family) e la dimensione del carattere (con il comando font-size). Nota come abbiamo definito insieme il tipo di carattere e la sua grandezza nell'ultimo paragrafo, con un segno di punto e virgola come separazione.
Sembra un sacco di lavoro?Una delle caratteristiche intelligenti del CSS è la possibilità di controllare il tuo layout centralmente. Invece di usatre l'attributo style per ogni tag, puoi dire al browser una sola volta come deve fare il layout di tutto il testo della pagina:
<style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style>
</head>
<body> <h1>La mia prima pagina web</h1> <h2>Benvenuto nella mia prima pagina con i CSS</h2> <p>Qui puoi vedere come funzionano i CSS</p> </body>
</html>
Nell'esempio sopra i CSS sono stati inseriti nella sezione head e pertanto vengono applicati a tutta la pagina. Per fare questo, usa solo il tag <style type="text/css"> che informa il browser del fatto che stai scrivendo un CSS.
Nell'esempio tutti i titoli di primo livello della pagina saranno in Arial di dimensioni 30px. Tutti i sottotitoli saranno in Courier con dimensione 15px. E tutto il testo nei paragrafi semplici sarà in Times New Roman con dimensione 8px.
Un'altra opzione è quella di scrivere i CSS in un documento separato. Scrivendo i CSS inun documento separato puoi controllare il layout di molte pagine contemporaneamente. Molto furbo se vuoi cambiare il tipo di font o la dimensione su tutto il sito web fatto di centinaia o migliaia di pagine. Non approfondiremo questo aspetto che potrai invece imparare più tardi con il tutorial sui CSS.
Cosa posso fare ancora con i CSS?I CSS possono essere usati per molto di più che il semplice tipo di font o dimensione. Per esempio, puoi aggiungere colori o sfondi. Qui ci sono alcuni esempi con cui puoi fare pratica:
<p style="color:green;">Testo verde</p>
<h1 style="background-color: blue;"Titolo con sfondo blu</h1>
Prova ad inserire l'esempio sopra in qualcuna delle tue pagine - sia come mostrato sopra che come CSS nella sezione head.
I CSS sono solo colori e tipi di font?Oltre a inserire caratteristiche per i colori, i tipi di font, ecc., i CSS possono anche controllare la disposizione e la presentazione della pagina (margini, fluttuazioni, allineamenti, larghezza, altezza, ecc.). Definendo i diversi elementi con i CSS sarai in grado di organizzare in maniera elegante e precisa le tue pagine.
Esempio 3:
<p style="padding:25px;border:1px solid red;">Amo i CSS</p>
Sul tuo browser si vedrà così :
Amo i CSS
Con la proprietà float un elemento può fluttuare sia a destra che a sinistra. L'esempio che segue ti illustra il principio:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p>
Sul browser si vedrà così :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
Nell'esempio un elemento (l'immagine) fluttua sulla sinistra e l'altro elemento (il testo) riempie il buco.
Con la proprietà position, puoi posizionare un elemento esattamente dove vuoi nella pagina:
Nell'esempio l'immagine viene posizionata 50 pixel dal bordo inferiore e 10 pixel dal bordo destro del tuo browser. Puoi posizionarlo esattamente dove vuoi. Prova. facile e divertente, vero?
Divertente, sicuro. Ma facile?
Imparerai i CSS in 10 minuti. E, come abbiamo detto prima, questa lezione è solo una breve introduzione. Più tardi imparerai molto di più con il Tutorial sui CSS.
Per ora concentrati sull'HTML e vai avanti con la prossima lezione dove imparerai come fare per pubblicare il tuo sito web su Internet in modo che tutto il mondo lo possa vedere!
Lezione 13: Pubblicare le pagine Fino ad ora solo tu hai avuto la soddisfazione di vedere le tue pagine. Adesso è tempo cheanche il resto del mondo possa vedere il tuo capolavoro.
Il mondo è pronto per questo?Il mondo è pronto - presto lo sarai anche tu. Per pubblicare il tuo sito web su Internet hai bisogno di uno spazio su un server e di un programma gratuito per l'FTP.
Se hai l'accesso a Internet dovresti già avere uno spazio libero su un server per il tuo sito web. Il tuo spazio sul server probabilmente si chiamerà qualcosa come http://home.provider.com/~usernumber. Ma prima dovrai attivarlo. Leggi come fare dai foglidel tuo Internet Provider o sulle loro pagine di supporto.
Un'altra opzione è quella di prendere un po' di spazio server libero su Internet. Così come hai configurato il tuo indirizzo di e-mail (per esempio con Hotmail), puoi registrarti per avere uno spazio libero su un server su Internet. questo servizio viene offerto da molte compagnie - una fra queste è 000webhost.com (clicca su "Sign Up" e scegli free membership) - ci vorranno solo un paio di minuti per la registrazione.
Per avere accesso al server hai bisogno di conoscere l' "Host Name" (Per esempio, ftp.htmlnet.site50.net) e avere pronti la tua user e la tua password.
E' tutto quello che mi serve?Per accedere al server e pubblicare le tue pagine ti serve anche un programma di FTP. Potresti non avere ancora questo programma, ma fortunatamente puoi scaricarlo gratuitamente.
Ci sono diversi programmi FTP. Uno dei migliori è FileZilla, interamente gratuito. Adesso puoi quindi scaricare FileZilla da filezilla.sourceforge.net.
E come faccio per pubblicare le pagine?Sotto ti descrivo come fare per pubblicare le tue pagine su un server 000webhost.com conFileZilla. Ma la procedura è più o meno la stessa con tutti i provider e tutti i programmi di FTP.
Apri il programma di FTP mentre sei connesso ad Internet. Inserisci l'"Host Name" ("ftp.htmlnet.site50.net" sotto "Address"), lo user (sotto"User") e la password (sotto "Password") e clicca"Connect". Adesso dovresti avere l'accesso al server. Su un lato del programma dovresti vedere il contenuto del tuo computer ("Local Site", cioè sito in locale), e sull'altro lato puoi vedere il contenuto del server ("Remote Site", cioè sito in remoto):
Trova i tuoi documenti HTML e le tue immagini sul tuo computer (su "Local site") e trasferiscile sul server (the "Remote site") facendo doppio click. Adesso l'intero mondo puòvederle! (Per esempio, all'indirizzo http://htmlnet.site50.netpagina1.htm).
Rinomina una delle pagina "index.htm" (o"index.html") e automaticamente diventerà la pagina iniziale. Cioè, se digiti http://htmlnet.site50.net (senza nessun nome di file) in effetti si aprirà la pagina http://htmlnet.site50.net/index.htm.
Col tempo sarebbe una buona idea comprare il tuo proprio dominio (www.tuo-nome.com) e evitare lunghi e complicati indirizzi che ti vengono assegnati dal tuo provider o dagli spazi sui server gratuiti. Puoi vedere come comprare un dominio ad esempio su Speednames o NetworkSolutions.
Lezione 14: Standard web e validazioneIn questa lezione imparerai qualche nozione teorica sull'HTML.
Cosa c'è ancora da sapere sull'HTML?L'HTML può essere codificato in molti modi e i browser possono leggerlo in altrettanti modidiversi. Dovresti sapere che l' HTML ha molti dialetti. Questo è il motivo per cui gli stessi siti web appaiono diversi su browser diversi.
Ci sono stati molti tentativi di creare uno standard comune per l'HTML attraverso il World Wide Web Consortium (W3C) fondato da Tim Berners-Lee (si! il grande tipo che ha inventato l'HTML). Ma è stata una strada lunga e tortuosa.
Prima - quando i browser erano qualcosa che dovevi pagare - Netscape era il browser dominante. Allora, lo standard HTML più supportato era chiamato 2.0 e più tardi 3.2. Ma con un mercato superiore al 90% Netscape non si preoccupa - e non si preoccupò - di considerare gli standard. Al contrario, Netscape inventò i suoi propri elementi che non funzionavano con altri browser.
Per molti anni Microsoft quasi completamente ignorò Internet. Dopo un po' prese parte allacompetizione con Netscape e introdusse un browser. Le prime versione del browser di Microsoft, Internet Explorer, non erano migliori di Netscape nel supportare gli standard HTML. Ma Microsoft decise di dare gratuitamente il suo browser (è sempre una cosa molto popolare da fare) e Internet Explorer divenne presto il browser più popolare.
Dalle versioni 4 e 5 Microsoft puntò a supportare sempre di più gli standard HTML del W3C. Netscape non aveva l'intenzione di sviluppare un nuovo browser e continuò a distribuire la sorpassata versione 4.
Il resto è storia. Oggi gli standard HTML si chiamano 4.01 e XHTML. Adesso è Internet Explorer che ha una quota di mercato superiore al 90%. Internet Explorer ha ancora i suoi strani elementi ma sono supportati dagli standard HTML del W3C. E così anche per tutti glialtri browser, come Mozilla, Opera e Netscape.
Quindi, quando scrivi il codice HTML segui gli standard del W3C in modo che i tuoi siti web possano essere visti su tutti i browser - ora e in futuro. E fortunatamente, quello che hai imprato in questo tutorial è una nuova versione, più precisa e pulita dell'HTML, chiamata XHTML.
Come si fa per dire quale è la versione che sto usando?Con tutti ii tipi diversi di HTML hai bisogno di dire al browser quale "dialetto" è il tuo HTML,nel tuo caso XHTML. Per fare questo, si utilizza una Document Type Declaration, cioè
Oltre alla Document Type Declaration (la prima linea nell'esempio sopra), che dice al browser che vuoi scrivere in XHTML, hai bisogno di inserire qualche altra informazione neltag html tag con gli attributi xmlns e lang.
xmlns è l'abbreviazione di "XML-Name-Space" e dovrebbe sempre avere valore uguale a http://www.w3.org/1999/xhtml. Questo è tutto quello che devi sapere. Ma se sei assettato di complicazioni puoi leggere qualcosa di più sui namespace sul sito del W3C.
Con l'attributo lang definisci la lingua con cui verrà scritto il documento. Per questo viene usato standard ISO 639, dove vengono elencati i codici ti tutte le lingue parlate nel mondo.Nell'esempio sopra la lingua definita è l'inglese ("en", per english).
Con una DTD il browser conosce esattamente come dovrebbe leggere e visualizzare il tuoHTML. Quindi usa l'esempio sopra come template per tutti i tuoi documenti HTML futuri.
La DTD è molto importante quando vuoi validare le tue pagine.
Validare? Perchè e come dovrei farlo?Inserisci la DTD nelle tue pagine e puoi sempre verificare gli errori del tuo HTML usando validatore gratuito del W3C.
Per provare, fai una pagina e pubblicala su Internet. Adesso vai su validator.w3.org e digita l'indirizzo (la URL) della tua pagina per validarla.. Se il tuo HTML è scritto correttamente avrai un messaggio di congratulazioni. Diversamente apparirà un elenco con gli errori che hai fatto con scritto esattamente cosa e dove hai scritto qualcosa di sbagliato. Fai qualche errore di proposito per vedere cosa succede.
Il validatore non è così utile per localizzare un errore. Alcuni browser cercano di compensare la mancanza di bravura degli sviluppatori web cercando di fissare gli errori in HTML e mostrando la pagina come loro pensano che dovrebbe apparire. Con browser di
questo tipo non dovresti mai vedere un errore. Altri browser potrebbero in ogni caso interpretare la pagina diversamente o non visualizzarla affatto. Il validatore può aiutarti a trovare degli errori che non sapevi neanche che esistessero.
Valida sempre le tue pagine per essere sicura che verranno sempre visualizzate correttamente.
Lezione 15: Ultimi suggerimenti Congratulazioni, sei arrivato all'ultima lezione.
Quindi ora so tutto?Hai imparato molte cose e sei capace di fare da solo il tuo sito web! In ogni caso quello che hai imparato sono le basi e c'è ancora molto di più che dovresti conoscere. Adesso però hai delle buone basi su cui contare.
In questa ultima lezione apprenderai alcuni utili suggerimenti:
• Primo, è una buona idea ordinare e strutturare i documenti HTML. Ubicando documenti ben organizzati, non solo mostrerai ad altri la tua conoscenza dell'HTML,ma ti aiuterà in maniera significativa ad avere facilmente una visione d'insieme.
• Rimani attaccato agli standard e valida le tue pagine. Non è un grande sforzo: scrivisempre un XHTML pulito, usa la DTD e valida le tue pagine con validator.w3c.org.
• Dai contenuto alla tua pagina. Ricordati che l'HTML è uno strumento che ti permettedi presentare informazioni su Internet. Quindi sii sicuro di avere delle informazioni da presentare. Le pagine carine sono belle da vedere ma la maggior parte della gente va su Internet per cercare informazioni.
• Evita di sovraccaricare le tue pagine con immagini pesanti e altre cose fantasiose che hai trovato su Internet. Queste cose rallentano il caricamento della pagina e potrebbero confondere il visitatore. Le pagine che impiegano più di 20 secondi a caricarsi possono perdere fino al 50% dei loro visitatori.
• Ricordati di inserire il tuo sito web nei motori di ricerca e nelle directory in modo chenon solo i tuoi amici possano trovarlo e goderne. Nella prima pagina di tutti i motori di ricerca troverai un link per aggiungere nuove pagine (Il motore più importante è Google, ma ce ne sono anche altri, come DMOZ, Yahoo, AltaVista, AlltheWeb e Lycos).
• In questo tutorial hai imparato ad usare Notepad, un editor di testo semplice e facilissimo da usare, ma probabilmente troverai più utile un editor più avanzato che ti permetta una migliore visione di insieme. Su Download.com puoi trovare un elenco di diversi editor.
Come faccio ad imparare altre cose?Prima di tutto è importante che tu continui a lavorare e fare esperimenti con le cose che hai imparato in questo tutorial. Studia i siti web di altre persone e se trovi qualcosa che ti piace, guarda come è stato fatto da "Visualizza Sorgente" (Fai click su "Visualizza" sui menu del tuo browser e scegli "Sorgente").
Cerca su Internet esempi e articoli sull'HTML. Ci sono tantissimi siti web con informazioni interessanti sull'HTML.
Leggi e fai domande nei Forum.
Ultimo, ma non meno importante, dovresti - quando te la senti - continuare ad imparare i CSS con il tutorial sui CSS .
L'unica cosa che manca è augurarti ore di divertimento con il tuo nuovo amico, l'HTML.
