Preliminaries

HTML stands for Hypertext Markup Language which is a language that browsers use to interpret the text you prepare.

1. You must understand that you have no control over the viewers' preferences. A person looking at your work may have the browser working in full screen or in a small window. The viewer may also have his/her system set to use Times Roman 18 point font or Courier 10 point font. This impacts on the word wrap, so that words will wrap differently depending on the viewer's choices. This helps to explain why certain things are true when preparing text.
2. You must remember that all is illusion - a splendid illusion. What you see is often not even close to what was typed. To appreciate this, you can visit any web site and use View/Source. You will see lots of stuff that was not visible to you when you were browsing on the Web. That's what a browser does - it takes all that stuff and creates that nice illusion that you see. 
3. Staring at it for a while, you will see a lot of material inserted between angle brackets. And none of the material between the angle brackets is visible in the browser. These are known as HTML tags. At first, it may seem bewildering, but it really is quite simple, if you take one step at a time. Throughout what follows, please note that all html codes themselves can be typed either in ALLCAPS or lowercase. Remember that the html codes are not themselves the text that people will see; the html codes affect what happens when the people see the text, but the codes will be invisible.
4. Another consideration is that browsers can only deal with ASCII text. If you use a Word Processor, and insert boldface, italics, and tab codes, all will be lost when you save the file as ASCII file. If you are using a Word Processor, you must remember when you save that you must select File Type Web Page, or HTML This remains true if you use a Mac (yes, the Mac will give you the HTML option - just look around the File/Save dialog box carefully). If you continue to work with HTML, you may prefer to use a text editor that defaults to ASCII HTML text when you save it. Windows Notepad is an example of such an editor. There are text editors available also for the Mac. But there are some special purpose Web Page editors that are equipped with features to facilitate the task.
5. This work can be done on a Mac, a PC, a Unix system, a Sun Workstation, or any computer. It is not the exclusive domain of any one of them. There is no evidence whatsoever to support that any one of these types of machines is the machine of choice for work on html. Claims to the contrary are totally unsubstantiated. We all choose our poisons. We work with what we have - and any machine will do. One ought to feel comfortable sitting in any room with any machine to do this work.

As you continue, note that if you want to preview your prepared materials, simply open the file with your browser. However, you must remember to use the Refresh or Reload button to be sure you aren't looking at the page that was in the cache.

Return to Table of Contents

Now for some meat and potatoes

For starters, the browser sees no difference between

These
words
are
typed

one

word

per

line

or with strange

spacing

and

These words are typed one word per line or with strange spacing

In other words, spaces and carriage returns are not honored in the usual way.

Therefore the barest of outlines is:

Return to Table of Contents

Links - weaving the Internet into one fabric

• elsewhere in the same document
• elsewhere in the same web site, but a different document
• somewhere else in the world.

If a Filename is highlighted, and it is neither text nor graphics (it may be a program file) then clicking on it will allow the visitor to download the file.

The basic ingredients are <a href="somewhere">Link Text</a>
Here are some examples:

• <a href="mary.gif">Mary's Picture</a>
  • When the user clicks on the words Mary's Picture, the browser will load the picture named mary.gif. Note that Unix based systems that house most of the Web sites are case sensitive, so MARY.GIF, MARY.gif and mary.gif would name three different files. To simplify matters, it is customary to stay in the lowercase mode; I have yet to see any site that uses allcaps to name files.
• <a href="history.htm">My History</a>
  • When the user click on My History, the browser will load a file called history.htm from the same web site in the same directory or folder.
• <a href="http://www.ric.edu/henry/history.htm">Henry's History</a>
  • This will link to a file named history.htm somewhere in the world whose domain name is ric.edu on the www.
• <a href="dancers.gif">See Dancers</a>
  • This will load the graphic when the user clicks on the text See Dancers
• <a href="http://www.ric.edu/henry/dancers.gif">Henry Dances</a>
  • This will load dancers.gif from somewhere else on the www.
• <a href="zipped.zip">Download this file</a>
  • When the visitor clicks on "Download this file" the browser will prompt for a filename and download it to the visitor's computer.

Return to Table of Contents

Tables

Tables are appropriate whenever you want to fine-tune the placement of text on your web page. HTML tags give the options Left, Center, and Right. If your text appears to the right or left of a graphic, you get almost no control of the way that text can appear. To get the effects we want, we often have to turn to tables. This expands that control considerably, though not yet completely.

A table can appear with or without a border. "Border" is called an attribute. To turn a table on with a border, use <table border> and to turn a table on without a border use <table>. In both cases, you must remember to turn the table off with </table> or else your text will appear to disappear into nowhere.

When the border attribute is turned on, all cells in the table appear with a border around them. Sometimes this can be used quite effectively.

Each row of a table begins with <tr> and each cell within a row begins with <td>.

Therefore, the bare-bones table code looks like this:

<table>

<----- Start a new table

<tr>

<----- In that table, start a new row

<td>

<----- In this row, start a new cell

Content (text or graphics) would go here

</td>

<----- End this cell

</tr>

<----- End this row

</table>

<---- End this table

Here is a table with two rows and 4 cells in each row, with a border:

And here is the same table without a border.

And here is the same bordered table centered (simply include the entire table between <center> and </center>.

Note that in any cell, you can put any valid kind of object that can go on a web page. This includes text as well as images. In either case, you type the information inside of the cell or place the source code for the graphic inside of the cell.

Tables however are scanned three times before the contents of the table are displayed. Tables slow down the page load. Since virtually all well-designed pages make extensive use of tables, it is best to learn how to speed up the display. This is done by adding something to the table tag, as follows:

Return to Table of Contents

Inserting Graphic Images

Images can sometimes be very big files. When they have to be sent from one computer to another, it can take a lot of time. And that is what happens when you open a site that shows graphics - the images are downloaded to your computer.

So what is really happening when you right-click to download? It is already on your computer; it just copies it from the cache area where the browser put the image to the folder you specify.

To help this process, two file formats have been developed that the browser can interpret. They are JPEG (JPG) and GIF. Both of these are compressed, so their file size is much smaller than their non-compressed cousins. This means that they can be sent to your computer faster.

Therefore, when you obtain an image, it has to be saved in one of these formats. Frequently the JPG is a smaller file size for photographs, and GIF is the smaller file for graphics you create yourself with graphics programs.

There are many sources for graphics. You can buy disks full of graphics or you can download them from the Internet. Many places now offer you a service when you have your films developed there - they can return it to you on a floppy disk along with a program to view them. Yet another way is to have them scanned.

Whatever your source, it is possible that your pictures will not arrive into your computer in the format you need (GIF or JPG). If this is the case, you need a graphic converter. Some public domain programs like Graphics Workshop work well. But programs like Corel PhotoPaint also will perform this task. The idea is to load it into the software as one type of file and save it as another type. When you attempt this, you should be aware that it is not enough simply to NAME the file using JPG or GIF extensions. Using whichever software you have, you must select the File Type to agree with the extension you choose. If you get them from the place where you have your films developed, they will arrive with a program for viewing; the same program will also convert them.

When you have the file in one of these formats, you get the browser to place the image somewhere by using the <img src=" ... "> technique. You put the filename inside of the quotes - and the file can be anywhere in the world. If the file is not at the same web site, you must insert the complete name of the file. Here are some examples:

• <img src="myhouse.gif">
  • This will cause the image named myhouse.gif to inserted on the page where the code appears.
• <img src="http://www.ric.edu/george/myhouse.gif">
  • This will cause the image named myhouse.gif to inserted on the page where the code appears. This file will be found on a computer whose domain name is ric.edu in a folder named george.
  Your page will load faster if you add a couple of things to the img src tag - the height and width of the image. To figure out what that is, you can load the image into a Paint program, then tell the program that you want to resize or resample it. Study the resulting screen. It may in fact tell you the height and width. However, make sure that you read the number of pixels (not inches) in the height and width. The tag
  <img src="myhouse.gif" height="100" width="300">
  tells the browser to display the image using 100 pixels in height and 300 pixels in width.

Return to Table of Contents



































I prepared this for several reasons:

1. I teach computer courses where I expect students to learn basic HTML.
2. I am frequently asked by others, not my current students, about such matters.
3. I see too many books on the topic that overwhelm you right away with a gazillion options, which can overwhelm a beginner.
4. I want to organize this even for myself.

Please keep these things in mind as you explore this. There truly is a bewildering array of possibilities and details that could be included. I want to keep it down to the very basics that can be of assistance in constructing a good, basic Web Page.

As a result, I will not try to be everything for everybody. This is for beginners who want to get their feet wet before trying more herculean things like image maps and frames and Java scripts.

Return to Table of Contents

It has been my experience that even in the early stages, people want to get involved with the appearance of the backgrounds in their pages. People like working with colors and images as a backdrop for their message. I decided therefore to provide the basic information for doing this.

Remember that there is a <body> tag in every HTML document, or there should be. Remember also there there can be only one <body> tag. If you insert more than one <body> tag, only the very first will be honored.

The <body> tag can be expanded with what is called "attributes." To change the color of the background, you insert a "bgcolor" attribute as follows:

<body bgcolor="nnnnnn">

where the n's must be replaced with numerals 0,1,2,3,4,5,6,7,8,9, or letters a,b,c,d,e,f.

• <body bgcolor="ffffff"> will provide a white background and
• <body bgcolor="000000"> will provide a black background.

Grouped in two digits, these numerals control the mix of Red, Green, Blue.

You can also name the colors by name, if you know the name. For a list of color names, their corresponding numbers, and a view of the color itself, click here.

Now this is the barest of things here, and to understand it, you must work with things you have not considered before - but it is an adventure.

To begin with, if you change the background color, you may render certain things invisible. In extreme form, suppose you changed the background color to black. Then you could not read the text, which is also black. So readability is an important issue when working with colors.

Let's start with the fact that certain color combinations are not advisable. Many are color blind, and producing red text on a green background can cause some a lot of grief. Garish colors in the background, such as bright purple, can also produce such negative results that people won't want to read your pages.

Whatever color you pick, the text should be in a color that has sufficient contrast to make it easy to read. Dark grey text on black background is very hard to read, so it is annoying to the reader. This author has seen several pages designed by real "designers" which are offensive to the viewer in this respect.

It is clear then that when you manipulate background colors, you may also want to change text colors, and there are several kinds of text colors that you need to look at.

• Text (normally black) - this is controlled by the text="#nnnnnn" attribute"
• Links (normally blue underlined) - this is controlled by the link="#nnnnnn" attribute.
• Visited Links (normally ???> - this is controlled by the vlink="#nnnnnn" attribute

So a "body tag" could look like this:

<body bgcolor="#000000" text="#00ff00" link="#ff0000 vlink="#0000ff">

to say the least.

There are a total of 256 colors to choose from. To know them all by number is asking a bit much. So the colors all have been given names! You can then use the names instead of the numbers. So, for example, you can use bgcolor="black" and text="white" to obtain white text on black background. the basic colors will work as expected - red, blue, purple, yellow, green, orange, cyan, magenta, chartreuse, teal, acqua to name a few. The names of the colors however themselves can grow be a challenge.

Although this discussion has been in the context of setting background colors for the entire body of the page, the same rules apply to table cells. You can add any of these attributes within a cell of a table to control colors of that cell. For example,

<table border=8>
<tr>
<td bgcolor="red" text="white">Left Cell
<td bgcolor="cyan" text="red">Right Cell
</table>

Will produce a table with two cells - one of them with a red background, the other with a cyan background, as follows:

Any image that the browser can show can be used as a background image. That is to say, one can use any .GIF or and .JPG file. Once again, you use the body tag to accomplish this. The syntax is as follows:

<body background="image.gif">

The image will be used to tile the background of the page. Remember however that text will be flowing over the image. This means that color considerations discussed above are still important. If the background image is dark, you should be careful to set the text color light, so that the text is visible.

A backgound image should not therefore contain both light and dark colors. Otherwise some of your text will not be readable. The colors should be uniformly light or uniformly dark. You can use image editing software to create this effect in an image that has high contrast.

Caution: HTML tags are not themselves case sensitive. However, when you name the background image, remember that many host systems are case sensitive.

Return to Table of Contents