Your first web page

Creating your first web page

And now it's finally time to jump into the HTML coding and create your very first web page!

  1. Open your programming or text editor and create a new page.
  2. If your editor puts some preset code in there just erase it as we're going to use our own.
  3. Copy below code into your document and save it somewhere you can remember (if you installed WAMP in the previous tutorial you can save the file into your www root directory either as index.html or index.php, just make sure it's the only index file in there so it will show up when you type localhost in your browser).

XHTML 1.0 strict template:

<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>My first web page!</title>
  </head>
  <body>
    <p>Hello there ...</p>
  </body>
</html>

Viewing your web page

Our HTML code won't do much by itself and is pretty much just a text file. To see the web page it describes we're going to have to open it in a web browser.

  1. Start your web browser and go to File › Open File and select the HTML file you just created or type localhost in the browser bar if you have WAMP running and placed your file in the www root directory.

You should now see a page similar to this:

Your first web page
Your first web page

Analyzing your web page

First let me tell you that the code I gave you above is as super correct as it gets and follows the W3C XHTML 1.0 specifications to the letter. You can safely use it as a XHTML 1.0 strict template for all your future web pages.

Doctype:

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

This first line is not a real HTML tag, nonetheless it is required in every HTML document. This so-called doctype tells the web browser what kind of file it's dealing with. In our case it's a XHTML 1.0 strict file. These doctypes are set in stone and can always be looked up so please save yourself the torture of learning this by heart.

html element:

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

This is where our actual HTML document starts. The <html>...</html> element isn't all that interesting by itself. It just marks the beginning and end of all our HTML code. The xmlns attribute is required for XHTML documents, the other two are optional but it's good practice to include them.

head element:

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>My first web page!</title>
</head>

Next follows the head of our HTML document. Except for the title element which appears in the browser window, none of the head information is displayed on the page. The head usually carries information like language, character encoding, copyright information, page description and so on. The meta tag in our code is optional but should be included anyway as a backup in case the server is not providing this information or you're viewing the page offline.

body element:

<body>
  <p>Hello there ...</p>
</body>

This is where things start to get interesting. The body element holds all the content that will be displayed as a web page. In this case we have a paragraph element with the text Hello there ... In the following chapters you'll get to know more of these HTML tags you can use to build your web page.

Practice makes the master

The best way to learn how to create a website is the do-it-yourself approach. I suggest you try out all tutorial examples in your own page and play around with the code to get a better understanding of how things work.