XHTML Case Study 1

5/12/2018 XHTML Case Study 1 - slidepdf.com

http://slidepdf.com/reader/full/xhtml-case-study-1 1/38

XHTML - Case Study I

You are hired as a Teaching Assistant in a University. Your firstassignment is to create a web page using XHTML that includes yourname, department, and the name of your University. This page also

has the course information in which you are assisting.

Your instructor expects you to adhere to the standards of XHTML. Toinform your web page readers that you conform to the XHTMLstandards, he wants you to include a validation icon on your Web page.

1



Objectives

After successfully completing this case study, you should be able to:

• Create basic XHTML document using Notepad.

•

Define the basic rules of XHTML.

• Understand DocTypes.

• Create header section containing meta and title tags.

• Create body elements.

• Add background color in a Web page.

• Add horizontal line in the Web page.

• Create paragraphs and line break.

• Present emphasized and strong text.

• Create nested tags.

• Create ordered, unordered and definition lists.

• Create headers in a Web page.

• View web pages in a browser.

• Validate Web pages using a Validator tool.

2



What is XHTML?XHTML stands for EXtensible Hypertext Markup Language. It is acleaner but a stricter standard for making web pages. It is similar toHTML (Hypertext Markup Language) but is based on XML. The goal of

XHTML authoring is to make web pages accessible on alternativedevices such as Personal Digital Assistants (PDAs), cellular phones,televisions, and aural browsers for visually impaired and blindcomputer users.

XHTML document or a Web page is a special text file saved with .htmor .html extension. To open a web page, a user enters a UniformResource Locator (URL) in a browser. The browser locates the file,interprets the markups contained in the file, and displays the file in thebrowser window.

There are several XHTML editors available in the market such as MSExpression, Adobe GoLive, and Macromedia DreamWeaver. These toolscan quickly generate Web pages. The purpose of this book is not toteach you those tools but to explain the code involved in XHTML.

Creating a Web Page using Notepad You will create your first web page using Notepad. To open Notepad,click on the Start button on the Windows toolbar, by pointing to AllPrograms (if running Windows XP or Vista) or to Programs (if you arerunning Windows 2000), by selecting Accessories option on the AllPrograms or Programs menu, and by selecting the Notepad option on

the subsequent submenu.

ObjectiveIn this exercise, you will start Notepad and create a basic XHTMLdocument template.

• Click on the Start button on the Windows taskbar.

• Point to All Programs (if you are running Windows XP or VIsta) orto Programs (if you are running Windows 2000).

• Point to Accessories on the menu.

• Click on the Notepad on the submenu.

Note: If the Start menu includes a Notepad shortcut icon, you can startthe Notepad by simply clicking on the icon. If the Windows desktopincludes a Notepad shortcut icon, you can start the Notepad by double-clicking on the icon.

3



4



• If the Notepad Application window is not maximized, click on theMaximize button on the Title bar of the window.

• Choose the Format, Word Wrap command. If the Word Wrap

command is already selected (check marked), ignore this step andgo to the next one.

• Type the following XHTML document (without typing line numbers –

they are only for your reference):

Lines 1 and 2 are required lines in XHTML document. Line 1 is an xmldeclaration statement and specifies the xml version. Line 2 has aDOCTYPE declaration and specifies XHTML version and format used inthe document. There are three types of DocTypes available: Strict,

5



Transitional, and Frameset. We will follow Transitional Doctype in thistext book.

Transitional DocType allows you to use the presentational anddeprecated elements such as <font>, <u>, etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Strict DocType does not allow presentation or deprecated elements. The XHTML presentation elements are included in Cascading StyleSheets (CSS).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Frameset DocType is identical to Transitional DocType but allows youto include frames on your pages.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

DocType statements are used by the validator to ensure that yourdocument is conforming to the specified version and format.

Lines 4 - 7 contain tags. Browsers interpret XHTML tags in order toformat and present text on Web pages. Almost all XHTML tags have anopening tag and a closing tag. The opening tag usually has three mainparts - a less than sign (<), name of the tag (e.g. head), and a greaterthan sign (>). The closing tag has four parts – a less than sign (<), aforward slash (/), name of the tag, and a greater than sign (>). XHTMLrequires you to write all tags in the lower case letters. A textembedded between tags is called the content of the tag.

An element includes tags and content.

6



XHTML allows empty elements. We will discuss empty elements later inthe case study.

HEADER SECTION

The header section of an XHTML document includes the head elementwith the title and meta sub-elements. The head element containsinformation about the document. Both title and meta elements areparts of head element section.

The title element contents appear on the browser’s title bar. It is arequired element in all XHTML documents. You must include a brief description of your document in the title element as it defines the webpage in user’s bookmarks or favorites.

The meta element contains the information about your document andis mainly used by the search engines. The contents of meta tag do notappear on the web page. You can include more than one metaelement in your document. However, each meta element must specifya property-value pair. The name attribute identifies the property andthe content attribute specifies the property’s value. We will discussattributes later in the case study.

ObjectiveIn this exercise, you will add meta and title elements in the head

section.• Edit your current notepad document by entering the following

highlighted code in the head section:

7



Note: The meta elements include the name of the author and a brief description of the current document. The content of title element (MyHome Page) will appear on the title bar of the browser window.

SAVING A DOCUMENT AND VIEWING IN A BROWSER

To avoid losing what appears on the screen due to an unexpectedoccurrence, such as a power failure, it is important that you frequentlysave your document as you work on them.

ObjectiveIn this exercise, you will save your new document.

• Choose the File, Save As command.

• Create a new folder and name it XHTML on your USB drive or onyour desktop. Save the document as index.html. In Save As dialog

box, type index.html for “File Name”. Select All Files for “Save astype”. Click Save.Note: Remember the location of this file. We will be viewing this file ina browser in the next step.

8



View your document in an Internet Explorer browser.

• Open Internet Explorer.

• Choose File, Open command.

• Click on Browse button and navigate to appropriate drive whereyou stored the index.html file.

• Choose the file index.html, which you saved earlier.

• Choose the OK button.

9



• A blank document is displayed on the browser window because thebody element in your code does not contain any information. The“My Home Page” in the title bar window is the effect of the titleelement in the head section.

• Minimize the browser window by clicking on the minimize button.

BODY SECTION The body section contains the body element and several presentationand formatting elements.

The content of the body element appears in the browser window. Youcan use the body element attributes to change the appearance of the

document. Their possible values, syntax, and usage are listed in thefollowing table:

Attributes of body element Attribute Value Syntax Usagebackground “URL”, e.g. mypic.jpg <body

background =“URL”> …</body>

URL imagetiled in thebackgroundof the page

10



bgcolor “ColorName” or“HexadecimalValue”e.g. yellow, #EAE4EF

<body bgcolor =“ColorName”> …</body>

Sets thebackgroundcolor of thepage

link “ColorName” or

“HexadecimalValue”e.g. yellow, #EAE4EF

<body link =

“ColorName”> …</body>

Sets the color

of hyperlinksin thedocument

alink “ColorName” or“HexadecimalValue”e.g. yellow, #EAE4EF

<body alink =“ColorName”> …</body>

Sets the colorof activehyperlinks

vlink “ColorName” or“HexadecimalValue”e.g. yellow, #EAE4EF

<body vlink =“ColorName”> …</body>

Sets the colorof visitedhyperlinks

An attribute adds information in an opening tag that describes the

element. XHTML requires that all attributes be written in lower caseand they must have values within the double quotation marks. Thename of the attribute is on the left, followed by the equal to sign, andthen the value.

Multiple attributes can be added with a space between them.

The above example demonstrates a link to Google, a search engine.We will discuss a tag and its attributes in the next case study.

XHTML requires the following rules for attributes:o Must be typed in lower case

o Must have value(s)

o Values must be within double quotation marks

o Multiple attributes must be added with a space between them

o One attribute can occur only once in a tag

11



There are several websites available that describe the hexadecimalcodes for colors. You can search for such websites and use those codeschemes in your web pages. Objective

In this exercise, you will set the background color and the text color of the document. You will also enter your name for the body of your Webdocument.

Edit your index.html file in notepad as given below and enteryour name in place of the author’s name, Bill Davis:

You have assigned the hexadecimal value (#EAE4EF) of light navycolor to the document background. The content of the body will bedisplayed in a navy color.

NOTE: You must be careful in choosing colors for a web page. Youshould always use a high contrast such as black background with whitetext or red background with white text. Black background and blue text(or similar contrasts) makes it difficult to read the text.

Choose File, Save or press Ctrl+S together to save your file.

Switch to the browser window.

Refresh the browser by pressing F5 function key on yourkeyboard or by clicking Refresh icon.

12



The document has a very light navy background and a dark navy text. These colors can be different on your screen.

DOCUMENT FORMATTING TAGSXHTML transitional DocType allows the use of document formattingtags. In the strict DocType, these tags must be included in thecascading style sheet (CSS). CSS is not covered in this text book. CSSis usually taught in advanced web development classes.

Line Break The br element forces a line break. The syntax on br element is asfollows:<br />

It is an empty element i.e. line break self closes. The ending tag isforbidden in empty elements.

The figure below shows an example of the line break element

13



Headers

Headings distinguish text in the document so that information can beeasily located. XHTML provides six levels of headings, from <h1> to<h6>. The syntax of these predefined headings is as follows:<h1> … </h1><h2> … </h2>…

<h6> … </h6>

You must separate document sections using heading tags. The figurebelow shows an example of the heading elements.

14



Each of these tags has an align attribute with left (default), right, andcenter values. The syntax of the heading tag with the align attribute is:<h1 align = “value”> … </h1>

<h2 align = “value”> … </h2>…<h6 align = “value”> … </h6>

The figure below shows an example of an align attribute with left,center, and right values.

15



ObjectiveIn this exercise, you will enter your information in the document usingboth heading tags and line break tags.

Edit your index.html file in notepad as given below and enter yourname, department, and school in place of author’s information:

16





Refresh the browser by pressing F5 function key on yourkeyboard or by clicking Refresh icon. Your Web page should look

similar to the page illustrated below:

Horizontal Rule Tags The <hr /> is an empty element and is used to define a horizontalrule. It has align, no shade, size, and width attributes. The possiblevalues, syntax, and usage of these attributes are listed in the followingtable:

Horizontal Rule <hr />Attribute Value Syntax Usagesize Pixels <hr size =

“value” />Height of theline. By default,the width of the

line is 100%. Itruns through theentire browserwindows. Thealign attribute isuseful andvisible only whenthe width is

17



reduced.noshade noshade <hr noshade

=“noshade” />

Solid bar. Noshading.

width Pixels or percent <hr width =

“value” />

Width in pixels

or percentages.align right

leftcenter

<hr align =“value” />

Aligns the linebased on thevalue.

The figure below shows an example of the horizontal rule element withits different attributes:

ObjectiveIn this exercise, you will add a horizontal line in the document.

Add the <hr /> element in your index.html file as highlightedbelow:

18





Refresh the browser by pressing F5 function key on yourkeyboard or by clicking Refresh icon. Your Web page should looksimilar to the page illustrated below:

19



Paragraph

The p element defines a text paragraph. The syntax of p element is asfollows:

<p>… </p>

It adds one blank line ahead of the text that defines a paragraph.Browsers ignore formatting within the p tags. Text within p tags isrendered with default font size and type.

The figure below shows that paragraph element ignores extra spacesand formatting within the p tags.

20



Note: The paragraph tag is different from line break element. The brelement takes the content to the next line without adding an extrablank line.

The figure below shows the difference between p and br elements.

21



Paragraph tag has only one attribute: align. The possible values of align attribute are left (default), right, and center. The syntax of paragraph tag with align attribute is as follows:<p align = “value”> … </p>

The example of p tag with align attribute is as follows:

XHTML does not allow the use of heading tags within p tags. However,you can include any of the following elements within the p elementtags to format the entire paragraph’s text.

Elements within p element Element Syntax Usage

22



b <b> … </b> Bold text.i <i> … </i> Italicized text.strong <strong> …

</strong>Strong font.Browsers usuallydisplay boldface

text.em <em> …

</em>Emphasized font.Browsers usuallydisplay italicizedtext.

big <big> …</big>

Bigger in sizethan thesurrounding text.

small <small> …</small>

Smaller in sizethan thesurrounding text.

sup <sup> …</sup>

Superscript(slightly raised)the text.

sub <sub> …</sub>

Subscript(slightly lowered)the text.

del <del> …</del>

Strike out thetext.

tt <tt> … </tt> Teletype ormono spacedtext.

The figure below shows an example of the formatting elements.

23



Nested tags contain one or more sets of tags within one tag. Youmust use nested tags in the opposite sequence that they were used inthe syntax. For example:<p><b> … </b></p>

You can apply more than one format tag on a text as illustrated below:

ObjectiveIn this exercise, you will use nested tags.

Edit your index.html file in notepad as given below:

24



Note: For documents’ well-formedness, you must close tags in thereverse order from which they were opened.



Refresh the browser by pressing F5 function key on yourkeyboard or by clicking Refresh icon. Your Web page should looksimilar to the page illustrated below:

25



List tags There is a difference between reading on the Web and reading on apaper. People don’t like to read much on the Web. Bullets playimportant roles in clearly stating critical points without adding anysuperfluous information.

There are three kinds of lists: definition list, ordered list, and unorderedlist. Their syntax, possible attributes, and examples are as follows:

Three types of Lists

26



Definition list defines the list of terms and their definitions.<dl>

<dt> … </dt><dd> … </dd>…

</dl>

Example of Definition list:

27



Unordered list begins each item with a bullet. It uses li element to define eaitem.<ul>

<li> … </li><li> … </li>

…<li> … </li>

</ul>

Example of Unordered list:

The li element allows that type attribute. The possible values of type attribare disc, square, and circle.<ul>

<li type = “value”> … </li><li> … </li>…<li> … </li>

</ul>

Example of type attribute within list tags:

28



Ordered list begins with a number. The li tag is used to define each item of t<ol>

<li> … </li><li> … </li>…

<li> … </li></ol>

Example of Ordered list:

The type attribute of <li> tag can be used to add different numberingtypes before the item. The syntax is:<ul>

<li type = “value”> … </li><li> … </li>…<li> … </li>

</ul>

The possible values of type attribute are A (for uppercase letters), a(for lowercase letters), i (for lowercase roman numbering), I (foruppercase roman numbering), and 1 (for numbers).

The ordered and unordered lists can be nested in each other. Anexample of a nested list is as follows:

29



ObjectiveIn this exercise, you will use nested list tags for the course content.

Edit your index.html file in notepad as highlighted below:



Refresh the browser by pressing F5 function key on yourkeyboard or by clicking Refresh icon. Your Web page should looksimilar to the page illustrated below.

30



Validating Web Pages To ensure that your web page follows the rules of XHTML, you will usea tool called Validator. Validator checks your page against formalXHTML standards. It parses your Web document and produces theerror list. Once all errors are fixed, you can include a “valid” icon onthe page. The “valid” icon shows your Web site user that you havecreated an interoperable Web page. The icon must link to Validator’ssite so your page can be revalidated to verify your assertion.

ObjectiveIn this exercise, you will validate your index.html page.

Open Internet Explorer.

Enter the URL: http://validator.w3.org/

Click on the Validate by File Upload tab.

31

http://validator.w3.org/

http://validator.w3.org/



Click on the Browse button and locate the index.html file.

Click on Check button on the Markup Validation Service webpage.

32



If you get “no character encoding” error, you need to specifycharacter encoding in your document. Character encoding isnormally done in the Web server configuration file or administrationprogram. To specify character encoding in your document, editindex.html file in Notepad with the highlighted code from thefollowing screenshot.If you get “missing xmlns attribute for element html” error, edit<html> tag in index.html file in Notepad with the highlighted codefrom the following screenshot.

33



Save your file.

Switch to Internet Explorer (XHTML Markup Validation Service).

Upload the updated file and click on the Revalidate button.

If you get similar results as shown below, your file is a valid

XHTML 1.0 transitional.

34



Markup Validation Service also provides an icon to be displayed on thepage that has successfully been validated. The code to include the iconon the Web page is given on their page. Select the code highlighted inthe following page and copy it (CTRL+C).

35



Paste the code in your index.html file before the end of <body>

tag. Your index.html file should look similar to the one below:

36



Switch to the Internet Explorer and refresh your web page.

37



Conclusion

You have just completed the XHTML – Case Study I. In this case study,you were introduced to many techniques. To reinforce yourunderstanding of these techniques, it is recommended that you readand work through it once again.

38

XHTML Case Study 1

Documents

Transcript of XHTML Case Study 1