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

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 Special Characters: 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: © is used to insert the copyright symbol. Character entities are case-sensitive The character entity for an ampersand is &

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 Lists List 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. Use <CAPTION> Caption Text </CAPTION> after the <table> tag to caption the table. 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.