Lezione laboratorio 3

(1)

1

Informatica di Base

Multid@ms

Informatica di Base

Multid@ms

Laboratorio di HTML Laboratorio di HTML Dott.

Dott. Serena Serena VillataVillata A.A. 2004/05

(2)

2

Che cos’è l’HTML?

• Hyper Text Markup Language

• Definisce le caratteristiche stilistiche di un documento, non è programmazione!

• Le pagine HTML vengono visualizzate

tramite un apposito programma: il browser! • I browser più noti sono:

» Microsoft Internet Explorer (www.microsoft.com) » Netscape Navigator (www.netscape.com)

(3)

3

Come si edita una pagina

in HTML?

• Si può utilizzare un qualsiasi word processor (Blocco Note, WordPad).

• Si salva la pagina in modalità “Solo Testo” ed estensione .html

• Noi utilizzeremo Blocco Note

(4)

4

Il documento HTML

• I comandi HTML (tag) hanno una forma base:

• Convenzione: HTML non è case-sensitive, ma i comandi sono sempre maiuscoli!

• Ad alcuni comandi si aggiungono gli attributi:

(5)

5

Il primo documento

HTML

<HTML> Una pagina html </HTML> • Potenzialmente un documento html può essere scritto tutto su una sola linea, ma non sarebbe chiaro!

(6)

6

Intestazione, titolo e

corpo della pagina

• Intestazione:

→ Informazioni destinate al client • Titolo (all’interno dell’ HEAD):

→ Titolo della pagina • Corpo:

(7)

7

Esempio 1

La mia prima pagina in html </TITLE>

</HEAD> <BODY> </BODY> </HTML>

(8)

8

Esempio 2

La mia prima pagina in html </TITLE>

</HEAD> <BODY>

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura

ché la diritta via era smarrita. </BODY>

(9)

9

Dimensione dei font

• Ci sono a disposizione 6 diverse grandezze per il testo:

• 1 → Carattere più grande • . . .

(10)

10

Esempio 3

<HTML> <HEAD> <TITLE>

La mia prima pagina in html </TITLE>

</HEAD> <BODY>

<H1> La Divina Commedia </H1>

<H2> di Dante Alighieri </H2>

<H4> Nel mezzo del cammin di

nostra vita mi ritrovai per una selva oscura ché la diritta via

era smarrita. <H4>

</BODY> </HTML>

(11)

11

La divisione in paragrafi

• A capo: <BR> → Ritorno a capo • Paragrafo: <P>

→ utilizzato all’inizio di un nuovo paragrafo,ritorno a capo del testo lasciando una riga vuota

(12)

12

La divisione in paragrafi

• Linea divisoria:

<HR>

→ linea di separazione tra diversi paragrafi.

Attributi:

SIZE = numero di pixel di lunghezza

WIDTH = pixel o percentuale della

larghezza

ALIGN = left o right o center

(13)

13

Esempio 4

<HTML> <HEAD> <TITLE>

</HEAD> <BODY>

<H1>La Divina Commedia</H1>

<HR WIDTH=“50%” ALIGN=“left” SIZE="5">

<H2>di Dante Alighieri</H2>

<P>

Nel mezzo del cammin di nostra vita, <BR>

mi ritrovai per una selva oscura, <BR>

che la diritta via era smarrita. <BR> </P>

<P>

Ahi, quanto a dir qual'era, è cosa dura, <BR>

esta selva selvaggia, aspra e forte, <BR>

ché nel pensier rinnova la paura. <BR> </P>

</BODY> </HTML>

(14)

14

La divisione in paragrafi

• Testo preformattato:

<PRE>

→ inserisce delle porzioni di testo così come sono formattate

(15)

15

Stile del testo

• Stili: » <U> → introduce la sottolineatura » <B> → introduce il grassetto » <I> → introduce il corsivo » <S>

→ introduce una riga sui caratteri

» <BIG>

→ fa apparire più grandi i caratteri

» <SMALL>

(16)

16

Allineamento del testo

• Allineamento:

ALIGN = right o left o center

→ allinea titoli e paragrafi

(17)

17

Esempio 5

<HTML> <HEAD> <TITLE>

</HEAD> <BODY>

<CENTER>

<H1> <I> La Divina Commedia </I> </H1> <HR ALIGN=“center” SIZE="5">

</CENTER>

<H2> <U> di Dante Alighieri </U> </H2> <P> <BIG><CENTER>

Nel mezzo del cammin di nostra vita,<BR> mi ritrovai per una selva oscura,<BR> che la diritta via era smarrita.<BR> </P>

<P>

Ahi, quanto a dir qual'era, è cosa dura,<BR> esta selva selvaggia, aspra e forte,<BR> ché nel pensier rinnova la paura.<BR>

</CENTER>

</P> </BIG>

</BODY> </HTML>

(18)

18

Inseriamo il colore

• Colore di sfondo:

→ il colore di sfondo può essere

espresso a parole o in esadecimale. Es.

(19)

19

Inseriamo il colore

• Colore del testo:

→ il colore del testo può essere

espresso a parola o in esadecimale. • Colore dei links:

→ il colore viene espresso in esadecimale

(20)

20

Esempio 6

<HTML> <HEAD> <TITLE>

</HEAD>

<BODY BGCOLOR="#20B2AA">

<CENTER>

<FONT COLOR="orange">

<H1><I>La Divina Commedia</I></H1> <HR ALIGN=“center” SIZE="5">

</CENTER>

<H2><U>di Dante Alighieri</U></H2> <P><BIG><CENTER>

</FONT>

<FONT COLOR="#DEB887">

Nel mezzo del cammin di nostra vita,<BR> mi ritrovai per una selva oscura,<BR> che la diritta via era smarrita.<BR> </P>

<P>

Ahi, quanto a dir qual'era, è cosa dura,<BR> esta selva selvaggia, aspra e forte,<BR> ché nel pensier rinnova la paura.<BR>

</FONT> </CENTER> </P></BIG>

</BODY> </HTML>

(21)

21

Le liste non ordinate

• Semplici elenchi preceduti da un pallino:

→ segnala l’inizio della lista

<LI>

→ precede ogni voce

Attributi: <UL TYPE=“simbolo”>

→ disc(standard), square(quadrato pieno), circle(quadrato vuoto).

(22)

22

Le liste ordinate

• Elenchi dove ogni voce è preceduta da un numero progressivo:

→ segnala l’inizio della lista

<LI>

→ precede ogni voce

Attributo: <OL TYPE = “simbolo”>

→ 1(numeri), a(lettere minuscole),

A(lettere maiuscole), i(numeri romani minuscoli), I(numeri romani maiuscoli)

(23)

23

Esempio 7

<BODY>

<H3>Lista non ordinata</H3> <BR><BR>

<UL TYPE=“circle”> <LI> Prima voce

<LI> Seconda voce

<LI> Terza voce

</UL>

<H3>Lista ordinata</H3> <BR><BR>

<OL TYPE=“I”> <LI> Prima voce

<LI> Seconda voce

<LI> Terza voce

</OL>

(24)

24

Collegamenti esterni

• Si “ancora” il collegamento alla pagina:

→ la scritta collocata all’interno dei tag di apertura e di chiusura è ciò che apparirà effettivamente sulla pagina Web come collegamento.

→ l’URL può essere assoluto o relativo

(25)

25

Collegamenti interni

• Il collegamento:

<A HREF = “#nome_ancora”>Testo</A>

• L’ancora:

<A NAME = “nome_ancora”>Testo</A>

Al click sul collegamento ci si sposta alla porzione di testo ove è situata l’ancora (all’interno della medesima pagina!!)

(26)

26

Collegamenti e-mail

• Collegamento a un indirizzo e-mail:

Scrivetemi! </A>

Il browser dell’utente si predispone a spedire un messaggio all’indirizzo

(27)

27

Esempio 8

<BODY>

<H3>Programma dei corsi del primo anno - Multidams</H3> <BR><BR>

<A HREF=“#infbase”>Informatica di base</A> <BR>

<A HREF=“#infgr”>Informatica grafica</A>

<A NAME=“infbase”>Informatica di base</A>

<BR> Il corso di informatica di base… <BR>

<A HREF=“http://www.infbase.it”>Pagina web del corso</A>

<A HREF=“mailto:[email protected]”>E-mail del docente</A>

(28)

28

Inserire un’immagine

• Inserimento di un’immagine:

Attributi:

ALT = stringa che appare passando sopra all’immagine o al suo posto nei browser non grafici.

ALIGN = disposizione della figura nella

(29)

29

Trasformare l’immagine

in un collegamento

• E’ possibile rendere un’immagine un collegamento ipertestuale:

è sufficiente aggiungere, di seguito al tag <A>, il comando <IMG SRC = “img”>

(30)

30

Dimensione e bordi delle

immagini

• Dimensione:

attributi HEIGHT e WIDTH del tag IMG

• Bordo:

attributo BORDER = “num” del tag IMG BORDER = “0” → bordo assente

(31)

31

Esempio 9

<BODY>

<IMG SRC=“es6.jpg” BORDER=“5” HEIGHT=“60%” WIDTH=“45%”

ALT=“L’attributo ALT di quest’immagine”>

(32)

32

Esercizio

• Creare una pagina Biblioteca con:

– Titolo principale: La mia biblioteca on-line – Sfondo nero, testo azzurro

– 3 links che portano a tre pagine diverse (definire attributi LINK e VLINK):

• Romanzi gialli

• Romanzi d’avventura • Romanzi fantasy

– Al fondo della pagina, centrato e in

grassetto, c’è un mailto al vostro indirizzo e-mail

(33)

33

• Creare la pagina Gialli (raggiungibile

mediante il link precedentemente creato) con:

– Titolo: I Romanzi Gialli, in giallo appunto su sfondo nero.

– Più in basso, un elenco (ordinato) di 3 autori (Christie, Doyle, Simenon) utilizzati come

collegamenti interni a 3 sezioni che riassumono l’opera degli autori.

– Ogni sezione ha come titoletto il nome

dell’autore ed è separata dalla altre da una linea.

– Al termine di ogni sezione, allineato a destra è presente un link che porta alla pagina dedicata al relativo autore.

(34)

34

• Creare la pagina Christie (raggiungibile mediante il link della relativa sezione) con:

– Titolo: Agatha Christie, colori a scelta per sfondo e testo.

– Poco sotto, centrata, con bordo n°2, una fotografia della autrice con dimensioni e attributo ALT definito:

– La foto è un link al sito ufficiale della autrice (www.agathachristie.com).

– La pagina è composta da un elenco (non ordinato) di titoli che conducono ognuno alle relative pagine.