8/8/2019 Ch02 x HTML Xhtml
1/72
1
CHAPTER 2
EXTENSIBLE HYPERTEXT MARKUP
LANGUAGE (XHTML)
8/8/2019 Ch02 x HTML 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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
tagsforms one paragraph
8/8/2019 Ch02 x HTML Xhtml
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/8/2019 Ch02 x HTML Xhtml
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.
8/8/2019 Ch02 x HTML Xhtml
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.
8/8/2019 Ch02 x HTML Xhtml
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.
8/8/2019 Ch02 x HTML Xhtml
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.
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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.
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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.
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
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
8/8/2019 Ch02 x HTML Xhtml
21/72
21Fig. 4.4 | Linking to an e-mail address (Part 2 of 2).
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
23/72
23
Performance Tip
Including the width and height
attributes in an tag can result inthe browsers loading and renderingpages faster.
8/8/2019 Ch02 x HTML Xhtml
24/72
24
Common Programming Error
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.
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
27/72
27
Images
Create an image hyperlink by nesting
an img element in an anchor element
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
29/72
29
Fig. 2. Images as linkanchors (Part 1 of 2).
29
30
32
33
34
3
37
38
39
40
8/8/2019 Ch02 x HTML Xhtml
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:
&
& (decimal)
& (hexadecimal)
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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&
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
36/72
36
Fig. 2. |Unordered list containing hyperlinks (Part 2 of 2).
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
40/72
40
Fig. 2. |Nested and ordered lists (Part 3 of 3).
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
43/72
43
Tables (Cont.)
Element tr
Defines individual table rows Element th
Defines a header cell
Element td
Contains table data elements
1
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
46/72
46
Fig 2. |Creating a basic table (Part 3 of 3).
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
50/72
50
Fig 2. | Complex XHTML table (Part 3 of 3).
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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.
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
59/72
59
Fig. 2. |Formusing a variety ofcomponents(Part 2 of 5).
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
8/8/2019 Ch02 x HTML Xhtml
60/72
60
Fig. 2. |Formusing a variety ofcomponents(Part 3 of 5).
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
8/8/2019 Ch02 x HTML Xhtml
61/72
61
Fig. 2. |Formusing a variety ofcomponents(Part 4 of 5).
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
8/8/2019 Ch02 x HTML Xhtml
62/72
62
Fig. 2. |Form using a variety of components (Part 5 of 5).
8/8/2019 Ch02 x HTML Xhtml
63/72
63
Common Programming Error
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.
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
67/72
67
Fig. 2. | Internal hyperlinks to make pages more navigable (Part 3 of 3).
8/8/2019 Ch02 x HTML Xhtml
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.
8/8/2019 Ch02 x HTML Xhtml
69/72
Fig 2 | meta
1
2
8/8/2019 Ch02 x HTML Xhtml
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
8/8/2019 Ch02 x HTML Xhtml
71/72
71
Fig. 2. | meta elements provide keywords and a description of a page (Part 2 of 2).
8/8/2019 Ch02 x HTML Xhtml
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.
Top Related