North Park Secondary School Tutorial

Computer Engineering 11 (ICE 3M0)

Welcome to the Tutorial on how to make a simple lab. This lab was made using simple HTML. HTML is Hyper Text Markup Language. It takes simple commands that we type in and convert it to computer language and then dislpay it via a browser. Depending on the browser different effects occur. There are many browsers, and to name a few: Internet Explorer, Netscape, Mozilla, and Opera. These all have their own standards so when a new language is used (i.e. CSS) the output varies. For example, when a picture is embedded into the webpage a size may be given to the picture. If the picture is given a % property the picture may become construed in a different browser setting or even a screen resolution. But this is getting to indepth. Lets get back to basics shall we?

The First code to appear on the webpage is: <HTML> and the last code to appear is: </HTML> The / symbol represents the closing of the tag.

After the HTML tag comes <head><title>Tutorial</title></head>
The Head tag is used to house the Title tag. Though the Head tag does have more advanced uses, the title tag is the only function we will use it for right now.
The Title Tag is the tag that displays the title on the titlebar of the web page which should look like this:


Next comes the body which looks like this:

<body background="../BRONBACK.JPG" bgproperties="fixed" alink="blue" vlink="blue">

The body part is nonsequential but to add any properties to the body can be tricky. Background is the background picture that is used on the webpage. However, if a picture is not available, a background color option is also available: <body bgcolor="FFFFFF"> The FFFFFF is just hexadecimal color coding. if you fool around and change them to something like FFAAEE you would get a different color. The <bgproperties="fixed"> tag is for the background picture so that is does not move when you scroll down. The ALINK function is to make any active link to be blue. The VLINK function is just to make any visited link from purple back to blue.

If at any time you wish to see some basic code click here

After the body, anything can be placed there and it will appear. The following boxes are called Text boxes

Teacher's Name

Student's Name

Student No.

The code is fairly simple.

The <br> tag is for a line break. This is a VERY commonly used tag. HTML does not work like a work processor. If you make your webpage using notepad, and the text wraps because the line is so long it has to wrap then don't expect the webpage to make a new line where the code is made to look like it wraps. For a more indepth explanation to the <br> tag click here

The text box is an input function. For a more indepth explanation of the <input> tag click here

As you probably have noticed, the websites have different text sizes. These larger sizes are called headings. Rather than changing the font size which can be difficult if you don't specify the measuring system, HTML has a special code designed to automatically set the size for the text in the specified area. Using some advanced CSS codes you could also predefine the heading sizes and other specifications, but that would get over our heads. There are six different heading sizes. Here is an Example of each:

<H1> This is Heading size 1 </H1>

<H2> These heading decrease in size </H2>

<H3> as the heading numbers increase </H3>

<H4> This is Heading size 4 </H4>

<H5> This is Heading size 5 </H5>
<H6> This is Heading size 6 </H6>

Generally, We use the <H3> size most often. These North Park websites are a prime example.

After all that is said and done, we are going to move onto tables. Now, tables can be tricky to some, but that's if you get into all the major functions of the table; we are going to stick to the basics. For an example we are going to use the Table of Materials from the DIGITAL LAB 9 Experiment:


One SK-50 breadboarding socket
One 7400 TTL integrated circuit(NAND)
Two 470 OHM resistors
Two LED's
Seven Wires
One 9V Battery

The code only looks like this:

For a more indepth explanation of the code and Tables please click here

Now is the time to explain pictures. Pictures can be inserted into a website through one common tag, the <img> tag.

The Img tag can be used only for images.
title picture

The <alt> tag is for users that have images disabled on their browser, or if you hold your cursor over the picture for a second a small box will appear with the title of the image.

If you want to resize the image you have to be careful. Its not possible to actually harm the picture but you can make it look very messed up. To resize you can change the width and height.
Short and Fat
This code makes the picture stretch 300 pixels across the screen, and scrunch the image into only 5% of the height of the screen.

If you want to make the picture taller and thinner:
Tall and Skinny

That is basically it for images, there are other options for images like using them as a hyperlink:
North Park Homepage

They can also be split up into smaller pictures and then put in a table. You could also use the table and the cut up image to have hyperlinks embedded in them to allow the user to go to different sites by clicking on different parts of the image.

Next thing is a list. for an excellent tutorial on lists click here.

Page Lasted Updated November 23, 2004



Top of Page


Assignment Menu



Course Rationale

Download Quizzer 2000
  Home Package


Back to TIK2O
Home Page

Back to the
Virtual Classroom

FOR MORE INFORMATION -  Contact your Instructor