other publications


Webpage Tutorial :: Some Basic Principles

Webpages are written in simple ASCII text and use embedded tags--also written in text--to tell the browser how to format the page, insert images, display links etc. These embedded tags are collectively called Hypertext Markup Language (HTML). HTML composers like FrontPage and Dreamweaver automate the insertion of the tags, but it's useful while learning HTML to hand-code your first website to understand how the code works, and more especially, how to manage multiple files and the connecting links between them.

To start: Open a text editor such as Notepad or SimpleText. (You can also use MSWord or other word processing programs, though they may confuse things by automatically converting the html code into a webpage. In a text editor like Notepad, you are sure that you are only seeing text--the basis for any webpage.) While you will be creating a text file, you must add the extension .htm (or html) when you Save the file for the browser to recognize it as a webpage. As noted below, you will save your webpage file as filename.htm.

Open an internet browser (Netscape or MS Explorer). To create your web-page you will be moving between these two applications.

When you have written the text with the html code embedded in it, you save this as an HTML file with the following syntax: filename.htm. The browser will read this .htm file as a web-page, converting the html code to the action specified. The basic process is this: you write the text inserting the html code, save it to disk or a hard drive, then Open File in Browser under the File menu.

To make this web-page available on the WWW, you must transfer the file and all files associated with it (image or sound files for example) using a File Transfer Program (FTP) such as WS_FTP to a webspace with an Internet Service Provider (ISP). For example, Shaw Cable provides its cable users with a small amount of free webspace. Alternatively, as a student at Malaspina, you can set up an account on the Discovery server, then "drag-and-drop" your files into a web folder. Instructions for this can be found at http://it.mala.bc.ca/students/Accounts/Homepage.htm

One of the complications of building a website with an HTML composer is that it needs to identify the location of the files: eg, C:/medi113/index.html. When you move your webpages to an ISP server or Discovery web folder, the path that allows the browser to locate the files changes. Make sure that your pathnames for internal and external links are "absolute": "page2.htm" and not "C:/medi113/page2.htm".

How to Start a Web-Page

All the codes of a web-page are revealed by selecting Source under the View menu. You can copy code from any webpage by selecting the appropriate text, copying, and pasting into your text editor.

All html codes are inserted in <angled brackets>. You start a command with <tag> and end it with </tag>.

You begin a web-page with <HTML> and end it with </HTML>. (If you insert unnecessary spaces into your code, you will probably invalidate the command.)

The page begins with <head> and <title>, and is made up of a <body>. The codes are case insensitive (you can use upper or lower case). To begin, type: <html><head><title>Put the title of your page here</title></head>

Body of the Webpage

To create the Body of the page: specify the background color <bgcolor> or background wallpaper <background>, the text color <text="#color code">, the link color <link>, the visited link color <vlink>, and the active link color <alink>. You can also specify the font size with the command <font size=+/-2, 3, 4, etc>. (Use the US spelling of color. Use hexadecimal color tables to determine color codes.) The completed body tag looks something like this:

<body bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#660033" alink="FF9900" font size=+1>

Use the <H1> through <H6>code to create headings. End with </h1>.

Use the <UL> code to make unordered lists, and <OL> to make ordered or numbered lists: <UL>

Inserting Images

For more detailed infoprmation on images see Images for the Web.

Insert images with the <img src> command:

<IMG SRC="image.gif or image.jpg" ALT="image name" WIDTH=size in pixels HEIGHT=size ALIGN=right/left hspace=10 vsapce=10 border=0>

This image file should be in the same folder as the .htm file. If it is in another location, you specify that location with the path name: "images/image1.gif".

There are a number of commands you can use to position images in relation to the adjacent text: align=left/right, hspace=x pixels, vspace=y pixels. (Hspace = horizontal alignment in relation to nearest text; vspace = vertical alignment.) Always specify the size of the image so the browser will load the text first, leaving room for the image to load more slowly. Image files can be resized by the browser if you change the height and width specifications. Try to keep image files small. There is no point in using images with a resolution greater than 96 or 72 pixels per inch, because most monitors are only capable of that resolution. Images with a higher resolution will become larger when displayed on a computer screen, and will take longer to load.

Bhagavad Gita, Marshall Soules, La Coruna Spain, 1990


Insert external links with <a href ="URL"> and end with </a>:

<a href="http://www.mala.bc.ca/~soules/">Marshall Soules' Homepage</A>

You can create internal links by naming locations in the document with <a name="name"> and linking to it with <a href="#name">.


A simple way to control the layout of text and images on a webpage is to use tables. Here's the code for a simple table which will center the text on the screen and leave 10% margins on either side:

<center><table width=80%><tr><td>Content of the table goes here

Tables can be "nested": ie, a table can be inserted inside another table or table cell (td). Since tables can quickly become complicated, you should take one of the table tutorials listed in the links below.


You can initiate an email program with <a href="mailto:email address">name</a> e.g.:

<a href="mailto:soules@mala.bc.ca">Email M. Soules</a>;

Ending a Webpage

End your webpage with: </body></html>

Viewing the Wepage in a Browser

Save the file to disk or hard drive. Open the file in the browser to look at it locally. Make adjustments to codes by going back to your text editor, and resaving the file. In the browser, select the Reload button to see the new version. When the file is ready, upload it to the WebCT Presentation by following the directions in WebCT Help.


Evaluating Websites

HTML Tutorials

HTML Standards

Cascading Style Sheets

Other HTML Resources