Laboratorio di Informatica 3 Anno Accademico 2019-2020

21  Download (0)

Full text

(1)

Laboratorio di Informatica 3

Anno Accademico 2019-2020

Luigi Catuogno

[lcatuogno@unisa.it]

Creare siti web

Introduzione

(2)

Il linguaggio HTML

Parte 1

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

Il documento HTML

(4)

I tag di HTML

• HTML descrive gli oggetti contenuti nei documenti mediante

una serie di marcatori detti tag.

• I tag indicano al browser come visualizzare/utilizzare gli oggetti cui

sono riferiti.

• I tag possono avere degli “attributi” che ne regolano ulteriormente

l’effetto.

• I tag sono case insensitive, cioè: possono essere scritti

indifferentemente in maiuscolo o minuscolo.

I tag di HTML

• I tag sono delle stringhe racchiuse tra parentesi angolate < e >.

• <head>, <form>, <i>…

• Alcuni tag definiscono le proprietà degli oggetti contenuti in una determinata area del documento per cui appaiono all’inizio ed alla fine di questa:

Testo normale... <i>

Testo da riprodurre in corsivo, </i>

Testo normale.

Come è scritto…

… come appare.

«apertura» del tag i (corsivo) … area di validità del tag «chiusura» del tag i.

(5)

I tag di HTML

• Altri introducono essi stessi dei componenti o producono degli effetti nel punto in cui sono inseriti.

• I tag di questo genere (<hr>, <br>,…) sono spaiati (non vanno «chiusi»)

<i>

Testo da riprodurre in corsivo, <br> </i>

Testo normale.

Testo normale... Testo da riprodurre in corsivo, Testo normale.

Come è scritto…

… come appare.

«apertura» del tag i (corsivo) … area di validità del tag i, e «chiusura» del tag i.

tag di ritorno a capo

I tag di HTML

• In alcune varianti di HTML, i tag spaiati sono talvolta rappresentati

aggiungendo il carattere / prima di >;

• <br> diventa <br/> • <hr> diventa <hr/>

All’atto pratico, le due notazioni sono equivalenti.

tag di ritorno a capo

traccia una riga orizzontale nella pagina

(6)

I tag di HTML (con opzioni)

La maggior parte dei tag prevede l’uso di attributi per definirne con precisione l’effetto. Ci sono attributi obbligatori e attributi opzionali.

Ecco una bella mucca: <br> <img src=“mucca.jpg”>

Come è scritto… … come appare.

Ecco una bella mucca:

Il tag <img> inserisce un’immagine nel documento.

L’ attributo src indica il nome del file che contiene l’immagine.

L’attributo src è obbligatorio

I tag di HTML (con opzioni)

La maggior parte dei tag prevede l’uso di attributi per definirne con precisione l’effetto. Ci sono attributi obbligatori e attributi opzionali.

Ecco una bella mucca: <br>

<img src=“mucca.jpg” border=“3”>

Come è scritto… … come appare.

Ecco una bella mucca:

Il tag <img> inserisce un’immagine nel documento. L’ attributo border dispone che intorno all’immagine sia tracciato un bordo spesso 3 pixel.

L’attributo border è opzionale

(7)

Struttura di un documento HTML

• Un documento HTML è racchiuso tra i tag <html> e </html> e si

divide in due parti:

• L’intestazione, delimitata da <head>..</head> contiene i cosiddetti meta dati.

• I meta dati non fanno parte delle informazioni del documento, ma costituiscono informazioni sul documento.

• Per esempio: Il titolo, che è delimitato dal tag <title>..</title>

• Il corpo del documento…

Struttura di un documento HTML

• Un documento HTML è racchiuso tra i tag <html> e </html> e si

divide in due parti:

• L’intestazione…

• Il corpo del documento, invece è delimitato dal tag <body> .. </body> ed è la sezione in cui trovano posto i suoi contenuti. I tag impiegati nel corpo, descrivono:

• L’insieme dei suoi componenti (testo, immagini, elenchi, tabelle, link…)

• L’impaginazione (titolazione, paragrafi, sezioni, riquadri, colori, rientri, tabulazioni, spaziature…)

(8)

Struttura di un documento HTML

<HTML>

<!–- Questo è un commento --> <HEAD>

<TITLE> La mia prima pagina WEB </TITLE> </HEAD> <BODY BGCOLOR=“WHITE”> <B> Salve Mondo! </B> <BR> E ciao WEB! </BODY> </HTML>

Struttura di un documento HTML

Un documento HTML è

un file di testo. Può essere:

1 creato e modificato con qualsiasi text editor, per esempio col Blocco Note di Windows…

2 salvato in una cartella

3 Visualizzato dal browser con un doppio click!

(9)

Struttura di un documento HTML

La barra del titolo del browser visualizza il testo racchiuso dal tag <title> La barra degli indirizzi, riporta l’URL del documento. In questo caso, si tratta di un file

locale.

La visualizzazione (rendering) del documento, ha luogo nel corpo vero e proprio della finestra del browser.

Struttura di un documento HTML

• Contiene informazioni sul documento, come ad esempio:

• Il titolo;

• varie informazioni riportate in forma di coppia (nome, valore), per esempio il nome dell’autore, un identificativo aziendale del documento etc… Allo scopo si utilizza il tag

<meta>;

<html> <head>

<title>Bando di partecipazione</title>

<meta name=«autore» value=«ufficio concorsi»> L’intestazione

(10)

Struttura di un documento HTML

• Le informazioni contenute nell’intestazione sono utilizzate

• Dal browser,

• per impostare in maniera corretta la visualizzazione del documento; • per informare l’utente circa la provenienza, la natura etc. del documento; • Dai motori di ricerca per indicizzare il contenuto dei siti web;

<html> <head>

<title>Bando di partecipazione</title>

<meta name=«autore» value=«ufficio concorsi»> <meta name=«doc-id» value=«UC-00999»>

<meta charset=«utf-8» </head>

Ad esempio, l’intestazione del documento è il luogo in cui può essere inserita l’indicazione della codifica dei caratteriusata per comporre il testo.

L’intestazione

Commenti

<!--Questo è un commento. Tra questi due simboli

potete metterci quello che vi pare… ricordandovi che anche se non vengono visualizzati, arrivano comunque dall’altra parte!

-->

(11)

Un semplice documento HTML

Prologo: rappresentare i colori…

(12)

rappresentare i colori…

Diversi componenti di un documento HTML (caratteri, link, bordi, sfondi…) possono avere un colore arbitrario. HTML fornisce due metodi per rappresentare

l’informazione colore:

Il nome (utilizzando la parola inglese): «white», «blue», «grimson», «brown»... Un codice composto da tre cifre comprese tra 0 e 255 che indicano il peso delle componenti fondamentali Rosso, Verde e Blu.

Rappresentare i colori…

Il nome (utilizzando la parola inglese): «white», «blue», «grimson», «brown»... Lo standard HTML assegna un nome a 16 colori:

Aqua Gray Navy Silver

Black Green Olive Teal

Blue Lime Purple White

Fuchsia Maroon Red Yellow

(13)

Rappresentare i colori…

Un codice composto da tre cifre comprese tra 0 e 255 che indicano il peso delle componenti Rosso, Verde e Blu (sistema tintometrico):

𝑪𝒐𝒍𝒐𝒓 = 𝒙𝑹𝑬𝑫 + 𝒚𝑮𝑹𝑬𝑬𝑵 + 𝒛𝑩𝑳𝑼𝑬

I tre «pesi» 𝒙, 𝒚 e 𝒛 variano tra 𝟎 e 𝟐𝟓𝟓 e sono rappresentati con due cifre

esadecimali ciascuno. Le cifre sono rappresentate di seguito e precedute dal #

<font color="#

f023

55

">ciao</font>

ciao Come è scritto… … come appare.

Rappresentare i colori…

<font color="#

f023

55

">ciao</font>

ciao

(14)

Rappresentare i colori…

Sono disponibili numerosi strumenti on-line per generare i codici del colore desiderato:

https://www.w3schools.com/colors/default.asp

W3schools.com Colors Tutorial

https://www.rapidtables.com/web/color/html-color-codes.html

Rapidtables

Il tag <body> e i colori di default

Il corpo di un documento HTML è delimitato dal tag <body>..</body>. Questo tag ha numerose opzioni che sono usate per impostare caratteristiche di default dell’intera pagina.

Ad esempio, per impostare i colori dello sfondo e del testo si possono usare le opzioni:

L’opzione: imposta il colore… bgcolor=«colore» o bgcolor=«#rggbb» dello sfondo della finestra

text=«colore» o text=«#rggbb» del corpo del carattere (testo normale e titoli)

link=«colore» o link=«#rggbb» del testo «associato» a un link mai «visitato»

vlink=«colore» o vlink=«#rggbb» del testo di un link già visitato (visited link)

alink=«colore» o alink=«#rggbb» del testo di un link in attività (active link)

(15)

Un semplice documento HTML (1)

<html>

<head>

<title>Primi Tags</title> </head>

<body bgcolor="black" text="white" link="yellow" vlink="lime">

Stili del testo:

I tag di più frequente utilizzo per impostare lo stile del testo sono:

Tag Funzione

<i>..</i> Corsivo (italics) <b>..</b> Grassetto (bold) <u>..</u> Sottolineato (underlined)

<tt>..</tt> Carattere «telescrivente» (teletype) <blink>..</blink> Lampeggiante (oggi non più utilizzato).

(16)

Un semplice documento HTML (2)

<h1>I Primi Tags</h1>

A voi il <b>grassetto</b> e il <i>corsivo</i>. In genere, le e-mail e

gli url sono scritte in <tt>teletype</tt>.

Fine riga, paragrafi, testo…

I principali tag per l’organizzazione del testo:

Tag Funzione

<br> Ritorno a capo

<h1>..</h1> Titolo di primo livello

<h2>..</h2>, <h3>..</h3>.. Titoli di livello via via inferiore…

<p>..</p> Paragrafo: inizia il testo su una nuova riga e fornisce una lieve spaziatura prima e dopo.

<hr> Linea orizzontale

(17)

Un semplice documento HTML (3)

<h2>Combinazioni</h2>

Possiamo ottenere un <i>corsivo in <b>grassetto</b></i>. <br> Ricordatevi di chiudere i tag nel <u>verso inverso</u>

nel quale li avete aperti!.

Link

Il link è il componente che sottende ai collegamenti ipertestuali. È composto da un

testo e da un indirizzo di destinazione.

Il testo del link appare in evidenza rispetto al resto. Solitamente è di un colore brillante (blu) ed è sottolineato.

Se il link «punta» a una destinazione che è già stata visitata in passato, il suo colore è diverso (in genere viola).

In HTML, il link si compone come segue:

(18)

Link

<p>Potete raggiungere il sito del consorzio W3 cliccando <a href=“http://www.w3c.org/”>qui</a>.</p>

Come è scritto…

… come appare.

Potete raggiungere il sito del consorzio W3 cliccando qui.

Un semplice documento HTML (4)

<h2>I link</h2>

Per le ultime notizie:

<a href="http://www.repubblica.it">www.repubblica.it</a><br> se preferite: <a href="http://www.repubblica.it"><tt>www.repubblica.it</tt></a> </body> </html> 35

(19)

Un semplice documento HTML

Link su immagini

Nei link è pratica frequente utilizzare le immagini al posto (o in aggiunta) al testo.

<h2>I link</h2>

Per le ultime notizie:

<a href="http://www.repubblica.it"> <img src=«Repubblica.png»>

</a> <br>

(20)

Link su immagini

Nei link è pratica frequente utilizzare le immagini al posto (o in aggiunta) al testo.

<h2>I link</h2>

Per le ultime notizie:

<a href="http://www.repubblica.it"> <img src=«Repubblica.png»> </a> <br>

Esercizi

39

(21)

Esercizi

Esercizio 1. Si crei un documento HTML che realizzi la pagina riprodotta a fianco. Nell’originale sono stati utilizzati, i seguenti tag: <html>, <head>, <title>,

<body>,<img>, <i>, <p>, <h1>, <h2>, <a>;

Link da inserire nella pagina:

http://www.nice.fr/ https://it.wikipedia.org/wiki/Repubblica_di_Genova http://www.comunelamaddalena.gov.it/ https://it.wikipedia.org/wiki/Regno_d%27Italia_(1861-1946) http://www.nyc.gov/ https://it.wikipedia.org/wiki/Antonio_Meucci http://garibaldimeuccimuseum.org/ https://www.statenislandusa.com/

Variazioni sul tema:

Si provi a cambiare il colore dello sfondo, del testo e dei link

Esercizi

Esercizio 2. Si crei un documento HTML che realizzi la pagina riprodotta a fianco. Nell’originale sono stati utilizzati, i seguenti tag: <html>, <head>, <title>, <body>,<b>, <i>, <p>, <h1>, <h2>, <hr>, <a>; Link da inserire nella pagina:

https://ricette.giallozafferano.it/Pasta-frolla.html

Figure

Updating...

References

Related subjects :