Politecnico di Milano Esercizi Introduzione allHTML.

PolitecnicoPolitecnicodi Milanodi Milano

EserciziEsercizi

Introduzione all’HTMLIntroduzione all’HTML

- - 22 - -

Il WWWIl WWW

Il World Wide Web: una “rete” di pagine connesse tra loro e distribuite su diverse macchineIl server Web contiene le pagine Web da visualizzareIl client (il browser Web) visualizza le pagine Web

Rete

ClientServer Web

www.elet.polimi.it

www.elet.polimi.it/docenti.htm

- - 33 - -

L’HTML e le pagine WebL’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 testoLo standard supporta diverse codificheLa 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.)

- - 44 - -

I tag. Il processo di renderingI 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 insiemeIl 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

- - 55 - -

La mia prima pagina HTMLLa 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 testoSalvate il file (con estensione .html o .htm)Aprite il file con un browser

- - 66 - -

La mia prima pagina HTMLLa mia prima pagina HTML

Non va a capo!

Titolo

Nome del file

- - 77 - -

La sintassi dei tagLa 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>

- - 88 - -

Formattazione “logica”Formattazione “logica”

L’idea iniziale dell’HTML: esprimere il significato “logico” del testo, non la rappresentazione graficaLa traduzione verso una certa rappresentazione grafica è lasciata interamente al browserAlcuni 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.

- - 99 - -


<html><head>


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

- - 1010 - -


- - 1111 - -

Formattazione “fisica”Formattazione “fisica”

Specifica la rappresentazione graficaAlcuni 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">

- - 1212 - -


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

- - 1313 - -


- - 1414 - -

ElenchiElenchi

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>

- - 1515 - -

ElenchiElenchi

<html><head>


<ul><li>Primo elemento</li><li>Secondo elemento</li>

</ul><ul type="square">

<li>Primo elemento</li><li>Secondo elemento</li>

</ul>

- - 1616 - -

ElenchiElenchi

<ol><li>Primo elemento</li>Elemento scorretto<li>Secondo elemento</li>

</ol><ol type="i">


</ol><ol type="A">


</ol></body>

</html>

- - 1717 - -

ElenchiElenchi

- - 1818 - -

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

- - 1919 - -


<html><head>


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

- - 2020 - -


- - 2121 - -

I linkI link

Servono per creare connessioni navigabiliLink interni alla stessa paginaLink tra pagine

Link: <a href="indirizzo">qualsiasi cosa</a>Facendo click su qualsiasi cosa, il browser si sposta a indirizzoIndirizzo può essere una URL o un’àncora o una combinazione delle due

Àncora: <a name="nome">Definisce una etichetta alla quale un link può puntareDi solito è usata per far spostare il browser in un altro punto, all’interno della stessa pagina che contiene il link

- - 2222 - -

I linkI link

<html><head>


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

- - 2323 - -

I linkI link

- - 2424 - -

Le immaginiLe 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%">

- - 2525 - -


<html><head>


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

- - 2626 - -


- - 2727 - -

Caratteri specialiCaratteri 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…

- - 2828 - -

Mettendo insieme il tutto…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">← fai click</font></p> </td> </tr>

- - 2929 - -


<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> </body></html>

- - 3030 - -


- - 3131 - -

Il Mio SitoIl 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>

- - 3232 - -


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 pageApriamo index.html con un browser…

- - 3333 - -


- - 3434 - -

RiferimentiRiferimenti

I “padri” del WWW: http://www.w3c.orgTutorial sull’HTML:

http://www.w3.org/MarkUp/Guide/Overview.htmlhttp://www.w3.org/MarkUp/Guide/Advanced.htmlhttp://www.w3.org/MarkUp/Guide/Style.htmlhttp://www.tizag.com/htmlThttp://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 HTMLhttp://msdn.microsoft.com/workshop/author/html/reference/elements.asp

Tabella caratteri speciali:http://www.cs.tut.fi/~jkorpela/html/guide/entities.html

Politecnico di Milano Esercizi Introduzione allHTML.

Documents

Transcript of Politecnico di Milano Esercizi Introduzione allHTML.