Introduzione all’HTML Esercizi Introduzione all’HTML
Il WWW Il World Wide Web: una “rete” di pagine connesse tra loro e distribuite su diverse macchine Il server Web contiene le pagine Web da visualizzare Il client (il browser Web) visualizza le pagine Web Rete Client Server Web www.elet.polimi.it www.elet.polimi.it/docenti.htm
L’HTML e le pagine Web Il linguaggio HTML (Hyper-Text Markup Language) serve per definire l’impaginazione e l’aspetto grafico delle pagine Web Non è un linguaggio di programmazione! E’ un linguaggio di impaginazione detto “a marcatura” Una pagina HTML è un file composto da puro testo Lo standard supporta diverse codifiche La più comune: ISO 8859-1 (è una variante ASCII) Elementi quali immagini, suoni, filmati, ecc. sono contenuti in file separati Pagina Web: pagina HTML + ulteriori file (immagini, suoni, ecc.)
I tag. Il processo di rendering Si usano particolari comandi (detti tag), inseriti nel testo, per indicare al browser come deve impaginare e visualizzate la pagina Web nel suo insieme Il browser interpreta i tag, formatta la pagina Web e ne genera la rappresentazione grafica (il rendering) HTML Il motore di rendering del browser Immag. audio, ecc. La finestra del browser
La mia prima pagina HTML <head> <title>Questo è un esempio</title> </head> <body> Ciao! Questo è un esempio di pagina HTML </body> </html> Scrivete il file con un editor di testo Salvate il file (con estensione .html o .htm) Aprite il file con un browser
La mia prima pagina HTML Titolo Nome del file Non va a capo!
La sintassi dei tag Quasi tutti i tag sono composti da un tag di apertura e da un tag di chiusura: <nome_tag>testo sul quale il tag agisce</nome_tag> Es.: <title>Questo è un esempio</title> Alcuni tag non hanno la corrispondente chiusura: <nome_tag> Es.: <br> Per molti tag è possibile specificare degli attributi: <nome_tag nome_attributo="valore_attributo"> Es.: <body bgcolor="red"> … </body>
Formattazione “logica” L’idea iniziale dell’HTML: esprimere il significato “logico” del testo, non la rappresentazione grafica La traduzione verso una certa rappresentazione grafica è lasciata interamente al browser Alcuni tag: Paragrafo: <p> Evidenziazione di testo: <strong>, <em> Titoli: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Formato “indirizzo”: <address> Per alcuni di questi tag è possibile specificare degli attributi.
Formattazione “logica” <html> <head> <title>Questo è un esempio</title> </head> <body> <h1>Titolo principale</h1> <h2>Titolo secondario</h2> <p>Testo all'interno <em>di un</em> <strong>paragrafo</strong></p> <p>Altro paragrafo</p> Testo al di fuori di un paragrafo <p>indirizzo: <address>Via Ponzio 34/5, Milano</address></p> </body> </html>
Formattazione “logica”
Formattazione “fisica” Specifica la rappresentazione grafica Alcuni tag: Neretto: <b> Italico: <i> Apice: <sup> Pedice: <sub> Barrato: <del> Sottolineato: <u> Forza il ritorno a capo: <br> Specifica il carattere tipografico: <font> Gli attributi permettono di variare l’impaginazione standard: <h1 align="center">
Formattazione “fisica” <html> <head> <title>Questo è un esempio</title> </head> <body bgcolor="yellow"> <p>Normale, <b>neretto</b>, <i>italico</i>, <sup>apice</sup>, <sub>pedice</sub>, <del>barrato</del>, <u>sottolineato</u></p> <p>Inizio paragrafo<br>va a capo</p> <p align="center"> <font face="Courier New" size="5" color="red">Parolona!</font> </p> </body> </html>
Formattazione “fisica”
Elenchi I seguenti tag servono per specificare vari tipi di elenchi: Elenco puntato: <ul> Varianti dell’elenco puntato: <ul type="square">, <ul type="disc">, <ul type="circle"> Elenco numerato: <ol> Varianto dell’elenco numerato: <ol type="a">, <ol type="A"> <ol type="i">, <ol type="I"> Ogni voce dell’elenco è racchiusa da <li>
Elenchi <html> <head> <title>Questo è un esempio</title> </head> <body> <ul> <li>Primo elemento</li> <li>Secondo elemento</li> </ul> <ul type="square">
Elenchi <ol> <li>Primo elemento</li> Elemento scorretto <li>Secondo elemento</li> </ol> <ol type="i"> <ol type="A"> </body> </html>
Elenchi
Le tabelle Il testo (e in generale qualsiasi elemento grafico) può essere formattato sotto forma di tabella: Tabella: <table> Titolo: <th> Riga: <tr> Colonna: <td> E’ possibile specificare alcuni attributi: spessore del bordo, distanza tra le celle, margine all’interno delle celle.
Le tabelle <html> <head> <title>Questo è un esempio</title> </head> <body> <table border="5" cellspacing="10" cellpadding="20"> <th>Colonna1</th><th>Colonna2</th> <tr><td>Uno</td><td>Due</td></tr> <tr><td>Tre</td><td>Quattro</td></tr> </table> </body> </html>
Le tabelle
I link Servono per creare connessioni navigabili Link interni alla stessa pagina Link tra pagine Link: <a href="indirizzo">qualsiasi cosa</a> Facendo click su qualsiasi cosa, il browser si sposta a indirizzo Indirizzo può essere una URL o un’àncora o una combinazione delle due Àncora: <a name="nome"> Definisce una etichetta alla quale un link può puntare Di solito è usata per far spostare il browser in un altro punto, all’interno della stessa pagina che contiene il link
I link <html> <head> <title>Questo è un esempio</title> </head> <body> <p><a href="http://www.polimi.it">Vai al Politecnico di Milano</a></p> <p><a href="http://www.elet.polimi.it/ corsi/infoA/01_intro_corso_InfA.pdf"> Introduzione InfoA (file PDF)</a></p> <p><a href="#fine">Vai in fondo alla pagina</a></p> <br>bla bla<br><br><br><br><br><br><br><br> <a name="fine"><p>Fine della pagina</p> </body> </html>
I link
Le immagini E’ possibile includere immagini: <img src="indirizzo e nomefile immagine"> Alcuni attributi permettono di modificare le dimensioni dell’immagine: Es.: <img src="a.gif" height="50" width="70"> Es.: <img src="a.gif" height="50%" width="5%">
Le immagini <html> <head> <title>Questo è un esempio</title> </head> <body> <p>Un po' di testo... e un'immagine</p> <p align="center"> <img src="sosta.jpg"> <br> Un buon posto per parcheggiare!</p> </body> </html>
Le immagini
Caratteri speciali Per inserire caratteri che non si trovano sulla tastiera, per es. ¥, Ç, Ø, ¾,… Per “mascherare” i caratteri < e > Voglio far comparire i caratteri “<br>” nella pagina La sintassi: &nome_carattere; < < > > ¥ ¥ e tanti, tanti altri…
Mettendo insieme il tutto… <html> <head> <title>Questo è un esempio</title> </head> <body> <table border="1" align="center" bgcolor="yellow"> <tr> <td> <a href="sosta.jpg"> <img src="sosta_mini.jpg"></a> </td> <p align="center">Parcheggio</p> <p><font color="red">← fai click</font></p> </tr>
Mettendo insieme il tutto… <tr align="right"> <td> <p align="center">Divieto</p> <h1>fai click →</h1> </td> <a href="divieto.jpg"> <img src="divieto_mini.jpg"></a> </tr> </table> <p>Il tag <br> forza il ritorno a capo</p> </body> </html>
Mettendo insieme il tutto…
Il Mio Sito <html> <head> <title>Il Mio Primo Sito!!!</title> </head> <body> <h1>La mia home page</h1> <p><a href="prova.html">Formattazione "logica"</a></p> <p><a href="prova2.html">Formattazione "fisica"</a></p> <p><a href="prova3.html">Elenchi</a></p> <p><a href="prova4.html">Tabelle</a></p> <p><a href="prova5.html">Link</a></p> <p><a href="prova6.html">Immagini</a></p> <p><a href="prova7.html">Complesso</a></p> </body> </html>
Il Mio Sito Creiamo la cartella IlMioSito e copiamo tutti i file HTML e le immagini index.html è, per convenzione, il nome del file che contiene la home page Apriamo index.html con un browser…
Il Mio Sito
Riferimenti I “padri” del WWW: http://www.w3c.org Tutorial sull’HTML: http://www.w3.org/MarkUp/Guide/Overview.html http://www.w3.org/MarkUp/Guide/Advanced.html http://www.w3.org/MarkUp/Guide/Style.html http://www.tizag.com/htmlT http://www.w3schools.com/html Manuale sull’HTML, in PDF: http://cat.xula.edu/tutorials/html/tutorial/html_tutorial.pdf Manuale di riferimento per i tag HTML http://msdn.microsoft.com/workshop/author/html/reference/elements.asp Tabella caratteri speciali: http://www.cs.tut.fi/~jkorpela/html/guide/entities.html