• KJ
  • Aug 21,2007
  • In: Blog

Introduction to XHTML

introduction-to-xhtml

HTML is a simplistic web development language designed solely for the creation and distribution of web pages and information on the Internet. It is the basis behind every website in existence. However, the language itself is purely simple…

HTML stands for HyperText Markup Language. It is what is called, an “embedded” language. This means that for every tag you open ( “<html>”) there needs to be a closing tag (”</html>”). All tags opened also need to be closed in the proper order to other open tags. This means that if you open a <html> tag, and then a <head> tag, you must end the <head> tag before the <html> tag. That may all sound confusing, but if you maintain a nice, well formatted document, it should be easy as pie.

XHTML is the new “Web 2.0″ standard for the internet. Though HTML is an “embedded” language, it’s a very loose one. This means that you could, by all means, close tags out-of-order, or add in random tags without even affecting the layout. XHTML is a strict language, which maintains the embedded setup. It requires that all tags be ended in the correct order. Also, XHTML replaces several HTML tags with newer, updated ones that allow for more security, but enhanced user ability.

Now, the history lesson now complete, lets get you learned! The first you need to know is that there are several XHTML versions you can choose from. These range from 1.0 Transitional/Frameset/Strict, 1.1 Strict, and 2.0. XHTML 1.0 Transitional/Frameset maintain several of the HTML rules, and is the most useful if you want XHTML compliance without recoding several of your websites. However, for all of these tutorials you will be taught 1.1/2.0 Strict.

There are just a couple of rules you need to know before coding in XHTML.

  1. All XHTML pages need a DocType declaration.
  2. All open tags have to be closed. (<html></html>)
  3. All tags and attributes have to be lowercase (<html> vs <HTML>)
  4. All attributes must be quoted (’src=”imagelocation”‘ vs ‘src=imagelocation‘)
  5. Empty tags must be ended (<br /> vs <br>)

Now it’s time to start looking at the page. First off, you need your programming tools. For XHTML, all you need is Notepad, and a browser. Nifty right? All browsers have the HTML engine built into it, and require no server-side modules to run the code. So, all HTML and Javascript you design you can view straight on your computer, and do not have to upload to a host.

The first thing your XHTML document needs is a DocType declaration. Since, we’re staying in XHTML 1.1 for now, that’s all I’ll provide you with.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd”>

That’s the very first line of all XHTML documents, the declaration. This just lets the browser know that the page is an XHTML page. However, if you fail to meet any of the 5 points above, the engine will switch back to HTML for rendering purposes.

Next up is the standard HTML tags. Unlike the above DocType, from here on you need to start ending your tags. So, after creating the HTML tags, end it.

<html></html>

This is just to meet standards. If you had to ask me what putting HTML tags in did, I really could tell you. However, your page does not meet any standard if you are not including that tag. The next bit of information is the Header tags.

<head></head>

The header tags generally do not convey the documents displayable contents. It carries any information about the page given to it. In most cases, this information is invisible to the user, but is still displayed in the page’s source. In generally, you’d put the page’s Title, Meta information, CSS code, and necessary Javascript scripts here. We’ll only touch on one of the above for now, Titles.

<title></title>

That would go in between your headers opening and closing tags. The title is the name of the page that appears in the top left of your browser. The title of this page is “[I'm a] PC Site.” The actually name goes in between the Title tags as well.

Next up is the body tag. This is, as it so obviously states, the body of your page. All code will go here to be displayed to the public. Anything put in between these tags will be displayed, unless it is server-side code being run or commented out.

<body></body>

and that’s the basics. Now to put them all together:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd”><html>

<head>

<title>[I'm a] PC Site</title>

</head>

<body>

<p>For basic text, wrap it in a paragraph ( <p> </p> ) tag.</p>

</body>

</html>

After all of that, all you need to do is save. When saving in Notepad, name the file, and after it add “.html” — and click save. Notepad, in turn, will save the file as an HTML file. Then, open it up and view!

Share and Enjoy:
  • Digg
  • description
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Technorati
  • E-mail this story to a friend!
  • Print this article!

If you like this blog please take a second and subscribe to my rss feed

Comments: No comments, be the first to comment

All the fields that are marked with REQ must be filled

Leave a reply

Name

E-mail

URI

Message

Archives

Blogroll