Esercizi - Politecnico di Milanocorsi.dei.polimi.it/infoA/Slide13.pdf1 Politecnico di Milano...
Transcript of Esercizi - Politecnico di Milanocorsi.dei.polimi.it/infoA/Slide13.pdf1 Politecnico di Milano...
1
PolitecnicoPolitecnicodi Milanodi Milano
EserciziEsercizi
IntroduzioneIntroduzione all’HTMLall’HTML
-- 22 --
Il WWWIl 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
ClientServer Web
www.elet.polimi.it
www.elet.polimi.it/docenti.htm
2
-- 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 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.)
-- 44 --
I I tagtag. Il processo di . Il processo di renderingrendering
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 renderingdel browser
Immag.audio,ecc.
La finestra del browser
3
-- 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 testo
Salvate 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
4
-- 77 --
La sintassi dei La sintassi dei tagtag
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 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.
5
-- 99 --
Formattazione “logica”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>
-- 1010 --
Formattazione “logica”Formattazione “logica”
6
-- 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 --
Formattazione “fisica”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>
7
-- 1313 --
Formattazione “fisica”Formattazione “fisica”
-- 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>
8
-- 1515 --
ElenchiElenchi
<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>
-- 1616 --
ElenchiElenchi
<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>
9
-- 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.
10
-- 1919 --
Le tabelleLe 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>
-- 2020 --
Le tabelleLe tabelle
11
-- 2121 --
I I linklink
Servono per creare connessioni navigabiliLink 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
-- 2222 --
I I linklink
<html><head>
<title>Questo è un esempio </title></head><body>
<p><a href="http://www.polimi.it">Vai alPolitecnico 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 allapagina </a></p>
<br>bla bla <br><br><br><br><br><br><br><br><a name="fine"><p>Fine della pagina </p>
</body></html>
12
-- 2323 --
I I linklink
-- 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%">
13
-- 2525 --
Le immaginiLe 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>
-- 2626 --
Le immaginiLe immagini
14
-- 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>
15
-- 2929 --
Mettendo insieme il tutto…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>
</body></html>
-- 3030 --
Mettendo insieme il tutto…Mettendo insieme il tutto…
16
-- 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 --
Il Mio SitoIl 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.htmlcon un browser…
17
-- 3333 --
Il Mio SitoIl Mio Sito
-- 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