Making your first webpage

Five pretty simple steps to making your first page

There are some steps you have to go through before you have your own webpage on the internet. And there's often people who give up just because they don't know what to do next. Well, here's a step-by-step tutorial on how your idea ends up out there on the web. I suggest that you go offline while you go through this, and that you do it slow and learn from it.

1. The idea

You have to have an idea before you can start making a webpage, or else you'll end up with a page with lots of nice graphics, but really no content. So, grab a sheet and write down some keywords, don't write the whole text. Let's say that you want to make a home page. Write down some keywords about you, your hobbies and so on.

2. Writing the text

It's smart to write the text finished before you start the layout of the page. This is because you often get caught up in the HTML-tags and then pay less attention to the text. So, open Notepad (you'll probably find it by the Start-menu > Programs > Accessories > Notepad) and write the text (i.e. about yourself). When you're done, devide it into pharagraphs and headings, like you want it to be on the actual webpage. Then finally, save the text as me.txt

3. The basic HTML-tags

Okay, now we start writing these tags. But before you go on writing your own tags, there are some tags that you have to include wether you like it or not. So, open a new document in Notepad and paste the following text. (To copy the text from here, mark it and press Ctrl + C and in Notepad paste it with Ctrl + V.)

<HTML>
<HEAD>
<TITLE>The title of my page</TITLE>
</HEAD>
<BODY BGCOLOR="" BACKGROUND="" TEXT="" LINK ="" VLINK="" ALINK="">
<!- You make the actual page between here... ->

<!- ...and here ->
</BODY>
</HTML>

Now, hit save and call you file mypage.htm

Okay, let me tell you why you pasted these tags into your document. The <HTML> -tag tells the browser that it's about to display a HTML-page. Then there is the HEAD-tag (<HEAD>). Everything between this tag and the head closing tag on the forth line (</HEAD>) will be loaded before the actual page. In this case, we are only talking about the title of the page which is defined by writing it between the <TITLE> and the </TITLE> -tag.

Next we input the body-tag with some defenitions for the body. The BGCOLOR="" defines the background-color of the webpage. You do this by inserting a color-code between the " and ". Click here to see some colorcodes (at the bottom of this page).

If you would rather have a picture as background, leave the BGCOLOR empty and write the name of the picture-file in the BACKGROUND definition like this: BACKGROUND="me.jpg". The picture has to have one of these extensions: .jpg .gif or .png (the last one is rearly used and uses more disk-space.)

Make sure that the picture-file is in the same folder on your hard-drive as your page, or else it won't work.

Then, the TEXT, LINK, VLINK and ALINK is the following: Text-color, link-color, visited link-color and active link color. All require a color-code. If you leave one or all empty, they will use a deafault color.

The next tag is a comment and will not be visible on the webpage. This is beacause the browser ingores all tags that it doesn't understand. Then we tell the browser that the body is finished by using the closing body-tag and finally we use the closing html-tag to say that our webpage is done.

4. Working on the layout

Let's start making this page. First of all, open your document called me.txt in a new Notepad window and past the text about yourself into the mypage.htm between the two comment-tags. Save the mypage.htm again and let's open it in a browser. So, open your browser (probably Exlorer or Netscape) and when/if you're asked to go online, say no. Then, open the mypage.htm

When you open it, you'll see your text, but not devided into paragraphs and headings as yo've done in Notepad. Well, we have to do this by using different tags. To read more about this, take a look in the HTML-library under placement.

Now you're on your own in the quest for the best webpage on the net. Be creative and use the tags to your advantage (I don't know what that meant, but you have to admit, it sounded pretty neat.) You also have the HTML library to help you on your way, where you'll find most of the tags you'll ever need.

5. Sending your page into the net

We'll now you have this page that you want displayed on the net. So, have to you get it there ? And since this is the last step, is of course the most difficult (ironic, isn't it). Well, it's wrong to say that it's difficult, but it's very different from person to person (or from webpage to webpage if you'd like). And that's why it is difficult to give an exact explanation of how to get your page "out there".

This is really best discriben at the the ones who provide you with space on their server to make your own page. This is often the same people who provide you with the internet-connection. If aren't given such a service, there are places where you can get server-space for free. Check out this page to see a list of free web space providers.

Color codes

Here are some color-codes. These codes should be compitable with both Netscape and Explorer.

Yellow	Red	Blue	Green	Black	White	Purple	Pink
#FFFF00	#FF0000	#3300FF	#33FF00	#000000	#FFFFFF	#663399	#FF00FF

You can also try making your own color-codes my mixing numbers and F's after the #. But just remember that these codes may appear differently in another browser.