Creating a Simple WebSite

You need two things to build a website: a browser and a text editor (I recommend Firefox and Notepad++).


Here you can find more free resources that can help you create your website.

So, open up your text editor and let's start building the website.

For those how uses Notepad++, don't forget to change the language to HTML. (Menu->Language->H->HTML).

On the first line we have the opening tag for the webpage.

On lines 2 and 4 we have the > tag, the start tag and the end tag. This tag contains the meta information, which describe the web page. To find more about these, see meta tags in website optimization.

The tag that is on the line 3 is the text you can see at the top left corner of your browser (the name of the page).

We created a table on line 6 for the alignment of the website in the browser. We are going to center the website like these:

The page starts with the table on the 7 line. In this table we are going to create the website's header, menu, content and footer. This table will be only 70% of the browser's width.

The green text on the 8 line is a comment. We use comments to make the code more readable. A comment as you can see start with .

This web page is built of a table that has 5 rows and 2 columns. So the first row, the tag on the 9 line to 15, is the header of the page.

colspan="2" on line 10 tells the browser the number of columns that a cell should span. That number being 2 here.

On the 12 line we have an image which is the logo of websites, and because on most websites, you can click on the logo, and it will take you to the first page, we put this image inside a link tag .

On lines 17 and 41 are the rows that separate content from header and footer.
These rows have blue background which is given by the attribute bgcolor.
This attribute has the value #0000FF, which is the hexadecimal color code.

As you can see from the code we have two columns( two ). A column for the menu and the other for content.

The menu starts on line 21 and end on line 29. We create the menu with an unordered list.

The content of our web page is located between lines 32 and 37.
For the content we used tags like

which is for paragraph,
a line break and   (space)  which is an entity that makes part of the ISO 8859-1 symbols and mean "non-breaking space".

And because you will need to know more about entities when you create your website, here is a link that you can save.

The footer is created of a row and two columns, it starts on line 43 and ends on line 49.

On lines 46 and 47 is a paragraph with the copyright text, which had been centered with the attribute "align".

On line 50 are the closing tags for the tables that started on line 6 and 7.

Here is the complete version of My First WebSite.rar

I hope you understand what are the basics in building a website.

If you want you can view a version in which we use css of this simple website.