Web Dev : XHTML for Beginners

By on

html

TECHGEEK.com.au is back with another beginner’s guide, and this one is the follow-up to our previous guide of “HTML for Beginners”. This time, we are taking you back to the world of XHTML, a HTML variant used in many modern websites (like ours). Unfortunately, it also mixes another web standard called XML, or eXtensible Markup Language; thus meaning that the entire HTML basics are thrown out of the window.

However, have no fear. TECHGEEK.com.au will teach you the basics of XHTML, so you can use it for commenting on different sites – just not MySpace.

The “less than-attribute-greater than” recap

Remember in our HTML for Beginner’s tutorial when I mentioned the “less than-attribute-greater than” principle:

HTML tags follow a simple principal – less than sign-attribute-greater than sign. That’s it. However, you need to make sure you close the tag, or else it would not stop doing the certain attribute. To stop it, put it after the sentence or word you want the attribute and repeat the same thing, but put in a forward slash before the attribute.

Well, the good news it that it still exists. The bad news is that most of the attributes have changed.

Bold, Underline and Italicise your text – XHTML Style

In HTML – bold would be the b attribute, italics would be the i attribute and underline would be the u attribute. However, in XHTML – these don’t exists. While the would still read them correctly, we want the site to be valid to the strict web standards on pages. While pages try to be web-standards friendly, some browsers require you to put in some hacks to make it look the same in all browsers.

Anyway, the changes are very basic:

  • To bold your text in XHTML, just change the attribute b to strong.
  • To italicise your text in XHTML, just change the attribute i to em.

You would have noticed that we forgot about poor underline. Well, in XHTML – underlining text is no longer done by HTML, but by CSS. So, in this tutorial, we will be teaching you some CSS. To make it underline, you will need to change the attribute to span. This attribute allows this section only to be changed, and not the entire paragraph.

Now, after span, put a space and type in style=“text-decoration: underline”. Don’t forget to close it. This “style” we added in conjunction with our span attribute allows us to control the CSS aspects of the site. So it should now look like this:

  • For Bold: <strong>TECHGEEK.com.au</strong>
  • For Italics: <em>TECHGEEK.com.au</em>
  • For Underlines: <span style=”text-decoration: underline”>TECHGEEK.com.au</span>

Hyperlink and Images

Thankfully, Hyperlinks are the same thing, meaning that we don’t need to go through it again. But for old times sake, here is the piece we wrote on it when we did our HTML for Beginners guide.

Adding links just requires you to do the following: Use the less than sign-attribute-greater than sign, and replace “attribute” with a. Now add a space between a and the greater than sign and type in: href=”. Now go to where you want to link to and copy and paste the URL after the quotation mark. Now close the quotation mark and type in a message, like Click Here. Close the tag.

This should be it, if you want to link to TECHGEEK: <a href=”http://techgeek.com.au”>Click Here</a>.

Images, however, are sort of different. While they use the traditional less than-attribute-greater than method, they do no have a closing tag. This is because in XHTML, if there is nothing to be added in between the two tags, you just close it before adding the greater than method. Other than that, the rest is the same.

Another thing we have to do in adding images is to add some piece of text if the image is not found. This can be done by adding an alt=” in the tag, after the link. Add your text and close the quotation marks.

Following what I said, here is the code on how to add images – if the image was the current TECHGEEK logo : <img src=”http://techgeek.com.au/wp-content/themes/cry2/img/logo.png” alt=”TECHGEEK.com.au” />

Conclusions

If you have noticed that we have skipped the process of changing font sizes and font colours; we have decided to omit it because many modern sites using XHTML don’t really like you changing font sizes and font colours since it would wreck their design. However, if you know some CSS – you can use the same tag as what we did for underlining text, just remove the text-decoration: underline bit and add your own CSS.

However, like I said – there is an easier way.

Firefox users, you can install an extension called BBCode. This will allow you to format your comments easier with BBCode (for forums), XHTML (for example, the comment form in TECHGEEK) and HTML (for Myspace). If you have not gotten a single word of this, or just need an easier way to do this, this is a great plugin.

How it works is that you just right click on a text box and you should see BBCode. You will need, however, to configure the options to show HTML tags.