• Non ci sono risultati.

Laboratorio di Informatica 3 Anno Accademico 2019-2020

N/A
N/A
Protected

Academic year: 2021

Condividi "Laboratorio di Informatica 3 Anno Accademico 2019-2020"

Copied!
21
0
0

Testo completo

(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

Riferimenti

Documenti correlati

6) La diffusione di una adeguata cultura della valutazione è quanto mai necessaria, ma è ostacolata da numerosi fattori, in larga misura legati alle criticità

Briefly, for streptomycin the MIC range was of 0,5-2 μg/ml in both animal and human strains, for ciprofloxacin it was at 0.5–16 μg/ml, inde- pendently of the source of isolation,

A comparison of the profits made in the four cases shows that the last one gives the equilibrium profits of the price policy game. Firms then choose to both

SCI 2006, XXII Congresso Nazionale della Società Chimica Italiana, 10-15 Settembre 2006, Firenze.. SBI-P-35

On the basis of the report referred to in Article 22 of the Treaty establishing the European Community, and without prejudice to the other provisions of the said Treaty, the

2. Sur base du rapport visé à l’article 22 du traité instituant la Communauté européenne, et sans préjudice des autres dispositions dudit traité, le Conseil, statuant

glh International Symposium on Metal lons in Biology and Medicine Book of Abatracta.. 9 th INTERNATIONAL SYMPOSIUM ON MET AL

(2) Auf der Grundlage des Berichts nach Artikel 22 des Vertrags zur Gründung der Europäischen Gemeinschaft kann der Rat unbeschadet der anderen Bestimmungen des genannten Vertrags