Corso html
Lezione 2
Corso html- lez. 2 Contenuto di una pagina html
CONTENUTO DI UNA PAGINA HTML
3
I COLORI
ATTRIBUTI DEL TAG BODY
I MARGINI
COLORE DEL TESTO
COLORE DEI COLLEGAMENTI IPERTESTUALI
COLORE DI SFONDO
IMMAGINI DI SFONDO
CARATTERI SPECIALI
FORMATTAZIONE DEL TESTO
TESTO PREFORMATTATO
RITORNO A CAPO
IL PARAGRAFO
IL CARATTERE
ATTRIBUTO FACE
ATTRIBUTO SIZE
COLORE DEL CARATTERE
TESTO SCORREVOLE
I TITOLI
LE IMMAGINI
LO STILE DELLE BARRE DI SCORRIMENTO
2
3
6
6
8
8
9
10
12
17
18
21
23
27
27
28
29
30
32
34
42
Corso html- lez. 2 Contenuto di una pagina html
Contenuto di una pagina html
I colori
Una delle caratteristiche di una pagina web (ad esempio dello sfondo o del testo ) è il
colore
In una istruzione puoi scrivere, ad esempio
<font color="silver"> </font>
Nella tabella seguente vi sono I nomi di sedici colori standard utilizzabili in html
black="#000000"
green="#008000"
silver="#C0C0C0"
lime="#00FF00"
gray="#808080"
olive="#808000"
white="#FFFFFF"
yellow="#FFFF00"
maroon="#800000"
navy="#000080"
red="#FF0000"
blue="#0000FF"
purple="#800080"
teal="#008080"
fuchsia="#FF00FF"
aqua="#00FFFF"
Per avere un numero di combinazioni maggiori si può utilizzare la tecnica rgb; con tale
tecnica che prende il nome da Red, Green e Blue, si possono ottenere 16 milioni di colori
componendo opportunamente il rosso, il verde e il giallo
Ogni colore fondamentale sarà rappresentato da un numero ad 8 bit , che può variare
dunque da 0 a 255, il quale indicherà la gradazione del colore. I numeri sono espressi con
cifre esadecimali. Le prime due cifre del codice del colore che vogliamo comporre
indicheranno la gradazione del rosso, le seconde due la gradazione del verde e le ultime
due la gradazione del blu. Ad esempio il colore rosso puro avrà la massima intensità per il
3
Corso html- lez. 2 Contenuto di una pagina html
rosso ed intensità nulle per verde e blu per cui il codice rgb per il rosso sarà FF0000.
poiché il bianco è dato dalla somma dei colori fondamentali alla massima intensità si avrà
che il suo codice è FFFFFF, e così via. Sono possibili dunque 256 * 256 * 256 combinazioni
diverse per circa 16 milioni di colori possibili.
Tavola internazionale dei colori:
Nome del colore
Codice colore
RGB
Codice colore RGB
Esadecimale
aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgray
darkgreen
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia
gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
honeydew
hotpink
#F0F8FF
#FAEBD7
#00FFFF
#7FFFD4
#F0FFFF
#F5F5DC
#FFE4C4
#000000
#FFEBCD
#0000FF
#8A2BE2
#A52A2A
#DEB887
#5F9EA0
#7FFF00
#D2691E
#FF7F50
#6495ED
#FFF8DC
#DC143C
#00FFFF
#00008B
#008B8B
#B8860B
#A9A9A9
#006400
#BDB76B
#8B008B
#556B2F
#FF8C00
#9932CC
#8B0000
#E9967A
#8FBC8F
#483D8B
#2F4F4F
#00CED1
#9400D3
#FF1493
#00BFFF
#696969
#1E90FF
#B22222
#FFFAF0
#228B22
#FF00FF
#DCDCDC
#F8F8FF
#FFD700
#DAA520
#BEBEBE
#008000
#ADFF2F
#F0FFF0
#FF69B4
240 248 255
250 235 215
0 255 255
127 255 212
240 255 255
245 245 220
255 228 196
000
255 255 205
0 0 255
138 43 226
165 42 42
222 184 135
95 158 160
127 255 0
210 105 30
255 127 80
100 149 237
255 248 220
220 20 60
0 255 255
0 0 139
0 139 139
184 134 11
169 169 169
0 100 0
189 183 107
139 0 139
85 107 47
255 140 0
153 50 204
139 0 0
233 150 122
143 188 143
72 61 139
47 79 79
0 206 209
148 0 211
255 20 147
0 191 255
105 105 105
30 144 255
178 34 34
255 250 240
34 139 34
255 0 255
220 220 220
248 248 255
255 215 0
218 165 32
128 128 128
0 128 0
173 255 47
240 255 240
255 105 180
4
Corso html- lez. 2 Contenuto di una pagina html
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
navy
oldlace
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
red
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategray
snow
#CD5C5C
#4B0082
#FFFFF0
#F0D58C
#E6E6FA
#FFF0F5
#7CFC00
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#90EE90
#D3D3D3
#FFB6C1
#FFA07A
#20B2AA
#87CEFA
#778899
#B0C4DE
#FFFFE0
#00FF00
#32CD32
#FAF0E6
#FF00FF
#800000
#66CDAA
#0000CD
#BA55D3
#9370DB
#3CB371
#7B68EE
#00FA9A
#48D1CC
#C71585
#191970
#F5FFFA
#FFE4E1
#FFE4B5
#FFDEAD
#000080
#FDF5E6
#808000
#6B8E23
#FFA500
#FF4500
#DA70D6
#EEE8AA
#98FB98
#AFEEEE
#DB7093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
#B0E0E6
#800080
#FF0000
#BC8F8F
#4169E1
#8B4513
#FA8072
#F4A460
#2E8B57
#FFF5EE
#A0522D
#C0C0C0
#87CEEB
#6A5ACD
#708090
#FFFAFA
5
205 92 92
75 0 130
255 240 240
240 230 140
230 230 250
255 240 245
124 252 0
255 250 205
173 216 230
240 128 128
224 255 255
250 250 210
144 238 144
211 211 211
255 182 193
255 160 122
32 178 170
135 206 250
119 136 153
176 196 222
255 255 224
0 255 0
50 205 50
250 240 230
255 0 255
128 0 0
102 205 170
0 0 205
186 85 211
147 112 219
60 179 113
123 104 238
0 250 154
72 209 204
199 21 133
25 25 112
245 255 250
255 228 225
255 228 181
255 222 173
0 0 128
253 245 230
128 128 0
107 142 35
255 165 0
255 69 0
218 112 214
238 232 170
152 251 152
175 238 238
219 112 147
255 239 213
255 218 185
205 133 63
255 192 203
221 160 221
176 224 230
128 0 128
255 0 0
188 143 143
65 105 225
139 69 19
250 128 114
244 164 96
46 139 87
255 245 238
160 82 45
192 192 192
135 206 235
106 90 205
112 128 144
255 250 250
Corso html- lez. 2 Contenuto di una pagina html
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen
#00FF7F
#4682B4
#D2B48C
#008080
#D8BFD8
#FF6347
#40E0D0
#EE82EE
#F5DEB3
#FFFFFF
#F5F5F5
#FFFF00
#9ACD32
0 255 127
70 130 180
210 180 140
0 128 128
216 191 216
253 99 71
64 224 208
238 130 238
245 222 179
255 255 255
245 245 245
255 255 0
154 205 50
Attributi del tag body
Il corpo del documento html, come abbiamo visto nella prima lezione è racchiuso fra i tag
<BODY> e </BODY>. Esso può avere degli attributi
<BODY attributo1=valore Attributo2=valore …>
I margini
Un primo attributo consente di stabilire i margini del documento rispetto alla finestra del
browser
-
leftmargin consente di determinare il margine sinistro
-
topmargin consente di determinare il margine destro
Per esempio con
<BODY TOPMARGIN=400>
Otteniamo che il documento si trovi a 400 pixel dal bordo superiore della finestra del
browser
6
Corso html- lez. 2 Contenuto di una pagina html
http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi8.htm
mentre con
<BODY TOPMARGIN=400 LEFTMARGIN=100>
otteniamo uno spostamento dal margine sinistro di 100 pixel
/http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi9.htm
7
Corso html- lez. 2 Contenuto di una pagina html
Colore del testo
Con l’attributo text possiamo determinare il colore del testo usando il nome di uno dei
colori fondamentali o il codice rgb.
Ad esempio
<BODY text="green">
/http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi10.htm
oppure con rgb
<BODY text="#FF0000">
/http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi11.htm
Notiamo come il codice del colore RGB debba essere preceduto dal simbolo #.
Colore dei collegamenti ipertestuali
Con l’attributo link possiamo dare un colore ai collegamenti ipertestuali. Ad esempio
<BODY text="#FF0000" link="maroon">
8
Corso html- lez. 2 Contenuto di una pagina html
<A HREF="http://www.alessandromanzoni.com">www.alessandromanzoni.com</A>
/http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi12.htm
Colore di sfondo
Con l’attributo bgcolor (background color) si può impostare il colore di sfondo della
pagina.
La sintassi è
bgcolor=”colore”
ad esempio con
<BODY text="#FF0000" link="maroon" bgcolor="green">
otteniamo
9
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi13.htm
Immagini di sfondo
Spesso lo sfondo di una pagina web si ottiene mediante l’utilizzo di immagini disponibili
in formato elettronico. Ad esempio supponiamo di avere la seguente immagine
E supponiamo che essa si trovi in una cartella denominata esempio1 presente nella stessa
directory della nostra pagina web. Con il seguente codice
<BODY text="#FF0000" link="maroon" background="esempio1/ritratto.jpg">
Otteniamo il seguente effetto
Come si vede, l’immagine viene replicata più volte per riempire tutto lo schermo
10
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi14.htm
Spesso si utilizza anche il cosiddetto effetto texture in cui si utilizza un’immagine di
dimensioni molto piccole e la sua replica da luogo all’impressione di avere uno sfondo
continuo.
Ad esempio con la seguente immagine
Otteniamo questo effetto
/esempi\sfondo\Keeley Hazell Fan Club.htm
oppure con la seguente immagine
11
Corso html- lez. 2 Contenuto di una pagina html
Otteniamo
/http://www.teresaventrone.it/didattica/corsohtml/esempi/sfondo/Reich & Schön Hunter Tylo.htm
Con l'attributo background si può usare anche la proprietà
BGPROPERTIES=fixed
la quale fa in modo che quando facciamo scorrere la pagina web con la barra spaziatrice
verticale lo sfondo rimanga fisso.
Vedi esempio
/esempi\Example%20of%20the%20BGPROPERTIES%20attribute%20for%20BODY.htm
Caratteri speciali
Una pagina html è in formato ascii, quindi si pone il problema di rappresentare i caratteri
speciali non presenti nel codice ascii e i caratteri che sono utilizzati già da html per
esprimere i tag come < e >. In questo caso vengono in aiuto le entità esse sono costrutti
sintattici definiti nella tabella iso8859-1 che consentono di far visualizzare ad un browser i
caratteri speciali. Come si può vedere dalla tabella seguente si può far riferimento ad un
simbolo mediante il codice o il nome dell’entità.
12
Corso html- lez. 2 Contenuto di una pagina html
iso8859-1 table
Description
===================================
quotation mark
ampersand
less-than sign
greater-than sign
Code
============
&#34; --> "
&#38; --> &
&#60; --> <
&#62; --> >
Description
===================================
non-breaking space
inverted exclamation
cent sign
pound sterling
general currency sign
yen sign
broken vertical bar
Char Code
==== ============
&#160; -->
¡
&#161; --> ¡
¢
&#162; --> ¢
£
&#163; --> £
¤
&#164; --> ¤
¥
&#165; --> ¥
¦
&#166; --> ¦
section sign
umlaut (dieresis)
§
¨
copyright
feminine ordinal
left angle quote, guillemotleft
not sign
soft hyphen
registered trademark
macron accent
©
ª
«
¬
degree sign
plus or minus
superscript two
superscript three
acute accent
micro sign
paragraph sign
middle dot
cedilla
superscript one
masculine ordinal
right angle quote, guillemotright
fraction one-fourth
fraction one-half
fraction three-fourths
inverted question mark
capital A, grave accent
capital A, acute accent
capital A, circumflex accent
capital A, tilde
capital A, dieresis or umlaut mark
capital A, ring
capital AE diphthong (ligature)
capital C, cedilla
capital E, grave accent
capital E, acute accent
capital E, circumflex accent
capital E, dieresis or umlaut mark
capital I, grave accent
capital I, acute accent
capital I, circumflex accent
capital I, dieresis or umlaut mark
capital Eth, Icelandic
°
±
²
³
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
®
¯
&#167; --> §
&#168; --> ¨
&#169; -->
&#170; -->
&#171; -->
&#172; -->
&#173; -->
&#174; -->
&#175; -->
&#176;
&#177;
&#178;
&#179;
&#180;
&#181;
&#182;
&#183;
&#184;
&#185;
&#186;
&#187;
&#188;
&#189;
&#190;
&#191;
&#192;
&#193;
&#194;
&#195;
&#196;
&#197;
&#198;
&#199;
&#200;
&#201;
&#202;
&#203;
&#204;
&#205;
&#206;
&#207;
&#208;
13
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
©
ª
«
¬
®
¯
°
±
²
³
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Entity name
==============
&quot;
--> "
&amp;
--> &
&lt;
--> <
&gt;
--> >
Entity name
==============
&nbsp;
-->
&iexcl; --> ¡
&cent;
--> ¢
&pound; --> £
&curren; --> ¤
&yen;
--> ¥
&brvbar; --> ¦
&brkbar; --> &brkbar;
&sect;
--> §
&uml;
--> ¨
&die;
--> &die;
&copy;
--> ©
&ordf;
--> ª
&laquo; --> «
&not;
--> ¬
&shy;
-->
&reg;
--> ®
&macr;
--> ¯
&hibar; --> &hibar;
&deg;
--> °
&plusmn; --> ±
&sup2;
--> ²
&sup3;
--> ³
&acute; --> ´
&micro; --> µ
&para;
--> ¶
&middot; --> ·
&cedil; --> ¸
&sup1;
--> ¹
&ordm;
--> º
&raquo; --> »
&frac14; --> ¼
&frac12; --> ½
&frac34; --> ¾
&iquest; --> ¿
&Agrave; --> À
&Aacute; --> Á
&Acirc; --> Â
&Atilde; --> Ã
&Auml;
--> Ä
&Aring; --> Å
&AElig; --> Æ
&Ccedil; --> Ç
&Egrave; --> È
&Eacute; --> É
&Ecirc; --> Ê
&Euml;
--> Ë
&Igrave; --> Ì
&Iacute; --> Í
&Icirc; --> Î
&Iuml;
--> Ï
&ETH;
--> Ð
Corso html- lez. 2 Contenuto di una pagina html
capital N, tilde
capital O, grave accent
capital O, acute accent
capital O, circumflex accent
capital O, tilde
capital O, dieresis or umlaut mark
multiply sign
capital O, slash
capital U, grave accent
capital U, acute accent
capital U, circumflex accent
capital U, dieresis or umlaut mark
capital Y, acute accent
capital THORN, Icelandic
small sharp s, German (sz ligature)
small a, grave accent
small a, acute accent
small a, circumflex accent
small a, tilde
small a, dieresis or umlaut mark
small a, ring
small ae diphthong (ligature)
small c, cedilla
small e, grave accent
small e, acute accent
small e, circumflex accent
small e, dieresis or umlaut mark
small i, grave accent
small i, acute accent
small i, circumflex accent
small i, dieresis or umlaut mark
small eth, Icelandic
small n, tilde
small o, grave accent
small o, acute accent
small o, circumflex accent
small o, tilde
small o, dieresis or umlaut mark
division sign
small o, slash
small u, grave accent
small u, acute accent
small u, circumflex accent
small u, dieresis or umlaut mark
small y, acute accent
small thorn, Icelandic
small y, dieresis or umlaut mark
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
&#209;
&#210;
&#211;
&#212;
&#213;
&#214;
&#215;
&#216;
&#217;
&#218;
&#219;
&#220;
&#221;
&#222;
&#223;
&#224;
&#225;
&#226;
&#227;
&#228;
&#229;
&#230;
&#231;
&#232;
&#233;
&#234;
&#235;
&#236;
&#237;
&#238;
&#239;
&#240;
&#241;
&#242;
&#243;
&#244;
&#245;
&#246;
&#247;
&#248;
&#249;
&#250;
&#251;
&#252;
&#253;
&#254;
&#255;
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
&Dstrok;
&Ntilde;
&Ograve;
&Oacute;
&Ocirc;
&Otilde;
&Ouml;
&times;
&Oslash;
&Ugrave;
&Uacute;
&Ucirc;
&Uuml;
&Yacute;
&THORN;
&szlig;
&agrave;
&aacute;
&acirc;
&atilde;
&auml;
&aring;
&aelig;
&ccedil;
&egrave;
&eacute;
&ecirc;
&euml;
&igrave;
&iacute;
&icirc;
&iuml;
&eth;
&ntilde;
&ograve;
&oacute;
&ocirc;
&otilde;
&ouml;
&divide;
&oslash;
&ugrave;
&uacute;
&ucirc;
&uuml;
&yacute;
&thorn;
&yuml;
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
&Dstrok;
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
Facciamo un esempio. Supponiamo che nella seguente pagina web vogliamo porre il nome
dell’autore fra < e >
14
Corso html- lez. 2 Contenuto di una pagina html
Prendiamo semplicemente il testo e apportiamo la modifica
Il risultato che otteniamo è semplicemente la scomparsa del testo racchiuso fra tali simboli
15
Corso html- lez. 2 Contenuto di una pagina html
Questo perché il browser ritiene di trovarsi di fronte ad un tag
/http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi15.htm
se invece utilizziamo le entità ed esprimiamo il simbolo < con il codice nominale &lt e il
simbolo > con il codice &gt
&ltAlessandro Manzoni&gt
Otteniamo il risultato voluto
/http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi16.htm
lo stesso risultato si ottiene naturalmente usando il codice numerico per le entità
16
Corso html- lez. 2 Contenuto di una pagina html
&#060Alessandro Manzoni&#062
/http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi17.htm
Formattazione del testo
Al testo si possono naturalmente applicare vari effetti di formattazione come corsivo,
grassetto e così via, utilizzando dei tag. I tag di questo tipo si distinguono fra logici e fisici.
Tali tag hanno lo stesso effetto ma quelli logici tendono a mettere in evidenza il senso
logico dell’effetto che si vuole realizzare. Ad esempio, se voglio far apparire in grassetto
un testo userò il tag <B> che sta per bold ma avrò lo stesso effetto usando il tag
<STRONG> che mette in evidenza che voglio enfatizzare il testo nella pagina web.
Esempi di tag logici sono
<EM> Evidenziato </EM>
<STRONG> Molto evidenziato </STRONG>
<CITE> Citazione </CITE>
<CODE> Codice </CODE>
<SAMP> Esempio </SAMP>
<KBD> Immissione da tastiera </KBD>
<VAR> Variabile </VAR>
<DFN> Definizione </DFN>
<ADDRESS> Indirizzo </ADDRESS>
/http://www.teresaventrone.it/didattica/corsohtml/esempi/stilelogico.htm
17
Corso html- lez. 2 Contenuto di una pagina html
esempi di tag fisici sono
<B> Grassetto </B>
<I> Corsivo </I>
<TT> Font monospazio </TT>
<U> Sottolineato </U>
<S> Barrato </S>
<BIG> Più grande </BIG>
<SMALL> Più piccolo </SMALL>
<SUB> Pedice </SUB>
<SUP> Apice </SUP>
/http://www.teresaventrone.it/didattica/corsohtml/esempi/stilefisico.htm
Testo preformattato
Supponiamo di avere un testo ascii in cui vi siano effetti di formattazione relativi alla
distribuzione del testo come rientri, spaziature, interlinee, ecc.
18
Corso html- lez. 2 Contenuto di una pagina html
Come sappiamo il browser non comprenderà queste informazioni perché non espresse
tramite tag
L’unica soluzione sarebbe introdurre in ogni punto del testo i tag opportuni oppure far
riferimento al tag di preformattazione <PRE>. Se racchiudiamo tutto il file ascii fra i tag
<PRE> e </PRE> otteniamo l’effetto di far visualizzare il file secondo gli effetti di
spaziatura presenti nel file di testo.
19
Corso html- lez. 2 Contenuto di una pagina html
20
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi18.htm
Ritorno a capo
Abbiamo il seguente testo
Ah per te [1] Orazio prèdica al vento!
Del patrio carcere non sei contento,
La chiave abomini grata a i pudichi,
Agogni a l'aere de' luoghi aprichi.
E dove, o misero, dove n'andrai.
Dove un ricovero trovar potrai,
O de' miei giovini lustri diletto,
O mio carissimo tenue libretto?
Non sai fastidio ch'ha de le rime
Questa de gli arcadi prole sublime?
Né de' romantici ti vuol la fiera
Che siede a i salici libera schiera.
Tu, se tra' lirici pur tenti il volo,
Poco, o mio tenero, t'ergi dal suolo;
Ed oggi innalzasi per nova via
Fin da' suoi numeri l'economia,
Né omai piú reggono piedi né ale
Dietro la lirica universale.
Oggi ciclopica s'è fatta l'arte;
E Bronte e Sterope su per le carte
Con vene tumide, con occhi accesi
E con gli erculei muscoli tesi
21
Corso html- lez. 2 Contenuto di una pagina html
A prova picchiano: Venere guata,
E gli rimescola la limonata:
Mentre il monocolo pastore etnese,
Succiando il femore d'un itacese,
Con urli orribili divelle un pino
E a le nereidi fa il mazzolino.
e sappiamo che il browser non rispetterà la formattazione del testo
Per andare a capo possiamo utilizzare il tag BR che sta per break
22
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/acapo.htm
Il paragrafo
Per individuare un paragrafo in un testo si usa il tag <P>. Il testo compreso fra i tag <P> e
</P> viene considerato come un unico paragrafo e viene introdotta automaticamente una
spaziatura maggiore rispetto al testo precedente. Il testo del paragrafo è automaticamente
allineato a sinistra. Vediamo il seguente esempio
<P>Levatevi dal fianco
Di que' felici che spregiate, e dove
Sta questo onor fate vedervi: allora
Vi crederò. Certo, se a voi consiglio
Chieder dovessi, dir m'udrei: rigetta
L'offerte indegne; de' tuoi re dividi,
Qual ch'ella sia, la sorte. - E perché tanto
A cor questo vi sta? Perché, s'io cado,
Io vi farò pietà; </P><P>ma se, tra mezzo
Alle rovine altrui, ritto io rimango,
Se cavalcar voi mi vedrete al fianco
Del vincitor che mi sorrida, allora
Forse invidia farovvi; e più v'aggrada
Sentir pietà che invidia. Ah! non è puro
Questo vostro consiglio. - Oh! Carlo anch'egli
In cor ti spregerà. - Chi ve l'ha detto?
Spregia egli Svarto, un uom di guerra oscuro,
Che ai primi gradi alzò? </P><P>Quando sul volto
Quel potente m'onori, il core a voi
Chi 'l rivela? E che importa? Ah! voi volete
Sparger di fiele il nappo, a cui non puote
Giungere il vostro labbro. A voi diletta
Veder grandi cadute, ombre d'estinta
Fortuna, o favellarne, e nella vostra
23
Corso html- lez. 2 Contenuto di una pagina html
Oscurità racconsolarvi: è questo
Di vostre mire il segno: un più ridente
Splende alla mia; né di toccarlo il vostro
Vano clamor mi riterrà. Se basta
I vostri plausi ad ottener, lo starsi
Fermo alle prese col periglio, ebbene,
Un tremendo io ne affronto: e un dì saprete
Che a questo posto più mestier coraggio
Mi fu, che un giorno di battaglia in campo.</P>
<P>Perché, se il rege, come suol talvolta,
Visitando le mura, or or qui meco
Svarto trovasse a parlamento, Svarto,
Un di color, ch'ei traditori, e Carlo
Noma Fedeli... oh! di guardarsi indietro
Non è più tempo: egli è destin, che pera
Un di noi due; far deggio in modo, o Veglio,
Ch'io quel non sia.</P>
Otterremo il seguente risultato
/http://www.teresaventrone.it/didattica/corsohtml/esempi/paragrafo.htm
Il tag ha un attributo ALIGN che consentirà di decidere l’allineamento del paragrafo. Sono
possibili i valori
-
ALIGN = “left” per allineare a sinistra
-
ALIGN = “center” per allineamento centrato
24
Corso html- lez. 2 Contenuto di una pagina html
-
ALIGN = “right” per allineare a destra
-
ALIGN = “justify” per allineamento giustificato
/http://www.teresaventrone.it/didattica/corsohtml/esempi/allineamento.htm
Per effettuare un’indentazione cioè un rientro del testo si può utilizzare il tag
BLOCKQUOTE. Ogni volta che il browser trova il tag di apertura indenta il testo verso
destra, mentre ogni volta che trova il tag di chiusura rientra a sinistra. Tali tag possono
anche essere nidificati
Vediamo il seguente esempio
<P align=justify>
<BLOCKQUOTE>Levatevi dal fianco
Di que' felici che spregiate, e dove
Sta questo onor fate vedervi: allora
Vi crederò. Certo, se a voi consiglio
Chieder dovessi, dir m'udrei: rigetta
L'offerte indegne; de' tuoi re dividi,
Qual ch'ella sia, la sorte. <BLOCKQUOTE>
E perché tanto
A cor questo vi sta? Perché, s'io cado,
Io vi farò pietà; ma se, tra mezzo
Alle rovine altrui, ritto io rimango,
Se cavalcar voi mi vedrete al fianco
25
Corso html- lez. 2 Contenuto di una pagina html
Del vincitor che mi sorrida, allora
Forse invidia farovvi;
<BLOCKQUOTE>
e più v'aggrada
Sentir pietà che invidia. Ah! non è puro
Questo vostro consiglio. - Oh! Carlo anch'egli
In cor ti spregerà. - Chi ve l'ha detto?
Spregia egli Svarto, un uom di guerra oscuro,
Che ai primi gradi alzò? Quando sul volto
Quel potente m'onori, il core a voi
Chi 'l rivela? E che importa?
</BLOCKQUOTE>
Ah! voi volete
Sparger di fiele il nappo, a cui non puote
Giungere il vostro labbro. A voi diletta
Veder grandi cadute, ombre d'estinta
Fortuna, o favellarne, e nella vostra
Oscurità racconsolarvi:
</BLOCKQUOTE>è questo
Di vostre mire il segno: un più ridente
Splende alla mia; né di toccarlo il vostro
Vano clamor mi riterrà. Se basta
I vostri plausi ad ottener, lo starsi
Fermo alle prese col periglio,
<BLOCKQUOTE>ebbene,
Un tremendo io ne affronto: e un dì saprete
Che a questo posto più mestier coraggio
Mi fu, che un giorno di battaglia in campo.
Perché, se il rege, come suol talvolta,
Visitando le mura, or or qui meco
Svarto trovasse a parlamento, Svarto,
Un di color, ch'ei traditori, e Carlo
Noma Fedeli...
</BLOCKQUOTE>
oh! di guardarsi indietro
Non è più tempo: egli è destin, che pera
Un di noi due; far deggio in modo, o Veglio,
Ch'io quel non sia.
</BLOCKQUOTE>
</P>
26
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/indentazione.htm
Per gestire l’allineamento del testo si può utilizzare anche il tag DIV che usa l’attributo
align come il tag P
L’unica differenza è che non vengono introdotte le spaziature fra paragrafi diversi.
/http://www.teresaventrone.it/didattica/corsohtml/esempi/tagdiv.htm
Per allineare il testo al centro vi è infine il tag CENTER. Il testo racchiuso fra <CENTER> e
</CENTER> sarà allineato al centro con lo stesso effetto die tag <DIV ALIGN=”center”> e
</DIV>.
Il carattere
Per modificare le caratteristiche del carattere si può utlizzare il tag FONT.
Attributo FACE
Con questo attributo si sceglie il tipo di font utilizzato per visualizzare il testo. Ad esempio
<FONT FACE="arial"> questo è il font arial </FONT><BR>
<FONT FACE="courier"> questo è il font courier </FONT><BR>
<FONT FACE="times new roman"> questo è il font times new roman </FONT><BR>
27
Corso html- lez. 2 Contenuto di una pagina html
<FONT FACE="verdana"> questo è il font verdana </FONT><BR>
<FONT FACE="book antiqua"> questo è il book antiqua </FONT><BR>
<FONT FACE="algerian"> questo è il font algerian </FONT><BR>
<FONT FACE="eras bold itc"> questo è il font eras bold itc </FONT><BR>
<FONT FACE="castellar"> questo è il font castellar </FONT><BR>
/http://www.teresaventrone.it/didattica/corsohtml/esempi/tipofont.htm
Attributo SIZE
L’attributo SIZE consente di determinare la dimensione del carattere. A tale attributo si
possono assegnare valori compresi fra 1 e 7.
Esempio
<FONT FACE="arial" SIZE=1> dimensione del font 1
</FONT><BR>
<FONT FACE="arial" SIZE=2> dimensione del font 2
</FONT><BR>
<FONT FACE="arial" SIZE=3> dimensione del font 3
</FONT><BR>
<FONT FACE="arial" SIZE=4> dimensione del font 4
</FONT><BR>
<FONT FACE="arial" SIZE=5> dimensione del font 5
</FONT><BR>
<FONT FACE="arial" SIZE=6> dimensione del font 6
</FONT><BR>
<FONT FACE="arial" SIZE=7> dimensione del font 7
</FONT><BR>
/http://www.teresaventrone.it/didattica/corsohtml/esempi/dimensionefont.htm
28
Corso html- lez. 2 Contenuto di una pagina html
Colore del carattere
Con l’attributo color possiamo cambiare il colore del carattere con la stessa tecnica vista
per l’attributo text del tag body. Naturalmente in questo caso possiamo fare in modo che il
colore scelto non venga attribuito a tutta la pagina web ma soltanto ad una sua parte.
Vediamo il seguente esempio
<FONT FACE="arial" SIZE=7 color="yellow"> colore giallo
<FONT FACE="arial" SIZE=7 color="green"> colore verde
</FONT><BR>
<FONT FACE="arial" SIZE=7 color="maroon"> colore marrone
<FONT FACE="arial" SIZE=7 color="blue"> colore blu
<FONT FACE="arial" SIZE=7 color="red"> colore rosso
</FONT><BR>
</FONT><BR>
</FONT><BR>
</FONT><BR>
<FONT FACE="arial" SIZE=7 color="#24cc0a"> colore casuale con codice numerico
</FONT><BR>
<FONT FACE="arial" SIZE=7 color="#ffcc0a"> colore casuale con codice numerico
</FONT><BR>
<FONT FACE="arial" SIZE=7 color="#f4ccaa"> colore casuale con codice numerico
</FONT><BR>
/http://www.teresaventrone.it/didattica/corsohtml/esempi/colorefont.htm
29
Corso html- lez. 2 Contenuto di una pagina html
Testo scorrevole
Con il tag marquee possiamo creare un testo scorrevole. All'interno del tag <marquee>
possono essere aggiunti i seguenti attributi:
loop=n indica il numero di volte in cui avverrà dello scorrimento. Ponendo loop=-1 lo
scorrimento avviene all’infinito
behavior= indica il funzionamento del marquee:
scroll (impostazione predefinita). Il testo scorre senza fermarsi per poi riapparire fino a
quando non sono stati terminati i giri (loop) stabiliti. A questo punto scompare.
slide Una volta terminati i giri (loop) stabiliti, il testo si ferma o a destra dello schermo,
o a sinistra, a seconda della direzione di scorrimento.
Alternate Il testo rimbalza da una parte all'altra dello schermo.
direction= indica il verso di scorrimento:
left (impostazione predefinita): verso sinistra
right: verso destra
up: dal basso verso l'alto
down: dall'alto verso il basso
scrolldelay=n indica il numero di millisecondi fra ciascuno dei successivi spostamenti del
testo.
scrollamount=n indica di quanti pixel si deve spostare ogni volta il testo.
bgcolor=colore il marquee scorre su uno sfondo del colore prescelto
title="messaggio" Viene visualizzato un breve messaggio di teso se si passa con il mouse
sopra l'area occupata dal marquee,: funziona come l'attributo "alt" per le immagini"
align= Il marquee si allinea rispetto al testo che lo circonda
top in alto
middle centrato
bottom in basso
height= indica l'altezza del marquee. Può essere espressa in pixel o in percentuale
width= indica la larghezza del marquee. Può essere espressa in pixel o in percentuale
hspace=n horizontal-space: distanza del marquee in orizzontale dal testo o dal margine
verticale della pagina web (come per le immagini)
vspace=n vertical-space: distanza del marquee in verticale dal testo o dal margine
orizzontale della pagina web (come per le immagini) .
30
Corso html- lez. 2 Contenuto di una pagina html
Nel seguente esempio
<marquee
loop=-1
bgcolor="red"
height="100"
hspace="150"
scrollamount="30"
behavior="alternate">PROVA</MARQUEE>
Creiamo un testo scorrevole all’infinito, su un background rosso, alto 100 pixel, distante
dai margini verticali 150 pixel, che avanza di 30 pixel alla volta, e scorre alternativamente
da sinistra a destra e da destra a sinistra.
/http://www.teresaventrone.it/didattica/corsohtml/esempi/marquee.htm
In questo tutorial on-line potete provare interattivamente tutti gli attributi
http://www.webfract.it/GUIDA/tuto4.htm
Con il tag marquee si può far scorrere anche un’immagine. Ad esempio
<marquee
loop=-1
bgcolor="white"
height="100"
hspace="150"
scrollamount="30"
behavior="alternate"><img src="esempio1/Senza nome.bmp"></MARQUEE>
fara’ oscillare l’immagine seguente fra i limiti imposti dall’attributo hspace
31
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/marquee2.htm
I titoli
Per evidenziare titoli nel testo si può usare il tag Hn (H sta per header).
n è un numero che può assumere i valori da 1 a 6. più n è piccolo più grandi saranno le
dimensioni del titolo. Esempio
<H1>esempio con il tag h1</H1>
<H2>esempio con il tag h2</H2>
<H3>esempio con il tag h3</H3>
<H4>esempio con il tag h4</H4>
<H5>esempio con il tag h5</H5>
<H6>esempio con il tag h6</H6>
32
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/titolo.htm
Un ulteriore effetto per mettere in evidenza una parte di una pagina web si può ottenere
mediante il tag HR il quale consente di inserire delle righe orizzontali nella pagina con
diverse caratteristiche.
Vi è anzitutto l’attributo ALIGN per allineare la riga a sinistra, al centro o a destra. Poi vi è
l’attributo WIDTH che determina la larghezza orizzontale della barra e che può essere
espresso in pixel o in percentuale rispetto alla dimensione orizzontale della pagina.
L’attributo SIZE consente di determinare lo spessore della riga sempre in pixel o in
percentuale. L’attributo COLOR determina il colore della barra e infine l’attributo
NOSHADE elimina l’effetto tridimensionale che per default accompagna la barra. Ad
esempio
<H1 ALIGN="center">Titolo dell'esempio</H1>
<HR ALIGN="center" WIDTH="50%" SIZE="10" COLOR="red">
<center>
testo sotto la barra
33
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/barra.htm
Le immagini
Abbiamo già accennato alla possibilità di inserire immagini in una pagina web. I formati
delle immagini utilizzabili in una pagina web sono
-
Gif
-
JPG
-
PNG
Per inserire un’immagine in una pagina web si utilizza il tag IMG.
Il codice è il seguente
<IMG SRC=”percorso del file immagine/nome del file immagine”>
Ad esempio
<IMG SRC="esempio1/ritratto.jpg">
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine1.htm
34
Corso html- lez. 2 Contenuto di una pagina html
Si ha l’attributo BORDER che consente di dare un bordo all’immagine il cui spessore è
espresso in pixel. Ad esempio
<IMG SRC="esempio1/ritratto.jpg" BORDER=10>
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine2.htm
L’attributo WIDTH e l’attributo HEIGHT consentono di determinare le dimensioni
dell’immagine e possono essere espressi in percentuale rispetto alle dimensioni della
pagina. Ad esempio
<IMG SRC="esempio1/ritratto.jpg" BORDER=10 WIDTH=80% HEIGHT=70%>
35
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine3.htm
L’attributo ALT consente di definire un commento che è utilizzabile in due casi. Nel primo
caso sostituisce l’immagine quando questa non viene caricata. Consideriamo il seguente
esempio
<IMG SRC="esempio1/ritrato.jpg" BORDER=10 WIDTH=80% HEIGHT=70% ALT="Alessandro
Manzoni">
in cui abbiamo scritto in maniera errata il nome dell’immagine per cui il browser non sarà
in grado di caricare l’immagine. L’effetto che otterremo sarà
36
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine4.htm
L’altro caso è quello in cui con il mouse si passa sull’immagine: in tal caso il commento
apparirà in corrispondenza del passaggio del mouse sull’immagine.
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine5.htm
37
Corso html- lez. 2 Contenuto di una pagina html
Vi è poi l’attributo ALIGN per gestire l’allineamento dell’immagine. Esso può assumere il
valore left in modo che il testo si disponga a destra dell’immagine
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine6.htm
Right in modo che il testo si disponga a sinistra dell’immagine
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine7.htm
AbsBottom in cui il testo si dispone alla base dell’immagine
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine8.htm
38
Corso html- lez. 2 Contenuto di una pagina html
Abbiamo poi AbsMiddle con cui il testo si dispone in modo che l’immagine sia al centro
senza incorniciarla
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine9.htm
Con TextTop il testo si dispone sopra l’immagine senza incorniciarla
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine10.htm
Con Bottom o Baseline l’immagine si dispone in modo che il testo venga incorniciato
partendo dalla base
39
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine11.htm
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine12.htm
Con Middle l’immagine si dispone in modo che il testo venga disposto al cento
40
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine13.htm
Infine con Top l’immagine si dispone in modo che il testo appaia in alto
41
Corso html- lez. 2 Contenuto di una pagina html
/http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine14.htm
Lo stile delle barre di scorrimento
Possiamo cambiare anche l’aspetto delle barre di scorrimento orizzontale e verticale o
scrollbar
utilizzando l’attributo STYLE del tag BODY
Innanzitutto con la proprietà SCROLLBAR-FACE-COLOR
possiamo cambiare il colore del blocco scorrevole o SCROLLBOX
sulla barra di scorrimento. Ad esempio con
<BODY STYLE="SCROLLBAR-FACE-COLOR=yellow">
Otteniamo
/http://www.teresaventrone.it/didattica/corsohtml/esempi/facecolor.htm
42
Corso html- lez. 2 Contenuto di una pagina html
Analogamente con SCROLLBAR-TRACK-COLOR
possiamo cambiare il colore del binario in cui scorre la scrollbox.
Ad esempio con
<BODY STYLE="SCROLLBAR-FACE-COLOR=yellow; SCROLLBAR-TRACK-COLOR=red">
otteniamo
/http://www.teresaventrone.it/didattica/corsohtml/esempi/trackcolor.htm
Come si può notare dal precedente esempio, se utilizziamo solo il FACE-Color anche il
track assume lo stesso colore della scrollbox.
43
Inoltre le varie proprietà dell’attributo
Corso html- lez. 2 Contenuto di una pagina html
STYLE vanno separate da un punto e virgola. In maniera analoga SCROLLBAR-ARROWCOLOR
consente di modificare il colore delle frecce all’interno dei pulsanti della barra.
SCROLLBAR-HIGHLIGHT-COLOR
controlla il colore dell’effetto perimetrale dei blocchi delle barre di scorrimento e così via.
44
Scarica

Contenuto di una pagina html