Lesson 1:

HTML Basics

On To Learning HTML

Before going too far, you might want to print this page out. It's usually easier to follow the instructions if they're on paper first...

The first thing to remember is that all web pages are just plain text documents with some coding in them-- Hypertext Markup Language, or HTML. HTML isn't actually a computer language per se; rather, it is a coding system that uses basic commands to effect text, graphics, and the like on web pages.

HTML has a few very basic "grammatical rules" that are fairly easy to understand:

With HTML, writers write text and include codes for other things to happen-- links, graphics, etc. All of this may look complicated at first, but it's actually quite easy. In fact, one of the reasons why the web has grown so quickly is that HTML is easy enough to be learned by folks with some computer experience but no real programming experience.

Here's how it works:

Step 1: Type this text EXACTLY as it appears below using SimpleText (on the Mac) or NotePad (on Windows PCs)-- DO NOT use software like MS Word or WordPerfect!

 

<html>

<head>

<title>This is the title of a web page</title>

</head>

<body>
<h1>Welcome to the super simple web page</h1>
Here's some plain text.
<p>
Notice how there is a space separating this sentence from
the previous one?  It's because of that p in brackets.
<p>
That's my homepage so far.  Pretty neato, huh?
<p>
</body>
</html>

Be careful about this! Typos could cause this to not work!

This doesn't work well in using word processors like Word or Word Perfect because word processing programs put in some invisible codes that confuse web browsers. Just about every personal computer will have something like SimpleText or NotePad, so for our purposes here, stick with them.

Step 2: Save this file as "index.html" or as "index.htm"

Some older PCs will require you to save it as "index.htm"; that's okay because it will work as either "index.html" or "index.htm." If you are doing this exercise in a computer lab, save this to a diskette, and if you are doing this on a computer at home, make sure you save this to a folder or a directory on your hard drive where you will save all of your web work. It's really important that you remember where you save everything; when things don't work, it's usually because files get saved in the wrong place.

Also, while it isn't too important yet, you want to get in the habit of saving the files that will become the "main page" for your web site as index.html or index.htm since those are the default names for "homepages" on the web.

Step 3: View your file in your browser.

To do this with Netscape, look under the "File" menu and (depending on the version of Netscape) select the "Open File..." or the "Open Page..." option. Internet Explorer will work about the same way. This will open a menu option like the one you get when opening any file from an application. Find the file you just saved ("test.html" or "test.htm"), and open it. With any luck, you'll get the beginnings of your web page.

If it worked, congratulations! You're halfway there! If it didn't work or it doesn't look like this page, then you did something wrong. You might want to go back and check...

Making Links

Links to other documents are what makes the web go 'round and it's quite easy to do. Here's the basic command: 
<a href="http://www.emich.edu">The EMU Homepage</a>

The part in the quotes, "http://www.emich.edu," is the URL or "address" of the web page to which you want to link. You can link to literally any page on the Web from the page that you are making, which is one of the key things that has made the Web the exciting hypertextual forum that it is. The part that says "The EMU Homepage" is what will show up as a link when you look at this file in a web browser like Netscape of MS Explorer. The "</a>" part is important because it is a command that indicates the end of the link.

To add a link, go back to the SimpleText of NotePad file you're working on (you can't do this while you are "viewing" your page with a browser) and then add the link command somewhere in the body of your page. Just remember that you've got to put it in the main body of your web page, which is any of the places between the commands <body> and </body>. If you put it between the <head></head> part (toward the top of your file), it won't work. Once you've inserted the link, save your file again so it will remember the changes and try to look at it on the Web. (You might have to push the "reload" or "refresh" button on your browser to make the changes show up on the browser). If you do this right, it should show up on your page, looking (and working) like this link:

The EMU Homepage

Inserting Graphics

There are two basic ways of getting graphics for your web site. You can make them (and this is accomplished with software, a digital camera, and/or a scanner), or you can download graphics from other sites. Making your own graphics is a more advanced step-- for the time being, let's start with downloading something.

If you are using a Mac, you can download graphics from the web simply by putting the pointer of your mouse over the graphic you want to download and holding down the button. On a Windows PC with two mouse buttons, put the arrow over the graphic and click the button you don't usually use to click things, the right button. When the menu item comes up, select "save graphic as..." and save the graphic as the name of the graphic, in this case, "dalitimewarp.gif". Don't change the name of the graphic and don't leave off the part that says ".gif" or ".jpeg" or "jpg"--that's what helps make this work.

You should save this graphic onto a floppy disk or in the Student Work Folder if you are in the Mac lab, or onto your hard drive if you are using your own computer. If you do save it onto your hard drive, make sure you save the file in the same folder or directory as you save your other web pages, like the index.html file you've been working on. The easiest way to keep all of your web stuff together is to create a folder or directory on your computer where you can put your different html files and graphics together.

A word now about graphics like this: there are a variety of copyright and other issues that you should be aware of before you go out and randomly "borrow" graphics. We'll talk more about this in class as we progress through making web pages, but for the time being, realize that you shouldn't just take anything. This particular image came from one of the many free sources for clipart on the web.

Okay, having said that, take this graphic:

Make sure that you save this graphic as "dalitimewarp.gif" and in the SAME PLACE as you save your HTML file. This means in the same folder (if you are saving to the hard drive) or to a floppy diskette.

Now, to make this graphic show up on your web page, insert this command somewhere in your site:

<img src="dalitimewarp.gif">

The "dalitimewarp.gif" part is where you would put the name of the graphic file you want to insert. Any graphic file that you download from the Internet should work for this command; for graphics that you create, you need to make sure that you save them in either "gif" or "jpeg" format.

To see if this all worked, do what you've done twice before: save the HTML file (and remember where you saved it!), open the HTML file in Netscape or IE, and see what it looks like.

Basically, that's all there is to it...

No, really! If you can a) type up you text, b) add a few basic formatting commands, c) link to other documents on the web, and d) insert a few graphics here and there, then you can make a simple and satisfying web page. Oh sure, you'll want to do more, but this is plenty to get yourself started.

 

Back to the How-to-HTML Homepage | On to Lesson 2