- 15,799
What are They?
Right now, We are in the age of 6.0/7.0 browsers. Some websites however are still using old, outdated HTML which came from the disease of 4.0 browsers. There are even websites using Javascript browser detection telling you to upgrade to a 4.0 compatible browser. Take a look at some of the source code from Yahoo!:
Code:
<table width=100% cellpadding=4 cellspacing=0 border=0 bgcolor=ffe8ba>
<tr>
<td align=left>
<font face=verdana size=-2>
<b>Web Site Directory</b> - Sites organized by subject</font>
</td>
</tr>
<tr>
<td align=right>
<font face=verdana size=-2>
<a href=r/bx>Suggest your site</a></font>
</td>
</tr>
</table>The above code has been broken up to fit the TF format. Not only is that code very ugly, I'm suprised they can update it! I had to go through and clean it up just to figure it out myself. Yahoo is a perfect example of bad coding. In the near future, Yahoo! is going to have major problems when browsers scrap NS4/IE4 markup.
If you're in the web design business, run your own personal website or a simply contemplating whether or not to get started with web authoring, use the web standards to avoid running into trouble later down the track. Standards such as XHTML and CSS are supported pretty well on the major browsers such as Internet Explorer 6 for Windows & IE5 for Mac, Netscape 7, Opera 7 and Mozilla 1.5.
The only drawback of using web standards is that people using NS4, or other 4.0 browsers, won't see the formatted version of the page. However, statistics show that hardly anyone is using NS4 and it won't be long before they are forced to update anyway.
What is XHTML?
XHTML is the successor to HTML. It stands for eXtensible HyperText Markup Language. XHTML is a combination of XML and HTML, and is a lot stricter than HTML. You're probably wondering what the advantages of using XHTML is. Well look below for a few advantages.
- Your pages are cleaner and easier to read
- Tons easier to convert to XML in the future
- Your webpages will be supported in the future
- Faster loading time as you're pages aren't filled with useless code
- Accesskeys add greater accessibility to your website
There are 3 variants of XHTML - Transitional, Strict & Frameset. Transitional is the one you're would be best sticking to as it isn't as Strict as XHTML Strict, as you might have guessed. If you're page contains frames, then your going to need to use XHTML Frameset.
Converting to XHTML from HTML isn't too hard. You just need to learn some rules and you're good to go.
What is CSS?
CSS stands for Cascading Style Sheets and is already used widely across the internet for fonts, URL decoration and HTML limitations. CSS is used to control not only the appearance of the content of your website, but the layout as well.
All your CSS code can be stored in an external file called a 'style sheet', meaning that one 10kb CSS style sheet can control hundreds of pages - ultimately saving bandwidth and load time. Another advantage of this is that you can update your whole website in seconds.
As I said above, CSS can also be used to control the layout of your site. Although CSS2 or CSS-P (CSS Positioning) is supported as greatly as CSS1, it is still a great alternative to table based web layouts which are a no-no according to the W3C.
Quote: Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
HTML 4.01 Spec (w3.org)
Now how do you go about using CSS to control the layout of your site? Enter the <div> tag referred to as layers or directly as DIVs. For instance:
Code:
[b]Layer example:[/b]
<link rel="stylesheet" type="text/css" href="foobar.css" media="all" />
<div id="top-section">
<div id="top-column-one">Foo</div>
<div id="top-column-two">Bar</div>
<div id="top-column-three">FooBar</div>
</div>
<div id="bottom-section">
<div id="bottom-column-one">Lorem ipsum</div>
</div>
[b]Table example:[/b]
<table width="600" border="0" cellspacing="4" cellpadding="3">
<tr align="center">
<td width="200">Foo</td>
<td width="200">Bar</td>
<td width="200">FooBar</td>
</tr>
<tr align="center">
<td colspan="3">Lorem ipsum</td>
</tr>
</table>You can immediately tell that this is a 3 column layout with a footer bar by viewing the first example, but the table code doesn't make much sense unless you know HTML.
Using layers would however requires that you define each DIV in your CSS style sheet, which in this case is foobar.css.
Benefits of using CSS:- Updating your website is much easier and requires less time
- Bandwidth is saved as one style sheet can control your entire website
- Faster loading times
- Greater accessibility
Here are a few great CSS resources:
http://www.alistapart.com/
http://www.meyerweb.com/
http://www.webstandards.org/
Also, if you'd like to see some example CSS layouts, check these out:
http://www.glish.com/css/
http://www.bluerobot.com/web/layouts/
Closing
Using standards will generally lead to a better, more accessible, faster and more compatible website. Why not get in and start using standards now?
- Originally from Tutorial Forums
