Beginning HTML

Dan Chaney
Humanities/Social Sciences
306 Edmon Low Library
dan.chaney@okstate.edu

HTML stands for HyperText Markup Language, which is what makes the world go round on the World Wide Web. HTML is the very basic language of information presented via the WWW. It is a very primitive programming language, yet not all that dissimilar from other more complex programming languages. Does that mean you need to know computer programming languages to understand HTML? Absolutely not. I'll make it simple and give you the basics for creating your own web page.

My Background

Some may not know what qualifies me to teach an introductory HTML class. Believe it or not, many years ago, I was the Library's very first Web Editor (1996-1999.) I was responsible for much of the initial organization of the Library web site, and it still maintains some of that organization. And yes, I have created most of the OSU Library web problems that the current Web Editor has spend vast amounts of time to clean up. I know the HTML code pretty thoroughly, to the point where I can sit down and type it out without having to use an HTML editor or a book to look up tags. And many folks in the Library can tell you stories of creating a web page in HTML, screwing something up, being unable to figure out the problem, showing the code to me, and I find the problem in a matter of seconds. I'm weird that way.

Why This Class?

Some would suggest that with fancy HTML editing software, why would you need a basic class on HTML? From many years of experience, I can attest to the fact that nothing replaces a solid, basic understanding of HTML, such that when your HTML editor inserts some goofy stuff into your code (trust me, it will insert goofy junk occasionally!), you can look at the code side and fix it. WYSIWYG ("What You See Is What You Get") HTML Editors (like DreamWeaver) take some getting used to, and tend to insert multiple tags whenever you change your mind - so occasionally, we need to go into the HTML code and delete extraneous tags.

We wanted folks to understand the basics, so that when you move to an HTML Editor, you can appreciate the ease at which it creates lovely web pages, but also have an understanding of what the HTML Editor does when you click on a button to change font styles or text size, for example.

Conventions

Throughout the class I'll refer to code side and design side when creating web pages. WE need to define these two conventions:

Code side - I'm talking about looking at HTML, looking at the tags we use, and all of the "behind the scenes" magic we employ when we create web pages.

Design side - I'm talking about how our HTML looks when we view it via a browser. What does our HTML look like when we view it the way it is intended?

Another thing to keep in mind is that when we create web pages, we tend to pull information, links, images, from a variety of different sources (I'm talking file locations on different servers, some internal network drives available to you as an employee, and some web servers available elsewhere.) It really is a world wide web out there, and as a web designer, you need to keep an eye on the nature and scope of the environment into which you want to contribute to.

You can look at a web page's HTML by clicking on "File" and "View Source" in most browsers. This is helpful for several reasons. It's a way to see what HTML actually looks like. It's also a good way to see how people create the web page effects you might like. If you ask just about any web developer, they will admit to sneaking a peek at the HTML of a page they like -- to see how it's done. This is pretty much how I taught myself HTML ten years ago. And nothing says you can't borrow HTML code... ;-)

Finally, the plan today calls for you all to be able to have open MS Notepad, MSIE, and Firefox. Eventually, you will be writing HTML in Notepad, saving it somwhere, and then looking at it in both MSIE and Firefox. We're going to be toggling between three applications. I hope that process isn't too cumbersome.

Terminology

Web Server - a server is nothing more than a computer which feeds documents upon request -- much like a server in a restaurant brings your order, a web server basically sends you what you ask for. For all intents and purposes, we're talking about computer files (it could be audio or video, or basic text files (HTML.)

Web Browser - software which interprets HTML (or other file formats available online.)

Web Page - a single page, created in HTML, which is loaded on a web server and available for public viewing.

Web Site - generally speaking, a web site is a bunch of web pages, linked together and to the outside world, stored on a single web server (but not always...)

Web Page Considerations

So, you want to create a web page? Some things to think about...

First Question: "Why?" Why do you wish to create a web page?

Second Question: "What?" What are you going to put on your web page? What do you have to offer the WWW community or the OSU Libary?

Third Question: "Is it unique?" Are you duplicating services or information available elsewhere?

Fourth Question: "What's the purpose of the page?" Is this page for a one-time use, or is it something you envision as a long-term addition to the Library's web site? If it's a page for one-time or limited use, you can be flexible with content, style and appearance. If it's a page you'd like to contribute to the Library's web site long-term, there are some rules for style, content and appearance -- but those rules are for another class.

Creating HTML

Writing HTML is as simple as opening up MS Notepad and typing away (which is what we are going to do.) HTML documents can be created in any text editor or word processing software, such as MS Word. There are also many software HTML editors available -- DreamWeaver is the one I use. (Caution: be very careful of using MS Word to create a document and then "save as" an HTML file. MS Word converts documents to HTML, but it has an annoying tendency to insert all kinds of "junk" in the code side of the file -- code which is unnecessary and really awful to edit out for guys like me...)

Getting into an HTML/Web Page Frame of Mind

The first tip I can offer is to place yourself into an HTML frame of mind - by this, I mean empty your mind of all rational thought and assumptions and start to think like a machine or computer. Think very literally. I learned this in computer programming courses I took in college. Remember, a computer will only do something if you tell it to, and if you tell it to do nothing, it is very literal. What this means as a web developer is that we can type as much text as we want on our web page and lay it out as we want, but we need to tell the computer how to handle each letter we enter in HTML. Now, it's not a matter of letter by letter telling a browser how to display that letter, but we need to use HTML to format those words to reflect the style we wish to present. If we don't use HTML to define style and format, the browser would display our page as a continuous string of characters.

HTML tells a browser how to display text, colors, images, locations, layout, links, etc. It can be very "vanilla" or plain, or it can be very complex and fancy. If you've never created a web page before, I generally suggest starting out very simple and once you get the hang of the basics, then you can make it more complicated. A good rule of thumb to start out with is create a web page with an eye to the content and not the appearance. Appearance can always be changed, but content is often constant.

What's First?

Frankly, you want to have a web page with more than just your name on it. What do you want on your web page? Often, this is the hardest part -- getting started and coming up with an idea or a message. Remember also that while I just said content is constant, it also tends to evolve over time. Don't be surprised if your first web page looks completely different after a year.

My Generic Web Page

Here's a sample web page, or a sample design for a web page. It's surrounded in a red box to set it off from the rest of this page.

All I've done in My Generic Web Page is jotted down a bunch of ideas and things I want to present to my visitors. I have made no effort to be fancy or highlight components of my page. This is basically step one -- getting your information together. Note: I also included a photo and a link, which we'll deal with a little later.

Creating HTML

Writing HTML is all about tagging - you take text and put a tag around it to tell the browser how to handle that particular text. Generally, these tags look like <tag> and </tag>. You open a tag and later you close it -- the opening tag is <tag> and the closing tag are the same tag you opened with, but you add a / to it -- </tag>. If you open a tag and forget to close it, you'll know it (trust me!) So, Rule #1 of Writing HTML: if you open a tag, you MUST close it. Think of tags like containers - they surround the text on both sides.

The basic tags are:

1. <html> and </html>
2. <head> and </head>
3. <title> and </title>
4. <body> and </body>

<html> Tag

The <html> tag is the very first tag in your HTML document - we're talking the very first line, the very first thing you type. This tag identifies to the browser that this file is a HTML file, that it contains HTML.

Conversely, the </html> tag is the very last tag on the very last line of your file. Remember, we opened a tag, now we are closing it.

<head> Tag

The <head> is used on the second line of your document, and it notes the start (and ending) of the header area of the document. Within this tag, we use the <title> tag and it's also used for some behind the scenes links to cascading style sheets (which is a different class!) Generally, the </head> tag appears a couple of lines after the <head> tag.

<title> Tag

The <title> tag is generally inserted on the third line of your document, actually inserted within the <head> tag. In the <title> tag you place your page's title - that is, what you are calling your page. It might be "Dan Chaney's Web Page" or "My Generic Web Page". You want to put something in there that is descriptive because the <title> tag is what displays in the (generally) blue bar at the top of your browser, so people will see it. It is also listed when people do a Google search and get your web page in the results. People will often use whatever you stick in the <title> tag as their first indication on whether they want to see it or not.

Generally, you put the </title> tag right after whatever you enter as your title.

<body> Tag

The <body> tag is where you will do all of your content coding - that is, this is where you're going to be doing 99.99% of your HTML coding. The location of the <body> tag depends on what you've put in the other areas, but it generally is the fourth tag that appears. The </body> tag will be the next to the last line of your document.

Basic HTML Structure

So, up to this point, here is what our basic HTML document should look like:

<html>
<head>
<title>Insert Your Page Title Here</title>
</head>
<body>

(Remember, this area is 99.99% of our content, and we haven't said anything about how are going to do it.)

</body>
</html>

Controlling Space in HTML

It sounds kind of weird, but the first real content tags we need to learn are those that set off space - you know, white space. How do we leave a blank line in HTML? Believe it or not, if you just type text into an HTML file without noting white space, you will see a web page that is just continuous rows of text. We need to break up lines and paragraphs, and we need to tell the browser where line breaks and paragraphs occur. (Remember, HTML is very literal - you can't assume that because you hit the return button in Notepad, that will mean a blank line will be inserted when a browser looks at it.)

The <p> Tag

The <p> tag stands for paragraph, and every paragraph or sentence (depending on how your page looks) needs to be surrounded in a <p> tag. In My Generic Web Page, if you look, there are clear paragraphs laid out. For example:

Basically, these are two bits of text surrounded by a <p> tag. The first is a sentence (actually it's a subheading that we'll be dealing with in a moment), and the second is an actual paragraph. In HTML, this is how the preceding example looks:

<p>Who Is Dan Chaney?</p>

<p>Hi, I'm Dan. This is my groovy new web page. By day, I'm a not-so-mild-mannered librarian at Oklahoma State University, but by night, I don my superhero togs to fight crime as Library-Man!</p>

The <br> Tag

The <br> tag is used for a line break. It stops the text and resumes it on the next line. For example, if I wanted to insert a break, here's how it would look:

This is an example of how to use a
line break tag.

In HTML, this is how it looks:

<p>This is an example of how to use a<br>
line break tag.</p>

Web Page Style

The easiest way to think about style on your web page is to follow the example of outlines - you know, the main ideas are listed as Roman numerals at the top (or obviously important), while less important ones are sublimated as (letters (A-Z), numbers (1-100), etc.) In practical terms we're going to adapt this strategy on our page. At the very top of our page, we're going to place the title again, but this time, rather than stick it in a <title> tag, we're going to make it large, so it stands out. People should see your page, and know right away what the title is. For example:

Dan Chaney's Super Fantastic Homepage!

That's pretty big, isn't it? Kind of catches your attention, right? I could even make that title blink...

Dan Chaney's Super Fantastic Homepage!

Boy, that's pretty obnoxious, isn't it? Rule #2 of Writing HTML: just because you CAN make text blink doesn't mean you SHOULD. This is also true for other HTML tricks.

Let's look at My Generic Web Page, this time with the title emphasized, as well as some other emphasis employed.

So, let's talk about how we can make text big, to draw attention to it.

The <h_> Tag

There are a series of tags we can use to make fonts larger or smaller. They are the <h_> tags, where the _ is a number from 1-6. <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Those are in order from largest to smallest - <h1> is largest, <h6> is smallest. Here's how they look laid out in actual size:

<h1> - This is a large size.

<h2> - This is slightly smaller.

<h3> - This is ever slightly smaller.

<h4> - This is even smaller.

<h5> - This is getting tiny.

<h6> - This is getting hard to read.

Notice how they line up top to bottom? This is kind of how your web page should use them. Your title should be <h1>. Your first subheading should be <h2>, and if you have further subheadings, they should get ever smaller (within reason.) Generally speaking, the only <h_> tags you probably will use are <h1>, <h2> and maybe <h3>. The <h4> is basically the same size as the regular font, although it's boldfaced.

Does that mean we use <h4> to put boldface on my page? No. The <h_> tags place all text on a new line, no matter where it appears, so placing an <h4> tag in the middle of a sentence, thinking it will boldface something, won't work. For example, if you coded the following:

<p>I wanted to <h4>boldface</h4> some text, so I placed it in an <h4> tag to try it.</p>

This is how it would look:

I wanted to

boldface

some text, so I placed it in a <h4> tag to try it.

Regardless, we'll talk about boldface in a moment.

Basic Font Style Tags

There are two very basic font style tags for text style.

Boldface

The tag for boldface is <strong>. This is how boldface looks in text. Again, we surround text with <strong> and </strong> to set it off. One thing to remember about boldfacing is that it loses its effect the more you use it, so reserve it for the stuff you really want to emphasize (the same is true for italics.) Also, remember to close your <strong> tag or else you'll have a whole page that is boldfaced! And this is another HTML Rite of Passage -- the forgotten </strong> tag.

Italics

The tag to set off italics is <em>. Here is how italics look. Again, italics tend to lose their effect the more they're used - and also, italic fonts can be hard on the eyes.

Note About Style Tags

Generally speaking, you can combine style tags so that you have italicized boldface, but you must open and close them in reverse order. For example, if we wanted to boldface italics here, this is how the HTML would look:

<em><strong>boldface italics</strong></em>

Notice that we open each tag, insert our text, then we close the tags in the reverse order.

Creating Lists

Notice on My Generic Web Page, there are a couple of lists. Remember, it's this part:

I like to:

1. wear tights
2. bust heads of bad guys
3. yet, also indulge in my sensitive side
• gardening
• watching butterflies
• arranging fresh cut flowers
4. cook

There are two different kinds of lists here - one is an ordered list (the one with numbers) and the other is a nested unordered list (it has bullets and is listed below an earlier list item.) Lists are simple to do.

Ordered Lists

If you want to do a list of things and place them in some order, you can use the <ol> tag - <ol> means ordered list, which means the browser will stick a number in front of every item you list. So, we're going to start with <ol> and we're going to end with </ol>. Now, we have to add items to our list. To add items, we use another tag within the <ol> tag - the <li> tag. <li> stands for list item. So, for my example above, the HTML is going to look like:

<p>I like to:</p>
<ol>
<li>wear tights</li>
<li>bust heads of bad guys</li>
<li>yet, also indulge in my sensitive side</li>
<li>cook</li>
</ol>

Notice here that I have only marked up the ordered list - the unordered list isn't coded yet, and I've not even included it in the HTML. Now, we want to include a nested unordered list immediately after the third <li> above. How would we do that?

The first thing we're going to do move the third </li> down a little because we're going to have to insert that unordered list within the <li> for the third list item. So, here's how we start.

<p>I like to:</p>
<ol>
<li>wear tights</li>
<li>bust heads of bad guys</li>
<li>yet, also indulge in my sensitive side

</li>
<li>cook</li>
</ol>

Notice that I have now moved the third </li> down, and I can start to code in the HTML for that unordered list. It's important that you remember that the nested list falls within the <li> for the list item under which it appears.

Unordered Lists

In the previous example, we have that nested unordered list that we haven't dealt with yet. It's basically the same as the <ol>, except that the tag is <ul> - for unordered list. Now, this is a nested list because I used it underneath a list item from my earlier ordered list. Here's how the HTML code looks for this whole listing:

<p>I like to:</p>
<ol>
<li>wear tights</li>
<li>bust heads of bad guys</li>
<li>yet, also indulge in my sensitive side
<ul>
<li>gardening</li>
<li>watching butterflies</li>
<li>arranging fresh cut flowers</li>
</ul>
</li>
<li>cook</li>
</ol>

Notice the open tags are all closed. Note that in bold, I've shown you the list item tags and the placement of the unordered list within them. I recommend if you're doing lists and nesting lists, you indent them in your HTML file. For example:

<p>I like to:</p>
<ol>
<li>wear tights</li>
<li>bust heads of bad guys</li>
<li>yet, also indulge in my sensitive side

</li>
<li>cook</li>
</ol>

Oh, and if it isn't apparent, another HTML Rite of Passage is forgetting to code the </ol> or </ul> tag at the end of your list. If you forget to close <ol> or <ul> you'll indent the entire rest of the web page because the browser sees the last </li> and it assumes the rest of the stuff is just a part of the list, even though you've closed out the <li> tag. The browser will think you're still doing a list - remember, the browser thinks very literally. This will happen a LOT. Trust me. I still forget to close out list tags.

A Note About Code Side Formatting

When you're creating a web page from the code side, remember to be nice to yourself - go in and leave some white space. Indenting in your HTML file is helpful, as is leaving blank spaces - in fact, it's necessary, if for no other reason than you occasionally may have to go into the code side and look for something. I generally format the code side like I want the design side to look, with lots of blank lines and white space. Realize that web browsers don't care how much white space space you leave in the HTML code, it only looks for tags and text in the tags -- in the code side, you could create an HTML document as a continuous string of characters is you wanted to. I insert lots of white space in my HTML so I can go into the code side and see where stuff is at.

Let's Play With Colors

Unless you want a plain vanilla web page in black and white (sort of like this one), at some point you're going to want to use some color - either background or text. Whenever you incorporate color on your web site, you need to be aware that not all monitors will display all colors that you have available. I mean, there are something like 16.7 million different colors you could use on your web page, but only 216 colors are "web-safe" - that is, colors that any browser will recognize and display properly. Here's a link to a list of web-safe colors. (Don't worry, we'll talk about how to create links in a little bit.)

If we want to add color to our web page, we will be altering the <body> tag. In particular, we'll be inserting descriptions of the colors we will be using. We can define colors for the background (or wallpaper) of our page, text, active links, visited links, and unvisited links. The possibilities are endless!

Now, in case you're wondering, we define colors on our web pages with hexadecimal numbers. Hexadecimal numbers are 6 digits long, and are base 16 numbers (which is probably more than you need to know...) Basically, they are 6 digits and a combination of 0-6 and A-F. For example, the color black, as a hexadecimal number is #000000. The color white as a hexadecimal number is #FFFFFF. We have 216 hexadecimal numbers we use to define color on our web pages, and they are on the link I gave you earlier. (This one.)

But there's more to working with colors besides making wise choices. We need to make sure our colors look good together. Anyone can do a web page that has hot pink background with flourescent green text (Note: this another one of those things where just because we CAN do it, that doesn't mean we SHOULD.) We ought to strive to create web pages with pleasing uses of color.

In the actual HTML coding, we can have one color for the background of our page, another color for the text, another for the links (active, visited, and unvisited). This can be a challenge mixing and matching colors in a pleasing manner.

Here is a link to a web site. called ColorMaker, which allows you to select colors for various components of your web page, allows you to view your color choices in use, and gives you a convenient snippet of HTML to insert into your HTML.

Here's a snippet of code that I gleaned from ColorMaker:

<body bgcolor="#ffffcc" text="#330000" link="#cc6600" vlink="#3399cc" alink="#003333">

I can paste that into the HTML for My Generic Web Page. A couple of notes: the HTML you'll get from ColorMaker will be capitalized, you'll need to make it lower case. You must have the quotation marks and # signs that are used.

If I actually put that code for color into My Generic Web Page, here's how my page would look:

And so, you can add color. Remember, we really haven't talked about links yet, so if you chose a color for links, you likely aren't seeing it on your page yet.

Incorporating Images

Adding images seems to be just something that we do on our web pages. And from My Generic Web Page, you can see an image placed there. So, let's talk about how we can add images to our web page.

First, a little note of caution about images and copyright. If you didn't create the image, you do not have the right to put it on your web page. For example, that image on My Generic Web Page...

You know...that one. I took that photo - I created it. I can do whatever I want with it, and that includes linking it on my web page. That treasured image of Superman that I'd love to put here? I didn't create it, so I can't use it. Major corporations have been known to send cease and desist letters to offenders who have used copyrighted images on their web pages without permission. So, be very careful!

Another concern with images is the file size - that is, how large are your graphics. And by large, I don't mean the actual dimensions of the image, although that can contribute to file size. I'm talking about the size in terms of bytes of storage space used to store it. The larger the images in terms of bytes, the worse it is. If you have images you want to put on your web page, you may need to "massage" the images and shrink them to smaller size, not just file size, but also the actual dimensions.

Why does it matter? Not everyone is fortunate enough to have a T1 line for internet access like we do here at OSU. Image files on web pages can be very large chunks of data that have to move from the web server to your browser. The more pictures you have on your page, the longer that page will take to transfer across the web. It's like the plumbing in your house -- the internet moves data back and forth like water moves through your home plumbing. If you have a narrow pipe, it can restrict the flow of water. Likewise, some people access the internet on old phone lines, i.e., their plumbing is really narrow (this is particularly true of rural states like Oklahoma.) If you've got someone using a 14.4 kbs modem (like my Dad) they are going to wait for HTML and images to load in their browser. Depending on how large your files are, they might wait a long time. So, we want to have some compassion for the low-end users.

Let me give you some idea of file sizes. This page you are looking at is about 56KB in size. There are some graphics - the photo of me is 9KB and the banner graphic for the Library is 10 KB, so right now my page is about 71KB in size. A good rule of thumb is to keep your pages (HTML and graphics) to less than 100KB in size.

Back to images. You can link in photos or other images, as long as you're sure it's cool to do so. Let me give you an example, if you look at the very top of this page, you'll see a library banner. Here it is...

The tag we use to add an image is <img>, but it's a complex tag with lots of other stuff within it. The easiest way to talk about it is to show you the HTML for the banner image above.

<img src="../../../images/bansmall5.jpg" alt="Return to the OSU Library Homepage" width="370" height="90">

Note: the <img> tag is one of the rare exceptions in HTML where we do not have to close the tag.

Relative Vs. Absolute Pathing

Before we really get too into the image tag, we need to spend a moment or two talking about relative and absolute pathing. Pathing is how we tell the browser where files are located -- it's like a road map that tells the browser where the file is located. The web server, in turn, supplies the file to the requesting browser. So, basically, we need to be sure we give the browser exact and precise directions in the pathing. This is the tricky part. There are two ways we can path files.

1. Relative Pathing - we use internal cues or symbols to point back out through the file hierarchy to the file we want to use, using ../ to note levels backward. If you are working entirely with files housed on the same server, this is the preferred method of pathing.
2. Absolute Pathing - we enter the complete URL for the file location, such as http://www.library.okstate.edu/filename.html. If you are accessing files located on a different server, this is how you will do it.

Back to my example, <img src="../../../images/bansmall5.jpg">. This is relative pathing - it means we are noting the file location by referring to file structure several steps outside of the directory where we are currently working. (Don't worry, if you do a lot of web pages, you get used to this really quick - but it can be tricky at first.) Best way to explain how we know how many ../ to use is to look at the URL for this tutorial.

http://www.library.okstate.edu/hss/chaney/net/basichtml.html

I am currently coding HTML in a file named basichtml.html, in a subdirectory named /net, which is in a subdirectory named /chaney, which is in a subdirectory named /hss. That is, I'm working in a subdirectory which is three layers into the file structure of the Library web site - or three levels away from the root level of the site. Note the image tag I used: <img src="../../../images/bansmall5.jpg"> Notice there are three ../ in there -- that's because I'm referring to an image that is three levels back out of where I'm currently working, in a subdirectory named /images - can you see that?

Now, if we were doing an absolute pathing on the same image (which we are not supposed to do, by the way) the pathing on that image would be

<img src="http://www.library.okstate.edu/images/bansmall5.jpg">

You could copy and paste that URL in your browser and you would see the banner image.

Remember, if your file is housed on the same server or in the same file hierarchy, use relative pathing. If you're using a file located on a different server, use absolute pathing.

<img> Tag

Back to the <img> tag (now that I've suitably confused you with pathing...) Here's my tag once more.

<img src="../../../images/bansmall5.jpg" alt="Return to the OSU Library Homepage" width="370" height="90">

From the <img src> part, we have established the relative pathing for the image we are trying to add to our page. In general, the context of the tag matters and is important. <img src="filenamehere"> -- the img src MUST be there, the equal sign and quotation marks must be there, the pathing to the filename must be there and must be correct, otherwise you'll see a little box on your web page with nothing in it, because you have the location of the file messed up. This example contains two of my now famous HTML Rites of Passage. The first HTML Rite of Passage is forgetting to surround your file pathing in quotation marks. If you put one quotation mark in there and forget to leave the second, it won't work. I don't make that mistake any longer, but I can guarantee it'll happen to every newbie. The other HTML Rite of Passage - messing up the pathing on an image. I still screw up the pathing to an image -- in fact, I screwed the image pathing up on this page at the banner up top. But, I fixed it.

Next, let's consider the alt="Return to the OSU Library Homepage" part. This element is the alternate description. It tells the browser what to display in case people are not looking at images (and some people do browse the web with images turned off in their browser!) Another reason we use the alt element is to help folks who are visually impaired and navigating the web site. They can't see images at all. The alt tag tells their web navigating software what is supposed to be there. If visually impaired folks know we have an image there and what that image is, they can decide if it's important enough to try and view. So, in the alt element, we describe the image or what it does. In this case, we are noting that clicking on the image will return us to the OSU Library homepage - that is, the image will be a clickable image (which I'll get to in a little bit.) What you put in the alt element is really up to you, but it should be descriptive. Don't just code in alt="image here" -- tell folks what it is.

<img src="../../../images/bansmall5.jpg" alt="Return to the OSU Library Homepage" width="370" height="90">

Now we know what the first two elements are. The rest are easy. We have to define the height and width of the image we are displaying - if you don't define height and width, the default is however large that image is originally. This is another MUST have element. The sizes refer to pixels. There are 72 pixels in an inch. A pixel is roughly the size of the point on a pen. Graphics editing software can tell you the pixel dimensions of your images, because you're going to need to know, particularly if you intend to shrink the dimensions of your graphics and want to keep it all proportional. Note: it's really easy to mess up graphics by getting the dimensions wrong. For example, if I transpose my height and width elements in the example above...

I can almost guarantee this will happen -- it's another HTML Rite of Passage. And it can be even worse if the dimensions of your graphic are quite similar, for example 150 x 175 - if you've got a height of 150 and a width of 175, you'll need to make sure to write down which measurement is which.If you transpose those two dimensions, it looks almost right, but not quite. Further, if you just try and quess sizes and proportions on images, without actually checking in graphics editing software, you can wind up with goofy looking images, like this one...

So, that's how we do an image. Let's talk about making this a clickable image (which I said it was supposed to be.) To do this, we have to talk first about linking to things.

Linking Items

Remember that discussion of relative and absolute pathing? Well, this is pretty much the same thing, but tweaked a little at the end. We have already linked in an image with that <img> tag. To link everything else on a web page, we use the <a> tag, but we customize it with elements, similar to the <img> tag. Here's how we do it.

We're going to create a link to the OSU Home Page. We do it by coding

<a href="http://www.library.okstate.edu">Return to OSU Library Homepage</a>

Note: I would normally use relative pathing here, but I wanted to show you the context. Here is how this looks on the web page.

Return to OSU Homepage

Now, let's consider the tagging.

<a href="http://www.library.okstate.edu">Return to OSU Library Homepage</a>

We have <a href>, used in exactly the same context as we did in the <img> tag, we give the file location, in this case, we're giving an absolute link to the OSU Library web site (the relative pathing on this would be <a href="../../../index.html"> ) But notice, the text within the <a> tag - this is a description of the link we are providing. We have to provide that description of the link, otherwise people would never know you're giving them a link. For example, if we just did this

<a href="http://www.library.okstate.edu"></a>

no link would be seen because there is no description within the <a> tag.

Everyone with me so far? Because we can do lots of stuff with the <a> tag. For example, if you look at My Generic Web Page, remember this part?

Here email is a link. I've activated a link to my email address. This allows people to click on my email address and prepare an email which will automatically be addressed to me, all a visitor needs to do is type the message and send. Here's the code for activating a link to your email.

<a href="mailto:dan.chaney@okstate.edu">dan.chaney@okstate.edu</a>

Basically, it's the same as a regular link, with one exception - where the pathing/file location goes, I've added mailto: and my email address. Mailto tells the browser to launch your email software and address a new message to dan.chaney@okstate.edu. This is another of those standard enhancements we automatically do on all web pages.

Now, let's go back to that clickable image we noted earlier.

Here's my <img> tag from before:

<img src="../../../images/bansmall5.jpg" alt="Return to the OSU Library Homepage" width="370" height="90">

To make this a clickable image which will take visitors back to the OSU Library homepage, we're going to adapt the tag we used for linking back to the Library homepage. Here's that one:

<a href="http://www.library.okstate.edu">Return to OSU Library Homepage</a>

Now, instead of putting a text description of the link, we're going to insert a graphic description for the link - the image itself is my link description. So, here's my new HTML tag for the clickable image to the OSU Library Home page...

<a href="../../../index.html"><img src="../../../images/bansmall5.jpg" alt="Return to the OSU Library Homepage" width="370" height="90"></a>

If you want to see what this actually looks like, here you go:

Now, there is one more slight alteration we're going to make to this clickable image. Normally when we link to something with the <a> tag, the browser will change the text blue. When we use an image as our link description, it generally places an ugly blue box around the graphic. We can tell the browser to eliminate that blue box by adding one more element to the whole tag, as follows.

<a href="../../../index.htm"><img src="../../../images/bansmall5.jpg" alt="Return to the OSU Library Homepage" width="370" height="90" border="0"></a>

I boldfaced the additional element - border="0" - This tells the browser to omit the blue box so the whole clickable image looks like this:

If you want to verify that it's a clickable image without the blue box, run your mouse over it - the mouse icon should change from an arrow to a pointing finger - that means it's a link.

Other Things To Do

A very good idea is to view your web page in two different browsers. I generally look at pages in MSIE and Firefox. Believe it or not, different browsers will display pages differently. Sometimes the differences are striking, sometimes not so much. Also, the older versions of browsers will handle web pages differently, but you needn't be too concerned about looking at your pages with old versions of IE.

Remember to monitor your file sizes. If you've got web pages that total more than 100KB, it's probably wise to break it up into two pages.

At the bottom of your pages, it's a good idea to leave a "footer" or information at the foot of the page. Yes, there is a header, as well as a footer. Get in the habit at the bottom of every page, leaving your name, email address, and the URL. Why leave a URL? Because if you are doing a page that is a handout for a class and someone prints out the page, they will have the URL at the bottom in case they want to go back to it later. Another suggestion is to leave a date that you last updated your page. That way people know when you last looked at your page or updated it (Librarians know that one criteria to evaluating information we find on the web is to see when it was last updated.) So, at the end of this page, you'll see an example of how to handle the footer information.

Now, you (theoretically) have a web page ready to go. But it's not actually on the web yet -- that is, it's not saved on the web server. Remember, up to this point, you are the only one who can see your web page, because you've likely saved it on your hard drive. Getting it onto the web server is another matter entirely. Each department should have a Web Liaison who has access to upload files to the Library web server. You can contact your department web liaison for assistance. However, make sure your web page is ready to go. That means going over the code to make sure it's good, that you've not got "junk" in the HTML, that your links all work, that your images are included in your files to upload, or that you have pathed them correctly. Also be aware that the Web liaison is not necessarily skilled enough at eyeballing your HTML to see if it's good. I can look at HTML and spot problems and irregularities pretty easily, but I sometimes don't have tons of time to look at complex HTML documents with lots of goofy junk in it. So, if you're in no hurry, I might be able to help you, but I generally expect folks to have looked at the code side and cleaned it up as much as possible.

Getting your web page to load properly is sometimes tricky, so you'll want to work with your web liaison to make sure everything is online - and some of us web liaisons are better at that than others. This is, of course, intended just for one-time use pages, for the most part. If this is a web page for the Library website as a whole, you’ll need to work with the Library’s Web Editor, Beth Reiten.

Webmaster: Dan Chaney (dan.chaney@okstate.edu)
Last Update: 10 August 2005
URL: http://www.library.okstate.edu/hss/chaney/net/basichtml.html