Evaluation of Educational Technology

Before we Get to The Commands... "view source"

This might be an overstatement, but before the days of HTML editing software, I think just about everybody learned how to work with HTML by using the "view source" command to copy how others made their web pages. At least that's how I learned how to do it. The menu location of this varies, but in current versions of Netscape, look under the "View" menu item and select the item called "Page Source."

Depending on the computer you're working on (be it in the 312 Pray-Harold Lab, another lab on campus, your computer at home, etc.), trying to view the page source might give you a dialog box that asks if you'd like to save or delete the document.Go ahead and save it, but keep in mind that it will probably be saved automatically in a default location-- on most Macs, that's the desktop.

If you have to save the document before you can open it, go ahead and try to open it with SimpleText. If you're lucky, the file will automatically open in SimpleText (or NotePad if you're working on a PC).

When this works, what you realize is that the "source" is nothing but the HTML file. Now, this means two great things to the web writer working directly with HTML. First, it means that you can figure out how most of the stuff on the web works simply by looking at the code-- the machinery-- underneath. Second, you can "borrow" directly from the code to try and make the same things happen on your own web pages. Now, keep in mind I'm not suggesting that you plagiarize exactly, but writers have always learned how to write compositions of their own by copying others. Basically, that's what you're doing when you copy a nifty little HTML code from someone else and make it your own.

The most common HTML "tags" and what they do

Keep in mind this is a very short list of some of the most important HTML commands-- there are a bunch of other ones, but if you've got these down, you can make a web page. Two places to go for information and similar "cheat sheet" lists of links are:

HTML Quick Reference at the U of Kansas
A Beginner's Guide to HTML Homepage

<html> While not essential, this is the first tag on a page that tells the browser that it's a web page.

<head>...</head> This is goes at the beginning of the document; between the two different "head" tags.

<title>Your Title Here</title> The most common head element that I know of, the title tags puts a title for your page in the bar at the top of your browser.

<body>...</body> This is for the "body" of your web page. For most web sites, this is where you'd put all of the other commands between these two commands.

You can add a lot of other commands to the first body tag to indicate all sorts of other things with your page. For example: <body bgcolor="#000000" background="image.gif" alink="#ag5545" vlink="#444444"> would add controls for your page for the background color, a background image, the color of anchor links, and the color those links change to indicate that the user has visited them.

<h1>Your Headline Here</h1> This makes headline-sized type. Headlines run from H1 (the biggest) to H6 (the smallest).

<p> This makes a paragraph return. Keep this in mind because HTML doesn't recognize paragraph returns as you would make them in a word processor. If you want your text broken up into chunks, you need to add those <p> tags.

<a href="http://www.the-address.com/filename.html">Link to document here</a> This is for making a link to another web site. The "http://www.the-address.com/filename.html" is the URL being linked to; the "Link to document here" is the text that will show up as a highlighted link; and the last part, </a> indicates where the link ends.

This command also works for linking between HTML Files in your own directory. Let's say your main page is called index.html; if you have another HTML file (maybe an essay for a class) called "paper.html", you can make a link from the index.html by putting in a command that looks like this:

<a href="paper.html">A link to my paper</a>

Keep in mind that to link from one HTML file from another like this, you need to have both HTML files in the same directory.

<b>Bold text</b> This makes the text between the commands bold.

<i>Italicized text</i> This puts the text between the commands in italics.

<center> text to be centered </center> This puts the text (or whatever, actually-- graphics, tables, lists, etc) in the center of the screen.

<blockquote> Insert your text here </blockquote>

With this command, you can indent text in from the left margin, which is useful for making blockquote in a longer chunk of text or by arranging the text in a particular way.

<ul>...</ul> This is the beginnings of making what is called an unordered list. It's a little confusing to explain, so let me try to demonstrate. The following HTML...

<ul>

<li>item number one

<li>item number two

<li> item number three

</ul>

...produces a list that looks like this:

item number one
item number two
item number three

<img src="graphic.gif"> This inserts a graphic into a web page where you put the command. Keep a few things in mind, though:

For this to work, you've got to have a graphic file in the first place, which is different than the html file (which is just text, after all) where you have the command. Further, if the graphic file is in a different directory than the html file, you need to have a full URL in between quotes. My recommendation is that you keep the graphics with the corresponding html files.

There are two acceptable formats for graphics on the web: "gifs" or "jpegs". I'll skip the technicalities of what these are (mainly because I don't really understand what they are myself), but the important thing to keep in mind is that other common graphic formats (like EPS, or tifs, or picts, or whatever) won't work. This is important because if you scan an image, chances are you'll have to convert the file to a gif or a jpeg. That isn't hard, but it's something that takes a few steps I won't explain here.

Placing graphics and having them behave the way you want them to can be a tricky business. Keep in mind that the steps I'm going over here are for making the most basic of basic web pages with "raw HTML."