Se stai usando Windows, apri Blocco Note.
Se sei su un Mac apri SimpleText.
In OSX apri TextEdit e cambia le seguenti preferenze: seleziona (nella finestra delle preferenze)
"Plain text" invece di "Rich text" e poi seleziona "Ignore rich text commands in HTML files". È molto importante
perchè se non lo fai questi codici HTML probabilmente non lavoreranno.
Scrivi il testo di seguito:
|
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> |
Salva il file come "mypage.htm".
Apri il tuo browser Internet. Seleziona "Open" (o "Open Page") nel File menu del tuo browser. Apparirà un box di dialogo.
Seleziona "Browse" (o "Choose File") e localizza il file HTML che hai appena creato - "mypage.htm" - selezionalo e clicca
su "Open". Ora dovresti vedere un indirizzo nel box di dialogo, per esempio "C:\MyDocuments\mypage.htm".
Clicca OK, e il browser mostrerà la pagina.
Il primo tag nel tuo documento HTML è <html>. Questo tag dice al tuo browser che questo è l'inizio di un documento
HTML. L'ultimo tag nel tuo documento è </html>. Questo tag dice al tuo browser che questa è la fine deldocumento HTML.
Il testo tra il tag <head> e il tag </head> informa sull'intestazione.
L'intestazione non compare sulla finestra del browser.
Il testo tra i tag <title> è il titolo del tuo documento. Il titolo compare sull'intestazione del browser.
Il testo tra i tag <body> è il testo che apparirà nel tuo browser.
Il testo tra il tag <b> e </b> apparirà in grassetto.
Quando salvi un file HTML, puoi usare entrambe le estensioni .htm o .html. Noi abbiamo usato .htm nei nostri esempi.
Potrebbe essere una cattiva abitudine ereditata dal passato quando alcuni tra i più comuni software usati permetteva
solo tre lettere di estensione.
Con i più nuovi software pensiamo sarà perfettamente sicuro usare .html.
Puoi facilmente regidere file HTML usando un editor WYSIWYG (what you see is what you get) come FrontPage, Claris Home Page,
o Adobe PageMill invece di scrivere i tuoi tag di markup in un semplice file di testo.
Ma se voui diventare un abile sviluppatore Web, ti raccomandiamo di usare un semplice editor di testo per imparare
per prima l'HTML.
Q: Dopo aver redatto un file HTML, non riesco a vedere il risultato sul browser. Perchè?
A: Acceratti di aver salvato il file con il nome e l'estensione giusta come "c:\mypage.htm". Anche accertati di usare
lo stesso nome quando apri il file nel tuo browser.
Q: Ho provato a redarre un file HTML ma i cambiamenti non appaiono nel browser. Perchè?
A: Il browser carica le tue pagine così che non devi rileggere la stessa pagina due volte. Quando hai cambiato
una pagina, il browser non lo sa. Usa il pulsante refresh/reload del browser per forzare il browser a leggere le pagine redatte.
Q: Posso usare sia Internet Explorer che Netscape Navigator?
A: Sì, puoi fare tutto il tuo training con entrambi Netscape 3.0 o superiore, e Internet Explorer 3.0 o superiore.
Comunque, qualche esempio nelle nostre classi avanzate suppone che si stia navigando su Internet Explorer 4.0 / 5.0 o 6.0, o Netscape 6.0.
Q: Il mio computer deve viaggiare Windows? Ma su un Mac?
A: Puoi fare tutto il tuotraining su un computer che non sia Windows come un Mac. Comunque, qualche esempio
nelle nostre classi avanzate suppone che si stia usando la più recente versione di Windows, come Windows 98 o Windows 2000.
I documenti HTML sono file di testo fatti su elementi HTML.
Gli elementi HTML sono definiti usando i tag HTML.
Ricorda l'esempio HTML dalla pagina precedente:
|
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> |
Questo è un elemento HTML:
| <b>This text is bold</b> |
L'elemento HTML comincia con uno start tag: <b>
Il contenuto dell'elemento HTML è: This text is bold
L'elemento HTML finisce con un end tag: </b>
Lo scopo del tag <b> è definire un elemento HTML che deve essere mostrato in grassetto.
Anche questo è un elemento HTML:
|
<body> This is my first homepage. <b>This text is bold</b> </body> |
Questo elemento HTML comincia con lo start tag <body>, e finisce con l'end tag </body>
Lo scopo del tag <body> è definire l'elemento HTML che contiene il corpo del documento HTML.
Abbiamo appena detto che i tag HTML non sono case sensitive: <B> vuol dire lo stesso che <b>.
Quando navighi il Web, noterai che molti tutorial usano tag HTML in maiuscolo nei loro esempi. Noi usiamo sempre tag in
minuscolo. Perchè?
Se ti vuoi preparare per la nuova generazione di HTML devi cominciare a usare tag in minuscolo. Il World Wide Web
Consortium (W3C) raccomanda tag in minuscolo nel loro consiglio per HTML 4, e XHTML (la prossima generazione di HTML)
richiede tag in minuscolo.
I tag posso avere attributi. Gli attributi possono fornire informazioni aggiuntive sugli elementi HTML sulla tua pagina.
Questo tag definisce l'elemento corpo della tua pagina HTML: <body>. Con un attributo bgcolor aggiunto, puoi dire al
browser che il colore di sfondo della tua pagina deve essere rossa, così: <body bgcolor="red">.
Questo tag definisce una tabella HTML: <table>. Con un attributo aggiunto del bordo, puoi dire al browser che la
tabella non deve avere bordi: <table border="0">.
Gli attributi sono sempre in coppia name/value comq questo: name="value".
Gli attributi sono sempre aggiunti allo start tag di un elemento HTML.
Il valore degli attributi deve sempre essere allegato tra virgolette. Le doppie virgolette sono le più comuni, ma le virgolette singole sono altrettanto usate.
In alcune rare situazioni, come quando il valore dell'attributo contiene in sè le virgolette, è necessario usare le virgolette singole:
name='John "ShotGun" Nelson'.
I più importanti tag nell'HTML sono i tag che definiscono heading, paragraph e line break.
L'heading si definisce con i tag da <h1> a <h6>. <h1> definisce il titolo più grande. <h6> definisce il titolo più piccolo.
|
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> |
L'HTML automaticamente aggiunge una linea bianca extra prima e dopo un heading.
I Paragraph sono definiti dal tag <p>.
|
<p>This is a paragraph</p> <p>This is another paragraph</p> |
L'HTML automaticamente aggiunge una linea bianca extra prima e dopo un paragraph.
Il tag <br> viene usato per la fine del rigo, ma non si vuole cominciare un nuovo paragrafo. Il tag <br> crea un a capo dovunque lo posizioni.
| <p>This <br> is a para<br>graph with line breaks</p> |
Il tag <br> è un tag vuoto. Non ha tag di chiusura.
Il tag di commento è usato per inserire un commento nel codice sorgente HTML. Un commento sarà ignorato dal browser. Puoi usare commenti per spiegare il tuo codice, che può aiutarti quando redarrai il codice sorgente in un secondo momento.
| <!-- This is a comment --> |
Nota che hai bisogno di un punto esclamativo dopo la parentesi di apertura, ma non prima della parentesi di chiusura.
Quando scrivi un testo HTML, puoi non essere mai sicuro di come il testo si mostrerà in un altro browser. Alcuni hanno monitor larghi, altri piccoli. Il testo sarà riformattato ogni volta che l'utente ridimensiona la finestra. Non provare mai a formattare il testo nel tuo editor aggiungendo spazi bianchi e spazi al testo.
L'HTML troncherà lo spazio nel tuo testo. Ogni spazio conta come uno. Alcune informazioni extra: in HTML una nuova linea conta come uno spazio.
Usare paragrafi vuoti <p> per inserire spazi bianchi è una cattiva abitudine. Usa invece il tag <br>. (Ma non usare il tag <br> per creare liste. Aspetta sinchè non hai imparato qualcosa sulle liste HTML.).
Potresti aver notato che i paragrafi possono essere scritti senza il tag di chiusura </p>. Non contarci. La prossima versione di HTML non permetterà di saltare nessun tag di chiusura.
L'HTML automaticamente aggiunge una linea bianca extra prima e dopo alcuni elementi, come prima e dopo un paragrafo, e prima e dopo un titolo.
Usiamo un horizontal rule (il tag <hr>), per separare le sezioni del nostro tutorial.
| Tag | Descrizione | |
|---|---|---|
| <html> | Definisce un documento HTML | |
| <body> | Definisce il corpo del documento | |
| <h1> to <h6> | Definisce l'intestazione da 1 a 6 | |
| <p> | Definisce un paragrafo | |
| <br> | Inserisce un singolo a capo | |
| <hr> | Definisce una linea orizzontale | |
| <!--> | Definisce un commento |
L'HTML definisce una serie di elementi per la formattazione prodotta, come testo in grassetto o corsivo.
Avete mai visto una pagina Web e vi siete domandati "Come fanno?".
Per scoprirlo, semplicemente clicca l'opzione VIEW nella barra degli strumenti del tuo browser e seleziona SOURCE o PAGE
SOURCE. Si aprirà una finestra che mostrerà l'HTML della pagina.
| Tag | Descrizione | |
|---|---|---|
| <b> | Definisce il testo grassetto | |
| <big> | Definisce il testo grande | |
| <em> | Definisce il testo enfatizzato | |
| <i> | Definisce il testo corsivo | |
| <small> | Definisce il testo piccolo | |
| <strong> | Definisce il testo forte | |
| <sub> | Definisce il pedice | |
| <sup> | Definisce l'apice | |
| <ins> | Definisce il testo inserito | |
| <del> | Definisce il testo cancellato | |
| <s> | Deprecato. Usa <del> invece | |
| <strike> | Deprecato. Usa <del> invece | |
| <u> | Deprecato. Usa gli stili invece |
| Tag | Descrizione | |
|---|---|---|
| <code> | Definisce il computer code text | |
| <kbd> | Definisce il keyboard text | |
| <samp> | Definisce il sample computer code | |
| <tt> | Definisce il teletype text | |
| <var> | Definisce una variabile | |
| <pre> | Definisce il preformatted text | |
| <listing> | Deprecato. Usa <pre> invece | |
| <plaintext> | Deprecato. Usa <pre> invece | |
| <xmp> | Deprecato. Usa <pre> invece |
| Tag | Descrizione | |
|---|---|---|
| <abbr> | Definisce una abbreviazione | |
| <acronym> | Definisce un acronimo | |
| <address> | Definisce l'indirizzo di un elemento | |
| <bdo> | Definisce la direzione del testo | |
| <blockquote> | Definisce una lunga citazione | |
| <q> | Definisce una piccola citazione | |
| <cite> | Definisce una citazione | |
| <dfn> | Definisce la definizione di un termine |
Alcuni caratteri come lo <, ha uno speciale significato in HTML, e pertanto non può essere usato nel testo.
Per mostrare questo segno (<) in HTML, devi usare un carattere entità.
Alcuni caratteri hanno uno speciale significato in HTML, come il segno(<) che definisce l'inizio di un tag HTML. Se vogliamo che il browser veda in realtà questi caratteri dobbiamo inserire le entità nella sorgente HTML.
Una entità ha tre parti: una e commerciale (&), un nome d'entità o un # e un numero d'entità, e infine un punto e virgola (;).
Per mostrare questi segni in un documento HTML dobbiamo scrivere: < o <.
Il vantaggio di usare un nome invece di un numero è che un nome è più facile da ricordare. Lo svantaggio è che non tutti i browser supportano i nomi delle entità più recenti, mentre il supporto per i numeri di entità è molto buono in quasi tutti i browser.
Nota che le entità sono case sensitive.
La più comune entità in HTML è lo spazio.
Normalmente l'HTML troncherà lo spazio nel testo. Se scrivi dieci spazi nel testo HTML ne rimuoverà nove. Per aggiungere spazio al testo, usa come entità.
L'HTML usa un collegamento ipertestuale per collegarsi a un altro documento nel Web.
L'HTML usa il tag <a> (ancora) per creare un link a un altro documento.
Un'ancora può puntare a qualsiasi risorsa nel Web: una pagina HTML, un'immagine, un file sonoro, un filmato, ecc.
La sintassi per creare un'ancora è:
| <a href="url">Text to be displayed</a> |
Il tag <a> è usato per creare un'ancora al collegamento da cui viene, l'attributo href è usato per indirizzare il documento al link in cui va, e le parole tra apertura e chiusura dell'ancora saranno visualizzate come un ipertesto.
Quest'ancora definisce un link a W3Schools:
| <a href="http://www.w3schools.com/">Visit W3Schools! </a> |
Verrà così in un browser:
Visit W3Schools!
Con il tag attributo, puoi definire dove si aprirà il documento linkato.
La linea sotto aprirà il documento in una nuova finestra del browser:
| <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> |
Il nome attributo è usato per creare un'ancora chiamata. Quando si usano le ancore chiamate possiamo creare link che possono saltare direttamente in una specifica sezione della pagina, invece di lasciare l'utente a girovagare per trovare ciò che cerca.
Di seguito c'è la sintassi di un'ancora chiamata:
| <a name="label">Text to be displayed</a> |
Il nome attributo è usato per creare un'ancora chiamata. Il nome dell'ancora può essere qualsiasi testo sei interessato a usare.
Di seguito si definisce un'ancora chiamata:
| <a name="tips">Useful Tips Section</a> |
Dovresti aver notato che un'ancora chiamata non compare in un modo speciale.
Per linkare direttamente alla sezione "tips (punta)", aggiungi un segno # e il nome dell'ancora alla fine di un URL, come questo:
| <a href="http://www.w3schools.com/html_links.asp#tips"> Jump to the Useful Tips Section</a> |
Un'ipertesto ha la Useful Tips Section (Sezione di puntatori utili) dal file WITHIN "html_links.asp" che sembrerà così:
| <a href="#tips">Jump to the Useful Tips Section</a> |
Aggiungi sempre una barra che lasci la traccia di riferimenti a sottocartelle. Se fai un link come questo: href="http://www.w3schools.com/html", genererai due richieste HTTP al server, perchè il server aggiungerà una sbarra (slash) all'indirizzo e crea una nuova richiesta come questa: href=http://www.w3schools.com/html/.
Le ancore chiamate sono spesso usate per creare "tabelle di contenuto" all'inizio di un grande documento. Ciascun capitolo dentro il documento ha fornito un'ancora chiamata, e i link a ciascuna di queste ancore sono poste all'inizio del documento.
Se un browser non riesce a trovare un'ancora chiamata che è stata specificata, va all'inizio del documento. Non ci sono errori.
| Tag | Descrizione | |
|---|---|---|
| <a> | Definisce un’ancora |
Con i frame, puoi mostrare più di una pagina Web nella stessa finestra del browser.
Con i frame, puoi mostrare più di un documento HTML nella stessa finestra del browser. Ciascun documento HTML viene chiamato frame, e ciascun frame è indipendente dagli altri.
Gli svantaggi di usare i frame sono:
Nell'esempio seguente abbiamo un frameset con due colonne. La prima colonna è divisa al 25% della larghezza della finestra del browser. La seconda colonna è divisa al 75% della larghezza della finestra del browser. Il documento HTML "frame_a.htm" è posto nella prima colonna, e il documento HTML "frame_b.htm" è posto nella seconda colonna:
| <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> |
Se un frame ha bordi visibili, l'utente può ridimensionarlo trascinando il bordo. Per prevenire l'inconveniente, puoi aggiungere noresize="noresize" al tag <frame>.
Aggiungi il tag <noframes> per browser che non supportano frame.
| Tag | Descrizione | |
|---|---|---|
| <frameset> | Definisce un insieme di frame | |
| <frame> | Definisce una sottofinestra (un frame) | |
| <noframes> | Definisce una sezione senza frame per browser che non trattano frame | |
| <iframe> | Definisce una sottofinestra in linea (frame) |
Con l'HTML puoi creare tabelle.
Le tabelle sono definite con il tag <table>. Una tabella è divisa in due file (con il tag <tr>), e ciascuna fila è divisa in celle di dati (con il tag <td>). Le lettere td stanno per "table data," che è il contenuto di una cella di dati. Una cella di dati può contenere testo, immagini, liste, paragrafi, forme, righe orizzontali, tabelle, ecc.
| <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> |
Come si vede in un browser:
|
Se non devi specificare un attributo del bordo la tabella si mostrerà senza bordi. Qualche volta può essere utile, ma il più delle volte, vuoi bordi da mostrare.
Per mostrare una tabella con i bordi, dovrai usare l'attributo dei bordi:
| <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> |
Gli Head di una tabella vengono definiti con il tag <th>.
| <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> |
Come si vede in un browser:
|
Le celle di tabella senza contenuto non appaiono molto bene nella maggior parte dei browser.
| <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td>> </tr> </table> |
Come si vede in un browser:
|
Nota che i bordi intorno a celle vuote di tabelle sono scomparsi.
Per evitare queso, aggiungi uno spazio ( ) alle celle di dati vuote, per rendere i bordi visibili:
| <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td> </td> </tr> </table> |
Come si vede in un browser:
|
Gli elementi <thead>, <tbody> e <tfoot> sono usati raramente, perchè sono supportati male dai browser. Ci si aspetta che sia differente nella nuova versione XHTML.
| Tag | Descrizione | |
|---|---|---|
| <table> | Definisce una tabella | |
| <th> | Definisce un table header | |
| <tr> | Definisce un table row | |
| <td> | Definisce una cella di tabella | |
| <caption> | Definisce una didascalia di tabella | |
| <colgroup> | Definisce gruppi di colonne di tabella | |
| <col> | Definisce il valore attribuito per una o più colonne in una tabella | |
| <thead> | Definisce un table head | |
| <tbody> | Definisce un table body | |
| <tfoot> | Definisce un table footer |
L'HTML supporta liste ordinate, non ordinate e di definizione.
Una lista non ordinata è una lista di punti. La lista di punti è marcata con elenchi puntati (tipicamente piccoli cerchi neri).
una lista non ordinata comincia con il tag <ul>. Ciascun punto della lista comincia con il tag <li>.
| <ul> <li>Coffee</li> <li>Milk</li> </ul> |
Questo è ciò che appare su un browser:
Dentro un punto della lista puoi mettere paragrafi, spazi, immagini, link, altre liste, ecc.
Anche una lista ordinata è una lista di punti. Ma i punti della lista sono marcati con numeri.
Una lista ordinata comincia con il tag <ol>. Ciascun punto della lista comincia con il tag <li>.
| <ol> <li>Coffee</li> <li>Milk</li> </ol> |
Questo è ciò che appare su un browser:
Dentro un punto della lista puoi mettere paragrafi, spazi, immagini, link, altre liste, ecc.
Una lista di definizioni non è una lista di punti. Questa è una lista di termini e spiegazioni dei termini.
Una lista di definizioni comincia con il tag <dl>. Ciascun termine della lista di definizioni comincia con il tag <dt>. Ciascuna definizione della lista di definizione comincia con il tag <dd>.
| <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> |
Questo è ciò che appare su un browser:
In una definizione della lista di definizione (il tag <dd>) puoi mettere paragrafi, spazi, immagini, link, altre liste, ecc.
| Tag | Descrizione | |
|---|---|---|
| <ol> | Definisce una lista ordinata | |
| <ul> | Definisce una lista non ordinata | |
| <li> | Definisce una lista di termini | |
| <dl> | Definisce una lista di definizioni | |
| <dt> | Definisce un termine di definizione | |
| <dd> | Definisce una descrizione di definizione | |
| <dir> | Deprecato. Usa <ul> invece | |
| <menu> | Deprecato. Usa <ul> invece |
I moduli in HTML sono usate per selezionare differenti tipi di input d'utenza.
Un modulo è un'area che non può contenere elementi di modulo.
Gli elementi di modulo sono elementi che permettono all'utente di accedere alle informazioni (tipo campi di testo, campi di areatext, menù a cascata, bottoni radio, box di ricerca, ecc.) in un modulo.
Un modulo è definito dal tag <form>.
| <form> <input> <input> </form> |
La forma più usata di tag è il tag <input>. Il tipo di input è specificato con il tipo di attributo. I più comuni tipi di input usati sono spiegati di seguito.
I campi di testo sono usati quando vuoi che l'utente scriva lettere, numeri, ecc. in un modulo.
| <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> |
Come si vede in un browser:
Nota che il modulo in sè non è visibile. Nota anche che nella maggior parte dei browser, la larghezza del campo di testo è di 20 caratteri di default.
I bottoni radio sono usati quando vuoi che l'utente selezioni uno tra un limitato numero di scelte.
| <form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form> |
Come si vede in un browser:
Nota che può essere scelta solo un'opzione.
I checkbox sono usati quando vuoi che l'utente selezioni una o più opzioni di un limitato numero di scelte.
| <form> <input type="checkbox" name="bike"> I have a bike <br> <input type="checkbox" name="car"> I have a car </form> |
Come si vede in un browser:
Quando l'utente clicca sul pulsante "Submit", il contenuto del modulo è inviato a un altro file. L'attributo dell'azione del modulo definisce il nome del file a cui mandare il contenuto. Il file è definito nell'attributo dell'azione che di solito si fa con l'input ricevuto.
| <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> |
Come si vede in un browser:
Se digiti alcuni caratteri nel campo di testo sopra, e clicchi il pulsante "Submit", manderai il tuo input a una pagina chiamata "html_form_action.asp". Tale pagina ti mostrerà l'input ricevuto.
| Tag | Descrizione | |
|---|---|---|
| <form> | Definisce un modulo per utente input | |
| <input> | Definisce un campo input | |
| <textarea> | Definisce un'area text (un controllo di input multi-line text) | |
| <label> | Definisce un'etichetta a un controllo | |
| <fieldset> | Definisce un insieme di campi | |
| <legend> | Definisce una didascalia per un insieme di campi | |
| <select> | Definisce una lista selezionabile (un box a cascata) | |
| <optgroup> | Definisce un gruppo di opzioni | |
| <option> | Definisce un'opzione in un box a cascata | |
| <button> | Definisce una pulsante a spinta | |
| <isindex> | Deprecato. Usa <input> invece |
Con HTML puoi mostrare immagini in un documento.
In HTML, le immagini sono definite con il tag <img>.
Il tag <img> è vuoto, ciò significa che contiene solo attributi e non ha tag di chiusura.
Per mostrare un'immagine in una pagina, hai bisogno di usare l'attributo src. Src sta per "source" (sorgente). Il valore dell'attributo src è l'URL dell'immagine che vuoi mostrare sulla pagina.
La sintassi per definire un'immagine è:
| <img src="url"> |
L'URL punta alla localizzazione quando l'immagine è memorizzata. Un'immagine chiamata "boat.gif" localizzata nella directory "images" su "www.w3schools.com" ha l'URL: http://www.w3schools.com/images/boat.gif.
Il browser mette l'immagine dove il tag immagine sta nel documento. Se metti un tag immagine tra due paragrafi, il browser mostra il primo paragrafo, poi l'immagine, e poi il secondo paragrafo.
L'attributo alt è usato per definire un "testo abbinato" a un'immagine. Il valore dell'attributo alt è un testo definito dall'autore:
| <img src="boat.gif" alt="Big Boat"> |
L'attributo "alt" racconta al lettore che cosa è scomparso sulla pagina se il browser non può caricare le immagini. Il browser mostrerà quindi il testo abbinato invece dell'immagine. È una buona pratica includere l'attributo "alt" per ciascuna immagine in una pagina, per migliorare la visione e l'utilità del tuo documento per coloro che hanno browser di solo testo.
Se un file HTML contiene dieci immagini - saranno necessari undici file per mostrare la pagina correttamente. Caricare le immagini prende tempo, così il mio miglior consiglio: Usa le immagini con cautela.
| Tag | Descrizione | |
|---|---|---|
| <img> | Definisce un'immagine | |
| <map> | Definisce una cartina, piantina, mappa | |
| <area> | Definisce un'area dentro una cartina |
Un buono sfondo può fare un sito Web veramente grande.
Il tag <body> ha due attributi quando si vuole specificare lo sfondo. Lo sfondo può essere un colore o un'immagine.
L'attributo bgcolor mette un colore di sfondo. Il valore di questo attributo può essere un numero esadecimale, un valore RGB, o il nome di un colore.
| <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> |
Le linee sopra tutto l'insieme dei colori di sfondo sino al nero.
L'attributo background mette un'immagine di sfondo. Il valore di questo attributo è l'URL dell'immagine che vuoi usare. Se l'immagine è più piccola della finestra del browser, l'immagine si ripeterà sino a riempire l'intera finestra del browser.
| <body background="clouds.gif"> <body background="http://www.w3schools.com/clouds.gif"> |
L'URL può essere relativo (come nella prima linea sopra) o assoluto (come nella seconda linea sopra).
Nota: Se vuoi usare un'immagine di sfondo, devi tenere in mente:
Il bgcolor, il background, e l'attributo di testo nel tag <body> sono deprecati nell'ultima versione di HTML (HTML 4 e XHTML). Il World Wide Web Consortium (W3C) ha rimosso questi attributi dai suoi consigli. Nelle future versioni di HTML, i fogli stile (CSS) saranno usati per definire il layout e mostrare le proprietà degli elementi HTML.
Molti dei più visitati siti web usano immagini di sfondo.
I più usati colori di sfondo sono: bianco, nero e grigio.
Ovunque sul Web troverai pagine che sono formattate come pagine di quotidiani usando le colonne HTML.
| Una pratica veramente comune con HTML, è usare le tabelle HTML per formattare l'impostazione di una pagina HTML. Una parte di queste pagine è formattata con due colonne, come una pagina di quotidiano. Come puoi vedere, c'è una colonna a sinistra e una a destra. Questo testo è posizionato nella colonna a sinistra. |
Una <table> HTML è usata per dividere una parte di queste pagine Web in due colonne. Il trucco è usare una tabella senza bordi, e forse una piccola cella riempitiva extra. Non ha importanza quanto testo aggiungi alla pagina, resterà dentro i bordi della colonna. |
| Una pratica veramente comune con HTML, è usare le tabelle HTML per formattare l'impostazione di una pagina HTML. Una parte di queste pagine è formattata con due colonne, come una pagina di quotidiano. Come puoi vedere, c'è una colonna a sinistra e una a destra. |
Una <table> HTML è usata per dividere una parte di queste pagine Web in due colonne. Questo testo è posizionato nella colonna a destra. Il trucco è usare una tabella senza bordi, e forse una piccola cella riempitiva extra. Non ha importanza quanto testo aggiungi alla pagina, resterà dentro i bordi della colonna. |
Il tag <font> in HTML è deprecato. Si suppone venga rimosso in una versione futura di HTML.
Anche se molte persone lo usassero, dovresti provare a evitarlo, e usare invece gli stili.
Con un codice HTML come questo, puoi specificare sia la misura che il carattere di uscita del browser:
| <p> <font size="2" face="Verdana"> This is a paragraph. </font> </p> <p> <font size="3" face="Times"> This is another paragraph. </font> </p> |
| Attributi | Esempio | Scopo | ||
|---|---|---|---|---|
| size="number" | size="2" | Definire la misura della font | ||
| size="+number" | size="+1" | Aumentare la misura della font | ||
| size="-number" | size="-1" | Diminuire la misura della font | ||
| face="face-name" | face="Times" | Definire il nome della font | ||
| color="color-value" | color="#eeff00" | Definire il colore della font | ||
| color="color-name" | color="red" | Definire il colore della font |
Il tag <font> è deprecato nelle più recenti versioni di HTML (HTML 4 e XHTML).
Il World Wide Web Consortium (W3C) ha rimosso il tag <font> dai suoi consigli. Nelle versioni future di HTML, saranno usati i fogli stile (CSS) per definire l'impostazione e mostrare le proprietà degli elementi HTML.
L'HTML originale non ha mai avuto intenzione di contenere i tag per formattare un documento. I tag HTML avevano intenzione di definire il contenuto del documento come:
<p>This is a paragraph</p>
<ul>This is an unordered list</ul>.
Quando i tag come <font> e gli attributi dei colori sono stati aggiunti allo specifico HTML 3.2, è cominciato l'incubo degli sviluppatori. Lo sviluppo di grandi siti web dove informazioni di font e colore si sono aggiunti a ogni singola pagina Web, è diventato un processo lungo, caro e eccessivamente doloroso.
Con HTML 4.0 tutta la formattazione può essere spostata fuori del documento HTML e messa in un foglio stile separato. Perchè HTML 4.0 separa la presentazione del documento dalla sua struttura, abbiamo ciò di cui abbiamo sempre avuto bisogno: totale controllo della presentazione senza pasticciare il contenuto del documento.
Smetti di usare gli attributi di stile nei tag HTML.
Il completo HTML Tag Reference indica i tag e gli attributi deprecati da HTML 4.0. Inoltre include più esempi con codice sorgente completo.
Inoltre dai un'occhiata alla nostra sezione CSS Section e comincia una nuova vita da sviluppatore.
XHTML è la prossima generazione di HTML. Devi cominciare a prepararti ora. La cosa più importante che puoi fare è cominciare a scrivere un HTML 4.01 validato. Inoltre comincia a scrivere i tuoi tag in minuscolo. Chiudi sempre gli elementi tag. Non finire mai un paragrafo senza </p>.
Nota: L'HTML 4.01 ufficiale consiglia l'uso dei tag in minuscolo.
Un documento HTML è validato contro una Document Type Definition (DTD). Prima un file HTML può essere validato correttamente, una corretta DTD deve essere aggiunta come la prima linea del file.
La DTd Corretta in HTML 4.01 include elementi e attributi che non sono stati deprecati o non appaiono in frameset:
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
La DTD di Transizione in HTML 4.01 include tutto ciò che c'è nella DTD corretta più gli elementi e gli attributi deprecati:
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
La DTD Frameset in HTML 4.01 include tutto ciò che c'è nella DTD di transizione più i frame:
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
Con HTML 4.0 tutte le formattazioni possono essere messe fuori del documento HTML in un foglio stile separato.
Quando un browser legge un foglio stile, formatterà il documento secondo esso. Ci sono tre modi di inserire un foglio stile:
Un Foglio Stile Esterno è ideale quando lo stile è applicato a molte pagine. Con un Foglio Stile Esterno, puoi cambiare il look di un intero sito Web cambiando un solo file. Ciascuna pagina si collega al foglio stile usando il tag <link>. Il tag <link> va dentro la sezione di testa (head).
| <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
Un Foglio Stile Interno deve essere usato quando ogni singolo documento ha un unico stile. Definisci gli Stili Interni nella sezione di testa (head) con il tag <style>.
| <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> |
Lo Stile In Linea deve essere usato quando un unico stile deve essere applicato a un singolo evento di un elemento.
Usando lo Stile In Linea usa l'attributo dello stile nel tag pertinente. L'attributo dello stile può contenere qualche proprietà CSS. L'esempio mostra come cambiare il colore e il margine sinistro di un paragrafo:
| <p style="color: red; margin-left: 20px"> This is a paragraph </p> |
| Tag | Descrizione | |
|---|---|---|
| <style> | Definisce una definizione di stile | |
| <link> | Definisce un riferimento a una sorgente | |
| <div> | Definisce una sezione in un documento | |
| <span> | Definisce una sezione in un documento | |
| <font> | Deprecato. Usa styles invece | |
| <basefont> | Deprecato. Usa styles invece | |
| <center> | Deprecato. Usa styles invece |
L'elemento Head contiene informazioni generali, chiamate anche meta-informazioni, su di un documento. Meta significa "informazione su".
Si può dire che i meta-data significano informazioni di dati, o le meta-informazioni significano informazione sull'informazione.
Gli elementi dentro l'elemento head non devono essere mostrati dal browser.
Secondo lo standard HTML, solo alcuni tag sono legali nella sezione head. Questi sono: <base>, <link>, <meta>, <title>, <style>, e <script>.
Guarda la seguente costruzione illegale:
| <head> <p>This is some text</p> </head> |
In questo caso il browser ha due opzioni:
Se metti un elemento HTML come <h1> o <p> in un elemento head come questo, la maggior parte dei browser lo mostrerà, anche se è illegale.
I browser devono lasciar perdere errori come questo? Noi non lo crediamo giusto. Altri sì.
| Tag | Descrizione | |
|---|---|---|
| <head> | Definisce informazioni sul documento | |
| <title> | Definisce il titolo del documento | |
| <base> | Definisce un'URL di base per tutti i link di una pagina | |
| <link> | Definisce un riferimento di risorsa | |
| <meta> | Definisce meta informationi | |
| Tag | Descrizione | |
|---|---|---|
| <!DOCTYPE> | Definisce il tipo di documento. Questo tag va prima del tag di partenza <html> |
Come abbiamo spiegato nel capitolo precedente, l'elemento head contiene informazioni generali (meta-informazioni) su un documento.
Anche HTML include un elemento meta che va dentro l'elemento head. Lo scopo dell'elemento meta è fornire meta-informazioni sul documento.
Molto spesso l'elemento meta è usato per fornire informazioni rilevanti per i browser o per i motori di ricerca in quanto descrive il contenuto del tuo documento.
Nota: W3C dichiara che "Alcuni utenti sostengono l'uso di META per fare refresh alla pagina corrente dopo uno specifico numero di secondi, con l'opzione di sostituirlo da un differente URL. Gli autori non devono usare questa tecnica per inoltrare gli utenti a pagine differenti, che rende la pagina inaccessibile a alcuni utenti. Invece, l'inoltro automatico della pagina deve essere fatto usando le direttive del server" in http://www.w3.org/TR/html4/struct/global.html#adef-http-equiv.
Alcuni motori di ricerca sul WWW useranno il nome e gli attributi contenuti del tag meta per indicizzare le tue pagine.
| Questo elemento meta definisce una descrizione della tua pagina: <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"> |
| Questo elemento meta definisce parole chiave per la tua pagina: <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> |
L'intenzione del nome e degli attributi contenuti è descrivere il contenuto di una pagina.
Comunque, troppi webmaster usano tag meta per lo spam, come replicare parole chiave per dare alle pagine un'alta classificazione, alcuni motori di ricerca hanno stoppato completamente il loro uso.
Talvolta vedrai attributi meta sconosciuti come questo:
| <meta name="security" content="low"> |
Devi accettare che è qualcosa di unico per il sito e per l'autore del sito, e che probabilmente non ha alcuna importanza per te.
Quando clicchi su un link di un documento HTML come questo: Last Page, un tag di fondo <a> punta a un luogo (un indirizzo) sul Web con un valore di attributo href come questo: <a href="lastpage.htm">Last Page</a>.
Il link Last Page nell'esempio è un link che è relativo al sito Web che stai navigando, e il tuo browser costruirà un indirizzo Web tipo http://www.w3schools.com/html/lastpage.htm per accedere alla pagina.
Qualcuno dice che un Uniform Resource Locator (URL) è usato per indirizzare un documento (o altri dati) sul World Wide Web. Un indirizzo Web esteso come questo: http://www.w3schools.com/html/lastpage.htm segue queste regole di sintassi:
scheme://host.domain:port/path/filename
Lo scheme (schema) definisce il tipo di servizio Internet. Il tipo più comune è http.
Il domain (dominio) definisce il nome del dominio Internet come w3schools.com.
L' host (padrone) definisce l'host del dominio. Se omesso, l'host predefinito di http è www.
Il :port (portale) definisce il numero del portale all'host. Il numero del portale è normalmente omesso. Il numero del portale predefinito per http è 80.
Il path (percorso) definisce un percorso (una sottodirectory) al server. Se il percorso è omesso, la risorsa (il documento) deve essere localizzato nella directory principale del sito Web.
Il filename (nome del file) definisce il nome del documento. Il filename di default potrebbe essere default.asp, o index.html o qualcos’altro dipendente dalla posizione del server Web.
Alcuni esempi dei più comuni schemi possono essere trovati sotto:
| Schemi | Accesso | |
|---|---|---|
| file | a un file sul tuo PC locale | |
| ftp | a un file su un server FTP | |
| http | a un file su un Server World Wide Web | |
| gopher | a un file su un server Gopher | |
| news | a una newsgroup Usenet | |
| telnet | a una connessione Telnet | |
| WAIS | a un file su un server WAIS |
HTML:
<a href="news:alt.html">HTML Newsgroup</a>
crea un link a una newsgroup come questa HTML Newsgroup.
HTML:
<a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a>
crea un link per scaricare un file come questo: Download WinZip.
(Il link non lavora. Non provare. È solo un esempio. W3Schools non ha veramente una directory ftp.)
Il seguente codice HTML:
<a href="mailto:someone@w3schools.com">someone@w3schools.com</a>
crea un link alla tua e-mail se è questa:
someone@w3schools.com
Aggiungi script alle tue pagine HTML per renderle più dinamiche e interattive.
Uno script in HTML è definito con il tag <script>. Nota che dovrai usare l'attributo type per specificare il linguaggio.
| <html> <head> </head> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html> |
Lo script sopra produrrà questo output:
Hello World!
Un browser che non riconosce per niente il tag <script>, mostrerà il contenuto del tag <script> come testo della pagina. Per prevenire il browser dal farlo, devi nascondere lo script in tag di commento. Un vecchio browser (che non riconosce il tag <script>) ignorerà il commento e non scriverà il contenuto del tag sulla pagina, mentre un browser nuovo capirà che lo script deve essere eseguito, anche se è circondato da tag di commento.
| JavaScript: <script type="text/javascript"> <!-- document.write("Hello World!") //--> </script> VBScript: <script type="text/vbscript"> <!— document.write("Hello World!") '--> </script> |
In aggiunta per nascondere script in un commento, puoi anche aggiungere un tag <noscript>.
Il tag <noscript> è usato per definire un testo alternativo se script non viene eseguito. Questo tag è usato per browser che riconoscono il tag <script>, ma non supportano lo script interno, così questo browser invece mostrerà il testo dentro il tag <noscript>. Comunque, se un browser supporta lo script dentro il tag <script> ignorerà il tag <noscript>.
| JavaScript: <script type="text/javascript"> <!— document.write("Hello World!") //--> </script> <noscript>Your browser does not support JavaScript!</noscript> VBScript: <script type="text/vbscript"> <!— document.write("Hello World!") '--> </script> <noscript>Your browser does not support VBScript! </noscript> |
| Tag | Descrizione | |
|---|---|---|
| <script> | Definisce uno script | |
| <noscript> | Definisce un testo alternativo se lo script non viene eseguito | |
| <object> | Definisce un oggetto incastrato | |
| <param> | Definisce posizioni di esecuzioni (parametri) per un oggetto | |
| <applet> | Deprecato. Usa <object> invece |
PWS gira in ogni computer Windows in un server Web. PWS è facile da installare e ideale per sviluppare e testare le applicazioni Web. PWS è stato ottimizzato per l'uso nelle postazioni di lavoro, ma ha tutti i requisiti di un server Web. Gira anche Active Server Pages (ASP) proprio come il suo più grande fratello IIS.
Nota: Microsoft Windows XP Home Edition non permette al tuo computer di girare in PWS!
Il server Web IIS incorporato in Windows 2000, rende facile costruire grosse applicazioni per il Web. Entrambi PWS e IIS includono ASP, un server standard che affianca lo script che puoi usare per creare applicazioni Web dinamiche e interattive. IIS è disponibile anche per Windows NT.