mastering the internet, xhtml, and javascript chapter 9 xhtml essentials

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


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


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


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


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


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


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””


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


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


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


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


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>


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>


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


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


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


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


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


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>


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


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>


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


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


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


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


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


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


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


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


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


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


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


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

mastering the internet, xhtml, and javascript chapter 9 xhtml essentials

Documents