LESSON TWO - GETTING STARTED

You may read the following sections in their entirety or use these choices to go directly to a section. | What do I need to get started? | Placing the NotePad icon on your desktop | | Naming your web page (your HTML document) | | Saving your web page (your HTML document) | | Server requirements for naming home pages | | Loading your web page into your browser | | Getting your web page on the internet | | Getting a counter for your web page |

WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE?

YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or directory to hold only your HTML files (also called documents) for the web pages you are designing. Work in that folder only. If you are doing all these lessons, you may also wish to set up a separate folder to hold all my examples for testing in your browser. The best way to learn is by doing so when I give you an example or a problem for you to work on, be sure to try it out to see what it would look like on the web through your browser. You can then alter the example to experiment with different effects. In any event, you need some place to put your work. If you do not know how to create a folder, be sure to call someone who does know and can tell you how to do it. YOU DO NOT NEED TO BE CONNECTED TO THE INTERNET You can write and design your HTML pages (that is, your web pages) off-line. If all you are doing is designing and creating web pages, you do not need to go on the internet. If you have a regular telephone dial up connection, and there is only one telephone line in your house, there is no need to tie up the line. YOU NEED A BROWSER Internet Explorer and Firefox are among today's most popular browsers for viewing web pages and for surfing the internet. Netscape Navigator (also called Netscape Communicator) is still being used by many surfers but, as stated in Lesson One, it is no longer supported by AOL. That is, there will be no more browser updates, updates on security patches, etc. There are other browsers also but they are not nearly as popular as Explorer and Firefox. In addition, today, web pages are being viewed in browsers through cell/mobile phones, cars, televisions, plus a host of hand-held wireless devices and communicators. YOU NEED A WORD PROCESSOR

You need a simple word processor such as NotePad or WordPad. These simple word processors are also called text editors and are ideal for creating web pages. Now you can also use word processors such as WordPerfect or Microsoft Word or Works but they are not simple text editors. They include a lot of formatting which we do not want. For these and other reasons, many webmasters like using NotePad which can be found in the Accessories folder (also known as the Accessories "Group"). In Windows, for example, NotePad is found by clicking on "Start", then choosing "Programs" (or All Programs), then choosing "Accessories" and finally choosing NotePad. That is: Start --> Programs --> Accessories --> NotePad As we will see later in this lesson, there are good reasons for using a text editor such as NotePad for creating web pages. Sometimes the coding for a web page can become so big that it will no longer fit into NotePad. In this case, you will need to switch to another text editor to complete the page. When you are faced with this situation, WordPad is the answer. It allows for much larger files and is also located in the Accessories folder. You may wish to try WordPad sometime. It has a few more features than NotePad and so you may prefer to use WordPad instead of NotePad. From here on in I will be referring to NotePad as the text editor of choice. Of course if you wish, you can use any text editor or word processor. In summary, you basically: 1. create your web page in a text editor such as NotePad (typing in all the text and tags) 2. save your web page as an HTML file using any appropriate name 3. load the HTML file into the browser to see how your web page looks and works 4. switch back to NotePad to make any corrections, changes, etc.

YOU NEED TO HAVE BOTH YOUR BROWSER AND NOTEPAD ACTIVELY RUNNING
To design a web page, you need to have BOTH your browser AND NotePad active at the same time. In other words, while you are working with one, the other is sitting there in the background. This way you can quickly SWITCH back and forth between them. If you do not know how to have both your browser and NotePad running at the same time, be sure to ask someone who does know.

PLACING THE NOTEPAD ICON ON YOUR DESKTOP

You can have the NotePad icon placed directly on your desktop. This way you can click on the icon and instantly load NotePad without having to locate it through the Start menu. If you do not know how to do this, here are the steps. 1. First make sure that you can see the desktop or at least part of it. When you turn on the computer, the desktop is the first thing you see after the computer finishes booting. If you have another program covering up the desktop, then minimize or close it so that you can see the desktop. 2. Choose Start --> Programs --> Accessories. You will now see NotePad in the folder list. 3. Click with your right mouse button on the name NotePad. That is, right-click on NotePad. This will bring up another menu list. 4. From this menu list, choose Create Shortcut. 5. Go back to the Accessories folder and you will now see Notepad(2) in the list, likely at the bottom of the list. This time move the cursor over the name NotePad(2). Now click and hold down the left mouse button (do not release the button). Now drag the name Notepad(2) onto the desktop. That is, drag the shortcut Notepad(2) from the Accessories list onto the desktop. 6. You now have an icon on your desktop with Notepad(2) written below it. If you double click on this icon, NotePad immediately opens up. 7. You can now rename the icon to simply NotePad or Notepad by right-clicking on the icon and from the pop-up menu, choose Rename. You can then type in the name you want. 8. The above procedure can be used to place a shortcut on the desktop for any application. | top | | bottom |

NAMING YOUR WEB PAGE

When you save your web page for the first time, you need to give it a name. You not only have to give it a name but you also need to add a suffix (an extension) to the name. THE NAME: If you are not running at least Windows 95, your file name is limited to a maximum of 8 characters. Otherwise the name can be longer. Since most people today are using at least Windows 95, this is not an issue. It is strongly recommended that you do not use spaces in the file name. Browsers will replace the space with a coding such as %20 so that the name "my web page" will look like "my%20web%20page" which is confusing and does not look good. We do not want strange symbols in our file names and so it is best to avoid spaces in the name. THE SUFFIX: The suffix is an extension to the name and declares the kind of document that it is. In HTML, the suffix is either ".htm" or ".html". "Htm" or "html" tells the browser you are working with HTML files - that is, an HTML document.

You must use ".htm" if you are not running Windows 95 or higher. Again, this is no longer an issue and so you can use either .htm or .html for the file extension. So if "homepage" is the name of the HTML document (your web page), you can have either homepage.htm OR homepage.html | top | | bottom |

SAVING YOUR WEB PAGE (YOUR HTML FILE OR DOCUMENT)

This section may be better understood when we do an actual example in the next lesson, but here is a summary on saving a web page.

IF YOU ARE USING ONLY NOTEPAD, WORDPAD or a similar text editor: o Choose File from the menu bar, then from the drop down menu, choose Save As. o In the Save As dialog window, make sure in NotePad that the Save as type box reads All Files. In the case of WordPad, it should be Text Document. o In the File name box, type in a suitable file name along with an extension (either .htm or .html). o Click on OK and the file (the web page) is saved. In the case of WordPad you may be told that saving the file will remove all formatting. That is okay because we do not want any formatting saved with the file. IF YOU ARE USING WORDPERFECT, WORD, WORKS (or any popular word processor): In lesson one, I gave an example in WordPerfect of what happens when you chose REVEAL CODES. In the lower half of the screen, you see your text all marked up with WordPerfect tags. If you need to review this, just click here on Lesson One. Well, it doesn't matter which word processor you use, it will have its own set of tags or codes which lets it know what the margins are, what is bolded, underlined, when the ENTER key has been pressed, and so on. If you save your HTML web page as a normal document file, all these little tags or codes are saved as well. In HTML, we don't want that. You must save your work as TEXT ONLY files. HTML browsers can read only text. If you don't save as TEXT ONLY, you will be saving a lot more than text. You will also be saving margin settings, bold, italics, indents, etc. When you are ready to save your HTML document or file, you must first choose SAVE AS ... from the FILE menu. Then, besides choosing a suitable file name, you must make sure to also choose TEXT ONLY, ASCII TEXT DOS, MSDOS TEXT, PLAIN TEXT, or just TEXT - your processor will have one of

these options or a similar option. You can then click on "OK" to save your HTML file. | top | | bottom |

SERVER REQUIREMENTS FOR NAMING HOME PAGES

When you design a website, generally you have a "home page" plus other pages that are linked to this home page. A home page is then your main page that contains information about you, your business or organization, plus a menu of choices for linking to your other pages or to other websites. For this section, I will use the Brant FreeNet as an example. What I say here is true for most, if not all, companies that provide internet services. One of my connections to the internet is through the Brant FreeNet, a non-profit organization. Now, anyone with Brant FreeNet who wants to set up a Home Page is strongly encouraged to name it index.htm. If you plan to have other pages connected to your home page, you can give it any name you like and with either the .htm or .html extension. But for the home page, it should be index.htm. The reason for this is that index.htm is the default name for any home page on line with the Brant FreeNet. This means that if someone is visiting one of your other pages, and would like to see your home page, all they have to do is erase the file name in the address location line, press the ENTER key, and your home page will be displayed. If you don't name your home page index.htm, the browser will not be able to locate your home page and the viewer will receive an error message. The same is true if you are visiting another web page anywhere on the World Wide Web (WWW). If you want to see a home page, just erase the name and you should be connected to the home page. For example, let's suppose one address from a web page is: http://www.bfree.on.ca/comdir/retire/buchanan/Lifelease.htm If you were to erase the file name in the address location line so that it looks like: http://www.bfree.on.ca/comdir/retire/buchanan/ you will be connected to their home page which is: http://www.bfree.on.ca/comdir/retire/buchanan/index.htm Each internet service provider or host has its own default file name for home pages. Some may state that it is to be index.htm. Others may state that it must be index.html and still others will allow it to be either index.htm or index.html. There may also be a few providers that have another name instead of index. If you do not know what you should name your home page, ask the internet company who is going to host your website. Also, the next time you are surfing the WWW, try the above method to see if you can connect to someone's home page. | top | | bottom |

LOADING YOUR WEB PAGE INTO YOUR BROWSER

Once you have saved your web page (your HTML file or document), you need to SWITCH over to your browser which is running in the background. Once you activate your browser, choose File from the menu bar, and then choose Open or Open File or Open File in Browser (one of them should be in the File menu). You will then need to locate your web page, click on the file name and then click the OK button. Your HTML file will appear in the browser. You can only observe your file in the browser - you can not edit in the browser. Once you have seen how your web page looks in the browser, you can then SWITCH back to NotePad to continue working and editing. NOTE: (1) If you want to LOAD an HTML file for the first time into NotePad, and the name does not show up in the correct folder in the dialog window, choose All Files (*.*) in the Files of type box and the name should then appear. In the case of WordPad, it must be All Documents (*.*). Click on the name and then on the Open button. (2) If you use a word processor other than NotePad or WordPad, you may first need to CLOSE the HTML file before it can be loaded into your browser. With NotePad and WordPad this is not necessary. If some of this sounds confusing, don't worry, you will get a chance to practice saving and loading in Lesson Three. Now here are some questions to answer. The answers are given at the end of this lesson. 1. What does HTML stand for? 2. Assuming that we have the proper computer platforms, which of the following are legal names for web pages? a) contents.htm b) ordering.html c) homepage.txt d) faq.htl e) ThankYou505.htm f) products-warehouse.html 3. Answer True or False: HTML web pages are always saved as text only files. 4. What web page will display if the URL is www.htmltutorials.ca? | Click here to see the answers | | top | | bottom |

GETTING YOUR WEB PAGE ON THE INTERNET

When you finish creating your website, you may wish to place it on the World Wide Web (that is, on the internet). To place your website on the internet, you need a host. That is, you need to find an internet company to host your website. You may have an internet business and willing to pay a monthly fee to have your website hosted. There are hundred of companies willing to host your website for under $10 per month with your own domain name. You will of course be required to purchase your domain name which today is relatively cheap. If you go to your favorite search engines and do a search on "web page hosting" or "web page providers" or "web hosting service", etc., there will be no shortage of search results to check out. Here is one of my web hosting sponsors that you can check out:

Get your personalized Domain for $7.95 and sign up for Free Web Hosting service with Doteasy for one year with 1 GB transfer On the other hand, you may only have a small internet business or a personal web page, and you do not want to pay any money to have your website hosted. In other words, you want a free web page hosting service. There are many internet companies willing to host your website for free. Many of these companies are good companies giving away lots of free web space - more than you will likely ever need. Some of these hosting companies also offer unlimited E-mail addresses, message boards, guestbooks, personalized domain names, counters and site stats. Some will even provide sponsors that will pay for visitors you send from your free website. Most have easy to learn instructions on how to transfer your website to the internet through their hosting service. If these companies are willing to host your website for free, then what is the catch? The catch is that you will be required to display some form of advertising - such as advertising their services to all your visitors. If you would like a free website I would suggest that you click here to visit http://www.thefreesite.com where you will find a listing of several internet companies that offer free hosting services plus a host of other free things. The actual page that lists these companies is located at http://www.thefreesite.com/Free_Web_Space/index.html. TheFreeSite.com checks out each internet company before advertising their free services on TheFreeSite.com website, and then includes a description or comment on each listing. So TheFreeSite.com is a good place to start if you are looking for something free. Checking out all these internet companies offering free web pages can be confusing so here are two suggestions on what to avoid: 1. Try to avoid a hosting company that places their advertisements in a pop-up window. What happens here is that every time a visitor displays a page from your website, a window pops up which the visitor then has to close. Many people find these pop-up windows very annoying and it tends to turn them off. These pop-up windows are also a sure sign that your web page is being hosted for free. If you

want a professional looking website then I would suggest that you avoid hosts with pop-up advertising windows. Look for a host that will require you to display a banner instead of pop-up windows. 2. Try to avoid an internet company that will place your website in a frame and their advertising in another frame. Frames are not studied until Lesson 13 but if you want to see what a frames page looks like now, just click here to see my Lesson 13. It is a frames page with the title ("Lesson 13 - Frames") in one horizontal frame that never moves, and the lesson itself in another frame with a scroll bar so that you can scroll through the lesson. The setup for a host that places your website in a frame is about the same. They will place their advertisements in a horizontal frame that never moves (either at the top of the page or at the bottom of the page) and your web page will be placed in a second frame with a scroll bar. There are a number of people do not care for frames and also many of the top search engines are not equipped to properly index web pages with frames. Thus if you intend to place your web page with the search engines, there is a good chance you will not get very good placements. TheFreeSite.com does include hosts that do not require the displaying of pop-up windows and frames. If I had to choose between (1) and (2), I would go with (2). However, you should try to find a host that avoids both (1) and (2). If you are serious about setting up a website for a business, hobby, charity or for a personal website, then consider purchasing a domain name and paying for a website host to host the website. A free is nice but often there is a catch of some kind. Some of these were discussed above. With free hosts, you are often limited in what you can do. For example, you can't have multiple email addresses, can't run scripts (such as those needed to interpret the contents of a form), can't have your own domain name (they tell you what form the domain name takes such as http://hostname/~yourname or http:www.yourname.hostname). Yes, there may be a few free hosts that have great options, but that is not the norm. The cost for a domain name is not expensive and you can find a host for under $5 per month. I would suggest that you check out webhostingsearch.com for a list of top ranked hosts that charge less than $5 per month. This website also compares these top ranked sites including reviews on each of them. So pay this site a visit for the best hosting plans and web hosts. | top | | bottom |

GETTING A COUNTER FOR YOUR WEB PAGE

You may wish to place a counter on your home page before placing your website on the internet. A counter will tell you how many visitors visit your website. That is, a counter keeps track of the number of hits to your website. A counter cannot be created with HTML. It requires a scripting language to make a counter (such as a JavaScript or a CGI Script). For this reason, almost everyone gets a free counter and free counters are plentiful. If you would like to check out some free counters for your website, click here to visit http://www.thefreesite.com where you will find a listing of several internet companies that

offer free counters. The actual page that lists these companies is located at http://www.thefreesite.com/Webmaster_Freebies/Free_counters_and_trackers/index.html. These free counters come complete with all the necessary coding to place on your website. Just cut & paste the coding that they provide and you have a counter on your website. Counters are usually placed at the bottom of a web page. There are all kinds of counters that you can choose from. You can get a simple counter that only keeps a record of hits to your website or you can get a counter that gives a lot more information. Many counters not only keep a running total of hits to your website, but they can also tell you where a visitor comes from, what their computer screen resolution is, what browser they are using, and even how long they spent browsing your site. Many counters also give you information such as hits by the hour, day, week, month and year. You can get a counter that gives data in colorful 3D graphs, or styles that you can customize by text color, background color, size, font, etc. One company offers a counter that will even tell you what keywords your visitors used to locate you. How do you access all this other information about your visitors? Well, with the counter comes your own personal access page located at the company's website that will give you all this information about your visitors. Thus the company giving you the free counter will also provide everything you need along with complete instructions. While you are visiting TheFreeSite.com, you may wish to subscribe to their free newsletter. It is a great newsletter giving you the latest in freebies. TheFreeSite.com claims to offer the web's largest collection of freebies and that their free stuff listings are the most complete on the internet. I tend to agree with them. | top | | bottom |

ANSWERS
1. HTML stands for HyperText Markup Language. 2. a) contents.htm is a legal web page name. b) ordering.html is a legal name. c) homepage.txt is not a legal name. Even though web pages are saved as text only files, the extension (or suffix) must be .htm or .html. d) faq.htl is not a legal name. The extension must be .htm or .html. e) ThankYou505.htm is a legal name as numbers are allowed in the file name. f) products-warehouse.html is a legal name as dashes (and underscores) are allowed. However, you should not start a name with a dash or underscore. 3. True 4. You are only given the domain name (htmltutorials.ca). There is no web page filename given. Therefore the default web page will be displayed which is the home page. In other words, the browser will display http://www.htmltutorials.ca/.

LESSON THREE - UNDERSTANDING THE BASIC TAGS

You may read the following sections in their entirety or use these choices to go directly to a section. | Tags | | <BR>, <P> and <HR> tags | | <HTML> and </HTML> tags | | Correct use of tags | | <HEAD>, <TITLE> and <BODY> tags |

HTML TAGS
HTML works in a very straightforward manner. You type in your text and your tags. To get large print, centered text, bold text, text in italics, indented sentences, colored text, etc., is nothing more than inserting tags around your text. These tags are more accurately called ELEMENTS and you should think of these elements as describing the meaning of the text they contain, rather than how the enclosed text should be displayed. This concept is called content-based markup, as opposed to presentational markup. We will get more into this in Lesson Four when we study web page design. Because we don't want the tags (elements) to appear in the browser, we need a way to tell the browser that something is a tag - and this is easy to do. To tell the browser that something is a tag, you simply place "less than" and "greater than" symbols around them. The LESS THAN symbol is "<" and the GREATER THAN symbol is ">". These symbols are also called "Angle Brackets". Thus we have an opening angle bracket "<" and a closing angle bracket ">" around each tag. I have also heard them called "pointed brackets". | top | | bottom |

<BR>, <P> and <HR> TAGS

<BR> <BR> tells your browser to go to the beginning of the next line. BR stands for line BReak. <BR> acts in the same way as the ENTER key on your keyboard. When you press the ENTER key, the cursor goes to the beginning of the next line. With <BR>, the browser is also told to go to the beginning of the next line. Remember that when you save an HTML document, you are saving it as TEXT ONLY which means that no codes are saved and so your browser will not know when to end a line and continue on to the next line. The <BR> tag does this for you. <P> <P> for Paragraph tells your browser to insert a blank or empty line and then begin a new line (a new paragraph). <BR> tells the browser when a line has ended while <P> tells the browser to leave a blank line and begin a new paragraph.

<HR> <HR> puts a line across the page. HR stands for Horizontal Rule. The two lines you see below were put there with <HR> tags. | top | | bottom |

<HTML> and </HTML> tags

Before we can try out the <BR>, <P>, and <HR> features, we first need to learn how to set things up properly in an HTML document (or file as it is also called). Every HTML document should first be declared that it is in fact an HTML document. When the document is completed we also need to indicate this. You do this with the tags <HTML> and </HTML>. Recall that HTML stands for HyperText Markup Language which is the language of web page design. <HTML> is the beginning tag and </HTML> is the ending tag. The forward slash before the tag (</ >) cancels the effect of the tag. This is true for all tags that affect text. Thus <HTML> tells the browser that what follows is an HTML document and </HTML> tells the browser that the HTML document is completed. You can therefore think of the <HTML> and </HTML> tags as "containers", containing the entire HTML document. Therefore HTML is called a container element. You should use the HTML element for each of your web pages. | top | | bottom |

CORRECT USE OF TAGS

We have "beginning" or "opening" tags (such as <HTML>) and we have "ending" or "closing" tags (such as </HTML>). Many elements consist of an opening tag and a closing tag. An element that has an opening and closing tag is referred to as a container element because anything contained between these tags are affected by the element. Closing Tags cannot be placed just anywhere. Use the "Last In = First Out" principle or "LIFO". That is, the "Last" tag "In" must be the "First" tag "Out". Another way of stating this is that the last tag activated must be the first tag terminated. An example of a correct sequence of tags is: <tag1><tag2> statements </tag2></tag1> In this example, <tag1> is activated first, and then <tag2>. Thus <tag2> must be terminated first with </tag2> followed by the termination of <tag1> (</tag1>). In other words, tags are closed in reverse order to the way they are opened. Thus the first tag opened must be the last tag closed. An example of an incorrect placement of tags is:

<tag1><tag2> statements </tag1></tag2> In this example, the last tag opened (<tag2>) is not the first tag closed. That is, these tags overlap. </tag2> must come before </tag1>. Therefore this example does not satisfy the LIFO principle. Container tags cannot overlap each other. If you do not place tags properly, your web page simply won't work. The following is another example of a correct use of tags: <tagA><tagC><tagB><tagD> statements </tagD></tagB></tagC></tagA> Problem 1: Is the following example a correct use of tags? The answer is given at the end of this lesson. <tag1><tag2> blah, blah, blah </tag2> <tag3> blah blah blah <tag4> blah, blah, blah </tag4></tag3> blah blah blah </tag1> | Click here to see the answer | | top | | bottom |

<HEAD>, </HEAD>, <TITLE>, </TITLE>, <BODY> and </BODY> tags

In this section we will study the HEAD, TITLE and BODY container elements and we will learn about these tags (most people still refer to "elements" as "tags") by studying the following web page (HTML document). It is good to be actively involved in each lesson, so please SWITCH to NOTEPAD, and type in the following HTML web page. After you have typed it in, you will save the document and then view it in your browser. Here is the web page. Please type: <HTML> <HEAD> <TITLE>WEB PAGE DESIGN - BASIC TAGS</TITLE> </HEAD> <BODY> Hi, my name is John Gilson.<BR>

This is my first attempt at a Web page.<HR> Here is a riddle for you. <P>Why did the lobster blush?<HR> Because it saw the salad dressing.<BR><BR><HR> </BODY> </HTML> Before we study this web page, let's save it. Here are the steps if the coding was typed into NotePad: 1. From NotePad's File menu, choose Save As. This will display the Save As dialog window. 2. In the Save As dialog window, click into the Save as type box and choose All Files. 3. In the File name box, type in the name riddle.htm. You can of course enter any suitable name and also the extension .html instead of .htm. 4. Everything else can be left as is and so click on OK. The web page is now saved. Now lets see what the web page looks like in your browser. Here are the steps: 1. Open your browser. 2. From the File menu choose Open or Open File (whatever your browser says). 3. Browse to the folder where the web page is saved. When you find the file, click on the name and then click on Open. If you get an Open window, click on OK. You should now see your riddle web page. This is what you should see in your browser: Hi, my name is John Gilson. This is my first attempt at a Web page. Here is a riddle for you. Why did the lobster blush? Because it saw the salad dressing. Note: If you made a mistake typing in the coding for the web page, switch back to NotePad and make the correction. Once the correction is made, all you need to do is to click on NotePad's Save button to save the changes. Then switch to your browser and click on the Reload or Refresh button to reload the current page. We will first discuss the important elements that should appear in all web pages.

<HTML> and </HTML> tags

The HTML element was discussed above in detail so here is a brief summary as it relates to this web page example. The first line in the coding reads <HTML>. It tells the browser that what follows is an HTML document. It is called the opening HTML tag. The last line in our coding reads </HTML>. It tells the browser that the HTML document is finished. It is called the closing HTML tag. These opening and closing HTML tags make up the HTML element of our web page.

<HEAD> and </HEAD> tags

Next comes the HEAD element which, like the HTML element, also has an opening and closing tag. Each web page must have the HEAD element. Statements (or tags) that give information to a person visiting your website, or information such as those needed for a Search Engine are placed between the <HEAD> and </HEAD> tags. Thus the HEAD part of a document provides information about the document. You do not see this information displayed in your browser. It can be seen by choosing Source, or Page Source or Document Source from the View menu of your browser (one of these choices should be in the browser's View menu). The HEAD tag must not contain any text or normal markup tags. If it does, the browser will assume that it is in the BODY part of the document (studied below). The HEAD element can actually be omitted, but only if you group all the tags that go in it at the top of the document. To avoid any potential problems, I would suggest that you include the HEAD element in your own documents. If fact, the latest web standard (XHTML) demands that it be included. If you go back to my home page and choose Source from the View menu, you will see other statements between the <HEAD> and </HEAD> tags. Take me back there now. We will study these statements in a future lesson when we learn how to get your web pages on the World Wide Web.

<TITLE> and </TITLE> tags

One of the statements that must be included between the <HEAD> and </HEAD> tags is the TITLE of your web page. The title in our example (line 3) is "WEB PAGE DESIGN BASIC TAGS". Notice that this title is placed by the browser at the very top of the screen above the menu choices. The TITLE of your web page must occur between the <TITLE> and </TITLE> tags and you are only allowed one TITLE element per page. The information you provide in the title is also used to label the bookmark entry for your web page. That is, when a visitor bookmarks your site (adds it to their favorites list), it is the title that appears in the list. Most search engines also use the title in search engine results. Therefore you should take time to make up a good descriptive title for each of your web pages. You will notice that each of my lessons has its own title that describes the general content of the lesson. In general, the title should be short. Most search engines insist on a short title and a general rule of thumb is no more than 75 characters including spaces. Because we do not want the title to be displayed on the browser screen, the <TITLE> and </TITLE> tags must be placed between the <HEAD> and </HEAD> tags.

<BODY> and </BODY> tags

After the title comes the main body of your Web page. It contains all the text and tags. It is the part that will be displayed on the browser screen. Thus the BODY element contains the actual contents of the document. Of course the tags will not be displayed on the browser screen. The tags only tell the browser how to display the information. The body of each of your Web pages is declared through the BODY element. <BODY> tells your browser that what follows is to be the body of the Web page and </BODY> tells the browser that the body part of the page has ended. Thus the <BODY> and </BODY> tags are container tags, containing the body of your document. The BODY tag can actually be left out. If you place all the HEAD elements first, the browser will know where the actual body begins. I believe it is still a good rule to include the BODY tag - and the latest web standard (XHTML) demands that it be included. I also like the idea of declaring things for what they are. This way there will be no confusion for any HTML version that relies on these declarations. Now here is the above HTML document again only this time I numbered the lines in the BODY element for discussion purposes. Below the coding are the results once again when viewed in the browser. Below the results is a discussion of the BODY part of the document and some questions for you to answer. <HTML> <HEAD> <TITLE>WEB PAGE DESIGN - BASIC TAGS</TITLE> </HEAD> <BODY> Line 1: Hi, my name is John Gilson.<BR> Line 2: This is my first attempt at a Web page.<HR> Line 3: Here is a riddle for you. Line 4: <P>Why did the lobster blush?<HR> Line 5: Because it saw the salad dressing.<BR><BR><HR> </BODY> </HTML> Hi, my name is John Gilson. This is my first attempt at a Web page. Here is a riddle for you. Why did the lobster blush? Because it saw the salad dressing. Discussion: Notice the <BR> at the end of line 1. It simply tells the browser to drop down to the next line. The <HR> tag at the end of line 2 placed the first line across the page. Notice that the <HR> tag does not place any blank lines (empty rows) above or below the Horizontal Rule.

Problem 2: Why is the <P> 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 <HR> tag at the end of line 4. I wanted to leave a blank line before the third and last Horizontal Rule is placed by the browser across the page. I did this with two <BR> tags (line 5). The first <BR> tag tells the browser to go to the beginning of the next line. The second <BR> tag again tells the browser to go to the beginning of the next line which in effect places a blank line on the screen. The <HR> tag then placed the line across the page. Problem 3: One <P> has the same effect as two <BR> tags since the <P> tag forces a blank line before continuing on. Why then did I not simply use one <P> tag instead of two <BR> tags at the end of line 5? Problem 4: What does HR stand for in <HR> Problem 5: Do all tags require a beginning and an ending tag? Problem 6: Must tags be written in capital (upper case) letters? Problem 7: When you typed in the above HTML document, some of the tags were indented (such as <HEAD> and <TITLE>). Do you have to indent tags? | Click here to go to the answer section | IN SUMMARY, WE HAVE: <HTML> <HEAD> <TITLE>the title or name of your page goes here </TITLE> </HEAD> <BODY> . . . all your web page work goes here in this section . . . </BODY> </HTML>

Problem 8: Based on your knowledge of the basic tags, write down exactly what you think will be printed by your browser for the following HTML document. The answer is given in the answer section (no cheating now). Let's assume that the <HTML>, <HEAD> and <TITLE> tags have already been typed in. <BODY> I am learning a lot about

designing my own web pages. </BODY></HTML> | top | | bottom |

ANSWERS
1. Yes. All tags are terminated in the reverse order to the way in which they were activated. These tags satisfy the principle of "LIFO". 2. I could have placed the <P> tag at the end of line 3 as in: Here is a riddle for you.<P> It would have given the same results. However, this is not considered good form in HTML. The <P> tag stands for Paragraph and so implies the beginning of a new paragraph. It does not imply the end of a paragraph. Therefore you should never end a line or paragraph with a <P> tag. You end lines with <BR> as it tells the browser to BReak here and begin a new line. Of course you can also end any line or paragraph with an <HR> tag. (Actually there is a </P> tag that can be used to end a paragraph. This </P> tag isn't used very much, but it does have its uses and we will take a look at the </P> tag when we study centering text in Lesson Four.) 3. Two <BR> tags may have the same effect as one <P>, but we have reached the end of the HTML document. There are no more paragraphs and so the <P> tag should not be used as it denotes the beginning of a new paragraph. 4. Horizontal Rule. 5. No. In HTML, <BR>, <P> and <HR> are three examples that do not require an ending tag. They are also known as "stand alone tags". Actually, <P> does have an optional closing tag which is </P>. This closing tag is discussed in the next lesson. 6. No. You can write in lower case letters if you want to. HTML is not case sensitive. I use upper case letters so that I can easily and quickly identify tags from text when working with my web pages. Having said that, when HTML 4.0 was introduced, the World Wide Web Consortium (W3C) recommended that only lower case letters be used. As stated in Lesson 1, the latest web standard is XHTML. This standard, which is studied in detail in Lessons 42, 43 and 44, does not allow upper case at all. If you write your tags in upper case, the web page will not validate as XHTML. This lower case rule happens to be just one of several rules. So with XHTML, the rules have really tightened up. Why are the rules tightening up? As I state in Lesson 42 (in the additional lessons), XHTML is not bringing with

it a lot of new tags. The purpose of XHTML is to address the new browser technologies that is sweeping the world. Today web pages are being viewed in browsers through cell/mobile phones, cars, televisions, plus a host of hand-held wireless devices and communicators. Alternate ways to access the internet are continually being introduced. In many cases, these devices will not have the computing power of a desktop or notebook computer and so will not be able to accommodate poor or sloppy coding practices. XHTML is designed to address these technologies. XHTML also begins to address the need for those with disabilities (such as the blind and visually impaired) to access the internet. Thus web pages written in XHTML will allow them to be viewed on a wide range of browsers and internet platforms. So you may wish now to write all your tags and attributes in lower case letters. 7. No. You do not have to indent tags. I only do it for visual effects to quickly spot certain tags and to be able to tell tags from the text. Indenting (and leaving blank lines) is also good for setting apart sections of the document for later searching and editing purposes. 8. This is how the browser will interpret this HTML document: I am learning a lot about designing my own web pages. Since there are no <BR> or <P> tags in the document, the browser is unable to determine when you want the line to end or when you want blank lines. That is why everything was printed on the same line as one statement. The browser can only read text and has to be told through the use of tags what to do with the text. You can use this to your advantage when making up your web pages. You can use blank lines to section off portions of your work. This will make it easier to spot the sections later when you are looking for them. Also, the large space between the words "a" and "lot" was ignored. You can insert as many spaces as you like, but the browser only allows for one space between words and sentences. If you want more space between words or to indent lines and paragraphs, there is a way to do it, and I will show you how in Lesson Five.

LESSON FOUR - TAGS THAT AFFECT THE APPEARANCE OF YOUR TEXT

You may read the following sections in their entirety or use these choices to go directly to a section. | Designing your Web page | | Header tags | | Centering text | | Emphasizing text |

DESIGNING YOUR WEB PAGES

Just how should you design your web pages? Well, you should not design your pages only for appearance. You also need to design your pages for content. For example, you could add color to certain portions of text or you can highlight certain words with color to make them stand out. In your browser, it may look great. However, many people still use browsers that do not support coloring portions of text. So while it looks great in your browser, it will not give the same looks in other browsers, and text that you thought were highlighted by color will not be highlighted in these other browsers. Color is used to change the appearance of text. If a browser can't perform the appearance change, it has no way to determine an alternative. As a result the color attribute is simply ignored. Also, you may be able to fit a heading neatly on one line in your browser while in another browser, the font size could be a little bigger and the heading will not fit on one line. Or the reverse could be true, a heading may not fit on one line in your browser, but in another browser with a little smaller font size, it will fit into one line. Thus the appearance of the heading in your browser could be different in another browser. Also keep in mind that some browsers and servers do not support graphics. A user also has the option of turning off graphics to speed up the loading of web pages. Of course we still want our web pages to be pleasing to the eye but we need to keep in mind that how something looks in one browser could look entirely different in another browser. One person told me how surprised she was to see her web pages look so differently in another browser. She now designs her pages with this in mind. Consider this example: Suppose you want to have something printed by the browser in italics to set it apart from the rest of the text. Using the italics tag, you could tell the browser to "print these words in italics". But what if someone's browser does not support the italics tag? The browser will simply not be able to perform the requested "appearance" change and the tag will be ignored. The italics tag was originally a Netscape extension tag that was not recognized by a number of other browsers. Instead, it would be better to tell the browser to "emphasize" the text through the "emphasis tag". In most browsers, this would be italics but it could also be rendered as something else. In any event, the text will be emphasized in some manner. The same is true for bolding text. If you tell the browser to bold a portion of text to make it stand out from the rest of the text, you are assuming the browser will recognize the "boldface" tag. The boldface tag was also originally a Netscape extension tag and so not recognized by a number of browsers. Instead, it would be better to tell the browser to "strongly emphasize" the text. In most browsers this will be boldface, but it could also be something else. Now with the passing of time, browsers today do support the italics and bolding tags but there are still a number of other tags supported by some browsers and not by others. That is, there are still a number of tags out there that are browser specific. That is why you sometimes see a statement such as "This web page is best viewed in Internet Explorer." The "emphasis" and "strong emphasis" tags are "content based" markup tags and the above examples illustrate why you should use "content based" markup tags to mark up your text. Content based markup allows for browser independence. Knowing the meaning of a piece of text through a content based tag allows a browser to pick the best way possible to display the text on the platform it is running. Tags that are based on content and

not on appearance are called LOGICAL TAGS. You are encouraged to use logical tags because the browser can then pick the best way to display the text on the screen. If all this sounds too confusing, don't quit on me. Just follow through on the following examples involving logical tags. It should all become clear. Then I would suggest you come back and read again this introduction on "Designing Your Web Pages". | top | | bottom |

HEADER TAGS
Headings are controlled by HEADER tags. HEADER tags are logical tags and used extensively in HTML documents to display headings. HEADER tags not only make your headings larger (or smaller), they also bold the headings at the same time. There are only six HEADER tags and they range from H1 to H6. H1 produces the largest size heading and is called the "level 1 heading". H6 produces the smallest size heading and is called the "level 6 heading". To compare the different levels of headings, SWITCH to NOTEPAD and type in the following HTML document (this will also allow you to experiment with the document): <HTML> <HEAD> <TITLE>HEADING LEVELS</TITLE> </HEAD> <BODY> <H1>THIS IS H1.</H1> THIS IS NORMAL SIZE. <H2>THIS IS H2.</H2> THIS IS NORMAL SIZE. <H3>THIS IS H3.</H3> THIS IS NORMAL SIZE. <H4>THIS IS H4.</H4> THIS IS NORMAL SIZE. <H5>THIS IS H5.</H5> THIS IS NORMAL SIZE. <H6>THIS IS H6.</H6> THIS IS NORMAL SIZE.<HR> </BODY> </HTML> Now SWITCH to your browser and load the document. This is what you should see in the browser window:

THIS IS H1.
THIS IS NORMAL SIZE.

THIS IS H2.
THIS IS NORMAL SIZE.

THIS IS H3.
THIS IS NORMAL SIZE. THIS IS H4. THIS IS NORMAL SIZE.

THIS IS H5.
THIS IS NORMAL SIZE.
THIS IS H6.

THIS IS NORMAL SIZE. Note the following points: 1. <H1> gives the largest size heading while <H6> gives the smallest size heading. 2. In most browsers, the HEADER tags print the headings in boldface. A Level 1 heading (H1), because it is the largest heading, is considered to be the most prominent or most important heading. The Level 2 heading (H2) is the second most important heading. That is, it is more prominent than a Level 3 heading (H3) but less prominent than a Level 1 heading. 3. Good HTML form dictates that HEADER tags should be used in hierarchical order. Don't jump all over the place with your heading levels. For example, if you use a Level 2 heading for a title or heading, then the next size to use for a sub-title would be a level 3 heading. Study the above HTML document again and answer the following problems. The answers are given at the end of this lesson. Problem 1: Which heading size is closest to the normal size? Problem 2: Compare the document file with the results in your browser. Something does not seem to add up. From what you have learned so far in these lessons, state some of the inconsistencies. These will be fully explained in the answer section. | Click here to go to the answer section | Final remarks on the HEADER tags:

After all that has been said here about the header tags, keep in mind that they are logical tags. This means that you cannot assume, for example, that H1 means "very large bold text" in every browser. It will in most browsers - but you can't assume true in all browsers. It can be anything the browser chooses it to be - which could be defined by the viewer.

Some search engines give words appearing in headers more importance in their index. The headers are often used by these search engines to build an "outline" of the document which appears in the search results.

| top | | bottom |

CENTERING TEXT
You can see from my lessons that I make good use of centering headings and titles. The center command is: ALIGN="CENTER" (no spaces around the equal sign) and must be used in conjunction with a HEADER tag or the PARAGRAPH tag as in: <H2 ALIGN="CENTER">a heading goes here</H2> or <P ALIGN="CENTER">a paragraph or block of text goes here</P> Here are some points to remember concerning these two centering commands. 1. In the first example, a "heading" is centered (as indicated by the H2), and remember that because we are using a Header tag, a blank line will automatically be inserted before and after the heading. For this section, my heading "CENTERING TEXT" was centered using the H3 Header tag. 2. The second example is used to center whole portions of text - which could be several lines of text. In other words, we are centering a "paragraph" or "block of text" with each line centered on the screen just as these lines are centered (hopefully). To end centering a block of text, we use the </P> tag which is the closing paragraph tag. This </P> tag is a new tag for us and one that you may not end up using all that often. But it does have its uses and this is one of them. Choose DOCUMENT SOURCE from the VIEW menu if you want to see how I centered these lines. 3. In ALIGN="CENTER", the ALIGN part is called an attribute. In the first example, ALIGN is the attribute for the Header tag. In the second example, ALIGN is the attribute for the Paragraph tag. An attribute provides extra information about the tag and the text it encloses. An attribute can have a value. In our two examples, the ALIGN attribute has the value "CENTER". In the first example, the browser is told to place (align) the heading in the "center" of the line. If a viewer should make the browser screen smaller, the heading will still remain centered in whatever the new screen size is. In the next example, a heading will be centered. When you do the example, be sure to try also ALIGN="RIGHT" and ALIGN="LEFT" (which is the default value if the ALIGN attribute is not used).

4. The value must be enclosed in quotation marks if it contains anything more than letters, numbers, hyphens and/or periods. Otherwise placing the quotes around the value is optional. Since our two examples have only letters in the value ("CENTER"), the quotes may be omitted. If you are ever in doubt about the quotes, then just put them in. Of course the attribute and value do not have to be written in upper case (capital) letters either. They may be written in lower case. The maximum length of an attribute and its value is 1024 characters including the quotation marks if used. 5. ALIGN="CENTER" is also called a "command within a command". The first command (ALIGN), tells the browser to align something and the second command (CENTER) tells the browser to align it in the center. 6. Sometimes you will see documents use only the CENTER command (no ALIGN="CENTER") to center text as in: <CENTER> . . all lines or blocks of text will be centered between these two tags . . </CENTER> <CENTER> was one of the first Netscape extension tags and, as was the case with many of Netscape extension tags, not supported by a number of browsers at the time. ALIGN="CENTER" is an official part of HTML 3.2 and accepted by all browsers. You are therefore encouraged to use ALIGN="CENTER" for centering headings and paragraphs of text. If a browser does not support the CENTER tag, the headings and text will simply be left justified. We will be using the ALIGN="CENTER" command in the next example. | top | | bottom |

EMPHASIZING TEXT
There are two ways to emphasize text that I want to introduce here. These were alluded to at the beginning of this lesson under "Designing Your Web Pages". One is called ITALICS and the other is called BOLDFACE. Let's study both of them with the following example, which will also include the centering of the heading. Please SWITCH to NOTEPAD and type in the following HTML document: <HTML> <HEAD> <TITLE>OUTDOOR LIVING - ONTARIO</TITLE> </HEAD> <BODY>

<H2 ALIGN="CENTER">OUTDOOR LIVING IN ONTARIO</H2> <H3>POINTS OF INTEREST</H3><HR> <P>Northern Ontario: <P><STRONG>Five Mile Lake Provincial Park</STRONG> <P><EM>1.5 square miles.</EM> Camping, fishing (<EM>walleye, northern pike, brook trout</EM>), canoeing, self-guided nature trails. <P><STRONG><EM>Recommended</EM></STRONG> <HR> </BODY></HTML> Now load the document into your browser and your web page should look like the following:

OUTDOOR LIVING IN ONTARIO

POINTS OF INTEREST
Northern Ontario: Five Mile Lake Provincial Park 1.5 square miles. Camping, fishing (walleye, northern pike, brook trout), canoeing, selfguided nature trails. Recommended

Here are some questions for you to answer on the above example followed by a discussion on the emphasis tags. Problem 3: Which tag appears to "bold" text? Problem 4: Which tag tells the browser to write the text in italics? Problem 5: How was the word "Recommended" printed? Problem 6: Why is there no <BR> tag at the end of the line "OUTDOOR LIVING IN ONTARIO" or a <P> in front of the line "POINTS OF INTEREST" of the document you typed in? | Click here to go to the answer section |

<EM> = EMPHASIZE TEXT

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

<STRONG> = STRONGLY EMPHASIZE TEXT

<STRONG> is also a logical tag. It is used to strongly emphasize text. <STRONG> is distinct from <EM>. 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 <B> for Boldface or <I> for Italics (Original Netscape Extension Tags)
<STRONG> is accepted by all browsers as a way of strongly emphasizing text which in most cases is boldface. Instead of the <STRONG> and </STRONG> tags for strongly emphasizing text, you will sometimes see <B> and </B> for bolding text. While <STRONG> is a "Logical Style Command", <B> is not. <B> is a "Physical Style Command". A physical style command cannot be rendered differently. Therefore if a browser does not accept the <B> 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 <I> to print in italics instead of the <EM> tag. Now if for some reason you want to ensure only italics or boldface and nothing else, then use the italic font <I> or the boldface font <B>. 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 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. <H4> 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 <BODY> and </BODY> tags, you did not type in any <BR> or <P> commands. For example, we did not type in a <BR> 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 <BR> 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 <H2>) 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 <BR> and <P> tags with HEADER tags. Of course, if you want additional blank lines before or after a HEADER tag, you will then need to use <BR> or <P> tags. 3. <STRONG>. Notice that the tag </STRONG> ends the "bolding" of text. 4. <EM> (which stands for EMphasize). Again, </EM> is needed to end italics. 5. It was printed in both boldface and italics. 6. We do not need <BR> or <P> 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. <HTML> <HEAD> <TITLE>SALAD RECIPE</TITLE> </HEAD> <BODY> <H2 ALIGN="CENTER">TOSSED SALAD</H2> <H3 ALIGN="CENTER"><EM>Simple and attractive</EM></H3><HR> <P>1 large bunch of greens, preferably mixed<BR> 10 cherry tomatoes quartered

<P><STRONG>DRESSING</STRONG><BR> 1/2 cup Mayonnaise<BR> 2 tbsp. Minced dill or sweet pickle<BR> 1 tsp. Prepared mustard<BR> 1/4 tsp. Onion powder<BR> 1 tsp. Granulated sugar<BR> 1 tbsp. Milk <P><EM>Have greens ready in separate containers in refrigerator.</EM> <P><STRONG>Dressing:</STRONG> Combine all ingredients together in a small bowl. Mix well. Spoon over greens. Toss to coat. Add tomato and toss together lightly. <EM>Serves 8</EM> </BODY></HTML>

LESSON FIVE - INDENTING and CREATING SPACES WITH &nbsp; 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 &nbsp; | | 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 &nbsp;

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.

&nbsp;
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: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;These six characters will ... In &nbsp;, the nbsp stands for non-breaking space character. &nbsp; 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): Non-breaking space Copyright Trademark Registered Less Than Greater Than Ampersand Quote Apostrophe Cent Euro One quarter One half Three quarters Degrees Larger middle dot < > & " ' &nbsp; &copy; &#153; &reg; or &#174; &lt; &gt; &amp; &quot; &#39; &#162; &euro; or &#8364; &#188; &#189; &#190; &#176; &#149;

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. 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 &nbsp; 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 <UL> to indicate the beginning of an Unordered List. To indicate the end of the Unordered List, you use the ending tag </UL>. Furthermore, each item in your bulleted list must begin with the tag <LI>. <LI> stands for List Item. This is how you do it then: <UL> <LI>item <LI>item

<LI>item </UL> 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: <HTML> <HEAD> <TITLE>SAFETY TIPS </TITLE> </HEAD> <BODY> <H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2> <UL> <LI>Be able to swim <LI>Wear a life jacket at all times <LI>Don't stand up or move around <LI>Don't overexert yourself <LI>Use a bow light at night </UL> </BODY></HTML> 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 Don't overexert yourself Use a bow light at night

Notice from the above results that: 1. <UL> denotes the beginning of an Unordered List 2. </UL> denotes the end of the Unordered List

3. 4. 5. 6.

each <LI> denotes the next item in the list to receive a bullet the bullets are round and solid each item in the list has been indented 3 or 4 spaces from the left side of the screen no </LI> tag is required - although you can use it to signal the end of each List Item. However, each new <LI> implies that the previous List Item is finished. 7. no <BR> tag is needed as each new LI command forces a line break before printing the next item. Try experimenting with <BR> after a list item or a <P> 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: <HTML> <HEAD> <TITLE>SAFETY TIPS</TITLE> </HEAD> <BODY> <H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2> <UL> <LI>Be able to swim <LI>Wear a life jacket at all times <LI>Don't stand up or move around. If canoe tips, <UL> <LI>Hang on to the canoe <LI>Use the canoe for support and <LI>Swim to shore </UL> <LI>Don't overexert yourself <LI>Use a bow light at night </UL> </BODY></HTML> I indented the second list for emphasis. You don't have to do that. Here is the browser output for this web page.

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, o Hang on to the canoe o Use the canoe for support and o 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 <UL>tag, you need a </UL> 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 <UL> 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 <UL> tags as in: <UL><UL><UL> <LI>List Items </UL></UL></UL> | 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 <OL> instead of <UL>. OL stands for Ordered List. To see an ordered list, let's use document #1 and simply change the <UL> tag to <OL> and the closing </UL> tag to </OL>. So SWITCH to NOTEPAD, load in document #1 and make the two changes so that the web page now looks like: <HTML> <HEAD> <TITLE>SAFETY TIPS</TITLE> </HEAD>

<BODY> <H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2> <OL> <LI>Be able to swim <LI>Wear a life jacket at all times <LI>Don't stand up or move around <LI>Don't overexert yourself <LI>Use a bow light at night </OL> </BODY></HTML> 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: 1. 2. 3. 4. 5. 6. 7. 8. <OL> denotes the beginning of an ordered or numbered list </OL> denotes the end of the ordered list each <LI> denotes the next item in the list to receive a number the numbers are in sequence (in order) - hence the name Ordered List) each item in the list has been indented 4 or 5 spaces from the left side of the screen no </LI> tag is required to end a list item. no <BR> 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. <HTML> <HEAD> <TITLE>SAFETY TIPS</TITLE> </HEAD>

<BODY> <H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2> <OL> <LI>Be able to swim <LI>Wear a life jacket at all times <LI>Don't stand up or move around. If canoe tips, <UL> <LI>Hang on to the canoe <LI>Use the canoe for support and <LI>Swim to shore </UL> <LI>Don't overexert yourself <LI>Use a bow light at night </OL> </BODY></HTML> 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, o Hang on to the canoe o Use the canoe for support and o 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 <LI> creates one list item. A Definition List is a "two item" or a "two tier" list as you will see in the next example. The following example illustrates a DEFINITION LIST and we will not use one of our previous examples for this. SWITCH to NOTEPAD and type in the following new document. <HTML> <HEAD> <TITLE>TRIP PLANNING</TITLE>

</HEAD> <BODY> <H2 ALIGN="CENTER">SUMMER CAMPING TRIP PLANNING</H2><HR> <DL> <DT>Winter <DD>Write for maps and travel brochures <DD>Read camping books <DD>Prepare budget and equipment list <DT>Spring <DD>Visit camping shows <DD>Buy essential items <DD>Make reservations <DT>Week Before Trip <DD>Have vehicle serviced <DD>Vaccinate pets <DD>Buy traveler's cheques <DD>Cancel newspaper and other deliveries <DT>Day before trip <DD>Load vehicle </DL> </BODY></HTML> When you execute this HTML document, it should look like the following:

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 <DL> 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. </DL> 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 <DT> defines a new term in the list. Note that these terms are not indented. 4. The DT tag may only contain text-level elements (definition of text-level elements given below). 5. The DT tag has an optional end tag (</DT>), as it is always clear from the context where the tag's contents end. 6. DD stands for Definition Description. It gives the set of second items in the list or the second tier. Note that the second tier is indented from the first tier (although this is not a guarantee in all browsers) and that the second tier describes the items in the first tier. That is, the second tier is a description of the first tier. 7. The DD end tag (</DD>) is also optional, as it is clear from the context where the tag's contents end. 8. DD may contain block-level elements as well as text-level elements. There are two types of elements in the BODY section of a web page and they are block-level elements and text-level elements. Elements that generate a new paragraph such as a header tag (for example <H1>) or a paragraph tag (<P>), are called block-level elements. Text-level elements are elements that do not generate a new paragraph (examples are <EM> and <STRONG>). 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 <DT> gives a term and each <DD> describes or supports that term. While it is legal to have a DL with only DT tags or with only DD tags, you are not encouraged to do this. It really doesn't make sense, for example, to have a definition without a term. Also, do not use the Definition List to indent a block of text. It is not good HTML form and indenting a section of text this way is not guaranteed to work. It is considered invalid HTML. Here is a problem that will keep you busy for awhile. Be sure to try it though. There's nothing like learning by doing. Problem 2: This problem involves all three types of lists (Unordered, Ordered and Definition Lists). Make up a document that will give the following web page in your browser. It looks rather long, but just start at the beginning and work your way slowly through it. The answer is given in the answer section.

FINDING YOUR WAY IN THE WILDERNESS

1. Seek expert advice about the area o 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: o roads o trails and o waterways
o

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. The TYPE attribute was originally a Netscape extension and new to HTML 3.2. It is now supported by all browsers.

CHANGING THE APPEARANCE OF BULLETS

Here is the way to change your bullets to SQUARE bullets: <UL TYPE="square"> <LI>item 1 <LI>item 2 <LI>item 3 </UL>

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. Note that the value "square" is written in lowercase letters. The TYPE attribute will not work if it is written in uppercase letters.

item 1 item 2 item 3

You can also change the appearance of your bullets to hollow or open bullets with: <UL TYPE="circle"> To get the round solid bullets back again (which is the default value), use: <UL TYPE="disc">

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: <OL TYPE="I"> <LI>item 1 <LI>item 2 <LI>item 3 </OL> 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. II. III. item 1 item 2 item 3

The following replacements for the numbered list can also be made: <OL TYPE="i"> for lower case Roman Numerals (i, ii, iii, iv, and so on). <OL TYPE="A"> for capital letters (A, B, C, and so on). <OL TYPE="a"> for lower case letters (a, b, c, and so on). Note that <OL TYPE="1"> (the number 1) is the default for listing the items as 1, 2, 3, and so on.

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, <OL START="3"> as in: <OL START="3"> <LI>item 3 <LI>item 4 <LI>item 5 </OL> 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: <OL TYPE="I" START="3"> will begin numbering with Roman Numeral III. <OL TYPE="i" START="3"> will begin numbering with Roman Numeral iii. Problem 3: What do you think <OL TYPE="A" START="4"> will do to the list? Problem 4: What will <OL TYPE="a" START="5"> 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 document. <OL> <LI>This is List Item 1 <LI>This is List Item 2 <LI>This is List Item 3

<LI VALUE="7">This is List Item 7 <LI>This is List Item 8 </OL> which gives the following results: 1. This is List Item 1 2. This is List Item 2 3. This is List Item 3 7. This is List Item 7 8. 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. <HTML> <HEAD> <TITLE>Names and Addresses</TITLE> </HEAD> <BODY> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; John Gilson &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;William Somebody<BR> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pauline Johnson Collegiate &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 120 Somestreet<BR> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 627 Colborne St. East &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;Someplace, Somestate<BR> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Brantford, Ontario &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;U.S.A.

45061<BR> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Canada, N3S 3M8<BR> </BODY></HTML> You can see from the above document why many people will use an alternate method such as tables (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. <HTML> <HEAD> <TITLE>Wilderness Adventures</TITLE> </HEAD> <BODY> <H2 ALIGN="CENTER">FINDING YOUR WAY IN THE WILDERNESS</H2> <OL> <LI>Seek expert advice about the area <UL> <LI>Get the best maps. On the map select <UL> <LI>landmarks <LI>mountains <LI>lakes </UL> <LI>Get a good compass and <UL> <LI>check slope of land <LI>check direction of flowing streams </UL> </UL> <LI>If there is snow on the ground, stay close to: <UL> <LI>roads <LI>trails and <LI>waterways </UL> </OL> <DL> <DT>If you are inexperienced <DD>do not travel alone <DD>do not travel at night <DT>If you do get lost <DD>Don't panic <DD>Don't wander in the dark

<DD>Give distress signals at regular intervals such as: <UL> <LI>three shouts <LI>three small fires <LI>three blasts of a whistle <LI>three rifle shots </UL> <DD>It may be wise to sit tight and wait for searchers </DL> </BODY></HTML> 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.).

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

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. You can also think of page jumps as bookmarks. You place bookmarks at different places on your web page and then at the top of your web page you provide links to these bookmarks. You must assign a name to each bookmark, otherwise the browser will not know where the bookmark is located. Here is the basic link command that points to another section on your web page. <A HREF="#linkname">Click on these words to go to the bookmark</A> Where "linkname" is the name of the section you are jumping or linking to. That is, a section of the web page has been bookmarked with the name "linkname". 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: <H4 ALIGN="CENTER"> <A HREF="#top">click here to go to the top of the page</A></H4> If you do not want to use a header tag, then use the paragraph tag as in: <P ALIGN="CENTER"> <A HREF="#top">click here to go to the top of the page</A></P>

At the point or place where you want the browser to jump to, you insert the following command: <A NAME="linkname"></A> For example, at the top of this page (right after the BODY tag), I entered this command: <A NAME="top"></A> 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". Thus I have bookmarked the top of the web page using the name "top". 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 (</A>) to signal the end of the anchor. 5. The anchor element is a "container element". Everything contained between the <A> and </A> 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: <A NAME="park"></A>A WALK THROUGH THE PARK and <A NAME="park">A WALK THROUGH THE PARK</A> 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: <H4 ALIGN="CENTER"><A HREF="#links">| Links in general |</A> <A HREF="#page">| Links within a page - page jump |</A> <A HREF="#another">| Linking to another page in your website |</A> <A HREF="#world">| Linking to another page anywhere in the world |</A> <A HREF="#button">| Using a link button |</A> <A HREF="#mail">| MAILTO: (sending an e-mail) |</A></H4> 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 <BR> 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 <A> and the </A> 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. <H4 ALIGN="CENTER">| <A HREF="#links">Links in general</A> | | <A HREF="#page">Links within a page - page jump</A> | | <A HREF="#another">Linking to another page in your website</A> | | <A HREF="#world">Linking to another page anywhere in the world</A> | | <A HREF="#button">Using a link button</A> | | <A HREF="#mail">MAILTO: (sending an e-mail)</A> |</H4> 3. Note that each pair of adjacent vertical bars is separated by one space. 4. Remember that the anchor tags (<A> and </A>) 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: | <A HREF="#page">Links within a page - page jump</A> | 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 (&nbsp;) 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 &nbsp; replacing each space between words including the vertical bars: <H4 ALIGN="CENTER"> |&nbsp;<A HREF="#links">Links&nbsp;in&nbsp;general</A>&nbsp;| |&nbsp;<A HREF="#page">Links&nbsp;within&nbsp;a&nbsp;page</A>&nbsp;| </H4> 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 &nbsp;) 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 Page 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 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 "&nbsp;" 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: <A HREF="#linkname">Click on these words</A> Well, to link to another page such as to your home page, just replace the #linkname with the name of your file as in: <A HREF="filename.htm">Click on these words</A> For example, if your home page was named index.htm, you could have: <A HREF="index.htm">Go back to home page</A> 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 <A> and </A>, a person can click anywhere on those words and the browser will load the home page. 5. You do not need a <A NAME="filename"></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 |

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: <A HREF="filename">Click on these words</A> as in: <A HREF="index.htm">Go back to home page</A> 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 <A HREF="http://www.dayspring.com/ecards/">Want to e-mail a greeting card to someone?</A> 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 visit this e-card site 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) <A HREF="#top">enclosed text</A> b) <A HREF="index.htm">enclosed text</A> c) <A HREF="http://www.press.com/perma/">enclosed text</A> | 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 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).

Here are the HTML statements that give this button: <H3 ALIGN="CENTER"> <FORM METHOD="GET" ACTION="index.htm"> <INPUT TYPE="submit" VALUE="Return to Home Page"> </FORM></H3> 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 </FORM> 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. 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.

Here are the statements that give the above two buttons: <H3 ALIGN="CENTER"> <FORM METHOD="GET" ACTION="index.htm"> <INPUT TYPE="submit" VALUE="Return to Home Page"> </FORM> <FORM METHOD="GET" ACTION="Lesson7.htm"> <INPUT TYPE="submit" VALUE="Send me to Lesson Seven"> </FORM></H3>

LINING UP LINK BUTTONS

Lining up link buttons so that they look like: is a little more complicated. However, if you want the statements now, here they are: <TABLE BORDER="0"> <TR> <TD><FORM METHOD="GET" ACTION="index.htm"> <INPUT TYPE="submit" VALUE="Return to Home Page"> </FORM> <TD><FORM METHOD="GET" ACTION="Lesson7.htm"> <INPUT TYPE="submit" VALUE="Send me to Lesson Seven"> </FORM> </TABLE> TR stands for Table Row and TD stands for Table Data. We will study tables in 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 of Page 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 e-mail 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 e-mail 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, <A HREF="mailto:jcgilson@bfree.on.ca">John Gilson</A>, an e-mail. In this example, jcgilson@bfree.on.ca 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: <A HREF="mailto:jcgilson@bfree.on.ca?subject=topic"> as in: <A HREF="mailto:jcgilson@bfree.on.ca?subject=product information">Please send more product information</A> 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: <A HREF="mailto:jcgilson@bfree.on.ca?cc=person@site.com"> where person@site.com 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: <A HREF="mailto:jcgilson@bfree.on.ca?bcc=person@site.com"> 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 Explorer, Firefox and Netscape 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. Explorer, Firefox and Netscape do allow all three options in the anchor tag. 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: <A HREF="mailto:?body=Don't forget also to send in your financial statements as soon as possible.">Click here when ready to send us your email.</A> 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 used the paragraph tag (<P>) as in <P ALIGN="CENTER"> and then closed the section with </P> instead of using a header tag such as <H3 ALIGN="CENTER">. <P ALIGN="CENTER"> | <A HREF="#park">Walk through the park</A> | | <A HREF="#swim"> Going for a swim</A> | | <A HREF="#bike">A bicycle ride</A> | </P> 2. Using my answer for Problem 1, the statement would be: <A NAME="park"></A> 3. <P ALIGN="CENTER"> |&nbsp;<A HREF="#park">Walk&nbsp;through&nbsp;the&nbsp;park</A>&nbsp;| | &nbsp;<A HREF="#swim">Going&nbsp;for&nbsp;a&nbsp;swim</A>&nbsp;| | &nbsp;<A HREF="#bike">A&nbsp;bicycle&nbsp;ride</A>&nbsp;|</P>

4. The browser will look for the file in the current directory (also called "folder") that is, the directory that you are saving all your web pages in. Once you have your website on the World Wide Web, the browser will look for the file in the directory or location that your server company or provider has placed your pages in. 5. The first statement is used in page jumps. The second statement is used in linking to another page in your directory (that is, to another one of your web pages). The third statement is used in linking to a website anywhere in the WWW. 6. To load the page called "pictures.htm" and then do a page jump to the pet pictures section, you would combine the URL of the page with the name of the pet pictures section as in: <A HREF="pictures.htm#pet">Click here to see pictures of our pets</A> where "pet" is the name of the pet pictures section. At the beginning of the pet pictures you would have something like: <A NAME="pet">Here are pictures of our pets</A> 7. Whatever you want for the link words must be contained between the anchor tags. Therefore the closing anchor tag must be placed after the word "possible". So we have: For more information, please send an e-mail to me, <A HREF="mailto:jcgilson@bfree.on.ca">John Gilson, and I will get back to you as soon as possible.</A>

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, especially those with dial-up connections or with slower high speed connections, do not want to wait a long time for a web page to display. What often happens then, is that viewers will leave your site before having really seen it. Now it is possible to do certain things to speed 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: <IMG SRC="image.gif"> where "image.gif" represents the name of the image. The chain at the top of this lesson:

was put there with this command: <IMG SRC="hrchain.gif"> 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 <HR> 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"). | 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 (gif is pronounced "jiff" by some people, but most people pronounce gif with a hard g as in gift). GIF stands for General Image Format. This format was invented by Compuserve and is the most common format on the World Wide Web. Its 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 paint program such as Paint Shop Pro, 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 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. <HTML> <HEAD> <TITLE>HALL RENTAL</TITLE> </HEAD> <BODY> <H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR> <H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE">We are wheelchair accessible.</H4> Please call for rates<HR> </BODY></HTML> 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. 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 <BR CLEAR>. 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: <HTML> <HEAD> <TITLE>HALL RENTAL</TITLE> </HEAD> <BODY> <H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR> <H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE" WIDTH="96" HEIGHT="90" HSPACE="10">We are wheelchair accessible.</H4> Please call for rates<HR> </BODY></HTML> 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 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 (for example, Paint Shop 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: <HTML> <HEAD> <TITLE>HALL RENTAL</TITLE> </HEAD> <BODY> <H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR> <H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE" WIDTH="60" HEIGHT="60" HSPACE="10" ALT="chair">We are wheelchair accessible.</H4> Please call for rates<HR> </BODY></HTML> 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 "*". 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

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

7. 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) 8. Make up your own suitable file names for the links 9. The first title (BUCHANAN VILLAGE) is a level 1 heading 10. The second title (An Adult Lifestyle Community for Seniors) is a level 2 heading 11. 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: <HTML> <HEAD> <TITLE>HALL RENTAL</TITLE> </HEAD> <BODY> <H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR> <H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE">We are wheelchair accessible.</H4> Please call for rates<HR> </BODY></HTML> 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):

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: <IMG SRC="gardens.jpeg">. If you accidentally write: <IMG SRC="garden.jpeg"> (name does not match) or <IMG SRC="gardens.jpg"> (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: <IMG SRC="ImageName.jpg"> 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: <HTML>

<HEAD> <TITLE>RETIREMENT LIVING - BUCHANAN VILLAGE</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">BUCHANAN VILLAGE</H1><HR> <H2 ALIGN="CENTER">An Adult Lifestyle Community for Seniors</H2> <H3 ALIGN="CENTER">Operated by the Retirement Home Association</H3> <IMG SRC="cross1.gif" ALIGN="LEFT" WIDTH="60" HEIGHT="85" BORDER="0" HSPACE="20" ALT="Cross"> <UL><LI><A HREF="About.htm">What is <EM>Buchanan Village</EM> all about?</A> <LI><A HREF="Lifeleas.htm">What is a "Life Lease" Retirement Community? </A> <LI><A HREF="Benefits.htm">The benefits of a Life Lease</A> <LI><A HREF="Moreinfo.htm">Who to contact for more information</A><BR><BR> </UL><HR> </BODY></HTML> This problem is a little unfair as it involves something we have not discussed yet (using 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 <BR> 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 <BR> tags will not guarantee that the Horizontal Rule will be placed below the image. Whether the Horizontal Rule appears in your browser beside the image or below the image is dependent on text size and on the width of the monitor screen. 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 Horizontal Rule will end up below the image. Also, if the monitor is a wide screen monitor, a lot more text can be placed beside an image than in a smaller width monitor. Thus with a wide screen monitor the Horizontal Rule can end up beside the image while in the narrower width monitor it can end up below the image. In

Explorer, Firefox and Netscape, if you go to the "View" menu, choose "Text Size" 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: <H4 ALIGN="RIGHT">We are wheelchair accessible.<IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE"></H4>

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: <HTML> <HEAD> <TITLE>IMAGE AS A LINK</TITLE> </HEAD> <BODY> <H4 ALIGN="CENTER"><A HREF="index.htm"><IMG SRC="back.gif" WIDTH="40" HEIGHT="40" HSPACE="10" ALIGN="MIDDLE" ALT="home"></A>Click on the button to head home</H4><HR> </BODY></HTML> 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

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 of 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. | 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: <A HREF="cross1.gif"><IMG SRC="cross1th.gif"></A> 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 Paint Shop 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). Note that the above command line:

<A HREF="cross1.gif"><IMG SRC="cross1th.gif"></A> 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 thumb-nail "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: <A HREF="index.htm"><IMG SRC="back.gif" ...> 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).

Here are the lines that produced the above 3 thumb-nails and their original images. <P><A HREF="cross3.gif"><IMG SRC="cross3th.gif" WIDTH="50" HEIGHT="50" ALT="cross"></A>

<P><A HREF="cross4.gif"><IMG SRC="cross4th.gif" WIDTH="32" HEIGHT="50" ALT="cross"></A> <P><A HREF="cross6.gif"><IMG SRC="cross6th.gif" WIDTH="42" HEIGHT="52" ALT="cross"></A> 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 I use Paint Shop Pro to change the size of an image. You can also use a paint program like 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. <A HREF="cross1.gif"><IMG SRC="cross1.gif" BORDER="0" WIDTH="39" HEIGHT="50"></A> 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 Paint Shop Pro to the thumb-nail size that I wanted and noted the dimensions (39 and 50) which I then used for the thumb-nail. You may be able to determine a suitable thumb-nail size without having to use a software program like 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: <A HREF="cross1.gif"><IMG SRC="cross1.gif" BORDER="0" WIDTH="39" HEIGHT="50"></A> 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 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 </A> tag to the end of the words as in: Click on the button to head home</A> Here it is shown as part of the complete statement. <H4 ALIGN="CENTER"><A HREF="index.htm"><IMG SRC="back.gif" WIDTH="40" HEIGHT="40" HSPACE="10" ALIGN="MIDDLE" ALT="home">Click on the button to head home</A></H4><HR> 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 (<H4> and </H4>). 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.

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 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 <STRONG> and <EM> 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. 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 paint program such as Paint Shop Pro, you will see that all the colors are given as decimal numbers. If you look carefully in Paint Shop Pro, you will also see an HTML box that gives the equivalent Hexadecimal value. 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. Look in the HTML box and it will say #2efa22. This Dec 46=Hex 2e, Dec 250=Hex fa and Dec 34= Hex 22. As you will see later in this lesson, it is the 6 digit Hexadecimal value that must be used in the coding of a web page. Now if your paint program does not give you the equivalent HTML Hexadecimal value, or if you have a decimal number that you would like to know the Hexadecimal equivalent, here are 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 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. Find a website that will convert any decimal number for you. There are several websites that do this. Just go to your favorite search engine and search for the phrase converting decimals to hexadecimals.

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 Although you would not convert from a Hexadecimal number to a Decimal number when creating color codes for web pages, I offer the conversion here for interest sake. 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 |

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: <BODY BGCOLOR="#RRGGBB">

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 Thus to get a white background, the command is: <BODY BGCOLOR="#FFFFFF"> as in: <HTML> <HEAD> <TITLE>WEB PAGE DESIGN</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> * * * </BODY></HTML> You can use any color code you like and the table in Lesson Ten gives a range of sample colors and their corresponding Hexadecimal values.

Problem 3: Using one of the above codes, what is the command line if you want a full intensity blue background and no amounts of red and green? | Click here to go to the answer section | You can also use the following color names instead of their color codes but keep in mind that these names are not as widely supported as the hexadecimal values. aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow | 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)

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" color.) LINK="#RRGGBB" standard blue color.) to change the color of all the text on the page (full page text to change the color of all the links on the page (from the

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

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 <STRONG>, <EM>, header tags, etc. to emphasize text. To change the color of only a portion of text (a block of text), use the formula: <FONT COLOR="#RRGGBB">text text text</FONT> 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, </FONT>, restores the previous text color. Problem 5: Write the command line that produces the following line in your browser with the words "Firefox and Internet Explorer" in blue: Among the most popular browsers are Firefox 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: <FONT COLOR="#FF0000"><H2 ALIGN="CENTER">heading</H2></FONT> but will not work in: <H2 ALIGN="CENTER"><FONT COLOR="#FF0000">heading</FONT></H2> | 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: <BODY BACKGROUND="image.jpg"> where "image.jpg" represents the name of the image. Note two points with this BACKGROUND attribute: 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). <BODY TEXT="#FF0000" LINK="#336633" ALINK="#0000FF" VLINK="#FF66FF" BACKGROUND="blue_stc.jpg"> 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. <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#336633" ALINK="#0000FF" VLINK="#FF66FF" BACKGROUND="blue_stc.jpg">

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 |

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: <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" BACKGROUND="blue_stc.jpg" BGPROPERTIES="fixed"> Note: The BGPROPERTIES attribute will only work in Explorer browsers as BGPROPERTIES is an Explorer attribute. In other words, Firefox and Netscape do 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 Firefox or what it will look like without the BGPROPERTIES attribute. Unfortunately there is no similar attribute that can be used for Firefox and Netscape browsers. | top | | bottom |

ANSWERS
1. Dec 99 = Hex 63; Dec 255 = Hex FF; Dec 128 = Hex 80, so the code would be "#63FF80". 2. Hex 7B = 7x16 + 11x1 = 112 + 11 = 123 3. <BODY BGCOLOR="#0000FF"> 4. <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00FF00" ALINK="#0000FF" VLINK="#FF00FF"> You can use these BODY attributes in any order. 5. Among the most popular browsers are <FONT COLOR="#0000FF">Firefox and Internet Explorer</FONT>. Both of them can be downloaded from the Internet

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, click here to see all the codes and their colors in a series of images. 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, <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00FF00" ALINK="#0000FF" VLINK="#FF00FF"> 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: <FONT COLOR="#CC99FF">text text text</FONT> where #CC99FF represents the color code. The closing FONT tag, (</FONT>), restores the previous text color.

| top | | bottom |

COLOR TABLE
000000 330000 003300 333300 006600 336600 009900 339900 00CC00 33CC00 00FF00 33FF00 660000 990000 663300 993300 666600 996600 000033 330033 003333 333333 006633 336633 009933 339933 00CC33 33CC33 00FF33 33FF33 660033 990033 663333 993333 666633 996633 000066 330066 003366 333366 006666 336666 009966 339966 00CC66 33CC66 00FF66 33FF66 660066 990066 663366 993366 666666 996666 000099 330099 003399 333399 006699 336699 009999 339999 00CC99 33CC99 00FF99 33FF99 660099 990099 663399 993399 666699 996699 0000CC 3300CC 0033CC 3333CC 0066CC 3366CC 0099CC 3399CC 00CCCC 33CCCC 00FFCC 33FFCC 6600CC 9900CC 6633CC 9933CC 6666CC 9966CC 0000FF 3300FF 0033FF 3333FF 0066FF 3366FF 0099FF 3399FF 00CCFF 33CCFF 00FFFF 33FFFF 6600FF 9900FF 6633FF 9933FF 6666FF 9966FF

669900 999900 66CC00 99CC00 66FF00 99FF00 CC0000 FF0000 CC3300 FF3300 CC6600 FF6600 CC9900 FF9900 CCCC00 FFCC00 CCFF00 FFFF00 800000

669933 999933 66CC33 99CC33 66FF33 99FF33 CC0033 FF0033 CC3333 FF3333 CC6633 FF6633 CC9933 FF9933 CCCC33 FFCC33 CCFF33 FFFF33 800033

669966 999966 66CC66 99CC66 66FF66 99FF66 CC0066 FF0066 CC3366 FF3366 CC6666 FF6666 CC9966 FF9966 CCCC66 FFCC66 CCFF66 FFFF66 800066

669999 999999 66CC99 99CC99 66FF99 99FF99 CC0099 FF0099 CC3399 FF3399 CC6699 FF6699 CC9999 FF9999 CCCC99 FFCC99 CCFF99 FFFF99 800099

6699CC 9999CC 66CCCC 99CCCC 66FFCC 99FFCC CC00CC FF00CC CC33CC FF33CC CC66CC FF66CC CC99CC FF99CC CCCCCC FFCCCC CCFFCC FFFFCC 8000CC

6699FF 9999FF 66CCFF 99CCFF 66FFFF 99FFFF CC00FF FF00FF CC33FF FF33FF CC66FF FF66FF CC99FF FF99FF CCCCFF FFCCFF CCFFFF FFFFFF 8000FF

800080

008000

808000

000080

008080

C0C0C0

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 | | <BR>, 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. In the next lesson we study 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 9 A.M. 12 P.M. 2 P.M. NURSERY John Mary Marcia SECURITY Kimberly George Ken 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. <HTML> <HEAD> <TITLE>VOLUNTEER SCHEDULE</TITLE> </HEAD> <BODY> <H3 ALIGN="CENTER"> <TABLE> <CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION> <TR> <TD> <TD>9 A.M. <TD>12 P.M. <TD>2 P.M. <TR> <TD><STRONG>NURSERY</STRONG> <TD>John <TD>Mary <TD>Marcia <TR> <TD><STRONG>SECURITY</STRONG> <TD>Kimberly <TD>George <TD>Ken <TR> <TD><STRONG>TICKETS</STRONG> <TD>Jacob <TD>Nancy <TD>Adam </TABLE></H3> </BODY></HTML> Here is an explanation of this table. 1. A table must be declared with TABLE tags. Therefore <TABLE> denotes the beginning of a table and </TABLE> 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 <CAPTION ALIGN="BOTTOM"> (try it). Note also that I strongly emphasized

the caption and my headings. This is optional but it does serve the purpose of making your caption and headings stand out more. 3. A table is made up of rows and columns and tables are generated row by row with each row going from left to right. A row is a horizontal collection of cells. Therefore, 9 A.M., 12 P.M. and 2 P.M. are in the first row; NURSERY, John, Mary and Marcia make up the second row; SECURITY, Kimberly, George and Ken make up the third row. Our table has four rows. Columns are vertical. Therefore NURSERY, SECURITY, TICKETS are in the first column, while 9 A.M., John, Kimberly, and Jacob make up the second column, and so on. 4. Rows are divided into cells and each cell in our example is a data cell. A cell can also contain no data (the first cell in the first row is empty or blank). Cells can also overlap. That is, a cell can span across more than one row or span more than one column and we will deal with that in the next lesson. 5. TD stands for Table Data. It denotes the beginning of a new cell. You simply place this tag in front of the information you want in the cell. Thus TD is used to mark up each individual cell. The TD cell can contain almost anything such as tags that center, emphasize, and color text. A data cell can contain lists, images, and even nested tables (a cell containing a table). The list goes on. The closing TD tag (</TD>) is optional. Some people use it as good practice to close each table cell explicitly. If you have a table inside a cell (nested tables), then you should use the closing tag to close each cell and row as some browsers get nested tables wrong and will display them incorrectly. So use </TD> if you want, as in: <TD>9 A.M.</TD> <TD>12 P.M.</TD> but each new TD tag implies that the previous one has ended. 6. You begin each row with a <TR> tag. TR stands for Table Row. Tables are always constructed as sequences of rows. Thus <TR> 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 (</TR>) 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 <H3 ALIGN="CENTER"> 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 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: <TABLE BORDER="1"> After you have saved the change, load the web page into your browser. 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 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 9 A.M. 12 P.M. 2 P.M. NURSERY John Mary Marcia SECURITY Kimberly George Ken TICKETS Jacob Nancy Adam The default value for BORDER is 1. Therefore <TABLE BORDER> 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 "&nbsp;" and was studied in Lesson Five. Let's do this now. Go back to our HTML document in NOTEPAD and change the first <TD> tag that creates the empty cell to: <TD>&nbsp; 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 9 A.M. 12 P.M. 2 P.M. NURSERY 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"): <TABLE BORDER="1" CELLSPACING="5"> The quotation marks around the value "5" are also optional. Now when you load this document into your browser, 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 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: <TABLE BORDER="1" CELLSPACING="2" CELLPADDING="5"> and this is what you should see:

VOLUNTEER SCHEDULE 9 A.M. NURSERY SECURITY TICKETS John 12 P.M. 2 P.M. Mary Marcia Ken Adam

Kimberly George Jacob Nancy

Problem 1: What do you think is the effect of adding the CELLPADDING attribute to the TABLE tag? 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 (<TH>) 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 (<TH>) instead of the Table Data tag (<TD>). 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): <HTML> <HEAD> <TITLE>VOLUNTEER SCHEDULE</TITLE> </HEAD> <BODY> <H3 ALIGN="CENTER"> <TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3"> <CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION> <TR>

<TD>&nbsp; <TH>9 A.M. <TH>12 P.M. <TH>2 P.M. <TR> <TH>NURSERY <TD>John <TD>Mary <TD>Marcia <TR> <TH>SECURITY <TD>Kimberly <TD>George <TD>Ken <TR> <TH>TICKETS <TD>Jacob <TD>Nancy <TD>Adam </TABLE></H3> </BODY></HTML> This is what your table should now look like:

VOLUNTEER SCHEDULE 9 A.M. NURSERY John TICKETS Jacob 12 P.M. 2 P.M. Mary Nancy Marcia Adam

SECURITY Kimberly George Ken

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: <TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3" WIDTH="100%"> Now load the web page and this is what you should see:

VOLUNTEER SCHEDULE 9 A.M. NURSERY SECURITY TICKETS John Kimberly Jacob 12 P.M. Mary George Nancy Ken Adam 2 P.M. Marcia

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): <TD>John <TD>Mary <TD>Marcia <TR> to the following: <TD ALIGN="CENTER">John <TD ALIGN="LEFT">Mary <TD ALIGN="RIGHT">Marcia <TR ALIGN="CENTER">

Now save the web page and load it into your browser. This is what you should see:

VOLUNTEER SCHEDULE 9 A.M. NURSERY SECURITY TICKETS Jacob John Kimberly 12 P.M. Mary George Nancy Adam 2 P.M. Marcia Ken

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 <TR ALIGN="CENTER"> 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: <TD WIDTH="40%">&nbsp; <TH WIDTH="20%">9 A.M. <TH WIDTH="10%">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 SECURITY TICKETS Jacob John Kimberly 12 P.M. Mary George Nancy Adam Ken 2 P.M. Marcia

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 |

USING <BR>, SINGLE CELL TABLES, CELLS AS LINKS, CELL BACKGROUND COLORS
USING THE <BR> TAG and SINGLE CELL TABLES If a cell becomes too long in relation to the appearance of other cells, insert the <BR> 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, E-mail 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. <H3 ALIGN="CENTER"> <TABLE BORDER="3" CELLPADDING="3"> <TR> <TD ALIGN="CENTER">LESSON SIX<BR>Creating Page Links,<BR>Link Buttons, E-mail </TABLE></H3> 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 <BR> 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: <TD ALIGN="CENTER">LESSON SIX<BR>Creating Page Links,<BR>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".

| 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, E-mail | 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. NURSERY SECURITY TICKETS John Kimberly Jacob 12 P.M. Mary George Nancy 2 P.M. Marcia Ken Adam

| Click here to go to the answer section | | top | | bottom |

PLACING AN IMAGE IN A CELL

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: <H3 ALIGN="CENTER"> <TABLE BORDER="10" CELLPADDING="0" CELLSPACING="0"> <TR> <TD><A HREF="index.htm"><IMG SRC="cross1.gif" ALIGN="CENTER" ALT="cross" WIDTH="90" HEIGHT="120" BORDER="0"></A> </TABLE></H3> 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: <TD><IMG SRC="cross1.gif" ALIGN="CENTER" ALT="cross" WIDTH="90" HEIGHT="120" BORDER="0"> 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 |

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 (</A>) 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:

<TD ALIGN="CENTER"><A HREF="lesson6.htm">LESSON SIX<BR>Creating Page Links,<BR>Link Buttons, E-mail</A> 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: <TD ALIGN="CENTER" BGCOLOR="#FFFFCC"><A HREF="lesson6.htm">LESSON SIX<BR>Creating Page Links,<BR>Link Buttons, E-mail</A> 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: <H3 ALIGN="CENTER"> <TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3" WIDTH="100%"> <CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION> <TR BGCOLOR="#FFFFCC"> <TD>&nbsp; <TH>9 A.M. <TH>12 P.M. <TH>2 P.M. <TR ALIGN="CENTER"> <TH BGCOLOR="#FFFFCC">NURSERY <TD>John <TD>Mary <TD>Marcia <TR ALIGN="CENTER"> <TH BGCOLOR="#FFFFCC">SECURITY <TD>Kimberly <TD>George <TD>Ken <TR ALIGN="CENTER"> <TH BGCOLOR="#FFFFCC">TICKETS <TD>Jacob <TD>Nancy <TD>Adam </TABLE></H3>

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

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 |

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 <BR>, <P>, <HR> 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): <TABLE BORDER="3" CELLSPACING="3" CELLPADDING="3" WIDTH ="100%"> <TR> <TD ALIGN="CENTER" COLSPAN="4"><H3>&nbsp;<BR>CHOOSE ANY LESSON</H3> <TR>

<TD ALIGN="CENTER"><A HREF="lesson1.htm">LESSON ONE<BR>Introducing HTML</A> <TD ALIGN="CENTER"><A HREF="lesson2.htm">LESSON TWO<BR>Getting started</A> <TD ALIGN="CENTER"><A HREF="lesson3.htm">LESSON THREE<BR>&lt;BR&gt;, &lt;P&gt;, &lt;HR&gt;<BR> and other basic tags</A> <TD ALIGN="CENTER"><A HREF="lesson4.htm">LESSON FOUR<BR>Emphasizing text<BR> and Heading tag</A> </TABLE> The line that generated the first row that spanned across all four columns is: <TD ALIGN="CENTER" COLSPAN="4"><H3>&nbsp;<BR>CHOOSE ANY LESSON</H3> 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 <TR> tag to signify the beginning of this row. Recall that <TR> stands for Table Row. Each new row must be designated with a <TR> 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 <A> and </A>, and each HREF points to another file. 4. Note also the use of the <BR> 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 <BR>, <P>, and <HR> 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 <BR> 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 &lt;. The lt stands for "less than" The letters lt must be written in lower case as shown. The ampersand command for ">" is &gt; (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 with the TR tag as in: <TR ALIGN="CENTER">

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 Stainless Steel Cast Iron Brass Copper 50 74 300 300 Carbide 150 225 800 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. <HTML> <HEAD> <TITLE>METAL CUTTING SPEEDS</TITLE> </HEAD> <BODY> <TABLE BORDER="5" CELLSPACING="0" CELLPADDING="3"> <TR> <TH COLSPAN="3">METALS AND THEIR REASONABLE CUTTING SPEEDS <TR> <TH>MATERIAL <TH COLSPAN="2">Starting Speed<BR>in Feet per Minute <TR> <TH>&nbsp; <TH>High-Speed<BR>Steel <TH>Carbide <TR> <TD>Stainless Steel <TD ALIGN="CENTER">50 <TD ALIGN="CENTER">150 <TR> <TD>Cast Iron <TD ALIGN="CENTER">74 <TD ALIGN="CENTER">225 <TR>

<TD>Brass <TD ALIGN="CENTER">300 <TD ALIGN="CENTER">800 <TR> <TD>Copper <TD ALIGN="CENTER">300 <TD ALIGN="CENTER">1000 </TABLE> </BODY></HTML> Now for a discussion: 1. Note that I used <TH> instead of <TD> 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 <TR> 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 (&nbsp;) 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 Starting Speed in Feet per Minute High-Speed Steel 50 74 300 300 Carbide 150 225 800 1000

MATERIAL

Stainless Steel Cast Iron Brass Copper

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 <TH> tag for the "MATERIAL" cell. Here are the first few rows in the BODY of the document. I also added <BR>'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 <P> won't work and in some browsers using the <BR> tag this way will not work either. But it will look good in those browsers that do accept the <BR> to force blank or empty lines. <TABLE BORDER="5" CELLSPACING="0" CELLPADDING="3"> <TR> <TH COLSPAN="3"><BR>METALS AND THEIR REASONABLE CUTTING SPEEDS<BR><BR> <TR> <TH ROWSPAN="2">MATERIAL <TH COLSPAN="2">Starting Speed<BR>in Feet per Minute <TR> <TH>High-Speed<BR>Steel <TH>Carbide <TR> Note that "MATERIAL" spans row 2, column 1 and row 3, column 1. These two cells are now considered occupied. Thus the first <TH> 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:

DRILL SPEEDS DIAMETER CUTTING SPEED RPM IN INCHES Feet Metres 2.5 4.5 1 3.625 300 46 350 69 560 201 1200 167

MATERIALS 1. Brass 2. Cast iron 3. Copper 4. Stainless Steel

| 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 6 13 20 27 7 14 21 28 8 15 22 29 2 9 16 23 30 3 10 17 24 31 | Click here to go to the answer section | | top | | bottom | 4 11 18 25 5 12 19 26

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 Feel free to place anything on this side. This cell is 30% of the

This side just shows plain text. You can color it too if you want. This side is 70% of the width of the screen.

browser screen width.

Both sides are 600 pixels long. But you can change it to anything you want. Here is the BODY of the HTML document that gives this table. A brief explanation is given to the left.

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.

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10" WIDTH="100%" HEIGHT="600"> <TR VALIGN="TOP"> <TD WIDTH="30%" BGCOLOR="#FFFF00">This side is colored yellow <P>Feel free to place anything on this side. <P>This cell is 30% of the browser screen width. <TD WIDTH="70%">This side just shows plain text. <P>You can color it too if you want. <P>This side is 70% of the width of the screen. <P>Both sides are 600 pixels long. <P>But you can change it to anything you want. </TABLE>

Now if you do not want a border, just remove the TABLE attributes BORDER and CELLSPACING so the TABLE tag becomes: <TABLE CELLPADDING="10" WIDTH="100%" HEIGHT="600"> Here is what you should see:

This side is colored yellow Feel free to place anything on this side. This cell is 30% of the browser screen width.

This side just shows plain text. 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. Here is the BODY of the HTML document that gives this table. A brief explanation is given to the left.

Note that the HEIGHT is

<TABLE CELLPADDING="10" WIDTH="100%"

in pixels (600) and not as a percent. VALIGN="TOP" (Verticle ALIGN) aligns the text with the top of the cell.

HEIGHT="600"> <TR VALIGN="TOP"> <TD WIDTH="30%" BGCOLOR="#FFFF00">This side is colored yellow <P>Feel free to place anything on this side. <P>This cell is 30% of the browser screen width. <TD WIDTH="70%">This side just shows plain text. <P>You can color it too if you want. <P>This side is 70% of the width of the screen. <P>Both sides are 600 pixels long. <P>But you can change it to anything you want. </TABLE>

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.

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 right side of the cell.

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.

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. <TABLE CELLPADDING="10" WIDTH="100%" HEIGHT="600"> <TR VALIGN="TOP"> <TD WIDTH="30%"><IMG SRC="linevert.gif" ALIGN="RIGHT" HEIGHT="600"

WIDTH="2" ALT="">Feel free to place anything on this side. <P>This cell is 30% of the browser screen width. <P>The vertical line is really an <STRONG>image</STRONG> placed in this cell and aligned to the right side of the cell.<BR> <TD WIDTH="70%">This is the right side of the table. <P> I could have placed the vertical line (the image) in this cell by aligning it to the left side of the cell. <P> This line is 600 pixels in height (the same length as the table) and 2 pixels wide. </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 |

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: <TABLE BORDER="5" CELLSPACING="0" CELLPADDING="3"> <TR> <TH COLSPAN="6"><BR>DRILL SPEEDS<BR><BR> <TR> <TH ROWSPAN="2">&nbsp; <TH ROWSPAN="2">MATERIALS <TH ROWSPAN="2">DIAMETER<BR>IN INCHES <TH COLSPAN="2">CUTTING SPEED <TH ROWSPAN="2">RPM <TR> <TH>Feet <TH>Metres <TR>

<TD>1. <TD>Brass <TD ALIGN="CENTER">2.5 <TD ALIGN="CENTER">350 <TD>&nbsp; <TD>560 <TR> <TD>2. <TD>Cast iron <TD ALIGN="CENTER">4.5 <TD>&nbsp; <TD ALIGN="CENTER">69 <TD ALIGN="CENTER">201 <TR> <TD>3. <TD>Copper <TD ALIGN="CENTER">1 <TD ALIGN="CENTER">300 <TD>&nbsp; <TD ALIGN="CENTER">1200 <TR> <TD>4. <TD>Stainless Steel <TD ALIGN="CENTER">3.625 <TD>&nbsp; <TD ALIGN="CENTER">46 <TD ALIGN="CENTER">167 </TABLE> 1. The <TR> 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 <TR> 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 <TR> 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 <TD> will automatically place "Feet" 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 (&nbsp;) in it. Feel free to experiment with different designs of calendars. Here is the BODY of the HTML document that gives this calendar: <H3 ALIGN="CENTER"> <P><TABLE BORDER="3" CELLSPACING="3" CELLPADDING="3"> <TR> <TH COLSPAN="7">JULY <TR> <TH>Sun <TH>Mon <TH>Tue <TH>Wed <TH>Thu <TH>Fri <TH>Sat <TR ALIGN="CENTER"> <TD COLSPAN="2">&nbsp; <TD>1 <TD>2 <TD>3 <TD>4 <TD>5 <TR ALIGN="CENTER"> <TD>6 <TD>7 <TD>8 <TD>9 <TD>10 <TD>11 <TD>12 <TR ALIGN="CENTER"> <TD>13 <TD>14 <TD>15 <TD>16 <TD>17 <TD>18

<TD>19 <TR ALIGN="CENTER"> <TD>20 <TD>21 <TD>22 <TD>23 <TD>24 <TD>25 <TD>26 <TR ALIGN="CENTER"> <TD>27 <TD>28 <TD>29 <TD>30 <TD>31 <TD COLSPAN="2">&nbsp; </TABLE></H3>

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 all 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) (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: <HTML> <HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE> </HEAD> <FRAMESET ROWS="20%,80%"> <NOFRAMES>Sorry, but your browser does not support frames. <A HREF="Normal13.htm">Please click here to see this lesson without frames.</A></NOFRAMES> <FRAME SRC="frame1.htm" NORESIZE SCROLLING="NO"> <FRAME SRC="frame2.htm"> </FRAMESET> </HTML> Problem 1:What appears to be missing in these statements? | Click here to go to the answer section | Here is a discussion on these statements: 1. The FRAMESET element defines a set of frames that will make up the browser window. The ROWS attribute defines two frames to be set up in rows (as opposed to columns). The value of the ROWS attribute is "20%,80%". This value states that there are to be two rows of frames (one frame per row). The top frame is to have a "height" of 20% of the browser screen and the bottom frame to take up the remaining 80% space. In other words, I wanted a small frame at the top of the screen (to only display "LESSON THIRTEEN - FRAMES") and one larger frame below to display this lesson. Instead of using percentages, the ROWS attribute can also be expressed in pixels or as a relative size (*). As a relative size, it would be ROWS="20%,*". The "*" means whatever percent is left. 2. FRAMESET is a container element which means that everything contained between the opening and closing tags (<FRAMESET> and </FRAMESET>) is part of the frame setup. 3. The FRAMESET tag is used instead of the BODY tag. Your frames will not work if you include the BODY element (try it). 4. If for some reason, a viewer is using a browser or a technology that does not support frames, you need to consider having an alternate page just for those browsers. If a browser does not support frames, the message between the NOFRAMES tags will be displayed. If you do not include the NOFRAMES container element, these browsers will either give an error code or simply display a blank page. Note: you can include the BODY element inside the NOFRAMES tags.

5. The FRAME tag denotes what goes into the frame. The SRC attribute specifies the source file (or source document) for the frame. Since I only have two frames in this example, I only need two FRAME tags. Row frames are set up from top to bottom. In our example, the web page that goes into the top frame is called "frame1.htm" and the web page that goes into the bottom frame is called "frame2.htm". If for some reason you want a page somewhere in the WWW to go into a frame, be sure to include the complete URL of the web page. 6. For the top frame, I added two attributes to the FRAME tag: o The NORESIZE attribute to prevent the viewer from resizing the frame (try resizing the frame). Note that I did not use the NORESIZE attribute for the bottom frame so the viewer will be able to resize this frame (try it). o SCROLLING="NO" will prevent a scroll bar from being displayed. Note that there is no scroll bar in the "Lesson Thirteen" title frame. Other values are "YES" (put in a scroll bar) and "AUTO" (let the browser determine if a scroll bar is needed). Note in the second FRAME tag, I do not have a SCROLLING attribute and there is a scroll bar on the right side of the frame. In other words, if you do not specify a scroll bar, the browser will place one if needed. 7. Since each frame represents a web page, you can do whatever is allowed with web pages, such as inserting images, links to other web pages, etc. | top | | bottom |

LEAVING THE FRAMES PAGE

If you use links in a frames window, the web page that you are linking to will appear in the frame when the viewer clicks on the link. For example, if you click on the statement below, my alternate home page will load into this frame. Try it and when you have seen enough click on the BACK button to return to this page. Send me to the alternate home page The problem is you are still in the frames window. When you are ready to leave this web page to go on to the next lesson or to go back to one of my home pages, you also want to leave this frames page. In other words, you want the link to load the web page with no frames. To do this, simply add the TARGET attribute with the value "_top" to the URL. For example, to go to my alternate home page and at the same time eliminate the frames, it is: <A HREF="altern.htm" TARGET="_top"> Note the underline before the word "top". It must be there. The TARGET attribute targets the hypertext link to be its own web page. To see this, click on the following sentence and the alternate home page will be loaded with no frames. Again, click the BACK button to return here.

Send me to the alternate home page Problem 2: Suppose you want three rows of frames instead of two rows with the condition that the top frame is to be 20% in height, and the middle frame 30%. What is the FRAMESET tag for this situation? Problem 3: Repeat Problem 2 but with the condition that each frame is to occupy the same space on the screen (that is, each frame is take up one third of the screen). | Click here to go to the answer section | | top | | bottom |

FRAMES IN COLUMNS
Instead of having two (or more) rows of frames, suppose you want two (or more) columns of frames? For example, suppose you want the layout of frames to be: frame 1 frame 2 Well, all you need to do is replace the ROWS attribute with the COLS attribute and use whatever percentages required to suit your needs. For example, if you want the two frames to be equal in size, it would be: <FRAMESET COLS="50%,50%"> Columns frames are generated from left to right. So if you want the left frame to be 30% of the width of the screen, the FRAMESET tag would be: <FRAMESET COLS="30%,70%"> | top | | bottom |

ROW AND COLUMN FRAMES MIXED TOGETHER

Suppose you want the browser screen configuration to look approximately like the following: frame 1 frame 3 frame 4

frame 2 frame 5 Having this many frames can be quite messy as the browser screen is only so big. However, this is a learning experience and you can adapt these thoughts to your particular needs. To see this configuration in action, just click here and then click the BACK button to return here.

Here is the complete HTML document to accomplish this. We will leave out the NOFRAMES, NORESIZE and SCROLLING attributes. You can of course include them in your own applications - especially the NOFRAMES attribute. I have also numbered the lines for discussion purposes. Line1: <HTML><HEAD><TITLE>WEB PAGE DESIGN FRAMES</TITLE></HEAD> Line2: Line3: Line4: Line5: Line6: Line7: Line8: Line9: Line10: Line11: <FRAMESET COLS="50%,50%"> <FRAMESET ROWS="75%,25%"> <FRAME SRC="Lesson1.htm"> <FRAME SRC="Lesson2.htm"> </FRAMESET> <FRAMESET ROWS="33%,33%,33%"> <FRAME SRC="Lesson3.htm"> <FRAME SRC="Lesson4.htm"> <FRAME SRC="Lesson5.htm"> </FRAMESET>

Line12: </FRAMESET> Line13: </HTML> Discussion: 1. Note that there is no BODY tag. Remember that the FRAMESET tag takes the place of the BODY tag. 2. Since this configuration of frames consists of 2 equally sized columns of frames, we will first set up the two columns of frames (line 2) with each column one half or 50% of the screen width. We then divide each column into row frames beginning with the left column. 3. Now in the left column, we want two rows - that is, two frames. Lines 3 to 6 take care of this. As indicated, the top frame is to take up 75% of the column and the lower frame is to take up the remaining 25% (line 3). 4. Line 4 places my Lesson One in the top left frame and line 5 places Lesson Two in the lower left frame. This completes the first column of frames. That is, we are finished setting up the two rows of frames in the first column as indicated in line 6. 5. We are now in the second column of frames. Line 7 sets up three frames to go into this column, with each frame being 33% (or one-third of the column). Although 33%+33%+33% only adds to 99%, we learned earlier in this lesson that the browser will take the remaining 1% and distribute it over these three sizes. 6. We now need to place web pages into these three frames and they will be placed going from top to bottom. Thus Lesson Three will be placed in the top frame (line 8), Lesson Four in the middle frame (line 9) and Lesson Five in the bottom frame (line 10). This completes the three rows in this second column of frames.

7. Line 11 closes these three rows of frames. 8. We are now finished with setting up the two columns and line 12 ends setting up the two columns of frames that were opened in line 2. Remember that we need an ending tag for each opening tag and that the tags cannot overlap. 9. To make any particular frame active, just click inside that frame. For example, if you want to print out the contents of frame 2, then click somewhere in frame 2 and then choose PRINT from the menu. Problem 4: Make up the web page that will produce the following configuration of frames. Make up your own filenames and use 50% for all values. frame 1 frame 2 frame 3

To see this configuration in action, click here and when you are finished observing the situation, click the BACK button to return here. | Click here to go to the answer section | Problem 5: Make up the web page that will set up the following configuration of frames. Again make up your own filenames and use 50% for all values. frame 1 frame 2 frame 3 To see this configuration in action, click here and when you are finished observing the situation, click the BACK button to return here. | Click here to go to the answer section | | top | | bottom |

SENDING INFORMATION FROM ONE FRAME TO ANOTHER

It is not uncommon to see two frames on the screen at the same time - a smaller frame on the left containing mainly links and a larger frame on the right to display the information when a link is chosen. To see this configuration at work, click here and when you are finished testing the situation, click the BACK button to return here (you may have to click it a few times depending on the amount of testing). In this example, the configuration is two columns as in: frame A frame B

In order for the browser to send a document to another frame, you first need to name the frames. Lets name the frame on the left "A" and the one on the right "B". The complete HTML document that generated the frames and names is: <HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE></HEAD> <FRAMESET COLS="25%,75%"> <FRAME SRC="links.htm" NAME="A"> <FRAME SRC="showlink.htm" NAME="B"> </FRAMESET> </HTML> Note that the NAME attribute names the frames. Here is the document "links.htm": <HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE></HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> <P>This is frame A. In this frame you see links. If you click on any link, that is, on any lesson, that lesson will appear in frame B. Go ahead, choose a lesson. <P><A HREF="lesson1.htm" TARGET="B">Lesson One</A> <P><A HREF="lesson2.htm" TARGET="B">Lesson Two</A> <P><A HREF="lesson3.htm" TARGET="B">Lesson Three</A> <P><A HREF="lesson4.htm" TARGET="B">Lesson Four</A> </BODY></HTML> Note that the TARGET attribute points to the frame named "B" as the target to receive any lesson clicked on. Here is "showlink.htm": <HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE></HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> This is frame B and will display the links from frame A. </BODY></HTML> Note that the above example will also work for any number of frames. If you need three frames, just name them A, B and C. | top | | bottom |

SUMMARY OF FRAMESET AND FRAME ATTRIBUTES

We used two container elements (FRAMESET and FRAME) and each have their own attributes. We already studied a number of them but there are also other attributes. FRAMESET ATTRIBUTES 1. BORDER=" " specifies the width in pixels of the border drawn around the frames. 2. COLS=" " creates the frames as columns. The width of each column may be specified as a percent (%), in pixels, or in relative size (*). 3. FRAMEBORDER=" " specifies whether or not a 3-D border is displayed around the frames. Possible values are 0 for no frame, or 1 which is the default value. (Internet Explorer only) 4. FRAMESPACING=" " specifies the amount of space between the frames in pixels. 5. ROWS=" " creates the frames as rows. The height of each row may be specified as a percent, in pixels, or in relative size. 6. SCROLLING=" " to determine whether or not scroll bars are to be displayed on all the frames. Values are either "yes", "no" or "auto". FRAME ATTRIBUTES 1. BORDER=" " specifies the width in pixels of the border drawn around the frame. 2. FRAMEBORDER=" " specifies whether or not a 3-D border is displayed around the frame. Possible values are 0 for no frame, or 1 which is the default value. (Internet Explorer only) 3. MARGINHEIGHT=" " specifies the top and bottom margins of the frame in pixels 4. MARGINWIDTH=" " specifies the left and right margins of the frame in pixels 5. NORESIZE prevents the frame from being resized by the viewer 6. SCROLLING=" " determines whether or not scroll bars are to be displayed along the frame. Values are either "yes", "no" or "auto". 7. SRC=" " specifies the source document to be placed in the frame. Also, don't forget the following two points: 1. <NOFRAMES> and </NOFRAMES> tags to be placed inside the FRAMESET tags. Anything placed between the NOFRAMES tags is printed only by browsers not supporting frames. 2. TARGET="_top" is to be used as part of the URL of a link to ensure that the frames page is properly exited. For example, <A HREF="http://www.html/index.htm" TARGET="_top"> allows the browser to exit the frames screen and load the web page called "index.htm". Without the TARGET attribute, "index.htm" will be loaded into the current frame. | top | | bottom |

ANSWERS
1. The BODY tags are missing. This is because the FRAMESET tag replaces the BODY tag. If you put in a BODY tag, the frames won't work. You will receive exactly the same error message or blank page that a browser not supporting frames displays. 2. If the first frame takes up 20% of the screen and the second frame takes up 30%, then the third frame must take up 100%-20%-30% = 50%. Therefore the FRAMESET tag is: <FRAMESET ROWS="20%,30%,50%"> Now if you do not want to do the arithmetic, then use relative size (*) and let the browser do the calculating as in: <FRAMESET ROWS="20%,30%,*"> 3. 1/3 of 100% means that each frame is to take up 33 1/3% space. However, browsers will allow the percents to add to 99 as well as to 100. For example, one solution to the problem is: <FRAMESET ROWS="33%,33%,33%"> This only adds to 99%. What the browser then does is take the remaining one percent and distributes it over the three sizes. 4. In this solution, we first set up two columns, and then split the second column into two frames. Here is the complete HTML document: <HTML><HEAD><TITLE>WEB PAGE DESIGN FRAMES</TITLE></HEAD> <FRAMESET COLS="50%,50%"> <FRAME SRC="webpage1.htm"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="webpage2.htm"> <FRAME SRC="webpage3.htm"> </FRAMESET> </FRAMESET> </HTML> where "webpage1.htm" represents the complete URL of the page to be loaded into frame 1. Similarly "webpage2.htm" will be loaded into frame 2 and "webpage3.htm" into frame 3.

5. This answer is similar to the answer to Problem 4. In Problem 4, we first set up two column frames and then split the second column into two row frames. In this answer, we first set up two row frames and then split the second row into two column frames. Here is the HTML document that solves this problem: <HTML><HEAD><TITLE>WEB PAGE DESIGN FRAMES</TITLE></HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="webpage1.htm"> <FRAMESET COLS="50%,50%"> <FRAME SRC="webpage2.htm"> <FRAME SRC="webpage3.htm"> </FRAMESET> </FRAMESET> </HTML> LESSON FOURTEEN - TRANSPARENT IMAGES

INTRODUCING TRANSPARENT IMAGES

Here is Smiley without a transparent background: Here is Smiley with a transparent background: Often an image will look better with a transparent background. A transparent background simply means that you cannot see the background color of the image in your browser. There is a background color but it isn't visible on the web page. In actual fact, the background color of the web page (no matter what color it is) simply replaces the background color of the image. You can make any color in the image transparent, but most often it is the background color. You can only designate one color as being transparent. An image with a transparent color is called a Transparent Image or a Transparent GIF. It has to be a GIF image. The image does not have to be a GIF image to begin with, but it has to be saved as a GIF image. If you want to designate the background color as being transparent, then the background of the image must be a single color, not a combination of colors since only one color in the image's color map can be designated as transparent. The background color should not be used anywhere else in the image because it too would become transparent thus possibly distorting the image.

If you find that another part of the image also seems to disappear on the web page, it could be because one of the colors in the image is also the same color as the background color of the web page. For this reason, it is recommended that you control the background color of your web page with the BGCOLOR attribute. This will override any default background color in a visitor's web page and so ensure the results you want. SOME POINTS TO REMEMBER WITH TRANSPARENT IMAGES: 1. The image background should be a single color. 2. The color designated for the background should not be used elsewhere in the image or used extensively elsewhere in the image. 3. Not all GIF images have solid or smooth colored backgrounds. You may have to load the image into a program such as Paint Shop Pro to change the background into one solid color before making the background transparent. 4. Photographs do not work well as transparent images since it is hard to define a single color.

In order to make a color transparent, you need a program that will do it for you. Examples are Paint Shop Pro for Windows, and Photoshop for Windows and Macs. I like Paint Shop Pro because it is easy to use and it is also a great image editor. The owners of Paint Shop Pro have made a significant effort to include a host of photo tools. It states on their website that "Paint Shop Pro is filled with one-of-a-kind photo tools sure to please even the most discerning photographer, Corel Paint Shop Pro Photo is the ideal choice for people who want extraordinary photos. With a built-in Learning Center to help first time users get started, it's the easiest way to get professional-looking photos - fast!" Paint Shop Pro is reasonably priced and you get a lot for the money. What I like about the makers of Paint Shop Pro is that on their website is a learning center containing over 100 short tutorials on the power of Paint Shop Pro. For example, if you have a digital camera and are into digital photography, or like working with scanned photographs or portraits, there are over 60 easy to follow digital photography tutorials. These tutorials cover every conceivable adjustment to a photograph using Paint Shop Pro. There are also many Web Design Tutorials and Art Resource Tutorials - all designed for Paint Shop Pro. However, Photoshop is also another very popular image editor that many people use. I will be illustrating transparent images using Paint Shop Pro which was developed and owned by a company name Jasc Software Inc. Jasc was acquired by the Corel Corporation in 2004. Corel must have liked what Jasc was doing because now they own the company. Photoshop, another great product, is owned by Adobe. If you do not have Corel Paint Shop Pro or Adobe Photoshop, you can download a fully functional copy for 30 days after which a decision to purchase must be made. The current version of Paint Shop Pro is named Corel Paint Shop Pro Photo X2 (version 12) which is

the version used in these lessons. In these lessons, we will simply refer to Corel Paint Shop Pro Photo X2 as Paint Shop Pro. If you do not have a paint program, you can download one by clicking on the appropriate link:

Paint Shop Pro Photoshop

| top | | bottom |

CREATING A TRANSPARENT COLOR USING PAINT SHOP PRO

If you still need to acquire Paint Shop Pro, please go to the end of the above section for the download link. If you do not have an image to work on, just save Smiley at the top of the page with the red background. To do this, click on Smiley with the right mouse button and then from the pop-up menu, choose Save Image As, or Save Picture As (one of these choices or a similar choice should be there). You can then choose a folder and save the image. Note that the image is named smile.gif. Now Open Paint Shop Pro. When you do this, the main program window appears. This window is your work area. It contains the commands and tools you need to create, edit, print and export your images. We will deal with these items as we get to them in the lessons. Note that the workspace theme you are seeing is called the Graphite Workspace Theme. It is the default theme. If you click on the View menu at the top of the Paint Shop Pro screen, you will see a checkmark beside Use Graphite Workspace Theme indicating that this is the active theme. If you would rather work in the classic Paint Shop Pro workspace theme used in previous versions, just choose View --> Use Graphite Workspace Theme. This will disable this graphic workspace theme and display the classic theme. This will also remove the checkmark beside Use Graphite Workspace Theme indicating that it is no longer active. To go back to the graphite workspace theme, just choose this menu item again. After you have opened Paint Shop Pro and decided on the display theme, load the image that you want to create a transparent color for. You can do that in two ways: 1. Choose Open from the File menu (File --> Open). This will display the Open dialog window. Browse to the folder containing the image such as smile.gif. Click on the image name and then click on Open. The image should now appear in the working window. 2. Near the bottom of the screen, just below the main working window, is the Organizer window. It shows some of your folder structure. Double click on the option named folders. This will bring up some more folders. If you do not see your

folder then click on the Browse More Folders option. This will display the Browse For Folder dialog window. Browse to the folder containing the image. To choose this folder containing the image, just click once on its name and then click OK. Your image should now appear in the folder display window to the right of the Organizer window. To copy your image to the main working window, just drag the image to the window. That is, click and hold down the left mouse button over the image and while holding down the left mouse button, drag the image to the working folder. Release the left mouse button and the image is placed. Note that the picture of the image is still in the folder display window so we have not removed it from its folder.. To illustrate changing a color into a transparent color, I will use Smiley as the example. Here are the steps: 1. With Smiley displayed in Paint Shop Pro, choose Save As from the File menu. This will display the Save As dialog window. 2. In the Save as type box, make sure it reads GIF Graphics Interchange Format (*.gif) as we are saving a GIF image. If it does not say this, click into the box and choose this GIF file type. If you choose to save the image as a jpeg image, you will not be able to choose a transparent color. 3. Now click on the Options button located below the Help button. This will display the Save Options dialog window which is:

4. In the Version section, make sure that Version 89a is selected. This GIF format was standardized in 1989. There was a list of format standards and transparency was the first part of the list - thus the "a" part. GIF89a supports animation as well as single color transparency. 87a is the earlier version of the GIF format and does not support transparency or animation. 89a adds support for transparency and animation and is the more recent version of the GIF format. For more information on these formats, just click on the Help button located under the Cancel button. 5. In the Interlacing section, an interlaced image loads on a web page first as a low resolution image, then slowly becomes clearer. This is also known as the Venetian Blind load effect. An interlaced image allows viewers to get an idea of what the image looks like before it is finished loading. Only GIF images can be interlaced. Often interlaced images are used in displaying larger images that take a little

longer to completely display - but not for displaying a background image. Thus if you have a larger image, you may want to choose interlaced. Non-interlaced means that we do not want the Venetian Blind load effect. Non-interlaced images are best for small images because small images load quickly. So in the Interlacing section, select Noninterlaced. Smiley is a small image and so there is no need to display it interlaced. 6. Now click on the Run Optimizer button. This will display the GIF Optimizer dialog window which looks like:

Note that this window contains four tabbed pages where you control the transparency, the color, and the format options. The fifth tab displays estimated download times of the image at various modem speeds and is for your information

only. You can also use this tab to decide if there needs to be any further compression. 7. In the first tab, the Transparency tab, (which is the one being displayed in the above image), there are a number of choices. Note that you can choose to save your image as a GIF file without a transparency. In this case, you would choose the None option. Note also that the color red is displayed in the rectangle beside Areas that match this color. Make sure that the radio button beside this option is selected as we want to make this color transparent. Here is how you choose the color that you want displayed in the box. That is, here is how to choose the transparent color. 8. When you move the cursor over the original Smiley image (smile.gif) in the main working window, it turns into an eye-dropper. Click the eye-dropper on a color and that color is immediately transferred to the box beside the words Areas that match this color. This color will then be the transparent color. At the top of the GIF Optimizer dialog window are two large Preview windows. The preview window on the left displays the current image and the preview window on the right displays the resulting image with the transparency added. Now click somewhere on the color red in the smile.gif image in the main working window, and you will see the color red immediately displayed in the box beside Areas that match this color. Note also that the color red in the resulting preview window has been replaced with a light colored checker board background. The checker board background will not be displayed in a browser. The checker board indicates the parts of the image that are transparent. 9. In the GIF Optimizer dialog window leave the Tolerance setting at 1. However, you can change this setting to a tolerance factor that indicates how closely colors much match the selected color before they become transparent. At lower settings, only pixels of very similar colors also become transparent while at higher settings, more pixels become transparent. 10. All the other settings can also be left as is. Note: Click on Use Wizard if you would like to use the Wizard to guide you through the steps in making the red background transparent. You should take some time to click on each of the other four tabs to see these other pages. If you want to learn more about what is involved in these pages, click on the Help button at the bottom of the GIF Optimizer window. The Paint Shop Pro Help window is very good and gives a good understanding of the various options in these tabbed pages. 11. When ready to proceed, click on OK and the Save Copy As dialog window is displayed. 12. If you want to change the folder, you can now browse to the folder where you want to save the new image. 13. In the File name box, give the transparent image a new name if you want to preserve the original image. Otherwise you will be replacing the original image with the transparent image. 14. Click on Save and the image is saved with the transparent color. If you save the transparent image in the same folder as the original image and choose a different name for the image, you will now see two images in the Organizer window -- the original image and the transparent image. You will also note that the transparent

image now shows a black background. This black background indicates the transparent part. 15. To see your image with the transparent background, simply load it into your browser or try it out on a web page. | top | | bottom |

SCREEN CAPTURES USING PAINT SHOP PRO

Paint Shop Pro's Screen Capture function takes a picture of all or part of the screen and opens it in Paint Shop Pro. These pictures, called screen captures, can be a part of a screen or of the entire screen. You can capture an active window, or part of the contents of an active window. You can also capture the controls of a program, such as a toolbar. For this lesson, I captured parts of Paint Shop Pro, saved them as GIF images, and placed them where I needed them in the lesson. After you select your preferences for screen captures, you can then make screen captures while working in another program. So before we can use the Screen Capture function, we need to select the type and method of capture in the Capture Setup dialog box. You can then make a capture immediately or activate it later as needed. To setup the screen capture, here are the steps: 1. Choose File -->Import --> Screen Capture --> Setup. This will display the Capture Setup dialog window which looks like (this picture was created with a screen capture):

2. In the Capture section we select the type of capture. o Area - lets you control the size of the capture area. o Full screen - lets you capture the entire screen. o Client area - lets you capture the workspace of the active window. o Window - lets you capture the entire active window. o Object - lets you capture a feature or group of features.

The Area option gives the most flexibility so leave this choice selected. 3. In the Activate capture using section, you need to select a method to use to activate a screen capture. The choices are: o Right mouse click o Hot key o Delay timer Most people will choose either Right mouse click or Hot key to activate the screen capture. Choose Hot key. 4. You now have to indicate which Hot key you want to use. The choice that is displayed is F10. If you click into this box, you will see that there are a lot of choices. Let's choose the F11 option. Thus our Hot key will be F11. This is what you should now have:

5. In the Options section you can include the cursor in the capture and also include multiple captures. Note: You cannot include the cursor in an Area type capture. 6. You can now activate the screen capture function from this dialog window by clicking on the Capture now button or close the dialog window without activating the function by clicking on the OK button. Note that you can again receive more information on all these options by clicking on the Help button. We will not do a capture at this time, so click on OK. MAKING A SCREEN CAPTURE Here are the steps to create a screen capture: 1. First, open Paint Shop Pro. 2. Now Open the application program from which you need to capture something whether you want to capture a full screen or just part of a screen.

3. Next, switch back to Paint Shop Pro. To initiate the capture, choose File -->Import --> Screen Capture --> Start. When you do this, you will be immediately switched back to the application program you want to capture from (the one you opened in step 2). 4. Press F11, our Hot Key setup. The mouse pointer turns into a cross-hair. If you chose Right mouse click to activate screen capture, then you need to right-click instead of pressing the F11 key. 5. Now click once with the left mouse button at the point you want to begin the capture. That is, move the cursor to where you want to create a corner of the screen capture and click with your left mouse button. This action starts the actual screen capture. 6. Next, drag out the area you want to capture. That is, move the cross-hair cursor to create a rectangular outline of the capture area. Note that the pixel size of your image increases as you drag out the area. 7. When you have finished dragging out the area to be captured, click again with the left mouse button. That is, left-click the mouse to end the screen capture. As soon as you do this, the screen captured image will be displayed in Paint Shop Pro. 8. You can now save the image by choosing Save As from the File menu and following the procedures described in the above section on saving an image. The name assigned by Paint Shop Pro will appear in the File name box and will have the extension .pspimage indicating that the file type is a Paint Shop Pro image. You can change the file type to another format such as GIF by clicking into the Save as type box and choosing GIF Graphics Interchange Format (*.gif). You can also change the image name or use the one assigned by Paint Shop Pro. There is also a very good Help section on Screen Captures. To see this Help section, just choose File -->Import --> Screen Capture --> Setup to display the Capture Setup dialog window, and then click on the Help button located beside the Cancel button.

LESSON FIFTEEN

You may read the following sections in their entirety or use these choices to go directly to a section. | Introducing animation | | Getting started | | Our first animated GIF image | | Creating the animation using GIF Construction Set | | Our second animated GIF image | | How the PJCVS MATH animated GIF was created | | Creating LED signs, banners, and special-effect images |

INTRODUCING ANIMATION

An animated gif is a multiple-image GIF file. An animated gif is a series of GIF images placed one after the other in an infinite loop giving the appearance of fluid motion. This is somewhat similar to a flip book of pictures in which flipping the pages quickly makes the little pictures appear to move. What you really have is a bunch of still pictures moving by quickly and your eyes see it as movement. You can set the speed of movement of your animated gif image, however, the speed at which the image actually moves can vary from browser to browser. There are many websites on the WWW where you can find animated gifs. Just go to your favorite search engine and do a search for sites offering animated gifs. Visit these sites to either download some animated gifs (check if you need permission) or to gather ideas on making your own. We will make two animated gifs so that you will have a good understanding of the process involved. | top | | bottom |

GETTING STARTED
To make your own animated gif, you need two things: 1. A paint program to make your series of images such as Corel Paint Shop Pro Photo X2 or Adobe Photoshop, and 2. A program such as GIF Construction Set Professional from Alchemy Mindworks to put all the images into animation (to create the actual animation). Paint Shop Pro used to include Animation Shop to create animations but as of Paint Shop Pro X (Paint Shop Pro 10), Animation Shop is no longer part of Paint Shop Pro. In this lesson we will use Corel Paint Shop Pro Photo X2 (version 12) to make these GIF images but any paint program can be used to create them. We will then use GIF Construction Set Professional to put all the individual images into animation and have them saved in one animated gif file. It states on the Alchemy Mindworks website that "GIF Construction Set Professional represents the state of the art in GIF animation software. It will assemble your original animations effortlessly through its Animation Wizard, squeeze them down to as close to nothing as possible with its Supercompressor; create eye-catching banners and animated transitions; manage your GIF files; add transparency to existing graphics and a lot more." So, if you do not have these programs, now is the time to get them. In this lesson, you will need Corel Paint Shop Pro Photo X2 and GIF Construction Set Professional. Each can be

downloaded as a fully functional copy to try out free for 30 days, after which a decision to purchase must be made. The current version of Paint Shop Pro is named Corel Paint Shop Pro Photo X2 (version 12) which is the version used in these lessons. In these lessons, we will simply refer to Corel Paint Shop Pro Photo X2 as Paint Shop Pro. To download, click on the appropriate link:

Paint Shop Pro Photoshop GIF Construction Set

| top | | bottom |

OUR FIRST ANIMATED GIF

For our first example, we will construct the animation of the word ANIMATION that you see at the beginning of this lesson. Note that this animation begins with the word ANIMATION, and then one letter at a time is removed. Once all the letters have been removed, they begin to appear again, one letter at a time, until the word ANIMATION is complete again. Each change represents a new image. This sequence of images is then repeated over and over until you click on the Stop button (clicking on the Stop button will stop all the animations in most browsers). Here is the way the images appear - one after the other in this order: ANIMATION ANIMATIO ANIMATI ANIMAT ANIMA ANIM ANI AN A blank image goes here (no letters) A AN ANI ANIM ANIMA ANIMAT ANIMATI ANIMATIO (go back to the beginning and repeat - we are in a "loop")

Problem 1: Seems like a lot of images. How many distinct images are there in this example? Problem 2: How many images are actually displayed before looping takes place? | Click here to go to the answer section | CREATING OUR IMAGES Here are the steps to create the above animation using Paint Shop Pro: 1. Open Paint Shop Pro. 2. If the Learning Center palette is visible down the left side of the screen, then it needs to be closed. This will increase the working space. There are several ways to do this and they are: o Click on the palette's Close button which is the small X located on the palette's Title bar to the right of the title "Learning Center". o Click on the Help menu and then choose Learning Center to deselect it. In other words, choose Help --> Learning Center. The Learning Center should no longer be visible. If you want to bring the Learning Center back into view again, choose Help --> Learning Center and it will reappear. o You can also make the Learning Center appear and disappear by choosing View --> Palettes --> Learning Center. o Finally, in the Standard toolbar is a choice named Palettes. Click on the name Palettes and one of the choices in the drop down menu is Learning Center. So you can also use this method to make the Learning Center appear and disappear. 3. We will also close the Organizer window which will even give us more room. This window is located below the main working window. Here are two ways to do this: o Click on the Organizer's Close button which is the small X located on the far left of the Organizer's Title bar. o Choose View --> Palettes --> Organizer to remove the checkmark. This will make the Organizer palette disappear. To make it appear again, just choose this menu item again. 4. We will now make sure that the Tools toolbar, the Tool Options palette, and the Materials palette (called the Color Palette in previous versions of Paint Shop Pro) are in view (displayed in the main program window). The Tools toolbar is used to crop, paint, draw, add text as well as a host of other image editing tasks. When a tool is selected from the Tools toolbar, there are often options associated with the selection. The Tool Options palette contains these options. Two examples of options are setting the size of the line width for the drawing tools and setting the brush size and shape for the painting tools. The Materials palette sets the colors and materials for painting, drawing, retouching, filling, etc. Here is how to bring the Tools toolbar, the Tool Options palette and the Materials palette into view:

5. 6.

7.

8. 9.

Choose View from the Menu bar and then choose Toolbars to view the Toolbars drop down menu. That is, choose View --> Toolbars. There are a number of Toolbar options and those that are currently chosen are highlighted with a checkmark beside them. If there is no checkmark beside the word Tools, then it means that the Tools toolbar is not currently in view. If this is the case, then click on Tools to bring the Tools toolbar into view. Now if you again choose View --> Toolbars you will see a checkmark beside the word Tools. The Tools toolbar is usually placed vertically on the left side of the Paint Shop Pro main program window. Note: At this time every tool in the Tools toolbar is grayed out meaning that they are inactive. In other words you can't use any of them. This is because we do not have anything such as an image or object to work on yet. o To display the Tool Options palette, choose View --> Palettes. From the Palettes drop down menu, chose Tool Options if it does not have a checkmark beside it. The default position of the Tool Options palette is underneath the Standard toolbar. Note that every tool in the Tool Options palette is also grayed out since we do not have an image or object to work on yet. o To display the Materials palette, again choose View --> Palettes. From the Palettes drop down menu, chose Materials if it does not have a checkmark beside it. The default position of the Materials palette is at the right side of the main window. You may have noticed that the Materials Palette actually appeared when you closed the Learning Center. We will now create our first image. Choose File from the menu bar, and then choose New (or simply click on the New button in the Standard toolbar). This will display the New Image dialog window. You are now asked for some information about the new image such as the size of the image you want to create. Enter 200 for the Width and enter 50 for the Height. These numbers represent the width and height in pixels so make sure that the dimensions are in Pixels. This size is bigger than what we need which is okay as we will resize the image later. The resolution can be left at 200 pixels per inch. In the Image Characteristics section, ensure that the Color (meaning background color) is White. Everything else can be left as is (Raster Background selected, Color depth RGB at 8 bits/channel, and Transparent not selected). Click on OK. Note: Computer graphics are of two types: raster and vector. As it states in the Paint Shop Pro User Guide, raster images (also called bitmap images) are composed of individual elements called pixels. Thus an object in a raster image is defined by its pixels and to edit the object you edit the pixels. Vector images use geometric characteristics to define its objects. Examples of geometric characteristics are lines and curves and their locations to define objects. Thus with vector images you edit objects or shapes rather than pixels. You should now have a new image named Image1 with nothing in it (except for a white background). Just ignore the name for now. In the Materials palette (see picture below), there is the big color panel showing the available colors and is called the Available Colors panel. Beside the Available Colors panel are two rectangular boxes. The top one is called the Foreground and
o

Stroke Properties box and the one underneath it and a little to the right is called the Background and Fill Properties box. Now if you rest your mouse cursor over the Foreground and Stroke Properties box, the cursor turns into an eye dropper and the words Foreground and Stroke Properties will pop up in a text box along with the current color and texture information. Rest your cursor over the Background and Fill Properties box and the words Background and Fill Properties will pop up along with the current color and texture information. This box should be white as we chose white for the background color. Thus the upper box affects the image's foreground and the lower box affects the image's background. These boxes are also called the Foreground and Background Material boxes. In the Help menu, in the Materials palette section, the following diagram is given with the Rainbow tab in view:

Below each of the Foreground and Background boxes are three small buttons called Style buttons. Thus the Foreground Material box has three style buttons and the Background Material box has three style buttons. If you rest the mouse pointer on any of these three buttons you will get their names. The first one is called Color and it is used to create a solid color, a gradient color or a pattern color. You can see these options by clicking on the button. The middle button is called the Texture button and it is used to turn the current texture on or off. The third button is called the Transparency button and it specifies whether the foreground or background is to be transparent. Transparent means that there is to be no style or texture.

10. Under the Foreground Material box, click on the third button as we want the foreground material to be transparent. That is, we do not want any foreground style or texture. 11. Now click on the Background Material box. This will display the Material color palette. In the cluster of little boxes, choose the color red. Red is the little box displaying R:255 G:0 B:0 when the cursor moves over the box. When you choose red, the Hexadecimal code for the color red (#ff0000) appears in the HTML box. Click on OK and this is what you should have so far:

12. In the Tools toolbar, click on the Text tool (the one with the letter A on it). 13. Move the cursor over the new image that you created and it will change into the Text tool cursor (a cross-hair with the letter A attached). Before we write our text (ANIMATION), we need to set up the text font, size, etc. Note that the Tool Options palette now displays the options for the Text tool. We will now set these options. o Click on the down arrow in the Font box and choose Century Gothic. o For the Font Size, choose 12. I find that the size of the font varies with the version of Paint Shop Pro. For example, in version 9, I used a font size of 22 for Century Gothic. In this version it seems that a font size of 12 gives about the same size lettering. If you find that size 12 is too small, just increase the size to something more suitable. o Make sure that you have Left for the alignment, 0.0 for the Stoke Width and Smooth for the Anti-alias. o Click on the down arrow in the Create as box and choose Floating. This will allow us to cut out one letter at a time from the word ANIMATION. Here is what you should have:

14. You are now ready to enter the text. In the new image box, click somewhere on the left side where you would like the first letter A of ANIMATION to appear. As you will see, wherever you click, that is where the lower left corner of the first letter will appear. You might think that where you click in the box is where the center of the text will be placed. Not so. Where you click is where the lower left corner of the first letter of the text will be placed. When you click into the box, the Text Entry dialog window opens up. In the Enter text here box, type the word ANIMATION.

Also make sure that Remember text is selected (there should be a checkmark in the check box). Now click on Apply. The word ANIMATION should now be in the new image (or at least part of it should be visible). The word appears with dashed letters and with the dashes moving. You can move (drag) the image into a better position if you wish, but it is not necessary to do this for our purposes. We will now make our image smaller so that the word ANIMATION takes up the entire image with no empty space around it. To do this, 1. Click on the Edit menu and choose Copy. 2. Nothing appears to have changed. Now choose Paste As New Image from the Edit menu. That is, choose Edit --> Paste As New Image. Note that the new image (named Image2) is now reduced to the size of the text with a light colored checker board background.

The checker board background will not be displayed in a browser. The checker board indicates the parts of the image that are transparent. We no longer need the original larger image so you can delete it by clicking in the Close box at the top right corner of the image (the one with the X in it) and then indicating that you do not want it saved. 3. We will now save this new smaller image. Choose File, then Save As.... This will display the Save As dialog window. Now: o Choose the folder you want to save these images in. o Then click into the Save as type box and choose GIF Graphics Interchange Format (*.gif). o Also type in the name animat1 (short for animation 1 - our first image in the animation). This will ensure that the image is saved as animat1.gif. o Now click on the Options button. Make sure that the radio button beside Version 89a is selected and also make sure that the radio button beside Noninterlaced is selected. o Click on OK. o Click on the Save button to save the image named animat1.gif. o Since gif images have a maximum of 256 colors, you are now told this fact plus a statement about layering and asked if you want to continue. Click on Yes and the image is saved. Our first of 10 images has now been saved. Since we are making a little "movie", image by image, all the images must be:

the same size in the same format at the same color level (256 colors)

Since we have one image completed, we will use it as the template to create the rest of the images. Let's now create the second image which is the word ANIMATION with the last letter "N" removed (ANIMATIO). 1. It will be easier to delete individual letters if you first make the area around the image a little bigger. So drag one of the corners of the image to enlarge the area so that the image now looks like:

Note that the image itself is not made bigger. We are just increasing the space around the outside of the image. 2. Now in the Tools toolbar click on the Selection tool, . This is the one with the dashed rectangle on it. This will change the Tool Options - Text palette into the Tool Options - Selection palette. 3. The little down arrow in the Selection tool means that the Selection tool has other options. If you click on the down arrow, you will see that they are Selection, Freehand Selection and Magic Wand. We want just the Selection option. 4. In the Tool Options - Selection palette, make sure that the Selection type reads Rectangle since we are going to draw rectangles around the individual letters in the word ANIMATION. That is, we will be doing our selecting with rectangles. 5. Now carefully drag a box (a rectangle) around the last letter N so that the letter N is completely inside the box. A rotating dashed rectangle should now be around the letter N. 6. Choose Edit, then Cut. The letter N should now be gone. The rotating dashed rectangle will still be there but you can ignore it and the dashes won't be saved when you save the image. 7. Using the same procedure as above for saving animat1.gif, save this new image without the letter N (ANIMATIO) giving it the name animat2.gif. We now have two images - animat1.gif and animat2.gif. For the third image, cut the next letter (O) and save the resulting image (ANIMATI) as animat3.gif. If you continue this process, the last letter left over (A) will be saved as animat9.gif. Cut this last letter so that you have no letters left, and save this blank image as animat10.gif.

You now have all the images saved and are finished with Paint Shop Pro.

CREATING THE ANIMATION USING GIF CONSTRUCTION SET

In this section we will create the animation using GIF Construction Set. So first load GIF Construction Set Professional as this program will take all of our image files and place them into one animated GIF file. GIF Construction Set represents state of the art GIF animation software. GIF Construction Set includes:

An Animation Wizard to guide you through the process of creating the animation letting the software do most of the work. A Supercompressor which analyses your completed animation and looks for ways to store it in a smaller file without losing quality and animation (the smaller the file, the quicker the animation will load and display in a browser). An incredible Banner maker that includes a variety of special effects to create sophisticated banners. A LED sign maker which can be either still or animated. Transitions to create animated transitions between still images in an animation.

Now that you have the various individual images created for the word ANIMATION, we need to assemble them into one animated GIF file using Gif Construction Set. To do this we first need to load all the images into GIF Construction Set. If you would like to use the Animation Wizard and let GIF Construction Set do it for you, here are the steps: 1. Click on File and then choose Animation Wizard. Another way to activate the Animation Wizard is to simply click on the magic wand button, . 2. You now need to make a few decisions on how you want your animation to work. At the top is a tool bar and the first item in the tool bar is Loop. If the checkbox for Loop is checked, then the animation will loop indefinitely. If this box is not checked, then the animation will loop only once. Since we want our animation to loop over and over, make sure that the check box beside Loop is selected (there must be a checkmark in the box). You can change this setting later after the animation has been created. 3. Next is the Delay. This item will set the delay per image for your final animation. These delays are divided into hundredths of a second (1/100ths of a second). It should already display a delay of 10 one hundredths of a second meaning each image will only appear for 10 one hundredths of a second (or a tenth of a second). 10 is what we want so ensure that Delay is set to 10. You can experiment with other numbers later. The one you see on this web page was set to 10, but with all the other animated gifs, it could be running a little slower. 4. Next you are asked how you want to handle the color palette for your GIF file. There are a number of choices and they are: o Matched to superpalette. This choice should already be selected and is the choice we want. This choice will have GIF Construction Set look at all the

colors in all your individual images and create a 256 color palette that best reflects all your images. It will then remap all the colors in your images to this palette. This option usually gives you the best results. Dither to superpalette. This choice will have the Wizard look at all the colors in all the images in your animation and produce a 256-color palette which best reflects all your images. It will then dither all the colors in your source images to this palette. This option is a good choice if you are building your animation from photorealistic images and you do not intend to add transparency to it. Dithering is the complex pattern of alternating dots that can be used to simulate the original colors. Dithering is often able to create very effective simulations of the true colors in an image. Matched to first palette. This choice will have GIF Construction Set create the animation using the color palette from the first image only in your animation. This choice will give you more control over the use of colors in your animation but it can lead to display problems if the colors in the first image are quite different from the colors in the rest of the images. Fixed photorealistic. This option has GIF Construction Set dither your images to a palette with an even dispersal of colors from pure white to pure black. This is the best option if you are building an animation with JPEG images where you have a wide range of colors. Fixed drawn. This is the same as Photorealistic except that the images are remapped rather than dithered. Remapping is suitable for line art but not for a photorealistic image. Sixteen colors is similar to the Drawn option except that it only uses a palette with the 16 basic Windows colors. This choice is then suitable for simple animations with a small color range.

For our example, leave the Matched to superpalette selected. It is generally the best choice for GIF images. The rest of the tool bar contains buttons used in constructing the animation. This is what our choices look like:

5. Below the tool bar are three panels or frames. In the left frame, browse to the folder where all the GIF files are saved. 6. All the GIF files located in the chosen folder are now displayed in the middle frame. Note that both the images and their corresponding file names are displayed. In this frame, we will select the images that make up the animation. The images we select will be placed in the right frame. We must load the GIF files in the order they are to appear in the animation. To do this, o Click on animat1.gif in the middle frame as this is the first in our series of images to be loaded.

o o

Now click on the Add button and animat1.gif appears in the right panel along with its location. If you accidentally transfer the wrong image, you can click on the image in the right frame and then click the Remove button. Now back to the middle frame. If animat1.gif is still selected, click on it to deselect it. Now hold down the Ctrl key and while holding it down, click on the name animat2, then animat3, animat4, animat5, animat6, animat7, animat8, and animat9. Do not click on animat10 because it will be inserted alpha numerically after animat1 which we do not want. Now click on the Add button and the files are transferred to the right frame. This time click on animat10 and transfer it to the right frame. This will place animat10 right after animat9. Since our animation prints the word ANIMATION backwards and then frontwards, we now have to reverse the above procedure, beginning with animat9 down to animat2. Because the order is important, we must add these filenames one at a time - otherwise they will be placed in alphanumeric order. So click on animat9 and then click on the Add button. Then click on animat8 and then on Add. Continue this process until you have added animat2. We have now transferred all the files needed for the animation and in the order they are to appear. Note that all the images and their corresponding names have been placed in the right frame in the order from animat1.gif to animat10.gif and then from animat9.gif to animat2.gif. Note that they are also numbered from 1 to 18 indicating that we have 18 images in the animation. That is, we have the following: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 animat1.gif animat2.gif animat3.gif animat4.gif animat5.gif animat6.gif animat7.gif animat8.gif animat9.gif animat10.gif animat9.gif animat8.gif animat7.gif animat6.gif animat5.gif animat4.gif animat3.gif animat2.gif ANIMATION ANIMATIO ANIMATI ANIMAT ANIMA ANIM ANI AN A A AN ANI ANIM ANIMA ANIMAT ANIMATI ANIMATIO

7. Note that you can move any image in the right panel by clicking on the image with the right mouse button and then from the pop-up menu, choose Move.

8. It is now time to create the animation. To do this, simply click on the Build button. This building may take a few moments. When the building is completed, the Wizard terminates and we are back in the GIF Construction Set window. 9. You are now in the GIF Construction Set window. We will study the various parts of this window later. You can now save the animation by choosing Save As from the File menu. You can accept the name that GIF Construction Set places in the File name box or you can replace it with a name of your choice. If you are using the evaluation (unregistered) copy, you will be told this fact along with some facts and options on how to register. You can ignore this for now. 10. To view your animation, click on the binoculars button (the View animation button), . When finished viewing, click on the X to close the View window. You can also load the animated gif into your browser to see the animation in your browser. You can also load your images into GIF Construction Set without the wizard. To do this: 1. Click on File and then choose New. A window opens up with the word HEADER in it. We will study the Header later. 2. Now from the Edit menu, choose Insert block and then choose Image (Edit --> Insert block --> Image) since we are inserting an image. This will display the Open dialog window. 3. Hold down the Ctrl key and click on animat1, animat2 up to and including animat9. Click on Open. You may be told that the image you imported does not match the global palette for this file. Choose Remap this image to the global palette and click on OK. In a few moments, all the images appear in the GIF Construction Set window. 4. Now again choose Edit --> Insert block --> Image. This time click on animat10 and click on Open. We now have the images from animat1 to animat10. 5. Now add the rest of the images, one at a time, beginning with animat9 down to animat2. 6. You can now save what we have done so far, but keep in mind that we have not added any delay between the images or told GIF Construction Set how we want the animation looped. We will do this now. MANAGING AND EDITING OUR ANIMATION Whether you used the wizard or not to load the images, we will now learn to manage and edit our animation. GIF Construction Set manages animation through blocks. Each GIF file consists of a series of blocks that we can edit. We will therefore take a moment to understand these blocks.

Header Block: Note that the first line in the GIF Construction window is the Header Block. A GIF file only has one Header Block and it is always the first block in the file. Note that the Header Block reads: HEADER GIF89a Screen (180x25) where 180x25 represents the width and height in pixels of the animated image (the GIF file). Your width and height may be different to mine. You may not

be able to see this entire Header line but if you extend the width of the window or click on the Maximize button on the Window Bar at the top right, you will see it. The Header also indicates that the animated image will be saved as a GIF image in 89a format. The Header also contains other information about the animated gif such as the background color for viewing your animation in GIF Construction Set and the palette that all the images in the file will use. Double clicking on the Header line will reveal all this information. Loop Block: There is only one Loop Block and this block specifies whether the animation is to loop indefinitely or only a set number of times. Image Block: Each image has its own Image Block. Double click on an image and its block will be displayed. This block stores the image and the information relative to the image such as its location from the top left corner in relation to the area in which the animation will appear. Control Block: With each image is a Control Block that tells the browser how to display the image. The Control Block contains information such as what color is to be transparent, how long the image should be displayed before the next image replaces it, etc. Double click on any image to display the Image Block which contains the Control Block. Comment Block: The Comment Block is located at the end of the file and stores hidden text such as copyright information or whatever else you wish to place in it. These comments do not appear in the animation but will appear when the animation is viewed in GIF Construction Set. You can edit the Comment Block by double clicking on the block. Note: You will not be able to eliminate the Unregistered Shareware comment. You can delete the Comment Block but it will be replaced when you save the file. This comment block will not appear once you register the program. So if you like this program and plan to use it personally or professionally, be sure to register your copy.

Now that all the images have been loaded we will do some editing of the image blocks. 1. First highlight all the images by clicking on the first Image Block (representing animat1) and then while holding down the Shift key, click on the very last Image Block in the list (representing animat2). All the Image Blocks should now be highlighted. Only the Header Block is not highlighted. Any change that we now make will be applied to all the images in the GIF file. 2. From the Block menu, choose Manage. This will display the Block Management dialog window. 3. Make sure that the radio button beside Set controls for the selected blocks is selected and click on Apply. This will display the Edit Control dialog window. 4. Set the delay to 10 meaning each image appears for 10 one hundredths of a second. You can experiment with other numbers later. The one you see in this browser was set to 10 but with all the other animated gifs, it could be running a little slower. 5. Note that when GIF Construction Set loads your images, it will not load any transparency information. If you want a transparent background, you should set it at this time. You can set any color to be transparent. Let's set the white background as the transparent color. Here is how to do it:

Click on the checkbox beside Transparent Colour to place an X in the box. o Click in the box beside the Eyedropper tool and a color palette window opens up. Choose the color white which is the number 215 (or Hex #FFFFFF). Click on OK and the number of the color appears in the box. o If you do not know the exact color, you can choose the color you want transparent with the Eyedropper tool. Click on the Eyedropper and your image will appear. Click somewhere in the area of the color you wish to make transparent. The image disappears and the number of the color you have chosen appears in the box. o For the Remove By, choose Background so that our animated gif will have a transparent background. o Click on OK and you will be back to the Block Management dialog window. 6. Now click on the radio button beside Enable controls for the selected blocks and then click on Apply. 7. Click on OK to return to the GIF Construction Set window.
o

Each image in the image file now appears on a black background. This black background indicates the transparent part of the GIF file. You can also edit an individual Image Block. To do this, choose an Image Block and then double click on it. This will display the Edit Image dialog box. Note that the width and height of the image are given in pixels and the current position is 0 pixels from the top and 0 pixels from the left side of the area set aside for the animation file. You can change these position values but not the size of the image as this is automatically calculated by GIF Construction Set when the GIF file was constructed. Note that the Control panel on the right side is similar to the one we used for all the images. Note also in this Control panel that the delay for this image is 10 one-hundredths of a second which we just finished setting for all the images. If you wish to experiment, you can change the time delay for this image to another delay time. We are not going to change anything here so click on Cancel. We now need to insert a loop. Double click on the Header Block. This will display the Edit Header dialog window. Now click in the checkbox beside the word Loop to make sure that it is selected. Leave the Iterations count at 0. A count of zero means that the animation will loop indefinitely. Note that the background color is set to Black (which is the number 0). This is the black background you see with each image in the GIF Construction Set window. If you would rather see a white background in the GIF Construction Set window, then click on the button and choose the color white (number 215). That is all we need to change so click on OK. You can now view the complete animation by clicking on the View animation button. You can now save the animated gif by clicking on File and then Save As. The type of files should say GIF files. Choose the folder you want to save the animated GIF file in and type in a suitable name for your GIF file. When ready, click on Save. You should also load the

animated gif into your browser to view the animation in your browser as compared to viewing it in GIF Construction Set. Problem 3: We used the following sequence for our animation: ANIMATION ANIMATIO ANIMATI ANIMAT ANIMA ANIM . . . instead of using the sequence beginning with the letter "A" as in: A AN ANI ANIM ANIMA ANIMAT . . . Why did we use the sequence in the way we did? | Click here to go to the answer section | | top | | bottom | OUR SECOND ANIMATED GIF For our second animation, we will make the bullet or ball that you see on each side of this section's heading (there is only one ball repeated twice). We will create the ball in Paint Shop Pro and then paint it in different colors with each color making up one image. 1. Open Paint Shop Pro. 2. If not already in view, make sure that the Tools toolbar, the Tool Options palette, and the Materials palette are in view. To do this, choose View --> Toolbars --> Tools if you need to place the Tools toolbar into view, choose View --> Palettes --> Tool Options for the Tool Options palette, and choose View --> Palettes --> Materials for the Materials palette.

3. Choose File and then New to display the New Image dialog window (or click on the New image button in the standard toolbar). 4. Choose an image width of 50 pixels and a height of 50 pixels (bigger than required). Also make sure that the Background color is set to White and that the dimension units are in pixels. Click on OK. 5. In the Tools toolbar, click on the Selection tool (the rectangle) and the Tool Options palette changes to the Tool Options - Selection Palette. Click in the Selection type box and select Circle. The Mode can remain at Replace, the Feather can remain at 0 and the Anti-alias box should be selected (there should be a checkmark in the checkbox). 6. Move the cursor to the centre area of the image and drag out a small circle about the size of the one beside the heading of this section. It will appear as a rotating dashed circle. 7. We will now copy this image and paste it as a completed image. So choose Copy from the Edit menu. 8. Nothing appears to have changed. Now choose Paste As New Image. The new image has now been reduced to the size of the circle with a checker board background. It may not look like a circle but that is because of the checker board background. Just drag one of the corners of the image to make the border around the image a little bigger and the circle should appear a little clearer. You can now delete the first image we created (Image1*) by clicking in the Close box (the one with the X in it). 9. Now click on the Flood Fill tool, , in the Tools toolbar to select it. The Tool Options - Selection Palette has now been replaced with the Tool Options - Flood Fill Palette. 10. Make sure that the Match mode box reads RGB Value and the Blend mode box reads Normal. The RGB Value will ensure that only the circle gets colored and not the area of the image outside the circle. The Tolerance can remain at 20 and the Opacity at 100 (percent). Tolerance is how closely the selected pixels must match the initial pixel we click. The range is 0 to 200. At lower settings, only pixels of very similar colors are filled while at higher settings, more pixels are filled. Keeping the Opacity at 100 ensures that all pixels that are not transparent will be filled. 11. In the Materials Palette, click on the Foreground and Stroke Properties box. This will display the Material Properties dialog window. Choose the color red and click on OK. 12. The Flood Fill tool should still be selected. Now click with your left mouse button in the circle, and the circle (the ball) should now be colored red. Note that when the cursor moves over the circle, the cursor changes to the Flood Fill cursor. We have now completed our first ball in the animation and it looks like:

13. Now save this ball by choosing Save As from the File menu. This will display the Save As dialog window. Now: o Choose the folder that you want to save these images in. o Click into the Save as type box and choose GIF Graphics Interchange Format (*.gif). o Also type a name for the ball such as ball1 for ball #1. This will ensure that the image is saved as ball1.gif. o Now click on the Options button. Make sure that the radio button beside Version 89a is selected and also make sure that the radio button beside Noninterlaced is selected. o Click on OK. 14. Click on the Save button to save the image named ball1.gif. 15. Since gif images have a maximum of 256 colors, you are now told this fact and asked if you want to continue. Click on Yes and the image is saved. We will now create the remaining balls, giving each one its own color. Here are the steps: 1. With the ball image still selected, choose Edit --> Copy and then choose Edit --> Paste As New Image. You now have two red balls. 2. Again in the Materials palette, click on the Foreground color box. Now choose another color such as Yellow and click on OK. The Foreground color box is now yellow. 3. The Flood Fill tool should still be selected so click on the pasted red ball with your left mouse button and it will become yellow. 4. Now save the yellow ball in the same way you saved the red ball but using a name such as ball2.gif. 5. Repeat steps 1, 2, 3, and 4 as many times as you like, each time choosing a different color and naming the images ball3.gif, ball4.gif, ball5.gif, etc. Be careful that you do not choose colors that are very close together in shades as some monitors may not be able to distinguish between them. 6. When finished, use GIF Construction Set to turn these images into animation using the same procedures as with our first animation. When finished, save the animated gif using a suitable name such as balls.gif or bullets.gif. | top | | bottom |

HOW THE PJCVS MATH ANIMATED GIF WAS CREATED

Now that you know the procedures involved, use your imagination to create some great looking animated gifs.

For the PJCVS MATH animated gif, the part was done in a publishing program using an option that gave this design. This image was then copied and pasted into Paint Shop Pro.

The Pi symbol, , was created in Paint Shop Pro (which can also be created in any Paint or Desktop program). It is nothing more than the lower case letter p for the Font named Symbol. For example, to get the Pi symbol in Paint Shop Pro, create a new image (choose File, New). Choose a size of around 75 pixels by 75 pixels if you want to duplicate what I have. Make sure the foreground color is blue or any suitable color, and then click on the Text tool. For the Font, choose Symbol and for the Font Size, choose 36. Move the cursor to the new image, click once and the Text Entry window opens up. Type the lowercase letter p which will produce the pi symbol I used (the uppercase letter P will give a slightly different shaped pi). Click on OK. Position the pi in the new image and you have the identical pi I used. I used the rectangular selection tool a lot to cut the pi from the image, resizing the width of pi (Resize is located in the Image menu), and then pasting the pi back into the PJCVS image. Note that as the pi spins around, it reverses itself. The reverse of an image was created using the Mirror option found in the Image menu. Once I resized the pi, Mirror would give me the reverse pi. If you save the Math Department's animated gif on your hard drive, and then load it into GIF Construction Set, you can see each individual image that made up this animation. | top | | bottom |

CREATING LED SIGNS, BANNERS, AND SPECIAL-EFFECT IMAGES (TRANSITIONS) USING GIF CONSTRUCTION SET
CREATING LED SIGNS

This LED sign was created simply and easily using GIF Construction Set. To create a LED sign, open GIF Construction Set, choose Edit --> Signs --> LED Signs. The LED Sign dialog window opens up giving you a number of options. You can set the color, adjust the playback speed and change the sign dimensions. Have fun and experiment. Note: GIF Construction Set's Help support is excellent. With GIF Construction Set, you don't need a manual (and one does not come with the program). All you need to know is right there in the Help section. So the first thing you might want to do is to click on the Help button located below the Cancel button to receive complete explanations on all the options available to create LED signs. You may wish to print the Help page for a handy quick reference guide. CREATING BANNERS Try making an animated banner such as:

Or, try creating a nice banner or header for a web page that is not animated. Here is one I created for a client.

These banners were simply created using GIF Construction Set. Banners are GIF files which contain text. A banner can be a simple one image GIF file with words printed on it or it can be an animated GIF file with text scrolling from right to left. The Banner option, like the LED option, is located in the Edit menu. Thus to create a banner, open GIF Construction Set, choose Edit and then Banner. This will display the Banner dialog window giving you a number of options and text effects. The Help page is also very good and I would suggest you print out this page as a handy reference (the Help button is located at the bottom of the Banner dialog window beside the Test button). CREATING SPECIAL-EFFECT IMAGES (TRANSITIONS) A transition is a special effect that occurs when going from one image to the next image in an animation. The Transitions function in GIF Construction Set will create animated transitions between your images. There are about two dozen special effects to choose from in GIF Construction Set. Here are four of these special effects: 1. Dissolve: The images will fade in the transition from one image to the next. 2. Raster: The images will transition from one image to the next as a sequence of bars. You can choose either horizontal and vertical rasters. 3. Tile: This transition will make your images appear in small squares, in random order. 4. Wipe: Your images will transition from one image to the next by wiping. There are four wipe options, one from each direction. Here are the steps to create a transition: 1. Select Edit and then Transition. This will display the Transition dialog window. 2. You now need to load your images into the Transitions window. To do this click on the Add button. This will display the Open dialog window for you to select your images. 3. You now select the images. You can do this one image at a time or hold down the Ctrl key to select multiple images. Click on Open. The images are now loaded and displayed in the Transitions window. Now have fun and experiment with the different special effects. There is also a very good transitions Help page that includes a description of all the various transitions. Just click on the Help button located below the Cancel button

4. You can test the various transitions in your animation with the Test button. When you are finished testing and have chosen a transition, click on OK. GIF Construction Set will then create the animation and return to the GIF Construction Set window. 5. You can then save the animated GIF file. | top | | bottom |

ANSWERS
1. There are only 9 letters in the word ANIMATION but there are 10 distinct images, the tenth one being the blank or empty image. 2. 18 images, including the blank image, are displayed before looping takes place, that is, before the whole process repeats itself. Here are the 18 images which are numbered this time: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ANIMATION ANIMATIO ANIMATI ANIMAT ANIMA ANIM ANI AN A a blank image A AN ANI ANIM ANIMA ANIMAT ANIMATI ANIMATIO

3. The complete word ANIMATION should appear first. This is for those browsers that do not support animation. In these browsers, only the first image in the animation will be displayed. Because these browsers can't show animation, it is important then, that they at least display the complete image - in our case, the complete word. Another reason for the given order is that when a web page containing an animated GIF is sent to the printer, often only the first image in the file gets printed. Since a printer cannot print out all the individual images that make up the GIF file, it will print the first image that the browser displays in the animation. This then is another reason for a good first image in a GIF file.

LESSON SIXTEEN FORMS

INTRODUCING FORMS
One of the most powerful parts of a web page is the form. A form allows you to gather information from a visitor or customer for immediate or for later use. The person fills in the form and then SUBMITS the information (which is also called the form data) to your server. Some of the information in the first two sections in this lesson may be a little confusing. This information is designed to help you understand just how forms and CGI scripts work. There are several companies on the internet that offer free forms and free guestbooks and they all come complete with all the coding necessary to place them on your website. You cannot send the contents of a form directly to your email address. It has to be routed through the internet company supplying the free form or guestbook to be interpreted into a readable form through their CGI script and then emailed to you. All this is done almost instantly. That is, when a visitor clicks on the "send button", the information that the visitor fills into the form or guestbook is sent to the internet host company for interpretation and then immediately to you. Obtaining a free form or a free guestbook is discussed later in this lesson in the section titled, "Free forms and guestbooks". So you don't need to worry about understanding everything in the first two sections in this lesson. What you do want to learn is how to set up the various elements of a form so that you can take a free form or guestbook and adapt it to your particular needs - and that is what this lesson is all about. One way to have the information from a form sent to you is through the mailto: command. An example using this method is given later in the "Creating a form" section. With the mailto: command, the information that a visitor fills in is sent to your e-mail address when the "submit" button is clicked. However, using the mailto: command gives very inconsistent results among browsers. It simply does not work well. Therefore using the mailto: is not recommended for having the contents sent to you. Here are the main reasons: 1. The mailto: only works in Netscape and Firefox browsers. Internet Explorer does not recognize forms with the mailto: command in the same way that Firefox and Netscape do. When Explorer encounters the "mailto:" command, it will simply open up the e-mail box waiting for the visitor to send an e-mail to you - as if "mailto:" was a regular HREF attribute. The HTML coding for forms, however, will work in all browsers. 2. There is no confirmation to the visitor of the form contents being sent. 3. The text arrives in your e-mail as one long line - all run together. Using the form given below in the "Creating a form" section, and using my name and address, the first part of the data will look like:

visitor_name=John+Gilson&visitor_address=6+Pioneer+Place&visitor_city=Brantf ord &visitor_state=Ontario&visitor_country=Canada&visitor_code=N3R+7G7&visitor _email= bes@bfree.on.ca&visitor_website=http%3A%2F%2Fwww.bfree.on.ca %2FHTML and so on ... For most people, this form output is hard to read - especially if you have a lot of information to sort through. I will be discussing this strange looking output in more detail in the section entitled "URL encoding". 4. The form information arrives in your email client in an attached file. An attached file has to be opened in a text editor such as Notepad, WordPerfect or Microsoft Word. To get around these problems associated with the mailto: command, you attach the visitor's form information to a CGI script which is the topic of the next section. | top | | bottom |

CGI - COMMON GATEWAY INTERFACE

CGI stands for Common Gateway Interface. A CGI script allows you to send the information from a form looking like regular easy to read e-mail without the problems associated with the mailto: command. In other words, a CGI script can manipulate or process the information from a visitor into a more readable and useful form. This is done at the server level and a response is returned to your browser or to your e-mail address.. A CGI script together with the form allows you to collect information from the visitor, analyze and parse the information into a readable form, and then have the readable contents sent to you. When the visitor submits the form data, the CGI script can also have another page pop up thanking the visitor for filling out the form. You can also have the CGI script post what visitors write to another page. This allows everyone to read what others write. You have to be careful with this one because it can take up a lot of server space after a while. A CGI script is a computer program that interprets the data sent to it by the visitor. It divides this long stream of hard to read data into something you can more easily read and use. You can write the CGI script yourself, have someone write it for you, or you can download a suitable script from the internet. If all you want is a guestbook or an order form, there are plenty of places on the net to get a free one (discussed later in the section "Free forms and guestbooks"). All the required information and coding comes with the guestbook or form so you don't have to worry about CGI scripts. Everything you need to know comes with the package. CGI scripts are often written in a programming language such as C, Perl or JavaScript. The advantage of using a language such as these three is that the script can be easily

transferred from computer to computer and doesn't need to be compiled into something else. In other words, you can download or copy a JavaScript from someone else, adapt it to your needs and incorporate it into your web page. | top | | bottom |

CREATING A FORM
While you may need to find an internet company offering free forms and guestbooks to interpret the data, writing the HTML code to make the forms is easy. Every form has three parts: 1. the FORM tag 2. the actual form elements where the visitor enters the information 3. the SUBMIT tag which creates the button that sends all the collected information to the server (usually to be interpreted by a CGI script). Let's begin by setting up a simple Guestbook that asks for a name, address, e-mail address, plus other information. The form and information presented here can apply to any type of form you may require on your web page. Here is the form we will set up. Below this form is the complete HTML coding along with explanations. Note: This form is not connected to my e-mail address or to any CGI script so you can practice all you like (I used a false e-mail address so my box won't fill up with e-mail from this lesson). If you haven't already signed my real guestbook, you can do so by choosing "Please sign my Guestbook" from the menu at the top of this lesson. You can also choose to sign my guestbook from my main and alternate home pages. I would be most pleased if you would take a moment to sign my guestbook and tell me what you think of my website. Name: Address: City: State/Province: Country: Zip/Postal Code: E-mail address: If you have a website, let me know and I will pay you a visit! website address: Please rate my website! It's Great! It's Good! It's Fair! It's Poor!

Tell me a little about yourself: I am Male I am Female Please indicate your interests. Check off as many as you wish! skiing swimming jogging reading movies surfing the net sports in general other Seen any good websites lately? Got a good story to tell? Write them down or just say Hi!!

Thanks for visiting!

The above form uses the five most often used basic areas of form styles. These five areas are: 1. TEXT BOXES for entering one line of basic text. I used several text boxes such as for the visitor's name, address and city. 2. POP-UP BOXES which are menu choices. I used the pop-up box to determine the visitor's country. 3. RADIO BUTTONS which I used to rate my website and also to determine if the visitor is male or female. 4. CHECK BOXES which I used to determine the visitor's interests. 5. TEXT AREA BOXES for the visitor to type a multi-line message. I used the TEXT AREA BOX in the above form for the visitor to let me know of a good website, to tell me a story or to just say "Hi!". Below this paragraph is the complete HTML document that creates the above form and then we will discuss the various parts. Please SWITCH to NOTEPAD, type in this HTML document so you can try it out using your own e-mail address and also to get a feel of how a form works and how it appears in your e-mail as an attached file and also what it will look like when you load it into a word processor. You will also need this form typed in to answer some questions. And you can learn a lot by experimenting! Don't forget to include the usual HEAD, TITLE and BODY tags. Once you have typed it in, you can then SWITCH back to your browser, load the HTML file and begin testing and experimenting. Now here is the HTML document. You can leave out the IMG tag if you don't want to save the guestbook picture in your working directory. <IMG SRC="signbook.gif" ALIGN="LEFT" HSPACE="15" ALT=""><STRONG>I would be most pleased if you would take a moment to sign my guestbook and tell me what you think of my website.</STRONG> <P><FORM METHOD="POST" ACTION="mailto:jbes@bfree.on.ca">

Name: <INPUT TYPE="text" NAME="visitor_name" SIZE="35"> <P>Address: <INPUT TYPE="text" NAME="visitor_address" SIZE="35"> <P>City: <INPUT TYPE="text" NAME="visitor_city" SIZE="20"> State/Province: <INPUT TYPE="text" NAME="visitor_state" SIZE="25"> <P>Country: <SELECT NAME="visitor_country" SIZE="1"> <OPTION SELECTED>United States <OPTION>Australia <OPTION>Canada <OPTION>England <OPTION>France <OPTION>Netherlands <OPTION>New Zealand </SELECT> Zip/Postal Code: <INPUT TYPE="text" NAME="visitor_code" SIZE="10"> <P>E-mail address: <INPUT TYPE="text" NAME="visitor_email" SIZE="35"> <P><STRONG>If you have a website, let me know and I will pay you a visit! </STRONG><BR> website address: <INPUT TYPE="text" NAME="visitor_website" SIZE="45"> <P><STRONG>Please rate my website!</STRONG><BR> <INPUT TYPE="radio" NAME="rating" VALUE="great" CHECKED>It's Great! <INPUT TYPE="radio" NAME="rating" VALUE="good">It's Good! <INPUT TYPE="radio" NAME="rating" VALUE="fair">It's Fair! <INPUT TYPE="radio" NAME="rating" VALUE="poor">It's Poor! <P><STRONG>Tell me a little about yourself:</STRONG><BR> <INPUT TYPE="radio" NAME="sex" VALUE="male">I am Male <INPUT TYPE="radio" NAME="sex" VALUE="female">I am Female <P><STRONG>Please indicate your interests. Check off as many as you wish! </STRONG><BR> <INPUT TYPE="checkbox" NAME="interests" VALUE="ski">skiing <INPUT TYPE="checkbox" NAME="interests" VALUE="swim">swimming <INPUT TYPE="checkbox" NAME="interests" VALUE="jog">jogging <INPUT TYPE="checkbox" NAME="interests" VALUE="read">reading <INPUT TYPE="checkbox" NAME="interests" VALUE="movie">movies <INPUT TYPE="checkbox" NAME="interests" VALUE="internet">surfing the net <INPUT TYPE="checkbox" NAME="interests" VALUE="sport">sports in general <INPUT TYPE="checkbox" NAME="interests" VALUE="other">other

<P><STRONG>Seen any good websites lately? Got a good story to tell? Write them down or just say Hi!!</STRONG> <P><TEXTAREA NAME="comment" ROWS="15" COLS="50"></TEXTAREA> <FONT COLOR="#800000"><H3 ALIGN="center">Thanks for visiting!<BR> <INPUT TYPE="submit" VALUE="Submit!"> <INPUT TYPE="reset" VALUE="Start over"></H3></FONT> </FORM> </BODY> </HTML> Now for a discussion on the above HTML coding:

THE FORM TAG

Our form begins with an image of a small guestbook followed by the instructions. Images are completely dealt with in Lessons 7 and 8. Here are these lines again: <IMG SRC="signbook.gif" ALIGN="LEFT" HSPACE="15" ALT=""> <STRONG>I would be most pleased if you would take a moment to sign my guest book and tell me what you think of my website.</STRONG> I did not include a guestbook picture in my actual guestbook. However, I did make the guestbook title (My GuestBook) into an image so I could use a special font. Once you get past the opening statements, you then have to tell the browser that you are starting a form and what you want done with the form. This command is: <FORM METHOD="POST" ACTION="mailto:jbes@bfree.on.ca"> This command line does three things: 1. It tells the browser that a form is starting now. FORM is a container element in that it has an opening tag (<FORM> ) and a closing tag (</FORM> ). Everything contained between these opening and closing tags is part of the form. 2. It tells the browser that the METHOD of dealing with the form data is to POST it. METHOD is a form attribute and POST is called the "value" of the attribute METHOD. 3. It tells the browser to post all the data from the visitor to my e-mail address (not my real e-mail address). This is ACTION part. Giving the e-mail address will only work in Firefox and Netscape style browsers. As stated above, there are two basic problems associated with using an e-mail address with the ACTION attribute: 1. Few browsers support the "mailto:" action at this time. So only visitors that use those browsers will be able to submit form data to you. Everyone else

will either get an error message or the e-mail box simply opens up in the normal way for someone to send an e-mail to you which has nothing to do with the form. 2. If a browser does accept the mailto: e-mail address, it will still not decode the form input before mailing it to you. Thus you get all your form input encoded which as you read earlier makes the data difficult to read. If you are going to try the mailto: command anyway, be sure to replace my e-mail address with yours so you can fill out the form and send the data to yourself. If you use the given email address in the mailto: command, you will only get an error message stating that the address does not exist - so you need not worry about sending me any of your test data. You can therefore experiment with the form all you like. If you are planning to obtain a free form or guestbook, you will be given the FORM tag from the company to insert into your coding. It will contain the necessary METHOD and ACTION attributes to have the form contents sent to their CGI script for decoding. | top | | bottom |

USING A CGI SCRIPT INSTEAD OF THE MAILTO: COMMAND

If a CGI script is used to interpret the form data, the ACTION attribute must then specify the URL of the CGI script which processes the form and sends the processed information back to you. That is, when using a CGI script to interpret the data, the action will not be an e-mail address as given in the previous section, but will be an address such as: http://www.domain_name.com/cgi-bin/your_directory/process_form In other words, the FORM tag will look something like: <FORM METHOD="POST" ACTION="http://www.domain_name.com/cgibin/your_directory/process_form"> In this case, the ACTION attribute is sending the visitor information to a CGI script (which I called "process_form") - wherever that CGI script is located. That is, the attribute ACTION contains the name of the CGI script to process the form (process_form) as well as the location of the script (domain_name.com/cgi-bin/your_directory). Thus the ACTION attribute contains the complete URL of the CGI script. In our form, the METHOD of dealing with the form data is to POST it. Well, there are actually two METHODS that can be used. That is, there are two values for the METHOD attribute. One is POST as shown and the other is GET. GET is the default value if you don't use the METHOD attribute (the only required attribute for the FORM tag is ACTION).

Now when using GET instead of POST, the data from the form is packaged and appended to the end of the URL specified in the ACTION attribute. This data is actually sent to the CGI as a query-string variable attached to the end of the ACTION URL as in: http://www.domain_name.com/cgi-bin/your_directory/process_form? visitor_name=John+Gilson& visitor_address=6+Pioneer+Place and so on... When the server executes your CGI script to process the form, its sets this variable called "query-string" to everything after the question mark in the URL. Thus with the GET method, all the encoded data is assigned to the query-string variable. The drawback to the GET value is that there may be limits on the data that can be stored in the variable. So if you could expect to receive lots of data (especially if you have a large comment field), you might lose some of that data if you use the value GET. POST, on the other hand, sends the data separately through a direct link to the server. In other words, it is sent as a separate stream and is not assigned to a variable. For this reason, you can have as much data as you want. It may therefore be safer to use POST rather than GET for the METHOD attribute. When you get a form or guestbook off the net, you will be given the coding to use so you don't have to worry whether to use POST or GET. In either case, the form data ends up on the server side (and therefore in your CGI script) as coded data such as: visitor_name=John+Gilson&visitor_address=6+Pioneer+Place&visitor_city= Brantford&visitor_state=Ontario&visitor_country=Canada&visitor_code=N3R+7G7 &visitor_email=bes@bfree.on.ca&visitor_website=http%3A%2F%2Fwww.bfree. on.ca%2FHTML and so on ... The first step in your CGI script, then, is to decode all that data so you can manage it better. Here are some final points for this section: 1. A form may contain markup tags to mark up your text. 2. A form cannot be nested. That is, you cannot have a form inside a form. 3. If your form is in a frame, you may want to include the attribute TARGET as part of any URL, as in TARGET="_top" to load the result into the full body of the current window. Two other attributes for TARGET are: blank (TARGET="_blank") to load the result into a new blank window and parent (TARGET="_parent") to load the result into the immediate parent of the document the form is in. Let's now look at each of the five form areas given in the above form. | top | | bottom |

TEXT BOXES
The first form area is called the TEXT BOX. Text boxes contain one line of text and are often used for names, addresses, credit card information, etc. I used it to get the visitor's name, address, city, State/Province, Zip/Postal code, e-mail and website addresses. A guestbook normally will not require all this information (see my actual guestbook). Here are the first four text boxes to serve as a reminder: Name: Address: City: State/Province: Here are the first two lines from the form asking for the name and address: Name: <INPUT TYPE="text" NAME="visitor_name" SIZE="35"> <P>Address: <INPUT TYPE="text" NAME="visitor_address" SIZE="35"> A TEXT BOX is a box that allows for one line of text. In the first example, the viewer or visitor is asked to type in his or her name. The visitor will first have to click into the box to activate it. In the second box, the visitor is asked to type in the address. The INPUT tag simply tells the browser that visitor input will occur here. This INPUT tag comes with a number of attributes: 1. TYPE is an INPUT attribute that specifies the type of control that is to be used. In this case its value is "text" meaning a one line text box. 2. NAME is the attribute that allows you to assign any name to the text box. In our case in asking for the visitor's name, I have named it "visitor_name". In other words, the attribute NAME has the value "visitor_name". Thus when the data is collected by the server, the information typed in this text box will be identified by the value "visitor_name". Basically, when each piece of information is sent by the visitor to the CGI script, it is sent in two parts: first an identifier or name so you will know what data will follow and the second part is the actual data. An important part of a form element is this concept of NAME/VALUE pairs. In our example, the name is "visitor_name" and the data "value" is whatever the visitor types in for the name. Using my name, John Gilson, this would be sent to the CGI script as: visitor_name=John+Gilson. Of course a CGI script would print this information, along with all the other information from the form, in a nice easy to read manner. Also keep in mind that nothing is actually sent to the server until the visitor clicks on the "Submit!" button at the bottom of the form. 3. The SIZE attribute denotes the character length or size of the text box - that is, the length of the input field. I chose a length of 35 for both the name and address, 20 for the city and 25 for the State/Province. You can make your text boxes any size you wish. If the visitor enters more characters than will fit into the box, the text will

scroll. I like to think of "character length" as representing the "size" or "length" of the text entry box as opposed to the "number of characters". This is because not all characters are the same size. For example, in any text box, I can place more lower case f's than I can upper case W's because a lower case "f" simply takes up less space than an upper case "W". So the number of characters that will actually fit into a box will vary depending on the characters used. However, you could think of the number of characters as being "average size" characters. I like to think of the lower case "h" as representing an average size character. 4. Using the VALUE attribute, you can have text printed in a text box when the form appears on the page (called "default text"). For example, if you want to ask for the visitor's country using a text box and you know that most of your visitors will be from the United States, then to have the name "United States" appear in the box as default text, the INPUT tag would be something like: Country: <INPUT TYPE="text" VALUE="United States" NAME="visitor_country" SIZE="25"> If a visitor is not from the United States, then he or she would simply have to erase the name and type in the correct country. 5. MAXLENGTH is another attribute you can use. To see what this attribute does, try the following problem: Problem 1: SWITCH to NOTEPAD and add the following attribute and value to the INPUT tag that asks for the visitor's name: MAXLENGTH="34" so that the complete line looks like: Name: <INPUT TYPE="text" NAME="visitor_name" SIZE="35" MAXLENGTH="34"> Now save the file, SWITCH back to your browser and then load the file. Type in a very long name - longer than the box length. What happened? | Click here to go to the answer section | Problem 2: SWITCH back to NOTEPAD and this time delete both the SIZE and MAXLENGTH attributes from the visitor name box so that the line now looks like: Name: <INPUT TYPE="text" NAME="visitor_name"> Now save the file, SWITCH back to your browser and load the file. Since we no longer have a box size, what character length did the browser use? In other words, what is the default value for the box length if you do not include the size attribute?

| Click here to go to the answer section |

Note: 1. You can use a table to set up your form elements. So if you do not like the way the text boxes line up, control them through the use of a table. See Lessons 11 and 12 if you need to review tables. 2. Use <BR> (line BReak) and <P> (Paragraph) tags to space the form elements. As you likely noticed, I used the <P> tag to double space the different sections of the form. I also wanted the "City" and "State/Province" on the same line and so I did not force a line break between them with a <BR> or <P> tag. 3. You can also use the ampersand command (&nbsp;) to force extra spaces between the headings (such as the heading "Name:") and the text boxes. I used the ampersand command to force extra spaces in different locations in my actual guestbook. You can see how this was done by visiting my guestbook page and choosing "VIEW" from the menu bar and then "SOURCE" or "DOCUMENT SOURCE". | top | | bottom |

POP-UP MENU BOXES

The second form area is the POP-UP MENU BOX. Creating menus for your visitors makes it easy for them to enter information or to provide criteria for a search without having to type anything. As an illustration, I used the pop-up menu box for the viewer to choose the country. Here is a reminder of what it looks like (in an actual situation, there would be many more countries listed): Country: The box, until clicked on, only shows one item. In our case, it is the "United States". Here is the HTML coding to generate the pop-up menu box. Country: <SELECT NAME="visitor_country" SIZE="1"> <OPTION SELECTED>United States <OPTION>Australia <OPTION>Canada <OPTION>England <OPTION>France <OPTION>Netherlands <OPTION>New Zealand </SELECT> Note the following points concerning the pop-up menu box:

1. The SELECT tag in the first line tells the browser that a SELECT form or POPUP form is going here. In this context, SELECT means to "SELECT" from a menu of choices. SELECT is a container element in that it also requires a closing tag (</SELECT> ). Everything in between the opening and closing tags is part of the pop-up menu form. 2. The NAME attribute follows the same reasoning as in the above TEXT BOX section in that it specifies the NAME of the country list (part of the NAME/VALUE pair we discussed earlier). Visitor_country is the name for this menu of countries that will identify the country when it is collected by the server. I am naming this data "visitor_country" implying that what follows is the visitor's country. Thus if a visitor selects Canada, the information will be sent to the server as visitor_country=Canada. Again keep in mind that no information will be sent to the server until the visitor clicks on the Submit! button at the bottom of the form. 3. The SIZE attribute has a value of "1". This denotes the number of items that must be initially visible to the visitor. If set to "1", you will get a drop-down list. If it is set to more than one, you will get a scrollable list. If you use the attribute MULTIPLE as in: Country: <SELECT NAME="visitor_country" SIZE="2" MULTIPLE> it will allow the visitor to select more than one item from the menu. Exactly how a visitor can select more than one item at once is dependent on his or her browser's platform - so do not include "instructions" on how to do this. They may be wrong and can cause a lot of confusion. Obviously, allowing a selection of more than one country is not a good example as the visitor can only live in one country - but it illustrates the point. Normally the pop-up menu is used to make one selection. 4. Each OPTION tag denotes an item in the menu. I only gave 7 choices or options to illustrate the pop-up menu but you can have as many as you wish. Note that with the United States option, I used the attribute SELECTED. This attribute gives the default value. Since I wanted the United States to be the choice by default, I used the SELECTED attribute to place this country's name in the box. So use the SELECTED attribute if you feel there is a most common answer. 5. You can also use the VALUE attribute with the OPTION tag. The VALUE attribute allows you to further identify the data when it is collected by the server. For example, suppose in your form you decide to ask for your visitor's age category. You could have something like: Age: <SELECT NAME="visitor_age" SIZE="1"> <OPTION VALUE="child">less than 8 <OPTION VALUE="youth">8 to 12 <OPTION VALUE="teenager">13 to 19 <OPTION VALUE="young adult>20 to 29 and so on...

If the visitor chooses "8 to 12", the data sent to the server will then be: visitor_age=youth, as opposed to: visitor_age=8+to+12. 6. You must end the pop-up menu box section with the closing SELECT tag (</SELECT>). The next part of the form asks for the Zip/Postal Code, E-mail and website addresses. I used the standard TEXT BOX to obtain this information. | top | | bottom |

RADIO BUTTONS
The third form area is called the RADIO BUTTON. These are the little round buttons that you see in our form for rating the website and to find out if the visitor is male or female. Here again are the radio buttons for our form: Please rate my website! It's Great! It's Good! It's Fair! It's Poor! Tell me a little about yourself: I am Male I am Female Each button is "alive" which means that you can click on any one of them. When you click on a radio button, the button "darkens" in the center. Also, you can only choose one button. If you choose another button, the first one will give up its selection. The name Radio Button comes from "way back" when car radios had big black plastic buttons to select stations. When you pushed a button, the dial moved. When you pushed another button, the first choice was dropped and the dial moved again. You couldn't push two buttons at once. Radio buttons in forms work in the same way. Here are the lines that give these buttons beginning with the instruction. <STRONG>Please rate my website!</STRONG><BR> <INPUT TYPE="radio" NAME="rating" VALUE="great" CHECKED>It's Great! <INPUT TYPE="radio" NAME="rating" VALUE="good">It's Good! <INPUT TYPE="radio" NAME="rating" VALUE="fair">It's Fair! <INPUT TYPE="radio" NAME="rating" VALUE="poor">It's Poor! <P><STRONG>Tell me a little about yourself:</STRONG><BR> <INPUT TYPE="radio" NAME="sex" VALUE="male">I am Male <INPUT TYPE="radio" NAME="sex" VALUE="female">I am Female Now for a discussion on these lines 1. The TYPE of INPUT is to be a RADIO button.

2. Note that the group of four buttons to rate the website all have the same NAME which I called "rating". For the two buttons involving the sex of the visitor, I gave the same NAME "sex". The NAME attribute identifies each radio button in a set of buttons and in any one set of radio buttons, only one button can be selected. In other words, out of all the radio buttons with the same name, only one can be active at a time. Thus the NAME attribute names the category the buttons are in. 3. Each radio button must have a VALUE. The VALUE (part of the NAME/VALUE pair) is the name assigned to the radio button. You must define a value for later sorting of the data by the CGI script. For example, if the visitor chooses the radio button "It's Great!", the VALUE "great" will be sent to the server (instead of "It's Great!"). Thus the information submitted to the server will be "rating=great". 4. Note in the choice "It's Great!", I included the attribute CHECKED. The attribute CHECKED makes the radio button active by default. Thus the choice "It's Great!" will be darkened or checked - hoping that most visitors will agree with this choice and move on to the next part of the form. 5. If it is not clear that only one choice is to be made, then you can always include an instruction such as: Please select one of the following. After rating the website, the next part of the form is to choose Male or Female. These statements follow the same reasoning as for rating the website except that there are only two choices. As stated above, choosing male or female is a different category than the website rating, so it needs its own name which I called "sex". Note that I did not select one to be the default value because there is no "most common" answer. Thus no default was set with the "checked" attribute. | top | | bottom |

CHECK BOXES
The fourth area is the CHECK BOX. I used the CHECK BOX to determine the visitor's interests. The given list in our form is only for illustration purposes and is by no means meant to be a complete list. Often with lists such as these, there is also the choice of "Other" and then allowing the visitor to type in what the "other" is (as I did in my actual guestbook). Here are the check boxes as a reminder: Please indicate your interests. Check off as many as you wish! skiing swimming jogging reading movies surfing the net sports in general other Check boxes are much like radio buttons except for three differences:

The item is a square (not round like a radio button). It is marked with an X or with a checkmark and not darkened as with radio buttons.

You can check as many items as you wish. You are not limited to one selection as with radio buttons.

Here is the HTML code for this part of the form beginning with the instruction. <STRONG>Please indicate your interests. Check off as many as you wish! </STRONG><BR> <INPUT TYPE="checkbox" NAME="interests" VALUE="ski">skiing <INPUT TYPE="checkbox" NAME="interests" VALUE="swim">swimming <INPUT TYPE="checkbox" NAME="interests" VALUE="jog">jogging <INPUT TYPE="checkbox" NAME="interests" VALUE="read">reading <INPUT TYPE="checkbox" NAME="interests" VALUE="movie">movies <INPUT TYPE="checkbox" NAME="interests" VALUE="internet">surfing the net <INPUT TYPE="checkbox" NAME="interests" VALUE="sport">sports in general <INPUT TYPE="checkbox" NAME="interests" VALUE="other">other The TYPE of INPUT as indicated is "checkbox" (no space in the word "checkbox"). TYPE="checkbox" produces a check box. A check box has two states - on and off. As with Radio Buttons, the NAME indicates the "category" or "set" of check boxes which I have named "interests". The VALUE will only be sent to the server if the corresponding check box is checked - that is, when the check box is "on". Otherwise it is ignored altogether. Also note the following two points: 1. If visitors might find it confusing to know what to do, you could include an instruction such as I did ("check off as many as you wish") or something like: Select one or more of the following: 2. If you want one or more of the choices to be pre-selected by you, then use the attribute CHECKED. You can check as many boxes as you like so that when the form page opens up to the visitor, some of the boxes will already have checks in them. A visitor can always remove a check by clicking in the checked box. | top | | bottom |

TEXT AREA BOXES

The fifth and last area shown in the form is the TEXT AREA BOX (also know as the TEXT BLOCK) and it allows the visitor to type in a block of text. The text area box is also called the COMMENT BOX. Here is the Text Area Box once again beginning with the instructions: Seen any good websites lately? Got a good story to tell? Write them down or just say Hi!!

The Text Area Box can be as reasonably big as you want. As well, more text can be entered than can fit in the display area. Here is the HTML code for the text area box beginning with the instructions: <STRONG>Seen any good websites lately? Got a good story to tell? Write them down or just say Hi!!</STRONG> <P><TEXTAREA NAME="comment" ROWS="15" COLS="50"></TEXTAREA> Now for the discussion: 1. TEXTAREA is one word. This tag tells the browser that a multi-lined Text Area Box is to be created allowing the visitor to write something in the box. The Text Area Box is like the Text Box we used for the name and address except that the Text Box only allows for one line of text. The Text Area Box allows for many lines of text. All the viewer has to do is click in the box to activate it and then begin typing the message. 2. The TEXTAREA tag unlike the TEXT BOX statement, requires a closing TEXTAREA tag as indicated by the </TEXTAREA>. 3. Note that I named the text area box "comment" but you can give it any suitable name. When a visitor types in the box, the data will be sent to the server as comment=data. Thus I know that any data from the text area box will be first identified by the name "comment". 4. ROWS="15" tells the browser to set up 15 rows for the text and COLS="50" tells the browser to set up 50 columns for the text - that is, 50 characters per row. The ROW attribute specifies how high the text area box will be. The COLS attribute specifies how wide the text area box will be. You can of course make the box bigger or smaller - whatever suits your needs. If you use a column width of about 50, you will be certain that the text area box will easily fit in all browsers. The text is printed in a "courier" font meaning that each character takes up the same amount of space - whether a lower case "f" or an upper case "W". This allows the width to be specified as so many characters per row. 5. Another attribute that can be used with the TEXTAREA tag is the WRAP attribute. It specifies how text will wrap. Possible values are "hard", "soft" or "none". For example, if you want to specify no wrapping of text, it will be WRAP="none". You can experiment with these attributes so see their effects on the typing of text in the text area box. 6. In Explorer, a vertical scroll bar is displayed in the TEXTAREA box. In Firefox and Netscape, scroll bars will show up when needed. Problem 3: SWITCH to NOTEPAD and change the TEXTAREA tag to the following: <P><TEXTAREA NAME="comment" ROWS="15" COLS="50">My favorite website address is:</TEXTAREA>

Now save this change and load the HTML document back into your browser. What did this change do to the text area box? Problem 4: Our text area box consists of 15 rows and 50 columns. Now SWITCH back to NOTEPAD and make whatever changes are necessary to determine the default number of rows and columns. | Click here to go to the answer section | | top | | bottom |

SUBMIT AND RESET BUTTONS, CLOSING A FORM PAGE

Finally we need something to allow the visitor to send the visitor information (that is, the contents of the form) to the server and to allow the visitor the option of starting over. Two buttons are then needed - one to SUBMIT the information or data to the server and one to REDO the information. Here are these two buttons again beginning with a "thank you":

Thanks for visiting!

Here are the commands I used to place these buttons beginning with the thank you. If your browser supports coloring blocks of text, you may have noticed that the "Thanks for visiting!" was printed in a maroon color. You can omit the FONT container element if you wish. <FONT COLOR="#800000"><H3 ALIGN="center">Thanks for visiting!<BR> <INPUT TYPE="submit" VALUE="Submit!"> <INPUT TYPE="reset" VALUE="Start over"></H3></FONT> Discussion: 1. TYPE="submit" creates a 3-D button that submits the visitor's form data when clicked on. 2. You can give the button a name (an instruction) by using the VALUE attribute. In our form I named it Submit! (VALUE="Submit!). Whatever instruction you decide to place on the button, just make sure it's clear that a click will send the visitor's information to the server. Problem 5: The VALUE attribute is optional. Switch to NOTEPAD and delete the VALUE="Submit!" so that the line now looks like: <INPUT TYPE="submit"> Save the change, load the changed HTML file into your browser. What is the default submit message (that is, the default instruction) on the submit button?

| Click here to go to the answer section | 3. TYPE="reset" creates a 3-D button that clears the entire form and resets everything back to the original values when clicked on. You can also give this button a name or instruction by using the VALUE attribute. You need to give the visitor an opportunity to start over with a fresh form - including all the default values. If everyone could fill out a form perfectly the first time, we would not need the "delete" and "back space" keys on the computer keyboard. So give your visitors a "reset" button that will restore the form to its original state, because sometimes it's easier just to start over with a clear form with all variables returning to their default settings. 4. The VALUE attribute for the reset button is used to give the instruction. In our form I chose to use the instruction "Start over" (VALUE="Start over"). Problem 6: The VALUE attribute for the reset button is also optional. Switch to your text editor and delete the VALUE="Start over". Save the change, load the HTML file into your browser. What is the default reset message? | Click here to go to the answer section | 5. <H3 ALIGN="center"> centers the buttons and strongly emphasizes the "thank you". 6. A form must have at least one submit button. In other words, more than one submit button is allowed. If each submit button has its own unique NAME attribute, then the name of the submit button selected by the visitor is sent along with the rest of the form data. This allows the CGI script to determine which button was pressed. For example, this can be done with: <INPUT TYPE="submit" NAME="submit_name" VALUE="Submit!"> where "submit_name" is the name assigned to the button and with each button having its own assigned name (part of the NAME/VALUE pairs to be sorted by the CGI script). You can also have one or more images instead of a button to submit the form data or have a combination of buttons and images to submit data. Each image can also have its own name so that the CGI script can determine which image was clicked on. Using an image to submit data is the topic of the next section. 7. The URL specified in the ACTION attribute of the FORM tag does not have to be an e-mail address or a CGI script. One of the reasons for not wanting this is to get a 3-D button which when clicked on takes you to a new page. For example, in Lesson 6 on links, part of the lesson creates buttons for linking to other pages using the FORM container element. For example, to create a simple 3-D button that links to my home page (index.htm), we have:

<FORM METHOD="GET" ACTION="index.htm"> <INPUT TYPE="submit" VALUE="Return to Home Page"> </FORM> If you now go back to Lesson 6, you will have a better understanding of the HTML coding involved in generating link buttons. Note that buttons are not normally used for ordinary links. Buttons are usually used only with forms and other situations that involve submitting data. Finally we MUST close the FORM page with the closing form tag which is </FORM> and end the HTML document with the usual closing BODY (</BODY>) and HTML (</HTML>) tags. | top | | bottom |

USING AN IMAGE TO SUBMIT FORM DATA

Instead of a submit button, you can use an image to submit the data information. With an image you don't need a "submit" button because the form data is automatically sent when the user clicks on the image. Here is the HTML code using an image to submit the form data: Name: <INPUT TYPE="image" SRC="image.gif" NAME="image_name"> Note the following points: 1. "image.gif" represents the name of the image (or the URL of the image to be used). If you do not precede the image with an instruction, the image should be selfexplanatory to the visitor. In other words, it should be clear to the visitor that the image is to be clicked on to send the form data to the server. 2. When the visitor moves the mouse pointer over the image, it will turn into a pointing hand indicating that the image is active. 3. When the visitor clicks on the image, the coordinates of the clicked point, measured in pixels from the upper left hand corner of the image, are also sent. The coordinates are sent as x and y coordinates. The x-coordinate is submitted with a ".x" appended to the NAME (which I called "image_name" - but you can give it any suitable name). The y-coordinate is submitted with a ".y" appended to the name. Try this feature to see it work. If you were using a map of the world as the image for example, you could ask the visitor to indicate the country where he or she lives by clicking on the map. From the coordinates, the CGI script can then determine the visitor's country or region. However, for most people, the coordinates will not provide any useful information. 4. If you want to use more than one image to submit the data, you can give each image its own unique NAME.

5. Note the absence of the VALUE attribute in this INPUT statement. The VALUE attribute is only used to place instructional text on buttons - not on images. With images, the coordinates of the clicked point take the place of the VALUE attribute ("NAME=coordinates" is sent to the server as opposed to NAME=VALUE in the name/value pairs). 6. As is always the case with images, you can use the ALIGN attribute to specify the alignment of the surrounding text with the image. Possible values are "top", "middle", "bottom", "left" or "right". 7. In general, you should only use an image at the end of the form to submit data because as soon as the image is clicked on, the form data is immediately sent to the server. You can, however, create a questionnaire out of images if you make the next question appear after the data from the last question has been sent to the server. | top | | bottom |

PASSWORD BOXES
TYPE="password" creates a single line text box except that when the visitor types in the box, the letters are hidden by bullets or asterisks. Here is the HTML code to set up a password into your form (beginning with the instruction): Please enter your password (max. 5 characters): <INPUT TYPE="password" NAME="visitor_password" SIZE="6" MAXLENGTH="5"> Note the following three points: 1. NAME="visitor_password" simply means that when the data is collected by the server, the characters typed in the password box will be identified by the name "visitor_password". 2. The SIZE attribute for the length of the box is optional. The default size, however, is dependent on the browser used. On many browsers, it is 20 characters. On my browser it is 29 characters. It is therefore recommended that you include the SIZE attribute for complete control of the box length. 3. The MAXLENGTH attribute is also optional. MAXLENGTH simply defines the maximum number of characters that can be entered. | top | | bottom |

HIDDEN TEXT
Hidden elements are used to store information gathered from one form so that it can be used with the data from another form. In other words, hidden elements are used by CGI scripts to transfer information from one form to another. Nothing is displayed by the

browser (that is, hidden elements are invisible (hidden) to the visitor), but the information is still sent to the server. Here is the HTML code for hidden text. <INPUT TYPE="hidden" NAME="hidden_text" VALUE="visitor_id"> Note the following points for this INPUT line: 1. The information to be transferred is assigned the variable name "hidden_text". 2. The "visitor_id" is the information itself that is to be transferred. 3. The hidden text can be placed anywhere in the body of the HTML form. Here is an example that involves hidden text. As you may know, I sell on this website a JavaScript course, and some other products and services. It used to be that a company by the name of Net MoneyIN processed all my credit card orders. If you clicked on the "order button", you left my website and were taken to Net MoneyIn's secure site to fill in the form with your credit card information. At the top of this secure order page was my company name (Brantford Educational Services) as well as the name of what you were ordering (for example, JavaScript Course), the price ($19.95), the number of copies being ordered (which was set to 1), and the total cost ($19.95). Now if this was the standard form used by all Net MoneyIn customers, how did my information get there on their secure order form? Well, the answer is through hidden text. Here is how it works: On my HTML web page that advertises my JavaScript course, the button that you clicked on to take you to Net MoneyIn's secure order page was a SUBMIT button in a FORM element. Here were some of the actual statements: <H3 ALIGN="CENTER"> <FORM ACTION="https://www.netmoneyin.com/scripts/orders/order.cgi"> <INPUT TYPE="hidden" NAME="sn" VALUE="Brantford Educational Services"> <INPUT TYPE="hidden" NAME="se" VALUE="bes@bfree.on.ca"> <INPUT TYPE="hidden" NAME="su" VALUE="http://www.htmltutorials.ca/ordering.htm"> <INPUT TYPE="hidden" NAME="pd" VALUE="JavaScript Course"> <INPUT TYPE="hidden" NAME="pp" VALUE="19.95"> <INPUT TYPE="hidden" NAME="ou" VALUE="1"> <BR><INPUT TYPE="submit" VALUE="CLICK HERE TO PLACE YOUR ORDER BY CREDIT CARD"> </FORM></H3> These are the HTML statements given to me by the people at Net MoneyIn. Note that my company name, "Brantford Educational Services" was stored in variable "sn". That is, "Brantford Educational Services" was the VALUE assigned the NAME "sn" (making up a "name/value" pair). I was not allowed to change the NAMES because they were used by Net MoneyIn for all their business customers to transfer the VALUE information to the order page when the order button was clicked. However, I was allowed to change the

VALUES. So if I had a new company name, or a new e-mail address, or a new price, I could make the change in my HTML document, and the new information was then instantly transferred to the secure order page when the SUBMIT button was clicked! All companies that were involved with Net MoneyIn had to use the same NAMES but with VALUES according to their own businesses. Also, when you clicked on the order button and went to Net MoneyIn's secure order page, you could choose SOURCE or DOCUMENT SOURCE from the VIEW menu to see my company name, book title, price, etc., as if they were typed in like any other part of the HTML document. They were, however, transferred to those spots as hidden elements by a CGI script when you clicked on the order button! | top | | bottom |

URL ENCODING
URL encoding is the format that the browser uses to package the data from a form when it is sent to the server. The browser gets all the names and values from the form input, encodes them as name/value pairs, translates special characters such as those used in encoding, lines up all the data and sends them to the server. A sample of encoded data is: visitor_name=John+Gilson&visitor_address=1725+Orrington+Ave.&visitor_city =Evanston&visitor_state=Illinois&visitor_country=United+States&visitor_code=60201 &visitor_email=bes@bfree.on.ca&visitor_website=http%3A%2F%2Fwww.bfree. on.ca%2FHTML%2F&rating=great&sex=male&interests=read&interests=internet ... and so on. URL encoding follows these rules: 1. Name/value pairs are separated by ampersands (&). 2. Each name is separated from its corresponding value by an equal sign (=). In cases when the visitor does not enter a value for a particular request, the name still appears in the output, but with no value (for example, "visitor_address="). 3. Some special characters are encoded in hexadecimal preceded by a percent sign (%). Special characters include =, &, /, : and %. 4. Spaces in the input are indicated by plus signs (+). The first step for the CGI script is to decode all that data so you can manage it better. Fortunately, CGI scripts do exist (or can often be easily made up) that will decode the name/value pairs into something you can more easily work with. You can begin by checking with your internet provider. For a small fee they may be able to provide the CGI script you need. If not, you can then search the internet for suitable scripts or you can obtain a free guestbook or a free form as discussed in the next section. These free guestbooks and forms include free access to CGI scripts to interpret the data.

| top | | bottom |

FREE FORMS AND GUESTBOOKS

I will end this lesson by stating that there are many places on the internet that offer free forms and guestbooks. You can obtain a free form or a free guestbook by visiting the following "Free Stuff Page":

http://www.thefreesite.com/
Not only do they have links to websites offering free forms and guestbooks, they also have links to a host of other free things such as free counters, free graphics, free games, etc., etc. The main difference between a free guestbook and a free form is that a guestbook is simply a very short form. With most free guestbooks, all the visitor has to do is enter his or her name, email address, and a comment (much like a real guestbook that you would sign at a function - a name and maybe an address or comment). If the visitor has a home page there is often also the opportunity to enter the URL. With a free guestbook, visitor data is usually posted so everyone can view all the comments that are made. Also, when a visitor chooses to sign the guestbook, he or she is taken to the website of the company that has the guestbook. That is, everything is done from a remote server which can slow things down a little. I tried out a number of the free guestbooks from the above location and they all worked. I wanted more than a simple short form for my guestbook. I wanted complete control over every item in my guestbook. I was able to do that from a company called Freedback.com whose URL is given below. Freedback.com offers free forms with a lot of flexibility. I did the complete HTML coding for my guestbook and used their CGI URL in the ACTION attribute of the FORM tag to decode the data. Complete instructions are provided by Freedback.com. If you want to see my guestbook coding which is based entirely on the information presented in this lesson, just visit my guestbook and choose SOURCE from the VIEW menu. My guestbook is in my directory on my ISP's server. This way I can add to the guestbook, delete items from the guestbook - make any changes that I want. With Freedback.com, you are able to have as many text boxes, check boxes, radio buttons, pop-up menus, etc. as you like. You are in complete control of what you want your form to look like and what goes into your form - and it's all FREE! Only when the visitor clicks on the "submit" button does the visitor information go to Freedback.com's server to be decoded by their CGI script. When the visitor chooses "submit", a summary of the form data is displayed to the visitor and at the same time, the decoded data is e-mailed to me. That is, Freedback.com sends me the same summary as displayed to the visitor. Freedback.com makes their money from the advertising that is displayed above the summary. Here is Freedback.com's website that offers the free form that I used:

http://freedback.com/?self
| top | | bottom |

ANSWERS
1. You could not type more than 34 characters. The MAXLENGTH attribute lets you define a maximum number of characters that can be entered in the text box. Keep in mind that a visitor can type in more text than will fit in the text box - so if you want to make sure there is a limit, use the MAXLENGTH attribute. 2. The default character length if you do not include the SIZE attribute is 20 for most browsers. Because you never really know how someone's else browser displays default values, you should always try to maintain control when possible. Thus you should include the SIZE attribute with your text boxes. 3. The words "My favorite website address is:" appeared in the text area box. If you want to have something written in the text area box when the form appears on the page (called "default text"), write the information just before the </TEXTAREA> as shown in the problem - that is between the opening and closing TEXTAREA tags. Note: Placing HTML coding in the text area box will not work. 4. To determine the default number of rows and characters per row, first remove the ROWS and COLS attributes so the line looks like: <P><TEXTAREA NAME="comment"></TEXTAREA> Then SAVE the changes, load the document into your browser and count the number of rows and the number of characters per row. The results will vary depending on the browser used. Many browsers will default to 4 rows and 40 characters per row. My browser defaults to only one row with 20 characters per row. To maintain control of the size of the text area box, I strongly recommend that you include the ROWS and COLS attributes. Here is a problem I did not ask you to figure out. What is the maximum number of characters that a visitor can enter into a text area box? Answer: 32,700 characters. 5. The default message is "Submit Query". 6. The default message is "Reset".

LESSON SEVENTEEN - MORE TEXT FORMATTING

REVIEW OF LOGICAL AND PHYSICAL TEXT FORMATTING
Until HTML 3.2 came along, web page designers were quite limited in their choices of text formatting. HTML 3.2 allows web page designers (that's you) to change the size, color and typeface of any of the words and letters on the web page (although some of these

options were previously available as Netscape extension tags). When these pages are viewed in browsers that support HTML 3.2, they can be quite attractive. In Lesson Four, you were introduced to two types of tags - that is, two types of formatting techniques. They were: 1. logical tags and 2. physical tags With logical tags or logical formatting, each browser formats the affected area as best as it can given the platform's strength and limitations. The great advantage of logical formatting is that while the actual formatting may not be the same from browser to browser, the effect is the same. Thus while one browser may show emphasis of text in italics, another may show it as bold. In any event, each browser will have emphasized the text in the best way that it can. Examples of logical tags are <EM> and <STRONG>. With physical tags or physical formatting, the browser is forced to print the text in exactly the way that the designer intends. If the browser does not support those choices, then the tags are ignored because the browser has no alternative way to display the text. Examples of physical tags are <I> and <B>. In this lesson, I am presenting some additional text formatting alternatives to complete what was begun in earlier lessons. Some of these alternatives are logical elements and some are physical elements. | top | | bottom |

THE BASEFONT TAG

The BASEFONT tag changes the size of ALL the body text after the BASEFONT tag except for HEADERS (defined by H1, H2, H3, H4, H5 and H6). Thus the BASEFONT tag is used to suggest a default font size. Here is the statement that changes the default size to 5: <BASEFONT SIZE="5"> Note the following discussion points: 1. BASEFONT is one word (no spaces). Most browsers now recognize the BASEFONT tag. 2. The SIZE attribute is an integer value ranging from 1 to 7. The default value is "3" which is the font size the browser normally displays. Thus SIZE="5" is considered to be 2 sizes (also called 2 levels or 2 steps) larger than the default size of 3. Since the actual size of text varies from browser to browser, it is impossible to define exactly how big one size is. We only know that SIZE="5", for example, is 2 sizes larger than the normal default size of 3.

3. Relative font sizes also work with the BASEFONT tag. To indicate a relative base font size, use the "+" or "-" with the number value. You can denote a relative base font size from +1 to +7 and from -1 to -7. For example, while <BASEFONT SIZE="5"> would set the default base font size to "5", <BASEFONT SIZE="+5"> would set the new default base font size 5 levels larger than the current base font size. A "relative" size is always given "relative" to the current default size. Thus while <BASEFONT SIZE="2"> gives a default base font of size "2", <BASEFONT SIZE="-2"> would give a base font size 2 levels smaller than the default size and <BASEFONT SIZE="+2"> would give a base font size 2 levels larger than the default size. 4. The BASEFONT tag is not a container element. That is, there is no closing BASEFONT tag. 5. BASEFONT applies to all normal and preformatted tags but not to headers. Be aware then, that using a BASEFONT tag could make the body text larger than the headers which could confuse your readers. 6. You cannot use BASEFONT to change the size of individual characters or of a block of text. There are other tags such as FONT, BIG and SMALL (also described in this lesson) that can be used for this purpose. 7. Use only one BASEFONT tag in each HTML document as the BASEFONT tag affects all the succeeding text. Normally the BASEFONT tag is used to change the base font of the entire page and if this is the case, the BASEFONT tag should then be placed right after the opening BODY tag. Thus you would have the HEAD, TITLE and BODY tags followed by the BASEFONT tag. 8. Choosing a large base font size may not look good in some browsers. However, you can use the BASEFONT tag to increase the size of your text in short web pages to give a little more importance to the whole page. Conversely, you can use a smaller base font in lengthy text intensive pages to fit more text on a page. 9. In general you should have a good reason to change the base font size of your text. Users may already have specified in their browser settings how they prefer to view text. | top | | bottom |

CHANGING THE FONT SIZE OF ONE OR MORE CHARACTERS OF TEXT

NBE

LI

EVA

BLE!

he FONT tag can be used to change the size of one or more characters of text or of an

entire block of text. Changing the font size of a few characters or of a few words is a good way to make your text stand out or to create some interesting effects. To change the font size of a few characters or of a block of text to size "4", the FONT tag is: <FONT SIZE="4">text text text</FONT> Discussion: 1. FONT is a container element in that it has an opening FONT tag (<FONT>) and a closing FONT tag (</FONT>). 2. The SIZE attribute indicates the size that the font is to be changed to. Sizes range in value from 1 to 7. The "T" in "The" in the above paragraph "The Font tag can be used to ..." was printed in a font size of "7". A value of 3 is the default size (the same as the default size with BASEFONT). Thus if you do not use a FONT tag, the text size that the browser uses is equivalent to a font size of 3. 3. The word "unbelievable!" above was written in a "fisheye" pattern (changing the font size of each letter in an ascending and then descending pattern). The word begins with a font size of 1 for the letter "U", a font size of "2" for the "N", a font size of "3" for the "B" and so on, to a font size of 7 for the letter "E" and then going down one level at a time ending with a font size of "1" for the "!". If the word "unbelievable" was printed in all the same size characters, then your browser does not support the FONT tag for changing the size of characters. 4. Here is a summary of the various font sizes:
This is a font size of 1

This is a font size of 2

This is a font size of 3

This is a font size of 4

This is a font size of 5

This is a font size of 6

This is a font size of 7

5. The SIZE attribute can also take on a relative value. A relative size will change the font size relative to the current font size. You can, of course, define the current font size with the BASEFONT tag. In other words, if the BASEFONT tag is used, all relative font changes in the document after the BASEFONT tag will be relative to

that value. As discussed in the last section, use the + or - with the values to indicate a relative size. Relative sizes range from +1 to +7 and from -1 to -7. Thus: <FONT SIZE="+2">text text text</FONT> will print the text 2 levels or 2 steps larger than the default font. and <FONT SIZE="-3">text text text</FONT> will print the text 3 levels smaller than the default font. 6. Use the FONT tag to change only a few characters or a few words. Use the BASEFONT tag to change the font size of the entire page. 7. You should avoid making extreme font changes if possible. They can make a document hard to read. 8. Do not use the FONT tag to take the place of header tags (H1, H2, H3, H4, H5 and H6). One of the reasons for this is that some search engine indexers rely on the six header elements to generate an overview of the document, and they will not be able to adequately index your document if you use FONT instead of the HEADER elements. FONT should only be used as an enhancement of your presentation. Try to limit your use of the FONT tag to small amounts of special effects. 9. Although most popular browsers now support the FONT tag for changing the size of text, you should also continue to use the <STRONG> and <EM> tags to emphasize text. This is because FONT is a physical tag which means that if a browser does not recognize the FONT tag, the text will still be emphasized through the <STRONG> and <EM> tags. 10. Finally, any browser which supports the FONT tag will not allow the user to disable it. | top | | bottom |

BIG AND SMALL TAGS

The BIG and SMALL tags were Netscape extensions, but became a standard with HTML 3.2. These tags change the relative size of a given word or phrase with respect to the surrounding text. BIG and SMALL are both container elements. That is, all the text that is contained between the opening and closing tags is affected by the tag. Use the BIG tag to make the text a little bigger and use the SMALL tag to make the text a little smaller. The format for making the text a little bigger is: <BIG>text text text</BIG> and the format for making the text a little smaller is:

<SMALL>text text text</SMALL> However, not all browsers display the effect of the BIG and SMALL elements in the same way. In fact, when combined with the BASEFONT or FONT tags, the results can be unexpected. For example, in Firefox and Netscape, text formatted with BIG is always one size larger than the surrounding text. In Explorer, text formatted with BIG is also always one size larger than the surrounding text, unless the surrounding text is size 7 in which case BIG has no effect. Text formatted with SMALL is one size smaller than the surrounding text, unless the surrounding text is size 1, in which case SMALL has no effect. Now, as long as the text is normal size (3), Firefox, Netscape and Explorer all display BIG and SMALL in the same way. So, if you want to ensure that the text is one level larger, it may be safer to use the FONT tag with a SIZE of +1 (<FONT SIZE="+1">) instead of the BIG tag, and use <FONT SIZE="-1"> instead of the SMALL tag to reduce the size by one level. Nesting BIG tags as in: <BIG><BIG>text text text</BIG></BIG> will produce text in a larger font than with just one BIG tag. Similarly, nesting SMALL tags may produce text in a smaller font than with just one SMALL tag. Keep in mind that while you are allowed to nest BIG and SMALL tags, the results are undefined. That is, the results can't be predicted for all browsers. | top | | bottom |

CHANGING THE FONT FACE

The FONT tag with the FACE attribute allows you to specify the face of the font. Early versions of HTML do not allow you to specify a particular font. HTML 3.2, however, does allow you to specify which fonts you would prefer to have the web page or just a portion of the text displayed in. If the browser does not support the desired fonts, the text is simply rendered in the default font. Here is a list of some font faces. If some or all are still written in the normal default browser font, then your browser does not support changing the font face in those situations. <FONT FACE="arial">This is arial font</FONT> <FONT FACE="algerian">This is algerian font</FONT> <FONT FACE="braggadocio">This is braggadocio font</FONT> <FONT FACE="courier">This is courier font</FONT> <FONT FACE="desdemona">This is desdemona font</FONT> <FONT FACE="garamond">This is garamond font</FONT> <FONT FACE="modern">This is modern font</FONT>

Note the following points: 1. The above list is not meant to be an exhaustive list. Try other fonts to see what you can come up with. For a list of possible names, just go to your word processor or another program that allows you to choose from various fonts. 2. You may list as many fonts as you wish in the FONT tag. Just remember to separate each choice with a comma and a space as in: <FONT FACE="arial, courier, modern"> Using this method, if the browsers recognizes the first font listed, it will use that one. If it doesn't recognize the first font listed, it will go to the second font and use it. If it doesn't recognize the second font, it will move to the third one and so on until it finds one it knows or until the list is exhausted. In other words, the browser will use the first one available that it recognizes. If it doesn't recognize any of the listed fonts, the text will simply be displayed in the default mode. If you use this method, you should then write the font faces in order of preference. The FONT tag is a versatile tag. It is used to change the text size, font face and also to change the color of blocks of text. You can combine all these attributes into one FONT tag as in: <FONT SIZE="4" FACE="arial" COLOR="#FF00FF">text text text</FONT> | top | | bottom |

BLOCK QUOTES
You can use block quotes to set off a section or block of your text from the surrounding text - such as a quotation by a famous author. To be more specific, you use the BLOCKQUOTE element if you are quoting more than a few lines from a document. Block quotes are often printed with indented margins or simply printed in italics (BLOCKQUOTE is a logical tag). If the margins are indented, then both the left and right margins are indented. In e-mail, the standard symbol for a block quote is ">". Here is an example using BLOCKQUOTE to quote from a book. The HTML coding follows the example.

CAMPING ETIQUETTE - FIRE SAFETY

According to the Canadian Automobile Association in their book "Outdoors Canada" - A Unique and Practical Guide to Wilderness and Wildlife, this is how you should practice fire safety when camping in the great outdoors: Be especially careful with fire and fuel. Put out a campfire by dousing it with water. Stir the wet ashes until all sparks are extinguished, then cover the ashes with earth.

Don't carry wooden matches loose in a pocket - if you fall or slide on them they could ignite. Better still, use safety matches. Store fuel containers in the shade and keep them away from flames. Always extinguish a stove or lantern before disconnecting or refilling its fuel tank. Now here is the complete HTML coding for this example: <H2 ALIGN="CENTER">CAMPING ETIQUETTE - FIRE SAFETY</H2> According to the Canadian Automobile Association in their book "Outdoors Canada" - A Unique and Practical Guide to Wilderness and Wildlife, this is how you should practice fire safety when camping in the great outdoors: <BLOCKQUOTE> <P>Be especially careful with fire and fuel. Put out a campfire by dousing it with water. Stir the wet ashes until all sparks are extinguished, then cover the ashes with earth. <P>Don't carry wooden matches loose in a pocket - if you fall or slide on them they could ignite. Better still, use safety matches. Store fuel containers in the shade and keep them away from flames. Always extinguish a stove or lantern before disconnecting or refilling its fuel tank. </BLOCKQUOTE> Note the following points: 1. BLOCKQUOTE is one word (no spaces). This tag was also part of HTML 2.0 so all browsers support this tag. 2. Do not use BLOCKQUOTE simply to create indented text. It is not considered good HTML coding practice and you may not achieve the effect you want in all browsers. It could also confuse search engine page indexers and summarizers. 3. It is also recommended that text not be placed directly between the opening and closing BLOCKQUOTE tags. You should begin a block quote with an HTML tag such as I did above with the <P> tag. However, all three main browsers (Explorer, Firefox and Netscape) will still display a block quote correctly even if you ignore this rule. 4. I used the <P> tag two times in the above example. BLOCKQUOTE can also contain other text formatting techniques such as <EM> and <STRONG>. 5. If you quote from someone else's work, don't forget to include a credit and/or copyright notice. | top | | bottom |

SUPERSCRIPT AND SUBSCRIPT SUPERSCRIPT

Superscripts are letters or numbers that are raised slightly relative to the normal text as in: The temperature outside is 78oF.

SUP stands for SUPerscript and if your browser supports superscripts you should see the degree symbol raised slightly. I used the lower case letter "o" for the degree symbol. Here is the HTML coding for the above line: The temperature outside is 78<SUP>o</SUP>F. SUP specifies that the enclosed text should be printed in superscript. That is, SUP is a container element and so anything contained between the opening and closing tags will be raised or superscripted.

SUBSCRIPT
Subscripts are letters or numbers that are lowered slightly relative to the normal text as in: The chemical expression for water is H20. The HTML coding for this statement is: The chemical expression for water is H<SUB>2</SUB>0. SUB specifies that the enclosed text should be printed in SUBscript. SUP and SUB are often used in mathematical formulas. At one time these tags were Netscape extension tags only. However, they became standard in HTML 3.2 for defining both kinds of offset text. So all browsers support these tags. | top | | bottom |

CITE, CODE, SAMP, TT, KBD, VAR and ADDRESS TAGS

All seven of these container elements are ways to format your text - usually in a monospaced font. A monospaced font has each character taking up the same amount of space on the browser screen (a carry over from the old "typewriter days"). Thus a lower case "f" would take up as much space as the upper case "W". "Courier" is a popular example of a monospaced font. Of all the tags given in the title of this section, TT is the most common and it is also the only physical tag. The others are all logical tags. If your browser supports some or all of these elements, you will see them here as follows: <CITE>This is CITE font</CITE> <CODE>This is CODE font</CODE> <SAMP>This is SAMP font</SAMP> <TT>This is TT font</TT> <KBD>This is KBD font</KBD>

<VAR>This is VAR font</VAR> <ADDRESS> This is ADDRESS font </ADDRESS> Some of these fonts give identical results - yet each has its own purpose in HTML coding. You should therefore use each element only in the context they were designed for. Now for a discussion of each element: CITE CITE is the logical tag for enclosing a citation - such as the title of a book or magazine. CITE normally prints the citation in italics, the same as <I> does - however, CITE is less widely recognized and less widely used than the "I" element. Do not use CITE for anything but titles of cited works. For example, in a web page, the person could be discussing HTML and wants to cite a reference. He/she could cite for example: In the book, HTML CODING, 1997 the writer states that blah, blah, blah ... The HTML coding for this statement is: In the book, <CITE>HTML CODING, 1997</CITE> the writer states that blah, blah, blah ... If you do use CITE for other things, it can confuse others studying your coding and it will also confuse search engine indexers that automatically extract information from your documents. Use <EM> to emphasize in italics and use <I> for text which must appear in italics. In HTML 3.2, there is no tag to mark up short cited phrases. For longer cited phrases, you can use the BLOCKQUOTE element. CODE CODE is used to enclose a sample of computer code and also to emphasize pieces of code inside a block of text such as: In the computer program, the line FOR I=1 to 10 sets up the counter. The HTML coding for this statement is: In the computer program, the line <CODE>FOR I=1 to 10</CODE> sets up the counter.

CODE usually gives a monospaced font. If you need to deal with larger blocks of code (several lines of code), it is recommended that you use the PRE element (discussed later in this lesson). SAMP SAMP is used to indicate a sample of text which should be used literally. For example,: The error message General Protection Fault is well known to Windows users. Here is the HTML coding for this statement: The error message <SAMP>General Protection Fault</SAMP> is well known to Windows users. SAMP will usually be rendered in a monospaced font. Now if you must have a monospaced font, do not use SAMP. Instead use TT. TT TT stands for TeleType font (also known as Typewriter Text). It is the only font in this group that is considered physical formatting. It is also the monospaced marker that is used most often. It is used to simulate typewriter output. Since TT is a physical element, if a browser does not recognize the tag, it will be ignored. For this reason, it may be better to use CODE or SAMP as these are logical tags that allow the browser to pick the best possible rendering in each case. KBD The KBD element is used to indicate text which should be entered by the user. In other words, use KBD in your discussions when you want to indicate that input from the viewer is required. It is usually printed in a monospaced font although some browsers may choose to print it in some other manner such as in bold face. If you want to ensure a monospaced font, use the TT tag instead. Here is an example: Remember that when asked for a standard installation, type yes at the input prompt. Here is the HTML coding for this line: Remember that when asked for a standard installation, type <KBD>yes</KBD> at the input prompt. VAR VAR is used to mark up variables. The variables could be marked up in a monospaced font or it could be marked up in some other way such as italics. If you were discussing a

computer program for example, you would use VAR to refer to the variables used in the program such as the statement: In the BASIC program, the variable c is used for the loop counter. Here is the HTML coding for this line: In the BASIC program, the variable <VAR>c</VAR> is used for the loop counter. ADDRESS The ADDRESS element should be used if you want to enclose contact information - such as addresses and phone numbers. It is also used to enclose the signature file of the author of the web page. In most browsers the text will be rendered in italics, possibly with a slightly indented margin. If the text is not printed in italics, it will be rendered in a monospaced font. Here is an example: John Gilson 6 Pioneer Place Brantford The HTML coding for the above is: <ADDRESS>John Gilson<BR> 6 Pioneer Place<BR> Brantford</ADDRESS> You may have noticed at the beginning of this section when all seven elements were compared, that only the opening and closing ADDRESS tags force line breaks. In other words, the HTML coding: My street address is <ADDRESS>1327 Orrington</ADDRESS> and my city is <ADDRESS>Chicago.</ADDRESS> produces: My street address is 1327 Orrington and my city is Chicago. Closing remarks for this section 1. Monospaced tags will not have any effect in browsers that display all their text in monospaced fonts.

2. To format several lines of monospaced text - especially if you require extra spaces use the PRE element. 3. All three main browsers (Explorer, Firefox and Netscape) display monospaced fonts in the same way. | top | | bottom |

UNDERLINING TEXT
The container element for underlining text is <U> as in: <U>text to be underlined</U> Unless it is very important to emphasize text by underlining, you are encouraged to avoid this tag. Browsers use underlining to indicate hyperlinks and many viewers could be confused if they see "links" that do not work - especially viewers with black and white or grayscale monitor screens. In fact, many graphical browsers do not support underlined text since underlined text makes it harder to distinguish the text from links. Also, Lynx displays text within the EM and STRONG tags with an underline and so viewers can be confused by further underlining. | top | | bottom |

PREFORMATTING TEXT WITH <PRE>

When you are working on an HTML document in a text editor such as NOTEPAD, you know that you can place as many spaces between words as you like (with the SPACE BAR) or place as many blank lines as you like (with the ENTER key). One reason for doing this is to enable you to section off portions of text so that they will be easier to spot later. No matter how many spaces you have between words, you will only see one space between adjacent words when the HTML document is loaded into the browser. In other words, any additional blank spaces and blank lines are ignored. In HTML talk, this is called "collapsing spaces". Thus when an HTML document is loaded into the browser, the browser decides where to divide each line of text - depending mostly on window size - and collapses all extra spaces and blank lines. There are of course ways to force extra spaces such as with the ampersand command (&nbsp;) and blank lines can be inserted with the <P> and <BR> tags. The PRE element allows you to keep the original line breaks and spacing that you have inserted into the text in your HTML document. In other words, spaces are not collapsed. This is called preformatted text. Preformatted text is ideal for homemade tables and art. Text inside the PRE tag will be displayed in a monospaced font with some browsers (such as Explorer browsers) displaying the text one level smaller. When building an HTML document in a text editor other than NOTEPAD, be sure to use a monospaced font (such as Courier) so that you can see exactly what the table or art will look like in the browser. NOTEPAD automatically prints text in a monospaced font.

Here is an example of a table done entirely with the <PRE> tag. This table compares two sets of units to measure capacity and their conversion factors in the English system of measurement:
CAPACITY Liquid Measure 16 fluid ounces = 1 pint 2 pints = 1 quart 4 quarts = 1 gallon Dry Measure 2 pints = 1 quart 8 quarts = 1 peck 4 pecks = 1 bushel

Here is the HTML coding for this table:

<PRE> <STRONG>CAPACITY Liquid Measure Dry Measure</STRONG> 16 fluid ounces = 1 pint 2 pints = 1 quart 2 pints = 1 quart 8 quarts = 1 peck 4 quarts = 1 gallon 4 pecks = 1 bushel </PRE>

Here is a WORD SEARCH puzzle that was also done using the <PRE> tag. To see the HTML coding for this one, just choose SOURCE or DOCUMENT SOURCE from the VIEW menu. This puzzle comes from a magazine called "BIRDS & BLOOMS - a subscription magazine all about birds, flowers and for those who love the great outdoors. The author of this puzzle is Janet Flower of Oregon. Directions: All 30 of the flower words listed below are found in the puzzle. They appear across, up, down, backward and even diagonally. Find the words and circle them. All the remaining letters will spell the mystery word. The mystery word is given at the end of this lesson.
AMARYLLIS AZALEA BLUE GENTIAN CROCUS DAFFODIL DAHLIA DAISY DAPHNE DELPHINIUM GENTIAN L Y B P U P M U J Y I N L A R L J O N Q L O U M U I A I N U Y E E A P D N A I T O P G R S O D A H L GLOXINIA GRAPE HYACINTH HYACINTH JOHNNY JUMP UP JONQUIL LARKSPUR LAVENDER LILY LILY OF THE VALLEY LUPINE F N E Y K F C R O C T O N L R F A Z A L H G T L A A L U P I E A I I L D D A P H V R A S R E D N E V A D N D S M A I N N L P E A E U P I L U L A S I G M T E L O MARIGOLD MUM PEONY PETUNIA ROSE SEGO SNAPDRAGON TULIP VIOLET ZINNIA E N A S O D L O G I Y S V Y M U I N I H

N N H O J

U I L R H

T E P O T

N E G S N

I A A E I

U S I H C

E A N T A

N E I N Y

N E X I H

A L O C E

I Z L A P

T Y G Y A

I V L H R

R A M I G

P L E D L

Discussion: 1. PRE is a container element and so everything between the opening (<PRE>) and closing (</PRE>) tags will be part of the formatting. PRE is used to include sections of text in which formatting is critical. Text contained within the PRE element will only be wrapped at the line breaks in the HTML document and spaces will not be collapsed. A line break in the HTML document occurs when you hit the ENTER key. 2. As you can see from the above two examples, if you must use the table format but don't want to use TABLE tags, you can use preformatted text to line up the information in table like columns. Because PRE uses a monospaced font, the table may not look quite as nice as it would with TABLE tags. 3. Tables made with preformatted text will be readable by all browsers - not just the ones that currently support official tables. 4. You can use tabs to indent text. However, it is better to create multiple spaces using the SPACE BAR since those spaces will always be the right number. 5. You may have noticed in the CAPACITY conversion table that the headings were strongly emphasized. Text-level markup is allowed inside the PRE element. However, not all tags are supported. If you need to mark up your text, you should do it after you set up all your text in the HTML document since mark up tags take up space in your HTML document but not on the page in the browser. 6. Because preformatted text is displayed in a monospaced font to retain the formatting, you cannot include tags that change the font of the text inside the PRE element. Images are also excluded because they can cause problems with alignment. An image can't be translated to a certain number of characters. 7. The <P> tag is not allowed inside the PRE element. If a browser encounters this tag, it will either ignore it or insert two blank lines. Using the <BR> tag will force one blank line. Keep in mind that with the PRE element, you don't need these tags as the ENTER key forces the lines breaks for you. 8. There is an optional WIDTH attribute that can be used to indicate how wide the text area is to be (for example: PRE WIDTH="50"). This would allow the browser to pick a font which fits the entire text in the window. However, you should keep in mind that the WIDTH attribute is not widely supported yet. | top | | bottom |

BLINKING TEXT
Another way to make your important text stand out is to make it blink continually. If your browser supports the blink element, you should see the title of this section, "BLINKING TEXT", blink. You can also make links blink. Here is the HTML code to make text blink:

<BLINK>text text text</BLINK> Discussion: 1. The BLINK element is a Netscape extension tag and is not part of HTML 3.2. While BLINK works great in Firefox and Netscape, it does not work in Explorer. Explorer just ignores the tag. 2. The BLINK element causes the text between the opening and closing tags to have a blinking affect. Depending on your browser, if it supports the BLINK tag, it will either make the text disappear and appear at regular intervals or a large white block continually appears and disappears behind the text. 3. You cannot blink text in the TITLE of your HTML document. 4. Images can be included in the BLINKING container element but they will not blink. Only text can blink. 5. Blinking text blinks in a slightly lighter shade of its normal set color. 6. Be aware that blinking text can be annoying to a visitor. With animated images, when the web page is loaded, the visitor can always click on the STOP button to stop the animation. Clicking on the STOP button will not stop text from blinking. Also, blinking words will continually draw attention to that one spot and, in some cases, can make it difficult to absorb the contents of the page. You will, however, find a good number of pages on the WWW that includes this blinking feature. Since blinking words will be irritating to some visitors, if you still want to use it, use it sparingly (no more than a few words on a page). | top | | bottom |

ADDING A COMMENT
Adding a comment is not a mark-up tag but I thought I would include it here in this lesson. Adding comments to your HTML document is a diagnostic tool that can be used to remind you (and future web designers/editors) what you are trying to achieve. Comments do not appear on the web page. In other words, comments are invisible to the viewer. Here is the HTML coding to specify a comment. <!-- your comment goes here --> Note the following points: 1. A comment begins with "<!--" and ends with "-->". 2. Comments are used for describing things such as why a particular tag is being used and what effect was hoped to achieve. Comments are also a great way to add reminders to your text - reminders such as when to include, remove or update certain sections. Comments are also used to indicate the beginning and ending of a piece of code such as:

<!-- BEGIN LINKEXCHANGE CODE --> . . . <!-- END LINKEXCHANGE CODE --> Remember that while comments are invisible in the browser, they do appear when viewed in a text editor or when a viewer chooses SOURCE or DOCUMENT SOURCE from the VIEW menu in the browser. 3. If you want to state that your HTML document complies with HTML 3.2 standards then the following simplified comment line must be the very first line in your HTML document - before the HEAD tag: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> The WWW Consortium has released a draft version of HTML 4.0 and if your HTML document complies with this draft, the DOCTYPE line must be: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">

LESSON EIGHTEEN - INDEX OF HTML 2.0 AND HTML 3.2 TAGS

http://www.htmltutorials.ca/lesson18.htm