web page design in 7 days 21

8/9/2019 Web Page Design in 7 Days 21

1/22

- 1 -

HTML NOTETML NOTEHyper Text Mark-up Languageyper Text Mark-up Language

1-1 Introduction

So you have decided to design your we pages yourse!"# $ood decision% So !et&s start 'uick!y%(e pages are ordinary "i!es with %ht) or %ht)! "i!e extensions% They contain a code na)ed*hyper Text )ark-up !anguage* or ht)! this codes when viewed in a rowser !ike InternetExp!orer or Netscape wi!! e seen as eauti"u! we pages however code under we page )ay eco)p!icated% To design an ht)! we page you have two options+a% ,ou can use a we page editor !ike Microso"t ront.age to create we pages% It works exact!yLike Microso"t word /a co)p!icated editor progra) used "or creating and editing ook0 !etter etc.ages you 2ust type text0 insert graphics and "ina!!y save your docu)ent as an ht)! we page%3y the way word 4555 itse!" can save your existing docu)ents as ht)! pages%So you see designing a we page can e very easy% 3ut soon you wi!! see that this is not a good

Option "or creating a pro"essiona! we page% Second option is to !earn ht)! codes and write ht)! pages in a si)p!e text editor% /Notepad 6swe said your codes wi!! e seen as (e.ages when viewed in a we rowser%

1-4 7easons "or choosing second option- I" you want to design pro"essiona! we pages using these too!s wi!! not e enough% ,ou )ust e"a)i!iar with ht)! codes%- 7esu!ts o" these editors are ig and so)eti)es chaotic code% Maintaining this code is verydi""icu!t%- I" you want to design dyna)ic we pages in "uture you wi!! need to know ht)! codes%- I" you wi!! need "or)s in your pages to send in"or)ation to server and return resu!t pages ack

to rowser you wi!! need to know ht)! codes%- There are other reasons that dictate us to !earn ht)! coding and not satis"y with these too!s%

1-8 Too!s you wi!! need,ou wi!! need a si)p!e text editor to write ht)! codes% or exa)p!e you can use notepad in(indows or any text editor in other operating syste)s you wi!! a!so need a rowser !ike Internetexp!orer or Netscape Navigator% In this course we wi!! assu)e that you are working in windows9:;NT;4555%1-4 Start HereNow open notepad and type the "o!!owing code%

Exa)p!e 1-1+


2/22

- 2 -1-? HTML code headersEvery ht)! page )ust have a header% Header contains i)portant in"or)ation aout the page%@i""erent tags are used "or di""erent sections o" a header% Header o" an ht)! page is speci"ied y


3/22

- 3 -This wi!! change your ackground co!or to green% or)at o" co!or nu)er is 77$$33% ,ouknow That each co!or is a co)ination o" three )ain co!ors+ 7ed0 $reen and 3!ue% In co!or"or)at 77 is va!ue o" red co)ponent o" the )ain co!or in hexadeci)a! "or)at% $$ is va!ue o"green Co)ponent and 33 is the va!ue o" !ue co)ponent%Two digit hexadeci)a! nu)er can e anything etween 55 to i%e% 5 to 4?? in deci)a! "or)at%So i" we write 5555 we )ean /red50 green4??0 !ue5 so the resu!t is a pure green co!or%,ou can produce 1A )i!!ion co!ors in this way ut pay attention that not a!! o" the rowsers wi!!

e capa!e to show a!! these co!ors% So test your we page in 4?A co!ors )ode%

1-15 3ackground I)age(e can use a ackground picture "or we page instead o" ackground co!or% ,ou )ust have aready i)age "i!e in %gi" or %2pg "or)ats% Now you )ust extend


4/22

- 4 -


5/22

- 5 -


6/22

- 6 -

4-15 changing de"au!t "ont co!ors in a we pageEach rowser has its own de"au!t settings "or text co!or0 !ink co!or0>isited !ink co!or and active !ink Co!or Text co!or de"au!t is !ack% Links are usua!!y !ue%To change de"au!t settings "or these va!ues you )ust use isited !ink6LING+ 6ctive !ink

4-11 EndsThis !esson inc!uded so)e o" the )ost i)portant techni'ues in ht)! writing%Now you )ust e a!e to use any kind o" text in your we pages 6s re)e)ering so )uch tagsand para)eters is di""icu!t0 you )ust use the) repeated!y so that ,ou can re)e)er the)% Ia!ways te!! this sentence in )y progra))ing c!asses+ *No one eco)es a progra))er

(ithout progra))ing*

Exercises+1- (rite a ht)! page that uses !ines with these sty!es in separate output !ines+Ita!ic and o!d Ita!ic and under!ined 3o!d and under!ined4- Make a we page with a anner text on it% Our anner is )ade o" charactersIn increasing siJes to anner&s )idd!e and then decreasing siJe to its end irst character startswith the siJe 10 Midd!e character siJe is B and !ast character siJe is 1 again%3anner text is *)y!ong!ongna)e*%8- (rite a ht)! page with 9 separate !ines in di""erent co!ors% State co!or o" each !ine in its text

Lesson 8

8-1 Line 3reaks0 .aragraphs6s we saw in previous !esson i" we reak !ines in ht)! code y si)p!y inserting enter keys /newLine characters0 !ines wi!! not reak in output resu!t in rowser% They wi!! e printed in a sing!e!ine in rowser we )ust use


7/22

- 7 -


8/22

- 8 -


9/22

- 9 -

8-B 6!ternative text "or i)agesSo)e we sur"ers )ay use rowsers that do not support graphics%6n exa)p!e is !ynx rowser that is used in NI: text environ)ents% I" you want to considerthese users0 you can enter a text as an a!ternative to each i)age in your we page% In this wayi)age wi!! e rep!aced y its a!ternative text%It is very easy% Qust add an 6LT para)eter to


10/22

- 10 -


11/22

- 11 -


12/22

- 12 -


13/22

- 13 -


14/22

- 14 -there are 4 co!u)ns then width o" each ce!! wi!! e ?5%Qust pay attention to this i)portant point that i" you put a !ot o" text in a ce!! o" a ta!e it wi!! eexpanded to "it the text in it%

?- Text a!ign)ent in ta!e ce!!s3y de"au!t text entered in a ce!! wi!! appear at the !e"t side o" the ce!!% ,ou can add either o" theseoptions to


15/22

- 15 -Now is a great ti)e to start% ,ou !earn and you use what you !earn i))ediate!y%This wi!! guarantee that you !earn everything you studied in this course% So start now##

Exercises+1- Create a 8R8 ta!e% Insert a o!d heading in top center ce!!% Then insert a tit!e in !e"t center andotto) ce!!s% Then insert s)a!! texts in two right side center and otto) ce!!s% (e are trying to

"or)at text in we pages using ta!es%4- Create a 4R4 ta!e% Insert an i)age "i!e /s)a!! siJed in each ce!! o" ta!e% 6d2ust ce!! a!ign)ento" each ce!! so that i)ages gather at the center o" the ta!e sticking to each other% 6d2ust ta!ewidth to ?5 o" we page width and 455 pixe!s "or its height%

Lesson A

A-1 Introduction

(e started our study on ta!es in previous !esson and (e wi!! continue our study in this !esson%6s I to!d you in previous !esson0 ta!es are very i)portant in pro"essiona! we design% ,ou wi!!need the) "or ho!ding pictures0 uttons0 text etc%In this !esson we wi!! cover )ore options aout ta!e ce!!s0 ce!! padding0 ce!! spacing and "ina!!ywe wi!! !earn how to !ink di""erent parts o" an i)age to di""erent !ocations on the we%A-4 Ce!! (idth /Co!u)n (idthIn previous !esson we !earned how we can deter)ine width and height o" a ta!e%


16/22

- 16 -


17/22

- 17 -


18/22

- 18 -


19/22

- 19 -


20/22

- 20 -


21/22

- 21 -


22/22

- 22 -Now you have !earned ta!e asics% ,ou see what you !earned aout ta!es was not tooCo)p!icated however writing a co)p!icated ta!es is not very easy% ,ou )ust work "or a !itt!e toe a!e to use the) e""ective!y% Ta!es are one o" the )ost power"u! "eatures o" ht)! design soyou )ust e a!e to use their power correct!y% In next !esson we wi!! start studying on ra)es%nti! then0 you can use your "ree ti)e to work on ta!es%

Exercises+

1- Create a 8R4 ta!e /4 rows% Qoin its "irst row ce!!s into one ce!! /8 ce!!s% Second row has 8 ce!!syet% Enter a heading in upper ce!! /irst row and enter three words in three ce!!s in second row%4- 7ewrite aove exa)p!e so that "irst row ce!!s have a speci"ic co!or and each ce!! in second rowhas a separate co!or%8- Create a ta!e with 8 co!u)ns and 1 row% Now nest a 4R4 ta!e in center o" the screen usingprevious ta!e so that "irst ta!e is invisi!e ut second one has a order siJe o" 8%

The EndThe End

Dont forget to visit fromDont forget to visit fromwww.mehdisoft.do.amwww.mehdisoft.do.am

By Mehdi

web page design in 7 days 21

Documents