Chapter 2

XHTML: Part II

The Web Warrior Guide to Web Design Technologies

Objectives

In this chapter, you will:• Work with text-formatting and phrase elements• Add images to your Web pages• Create lists• Work with frames• Create tables• Build forms

Working with Text

• Two types of inline elements for managing text formatting are formatting elements and phrase elements.

• Formatting elements provide specific instructions as to how their contents should be displayed.– Examples of text-formatting elements: <b>, <big>,

<small>, <sub>, and <tt>

Working with Text

• Phrase elements primarily describe the content.– Examples of phrase elements: <abbr>,

<acronym>, <code>, <samp>, and <strong>.

Special Characters:• Special characters, like the copyright symbol,

can be inserted into an XHTML document.• Character entity references are used to insert

special characters.

Working with Text

• Character entities contain a descriptive name preceded by an ampersand (&) and followed by a semicolon.– Example: &copy; is used to insert the copyright

symbol.

• Character entities are case-sensitive• The character entity for an ampersand is

&amp;

Adding Images to Your Web Pages

• Images are added using the <img> element.• The src attribute specifies the file name of an

image file.• <img> attributes: src, alt, longdesc, width,

height, usemap, and ismap.• The <img> element must include the src

attribute in order for an XHTML document to be well formed.

Adding Images to Your Web Pages

• The alt attribute specifies alternate text to display in place of the image file.

• If an <img> element does not include a title attribute, the value assigned to the alt attribute appears as a ToolTip when the mouse is moved over the image.

• The size of an image is measured in pixels.• Resolution is the number of pixels that can be

displayed on a monitor.

Adding Images to Your Web Pages

• The height and the width attributes are used to specify the size of an image.

• The value assigned to the height and the width attributes in an <img> element should always be the exact dimensions of the original image.

Creating Lists

• Three types of lists can be added to a Web page:– Unordered lists– Ordered lists– Definition lists

Creating ListsList elements and their description:

<ul> Block-level element that creates an unordered list

<ol> Block-level element that creates an ordered list

<li> Inline element that defines a list item

<dl> Block-level element that creates a definition list

<dt> Inline element that defines a definition list term

<dd> Inline element that defines a definition list item

Creating Lists

• An unordered list is a list of bulleted items.• The <li> elements are nested within the <ul>

elements as follows:<ul>

<li> list item 1 </li>

<li> list item 2 </li>

</ul>

Creating Lists

• An ordered list is a list of numbered items.• <li> elements are nested within the <ol>

elements:<ol>

<li> Bill Clinton </li>

<li> George Bush </li>

</ol>

Creating Lists

• A definition list is a list of terms and their definitions.

• Definition lists are created using the <dl> element. Within the <dl> element, <dt> elements are nested for term names and <dd> elements for term definitions.

Creating Lists

<dl>

<dt><b>Ohm</b></dt>

<dd>Measurement unit for electrical resistance or impedance.</dd>

</dl>

Working with Frames

• Frames are independent, scrollable portions of a Web browser window.

• Using frames, a Web browser window can be split into multiple windows.

• The Frameset DTD includes the <frameset> and <frame> elements.

• A document is divided into frames using the <frameset> element.

Working with Frames

• Use the rows and cols attributes to determine whether frames are created using rows or columns.

• The rows attribute determines the number of horizontal frames.

• The cols attribute determines the number of vertical frames.

• The asterisk allocates any remaining screen space to an individual frame.

Working with Frames

• The src attribute of the <frame> element specifies the URL to be opened in an individual frame.

• Frames can be assigned a name using the name attribute. This name can then be used as a target for a hyperlink.

• The target attribute of the <a> element determines in which frame or Web browser window a URL opens.

Working with Frames

• The <base> element is used to specify a default target for all links in a document, using the assigned name of a window or frame.

Creating tables

• Tables are collections of rows and columns that can be used to organize and display data.

• A cell is the intersection of a row and a column.

• Attributes of a table element: summary, width, border, frame, rules, cellspacing, and cellpadding.

Creating tables

• Table rows are created using the <tr> element.

• Cells are created within the <table> element using the <td> element.

• Header information is defined within the <th> element.

Building Forms

• A form is used to collect information from the user and transmit that information to the server for processing.

• A form cannot be nested inside another form.• Attributes of the form element include: action,

method, and enctype.• The enctype attribute specifies an encoding

protocol known as MIME.

Building Forms

• Form controls include: <input>, <select>, <textarea>, and <button>.

• Attributes of the <input> element include: alt, checked, maxlength, name, size, and src.

• Values of <input> element’s type attribute: text, password, radio, checkbox, reset, button, submit, image, file, and hidden.

Building Forms

• To email form data to a Web server, replace the Web server script’s URL in the <form> element’s action attribute with:

mailto:email_address

Summary

• A user agent is a device that is capable of retrieving and processing XHTML.

• Character entities are used to add special characters to an XHTML document.

Summary

• Use the <img> attribute to add images to a XHTML document.

• An unordered list is a list of bulleted items.• An ordered list is a list of numbered items.• A definition list is a list of terms and their

definitions.• Frames are independent scrollable portions of

a Web browser window.

Summary

• Tables are collections of rows and columns that are used to organize and display data.

• Data on a form can be sent to an email address instead of being submitted to a Web server.