Creating your first Web page can seem very difficult. In fact, it is rather easy with a little of method.

Let’s be clear, however, I am not here to teach you how to use a word-processor software or how to master the basic functions of your computer. In short, I will not take you for dummies and I will focus only on the Web Design.

That being said… let’s work !

Switching from a .txt file to a .html file

Start by creating a simple .txt file, for example index.txt, then rename it to change its extension to .html. You get a file named index.html.

html-file

It’s cute and all, one can even say that it is an (X)HTML file, but it is not “valid” and different browsers may interpret it with many errors if you don’t help them a little. In short, we need to insert the so-called DOCTYPE to help the browsers display your web pages correctly.

Choosing the Right DOCTYPE

There are many DOCTYPE. The most common are: HTML 4.01 Strict DTD / HTML 4.01 Transitional DTD / XHTML 1.0 Transitional DTD / XHTML 1.0 Frameset DTD / XHTML 1.1 Strict DTD. Which to choose?

Without going into details, it is better to choose one of the Strict DOCTYPE since it is these that will teach you the cleanest and most up to date way to code. Your choice will therefore be on the HTML 4.01 Strict or XHTML 1.0 Strict.

Each DOCTYPE has its partisans, its advantages and shortcomings. Finally, it is difficult to recommend one over the other. XHTML 1.0 Strict is a little more used and will therefore probably be more useful than the HTML 4.01 Strict. In short, I will teach you to program in XHTML 1.0 Strict DTD.

Good to know !

Since XHTML 2 has been (thankfully) sentenced to death, the future of Web Design is intended to go through HTML 5 around 2010. Despite what its name suggests, HTML 5 will offer a great freedom of choice for the syntax of the code. Thus, you’ll be able to code in HTML 5 while retaining the clarity of XHTML 1.0.

Insert DOCTYPE in your .html file

Turn words into deeds and insert the DOCTYPE in your .html file. It’s a very simple thing to do:

  1. Open your index.html file with your favorite word-processor software (I strongly recommend you Notepad + + if you are using Windows).
  2. Copy the following code and paste it to the beginning of your file:
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. Baaaa-damm ! It’s done. Easy, isn’t it?

Insert Important Tags

Your current file contain only the DOCTYPE statement. We will now add the most important tags:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>My first web page</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

</head>

<body>

</body>

</html>

It seems a lot to learn at once? Do not fear, this little bit of code will soon be as familiar as your bathroom or your old pair of sneakers.

Insert and view the contents page

Take the code you just copied. Now, insert the title of your site inside the <title> tags.

<title>Woobzine. Webdesign and Wordpress for Noobs</title>

Insert the content inside the <body> tags.

<body>

This is the content of my first Web page, and my first step on the path of Web Design.

</body>

You must get the following code:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Woobzine. Webdesign and Wordpress for Noobs</title>

<meta http-equiv="content-type" content= "text/html; charset=utf-8" />

</head>

<body>

This is the content of my first Web page, and my first step on the path
of Web Design.

</body>

</html>

Save your index.html file and close your word-processor software.

To view the result, simply open the file you just created with your favorite browser (hopefully Firefox 3).

sreenshot-first-web-page

Conclusion

Creating a Web page is really easy. You don’t even need to learn the code by heart as you begin your project by making a simple copy and paste.

In the end, you just have to remember the importance of DOCTYPE and the function of a few different tags.