HTML Primer III

Links

Links are the heart of HTML. And they are as easy to code as any other HTML tag. Here's a link to BedeNet's home page:

<A HREF="bede.net"> Go to Bede Net's home page</A> That's it. It will appear in a browser like this: Go to Bede Net's home page. Your browser automatically interprets it as a link and either turns it a different color or underlines it or both (depending on how you set your preferences on your browser). Now, let's parse this code.

First is the "A". This means anchor. Don't ask. The next part is "HREF," which means hypertext reference. Then an equals sign, a quote, the link you want, and a quote. Here you are telling the browser, "The following text will link my reader to a hypertext reference which equals bede.net." And, just as bold bolds the words between two tags and just as underline underlines the words between two tags, so does HREF turn the words between the two tags into a link. All the words. So between the tags comes the text you want to browser to display as a link, in this case "Go to Bede Net's home page." Finally, you close the anchor tag with </A>. And that's it.

Let's just pause for a second and look at the HREF. This is the tricky part and often leads HTMLers into trouble. To understand links, you need to know something about directories (or folders as they are sensibly called in Macintosh parlance). In fact, we will, for the sake of the metaphor, call them folders. Picture your desktop. You have documents on it and folders into which you put those documents. Mr. Gates and his Microsoft teams decided to call folders "directories," since that's what they are called in UNIX (on which DOS is based) and he had not yet borrowed the Macintosh desktop idea (which Steve Jobs borrowed from someone else). But with the advent of the desktop metaphor, many of us had folders, rather than directories, sitting on our desktops. Mr. Gates just didn't keep up with the metaphor. In any event, for the purposes of this explanation, just remember that folders=directories.

One more bit of jargon. You say that a link calls a new page. When you click on a link, the browser calls for a new page to arrive. "Get me a new page," it yells into the void. The page on which the link sits (this page, for example) is called the calling page." Pretty straightforward.

Now, the browser reads a document in a folder. To see exactly what the browser is reading, look at the URL indicator above this window (the white space with the "goto" preceding it. As you can see from the URL (uniform resource locater), this website is

www.geocities.com/~jarrow/res/primer.html Geocites.com is the name of the host or server. That's the first part. Then comes a backslash, which indicates another element. The next element is a folder. "~jarrow" is the name of the first folder (or directory). That's the next part. "res" is the folder inside of that. And finally, "primer3.html" is the name of the document currently displayed in your browser. You can always tell a folder from a document in a URL, since documents always end a path. The series "www.geocities.com/~jarrow/res/primer.html" is called the path.

Let's say that this document you're reading contains a link and you click on it. Now you've asked the browser to get another document. It calls for that new document, "primer2.html" for example, and it will automatically look in the same folder in which it found the last document. Since you haven't told the browser to look in a new folder, it assumes you mean the same one it's been looking in. In the case of this website, it will look in the folder "res." So if I want the link to work, I'd better have "primer2.html" in the same folder as "primer.html." In other words, HREF="primer2.html" needs to be in the same folder as the page calling it.

But what if you need to link to a page that isn't in the same folder? Well, then you need to change the path in the HREF call. To back up one folder (or directory), you insert ".." which means "back up one folder." So, if I want to call a page higher up on the path, I use a double dot for every folder I want it to back up. In the case of this website, if I want to call the home page, I write:

<A HREF="../index.html"> Go to Bede Net's Home Page </A> For evey folder you need to back up, insert another ".." and a backslash.

What if the link needs to call another website entirely? Then you insert the whole shebang: HREF="http://www.anotherwebsite.com" You'll notice that this time, I've included the string "http://" before the URL. This is called the protocol. It's an acronym which stands for hypertext transfer protocol. The two backslashes indicate that the path is to be sought on another site. If you see three backslashes "///", this means that the text is to be sought on the local machine (your own home computer). It's important to put this in, since there are other protocols. One such protocol is the file transfer protocol, or ftp.

The URL, as you probably know, shows up at the bottom of your browser window in what's called the status bar. Just move your mouse over a link and you'll see the path the link will call. Here's a link to Apple Computer. You can change the text that appears in a user's status bar, but more on that much later.

Anchors

Anchors are links to the same page currently being displayed. They're internal links. Let's say you have a long page, a bibliography, for example, with hundreds of entries. You want your reader to be able to jump from section to section without having to scroll through the whole page. To do this, you use anchors.

An anchor can be a word(s) or an image. It's easier to describe by showing you one. Let's make this word an anchor: ANCHOR. Now, if I want my reader to be able to jump to this word from anywhere in the page, he or she can. I've put a link at the bottom of this page which will allow you to jump right back here. So, all I have to do is provide my reader with a link to that anchor: Here's a link to the bottom of the page (go there now).

Use the <A></A> tags without the HREF, and give the anchor a name.

<A NAME=end_of_page> That's all. </A> Now, you can link to that anchor from anywhere in the page. You need to build a link. But in order to tell the browser that you want to call an anchor and not a new document, add the number sign. Here's a link to the anchor we just made:

<A HREF="#end_of_page"> Go to the end. </A> So with a link and an anchor, you can move your user all over the page. Don't forget the number sign or the browser will return an error!

Images

Images bring a web page to life. Putting them on a page isn't difficult. Putting them exactly where you want them on the page is the tricky part. Let's begin with putting an image on the page. The code is:

<IMG SRC="image.gif"> That's it. The code is fairly clear. Let's parse it. "IMG" means image, "SRC" means source, and the rest is the file name of the image. Note that the file name works just like an HREF. "image.gif" needs to be in the same folder (or directory) as the calling page. You can also load an image from another folder or from another website. Treat the SRC call like HREF. you could call an image from "http://bede.net/res/left.html" which would fetch the image on the top left of this page and put it on yours. Beware! You don't want to infringe copyright. A rule of thumb is always ask for permission.

Now, there are some extras. The browser that loads the above image will place it on a page without incident. Be careful: sometimes the image from your graphics editor is much bigger than you suppose. So it helps if the browser knows how big the image is. This will speed up the process of loading and displaying it. For that, there are two additions to the image call: WIDTH and HEIGHT. Here's an example:

<IMG SRC="image.gif" WIDTH=62 HEIGHT=253> This calls an image that is 62 pixels by 253 pixels. Your graphics editor should have an information window to give you the pixel height and width of your images. It doesn't matter how many dots per inch your image is in, or whether it's RGB or CKMY; what matters is that it's saved in a format a browser can read.

The great thing about the height and width properties is that you can change the size of an image without having to go back to your graphics editor. Let's say I wanted to shrink the image above by fifty percent. I could simply change my code:

<IMG SRC="image.gif" WIDTH=31 HEIGHT=126> Now, a browser loading the image will cram it into a space of 31 pixels by 126 pixels. It works the other way, too. I can make the image bigger. But be careful: if you enlarge a small image, it will usually look awful.

You can also put a border around your image. This is effected with the BORDER property. For example,

<IMG SRC="image.gif" BORDER=2 WIDTH=31 HEIGHT=126> will display the image with a 2-pixel border around it.

Layers: Placing Images on the Page

You can use an image as a background to your page or you can place an image at a particular point on your page. Usually, people use tables to place images. For that, refer back to the tables section of the previous page (and rather than writing "cell one," put an image in using <IMG SRC="image.gif">). You can create as many tables as you want and place them wherever you want. This is the benefit of tables. They can be placed anywhere in your document easily.

Thanks to HTML 3.2, there's another way. It's called layers. With layers, you can place a picture exactly (not relatively), overlap pictures, merge pictures, and so forth. Layers are exactly what they sound like. The images of this page are placed using layers. But, of course, there is a downside: only those people with browsers capable of reading HTML 3.2 will be able to view your page as it is meant to be seen. You need to make a decision. Do you want your page to take advantage of the latest advances, or do you want your page to be accessible to people running older browsers? As you can imagine, the decision is a difficult one.

To place an image using layers, create a layer: <LAYER>. That's it. Now, tell the browser where you want the upper left-hand corner of that layer to be. Remember, the upper left-hand corner. That's where your image will begin. So now you add the information: <LAYER LEFT=5 TOP=20>. This says, I would like my image to be 5 pixels from the left of the screen and 20 pixels from the top of the screen. Then call your image: <IMG SRC="image.gif" BORDER=2 WIDTH=31 HEIGHT=126>. Now end your layer: </LAYER>. And you've placed your image. Once again:

</LAYER> That's it. But take note! Once you start with layers, you have to keep with them. Now your text goes in a layer as well. No big deal. Just put LAYER tags around your text.

The beauty of LAYER tags is that with the LEFT and TOP displacement, you can put your images under text, images exactly next to another, and so on. If you want to move them, you don't need to redesign your page and rewrite tons of HTML. You only need to change the displacement values. You can animate layers, hide them, show them, and so forth.

Layers are sometimes named: <LAYER NAME=MyLayer LEFT=5 TOP=20>. This allows you to hide a layer, change its values, move it around the screen, bring it to the forefront, and so on. But to do this, you need some JavaScript knowledge. On the other hand, you could just borrow the code from the opening page of Bede Net!

Frames

Frames are always a tricky business. Some browsers don't read frames, so some of your viewers won't be able to access your pages. But you may want to take advantage of the benefits frames confer, especially the consistent presence of a navigation bar.

Frames are exactly what they sound like. Your browser window is divided up into separate frames, within which different pictures or text can be shown. For example, you might have a window divided into two frames, one on the left, and one on the right. Into the left frame, you put a navigation bar; and into the right frame, you put all the pages the bar calls. It's much easier than it sounds.

The first thing to do is to get the idea of a frame straight in your mind. A frame is merely an area of the window. It is not an object, a picture, or a new window. When you declare a frame, you are telling the browser, please reserve 25% of any window, let's say on the left-hand side, for an image. The other 75% will be used for displaying my various pages. The browser, ever at your command, then divides up all subsequent windows into a 25% section and a 75% section. Now, it's up to you to tell the browser what to put in those sections.

Let's begin with how to tell the browser to divide a window. Your frame document is called the top of the hierarchy, or parent document. This terminology is important. The parent document has children. So, each frame will hold a child of the parent. Here's a simple parent HTML file:

Let's parse it. First the HTML declaration (which is closed at the end of the document), then the title inside the head. Now the frame declaration: You tell the browser you want to declare a frameset. It will have two columns, one of 20%, the other of 80%. The width of the broder is 0 pixels (you can make the border as wide as you want). There will be no scroll bar.

Next, you give the first frame a name (the browser knows it's the 20% frame because the browser is orderly: the first declared frame gets the first declared name). The name is "A." You can call it anything you want. Then, the HTML source (SRC) of the frame is a document called "navigationBar.html." Let's stop there for a moment.

Remember that I said that the parent holds the children. Well, like parents and children everywhere, the species of the child is the same as the species of the parent. So, HTML frame documents hold HTML children documents. Don't try to put a picture into a frame, because the parent won't recognize it as its child! It requires an HTML document.

The next frame is named "B," and holds a document called "main.html." This will be the main window in your frameset and take up 80% of the screen. Finally, you close the frameset tag and close the HTML. That's it. Now you have frames. The screen will be divided like this:

A
nav.html

B
main.html

For the left frame, the browser requires a child document called "navigationBar.html" while for the right frame, it requires a child document called "main.html." Now you need to make those.

The "navigationBar.html" document need be no more than a document that calls an image:

And that will suffice. Of course, if you want your navigation bar to be an image which a user can click to access various parts of your site, you need to make an image map. You can see what one looks like by viewing the source of this page. Much simpler is to make a list of links. View the source of this page, and take a look at the links under the left picture. They look something like this:

So what does target mean? In order for the browser to know which frame you want a document to appear in, it needs to know the name of the frame. This is why you named the frames. Target says open this link in this frame. When your user clicks on "First Page," the browser knows that the target of the link (the place where it will send the page) is Frame B. And, if you recall, the 80% frame was called B.

What will happen is that your user will click on the link and your Page1.html document will open up in frame B, the 80% portion. If you would like the page to open in a new window, then write TARGET="_TOP". Don't forget the underline character!!!

There's a lot to learn about frames, but one of the handier things is that the declaration of frames not only encompasses columns, but rows, too. Instead of writing COLS="20%, 80%" you can write ROWS="20%, 80%" and get a horizontal disposition. Another thing to note is that you don't need to declare frames in relative percent. You can make an absoulte declatarion, too. For example, let's say my navigation bar takes up 100 pixels by 250 pixels. What happens if 20% isn't enough for my viewer to get the whole bar? Rather than writing 20%, I can declare a pixel width: ROWS="100, *"

The * is another important thing to know. It is a random character, meaning "whatever's left." If I write COLS="100, *" I'm saying, "I want 100 pixels on the left for one frame, and whatever's left for the other. This works with percentages, too, but it's not mathematically useful. The star is a good character to know.

Some Closing Thoughts

HTML is very easy once you get used to it. But designing a readable page takes more than sound HTML knowledge. Your first step should always be a sketch. Sketch out what you want your page to look like. This will save you a lot of time when it comes to coding. Your second step sould be a WYSIWYG editor. WYSIWYG (pronounced WIZ-ee-wig) stands for "what you see is what you get." Netscape includes a free WYSIWYG editor called "Composer" in its later versions. It's an excellent way of generating a quick HTML file. You can create tables, links, and backgrounds with a click of a button. Often, a WYSIWYG editor allows you to set up your page with as little effort as possible. And third, go to your HTML editor. Here, you clean up your code, get rid of unwanted detritus (like all those META tags netscape puts in), and streamline your page.

A good design trick is the logo. Whether it's a fully-designed image or simply a unique background color, try to put something on your pages that says, "These all belong to the same site." It can even be the name of your site in a small, unobtrusive font.

Don't let yourself be overcome by the complex. Too many pages suffer from code overload. Since novelty is often the only thing that marks out a new site, many HTMLers will fill their pages with animated GIFs, Java code, movies, sounds, and so forth. But the longer a page takes to load, the less effective it is. Often, a short, uncluttered page will grab attention much more effectively than a byzantine maze of images and words. Remember: simplicity, simplicity.

If you do want to add movies or Shockwave, it's a good idea to warn your viewer that the page coming up is large and may take a while to load. Always give the viewer the option to back out.

Good luck!

More installments are planned. Please check back periodically.

First Installment

My Anchor