Week-11 E-Commerce Web Site

8/9/2019 Week-11 E-Commerce Web Site

1/33

ELECTRONICELECTRONICBUSINESSBUSINESS


2/33

Abdusalam 2

LectureLecture ## 31,32 & 3331,32 & 33

Introduction to HTMLIntroduction to HTML Markup Languages Editing HTML Common Tags

Headers Text Styling Linking Images Formatting Text With


3/33

Abdusalam 3

HeadersHeaders Headers e(g(


4/33

Abdusalam 4

HeadersHeaders 0arying header si$es

1

2

3

4

5

6

" #$ter$et a$d %%% H&' t& (r&gram - Headers

*

9

1+

11

12

13

14Le0el 1 Header

15Le0el 2 header

16Le0el 3 header

1"Le0el 4 header

1*Le0el 5 header

19Le0el 6 header

2+

21

22

23


5/33


6/33

Abdusalam 6

Te"t St#l$nTe"t St#l$n

'nderline style %U*%'U

6lign elements .ith (LI)Nattri1ute r$ht# le*tor center

Close nested tags in the re-erse order ,rom .hich they .ere opened Emphasis 7italics8 style

%I*%'I

Strong 71old8 style %ST%!9"*


7/33

Abdusalam 7

Te"t St#l$nTe"t St#l$n

EM# ST%!9# and ' tags1 2

3

4

5

6

" #$ter$et a$d %%% H&' t& (r&gram - %el8&me

*

91+

11%el8&me t& r %e= ite!

12

13%e ha0e desig$ed this site t& tea8h

14

15HTMLsi$8e0ersi&$2.+

16 a$d 'e e$?& the @eatres that ha0e =ee$ added re8e$tl. #t

1" seems &$l a sh&rt time ag& that 'e read &r @irstHTML

1*=&&A. &&$ & 'ill A$&' a=&t ma$ &@ the great $e' @eatres19 &@ HTML 4.+.

2+

21Ha0e F$ %ith the ite!

22

23

24


8/33

Abdusalam 8

St#l$+$n te"t on e- .aesSt#l$+$n te"t on e- .aes


9/33

Abdusalam 9

L$n/$nL$n/$n

6nchor tag is used to link di,,erent pages It is a pair tag %e:uires HRE0attri1ute

HRE0speci,ies the '%L or the path# you .ould like to link to %( HRE0 address*%'(

Can link to email addresses# using%( HRE0 4ath o* the .ae t$tle to d$s.la#%'(

e55

%( HRE0 6C78I9S5:.6 Un$;ers$t# o* 4esha


10/33

Abdusalam 10

L$n/$nL$n/$n

1

2

3

4

5

6

" #$ter$et a$d %%% H&' t& (r&gram - Li$As

*

9

1+

11

12

13Here are m @a0&rite #$ter$et ear8h E$gi$es

14/li8A &$ the ear8h E$gi$e address t& g& t& that

15Bage.

16

1"1*ah&&:


11/33

Abdusalam 11

L$n/$n to other e- .aesL$n/$n to other e- .aes


12/33

Abdusalam 12

L$n/$n to other e- .aesL$n/$n to other e- .aes

1

2

3

4

5

6

" #$ter$et a$d %%% H&' t& (r&gram - /&$ta8t (age

*

9

1+

11

12

13

14M email address is

15 deiteldeitel.8&m. /li8A &$ the address a$d &r =r&'ser

16'ill &Be$ a$ email message a$d address it t& me.

1"

1*

19

2+


13/33

Abdusalam 13

ImaesImaes

Image Tag 'sed to insert an image to page It is singular tag ims)(5pg .idth;?@ height;?@ 1order;A+"

&ackground color To set 1ackground color &9CL% tag is used


14/33

Abdusalam 14

ImaesImaes =Cont>d?=Cont>d?

Image 1ackground %BO@A B(C)ROUN@ -ac/round Image does not need to 1e large as 1ro.ser tilesimage across and do.n

the screen ixel

Stands ,or 3picture element4 Each pixel represents one addressa1le dot o, color on the screen

Insert image into page 'se %I9)tag

6ttri1utes= SRC; 3location4 HEI)HT7in pixels8

I@TH7in pixels8 BOR@ER71lack 1y de,ault8 (LT7text description ,or 1ro.sers that ha-e images turned o,, or cannot -ie.

images8


15/33

Abdusalam 15


1

2

3

4

5

6

" #$ter$et a$d %%% H&' t& (r&gram - %el8&me

*

9

1+

11

12

13

14

16

1"

1*

19


16/33


17/33

Abdusalam 17


31 ,E ;+;LT ;Header (age;>32

33

34

36

3"

3*

4+

41

42

43


18/33

Abdusalam 18

Us$n Imaes as L$n/ (nchorsUs$n Imaes as L$n/ (nchors


19/33

Abdusalam 19

0ormatt$n Te"t $th %0ONT0ormatt$n Te"t $th %0ONT

0ONTtag is used to change the style o, the text 6dd color and ,ormatting to text


20/33

Abdusalam 20

0ormatt$n Te"t $th %0ONT0ormatt$n Te"t $th %0ONT

1

2

3

4

5

6

"#$ter$et a$d %%% H&' t& (r&gram - %el8&me

*

9

1+

11

12%el8&me t& r %e= ite!

13

14

15%e ha0e

16desig$ed this site t& tea8h a=&t the '&$ders &@

1"HTML.

1*

19%e ha0e =ee$

2+si$gHTMLsi$8e0ersi&$2.+

21a$d 'e e$?& the @eatres that ha0e =ee$ added re8e$tl.

22

23#t

24seems &$l a sh&rt time ag& that 'e read &r @irstHTML

25=&&A.

26

2"&&$ & 'ill

2*A$&' a=&t ma$ &@ the great $e' @eatre &@ HTML 4.+.

29

3+Ha0e F$ %ith the ite!

31

32

33


21/33

Abdusalam 21

Us$n the 0ONT element to *ormat te"tUs$n the 0ONT element to *ormat te"t


22/33

Abdusalam 22

Unordered L$stsUnordered L$sts

Creates a list in .hich e-ery line 1egins .ith a 1ullet mark %UL*%'ULtags Each item in unordered list inserted .ith the %LI7list item8 tag

Closing %'LItag optional

e(g(


23/33

Abdusalam 23

Unordered L$stsUnordered L$sts

3

4

5

6

"#$ter$et a$d %%% H&' t& (r&gram - Li$As

*

9

1+11

12

13Here are m @a0&rite #$ter$et ear8h E$gi$es

14/li8A &$ the ear8h E$gi$e address t& g& t& that

15Bage.

16

1"

1*

19

2+ah&&:

3+httB:))'''.'e=8ra'ler.8&m

31

32

33

34< HTML>


24/33

Abdusalam 24

Unordered L$sts


25/33

Abdusalam 25

Unordered l$sts

5

6

" #$ter$et a$d %%% H&' t& (r&gram - List

* 9

1+

11

12

13The ,est Featres &@ the #$ter$et

14

15

161"& 8a$ meet $e' Be&Ble @r&m 8&$tries ar&$d

1* the '&rld.

19& ha0e a88ess t& $e' media as it =e8&mes B=li8:

2+

21

22

23

24 e' games

25 e' aBBli8ati&$s

26

2"

2*

29 F&r =si$ess

3+ F&r Bleasre

31


26/33

Abdusalam 26

Ordered l$sts 32 r&$d the 8l&8A $e's

33 ear8h e$gi$es

34 h&BBi$g

35 (r&grammi$g

36

3" HTML

3* Da0a39 $ami8 HTML

4+ 8riBts

41 e' la$gages

42

43

44Li$As

45eeBi$g i$ t&8h 'ith &ld @rie$ds

46#t is the te8h$&l&g &@ the @tre!4"

4*

49M 3 Fa0&rite/Es

5+

51

52

53

54,ill ates55te0e D&=s

56Mi8hael ell

5"

5*

59

6+


27/33

Abdusalam 27

Nested Unordered L$sts $n HT9LNested Unordered L$sts $n HT9L


28/33

Abdusalam 28

Ordered L$stsOrdered L$sts

Creates a list in .hich e-ery line 1egins .ith a se:uence like )#G#A#(( %OL*%'OLtags Each item in ordered list inserted .ith the %LI7list item8 tag

Closing %'LItag optional

e(g(


29/33

Abdusalam 29

Nested Ordered L$stsNested Ordered L$sts

rdered list element %OL*%'OLtags &y de,ault# ordered lists use decimal se:uence num1ers

7)# G# A# *8 To change se:uence type# use TA4Eattri1ute in %OLopening tag

TA4E; 3)4 7de,ault8

Becimal se:uence 7)# G# A# *8 TA4E; 3I4

'ppercase %oman numerals 7I# II# III# *8 TA4E; 3i4

Lo.ercase %oman numerals 7i# ii# iii# *8 TA4E; 364

'ppercase alpha1etical 76# C# *8 TA4E; 3a4

Lo.ercase alpha1etical 7a# 1# c# *8

1

2


30/33

Abdusalam 30

Nested and Ordered L$stsNested and Ordered L$sts3

4

5

6

"#$ter$et a$d %%% H&' t& (r&gram - List

*

9

1+

11

12

13%e= ite tli$e

14

15

16

1"1*

19

2+

21H&me Bage

22Li$As Bage

23

24 Li$As t& sear8h e$gi$es

25 Li$As t& i$@&rmati&$ sites

26

2" e's sites

2*

29 TC =ased

3+


31/33

Abdusalam 31

Nested Ordered L$stsNested Ordered L$sts31 /

32 Headli$e e's

33

34 Te7t =ased

35

36 e' &rA Times

3" %ashi$gt&$ (&st

3*

39 4+ t&8A sites

41

42 Li$As t& ;@$; sites

43

44Feed=a8A Bage

45/&$ta8t Bage

46HTML E7amBle (ages

4"

4*

49

5+


32/33

Abdusalam 32

@$**erent t#.es o* ordered l$sts@$**erent t#.es o* ordered l$sts


33/33

Abdusalam 33

@e*$n$t$on L$st@e*$n$t$on L$st

Be,inition List appears .ith a tag

Week-11 E-Commerce Web Site

Documents

Transcript of Week-11 E-Commerce Web Site