Esercizi. Introduzione all HTML. Il WWW

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Esercizi. Introduzione all HTML. Il WWW"

Uberto Cappelli
8 anni fa
Visualizzazioni

1 Politecnico di Milano 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 1

contiene le pagine Web da visualizzare Il client (il browser Web) visualizza le

2 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 (è 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 Immag. audio, ecc. Il motore di rendering del browser La finestra del browser 2

quali immagini, suoni, filmati, ecc. sono contenuti in file separati Pagina Web: pagina HTML + ulteriori file (immagini, suoni, ecc.) - 3 - I tag.

3 La mia prima pagina HTML <title>questo è un esempio</title> <body> Ciao! Questo è un esempio di pagina 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! - 6-3

testo Salvate il file (con estensione.html o.

4 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"> 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

: <br> Per molti tag è possibile specificare degli attributi: <nome_tag nome_attributo="valore_attributo"> Es.

5 Formattazione logica <title>questo è un esempio</title> <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> Formattazione logica

<strong>paragrafo</strong></p> <p>altro paragrafo</p> Testo al di fuori di un

6 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 <title>questo è un esempio</title> <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>

Formattazione fisica <title>questo è un esempio</title> <body bgcolor="yellow"> <p>normale, <b>neretto</b>, <i>italico</i>, <sup>apice</sup>, <sub>pedice</sub>,

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

type="disc">, <ul type="circle"> Elenco numerato: <ol> Varianto dell elenco numerato: <ol

8 Elenchi <title>questo è un esempio</title> <body> <ul> <li>primo elemento</li> <li>secondo elemento</li> </ul> <ul type="square"> <li>primo elemento</li> <li>secondo elemento</li> </ul> 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>

<li>primo elemento</li> Elemento scorretto <li>secondo elemento</li> </ol> <ol type="i"> <li>primo

Elenchi - 17 - Le tabelle Il testo (e in generale qualsiasi elemento grafico) può essere formattato sotto forma di tabella: Tabella: <table> Titolo:

9 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

Titolo: <th> Riga: <tr> Colonna: <td> E possibile specificare alcuni

10 Le tabelle <title>questo è un esempio</title> <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> Le tabelle

11 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 <title>questo è un esempio</title> <body> <p><a href=" al Politecnico di Milano</a></p> <p><a href=" 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>

browser in un altro punto, all interno della stessa pagina che contiene il link - 21 - I link <title>questo è un esempio</title> <body> <p><a href="http://www.polimi.

I link - 23 - Le immagini E possibile includere immagini: <img

modificare le dimensioni dell immagine: Es.: <img src="a.

12 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%">

13 Le immagini <title>questo è un esempio</title> <body> <p>un po' di testo... e un'immagine</p> <p align="center"> <img src="sosta.jpg"> <br> Un buon posto per parcheggiare!</p> Le immagini

14 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 <title>questo è un esempio</title> <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"> fai click</font></p> </td> </tr>

e tanti, tanti altri - 27 - Mettendo insieme il tutto <title>questo è un esempio</title> <body> <table border="1" align="center"

15 Mettendo insieme il tutto <tr align="right"> <td> <p align="center">divieto</p> <h1>fai click </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 <br> forza il ritorno a capo</p> Mettendo insieme il tutto

16 Il Mio Sito <title>il Mio Primo Sito!!!</title> <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> 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

html">elenchi</a></p> <p><a href="prova4.html">tabelle</a></p> <p><a href="prova5.html">link</a></p> <p><a href="prova6.

Il Mio Sito - 33 - 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.

17 Il Mio Sito Riferimenti I padri del WWW: Tutorial sull HTML: Manuale sull HTML, in PDF: Manuale di riferimento per i tag HTML elements.asp Tabella caratteri speciali:

com/html Manuale sull HTML, in PDF: http://cat.xula.edu/tutorials/html/tutorial/html_tutorial.

Documenti analoghi

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori HTML e XML Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi