Laboratorio di Informatica 3 Anno Accademico 2019-2020

23  Download (0)

Testo completo

(1)

Laboratorio di Informatica 3

Anno Accademico 2019-2020

Luigi Catuogno

[lcatuogno@unisa.it]

Creare siti web

(2)

Il linguaggio HTML

Parte 2

HTML e CSS

Libri di testo consigliati:

Laura Lemay, Rafe Colburn

HTML & CSS

McGraw-Hill Italia. (2007)

ISBN 978-88-386-4478-8

(3)

HTML 5

Libri di testo consigliati:

Daniele Bochicchio e Stefano Mostarda

HTML5 con CSS e JavaScript

Editore Ulrico Hoepli Milano. (2015)

ISBN 978-88-203-6983-5

Per chi desidera approfondire le innovazioni introdotte con HTML5 e la gestione avanzata dei contenuti multimediali

(4)

Attributi del tag <img>

<img src="URL immagine" attr1="valore" attr2="valore" …>

Attributo

Effetto

border=x

Traccia un bordo largo x pixel intorno

all’immagine. Con x=0 non c’è bordo.

width=xxx[%]

Imposta la larghezza dell’immagine in pixel o in termini di % delle dimensioni originaria.

height=xxx[%]

Come per width ma regola l’altezza.

align={left, center, right}

Allinea orizzontalmente l’immagine rispetto a pagina e testo.

valign={top,center,bottom}

Allinea verticalmente rispetto all’immagine e al testo

Attributi del tag <img>

<img src="/images/p.gif" width="80%" border="4">

<!– visualizza l’immagine riducendo la dimensione indicata

all’80% (l’altra, se omessa, assume il valore corrispondente) -->

<img src="/images/q.gif" width="80%" height="60%" border="4"> <img src="/images/r.gif" width="800" height="600">

<img src="/images/s.gif" width="800" height="75%">

<!– visualizza l’immagine impostando entrambe le dimensioni come indicato. Eventualmente l’immagine viene distorta. -->

(5)

Attributi del tag <img>

Foto: <img src="/images/p.gif" valign="xxx"><br>

Riga seguente.

xxx=“top”

xxx=“bottom”

xxx=“center”

Foto:

Riga seguente.

Foto:

Foto:

Attributi del tag <img>

<img src="/images/p.gif" valign="xxx" border="4">

<img src="/images/q.gif" width="80%" height="60%" border="4"> <img src="/images/r.gif" width="800" height="600">

<img src="/images/s.gif" width="800" height="75%">

<!– visualizza l’immagine impostando entrambe le dimensioni come indicato. Eventualmente l’immagine viene distorta. -->

(6)

Attributi del tag <img>

Foto: <img src="/images/p.gif" align="xxx"><br>

Riga seguente.

xxx=“right”

Riga seguente.

Foto:

xxx=“left”

Riga seguente.

Foto:

A proposito di %

• La dimensione di alcuni oggetti di una pagina HTML (immagini,

tabelle, etc.) possono essere indicate in termini:

• assoluti: indicando cioe’ il numero di pixel (ad es. width=“600”).

• relativi: indicando cioe’ la dimensione dell’oggetto corrente in termini

percentuali rispetto alla dimensione dell’ oggetto che lo contiene: la finestra

del browser, la tabella, etc. (ad es. height=“40%”).

(7)

Un esempio…

(8)

L’infinito

<html> <head> <title>L'Infinito</title> </head> <body> <h1>L'infinito</h1> <hr> <p>

<img src="siepe.jpg" align="left" valign="top"> <i>Sempre caro mi fu quest'ermo colle,<br> e questa siepe, che da tanta parte<br>

e il naufragar m'è dolce in questo mare.<br></i> </p> <hr> </body> </html>

L’infinito

align="left" valign="top"

(9)

L’infinito

<html> <head> <title>L'Infinito</title> </head> <body> <h1 align="right">L'infinito</h1> <hr> <p align="right">

<img src="siepe.jpg" align="right" valign="top"> <i>Sempre caro mi fu quest'ermo colle,<br>

e questa siepe, che da tanta parte<br>

e il naufragar m'è dolce in questo mare.<br></i> </p> <hr> </body> </html>

L’infinito

<h1 align="right">L'infinito</h1> <p align="right"> <img … align="right"> <img … valign="top">

(10)

L’infinito

Esercizio n.3

Modificare il codice HTML degli esempi precedenti in modo da ottenere la pagina riprodotta di fianco.

Variazioni sul tema:

• Aggiungere un bordo all’immagine • Cambiare il colore del testo

• Aggiungere un link alla pagina wikipedia di Giacomo Leopardi • Provare a deformare l’immagine.

(11)

Elenchi

HTML fornisce due costruzioni per visualizzare elenchi:

unordered list

(lista puntata)

ordered list

(lista puntata)

Lista composta da elementi (item) contrassegnati dallo stesso simbolo

Lista composta da elementi (item) contrassegnati da un numero progressivo

• Una riga

• Un’altra riga

• Ancora una riga

• Toh! qui c’è una riga

• Ultima riga

1) Prima riga

2) Seconda linea

3) Terzo incomodo

4) Quarto potere

5) Quinta colonna

Elenchi: unordered list

Le liste puntate sono delimitate dal tag <ul>..</ul> al cui interno, ciascun

item è delimitato dal tag <li>..</li>

Testo precedente <ul>

<li> una riga </li> <li> altra riga </li> <li> ancora righe </li>

Testo precedente • una riga • altra riga • ancora righe • riga inattesa

(12)

Elenchi: unordered list

Il tag <ul> prevede l’attributo type che può avere tre valori:

circle, disc, square

.

Puntatura con circle:

<ul type="circle">

<li> una riga </li> <li> altra riga </li> </ul>

Puntatura con circle o una riga

o altra riga

Come è scritto… … come appare.

Lo scopo è scegliere il simbolo per la puntatura tra:

○, ● e □

Elenchi: unordered list

Puntatura con circle: <ul type="circle">

<li type="disc"> una riga </li> <li> altra riga </li>

</ul>

Puntatura con circle • una riga

o altra riga

Come è scritto… … come appare.

Lo scopo è scegliere il simbolo per la puntatura tra:

○, ● e □

Anche

<li>

prevede l’attributo type che negli

<ul>

può avere gli stessi valori, ma

in tal caso, la scelta vale solo per l’item che la riporta.

(13)

Unordered list: elenchi annidati

E’ possibile creare dei sottoelenchi associati a un singolo item di una lista.

Elenchi annidati: <ul type="circle">

<li type="disc"> primo punto: <ul>

<li> primo sottopunto </li> <li> secondo sottopunto </li> </ul></li>

<li> altra riga </li> </ul>

Elenchi annidati:

• Primo punto

• Primo sottopunto

• Secondo sottopunto

• Altra riga

Come è scritto… … come appare.

Il costrutto

<ul>..</ul>

del sottoelnco deve essere contenuto all’interno della

coppia

<li>..</li>

di livello superiore.

Elenchi: ordered list

Le liste puntate sono delimitate dal tag

<ol>..</ol>

al cui interno, ciascun item è

delimitato dal tag

<li>..</li>

Testo precedente <ol>

<li> prima riga </li> <li> seconda linea </li> <li> terzo incomodo </li>

Testo precedente 1. prima riga 2. seconda linea 3. terzo incomodo

(14)

Il tag

<ol>

prevede l’attributo type che può avere i valori:

1

,

a

,

I

. Lo scopo è

scegliere l’indice dell’enumerazione (numeri, lettere, numeri romani)

Elenchi: ordered list

NeI tag

<li>

l’attributo type può avere gli stessi valori, ma in tal caso, la scelta vale

solo per l’item che la riporta (e per i successivi).

Testo precedente <ol type="a">

<li> prima riga </li> <li> seconda linea </li> </ol> Testo seguente

Testo precedente

a. prima riga

b. seconda linea

Testo seguente

Come è scritto… … come appare.

Il tag

<li>

nell’area

<ol>

prevede l’attributo value=“xx”.

• Definisce il valore di inizio della numerazione, coerentemente con il type

dell’elenco.

• Gli item seguenti continuano conseguentemente la numerazione.

Elenchi: ordered list

Testo precedente <ol type="a">

<li value="x"> prima riga </li> <li> seconda linea </li>

</ol> Testo seguente

Testo precedente

x. prima riga

y. seconda linea

Testo seguente

(15)

Ordered list: elenchi annidati

<ol type=“1”>

<li> Prima riga </li> <li> Seconda Riga <ol type=“a”>

<li>Terza riga </li> <li>Quarta riga </li> </ol> </li>

<li> Quinta riga </li>

<li value=“12”> Sesta riga </li> </ol>

Come è scritto…

Ordered list: elenchi annidati

<ol type=“1”>

<li> Prima riga </li> <li> Seconda Riga <ol type=“a”>

<li>Terza riga </li> <li>Quarta riga </li> </ol> </li>

1. Prima Riga

2. Seconda Riga

a. Terza riga

b. Quarta riga

… come appare.

(16)

Elenchi misti

<ol type=“1”>

<li> Prima riga </li> <li> Seconda Riga </li> <ul>

<li>Terza riga </li> <li>Quarta riga </li> </ul> </li>

<li> Quinta riga </li>

<li value=“12”> Sesta riga </li> </ol>

Come è scritto…

Elenchi misti

<ol type=“1”>

<li> Prima riga </li> <li> Seconda Riga </li> <ol type=“a”>

<li>Terza riga </li> <li>Quarta riga </li> </ol></li>

<li> Quinta riga </li>

<li value=“12”> Sesta riga </li> </ol>

1. Prima Riga

2. Seconda Riga

• Terza riga

• Quarta riga

3. Quinta riga

12.Sesta riga

… come appare.

(17)

Elenchi misti

Esercizio n.4

Scrivere un documento HTML che riproduca la pagina visualizzata qui a fianco. Si faccia attenzione ai diversi tipi di puntatura. Il nome di ciascun autore è un link alla corrispondente pagina su Wikipedia Italia.

Variazioni sul tema:

Sostituire i sottoelenchi puntati con elenchi numerati in cui ogni item comincia con l’anno di uscita del manga corrispondente.

(18)

Caratteri

• Dimensione, tipo e colore dei caratteri possono essere definiti con il

tag <font>. Le opzioni sono:

• size=“1” ... “9” dimensione.

• color=“..” colore.

• face=“nomefont”.

Sono ammesse combinazioni!

Uso del tag <font>

<font size=5 color=“red”>Prova,</font>

<font color=“blue”>Riprova </font>e

<font color=“green” face=“arial” size=4> Controprova.

</font>

(19)

Uso del tag <font>

<font size=5 color=“red”>Prova,</font>

<font color=“blue”>Riprova </font>e

<font color=“green” face=“arial” size=4> Controprova.

</font>

Come è scritto… … come appare.

Prova

,

Riprova

e

Controprova.

Il tag <font>...

il tag <font> è deprecated. Al suo posto oggi si utilizzano i “fogli di

stile” (Cascading Stile Sheets o CSS).

La scelta di tipi disponibili per l’attributo face dipende dai font installati

sul sistema, pertanto e’ bene orientare la scelta sui font piu’ comuni.

(20)

Caratteri speciali

I simboli fonetici, alcuni segni di interpunzione, contrassegni etc. sono

rappresentati con una particolare sequenza di caratteri

©

ä

é

£

Caratteri speciali/2

&

&amp;

&quot;

<

&lt;

>

&gt;

(spazio

(21)

Caratteri speciali/3

®

&reg;

é

&eacute;

è

&egrave; ë

&euml;

ê

&ecirc;

£

&pound;

Caratteri: stile e proprietà

Esercizio n.5

Scrivere un documento HTML che riproduca la pagina visualizzata qui a fianco. Si faccia attenzione al modo in cui deve essere scritta la parola <font>.

(22)

Testo pre-formattato

• Si possono inserire frammenti di testo “pre-formattato” in un

documento HTML racchiudendoli tra i tag <pre>…</pre>.

• Sono rispettati i ritorni a capo del testo (non serve alcun tag), rientri e

caratteri speciali gia’ impostati

• Non e’ possibile utilizzare alcun tag HTML

• Il testo sara’ interamente visualizzato col font “teletype”

Testo pre-formattato

<p>Testo normale. I ritorni a capo sono gestiti dal

browser. </p> <pre>

Testo pre-formattato.

I ritorni a capo sono decisi dall'autore.

Di default si utilizza un font

diverso. </pre>

(23)

Apici e pedici

I tag <sup>..</sup>

delimitano una porzione di

testo da visualizzare “più in

alto” rispetto al normale.

Analogamente

<sub>..</sub>

delimitano del testo da

visualizzare “più in basso”

rispetto al normale.

La formula dell'acqua &egrave; <b>H<sub>2</sub>O</b><br> <b>3<sup>4</sup> = 81</b><br> Come è scritto… … come appare.

Apici e pedici

f(x)

(4)

𝐻

2

𝑆𝑂

4

Esercizio n.6

Scrivere Il codice HTML che riproduca le formule riportate qui sotto

2

H

2

O

𝑒

−𝑖+𝑡

Variazioni sul tema:

figura

Updating...

Riferimenti

Argomenti correlati :