P racticas d e H T M L
P r a c t ic a s d e H T M L
1.
P a g in a b á sic a
E n u n p r o c e s a d o r d e t e x t o c u a l q u ie r a te c l e a r e l s i g u ie n t e c ó d i g o
< H T M L >
< H E A D > < T I T L E >
M i
p r i m e r a
p a g i n a
m i
p r i m e r a
p a g i n a,
Web
</TITLE>
< / H E A D >
< B O D Y > E s t a
e s
l e n g u a j e c o s a s
H T M L
m a s
e s
f á c i l ,
es
muy
pronto
sencilla,
estaré
en
pero
como
condiciones
el de
hacer
i n t e r e s a n t e s .
< / B O D Y >
< / H T M L >
G u a rd a r e l arc h iv o c om o
P r a c t i c a 1 .h t m l
e n form ato te xto y v isu aliza rlo c o n e l
n av eg ad o r.
2.
F o n d o s d e p á g in a , c a b e c e r a s y b lo q u e s
E n u n p r o c e s a d o r d e t e x t o c u a l q u ie r a te c l e a r e l s i g u ie n t e c ó d i g o
<h tm l> <h ea d> <title>Practica
de
cabeceras
y
bloques</title>
</ he ad>
<b od y
<h 2
bgcolor="#EBDCA7">
align="center">Pr act icas
de
encabezados
y
bloques
de
te xt o</h2> <h r> <d iv
align="center"> <h1>Encabezado
de
nivel
1
<h2>Encabezado
de
nivel
2</h2>
<h3>Encabezado
de
nivel
3</h3>
<h4>Encabezado
de
nivel
4</h4>
<h5>Encabezado
de
nivel
5</h5>
<h6>Encabezado
de
niv el
6</h6>
<p>Parrafo cual,
<hr
dentro
hereda
la
width="50%"
del
</h1>
&lt;DIV&gt;
centrado,
por
lo
alineación</p>
size="5">
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P ág in a 1 d e 1 3
P racticas d e H T M L
</ di v>
<h r>
<b lo ckquote>Parrafos
con
diferentes
al in eaciones</blockquote >
<p >P arrafo
fuera
del
&lt ;DIV&gt;
la
a lineación
izquierda
por
<p
a lign="right">Parrafo
<p
a lign="center">Parraf o
centrado,
por
lo
cual
tom a
defecto</p>
alineado
a
la
derecha</p>
centrado</p>
<h r>
co n
esta
línea
co mp robamos
que
el
es pa cios
los
saltos
ni
H
T
M
L
no
respeta
ni
los
d e
lí ne a
<p re > Pe ro no s lo
si
incluimos
muestra
el
la
T
etiqueta
E
X
&lt;PRE&gt;
T
O
tal
y
como
e scribimos
</ pr e>
<p >H TML qu er emos en ti dad
separa añadir que
lo
las mas
palab ras blan cos,
represent a
del
texto
debemos
con hacer
(&amp;nb sp;)como
un
blanco,
si
referencia por
a
la
ejemplo:
&n bs p;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;& nb sp;&nbsp;&nbsp;&nbsp ; <p >
Para
Go nz alez
cualquier
esto</p>
consu lta
dirigirse
a
<address>
Juán
</address><p>
</ bo dy> </ ht ml>
G u a rd a r e l arc h iv o c om o
P r a c t i c a 2 .h t m l
e n form ato te xto y v isu aliza rlo c o n e l
n av eg ad o r.
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P ág in a 2 d e 1 3
P racticas d e H T M L
3.
R e sa lta d o s d e te xto y c o n tr ol d e fu e n tes
C o n l a s e t i q u e t a s d e c o n t r o l d e te x t o e s t u d i a d a s c o n s e g u i r l o s e f e c t o s s i g u i e n t e s : .
A g r e g a r a d e m á s a l a p a g i n a d if e r e n t e s e j e m p l o s d e e t i q u e t a s d e r e s a lt a d o
G u a rd a r e l arc h iv o c om o
P r a c t i c a 3 .h t m l
e n form ato te xto y v isu aliza rlo c o n e l
n av eg ad o r.
4 . L ista s
E n u n p r o c e s a d o r d e t e x t o c u a l q u ie r a te c l e a r e l s i g u ie n t e c ó d i g o
< H T M L > < H E A D > < T I T L E >
P r a c t i c a s
d e
l i s t a s
</TITLE>
< / H E A D > < B O D Y > < C E N T E R > < H 1 >
M i s
a f i c i o n e s
< / H 1 >
< / C E N T E R> < H R > S i n
u n
or d e n
p a r t i c u l a r ,
m i s
<B>
aficiones
</B>
son
las
siguientes:
< U L > < L I >
E l
c i n e
< L I >
E l
d e p o r t e
< U L > < L I >
N a ta c i ó n
< L I >
B a lo n c e s t o
< / U L > < L I >
L a
m ú s i c a
< / U L > L a
m ú s i ca
q u e
m á s
m e
g u s t a
e s
(en
orden
de
preferencia):
< O L > < L I >
E l
r o c k
< L I >
E l
j a z z
< L I >
L a
m ú s i c a
c l á s i c a
< / O L > < / B O D Y > < / H T M L >
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P ág in a 3 d e 1 3
P racticas d e H T M L
C o m p l e t a r l a p 谩 g i n a c o n e l r e s t o d e ti p o s d e l i s t a s e s t u d i a d a s y o b s e r v a r s u s d i f e r e n c i a s . G u a rd a r e l arc h iv o c om o
P r a c t i c a 4 .h t m l
e n form ato te xto y v isu aliza rlo c o n e l
n av eg ad o r.
5 . H ip e r e n lac e s e in c lu si贸 n d e im a g e n es
E n u n p r o c e s a d o r d e t e x t o c u a l q u ie r a te c l e a r e l s i g u ie n t e c 贸 d i g o
< h t m l >
< h e a d > < t i t l e > Pr a c t i c a
d e
H i p e r e n l a ces</title>
< / h e a d >
< b o d y
< p
b gc o l o r = " # D 9 D 9 F 3 " >
a l i g n= " c e n t e r " > < a
< f o n t
n a m e = " i nicio">
s iz e = + 3 > < u > E n l a c e s
c o n
otras
paginas</u></font></p>
< h r > < h r
w i d th = " 8 0 % " >
< d i r > < l i > < p
a l i g n = " l e f t " > < a
h r e f = " h tt p : / / w w w . m i c r o s o f t . c om">Microsoft</a></p> < / l i > < l i > < p
a l i g n = " l e f t " > < a
h r ef="Practica1.html">Mi
primera
pagina
h r ef="Practica2.html">Mi
segunda
pagina
W e b < / a > </ p > < / l i > < l i > < p
a l i g n = " l e f t " > < a
W e b < / a > </ p > < / l i > < / d i r >
< h r
w i d th = " 8 0 % " >
< h r >
< p
a l i g n= " c e n t e r " > < f o n t
s i z e =+3><u>Enlaces
en
la
misma
p a g i n a < /u > < / f o n t > < / p > < h r > < h r
w i d th = " 8 0 % " >
< d i r > < l i > < p
a l i g n = " l e f t " > < a
h r ef="#foto1">Foto
1</a></p>
a l i g n = " l e f t " > < a
h r ef="#foto2">Foto
2</a></p>
a l i g n = " l e f t " > < a
h r ef="#foto3">Foto
3</a></p>
a l i g n = " l e f t " > < a
h r ef="#inicio">Volver
< / l i > < l i > < p < / l i > < l i > < p < / l i > < l i > < p
al
principio
de
la
p a g i n a < /a > < / p > < / l i > < / d i r >
< h r
w i d th = " 8 0 % " >
< h r >
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P 谩g in a 4 d e 1 3
P racticas d e H T M L
< c e n t e r >
< p
a l i g n= " c e n t e r " > < a
s i z e = " 4 "> f o t o g r a f i a
< i m g T e x t o
n a m e = " f oto1"></a><font
s r c= " i m a g e n e s / f o t o 1 . g i f " a li n e a d o
color="#008000"
1 < / f o n t > </p>
width="100"
height="100"
ALIGN=TOP>
a r r i b a
< h r >
< p
a l i g n= " c e n t e r " > < a
s i z e = " 4 "> f o t o g r a f i a
< i m g T e x t o
n a m e = " f oto2"></a><font
s r c= " i m a g e n e s / f o t o 2 . g i f " a li n e a d o
a l
color="#0080 00"
2 < / f o n t > </p>
width="100"
height="100"
ALIGN=MIDDLE>
c e n t r o
< h r >
< p
a l i g n= " c e n t e r " > < a
s i z e = " 4 "> f o t o g r a f i a
< i m g T e x t o
n a m e = " f oto3"></a><font
s r c= " i m a g e n e s / f o t o 3 . g i f " a li n e a d o
color="#008000"
3 < / f o n t > </p>
width="100"
height="100"
ALIGN=BOTTOM>
a b a j o
< h r >
< p
a l i g n= " l e f t " > < a
h r e f = " # i n icio">Volver
al
principio
de
la
p a g i n a < /a > < / p > < / c e n t e r> < / b o d y > < / h t m l >
G u a rd a r e l arc h iv o c om o
P r a c t i c a 5 .h t m l
e n form ato te xto y v isu aliza rlo c o n e l
n av eg ad o r.
5 b is.
M a s so b r e im á g e n e s A ñ a d i r a l c o d i g o d e P r a c t i c a 5 .h t m l l a s s i g u i e n t e s s e n te n c i a s :
Im a g e n c o n hip e rvin c u lo
< H R > < A
H R E F = " P r a c t i c a 3 . html"
S R C = " i m a g e n e s / a d e l a n t e . gif">
alt=”MI </A>
tercera
Enlace
a
practica”><IMG
Practica
3<HR>
T e x to ro d e a n d o c om p leta m e nte la im a ge n
< h r > < p > H i d r a ( m i t o l o g í a ) , e n l a m it o l o g í a g ri e g a , m o n stru o de n u e v e c a b e za s q u e v ivía e n u n p a nta n o c e rca d e L e rn a , G r e c i a . U n a a m e n a z a p a r a t o d o s l o s h a b i ta n t e s d e A r g o s , <IMG
SRC="imagenes/hidra.gif"
heigh t="100"
ALIGN=LEFT
width="100"
>
t e n í a u n a l i e n t o m o r t a l m e n t e p o n z o ñ o s o y c u a n d o l e c o rt a b a n u n a d e s u s c a b e z a s , c r e c í a n d o s e n s u l u g a r; l a c a b e z a d e l c e n tr o e r a i n m o rt a l . H é r c u l e s , a q u i e n s e e n v i ó a m a t a rl a c o m o e l se g u n d o d e s u s d o c e t ra b a j o s , l o g r ó e l im i n a r l a q u e m a n d o l a s o c h o c a b e z a s m o r t a l e s y e n t e rr a n d o l a n o v e n a , i n m o r t a l , b a j o u n a e n o r m e r o c a . H é r c u l e s e s e l n o m b r e r o m a n o d e l h é r o e g ri e g o H e r a c l e s . E r a h i j o d e l d i o s Z e u s y d e A l c m e n a , m u j e r d e l g e n e r a l t e b a n o A n fi t ri ó n .
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P ág in a 5 d e 1 3
P racticas d e H T M L
H e r a , l a c e l o s a e s p o s a d e Z e u s , d e c i d i d a a m a t a r a l h i j o d e s u i n fi e l m a r i d o , p o c o d e s p u é s d e l n a c i m ie n t o d e H é r c u l e s e n v i ó d o s g r a n d e s se rp ie nte s p ara q u e a c a b ara n c o n é l. E l n iñ o era a ú n m u y pe q u e ñ o p e r o e s tr a n g u l ó a l a s s e r p i e n t e s . < h r>
R o tu ra d e te xto
< I M G
S R C = " i magenes/muro.gif"
e s t a
a
< B R >
E s t e
l í n e a < B R
u n
l ado
de
t ambién
la
AL IGN=LEFT>
Este
texto
imagen.
esta
a
un
lado
de
la
imagen,
texto,
en
cambio,
la
izquierda.
en
la
s i g u i ente.
C L E A R = L EFT>
b u s c a d o
e l
Este
primer
otro
margen
libre
a
ha
6 . T a b la s
E n u n p r o c e s a d o r d e t e x t o c u a l q u ie r a te c l e a r l o s s i g u i e n t e s c ó d i g o s . C r e a r p r im e r o l a p á g i n a d e l p r i m e r p u n t o a e i r c o m p le t a n d o l o s s i g u i e n t e s p u n t o s e n e l m is m o a r c h i v o . S a l v a r e l a r c h i v o s c o m o P r a c ti c a 6 .h tm l y v i s u a l i z a r l o s r e s u lt a d o s c o n e l n a v e g a d o r .
T a b l a s e n c il l a < H T M L > < H E A D > < T I T L E >
P r a c t i c a s
d e
tablas
d e
tabla
</TITLE>
< / H E A D > < B O D Y > < T A B L E
B O R D E R >
< C A P T I O N >
E j e m p l o
sencilla</CAPTION>
< T R > < T D > f i l a 1 - c e l d a 1 < / T D >
<TD>fila1 -celda2</TD>
<TD>fila1 -
<TD>fila2 -celda2</T D>
<TD>fila2 -
c e l d a 3 < / T D > < / T R > < T R > < T D > f i l a 2 - c e l d a 1 < / T D > c e l d a 3 < / T D > < / T R > < / T A B L E > < / B O D Y > < / H T M L >
T a b la s c o n d e sig u a l n um e ro d e ce ld a s < T A B L E
B O R D E R >
< C A P T I O N >
E j e m p l o
d e
tabla
sencilla</CAPTION>
< T R > < T D > f i l a 1 - c e l d a 1 < / T D >
<TD>fila1 -celda2</TD>
<TD>fila1 -
c e l d a 3 < / T D > < / T R > < T R >
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P ág in a 6 d e 1 3
P racticas d e H T M L
< T D > f i l a 2 - c e l d a 1 < / T D >
<TD>fila2 -celda2</TD>
< / T R > < / T A B L E >
G ro so r d e lo s b ord e s
< T A B L E
B O R D E R = 5 >
C e ld a s d e c a b e c era
< T R > < T H > C o l u m n a
1 < / T H >
<TH>Columna
2</TH>
<TH>Columna
3</TH>
< / T R >
C o n te n id o d e las c e ld as
< H T M L > < H E A D > < T I T L E >
C o n t e n i d o
de
las
celda s
</TITLE>
< / H E A D > < B O D Y > < T A B L E
B O R D E R = 5 >
< C A P T I O N >
T a b l a
con
diversos
elementos</CAPTION>
< T R > < T H > D i b u j o < /TH>
<TH>Link</TH>
<TH>Texto</TH>
< / T R > < T R > < T D > < I M G
S R C="hidra.gif"
WIDTH=60
< T D > < A
H R E F ="Pagina1.html">Página
< T D > U n
t e x t o
HEIGHT=150 principal
></TD> </A></TD>
cualquiera</TD>
< / T R > < / T A B L E > < / B O D Y > < / H T M L >
A lin e a c ió n d e ntro d e la s c eld a s
A l i n e a c i ó n e n s e n ti d o v e rt i c a l < T D
V A L I G N = TOP >
< T D
V A L I G N = BOTTOM >
Arriba
</TD>
Abajo
</TD>
A l i n e a c i ó n e n s e n ti d o h o r iz o n t a l < T D
A L I G N = C ENTER >
< T D
A L I G N = R IGHT >
< T H
A L I G N = L EFT >
Al A
ce ntro
la
</TD>
derecha
Cabecera
a
la
</TD> izquierda
</TH>
(N o ta : L a s c a b e ce ra s p o r d efecto está n ce n tra d a s)
D im e n sio n a d o de la s ta b las
< T A B L E
W I D T H = 6 0%>
F u e r z a
a
< T A B L E
H E I G H T = 200>
l a
D i m e n s i o n a
t a bla
l a
a
tabla
ocupar
a
200
el
60%
puntos
de
de
la
ventana
alto
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P ág in a 7 d e 1 3
P racticas d e H T M L
C e l d a s q u e a b a r c a n a o tr a s v a ri a s
< T R > < T D < T D
Celda
C elda
sobre
junto
a
2
2
columnas
filas
</TD><TR>
</TD>
C o lo r d e fo n d o e n ta b la s y c e ld as < T A B L E < T D
C O L S P A N = 2>
R O W S P A N = 2 >
B O R D E R
B G COLOR="#00FF00">
B G C O L O R = " # F F 0 000">
I m á g e n e s d e f o n d o e n ta b l a s y c e l d a s < T A B L E
B O R D E R
B A CKGROUND="nubes.jpg">
<T D B A C K G R O U N D = " n ubes.jpg>
S e p a ra c ió n e ntre la s c eld a s
< T A B L E
B O R D E R
C E LLSPACING=20>
S e p a r a c i ó n e n t r e e l b o r d e y e l c o n te n i d o d e l a s c e l d a s < T A B L E
B O R D E R
C E L L P A DDING=20>
7 . F o r m u la r io s
E n u n p r o c e s a d o r d e t e x t o c u a l q u ie r a te c l e a r l a p a g i n a b a s e ( F o rm u l a ri o s i m p le ) e i r i n t r o d u c i e n d o y v is u a li z a n d o e n e l n a v e g a d o r l o s d if e r e n t e s e l e m e n t o s . S a l v a r e l a r c h i v o c o m o P r a c ti c a 7 .h tm l y v i s u a li z a rl o c o n e l n a v e g a d o r .
F o rm u lario sim ple < h t m l > < h e a d > < t i t l e > P r a c t i c a
de
formularios</title>
< / h e a d > < b o d y > < F O R M
A C T I O N = ” h t t p : / / w w w .h o s t .c o m / v f o r .a s p ”
E s c r i b a
s u
METHOD="POST">
u s u a r io:
< B R > < I N P U T
T Y P E = " t e x t"
< P > < I N P U T
NAM E="usuario"
T Y P E = " submit"
& n b s p ; & n b s p ; < I N P UT
SIZE="10"
VALUE="Enviar
TYPE="reset"
MAXLENGTH="12">
datos">
VALUE="Borrar
datos">
< / F O R M > < / b o d y > < / h t m l >
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P ág in a 8 d e 1 3
P racticas d e H T M L
P assw o rd A ñ a d ir u n c a m p o d e tip o c o ntrase ñ a < I N P U T
T Y P E = " p a s sword"
NAME="clave"
SIZE=" 10"
M A X L E N G T H = " 1 2 " >
T e x t o M u l ti li n e a I n s e r ta r d e n t r o d e l F O R M
e s t e n u e v o e le m e n t o :
In tro d u zca su s s u g ere n cia s o co m e n tario s: < T E X T A R E A N A M E = " C o m en tario s" R O W S = " 6 " C O L S = " 4 0 " > < /T E X T A R E A >
M enus I n s e r ta r d e n t r o d e l F O R M
e s t e n u e v o e le m e n t o :
¿C ó m o co n ta cto c o n n o s o tro s? < S E L E C T N A M E = " C o n tacto " > < O P T IO N v alu e= ”ca su alid ad ” > P o r c as u alid ad < /O P T IO N > < O P T IO N v alu e= ”p erio d ico ”> P o r el p erio d ic o < /O P T IO N > < O P T IO N v alu e= ”b u sca d o re s”> E n lo s b u sc ad o re s < /O P T IO N > < O P T IO N v alu e= ”co m en tario ”> M e lo co m en taro n < /O P T IO N > < /S E L E C T >
C heckbox I n s e r ta r d e n t r o d e l F O R M
e s t e n u e v o e le m e n t o :
< IN P U T T Y P E = " ch eck b o x " N A M E = " L ista" > S í, d es eo re cib ir in fo rm ació n ac erca d e su s p ro d u cto s.
R a d io B u tto n I n s e r ta r d e n t r o d e l F O R M
e s t e n u e v o e le m e n t o :
¿C u ál e s su sistem a o p er ativ o p referid o ? <B R > < IN P U T T Y P E = " rad io " N A M E = " S istem aO p erativ o " V A L U E = " N T " C H E C K E D > W in d o w s N T < IN P U T T Y P E = " rad io " N A M E = " S istem aO p erativ o " V A L U E = " M ac" > M ac < IN P U T T Y P E = " rad io " N A M E = " S istem aO p erativ o " V A L U E = " U n ix " > U n ix
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P ág in a 9 d e 1 3
P racticas d e H T M L
8 . M arcos
C re a r u n a p a g in a de m arc o s q u e n o s p erm ita a cc e d e r a to d a s la s p ra ctica s re aliza d a s h a s t a a h o ra .
G u a r d a r l o s d i f e re n t e s a r c h i v o s c o n l o s n o m b r e s :
P r a c t i c a 8 .h tm l
P a g i n a d e d e fi n i c i ó n d e m a r c o s
P r a c t i c a 8 f i .h t m l
M a rc o Iz q uie rd o
P r a c t i c a 8 f d .h tm l
M a rc o d e rec h o
C a d a v e z q u e s e s e le c c i o n e u n a d e l a s p r a c t i c a s e n e l m a r c o i z q u i e r d o , d e b e m o s t ra r s e l a p a g in a e n e l m a rc o de re c h o , el e n lac e IN IC IO n o s c o n d u cirá d e n u e v o a la p a gin a d e p re se n tac ió n .
N o t a : E l t e x t o o n d u l a n t e q u e a p a re c e e n la p a g i n a d e p r e s e n t a c i ó n e s u n a a p p le t q u e i n t r o d u c i r e m o s e n u n a p r a c ti c a p o s t e ri o r .
C o d ig o d e la p a g ina p rin cip a l de m arc o s:
< h tm l> < he ad> < title> P ractica d e F ram es < /title> < m eta h ttp -eq u iv = " C o n te n t-T y p e" co n te n t= " tex t/h tm l; ch arset= iso -8 8 5 9 -1 " > < /h ead >
< f r a m e s e t c o l s = " 1 8 2 ,* " > < f r a m e n a m e = " c o n t e n i d o " t a r g e t = " p r i n c i p a l " s r c = " p r a c t i c a 8 f i .h t m " > < fram e n am e = " p rin cip al" src= " p ra ctica8 fd .h tm l" > < n o fram e s> <bo dy> < p > E sta p ág in a u s a m arco s, p ero s u e x p lo rad o r n o lo s ad m ite.< /p > < /b o d y > < /n o fram es > < /fram eset> < /h tm l>
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P ág in a 1 0 d e 1 3
P racticas d e H T M L
9 . J a v a S c r ip t
E n u n p r o c e s a d o r d e t e x t o c u a l q u ie r a te c l e a r l o s s i g u i e n t e s c ó d i g o s . S a l v a r e l a r c h i v o s c o m o P r a c ti c a 9 .h tm l y v i s u a l i z a r l o s r e s u lt a d o s c o n e l n a v e g a d o r .
N o ta : A l c o n trario q u e e n H T M L , J a v a S crip t distin g u e e ntre m a y ú s c ula s y m in ú sc ula s.
< h tm l>
< he ad> < m eta h ttp -eq u iv = " C o n te n t-T y p e" co n te n t= " tex t/h tm l; ch arset= iso -8 8 5 9 -1 " > < scrip t L A N G U A G E = " Ja v aS crip t" > < ! --
/// F u n cio n d e c am b io d e im ag en e s al m o v er el rato n so b re ellas
// Im ag en es sele ccio n ad as im a g e1 o n = n ew Im ag e(); i m a g e 1 o n . s r c = " i m a g e n e s / b u z o n _ a b i e r t o .j p g " ; im a g e2 o n = n ew Im ag e(); i m a g e 2 o n . s r c = " i m a g e n e s / c a r a _ a l e g r e .j p g " ;
// Im ag en es p o r d efecto im a g e1 o ff = n ew Im a g e(); i m a g e 1 o f f .s r c = " i m a g e n e s / b u z o n _ c e r r a d o .j p g " ; im a g e2 o ff = n ew Im a g e(); i m a g e 2 o f f .s r c = " i m a g e n e s / c a r a _ t r i s t e .j p g " ;
fu n ctio n im g _ a ct(im g N o m b re) { im g O n = ev al(im g N o m b re + " o n .src" ); d o c u m e n t [ i m g N o m b r e ] .s r c = i m g O n ;
}
fu n ctio n im g _ in a ct(im g N o m b re) { i m g O f f = e v a l ( i m g N o m b r e + " o f f .s r c " ) ; d o c u m e n t [ i m g N o m b r e ] .s r c = i m g O f f ; }
///
S cro ll en en u n a v en ta n a,
v ar tx t= " E sta e s la p rim era lin ea d e tex to q u e se d e sp laz a " + " y esta es la se g u n d a, p u e d e s p o n er to d as la s" + " q u e q u ieras !
";
fu n ctio n s cro ll() {
d o c u m e n t .f r m .w .v a l u e = t x t ; t x t = t x t .s u b s t r i n g ( 1 , t x t .l e n g t h ) + t x t . c h a r A t ( 0 ) ; w i n d o w . s e t T i m e o u t ( " s c r o l l ( )" ,1 5 0 ) ; }
/ / -- >
< /scrip t>
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P ág in a 1 1 d e 1 3
P racticas d e H T M L
< title> E jem p lo s d e J av a S crip t< /title> < /h ead >
< b o d y o n L o a d = " s cro ll()" b g co lo r= " # C 0 C 0 C 0 " >
< tab le b o rd er= " 1 " w id th = " 1 0 0 % " > < tr> < td w id th = " 1 0 0 % " b g c o lo r= " # 0 0 8 0 8 0 " > < p alig n = " cen ter" > A p lica cio n es d e Jav a s crip t< /td > < /tr> < /tab le>
<p> <br> < /p > < d iv alig n = " cen t er" > < ce n ter>
< tab le b o rd er= " 1 " w id th = " 8 2 % " h eig h t= " 7 7 " > < tr> < td w id th = " 5 0 % " ro w s p an = " 2 " h eig h t= " 7 1 " > < tab le b o rd er= " 1 " w id th = " 3 2 % " > < tr> < td w id th = " 1 0 0 % " co ls p a n = " 2 " b g co lo r= " # F F F F F F " > < p alig n = " ce n ter" > C am b io d e im รก g en es < /td > < /tr> < tr> < t d w i d t h = " 5 0 % " a l i g n = " c e n t e r " b g c o l o r = " # 0 0 0 0 F F " > < i m g s r c = " i m a g e n e s / b u z o n _ c e r r a d o .j p g " n a m e = " i m a g e 1 " a l t = " c o r r e o " o n M o u s e O v e r = " i m g _ a c t ( 'i m a g e 1 ') " o n M o u s e o u t = " i m g _ i n a c t ( 'i m a g e 1 ') " W I D T H = " 1 1 8 " H E I G H T = " 1 1 8 " > < / t d > < t d w i d t h = " 5 0 % " a l i g n = " c e n t e r " b g c o l o r = " # 0 0 0 0 F F " > < i m g s r c = " i m a g e n e s / c a r a _ t r i s t e .j p g " n a m e = " i m a g e 2 " a l t = " c a r a " o n M o u s e O v e r = " i m g _ a c t ( 'i m a g e 2 ') " o n M o u s e o u t = " i m g _ i n a c t ( 'i m a g e 2 ') " W I D T H = " 1 1 8 " H E I G H T = " 1 1 8 " > < / t d > < /tr> < /tab le> < /td > < td w id th = " 5 0 % " h eig h t= " 8 " b g co lo r= " # F F F F F F " > < p alig n = " ce n ter" > C aja d e tex to ro tativ o < /td > < /tr> < tr> < td w id th = " 5 0 % " h eig h t= " 7 5 " b g c o lo r= " # 0 0 0 0 F F " > < fo rm N A M E = " frm " > < p > < in p u t T Y P E = " tex t" N A M E = " w " S IZ E = " 4 5 " > < /p > < /fo rm > < /td > < /tr> < /tab le> < /cen ter> < /d iv > < d iv alig n = " cen t er" >
< tab le b o rd er= " 1 " w id th = " 5 6 % " > < tr> < t d w i d t h = " 1 0 0 % " > < p a l i g n = " c e n t e r " > < a h r e f = " j a v a s c r i p t : w i n d o w .h i s t o r y . b a c k ( ) " > < i m g s r c = " i m a g e n e s / a t r a s .g i f " a l t = " a t r a s .g i f ( 6 5 0 b y t e s ) " a l i g n = " m i d d l e " W I D T H = " 3 0 " H E IG H T = " 3 0 " > V o lv er a la p ag in a an terio r< /a> < /td > < /tr> < /tab le> < /d iv >
< /b o d y > < /h tm l>
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P รกg in a 1 2 d e 1 3
P racticas d e H T M L
1 0 . A p p le t J a v a
E n l a p a g i n a P a g i n a 8 f d .h tm l r e a li z a d a e n l a p r a c t ic a 8 i n t r o d u c i r l a l l a m a d a a la A P P L E T S in e T e x t
< a p p l e t c o d e b a s e = " a p p l e t " c o d e = " S i n e T e x t .c la s s " w i d t h = " 4 0 0 " h e i g h t = " 1 0 0 " > < p a ra m n a m e = "T e x t" v alu e = "C o le c c i贸 n de p ra ctic as"> < p a ra m n a m e = "F o re gro u n d " v a lu e = "F F 0 0 0 0 "> < p a ra m n a m e = "B a c k g ro u n d " v alu e = "F F F F F F "> < p a ra m n a m e = "T ra v elin g " v alu e = "y e s"> < p a ra m n a m e = "M o use C lic k " v alu e = "y e s"> < p a ra m n a m e = "R a te " v alu e = "4 "> < /a p p le t>
A N T O N I O D E L A N G E L R A M O S e m a i l : a d _ r a m o s @ h o t a m i l .c o m
P 谩g in a 1 3 d e 1 3