T E X T O D E L M A N U A L D E H T M L, W E B M A E S T R O, P O R F R A N C I S C O A R O C E N A

Transcripción

1 T E X T O D E L M A N U A L D E H T M L, W E B M A E S T R O, P O R F R A N C I S C O A R O C E N A Q U E S E E N C U E N T R A E N I N T E R N E T E N : h t t p : / / w w w. l a n d e r. e s / w e b m a e s t r o E s t a v e r s i ó n s e c o r r e s p o n d e a l a d e l 2 5 d e S e p t i e m b r e d e D e r e c h o s d e r e p r o d u c c i ó n r e s e r v a d o s S e p u e d e r e p r o d u c i r l i b r e m e n t e e s t e m a n u a l, t a n t o e n f o r m a i m p r e s a c o m o e l e c t r ó n i c a, c u a n d o s e t r a t e d e u n u s o e x c l u s i v a m e n t e p e r s o n a l. P a r a u t i l i z a r e s t e m a n u a l e n u n c u r s o d e e n s e ñ a n z a, s e d e b e s o l i c i t a r u n a a u t o r i z a c i ó n e x p r e s a d e s u a u t o r, c o n e l c o m p r o m i s o d e n o a l t e r a r s u c o n t e n i d o, m u y e s p e c i a l m e n t e e n l o r e f e r e n t e a s u a u t o r í a y p r o c e d e n c i a, a s í c o m o e l d e q u e e n n i n g ú n c a s o s e t r a t a r á d e c o n s e g u i r n i n g u n a g a n a n c i a

2 e c o n ó m i c a d e r i v a d a d e s u r e p r o d u c c i ó n, t a n t o e n f o r m a i m p r e s a c o m o e l e c t r ó n i c a. F r a n c i s c o A r o c e n a f a r o c e n l a n d e r. e s U n a p á g i n a b á s i c a E l p r i n c i p i o e s e n c i a l d e l l e n g u a j e H T M L ( H y p e r T e x t M a r k u p L a n g u a g e ) e s e l u s o d e l a s e t i q u e t a s ( t a g s ). F u n c i o n a n d e l a s i g u i e n t e m a n e r a : d e u n a e t i q u e t a. < X X X > E s t e e s e l i n i c i o < / X X X > E s t e e s e l c i e r r e d e u n a e t i q u e t a.

3 L a s l e t r a s d e l a e t i q u e t a p u e d e n e s t a r e n m a y ú s c u l a s o m i n ú s c u l a s, i n d i f e r e n t e m e n t e. P o r c l a r i d a d, s e u s a r á n e n e s t e m a n u a l s ó l a m e n t e l a s m a y ú s c u l a s L o q u e h a y a e n t r e a m b a s e t i q u e t a s e s t a r á i n f l u e n c i a d a p o r e l l a s. P o r e j e m p l o, t o d o e l d o c u m e n t o H T M L d e b e e s t a r e n t r e l a s e t i q u e t a s < H T M L > y < / H T M L > : < H T M L > [ T o d o e l d o c u m e n t o ] < / H T M L > E l d o c u m e n t o e n s í e s t á d i v i d i d o e n d o s z o n a s p r i n c i p a l e s : E l e n c a b e z a m i e n t o, c o m p r e n d i d o e n t r e l a s e t i q u e t a s < H E A D > y < / H E A D > E l c u e r p o, c o m p r e n d i d o e n t r e l a s e t i q u e t a s < B O D Y > y < / B O D Y > D e n t r o d e l e n c a b e z a m i e n t o h a y i n f o r m a c i ó n d e l d o c u m e n t o, q u e n o s e v e e n l a p a n t a l l a

4 p r i n c i p a l, p r i n c i p a l m e n t e e l t í t u l o d e l d o c u m e n t o, c o m p r e n d i d o e n t r e l a s e t i q u e t a s < T I T L E > y < / T I T L E >. E l t í t u l o d e b e s e r b r e v e y d e s c r i p t i v o d e s u c o n t e n i d o, p u e s s e r á l o q u e v e a n l o s d e m á s c u a n d o a ñ a d a n n u e s t r a p á g i n a a s u b o o k m a r k ( o a g e n d a d e d i r e c c i o n e s ). D e n t r o d e l c u e r p o e s t á t o d o l o q u e q u e r e m o s q u e a p a r e z c a e n l a p a n t a l l a p r i n c i p a l ( t e x t o, i m á g e n e s, e t c. ) P o r t a n t o, l a e s t r u c t u r a q u e d a d e e s t a m a n e r a : < H T M L > < H E A D > < T I T L E > T í t u l o d e l a p á g i n a < / T I T L E > < / H E A D > < B O D Y > [ A q u í v a n l a s e t i q u e t a s q u e v i s u a l i z a n l a p á g i n a ] < / B O D Y >

5 < / H T M L > A n t e s d e c r e a r n u e s t r a p r i m e r a p á g i n a, u n a s c o n s i d e r a c i o n e s s o b r e e l t e x t o : C u a n d o e s c r i b i m o s e n e l d o c u m e n t o e l t e x t o q u e q u e r e m o s q u e a p a r e z c a e n l a p a n t a l l a, v e r e m o s q u e é s t e s e a c o m o d a a e l l a, s i n q u e t e n g a m o s q u e p u l s a r e l r e t o r n o d e l c a r r o. S i q u e r e m o s s e p a r a r e l t e x t o e n d i s t i n t o s p á r r a f o s d e b e m o s u s a r l a e t i q u e t a < P >, ( q u e n o t i e n e s u c o r r e s p o n d i e n t e e t i q u e t a d e c i e r r e < / P > ) E l t e x t o p u e d e t e n e r u n a s c a b e c e r a s, c o m p r e n d i d a s e n t r e l a s e t i q u e t a s < H 1 > y < / H 1 >, < H 2 > y < / H 2 >, e t c. ( h a s t a e l n ú m e r o 6 ), s i e n d o e l n ú m e r o i n d i c a t i v o d e l t a m a ñ o. E l t a m a ñ o m a y o r e s e l c o r r e s p o n d i e n t e a l n ú m e r o 1. P u e d e s e x p e r i m e n t a r e n e l e j e m p l o q u e s i g u e, c a m b i a n d o e l n ú m e r o p a r a c o m p r o b a r e l e f e c t o q u e s e l o g r a.

6 U n a e t i q u e t a m u y i n t e r e s a n t e e s l a d e c e n t r a d o < C E N T E R > y < / C E N T E R > ( n o l a s o p o r t a n t o d o s l o s n a v e g a d o r e s, a u n q u e s í l a m a y o r í a d e e l l o s ). N o s c e n t r a t o d o l o q u e e s t é d e n t r o d e e l l a, y a s e a t e x t o, i m á g e n e s, e t c. T a m b i é n t e n e m o s l o s s e p a r a d o r e s ( h o r i z o n t a l r u l e s ), q u e s e c o n s i g u e n c o n l a e t i q u e t a < H R > ( n o e x i s t e l a c o r r e s p o n d i e n t e d e c i e r r e ). C o n e l l a s e o b t i e n e u n a r a y a h o r i z o n t a l t a n a n c h a c o m o l a p a n t a l l a, y c o n l a a p a r i e n c i a d e e s t a r e m b u t i d a s o b r e e l f o n d o, c o m o s e p u e d e o b s e r v a r a c o n t i n u a c i ó n : E j e m p l o p r á c t i c o E n e l p r o c e s a d o r d e t e x t o c o p i a m o s l o s i g u i e n t e : < H T M L >

7 < H E A D > < T I T L E > M i p a g i n a d e l W e b - 1 < / T I T L E > < / H E A D > < B O D Y > < H 1 > < C E N T E R > P r i m e r a p a g i n a < / C E N T E R > < / H 1 > < H R > E s t a e s m i p r i m e r a p a g i n a, a u n q u e t o d a v i a e s m u y s e n c i l l a. C o m o e l l e n g u a j e H T M L n o e s d i f i c i l, p r o n t o e s t a r e e n c o n d i c i o n e s d e h a c e r c o s a s m a s i n t e r e s a n t e s. < P > A q u i v a u n s e g u n d o p a r r a f o. < / B O D Y > < / H T M L > ( R e p á s e s e l o d i c h o e n l a p á g i n a d e p o r t a d a e n M é t o d o d e t r a b a j o, a c e r c a d e l p r o c e s a d o r d e t e x t o s y c ó m o c a r g a r e l d o c u m e n t o e n e l n a v e g a d o r )

8 L a s l í n e a s e n b l a n c o y l a s i n d e n t a c i o n e s d e l t e x t o s e h a n p u e s t o p a r a m a y o r c l a r i d a d, p e r o n o s o n n e c e s a r i a s. D e h e c h o, p o d r í a e s t a r t o d o e n u n a s o l a l í n e a. L o i m p o r t a n t e e s e l o r d e n c o r r e c t o d e l a s e t i q u e t a s. P o r c i e r t o, u n a e t i q u e t a p u e d e e s t a r a n i d a d a d e n t r o d e o t r a. V é a s e e n e l e j e m p l o c ó m o l o e s t á l a e t i q u e t a < C E N T E R > d e n t r o d e l a e t i q u e t a < H 1 >. E s m u y i m p o r t a n t e, e n e s t o s c a s o s, q u e l a s e t i q u e t a s d e i n i c i o y d e c i e r r e v a y a n e n e l o r d e n c o r r e c t o, p u e s d e l o c o n t r a r i o s e p r o d u c i r í a n e r r o r e s. O b s é r v e s e a d e m á s l a f a l t a d e l o s a c e n t o s. S e h a b l a r á m á s a d e l a n t e s o b r e e l m o t i v o d e e l l o. G u a r d a m o s e l f i c h e r o e n e l p r o c e s a d o r d e t e x t o s c o n e l n o m b r e d e m i p a g 1. h t m l y l o c a r g a m o s e n e l n a v e g a d o r. E s t e s e r á e l r e s u l t a d o.

9 H a b r á u n f i c h e r o d i s t i n t o p a r a c a d a c a p í t u l o ; c o n v i e n e c r e a r u n d i r e c t o r i o e s p e c í f i c o e i r l o s g u a r d a n d o e n é l, p a r a p o d e r r e p a s a r l o a p r e n d i d o, a p a r t e d e q u e p u e d e n s e r n e c e s a r i o s p a r a e j e c u t a r o t r o s e j e m p l o s p r á c t i c o s. W e b M a e s t r o : h t t p : / / w w w. l a n d e r. e s / w e b m a e s t r o - F r a n c i s c o A r o c e n a I N D I C E H T M L B A S I C O 1 U n a p á g i n a b á s i c a 2 D a n d o f o r m a a l t e x t o 3

10 E n l a c e s c o n o t r a s p á g i n a s 4 I m á g e n e s 5 C a r a c t e r e s e s p e c i a l e s H T M L I N T E R M E D I O 6 L o s e s t á n d a r e s d e l H T M L 7 F o n d o s 8 A l i n e a c i ó n y d i m e n s i o n a d o d e i m á g e n e s F o r m a t o d e l a s i m á g e n e s

11 T a b l a s 1 1 F o r m u l a r i o s 1 2 G I F s a n i m a d o s 1 3 M a p a s 1 4 F r a m e s 1 5 S o n i d o s 1 6 T e x t o e n m o v i m i e n t o 1 7 P u b l i c a c i ó n y p r o m o c i ó n d e u n a p á g i n a 1 8 C o n t a d o r e s d e v i s i t a s 1 9

12 C o m p o n e r c o n e s t i l o T E M A S A V A N Z A D O S 2 0 A p p l e t s d e J a v a 2 1 T r u c o s d i v e r s o s 2 2 C a n a l e s d e c h a t e n p á g i n a s W e b I N D I C E D E E T I Q U E T A S E l e m e n t o s p a r a p á g i n a s d e l W e b C A N A L D E C H A T C o n e x i ó n e n d i r e c t o

13 E n p r e p a r a c i ó n 2 3 H o j a s d e e s t i l o e n c a s c a d a U n a p á g i n a b á s i c a E l p r i n c i p i o e s e n c i a l d e l l e n g u a j e H T M L ( H y p e r T e x t M a r k u p L a n g u a g e ) e s e l u s o d e l a s e t i q u e t a s ( t a g s ). F u n c i o n a n d e l a s i g u i e n t e m a n e r a : d e u n a e t i q u e t a. < X X X > E s t e e s e l i n i c i o < / X X X > E s t e e s e l c i e r r e d e u n a e t i q u e t a. L a s l e t r a s d e l a e t i q u e t a p u e d e n e s t a r e n m a y ú s c u l a s o m i n ú s c u l a s, i n d i f e r e n t e m e n t e. P o r

14 c l a r i d a d, s e u s a r á n e n e s t e m a n u a l s ó l a m e n t e l a s m a y ú s c u l a s L o q u e h a y a e n t r e a m b a s e t i q u e t a s e s t a r á i n f l u e n c i a d a p o r e l l a s. P o r e j e m p l o, t o d o e l d o c u m e n t o H T M L d e b e e s t a r e n t r e l a s e t i q u e t a s < H T M L > y < / H T M L > : < H T M L > [ T o d o e l d o c u m e n t o ] < / H T M L > E l d o c u m e n t o e n s í e s t á d i v i d i d o e n d o s z o n a s p r i n c i p a l e s : E l e n c a b e z a m i e n t o, c o m p r e n d i d o e n t r e l a s e t i q u e t a s < H E A D > y < / H E A D > E l c u e r p o, c o m p r e n d i d o e n t r e l a s e t i q u e t a s < B O D Y > y < / B O D Y > D e n t r o d e l e n c a b e z a m i e n t o h a y i n f o r m a c i ó n d e l d o c u m e n t o, q u e n o s e v e e n l a p a n t a l l a p r i n c i p a l, p r i n c i p a l m e n t e e l t í t u l o d e l d o c u m e n t o, c o m p r e n d i d o e n t r e l a s e t i q u e t a s < T I T L E > y

15 < / T I T L E >. E l t í t u l o d e b e s e r b r e v e y d e s c r i p t i v o d e s u c o n t e n i d o, p u e s s e r á l o q u e v e a n l o s d e m á s c u a n d o a ñ a d a n n u e s t r a p á g i n a a s u b o o k m a r k ( o a g e n d a d e d i r e c c i o n e s ). D e n t r o d e l c u e r p o e s t á t o d o l o q u e q u e r e m o s q u e a p a r e z c a e n l a p a n t a l l a p r i n c i p a l ( t e x t o, i m á g e n e s, e t c. ) P o r t a n t o, l a e s t r u c t u r a q u e d a d e e s t a m a n e r a : < H T M L > < H E A D > < T I T L E > T í t u l o d e l a p á g i n a < / T I T L E > < / H E A D > < B O D Y > [ A q u í v a n l a s e t i q u e t a s q u e v i s u a l i z a n l a p á g i n a ] < / B O D Y > < / H T M L >

16 A n t e s d e c r e a r n u e s t r a p r i m e r a p á g i n a, u n a s c o n s i d e r a c i o n e s s o b r e e l t e x t o : C u a n d o e s c r i b i m o s e n e l d o c u m e n t o e l t e x t o q u e q u e r e m o s q u e a p a r e z c a e n l a p a n t a l l a, v e r e m o s q u e é s t e s e a c o m o d a a e l l a, s i n q u e t e n g a m o s q u e p u l s a r e l r e t o r n o d e l c a r r o. S i q u e r e m o s s e p a r a r e l t e x t o e n d i s t i n t o s p á r r a f o s d e b e m o s u s a r l a e t i q u e t a < P >, ( q u e n o t i e n e s u c o r r e s p o n d i e n t e e t i q u e t a d e c i e r r e < / P > ) E l t e x t o p u e d e t e n e r u n a s c a b e c e r a s, c o m p r e n d i d a s e n t r e l a s e t i q u e t a s < H 1 > y < / H 1 >, < H 2 > y < / H 2 >, e t c. ( h a s t a e l n ú m e r o 6 ), s i e n d o e l n ú m e r o i n d i c a t i v o d e l t a m a ñ o. E l t a m a ñ o m a y o r e s e l c o r r e s p o n d i e n t e a l n ú m e r o 1. P u e d e s e x p e r i m e n t a r e n e l e j e m p l o q u e s i g u e, c a m b i a n d o e l n ú m e r o p a r a c o m p r o b a r e l e f e c t o q u e s e l o g r a.

17 U n a e t i q u e t a m u y i n t e r e s a n t e e s l a d e c e n t r a d o < C E N T E R > y < / C E N T E R > ( n o l a s o p o r t a n t o d o s l o s n a v e g a d o r e s, a u n q u e s í l a m a y o r í a d e e l l o s ). N o s c e n t r a t o d o l o q u e e s t é d e n t r o d e e l l a, y a s e a t e x t o, i m á g e n e s, e t c. T a m b i é n t e n e m o s l o s s e p a r a d o r e s ( h o r i z o n t a l r u l e s ), q u e s e c o n s i g u e n c o n l a e t i q u e t a < H R > ( n o e x i s t e l a c o r r e s p o n d i e n t e d e c i e r r e ). C o n e l l a s e o b t i e n e u n a r a y a h o r i z o n t a l t a n a n c h a c o m o l a p a n t a l l a, y c o n l a a p a r i e n c i a d e e s t a r e m b u t i d a s o b r e e l f o n d o, c o m o s e p u e d e o b s e r v a r a c o n t i n u a c i ó n : E j e m p l o p r á c t i c o E n e l p r o c e s a d o r d e t e x t o c o p i a m o s l o s i g u i e n t e : < H T M L >

18 < H E A D > < T I T L E > M i p a g i n a d e l W e b - 1 < / T I T L E > < / H E A D > < B O D Y > < H 1 > < C E N T E R > P r i m e r a p a g i n a < / C E N T E R > < / H 1 > < H R > E s t a e s m i p r i m e r a p a g i n a, a u n q u e t o d a v i a e s m u y s e n c i l l a. C o m o e l l e n g u a j e H T M L n o e s d i f i c i l, p r o n t o e s t a r e e n c o n d i c i o n e s d e h a c e r c o s a s m a s i n t e r e s a n t e s. < P > A q u i v a u n s e g u n d o p a r r a f o. < / B O D Y > < / H T M L > ( R e p á s e s e l o d i c h o e n l a p á g i n a d e p o r t a d a e n M é t o d o d e t r a b a j o, a c e r c a d e l p r o c e s a d o r d e t e x t o s y c ó m o c a r g a r e l d o c u m e n t o e n e l n a v e g a d o r )

19 L a s l í n e a s e n b l a n c o y l a s i n d e n t a c i o n e s d e l t e x t o s e h a n p u e s t o p a r a m a y o r c l a r i d a d, p e r o n o s o n n e c e s a r i a s. D e h e c h o, p o d r í a e s t a r t o d o e n u n a s o l a l í n e a. L o i m p o r t a n t e e s e l o r d e n c o r r e c t o d e l a s e t i q u e t a s. P o r c i e r t o, u n a e t i q u e t a p u e d e e s t a r a n i d a d a d e n t r o d e o t r a. V é a s e e n e l e j e m p l o c ó m o l o e s t á l a e t i q u e t a < C E N T E R > d e n t r o d e l a e t i q u e t a < H 1 >. E s m u y i m p o r t a n t e, e n e s t o s c a s o s, q u e l a s e t i q u e t a s d e i n i c i o y d e c i e r r e v a y a n e n e l o r d e n c o r r e c t o, p u e s d e l o c o n t r a r i o s e p r o d u c i r í a n e r r o r e s. O b s é r v e s e a d e m á s l a f a l t a d e l o s a c e n t o s. S e h a b l a r á m á s a d e l a n t e s o b r e e l m o t i v o d e e l l o. G u a r d a m o s e l f i c h e r o e n e l p r o c e s a d o r d e t e x t o s c o n e l n o m b r e d e m i p a g 1. h t m l y l o c a r g a m o s e n e l n a v e g a d o r. E s t e s e r á e l r e s u l t a d o.

20 H a b r á u n f i c h e r o d i s t i n t o p a r a c a d a c a p í t u l o ; c o n v i e n e c r e a r u n d i r e c t o r i o e s p e c í f i c o e i r l o s g u a r d a n d o e n é l, p a r a p o d e r r e p a s a r l o a p r e n d i d o, a p a r t e d e q u e p u e d e n s e r n e c e s a r i o s p a r a e j e c u t a r o t r o s e j e m p l o s p r á c t i c o s. W e b M a e s t r o : h t t p : / / w w w. l a n d e r. e s / w e b m a e s t r o - F r a n c i s c o A r o c e n a D a n d o f o r m a a l t e x t o C o m o h e m o s v i s t o e n e l e j e m p l o d e l c a p í t u l o a n t e r i o r, c u a n d o q u e r e m o s p o n e r u n t e x t o s i n n i n g u n a c a r a c t e r í s c a e s p e c i a l, l o p o n e m o s d i r e c t a m e n t e. U n i c a m e n t e, l a s e p a r a c i ó n e n t r e p á r r a f o s ( d e j a n d o u n a l í n e a e n b l a n c o ) l a c o n s e g u i m o s c o n l a e t i q u e t a < P >.

21 S i q u e r e m o s s e p a r a r l o s p á r r a f o s, o c u a l q u i e r o t r a c o s a, p e r o s i n d e j a r u n a l í n e a e n b l a n c o, u s a m o s u n a e t i q u e t a p a r e c i d a < B R > ( b r e a k, o r o m p e r ). T a m p o c o t i e n e e t i q u e t a d e c i e r r e. S i q u e r e m o s o b t e n e r m ú l t i p l e s l í n e a s e n b l a n c o n o b a s t a c o n r e p e t i r l a e t i q u e t a < P >, s i n o q u e h a y q u e c o m b i n a r l a c o n l a e t i q u e t a < B R >. A s í p o r e j e m p l o, s i q u e r e m o s o b t e n e r c u a t r o l í n e a s e n b l a n c o, p o n d r í a m o s : < B R > < P > < B R > < P > < B R > < P > < B R > < P > C o n l o q u e s e o b t i e n e :

22 A l e s c r i b i r e l t e x t o, s i p o n e m o s m á s d e u n e s p a c i o e n b l a n c o e n t r e d o s p a l a b r a s o b s e r v a m o s q u e e l n a v e g a d o r s ó l o r e c o n o c e u n o d e e l l o s. S i q u e r e m o s f o r z a r l e a q u e l o h a g a, d e b e m o s p o n e r e l c ó d i g o " & n b s p ; " ( n o n - b r e a k i n g s p a c e ). P a r a d e s t a c a r a l g u n a p a r t e d e l t e x t o s e p u e d e n u s a r : < B > y < / B > p a r a p o n e r a l g o e n n e g r i t a ( b o l d ). < I > y < / I > p a r a p o n e r a l g o e n c u r s i v a ( i t a l i c ). O t r a e t i q u e t a i n t e r e s a n t e e s < P R E > y < / P R E >. E l t e x t o q u e s e e n c u e n t r e e n t r e e l l a e s t a r á p r e f o r m a t e a d o, e s d e c i r q u e a p a r e c e r á c o m o s i h u b i e r a s i d o e s c r i t o c o n u n a m á q u i n a d e e s c r i b i r, c o n u n a f u e n t e d e e s p a c i a d o f i j o ( t i p o C o u r i e r ). A d e m á s s e r e s p e t a r á n l o s e s p a c i o s e n

23 b l a n c o y r e t o r n o s d e l c a r r o, t a l c o m o e s t a b a n e n n u e s t r o d o c u m e n t o H T M L ( l o c u a l n o o c u r r e n o r m a l m e n t e, c o m o h e m o s v i s t o a n t e r i o r m e n t e ). E s m u y a p r o p i a d a p a r a c o n f e c c i o n a r t a b l a s y o t r o s d o c u m e n t o s s i m i l a r e s. C o n l a e t i q u e t a < T T > y < / T T > c o n s e g u i m o s t a m b i é n q u e e l t e x t o t e n g a u n t a m a ñ o m e n o r y l a a p a r i e n c i a d e l o s c a r a c t e r e s d e u n a m á q u i n a d e e s c r i b i r ( t y p e w r i t e r ). L a d i f e r e n c i a c o n l a a n t e r i o r e s q u e n o p r e f o r m a t e a e l t e x t o, s i n o q u e ú n i c a m e n t e c a m b i a s u a p a r i e n c i a. L a e t i q u e t a < B L O C K Q U O T E > y < / B L O C K Q U O T E > s e u t i l i z a p a r a d e s t a c a r u n a c i t a t e x t u a l d e n t r o d e l t e x t o g e n e r a l. E s t e p á r r a f o e s t á e s c r i t o e n t r e a m b a s e t i q u e t a s. O b s é r v e s e l o s m á r g e n e s a a m b o s l a d o s.

24 E n l a s f ó r m u l a s m a t e m á t i c a s p u e d e i n t e r e s a r p o d e r e s c r i b i r í n d i c e s y s u b í n d i c e s, q u e s e c o n s i g u e n c o n l a s e t i q u e t a s < S U P > < / S U P > y < S U B > < / S U B > r e s p e c t i v a m e n t e. A s í, p o r e j e m p l o : m 2 s e c o n s i g u e d e l a s i g u i e n t e m a n e r a : m < S U P > 2 < / S U P > v x s e c o n s i g u e c o n : v < S U B > x < / S U B > A m e n u d o n o s i n t e r e s a r á p r e s e n t a r l a s c o s a s e n f o r m a d e l i s t a s. P o d e m o s e s c o g e r e n t r e t r e s t i p o s d i s t i n t o s : 1. L i s t a s d e s o r d e n a d a s ( n o n u m e r a d a s ) 2. L i s t a s o r d e n a d a s ( n u m e r a d a s ) 3. L i s t a s d e d e f i n i c i ó n. L a s l i s t a s d e s o r d e n a d a s ( u n o r d e r e d l i s t s ) s i r v e n p a r a p r e s e n t a r c o s a s q u e, p o r n o t e n e r u n o r d e n d e t e r m i n a d o, n o n e c e s i t a n i r p r e c e d i d a s p o r u n n ú m e r o. S u e s t r u c t u r a e s l a s i g u i e n t e :

25 < U L > < L I > U n a c o s a < L I > O t r a c o s a < L I > O t r a m á s < L I > E t c. < / U L > E s d e c i r, t o d a l a l i s t a e s t á d e n t r o d e l a e t i q u e t a < U L > y < / U L >, y l u e g o c a d a c o s a v a p r e c e d i d a d e l a e t i q u e t a < L I > ( l i s t i t e m ). E l r e s u l t a d o d e l o a n t e r i o r e s e l s i g u i e n t e : U n a c o s a O t r a c o s a O t r a m á s E t c. S e p u e d e a n i d a r u n a l i s t a d e n t r o d e o t r a. P o r e j e m p l o : < U L > < L I > M a m í f e r o s

26 < L I > P e c e s < U L > < L I > S a r d i n a < L I > B a c a l a o < / U L > < L I > A v e s < / U L > Q u e d a r í a e l s i g u i e n t e r e s u l t a d o : M a m í f e r o s P e c e s S a r d i n a B a c a l a o A v e s L a s l i s t a s o r d e n a d a s ( o r d e r e d l i s t s ) s i r v e n p a r a p r e s e n t a r c o s a s e n u n o r d e n d e t e r m i n a d o. S u e s t r u c t u r a e s m u y s i m i l a r a l a a n t e r i o r. L a d i f e r e n c i a e s t r i b a e n q u e e n e l r e s u l t a d o a p a r e c e r á a u t o m á t i c a m e n t e u n n ú m e r o c o r r e l a t i v o p a r a c a d a c o s a.

27 < O L > < L I > P r i m e r a c o s a < L I > S e g u n d a c o s a < L I > T e r c e r a c o s a < L I > E t c. < / O L > E l r e s u l t a d o e s : 1. P r i m e r a c o s a 2. S e g u n d a c o s a 3. T e r c e r a c o s a 4. E t c. A l i g u a l q u e l a s l i s t a s d e s o r d e n a d a s, t a m b i é n s e p u e d e n a n i d a r l a s l i s t a s o r d e n a d a s. E l t e r c e r t i p o l o f o r m a n l a s l i s t a s d e d e f i n i c i ó n. C o m o s u n o m b r e i n d i c a, s o n a p r o p i a d a s p a r a

28 g l o s a r i o s ( o d e f i n i c i o n e s d e t é r m i n o s ). T o d a l a l i s t a d e b e i r e n g l o b a d a e n t r e l a s e t i q u e t a s < D L > y < / D L >. Y a d i f e r e n c i a d e l a s d o s q u e h e m o s v i s t o, c a d a r e n g l ó n d e l a l i s t a t i e n e d o s p a r t e s : 1 ) e l n o m b r e d e l a c o s a a d e f i n i r, q u e s e c o n s i g u e c o n l a e t i q u e t a < D T > ( d e f i n i t i o n t e r m ) y 2 ) l a d e f i n i c i ó n d e d i c h a c o s a, q u e s e c o n s i g u e c o n l a e t i q u e t a < D D > ( d e f i n i t i o n d e f i n i t i o n ). < D L > < D T > U n a c o s a a d e f i n i r < D D > L a d e f i n i c i ó n d e e s t a c o s a < D T > O t r a c o s a a d e f i n i r < D D > L a d e f i n i c i ó n d e e s t a o t r a c o s a < / D L > S u r e s u l t a d o e s : U n a c o s a a d e f i n i r L a d e f i n i c i ó n d e e s t a c o s a O t r a c o s a a d e f i n i r

29 L a d e f i n i c i ó n d e e s t a o t r a c o s a e n l a p a n t a l l a C o m e n t a r i o s n o v i s i b l e s A v e c e s e s m u y ú t i l e s c r i b i r c o m e n t a r i o s e n e l d o c u m e n t o H T M L s o b r e e l c ó d i g o q u e e s c r i b i m o s, q u e n o s p u e d e n s e r v i r p a r a r e c o r d a r p o s t e r i o r m e n t e s o b r e l o q u e h i c i m o s, y q u e n o q u e r e m o s q u e s e v e a n e n p a n t a l l a. E s t o s e c o n s i g u e e n c e r r a n d o d i c h o s c o m e n t a r i o s e n t r e e s t o s d o s s í m b o l o s : <! - - y - - > E j e m p l o : <! - - E s t o e s u n c o m e n t a r i o a l c ó d i g o q u e n o s e v e r á e n p a n t a l l a - - > E j e m p l o p r á c t i c o E n e l p r o c e s a d o r d e t e x t o s c o p i a m o s :

30 < H T M L > < H E A D > < T I T L E > M i p a g i n a d e l W e b - 2 < / T I T L E > < / 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 o r d e n p a r t i c u l a r, m i s < B > a f i c i o n e s < / B > s o n l a s s i g u i e n t e s : < 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 t a c i o n < L I > B a l o n c e s t o < / U L > < L I > L a m u s i c a < / U L > L a m u s i c a q u e m a s m e g u s t a e s < I > ( e n o r d e n d e p r e f e r e n c i a ) : < / I >

31 < O L > < L I > E l r o c k < L I > E l j a z z < L I > L a m u s i c a c l a s i c a < / O L > < / B O D Y > < / H T M L > G u a r d a m o s e l f i c h e r o d e t e x t o c o n e l n o m b r e m i p a g 2. h t m l y l o c a r g a m o s e n e l n a v e g a d o r. E s t e e s e l r e s u l t a d o. W e b M a e s t r o : h t t p : / / w w w. l a n d e r. e s / w e b m a e s t r o - F r a n c i s c o A r o c e n a

32 p á g i n a s 3. E n l a c e s c o n o t r a s L a c a r a c t e r í s t i c a q u e m á s h a i n f l u i d o e n e l e s p e c t a c u l a r é x i t o d e l W e b ( o t e l a d e a r a ñ a ) h a s i d o, a p a r t e l a d e s u c a r á c t e r m u l t i m e d i a, l a p o s i b i l i d a d d e u n i r l o s d i s t i n t o s d o c u m e n t o s r e p a r t i d o s p o r t o d o e l m u n d o p o r m e d i o d e e n l a c e s h i p e r t e x t o. e n l a c e s E s t r u c t u r a d e l o s E n g e n e r a l, l o s e n l a c e s t i e n e n l a s i g u i e n t e e s t r u c t u r a : < / A > < A H R E F = " x x x " > y y y d o n d e x x x e s e l d e s t i n o d e l e n l a c e ( O b s é r v e s e l a s c o m i l l a s ). y y y e s e l t e x t o i n d i c a t i v o e n l a p a n t a l l a d e l e n l a c e ( c o n u n c o l o r e s p e c i a l y g e n e r a l m e n t e

33 s u b r a y a d o ) T i p o s d e e n l a c e s V a m o s a d i s t i n g u i r c u a t r o t i p o s d e e n l a c e s : 1. E n l a c e s d e n t r o d e l a m i s m a p á g i n a 2. E n l a c e s c o n o t r a p á g i n a n u e s t r a 3. E n l a c e s c o n u n a p á g i n a f u e r a d e n u e s t r o s i s t e m a 4. E n l a c e s c o n u n a d i r e c c i ó n d e e m a i l m i s m a p á g i n a 1. E n l a c e s d e n t r o d e l a A v e c e s, e n e l c a s o d e d o c u m e n t o s ( o p á g i n a s ) m u y e x t e n s o s, n o s p u e d e i n t e r e s a r d a r u n s a l t o d e s d e u n a p o s i c i ó n a o t r a d e t e r m i n a d a. E n e s t e c a s o, l o q u e a n t e s h e m o s l l a m a d o X X X, e s d e c i r, e l d e s t i n o d e l e n l a c e, e n e s t e c a s o e l

34 s i t i o d e n t r o d e l a p á g i n a a d o n d e q u e r e m o s s a l t a r, s e s u s t i t u y e p o r # m a r c a ( l a p a l a b r a m a r c a p u e d e s e r c u a l q u i e r p a l a b r a q u e q u e r a m o s ). L o q u e h e m o s l l a m a d o a n t e s Y Y Y e s l a p a l a b r a ( o p a l a b r a s ) q u e a p a r e c e r á n e n l a p a n t a l l a e n c o l o r ( e n f o r m a d e h i p e r t e x t o ). S u e s t r u c t u r a e s, e n t o n c e s : Y Y Y < / A > < A H R E F = " # m a r c a " > Y e n e l s i t i o e x a c t o a d o n d e q u e r e m o s s a l t a r, d e b e m o s p o n e r l a s i g u i e n t e e t i q u e t a : < / A > < A N A M E = " m a r c a " > P o r e j e m p l o, s i q u i e r o s a l t a r d e s d e a q u í a l a p a n t a l l a f i n a l, p o n g o l a s i g u i e n t e e t i q u e t a : < A H R E F = " # f i n a l " > P u l s a p a r a i r a l f i n a l < / A >

35 Q u e r e s u l t a c o m o : P u l s a p a r a i r a l f i n a l ( P u e d e s c o m p r o b a r c ó m o s a l t a a l a p a n t a l l a f i n a l ) Y e n e l f i n a l d e l d o c u m e n t o h e p u e s t o e s t a o t r a e t i q u e t a : < / A > < A N A M E = " f i n a l " > p á g i n a n u e s t r a 2. E n l a c e s c o n o t r a P u e d e s e r q u e t e n g a m o s u n a s o l a p á g i n a. P e r o l o m á s f r e c u e n t e e s q u e t e n g a m o s v a r i a s p á g i n a s, u n a i n i c i a l ( o p r i n c i p a l ) y o t r a s c o n e c t a d a s a e l l a, e i n c l u s o e n t r e e l l a s m i s m a s. S u p o n g a m o s q u e q u e r e m o s e n l a z a r c o n l a p á g i n a c r e a d a e n e l e j e m p l o d e l c a p í t u l o a n t e r i o r, q u e l a h e m o s l l a m a d o m i p a g 2. h t m l. E n e s t e c a s o, s i m p l e m e n t e s u s t i t u i m o s l o q u e h e m o s l l a m a d o

36 X X X ( e l d e s t i n o d e l e n l a c e ) p o r e l n o m b r e d e l f i c h e r o : < A H R E F = " m i p a g 2. h t m l " > E j e m p l o d e l c a p í t u l o 2 < / A > Q u e r e s u l t a c o m o : E j e m p l o d e l c a p í t u l o 2 ( P u e d e s c o m p r o b a r c ó m o c a r g a e s a p á g i n a ) S i q u e r e m o s q u e v a y a a u n s i t i o c o n c r e t o d e o t r a p á g i n a n u e s t r a e n v e z d e i r a l p r i n c i p i o d e l a p á g i n a, a d o n d e v a p o r d e f e c t o, e n e s e s i t i o t e n e m o s q u e c o l o c a r u n a m a r c a ( v é a s e l a s e c c i ó n a n t e r i o r ), y c o m p l e t a r e l e n l a c e c o n l a r e f e r e n c i a a e s a m a r c a. L o v e r e m o s c o n e l s i g u i e n t e e j e m p l o : Q u i e r o p o n e r u n e n l a c e d e s d e a q u í a l c a p í t u l o 4, p e r o a u n s i t i o c o n c r e t o, d o n d e h e p u e s t o l a m a r c a < A N A M E = " a l i n e a r " > < / A >. E n t o n c e s l a e t i q u e t a

37 t i e n e q u e s e r : < A H R E F = " c a p 4. h t m l # a l i n e a r " > C a p i t u l o 4 < / A > Q u e r e s u l t a : C a p i t u l o 4 ( O b s é r v e s e c ó m o a l p u l s a r e l e n l a c e s a l t a a l c a p í t u l o 4, p e r o n o a l c o m i e n z o, s i n o a d o n d e y o q u i e r o q u e l o h a g a ) U n a o b s e r v a c i ó n i m p o r t a n t e : E s t o y s u p o n i e n d o q u e l a p á g i n a e n l a q u e e s t o y e s c r i b i e n d o e s t a e t i q u e t a y l a o t r a p á g i n a a l a q u e q u i e r o s a l t a r e s t á n e n e l m i s m o d i r e c t o r i o. P o r q u e p u d i e r a o c u r r i r q u e h e o r g a n i z a d o m i s i t i o d e l W e b c o n u n d i r e c t o r i o p r i n c i p a l, y o t r o s s u b d i r e c t o r i o s a u x i l i a r e s. S i l a p á g i n a a l a q u e q u i e r o s a l t a r e s t á, p. e j. e n e l s u b d i r e c t o r i o s u b d i r, e n t o n c e s e n l a e t i q u e t a t e n d r í a q u e h a b e r p u e s t o " s u b d i r / m i p a g 2. h t m l ". Y a l a i n v e r s a, s i q u i e r o s a l t a r d e s d e u n a p á g i n a a o t r a q u e e s t á e n u n d i r e c t o r i o a n t e r i o r, e n l a

38 e t i q u e t a t e n d r í a q u e h a b e r p u e s t o ".. / m i p a g 2. h t m l ". E s o s d o s p u n t o s h a c e q u e s e d i r i j a a l d i r e c t o r i o a n t e r i o r. O b s é r v e s e q u e s e d e b e u t i l i z a r e l s í m b o l o / p a r a i n d i c a r l o s s u b d i r e c t o r i o s, y n o e s t e o t r o \, q u e e s p r o p i o ú n i c a m e n t e d e W i n d o w s. S i n o s q u e r e m o s e v i t a r t o d a s e s t a s c o m p l i c a c i o n e s, p o d e m o s t e n e r t o d o j u n t o e n u n ú n i c o d i r e c t o r i o, p e r o e s t o t i e n e e l i n c o n v e n i e n t e d e q u e e s t é t o d o m á s d e s o r d e n a d o, y s e a n m á s d i f í c i l e s d e h a c e r l a s f u t u r a s m o d i f i c a c i o n e s. 3. E n l a c e s c o n u n a p á g i n a f u e r a d e n u e s t r o s i s t e m a S i q u e r e m o s e n l a z a r c o n u n a p á g i n a q u e e s t é f u e r a d e n u e s t r o s i s t e m a ( e s d e c i r, q u e e s t é e n u n s e r v i d o r d i s t i n t o a l q u e s o p o r t a n u e s t r a p á g i n a ), e s n e c e s a r i o c o n o c e r s u d i r e c c i ó n c o m p l e t a, o

39 U R L ( U n i f o r m R e s o u r c e L o c a t o r ). E l U R L p o d r í a s e r, a d e m á s d e l a d i r e c c i ó n d e u n a p á g i n a d e l W e b, u n a d i r e c c i ó n d e f t p, g o p h e r, e t c. U n a v e z c o n o c i d a l a d i r e c c i ó n ( o U R L ), l o c o l o c a m o s e n v e z d e l o q u e h e m o s l l a m a d o a n t e r i o r m e n t e x x x ( e l d e s t i n o d e l e n l a c e ). S i q u e r e m o s e n l a z a r c o n l a p á g i n a d e N e t s c a p e ( c u y o U R L e s : h t t p : / / h o m e. n e t s c a p e. c o m / ), l a e t i q u e t a s e r í a : < A H R E F = " h t t p : / / h o m e. n e t s c a p e. c o m / " > P á g i n a i n i c i a l d e N e t s c a p e < / A > Q u e d a r í a c o m o r e s u l t a d o : P á g i n a i n i c i a l d e N e t s c a p e E s m u y i m p o r t a n t e c o p i a r e s t a s d i r e c c i o n e s c o r r e c t a m e n t e ( r e s p e t a n d o l a s m a y ú s c u l a s y m i n ú s c u l a s, p u e s l o s s e r v i d o r e s U N I X s í l a s d i s t i n g u e n )

40 4. E n l a c e s c o n u n a d i r e c c i ó n d e e m a i l E n e s t e c a s o, s u s t i t u i m o s l o q u e s e h a l l a m a d o a n t e s x x x ( e l d e s t i n o d e l e n l a c e ) p o r m a i l t o : s e g u i d o d e l a d i r e c c i ó n d e e m a i l. L a e s t r u c t u r a d e l a e t i q u e t a e s : < A H R E F = " m a i l t o : d i r e c c i ó n d e e m a i l " > T e x t o d e l e n l a c e < / A > U n e j e m p l o d e e s t o e s t á a l f i n a l d e l a p á g i n a p r i n c i p a l d e e s t e m a n u a l. P o d r í a h a b e r p u e s t o : C o m e n t a r i o s a < A H R E F = " m a i l t o : f a r o c e n l a n d e r. e s " > F r a n c i s c o A r o c e n a < / A > Q u e r e s u l t a r í a : C o m e n t a r i o s a F r a n c i s c o A r o c e n a

41 P e r o h a y a l g u n o s n a v e g a d o r e s q u e n o r e c o n o c e n e s t e t i p o d e e n l a c e, y l o v e r í a n d e e s t a m a n e r a : C o m e n t a r i o s a F r a n c i s c o A r o c e n a y n o t e n d r í a n n i n g ú n m e d i o d e c o n o c e r l a d i r e c c i ó n d e e m a i l. P o r l o t a n t o, e s m á s s e g u r o p o n e r a l g o a s í c o m o : C o m e n t a r i o s a F r a n c i s c o A r o c e n a e n < A H R E F = " m a i l t o : f a r o c e n l a n d e r. e s " > f a r o c e n l a n d e r. e s < / A > Q u e r e s u l t a : C o m e n t a r i o s a F r a n c i s c o A r o c e n a e n f a r o c e n l a n d e r. e s E s d e c i r, e s c o n v e n i e n t e, p o r l a r a z ó n d i c h a a n t e r i o r m e n t e, p o n e r t a m b i é n e n e l t e x t o d e l e n l a c e l a d i r e c c i ó n d e e m a i l. E j e m p l o p r á c t i c o E n e l p r o c e s a d o r d e t e x t o s c o p i a m o s :

42 < H T M L > < H E A D > < T I T L E > M i p a g i n a d e l W e b - 3 < / T I T L E > < / H E A D > < B O D Y > < C E N T E R > < H 1 > M i s p a g i n a s f a v o r i t a s < / H 1 > < / C E N T E R > < H R > E s t a s s o n m i s p a g i n a s f a v o r i t a s : < P > < A H R E F = " h t t p : / / h o m e. n e t s c a p e. c o m " > N e t s c a p e < / A > < B R > < A H R E F = " h t t p : / / w w w. m i c r o s o f t. c o m " > M i c r o s o f t < / A > < B R > < A H R E F = " h t t p : / / w w w. y a h o o. c o m " > Y a h o o! < / A > < / B O D Y > < / H T M L >

43 G u a r d a m o s e l f i c h e r o d e t e x t o c o n e l n o m b r e m i p a g 3. h t m l y l o c a r g a m o s e n e l n a v e g a d o r. E s t e e s e l r e s u l t a d o. W e b M a e s t r o : h t t p : / / w w w. l a n d e r. e s / w e b m a e s t r o - F r a n c i s c o A r o c e n a I m á g e n e s L a e t i q u e t a q u e n o s s i r v e p a r a i n c l u i r i m á g e n e s e n n u e s t r a s p á g i n a s d e l W e b e s m u y s i m i l a r a l a d e e n l a c e s a o t r a s p á g i n a s, q u e h e m o s v i s t o e n e l c a p í t u l o a n t e r i o r. L a ú n i c a d i f e r e n c i a e s q u e, e n l u g a r d e i n d i c a r a l p r o g r a m a n a v e g a d o r e l n o m b r e y l a l o c a l i z a c i ó n d e u n d o c u m e n t o d e t e x t o

44 H T M L p a r a q u e l o c a r g u e, s e l e i n d i c a e l n o m b r e y l a l o c a l i z a c i ó n d e u n f i c h e r o q u e c o n t i e n e u n a i m a g e n. L a e s t r u c t u r a d e l a e t i q u e t a e s : S R C = " i m a g e n. g i f " > < I M G C o n e l c o m a n d o I M G S R C ( i m a g e s o u r c e, f u e n t e d e l a i m a g e n ) s e i n d i c a q u e s e q u i e r e c a r g a r u n a i m a g e n l l a m a d a i m a g e n. g i f ( o e l n o m b r e q u e t e n g a ). D e n t r o d e l a e t i q u e t a s e p u e d e n a ñ a d i r o t r o s c o m a n d o s, t a l c o m o A L T < I M G S R C = " i m a g e n. g i f " A L T = " d e s c r i p c i ó n " > C o n e l c o m a n d o A L T s e i n t r o d u c e u n a d e s c r i p c i ó n ( u n a p a l a b r a o u n a f r a s e b r e v e ) i n d i c a t i v a d e

45 l a i m a g e n. E s t e c o m a n d o, q u e e n p r i n c i p i o s e p u e d e o m i t i r, e s e n b e n e f i c i o d e l o s q u e a c c e d a n a n u e s t r a p á g i n a c o n u n p r o g r a m a n a v e g a d o r e n f o r m a d e t e x t o s ó l o. Y a q u e n o s o n c a p a c e s d e v e r l a i m a g e n, p o r l o m e n o s p u e d e n h a c e r s e u n a i d e a s o b r e e l l a. P e r o n o e s s ó l o p o r e s t o. H a y c a s o s, c o m o v e r e m o s m á s a d e l a n t e, e n l o s q u e s e u t i l i z a u n a i m a g e n c o m o e n l a c e a o t r a p á g i n a. S i s e o m i t i e r a e s t e c o m a n d o, l o s q u e u t i l i z a n d i c h o s n a v e g a d o r e s n o p o d r í a n d e n i n g u n a m a n e r a a c c e d e r a e s a s p á g i n a s. C o n r e s p e c t o a l a l o c a l i z a c i ó n d e l f i c h e r o d e e s a i m a g e n, s e p u e d e d e c i r a q u í l o m i s m o q u e e n e l c a p í t u l o a n t e r i o r r e f e r e n t e a l o s e n l a c e s. S i n o s e i n d i c a n a d a e s p e c i a l, c o m o e n e l c a s o q u e s e h a e x p u e s t o, q u i e r e d e c i r q u e e l f i c h e r o i m a g e n. g i f e s t á e n e l m i s m o d i r e c t o r i o q u e e l

46 d o c u m e n t o H T M L q u e e s t a m o s e s c r i b i e n d o. S i n o e s a s í, s e s i g u e n l o s m i s m o s c r i t e r i o s q u e l o s i n d i c a d o s p a r a l o s e n l a c e s. A l i g u a l q u e u n a p á g i n a c o n l a q u e q u e r e m o s e n l a z a r p u e d e e s t a r f u e r a d e n u e s t r o s i s t e m a, ( e n c u y o c a s o h a b í a q u e i n d i c a r s u U R L o d i r e c c i ó n c o m p l e t a ), p o d e m o s c a r g a r u n a i m a g e n q u e n o e s t é e n n u e s t r o s i s t e m a s i g u i e n d o e l m i s m o m é t o d o, e s d e c i r, i n d i c a r e n l a e t i q u e t a e l U R L c o m p l e t o d e l a i m a g e n. A u n q u e e s t o n o e s m u y a c o n s e j a b l e, p u e s a l a r g a r í a i n n e c e s a r i a m e n t e e l t i e m p o d e c a r g a d e n u e s t r a p á g i n a. L a s i m á g e n e s d e b e n e s t a r g u a r d a d a s e n u n f o r m a t o d e f i c h e r o e s p e c i a l l l a m a d o G I F. ( H a y t a m b i é n o t r o f o r m a t o m á s a v a n z a d o, d e l q u e s e h a b l a r á m á s a d e l a n t e ). E s t e f o r m a t o G I F a l m a c e n a l a s i m á g e n e s c o n u n m á x i m o d e c o l o r e s, e n f o r m a c o m p r i m i d a. H a y p r o g r a m a s

47 g r á f i c o s ( c o m o e l P a i n t S h o p P r o p a r a e l P C, o e l G r a p h i c C o n v e r t e r p a r a e l M a c ) q u e n o s p e r m i t e n g u a r d a r l a s i m á g e n e s e n e s t e f o r m a t o, a d e m á s d e c u m p l i r o t r a s m u c h a s t a r e a s d e m a n i p u l a c i ó n d e l a s m i s m a s. U n a s p e c t o m u y i m p o r t a n t e a t e n e r e n c u e n t a e s e l t a m a ñ o d e l a s i m á g e n e s, p u e s u n a i m a g e n g r a n d e s u p o n e u n f i c h e r o g r a n d e, y e s t o p u e d e r e s u l t a r e n u n t i e m p o e x c e s i v o d e c a r g a, c o n e l c o n s i g u i e n t e r i e s g o d e q u e q u i e n e s t é i n t e n t a n d o c a r g a r n u e s t r a p á g i n a s e c a n s e d e e s p e r a r, y d e s i s t a d e e l l o. P a r a e l e g i r l a p o s i c i ó n d e l a i m a g e n c o n r e s p e c t o a l t e x t o h a y d i s t i n t a s p o s i b i l i d a d e s. L a m á s s e n c i l l a e s c o l o c a r l a e n t r e d o s p á r r a f o s, c o n u n t i t u l a r a u n l a d o. L o s n a v e g a d o r e s m á s a c t u a l e s ( c o m o e l N e t s c a p e N a v i g a t o r y e l M i c r o s o f t I n t e r n e t E x p l o r e r ) p e r m i t e n q u e e l t e x t o p u e d a

48 r o d e a r a l a i m a g e n ( c o m o s e v e r á m á s a d e l a n t e, e n e l C a p í t u l o 8 ). D e m o m e n t o n o s v a m o s a l i m i t a r a e s c o g e r l a p o s i c i ó n d e l t i t u l a r c o n r e s p e c t o a l a i m a g e n ( s i e s q u e q u e r e m o s p o n e r l e u n t i t u l a r, c l a r o e s t á ). S e p u e d e p o n e r a r r i b a, e n m e d i o o a b a j o d e l l a d o d e l a i m a g e n. P a r a e l l o s e a ñ a d e e l c o m a n d o A L I G N a l a e t i q u e t a, d e l a s i g u i e n t e m a n e r a : < I M G S R C = " i s l a. g i f " A L I G N = T O P > T i t u l a r a l i n e a d o a r r i b a T i t u l a r a l i n e a d o a r r i b a < I M G S R C = " i s l a. g i f " A L I G N = M I D D L E > T i t u l a r a l i n e a d o e n m e d i o T i t u l a r a l i n e a d o e n m e d i o < I M G S R C = " i s l a. g i f " A L I G N = B O T T O M > T i t u l a r a l i n e a d o a b a j o

49 T i t u l a r a l i n e a d o a b a j o V é a n s e l a s e x t e n s i o n e s d e N e t s c a p e d e e s t a e t i q u e t a e n e l C a p í t u l o 8 O t r a p o s i b i l i d a d m u y i n t e r e s a n t e e s l a d e u t i l i z a r u n a i m a g e n c o m o e n l a c e a o t r a p á g i n a. P a r a e s t o s c a s o s s e u t i l i z a n g e n e r a l m e n t e i m á g e n e s p e q u e ñ a s ( i c o n o s ), a u n q u e s e p u e d e u s a r c u a l q u i e r t i p o d e i m a g e n. S e g ú n v i m o s e n e l c a p í t u l o a n t e r i o r, l a e s t r u c t u r a g e n e r a l d e u n e n l a c e e s : < / A > < A H R E F = " x x x " > y y y d o n d e x x x e r a e l d e s t i n o d e l e n l a c e e y y y e l t e x t o d e l e n l a c e ( o m á s g e n e r a l m e n t e h a b l a n d o, l o q u e a p a r e c e e n l a p a n t a l l a c o m o e l e n l a c e ; e n e l c a p í t u l o a n t e r i o r e r a u n t e x t o, y e n é s t e v a a s e r

50 u n a i m a g e n ). E n e s t e c a s o s u s t i t u i m o s x x x p o r e l n o m b r e d e l f i c h e r o d e l a p á g i n a a l a q u e q u e r e m o s a c c e d e r. Y e n l u g a r d e y y y p o n e m o s l a e t i q u e t a c o m p l e t a d e l a i m a g e n ( q u e q u e d a a s í e n g l o b a d a d e n t r o d e l a e t i q u e t a d e l e n l a c e ) C o m o e j e m p l o v a m o s a u t i l i z a r l a i m a g e n ( h o m b r e. g i f ) p a r a a c c e d e r a l e j e m p l o p r á c t i c o d e l c a p í t u l o 2 ( m i p a g 2. h t m l ) : < A H R E F = " m i p a g 2. h t m l " > < I M G S R C = " h o m b r e. g i f " > < / A > q u e d a c o m o r e s u l t a d o : P u l s a n d o l a i m a g e n c o m p r o b a m o s c ó m o e f e c t i v a m e n t e e n l a z a c o n l a p á g i n a d e s e a d a. O b s é r v e s e a d e m á s q u e l a i m a g e n e s t á r o d e a d a d e u n r e c t á g u l o d e l c o l o r n o r m a l e n l o s e n l a c e s. S i n o s e

51 d e s e a q u e a p a r e z c a e s e r e c t á n g u l o, h a y q u e i n c l u i r d e n t r o d e l a e t i q u e t a d e l a i m a g e n e l a t r i b u t o B O R D E R = 0, e s d e c i r : < A H R E F = " m i p a g 2. h t m l " > < I M G S R C = " h o m b r e. g i f " B O R D E R = 0 > < / A > q u e d a c o m o r e s u l t a d o : P o s i c i o n a n d o e l c u r s o r s o b r e e s t a ú l t i m a i m a g e n, c o m p r o b a m o s q u e a c t ú a t a m b i é n c o m o e n l a c e a u n q u e c a r e z c a d e l r e c t á n g u l o d e c o l o r. E s t o p u e d e r e s u l t a r m á s e s t é t i c o, p e r o s e c o r r e e l r i e s g o d e q u e e l u s u a r i o n o s e d é c u e n t a d e q u e l a i m a g e n s i r v e d e e n l a c e. T a m b i é n p o d e m o s u t i l i z a r u n a i m a g e n p a r a e n l a z a r c o n o t r a i m a g e n. E n e s t e c a s o s u s t i t u i m o s x x x ( e l d e s t i n o d e l e n l a c e ) c o n e l n o m b r e d e l f i c h e r o d e l a i m a g e n a l a q u e q u e r e m o s a c c e d e r e

52 y y y ( l o q u e a p a r e c e e n p a n t a l l a c o m o e l e n l a c e ) p o r l a e t i q u e t a c o m p l e t a d e l a i m a g e n q u e q u e r e m o s q u e a p a r e z c a e n l a p a n t a l l a c o m o e l e n l a c e d e l a o t r a. S u p o n g a m o s q u e q u e r e m o s e n l a z a r c o n l a i m a g e n i s l a. g i f p o r m e d i o d e e s t a o t r a i m a g e n : ( c a s a. g i f ) : < A H R E F = " i s l a. g i f " > < I M G S R C = " c a s a. g i f " > < / A > Q u e d a c o m o r e s u l t a d o : P o r ú l t i m o, o t r a p o s i b i l i d a d e s l a d e u t i l i z a r u n t e x t o p a r a e n l a z a r c o n u n a i m a g e n. E n e s t e c a s o s u s t i t u i m o s x x x ( e l d e s t i n o d e l e n l a c e ) c o n e l n o m b r e d e l f i c h e r o d e l a i m a g e n a l a q u e q u e r e m o s a c c e d e r e y y y ( l o q u e a p a r e c e e n p a n t a l l a c o m o e l e n l a c e ) p o r e l t e x t o.

53 S u p o n g a m o s q u e q u e r e m o s e n l a z a r c o n l a i m a g e n i s l a. g i f p o r m e d i o d e l t e x t o " u n p a r a í s o t r o p i c a l " : < A H R E F = " i s l a. g i f " > u n p a r a í s o t r o p i c a l < / A > Q u e d a c o m o r e s u l t a d o : u n p a r a í s o t r o p i c a l S e p u e d e n c a p t u r a r l a s i m á g e n e s q u e a p a r e c e n e n p a n t a l l a, c o n o b j e t o d e g u a r d a r l a s p e r m a n e n t e m e n t e e n n u e s t r o d i s c o d u r o. E n l o s n a v e g a d o r e s m á s a c t u a l e s s e h a c e p u l s a n d o s o b r e l a i m a g e n c o n l a t e c l a d e r e c h a d e l r a t ó n, c o n l o q u e s e o b t i e n e u n m e n ú e n e l q u e e s t á l a p o s i b i l i d a d d e g u a r d a r l a i m a g e n. U n t i p o d e i m á g e n e s d e l q u e s e h a c e a b u n d a n t e u s o y q u e s i r v e n p a r a m e j o r a r l a p r e s e n t a c i ó n d e

54 l a p á g i n a s o n l o s i c o n o s, b o t o n e s, b a r r a s s e p a r a d o r a s, e t c. A p e s a r d e s u t a m a ñ o o f o r m a, s o n i m á g e n e s c o m o c u a l q u i e r o t r a. P o r e j e m p l o, v a m o s a c a p t u r a r e n l a P á g i n a P r i n c i p a l e l b o t ó n d o r a d o q u e e s t á j u n t o a l n o m b r e d e c a d a c a p í t u l o. C o l o c a m o s e l p u n t e r o d e l r a t ó n j u s t o e n e l b o t ó n, y p u l s a m o s l a t e c l a d e r e c h a. S i n u e s t r o n a v e g a d o r i m p l e m e n t a e s t a c a r a c t e r í s t i c a, a p a r e c e u n m e n ú e n e l q u e e s t á l a p o s i b i l i d a d d e g u a r d a r e s t a i m a g e n ( b g o l d. g i f ). L o h a c e m o s, e n e l m i s m o d i r e c t o r i o e n e l q u e v a a e s t a r n u e s t r o d o c u m e n t o. P a r a u t i l i z a r l o e n e l c o m i e n z o d e u n a l í n e a, e s c r i b i r í a m o s e n e l s i t i o c o r r e s p o n d i e n t e : < I M G S R C = " b g o l d. g i f > E s t a l i n e a e s t a p r e c e d i d a p o r u n b o t o n d o r a d o. Q u e r e s u l t a :

55 E s t a l i n e a e s t a p r e c e d i d a p o r u n b o t o n d o r a d o. P o d e m o s h a c e r l o m i s m o c o n l a b a r r a s e p a r a d o r a q u e e s t á e n t o d a s l a s p á g i n a s d e e s t e m a n u a l ( b a r g o l d. g i f ). L a c a p t u r a m o s, l a g u a r d a m o s y e s c r i b i m o s : < C E N T E R > < I M G S R C = " b a r g o l d. g i f > < B R > E s t a l i n e a e s t a d e b a j o d e u n a b a r r a s e p a r a d o r a d o r a d a. < / C E N T E R > Q u e r e s u l t a : E s t a l i n e a e s t a d e b a j o d e u n a b a r r a s e p a r a d o r a d o r a d a. P a r a a m p l i a r e l t e m a d e e s t e c a p í t u l o, v e r : C a p í t u l o 8 : A l i n e a c i ó n y d i m e n s i o n a d o d e i m á g e n e s C a p í t u l o 9 : F o r m a t o d e l a s i m á g e n e s

56 E j e m p l o p r á c t i c o P r i m e r a m e n t e e s n e c e s a r i o c a p t u r a r l a s t r e s i m á g e n e s q u e s e h a n u t i l i z a d o e n e s t e c a p í t u l o : i s l a. g i f, h o m b r e. g i f y c a s a. g i f y g u a r d a r l a s e n e l m i s m o d i r e c t o r i o e n e l q u e s e g u a r d a r á e l f i c h e r o d e t e x t o q u e s e v a a c r e a r a c o n t i n u a c i ó n, j u n t o c o n l o s d e l o s c a p í t u l o s a n t e r i o r e s. E n e l p r o c e s a d o r d e t e x t o s c o p i a m o s : < H T M L > < H E A D > < T I T L E > M i p a g i n a d e l W e b - 4 < / T I T L E > < / H E A D > < B O D Y > < C E N T E R > < H 1 > M i p a g i n a d e l W e b < / H 1 > < / C E N T E R >