Lezione 8: PRIMI PASSI IN HTML

Transcript

Lezione 8: PRIMI PASSI IN
HTML
(Fonti w
D
e
f :
H
T
M
L
s
i g
n
i f i c
a
p
Hy
e
r
e
T
x
t
w
w
a
M
. a s p
r k
- u
id
p
e . it, w
a
L
n
g
u
a
g
w
e
INTRODUZIONE
E
X
1
:
1
)
2
P
)
S
R
E
N
C
R
D
I V
E
R
E
R
E
C
U
I
N
D
D
E
N
O
T
C
R
D
I
O
L
T
E
E
S
S
E
T
G
O
U
( P
E
N
T
A
G
I
I N
R
I G
A
<HTML>
<HEAD>
<TITLE>La mia prima pagina web!</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
H
3
E
E
c
X
c
)
3
o
S
:
f a
A
L
t t a
V
A
l a
p
E
R
r i m
I N
a
O
p
M
a
I N
g
A
i n
e
C
h
O
N
t m
l
P
A
G
I N
A
. H
T
M
. T
L
E
:
X
T
)
w
. h
tm
l . it)
4
)
S
c
r i v
i
d
e
n
t r o
q
u
a
l c
h
e
c
o
s
a
n
e
l
t e
s
t o
<HTML>
<HEAD>
<TITLE>La mia prima pagina web!</TITLE>
</HEAD>
<BODY>
Fantastico !!
La mia prima pagina.
</BODY>
</HTML>
5
E
c
E
c
4
Q
i n
n
l ' i n
i l
'
g
a
i l e
n
c
a
t e
n
d
s
o
a
c
I N
O
M
I N
A
C
O
N
P
A
G
I N
A
. H
T
M
L
:
a
d
p
o
r i r e
i l
o
b
u
r o
n
w
f i l e
s
e
d
t r o
i
v
t e
s
i
t a
a
t o
c
g
o
n
( e
i l
s
:
b
r o
w
s
e
<HTML>)
r :
c
a
l o
p
i s
v
c
i s
e
u
c
a
o
l i z
m
z
e
a
s
f o
e
n
r m
z
a
a
p
t t a
r o
r e
b
i
l e
t e
m
s
i !
t i .
n
n
u
M
L
,
m
r e
s
i s
i
d
.
t a
s
r p
z
i o
t o
r e
i v
i d
e
i n
d
u
e
p
a
r t i
f o
n
d
a
m
e
n
t a
l i :
m
a
l i z
t a
z
r e
n
.
c
i m
u
t e
t e
s
n
e
l e
l ' i n
l e
d
,
v
i n
e
n
t o
t e
t e
t a
c
p
s
t t a
' i n
T
e
o
m
t e
r i o
H
e
d
e
L
e
t o
n
l m
.
m
n
l
i l
r r e
o
R
d
n
e
t r a
c
s
a
i o
:
n
t o
e
z
r i a
o
l a
a
m
d
a
t e
l
f o
c
E
i !
t a
i n
A
a
u
u
o
f a
a
A
c
s
u
v
u
r p
V
q
q
o
o
m
u
r o
i ,
t e
c
E
s
p
d
d
L
r i s
t t o
U
A
i l
:
u
u
p
S
o
X
T
)
h
a
i o
,
z
c
i n
d
e
c
i o
n
u
i n
o
i ,
t o
n
q
i l
g
z
t a
e
e
a
a
b
n
d
d
o
i ,
d
a
l
o
e
r p
l e
p
r o
t i e
e
l
h
l
n
o
u
c
n
e
c
J a
u
v
m
a
e
,
n
i l
t o
c
c
o
o
d
i c
i n
f o
n
t i e
e
n
J a
e
v
t u
a
s
c
t t i
r i p
g
l i
t
e
e
l e
q
u
m
a
e
n
n
t ' a
t i
d
e
l t r o
l l a
v
i e
n
e
r .
n
u
o
t
s
e
u
d
l e
w
d
a
e
p
a
m
s
r u
e
o
e
n
l o
r i e
t o
n
,
d
o
m
i
n
a
a
n
p
o
p
r m
n
a
a
v
r e
z
i s
n
u
i o
t e
a
n
m
l i z
i
n
a
z
e
a
s
c
t e
e
i c
s
a
u
r a
s
a
r i e
l l ' i n
m
t e
e
n
a
r n
t e
l
o
b
d
r o
e
w
s
l l o
e
r
p
e
r
PRIMI PASSI ( SF
C
a
m
b
i a
r e
l o
s
f o
n
d
o
:
<BODY BGCOLOR="#FFFFFF">
Qualcosa di divertente
</BODY>
Quale colore scelgo:
O
N
D
O
E
F
O
RMAT
T
AZ
IO
N
E
)
METTERE UN IMMAGINE COME SFONDO
<BODY BACKGROUND="ilmiofondo.gif">
</BODY>
Consiglio: volete trovare una immagine velocemente? Provate Google nella sezione Image
(esempio, http://www.google.com/imghp?hl=it)
P
o
s
s
i a
m
o
s
c
r i v
e
r e
i n
g
r a
s
s
e
t t o
.
Qualcosa di divertente
</BODY>
Q
p
u
u
n
e
l l o
t o
c
i n
h
p
e
o
s
i
t i a
m

d
i c
f i n
o
e
n
a
d
o
q
a
u
e
l
s
b
r o
t o
p
w
u
s
e
n
r
t o
è
d
i
v
.
Lo stesso principio si applica per il corsivo...
Qualcosa di divertente
</BODY>
...e sottolineato.
Qualcosa di divertente
</BODY>
i s
u
a
l i z
z
a
r e
i n
g
r a
s
s
e
t t o

d
a
q
u
e
s
t o
Questi tags possono essere combinati insieme.
Qualcosa di divertente
</BODY>
Questo è un primo esempio di tags annidati. Se usate tags in combinazione, per evitare confusione nella
visualizzazione da parte del browser, devono essere annidati fra loro e non sovrapposti. Ad esempio...
<THIS><THAT></THIS></THAT>
<THIS><THAT></THAT></THIS>
Tags sovrapposti... sbagliato
Tags annidati... giusto
MANIPOLARE I FONT
SIZE.
Qualcosa di divertente
</BODY>
Qualcosa di
divertente
I fonts possono avere 7 grandezze:
piccolissimo
1
piccolo normale
2
3
medio largo
4
5
grande & grandissimo!
6
7
BODY BGCOLOR="#FFFFFF">
Qalcosa didivertente
</BODY>
Attenzione però: i font verranno visualizzati soltanto se sono stati installati sul computer
COMBINARE I TAG (CORRETTO ANNIDAMENTO)
Qualcosa di divertente
</BODY>
Qualcosa di
divertente
Vorrei sottolineare ancora una volta che tags multipli devono essere annidati.
<TAG3><TAG2><TAG1>Ciao a tutti!</TAG1></TAG2></TAG3>
Non importa quale sia il primo tag. Se vuoi scrivere qualcosa in rosso e grassetto devi decidere quale indicare
per primo, ma puoi metterli in qualsiasi ordine. Ad esempio..
Il modo più veloce di confondere un browser è quello di sovrapporre i tags...
COLORI PREDEFINITI
Il browser ha configurato di “default” i colori del testo, dei links, dei links attivi e dei links visitati. Ad
esempio questi:
Il testo è nero
I links sono blu
I links attivi sono rossi
I links visitati sono viola
E' possibile cambiarli se è necessario (NB, Tutti ormai si sono abituati a vedere i links blu, perchè confondere
le idee?). Puoi cambiare la configurazione di defalut per l'intero documento nel tag <BODY>.
<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
</BODY>
Ancora non ho spiegato come fare un link, questo era solo un esempio di come
cambiare i colori. In seguito vedremo come creare un link.
Come vedi, ora il colore di sfondo è nero e il testo è giallo.
I links ora sono rossi
I links visitati sono rosso scuro
E i links attivi sono verdi.
ANCORA SULLA FORMATTAZIONE
I crateri per il ritiorno a capa che inserico come nell’esempio sottostante non vengono considerati!
Ehi!
Ma
che
sta
succedendo??
</BODY>
Ehi! Ma che sta succedendo??
Semplice, il browser non riconosce la formattazione. Se non viene indicato diversamente, il browser
visualizza i caratteri uno dietro l'altro. Se vuoi andare a capo devi utilizzare un tag specifico.
Ehi! 
Ma 
che 
sta 
succedendo??
</BODY>
Ehi!
Ma
che
sta
succedendo??
 dice al browser di andare a capo. Simile a è . E' esattamente la stessa cosa, ma oltre ad andare a
capo, aggiunge un'interlinea.
Ehi!
Ma
che
sta
succedendo??
</BODY>
Ehi!
Ma
che
sta
succedendo??
Questi sono esempi di tags che non hanno bisogno di chiusura. Un'altro aspetto importante: non puoi usarne
più di uno alla volta. In altre parole, specificando non otterrai tre interlinee, ma soltanto una.
Come fare allora per aggiungere altre linee vuote? Te lo dico subito.
Esempio:
Qualcosa
di
</BODY>
divertente
Il browser non riconosce più di uno spazio, questo se da un lato può sembrare scomodo (e non proprio furbo),
dall'altro ti permette di avere un controllo assoluto sull'aspetto del documento.
Questo è un piccolo codice che significa "spazio" per il browser ->  
Provando cosi……
Qualcosa        
di        
divertente
</BODY>
Qualcosa
di
divertente
L' & indica l'inizio di un carattere speciale, mentre ; ne indica la fine e le lettere tra questi due caratteri sono
una specie di abbreviazione. Ecco un esempio di caratteri speciali. (Nota: devono essere scritti in minuscolo)
•
•
•
  ( spazio)
< (minore)
> (maggiore)
•
•
•
I M
M
A
G
& (&)
" (virgolette)
 (trattino)
I N
I
Dobbiamo specificare il percorso (dove si trova "fisicamente" l'immagine) e la grandezza.
<IMG SRC="copper.gif" WIDTH=82 HEIGHT=68>
</BODY>
Nota che il codice specifica non solo il nome dell'immagine, ma dove si trova. Il codice dell'esempio
precedente, "copper.gif", significa che il browser cercerà l'immagine copper.gif nella stessa cartella in cui
si trova il documento html. Qui sotto trovi alcuni diagrammi che possono esserti d'aiuto.
significa che
l'immagine si trova nella stessa
cartella in cui si trova il documento
html che la richiama.
SRC="copper.gif"
significa
che l'immagine si trova in una cartella
posizionata sotto quella in cui si trova
il documento html che la richiama.
Ovviamente, si può scendere (o
salire) di tanti livelli quanto sono
necessari.
SRC="images/copper.gif"
significa che
l'immagine si trova in una cartella
posizionata sopra quella in cui si
trova il documento html che la
richiama.
SRC="../copper.gif"
significa
che l'immagine si trova due cartelle
sopra quella in cui si trova il
documento html che la richiama.
SRC="../../copper.gif"
SRC="../images/copper.gif"
significa che l'immagine si trova una
cartella sopra quella in cui si trova il
documento html che la richiama, a
sua volta dentro un'altra cartella.
SRC="../../../other/images/copper.gif"
Non cercherò di spiegare questo caso a parole:
spero che tu riesca a capirlo
BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif">
</BODY>
Come puoi vedere , anche se non sono state specificate le dimensioni, l'immagine viene visualizzata
correttamente. E' importante però inserire le dimensioni dell'immagine perchè in questo modo il browser
predispone già lo spazio necessario ad ospitarla e rende lo scaricamento della pagina più veloce.
Proviamo ora ad aggiungere altri parametri
</BODY>
</BODY>
Puoi cambiare le dimensioni dell'immagine indicandone di nuove. Da una piccola immagine di colore
uniforme come questo piccolo quadrato -> <- ( un quadrato di 2x2 pixel) si possono ottenere...
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1>
<CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER>
</BODY>
CREARE UN LINK
PRIMA METTO UN’ANCORA (tag <A>... </A>)

tas
a m
Me
Y
ti c
i a p
tto
r o
p
c

e
s
Y
s
ti c
i a p
p
i v
am
e
n
te
i n
s
e
r i s
c
s
o
l ’u
r l
i n
q
u
e
s
to
m
o
d
o
:
>
tas
tto
</A>
a
Y
c
OD
an
u
l i c
c
 q
E s
o
u
o
! !
r i m
n
l i n
k
a p
agi n
al l a p
a.
agi n
a d
e
l
l ab
o
r ato
r i o
r i o
<A HREF="http://sansone.crema.unimi.it/~fscotti/"> q
<- -
c
l i c

u
i
</A>
INDENTAZIONI
<B
F
ODY
a
L
n
t a
a
m
M
e
p
r o
i a
p
u
a
c
L
p
n
d

q
u
i
</ A>
OTE>
n
t i
r e
u
c
" h
Q
o
o
g
=
a
u
o
n
e
a
l i n
c
l i
r t i c
m
a
r i m
EF
l i c
g
a
! !
n
OC
r a
t e
v
p
R
<- -
p
o
r i o
<A H
F
t i c
t t o

s
n
e
f r a
a
o
l l e
r s
i .
K
Q
>
d
U
s
i
i
e
r i e
t t i v
a
s
l e
e
t t o
d
m
OTE>
r v
i
e
i z
r i
i
d
e
" t r a
n
t e
t e
s
d
i
l e
i z
o
s
i o
t t o
m
e
a
n
r v
t i c
i "
i z
i l
i
i
n
e
d
d
o
d
m
i
i
r e
i
" n
" p
e
t e
e
w
r i n
d
i
,
s
p
c
"
" n
r i m
i p
e
U
i
t i q
s
a
d
e
n
i
u
f r a
b
e
e
u
t t e
t u
o
t ,
s
n
i
" ,
t t e
c
e
s
o
o
l a
n
a
m
o
r e
p
c
s
o
u
v
r t a
i
t u
t e
i l u
In
m
t t i
p
e
p
a
n
s
t e
r n
t i
t o
o
n
"
o
e
n
t ,
e
l
( g
t e
e
a
n
c
l a
u
d
o
i n
r s
t e
o
t i
a
o
d
)
d
c
e
h
l
e
LISTE
Cosa desidero per Natale
<UL>
<LI>un grosso camion rosso
<LI>una velocissima barca a vela
<LI>una batteria
<LI>una pistola a spruzzo
</UL>
</BODY>
•
•
•
•
un grosso camion rosso
una velocissima barca a vela
una batteria
una pistola a spruzzo
Come si costruisce una lista ordered ? Facile! Sostituisci il tag <UL> con <OL>.
<OL>
<LI>un grosso camion rosso
<LI>una velocissima barca a vela
<LI>una batteria
<LI>una pistola a spruzzo
</OL>
</BODY>
Con il tag <PRE> (preformat), possiamo visualizzare esattamente quello che abbiamo scritto.
<PRE>
\|/
(@ @)
+----oOO----(_)-----------+
|
BARRY GOLDWATER
|
|
for
|
|
President
|
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</PRE>
</BODY>
\|/
(@ @)
+----oOO----(_)-----------+
|
BARRY GOLDWATER
|
|
for
|
|
President
|
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
Nota che ho usato un font a sp
az
i atur a fi ssa.

Lezione 8: PRIMI PASSI IN HTML

Transcript

Documenti analoghi

new farma press beauty total body

ELEMENTI DI BASE DI UNA PAGINA HTML INTESTARE

Writing and Representing the Body in Eighteenth

al di là delle idee, al di là di ciò che è giusto o ingiusto c`è un luogo

regolamento body painting

Bar Mediterraneo Bar

Troppo vestiti: spesso ammalati

GIURIA BODY PAINTING 2011

www.webmasterpoint.org Html > Guida html