Building Web Pages From Ground Zero

By Probessor Nibble ã Nibble University 2000-2007

HyperJump to , Alt , Border , Width & Height , In-Line Graphic ,
Align Attribute , Assignments

INSERTING IMAGES - Lesson 7

 

IMAGE TAG

<IMG SRC=" filename ">

 

The image tag has no closing. The name of the file, along with its location, must be enclosed by quotes. Let's say we have a graphic called map.gif. If this file is sitting alongside your web page in the same folder, you would write the code this way:

<IMG SRC=" map.gif ">

IMG stands for Image and SRC stands for Source. Source is where something comes from.

 

Placement of your graphics files is important. The safest and easiest thing to do is put your graphics files in the same folder as your web page. However, if your web pages are quite numerous, things can begin to look pretty sloppy in your folder. Some people like to make a folder called GRAPHICS or IMAGES and place all the graphics files for their multiple pages inside. Let's take a look at how your graphics tag would look given a couple different situations.

 

Example 1:

Your .htm files are located in a folder called WEBPAGE on your C: drive, and all your graphics are in the same folder.

Your graphics tag will look like this:

<IMG SRC=" map.gif ">

Hard Drive Path - C:/WEBPAGE/map.gif

 

Example 2:

Your .htm files are located in a folder called WEBPAGE on your C: drive, and within the folder WEBPAGE you make a folder called GRAPHICS and put all your images in there. If you use the tag address from example one, no one will see your pictures. Your tag should look like:

<IMG SRC=" GRAPHICS/map.gif ">

Hard Drive Path - C:/WEBPAGE/GRAPHICS/map.gif

 

Example 3:

Your .htm files are located in a folder called WEBPAGE on your C: drive, and all your graphics are in a folder called GRAPHICS located above the folder WEBPAGE in the file tree.

C:/GRAPHICS/map.gif
C:/WEBPAGE

The folder GRAPHICS is not inside the folder WEBPAGE. As far as the directory tree goes, WEBPAGE and GRAPHICS are on the same tier. Your tag would look like this:

<IMG SRC=" ../map.gif ">

The two periods and the slash mark tell the browser at what level of the directory tree to look for the file. You don't have to say which exact folder it's in. If you needed to back up two folders in the directory you would put:

<IMG SRC=" ../../map.gif ">

 

Now that you're totally confused, my advice is to try not to make a browser do example 3. It causes problems when you want to move your web page files to a different location. If you use the procedure in example 1 or 2, you can easily move your folder and all the folders that may be nested inside it to a different computer and your pictures will show up fine. Your links will also be OK (links are coming up later).

If this is all Greek to you and you don't understand a word of this, play it safe and always put your graphics files in the same folder with your .htm files.


top

ALT Attribute 

 

If you have a damaged image file or something out of the X Files happens to cause your graphic to not appear correctly, your viewers will wonder just what graphic should appear in that empty square or rectangle. It might even drive them crazy to know they are missing such a great graphic. This is why you need to make it a habit to always include the ALT attribute to your graphic tag. This feature will simply put some text where your graphic should have appeared. The text should describe what the graphic is - or should I say should have been. If your graphic appears OK, then you get an added bonus. When the mouse cursor is placed over the graphic, the ALT text will show up. This is how you use the ALT attribute:

<IMG SRC=" dinotran.gif " ALT=" This is the Fearsome T-Rex. ">

Put your mouse cursor over the graphic below for a few seconds:

 

This is the Fearsome T-Rex.

 

 

 

This is the Fearsome T-Rex.

There is obviously a problem with this graphic file, but at least you can see what should have appeared.


top

BORDER Attribute 

 

Another attribute you can use with this tag is the BORDER attribute. If the border has a value of "0", no border will show up. If the border has a value of "1", a thin border will show up. If you increase the value of the border from 1 to 2, 3, 4 and so on, your border will get thicker and thicker. Take a look at how it is used: 

 

<IMG SRC=" dinotran.gif " ALT=" This is the Fearsome T-Rex. " BORDER=" 1 ">

 

This is the Fearsome T-Rex.

 

<IMG SRC=" dinotran.gif " ALT=" This is the Fearsome T-Rex. " BORDER=" 4 ">

 

This is the Fearsome T-Rex.

 

Note: Images used as a link automatically have a thin blue border. If you do not wish this border to appear, use BORDER=0. Info on Links coming later.


top

WIDTH & HEIGHT Attribute

 

It is a good idea to specify the width and height of your image. Doing so will help a browser's load speed because it will reserve the space for the graphic and go ahead and load any text on the page. Otherwise, the browser waits until the graphic is finished before displaying the text alongside or below the graphic. The viewer should be able to start reading while the graphic is loading

If you don't know the dimensions of your graphic, you'll need to load it into a graphic editor to get the information. Many HTML editors provide width and height measurements automatically. Look at our IMG tag now:

<IMG SRC=" map.gif ALT=" Map of South America. " WIDTH=200 HEIGHT=400>

The dimensions are in pixel measurement. The ALT can come before or after the dimensions. We could also add a border attribute, but I don't use BORDER very much.


top

In-Line Graphic  

 

If I place a graphic along with some text, I get what is called an In-Line Graphic. In-Line means in-between text. Here is an example:

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
You will find a graphic
<IMG SRC=" boy.gif ALT=" Little Boy " BORDER=1>
in the middle of this sentence.
</BODY>
</HTML>

 

You will find a graphic in the middle of this sentence.

 

Because the graphic has a transparent background, I put a thin border abound it so you can see that it is rectangular in shape. Also, you can see better how it fits between the words in the sentence.

 

If I want an inserted graphic to appear on its own line, I place a <P> or <BR> tag before and after the <IMG> tag. Example:

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
You will find a graphic
<P>
<IMG SRC="
boy.gif ALT=" Little Boy ">
<P>

in the middle of this sentence, but on its own line.
</BODY>
</HTML>

 

You will find a graphic

in the middle of this sentence, but on its own line.

 

I removed the BORDER tag because it is not needed to show this example.


top

ALIGN Attribute

 

The ALIGN Attribute has several values. They are:

top, middle, bottom, texttop, absmiddle, absbottom, right, left

Right and Left have to do with Word Wrap and I'll talk about them later. The Bottom value is the default for ALIGN . That means, if you don't use the ALIGN attribute at all the In-Line graphic will be lined up with the bottom of your text. I usually use the default and ignore the others. I'm not even going to talk about texttop, absmiddle and absbottom. You've already seen what the bottom value looks like in the first example above. I didn't use the ALIGN attribute, but since it is the default, it's what we got. Let's look at top and middle so you can see some differences.

 

top

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
You will find a graphic
<IMG SRC=" boy.gif ALT=" Little Boy " BORDER=1 ALIGN="top">
in the middle of this sentence.
</BODY>
</HTML>

 

You will find a graphic Little Boyin the middle of this sentence.

 

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
You will find a graphic
<IMG SRC=" boy.gif ALT=" Little Boy " ALIGN="middle">
in the middle of this sentence.
</BODY>
</HTML>

 

You will find a graphic Little Boyin the middle of this sentence.

 

Ok, you know how to align a graphic in text three different ways - top, middle, bottom. I think that's good enough. Now lets look at what right and left do. 


top

RIGHT & LEFT

 

In-Line graphics deal with a single line of text. If you want several lines of text to run alongside your image, you need to use Align values of right or left. Notice the graphic is called up before the text. If you call up the text first, the graphic will just align itself to the right or left and wait for more text to come so it can align to the opposite side of the page. The text above it is not affected. Here are examples of each:

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
<IMG SRC="
boy.gif ALT=" Little Boy " ALIGN=" left ">
If you want all of your text to word wrap around your graphic, you can tell the browser which side of the page to place the graphic and then the text will appear on the opposite side. If you Align Left, your graphic will line up on the left and your text on the right. If you Align Right, your graphic will be placed on the right and your text to the left.
</BODY>
</HTML>

 

If you want all of your text to word wrap around your graphic, you can tell the browser which side of the page to place the graphic and then the text will appear on the opposite side. If you Align Left, your graphic will line up on the left and your text on the right. If you Align Right, your graphic will be placed on the right and your text to the left.

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
<IMG SRC="
boy.gif ALT=" Little Boy " ALIGN=" right ">
If you want all of your text to word wrap around your graphic, you can tell the browser which side of the page to place the graphic and then the text will appear on the opposite side. If you Align Left, your graphic will line up on the left and your text on the right. If you Align Right, your graphic will be placed on the right and your text to the left.
</BODY>
</HTML>

 

If you want all of your text to word wrap around your graphic, you can tell the browser which side of the page to place the graphic and then the text will appear on the opposite side. If you Align Left, your graphic will line up on the left and your text on the right. If you Align Right, your graphic will be placed on the right and your text to the left.


top

STOPPING TEXT WRAP

 

Text will continue to wrap around your graphic until there is no more graphic to the right or left. If you want your text to stop wrapping around the graphic earlier than that, you need to use a special <BR> tag. This is it:

 

<BR CLEAR="right">

<BR CLEAR="left">

<BR CLEAR="all">

 

If there is an image to the right of text and you want to stop the wrap early, add a <BR CLEAR="right> at the point where you want the text to stop wrapping. If there is an image to the left of text and you want to stop the wrap early, add a
<BR CLEAR="left"> at the point where you want the text to stop wrapping. Sometimes you may have an image on the right and the left with text wrapping between in the middle. If you want to stop the wrap early, add a <BR CLEAR="all"> at the point where you want the text to stop wrapping. Here is one example:

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
<IMG SRC="
boy.gif ALT=" Little Boy " ALIGN=" right ">
If you want all of your text to word wrap around your graphic, you can tell the browser which side of the page to place the graphic and then the text will appear on the opposite side.
<BR CLEAR="right"> If you Align Left, your graphic will line up on the left and your text on the right. If you Align Right, your graphic will be placed on the right and your text to the left.
</BODY>
</HTML>

 

If you want all of your text to word wrap around your graphic, you can tell the browser which side of the page to place the graphic and then the text will appear on the opposite side.

 

If you Align Left, your graphic will line up on the left and your text on the right. If you Align Right, your graphic will be placed on the right and your text to the left.


 

HORIZONTAL RULES (BARS)

 

Throughout these lessons I have divided sections with a gray bar or horizontal rule. The HTML tag for inserting a horizontal rule is:

 

<HR>

 

<HR> has no closing. The attributes for <HR> are:

 

SIZE

WIDTH

ALIGN

NOSHADE

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
Below this text is a horizontal rule.
<HR>
</BODY>
</HTML>

 

Below this text is a horizontal rule.


 

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
Below this text is a horizontal rule.
<HR SIZE="5">
</BODY>
</HTML>


 

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
Below this text is a horizontal rule.
<HR WIDTH="300">
</BODY>
</HTML>


 

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
Below this text is a horizontal rule.
<HR WIDTH="300" ALIGN="left">
</BODY>
</HTML>


 

 

<HTML>
<HEAD><TITLE> InLine Graphic Demo </TITLE></HEAD>
<BODY>
Below this text is a horizontal rule.
<HR SIZE="10" WIDTH="300" ALIGN="left" noshade>
</BODY>
</HTML>


 

Summary

Size is the horizontal rules height in pixels or the thickness of the rule. Size "0" is the thinnest rule. If you don't give a size attribute it will default to size 2. The width of the horizontal rule is how far the rule goes across your screen. You can enter a number if you like, but an even better value is to enter a percent like WIDTH="50%". This would be one half the width of your screen. Since everyone has a different screen size, the percent is better than a number. If you don't put a WIDTH attribute, the default is 100% or across your entire screen. If your horizontal rule will be smaller than the width of your page, you can use ALIGN=left, right, or center. If you don't use ALIGN, there is no reason for a value because the default is to span the entire width of the page. If you use NOSHADE, you get a flat looking solid color line. The default is to have Shading. There are many graphics you can use like rules. You don't use the <HR> tag when you add a graphic file that serves as a rule.

 

top

Assignment 1 - Lesson 7

  1. Load up your hawaii1.htm file into your editor.
  2. Go HERE and grab one of these two maps of Hawaii. One is a better choice than the other. If you pick the wrong one your grade will be lowered! Create a folder called Graphics in the folder where you have saved hawaii1.htm. Keep all the images you save for these lessons in this folder. Center a map of Hawaii under the title HAWAII in your hawaii1.htm document. Use whatever tags you know to make the placement of the map look good.
  3. Add an appropriate ALT tag to the map of Hawaii if you haven't already done so.
  4. Place a thin border around the map of Hawaii.
  5. The dimensions of the map are 390 X 248. Add the appropriate Width and Height attributes to your tag.
  6. There are currently four sections to your Hawaii page. Put a horizontal rule after the first, second and third sections.
  7. The section Early Historical Events needs a photo of Captain James Cook aligned to its right. Describe who is in the picture using the ALT tag. Include a border of size 5. The dimensions of the photo are 120 X 180. Include the Width and Height attributes.
  8. Create a new section before Hawaii Facts. The title of this section is called Tourism. Make sure the section title follows the same style as the other section titles. Include this information:
    • Between the years 1955 and 1990 tourism became the most important industry in Hawaii. Faster planes began flying to the islands in 1959. More vacationers arrived. Dozens of new hotels were built. Former pineapple and sugar workers found jobs serving tourists. By 1972, two million people were visiting Hawaii each year. That figure was nearly seven million by 1991. Some visitors liked Hawaii so much that they moved there. Between 1960 and 1990, Hawaii's population almost doubled to 1,115,274.
  9. Put an inline graphic after the sentence - "Dozens of new hotels were built." The ALT should be Waikiki Beach. Do not include a border. The width and height is 145 X 233. Use the default alignment.
  10. Save the file as hawaii1.htm. Print out a copy of the result and a copy of the source code and hand it in.

top

Assignment 2 - Lesson 7

 

For this assignment you will create a web page on the state of Washington. I will provide all the text and images, but you will have to arrange the document sections and images as you choose. However, you must meet the objectives of the lesson. They are:
  1. Create the title WASHINGTON
  2. Create 4 document sections with headings
  3. Use the proper tags to layout each section's text in paragraphs
  4. For every graphic that is inserted, include:
    • ALT
    • Border (put some graphics with borders and others without)
    • Width and Height data
    • Alignment info when required
  5. Show one example of inline image
  6. Show one example of left aligned image with text to the right
  7. Show one example of right aligned image with text to the left
  8. Show one example of how to stop text wrap
  9. Use at least 3 horizontal rules throughout your page. Include one rule that is shorter than the width of the page and centered.

Use the graphics I have provided. You do not have to use all the graphics, but you must use a minimum of six. Place them in the document where you think appropriate. Store them in the folder called Graphics that you have made in the folder that contains hawaii1.htm. Name this web page wash.htm. When finished, print out your source code and a copy of the results.

DATA FOR THIS PROJECT:

WASHINGTON

FORESTS GREEN, MOUNTAIN PEAKS, FIELDS OF WHEAT

Washington is one of the country's three Pacific Coast states. California and Oregon are the other two. The Pacific Ocean is west of Washington. Oregon lies to the south. Idaho is to the east. To the north is another country, Canada.

Washington covers 68,139 square miles. Its lowest points are along the Pacific Ocean. Other low, level land lies along Puget Sound and the state's rivers. The Columbia Plateau covers most of eastern Washington. Its high, level land is rich for farming. But most of the state is mountainous or hilly. The Olympic, Cascade, and Rocky mountains rise above Washington. The state's highest point is Mount Rainier, at 14,410 feet above sea level.

Washington also has about 600 islands. The largest is 60-mile-long Whidbey Island. There are 172 islands in the San Juan group.

COASTAL WATERS, LAKES, AND RIVERS

Washington has about 3,000 miles of shoreline. The Strait of Georgia forms part of the state's western border. A big arm of the Pacific Ocean cuts deep into northwest Washington. This is Puget Sound. It is linked to the Pacific by the Strait of Juan de Fuca. Harbors along the sound are important for shipping. Seattle, Tacoma, and Olympia grew around the harbors.

Washington has about 1000 natural lakes. Snake-shaped Lake Chelan is near the middle of the state. Lake Washington and Lake Sammamish are near Seattle. The damming of rivers created many artificially made lakes in Washington. Franklin D. Roosevelt Lake covers 130 square miles. It is the state's largest lake. The lake was made when Grand Coulee Dam was built on the Columbia River.

The Columbia River enters northeast Washington from Canada. It winds its way down through the state. Then it flows westward to the Pacific Ocean. Along its course, it forms most of the Washington-Oregon border. The Snake, Yakima, Spokane, and Okanogan are other important rivers.

CLIMATE

The Pacific Ocean warms western Washington in the winter and cools it in the summer. Seattle's temperatures are about 40 degrees Fahrenheit in winter. About 70 degrees Fahrenheit is common in summer. But the ocean has less effect farther inland. Spokane's temperatures are about 25 degrees Fahrenheit in winter. In summer, they are about 80 degrees Fahrenheit.

Coastal Washington receives rain on more than 182 days of the year. Wet air off the ocean causes this. The wet air falls as rain before crossing the mountains. That is why parts of eastern Washington receive little rain. Those areas are almost like deserts. Winter snowfall is only a few inches near the coast. But it can be 50 to 500 inches in the mountains. Washington also feels the chinook wind. This is a winter wind that causes the temperature to rise quickly.

WOODS AND WILDLIFE

Forests cover more than half the state. Some western Washington woodlands receive over 100 inches of rain a year. These areas are called rain forests. The rain helps the trees grow very large. Washington's Olympic National Park has a large rain forest. The country's four largest western hemlocks grow there. The western hemlock is the state tree. The country's two largest noble firs and western red cedars stand in the park. The largest Pacific yew also grows there.

Besides these evergreens, Washington's forest have maples, cottonwoods, aspens, and cherry trees. Ferns and mosses grow in the rain forests. Many pretty wildflowers also grow in Washington. They include dogwood, goldenrod, and brown-eyed Susans. The coast rhododendron is the state flower.

Many kinds of animals live in Washington. Gray whales sometimes approach the Pacific shore. Seals and Dall porpoises often visit Puget Sound. Some of the world's largest octopuses also live in the sound. Washington is famous for many kinds of salmon. The steelhead trout is the state fish. Tuna, flounder, clams, crabs, oysters, and shrimp also live in Washington waters. Pelicans, blue herons, and puffins fish in the state's waters. Washington's oystercatchers open oysters with their long bills. Peregrine falcons dive at 200 miles per hour from Washington skies. Night herons and northern spotted owls fly about after dark.

Thousands of deer roam Washington. Mountain lions and Canada lynxes prowl about the state. Mountain goats climb through the highlands. Northeast Washington's pine forests are home to the pygmy shrew. It looks like a mouse.

Table of Contents

Lesson 8