In this chapter we will create our first web page, it will not be the most impressive thing you have ever seen but that is for later chapters. This chapter will simply show us how to create an HTML file and view it with your browser.
An HTML file is simply a text file with a .htm or .html extension such as "webpage.htm". You'll need to open your text editor. A text editor is a bit like a word processing program except you can't change font or do other fancy stuff. Most computers come with one as standard, if you have windows you can use notepad. Once you have opened your text file you can start with our first page.
You should remember we talked about tags in chapter 1, these are commands enclosed in weird pointy brackets like this <B>. We are now ready to begin, the following is the first code you have to type in to make a web page.
|
<HTML> <HEAD> <TITLE>My Very First Web Page!!</TITLE> </HEAD> <BODY>
</BODY> |
You can see the example by clicking the link above. When creating your own web page you will not have this luxury so this is how you would display your own page. Copy the example above into a text file and save it as eg_1.htm into a directory. You should probably create a new one for web files. Now in the file menu of your web browser choose open or open file (it depends on your web browser) and select eg_1.htm and open it. Your browser should now display the file, if it doesn't check the help included with your browser.
By now you should realise that this page does very little indeed. All it does is show the title "My Very First Web Page!!" in the top corner of the browser program. It does however do a lot of vital stuff, which although you can't see needs to be there. The first tag <HTML> tells the browser it is reading an HTML file and the bottom tag </HTML> tells the browser it is at the end of the HTML file. The HEAD section between the <HEAD> tag and the </HEAD> tag gives the browser information such as the title which in our example is "My Very First Web Page!!". To be honest there is not a lot of other information you can put in the HEAD section. The next and most important section is the BODY section. This includes all the information that is displayed on your web page. If you type some text in this section between the <BODY> tag and the </BODY> it will appear on you web page (try it). Type in some text, resave the file and press the reload or refresh button on your web browser.
Now there are some extra things you can do with the <BODY> tag by extending it. You can change the colour of the writing or background on your web page, you can also make the background a picture which you have drawn.
To extend the <BODY> tag to change the background colour change it to <BODY BGCOLOR=" ">. In the " ", you have two options. You can type a colour name such as blue or white, there are a limited number of colours and this does not work on early browsers. The other option is harder but lets you show more than 16 million different colours. You can type in a # sign followed by a six digit number like #000000, this is black. The number however is not a nice normal number it is a hexadecimal (or hex for short) number. Its not too scary it just takes a bit of thinking about.
Here is a quick lesson in how to count in hex:
In normal counting you count in groups of ten 0 to 9 and then 10 to 19. In hex you count in groups
of 16 first from 0 to 9 but then because we've run out of numbers we use letters a to f. So you first count 0
to f and then 10 to 1f. But in hex 10 does not mean ten it means sixteen. This is kind of confusing
and takes a while to get used to. If you can't get your head around it you use this handy little converter.
The colour number is made of three separate numbers #00 00 00, the first is the red component of the colour, the second is the green and the third is the blue. 00 is the lowest you can have a number and ff is the highest it can be. Below is a table of the numbers needed to make some of the more popular colours.
| COLOUR | RED | GREEN | BLUE | NUMBER | |
| Black | ? | 00 | 00 | 00 | #000000 |
| White | ? | ff | ff | ff | #ffffff |
| Red | ? | ff | 00 | ff | #ff0000 |
| Green | ? | 00 | ff | 00 | #00ff00 |
| Blue | ? | 00 | 00 | ff | #0000ff |
| Yellow | ? | ff | ff | 00 | #ffff00 |
| Orange | ? | ff | c8 | 00 | #ffc800 |
| Pink | ? | ff | af | af | #ffafaf |
| Light Grey | ? | c0 | c0 | c0 | #c0c0c0 |
If you have one of the latest browsers, the box in the table above with a ? in it will also show a sample of the colour. If you haven't you'll just see a question mark. You can fiddle with these numbers to make what ever colour you want.
This is very similar to how you change the colour of the background but this time we extend the <BODY> tag like this <BODY TEXT=" "> and between the " ", we use the same colouring system as we did for the background. Here is an example that changes the background to black and the writing to red.
|
<HTML> <HEAD> <TITLE>My Very First Web Page!!</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#ff0000"> Some text in red.
</BODY> |
As you can see in this example we are changing both the background and text colour for the page but we only use one <BODY> tag and put both commands in it, using two <BODY> tags would mess up the page.
It is also possible instead of changing the colour of the background you can make it display a picture. This is usually a small picture that tiles to form a pattern to fill the whole screen. We extend the <BODY> tag in this way to do it: <BODY BACKGROUND="*.gif">. "*.gif" can be any picture you want in gif or jpg form, we will talk more about pictures in chapter 4. Here is an example of how to include a background picture. The picture we will use is one I created for an old site. It is called "ripple.gif" and looks like this.
|
<HTML> <HEAD> <TITLE>My Very First Web Page!!</TITLE> </HEAD> <BODY BACKGROUND="ripple.gif"> Some text not in red.
</BODY> |
From this example you should be able to see that black writing does not stand out very well on this background, you could make it white instead like this.
What you have learnt so far really only scratches the surface but you should not go onto chapter 3 before you get to grips with what I have talked about so far. If you don't fully understand the hex colour system that is OK as it is hard to get to grips with and you shouldn't let it hold you back.
In chapter 3 we learn about the things you can do with text such as make it bold and change the font.