Title: Chapter I- Making a website
Program(s): Uhh...
Description: This tut will teach you basic HTML
Written by: © Nicolette

So, how exactly do you make a spiffy webpage? Welcome to the first chapter of Making a website where you'll learn the "must-knows". But first, if you look at the title of this, which is making a website, you will realize that this is not about owning a website. I will make one about that later. Let's start with the vocab first:
URL=Uniform resource locater
HTML=Hyper text markup language
CSS=Casading style sheets

For this first chapter we will be focusing more on HTML. HTML is basically what the web is made of. But first you need to know what a URL is. A URL is something that tells the browser where to go. For instance, when you type in NeoHideout's URL it would be http://neohideout.co.nr. The code for a page is created in an editor. Most computers have editors such as notepad on there already, but if yours doesn't, try HTML kit.

To open up notepad go to Start >> Programs >> Accesories >> Notepad. To download HTML kit, look it up on the infamous Google :D. Great, now you are ready to get started :D.

Every webpage code starts with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body>

And ends with:
</body> </html>

A link is something the targets to another page (which you probably know by now). The basic code is:
<a href="URL HERE">What you want your link to say</a>

To make the link open in a new window you have to target it somewhere by using a tag. So it would be like this...
<a href="URL HERE" target="_blank">What you want your link to say</a>
Which refers to the frames chapter :D. IMPORTANT: All URL's should start with

http:// to tell the browser you are going to a fresh new place, so if you don't add it, the link you put in will continue from the URL of the page you're currently at :D.
See where it says target="_blank"? That's the target tag. Just remember that :D.

To make an image show up on your page you have to get the URL of the image by right clicking and going to "Properties...". Copy the URL it gives you from there. Then enter it in this code (you will memorize it soon):
<img src="URL HERE">
If you want to resize the image, smaller or bigger, use this code:
<img src="URL HERE" width="WIDTH HERE" height="HEIGHT HERE">
Where it says WIDTH HERE enter the width (in pixels) and where it says HEIGHT HERE enter the height (also in pixels). Usually these types of codes can take in any add-in such as width and height, all you have to do is lala="lalala" (of course replace the lalala's). So if you wanted a border, all you have to do is add the border tag, which is

border="1". You can change the 1 to any other number to make the border thicker or thinner.

Now it's time to join the link and the image code together! If you want to have an image link to somewhere else, here's your code:
<a href="URL HERE"><img src="IMAGE URL HERE"></a>
As you can see, the image code is in the place where you would normally put text.
For some odd reason, when you link an image to another place there's a border added. To get rid of that ugly blue border, add the border tag you see above and put it after the

<img src="" Be sure to add a space between them. Change the number to 0. And if you want to change the width and height, of course, insert those tags :D.

To make the link open up in a new window, use the target tag and insert it after the

<a href="URL HERE" (again, remember to add a space).

So how exactly do you make a break? This is very simple and handy when you make a list. Pressing the return or enter key will not work, so use this code instead:

Here's an example:
Before(I didn't add the break code between the "Here"s):
Here Here

After (I added the break code in between the "Here"s):
Here
Here

Got it? Get it? Good. To make a new paragraph use this code:

Example:
AHH I want a new paragraph!!!! *inserts code*

There we go :P

More codes!
Center
Put

<center> before the thing you want to center and </center> after the thing you want to center.

Line/Divider
To make a line just use this code:

<hr>
The web will modify it's size so it'll fit your page by itself. Example:

Bullet Points
Not much to say about this one XD. But it's pretty handy. Use

<li>

Textarea
Textareas are the things that are used a lot in this tutorial! They are for showing codes. To make one, put

<textarea> before the thing you want to put in a textarea and </textarea> Pretty easy to remember, don't cha think?

I hope you realize that there are MUCH more codes than the above!

Text codes
Here are some text codes you can use... try to have 'em memorized :D.

Underline
To underline text put

before the thing you want to underline and after the thing you want to underline. Easy Peasy :D.

BOLD
To make text bold put

before the text you want to make bold and after the thing you want to make bold.

Italics
To make text italic put

before the text you want to italic and after the thing you want to make italic.

~~STRIKE OUT~~
To make text ~~Crossed out~~ put

<s> before the text you want to strike out and after the thing you want to strike out.

Make text Bigger or Smaller
To make text bigger or smaller use this code:
Your text goes here
To make it bigger change the

size="3" to a bigger number. To make it smaller just make the number smaller. 3 is the normal size. You can also change the font. You should know where that should be :D.

Finishing up
Have you finished up choosing your codes and finishing up your page? Well now all you have to do is save it! Just go to file >> save. If you want this page to be your home page, save it as index.html. If not, replace "index" with a page name that's short and sweet and that you can remember what kind of page it is. Be sure to save it as .html or else it won't be a web page!

Then save the file in the appropriate folder and now you can see your new page! Congrats. Well, that basically concludes our first chapter. Ciao!

~Nicolette :D