TECHNICAL xhtml, css, textpattern and coding articles
XHTML Essentials
HTML and its improved version XHTML (Extensible HyperText Markup Language) is the code that drives the web. Look in the View menu of your browser, click Source and you will see the source code for this web page. It is plain text with tags inserted which the browser understands and translates into colours, images, layout etc. As it is so universal and as it is mostly quite straightforward, I believe everyone with any input into the web should know the basics. If you are using a CMS like Textpattern, you can just type in your article but with some XHTML you can change the appearance if you wish. Here is a web page explained. Note it is what goes between the < and the > that does the business.
Anatomy of a Simple Web Page
(Working from the top of the page to the bottom)
<html> Tells the browser this is a Web Page
<head> The Head is used for certain technical info
<title> The Title of your web page like so:
XHTML Essentials
</title> Tells the browser this is the end of the Title
</head> Tells the browser this is the end of the Head section
<body> The main Body of your page
<h1> Huge Heading like so:
Hey! Look at me!
</h1> End of the Heading
<p> Starts a Paragraph like so:
Here are some common tags. By now I hope you can see that you open a tag and then close it with a tag with slash. There are a few exceptions such as <br />
which forces a line break like so.
</p> End of Paragraph
<h2> Big Heading like so:
Big Head!
</h2> Closes the h2 Heading
<p> Starts a new Paragraph:
Here are two more useful tags you can use in the Body of your page. First there is <strong>for a bold or strong typeface</strong>, then there is <em>for emphasis</em>.
</p> End of Paragraph
<h3> Medium Heading like so:
Headings decrease down to h6
</h3> Closes medium Heading
<p> Another Paragraph:
Now for some slightly more difficult tags. Links are everywhere and here is how you make one:<a href="http://google.com/">Go to Google</a>
And here is another one:<a href="http://www.myoldsite.com/anyoldpage">Go to any old page</a>
</p>
<p>
Images need care. You have to know where the image is located, point to it with src, and include its width, height and alt (ernative) text to describe the image.<img src="http://01010.org/images/small.jpg" width="40px" height="12px" alt="bricks" /> Note that the 
img tag is also a single tag like the br tag and has the closing slash included at the end.
</p>
<p>
There are many more tags but you will get by with those. Just be careful you do not miss any < or > or " or / or your page can suddenly look a mess! Also you can change the look of all these Body tags by styling them with CSS.
</p>
</body> Closes the main Body
</html> Closes the Web Page.