Laboratorio di Informatica 3 Anno Accademico 2019-2020

(1)

Laboratorio di Informatica 3

Anno Accademico 2019-2020

Luigi Catuogno

[lcatuogno@unisa.it]

Creare siti web

Introduzione

(2)

Il linguaggio HTML

Parte 4 bis

HTML e CSS

Libri di testo consigliati:

Laura Lemay, Rafe Colburn

HTML & CSS

McGraw-Hill Italia. (2007)

ISBN 978-88-386-4478-8

3

(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

Alcuni tra gli errori più frequenti…

(prima parte)

(4)

Tag annidati e indentazione

…

Testo normale,<font size="6"> Testo 6 </font> …

Ciascun tag e la sua chiusura delimitano un ambiente chiuso, un contesto in cui si producono i suoi effetti – i.e.-modifica determinate proprietà dei componenti che contiene.

<p align="center">

Testo normale,<font size="6"> Testo 6 </font> </p>…

Un contesto può contenerne altri. Un contesto interno deve essere chiuso prima di quello che lo contiene.

<p> <font>

Tag annidati e indentazione

…

Testo normale,<font size="6"> Testo 6 </font> …

Ciascun tag e la sua chiusura delimitano un ambiente chiuso, un contesto in cui si producono i suoi effetti – i.e.-modifica determinate proprietà dei componenti che contiene.

Testo normale,<font size="6"> Testo 6 </p> </font>

Testo normale,<font size="6"> Testo 6 </font> </p>…

Un contesto può contenerne altri. Un contesto interno deve essere chiuso prima di quello che lo contiene.

NO!

<p>

<font> 7

(5)

Tag annidati e indentazione

Se il contesto è a sua volta contenuto (annidato) in un altro, esso somma i suoi effetti a quelli del contesto in cui è contenuto.

Modificail valore che alcune proprietà hanno all’esterno (e.g. la taglia del carattere).

Le modifiche restano valide fino alla chiusura

Eredita il valore assegnato alle altre proprietà (e.g. allineamento del testo, colore del carattere) nel contesto esterno. <body text="red"> <p align="center"> testo normale, <font size="6">

Testo 6

</font> </p> </body> size: normale, text: rosso, align: left align: center size: 6 size: normale align: left

Tag annidati e indentazione

Per aiutare la comprensione del codice, e facilitare la sua modifica/correzione, si utilizza l’indentazione.

Entro un certo margine discrezionale, ogni

nuovo tag si apre su una nuova riga. Il suo contenuto è inserito con un rientro maggiore (e.g. tre spazi verso dx).

La chiusura del tag si pone sulla stesso rientro dell’apertura. <html> <head> <title>Titolo</title> </head> <body text="red"> <p align="center"> Testo normale,

<font size="6">Testo 6</font> </p>

</body> </html>

Molti editor HTML permettono e favoriscono l’utilizzo dell’indentazione nella scrittura del codice.

(6)

Attenzione ai caratteri…

Il face «Arial» non è stato impostato. Perchè?

questo non è Arial

Attenzione ai caratteri…

HTML prescrive che il valore degli attributi è racchiuso tra doppi apici (o virgolette). Si tratta dello stesso carattere

"

posto prima e dopo il valore. Alcuni editor (spesso per effetto del cut&paste) scambiano questo carattere con una coppia di virgolette simmetriche «» che, essendo in realtà caratteri diversi, non sono riconosciute dal browser.

questo non è Arial 11

(7)

Attenzione ai caratteri…

Attenzione agli spazi…

Questi spazi sono di troppo

(8)

Attenzione agli spazi…

Questi spazi sono di troppo

HTML utilizza lo spazio come separatore di parole. Quando il browser incontra una sequenza di separatori (e.g. due spazi consecutivi), ne visualizza uno solo e passa oltre.

Invece, nessun carattere viene visualizzato al posto di eventuali tag che appaiono inframmezzati al testo nel sorgente.

Attenzione agli spazi…

…il <font color="red"> Col</font><font color="blue"> ore</font>…

…il

Col

ore

…

(9)

Attenti ai caratteri speciali (vocali accentate…)

<p> la pasta frolla è un impasto dolce utilizzato per

produrre torte, dolci, biscotti, e molte varietà di pasticcini… </p>

Occorre ricordarsi che la &-sequenza termina sempre con il

;

In quasi tutti gli editor è di norma possibile inserire le vocali accentate nel testo. E’ piuttosto frequente farlo inconsapevolmente, invece di inaserire la corretta

&-sequenza.

Questo non è un errore ma in molti casi può portare a visualizzazioni «pasticciate» del testo, se il documento HTML non riporta correttamente la lingua in cui è scritto e il set di caratteri unicode che utilizza (e.g. UTF-8).

Attenti alle immagini…

!!

Il file UngarettiVeglia.jpg non è presente nella stessa cartella del file HTML che lo contiene. Si ricordi che in assenza di un URL (indicazione di protocollo, e server name), il browser si aspetta di trovare il file dell’immagine sul computer locale, al pathname indicato nell’attributo src.

Se si invia un documento HTML via mail, bisogna ricordarsi di inviare tutte le immagini che contiene.

(10)

Elenchi e sotto-elenchi.

<ul type=“circle”>

<li>Ufo Robot Goldrake</li> <li>Mazinga Z</li>

<li type=“square”>Devilman</li>

<li type=“disc”>Jeeg Robot d’accaio</li> </ul>

Per cambiare il segno di «puntatura» di un singolo item di una unordered list non è necessario frammentare la lista per utilizzare l’attributo type di <ul>. Anche il tag <li> ha l’attributo type, che ha validità solo per il suo item.

Il «puzzle»

mela1.jpg

mela2.png

mela3.png

Avendo queste tre immagini, con le rispettive misure (in pixel)

458x170

458x118

Bisognava ricomporre e visualizzare la mela intera senza spazi bianchi o «distacchi», in una tabella come questa.

(11)

Il «puzzle»

<table border=1 cellspacing=0 cellpadding=0 width=458>

<tr height="170">

<td><img src="mela1.jpg"></td>

</tr>

<tr height="170">

<td><img src="mela2.png"></td>

</tr>

<tr height="118">

<td><img src="mela3.png"></td>

</tr>

</table>

Il «puzzle»

Impostando esplicitamente la larghezza e l’altezza delle celle agli stessi valori delle dimensioni delle immagini che devono contenere, permette che non rimangano spazi vuoti tra il bordo dell’immagine e qualcuno dei bordi delle celle.

(12)

Il «puzzle»

Impostare la larghezza delle celle a un valore più grande della corrispondente dimensione delle immagini, fa si che nelle celle ci sia «altro spazio» non occupato dall’immagine.

Bordo delle celle

(in rosso)

Bordo dell’immagine

(in nero)

Spazio della cella non occupato

Il «puzzle»

<table border=1 bordercolor="red" cellspacing=0 cellpadding=0 width=508> <tr height="170">

<td align=left><img src="Mela1.jpg" border=1></td> </tr>

<tr height="170">

<tr height="118">

</table>

50px 23

(13)

Il «puzzle»

<table border=1 bordercolor="red" cellspacing=0 cellpadding=0 width=508> <tr height="170">

<tr height="170">

<td align=right><img src="Mela2.jpg" border=1></td> </tr>

<tr height="118">

</table>

In ogni cella, si può spostare orizzontalmente l’immagine visualizzata, giocando con il valore dell’allineamento della cella.

50px

La mela «scomposta»

50px

Rimuovendo i bordi della tabella e delle immagini, si ottiene il risultato richiesto dall’esercizio.

(14)

La mela «scomposta»

<table border=0 cellspacing=0 cellpadding=0 width=508>

<tr height="170">

<td align=left><img src="mela1.jpg"></td>

</tr>

<tr height="170">

<td align=right><img src="mela2.png"></td>

</tr>

<tr height="118">

<td align=left><img src="mela3.png"></td>

</tr>

</table>

Le tabelle

(terza parte) 27

(15)

Celle a grandezza variabile…

Celle su più colonne

N. Descrizione

prezzo

totale

12 Matite HB

200 2400

10 Penne BIC blu

250 2500

TOTALE

4900

La cella qui indicata si espande nel senso delle

colonne ma resta su una sola riga.

Una cella puo’ espandersi per

piu’ colonne:

<td colspan=nn> … </td>.

nn è il numero di colonne su

cui la cella si espande.

29

(16)

Celle su più colonne

<td> <td> <td> <td> </td> </td> </td> </td> </td> <td colspan=2>