Your First Web Page

March 09, 2008

Creating your first web page

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

Creating your HTML file

  1. Open your programming 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.

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.

Opening your HTML file in a web browser

  1. Start your web browser and go to File arrow Open File and select the HTML file you just created.

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 element 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 we'll start building your web page by adding new elements between the body tags.

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.