Getting Started

The first question in most peoples mind when they decide they what to build there first web page is Where do I Start? The idea of starting such a project can be a bit daunting to anyone with no experience. Rest assured it is not as hard as you may imagine. On this page we will go over what you need to get started programming web pages today.

The choice of tools is largely up to the programmer’s tastes. There are a lot of tools that will do much of the code for you; however it is not always easy to get the results you are looking for out of these tools. Tools can range from simple to complex and from free to expensive. All of the examples you will find on this site can be easily completed with a simple and free text editor. It is important to note here that even if you do chose to use a tool to create your web pages it is still vital to understand the basics of web design to create and optimize your pages. A couple of the tools that you can use are Microsoft FrontPage 2003 and Macromedia Dreamweaver. For the following lessons, all you will need is a simple text editor such as Notepad, WordPad or TextPad. You can use about any text editor that will let you edit simple text files.

File Types

After you have finished making an HTML file using a text editor (a tool would do this for you), you must save it with a file extension of .html or .htm; both of these extension are used so that browser knows what type of file it is downloading when a link is clicked or the URL is entered into it. The following illustration shows how to save a file created in Notepad as an HTML file.

Change the 'Save as type:' drop down box to 'All Files', then enter the name that you would like to save the file as directly followed by the file type (.html in this example) into the 'File Name' drop down box. This process is the same in most text editors. If the 'Save as type' drop down box has a choice for .html or .htm file types then select one of those two, and you do not need to add the .html or .htm to the end of your file name.

HTML Tags

HTML tags are codes used to identify HTML elements as well as their appearance and format. They are always surrounded in angle brackets (ex. <TagName>). Almost all tags have a beginning and end tag so that the browser can see exactly what content the tag applies to. End tags begin with a slash (ex. </TagName>). So, an html tag pair would be:
<TagName>content</TagName>

HTML Page Setup

HTML pages require a few common tags. The first is one of the unique cases that I mentioned in the HTML Tags section which has no ending tag. This is the DOCTYPE tag which tells the browser what type of HTML page it is interpreting. The browser uses these doctypes to ensure that the HTML file is in the appropriate form for that doctype. There are quite a few to choose from and most pages work without including one at all, but it is good form to include it. I will only discuss three of the most common here.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This is the HTML 4.01 Strict doctype. As the name implies, it strictly enforces the structure of the HTML page. It does not allow deprecated elements and attributes (tags marked for extinction), frames and link targets.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This is the HTML 4.01 Transitional doctype. This doctype allows all HTML 4 elements and attributes including those not allowed by the HTML 4.01 Strict doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
This is the HTML 4.01 Frameset doctype. This doctype is the same as the HTML 4.01 Transitional doctype, but should be used for pages that use frames.

The next part of the page just below the doctype is the <HTML> tag. The HTML tag encloses everything on the entire page, it begins at the top of the page, and ends on the very last line.

Two important tags that go within the HTML tag are the <head> tag and the <body> tag. The Head tag primarily holds the <title> tag which holds the page title. The Body holds everything else, and you will be doing most of your programming within the Body. The following is an example of an empty HTML page with all of these structural tags included.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
     <head>
          <title></title>
     </head>
     <body>
     </body>
</html>

Note the indentation, while it is not required, it is recommended and helps to keep your code much more readable.

Viewing a Page After Your Have Created It

The process of viewing a page that you have created is very simple. All you need is a browser such as those listed on the What is HTML page. Just locate the file on your computer and double click it to open it with your default web browser. We will get to try this in the next section.