XHTML |
| HTML Root & Head Elements, & <body> Tags | Basic Tags for Text Markup | Tags for Adding Links and Images | Tags for Tables and Lists |
Tag Attributes
Most tags can have identifying or modifying attributes. Attributes must have the following structure, in which the attribute's name and value are variables, and the equals sign and double quotation marks are the prescribed punctuation:
attribute_name="Value"
Note that the attribute_name may use only lowercase letters, but, depending on the tag it applies to, the value might use upper- and lowercases, numbers, spaces, punctuation marks, and even full sentences.
HTML Color Codes
Example:
If you want white text on a black background, you can modify the <body> tag using the attribute named "style," with a detailed "value" that specifies these display features:
<body style="color: white; background-color: black">
- "Standard attributes" usually either identify the element or determine how the element's contents will be displayed.
- "Event attributes" provoke some reaction on the web page to an action by the user (for example, moving the cursor over a specified element, usually a link). These events are caused by a script program, most commonly written in JavaScript.
XHTML Syntax Summary
- XHTML tags must be written between angle brackets in lowercase letters.
- XHTML tags must be closed.
- XHTML tags must be nested properly.
- Values of XHTML attributes follow the equals sign and must be enclosed between double quotation marks.
XHTML vs. HTML
- XHTML is a stricter, cleaner version of HTML.
- XHTML does a better job of separating "style" from "content."
- XHTML tags are almost identical to HTML tags, but many HTML display-related tags and attributes have been replaced with "class" or "style" attributes in XHTML (especially those related to fonts and text alignment).
- XHTML is interoperable among a variety of applications, whereas HTML is limited pretty much to personal computers.
Data vs. Style:
What really distinguishes XHTML from HTML
XHTML more thoroughly separates the data content (i.e., what the document says) from its stylistic presentation (i.e., how the document looks, including fonts, background colors, margin widths, text-alignment, and the like).
Cascading Style Sheets (CSS)
Style features are assigned through the use of "cascading style sheets" (CSS) , which were first used with HTML4.0. They are called "cascading" because they may be assigned at different levels that flow from one level into the next to create the desired stylistic effects.
Cascading style instructions can be encoded using:
- External style sheets, in which style instructions are linked from separate CSS files. External style sheets can be shared by multiple web pages, so they make it very easy to remain consistent from web page to web page, and to make global style changes almost instantly. You can use Notepad or other plain text editors to write CSS documents, too--just use the filename extension .css when you save it.
- Internal style sheets, in which style instructions are given on an individual web page to specify, for example, how links display according their status:
<style>
a:link { color: blue; text-decoration: none; }
a:visited { color: purple; text-decoration: none; }
a:hover { color: red; text-decoration: underline; }
</style> - Inline style definitions, in which style instructions are declared in the tag where the change occurs in the text, by using the style="?" attribute. These inline instructions can be applied both at the "block" level (for example, to headings, to paragraphs, by using the <div> tag, etc.), and phrase-by-phrase, word-by-word, and even letter-by-letter (by using the <span> tag).
Successive levels inherit most style properties from the preceding levels, unless they redefine the property. Approved Properties and Values
CSS Syntax
For each style definition, there is a "selector" (that specifies what you want to change) and a "declaration" (that tells how you want it to look).
- The selector in both external and internal style sheets is simply listed. For inline definitions the selector is the tag to which the style="?" attribute is applied.
- The declaration has two parts, separated by a colon:
- property (the characteristic you wish to change)
- value (what it will change to)
In the style sheets the declaration is surrounded by curly braces:
With inline style definitions the declaration becomes the value of the style attribute:
If one selector has multiple declarations, the declarations are always separated by semicolons.
EXAMPLE:
Say you want your section headings (for which you've used <h2> </h2> as the markup) to have white text on a black background ...
- With style sheets (assign once for the whole document):
- h2 { color: white; background-color: black }
- With inline style definitions (repeat each time this type of heading is used):
- <h2 style="color: white; background-color: black"> ... </h2>
The "Class" Attribute
Using either external or internal style sheets, it is possible to create one "class" selector that can be applied to any number of elements that will share the same style properties. Choose a name for the selector, such as "red" for a class that will change the font color to red. In the style sheet you list the selector's name beginning with the prescribed punction mark for classes, the period. Then set up your declaration:
Every time you want red letters just add the class attribute to whatever tag you're dealing with, and it will refer back to the specified declaration in the style sheet:
<span class="red"> </span>
<h2 class="red"> </h2>
The "ID" Attribute
Also used in style sheets, the id attribute works similarly to the class attribute, but in reverse. Instead of referring elements back to the style sheet the id refers style sheet definition(s) to just one specific element, and you use the # at the beginning of the id's name in the styles list instead of the period.
But why?
Say you have a group of paragraphs that you want to show up as white text in a navy box in the middle of the page. So, you group the paragraphs within a division that you id (and also "name" for "backward compatibility") as "navybox." Only then you realize that you can't see the blue-colored links -- you need the links in "navybox" to be in a contrasting color from the background, but you want the links outside "navybox" to stay as they are. You could try inline style attributes on all the "navybox" links, but the style sheet is easier, plus you can add some other effects not possible with the inline definitions.
EXAMPLE:
#navybox { color: white; background-color: navy; width: 50%; text-align: center; }
#navybox a:link { color: yellow } /* "a" for link "anchor" tags */
#navybox a:visited { color: silver }
#navybox a:hover { color: red; background-color: white }
/* a:link, a:visited, a:hover are examples of "pseudo-classes" */
And in the body of the document:
<div id="navybox" name="navybox">
<p>A paragraph with an <a href="#example">internal link</a>.</p>
<p>A paragraph with an <a href="https://www.loc.gov" target="_blank">offsite link</a> (to the Library of Congress).</p>
</div>
This displays as:
As you see, CSS is complex topic all by itself, and there are many more effects possible. The W3C offers a brief tutorial called Adding a Touch of Style, by Dave Raggett. Another free online CSS Tutorial is available from www.w3schools.com.
Conclusion
In truth, XHTML isn't quite as easy as old-fashioned HTML (and certainly not as forgiving). Now you have the basic tools, though. Yes, there's still plenty more to learn, but you can do it!