Making Your Own Web Page

Project resources

 Contact Merv

 

 
This page will enable you to make your own Web Page. Even if you have never made one before, or don't have access to Web editing programs, it is possible to follow these simple instructions and finish up with a page that shows 'your face' to the world.
Later, you may like to up-date it, and as your IT skills increase, add more information, images or effects.

Here is an example:

Andrew's Page

Hi, my name is Andrew, I am into fast cars, burnouts, and sprintcars. I used to sail, that was fun, but now I am becoming a bit of a petrol-head. I have a sprint car, but haven't raced it yet. As you can see, I sometimes go along for a bit of a ride...

Actually, I am taking you for a ride if you think
this picture hasn't been touched up a bit.
See ya'.

You will notice this page includes:

  • a title
  • background colour
  • text colour
  • a photograph
  • a profile that may include your name, interests, family, significant events in your life, aspirations

Here is how you can make one similar to Andrew's. As we are not using a Web Editor, (a program that lets you make a page without looking at the code), we need to see what the page looks like in the language or code that the Internet understands - called 'HTML'.

HTML Code

What it means...

<HTML>
<head>
<title>Andrew's Page</title>
</head>

This part tells us that it is written in HTML (which stands for Hyper Text Markup Language).
It also provides the title that will appear in the blue line at the top of the Web Browser (such as Internet Explorer) window.

<body bgcolor="CCCCCC" text="black" link="blue" vlink="purple" alink="red">
<p><font face="Comic Sans MS" size="6"><b>Andrew's Page</b></font></p>

Now we have - in order:

  • background colour (in Hexidecimal code)
  • text colour (it could also be written as "#000000")
  • Hyperlink colour (a link to another page on the Web)
  • visited link colour (to show that you have already been there)
  • active link colour (the one that is still open now)
  • the type of text, called 'font'
  • the size of the text
  • <b> means 'Bold' text
  • </b> means no more bold text

<p><font face="Comic Sans MS" size="4">Hi, my name is Andrew, I am into fast cars, burnouts, and sprintcars. I used to sail, that was fun, but now I am becoming a bit of a petrol-head. I have a sprint car, but haven't raced it yet. As you can see, I sometimes go along for a bit of a ride...</font></p>

You will notice that when we look at Andrew's page, or any Web page for that matter, the code is not seen. All HTML code is hidden by using < and > symbols. Some instructions have a start - for example: <p> (paragraph), and and an end: </p>

The text that is seen on the Web page does not have these symbols.
 

<p align="center"><img src="images/andrews_ute.jpg" width="615" height="348" border="0"></p>

Web pages are sitting in a computer at the Internet Service Provider (ISP) as various files and directories. The Web Browser locates the files and actually assembles the page using various parts. The instructions in code for the browser to get the image (which is located in a directory usually called 'images') can be seen here: <img src="images/andrews_ute.jpg", and lists the size of the image, no border>.

<p align="center"><font face="Comic Sans MS" size="4">Actually, I am taking you for a ride if you think this picture hasn't been touched up a bit. <br>See ya'.</font></p>
</body>
</HTML>

Here is the text that appears underneath the image. Notice that the code is telling the Web browser:

  • that the page is finished: </body>
  • there is no more code to look for: </HTML>

 It all sounds complicated, but remember you will be able to say of your first Web page: "I built it using HTML code".

Let's get started.

Nearly all computers using Windows, have a program called 'Notepad'. The icon looks like this:
This program handles HTML code, and is reasonably simple to use.

1. Open Notepad, highlight (hold left mouse button down and move) and copy (click right mouse button and select 'Copy') the following code:

<html>

<head>

<title>Andrew's Page</title>

</head>

<body bgcolor="CCCCCC" text="black" link="blue" vlink="purple" alink="red">

<p><font face="Comic Sans MS" size="6"><b>Andrew's Page</b></font></p>

<p><font face="Comic Sans MS" size="4">Hi, my name is Andrew, I am into fast

cars, burnouts, and sprintcars. I used to sail, that was fun, but now I am becoming

a bit of a petrol-head. I have a sprint car, but haven't raced it yet. As you

can see, I sometimes go along for a bit of a ride...</font></p>

<p align="center"><img src="images/andrews_ute.jpg" width="615" height="348" border="0"></p>

<p align="center"><font face="Comic Sans MS" size="4">Actually, I am taking

you for a ride if you think this picture hasn't been touched up a bit. <br>See ya'.</font></p>

</body>

</html>

2. Now have a close look at the highlighted sections below, and then in Notepad, replace them with your own details.

<html>

<head>

<title>Andrew's Page</title>

</head>

<body bgcolor="CCCCCC" text="black" link="blue" vlink="purple" alink="red">

<p><font face="Comic Sans MS" size="6"><b>Andrew's Page</b></font></p>

<p><font face="Comic Sans MS" size="4">Hi, my name is Andrew, I am into fast

cars, burnouts, and sprintcars. I used to sail, that was fun, but now I am becoming

a bit of a petrol-head. I have a sprint car, but haven't raced it yet. As you

can see, I sometimes go along for a bit of a ride...</font></p>

<p align="center"><img src="images/andrews_ute.jpg" width="615" height="348" border="0"></p>

<p align="center"><font face="Comic Sans MS" size="4">Actually, I am taking

you for a ride if you think this picture hasn't been touched up a bit. <br>See ya'.</font></p>

</body>

</html>

 3. Saving your homepage. When you click 'File' and select 'Save', you will see a window similar to this:

 4. Choose where you plan to save the file usually 'My Documents'

 5. In the box 'File name:',  type the name you intend to call the file, plus a full stop and .html

 6. In the right hand side of the 'Save as type:' box, click the arrow and select 'All Files (*.*)

 7. Click 'Save' (the 'Open' one will have changed by now). You now have a file you can do more work on.

 8. The first thing you may want to do is change the colours. Here is the part in your file (5th line down) that you can change:

<body bgcolor="CCCCCC" text="black" 

  9. Here is a chart that lists all the standard colours: Colour Chart

 10. Highlight the six letter/number for the colour that you like, click right mouse button and select 'Copy'

 11. Highlight the letters between the talking marks: <body bgcolour="CCCCCC"

 12. Paste the new colour number between the talking marks. You can change the text colour in the same way.

 13. Click 'File' and then 'Save'.

 14. Collect a photo that you would like on your page - perhaps you can take a digital photo of each other.

 15. Scan the photo if it is an actual photo, or process it if it is a digital image. These resources may be helpful:

Digital Images and More about Digital Images

 16. When you have saved your photo, (in the same or a sub-directory of 'My Documents' ), type the name of the file in place of:

 andrews_ute

 17. As you want to leave the photo the size you have made it, delete the following code:

width="615" height="348" border="0"

 18 Note: If you don't have a sub-directory of 'My Documents' called 'images', you can create one, or delete:

 images/

 19. Save your file, and open Internet Explorer (or the Web browser you have); select 'File', 'Open', 'Browse', and then your HTML file to see how it will look on the Internet.

 20. Attach the HTML file and the image to an email, and send it to me and I will up-load it to the avec esprit site.

 If you have any difficulty with preparing your page, either send me what you have, or send me a message outlining the problem. I am happy to help, because I know the sense of achievement many people get from actually building their own Web page by using code.

Contact Merv

ŠPlasform 2003