If I’m not working on an existing website, I like to think about creating a new one. Based on that, I thought it would be interesting to share my personal steps in creating websites, ranging from the first idea to the boredom of just maintaining the final page.

You can devide the whole process in 6 steps:

1. The Idea
2. Evaluation and Preparation
3. Creation and Testing
4. Reviewing and Optimizing
5. Release
6. Maintenance

The Idea

Before you can start your work you need an idea, if possible a good and unique idea.

If you have no idea, think about what would be useful for you and other people. Have look at existing pages and try to figure out what you would do different, or what you would add/remove to increase the user experience.

I don’t want to make you copy an existing page, just try to get an own idea based on an existing website.

Now get the idea on paper and we proceed to step 2:

Evaluation and Preparation

Use paper to arrange your idea. Make notes on what you’ll need when you start working on the new website.
Also, try to come up with a good name and after you got the name have a look for the proper domain. If you have bad luck the domain of your choice is already in use, so make sure you have a few alternatives at the ready.

Then have a look at the exact requirements for your page. Do you need a database? Will it be done using PHP, ASP or any other server side programming language? How much space and traffic will you need? Based on your answers to these questions you may look for a hosting company which offers what you need at a reasonable price (and with a good service).

Maybe you own already a website and intend to use your current web space for the new website. In this case have a look if you need to upgrade to meet the requirements of your new website.

Now get into details of the techniques used. Are there any open source / freeware solutions which can be used and may reduce your own development process?

I prefer writing everything on my own, but I slowly get myself to the point where I say “Why do I have to spent hours to code my feature X while said feature is already available for free?” Decide on your own if it is better to find an own solution or to use an existing one.

Creation and Testing

After you finished your preparation you are good to start writing the page. Usually it is better to have a design right from the beginning. So if you have already a design in mind, create the design before you start coding the back-end of your website.

If you have no real idea I suggest you create at least a developer design and while you are working on the page you also create the final design.

During your work on the website make sure you test it on a regular base or you may have a harder time finding the bugs in your code. I usually test my code as soon as one essential code block is finished. Depending on my speed I’d say I test it every hour.

Reviewing and Optimizing

Actually this runs hand in hand with the previous step, but I separated it to get a little bit more into detail about the meaning of “reviewing” and “optimizing”.

It is proved that when you are working on a website you will have additional ideas. Maybe you even decide to drop the one or the other part. That’s where the “reviewing” occurs:

• You learn that idea X sounded great but is not possible to implement.
• You learn that idea Y could be changed a little bit.
• You have another, additional idea to make your website even better.

While you are working on a site you may also learn new things about the coding language you are using. So it is natural that there are things you can (and shall) change to increase the overall performance of the page.

Last but not least, under optimizing I also understand “SEO”. Yes, it is a good idea to apply your Search Engine Optimization knowledge to the new website. The new site will definitely have a better start once it is released.

Release

Everything is working, there are no bugs left and the design is finished. I guess now it is time to allow the public access the new website.
When I’m releasing a new website, I tell friends about it. I also make posts on forums and if it fits, as comments on blogs. Sometimes I also write an article on my own blog to raise attention.

Additionally I submit the website to all major search engines.

Maintenance

Everything is done. The website is up and running. Only one thing remains: Maintenance.

Yes, it is probably the most boring if not annoying part but it still has to be done.

Any website needs small, regular updates as previously unknown bugs are discovered, parts of the website get broken or used techniques can be optimized. So here is a list of possible maintenance actions you should take care of regularly:

• Design Update – Any design gets boring after a while. So try to have a new design every 6 months. Depending on the page it may also be enough to change the design once a year.
• Bug Fixing – Not much to say about it. Just listen to any bug reports and get the bugs out of your code.
• Optimization – If the site seems to slow down, have a look if there is a section you can optimize. Also, if you learn something new, see if you can apply it to the website
• Updates – If it is new content or new features, see what you can do to keep your visitors interested

My list is far away from being complete but I believe I covered the most essential parts of the maintenance section.
If everything turned out well, your website should be up and running and hopefully you have many visitors. Who knows, maybe it becomes as famous as one of the other big sites on the Internet?

Wrap Up

These are my 6 steps. I hope they are somewhat helpful for those who want to create an own website but have no real idea about what the website could be. Keep in mind, these steps work for me and in the basics they reflect standard procedures all designer and programmer go through.

And how do you approach the process of creating a website?

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.

These days there are many browsers out there and of course you can test your page on them if you have the time. Even then there is the chance you missed one or two and then you are back at zero. Also, it is possible that a design doesn’t allow users with a disability to use the page.

So what to do?

First of all it is a good advise to use valid HTML and CSS. Also make sure you don’t abuse JavaScript, Flash and Gifs. If you are reading this article, I assume I don’t have to tell you about these things…

But how can you validate your HTML, CSS and Accessibility?

Well, I will tell you which tools I’m using to validate my websites. These tools are not perfect, but if you use them properly you make sure that they cover each others weakness and leaving you with a valid website at the end. Also, there are some things you can’t validate by using a tool. You need to know the guidelines for HTML, CSS and Accessibility (WCAG)

HTML Validation

My major validator is the official W3C validator. It is always up-to-date to the latest spec’s and allows you to either test a page directly if said page is online or you upload/copy the page to the validator. You can reach the validator from any location as long as you are online, which can be very handy.

Additionally I’m using my Firefox for testing my websites. I have two very powerful extensions installed:

• HTML Validator by Marc Gueury
• Web Developer by Chris Pederick

The HTML Validator by Marc Gueury allows you to validate the page inside the browser without the need to visit a validator page like the W3C validator. The extension has 3 algorithm to validate the page.

• The “HTML Tidy” algorithm is based on the HTML Tidy from W3C
• The “SGML Parser” is based on the SGML reference information for HTML
• The “Serial” uses both validator algorithms one after the other.

The first algorithm is recommended for all while the other two are recommended for professionals. I myself prefer the Serial algorithm, but I believe you need to test which one works best for you.

The Web Developer tool by Chris Pederick does not have a built in validator, but it allows you to easily check a page with the W3C validator. Also it allows you to easily disable scripting or it outlines your HTML elements. It has many more options and is also useful for validating your CSS or W3C.

CSS Validation

I‘m using the official W3C validator for validating my CSS code. It is always up-to-date to the latest spec’s and allows you to either test a page directly if said page is online or you upload/copy the page to the validator. You can reach the validator from any location as long as you are online, which can be very handy.

Additionally I’m using the Web Developer toolbar. It allows you to disable CSS if you want to. You can edit the CSS code and see the result without having to edit the original file and upload it again. You can even resize your browser window to test your layout for different resolutions.

Accessibility Validation

When writing a website I always rely on the HTML Validator extension. It tells you almost everything you need to know.

There are also online validators available, one of them you can easily access with the Web Developer toolbar. If it is not enough, you can always Google for other accessibility validators.

Wrap Up

Now you know which tools I’m using. I hope these tools will also help you. Or are you using them already? Do you know other tools you can recommend?

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.

Or as Michael Martin from ProBlogDesign.com described it in his article “Does Valid Code Help Your Blog?”:

The W3C is the internet’s daddy. They created HTML, CSS, and dozens of other specifications that govern the use of the technologies that makes the internet thrive today. Valid code is code which meets their guidelines, and can be tested in a validator, such as the HTML and CSS ones.

I don’t want to discuss if using valid code should be used in a blog or if it is actually helpful for a blog. To be honest, I had it in mind, but somehow ProBlogDesign.com beat me to it, which is actually helpful because I can skip this part

To sum Michael Martin’s article up I dare to say that it is useful to use valid code, or better: Web Standards, in a blog.
His reasons are all great, but I have to add one more reason why you should use Web Standards: chances are higher that your blog is accessible by all humans, especially those with disabilities.

Less known among the Internet users is the Web Accessibility Initiative (WAI) of the W3C. Although some webmaster and “webcoder” know and follow the Web Content Accessibility Guidelines (WCAG) put together by the staff of the WAI there are way more webmaster / “webcoder” who are not following these guidelines.

I’m aware that these guidelines are not a must have for a website, however I try to write templates and websites following the WCAG as closely as possible. I’m not perfect on this part and I know that my blog template still needs to adjusted to follow the WCAG, but I’m working on it and I’m using one of the many WAI validators.

So, why I am talking about the whole accessibility thing?

As you know, there are many different browsers out there. Most of them showing the nice designed content of your website, however, there are text-only browsers like Lynx. These users won’t be able to appreciate your nice layout, but they are able to either enjoy your website or just ignore it because of it’s structure. Have a look at your website without the usage of images and CSS, does the “layout” show up in an order which allows you to easily navigate through your page? If not, I’d guess that text-only browser user will ignore your website.

I’m aware of the fact that text-only browser users are a minority, on most page statistics they won’t even show up, but do you really want to loose the few percent of possible customers?

Aside the text-only browser users there is a minority which most people tend to ignore if not forget. I believe it is really sad and of course wrong.
I’m talking about people with a disability. Yes, believe me or not, there are people browsing the Internet who are suffering from blindness or they are deaf or they have epilepsy…I could go on, but I think you get the idea.

It doesn’t require much additional time to make your template more friendly for this target group. For instance, you can avoid using animated gifs so a visitor with epilepsy can enjoy your website. Also, you can avoid the excessive usage of Flash. I know, there are people who would like to lynch me, but be honest. Can you easily navigate through a flash animation without the usage of a mouse? Not really, additionally the animation could prevent the visitor with epilepsy to visit your website at all. Last but not least, (I’m pretty sure that I missed many examples) are the people with some kind of color blindness, like the Red-Green-Blindness. If you use a red-green template you should make sure that either the colors are ok for people with red-green blindness or that you have at least an alternate design available.

Everything I mentioned here is my personal opinion. I know that it can be difficult to maintain a accessibility friendly website and I’m also aware that many major websites like Amazon or Microsoft are not accessibility friendly, but maybe you can make a change.

Whenever I discuss this topic with other people, I hear many excuses for not following the WAI. In return, I always have a solid argument against the excuse.

Bad vs. Good – The Accessibility Discussion

• It will take more time to finish my site!
  Not really, if you follow the WCAG right from the beginning, you will be done at the same time as you would without following it.
• It will make the page more ugly.
  Sorry, but you are wrong here. Actually even the average visitor can benefit from the accessibility optimized website because of the clearer navigation and so on…
• Those disabled don’t have to visit my site and/or shouldn’t use the Internet.
  Ignoring the fact that this is really racist, you should keep in mind that one day you could also suffer from some kind of disability. Of course, it is up
• Major websites like Amazon or Microsoft are not following the WCAG either, so why bothering?
  True, but you know you could make a change? Just because “famous” websites are not following the WCAG doesn’t mean your website wouldn’t help to spread the word and encourage other people to optimize their own websites.

Of course at the end it is your own decision if you try to follow the guidelines or not. I myself will continue to optimize my website(s) into this direction.

What about you?

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