Soj's logo

Sojourner's
Web Service


Page Three

A crash course in HTML


Okay, you've thought your way through it all and now you're ready to start building. But you're actually not really ready quite yet. First, you'll find a little learning will take you a long way in the process.

HTM what?


HTML stands for hyper-text markup language, but you don't really need to know that. What you do need to have is a basic idea of how it works.

(Yes, I know; this is almost the 21st century; we have programs that can actually format a document into HTML, so you don't have to know a tremendous amount about the language. However, I believe you'll find that your work will be a lot easier to manipulate, change and, when necessary, correct, if you have a decent working knowledge of HTML.)

If you're viewing this through I-Explore (if Microsoft Internet Explorer is your current browser), click View and then Source. If you're using Netscape, click View and then Document Source. What you get is the formatted material (material which includes HTML tags so that a browser will read it properly) that is displayed on the browser as this Web page. See all those letters encased in left (<) and right (>) arrows? That's HTML. Those combinations of arrows and letters are called tags, and they tell your browser how the Webmaster wants the Web page to appear. (You often get the same kind of tags if you open a document in one word processing program when it's formatted for another program, but that's really neither here nor there.) The arrows tell the browser that what's between them is a format command, not information to be displayed.

If you still have the source document up, scroll down past the stuff at the top (and if you don't have it open, you might want to open it, since we're going to be looking at it off and on). Many of the codes -- the letters between the arrows -- are self-explanatory. B stands for bold; I for italics; P for paragraph; CENTER for, what else, center (or centre, depending upon your current locality). Some aren't quite so obvious. We'll take a look at these in a minute.

First, note that some of the tags include a slash (/), and some don't. A tag without the slash tells the browser to turn on a format; a tag with the slash tells the browser to turn it back off. With this in mind, there's one really important thing you must remember about formatting:

If you turn on a tag, you must turn it off!


Of course, as in every discipline of life, there are always exceptions. BR is one of those, as is P. But for the most part, you must remember to turn tags off when you're finished with them. If you don't, you'll be amazed at how peculiar your Web page will appear. I can assure you I write from experience.

Another minor point you may notice (and if you don't, you'll never make a great detective): the tags are in all capital letters. This isn't necessary, but it helps differentiate between the tag and your text, making it easier to find the tags when you want to change them.

One more thing you should note is that some material between arrows is incased in quote marks ("). Whereas the tags can be thought of as absolute commands, this stuff is more in the lines of variables on those commands designed for particular circumstances or individuals. It the tag is <Thou shalt not kill>:, the variable might be "unless someone's coming after you with a machete". These variables are case sensitive (have to be in lower case or upper case, depending upon certain factors that we'll discuss later) and generally have to do with such things as graphics and colour.

So, let's take a look at each of the tags on this page.

You'll note that the very first tag is<HTML>. The very last tag on the page is </HTML>. By inserting these you are telling the browser that this page is written in HTML, and that's the way the browser will read it. Within the HTML tags are:

<HEAD>: a Webpage is made up of two parts, the HEAD at the top and the BODY below it. The material in the HEAD is for use of the programmer and the Internet and is only seen when a person looks at the document source; the material in the BODY affects what the person who downloads your page sees. What goes in the HEAD is pretty much up to the programmer. I'm a firm believer in k.i.s.s. -- keep it simple, stupid -- so I include only what's needed. And what's needed is:

<META>: This provides indexing information for the Internet. One of the most important indices is keywords, those words that a search engine looks for when a person is surfing the Web. I want people who are looking for things Christian or for pages dealing with Web building to find me; therefore, I've put those words in my keywords. (That's not all that's needed for your Website to be accessible, but we'll discuss that in more detail later.)

<TITLE>: This is the title of your site, the one that is displayed on a search engine. Close it with </TITLE>.


As you can see, the <HEAD> is closed with </HEAD>. If you don't close your HEAD, nothing will ever appear on your Web page and people will wonder if that's the only head that's not functioning properly.


What is the HEAD without a BODY? (Yes, I know what Scripture says about that.) The BODY is that glorious piece of work that everybody sees and admires -- you hope. It's what conveys your message to the world. So let's see what makes it tick. (Boy, the puns I could come up with here!)

As you might assume, this starts with <BODY> and will end at the end with </BODY>. The parts of BODY are:

<BGCOLOR="">: BODY and BGCOLOR could legimately be separated into <BODY> and <BGCOLOR="">, but for simplicity's sake most people put them together and they work just fine. BGCOLOR stands for background colour (sorry for the switch in spelling that word; most of the spellings of tags and such are in American English; I've become more accustomed to the British spellings), and could be considered to be the colour of the 'paper' on which the material on the Webpage is 'printed'.

If you'll look at my Red Page, you'll see that the background is solid red. That's because I've inserted the red colour as my background colour. Turning back to the document source that you should still have before you, you'll see that the colour is "#cc0000". That's just Internet lingo for red. You can also type in the word "red" and manage to get the same result. We'll talk about colours and how to produce them later. For now it's more important that you know how to insert any colour into your background.

There's a particular reason why I asked you to look at the Red Page for background colour. It's because on this current page, Page Three, BGCOLOR is really unnecessary. I could have omitted it but left it on so you'd see the formatting for it. If you take a good look at the background on this page, you'll note that it isn't solid; it's kind of a marbled red. That's because of BACKGROUND="redmarb.jpg". BACKGROUND="" allows you to use something more interesting than just a colour as the 'paper' on which your material is 'printed'. You can use just anything that can be saved in a .jpg or .gif format (something else we'll have to discuss later). One word of warning: don't get so excited about a background that you allow it to obscure the material on your Website. The reason why my Work Page is a work page only is that I haven't been able to come up with a font colour that could be read on the stone wall background, and I really like that stone wall background. So I keep the page as a work page.


<CENTER>: three guesses what this does.

<IMG SRC="">: When you build a Webpage, you generally don't store all its parts in one file. The page at which you're looking is comprised of several files: page3.htm, redmarb.jpg, soj-grey.gif, home-gry.gif, back-gry.gif, e-m-gry.gif. page3.htm is the source document; the other bits are graphics. All of these files are stored on the computer of my Internet Service Provider. When a person downloads Page Four of my Website, he downloads all of those files into his browser, and IMG SRC="" tells the browser where these graphics belong.

<IMG SRC="soj-grey.gif"> tells the browser that I want my logo, which is saved as soj-grey.gif, to be displayed as the first item on my page. ALT="" is the alternative; if for some reason my logo doesn't show up (the most common reason, other than my having misspelled something along the way, is that the browser used by the person downloading this Webpage can't handle it or his computer isn't powerful enough for it) the person downloading the page will see the words Soj's logo, so that he won't be completely in the dark as to what it is he's missing. ALT isn't necessary, but it is a nice thing to include, especially if you're interested in getting your message to people who don't have access to powerful, modern computers.

<FONT COLOR="">: Does this sound familiar? That's because it's similar to BGCOLOR and uses the same colours and codes. This tells the browser in what colour you want the print to appear on the Webpage. Often the font colour will depend upon the BGCOLOR; if you have a dark background, you'll need a light font color. More about colour later, but suffice it to say that you can change the colour of every letter if you like -- although I suspect that might look a bit peculiar in the end.

<H1>: One of the ways in which attention is drawn to certain aspects of any written document is by enlarging the size of the text. On the Internet this is done with a series of H tags . These range from H1, which is the largest of the regular tags, to H6, which is -- you guessed it -- the smallest.

There are additional <FONT SIZE=> tags, which will make H1 larger, as you can see from the words Sojourner's Web Service. These should be used sparingly.

By the bye, you note that I turned on H1, and then turned it off with /H1. Very important. I can't stress enough how important this is. If you don't turn it off ... well, I'll leave the consequences to your imagination.

<B>: This was mentioned earlier; it means Bold. Remember what your parents said about the lights: turn it off when you get finished with it.

<BR>: This is a break; it inserts a blank line in your document.

<DL> <DT> <DD>: These stand for Definition List and DL Terms and DT Definitions respectively. This is one way in which to make material indent and appear in list form. Other ways are with <OL> and <LI>, which are Ordered List and List Item; and <UL> and <LI>, which are Unordered List and List Item These do very much the same thing, except that they add numbers or bullets to your list.

Something to notice in these -- and in all tags -- is that they nest inside one another, much as a set of nesting tables. The order is <DL> <DT> <DD> </DT> </DL> . It's always best to nest sets of tags within other sets, rather than crossing them, and in some cases it's imperative.

<H2> etc.: From here to "From here you can" should be pretty well self-explanatory, except perhaps the & # 060; and & # 062; tags. These can be tricky if you're not familiar with unusual characters and letters in Windows and Dos. Hmm, let's see how I can put this to make sense.

Sometimes you can press a key on two computer keyboards and not get the same character. That's because not all keyboards communicate the same thing to the computer. The same is true of the Internet. While letters from A-Z and numbers 0-9 will appear the same no what what browser you use, certain characters, such as the symbol for the British pound Sterling (£), letters with accents, etc., will display differently on different browsers. Therefore, rather than just typing those characters so that they appear correctly on your wordprocessor or browser, you have to insert them as a numerical code prefaced by & and # and ended with ;. The numerical codes are the same ones that can be used in any wordprocessor document by holding down the alt key while typing in the number; they can be found through Windows Character Map.

(And if all that's too much, you can always spell out what you mean; if you can't manage to get £ to display correctly, just type out pounds. People will get the idea. And if all else fails, e-mail me and I'll see what I can find for you.)

At any rate, the & # 060; and & # 062; are the codes for < and > which, if produced strictly by the keyboard, would do all sorts of weird and not-so-wonderful things to this Webpage, since the browser would look at the stuff between the left and right arrows and want to use it as some sort of formatting, which I'd rather it didn't do.

Now we've arrived at the bottom of the source document. If you're not at the bottom, it would probably be less confusing if you went there now.

<HR> etc.: This is a line which is size 6 (it can be no size, which means it's just a thin line, up to 10 or more), 100 pixels across the page, centered on the page, and in a lovely shade of grey, which colour you probably won't see if you're viewing this through Netscape.

<A HREF="">: Ah, yes: links. This is the code that enables you, with the click of a mouse, to slide over to some other Webpage. These listed take you to my homepage and a few other enjoyable spots. You can also link to other people's Websites by including the entire URL (e.g., http://blah.org./blah.htm) within the quote marks. It's always a nice idea to ask before linking.

You don't have to do the underline for a link; <A HREF=""> does that automatically.

And what do you have to do at the end of <A HREF="">? </A>, which closes the link.

An important link is to you as a person via e-mail. That's what <A HREF="mailto:sojourner.a@ukonline.co.uk"> is; it's a link that opens your mail program, inserts my e-mail address, and lets you tell me how wonderful you think I am.

Well, it looks like that's about all, except, as mentioned above, for the fond farewells: </BODY> and </HTML>. And there you have the anatomy of a Website.

From here you can either go Home
or
Back to Page Two for a refresher,
or
Forward to Page Four if you think you're ready to experiment.

If thou needest me, me.