Laboratorio di Informatica 3
Anno Accademico 2019-2020
Luigi Catuogno
[lcatuogno@unisa.it]
Creare siti web
Introduzione
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
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
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.
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
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
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…)
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!
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
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!
-->
Un semplice documento HTML
Prologo: rappresentare i colori…
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
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>
ciaoRappresentare 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)
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).
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
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:
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
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>
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
39Esercizi
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