Ch02 x HTML Xhtml

8/8/2019 Ch02 x HTML Xhtml

1/72

1

CHAPTER 2

EXTENSIBLE HYPERTEXT MARKUP

LANGUAGE (XHTML)


2/72

2

What Is XHTML?XHTML stands for EXtensible HyperTextMarkup Language

XHTML is almostidentical to HTML 4.01

XHTML is a stricter andcleaner version ofHTML

XHTML is HTML defined as an XMLapplication

XHTML is a W3C Recommendation


3/72

3

The

Mo

st Impo

rtan

t Diffe

rence

s

XHTML elements must be properly nested

XHTML elements must always be closed

XHTML elements must be in lowercase

XHTML documents must have one rootelement


4/72

4

First XHTML Example

In XHTML, text is marked up with elements delimitedby tags that are names contained in pairs of anglebrackets

Every XHTML document contains a start tag and an end tag

Some elements may contain attributes thatprovide additional information about the element

Comments in XHTML always begin with . The browser ignores all text inside acomment


5/72

5

First XHTML Example (Cont.)

Every XHTML document contains a

head element which generallycontains: A title

A body element

head element generally is not rendered in the display

window


6/72

6

First XHTML Example (Cont.) The title element:

Names a web page

Usually appears in the colored bar (called thetitle bar) at the top of the browser window Is the text identifying a page when users add

your page to their list of Favorites orBookmarks

The body element: Contains the documents content, which

may include text and tags All text placed between the

and
tags
forms one paragraph


7/72

7

First XHTML Example (Cont.)

XHTML documents delimit an element with startand end tags

A start tag consists of the element name inangle brackets (e.g., )

An end tag consists of the element namepreceded by a forward slash (/) in angle

brackets (e.g., ) Many start tags have attributes that provide

additional information about an element

Each attribute has a name and a value

separated by an equals sign (=)


8/72

8

1

2

4

5

6

7

8

9 Welcome

10

11

12

13

Welcome to XHTML!

14

15

Creates a head element

Creates a title element, which contains the

text Welcome

Creates a p element within the body, which

displays welcome text

XHTML comments, not interpretedby the browser

First XHTML example.


9/72

9

Common Programming ErrorNot enclosing attribute values in either single ordouble quotes is a syntax error.

However, some web browsers may still renderthe element correctly.

Using uppercase letters in an XHTML element orattribute name is a syntax error. However, someweb browsers may still render the element

correctly.


10/72

10

Common Programming Error

XHTML does not permit tags to overlapa nestedelements end tag must appear in the document

before the enclosing elements end tag.For example, the nested XHTML tags

hello

cause a syntax error, because the enclosing head

elements ending tag appears before thenested title elements ending tag.


11/72

11

Good Programming Practice

Use a consistent title-naming convention for allpages on a site.

For example, if a site is named BaileysWebsite, then the title of the contact pagemight be Baileys Website - Contact.

This practice can help users better understandthe websites structure.

Indenting nested elements emphasizes adocuments structure and promotes readability.


12/72

12

W3C XHTML Validation Service

XHTML documents that are syntactically

correct are guaranteed to renderproperly

XHTML documents that contain syntax

errors may not display properly

Validation services (e.g., validator.w3.org)ensure that an XHTML document is

syntactically correct


13/72

13

Error-Prevention Tip

Most current browsers attempt to render

XHTML documents even if they are invalid.This often leads to unexpected and

possibly undesirable results.

Use a validation service, such as the W3CMark Up Validation Service, to confirm

that an XHTML document is syntacticallycorrect.


14/72

14

Headings

XHTML provides six headings (h1 through

h6) for specifying the relative

importance of information

Heading element h1 is considered the mostsignificant heading and is rendered in the

largest font Each successive heading element (i.e., h2,

h3, etc.) is rendered in a progressivelysmaller font


15/72

15

Look-and-Feel Observation

Placing a heading at the top of every

XHTML page helps viewers understandthe purpose of each page.

Use larger headings to emphasizemore important sections of a web

page.


16/72

16

Fig. 2. |Headingelements h1through h6.

1 2 4

5 6 7 8 9 Headings

10 11

12 13 Level 1 Heading14 Level 2 heading15 Level 3 heading16 Level 4 heading17 Level 5 heading

18 Level 6 heading19

20

Createssixheadings,eachwithdecreasingsignificance


17/72

17

Linking

A hyperlink references or links to other

resources, such as XHTML documents andimages

Web browsers typically underline texthyperlinks and color them blue by default

The strong element typically causes thebrowser to render text in a bold font


18/72

18

Linking (Cont.)

Users can insert links with the a (anchor) element.

The href attribute specifies the resource (e.g., page,file, e-mail address) being linked

Anchors can link to an e-mail address using amailto: URL

When a user clicks this type of anchored link,most browsers launch the default e-mail program(e.g., Outlook Express) to initiate an e-mailmessage addressed to the linked address


19/72

19

Fig 2. |Linking toother web pages.

1

4

5

7

Links

10

11

1

1 Here are my favorite sites

14

Click a name to go to that page.

15

1

17

Deitel

1

Prentice Hall

1

Yahoo!

20

USA Today

21

22

Createsanchorelementsthatlinktothe URLspecifiedinthehref

attribute


20/72

20

Fig. 4.4 | Linking to ane-mail address(Part 1 of 2).

1

4

5 6

7

8

9 Contact Page

10

11

1

13

14 My email address is15

16 [email protected]

18 . Click the address and your default email client19 will open an e-mail message and address it to me.20

21

22

Hyperlink thatcreates amessage [email protected] with thecomputers default e-mailprogram


21/72

21Fig. 4.4 | Linking to an e-mail address (Part 2 of 2).


22/72

22

Images The img elements src attribute specifies an images

location

Every img element must have an alt attribute, whichcontains text that is displayed if the client cannotrender the image

The alt attribute makes web pages more accessible

to users with disabilities, especially vision impairments

Width and height are optional attributes

If omitted, the browser uses the images actualwidth and height

Images are measured in pixels


23/72

23

Performance Tip

Including the width and height

attributes in an tag can result inthe browsers loading and renderingpages faster.


24/72

24


Entering new dimensions for an image that

change its inherent width-to-height ratiodistorts the appearance of the image.

For example, if your image is 200 pixels

wide and 100 pixels high, you shouldensure that any new dimensions have a 2:1width-to-height ratio.


25/72

25

Images (Cont.)

Some XHTML elements are empty

elements that contain only attributesand do not mark up text

Empty elements (e.g., img) must be

terminated, either by using the forward

slash character (/) inside the closing rightangle bracket or by explicitly writing an

end tag


26/72

26

Fig 2. |Images inXHTML files.

1

4

5

6

7

8

9 Images

10

11

1

13

14

16

18

19

0

Specifiestheimage fileslocation

Specifiestheimageswidth

Specifiestheimagesheight

Specifiestexttodisplay iftheimage isunavailable


27/72

27

Images

Create an image hyperlink by nesting

an img element in an anchor element


28/72

28

Fig. 4.6 |Images as linkanchors (Part 1 of 2).

1

2

4

5

6

7

8

9 Navigation Bar

10

11

12

13

14

15

17

18

19

20

22

23

24

25

27

28

Createsahyperlinkedimage


29/72

29

Fig. 2. Images as linkanchors (Part 1 of 2).

29

30

32

33

34

3

37

38

39

40


30/72

30

Special Characters and Horizontal Rules

XHTML provides special characters or entity references(in the form &code;) for representing characters thatcannot be rendered otherwise

The code can be:

Word abbreviations

Numbers

Decimal

Hexadecimal Example: & character represented by:

&amp

& (decimal)

& (hexadecimal)


31/72

31

Special Ch

aracters and Horizontal Rules (Cont.)

Most browsers render a horizontal rule,

indicated by the tag, as ahorizontal line

The hr element also inserts a line break

above and below the horizontal line


32/72

32

Fig. 2. Inserting specialcharacters (Part 1 of 2).

1

2

4

5

6

7

8

9 Contact Page

10

11

12

13

14 Click15 here

16 to open an email message addressed to17 [email protected]

19

20 21

22

23

24

All information on this site is25 Deitel & Associates, Inc. 2007.

26

Insertsahorizontal rule,

withalinebreakbeforeandafter

Inserts thespecial

characters

and&


33/72

33

Fig. 2. |Insertingspecial characters(Part 2 of 2).

27

28

29

30

31

You may download 3.14 x 102

32 characters worth of information from this site.

33Only one download per hour is permitted.

34

Note: < of the information

35 presented here is updated daily.

36

37

Makes the 2

superscript

Makes the 1

subscriptCreates a strikethrougheffect

Emphasizes text Inserts the specialsymbols < and


34/72

34

Lists

Unordered list element ul

creates a list in which each item in the listbegins with a bullet symbol (called a disc)

Each entry is an li (list item) element. Most

web browsers render these elements with

a line break and a bullet symbol at thebeginning of the line


35/72

35

Fig. 2.|Unordered listcontaining hyperlinks(Part 1 of 2).

1

2

4

5

6 7

8

9 Links

10

11

12

13 Here are my favorite sites

14

Click on a name to go to that page.

15

16

17

18

19 Deitel

20 W3C

21 Yahoo!

22 CNN

23

24

25

Createsanunordered list

Makeshyperlinkedelements intoindividual

list

items


36/72

36

Fig. 2. |Unordered list containing hyperlinks (Part 2 of 2).


37/72

37

Lists (Cont.)

The ordered list element ol creates a

list in which each item begins with anumber

Lists may be nested to represent

hierarchical data relationships


38/72

38

Fig. 2. Nested and orderedlists (Part 1 of 3).

1

2

4

5

6

7

8

9 Lists

10

11

12

13 The Best Features of the Internet

14

15

16

17 You can meet new people from countries around18 the world.

19

20 You have access to new media as it becomes public:21

22

23

24

25

26 New games

27 New applications28

A single listelement


39/72

39

Fig. 2. |Nested andordered lists (Part 2 of 3).

29

30

31 For business

32 For pleasure

33

34

35

36 Around the clock news

37 Search engines

38 Shopping

39 Programming

40

41

42

43 XML

44 Java

45 XHTML

46 Scripts

47 New languages

48

49

50

51

52

53 Links

54 Keeping in touch with old friends

55 It is the technology of the future!

56

57

58

Createsanordered listwithinalistelement

Anothersingleunorderedlistelement

Createsanordered listwithinthislistelement

EndsthelistelementEndsnestedlist


40/72

40

Fig. 2. |Nested and ordered lists (Part 3 of 3).


41/72

41

Tables

table element

defines an XHTML table

Attribute summary summarizes the tablescontents and is used by speech devices tomake the table more accessible to userswith visual impairments

Element caption describes the tables

content The text inside the tag is rendered

above the table in most browsers


42/72

42

Tables (Cont.)

A table can be split into three distinct sections:

Head (thead element)

Table titles

Column headers

Body (tbody element)

Primary table data

Foot (tfoot element)

Calculation results Footnotes

Above body section in the code, but displays atthe bottom in the page


43/72

43

Tables (Cont.)

Element tr

Defines individual table rows Element th

Defines a header cell

Element td

Contains table data elements

1


44/72

44

Fig 2. |Creating abasic table (Part 1of 3).

1

2

4

6

7

8

9 A simple XHTML table

10

11

12

13

14

15

18

19

20

21 Price of Fruit

22

23

24

2

26

27 Fruit

28 Price

29

30

31

BeginsanewXHTMLtable

Setsthetablesbordertobeonepixelwide

Setsthetableswidthto40% ofthescreen

Describesthetables

contentsinthesummary attribute

Setsthetextabovethetable

Createsaheadelement

Createsatableheadingcellinthenewtablerow

Makesanewtablerow Createsthenextcellintherow

32


45/72

45

Fig 2. |Creating abasic table (Part 2of 3).

32

33

34

35

36 Total

37 $3.75

38

39

40

41

42

43

44

45 Apple

46 $0.25

47 48

49 Orange

50 $0.50

51

52

53 Banana

54 $1.00

55

56

57 Pineapple

58 $2.00

59

60

61

62

63

64

CreatesafootsectionCreatestableheadercellsatthebottomofthetable

CreatesabodysectionInsertsacell inthebodyofthetable

Endsthetable


46/72

46

Fig 2. |Creating a basic table (Part 3 of 3).


47/72

47

Tables (Cont.)

You can merge data cells with the

rowspan and colspan attributes

The values of these attributes specify thenumber of rows or columns occupied by thecell

Can be placed inside any data cell or tableheader cell

1


48/72

48

Fig 2. | Complex XHTMLtable (Part 1 of 3).

1

2

4

5

6

7

8

9 Tables

10

11

12

13 Table Example Page

14

15

16 Here is a more complex sample table.

17

18

19

20

21

22

23

24

26

27

Makestheheadercellspan 2 rows

28


49/72

49

Fig 2. | Complex XHTMLtable (Part 2 of 3).

e ge ou co u s

29

30 Camelid comparison

31

Approximate as of 6/2007

32

33

34

35 # of Humps

36 Indigenous region

37 Spits?

38 Produces Wool?

39

40

41

42

43 Camels (bactrian)

44 2

45 Africa/Asia

46 Yes

47 Yes

48

49

50 Llamas

51 1

52 Andes Mountains

53 Yes

54 Yes

55

56

57

58

59

Makes the header cellspan 4 columns


50/72

50

Fig 2. | Complex XHTML table (Part 3 of 3).


51/72

51

Forms XHTML provides forms for collecting information from users

Forms contain visual components,such as buttons,thatusersinteract with

Forms may also contain non-visual components, calledhidden inputs, which are used to store any data that needsto be sentto the server, butis not entered by the user

A form begins withthe form element

Attribute method specifieshow the forms data issenttothe web server

The action attribute of the form elementspecifiesthescriptto whichthe form data will be sent


52/72

52

Forms (Cont.) The input element provides data to the scriptthat processes

the form The textinputinserts a text box into the form, which

allowsthe userto input data The label element provides users withinformation about

the input elements purpose The size attribute specifiesthe number of characters

visible in the input element Optional attribute maxlength limitsthe number of

ch

aractersinputinto a text box The submitinputsubmitsthe data entered in the form to

the web server for processing

Most web browsers create a button thatsubmitstheform data when clicked

The resetinput allows a userto reset all form elementsto

their defaultvalues

1


53/72

53

Fig. 2. | Form withhidden fields and atext box (Part 1 of2).

2

4

5

6

7

8

9 Forms

10

11

12

13 Feedback Form

14

15

Please fill out this form to help 16 us improve our sit e.

17

18

19

20

21

22

23 24

25

27

29

31

Appendsformdatatothebrowserrequest

NoURLisusedtoprocessthisformsdata

Createshiddeninputsnotvisibletotheuser

32

Creates a label for the


54/72

54

Fig. 4.12 | Formwith hiddenfields and a textbox (Part 2 of 2).

33

34

Name:

35

37

38

39

40

41

42

43

44

45

46

47

48

Creates a label for thetext field

Inserts a text box called name

with 25 characters visible and a

30 character limit

Inserts a submit button

with Submit writtenon it

Inserts a reset button with

Clear written on itEnds the XHTML form


55/72

55

Form

s(Con

t.)

The textarea element inserts a multiline text box, calleda text area, into a form

The number of rows in the text area is specified with

the rows attribute The number of columns (i.e., characters per line) is

specified with the cols attribute

The password input inserts a password box into a form

Allows users to enter sensitive information, such ascredit card numbers and passwords, by maskingthe information input with another character,usually asterisks

The actual value input is sent to the web server, notthe asterisks that mask the input


56/72

56

Forms (Cont.) The checkbox input allows the user to make a

selection When the checkbox is selected, a check mark

appears in the checkbox. Otherwise, thecheckbox is empty

Checkboxes can be used individually and ingroups. Checkboxes that are part of the samegroup have the same name

A radio button is similar in function and use to acheckbox, except that only one radio button in agroup can be selected at any time

All radio buttons in a group have the same

name attribute but different value attributes.


57/72

57

Forms (Cont.) The select input provides a drop-down list of items

The name attribute identifies the drop-down list

The option element adds items to the drop-down list

The br element causes most browsers to rendera line break

Any markup or text following a br element is

rendered on the next line

1


58/72

58

Fig. 2. |Formusing a variety ofcomponents(Part 1 of 5).

2

4

5

6

7

8

9 More Forms

10

11

12

13 Feedback Form

14

Please fill out this form to help

15 us improve our site.

16

17

18

19

21

23

25

26

27

Name:

28

29

30

Fi 2 | F31


59/72

59


32

Comments:

33 Enter comments here.

35

36

37

38

39

40

E-mail Address:

41

42

43

44

45 Things you liked:

46

47 Site design

48

50 Links

51

53 Ease of use

54

56 Images

57

59 Source code

60

62

Insertsatextareawith4rowsand

36columns,whoseinitial textisEntercommentshere.

Insertsaninputfieldthat

displaysentered textasasterisks (oranothercharacter)

Insertsseveralcheckboxeswithdifferentlabels

Fi 2 | F63


60/72

60


64

65

66

67

68

69 How did you get toour site?:

70

71 Search engine

72

74 Links from another site

75

77 Deitel.com Website

78

80 Reference in a book

81

83 Other84

86

87

88

89 Rate our site:

90

Insertsagroupofradiobuttons,onlyoneofwhichcanbeselected

Initiallysetsthisradiobuttonasselected

Fig 2 | Form91


61/72

61


92

93

94

95 Amazing

96 10

97 9

98 8

99 7

100 6

101 5

102 4

103 3

104 2

105 1

106 Awful

107

108

109

110

111

112

113

114

115

116

117

Createadrop-downlistnamedrating

SetsAmazingastheinitiallyselectedoption


62/72

62

Fig. 2. |Form using a variety of components (Part 5 of 5).


63/72

63


When yourform has several checkboxes with thesame name, you must make sure that they have

different values, or the scripts running on the webserver will not be able to distinguish them.

Not setting the name attributes of the radio buttons in

a form to the same name is a logic error because itlets the user select all of them at the same time.


64/72

64

Internal LinkingThe a tag can be used to link to

another section of the same documentby specifying the elements id as thelinks href.

To link internally to an element with its id

attribute set, use the syntax #id.

Fig 2 | Internal1

2


65/72

65

Fig. 2. | Internalhyperlinks to makepages more navigable(Part 1 of 3).

2

4

5

6

7

8

9 Internal Links

10

11

12

13

14 The Best Features of the Internet

15

16

17

Go to Favorite Bugs

18

19

20 You can meet people from countries

21 around the world.

22 You have access to new media as it becomes public:23

24 New games

25 New applications26

27 For Business

28 For Pleasure

29

30

31

Setstheid attributefor

theh1 element

Createsalinktotheelementinthisdocumentwithid =

bugs

Fig 2 | Internal32 Around the clock news

33 Search Engines


66/72

66

Fig. 2. | Internalhyperlinks to makepages more navigable(Part 2 of 3).

33 Search Engines

34 Shopping

35 Programming36

37 XHTML

38 Java

39 Dynamic HTML40 Scripts

41 New languages

42

43

44

45

46

47 Links

48 Keeping in touch with old friends

49 It is the technology of the future!

50

51

52

53 My 3 Favorite Bugs

54

55

56 Go to Favorite Features

57

58

59 Fire Fly

60 Gal Ant

61 Roman Tic

62

63

64

Creates a link to the element in thisdocument with id = features

Setstheid attribute forthis

h1 element


67/72

67

Fig. 2. | Internal hyperlinks to make pages more navigable (Part 3 of 3).


68/72

68

Look-and-Feel Observation

Internal hyperlinks are useful in XHTML

documents that contain large amounts ofinformation.

Internal links to different parts of the page

make it easier for users to navigate thepagethey do not have to scroll to find

the section they want.


69/72

Fig 2 | meta

1

2


70/72

70

Fig. 2. | metaelements providekeywords and adescription of apage (Part 1 of 2).

// // //

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4

5

6

7

8

9 Welcome

10

11

12

13

16

20

21

22 Welcome to Our Website!

23

24

We have designed this site to teach about the wonders

25 of XHTML. XHTML is

26 better equipped than HTML to represent complex

27 data on the Internet. XHTML takes advantage of

28 XMLs strict syntax to ensure well-formedness. Soon you29 will know about many of the great features of30 XHTML.

31

32

Have Fun With the Site!

33

34

Provideskeywords

describingthe page forasearchengine

Providesthesitesdescriptioninsentence form forasearchengine


71/72

71

Fig. 2. | meta elements provide keywords and a description of a page (Part 2 of 2).


72/72

Software Engineering Observation

meta elements are not visible to users

and must be placed inside the headsection of your XHTML document.

If meta elements are not placed in this

section, they will not be read by searchengines.

Documents

Ch02 x HTML Xhtml