Navigation
Poll
Would you be an active poster if Ron's Guide had a message board?


Total Votes: 67
Comments: 20 — View
Past pollsPoll idea?
Rate Ron's Guide
Rate our resource at Bigwebmaster.com
Your First Webpage
This tutorial will get you all setup and will guide you through the process of making a webpage.

The first thing you need to do is get a place to write your HTML code. Open up notepad, wordpad, or whichever plain text editor you prefer. Now, save the file as firstpage.html or firstpage.htm and open it with your favorite browser. Now that you have that file saved, whenever you type in some HTML code, you can easily view what you've created by saving the HTML file and hitting refresh in your browser Smile

HTML is made up of tags, these tags are interpreted by your browser to display your webpage(s). The image below shows the structure of an HTML tag.

The structure of an HTML tag

The above is an image of an opening title tag. It is used to set the title of the webpage, which appears in the top left corner of the browser. Here is an example of it's use:

<html>
 <head>
  <title>My first webpage</title>
 </head>

 <body>
  Hi, welcome to my first webpage!
 </body>
</html>

The above is an example of a very simple webpage. Try typing or copy and pasting the code above into your page (firstpage.html) to see what it'll produce. Don't worry if you don't understand what all of the above code means, because i'm going to explain it right now Tongue

In HTML there are stand alone tags and there are non-stand alone tags. A stand alone tag is a tag that has no closing tag, it is just as it is. A non-stand alone tag has both an opening tag and a closing tag. All of the tags that you see in the above code are not stand alone tags.

The first tag we see is the opening html tag. It simply defines the HTML document. The next tag is the opening head tag. The head of the document is where we place all of the information about the document. Such as the title, meta information, javascripts, etc... Next, nested in the head, we have the title tag. As stated above, the title tag is used to set the title of the document, which appears in the top left corner of the browser window. Inside the title tag is the text that we want as our title, followed by the closing title tag, which tells the browser that we are done defining the title. Next, we close the head tag and open the body tag. The body tag is where all visible media, such as text, images, videos, etc. belong. Inside the opening and closing body tags is the text "Hi, welcome to my first webpage!" which you can see in your browser, if you try the code. Finally we have the closing html tag, which declares the end of the html document.

Does it make a little more sense now?

You should now have enough knowledge to at least make a simple web page like the one above and be able to point out the html, head, title, and body tags. Also, be aware of the different types of tags, stand alone, and non-stand alone.

Hope this tutorial was helpful to you Smile

Discuss Tutorial: Your First Webpage 12 Comments
Comment by Ron on Mar 16, 2004, 4:13 am
Please post questions or comments about this tutorial below. Smile
Comment by Purgatory Studios on Nov 18, 2004, 12:04 am
thx, that helps alot (the headaches) Laughing
Comment by Lava on Mar 25, 2005, 10:49 pm
Smile

If you open your browser isn't it just the yahoo/msn/aol or whatever homepage you have?
I don't get this.
Comment by Slaker on Jun 21, 2005, 12:09 am
Okay, open the file you made with your browser...
Comment by Will on Jul 2, 2005, 11:14 am
wow this actually makes some sence Laughing i neva thought i would understand it
Comment by engomar on Jul 11, 2005, 1:25 pm
thank you very match
Comment by kudduss on Aug 8, 2005, 12:40 pm
Hi This is very nice tutorial for the biggener like me. Many many thanks.
Comment by Maximus on Jan 1, 2006, 6:32 pm
Very thx its very helpful Cool
Comment by Grixti on Oct 24, 2006, 8:48 pm
add more stuff like how to add backgrounds and link colors other then what ther start off as. Angry Angry Angry Angry Angry Angry Angry Angry Angry Angry Angry Angry Angry Angry Sad :'(
Comment by Grixti on Oct 24, 2006, 8:48 pm
:'(

« Previous [ 1 2 ] Next »
Post a comment
Sorry, you must be a registered member to post comments.

If you would like to register, you can do so here.
If you already have an account, please login.