Una semplice guida del linguaggio HTML, fornito da HTML.NET.
Lezione01: Cominciamo
Lezione02: Cosa è l'HTML?
Lezione03: Elementi e tag
Lezione04: Crea il tuo primo sito web
Lezione05: Cosa hai imparato fino ad ora?
Lezione06: Altri elementi
Lezione07: Attributi
Lezione08: Link
Lezione09: Immagini
Lezione10: Tabelle
Lezione11: Ancora sulle tabelle
Lezione12: Layout (CSS)
Lezione13: Pubblicare le pagine
Lezione14: Standard web e validazione
Lezione15: Ultimi suggerimenti
Lezione01: 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 più seccante - questi programmi apportano dei cambiamenti al tuo codice. Con Notepad o con editor di testo semplici, devi solo ringraziare te stesso per i tuoi successi e per i tuoi errori.
Un browser e Notepad (o editor di testo semplici simili) sono tutto quello di cui hai bisogno per andare avanti con questo tutorial e fare il tuo sito web.
Devo avere una connessione?
Non hai bisgono 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 o semplicemente sconnetterti da Internet mentre leggi sullo schermo. Puoi fare il sito web sul 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 divertente nella Lezione 3.
Lezione02: 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 chiamato Tim Berners-Lee. Lo scopo finale era quello di semplificare l'accesso alle pubblicazioi scientifiche 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'invenzione dell'HTML stese le fondamento per il web come lo conosciamo noi oggi.
L'HTML è un linguaggio che permette di presentare le informazioni su Internet (per esempio 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 di una pagina su Internet è sufficiente fare click su "Visualizza" nel menu del tuo browser e scegliere "Sorgente".
Per un occhio inesperto il codice HTML appare complicato, ma questo tutorial ti aiuterà a comprenderne il senso.
Per cosa posso usare l'HTML?
Se vuoi fare dei siti web non puoi prescindere dall'HTML. Anche quando usi un programma per creare i siti web, come Dreamweaver, la conoscenza di base dell'HTML può 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 come fare 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 ti potrebbe essere più che sufficiente. In ogni caso, However, nell'interesse di un miglior ordine, te lo spieghiamo più dettagliatamente.
- Hyper è l'opposto di lineare. Tempi addietro - quando il topo era qualcosa a cui il gatto dava la caccia - i programmi per computer giravano linearmente: quando il programma aveva eseguito un'azione passava alla linea successiva, quindi alla linea successiva e così di seguito. Ma l'HTML è diverso - tu puoi andare in qualsiasi posto in qualsiasi momento. Per esempio, non è necessario visitare MSN.com prima 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 il testo, 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-up Language) 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 ci occuperemo: fare siti web.
Lezione03: Elementi e tag
Adesso 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, del contenuto 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 il segno maggiore di ">".
In generale ci sono due tipi di tag - i tag di apertura: <html> e i tag di chiusura: </html>. L'unica differenza tra un tag di apertura e uno di chiusura è la barra "/". Tu etichetti il contenuto inserendolo tra 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 di apertura <b> e il tag di chiusura </b> viene visualizzato sul browser con caratteri in grassetto. ("b" è l'abbrevazione della parola inglese "bold".)Esempio 1:
<b>This text must be bold.</b>
Sul browser lo vvedrai in questo modo:
This text must be bold.
Gli elementi
h1, h2, h3, h4, h5 e h6 vengono usati per i titoli (h è l'iniziale della parola inglese "heading"), dove h1 è il primo livello e normalmente il testo più grande, h2 è il secondo livello e normalmente un testo leggermente più piccolo, e h6 è il sesto e ultimo livello della gerarchia dei titoli e normalmente viene rappresentato con un testo piccolo.Esempio 2:
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
Questo è quello che vedrai sul browser:
This is a heading
This is a subheading
Quindi ho sempre bisogno di un tag di apertura e di un tag di chiusura?
Come si dice, ci sono eccezioni ad ogni regola, e in HTML l'eccezione è che esistono pochi elementi che hanno l'apertura e la chiusura nello stesso tag. Questi elementi vengono chiamati elementi vuoti. Non sono collegati a specifici passaggi nel testo, ma piuttosto 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. <HTML>, <html> o<HtMl> normalmente forniscono lo stesso risultato. In ogni caso il modo corretto è quello di scriverli 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, When you surf the Web, ti limiti ad aprire diversi documenti HTML.
Se continui con la prossima lezione in 10 minuti avrai fatto il tuo primo sito web.
Lezione04: Crea il tuo primo sito web
Con quello che hai imparato nella lezione precedente ti mancano solo pochi minuti per fare il tuo primo sito web.
Come?
Nella Lezione 1 abbiamo visto quello che ci servivva per fare un sito web: un browser e Notepad (o un editor di testo simile). Poichè stai leggendo questo documento, molto probabilmente hai un browser aperto. L'unica cosa di cui hai bisogno ora è aprire un'altra finestra di browser (apri il browser un'altra volta) in modo da poter leggere questo tutorial e vedere 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 dovrfebbe venire per primo sulla tua pagina e termina con quello che normalmente viene per 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 qualsiasi altra cosa, scrivi "<html>" nella prima linea del tuo documento in Notepad.Come ricorderai dalla precedente lezione
<html> è un tag di apertura e deve essere chiuso con un tag di chiusura quando hai terminato di scrivere l'HTML. Per essere sicuri di non dimenticarsi il tag di chiusura dell'HTML scrivi "</html>" dopo aver lasciato un paio di linee 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 sul tuo 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 utilizzando anche l'indentazione (usando il tasto Tab). In linea di principio non importa come strutturi il tuo documento HTML, ma se lo fai, ti aiuta, e aiuta altri a leggere meglio il codice. Ti raccomando fortemente di strutturare il tuo HTML in maniera pulita con linee vuote e indentazioni, come l'esempio sopra.
Se il tuo documento appare come il l'esempio riportato sopra, allora hai fatto il tuo primo sito web - un sito particolarmente noioso e probabilmente non quello che avevi sognato di fare quando hai iniziato questo tutorial. Quello che hai fatto sarà il template di base per tutti i tuoi documenti HTML futuri.
Fin qui tutto bene, ma come faccio ad aggiungere contenuto al mio sito web?
Come hai imparato prima, il tuo documento HTML è diviso in due parti: una testa (head) e un 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 del tuo 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>My first website</title>
Ricordati che questo titolo non apparirà sulla pagina. Tutto quello che vuoi che appaia sulla 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 appartenenre alla sezione del corpo. 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 esattamente quello che è - un paragrafo di testo. Il tuo HTML dovrebbe apparire come segue:
<html>
<head>
<title>Il mio primoo 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 il tuo 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 docuemnto HTML. ".html" da lo stesso risultato. I uso sempre ".htm", ma tu puoi scegliere l'estensione che preferisci fra le due). Non importa in quale posizione del tuo disco fisso hai salvato il tuo documento - basta che ti ricordi dove 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 Lezione 13 dove imparerai come pubblicare la tua pagina su Internet. Altrimenti sii paziente e cai avanti con la lettura. La parte divertente è appena cominciata.
Lezione05: 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>. Nota come viene visualizzato il titolo nell'angolo in alto a sinistra del tuo browser:
Il titolo è particolarmente importante perchè viene usato dai motori di ricerca (come Google) 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 degli elementi più importanti:
<p>Is used for paragraphs.</p>
<b>Types the text in bold.</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 ti preoccupare, non c'è nessuna possibilità che tu possa distruggere il tuo computer o Internet. 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 degli elementi basilari - per diventare bravo devi usare gli elementi basilari in modi nuovi e creativi.
Quindi vieni fuori dall'acqua e rimani in piedi sui tuoi due piedi... Okay, forse no, ma provaci 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 il tutorial mentre fai le tue prime pagine. Ma dopo, vedi se riesci a farlo da solo - senza guardare.
Lezione06: Altri elementi
Sei riuscita a fare le pagine da sola? Se no, qui c'è un esempio:
<html>
<head>
<title>My website</title>
</head>
<body>
<h1>Un titolo</h1>
<p>testo, testo, testo, testo</p>
<h2>Un sottotitolo</h2>
<p>testo, testo, testo, teso</p>
</body>
</html>
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 il tag 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 loro sovrapposizione. 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 in corsivo</i></b>
Ma NON così:
<b><i>Testo in grassetto e in corsivo</b></i>
La differenza è che nel primo esempio abbiamo chiuso prima il tag che avevamo aperto per 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 e chiusi 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 di questo tipo di tag è
<br /> che crea una linea vuota forzatamente:Esempio 4:
Un po' di testo<br /> e un altro po' di testo su un nuova riga
Si vedrà così nel browser:
Un po' di testo
e un altro po' di testo su una nuova riga
e 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 psazio bianco e una barra alla fine:
<br />.Un altro elemento che viene aperto e chiuso nello stesso tag è
<hr /> usato per disegnare una linea orizzontale ("hr" è l'abbreviazione per le parole inglesi "horizontal rule"):Esempio 5:
<hr />
Si vedrà così nel browser:
Esempi di elementi che necessitano sia del tag di apertura che del tag di chiusura - come fanno la maggior parte degli elementi - sono
ul, ol e li. Questi elementi vengono usati quando vuoi fare delle liste.ul è l'abbreviazione delle parole inglesi "unordered list" (lista non ordinata) e inserisce un simbolo 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 deve usare 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
Lezione07: Attributi
Puoi 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>
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. 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 essadecimali. Ogni colore è individuato dal suo proprio numero esadecimale. Vediamo un esempio:White: #ffffff
Black: #000000 (zero)
Red: #ff0000
Blue: #0000ff
Green: #00ff00
Yellow: #ffff00
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 216 colori 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;">
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 diveersi. 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 utilizzzano e le diverse possibilità che ti offrono.
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, dell contenuto e un tag finale. Semplice no? Guarda la figura sotto.
Lezione08: Link
In 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. Un elemento 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>
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" è il testo 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>
Esempio 3:
<a href="sottocartella/pagina2.htm">Fai click qui per andare alla pagina 2</a>
Esempio 4:
<a href="../pagina1.htm">Un link alla pagina 1</a>
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 chiamatoid (identification, identificativo) e il simbolo "#".Usa l'attributo
id per marcare l'elemento che vuoi linkare. Per esempio:
<h1 id="heading1">Titolo 1</h1>
id del tag che vuoi linkare. Per esempio:
<a href="#heading1">Link a titolo 1</a>
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>
<h1 id="heading1">titolo 1</h1>
<p>Testo testo testo testo</p>
<h1 id="heading2">titolo 2</h1>
<p>Testo testo testo testo</p>
</body>
</html>
(Note: An id attribut must start with a letter)
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:nobody@html.net">Manda una e-mail a nobody a HTML.net</a>
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 cereare un link devi sempre usare l'attributohref. 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>
L'attributo title viene usato per inserire una breve descrizione al link. Se posizioni il cursore del mouse sopra il link - senza cliccare - vedrai apparire il testo "Visita HTML.net e impara l'HTML".
Lezione09: Immagini
Non 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" />
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."david.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:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
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 creare dei siti web bellissimi.Sfortunatamente i programmi per l'editing delle immagini non sono compresi in Windows o negli 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 è necessatio 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 a prestito le immagini scaricandole da altri siti web. Ma per favore stai attento a non violare i diritti di copyrights quando scarichi le immagini. Tuttavia è bene sapere come si fa per scaricare delle immagini, quindi guarda qui come farlo:
- Con il tasto destro del mouse posizionati su una qualsiasi immagine su Internet.
- Scegli "Salva immagine come ..." dalla tendina di menu che ti appare.
- Scegli una posizione sul tuo computer dove mettere l'immagine e premi "Salva".
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 posizioante su un altro sito web:
Esempio 2:
<img src="images/logo.png" />
<img src="http://www.html.net/logo.png" />
Esempio 4:
<a href="http://www.html.net">
<img src="logo.png" /></a>
Ci sono altri attributi che dovrei conoscere?
Devi sempre usare l'attributosrc, che dice al browser dove sono posizioante le immagini. Oltre a questo ci sono altri attributi che potrbbero 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'attributoo alt:Esempio 5:
<img src="logo.gif" alt="HTML.net logo" />
alt ha lo scopo odi 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" />
Altri due attributi importanti sono
width e height:Esempio 7:
<img src="logo.png" width="141" height="32" />
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" />
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 sia cmpletamente 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.
Lezione10: Tabelle
Le 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.Esempio 1:
<table>
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
| Cella 1 | Cella 2 |
| Cella 3 | Cella 4 |
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.
<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 |
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.
Esempio 2:
<table>
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
<tr>
<td>Cella 5</td>
<td>Cella 6</td>
<td>Cella 7</td>
<td>Cella 8</td>
</tr>
<tr>
<td>Cella 9</td>
<td>Cella 10</td>
<td>Cella 11</td>
<td>Cella 12</td>
</tr>
</table>
| Cella 1 | Cella 2 | Cella 3 | Cella 4 |
| Cella 5 | Cella 6 | Cella 7 | Cella 8 |
| Cella 9 | Cella 10 | Cella 11 | Cella 12 |
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:Esempio 3:
<table border="1">
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
| Cella 1 | Cella 2 |
| Cella 3 | Cella 4 |
Così come si fa con le immagini, puoi definire la larghezza della tabella in pixel - o, alternativamente, in percentuale dello schermo:
Esempio 4:
<table border="1" width="30%">
Altri attributi?
Ci sono tanti attributi per le tabelle. Qui ne vedi altri due:- 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.
<td align="right" valign="top">Cell 1</td>
Cosa posso inserire nella mia tabella?
In teoria nella tabella puoi inserire qualsiasi cosa: testo, link, imagini ...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 posizionatii 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 parleremo di 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.
Lezione11: 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 attributicolspan 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:Esempio 1:
<table border="1">
<tr>
<td colspan="3">Cella 1</td>
</tr>
<tr>
<td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
| Cella 1 | ||
| Cella 2 | Cella 3 | Cella 4 |
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.Esempio 2:
<table border="1">
<tr>
<td colspan="2">Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
<td>Cella 5</td>
</tr>
</table>
| Cella 1 | Cella 2 | |
| Cella 3 | Cella 4 | Cella 5 |
E cosa mi dici di rowspan?
Come potrai già immaginare,rowspan specifica quante righe dovrebbero essere comprese in una cella:Esempio 3:
<table border="1">
<tr>
<td rowspan="3">Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
</tr>
<tr>
<td>Cella 4</td>
</tr>
</table>
| Cella 1 | Cella 2 |
| Cella 3 | |
| Cella 4 |
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, mentr 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 rowspan insieme.Lezione12: Layout (CSS)
Non sarebbe forte 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, con il nostro tutorial sui CSS. Quindi per favore, considera questa lezione soloo 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>
Questo è scritto con dimensione 20
Questo è Courier
Questo è Courier di dimensione 20
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'attributostyle per ogni tag, puoi dire al browser una sola volta come deve fare il layout di tutto il testo della pagina:Esempio 2:
<html>
<head>
<title>La mia prima pagina web</title>
<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>
<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 in un 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 nostro 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>
<body style="background-image: url('http://www.html.net/logo.png');">
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 presentaizone 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>
Amo i CSS
float un elemento può fluttare sia a destra che a sinistra. L'esempio che segue ti illustra il principio:Esempio 4:
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<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>
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:Esempio 5:
<img src="bill.jpg" alt="Bill Gates"
style="position:absolute;bottom:50px;right:10px;" />
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 nostro 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!
Lezione13: Pubblicare le pagine
Fino ad ora solo tu hai avuto la soddisfazione di vedere le tue pagine. Adesso è tempo che anche 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 fogli del 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 è Angelfire (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.angelfire.com) 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. Potrsti 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 Angelfire con FileZilla. 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.angelfire.com" 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):
Rinomina una delle pagina "index.htm" (o"index.html") e automaticamente diventerà la pagina iniziale. Cioè, se digiti http://www.angelfire.com/folk/htmlnet (senza nessun nome di file) in effetti si aprirà la pagina http://www.angelfire.com/folk/htmlnet/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.
Lezione14: Standard web e validazione
In 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 browsers possono leggerlo in altrettanti modi diversi. 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 alla competizione con Netscape e introdusse un browser. Le prome 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 unn uovo browser e continuò a distribuire la sorpassata versione 4.
Il resto ès toria. 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 gli altri 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 imaprato 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è dichiarazione di tipo di documento. La Document Type Declaration viene scritta sempre all'inizio del documento:Esempio 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Titolo</title>
</head>
<body>
<p>testo testo</p>
</body>
</html>
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 namespaces 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 tuo HTML. Quindi usa l'esempio sopra come template per tutti i tuoi docuemnti 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.
Lezione15: Ultimi suggerimenti
Congratulazioni, sei arrivato all'ultima lezione.Quindi ora so tutto?
Hai imparato molte cose e se 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. ubblicando 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: scrivi sempre 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 permette di 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 che non 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 altr 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"). Leggi e fai domande nel Forum. Questo è il luogo dove puoi incontrare i veri esperti da cui puoi imparare moltissimo.
Ultimo, ma non meno importante, dovresti - quando te la senti - continuare ad imparare i CSS con il nostro tutorial CSS Tutorial.
L'unica cosa che manca è augurarti ore di divertimento con il tuo nuovo amico, l'HTML.
Ci vediamo su Internet :-)
