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.
For the most part, HTML makes the web work. I say "for the most part,"
because there are a few other things out there that do make web pages work:
Cascading Style Sheets, something called
XML, different sorts of scripting languages, etc. But never mind about
all that; the focus here is on using simple tools to make simple web pages,
and it doesn't get much more simple than HTML.
HTML has TWO very basic grammatical rules that are fairly
easy to understand:
- Everything between the "less than" and "greater than" signs , "<"
and ">", are the HTML commands. Most people who do HTML refer to these
as "brackets" and the commands themselves as "tags."
- Most (but not all) commands have an "end" command that is indicated
by a "/" in a set of brackets.
Take a look at this example:
<title>This is the title command</title>
You might not know yet what the word "title" means in terms of an HTML
command (though you can probably guess), but you can be assured that since
it appears between the "<" and the ">," this is some sort of HTML
command. Further, the item in the brackets that includes the slash is the
one that "turns off" the command. In other words, the <title>
is the beginning of the command; the </title> is the end
of the command, sort of like a period in a sentence.
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 grew so
quickly in the mid 1990s is that HTML is easy enough to be learned by
folks with no real programming experience.
Here's how it works:
Step 1: Type this text EXACTLY as it appears below
using some sort of ascii text editing software.
The key thing for doing this successfully is you need to work with a
"plain text" editing software. If you are working on a MS Window-based
computer, you want to use something like "NotePad;" every version of
Windows has this application in the "Accessories" folder. Windows users
who want something a bit more sophisticated should check out various free
HTML editing software-- for example, NoteTab
Light.
If you are working on a "pre-OS 10" Macintosh computer, you want to
use either "Simple Text" or "TeachText," depending on the version of the operating
system. If you are using a Macintosh running a version of OS 10, you
will want to use "Text Edit" or "BBEdit." In the Mac lab at EMU, we
use a software called Taco, an excellent
and freeware package. If you use "Text Edit," look under the "Format" menu
and select "Make Plain Text" before you begin this exercise.
You can also use software like MS Word or WordPerfect, but if you do use
a normal word processing software, make sure you save the document
as "text only." If you don't save this as "text only,"
the exercise I describe here won't work right.
<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!
And remember-- if you use something like MS Word or WordPerfect, you need to
"save as" text only.
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." But almost all newer
computers (those running newer versions of the Windows or Macintosh operating
systems) might try to complicate this by "hiding" the extension (the ".html"
part) or by asking if you really want to include the extension or not. No
matter what your computer tells you, be sure to include the ".html" part.
Also, while it isn't too important yet, there are a few rules you ought to
know about naming your html files. First, 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.
Second, all html files must be one word. This is not optional; these
are the rules! You can't save HTML files the same way you save your
run-of-the-mill word processing file. A few general rules:
- NO spaces-- not "my page.html" but "mypage.html"
- NO characters other than letters, things like the following:
";,?/&^" etc. The only punctuation you should have is the
"." preceding the html.
- NO capital letters-- not "Index.html" but "index.html"
- WITH ".html" or ".htm" at the end--
without that little addition, it isn't an html file.
Also, make sure you remember where you save this file! We will
talk about the options for doing this in the Mac lab at EMU. On your
computer at home, I would encourage you to create a folder for your web work
and to save everything having to do with your web site there.
Step 3: View your file in your browser.
How to do this varies with different browser software, but generally, look
under the "File" menu, and select the "Open File..." or the "Open
Page..." option. This will open a menu option like the one you get when opening
any file from an application. Find the file you just saved ("index.html" or
"index.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">Eastern Michigan University</a>
The part in the quotes, "http://www.emich.edu," is the URI or "address" of
the web page to which you want to link. You can link to just about 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. The "<a" before the address is important
because this is where the link begins, and the "</a>" part
is important because this is where the link ends. And "a" stands for "anchor,"
in case you were wondering.
To add a link, go back to the HTML file you're working on (note that you
have to do with this with the software you used to make the basic HTML file
and not 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 graphic formats for images on the Web: "gif"
and "jpeg" (or "jpg"). There are also 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.
It depends a bit on the software you are using to save a graphic from the
web, but most graphics available on the web can be downloaded with a few simple
commands with most browsers. 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 need to save this graphic in the same folder or directory as your
index.html file! 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 clip art on the web.
Okay, having said that, take this graphic:
How you will save this graphic depends a bit on the browser you are using
and the kind of computer you have. he imIf you have a PC powered with MS
Windows, put your mouse over the image and right click. If you are using
a Mac, try holding down the button on the mouse or holding down the command
key (the one with the thing that looks like a clover or a pretsle on it)
while mousing over the image.
Make sure that you save this graphic as "dalitimewarp.gif" and
in the SAME PLACE-- that is, the same folder-- you save your HTML file.
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 your browser,
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