The Web Warrior Guide to Web Design Technologies

The Web Warrior Guide to Web Design Technologies Chapter 1 XHTML: Part I Professor: Ken Clifton, CISSP, MCSE, MCSD, MCDBA, Network+, A+, CTT+, CXE

Objectives In this chapter, you will: • Learn about HTML and XHTML • Work with XHTML DTDs • Study elements and attributes • Work with basic body elements • Link your Web pages • Validate your Web pages

Introduction to HTML • Hypertext markup language (HTML) is a language used to design Web pages. • HTML first became an Internet standard in 1993. • Latest version of HTML is 4.01, released in 1999. • HTML documents are composed of tags. • The file extension for an HTML document is .html or .htm.

Introduction to HTML • The unique address for an HTML document is called uniform resource locator (URL). • Example of a URL: www.kenclifton.com • Web pages are displayed using a program called a Web browser. • Examples of Web browsers: Internet Explorer and Netscape Navigator. • Web server: the place where Web pages are located.

Introduction to HTML • Web browsers request pages from the Web server. • Assembling and formatting HTML documents is called parsing or rendering. • HTML documents contain tags which are enclosed in brackets. • Examples of HTML tags: <b>This will create bold text</b> • The opening tag is <b> and the closing tag is </b>

Introduction to HTML • HTML is not case-sensitive. <B> and <b> are the same tag (note difference to xhtml). • HTML documents begin with <html> and end with </html>. • Some HTML tags do not require a closing tag, like <hr> (which represents a horizontal rule). • HTML tags are divided into structural tags and formatting tags.

Introduction to HTML • Common structural and formatting tags:

Introduction to HTML The general form of an HTML document is as follows: <html> <head> <title>title goes here</title> </head> <body> The body of the document goes here </body> </html> Note: Comments are in the format  All documents submitted should include a comment after the <HTML> tag with the author’s name

Introduction to HTML • Attributes are used to configure HTML tags. • The src in the following image tag is an example of an attribute: <img src=“myhouse.gif”> • To insert spaces in an HTML document, use the <p> and <br> tags. • 4.01 is the last version of HTML because it will be replaced by XHTML (extensible hypertext markup language).

XHTML Document Type Definition (DTDs) • A well formed document is a document that conforms to the rules and requirements of XHTML. • <!DOCTYPE> determines the XHTML DTD with which the document complies. • DTD (Document Type Definition) defines the tags and attributes that can be used in a document.

XHTML Document Type Definition (DTDs) • Three types of DTDs can be used with XHTML documents: Transitional, Strict, and Frameset. • Deprecated elements are elements that are considered obsolete and they will be eventually removed from a language. • Examples of deprecated HTML elements: <applet>, <basefont>, <center>, <dir>, <menu>…

XHTML Document Type Definition (DTDs) • The World Wide Web Consortium (W3C) oversees the development of Web technology standards. • A Transitional DTD allows the use of deprecated style tags in HTML documents: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

XHTML Document Type Definition (DTDs) “http://www/w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> • The Frameset DTD is identical to the Transitional DTD, except that it includes the <frameset> and <frame> elements: <!DOCTYPE html PUBLIC

XHTML Document Type Definition (DTDs) “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> • The Strict DTD eliminates deprecated elements in the Transitional DTD and Frameset DTD: <!DOCTYPE html PUBLIC

XHTML Document Type Definition (DTDs) “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML Elements and Attributes • An element is the tag pair and the information it contains. • Elements that do not include a closing tag are called empty elements. • Content is the information contained within an element’s opening and closing tags.

XHTML Elements and Attributes • There are two basic types of elements: block-level and inline. • Block-level elements: give the Web page its structure. • Examples of block-level elements: <p>, <h1>, <h2>, and <h3>

XHTML Elements and Attributes • Inline elements: used to describe the text that appears on a Web page. • Example of inline elements: <b> and <br>. • Standard attributes are attributes that are available to almost every element. • Examples of standard attributes: class, dir, xml:lang, and style.

XHTML Elements and Attributes • lang and xml:lang designate the language of the elements. • dir is used with lang. Its values are “ltr” (left to right) and “rtl” (right to left). • title provides descriptive text for an element.

Basic Body Elements • Headings • Paragraphs and line breaks • Horizontal rule Headings: • They are block-level elements that are used for emphasizing a document’s headings and subheadings.

Basic Body Elements • There are six heading-level elements: <h1> through <h6>. <h1> is the highest level of importance, and <h6> is the lowest level of importance. Paragraphs and Line Breaks: • <p> is used to add a new paragraph. • <br /> is used to add a line break.

Basic Body Elements • Most Web browsers ignore multiple, contiguous spaces and carriage returns. Horizontal Rules: • The horizontal rule element, <hr>, draws a horizontal rule on a Web page that acts as a section divider.

Linking Web Pages • Hypertext links are text or graphics that the user can click to open files or to navigate to other documents on the Web. • Anchor is a text or image used to represent a link on a Web page. • The <a> element is used to create basic hypertext links: <a href=“AWebPage.html”> A Web Page </a> • Note: TARGET= functionality (not in textbook) • Note: <BASE TARGET= (not in textbook)

Linking Web Pages • href is the hypertext reference. • Relative URL specifies the location of a file according to the location of the currently loaded Web page. • Absolute URL refers to a specific drive and directory or to the full Web address of a Web page.

Linking Web Pages • The <a> element can be used to create a link to an external document or to a bookmark inside the current document. • Any element that includes an id attribute can be the target of a link. <h3 id=“cpp”> C++, the language</h3>

Linking Web Pages • To create a link to a bookmark, an id value should be assigned to an href attribute. <a href=“#cpp”>Read about C++</a>

Validating Web Pages • A validating parser is a program that checks whether an XHTML document is well formed and whether the document conforms to a specific DTD. • A validator is available on: http://validator.w3.org • English and many Western languages use the ISO-8859-1 character set.

Summary • HTML is a language used to design Web pages for the World Wide Web. • HTML 4.01 is the last HTML version. HTML will be replaced by XHTML. • HTML is composed of tags and text that is to be displayed on a Web page. • Web browser displays a Web page provided by the Web server.

Summary • <!DOCTYPE> determines the XHTML DTD with which the document complies. • There are two types of elements: block-level and inline. • Hypertext links are used to navigate to other documents on the Web, or to open files. • A relative URL specifies the location of a file according to the location of the currently loaded Web page.

Summary • An absolute URL refers to a specific drive and directory or to the full Web address of a Web page. • Use a validating parser to ensure that the XHTML document is well formed.

The Web Warrior Guide to Web Design Technologies