Creating Your First Web Page

Posted in HTML | Posted on 21-02-2009-05-2008

In today’s world you see it everywhere you go.  You see it on TV, on magazines, newspapers, billboards, and you are actually experiencing it right now.  What I am talking about?  I am talking about websites.  Today, everybody has a presence on the Internet.  If you watch TV, you are most likely to see in a commercial a www.com.  The possibilities to communicate over the Internet seems to be endless.

What you will find out is that there is one thing in common all websites share, HTML.  HTML is the code that displays what you see on the screen (browser).  With HTML you can display paragraphs, headers, images, and so on.  Take a look at the HTML code for this site or any site:

  1. On your browser, click view.
  2. Then click source or page source (depending on what browser you are using).

In case you are wondering, HTML stands for Hyper Text Markup Language.  If you would like to know the history and technicalities of HTML, I recommend visiting the HTML Wikipedia page.  Don’t worry if you do not understand the content.  After you learn some basics, it will make sense.

Now there are numerous programs on the markets such as Adobe Dreamweaver and Microsoft FrontPage that lets you create web pages very easily.  You do not necessarily have to know HTML to use these programs.  These programs are often referred to as WYSIWYG programs.  WYSIWYG is an acronym for What You See Is What You Get.  These are good products, but there might come a time when you will want to write the code yourself.

With all that said, let’s get busy.

What we need to do first is open Notepad or any other text editor. If you can, avoid using any word processing software such as MS Word.  The reason being is that they are not really meant for HTML code.  Your web page may not display correctly with them.

To open Notepad on Windows:

  1. click start
  2. click programs
  3. click accessories
  4. click notepad notepad

Now simply copy this code in your notepad or type it.   I recommend the latter.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>My First Page: Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Now save the file:

  1. Click File
  2. Click Save As
  3. Click MyDocuments
  4. Create a new folder and call it “WebPages”
  5. Open your new folder called WebPages
  6. Change the file name to HelloWorld.htm
  7. Click Save

save as

Now to see your web page, open up a new browser:

  1. Click File
  2. Click Open
  3. Click MyDocuments (Depending on your system settings, you may have to double click for these last steps)
  4. Click WebPages
  5. Click HelloWorld.htm

Understanding The Code

HTML consists of tags.  Tags are the codes within the < > characters.  A tag starts with <> and ends with </>.  Even though we are suppose to be learning HTML, all the examples in this site will be in XHTML format.  XHTML is a newer version of HTML.  It places emphasis on writing cleaner code.  Don’t worry if you don’t understand what I am talking about.  You will understand in a minute.

First tag is the <!DOCTYPE:
This line tells the browser what version of HTML you are using.   We are using XHTML1.0 Transitional.  In a future tutorial, we will go into this more.

Next we have the <html></html>:
Here we start everything that is going to be a associated with this particular web page. When we reach the end tag, the page has ended.  The attribute associated with this tag is for XHTML compliance purposes.

Next is the <head> tag with a <title> tag nested inside:
The head tag can be used to provide information about a web page. In this case we are using the title tag. The title tag is what is displayed at the top of the browser.

Next we have the <body> tag:
Within this tag is all the content that we want to display on the browser screen.

Finally in this example we have a <h1> tag:
This tag simply outputs our content in a header format.

Final Word

By taking a look at the code, you can see how the tags are all nested within each other. <h1>ends with </h1>, <body> ends with </body>, <html> ends with </html>.  You can also see that all of the tags are in lowercase letters.  This is what is meant when we say clean code.

Good job on creating your first page!