30
Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies
Chapter 1
XHTML: Part I
The Web Warrior Guide to Web Design Technologies
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.course.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.
• 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
<body> </body>
Encloses the body of the HTML document
<br> Inserts a line break
<html> </html>
Required tags that start and end an HTML document
<p> </p> Identifies enclosed text as a paragraph
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>
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>
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.
