Text N 100 Building a Simple Web Page

Text N 100 Building a Simple Web Page XHTML 1

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 • Phrase elements, however, primarily identify or describe their contents • For instance, the <em> element is an emphasized piece of data, similar to a quotation XHTML 2

Text-Formatting Elements XHTML 3

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 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 XHTML 4

Using Inline CSS on text -You can use CSS to change the background color, the text color, and the size of the text. <p style = " background: blue; color: white; font-size: 10 pt; "> This is your paragraph. </p> XHTML 5

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 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 Tool. Tip XHTML 6

Special Characters • You will often find it necessary to add special characters to your XHTML documents, such as a copyright symbol (©) or a foreign character such as the Latin capital letter E with a circumflex (Ê) • You add special characters to an XHTML document using numeric character references or character entity references XHTML 7

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 XHTML 8

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 XHTML 9

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 • Therefore, you should use a numeric character reference of & in place of any ampersands in your document XHTML 10

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

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. Be careful with this character. It is wiser to use the number character reference, &#160, to get the multiple spacing. XHTML 12

Commonly Used Special Characters XHTML 13

Misc. Characters &#38 & ampersand &#37 % &#35 # number sign &#42 * asterick &#61 = equal sign &#43 + plus sign &#47 / forward slash &#45 - hyphen or minus sign &#169 &#58 percentage sign &#60 < less than &#62 > greater than &#59 ; semicolon &#46 . &#92 backslash &#8594 period right arrow &#034 “ quotation mark copyright symbol : colon XHTML 14