In order to put effort forward to learn something new, it is important to know why. Why am I doing this? You are familiar with your HTML and its newest 4.1 standard. Standard HTML is built on a language called SGML, and I am not going to fill you in further on that, because from here on out, SGML == BAD. Feel free to go the extra mile and review some basic code in the SGML standard and compare it back to this. Although HTML 4.1 is accepted in all GUI browser, it is not standard. When it is not standard, you get things that are different. And your goal with your website is to have everything appear as close as possible across browsers.
Three basic steps that will get you working with XHTML.
- Make sure all XHTML tags and attributes are written in lowercase.
- Make sure all XHTML tags are closed. (This can be done two different ways. If you are putting text or content between tags, then use <p>Here is my content before my close.</p>. Otherwise, a tag can self-terminate, <br />. Using <br></br> is valid but why create more typing for yourself?)
- Making sure all XHTML tags are nested properly. That means that they close in the opposite sequence they opened in. A properly nested set of tags are: <p><strong>Here is my content</strong></p>; whereas the improper way to nest tags: <p><strong>Here is my content</p></strong>;
http://validator.w3.org/
While I am on a linking frenzy, here are two link:
To get a listing of Web Safe Colors:
http://www.w3schools.com/html/html_colors.asp
Or, if you want to test them out, side by side:
http://www.visibone.com/colorlab/big.html
All characters have a web safe version. This helps when you want to show a character without letting it be translated. For instance, I want to show you the "<p>" tag. This document will be translated by your browser, so I need to use "<p>"
http://www.w3schools.com/tags/ref_ascii.asp
Now to break down the tags:
Block Level Elements: (A.K.A. Tags that have a space above and below them) div h1 h2 p ul ol li
Inline Elements: (Stays within context of content) a img em strong br
To see the XHTML translated through a browser: http://marccabrera.com/samples/xhtmlHowTo1.html
Actual Code:
<body>
<div id="container">
<div id="header">
<h1>MarcCabrera.com</h1>
<h2>I Speak Geek Fluently</h2>
</div>
<div id="menu">
<ul>
<li>
<a href="http://marccabrera.com" title="MarcCabrera.com">
MarcCabrera.com
</a>
</li>
<li>
<a href="http://virtualcreations.biz" title="Virtual Creations LLC">
Virtual Creations LLC
</a>
</li>
<li>
<a href="http://geekbynight.com" title="Geek by Night Software LLC">
Geek by Night Software LLC
</a>
</li>
</ul>
</div>
<div id="content">
<p>
<img src="http://marccabrera.com/images/MarcCabrera.jpg" alt="A slick picture of myself." /><br />
<strong>Books I like:</strong>
</p>
<ol>
<li>Harry Potter <em>All of them</em></li>
<li>Eragon And NOT the Eragon from LOTR</li>
<li>Eat, Pray, Love</li>
</ol>
</div>
<div id="footer">
© HTML Safe Copyright Symbol. All Rights Reserved 2007 MarcCabrera.com<br />
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" />
</a>
</p>
</div>
</div>
</body>
No comments:
Post a Comment