5-html-2

5/28/2018 5-HTML-2

1/34

2001 Prentice Hall, Inc. All rights reserved.

1

Chapter 5 - Introduction to XHTML:

Part 2Outline5.1 Introduction

5.2 Basic XHTML Tables

5.3 Intermediate XHTML Tables and Formatting

5.4 Basic XHTML Forms

5.5 More Complex XHTML Forms

5.6 Internal Linking5.7 Creating and Using Image Maps

5.8 Tags

5.9 frameset Element

5.10 Nested framesets

5.11 Internet and World Wide Web Resources

5/28/2018 5-HTML-2

2/34

2001 Prentice Hall, Inc.

All rights reserved.

Outline2

Table1.html

1

2

4

5

6

7

8 9

10 A simple XHTML table

11

12

13

14

15

16

19

20

21

22 Price of Fruit

23

24

25 26

27

28

29 Fruit

30 Price

31

32

The borderattribute gives the sizein pixels of the tables border.

The widthattribute gives

the width of the table.

The summaryattribute

describes the tables contents.

Text placed in a table header is

rendered bold and centered in the cell.

5/28/2018 5-HTML-2

3/34



Outline3

Table1.html

33

34

35

36

37

38

39 Apple

40 $0.2541

42

43

44 Orange

45 $0.50

46

47

48

49 Banana

50 $1.00

51

52

53

54 Pineapple

55 $2.00

56

57 58

59

60

61 Total

62 $3.75

63

64

65

66

The body of the table is placed

between the tbodytags.

Table rows are created

using the trelement

Data placed between tdtags are

placed in an individual cell.

The table footer belongs at the

bottom of the table. It formats text in

a similar manner to a table header.

5/28/2018 5-HTML-2

4/34



Outline4

Table1.html

Program Output

67

68

69

Table footer

End of table body

Start of table body

Table header

Table Caption

5/28/2018 5-HTML-2

5/34



Outline5

Table2.html

1

2

4

5

6

7

8 9

10 Internet and WWW How to Program - Tables

11

12

13

14

15 Table Example Page

16

17

18 Here is a more complex sample table.

19

20

21

22

23

24

25 26

27

28

29 The alignattribute is used to

horizontally align data in a cell.

The spanattribute

indicates width of the data

cell in number of columns.

5/28/2018 5-HTML-2

6/34



Outline6

30

31

32

33

34

35

36 38

39

40

41

42 Camelid comparison

43

Approximate as of 8/99

44

45

46

47

48 # of Humps

49 Indigenous region

50 Spits?

51 Produces Wool?

52

53

54 55

56

57

58

59 Camels (bactrian)

60 2

61 Africa/Asia

62 Llama

63 Llama64

Table2.html

The vertical alignment of data in a cell can

be specified with the valignattribute.

The value of the colspanattribute gives the

amount of columns taken up by the cell.

The value of the rowspanattribute gives

the amount of rows taken up by the cell.

5/28/2018 5-HTML-2

7/34



Outline7

Table2.html

Program Output

65

66

67 Llamas

68 1

69 Andes Mountains

70

71

72 73

74

75

76

77

Cell spanning the

size of two rows.

Cell spanning the size

of four columns.

5/28/2018 5-HTML-2

8/34



Outline8

Form.html

1

2

4

5

6

7

8 9

10 Internet and WWW How to Program - Forms

11

12

13

14

15 Feedback Form

16

17

Please fill out this form to help

18 us improve our site.

19

20

21

22

23

24

2526

27

29

31

33

Each form must begin

and end with formtags.

The methodattribute specifies how

the forms data is sent to the Web

server. The post method appends

form data to the browser request.

The value of the action

attribute specifies the URL of

a script on the Web server.

Inputelements are used to send data to

the script that processes the form.

A hiddenvalue for the type attribute

sends data that is not entered by the user.

5/28/2018 5-HTML-2

9/34



Outline9

Form.html

34

35

36

Name:

37

39

40

41

42

43

44

45

47

49

50

51

52

53

54

The sizeattribute gives the number of

characters visible in the text box.

The maxlengthattribute gives the maximum

number of characters the user can input.

The labelelement describes the data

the user needs to enter in the text box.

The valueattribute displays a

name on the buttons created.

5/28/2018 5-HTML-2

10/34



Outline10

Program Output

Text box created using

inputelement.

Submitbutton created

using input element.Resetbutton created

using input element.

5/28/2018 5-HTML-2

11/34



Outline11

Form2.html

1

2

4

5

6

7

8 9


11

12

13

14

15 Feedback Form

16

17



19

20

21

22

23

25

27

29

30

31

Name:

32

33

34

5/28/2018 5-HTML-2

12/34



Outline12

Form2.html

35

36

Comments:

37

38 Enter your comments here.

39

40

41

42 43

44

45

E-mail Address:

46

48

49

50

51 Things you liked:

52

53 Site design

54

56

57 Links

58

60

61 Ease of use

62

64

65 Images

66

68

Setting aninputelements typeattribute

to checkboxwill create a checkbox.

Checkboxes that belong to the

same group must have same

value in the nameattribute.

The textareaelement renders a text

area when the page is displayed. Thesize of the text area can be specified

with the rowsand colsattribute.

5/28/2018 5-HTML-2

13/34



Outline13

Form2.html

Program Output

69 Source code

70

72

73

74

75

76 77

78

79

80

81

82

Checkbox options created

with inputelement.

Text area created

with inputelement.

5/28/2018 5-HTML-2

14/34



Outline14

Form3.html

1

2

4

5

6

7

8 9


11

12

13

14

15 Feedback Form

16

17



19

20

21

22

23

25

27

29

30

31

Name:

32

33

34

15

5/28/2018 5-HTML-2

15/34



Outline15

Form3.html

35

Comments:

36

38

39

40

E-mail Address:

41
43
44

45 Things you liked:

46

47 Site design

48

50

51 Links52

54

55 Ease of use

56

58

59 Images

60

62

63 Source code

64

66

67

16

5/28/2018 5-HTML-2

16/34



Outline16

Form3.html

68

69

70

71

72

73 How did you get to our site?:

74

75 Search engine76

78

79

80 Links from another site

81

83

84 Deitel.com Web site85

87

88 Reference in a book

89

91

92 Other

93

95

96

97

The checkedattribute

will mark this radio

option by default.

An inputelement with

typevalue equal to radio

creates radio buttons.

17

5/28/2018 5-HTML-2

17/34

2001 Prentice Hall, Inc.All rights reserved.

Outline17

Form3.html

98

99 Rate our site:

100

101

102

103

104

105 Amazing106 10

107 9

108 8

109 7

110 6

111 5

112 4

113 3

114 2115 1

116 Awful

117

118

119

120

121

122

123

125

126

127

128

129

130

131

The selectedattribute selects a

default value for the drop down list.

The selectelement

creates a drop down list.

The optiontag is used for each

option in the drop down list.

18

5/28/2018 5-HTML-2

18/34


Outline18

Program Output

Drop down box list created

with inputelement.The

Amazingoption is selected

as a default value.

Radio box list created

with inputelement.

19

5/28/2018 5-HTML-2

19/34


Outline19

Program Output

20

5/28/2018 5-HTML-2

20/34


Outline20

Links.html

1

2

4

5

6

7

8 9

10 Internet and WWW How to Program - List

11

12

13

14

15

16

17 The Best Features of the Internet18

19

20

Go toFavorite CEOs

21

22

23 You can meet people from countries

24 around the world.

25

26 You have access to new media as it becomes public:

27

28 New games

29 New applications

30

31 For Business

32 For Pleasure

33

34 35

To internally link, place a #sign

in front of the name of the desired

anchor element within the page.

21

5/28/2018 5-HTML-2

21/34


Outline21

Links.html

36 Around the clock news

37 Search Engines

38 Shopping

39 Programming

40

41 XHTML

42 Java

43 Dynamic HTML44 Scripts

45 New languages

46

47

48

49

50

51 Links

52 Keeping in touch with old friends53 It is the technology of the future!

54

55

56

57

58 My 3 FavoriteCEOs

59

60

61

62

63 Go toFavorite Features

64

65

An anchor named ceoswill be

created at this point on the page.

This anchor does not link and

will not be seen on the page.

However, other anchors can refer

to this anchor and link to it.

22

5/28/2018 5-HTML-2

22/34


Outline22

Links.html

Program Output

66

67 Bill Gates

68 Steve Jobs

69 Michael Dell

70

71

72

73

Clicking on this internal link

will bring the user to the

bottom of the page where My

3 Favorite CEOsis located.

23

5/28/2018 5-HTML-2

23/34


Outline23

Picture.html

1

2

4

5

6

7

8 9

10

11 Internet and WWW How to Program - Image Map

12

13

14

15

16

17

18

19

20

21

22

23

24

25

28

31

33

Theareaelement is

used to create hotspots.

The shapeattribute defines ashape for the hotspot.

The first two integers of the

coordinateattribute define the (x,y)

coordinate of the upper-left handcorner of the rectangle.

The last two integers define the

(x,y) coordinate of the lower-right

hand corner of the rectangle.

24

5/28/2018 5-HTML-2

24/34


Outline24

Picture.html

36

37

38

39

42

43 44

45

48

49

50

51

52

54

55

56

Assigning polyto the shape

attribute creates a polygon

with coordinates defined by

the coords attribute.

Assigning circleto the shape

attribute creates a circle, with

a center and radius specified

by the coordsattribute.

The image map assigned to the usemapattribute will be used with the image.

The #in front of the name of the image mapindicates that an internal image map is being used.

25

5/28/2018 5-HTML-2

25/34


Outline25

Program Output

Hotspots created using

the areaelement.

Selecting the

Feedbackhotspot

links to the page

below.

26

5/28/2018 5-HTML-2

26/34


Outline26

Main.html

1

2

4

5

6

7

8 9

10 Internet and WWW How to Program - Welcome

11

12

13

14

1718

22

23

24

25

26

27 Welcome to Our Web Site!

28

29

We have designed this site to teach about the wonders

30 ofXHTML.XHTMLis

31 better equipped thanHTMLto represent complex

32 data on the Internet.XHTMLtakes advantage of

33 XMLs strict syntax to ensure well-formedness. Soon you

34 will know about many of the great new features of35 XHTML.

The metaelement providesinformation to search

engines about the document.

The nameattribute describes

the type of metaelement.

The contentattributeprovides

the information search engines

use to catalog pages.

27

5/28/2018 5-HTML-2

27/34


Outline27

Main.html

36

37

Have Fun With the Site!

38

39

40

28

5/28/2018 5-HTML-2

28/34


Outline28

Index.html

1

2

4

5

6

7

8 9

10 Internet and WWW How to Program - Main

11

14

15

19

20

21

22

23

24

25

26

27

5/28/2018 5-HTML-2

29/34


Outline

Index.html

30

31

This page uses frames, but your browser does not

32 support them.

33

34

Please,follow this link to

35 browse our site without frames.

36

3738

39

The noframeselement provides an optionfor browsers that do not display frames.

Right frame

(main)

Left frame

(leftframe)

30

5/28/2018 5-HTML-2

30/34


Outline

Program Output

When Header Examples

is selected, the document

it links to is displayed in

the right frame.

31

5/28/2018 5-HTML-2

31/34


Outline

Nav.html

1

2

4

5

6

7

8 9

10

11 Internet and WWW How to Program - Navigation Bar

12

13

14

15

16

17

18

19

21

22

23

24

26

27

28

29

31

32

Thetarget attribute specifies

where the document linked by

the anchor should display.

The document will open in

the frame called main.

32

5/28/2018 5-HTML-2

32/34


Outline

Nav.html

33

34

36

37

38

39 41

42

43

44

46

47

48

49 50

Other values of target can be specified to load

documents onto a new browser window, into the

same frame that the anchor appears in and onto a

full browser window, removing all frames.

33

5/28/2018 5-HTML-2

33/34


Outline

Index2.html

1

2

4

5

6

7

8 9

10 Internet and WWW How to Program - Main

11

12

15

16

20

21

22

23

24

25

26

27

28

29

30

31

32

33

The vertical frame on the right is

divided into two horizontal frames.

The rowsattribute works in a similar manner

to the colsattribute, except the rows attribute

gives the height of each frame.

O li34

5/28/2018 5-HTML-2

34/34

2001 Prentice Hall Inc

Outline

Index2.html

Program Output

34

35

This page uses frames, but your browser does not

36 support them.

37

38

Please,follow this link to

39 browse our site without frames.

40

4142

43

The nested frame element splits

the right vertical frame into two

horizontal frames.

5-html-2

Documents