Jonathan's World

Tutorial#1 - How to build a Website

So, your interested in building a website. Well, you've come to the right place.This tutorial is an explanation on how to design a website on the beginner's level. Whaty you are seeing is about 3 years work of practice, but don't worry, your probably a genious and can learn it.

So, let's stop the jabbering and get to work. First of we need the tools to be able to make the website. Don't panic! It isn't anything that is not already on your computer. What you'll need are the following.

1. Microsoft Notepad or Wordpad(for writing the code) 2. Microsoft Explorer,Netscape Navigator, or any program you use to veiw the internet. (that's for seeing your page completed.) 3. The ability to read and write english. (You've got that, right?)

Alright, you got all that? If you don't better look around your computer for something to be able to type in that is a simple text editor. And you are going to be using a computer program you use to get on the internet. That's it. No, fancy programs or expensives tools. Just that. :)

If your ready, continue on.

STEP 1

First open a text document and then type in this order:

<html>

</html>

Alright, what you just did is created an order that will tell your internet browser that this is a webpage. the HTML acronym means Hyper Text Markup Language,The Language of the Internet. Between these tags will go ALL the instruction you will learn in HTML. Now, in the future if you will go farther and learn XHTML (note the X in front), then there will be tags on the outside. Don't worry about it now.

By the way, everything you put between < and > are called tags! From now on I will be referring to the things between < and > as tags.

STEP 2

This next step will be adding the <body> tag and the tag to your document. I'll explain the meaning of each as I go. Let's first start with the <body> tag.

The <body> is the order for the internet browser to say that the rest of the stuff between <body> and </body> is the text of the website (plus pictures and what not). So, they go in like the following:

<html>

<body>

</body>

</html>

DON'T forget to put a closing tag. That's the duplicate tag with / added. That tells the browser that this part of the page is done. You can only have ONE <html> and <body> tag. Remember that!

The next tag is the tag. This tag is used to state the font of the website. Do yo know what a font is? To save space, just click here for the defenition.

Okay, you now know what a font is. Let's continue with your great website. Can you guess where the tag goes?

<html>

<body>

</body>

</html>

If you guessed like it is above, then CONGRATULATIONS!!! You're figure out how this is going together.

Now that you have the font tag you are probably wondering, "how do I tell it what I want? " Well, that information goes inside the tag as I'll be showing next. Move on to Step 3. :)

STEP 3

Adding the stuff in to the font tag to tell the color, size, and font to use, is called "adding the instructions". This goes INSIDE the tag. Make sure your not putting it in the closing tag. It won't work if you do. Okay, for teaching purposes we are going to make our website font blue words with a "Times New Roman" font. The instructions are as follows:

Color="the color you want"

Size="size you want"

Face="font you want"

Did that make sense? I didn't think so. Let me put it in to context to show you visually.

<html>

<body>

</body>

</html>

See that? I also was an idiot and forgot to tell you that you could do that with the Body tag too. Instead you use the instructions:

Bgcolor="color"

Bgcolor means background color. In this case we are making it red. (Weird website,huh?)

So, we have the following as:

<html>

</html>

Now, you have the main building part of your website completed. The full body of the site is complete and now all you have to do is add content. Easy, wasn't it?

Now, don't panic, I don't plan to just drop you right here and not continue. That's mean and I'm not a mean guy. Let's continue on with a couple of new tags.

STEP 4

Oooh, you made it this far and want to learn more? I congratulate you. Don't give in. Now, we are going to learn how to add text and change the different size with ONE tag order! (and I think it's the simpilest there is in HTML coding.)

Alright, here we go. The new tag is <h1>. It is the letter H with the number one right after it. (just in case your computer makes the one look like the letter L.

This is called a Header tag. It sizes the words between the Opening tag and the closing tag a certain size. You insert them like this in your website. It must be AFTER the <body> tag.

<html>

<h1> MY WEBSITE</h1>

</html>

You see that? There are also more then one <h1> tag. There are <h1> to <h6>. Each is smaller then the first. 1 being the largest and 6 being the smallest. Experiment with them.

This tag is usually used in making the website have a front page. A lot like the words "HOW TO BUILD YOUR OWN WEBSITE" that is on top of THIS page that your veiwing.

Alright, let's get on to the content, what you want people to read.

STEP 5

Alright, you want to add content in to your website. Good, that's what will make or break a website (as in people veiwing it, not physically being broken. Just to clarify)

You can do many things with text. Okay, let's take the paragraph below I wrote and work with it to get it inside the webpage.

You can either start with the same text file or open a new. Remember to re-launch a new one. Don't select file and then new. Come to think of it, you just better save your work now by clicking File-->save as --> index.html

Make sure you get the .html extension. Index.html. If you used wordpad then you may have it look like this index.html.doc. Get rid of the .doc.

Saved? Good. Let's continue. Here is the sentence:

Hello, this is my new website I'm building by following the directions of Jonathan Snyder

Which can be found on his personal homepage at www.jonathansworld.jtworld.net. I hope you like it because it's my first.

Okay, got to text? You can paste it in the text editor now and we can get to work on editing it. First of all we'll use the paragraph tag. This will turn what ever text in the middle of the tags in to a paragraph. The tag is as follows: . Simple huh? So you would do this by dividing text.

Hello, this is my new website I'm building by following the directions of Jonathan Snyder,

Which can be found on his personal homepage at www.jonathansworld.jtworld.net. I hope you like it because it's my first.

That willl turn it in to a paragraph. Okay let's proceed down and let's Italicize my name. Do you know what that is? Okay, this is italics and you can use this between the proper tags. Okay?

Can you guess the tag? If you picked then you are correct. It works the same way as the tag. Let's Italic my name.

Hello, this is my new website I'm building by following the directions ofJonathan Snyder,

Which can be found on his personal homepage at www.jonathansworld.jtworld.net. I hope you like it because it's my first.

This will make Jonathan Snyder look like Jonathan Snyder. There are two more tags to. The tag and the tag.

The tag stands for bold. It make it stand out more then the rest. Let's make homepage look like homepage. Put the word between and

Hello, this is my new website I'm building by following the directions ofJonathan Snyder,

Which can be found on his personal homepage at www.jonathansworld.jtworld.net. I hope you like it because it's my first.

And the tag that is underlining. Let's place that at the word personal. You should be able to do it now.

Hello, this is my new website I'm building by following the directions ofJonathan Snyder,

Which can be found on his personal homepage at www.jonathansworld.jtworld.net. I hope you like it because it's my first.

Okay, you did it. We just formatted the text and made it look the way we wanted. (or I wanted. You've got to listen to me for this tutorial.<grin>)

Alright, move on to Step 6. Linking pages.

STEP 6

Okay, linking of pages is slightly more difficult then what we were doing, but you made it here so I'm not worried about it. Let's get going.

A link is called a Hyper reference. Get that? Hyper Reference! They point to URLs.

A URL is another name for a website. Like www.yahoo.com and www.google.com. The Hyper Reference points to them.

They look like this: <a href="aboutme.html"> there closing tag is </a>. They go in to the webpage like this. (NOTE: They can be placed anywhere in the webpage. I'm placing it up at the top so it's like a button.

<html>

<h1> MY WEBSITE</h1>

</html>

Okay, you see that I put text between the tag and the closing tag. These words will be turned in to a blue clickable button like <a>this</a>. This will send you to a webpage called mypage.html. (We haven't built one so it won't work, but if you had one it would.

You can link to a website that is not with you but somewhere else. To do that you change the tag to look like this: <a href="http://www.yahoo.com">.You MUST make sure that there is http:// in the link or the page will look for a webpage yahoo.com in your folder.

Do you remember when I said that the link can be put anywhere in the page? Well, let me get you the example. Get that paragraph we worked on and paste it in to your webpage below the Link we put in.

Like this:

<html>

<h1> MY WEBSITE</h1>

Hello, this is my new website I'm building by following the directions ofJonathan Snyder,

Which can be found on his personal homepage at www.jonathansworld.jtworld.net. I hope you like it because it's my first.

</html>

The text is now in your website. Okay, save it so we don't loose everything…Saved? Go and save like your teacher said. <grin>

Okay, saved and ready. Now do you see my website link I put in? www.jonathansworld.jtworld.net? Well, we are going to make it clickable by putting a hyper reference tag in your website. Since this is and outside website you are going to need to put http:// in front of it.

Do it like this:

<html>

<h1> MY WEBSITE</h1>

Hello, this is my new website I'm building by following the directions ofJonathan Snyder,

Which can be found on his personal homepage at <a href="http://www.jonathansworld.jtworld.net">www.jonathansworld.jtworld.net</a>. I hope you like it because it's my first.

</html>

Okay, now the link will take you to my homepage.Cool right? Okay, move on to Step 7.

STEP 7

Alright, we got the website text and all the tags in. Our website is looking pretty good, don't you think? (I sometimes think it looks messy, but it still works) <grin>

Alright, in this step we are going finally veiw our website for the first time. Save your file and make sure it has a .html extension. Something like index.html. Once you save it go to the file and click on it. Your web browser should pop up and your website should look like the link here. (<--click the link)

Do you notice everything is all in the left corner? Well, we are going to make the MY WEBPAGE be in the center. Do you know how to do it? You use the <center> tag. <grin>

You place it in like:

<html>

<h1><center>MY WEBSITE</center></h1>

Hello, this is my new website I'm building by following the directions ofJonathan Snyder,

Which can be found on his personal homepage at <a href="http://www.jonathansworld.jtworld.net">www.jonathansworld.jtworld.net</a>. I hope you like it because it's my first.

</html>

This will center the MY WEBSITE text in to the center of the screen. You can center any text you wish and unlike the <html>, <body>, tags, you can use the ones I taught you any time and as often as you wish.

STEP 8

Okay, this is the step you should create a couple more separate websites and link them to your index site like I did up at the top with the Hyper reference tag. This will make a bunch of webpages together.

If you did this you should have your website completed and all the content in them. Congraluations, you just built your own website.

FINAL STEP

Now, you to get them on the internet so anyone in the world can veiw them is a separate thing, but I'll discuss it. First of all, if you are a minor you must get your parents permission to do this. I strongly recommend this. If you are an adult, then it's on your own head. If your parents have any question, I am available to answer any questions you want. Honest.

So to upload you need what is called Server space. That is a computer that is hooked to the internet and you can put your files on it. (i.e. your webpages)

They usually cost money if you don't want them to have advertisements added, but if you don't mind advertisements you can get free webspace at www.geocities.com and www.angelfire.com. They have a signup process and so forth. Just select the Free web plan.

Okay, this is getting harder to explain, but what you will do is go to the filemanager and then hit the upload files button. You browse your computer, select your webpages and then hit the upload button. The computer will take your files and place them on their server.

Then you will have your website up. Depending on where you get the free webspace from you will get a different address. If you went with Geocities (which I am more familiar with) then your website would be www.geocities.com/yourID/index.html.

I'm not so sure with Angelfire.

ENDING

Well, that's it. You have just designed your very own website. This has been on the beginner's level. There are A LOT more stuff that I haven't covered because it would overload your mind. Get all the tags I taught you working and if you ready you can research more on the internet. I plan to write a Intermediate and a Advanced tutorial, but that'll be awhile. These Tutorials take a lot of preperation.

So, enjoy yourself and when you build your pages please send me the link so I can veiw your work. I love help people and seeing them being successful.

Now, if something doesn't work for you or you just don't get it, don't hesitate and email me. I am very friendly and don't mind you emailing me with questions. (you could send me a hundred questions and I'll gladly answer them, just with that amount, it'll take some time.<grin>)

You can email me at jtworld@jtworld.net.

HOME