Laboratorio di Informatica 3
Anno Accademico 2019-2020
Luigi Catuogno
[lcatuogno@unisa.it]
Creare siti web
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
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
Attributi del tag <img>
<img src="URL immagine" attr1="valore" attr2="valore" …>
Attributo
Effetto
border=x
Traccia un bordo largo x pixel intornoall’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 testoAttributi 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. -->
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. -->
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%”).
Un esempio…
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"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">L’infinito
Esercizio n.3Modificare 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.
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
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.
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
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
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.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.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.
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>
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.
Caratteri speciali
I simboli fonetici, alcuni segni di interpunzione, contrassegni etc. sono
rappresentati con una particolare sequenza di caratteri
©
ä
é
£
Caratteri speciali/2
&
&
“
"
<
<
>
>
(spazio
Caratteri speciali/3
®
®
é
é
è
è ë
ë
ê
ê
£
£
Caratteri: stile e proprietà
Esercizio n.5Scrivere un documento HTML che riproduca la pagina visualizzata qui a fianco. Si faccia attenzione al modo in cui deve essere scritta la parola <font>.
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>
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 è <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.6Scrivere Il codice HTML che riproduca le formule riportate qui sotto
2
H
2
O
𝑒
−𝑖+𝑡
Variazioni sul tema: