• Non ci sono risultati.

Lezione 2 - laboratorio HTML

N/A
N/A
Protected

Academic year: 2021

Condividi "Lezione 2 - laboratorio HTML"

Copied!
13
0
0

Testo completo

(1)

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

(2)

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

(3)

13

Esempio 4

<HTML>

<HEAD>

<TITLE>

La mia prima pagina in html

</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>

(4)

14

La divisione in paragrafi

• Testo preformattato:

<PRE>

inserisce delle porzioni di testo

(5)

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>

(6)

16

Allineamento del testo

• Allineamento:

ALIGN = right o left o center

allinea titoli e paragrafi

<CENTER> </CENTER>

(7)

17

Esempio 5

<HTML>

<HEAD> <TITLE>

La mia prima pagina in html </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>

(8)

18

Inseriamo il colore

• Colore di sfondo:

<BODY BGCOLOR=“colore”>

il colore di sfondo può essere

espresso a parole o in esadecimale.

Es.

<BODY BGCOLOR=“orange”>

(9)

19

Inseriamo il colore

• Colore del testo:

<FONT COLOR=“colore”> </FONT>

il colore del testo può essere

espresso a parola o in esadecimale.

• Colore dei links:

<BODY LINK = “” VLINK = “” ALINK = “”>

il colore viene espresso in

(10)

20

Esempio 6

<HTML>

<HEAD> <TITLE>

La mia prima pagina in html </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>

(11)

21

Le liste non ordinate

• Semplici elenchi preceduti da un

pallino:

<UL> </UL>

segnala l’inizio della lista

<LI>

precede ogni voce

Attributi:

<UL TYPE=“simbolo”>

disc(standard), square(quadrato

(12)

22

Le liste ordinate

• Elenchi dove ogni voce è preceduta da

un numero progressivo:

<OL> </OL>

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)

(13)

23

Esempio 7

<BODY>

<H3>Lista non ordinata</H3>

<BR><BR>

<UL TYPE=“circle”>

<LI>

Prima voce

<LI>

Seconda voce

<LI>

Terza voce

</UL>

<BR><BR>

<H3>Lista ordinata</H3>

<BR><BR>

<OL TYPE=“I”>

<LI>

Prima voce

<LI>

Seconda voce

<LI>

Terza voce

</OL>

Riferimenti

Documenti correlati

id permette di specificare un identificatore univoco per l’elemento definito dal tag; il valore assegnato ad id deve essere unico nel documento in cui viene usato (due elementi di

Quando il file da reperire si trova nella stessa cartella (o in una sottocartella) del file di partenza, gli indirizzi relativi sono sicuramente più brevi da scrivere, ed anche

Il tag &lt;BR&gt; ha un’attributo chiamato CLEAR che permette di specificare come deve andare a capo il testo quando sta scorrendo accanto ad un’immagine.. In particolare

Se diverse celle nella stessa riga hanno altezze diverse, l’altezza della colonna diventa quella della cella più alta. L’altezza della cella deve essere specificata

Essi sono molto differenti dai frame normali, in quanto in questo caso non si utilizza un documento master per dividere la finestra in più frame, ma si visualizza un

Descrivere in un file .css uno Style Sheet che rispetti la seguente specifica: (i) tutto il documento deve essere scritto in font “Verdana” (quando disponibile) con dimensione

All’interno di ciascun box contenitore viene stabilito un appropriato contesto di formattazione, che può essere un contesto di formattazione a blocco o un contesto di formattazione

id permette di specificare un identificatore univoco per l’elemento definito dal tag; il valore assegnato ad id deve essere unico nel documento in cui viene usato (due elementi di