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




Basic "tricks" you should know - Making text easy to read


Right... shall we recap up to here?

Note Pad
<html>
<head>
</head>

<body>
Welcome to Mr. Buttobi's Homepage
</body>
</html>

Up to here's fine, right?

So, first of all, let's try giving the page a title.
The title is the words displayed in this section.



What's displayed at the top of the browser is of course what the homepage will be listed as if it's added to the browser's bookmarks, and also what shows up when looking in the browser's history.

It can be the title of your homepage or something about the contents of the page, something simple is fine so it's best to put a title

Trick for adding a title: <title>

Basically, you put this trick for adding a title is basically inside the <head>.

Note Pad
<html>
<head>

<title>Mr. Buttobi's Homepage</title>

</head>

<body>
Mr. Buttobi's Homepage
</body>
</html>

Like this.


 
 
Somehow it suddenly seems like a real homepage!


Save this change straight away in Note Pad, and try opening the index.html file in your browsers.

If the browser is already open, clicking the refresh button at the top of the browser will change the page to the new version.



If you did it right the title will now show up at the top of the window!


 
  Yeah, seems like the title trick worked well!

Right, next let's try changing the writing on the page so that it's easy to see!

First of all, shall we try putting "Welcome to Mr. Buttobi's Homepage" on a new line?

Line break trick: <br>

Usually, if you just make a new line in Note Pad it won't affect how the page is displayed in the browser, so you need to use this line break trick when you want to put something on a new line.

This trick just inserts the line break exactly where you put it,
so there's no need to type in an opening or closing tag.

For example:

Welcome to
Mr. Buttobi's Homepage!

If you want to put a line break like this, put the trick in right after "Welcome to", and that's where the line will break.


 
 
Note Pad
<html>
<head>
<title>
Mr. Buttobi's Homepage</title>
</head>

<body>
Welcome to<br>
Mr. Buttobi's Homepage
</body>
</html>
Like this?



Exactly! Well done.
Save the file right away, and have a look at it in your browser like before.

Basically, each time the procedure is
Write the HTML tags in Note Pad -> Check in your browser.


 
  Yeah, looks like I did the line break correctly.
I wanna try more ways of changing the text...
 
OK! I'll teach you more tricks for changing the text!

Trick for making text bold: <b>

<b>Text</b>

If you look at it in your browser...
Text

Italic Text Trick

<i>Text</i>

If you look at it in your browser...
Text

Trick for changing the font size: <font size= "X">

* If you enter a number between 1 and 7 where "X" is, the text size will change accordingly.

<font size="1">Text</font>

If you look at it in your browser..
1: text
2: text
3: text
4: text
5: text
6: text
7: text

Trick for changing the font color: <font color="XXX" >

* If you enter a color code where XXX is, the font color will change. For information on color codes, please see: "Different Colors"

<font color="#FF0000">Text</font>
* #FF0000 is the color code for red.

If you look at it in your browser...
text

*Warning about changing colors!

If you look at it in your browser...
text

* Avoid using color schemes which are hard to read,
such as yellow on white.
By doing things like using a light color for the font and making the background a dark color (I'll teach you how to change the background color later), you can make a page that's easy to read for everyone.
 
 
Yeah, yellow letters are bright...
A light color on top of another light color is hard to see.
I'm gonna make a page that's easy to read!



That's a good idea.
Next, shall we try changing the location of the text?