webpage design in 7 days

Citation preview

Le a rn e m Gro u p p re s e n t s :

W e b p a g e d e s ig n in 7 d a y s ! Le s s o n s 1 - 7

By : S ia m a k S a rm a d y

S t a rt He re

Co p y rig h t N o t ic e : © 2 0 0 0 , 2 0 0 1 S ia m a k S a rm a d y a n d Le a rn e m Gro u p . All rig h t s re s e rve d . Th is t e xt is writ t e n t o b e u s e d a s t e xt m a t e ria l fo r "We b Pa g e d e s ig n Em a il Co u rs e ". An y kin d o f re p ro d u ct io n , re d is t rib u t io n in a n y fo rm wit h o u t writ t e n p e rm is s io n o f t h e writ e r is s t rict ly p ro h ib it e d . Th is s p e cia l ve rs io n is p re p a re d in PDF fo rm . Yo u ca n re d is t rib u t e t h is file wit h o u t a n y ch a n g e s e it h e r in co n t e n t s o r in file fo rm a t . It ca n n o t b e re d is t rib u t e d in p rin t e d fo rm o r a n y o t h e r m e d ia wit h o u t p e rm is s io n o f t h e writ e r. Ple a s e s t a t e d ict a t io n , g ra m m a r o r a n y o t h e r e rro rs t o : co rre ct io n s @le a rn e m . co m

Co u rs e s u p p o rt : Yo u ca n a s k yo u r co u rs e q u e s t io n s in Le a rn e m s u p p o rt fo ru m s . Ple a s e s u p p o rt u s b y vis it in g o u r s u p p o rt fo ru m s a n d a s kin g yo u r q u e s t io n s a n d a n s we rin g q u e s t io n s o f o t h e rs . Re g is t ra t io n : Yo u ca n a ls o re g is t e r fo r p a id we b d e s ig n e m a il co u rs e . If yo u re g is t e r yo u will b e n e fit fro m s t ro n g o n e t o o n e s t u d e n t s u p p o rt , p e rs o n a l t u t o r, m o re fa cilit ie s , d is co u n t fo r o t h e r co u rs e s , a cce s s t o s t u d e n t s a re a a n d m a n y m o re . Co u rs e fe e fo r w e b p a g e d e s ig n e m a il c o u r s e is $ 1 5 o n ly. Pa id s t u d e n t s will re ce ive 1 3 a d va n ce d le s s o n s in a d d it io n t o 7 g e n e ra l le s s o n s . Yo u ca n re g is t e r fo r p a id co u rs e a t : Co u rs e Re g is t ra t io n He re

Ba c k

Ne x t

W e b p a g e d e s ig n c o u rs e Le s s o n 1 Co u rs e s u p p o rt : Yo u ca n a s k yo u r co u rs e q u e s t io n s in Le a rn e m s u p p o rt fo ru m s . Ple a s e s u p p o rt u s b y vis it in g o u r s u p p o rt fo ru m s a n d a s kin g yo u r q u e s t io n s a n d a n s we rin g q u e s t io n s o f o t h e rs . Re g is t ra t io n : Yo u ca n a ls o re g is t e r fo r p a id we b d e s ig n e m a il co u rs e . If yo u re g is t e r yo u will b e n e fit fro m s t ro n g o n e t o o n e s t u d e n t s u p p o rt , p e rs o n a l t u t o r, m o re fa cilit ie s , d is co u n t fo r o t h e r co u rs e s , a cce s s t o s t u d e n t s a re a a n d m a n y m o re . Co u rs e fe e fo r w e b p a g e d e s ig n e m a il c o u r s e is $ 1 5 o n ly. Pa id s t u d e n t s will re ce ive 1 3 a d va n ce d le s s o n s in a d d it io n t o 7 g e n e ra l le s s o n s . Yo u ca n re g is t e r fo r p a id co u rs e a t : Co u rs e Re g is t ra t io n He re

1 - 1 I n t ro d u c t io n S o yo u h a ve d e cid e d t o d e s ig n yo u r we b p a g e s yo u rs e lf! Go o d d e cis io n . S o le t 's s t a rt q u ickly. We b p a g e s a re o rd in a ry file s wit h . h t m o r . h t m l file e xt e n s io n s . Th e y co n t a in a co d e n a m e d "h yp e r t e xt m a rk- u p la n g u a g e " o r h t m l. Th is co d e s wh e n vie we d in a b ro ws e r like In t e rn e t Exp lo re r o r Ne t s ca p e will b e s e e n a s b e a u t ifu l we b p a g e s h o we ve r co d e u n d e r we b p a g e m a y b e co m p lica t e d . To d e s ig n a n h t m l we b p a g e yo u h a ve t wo o p t io n s : a . Yo u ca n u s e a we b p a g e e d it o r like Micro s o ft Fro n t Pa g e t o cre a t e we b p a g e s . It wo rks e xa ct ly like Micro s o ft wo rd ( a co m p lica t e d e d it o r p ro g ra m u s e d fo r cre a t in g a n d e d it in g b o o k, le t t e r e t c p a g e s . ) Yo u ju s t t yp e t e xt , in s e rt g ra p h ics a n d fin a lly s a ve yo u r d o cu m e n t a s a n h t m l we b p a g e . By t h e wa y wo rd 2 0 0 0 it s e lf ca n s a ve yo u r e xis t in g d o cu m e n t s a s h t m l p a g e s . S o yo u s e e d e s ig n in g a we b p a g e ca n b e ve ry e a s y. Bu t s o o n yo u will s e e t h a t t h is is n o t a g o o d o p t io n fo r cre a t in g a p ro fe s s io n a l we b p a g e . b . S e co n d o p t io n is t o le a rn h t m l co d e s a n d writ e h t m l p a g e s in a s im p le t e xt e d it o r. As we s a id yo u r co d e s will b e s e e n a s We b Pa g e s wh e n vie we d in a we b b ro ws e r. 1 - 2 Re a s o n s fo r c h o o s in g s e c o n d o p t io n - If yo u wa n t t o d e s ig n p ro fe s s io n a l we b p a g e s u s in g t h e s e t o o ls will n o t b e e n o u g h . Yo u m u s t b e fa m ilia r wit h h t m l co d e s . - Re s u lt s o f t h e s e e d it o rs a re b ig a n d s o m e t im e s ch a o t ic co d e . Ma in t a in in g t h is co d e is ve ry d ifficu lt .

- If yo u wa n t t o d e s ig n d yn a m ic we b p a g e s in fu t u re yo u will n e e d t o kn o w h t m l co d e s . - If yo u will n e e d fo rm s in yo u r p a g e s t o s e n d in fo rm a t io n t o s e rve r a n d re t u rn re s u lt p a g e s b a ck t o b ro ws e r yo u will n e e d t o kn o w h t m l co d e s . - Th e re a re o t h e r re a s o n s t h a t d ict a t e u s t o le a rn h t m l co d in g a n d n o t s a t is fy wit h t h e s e t o o ls . 1 - 3 To o ls y o u w ill n e e d Yo u will n e e d a s im p le t e xt e d it o r t o writ e h t m l co d e s . Fo r e xa m p le yo u ca n u s e n o t e p a d in win d o ws o r a n y t e xt e d it o r in o t h e r o p e ra t in g s ys t e m s . Yo u will a ls o n e e d a b ro ws e r like In t e rn e t e xp lo re r o r Ne t s ca p e Na vig a t o r. In t h is co u rs e we will a s s u m e t h a t yo u a re wo rkin g in win d o ws 9 X/ NT/ 2 0 0 0 . 1 - 4 S t a rt He re No w o p e n n o t e p a d a n d t yp e t h e fo llo win g co d e . Exa m p le 1 - 1 : < HTML> He llo wo rld ! < / HTML> No w s a ve t h e t e xt a s "p a g e 1 1 . h t m l" To b ro ws e h t m l file o p e n win d o ws e xp lo re r a n d d o u b le click o n t h e file . Yo u m u s t s e e yo u r firs t we b p a g e o p e n e d in yo u r we b b ro ws e r. No t e : If yo u h a ve a n y q u e s t io n a b o u t le s s o n s . Yo u ca n a s k t h e m in o u r s u p p o rt fo ru m s . Vis it o u r we b s it e a n d click o n "s u p p o rt fo ru m s " lin k. < HTML> a n d < / HTML> a re ca lle d t a g s . Firs t o n e is a s t a rt t a g a n d s e co n d is a n e n d t a g . Ta g s a re s o m e t h in g like co m m a n d s in p ro g ra m m in g la n g u a g e s . < HTML> t a g t e lls t h e b ro ws e r t h a t t h is is s t a rt o f t h e HTML a n d < / HTML> m a rks it s e n d . < HTML> < / HTML> m a rk s t a rt a n d e n d o a h t m l p a g e . 1 - 5 HTML c o d e h e a d e rs Eve ry h t m l p a g e m u s t h a ve a h e a d e r. He a d e r co n t a in s im p o rt a n t in fo rm a t io n a b o u t t h e p a g e . Diffe re n t t a g s a re u s e d fo r d iffe re n t s e ct io n s o f a h e a d e r. He a d e r o f a n h t m l p a g e is s p e cifie d b y < HEAD> a n d < / HEAD> t a g s . < HTML> < HEAD> . . . < / HEAD> < / HTML> We will e n t e r h e a d e r in fo rm a t io n b e t we e n < HEAD> < / HEAD> t a g s . 1 - 6 Tit le On e o f t h e m o s t im p o rt a n t p a rt s o f a h e a d e r is t it le . Tit le is t h e s m a ll t e xt t h a t will a p p e a r in t it le b a r o f vie we r's b ro ws e r. S o h t m l d o cu m e n t will b e a s b e lo w.

< HTML> < HEAD> < TITLE> Tit le o f t h e p a g e < / TITLE> < / HEAD> < / HTML> 1 -7 We b pa g e bo dy No w o u r we b p a g e n e e d s a b o d y in wh ich we will e n t e r we b p a g e co n t e n t . As yo u m a y g u e s s we will u s e t h e s e t a g s : < BODY> < / BODY> Bo d y will co m e rig h t a ft e r h e a d e r e n d t a g . S o o u r we b p a g e will b e s o m e t h in g like t h is Exa m p le 1 - 2 : < HTML> < HEAD> < TITLE> My co m p a n y we b p a g e < / TITLE> < / HEAD> < BODY> We lco m e t o o u r h o m e p a g e . Mo re t e xt h e re . < / BODY> < / HTML> No w t yp e h t m l co d e in n o t e p a d a n d s a ve it a s "p a g e 2 . h t m l". Th e n vie w h t m l file in yo u r b ro ws e r b y d o u b le clickin g o n it in win d o ws e xp lo re r. 1 - 8 Ex t e n d e d < BOD Y> t a g Mo s t o f h t m l t a g s we will le a rn h a ve o p t io n a l p a ra m e t e rs a n d e xt e n s io n s . He re we will le a rn t o e xt e n s io n s fo r < BODY> t a g . 1 - 9 Ba c k g ro u n d c o lo r fo r b o d y o f w e b p a g e If yo u wa n t yo u ca n ch a n g e b a ckg ro u n d co lo r o f yo u r we b p a g e b y e xt e n d in g < BODY> t a g a s b e lo w. Exa m p le 1 - 3 : < HTML> < HEAD> < TITLE> Pa g e wit h Ba ck Co lo r< / TITLE> < / HEAD> < BODY BGCOLOR= "# 0 0 FF0 0 "> Pa g e wit h Ba ck Co lo r < / BODY> < / HTML> Th is will ch a n g e yo u r b a ckg ro u n d co lo r t o g re e n . Fo rm a t o f co lo r n u m b e r is RRGGBB. Yo u kn o w t h a t e a ch co lo r is a co m b in a t io n o f t h re e m a in co lo rs : Re d , Gre e n a n d Blu e . In co lo r fo rm a t RR is

va lu e o f re d co m p o n e n t o f t h e m a in co lo r in h e xa d e cim a l fo rm a t . GG is va lu e o f g re e n co m p o n e n t a n d BB is t h e va lu e o f b lu e co m p o n e n t . Two d ig it h e xa d e cim a l n u m b e r ca n b e a n yt h in g b e t we e n 0 0 t o FF i. e . 0 t o 2 5 5 in d e cim a l fo rm a t . S o if we writ e 0 0 FF0 0 we m e a n ( re d = 0 , g re e n = 2 5 5 , b lu e = 0 ) s o t h e re s u lt is a p u re g re e n co lo r. Yo u ca n p ro d u ce 1 6 m illio n co lo rs in t h is wa y b u t p a y a t t e n t io n t h a t n o t a ll o f t h e b ro ws e rs will b e ca p a b le t o s h o w a ll t h e s e co lo rs . S o t e s t yo u r we b p a g e in 2 5 6 co lo rs m o d e . 1 - 1 0 Ba c k g ro u n d I m a g e We ca n u s e a b a ckg ro u n d p ict u re fo r we b p a g e in s t e a d o f b a ckg ro u n d co lo r. Yo u m u s t h a ve a re a d y im a g e file in . g if o r . jp g fo rm a t s . No w yo u m u s t e xt e n d < BODY> t a g a s b e lo w. "im a g e 1 . g if" is file n a m e o f h e im a g e we wa n t t o u s e a s b a ckg ro u n d im a g e . < BODY BACKGROUND= "im a g e 1 . g if"> Exa m p le 1 - 4 : < HTML> < HEAD> < TITLE> Pa g e wit h b a ckg ro u n d im a g e < / TITLE> < / HEAD> < BODY BACKGROUND= "im a g e 1 . g if"> < B> Pa g e wit h b a ckg ro u n d im a g e . < / B> < / BODY> < / HTML> Im a g e file m u s t b e in t h e s a m e fo ld e r a s yo u r h t m l file . Ot h e rwis e b ro ws e r will n o t b e a b le t o fin d it . N o t ic e : Yo u ca n fin d e xa m p le s o f t h is le s s o n s in o u r we b s it e . Th e re yo u m u s t g o t o re s o u rce s s e ct io n a n d t h e n click o n "We b e m a il co u rs e e xa m p le p a g e . "

Exe rcis e s : At t e n t io n : Do n o t u s e a n y h t m l e d it in g p ro g ra m like MS Fro n t Pa g e . Yo u m u s t wo rk o n t h e co d e s yo u rs e lf. Co u rs e s u p p o rt : Pa id s t u d e n t s m u s t s e n d e xe rcis e s t o t h e ir t u t o r. Tu t o r will re t u rn co rre ct e d e xe rcis e t o t h e s t u d e n t . Ot h e rs ca n a s k t h e ir q u e s t io n s in S u p p o rt fo ru m s in o u r we b s it e .

1 - Writ e yo u r we b p a g e co d e wit h im a g e 1 . g if a s it s b a ckg ro u n d p ict u re . 2 - Writ e a b o ve co d e wit h a b lu e co lo r in s t e a d o f im a g e a s it s b a ckg ro u n d . 3 - Lis t t a g s yo u le a rn e d in t h is le s s o n wit h a s m a ll d e s crip t io n .

============================================================ © 2 0 0 0 , 2 0 0 1 S ia m a k S a rm a d y a n d Le a rn e m Gro u p . All rig h t s re s e rve d . Th is t e xt is writ t e n t o b e u s e d a s t e xt m a t e ria l fo r "We b Pa g e d e s ig n Em a il Co u rs e ". An y kin d o f re p ro d u ct io n , re d is t rib u t io n in a n y fo rm wit h o u t writ t e n p e rm is s io n o f t h e writ e r is s t rict ly p ro h ib it e d . Th is s p e cia l ve rs io n is p re p a re d in PDF fo rm . Yo u ca n re d is t rib u t e t h is file wit h o u t a n y ch a n g e s e it h e r in co n t e n t s o r in file fo rm a t . It ca n n o t b e re d is t rib u t e d in p rin t e d fo rm o r a n y o t h e r m e d ia wit h o u t p e rm is s io n o f t h e writ e r.

Ba c k

Ne x t

Ba c k

Ne x t

W e b p a g e d e s ig n c o u rs e Le s s o n 2 Co u rs e s u p p o rt : Yo u ca n a s k yo u r co u rs e q u e s t io n s in Le a rn e m s u p p o rt fo ru m s . Ple a s e s u p p o rt u s b y vis it in g o u r s u p p o rt fo ru m s a n d a s kin g yo u r q u e s t io n s a n d a n s we rin g q u e s t io n s o f o t h e rs . Re g is t ra t io n : Yo u ca n a ls o re g is t e r fo r p a id we b d e s ig n e m a il co u rs e . If yo u re g is t e r yo u will b e n e fit fro m s t ro n g o n e t o o n e s t u d e n t s u p p o rt , p e rs o n a l t u t o r, m o re fa cilit ie s , d is co u n t fo r o t h e r co u rs e s , a cce s s t o s t u d e n t s a re a a n d m a n y m o re . Co u rs e fe e fo r w e b p a g e d e s ig n e m a il c o u r s e is $ 1 5 o n ly. Pa id s t u d e n t s will re ce ive 1 3 a d va n ce d le s s o n s in a d d it io n t o 7 g e n e ra l le s s o n s . Yo u ca n re g is t e r fo r p a id co u rs e a t : Co u rs e Re g is t ra t io n He re

2 - 1 Te x t Fo rm a t t in g Un t il n o w we h a ve le a rn e d t o in s e rt s im p le t e xt in t o o u r we b p a g e s . In t h is le s s o n we will le a rn t e xt fo rm a t t in g t e ch n iq u e s . Th is p a rt o f h t m l writ in g s kills is t h e m o s t im p o rt a n t p a rt o f o u r wh o le we b d e s ig n co u rs e . S o yo u m u s t le a rn it wo rd b y wo rd . 2 - 2 Ch a n g in g t e x t s t y le We ca n m a ke a t e xt b o ld , it a lic o r u n d e rlin e d . If yo u wa n t t o m a ke a t e xt b o ld , yo u m u s t in clo s e it in < B> . . . < / B> t a g s . < BODY> Th is is ve ry < B> im p o rt a n t < / B> < / BODY> In a b o ve t e xt t h e wo rd "im p o rt a n t " is t yp e d b o ld . Yo u ca n m a ke a t e xt it a lic b y in clo s in g it in < I> . . . < / I> t a g s . An d fin a lly yo u ca n m a ke s o m e t e xt u n d e rlin e d b y in clo s in g it in < U> . . . < / U> t a g s . Exa m p le 2 - 1 : < HTML> < HEAD> < TITLE> Exa m p le 1 , Le s s o n 2 < / TITLE>

< / HEAD> < BODY> < B> Th is t e xt is b o ld < / B> < b r> < I> Wh ile t h is o n e is It a lic< / I> < b r> < U> a n d t h is t e xt is u n d e rlin e d < / U> < b r> < B> < I> Lo o k a t t h is , t h is is b o t h b o ld a n d it a lic< / I> < / B> < / BODY> < / HTML> In a b o ve e xa m p le yo u ca n s e e t h a t h o w we ca n m a ke a t e xt b o t h b o ld a n d it a lic o r a n y o t h e r co m b in a t io n . Yo u m a y n o t ice t h e t a g < BR> in t h e e n d o f e a ch lin e . Le t 's s e e wh a t is t h is t a g . If yo u in s e rt e n t e r ke ys ( n e w lin e ch a ra ct e rs ) a t t h e e n d o f e a ch lin e a n d wis h t h a t it will m a ke n e w lin e s in yo u r o u t p u t p a g e yo u will s o o n b e d is a p p o in t e d . All lin e s will b e in a s in g le lin e in o u t p u t we b p a g e . No m a t t e r h o w h t m l co d e is writ t e n in s e p a ra t e lin e s . To b re a k lin e s in o u t p u t we b p a g e yo u m u s t in s e rt < BR> t a g s in b re a kin g p o in t s . Als o p a y a t t e n t io n t h a t < BR> t a g is o n e o f fe w s in g le t a g s in h t m l la n g u a g e . It h a s n o t a n e n d in g t a g . 2 - 3 N e s t e d Ta g s In p re vio u s s e ct io n we s a w a lin e o f co d e wit h n e s t e d t a g s . < B> < I> Th is is b o t h b o ld a n d it a lic< / I> < / B> Wh e n yo u u s e n e s t e d t a g s yo u m u s t b e s u re t h a t t h e y d o n o t o ve rla p e a ch o t h e r. Th e y m u s t b e n e s t e d e xa ct ly. Fo r e xa m p le s o m e p a rt o f t e xt m a y ch a n g e t o b o ld a lt h o u g h it is n o t d e s ire d . 2 - 4 Te x t w it h fix e d w id t h fo n t As yo u m a y kn o w, re g u la r fo n t s u s e d iffe re n t h o rizo n t a l s p a ce . Fo r e xa m p le le t t e r 'w' u s e s m o re s p a ce t h a n t h e le t t e r 'i'. S o m e t im e s we n e e d a fo n t wit h e xa ct ly t h e s a m e wid t h fo r a ll le t t e rs . Fo r e xa m p le if yo u wa n t t o m a ke a t a b le o f n u m b e rs a n d yo u wa n t t h e co lu m n s t o b e e xa ct ly u n d e r e a ch o t h e r in d iffe re n t ro ws , we will n e e d t h is kin d o f t e xt . To s p e cify t h is kin d o f t e xt yo u m u s t u s e < TT> . . . < / TT> t a g s . TT m e a n s Typ e writ e r Te xt . 2 - 5 Ch a n g in g s iz e a n d fa c e o f fo n t s We ca n ch a n g e fa ce a n d s ize o f fo n t s u s in g < FONT> . . . < / FONT> t a g s . Als o u s in g t h is t a g a lo n e will n o t ch a n g e t h e t e xt . Yo u n e e d t o u s e p a ra m e t e rs fo r t h is t a g . Th is p a ra m e t e rs s p e cify wh a t kin d o f ch a n g e yo u n e e d in t e xt fo n t . 2 - 6 S iz e o f fo n t To ch a n g e s ize o f fo n t in a p a rt o f t e xt , in clo s e it wit h a < FONT> t a g a s b e lo w: < FONT S IZE= n > . . . , < / fo n t > n is s ize o f fo n t . s ize o f fo n t m u s t b e a n u m b e r b e t we e n 1 a n d 7 . If yo u in s e rt s o m e t e xt wit h o u t d e t e rm in in g it s s ize d e fa u lt s ize will b e 3 .

Exa m p le 2 - 2 < HTML> < HEAD> < TITLE> Exa m p le 2 , Le s s o n 2 < / TITLE> < / HEAD> < BODY> < FONT S IZE= 1 > 1 Th is t e xt is b o ld < / FONT> < b r> < FONT S IZE= 2 > 2 Th is t e xt is b o ld < / FONT> < b r> < FONT S IZE= 3 > 3 Th is t e xt is b o ld < / FONT> < b r> < FONT S IZE= 4 > 4 Th is t e xt is b o ld < / FONT> < b r> < FONT S IZE= 5 > 5 Th is t e xt is b o ld < / FONT> < b r> < FONT S IZE= 6 > 6 Th is t e xt is b o ld < / FONT> < b r> < FONT S IZE= 7 > 7 Th is t e xt is b o ld < / FONT> < b r> < / BODY> < / HTML> 2 - 7 Fa c e o f fo n t s We ca n u s e a fo n t fo r a p a rt o f t e xt b y s p e cifyin g it s n a m e . < FONT FACE= "Fo n t Na m e He re "> . . . < / FONT> Yo u m u s t in s e rt fo n t n a m e in d o u b le q u o t e s in a b o ve t a g . Exa m p le 2 - 3 : < HTML> < HEAD> < TITLE> Exa m p le 3 , Le s s o n 2 < / TITLE> < / HEAD> < BODY> < FONT FACE= "ARIAL"> Th is t e xt is in ARIAL fo n t < / FONT> < b r> < FONT FACE= "IMPACT"> Th is t e xt is in IMPACT fo n t < / FONT> < b r> < / BODY> < / HTML> In a b o ve e xa m p le we h a ve u s e d Aria l a n d Im p a ct fo n t s wh ile yo u ca n u s e a n y fo n t yo u wa n t . Wa rn in g : Fo n t s will b e d is p la ye d o n yo u r vie we r if s p e cifie d fo n t is in s t a lle d o n yo u r co m p u t e r. S o b e ca re fu l wh ile u s in g n e w fo n t s . It 's b e t t e r t o u s e n a t ive win d o ws fo n t s in yo u r p a g e s . Win d o ws is u s e d b y a b o u t % 9 5 o f we b s u rfe rs . Alt e rn a t ive ly yo u ca n u s e s e ve ra l fo n t fa ce s fo r e a ch p a rt o f yo u r t e xt . In t h is wa y yo u r b ro ws e r will t ry a lt e rn a t ive fo n t s if it ca n n o t fin d p rim a ry fo n t . < FONT Fa ce = "Aria l, HELVATICA"> . . . < / FONT> 2 - 8 Ch a n g in g fo n t c o lo rs In p re vio u s le s s o n yo u le a rn e d h o w t o ch a n g e we b p a g e b a ckg ro u n d co lo r. He re we will le a rn h o w t o ch a n g e t e xt co lo r. Lo o k a t t h is e xa m p le : e xa m p le 2 - 4 :

< HTML> < HEAD> < TITLE> Exa m p le 4 , Le s s o n 2 < / TITLE> < / HEAD> < BODY> < FONT COLOR= "# FF0 0 0 0 "> Th is t e xt is in re d co lo r. < / FONT> < b r> < FONT COLOR= "# 0 0 FF0 0 "> Th is t e xt is in g re e n co lo r. < / FONT> < b r> < FONT COLOR= "# 0 0 0 0 FF"> Th is t e xt is in b lu e co lo r. < / FONT> < b r> < / BODY> < / HTML> In a b o ve t e xt d iffe re n t co lo rs a re u s e d . Yo u ca n ch a n g e t e xt co lo r b y ch a n g in g co lo r n u m b e r. If yo u d o n 't re m e m b e r h o w t o s p e cify co lo r n u m b e rs re t u rn t o p re vio u s le s s o n a n d re vie w s e ct io n o n "we b p a g e b a ckg ro u n d co lo r". 2 - 9 Co m b in in g Fo n t a t t rib u t e s We ca n o b vio u s ly co m b in e < FONT> t a g p a ra m e t e rs a s we wis h . In t h is wa y we will b e a b le t o h a ve t e xt wit h d iffe re n t co lo rs , fo n t fa ce s a n d fo n t s ize s . Yo u ca n e ve n u s e t e xt s t yle s wit h < FONT> t a g b y n e s t in g s t yle a n d fo n t t a g s . < B> < I> < FONT S IZE= "5 " FACE= "IMPACT" COLOR= "# 0 0 FF0 0 "> Ho w is t h is ? < / FONT> < / I> < / B> 2 - 1 0 Ch a n g in g d e fa u lt fo n t c o lo rs in a w e b p a g e Ea ch b ro ws e r h a s it s o wn d e fa u lt s e t t in g s fo r t e xt co lo r, lin k co lo r, vis it e d lin k co lo r a n d a ct ive lin k co lo r. Te xt co lo r d e fa u lt is b la ck. Lin ks a re u s u a lly b lu e . To ch a n g e d e fa u lt s e t t in g s fo r t h e s e va lu e s yo u m u s t u s e < BODY> t a g wit h m o re p a ra m e t e rs . < BODY BGCOLOR= "# FFFFFF" TEXT= "# 0 0 0 0 0 0 " LINK= "# 0 0 0 0 FF" VLINK= "# 0 0 FF0 0 " ALINK= "# FF0 0 0 0 "> S o m e Te xt < / BODY> BGCOLOR: We b p a g e b a ckg ro u n d TEXT: Te xt Co lo r LINK: Lin k Co lo r VLINK: Vis it e d lin k ALINK: Act ive lin k 2 - 1 1 En d Th is le s s o n in clu d e d s o m e o f t h e m o s t im p o rt a n t t e ch n iq u e s in h t m l writ in g . No w yo u m u s t b e a b le t o u s e a n y kin d o f t e xt in yo u r we b p a g e s . As re m e m b e rin g s o m u ch t a g s a n d p a ra m e t e rs is d ifficu lt , yo u m u s t u s e t h e m re p e a t e d ly s o t h a t yo u ca n re m e m b e r t h e m . I a lwa ys t e ll t h is s e n t e n ce in m y p ro g ra m m in g cla s s e s : "N o o n e b e c o m e s a p ro g ra m m e r w it h o u t p ro g ra m m in g " N o t ic e : Yo u ca n fin d e xa m p le s o f t h is le s s o n s in o u r we b s it e . Th e re yo u m u s t g o t o re s o u rce s

s e ct io n a n d t h e n click o n "We b e m a il co u rs e e xa m p le p a g e . "

Exe rcis e s : At t e n t io n : Do n o t u s e a n y h t m l e d it in g p ro g ra m like MS Fro n t Pa g e . Yo u m u s t wo rk o n t h e co d e s yo u rs e lf. Co u rs e s u p p o rt : Pa id s t u d e n t s m u s t s e n d e xe rcis e s t o t h e ir t u t o r. Tu t o r will re t u rn co rre ct e d e xe rcis e t o t h e s t u d e n t . Ot h e rs ca n a s k t h e ir q u e s t io n s in S u p p o rt fo ru m s in o u r we b s it e .

1 - Writ e a h t m l p a g e t h a t u s e s lin e s wit h t h e s e s t yle s in s e p a ra t e o u t p u t lin e s : it a lic a n d b o ld it a lic a n d u n d e rlin e d b o ld a n d u n d e rlin e d 2 - Ma ke a we b p a g e wit h a b a n n e r t e xt o n it . Ou r b a n n e r is m a d e o f ch a ra ct e rs in in cre a s in g s ize s t o b a n n e r's m id d le a n d t h e n d e cre a s in g s ize t o it s e n d . Firs t ch a ra ct e r s t a rt s wit h t h e s ize 1 , m id d le ch a ra ct e r s ize is 7 a n d la s t ch a ra ct e r s ize is 1 a g a in . Ba n n e r t e xt is "m ylo n g lo n g n a m e ". 3 - Writ e a h t m l p a g e wit h 9 s e p a ra t e lin e s in d iffe re n t co lo rs . S t a t e co lo r o f e a ch lin e in it s t e xt .

============================================================ © 2 0 0 0 , 2 0 0 1 S ia m a k S a rm a d y a n d Le a rn e m Gro u p . All rig h t s re s e rve d . Th is t e xt is writ t e n t o b e u s e d a s t e xt m a t e ria l fo r "We b Pa g e d e s ig n Em a il Co u rs e ". An y kin d o f re p ro d u ct io n , re d is t rib u t io n in a n y fo rm wit h o u t writ t e n p e rm is s io n o f t h e writ e r is s t rict ly p ro h ib it e d . Th is s p e cia l ve rs io n is p re p a re d in PDF fo rm . Yo u ca n re d is t rib u t e t h is file wit h o u t a n y ch a n g e s e it h e r in co n t e n t s o r in file fo rm a t . It ca n n o t b e re d is t rib u t e d in p rin t e d fo rm o r a n y o t h e r m e d ia wit h o u t p e rm is s io n o f t h e writ e r.

Ba c k

Ne x t

Ba c k

Ne x t

W e b p a g e d e s ig n c o u rs e Le s s o n 3 Co u rs e s u p p o rt : Yo u ca n a s k yo u r co u rs e q u e s t io n s in Le a rn e m s u p p o rt fo ru m s . Ple a s e s u p p o rt u s b y vis it in g o u r s u p p o rt fo ru m s a n d a s kin g yo u r q u e s t io n s a n d a n s we rin g q u e s t io n s o f o t h e rs . Re g is t ra t io n : Yo u ca n a ls o re g is t e r fo r p a id we b d e s ig n e m a il co u rs e . If yo u re g is t e r yo u will b e n e fit fro m s t ro n g o n e t o o n e s t u d e n t s u p p o rt , p e rs o n a l t u t o r, m o re fa cilit ie s , d is co u n t fo r o t h e r co u rs e s , a cce s s t o s t u d e n t s a re a a n d m a n y m o re . Co u rs e fe e fo r w e b p a g e d e s ig n e m a il c o u r s e is $ 1 5 o n ly. Pa id s t u d e n t s will re ce ive 1 3 a d va n ce d le s s o n s in a d d it io n t o 7 g e n e ra l le s s o n s . Yo u ca n re g is t e r fo r p a id co u rs e a t : Co u rs e Re g is t ra t io n He re

3 - 1 Lin e Bre a k s , P a ra g ra p h s As we s a w in p re vio u s le s s o n if we b re a k lin e s in h t m l co d e b y s im p ly in s e rt in g e n t e r ke ys ( n e w lin e ch a ra ct e rs ) , lin e s will n o t b re a k in o u t p u t re s u lt in b ro ws e r. Th e y will b e p rin t e d in a s in g le lin e in b ro ws e r. We m u s t u s e < BR> t a g t o d o t h is a s yo u u s e d it in p re vio u s le s s o n . Yo u ca n a ls o d ivid e t e xt u s in g p a ra g ra p h s . A p a ra g ra p h s t a rt s o n a n e w lin e wit h o n e b la n k lin e a ft e r p re vio u s lin e . Pa ra g ra p h t a g is < p > < / p > < p > Firs t p a ra g ra p h < / p > < p > S e co n d p a ra g ra p h < / p > Yo u will n e s t o t h e r t a g s in s id e p a ra g ra p h t a g fo r fo n t s , s t yle s a n d o t h e r t a g s t h a t will b e u s e d in s id e a p a ra g ra p h . Th e re is a n o t h e r o p t io n in fo rm in g t e xt t h a t is u s in g < PRE> t a g . Te xt b e t we e n < PRE> < / PRE> t a g s will b e d is p la ye d e xa ct ly a s it is t yp e d in h t m l s o u rce . Th e re fo re yo u will n o t n e e d < BR> t a g s t o b re a k lin e s . It is e n o u g h t o e n t e r t e xt in s e p a ra t e lin e s wit h e n t e r ke y ( n e w lin e ch a ra ct e r) a t t h e ir e n d . 3 -2 Spa ce be tw e e n te x ts Bro ws e r d o e s n o t s h o w m o re t h a n o n e s p a ce b e t we e n t o wo rd s e ve n if yo u h a ve e n t e re d a h u n d re d s p a ce s b e t we e n t h e m in h t m l s o u rce . If yo u wa n t t o e n t e r m o re t h a n o n e b la n k ch a ra ct e r b e t we e n t wo wo rd s yo u will n e e d t o u s e a s m a ll co d e fo r t h is p u rp o s e . It is "&n b s p ; " wit h o u t t h e q u o t e s .

< BODY> He re we in s e rt 5 &n b s p ; &n b s p ; &n b s p ; &n b s p ; &n b s p ; e xt ra s p a ce s . < / BODY> 3 - 3 P a ra g ra p h a lig n m e n t s in y o u r w e b p a g e Yo u ca n d e t e rm in e h o w a p a ra g ra p h will b e a lig n e d in a we b p a g e . Yo u ca n a lig n t e xt in le ft , rig h t o r ce n t e r o f a we b p a g e . To s p e cify a lig n m e n t fo r a p a ra g ra p h yo u m u s t u s e a n e xt ra p a ra m e t e r fo r yo u r p a ra g ra p h t a g . Yo u ca n u s e o n e o f t h e s e co m b in a t io n s : < P ALIGN= "le ft "> < / P> < P ALIGN= "ce n t e r"> < / P> < P ALIGN= "rig h t "> < / P> Exa m p le 3 - 1 : < HTML> < HEAD> < TITLE> Exa m p le 3 - 1 < / TITLE> < / HEAD> < BODY> < P ALIGN= "le ft "> Yo u ca n a lig n t e xt in le ft . < / P> < P ALIGN= "ce n t e r"> Yo u ca n a lig n t e xt in ce n t e r. < / P> < P ALIGN= "rig h t "> Yo u ca n a lig n t e xt in rig h t . < / P> < / BODY> < / HTML> 3 - 4 I n d e n t e d Te x t If yo u n e e d a t e xt t h a t is in d e n t e d fro m b o t h s id e s o f we b p a g e yo u ca n u s e < BLOCKQUOTE> t a g . Te xt t h a t is e n clo s e d in t h is t a g will h a ve a m a rg in fro m le ft a n d rig h t o f yo u r we b p a g e . Exa m p le 3 - 2 : < HTML> < HEAD> < TITLE> Exa m p le 3 - 2 < / TITLE> < / HEAD> < BODY> We s e e b lo ck q u o t e s h e re : < BR> < BR> < BLOCKQUOTE> In ca s e s t h a t yo u wa n t t o e m p h a s is o n a p a ra g ra p h in yo u r t e xt yo u ca n u s e t h is t a g . It will in d e n t yo u r t e xt fro m b o t h s id e s . < / BLOCKQUOTE> < / BODY> < / HTML> 3 - 5 I m a g e s in y o u r w e b p a g e In p re vio u s le s s o n yo u le a rn e d h o w t o u s e a n im a g e a s a b a ckg ro u n d fo r we b p a g e s . It wa s

< BODY BACKGROUND= "im a g e . g if"> < / BODY> He re we wa n t t o le a rn h o w t o a d d a n im a g e in a we b p a g e . Ta g t h a t will b e u s e d fo r t h is p u rp o s e is < IMG> t a g . Act u a lly we will n e e d p a ra m e t e rs fo r t h is t a g t h a t s p e cify im a g e file lo ca t io n , file n a m e a n d o t h e r o p t io n a l p a ra m e t e rs . Lo o k a t t h is e xa m p le : Exa m p le 3 - 3 : < HTML> < HEAD> < TITLE> Exa m p le 3 - 3 < / TITLE> < / HEAD> < BODY BACKGROUND= "im a g e 1 . g if"> < B> Th is is a n im a g e : < / B> < BR> < IMG S RC= "a b a n n e r. g if"> < / BODY> < / HTML> In t h is e xa m p le I h a ve u s e d b o t h a b a ckg ro u n d im a g e a n d a n im a g e b e t we e n t e xt . Als o yo u m a y h a ve n o t ice d t h a t t h is t a g is a ls o a s in g le t a g t h a t d o e s n o t n e e d a n e n d in g t a g . If yo u wa n t t o s h o w yo u r im a g e in a d iffe re n t s ize t h a n it s re a l s ize , yo u ca n s p e cify it s s ize a s b e lo w. Exa m p le 3 - 4 : < HTML> < HEAD> < TITLE> Exa m p le 3 - 4 < / TITLE> < / HEAD> < BODY BACKGROUND= "im a g e 1 . g if"> Th is is a n im a g e : < BR> < IMG S RC= "a b a n n e r. g if" WIDTH= 2 3 4 HEIGHT= 3 0 > < / BODY> < / HTML> 3 - 6 Alig n m e n t a n d b o rd e r s iz e fo r im a g e s Yo u ca n a lig n im a g e in yo u r we b p a g e b y in clo s in g it in a p a ra g ra p h t h a t is a lig n e d a s a lig n e d t o le ft , rig h t o r ce n t e r. S e e e xa m p le b e lo w Exa m p le 3 - 5 : < HTML> < HEAD> < TITLE> Exa m p le 3 - 5 < / TITLE> < / HEAD> < BODY BACKGROUND= "im a g e 1 . g if"> Th is is a n im a g e : < BR>

< P ALIGN= "ce n t e r"> < IMG S RC= "a b a n n e r. g if"> < / P> < / BODY> < / HTML> Yo u ca n a d d a b o rd e r t o a n im a g e b y a d d in g a b o rd e r p a ra m e t e r t o < IMG> t a g . S e e t h e re s u lt s o f t h is h t m l co d e . Yo u ca n s e e e xa m p le s o f t h is le s s o n in o u r s it e . Go t o e m a il co u rs e s e ct io n in o u r s it e t o s e e re a d y e xa m p le s . Exa m p le 3 - 6 : < HTML> < HEAD> < TITLE> Exa m p le 3 - 6 < / TITLE> < / HEAD> < P ALIGN= "ce n t e r"> < IMG S RC= "a b a n n e r. g if" b o rd e r= 3 > < / P> < / HTML> S o m e o f o p t io n s we u s e m a y n o t b e s u p p o rt e d o n o t h e r b ro ws e rs . As m o s t o f we b s u rfe rs u s e "MS In t e rn e t Exp lo re r" we will wo rk a ro u n d t h is b ro ws e r. 3 - 7 Alt e rn a t iv e t e x t fo r im a g e s S o m e we b s u rfe rs m a y u s e b ro ws e rs t h a t d o n o t s u p p o rt g ra p h ics . An e xa m p le is lyn x b ro ws e r t h a t is u s e d in Un ix t e xt e n viro n m e n t s . If yo u wa n t t o co n s id e r t h e s e u s e rs , yo u ca n e n t e r a t e xt a s a n a lt e rn a t ive t o e a ch im a g e in yo u r we b p a g e . In t h is wa y im a g e will b e re p la ce d b y it s a lt e rn a t ive t e xt . It is ve ry e a s y. Ju s t a d d a n ALT p a ra m e t e r t o < IMG> t a g . < IMG S RC= "a b a n n e r. g if" ALT= "Le a rn in g On lin e "> Yo u s e e it d o e s n o t co s t t o o m u ch . 3 - 8 P a t h o f im a g e file In a b o ve e xa m p le s , im a g e file m u s t b e lo ca t e d in t h e s a m e d ire ct o ry t h a t h t m l file is lo ca t e d . If o u r im a g e file re s id e s in o t h e r d ire ct o ry , we m u s t a d d a re la t io n a l p a t h o r a co m p le t e URL t o t h is im a g e . S e e e xa m p le s b e lo w: < IMG S RC= "im a g e s / a b a n n e r. g if"> Im a g e is lo ca t e d in "im a g e s " d ire ct o ry b e lo w t h e d ire ct o ry t h a t h t m l file re s id e s . < IMG S RC= ". . / a b a n n e r. g if"> Im a g e is lo ca t e d in p a re n t d ire ct o ry o f t h e d ire ct o ry o f h t m l file . 3 - 9 En d

In t h is le s s o n yo u le a rn e d m o re t e xt fo rm a t t in g t e ch n iq u e s . Yo u a ls o le a rn e d h o w t o in clu d e im a g e s in yo u r we b p a g e s . In n e xt le s s o n we will le a rn a b o u t lin ks , im a g e lin ks a n d m o re . Un t il t h e n I s u g g e s t yo u t o s t a rt d e s ig n in g a we b p a g e u s in g t h e kn o wle d g e yo u h a ve fro m t h e s e t h re e le s s o n s . N o t ic e : Yo u ca n fin d e xa m p le s o f t h is le s s o n s in o u r we b s it e . Th e re yo u m u s t g o t o re s o u rce s s e ct io n a n d t h e n click o n "We b e m a il co u rs e e xa m p le p a g e . "

Exe rcis e s : At t e n t io n : Do n o t u s e a n y h t m l e d it in g p ro g ra m like MS Fro n t Pa g e . Yo u m u s t wo rk o n t h e co d e s yo u rs e lf. Co u rs e s u p p o rt : Pa id s t u d e n t s m u s t s e n d e xe rcis e s t o t h e ir t u t o r. Tu t o r will re t u rn co rre ct e d e xe rcis e t o t h e s t u d e n t . Ot h e rs ca n a s k t h e ir q u e s t io n s in S u p p o rt fo ru m s in o u r we b s it e .

1 - Us e le ft , rig h t a n d ce n t e re d p a ra g ra p h s a n d b lo ck q u o t e in a s a m p le we b p a g e . 2 - Writ e a co m p le t e h t m l p a g e co d e wit h a n im a g e ce n t e re d o n it wit h a b o rd e r s ize o f 1 0 . 3 - We h a ve a n im a g e t h a t it s s ize is 1 0 0 * 2 0 0 . We wa n t t h e im a g e t o b e h a lf t h e s ize it is o n o u r p a g e . Writ e a co m p le t e we b p a g e t h a t ce n t e rs t h is im a g e o n it wit h a b o rd e r s ize o f 5 . 4a.

Writ e a < IMG> t a g t h a t u s e s a n im a g e file lo ca t e d 2 d ire ct o ry le ve ls u p p e r t h a n h t m l file d ire ct o ry.

b.

Writ e a < IMG> t a g t h a t u s e s a n im a g e file lo ca t e d in "im a g e " d ire ct o ry lo ca t e d in o n e le ve l u p p e r t h a n cu rre n t h t m l file d ire ct o ry.

============================================================ © 2 0 0 0 , 2 0 0 1 S ia m a k S a rm a d y a n d Le a rn e m Gro u p . All rig h t s re s e rve d . Th is t e xt is writ t e n t o b e u s e d a s t e xt m a t e ria l fo r "We b Pa g e d e s ig n Em a il Co u rs e ". An y kin d o f re p ro d u ct io n , re d is t rib u t io n in a n y fo rm wit h o u t writ t e n p e rm is s io n o f t h e writ e r is s t rict ly p ro h ib it e d . Th is s p e cia l ve rs io n is p re p a re d in PDF fo rm . Yo u ca n re d is t rib u t e t h is file wit h o u t a n y ch a n g e s e it h e r in co n t e n t s o r in file fo rm a t . It ca n n o t b e re d is t rib u t e d in p rin t e d fo rm o r a n y o t h e r m e d ia wit h o u t p e rm is s io n o f t h e writ e r.

Ba c k

Ne x t

Ba c k

Ne x t

W e b p a g e d e s ig n c o u rs e Le s s o n 4 Co u rs e s u p p o rt : Yo u ca n a s k yo u r co u rs e q u e s t io n s in Le a rn e m s u p p o rt fo ru m s . Ple a s e s u p p o rt u s b y vis it in g o u r s u p p o rt fo ru m s a n d a s kin g yo u r q u e s t io n s a n d a n s we rin g q u e s t io n s o f o t h e rs . Re g is t ra t io n : Yo u ca n a ls o re g is t e r fo r p a id we b d e s ig n e m a il co u rs e . If yo u re g is t e r yo u will b e n e fit fro m s t ro n g o n e t o o n e s t u d e n t s u p p o rt , p e rs o n a l t u t o r, m o re fa cilit ie s , d is co u n t fo r o t h e r co u rs e s , a cce s s t o s t u d e n t s a re a a n d m a n y m o re . Co u rs e fe e fo r w e b p a g e d e s ig n e m a il c o u r s e is $ 1 5 o n ly. Pa id s t u d e n t s will re ce ive 1 3 a d va n ce d le s s o n s in a d d it io n t o 7 g e n e ra l le s s o n s . Yo u ca n re g is t e r fo r p a id co u rs e a t : Co u rs e Re g is t ra t io n He re

4 - 1 Lin k s An y o b je ct s u ch a s t e xt , g ra p h ic im a g e s e t c. t h a t le a d s u s t o a n e w p a g e o n t h e we b is ca lle d a lin k. Lin ks ca n p o in t t o a p a g e o n o u r s it e o r t o a we b p a g e o n a n o t h e r s it e . In t h is le s s o n we will le a rn h o w t o m a ke lin ks . 4 - 2 Te x t lin k s Cre a t in g a t e xt lin k is a n e a s y t a s k. We will u s e < A> < / A> t a g t o d o t h is . As b e fo re we will n e e d e xt ra p a ra m e t e rs fro m t h is t a g . Lo o k a t e xa m p le b e lo w : Exa m p le 4 - 1 : < HTML> < HEAD> < TITLE> Exa m p le 4 - 1 < / TITLE> < / HEAD> < BODY> < A HREF= "h t t p : / / www. ya h o o . co m "> Click h e re t o vis it Ya h o o < / A> < / BODY> < / HTML> Ab o ve co d e will cre a t e a lin k t h a t clickin g o n it will s e n d t h e u s e r t o Ya h o o we b s it e . We h a ve u s e d HREF p a ra m e t e r t o s p e cify d e s t in a t io n we b p a g e . Te xt b e t we e n < A> a n d < / A> is lin k t e xt wh ich

u s e r will click o n it t o g o t o d e s t in a t io n p a g e . 4 - 3 I m a g e lin k s In p re vio u s s e ct io n we u s e d a t e xt a s a lin k p o in t . It is p o s s ib le t o u s e a n im a g e in s t e a d o f t e xt . To d o t h is , yo u m u s t re p la ce lin k t e xt b e t we e n < A> a n d < / A> wit h a n < IMG> t a g t h a t d is p la ys a n im a g e file . < HTML> < HEAD> < TITLE> Exa m p le 4 - 1 < / TITLE> < / HEAD> < BODY> Click o n b e lo w p ict u re t o vis it m y h o m e p a g e . < BR> < BR> < A HREF= "h t t p : / / www. a n g e lfire . co m / n t / s a rm a d ys "> < IMG S RC= "m e . g if"> < / A> < / BODY> < / HTML> In a b o ve e xa m p le clickin g o n p ict u re will b rin g s u rfe r t o t h e a d d re s s o f < A HREF= ". . "> t a g . If yo u s e e t h e re s u lt in a b ro ws e r yo u will n o t ice a b lu e b o rd e r a ro u n d t h e p ict u re . Th is b lu e b o rd e r a is d d e d t o im a g e b e ca u s e it is a d e fa u lt fo r im a g e lin ks . If yo u d o n 't wa n t t h is b o rd e r, u s e b o rd e r= 0 p a ra m e t e r. Exa m p le 4 - 2 : < HTML> < HEAD> < TITLE> Exa m p le 4 - 2 < / TITLE> < / HEAD> < BODY> Click o n b e lo w p ict u re t o vis it m y h o m e p a g e . < BR> < BR> < A HREF= "h t t p : / / www. a n g e lfire . co m / n t / s a rm a d ys "> < IMG S RC= "m e . g if"> < / A> < BR> < BR> Wit h o u t lin k b o rd e r : < BR> < BR> < A HREF= "h t t p : / / www. a n g e lfire . co m / n t / s a rm a d ys "> < IMG S RC= "m e . g if" b o rd e r= 0 > < / A> < / BODY> < / HTML> 4 - 4 Em a il lin k s If yo u h a ve s u rfe d we b fo r a wh ile yo u h a ve s e e n lin ks t h a t wh e n yo u click o n t h e m yo u r e m a il p ro g ra m s t a rt s a "co m p o s e n e w m e s s a g e " win d o w t h a t it s re ce ive r a d d re s s is e n t e re d fro m we b p a g e . Th is e m a il a d d re s s is t h e a d d re s s yo u wa n t e m a il t o b e s e n t t o . Lo o k a t e xa m p le b e lo w t o s e e h o w yo u ca n m a ke a lin k t o a n e m a il a d d re s s . < BODY> Click o n b e lo w lin k t o s e n d a n e m a il t o m e < BR>

< A HREF= "m a ilt o : we b m a s t e r@le a rn e m . co m t "> Em a il Me < / A> < / BODY> It u s e s a "m a ilt o : " s t rin g b e fo re d e s ire d e m a il a d d re s s t o co n ve rt it in t o a lin k a d d re s s . If yo u wa n t , yo u ca n u s e a s u b je ct fo r t h e e m a il. Th is e xa m p le will s h o w yo u h o w t o d o t h is : Exa m p le 4 - 3 : < HTML> < HEAD> < TITLE> Exa m p le 4 - 2 < / TITLE> < / HEAD> < BODY> Click o n b e lo w lin k t o s e n d u s yo u r co m m e n t s . < BR> < A HREF= "m a ilt o : we b m a s t e r@le a rn e m . co m ? s u b je ct : co m m e n t s a b o u t yo u r s it e "> Em a il Me < / A> < / BODY> < / HTML> Ju s t kn o w t h a t s o m e b ro ws e rs a n d e m a il p ro g ra m s d o n o t s u p p o rt s u b je ct in e m a il lin ks . 4 - 5 Lis t s Th e re a re t im e s t h a t yo u wa n t t o in s e rt it e m s re la t e d t o a s u b je ct in lis t fo rm in yo u r we b p a g e . HTML p ro vid e s yo u wit h t a g s t o d o t h is . < UL> < / UL> t a g s a re firs t ch o ice o f t h e s e t a g s . Exa m p le 4 - 4 : < HTML> < HEAD> < TITLE> Exa m p le 4 - 3 < / TITLE> < / HEAD> < BODY> Th is is a lis t o f s u b je ct s co ve re d in t h is le s s o n : < UL> < LI> Te xt Lin ks < LI> Im a g e Lin ks < LI> Em a il Lin ks < LI> Lis t o f It e m s < / UL> < / BODY> < / HTML> Re s u lt p a g e will d is p la y lis t it e m s in s e p a ra t e lin e s s t a rt e d wit h a s m a ll b u lle t . Yo u s e e t h a t we h a ve e n t e re d lis t it e m s s t a rt e d wit h a < LI> t a g b e t we e n < UL> < / UL> t a g s . < UL> t a g is a p a rt o f lis t t a g s . If yo u wa n t t h e it e m s t o s t a rt wit h n u m b e rs in s t e a d o f b u lle t s , yo u m u s t u s e < OL> < / OL> t a g s in s t e a d o f < UL> < / UL> t a g s . < OL> < LI> Te xt Lin ks < LI> Im a g e Lin ks

< LI> Em a il Lin ks < LI> Lis t o f It e m s < / OL> Be s u re t o writ e d o wn co d e s in a file a n d vie w it wit h a b ro ws e r. 4 - 6 Ho riz o n t a l S e p a ra t o r Ru le An o t h e r u s e fu l h t m l t a g t h a t yo u will u s e , is < HR> t a g . If yo u n e e d t o s e p a ra t e t e xt in yo u r we b p a g e b y h o rizo n t a l lin e s , yo u m a y u s e t h is t a g . < BODY> Firs t s e ct io n < HR> S e co n d s e ct io n < / BODY> Re s u lt is t wo lin e s o f t e xt s e p a ra t e d b y a h o rizo n t a l ru le . Yo u ca n s p e cify p a ra m e t e rs fo r h o rizo n t a l ru le . If yo u wa n t t o ch a n g e wid t h o f ru le yo u ca n u s e wid t h p a ra m e t e r. < HR WIDTH= "5 0 % "> wid t h in p e rce n t < HR WIDTH= "1 0 0 "> wid t h in p ixe ls Yo u ca n a ls o d e t e rm in e lin e s ize p a ra m e t e r t o ch a n g e lin e d ia m e t e r. < HR s ize = 5 > It is o b vio u s t h a t yo u ca n m ix p a ra m e t e rs wit h e a ch o t h e r. Ho rizo n t a l ru le cre a t e d b y t h is t a g is a lin e t h a t h a s a s h a d e . Yo u ca n ch a n g e t h e ru le t o a s o lid lin e in s t e a d o f a s h a d e d lin e , yo u ca n a d d a NOS HADE p a ra m e t e r. < HR S IZE= 1 NOS HADE> Yo u ca n a ls o d e t e rm in e Co lo r fo r yo u r lin e : < HR co lo r= "# 0 0 0 0 0 0 "> Ab o ve lin e will n o t h a ve a s h a d e a n d it is a s o lid lin e . 4 - 9 En d In t h is le s s o n yo u le a rn e d h o w t o u s e t e xt lin ks , im a g e lin ks , e m a il lin ks , lis t s a n d h o rizo n t a l ru le . Un t il n o w we h a ve co ve re d g e n e ra l HTML t a g s . In n e xt le s s o n we will co ve r m o re . We will t h e n s t a rt m o re a d va n ce d s u b je ct s s u ch a s t a b le s , fra m e s a n d fo rm s in n e xt le s s o n s . No w yo u m u s t b e a b le t o d e s ig n s im p le h o m e p a g e s . S o wh y n o t s t a rt ? N o t ic e : Yo u ca n fin d e xa m p le s o f t h is le s s o n s in o u r we b s it e . Th e re yo u m u s t g o t o re s o u rce s s e ct io n a n d t h e n click o n "We b e m a il co u rs e e xa m p le p a g e . "

Exe rcis e s :

At t e n t io n : Do n o t u s e a n y h t m l e d it in g p ro g ra m like MS Fro n t Pa g e . Yo u m u s t wo rk o n t h e co d e s yo u rs e lf. Co u rs e s u p p o rt : Pa id s t u d e n t s m u s t s e n d e xe rcis e s t o t h e ir t u t o r. Tu t o r will re t u rn co rre ct e d e xe rcis e t o t h e s t u d e n t . Ot h e rs ca n a s k t h e ir q u e s t io n s in S u p p o rt fo ru m s in o u r we b s it e .

1 - Cre a t e a p a g e wit h a lin k in it t h a t p o in t s t o ya h o o s it e . Ce n t e r t h e lin k in s cre e n ce n t e r. Us e wh a t yo u le a rn e d a b o u t p a ra g ra p h s in p re vio u s le s s o n . 2 - Ch a n g e a b o ve e xa m p le t o u s e a n im a g e a s a lin k t h a t p o in t s t o ya h o o s it e . Re m o ve b lu e b o rd e r a ro u n d t h e p ict u re . 3 - In s e rt b o t h o f t h e e xe rcis e s a b o ve in a s in g le p a g e a n d s e p a ra t e t e xt lin k fro m im a g e lin k b y a s o lid g re e n lin e wit h 5 0 % o f t h e s cre e n wid t h . 4 - Cre a t e a co m p le t e co n t a ct p a g e ( h t m l co d e ) fo r yo u rs e lf. Pe o p le vis it in g t h is p a g e m u s t b e a b le t o s e n d yo u co m m e n t s a b o u t yo u r h o m e p a g e . 5 - Cre a t e a co m p le t e we b p a g e t h a t co n t a in s a n u m b e re d lis t o f co u rs e s yo u a re in t e re s t e d t o fin d o n t h e in t e rn e t .

============================================================ © 2 0 0 0 , 2 0 0 1 S ia m a k S a rm a d y a n d Le a rn e m Gro u p . All rig h t s re s e rve d . Th is t e xt is writ t e n t o b e u s e d a s t e xt m a t e ria l fo r "We b Pa g e d e s ig n Em a il Co u rs e ". An y kin d o f re p ro d u ct io n , re d is t rib u t io n in a n y fo rm wit h o u t writ t e n p e rm is s io n o f t h e writ e r is s t rict ly p ro h ib it e d . Th is s p e cia l ve rs io n is p re p a re d in PDF fo rm . Yo u ca n re d is t rib u t e t h is file wit h o u t a n y ch a n g e s e it h e r in co n t e n t s o r in file fo rm a t . It ca n n o t b e re d is t rib u t e d in p rin t e d fo rm o r a n y o t h e r m e d ia wit h o u t p e rm is s io n o f t h e writ e r.

Ba c k

Ne x t

Ba c k

Ne x t

W e b p a g e d e s ig n c o u rs e Le s s o n 5 Co u rs e s u p p o rt : Yo u ca n a s k yo u r co u rs e q u e s t io n s in Le a rn e m s u p p o rt fo ru m s . Ple a s e s u p p o rt u s b y vis it in g o u r s u p p o rt fo ru m s a n d a s kin g yo u r q u e s t io n s a n d a n s we rin g q u e s t io n s o f o t h e rs . Re g is t ra t io n : Yo u ca n a ls o re g is t e r fo r p a id we b d e s ig n e m a il co u rs e . If yo u re g is t e r yo u will b e n e fit fro m s t ro n g o n e t o o n e s t u d e n t s u p p o rt , p e rs o n a l t u t o r, m o re fa cilit ie s , d is co u n t fo r o t h e r co u rs e s , a cce s s t o s t u d e n t s a re a a n d m a n y m o re . Co u rs e fe e fo r w e b p a g e d e s ig n e m a il c o u r s e is $ 1 5 o n ly. Pa id s t u d e n t s will re ce ive 1 3 a d va n ce d le s s o n s in a d d it io n t o 7 g e n e ra l le s s o n s . Yo u ca n re g is t e r fo r p a id co u rs e a t : Co u rs e Re g is t ra t io n He re

5 - 1 Ta b le s Ta b le is a m a t rix like o b je ct t h a t h o ld s o t h e r o b je ct s s u ch a s t e xt , im a g e s , b u t t o n s a n d e t c. Eve n if yo u d o n 't s e e t h e m t h e y a re p re s e n t in a ll p ro fe s s io n a l we b p a g e s . Hid d e n t a b le s h o ld g ra p h ic im a g e s a n d t e xt in t h e ir p la ce s in t h e s e p a g e s . 5 - 2 D ra w in g a t a b le To d ra w a t a b le we will u s e < TABLE> t a g . We will n e e d t wo o t h e r re la t e d t a g s t o m a ke t a b le ro ws a n d co lu m n s . Th e s e a re < TR> a n d < TD> t a g s . < TR> t a g is u s e d t o cre a t e a ro w in t a b le . Da t a t h a t will fit in a ro w will b e e n clo s e d in < TR> < / TR> t a g s . Fo llo win g e xa m p le p ro d u ce s a t a b le wit h t wo ro ws . We will n e e d < TD> t a g t o cre a t e co lu m n s in e a ch ro w. < TABLE> < TR> < TD> Firs t Ro w< / TD> < / TR> < TR> < TD> S e co n d Ro w< / TD> < / TR> < / TABLE>

If yo u b ro ws e t h is co d e in a b ro ws e r yo u m a y s u rp ris e . Yo u will n o t s e e a n y t a b le b u t t wo lin e s o f co d e . In fa ct t a b le is t h e re b u t yo u ca n n o t s e e it . < TABLE> Ta g will n o t m a ke t a b le b o rd e rs . Yo u m u s t u s e a p a ra m e t e r t o a d d b o rd e rs t o t h e t a b le . Yo u ca n s p e cify a b o rd e r wid t h fo r a t a b le b y a d d in g a b o rd e r p a ra m e t e r t o < TABLE> t a g . < TABLE BORDER= 1 > < TR> < TD> Firs t Ro w< / TD> < / TR> < TR> < TD> S e co n d Ro w< / TD> < / TR> < / TABLE> As yo u m a y g u e s s d e fa u lt b o rd e r s ize is 0 . Wh e n we d o n o t s p e cify s ize s fo r a t a b le it will b e in a s ize t h a t it n e e d s t o b e a b le t o fit t e xt o r a n y o t h e r o b je ct t h a t it will h o ld . 5 - 3 S p e c ify in g t a b le s iz e s Yo u ca n s p e cify wid t h fo r a t a b le b o t h in p e rce n t s o f p a g e wid t h a n d in p ixe ls . Exa m p le 5 - 1 : < HTML> < HEAD> < TITLE> Exa m p le 5 - 1 < / TITLE> < / HEAD> < BODY> < TABLE WIDTH= 5 0 % BORDER= 1 > < TR> < TD> Ce ll Ro w1 Co l1 < / TD> < TD> Ce ll Ro w1 Co l2 < / TD> < / TR> < TR> < TD> Ce ll Ro w2 Co l1 < / TD> < TD> Ce ll Ro w2 Co l2 < / TD> < / TR> < / TABLE> < / BODY> < / HTML> If yo u wa n t yo u ca n d e t e rm in e t a b le wid t h in p ixe ls . < TABLE WIDTH= 2 5 0 BORDER= 1 > < TR> < TD> Ce ll Ro w1 Co l1 < / TD> < TD> Ce ll Ro w1 Co l2 < / TD> < / TR> < TR> < TD> Ce ll Ro w2 Co l1 < / TD> < TD> Ce ll Ro w2 Co l2 < / TD> < / TR>

< / TABLE> Yo u ca n s p e cify t a b le h e ig h t t o o . In t h is wa y yo u ca n d e t e rm in e h e ig h t a n d wid t h o f t a b le . Wid t h a n d h e ig h t o f t a b le will b e d ivid e d b e t we e n ce lls in ro ws a n d co lu m n s s o if t a b le wid t h is 1 0 0 a n d t h e re a re 2 co lu m n s t h e n wid t h o f e a ch ce ll will b e 5 0 . Ju s t p a y a t t e n t io n t o t h is im p o rt a n t p o in t t h a t if yo u p u t a lo t o f t e xt in a ce ll o f a t a b le it will b e e xp a n d e d t o fit t h e t e xt in it . 5 - 4 Te x t a lig n m e n t in t a b le c e lls By d e fa u lt t e xt e n t e re d in a ce ll will a p p e a r a t t h e le ft s id e o f t h e ce ll. Yo u ca n a d d e it h e r o f t h e s e o p t io n s t o < TD> t a g t o s p e cify h o rizo n t a l a lig n m e n t o f t e xt . < TD ALIGN= CENTER> o r < TD ALIGN= RIGHT> o r < TD ALIGN= LEFT> As we s a w, le ft a lig n m e n t is d e fa u lt fo r ce lls . Yo u ca n a ls o d e t e rm in e ve rt ica l a lig n m e n t o f t e xt in a ce ll b y a d d in g VALIGN o p t io n t o < TD> t a g . Th e re a re t h re e va lu e s fo r VALIGN o p t io n : TOP, BOTTOM a n d MIDDLE. MIDDLE is d e fa u lt va lu e if yo u d o n o t u s e t h is p a ra m e t e r. Exa m p le 5 - 2 : < HTML> < HEAD> < TITLE> Exa m p le 5 - 2 < / TITLE> < / HEAD> < BODY> < TABLE WIDTH= 5 0 % HEIGHT= 1 0 0 BORDER= 3 > < TR> < TD ALIGN= LEFT VALIGN= TOP> TOP LEFT< / TD> < TD ALIGN= RIGHT VALIGN= TOP> TOP RIGHT< / TD> < / TR> < TR> < TD ALIGN= LEFT VALIGN= BOTTOM> BOTTOM LEFT< / TD> < TD ALIGN= RIGHT VALIGN= BOTTOM> BOTTOM RIGHT< / TD> < / TR> < / TABLE> < / BODY> < / HTML> 5 - 5 I m a g e s in t a b le c e lls Yo u will s o o n n e e d t o in s e rt im a g e s in t a b le ce lls . As we t o ld la t e r t a b le s will b e u s e d t o h o ld im a g e s in t h e ir p la ce s . Yo u ca n in s e rt a n im a g e in a t a b le ce ll b y in s e rt in g < IMG> t a g b e t we e n < TD> < / TD> t a g s o f a ce rt a in ce ll.

Exa m p le 5 - 3 < HTML> < HEAD> < TITLE> Exa m p le 5 - 3 < / TITLE> < / HEAD> < BODY> < TABLE BORDER= 4 > < TR> < TD> < IMG S RC= "im a g e 5 3 . g if"> < / TD> < / TR> < / TABLE> < / BODY> < / HTML> 5 - 6 En d In t h is le s s o n yo u le a rn e d cre a t in g t a b le s . Ta b le s a re o n e o f im p o rt a n t o b je ct s in we b p a g e s . In n e xt le s s o n yo u will le a rn m o re a b o u t t a b le s . An d fin a lly a q u e s t io n : Ha ve yo u s t a rt e d d e s ig n in g we b p a g e s ? No w is a g re a t t im e t o s t a rt . Yo u le a rn a n d yo u u s e wh a t yo u le a rn im m e d ia t e ly. Th is will g u a ra n t e e t h a t yo u le a rn e ve ryt h in g yo u s t u d ie d in t h is co u rs e . S o s t a rt n o w !! N o t ic e : Yo u ca n fin d e xa m p le s o f t h is le s s o n s in o u r we b s it e . Th e re yo u m u s t g o t o re s o u rce s s e ct io n a n d t h e n click o n "We b e m a il co u rs e e xa m p le p a g e . "

Exe rcis e s : At t e n t io n : Do n o t u s e a n y h t m l e d it in g p ro g ra m like MS Fro n t Pa g e . Yo u m u s t wo rk o n t h e co d e s yo u rs e lf. Co u rs e s u p p o rt : Pa id s t u d e n t s m u s t s e n d e xe rcis e s t o t h e ir t u t o r. Tu t o r will re t u rn co rre ct e d e xe rcis e t o t h e s t u d e n t . Ot h e rs ca n a s k t h e ir q u e s t io n s in S u p p o rt fo ru m s in o u r we b s it e .

1 - Cre a t e a 3 * 3 t a b le . In s e rt a b o ld h e a d in g in t o p ce n t e r ce ll. Th e n in s e rt a t it le in le ft ce n t e r a n d b o t t o m ce lls . Th e n in s e rt s m a ll t e xt s in t wo rig h t s id e ce n t e r a n d b o t t o m ce lls . We a re t ryin g t o fo rm a t t e xt in we b p a g e s u s in g t a b le s . 2 - Cre a t e a 2 * 2 t a b le . In s e rt a n im a g e file ( s m a ll s ize d ) in e a ch ce ll o f t a b le . Ad ju s t ce ll a lig n m e n t o f e a ch ce ll s o t h a t im a g e s g a t h e r a t t h e ce n t e r o f t h e t a b le s t ickin g t o e a ch o t h e r. Ad ju s t t a b le wid t h t o 5 0 % o f we b p a g e wid t h a n d 2 0 0 p ixe ls fo r it s h e ig h t .

============================================================ © 2 0 0 0 , 2 0 0 1 S ia m a k S a rm a d y a n d Le a rn e m Gro u p . All rig h t s re s e rve d . Th is t e xt is writ t e n t o b e u s e d a s t e xt m a t e ria l fo r "We b Pa g e d e s ig n Em a il Co u rs e ". An y kin d o f re p ro d u ct io n , re d is t rib u t io n in a n y fo rm wit h o u t writ t e n p e rm is s io n o f t h e writ e r is s t rict ly p ro h ib it e d . Th is s p e cia l ve rs io n is p re p a re d in PDF fo rm . Yo u ca n re d is t rib u t e t h is file wit h o u t a n y ch a n g e s e it h e r in co n t e n t s o r in file fo rm a t . It ca n n o t b e re d is t rib u t e d in p rin t e d fo rm o r a n y o t h e r m e d ia wit h o u t p e rm is s io n o f t h e writ e r.

Ba c k

Ne x t

Ba c k

Ne x t

W e b p a g e d e s ig n c o u rs e Le s s o n 6 Co u rs e s u p p o rt : Yo u ca n a s k yo u r co u rs e q u e s t io n s in Le a rn e m s u p p o rt fo ru m s . Ple a s e s u p p o rt u s b y vis it in g o u r s u p p o rt fo ru m s a n d a s kin g yo u r q u e s t io n s a n d a n s we rin g q u e s t io n s o f o t h e rs . Re g is t ra t io n : Yo u ca n a ls o re g is t e r fo r p a id we b d e s ig n e m a il co u rs e . If yo u re g is t e r yo u will b e n e fit fro m s t ro n g o n e t o o n e s t u d e n t s u p p o rt , p e rs o n a l t u t o r, m o re fa cilit ie s , d is co u n t fo r o t h e r co u rs e s , a cce s s t o s t u d e n t s a re a a n d m a n y m o re . Co u rs e fe e fo r w e b p a g e d e s ig n e m a il c o u r s e is $ 1 5 o n ly. Pa id s t u d e n t s will re ce ive 1 3 a d va n ce d le s s o n s in a d d it io n t o 7 g e n e ra l le s s o n s . Yo u ca n re g is t e r fo r p a id co u rs e a t : Co u rs e Re g is t ra t io n He re

6 - 1 I n t ro d u c t io n We s t a rt e d o u r s t u d y o n t a b le s in p re vio u s le s s o n a n d We will co n t in u e o u r s t u d y in t h is le s s o n . As I t o ld yo u in p re vio u s le s s o n , t a b le s a re ve ry im p o rt a n t in p ro fe s s io n a l we b d e s ig n . Yo u will n e e d t h e m fo r h o ld in g p ict u re s , b u t t o n s , t e xt e t c. In t h is le s s o n we will co ve r m o re o p t io n s a b o u t t a b le ce lls , ce ll p a d d in g , ce ll s p a cin g a n d fin a lly we will le a rn h o w t o lin k d iffe re n t p a rt s o f a n im a g e t o d iffe re n t lo ca t io n s o n t h e we b . 6 - 2 Ce ll W id t h ( Co lu m n W id t h ) In p re vio u s le s s o n we le a rn e d h o w we ca n d e t e rm in e wid t h a n d h e ig h t o f a t a b le . < HTML> < HEAD> < TITLE> Ta b le : Co lu m n wid t h s n o t s p e cifie d < / TITLE> < / HEAD> < BODY> < TABLE WIDTH= 4 0 0 HEIGHT= 1 0 0 BORDER= 3 > < TR> < TD> TOP LEFT< / TD> < TD> TOP RIGHT< / TD> < / TR> < TR> < TD> BOTTOM LEFT< / TD> < TD> BOTTOM RIGHT< / TD> < / TR>

< / TABLE> < / BODY> < / HTML> In a b o ve t a b le we h a ve n o t d e t e rm in e d s ize s fo r t wo ce lls in firs t ro w. In t h is wa y yo u will n o t b e a b le t o s a y h o w will t h e s e ce lls d is p la y in d iffe re n t b ro ws e rs a n d d iffe re n t s cre e n m o d e s . Yo u ca n d e t e rm in e wid t h o f e a ch co lu m n in yo u r t a b le b y s p e cifyin g wid t h o f ce lls in firs t ro w. Ju s t b e ca re fu l a b o u t co rre ct n e s s o f s ize s yo u s p e cify. Fo r e xa m p le if yo u r t a b le wid t h is 2 0 0 p ixe ls s u m o f ce ll wid t h s m u s t b e e xa ct ly 2 0 0 . Ex a m p le 6 - 1 a : < HTML> < HEAD> < TITLE> Exa m p le 6 - 1 a < / TITLE> < / HEAD> < BODY> < TABLE WIDTH= 4 0 0 HEIGHT= 1 0 0 BORDER= 3 > < TR> < TD WIDTH= 1 4 0 > TOP LEFT< / TD> < TD WIDTH= 2 6 0 > TOP RIGHT< / TD> < / TR> < TR> < TD> BOTTOM LEFT< / TD> < TD> BOTTOM RIGHT< / TD> < / TR> < / TABLE> < / BODY> < / HTML> Yo u ca n a ls o d e t e rm in e ce ll wid t h s in p e rce n t . S u m o f ce ll wid t h p e rce n t a g e s m u s t b e 1 0 0 % . Ex a m p le 6 - 1 b : < HTML> < HEAD> < TITLE> Exa m p le 6 - 1 b < / TITLE> < / HEAD> < BODY> < TABLE WIDTH= 4 0 0 HEIGHT= 1 0 0 BORDER= 3 > < TR> < TD WIDTH= 3 5 % > TOP LEFT< / TD> < TD WIDTH= 6 5 % > TOP RIGHT< / TD> < / TR> < TR> < TD> BOTTOM LEFT< / TD> < TD> BOTTOM RIGHT< / TD> < / TR> < / TABLE> < / BODY> < / HTML> Wh e n yo u d e t e rm in e s ize s o f firs t ro w ce lls yo u will n o t n e e d t o d e t e rm in e wid t h s fo r s e co n d ro w

ce lls . If yo u wa n t a ce ll t o b e e m p t y, yo u ca n n o t o m it d e fin it io n fo r t h a t ce ll. In s e rt ce ll d e fin it io n , a n d e n t e r a &n b s p ; b e t we e n < TD> < / TD> t a g s . As we t o ld in la t e r le s s o n s t h is m e a n s a s p a ce ch a ra ct e r. Yo u m u s t e n t e r a t le a s t a s p a ce in t h is fo rm if yo u n e e d a n e m p t y ce ll. Ot h e rwis e a re a o f t h a t ce ll will n o t a p e a r like a n e m p t y ce ll. Ex a m p le 6 - 2 : < HTML> < HEAD> < TITLE> Exa m p le 6 - 2 < / TITLE> < / HEAD> < BODY> < TABLE WIDTH= 4 0 0 HEIGHT= 1 0 0 BORDER= 3 > < TR> < TD WIDTH= 1 4 0 > TOP LEFT< / TD> < TD WIDTH= 2 6 0 > &n b s p ; < / TD> < / TR> < TR> < TD> &n b s p ; < / TD> < TD> BOTTOM RIGHT< / TD> < / TR> < / TABLE> < / BODY> < / HTML> In a b o ve e xa m p le we h a ve t wo e m p t y ce lls b u t a s we h a ve s p e cifie d b o t h t a b le a n d ce ll s ize s , t a b le will n o t lo s e it 's s h a p e . If we re m o ve s ize s , we ca n n o t g u a ra n t e e h o w it will b e d is p la ye d o n d iffe re n t b ro ws e rs a n d s cre e n m o d e s . Fo r t h e a b o ve re a s o n we s u g g e s t yo u t o d e t e rm in e t a b le s ize s in e ve ry t a b le yo u u s e . Us in g fixe d s ize s is n o t a g o o d id e a . Us e p e rce n t s ize s in s t e a d o f fixe d s ize s . 6 - 3 Ce ll p a d d in g Yo u ca n s p e cify t wo o t h e r im p o rt a n t s ize p a ra m e t e rs fo r a t a b le . Ce ll p a d d in g is t h e s p a ce b e t we e n ce ll b o rd e rs a n d t a b le co n t e n t s s u ch a s t e xt , im a g e e t c. Exa m p le 6 - 3 : < HTML> < HEAD> < TITLE> Exa m p le 6 - 3 < / TITLE> < / HEAD> < BODY> Ce ll p a d d in g e ffe ct : < BR> < BR> < TABLE BORDER= 3 CELLPADDING= 2 0 > < TR> < TD> TOP LEFT< / TD> < TD> TOP RIGHT< / TD> < / TR> < TR> < TD> BOTTOM LEFT< / TD> < TD> BOTTOM RIGHT< / TD>

< / TR> < / TABLE> < / BODY> < / HTML> De fa u lt va lu e fo r t h is o p t io n is 1 . It m e a n s t h a t co n t e n t s o f a ce ll will h a ve a d is t a n ce o f o n e p ixe l wit h b o rd e rs . If yo u d o n 't wa n t a n y s p a ce b e t we e n o b je ct in s id e t h e ce lls a n d it s b o rd e rs yo u ca n d e t e rm in e t h e va lu e o f 0 fo r t h is o p t io n . 6 - 4 Ce ll s p a c in g Ce ll s p a cin g p a ra m e t e r d e t e rm in e s t h e s p a ce b e t we e n in n e r a n d o u t e r p a rt s o f a t a b le . In fa ct a t a b le is co n s t ru ct e d fo rm t wo b o rd e rs . A b o rd e r a re a a n d a ce ll a re a . Th e re is a s p a ce b e t we e n ce ll a re a a n d o u t e r b o rd e r. We ca ll t h is "ce ll s p a cin g ". If yo u in cre a s e t h is va lu e yo u will h a ve a t h ick b o rd e r. De fa u lt va lu e fo r t h is p ro p e rt y is 2 . If yo u s p e cify 0 fo r it , yo u will h a ve a ve ry t h in b o rd e r. Ex a m p le 6 - 4 : < HTML> < HEAD> < TITLE> Exa m p le 6 - 4 < / TITLE> < / HEAD> < BODY> Ce ll s p a cin g e ffe ct : < BR> < BR> < TABLE BORDER= 3 CELLS PACING= 1 0 > < TR> < TD> TOP LEFT< / TD> < TD> TOP RIGHT< / TD> < / TR> < TR> < TD> BOTTOM LEFT< / TD> < TD> BOTTOM RIGHT< / TD> < / TR> < / TABLE> < / BODY> < / HTML> Yo u ca n a ls o m ix ce ll s p a cin g a n d ce ll p a d d in g o p t io n s t o m a ke s p e cific t a b le s t h a t yo u n e e d . 6 - 5 Ta b le s a n d im a g e s S o m e t im e s yo u n e e d a n im a g e t h a t wh e n u s e rs clicks o n d iffe re n t p a rt s o f it t h e y g o t o d iffe re n t p a g e s . In p re vio u s le s s o n s yo u le a rn e d h o w t o u s e a n im a g e a s a lin k t o a n o t h e r a d d re s s o r p a g e . In t h is s p e cia l ca s e yo u will n e e d t o cu t yo u r p ict u re in t o a s m a n y p a rt s a s yo u n e e d a n d in s e rt t h e m in a t a b le t h a t h o ld s im a g e p a rt s b e s id e e a ch o t h e r. Th e n yo u will lin k e a ch im a g e p a rt t o a d iffe re n t p a g e . Yo u will a ls o n e e d t o s e t b o t h ce ll s p a cin g a n d ce ll p a d d in g t o t h e va lu e o f 0 t o p re ve n t t h e t a b le t o b e s e e n b e t we e n im a g e p a rt s .

In t h is wa y u s e rs will s e e a s in g le im a g e b u t wh e n t h e y click o n d iffe re n t p a rt s o f im a g e t h e y will g o t o d iffe re n t a d d re s s e s . Yo u ca n s e e a n e xa m p le o f t h is t e ch n iq u e in e xa m p le p a g e fo r t h is le s s o n o n o u r s it e a m o n g o t h e r e xa m p le s . 6 - 6 W o rk in g w it h g ra p h ic e d it in g p ro g ra m s As a we b d e s ig n e r yo u n e e d a g ra p h ics m a n ip u la t io n p ro g ra m . Th e re a re m a n y p ro fe s s io n a l p ro g ra m s in t h e m a rke t . Ph o t o s h o p is a ve ry p ro fe s s io n a l a n d p o we rfu l p ro g ra m b u t it is a n e xp e n s ive p ro g ra m . Yo u ca n u s e Pa in t S h o p Pro in s t e a d . Th is is a n o t h e r p ro fe s s io n a l b u t e a s y p ro g ra m . Yo u ca n e ve n d o wn lo a d lim it e d ve rs io n s o f t h is p ro g ra m fro m m a n y d o wn lo a d s it e s . Th e s e p ro g ra m s will e n a b le yo u t o cu t p ict u re s in t o p a rt s , a d d m a n y e ffe ct s o n yo u r g ra p h ics , d e cre a s e g ra p h ics s ize e t c. No w in t h is le s s o n yo u will n e e d s u ch a p ro g ra m . Yo u m u s t wo rk wit h t h e p ro g ra m t o in cre a s e yo u r e xp e rt is e wit h it . In t h is wa y it will b e p o s s ib le fo r yo u t o m a ke in t e re s t in g im a g e s fo r yo u r we b pages. In e xe rcis e s o f t h is le s s o n yo u m u s t u s e s u ch a p ro g ra m t o cu t a n im a g e in t o fo u r p a rt s . It is a s t a rt in g p o in t . On e s id e o f we b d e s ig n a rt is g ra p h ics d e s ig n . S o s t a rt No w ! N o t ic e : Yo u ca n fin d e xa m p le s o f t h is le s s o n s in o u r we b s it e . Th e re yo u m u s t g o t o re s o u rce s s e ct io n a n d t h e n click o n "We b e m a il co u rs e e xa m p le p a g e . "

Exe rcis e s : At t e n t io n : Do n o t u s e a n y h t m l e d it in g p ro g ra m like MS Fro n t Pa g e . Yo u m u s t wo rk o n t h e co d e s yo u rs e lf. Co u rs e s u p p o rt : Pa id s t u d e n t s m u s t s e n d e xe rcis e s t o t h e ir t u t o r. Tu t o r will re t u rn co rre ct e d e xe rcis e t o t h e s t u d e n t . Ot h e rs ca n a s k t h e ir q u e s t io n s in S u p p o rt fo ru m s in o u r we b s it e .

1 - In p re vio u s le s s o n we a s ke d yo u t o cre a t e a 2 * 2 t a b le wit h im a g e s in s id e e a ch ce ll t h a t g a t h e r a t t h e ce n t e r o f t h e t a b le . As we d id n o t kn o w h o w t o o m it ce ll p a d d in g a n d ce ll s p a cin g , im a g e p a rt s h a d a lit t le s p a ce b e t we e n t h e m . Re writ e t h a t e xa m p le in a wa y t h a t p ict u re p a rt s s t ick t o e a ch o t h e r s o t h a t t h e u s e r ca n n o t re a lize t h a t t h e y a re d iffe re n t im a g e s . Cu t a re a d y im a g e t o fo u r p a rt s wit h yo u r d e s ire d g ra p h ics e d it in g p ro g ra m . Th e n u s e t h e s e 4 im a g e s fo r t h is e xe rcis e . If yo u s e n d yo u r e xe rcis e t o yo u r t u t o r s e n d p ict u re s t o o . Als o t e ll wh ich p ro g ra m yo u a re u s in g fo r e d it in g im a g e s .

2 - Re writ e a b o ve e xa m p le s o t h a t e a ch p a rt o f im a g e lin ks u s t o a d iffe re n t p a g e in yo u r we b s it e . Us e < A HREF= ""> < / A> in s id e < TD> < / TD> t a g s .

============================================================ © 2 0 0 0 , 2 0 0 1 S ia m a k S a rm a d y a n d Le a rn e m Gro u p . All rig h t s re s e rve d . Th is t e xt is writ t e n t o b e u s e d a s t e xt m a t e ria l fo r "We b Pa g e d e s ig n Em a il Co u rs e ". An y kin d o f re p ro d u ct io n , re d is t rib u t io n in a n y fo rm wit h o u t writ t e n p e rm is s io n o f t h e writ e r is s t rict ly p ro h ib it e d . Th is s p e cia l ve rs io n is p re p a re d in PDF fo rm . Yo u ca n re d is t rib u t e t h is file wit h o u t a n y ch a n g e s e it h e r in co n t e n t s o r in file fo rm a t . It ca n n o t b e re d is t rib u t e d in p rin t e d fo rm o r a n y o t h e r m e d ia wit h o u t p e rm is s io n o f t h e writ e r.

Ba c k

Ne x t

Ba c k

Ne x t

W e b p a g e d e s ig n c o u rs e Le s s o n 7 Co u rs e s u p p o rt : Yo u ca n a s k yo u r co u rs e q u e s t io n s in Le a rn e m s u p p o rt fo ru m s . Ple a s e s u p p o rt u s b y vis it in g o u r s u p p o rt fo ru m s a n d a s kin g yo u r q u e s t io n s a n d a n s we rin g q u e s t io n s o f o t h e rs . Re g is t ra t io n : Yo u ca n a ls o re g is t e r fo r p a id we b d e s ig n e m a il co u rs e . If yo u re g is t e r yo u will b e n e fit fro m s t ro n g o n e t o o n e s t u d e n t s u p p o rt , p e rs o n a l t u t o r, m o re fa cilit ie s , d is co u n t fo r o t h e r co u rs e s , a cce s s t o s t u d e n t s a re a a n d m a n y m o re . Co u rs e fe e fo r w e b p a g e d e s ig n e m a il c o u r s e is $ 1 5 o n ly. Pa id s t u d e n t s will re ce ive 1 3 a d va n ce d le s s o n s in a d d it io n t o 7 g e n e ra l le s s o n s . Yo u ca n re g is t e r fo r p a id co u rs e a t : Co u rs e Re g is t ra t io n He re

7 - 1 Ta b le b a c k g ro u n d c o lo r We ca n u s e b a ckg ro u n d co lo rs fo r t a b le s in n e w b ro ws e rs . Yo u ca n s p e cify b a ckg ro u n d co lo r o p t io n s in s id e < TABLE> t a g . Exa m p le 7 - 1 : < HTML> < HEAD> < TITLE> Exa m p le 7 - 1 < / TITLE> < / HEAD> < BODY> < TABLE wid t h = "3 0 0 " BGCOLOR= "# 6 6 CCFF"> < TR> < TD wid t h = "5 0 % "> A< / TD> < TD wid t h = "5 0 % "> B< / TD> < / TR> < TR> < TD wid t h = "5 0 % "> C< / TD> < TD wid t h = "5 0 % "> D< / TD> < / TR> < / TABLE> < / BODY> < / HTML> In a b o ve e xa m p le e n t ire t a b le will ch a n g e t o n e w co lo r e ve n t a b le b o rd e rs . Yo u ca n a ls o d e t e rm in e b a ckg ro u n d co lo r fo r e a ch ro w o f yo u r t a b le . If yo u wa n t t o d o t h is , yo u m u s t u s e BGCOLOR

o p t io n in s id e < TR> t a g o f t h e d e s ire d ro w. Th is s e co n d m e t h o d will o n ly ch a n g e co lo rs o f ce lls in s p e cifie d ro w. Exa m p le 7 - 2 : < HTML> < HEAD> < TITLE> Exa m p le 7 - 2 < / TITLE> < / HEAD> < BODY> < TABLE wid t h = "3 0 0 " BORDER= 1 > < TR BGCOLOR= "# 6 6 CCFF"> < TD wid t h = "5 0 % "> A< / TD> < TD wid t h = "5 0 % "> B< / TD> < / TR> < TR BGCOLOR= "# CCFFFF"> < TD wid t h = "5 0 % "> C< / TD> < TD wid t h = "5 0 % "> D< / TD> < / TR> < / TABLE> < / BODY> < / HTML> Yo u ca n e ve n ch a n g e co lo r o f in d ivid u a l ce lls b y u s in g BGCOLOR o p t io n in < TD> < / TD> ce ll t a g s . Yo u ca n m ix a ll a b o ve o p t io n s t o cre a t e yo u r d e s ire d t a b le . In n e xt e xa m p le we will ch a n g e co lo r o f firs t ro w t o "# 3 3 6 6 9 9 ". Th e n we will ch a n g e co lo r o f t wo ce lls in s e co n d ro w t o "# 6 6 CCFF" a n d "# CCFFFF" re s p e ct ive ly. Exa m p le 7 - 3 : < HTML> < HEAD> < TITLE> Exa m p le 7 - 3 < / TITLE> < / HEAD> < BODY> < TABLE wid t h = "3 0 0 " BORDER= 1 > < TR BGCOLOR= "# 3 3 6 6 9 9 "> < TD wid t h = "5 0 % "> A< / TD> < TD wid t h = "5 0 % "> B< / TD> < / TR> < TR> < TD wid t h = "5 0 % " BGCOLOR= "# 6 6 CCFF"> C< / TD> < TD wid t h = "5 0 % " BGCOLOR= "# CCFFFF"> D< / TD> < / TR> < / TABLE> < / BODY> < / HTML> 7 - 2 Co lu m n S p a n S o m e t im e s yo u n e e d t o jo in t wo ce lls in a ro w t o e a ch o t h e r. Fo r e xa m p le in a 2 * 3 t a b le we m a y wa n t t o jo in t wo ce lls wit h e a ch o t h e r . In t h is wa y we will h a ve t wo ce lls in firs t ro w a n d t h re e

ce lls in s e co n d ro w. En t e r t h is h t m l co d e in a file a n d b ro ws e it in yo u r b ro ws e r t o s e e wh a t is co lu m n s p a n .

Exa m p le 7 - 4 : < HTML> < HEAD> < TITLE> Exa m p le 7 - 4 < / TITLE> < / HEAD> < BODY> < TABLE BORDER= 1 > < TR> < TD COLS PAN= 2 > A< / TD> < TD> B< / TD> < / TR> < TR> < TD> A< / TD> < TD> B< / TD> < TD> C< / TD> < / TR> < / TABLE> < / BODY> < / HTML> Ju s t b e ca re fu l t h a t wh e n yo u h a ve fo r e xa m p le 2 ce lls in firs t ro w a n d firs t o n e u s e s co lu m n s p a n p a ra m e t e r COLS PAN= 2 it m e a n s t h a t it is e q u a l t o t wo ce lls . Th e re fo re yo u m u s t h a ve t h re e ce lls in n e xt ro w ( t h re e < TR> t a g s ) o r yo u m a y u s e COLS PAN t o cre a t e ce lls t h a t wh e n yo u a d d t h e m , it will b e e q u a l t o p re vio u s ro w o r 3 in t h is e xa m p le . 7 - 3 Ro w S p a n Th is t im e we wa n t t o jo in t wo ce lls in a co lu m n ( fro m d iffe re n t ro ws ) . Th is is t h e s a m e a s p re vio u s s e ct io n wit h t h e d iffe re n ce t h a t we will jo in ce lls fro m d iffe re n t ro ws ra t h e r t h a n ce lls in d iffe re n t co lu m n s . Th is t im e we m u s t u s e ROWS PAN in s t e a d o f COLS PAN.

Exa m p le 7 - 5 : < HTML> < HEAD> < TITLE> Exa m p le 7 - 5 < / TITLE> < / HEAD> < BODY> < TABLE BORDER= "1 " WIDTH= "2 0 0 "> < TR> < TD ROWS PAN= "2 "> A< / TD> < TD> B< / TD> < TD> C< / TD> < / TR> < TR>

< TD> D< / TD> < TD> E< / TD> < / TR> < / TABLE> < / BODY> < / HTML> Ag a in yo u m u s t b e ca re fu l t h a t wh e n yo u h a ve fo r e xa m p le a ce ll in firs t co lu m n t h a t yo u h a ve jo in e d t wo ce lls t o cre a t e it u s in g t h e o p t io n ROWS PAN= 2 t h e n yo u r t a b le m u s t h a ve t wo ro ws a n d yo u m u s t t a ke t h is in m in d in n e xt p a rt s o f yo u r t a b le . In a b o ve e xa m p le we o n ly e n t e re d t wo ce lls in s e co n d ro w ( s t a rt e d fro m s e co n d < TR> ) a s firs t ce ll o f firs t ro w h a s o ccu p ie d firs t ce ll o f t h is ro w t o o a n d we h a ve o n ly t wo ce lls le ft o f 3 ce lls . En t e r t h is e xa m p le a n d b ro ws e it t o s e e t h e re s u lt s . Yo u m a y wa n t t o m ix t h e s e t a g s t o cre a t e yo u r cu s t o m t a b le s h o we ve r t h is is a co m p lica t e d t a s k a n d yo u m u s t wo rk h a rd t o g a in n e e d e d e xp e rie n ce wit h t h e s e t a b le s . 7 - 4 N e s t e d Ta b le s Ye s we ca n n e s t t a b le s in e a ch o t h e r. If yo u a re g o in g t o d e s ig n co m p lica t e d we b p a g e s yo u will a lwa ys d o t h is . Fo r e xa m p le yo u n e e d a t a b le wit h b o rd e r s ize o f 3 in a s p e cific p a rt o f a we b p a g e . To fix p o s it io n o f t h a t t a b le in yo u r d e s ire d p la ce yo u will n e e d a t a b le wit h b o rd e r s ize o f 0 . In t h is ca s e firs t t a b le ca n b e s e e n a s it s b o rd e r s ize is 2 b u t s e co n d o n e will n o t b e s e e n a s yo u u s e d it ju s t fo r p o s it io n in g o f firs t t a b le . An ywa y, writ in g a n e s t e d t a b le co d e is e a s y. Exa m p le 7 - 6 : < HTML> < HEAD> < TITLE> Exa m p le 7 - 6 < / TITLE> < / HEAD> < BODY> < TABLE b o rd e r= "0 " wid t h = "7 5 0 "> < TR> < TD wid t h = "2 5 % "> &n b s p ; < / TD> < TD wid t h = "2 5 % "> &n b s p ; < / TD> < TD wid t h = "2 5 % "> < TABLE b o rd e r= "2 " wid t h = "1 0 0 % "> < TR> < TD wid t h = "5 0 % "> 1 - < / TD> < TD wid t h = "5 0 % "> HTML< / TD> < / TR> < TR> < TD wid t h = "5 0 % "> 2 - < / TD> < TD wid t h = "5 0 % "> C Pro g . < / TD> < / TR> < TR> < TD wid t h = "5 0 % "> 3 - < / TD> < TD wid t h = "5 0 % "> JS crip t < / TD> < / TR> < / TABLE> < / TD> < TD wid t h = "2 5 % "> &n b s p ; < / TD> < / TR>

< / TABLE> < / BODY> < / HTML> In t h is e xa m p le we h a ve a 1 * 4 t a b le . We wa n t t o h o ld o u r m a in t a b le in s id e t h is t a b le in it s t h ird co lu m n s o t h a t o u r m a in t a b le will b e s h o wn in rig h t s id e o f t h e ce n t e r o f t h e s cre e n . Ma in t a b le h a s a b o rd e r s ize o f 1 wh ile firs t t a b le is h id d e n . 7 - 5 Yo u k n o w t a b le s n o w No w yo u h a ve le a rn e d t a b le b a s ics . Yo u s e e wh a t yo u le a rn e d a b o u t t a b le s wa s n o t t o o co m p lica t e d h o we ve r writ in g a co m p lica t e d t a b le s is n o t ve ry e a s y. Yo u m u s t wo rk fo r a lit t le t o b e a b le t o u s e t h e m e ffe ct ive ly. Ta b le s a re o n e o f t h e m o s t p o we rfu l fe a t u re s o f h t m l d e s ig n s o yo u m u s t b e a b le t o u s e t h e ir p o we r co rre ct ly. In n e xt le s s o n we will s t a rt s t u d yin g o n Fra m e s . Un t il t h e n , yo u ca n u s e yo u r fre e t im e t o wo rk o n t a b le s . N o t ic e : Yo u ca n fin d e xa m p le s o f t h is le s s o n s in o u r we b s it e . Th e re yo u m u s t g o t o re s o u rce s s e ct io n a n d t h e n click o n "We b e m a il co u rs e e xa m p le p a g e . "

Exe rcis e s : At t e n t io n : Do n o t u s e a n y h t m l e d it in g p ro g ra m like MS Fro n t Pa g e . Yo u m u s t wo rk o n t h e co d e s yo u rs e lf. Co u rs e s u p p o rt : Pa id s t u d e n t s m u s t s e n d e xe rcis e s t o t h e ir t u t o r. Tu t o r will re t u rn co rre ct e d e xe rcis e t o t h e s t u d e n t . Ot h e rs ca n a s k t h e ir q u e s t io n s in S u p p o rt fo ru m s in o u r we b s it e .

1 - Cre a t e a 3 * 2 t a b le ( 2 ro ws ) . Jo in it s firs t ro w ce lls in t o o n e ce ll ( 3 ce lls ) . S e co n d ro w h a s 3 ce lls ye t . En t e r a h e a d in g in u p p e r ce ll ( Firs t ro w) a n d e n t e r t h re e wo rd s in t h re e ce lls in s e co n d ro w. 2 - Re writ e a b o ve e xa m p le s o t h a t firs t ro w ce lls h a ve a s p e cific co lo r a n d e a ch ce ll in s e co n d ro w h a s a s e p a ra t e co lo r. 3 - Cre a t e a t a b le wit h 3 co lu m n s a n d 1 ro w. No w n e s t a 2 * 2 t a b le in ce n t e r o f t h e s cre e n u s in g p re vio u s t a b le s o t h a t firs t t a b le is in vis ib le b u t s e co n d o n e h a s a b o rd e r s ize o f 3 .

============================================================ © 2 0 0 0 , 2 0 0 1 S ia m a k S a rm a d y a n d Le a rn e m Gro u p . All rig h t s re s e rve d . Th is t e xt is writ t e n t o b e u s e d a s t e xt m a t e ria l fo r "We b Pa g e d e s ig n Em a il Co u rs e ". An y kin d o f re p ro d u ct io n , re d is t rib u t io n in a n y fo rm wit h o u t writ t e n p e rm is s io n o f t h e writ e r is s t rict ly p ro h ib it e d . Th is s p e cia l ve rs io n is p re p a re d in PDF fo rm . Yo u ca n re d is t rib u t e t h is file wit h o u t a n y ch a n g e s e it h e r in co n t e n t s o r in file fo rm a t . It ca n n o t b e re d is t rib u t e d in p rin t e d fo rm o r a n y o t h e r m e d ia wit h o u t p e rm is s io n o f t h e writ e r.

Ba c k

Ne x t

Ba c k

Co v e r

Le a rn e m , Le a rn Ev e ry t h in g b y Ma il

Free and Fee Based Email Courses, Learning Resources, Tutorials, Ezines

Free Resources for Programmers, Source Code, Ezines, Tutorials, Job Links

============================================================ © 2 0 0 0 , 2 0 0 1 S ia m a k S a rm a d y a n d Le a rn e m Gro u p . All rig h t s re s e rve d . Th is t e xt is writ t e n t o b e u s e d a s t e xt m a t e ria l fo r "We b Pa g e d e s ig n Em a il Co u rs e ". An y kin d o f re p ro d u ct io n , re d is t rib u t io n in a n y fo rm wit h o u t writ t e n p e rm is s io n o f t h e writ e r is s t rict ly p ro h ib it e d . Th is s p e cia l ve rs io n is p re p a re d in PDF fo rm . Yo u ca n re d is t rib u t e t h is file wit h o u t a n y ch a n g e s e it h e r in co n t e n t s o r in file fo rm a t . It ca n n o t b e re d is t rib u t e d in p rin t e d fo rm o r a n y o t h e r m e d ia wit h o u t p e rm is s io n o f t h e writ e r.

Ba c k

Co v e r

A C

B D

A C

B D

A C

B D

A B ABC

A

B D

C E

1-

HTML

23-

C Prog. JScript

TOP LEFT

TOP RIGHT

BOTTOM LEFT

BOTTOM RIGHT

TOP LEFT

TOP RIGHT

BOTTOM LEFT

BOTTOM RIGHT

TOP LEFT BOTTOM RIGHT

Cell padding effect :

TOP LEFT

TOP RIGHT

BOTTOM LEFT

BOTTOM RIGHT

Cell spacing effect :

TOP LEFT

TOP RIGHT

BOTTOM LEFT BOTTOM RIGHT

Multi Link Image: An image linked to 4 different addresses. Click on each valley will bring user to another url.

Cell Row1 Col1 Cell Row2 Col1

Cell Row1 Col2 Cell Row2 Col2

TOP LEFT

BOTTOM LEFT

TOP RIGHT

BOTTOM RIGHT

Click here to visit Yahoo

Click on below picture to visit my homepage.

Without link border :

Click on below link to send us your comments . Email Me

This is a list of subjects covered in this lesson : ● Text Links ● Image Links ● Email Links ● List of Items

You can align text in left. You can align text in center. You can align text in right.

We see blockquotes here: In cases that you want to emphasis on a paragraph in your text you can use this tag. It will indent your text from both sides.

This is an image:

This is an image:

This is an image:

This text is bold While this one is Italic and this text is underlined Look at this, this is both bold and italic

1This text is bold

2This text is bold

3This text is bold

4This text is bold

5This text is bold

6This text is bold

7This text is bold

This text is in ARIAL font Thi s text i s i n IMPACT font

This text is in red color. This text is in green color. This text is in blue color.

Hello World!

Welcome to our homepage. More text here.

Page with Back Color

Page with background image.

Siamak's Home , Tutorials , Source code and Sample Programs

Sia m a k Sa rm a dy's H om e Pa ge . Home Links Unix, NT,2000, Novell Professional I am a programmer Projects , Codes and Resources Email Me I nfopa t h BBS H om e J Ghost a r Lt d N e w -OS w ork ing group offic ia l hom e Online Progra m m e r .org

Welcome to my page . I don't know why are you here , but accept my welcome . I will be very delighted if my homepage be useful for you . Please do not hesitate to write me if you have any comments or questions . Sample titles of my works and experiences will be here and will be updated every month from now . Papers :

*

Digital Circuits Simulation Techniques ( Farsi ) Shiraz University Electrical Engineering Student's Seminar and Amir Kabir Univ. Electrical Engineering Conference.

*

DSIM Digital Circuit Simulator ( Farsi )

*

Noro : Neural Network System

*

Implementing TCP/IP RFC Protocols in your software Shiraz university

*

Blocking and none blocking sockets in Windows and Unix Programming

http://www.angelfire.com/nt/sarmadys/ (1 of 2) [1/21/2002 9:11:25 PM]

Siamak's Home , Tutorials , Source code and Sample Programs

Projects : *

DSIM , Digital Circuit Simulator

*

Infopath BBS server ( Telnet , Modem , Web ) under Unix , Dos and Windows

*

Infopath web server

*

FarsiQ , ICQ like client , server chat and messaging server and clients with ASP web interface on server side.

*

1-2-3 Your Homepage is Ready ( R )

*

JGLink Yahoo like link database search with complete facilities ( ASP for NT , Cgi for Unix )

*

Netshut (R) UPS Network shutdown solution for Fratel Inc. ( Sco Unix , Linux , Novell NLM , Windows Client and Server )

And much more . I will have a project page soon .

You are visitor :

http://www.angelfire.com/nt/sarmadys/ (2 of 2) [1/21/2002 9:11:25 PM]

learnem.com :: Index

We a re s o rry t o in fo rm t h a t we h a ve b e e n fo rce d t o in s t a ll a n e w fo ru m s o ft wa re . Yo u will n e e d t o s ig n u p fo r a n e w a cco u n t . Click h e re t o s ig n u p fo r yo u r n e w fo ru m a cco u n t n o w.

FAQ

S e a rch

Pro file

Me m b e rlis t

Us e rg ro u p s

Lo g in t o ch e ck yo u r p riva t e m e s s a g e s

Re g is t e r Lo g in

Th e t im e n o w is Tu e Ja n 2 2 , 2 0 0 2 2 : 1 3 a m

le a rn e m . c o m Fo ru m I n d e x Fo ru m

Vie w u n a n s we re d p o s t s

To p ic s

Po s ts

La s t P o s t

Ge n e ra l Ge n e ra l Ge n e ra l p o s t s

1

1

We d Ja n 0 9 , 2 0 0 2 6 : 4 8 p m a d m in

1

1

S a t De c 2 9 , 2 0 0 1 2 : 4 3 p m a d m in

2

3

S u n Ja n 2 0 , 2 0 0 2 3 : 4 1 a m AS P Tu o r

1

1

S a t De c 2 9 , 2 0 0 1 2 : 4 8 p m a d m in

1

1

We d Ja n 0 9 , 2 0 0 2 7 : 2 0 p m a d m in

1

1

We d Ja n 0 9 , 2 0 0 2 7 : 0 7 p m a d m in

5

5

Mo n Ja n 0 7 , 2 0 0 2 4 : 4 0 a m b m e rkt

Co u rs e Fo ru m s C P ro g ra m m in g C p ro g ra m m in g Co u rs e , Ho m e wo rk, Dis cu s s io n s a n d Q&A

AS P W e b P ro g ra m m in g AS P we b p ro g ra m m in g Co u rs e , Ho m e wo rk, Dis cu s s io n s a n d Q&A

W e b D e s ig n WEb De s ig n Co u rs e , Ho m e wo rk, Dis cu s s io n s a n d Q&A

We b W e b s it e Cre a t io n a n d Ma in t e n a n c e A fo ru m fo r n e w we b m a s t e rs , Q&A a b o u t re la t e d s u b je ct s

W e b D e s ig n HTML, We b Art s , Ge n e ra l We b De s ig n a n d We b Gra p h ics De s ig n Is s u e s

W e b P ro g ra m m in g AS P, PHP, Pe rl, CGI, IS API, COM+ , Act ive - X, . . . Dis cu s s io n s Ma rk a ll fo ru m s re a d

http://www.learnem.com/forums/ (1 of 2) [1/21/2002 9:12:01 PM]

All t im e s a re GMT

learnem.com :: Index

W h o is On lin e Ou r u s e rs h a ve p o s t e d a t o t a l o f 1 3 a rt icle s We h a ve 1 8 re g is t e re d u s e rs Th e n e we s t re g is t e re d u s e r is b jo h n 5

In t o t a l t h e re is 1 u s e r o n lin e : : 0 Re g is t e re d , 0 Hid d e n a n d 1 Gu e s t Re g is t e re d Us e rs :

Lo g in Us e rn a m e :

Pa s s wo rd :

Lo g m e o n a u t o m a t ica lly e a ch vis it

Login

Ne w p o s t s

No n e w p o s t s

Fo ru m is lo cke d

Fo ru m s © 2 0 0 1 Le a rn e m . co m Po we re d b y p h p BB V2 . 0 © 2 0 0 1 p h p BB Gro u p

http://www.learnem.com/forums/ (2 of 2) [1/21/2002 9:12:01 PM]

Learnem Educational Group, Education Over Internet

Ed u c a t io n Ov e r I n t e rn e t ! - S ia m a k S a rm a d y Th is p a g e is u n d e r co n s t ru ct io n .

Ho m e | Em a il Co u rs e s | Fre e E- Bo o ks | Fo ru m s © 2 0 0 1 Le a rn e m Ed u ca t io n a l Gro u p , All Rig h t s Re s e rve d .

http://www.learnem.com/group/sarmadys/ [1/21/2002 9:19:33 PM]