PC TRAINING: XHTML

XHTML

XHTML is a markup language for Web pages from theW3C(World Wide Web Consortium). XHTML combines HTMLand XML into a single format (HTML 4.0 and XML 1.0). LikeXML, XHTML can be extended with proprietary tags. Also like XML,XHTML must be coded more rigorously than HTML. Over the years,HTML coders have become sloppy, because Web browser software was originally written to tolerate many variations in HTML coding, but, with XHTML, coders must conform to the XML rules.

In one sentence we can say that XHTML is a superset of HTML, but unlike HTML it is stricter to rules and requires a document to follow XML rules.Whereas HTML is an application of SGML, a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML.

Formatting Text

Font Settings

When text is displayed in a browser it appears in a default font face, size, style, and color. Most browsers use the Times New Roman font face at approximately 12-point size and rendered in black. However, several style sheet settings permit you to change these default settings to bring a different look to your pages.

When working with text fonts you need to keep in mind that the faces that are displayed in the browser are limited to those installed on the user's PC. Therefore, you need to be aware of what kinds of computers your visitors use and what type faces you expect to have been installed. It is best to stick with common faces unless your Web audience is known in advance. The following font faces are typical on a Windows-based PC, displayed here in 12-point size.

arial
arial narrow
comic sans ms
courier new
georgia
impact
tahoma
times new roman
verdana

Typical PC font faces.

There are six font style settings that can be used to add variety, interest, or emphasis to the text on a Web page. These property settings are listed in Figure.

Property:		Value
font-family		Font name can be any system font or the generic values serif sans-serif cursive monospace Multiple values can be specified in order of preference, separated by commas. The first located font face is applied: font-family:arial,verdana,sans-serif
font-size		Font size specified as a unit of measurement, normally points (pt). If no unit of measurement is supplied, the default is pixels (px).
font-style		Font style specified as normal italic oblique
font-weight		Font weight specified as lighter normal bold bolder or a value from 100 (lightest) to 900 (darkest). Not all number values in the range are recognized by all browsers.
font-variant		Font variant specified as normal small-caps
font		A shorthand method of specifying a set of font styles by assigning values separated by spaces in the exact order: font-style font-variant font-weight font-size font-family. Unassigned values can be missing from the listing: style="font:italic bold 10pt times new roman"

Font style properties

Any combinations of these styles can be applied to any text on the page. They can be associated with a <body> tag to apply to the document as a whole. They can be coded for a p selector to apply to all paragraphs. They can be coded as classes and applied with <span> tags surrounding letters, words, phrases, sentences, or other selected strings of text within a paragraph. They can be applied as classes through <div> tags to blocks of text.

The font-family property needs to be specified to change the browser's default setting from Times New Roman. When using an uncommon font family to display special font styles that may not be present on every user's computer, you should provide other, more common, type faces from which the browser can choose. The font-family property gives these choices in a comma-separated list. The browser searches the computer system for the first matching type face and uses it to display the text. For instance, the following style sheet sets the standard font style for a page.

Font family value choices

First, the browser attempts to use the Helvetica type face. If it is not present on the user's system, the browser looks for the Verdana type face. If it is not present, the browser uses whatever built-in non-serif type face is available. The generic font names serif, non-serif, and monospace will always locate a type face that is similar to Times New Roman, Arial, and Courier, respectively.

You also need to set the font-size property in order to change the browser's default 12-point size. Normally the font size is given in point sizes; however, you can use pixels to set letter heights for special styling.

The font-style property is a choice between normal and italic styles; oblique usually is rendered in italic as well. Browser default is the normal style.

The font-weight property is a choice between normal and bold. The values lighter and bolder are not commonly recognized in browsers; neither are all numeric values recognized. Normally, values between 100 and 500 are displayed in normal weight, and values between 600 and 900 are displayed in bold.

The font-variant style of small-caps changes all letters to upper-case in a slightly smaller font size. Specifying normal returns the text to standard display.

Font style declarations can make use of individual property settings, or values can be combined in the single font property as a shorthand way of expressing the declarations. That is, a set of style sheet declarations can be made as shown in Listing,

{font-family:arial;
font-variant:small-caps;
font-size:10pt;
font-weight:bold;
font-style:italic}

Font settings through use of individual style properties

or combined as shown below :

{font:italic small-caps bold 10pt arial}

When using the font property, not all values need to be specified, but they need to be in the order: font-style font-variant font-weight font-size font-family. A typical declaration could include, for example, only the font-size and font-family values: {font:10pt arial}.

The following code uses an embedded style sheet with combinations of font settings. In this example all font stylings use the shorthand font property. Browser display of this page is shown in Figure.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Example Font Styles</title>

<style type="text/css">
  body    
   
  background-color: #ffffff;
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  background-repeat:no-repeat;
  background-attachment:fixed;
  /*
  
  background-image:url(img/edu1_contentbg.gif);
  background-color: #CCCCFF;
  background-position:left;
  background-repeat:no-repeat;
  background-attachment:fixed;
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom:0px;
  */
  
   
  font:12pt arial;
  text-indent:25px; 
  margin:10px
  }
  .head   {
  font:bold 14pt; 
  text-align:center;
  text-indent:0px
  }
  .offset {
  margin-left:25px;
  margin-right:25px; 
  text-indent:0px
  }
  .cap    {
  font:bold 24pt
  }
  .fancy  {
  font:13pt comic sans ms
  }
  .style1 {
  font:bold 14pt times new roman
  }
  .style2 {
  font:bold 12pt courier new; 
  color:fuchsia
  }
  
 
  
.p {
   font:Verdana, Arial, Helvetica, sans-serif;
   size:3;
   color:006666;
   margin-left:40;
   margin-left:60;
   text-decoration:none;
   text-align:left;
  }
.Title{
    FONT-WEIGHT: bold;
    FONT-SIZE: 14px;
    COLOR: #e86800;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: underline;
}

.subtitle{
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    COLOR: #660033;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: underline;
}


.text{
    FONT-WEIGHT: normal;
    FONT-SIZE: 12px;
    COLOR: Black;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none;
}

.textbold{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10px;
    COLOR: Black;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none;
}

.text1{
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    COLOR: #660033;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none;
}

.lines{
    FONT-WEIGHT: Normal;
    FONT-SIZE: 10px;
 COLOR: black;
  /*padding-left:10px;*/
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none;
 font-variant: normal;
 /*font-style: italic;*/

}


</style>

</head>
<body>

<div class="head">Font Stylings</div>

<p><span class="cap">T</span>his page show various font stylings applied
with an embedded style sheet. Styles are applied to the entire page and to 
selected portions of text on the page.</p>

<div class="offset">

<p>These next two paragraphs are offset from surrounding paragraphs by their 
containment within a division. The division has left and right margins of 25 
pixels and neither of the paragraphs have first-line indents.</p>

<p class="fancy">This paragraph is styled with a class that changes the font 
face and size. Inside this paragraph is a span tag that styles <span class=
"style1">this string of text</span> differently from the rest of the 
paragraph. In addition, this <span class="style2">word</span> has its own 
special style.</p>

</div>

</body>
</html>

Font style settings for a page

Output: Try it yourself or Click here to view the file.

Styling for the <body> tag sets the default format for the entire page. Thereafter, various style classes are applied to selected portions of the text.

Nested Styles

The above page includes nested style sheets wherein an inner style setting inherits and then temporarily overrides, or modifies, the settings of an outer style. The outer <body> style, for example, sets page display in 12-point Arial type with page margins of 20 pixels and paragraph indention of 25 pixels. These settings remains in effect unless overriden, for instance, by the enclosed <div> styles which reset margins for the two enclosed paragraphs to 25 pixels and reset paragraph indention to 0 pixels.

These division styles are further overridden in one of the enclosed paragraphs wherein font styling is changed to 13-point Comic Sans MS while retaining division margins and indention. Within this paragraph, <span> tags are used to override paragraph styling for individual text strings that take on different font faces and sizes.

Style sheets can be nested inside one another so that styles cascade down any number of levels. Ending the style settings occurs in reverse order. This point is illustrated by the following code showing an indented structure of <span> tags that apply and then remove increasing font sizes by using in-line style sheets.

<p>
<span style="font-size:12pt">
Here
<span style="font-size:16pt">
are
<span style="font-size:20pt">
styles
<span style="font-size:24pt">
nested
</span>
inside
</span>
one
</span>
another.
</span>
</p>

Nested style settings using <span> tags

Although you are not likely to nest styles to this extreme, the point is that each closing </span> tag, beginning with the inner-most, closes its associated style, causing styling to revert to the next outer-most style until all styles have been ended. Just remember to keep the opening and closing styling tags properly paired.

The above example also reemphasizes the fact that <span> tags do not have formatting characteristics of their own. Although they are coded on separate lines to show the nesting structure in this example, they do not cause line breaks or spaces when displayed in the browser. The display effect is the same as if coding were entered as the following continuous string.

Alternate coding for nested style settings

In contrast, a <div> tag has the same styling purpose except that it produces a line break. The following code styles the above text string with <div> tags and produces the output shown in Figure.

<div style="font-size:12pt">
Here
<div style="font-size:16pt">
are
<div style="font-size:20pt">
styles
<div style="font-size:24pt">
nested
</div>
inside
</div>
one
</div>
another.
</div>

Here
are styles
nested inside
one another.

Application of nested font styles using <div> tags

You need to be alert to these spacing differences since <span> and <div> tags are used extensively to apply styling to page elements.

Deprecated <font> Tag

Although not recognized in XHTML, a conventional method of setting font styles is with the <font> tag. This tag, like a <span> tag, encloses text to be displayed in a specified face, size, and color. The general format for the <font> tag and its attributes are shown below.

<font face="face1 [,face2] [,face3]" size="n|+n|-n" color="color" >
...text to be formatted...
</font>

The face attribute specifies a comma-separated list of up to three font faces that can be applied to the text enclosed by the <font> tag. Font sizes can be set or changed with the size attribute. The value of this attribute can range from 1 to 7, smallest to largest. If a size is not specified, the default system font size of 3 is used, which is approximately 12-point type size.

Note that font sizes are not specified in point sizes. The size of the font can be changed relative to the current size by using a "+" or "-" modifier. That is, an attribute value of size="+1" sets the font size to one size larger than the current setting.

Dynamic Font Style

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>XHTML Dynamic Style</title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
  <div style="padding: 10px; width: 100%; background-color: rgb(246, 246, 246);">
<span class="head3">Dynamic Font Style Settings</span><br>


<p>The numerous font setting can be applied in any combination.
 Click the following
buttons to view the effects of these settings.</p>

<p id="PAR1" style="text-align: left; background-color: rgb(255, 255, 255);">
Here is a paragraph of text with font settings that can be changed dynamically.
Click the radio buttons below to view 
combinations of font style settings applied to this text.
</p>

<table style="border-collapse: collapse;" border="1" width="100%">
<tbody><tr valign="top">
 <td>
<b>font-family</b><br>
<input name="fontFamily" style="background-color: rgb(246, 246, 246);"
 checked="checked" onclick="PAR1.style.fontFamily='arial'" type="radio">arial<br>
<input name="fontFamily" style="background-color: 
rgb(246, 246, 246);" onclick="PAR1.style.fontFamily='times new roman'" 
type="radio">times new roman<br>
<input name="fontFamily" style="background-color: 
rgb(246, 246, 246);" onclick="PAR1.style.fontFamily='courier'"
 type="radio">courier<br>
<input name="fontFamily" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontFamily='comic sans ms'"
 type="radio">comic sans ms<br>
<input name="fontFamily" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontFamily='verdana'" 
type="radio">verdana<br>
<input name="fontFamily" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontFamily='ms sans serif'" 
type="radio">ms sans serif<br>
<input name="fontFamily" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontFamily='webdings'" 
type="radio">webdings<br>
 </td>
 <td>
<b>font-size</b><br>
<input name="fontSize" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontSize='7pt'" 
type="radio">7pt<br>
<input name="fontSize" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontSize='8pt'" 
type="radio">8pt<br>
<input name="fontSize" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontSize='9pt'" 
type="radio">9pt<br>
<input name="fontSize" style="background-color:
 rgb(246, 246, 246);" checked="checked" 
onclick="PAR1.style.fontSize='10pt'" 
type="radio">10pt<br>
<input name="fontSize" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontSize='12pt'"
 type="radio">12pt<br>
<input name="fontSize" style="background-color: 
rgb(246, 246, 246);" onclick="PAR1.style.fontSize='14pt'" 
type="radio">14pt<br>
<input name="fontSize" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontSize='18pt'"
 type="radio">18pt<br>
 </td> 
 <td>
<b>font-style</b><br>
<input name="fontStyle" style="background-color:
 rgb(246, 246, 246);" checked="checked" 
onclick="PAR1.style.fontStyle='normal'"
 type="radio">normal<br>
<input name="fontStyle" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontStyle='italic'"
 type="radio">italic<br>
 </td>
 <td>
<b>font-weight</b><br>
<input name="fontWeight" style="background-color:
 rgb(246, 246, 246);" checked="checked" 
onclick="PAR1.style.fontWeight='normal'" type="radio">normal<br>
<input name="fontWeight" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontWeight='bold'"
 type="radio">bold<br>
 </td> 
 <td>
<b>font-variant</b><br>
<input name="fontVariant" style="background-color: 
rgb(246, 246, 246);" checked="checked" 
onclick="PAR1.style.fontVariant='normal'" 
type="radio">normal<br>
<input name="fontVariant" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.fontVariant='small-caps'"
 type="radio">small-caps<br>
 </td>
 <td><b>color</b><br />
 <div style="overflow: auto;height:130px">
 <input type="radio" name="color" style="background-color
: rgb(246, 246, 246);" onclick="PAR1.style.color='red'" />Red<br />
 <input type="radio" name="color" style="background-color: 
rgb(246, 246, 246);" onclick="PAR1.style.color='green'" />Green<br />
 <input type="radio" name="color" style="background-color
: rgb(246, 246, 246);" onclick="PAR1.style.color='blue'"
 checked="checked"/>Blue<br />
 <input type="radio" name="color" style="background-color
: rgb(246, 246, 246);" onclick="PAR1.style.color='blue'" />Blue<br />
 <input type="radio" name="color" style="background-color
: rgb(246, 246, 246);" onclick="PAR1.style.color='teal'" 
checked="checked"/>Teal<br />
 <input type="radio" name="color" style="background-color
: rgb(246, 246, 246);" onclick="PAR1.style.color='cyan'" />Cyan<br />
 <input type="radio" name="color" style="background-color:
 rgb(246, 246, 246);" onclick="PAR1.style.color='yellow'"
 checked="checked"/>Yellow<br />
 <input type="radio" name="color" style="background-color
: rgb(246, 246, 246);" onclick="PAR1.style.color='pink'" />Pink<br />

 </div>
 </td>
</tr></tbody></table>
</div>

 </body>
</html>

Click here to view the file.

Formatting Text

Text properties

The previous font settings can be paired with other style sheet properties to apply additional formatting to strings of text. The following table lists these properties that can bring more variety to text displays. Some of the properties pertain to styling the font itself; others pertain to the structural arrangement of text within its container.

Property	:	Value
letter-spacing		Sets the horizontal letter spacing of an element's text. Values are normal npx auto
line-height		Sets the line height of an element's text. A measurement in pixels or points is an actual height; a number or a percentage is a multiplier of the current font size. normal npx npt n n%
text-align		Sets the horizontal alignment of text within an element. Values are left center right justify
text-decoration		Sets the decoration of text within an element. Values are none line-through overline underline
text-indent		Sets the indention of text within an element. Values are npx n%
text-transform		Sets the capitalization of text within an element. Values are none capitalize lowercase uppercase
vertical-align		Sets the vertical alignment of the contents of an element. Values are bottom top baseline middle sub super text-bottom text-top
word-spacing		Sets the amount of spacing between words in an element. Values are npx normal

Text style properties

You have already been introduced to the text-align and text-indent properties. The former controls how individual lines of text are aligned within a block of text; the latter controls the amount of spacing at the beginning of the first line of text.

There are two properties which control the amount of horizontal spacing across a line. The word-spacing property gives the number of pixels between words; the letter-spacing property set the number of pixels between letters. These properties are used to stretch (using positive values) or compress (using negative values) words and letters horizontally by adding or removing space between them.

The amount of vertical spacing in a text block is given by the line-height property. Although pixel or point measurements can be used, a numeric value better equates to familiar settings. It is a multiplier of the current font size; therefore, a declaration of line-height:1.5 equates to line-and-a-half spacing and line-height:2 equates to double spacing. Note that fractional values are valid. Thus, a setting of line-height:.8 narrows the space between lines to 80% of the normal distance.

There are two text properties that are better thought of as font properties since they affect the style of characters. The text-decoration property draws a line over the characters (overline), under the characters (underline), or through the characters (line-through). The text-transform property converts text to upper-case characters, lower-case characters, or capitalized (capitalize) words.

The vertical-align property has a number of different uses depending on which tag it is applied to. As a font styling property it can, for example, convert characters to superscript (super) or subscript (sub) notation. As a text alignment property it positions text relative to its container or relative to surrounding content. Examples of this property are given when discussing particular tags or styling needs.

Formatting Text

Font Style Tags

Text characters can take on styles such as bold, italic, underscore, and others to highlight or emphasize letters and words. Although these styles can be achieved with style sheet settings, there are also stand-alone tags that can be used to directly enclose and format text characters.

Physical Style Tags

Physical style tags are in-line container tags that enclose the string of characters to be displayed in the specified style. These tags are common to all browsers and are displayed the same in all browsers. Physical style tags include those shown in Figure along with the way in which styled text is displayed in the browser.

Physical Style Tag	Browser Display	Style Sheet Equivalent
<big>big</big>	big	font-size:18px
<b>bold</b>	bold	font-weight:bold
<i>italic</i> or <em>italic/emphisized</em>	italic	font-style:italic
<small>small</small>	small	font-size:12px
<tt>typewriter</tt>	`typewriter`	font-family:courier new
<sub>subscript</sub>	subscript	vertical-align:sub
<sup>superscript</sup>	superscript	vertical-align:super
<s>strikeout</s> (deprecated)	strikeout	text-decoration:line-through
<u>underscore</u> (deprecated)	underscore	text-decoration:underline

Physical style tags

As shown in the above table, surrounding a text string with <b>...</b> tags, for example, converts the text to bold characters in exactly the same style as the font-weight:bold property setting. Whether you use these physical style tags or CSS style properties is a matter of personal choice. Notice that the strikeout and underscore tags are deprecated and produce errors under XHTML Strict validation.

It should be noted that these tags can also have style properties associated with them. For example, the style sheet declaration b {color:red} associates a color with the b selector. Therefore, any text made bold with the <b> tag also displays in red.

Logical Style Tags

Logical style tags do not have standardized meanings in all browsers, and XHTML does not specify exactly how they should be displayed. However, they are more broadly applicable than physical style tags in permitting both visual and non-visual rendering of styles.

For people who are visually impaired, for example, the <b> physical style tag may be meaningless since it renders text visually in bold characters. However, by using the visually comparable <strong> logical style tag, a person using special reader software hears the text with audio emphasis.

The following table shows the logical style tags. Their display might not be noticeably different from the default style in the browser you are currently using. Some browsers have not fully implemented all styles.

Logical Style Tag	Purpose	Browser Display
<abbr>abbreviation</abbr>	Indicates an abbreviated form.	abbreviation
<acronym>acronym</acronym>	Indicates an acronym.	acronym
<cite>citation</cite>	Contains a citation or a reference to other sources.	citation
<code>code</code>	Designates a fragment of computer code.	`code`
<dfn>definition</dfn>	Indicates that this is the defining instance of the enclosed term.	definition
<em>emphasis</em>	Indicates emphasis.	emphasis
<strong>strong</strong>	Indicates stronger emphasis.	strong
<kbd>keyboard</kbd>	Indicates text to be entered by the user.	`keyboard`
<samp>sample</samp>	Designates sample output from programs, scripts, etc.	`sample`
<var>variable</var>	Indicates an instance of a variable or program argument.	`variable`

Logical style tags.

The logical style tags are designed for situations in which the visual appearance of text in the browser needs to be augmented by other special renderings or information content. For standard browser display, then, you are likely to stick with the physical style tags or their CSS equivalents.

Style Sheet Alternatives to Headings

Recall that the <hn> heading tags enclose strings of text for display in one of six heading styles. The number n in the tag ranges from 1 (largest) to 6 (smallest). Headings are displayed in bold characters in the default font face. Of course, you can apply a style sheet to a heading tag to modify its settings. For instance, the style declaration

Styling a heading tag.

displays the heading at size 2, but with italicized Arial font face overriding the normal heading display in Times New Roman. Other stylings can be applied to the tag to display the heading with additional style characteristics that augment standard display of <h2> headings.

Formatting Text

Text & Background Colors

Browsers display black text on a white background unless different color style settings are applied. You can also specify a background color for the page or for any text container. Text and background colors can be designated in style sheets using hexadecimal values, RGB values, or color names.

Hexadecimal Colors

A hexadecimal number is a base-16 number. That is, values are formed with the 16 counting digits 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. The digit 0 is equivalent in value to decimal 0, the digit F is equivalent in value to decimal 15.

When used to represent color values, three pairs of hexadecimal digits are used to represent the combined intensities of red, green, and blue; this color value is preceded with a "#" symbol to indicate a hexadecimal value:

#rrggbb

A value of hexadecimal "00" (the smallest 2-digit hexadecimal value and equivalent to decimal 0) in the color position means the absence of the color; a value of "FF" (the largest 2-digit hexadecimal value and equivalent to decimal 255) means the color is at full intensity.

Thus, a hexadecimal value of "#FF0000" represents the color red: "FF" in the "rr" position assigns full intensity to red; "00" in the "gg" and "bb" positions represent the absence of green and blue color intensities.

Likewise, a value of "#00FF00" is (lime) green and a value of "#0000FF" is blue. White is represented by all colors at full intensity: "#FFFFFF"; black is the absence of color: "#000000". In between these extremes are colors of every hue and intensity to over 16 million colors, although not all colors can be displayed accurately on all computer monitors.

RGB Colors

An RGB color specification uses decimal values to indicate the combined intensities of red, green, and blue hues. Values can range from 0 (smallest) through 255 (largest). These RGB values are given in style sheets in the following format,

rgb(r,g,b)

using a decimal value to indicate the intensities of the three colors. Thus, coding an RGB value of rgb(255,0,0) indicates red, rgb(0,255,0) indicates (lime) green, and rgb(0,0,255) indicates blue. As in the case with hexadecimal values a full spectrum of over 16 million colors can be represented by combinations of red, green, and blue intensities.

Color Names

Colors can also be specified with special color names. Most browsers recognize over 200 color names. The common set of 16 Windows colors is shown below by color names and their associated hexadecimal and RGB values.

Color Name	Hex Value	RGB Value
Black	#000000	rgb(0,0,0)
Maroon	#800000	rgb(128,0,0)
Green	#008000	rgb(0,128,0)
Olive	#808000	rgb(128,128,0)
Navy	#000080	rgb(0,0,128)
Purple	#800080	rgb(128,0,128)
Teal	#008080	rgb(0,128,128)
Silver	#C0C0C0	rgb(192,192,192)
Gray	#808080	rgb(128,128,128)
Red	#FF0000	rgb(255,0,0)
Lime	#00FF00	rgb(0,255,0)
Yellow	#FFFF00	rgb(255,255,0)
Blue	#0000FF	rgb(0,0,255)
Fuchsia	#FF00FF	rgb(255,0,255)
Aqua	#00FFFF	rgb(0,255,255)
White	#FFFFFF	rgb(255,255,255)

Window color names and Hex and RGB values

Click here to view the Color Picker

Color Style Properties

Colors can be applied either to the text on a page or to the background of the container holding the text. These two style properties are shown in the following table.

Property	:	Value
color		#rrggbb rgb(r,g,b) color name
background-color		#rrggbb rgb(r,g,b) color name

Color style properties

Colors can be applied as broadly as the entire page by associating a color style with the tag, down to a single text character by associating a color style with a tag surrounding the character. Hexadecimal, RGB, and color-name values can be used in any combination for specifying color properties.

Formatting Text

Special Characters

There are certain text characters that cannot be displayed in the browser by typing them directly into your text editor. Some of these characters have special meaning in XHTML and, rather than displaying them, the browser interprets the characters as XHTML code. For example, the "<" (less than) and ">" (greater than) symbols are used to identify tags.

So, you cannot directly type these characters as part of your Web page information since they would be interpreted as XHTML tags rather than being displayed as less-than and greater-than characters.

Other symbols such as © (copyright) and ™ (trademark) do not have keyboard equivalents. Still, you need a way to represent them on a Web page. Further, browsers always collapse a series of space characters into a single space no matter how many spaces you enter into your text editor. At times, though, you may wish to leave more than one space between letters and words.

Character Codes

XHTML provides a set of special character names and codes that display their associated symbols in the browser. These characters are prefixed with an ampersand (&) and suffixed with a semicolor (;) to identify them as special characters. You can use either the numeric code or character name (if any) to represent these symbols in an XHTML document.

Display Character	Name	Code	Description
"	"	"	Quote
&	&	&	Ampersand
'		'	Apostrophe
<	<	<	Less than
>	>	>	Greater than
™	™		Trademark
			Non-breaking space
¢	¢	¢	Cents
¦	¦	¦	Broken vertical bar
§	§	§	Section
©	©	©	Copyright
«	«	«	Left angle quote
»	»	»	Right angle quote
¬	¬	¬	Not sign
®	®	®	Registered trademark
°	°	°	Degree
±	±	±	Plus/minus
¶	¶	¶	Paragraph
·	·	·	Middle dot
•	•		Bullet
¼	¼	¼	Fraction one-quarter
½	½	½	Fraction one-half
¾	¾	¾	Fraction three-quarters
÷	÷	÷	Division
×	×	×	Multiplication
ø	ø	ø	Small o-slash
Ø	Ø	Ø	Large O-slash
–			En dash
—			Em dash
"	"	"	Quote
&	&	&	Ampersand
'		'	Apostrophe
<	<	<	Less than
>	>	>	Greater than
ג„¢	™		Trademark
			Non-breaking space
�¢	¢	¢	Cents
�¦	¦	¦	Broken vertical bar
�§	§	§	Section
�©	©	©	Copyright
�«	«	«	Left angle quote
�»	»	»	Right angle quote
�¬	¬	¬	Not sign
�®	®	®	Registered trademark
�°	°	°	Degree
�±	±	±	Plus/minus
�¶	¶	¶	Paragraph
�•	·	·	Middle dot
ג€¢	•		Bullet
�¼	¼	¼	Fraction one-quarter
�½	½	½	Fraction one-half
�¾	¾	¾	Fraction three-quarters
�•	÷	÷	Division
�—	×	×	Multiplication
�¸	ø	ø	Small o-slash
�˜	Ø	Ø	Large O-slash
ג€“			En dash
ג€”			Em dash

PC TRAINING

XHTML - PART III

0 comments:

CATEGORIES

POPULAR POSTS

BLOG ARCHIVE

ABOUT ME

Categories

About

Link list 2

Follow us

Link list 3