Introducing XHTML: Module D: Text, Lists & Links

Goals Understand how to modify the way in which text is presented and interpreted Understand how to create lists Understand how to create links

Text-Formatting Elements Formatting elements provide specific instructions about how their contents should be displayed For instance, the <b> element instructs user agents to display its contents as boldface text

Text-Formatting Elements Phrase elements, however, primarily identify or describe their contents For instance, the <em> element is an emphasized piece of data, similar to a quotation

Text-Formatting Elements

Phrase Elements It is a much better choice to format the text on your Web pages using a phrase element that more adequately describes its content

Phrase Elements Using phrase elements helps ensure that your Web pages are compatible with user agents that may not be capable of handling formatting elements

Phrase Elements

The <address> Element You use the <address> element to supply contact information for a Web page Usually, you place the <address> element either at the beginning or the end of the Web page

The <address> Element Within the <address> element, you place any data, including paragraphs and links, that is part of the contact information for the Web page Most Web browsers render the contents of the <address> element in italics

The <del> and <ins> Elements The <del> and <ins> elements are used for marking changes to a document The <del> element marks text to be deleted from a document, whereas the <ins> element marks text to be inserted into a document

The <del> and <ins> Elements When using the <del> and <ins> elements to mark up documents it is important to know why a change is made and when it was made

The <del> and <ins> Elements For this reason, the <del> and <ins> elements include two optional attributes: cite and datetime You assign the cite attribute the URL of a Web page containing an explanation for the change The datetime attribute specifies the date and time a change was made

The <del> and <ins> Elements Unlike most XHTML elements, the <ins> and <del> elements can act as both inline and block-level elements

The <del> and <ins> Elements However, when used as block-level elements, the <ins> and <del> elements do not appear on their own line, as do most other block-level elements

The <pre> Element The <pre> element (short for preformatted text) tells a Web browser that any text and line breaks contained between the opening and closing tag are to be rendered exactly as they appear

The <pre> Element The user agent should display the contents of a <pre> element in a monospace font, leave any white space intact, and should not wrap long lines of text

The <pre> Element The <pre> element was originally designed as a way of preserving column alignment and line spacing In current browsers, you will find it is much easier to use tables to manage column alignment

The <pre> Element The <pre> element is still typically used to contain computer output or programming code that needs to be rendered in a monospace font and that needs to retain its original line breaks, spaces, and white space

Quotations Quotations are no more or less important than other types of data you find on Web pages, but because the <blockquote> element is a block-level element and the <q> element is an inline element, it is easier to discuss both elements in the same section

The <blockquote> Element The <blockquote> element is a block-level element that defines long quotations on Web pages The <blockquote> element includes an optional cite attribute to which you can assign a URL that cites the quotation, provided you found it on the Web

The <blockquote> Element The only purpose of the cite attribute is to identify the location of a URL that is the original source of a quotation; the value assigned to it is not rendered by a browser or visible in a ToolTip

The <q> Element The <q> element is an inline element that you use to specify short quotations on your Web page You can also include the cite attribute with the <q> element, which you assign the URL where you found the quotation

Special Characters You will often find it necessary to add special characters to your XHTML documents, such as a copyright symbol (©) or a non-English character such as the Latin capital letter E with a circumflex (Ê)

Special Characters You add special characters to an XHTML document using numeric character references or character entity references

Numeric Character References A numeric character reference inserts a special character using its numeric position in the Unicode character set Unicode is a standardized set of characters from many of the world’s languages

Numeric Character References A number represents each character in the Unicode character set To display a character using a numeric character reference, place an ampersand (&) and the number sign (#) before the character’s Unicode number and a semicolon after the Unicode number

Numeric Character References Numeric character references and character references are both defined using an ampersand For this reason, a Web browser may be confused if it encounters an ampersand within the text of a Web page

Numeric Character References Therefore, you should use a numeric character reference of & in place of any ampersands in your document

Character Entities A character entity reference, or character entity, uses a descriptive name for a special character instead of its Unicode number For instance, you can display the copyright symbol on a Web page using a character entity of ©

Commonly Used Special Characters

Character Entities Most Web browsers ignore multiple, contiguous spaces on a Web page and replace them with a single space To force Web browsers to render multiple spaces, you must add a non-breaking space using the   character entity

Creating Lists Lists are a very important tool in proper Web page authoring because they provide a way of logically ordering a series of words or numbers

Creating Lists They also provide a simple, yet effective design technique for making it easier for Web site visitors to locate information You can add three types of lists to a Web page; unordered lists, ordered lists, and definition lists

Creating Lists

Unordered Lists An unordered list is a series of bulleted items To define the items you want to appear in the bulleted list, you nest <li> elements within a <ul> element

Unordered Lists

Ordered Lists An ordered list is a series of numbered items To define the items you want to appear in the numbered list, you nest <li> elements within an <ol> element

Ordered Lists

Definition Lists A definition list is a series of terms and their definitions Web browsers render each term and its definition on separate lines with an indented left margin

Definition Lists You create a definition list by using the <dl> element, you nest <dt> elements for term names and <dd> elements for term definitions

Definition Lists

Linking Web Pages You activate a hypertext link by clicking it with your mouse button A hypertext link in an HTML document is underlined and often displayed in a vivid color

Linking Web Pages The text or image used to represent a link on a Web page is called an anchor You create a basic hypertext link using the <a> element (the a stands for anchor)

Linking Web Pages It is not always necessary to use images for links because basic text links, if properly placed on a Web page, can be just as effective It takes much less time to create a text-based hyperlink than it does to design an image to use as a hyperlink

Uniform Resource Locators Hypertext Transfer Protocol (HTTP) manages the hypertext links that are used to navigate the Web ensures that Web browsers correctly process and display the various types of information contained in Web pages (text, graphics, audio, and so on)

Uniform Resource Locators The protocol portion of a URL is followed by a colon, two forward slashes, and a host A host refers to a computer system that is being accessed by a remote computer The host portion of a URL is usually www for “World Wide Web”

Uniform Resource Locators Domain name a unique address used for identifying a computer, often a Web server, on the Internet consists of two parts separated by a period The first part of a domain name is usually text that easily identifies a person or an organization, such as DonGosselin or Course

Uniform Resource Locators The last part of a domain name, known as the domain identifier, identifies the type of institution or organization Common domain identifiers include .biz, .com, .edu, .info, .net, .org, .gov, .mil, or .int

Uniform Resource Locators

Absolute and Relative Links An absolute URL refers to the full Web address of a Web page or to a specific drive and directory A relative URL specifies the location of a file relative to the location of the currently loaded Web page

Linking Within the Same Web Page Bookmarks are internal links within the current document and can be a particularly effective tool for helping users navigate through a long Web page You create bookmark links by using the id attribute

Linking Within the Same Web Page The standard id attribute uniquely identifies an individual element in a document Any element that includes an id attribute can be the target of a link

Linking Within the Same Web Page The id attribute replaces the name attribute that is used in HTML Many older browsers do not recognize the id attribute To address this problem the name attribute was not deprecated in the <a> element

Linking Within the Same Web Page To ensure that your links are valid in older browsers, you must use both the id and name attributes inside an <a> element and assign the same value to both attributes

Metadata The term metadata means information about information In a Web page, you use the <meta> element to provide information to search engines and Web servers about the information in your Web page

Metadata You must place the <meta> element within the <head> element You can use three primary attributes with the <meta> element: name, content, and http-equiv

The name Attribute You use the name attribute to define the name of the information you want to provide about the Web page You can use any text you like as the value of the name attribute

The name Attribute Two values that are used by some search engines are description and keyword Many search engines create a description of a Web page based on the first 200 characters following the opening <body> tag, unless the Web page includes a description <meta> element

The name Attribute Keywords are the words that describe the type of Web page a user is looking for and will likely type into a Web directory or search engine

Hiding Web Pages from Search Engines Your Web site may includes pages that you do not want to be included in any search engine indexes

Hiding Web Pages from Search Engines For instance, you may have a page that stores personal information or private data that, although not private enough to encrypt using special security software or a protocol such as HTTPS, should not be returned to a user who performs a search in a search engine

Hiding Web Pages from Search Engines You can inform search engine spiders that you do not want certain pages on your site to be indexed by placing a file named robots.tx in the root directory of the Web server that hosts your Web site This technique is called the Robots Exclusion Protocol

The http-equiv Attribute When a user wants to access a Web page, either by entering its URL in a browser’s Address box or by clicking a link, the user’s Web browser asks the Web server for the Web page in what is referred to as a request

The http-equiv Attribute What the Web server returns to the user is called the response One part of the response is the requested Web page

The http-equiv Attribute The response header is sent to the Web browser before the Web page is sent in order to provide information that the browser needs to render the page

The http-equiv Attribute One of the most important pieces of information in the response header is the type of data, or content-type, that the server is sending

The http-equiv Attribute One important use of the <meta> element is to specify a document’s character encoding The W3C strongly encourages the use of content-type <meta> elements to specify an XHTML document’s character set

Resources Slides were adapted from the following text & companion lectures: XHTML, Comprehensive First Edition Dan Gosselin Published by Course Technology (2004)