Learn xHTML in 10 Minutes
In the last article I covered how to Learn HTML in 15 minutes. In this video I’ll teach you how to write xHTML 1.0 Strict code in 1o minutes!
It is actually pretty easy. You just have to:
- Change your DOCTYPE
- Change Some Meta Tags
- Close all your tags properly
- Surround inline tags with block tags
- Eliminate the use of a few tags
- Leave the styling to Cascading Style Sheets
I have most of the header changes finished for you in the code that follows the video. It is W3C compliant and you can validate your own code here at The Markup Validation Service.
If you have any questions or comments leave them below. If you’d like to see this article written out instead of in a video check out What’s the Difference Between HTML and xHTML. It is a very nice article I wrote a few months back.
Validated Code from the Video
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /><!– <meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ /> –>
<meta name=”description” content=”Welcome to Bob’s Hardware” />
<meta name=”keywords” content=”Flowers,Seeds, Rakes” />
<meta name=”author” content=”Bob Smith” />
<title>Welcome to Bob’s Hardware Store, we sell Flowers, Seeds, Rakes</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head>
<body>
<h1>Text to Draw Attention to</h1>
<p><abbr title=”ASAP”>Something Abbreviated</abbr>
<acronym title=”ASAP”>ASAP</acronym>
<strong>I Want this to be Bold</strong>
<big>This is going to be Big</big></p>
<blockquote><p>Words in a block quote</p></blockquote>
<p><em>I like Being Italicized</em>
<i>I like being Italicized too</i></p>
<p><q>You can quote me on that</q></p>
<p><small>I feel so small</small> <strong>I’m the strongest</strong> <sub>I’m Subscript</sub> <sup>I’m Superscript</sup></p>
<p>This is a big paragraph. Really, it is!</p>
<p><img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/marketing-examples45_sm_sm.jpg” alt=”Merrill” height=”415″ width=”300″ /></p>
<dl>
<dt>Bicycle</dt>
<dd>- Has two Wheels</dd>
<dt>Car</dt>
<dd>- Has Four Wheels</dd>
</dl>
<ol>
<li>Car</li>
<li>Truck</li>
<li>Bicycle</li>
</ol>
<ul>
<li>Car</li>
<li>Truck</li>
<li>Bicycle</li>
</ul>
<p><a href=”http://www.newthinktank.com”>The New Think Tank Website</a>
<a href=”http://www.newthinktank.com#Great”>Some Great Stuff</a>
<a href=”mailto:derekbanas@example.com?Subject=Hello%20again”>Send Mail</a></p>
<table summary=”Here are some things I did”>
<caption>Here are some things I did</caption>
<tr>
<th>Sat</th>
<th>Sun</th>
<th>Mon</th>
</tr>
<tr>
<td>Played Ball</td>
<td>Watched Football</td>
<td>Worked</td>
</tr>
</table>
<form action=”mail2.php” method=”post”>
<p>Send Message to this Email<br />
<input type=”text” name=”email” size=”40″ /><br /></p>
<p>Subject<br />
<input type=”text” name=”subject” size=”40″ /><br /></p>
<p>Text Area<br />
<textarea cols=”40″ rows=”10″ name=”message”>Default Text in Text Area Box</textarea><br /></p>
<p>Text Input<br />
<input type=”text” name=”textinput” /><br /></p>
<p>Password Input<br />
<input type=”password” name=”password” /><br /></p>
<p>Radio Input<br />
<input type=”radio” name=”radioinput” value=”Love Radio Buttons” />Love Radio Buttons
<input type=”radio” name=”radioinput” value=”Hate Radio Buttons” />Hate Radio Buttons<br /></p>
<p>Checkbox Input<br />
<input type=”checkbox” name=”checkboxinput” value=”Love Checkboxs” />Love Checkboxs
<input type=”checkbox” name=”checkboxinput” value=”Hate Checkboxs” />Hate Checkboxs<br /></p>
<p>Select Input<br />
<select name=”selectinput”>
<option value=”loveselect”>I love select buttons</option>
<option value=”hateselect”>I hate select buttons</option>
</select><br /></p>
<p>Option Input<br />
<select name=”optioninput”>
<option value=”loveselect”>I love option buttons</option>
<option value=”hateselect”>I hate option buttons</option>
</select><br /></p>
<p><input type=”submit” value=”Send” /> <input type=”hidden” name=”submitted” value=”TRUE” /></p>
</form>
</body>
</html>
The tutorial is great! Will you cover the new features of HTML 5 soon?
I plan on getting into the new versions of html and css. I had been waiting for them to become standardized, but that looks like that could take a while so I’ve been planning one. It will be out very soon