and
Why did the lobster blush?
Why did the lobster blush?
tag at the beginning of line 4 ("Why did the lobster blush?") and not at the end of line 3 ("Here is a riddle for you.")? | Click here to go to the answer section | The second line across the page was placed by the
has the same effect as two
tags since the
tag forces a blank line before continuing on. Why then did I not simply use one
tag instead of two
tags at the end of line 5? Problem 4: What does HR stand for in
a paragraph or block of text goes here
Northern Ontario:
Five Mile Lake Provincial Park
1.5 square miles. Camping, fishing (walleye, northern pike, brook trout), canoeing, self-guided nature trails.
http://www.htmltutorials.ca/lesson4.htm (6 of 10)06/03/2004 09:04:10
LOGICAL TAGS - html tutorials in web page design by J. Gilson
Recommended
in front of the line "POINTS OF INTEREST" of the document you typed in? | Click here to go to the answer section | commands. For example, we did not type in a tags with HEADER tags. Of course, if you want additional blank lines before or after a HEADER tag, you will then need to use tags. 3. . Notice that the tag ends the "bolding" of text. 4. (which stands for EMphasize). Again, is needed to end italics. 5. It was printed in both boldface and italics. 6. We do not need tags because the line "Outdoor Living In Ontario" is a heading (H2) and a Header tag provides its own line break and blank lines above and below the heading. A new paragraph is always assumed to begin after a Header tag. 7. http://www.htmltutorials.ca/lesson4.htm (9 of 10)06/03/2004 09:04:10 1 large bunch of greens, preferably mixed DRESSING Have greens ready in separate containers in refrigerator. Dressing: Combine all ingredients together in a small bowl. Mix well. Spoon over greens. Toss to coat. Add tomato and toss together lightly. Serves 8 tag before a list item. You can also have lists within lists (nested lists). For example, the following HTML web page (which we will call document #2) is the same as the last one, except that for the third item in the list, I have added some statements on what to do if the canoe tips. What to do if the canoe tips will form a second list of items within the first list. SWITCH to NOTEPAD and make the necessary changes so that the web page now looks like the following. Document #2 is: ), are called block-level elements. Text-level elements are elements that do not generate a new paragraph (examples are and ). A DL is used to provide a list of items with associated definitions. Each item should be placed in a DT and its definition goes into a DD directly following it. If you are still confused, consider this brief explanation of the Definition List. Each click here to go to the top of the page ) as in and then closed the section with instead of using a header tag such as | Walk through the park | | Going for a swim | | A bicycle ride | | Walk through the park | | Going for a swim | | A bicycle ride | , , , and won't work and in some browsers using the Feel free to place anything on this side. This cell is 30% of the browser screen width. You can color it too if you want. This side is 70% of the width of the screen. Both sides are 600 pixels long. But you can change it to anything you want. Feel free to place anything on this side. This cell is 30% of the browser screen width. You can color it too if you want. This side is 70% of the width of the screen. Both sides are 600 pixels long. But you can change it to anything you want. This cell is 30% of the browser screen width. The vertical line is really an image placed in this cell and aligned to the right side of the cell. I could have placed the vertical line (the image) in this cell by aligning it to the left side of the cell. This line is 600 pixels in height (the same length as the table) and 2 pixels wide. ) at the beginning of each row. This Paragraph tag has no effect on any cell in the table, but if a table cannot be displayed, this tag will force a new paragraph with each new row of information. Here is an example showing the placement of the paragraph tag after the TR tag.
= EMPHASIZE TEXT http://www.htmltutorials.ca/lesson4.htm (7 of 10)06/03/2004 09:04:10
LOGICAL TAGS - html tutorials in web page design by J. Gilson
is used to emphasize text. It is a logical tag and so describes the meaning of the text to be displayed rather than how the text is to be displayed. In most browsers, the meaning is italics. However, if the browser doesn't support italics or the viewer changes the meaning, the browser will pick the best alternative way to display the text on the screen.
= STRONGLY EMPHASIZE TEXT is also a logical tag. It is used to strongly emphasize text. is distinct from . In most browsers, STRONG is identical to boldface. If a browser does not recognize boldface or if the viewer changes the meaning of STRONG, then the browser will pick the best alternative from the platform it is running on.
Using for Boldface or for Italics (Netscape Extension Tags) is accepted by all browsers as a way of strongly emphasizing text which in most cases is boldface. Instead of the and tags for strongly emphasizing text, you will sometimes see and for bolding text. While is a "Logical Style Command", is not. is a "Physical Style Command". A physical style command cannot be rendered differently. Therefore if a browser does not accept the tag, then your text will simply not be bolded as the browser has no alternative way to display them on the screen. The same reasoning is also be applied for using the tag to print in italics instead of the tag. Now if for some reason you want to ensure only italics or boldface and nothing else, then use the italic font or the boldface font .
Here is your final problem to see how well you learned the information given in this lesson. Problem 7: Make up an HTML document in NOTEPAD that gives the following web page in the browser. In other words, when you are finished, your browser should show exactly the following (the answer is given in the answer section):
TOSSED SALAD Simple and attractive
1 large bunch of greens, preferably mixed
http://www.htmltutorials.ca/lesson4.htm (8 of 10)06/03/2004 09:04:10
LOGICAL TAGS - html tutorials in web page design by J. Gilson
10 cherry tomatoes quartered DRESSING 1/2 cup Mayonnaise 2 tbsp. Minced dill or sweet pickle 1 tsp. Prepared mustard 1/4 tsp. Onion powder 1 tsp. Granulated sugar 1 tbsp. Milk Have greens ready in separate containers in refrigerator. Dressing: Combine all ingredients together in a small bowl. Mix well. Spoon over greens. Toss to coat. Add tomato and toss together lightly. Serves 8
| top | | bottom |
ANSWERS 1. appears to be closest to the normal size (at least in my browser). 2. First of all, if you look at the lines you typed in between the and tags, you did not type in any
or
tag between "THIS IS H1" and "THIS IS NORMAL". Yet they were printed by the browser on separate lines. They should have been printed on the same line. Also, there is no
tag at the end of any line and so everything should have been printed by the browser on one long line. Well, the reason for all this is that HEADER tags (such as ) are very fussy. They don't want anything else on the same line with them. That is why "THIS IS NORMAL SIZE" was printed on a separate line. Also, the HEADER tags are not very sociable. They like to be separated from the rest of the crowd and so a HEADER tag will automatically place a blank or empty line above and below the heading. That is why you also see a blank line above and below each heading tag. For this reason, you do not need
and
or
or
LOGICAL TAGS - html tutorials in web page design by J. Gilson
TOSSED SALAD
Simple and attractive
10 cherry tomatoes quartered
1/2 cup Mayonnaise
2 tbsp. Minced dill or sweet pickle
1 tsp. Prepared mustard
1/4 tsp. Onion powder
1 tsp. Granulated sugar
1 tbsp. Milk
| Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Five |
The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2003 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to [email protected]
http://www.htmltutorials.ca/lesson4.htm (10 of 10)06/03/2004 09:04:10
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
LESSON FIVE - INDENTING and CREATING SPACES WITH and CREATING LISTS
You may read the following sections in their entirety or use these choices to go directly to a section. | Indenting a line and creating spaces with | | Creating a list | | Creating an Unordered List | | Creating an Ordered List | | Creating a Definition List | | Changing appearance of bullets and numbers |
INDENTING A LINE and CREATING SPACES with Notice that I indented the beginning of this paragraph. Remember that your browser normally prints text left justified and only leaves one space between words and sentences. To force extra spaces or simply to indent a line, use the following command. It works.
These six characters will create a space as if you pressed the space bar. I used 8 of them to indent this paragraph as in: These six characters will ... In , the nbsp stands for non-breaking space character. is simply known as the space character. How many of these non-breaking space characters you use in a row is up to you. Use whatever number suits your purpose. Note that the "nbsp" must be in lower case letters. &NBSP; will not work. The character "&" is pronounced "ampersand" and these 6 characters form an ampersand command. We know that browsers read commands inside angle brackets (< >). Well, browsers also read commands between the "&" and ";" (that is, between the ampersand and semicolon). Ampersand commands are used to create special characters not found on the keyboard such as the copyright symbol, the trademark symbol, the symbol for degrees, etc. All you need to know is that special code that goes between the "&" and the ";". Here are some popular symbols and their ampersand commands that work in all browsers (commands for subscripts and superscripts are covered in Lesson 17): http://www.htmltutorials.ca/lesson5.htm (1 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
Non-breaking space
Copyright
©
©
Trademark
™
™
Registered
®
® or ®
Less Than
<
<
Greater Than
>
>
Ampersand
&
&
Quote
"
"
Cent
¢
¢
One quarter
¼
¼
One half
½
½
Three quarters
¾
¾
Degrees
°
°
Larger middle dot
•
•
If all you want to do is indent a line or paragraph, using the ampersand command is quite simple. But the ampersand command can also be cumbersome to work with. For example, try the following first problem for this lesson.
http://www.htmltutorials.ca/lesson5.htm (2 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
Problem 1:SWITCH to NOTEPAD and make up an HTML document that gives the following output in your browser. Indent my address 10 spaces (10 commands) from the left side of the screen, and use 30 spaces between the "n" in Gilson and the "W" in William. Do the best you can to line everything up. The answer is given in the answer section at the end of this lesson John Gilson Pauline Johnson Collegiate 627 Colborne St. East Brantford, Ontario Canada, N3S 3M8
William Somebody 120 Somestreet Someplace, Somestate U.S.A. 45061
| Click here to go to the answer section |
| top | | bottom |
CREATING A LIST Lists are often used to present information in an easy to read fashion. Lists can also be used to indent information. Lists can be bulleted, numbered or printed without bullets and numbers. It should also be noted that in any type of list, you can still use the line break and paragraph tags and the normal text markup tags to emphasize text, etc. There are three types of lists: ● ● ●
UNORDERED LISTS (uses bullets) ORDERED LISTS (uses numbers) DEFINITION LISTS (no numbers or bullets).
| top | | bottom |
CREATING AN UNORDERED LIST Unordered Lists are bulleted lists. You use the opening tag to indicate the beginning of an Unordered List. To indicate the end of the Unordered List, you use the ending tag
. Furthermore, each item in your bulleted list must begin with the tag
http://www.htmltutorials.ca/lesson5.htm (3 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
To see an unordered list in action, SWITCH to NOTEPAD and type in the following HTML document. When finished, save the document, SWITCH back to your browser and LOAD the document file so you can see it in action and also to experiment with the document by trying different things. NOTE: Once a document has been loaded into the browser, it is not necessary to choose FILE and then LOAD FILE each time you want to check how your document looks. If your document is already in the browser, then just click on the RELOAD button on the menu bar (assuming you have that option). This will reload your document so you can examine your updates. Now back to the task at hand. Type in the following HTML document which we will call document #1 as it will also be used later for ordered and definition lists. This is document #1: SAFETY TIPS FOR CANOEISTS
All my examples are for illustration purposes only. They should not be considered complete lists. This is the way your document should look:
SAFETY TIPS FOR CANOEISTS ● ● ●
Be able to swim Wear a life jacket at all times Don't stand up or move around
http://www.htmltutorials.ca/lesson5.htm (4 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson ● ●
Don't overexert yourself Use a bow light at night
Notice from the above results that: 1. 2. 3. 4. 5. 6.
denotes the beginning of an Unordered List
denotes the end of the Unordered List each
tag is needed as each new LI command forces a line break before printing the next item. Try experimenting with
after a list item or a SAFETY TIPS FOR CANOEISTS
I indented the second list for emphasis. You don't have to do that. Here is the browser output for this web page.
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
SAFETY TIPS FOR CANOEISTS ● ● ●
● ●
Be able to swim Wear a life jacket at all times Don't stand up or move around. If canoe tips, ❍ Hang on to the canoe ❍ Use the canoe for support and ❍ Swim to shore Don't overexert yourself Use a bow light at night
Notice that: 1. the second list was indented more than the first list 2. the second list also has bullets. In many browsers, they will be round, hollow bullets and not solid as in the first list, or they may be square bullets. For these browsers, if you have a third list, you will find the bullet changing to something else. Each time you move in a tier, the bullet style changes. Try it. In some low level and older browsers, the bullets will all be round no matter what tier you move to. This also illustrates the point that you must design your web pages on the basis of content and not solely on the basis of appearance. For example, if you want bullets, have them, and then let each browser handle how it will print them. If you still want square bullets for those browsers that can handle them, that's fine too. Just remember that browsers that can't handle them will simply print them their way. 3. for each tag, you need a
tag. If you want lists within lists within lists, just remember to follow the LIFO principle (Last In, First Out principle or in this case the last tag activated must be the first tag terminated). If you want to have your list line up more in the center of the page, the ALIGN="CENTER" command won't work as it would center each list item. Thus your list will not look very good. To move your bulleted list more to the center of the screen, simply use more
tags as in:
http://www.htmltutorials.ca/lesson5.htm (6 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
| top | | bottom |
CREATING AN ORDERED LIST (A NUMBERED LIST) An Ordered List is a numbered list where the numbers are in order beginning with the number 1. In other words, instead of using bullets, numbers are used to number each item in the list. You treat an Ordered List in the same way as an Unordered List, except that you use instead of
. OL stands for Ordered List. To see an ordered list, let's use document #1 and simply change the
tag to
and the closing tag to
. So SWITCH to NOTEPAD, load in document #1 and make the two changes so that the web page now looks like: SAFETY TIPS FOR CANOEISTS
This is the way your web page should now look:
SAFETY TIPS FOR CANOEISTS 1. 2. 3. 4. 5.
Be able to swim Wear a life jacket at all times Don't stand up or move around Don't overexert yourself Use a bow light at night
Notice the similarities here to that of the Unordered List in that:
http://www.htmltutorials.ca/lesson5.htm (7 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
1. 2. 3. 4. 5. 6. 7. 8.
denotes the beginning of an ordered or numbered list
denotes the end of the ordered list each
tag is needed to force a line break at the end of a list item. With ordered lists, if you insert another item into the list, or if you delete an item from the list, the list will automatically be renumbered (try it). 9. A list item can take up more than one line. These nine items are an Ordered List and note that list items 8 and 9 take up more than one line and everything still nicely lines up. This is also true for Unordered and Definition Lists (studied below)
COMBINING UNORDERED AND ORDERED LISTS We can combine unordered and ordered lists. To see this, let's use HTML document #2 where we had a list within a list. We will make some changes so that we will have a numbered list for the main items and a bulleted list for the items on "what to do if the canoe tips". Here is the revised document #2. SAFETY TIPS FOR CANOEISTS
http://www.htmltutorials.ca/lesson5.htm (8 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
Here is the browser output for this web page.
SAFETY TIPS FOR CANOEISTS 1. Be able to swim 2. Wear a life jacket at all times 3. Don't stand up or move around. If canoe tips, ❍ Hang on to the canoe ❍ Use the canoe for support and ❍ Swim to shore 4. Don't overexert yourself 5. Use a bow light at night Notice in the output that the main list is numbered and the secondary list is bulleted. | top | | bottom |
CREATING A DEFINITION LIST (NO BULLETS OR NUMBERS) A Definition List also manipulates text for you. Unordered Lists and Ordered lists are "single item" or "one tier" lists because each SUMMER CAMPING TRIP PLANNING
When you execute this HTML document, it should look like the following:
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
SUMMER CAMPING TRIP PLANNING
Winter Write for maps and travel brochures Read camping books Prepare budget and equipment list Spring Visit camping shows Buy essential items Make reservations Week Before Trip Have vehicle serviced Vaccinate pets Buy traveler's cheques Cancel newspaper and other deliveries Day before trip Load vehicle Note the following points: 1. DL stands for Definition List and denotes the beginning of a Definition List. It also tells the browser that a two item list or a two tier list is coming up. 2.
denotes the end of a Definition List 3. DT stands for Definiton Term. It represents the set of first items in the list or the first tier. Each
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
5. The DT tag has an optional end tag () or a paragraph tag (
FINDING YOUR WAY IN THE WILDERNESS 1. Seek expert advice about the area ❍ Get the best maps. On the map select ■ landmarks ■ mountains ■ lakes ❍ Get a good compass and ■ check slope of land ■ check direction of flowing streams 2. If there is snow on the ground, stay close to: http://www.htmltutorials.ca/lesson5.htm (11 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson ❍ ❍ ❍
roads trails and waterways
If you are inexperienced do not travel alone do not travel at night If you do get lost Don't panic Don't wander in the dark Give distress signals at regular intervals such as: ❍ three shouts ❍ three small fires ❍ three blasts of a whistle ❍ three rifle shots It may be wise to sit tight and wait for searchers | Click here to go to the answer |
| top | | bottom |
CHANGING THE STYLE OF YOUR BULLETS AND NUMBERS The TYPE attribute You can use the TYPE attribute to control the "appearance" of the bullets and also to control a numbered list. However, the TYPE attribute is a Netscape extension and new to HTML 3.2. It is therefore not yet supported by a number of browsers. So if you decide to use the TYPE attribute, you should be aware that it will lose its effect in these other browsers.
CHANGING THE APPEARANCE OF BULLETS Here is the way to change your bullets to SQUARE bullets:
http://www.htmltutorials.ca/lesson5.htm (12 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
If your browser supports the TYPE attribute, you should see the following square bullets. If your bullets are not square, then your browser does not support the TYPE attribute. ■ ■ ■
item 1 item 2 item 3
You can also change the appearance of your bullets to hollow or open bullets with: To get the round solid bullets back again (which is the default value), use:
Note the following explanations on these statements: 1. There are two main command lines here. The first one is called the FORM command and the second one is called the INPUT command. 2. FORM is a container element. The opening tag tells the browser that a form item is going here. The closing tag ends the form item (which you see at the end of the statements). We will learn about forms in a later lesson. 3. The FORM command has two attributes - METHOD and ACTION. 4. METHOD, a FORM attribute, tells the browser how to handle the FORM command. Its value here is "GET". That is, the browser is to "get" something which in this case points to a link through the ACTION attribute. 5. ACTION means the connection that you want to make. In this case, the action is a connection to my home page which is a file called "index.htm". If you want to connect to a page on the WWW, be sure to type in the complete address (URL). ACTION is a required attribute as it specifies the URL of the location you want to link to. 6. The second command line is the INPUT command and it generates the button.
CHANGING THE APPEARANCE OF AN ORDERED LIST We can also change the ordered list to something other than Arabic numbers (1, 2, 3, etc.). For example, to change to a capitalized Roman Numeral numbered list, it is:
Note that the "I" is a capital or upper case "I" and not the number 1. The above example will give the following output in the browser: I. item 1 II. item 2 III. item 3 The following replacements for the numbered list can also be made: for lower case Roman Numerals (i, ii, iii, iv, and so on).
for capital letters (A, B, C, and so on).
for lower case letters (a, b, c, and so on). Note that
(the number 1) is the default for listing the items as 1, 2, 3, and so on.
http://www.htmltutorials.ca/lesson5.htm (13 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
The START attribute The START attribute like the TYPE attribute is new to HTML 3.2 and so do not assume it will work for your website visitor. The START attribute is used to begin an Ordered List with any number or letter. For example, as in:
will begin numbering the list with the number 3 as in: 3. item 3 4. item 4 5. item 5 Also, try the following if your browser supports these attributes: will begin numbering with Roman Numeral III.
will begin numbering with Roman Numeral iii. Problem 3: What do you think
will do to the list? Problem 4: What will
do to the list? | Click here to go to the answer |
The VALUE attribute The VALUE attribute is used to change the number WITHIN A LIST and is used as part of the LI command. The following example numbers the statements in the list as 1, 2, 3, 7, 8 as shown below the http://www.htmltutorials.ca/lesson5.htm (14 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
document.
which gives the following results: 1. 2. 3. 7. 8.
This is List Item 1 This is List Item 2 This is List Item 3 This is List Item 7 This is List Item 8
The COMPACT attribute The COMPACT attribute basically tells the browser that the list items are short so that it can make the list more compact. For example, the browser could put more than one list item on a line. The COMPACT attribute is not widely implemented. | top | | bottom |
ANSWERS 1.
Pauline Johnson Collegiate 120 Somestreet
627 Colborne St. East http://www.htmltutorials.ca/lesson5.htm (15 of 17)06/03/2004 09:04:24
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
Someplace, Somestate
Brantford, Ontario U.S.A. 45061
Canada, N3S 3M8
You can see from the above document why many people will use an alternate method such as table (Lesson Twelve) to display information in columns. 2. This is how I did it. You may have found another way that yields the same results. FINDING YOUR WAY IN THE WILDERNESS
3. The list will begin with the letter "D" (as in D, E, F, etc.). 4. The list will begin with the letter "e" (as in e, f, g, etc.).
INDENTING AND LISTS - html tutorials in web page design by J. Gilson
| Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Six |
The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2003 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to [email protected]
http://www.htmltutorials.ca/lesson5.htm (17 of 17)06/03/2004 09:04:24
CREATING LINKS - html tutorials in web page design by J. Gilson
LESSON SIX - CREATING LINKS
You may read the following sections in their entirety or use these choices to go directly to a section. | Links in general | | Links within a page - page jump | | Linking to another page in your website | | Linking to another page anywhere in the world | | Using a link button | | MAILTO: (sending an e-mail) | | Placing your own subject in emails | | Placing a message in the body of emails |
LINKS You use links to: 1. jump from section to section within the same web page (also called Page Jump) 2. link to a different page within your own website (such as my linking this lesson to the next lesson or to my home page) 3. link to another web page or website anywhere in the world There are different ways to provide these links. The three most common ones are: 1. clicking on a word, phrase or sentence - such as those you see at the top of each of my lessons (and also on my home page to choose the lessons). 2. clicking on a button - such as those you see at the very end of this lesson to take you back to my home page or to the next lesson. 3. clicking on an image (that is, a picture or graphic). We will study images in Lessons Seven and Eight.
| top | | bottom |
LINKS WITHIN A PAGE - PAGE JUMP
http://www.htmltutorials.ca/lesson6.htm (1 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
Notice at the top of this page I offer the choice of either reading this lesson in its entirety or choosing a topic and going directly to that topic. If you were to print out this lesson, it would take approximately 11 sheets of letter size paper. On a browser screen, it can take some time scrolling to find a specific section or topic. Many viewers do not want to waste a lot of time searching and so offering page jumps will make this process easier. So with Page Jumps, you have the option of jumping to different sections or topics without having to search through the entire web page for the topic. Notice that at the end of each topic or section, I also offer the choice of going back to the top of the page or to the bottom of the page. So you can see that I make good use of page jumps. To offer a page jump, you need two items: 1. The command that points or sends the browser to another section on your web page. 2. The place or point on the page where you want the browser to jump to. Here is the basic link command that points to another section on your web page. Click on these words Where "linkname" is the name of the section you are jumping or linking to. An example of a page jump is the following (to return back here, just click on the BACK button on your browser menu bar): click here to go to the top of the page This is the actual command I used for this: click here to go to the top of the page
If you do not want to use a header tag, then use the paragraph tag as in:
http://www.htmltutorials.ca/lesson6.htm (2 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
and this is the spot that the browser will jump to whenever someone clicks on the words "click here to go to the top of the page". Note the following points with these two commands: 1. When you move the mouse pointer anywhere on the words, "click here to go to the top of the page", it turns into a pointing hand. Anytime you see a pointing hand, it means that you are on a link and clicking on the link will take you some place. Notice that when you move the pointer over the words "click here to go to the top of the page", the location of this lesson, the file name of this lesson (lesson6.htm) and the "linkname" (#top) appears on the status line at the bottom of the browser (try it to see for yourself). 2. "#top" is called the URL which stands for Universal Resource Locator. A URL is the address or location of the link. 3. The A stands for Anchor. In general, the anchor tag tells the browser to anchor or to attach to something else. In HREF="#top", we are using it to tell the browser to anchor or attach to another section on the same page called "top". 4. Every Anchor tag must have a closing or end tag () to signal the end of the anchor. 5. The anchor element is a "container element". Everything contained between the and tags is affected by the element. In our example, the container element A not only contains the name of the section we are jumping to ("top"), but also the words to be clicked on ("click here to go to the top of the page"). 6. The Anchor element is called a Hyperlink as it allows you to link to any location or address you want. The anchor tag is the glue for hypertext documents. When the enclosed text (which can also be an image instead of text) is selected by the viewer, the viewer is immediately sent to the location specified in the HREF attribute. 7. HREF stands for Hypertext REFerence. It means that "this is where the link is going to" - that is, where the link is referenced. In my example, it is going to a section called "top". 8. As my example shows, the name I chose for the "linkname" was "top". Choose your link names to reflect the section you are jumping to and there is no need to have long link names. 9. The # symbol that you see in the first command (in my example, "#top") must be there. The # denotes an internal page link. Without it, your browser will be looking for the code name outside the page you are on and of course, it won't find the name. 10. There is no # symbol in the NAME attribute. 11. The NAME attribute is used to set up "named anchors". The named anchor in our example is "top". When you click on the link, the section where you place the NAME command (the target of your HREF attribute) will appear at the top of the browser screen. 12. The name you choose in the HREF attribute, must match the case in the NAME attribute. 13. The value of the HREF attribute ("#top" in our example) and the value of the NAME attribute ("top") must be enclosed with quotation marks. If you don't enclose with quotation marks, the hyperlink may not work correctly. 14. Anchors cannot be nested. You cannot have an anchor within an anchor. 15. Please note that the following two statements do exactly the same thing:
http://www.htmltutorials.ca/lesson6.htm (3 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
A WALK THROUGH THE PARK and A WALK THROUGH THE PARK Both these statements will place "A WALK THROUGH THE PARK" at the top of the browser screen when the viewer clicks to go to that section. With the first statement, a good HTML validator (a program to make sure you are writing correct HTML) will warn you that you have an empty container element A because no statement is contained between the anchor tags. Normally when you use a container element, it would be expected that something would be "contained" between the opening and closing tags - hence the warning. The second statement avoids this warning message as "A WALK THROUGH THE PARK" is contained between the anchor tags. Note also that a HEADER tag is not allowed between anchor tags, so if "A WALK THROUGH THE PARK" uses a HEADER tag, then you must use the first statement. Notice at the beginning of the lesson I have six choices to cover all the main topics. To separate them I used vertical bars ( | ) as in: | click here to go to the top of the page | The vertical bar is usually located on the backslash key (\). It is the key that has the two vertical dashes on it, one above the other. The two dashes will appear as a solid vertical bar in your text editor (such as NotePad) and in your browser (and in other software as well). Now, if you need more than one choice in the menu, you simply place each of your links side by side as in: | Links in general | | Links within a page - page jump | | Linking to another page in your website | | Linking to another page anywhere in the world | | Using a link button | | MAILTO: (sending an e-mail) | These are the links at the beginning of this lesson. The links shown here most likely do not appear as neatly as those at the beginning of this lesson, so we will work with this example until it does appear like the links at the beginning of this lesson. Here are the statements that support the above links: | Links in general | | Links within a page - page jump | | Linking to another page in your website | http://www.htmltutorials.ca/lesson6.htm (4 of 16)06/03/2004 09:04:40
There are several things that can be learned from this one example and here they are: 1. Notice that these page jumps are all centered with only ONE center command. Do not use the
CREATING LINKS - html tutorials in web page design by J. Gilson
| Linking to another page anywhere in the world | | Using a link button | | MAILTO: (sending an e-mail) |
tag. In other words, don't say, "I can only get these two links on one line and so I will insert a page BReak command and then place the next three links on the next line, and so on. The problem with doing this is that you are designing for appearance instead of for content. If you want your links centered, then center them all with one ALIGN attribute and let each individual browser decide how they will be centered. In some browsers, maybe three links can fit on one line and in other browsers, maybe only two links will fit. Also, one browser may be able to fit all your links into two lines while another browser may require three lines. You need to take all these thoughts into consideration and so one center command is all you need and your links will look good in all browsers. 2. Notice also that you not only can click on your link words (such as "Links in general"), but you can also click on the vertical bars (they are also underlined and highlighted in blue). This is because the vertical bars are also contained between the Anchor tags (that is, between the and the tags). You may not want this. Notice at the top of this lesson that I do not have the vertical bars as part of the link statement (they are not underlined). Compare the last example which is: | Links in general | | Links within a page - page jump| | Linking to another page in your website | |Linking to another page anywhere in the world | |Using a link button | | MAILTO: (sending an e-mail) | to this example, where each choice is clearly separated and with no underlined and highlighted vertical bars: | Links in general | | Links within a page - page jump | | Linking to another page in your website | | Linking to another page anywhere in the world | | Using a link button | | MAILTO: (sending an e-mail) | Here are the lines I used for this latest version. | Links in general | | Links within a page - page jump | | Linking to another page in your website | | Linking to another page anywhere in the world | | Using a link button | | MAILTO: (sending an e-mail) |
http://www.htmltutorials.ca/lesson6.htm (5 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
3. Note that each pair of adjacent vertical bars is separated by one space. 4. Remember that the anchor tags ( and ) act as a container in that all that they contain will be part of the link. If you do not want your vertical bars part of the link, then place them outside of the anchor tags, that is, outside the container tags as shown above and as shown in the following example: | Links within a page - page jump | 5. If we have more links than will fit into one browser line, the browser will automatically wrap to the next line. The problem is to avoid having part of a link on one line and the rest of it on the next line. We don't want the vertical bars that surround a link to be separated from the links either. For example, in our third choice, "Linking to another page in your website", we want to ensure all these words are on the same line - whatever line that might be - including the vertical bars around them. We don't want it to be split between two lines. To do this, we use the space character ( ) to replace each space between words. This will fool the browser into thinking that "| Linking to another page in your website |" is one long word and so if it won't all fit on one line, the whole thing will be wrapped to the next line. This then is how part of the above would look with an replacing each space between words including the vertical bars: | Links in general | | Links within a page |
You can type the above all in one long line in NOTEPAD if you want to. No matter how you type it in, you must remember to place one space (no ) between each pair of adjacent vertical bars because this is the only place that the browser will be able to make a split and wrap to the next line. Using this method will ensure that no link gets cut up between two lines and that the vertical bars around the link will also remain part of the link statement. The whole thing will then look like: | Links in general | | Links within a page - page jump | | Linking to another page in your website | | Linking to another page anywhere in the world | | Using a link button | | MAILTO: (sending an e-mail) | which is what you see at the beginning of this lesson. Note how each link is kept together and that the links are nicely centered. No link is split between two lines including the vertical lines around the links. If you want to see exactly how I did all my links at the beginning of this lesson, just go the VIEW menu and choose SOURCE or DOCUMENT SOURCE. Instead of the vertical bars around the links, you might prefer square brackets [ ]. The only problem with square brackets is that many text only browsers will automatically insert square brackets around
http://www.htmltutorials.ca/lesson6.htm (6 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
each link. Thus if the browser places square brackets around links and you also use them, then each of your links will look like: [[link words]] which doesn't look so nice. Here is a problem for you to work on. Problem 1: Make up the statements that will produce the following page jumps (for this problem, do not use the " " command): | Walk through the park | | Going for a swim | | A bicycle ride | Problem 2: Referring to Problem 1, what is the statement that you would place at the beginning of the "Walk through the park" section? Problem 3: Change your answer to Problem 1 so that no browser will be able to break up any link. That is, if a link will not fit all on one line, it will place the entire link on the next line. | Click here to go to the answer section | Later in this lesson, after we study links in general, Problem 6 deals with the case if you need to jump to a certain point on another web page. | top | | bottom |
LINKING TO ANOTHER PAGE IN YOUR WEBSITE My main home page is the web page that contains a table of all these lessons. If you want to study a particular topic then you can go to my home page and choose the needed lesson. Each lesson in this course is also a web page, but it is not my home page. All my web pages (or simply "pages") taken together make up my website. In the table on my home page, when you choose a lesson, the lesson appears on the screen through a basic link command. Thus each cell in the table is a link to a lesson. At the end of each lesson, I have three links - one giving you the option of returning to my home page, one to my alternate home page, and one to go on to the next lesson. Linking to pages within your own website is easy to do. Recall that the basic command for a page jump studied in the last section is:
http://www.htmltutorials.ca/lesson6.htm (7 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
Click on these words Well, to link to another page such as to your home page, just replace the #linkname with the name of your file as in: Click on these words For example, if your home page was named index.htm, you could have: Go back to home page which will be displayed in the browser as: Go back to home page If you do click on these words, the browser will immediately load my home page. To return to this spot, click on the "BACK" button on the menu bar. Note the following points with the above command: 1. As before, the A stands for anchor and in this case, it begins the attachment to another page. 2. HREF as before, tells the browser that this is where the link is going to. 3. The value of the attribute HREF is "index.htm". That is, "index.htm" is the file or document name of the web page you are linking to. The file name must be enclosed with quotation marks. 4. Since the words "Go back to home page" are contained between the anchor tags and , a person can click anywhere on those words and the browser will load the home page. 5. You do not need a command as the file (in our example, "index. htm") already exists. 6. When you lay the mouse pointer anywhere on the words, "Go back to home page", you will see the file name ("index.htm") and its location displayed on the status line at the bottom of the browser screen. In other words, the complete URL is displayed. Problem 4: Where will the browser look for this file called "index.htm" or whatever file name you choose for your web page? | Click here to go to the answer section |
| top | | bottom |
http://www.htmltutorials.ca/lesson6.htm (8 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
LINKING TO ANOTHER PAGE ANYWHERE IN THE WORLD Often you see web pages with links to other web pages or websites and these other web pages can be anywhere in the World Wide Web (WWW). Recall in the above section, that the command to link to another web page within your own website is: Click on these words as in: Go back to home page where the browser will load the file called "index.htm" when you click on the words "Go back to home page". To link to any page in the world, just replace the file name with the COMPLETE ADDRESS (URL) of the page you want to link to. Remember that you must also enclose the COMPLETE ADDRESS (the URL) of the link with quotation marks. For example, the command Want to e-mail a greeting card to someone? will link you to a website that lets you send e-mail greeting cards. If you want to try it now, here it is: I would like to send an e-mail greeting card Problem 5: In summary, the three link commands that we studied in this lesson are very similar statements. The only differences are in the names. Here are the three situations showing their similarities. Give a brief description of when each is used. a) enclosed text b) enclosed text c) enclosed text | Click here to go to the answer section |
Problem 6: Suppose you have a web page that contains pictures of your family and also of your pets. Suppose also that this page of pictures is called pictures.htm. What command would you use to not http://www.htmltutorials.ca/lesson6.htm (9 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
only load the pictures page, but the pets section on the pictures page. That is, we want to load the pictures page and then do an immediate page jump to the pet pictures section. | Click here to go to the answer section |
| top | | bottom |
USING A LINK BUTTON At the very end of this lesson, I used three link buttons - one to allow you to go back to my main home page, one to my alternate home page, and one to take you to the next lesson. Buttons are neat and professional looking. Here is an example of a link using a button (feel free to click on it and then choose the BACK button to return to this spot). Return to Home Page
Here are the HTML statements that give this button:
http://www.htmltutorials.ca/lesson6.htm (10 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
7. The TYPE attribute lets the browser know what TYPE of INPUT will occur. In this case we want to SUBMIT a button (a button is assumed in "submit"). Thus TYPE="submit" produces a button. 8. The VALUE attribute gives the wording that will appear on the button. 9. Only the value of the ACTION and VALUE attributes require quotation marks. Quotation marks for the METHOD and TYPE values are optional. If you want two buttons above each other, then just repeat the above statements twice, changing the ACTION and VALUE attributes to whatever is appropriate for your situation. Here are two centered buttons. The statements are given below the buttons. The buttons are active so you can click on them. Return to Home Page Send me to Lesson Seven
Here are the statements that give the above two buttons:
LINING UP LINK BUTTONS Lining up link buttons so that they look like: Return to Home Page
Send me to Lesson Seven
is a little more complicated. However, if you want the statements now, here they are:
http://www.htmltutorials.ca/lesson6.htm (11 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
TR stands for Table Row and TD stands for Table Data. We will study tables on Lessons Eleven and Twelve, but for now you can use these statements as they do work. If you want to see how I did the three buttons at the end of this lesson just choose SOURCE or DOCUMENT SOURCE from the VIEW menu. Final remarks about buttons. ●
●
Normally, you do not use buttons to link to other web pages. Instead, use text and images to link to other pages, where you click on some words or on an image to load another web page. Buttons are usually used in FORMS and for executing scripts. If you visit my guestbook page, you will see two buttons at the end of the form - one to submit the contents of the form and the other to reset the form contents. When a web page is loaded after clicking on a button, you may see a question mark (?) after the file name in the "location" bar as in: pictures.htm?. Don't worry about this. The question mark simply indicates that the page was loaded by clicking on a form button.
| top | | bottom |
E-MAIL (using the MAILTO: command) Before we leave this lesson on links, let's take a look at the command that allows people to write to you simply by clicking on your e-mail address or on some statement pointing to your e-mail address. To do this, we use the MAILTO: command which in effect creates a link to your server by opening up the email box allowing a message to be sent immediately. Here is a statement that would allow anyone to send me an e-mail: Please tell me what you think of these lessons by sending me, John Gilson, an e-mail. Note that only "John Gilson" is underlined and in blue meaning that if you want to send me an e-mail, you only need to click on my name. Try it and see what happens. You won't be able to send me an email as I am using a dummy address so you can experiment with the MAILTO: command. If you want to send me an e-mail, you can do it from my home page. To close the e-mail box, just choose FILE and then CLOSE and the e-mail box will disappear. Here is the HTML line that gives the above statement: Please tell me what you think of these lessons by sending me, John Gilson, an e-mail. http://www.htmltutorials.ca/lesson6.htm (12 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
In this example, [email protected] is my complete e-mail address. For your own web pages, just replace my e-mail address with yours. Note that the only difference between this e-mail link command and a link to any web page is that the e-mail address goes in place of the web page URL. Problem 7: Write the HTML statements that would give the following line on a web page. You can replace my e-mail address with yours and then try sending yourself a message. For more information, please send an e-mail to me, John Gilson, and I will get back to you as soon as possible. | Click here to go to the answer section |
| top | | bottom |
PLACING YOUR OWN SUBJECT IN EMAILS You can also add set the subject, cc, and bcc lines as part of the mailto: link. For example, to add a topic (a subject) in the subject line of your e-mail (the most popular option), the format is: as in: Please send more product information If you want to include the e-mail address of the person you also want to receive a carbon copy of the same e-mail (that is, the person you want to be cc'd), the format is: where [email protected] is the complete e-mail address of the person to be cc'd. If you want to include the e-mail address of the person you also want to receive a blind carbon copy of the same e-mail (that is, the person you want to be bcc'd), the format is:
http://www.htmltutorials.ca/lesson6.htm (13 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
Note the following points: 1. Adding a subject, cc or bcc is not standard HTML, nor does any browser claim to support these additions. However, they do work in both Netscape and Explorer on both Macs and Windows. 2. Note that there is no space behind the end of the e-mail address and the question mark (?) that begins the extra information. 3. You are allowed to have spaces in the subject line, but no quotation marks (") are allowed as part of the subject. 4. It is best to use only one of these three options at a time as this is all that Netscape allows - even though Explorer can handle all the variables at once. 5. It appears that the success of these options also depend on the mail program used. An older version mail client may not accept any of these options. 6. Keep in mind that a visitor can change the subject, cc and bcc lines. These additional options after the question marks only start the e-mail in the way you would like to see them sent.
| top | | bottom |
PLACING A MESSAGE IN THE BODY OF EMAILS You can also place a personal message in the body of an email using the ?body attribute as in: Click here when ready to send us your email. In this example, the statement "Don't forget also to send in your financial statements as soon as possible" is the instruction that will be placed in the body of the email. The maximum length of a message is 250 characters. If your message is more than 250 characters long, then either the entire message may not appear at all in the body or it will be cut off at 250 characters. So to be on the safe side, keep your message to no more than 250 characters.
| top | | bottom |
ANSWERS 1. The following is one way to solve the problem. You may have given the page jumps different names. Note that the problem did not have the link words strongly emphasized. This is because I
http://www.htmltutorials.ca/lesson6.htm (14 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
used the paragraph tag (.
http://www.htmltutorials.ca/lesson6.htm (15 of 16)06/03/2004 09:04:40
CREATING LINKS - html tutorials in web page design by J. Gilson
| Back to the top of the page | Return to Home Page
Return to Alternate Home Page
Send me to Lesson Seven
The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2003 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to [email protected]
http://www.htmltutorials.ca/lesson6.htm (16 of 16)06/03/2004 09:04:40
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
LESSON SEVEN - IMAGES - PART 1
You may read the following sections in their entirety or use these choices to go directly to a section. | Images - introduction | | Placing images on your web pages | | Saving (downloading) an image | | Image formats | | Image attributes | | Images not appearing in your browser? |
IMAGES (PICTURES, GRAPHICS, ICONS, CLIP ART, ETC.) Up until now, everything has been text based and you should already be able to produce some very nice text based web pages. We know of course that the World Wide Web (WWW) is much more than just plain text. It is the ability of the internet to also provide images that makes it so very popular. Images are also called pictures, graphics, icons, clip art, etc. Browse the web and you will see all kinds of images. The chain at the top of this lesson was placed there as an image. There are millions of images out there in the WWW and many of them are free for you to use. If you like an image and want to use it, then all you need to do is to download (save) the image (this is called "taking the image") and I'll show you how to do this later in this lesson. However, before you do download or save someone else's images, be sure that it is in fact free to take. Often you are told somewhere in the website if the images are free to take or if restrictions apply. If you do see an image you like and you don't know if you are allowed to download it, then you should ask. Don't just take it. If you ask, usually you will be given permission to do so. Remember this, when you place a web page on the internet, it is considered publishing and so all the rules and laws of local and international publishing apply. So if you are in doubt, ask. I have a directory or folder set aside for images that I download from the net and because there are so many images out there, I have sub-directories to categorize them. Some of my categories are: backgrounds, buttons, religious, animated images, lines, etc. If I need an image for a web page, I just copy it to the directory I need it in. While images can really add to a web page, be careful that you do not overuse them. It takes time for a browser to display an image and so a lot of images can take a lot of time. Also, the bigger the image, the longer it will take to display. Many viewers do not want to wait a long time. What often happens then, is that viewers will leave your site before having really seen it, or they will turn off the graphics. To turn off graphics is easy to do. In Netscape for example, you choose OPTIONS from the menu bar and then choose AUTO LOAD IMAGES to turn off this option. Now it is possible to do certain things to speed http://www.htmltutorials.ca/lesson7.htm? (1 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
up the displaying of text and images and we will get to that later in this lesson.
| top | | bottom |
PLACING IMAGES ON YOUR WEB PAGE The basic format is quite simple. It is: 
where "image.gif" represents the name of the image. The chain at the top of this lesson:
was put there with this command: 
A discussion on this image command. 1. I called my image "hrchain" standing for Horizontal Rule Chain because it can be used to replace an
or Horizontal Rule command. There are many places on the web where you can find line images to replace horizontal rules. Here is one of them: http://members.aol.com/dcreelma/imagesite/image.htm 2. IMG stands for "image" (IMaGe). It means that an image will be placed here. The IMG tag is used to insert images within the text. These are often called "inline" images. 3. SRC stands for "source" (SouRCe). It is an IMG attribute that tells the browser where the source for the image is, that is, the name of the image and where to find the image. Thus the SRC attribute specifies the name and location (URL) of the image file. It can be a relative or an absolute URL. The image should be located in the same directory as the web page it is to appear on. Since no directory is given, the source is assume to be the current directory - the directory of the web page. 4. "hrchain.gif" is the complete name of this image and this name follows the same format as your HTML document names. That is, you have the name (in my case it is "hrchain"), a dot, and then the suffix ("gif"). http://www.htmltutorials.ca/lesson7.htm? (2 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
| top | | bottom |
SAVING AN IMAGE There are thousands of images out there on the WWW and many of them are free for you to use in your own web pages. If you see an image you really like and are not sure whether you are allowed to download it for your own use, just e-mail the person or company and ask. Often there is an e-mail address somewhere on the web page. To "download" an image to your hard drive means to "save" the image on your hard drive. To quickly save an image (this should work on most browsers), just place the mouse pointer anywhere on the image, and click once with the RIGHT mouse button (that is, the opposite button that you would normally use when clicking with your mouse). If this doesn't work, then click and hold the mouse button down. A menu will pop up beside the image with a number of choices. One of these choices is Save Image As ... or Save Picture As ... or Save Link As .... Choose the option that applies to your browser and the usual dialog window will open up asking you where on your hard drive you want the file (that is, the image) saved. For example, to practice saving an image, go back to the chain image at the beginning of this lesson and save it (it is free to take). This same method for saving an image can also be used to save a background image. If you see a background (wallpaper) you like and are allowed to save it, just click anywhere on the wallpaper with the right mouse button and follow the same procedure as described above for saving an image. Finally, if you want to try my examples with images, you will need to save the images in my examples into the same folder that you are saving my web page examples in (using the above method to save images). If you do not save the images to your working folder, the images will not appear on your web pages.
| top | | bottom |
IMAGE FORMATS Most browsers only support two inline image formats or file types. They are (1) GIF and (2) JPEG. Here is a brief discussion on these two formats as denoted by the suffixes. 1. .gif (pronounced "jiff" as in peanut butter). GIF stands for General Image Format. This format was invented by Compuserve and is the most common format on the World Wide Web. Its http://www.htmltutorials.ca/lesson7.htm? (3 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
simple format is a series of pixels that line up to form a picture. This format can store black and white, grayscale, and color images. With images in this format, you are limited to a maximum of 256 colors for any image. If you were to examine an image in a program such as LView Pro or Paint Shop Pro (visit http:// shareware.cnet.com/ and do a search to download either program), it will take the raw image data and determine the 256 (or fewer) colors that best describe the color content of the image and creates a color table changing these colors into integers (or decimal numbers as they are called) ranging from 0 to 255 (= 256 numbers). Thus a picture of a blue sky will have mostly blues in the color table while a picture of trees will have a lot of browns and greens in the table. Each actual pixel in the original image is then examined for its true color and matched to the closest color in the color table. The pixel is then assigned the corresponding decimal number which is called the "color index value". The result of all this a table of color indexes along with a color map table that maps each of these indexes into the chosen colors. Color maps are known by a variety of names such as Color Table, Indexed Color, Palette, and Color LookUp Table. Thus the GIF format stores its colors in a 256 color indexed color map. This technique can do a very good job in creating images that are near identical to the original image. The GIF format is ideal for images that contain larger single-colored regions (no more than 256 colors) such as buttons, logos, icons, lines and clip art. If the image has more than 256 colors, you will have to reduce the number of colors in the image to 256 (by dithering for example). Also, remember that the fewer colors you use, the smaller the file. Color photographs, on the other hand, often contain more than 256 colors and with no large single-colored regions. GIF images use a form of "lossless" compression called LZW named after its creators. LZW compression works by finding repeated patterns within the image. The more repeated patterns, the better the compression. Thus images with large blocks of color work great as GIF files because they can be compressed so well. Scanned images such as photographs have fewer large blocks of color and therefore do not compress as well. Thus photographs in GIF format tend to look grainy and blotchy. There are two versions of the GIF format - GIF87 and GIF89. The GIF89 format allows you to also make one of the colors of the image transparent (such as the background color). 2. .jpeg or .jpg stands for Joint Photographic Experts Group. Recall that for IBM and IBM compatibles not running Windows 95 or higher, only a 3 letter suffix is allowed, while for MAC, Unix, Amiga and Windows 95 or higher users, a four character suffix is allowed. As the name Joint Photographic Experts Group implies, this format was created especially for storing photographic images, and it does this in a compact digital format. Thus this format can support any number of colors (millions more than the 256 maximum number of colors in a GIF image) as well as images that have no large single-color regions. So if you are dealing with photographic images, JPEG format is recommended because of image http://www.htmltutorials.ca/lesson7.htm? (4 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
quality and image file size. JPEG file sizes are not determined by the number of colors, but by the amount of compression. When you save an image in JPEG format, you choose how "lossy" you want the compression to be - from lossless to extremely lossy. The more lossy the compression, the smaller will be the resulting file size but also the less clear the detail. Extremely compressed JPEG images can also look very grainy or blotchy. Therefore, if you are using JPEG format, try different levels of compression to see what gives optimum quality. A compressed file must be decompressed to be displayed and JPEG images can take significantly longer than GIF images to decompress and display. This is because JPEG is a more complicated form of compression. You might save file space on the Hard Drive with a JPEG image and so save time loading the file, but decompressing and displaying the image can negate the time savings.
| top | | bottom |
IMAGE ATTRIBUTES BORDER and ALIGN attributes There are a number of attributes that go with the IMG command (SRC is only one of them) and we will begin our study of them with the BORDER and ALIGN attributes. Recall that an attribute supports or modifies a command. BORDER ATTRIBUTE The BORDER attribute is used to place (or eliminate) a border around the image. The BORDER attribute commands the browser to draw a border of an indicated size around the image. A border is often used when the image is a link to show clearly that the entire area bounded by the border is a hyperlink. Otherwise, it is often used as BORDER="0" (quotes are optional) to turn it off - that is, no border. ALIGN ATTRIBUTE The ALIGN attribute is used in conjunction with placing text around the image. That is, ALIGN controls the alignment of the image with respect to text. To see these attributes in action, please SWITCH to NOTEPAD or to a similar text editor, and type in the following HTML document. I want you do some experimenting with it. http://www.htmltutorials.ca/lesson7.htm? (5 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
ABOUT OUR HALL
Please call for rates
We are wheelchair accessible.
Now save this web page. If you have not saved the wheelchair image (whechair.gif) then you need to save it too. Remember that both the image and web page must be in the same folder. Once you have saved the web page and image, then SWITCH back to your browser and load the document to see it in action. This is what you should see:
ABOUT OUR HALL
We are wheelchair accessible.
Please call for rates
Now for a discussion on the above HTML document. 1. The ALIGN="LEFT" before the IMG command tells the browser to place the image on the left side of the screen (which is actually the default value). Problem 1: SWITCH to your text editor and change the ALIGN="LEFT" to ALIGN="CENTER". Save the change, SWITCH back to your browser, and load the document. What change do you see? Problem 2: Now repeat this process and change to ALIGN="RIGHT". What happened this time? | Click here to go to the answer section | Using a value of LEFT or RIGHT will make the image and text line up against the left or right margin of the browser screen. http://www.htmltutorials.ca/lesson7.htm? (6 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
2. The BORDER="0" means that we want no border. It is clear from the image that we do not need a border. Border widths are measured in pixels. Try a border of 10 pixels, that is, replace the number 0 with the number 10 - as in BORDER="10". Note the difference. Sometimes you will want a small border if the image comes with a clear or transparent background - especially if you want the image to be a link (we will study images as links in Lesson Eight). Also, in some situations, a browser will automatically place a border around the image and you may not want that to happen. To avoid these situations, control the border with the BORDER attribute. 3. Exactly how big is one pixel? Does it have a specific size? The answer is that a pixel does not have a specific size. Its size depends on a number of things. One of them is the resolution of the monitor being used. A high resolution monitor has a smaller size pixel than a low resolution monitor because a high resolution monitor has more pixels to the inch (or centimetre). Therefore the size of your image will vary a little from browser to browser. However, your images (and text) will always be in the right proportion no matter which monitor they are viewed on - and so they will always look good in any browser. 4. Images can have text printed next to them. The ALIGN="MIDDLE" that you see after the BORDER attribute tells the browser to align the words "We are wheelchair accessible" with the middle of the image. Note that the command is "MIDDLE" and not "CENTER". Also, only one line of text is allowed with this ALIGN command. If the line is too long or you have more than one line, the rest will be placed below the image. Try adding some words or another line to the words "We are wheelchair accessible" to see this happen. Problem 3: Change the ALIGN="MIDDLE" to ALIGN="TOP". What happened? Problem 4: Change to ALIGN="BOTTOM". What happened this time? | Click here to go to the answer section | The values TOP, MIDDLE and BOTTOM specify where any text following the image should be placed. Remember that if more than one line follows after the image, the additional lines will be placed below the image. You can also force text below such an aligned image by using the BR tag with the CLEAR attribute as in
. You may want to experiment with this attribute.
WIDTH, HEIGHT and HSPACE attributes To understand the WIDTH, HEIGHT and HSPACE attributes, SWITCH to your text editor and make changes to our wheelchair accessibility example so that it now looks like:
http://www.htmltutorials.ca/lesson7.htm? (7 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
ABOUT OUR HALL
Please call for ratesWe are wheelchair accessible.
Now save the document, SWITCH back to your browser, load the document and this is what you should see:
ABOUT OUR HALL
We are wheelchair accessible.
Please call for rates
The WIDTH and HEIGHT attributes involve the size of the image. This size is measured in pixels. Thus our size has a width of 96 pixels and a height of 90 pixels. In pixels, the difference between 96 and 90 is very small and may not even be noticeable. It is important for you to include the size of your image. When you include the size of the image, the browser can then immediately set aside the required space for your image and begin loading and displaying your text while the image is still being loaded. This is important since most often images take longer to load than text. Remember also that the bigger the image, the longer it will take the browser to load and display it. That is why you often see text being displayed before images are completely displayed. If the browser does not know how much space to set aside for your image, it will not know where to place the text. The browser then has to work on displaying the image before the text. In other words, use the WIDTH and HEIGHT attributes as this allows a browser to lay out a page in advance, as it then knows where the text around the image should be placed. Leaving out the WIDTH and HEIGHT attributes is also not considered good HTML coding practice. In
http://www.htmltutorials.ca/lesson7.htm? (8 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
other words, if you want to follow good coding practices, the WIDTH and HEIGHT attributes must be included with the IMG tag. So you are strongly encouraged to include the WIDTH and HEIGHT attributes with your IMG tag. The ideal situation is to have the WIDTH and HEIGHT sizes the same as the original image. That is, the WIDTH and HEIGHT attributes should contain the actual image's dimensions. Using WIDTH and HEIGHT with incorrect values, or with percentage values is not recommended. Most browsers will resize the image to the indicated size, but this often gives poor results. There are programs on the web that can be downloaded that create, change, modify and work with images. These programs, such as Paint Shop Pro and LView Pro, will tell you the size of your image and allow you to change its size to suit your needs (that is, you can resize the image). If you see an image's size in a paint program or elsewhere written as 120 x 80, it means that the WIDTH is 120 pixels and the HEIGHT is 80 pixels. The first number is always the width and the second number is always the height. If there are three numbers as in 120 x 80 x 16, then the third number is the number of colors associated with the image. Problem 5: What do you think is the effect of the HSPACE attribute? | Click here to go to the answer section | You can also use the VSPACE attribute to cover vertical spacing around the image. Thus HSPACE and VSPACE indicate the number of pixels that should be left free around the image.
The ALT attribute To see the effect of the ALT attribute, SWITCH to your text editor and make changes to the last program so that it now looks like: ABOUT OUR HALL
Please call for ratesWe are wheelchair accessible.
http://www.htmltutorials.ca/lesson7.htm? (9 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
Now save the document, SWITCH back to your browser, load the document and note carefully what is printed in the space reserved for the image before it is displayed. Hopefully you will notice what was printed - if not, try again. Before an image is displayed, you often see a box or frame placed first and then the image is placed in the box or frame. The "ALT" attribute allows you to write something in the frame before the image is placed there. Although the ALT attribute is not required for the image to be displayed, you should include it to follow good coding practices. It should be used to replace the image's meaning, and not just to provide a description of the image. In general, ALT text may not contain markup tags. Why would we want to write something in the image box? 1. The ALT command is used to specify a text string to be displayed in browsers that do not support images. If the browser is a text only browser (such as Lynx), the text in the ALT command will replace the image. This then lets the person know that there is an image there and what it consists of - something the viewer will appreciate . 2. Any user has the option of turning off the graphics display. If the the graphics display is turned off, then your image will not be displayed and what is written in the frame is all that will appear in its place. This again lets the person know what the image would have been if it had been allowed to be displayed. So, when the image cannot be displayed for whatever reason, the browser will display the ALT text instead. 3. While the image is being loaded (which can sometimes take awhile), the user will know what is being loaded and can decide to wait for the image to load or go on to something else. 4. If you are interested in eventually placing your website on the internet through Search Engines such as AltaVista, InfoSeek, Yahoo, WebCrawler, etc., you are recommended to use the ALT attribute -- especially if the page you are submitting contains multiple images or image maps at the top of the page. Some search engines take into account the text written in the ALT attribute when creating your website's description, keywords, and where your website will be placed in a search result. The ALT attribute simply gives the user information about the image. If you do not want to have anything printed in the frame, then use the command: ALT="" One example where you may not want something printed is in decorative images to prevent something from being written in text only browsers. So if the image is purely decorational, use ALT="" or you could use a decorative ALT text like "*". http://www.htmltutorials.ca/lesson7.htm? (10 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
Here is a summary of all the above attributes associated with the IMG tag. You can use them in any order. ALIGN can be "TOP" "MIDDLE", or "BOTTOM". Used for aligning one line of text beside the image. BORDER used to place a border or to specify no border around the image WIDTH used to state the width of the image that is to appear HEIGHT used to state the height of the image that is to appear ALT used to place text in the space where an image is located HSPACE used to create horizontal space around the image VSPACE used to create vertical space around the image Of all these attributes, only the WIDTH, HEIGHT and ALT attributes are to be included for good coding practices. The rest of the attributes are purely optional and you use them based on your presentation needs. Also, as you might have expected, the IMG attributes and values are not case sensitive. Thus, for example, ALIGN="MIDDLE" is the same as ALIGN="middle" which is the same as align="middle".
We know that the ALIGN="MIDDLE" command places one line of text with the middle of the image. Similarly ALIGN="TOP" will align one line of text with the top of the image and ALIGN="BOTTOM" will align one line of text with the bottom of the image. Suppose you want more than one line of text to be displayed beside the image. For example, the following has four statements beside the image:
BUCHANAN VILLAGE An Adult Lifestyle Community for Seniors Operated by the Retirement Home Association ● ● ● ●
What is Buchanan Village all about? What is a "Life Lease" Retirement Community? The benefits of a Life Lease Who to contact for more information
http://www.htmltutorials.ca/lesson7.htm? (11 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
Problem 6: Now write the HTML document that gives the above "Buchanan Village" example, keeping the following points in mind: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
The image is named cross1.gif The width of the image is 60 pixels The height of the image is 85 pixels There is to be no border around the image There is to be a horizontal space of 20 pixels around the image The word "Cross" is displayed before the image is displayed Each choice beside the cross is to be a link to another page (the links do not work as they are only examples of what you can do) Make up your own suitable file names for the links The first title (BUCHANAN VILLAGE) is a level 1 heading The second title (An Adult Lifestyle Community for Seniors) is a level 2 heading The third title (Operated by the Retirement Home Association) is a level 3 heading | Click here to go to the answer section |
Our first example about the wheelchair accessibility in our hall, had the words "We are wheelchair accessible" written beside the middle of the wheelchair image and to the right of the image. These were the lines that gave us this result: ABOUT OUR HALL
Please call for ratesWe are wheelchair accessible.
Problem 7: Change whatever is necessary so that the words are written on the left side of the image and everything is aligned to the right side of the browser screen as in the following (in some low level browsers, the ALIGN="RIGHT" does not work and so everything will still be aligned to the left side of the screen):
http://www.htmltutorials.ca/lesson7.htm? (12 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
ABOUT OUR HALL
We are wheelchair accessible.
Please call for rates | top | | bottom |
IMAGES NOT APPEARING IN YOUR BROWSER? If an image is not being displayed in your browser, then the browser simply can't locate it. Here are some suggestions to try and fix the situation. 1. First make sure that the name of the image and the extension matches exactly the name and extension used in the coding. For example, if the image is named gardens.jpeg, then the coding must be: 
. If you accidentally write: 
(name does not match) or 
(extension does not match) then the browser cannot display the image because there is not an exact match. 2. Place the images into the same folder as the web page. Often if they are not in the same folder, they do not get displayed. So your best results will occur if the images are in the same folder as the web page. If you place the images in the same folder as the web page, then the format for the coding would then be simply: 
http://www.htmltutorials.ca/lesson7.htm? (13 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
as no path to the image needs to be specified. 3. If your images appear in your browser when you are working off-line, but they do not appear in your browser after you have uploaded your web page to the internet (to your host server), then make sure that you have also uploaded each image to your host server. You not only have to upload your web pages to your host server, but you also need to upload each individual image.
| top | | bottom |
ANSWERS 1. The image and the words "We are wheelchair accessible" are placed in the center instead of on the left side of the browser screen. 2. The image and the words are right justified. 3. The words "We are wheelchair accessible" is aligned with the top of the image. 4. The words "We are wheelchair accessible" is aligned with the bottom of the image. 5. HSPACE lets you determine the amount of horizontal space between the image and the text (measured in pixels). In our example, I left 10 pixels of space between the wheelchair image and the words "We are wheelchair accessible". 6. Here is one way to solve the problem: BUCHANAN VILLAGE
An Adult Lifestyle Community for Seniors
Operated by the Retirement Home Association
This problem is a little unfair as it involves something we have not discussed yet (using
http://www.htmltutorials.ca/lesson7.htm? (14 of 15)06/03/2004 09:06:10
IMAGES - PART 1 - html tutorials in web page design by J. Gilson
ALIGN="LEFT" in the IMG tag). Note that the ALIGN="MIDDLE" was not used as this would only have allowed us to write one line of text beside the image. Instead we use ALIGN="LEFT" which in effect places the image to the left side of the browser screen thus allowing several lines of text on the right side of the image. Note that to make this work, the ALIGN attribute must be part of the IMG tag. If the HSPACE attribute is not used in the above IMG tag, the bullets will be hidden behind the image in some Explorer browsers. Also, I have inserted two
tags at the end of "Who to contact for more information". I needed these tags to make sure the Horizontal Rule was placed below the image and not beside the image. However, adding two
tags will not guarantee that the Horizontal Rule will be placed below the image. Whether the HR appears in your browser beside the image or below the image is dependent on text size. For example, if the text size setting in a visitor's browser is a little smaller than normal, your browser will be able to place more text beside the image and so there may be room for the browser to also place the Horizontal Rule beside the image. If the text setting is a little bigger than normal, you will get fewer words beside the image and so the HR will end up below the table. In Explorer, if you go to the "View" menu, choose "Text Size" (if it is there) and then change the size of the text to see the effect on the positioning of the Horizontal Rule. This problem is solved when we study tables in Lesson 11 and 12. With tables, you can place the image and text in a borderless table and then place the Horizontal Rule below the table. 7. Only one line needs to be changed. The ALIGN="LEFT" becomes ALIGN="RIGHT" and the words "We are wheelchair accessible" must be placed in front of the IMG tag as in: We are wheelchair accessible.
| Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Eight |
The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2003 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to [email protected] http://www.htmltutorials.ca/lesson7.htm? (15 of 15)06/03/2004 09:06:10
IMAGES - PART 2 - html tutorials in web page design by J. Gilson
LESSON EIGHT - IMAGES - PART 2
You may read the following sections in their entirety or use these choices to go directly to a section. | Using an image as a link | | Thumb-nail images | | Placing thumbnail images on a webpage |
USING AN IMAGE AS A LINK When you want to turn something into a link, whether it be an image or whether it be a word, phrase or sentence, you need the HREF attribute which basically says "this web page is where we are linking to" when someone clicks on the image or words. Here is an example of using an image for the link. Please SWITCH to NOTEPAD or to another text editor, and type in the following HTML document: 
Click on the button to head home
After you have typed in the document, save it, and then SWITCH to your browser and load it. This is what you should see:
Click on the button to head home
http://www.htmltutorials.ca/lesson8.htm (1 of 8)06/03/2004 09:06:41
IMAGES - PART 2 - html tutorials in web page design by J. Gilson
First click on the above button to see the image link work and then click on the browser's "BACK" button to return to this spot. Note that when the mouse pointer moves anywhere over the image, it turns into a pointing hand and the target address appears on the status line at the bottom of the browser screen. Here are some questions for you to answer about this short HTML document: Problem 1: When you clicked on the button, what web page did the browser load? That is, what was the name of the web page that the browser loaded? Problem 2: What is the complete name of the image? Problem 3: What is written in the space reserved for the button before the button appears? Problem 4: What is the effect of HSPACE="10"? Problem 5: Change the above web page so that the words "Click on the button to head home" become part of the link. This way, the person has the choice of either clicking on the button or on the words. Problem 6: Why are the words "Click on the button to head home" strongly emphasized (bolded)? If you do not like to use the word "click", then you could instead use the word "choose" as in: "Choose the button to head home". | Click here to go to the answer section |
| top | | bottom |
THUMB-NAIL IMAGES If you have several images to display such as a gallery of your favorite images, pictures and clipart, it can take quite awhile for a browser to load them all - especially when the browser is running a 14.4 or 28.8 modem. Web pages will load only as fast as the server transmits and the modem accepts them. This is one on the main reasons why you might see a company or individual offer several web pages of images with only ten images to a page. If you place too many images on a page, your visitor may not be patient enough to wait until they are all loaded. Also, the larger the image, the longer it will take to load. This is where thumb-nail images can be of service. With thumb-nails, you offer a very small version of each image (each small image is called a thumb-nail). A visitor to your web page can then click on any thumb-nail to see the larger, original version. Thumb-nails allow for easier viewing of all the images, allow for smaller web pages and allow for faster loading of the pages. Using thumb-nails also allow the visitor to be in charge of what he or she wants to see. http://www.htmltutorials.ca/lesson8.htm (2 of 8)06/03/2004 09:06:41
IMAGES - PART 2 - html tutorials in web page design by J. Gilson
| top | | bottom |
PLACING THUMB-NAIL IMAGES ON A WEB PAGE There are two ways to place thumb-nail images on a web page. They are: 1. Using two images. The thumb-nail image will be the one image and the second image will be the original full size image. 2. Using one image. You offer the same image for both the thumb-nail and the original image. USING TWO IMAGES FOR EACH OF YOUR THUMB-NAILS Many thumb-nail images are set up this way. You simply have two versions of the same image. The thumb-nail image is the smaller version of the larger original full size image. Since we have two images, each image will have its own name. For example, if the image is named "cross1.gif", and the thumb-nail is named "cross1th.gif" (I use th to denote the thumb-nail), the statement is: I left out the WIDTH and HEIGHT attributes to show you that I am not doing any resizing and that we have in fact two distinct images with two distinct names ("cross1.gif" and "cross1th.gif"). Here is the way it looks in the browser. Be sure to click on the thumb-nail to see the effect (use your left button or the button you normally click with). If you do this, you should see the image displayed by itself in full size. When you are finished viewing the image, you can save it (described above in the saving images section). To return to this spot, just click on the BACK button or click the right mouse button and choose BACK from the menu that pops up. Note: When the image is displayed by itself, you can also save it by choosing FILE from the browser menu bar and then the SAVE AS ... option.
I first used LView Pro to resize the original image. The original size is 112 pixels wide and 144 pixels in height. My thumb-nail size is 39 pixels wide and 50 pixels in height (keeping the same aspect ratio). You can download LView Pro from: http://www.htmltutorials.ca/lesson8.htm (3 of 8)06/03/2004 09:06:41
IMAGES - PART 2 - html tutorials in web page design by J. Gilson
http://shareware.cnet.com/ and do a search for LView Pro. Note that the above command line: follows the same format as using any image for a link. The HREF attribute says that we are linking to the image "cross1.gif" (that is, "cross1.gif" is where we are going to). The SRC (source) is the thumbnail "cross1th.gif". Thus when "cross1th.gif" is clicked on, "cross1.gif" will be loaded into the browser. In this lesson's first section titled, "Using an image as a link", I gave the following example that made the "back button" a link to my home page: Note that the HREF points to my home page where in the above example, the HREF points to another image ("cross1.gif" which is the original full size image). Finally, you are free to use any IMG attribute studied in Lesson 7 - such as the ALT attribute to write something in the thumb-nail image space. Also, most browsers will place a blue (the default color) border around the thumb-nail image to indicated that the image is active and can be clicked on (just like your browser underlines and prints link words in blue to indicate active links). After you click on the image and later return to the same page, you will see the image with a purple border (the default color) around it to indicate a visited link (just like your browser underlines and prints link words in purple to indicate visited links). If you do NOT want to see this border, use BORDER="0" to eliminate it. Here are three other thumb-nail images. I just repeated the above command line for each image. The crosses were all taken from the CHRISTIAN WEBMASTER which is now owned by Cross Daily. Pay them a visit if you like to see what else they have to offer. To see the original full size image, just click on the image with your left mouse button (or the button you normally use to click with).
http://www.htmltutorials.ca/lesson8.htm (4 of 8)06/03/2004 09:06:41
IMAGES - PART 2 - html tutorials in web page design by J. Gilson
Here are the lines that produced the above 3 thumb-nails and their original images. 
Note that this time I included the WIDTH, HEIGHT and ALT attributes in the IMG tag for good coding practices. You may be wondering why I did not include the WIDTH, HEIGHT and ALT attributes also with the image in the anchor tag (the A tag). This is because these attributes are attributes of the IMG tag and not of the A tag. That is, the A tag does not support these IMG attributes. When you want to use an image on your web page, you may first have to resize the image to suit your specific needs. I stated above that you can use LView Pro to change the size of an image. You can also use a paint program like Paint Shop Pro for Windows, Transparency for Macs, and Photoshop for Windows and Macs to resize and then save the resized image.
USING ONLY ONE IMAGE FOR EACH OF YOUR THUMB-NAILS This is often the preferred method as you are offering the same image twice with the thumb-nail image being displayed with the use of the WIDTH and HEIGHT attributes. This is a much faster and more efficient method of loading images because the larger image that will be displayed has already been loaded into the browser's cache and ready to be displayed at any time. A cache is where a browser keeps a memory of images and pages while they display them. Here is the command line that uses only one image to load both the thumb-nail and the original full size image. http://www.htmltutorials.ca/lesson8.htm (5 of 8)06/03/2004 09:06:41
IMAGES - PART 2 - html tutorials in web page design by J. Gilson
Here is this statement in action. Again you can use the same procedures as before to display the image in full size, save the image, and return BACK to this spot.
To determine the WIDTH and HEIGHT of the thumb-nail, I resized the original image in LView Pro to the thumb-nail size that I wanted and noted the dimensions (39 and 50) which I then used for the thumbnail. You may be able to determine a suitable thumb-nail size without having to use a software program like LView Pro or Paint Shop Pro. You may have noticed that the original image loaded faster than in the previous section. In the previous section, the thumb-nail is loaded first and when you click on the thumb-nail, the browser then loads the original image from the directory on the server. In this section, when the image is loaded, it is resized for the thumb-nail. So the full size image appears much quicker because you are not loading a whole new image. You are simply displaying it in normal size. Note in the command line that the same image name is used for both the HREF and the SRC values ("cross1.gif") and that the thumb-nail has been resized to a width of 39 pixels and a height of 50 pixels. Your final question: Problem 7: If you remove the BORDER="0" from the above command line which is: what do you think will happen? | Click here to go to the answer section |
A WORD OF CAUTION CONCERNING IMAGES When you use images in your web pages, ask yourself the question, "Am I using images where text would suffice?" You might want to consider varying the size and color of text instead of creating your web pages with a lot of images. I often see web pages with too many unnecessary images. Too many images can result in a busy look which makes the page hard to read. Also, many images can greatly http://www.htmltutorials.ca/lesson8.htm (6 of 8)06/03/2004 09:06:41
IMAGES - PART 2 - html tutorials in web page design by J. Gilson
increase the time it takes to load the page. This will certainly "turn off" many visitors to your website -especially those still using lower version browsers and those with slower connections to the internet. These visitors will simply stop the loading and go on to something else or they will turn off the displaying of images altogether. Evaluate each image based on its contribution ("How important is this image?") versus its cost in downloading time ("How large is this image?").
| top | | bottom |
ANSWERS 1. The browser loaded the web page named "index.htm" (my home page) as indicated in the HREF attribute (HREF="index.htm"). 2. The complete name of the image is "back.gif" as indicated in the SRC attribute (SRC="back. gif"). 3. "home" as written in the ALT attribute. Unfortunately, in some cases, the button may be too small to show the complete word "home". Note that I chose "home" to represent the "meaning" of the button. 4. There will be 10 pixels of space between the button and the words "Click on the button to head home". 5. Recall that the anchor element is a container element. Therefore, what you want for the link must be contained between the anchor tags. Thus if the words, "Click on the button to head home" are to be part of the link, they must occur before the closing anchor tag. So all you have to do is move the Click on the button to head home
And here is how it looks in your browser. Note that the link words are now underlined to indicate that you can also click on them:
Click on the button to head home
6. The words are strongly emphasized because they are contained between the H4 header tags http://www.htmltutorials.ca/lesson8.htm (7 of 8)06/03/2004 09:06:41
IMAGES - PART 2 - html tutorials in web page design by J. Gilson
( and
). Header tags always strongly emphasize text. 7. If you remove the BORDER="0", the browser will place its own border around the thumb-nail. If your image does not have a transparent background, you may not want a border. If your image has a transparent background, you may want the border. So if you do not want this border, use BORDER="0". Here is a comparison. The first thumb-nail does not have the BORDER attribute and so the browser placed its own border, while the second one has BORDER="0" to prevent the browser from placing one.
You can see from this example that if you want an image with a transparent background to be a link, a border may be a good idea to clearly define the link's active region.
| Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Nine |
The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2003 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to [email protected]
http://www.htmltutorials.ca/lesson8.htm (8 of 8)06/03/2004 09:06:41
COLOR - html tutorials in web page design by J. Gilson
LESSON NINE - COLOR
You may read the following sections in their entirety or use these choices to go directly to a section. | Understanding color | | Hexadecimal versus decimal | | Changing the background color of a web page | | Changing the color of all the text on a web page | | Changing the color of a block of text | | Using an image for the background of a web page | | Preventing the background image from scrolling (a fixed background) |
UNDERSTANDING COLOR The browser default background color for many browsers is gray with black text. As you may have noticed in all of my lessons, I changed this gray background to a white background. I like a white background with black letters. This makes for easier reading as it gives the greatest contrast. Generally when you read a book, the pages are not gray but white. Magazines make great use of color. Often you see headings emphasized in color (my headings in this lesson are in a maroon color) and advertisers use color to attract attention to their ads. If your browser supports color, you should see this lesson printed in red text with dark green links (instead of the standard blue links). If you click on one these links and then return to the same spot, the link becomes a "visited link". I changed the visited link color from the standard purple to a darker magenta. When you click and hold the mouse button on a link (don't release the mouse button), it is called an "active link". It represents the link that is currently being selected. The default color for an active link is red. In this lesson I changed it to a dark blue color. We will be discussing each of these situations later in this lesson. Keep in mind that the quality of color displayed in a browser is also dependent on the quality of the monitor being used. Thus colors in some browsers may not be as sharp as you might expect, or a color could be displayed in a slightly different shade than you might have intended. Click here if you would rather view this same lesson without the red text (standard black text). Most, if not all browsers today support coloring the entire text, a block of text, changing the background color of a web page and changing the color of the links. This lesson is for those who have browsers that http://www.htmltutorials.ca/lesson9.htm (1 of 12)06/03/2004 09:06:56
COLOR - html tutorials in web page design by J. Gilson
do support color in one form or another. Because some people may still be using browsers that do not support full color, or using monitors that do not support color (for example, a black and white monitor), or using monitors that do not have at least 16 bit color (which is the minimum you need), it is important that you do not rely totally on color for emphasizing text. Remember that you are to design your web pages also for content and not just for appearance. How a web page looks in your browser will not necessarily be how it looks in another browser. So if you want to use color for those browsers that do support them (as I often do), that's fine, but if you want to emphasize text, you must still use logical tags such as and or a header tag. This way your text will still be emphasized whether a browser supports color or not, or if a web page is being viewed in a color or in a black and white monitor. Remember also that some search engine indexers do rely on the header tags to generate an overview of your web page and they will not be able to get that overview if you use color instead. Color then should be used only as an enhancement of your presentation.
| top | | bottom |
HEXADECIMAL VERSUS DECIMAL NUMBERS To change the color of your text, background, etc., your need a six digit code preceded by a "#" sign. The code takes the form "#RRGGBB" where RR stands for the amount or intensity of RED in the color, GG for the intensity of GREEN, and BB for the intensity of BLUE. Before we continue with this discussion, take a moment now and see a table giving a good range of colors and their corresponding codes. The table is in Lesson Ten. When you are ready to return here, just click on the BACK button. Please send me to Lesson Ten to see the color table Unfortunately, the numbers needed for the color codes are not in our number system which is the Decimal System or base 10. No, the numbers needed for any color code are written as Hexadecimals or base 16. Our Decimal Number System uses the digits from 0 to 9 as in: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 There are 10 of these digits and our number system is based on these 10 numbers - hence the name "base 10". Once you go past 9, you combine digits as in 10, 11, 12, etc.
http://www.htmltutorials.ca/lesson9.htm (2 of 12)06/03/2004 09:06:56
COLOR - html tutorials in web page design by J. Gilson
The Hexadecimal Number System uses 16 different digits before digits are combined (hence the name "base 16"). These 16 digits are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F Once you go past "F", you combine the digits as in 10, 11, 12, etc. Here is the direct comparison between the two systems: DEC: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 HEX: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12 Note that "A" is our number 10, "B" is our number 11, "C" is our number 12, "D" is our number 13, "E" is our number 14, and "F" is our number 15. Continuing on, we have Hexadecimal 10 is our number 16, Hexadecimal 11 is our number 17, and Hexadecimal 12 is our number 18. Thus Decimal 11 = Hexadecimal B, Decimal 15 = Hexadecimal F, and Decimal 18 = Hexadecimal 12. In the decimal number system, the intensity of each of the colors RED, GREEN and BLUE in a color code ranges from 0 to 255 (= a range of 256 numbers). 0 is OFF meaning it contains no amount of the color and 255 is FULL ON meaning full intensity of the color. Since the code for each of the three colors must be given as a Hexadecimal Code, the intensity for each color ranges from 0 to FF (Hex FF = Dec 255). In addition, the amount of each color must be given as a two digit code (2+2+2=6 digit code for the color). Thus 00 is OFF meaning that Hex 00 contains no amount of that color, while Hexadecimal FF is FULL ON meaning full intensity of that color. All the numbers in between Hex 00 and Hex FF give the millions of different colors. How many choices do you have? Well, if you have 256 choices for each colour and there are three basic colors (red, green, and blue), you have 256x256x256=16 777 216 different colors! CONVERTING A DECIMAL NUMBER TO HEXADECIMAL When you look at a color chart or palette in a program such as Paint Shop Pro or LView Pro, you will see that all the colors are given as decimal numbers and not as hexadecimal numbers. For example, suppose you see a color you like and it says that the RGB index (intensities of red, green and blue) is 46, 250 and 34 respectively. Before you can use the color in your HTML document, you must convert these numbers to Hexadecimal and I have three suggestions on how to do this. 1. Use a scientific calculator that has a built in DEC-HEX converter. 2. If you are using Windows, SWITCH to the ACCESSORIES group where NOTEPAD is located and you should find a calculator. Double click on the calculator and there it is! Now, you need to change this calculator into a scientific calculator, so choose VIEW and then choose SCIENTIFIC. Now you have a scientific calculator. Note the little round buttons beside the HEX and DEC. They are called Radio Buttons. To change Decimal 46 into Hexadecimal, just http://www.htmltutorials.ca/lesson9.htm (3 of 12)06/03/2004 09:06:56
COLOR - html tutorials in web page design by J. Gilson
click in the radio button beside DEC and then type in 46 (or use the mouse and click on the numbers 4 & 6). Now click on the radio button beside HEX and immediately the display shows 2E. Therefore, Dec 46 = Hex 2E. 3. Go to a website that will convert any decimal number for you. One such place is: http://www.lne.com/rgb.html. Using one of these three methods, you should also find that Dec 250 = Hex FA and Dec 34 = Hex 22. Thus if the intensities of red, green, and blue are 46, 250 and 34 respectively, your Hex color code is "#2EFA22" Here is a problem for you to try: Problem 1: What is the Hexadecimal code if the RGB factor is Dec 99,255,128? | Click here to go to the answer section |
CONVERTING A HEXADECIMAL NUMBER TO A DECIMAL NUMBER To convert a Hexadecimal number to a decimal number, you can of course use a calculator that has this capability or you can use the computer's built-in calculator. Here is a quick and easy way to change a two digit Hexadecimal number into a decimal number. In a two digit Hexadecimal number, the first digit (or rank) has weight equal to 16 and the second digit (or rank) has weight equal to 1. For example, in the Hexadecimal number 9F, "9" is considered to be in the first rank and "F" is considered to be in the second rank. Therefore the Hexadecimal number 9F = 9x16 + 15x1 = 144 + 15 = 159. Thus Hex 9F = Dec 159. Recall that Hex F is equal to Dec 15 and that is why we have 15x1 since F is in the second rank of 9F. Using the above reasoning we have Hex FF = 15x16 + 15x1 = Dec 255. Also, Hex C4 = 12x16 + 4x1 = Dec 196. Since Hex C = Dec 12 and it is in the first rank, we have 12x16. Problem 2: What is the Decimal number if the Hexadecimal number is 7B? | Click here to go to the answer section |
| top | | bottom | http://www.htmltutorials.ca/lesson9.htm (4 of 12)06/03/2004 09:06:56
COLOR - html tutorials in web page design by J. Gilson
CHANGING THE BACKGROUND COLOR OF A WEB PAGE To change the background color of your web page, you need two things: ● ●
the command to change the color and the color code (Hex code)
This is the command to change the background colour: BGCOLOR stands for BackGround COLOR. Note that BGCOLOR is a BODY attribute. In other words, BGCOLOR is supported by the BODY tag as you will see in the example document given below. Also note that the # symbol is part of the code. Leaving out the # symbol is considered a poor coding practice. As stated in the above "hexadecimal versus decimal" section, RR stands for the intensity of RED in the color, GG for the intensity of GREEN, and BB for the intensity of BLUE. Here are some basic color codes: #000000 = Black #FF0000 = Red #00FF00 = Green (more like a lime color) #0000FF = Blue #FFFF00 = Red + Green = Yellow #FF00FF = Red + Blue = Magenta #00FFFF = Green + Blue = Cyan #FFFFFF = Red + Green + Blue = White Here are some additional codes: #808080 = Gray #800000 = Maroon #800080 = Purple #008000 = Darker Green #808000 = Olive #000080 = Navy #008080 = Teal #C0C0C0 = Silver
http://www.htmltutorials.ca/lesson9.htm (5 of 12)06/03/2004 09:06:56
COLOR - html tutorials in web page design by J. Gilson
Thus to get a white background, the command is: as in:
| top | | bottom |
CHANGING THE COLOR OF ALL THE TEXT ON A WEB PAGE To change the text color of the entire or full web page, you need two things: ● ●
The command to change the color and The color code (Hex code)
http://www.htmltutorials.ca/lesson9.htm (6 of 12)06/03/2004 09:06:56
COLOR - html tutorials in web page design by J. Gilson
Changing the color of all the text is done through the BODY tag. This also applies to text links. If you include the links, you can change the color up to four levels. Here are the attributes of the BODY tag to control all the levels: TEXT="#RRGGBB"
to change the color of all the text on the page (full page text color.)
LINK="#RRGGBB" color.)
to change the color of all the links on the page (from the standard blue
ALINK="#RRGGBB" to change the color of all Active links (from the standard red color). This color occurs when you click and hold down the mouse pointer over a link. ALINK stands for Active LINK. That is, ALINK represents the link that is currently being selected and this link is highlighted with the color defined in the ALINK value. VLINK="#RRGGBB" to change the color of all the links after they have been visited (from the standard purple color). VLINK stands for Visited LINK. You should keep in mind that some people are used to seeing blue links and purple visited links. When they see blue underlined text, they automatically associate this with a link. Changing these colors could cause some confusion. So do use these color attributes with care - that is, don't over do it. Problem 4: Give the BODY command line that gives a WHITE background, RED text, GREEN (lime) links, BLUE active links, and MAGENTA visited links. | Click here to go to the answer section | Color attributes affect the appearance of the web page and it is possible for a viewer to disable BODY colors. Therefore, if you set one of the BODY color attributes (such as TEXT), it is recommended that you set them all. If you don't, your specified color could conflict with a user's default. This could result in unreadable text. So if you want control of the colors, set all the attributes. Also, do not set the unvisited and visited links to the same color. It will confuse your viewers. Finally, you should be aware that some colors do make text difficult to read if viewed on a black and white monitor (although most people today are using color monitors). One way to find this out is to test your web pages on a black and white monitor. | top | | bottom |
CHANGING THE COLOR OF A BLOCK OF TEXT http://www.htmltutorials.ca/lesson9.htm (7 of 12)06/03/2004 09:06:56
COLOR - html tutorials in web page design by J. Gilson
While all browsers support changing the color of the entire text (full page text color) on a web page, there may still a few low level browsers that do not support changing portions of text to a different color, or surfers using a monitor that is not a color monitor. Therefore do not rely totally on color to emphasize text. So use color if you want, but still use logical tags such as , , header tags, etc. to emphasize text. To change the color of only a portion of text (a block of text), use the formula: text text text where RRGGBB represents the Hex code of your desired colour. FONT is a container element and so anything between the opening and closing FONT tags will be changed to the specified color. The closing tag, , restores the previous text color. Problem 5: Write the command line that produces the following line in your browser with the words "Netscape and Internet Explorer" in blue: Among the most popular browsers are Netscape and Internet Explorer. Both can be downloaded from the internet. | Click here to go to the answer section |
None of the browsers which support the FONT tag, allow their users to disable it. Yet it is possible for a user to disable BODY colors. This means that if you use FONT COLOR to change font colors and the viewer has overridden your BODY colors, the text may wind up invisible. One final suggestion: If you plan to use the FONT tag with a HEADER tag, you should place the FONT tag in front of the HEADER tag and not the other way around. For some reason, a number of browsers that do not support the FONT tag for color, won't support the HEADER tag either if the HEADER tag is not placed right before the heading. In other words, the HEADER tag will work in: heading
but will not work in: heading
http://www.htmltutorials.ca/lesson9.htm (8 of 12)06/03/2004 09:06:56
COLOR - html tutorials in web page design by J. Gilson
| top | | bottom |
USING AN IMAGE FOR THE BACKGROUND OF A WEB PAGE (wallpapering a background) Do you want to see this lesson with a blue stucco background? If you do, just click here and then if you want, you can continue the lesson with the stucco background or click the BACK button to return here. When an image is used for the background of a web page (that is, when you see the background of a web page wallpapered), it is actually one small .gif or .jpeg (or .jpg) image repeated over and over again. Here is the actual full size image I used for the blue stucco background:
This little image named blue_stc.jpg was repeated over and over to make up the blue stucco background. If you look closely at a web page with an image for the background you will often see the repeated patterns. In my blue stucco background you will likely not see the repeated patterns (that is, the repeated blue stucco image) because the nature of this stucco background creates a seamless pattern. You can compare placing an image for the background of a web page to wallpapering a wall in your home. By the time the wall is covered with wallpaper, it looks like one large sheet of wallpaper, but in fact is made up of several narrow sections of paper, in which the seams are place together in such a way that the patterns match. Although the background wallpaper is made up of several smaller .gif or .jpeg images, it is loaded as one file and is a BODY attribute. If you want to save the wallpaper (and your browser lets you), just do it in the same way you save any image. For example, if you go back to my lesson with the blue stucco background, just click anywhere on the stucco wallpaper with the right mouse button and then choose SAVE AS... You can then save it to any folder, even changing the name if you want to. The command to bring in a background image is: where "image.jpg" represents the name of the image. Note two points with this BACKGROUND attribute: http://www.htmltutorials.ca/lesson9.htm (9 of 12)06/03/2004 09:06:56
COLOR - html tutorials in web page design by J. Gilson
1. This BACKGROUND attribute overrides the BGCOLOR attribute simply because the image goes over top of the background color. 2. If the background image cannot be displayed by the browser, the color specified in BGCOLOR will be used. If you do not specify a BGCOLOR, the browser's default background color will be used. Here is an example of a BODY tag that changes all the text to red, the links to a darker green, the active link to blue, the visited link to a darker magenta, with a stucco background (which is the one I used). You can have these attributes in any order and you do not have to use all of them. However, as we learned earlier in this lesson, if you set one attribute, you should set them all to avoid possible conflicts with a viewer's default values. Note that an image for a background will result in your web page taking longer to load than a web page with no image for a background. That is because it is an image and images take longer to load. I have seen some very large images for backgrounds that result in web pages taking far too long to load. This can turn off visitors who may leave your website before the page is finished loading. You can also control the background color while the web page is loading the background image. For example, if you do not want that gray background while the background image loads, you could change it to a white (or some other color) background. As soon as the background image appears, it will wipe over the white background. For example, the following BODY tag is the same as the above one except that the background color will be white while the stucco background loads (the same as my stucco example you visited). Try different colors and you will get different effects. You are encouraged to include the BGCOLOR attribute along with the BACKGROUND attribute because if the background wallpaper image cannot be displayed by the browser, the color specified in BGCOLOR will be used. You can create your own image backgrounds or you can take them off the net. There are several places where you can find background images that are free to take. Just go to your favorite search engine and do a search for "free background images".
| top | | bottom | http://www.htmltutorials.ca/lesson9.htm (10 of 12)06/03/2004 09:06:56
COLOR - html tutorials in web page design by J. Gilson
A FIXED BACKGROUND IMAGE Every once in a while I get an email asking me for the coding to prevent the background image from scrolling with the text. In other words, they would like to see the background image in a fixed position with the text and images scrolling over top of it. Well, to prevent the background image from scrolling (and thus also preventing the image from repeating itself over and over again), you use the BGPROPERTIES attribute as in: Note: The BGPROPERTIES attribute will only work in Explorer browsers as BGPROPERTIES is an Explorer attribute. In other words, Netscape does not support the BGPROPERTIES attribute and so will ignore the attribute and scroll the image with the text. Therefore it is a good idea to also see what your web page will look like in Netscape or what it will look like without the BGPROPERTIES attribute. Unfortunately there is no similar attribute that can be used for Netscape browsers.
| top | | bottom |
ANSWERS 1. 2. 3. 4.
Dec 99 = Hex 63; Dec 255 = Hex FF; Dec 128 = Hex 80, so the code would be "#63FF80". Hex 7B = 7x16 + 11x1 = 112 + 11 = 123 You can use these BODY attributes in any order. 5. Among the most popular browsers are Netscape and Internet Explorer. Both of them can be downloaded from the Internet.
| Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Ten |
http://www.htmltutorials.ca/lesson9.htm (11 of 12)06/03/2004 09:06:56
COLOR - html tutorials in web page design by J. Gilson
The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2003 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to [email protected]
http://www.htmltutorials.ca/lesson9.htm (12 of 12)06/03/2004 09:06:56
COLOR TABLE - html tutorials in web page design by J. Gilson
LESSON TEN - RGB COLOR TABLE
You may read the following sections in their entirety or use these choices to go directly to a section. | About the color table | | Color table |
ABOUT THE COLOR TABLE In Lesson Nine we learned that color codes must be given as hexadecimal numbers in the form "#RRGGBB" where RR represents the intensity of red, GG the intensity of green and BB the intensity of blue. Each intensity is a hexadecimal number from Hex 00 to Hex FF (= Dec 00 to Dec 255 = 256 intensities for each color). When using color codes in your HTML documents, you must have the # symbol in front of the color code and the whole code must be enclosed within quotation marks. Below is a table giving various colors and their corresponding codes. Since there are over 16 million color codes, this table shows a cross sampling through all the codes. The table gives color intensities as multiples of Hex 33 (= Dec 51). These multiples are HEX 00, 33, 66, 99, CC, and FF or 6 intensities of each color. Thus we have 6 x 6 x 6 = 216 color codes in the table. You can use values other than those in the table and I did just that with the last two rows using the color code "#800000" along with a few variations and other color codes. So you can use any legal code you like. However, most browsers cannot distinguish all these millions of color shades. For example, there are many codes that are so close to red that the browser will simply round off to the red color code in the table. So if you give it a code whose shade the browser cannot distinguish, it will "round off" to the nearest color in the table or one that it can distinguish. If you do not see any colors in the table given below, then your browser is not able to handle colors in this way. You can do one of two things: 1. Get a higher version of your browser. You can download the latest version of either Netscape Communicator or Internet Explorer by clicking on the appropriate button.
2. Or if you click here, you will see all the codes and their colors in an image table.
http://www.htmltutorials.ca/lesson10.htm (1 of 4)06/03/2004 09:07:20
COLOR TABLE - html tutorials in web page design by J. Gilson
You use these color codes to change the background color, the full page text color, blocks of text, links, active links and visited links. All of these except for changing blocks or portions of text, are done as BODY attributes. For example, gives a WHITE background, RED text, GREEN (lime) links, BLUE activated links, and MAGENTA visited links. See Lesson Nine if you need to review the meanings of these attributes. Note that the "0" in the codes is the number "0" and not the letter "O". To change only a block of text, use the FONT tag with the COLOR attribute as in: text text text where #CC99FF represents the color code. The closing FONT tag, (), restores the previous text color.
| top | | bottom |
COLOR TABLE 000000
000033
000066
000099
0000CC
0000FF
330000
330033
330066
330099
3300CC
3300FF
003300
003333
003366
003399
0033CC
0033FF
333300
333333
333366
333399
3333CC
3333FF
006600
006633
006666
006699
0066CC
0066FF
336600
336633
336666
336699
3366CC
3366FF
009900
009933
009966
009999
0099CC
0099FF
339900
339933
339966
339999
3399CC
3399FF
http://www.htmltutorials.ca/lesson10.htm (2 of 4)06/03/2004 09:07:20
COLOR TABLE - html tutorials in web page design by J. Gilson
00CC00
00CC33
00CC66
00CC99
00CCCC
00CCFF
33CC00
33CC33
33CC66
33CC99
33CCCC
33CCFF
00FF00
00FF33
00FF66
00FF99
00FFCC
00FFFF
33FF00
33FF33
33FF66
33FF99
33FFCC
33FFFF
660000
660033
660066
660099
6600CC
6600FF
990000
990033
990066
990099
9900CC
9900FF
663300
663333
663366
663399
6633CC
6633FF
993300
993333
993366
993399
9933CC
9933FF
666600
666633
666666
666699
6666CC
6666FF
996600
996633
996666
996699
9966CC
9966FF
669900
669933
669966
669999
6699CC
6699FF
999900
999933
999966
999999
9999CC
9999FF
66CC00
66CC33
66CC66
66CC99
66CCCC
66CCFF
99CC00
99CC33
99CC66
99CC99
99CCCC
99CCFF
66FF00
66FF33
66FF66
66FF99
66FFCC
66FFFF
99FF00
99FF33
99FF66
99FF99
99FFCC
99FFFF
CC0000
CC0033
CC0066
CC0099
CC00CC
CC00FF
FF0000
FF0033
FF0066
FF0099
FF00CC
FF00FF
CC3300
CC3333
CC3366
CC3399
CC33CC
CC33FF
http://www.htmltutorials.ca/lesson10.htm (3 of 4)06/03/2004 09:07:20
COLOR TABLE - html tutorials in web page design by J. Gilson
FF3300
FF3333
FF3366
FF3399
FF33CC
FF33FF
CC6600
CC6633
CC6666
CC6699
CC66CC
CC66FF
FF6600
FF6633
FF6666
FF6699
FF66CC
FF66FF
CC9900
CC9933
CC9966
CC9999
CC99CC
CC99FF
FF9900
FF9933
FF9966
FF9999
FF99CC
FF99FF
CCCC00
CCCC33
CCCC66
CCCC99
CCCCCC
CCCCFF
FFCC00
FFCC33
FFCC66
FFCC99
FFCCCC
FFCCFF
CCFF00
CCFF33
CCFF66
CCFF99
CCFFCC
CCFFFF
FFFF00
FFFF33
FFFF66
FFFF99
FFFFCC
FFFFFF
800000
800033
800066
800099
8000CC
8000FF
800080
008000
808000
000080
008080
C0C0C0
| Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Eleven |
The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2003 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to [email protected]
http://www.htmltutorials.ca/lesson10.htm (4 of 4)06/03/2004 09:07:20
BASIC TABLES - html tutorials in web page design by J. Gilson
LESSON ELEVEN - BASIC TABLES
You may read the following sections in their entirety or use these choices to go directly to a section. | Introducing tables | | A basic table | | The BORDER attribute | | Cell spacing and cell padding | | Table headings and the WIDTH attribute | | Centering data | |
, single cell tables, cell links, cell background colors | | Images in cells |
INTRODUCING TABLES I like tables and make good use of them. My main home page uses a table to point to each lesson and in Lesson Ten, I used a table to print all the colors and their codes. Tables are great for summarizing large amounts of information and for structuring data. Tables allow viewers to find what they need quickly and easily. Tables are part of HTML 3.2 specifications and most of the popular browsers now support them. This lesson is for those of you who want to incorporate a table into a web page and we will begin with a basic table and progress from there. Lesson Twelve continues the study of tables with a look at some of the more advanced features of table design. | top | | bottom |
A BASIC TABLE Here is a basic table. Note that there is no border around the table and that there are no lines separating the data in the table. VOLUNTEER SCHEDULE 12 P. 2 P.M. M. NURSERY John Mary Marcia SECURITY Kimberly George Ken 9 A.M.
http://www.htmltutorials.ca/lesson11.htm (1 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
TICKETS
Jacob
Nancy Adam
Note that even though there are no lines to separate the items in the table and that some names are longer than others, everything still nicely lines up. I am going to build on this example and I would like you to follow along with me and also to do some of your own experimenting. So, SWITCH to NOTEPAD and type in the following HTML document that gives the above table. Once you have typed it in, SAVE the document, SWITCH back to your browser, and load the document to see the table. An explanation of the commands is given below the document.
Here is an explanation of this table. http://www.htmltutorials.ca/lesson11.htm (2 of 15)06/03/2004 09:07:35 9 A.M. 12 P.M. 2 P.M. NURSERY John Mary Marcia SECURITY Kimberly George Ken TICKETS Jacob Nancy Adam
BASIC TABLES - html tutorials in web page design by J. Gilson
1. A table must be declared with TABLE tags. Therefore denotes the beginning of a table and
denotes the end of the table. If you leave off the closing tag, your table won't work. TABLE is a container element and so everything contained between the opening and closing TABLE tags is part of the table. 2. This table begins with a CAPTION tag. The CAPTION tag is optional. It represents or describes the contents of your table. Most browsers will automatically center the caption above the table contents. A caption can be placed above or below the table. To place the caption below the table, use the attribute ALIGN="BOTTOM" as in 9 A.M. 12 P.M. but each new TD tag implies that the previous one has ended. 6. You begin each row with a tag. TR stands for Table Row. Tables are always constructed as sequences of rows. Thus tells the browser that a new row is now beginning. If you don't use the TR tag for each new row, the browser assumes the cells will keep going to the right. There is also an optional end tag ( ) to explicitly terminate a row. However, each TR implies that the previous row has ended. Again, if you have a table inside a cell, you are recommended to close all cells and rows as some browsers need them to get the nested tables to print correctly. 7. I used to center the table. The header tag, H3, has no effect on the data. I could have used any header tag and the results would have been the same. You can also
http://www.htmltutorials.ca/lesson11.htm (3 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
use ALIGN="RIGHT" to have the table aligned with the right side of the browser screen (right justified). If you remove this attribute, you will see the table aligned with the left side of the browser screen (left justified). Note that some browsers may not honor the ALIGN attribute to center a table. 8. Notice in our example, that the width of each column is not the same. This is because the width of each column is determined by the width of the largest cell in that column.
| top | | bottom |
THE BORDER ATTRIBUTE Now SWITCH to NOTEPAD and change the opening TABLE tag to: After you have saved the change, load the web page into your browser. This is what you should see: VOLUNTEER SCHEDULE
NURSERY
9 A.M.
12 P. M.
2 P.M.
John
Mary
Marcia
SECURITY Kimberly George Ken TICKETS
Jacob
Nancy
Adam
The table now has a border around the outside and each cell is separated from the other cells with borders. In some low level browsers, there will be no border around the empty cell. "Cells" are the individual rectangles in the table. The "1" in BORDER="1" is called the "value" of the BORDER attribute and here it specifies a border around the table 1 pixel wide. The quotation marks around the "1" are optional. If you want to have a wider border, then change the "1" to a bigger number. For example, change the "1" to a "10" so that we have a border of 10 pixels. Do this now to see the effect. Below is the output with a border width around the table of 10 pixels. Try different pixel widths to see if there is one you would like to use in your tables. Note: in some low level browsers, a wider border will only be placed on the right side of the table and on the bottom of the table. In other words, there will be no wide border around the top and left side of the table. VOLUNTEER SCHEDULE
http://www.htmltutorials.ca/lesson11.htm (4 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
NURSERY
9 A.M.
12 P. M.
2 P.M.
John
Mary
Marcia
SECURITY Kimberly George Ken TICKETS
Jacob
Nancy
Adam
The default value for BORDER is 1. Therefore would have a border 1 pixel wide. The HTML 3 draft did not include the values for the BORDER attribute and so browsers which use this table model might draw a border around your table for BORDER="0". Try BORDER="0" to see what happens to the table border. Note that the empty cell is different in appearance from the rest of the cells. If you want it to look like the rest of the cells, just place the space character in the cell. The invisible space character is the ampersand command " " and was studied in Lesson Five. Let's do this now. Go back to our HTML document in NOTEPAD and change the first
tag that creates the empty cell to: Save this change, load the document into your browser and note that the browser now shows the empty cell with the same appearance as a non empty cell. VOLUNTEER SCHEDULE
NURSERY
9 A.M.
12 P. M.
2 P.M.
John
Mary
Marcia
SECURITY Kimberly George Ken TICKETS
Jacob
Nancy
Adam
| top | | bottom |
CELL SPACING and CELL PADDING Change the TABLE command in our HTML document to include the CELLSPACING attribute as in (also change the border value back to "1"): http://www.htmltutorials.ca/lesson11.htm (5 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
The quotation marks around the value "5" are also optional. Now when you load this document into your browser, you should see: VOLUNTEER SCHEDULE
NURSERY
9 A.M.
12 P. M.
2 P.M.
John
Mary
Marcia
SECURITY Kimberly George Ken TICKETS
Jacob
Nancy
Adam
Note that CELLSPACING affects the amount of spacing between cells. That is, the value in the CELLSPACING attribute indicates how many pixels of white space there should be between individual cells. Try different values for different effects. If you do not include a value, the default cell spacing value is 2 pixels. Note: in some low level browsers, the borders around adjacent cells will also be separated by the same number of pixels. This means that the borders will not look continuous. Tables will look their best in all browsers if you use a CELLSPACING value of "0". Now let's add the CELLPADDING attribute and change the cellspacing attribute to "2". Change the TABLE command to: and this is what you should see: VOLUNTEER SCHEDULE 9 A.M.
12 P. M.
2 P.M.
NURSERY
John
Mary
Marcia
SECURITY
Kimberly
George
Ken
TICKETS
Jacob
Nancy
Adam
Problem 1: What do you think is the effect of adding the CELLPADDING attribute to the TABLE tag?
http://www.htmltutorials.ca/lesson11.htm (6 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
If you are unsure, just change the number 5 to a bigger number. | Click here to go to the answer section |
| top | | bottom |
TABLE HEADINGS () and the "WIDTH" ATTRIBUTE The Table Header tag is often used when the cell's contents is a heading or label. For example, in our table, The times (9 A.M., 12 P.M., 2 P.M.) are headings for the columns, while NURSERY, SECURITY, and TICKETS are headings for the rows. To indicate these items as headings, you can use the Table Header tag ( ) instead of the Table Data tag ( ). A cell that contains a heading is called a "Header Cell". To see the effect of the header tag, change our HTML document to look like the following (I also changed the BORDER to "3", the CELLSPACING TO "0" and CELLPADDING to "3" - just so you can see the different effects of these attribute values on the table):
This is what your table should now look like: VOLUNTEER SCHEDULE 9 A.M. NURSERY John 9 A.M. 12 P.M. 2 P.M. NURSERY John Mary Marcia SECURITY Kimberly http://www.htmltutorials.ca/lesson11.htm (7 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
George Ken TICKETS Jacob Nancy Adam
12 P. M. Mary
2 P.M. Marcia
SECURITY Kimberly George Ken TICKETS
Jacob
Nancy
Adam
Note the headings in the header cells are strongly emphasized (normally in bold). For this reason I removed the STRONG tags from all the row and column headings. They became redundant. Note also that each heading is centered in its cell (for example, note how the label TICKETS is centered in the cell). This will become more noticeable in the next example. If you have more than one row in a cell, the headings will also be centered vertically. Now change the TABLE tag to include the WIDTH attribute. Change the TABLE tag to: Now load the web page and this is what you should see: VOLUNTEER SCHEDULE 9 A.M.
12 P.M.
2 P.M.
NURSERY
John
Mary
Marcia
SECURITY
Kimberly
George
Ken
Jacob
Nancy
Adam
TICKETS
http://www.htmltutorials.ca/lesson11.htm (8 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
The table has been expanded to the width of the browser screen (100 per cent of the width of the screen). If this did not happen, then your browser does not recognize the WIDTH attribute in this situation. Notice again that the headings are emphasized and centered but the data in the cells are not centered. You can use any suitable percentage for the width or you can specify the width in pixels. If your browser did not accept the WIDTH attribute in the above example, try it again but specify the width in pixels this time. For example, try WIDTH="600" (no %) and see what happens. Specifying the width in pixels will give an exact width of the table which can't be changed. Specifying the width as a percent of the current screen is preferred because the table will be expanded or compressed to fit the width of the viewer's browser screen. Therefore using a percent will allow the table to be changed if the window is resized. Using pixels for the width means that if the viewer resizes the window to something smaller than the width you have specified, the view will not be able to see the entire table.
| top | | bottom |
CENTERING DATA You can control the placement of data in the individual cells by using the ALIGN attribute. For example, let's center the name John, left justify the name Mary, and right justify the name Marcia. Let's also center the entire SECURITY row (Kimberly, George and Ken) by placing the ALIGN attribute with the TR tag for this row. To do this, change the following four sequential lines of our HTML document (repeated here): John Mary Marcia to the following: John Mary Marcia Now save the web page and load it into your browser. This is what you should see. VOLUNTEER SCHEDULE
http://www.htmltutorials.ca/lesson11.htm (9 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
9 A.M. NURSERY
John
SECURITY
Kimberly
TICKETS
Jacob
12 P.M.
2 P.M.
Mary
Marcia George
Nancy
Ken Adam
Note that the name "John" was centered in the cell, "Mary" was aligned to the left side of the cell (which is the default position) and that "Marcia" was aligned to the right side of the cell. Note also that the centered the contents of the entire row. You can also control the width of any column. For example, let's change the width of the first column to 40% of the browsers screen width, the 9 A.M. column to 20% of the screen width, and the 12 P.M. column to 10%. Change the first three cells in the first row to: 9 A.M. 12 P.M. Now save these changes and load the web page into your browser. This is what you should see: VOLUNTEER SCHEDULE 9 A.M. NURSERY
John
SECURITY
Kimberly
TICKETS
Jacob
12 P.M.
2 P.M.
Mary
Marcia
George Nancy
Ken Adam
Note that the first column of headings has been expanded to 40% of the width of the browser screen. The column with the heading 9 A.M. is 20% of the width of the screen and the 12 P.M. column has been shrunk to only 10% of the screen width which may have forced the heading to be printed over two lines (each line still centered). Again, if percentages have no effect on the column spacing, try specifying the width in pixels. Problem 2: What is the width of the last column in the above table? | Click here to go to the answer section |
| top | | bottom | http://www.htmltutorials.ca/lesson11.htm (10 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
USING
, SINGLE CELL TABLES, CELLS AS LINKS, CELL BACKGROUND COLORS USING THE
TAG and SINGLE CELL TABLES If a cell becomes too long in relation to the appearance of other cells, insert the
tag. A cell can contain as many lines of information as you want. For example, here is one cell from my main home page. I removed the link as this is covered in the next section (each of my cells is a link to a lesson). LESSON SIX Creating Page Links, Link Buttons, Email Here are the lines that make up this cell. Type in this new HTML page and be sure to include the HTML, HEAD, TITLE and BODY elements.
Using a value of "1" for the TABLE attribute will give the best looking border in low level browsers. Note that a single cell table is a great way to place a box or frame around something you want to emphasize or set apart. Notice the use of LESSON SIX
Creating Page Links,
Link Buttons, E-mail
tags to force line breaks at key points in the text. USING THE CELL AS A LINK TO ANOTHER WEB PAGE There is much that you can do with data cells. One is using the cell as a link to another web page. Every cell in my home page is a link to another page. So here is a problem for you to solve: Problem 3: Change the above TD line which is: LESSON SIX
Creating Page Links,
Link Buttons, E-mail so that the entire cell becomes a link to Lesson Six. The file name (URL) for Lesson Six is "lesson6. htm".
http://www.htmltutorials.ca/lesson11.htm (11 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
| Click here to go to the answer section | ADDING A BACKGROUND COLOR TO ANY CELL This section assumes that your browser supports background colors. Problem 4: Now change your answer to Problem 3 to include a light yellow background. Use "#FFFFCC" for the color code (taken from the color table in Lesson Ten). Here is the cell with the light yellow background: LESSON SIX Creating Page Links, Link Buttons, Email | Click here to go to the answer section | Let's now try another problem: Problem 5: The following table has a light yellow background in each heading cell and in the empty cell. Change what is necessary in the "VOLUNTEER SCHEDULE" HTML document to make the table look like the following: (set the border to 3 pixels, cell spacing to 0 pixels and cell padding to 3 pixels. Also use the same yellow color code as in the previous example.) VOLUNTEER SCHEDULE 9 A.M.
12 P.M.
2 P.M.
NURSERY
John
Mary
Marcia
SECURITY
Kimberly
George
Ken
TICKETS
Jacob
Nancy
Adam
| Click here to go to the answer section |
| top | | bottom |
PLACING AN IMAGE IN A CELL http://www.htmltutorials.ca/lesson11.htm (12 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
To place an image in a cell, you follow the same rules as for placing an image on a web page. The following example places a border 10 pixels wide around an image which is placed in a single cell table and also makes the image a link to my home page.
The BODY of the HTML document that gives this example is:
Experiment with different attribute values. Add some cell padding and cell spacing. Place a border around the image as well as a border around the table, or experiment with the ALIGN attribute as in ALIGN="RIGHT" and ALIGN="LEFT" or remove the ALIGN attribute altogether. You can learn a lot from experimenting. For example, if you do not want the image to be a link, just remove the anchor tags and the HREF attribute as in: If you use images in a table, be sure to specify the WIDTH and HEIGHT attributes in the IMG tag. This allows the browser to lay out the table in advance, so it can draw the table and place the text above and below the table before the image is loaded. Not using the WIDTH and HEIGHT attributes can cause unnecessary delays in displaying your web page.
| top | | bottom |
http://www.htmltutorials.ca/lesson11.htm (13 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
ANSWERS 1. CELLPADDING indicates how many pixels of space there should be between a cell's contents and the edges of the cell. Again, the quotation marks around the value are optional. 2. Since the percents of the first three columns add to 70 (40+20+10), the width of the last column must be 100% - 70% = 30%. 3. To turn a cell into a link, you need the anchor container element (A) and the HREF attribute pointing to the name and location where the cell is to link to. If the entire cell is to be the link, the closing anchor tag () must be placed at the end of the cell's contents. Since we want to load Lesson Six, it is assumed to be in the current directory. The TD line that answers the problem is: LESSON SIX
Creating Page Links,
Link Buttons, E-mail If you want to link to a website anywhere on the WWW, be sure the HREF attribute contains the complete address (URL) of the website. 4. BGCOLOR changes the background color. Up until now, we have assumed that the BGCOLOR attribute belongs only to the BODY tag. Think of each cell as being a separate entity - almost like a separate page. Thus you have a lot of control over what goes into any cell. In this example, the BGCOLOR is a TD attribute. Here is the line that will give the desired light yellow background color: LESSON SIX
Creating Page Links,
Link Buttons, E-mail 5. To change the color for the entire first row in the table - including the empty cell, add the BGCOLOR attribute to the TR tag. Using BGCOLOR with TR changes the background color of the entire row. To change the background color of individual cells, you need to specify the BGCOLOR attribute in each of those cells. So here is the body of the HTML document for this table:
In the color table in Lesson Ten I basically alternated one row of cells containing the codes with one row of cells containing the colors of those codes using the BGCOLOR attribute. 9 A.M. 12 P.M. 2 P.M. NURSERY http://www.htmltutorials.ca/lesson11.htm (14 of 15)06/03/2004 09:07:35
BASIC TABLES - html tutorials in web page design by J. Gilson
John Mary Marcia SECURITY Kimberly George Ken TICKETS Jacob Nancy Adam
| Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Twelve |
The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2003 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to [email protected]
http://www.htmltutorials.ca/lesson11.htm (15 of 15)06/03/2004 09:07:35
ADVANCED TABLES - html tutorials in web page design by J. Gilson
LESSON TWELVE - ADVANCED TABLES
You may read the following sections in their entirety or use these choices to go directly to a section. | Spanning columns and rows | | Printing a calendar | | A vertical side-line | | Tables in browsers that do not support them |
SPANNING COLUMNS AND ROWS COLSPAN This lesson assumes that you understand the basic tables presented in Lesson Eleven and are now ready to take a look at some more advanced table features. You may have noticed in the table on my main home page that I did not use the CAPTION tag. Instead, I placed the instructions for the table in the first row which spanned across all the columns. For example, here is a simplified version of the table on my home page. I grouped the first four lessons together and used a value of "3" for each of the BORDER, CELLSPACING and CELLPADDING attributes.
CHOOSE ANY LESSON
LESSON ONE Introducing HTML
LESSON TWO Getting started
LESSON THREE
,
and other basic tags
LESSON FOUR Emphasizing text and Heading tag
Here are the lines that generated this part of the table (I double spaced the command lines for easier viewing):
The line that generated the first row that spanned across all four columns is: http://www.htmltutorials.ca/lesson12.htm (1 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
CHOOSE ANY LESSON LESSON ONE
Introducing HTML LESSON TWO
Getting started LESSON THREE
,
and other basic tags LESSON FOUR
Emphasizing text
and Heading tag
Note the following points: 1. To span across any number of columns, use the COLSPAN attribute and state how many columns the row is to span across. Thus in our example, COLSPAN="4"(the quote marks are optional) tells the browser to span the first row across four columns. 2. The second row begins with LESSON ONE and note the
CHOOSE ANY LESSON tag to signify the beginning of this row. Recall that stands for Table Row. Each new row must be designated with a tag. 3. Note that each cell in row 2 is a link to another page. That is, each cell is contained between the anchor tags and , and each HREF points to another file. 4. Note also the use of the
tag to end lines at certain points in each cell. This is needed to prevent the cell from becoming too wide. 5. The topics in the Lesson Three cell includes the
,
tags. When you place the "<" and ">" angle brackets around a word, the browser will treat the word as a tag and won't print the word. So if I want to have
treated by the browser as text and not as a tag, I use ampersand commands to print the "<" and ">" symbols. The ampersand command for "<" is <. The lt stands for "less than" The letters lt must be written in lower case as shown. The ampersand command for ">" is > (greater than). The ampersand command was introduced in Lesson Five and so if you need more information on this command, please visit Lesson Five. 6. I placed an ALIGN="CENTER" in each cell to center the contents of the cell. As discussed in Lesson Eleven, I could have used only one ALIGN="CENTER" for the entire row if it is placed http://www.htmltutorials.ca/lesson12.htm (2 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
with the TR tag as in: The following example shows two column spans. The first column span is the title which spans across all three columns. The second column span is in the second row and is the cell "Starting Speed in Feet per Minute" and it spans across the second and third columns. METALS AND THEIR REASONABLE CUTTING SPEEDS MATERIAL
Starting Speed in Feet per Minute High-Speed Steel
Carbide
Stainless Steel
50
150
Cast Iron
74
225
Brass
300
800
Copper
300
1000
Here are the lines that make this table. You any wish to SWITCH to NOTEPAD and type it in, then save and load it into your browser to see if everything comes out the same. We will be making a change to this table in the next section.
Now for a discussion: 1. Note that I used METALS AND THEIR REASONABLE CUTTING SPEEDS MATERIAL Starting Speed
in Feet per Minute http://www.htmltutorials.ca/lesson12.htm (3 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
High-Speed
Steel Carbide Stainless Steel 50 150 Cast Iron 74 225 Brass 300 800 Copper 300 1000 instead of for the cells that contain the headings. TH (Table Header) both centers and emphasizes the headings. 2. Since "Starting Speed in Feet per Minute" spans across two columns, it is considered to take the place of the cells in row 2, columns 2 and 3. 3. Note that each indicates the beginning of a new row in the table. 4. The first cell in row 3 is blank and to make it take on the appearance of the other cells, I placed the space character ( ) in the cell. 5. Each number was centered in its cell with the ALIGN="CENTER" attribute. ROWSPAN Let's take the last example, and have the heading MATERIAL fill the first two rows in the first column so that the empty cell is eliminated. In other words, let's change the table to look like:
METALS AND THEIR REASONABLE CUTTING SPEEDS
http://www.htmltutorials.ca/lesson12.htm (4 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
MATERIAL
Starting Speed in Feet per Minute High-Speed Steel
Carbide
Stainless Steel
50
150
Cast Iron
74
225
Brass
300
800
Copper
300
1000
There are really only two changes that have to be made to have "MATERIAL" span two rows: 1. remove the empty cell and 2. add the ROWSPAN="2" to the tag for the "MATERIAL" cell. Here are the first few rows in the BODY of the document. I also added
's in the first row of the table to force an empty line above and below the title of the table. In most browsers, the
tag this way will not work either. But it will look good in those browsers that do accept the
to force blank or empty lines.
METALS AND THEIR REASONABLE CUTTING SPEEDS
MATERIAL Starting Speed
in Feet per Minute High-Speed
Steel Carbide Note that "MATERIAL" spans row 2, column 1 and row 3, column 1. These two cells are now considered occupied. Thus the first for row 3 (High Speed Steel) is considered to be in the second column. Therefore "High-Speed Steel" in the third row was printed in the second column as the first column was occupied. So if a cell spans more than one row or column, just ignore the cell and move to the next available cell in the row. Now it's your turn to make up a table. There is nothing like learning by doing. Problem 1: Make up the HTML document that will give the following table: http://www.htmltutorials.ca/lesson12.htm (5 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
DRILL SPEEDS
DIAMETER MATERIALS IN INCHES 1. Brass
2.5
2. Cast iron
4.5
3. Copper
Feet
RPM
Metres
350
560 69
1
4. Stainless Steel
CUTTING SPEED
300
201 1200
3.625
46
167
| Click here to go to the answer section |
| top | | bottom |
PRINTING A CALENDAR A calendar is nothing more than a table with a lot of rows and columns. Problem 2: Write the HTML document that gives the following calendar. Use the value "3" for each of the attributes BORDER, CELLSPACING and CELLPADDING. JULY Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
http://www.htmltutorials.ca/lesson12.htm (6 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
| Click here to go to the answer section |
| top | | bottom |
A SIDE-LINE If you would like to see your web page or part of your web page separated into two sections by a vertical line (a side-line), you could set up it up as a one row, two column table. You could choose a table WIDTH of 100% and a table HEIGHT of any number of pixels that you desire. The width of the table can also be expressed in pixels. If your browser supports full color, the left side is colored yellow. Here is an example:
This side is colored yellow
This side just shows plain text.
Feel free to place anything on this side.
You can color it too if you want. This side is 70% of the width of the screen.
This cell is 30% of the browser screen width.
Both sides are 600 pixels long. But you can change it to anything you want.
Note that the HEIGHT is in pixels (600) and not as a percent. VALIGN="TOP" (Verticle ALIGN) aligns the text with the top of the cell.
Here is the BODY of the HTML document that gives this table. A brief explanation is given to the left.
This side is colored yellow This side just shows plain text.
http://www.htmltutorials.ca/lesson12.htm (7 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
Now if you do not want a border, just remove the TABLE attributes BORDER and CELLSPACING so the TABLE tag becomes: Here is what you should see:
This side is colored yellow
This side just shows plain text.
Feel free to place anything on this side.
You can color it too if you want. This side is 70% of the width of the screen.
This cell is 30% of the browser screen width.
Both sides are 600 pixels long. But you can change it to anything you want.
Note that the HEIGHT is in pixels (600) and not as a percent. VALIGN="TOP" (Verticle ALIGN) aligns the text with the top of the cell.
Here is the BODY of the HTML document that gives this table. A brief explanation is given to the left.
This side is colored yellow This side just shows plain text.
http://www.htmltutorials.ca/lesson12.htm (8 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
Here is another example of a side-line dividing the screen into two two columns. I have removed the yellow background color but you could experiment by leaving it in to see the effect. An explanation and the BODY of this HTML document is given below the table.
This is the right side of the table. I could have placed the vertical line (the image) in this cell by aligning it to the left side of the cell. This line is 600 pixels in height (the same length as the table) and 2 pixels wide.
http://www.htmltutorials.ca/lesson12.htm (9 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
Feel free to place anything on this side.
This cell is 30% of the browser screen width. The vertical line is really an image placed in this cell and aligned to the http://www.htmltutorials.ca/lesson12.htm (10 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
right side of the cell.
As stated in the above "invisible" table, the line is only an image which I named "linevert.gif". I placed it in the first cell and aligned it to the right side of the cell. I just as easily could have placed it in the second cell and aligned it to the left side of the cell. Feel free to save this line and use it in your own web pages. As you can see below in the IMG statement, I defined the line to be 600 pixels long and 2 pixels wide. If you save this image, be sure to experiment with different lengths and widths. Here is the BODY of the HTML document that gives rise to this table.
Feel free to place anything on this side.
This is the right side of the table.
You learned in Lesson Eleven that the WIDTH can also be expressed in pixels instead of as a percent. Therefore, instead of WIDTH="30%" for the first cell, you could use, for example, WIDTH="200" representing 200 pixels. If the average screen width is 600 pixels, then 200 pixels represents one third of the width. I often see the first cell defined in pixels on other web pages. There is no need to define the width at all for the second cell as screen widths vary from browser to browser. As you learned in the last lesson, specifying a width in pixels will give an exact width which can't be changed (and you may want this to be the case). Specifying the width as a percent of the current screen will allow the table to be expanded or compressed to fit the viewer's browser screen. It would be a good learning experience to do some experimenting with the WIDTH attribute. There is one more side-line option that you will find very interesting and one that you may want to consider. To see this one, along with an explanation, just click here.
| top | | bottom |
http://www.htmltutorials.ca/lesson12.htm (11 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
TABLES IN BROWSERS THAT DO NOT SUPPORT THEM Many people today use browsers that support tables and tables are part of the HTML 3 specifications. However, some early version browsers and text only browsers do not support tables. It can be very confusing for your viewer if he or she is using a browser that does not support tables. The data will be there, but the formatting is lost. For this reason on my main home page I offer an alternate home page for viewers with browsers that do not support tables. If you do not want to have an alternate page, there are some things you can do with your table so that if a browser does not support tables, the data will still be readable. One thing you can do is to use the Paragraph tag (LESSON ELEVEN If you would like to know more about what can be done to make tables even more readable in browsers that do not support them, here is a web page that has a lengthy discussion on the topic.
BASIC TABLES
| top | | bottom |
ANSWERS Answer to Problem 1: Here is the BODY part of the HTML document. I numbered the first 13 lines so I can refer to them in the discussion given below the document. Line 1: Line 2: Line 3: Line 4: Line 5: Line 6: Line 7: Line 8: Line 9: Line 10: Line 11: Line 12: Line 13:
1. The
DRILL SPEEDS
MATERIALS DIAMETER
IN INCHES CUTTING SPEED RPM Feet Metres
http://www.htmltutorials.ca/lesson12.htm (12 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
1. Brass 2.5 350 560 2. Cast iron 4.5 69 201 3. Copper 1 300 1200 4. Stainless Steel 3.625 46 167 in line 2 indicates the beginning of the first row. 2. Note in this table that the title of the table (DRILL SPEEDS) spans across all six columns (line 3). Thus after the title, we begin a new row as indicated by the in line 4. 3. We are now in the second row of the table which is a row of headings. The first three cells in this second row span 2 rows each (lines 5, 6, 7). Therefore, row 2, column 1; row 3, column 1; row 2 column 2, row 3 column 2; and row 2 column 3, row 3, column 3 are all occupied. 4. "CUTTING SPEED" is still considered to be in row 2 but it spans 2 columns instead of 2 rows (line 8). 5. The heading RPM is also still in row 2 and it also spans 2 rows (line 9). 6. After the RPM cell is set up, we need to begin a new row (row 3) as indicated by the in line 10. 7. Note that the headings "Feet" and Metres" are considered to be in row 3, columns 4 and 5 respectively. Since row 3, columns 1 to 3 are occupied, a will automatically place "Feet" http://www.htmltutorials.ca/lesson12.htm (13 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
in column 4 (line 11) and "Metres" in column 5 (line 12). They are the only cells left to fill in row 3. Once that is done we begin row 4 (line 13). From row 4 and on, there are no more row and column spans. Some of the cells are empty and as before I placed the space character in them.
Answer to Problem 2: The first row in the table contains the month "JULY" and this row spans all 7 columns. The blank cell in row 3 spans 2 columns (under "Sun" and "Mon") and to make it take on the appearance of the other cells, I printed the space character ( ) in it. Feel free to experiment with different designs of calendars. Here is the BODY of the HTML document that gives this calendar:
JULY Sun Mon Tue Wed Thu Fri Sat 1 2 3 4 5 6 7 8 9 10 11 12 13 14 http://www.htmltutorials.ca/lesson12.htm (14 of 15)06/03/2004 09:07:50
ADVANCED TABLES - html tutorials in web page design by J. Gilson
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Thirteen |
The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2003 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to [email protected]
http://www.htmltutorials.ca/lesson12.htm (15 of 15)06/03/2004 09:07:50
FRAMES - html tutorials in web page design by J. Gilson
You may read the following sections in their entirety or use these choices to go directly to a section. | Introducing frames and frames in rows | | Leaving the frames page | | Frames in columns | | Row and column frames mixed together | | Sending information from one frame to another | | FRAMESET and FRAME attributes |
INTRODUCING FRAMES and FRAMES IN ROWS This page has two frames. They are: (1) the top frame with only "LESSON THIRTEEN - FRAMES" written in it; and (2) the larger frame that you are reading in now. Since most browsers do not support fancy fonts, the title "LESSON THIRTEEN - FRAMES" in the top frame is a simple .gif image created using Paint Shop Pro and choosing one of its fonts. Frames will be easier to understand if you understand how HTML TABLES work. I will assume that you have read or know the material in Lessons 11 and 12 on tables. On this browser screen, the frames are set up like a table with two rows as in: frame 1 frame 2 With frames you are not writing web pages in the traditional sense. What you are in fact doing is creating a template where more that one web page can sit. Frame commands allow you to display more than one web page at the same time on the browser screen. In other words, each frame contains its own web page. In addition, you also need a separate document that creates the frames. So for you to view this screen, I had to make up three pages: (1) the HTML document that creates the frames (that is, the document that creates the template for the frames) http://www.htmltutorials.ca/lesson13.htm (1 of 11)06/03/2004 09:08:06
FRAMES - html tutorials in web page design by J. Gilson
(2) the document that goes into the top frame (I named it "frame1.htm") (3) the document that goes into the lower frame (I named it "frame2.htm") Here is the complete HTML document that created these two frames: