Home
HTML and CSS
Articles
XHTML and Stylesheets
Level: All levels Software:
Briefly...
The web is changing. The web is actually changing everyday; different languages, algorithms, concepts, and ideas. It seemed as if, after learning HTML, I started hearing rumors of XHTML.
Introduction to XHTML
XHTML (eXtensible Hypertext Markup Language) is the redefinition in XML of HTML defined in SGML. XHTML1.0 became a W3C Recommendation on January 26th, 2000 as the redefinition of HTML 4.0/4.01. XHTML has a high affinity with both HTML and XML, and is expected to be the description language of Web contents that can be processed by XML-compliant tools. XHTML 1.1 became a W3C Recommendation on May 31st, 2001. In addition, XHTML Basic became a W3C Recommendation as a subset of XHTML for mobile devices. As of right now, there is a working draft of XHTML 2.0. The new version will include Ruby support and a few other very important new modules that, yet again, make the web more dynamic and well-formed.
The Ten Commandments of XHTML
XHTML, as with anything and everything else in life, has rules. If there weren't any rules, where would the web be? (That's a whole other topic) So there are ten basic rules, as set out by the W3C (yeah those guys), for an XHTML document; also known as, the ten commandments of XML:
- XHTML/XML shall be straightforwardly usable over the Internet.
- XHTML/XML shall support a wide variety of applications.
- XHTML/XML shall be compatible with SGML.
- It shall be easy to write programs which process XHTML/XML documents.
- The number of optional features in XHTML/XML is to be kept to the absolute minimum, ideally zero.
- XHTML/XML documents should be human-legible and reasonably clear.
- The XHTML/XML design should be prepared quickly.
- The design of XHTML/XML shall be formal and concise.
- XHTML/XML documents shall be easy to create.
- Terseness in XHTML/XML markup is of minimal importance.
These guidelines must be followed to create a well-formed, validated XHTML document.
Basics You MUST Know
In an XHTML document, there are a few things that must be a "standard". These are the rules that must be followed to correctly validate an XHTML document.
- XHTML elements must be properly nested
- XHTML documents must be well-formed
- Tag names must be in lowercase
- All XHTML elements must be closed
- Properly nested elements mean that you can't improperly nest within each other
like this:
<i><b>This is bold, italic text</i></b>
Which should actually be this to be properly nested:
<i><b>This is bold, italic text</b></i>
- Well-formed documents are a must, and at the same time, can help you maintain
a very good structure for not only XHTML, but programming too.
XHTML elements must be nested within the <html> root element. While the other elements can have child elements. Child elements must be in pairs and correctly nested within their parent element:
<div>
<p><strong>This is a paragraph!</strong></p>
<p>The turkey ran away from the butcher</p>
</div>
- Lowercase is a MUST !!! A lot of people, as I have seen, like
to capitalize HTML code; this is a no-no in XHTML:
<A HREF="page.html">Link Here!</A>
Now with XHTML you must have all code in lowercase, like so:
<a href="page.html">Link Here!</a>
- All tags must be closed. Yes, even empty tags.
Empty tags are the tags that, in HTML 4.0/4.01, that weren't required to be closed; break tag, horizontal
rule tag, etc:
<p>
This is a paragraph!<br>
And I have some text right below it!
In XHTML, you would find this code written as:
<p>
This is a paragraph!<br />
And I have some text right below it!
</p>
You must follow at least those four basic steps of XHTML in order to correctly validate you XHTML code.
XHTML...XML??
Anyone confused of where XML comes into the picture? Have you heard of XML and XHTML having something
in common? Well, partly they do, and partly they don't. HUH?
Let's get to the point. XHT ML is a markup language written in XML; therefore, it is an XML application. So XML is a part of XHTML; that's why you must have complete, well-formed documents that validate entirely in order to call your document XHTML. The "Ten Commandments of XHTML" are the same as XML. The rules go hand in hand. So, a quick, non-technical description of XHTML is: XHTML is a hybrid between HTML and XML.
XHTML uses three XML namespaces (used to qualify element and attributes names by associating them with namespaces identified by URI references. Namespaces prevent identically custom-named tags that may be used in different XML documents from being read the same way), which is like the three HTML 4.0 DTDs: Strict, Transitional, and Frameset.
Document Type Definition (DTD): Schema specification method for SGML and XML documents. DTDs are either contained in the document or belong to its external subset and are then referenced from within the document's document type declaration per URI. Known DTDs are e.g. DocBook, CML, IBTWSH, and HTML. dtd2html generates HTML documentation for SGML DTDs. For XML, DTDs will be replaced by the new XML Schema specification method.
XHTML markup must conform to the markup standards defined in a HTML DTD. When applied to Net devices, XHTML must go through a modularization process. This enables XHTML pages to be read by many different platforms.
Style Sheets, You're My Hero!
A stylesheet is often used in association with structural markup to apply visual formatting
to a document. This means that the content of a document, or a collection of documents, can be separated
from the presentation. This has a number of advantages. It means that the author does not have to repeat
similar presentational information for every instance of a given feature, such as a book title, in
every document. It also means that the document can be output in a different format altogether. This
can be especially useful when producing material that is accessible to those for whom display on a
screen is not useful, such as blind or partially sighted people. A style sheet could be used to generate
a Braille or audio version of a document. Equally, the style sheet might simply add color or size characteristics
to text for display. Finally, it could control the order and selection of elements to be displayed,
such as is commonly done with XSLT and CSS (Cascading Style Sheets).
Since we are covering XHTML, we will talk more about CSS. CSS separates content (XHTML) from presentation (CSS), meaning you can change the whole appearance of the website (or set of documents) with a simple change in the CSS document.
As with this article, I do not discuss what a stylesheet consists of, that can be covered in a tutorial later on.
The Stylesheet
The stylesheet (styles.css) is what we will be using to separate the presentation from the
content. The examples I will list will be useful for a web-based project and will go into detail what
they output, and why you would do it this way.
A stylesheet consists of a selector, property names, and values; what is, when put together, is called a statement (See figure 1).
Great Examples, Make Great People
Okay, here come the examples of how to code a stylesheet. I stylesheet is fairly easy to read
and follow. There is really not that much logic in it, like PHP and other programming languages. When
I say logic, I mean you don't really have to think about it; it comes quite natural, but you DO have
to think about it.
Say you want your whole site to have a default font of verdana with a size of 12 pixels, and a color of black. You also want your default background color to be white and the margins to be set to the top left-hand corner of the page so that your site is more formal. The code would be:
| .body {
font-family: Verdana, "Minion Web", Helvetica, sans-serif; font-size: 12px; font-color: #000000; background-color: #ffffff; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; } |
This code does everything stated at the top, but the reason it does all this is because it states, unless overwritten by a different rule, that any content in the <body> tag will have the font set at verdana with a text size of 12 pixels and black font color. Margins will be set at 0 pixels, and the background is white.
Another example would be how to format a paragraph to have a set font, font size, font color and padding:
| p {
font-family: Verdana, "Minion Web", Helvetica, sans-serif; font-size: 12px; font-color: #000000; padding: 7px; } |
Simply, this set of code assigns the font verdana with a 12 pixel font size being the color black and padding of 7 pixels to each paragraph tag. This means that everytime a paragraph tag is opened, this style will take effect.
Hold My Hand Comments
Comments, comments, comments. No no, not me. I mean your CSS comments. When you write CSS
code, and base your website off of separating content from presentation, your style sheets are going
to usually be larger than you XHTML code. Commenting you CSS code is critical for updating a certain
style and troubleshooting browser bugs. CSS uses C# style comments.
A regular comment:
// This is a regular CSS comment.
A block style CSS comments:
| /* This is a block style CSS
Comment. Anything in this comments will not be outputted by the browser. */ |
A 'Prettier' block style CSS comment:
| /*
================================================= Wanna get cute with a CSS comment? Well you can | By adding other special characters to make your | Comments stand out a lot better. Try using and | Equals sign or something. | ================================================= */ |
Remember, comments are you friend. USE THEM. If you don't use comments, you will truly regret it.
Conclusion
Although web standards change daily, as with new technology, separating XHTML from CSS is a major step
by far the best thing you could do. Better standards and better results keep more users happy. Still
many people are coding in HTML 4.01, but have noticed a lot of people are going the XHTML route. CSS
becomes XHTML's arsenal and betters the outlook in the web era to a better, well-formed internet.
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com