You are on page 1of 237

INTRODUCTION TO HTML - html tutorials in web page design by J.

Gilson

LESSON ONE - INTRODUCING HTML
You may read the following sections in their entirety or use these choices to go directly to a section. | Understanding HTML | | Different Versions of HTML | | The Netscape Problem | | Netscape no longer supported | | HTML software to assist in web page design |

UNDERSTANDING HTML
HTML stands for HyperText Markup Language. H yper T ext M arkup L anguage LET'S BREAK THIS DOWN A LITTLE FURTHER

HYPER
You may have heard the expression "hyper" in describing someone. In simplest terms, it means active, kind of "all over the place". The word "Hyper" as part of HTML is similar in context. It simply means that when you are on the internet using a browser such as Netscape Navigator or Internet Explorer, you can in fact, go "all over the place". In browsing through the World Wide Web (WWW), if you see something you like, you can go immediately to it. There is no set order to do things in. Hyper is the opposite of "linear". Linear means that there is a certain order you must follow such as "you must do this before you can do that". Programming languages such as BASIC and FORTRAN are linear. HTML does not hold to that and allows you to jump to any page on the WWW and at any time. Thus the word HYPER refers to the idea that the text in HTML is not linear.

TEXT
We are working with text only files. More on that in Lesson Two.

MARKUP
"Markup" comes from the fact that in order to create web pages, we will be typing in the text and then "marking up" the text. If you are familiar with WordPerfect, consider this example. Suppose you just typed a document in WordPerfect. If you choose REVEAL CODES from the VIEW menu, the monitor screen or Window splits into two parts. The top half of the screen shows the text you typed in and the bottom half shows the same text but with the words marked up with "codes" or "tags". For example, suppose you typed the following three lines in WordPerfect: Hi, this is bold LESSON ONE - INTRODUCING HTML 1

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson This is italics These words are centered If you choose REVEAL CODES, you would see the following on the bottom half of your screen in one version of WordPerfect: [Bold On]Hi, this is bold[Bold off][HRt] [HRt] [Italic On]This is italics[Italic Off][HRt] [HRt] [Just:Center]These words are centered[HRt] In other words, the text has been marked up with codes or tags as indicated between the [ ] symbols. Each [HRt] indicates that the ENTER key was pressed. [Bold On] means that everything after this tag is bolded. The [Bold Off] tag simply says that bolding is to end here. Unless you choose REVEAL CODES, you won't see these tags. All word processors have codes that tell the computer how to display the document, how to print it out, etc. In HTML, WordPerfect tags or the tags from any other word processor won't work. HTML has its own set of tags to mark up text. If you want something bolded or centered, you have to indicate so with HTML tags. WordPerfect automatically puts the tags in for you. In HTML, you must put in the tags yourself. If you want to see the tags for this page, just choose VIEW from the menu bar of your browser and then choose SOURCE or DOCUMENT SOURCE.

LANGUAGE
"Language" means that we are using a language with all its syntax. Note that HTML is not a programming language such as BASIC or FORTRAN. These are linear programming languages and are based on a whole different set of rules and are far more complicated to learn. The HTML language is easy to learn (trust me).

| top | | bottom |

DIFFERENT VERSIONS OF HTML HTML 1.0
The original version of HTML was HTML 1.0. It had very limited features which greatly limited what you could do in designing your web pages.

HTML 2.0
HTML 2.0 then arrived and included all the features of HTML 1.0 plus several new features for web page design. Until January, 1997, HTML 2.0 was the standard in web page design.

MARKUP

2

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson

HTML 3.0
HTML 2.0 served its purpose very well, but many people designing web pages (called HTML authors or webmasters) wanted more control over their web pages and more ways to mark up their text and enhance the appearance of their websites. Netscape, the leading browser at that time, introduced new tags and attributes called the Netscape Extension Tags. Other browsers tried to duplicate them but Netscape did not fully specify their new tags and so these extension tags did not work in most other browsers. It led to considerable confusion and problems when HTML authors used these tags and attributes and then saw that they didn't work as expected in other browsers. At about that time, an HTML working group, led by Dave Raggett, introduced the HTML 3.0 draft which included many new and useful enhancements to HTML. However, most browsers only implemented a few elements from this draft. The phrase "HTML 3.0 enhanced" quickly became popular on the web but it more often than not referred to documents containing browser specific tags (discussed below in "The Netscape Problem" section), instead of referring to documents adhering to the HTML 3.0 draft. This was one of the reasons why the draft was abandoned. HTML 3.0 is now an expired draft. Another reason why HTML 3.0 did not make it was because it was so "big". Future versions were now to be introduced in a more "modular" way so that browsers can implement them modular by modular or bit by bit.

HTML 3.2 (WILBUR)
As more browser-specific tags were introduced, it became obvious that a new standard was needed. For this reason, the Word Wide Web Consortium (W3C), founded in 1994 to develop common standards for the evolution of the World Wide Web, drafted the WILBUR standard, which later became known as HTML 3.2. HTML 3.2 captures the recommended practice as of early 1996 and became the official standard in January, 1997. Most, if not all, popular browsers in use today fully support HTML 3.2.

HTML 4.0 (COUGAR)
In the early days, HTML 4.0 was code-named COUGAR. This version introduces new functionality, most of which comes from the expired HTML 3.0 draft. This version became a recommendation in December, 1997 and a standard as of April, 1998. Explorer has done a very good job in implementing the many features of HTML 4.0. Unfortunately, Netscape has not kept pace. The latest version of Netscape Communicator still does not recognize the many tags and attributes introduced with HTML 4.0. This means that a web page that involves HTML 4.0 specific tags will look great in Explorer but can look disastrous in Netscape.

XHTML 1.0
You would think that the next major version after HTML 4.0 would be HTML 5.0 and with it would come a bunch of new tags that would do all sorts of wonderful things. That would be a good guess - but it would also be a wrong guess. The next version of HTML after HTML 4 is XHTML. XHTML stands for EXtensible HyperText Markup Language. EXtensible Hyper Text Markup Language

HTML 3.0

3

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson XHTML 1.0 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. XHTML 1.0 is the result of the hard working World Wide Web Consortium (the W3C) to bring some sort of standard to provide rich high quality web pages through these varied devices. XHTML became an official W3C recommendation in January, 2000. XHTML is now a web standard and is the next generation of HTML.

| top | | bottom |

THE NETSCAPE PROBLEM
As stated above, in the early days of HTML, Netscape created a number of its own tags (extension tags) to HTML 2.0 that were not part of the official HTML 2.0 version. In other words, Netscape created a number of additional tags that would work beautifully in Netscape, but were not supported by other browsers such as Internet Explorer. Many of these extension tags did not even make it into HTML 3.2. This means that if you were using Netscape extension tags, while they may create good looking web pages in Netscape, the same pages viewed in Explorer would look entirely different and in fact give results that you did not want. These problems illustrate the case for the need of a standard language that can be used by all browsers. Imagine what will happen if each browser were allowed to develop its own tags. You will simply end up with all browser specific web pages. It would become impossible to design web pages that will work in all browsers. We need continuity and we need a standard language for all browsers. Netscape has argued that their extension tags will not shut down or hang up other browsers. Thus if another browser does not recognize a Netscape extension tag, it will simply ignore it - as if it didn't exist. Therefore if you centered text on a web page using a Netscape extension tag, then the text simply wouldn't be centered in these other browsers. While I have concentrated on the Netscape problem, the same arguments can also be stated for Explorer browsers for they too have their own extensions that are not supported by Netscape and other browsers such as Firefox

So what do we have here? Well, in summary, we have:
1. HTML 2.0 tags 2. HTML 3.2 tags 3. HTML 4.0 tags 4. Netscape extensions 5. Explorer extensions Sounds confusing? Well it really isn't that bad. Basic web page design is, in fact, easy to learn. In this course we will be designing web pages using HTML 3.2 standard code because HTML 3.2 tags and attributes are accepted by most, if not all, versions of the most popular browsers in use today. I am assuming that you will XHTML 1.0 4

These browsers will still be around for long time yet as people will continue to use them and you can still download them.2 content. Then Explorer started to take a larger share of the market at the expense of Netscape. Netscape v6. We will also study a number of Netscape and Explorer extension tags because you should be aware of what they are. there is no more active product support for Navigator 9. Sometimes a web page can look great in one browser but not so great in another browser. and Netscape Navigator/Messenger 9. Netscape was regarded as the leader in web browsing. Even if 80% of the people use high level browsers that can view your web pages in the way you want them viewed.2 then many of these tags will only work when viewed in Explorer. it is the end of the development of Netscape branded browsers.x. Some of you may also want the control that these extension tags give . develop and release new versions. we have: 5 . Using Netscape extension tags that are not part of HTML 3. This includes Netscape v1-v4. So what does all this mean? The Netscape team fully stands behind the great work being done by the Mozilla Foundation and recommends that you download Mozilla Firefox and give it a try. or any previous Netscape Navigator browser. it still means that 20% or several million viewers will not be able to view your web pages in the way you want them viewed. Today. there are no more updates on security patches and no more active product support. You want the widest possible audience. in summary. However. So it is good to check your work So what do we have here? Well. You can even add Netscape themes and extensions. there is no more support for Netscape web browsers. At one time Netscape browsers dominated the browser market. | top | | bottom | NETSCAPE NO LONGER SUPPORTED In 1999.2 simply means that many of these tags will only work when viewed in Netscape.even if it means shutting out a portion of the audience on some of your web pages. You can create excellent web pages using HTML 3. Netscape Browser v8. AOL continue to support. The first Mozilla-based Netscape browser was version 6 and it was released in 2000. Netscape v7 Suite. There are many surfers surfing with Firefox. there will be no more security updates to keep us safe on the web with Netscape browsers. you may wish to download a copy of Firefox. We need to keep these things in mind when designing web pages.INTRODUCTION TO HTML . There was also still much effort within AOL to revive Netscape Navigator. Similarly if you use Explorer extension tags that are not part of HTML 3. 2008. That is. It is a popular browser with many good features. More on Netscape in the next section. It is just that the support is no longer there. At one time. Gilson want as many people as possible to be able to read your web pages. Mozilla Firefox is a current web browser that is very secure and it has the look and feel people have grown accustomed to with Netscape. That is. As a result. It is recommended that you view your web pages in both Explorer and Mozilla. AOL has not been able to get the Netscape browser developed to a point many of its fans expect it to be.html tutorials in web page design by J. In other words. these efforts have not been successful in gaining market share from Microsoft's very popular Internet Explorer. The bottom line is that due to time and cost. If you are serious in creating a personal or business website or creating websites for others. Soon after AOL's acquisition. And if you are planning to make some money with your website. the Netscape suite also became known as Mozilla. As of February 1. Explorer dominates the market and appears to be the browser of choice for most people. AOL acquired Netscape Communications Corporation. you certainly do not want to leave out any potential customers.

However. However. you will have a much better understanding of what you are trying to accomplish with these market programs. Gilson in various browsers such as Explorer.html tutorials in web page design by J. hence I am trying to learn HTML to correct them. So I went surfing and found your website. When I finish my web page there will be a note of thanks and link to your website.flock. There is no doubt that learning the basics of the HTML language is necessary to fully understand these web page design programs. If you would like to learn more about the Flock browser or to download your own copy. USA. in order to get maximum use out of these programs. It also states that the team that build Netscape is largely still together and is the same team that brings you the Flock browser today. Note: These lessons address Internet Explorer. To illustrate what I am trying to say.. I'm off work due to an illness. Firefox and Netscape. It would be good to know what tags are browser specific or what tags will work only in a high level browser. It also goes on to say in the pop-up window that Flock is secure.com. now when I open Netscape I get a pop-up window that says "Netscape and AOL support migrating to the Flock browser. I've got some great ideas and can't wait to get started on my own page..INTRODUCTION TO HTML .mozilla. give you all the features of HTML. I must say that I am impressed. While all of them will give a basic home page. you need to understand HTML and what it can do for you in the design of web pages. I am also sure that there are programs on the market (and new programs coming out all the time) that do incorporate most of the features of the various versions of HTML. | top | | bottom | HTML SOFTWARE TO ASSIST IN WEB PAGE DESIGN Should I not simply use one of the programs on the market that makes up web pages for me? You could. I am teaching myself how to create my company web page using FrontPage and I have an embarrassingly simple web page on Geocities. the results will be the same as in Firefox. You can download your free copy of Firefox from www. here are three unsolicited testimonials I received. Still. It would be good to know what will work in most browsers and what won't work. I can actually understand what you are talking about although I am brand new to HTML. Like Firefox. She writes: "I can't thank you enough for taking the time to explain HTML. Being bored out of my mind I decided to try to create a web page without any knowledge of HTML. Thank you so NETSCAPE NO LONGER SUPPORTED 6 ." Here is an email I received from Brenda who lives in Illinois. The programs I used did the basics. but I found them confusing because I lacked the knowledge of HTML. if you are using Flock. Someday you may want to experiment with some of these programs. Karen.com. After going through all the lessons. I decided to dump the programs and do all the coding myself. Flock is the evolution of the same technology that Netscape was built on and is available in a variety of languages. Knowing HTML will allow you to tweak and fine tune a web page to perfection. Many do not. Having said that the Mozilla Foundation supports Mozilla Firefox. the award winning Flock browser is also powered by Mozilla and built for the way you use the web today. a number of them are limited in what they can do. Some trouble has occurred in FrontPage with extensions and color changes. Netscape and Firefox. and fun. My greatest appreciation. She writes: "I have printed all of the pages of your lessons and am impressed at the level of information it contains. for example. reliable. visit the Flock website at www. If you understand the basics of HTML. This first one is from Karen who lives in the state of Georgia. You could also use an HTML program to assist you with some of the basic stuff and then code the rest yourself with your knowledge of HTML.

She writes: "After being overwhelmed by HomeSite. Brantford Educational Services. 1997 . please report it to htmltutorials@bfree. relax. Gilson much for taking the time to create these lessons. USA. and the pace is perfect.INTRODUCTION TO HTML . | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Two | The information contained in these free 21 lessons is Copyright ©. and learn a whole new language called HTML. Your problems are instructive. and constrained by templates on free space websites. So now sit back.html tutorials in web page design by J. I'm not advocating that we "dump" these programs. THANK YOU!" I have also received many other e-mails from people expressing similar view points. If you find a copyright violation. Then if you do run into some problems with these programs.on.2009 by local and international copyright laws. this is exactly what I was looking for.ca HTML SOFTWARE TO ASSIST IN WEB PAGE DESIGN 7 ." Our third email is from Sharon who lives in Pennsylvania. that's easy to follow. It is therefore illegal to copy these lessons into another website. You will be happy you did. concise way. They are fabulous! Brenda. You write in a wonderfully clear. But the point to be made is that it is better to take some time and learn HTML first. For some people they are very essential in designing websites and in updating them. you will know how to correct them. All rights reserved.

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson

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

LESSON TWO - GETTING STARTED

8

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson 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. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? 9

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson 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: ♦ Choose File from the menu bar, then from the drop down menu, choose Save As.

PLACING THE NOTEPAD ICON ON YOUR DESKTOP

10

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson ♦ 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. ♦ In the File name box, type in a suitable file name along with an extension (either .htm or .html). ♦ 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

SAVING YOUR WEB PAGE (YOUR HTML FILE OR DOCUMENT)

11

You will then need to locate your web page.htm or index. don't worry. choose All Files (*.*) in the Files of type box and the name should then appear. Assuming that we have the proper computer platforms.htm.on. Now here are some questions to answer.you can not edit in the browser.html and still others will allow it to be either index. Some may state that it is to be index.bfree.htm Each internet service provider or host has its own default file name for home pages.html tutorials in web page design by J.html. You can only observe your file in the browser . The answers are given at the end of this lesson. and the name does not show up in the correct folder in the dialog window. click on the file name and then click the OK button. There may also be a few providers that have another name instead of index.html SERVER REQUIREMENTS FOR NAMING HOME PAGES 12 . Click on the name and then on the Open button. you will get a chance to practice saving and loading in Lesson Three. ask the internet company who is going to host your website. the next time you are surfing the WWW.ca/comdir/retire/buchanan/ you will be connected to their home page which is: http://www. Once you have seen how your web page looks in the browser. (2) If you use a word processor other than NotePad or WordPad. Your HTML file will appear in the browser. 1. try the above method to see if you can connect to someone's home page. it must be All Documents (*. Once you activate your browser.*).on. In the case of WordPad. you may first need to CLOSE the HTML file before it can be loaded into your browser. choose File from the menu bar. Others may state that it must be index.INTRODUCTION TO HTML . which of the following are legal names for web pages? a) contents. NOTE: (1) If you want to LOAD an HTML file for the first time into NotePad.bfree. What does HTML stand for? 2. Also. you can then SWITCH back to NotePad to continue working and editing.ca/comdir/retire/buchanan/index. If you do not know what you should name your home page. and then choose Open or Open File or Open File in Browser (one of them should be in the File menu). With NotePad and WordPad this is not necessary. you need to SWITCH over to your browser which is running in the background. Gilson If you were to erase the file name in the address location line so that it looks like: http://www. | top | | bottom | LOADING YOUR WEB PAGE INTO YOUR BROWSER Once you have saved your web page (your HTML file or document).htm b) ordering. If some of this sounds confusing.

Answer True or False: HTML web pages are always saved as text only files. and then includes a description or comment on each listing. etc.com is a good place to start if you are looking for something free. on the internet). Some of these hosting companies also offer unlimited E-mail addresses. Gilson c) homepage. you want a free web page hosting service. If you go to your favorite search engines and do a search on "web page hosting" or "web page providers" or "web hosting service".com checks out each internet company before advertising their free services on TheFreeSite. There are many internet companies willing to host your website for free. TheFreeSite. and you do not want to pay any money to have your website hosted. Here is one of my web hosting sponsors that you can check out: Get your personalized Domain for $7.htm f) products-warehouse. If you would like a free website I would suggest that you click here to visit http://www. 4. So TheFreeSite. The actual page that lists these companies is located at http://www. Most have easy to learn instructions on how to transfer your website to the internet through their hosting service. To place your website on the internet.htl e) ThankYou505.com/Free_Web_Space/index. counters and site stats. you need a host. you need to find an internet company to host your website.thefreesite. you may wish to place it on the World Wide Web (that is.95 and sign up for Free Web Hosting service with Doteasy for one year with 1 GB transfer On the other hand. In other words. If these companies are willing to host your website for free.thefreesite. What web page will display if the URL is www. you may only have a small internet business or a personal web page. That is.htmltutorials. Some will even provide sponsors that will pay for visitors you send from your free website.com website..INTRODUCTION TO HTML . There are hundred of companies willing to host your website for under $10 per month with your own domain name.com where you will find a listing of several internet companies that offer free hosting services plus a host of other free things. then what is the catch? The catch is that you will be required to display some form of advertising . You will of course be required to purchase your domain name which today is relatively cheap. message boards.ca? | Click here to see the answers | | top | | bottom | GETTING YOUR WEB PAGE ON THE INTERNET When you finish creating your website. LOADING YOUR WEB PAGE INTO YOUR BROWSER 13 . there will be no shortage of search results to check out.html. personalized domain names.such as advertising their services to all your visitors.txt d) faq.html tutorials in web page design by J. Many of these companies are good companies giving away lots of free web space .html 3.more than you will likely ever need. guestbooks. You may have an internet business and willing to pay a monthly fee to have your website hosted.

This website also compares these top ranked sites including reviews on each of them. If you are serious about setting up a website for a business. I would go with (2). If you want a professional looking website then I would suggest that you avoid hosts with pop-up advertising windows. you can't have multiple email addresses. a window pops up which the visitor then has to close. For example. A counter will tell you how many visitors visit your website. A free is nice but often there is a catch of some kind. It is a frames page with the title ("Lesson 13 .Frames") in one horizontal frame that never moves. If I had to choose between (1) and (2). charity or for a personal website. Yes. 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. So pay this site a visit for the best hosting plans and web hosts. Many people find these pop-up windows very annoying and it tends to turn them off. and the lesson itself in another frame with a scroll bar so that you can scroll through the lesson. With free hosts. hobby. That is. Gilson Checking out all these internet companies offering free web pages can be confusing so here are two suggestions on what to avoid: 1. there is a good chance you will not get very good placements. then consider purchasing a domain name and paying for a website host to host the website. | 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.INTRODUCTION TO HTML . 2. a counter keeps track of the number of hits to your website. Try to avoid an internet company that will place your website in a frame and their advertising in another frame.hostname). A counter cannot be created with HTML. 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. For this reason. can't have your own domain name (they tell you what form the domain name takes such as http://hostname/~yourname or http:www. there may be a few free hosts that have great options. It requires a scripting language to make a counter (such as a JavaScript or a CGI Script). almost everyone gets a free counter and free counters are GETTING YOUR WEB PAGE ON THE INTERNET 14 . Some of these were discussed above. Frames are not studied until Lesson 13 but if you want to see what a frames page looks like now. The cost for a domain name is not expensive and you can find a host for under $5 per month. you should try to find a host that avoids both (1) and (2). What happens here is that every time a visitor displays a page from your website.com for a list of top ranked hosts that charge less than $5 per month. Try to avoid a hosting company that places their advertisements in a pop-up window.yourname. can't run scripts (such as those needed to interpret the contents of a form). Look for a host that will require you to display a banner instead of pop-up windows.com does include hosts that do not require the displaying of pop-up windows and frames. Thus if you intend to place your web page with the search engines. I would suggest that you check out webhostingsearch. These pop-up windows are also a sure sign that your web page is being hosted for free. However. you are often limited in what you can do.html tutorials in web page design by J. The setup for a host that places your website in a frame is about the same. but that is not the norm. just click here to see my Lesson 13. TheFreeSite.

com/Webmaster_Freebies/Free_counters_and_trackers/index. HTML stands for HyperText Markup Language. Counters are usually placed at the bottom of a web page. what browser they are using. the extension (or suffix) must be . You can get a counter that gives data in colorful 3D graphs.html tutorials in web page design by J. you should not start a name with a dash or underscore. c) homepage. click here to visit http://www.htm or .htl is not a legal name. If you would like to check out some free counters for your website.ca). d) faq. | top | | bottom | ANSWERS 1.com claims to offer the web's largest collection of freebies and that their free stuff listings are the most complete on the internet. background color. month and year. There is no web page filename given. or styles that you can customize by text color. However.htm is a legal name as numbers are allowed in the file name. The extension must be .htm is a legal web page name. I tend to agree with them. TheFreeSite. Thus the company giving you the free counter will also provide everything you need along with complete instructions. font. etc. Even though web pages are saved as text only files. How do you access all this other information about your visitors? Well. and even how long they spent browsing your site. Many counters also give you information such as hits by the hour. 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.com. Gilson plentiful. True 4.html is a legal name. what their computer screen resolution is.html is a legal name as dashes (and underscores) are allowed. These free counters come complete with all the necessary coding to place on your website.htmltutorials.thefreesite.txt is not a legal name. 3. You are only given the domain name (htmltutorials. f) products-warehouse. One company offers a counter that will even tell you what keywords your visitors used to locate you. GETTING A COUNTER FOR YOUR WEB PAGE 15 . but they can also tell you where a visitor comes from. 2. the browser will display http://www. It is a great newsletter giving you the latest in freebies. Many counters not only keep a running total of hits to your website. In other words. e) ThankYou505.html. Therefore the default web page will be displayed which is the home page.thefreesite.html.htm or . While you are visiting TheFreeSite. you may wish to subscribe to their free newsletter. day. week. size.com where you will find a listing of several internet companies that offer free counters. a) contents.INTRODUCTION TO HTML .html. Just cut & paste the coding that they provide and you have a counter on your website. 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. There are all kinds of counters that you can choose from. b) ordering. The actual page that lists these companies is located at http://www.ca/.

ca ANSWERS 16 . Gilson | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Three | The information contained in these 21 free lessons is Copyright ©.2009 by local and international copyright laws. It is therefore illegal to copy these lessons into another website. All rights reserved. 1997 . Brantford Educational Services.html tutorials in web page design by J. please report it to htmltutorials@bfree. If you find a copyright violation.INTRODUCTION TO HTML .on.

<HR> <HR> puts a line across the page. <P> and <HR> tags | | <HTML> and </HTML> tags | | Correct use of tags | | <HEAD>. You type in your text and your tags. To tell the browser that something is a tag. <BR> tells the browser when a line has ended while <P> tells the browser to leave a blank line and begin a new paragraph.and this is easy to do. we need a way to tell the browser that something is a tag .UNDERSTANDING THE BASIC TAGS 17 . etc. centered text. the browser is also told to go to the beginning of the next line.. The two lines you see below were put there with <HR> tags. Thus we have an opening angle bracket "<" and a closing angle bracket ">" around each tag. This concept is called content-based markup. <P> <P> for Paragraph tells your browser to insert a blank or empty line and then begin a new line (a new paragraph). BR stands for line BReak. These tags are more accurately called ELEMENTS and you should think of these elements as describing the meaning of the text they contain. the cursor goes to the beginning of the next line. text in italics.INTRODUCTION TO HTML . rather than how the enclosed text should be displayed. indented sentences. The LESS THAN symbol is "<" and the GREATER THAN symbol is ">". With <BR>. <TITLE> and <BODY> tags | HTML TAGS HTML works in a very straightforward manner. you simply place "less than" and "greater than" symbols around them. bold text. LESSON THREE . When you press the ENTER key. <P> and <HR> TAGS <BR> <BR> tells your browser to go to the beginning of the next line. HR stands for Horizontal Rule.html tutorials in web page design by J. We will get more into this in Lesson Four when we study web page design. as opposed to presentational markup. colored text. To get large print. | Tags | | <BR>. is nothing more than inserting tags around your text. Because we don't want the tags (elements) to appear in the browser. | top | | bottom | <BR>. The <BR> tag does this for you. Gilson LESSON THREE . 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. These symbols are also called "Angle Brackets". <BR> acts in the same way as the ENTER key on your keyboard. I have also heard them called "pointed brackets".UNDERSTANDING THE BASIC TAGS You may read the following sections in their entirety or use these choices to go directly to a section.

An example of a correct sequence of tags is: <tag1><tag2> statements </tag2></tag1> In this example. 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. Therefore HTML is called a container element.INTRODUCTION TO HTML . the last tag opened (<tag2>) is not the first tag closed. 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. That is. </tag2> must come before </tag1>. You can therefore think of the <HTML> and </HTML> tags as "containers". <P>. You should use the HTML element for each of your web pages. tags are closed in reverse order to the way they are opened. You do this with the tags <HTML> and </HTML>. your web page simply won't work. <HTML> is the beginning tag and </HTML> is the ending tag. Recall that HTML stands for HyperText Markup Language which is the language of web page design. An example of an incorrect placement of tags is: <tag1><tag2> statements </tag1></tag2> In this example. Thus the first tag opened must be the last tag closed. Thus <HTML> tells the browser that what follows is an HTML document and </HTML> tells the browser that the HTML document is completed. That is. | 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>). containing the entire HTML document. The forward slash before the tag (</ >) cancels the effect of the tag. This is true for all tags that affect text. these tags overlap. If you do not place tags properly. Therefore this example does not satisfy the LIFO principle. and then <tag2>. Many elements consist of an opening tag and a closing tag. Thus <tag2> must be terminated first with </tag2> followed by the termination of <tag1> (</tag1>). In other words. <BR>.html tutorials in web page design by J. Use the "Last In = First Out" principle or "LIFO". we first need to learn how to set things up properly in an HTML document (or file as it is also called). Gilson | top | | bottom | <HTML> and </HTML> tags Before we can try out the <BR>. When the document is completed we also need to indicate this. <tag1> is activated first. and <HR> features. Closing Tags cannot be placed just anywhere. Every HTML document should first be declared that it is in fact an HTML document. Container tags cannot overlap each other. <P> and <HR> TAGS 18 .

After you have typed it in. </TITLE>. and type in the following HTML web page. blah. my name is John Gilson. In the Save As dialog window. 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). click into the Save as type box and choose All Files.<BR> This is my first attempt at a Web page. CORRECT USE OF TAGS 19 .<HR> Here is a riddle for you. 2. It is good to be actively involved in each lesson. From NotePad's File menu. Here are the steps if the coding was typed into NotePad: 1.BASIC TAGS</TITLE> </HEAD> <BODY> Hi. blah </tag4></tag3> blah blah blah </tag1> | Click here to see the answer | | top | | bottom | <HEAD>. you will save the document and then view it in your browser. blah </tag2> <tag3> blah blah blah <tag4> blah. This will display the Save As dialog window. Here is the web page.<BR><BR><HR> </BODY> </HTML> Before we study this web page. <P>Why did the lobster blush?<HR> Because it saw the salad dressing. <tag1><tag2> blah. Please type: <HTML> <HEAD> <TITLE>WEB PAGE DESIGN . Gilson 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. </HEAD>. blah. <TITLE>.INTRODUCTION TO HTML .html tutorials in web page design by J. so please SWITCH to NOTEPAD. <BODY> and </BODY> tags In this section we will study the HEAD. let's save it. choose Save As.

We <HEAD>. From the File menu choose Open or Open File (whatever your browser says). Then switch to your browser and click on the Reload or Refresh button to reload the current page. click on OK. You do not see this information displayed in your browser. 4. It tells the browser that the HTML document is finished. Here is a riddle for you. It is called the opening HTML tag. but only if you group all the tags that go in it at the top of the document. <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. or information such as those needed for a Search Engine are placed between the <HEAD> and </HEAD> tags. This is my first attempt at a Web page. To avoid any potential problems.html tutorials in web page design by J. Now lets see what the web page looks like in your browser. Each web page must have the HEAD element. It can be seen by choosing Source.INTRODUCTION TO HTML . If you get an Open window. These opening and closing HTML tags make up the HTML element of our web page. Everything else can be left as is and so click on OK. <HEAD> and </HEAD> tags Next comes the HEAD element which. you will see other statements between the <HEAD> and </HEAD> tags. The HEAD element can actually be omitted. The web page is now saved. 3. Statements (or tags) that give information to a person visiting your website. This is what you should see in your browser: Hi. <TITLE>. my name is John Gilson. The HEAD tag must not contain any text or normal markup tags. Take me back there now. 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). type in the name riddle. Once the correction is made. click on the name and then click on Open. The first line in the coding reads <HTML>. Thus the HEAD part of a document provides information about the document. Note: If you made a mistake typing in the coding for the web page.htm. 2.html instead of . like the HTML element. Gilson 3. Why did the lobster blush? Because it saw the salad dressing. It tells the browser that what follows is an HTML document. <BODY> and </BODY> tags 20 . We will first discuss the important elements that should appear in all web pages. Open your browser. If it does. In the File name box. It is called the closing HTML tag. You should now see your riddle web page. </HEAD>. If fact. The last line in our coding reads </HTML>. Here are the steps: 1. If you go back to my home page and choose Source from the View menu. Browse to the folder where the web page is saved. I would suggest that you include the HEAD element in your own documents. You can of course enter any suitable name and also the extension . all you need to do is to click on NotePad's Save button to save the changes.htm. the browser will assume that it is in the BODY part of the document (studied below). switch back to NotePad and make the correction. </TITLE>. the latest web standard (XHTML) demands that it be included. When you find the file. also has an opening and closing tag.

Most search engines insist on a short title and a general rule of thumb is no more than 75 characters including spaces. If you place all the HEAD elements first. <HTML> <HEAD> <TITLE>WEB PAGE DESIGN . Notice that this title is placed by the browser at the very top of the screen . Of course the tags will not be displayed on the browser screen. it is the title that appears in the list. Below the coding are the results once again when viewed in the browser. I also like the idea of declaring things for what they are.INTRODUCTION TO HTML . The information you provide in the title is also used to label the bookmark entry for your web page.html tutorials in web page design by J. You will notice that each of my lessons has its own title that describes the general content of the lesson.above the menu choices. containing the body of your document. the browser will know where the actual body begins. <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 BODY tag can actually be left out.and the latest web standard (XHTML) demands that it be included. Below the results is a discussion of the BODY part of the document and some questions for you to answer. I believe it is still a good rule to include the BODY tag . That is. The body of each of your Web pages is declared through the BODY element. Thus the BODY element contains the actual contents of the document. the title should be short.<HR> Line 3: Here is a riddle for you. It is the part that will be displayed on the browser screen. The title in our example (line 3) is "WEB PAGE DESIGN .<BR><BR><HR> </BODY> </HTML> <HEAD> and </HEAD> tags 21 . Therefore you should take time to make up a good descriptive title for each of your web pages. The TITLE of your web page must occur between the <TITLE> and </TITLE> tags and you are only allowed one TITLE element per page. when a visitor bookmarks your site (adds it to their favorites list). my name is John Gilson.<BR> Line 2: This is my first attempt at a Web page. The tags only tell the browser how to display the information. <BODY> and </BODY> tags After the title comes the main body of your Web page. Most search engines also use the title in search engine results. 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. Thus the <BODY> and </BODY> tags are container tags. Line 4: <P>Why did the lobster blush?<HR> Line 5: Because it saw the salad dressing. <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.BASIC TAGS". Gilson will study these statements in a future lesson when we learn how to get your web pages on the World Wide Web. the <TITLE> and </TITLE> tags must be placed between the <HEAD> and </HEAD> tags.BASIC TAGS</TITLE> </HEAD> <BODY> Line 1: Hi. Because we do not want the title to be displayed on the browser screen. In general. It contains all the text and tags.

html tutorials in web page design by J. The first <BR> tag tells the browser to go to the beginning of the next line. 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. Do you have to indent tags? | Click here to go to the answer section | IN SUMMARY. Gilson Hi. The <HR> tag then placed the line across the page. Here is a riddle for you. 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. Why did the lobster blush? Because it saw the salad dressing. It simply tells the browser to drop down to the next line. I wanted to leave a blank line before the third and last Horizontal Rule is placed by the browser across the page. WE HAVE: <HTML> <HEAD> <TITLE>the title or name of your page goes here </TITLE> </HEAD> <BODY> . some of the tags were indented (such as <HEAD> and <TITLE>). This is my first attempt at a Web page. . The <HR> tag at the end of line 2 placed the first line across the page. my name is John Gilson. 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. I did this with two <BR> tags (line 5). <BODY> and </BODY> tags 22 . Notice that the <HR> tag does not place any blank lines (empty rows) above or below the Horizontal Rule.INTRODUCTION TO HTML . Discussion: Notice the <BR> at the end of line 1.")? | 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. Problem 3: One <P> has the same effect as two <BR> tags since the <P> tag forces a blank line before continuing on.

I could have placed the <P> tag at the end of line 3 as in: Here is a riddle for you. You end lines with <BR> as it tells the browser to BReak here and begin a new line. The answer is given in the answer section (no cheating now). 4. All tags are terminated in the reverse order to the way in which they were activated. . There are no more paragraphs and so the <P> tag should not be used as it denotes the beginning of a new paragraph. all your web page work goes here in this section . the World Wide Web Consortium (W3C) ANSWERS 23 . 2. this is not considered good form in HTML. Having said that. <HEAD> and <TITLE> tags have already been typed in. <BR>. Of course you can also end any line or paragraph with an <HR> tag. 6. Gilson . Two <BR> tags may have the same effect as one <P>. These tags satisfy the principle of "LIFO". Actually.html tutorials in web page design by J. No. (Actually there is a </P> tag that can be used to end a paragraph.0 was introduced. Let's assume that the <HTML>. It does not imply the end of a paragraph. They are also known as "stand alone tags". I use upper case letters so that I can easily and quickly identify tags from text when working with my web pages.INTRODUCTION TO HTML . This closing tag is discussed in the next lesson. Horizontal Rule. <P> and <HR> are three examples that do not require an ending tag. <BODY> I am learning a lot about designing my own web pages. In HTML.) 3. <P> does have an optional closing tag which is </P>. 5. Therefore you should never end a line or paragraph with a <P> tag. However. </BODY></HTML> | top | | bottom | ANSWERS 1. No. but we have reached the end of the HTML document. </BODY> </HTML> Problem 8: Based on your knowledge of the basic tags. The <P> tag stands for Paragraph and so implies the beginning of a new paragraph. . This </P> tag isn't used very much. You can write in lower case letters if you want to. Yes.<P> It would have given the same results. but it does have its uses and we will take a look at the </P> tag when we study centering text in Lesson Four. HTML is not case sensitive. write down exactly what you think will be printed by your browser for the following HTML document. when HTML 4.

You can insert as many spaces as you like.html tutorials in web page design by J. This will make it easier to spot the sections later when you are looking for them. 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. Today web pages are being viewed in browsers through cell/mobile phones. So with XHTML. plus a host of hand-held wireless devices and communicators. the browser is unable to determine when you want the line to end or when you want blank lines. the latest web standard is XHTML. which is studied in detail in Lessons 42. XHTML is not bringing with it a lot of new tags. You can use blank lines to section off portions of your work. That is why everything was printed on the same line as one statement.2009 by local and international copyright laws. Brantford Educational Services. So you may wish now to write all your tags and attributes in lower case letters. No. 43 and 44. This standard. XHTML is designed to address these technologies.ca ANSWERS 24 . Since there are no <BR> or <P> tags in the document. XHTML also begins to address the need for those with disabilities (such as the blind and visually impaired) to access the internet. All rights reserved.INTRODUCTION TO HTML . If you write your tags in upper case. The purpose of XHTML is to address the new browser technologies that is sweeping the world. cars. the rules have really tightened up. This is how the browser will interpret this HTML document: I am learning a lot about designing my own web pages. The browser can only read text and has to be told through the use of tags what to do with the text. Also. 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. and I will show you how in Lesson Five. Why are the rules tightening up? As I state in Lesson 42 (in the additional lessons). 1997 . the large space between the words "a" and "lot" was ignored. If you want more space between words or to indent lines and paragraphs. Gilson recommended that only lower case letters be used. As stated in Lesson 1. In many cases. there is a way to do it. | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Four | The information contained in these free 21 lessons is Copyright ©. You do not have to indent tags. If you find a copyright violation. 7. does not allow upper case at all. but the browser only allows for one space between words and sentences. This lower case rule happens to be just one of several rules. It is therefore illegal to copy these lessons into another website. please report it to htmltutorials@bfree. Thus web pages written in XHTML will allow them to be viewed on a wide range of browsers and internet platforms. televisions. the web page will not validate as XHTML.on. Alternate ways to access the internet are continually being introduced. You can use this to your advantage when making up your web pages. 8.

You also need to design your pages for content. Also. it would be better to tell the browser to "emphasize" the text through the "emphasis tag". Now with the passing of time. but it could also be something else. and text that you thought were highlighted by color will not be highlighted in these other browsers. The boldface tag was also originally a Netscape extension tag and so not recognized by a number of browsers. The italics tag was originally a Netscape extension tag that was not recognized by a number of other browsers. Thus the appearance of the heading in your browser could be different in another browser. | Designing your Web page | | Header tags | | Centering text | | Emphasizing text | DESIGNING YOUR WEB PAGES Just how should you design your web pages? Well. In any event. 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. As a result the color attribute is simply ignored. you are assuming the browser will recognize the "boldface" tag. it has no way to determine an alternative. it will fit into one line. there are still a number of tags out there that are browser specific. The same is true for bolding text. Content based markup allows LESSON FOUR .TAGS THAT AFFECT THE APPEARANCE OF YOUR TEXT 25 .INTRODUCTION TO HTML . Also keep in mind that some browsers and servers do not support graphics. this would be italics but it could also be rendered as something else. you could tell the browser to "print these words in italics". If you tell the browser to bold a portion of text to make it stand out from the rest of the text.html tutorials in web page design by J. the text will be emphasized in some manner. the font size could be a little bigger and the heading will not fit on one line. but in another browser with a little smaller font size. you should not design your pages only for appearance. you may be able to fit a heading neatly on one line in your browser while in another browser. you could add color to certain portions of text or you can highlight certain words with color to make them stand out. That is. Color is used to change the appearance of text. it would be better to tell the browser to "strongly emphasize" the text. She now designs her pages with this in mind. In your browser. For example. Or the reverse could be true." 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. That is why you sometimes see a statement such as "This web page is best viewed in Internet Explorer. a heading may not fit on one line in your browser. In most browsers. Instead. many people still use browsers that do not support coloring portions of text. 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. 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. Instead. 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. One person told me how surprised she was to see her web pages look so differently in another browser. A user also has the option of turning off graphics to speed up the loading of web pages. Gilson LESSON FOUR . However.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. So while it looks great in your browser. it may look great. In most browsers this will be boldface. If a browser can't perform the appearance change. it will not give the same looks in other browsers. Using the italics tag.

Just follow through on the following examples involving logical tags. <H2>THIS IS H2.</H3> THIS IS NORMAL SIZE. THIS IS NORMAL SIZE. This is what you should see in the browser window: THIS IS H1. It should all become clear. If all this sounds too confusing. <H3>THIS IS H3. | top | | bottom | HEADER TAGS Headings are controlled by HEADER tags. Then I would suggest you come back and read again this introduction on "Designing Your Web Pages". To compare the different levels of headings. There are only six HEADER tags and they range from H1 to H6. don't quit on me.</H4> THIS IS NORMAL SIZE. HEADER tags not only make your headings larger (or smaller).</H1> THIS IS NORMAL SIZE. You are encouraged to use logical tags because the browser can then pick the best way to display the text on the screen. Tags that are based on content and not on appearance are called LOGICAL TAGS. H1 produces the largest size heading and is called the "level 1 heading". <H5>THIS IS H5. 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. H6 produces the smallest size heading and is called the "level 6 heading".</H6> THIS IS NORMAL SIZE. 26 .</H5> THIS IS NORMAL SIZE. Gilson for browser independence.html tutorials in web page design by J. THIS IS H1.<HR> </BODY> </HTML> Now SWITCH to your browser and load the document. <H4>THIS IS H4. HEADER tags are logical tags and used extensively in HTML documents to display headings. <H6>THIS IS H6.</H2> THIS IS NORMAL SIZE. they also bold the headings at the same time.INTRODUCTION TO HTML . 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.

THIS IS NORMAL SIZE. Gilson THIS IS H2. for example. that H1 means "very large bold text" in every browser.but you can't assume true in all browsers. THIS IS NORMAL SIZE. THIS IS H4. In most browsers. It will in most browsers . It can be anything the browser chooses it to be . Something does not seem to add up. The Level 2 heading (H2) is the second most important heading. The headers are often used by these search engines to build an "outline" of the document which appears in the THIS IS H2. is considered to be the most prominent or most important heading.which could be defined by the viewer. A Level 1 heading (H1). THIS IS NORMAL SIZE. Study the above HTML document again and answer the following problems. the HEADER tags print the headings in boldface. This means that you cannot assume. • Some search engines give words appearing in headers more importance in their index. Problem 1: Which heading size is closest to the normal size? Problem 2: Compare the document file with the results in your browser. 27 . if you use a Level 2 heading for a title or heading.INTRODUCTION TO HTML . THIS IS NORMAL SIZE. Good HTML form dictates that HEADER tags should be used in hierarchical order. THIS IS NORMAL SIZE. 2. The answers are given at the end of this lesson. <H1> gives the largest size heading while <H6> gives the smallest size heading. state some of the inconsistencies. then the next size to use for a sub-title would be a level 3 heading. THIS IS H3. From what you have learned so far in these lessons. Note the following points: 1. 3. THIS IS H5. because it is the largest heading. keep in mind that they are logical tags. | 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. That is. THIS IS H6.html tutorials in web page design by J. These will be fully explained in the answer section. it is more prominent than a Level 3 heading (H3) but less prominent than a Level 1 heading. For example. Don't jump all over the place with your heading levels.

4. Choose DOCUMENT SOURCE from the VIEW menu if you want to see how I centered these lines. 28 . 2. be sure to try also ALIGN="RIGHT" and ALIGN="LEFT" (which is the default value if the ALIGN attribute is not used). a heading will be centered. then just put them in. tells the browser to align something and the second command (CENTER) tells the browser to align it THIS IS H3. An attribute can have a value. Since our two examples have only letters in the value ("CENTER"). ALIGN is the attribute for the Header tag. ALIGN is the attribute for the Paragraph tag. 5. The maximum length of an attribute and its value is 1024 characters including the quotation marks if used. 3. The second example is used to center whole portions of text . Gilson search results.which could be several lines of text. In the first example. the ALIGN part is called an attribute. the quotes may be omitted. a blank line will automatically be inserted before and after the heading. In other words. the browser is told to place (align) the heading in the "center" of the line. we use the </P> tag which is the closing paragraph tag. In the first example.INTRODUCTION TO HTML . numbers. For this section. 1. If you are ever in doubt about the quotes. An attribute provides extra information about the tag and the text it encloses.html tutorials in web page design by J. In the first example. This </P> tag is a new tag for us and one that you may not end up using all that often. | top | | bottom | CENTERING TEXT You can see from my lessons that I make good use of centering headings and titles. the ALIGN attribute has the value "CENTER". They may be written in lower case. In ALIGN="CENTER". my heading "CENTERING TEXT" was centered using the H3 Header tag. The value must be enclosed in quotation marks if it contains anything more than letters. When you do the example. The first command (ALIGN). In the next example. ALIGN="CENTER" is also called a "command within a command". and remember that because we are using a Header tag. If a viewer should make the browser screen smaller. In our two examples. Otherwise placing the quotes around the value is optional. hyphens and/or periods. But it does have its uses and this is one of them. To end centering a block of text. the heading will still remain centered in whatever the new screen size is. In the second example. 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. Of course the attribute and value do not have to be written in upper case (capital) letters either. we are centering a "paragraph" or "block of text" with each line centered on the screen just as these lines are centered (hopefully). a "heading" is centered (as indicated by the H2).

html tutorials in web page design by J.</EM> Camping. which will also include the centering of the heading.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. These were alluded to at the beginning of this lesson under "Designing Your Web Pages". <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: CENTERING TEXT 29 .2 and accepted by all browsers. Gilson in the center.INTRODUCTION TO HTML . Sometimes you will see documents use only the CENTER command (no ALIGN="CENTER") to center text as in: <CENTER> . You are therefore encouraged to use ALIGN="CENTER" for centering headings and paragraphs of text. fishing (<EM>walleye.5 square miles. Please SWITCH to NOTEPAD and type in the following HTML document: <HTML> <HEAD> <TITLE>OUTDOOR LIVING . Let's study both of them with the following example. . northern pike. the headings and text will simply be left justified. If a browser does not support the CENTER tag. canoeing. as was the case with many of Netscape extension tags. | top | | bottom | EMPHASIZING TEXT There are two ways to emphasize text that I want to introduce here. . ALIGN="CENTER" is an official part of HTML 3. One is called ITALICS and the other is called BOLDFACE. not supported by a number of browsers at the time. brook trout</EM>). </CENTER> <CENTER> was one of the first Netscape extension tags and. 6. self-guided nature trails. all lines or blocks of text will be centered between these two tags . We will be using the ALIGN="CENTER" command in the next example.

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. 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. Gilson OUTDOOR LIVING IN ONTARIO POINTS OF INTEREST Northern Ontario: Five Mile Lake Provincial Park 1. A physical style command cannot be rendered differently. <B> is not. Instead of the <STRONG> and </STRONG> tags for strongly emphasizing text. <STRONG> = STRONGLY EMPHASIZE TEXT <STRONG> is also a logical tag. then your text will simply not be bolded as the browser has no OUTDOOR LIVING IN ONTARIO 30 .html tutorials in web page design by J. brook trout). However.INTRODUCTION TO HTML . <B> is a "Physical Style Command". It is used to strongly emphasize text.5 square miles. STRONG is identical to boldface. if the browser doesn't support italics or the viewer changes the meaning. Camping. In most browsers. Recommended Here are some questions for you to answer on the above example followed by a discussion on the emphasis tags. <STRONG> is distinct from <EM>. If a browser does not recognize boldface or if the viewer changes the meaning of STRONG. canoeing. fishing (walleye. Therefore if a browser does not accept the <B> tag. you will sometimes see <B> and </B> for bolding text. In most browsers. northern pike. 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. then the browser will pick the best alternative from the platform it is running on. While <STRONG> is a "Logical Style Command". the browser will pick the best alternative way to display the text on the screen. self-guided nature trails. the meaning is italics.

In other words. Granulated sugar 1 tbsp. Spoon over greens. Mix well. 2. 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. The same reasoning is also be applied for using the tag <I> to print in italics instead of the <EM> tag. the HEADER tags are not very sociable. Onion powder 1 tsp. 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. Prepared mustard 1/4 tsp. when you are finished. Milk Have greens ready in separate containers in refrigerator. They should have been printed on the same line. Minced dill or sweet pickle 1 tsp.html tutorials in web page design by J. we did not type in a <BR> tag between "THIS IS H1" and "THIS IS NORMAL".INTRODUCTION TO HTML . if you look at the lines you typed in between the <BODY> and </BODY> tags. Also. you did not type in any <BR> or <P> commands. <H4> appears to be closest to the normal size (at least in my browser). Now if for some reason you want to ensure only italics or boldface and nothing else. Serves 8 | top | | bottom | ANSWERS 1. Dressing: Combine all ingredients together in a small bowl. For example. Also. First of all. That is why "THIS IS NORMAL SIZE" was printed on a separate line. Problem 7: Make up an HTML document in NOTEPAD that gives the following web page in the browser. Here is your final problem to see how well you learned the information given in this lesson. Yet they were printed by the browser on separate lines. preferably mixed 10 cherry tomatoes quartered DRESSING 1/2 cup Mayonnaise 2 tbsp. Well. Gilson alternative way to display them on the screen. 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. They like to be separated from the rest of the crowd and so a Using <B> for Boldface or <I> for Italics (Original Netscape Extension Tags) 31 . Toss to coat. Add tomato and toss together lightly. then use the italic font <I> or the boldface font <B>.

<STRONG>. Notice that the tag </STRONG> ends the "bolding" of text. Toss to coat.INTRODUCTION TO HTML . Again. preferably mixed<BR> 10 cherry tomatoes quartered <P><STRONG>DRESSING</STRONG><BR> 1/2 cup Mayonnaise<BR> 2 tbsp.on. Minced dill or sweet pickle<BR> 1 tsp. Spoon over greens. if you want additional blank lines before or after a HEADER tag. 6. <EM>Serves 8</EM> </BODY></HTML> | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Five | The information contained in these free 21 lessons is Copyright ©. Gilson HEADER tag will automatically place a blank or empty line above and below the heading. Of course. A new paragraph is always assumed to begin after a Header tag. 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. </EM> is needed to end italics. Onion powder<BR> 1 tsp. For this reason. 1997 .2009 by local and international copyright laws. It is therefore illegal to copy these lessons into another website. please report it to htmltutorials@bfree. you will then need to use <BR> or <P> tags. 7. 3.html tutorials in web page design by J. Mix well.</EM> <P><STRONG>Dressing:</STRONG> Combine all ingredients together in a small bowl. Milk <P><EM>Have greens ready in separate containers in refrigerator. If you find a copyright violation. That is why you also see a blank line above and below each heading tag. <EM> (which stands for EMphasize). 5. <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. It was printed in both boldface and italics.ca ANSWERS 32 . you do not need <BR> and <P> tags with HEADER tags. All rights reserved. Prepared mustard<BR> 1/4 tsp. 4. Granulated sugar<BR> 1 tbsp. Add tomato and toss together lightly. Brantford Educational Services.

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 &copy &#153 ® < &nbsp. &nbsp. between the ampersand and semicolon). How many of these non-breaking space characters you use in a row is up to you. is simply known as the space character. etc. the symbol for degrees. Well." (that is.&nbsp. will not work. &copy. In &nbsp. use the following command. and CREATING LISTS 33 .&nbsp. We know that browsers read commands inside angle brackets (< >).&nbsp.These six characters will . Gilson LESSON FIVE .. Note that the "nbsp" must be in lower case letters.. Remember that your browser normally prints text left justified and only leaves one space between words and sentences. I used 8 of them to indent this paragraph as in: &nbsp. It works. &NBSP. or &#174..&nbsp. &nbsp. Notice that I indented the beginning of this paragraph. The character "&" is pronounced "ampersand" and these 6 characters form an ampersand command.html tutorials in web page design by J.INDENTING and CREATING SPACES WITH &nbsp. &#153. | | 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.INDENTING and CREATING SPACES WITH &nbsp.INTRODUCTION TO HTML . | Indenting a line and creating spaces with &nbsp. &reg.&nbsp. To force extra spaces or simply to indent a line. LESSON FIVE . and CREATING LISTS You may read the following sections in their entirety or use these choices to go directly to a section.". These six characters will create a space as if you pressed the space bar. the trademark symbol.&nbsp. &lt.&nbsp. the nbsp stands for non-breaking space character. browsers also read commands between the "&" and ". All you need to know is that special code that goes between the "&" and the ". Use whatever number suits your purpose. Ampersand commands are used to create special characters not found on the keyboard such as the copyright symbol.

&#188.INTRODUCTION TO HTML . and use 30 spaces between the "n" in Gilson and the "W" in William.html tutorials in web page design by J. It should also be noted &nbsp. For example. &#176. 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. But the ampersand command can also be cumbersome to work with. or &#8364.S. using the ampersand command is quite simple. &#189. &quot. The answer is given in the answer section at the end of this lesson John Gilson Pauline Johnson Collegiate 627 Colborne St. &#39. 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. &amp. try the following first problem for this lesson. &euro. commands) from the left side of the screen. Somestate U. numbered or printed without bullets and numbers. If all you want to do is indent a line or paragraph. &#149. &#162. Do the best you can to line everything up.A. Gilson Greater Than Ampersand Quote Apostrophe Cent Euro One quarter One half Three quarters Degrees Larger middle dot > & " ' ¢ € ¼ ½ ¾ ° &#149 &gt. N3S 3M8 William Somebody 120 Somestreet Someplace. &#190. 34 . Ontario Canada. Lists can be bulleted. Lists can also be used to indent information. East Brantford.

Type in the following HTML document which we will call document #1 as it will also be used later for ordered and definition lists. To indicate the end of the Unordered List. | top | | bottom | CREATING AN UNORDERED LIST Unordered Lists are bulleted lists. you use the ending tag </UL>. When finished. then just click on the RELOAD button on the menu bar (assuming you have that option). 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.INTRODUCTION TO HTML . etc. Now back to the task at hand. You use the opening tag <UL> to indicate the beginning of an Unordered List. save the document.html tutorials in web page design by J. This will reload your document so you can examine your updates. This is how you do it then: <UL> <LI>item <LI>item <LI>item </UL> To see an unordered list in action. <LI> stands for List Item. you can still use the line break and paragraph tags and the normal text markup tags to emphasize text. SWITCH to NOTEPAD and type in the following HTML document. Furthermore. Gilson that in any type of list. 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> CREATING A LIST 35 . If your document is already in the browser. 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. There are three types of lists: • UNORDERED LISTS (uses bullets) • ORDERED LISTS (uses numbers) • DEFINITION LISTS (no numbers or bullets). each item in your bulleted list must begin with the tag <LI>.

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. Try experimenting with <BR> after a list item or a <P> tag before a list item. </UL> denotes the end of the Unordered List 3. no <BR> tag is needed as each new LI command forces a line break before printing the next item. They should not be considered complete lists. For example. the following HTML web page (which we will call document #2) is the same as the last one.INTRODUCTION TO HTML . If canoe tips. except that for the third item in the list. 7. Gilson </BODY></HTML> All my examples are for illustration purposes only. <UL> <LI>Hang on to the canoe <LI>Use the canoe for support and <LI>Swim to shore </UL> CREATING AN UNORDERED LIST 36 . 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. the bullets are round and solid 5. However. each <LI> denotes the next item in the list to receive a bullet 4.html tutorials in web page design by J. I have added some statements on what to do if the canoe tips. You can also have lists within lists (nested lists). no </LI> tag is required . each item in the list has been indented 3 or 4 spaces from the left side of the screen 6. <UL> denotes the beginning of an Unordered List 2.although you can use it to signal the end of each List Item. each new <LI> implies that the previous List Item is finished. 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.

the second list was indented more than the first list 2. just remember to follow the LIFO principle (Last In. For example. the bullets will all be round no matter what tier you move to. you need a </UL> tag. SAFETY TIPS FOR CANOEISTS • Be able to swim • Wear a life jacket at all times • Don't stand up or move around. the bullet style changes. If you still want square bullets for those browsers that can handle them. you will find the bullet changing to something else. ♦ Hang on to the canoe ♦ Use the canoe for support and ♦ Swim to shore • Don't overexert yourself • Use a bow light at night Notice that: 1. if you want bullets. In many browsers. Thus your list will not look very good.INTRODUCTION TO HTML . the ALIGN="CENTER" command won't work as it would center each list item. have them. First Out principle or in this case the last <UL> tag activated must be the first tag terminated). In some low level and older browsers. and then let each browser handle how it will print them. Here is the browser output for this web page. To move your bulleted list more to the center of the screen. If canoe tips. Each time you move in a tier. the second list also has bullets. Just remember that browsers that can't handle them will simply print them their way. If you want lists within lists within lists. for each <UL>tag. For these browsers. simply use more <UL> tags as in: <UL><UL><UL> <LI>List Items </UL></UL></UL> | top | | bottom | SAFETY TIPS FOR CANOEISTS 37 . Gilson <LI>Don't overexert yourself <LI>Use a bow light at night </UL> </BODY></HTML> I indented the second list for emphasis. 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. You don't have to do that. 3.html tutorials in web page design by J. or they may be square bullets. if you have a third list. Try it. they will be round. If you want to have your list line up more in the center of the page. that's fine too. hollow bullets and not solid as in the first list.

</OL> denotes the end of the ordered list 3. or if you delete an item from the list. Wear a life jacket at all times 3. let's use document #1 and simply change the <UL> tag to <OL> and the closing </UL> tag to </OL>. numbers are used to number each item in the list. except that you use <OL> instead of <UL>. OL stands for Ordered List. 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. 7. the list will automatically be renumbered (try it). Don't overexert yourself 5. 8. 9. each <LI> denotes the next item in the list to receive a number 4. if you insert another item into the list. <OL> denotes the beginning of an ordered or numbered list 2. Be able to swim 2. 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. Use a bow light at night Notice the similarities here to that of the Unordered List in that: 1. In other words. instead of using bullets. 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.INTRODUCTION TO HTML .html tutorials in web page design by J. This is also true for Unordered and Definition Lists (studied below) CREATING AN ORDERED LIST (A NUMBERED LIST) 38 . Gilson 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. each item in the list has been indented 4 or 5 spaces from the left side of the screen 6. You treat an Ordered List in the same way as an Unordered List.hence the name Ordered List) 5. the numbers are in sequence (in order) . With ordered lists. To see an ordered list. Don't stand up or move around 4. So SWITCH to NOTEPAD.

<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. Use a bow light at night Notice in the output that the main list is numbered and the secondary list is bulleted. 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". SAFETY TIPS FOR CANOEISTS 1.html tutorials in web page design by J. Don't stand up or move around.INTRODUCTION TO HTML . Gilson COMBINING UNORDERED AND ORDERED LISTS We can combine unordered and ordered lists. | top | | bottom | COMBINING UNORDERED AND ORDERED LISTS 39 . Be able to swim 2. Wear a life jacket at all times 3. Here is the revised document #2. let's use HTML document #2 where we had a list within a list. 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. Don't overexert yourself 5. If canoe tips. To see this. ♦ Hang on to the canoe ♦ Use the canoe for support and ♦ Swim to shore 4.

INTRODUCTION TO HTML . <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. SWITCH to NOTEPAD and type in the following new document.html tutorials in web page design by J. 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. 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 CREATING A DEFINITION LIST (NO BULLETS OR NUMBERS) 40 . The following example illustrates a DEFINITION LIST and we will not use one of our previous examples for this. Gilson CREATING A DEFINITION LIST (NO BULLETS OR NUMBERS) A Definition List also manipulates text for you.

A DL is used to provide a list of items with associated definitions. Seek expert advice about the area ♦ Get the best maps. The DD end tag (&lt/DD>) is also optional. 2. DT stands for Definiton Term. for example. FINDING YOUR WAY IN THE WILDERNESS 1. as it is clear from the context where the tag's contents end. as it is always clear from the context where the tag's contents end. It is not good HTML form and indenting a section of text this way is not guaranteed to work. Here is a problem that will keep you busy for awhile. you are not encouraged to do this. DD may contain block-level elements as well as text-level elements. DD stands for Definition Description. Each <DT> gives a term and each <DD> describes or supports that term. DL stands for Definition List and <DL> denotes the beginning of a Definition List. are called block-level elements. the second tier is a description of the first tier. It looks rather long. It is considered invalid HTML. Each <DT> defines a new term in the list. to have a definition without a term.INTRODUCTION TO HTML . The answer is given in the answer section. It represents the set of first items in the list or the first tier. There are two types of elements in the BODY section of a web page and they are block-level elements and text-level elements. 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. Make up a document that will give the following web page in your browser. On the map select ◊ landmarks ◊ mountains SUMMER CAMPING TRIP PLANNING 41 . Be sure to try it though. Ordered and Definition Lists). It really doesn't make sense. but just start at the beginning and work your way slowly through it. It also tells the browser that a two item list or a two tier list is coming up.html tutorials in web page design by J. Note that these terms are not indented. do not use the Definition List to indent a block of text. Gilson Vaccinate pets Buy traveler's cheques Cancel newspaper and other deliveries Day before trip Load vehicle Note the following points: 1. Each item should be placed in a DT and its definition goes into a DD directly following it. While it is legal to have a DL with only DT tags or with only DD tags. There's nothing like learning by doing. Elements that generate a new paragraph such as a header tag (for example <H1>) or a paragraph tag (<P>). 7. 4. </DL> denotes the end of a Definition List 3. 6. It gives the set of second items in the list or the second tier. 8. That is. If you are still confused. 5. Text-level elements are elements that do not generate a new paragraph (examples are <EM> and <STRONG>). Also. The DT tag may only contain text-level elements (definition of text-level elements given below). Problem 2: This problem involves all three types of lists (Unordered. consider this brief explanation of the Definition List. The DT tag has an optional end tag (</DT>).

INTRODUCTION TO HTML . The TYPE attribute will not work if it is written in uppercase letters. Gilson ◊ lakes ♦ Get a good compass and ◊ check slope of land ◊ check direction of flowing streams 2.html tutorials in web page design by J. Note that the value "square" is written in lowercase letters. then your browser does not support the TYPE attribute. It is now supported by all browsers. The TYPE attribute was originally a Netscape extension and new to HTML 3. If there is snow on the ground.2. stay close to: ♦ roads ♦ trails and ♦ waterways If you are inexperienced do not travel alone do not travel at night If you do get lost Don't panic Don't wander in the dark Give distress signals at regular intervals such as: ◊ three shouts ◊ three small fires ◊ three blasts of a whistle ◊ three rifle shots It may be wise to sit tight and wait for searchers | Click here to go to the answer | | top | | bottom | CHANGING THE STYLE OF YOUR BULLETS AND NUMBERS The TYPE attribute You can use the TYPE attribute to control the "appearance" of the bullets and also to control a numbered list. FINDING YOUR WAY IN THE WILDERNESS 42 . you should see the following square bullets. 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. If your bullets are not square.

The START attribute The START attribute like the TYPE attribute is new to HTML 3. and so on).2 and so do not assume it will work for your website visitor. item 1 II. and so on. Gilson ♦ 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). Note that <OL TYPE="1"> (the number 1) is the default for listing the items as 1. For example. iii. c. and so on).INTRODUCTION TO HTML .). iv. b. ii. and so on). 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. item 2 III. B. <OL TYPE="A"> for capital letters (A. 2. 3. The above example will give the following output in the browser: I. item 3 The following replacements for the numbered list can also be made: <OL TYPE="i"> for lower case Roman Numerals (i. <OL TYPE="a"> for lower case letters (a. C. For example. 3. 2. The START attribute is used to begin an Ordered List with any number or letter. <OL START="3"> as in: CHANGING THE APPEARANCE OF BULLETS 43 .html tutorials in web page design by J. 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. etc.

This is List Item 2 3. 2. The following example numbers the statements in the list as 1. item 3 4. 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. 3. try the following if your browser supports these attributes: <OL TYPE="I" START="3"> will begin numbering with Roman Numeral III. This is List Item 3 7. This is List Item 7 8. 8 as shown below the document. This is List Item 1 2.INTRODUCTION TO HTML . item 4 5. Gilson <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. This is List Item 8 The COMPACT attribute The START attribute 44 . 7.html tutorials in web page design by J. <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. item 5 Also. <OL TYPE="i" START="3"> will begin numbering with Roman Numeral iii.

the browser could put more than one list item on a line.&nbsp.&nbsp. For example.&nbsp.William Somebody<BR> &nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp. 627 Colborne St.&nbsp.&nbsp.&nbsp. Pauline Johnson Collegiate &nbsp. | top | | bottom | ANSWERS 1.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp. 45061<BR> &nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp. This is how I did it.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.Someplace. &nbsp.&nbsp. 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.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp. The COMPACT attribute is not widely implemented.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.INTRODUCTION TO HTML .&nbsp.U. Brantford.&nbsp.&nbsp.&nbsp.&nbsp.A.&nbsp. East &nbsp.&nbsp.&nbsp. You may have found another way that yields the same results.&nbsp. &nbsp.&nbsp.&nbsp. Somestate<BR> &nbsp. 2.&nbsp. Ontario &nbsp.&nbsp.S.&nbsp.&nbsp.&nbsp.&nbsp.html tutorials in web page design by J.&nbsp. John Gilson &nbsp.&nbsp.&nbsp.&nbsp.&nbsp. On the map select <UL> <LI>landmarks <LI>mountains <LI>lakes </UL> <LI>Get a good compass and The COMPACT attribute 45 . <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.&nbsp. 120 Somestreet<BR> &nbsp. <HTML> <HEAD> <TITLE>Names and Addresses</TITLE> </HEAD> <BODY> &nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp. &nbsp.&nbsp. Canada.&nbsp.&nbsp.&nbsp.&nbsp. Gilson The COMPACT attribute basically tells the browser that the list items are short so that it can make the list more compact.&nbsp. &nbsp.&nbsp.&nbsp.

E. The list will begin with the letter "e" (as in e.ca ANSWERS 46 . It is therefore illegal to copy these lessons into another website. etc.). etc. F. 1997 . g.).2009 by local and international copyright laws. f.INTRODUCTION TO HTML . 4. If you find a copyright violation. | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Six | The information contained in these free 21 lessons is Copyright ©. 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.on. All rights reserved. Gilson <UL> <LI>check slope of land <LI>check direction of flowing streams </UL> </UL> <LI>If there is snow on the ground. please report it to htmltutorials@bfree. The list will begin with the letter "D" (as in D. Brantford Educational Services.html tutorials in web page design by J.

| top | | bottom | LINKS WITHIN A PAGE . On a browser screen. link to another web page or website anywhere in the world There are different ways to provide these links.such as those you see at the top of each of my lessons (and also on my home page to choose the lessons). | Links in general | | Links within a page . The place or point on the page where you want the browser to jump to.CREATING LINKS You may read the following sections in their entirety or use these choices to go directly to a section. So with Page Jumps. Gilson LESSON SIX . LESSON SIX . The three most common ones are: 1. I also offer the choice of going back to the top of the page or to the bottom of the page. Many viewers do not want to waste a lot of time searching and so offering page jumps will make this process easier. clicking on a word. a picture or graphic). it would take approximately 11 sheets of letter size paper. 2. it can take some time scrolling to find a specific section or topic. The command that points or sends the browser to another section on your web page. clicking on a button . you need two items: 1. 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. phrase or sentence .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.html tutorials in web page design by J.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. clicking on an image (that is. Notice that at the end of each topic or section.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. To offer a page jump.CREATING LINKS 47 . jump from section to section within the same web page (also called Page Jump) 2. We will study images in Lessons Seven and Eight. 3. 2.INTRODUCTION TO HTML . you have the option of jumping to different sections or topics without having to search through the entire web page for the topic. So you can see that I make good use of page jumps.

Everything contained between the <A> and </A> tags is affected by the element.html tutorials in web page design by J. In our example. the anchor tag tells the browser to anchor or to attach to something else. but also the words to be clicked on ("click here to go to the top of LINKS WITHIN A PAGE . 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). Thus I have bookmarked the top of the web page using the name "top". Every Anchor tag must have a closing or end tag (</A>) to signal the end of the anchor. you insert the following command: <A NAME="linkname"></A> For example. Here is the basic link command that points to another section on your web page. "#top" is called the URL which stands for Universal Resource Locator. 5. 2. we are using it to tell the browser to anchor or attach to another section on the same page called "top". 3. "click here to go to the top of the page". Anytime you see a pointing hand. the container element A not only contains the name of the section we are jumping to ("top").PAGE JUMP 48 . The anchor element is a "container element". 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. at the top of this page (right after the BODY 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. Gilson You can also think of page jumps as bookmarks. the location of this lesson. otherwise the browser will not know where the bookmark is located. A URL is the address or location of the link. a section of the web page has been bookmarked with the name "linkname".INTRODUCTION TO HTML . In HREF="#top". An example of a page jump is the following (to return back here. 4. In general. it means that you are on a link and clicking on the link will take you some place. it turns into a pointing hand. <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. 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". Note the following points with these two commands: 1. 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. When you move the mouse pointer anywhere on the words. The A stands for Anchor. Notice that when you move the pointer over the words "click here to go to the top of the page". You must assign a name to each bookmark. That is.

Anchors cannot be nested. In my example. then you must use the first statement. the name I chose for the "linkname" was "top". it won't find the name. 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). 14. the section where you place the NAME command (the target of your HREF attribute) will appear at the top of the browser screen. The NAME attribute is used to set up "named anchors". 11. The name you choose in the HREF attribute. 6.hence the warning. The value of the HREF attribute ("#top" in our example) and the value of the NAME attribute ("top") must be enclosed with quotation marks. one above the other. Notice at the beginning of the lesson I have six choices to cover all the main topics. you simply place each of your links side by side as in: LINKS WITHIN A PAGE . so if "A WALK THROUGH THE PARK" uses a HEADER tag. if you need more than one choice in the menu. You cannot have an anchor within an anchor. Normally when you use a container element. As my example shows. your browser will be looking for the code name outside the page you are on and of course.that is. it would be expected that something would be "contained" between the opening and closing tags . Note also that a HEADER tag is not allowed between anchor tags. Without it.INTRODUCTION TO HTML . it is going to a section called "top". It means that "this is where the link is going to" . 13. The # denotes an internal page link. "#top") must be there. 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 (\). If you don't enclose with quotation marks. Now. The second statement avoids this warning message as "A WALK THROUGH THE PARK" is contained between the anchor tags. 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. 15. 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.PAGE JUMP 49 . 8. Gilson the page"). With the first statement. 9. When you click on the link.html tutorials in web page design by J. There is no # symbol in the NAME attribute. must match the case in the NAME attribute. The # symbol that you see in the first command (in my example. the viewer is immediately sent to the location specified in the HREF attribute. It is the key that has the two vertical dashes on it. where the link is referenced. the hyperlink may not work correctly. The Anchor element is called a Hyperlink as it allows you to link to any location or address you want. When the enclosed text (which can also be an image instead of text) is selected by the viewer. 10. The named anchor in our example is "top". HREF stands for Hypertext REFerence. 7. 12. Choose your link names to reflect the section you are jumping to and there is no need to have long link names. The anchor tag is the glue for hypertext documents.

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. one browser may be able to fit all your links into two lines while another browser may require three lines. If you want your links centered. 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).html tutorials in web page design by J. Notice also that you not only can click on your link words (such as "Links in general"). then center them all with one ALIGN attribute and let each individual browser decide how they will be centered. Notice that these page jumps are all centered with only ONE center command. Also.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. so we will work with this example until it does appear like the links at the beginning of this lesson. maybe only two links will fit. where each choice is clearly separated and with no underlined and highlighted vertical bars: | Links in general | | Links within a page . and so on. The problem with doing this is that you are designing for appearance instead of for content.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. Compare the last example which is: | Links in general | | Links within a page .PAGE JUMP 50 . 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 . "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. You may not want this. This is because the vertical bars are also contained between the Anchor tags (that is. maybe three links can fit on one line and in other browsers.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 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. <H4 ALIGN="CENTER">| <A HREF="#links">Links in general</A> | | <A HREF="#page">Links within a page . Gilson | Links in general | | Links within a page . In other words. don't say. 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. In some browsers.INTRODUCTION TO HTML . but you can also click on the vertical bars (they are also underlined and highlighted in blue). The links shown here most likely do not appear as neatly as those at the beginning of this lesson. Do not use the <BR> tag. between the <A> and the </A> tags). 2.

We don't want the vertical bars that surround a link to be separated from the links either. No link is split between two lines including the vertical lines around the links.html tutorials in web page design by J. you must remember to place one space (no &nbsp. If we have more links than will fit into one browser line. then place them outside of the anchor tags.<A HREF="#page">Links&nbsp. we use the space character (&nbsp. the whole thing will be wrapped to the next line. Note that each pair of adjacent vertical bars is separated by one space. No matter how you type it in.<A HREF="#links">Links&nbsp. do not use the "&nbsp.|</H4> You can type the above all in one long line in NOTEPAD if you want to. The only problem with square brackets is that many text only browsers will automatically insert square brackets around each link. For example.a&nbsp. Thus if the browser places square brackets around links and you also use them. that is. Here is a problem for you to work on. If you want to see exactly how I did all my links at the beginning of this lesson. replacing each space between words including the vertical bars: <H4 ALIGN="CENTER"> |&nbsp.whatever line that might be . the browser will automatically wrap to the next line.page jump</A> | 5. just go the View menu and choose Source or Page Source.in&nbsp. "Linking to another page in your website". Remember that the anchor tags (<A> and </A>) act as a container in that all that they contain will be part of the link. 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. Gilson e-mail)</A> |</H4> 3. The whole thing will then look like: | Links in general | | Links within a page . The problem is to avoid having part of a link on one line and the rest of it on 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.general</A>&nbsp. We don't want it to be split between two lines. Instead of the vertical bars around the links. we want to ensure all these words are on the same line .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.including the vertical bars around them. you might prefer square brackets [ ].) to replace each space between words." command): LINKS WITHIN A PAGE . then each of your links will look like: [[link words]] which doesn't look so nice. Note how each link is kept together and that the links are nicely centered. 4.| |&nbsp. outside the container tags as shown above and as shown in the following example: | <A HREF="#page">Links within a page . If you do not want your vertical bars part of the link. This then is how part of the above would look with an &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.PAGE JUMP 51 . Problem 1: Make up the statements that will produce the following page jumps (for this problem. in our third choice.within&nbsp.INTRODUCTION TO HTML . To do this.page</A>&nbsp.

In the table on my home page. 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.htm. the lesson appears on the screen through a basic link command. click on the "BACK" button on the menu bar. but it is not my home page. to link to another page such as to your home page. the browser will immediately load my home page. If you want to study a particular topic then you can go to my home page and choose the needed lesson. when you choose a lesson. one to my alternate home page. I have three links .htm">Click on these words</A> For example. Linking to pages within your own website is easy to do.html tutorials in web page design by J. Problem 6 deals with the case if you need to jump to a certain point on another web page. if your home page was named index. after we study links in general. Recall that the basic command for a page jump studied in the last section is: <A HREF="#linkname">Click on these words</A> Well.one giving you the option of returning to my home page. if a link will not fit all on one line. it will place the entire link on the next line.PAGE JUMP 52 . Gilson | Walk through the park | | Going for a swim | | A bicycle ride | Problem 2: Referring to Problem 1. and one to go on to the next lesson. | Click here to go to the answer section | Later in this lesson. Thus each cell in the table is a link to a lesson. All my web pages (or simply "pages") taken together make up my website. | 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. you could have: <A HREF="index.INTRODUCTION TO HTML .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. just replace the #linkname with the name of your file as in: <A HREF="filename. At the end of each lesson. Note the following points with the above command: LINKS WITHIN A PAGE . To return to this spot. Each lesson in this course is also a web page. That is.

htm") and its location displayed on the status line at the bottom of the browser screen. 5. You do not need a <A NAME="filename"></A> command as the file (in our example. the command <A HREF="http://www. For example. "index. 4. Remember that you must also enclose the COMPLETE ADDRESS (the URL) of the link with quotation marks. That is. As before. The file name must be enclosed with quotation marks. The value of the attribute HREF is "index. HREF as before. Recall in the above section. Here are the three situations showing their similarities. you will see the file name ("index. 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. In other words.htm".htm" is the file or document name of the web page you are linking to.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). here it is: I would like to visit this e-card site Problem 5: In summary. 2. If you want to try it now.htm">Go back to home page</A> where the browser will load the file called "index. "index.dayspring. Gilson 1. a) <A HREF="#top">enclosed text</A> LINKING TO ANOTHER PAGE IN YOUR WEBSITE 53 . Give a brief description of when each is used. just replace the file name with the COMPLETE ADDRESS (URL) of the page you want to link to. it begins the attachment to another page. the complete URL is displayed. the three link commands that we studied in this lesson are very similar statements. The only differences are in the names. 3. "Go back to home page". 6.htm" when you click on the words "Go back to home page". To link to any page in the world.htm") already exists.INTRODUCTION TO HTML . Since the words "Go back to home page" are contained between the anchor tags <A> and </A>.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.html tutorials in web page design by J. a person can click anywhere on those words and the browser will load the home page. the A stands for anchor and in this case. Problem 4: Where will the browser look for this file called "index. tells the browser that this is where the link is going to. When you lay the mouse pointer anywhere on the words.

tells the browser how to handle the FORM command. | Click here to go to the answer section | | top | | bottom | USING A LINK BUTTON At the very end of this lesson. Buttons are neat and professional looking. The closing tag </FORM> ends the form item (which you see at the end of the statements). 6. ACTION is a required attribute as it specifies the URL of the location you want to link to. That is.one to allow you to go back to my main home page. In this case we want to SUBMIT a button (a button is assumed in "submit"). In this case. but the pets section on the pictures page. The opening tag tells the browser that a form item is going here. ACTION means the connection that you want to make. We will learn about forms in a later lesson. That is. FORM is a container element. The FORM command has two attributes . If you want to connect to a page on the WWW. Thus TYPE="submit" produces a button.htm. and one to take you to the next lesson. There are two main command lines here.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. What command would you use to not only load the pictures page. 2.htm".METHOD and ACTION. 4. we want to load the pictures page and then do an immediate page jump to the pet pictures section. one to my alternate home page. Gilson b) <A HREF="index. the action is a connection to my home page which is a file called "index. the browser is to "get" something which in this case points to a link through the ACTION attribute.htm">enclosed text</A> c) <A HREF="http://www. LINKING TO ANOTHER PAGE ANYWHERE IN THE WORLD 54 . The first one is called the FORM command and the second one is called the INPUT command. be sure to type in the complete address (URL). a FORM attribute. Its value here is "GET". 3.html tutorials in web page design by J. I used three link buttons . The second command line is the INPUT command and it generates the button. The TYPE attribute lets the browser know what TYPE of INPUT will occur. 7. 5. Here are the HTML statements that give this button: <H3 ALIGN="CENTER"> <FORM METHOD="GET" ACTION="index. 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).press.INTRODUCTION TO HTML .htm"> <INPUT TYPE="submit" VALUE="Return to Home Page"> </FORM></H3> Note the following explanations on these statements: 1. Suppose also that this page of pictures is called pictures. METHOD.

9. Quotation marks for the METHOD and TYPE values are optional. you will see two buttons at the end of the form .htm"> <INPUT TYPE="submit" VALUE="Send me to Lesson Seven"> </FORM> </TABLE> TR stands for Table Row and TD stands for Table Data. you may see a question mark (?) after the file name in the "location" bar as in: pictures. but for now you can use these statements as they do work. if you want the statements now.html tutorials in web page design by J. The statements are given below the buttons. We will study tables in Lessons Eleven and Twelve.INTRODUCTION TO HTML . Buttons are usually used in FORMS and for executing scripts.htm?.htm"> <INPUT TYPE="submit" VALUE="Return to Home Page"> </FORM> <FORM METHOD="GET" ACTION="Lesson7. • Normally.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. If you visit my guestbook page. If you want two buttons above each other. here they are: <TABLE BORDER="0"> <TR> <TD><FORM METHOD="GET" ACTION="index. changing the ACTION and VALUE attributes to whatever is appropriate for your situation. Here are the statements that give the above two buttons: <H3 ALIGN="CENTER"> <FORM METHOD="GET" ACTION="index. Final remarks about buttons. The VALUE attribute gives the wording that will appear on the button. Only the value of the ACTION and VALUE attributes require quotation marks. • When a web page is loaded after clicking on a button.htm"> <INPUT TYPE="submit" VALUE="Return to Home Page"> </FORM> <TD><FORM METHOD="GET" ACTION="Lesson7.one to submit the contents of the form and the other to reset the form contents. then just repeat the above statements twice. LINING UP LINK BUTTONS 55 . Gilson 8. Here are two centered buttons. However. The buttons are active so you can click on them. Instead. The question mark simply indicates that the page was loaded by clicking on a form button. you do not use buttons to link to other web pages. where you click on some words or on an image to load another web page. use text and images to link to other pages. 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. Don't worry about this.

ca is my complete e-mail address.ca?subject=topic"> as in: E-MAIL (using the MAILTO: command) 56 . just replace my e-mail address with yours. For example. 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. and bcc lines as part of the mailto: link. 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. For more information. To close the e-mail box. and I will get back to you as soon as possible.on. If you want to send me an e-mail. just choose FILE and then CLOSE and the e-mail box will disappear. 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. John Gilson. Note that only "John Gilson" is underlined and in blue meaning that if you want to send me an e-mail. You can replace my e-mail address with yours and then try sending yourself a message.on. 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.ca">John Gilson</A>. Problem 7: Write the HTML statements that would give the following line on a web page. Gilson | top | | bottom | E-MAIL (using the MAILTO: command) Before we leave this lesson on links. Here is the HTML line that gives the above statement: Please tell me what you think of these lessons by sending me. cc. John Gilson. jcgilson@bfree. 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. an e-mail. you can do it from my home page. For your own web pages.INTRODUCTION TO HTML . please send an e-mail to me.html tutorials in web page design by J. | Click here to go to the answer section | | top | | bottom | PLACING YOUR OWN SUBJECT IN EMAILS You can also add set the subject. <A HREF="mailto:jcgilson@bfree.on. an e-mail. In this example. to add a topic (a subject) in the subject line of your e-mail (the most popular option). you only need to click on my name. the format is: <A HREF="mailto:jcgilson@bfree. Try it and see what happens.

com is the complete e-mail address of the person to be cc'd. The maximum length of a message is 250 characters.INTRODUCTION TO HTML . but no quotation marks (") are allowed as part of the subject. cc and bcc lines. Firefox and Netscape do allow all three options in the anchor tag. cc or bcc is not standard HTML. 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. 4. | top | | bottom | PLACING YOUR OWN SUBJECT IN EMAILS 57 . 6.">Click here when ready to send us your email. You are allowed to have spaces in the subject line. the person you want to be cc'd).</A> In this example.html tutorials in web page design by J. Adding a subject. the person you want to be bcc'd). 5. Keep in mind that a visitor can change the subject.com"> where person@site. Gilson <A HREF="mailto:jcgilson@bfree. An older version mail client may not accept any of these options. So to be on the safe side.ca?bcc=person@site. These additional options after the question marks only start the e-mail in the way you would like to see them sent.on. | 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.ca?cc=person@site. they do work in Explorer. Note that there is no space behind the end of the e-mail address and the question mark (?) that begins the extra information. 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. nor does any browser claim to support these additions. the format is: <A HREF="mailto:jcgilson@bfree. then either the entire message may not appear at all in the body or it will be cut off at 250 characters.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.com"> Note the following points: 1. 3. the format is: <A HREF="mailto:jcgilson@bfree.on. Explorer. It appears that the success of these options also depend on the mail program used. However. keep your message to no more than 250 characters. If your message is more than 250 characters long. Firefox and Netscape on both Macs and Windows. 2.on.

6. to another one of your web pages).ca">John Gilson. The second statement is used in linking to another page in your directory (that is. If you find a copyright violation.<A HREF="#bike">A&nbsp.| |&nbsp. the statement would be: <A NAME="park"></A> 3. and I will get back to you as soon as possible. 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". the browser will look for the file in the directory or location that your server company or provider has placed your pages in.on.2009 by local and international copyright laws.ca PLACING A MESSAGE IN THE BODY OF EMAILS 58 . Once you have your website on the World Wide Web. All rights reserved.through&nbsp. The following is one way to solve the problem. Using my answer for Problem 1. At the beginning of the pet pictures you would have something like: <A NAME="pet">Here are pictures of our pets</A> 7. 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">.htm#pet">Click here to see pictures of our pets</A> where "pet" is the name of the pet pictures section. please report it to htmltutorials@bfree. The first statement is used in page jumps. <A HREF="mailto:jcgilson@bfree. The browser will look for the file in the current directory (also called "folder") .ride</A>&nbsp.<A HREF="#swim">Going&nbsp.swim</A>&nbsp.|</P> 4. You may have given the page jumps different names.bicycle&nbsp.| |&nbsp.that is. The third statement is used in linking to a website anywhere in the WWW. Note that the problem did not have the link words strongly emphasized.on. To load the page called "pictures. <P ALIGN="CENTER"> |&nbsp. <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. Brantford Educational Services. please send an e-mail to me. you would combine the URL of the page with the name of the pet pictures section as in: <A HREF="pictures.a&nbsp. Gilson ANSWERS 1.htm" and then do a page jump to the pet pictures section.park</A>&nbsp.html tutorials in web page design by J. the directory that you are saving all your web pages in.</A> | Back to the top of the page | The information contained in these free 21 lessons is Copyright ©.the&nbsp.for&nbsp. It is therefore illegal to copy these lessons into another website. So we have: For more information. 5.<A HREF="#park">Walk&nbsp.INTRODUCTION TO HTML . 1997 .

religious.) Up until now. Don't just take it. Images are also called pictures. the bigger the image. etc. If you like an image and want to use it. clip art. ICONS. especially those with dial-up connections or with slower high speed connections. I just copy it to the directory I need it in. The chain at the top of this lesson was placed there as an image. While images can really add to a web page. Often you are told somewhere in the website if the images are free to take or if restrictions apply. Many viewers. It is the ability of the internet to also provide images that makes it so very popular. before you do download or save someone else's images. We know of course that the World Wide Web (WWW) is much more than just plain text. So if you are in doubt. I have sub-directories to categorize them. when you place a web page on the internet. However. There are millions of images out there in the WWW and many of them are free for you to use. If you do see an image you like and you don't know if you are allowed to download it. lines. be careful that you do not overuse them. then you should ask. is that viewers will leave your site before having really seen it. Remember this. Gilson LESSON SEVEN .INTRODUCTION TO HTML . | Images . etc. icons. Some of my categories are: backgrounds. buttons. 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. What often happens then. If I need an image for a web page. be sure that it is in fact free to take.html tutorials in web page design by J. ask. 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. CLIP ART. animated images. | top | | bottom | ANSWERS 59 . Browse the web and you will see all kinds of images. everything has been text based and you should already be able to produce some very nice text based web pages. it is considered publishing and so all the rules and laws of local and international publishing apply.PART 1 You may read the following sections in their entirety or use these choices to go directly to a section. the longer it will take to display. GRAPHICS.introduction | | Placing images on your web pages | | Saving (downloading) an image | | Image formats | | Image attributes | | Images not appearing in your browser? | IMAGES (PICTURES. Also. It takes time for a browser to display an image and so a lot of images can take a lot of time. do not want to wait a long time for a web page to display. ETC.IMAGES . graphics. 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. If you ask. usually you will be given permission to do so.

or Save Link As . that is..htm 2.gif" represents the name of the image.INTRODUCTION TO HTML . a dot. The image should be located in the same directory as the web page it is to appear on. To "download" an image to your hard drive means to "save" the image on your hard drive. the name of the image and where to find the image. A menu will pop up beside the image with a number of choices. the opposite button that you would normally use when clicking with your mouse). I called my image "hrchain" standing for Horizontal Rule Chain because it can be used to replace an <HR> or Horizontal Rule command. SRC stands for "source" (SouRCe).com/dcreelma/imagesite/image. Often there is an e-mail address somewhere on the web page..gif"> where "image. Since no directory is given. Gilson PLACING IMAGES ON YOUR WEB PAGE The basic format is quite simple.aol.. 4.. you have the name (in my case it is "hrchain"). 3. 1.html tutorials in web page design by J. just e-mail the person or company and ask. just place the mouse pointer anywhere on the image. The IMG tag is used to insert images within the text. There are many places on the web where you can find line images to replace horizontal rules. or Save Picture As . and click once with the RIGHT mouse button (that is. | 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. One of these choices is Save Image As . These are often called "inline" images.. That is. It is: <IMG SRC="image.. It means that an image will be placed here. the source is assume to be the current directory . It can be a relative or an absolute URL. To quickly save an image (this should work on most browsers). The chain at the top of this lesson: was put there with this command: <IMG SRC="hrchain. Thus the SRC attribute specifies the name and location (URL) of the image file. Here is one of them: http://members. If you see an image you really like and are not sure whether you are allowed to download it for your own use.. Choose the option that applies to your browser and the usual dialog PLACING IMAGES ON YOUR WEB PAGE 60 . IMG stands for "image" (IMaGe). and then the suffix ("gif").gif" is the complete name of this image and this name follows the same format as your HTML document names. then click and hold the mouse button down. It is an IMG attribute that tells the browser where the source for the image is.the directory of the web page. "hrchain. If this doesn't work.gif"> A discussion on this image command.

The pixel is then assigned the corresponding decimal number which is called the "color index value". go back to the chain image at the beginning of this lesson and save it (it is free to take). icons. | top | | bottom | IMAGE FORMATS Most browsers only support two inline image formats or file types. on the other hand. Palette. GIF stands for General Image Format. the image) saved. They are (1) GIF and (2) JPEG. often contain more than 256 colors and with no large single-colored regions. the smaller the file.html tutorials in web page design by J. 1. This format can store black and white. 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. Thus the GIF format stores its colors in a 256 color indexed color map. and Color LookUp Table. Here is a brief discussion on these two formats as denoted by the suffixes. Color photographs. If you were to examine an image in a paint program such as Paint Shop Pro. to practice saving an image. but most people pronounce gif with a hard g as in gift). . The more repeated patterns. Gilson window will open up asking you where on your hard drive you want the file (that is. lines and clip art. remember that the fewer colors you use. you are limited to a maximum of 256 colors for any image. just click anywhere on the wallpaper with the right mouse button and follow the same procedure as described above for saving an image. This same method for saving an image can also be used to save a background image. With images in this format. This format was invented by Compuserve and is the most common format on the World Wide Web.gif (gif is pronounced "jiff" by some people. GIF images use a form of "lossless" compression called LZW named after its creators. and color images. LZW compression works by finding repeated patterns within the image. logos. Color maps are known by a variety of names such as Color Table. Indexed Color. The GIF format is ideal for images that contain larger single-colored regions (no more than 256 colors) such as buttons. if you want to try my examples with images. you will have to reduce the number of colors in the image to 256 (by dithering for example). This technique can do a very good job in creating images that are near identical to the original image. Finally. 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. For example. Also. the images will not appear on your web pages. Its simple format is a series of pixels that line up to form a picture. If the image has more than 256 colors.INTRODUCTION TO HTML . 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). Each actual pixel in the original image is then examined for its true color and matched to the closest color in the color table. Thus images with large blocks of color work great as GIF files SAVING AN IMAGE 61 . grayscale. 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). the better the compression. If you do not save the images to your working folder. If you see a background (wallpaper) you like and are allowed to save it.

Scanned images such as photographs have fewer large blocks of color and therefore do not compress as well. BORDER ATTRIBUTE The BORDER attribute is used to place (or eliminate) a border around the image.INTRODUCTION TO HTML .jpg stands for Joint Photographic Experts Group. This is because JPEG is a more complicated form of compression. As the name Joint Photographic Experts Group implies. Otherwise. That is. while for MAC. Amiga and Windows 95 or higher users.from lossless to extremely lossy.jpeg or . try different levels of compression to see what gives optimum quality. There are two versions of the GIF format . but by the amount of compression. 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. I want you do some experimenting with it. . this format was created especially for storing photographic images.html tutorials in web page design by J. JPEG format is recommended because of image quality and image file size. a four character suffix is allowed. the smaller will be the resulting file size but also the less clear the detail. | 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. The BORDER attribute commands the browser to draw a border of an indicated size around the image. ALIGN controls the alignment of the image with respect to text. only a 3 letter suffix is allowed. Extremely compressed JPEG images can also look very grainy or blotchy.GIF87 and GIF89. ALIGN ATTRIBUTE The ALIGN attribute is used in conjunction with placing text around the image. 2. The GIF89 format allows you to also make one of the colors of the image transparent (such as the background color). Therefore. Unix. The more lossy the compression. and it does this in a compact digital format. IMAGE FORMATS 62 . no border. if you are using JPEG format. Recall that an attribute supports or modifies a command. and type in the following HTML document. it is often used as BORDER="0" (quotes are optional) to turn it off . but decompressing and displaying the image can negate the time savings. Thus photographs in GIF format tend to look grainy and blotchy. Recall that for IBM and IBM compatibles not running Windows 95 or higher. You might save file space on the Hard Drive with a JPEG image and so save time loading the file.that is. 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. To see these attributes in action. So if you are dealing with photographic images. Gilson because they can be compressed so well. When you save an image in JPEG format. please SWITCH to NOTEPAD or to a similar text editor. A compressed file must be decompressed to be displayed and JPEG images can take significantly longer than GIF images to decompress and display. you choose how "lossy" you want the compression to be . JPEG file sizes are not determined by the number of colors.

especially if you want the image to be a link (we will study images as links in Lesson Eight).gif) then you need to save it too. It is clear from the image that we do not need a border. control the border with the BORDER attribute. Border widths are measured in pixels. Gilson <HTML> <HEAD> <TITLE>HALL RENTAL</TITLE> </HEAD> <BODY> <H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR> <H4 ALIGN="LEFT"><IMG SRC="whechair.as in BORDER="10". Once you have saved the web page and image. One of them is the resolution of the monitor being used. SWITCH back to your browser. replace the number 0 with the number 10 . Also. Note the difference. Sometimes you will want a small border if the image comes with a clear or transparent background . 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.gif" BORDER="0" ALIGN="MIDDLE">We are wheelchair accessible.html tutorials in web page design by J. that is.</H4> Please call for rates<HR> </BODY></HTML> Now save this web page. 1. then SWITCH back to your browser and load the document to see it in action. Problem 1: SWITCH to your text editor and change the ALIGN="LEFT" to ALIGN="CENTER". Please call for rates Now for a discussion on the above HTML document. in some situations. Save the change. If you have not saved the wheelchair image (whechair. This is what you should see: ABOUT OUR HALL We are wheelchair accessible. To avoid these situations. Exactly how big is one pixel? Does it have a specific size? The answer is that a pixel does not have a specific size. and load the document. 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). a browser will automatically place a border around the image and you may not want that to happen. 3. Therefore the size of your image IMAGE ATTRIBUTES 63 .INTRODUCTION TO HTML . What change do you see? Problem 2: Now repeat this process and change to ALIGN="RIGHT". Its size depends on a number of things. Try a border of 10 pixels. 2. 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). The BORDER="0" means that we want no border. Remember that both the image and web page must be in the same folder.

Note that the command is "MIDDLE" and not "CENTER". 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. only one line of text is allowed with this ALIGN command. You may want to experiment with this attribute. the additional lines will be placed below the image.gif" BORDER="0" ALIGN="MIDDLE" WIDTH="96" HEIGHT="90" HSPACE="10">We are wheelchair accessible. 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. HEIGHT and HSPACE attributes. HEIGHT and HSPACE attributes To understand the WIDTH. Remember that if more than one line follows after the image. Try adding some words or another line to the words "We are wheelchair accessible" to see this happen. the rest 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>. Also. WIDTH. Images can have text printed next to them. your images (and text) will always be in the right proportion no matter which monitor they are viewed on . What happened? Problem 4: Change to ALIGN="BOTTOM". MIDDLE and BOTTOM specify where any text following the image should be placed.</H4> Please call for rates<HR> </BODY></HTML> Now save the document. SWITCH back to your browser. Gilson will vary a little from browser to browser. If the line is too long or you have more than one line.html tutorials in web page design by J. load the document and this is what you should see: ABOUT OUR HALL We are wheelchair accessible.and so they will always look good in any browser. Problem 3: Change the ALIGN="MIDDLE" to ALIGN="TOP". However. ABOUT OUR HALL 64 . What happened this time? | Click here to go to the answer section | The values TOP.INTRODUCTION TO HTML . 4.

Most browsers will resize the image to the indicated size. Paint Shop Pro) will tell you the size of your image and allow you to change its size to suit your needs (that is. In other words. the longer it will take the browser to load and display it. Leaving out the WIDTH and HEIGHT attributes is also not considered good HTML coding practice. In other words. modify and work with images. It is important for you to include the size of your image. This is important since most often images take longer to load than text. These programs (for example. it means that the WIDTH is 120 pixels and the HEIGHT is 80 pixels. Gilson Please call for rates The WIDTH and HEIGHT attributes involve the size of the image. If the browser does not know how much space to set aside for your image. When you include the size of the image. The ideal situation is to have the WIDTH and HEIGHT sizes the same as the original image. If there are three numbers as in 120 x 80 x 16. Using WIDTH and HEIGHT with incorrect values. Remember also that the bigger the image. The browser then has to work on displaying the image before the text. the WIDTH and HEIGHT attributes must be included with the IMG tag. the difference between 96 and 90 is very small and may not even be noticeable. That is why you often see text being displayed before images are completely displayed. or with percentage values is not recommended.INTRODUCTION TO HTML . 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. There are programs on the web that can be downloaded that create. Thus HSPACE and VSPACE indicate the number of pixels that should be left free around the image.html tutorials in web page design by J. but this often gives poor results. it will not know where to place the text. If you see an image's size in a paint program or elsewhere written as 120 x 80. This size is measured in pixels. 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> ABOUT OUR HALL 65 . In pixels. use the WIDTH and HEIGHT attributes as this allows a browser to lay out a page in advance. change. The ALT attribute To see the effect of the ALT attribute. the WIDTH and HEIGHT attributes should contain the actual image's dimensions. The first number is always the width and the second number is always the height. 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. then the third number is the number of colors associated with the image. as it then knows where the text around the image should be placed. So you are strongly encouraged to include the WIDTH and HEIGHT attributes with your IMG tag. That is. you can resize the image). Thus our size has a width of 96 pixels and a height of 90 pixels. if you want to follow good coding practices.

then your image will not be displayed and what is written in the frame is all that will appear in its place. ALT text may not contain markup tags. If the browser is a text only browser (such as Lynx). or "BOTTOM". the browser will display the ALT text instead. load the document and note carefully what is printed in the space reserved for the image before it is displayed. 2. and not just to provide a description of the image. 3.gif" BORDER="0" ALIGN="MIDDLE" WIDTH="60" HEIGHT="60" HSPACE="10" ALT="chair">We are wheelchair accessible. 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 ABOUT OUR HALL 66 . So if the image is purely decorational. Why would we want to write something in the image box? 1. The ALT attribute simply gives the user information about the image. 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. 4. try again. Some search engines take into account the text written in the ALT attribute when creating your website's description. Any user has the option of turning off the graphics display.html tutorials in web page design by J. In general. It should be used to replace the image's meaning. the user will know what is being loaded and can decide to wait for the image to load or go on to something else. 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. Gilson <BODY> <H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR> <H4 ALIGN="LEFT"><IMG SRC="whechair.if not. Hopefully you will notice what was printed . If you do not want to have anything printed in the frame.INTRODUCTION TO HTML . If the the graphics display is turned off. Before an image is displayed. This then lets the person know that there is an image there and what it consists of something the viewer will appreciate . The ALT command is used to specify a text string to be displayed in browsers that do not support images. You can use them in any order. Used for aligning one line of text beside the image. So. Here is a summary of all the above attributes associated with the IMG tag. Although the ALT attribute is not required for the image to be displayed.</H4> Please call for rates<HR> </BODY></HTML> Now save the document. Yahoo. and where your website will be placed in a search result. etc.. you should include it to follow good coding practices. InfoSeek. WebCrawler. While the image is being loaded (which can sometimes take awhile). If you are interested in eventually placing your website on the internet through Search Engines such as AltaVista. The "ALT" attribute allows you to write something in the frame before the image is placed there. use ALT="" or you could use a decorative ALT text like "*". This again lets the person know what the image would have been if it had been allowed to be displayed. you often see a box or frame placed first and then the image is placed in the box or frame. SWITCH back to your browser. ALIGN can be "TOP" "MIDDLE". when the image cannot be displayed for whatever reason. keywords. the text in the ALT command will replace the image.

The rest of the attributes are purely optional and you use them based on your presentation needs. the IMG attributes and values are not case sensitive.INTRODUCTION TO HTML .gif 2. keeping the following points in mind: 1. 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. for example. The second title (An Adult Lifestyle Community for Seniors) is a level 2 heading BUCHANAN VILLAGE 67 . HEIGHT and ALT attributes are to be included for good coding practices. only the WIDTH. The width of the image is 60 pixels 3. ALIGN="MIDDLE" is the same as ALIGN="middle" which is the same as align="middle". For example. The height of the image is 85 pixels 4. Also. There is to be no border around the image 5. as you might have expected. There is to be a horizontal space of 20 pixels around the image 6. Make up your own suitable file names for the links 9. The image is named cross1. The first title (BUCHANAN VILLAGE) is a level 1 heading 10. Suppose you want more than one line of text to be displayed beside the image. The word "Cross" is displayed before the image is displayed 7. Gilson 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. 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. Thus.html tutorials in web page design by J. 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.

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson 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:

Operated by the Retirement Home Association

68

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson <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> IMAGES NOT APPEARING IN YOUR BROWSER? 69

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson </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>

| Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Eight |
The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2009 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to htmltutorials@bfree.on.ca

ANSWERS

70

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson

LESSON EIGHT - IMAGES - PART 2
You may read the following sections in their entirety or use these choices to go directly to a section. | Using an image as a link | | Thumb-nail images | | Placing thumb-nail 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?

LESSON EIGHT - IMAGES - PART 2

71

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson 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: USING AN IMAGE AS A LINK 72

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson <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).

PLACING THUMB-NAIL IMAGES ON A WEB PAGE

73

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson

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. PLACING THUMB-NAIL IMAGES ON A WEB PAGE 74

the browser then loads the original image from the directory on the server. Your final question: Problem 7: If you remove the BORDER="0" from the above command line which is: <A HREF="cross1. So the full size image appears much quicker because you are not loading a whole new image. | top | | bottom | ANSWERS 1. Too many images can result in a busy look which makes the page hard to read. In this section. The browser loaded the web page named "index.gif"><IMG SRC="cross1.INTRODUCTION TO HTML . Also. Note in the command line that the same image name is used for both the HREF and the SRC values ("cross1. 5.htm"). "home" as written in the ALT attribute.gif") and that the thumb-nail has been resized to a width of 39 pixels and a height of 50 pixels. in some cases.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. "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.gif"). the thumb-nail is loaded first and when you click on the thumb-nail. 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> PLACING THUMB-NAIL IMAGES ON A WEB PAGE 75 . I often see web pages with too many unnecessary images. 2. Therefore. 4. "Click on the button to head home" are to be part of the link. You are simply displaying it in normal size. the button may be too small to show the complete word "home". many images can greatly increase the time it takes to load the page. when the image is loaded. Thus if the words. it is resized for the thumb-nail. In the previous section. The complete name of the image is "back. This will certainly "turn off" many visitors to your website -. what you want for the link must be contained between the anchor tags.htm" (my home page) as indicated in the HREF attribute (HREF="index.especially those still using lower version browsers and those with slower connections to the internet. 3. Note that I chose "home" to represent the "meaning" of the button. Unfortunately. they must occur before the closing anchor tag. ask yourself the question.gif" as indicated in the SRC attribute (SRC="back. Recall that the anchor element is a container element. Evaluate each image based on its contribution ("How important is this image?") versus its cost in downloading time ("How large is this image?"). Gilson You may have noticed that the original image loaded faster than in the previous section.html tutorials in web page design by J. There will be 10 pixels of space between the button and the words "Click on the button to head home". These visitors will simply stop the loading and go on to something else or they will turn off the displaying of images altogether.

you may not want a border.on. The first thumb-nail does not have the BORDER attribute and so the browser placed its own border. Gilson Here it is shown as part of the complete statement.htm"><IMG SRC="back. please report it to htmltutorials@bfree.html tutorials in web page design by J. you may want the border. If you find a copyright violation. If your image has a transparent background. All rights reserved. | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Nine | The information contained in these free 21 lessons is Copyright ©. use BORDER="0". If your image does not have a transparent background. <H4 ALIGN="CENTER"><A HREF="index. 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. 7. while the second one has BORDER="0" to prevent the browser from placing one. 1997 .2009 by local and international copyright laws. Brantford Educational Services. Here is a comparison. So if you do not want this border.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. Header tags always strongly emphasize text. If you remove the BORDER="0".ca ANSWERS 76 .INTRODUCTION TO HTML . 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>). the browser will place its own border around the thumb-nail. It is therefore illegal to copy these lessons into another website.

INTRODUCTION TO HTML .COLOR 77 . I changed the visited link color from the standard purple to a darker magenta. This way your text will still be emphasized whether a browser supports color or not.html tutorials in web page design by J. This lesson is for those who have browsers that do support color in one form or another.COLOR You may read the following sections in their entirety or use these choices to go directly to a section. it is called an "active link". I like a white background with black letters. Because some people may still be using browsers that do not support full color. Gilson LESSON NINE . LESSON NINE . changing the background color of a web page and changing the color of the links. Click here if you would rather view this same lesson without the red text (standard black text). As you may have noticed in all of my lessons. It represents the link that is currently being selected. The default color for an active link is red. but if you want to emphasize text. if not all browsers today support coloring the entire text. Generally when you read a book. 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. When you click and hold the mouse button on a link (don't release the mouse button). it is important that you do not rely totally on color for emphasizing text. Color then should be used only as an enhancement of your presentation. or using monitors that do not support color (for example. that's fine. Magazines make great use of color. the link becomes a "visited link". This makes for easier reading as it gives the greatest contrast. the pages are not gray but white. a black and white monitor). So if you want to use color for those browsers that do support them (as I often do). 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. you should see this lesson printed in red text with dark green links (instead of the standard blue links). If your browser supports color. We will be discussing each of these situations later in this lesson. In this lesson I changed it to a dark blue color. I changed this gray background to a white background. If you click on one these links and then return to the same spot. | 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. or using monitors that do not have at least 16 bit color (which is the minimum you need). Most. you must still use logical tags such as <STRONG> and <EM> or a header tag. Thus colors in some browsers may not be as sharp as you might expect. or if a web page is being viewed in a color or in a black and white monitor. How a web page looks in your browser will not necessarily be how it looks in another browser. Remember that you are to design your web pages also for content and not just for appearance. a block of text. Keep in mind that the quality of color displayed in a browser is also dependent on the quality of the monitor being used. or a color could be displayed in a slightly different shade than you might have intended.

In addition. 15. 2. and Hexadecimal 12 is our number 18. These 16 digits are: 0. 11. the intensity for each color ranges from 0 to FF (Hex FF = Dec 255). Hexadecimal 11 is our number 17. E. 0 is OFF meaning it contains no amount of the color and 255 is FULL ON meaning full intensity of the color. the amount of each color must be given as a two digit code (2+2+2=6 digit code for the color). you combine the digits as in 10. we have Hexadecimal 10 is our number 16. 12. 17. Here is the direct comparison between the two systems: DEC: 0. GG for the intensity of GREEN. just click on the BACK button. 2. 3. 8. 8. 6. 12. Gilson | top | | bottom | HEXADECIMAL VERSUS DECIMAL NUMBERS To change the color of your text. and BB for the intensity of BLUE. 6. 7. take a moment now and see a table giving a good range of colors and their corresponding codes. 11. The Hexadecimal Number System uses 16 different digits before digits are combined (hence the name "base 16"). etc. 2. Please send me to Lesson Ten to see the color table Unfortunately. 1. etc. the numbers needed for the color codes are not in our number system which is the Decimal System or base 10. 8. "E" is our number 14. 3. 8. D. 5. 4. background. 10. Thus 00 is OFF UNDERSTANDING COLOR 78 . A. 5. F Once you go past "F". When you are ready to return here. "B" is our number 11. 6. 4. E. The code takes the form "#RRGGBB" where RR stands for the amount or intensity of RED in the color. Thus Decimal 11 = Hexadecimal B. 3. 3. your need a six digit code preceded by a "#" sign. The table is in Lesson Ten. 9. 14. In the decimal number system. 18 HEX: 0. Once you go past 9.INTRODUCTION TO HTML . 5. 13.. the intensity of each of the colors RED. B. 2. Continuing on. 9. C. A. GREEN and BLUE in a color code ranges from 0 to 255 (= a range of 256 numbers). and "F" is our number 15. 4. B. and Decimal 18 = Hexadecimal 12. 6. 5. 4. you combine digits as in 10. "D" is our number 13. 1. Decimal 15 = Hexadecimal F.html tutorials in web page design by J. 16. 7. 7. etc. D. Our Decimal Number System uses the digits from 0 to 9 as in: 0. Before we continue with this discussion. 1. C. the numbers needed for any color code are written as Hexadecimals or base 16. 12. Since the code for each of the three colors must be given as a Hexadecimal Code. 12 Note that "A" is our number 10. 7. No. 11. 9. 9 There are 10 of these digits and our number system is based on these 10 numbers . 11. 10. 1.hence the name "base 10". F. "C" is our number 12.

you will also see an HTML box that gives the equivalent Hexadecimal value. the first digit (or rank) has weight equal to 16 and the second digit (or rank) has weight equal to 1. Hex C4 = 12x16 + 4x1 = Dec 196. 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. Just go to your favorite search engine and search for the phrase converting decimals to hexadecimals. Note the little round buttons beside the HEX and DEC. Now click on the radio button beside HEX and immediately the display shows 2E.255. Also. you will see that all the colors are given as decimal numbers. Since Hex C = Dec 12 and it is in the first rank. green. you can of course use a calculator that has this capability or you can use the computer's built-in calculator. This Dec 46=Hex 2e. it is the 6 digit Hexadecimal value that must be used in the coding of a web page. 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. Find a website that will convert any decimal number for you.INTRODUCTION TO HTML . For example. For example. I offer the conversion here for interest sake. 250 and 34 respectively. Here is a quick and easy way to change a two digit Hexadecimal number into a decimal number.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. 3. Using the above reasoning we have Hex FF = 15x16 + 15x1 = Dec 255. just click in the radio button beside DEC and then type in 46 (or use the mouse and click on the numbers 4 & 6). Use a scientific calculator that has a built in DEC-HEX converter. and blue). Dec 46 = Hex 2E. 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. 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. 2. here are three suggestions on how to do this. All the numbers in between Hex 00 and Hex FF give the millions of different colors. Thus Hex 9F = Dec 159. and blue are 46. Therefore the Hexadecimal number 9F = 9x16 + 15x1 = 144 + 15 = 159. To convert a Hexadecimal number to a decimal number. green and blue) is 46. HEXADECIMAL VERSUS DECIMAL NUMBERS 79 . As you will see later in this lesson. If you look carefully in Paint Shop Pro. Using one of these three methods. green. you should also find that Dec 250 = Hex FA and Dec 34 = Hex 22. so choose VIEW and then choose SCIENTIFIC. Look in the HTML box and it will say #2efa22. There are several websites that do this. If you are using Windows. How many choices do you have? Well. Gilson meaning that Hex 00 contains no amount of that color. They are called Radio Buttons. if you have 256 choices for each colour and there are three basic colors (red. you need to change this calculator into a scientific calculator. 250 and 34 respectively. we have 12x16. Now if your paint program does not give you the equivalent HTML Hexadecimal value. in the Hexadecimal number 9F. 1. Dec 250=Hex fa and Dec 34= Hex 22. or if you have a decimal number that you would like to know the Hexadecimal equivalent. "9" is considered to be in the first rank and "F" is considered to be in the second rank. In a two digit Hexadecimal number. while Hexadecimal FF is FULL ON meaning full intensity of that color.html tutorials in web page design by J. Now you have a scientific calculator. Therefore. suppose you see a color you like and it says that the RGB index (intensities of red. Thus if the intensities of red. To change Decimal 46 into Hexadecimal.

Also note that the # symbol is part of the code. In other words. RR stands for the intensity of RED in the color. GG for the intensity of GREEN.html tutorials in web page design by J. Note that BGCOLOR is a BODY attribute. 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.INTRODUCTION TO HTML . As stated in the above "hexadecimal versus decimal" section. Gilson 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. BGCOLOR is supported by the BODY tag as you will see in the example document given below. Leaving out the # symbol is considered a poor coding practice. and BB for the intensity of BLUE. the command is: <BODY BGCOLOR="#FFFFFF"> as in: HEXADECIMAL VERSUS DECIMAL NUMBERS 80 . 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.

aqua. 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.html tutorials in web page design by J. black. red. Problem 3: Using one of the above codes. This also applies to text links. silver. Here are the attributes of the BODY tag to control all the levels: TEXT="#RRGGBB" LINK="#RRGGBB" to change the color of all the text on the page (full page text color. teal. gray. purple. fuchsia. lime. ALINK stands for Active LINK. navy.) to change the color of all the links on the page (from the standard blue color. ALINK represents the link that is currently being selected and this link is highlighted with the color CHANGING THE BACKGROUND COLOR OF A WEB PAGE 81 . blue. green. maroon. you can change the color up to four levels. 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. Gilson <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. 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. This color occurs when you click and hold down the mouse pointer over a link.) ALINK="#RRGGBB" to change the color of all Active links (from the standard red color).INTRODUCTION TO HTML . olive. If you include the links. That is. white.

Problem 4: Give the BODY command line that gives a WHITE background. RED text. Therefore do not rely totally on color to emphasize text.that is. When they see blue underlined text. So use color if you want. One way to find this out is to test your web pages on a black and white monitor. So if you want control of the colors. your specified color could conflict with a user's default.html tutorials in web page design by J. restores the previous text color. don't over do it. FONT is a container element and so anything between the opening and closing FONT tags will be changed to the specified color. to emphasize text. they automatically associate this with a link. BLUE active links. set all the attributes. VLINK="#RRGGBB" to change the color of all the links after they have been visited (from the standard purple color). GREEN (lime) links.INTRODUCTION TO HTML . It will confuse your viewers. use the formula: <FONT COLOR="#RRGGBB">text text text</FONT> where RRGGBB represents the Hex code of your desired colour. | 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. Finally. 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. etc. 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). The closing tag. and MAGENTA visited links. <EM&gt. header tags. if you set one of the BODY color attributes (such as TEXT). If you don't. | 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. Also. Both can be downloaded from the internet. You should keep in mind that some people are used to seeing blue links and purple visited links. This could result in unreadable text. To change the color of only a portion of text (a block of text). do not set the unvisited and visited links to the same color. Changing these colors could cause some confusion. Therefore. </FONT>. it is recommended that you set them all. Gilson defined in the ALINK value. but still use logical tags such as <STRONG>. VLINK stands for Visited LINK. CHANGING THE COLOR OF ALL THE TEXT ON A WEB PAGE 82 . So do use these color attributes with care . or surfers using a monitor that is not a color monitor.

Although the background wallpaper is made up of several smaller .jpeg (or . just CHANGING THE COLOR OF A BLOCK OF TEXT 83 . the repeated blue stucco image) because the nature of this stucco background creates a seamless pattern. If you want to save the wallpaper (and your browser lets you). You can compare placing an image for the background of a web page to wallpapering a wall in your home. For some reason.jpeg images. allow their users to disable it.jpg) image repeated over and over again. In my blue stucco background you will likely not see the repeated patterns (that is. it looks like one large sheet of wallpaper. 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.gif or . but in fact is made up of several narrow sections of paper.jpg was repeated over and over to make up the blue stucco background.gif or . won't support the HEADER tag either if the HEADER tag is not placed right before the heading. Yet it is possible for a user to disable BODY colors. it is loaded as one file and is a BODY attribute. in which the seams are place together in such a way that the patterns match. When an image is used for the background of a web page (that is. you should place the FONT tag in front of the HEADER tag and not the other way around. For example. you can continue the lesson with the stucco background or click the BACK button to return here. Gilson | Click here to go to the answer section | None of the browsers which support the FONT tag. a number of browsers that do not support the FONT tag for color. One final suggestion: If you plan to use the FONT tag with a HEADER tag. it is actually one small . if you go back to my lesson with the blue stucco background. just do it in the same way you save any image. just click here and then if you want.INTRODUCTION TO HTML . In other words.html tutorials in web page design by J. By the time the wall is covered with wallpaper. 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. when you see the background of a web page wallpapered). Here is the actual full size image I used for the blue stucco background: This little image named blue_stc. If you look closely at a web page with an image for the background you will often see the repeated patterns.

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. with a stucco background (which is the one I used).jpg"> You can have these attributes in any order and you do not have to use all of them.INTRODUCTION TO HTML . <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#336633" ALINK="#0000FF" VLINK="#FF66FF" BACKGROUND="blue_stc. This BACKGROUND attribute overrides the BGCOLOR attribute simply because the image goes over top of the background color. if you do not want that gray background while the background image loads. If you do not specify a BGCOLOR. You can also control the background color while the web page is loading the background image.. you could change it to a white (or some other color) background. even changing the name if you want to. You can then save it to any folder. the visited link to a darker magenta. Note two points with this BACKGROUND attribute: 1. For example. the color specified in BGCOLOR will be used. Gilson click anywhere on the stucco wallpaper with the right mouse button and then choose SAVE AS.. the active link to blue. if you set one attribute. the browser's default background color will be used. 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. There are several places where you can find background images that are free to take. as we learned earlier in this lesson. The command to bring in a background image is: <BODY BACKGROUND="image. If the background image cannot be displayed by the browser. you should set them all to avoid possible conflicts with a viewer's default values.jpg"> where "image. For example. That is because it is an image and images take longer to load. the links to a darker green. | top | | bottom | USING AN IMAGE FOR THE BACKGROUND OF A WEB PAGE (wallpapering abackground) 84 . 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). This can turn off visitors who may leave your website before the page is finished loading.jpg" represents the name of the image. As soon as the background image appears. Here is an example of a BODY tag that changes all the text to red. However.html tutorials in web page design by J. Try different colors and you will get different effects. the color specified in BGCOLOR will be used. it will wipe over the white background. You can create your own image backgrounds or you can take them off the net. <BODY TEXT="#FF0000" LINK="#336633" ALINK="#0000FF" VLINK="#FF66FF" BACKGROUND="blue_stc. 2. Just go to your favorite search engine and do a search for "free background images". I have seen some very large images for backgrounds that result in web pages taking far too long to load.

INTRODUCTION TO HTML . Both of them can be downloaded from the Internet. <BODY BGCOLOR="#0000FF"> 4. | top | | bottom | ANSWERS 1. In other words. Brantford Educational Services.ca A FIXED BACKGROUND IMAGE 85 .html tutorials in web page design by J. It is therefore illegal to copy these lessons into another website. Unfortunately there is no similar attribute that can be used for Firefox and Netscape browsers.on. Dec 128 = Hex 80. Hex 7B = 7x16 + 11x1 = 112 + 11 = 123 3. 2. they would like to see the background image in a fixed position with the text and images scrolling over top of it. to prevent the background image from scrolling (and thus also preventing the image from repeating itself over and over again). 5. 1997 . If you find a copyright violation. please report it to htmltutorials@bfree. Well. Firefox and Netscape do not support the BGPROPERTIES attribute and so will ignore the attribute and scroll the image with the text. | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Ten | The information contained in these free 21 lessons is Copyright ©. Gilson A FIXED BACKGROUND IMAGE Every once in a while I get an email asking me for the coding to prevent the background image from scrolling with the text. Among the most popular browsers are <FONT COLOR="#0000FF">Firefox and Internet Explorer</FONT>. so the code would be "#63FF80". In other words.jpg" BGPROPERTIES="fixed"> Note: The BGPROPERTIES attribute will only work in Explorer browsers as BGPROPERTIES is an Explorer attribute.2009 by local and international copyright laws. 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. All rights reserved. Dec 255 = Hex FF. you use the BGPROPERTIES attribute as in: <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" BACKGROUND="blue_stc. Dec 99 = Hex 63. <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00FF00" ALINK="#0000FF" VLINK="#FF00FF"> You can use these BODY attributes in any order.

You use these color codes to change the background color. For example. See Lesson Nine if you need to review the meanings of these attributes. 66.INTRODUCTION TO HTML . So you can use any legal code you like. restores the previous text color. However. When using color codes in your HTML documents. 33. it will "round off" to the nearest color in the table or one that it can distinguish. Each intensity is a hexadecimal number from Hex 00 to Hex FF (= Dec 00 to Dec 255 = 256 intensities for each color). | 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. These multiples are HEX 00. For example. the full page text color. use the FONT tag with the COLOR attribute as in: <FONT COLOR="#CC99FF">text text text</FONT> where #CC99FF represents the color code. ANSWERS 86 . (</FONT>). and MAGENTA visited links. most browsers cannot distinguish all these millions of color shades. So if you give it a code whose shade the browser cannot distinguish. blocks of text. The closing FONT tag. To change only a block of text. GG the intensity of green and BB the intensity of blue. Thus we have 6 x 6 x 6 = 216 color codes in the table. BLUE activated links. active links and visited links. 99. links.RGB COLOR TABLE You may read the following sections in their entirety or use these choices to go directly to a section. this table shows a cross sampling through all the codes. <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00FF00" ALINK="#0000FF" VLINK="#FF00FF"> gives a WHITE background. 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. Gilson LESSON TEN .html tutorials in web page design by J. GREEN (lime) links. click here to see all the codes and their colors in a series of images. you must have the # symbol in front of the color code and the whole code must be enclosed within quotation marks. CC. Since there are over 16 million color codes. 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. All of these except for changing blocks or portions of text. Note that the "0" in the codes is the number "0" and not the letter "O". Below is a table giving various colors and their corresponding codes. The table gives color intensities as multiples of Hex 33 (= Dec 51). are done as BODY attributes. RED text. and FF or 6 intensities of each color. If you do not see any colors in the table given below.

INTRODUCTION TO HTML .html tutorials in web page design by J. Gilson | top | | bottom | COLOR TABLE 000000 000033 000066 000099 0000CC 0000FF 330000 330033 330066 330099 3300CC 3300FF 003300 003333 003366 003399 0033CC 0033FF 333300 333333 333366 333399 3333CC 3333FF 006600 006633 006666 006699 0066CC 0066FF 336600 336633 336666 336699 3366CC 3366FF 009900 009933 009966 009999 0099CC 0099FF 339900 339933 339966 339999 3399CC 3399FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 990000 990033 990066 990099 9900CC 9900FF 663300 663333 663366 663399 6633CC 6633FF 87 ABOUT THE COLOR TABLE .

INTRODUCTION TO HTML . Gilson 993300 993333 993366 993399 9933CC 9933FF 666600 666633 666666 666699 6666CC 6666FF 996600 996633 996666 996699 9966CC 9966FF 669900 669933 669966 669999 6699CC 6699FF 999900 999933 999966 999999 9999CC 9999FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF COLOR TABLE 88 .html tutorials in web page design by J.

please report it to htmltutorials@bfree. All rights reserved.INTRODUCTION TO HTML .ca COLOR TABLE 89 .on. It is therefore illegal to copy these lessons into another website. 1997 . Gilson FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF 800000 800033 800066 800099 8000CC 8000FF 800080 008000 808000 000080 008080 C0C0C0 | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Eleven | The information contained in these free 21 lessons is Copyright ©. If you find a copyright violation.2009 by local and international copyright laws.html tutorials in web page design by J. Brantford Educational Services.

cell background colors | | Images in cells | INTRODUCING TABLES I like tables and make good use of them. 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. 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.M.M. | Introducing tables | | A basic table | | The BORDER attribute | | Cell spacing and cell padding | | Table headings and the WIDTH attribute | | Centering data | | <BR>. 12 P. and load the document to see the table. VOLUNTEER SCHEDULE 9 A. Tables are great for summarizing large amounts of information and for structuring data. <HTML> LESSON ELEVEN .html tutorials in web page design by J. Note that there is no border around the table and that there are no lines separating the data in the table.M. Once you have typed it in. cell links. An explanation of the commands is given below the document. My main home page uses a table to point to each lesson and in Lesson Ten. So. In the next lesson we study some of the more advanced features of table design. everything still nicely lines up.BASIC TABLES You may read the following sections in their entirety or use these choices to go directly to a section. Gilson LESSON ELEVEN . Tables are part of HTML 3. SWITCH back to your browser. SWITCH to NOTEPAD and type in the following HTML document that gives the above table. Tables allow viewers to find what they need quickly and easily. SAVE the document. | top | | bottom | A BASIC TABLE Here is a basic table. 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.2 specifications and most of the popular browsers now support them. I used a table to print all the colors and their codes.INTRODUCTION TO HTML . single cell tables.BASIC TABLES 90 . 2 P.

A row is a horizontal collection of cells. <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. Columns are vertical. Rows are divided into cells and each cell in our example is a data cell. A table is made up of rows and columns and tables are generated row by row with each row going from left to right. John. Mary and Marcia make up the second row. TICKETS are in the first column.M. use the attribute ALIGN="BOTTOM" as in <CAPTION ALIGN="BOTTOM"> (try it). 4. A caption can be placed above or below the table. 12 P. and so on. and Jacob make up the second column. Cells can also overlap. TABLE is a container element and so everything contained between the opening and closing TABLE tags is part of the table. Gilson <HEAD> <TITLE>VOLUNTEER SCHEDULE</TITLE> </HEAD> <BODY> <H3 ALIGN="CENTER"> <TABLE> <CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION> <TR> <TD> <TD>9 A. This table begins with a CAPTION tag.M. while 9 A. and 2 P. 9 A. Kimberly. A table must be declared with TABLE tags. The CAPTION tag is optional. It represents or describes the contents of your table.html tutorials in web page design by J. This is optional but it does serve the purpose of making your caption and headings stand out more.M. That is.M. SECURITY. Most browsers will automatically center the caption above the table contents.. 3. are in the first row. SECURITY. Our table has four rows. John.. <TD>2 P. your table won't work. <TD>12 P.INTRODUCTION TO HTML .M. To place the caption below the table. Kimberly. Therefore NURSERY. 1.M.M. a cell can span across 91 . If you leave off the closing tag. George and Ken make up the third row. 2. Therefore. A cell can also contain no data (the first cell in the first row is empty or blank). NURSERY. Therefore <TABLE> denotes the beginning of a table and </TABLE> denotes the end of the table. Note also that I strongly emphasized the caption and my headings.

8. This is what you should see: VOLUNTEER SCHEDULE 9 A. you are recommended to close all cells and rows as some browsers need them to get the nested tables to print correctly. I could have used any header tag and the results would have been the same.M. So use &lt/TD> if you want. has no effect on the data. Thus <TR> tells the browser that a new row is now beginning. Tables are always constructed as sequences of rows. emphasize. You can also use ALIGN="RIGHT" to have the table aligned with the right side of the browser screen (right justified).&lt/TD> but each new TD tag implies that the previous one has ended. This is because the width of each column is determined by the width of the largest cell in that column.M.M. as in: <TD>9 A. The closing TD tag (&lt/TD>) is optional. Notice in our example. load the web page into your browser.INTRODUCTION TO HTML . that the width of each column is not the same. Mary George Nancy 2 P.M. You simply place this tag in front of the information you want in the cell. if you have a table inside a cell. Some people use it as good practice to close each table cell explicitly. and color text. TD stands for Table Data. H3. I used <H3 ALIGN="CENTER"> to center the table. Note that some browsers may not honor the ALIGN attribute to center a table. The header tag.html tutorials in web page design by J. 6. There is also an optional end tag (</TR>) to explicitly terminate a row. each TR implies that the previous row has ended. If you remove this attribute. Marcia Ken Adam THE BORDER ATTRIBUTE 92 . Thus TD is used to mark up each individual cell. It denotes the beginning of a new cell. However. The TD cell can contain almost anything such as tags that center. images. 7. TR stands for Table Row. the browser assumes the cells will keep going to the right. You begin each row with a <TR> tag. 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. | 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. A data cell can contain lists. If you don't use the TR tag for each new row. 5. Again. you will see the table aligned with the left side of the browser screen (left justified). Gilson more than one row or span more than one column and we will deal with that in the next lesson.M. If you have a table inside a cell (nested tables). The list goes on. and even nested tables (a cell containing a table).&lt/TD> <TD>12 P. NURSERY John SECURITY Kimberly TICKETS Jacob 12 P.

Try BORDER="0" to see what happens to the table border. NURSERY SECURITY TICKETS John Kimberly Jacob 12 P. Gilson The table now has a border around the outside and each cell is separated from the other cells with borders.M. Let's do this now. If you want to have a wider border. Try different pixel widths to see if there is one you would like to use in your tables. just place the space character in the cell.INTRODUCTION TO HTML . Save this change. then change the "1" to a bigger number. 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. there will be no wide border around the top and left side of the table. Note that the empty cell is different in appearance from the rest of the cells. there will be no border around the empty cell. 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. Marcia Ken 93 . 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. For example." and was studied in Lesson Five.M. 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". Go back to our HTML document in NOTEPAD and change the first <TD> tag that creates the empty cell to: <TD>&nbsp.M. NURSERY SECURITY John Kimberly 12 P. Do this now to see the effect.M.M. VOLUNTEER SCHEDULE 9 A. Marcia Ken Adam The default value for BORDER is 1. Mary George 2 P. "Cells" are the individual rectangles in the table. Mary George Nancy 2 P. The quotation marks around the "1" are optional. The invisible space character is the ampersand command "&nbsp. Note: in some low level browsers.M. VOLUNTEER SCHEDULE 9 A. Therefore <TABLE BORDER> would have a border 1 pixel wide. change the "1" to a "10" so that we have a border of 10 pixels.html tutorials in web page design by J. If you want it to look like the rest of the cells. Below is the output with a border width around the table of 10 pixels. In other words.

M. That is. Now when you load this document into your browser. NURSERY John 12 P. 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".M. you should see: VOLUNTEER SCHEDULE 9 A.M. If you do not include a value. NURSERY John 12 P. the borders around adjacent cells will also be separated by the same number of pixels. Mary Marcia Ken Adam SECURITY Kimberly George TICKETS Jacob Nancy Note that CELLSPACING affects the amount of spacing between cells. Marcia 94 CELL SPACING and CELL PADDING . Change the TABLE command to: <TABLE BORDER="1" CELLSPACING="2" CELLPADDING="5"> and this is what you should see: VOLUNTEER SCHEDULE 9 A. This means that the borders will not look continuous. 2 P.M. Gilson 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.html tutorials in web page design by J.INTRODUCTION TO HTML . Mary 2 P. Try different values for different effects. the default cell spacing value is 2 pixels.M. the value in the CELLSPACING attribute indicates how many pixels of white space there should be between individual cells.M. Note: in some low level browsers.

INTRODUCTION TO HTML .M.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. the CELLSPACING TO "0" and CELLPADDING to "3" . <TR> <TH>NURSERY <TD>John <TD>Mary <TD>Marcia <TR> <TH>SECURITY <TD>Kimberly <TD>George <TD>Ken <TR> <TH>TICKETS TABLE HEADINGS (<TH>) and the "WIDTH" ATTRIBUTE 95 .. 12 P. just change the number 5 to a bigger number. To see the effect of the header tag.) are headings for the columns.html tutorials in web page design by J. you can use the Table Header tag (<TH>) instead of the Table Data tag (<TD>). <TH>2 P.. 2 P.M. | 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. while NURSERY. For example. A cell that contains a heading is called a "Header Cell". The times (9 A.M.M. <TH>12 P. Gilson SECURITY TICKETS Kimberly Jacob George Nancy Ken Adam Problem 1: What do you think is the effect of adding the CELLPADDING attribute to the TABLE tag? If you are unsure. SECURITY.M. change our HTML document to look like the following (I also changed the BORDER to "3".M. <TH>9 A. and TICKETS are headings for the rows. in our table. To indicate these items as headings.

M. For example.M. note how the label TICKETS is centered in the cell). the headings will also be centered vertically. Now change the TABLE tag to include the WIDTH attribute. If your browser did not accept the WIDTH attribute in the above example. 2 P.M.M.html tutorials in web page design by J. try it again but specify the width in pixels this time. If you have more than one row in a cell. Mary Marcia Ken Adam SECURITY Kimberly George TICKETS Jacob Nancy Note the headings in the header cells are strongly emphasized (normally in bold). NURSERY John 12 P. They became redundant.M. This will become more noticeable in the next example. 96 . then your browser does not recognize the WIDTH attribute in this situation. For this reason I removed the STRONG tags from all the row and column headings.M. 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. Gilson <TD>Jacob <TD>Nancy <TD>Adam </TABLE></H3> </BODY></HTML> This is what your table should now look like: VOLUNTEER SCHEDULE 9 A. If this did not happen. Note also that each heading is centered in its cell (for example. You can use any suitable percentage for the width or you can specify the width in pixels. The table has been expanded to the width of the browser screen (100 per cent of the width of the screen). NURSERY SECURITY TICKETS John Kimberly Jacob Mary George Nancy 12 P. Marcia Ken Adam 2 P. try WIDTH="600" (no %) and see what happens.INTRODUCTION TO HTML . Notice again that the headings are emphasized and centered but the data in the cells are not centered.

Change the first three cells in the first row to: CENTERING DATA 97 . For example. 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.M.M. 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. the view will not be able to see the entire table. You can also control the width of any column. the 9 A. This is what you should see: VOLUNTEER SCHEDULE 9 A.M. NURSERY SECURITY TICKETS Jacob John Kimberly Nancy Mary George Adam Ken 12 P. Using pixels for the width means that if the viewer resizes the window to something smaller than the width you have specified.html tutorials in web page design by J. left justify the name Mary. 2 P. For example.M. column to 10%. column to 20% of the screen width. let's change the width of the first column to 40% of the browsers screen width.INTRODUCTION TO HTML .M. let's center the name John. Note also that the <TR ALIGN="CENTER"> centered the contents of the entire row. and right justify the name Marcia. Gilson Specifying the width in pixels will give an exact width of the table which can't be changed. Therefore using a percent will allow the table to be changed if the window is resized. Let's also center the entire SECURITY row (Kimberly. | top | | bottom | CENTERING DATA You can control the placement of data in the individual cells by using the ALIGN attribute. To do this. George and Ken) by placing the ALIGN attribute with the TR tag for this row. "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. Marcia Note that the name "John" was centered in the cell. and the 12 P.

M. 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&gt. 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.M.M. try specifying the width in pixels.INTRODUCTION TO HTML . if percentages have no effect on the column spacing. 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). insert the <BR> tag. Gilson <TD WIDTH="40%">&nbsp.M. HEAD. <TH WIDTH="10%">12 P. Now save these changes and load the web page into your browser. Link Buttons. CELLS AS LINKS. A cell can contain as many lines of information as you want. TITLE and BODY elements. is 20% of the width of the screen and the 12 P. SINGLE CELL TABLES. NURSERY SECURITY TICKETS John Kimberly Jacob 12 P. LESSON SIX Creating Page Links. Type in this new HTML page and be sure to include the HTML. The column with the heading 9 A. here is one cell from my main home page. This is what you should see: VOLUNTEER SCHEDULE 9 A. Again. CELL BACKGROUND COLORS 98 .M. SINGLE CELL TABLES. For example. E-mail Here are the lines that make up this cell. Mary George Nancy 2 P. Marcia Ken Adam Note that the first column of headings has been expanded to 40% of the width of the browser screen. USING <BR&gt.M.M. CELLS AS LINKS.html tutorials in web page design by J. I removed the link as this is covered in the next section (each of my cells is a link to a lesson). <TH WIDTH="20%">9 A.

Also use the same yellow color code as in the previous example. Gilson <H3 ALIGN="CENTER"> <TABLE BORDER="3" CELLPADDING="3"> <TR> <TD ALIGN="CENTER">LESSON SIX<BR>Creating Page Links. Use "#FFFFCC" for the color code (taken from the color table in Lesson Ten).htm". Here is the cell with the light yellow background: LESSON SIX Creating Page Links. 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. USING THE CELL AS A LINK TO ANOTHER WEB PAGE There is much that you can do with data cells. 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. Problem 4: Now change your answer to Problem 3 to include a light yellow background.<BR>Link Buttons. The file name (URL) for Lesson Six is "lesson6. Notice the use of <BR> tags to force line breaks at key points in the text. Every cell in my home page is a link to another page.INTRODUCTION TO HTML . 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. 2 P. E-mail so that the entire cell becomes a link to Lesson Six.M. E-mail </TABLE></H3> Using a value of "1" for the TABLE attribute will give the best looking border in low level browsers. One is using the cell as a link to another web page.html tutorials in web page design by J. Change what is necessary in the "VOLUNTEER SCHEDULE" HTML document to make the table look like the following: (set the border to 3 pixels.) VOLUNTEER SCHEDULE 9 A. | Click here to go to the answer section | ADDING A BACKGROUND COLOR TO ANY CELL This section assumes that your browser supports background colors. Link Buttons. 12 P.M. cell spacing to 0 pixels and cell padding to 3 pixels. 99 .M.<BR>Link Buttons.

INTRODUCTION TO HTML . just remove the anchor tags and the HREF attribute as in: <TD><IMG SRC="cross1. 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. Gilson NURSERY SECURITY TICKETS John Kimberly Jacob Mary George Nancy 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. This allows the browser to lay out the table in advance. 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. For example. if you do not want the image to be a link. Not using the WIDTH and HEIGHT attributes can cause unnecessary delays in displaying your 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. so it can draw the table and place the text above and below the table before the image is loaded.gif" ALIGN="CENTER" ALT="cross" WIDTH="90" HEIGHT="120" BORDER="0"> If you use images in a table. you follow the same rules as for placing an image on a web page.htm"><IMG SRC="cross1.html tutorials in web page design by J.gif" ALIGN="CENTER" ALT="cross" WIDTH="90" HEIGHT="120" BORDER="0"></A> </TABLE></H3> Experiment with different attribute values. be sure to specify the WIDTH and HEIGHT attributes in the IMG tag. PLACING AN IMAGE IN A CELL 100 . Add some cell padding and cell spacing. Place a border around the image as well as a border around the table.

To change the color for the entire first row in the table . the width of the last column must be 100% . The TD line that answers the problem is: <TD ALIGN="CENTER"><A HREF="lesson6. we have assumed that the BGCOLOR attribute belongs only to the BODY tag.almost like a separate page. Again.<BR>Link Buttons. add the BGCOLOR attribute to the TR tag. If the entire cell is to be the link. Thus you have a lot of control over what goes into any cell.htm">LESSON SIX<BR>Creating Page Links. <TH>9 A. 2. Up until now. it is assumed to be in the current directory. 4. Using BGCOLOR with TR changes the background color of the entire row. the closing anchor tag (</A>) must be placed at the end of the cell's contents.M. To change the background color of individual cells. you need to specify the BGCOLOR attribute in each of those cells.html tutorials in web page design by J. <TH>12 P. <TH>2 P.INTRODUCTION TO HTML . Here is the line that will give the desired light yellow background color: <TD ALIGN="CENTER" BGCOLOR="#FFFFCC"><A HREF="lesson6.<BR>Link Buttons. <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 ANSWERS 101 .70% = 30%. the quotation marks around the value are optional. Since the percents of the first three columns add to 70 (40+20+10). CELLPADDING indicates how many pixels of space there should be between a cell's contents and the edges of the cell. be sure the HREF attribute contains the complete address (URL) of the website. the BGCOLOR is a TD attribute.htm">LESSON SIX<BR>Creating Page Links. E-mail</A> If you want to link to a website anywhere on the WWW.M.including the empty cell. To turn a cell into a link.M. E-mail</A> 5. 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. you need the anchor container element (A) and the HREF attribute pointing to the name and location where the cell is to link to. BGCOLOR changes the background color. Gilson | top | | bottom | ANSWERS 1. Since we want to load Lesson Six. Think of each cell as being a separate entity . In this example. 3.

If you find a copyright violation.ca ANSWERS 102 . Brantford Educational Services. It is therefore illegal to copy these lessons into another website. please report it to htmltutorials@bfree. Gilson <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 attribute. 1997 .INTRODUCTION TO HTML . | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Twelve | The information contained in these free 21 lessons is Copyright ©.on.2009 by local and international copyright laws. All rights reserved.html tutorials in web page design by J.

HR&gt.htm">LESSON THREE<BR>&lt. For example. <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.. | 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. I placed the instructions for the table in the first row which spanned across all the columns. Instead.htm">LESSON FOUR<BR>Emphasizing text<BR> and Heading tag</A> LESSON TWELVE . I grouped the first four lessons together and used a value of "3" for each of the BORDER.INTRODUCTION TO HTML . here is a simplified version of the table on my home page..<BR>CHOOSE ANY LESSON</H3> <TR> <TD ALIGN="CENTER"><A HREF="lesson1.htm">LESSON TWO<BR>Getting started</A> <TD ALIGN="CENTER"><A HREF="lesson3.ADVANCED TABLES You may read the following sections in their entirety or use these choices to go directly to a section. &lt.BR&gt. Gilson LESSON TWELVE . <P>. You may have noticed in the table on my main home page that I did not use the CAPTION tag.<BR> and other basic tags</A> <TD ALIGN="CENTER"><A HREF="lesson4. CHOOSE ANY LESSON LESSON ONE Introducing HTML LESSON TWO Getting started LESSON THREE <BR>.ADVANCED TABLES 103 . &lt. CELLSPACING and CELLPADDING attributes.htm">LESSON ONE<BR>Introducing HTML</A> <TD ALIGN="CENTER"><A HREF="lesson2.html tutorials in web page design by J.P&gt.

(greater than). please visit Lesson Five. The lt stands for "less than" The letters lt must be written in lower case as shown. To span across any number of columns. Note also the use of the <BR> tag to end lines at certain points in each cell. I use ampersand commands to print the "<" and ">" symbols. The first column span is the title which spans across all three columns. 6. Thus in our example. each cell is contained between the anchor tags <A> and </A>. The second row begins with LESSON ONE and note the <TR> tag to signify the beginning of this row.<BR>CHOOSE ANY LESSON</H3> Note the following points: 1. The ampersand command for ">" is &gt. 2.html tutorials in web page design by J. 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 104 CHOOSE ANY LESSON . As discussed in Lesson Eleven. and each HREF points to another file. Note that each cell in row 2 is a link to another page. 3. I placed an ALIGN="CENTER" in each cell to center the contents of the cell. <P>. 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 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. That is. The ampersand command for "<" is &lt. The ampersand command was introduced in Lesson Five and so if you need more information on this command. COLSPAN="4"(the quote marks are optional) tells the browser to span the first row across four columns. 4. Gilson </TABLE> The line that generated the first row that spanned across all four columns is: <TD ALIGN="CENTER" COLSPAN="4"><H3>&nbsp. Each new row must be designated with a <TR> tag. This is needed to prevent the cell from becoming too wide.INTRODUCTION TO HTML . 5. The topics in the Lesson Three cell includes the <BR>. and <HR> tags. the browser will treat the word as a tag and won't print the word. use the COLSPAN attribute and state how many columns the row is to span across. Recall that <TR> stands for Table Row. When you place the "<" and ">" angle brackets around a word.. So if I want to have <BR> treated by the browser as text and not as a tag.

3. CHOOSE ANY LESSON 105 . Note that each <TR> indicates the beginning of a new row in the table. TH (Table Header) both centers and emphasizes the headings. We will be making a change to this table in the next section. Note that I used <TH> instead of <TD> for the cells that contain the headings. Gilson Here are the lines that make this table.INTRODUCTION TO HTML . <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. columns 2 and 3. Each number was centered in its cell with the ALIGN="CENTER" attribute. <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. 4. then save and load it into your browser to see if everything comes out the same.) in the cell. it is considered to take the place of the cells in row 2.html tutorials in web page design by J. I placed the space character (&nbsp. 5. The first cell in row 3 is blank and to make it take on the appearance of the other cells. You any wish to SWITCH to NOTEPAD and type it in. 2. Since "Starting Speed in Feet per Minute" spans across two columns.

column 1 and row 3. CHOOSE ANY LESSON 106 . In other words. just ignore the cell and move to the next available cell in the row. In most browsers. So if a cell spans more than one row or column.INTRODUCTION TO HTML . and have the heading MATERIAL fill the first two rows in the first column so that the empty cell is eliminated. remove the empty cell and 2. Gilson ROWSPAN Let's take the last example. <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. 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. But it will look good in those browsers that do accept the <BR> to force blank or empty lines. the <P> won't work and in some browsers using the <BR> tag this way will not work either. let's change the table to look like: METALS AND THEIR REASONABLE CUTTING SPEEDS MATERIAL Starting Speed in Feet per Minute High-Speed Steel Carbide 150 225 800 1000 Stainless Steel Cast Iron Brass Copper 50 74 300 300 There are really only two changes that have to be made to have "MATERIAL" span two rows: 1. Therefore "High-Speed Steel" in the third row was printed in the second column as the first column was occupied.html tutorials in web page design by J. 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. add the ROWSPAN="2" to the <TH> tag for the "MATERIAL" cell.

Problem 2: Write the HTML document that gives the following calendar. JULY Sun Mon Tue 1 6 13 20 27 7 14 21 28 8 15 22 29 Wed 2 9 16 23 30 Thu 3 10 17 24 31 Fri 4 11 18 25 Sat 5 12 19 26 CHOOSE ANY LESSON 107 .5 1 3.5 4.html tutorials in web page design by J. 2. There is nothing like learning by doing. Problem 1: Make up the HTML document that will give the following table: DRILL SPEEDS MATERIALS DIAMETER IN INCHES CUTTING SPEED Feet Metres RPM 1. 4. Brass Cast iron Copper Stainless Steel 2. Use the value "3" for each of the attributes BORDER. CELLSPACING and CELLPADDING. Gilson Now it's your turn to make up a table.INTRODUCTION TO HTML .625 350 69 300 46 560 201 1200 167 | Click here to go to the answer section | | top | | bottom | PRINTING A CALENDAR A calendar is nothing more than a table with a lot of rows and columns. 3.

Both sides are 600 pixels long. <P>You can color it too if you want. Here is an example: This side is colored yellow Feel free to place anything on this side. VALIGN="TOP" (Verticle ALIGN) aligns the text with the top of the cell. you could set up it up as a one row. The width of the table can also be expressed in pixels. You could choose a table WIDTH of 100% and a table HEIGHT of any number of pixels that you desire. This cell is 30% of the browser screen width. 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: A SIDE-LINE 108 . This side just shows plain text. <P>But you can change it to anything you want. <P>Both sides are 600 pixels long. the left side is colored yellow. This side is 70% of the width of the screen. Note that the HEIGHT is in pixels (600) and not as a percent. <TD WIDTH="70%">This side just shows plain text. two column table. <P>This cell is 30% of the browser screen width. </TABLE> Now if you do not want a border.INTRODUCTION TO HTML . <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. A brief explanation is given to the left. Here is the BODY of the HTML document that gives this table. You can color it too if you want. But you can change it to anything you want. <P>This side is 70% of the width of the screen. If your browser supports full color.html tutorials in web page design by J. Gilson | Click here to go to the answer section | | top | | bottom | A SIDE-LINE If you would like to see your web page or part of your web page separated into two sections by a vertical line (a side-line).

This cell is 30% of the browser screen width. But you can change it to anything you want. A SIDE-LINE 109 . <TABLE 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. I have removed the yellow background color but you could experiment by leaving it in to see the effect. <P>This side is 70% of the width of the screen. An explanation and the BODY of this HTML document is given below the table.html tutorials in web page design by J. You can color it too if you want. <P>Both sides are 600 pixels long. A brief explanation is given to the left. This side is 70% of the width of the screen.INTRODUCTION TO HTML . VALIGN="TOP" (Verticle ALIGN) aligns the text with the top of the cell. This side just shows plain text. </TABLE> Here is another example of a side-line dividing the screen into two two columns. <TD WIDTH="70%">This side just shows plain text. <P>But you can change it to anything you want. Gilson This side is colored yellow Feel free to place anything on this side. Both sides are 600 pixels long. <P>This cell is 30% of the browser screen width. Note that the HEIGHT is in pixels (600) and not as a percent. Here is the BODY of the HTML document that gives this table. <P>You can color it too if you want.

A SIDE-LINE 110 . I just as easily could have placed it in the second cell and aligned it to the left side of the cell. Gilson Feel free to place anything on this side. I placed it in the first cell and aligned it to the right side of the cell.html tutorials in web page design by J. As you can see below in the IMG statement. I defined the line to be 600 pixels long and 2 pixels wide. As stated in the above "invisible" table. Feel free to save this line and use it in your own web pages. The vertical line is really an image placed in this cell and aligned to the right side of the cell. This cell is 30% of the browser screen width. Here is the BODY of the HTML document that gives rise to this table. This is the right side of the table.INTRODUCTION TO HTML .gif". 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. If you save this image. be sure to experiment with different lengths and widths. the line is only an image which I named "linevert.

I often see the first cell defined in pixels on other web pages. then 200 pixels represents one third of the width. 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. <P>The vertical line is really an <STRONG>image</STRONG> placed in this cell and aligned to the right side of the cell. There is one more side-line option that you will find very interesting and one that you may want to consider. </TABLE> You learned in Lesson Eleven that the WIDTH can also be expressed in pixels instead of as a percent. If the average screen width is 600 pixels.INTRODUCTION TO HTML . just click here.html tutorials in web page design by J. along with an explanation. <P> This line is 600 pixels in height (the same length as the table) and 2 pixels wide. 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. As you learned in the last lesson. for example. specifying a width in pixels will give an exact width which can't be changed (and you may want this to be the case). instead of WIDTH="30%" for the first cell. <P>This cell is 30% of the browser screen width. | 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. It would be a good learning experience to do some experimenting with the WIDTH attribute. <P> I could have placed the vertical line (the image) in this cell by aligning it to the left side of the cell. There is no need to define the width at all for the second cell as screen widths vary from browser to browser.<BR> <TD WIDTH="70%">This is the right side of the table. <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> ANSWERS 111 . you could use. WIDTH="200" representing 200 pixels. Therefore. Gilson <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. To see this one.

INTRODUCTION TO HTML . column 1. <TD ALIGN="CENTER">69 <TD ALIGN="CENTER">201 <TR> <TD>3. Gilson <TD>1. Note in this table that the title of the table (DRILL SPEEDS) spans across all six columns (line 3). row 3. 7. 7). column 1. Thus after the title. row 2. <TD ALIGN="CENTER">1200 <TR> <TD>4. <TD>Stainless Steel <TD ALIGN="CENTER">3.) in it. Note that the headings "Feet" and Metres" are considered to be in row 3. <TD>Brass <TD ALIGN="CENTER">2. <TD>Copper <TD ALIGN="CENTER">1 <TD ALIGN="CENTER">300 <TD>&nbsp. 5. row 2 column 2. Some of the cells are empty and as before I placed the space character in them.html tutorials in web page design by J. "CUTTING SPEED" is still considered to be in row 2 but it spans 2 columns instead of 2 rows (line 8). Since row 3. <TD>Cast iron <TD ALIGN="CENTER">4. we need to begin a new row (row 3) as indicated by the <TR> in line 10. 6. <TD ALIGN="CENTER">46 <TD ALIGN="CENTER">167 </TABLE> 1. Once that is done we begin row 4 (line 13). we begin a new row as indicated by the <TR> in line 4. <TD>560 <TR> <TD>2. 2. Answer to Problem 2: The first row in the table contains the month "JULY" and this row spans all 7 columns. The heading RPM is also still in row 2 and it also spans 2 rows (line 9). Feel free to experiment with different designs of calendars. row 3. row 3 column 2. Here is the ANSWERS 112 . 6. 3. columns 1 to 3 are occupied. 4. I printed the space character (&ampnbsp.625 <TD>&nbsp. After the RPM cell is set up. and row 2 column 3. there are no more row and column spans. a <TD> will automatically place "Feet" in column 4 (line 11) and "Metres" in column 5 (line 12). Therefore. 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. We are now in the second row of the table which is a row of headings. From row 4 and on. They are the only cells left to fill in row 3. columns 4 and 5 respectively. The <TR> in line 2 indicates the beginning of the first row. column 3 are all occupied.5 <TD>&nbsp. The first three cells in this second row span 2 rows each (lines 5.5 <TD ALIGN="CENTER">350 <TD>&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 ANSWERS 113 .INTRODUCTION TO HTML .html tutorials in web page design by J. Gilson 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.

on. Gilson <TD COLSPAN="2">&nbsp. please report it to htmltutorials@bfree. All rights reserved.INTRODUCTION TO HTML . 1997 .2009 by local and international copyright laws. Brantford Educational Services. If you find a copyright violation. It is therefore illegal to copy these lessons into another website.ca ANSWERS 114 . </TABLE></H3> | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Thirteen | The information contained in these free 21 lessons is Copyright ©.html tutorials in web page design by J.

html tutorials in web page design by J. ANSWERS 115 . Gilson Sorry. Please click here to see this lesson without frames.INTRODUCTION TO HTML . but your browser does not support frames.

It has to be a GIF image. then the background of the image must be a single color. 3. For this reason.html tutorials in web page design by J. 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. Gilson LESSON FOURTEEN . but most often it is the background color.INTRODUCTION TO HTML . but it has to be saved as a GIF image. The image does not have to be a GIF image to begin with. There is a background color but it isn't visible 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. Not all GIF images have solid or smooth colored backgrounds. The background color should not be used anywhere else in the image because it too would become transparent thus possibly distorting the image. LESSON FOURTEEN .TRANSPARENT IMAGES You may read the following sections in their entirety or use these choices to go directly to a section. | Introducing transparent colors | | Creating a transparent color using Paint Shop Pro | | Screen captures using Paint Shop Pro | 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. 4. This will override any default background color in a visitor's web page and so ensure the results you want. The color designated for the background should not be used elsewhere in the image or used extensively elsewhere in the image. it is recommended that you control the background color of your web page with the BGCOLOR attribute. If you want to designate the background color as being transparent. SOME POINTS TO REMEMBER WITH TRANSPARENT IMAGES: 1. An image with a transparent color is called a Transparent Image or a Transparent GIF.TRANSPARENT IMAGES 116 . You can only designate one color as being transparent. A transparent background simply means that you cannot see the background color of the image in your browser. not a combination of colors since only one color in the image's color map can be designated as transparent. In actual fact. the background color of the web page (no matter what color it is) simply replaces the background color of the image. 2. If you find that another part of the image also seems to disappear on the web page. You can make any color in the image transparent. Photographs do not work well as transparent images since it is hard to define a single color. The image background should be a single color.

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. If you do not have Corel Paint Shop Pro or Adobe Photoshop.gif. Note that the workspace theme you are seeing is called the Graphite Workspace Theme. just save Smiley at the top of the page with the red background. there are over 60 easy to follow digital photography tutorials. I will be illustrating transparent images using Paint Shop Pro which was developed and owned by a company name Jasc Software Inc. edit. If you do not have an image to work on. click on Smiley with the right mouse button and then from the pop-up menu. If you click on the View menu at the top of the Paint Shop Pro screen. This window is your work area. I like Paint Shop Pro because it is easy to use and it is also a great image editor. we will simply refer to Corel Paint Shop Pro Photo X2 as Paint Shop Pro. print and export your images. you will see a checkmark beside Use Graphite Workspace Theme indicating that this is INTRODUCING TRANSPARENT IMAGES 117 . it's the easiest way to get professional-looking photos . However. Photoshop is also another very popular image editor that many people use. Gilson In order to make a color transparent. It contains the commands and tools you need to create. is owned by Adobe. There are also many Web Design Tutorials and Art Resource Tutorials . or Save Picture As (one of these choices or a similar choice should be there). Corel must have liked what Jasc was doing because now they own the company. 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. Photoshop.all designed for Paint Shop Pro. These tutorials cover every conceivable adjustment to a photograph using Paint Shop Pro. you can download a fully functional copy for 30 days after which a decision to purchase must be made. Now Open Paint Shop Pro. Examples are Paint Shop Pro for Windows. 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. another great product. You can then choose a folder and save the image. choose Save Image As. and Photoshop for Windows and Macs. the main program window appears. please go to the end of the above section for the download link. if you have a digital camera and are into digital photography. In these lessons. It is the default theme. For example. With a built-in Learning Center to help first time users get started. The owners of Paint Shop Pro have made a significant effort to include a host of photo tools. Corel® Paint Shop Pro® Photo is the ideal choice for people who want extraordinary photos.fast!" Paint Shop Pro is reasonably priced and you get a lot for the money. When you do this. To do this. or like working with scanned photographs or portraits. Jasc was acquired by the Corel Corporation in 2004.INTRODUCTION TO HTML . Note that the image is named smile. 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.html tutorials in web page design by J. If you do not have a paint program. you need a program that will do it for you. We will deal with these items as we get to them in the lessons.

GIF89a supports animation as well as single color transparency.INTRODUCTION TO HTML . If you do not see your folder then click on the Browse More Folders option.. There was a list of format standards and transparency was the first part of the list . I will use Smiley as the example. just choose View --> Use Graphite Workspace Theme. make sure it reads GIF Graphics Interchange Format (*. To copy your image to the main working window. You can do that in two ways: 1. An interlaced CREATING A TRANSPARENT COLOR USING PAINT SHOP PRO 118 . Release the left mouse button and the image is placed. Click on the image name and then click on Open. This will display the Open dialog window. then slowly becomes clearer. you will not be able to choose a transparent color. just below the main working window. With Smiley displayed in Paint Shop Pro. For more information on these formats. In the Save as type box. choose Save As from the File menu. This will disable this graphic workspace theme and display the classic theme.gif) as we are saving a GIF image. To illustrate changing a color into a transparent color. This will display the Save As dialog window. To go back to the graphite workspace theme. Here are the steps: 1. 89a adds support for transparency and animation and is the more recent version of the GIF format. Your image should now appear in the folder display window to the right of the Organizer window. This is also known as the Venetian Blind load effect. is the Organizer window. 87a is the earlier version of the GIF format and does not support transparency or animation. load the image that you want to create a transparent color for. It shows some of your folder structure. This will display the Browse For Folder dialog window. 2. Double click on the option named folders. Near the bottom of the screen. 5. If you would rather work in the classic Paint Shop Pro workspace theme used in previous versions. This will also remove the checkmark beside Use Graphite Workspace Theme indicating that it is no longer active. Now click on the Options button located below the Help button. 2. Note that the picture of the image is still in the folder display window so we have not removed it from its folder. After you have opened Paint Shop Pro and decided on the display theme. The image should now appear in the working window. click into the box and choose this GIF file type. In the Version section.gif. This will bring up some more folders. click and hold down the left mouse button over the image and while holding down the left mouse button. just click on the Help button located under the Cancel button. Browse to the folder containing the image such as smile. just click once on its name and then click OK. This GIF format was standardized in 1989. In the Interlacing section. Choose Open from the File menu (File --> Open). drag the image to the working folder. Gilson the active theme. This will display the Save Options dialog window which is: 4. Browse to the folder containing the image.thus the "a" part. just choose this menu item again. an interlaced image loads on a web page first as a low resolution image. To choose this folder containing the image. 3. make sure that Version 89a is selected. That is. just drag the image to the window.html tutorials in web page design by J. If you choose to save the image as a jpeg image. If it does not say this.

the Transparency tab.INTRODUCTION TO HTML . Thus if you have a larger image. 7. you may want to choose interlaced. Gilson image allows viewers to get an idea of what the image looks like before it is finished loading. You can also use this tab to decide if there needs to be any further compression. Now click on the Run Optimizer button. 6. Note that you can choose to save your image as a GIF file without a CREATING A TRANSPARENT COLOR USING PAINT SHOP PRO 119 . Smiley is a small image and so there is no need to display it interlaced.but not for displaying a background image. Often interlaced images are used in displaying larger images that take a little longer to completely display . In the first tab.html tutorials in web page design by J. there are a number of choices. and the format options. Only GIF images can be interlaced. Non-interlaced means that we do not want the Venetian Blind load effect. (which is the one being displayed in the above image). select Noninterlaced. The fifth tab displays estimated download times of the image at various modem speeds and is for your information only. 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. So in the Interlacing section. Non-interlaced images are best for small images because small images load quickly.

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. Here is how you choose the color that you want displayed in the box. These pictures. 9. In this case. 8. more pixels become transparent. click on OK and the Save Copy As dialog window is displayed. Make sure that the radio button beside this option is selected as we want to make this color transparent.INTRODUCTION TO HTML . You should take some time to click on each of the other four tabs to see these other pages. 11. saved them as GIF images. here is how to choose the transparent color. To see your image with the transparent background. | 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.gif) in the main working window. Gilson transparency. Note also that the color red is displayed in the rectangle beside Areas that match this color. If you want to learn more about what is involved in these pages. simply load it into your browser or try it out on a web page. can be a part of a screen or of the entire screen. or part of the contents of an active window. only pixels of very similar colors also become transparent while at higher settings. and placed them where I needed them in the lesson. Click on Save and the image is saved with the transparent color. give the transparent image a new name if you want to preserve the original image. That is. If you want to change the folder. 13. 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. click on the Help button at the bottom of the GIF Optimizer window. you can now browse to the folder where you want to save the new image. 12. In the GIF Optimizer dialog window leave the Tolerance setting at 1. However. Now click somewhere on the color red in the smile.html tutorials in web page design by J. Otherwise you will be replacing the original image with the transparent image. Note also that the color red in the resulting preview window has been replaced with a light colored checker board background. If you save the transparent image in the same folder as the original image and choose a different name for the image. In the File name box. Click the eye-dropper on a color and that color is immediately transferred to the box beside the words Areas that match this color. you will now see two images in the Organizer window -. SCREEN CAPTURES USING PAINT SHOP PRO 120 . When you move the cursor over the original Smiley image (smile. 10. The checker board background will not be displayed in a browser. For this lesson. You will also note that the transparent image now shows a black background.gif image in the main working window. 14. All the other settings can also be left as is. I captured parts of Paint Shop Pro. it turns into an eye-dropper. You can also capture the controls of a program. and you will see the color red immediately displayed in the box beside Areas that match this color. When ready to proceed. The Paint Shop Pro Help window is very good and gives a good understanding of the various options in these tabbed pages. called screen captures. such as a toolbar. you would choose the None option. At lower settings. 15. At the top of the GIF Optimizer dialog window are two large Preview windows. This color will then be the transparent color. This black background indicates the transparent part. You can capture an active window. The checker board indicates the parts of the image that are transparent. you can change this setting to a tolerance factor that indicates how closely colors much match the selected color before they become transparent.the original image and the transparent image.

Thus our Hot key will be F11. here are the steps: 1. you can then make screen captures while working in another program. we need to select the type and method of capture in the Capture Setup dialog box. So before we can use the Screen Capture function. you will see that there are a lot of choices. The choice that is displayed is F10. In the Activate capture using section.lets you capture a feature or group of features. ♦ Area .html tutorials in web page design by J. This will display the Capture Setup dialog window which looks like (this picture was created with a screen capture): 2. ♦ Full screen . Let's choose the F11 option. 4. You now have to indicate which Hot key you want to use. you need to select a method to use to activate a screen capture. Gilson After you select your preferences for screen captures. You can then make a capture immediately or activate it later as needed. ♦ Client area . The choices are: ♦ Right mouse click ♦ Hot key ♦ Delay timer Most people will choose either Right mouse click or Hot key to activate the screen capture. The Area option gives the most flexibility so leave this choice selected. ♦ Window . To setup the screen capture. In the Capture section we select the type of capture. Choose Hot key.lets you capture the entire active window. Choose File -->Import --> Screen Capture --> Setup. ♦ Object .lets you control the size of the capture area. This is what you should now have: SCREEN CAPTURES USING PAINT SHOP PRO 121 .INTRODUCTION TO HTML . If you click into this box.lets you capture the entire screen.lets you capture the workspace of the active window. 3.

Gilson 5. left-click the mouse to end the screen capture. MAKING A SCREEN CAPTURE Here are the steps to create a screen capture: 1. You can also change the image name or use the one assigned by Paint Shop Pro. 7. then you need to right-click instead of pressing the F11 key. Next. Now Open the application program from which you need to capture something .gif).whether you want to capture a full screen or just part of a screen. The mouse pointer turns into a cross-hair. switch back to Paint Shop Pro. That is. open Paint Shop Pro. 6. The name assigned by Paint Shop Pro will appear in the File name box and will have the extension . 5. Note that you can again receive more information on all these options by clicking on the Help button. 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. SCREEN CAPTURES USING PAINT SHOP PRO 122 . 2. To initiate the capture.INTRODUCTION TO HTML . choose File -->Import --> Screen Capture --> Start. When you have finished dragging out the area to be captured. click again with the left mouse button.pspimage indicating that the file type is a Paint Shop Pro image. First. drag out the area you want to capture. Now click once with the left mouse button at the point you want to begin the capture. We will not do a capture at this time. That is. Note: You cannot include the cursor in an Area type capture. and then click on the Help button located beside the Cancel button. If you chose Right mouse click to activate screen capture. In the Options section you can include the cursor in the capture and also include multiple captures. so click on OK. move the cross-hair cursor to create a rectangular outline of the capture area.html tutorials in web page design by J. 6. the screen captured image will be displayed in Paint Shop Pro. you will be immediately switched back to the application program you want to capture from (the one you opened in step 2). Next. 3. To see this Help section. our Hot Key setup. Note that the pixel size of your image increases as you drag out the area. 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. When you do this. This action starts the actual screen capture. 4. just choose File -->Import --> Screen Capture --> Setup to display the Capture Setup dialog window. That is. Press F11. 8. There is also a very good Help section on Screen Captures. As soon as you do this. 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 (*. move the cursor to where you want to create a corner of the screen capture and click with your left mouse button.

If you find a copyright violation.INTRODUCTION TO HTML . It is therefore illegal to copy these lessons into another website. All rights reserved.on. 1997 .html tutorials in web page design by J. Brantford Educational Services.2009 by local and international copyright laws. Gilson | top | | bottom | | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Fifteen | The information contained in these free 21 lessons is Copyright ©.ca SCREEN CAPTURES USING PAINT SHOP PRO 123 . please report it to htmltutorials@bfree.

Just go to your favorite search engine and do a search for sites offering animated gifs. What you really have is a bunch of still pictures moving by quickly and your eyes see it as movement. A program such as GIF Construction Set Professional from Alchemy Mindworks to put all the images into animation (to create the actual animation). You can set the speed of movement of your animated gif image. Paint Shop Pro used to include Animation LESSON FIFTEEN 124 . Gilson LESSON FIFTEEN You may read the following sections in their entirety or use these choices to go directly to a section. and 2. A paint program to make your series of images such as Corel Paint Shop Pro Photo X2 or Adobe Photoshop. Visit these sites to either download some animated gifs (check if you need permission) or to gather ideas on making your own. 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. There are many websites on the WWW where you can find animated gifs. We will make two animated gifs so that you will have a good understanding of the process involved. and special-effect images | INTRODUCING ANIMATION An animated gif is a multiple-image GIF file. the speed at which the image actually moves can vary from browser to browser.html tutorials in web page design by J. banners.INTRODUCTION TO HTML . you need two things: 1. | top | | bottom | GETTING STARTED To make your own animated gif. however. | 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.

now is the time to get them. Animation Shop is no longer part of Paint Shop Pro. squeeze them down to as close to nothing as possible with its Supercompressor. add transparency to existing graphics and a lot more. create eye-catching banners and animated transitions.one after the other in this order: ANIMATION ANIMATIO ANIMATI ANIMAT ANIMA ANIM ANI AN A blank image goes here (no letters) A AN GETTING STARTED 125 . To download. one letter at a time. 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. In these lessons. 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. if you do not have these programs. manage your GIF files. they begin to appear again. 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). Note that this animation begins with the word ANIMATION. until the word ANIMATION is complete again." So. after which a decision to purchase must be made. Here is the way the images appear . 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. It states on the Alchemy Mindworks website that "GIF Construction Set Professional represents the state of the art in GIF animation software. we will simply refer to Corel Paint Shop Pro Photo X2 as Paint Shop Pro.INTRODUCTION TO HTML .html tutorials in web page design by J. and then one letter at a time is removed. Gilson Shop to create animations but as of Paint Shop Pro X (Paint Shop Pro 10). Each change represents a new image. Once all the letters have been removed. we will construct the animation of the word ANIMATION that you see at the beginning of this lesson. Each can be downloaded as a fully functional copy to try out free for 30 days. click on the appropriate link: Paint Shop Pro Photoshop GIF Construction Set | top | | bottom | OUR FIRST ANIMATED GIF For our first example. you will need Corel Paint Shop Pro Photo X2 and GIF Construction Set Professional. In this lesson. It will assemble your original animations effortlessly through its Animation Wizard.

paint. 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. 2. 3. Open Paint Shop Pro. The Materials palette sets the colors and materials for painting. Gilson ANI ANIM ANIMA ANIMAT ANIMATI ANIMATIO (go back to the beginning and repeat . draw. ♦ Choose View --> Palettes --> Organizer to remove the checkmark. The Learning Center should no longer be visible. So you can also use this method to make the Learning Center appear and disappear. We will also close the Organizer window which will even give us more room. the Tool Options palette. in the Standard toolbar is a choice named Palettes. The Tools toolbar is used to crop. In other words. Here is how to bring the Tools toolbar.we are in a "loop") Problem 1: Seems like a lot of images. add text as well as a host of other image editing tasks. choose View --> Toolbars. filling. choose Help --> Learning Center and it will reappear.INTRODUCTION TO HTML . then it needs to be closed. If you want to bring the Learning Center back into view again. This will make the Organizer palette disappear. ♦ Click on the Help menu and then choose Learning Center to deselect it. 4. ♦ Finally. Click on the name Palettes and one of the choices in the drop down menu is Learning Center. etc. There are a number of Toolbar options and those OUR FIRST ANIMATED GIF 126 . When a tool is selected from the Tools toolbar. That is. The Tool Options palette contains these options. This window is located below the main working window. 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.html tutorials in web page design by J. retouching. This will increase the working space. If the Learning Center palette is visible down the left side of the screen. and the Materials palette (called the Color Palette in previous versions of Paint Shop Pro) are in view (displayed in the main program window). drawing. Here are two ways to do this: ♦ Click on the Organizer's Close button which is the small X located on the far left of the Organizer's Title bar. We will now make sure that the Tools toolbar. the Tool Options palette and the Materials palette into view: ♦ Choose View from the Menu bar and then choose Toolbars to view the Toolbars drop down menu. To make it appear again. There are several ways to do this and they are: ♦ 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". choose Help --> Learning Center. just choose this menu item again. ♦ You can also make the Learning Center appear and disappear by choosing View --> Palettes --> Learning Center. there are often options associated with the selection.

The top one is called the Foreground and Stroke Properties box and the one underneath it and a little to the right is called the Background and Fill Properties box. Click on OK. The default position of the Materials palette is at the right side of the main window. 8. This size is bigger than what we need which is okay as we will resize the image later. As it states in the Paint Shop Pro User Guide. ♦ To display the Materials palette. From the Palettes drop down menu. then click on Tools to bring the Tools toolbar into view. choose View --> Palettes. there is the big color panel showing the available colors and is called the Available Colors panel. These boxes are also called the Foreground and Background Material boxes. Note: Computer graphics are of two types: raster and vector. In the Materials palette (see picture below). Beside the Available Colors panel are two rectangular boxes. This box should be white as we chose white for the background color. You are now asked for some information about the new image such as the size of the image you want to create. ♦ To display the Tool Options palette. Now if you again choose View --> Toolbars you will see a checkmark beside the word Tools. Enter 200 for the Width and enter 50 for the Height. in the Materials palette section. Note: At this time every tool in the Tools toolbar is grayed out meaning that they are inactive. 5.INTRODUCTION TO HTML . 6. Just ignore the name for now. raster images (also called bitmap images) are composed of individual elements called pixels. 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. You may have noticed that the Materials Palette actually appeared when you closed the Learning Center. then it means that the Tools toolbar is not currently in view.html tutorials in web page design by J. and Transparent not selected). chose Tool Options if it does not have a checkmark beside it. This will display the New Image dialog window. and then choose New (or simply click on the New button in the Standard toolbar). 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). the following diagram is given with the Rainbow tab in view: OUR FIRST ANIMATED GIF 127 . These numbers represent the width and height in pixels so make sure that the dimensions are in Pixels. Thus the upper box affects the image's foreground and the lower box affects the image's background. 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. Examples of geometric characteristics are lines and curves and their locations to define objects. In the Help menu. Gilson that are currently chosen are highlighted with a checkmark beside them. If this is the case. We will now create our first image. In the Image Characteristics section. Thus an object in a raster image is defined by its pixels and to edit the object you edit the pixels. chose Materials if it does not have a checkmark beside it. The default position of the Tool Options palette is underneath the Standard toolbar. ensure that the Color (meaning background color) is White. Now if you rest your mouse cursor over the Foreground and Stroke Properties box. Vector images use geometric characteristics to define its objects. 9. Color depth RGB at 8 bits/channel. 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. If there is no checkmark beside the word Tools. In other words you can't use any of them. The Tools toolbar is usually placed vertically on the left side of the Paint Shop Pro main program window. From the Palettes drop down menu. Everything else can be left as is (Raster Background selected. Choose File from the menu bar. This is because we do not have anything such as an image or object to work on yet. The resolution can be left at 200 pixels per inch. 7. again choose View --> Palettes.

Under the Foreground Material box. etc. This will display the Material color palette.html tutorials in web page design by J. In the Tools toolbar. size. OUR FIRST ANIMATED GIF 128 . Note that the Tool Options palette now displays the options for the Text tool. Now click on the Background Material box. choose the color red. If you rest the mouse pointer on any of these three buttons you will get their names. click on the Text tool (the one with the letter A on it).INTRODUCTION TO HTML . a gradient color or a pattern color. 11. Red is the little box displaying R:255 G:0 B:0 when the cursor moves over the box. That is. The middle button is called the Texture button and it is used to turn the current texture on or off. Click on OK and this is what you should have so far: 12. 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). 10. The first one is called Color and it is used to create a solid color. You can see these options by clicking on the button. the Hexadecimal code for the color red (#ff0000) appears in the HTML box. When you choose red. Transparent means that there is to be no style or texture. Gilson Below each of the Foreground and Background boxes are three small buttons called Style buttons. we need to set up the text font. We will now set these options. we do not want any foreground style or texture. 13. click on the third button as we want the foreground material to be transparent. The third button is called the Transparency button and it specifies whether the foreground or background is to be transparent. Thus the Foreground Material box has three style buttons and the Background Material box has three style buttons. In the cluster of little boxes.

That is. that is where the lower left corner of the first letter will appear. 0. You are now ready to enter the text. When you click into the box. choose Edit --> Paste As New Image. ♦ For the Font Size. Here is what you should have: 14. choose 12. You might think that where you click in the box is where the center of the text will be placed. but it is not necessary to do this for our purposes.. 3. wherever you click. type the word ANIMATION. OUR FIRST ANIMATED GIF 129 . We will now save this new smaller image. The word ANIMATION should now be in the new image (or at least part of it should be visible).. In this version it seems that a font size of 12 gives about the same size lettering. I find that the size of the font varies with the version of Paint Shop Pro. If you find that size 12 is too small. click somewhere on the left side where you would like the first letter A of ANIMATION to appear. This will display the Save As dialog window. This will ensure that the image is saved as animat1. ♦ Click on the Save button to save the image named animat1. For example. Note that the new image (named Image2) is now reduced to the size of the text with a light colored checker board background.html tutorials in web page design by J. just increase the size to something more suitable. Gilson ♦ Click on the down arrow in the Font box and choose Century Gothic. 2. Where you click is where the lower left corner of the first letter of the text will be placed. ♦ Now click on the Options button. then Save As. 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. This will allow us to cut out one letter at a time from the word ANIMATION. As you will see. ♦ Click on the down arrow in the Create as box and choose Floating. ♦ Make sure that you have Left for the alignment.gif. The checker board background will not be displayed in a browser. To do this. In the new image box. Click on the Edit menu and choose Copy.gif). The checker board indicates the parts of the image that are transparent. the Text Entry dialog window opens up. ♦ Click on OK. The word appears with dashed letters and with the dashes moving. Nothing appears to have changed. Make sure that the radio button beside Version 89a is selected and also make sure that the radio button beside Noninterlaced is selected. Also make sure that Remember text is selected (there should be a checkmark in the check box). Now: ♦ Choose the folder you want to save these images in. Not so.our first image in the animation).gif. We will now make our image smaller so that the word ANIMATION takes up the entire image with no empty space around it.INTRODUCTION TO HTML . You can move (drag) the image into a better position if you wish.0 for the Stoke Width and Smooth for the Anti-alias.. Now click on Apply. Now choose Paste As New Image from the Edit menu. in version 9. In the Enter text here box. ♦ Then click into the Save as type box and choose GIF Graphics Interchange Format (*. 1. I used a font size of 22 for Century Gothic. ♦ Also type in the name animat1 (short for animation 1 . Choose File.

Let's now create the second image which is the word ANIMATION with the last letter "N" removed (ANIMATIO). 1.INTRODUCTION TO HTML . Click on Yes and the image is saved. Choose Edit. The letter N should now be gone. Cut this last letter so that you have no letters left. Since we are making a little "movie". For the third image. This will change the Tool Options .gif. We want just the Selection option. You now have all the images saved and are finished with Paint Shop Pro. Freehand Selection and Magic Wand.gif. It will be easier to delete individual letters if you first make the area around the image a little bigger. 5. Now in the Tools toolbar click on the Selection tool. The little down arrow in the Selection tool means that the Selection tool has other options.gif. 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. OUR FIRST ANIMATED GIF 130 .animat1. we will use it as the template to create the rest of the images. you are now told this fact plus a statement about layering and asked if you want to continue. In the Tool Options .Selection palette. 2.gif and animat2. you will see that they are Selection.gif. make sure that the Selection type reads Rectangle since we are going to draw rectangles around the individual letters in the word ANIMATION. and save this blank image as animat10. save this new image without the letter N (ANIMATIO) giving it the name animat2.Text palette into the Tool Options . That is. We now have two images .Selection palette. 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. Now carefully drag a box (a rectangle) around the last letter N so that the letter N is completely inside the box. we will be doing our selecting with rectangles. 3. then Cut. 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.html tutorials in web page design by J. If you continue this process. Our first of 10 images has now been saved. 7. cut the next letter (O) and save the resulting image (ANIMATI) as animat3. the last letter left over (A) will be saved as animat9. Gilson ♦ Since gif images have a maximum of 256 colors. We are just increasing the space around the outside of the image. . If you click on the down arrow.gif. image by image. 4. This is the one with the dashed rectangle on it. Using the same procedure as above for saving animat1. A rotating dashed rectangle should now be around the letter N. 6.gif.

but with all the other animated gifs. If this box is not checked. then the animation will loop indefinitely. If you would like to use the Animation Wizard and let GIF Construction Set do it for you. Dithering is the complex pattern of alternating dots that can be used to simulate the original colors. This choice will give you more control over the use of colors in your animation but it can lead to display problems if the CREATING THE ANIMATION USING GIF CONSTRUCTION SET 131 . we need to assemble them into one animated GIF file using Gif Construction Set. It will then remap all the colors in your images to this palette. Another way to activate the Animation Wizard is to simply click on the magic wand button.INTRODUCTION TO HTML . 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. • Transitions to create animated transitions between still images in an animation. Since we want our animation to loop over and over. Now that you have the various individual images created for the word ANIMATION. Next is the Delay. Gilson CREATING THE ANIMATION USING GIF CONSTRUCTION SET In this section we will create the animation using GIF Construction Set. If the checkbox for Loop is checked. • 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. 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). At the top is a tool bar and the first item in the tool bar is Loop. 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. make sure that the check box beside Loop is selected (there must be a checkmark in the box). This item will set the delay per image for your final animation. There are a number of choices and they are: ♦ Matched to superpalette. This option usually gives you the best results. To do this we first need to load all the images into GIF Construction Set. ♦ Dither to superpalette. You can change this setting later after the animation has been created. You can experiment with other numbers later. • An incredible Banner maker that includes a variety of special effects to create sophisticated banners. It will then dither all the colors in your source images to this palette. then the animation will loop only once. These delays are divided into hundredths of a second (1/100ths of a second). 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. 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. the quicker the animation will load and display in a browser). 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. This choice will have GIF Construction Set create the animation using the color palette from the first image only in your animation. This choice should already be selected and is the choice we want. Dithering is often able to create very effective simulations of the true colors in an image. here are the steps: 1. The one you see on this web page was set to 10. ♦ Matched to first palette. 3. it could be running a little slower.html tutorials in web page design by J. Click on File and then choose Animation Wizard. 4. 10 is what we want so ensure that Delay is set to 10. You now need to make a few decisions on how you want your animation to work. Next you are asked how you want to handle the color palette for your GIF file. . GIF Construction Set represents state of the art GIF animation software. • A LED sign maker which can be either still or animated. 2.

click on it to deselect it. In the left frame.gif to animat2. leave the Matched to superpalette selected. we have the following: 1 2 3 4 5 animat1. you can click on the image in the right frame and then click the Remove button. animat8.gif animat4. beginning with animat9 down to animat2. We have now transferred all the files needed for the animation and in the order they are to appear. Continue this process until you have added animat2. The images we select will be placed in the right frame. The rest of the tool bar contains buttons used in constructing the animation. It is generally the best choice for GIF images. Note that they are also numbered from 1 to 18 indicating that we have 18 images in the animation.gif animat3.html tutorials in web page design by J. ♦ Fixed photorealistic. Below the tool bar are three panels or frames. ♦ Now click on the Add button and animat1. For our example. ♦ This time click on animat10 and transfer it to the right frame. we will select the images that make up the animation. ♦ Click on animat1. 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 same as Photorealistic except that the images are remapped rather than dithered.gif animat2. To do this. Gilson colors in the first image are quite different from the colors in the rest of the images.INTRODUCTION TO HTML . animat7. ♦ Sixteen colors is similar to the Drawn option except that it only uses a palette with the 16 basic Windows colors. Remapping is suitable for line art but not for a photorealistic image. We must load the GIF files in the order they are to appear in the animation. ♦ Fixed drawn. Because the order is important. animat5. Do not click on animat10 because it will be inserted alpha numerically after animat1 which we do not want.gif appears in the right panel along with its location. That is. So click on animat9 and then click on the Add button. 6. All the GIF files located in the chosen folder are now displayed in the middle frame. Now click on the Add button and the files are transferred to the right frame.otherwise they will be placed in alphanumeric order. animat6. This is the best option if you are building an animation with JPEG images where you have a wide range of colors. ♦ Since our animation prints the word ANIMATION backwards and then frontwards. and animat9. This choice is then suitable for simple animations with a small color range. ♦ Note that all the images and their corresponding names have been placed in the right frame in the order from animat1.gif ANIMATION ANIMATIO ANIMATI ANIMAT ANIMA 132 CREATING THE ANIMATION USING GIF CONSTRUCTION SET . we now have to reverse the above procedure.gif and then from animat9.gif animat5.gif in the middle frame as this is the first in our series of images to be loaded.gif is still selected. If animat1. This is what our choices look like: 5. Then click on animat8 and then on Add. browse to the folder where all the GIF files are saved. This will place animat10 right after animat9. then animat3.gif to animat10. click on the name animat2. If you accidentally transfer the wrong image. Note that both the images and their corresponding file names are displayed. Now hold down the Ctrl key and while holding it down.gif. we must add these filenames one at a time . In this frame. animat4. ♦ Now back to the middle frame.

To do this: 1. click on the X to close the View window. simply click on the Build button. Now again choose Edit --> Insert block --> Image. Each GIF file consists of a series of blocks that we can edit. This will display the Open dialog window. 5. 2. all the images appear in the GIF Construction Set window. choose Insert block and then choose Image (Edit --> Insert block --> Image) since we are inserting an image. You can ignore this for now. You can also load the animated gif into your browser to see the animation in your browser. 8.gif ANIMATI 18 animat2.html tutorials in web page design by J. 7.gif AN 9 animat9.INTRODUCTION TO HTML . If you are using the evaluation (unregistered) copy. You may be told that the image you imported does not match the global palette for this file.gif ANIMATIO 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. Gilson 6 animat6.gif ANIM 15 animat5. the Wizard terminates and we are back in the GIF Construction Set window.gif A 10 animat10. CREATING THE ANIMATION USING GIF CONSTRUCTION SET 133 . Now add the rest of the images.gif AN 13 animat7. We now have the images from animat1 to animat10. 4. To view your animation. Choose Remap this image to the global palette and click on OK. Hold down the Ctrl key and click on animat1. This time click on animat10 and click on Open. In a few moments. We will study the Header later.gif A 12 animat8. 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. Click on File and then choose New. 9. You can also load your images into GIF Construction Set without the wizard. you will be told this fact along with some facts and options on how to register. MANAGING AND EDITING OUR ANIMATION Whether you used the wizard or not to load the images. A window opens up with the word HEADER in it. 3. choose Move. 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. animat2 up to and including animat9.gif ANI 14 animat6.gif ANIMAT 17 animat3. It is now time to create the animation. 6. . When the building is completed. You are now in the GIF Construction Set window. We will do this now. beginning with animat9 down to animat2. This building may take a few moments. one at a time. You can now save the animation by choosing Save As from the File menu.gif ANIM 7 animat7.gif ANIMA 16 animat4.gif 11 animat9. Click on Open. we will now learn to manage and edit our animation. We will therefore take a moment to understand these blocks. GIF Construction Set manages animation through blocks. Now from the Edit menu. click on the binoculars button (the View animation button). We will study the various parts of this window later. You can now save what we have done so far.gif ANI 8 animat8. When finished viewing. To do this.

click on the very last Image Block in the list (representing animat2). Click on the Eyedropper and your image will appear. you will see it. choose Manage. Double click on an image and its block will be displayed. Note that when GIF Construction Set loads your images. So if you like this program and plan to use it personally or professionally. Here is how to do it: ♦ Click on the checkbox beside Transparent Colour to place an X in the box. The one you see in this browser was set to 10 but with all the other animated gifs. you can choose the color you want transparent with the Eyedropper tool. • Image Block: Each image has its own Image Block. You can edit the Comment Block by double clicking on the block. Any change that we now make will be applied to all the images in the GIF file. Your width and height may be different to mine.html tutorials in web page design by J. Choose the color white which is the number 215 (or Hex #FFFFFF). A GIF file only has one Header Block and it is always the first block in the file. Only the Header Block is not highlighted. This will display the Block Management dialog window. Click on OK and the number of the color appears in the box. ♦ Click in the box beside the Eyedropper tool and a color palette window opens up. If you want a transparent background. it will not load any transparency information. The Header also indicates that the animated image will be saved as a GIF image in 89a format. Double click on any image to display the Image Block which contains the Control Block. Gilson • Header Block: Note that the first line in the GIF Construction window is the Header Block. CREATING THE ANIMATION USING GIF CONSTRUCTION SET 134 . be sure to register your copy. 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). ♦ If you do not know the exact color. This comment block will not appear once you register the program. First highlight all the images by clicking on the first Image Block (representing animat1) and then while holding down the Shift key. it could be running a little slower. The image disappears and the number of the color you have chosen appears in the box. 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. • 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. how long the image should be displayed before the next image replaces it. • 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. From the Block menu. you should set it at this time. This will display the Edit Control dialog window. 5. The Control Block contains information such as what color is to be transparent. You can experiment with other numbers later. 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. • Control Block: With each image is a Control Block that tells the browser how to display the image. Note: You will not be able to eliminate the Unregistered Shareware comment. Set the delay to 10 meaning each image appears for 10 one hundredths of a second. These comments do not appear in the animation but will appear when the animation is viewed in GIF Construction Set.INTRODUCTION TO HTML . 2. Double clicking on the Header line will reveal all this information. 3. You can set any color to be transparent. All the Image Blocks should now be highlighted. Click somewhere in the area of the color you wish to make transparent. Let's set the white background as the transparent color. 4. Make sure that the radio button beside Set controls for the selected blocks is selected and click on Apply. 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. 1. You can delete the Comment Block but it will be replaced when you save the file. Now that all the images have been loaded we will do some editing of the image blocks. etc.

you can change the time delay for this image to another delay time. 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. If you wish to experiment. We are not going to change anything here so click on Cancel. click on Save. If you would rather see a white background in the GIF Construction Set window. choose an Image Block and then double click on it. Note that the background color is set to Black (which is the number 0). ♦ Click on OK and you will be back to the Block Management dialog window. You can now save the animated gif by clicking on File and then Save As. 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. Now click in the checkbox beside the word Loop to make sure that it is selected. Leave the Iterations count at 0. Click on OK to return to the GIF Construction Set window. 6. Each image in the image file now appears on a black background. A count of zero means that the animation will loop indefinitely. We now need to insert a loop. You can also edit an individual Image Block.INTRODUCTION TO HTML . This is the black background you see with each image in the GIF Construction Set window. . 7. This will display the Edit Header dialog window. To do this.html tutorials in web page design by J. Note that the Control panel on the right side is similar to the one we used for all the images. 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. Double click on the Header Block. The type of files should say GIF files. . Gilson ♦ For the Remove By. You can now view the complete animation by clicking on the View animation button. When ready. choose Background so that our animated gif will have a transparent background. Problem 3: We used the following sequence for our animation: ANIMATION ANIMATIO ANIMATI ANIMAT ANIMA ANIM . That is all we need to change so click on OK. This black background indicates the transparent part of the GIF file. Choose the folder you want to save the animated GIF file in and type in a suitable name for your GIF file. 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. Now click on the radio button beside Enable controls for the selected blocks and then click on Apply. instead of using the sequence beginning with the letter "A" as in: A AN ANI CREATING THE ANIMATION USING GIF CONSTRUCTION SET 135 . then click on the button and choose the color white (number 215). This will display the Edit Image dialog box.

The Mode can remain at Replace. and the Materials palette are in view. Gilson ANIM ANIMA ANIMAT .Selection Palette. 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. Choose an image width of 50 pixels and a height of 50 pixels (bigger than required). To do this. 3. In the Tools toolbar. 5. 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. and choose View --> Palettes --> Materials for the Materials palette. more pixels are filled. At lower settings. only pixels of very similar colors are filled while at higher settings. Nothing appears to have changed. 9.html tutorials in web page design by J. 2. The range is 0 to 200. 10. 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). It will appear as a rotating dashed circle. 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. in the Tools toolbar to select it. The new image has now been reduced to the size of the circle with a checker board background. choose View --> Palettes --> Tool Options for the Tool Options palette. 7. Also make sure that the Background color is set to White and that the dimension units are in pixels. make sure that the Tools toolbar.Selection Palette has now been replaced with the Tool Options . Click in the Selection type box and select Circle. click on the Selection tool (the rectangle) and the Tool Options palette changes to the Tool Options . Make sure that the Match mode box reads RGB Value and the Blend mode box reads Normal. Open Paint Shop Pro. 8. choose View --> Toolbars --> Tools if you need to place the Tools toolbar into view. We will now copy this image and paste it as a completed image. . If not already in view. . Now choose Paste As New Image.INTRODUCTION TO HTML . The Tool Options . Click on OK. Keeping the Opacity at 100 ensures that all pixels that are not transparent will be filled. You can now delete the first image we created (Image1*) by clicking in the Close box (the one with the X in it). So choose Copy from the Edit menu. The RGB Value will ensure that only the circle gets colored and not the area of the image outside the circle. . the Tool Options palette. Tolerance is how closely the selected pixels must match the initial pixel we click. Now click on the Flood Fill tool. Choose File and then New to display the New Image dialog window (or click on the New image button in the standard toolbar). The Tolerance can remain at 20 and the Opacity at 100 (percent). We will create the ball in Paint Shop Pro and then paint it in different colors with each color making up one image. 4. CREATING THE ANIMATION USING GIF CONSTRUCTION SET 136 . 1.Flood Fill Palette. It may not look like a circle but that is because of the checker board background. the Feather can remain at 0 and the Anti-alias box should be selected (there should be a checkmark in the checkbox). 6.

| top | | bottom | HOW THE PJCVS MATH ANIMATED GIF WAS CREATED Now that you know the procedures involved. 3. Note that when the cursor moves over the circle. Now save the yellow ball in the same way you saved the red ball but using a name such as ball2. 5. 2. 12. HOW THE PJCVS MATH ANIMATED GIF WAS CREATED 137 . We will now create the remaining balls. The Foreground color box is now yellow. the cursor changes to the Flood Fill cursor. each time choosing a different color and naming the images ball3. Here are the steps: 1. ♦ Also type a name for the ball such as ball1 for ball #1. ♦ Click on OK. This image was then copied and pasted into Paint Shop Pro. We have now completed our first ball in the animation and it looks like: 13.gif. Make sure that the radio button beside Version 89a is selected and also make sure that the radio button beside Noninterlaced is selected. For the PJCVS MATH animated gif. 15. Repeat steps 1. you are now told this fact and asked if you want to continue.html tutorials in web page design by J. and the circle (the ball) should now be colored red. choose Edit --> Copy and then choose Edit --> Paste As New Image. Now: ♦ Choose the folder that you want to save these images in. 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.gif). 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.gif.gif or bullets. Click on the Save button to save the image named ball1. This will display the Material Properties dialog window.gif. use your imagination to create some great looking animated gifs. In the Materials Palette. 2. Gilson 11.gif. use GIF Construction Set to turn these images into animation using the same procedures as with our first animation. 3. ball5. giving each one its own color. ♦ Click into the Save as type box and choose GIF Graphics Interchange Format (*. Again in the Materials palette. ♦ Now click on the Options button.gif. 14. the part was done in a publishing program using an option that gave this design. Now choose another color such as Yellow and click on OK. etc. Since gif images have a maximum of 256 colors. save the animated gif using a suitable name such as balls.INTRODUCTION TO HTML . The Flood Fill tool should still be selected. click on the Foreground color box. and 4 as many times as you like. Now save this ball by choosing Save As from the File menu. With the ball image still selected.gif. Choose the color red and click on OK. When finished. Click on Yes and the image is saved. This will ensure that the image is saved as ball1.gif. 6. This will display the Save As dialog window. You now have two red balls. 4. When finished. Now click with your left mouse button in the circle. click on the Foreground and Stroke Properties box. ball4.

INTRODUCTION TO HTML . BANNERS. Here is one I created for a client. adjust the playback speed and change the sign dimensions. For the Font. Have fun and experiment. Position the pi in the new image and you have the identical pi I used. open GIF Construction Set. It is nothing more than the lower case letter p for the Font named Symbol. Move the cursor to the new image. you don't need a manual (and one does not come with the program). Note: GIF Construction Set's Help support is excellent. click once and the Text Entry window opens up. The reverse of an image was created using the Mirror option found in the Image menu. choose Edit --> Signs --> LED Signs. I used the rectangular selection tool a lot to cut the pi from the image. you can see each individual image that made up this animation.html tutorials in web page design by J. resizing the width of pi (Resize is located in the Image menu). Choose a size of around 75 pixels by 75 pixels if you want to duplicate what I have. To create a LED sign. it reverses itself. The LED Sign dialog window opens up giving you a number of options. All you need to know is right there in the Help section. try creating a nice banner or header for a web page that is not animated. AND SPECIAL-EFFECT IMAGES (TRANSITIONS) USING GIF CONS 138 . With GIF Construction Set. If you save the Math Department's animated gif on your hard drive. Note that as the pi spins around. and then pasting the pi back into the PJCVS image. choose Symbol and for the Font Size. Type the lowercase letter p which will produce the pi symbol I used (the uppercase letter P will give a slightly different shaped pi). and then click on the Text tool. CREATING BANNERS Try making an animated banner such as: Or. AND SPECIAL-EFFECT IMAGES (TRANSITIONS) USING GIF CONSTRUCTION SET CREATING LED SIGNS This LED sign was created simply and easily using GIF Construction Set. Click on OK. to get the Pi symbol in Paint Shop Pro. New). BANNERS. | top | | bottom | CREATING LED SIGNS. Make sure the foreground color is blue or any suitable color. was created in Paint Shop Pro (which can also be created in any Paint or Desktop program). You can set the color. create a new image (choose File. and then load it into GIF Construction Set. choose 36. . CREATING LED SIGNS. 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. Gilson The Pi symbol. Mirror would give me the reverse pi. For example. Once I resized the pi.

This will display the Open dialog window for you to select your images. To do this click on the Add button. Tile: This transition will make your images appear in small squares. 5. Now have fun and experiment with the different special effects. This will display the Banner dialog window giving you a number of options and text effects.INTRODUCTION TO HTML . You now select the images. There is also a very good transitions Help page that includes a description of all the various transitions. The Banner option. You can test the various transitions in your animation with the Test button. Gilson These banners were simply created using GIF Construction Set. You now need to load your images into the Transitions window. The Transitions function in GIF Construction Set will create animated transitions between your images. There are only 9 letters in the word ANIMATION but there are 10 distinct images. in random order. GIF Construction Set will then create the animation and return to the GIF Construction Set window. one from each direction. Thus to create a banner. is located in the Edit menu. You can then save the animated GIF file. ANSWERS 139 . Here are four of these special effects: 1. 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). 4. Just click on the Help button located below the Cancel button 4. 3. 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. 3. the tenth one being the blank or empty image. click on OK. Select Edit and then Transition. This will display the Transition dialog window. open GIF Construction Set. There are four wipe options. 2. You can choose either horizontal and vertical rasters. Here are the steps to create a transition: 1. | top | | bottom | ANSWERS 1. Click on Open. like the LED option.html tutorials in web page design by J. When you are finished testing and have chosen a transition. Dissolve: The images will fade in the transition from one image to the next. The images are now loaded and displayed in the Transitions window. Raster: The images will transition from one image to the next as a sequence of bars. There are about two dozen special effects to choose from in GIF Construction Set. You can do this one image at a time or hold down the Ctrl key to select multiple images. 2. 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. Wipe: Your images will transition from one image to the next by wiping. choose Edit and then Banner. Banners are GIF files which contain text.

This then is another reason for a good first image in a GIF file. that they at least display the complete image . | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Sixteen | The information contained in these free 21 lessons is Copyright ©. please report it to htmltutorials@bfree.INTRODUCTION TO HTML . If you find a copyright violation. the complete word. 1997 .html tutorials in web page design by J. This is for those browsers that do not support animation. 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. it will print the first image that the browser displays in the animation. including the blank image.2009 by local and international copyright laws. It is therefore illegal to copy these lessons into another website. Another reason for the given order is that when a web page containing an animated GIF is sent to the printer. The complete word ANIMATION should appear first. before the whole process repeats itself. 18 images. All rights reserved. are displayed before looping takes place. it is important then.ca ANSWERS 140 . In these browsers.on. only the first image in the animation will be displayed. Because these browsers can't show animation. Gilson 2. Brantford Educational Services. Since a printer cannot print out all the individual images that make up the GIF file.in our case. often only the first image in the file gets printed. that is.

Here are the main reasons: 1. The mailto: only works in Netscape and Firefox browsers. 3. Internet Explorer does not recognize forms with the mailto: command in the same way that Firefox and Netscape do. however. 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. and using my name and address. The HTML coding for forms.as if "mailto:" was a regular HREF attribute. "Free forms and guestbooks". There is no confirmation to the visitor of the form contents being sent. using the mailto: command gives very inconsistent results among browsers. the first part of the data will look like: LESSON SIXTEEN .html tutorials in web page design by J. You cannot send the contents of a form directly to your email address. 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. | Introducing forms | | CGI .and that is what this lesson is all about. However. With the mailto: command. One way to have the information from a form sent to you is through the mailto: command. when a visitor clicks on the "send button".Common Gateway Interface | | Creating a form | | The FORM tag | | Using a CGI script instead of the mailto: command | | Text boxes | | Pop-up menu boxes | | Radio buttons | | Check boxes | | Text area boxes | | Submit and reset buttons. 2.all run together. All this is done almost instantly. An example using this method is given later in the "Creating a form" section. When Explorer encounters the "mailto:" command. Obtaining a free form or a free guestbook is discussed later in this lesson in the section titled. closing a form page | | Using an image to submit form data | | Password boxes | | Hidden text | | URL encoding | | Free forms and guestbooks | | Please sign my Guestbook | INTRODUCING FORMS One of the most powerful parts of a web page is the form.INTRODUCTION TO HTML .FORMS You may read the following sections in their entirety or use these choices to go directly to a section. it will simply open up the e-mail box waiting for the visitor to send an e-mail to you . 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 . It simply does not work well. Therefore using the mailto: is not recommended for having the contents sent to you. This information is designed to help you understand just how forms and CGI scripts work. Some of the information in the first two sections in this lesson may be a little confusing. Using the form given below in the "Creating a form" section. So you don't need to worry about understanding everything in the first two sections in this lesson. The text arrives in your e-mail as one long line . will work in all browsers.FORMS 141 . 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. That is. 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. the information that a visitor fills in is sent to your e-mail address when the "submit" button is clicked. Gilson LESSON SIXTEEN .

| top | | bottom | INTRODUCING FORMS 142 . you can download or copy a JavaScript from someone else. You can write the CGI script yourself.INTRODUCTION TO HTML . To get around these problems associated with the mailto: command.especially if you have a lot of information to sort through. A CGI script together with the form allows you to collect information from the visitor.ca&visitor_website=http%3A%2F%2Fwww.. the CGI script can also have another page pop up thanking the visitor for filling out the form. this form output is hard to read . analyze and parse the information into a readable form. 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. When the visitor submits the form data. have someone write it for you. a CGI script can manipulate or process the information from a visitor into a more readable and useful form. 4.on. This is done at the server level and a response is returned to your browser or to your e-mail address. In other words. An attached file has to be opened in a text editor such as Notepad. you attach the visitor's form information to a CGI script which is the topic of the next section.on.. Perl or JavaScript. or you can download a suitable script from the internet. I will be discussing this strange looking output in more detail in the section entitled "URL encoding". Gilson 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. If all you want is a guestbook or an order form. You have to be careful with this one because it can take up a lot of server space after a while. and then have the readable contents sent to you. 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. It divides this long stream of hard to read data into something you can more easily read and use. The form information arrives in your email client in an attached file.. adapt it to your needs and incorporate it into your web page. This allows everyone to read what others write. Everything you need to know comes with the package. CGI scripts are often written in a programming language such as C. A CGI script is a computer program that interprets the data sent to it by the visitor. All the required information and coding comes with the guestbook or form so you don't have to worry about CGI scripts.html tutorials in web page design by J. WordPerfect or Microsoft Word.COMMON GATEWAY INTERFACE CGI stands for Common Gateway Interface.bfree. | top | | bottom | CGI . For most people. You can also have the CGI script post what visitors write to another page.ca%2FHTML and so on . there are plenty of places on the net to get a free one (discussed later in the section "Free forms and guestbooks").

the actual form elements where the visitor enters the information 3. If you haven't already signed my real guestbook. Below this form is the complete HTML coding along with explanations. address. Every form has three parts: 1. 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). 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. you can do so by choosing "Please sign my Guestbook" from the menu at the top of this lesson. plus other information. Let's begin by setting up a simple Guestbook that asks for a name. 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!! CREATING A FORM 143 . the FORM tag 2. Gilson CREATING A FORM While you may need to find an internet company offering free forms and guestbooks to interpret the data. 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.INTRODUCTION TO HTML . Here is the form we will set up.html tutorials in web page design by J. e-mail address. the SUBMIT tag which creates the button that sends all the collected information to the server (usually to be interpreted by a CGI script). Name: Address: City: State/Province: Country: Zip/Postal Code: E-mail address: If you have a website. writing the HTML code to make the forms is easy. The form and information presented here can apply to any type of form you may require on your web page.

INTRODUCTION TO HTML . 5. Gilson Thanks for visiting! The above form uses the five most often used basic areas of form styles. Once you have typed it in. I used several text boxes such as for the visitor's name. Please SWITCH to NOTEPAD. POP-UP BOXES which are menu choices. And you can learn a lot by experimenting! Don't forget to include the usual HEAD. CHECK BOXES which I used to determine the visitor's interests. TEXT BOXES for entering one line of basic text. let me know and I will pay you a visit!</STRONG><BR> website address: <INPUT TYPE="text" NAME="visitor_website" SIZE="45"> Thanks for visiting! 144 . You can leave out the IMG tag if you don't want to save the guestbook picture in your working directory. 2. 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. 3. These five areas are: 1.on. Below this paragraph is the complete HTML document that creates the above form and then we will discuss the various parts.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. 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!". I used the pop-up box to determine the visitor's country.</STRONG> <P><FORM METHOD="POST" ACTION="mailto:jbes@bfree. you can then SWITCH back to your browser. 4. Now here is the HTML document. address and city. load the HTML file and begin testing and experimenting. You will also need this form typed in to answer some questions.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. RADIO BUTTONS which I used to rate my website and also to determine if the visitor is male or female.html tutorials in web page design by J. <IMG SRC="signbook. TITLE and BODY tags. TEXT AREA BOXES for the visitor to type a multi-line message.

However. Gilson <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. you then have to tell the browser that you are starting a form and what you want done with the form.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. Images are completely dealt with in Lessons 7 and 8. 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.html tutorials in web page design by J. Here are these lines again: <IMG SRC="signbook. This command is: <FORM METHOD="POST" ACTION="mailto:jbes@bfree. Once you get past the opening statements.on.ca"> THE FORM TAG 145 . I did make the guestbook title (My GuestBook) into an image so I could use a special font.INTRODUCTION TO HTML .</STRONG> I did not include a guestbook picture in my actual guestbook.

the ACTION attribute must then specify the URL of the CGI script which processes the form and sends the processed information back to you. when using a CGI script to interpret the data. So only visitors that use those browsers will be able to submit form data to you.wherever that CGI script is located. you will only get an error message stating that the address does not exist . you will be given the FORM tag from the company to insert into your coding. If you are going to try the mailto: command anyway. the ACTION attribute is sending the visitor information to a CGI script (which I called "process_form") .domain_name. If a browser does accept the mailto: e-mail address.html tutorials in web page design by J. Thus you get all your form input encoded which as you read earlier makes the data difficult to read. Gilson This command line does three things: 1. | top | | bottom | USING A CGI SCRIPT INSTEAD OF THE MAILTO: COMMAND If a CGI script is used to interpret the form data. METHOD is a form attribute and POST is called the "value" of the attribute METHOD. It will contain the necessary METHOD and ACTION attributes to have the form contents sent to their CGI script for decoding. It tells the browser to post all the data from the visitor to my e-mail address (not my real e-mail address). it will still not decode the form input before mailing it to you. there are two basic problems associated with using an e-mail address with the ACTION attribute: 1. 2. the attribute ACTION contains the name of the CGI script to process the form (process_form) as well as the location of the script USING A CGI SCRIPT INSTEAD OF THE MAILTO: COMMAND 146 . but will be an address such as: http://www.com/cgi-bin/your_directory/process_form"> In this case. Everything contained between these opening and closing tags is part of the form. 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. That is. 3. Giving the e-mail address will only work in Firefox and Netscape style browsers. the action will not be an e-mail address as given in the previous section. 2. If you use the given e-mail address in the mailto: command. That is.domain_name. It tells the browser that the METHOD of dealing with the form data is to POST it. Few browsers support the "mailto:" action at this time. the FORM tag will look something like: <FORM METHOD="POST" ACTION="http://www. If you are planning to obtain a free form or guestbook. FORM is a container element in that it has an opening tag (<FORM> ) and a closing tag (</FORM> ). You can therefore experiment with the form all you like.so you need not worry about sending me any of your test data. As stated above.INTRODUCTION TO HTML .com/cgi-bin/your_directory/process_form In other words. It tells the browser that a form is starting now. be sure to replace my e-mail address with yours so you can fill out the form and send the data to yourself. This is ACTION part.

. The first step in your CGI script.html tutorials in web page design by J.com/cgi-bin/your_directory/process_form?visitor_name=John+Gilson& visitor_address=6+Pioneer+Place and so on. on the other hand. The drawback to the GET value is that there may be limits on the data that can be stored in the variable. 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. on. you might lose some of that data if you use the value GET. That is. 2. then. So if you could expect to receive lots of data (especially if you have a large comment field). GET is the default value if you don't use the METHOD attribute (the only required attribute for the FORM tag is ACTION). Thus the ACTION attribute contains the complete URL of the CGI script.bfree..INTRODUCTION TO HTML . sends the data separately through a direct link to the server.ca&visitor_website=http%3A%2F%2Fwww. the METHOD of dealing with the form data is to POST it.com/cgi-bin/your_directory). 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. POST. In our form. A form may contain markup tags to mark up your text. you will be given the coding to use so you don't have to worry whether to use POST or GET.. In other words. there are two values for the METHOD attribute. If your form is in a frame. you cannot have a form inside a form. When the server executes your CGI script to process the form. That is. there are actually two METHODS that can be used. 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.ca%2FHTML and so on .domain_name. the data from the form is packaged and appended to the end of the URL specified in the ACTION attribute. When you get a form or guestbook off the net. Well. USING A CGI SCRIPT INSTEAD OF THE MAILTO: COMMAND 147 . all the encoded data is assigned to the query-string variable. It may therefore be safer to use POST rather than GET for the METHOD attribute. 3. Thus with the GET method. its sets this variable called "query-string" to everything after the question mark in the URL.on. as in TARGET="_top" to load the result into the full body of the current window.. One is POST as shown and the other is GET. In either case. Here are some final points for this section: 1. A form cannot be nested. For this reason. you can have as much data as you want. Let's now look at each of the five form areas given in the above form. it is sent as a separate stream and is not assigned to a variable. you may want to include the attribute TARGET as part of any URL. Now when using GET instead of POST. Gilson (domain_name. is to decode all that data so you can manage it better.

Zip/Postal code. A guestbook normally will not require all this information (see my actual guestbook). city. etc. This is because not all characters are the same size. TEXT BOXES 148 . In the second box. 20 for the city and 25 for the State/Province. the viewer or visitor is asked to type in his or her name. In this case its value is "text" meaning a one line text box. The visitor will first have to click into the box to activate it. Of course a CGI script would print this information. I have named it "visitor_name". You can make your text boxes any size you wish.that is. In our example. address. An important part of a form element is this concept of NAME/VALUE pairs. 2.html tutorials in web page design by J. e-mail and website addresses. In other words. If the visitor enters more characters than will fit into the box. the information typed in this text box will be identified by the value "visitor_name". State/Province. credit card information. I chose a length of 35 for both the name and address. in any text box.INTRODUCTION TO HTML . the length of the input field. Thus when the data is collected by the server. John Gilson. I used it to get the visitor's name. The SIZE attribute denotes the character length or size of the text box . TYPE is an INPUT attribute that specifies the type of control that is to be used. 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. 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". the attribute NAME has the value "visitor_name". addresses. 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. in a nice easy to read manner. the text will scroll. Basically. Gilson | top | | bottom | TEXT BOXES The first form area is called the TEXT BOX. The INPUT tag simply tells the browser that visitor input will occur here. 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". along with all the other information from the form. So the number of characters that will actually fit into a box will vary depending on the characters used. 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. the visitor is asked to type in the address. 3. Using my name. In the first example. Text boxes contain one line of text and are often used for names. In our case in asking for the visitor's name. NAME is the attribute that allows you to assign any name to the text box. when each piece of information is sent by the visitor to the CGI script. For example. the name is "visitor_name" and the data "value" is whatever the visitor types in for the name. This INPUT tag comes with a number of attributes: 1. this would be sent to the CGI script as: visitor_name=John+Gilson.

See Lessons 11 and 12 if you need to review tables. what character length did the browser use? In other words. Since we no longer have a box size. you can have text printed in a text box when the form appears on the page (called "default text"). you could think of the number of characters as being "average size" characters. So if you do not like the way the text boxes line up. You can also use the ampersand command (&nbsp. SWITCH back to your browser and then load the file. I like to think of the lower case "h" as representing an average size character. 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. 5. 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. then he or she would simply have to erase the name and type in the correct country. 3. 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. To see what this attribute does. 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. Using the VALUE attribute. TEXT BOXES 149 . Use <BR> (line BReak) and <P> (Paragraph) tags to space the form elements. I used the <P> tag to double space the different sections of the form. then to have the name "United States" appear in the box as default text.) to force extra spaces between the headings (such as the heading "Name:") and the text boxes. 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. 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. 4. For example. 2.html tutorials in web page design by J. 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". As you likely noticed. Gilson However. You can use a table to set up your form elements. control them through the use of a table.INTRODUCTION TO HTML . SWITCH back to your browser and load the file. Type in a very long name longer than the box length. I used the ampersand command to force extra spaces in different locations in my actual guestbook. MAXLENGTH is another attribute you can use.

This denotes the number of items that must be initially visible to the visitor. you will get a scrollable list. They may be wrong and can cause a lot of confusion. only shows one item. until clicked on. In this context.so do not include "instructions" on how to do this. 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. the information will be sent to the server as visitor_country=Canada. Exactly how a visitor can select more than one item at once is dependent on his or her browser's platform . you will get a drop-down list. Thus if a visitor selects Canada. I used the pop-up menu box for the viewer to choose the country. 3. SELECT is a container element in that it also requires a closing tag (</SELECT> ). POP-UP MENU BOXES 150 . 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. 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. 2. SELECT means to "SELECT" from a menu of choices. Everything in between the opening and closing tags is part of the pop-up menu form. 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). Gilson | top | | bottom | POP-UP MENU BOXES The second form area is the POP-UP MENU BOX. there would be many more countries listed): Country: The box. 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. it is the "United States". The SELECT tag in the first line tells the browser that a SELECT form or POP-UP form is going here. I am naming this data "visitor_country" implying that what follows is the visitor's country. If it is set to more than one. The SIZE attribute has a value of "1".html tutorials in web page design by J. If set to "1".INTRODUCTION TO HTML . Here is the HTML coding to generate the pop-up menu box. Here is a reminder of what it looks like (in an actual situation. In our case. Visitor_country is the name for this menu of countries that will identify the country when it is collected by the server.

the data sent to the server will then be: visitor_age=youth. allowing a selection of more than one country is not a good example as the visitor can only live in one country . suppose in your form you decide to ask for your visitor's age category. the button "darkens" in the center. the dial moved. 5. Radio buttons in forms work in the same way. Normally the pop-up menu is used to make one selection.. When you pushed another button. you can only choose one button. The VALUE attribute allows you to further identify the data when it is collected by the server. the first one will give up its selection. 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. I only gave 7 choices or options to illustrate the pop-up menu but you can have as many as you wish. RADIO BUTTONS 151 . When you click on a radio button. | top | | bottom | RADIO BUTTONS The third form area is called the RADIO BUTTON.html tutorials in web page design by J. Note that with the United States option. 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. as opposed to: visitor_age=8+to+12. So use the SELECTED attribute if you feel there is a most common answer.INTRODUCTION TO HTML . the first choice was dropped and the dial moved again. You can also use the VALUE attribute with the OPTION tag. The name Radio Button comes from "way back" when car radios had big black plastic buttons to select stations. You couldn't push two buttons at once. Gilson Obviously. I used the SELECTED attribute to place this country's name in the box. Also. E-mail and website addresses. 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. I used the standard TEXT BOX to obtain this information..but it illustrates the point. 4. Each OPTION tag denotes an item in the menu. 6. If the visitor chooses "8 to 12". Since I wanted the United States to be the choice by default. This attribute gives the default value. 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. If you choose another button. For example. I used the attribute SELECTED. When you pushed a button.

| top | | bottom | CHECK BOXES The fourth area is the CHECK BOX. so it needs its own name which I called "sex". In other words. Thus the NAME attribute names the category the buttons are in. only one can be active at a time. Each radio button must have a VALUE. Thus the information submitted to the server will be "rating=great". If it is not clear that only one choice is to be made. For the two buttons involving the sex of the visitor. The given list in our form is only for illustration purposes and is by no means meant to be a complete list. the next part of the form is to choose Male or Female. 3. Gilson Here are the lines that give these buttons beginning with the instruction. Note in the choice "It's Great!". only one button can be selected.hoping that most visitors will agree with this choice and move on to the next part of the form. I gave the same NAME "sex". 4. The NAME attribute identifies each radio button in a set of buttons and in any one set of radio buttons. The TYPE of INPUT is to be a RADIO button. The VALUE (part of the NAME/VALUE pair) is the name assigned to the radio button. I used the CHECK BOX to determine the visitor's interests. <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. Thus no default was set with the "checked" attribute. Note that the group of four buttons to rate the website all have the same NAME which I called "rating". Often with lists such as these.INTRODUCTION TO HTML . I included the attribute CHECKED. if the visitor chooses the radio button "It's Great!". then you can always include an instruction such as: Please select one of the following. Thus the choice "It's Great!" will be darkened or checked . 2. As stated above.html tutorials in web page design by J. choosing male or female is a different category than the website rating. After rating the website. 5. The attribute CHECKED makes the radio button active by default. You must define a value for later sorting of the data by the CGI script. 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). These statements follow the same reasoning as for rating the website except that there are only two choices. Note that I did not select one to be the default value because there is no "most common" answer. Here are the check boxes as a reminder: CHECK BOXES 152 . For example. out of all the radio buttons with the same name. the VALUE "great" will be sent to the server (instead of "It's Great!").

As well. 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). As with Radio Buttons. 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"). The VALUE will only be sent to the server if the corresponding check box is checked . 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. more text can be entered than can fit in the display area. TEXT AREA BOXES 153 . If you want one or more of the choices to be pre-selected by you. Gilson Please indicate your interests. 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. <STRONG>Please indicate your interests. The text area box is also called the COMMENT BOX. • You can check as many items as you wish. then use the attribute CHECKED.on and off. A visitor can always remove a check by clicking in the checked box. some of the boxes will already have checks in them. | 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.that is.html tutorials in web page design by J. You can check as many boxes as you like so that when the form page opens up to the visitor.INTRODUCTION TO HTML . TYPE="checkbox" produces a check box. Also note the following two points: 1. • It is marked with an X or with a checkmark and not darkened as with radio buttons. Otherwise it is ignored altogether. A check box has two states . when the check box is "on". the NAME indicates the "category" or "set" of check boxes which I have named "interests". 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.

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. What did this change do to the text area box? Problem 4: Our text area box consists of 15 rows and 50 columns.that is. It specifies how text will wrap. if you want to specify no wrapping of text.INTRODUCTION TO HTML . 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. | Click here to go to the answer section | | top | | bottom | TEXT AREA BOXES 154 . scroll bars will show up when needed. In Firefox and Netscape. This allows the width to be specified as so many characters per row. All the viewer has to do is click in the box to activate it and then begin typing the message. a vertical scroll bar is displayed in the TEXTAREA box. You can of course make the box bigger or smaller . Thus I know that any data from the text area box will be first identified by the name "comment". Note that I named the text area box "comment" but you can give it any suitable name. 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 . 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. If you use a column width of about 50. Possible values are "hard". The Text Area Box allows for many lines of text. requires a closing TEXTAREA tag as indicated by the </TEXTAREA>. 3. you will be certain that the text area box will easily fit in all browsers. The COLS attribute specifies how wide the text area box will be. the data will be sent to the server as comment=data. When a visitor types in the box. Gilson 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. it will be WRAP="none". TEXTAREA is one word.html tutorials in web page design by J. 4. In Explorer. 5. The TEXTAREA tag unlike the TEXT BOX statement. Another attribute that can be used with the TEXTAREA tag is the WRAP attribute. Now SWITCH back to NOTEPAD and make whatever changes are necessary to determine the default number of rows and columns. "soft" or "none". 6.whether a lower case "f" or an upper case "W".whatever suits your needs. 50 characters per row. You can experiment with these attributes so see their effects on the typing of text in the text area box. The text is printed in a "courier" font meaning that each character takes up the same amount of space . The ROW attribute specifies how high the text area box will be. 2. For example.

one to SUBMIT the information or data to the server and one to REDO the information. You can give the button a name (an instruction) by using the VALUE attribute. Switch to your text editor and delete the VALUE="Start over". If your browser supports coloring blocks of text. Gilson SUBMIT AND RESET BUTTONS. You can omit the FONT container element if you wish. You need to give the visitor an opportunity to start over with a fresh form including all the default values. You can also give this button a name or instruction by using the VALUE attribute. 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. TYPE="submit" creates a 3-D button that submits the visitor's form data when clicked on. the contents of the form) to the server and to allow the visitor the option of starting over. the default instruction) on the submit button? | Click here to go to the answer section | 3. because sometimes it's easier just to start over with a clear form with all variables returning to their default settings. load the changed HTML file into your browser. Switch to NOTEPAD and delete the VALUE="Submit!" so that the line now looks like: <INPUT TYPE="submit"> Save the change. Problem 5: The VALUE attribute is optional. Whatever instruction you decide to place on the button. If everyone could fill out a form perfectly the first time. What is the default submit message (that is. CLOSING A FORM PAGE Finally we need something to allow the visitor to send the visitor information (that is. What is the default reset message? SUBMIT AND RESET BUTTONS. The VALUE attribute for the reset button is used to give the instruction. 2. Problem 6: The VALUE attribute for the reset button is also optional. In our form I chose to use the instruction "Start over" (VALUE="Start over"). you may have noticed that the "Thanks for visiting!" was printed in a maroon color.INTRODUCTION TO HTML . <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. Two buttons are then needed . 4. In our form I named it Submit! (VALUE="Submit!). we would not need the "delete" and "back space" keys on the computer keyboard. just make sure it's clear that a click will send the visitor's information to the server. So give your visitors a "reset" button that will restore the form to its original state. TYPE="reset" creates a 3-D button that clears the entire form and resets everything back to the original values when clicked on. Save the change.html tutorials in web page design by J. load the HTML file into your browser. CLOSING A FORM PAGE 155 .

we have: <FORM METHOD="GET" ACTION="index. 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). 7.htm"> <INPUT TYPE="submit" VALUE="Return to Home Page"> </FORM> If you now go back to Lesson 6. Using an image to submit data is the topic of the next section. 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. With an image you don't need a "submit" button because the form data is automatically sent when the user clicks on the image. Note that buttons are not normally used for ordinary links.gif" NAME="image_name"> Note the following points: Thanks for visiting! 156 . Gilson | Click here to go to the answer section | 5.INTRODUCTION TO HTML . For example. In other words. to create a simple 3-D button that links to my home page (index. Each image can also have its own name so that the CGI script can determine which image was clicked on. For example. 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. you will have a better understanding of the HTML coding involved in generating link buttons. you can use an image to submit the data information. For example.htm). The URL specified in the ACTION attribute of the FORM tag does not have to be an e-mail address or a CGI script. This allows the CGI script to determine which button was pressed. part of the lesson creates buttons for linking to other pages using the FORM container element.html tutorials in web page design by J. <H3 ALIGN="center"> centers the buttons and strongly emphasizes the "thank you". 6. If each submit button has its own unique NAME attribute. | top | | bottom | USING AN IMAGE TO SUBMIT FORM DATA Instead of a submit button. more than one submit button is allowed. then the name of the submit button selected by the visitor is sent along with the rest of the form data. Here is the HTML code using an image to submit the form data: Name: <INPUT TYPE="image" SRC="image. in Lesson 6 on links. Buttons are usually used only with forms and other situations that involve submitting data. A form must have at least one submit button. 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.

is dependent on the browser used. the coordinates of the clicked point. You can. the image should be self-explanatory to the visitor. however.html tutorials in web page design by J. In other words. Possible values are "top". When the visitor clicks on the image. 7. MAXLENGTH simply defines the maximum number of characters that can be entered. 6. for most people. On my browser it is 29 characters. With images. The MAXLENGTH attribute is also optional. 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. the coordinates will not provide any useful information. In general. As is always the case with images. The coordinates are sent as x and y coordinates. If you want to use more than one image to submit the data. The VALUE attribute is only used to place instructional text on buttons .INTRODUCTION TO HTML . measured in pixels from the upper left hand corner of the image. the CGI script can then determine the visitor's country or region. If you do not precede the image with an instruction. however. | top | | bottom | PASSWORD BOXES TYPE="password" creates a single line text box except that when the visitor types in the box. 2. When the visitor moves the mouse pointer over the image. the letters are hidden by bullets or asterisks.not on images. the characters typed in the password box will be identified by the name "visitor_password". Here is the HTML code to set up a password into your form (beginning with the instruction): Please enter your password (max. "left" or "right". If you were using a map of the world as the image for example. 2. it will turn into a pointing hand indicating that the image is active. you can give each image its own unique NAME. you could ask the visitor to indicate the country where he or she lives by clicking on the map. you should only use an image at the end of the form to submit data because as soon as the image is clicked on.but you can give it any suitable name). 5 characters): <INPUT TYPE="password" NAME="visitor_password" SIZE="6" MAXLENGTH="5"> Note the following three points: 1. The default size. it should be clear to the visitor that the image is to be clicked on to send the form data to the server. NAME="visitor_password" simply means that when the data is collected by the server. 4. The SIZE attribute for the length of the box is optional. 3. 3.x" appended to the NAME (which I called "image_name" . the form data is immediately sent to the server. "image. However. 5. are also sent. Try this feature to see it work. The x-coordinate is submitted with a ".y" appended to the name. "bottom". USING AN IMAGE TO SUBMIT FORM DATA 157 . Gilson 1. The y-coordinate is submitted with a ". you can use the ALIGN attribute to specify the alignment of the surrounding text with the image. it is 20 characters. Note the absence of the VALUE attribute in this INPUT statement. From the coordinates.gif" represents the name of the image (or the URL of the image to be used). "middle". It is therefore recommended that you include the SIZE attribute for complete control of the box length. On many browsers. 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).

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. 3.INTRODUCTION TO HTML . the price ($19. Nothing is displayed by the browser (that is. Note that my company name. 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.htm"> <INPUT TYPE="hidden" NAME="pd" VALUE="JavaScript Course"> <INPUT TYPE="hidden" NAME="pp" VALUE="19. In other words. how did my information get there on their secure order form? Well.95).95). Here is an example that involves hidden text. the button that you clicked on to take you to Net MoneyIn's secure order page was a SUBMIT button in a FORM element.cgi"> <INPUT TYPE="hidden" NAME="sn" VALUE="Brantford Educational Services"> <INPUT TYPE="hidden" NAME="se" VALUE="bes@bfree. The hidden text can be placed anywhere in the body of the HTML form. hidden elements are used by CGI scripts to transfer information from one form to another. If you clicked on the "order button". <INPUT TYPE="hidden" NAME="hidden_text" VALUE="visitor_id"> Note the following points for this INPUT line: 1. I sell on this website a JavaScript course. Here is how it works: On my HTML web page that advertises my JavaScript course.htmltutorials. but the information is still sent to the server.ca"> <INPUT TYPE="hidden" NAME="su" VALUE="http://www. the number of copies being ordered (which was set to 1). "Brantford Educational Services" was stored in variable "sn". I was not allowed to change the NAMES because they were used by Net MoneyIn for all their business customers to transfer the VALUE PASSWORD BOXES 158 .on. and the total cost ($19.html tutorials in web page design by J. Here were some of the actual statements: <H3 ALIGN="CENTER"> <FORM ACTION="https://www. That is.com/scripts/orders/order. hidden elements are invisible (hidden) to the visitor).netmoneyin. The information to be transferred is assigned the variable name "hidden_text". you left my website and were taken to Net MoneyIn's secure site to fill in the form with your credit card information.ca/ordering. Here is the HTML code for hidden text. 2.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. the answer is through hidden text. "Brantford Educational Services" was the VALUE assigned the NAME "sn" (making up a "name/value" pair). JavaScript Course). The "visitor_id" is the information itself that is to be transferred. As you may know. Gilson | 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. Now if this was the standard form used by all Net MoneyIn customers.

URL encoding follows these rules: 1.&visitor_city =Evanston&visitor_state=Illinois&visitor_country=United+States&visitor_code=60201 &visitor_email=bes@bfree. I was allowed to change the VALUES. These free guestbooks and forms include free access to CGI scripts to interpret the data. 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 could choose SOURCE or DOCUMENT SOURCE from the VIEW menu to see my company name.. and so on. The browser gets all the names and values from the form input. Fortunately. Also. encodes them as name/value pairs. 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.. You can begin by checking with your internet provider. 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.INTRODUCTION TO HTML . 4. For a small fee they may be able to provide the CGI script you need. Special characters include =. I could make the change in my HTML document. /. Name/value pairs are separated by ampersands (&). the name still appears in the output.ca&visitor_website=http%3A%2F%2Fwww. but with no value (for example. They were. as if they were typed in like any other part of the HTML document. price. 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. So if I had a new company name. or a new price. Some special characters are encoded in hexadecimal preceded by a percent sign (%). translates special characters such as those used in encoding. A sample of encoded data is: visitor_name=John+Gilson&visitor_address=1725+Orrington+Ave. 3. or a new e-mail address. lines up all the data and sends them to the server. 2. book title. : and %.. Spaces in the input are indicated by plus signs (+).html tutorials in web page design by J.bfree. The first step for the CGI script is to decode all that data so you can manage it better. In cases when the visitor does not enter a value for a particular request. "visitor_address="). | top | | bottom | HIDDEN TEXT 159 . However. when you clicked on the order button and went to Net MoneyIn's secure order page. If not. Each name is separated from its corresponding value by an equal sign (=). etc. &. on. Gilson information to the order page when the order button was clicked. however.on.ca%2FHTML%2F&rating=great&sex=male&interests=read&interests=internet .

pop-up menus. That is. Complete instructions are provided by Freedback. you are able to have as many text boxes.com's website that offers the free form that I used: http://freedback. Freedback. That is. free games. When the visitor chooses "submit". Also. I was able to do that from a company called Freedback. etc. This way I can add to the guestbook. check boxes. visitor data is usually posted so everyone can view all the comments that are made. free graphics. My guestbook is in my directory on my ISP's server.com/?self | top | | bottom | ANSWERS 1. With a free guestbook.make any changes that I want. With Freedback.com sends me the same summary as displayed to the visitor. as you like.a name and maybe an address or comment). when a visitor chooses to sign the guestbook. delete items from the guestbook .com.. Gilson 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. The MAXLENGTH attribute lets you define a maximum number of characters that can be entered in the text box. If you want to see my guestbook coding which is based entirely on the information presented in this lesson. all the visitor has to do is enter his or her name. Freedback. etc.com whose URL is given below. FREE FORMS AND GUESTBOOKS 160 . With most free guestbooks. they also have links to a host of other free things such as free counters. everything is done from a remote server which can slow things down a little. a summary of the form data is displayed to the visitor and at the same time.so if you want to make sure there is a limit.com offers free forms with a lot of flexibility. etc.INTRODUCTION TO HTML .com.html tutorials in web page design by J. I wanted more than a simple short form for my guestbook. he or she is taken to the website of the company that has the guestbook. radio buttons.thefreesite. You can obtain a free form or a free guestbook by visiting the following "Free Stuff Page": http://www.com makes their money from the advertising that is displayed above the summary. Here is Freedback.and it's all FREE! Only when the visitor clicks on the "submit" button does the visitor information go to Freedback. 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. email address. I wanted complete control over every item in my guestbook. Keep in mind that a visitor can type in more text than will fit in the text box . Freedback. You could not type more than 34 characters. You are in complete control of what you want your form to look like and what goes into your form . and a comment (much like a real guestbook that you would sign at a function . the decoded data is e-mailed to me.com's server to be decoded by their CGI script. use the MAXLENGTH attribute. just visit my guestbook and choose SOURCE from the VIEW menu. The main difference between a free guestbook and a free form is that a guestbook is simply a very short form. I tried out a number of the free guestbooks from the above location and they all worked.com/ Not only do they have links to websites offering free forms and guestbooks. If the visitor has a home page there is often also the opportunity to enter the URL.

INTRODUCTION TO HTML .700 characters. To maintain control of the size of the text area box.html tutorials in web page design by J. My browser defaults to only one row with 20 characters per row. If you want to have something written in the text area box when the form appears on the page (called "default text").that is between the opening and closing TEXTAREA tags. I strongly recommend that you include the ROWS and COLS attributes. Because you never really know how someone's else browser displays default values. The results will vary depending on the browser used. write the information just before the </TEXTAREA> as shown in the problem . The default message is "Submit Query". Gilson 2. The words "My favorite website address is:" appeared in the text area box. Thus you should include the SIZE attribute with your text boxes. Many browsers will default to 4 rows and 40 characters per row. 5. All rights reserved. 3. If you find a copyright violation.on. load the document into your browser and count the number of rows and the number of characters per row. The default message is "Reset". To determine the default number of rows and characters per row. Brantford Educational Services. Note: Placing HTML coding in the text area box will not work. Here is a problem I did not ask you to figure out.ca ANSWERS 161 . first remove the ROWS and COLS attributes so the line looks like: <P><TEXTAREA NAME="comment"></TEXTAREA> Then SAVE the changes. | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Seventeen | The information contained in these free 21 lessons is Copyright ©. The default character length if you do not include the SIZE attribute is 20 for most browsers. It is therefore illegal to copy these lessons into another website. please report it to htmltutorials@bfree. 6. What is the maximum number of characters that a visitor can enter into a text area box? Answer: 32. you should always try to maintain control when possible. 1997 .2009 by local and international copyright laws. 4.

HTML 3. I am presenting some additional text formatting alternatives to complete what was begun in earlier lessons. Gilson LESSON SEVENTEEN .2 came along.MORE TEXT FORMATTING You may read the following sections in their entirety or use these choices to go directly to a section. 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). they can be quite attractive. each browser will have emphasized the text in the best way that it can. | top | | bottom | LESSON SEVENTEEN . KBD.INTRODUCTION TO HTML . When these pages are viewed in browsers that support HTML 3.that is. Examples of logical tags are <EM> and <STRONG>. logical tags and 2. In this lesson. CODE. If the browser does not support those choices. They were: 1. another may show it as bold. Some of these alternatives are logical elements and some are physical elements. the browser is forced to print the text in exactly the way that the designer intends. TT. the effect is the same. Thus while one browser may show emphasis of text in italics. The great advantage of logical formatting is that while the actual formatting may not be the same from browser to browser. With physical tags or physical formatting. VAR and ADDRESS tags | | Underlining text | | Formatting text with <PRE> | | Blinking text | | Adding a comment | REVIEW OF LOGICAL AND PHYSICAL TEXT FORMATTING Until HTML 3. | Review of Logical and Physical text formatting | | The BASEFONT tag | | Changing the font size of one or more characters of text | | BIG and SMALL tags | | Changing the font face | | Block quotes | | Superscript and subscript | | CITE. In any event. Examples of physical tags are <I> and <B>.html tutorials in web page design by J.MORE TEXT FORMATTING 162 . two types of formatting techniques. web page designers were quite limited in their choices of text formatting. you were introduced to two types of tags .2 allows web page designers (that's you) to change the size.2. then the tags are ignored because the browser has no alternative way to display the text. In Lesson Four. physical tags With logical tags or logical formatting. SAMP. each browser formats the affected area as best as it can given the platform's strength and limitations.

To indicate a relative base font size. 6. you can use a smaller base font in lengthy text intensive pages to fit more text on a page. THE BASEFONT TAG 163 . 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. Most browsers now recognize the BASEFONT tag. for example. BASEFONT is one word (no spaces). is 2 sizes larger than the normal default size of 3. Conversely. 7. it is impossible to define exactly how big one size is. A "relative" size is always given "relative" to the current default size. BASEFONT applies to all normal and preformatted tags but not to headers. 4. 2. Gilson THE BASEFONT TAG The BASEFONT tag changes the size of ALL the body text after the BASEFONT tag except for HEADERS (defined by H1. <BASEFONT SIZE="+5"> would set the new default base font size 5 levels larger than the current base font size.html tutorials in web page design by J. Relative font sizes also work with the BASEFONT tag. The SIZE attribute is an integer value ranging from 1 to 7.INTRODUCTION TO HTML . Thus SIZE="5" is considered to be 2 sizes (also called 2 levels or 2 steps) larger than the default size of 3. Thus you would have the HEAD. use the "+" or "-" with the number value. while <BASEFONT SIZE="5"> would set the default base font size to "5". Choosing a large base font size may not look good in some browsers. H4. H5 and H6). the BASEFONT tag should then be placed right after the opening BODY tag. 5. You cannot use BASEFONT to change the size of individual characters or of a block of text. The default value is "3" which is the font size the browser normally displays. TITLE and BODY tags followed by the BASEFONT tag. Use only one BASEFONT tag in each HTML document as the BASEFONT tag affects all the succeeding text. Be aware then. Normally the BASEFONT tag is used to change the base font of the entire page and if this is the case. Thus while <BASEFONT SIZE="2"> gives a default base font of size "2". However. Here is the statement that changes the default size to 5: <BASEFONT SIZE="5"> Note the following discussion points: 1. There are other tags such as FONT. That is. H3. We only know that SIZE="5". there is no closing BASEFONT tag. The BASEFONT tag is not a container element. BIG and SMALL (also described in this lesson) that can be used for this purpose. Since the actual size of text varies from browser to browser. You can denote a relative base font size from +1 to +7 and from -1 to -7. 3. <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. For example. that using a BASEFONT tag could make the body text larger than the headers which could confuse your readers. Thus the BASEFONT tag is used to suggest a default font size. 8. H2.

As discussed in the last section. A relative size will change the font size relative to the current font size. Relative sizes range from +1 to +7 and 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". FONT is a container element in that it has an opening FONT tag (<FONT>) and a closing FONT tag (</FONT>). a font size of "3" for the "B" and so on. Thus if you do not use a FONT tag. Gilson 9. of course.INTRODUCTION TO HTML . 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 "!". In general you should have a good reason to change the base font size of your text. Sizes range in value from 1 to 7. 3. Thus: CHANGING THE FONT SIZE OF ONE OR MORE CHARACTERS OF TEXT 164 . Users may already have specified in their browser settings how they prefer to view text. define the current font size with the BASEFONT tag. 4.. all relative font changes in the document after the BASEFONT tag will be relative to that value. the text size that the browser uses is equivalent to a font size of 3. The word begins with a font size of 1 for the letter "U". A value of 3 is the default size (the same as the default size with BASEFONT). The SIZE attribute indicates the size that the font is to be changed to. if the BASEFONT tag is used.html tutorials in web page design by J. 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. 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 SIZE attribute can also take on a relative value..with the values to indicate a relative size. If the word "unbelievable" was printed in all the same size characters. the FONT tag is: <FONT SIZE="4">text text text</FONT> Discussion: 1. then your browser does not support the FONT tag for changing the size of characters. In other words. use the + or . | top | | bottom | CHANGING THE FONT SIZE OF ONE OR MORE CHARACTERS OF TEXT U NBE LIEVABLE! The FONT tag can be used to change the size of one or more characters of text or of an entire block of text. You can. To change the font size of a few characters or of a block of text to size "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. a font size of "2" for the "N". 2.

not all browsers display the effect of the BIG and SMALL elements in the same way. H4. Text formatted with SMALL is one size smaller than the surrounding text. These tags change the relative size of a given word or phrase with respect to the surrounding text. text formatted with BIG is always one size larger than the surrounding text. FONT should only be used as an enhancement of your presentation. 6. For example.INTRODUCTION TO HTML . BIG AND SMALL TAGS 165 . 8. 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. Although most popular browsers now support the FONT tag for changing the size of text. Now. unless the surrounding text is size 7 in which case BIG has no effect. | top | | bottom | BIG AND SMALL TAGS The BIG and SMALL tags were Netscape extensions. They can make a document hard to read. make the text a little bigger and use the SMALL tag to make the text a 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. This is because FONT is a physical tag which means that if a browser does not recognize the FONT tag. H2. You should avoid making extreme font changes if possible. 9. Netscape and Explorer all display BIG and SMALL in the same way. H3. That is. Try to limit your use of the FONT tag to small amounts of special effects. in which case SMALL has no effect. all the text that is contained between the opening and closing tags is affected by the tag. and they will not be able to adequately index your document if you use FONT instead of the HEADER elements. H5 and H6). Firefox. and <FONT SIZE="-3">text text text</FONT> will print the text 3 levels smaller than the default font. unless the surrounding text is size 1.2. Use the BIG tag to little smaller. when combined with the BASEFONT or FONT tags. In fact. any browser which supports the FONT tag will not allow the user to disable it. Do not use the FONT tag to take the place of header tags (H1. BIG and SMALL are both container elements. in Firefox and Netscape. 10. as long as the text is normal size (3). the results can be unexpected. Use the BASEFONT tag to change the font size of the entire page. you should also continue to use the <STRONG> and <EM> tags to emphasize text. Gilson <FONT SIZE="+2">text text text</FONT> will print the text 2 levels or 2 steps larger than the default font. Finally. text formatted with BIG is also always one size larger than the surrounding text. 7.html tutorials in web page design by J. the text will still be emphasized through the <STRONG> and <EM> tags. but became a standard with HTML 3. Use the FONT tag to change only a few characters or a few words. In Explorer.

does allow you to specify which fonts you would prefer to have the web page or just a portion of the text displayed in. Similarly. If you use this method. modern"> Using this method. For a list of possible names. Here is a list of some font faces. Just remember to separate each choice with a comma and a space as in: <FONT FACE="arial.2. Early versions of HTML do not allow you to specify a particular font. it may be safer to use the FONT tag with a SIZE of +1 (<FONT SIZE="+1">) instead of the BIG tag. That is. courier. however. If it doesn't recognize any of the listed fonts. <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. Gilson So. the text is simply rendered in the default font. HTML 3. 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. If some or all are still written in the normal default browser font. it will move to the third one and so on until it finds one it knows or until the list is exhausted. Try other fonts to see what you can come up with. then your browser does not support changing the font face in those situations. just go to your word processor or another program that allows you to choose from various fonts. it will go to the second font and use it. The above list is not meant to be an exhaustive list. the text will simply be displayed in the default mode. it will use that one. If it doesn't recognize the second font. nesting SMALL tags may produce text in a smaller font than with just one SMALL tag. | top | | bottom | CHANGING THE FONT FACE The FONT tag with the FACE attribute allows you to specify the face of the font. In other words. if you want to ensure that the text is one level larger. and use <FONT SIZE="-1"> instead of the SMALL tag to reduce the size by one level.INTRODUCTION TO HTML . you CHANGING THE FONT FACE 166 . if the browsers recognizes the first font listed. the results are undefined. If it doesn't recognize the first font listed.html tutorials in web page design by J. the results can't be predicted for all browsers. You may list as many fonts as you wish in the FONT tag. If the browser does not support the desired fonts. 2. the browser will use the first one available that it recognizes. Keep in mind that while you are allowed to nest BIG and SMALL tags.

<P>Don't carry wooden matches loose in a pocket . Block quotes are often printed with indented margins or simply printed in italics (BLOCKQUOTE is a logical tag). If the margins are indented.such as a quotation by a famous author. The FONT tag is a versatile tag. Always extinguish a stove or lantern before disconnecting or refilling its fuel tank. then both the left and right margins are indented. Gilson should then write the font faces in order of preference. Put out a campfire by dousing it with water.A Unique and Practical Guide to Wilderness and Wildlife. Better still. you use the BLOCKQUOTE element if you are quoting more than a few lines from a document. Don't carry wooden matches loose in a pocket . To be more specific. 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 . 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. Stir the wet ashes until all sparks are extinguished. CAMPING ETIQUETTE . Stir the wet ashes until all sparks are extinguished. Put out a campfire by dousing it with water. </BLOCKQUOTE> Note the following points: BLOCK QUOTES 167 . Here is an example using BLOCKQUOTE to quote from a book. It is used to change the text size. Store fuel containers in the shade and keep them away from flames. Now here is the complete HTML coding for this example: <H2 ALIGN="CENTER">CAMPING ETIQUETTE . the standard symbol for a block quote is ">". this is how you should practice fire safety when camping in the great outdoors: Be especially careful with fire and fuel. use safety matches. The HTML coding follows the example.FIRE SAFETY According to the Canadian Automobile Association in their book "Outdoors Canada" . then cover the ashes with earth.A Unique and Practical Guide to Wilderness and Wildlife.if you fall or slide on them they could ignite. In e-mail.INTRODUCTION TO HTML . font face and also to change the color of blocks of text.html tutorials in web page design by J. then cover the ashes with earth.FIRE SAFETY</H2> According to the Canadian Automobile Association in their book "Outdoors Canada" .if you fall or slide on them they could ignite. use safety matches. this is how you should practice fire safety when camping in the great outdoors: <BLOCKQUOTE> <P>Be especially careful with fire and fuel. Better still.

It could also confuse search engine page indexers and summarizers. It is not considered good HTML coding practice and you may not achieve the effect you want in all browsers. SUBSCRIPT Subscripts are letters or numbers that are lowered slightly relative to the normal text as in: The chemical expression for water is H20. 3. Gilson 1. 5. So all browsers support these tags. CAMPING ETIQUETTE .html tutorials in web page design by J. At one time these tags were Netscape extension tags only. | 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 and SUB are often used in mathematical formulas. BLOCKQUOTE is one word (no spaces). However. they became standard in HTML 3. You should begin a block quote with an HTML tag such as I did above with the <P> tag. It is also recommended that text not be placed directly between the opening and closing BLOCKQUOTE tags. SUB specifies that the enclosed text should be printed in SUBscript. The HTML coding for this statement is: The chemical expression for water is H<SUB>2</SUB>0. If you quote from someone else's work.INTRODUCTION TO HTML . However. 4. SUP specifies that the enclosed text should be printed in superscript. SUP stands for SUPerscript and if your browser supports superscripts you should see the degree symbol raised slightly.0 so all browsers support this tag. all three main browsers (Explorer. Firefox and Netscape) will still display a block quote correctly even if you ignore this rule. 2. Here is the HTML coding for the above line: The temperature outside is 78<SUP>o</SUP>F. Do not use BLOCKQUOTE simply to create indented text. SUP is a container element and so anything contained between the opening and closing tags will be raised or superscripted. don't forget to include a credit and/or copyright notice. I used the <P> tag two times in the above example. This tag was also part of HTML 2. BLOCKQUOTE can also contain other text formatting techniques such as <EM> and <STRONG>.2 for defining both kinds of offset text. That is.FIRE SAFETY 168 . I used the lower case letter "o" for the degree symbol.

<CITE>HTML CODING. VAR and ADDRESS TAGS All seven of these container elements are ways to format your text . He/she could cite for example: In the book. TT.however. In HTML 3. 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"). SUBSCRIPT 169 . The others are all logical tags..INTRODUCTION TO HTML . 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 . CITE is less widely recognized and less widely used than the "I" element. "Courier" is a popular example of a monospaced font. Gilson | top | | bottom | CITE. the person could be discussing HTML and wants to cite a reference. KBD. CODE.usually in a monospaced font.2.. it can confuse others studying your coding and it will also confuse search engine indexers that automatically extract information from your documents.. blah .such as the title of a book or magazine. For longer cited phrases. Use <EM> to emphasize in italics and use <I> for text which must appear in italics. SAMP. CITE normally prints the citation in italics. HTML CODING. blah. blah . Of all the tags given in the title of this section. blah. Thus a lower case "f" would take up as much space as the upper case "W". there is no tag to mark up short cited phrases. The HTML coding for this statement is: In the book.html tutorials in web page design by J. 1997</CITE> the writer states that blah. Now for a discussion of each element: CITE CITE is the logical tag for enclosing a citation . you can use the BLOCKQUOTE element.yet each has its own purpose in HTML coding. For example. If your browser supports some or all of these elements. the same as <I> does .. in a web page. You should therefore use each element only in the context they were designed for. 1997 the writer states that blah. Do not use CITE for anything but titles of cited works. TT is the most common and it is also the only physical tag. If you do use CITE for other things.

For example.INTRODUCTION TO HTML . type <KBD>yes</KBD> at the input prompt. It is used to simulate typewriter output. SAMP. SAMP SAMP is used to indicate a sample of text which should be used literally. the line <CODE>FOR I=1 to 10</CODE> sets up the counter. For this reason. VAR and ADDRESS TAGS 170 . It is the only font in this group that is considered physical formatting. CODE. Gilson 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 error message General Protection Fault is well known to Windows users. Here is the HTML coding for this line: Remember that when asked for a standard installation. If you need to deal with larger blocks of code (several lines of code). VAR CITE. Instead use TT. Now if you must have a monospaced font.html tutorials in web page design by J. CODE usually gives a monospaced font. it will be ignored. Here is an example: Remember that when asked for a standard installation. 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. the line FOR I=1 to 10 sets up the counter. TT TT stands for TeleType font (also known as Typewriter Text). If you want to ensure a monospaced font. SAMP will usually be rendered in a monospaced font. type yes at the input prompt. TT. use the TT tag instead. KBD The KBD element is used to indicate text which should be entered by the user. In other words. do not use SAMP. The HTML coding for this statement is: In the computer program. use KBD in your discussions when you want to indicate that input from the viewer is required. KBD. 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. Here is the HTML coding for this statement: The error message <SAMP>General Protection Fault</SAMP> is well known to Windows users. it is recommended that you use the PRE element (discussed later in this lesson). if a browser does not recognize the tag. Since TT is a physical element. It is also the monospaced marker that is used most often.

If you were discussing a computer program for example. Closing remarks for this section 1. Firefox and Netscape) display monospaced fonts in the same way.such as addresses and phone numbers. It is also used to enclose the signature file of the author of the web page. you would use VAR to refer to the variables used in the program such as the statement: In the BASIC program. Gilson VAR is used to mark up variables. 2. TT. ADDRESS The ADDRESS element should be used if you want to enclose contact information .INTRODUCTION TO HTML . that only the opening and closing ADDRESS tags force line breaks. the variable <VAR>c</VAR> is used for the loop counter.html tutorials in web page design by J. In most browsers the text will be rendered in italics.especially if you require extra spaces . the variable c is used for the loop counter. If the text is not printed in italics.</ADDRESS> produces: My street address is 1327 Orrington and my city isChicago. possibly with a slightly indented margin. All three main browsers (Explorer. the HTML coding: My street address is <ADDRESS>1327 Orrington</ADDRESS> and my city is <ADDRESS>Chicago. In other words. | top | | bottom | CITE. 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. SAMP. The variables could be marked up in a monospaced font or it could be marked up in some other way such as italics. CODE. it will be rendered in a monospaced font. 3. VAR and ADDRESS TAGS 171 . KBD. Here is the HTML coding for this line: In the BASIC program.use the PRE element. To format several lines of monospaced text . Monospaced tags will not have any effect in browsers that display all their text in monospaced fonts.

you will only see one space between adjacent words when the HTML document is loaded into the browser. Here is an example of a table done entirely with the <PRE> tag. One reason for doing this is to enable you to section off portions of text so that they will be easier to spot later. Preformatted text is ideal for homemade tables and art. Thus when an HTML document is loaded into the browser. this is called "collapsing spaces".and collapses all extra spaces and blank lines. 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> UNDERLINING TEXT 172 . any additional blank spaces and blank lines are ignored. NOTEPAD automatically prints text in a monospaced font. Also. The PRE element allows you to keep the original line breaks and spacing that you have inserted into the text in your HTML document. you are encouraged to avoid this tag. When building an HTML document in a text editor other than NOTEPAD.especially viewers with black and white or grayscale monitor screens.html tutorials in web page design by J.INTRODUCTION TO HTML . In HTML talk. There are of course ways to force extra spaces such as with the ampersand command (&nbsp. spaces are not collapsed. Browsers use underlining to indicate hyperlinks and many viewers could be confused if they see "links" that do not work . the browser decides where to divide each line of text depending mostly on window size .) and blank lines can be inserted with the <P> and <BR> tags. 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. This is called preformatted text. Lynx displays text within the EM and STRONG tags with an underline and so viewers can be confused by further underlining. No matter how many spaces you have between words. | top | | bottom | PREFORMATTING TEXT WITH <PRE> When you are working on an HTML document in a text editor such as NOTEPAD. Gilson 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. 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. In other words. many graphical browsers do not support underlined text since underlined text makes it harder to distinguish the text from links. 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). In fact. In other words.

PREFORMATTING TEXT WITH <PRE> 173 . PRE is a container element and so everything between the opening (<PRE>) and closing (</PRE>) tags will be part of the formatting. just choose SOURCE or DOCUMENT SOURCE from the VIEW menu. Directions: All 30 of the flower words listed below are found in the puzzle. They appear across. PRE is used to include sections of text in which formatting is critical. As you can see from the above two examples. down. A line break in the HTML document occurs when you hit the ENTER key. you can use preformatted text to line up the information in table like columns. Text contained within the PRE element will only be wrapped at the line breaks in the HTML document and spaces will not be collapsed. Gilson <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. Find the words and circle them. The author of this puzzle is Janet Flower of Oregon. Tables made with preformatted text will be readable by all browsers . AMARYLLIS AZALEA BLUE GENTIAN CROCUS DAFFODIL DAHLIA DAISY DAPHNE DELPHINIUM GENTIAN L Y B P U P M U J Y N N H O J I N L A R L J O N Q U I L R H L O U M U I A I N U T E P O T Y E E A P D N A I T N E G S N O P G R S O D A H L I A A E I 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 U S I H C T O N L R F A Z A L E A N T A H G T L A A L U P I N E I N Y E A I I L D D A P H N E X I H V R A S R E D N E V A L O C E A D N D S M A I N N I Z L A P L P E A E U P I L U T Y G Y A L A S I G M T E L O I V L H R MARIGOLD MUM PEONY PETUNIA ROSE SEGO SNAPDRAGON TULIP VIOLET ZINNIA E N A S O D L O G I R A M I G Y S V Y M U I N I H P L E D L Discussion: 1. if you must use the table format but don't want to use TABLE tags. To see the HTML coding for this one. backward and even diagonally.a subscription magazine all about birds. flowers and for those who love the great outdoors. up. 3.not just the ones that currently support official tables. the table may not look quite as nice as it would with TABLE tags. The mystery word is given at the end of this lesson. All the remaining letters will spell the mystery word. This puzzle comes from a magazine called "BIRDS & BLOOMS .html tutorials in web page design by J.INTRODUCTION TO HTML . 2. Because PRE uses a monospaced font.

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson 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 | PREFORMATTING TEXT WITH <PRE> 174

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson

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

ANSWER TO WORD SEARCH
The mystery word is VASE.

ADDING A COMMENT

175

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Eighteen |
The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2009 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to htmltutorials@bfree.on.ca

ANSWER TO WORD SEARCH

176

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson

LESSON EIGHTEEN - INDEX OF HTML 2.0 AND HTML 3.2 TAGS
You may read the following sections in their entirety or use these choices to go directly to a section. | Introduction | | Alphabetical index of HTML 2.0 tags | | Alphabetical index of HTML 3.2 (Wilbur) tags | | Grouping the tags | | Tags in HTML 3.2 that are not part of HTML 2.0 | | Alphabetical index of HTML 3.2 tags including the attributes | | The FRAME tag |

INTRODUCTION
The World Wide Web Consortium, known as W3C, was founded in 1994 to develop common protocols for the evolution of the World Wide Web. The W3C is an international industry consortium made up of Key Industry Players, Content Specialists and Experts and is jointly hosted by the Massachusetts Institute of Technology Laboratory for Computer Science (MIT/LCS) in the United States; the Institut National de Recherche en Informatique et en Automatique (INRIA) in Europe; and the Keio University Shonan Fujisawa Campus in Asia. Membership is open to any organization that signs a membership agreement (W3C cannot take individual memberships). It is this Consortium that finds the common specifications for the World Wide Web for organizations to build on. In other words, it is the Consortium's HTML working group that comes out with all these different versions of HTML. HTML is a language under construction. There are really three main driving forces that determine what the next version of HTML will look like: (1) the World Wide Web Consortium, (2) Mozilla (owner of Firefox and Netscape) and (3) Microsoft (owner of Internet Explorer). Now both Mozilla and Microsoft have agreed to abide by the decisions of the W3C of which they are members. However, these two companies are also in a battle to increase the popularity of their browsers. As a result each company has produced a number of extension tags in the hopes of tipping the balance in their favor. In this lesson, I am only indexing tags sanctioned by the W3C. However, at the end of the lesson (the last choice in the menu at the top of this page), I give the tags and attributes associated with frames even though they are not part of HTML 2.0 or HTML 3.2, because Firefox, Netscape and Explorer support them. Note: these frame tags and attributes became standard with HTML 4.0. If you start using a lot of tags and attributes that are only supported by a specific browser (such as Explorer), you should consider warning viewers that the page is best viewed in that particular browser. This lesson begins with a listing of all the tags as defined in HTML version 2.0 specifications (HTML 2.0). Until January 1997, the "official" version of HTML was HTML 2.0. The current recommendation by the W3C HTML working group is HTML 3.2 also known as "Wilbur". It became a recommendation in January, 1997. HTML 4.0, also known as "Cougar", is W3C's next version of HTML. This version was formally announced by the HTML working group in April, 1997. This is a work in progress and is expected to become a proposed LESSON EIGHTEEN - INDEX OF HTML 2.0 AND HTML 3.2 TAGS 177

button. <!--> .To create a definition list <DT> .To display text in boldface <BASE> .To create a link or anchor <ADDRESS> . A click on the tag name will take you to the lesson where the tag is first introduced. <H2>.To indicate that a block of text is a quotation <BODY> .To create a line break <CITE> . <ISINDEX>.To create a horizontal line (horizontal rule) <HTML> . <EM>. Gilson recommendation after a period of public review. <KBD>. <DT>. <ADDRESS>. <BODY>. <VAR> The following is an alphabetical listing of these HTML 2. <H3>. <DD>.To indicate a term to be defined in the definition list <EM> . <OL>.To create a directory list <DL> .0 tags. <OPTION>.To create a form element such as an input field.html tutorials in web page design by J. <TT>.To create a primitive search <KBD> . <HTML>. <TEXTAREA>. <IMG>.To create a level 2 header <H3> .To create an input form <H1> . <UL>.To indicate text is a computer code <DD> .To enclosed the main section of a web page <BR> .To indicate that the text is a short citation <CODE> .To indicate a definition description in a definition list <DIR> .To indicate address information <B> . <DL>. <INPUT>. <H6>.To identify the document as an HTML document <I> . <I>.To display text in italics <IMG> . <PRE>. <A>.To create a level 3 header <H4> . etc.To place an image on the web page <INPUT> .0 tags along with a statement when each tag is used.To create a level 6 header <HEAD> .To create a level 4 header <H5> .To insert an invisible comment <A> . <SAMP>. <FORM.To create a level 1 header <H2> .To emphasize text. <DIR>.To indicate text from a keyboard INTRODUCTION 178 . <STRONG>. <BASE>. <BLOCKQUOTE>. <H5>. <SELECT>.To specify the URL of the document used to generate any relative URLs <BLOCKQUOTE> . usually in italics <FORM> .To create a level 5 header <H6> . <H4>. <HR>. <LI>. <MENU>. <CODE>. <!-->. <LINK>. | top | | bottom | ALPHABETICAL INDEX OF HTML 2. <ISINDEX> .To create the head section of the web page <HR> .INTRODUCTION TO HTML . <HEAD>. <TITLE>. <B>. <CITE>. <META>. <BR>. <P>.> <H1>.0 TAGS Here is a simple alphabetical listing of HTML 2.

<OL>. <INPUT>.0 tags.To indicate that a block of text is a quotation <BODY> . <DIV>.To create a menu in a form <STRONG> .To create the document title <TT> . A click on the tag name will take you to the lesson where the tag is first introduced. <STRIKE>. <H2>. <BR>.2 tags.To display text in boldface <BASE> . <TD>. <UL>.2 tags along with a statement when each tag is used. <DT>. <DIR>. <PARAM>.To insert an applet <AREA> . <HEAD>. <META>. <H5>.0 TAGS 179 . <STYLE>.2 tags include all the HTML 2. <CODE>.To create an ordered list <OPTION> . <STRONG>.To indicate that the text is a variable | top | | bottom | ALPHABETICAL INDEX OF HTML 3. <TITLE>. <ISINDEX>. <DFN>. Gilson <LI> . <SELECT>. <A>. <SUP>. <KBD>.To create an unordered list <VAR> . <SUB>.To create a new paragraph <PRE> . <TABLE>. <SCRIPT>.To make text bigger than the surrounding text <BLOCKQUOTE> . <HR>. <ADDRESS>. <BIG>. <TEXTAREA> <TH>. usually in boldface <TEXTAREA> .To create a block area for text input in a form <TITLE> .To create preformatted text <SAMP> .To insert an invisible comment <A> .To create a line break ALPHABETICAL INDEX OF HTML 2.2 (WILBUR) TAGS Here first is a simple alphabetical listing of the HTML 3.INTRODUCTION TO HTML . <HTML>. <H6>. <P>.To change the default font size throughout the entire page <BIG> .To create a list item <LINK> . <AREA>.To display sample text that should be used literally <SELECT> .To create a menu item list <META> .To create a link or anchor <ADDRESS> . <IMG>. <VAR> Below is an alphabetical listing of these HTML 3. <MAP>.html tutorials in web page design by J. <DD>.To define relationships between documents and to link to an external style sheet <MENU> . <CITE>. <BODY>. <!-->.To enclosed the main section of a web page <BR> . Note that the HTML 3.To strongly emphasize text. <U>.To indicate address information <APPLET> . <LI>. <B>. <TR>. <EM>.To create individual options in a form menu <P> . <H3>. <I>.To create an automatic page jump plus also used for document information <OL> . <BASEFONT>.To display text in a monospaced teletype font <UL> .To specify the URL of the document used to generate any relative URLs <BASEFONT> . <!--> . <PRE>.To specify the coordinates of an image map <B> . <CAPTION>. <APPLET>. <OPTION>. <FORM> <H1>. <LINK>. <BLOCKQUOTE>. <DL>. <TT>. <H4>. <SMALL>. <MENU>. <SAMP>. <CENTER>. <BASE>. <FONT>.

To create a client-side image map <MENU> .To create a subscript <SUP> .To create a definition list <DT> .To create a menu in a form <SMALL> .To indicate a definition description in a definition list <DFN> .To create a horizontal line (horizontal rule) <HTML> .To divide a page into logical sections <DL> .2 (WILBUR) TAGS 180 .To create a table <TD> .INTRODUCTION TO HTML .To create a directory list <DIV> .To create a primitive search <KBD> .To create an automatic page jump plus also used for document information <OL> .To emphasize text.To indicate text is a computer code <DD> .To transfer a parameter to an applet <PRE> .To indicate a term to be defined in the definition list <EM> .html tutorials in web page design by J.To create a new paragraph <PARAM> .To define relationships between documents and to link to an external style sheet <MAP> .To indicate that the text is a short citation <CODE> .To display text in italics <IMG> .To display sample text that should be used literally <SCRIPT> .To create a block area for text input in a form <TH> .To create the document title ALPHABETICAL INDEX OF HTML 3.To identify the document as an HTML document <I> .To indicate text from a keyboard <LI> .To create an input form <H1> . face and color of individual letters or words <FORM> .To create a header cell in a table <TITLE> .To indicate the definition of a term when used for the first time <DIR> . usually in italics <FONT> .To display text with a line through it (same as <S>) <STRONG> .To create a list item <LINK> .To make text smaller than the surrounding text <STRIKE> .To create the head section of the web page <HR> .To set up style information <SUB> .To create a level 1 header <H2> .To center text.To create a level 3 header <H4> . images and other elements <CITE> .To create a level 5 header <H6> . Gilson <CAPTION> .To create an in-line script <SELECT> .To create a caption for a table <CENTER> .To create a level 6 header <HEAD> .To create a level 4 header <H5> .To place an image on the web page <INPUT> . usually in boldface <STYLE> .To create individual options in a form menu <P> .To change the size. button.To create a regular cell in a table <TEXTAREA> .To create preformatted text <SAMP> . <ISINDEX> .To create a menu item list <META> .To create a superscript <TABLE> .To create a level 2 header <H3> .To create a form element such as an input field.To strongly emphasize text.To create an ordered list <OPTION> . etc.

To define relationships between documents and to link to an external style sheet <META> . Elements for the HEAD section The HEAD section of a document may only contain the following elements.To create a new row in a table <TT> .To create a level 5 header <H6> .To create a primitive search <LINK> .html tutorials in web page design by J. are called block-level elements.To indicate that the text is a variable | top | | bottom | GROUPING THE TAGS Here is a breakdown of the HTML 3. Elements that generate a new paragraph such as a header tag (for example <H1>) or a paragraph tag (<P>).To create an unordered list <VAR> .To create the document title Elements for the BODY section There are two types of elements in the BODY section and they are block-level elements and text-level elements.To create a level 6 header GROUPING THE TAGS 181 . if used. the browser will assume the HEAD section has ended and that the BODY section has started.To create a level 2 header <H3> . Here are the block-level elements: Headings <H1> . <BASE> .To set up style information <TITLE> . Text-level elements (also called in-line elements) are elements that do not generate a new paragraph (examples are <EM> and <STRONG>).To create a level 1 header <H2> . Block-level elements The BODY of a document consists of multiple block-level elements.INTRODUCTION TO HTML .To place a line underneath text <UL> .To display text in a monospaced teletype font <U> .To create an automatic page jump plus also used for document information <SCRIPT> .To create an in-line script <STYLE> .To create a level 3 header <H4> . must be placed in the HEAD section of the HTML document.To specify the URL of the document used to generate any relative URLs <ISINDEX> . If any other elements or plain text occur inside the HEAD section. Gilson <TR> .To create a level 4 header <H5> .2 elements into groups beginning with the elements that.

To create a list item <MENU> .To emphasize text.To indicate the definition of a term when used for the first time <EM> .To display text in a monospaced teletype font GROUPING THE TAGS 182 . Logical markup <CITE> .To indicate a term to be defined in the definition list <LI> .To center text.To make text bigger than the surrounding text <I> .To create a new paragraph <PRE> .html tutorials in web page design by J.To create a menu item list <OL> .INTRODUCTION TO HTML .To create a horizontal line (horizontal rule) <TABLE> .To make text smaller than the surrounding text <STRIKE> .To indicate address information <BLOCKQUOTE> .To create a subscript <SUP> . usually in boldface <VAR> .To indicate text is a computer code <DFN> .To create a table Text-level elements These elements are used to mark up text inside block-level elements.To indicate a definition description in a definition list <DIR> .To indicate text from a keyboard <SAMP> .To display text in boldface <BIG> .To display text in italics <SMALL> .To create a directory list <DL> .To divide a page into logical sections <FORM> .To create an ordered list <UL> .To strongly emphasize text. usually in italics <KBD> .To create an input form <HR> .To display sample text that should be used literally <STRONG> .To create an unordered list Text containers <ADDRESS> .To create a superscript <TT> .To indicate that a block of text is a quotation <P> .To indicate that the text is a variable Physical markup <B> .To indicate that the text is a short citation <CODE> . Gilson Lists <DD> .To create preformatted text Others <CENTER> .To create a definition list <DT> . images and other elements <DIV> .To display text with a line through it (same as <S>) <SUB> .

<OPTION> . etc.To place a line underneath text Special markup <A> .To transfer a parameter to an applet Forms <INPUT> .0.To change the size. face and color of individual letters or words <MAP> .To create a client-side image map <PARAM> .To create a caption for a table <TD> .To create a menu in a form <TEXTAREA> .To specify the coordinates of an image map <BASEFONT> .To change the default font size throughout the entire page <BIG> .To create a client-side image map <PARAM> . Gilson <U> .To specify the coordinates of an image map <BASEFONT> .html tutorials in web page design by J.To create a block area for text input in a form Tables <CAPTION> .To center text.INTRODUCTION TO HTML .To insert an applet <AREA> . button.2 THAT ARE NOT PART OF HTML 2.To create individual options in a form menu <SELECT> . face and color of individual letters or words <IMG> .To create a new row in a table | top | | bottom | TAGS IN HTML 3.2 but not part of HTML 2. images and other elements <DIV> .To create a regular cell in a table <TH> .To create a form element such as an input field.O The following is a list of tags that are part of HTML 3.To create a line break <FONT> .To divide a page into logical sections <DFN> .To create a link or anchor <APPLET> .To transfer a parameter to an applet <SCRIPT> .O 183 .To indicate the definition of a term when used for the first time <FONT> .To make text smaller than the surrounding text TAGS IN HTML 3.To insert an applet <AREA> .2 THAT ARE NOT PART OF HTML 2.To place an image on the web page <MAP> .To make text bigger than the surrounding text <CAPTION> .To change the size.To create a header cell in a table <TR> .To create an in-line script <SMALL> .To change the default font size throughout the entire page <BR> . <APPLET> .To create a caption for a table <CENTER> .

For any tag that has one or more attributes.2 tags along with their attributes if applicable.To specify the coordinates of an image map • COORDS .To insert an invisible comment <A> .To create a link or anchor • HREF .2 TAGS INCLUDING THE ATTRIBUTES We will conclude this lesson with an alphabetical listing of HTML 3.To create a header cell in a table <TR> .To specify the window or frame that the link must be displayed in <B> .INTRODUCTION TO HTML .To make the click in the area in the image map have no effect • SHAPE .To indicate address information <APPLET> .To set up style information <SUB> .To change the size of text throughout the page <BIG> .To specify the URL of the document used to generate any relative URLs <BASEFONT> .To specify the height of the applet • WIDTH .To specify the destination URL of the link of an area in the image map • NOHREF .To specify the shape of the area in an image map • TARGET .To display text with a line through it (same as <S>) <STYLE> .To change the default font size throughout the entire page • SIZE .To create a regular cell in a table <TH> .To insert an applet • CODE .To indicate that a block of text is a quotation ALPHABETICAL INDEX OF HTML 3. Gilson <STRIKE> .To create a subscript <SUP> . A click on the tag name will take you to the lesson where the tag is first introduced.To create a table <TD> .To give the coordinates of the area in an image map • HREF .To specify the URL of the page or the name of the anchor that the link goes to • NAME . <!--> .To specify the width of the applet <AREA> .html tutorials in web page design by J. the attributes are bulleted and immediately follow the tag.To specify the URL of the applet's code • HEIGHT .To place a line underneath text | top | | bottom | ALPHABETICAL INDEX OF HTML 3.To create a new row in a table <U> .To mark the specific area of the page that a link is to jump to <ADDRESS> .To create a superscript <TABLE> .To display text in boldface <BASE> .To make text bigger than the surrounding text <BLOCKQUOTE> .2 TAGS INCLUDING THE ATTRIBUTES 184 .

To create a caption for a table • ALIGN .To give the URL of the CGI script for the form • METHOD .To indicate that the text is a short citation <CODE> .To stop text wrap on one or both sides of an image <CAPTION> .To specify the color of visited links <BR> .To create a line break • CLEAR .To give a name to each of the sections <DL> .To align a given section to the left. usually in italics <FONT> .To enclosed the main section of a web page • ALINK .To align the header <H2> . face and color of individual letters or words • COLOR .To change the text font • SIZE .To indicate text is a computer code <DD> .To indicate the definition of a term when used for the first time <DIR> .To specify the color of new links • TEXT . right or center • CLASS .To create a definition list <DT> .To divide a page into logical sections • ALIGN .To specify the background color • LINK .To change the size.2 TAGS INCLUDING THE ATTRIBUTES 185 .To specify a background image • BGCOLOR .To create an input form • ACTION .To indicate a term to be defined in the definition list <EM> .To change the text size <FORM> . Gilson <BODY> .To change the text color • FACE .To create a level 3 header ALPHABETICAL INDEX OF HTML 3.To specify the color of active links • BACKGROUND .INTRODUCTION TO HTML .To create a level 1 header • ALIGN .To determine how the form is to be processed <H1> .html tutorials in web page design by J.To align the header <H3> .To indicate a definition description in a definition list <DFN> .To center text.To specify the color of text • VLINK . images and other elements <CITE> .To create a directory list <DIV> .To create a level 2 header • ALIGN .To emphasize text.For placing a caption above or below the table <CENTER> .

To create a primitive search <KBD> .To create the head section of the web page <HR> .To specify the URL of the active image • TYPE .To specify the size of the image so that the web page is loaded more quickly.To align the header <H5> .To determine the maximum number of characters that can be entered in a form element • NAME .To display text in italics <IMG> .To give alternative text that will be displayed if the image is not displayed • HSPACE .To align the header <H4> .To specify the width of a text box or password box.To mark a radio button or a check box by default • MAXLENGTH . • CHECKED .To create a horizontal line (horizontal rule) • ALIGN .To align the header <H6> . button.To indicate text from a keyboard <LI> .To specify the width of the horizontal rule <HTML> .To specify the data of the form element that will be sent to the server <ISINDEX> .To create a level 6 header • ALIGN . etc.To name the type of form element • VALUE .To specify the amount of space above and below the image • LOWSRC .To identify the data collected by the element • SIZE .To place an image on the web page • ALIGN .To create a level 4 header • ALIGN .To specify the height of the horizontal rule • WIDTH .To specify the URL of the image • USEMAP .2 TAGS INCLUDING THE ATTRIBUTES 186 .To align the image and for wrapping text around the image • ALT . or for scaling the image <INPUT> .To display the horizontal rule without shading • SIZE .html tutorials in web page design by J.To create a level 5 header • ALIGN .To create a list item ALPHABETICAL INDEX OF HTML 3. • SRC . Gilson • ALIGN .To identify the document as an HTML document <I> .INTRODUCTION TO HTML .To specify the image map that should be used with the referenced image (Lesson 20) • VSPACE .To specify the URL of the low resolution version of the image • SRC . HEIGHT .To align the header <HEAD> .To align the horizontal rule • NOSHADE .To create a form element such as an input field.To specify the amount of space to the sides of the image • WIDTH.

To create a menu in a form • MULTIPLE .To align a cell's contents horizontally • BGCOLOR .To allow users to choose more than one option in the menu • NAME .To specify the amount of space between a cell's contents and its borders • CELLSPACING .To identify the data collected by the menu • SIZE .To specify the number of items initially visible in the menu <SMALL> . Gilson • TYPE .To create a new paragraph • ALIGN . usually in boldface <STYLE> .To create an automatic page jump plus also used for document information <OL> .To display sample text that should be used literally <SCRIPT> .To specify the initial value of a menu option <P> . of the table border • CELLPADDING .To create individual options in a form menu • SELECTED .To strongly emphasize text.To name the map so it can be referenced later <MENU> .To change the background color of a cell ALPHABETICAL INDEX OF HTML 3.To make text smaller than the surrounding text <STRIKE> .To create an in-line script <SELECT> .To set up style information <SUB> .To create preformatted text <SAMP> .To align the paragraph <PARAM> .To define relationships between documents and to link to an external style sheet <MAP> .To display text with a line through it (same as <S>) <STRONG> .html tutorials in web page design by J.To specify the thickness.To make a menu option be selected by default in a blank form • VALUE .To specify the size of the table <TD> .To transfer a parameter to an applet <PRE> .To create a menu item list <META> .To create a subscript <SUP> .To specify the initial value of the first list item • TYPE .To specify the symbol to begin each list item <OPTION> .To create a client-side image map • NAME .To specify the initial value for this and the following list items <LINK> . HEIGHT .INTRODUCTION TO HTML .To create an ordered list • START .2 TAGS INCLUDING THE ATTRIBUTES 187 .To create a superscript <TABLE> .To specify the symbol for this and the following list items • VALUE .To create a regular cell in a table • ALIGN .To create a table • BORDER .To specify the amount of space between cells • WIDTH. if any.

To specify the number of rows in the text block • COLS .To span a cell across more than one column • NOWRAP .To specify the symbol to begin each list item <VAR> .To create the document title <TR> .To create a new row in a table • ALIGN .2.To align the contents of the row vertically <TT> . HEIGHT . Netscape and Internet Explorer: <FRAME> .To create an unordered list • TYPE .To identify the data that is gathered with the text block • ROWS .To align the contents of the row horizontally • BGCOLOR .To create a block area for text input in a form • NAME .To specify the size of the cell <TITLE> .To specify the size of the cell <TEXTAREA> .0 and so Firefox.To span a cell across more than one row • VALIGN .To align a cell's contents vertically • WIDTH.To change the color of the entire row • VALIGN .To create a header cell in a table • ALIGN .To display text in a monospaced teletype font <U> .To span a cell across more than one row • VALIGN .0 or HTML 3. it became a standard in HTML 4. Gilson • COLSPAN .To specify the number of columns in the text block <TH> . HEIGHT .To keep a cell's contents on one line • ROWSPAN .To place a line underneath text <UL> .To align a cell's contents vertically • WIDTH.html tutorials in web page design by J.To create frames THE FRAME TAG 188 .INTRODUCTION TO HTML .To indicate that the text is a variable | top | | bottom | THE FRAME TAG The FRAME element is not part of HTML 2. However.To span a cell across more than one column • NOWRAP .To keep a cell's contents on one line • ROWSPAN . So here are the tags and attributes associated with frames that are supported by Firefox.To align a cell's contents horizontally • BGCOLOR .To change the background color of a cell • COLSPAN . Netscape and Explorer browsers do support frames making frames increasingly popular among web page designers.

If you find a copyright violation.To provide an alternative to frames for browsers that do not recognize them | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Nineteen | The information contained in these free 21 lessons is Copyright ©.ca THE FRAME TAG 189 . 1997 . please report it to htmltutorials@bfree.To specify the initial URL to be displayed in a frame <FRAMESET> .To display or hide a frame's scrollbars • SRC . It is therefore illegal to copy these lessons into another website.To display or hide frame borders • MARGINHEIGHT .To display or hide frame borders • ROWS .on.html tutorials in web page design by J. Brantford Educational Services.To specify a frame's left and right margins • NAME .To specify a frame's top and bottom margins • MARGINWIDTH .To determine the number and size of frames • FRAMEBORDER .To keep visitors from resizing a frame • SCROLLING .To define a frameset • COLS .2009 by local and international copyright laws.To name a frame so that it can be used as a target • NORESIZE . All rights reserved. Gilson • FRAMEBORDER .To determine the number and size of frames <NOFRAMES> .INTRODUCTION TO HTML .

four houses down from Elm Street. If you tried to print this lesson and your browser gave you an error message.0 and HTML 3. where the relative address points to depends on where the information is given from.html tutorials in web page design by J. ISINDEX.0 tags. street and number. With the same information given in a different town. Some of these tags are seldom used. then go to the section titled "Printing this lesson". LESSON NINETEEN . I might say. An absolute address would be analogous to a complete mailing address. STRIKE and STYLE tags | | Printing this lesson | Note: Some people like to print out these lessons on paper. However. <BASE> The BASE tag is used in locating HTML documents. "My friend lives on Main Street. zip code and country. That is. we first need to understand what a relative URL is.2) and the second group of tags is part of HTML 3. This is a relative address where the location is given relative to another location. In terms of URLs. it would still be good to take some time and learn just what these tags are all about. state. You use the BASE tag to define the base URL of the directory.THE REMAINING TAGS 190 .THE REMAINING TAGS You may read the following sections in their entirety or use these choices to go directly to a section. The starting point for the address is given relative to a BASE location which is at Elm Street. PARAM. The mail service needs no other information. If you were to send a letter. it will find the address.0 (which also makes it part of HTML 3. | Introduction | | BASE. LINK. a relative URL gives the location of a document or file relative to the location of a base URL such as of a directory (also called a folder). | top | | bottom | BASE. The first group of tags is part of HTML 2. DFN. If I were to give you directions to a friend's house in my town. DIR.2 that have not been discussed in any of the previous lessons. you would never find the house. DIR. MENU and META TAGS These tags all belong to HTML 2.2 (and not part of HTML 2. including name. All relative URL's in the document are resolved against this base URL.0 and complete the discussion on HTML 2. SCRIPT. Gilson LESSON NINETEEN .INTRODUCTION TO HTML . To understand the BASE tag. INTRODUCTION There are still a few tags found in both HTML 2. MENU and META tags | | APPLET. DIV. LINK. no matter which city or town the letter is sent from.0). city. ISINDEX. The opposite of a relative address is an absolute address.

MENU and META TAGS 191 .htm"> The ". Use it only if BASE. Therefore. the complete path and the document or file name itself. if the BASE URL was: <BASE HREF="http://www. DIR.ca/"> then all relative URL's contained in the HTML document will be built using this URL as a reference.ca/index/lesson19./" implies a directory one level up in the hierarchy. on the other hand.ca/lesson19.htm"> would correspond with the full URL: <A HREF="http://www.htm"> You can also use relative URL's to go a level higher in the directory structure.INTRODUCTION TO HTML .htm"> The BASE tag is used to indicate the correct location of a document or file on the server.htmltutorials.html tutorials in web page design by J. including the protocol. the server name. <A HREF=". Normally the browser already knows this location. that is. For example.htm"> would correspond with the complete URL: <A HREF="http://www. a subdirectory of the current directory. if the BASE URL is: <BASE HREF="http://www.htmltutorials./lesson19. It is usually followed by a colon (:) and two forward slashes (//) as in http://.htmltutorials. The BASE tag is placed in the HEAD section of the HTML document (just like the TITLE tag is placed in the HEAD section). if the BASE directory's URL (placed in the HEAD section) is: <BASE HREF="http://www..htmltutorials.. For example.bfree. <A HREF="/index/lesson19. You can also use relative URL's to go a level down. For example. gives the entire path to the document or file.ca/lesson19. Gilson An absolute URL. So if the relative URL is: <A HREF="lesson19.on.htm"> then this corresponds with the complete URL: <A HREF="http://www.htmltutorials. LINK. The most common protocol is http which stands for HyperText Transfer Protocol.ca/"> then. it should not be necessary to use this tag.ca/"> then. ISINDEX.

INTRODUCTION TO HTML . DIR is seldom used and most HTML books do not even mention this tag. The server must be set up to support it.html tutorials in web page design by J. if the document is generated with a CGI script). The format for this tag is: <ISINDEX PROMPT="string" ACTION="location of CGI program"> The ISINDEX tag is placed in the HEAD section of the document and was used before the FORM tag became popular. DIR stands for DIRectory list and it is used to produce a bulleted list of short items. DIR. That is. Today. <LINK> Not many browsers support the LINK tag although it has some usefulness in site maintenance and in style sheets. This is because the three most recognized ways by browsers to organize lists are OL (ordered list). separated by commas:"> The ISINDEX tag should be inserted by the server if the document can be searched on the server (for example. When <ISINDEX> is inserted into a document. For more flexibility. <ISINDEX> <ISINDEX> is used in primitive searches. MENU and META TAGS 192 . LINK. <DIR> puts the enclosed items marked with a <LI> in a directory listing. UL (unordered list) and DL (definition list). Items in a directory list may be arranged in columns. The server then executes a search and returns the results. typically 24 characters wide. The PROMPT attribute can be used to override the default message in the dialogue box which is usually something like: "Enter search keywords". BASE. Just inserting the ISINDEX tag will not make the document searchable. typically up to 20 characters each. this tag has been all but replaced by forms. it will allow the viewer to enter keywords which are then sent to the server. The ISINDEX tag displays a text dialogue box indicating the presence of a searchable index. The prompt attribute got around that problem as in: <ISINDEX PROMPT="Enter your height:"> or <ISINDEX PROMPT="Enter your numbers. The format is: <DIR> <LI> </DIR> where each item is specified using <LI>. The default search prompt often varied from browser to browser and wasn't relevant to what the author wanted you to enter into the field. The LINK tag is placed in the HEAD section of the HTML document. <DIR> The DIR element is similar to the UL (Unordered List) element. ISINDEX. Gilson relative URL's won't work otherwise. use a FORM instead. The ISINDEX tag was popular for simple searches using HTML and CGI scripts.

or overview of the website. REL="glossary" indicates the location of a glossary of terms for the website. REL="copyright" indicates the location of the page with copyright information for the site. For example. BASE. A click on the tool bar or button would load the home page. REV The most common use of the LINK tag is the following which indicates the author of the document: <LINK REV="made" HREF="mailto:jbes@bfree. HREF whose value is the URL of the other document. REL="index" indicates the location of the index which does not have to be the same as the table of contents. the LINK tag can be used to indicate the relationship between the current document and another document. copyright. <LINK REL="home" HREF="URL of home page"> indicates the location of the current website's home page. the browser can automatically generate tool bars or button bars in the window header or elsewhere that link to those documents. 3. LINK. For this role. next. Let's take a brief look at the first two attributes beginning with the REV attribute. LINK has three attributes: 1. we have: REL="toc" indicates the location of the table of contents.html tutorials in web page design by J. such as REL values of home.on. etc. such as LYNX. 2. The values of the REL and REV attributes are varied.ca"> where the value of HREF is the mailto: command containing the e-mail address of the author.INTRODUCTION TO HTML . can use this statement to send comments to the author of the HTML document REL Another use of LINK is to create tool bars for common elements of documents. a large form to fill in). By using these values.which can be useful if the website is complex or if the current document requires additional explanations (for example. Gilson In site maintenance. ISINDEX. The index could be alphabetical for example. REL="help" indicates the location of a help file for the website . REL which defines the RELationship between the current document and another document. REV which defines a REVerse relationship between another document and the current document. Some browsers. Similarly. stylesheet. MENU and META TAGS 193 . previous. DIR.

Wait 10 seconds and you will automatically be taken to my new URL called "index.htm">click here to go there now. REL="next" indicates the location of the next document in the series relative to the current document. URL=index. REL="previous" indicates the location of the previous document in a series relative to the current document. DIR. Not all browsers make this distinction and some will print the list items without bullets. It allows the current HTML document to use an external style sheet. <MENU> is also seldom used and most HTML books do not mention this tag. Style sheets are a new way to easily and effectively customize web pages in ways that were not possible before.html tutorials in web page design by J. The following is an example of a page jump where the visitor is automatically sent to another page without having to do anything. the browser would of course load the old page and the old page will load the new page. The format is: <MENU> <LI> </MENU> MENU puts the enclosed items marked with <LI> in a menu list. As with the <DIR> element described above. The list items should be displayed in a more compact form. <META> The META tag is used to automatically move the visitor from one web page to another (a page jump).htm"> </HEAD> <BODY> This URL has moved. Please see the section on the STYLE tag for a little more information on style sheets. If you had bookmarked the old URL. Gilson REL="up" indicates the location of the document which is up one level from the current document. To see how this works. SWITCH to NOTEPAD and type in the following HTML document exactly as you see it: <HTML> <HEAD> <META HTTP-EQUIV="refresh" CONTENT="10. You are then expected to bookmark the new URL. MENU and META TAGS 194 .INTRODUCTION TO HTML .htm" or <A HREF="index.</A> </BODY> </HTML> BASE. This situation often occurs when a web page has been moved to another address (a new URL). <MENU> The MENU element produces a list like <UL> (a bulleted list). LINK. ISINDEX. For example. You can even use it to create a web slide show. Still another use of the LINK attribute is in style sheets. REL="stylesheet" points to an external style sheet.

web page design. the TITLE tag is the most important tag as all search engines recognize this tag and will utilize the information found in it. load the document and observe what happens (assuming that you are still on-line or that "index. ISINDEX. Other META tags can follow the Description META tag.htm"). Note that if you don't click on the instructional words. Make sure you use a display time that is long enough for your page to appear on the screen and be read by the visitor. The Keywords META tag is a little less important than the TITLE tag but a little more important than the Description META tag. Note the order of these tags. In an actual situation. This use of the META tag works in all browsers. Five seconds may be long enough.) because then the visitor will not be able to go "back" with his BACK button. html 4. is used to give a description of your web page or of your website to the search engines. <HEAD> <TITLE>html tutorials in web page design</TITLE> <META NAME="Keywords" CONTENT="html tutorials. If you want to see some other META tags you can go to my home page and choose "Source" or "Document Source" from the "View" menu. They have been placed in order from the most important to the least important. Gilson Now save this HTML document using a suitable name (if you can't think of one. Here are two META tags as found on my home page in relation to the HEAD and TITLE tags. located in the HEAD section. 4.INTRODUCTION TO HTML ."> </HEAD> <BODY> Note that each META tag is given with NAME and CONTENT attributes along with their values. This META tag is often called "meta refresh" which causes the document given in the URL to be loaded after a specified number of seconds as stated in the value of the CONTENT attribute (10 seconds in the above example). 2.2.html tutorials in web page design by J. | top | | bottom | BASE. html 3. "click here to go there now". LINK.0.0"> <META NAME="Description" CONTENT="HTML tutorials and lessons in web page design. html help. html lessons. 3. MENU and META TAGS 195 . the document called "index. It is also used to pass on your website's keywords to these search engines (such as "Alta Vista" and "Infoseek"). html 3. Do not use a display time of "zero" seconds (CONTENT="0. use "jump. Note: 1. Then SWITCH back to your browser.htm" will automatically load after 10 seconds (which could actually be longer depending on the speed of your browser and the busyness of the server you are accessing).htm" (which is my home page) is in your working directory). This tag. In other words. DIR. you may not want the visitor to wait 10 seconds. You can create a series of links to show a portfolio or a series of images without having to create a lot of links and buttons by placing a META tag on each of those pages. Design your own website with over 30 easy to follow interactive html tutorials in web page design. ANOTHER USE FOR THE META TAG The META tag is especially very important to include in your HTML document if you plan to submit the URL to the search engines. As soon as he is back to the page with the "refresh" he will be redirected to the page he is trying to get away from. All this submitted information is called meta information.

APPLET. middle. use the format: <APPLET CODE="applet. much as an image can be included. Other classes for this applet will be searched at the location indicated in CODEBASE. These applets are written in a language called Java and can be included in an HTML document. it will simply ignore the tag. So always provide alternate text so that your visitors get something when they can't see the applet. Thus you can use the same attributes with the APPLET tag as you can with the IMG tag except for SRC and attributes that deal with image maps. Note that the location (URL) of the applet is indicated with CODE instead of SRC. Since this clock is an image (a picture). PARAM. SCRIPT.INTRODUCTION TO HTML . right. Gilson APPLET. it can be treated as an image. the applet's code is transferred and executed by the browser.class" WIDTH="150" HEIGHT="125"></APPLET> This statement tells the browser to load the applet whose compiled code is named "clock. DFN.html tutorials in web page design by J. Note that the extension for an applet is .2 and have not been discussed in previous lessons. The only attributes that must be included are CODE. WIDTH and HEIGHT. • ALT to specify the text to be displayed by browsers that recognize the APPLET tag but cannot run Java applets. <APPLET> AND <PARAM> TAGS <APPLET> The APPLET element is used to set up a Java applet. The APPLET attributes give the browser information about the applet. SCRIPT. STRIKE and STYLE TAGS These tags are new to HTML 3. Here are the attributes that can be used with the APPLET tag: • ALIGN with values left. STRIKE and STYLE TAGS 196 .class" WIDTH="100" HEIGHT="150"></APPLET> where "applet. center. calculators. Not all browsers support Java and those that do often allow the user to disable it. To insert an applet. DFN. or bottom as in: ALIGN="center". Java applets are little applications (hence the term applets) to create special effects and interactive events on your web pages such as led signs.class" located in the same directory as the current HTML document and to set the size of the applet to 150 pixels wide and 125 pixels high.class. DIV. the directory that contains the applet's code (similar to the BASE element for HTML documents).class" is the name of the applet and the WIDTH and HEIGHT attributes specify the size of the applet. conversion tables and a host of other interactive events. When you use a Java compatible browser to view a web page that contains a Java applet. PARAM. For example. top. that is. There are many books devoted entirely to Java so I will only show you how to insert applets on your web page once you have written them or copied them from another source. Thus for the applet clock we could have something like: <APPLET CODE="clock. If a browser doesn't recognize the APPLET tag at all. clocks. • CODEBASE to specify the base URL of the applet. • CODE to specify the name (location) of the Java applet (instead of SRC). Suppose the applet is a clock that will be placed on your web page. DIV.

in case there is more than one instance of the same applet on the page. You can do this with alternate text between the <PARAM> and </APPLET> tags as in (I have also included the ALT attribute in this example): Biorhythm Estimator <APPLET CODE="Biorhythm. As stated above with the ALT attribute. it would be good to let the viewer know this. DIV. it will simply ignore the tag. STRIKE and STYLE TAGS 197 .class and to set the size of the applet at 400x350 pixels. if a browser understands (that is.class" WIDTH="550" HEIGHT="220"> <PARAM NAME="Copyright" VALUE="name of person and e-mail address"> <PARAM NAME="BeginDate" VALUE="10"> <PARAM NAME="EndDate" VALUE="20"> <PARAM NAME="BackGroundColor" VALUE="#ffffff"> </APPLET> The names and values are case sensitive so be sure you write the parameters in the correct case. PARAM. here is an example of an APPLET element that works out your biorhythm that involves passing on parameters to the applet such as your birth date and other information. This makes it possible for applets on the same page to communicate with each other. you APPLET. Now if a browser does not recognize the APPLET tag.html tutorials in web page design by J. Now if the CODEBASE attribute is not used.htmltutorials.> <PARAM NAME="Copyright" VALUE="name of person and e-mail address"> <PARAM NAME="BeginDate" VALUE="10"> <PARAM NAME="EndDate" VALUE="20"> <PARAM NAME="BackGroundColor" VALUE="#ffffff"> <HR>Your browser is completely ignoring the APPLET tag! If you were using a Java enabled browser. • HEIGHT to specify the height of the applet either in pixels or as a percent of the screen. SCRIPT. recognizes) the APPLET tag but can't run the Java applet for some reason.class" WIDTH="400" HEIGHT="350"> tells the browser to load the applet whose compiled code is at the URL http://www. • NAME to specify the name of the applet instance .INTRODUCTION TO HTML . it will display the text found in the ALT attribute and if the browser can't understand the APPLET tag at all. These arguments then take the form: <PARAM NAME="name of argument" VALUE="value of argument"> For example.htmltutorials.class" WIDTH="550" HEIGHT="220" ALT="Your browser understands the APPLET tag but for some reason isn't running the applet.ca/applets/biorhythm. then the document's URL is used. Gilson <APPLET CODEBASE="http://www. The actual compiled applet code that works everything out would be stored on the server in the same directory as the HTML document containing these statements: Biorhythm Estimator <APPLET CODE="Biorhythm. then they are done as NAME/VALUE pairs in a PARAM tag located between the opening and closing APPLET tags. • VSPACE to specify the top and bottom margins of the outside of the applet in pixels. • WIDTH to specify the width of the applet either in pixels or as a percent of the screen. • HSPACE to specify the left and right margins of the outside of the applet in pixels. <PARAM> If there are parameters that need to be passed on as arguments to the applet.ca/applets/" CODE="biorhythm. DFN.

Here is the HTML coding for this statement: An <DFN>Absolute URL</DFN> shows the entire path to the file.2. DFN. CITE. <DFN> DFN stands for DeFiNition. You make the desired change and then compile the new class file with the Java Compiler that is part of JDK. RIGHT and CENTER. However these tags are all HTML 2. DIV. the server name. KBD. CODE. You can also download a Java Development Kit (JDK) from this same "javasoft" website. you can only use it to set the default alignment for all enclosed block elements. just go to your favorite search engine and do a search for Java applets. For other sites. Here is one interesting website to visit: http://www. you can specify left. PARAM. Gilson would see the Biorhythm Estimator Chart instead of these two sentences.<HR> </APPLET> There are many places on the web where you can download freeware Java applets and also get more information on Java applets. etc. including the protocol. instead of: <DIV ALIGN="CENTER"> use <CENTER> as they are considered identical. It is a logical tag used to define or markup a term when the term is used for the first time. That is. <CENTER> is shorthand for <DIV ALIGN="CENTER"> and the CENTER element is more widely supported.). the complete path and the file name itself.javasoft. That is. SAMP. the complete path and the file name itself. <DIV> The DIV container element is used to mark up divisions in a document. With HTML 3. STRIKE and STYLE TAGS 198 . Even if you do not know how to write Java applets. This tag could have been grouped with the other logical tags from Lesson Seventeen (ADDRESS. DFN usually renders the term in italics so the visitor can see that this is where the term is used for the first time. Here is the DFN tag at work. <DIV ALIGN="CENTER">).html tutorials in web page design by J. right and centered alignments (for example. including the protocol. However.com/. VAR. you can still use JDK to make minor changes to existing applets.0 tags while DFN is not. The text is formatted to look like a definition. the server name.2.INTRODUCTION TO HTML . However. An Absolute URL shows the entire path to the file. If you see no difference then your browser does not support this tag. It takes the attribute ALIGN with values LEFT. DFN was added to HTML 3. just like with other block elements such as <P> or a header tag such as <H1>. SCRIPT. not all browsers recognize this element and those that do not will simply ignore the tag. It is available for both MAC and Windows. APPLET.

support for it is not universal.2.. <SCRIPT> The SCRIPT element is used for inline scripts.INTRODUCTION TO HTML . Style sheets are a new way to customize web pages in ways that were not possible before. Style sheets make it easy to give all of your web pages a common look. There are two attributes that can be used with the SCRIPT element. Note that not all browsers support the SCRIPT element. you would be better to do it as an image. Those that do not will not hide the tag's contents. it is used to contain scripts. Therefore. This will also ensure "backward compatibility" with older browsers. APPLET. This tag is placed in the HEAD section of an HTML document and the format is: <SCRIPT attribute> . colors. There is also a NOSCRIPT element. you are able to specify fonts.. PARAM.. If you absolutely require strike-through text. <STRIKE> The STRIKE element tells the browser to display the enclosed text in a strike-through appearance. That is. however. STRIKE and STYLE TAGS 199 . In HTML 3. They are LANGUAGE and SRC as in: <SCRIPT LANGUAGE="name of language" SRC="location of file containing script"> where the "name of language" specifies a language such as "JavaScript" or "VBScript" and where the value of the SRC attribute specifies the location of the file containing the script. Strike-through text is normally used to show revisions to text. DIV. With style sheets. if you need a script in your document. </SCRIPT> The SCRIPT element should contain a valid script such as a JavaScript. <STRIKE>This text will be striked if your browser supports the strike tag. Gilson You can also enclose the entire definition between the opening and closing DFN tags. SCRIPT. -->) so they will remain hidden. you can use <S> and </S> instead of <STRIKE> and </STRIKE>. <STYLE> The STYLE tag is used in style sheets. nothing is done with the text (script) inside this element (that is. 31 and 32 are devoted to designing web pages using style sheets. That is.. margins and many other features to gain precise control over your presentation. The opening (<NOSCRIPT>) and closing (</NOSCRIPT>) NOSCRIPT tags are placed between the opening and closing SCRIPT tags.. Usually this is done with a line through the middle of the text. You should see newer versions of HTML include support for inline scripts such as the browser executing the enclosed scripting language.</STRIKE> All browsers accept the short form "S" in place of "STRIKE". Since this tag is new. The SRC attribute can be used if you don't want the code to be in the same HTML document. the script is simply hidden between these tags). script statements .html tutorials in web page design by J. put them inside HTML comment tags (<!-. My Lessons 30... It is used to enclose anything you want displayed by browsers that do not support inline scripts. DFN.

ca PRINTING THIS LESSON 200 . you can always go back to this actual lesson. 2. You can save money by going for compatible ink cartridges which also lowers impact on nature by reducing waste. please report it to htmltutorials@bfree. Load your word processor such as Microsoft Word and from the Edit menu. If your printer refuses to print the lesson.on.Copy the lesson into your word processor and print it from your word processor. while other printers do print the lesson. | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Twenty | The information contained in these free 21 lessons is Copyright ©.INTRODUCTION TO HTML . Note: The links may not print but that should be okay. Print the lesson from your word processor. The tag that is causing the problem can vary depending on the printer. 4. Brantford Educational Services. That is. It is therefore illegal to copy these lessons into another website. From the Edit menu in your browser. Then from the Edit menu. 1997 .: 1.2009 by local and international copyright laws. choose Paste (or click on the Paste button). If you find a copyright violation. 3. All rights reserved. choose Copy. choose Select All to highlight this entire lesson. One of the tags in this lesson is causing the problem. It seems that the printer is trying to execute the tag which is causing the error. There is nothing wrong with the lesson itself. If you want to try a link. It just that some printers won't print the lesson. I would suggest you try the following method . Gilson | top | | bottom | PRINTING THIS LESSON This lesson contains a lot of tags and so every once in awhile I get an email from someone who is experiencing problems printing this lesson.html tutorials in web page design by J.

Summary | INTRODUCTION TO IMAGE MAPS What is an image map? An image map is an active clickable image that loads different web pages depending on what part of the image is clicked. Image maps can provide an aesthetically pleasing alternative to cluttered pages. click on the BACK button to return to this page. the URL changes to the URL of the new region. This is especially useful if you have a website with a lot of images and you do not want to slow down the loading of pages over slow connections. the image is divided into regions or areas with each region or area linked to a different URL. 3. image maps are interpreted by the visitor's browser and not by your web server. Thus when a visitor (a client) clicks on the image. 2. Now take a moment and click in the various areas to see the different web pages load.IMAGE MAPS 201 . The image map allows you to use a single image to provide links to a number of different URLs. notice the URL on the Status bar at the bottom of the browser window and notice that as you go into another region. the links in the image map are also repeated somewhere on the web page as text links as in: LESSON TWENTY . So the visitor's browser does all the work. | Introduction to Image Maps | | Creating our first Image Map | | Creating our second Image Map | | Download Paint Shop Pro and Mapedit | | Using Mapedit to create an Image Map | | Using Paint Shop Pro to create an Image Map | | Overlapping Hot Spots . the browser processes the coordinates of the clicked point without any interaction with your web server. Some web designers also include alternative text links. Image maps provide an alternative to loading a page containing several linked images. ADVANTAGES OF USING IMAGE MAPS 1. That is. With image maps. you place all the necessary data to run the map in your HTML document.IMAGE MAPS You may read the following sections in their entirety or use these choices to go directly to a section. This is one image that has been divided into four areas with each area linking to a different page on my website. Thus an image map is an image on a web page that contains hotspots. Thus an image map links the various areas of an image with a series of URLs. In an image map.html tutorials in web page design by J. Gilson LESSON TWENTY . When you visit a link. That is. 4. These regions or areas are also called hotspots.INTRODUCTION TO HTML . here is a simple menu I created in Paint Shop Pro. For example. Image maps work independently of your web server. As you move the mouse pointer over any of the four areas.

gif" WIDTH="400" HEIGHT="25" BORDER="0" USEMAP="#menuline" ALT="Image Map"></P> Discussion: 1. The # indicates an internal link on the same page much like that of a page jump (Lesson Six). it is assumed that the image is located in the same folder as the HTML document. These include non-graphical browsers such as Lynx as well as browsers who have had their images turned off. The name of the image is map1. The map file contains all the necessary data to run the image map. The first part of this statement (<P ALIGN="center">) centers the image using a paragraph tag. You may wish to include a border around the image. Thus when the visitor clicks on the image. These areas are defined by coordinates.htm">Introduction</A> | You may wish to include text links for browsers that do not display images. 2.INTRODUCTION TO HTML . The attribute USEMAP tells the browser that this is an image map defined under the name menuline. Here are the statements that give this image map. USEMAP="#menuline" tells the browser to go to the map file named menuline to determine the required links and hotspots. Thus USEMAP="#menuline" is different from USEMAP="#Menuline". This was just a personal choice.gif. You can have any number of image maps in the same HTML document as each image map will have its own unique name. Note the </P> at the end of the statement to indicate that the paragraph ends and the centering is turned off. Gilson | <A HREF="index. First we have the image tag which is: <P ALIGN="center"><IMG SRC="map1. 4. Here are the lines for the map file named menuline with a discussion to follow: INTRODUCTION TO IMAGE MAPS 202 . The width of the image is 400 pixels and the height is 25 pixels. The USEMAP attribute tells the browser which image map file to use for the image. | top | | bottom | CREATING OUR FIRST IMAGE MAP We will now study our first image map and we will do it with the above image. 3. Note that the name is case sensitive. This invisible map breaks the image down into areas (also called regions or hotspots) and assigns a link to each area. There is no border around the image (BORDER="0"). Thus USEMAP="#menuline" tells the browser to USE the MAP file named menuline located somewhere in this HTML document. You can think of an image map having basically two parts . Here again is the image.(1) the image itself and (2) an invisible map placed over the image. Because of the absence of a path to the image. 5. This example uses the image map file named menuline. We must associate a name with the map file and the name you choose is up to you.htm">Home Page</A> | <A HREF="intro.html tutorials in web page design by J.

each hot zone is defined with an AREA tag.namely 0. The first pair of coordinates represents the top left corner of the rectangular region and the second pair represents the bottom right corner of the rectangle.400. such as with 100.24" HREF="index. The MAP element has one attribute which is the NAME attribute. Note that the # symbol is not required here. the "0.0.100. Gilson <BODY> <MAP NAME="menuline"> <AREA SHAPE="rect" COORDS="0. Just make sure to include the complete URL of the web page you are linking to.0 and 100. 2.0. the browser will load my home page which is called index.24" HREF="lesson21.htm.htm"> <AREA SHAPE="rect" COORDS="101.24" breaks down into two pairs of coordinates . Note that this map file contains a number of AREA tags which are located between the opening and closing MAP tags. The HREF attribute specifies the URL that the hotspot points to.htm"> <AREA SHAPE="rect" COORDS="201.0. Note that the SHAPE of each region or hotspot is that of a RECTANGLE.INTRODUCTION TO HTML . 7. All the information on the hotspots in the image is found here.24. CREATING OUR FIRST IMAGE MAP 203 .html tutorials in web page design by J. Note that MAP is a container element in that everything between the opening and closing MAP tags is part of the map file.200.100. The map file and the image itself are two separate and distinct objects which combine to produce an effect. 9. the value of the NAME attribute is menuline (NAME="menuline") which matches the name in the IMG tag. In our example.24" HREF="intro. 8. Therefore you should place the map file in the same HTML document as the image tag that references the map. I will explain later how these numbers in the COORDS attribute were derived. The above coordinates in our map file can be broken down as follows: Note that for <AREA SHAPE="rect" COORDS="0. As we will learn in the next section.htm"> </MAP> 1. the first number (100) represent the horizontal distance in pixels from the left side of the image and the second number (24) represents the vertical distance in pixels from the top of the image.24" HREF="index. The MAP element provides ALL the image map data.24" HREF="topics. Having the image map data for an image map in a completely separate HTML file is not supported by Netscape and Firefox and possibly by other browsers as well.0. 4.two pairs of coordinates. SHAPE="rect" could also be written as SHAPE="rectangle". That's all it takes to define a rectangular region .htm"> <AREA SHAPE="rect" COORDS="301.htm">.0. You can of course link to a web page located anywhere on the World Wide Web.0. In other words. The AREA tag is also used to define the SHAPE of the region or hotspot. I placed the MAP element right after the opening BODY tag but it can be placed anywhere in the BODY of the HTML document. The COORDS attribute defines the coordinates of the shape. 3.24. Recall that our image has four regions or areas and that is why there are four AREA tags. the shape can also be a circle or a polygon. 6. Thus if the visitor clicks in the first hotspot. With any pair of coordinates.100. 5.300.

y=24". It is only there for the user to see and use as a guide. The following section deals with all the possible shapes for an image map. save this image without the image map.y2" where x1. There are also image map making software that will do all the work for you in creating an image map and we will get into that later in this lesson.24. Please take a moment to test CREATING OUR FIRST IMAGE MAP 204 . It is the map that is laying on top of the image that is used by the browser . With Paint Shop Pro.cnn.70 and 115.com/ and if the hotspot is a rectangle defined by 25. Here is the image without the image map: Now load the image into your paint program. Note that coordinates for any hotspot is based on the fact that the top left corner of any image is defined to be 0. the circle.y1 is the top left corner point of the rectangle and x2. If you think back to the Mathematics classroom. Now where do these coordinates come from? I got them from Paint Shop Pro but you can get them from any paint program.html tutorials in web page design by J.24" However. The rectangle is not the only shape involved in image maps.INTRODUCTION TO HTML . Gilson Note that ALL the numbers in the COORDS attribute are separated with commas (. Thus a rectangular hotspot is defined as COORDS="x1. Thus what the MAP element does is lay a point graph (a map) over the image.0 100.135 what would be the AREA tag? | Click here to go to the answer section | | top | | bottom | CREATING OUR SECOND IMAGE MAP Here is our second image map. the World Wide Web Consortium (the W3C) recommends using commas for separators.). Note that it has four regions or hotspots: The triangle (which is classified as a polygon). if you have a paint program.x2. y=0 to x=200. points on a graph are often written in the form (x. the rectangle and the yellow area around these three shapes.y2 is the bottom right corner point of the rectangle. If you do not have a paint program. For example. I have also seen pairs of coordinates separated with a space as in: COORDS="0.0. Problem 1: If the URL for CNN is www. by choosing "Download Paint Shop Pro and Mapedit" from the links at the very top of this page. when you move the mouse pointer over the image you can see the coordinates changing on the status bar at the bottom of the screen.y1. The image is there for the visual. The map is simply a grid of points. Thus you can translate the COORDS attribute for the second region or hotspot as "The rectangle goes from x=101. I simply recorded these numbers and entered them in the AREA tag.y) where x represents the horizontal distance from the center (or origin) and y represents the vertical distance from the center. Note that the top left corner is 0.0 and that the bottom right corner of the first hotspot is around 100.thus the name IMAGE MAP. you can download your own copy of Paint Shop Pro.

The first pair of coordinates specifies the top left corner of the rectangle and the second pair specifies the bottom right corner of the rectangle. Gilson this image map by clicking into the four regions. this image map contains different shaped areas or hotspots. 1. rect .htm"> <AREA SHAPE="circle" COORDS="67.13" HREF="index.108).27.INTRODUCTION TO HTML .htm"> <AREA SHAPE="rect" COORDS="0.gif" WIDTH="200" HEIGHT="150" BORDER="0" USEMAP="#shapes" ALT="Image Map"> Problem 2: What is the name of the image? Problem 3: What did I name the image map? | Click here to go to the answer section | Here is the image map file for the above map3. Two pairs of coordinates are needed to specify a rectangle (in our red rectangle they are 129. Here is a summary of the various shapes allowed in an image map.htm"> <AREA SHAPE="rect" COORDS="129. I got these coordinates by loading the image into Paint Shop Pro and then recording the mouse pointer positions in the top left and bottom right corners of the CREATING OUR SECOND IMAGE MAP 205 .62.175.0.16.htm"> </MAP> Here is another look at the image map with the coordinates marked on the image: As stated above.html tutorials in web page design by J.34" HREF="intro.35.72. Here first is the IMG tag: <IMG SRC="map3.13.gif image: <MAP NAME="shapes"> <AREA SHAPE="poly" COORDS="16.28.rectangle.150" HREF="topics.108" HREF="lesson21.97.200. We have already studied this one so here is a brief summary.28 and 175.

35.62 which is connected to the third point 72. 2. The one in the above image has three sides and is called a triangle.xn. then my Home Page will load. . the rectangle.97 and the radius is 34 pixels. In our example.72. Thus if two or more hotspots overlap. that is.x2. the visitor did not click in the triangle.y1 where xn. Note that my first point 16.INTRODUCTION TO HTML .16. circle and polygon for the SHAPE attribute or you can use their abbreviations rect. as shown in the above image. the first AREA tag listed is: <AREA SHAPE="poly" COORDS="16. the visitor clicked in the triangle. the browser will then check the next AREA tag listed which is: <AREA SHAPE="circle" COORDS="67.27.A circle is defined by its center and its distance from the center to any point on the circumference of the circle (called the radius of the circle).htm"> CREATING OUR SECOND IMAGE MAP 206 . A polygon is a figure that can have any number of sides..yn. If the answer is "no". It is used to indicate what should happen if the user selects a region which is not defined in any of the other AREA tags. THE DEFAULT AREA OF AN IMAGE Our "shapes" image has four hotspots: the triangle. Here is how it all works with our example. You can use the full words rectangle.html tutorials in web page design by J.htm"> Discussion: The default area should only be used once in a map file and must be the last AREA tag listed. In general. Gilson rectangle.97.0. Hotspots are checked in the order they appear in the map file and the URL corresponding to the first match is returned..35.htm"> This AREA tags represent the polygon area of the image (which is our triangle). .y1. Our default area loads my web page that gives a list of all topics studied in these lessons (topics. They are all connected in order with the last pair of coordinates in the list equaling the first pair of coordinates.16.34" HREF="intro.13. In our MAP file.150" HREF="topics. This way there are no openings in the polygon. the browser will first check to see if the coordinates of the clicked point fall within the area defined by this polygon.x1.34 means that the center of the circle is located at 67.200.97.x3. the hotspot defined first in the map file takes precedence over subsequent hotspots. Again I got these numbers in Paint Shop Pro by doing my best to pinpoint the center of the circle with the mouse pointer and recording the numbers from the status bar at the bottom of the screen. the circle and the default area around these shapes. I then subtracted the horizontal distances (the x's) to find the radius (r=67-33=34). that is.72.13. The first and last points must be the same. To find the radius.13.y3.13. Thus in our example 67. I could have drawn a four sided figure (a quadrilateral) or a five sided figure (a pentagon).62. by a list of coordinates connected in order. the coordinates that make up the triangle are 16.htm). circle .27. the coordinates of a polygon have the form x1. If the answer is "yes". In our example.polygon. When a visitor clicks on the image.13 in the triangle is connected to the second point 35. the default area is defined by: <AREA SHAPE="rect" COORDS="0. The important thing to know is that a polygon is built up by a list of adjacent vertices . I first recorded the coordinates of a point on the circle (33.13" HREF="index.62. 3. 4.yn is the last point in the polygon which is then connected back to the first point. circ and poly.that is.97) that was on the same horizontal line as the center. This is much like a game of connecting the dots where all the dots are connected in order and last dot is connected to the first dot. poly . etc.27 which is connected to the first point 16.y2.

If the answer is "no".htm"> Problem 4: If the center of a circle is 30. This means in our example. This means that the default area (topics. the default area or hotspot does not have any coordinates. With this method. Note: Instead of the above AREA tag for the default area. If the answer is "no".150" HREF="topics. it must lie in the default area of the image. There is a problem with using SHAPE="default" that you should be aware of. but some older versions of Internet Explorer do not recognize the default value. For this reason. the values are interpreted as percentages of the image's width and height respectively. Any paint program will give the size of the image which is then also used for the WIDTH and HEIGHT attributes in the IMG tag (<IMG SRC="map3. The coordinates from 0. The default value for the SHAPE attribute works fine in Netscape and Firefox. my JavaScript lesson will load.150 represents the full size of the image which covers all the default areas. Gilson The browser now checks to see if the coordinates of the clicked point matches the area defined by our circle.0.0. If the answer is "yes".0 to 200. If the AREA tag is: <AREA SHAPE="rect" COORDS="0.htm in our example) will not load in those browsers.htm"> This AREA tag represents the rest of the image since the triangle.175. many image map software (including Mapedit and Paint Shop Pro which we will use later in this lesson) will give the following for the default area: <AREA SHAPE="default" HREF="topics.gif" WIDTH="200" HEIGHT="150" BORDER="0" USEMAP="#shapes" ALT="Image Map">).html tutorials in web page design by J. the browser then checks the next AREA tag which is the red rectangle defined by: <AREA SHAPE="rect" COORDS="129. circle and rectangle were already checked.200. my introduction page is loaded.108" HREF="lesson21.100%"> how would the browser interpret this statement? | Click here to go to the answer section | | top | | bottom | CREATING OUR SECOND IMAGE MAP 207 .50%. if you require a default URL it is best to do it using the SHAPE="rect" as in: <AREA SHAPE="rect" COORDS="0.INTRODUCTION TO HTML . Note that in this statement. then the next AREA tag is checked which is: <AREA SHAPE="rect" COORDS="0.28.65. then "topics. what would be the COORDS attribute in the AREA tag? Problem 5: It is acceptable to use percentages instead of pixels in the COORDS attribute. that if the coordinates do not fall within the first three AREA tags. Remember that the default area must be the last AREA tag in the list of AREA tags as the other hotspots need to take precedence over it.0.htm"> Again if the answer is "yes".htm" is to be loaded.150" HREF="topics.200.htm"> This statement tells the browser that any area in the image not defined in earlier AREA tags is considered to be the default area and if the visitor clicks anywhere in this default area.65 and one point on the circle is 120.

Gilson DOWNLOAD PAINT SHOP PRO AND MAPEDIT There are a number of paint programs to choose from. It is a small program so it will not take very long to download. Two of the more popular ones are Corel Paint Shop Pro Photo and Adobe Photoshop. Mapedit will update the HTML document for you by adding all the necessary tags and attributes. Mapedit | top | | bottom | USING MAPEDIT TO CREATE AN IMAGE MAP The following search engine panel example came with permission from an internet company called Connpad.html tutorials in web page design by J. In other words. you can download one by clicking on the following link: Paint Shop Pro If you do not want to come up with all the image map coordinates yourself. Let's first create an HTML document that displays the image that we want to turn into an image map. you can click into the various regions to see the image map at work. If you are connected to the internet. you will need Mapedit which you can obtain by clicking on the following link. Two popular ones are Mapedit from Boutell. they have since ceased to exist and so the link in the circle will not display the Connpad website and will instead display my home page. We will now use Mapedit to create the above image map. This lesson uses Corel Paint Shop Pro Photo X2 (version 12) and if you do not have a copy. to do the next section. We will first create an image map with Mapedit and then we will create an image map with Paint Shop Pro. However. This way Mapedit can update the image tag by adding the USEMAP attribute and also insert the Map element with all the AREA tags. let's first create an HTML document according to the following steps: 1. So.INTRODUCTION TO HTML .Com and Corel's own Paint Shop Pro Photo. Please SWITCH to your text editor such as NotePad and enter the following: <HTML> <HEAD> <TITLE>Links to Search Engines</TITLE> DOWNLOAD PAINT SHOP PRO AND MAPEDIT 208 . there are a number of image map making programs to choose from. So before we open Mapedit. You can try these programs for 30 days after a decision to purchase must be made.

gif is now displayed in the Mapedit window.gif) are in the same folder. Note: The image can be either a gif image or a jpeg (jpg) image. 4. 2. if you have an oval shape or a curved end in your image. Choose the Save picture or image option to save the image. We are now ready to create our image map. Gilson </HEAD> <BODY> Please choose from among the following Search Engines or click on the circle to visit my home page.which means that the hotspot will extend a little beyond the curvature but that is okay. They are . Once the HTML document (engines. simply place a rectangle around the shape as shown below in the Yahoo hotspot . You may have been wondering why the W3C did not include oval shapes with the other shapes because often ovals and curved ends look nicer than rectangles. Next. 6. Here is the image again. Mapedit will insert into this engines.htm. There are three tools located in the Toolbar for drawing the shapes to create the hotspots. However.htm. the oval shape is also known to create problems in browsers and it is therefore recommended that you not choose that option. 3. 7. Note in the picture below that the left end of the Yahoo hotspot is rounded.html tutorials in web page design by J. <P ALIGN="center"><IMG SRC="toolpane. Click on the name engines. Now click on the rectangle tool to select it. Now save this HTML document naming it engines.INTRODUCTION TO HTML . Move the mouse pointer to the top left corner of the region for Yahoo and click once with the left mouse button and hold it down.htm) and the image (toolpane.gif. Choose Open A Web Page. Open Mapedit and soon the What Do You Want To Do? dialog window opens up. 5.htm and then click on Open. The middle one is used to create a circular hotspot and is called the Add Circles tool. You will use these three tools for drawing hotspots. The image toolpane.htm (or use any suitable name of your choosing). click with the right mouse button to display a drop-down menu.gif" WIDTH="440" HEIGHT="100" BORDER="0" ALT="Image Map"></P> </BODY> </HTML> 2. Let's first take care of the link to Yahoo. the USEMAP attribute and the MAP element. Browse to the folder where you saved the HTML document named engines. The first one (the one on the left) is used to create a rectangular hotspot and is called the Add Rectangles tool. USING MAPEDIT TO CREATE AN IMAGE MAP 209 . As you will see. this time without the image map: To save the image. Note that this document does not contain a MAP element and that the IMG tag does not contain the USEMAP attribute. save the image into the same folder as engines.htm document. 3. here are the steps involved to create the image map: 1. The third one is used to create an irregular shaped hotspot (a polygon shaped hotspot) and is called the Add Polygons tool. Instead. Some map imaging programs do include the oval shape as a forth choice. You may now wish to enlarge the Mapedit window by clicking on the little Maximize button in the top right corner of the Mapedit window. Use the same name toolpane.

you can leave this box blank.5).com/ USING MAPEDIT TO CREATE AN IMAGE MAP 210 . You can also type in the value blank to load the page into a new blank window. this feature of Netscape does not work reliably. type: Yahoo. instead of an image. If you need to move or resize the hotspot or move just one border in the rectangle. This will place a rectangle around the hotspot." 12. Then just click on the hotspot you want to edit. first click on the Test and Edit Hotspots button.go. you must enter the TITLE text separately. Mapedit states "When your page is viewed by a web browser that does not support graphics. If you choose to turn off that checkbox. Old versions of Netscape will display the ALT text as pop-up text (when the mouse pointer moves over the hotspot). 14.com/ For Lycos. In the Mouse-Over (TITLE) Text box. the user may also be presented with a menu of the text alternatives. If you make a mistake. This is a problem with the browser and it has nothing to do with Mapedit. just click any corner of the rectangle and drag the corner straight up or down. Release the mouse button and immediately the Object URL dialog window is displayed. Gilson 8. 17. or to the left or right. If your HTML document involves frames or if your HTML document is in a frame. Up-to-date versions of the popular Lynx browser support this feature. The next box reads: Target (For frames. Click in the top box labeled URL for clicks on this object and type the complete URL for Yahoo which is (do not add quotes or anything else): http://www. 15. Now drag the mouse pointer to the bottom right corner of the region so that the entire Yahoo region is enclosed with a rectangle as follows: 9." 13. ALT text is intended for non-graphics browsers. To move a border to a new position.html tutorials in web page design by J. 10. In the next box labeled Alternate (ALT) Text. will display the TITLE text as "pop-up" text when the mouse pointer moves over the hotspot. to select it. In the Help file.com/ 11. use http://www. We DO NOT RECOMMEND relying heavily on this feature to display ALT text as pop-up text. You can also drag a corner to enlarge or reduce the rectangle. such as Microsoft Internet Explorer 4. If you are not using frames.lycos. just click somewhere away from the hotspot.0 and up (but NOT including Netscape as of version 4. Leave the remaining boxes blank. .INTRODUCTION TO HTML . you should type the value top in the box as this will ensure Yahoo loading into a full body of the current window. just click on Cancel and both the Object URL window and the box around Yahoo will disappear and you can then try again.5 and later will automatically set the TITLE text to match the ALT text unless you choose to turn this feature off using the "Same As ALT" checkbox. Click on the + sign in the middle of the rectangle to move the entire hotspot region. leave the checkbox beside Same As ALT selected. However. use http://infoseek. It often fails to work if the user has to scroll the window and there may be other flaws as well.yahoo. Mapedit states that "some newer web browsers. usually left blank!). Click on OK and the dialog window disappears 16. To remove the rectangle around the hotspot after you are finished editing. Mapedit 2. Repeat the above process by placing a rectangle around each search engine's hotspot and use the following URLs (you can add the appropriate "Alternative text"): For Infoseek. Mapedit will place this in the ALT attribute as the alternative text for this part of the image map.

Because we have not specified anything for the default URL. . You may have also used different alternative text for the ALT attributes. If you want a default URL.htm as changes were made to the document. Click on the Test and Edit Hotspots tool and then double-click anywhere in the default region.com/ 18. Mapedit will assume that we want no default URL and will insert the appropriate HTML coding for this (as you will see later). you can do so now. Our next step is to save our work. 2. use http://www. To see the image map in action. You then click on the hotspot you want to work with.altavista. Note that the image tag has been updated to include the USEMAP attribute with the value #toolpane and that the MAP file has been added.gif" WIDTH="440" HEIGHT="100" ALT="Image Map" usemap="#toolpane" style="border-style:none"></P> <div> USING MAPEDIT TO CREATE AN IMAGE MAP 211 . If you want to change the name of your document (engines. you can do it in one of two ways: 1. Now to see what Mapedit did to the document.com/ For Altavista.html tutorials in web page design by J. use http://www. When you are finished placing the rectangles and circle. 21. Your coordinates will likely be a little different due to the fact that we drew the rectangles and circle in approximate positions. Click on Save and a dialog window opens up warning you that the file already exists.htm now containing the USEMAP attribute and the MAP element will be saved. We haven't mentioned anything about the default area around our hotspots. Choose Yes to overwrite the file and the updated document named engines. Now click on the circle tool in the Toolbar (the middle tool) to place a circle around the circle in the lower right corner of the image (to the right of the words "search panel"). 22. re-load engines. the image should look like: 19. In our example. enter something like "Home Page" for the alternative text.hotbot. SWITCH to NotePad. When you are satisfied. 20.htmltutorials. The name of the HTML document (engines) has already been placed in the File name box. click on the Test and Edit Hotspots tool. release the left mouse button and the Object URL dialog window is displayed. from the Tools menu. if the visitor clicks outside any hotspot. The Default URL window opens up for you to enter the default URL. SWITCH to your browser. <P ALIGN="center"><IMG SRC="toolpane. The Default URL window opens up for you to enter the default URL. Choose Edit from the menu bar and then choose Edit Default URL.ca/ Next. we want nothing to happen.com/ For Excite. click once and hold down the mouse button. This is what mine looks like. Place the mouse pointer in the center of the circle. LOAD the file named engines.htm and test your image map. At any time you want to make changes or to check your work.INTRODUCTION TO HTML . Now drag the mouse pointer so that a circle is drawn around the circle. Choose Save As from the File menu and the Save As dialog window opens up. In the Object URL window enter in the URL box: http://www. Gilson For Hotbot. use http://www.htm) and/or the location of the document.excite. make sure you are connected to the internet since we are accessing various search engines.

ca/" title="Home Page" /> <area shape="default" nohref="nohref" alt="" /> </map> </div> Discussion on the above coding statements: 1.INTRODUCTION TO HTML . The same explanation is true for the id="toolpane". Problem 6: In the above AREA tags from Mapedit. It serves the same purpose as name="toolpane".43" href="http://infoseek. the latest W3C web standard and current version of HTML. You may have noticed all those forward slashes just before most of the greater than signs (/>).8. Thus you can also safely leave out the ID attribute. 2.com/" title="Altavista" /> <area shape="circle" alt="Home Page" coords="416. 3. It is of course easiest to include all the coding as generated by Mapedit as it also satisfies the latest HTML standards.52. If required. The DIV element can also be omitted without affecting the image map. a dialog window opens up asking What Do You Want To Do? For the above example. The other choice is Open An Image.com/" title="Lycos" /> <area shape="rect" alt="Hotbot" coords="328.com/" title="Excite" /> <area shape="rect" alt="Altavista" coords="111.17" href="http://www. This is to satisfy one of the rules of XHTML. since a number of browsers do not recognize the ID attribute.com/" title="Hotbot" /> <area shape="rect" alt="Excite" coords="4.com/" title="Yahoo" /> <area shape="rect" alt="Infoseek/Go" coords="111. However. 43 and 44 in my Additional Lessons. 6. just use the NOHREF attribute. XHTML is studied in detail in Lessons 42. 5. Thus if you have an area in your image map which is to do nothing. both attributes are included in the coding. Mapedit assumed that there would not be one as indicated by the attribute nohref. all the necessary coding will be in the web page.go. In fact. you can then copy and paste the coding into another USING MAPEDIT TO CREATE AN IMAGE MAP 212 .220. The style="border-style:none in the IMG tag is a Style Sheet statement that says that we did not choose a style for the border.lycos.excite. The nohref="nohref" indicates that the particular hotspot points to nothing.yahoo.52.225. 31 and 32 in my Additional Lessons.8. 4. It was added to satisfy the latest versions of XHTML. Style Sheets are studied in Lessons 30.110. If you choose this second option.8.86" href="http://www. Remember that only Netscape and Firefox recognize the "default" value for the SHAPE attribute (shape="default").86" href="http://www.43" href="http://www. You can leave out the forward slashes without affecting the image map. Note the last area tag. Internet Explorer does not recognize default as a value for SHAPE and so will ignore this AREA tag which is okay because we don't have a default URL anyway.hotbot.htmltutorials.altavista.110.433.43" href="http://www.8. you proceed in exactly the same way as above and when you save the web page. you chose Open A Web Page.70.43" href="http://www.327. Gilson <map id="toolpane" name="toolpane"> <area shape="rect" alt="Yahoo" coords="4.com/" title="Infoseek/Go" /> <area shape="rect" alt="Lycos" coords="221. you could leave out this AREA tag altogether and everything will still work as planned. It says: <area shape="default" nohref="nohref" alt="" /> Since we did not specify a default URL. what is the center and radius of the circle hotspot? | Click here to go to the answer section | Recall that when you open Mapedit.html tutorials in web page design by J.

INTRODUCTION TO HTML .htm For the Product Information rectangle it is 5. The hotspots are to take approximately the positions of the following outlined rectangles (the URLs and e-mail address do not exist as this is an example for illustration purposes only): 2.77 and the URL is product. There is to be no border around the image. The coordinates of the top left corner and bottom right corner for each rectangle and the URL to be used is given as follows: For the Home rectangle it is 21.gif 3.htm For the E-mail us rectangle it is 11. 5. | Click here to go to the answer section | USING PAINT SHOP PRO TO CREATE AN IMAGE MAP An image map in Paint Shop Pro is created with the Image Mapper.83 and 113. Include appropriate ALT and TITLE attributes. The name of the map file is to be business 6.139 and the e-mail address is business@bus.com 7. There is to be no default URL.31 and the URL is index2. The name of the image is to be menu. 8. If you wish. Here are the conditions: 1. 4.114 and 107. Gilson HTML document.html tutorials in web page design by J. Problem 7: What are ALL the HTML statements necessary to create an image map for the following image? The conditions are given below the image.4 and 96. Image Mapper does a great job in USING MAPEDIT TO CREATE AN IMAGE MAP 213 . The width of the image is 117 pixels and the height is 146 pixels and the image is to have no border. you can leave out any unnecessary tags.38 and 113.110 and the URL is order.htm For the Place Order rectangle it is 5. attributes and forward slashes.

Browse to the folder that contains the image. As you will see when you save the image. We will be using the same image that we used in the last section with Mapedit. Here is what you should have so far if you chose toolpane. From the File menu.INTRODUCTION TO HTML . 2.gif for the image: USING PAINT SHOP PRO TO CREATE AN IMAGE MAP 214 . choose Open.html tutorials in web page design by J. choose File --> Export --> Image Mapper. Gilson creating image maps. the name of the image is toolpane. If you want to follow along. Click on the image name and click on Open. The second step is to load into Paint Shop Pro the image that you just saved. or you can choose another image that you want to convert into an image map. We now need to open the Image Mapper program. The image should now be displayed in Paint Shop Pro. To do this. just choose a folder or create a new folder and save the above image to that folder. So open Paint Shop Pro. The Image Mapper dialog window opens up with your image in the Preview window.gif. Here is that image again: 1. 3.

. Let's now draw our first hotspot. squares or rectangles). you can click on the Mover tool and drag to the correct spot. This tool is used to delete a hotspot. This tool is used to create a rectangular or square hotspot. we have: 1.INTRODUCTION TO HTML . 4. The Pan tool allows me to move the image so that the right side of the image comes into view. Now drag the mouse pointer to the bottom right corner of the region so that the entire Yahoo region is enclosed with a rectangle as follows: If you make an error or want to start over. Then click on the hotspot you need to adjust. drag the hotspot to where you want it.com/ 4. The Rectangle tool. type: Yahoo. After you draw a hotspot you click on this tool to select the hotspot in order to assign a link and alt text to it. In the next box labeled Alt text. Draw a rectangle over the Yahoo hotspot. The Delete tool. This is done by the "click and drag" method. The Pan tool. The top left corner of the image is defined to be (0. . move the mouse pointer to the top left corner of the region for Yahoo. Next. Note that the x and y positions of the hotspot are displayed just below the Target box. The Circle tool. This tool allows you to move or reposition a hotspot. Gilson Just above the Cell Properties are seven tools for creating the image map. First click on the arrow key. . .0). you can do it with these nodes. click on the Arrow tool and in the URL box enter the URL for Yahoo which is: http://www.one at the top left corner and one at the bottom right corner. and then while holding down the mouse button. and click once and hold down the left mouse button.yahoo.html tutorials in web page design by J. The Polygon tool. Here are the steps: 1. Clicking on the Rectangle tool to select it. 3. If the rectangle around the hotspot is not quite big enough or a little too big or if you need to adjust one of the sides. The Arrow tool. . These handles are called nodes. 7. you can click on the Delete tool. 3. As you can see. This tool is used to move an image that is too large to fit in the Preview window. The Mover tool. click on the image with the left mouse button. my image is too wide to fit into the Preview window. 6. USING PAINT SHOP PRO TO CREATE AN IMAGE MAP 215 . This tool is used to create hotspots that have an irregular shape to them (those shapes that are not circles. That is. . Note that there are two little handles on the green rectangle . This tool is used to create a circular hotspot. 2. 2. To do this. Paint Shop Pro will place this in the ALT attribute as the alternative text for this part of the image map. . If the positioning of the rectangle is not quite right. Then click and drag one of the two nodes a little to adjust a side or to adjust the size of the hotspot. Here are these seven tools: Starting from the left. This will select the hot spot. 5.

you begin by choosing a point on your image and click once. Gilson 5.com/ For Hotbot. 6.html tutorials in web page design by J. use http://infoseek.ca/ Next. use http://www. The green rectangle indicates the hotspot that is currently selected (or active) and its two nodes are visible. In the URL box. To complete the hotspot. If you have an irregular shape. use http://www.excite.INTRODUCTION TO HTML .htmltutorials. Now click on the Circle tool so that we can place a circle around the circle in the lower right corner of the image (to the right of the words "search panel"). Do the same for the Inactive map border color. just click on the Clear button at the bottom of the dialog window. leave this box blank. A colored line traces out the path as you click away from one spot to the next. use http://www. drag the mouse pointer so that a circle is drawn around the circle. you choose the Polygon tool. As stated above in the Mapedit section. Click OK to return to Image Mapper.hotbot. If you are not using frames. In the resulting dialog window. As you can see in the above image. if your HTML document involves frames or if your HTML document is in a frame.com/ For Lycos.com/ For Excite. When using the Polygon tool. you should choose the value _top in the Target's pop-up box as this will ensure Yahoo loading into a full body of the current window. use http://www. 7. You can leave the Target box blank.com/ Here is the panel with the rectangular hotspots.com/ For Altavista. choose a color. Place the mouse pointer in the center of the circle and click the left mouse button and hold it down.lycos. Here is what you should have: Note that the green circle has two nodes so that you can adjust the size of the circle if necessary. the rectangle around the Altavista hotspot is green while the rectangles around the rest of them are red. while the red rectangles indicate the remaining inactive hotspots. If you want to delete all the hotspots and start over. Then move the cursor over to the next spot and click again. When you are satisfied. enter the URL: http://www. click in the Active map border color box and from the resulting palette. You can choose different colors for the active and inactive hotspots by clicking on the Preferences button. Repeat this process by placing a rectangle around each search engine's hotspot and use the following URLs (you can add the appropriate alternative text): For Infoseek. enter something like "Home Page" for the alternative text. release the mouse button. You can also use the value _blank to load the page into a new blank window. While holding it down. 8.altavista. your last USING PAINT SHOP PRO TO CREATE AN IMAGE MAP 216 .go.

2. Gilson click (the ending point) needs to be on top of the first click (the starting point).INTRODUCTION TO HTML . in the MAP element. click on the Optimize Image button. choose where you want to save the image and then click on Save. Click on the Save button or on the Save As button. You can also load the web page into your browser to test the hotspot.html tutorials in web page design by J.htm). Now the Image Map Save As dialog window opens up. In other words. 3. Type in a name for your image. This will display the HTML Save As dialog window. Make sure that you are saving the image to the same folder as the web page and then click on Save to save the image. map drawn with the Polygon tool. You can also preview your image map in your browser from the Image Mapper by simply clicking on the Preview in browser button which is the eye.gif) or choose a new name such as SearchEngines. and so on. Just load in the image and then load in the settings. Paint Shop Pro will translate these coordinates into USING PAINT SHOP PRO TO CREATE AN IMAGE MAP 217 . You can now load the HTML file (MyImageMap. you can transfer this coding to an existing web page. This will display the GIF Optimizer dialog window where you can specify full or partial transparency. The settings will be saved with the extension . . If necessary. you can also see the coding by choosing Source from the View menu. You are now back in the Image Mapper window.htm) into NotePad if you wish to see the coding that Paint Shop Pro created. then it is because the color has been designated as transparent. If one of the colors in your image is not displaying in your web page.S. Paint Shop Pro is first going to create an HTML file that contains all the necessary coding for your image map to work. image loading format (interlaced or non-interlaced). 4. So type in a suitable name for the web page (such as MyImageMap. To do this: 1. That's it. Here is an example of an irregular shaped hotspot tracing out the State of Texas on a U. As stated above. Saving the map settings allows you to load the settings back into the same image or into a different image at another time.jmd You can load the settings back into Image Mapper by clicking on the Load Settings button. the x and y coordinates for the hotspot are given below the Target box.gif. You can use the same original name (toolpane. From your browser. To further control the image. Click on the Save Settings button if you also want to save the image map settings. when creating a hotspot. saving the settings will allow you continue working on the image map at a later time. For example. Note that each click produced a node that you can move or adjust to make a perfectly drawn image map. you then need to save your work. suppose for the Yahoo hotspot we have: On our web page. When you are finished creating the hotspots.

135" HREF="http://www. 6. Therefore you must place your hotspots in order from the most important hotspot to the least important. Thus if two or more hotspots overlap. The height of the hotspot would be the full height of the image (100%). 4.70.44" What are the coordinates of the top left corner of the hotspot and what are the coordinates of the bottom right corner of the hotspot? | Click here to go to the answer section | | top | | bottom | OVERLAPPING HOTSPOTS .17 which means that the center is at 416. the COORDS attribute reads: COORDS="2. The name of the image is map3.SUMMARY Hotspots are checked in the order they appear in the map file. Since the center and the point on the circle (120. but the radius is not given.. Thus the COORDS attribute would be: COORDS="30.115.70 and the radius is 17 pixels.cnn. My coordinates for the circle shape are 416. The center is given (30.com/"> 2. The image tag would be something like: <IMG SRC="menu. The AREA tag would be: <AREA SHAPE="rect" COORDS="25.. 3.65).gif" WIDTH="117" HEIGHT="146" BORDER="0" USEMAP="#business" ALT="Image Map"> USING PAINT SHOP PRO TO CREATE AN IMAGE MAP 218 .70. shapes is the name of the map file containing all the image map data. the hotspot defined first in the map file takes precedence over subsequent hotspots.gif. it will take precedence over the rest of the rectangle. The browser would interpret this statement as a rectangular hotspot extending from the left side of the image to 50% (or half) of the image's width.90" 5. | top | | bottom | ANSWERS 1.111.44" HREF=.9. The name of the image map is shapes.111.65) are on the same horizontal line (they are both 65 pixels from the top of the image). the radius would be 120-30=90 pixels. The "default" hotspot is generally placed last in the list.9. If you have a circle inside of a rectangle. That is.> Problem 8: In the above AREA tag created by Paint Shop Pro.html tutorials in web page design by J. Gilson <AREA SHAPE="rect" COORDS="2.65. you need to place the circle shape first in the map file so that when a visitor clicks into the circle. So we need to find the radius. 7.INTRODUCTION TO HTML .

ca ANSWERS 219 .111. It is therefore illegal to copy these lessons into another website.44).107.44).htm" title="Home Page"> is also acceptable and is in fact what Mapedit produced in the map file. Brantford Educational Services.9.114.INTRODUCTION TO HTML . 8.83. 1997 . please report it to htmltutorials@bfree.139" HREF="mailto:business@bus. Gilson The MAP file would be something like: <MAP NAME="business"> <AREA SHAPE="rect" COORDS="21. | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Twenty-One | The information contained in these free 21 lessons is Copyright ©.96. All rights reserved. whether you use all lower case letters or have the ALT attribute before the COORDS attribute does not matter.110" HREF="order.113. The coordinates of the top left corner is (2.html tutorials in web page design by J.9) and the coordinates of the bottom right corner is (111.31" HREF="index2. These coordinates give rise to the numbers in the COORDS attribute (2.113. If you find a copyright violation. <area shape="rect" alt="Home Page" coords="21.96.4.htm" ALT="Home Page" TITLE="Home Page"> <AREA SHAPE="rect" COORDS="5. I left out the AREA tag that would have defined the default area.4. In other words.htm" ALT="Product Information" TITLE="Product Information"> <AREA SHAPE="rect" COORDS="5.31" href="index.2009 by local and international copyright laws. Also.htm" ALT="Place Order" TITLE="Place Order"> <AREA SHAPE="rect" COORDS="11.38.com" ALT="E-mail us" TITLE="E-mail us"> </MAP> Since there is no default area URL in the image.77" HREF="product.on.

Once you click on Yes. Please rest assured that not one JavaScript in this lesson or in my JavaScript course can harm your computer.INTRODUCTION TO HTML . you are given three options: Allow Blocked Content What's the Risk More information You will always get this warning when you open Internet Explorer and then open a web page that contains a script such as a JavaScript. you will have to go through the above procedure again.The JavaScript Alert pop-up window | | The Confirm and Prompt JavaScript windows | | Personalizing your visitor's name | | Interacting with your visitor's computer clock | | Conclusion . There is nothing hidden in them. I take great pride in these lessons and they are completely safe. | Before we get started on Javascript | | Java versus JavaScript | | Our first interactive JavaScript . When you try to load this lesson with newer versions of Internet Explorer. There are no security issues with any of these JavaScripts. If you want to do this JavaScript lesson. Internet Explorer has restricted this webpage from running scripts or Active X controls that could access your computer. you must to click on Allow Blocked Content. Click here for options. you will not be asked again as long as Internet Explorer remains open. to teach people and not to cause any harm. Gilson LESSON TWENTY-ONE FUN WITH JAVASCRIPT You may read the following sections in their entirety or use these choices to go directly to a section.Want more JavaScript? | BEFORE WE GET STARTED ON JAVASCRIPT This section applies to Internet Explorer browser users. If you close Internet Explorer and then later open it again. When you click for the options. You then receive an Alert window like the following: You must click on Yes in order to do these lessons. LESSON TWENTY-ONE FUN WITH JAVASCRIPT 220 . the following information bar pops up at the top of the browser window: To help protect your security. I am in the business to help people.html tutorials in web page design by J.

they will simply copy the code (which is often written in JavaScript) and use it as is.html tutorials in web page design by J. This lesson will concentrate on a few interactive applications using JavaScript. Java was developed by Sun Microsystems. then Java is the way to go. However. Copying and using other people's work without permission is really a violation of international copyright laws and has been known to generate lawsuits. it does not react to other events that might occur outside its "window" or outside its realm. BEFORE WE GET STARTED ON JAVASCRIPT 221 . Finally. And if the Applet does respond to user input. on the other hand. Java. Each of these languages is suited to different applications and environments. similarly. They have no understanding what the code means or why it works . While Java can also be used in web page development. many objects in an OOP language make up the whole program. JavaScript is the language to use. on the other hand. With most people. you need a Java Developers Kit (which you can get from the above Sun Microsystems website). All variables must belong to a Java "class" (called an "object") and all functions must be "methods" of a particular object" (recall that we are dealing with an "Object" Oriented Programming language). it has very little capability to interact with a browser. is a less strict language than Java. it is much easier to write and much easier to learn. calculators. Yet Java is very capable of creating stand alone applications such as a data base manager that can be run without being part of any web page. So they just copy it and use it hoping no one will find out. Java on the other hand is not so tightly focused and an Applet may not accept any input at all. there are some important differences and it is because of these differences that we have in fact two languages Java and JavaScript. Gilson JAVA VERSUS JAVASCRIPT Both Java and JavaScript are programming languages also known as scripting languages. A Java Applet is a small Java program (hence the term Applet) used mostly to create special effects and interactive events on your web pages such as led signs. it's when they are all put together into that final product that counts. Object Oriented Programming means that the final program is made up of many parts or many objects. This is because JavaScript is designed as an extension to HTML and is included within HTML codes. WHY LEARN JAVASCRIPT? When you finish this lesson. JavaScript is the language of choice for creating interactive web pages. However. They both share a similar syntax and at first glance appear to be the same. So you can see that in many ways JavaScript and Java are two different languages and if you want to create dynamically interactive web pages. to do any programming in Java or to test applets.INTRODUCTION TO HTML . If you want to create independent applications that may or may not be delivered through the web. clocks. pointer movements and visitor input. is a more general purpose language. when they see an interactive event they like. It is great at detecting mouse clicks. Java is a very strict language. a lot of parts (objects) go into making a car and each object is important. you will know whether or not JavaScript is an area you want to pursue further. For example. That is. They are also both examples of modern Object Oriented Programming (OOP) Languages. conversion tables and a host of other interactive events. JavaScript. everything must be part of a class and all Java variables must be declared and typed and this typing is quite strict. Because it is a less strict language. Just as many objects make up the whole car. One of the basic differences between Java and JavaScript is that JavaScript is highly event driven.but it works.

Here is the line that makes up this little interactive window: <BODY onLoad="window. That is. JavaScript is not difficult to learn if you take a step by step approach. • In Netscape. I used one such function for our JavaScript Alert window. Versions from Netscape 4.INTRODUCTION TO HTML . Gilson If you have an understanding of JavaScript. Learn JavaScript and you will know what you can change and what you can't change. Note that () is simply an opening and closing bracket (in case it is hard to read). And if you see something on another website you really like. OnLoad tells the browser that the event must happen when the web page is first or initially loaded (that is. When the browser sees window. Remember that the BODY tag indicates the beginning of the BODY of the web page. An object can have many methods and for the window object. • In Firefox. you can make up your own interactive events. then scroll down and click on the radio button Enable under Script ActiveX controls marked safe for scripting.html tutorials in web page design by J. Window is called an object and alert() is called a method of the window object. then you will be able to adapt it to your own situation. your browser has the JavaScript turned off. to enable and disable JavaScript. 2. click on the Security tab. click on the Custom level button. has a number of built-in functions which make programming a little simpler. then it is possible that JavaScript has not been enabled in your browser. • For Internet Explorer.alert('I sure hope you bookmarked this website!')" BGCOLOR="#FFFFFF" TEXT="#000000"> Note the following points: 1. | top | | bottom | OUR FIRST INTERACTIVE JAVASCRIPT . OnLoad is a called an event handler. choose Tools --> Internet Options. This simple statement that makes the JavaScript Alert window is part of the BODY tag. 3. like any computer language.THE JAVASCRIPT ALERT POP-UP WINDOW Did you like the JavaScript Alert window that suddenly popped up when this web page was loaded into your browser? If you did not see any pop-up window after this page was loaded. In the Content tab you can enable or disable JavaScript. I also like to specify a white background (BGCOLOR="#FFFFFF") with black text (TEXT="#000000") and so I included these specifications with the BODY tag. Remember also that you can only have one BODY tag on a web page.0 and Firefox should already have their JavaScripts enabled.so let's get started with our first example. you can turn JavaScript on and off (enable and disable) by choosing Options from the Tools menu (Tools --> Options) and then clicking on the Content tab. JAVA VERSUS JAVASCRIPT 222 . alert() is one them.0 and Explorer 4. choose Tools --> Options and then click on Site Controls where you will see the JavaScript option. This may be the case if you are using a very old version of Internet Explorer or Netscape Navigator.alert(). it knows what to do. produce this Alert window onLoading the web page). JavaScript. This lesson will give you a taste of the fun you can have with JavaScript on your web pages .

Of course. save the corrected document and try again. If you made a typing or other error. Note that these quotation marks did not appear in the pop-up window. then one set must be double and the other set must be single quotation marks.html tutorials in web page design by J. A browser looks for the closing quotation marks on the same line as the opening quotation marks. If the closing quotation marks are on a different line. You can learn a lot from experimenting so take your time and try a few different things. You can also change the message to suit your own needs. correct the problem.THE JAVASCRIPT ALERT POP-UPWINDOW 223 . TITLE and then the BODY tag as in: <HTML> <HEAD> <TITLE>Java Fun</TITLE> </HEAD> <BODY onLoad="window. Otherwise the browser will be unable to keep things straight. type in a HEAD. | top | | bottom | OUR FIRST INTERACTIVE JAVASCRIPT . How this is all done is beyond the scope of this lesson. If it is a return visit. 5. Now save this HTML document using a suitable name such as alert. You can then adjust your introduction accordingly.alert('I sure hope you bookmarked this website!')") must be printed on one line in Notepad or in whatever text editor you are using. If you want the message to be displayed only when the visitor leaves your web page. This can be a nuisance for some people. Note that the whole statement for the onLoad event handler is enclosed with double quotation marks. Gilson 4. SWITCH back to your word processor. When two sets of quotation marks are required. Try also onUnload to see its effect and also try different length messages. 6. Therefore make sure that onLoad="window. use onUnload instead of onLoad. you have a JavaScript error and the script will not work. Unfortunately.htm and then SWITCH back to your browser and load the document to see the results. The message is called an argument and arguments must always be enclosed within parentheses (that is. For example. I would suggest that you take some time to "play" with this statement by SWITCHING to NOTEPAD or to a similar text editor. you may want to ask for a name and welcome him or her to your website. you may simply want to display a "welcome back" message along with the visitor's name. within brackets).INTRODUCTION TO HTML . The argument belongs to the method alert() and note that it is enclosed with single quotation marks.alert('I sure hope you bookmarked this website!')" appears all on the same line in your text editor such as Notepad. Omitting these quotation marks will result in an error message. you can do a test to see if a visitor is simply returning to a web page or if the visitor is there for the very first time. the JavaScript Alert window that appeared when you loaded this web page will appear every time you re-load or return to this page.alert('I sure hope you bookmarked this website!')" BGCOLOR="#FFFFFF" TEXT="#000000"> </BODY> </HTML> Note: The onLoad attribute of the BODY tag (onLoad="window. if the visitor is there for the first time.

When you have checked out the windows. Save the document using a suitable file name and extension (such as JavaFun.htm).Hide the JavaScript from older browsers document.write(prompt("Which lesson is your favorite?")) // End hiding of script --> </SCRIPT> </BODY> </HTML> Now save this web page (for example. Switch back to your browser and load the file. JavaFun. the method you use is up to you.write(confirm("Do you like this website of HTML lessons?")) document.htm). Please enter into your text editor: <HTML> <HEAD> <TITLE>Java Fun</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> <SCRIPT LANGUAGE="JavaScript"> <!-. WELCOME BACK! Now here is your first problem: Problem 1: a) When you clicked on OK in the Confirm window. then switch to your browser. However. Now here is your first document. load the page to see what happens. If you make typing errors. Gilson THE CONFIRM AND PROMPT JAVASCRIPT WINDOWS We will now study two other JavaScript windows and they are: • the Confirm Window and • the Prompt Window Switch to Notepad or to another text editor and enter the following document exactly as shown. In order to avoid too many interactive events on this page at one time. You can also copy and paste to save some typing by following these steps: 1. Your document will now be in your text editor. Switch to your text editor such as Notepad and choose PASTE from the EDIT menu.write("<BR>") document. 3. I think there is some value in typing if there isn't too much to type. what did your browser echo back on the screen? That is. Choose COPY from the EDIT menu. 5. what did your browser immediately print on the screen? b) When you clicked on Cancel in the Confirm window. Please click here to see these Confirm and Prompt windows.html tutorials in web page design by J. This example illustrates how to include JavaScript code in with your HTML code. return here for a discussion.INTRODUCTION TO HTML . what did your browser echo back on the screen? THE CONFIRM AND PROMPT JAVASCRIPT WINDOWS 224 . you get a chance to sharpen your editing skills in correcting these errors. I have these two JavaScript windows on another page. 4. Hold the mouse button down and drag the mouse cursor over the statements given below so that the statements become highlighted. 2.

4. Line 7 tells the browser that what follows is JavaScript code. Lines 1 to 5 represent the usual main parts of a web page. line 9 must be written on one line in your text editor. Line 1: <HTML> Line 2: <HEAD> Line 3: <TITLE>Java Fun</TITLE> Line 4: </HEAD> Line 5: <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> Line 6: Line 7: <SCRIPT LANGUAGE="JavaScript"> Line 8: <!-.INTRODUCTION TO HTML . 3. Thus line 9 could also be written as: document. what did your browser echo back on the screen? d) When you clicked on Cancel in the Prompt window. Line 6 is a blank line only to set the JavaScript apart from the standard main parts of the web page.write(window. document is called an object and write() is a method of the document object.Hide the JavaScript from older browsers Line 9: document. THE CONFIRM AND PROMPT JAVASCRIPT WINDOWS 225 . In lines 9 and 11. This blank line (as well as the blank line 14) can be omitted. the window object is assumed. are methods of the window object. Finally. Line 13 tells the browser that the JavaScript code has ended. the highest level object is the window object and so if the object name is missing from a statement. like alert(). In JavaScript. Obviously document. JavaScript code must be contained within the SCRIPT element.write(confirm("Do you like this website of HTML lessons?")) Line 10: document. 2. Note also that document. Note also that the argument for the write() method must also be contained within brackets (confirm("Do you like this website of HTML lessons?")). The same also applies to line 11. Confirm() and prompt().write must be written in lower case letters.write(prompt("Which lesson is your favorite?")) Line 12: // End hiding of script --> Line 13: </SCRIPT> Line 14: Line 15: </BODY> Line 16: </HTML> Discussion: 1.confirm("Do you like this website of HTML lessons?")) The question asked in line 9 is the argument for the method confirm() and must be contained within quotation marks and brackets.write("<BR>") Line 11: document. for the reasons discussed earlier. the two questions in the brackets are arguments that are passed to the write() method to be printed.html tutorials in web page design by J. Gilson c) When you typed in your answer to the question Which lesson is your favorite? and clicked on OK. In lines 9. what was echoed back on the screen? | Click here to go to the answer section | Here is the web page again but with the lines numbered for discussion purposes.write tells the browser to write (or print) something. The BODY tag in line 5 also sets up black text on a white background. 5. Confirm() (line 9) is a built-in function that opens a "Confirm window" and prints the question "Do you like this website of HTML lessons?". 10 and 11.

write part from the statements? | Click here to go to the answer section | You can also include in this JavaScript code. The line to include is: alert("I sure hope you bookmarked this website!") as in: <SCRIPT LANGUAGE="JavaScript"> <!-. Thus the HTML comment container will hide the code from an older browser but will still allow the JavaScript to execute on a capable browser (and most browsers today can interact with JavaScript). What is the effect of removing the document. Problem 2: In the statement: document.Hide the JavaScript from older browsers alert("I sure hope you bookmarked this website!") confirm("Do you like this website of HTML lessons?") prompt("Which lesson is your favorite?") THE CONFIRM AND PROMPT JAVASCRIPT WINDOWS 226 .write(prompt("Which lesson is your favorite?")) a) What is the document part called? b) What is write() called? c) What is prompt() called? d) What is Which lesson is your favorite? called? | Click here to go to the answer section | Problem 3: Switch back to your word processor and remove the document.and line 12 closes the comment with --> .INTRODUCTION TO HTML . This line illustrates that HTML code can also be used within JavaScript code. The <!-.Hide the JavaScript from older browsers confirm("Do you like this website of HTML lessons?") prompt("Which lesson is your favorite?") // End hiding of script --> </SCRIPT> Save these changes.write from lines 9 and 11 and also remove line 10 completely. The // at the beginning of any line in a JavaScript program (see line 12) tells the browser that this is a comment line and not to be executed as JavaScript. all the code will be displayed in older browsers as text on the screen. The ("<BR>") in line 10 ensures a line break between the two responses. Line 8 is the opening comment line which begins with <!-. switch to your browser and load this changed document. 7. This was the result of the <BR> tag. If you don't do it this way. The purpose for doing this is to hide the code from older browsers that cannot interpret JavaScript. The quotation marks must be included around the <BR>. You may have noticed that the two responses according to your input were printed on separate lines.html tutorials in web page design by J. Notice that the entire script was enclosed as a comment. Gilson 6. the Alert window that you saw when this page was first loaded.--> is the comment container for HTML. so that the JavaScript part of the web page now looks like: <SCRIPT LANGUAGE="JavaScript"> <!-.

INTRODUCTION TO HTML . let's make the name interactive and personal. have the browser print the name along with a nice comment. For discussion purposes. Please switch to your word processor and enter the following lines: <HTML> <HEAD> <TITLE>Java Fun</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> <FONT COLOR="#FF00FF"><H2 ALIGN="center"> <SCRIPT LANGUAGE="JavaScript"> <!-. Which lesson is your favorite? and clicked OK. load it into your browser and hopefully your results will be the same as what you saw earlier. In other words. WELCOME BACK! Here are the lines that produced the Prompt window. the name and message.prompt("Please enter your name:") document. here is the document again with the lines numbered: Line 1: <HTML> Line 2: <HEAD> Line 3: <TITLE>Java Fun</TITLE> Line 4: </HEAD> PERSONALIZING YOUR VISITOR'S NAME 227 . your answer was immediately echoed back on the screen.Hide the script from older browsers var YourName YourName = window.so let's extend this example by asking only for the visitor's name and instead of having the name echoed back on the screen.html tutorials in web page design by J. Gilson // End hiding of script --> </SCRIPT> | top | | bottom | PERSONALIZING YOUR VISITOR'S NAME Recall in our example introducing the Prompt window. First click here to see this situation in action and then return here to continue with the lesson. This really serves no useful purpose in an actual HTML document .write("Thank you " + YourName + "<BR>" + "Welcome to my website!") // End hiding of script --> </SCRIPT> </H2></FONT> </BODY> </HTML> Now save this document. when you typed an answer to the question.

This is because JavaScript is a rather loose and tolerant language which is unlike C or Java.prompt("Please enter your name:") Line 13: Line 14: document. 8. line 14 prints out "Thank you".write("Thank you " + YourName + "<BR>" + "Welcome to my website!") Line 15: Line 16: // End hiding of script --> Line 17: </SCRIPT> Line 18: </H2></FONT> Line 19: Line 20: </BODY> Line 21: </HTML&gt Discussion: 1. You can actually leave out line 11 and the script will still work. You can choose any legal name for the variable . However. Gilson Line 5: <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> Line 6: Line 7:<FONT COLOR="#FF00FF"><H2 ALIGN="center"> Line 8: <SCRIPT LANGUAGE="JavaScript"> Line 9: <!-. Once the visitor has entered a name and clicked on OK. followed by "Welcome to my website!". Line 6 is a blank line simply to separate the usual beginning elements from the body of the web page. Thus line 12 could simply be written as: YourName = prompt("Please enter your name:") 7. PERSONALIZING YOUR VISITOR'S NAME 228 . does not mean that we should not exercise good programming practice and OOP languages dictate that variables should be declared. 2. For this reason you can "get away" with certain things in JavaScript that you can't get away with in C and Java. it should be declared to be such and line 11 does this with var YourName (meaning that YourName is to be treated as a variable). 3. We should be careful to do the best job that we can so that browsers can easily display the results. 6.as long as it is not a name reserved by JavaScript for another use. Browsers are purposely designed to be tolerant in the HTML that they accept. The same could be said for JavaScript. The word "window" in line 12 can be omitted since all methods will default to the window object if the object name is omitted. followed by the person's name (stored in variable YourName). 5. If we are going to use a variable. followed by a line break (<BR>). I have a complete list of reserved variables names in my course "Learn JavaScript All By Yourself!" (discussed in the "Conclusion" section at the end of this lesson). we are storing or assigning whatever name (or data) the visitor types in. Variables are used to store data. Line 12 sets up the Prompt dialog window and has the instruction "Please enter your name:" printed in it.html tutorials in web page design by J. So with variable YourName. Browsers generally are quite tolerant to the HTML they accept. This however. It does not make sense to declare something to be a variable after it has been used. we must still ensure good coding practices because otherwise the way a web page is displayed in any particular browser is dependent on the error recovery scheme utilized by that browser. Note in this line that whatever the visitor types for his or her name will be assigned to variable YourName. YourName is called a variable. The plus signs join these individual parts together.Hide the script from older browsers Line 10: Line 11: var YourName Line 12: YourName = window.INTRODUCTION TO HTML . Note that any variable used in your script must be introduced or declared before that variable is used (the variable is being used in line 12). but they are not meant to be a substitute for an HTML editor. 4. Line 7 centers and colors the text using normal HTML coding.

Hide the JavaScript from older browsers document.write("<BR>") document.write("Hope you are having a great day!") Line 11: document.Hide the JavaScript from older browsers Line 10: document. <HTML> <HEAD> <TITLE>Java Fun</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> <H3 ALIGN="center"> <SCRIPT LANGUAGE="JavaScript"> <!-. Please switch to your word processor and enter the following lines that give this output. Gilson Problem 4: In the above script. These items will be given through the use of another JavaScript built-in object. switch back to your browser and load the file to see the results for yourself.INTRODUCTION TO HTML . Why is there a space between the word you and the closing quotation mark (as in: "Thank you ")? | Click here to go to the answer section | | top | | bottom | INTERACTING WITH YOUR VISITOR'S COMPUTER CLOCK Here is a little JavaScript program that gives a nice comment along with the current date and time.write("<BR>") PERSONALIZING YOUR VISITOR'S NAME 229 . First here are the results.html tutorials in web page design by J.write("Hope you are having a great day!") document.Date()) // End hiding of script --> </SCRIPT></H3> </BODY> </HTML> Now save the document. line 14 is the document. For the discussion. Line 1: <HTML> Line 2: <HEAD> Line 3: <TITLE>Java Fun</TITLE> Line 4: </HEAD> Line 5: <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> Line 6: Line 7: <H3 ALIGN="center"> Line 8: <SCRIPT LANGUAGE="JavaScript"> Line 9: <!-.write statement. Thank you is called a string (think of it as a "string" of characters).write("Today's date is ". here first is the web page again with line numbers added. Note that Thank you is enclosed within quotation marks.

m. Hide the JavaScript from older browsers document. and 12 noon. (). have the statement printed outside the JavaScript code as regular HTML text as in: Hope you are having a great day!<BR> <SCRIPT LANGUAGE="JavaScript"> <!-. the message will be "Good Evening!".write("Today's date is ". | Click here to go to the answer section | Let's now make our date more interesting.write("Today's date is ".write statement will take the place of these three statements? In other words.m. and if the time is between 6 p. If this is the case.Date()) // End hiding of script --> </SCRIPT> 2.write("Today's date is ".write("Hope you are having a great day!") document.write statements with one document. if the time is between 12 noon and 6 p.Date()) What single document. Note that the empty brackets after "Date". replace the three document.html tutorials in web page design by J. the browser will assume that the visitor is up early and will print the message "Wow! You're up early!". the year part. You can of course.. It simply indicates to the browser that in this case there is no argument for the Date object. the message will be "Good Afternoon!". the message will be simply "Good Morning!".write statement.Date()) Line 13: // End hiding of script --> Line 14: </SCRIPT></H3> Line 15: Line 16: </BODY> Line 17: </HTML> Discussion: 1. 3.Hide the JavaScript from older browsers document. The information in Date() itself comes from the internal clock in your visitor's computer and so the date will always be correct if the clock in your visitor's computer is correct (which we can assume it is). Once the message has been printed.write("<BR>") document. Each of these parts is called a method of the Date() object. the day of week part. Gilson Line 12: document.write("Hope you are having a great day!") 230 document . If the time is between 4 a. What this JavaScript actually does is check to see if the time lies between midnight and 4 a. Date() is a built-in function that displays all this information. etc. are necessary.m.m. Problem 5: Our date and time program above has three document.such as the hour part.INTRODUCTION TO HTML . If the time is between 6 a. It is called an object because it is made up of many methods (or parts) . the browser will then print the date and time. 11 and 12) and here they are again: document.write statements (lines 10. the object Date() is all it takes to print the current date and time. In line 12. In line 10. the statement Hope you are having a great day! was printed within the JavaScript code. we will have the browser assume that the visitor is up late and will print the message "Goodness you're up late!".m. and midnight.m. Let's make a JavaScript program that checks the date function of the visitor's computer clock and then prints a message according to the time of day. and 6 a. the minutes part.

getHours() <4)) { document.write("Good Morning!") } if((today.getHours() <=24)) { document.getHours() <6)) { document.write("Good Afternoon!") } if((today.getHours() >=12) && (today.Hide the JavaScript from older browsers document.INTRODUCTION TO HTML . Gilson Here is the output for your current time of day: Here are the lines that give this message and time. Please switch to your text editor and enter the following exactly as given.getHours() >=4) && (today. It may look complicated at first but a complete explanation follows the coding: <HTML> <HEAD> <TITLE>Java Fun</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> <SCRIPT LANGUAGE="JavaScript"> <!-.write("Hope you are having a great day!") 231 document .getHours() >=0) && (today.getHours() >=18) && (today.write("Goodness you're up late!") } if((today.write("Good Evening!") } document.write("<CENTER><FONT SIZE=+1 COLOR=blue>") today = new Date() if((today.getHours() >=6) && (today.write("Wow! You're up early!") } if((today.html tutorials in web page design by J.getHours() <12)) { document.write("</FONT></CENTER>") // End hiding of script --> </SCRIPT> </BODY> </HTML> Hide the JavaScript from older browsers document.getHours() <18)) { document.write("<BR>") document.Date()) document.write("Today's date is ".

write("Goodness you're up late!") Line 17: } Line 18: Line 19: if((today.getHours() >=12) && (today.getHours() <4)) Line 15: { Line 16: document.getHours() <12)) Line 25: { Line 26: document.getHours() >=4) && (today.getHours() >=18) && (today. Gilson Now save this document.write("Good Evening!") Line 37: } Line 38: Line 39: document.html tutorials in web page design by J.INTRODUCTION TO HTML .write("Good Morning!") Line 27: } Line 28: Line 29: if((today. For the discussion.write("</FONT></CENTER>") Line 42: // End hiding of script --> Line 43: </SCRIPT> Line 44: Line 45: </BODY> Line 46: </HTML> Discussion: Hide the JavaScript from older browsers document.write("Wow! You're up early!") Line 22: } Line 23: Line 24: if((today.getHours() <=24)) Line 35: { Line 36: document.Date()) Line 41: document. load the document and the output should be like that given above.write("<BR>") Line 40: document.getHours() >=6) && (today.write("Hope you are having a great day!") 232 document .Hide the JavaScript from older browsers Line 9: Line 10: document.getHours() >=0) && (today. switch back to your browser. here is the web page again with numbered lines: Line 1: <HTML> Line 2: <HEAD> Line 3: <TITLE>Java Fun</TITLE> Line 4: </HEAD> Line 5: <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> Line 6: Line 7: <SCRIPT LANGUAGE="JavaScript"> Line 8: <!-.write("Today's date is ".write("Good Afternoon!") Line 32: } Line 33: Line 34: if((today.getHours() <6)) Line 20: { Line 21: document.write("<CENTER><FONT SIZE=+1 COLOR=blue>") Line 11: Line 12: today = new Date() Line 13: Line 14: if((today.getHours() <18)) Line 30: { Line 31: document.

.getHours() >=12) && (today. then statements meaning "if the condition is true.m.write statement in line 16 and instead drops down to line 19 which is the next condition to be checked. (12+6=18). Once a message (such as "Good Morning") has been printed. The logical operator AND means that BOTH stated conditions must be true. 2. You can think of new Date() as telling the browser to "take a new instance of the date" or to "take a new reading of the date". The word "new" must be there. 11. date. so today will also contain these same methods and that is why today must also be thought of as an object. Line 39 forces this needed line break. . 6. Some of the lines are blank and others are indented. 29 and 34. You will get an error message without it. the statement in line 29 which is: if((today. "Wow! You're up early!" is printed. then the browser does not execute the document. minutes. any name not reserved by JavaScript).getHours() (line 14). 5. AND is called a logical operator. the browser will be at line 39. This is very common with OOP languages. 10. Since Date() contains several methods such as hour. If the condition is false. You would use OR if you only want one of Hide the JavaScript from older browsers document. the blue color and the centering of text. 24. Brace brackets are discussed below. then do this". Blue is defined to be the color for the text and for the date and time. Line 40 prints the complete date and time. one at a time. If the condition is false this message is not printed. Gilson 1. In today. I chose the name "today" but you are free to choose some other name. 4. 8. Here is how it all works: The first condition is in line 14 and it has the browser check to see if the hour part of the date lies between 0 AND 4 meaning between midnight and 4 a. 19.. Note that these are HTML tags contained within quotation marks.getYear().getHours() is a called a method of the object today.m. Each condition is checked in this manner. Because the browser will check each of the five conditions in our program. Line 41 near the end of the script cancels the increased font size. You can use any legal variable name for the object (that is. These checks are done in lines 14. 3. we need to be very specific in our conditions. After all the conditions have been checked. . year. the browser will extract the hour from the object today. we need a line break so that the date and time will be printed on a new line.m. Thus the part in the brace brackets will only be executed if the condition is true. The browser will check each conditional statement to determine if it is true or if it is false. 9. Note that the comment is surrounded by brace brackets { }. Some of the other methods that can be extracted are . As this is a 24 hour clock. the time is not between 0 and 4 a.getHours() <18)) will check for the time between 12 noon and 6 p. If the condition is true then the message "Goodness you're up late!" is printed (line 16). Conditional statements are often called if . Note in the conditional statements that && is the symbol for AND (see line 14 for example). the browser begins a series of checks on the hour of the date stored in object today in order to determine what comment to write. that is. If the answer is true.write("Hope you are having a great day!") 233 document . 7. Blank lines separate sections of script and indented lines make the script much easier to read and can indicate what belongs together. Conditional statements are if statements.INTRODUCTION TO HTML .. .getMonth(). Another logical operator is OR written in JavaScript as ||. Line 12 transfers all the information in object Date() to variable today.getDate() and .html tutorials in web page design by J. The second condition is in line 19 and here the browser checks to see if the time is between 4 and 6 in the morning. In line 14.getMinutes(). Line 10 centers the text and clock and prints the text one font size larger than the surrounding text size. etc. The browser does these checks by making use of conditional statements.

}. Now having said this. C and other OOP languages do require them. March is interpreted as the second month and not as the third month. To specify the AND and OR Logical Operators. Brace brackets are often found on lines by themselves so that they clearly indicate the beginning and ending of a group of related coding statements. 12.write("Hope you are having a great day!") 234 document . Note in line 12. However. It is a personal preference.getHours()>=12" or as "today. If you plan to use nested brace brackets. So the opening brace bracket indicates that a group of related lines are beginning and a closing brace bracket indicates that the grouping has ended. will be interpreted as 1 representing the first month. Brace brackets are used to enclose codes that belong together. This is because we are not comparing anything (there is no if statement involved).getMonth()+1)+"/"+today. this does not have to be the case. then the last one opened must be the first one closed (in the same way that the last HTML tag opened must be the first one closed). the equal sign is read as: assign the object "new Date()" to the variable "today". Java.getHours() will only look at the hour part of the time. you can have brace brackets inside of brace brackets.getHours() >= 12". "=" represents an assignment and not a comparison. you need two equal signs in a row (==). there must be a closing brace bracket.getHours() == 7) In this case. Thus you use one equal sign for assignment and two equal signs for comparison. that is.getHours() >=12" could also be written as "today.getMonth() b) . brace brackets are also usually included with JavaScript. For example. That is why you see && for AND and two vertical lines (||) for OR.getDate() | Click here to go to the answer section | Problem 7: The function . In this line. if you want to check specifically if the hour was equal to 7. Thus "today. the equal sign is not called a logical operator. Brace brackets can also be nested. then the statement would have to be: if(today. what do you think the browser will print on the screen with the following line? document. has only one equal sign. Problem 6: There are also other methods involving the Date object. Gilson the two conditions to be true. and possibly for consistency. However. For example. It is a called a comparison operator because you are using it to compare things.getMonth is always out by one month. today = new Date(). Spacing around symbols is optional. For each opening brace bracket. in this line 12.getYear() c) . For example. for example. we already know that . {. The reason for this is because arrays start at zero (0) and so January is considered to be month number zero. For this reason you need to add +1 to the month so that January. 13. If you are using the equal sign to compare two things.write("It is now "+(today.html tutorials in web page design by J. you require two of the same symbol. we really did not need to use brace brackets. Since we only have one line of code after each "if" statement. The { } are called brace brackets.getDate()) Hide the JavaScript from older browsers document.INTRODUCTION TO HTML . What do you think each of the following methods involve? a) . The equal sign can also be used to check the time. That is.

Here is an example we will study early in the course. It's really an easy language to learn! If you are interested in an interactive series of JavaScript lessons written in the same easy interactive style and layout as this website of HTML lessons. Learn JavaScript All By Yourself!" begins with the assumption that you know nothing about JavaScript. having fun with colors.like creating your own personalized digital clock to display on your web page. I cover all these topics and many more topics in my course. Here is an e-mail I received from Matthew Young. "Learn JavaScript All By Yourself!" This series of 14 JavaScript lessons of over 300 pages is available for downloading as one zipped file and now also includes four lessons on Dynamic HTML (DHTML). Now with JavaScript you can change the background color as many times as you like on a page! To see this.INTRODUCTION TO HTML .WANT MORE JAVASCRIPT? This lesson gives you a brief introduction to JavaScript. This is just a sampling of nearly 150 beautiful built-in JavaScript colors that you will learn to code in different ways! JavaScript can certainly spruce up your web pages and make them come alive. JavaScript can certainly add some interesting interactions with your visitors. These JavaScript lessons are the culmination of my efforts to produce the best possible self-learning course on JavaScript available today . functions. then you can also learn JavaScript.html tutorials in web page design by J. just click on the following color names. I have never met Matthew and I do not know who he is. "Learn JavaScript All By Yourself!" which can be downloaded right into your computer. you can only set the background color of a web page once. looping. scrolling text in a box or scrolling a message on the Status Bar at the bottom of the browser screen.a course that assumes no prior knowledge of JavaScript. random numbers. If you have been able to learn HTML.write("Hope you are having a great day!") 235 document . Yet there is so much more to learn . animations. Please click here if you would like more information or to place an order. and so on. You know that in HTML. Gilson | Click here to go to the answer section | | top | | bottom | CONCLUSION . We will go a lot slower with the lessons in the book and with lots of explanations and examples (we packed a lot of stuff in this Lesson 21). then I would like to recommend my course. but I do want to thank him for the following which is reprinted with permission: Hide the JavaScript from older browsers document.

The space is needed to ensure a space between Thank you and the visitors name (store in variable YourName). just click here. b) If you are using Firefox. For example. Sincerely. In Firefox. | top | | bottom | ANSWERS TO THE PROBLEMS POSED IN THIS LESSON 1.0 and later versions.0 and later versions. if the visitor's name was John. Matthew Young Again. In older Explorer versions. c) The browser printed whatever you typed in the Prompt window.0 and later browsers showing the same results. Netscape and Explorer 4.0 and later versions. d) "Which lesson is your favorite?" is called the argument for the prompt() method (and this argument is passed on to the write() method to be printed). I was very impressed with the efficiency with which my order was processed and the simplicity of the entire procedure. So here we have Firefox. Gilson Thank you for sending me your tutorial "Learn JavaScript All By Yourself". the browser prints the number -1. if you would like more information or to place an order. c) Prompt() is a method of the window object. none of these sites came even close to satisfying my hunger for a clear and concise account of the why's and how's of JavaScript. Best of all. a) The answer depends on the browser you are using. Thanks again. Netscape and Internet Explorer 4. Netscape and in Internet Explorer 4. d) In Firefox. Older Explorer browsers will generate the number 0. b) Write() is called a method of the document object. I must admit that I felt like a kid on Christmas Eve awaiting your course. clicking on Cancel will generate the word false. the word "null" was echoed back on the screen. Although I made some wonderful discoveries and learnt much. I am finding your lessons to be great FUN. The input was not echoed back on the screen. the line will read Thank you John instead ANSWERS TO THE PROBLEMS POSED IN THIS LESSON 236 . the browser prints the word true on the screen. 2. a) Document is called an object. During the week prior to ordering your lessons I visited over 30 other JavaScript sites.html tutorials in web page design by J.INTRODUCTION TO HTML . 4. In older Explorer versions. I am hoping that I can transform my site into something truly special .and something that will always be a reflection upon your own work. Normally these values would be used in a script to check a visitor's input to see what response was given and then another script would be executed depending on the response. Netscape and Explorer 4. nothing was printed on the screen. I have been fairly busy this week and have only made it through the first three lessons of your course. however. 3. I learned more in the first three paragraphs of it than I had whilst browsing through whole pages of some other sites! I must congratulate you on the way you make everything seem so simple and straightforward (yet without simplifying the material).

We also have more HTML lessons available. 1997 . 5.getMonth() has the browser look only at the month b) . All rights reserved. document.INTRODUCTION TO HTML . The browser will print: It is now month/day as in: Congratulations on completing this series of 21 lessons.2009 by local and international copyright laws. If you find a copyright violation. Click here to learn more about our additional lessons.getDate() has the browser look only at the day 7. Gilson of Thank youJohn. | Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | The information contained in these free 21 lessons is Copyright ©.write("Hope you are having a great day!" + "<BR>" + "Today's date is ".getYear() has the browser look only at the year c) . It is therefore illegal to copy these lessons into another website. a) . Brantford Educational Services.Date()) 6.on.html tutorials in web page design by J.ca ANSWERS TO THE PROBLEMS POSED IN THIS LESSON 237 . please report it to htmltutorials@bfree.