html5-img
1 / 34

Esercizi

Esercizi. Introduzione all’HTML. www.elet.polimi.it. Rete. Client. www.elet.polimi.it/docenti.htm. Server Web. 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

avery
Download Presentation

Esercizi

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Esercizi Introduzione all’HTML

  2. www.elet.polimi.it Rete Client www.elet.polimi.it/docenti.htm Server Web 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

  3. 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.)

  4. HTML Immag.audio,ecc. Il motore di rendering del browser La finestra del browser 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 (ilrendering)

  5. La mia prima pagina HTML <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

  6. Titolo Nome del file La mia prima pagina HTML Non va a capo!

  7. 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>

  8. 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.

  9. 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>

  10. Formattazione “logica”

  11. 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">

  12. 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>

  13. Formattazione “fisica”

  14. 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>

  15. Elenchi <html> <head> <title>Questo è un esempio</title> </head> <body> <ul> <li>Primo elemento</li> <li>Secondo elemento</li> </ul> <ul type="square"> <li>Primo elemento</li> <li>Secondo elemento</li> </ul>

  16. Elenchi <ol> <li>Primo elemento</li> Elemento scorretto <li>Secondo elemento</li> </ol> <ol type="i"> <li>Primo elemento</li> <li>Secondo elemento</li> </ol> <ol type="A"> <li>Primo elemento</li> <li>Secondo elemento</li> </ol> </body> </html>

  17. Elenchi

  18. 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.

  19. 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>

  20. Le tabelle

  21. 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

  22. 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>

  23. I link

  24. 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%">

  25. 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>

  26. Le immagini

  27. 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; • &lt; <&gt; >&yen; ¥e tanti, tanti altri…

  28. 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> <td> <p align="center">Parcheggio</p> <p><font color="red">&larr; fai click</font></p> </td> </tr>

  29. Mettendo insieme il tutto… <tr align="right"> <td> <p align="center">Divieto</p> <h1>fai click &rarr;</h1> </td> <td> <a href="divieto.jpg"> <img src="divieto_mini.jpg"></a> </td> </tr> </table> <p>Il tag <br> forza il ritorno a capo</p> <p>Il tag &lt;br&gt; forza il ritorno a capo</p> </body> </html>

  30. Mettendo insieme il tutto…

  31. 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>

  32. 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…

  33. Il Mio Sito

  34. 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

More Related