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>
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.