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


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


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


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


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


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

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


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


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>


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


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


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>


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


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


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


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


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

Date post:	11-Mar-2020
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

Esercizi - Politecnico di Milanocorsi.dei.polimi.it/infoA/Slide13.pdf1 Politecnico di Milano...

Documents