Mastering the Internet, Mastering the Internet, XHTML, and JavaScriptXHTML, and JavaScript
Chapter 9Chapter 9
XHTML EssentialsXHTML Essentials
2Chapter 9 - XHTML Essentials
OutlineOutline Goals and ObjectivesGoals and Objectives Chapter HeadlinesChapter Headlines IntroductionIntroduction Web sites and pagesWeb sites and pages Content of web pagesContent of web pages Authoring of web pagesAuthoring of web pages XHTML SyntaxXHTML Syntax XHTML Document XHTML Document
StructureStructure
Authoring toolsAuthoring tools Text formattingText formatting Special charactersSpecial characters HyperlinksHyperlinks ListsLists Meta DataMeta Data ColorsColors Audio and VideoAudio and Video SummarySummary
3Chapter 9 - XHTML Essentials
Goals and ObjectivesGoals and Objectives GoalsGoals
Understand the difference between HTML and XHTML, master the Understand the difference between HTML and XHTML, master the authoring of Web pages with content as hyperlinks, and use text and authoring of Web pages with content as hyperlinks, and use text and HTML editors to generate XHTML codeHTML editors to generate XHTML code
ObjectivesObjectives Three views of Web pages: URL, Display, and DocumentThree views of Web pages: URL, Display, and Document Web sites and web pagesWeb sites and web pages Text formattingText formatting HTML and XHTMLHTML and XHTML Text and HTML EditorsText and HTML Editors XHTML document structureXHTML document structure Content of web pagesContent of web pages Special charactersSpecial characters
4Chapter 9 - XHTML Essentials
Chapter HeadlinesChapter Headlines 9.1 9.1 IntroductionIntroduction
Web surfers and developers view web pages differentlyWeb surfers and developers view web pages differently 9.2 9.2 Web sites and pagesWeb sites and pages
Web sites use structures like web pagesWeb sites use structures like web pages 9.3 9.3 Content of web pagesContent of web pages
Some web pages must change their content often to stay Some web pages must change their content often to stay currentcurrent
9.4 9.4 Authoring of web pagesAuthoring of web pages Use XHTML to write web page codeUse XHTML to write web page code
9.59.5 XHTML SyntaxXHTML Syntax Find out the difference between elements, tags, and much Find out the difference between elements, tags, and much
moremore
5Chapter 9 - XHTML Essentials
Chapter HeadlinesChapter Headlines 9.69.6 XHTML document structureXHTML document structure
Why should you learn the structure and rules of XHTML Why should you learn the structure and rules of XHTML documentsdocuments
9.79.7 Authoring toolsAuthoring tools Start with and XHTML editor and a web browser to develop Start with and XHTML editor and a web browser to develop
web pagesweb pages 9.89.8 Text formattingText formatting
Find out how easy it is to format text in XHTMLFind out how easy it is to format text in XHTML 9.99.9 Special charactersSpecial characters
Get your web pages to support more than just the English Get your web pages to support more than just the English alphabetalphabet
9.109.10 HyperlinksHyperlinks Connect a web site to other web pages on the internetConnect a web site to other web pages on the internet
6Chapter 9 - XHTML Essentials
Chapter HeadlinesChapter Headlines 9.11 9.11 ListsLists
Text can be organized in different ways than just paragraphsText can be organized in different ways than just paragraphs 9.12 9.12 Meta DataMeta Data
Optimize web page coding for search engines and highest hit Optimize web page coding for search engines and highest hit raterate
9.13 9.13 ColorsColors Jazz up web pages by adding foreground and background Jazz up web pages by adding foreground and background
colorscolors 9.14 9.14 Audio and VideoAudio and Video
Are you interested in adding MP3 music and movies to your Are you interested in adding MP3 music and movies to your web pagesweb pages
7Chapter 9 - XHTML Essentials
IntroductionIntroduction A web surfer views a web page as a A web surfer views a web page as a URL and a displayURL and a display in in
a browsera browser A web developer views a web page as a document that A web developer views a web page as a document that
must be created according to must be created according to authoring and development authoring and development guidelinesguidelines
Web developers use Web developers use HTMLHTML (HyperText Markup (HyperText Markup Language) or Language) or XHTMLXHTML (eXtensible HTML) to write web (eXtensible HTML) to write web page codepage code
Web browsers have a Web browsers have a built-in interpreter to renderbuilt-in interpreter to render the the results of a code in its windowresults of a code in its window
8Chapter 9 - XHTML Essentials
Web sites and pagesWeb sites and pages A web site is a A web site is a collection of web pagescollection of web pages A web author A web author begins with a home pagebegins with a home page which includes which includes
hyperlinks to other web pageshyperlinks to other web pages The The home page of a web site is the first web pagehome page of a web site is the first web page that is that is
loaded when a surfer visits the web siteloaded when a surfer visits the web site The file name of the home page is usually “The file name of the home page is usually “index.htmlindex.html””
9Chapter 9 - XHTML Essentials
Content of web pagesContent of web pages There is a There is a finite set of elementsfinite set of elements that make up the that make up the
content of a web pagecontent of a web page The content of a web page can be classified as:The content of a web page can be classified as:
StaticStatic Content Content DynamicDynamic content content CombinationCombination of static and dynamic of static and dynamic
Static content does not change regularlyStatic content does not change regularly Dynamic content changes oftenDynamic content changes often Content of a web page Content of a web page must be updatedmust be updated to stay current to stay current
10Chapter 9 - XHTML Essentials
Authoring of web pagesAuthoring of web pages After a web page is designed one needs to After a web page is designed one needs to use HTML or use HTML or
XHTML code to authorXHTML code to author a web page a web page HTML is HTML is platform independentplatform independent and easy to use and easy to use XHTML 1.0 is a XHTML 1.0 is a rewrite of HTML 4.01rewrite of HTML 4.01 in XML format in XML format XML enhances HTMLXML enhances HTML and does not replace it and does not replace it XHTML XHTML syntax is strictersyntax is stricter than HTML syntax than HTML syntax World Wide Consortium (W3C) organization is World Wide Consortium (W3C) organization is
responsible for developing responsible for developing web standardsweb standards
11Chapter 9 - XHTML Essentials
XHTML SyntaxXHTML Syntax XHTML uses tags that are enclosed in brackets (XHTML uses tags that are enclosed in brackets (<<, , >>)) The XHTML content is The XHTML content is enclosed between the tagsenclosed between the tags The tags and content form an XHTML elementThe tags and content form an XHTML element The generic form is: The generic form is: <<start-tagstart-tag>>contentcontent<<end-tagend-tag>> The detailed form is: The detailed form is: <<tag-name [att1=“val1” tag-name [att1=“val1” att2=“val2” …]att2=“val2” …]>>contentcontent</</tag-nametag-name>>
Start and end tags have Start and end tags have same namesame name with a forward slash ‘/’ with a forward slash ‘/’ before the end tag;before the end tag;
<<bb>>This is BOLDThis is BOLD</</bb>>
The tag attributes enclosed in ‘[’ and ‘]’ are The tag attributes enclosed in ‘[’ and ‘]’ are optionaloptional and and can be assigned values for can be assigned values for more control over formattingmore control over formatting
12Chapter 9 - XHTML Essentials
XHTML SyntaxXHTML Syntax XHTML XHTML tags can be nestedtags can be nested according to the “first open, according to the “first open,
last closed” rule; last closed” rule; <<bb><><ii>>Bold and ItalicBold and Italic</</ii></></bb>> XHTML rules:XHTML rules:
1.1. Tags must be closedTags must be closed2.2. Empty tags must be closedEmpty tags must be closed3.3. Use lower case tagsUse lower case tags4.4. Whitespace mattersWhitespace matters5.5. Attributes must be enclosed in quotesAttributes must be enclosed in quotes6.6. Tags must not overlap (be careful when nesting)Tags must not overlap (be careful when nesting)7.7. Comments can be usedComments can be used8.8. XHTML uses escaped charactersXHTML uses escaped characters
Do not use DeprecatedDo not use Deprecated or obsolete tags or obsolete tags Browsers ignore misspelled tags so Browsers ignore misspelled tags so author must be carefulauthor must be careful
13Chapter 9 - XHTML Essentials
XHTML Document StructureXHTML Document StructureHTMLHTML
<html><html>
<head><head>
<meta name=“author” content=“Zeid”><meta name=“author” content=“Zeid”>
<title>HTML document structure</title><title>HTML document structure</title>
</head></head>
<body><body>
Web page content goes hereWeb page content goes here
</body></body>
</html></html>
14Chapter 9 - XHTML Essentials
XHTML Document StructureXHTML Document StructureXHTMLXHTML
<?xml version=“1.0” encoding=“iso-8859-1”?><?xml version=“1.0” encoding=“iso-8859-1”?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”1.1//EN”““http://www.w3.org/TR/xhtml11/DTD/xhtml.dtd”>http://www.w3.org/TR/xhtml11/DTD/xhtml.dtd”><html xmlns=“http://www.w3.org/1999/xhtml”><html xmlns=“http://www.w3.org/1999/xhtml”><head><head><meta name=“author” content=“Zeid” /><meta name=“author” content=“Zeid” /><title>HTML document structure</title><title>HTML document structure</title></head></head><body><body>Web page content goes hereWeb page content goes here</body></body></html></html>
15Chapter 9 - XHTML Essentials
Authoring ToolsAuthoring Tools To develop web sites To develop web sites one needs a set of toolsone needs a set of tools such as, such as,
editor, graphics program, digital cameras, scanners, audio editor, graphics program, digital cameras, scanners, audio and video softwareand video software
The two types of editors are:The two types of editors are: TextText – type in the code and view results later – type in the code and view results later HTML HTML – view results as you develop the web page– view results as you develop the web page
The two approaches of code development are:The two approaches of code development are: Bottom up Bottom up – HTML file is generated first and the web page is – HTML file is generated first and the web page is
viewed later (viewed later (text editortext editor)) Top down Top down – Web page is developed first and then the HTML – Web page is developed first and then the HTML
file is generated (file is generated (HTML editorHTML editor)) Web Author must be familiarWeb Author must be familiar with both the approaches with both the approaches
and must be able to use both types of editorsand must be able to use both types of editors
16Chapter 9 - XHTML Essentials
Text FormattingText Formatting Text is one of the Text is one of the main elementsmain elements of a web page of a web page Text is organized as Text is organized as headings and paragraphsheadings and paragraphs XHTML provides:XHTML provides:
Heading tagsHeading tags:: <h1><h1> to to <h6><h6> - - <h1> <h1> being the largest, being the largest, attributesattributes: align: align
Paragraphs tagsParagraphs tags:: <p> <p> - creates a line space ahead of text, - creates a line space ahead of text, attributesattributes: align: align
Word/Character tagsWord/Character tags:: <b><b> - bold - bold <i> <i> - italic- italic <br> <br> - line break- line break <div> <div> - acts like a line break- acts like a line break <hr> <hr> - line in a web page, - line in a web page, attributesattributes: align, color, noshade, size, width: align, color, noshade, size, width
17Chapter 9 - XHTML Essentials
Text FormattingText Formatting Example 9.7:Example 9.7: Use words and character tags Use words and character tags
We use the text formatting tags to see how a browser renders We use the text formatting tags to see how a browser renders formatted textformatted text
18Chapter 9 - XHTML Essentials
Special CharactersSpecial Characters These are required because some These are required because some characters are reserved characters are reserved
for XHTML usefor XHTML use, such as ‘, such as ‘<<’, ‘’, ‘>>’, etc.’, etc. Special characters are represented by a Special characters are represented by a character entity or character entity or
a numeric codea numeric code The character entity The character entity begins withbegins with && and and ends withends with ;;
©© © © The numeric code The numeric code begins withbegins with &#&# and and ends withends with ;;
©© © © Three distinct character sets areThree distinct character sets are
ISO 8859-1 (Latin – 1)ISO 8859-1 (Latin – 1) Symbols, mathematical symbols, and Greek lettersSymbols, mathematical symbols, and Greek letters Markup-significant and internationalization charactersMarkup-significant and internationalization characters
19Chapter 9 - XHTML Essentials
HyperlinksHyperlinks Hyperlink is an important concept behind XHTML that Hyperlink is an important concept behind XHTML that
links web pageslinks web pages to each other to each other Hyperlinks Hyperlinks create hypertextcreate hypertext and is the driving force of the and is the driving force of the
webweb Hyperlinks can be used as:Hyperlinks can be used as:
Links (Links (interdocumentinterdocument links) links) Anchors (Anchors (intradocumentintradocument links) links)
Links Links start at the sourcestart at the source/visible part and /visible part and point to point to destinationdestination/invisible part/invisible part
Link source may be text or an image, and the destination Link source may be text or an image, and the destination may be a file, a web page, program, image, video/audio may be a file, a web page, program, image, video/audio file, etc.file, etc.
It is created by using the It is created by using the <a><a> tag tag
20Chapter 9 - XHTML Essentials
HyperlinksHyperlinks The general structure of a link is:The general structure of a link is:
<a invisible part>visible part<a invisible part>visible part</</a>a>
The important The important attributesattributes of the of the <a><a> tag are; href, title, tag are; href, title, name, charset, type, rel, rev, accesskey, shape, coordsname, charset, type, rel, rev, accesskey, shape, coords
The visible part of the link may have 3 states:The visible part of the link may have 3 states: LinkLink Active linkActive link Visited linkVisited link
Example:Example:<a href=“http://www.neu.edu”>Northeastern <a href=“http://www.neu.edu”>Northeastern Unversity</a>Unversity</a>
21Chapter 9 - XHTML Essentials
HyperlinksHyperlinks Example 9.8Example 9.8: Using the Hyperlink tag: Using the Hyperlink tag
Create a web page with various links. The Create a web page with various links. The hrefhref attribute uses both files attribute uses both files and websites. Observe the link colors depending on state of the linkand websites. Observe the link colors depending on state of the link
22Chapter 9 - XHTML Essentials
HyperlinksHyperlinks Anchors use Anchors use <a><a> tag to link tag to link different sections of the same different sections of the same
web pageweb page Two uses of anchors are for Two uses of anchors are for table of contentstable of contents and and
eliminating scrollingeliminating scrolling The creation of anchor requires two The creation of anchor requires two <a><a> tags tags
<a name=“sale”><a name=“sale”> and and <a href=“#sale”><a href=“#sale”>
Note the “Note the “##” in the href attribute with the same value ” in the href attribute with the same value ““salesale””
ExampleExample <a href=“#section1”>Section 1</a><a href=“#section1”>Section 1</a>
……..
……..
<a name=“section1”>Content</a><a name=“section1”>Content</a>
23Chapter 9 - XHTML Essentials
HyperlinksHyperlinks Example 9.9Example 9.9: Using intradocument links: Using intradocument links
Create a table of contents and link the topics to their descriptions in Create a table of contents and link the topics to their descriptions in the same pagethe same page
24Chapter 9 - XHTML Essentials
ListsLists XHTML supports three types of listsXHTML supports three types of lists
Unordered - Unordered - <ul><ul> tagtag Ordered - Ordered - <ol><ol> tag tag Definition - Definition - <dl><dl> tag tag
Unordered listsUnordered lists:: Created using the Created using the <ul><ul> tag tag The items of the list are created using the The items of the list are created using the <li><li> tag tag
Ordered listsOrdered lists:: Created using the Created using the <ol><ol> tag and has a type attribute tag and has a type attribute The items of the list are created using the The items of the list are created using the <li><li> tag tag
Definition listsDefinition lists:: Created using the Created using the <dl><dl> tag tag It consists of term/definition pairs created using It consists of term/definition pairs created using <dt><dt>, , <dd><dd> tags tags
Lists Lists may be nestedmay be nested to obtain multiple hierarchy levels to obtain multiple hierarchy levels
25Chapter 9 - XHTML Essentials
ListsLists Example 9.10Example 9.10: Using unordered lists: Using unordered lists
Develop a web page that illustrates the use of unordered listsDevelop a web page that illustrates the use of unordered lists
26Chapter 9 - XHTML Essentials
ListsLists Example 9.11Example 9.11: Using ordered lists: Using ordered lists
Develop a web page that illustrates the use of ordered listsDevelop a web page that illustrates the use of ordered lists
27Chapter 9 - XHTML Essentials
ListsLists Example 9.12Example 9.12: Using definition lists: Using definition lists
Develop a web page that illustrates the use of definition listsDevelop a web page that illustrates the use of definition lists
28Chapter 9 - XHTML Essentials
ListsLists Example 9.13Example 9.13: Using Nested lists: Using Nested lists
Develop a web page that illustrates the nesting of listsDevelop a web page that illustrates the nesting of lists
29Chapter 9 - XHTML Essentials
Meta DataMeta Data Web pages are designed for Web pages are designed for surferssurfers and and search enginessearch engines The The <meta><meta> tag tag increases the chancesincreases the chances of page indexing of page indexing Meta Data refers to Meta Data refers to data about XHTML documentdata about XHTML document
rather than the document contentrather than the document content Browsers do not render meta dataBrowsers do not render meta data Search engines use it for indexing and ranking the page Search engines use it for indexing and ranking the page
hits in a given searchhits in a given search Some Some attributesattributes of this tag are name, content, http- of this tag are name, content, http-
equiv, schemeequiv, scheme
30Chapter 9 - XHTML Essentials
ColorsColors Color is an essential element and it greatly Color is an essential element and it greatly improves improves
visualizationvisualization A web author can set colors for A web author can set colors for background background and and texttext Tags have a Tags have a color attributecolor attribute that enables web authors to set that enables web authors to set
colors for different XHTML elementscolors for different XHTML elements Colors are specified using Colors are specified using namesnames or or hexadecimal codeshexadecimal codes
Black Black #000000 #000000 Red Red #FF0000 #FF0000 Blue Blue #0000FF #0000FF Silver Silver #C0C0C0 #C0C0C0
Colors can be set Colors can be set globally or locallyglobally or locally
31Chapter 9 - XHTML Essentials
ColorsColors Example 9.15Example 9.15: Using colors in web pages: Using colors in web pages
Use a gray background and yellow text and change the colors of linksUse a gray background and yellow text and change the colors of links
32Chapter 9 - XHTML Essentials
Audio and VideoAudio and Video XHTML allows an author to XHTML allows an author to incorporate digital audio incorporate digital audio
and video in a web pageand video in a web page Various Various audio formatsaudio formats include AU, WAV, MIDI, AIFF, include AU, WAV, MIDI, AIFF,
and MP3and MP3 Video formatsVideo formats include AVI, QuickTime, MPEG, and include AVI, QuickTime, MPEG, and
MJPEGMJPEG A surfer must have the right A surfer must have the right hardware and softwarehardware and software to be to be
able to play multimedia content of the web pageable to play multimedia content of the web page <embed><embed> tag is used to incorporate audio and video files tag is used to incorporate audio and video files
in a web pagein a web page AttributesAttributes used are src, width and height, volume, used are src, width and height, volume,
autostart, loop, and hiddenautostart, loop, and hidden
33Chapter 9 - XHTML Essentials
Audio and VideoAudio and Video Example 9.16 & 9.17Example 9.16 & 9.17: Listen to music and Watch movies in web : Listen to music and Watch movies in web
pagespages
34Chapter 9 - XHTML Essentials
SummarySummary• A web developer A web developer designs and createsdesigns and creates a web page for a web surfer a web page for a web surfer• A web site is a A web site is a collection of web pagescollection of web pages• Web page content can be Web page content can be static or dynamicstatic or dynamic• HTMLHTML, , XMLXML, and , and XHTMLXHTML are used to author web pages are used to author web pages• One must One must follow the rules of codingfollow the rules of coding to create HTML documents to create HTML documents• Various tools and approaches exist Various tools and approaches exist to author web pagesto author web pages• Text formattingText formatting is and important tool is and important tool• XHTML also offers XHTML also offers special charactersspecial characters• Hyperlinks connect web pagesHyperlinks connect web pages and its sections and its sections• Lists indent lines of textLists indent lines of text and provide symbols and provide symbols• Meta dataMeta data enables search engines to find pages and index them enables search engines to find pages and index them• Colors enhance web Colors enhance web page visualizationpage visualization• A web page can A web page can embed digital audio and videoembed digital audio and video