Web Page Tutorial

How To Create a Simple Web Page

By: B. Boyle

HOW TO MAKE A WEB PAGE - IN 15 SECONDS!

Many people seem to be under the impression that web pages are difficult to create. Nothing could be further from the truth! You can create a simple web page in about 15 seconds by taking a block of text and adding a couple of tags!

Example:

<html>

<body>

Put block of text here<br>

blah blah.............<br>

more text blah........<br>

</body>

</html>

Save the file in flat text (dos text or ascii) as:

c:\whatever.htm -It's a web page!!!

(If you don't believe me, fire up Netscape and under "Files" in the upper left corner of the Netscape screen select "Open File" and load the file - It is a web page!!!)

The beauty of creating web pages using simple word processors is that students acquire an appreciation for the structure of Hyper Text Markup Language. The other important advantage of creating pages in this way is that you require neither high level software nor high level hardware to create pages. An IBM XT is just fine!

****NOTE****

A 386 computer or better is required to actually view

the page, as this is the minimum hardware platform

required to run Netscape and Windows. One 386 can,

however, be shared among an entire class of HTML authors.

Web pages are constructed from simple "tags" and "anchors"

tag = <html> anchor = </html> which tell a web browser

like Netscape how to treat the information which lies between

the tag and its corresponding anchor. It is simple!

Here is a list of the very basic tags and anchors used in

constructing web pages:

TAG ANCHOR

<html> </html> ---- Treat everything within as a web page

<title> </title>---- Put everything within, in the blue box at the top of the Netscape screen

<head> </head> ---- Make everything within, into very large type on web page itself

<h1> </h1> ----- Make everything within, the largest type size possible

<h2> </h2> ----- Make everything within, a bit smaller type than h1

etc etc

<h6> </h6> ----- Make everything within, the smallest type size possible

<blink> </blink>---- Make the text blink!

<center> </center>--- Center all text between tag and anchor

<b> </b> ----- Bold the text within

<i> </i> ----- Italicize the text within

<ul> </ul>----- Makes a bullet list

<ol> </ol>----- Makes a number list

 

Some tags don't require anchors (but will work with them)

EXAMPLES:

<br> ---------------- Forces a line break after the tag

<p> ---------------- Forces a paragraph break after the tag

<hr> ---------------- Puts a ruled line across the page

<li> ---------------- Puts a bullet in front of the line

 

HERE IS A SIMPLE WEB PAGE YOU CAN CREATE IN 5 MINUTES

-----------------------CUT HERE------------------------------

<html>

<title> A First Web Page </title>

<head> My First Web Page </head>

<hr>

<center><h1>This line should be centered and large</h1></center>

<center><h2>This line should be centered and smaller</h2></center>

<h5>This line should be to the left and small</h5>

<h6> This line should be to the left and tiny</h6>

<hr>

<body>

Here is a list of high schools in Victoria County:<br>

<p>

Lindsay Collegiate and V.I. <br>

I.E. Weldon Secondary School<br>

Fenelon Falls Secondary School<br>

<p>

<center><b>Let's try to bold and center some text!!</b></center>

<center> This has been my<b>first</b>Web Page!!!<center>

</body>

</html>

---------------------CUT HERE-----------------------------

By using the "add to dictionary" feature on most word processor

spell checkers, you can "add" the tags and anchors as you check

your first web page. In future then, the checker will check

through web pages without stopping, unless it encounters an error

in a tag or anchor!

If you are fortunate enough to have equipment which can run

Windows, then you can author the page using a word processor

like Notepad (in windows accessories- free) and hop between the

authoring and viewing process by firing up Netscape as well and

then using the ALT-TAB keys to make the hop.

 

LET'S GET (A BIT) FANCY!

LINKS

Here is an example of how to add a LINK to your web page:

The bit below shows how to set up a clickable link to the

Trillium Lakelands District School Board web page

<a href="http://www.tldsb.on.ca"> TLDSB Home Page</a>

 

EMAIL

Here is how to set up a clickable email link on your web page:

<a href="mail to:bboyle@kawartha.net"> MAIL ME!</a>

PICTURES

Here is how to add a picture to the center of your web page:

NOTE**** The picture should be placed in the

same directory as your web page in order for the picture to

work properly.

<center><img src="lcvi3.jpg"></center>

 

BORROWING WEB IDEAS

Often when visiting a web site you wonder how he or she did

something within the page. You can get a copy of any page by

simply going to "File" and then "Save as" in the browser.

To read the page with all tags showing simply load the file

into a word processor. You can get a copy of any picture by

clicking on the picture with the RIGHT mouse button. You can

get a copy of any background pattern by clicking on it with

the RIGHT mouse button(MSIE-only). Please remember to ask

permission if you intend to use any photos or materials.

Those are the basics of Hypertext Markup Language (HTML)!!

Give them a try!

 

Barry Boyle (bboyle@kawartha.net)

Lindsay Collegiate and Vocational Institute

Lindsay, Ontario

Canada

K9V 2Z9

This document may be reproduced and used for instruction

in publicly funded educational institutions only.