Autore: Prof. Francesco Esposito
QUANDO, DOVE E DA CHI E’ STATO INVENTATO L’HTML È stato sviluppato verso la fine degli anni ottanta da Tim Berners-Lee al CERN (Conseil Européen pour la Recherche Nucléaire) di Ginevra assieme al noto protocollo HTTP che supporta invece il trasferimento di documenti in tale formato. Verso il 1994 ha avuto una forte diffusione in seguito ai primi utilizzi commerciali del web. Autore: Prof. Francesco Esposito
linguaggio a marcatori per ipertesti COSA SIGNIFICA E CHE COSA E’ L’HTML L'HTML è un linguaggio di pubblico dominio la cui sintassi è stabilita dal World Wide Web Consortium (W3C). Il W3C è un'organizzazione non governativa internazionale che ha come scopo quello di sviluppare tutte le potenzialità del World Wide Web HyperText Markup Language traduzione letterale linguaggio a marcatori per ipertesti In altre parole … è il linguaggio di markup solitamente usato per la formattazione di documenti ipertestuali disponibili nel World Wide Web sotto forma di pagine web. Autore: Prof. Francesco Esposito
per elaborarli, interpretando il codice sorgente, Il contenuto delle pagine web solitamente consiste dunque di un documento HTML e dei file ad esso correlati che un web browser scarica da uno o più web server per elaborarli, interpretando il codice sorgente, al fine di generare la visualizzazione, sullo schermo del computer-client, della pagina desiderata, grazie al motore di rendering del browser stesso. Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito L’evoluzione di HTML Nel corso degli anni, seguendo lo sviluppo di Internet, l'HTML ha subito molte revisioni, ampliamenti e miglioramenti, che sono stati indicati secondo la classica numerazione usata per descrivere le versioni dei software. 1990: NASCITA 1994: HTML 2.0 e nascita del W3C 1997: HTML 3.2 e HTML 4 24/12/1999: HTML 4.01 Gennaio 2000: nascita di XTML (eXtensible HyperText Markup Language - applicazione a HTML di regole e sintassi in stile XML) 2009: HTML 5 Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 1. Elementi e 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> 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 imparare e usare i diversi tag. <b>This text must be bold.</b> <h1>This is a heading</h1> <h2>This is a subheading</h2> Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 1. Elementi e tag 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 ti limiti ad aprire diversi documenti HTML. Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 2. Il primo sito web Creiamo una pagina che dice: "Hurra! Questo è il mio primo sito web." L'HTML è semplice e logico. Il browser legge l'HTML come fai tu: dall'alto al basso e da sinistra a destra. Questo significa che un documento HTML inizia con quello che dovrebbe venire per primo sulla tua pagina e termina con quello che normalmente viene per ultimo. <html> <head> </head> <body> </body> </html> Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 2. Il primo sito web Creiamo una pagina che dice: "Hurra! Questo è il mio primo sito web." <html> <head> <title>Il mio primo sito web</title> </head> <body> <p>Hurra! Questo è il mio primo sito web.</p> </body> </html> Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 2. Il primo sito web Creiamo una pagina che dice: "Hurra! Questo è il mio primo sito web." Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 2. Il primo sito web 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. <p>Is used for paragraphs.</p> <b>Types the text in bold.</b> <h1>Heading</h1> <h2>Subhead</h2> <h3>Sub-subhead</h3> 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. Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 2. Il primo sito web <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> Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 3. Altri elementi. <i>Questo dovrebbe essere corsivo.</i> <small>Questo dovrebbe essere più piccolo.</small> <b><i>Testo in grassetto e in corsivo</i></b> Funziona ma è disordinato <b><i>Testo in grassetto e in corsivo</b></i> Un po' di testo<br /> e un altro po' di testo su un nuova riga <hr /> Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 3. Altri elementi. <ul> <li>Elemento della lista</li> <li>Altro elemento della lista</li> </ul> ul è l'abbreviazione delle parole inglesi "unordered list" (lista non ordinata) e inserisce un simbolo per 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) Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 3. Altri elementi. <ol> <li>Primo elemento della lista</li> <li>Secondo elemento della lista/li> </ol> ol è l'abbreviazione delle parole inglesi "ordered list" (lista ordinata) e numera ogni elemento della lista. Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 3. Altri elementi. <i>Corsivo</i> <small>Testo piccolo</small> <br /> Linea nuova <hr /> Linea orizzontale <ul>Lista</ul> <ol>Lista ordinata</ol> <li>Elemento della lista</li> Sperimentiamo tutti questi nuovi elementi… Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 4. Attributi. Cosa è un attributo? Esempio 1 <h2 style="background-color:#ff0000;">La mia amicizia con l'HTML</h2> Gli attributi vengono scritti sempre all'interno del tag di apertura e sono seguito da un segno di uguaglianza e dal dettaglio degli attributi tra apici. Il punto e virgola dopo gli attributi serve a separare i diversi comandi di stile. Con l'attributo di stile puoi aggiungere un layout al tuo sito web. Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 4. Attributi. Esempio 2 <html> <head> </head> <body style="background-color:#ff0000;"> </body> </html> Nell'esempio sopra abbiamo chiesto un colore di sfondo con il codice "#ff0000". Questo è il codice del colore rosso in una notazione detta numeri esadecimali. Ogni colore è individuato dal suo proprio numero esadecimale. Vediamo un esempio: White: #ffffff Black: #000000 (zero) Red: #ff0000 Blue: #0000ff Green: #00ff00 Yellow: #ffff00 Per la maggior parte dei colori puoi usare anche il nome inglese (white, black, red, blue, green e yellow). <body style="background-color: red;"> Autore: Prof. Francesco Esposito
Quali elementi possono utilizzare gli attributi? HTML 4. Attributi. Quali elementi possono utilizzare gli attributi? I diversi attributi possono essere applicati alla maggior parte degli elementi. Spesso userai gli attributi nel tag body, mentre raramente li userai per esempio nel tag br in quanto una linea vuota normalmente è una linea vuota senza necessità di altri parametri. Proprio come esistono molti elementi diversi, esistono anche molti attributi diversi. Alcuni attributi sono specifici per un elemento particolare, mentre altri possono essere usati per elementi diversi. Viceversa: alcuni elementi possono contenere solo un tipo di attributo mentre altri ne possono contenere molti. Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 5. Link. Esempio <a href="http://www.html.net/">Questo è il link a HTML.net</a> Questo è il link a HTML.net L'elemento a è l'abbreviazione della parola inglese "anchor" (ancora), mentre l'attributo href sta per "hypertext reference" (cioè, riferimento ipertestuale), che specifica dove deve portare il link - tipicamente un indirizzo su Internet o un nome di un file. Nell'esempio sopra l'attributo href ha il valore "http://www.html.net", che è l'indirizzo completo di HTML.net e viene chiamato URL (Uniform Resource Locator). Nota che "http://" deve essere sempre inclusa in una URL. La frase "Questo è il link a HTML.net" è il testo che viene mostrato sul browser come link. Ricordati di chiudere l'elemento con il tag di chiusura </a>. Autore: Prof. Francesco Esposito
Link a pagine interne al sito HTML 5. Link. Link a pagine interne al sito Per andare alla pagina «pagina2.htm» del nostro sito <a href="pagina2.htm">Fai click qui per andare alla pagina 2</a> Se la pagina 2 è posizionata in una sottocartella (chiamata "sottocartella"), allora il link dovrebbe apparire come questo: <a href="sottocartella/pagina2.htm">Fai click qui per andare alla pagina 2</a> Il contrario, un link dalla pagina 2 (nella sottocartella) alla pagina 1, si vedrà come segue: <a href="../pagina1.htm">Un link alla pagina 1</a> Autore: Prof. Francesco Esposito
Link all’interno di una pagina HTML 5. Link. Link all’interno di una pagina <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> </body> </html> Tutto quello che serve è utilizzare un utilissimo attributo chiamato id (identification, identificativo) e il simbolo "#". Usa l'attributo id per marcare l'elemento che vuoi linkare. Autore: Prof. Francesco Esposito
Posso fare un link a qualcos'altro? HTML 5. Link. Posso fare un link a qualcos'altro? <a href="mailto:nobody@html.net">Manda una e-mail a nobody a HTML.net</a> Manda una e-mail a nobody a HTML.net 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. <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". Autore: Prof. Francesco Esposito
<img src="tim.jpg" alt="Tim" /> HTML 6. Immagini <img src="tim.jpg" alt="Tim" /> INSERIRE UNA IMMAGINE Tutto quello che devi fare è per prima cosa dire al tuo browser che vuoi inserire un'immagine (img) e dove trovarla (src, sta per "source", cioè sorgente). Nota come l'elemento img venga aperto e chiuso nello stesso tag. Come il tag <br />, non è legato a nessun pezzo di testo. «tim.jpg» è il nome del file immagine che vuoi inserire nella tua pagina. ".jpg" è il tipo di file dell'immagine. Proprio come l'estensione ".htm" mostra che quel file è un documento HTML,".jpg" dice al browser che quel file è un'immagine. Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 6. Immagini 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) Le immagini GIF generalmente sono migliori per i grafici e i disegni, mentre le immagini JPEG sono migliori per le fotografie. Questo per due ragioni principali: primo, le immagini GIF possono avere solo 256 colori, mentre le immagini JPEG sono formate da milioni di colori e secondo, il formato GIF è migliore per comprimere immagini semplici, mentre il formato JPEG è stato ottimizzato per immagini più complesse. Migliore è la compressione, più piccola sarà la dimensione del file immagine e più veloce il caricamento sulla tua pagina. Come probabilmente sai già dall'esperienza, le pagine "pesanti" senza motivazione possono annoiare pesantemente un visitatore. In passato i formati GIF e JPEG sono stati i due formati immagine dominanti. Negli ultimi anni il formato PNG è diventato sempre più popolare (soprattutto a spese del formato GIF). Il formato PNG è fatto in modo da avere il meglio da entrambi i formati JPEG e GIF: milioni di colori e una compressione efficace. Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 6. 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 è necessario comprare programmi costosi per terminare questo tutorial. Per il momento puoi scaricarti un eccellente programma per l'editing di immagini, IfranView , detto freeware, cioè gratuito. O puoi prendere 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". Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 6. Immagini Esempio 2: <img src="images/logo.png" /> Esempio 3: <img src="http://www.html.net/logo.png" /> Secondo, le immagini posso avere collegamenti ipertestuali (link): Esempio 4: <a href="http://www.html.net"> <img src="logo.png" /></a> Devi sempre usare l'attributo src, che dice al browser dove sono posizionate le immagini. L'attributo alt viene usato per fornire una descrizione alternativa di una immagine nel caso in cui, per qualche ragione, l'immagine non viene visualizzata all'utente. Questo attributo è particolarmente utile per utenti con disabilità visive, o se la pagina si carica molto lentamente. Pertanto, usa sempre l'attributo alt: Esempio 5: <img src="logo.gif" alt="HTML.net logo" /> Alcuni browser mostrano il testo dell'attributo alt in una piccola box di pop-up quando si posiziona il cursore del mouse sopra l'immagine. Non dovrebbe essere usato per creare messaggi speciali di pop-up dato che i non-vedenti sentiranno il messaggio senza sapere niente dell'immagine. Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 6. Immagini L'attributo title può essere usato per aggiungere informazioni all'immagine: Esempio 6: <img src="logo.gif" title="Impara l'HTML" /> Senza cliccare, prova a posizionare il cursore sopra l'immagine, vedrai il testo "Impara l'HTML" apparire in una box di pop-up. Altri due attributi importanti sono width e height: Esempio 7: <img src="logo.png" width="141" height="32" /> Gli attributi width e height possono essere usati per impostare l'altezza e la larghezza di una immagine. Per impostare l'altezza e la larghezza viene usato un valore in pixel. 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" /> Autore: Prof. Francesco Esposito
Autore: Prof. Francesco Esposito HTML 6. Immagini Comunque vale la pena ricordare che la dimensione originale dell'immagine, in kilobyte, rimarrà la stessa. Quindi ci vorrà lo stesso tempo di prima per caricare l'immagine, anche se questa volta sullo schermo appare più piccola. Quindi, non dovresti mai diminuire la dimensione dell'immagine usando gli attributi width e height. Dovresti invece sempre ridimensionare l'immagine direttamente da un programma per l'editing di immagini, in modo da rendere le tue pagine più leggere e veloci. Detto questo è ancora una buona idea usare gli attributi width e height perchè il browser sarà in grado di sapere lo spazio che servirà all'immagine nella pagina finale prima che sia cmpletamente scaricata. Questo permette al tuo browser di predisporre esattamente la pagina nella maniera più veloce Autore: Prof. Francesco Esposito
<P> <H1> <B> <I> …….. STILE DI <P> STILE DI <H1> STILE DI <B> STILE DI <I> …….. link FILE HTML FILE CSS