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.

Here we go:

Hello World

At first we need a program which allows us to write and compile C#/C++ code. We are using the Borland C++ Builder but as I’m a fan of open-source programs I’m training my knowledge using the Bloodshed Dev-C++ program unless I’m forced to use Borland.

Now let’s have a look at our first program.

The Code


#pragma hdrstop
#include <conio.h>
#include <iostream.h>
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#pragma argsused
int main(int argc, char* argv[])
{
     cout << "Hello world!";
     getch();
     return 0;
}
 

Copy and paste the code into your C++ program, compile and execute it. A console window should open displaying “Hello world!”. Press any key to close the window again.

Now as your program is working, let’s have a look at the code itself.

Detailed Explanation

#pragma hdrstop
[...]
#pragma argsused

These two lines hide possible error warnings in Borland. The program will even work if you leave them out.

#include <conio.h>
#include <iostream.h>

“conio.h” is a library required to create a program which runs in a console window. This “abbreviation” means CONsoleInputOutput.

“iostream.h” is a library required to allow the program to output streamed content, also it allows streamed input. This “abbreviation” means InputOutputSTREAM.

//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

The “//” allows you to add a single line comment to the code. We use the line “- – - -” to separate the includes from the actual code.

int main(int argc, char* argv[])
{
[...]
}

This function is the main function. Inside it you have every code you need to run the program. Later you will learn to create your own functions, so I stop here only stating that this function is always the last one of the whole program. Meaning: It has to stay at the bottom of the whole code.

As Slevi outlined in his comment, the “int argc, char* argv[])” is used to receive the arguments in case you start the exe via console e.g. “example.exe foo bar”. As this is already advanced coding I skip a more detailed description. I’ll come back to it in a later tutorial.

     cout << "Hello world!";
     getch();
     return 0;

Now we look at the actual code which allows us to display “Hello world!” in the console.

“cout” allows you to output any kind of data. In this case it is “Hello world!”, later you will also learn about other types of data..

“<<” is a shift operator which moves the output to the console screen. You could say said “cout” is the screen and “Hello world!” is moved to the screen by the “<<”.

“Hello world!” is a so-called string which is displayed in the console. That’s why it is required to wrap it with the quotation marks.

“getch()” is a function which waits for any kind of user input, basically it waits that the user is pressing any key to continue. We use it here to prevent the console from closing again right after displaying our “Hello world”. For the record, this is a solution I was looking for when I tried to learn C++ on my on a couple of years ago. All other tutorials on the Internet did not have this function in the code, leading to an instantly closed console window. Hopefully this tutorial will help other beginners to avoid my problem back then.

“return 0″ informs the program that the code has been processed and the console window can be closed, after the mentioned user input. It is not possible to avoid using “getch()” and use “return 1″ instead, as this one will also exit the program.

Wrap Up

Now we are finished and got our first program working, if you encounter any kind of problem, leave me a message and I’ll try to help you.

P.S. Feel free to play around and try different messages just for the fun of it.

Update:
I just had to add this note about getch():
The getch() function is a C function, but since I’m writing a C#/C++ tutorial it would be more appropriate to use cin.get() instead. It does the same but is the C++ variant of the command. Either method should work and I will get back to cin.get() in one of my next tutorials to make sure that any questions about cin.get() get answered.

So how do you edit and style your list?

Of course you are able to use almost any of the available CSS properties, like borders, background, font and so on.

A list without icons

Let’s assume you want to use the list to create a menu, but you don’t want to have the default list icons added by the browser, because it would break with the design. How do you remove the icons? With a tiny bit of CSS of course:

ul, ol {
list-style:none;
}

This code will remove any list style, leaving you a list without the list icons. It works for both types of lists, order and unordered. If you prefer using in-line editing, just add a style="list-style:none;" to the “ul” or “ol” tag and you are set.

A list with one of the default icons

Now let’s have a look at how we can use one of the many default icons. Please keep in mind that some of those icons are show different in different browsers. I recommend testing them before you use them.

Before we can set an icon, we need to know which icons exist. I took the time and compiled you a list:

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• lower-greek
• lower-latin
• upper-latin
• hebrew
• armenian
• georgian
• cjk-ideographic
• hiragana
• katakana
• hiragana-iroha
• katakana-iroha

And before you start yelling at me “How does those icons look like” just have a look at my example and try them all.

To add one of the icons you can use this code:

ul, ol {
list-style-type:liststyle;
}

Replace the liststyle with the name of the icon you want to use. Of course you can also use the in-line style style="list-style-type:liststyle".

Easy so far, isn’t it?

A list with an icon/image of your choice

Now let’s go a step further. I believe you can imagine that the default icons limit you in your design efforts. Fortunately CSS enables you to use an own image by using the code:

list-style-image:url(path-to-image);

Replace the path-to-image with the url to your image. For the image I use in my example the path would be:
http://www.ruelicke.net/wp-content/themes/ruelicke/images/feed-icon.png

You can use any kind of image, but depending on it’s size you need to play with the padding and font size to make it fit with the list.

Wrap up

Congratulation, you are now able to adjust the list style icon to your needs. You no longer need to use the default icon.

If you like it fancy, you could style the list as I did although I would never use that design. Of course I would never use that one on a site, but I think it is always good to play around with the CSS to get an idea about how it works.

Any questions left?

As I needed such a feature for a project of mine, I decided to write this tutorial to share a couple of techniques you can use for such an interesting form.

Form #1

The first form has the mentioned feature that removes the text in the input field as soon as you hit a key:
<script type="text/javascript">
<!--
function clear_input($input)
{
if (document.getElementById($input).value == "Name" || document.getElementById($input).value == "Password")
{
document.getElementById($input).value = '';
};
}
window.onload = document.getElementById("name-1").value="Name";
window.onload = document.getElementById("password-1").value="Password";
//-->
</script>

Put this code at the bottom of the page, replace the getElementByID values and IDs with the ones you are using, then add the event onkeypress="" to the input box you want to have using this feature. Inside the onkeypress="" you add clear_input('id of the input field');return true;.
For my example it would be for the “name” input field: onkeypress=" clear_input('name-1'); return true;"

The “return true” is a bug fix for some browsers which won’t clear the input field as we want it.

Form #2

This form will check the input data before it submits it:
<script type="text/javascript">
<!--
function check_input()
{
if (document.getElementById("name-2").value != "Name" && document.getElementById("name-2").value != "" && document.getElementById("password-2").value != "Password" && document.getElementById("password-2").value != "")
{
return true;
}
else
{
return false;
}
}
function clear_input($input)
{
if (document.getElementById($input).value == "Name" || document.getElementById($input).value == "Password")
{
document.getElementById($input).value = '';
};
}
window.onload = document.getElementById("name-2").value="Name";
window.onload = document.getElementById("password-2").value="Password";
//-->
</script>

As you see I’m using the clear_input() function again and added a check_input function. Add onsubmit="return check_input;" to the opening form tag and make sure you are using the right IDs in your script.

If everything is working, your form should behave like mine.

Wrap Up

I hope this tutorial gave you an idea or two on how to improve your form a little bit. An idea which just pops up right now is to combine the clear_input method with Ajax to provide search suggestions, if it is a search form. Or you add a check_mail variant which validate an inserted email on the fly.

There are many options. Do you know a special one and have no idea how to achieve it? Or do you want to share an idea or script? I’m happy about any kind comment!

I then decided to give this technique a try on my blog and we continued talking about it, which helped me to tweak my CSS code to make this “magic” happen. The code for this “magic trick” was posted as comment, but I think it is better to put it into an extra tutorial article although it is nothing special if you know how to use Cascading Style Sheets.

There are two methods to achieve the goal, I will tell you how to do it and mention the advantages and disadvantages.

First method

div.entry p:first-letter {
font-size:1.5em;
font-weight:700;
text-transform:capitalize;
}

This one will auto-add the “first letter of a paragraph larger than the others” effect, which saves you a lot of time. Unfortunately you are not able to not use it in an article. The effect will be always created. If you only write articles and it works for your design and style of writing, great!

In my case I have a problem when I post a story like my Soldiers vs. Jedi. So I had to look for an alternate way.

Second method

div.entry p span.c_letter {
font-size:1.5em;
font-weight:700;
text-transform:uppercase;
}

How do you enable the effect now?
You just have to wrap a <span class=”c_letter”> around the letter you want to capitalize and you get that effect. This will only work if the span is inside a paragraph:

e.g.:
<p><span class="c_letter">T</span>he first letter is huge[…]</p>

This method allows you to decide if you want to have a capital letter or not. However, it requires you to spend some time on wrapping the code around the letter.

So you need to see which method works best for you.

#1 Note: The first method will also edit your older blog posts, so if you don’t want to “auto-edit” them, you should use the second method.

#2 Note: Maybe you noticed the text-transform:uppercase; piece in the second method. It means that even a non-capital character will be shown as capital character. I added in case you could use it for highlighting a word without actually writing it in capitals. You may remove it if you don’t want it

I hope this tutorial was helpful for you. If you have any questions or need help with this, feel free to leave a comment.

Although I know JavaScript I don’t use it often because of a few reasons. So I’m using this “tutorial” to
1. refresh my knowledge about JavaScript
and
2. teach you the one or the other useful thing.

Let’s begin

For this “tutorial” you should have some basic understanding about HTML and CSS, later it could be useful to know PHP, but that’s some time later…

To use JavaScript in an HTML document you have 2 methods:

• Using an external JavaScript file.
• Having the JavaScript code right on the page.

Which method you use is up to you but at the end you need to use more or less same technique to include the JavaScript in the HTML page.
To embed a JavaScript you are using:

<script type="text/javascript" src="path/to/file"></script>

The above example is used when you have an external javascript file. Otherwise you will be using this code:

<script type="text/javascript">
<!--
...javascript code...
//-->
</script>


You place this HTML code either in the <head> or <body> part of the page, then you are ready to write your first Javascript script.

Hello World!

We want to write our first script and we want to execute it as soon as the page is loaded. The JavaScript event handler we need for this is onload() although we could also do it in a different way.

Our “hello world” script will bring up an alert box with the message “Hello world!”:
<script type="text/javascript">
<!--
function hello_world()
{
alert("Hello world!");
}
//-->
</script>

Note: If you are using an external file, just take the javascript inside the html comments and put it into the external file.

We got our first function and now we need to call it somehow. As I said already, we will be using the onload() handler.
To make sure that the code works as intended, you have to put the code in the <head> part of your HTML page.
Now add onload="hello_world();" in the opening body tag. Save the page and load it in a browser.
To have a comparison, try my “Hello world” alert.

The onload() handler is useful, but is often abused. I recommend you only use it when you have to. Same applies for the alert() message.

Better “Hello World!”

Depending on the amount of your JavaScript code, the page needs longer to load. If you put the code into the head, it will take some time before the visitors see any content of your page. It is recommended to put the JavaScript into the foot part of the body.
If you try it, you will see that onload() will not work, so we have to use a different approach:
<script type="text/javascript">
<!--
function hello_world()
{
alert("Hello world!");
}
window.onload = hello_world();
//-->
</script>

Now the script will be executed after everything on the page is loaded.

Wrap up and some hints

This is all I want to teach you for now. Have a look at w3school’s JavaScript Tutorial if you can’t wait to go on with learning JavaScript. Before you visit this page, please listen to my hints as these are based on my knowledge of coding nice, user-friendly websites:

• Never ever use JavaScript to open PopUps without informing the user before.
• Only use JavaScript if it increases the experience of the website.
• Try to avoid excessive use of JavaScript just because you can do that.
• Don’t use JavaScript to “link” to another page. It can break the browser history and result in a bad experience of the user.
• Never ever use JavaScript to resize the browser window of the user
• When using JavaScript, make sure that those who disabled JavaScript won’t miss parts of the website someone with JavaScript enabled would be able to see.

I know, if you read this list you will most likely not know how to create the mentioned effects. I suggest you keep this list in mind when I continue with my tutorial because then I will show you some of those things you shouldn’t do just for the purpose of showing it.

I hope you enjoyed this introduction to my JavaScript tutorials. If you want to be informed on the publish of new tutorials, subscribe to my RSS Feed or sign up for the newsletter.

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.

To define a variable in PHP you just need to use $ and a variable name: $variable.
You can use as variable name whatever you like, however you are not allowed to let it start with a number, like $1variable and there are also some predefined variables, about which I will talk later.

There are many types of variables, but for now we concentrate on 4 types (actually 5, but the fifth will follow in another tutorial).

So, which 4 types do we have?

string
e.g. $string = "This is a string";

boolean
e.g. $boolean = True;

integer
e.g. $integer = 123456;

float
e.g. $float = 1.234;

so, let’s make a script where can play a bit with those variables:

<?PHP
$string= "This is a string"; // String
$string_alt= 123456; // String
$boolean= True; // Boolean
$integer= 123456; // Integer
$float= 1.234; // Float

print 'The variable "$string" has the type of: '.gettype($string).'<br />';
print 'The variable "$string_alt" has the type of: '.gettype($string_alt).'<br />';
print 'The variable "$boolean" has the type of: '.gettype($boolean).'<br />';
print 'The variable "$integer" has the type of: '.gettype($integer).'<br />';
print 'The variable "$float" has the type of: '.gettype($float);
?>

Run this script and the gettype() function will tell you which type a variable has.
If you have a look at the output, you will see a mistake. Isn’t “$string_alt” supposed to have the type “string”?
Yes, it is supposed to be a string, however, PHP does not know that your number shall be a string. So how can fix this problem?
It is quite easy, just add (string) infront of it, so it looks like $string_alt= (string) 123456; // String.

Everything should be fine now, you could even turn the string back to integer, just add (integer) again:
<?PHP
$string_alt= (string) 123456; // String

print 'The variable "$string_alt" has the type of: '.gettype($string_alt).'<br />';

$string_alt = (integer )$string_alt; // convert to Integer
print 'The variable "$string_alt" has the type of: '.gettype($string_alt);
?>

What we did here is called “type casting” and it is always useful if you have script where you need to change the variable type to prepare it for a special function or whatever you plan to do with it. You can find a complete list of the type casting in the PHP documentation at the official website.

Type casting is not the only thing you can do variables. You can also add $variable1 at the end (or beginning) of $variable2:

<?PHP
$start = "The little brown fox ";
$end = "jumped over the green fence.";

$start_merge = $start;
$start_merge .= $end; // adds behind the existing content

print 'Start sentence: '.$start.'<br />';
print 'End sentence: '.$end.'<br /><br />';
print 'Correct sentence: '.$start_merge.'<br />';
print 'Correct sentence: '.$start.$end.'<br />';
?>

As you will see our sentence will be shown in different ways. So let us have a closer look at the code itself:
The “.=” means, that the variable which shall be added to another one will be added at the end of the other variable
The “$start.$end” looks, familiar, doesn’t it? I mentioned it in PHP Tutorial 101: Hello World! and the same behavior you see there also happens here.

Before I go on with some mathematical things we can do, I will tell you about the “//” I added to the code because I assume you are wondering what it means
The double-slashes only exclude a comment of the code. Beside the “//” you can also use “/* comment */” and “#”
The “//” comment will end either at the end of the line of code where it is placed; Everything on the same line and behind of the slashes belong to the comment.
The “/* comment */” starts at “/*” and ends at “*/” no matter if there are multiple lines of code or not.
The “#” comment behaves like the “//” comment.

So, as we have this explained, I’m able to use more comments in the code and avoid longer “outside of code” explanations

Now let’s do some mathematics!

With PHP (as with any other programming language) you are able to make all kind mathematic calculations. For this tutorial, I only stick to the most basic mathematic functions and refer you to the PHP Manual: Mathematical Functions

We will use the following script as a start for some calculations:
<?PHP
$a = 5;
$b = 2.3;
$c = -6;
$d = 100;

$ad = $a + $d; // Adds $d to $a
$da = $a - $d; // Subtracts $d from $a
$bc = $b / $c; // Divides $b through $c
$dc = $d * $c; // Multiplies $b with $c

print $a.' + '.$d.' = '.$ad.'<br />';
print $a.' - '.$d.' = '.$da.'<br />';
print $b.' / '.$c.' = '.$bc.'<br />';
print $d.' x '.$c.' = '.$dc.'<br />';
?>

We just did the basic mathematic calculations you and I think it is self-explanatory, so let’s have a look how we can get a random number, divide it by another random number and make sure the result is rounded to 2 decimal places, if it is a floating number:
<?PHP
$random_a = rand(1,1000); // get a random number between 1 and 1000
$random_b = rand(500,1500); // get a random number between 500 and 1500

$random = $random_a / $random_b;
$random_round = round($random,2); // rounds result to 2 decimal places

print 'First random number is: '.$random_a.'<br />
Second random number is: '.$random_b.'<br />
Result is: '.$random.'<br />
Rounded result is: '.$random_round;
?>

Of course there are way more things you can do, but I think this is enough for mathematics. I recommend you have a look at the PHP Manual: Mathematical Functions and play around because it is proved that you learn much more by the “Trial and Error” concept that any other Tutorial.
A tutorial is always a start, but you really learn something by doing it on your own. So use the time to the next tutorial by training what you have learned.

Update: Here you see a page with the results of the code used in this tutorial

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