© 1997 Dr. Mariano Rodrigues, Rhode Island College

Table of Contents

Preface
Preliminaries
Introduction to HTML codes
Making Tables for putting things into columns
Linking to other documents, sites, and files
Working with graphics
Working with backgrounds
Send Me Email - Comments, Questions, Suggestions

Preliminaries

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

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.
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 File/Save As to save that HTM or HTML file to your disk. Carefully note where you save it to so that you can access it using your word processor. Put yourself offline and get into your word processor; then load the HTM file you saved. 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. (of course, if you don't care to save the file on your computer, you can also use View/Document Source to look at the text the way it was prepared by the typist.)
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 codes. 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.
Another consideration is that browsers can only deal with ASCII text. That means that you cannot have any boldface codes or tabs, to begin with, and getting italics is another matter. If you insert these things with your word processor, the boldface, italics, and tab codes will be lost when you save the file as an ASCII file. If you are using a Word Processor, you must remember when you save that you must select File Type ASCII Text or TEXT ONLY. This remains true if you use a Mac (yes, the Mac will give you the ASCII 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 which defaults to ASCII text when you save it. DOS EDIT is an example of such an editor. There are text editors available also for the Mac.
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. In Netscape, you use File/Open File.

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.

Q. So how do I force text to go to the next line?
A. By inserting the code <br> or the code <p> .

Q. What's the difference between <br> and <p>?
A. They are different types of line breaks, with different spacing between lines.

<br> is called a line break. It will bring the reader to the next line using the same line spacing as the usual lines within a paragraph. The lines in the Q. and the A. below it are separated by a <br>.
<p> is really a paragraph break. It will bring the reader to the next line but add space between the lines so that it looks like a new paragraph. For example, the space between the above Q. and the A. above it is created with a <p>.

Note then that if you were to prepare text as usual, then the browser would show only one paragraph.

Q. I am used to typing in ALLCAPS. Why not use ALLCAPS for a web site? I think that would be cool!
A. Wrong. Cool it is not.

It is really hard to fight this myth that ALLCAPS is BETTER. When computers were in their infancy, that's all there was; everything was prepared in ALLCAPS. Somehow, though, when we became lower case enabled - way back around 1980 - some decided that they would stick with ALLCAPS and they rationalized that it was better.
ALLCAPS is a means of drawing attention - like shouting. Consider the difference between the BETTER in the first line and the better later on. Both give emphasis to the word. Which is more pleasing?
If everything is in ALLCAPS, it assaults the eye and becomes quite offensive, assaultative and ineffectual. When everything is emphasized, then nothing is emphasized - you have then lost a means of emphasizing (not good).
If you still think "This guy is all wet!" Then I have this challenge for you. Find a single book prepared by a professional which is done in ALLCAPS. Go to the Library of Congress if you have to. After all, this business of preparing text has been around for hundreds of years. If ALLCAPS is better, then there ought to be some professionals who agree with you by typesetting their work in ALLCAPS. Good luck. I have never seen such a book. e e cummings did the reverse - he put everything in lower case!

If I can put that to rest, then, you will prepare things using mixed case mode, and you will start by taking normal text and inserting <p> wherever a new paragraph begins. Try looking at such text before and after you insert the paragraph codes. The <br> codes can be used to form some simple lists - though later you will find far more effective ways of doing that. Of course, before you can look at it with a browser, you must save it in ASCII Text format. You can use a word processor to prepare it, but you must be very careful when saving the file - make sure that the File Type selected is ASCII text.

Q. Anything I boldface in my word processor will be lost. So how can I get something to show up in boldface?
A. The Break and Paragraph codes are called tags. Boldface, by its nature, requires a different kind of code. Boldface is a feature which must be turned on and turned off. The preferred way to accomplish this at this point is to use <strong> and </strong> and sandwich in between all text to be emphasized. For example,

If you type: This is a word to be <strong> emphasized </strong>

the browser will show the result

This is a word to be emphasized

Q. What other features are controlled this way?
A. Here's a list:

The entire preparation is contained between <html> and </html>. Strictly speaking, this is optional, since the default file type is html. However, there are other types, like sgml and vrml, for example, so it is clearer to the person reading the source file if you include the reference to the language used to interpret the page - in this case, html.
The Header of the HTML file (a part which appears before the body of the text) is contained between <head> and </head>.
The title of the page, which appears in the top bar, begins with <title> and ends with </title>. The title appears before the body and is usually found in the header section.
The Body, which contains all of the links, images, and text, is contained between <body> and </body>.

Headings are larger than the rest of the text. To apply a heading tag, use <h1> or <h2> (you can let the numerals range up to 6. The higher the number, the smaller the heading font. So H1 is the largest heading font and gives maximum attention. Here they are in order:

h1

h2

h3

h4

h5

h6

Headings are designed to set off sections of text, so there is an automatic line break when a heading is turned off.

Centering is accomplished using <center> and </center>.
Italics starts with <i> and ends with </i>.
Tables start with <table> and end with </table>.
Unordered lists such as this one begin with <ul> and end with </ul>. Click on the word "Tables" to get more details on preparing tables. Items in the list start with <li> and (optionally) end with </li>. The ending part is now optional since in this case, the next list item automatically means the previous one must be turned off.
Ordered lists, with automatic numbering of the items in the list, begin with <ol> and end with </ol>. Items in the list are handles the same way as the unordered list.
Links are complex, so I deal with them at length separately. Click on the word "links" to jump to that section.
Inserting Graphics takes some thought. Click on "Inserting Graphics" for more information on that.

Therefore the barest of outlines is:

<html>
<head>
	Header material
</head>
<body>
	Tables, Text, Graphics, Links
</body>
</html>

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.

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 which 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 which 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 when you need to have things neatly lined up in columns. Tabs would have been nice, but as of HTML 3.0, Tabs still don't exist. But the same affects can be achieved using tables.

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>.

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

1995	Providence	RI	Narragansett Bay Chorus
1996	Portland	ME	Narragansett Bay Chorus

And here is the same table without a border.

1995	Providence	RI	Narragansett Bay Chorus
1996	Portland	ME	Narragansett Bay Chorus

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

1995	Providence	RI	Narragansett Bay Chorus
1996	Portland	ME	Narragansett Bay Chorus

You can also put graphics into the cells of a table (see the section on inserting graphics).

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; so it just copies it from the cache area where it put the image to the folder you specify.

To help this process, two file formats have been developed which 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 (though a bit grainier) and so many places prefer it.

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 likely that they will not arrive into your computer in the format you need (GIF or JPG). So 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.

Return to Table of Contents

I prepared this for several reasons:

I teach computer courses where I expect students to learn basic HTML.
I am frequently asked by others, not my current students, about such matters.
I see too many books on the topic which overwhelm you right away with a gazillion options, which can overwhelm a beginner.
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 which could be included. I want to keep it down to the very basics which 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

So You Want To Work With Backgrounds

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.

Background Color

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:

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 which 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:

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:

Left Cell

Right Cell

Background Images - By Popular Demand

Any image which 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:

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 which 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