HTML tutorial - Part 2

Elementary HTML - Part 2

#6 Visuals - incorporating images

There are a number of file formats for computer graphics (e.g., PICT, EPS, etc.) For web presentations, use GIF or JPEG. These compress picture information, and are platform independent, as is HTML. They can be read by any computer.

GIF (Graphics Interchange Format) compression is most effective on graphics that have contiguous areas of solid color, and compression is even greater when the color is continuous in the horizontal direction. Use it for lettering and simple visuals.

JPEG (Joint Photographic Expert Group) compression is best for photographic images and where the colors vary over short distances (e.g., blends). JPEG offers dramatic compression in file size, sometimes by a factor of 10 (e.g. a 1500k file reduced to 150k), which may trade-off some image quality.

Most graphics programs (e.g., Photoshop) can save files in GIF and JPEG format, as do several shareware programs. Locate shareware on the web at http://www.shareware.com -- if you use it, send in your money.

A Few Graphics Utilities

Macintosh

GIFConverter

GraphicConverter

clip2gif

Windows

WinGif 1.4

Lview 3.1

PaintShop Pro

Visual Considerations

Large and/or numerous images may look great on a high end computer, but they will frustrate users who must wait for images to be sent over the network or home telephone line. Try to keep your images at less than 50k each). Smaller is even better.
On a similar note, not all of us have a 21 inch computer monitor so keep graphic images no wider than 480 pixels and no higher than 300 pixels to avoid forcing users to scroll or resize their web browser window (72 pixels = 1 inch).
Many dark tones on Macintosh computers are not discernible on Windows computers.
Rather than displaying all of the images on the web page, keep them separate and create links to them (see next module).
A single image (e.g. a small "bullet") can appear several times in a web page with little added delay each time you use that same image.
Most browsers now "cache" images (storing them on your computer) meaning that using the same file in several web pages will load them from the viewer's computer rather than loading them across the Internet.
Most importantly, make sure that the images are ones that add meaning to your HTML documents.

Placing an Image on Your Web Page

At the beginning of this tutorial, you copied five images and stored them in a folder/directory called Visuals on your computer. Open the folder on your disk and find the file called cat.jpeg (a picture of a cat). Move it to the same folder/directory level as SS78.html.
Open SS78.html document with the text editor (if it isn't already open).
Below the header <center><h1>SS78 Psychology of Domestic Cats</h1></center> type the following:
<img src="cat.jpeg">
This command will insert the cat picture just below the header . Be sure to include the quotation marks (") in both places.
Save and reload in your web browser (it may take a few seconds).
In placing the image, you may have wondered why you did not need to put a <p> tag after the header. A web browser always inserts a paragraph break before and after <h1, h2, h3...> tags.
To add a label, type in a description on the next line.
<img src="cat.jpeg">
Domestic short-hair tabby
Save and reload in your web browser.

Alignment of Text and Inline Graphics

"Inline" means that the browser will display the image in between text.
You can control how text adjacent to the image aligns with the picture.
Add the align command to <img src="cat.jpeg"> in the following ways to see its effect.

align=top

In the text editor,

Modify <img src="cat.jpeg"> by inserting align=top (see below)
<img src="cat.jpeg" align=top>
Save and reload web browser

align=middle

In the text editor version, change top to middle
<img src="cat.jpeg" align=middle>
Save and reload web browser

align=bottom (default)

In the text editor version, change middle to bottom
<img src="cat.jpeg" align=bottom>
Save and reload web browser
Termed default, because this is what you saw in the absence of either <p> or <align ...> tags
<img src="cat.jpeg"> Domestic short-hair tabby
Try it and then return to the middle placement.
<img src="cat.jpeg" align=middle>
Save and reload web browser

The alt="..." attribute

Sometimes, users turn off the loading of inline images to save time on downloading over slow network connections, or perhaps they are using a text-only browser (such as Lynx). Thus, it is important to provide text that stands in for the graphic.

In your text document, add Cat photo to the <img ...> tag.
<img src="cat.jpeg" align=middle alt="Cat photo">
With images turned off, the viewer would see the following:

Cat photo

Domestic short-hair tabby
You won't see it as above unless your images are turned off.

CHECK - If your page doesn't look right, compare your code with that shown below.

Here is how that new code should look (first part of SS78.html)

<html>
<head>
<title>SS78</title>
</head>
<body>
Welcome to Social Science 78, the Psychology of Domestic Cats
<hr>
<center><h1>SS78 Psychology of Domestic Cats</h1></center>
<img src="cat.jpeg" align=middle alt="Cat photo">
Domestic short-hair tabby
<h2>Introduction</h2>
. . . .

#7 In-house links

HTML code allows us to jump from file to file. This is done by creating hypertext links, the ones usually underlined in blue, called anchors.

Linking to Local Files

Local files reside on the same computer as the working document (they do not have to venture out on the Internet). You will be expanding your web site to more than just a single home page.

Link to Text Files

The simplest anchor link is one that opens another HTML file in the same directory as the presently displayed web page. The HTML format for doing this is:

<a href="filename.html">linking text</a>

Think of it as "a" for anchor link and "href" for "hypertext reference".
The filename must be another HTML file. Whatever text occurs after the first > and before the closing </a> symbols will be the "hypertext" that is underlined and "hyper."

Follow these steps to build an anchor link in your HTML document to a local file:

In your HTML document, SS78.html, in the text editor, change the heading <h3>Birthing</h3> to read
<a href="birth.html"><h3>Birthing</h3></a>
The text Birthing will link the viewer to a second HTML document called birth.html. This second HTML file does not yet exist; we will construct it in steps (4) and (5).
Save and close SS78.html.
With your text editor, open a new document.
Enter the following text in the new window:
<html>
<head>
<title>Birthing</title>
</head>
<body>
The gestation period of the cat is about 65 days.
</body>
</html>
Save this file as birth.html in the same directory/folder as your working HTML file (SS78.html).
In the browser, view birth.html to see that it is correct.
Then, in the browser, open SS78.html
Test the hypertext link for the word Birthing. When selected, it should connect you to the new page about cats and birth.
Use the BACK button in the browser to return to your main web page.

Anchor Link to a Graphic

The format for creating a link to a graphic is similar.

<a href="graphicname.gif">linking text</a>

<a href="graphicname.jpeg">linking text</a>

Follow these steps to add a link to a graphic file in your HTML document:

In the folder/directory called Visuals on your computer, find litter.jpeg and put it with your text html files.
Open the birth.html file in the text editor.
Modify the text to include a link to an image of a cat and kittens by typing a second sentence.
Cats pick <a href="litter.jpeg">interesting places</a> in which to bear their young.
Save the birth.html file and open it in your web browser
Now click on the link you just created in step 3 above.
A picture of a cat with kittens should be displayed.
Use the BACK button on the browser to return to the birthing page.

#8 Internet links

What is a URL?

A URL, Uniform Resource Locator (or "Universal Resource Locator") is an Internet address. It points to specific sources of information -- other web pages, graphics, sounds, digital movies, animations, software programs, archives, or chat rooms. The URL for a document is usually shown in the upper part of the browser window on your screen. Incorporating URLs into your HTML code sets up direct links from your page to other locations.

Note: File names are case sensitive, although URLS (the fuller address) may not be. A file named

CatText.html

different

catText.html

cattext.html>

HTML for Anchors to the Internet

The HTML format for a link to an item on the Internet is:

<a href="URL">linking text</a>

where URL is the full Uniform Resource Locator, in quotes, the address for the Internet site where you want to send the viewer. The string linking text is what will show up as hypertext in the browser, usually underlined.

When viewers click on this hypertext, the browser links them to the Internet site indicated by the URL. A URL can be a link to a WWW server, Gopher server, FTP site, or any text, graphic, sound, video file on these servers.

Open SS78.html
Below the Course information heading, type
Save the text file and open SS78.html in your browser. You have created a direct link to the library reserves section.
Note: In the browser, clicking on the link may activate your on-line connection. Without clicking, move the cursor over the link and note its change from an arrow to a small hand.

You could put a more direct link under Past Exams if you have them scanned at the library.

If you did test the link, and were denied access to library reserves, here is a different link.

<ahref="http://www.drsolomon.com/vircen/">virus protection</a>

Links can be formatted in ordered or unordered lists.

If you create links to an individual or company page, it is courteous to let the person know that you have done so. Most web sites have an e-mail address somewhere on them.

#9 A Touch-up

Change the name of your working file from SS78.html to either index.html or default.html

I will be referring to it as index.html from now on. The above modification permits a slightly shorter URL for your homepage. If you were to create a course page, your URL might look something like this:

http://trc.ucdavis.edu/Coursepages/SS78/SS78.html

Substituting index.html (or default.html) for SS78.html allows you to use the following URL

http://trc.ucdavis.edu/Coursepages/SS78

-- less redundant in print, easier to type, and a bit more professional looking. If no file is specified at the end, the browser looks for index.html or default.html.

N.B. On some servers, you may need to use the shortened extension default.htm to get it to work.

If you have gotten this far, I would be VERY appreciative of knowing about it and also would be grateful for comments, suggestions, questions, criticisms, or anything that would help me to make it a better tutorial.

My e-mail address is basommer@ucdavis.edu (Barbara Sommer).

#10 Link with Images

You have learned how to use text to make links. Similarly, you can use images (photos, drawings, symbols, buttons, etc.) as the links. Images to be used as links are put within the hypertext portion of the anchor tag.

In your web page, this HTML will display the specified graphic and the text Go to File X. Both will act as hyperlinks; clicking on either the text or the picture will tell your browser to go to fileX.html. The image alone could be a hyperlink.

You can identify a hyperlink area on any web page by looking for a change in the cursor as it passes over a "hot" region.

Creating an Image + Text Link

In the last module we linked some text in our course page, index.html, to a second page, birth.html, that described cat gestation and parturition. Now in the latter page, we will add a button that when clicked will link a reader back to the main course page.

In the Visuals folder/directory, find left.gif and put it with your text html files.
Open birth.html in your text editor.
Insert a paragraph break <p> after the last sentence (... their young.)
Then type the following text:
<a href="index.html"><img src="left.gif"> Return</a> to Home page
Note: The image tag <img src="..."> follows the > that marks the end of the URL (<a href=" ...">) and is placed before the </a> that marks the end of the hyperText.
And don't forget the quotation marks.
Save the HTML file.
Return to your browser, and open birth.html file.
Reload to update the changes.
Test the new button -- it should return you to the home page. Now you can go back and forth, using Birthing and the arrow button.

Image-only Link

Eliminate the text in the link by deleting Return and to Home page leaving
<a href="index.html"> <img src="left.gif"> </a>
When you use images alone as hyperlinks, be sure to include the alt= attribute in the <img src=" "> tag in case the viewer has turned off the loading of images.
Add the alternate description.
<a href="index.html"> <img src="left.gif" alt="Return button"> </a>

Thumbnails

Large images take a long time to load, and viewers might become impatient, particularly if they are using a telephone modem to access the Internet. Thus, it is a good idea to place miniature copies on your page, allowing the viewer to decide whether or not to look at the larger ones.

Here is an example.

Move the two image files guard(sm).jpeg and guard.jpeg from your Visuals folder/directory to the same level as your HTML files.
In the index.html (or default.htm) document, under the heading <h2>Feline Behavior</h2> type the following:
Cats make very good watchdogs.<p>
<a href="guard.jpeg"><img src="guard(sm).jpeg"> View the full size image</a>
Save and reload in your web browser.
The image, guard(sm).jpeg links to the larger image guard.jpeg. When a user clicks on either the miniature or the text View the full size image the web browser will display the larger image in new browser page or window.
Use the Return button on your browser to return to the previous page.

DESIGN POINT: To eliminate the border around an image, simply add border="0" within the <img src=" ..." > bounderies.

or change its width by increasing the number. Type border="6" and view the outcome.

If you decide not to use any accompanying text, be sure to include the alt description, as shown above.

#11 Niceties

Source

The HTML that you have been creating is called the "source" document. You can view the source for any webpage, and thereby "borrow" other people's HTML code.

When online, look at the top menu on the browser screen. In Netscape, click VIEW and then PAGE SOURCE. In Explorer, click VIEW, then SOURCE. That will show you the source for the page on the screen. You can save it, either as source or as a text file, to your own computer (FILE -- SAVE AS)

Adding comments

You can add notes to your HTML code that won't show up on the browser screen. These can be very handy for later reference. Use the comment tag wherever you wish on your HTML source page.

Appearance - background and fonts

I am not going to get into color backgrounds, but you can change the background from gray to white (as I have done here) by modifying the <body> tag

To change the size of the font (X = 1 to 7, largest size) use

Use </font> to return to the previous size.

You can select a particular font (assuming the viewers have the font on their machines -- so don't get exotic) by using the font face tag, for example

or even better, provide two fonts in case one isn't available

And you can change font color

Instead of red, you can use blue, green, yellow, (even purple, and perhaps some other common colors).

For all the font changes, </font> returns to the previous condition.

E-Mail Link

Suppose someone is reading your page and wants to send you a comment on how nice your page looks. They would have to locate and write down your e-mail address, launch another program, and send you a message. Wouldn't it be great if they could drop you a quick line? Well, they can if they have a recent browser version.

To set up an e-mail hypertext link on your page, do the following:

At the bottom of index. html just above </body> type
<p>Send e-mail to <a href="mailto:basommer@ucdavis.edu"> basommer@ucdavis.edu</a>
Save in text editor, and reload in browser.
When the text basommer@ucdavis.edu is clicked, the web browser will bring up an e-mail screen. NOTE: This e-mail feature is not present on all browsers. So include your e-mail address, as I have done by making it the text link, or put it in some other conspicuous place.

More on Graphics - Height and Width attributes

Another option you may want to include in your <img src="..." > tags are two attributes that give the dimensions of the image in pixels. The reason is that the web browser determines these dimensions as it reads in the image. Your page may load faster if you specify these numbers in your HTML, and it may prevent some crashes in older browser software.

You need a graphics program or utility to get the image dimensions. X is the width of the image and Y is the height of the image in pixels The format for including this option is (and it is optional)

The big guard cat image tag would look like this

NOTE: The order of the attributes inside the <img> tag does not matter.

#12 Organizing Files
Links to other folders/directories

Prepare to reorganize the files in your current working folder/directory. Close any open text and browser files.

Moving down

I've been having you move all your files into the same folder/directory. But when you have many files, you need some organization -- such as folders within folders. You can alter the anchor tag <a href="..."> in order to link to a file within another directory/folder. For example, let's store all of the graphics in a special directory/folder called pictures. Here's how.

In your computer system, create a sub-directory/folder called pictures in the same location where your Index.html file is stored (i.e., within that directory/folder). You can trash the old SS78.html file.
Move the litter.jpeg file to the new sub-directory/folder called pictures
Open the birth.html file in your text editor.
Edit the anchor tag for the graphic, adding pictures/
Cats pick <a href="pictures/litter.jpeg">interesting places</a> in which to bear their young.
The / tells the computer that the file birth.html is located within a subdirectory/subfolder called pictures.
Save birth.html and open it in your web browser. If all went well, the link in the sentence referring to "interesting places" should now call up the litter.jpeg image.

ASIDE: You still must use the BACK button to return from the photo to the birth page. If you want to eliminate that, you could make a third HTML file called photo.html or litter.html which would include the image and a return link.

Moving up

A slightly different tag format lets you link to files in a folder outside (above) the one in which you are currently located (a superordinate- rather than a sub- directory). Right now we are working with the index.html file. If the picture folder/directory were outside of the one in which index.html is found, then the linking tag would use ../ before the folder/directory name.

Cats pick <a href="../pictures/litter.jpeg">interesting places</a> in which to bear their young.

../ tells the computer to go up one level in its search for a folder/directory or file. You can use a series to instruct the computer to move up two or more levels, i.e.,

As you work, you will find many advantages for this organization. You can keep all your graphics in one file, and access them from different web pages. You might want a separate directory/folder for material that is frequently changed.

Organize your files

Do the following to reorganize the SS78 course materials. You must be familiar with moving files and folders/directories around on your computer. Just take it one step at a time. Close any open text and browser windows.

Move the remaining JPEG and GIF files cat.jpeg, guard.jpeg, guard(sm).jpeg and left.gif into the pictures folder.
Create a new folder/directory and name it course
Note: Use lower case file names because case (capital vs. small letters) makes a difference and it is easy to forget combinations.
Move the two HTML files index.html and birth.html into this new folder/directory.
Move the pictures folder/directory so that it is in the same level as the new course folder/directory (not inside).

Your work area should now contain two folders/directories -- one that holds your HTML files (course) and one with the graphics (pictures).

Now you must correct the links to reflect the new organization. Look at the first local link we built in the index.html file.

Open index.html (in course folder/directory).
In the code segment, shown below, change the second line (adding ../pictures/) so that the cat photo can be found.
<center><h1>SS78 Psychology of Domestic Cats</h1></center>
<img src="../pictures/cat.jpeg" align=middle alt="Cat photo">
Another image in that file is the guard cat image, so fix the code in index.html under Cats make very good watchdogs, adding ../pictures/.
<a href="../pictures/guard.jpeg"><img src="../pictures/guard(sm).jpeg"> View the full size image</a>
Check by opening index.html in your browser and seeing that the images show up.
You don't need to change the text link to birth.html because that file is in the same folder as index.html.
However, you do need to modify the links in birth.html. Open it and fix both lines.

Cats pick <a href="../pictures/litter.jpeg">interesting places</a> in which to bear their young.
<a href="index.html"><img src="../pictures/left.gif"></a>

These relative links tell the web browser to go up one level from the current folder/directory (course) and look there for another folder/directory named pictures that contains the JPEG and GIF images. The links among files within the same folder/directory are unaffected by folder location.

Save your files. Then open the index.html file in the browser and test the Birthing links. If they are OK, close birth.html.

N.B. I have suggested frequent checks. Avoid getting too far ahead on the code before checking how it looks in your browser -- easier to pinpoint errors.

On to Part 3 -- only two more lessons.