MM 1A03E Tutorial

Wednesday, May 26, 1999

Administrative Stuff

Please sign up for CIS services on MUGSI if you have not done so already. Visit http://www.mcmaster.ca/dataserv-htm/mcss0001.htm. You must register with MUGSI to log on to Windows in the computer labs and to use e-mail.

Also, please sign up for the class electronic discussion list. Francois has put up instructions for this at http://www.chass.utoronto.ca/~lachance/mcmaster/humcom.htm

HTML: Heads Up!

Every web page is programmed with HTML. HTML stands for HyperText Mark-up Language.

Your HTML project is due soon. This means that you have very little time to learn HTML.

This lesson will get you up to speed with the basics on what you need to know.

See the course timeline and access links to the assignment at http://www.chass.utoronto.ca/~lachance/mcmaster/assignments.htm.

HTML: Where to Begin

Here are the main steps in setting up a web site.

Locate and start up a text editor. This is an application that will let you type in and save plain-text, i.e. text with no bolding, no italicizing, etc. One good application for this is Notepad, which comes with Windows. You could also use your favourite word processor, but make sure that when you save your file, you select the file format as ASCII. You will do all of your HTML programming in this text editor.
Begin typing up your file. The most important codes are listed below.
Save your file (and save often!). As always, try to stick to setting an 8-character filename, followed by a dot and an extension. This extension must be set as htm or even (the unusually 4-character) html. If you do not do this, the Internet browser will not recognize your file as an HTML file. For example, you could have a file home.htm or home.html, but not home.wpd, home.doc, or home.rtf.
Load up your favourite Internet browser and take a look at your file from there.
- In Internet Explorer, select FILE | OPEN.
- In Netscape Navigator, select FILE | OPEN PAGE.
Take note of anything that doesn't look good or doesn't work right.
Switch back to your file in Notepad and make any necessary adjustments. Resave.
Switch back to your browser, and take a look at the revised file.
- In Internet Explorer, hit the REFRESH button.
- In Netscape Navigator, hit the RELOAD button.
Continue on this way, repeating steps 6 and 7, until your page looks and works the way that you would like.
When that web page is finished, begin the next one! Repeat until your site is complete.

AN IMPORTANT WARNING
Keep a backup copy of all of your work! Save all of your files to a floppy every once in a while, and store the disk somewhere safe. You never know...

HTML: The Bare Minimum

So, now that you know what you have to do, it's time to start programming!

(Remember to save often as you type away!)

Every web page has these items.

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

(You can view this web page here. It's not very interesting, though, because it doesn't have any content at all.)

Notice all of the <> and </>. We call these tags. As you can see, there are all sorts of tags. Whatever is written inside the <> or </> tells the browser what kind of tag it is. <> means "turn on this tag". </> means "turn off this tag".

There are 4 tags listed here:

"HTML" indicates the type of file.
"HEAD" marks "behind-the-scenes" information that the browser needs to know, but not necessarily the user.
"TITLE" marks the information to be placed in the title bar of the browser for the page.
"BODY" marks the main content for the page.

Here is what the browser thinks when it reads these tags:

<HTML> means "turn on HTML".
<HEAD> means "turn on the HEAD".
<TITLE> means "turn on the TITLE".
</TITLE> means "turn off the TITLE".
</HEAD> means "turn off the HEAD".
<BODY> means "turn on the BODY".
</BODY> means "turn off the BODY".
</HTML> means "turn off HTML".

You might understand it better like this:

<HTML> tells the browser that this is an HTML file.
<HEAD> tells the browser that some behind-the-scenes information is coming.
<TITLE> tells the browser that you would like the following information to appear in the title bar for the page.
</TITLE> tells the browser that it has reached the end of the information that you would like to appear in the title bar for the page.
</HEAD> tells the browser that it has reached the end of the "behind-the-scenes" section.
<BODY> tells the browser that the main content for the page is coming.
</BODY> tells the browser that it has reached the end of the main content for the page.
</HTML> tells the browser that it has reached the end of the HTML file.

Here is some coding for a more interesting web page.

<HTML>
<HEAD>
<TITLE>
The Title Goes Here
</TITLE>
</HEAD>
<BODY>
Here is where the content for the main part of the screen goes.
</BODY>
</HTML>

Take a look at this page here. Notice that "The Title Goes Here" shows up in the title bar for the browser, and that "Here is where the content for the main part of the screen goes." shows up in the main browser window.

If you can understand what's going on, good work! You're already on your way--you are ready to learn and apply more HTML tags, listed below.

If you are still struggling, why not try making a sample page like these ones? You can even just copy and paste the text above to your text editor. Save the file (remember, save as a text file, and use an htm or html extension). Then start up your WWW browser and open the file. See above for more help.

HTML: Important Tags

Here are some tags that you will probably need. Remember that all of these will be used between the <BODY></BODY> codes.

Formatting Text

Surround anything that you would like to appear in a really big heading with these codes. For a smaller heading, choose <H2></H2>. For an even smaller heading, choose <H3></H3>. This pattern continues down to <H6></H6>, the very smallest heading.

Surround anything that you would like centered with these codes. Note the American spelling.

<P></P>

Surround your paragraphs in these codes to separate them.

Surround anything that you would like bolded with these codes.

Surround anything that you would like italicized with these codes.

<U></U>

Surround anything that you would like underlined with these codes.

Spacing out the Page

<BR>

Use this lone code to add a line break.

<HR>

Use this lone code to add a horizontal line.

Adding Images

Use this code to add an image at that point on your page. (Of course, you will have to substitute your own file name for filename.xxx.) Note that images on the Web come in two formats ONLY: GIF and JPEG (or JPG). You will have to make sure that your image is in one of these formats. If it is not, you will have to find an application that will let you convert it.

You can copy an image directly from the Web. Position your mouse over the image and select SAVE PICTURE AS (in Internet Explorer) or SAVE IMAGE AS (in Netscape Navigator). Pick a name and a drive, and hit the ENTER key. Just beware of copyright laws; make sure that you have permission to use the image.

Linking

Surround the desired hot (clickable) text with these codes to link to a local page (another page on your site). (Of course, you will have to substitute your desired file name for filename.xxx.)

Surround the desired hot (clickable) text with these codes to link to an external page (a page or site that is already on the Web). Of course, you will have to substitute your desired URL for http://www.whatever.com.)

Surround the desired hot (clickable) text with these codes to link your e-mail address. (Of course, you will have to substitute your e-mail address for whatever@whatever.com.)

Making Lists

Use these two sets of codes to make a numbered, or organized, list of items. Begin with <OL>. Then surround each item in your list with its own <LI></LI>. Then end with </OL>. Click here for an example.

Use these two sets of codes to make an unnumbered, or unorganized, list of items. Begin with <UL>. Then surround each item in your list with its own <LI></LI>. Then end with </UL>. Click here for an example.

HTML: What You Know So Far

Click here for a sample website that includes all of the codes that you have learned up to here on this page. Then take a look at the coding for the page here. You can also look at the coding for this page, or for ANY page on the Web, by viewing its source code. To do this, access the page, and select VIEW | SOURCE in Internet Explorer or VIEW | DOCUMENT SOURCE in Netscape Navigator.

HTML: Other Cool Stuff

To make your web site seem more "official", try calling the main page index.htm or index.html. When you access a web site on the Internet, it automatically loads up the file with one of those names. For example, notice that to get to http://www.mcmaster.ca, you don't need to type in http://www.mcmaster.ca/index.html (although either link works).

To spice up your site, try using some nifty colours. Visit this site to test out combinations and copy their codes: http://www.hidaho.com/colorcenter/cc.html. Avoid loud combinations, though, because your instructors have a lot of pages to look at, and their eyes get sore pretty quickly! :-)

If you can't find what you're looking for here, surf the 'Net. There are lots of HTML help sites out there. Also, you could try viewing the source of a web page to see how it was programmed. Use the menu at the top of the browser screen. (For Internet Explorer, select VIEW | SOURCE; for Netscape Navigator, select VIEW | DOCUMENT SOURCE.)

Main Menu