Maybe it is the perfect timing to tell you about gaming messenger named Xfire.

Xfire™ is a new, free tool that automatically keeps track of when and where gamers are playing PC games online and lets their friends join them easily. It works regardless of game type, server browser, or gaming service that a player is using. Xfire eliminates the hassles of running multiple programs like IRC, instant messengers, or in-game friends lists to keep track of when and where a gamer’s friends are playing. It supports the best and the latest online PC games including server and non-server-based First Person Shooters, Real Time Strategy, and Role Playing Games.

But how good is Xfire really? It is time for a…

Review

The Look

First Look – it is a free software you can download. So what do you expect? The website looks great, but it doesn’t help to evaluate the casing of the software as there is no casing.

Installation – using the usual installer. Nothing spectacular, but it allows you to chose the installation path and if you want to create icons for the desktop, start menu and quick launch. It also shows which files it is installing. 4 of 5 points

First Time – The look is cool, but of course you either have to create a free account first or you have to log in with your account to actually use the messenger. 5 of 5 points.

Requirements and Look – The requirements are low, the look is great. Full points.

Installation Process

Time – Installation begins with downloading the software: The download is pretty fast if you got broadband. And 10 MB aren’t that large either. The installation process is also quick, so just give a fast 4 of 5 points.

Complexity – The installation is easy, which means I end up with 5 of 5 points.

Usage and Performance

Requirements, Look and actual performance – Xfire has surprisingly low requirements:

• PC with a Pentium processor running Windows XP, 2000 or Vista
• 10 MB available hard drive space recommended
• Desktop resolution of 800 x 600 at 256 colors (1024 x 768 at 16 bit color or higher recommended)
• Internet Explorer 5.0 with Service Pack 1 or higher
• Internet connection (broadband recommended)

It runs smooth on my old computer and it runs even smoother on the computer I use to write this article. I’d give full points, but the fact that you need Internet access and Internet Explorer makes me give 4 of 5 points.

Complexity – Xfire is easy to use, but there are some parts you will only use when you running Xfire as your major messenger -> 4 of 5 points.

Learning Curve – Using this gaming messenger, you do it by using your intuition. Full points.

Bugs – Unfortunately there are a few bugs in the software. Occasionally the file transfer won’t work, a supported game is not recognized or, although very rare, Xfire crashes without a reason. 3 of 5 points.

Personal Impression

Xfire is a very, very useful messenger. At least for me. It allows me to keep track of my gaming times, play a game and chat with my friends without having to “tab out” or getting issues with the messenger running in the background. Unfortunately there are some games which are not supported, but there is hope that they will be supported in the near future. There are many people in the community who suggest new games for support and so far the developers listen to the community. You can even suggest features or, for the more experienced user, create your own Xfire skin (or you just chose one of the many existing already).

Summary

I believe Xfire deserves the 4.4 points out of 5 possible points. It is one of the best messengers for the gamer. There are a few things I had to leave out as those don’t belong to a review. I’ll write another article in the near future to talk about some of the more advanced parts of Xfire.

What I teach you today is not how to create a professional website, but it is the basic design method any web programmer started with.
It is the old school table, but I add Cascading Style Sheets (CSS) to the table to get it a nice look.

But before you can start, you need to have an idea how you want to structure your page. The best thing to do is to grab a piece of paper and make a draft. As example I made a draft in a graphic program, although I prefer the paper method:

Now let’s think about how to convert the design into HTML…
You remember reading in the W3Schools reference something about <table>? If not, it is no problem as I explain it now

But first let’s get the basic page code done, which is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hello world!</title>
</head>
<body>

</body>
</html>

Now let’s see how we add the basic structure of the original design by using

Tables

To create a HTML table you need the <table>, <tr> and <td> tag. I will post the code I used for the table of my final example page and then I explain you the additional attributes used to modify the table:

<table>
<tr>
<td colspan="2">
Hello World!
</td>
</tr>
<tr>
<td>
menu
</td>
<td>
text
</td>
<td rowspan="2"$gt;
whatever
</td>
</tr>
<tr>
<td colspan="2">
foot
</td>
</tr>
</table>

Put the whole table code inside the body tags and have a look it it. I know it isn’t looking nice, but we will take care of it later.
So what does the code do…
the <table> tag defines a new table,
the <tr> tag defines a new row in the table. If you count our “<tr>…</tr>” you will count 3 rows,
the <td> tag defines a new cell/column in a row. Our first row has one cell/column, the second has 3 cells/columns and the third has one cell/column again.

Please keep the following “method” in mind when you build a table. It served me good back when I used tables for layouts:
1. define the table: <table></table>
2. count how many rows you need and add them inside the <table> tags: <tr></tr><tr></tr>…
3. have a look at the first row and count how many cells/columns you need. Then insert the amount of cells you need by adding the appropriate code into the <tr></tr> tags: <td>…</td><td>…</td>

If you used the above method you will see that our table doesn’t work as intended if we use my draft. So here we are using those attributes I have in my sample code already:
rowspan tells the browser if a cell is stretched over multiple rows. In my example the third cell of the second row stretches over 3 rows, so we are using rowspan=”3″
colspan tells the browser if a cell is stretched over multiple cells/columns. The cells of the first and the third row in our example are stretched over 2 cells/columns, meaning that the cells of the first and third row are as long as the 2 cells of the second row. We use colspan=”2″ here to achieve the proper behavior.
I assume it is difficult to visualize, so let me try to explain it in a different way:
rowspan stretches a cell vertical while the colspan stretches a cell horizontal.

Now as our table is behaving the way we want it to, it is time to add some optical

design with CSS

For a full list of CSS properties visit the w3schools website

Let me show you the code of the final result of my example, using what we have learned and updated with the CSS I want to teach you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Hello World
</title>
</head>

</body>
</html>


I know the code is a mess on here, so I recommend you copy and paste it into a text editor to have a proper look at it

Let’s start with the body tag. You see the attribute “style” which tells the browser that inside this attribute you are using CSS to modify how the page is displayed.

background let you change the background color of the overall website. You need to use hexadecimal colors although there are also named colors, like yellow or black. I recommend you use Google to find more informations about hexadecimal colors.
color let you change the font color of the overall website. The same as for the background color applies.

I also added the style attribute to the table tag as I wanted to change the style of the table. I also wanted to make the table stretch over the whole width of the browser window.

border let you create a border around the table. I decided to use a solid 1px width border and gave it a grey color. There are some more border styles, so visit the CSS reference
width let you define how broad the table is. In my case I used 100% which means that the table fills the whole browser window. Alternately you can use pixel to give a fixed size, like 800px or what you like.

To manipulate the style inside or of a cell itself, you again add the style attribute. Basically you can add the style attribute to any tag, except the closing tag of a tag of course.
So, what did I do to my cells:

the cell of the first row got a
font-size of 50px, which means that the size of the displayed font is 50px.
The font-weight of 700 displays the text as bold.

the text in the first cell of the second row got
aligned to the right with the proprietary: text-align. Additional to “right” you can use “center” and “left”.
vertical-align:top; aligns the whole text in the cell to the top of the cell as our second cell, the one with the in it, is a lot longer. Wouldn’t we set it to the top, it would be vertical aligned in the middle, as it happens in the third cell. There are a few more vertical align behaviors, have a look at them and play around
I also changed the color of the links in the cell and used text-decoration to show you that you can change a lot more with the right style proprietaries.

The other cells and rows got style proprietaries I explained earlier. I just used different colors to show you how the table layout looks like, so you can compare what the attributes are doing with a cell or row or the table…

I hope you understood everything, so have a look at my example page.
If you are not able to get your page working the way you want, feel free to use the comment section to ask for help.

Right now I have no idea what I will do in the next tutorial, so it will be a surprise. Meanwhile, use and train what you have learned.

Ok, so you think your page got already some interesting content…but I bet the layout is…uhm…let’s say boring…white background and black text…depending on the server default…so, the good news is there are tags which allow you to manipulate how a page is displayed.

Maybe you think there has to be a bad news if I only mention the good news above. Well, there are two bad news:
to write valid XHTML code you need to
1. learn some CSS (=Cascading Style Sheet) and
2. define the DTD (=DocTypeDefinition).

Before you start searching my blog (or the web) for a CSS tutorial you should know that I will cover some basic CSS knowledge in this tutorial and write some CSS Tutorials at a later date.

Now, after you calmed down, let’s go on with this tutorial:

Update: Because of the recent update of the W3C validator I’m introducing here, I had to expand the tutorial and added a couple more things at the bottom of the tutorial.

Before I start posting a list with all HTML tags and their usage/effect I just forward you to this XHTML1.0 Reference at W3Schools which I still use when I need to look up a specific tag.
Bookmark it well, as it will be something you will use often while learning HTML.

Now let’s get back to our first valid HTML page:

<html>
<head>
<title>Hello world!</title>
</head>
<body>
Hello World!
<br />
This is my first website.
</body>
</html>

Would you check this page with the official W3.org HTML validator you would get a big red error message, stating “This page is not Valid (no Doctype found)!”.

So, let’s add the doctype statement:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hello world!</title>
</head>
<body>
Hello World!
<br />
This is my first website.
</body>
</html>

Maybe you now think I made a mistake since I stated earlier that the HTML-Tag tells the browser that it shall display a HTML file and you believe the “doctype” is part of the HTML page. Well, the DocumentTypeDeclaration or DTD tells the browser which kind of HTML it shall interpret…or better, which kind of specification the browser shall use for interpreting the document. I guess this is a bit confusing…just don’t think too much about it

There are 3 different types of the DTD: Strict, Transitional and FrameSet.
As I don’t go into details of the differences I point you to the W3Schools page about the DTDs.

The main difference between Strict, Transitional and FrameSet are that the first does not allow the use of frames and some attributes, the second one does allow some types of frames and all attributes and the FrameSet is like the Transitional except supports all frame types.

For this tutorial we will use the Transitional DTD although I will explain some differences to the Strict DTD. However, I will not talk about frames, as they are not used much anymore.

If you look back at the code I posted above, you see the DocType for Transitional. If we wanted to use the Strict one, it would be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Now run the code I posted above through the validator.
Yes! “This Page Is Valid XHTML 1.0 Transitional!”

Ok, we just got a valid XHTML page, so let’s keep it that way while we manipulate how it is displayed.
Keep in mind, the official W3.org HTML validator is your best friend, so use it well (and often)!

Now let’s see how we can edit the style of the html page without using CSS.
The following tags you can use to edit and structure your text:

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
These tags describe a heading, <h1> being the top most heading and <h6> being the lowest heading.

<strong>
Renders as strong emphasized text

<em>
Renders as emphasized text

<dfn>
Defines a definition term

<code>
Defines computer code text

<samp>
Defines sample computer code

<kbd>
Defines keyboard text

<var>
Defines a variable

<cite>
Defines a citation

<q>
Defines a short quotation

<blockquote>
Defines a long quotation

<hr>
creates a horizontal line

<del>
Defines text that has been deleted in a document.

<tt>
Renders as teletype or mono spaced text

<i>
Renders as italic text

<b>
Renders as bold text

<big>
Renders as bigger text

<small>
Renders as smaller text

I believe these tags should be enough for a start. So go ahead and play with these tags a bit. Make sure you also use the official W3.org HTML validator which helps you to find errors and ensures that your page stays valid.

I assume you now got used to those tags, so let me add one more tag, which is actually a very important one: the <a>-Tag (no, not the A-Team ).
The “a” stands for anchor and is used to create links within your page and to other pages. Maybe you would like to refer to my tutorials on your website, so here is how you can do it easily:
1. visit the tutorial page you would like to link to. Check the browser address field. Copy the URL in there (or write it down).
2. go to your page code and add something like

<a href="http://www.ruelicke.net/2007/04/html-tutorial-101-basics"> Visit this great tutorial I'm currently using </a>

As you see, the opening <a>-Tag is in front of a link text and has a “href” attribute. If you fill in a full URL, including “http://” it will link to an external page (although it could be your own website, just another page), if you only fill in something like “test.html” it will open said html-page within your website. So if your website is at “domain.com” it will open the file at “domain.com/test.html”

The <a>-Tag also allows you to link within your page, so if you have a link at the top of the page it could link to the bottom of the page, which will make the browser jump to the bottom of the page when used. To enable this, you just need to add an “id”-attribute to one of the tags at the bottom of the page, e.g.

<h4 id="links">Links</h4>

and give it an unique id. Meaning: you can’t use “links” as id again, at least not on the same page.

Now you need the internal link at the top of the page:

<a href="test.html#links">My Links</a>

You noticed the “#links” after “test.html”?
Correction:
I didn’t use these internal links, also known as hyperlinks, for a while so I made a mistake here.

If you have you want to link to the bottom of the same page, use <a href="#links">My Links</a> if it is on another page and you want to link to the bottom of that page use: <a href="page.html#links">My Links</a>

The “#links” after “test.html” inside the href=”" That tells the browser to jump to the tag with the id “links” in the test page.

Update: Here you can see an example page.

Ok, I think we learned enough for today. In the next Tutorial I will talk about some more advanced manipulation of how the page is displayed. (Yes, here will come the basic introduction to CSS)

Important Update:
After the W3C updated their HTML validator, your website would not validate if you followed my tutorial so far.
The validator now requires you to add one tag and one or two attributes to make the page validate. So let me tell you what you have to do…

1. you need to put the following attributes into the opening <html> tag: xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”
so it looks like <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
The xml:lang and the lang attribute represent the ISO language code, as example, the ISO for German is DE, for English EN and for French FR. For a complete list of the language codes, visit this W3C page

2. you need to specify an encoding type. There are many different types, but in my tutorials I’m using the UTF-8 encoding. Add the following code after the closing </title> tag, inside the head tags:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

Now your website should validate properly

What is HTML?
HTML stands for HyperText Markup Language and it is the code which is used to create the websites you see.

Since HTML4.01 is less used these days, I will only talk about XHTML1.0 from now on. For a HTML4.01 Tutorial I can only advise you to visit the W3Schools website

So…then what is XHTML?
Basically it is like HTML4.01 although the “X” stands for “EXtensible”.
XHTML is the latest HTML standard and consists of HTML4.01 which was reformulated in XML.

Hey, I know HTML4.01 and I love it! Why should I use XHTML?
My personal opinion:
XHTML is the future of webcoding and it is easier to write valid HTML code. I’m sure you know the famous info texts on older webpages, stating “Optimized for IE” or any other browser. You have less problems to write valid code as all current browsers treat XHTML the same way.
No more “browser-optimizing”!
Even better, XHTML is backwards compatible, meaning the page is displayed the same in IE7 and IE5 or older.

So switch to XHTML, it is really easy

Well, what are the basics you should know about XHTML. Let me explain it two ways:

1. HTML4.01 experienced coder
good (valid) code would look like this:

<h3>Heading</h3>
some text
<br />
some more <b>text</b>

wrong (invalid) code could look like this:

<H3>Heading
some text
<br>
some more <B>text</B>

So what is the difference? You can say that all tags have to be closed; the “h3″ needs its closing “/h3″ and tags without a closing tag, like “br” or “img” are now auto-closing, so the old <br> turns into <br />.
Also all the code is written in non-capitals. There is no “H3″ or so, only “h3″.

That’s basically everything which is changing. Have a look at the W3schools XHTML1.0 Reference for more details.

2. readers without experience with HTML
These tutorials are the right thing for you…I hope…so let’s get started!

A website consists of a four basic tags which cannot be left out or the page would not validate.
These tags are:
- <html>
- <head>
- <title>
- <body>

Now let’s build our first website!

<html>
<head>
<title>Hello world!</title>
</head>
<body>
Hello World!
<br />
This is my first website.
</body>
</html>

Create a HTML file and copy the code into it, save it and open it in your browser (e.g. Firefox)
If you don’t have a HTML editor, create a new txt-file and open it with Notepad. Copy the code, save the file, then rename it to foo.html (or a name you prefere).
Congratulation, you just wrote your first website!

So, let’s explain each tag

The <html> let the browser know that you are opening a HTML file, so it interprets the code and displays your content.
The <head> is the place where you will later add meta, link and style tags/content. I will get into more detail in another tutorial.
In the <head> you also have the <title> tag. This tag allows you to give your page a title which is displayed at the upper left of your browser. Feel free to edit the “Hello World” title to something else

Last but not least we have the <body> tag. Inside the the body-tags you will write whatever you want to have on your website.
If you are wondering what the <br /> means, it just creates a line break, so the “Hello World!” and the “This is my first website.” are on different lines. The more “br”s you add, the more space you will get between the lines.

Now feel free to play with the HTML code you just learned…

WAIT, I almost forgot one important thing!
Please make sure your code is properly nested. The html-tag is the first tag and its closing tag the last tag in the code (see the example above). After the opening html-tag follows the head-tag, with the title-tag inside. After the closing head-tag follows the body tag. Inside of it you have all your website content. Please also check the <br /> if it really looks like this <br />.
I will tell you the reason for this with the next tutorial, where I will talk about other common html-tags and their usage/function.
I will talk about the reason in a later tutorial.

Update: Example of the final result

Continue to: HTML Tutorial 102: Tags and Validation