Created on April 6, 2021

Adding Images

To really give life to a web page, you can add images to it inline with the text. Of course it's not good practice to overload a page with images like so many websites on GeoCities seemed to do back in the late 90's, but inline images can be very useful for providing a visual representation of a subject or object being discussed, emphasizing a certain point, and even constructing the overall design of the site. Considering that the majority of internet users these days have incoming bandwidth well above the maximum specs of dial-up connections, images are essential to an effective website whether modern or retro.

An image tag typically looks like this:

When this tag is read by a browser, it will try to find an image called bullow.gif on the server in the same directory. If the image is found, it will be downloaded and displayed inline with the body.

Absolute Paths

As you may be able to guess, src= specifies the location of the source image to display. If you need to point to an image located elsewhere on your server, you can specify an absolute path.

Preceding the path with a forward slash (/) indicates you're using an absolute path from the root of the server. You'll need to work your way up to where the image is located by typing the name of a directory in the root, and then a directory in there. Of course, /guides/website/bullow.gif will probably not work on your end as it's unlikely your directory tree is set up the same way as mine, or you even have any directories created for that matter. In this case, you could create a new directory called images now, but assuming you're just viewing plain HTML files in your browser and not running a web server, that won't work either.

Relative Paths

So let's talk more about relative paths... on your own website, it's often much better to use relative paths rather than absolute ones wherever possible, as they'll remain valid in the event you need to move an entire directory containing the page being worked on somewhere else. However, a relative pointer can easily be broken if a page is moved to a different location or directory tier, so you'll have to plan out how you want your pages and images organized ahead of time.

Assuming you have created the images directory next to the page being worked on, move bullow.gif in there now, and change your <img> tag as follows:

If everything's been done correctly, you should be able to see the image now located in the other directory.

If you need to point to an image in a parent directory, you might assume absolute paths are the only way to go, but there is a special symbol you can use to refer to the immediate parent directory from the working one. Just as in DOS and Unix, two dots (..) means "go up one level". Let's say you have a page in the blog directory and you need to recall your image still located in images... you don't need to duplicate the file, just write your tag like this:

In the src= parameter, the browser will first go up one directory level to attempt to reach the images directory there, then render bullow.gif if it is available. You can stack multiple ../ instances if you need to go up multiple tiers.

Alternate Text

It's important to not fully rely on images for your site. Not only do some web browsers not have the ability to display images (especially character mode programs like Lynx), some users need screen readers to navigate websites. Alternate text in images allows for greater accessibility to your site when used properly, so it is important that you make good use of it.

The alt= parameter should be self-explanatory - whatever text it contains will be displayed if the image cannot be displayed in its place due to a text-based web browser being used or the source image not being found. Screen readers will also utilize the alternate text, and some browsers like Internet Explorer will display a ToolTip box presenting the alternate text when the image is hovered over.

What the alternate text parameter should contain depends on what kind of image it is, and how it is being used. Generally, a brief description of said image will suffice. If the image is supposed to be a button containing some text or a well-known navigation symbol, just use the text in the button for that field. For example, if you have an image depicting a link to your blog, you'd specify "Blog" and not "Blog button" as the alternate text for it.

Note: HTML tags placed in alternate text cannot be processed.

Image Border

You can make an image clickable and have it redirect to another page or resource, like this:

However, a number of browsers will render a border around the image to indicate that it is clickable. In the event you do not want this border to be displayed, you should add the border= parameter. This is particularly useful if you expect multiple images to be interjoined, such is the case with Razorback's header combining 6 images into a seamless navigation bar.

border="0" is added to the <img> tag so that none is displayed. Of course, if you want a thicker border for any reason, you can specify a large number like 4 if you really want to. I doubt it would look good.

Of course, the parameters for <img> can be specified in any order, as is the case with all HTML tags. There are other parameters you could give to the <img> tag, but generally you don't need anything beyond src= and alt=.

Fancy Up Some Text!

Sometimes, it is useful to give text additional formatting when you want to emphasize key points. Early on, HTML has provided a few formatting tags that mimic commonly used styles in a word processor, like bold and italic text.

Bold text is enclosed with the <b> tag, and italic text is enclosed with the <i> tag. They're self-explanatory and supported in all modern versions of HTML. A few other basic text formats expected in modern word processors are also well supported, including <sup>, or ^superscript. Superscript is useful in combination with <a> for linking to footnotes at the bottom of a page whenever you need to annotate text or cite a source. There is also <sub> for _subscript text, but unless you'll be talking about... molecules... a lot, you may never need to use that.

What about the fancier variants of formatting, though? All of that has been moved over to CSS, or Cascading Style Sheets. CSS makes it much easier to design your website by having all the design attributes concentrated in a separate file which each web page can link to in its <head> container. But if you really want to make your website work on browsers created in 1995, you will have to start using such things like the archaic <font> tag, which is not allowed in newer versions of HTML. Razorback uses HTML3-style formatting in parallel with CSS to take advantage of the more powerful features of the latter while spiritually replicating its style sheet in HTML tags as much as possible so it renders accurately in both old and new browers.

For now, CSS will not be covered, but it's a very good thing to study if you expect to create more sophisticated websites. Instead, we'll only focus on <font> and related relics that may demand a lot more attention than you'd be willing to give. It's worth nothing that a quality of life workaround to the lack of centralized formatting in HTML3 standards would be to use PHP's require_once() function or something else which accomplishes the same thing. When Razorback first implemented PHP, all that was for was to use said function to replicate the header, footer, and relevant sidebar consistently across every page. Over time, it's gotten a little more complex, but server-side scripting is a whole 'nother ball game.

A lot of HTML3-style formatting is usually implemented in existing HTML tags like <table>, but <font> just so happens to be be one specifically created for the job. It lets you use different typefaces and colors. <font> tags should be used sparingly, as too many of them are bound to make your site look chaotic and confusing. It's best to stick to one typeface across the board, encapsulating all text in the <body> container with the desired typeface.

Choosing a Typeface

To use a sans-serif font like Arial, you would begin with this tag:

The browser will first try to use the Arial font. If it is not present on a computer, a generic sans serif replacement font will be used instead. When you are done with the body of text or the entire page, you must close the tag with </font>.

Adjusting Text Size

You can adjust the size of some portion of text, either while also defining the typeface or not. This is useful if you want to make some bit of text larger or smaller. Even with that in mind, you should be mindful of how you use text resizing. In general, there are only specific places where you may want to size text differently. Depending on what you're writing, it may be better to use heading tags like <h1> instead, especially when you're typing up the actual content of a page.

To adjust the text size relative to the current size, use the <font> tag like this:

And you get this:

Pop the Balon

The text has grown a couple sizes. To shrink text, you would use the minus sign (-) as opposed to the plus sign (+) for enlarging text.

You can also set an absolute size for the text in question by not using either sign, rather just a number.

This yields:

Pop the Balon

As you might be able to see, 3 is not that large of a size, but very much readable. Always make sure not to go overboard with resizing, as you want to make sure your page's contents can be read comfortably without the need to zoom in or out.

Text Coloring

Using the <font> tag, you can modify the color of a specific portion of text. Of course, this is another thing you really shouldn't use very often, as it's just going to make everything too hard on the eyes unless you know what you're doing. Sometimes I'll make a tiny bit of text red, mostly one word directly preceding something very important and leaving the details in a normal color.

To color some text lime, you can write this:

This returns:

I need me some of that melonade!

What we've used here is a named color, which is pretty simple to understand. There are only 16 named colors; for an old school website, they should be enough, but there may be a number of cases where a more precise color is desired, perhaps if you want a color slightly less intense than the stock one.

The 16 named colors are:

• Aqua
• Black
• Blue
• Fuchsia
• Gray
• Green
• Lime
• Maroon
• Navy
• Olive
• Purple
• Red
• Silver
• Teal
• White
• Yellow

If you have worked with an image tool like Photoshop, you may be familiar with hexadecimal color values. They're always comprised of three bytes - the first indicating the intensity of the red channel, the second defining the green channel's intensity, and the third doing the same for the blue channel. You could think of these varied colors seamlessly being mixed together into one, as that is essentially how most monitors work, anyway. The lower a channel's value is, the less prevalent it is in the resulting color. If all channels are considerably low, the color will be much darker, but one channel having a high value can make it pretty bright.

If you are not familiar with hexadecimal, the best I can describe it is that it's used for counting in base 16 as opposed to the base 10 system everyone's been accustomed to. The letters A to F are use to denote numbers from 10 to 15, respectively. Because computers use a base 2 system (a.k.a. binary) to function, it is possible to use exactly that in certain programming languages, but it is much more elegant to use hexadecimal for such a thing since it serves as an abbreviation for binary data.

With that in mind, let's create some text in a very strange color...

Should display this:

I need me some of that melonade!

Notice how the hexadecimal color value is preceded by a pound symbol #. This tells the browser that such a hexadecimal value is to be processed and displayed like so. You can experiment with different values to get an idea, but let me just remind you again that text coloring should only be used sparingly. Furthermore, if you want to make all the text in a page use a certain color by default, the <font> tag is actually not reliable for the task. There is a better way to do this, as I will describe below...

Body Attributes

The <body> tag allows assigning some default colors to a page, as well as a background image if desired. There are a few HTML3-style attributes you can apply to this tag:

• text - default color for normal text
• link - color for unvisited links
• vlink - color for visited links
• alink - color for links when they are being clicked on
• bgcolor - a solid background color for the page
• background - pointer to an image to use as the background, which can be used instead of bgcolor

For the first five attributes, you can assign named or hexadecimal colors to any of them you wish to use, which is done so the exact same way as discussed earlier (within the <body> tag rather than a <font> tag, of course). As before, be mindful of the colors you choose, as you very much want to make your page readable.

I would advise against using a background image as that can trample the readability of a page, especially when the user is using a very low color depth. Also, make sure to stick with a consistent light on dark/dark on light scheme for the entire contents of your page should you wish to have your site usable on very old browsers. These browsers don't support table cell background colors that would allow for inverting the scheme. Of course, structuring a more advanced web page with tables is something I have yet to cover.

Previous: The Very Basics

1 2 3 4 5 6 7 Back to introduction

Next: Anchors Aweigh! Alos, Alignment

Comments

Pretty useful tutorial. I'm acftually following this to make my website.

This tutorial is awesome, learned a lot! Definitely will be putting these skills to use!

2 comments on this page

Sort: Ascending | Descending

Leave a Comment