First of all
Getting ready


Homepage-making "tricks"
The rules of the world of homepages


 Basic "tricks" you should know
   - Make Text easy to read
   - Try changing the text position
   - Try adding pictures
   - Adding links to other sites
Different Colors


Rent space to open your homepage in
Use the Buttobi.net File Manager and show your homepage to everybody


Lots more "tricks"
How to become a homepage master





The "Tricks" of Making a Homepage


First, try opening the Text Editor.
(For Windows: Note Pad / For Mac: Simple Text Editor)


You're going to fill up the big white empty space with homepage making tricks.


  
  Umm, "tricks"?

Exactly. If you told someone who didn't speak English to "make these letters red", they wouldn't understand you, right?
Computers are the same.
In order for them to understand the language used to make a homepage, we have to give the computer instructions using a language called "HTML tags".
However, these "HTML tags" aren't some kind of completely different language, it's pretty similar to English, so should be easy to understand!


  
  Maybe I'll be able to remember them then...

So, there are rules to using these tricks.
For the time being even if you don't understand just have a skim through.


  1. The basic form is
    <trick> contents of the trick </trick>
    The contents of the trick go between <trick> and </trick>. You have to start it using , and close it with .
  2. However, in some cases you just need , and no . This might seem confusing, but there aren't many cases like that so you'll be able to remember them easily.
  3. The three "basic" tricks you'll need for making any page are "html", "head", and "body".

 
  Ahh, I don't quite get it...

OK! I'll explain as we go along, let's try actually typing in some tricks right away.
Start by typing the "basic" tricks that you need for making any page.

Essential Trick No.1: <html>

<html> is used to tell the computer that "the HTML starts from here!"

Try typing <html> into Note Pad.
Then on the next line type </html>
Don't forget this second "closing trick".

メモ帳
<html>
</html>

All right up to here?


  
  I just have to type this into Note Page, right?
It's easy!
Essential Trick No.2: <head>

The next trick you need is <head>
Just like the name, this is the head part of the page.

Type this into Note Pad like before.
The important thing is that this goes inside the <html> trick.
By inside I mean...
  
  Like this?
メモ帳
<html>

<head>
</head>

</html>

 
Yeah! Well done.
The contents of the trick goes inbetween this <trick>.
To make it easy to understand it's good to put <head> on a new line.

Essential Trick No.3: <body>

The next trick you need is <body>
Just like the name, this is the body of the page.

  
  Do I put this inside <head> too?

No, don't you think it would be weird if the body was inside the head? You type <body> underneath <head>.

This is the basic structure of a page.



Whatever page you make you'll always need these 3 tricks.

Using this as the basis, you can make a page by typing various words into it.

For example......

メモ帳
<html>
<head>
</head>
<body>
Welcome to Mr. Buttobi's Homepage!
</body>
</html>

You can put anything inbetween <body> and </body>, so try putting anything you want.

Once you've done that, select "Save As" in the Note Pad you have open.

You're going to save it in the folder you created for making your first homepage in the "Getting ready" section.



Save it with the name index.html.
(If the file extension is .txt change it to .html)

Next, open the folder and
try double clicking on the "index.html" file.
The Browser (window) will open, displaying the words you entered above, right?


  
  By the way, what's "index.html"?

It's a rule when making homepages that the homepage's top page (the first page displayed) has the name "index.html".
This is the same for making any page anywhere.

Well, if you've managed up to here,
the rest is just more of the same!
Gradually filling up this Note Pad with words and "HTML tag" tricks, you're going to make the homepage using the same method of saving, and then displaying in the browser.

From Level 3, I'm going to introduce lots more different tricks.