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 3

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

Organizzazione di un documento HTML

(4)

Realizziamo un sommario in HTML

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Testo molto lungo

Lorem Ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.

I) Nemo enim

ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt.

I.1) Neque porro

quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.

II) Ut enim ad minima veniam,

quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Struttura Sommario Lorem Ipsum I Nemo enim 1 Neque porro II Ut enim ad minima viniam

Lorem Ipsum

(sommario)

I) Nemo enim

(sommario)

quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

(sommario)

Testo strutturato con sommario

Link «interni» al documento (spesso detti segnalibri)

1

2

3 Realizziamo un sommario in HTML

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Testo molto lungo

1

E’ tutt’altro che infrequente gestire documenti HTML molto lunghi. Si pensi ad esempi agli articoli, tesi, romanzi etc. che portano in se una certa struttura (divisione in capitoli, paragrafi, appendici, …) ma tuttavia contenuti in un solo file.

Muoversi all’interno di questi documenti (utilizzando i controlli di scrolling del browser può essere piuttosto scomodo.

Realizziamo un sommario che permetta di «saltare» ai vari capitoli e «tornare» indietro, nello stesso documento.

In tipografia, per mostrare l’impaginazione di una pagina stampata (un documento, un manifesto…) si utilizza, tradizionalmente, un testo campione conosciuto com Lorem Ipsum.

Quello utilizzato in questo esempio è stato generato suhttps://it.lipsum.com

(5)

Realizziamo un sommario in HTML

Lorem Ipsum

I) Nemo enim

quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Struttura

<h1>Lorem Ipsum</h1>

<p>Sed ut perspiciatis unde omnis iste natus error

sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>

<h2>I) Nemo enim</h2>

<p> ipsam voluptatem, quia voluptas sit, aspernatur

aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt.

</p>

<h3>I.1) Neque porro</h3>

<p> quisquam est, qui dolorem ipsum, quia dolor sit,

amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. </p>

<h2>II) Ut enim ad minima veniam, </h2> <p> quis nostrum exercitationem ullam corporis

suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </p>

2

Utilizziamo i tag di titolazione su vari livelli <h1>...</h1>, <h2>...</h2>, … e di delimitazione dei paragrafi <p>…</p> di HTML per dare una struttura di base al documento.

Realizziamo un sommario in HTML

Sommario Lorem Ipsum I Nemo enim 1 Neque porro II Ut enim ad minima viniam

Lorem Ipsum

(sommario)

I) Nemo enim

…

3

<h1>Sommario</h1> <p>Lorem Ipsum<br> <ol type="I"> <li>Nemo enim <ol type="1"> <li>Neque porro</li> </ol> </li>

<li>Ut enim ad minima veniam, </li> </ol>

</p>

<h1>Lorem Ipsum</h1> <p> Sed ut…

Costruiamo il nostro sommario con i tag per gli elenchi numerati.

(6)

Named anchor (segnalibro)

<a name="sommario">Testo ancora</a>

Si utilizza nella creazione di collegamenti verso punti specifici di un documento Per definire un segnalibro, si utilizza il tag <a>…</a> (lo stesso che si usa per i link)

Il nome del segnalibro, contenuto nell’attributo name, è arbitrario, deve essere unico all’interno del documento e (generalmente), non contiene spazi. Il testo àncora è opzionale (in genere è assente)

E’ prassi diffusissima (ma non raccomandata) omettere anche il tag di chiusura </a>

Per saltare a un segnalibro…

<a name="sommario">Testo ancora</a>

Per posizionare il browser su un determinato segnalibro (e.g. il nostro «sommario»), si utilizza un link formato come segue

Si tratta di un normalissimo link, in cui compare soltanto la sezione (il nome del segnalibro preceduto da #)

<a href="#sommario">Vai al sommario</a>

E’ naturalmente possibile impiegare link per fare riferimento a segnalibri presenti in altri domcumenti HTML

<a href="/altro_doc.html#conclusioni">Altre conclusioni</a>

(7)

Realizziamo un sommario in HTML

Sommario

Lorem Ipsum I Nemo enim

1 Neque porro II Ut enim ad minima viniam

Lorem Ipsum

(sommario)

I) Nemo enim

…

3

Prima di ogni paragrafo (o altro elemento che debba essere «destinazione di un

salto», inseriamo una «named anchor».

<a name="sommario"></a>

<h1>Sommario</h1> <p>Lorem Ipsum<br>

<ol type="I"> <li>I) Nemo enim

<ol type="1">

<li>I.1) Neque porro</li> </ol>

</li>

<li>II) Ut enim ad minima veniam, </li> </ol> </p> <a name="lorem_ipsum"></a> <h1>Lorem Ipsum</h1> <p> Sed ut…

Realizziamo un sommario in HTML

Sommario Lorem Ipsum I Nemo enim 1 Neque porro II Ut enim ad minima viniam

Lorem Ipsum

(sommario)

I) Nemo enim

…

3

Quindi aggiungiamo un link a ciascuna voce

del sommario verso il segnalibro

corrispondente

<a name="sommario"></a> <h1>Sommario</h1>

<p><a href=«#lorem_ipsum">Lorem Ipsum</a><br> <ol type="I">

<li><a href=«#nemo_enim">Nemo enim</a>

<ol type="1">

<li><a href=«#neque_porro">Neque porro</a>

</li> </ol> </li>

<li><a href=«#ut_enim">Ut enim ad minima veniam</a>

</li> </ol> </p> <a name="lorem_ipsum"></a> <h1>Lorem Ipsum</h1> <p> Sed ut… 13

(8)

Realizziamo un sommario in HTML

Sommario

Lorem Ipsum I Nemo enim

1 Neque porro II Ut enim ad minima viniam

Lorem Ipsum

(sommario)

I) Nemo enim

…

3

Al termine di ogni paragrafo, potremmo inserire un link per il ritorno al sommario…

<a name="sommario"></a> <h1>Sommario</h1>

<p><a href=«#lorem_ipsum">Lorem Ipsum</a><br> …

</p> …

<a name="lorem_ipsum"></a>

<h1>Lorem Ipsum</h1>

<p> Sed ut perspiciatis unde omnis iste natus error

sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. <br> <a href="#sommario">(sommario)</a> </p> …

Realizziamo un sommario in HTML

Esercizio n.7

Completare il codice dell’esempio appena discusso, aggiungendo 3 ulteriori sezioni.

Variazioni sul tema:

Impiegando gli stessi strumenti, Inserire delle immagini (piccole, 150x150 ca.) in tre delle sezioni e realizzare un «indice delle illustrazioni».

(9)

Le tabelle

Le tabelle, sono lo strumento per impaginare i contenuti all’interno di una griglia bidimensionale. Sono utilizzate principalmente per presentare dati organizzati in righe e colonne

In HTML, le tabelle hanno avuto un impiego importante anche per raffinare l’impaginazione delle pagine web, poiché permettono di gestire meglio lo spazio e creare layout più complessi rispetto ai normali strumenti di impaginazione.

Con l’avvento dei fogli di stile, e delle nuove funzionalità di HTML5, le tabelle sono state notevolmente potenziate. Sebbene il loro uso per impostare il layout di pagina sia stato soppiantato da strumenti più evoluti introdotti da questi nuovi standard.

(10)

Le tabelle: nomenclatura

Riga

Cella

Bordo

Larghezza

(width)

Altezza

(height)

Le tabelle: i tag principali

• Una tabella è delimitata dai tag <table>…</table>.

• Ciascuna riga della tabella è delimitata dai tag

<tr>…</tr>.

• Le celle di una riga sono definite dai tag <td>…</td>.

(11)

Le tabelle: i tag principali

(1,1)

(1,2)

(1,3)

(2,1)

(2,2)

(2,3)

Le tabelle: i tag principali

(1,1)

(1,2)

(1,3)

(2,1)

(2,2)

(2,3)

<table>

</table>

(12)

Le tabelle: i tag principali

(1,1)

(1,2)

(1,3)

(2,1)

(2,2)

(2,3)

<table>

</table>

<tr>

</tr>

<tr>

</tr>

Tabelle: tag principali.

(1,1)

(1,2)

(1,3)

(2,1)

(2,2)

(2,3)

<table>

</table>

<tr>

</tr>

<tr>

</tr>

<td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> 23

(13)

Le tabelle: i tag principali

<table border="1"> <tr> <td>(1,1)</td> <td>(1,2)</td> <td>(1,3)</td> </tr> <tr> <td>(2,1)</td> … </tr> </table> Come è scritto…

Le tabelle: esempio

<h1>Tabella</h1> <table border="1">

Inizializziamo la tabella e fissiamo a 1 lo spessore del bordo. In assenza dell’attributo border, la tabella sarà realizzata senza alcun bordo.

(14)

Le tabelle: esempio

<tr>

Si compone la prima riga della tabella con il tag <tr>

Le tabelle: esempio

<tr>

<td><b>Nazione</b></td>

Si compone la prima cella della riga corrente con il tag

<td>..</td>.

(15)

Le tabelle: esempio

<tr>

<td>..</td>. <td><b>Capitale</b></td> </tr>

Si compone la seconda cella della riga corrente con il tag <td>..</td>. Poi si chiude la riga con </tr>

Le tabelle: esempio

<h1>Tabella</h1> <table border="1"> <tr> <td><b>Nazione</b></td> <td><b>Capitale</b></td> </tr> …

L’ordine in cui si inseriscono righe e colonne….

(16)

Le tabelle: esempio

… <tr> <td>Italia</td> <td>Roma</td> </tr> </table>

Si compone l’ultima riga e le sue due celle, quindi si chiude la tabella con il tag

</table>

Le tabelle: esempio

<tr>

<td>..</td>. <td><b>Capitale</b></td> </tr>

Si compone la seconda cella della riga corrente con il

(17)

Le tabelle: i tag principali

Esercizio n.8

modificare il codice HTML che produce la pagina mostrata a fianco inserendo le colonne dedicate alla lingua/e parlata/e nella città e al numero di abitanti.