So you want to learn to create a basic webpage? Well you are in luck because creating a webpage is some of the easiest “programming” you will ever do.

HTML is very easy because it is simply typeing and to add formating you will just add “tags” around the text you are typing. Everything you need to create a webpage come standard on any personal computer you buy. All I use when creating a webpage is NOTEPAD.EXE and Internet Explorer.

So lets start at the beginning, open NOTEPAD.EXE on your computer and the first thing we need to learn is what a “tag” is. A “tag” is some text or word that the web browser (i.e. Internet Explorer) understands. 90% of all tags have an open tag and a close tag. For a quick example I will show you the first tag that you need to know and that is the < HTML> tag which is placed at the very beginning of a webpage so that the web browser knows that it is looking at a webpage. The close “tag” I mentioned earlier is going to be all closeing tags will be the opening tag except with a / preceding the word or text. So the HTML tag should be placed at the top of the page before anything else and then the closing HTML tag so be at the very end of the page to let the web browser know that we are done with the web page. The next tag will be the < HEAD> and the tag and this tag is normally used for more complicated code that we are not going to get into right now but what we learn between these two HEAD tags will be the < TITLE> and tag which will change the title bar at the top of the window what whatever you typed between the two TITLE tags.

Ok so is your head spinning yet? Hopfully not but the pictures below should give you a better look at where we are.

Here is what we have typed into notepad:

Here is what it looks like in Internet Explorer:

Notice the title bar at the top of internet explorer displays what we typed in between the TITLE tags.

So now you know the HTML, HEAD, and the TITLE tag, well this next tag you will learn is where pretty much everything else in a basic webpage will go. This is the < BODY> and tag and within the BODY tag we have a couple of statements called attributes. Attributes are inserted inside of the BODY tag to specify certain things. BGCOLOR=”red” is an attribute that will make the background color of the entire webpage red. Some other color attributes are TEXT=color (color of webpage text), LINK=color (color of links), VLINK=color (color of visited links), and ALINK=color (color of hovered link). Any of these attributes defined within the BODY tag will change the way the entire webpage looks. Lets take a look at how our document should look now in notepad form and in webpage form.

Here is what we have typed into notepad:

Here is what it looks like in Internet Explorer

Now we can see what the BODY tag attributes have actually done to the webpage

There are two more items I would like to cover in this article and that will be hyperlinks and images. I think we will start with links and the tag for links is < A> and but with a link there is one attribute that has to be included for the link to work properly which is href=website to take them too then before you close the A tag you include the text you would like to be the hyperlink (i.e. “Click Here”.) That is really all there is to create a hyperlink in a webpage, pretty simple isn’t it, don’t worry with practice it will get even easier. Next will be displaying images on a webpage. The tag for images is the < IMG> tag and now you may have noticed that I did not include a closing tag. No I am not going crazy there actually is not closing tag for the IMG tag because all of the information is included within the tag attributes. For tags that do not have a closing tag we will just include a / before we do the >. The IMG tag has a couple of different attributes but I will only cover a couple of them in this article. The first and most inportant tag in the IMG tag is the src=location of image attribute becuase it tells the webpage where the picture is. With out this attribute the web browser would obviously have no clue where to get the image from so it would not be able to display it. Most of the time images don’t display on a webpage is because the src= is not pointing to the correct direction. Another two attributes of the IMG tag is width=width of image in pixels and height=height of image in pixels and as you probably guess these attributes can make the images a certian size on your webpage. The last attribute I will include for the IMG tag is ALT=”whatever text you want“. The ALT attribute stands for alternate text which is text that will display if the image cannot load and text that will display if the user hovers their mouse over the image. That is pretty much is for the IMG tag, just like the A tag it is pretty straight forward and simple.

Now that you have all this new HTML knowledge jammed into your head lets take a look at out notepad document and our webpage and see how they have turned out.

Here is what we have typed into notepad:

Here is what it looks like in Internet Explorer:

Well we have covered the very basics in HTML and webpages and this is enough knowledge just to get your feet wet and hopfully excite you to move forward into the world of web design. I hope you have enjoyed reading this article as much as did writing it.
There are even some companies that provide software to help you generate content rich sites like SiteBuilder Elite and Content Website Builder.
If you have any questions or comments please feel free to email me at MWalton@mikenetpc.com