The Internet
You have most likely been online to do research, find a phone number or a map, or read someone’s blog, or online journal. As a matter of fact, you are online right now taking a course for school! You have all used the World Wide Web (WWW, or "the Web," for short) on some level as you‘ve all used the Internet. But do you really know what the World Wide Web is? What is the Internet really? Maybe you don’t really think about that while you’re browsing the Web, but perhaps you have other questions. When you’re browsing through Web sites, do you ever wonder where all that information comes from? Who put all that information there? Where is it actually stored?

Everything you see online is physically stored on a computer server somewhere. That’s what the Internet is. The Internet is a huge web of interconnected computer networks located all across the globe. It is a repository, or storehouse, of a vast collection of information provided by millions of people from thousands of different places. The World Wide Web is only a part of the Internet. The Web includes the part of the Internet that you typically see. All the Web sites you visit are considered the World Wide Web.

The Internet is an incredible communication tool. It has completely changed the world in which we live. We can shop on the Internet to buy anything from furniture, to clothes, to used CDs. There’s no need to leave the house now. We can shop in our pajamas right there from the comfort of our own home! We also send mail, share files, balance our checkbooks, attend video conferences, and communicate in a multitude of other ways over the Internet. Perhaps some of you have played video games with other live players from all over the world. People attend live business meetings, conduct research, and even order pizza—all online! As you know from personal experience, some of us even go to school on the Internet!

URL
With such seemingly limitless amounts of information available online, it�s vital that an efficient organization process is in place. So how is the Web organized? Each Web page has a unique URL. URL stands for "uniform resource locator." The URL is the address that details the specific location of files on the Internet. Look at the example URL below:

https://roads.advancedacademics.com/

There are three parts to this URL. It usually begins with "http://." This is called the protocol. All URLs begin with a protocol. It tells the Internet browser what procedure it should follow to access the information contained on the desired page. Other protocol examples that you might see are "https://" and "ftp://." The protocol "https://" is essentially the same as "http://" except that it is a secure connection. A secure connection means that all the information from the browser on your computer (everything you type into fields, such as your name, address, credit card number, passwords, and so forth) is protected by security programs on the server you are accessing. The protocol "ftp://" stands for "file transfer protocol." This is a way to store and share files over the Internet.

After the protocol, "www" indicates that the desired page is contained on the World Wide Web.

In this URL, "advancedacademics.com" is the domain name. (Please notice that URLs are not case sensitive. You will get the same page whether or not it is capitalized, just as in e-mail addresses.) Before we talk more about domain names, we need to discuss IP addresses. All computers that connect to the Internet have an IP address. An IP address is a number assigned to your computer by your Internet Service Provider (ISP) that identifies your location on the Web.

"Advancedacademics.com" has an IP address of 67.67.7.40. The domain name "advancedacademics.com" is a just a placeholder for the IP address. So instead of people having to remember "67.67.7.40" in order to visit the Web site, they just have to remember "advancedacademics.com." Go ahead and try it. Type in "67.67.7.40" into your Web browser�s address bar. It will take you to the same site as it would if you typed in www.advancedacademics.com. Also notice that most browsers now do not need you to type in the http://. The browser will automatically assume that it is an http:// protocol unless you type in something different.

The domain name, or IP address, tells the browser who the host is for the Web page. A host is simply a computer that is connected to the Internet. In the URL, the domain name directs the browser to the host computer on which the Web page is physically located. Notice the end of the domain name is ".com." This is called a top level domain (TLD). A TLD contains two or more characters that help organize the information on the Web. The most common TLD is ".com." It typically indicates that the site is hosted by a company, but individuals can also buy ".com" domains for their personal Web sites. A TLD reserved for government sites with the United States only is ".gov." Two examples are www.ed.gov and www.nasa.gov. Sites reserved for non-profit organizations have the TLD ".org." Educational institutions use ".edu," while ".mil" is for American military organizations. TLDs are also used to indicate the country of origin for some sites. For example, most sites hosted in Japan end in ".jp." Those in Canada end with ".ca." Other TLDs include ".net," ".tv," and ".biz."

Now, let�s look at a more complicated URL:

http://www.nasa.gov/audience/forstudents/9-12/features/index.html
Look at all the extensions after the TLD in the URL above. Extensions like "/audience" and "/forstudents" represent the folders on the computer that are physically hosting the site. Extensions tell the browser exactly where on the host computer to find the needed files for the Web page.


Internet Browsers
Now that we know we’ve got all this information and resources on the Web that are provided by millions of people all around the world, we need to understand that there’s a consistent organization structure for storing that information. But how do we access it? Internet browsers are the graphical interfaces used to access the World Wide Web. Look at the illustration below. The URL of the Web page you want to view is typed into the address bar at the top of the Internet browser. This is usually called the "address bar." When the page loads, the title of the Web page appears in the title bar of the browser at the top of the page. There are five buttons in the tool bar that are common to every browser: the "back," "forward," "refresh," "stop," and "home" buttons.

Back Button
The back button takes you to the page you visited previously.

Forward Button
The forward button takes you to the page you visited after the current page.

Refresh Button
The refresh button reloads the page.

Stop Button
The stop button stops the browser from loading a page.

Home Button
The home button takes you to a predetermined page that you choose as your home page. This determines which site the browser opens up to when you first start your browser.

The home button takes you to a predetermined page that you choose as your home page. This determines which site the browser opens up to when you first start your browser.

Browser Window Description

Some browsers also allow you to view more than one site at a time using tabs. Another common feature available to most browsers is a search tool right there at the top of the browser.

Several Internet browsers are available for free, like Internet Explorer, Mozilla Firefox, Opera, and Safari. Sometimes, there are slight variations in the way different browsers display the same sites. But most well-designed sites will display correctly on browsers of all types.


What is a Web Site?
A Web site is a collection of one or more Web pages that are all related to each other. For example, www.advancedacademics.com is a Web site. Within that site, there are several different Web pages. The Web pages in a single Web site are all stored on the World Wide Web and have the same domain name. However, they have different extensions to identify particular pages. Look at the following Web pages that are contained within the site www.advancedacademics.com:

https://roads.advancedacademics.com/index.html
https://roads.advancedacademics.com/about.html
https://roads.advancedacademics.com/management.html
https://roads.advancedacademics.com/news.html
https://roads.advancedacademics.com/student.html

Notice that the protocol (http://), domain name (advancedacademics), and top level domain (.com) is the same for each of the above Web page addresses, but the extensions are all different. The extensions in the above Web page addresses are marked in bold, red text. These represent some of the various Web pages within the site.

Look at the first example address in the list above. Notice that the extension is "index.html." This is the site�s index page. The index page of a Web site is the page that loads when the Web site address is typed into a browser. In other words, the following two addresses lead to the same page:

https://roads.advancedacademics.com
https://roads.advancedacademics.com/index.html


Hyperlinks
How are all the Web pages in a Web site linked together? If you’re on one Web page, how do you get to the other pages within the same site? Or to other pages on other sites? Hyperlinks are used to take users from page to page on the Web, or to another place within the same document. A hyperlink, or a link for short, is a connection between a Web page and one of the following:

another Web page on the same Web site
another Web page on another site
another location on the same page
a document, such as a .pdf
an image such as .jpg or .gif
Links are often in the form of text. The link usually appears in blue type and is underlined when linked to a Web page or document. Links can also be in the form of an image. When you click that image, it takes you to a different Web site or page.

Web Page Titles and Favicons
Some things are the same for all Web pages. For example, all Web pages should have a title. (If a title is not found, it is because the writer of the Web page did not include a title tag within the coding.) When you are viewing a Web page through an Internet browser, you can see the Web page title in the title bar of the browser at the very top of the page. In the screenshot below, you can see that the Web page title is "Advanced Academics – online learning simplified."



You can also see the Web page’s title when you have it minimized. As you can see in the screenshot below, the title appears in the minimized window as well. This helps you know which to click on when maximizing your screen again.



Some Web sites also have a favicon. This is a small icon that is shown in the address bar of the Web browser to the left of the Web site address. Notice how the favicon below is a stylized "A" that represents Advanced Academics. Most favicons are representative of the company name and soon become recognizable.




What is an Interface?
Have you ever wondered how Web pages are designed? Why are some easier to go through than others? The first thing most people think about when designing a new Web site is what it’s going to look like. They think about the colors they will use and the shapes of the buttons. They imagine the animations they want to have and what links they will include in the menu. Basically, they are gathering ideas for the design of the Web site’s interface. An interface is the visual appearance that links a user with the tools and workings of an electronic program. In other words, the interface is what you see on the screen. Interfaces make it much easier to use the powerful, complex tools that computers provide. They shield users from the technology working behind the scenes. This makes computers "user friendly" and easy to work with.

What if we didn’t have the interfaces that operating systems such as Microsoft Windows and Apple OSX provide? We would all have to be able to use DOS, UNIX, or other text-based codes to use our computers. The visual interfaces (called GUI interfaces – G=Graphical, U=user, I=Interface) given by these operating systems allow users to work around all the code involved. GUIs create a friendly buffer between the user and the techno-babble that many don’t understand.

All types of electronics have interfaces. These include cell phones, DVD players, and computer programs. For example, the menu that appears on your TV screen when you put a disc into your DVD player is an interface. The DVD menu lets you choose the chapters, special features such as the bloopers, and other features on the DVD. You don’t have to physically move the needle onto the disc like your parents and grandparents probably had to do with their old turn tables (record players). You just choose an item from the DVD menu. The machine knows exactly what you want it to do.

Web pages are also interfaces. For example, Amazon.com’s Web site acts as the interface for a huge database of books, music, software, and much more. The site lets users search for products by author, title, genre, and other options. Customers can use the interface to browse this giant database for specific information, which then appears on individual Web pages. Users never actually see the database. They also don’t have to create queries or pull up tables of information. All of that takes place behind the scenes.

Advanced Academics’ online learning platform, ROADS, is another example of an interface. You are using it right now. ROADS lets you take your online courses without having to see all the code used to create them. Look at the screenshot of the ROADS interface below. Every part of the interface was planned. This includes all pieces from the position of the logo in the upper left corner to the snap menus on the right side of the screen. These make ROADS tools and activities easy to get to and use.


Advanced Academics online learning platform, ROADS

Which Comes First: Form or Function?
When designing and creating a software application, DVD player menu, Web site, or other interactive software, there are two major pieces involved. These are the application itself (the code or database that makes the program work) and the interface. Here are two ways to go about designing an interactive interface:

Design the visual interface first
Design the visual part of the application first. This must be done before building the application’s structure or database that will hold all the content users will see. This step involves interaction design—determining what happens when a user clicks on something. For example, let’s say you are designing an interface for a course Web site. You might start with the visual interface by looking at what menu options the students would want to see. Your list might include "Course Announcements," "Calendar," "Communication," and "Resources." Within the "Communication" section, you might include e-mail and a list of forums. Under the "Resources" section, you might want to place several research articles. A list of links to useful sites would work there as well. Once you decided what the students need to see, you would design the application.

Design the structure of the application first
You could also figure out how you want the information shown in the application before building the interface. In other words, decide how everything in the application is organized before designing how people will get that information. Let’s look again at the example of designing a course Web site. When designing the application first, the designer has to think a little differently. Rather than organizing the data by menu items, the designer might organize it by user permissions. For example, the design might include course announcements and a course calendar. The teacher or administrator would need the ability to create or edit those items. Students, on the other hand, would only be able to view the information, not edit it. Students also would need access to e-mail, forums, research articles, and a list of links. Some of these they would need to be able to edit. Students would need to be able to e-mail their classmates, participate on the forums, upload or download research articles, and add to the list of links. With this knowledge, the designer could make sure the interface design meets both the teachers’ and students’ needs.

Which method works the best? Most designers believe it’s more important to design the background structure first. A common motto among designers is that "form follows function." This means you first should design how you want your interface to work. Then let the visual form of the design follow. For example, imagine trying to design the interface for a Web site like Amazon.com or imdb.com. Amazon.com is an online database of books, music, and just about everything else you can buy. Imdb.com is an Internet Movie Database. It has information about almost any movie ever made, every actor who ever starred in a movie, and any director, producer, animator, and participant ever involved in a movie. Wouldn’t it be hard to design useful interfaces for such huge, complex databases if you didn’t first design the databases themselves?


Designing Interfaces
It might be important to design how a site works before you design the interface. However, the final design of the interface is equally important. The design of the interface has a huge effect on the Web site’s ease of use.

Everyone has at some point tried to use an interface that wasn't well designed. To avoid such problems, interface designs should get the same care and attention that other designs do. A Web site or application with a poor interface looks unprofessional. That makes the user wonder if the content is accurate.

Interface designers also need to control what the viewer sees. For the most part, designers of print materials have complete control over what the viewer sees. Even if the reader has selective attention, designers can still put pages together in a way to pull the reader's eyes to certain pieces. Web site designers can hand that power over to viewers. This lets viewers control what they see when they visit their site. Cookies, or files stored on your computer that contain user preferences, and settings menus let viewers customize content to their wants and needs. Interface designers have to pay special attention to make sure that good communication and functionality are in place. This must be done even though the user might be changing the content and design style to meet his or her needs.

A good Web site design should also include what we know about the world around us. We must think about how we interact with the world and other people. Then put that knowledge into the design. For example, people know what a trash can is for. In many operating systems, to delete a file you drag it to an icon shaped like a trash can. This is something that’s easy even for novices (beginners) to figure out. Everyone has used a trash can before. It is not easy for many people to use technology, even with graphic interfaces. Designers should think about these people as well and design interfaces to copy real-world activities and tools. Knowing how well some users understand technology will help the designer know what level of support the interface needs to have.

The visual piece that links a user with the tools and workings of a computer program, its interface, must be designed to suit those who will use it. Easy-to-use interfaces help make a product successful. They make the product usable for customers. When designing a Web site, make sure you think about the product’s users. Think about their level of experience, how nervous they may be about technology, and what it takes to keep their interest.



Question Number 1	Points: 5.00/5.00
Question Text
Which of the following is a visual element that links a user with the tools and functionalities of a computer program?
Your Answer
B. Interface
Question Number 2	Points: 0.00/5.00
Question Text
What is the most important thing a designer should be concerned about when designing an interface?
Your Answer
D. Whether or not the interface is visually appealing
Question Number 3	Points: 5.00/5.00
Question Text
Which of the following is a motto graphic designers follow when designing the underlying structure of an application?
Your Answer
C. Form follows function
Question Number 4	Points: 5.00/5.00
Question Text
Which of the following is considered an interface?
Your Answer
7508396:A. An Internet browser used to access a Web page ,7508397:B. The buttons on the screen of an ATM
Question Number 5	Points: 0.00/5.00
Question Text
Which of the following is an important initial step in designing an interface?
Your Answer
D. Setting up links

Audience
When you start designing a Web site you need to think about your audience. These are the people for whom the Web site is made. Not all Web sites are meant for the same groups of people. Before beginning, ask yourself who is going to visit your site. Whose attention are you trying to get? Is your Web site meant for young people your own age, for buyers of a service or product, or for anyone of any age?

For example, an online tutorial on algebra skills might be designed for an audience of middle school, high school, or college students. All three of these audiences have different needs. This means three different site designs might be needed. A record company’s Web site might be designed with a hip, teenage crowd in mind. But those going to a Web site for a hearing aid would most likely be elderly.

Designers must also consider if the audience for a Web site will be international or local. This is a major factor when deciding what language or the amount of graphics to use. Most users on the Web are not English speakers. An even larger majority do not speak English as their native language. You need to think about your audience’s culture when designing your Web site. One term might mean something in the U.S. while it has a completely different meaning somewhere else in the world.

Imagine having to design the Web site for the Olympics. You would have to cater to all the different languages from countries all around the world on one single site. You’d probably have to use a lot of symbols in place of words. However, you’d also have to be very careful as to which symbols you used. The same symbol can have very different meanings for different cultures. For example, in the United States, we usually link the dog with loyalty. The Chinese culture has similar meanings for the dog. However, in Islamic cultures, the dog represents dirtiness. Choosing one symbol to represent one emotion or message that is the same for all cultures is very difficult.

Remember the importance of designing for your audience. When a Web site has been created with the audience in mind, it should easy to identify the intended audience just by looking at the site. Most designers conduct an audience analysis before creating a site.


Audience Analysis
Audience Analysis
You need to know as much about your audience as you can to be a good Web site designer. The Web site design must work for the intended audience and serve its audience’s purpose. For that to be the end result, the designer should conduct research on the audience by doing an audience analysis. An audience analysis helps you decide what type of user will be using your Web site.

Let’s look at an example. To help raise the reading abilities of preschool children, you'll design a Web site that teaches the phonetic sounds of the alphabet. As the designer of this Web site, you do a lot of research in the areas of reading and preschool education. You design and develop the Web site based on your research findings. The site uses all the proper instructional methods. It is creative and interactive. In theory, it should be very successful. But there’s one major problem. The software is too complicated for preschool children to use. You, the designer, forgot to do a full audience analysis before designing the software. Now it’s almost useless! Do you understand now how analyzing your audience is a main part of the design process?

Lenny Laskowski, a professional speaker who wanted to easily remember how to analyze his audience when preparing to give a presentation, created an acronym from the word audience. I’ve modified his acronym just a little bit so it applies to Web site design as well.

A
Audience:
Who will be visiting the Web site?
U
Understanding:
How much does the audience already understand about the content of the Web site? How well does the audience understand technology?
D
Demographics:
What is the audience's age, gender, and educational background?
I
Interests:
What types of things is the audience interested in?
E
Environment:
In what environment will the Web site most likely be accessed?
N
Needs:
Does the audience have any specific needs that need to be addressed in the design of the site?
C
Context:
In what contexl will the Web site be used? What will its purpose be?
E
Expectations:
What does the audience expect to get from the Web site?


Audience Analysis
A
Audience:
Who will be visiting the Web site?
Audience is important in Web site design. In most cases, the whole purpose of a Web site is to encourage someone to do something. Advertising Web sites are designed to get people to buy or act. Informative Web sites are often designed as sales tools. They also may be designed to help people research and find information. Instructional sites are designed to help people learn. As you can see, understanding your audience and using that understanding in your design will help your Web site be a success. Without knowing who your audience is, how can your Web site possibly be helpful?

U
Understanding:
How much does the audience already understand about the content of the Web site? How well does the audience understand technology?
Figuring out what the audience already knows and understands when developing your site content is vital. It helps you decide how much and what kind of information to include. You want to provide enough information in your design to help the message come across clearly. However, you don’t want to include information the audience already knows. You want to give the right amount and right kinds of information so you don’t bore the audience. This only wastes space and time reminding users of what they already know, or can cause mental overload.

For example, let’s imagine you’re designing a Web site that will host an online puppy training course. You must know how much the audience, each current or potential dog owner, already knows about puppy-training and about dogs in general. If you don’t provide enough information on the Web site, it won’t be useful. However, you don’t want to give too much detail either. This can cause the audience to be offended and feel that you are talking down to them. Even if that’s not the case, the extra information may just get in the way of and distract from the main information. That’s why it’s important to find out how much the intended audience knows about puppy training when designing the Web site. To do so, you might ask several questions. Is this the audience’s first training class? Is this a first puppy? Is this a first pet? Having this information will make it easier to know how much information to include in the materials. Keep in mind, though, that there usually is more than one person in the audience. The individual needs of each person will differ. You must think about these differences when analyzing the audience as a whole.

Typically, if the individual needs of your audience differ dramatically, you’ll want to create separate designs for each group. For example, if some people taking the puppy training class just got their first dog, but several others have had three or four dogs before, you might want to have two sections on the Web site. They could be "Puppy Training for Beginners" and "Puppy Training: A Refresher Course." If you’d rather not separate the site, you still must find these differences and account for each of them in your one design.


D
Demographics:
What is the audience's age, gender, and educational background?
The demographics of the audience refer to the shared traits of the people in the audience. Demographics include information about average age, race, gender, educational background, and so forth. This information is important because it gives you a better understanding of your audience. It tells you what the audience can do, its culture, its attitudes, and even its level of education. Again, there are often individual differences among the people in the audience. Not everyone in the audience will have the exact same background. Some may have a college degree while others might not have graduated from high school. In this case, it’s always safe to design your Web site at the standard, sixth-grade reading level followed by most newspapers and magazines. As a Web site designer, you don’t always have to address each demographic in the audience. However, understanding the basics can guide you in your site design.

When analyzing the audience’s demographics and what they mean for your site design, please be aware of racial and ethnic stereotypes. Avoid stereotyping groups of people. Don’t make assumptions about your audience based on their demographics. You should complete your research to make sure all of the information you are collecting is true and fair to your audience.



I
Interests:
What types of things is the audience interested in?
What are the audience’s interests? Designing with the audience’s interests in mind will result in a Web site that will better gain and keep the audience's attention. For example, let’s say a Web designer has two clients. They are Rev It Up, a company that restores and sells classic cars, and Sylvia Platt, Redman College president. In many ways, the intended audiences for these two Web sites are very similar. But do you think the sites should be designed similarly? No way! The two audiences have completely different interests. For example, people visiting the Rev It Up Web site are far more likely to be interested in seeing pictures of cool, restored hot rods and a catalog of parts for classic cars. People visiting the Redman College president’s Web site are more likely to be interested in reading a letter from the president.

Also, think about how products like cars and shoes can be offered in a variety of colors. Products are made to appeal to a very wide audience with different interests. The choices of colors and styles available in a Web site design serve these different interests well. The audience’s interest should be a key in design.

E
Environment:
In what environment will the Web site most likely be accessed?
Sometimes the environment, the place in which your Web site will be used, affects the design process. To know your site’s potential environment, ask yourself about the people and situation. For example, if you are designing an online card catalog site for the local library, you’ll need to think about that environment. The site will most likely be used in the library. You’ll want to avoid using any sound effects on the site so you don’t offend the other visitors. Are the instructions both clear and brief? The people reading the instructions probably won’t want to spend too much time on the site. They would rather quickly find the information they’re looking for and move on.

N
Needs:
Does the audience have any specific needs that need to be addressed in the design of the site?
Are there any specific needs the audience has, such as accessibility issues or low vision? If so, you should try to meet these needs in your design. You must know and assess these needs before beginning your design. This goes back to that a standard rule in graphic design: Your solution must work! Your design solution must meet the audience’s needs! For instance, images are great, but the blind can’t see them. If designing a site for the visually impaired, it’s important to think of an alternative to images and frames.

Consider a life raft instructions sign as an example. The audience has many needs here. They need to quickly identify how to access, board, and use the life rafts. All the while, they need to keep a calm composure. The design and color of the sign can help achieve all of these needs by giving clear, straightforward instructions, diagrams, and illustrations that instruct passengers and encourage people to stay calm.



C
Context:
In what contexl will the Web site be used? What will its purpose be?
You also need to think about the context in which your site will be used. Are you designing for co-workers at the workplace, fellow students at school, or for the public in general?

If you’re designing a company’s Web site, you’ll want to steer away from loud color schemes or styles. This type of site should be professional, use the appropriate language, and be clean and clear.

On the other hand, if you’re designing a Web site to show off pictures from your grandparents’ fiftieth anniversary party, you’ll probably make the site more playful and fun. Don’t bore your audience to death with lifeless pages! Add some flair by using colors, photographs, and text. You can even add music!

Finally, if you’re making a Web site to present your research report for your class at school, you’ll want to add illustrative graphics and interesting examples. You should make sure that you don’t offend your audience with a childish design. But you also shouldn’t assume your audience knows more than it does, either.

E
Expectations:
What does the audience expect to get from the Web site?
For most Web sites, the intended audience expects certain things. You must think of these expectations when working on your site design. For example, users tend to have very specific expectations of the Web sites they visit. These are getting more and more common as the Web becomes more popular. Users expect to see certain links and information. If this information is not there or is not easy to find, the user will leave and find the information on another site. Being aware of exactly what users will want from the Web site you’re designing will help your design meet their needs.


Finding What You Need
When you go to the grocery store, you expect to find certain items in certain places. You expect vegetables to be kept with other vegetables. Your favorite boxes of cereal should be stocked near the oatmeal and other breakfast items. Imagine how hard a simple trip to the grocery store would be if all the products were unorganized. Even when items are organized, signs help people find what they are looking for. These signs help you to easily navigate through the store and find what you’re looking for without having to stroll down every single aisle.

Web site navigation is similar to grocery store navigation. Organization and signs help you find your way through a site, just like in the store. Finding your way around a Web site should be very easy. Like the signs above grocery store aisles, Web site interfaces should contain visual cues that lead users to where they want to go. Web site designers must think about ease of navigation.

Navigation Elements
Have you ever visited a Web site and had no idea where to go? Perhaps you didn’t know where to click to find the content on the site. Maybe the menu system was confusing. Maybe it just didn’t seem to work. When designing the navigation for a Web site, it’s important to make the navigation elements clear and easy to use. Web site visitors must be able to see their navigation options immediately upon entering. They must be able to find their way around your Web site. Navigation should be intuitive, or instinctive.

Some Web site interfaces use a menu system. Others provide buttons or links. No matter what navigation elements a Web site uses, those elements must be designed well. Users should know exactly what they are looking at when they first view a Web site's interface. Visitors should also know what they are supposed to do now that they are there. All users should be able to do what they need to do, or find what they want, in very few steps. For example, your Web site might have a "Contact Us" link in the menu that simply leads to an e-mail address. You might want to change "Contact Us" to "E-mail" and link it directly to the e-mail address. This saves the user one step, cutting in half the number of steps it takes to find an e-mail address.

Common navigation elements are:

Buttons
Text links
Drop-down menus
Tabbed menus
Buttons
Navigation Buttons
Your Web site design should make it obvious to the user what’s clickable and what’s not. For starters, compare the intuitive buttons and links in the table with those that are not.

Of the two gray "Pictures" buttons, see how the one on the left has a raised edge. It looks like an actual button. This button is an intuitive navigation piece because people relate this image to that of an actual button they can push. The button on the right, however, is flat. It is not intuitive because it doesn’t look like it can be pushed. It is not clear that clicking on this image will lead the user anywhere. You can’t even tell that you should click on it. Buttons, when designed well, are good navigational elements because they pull attention and are easy to spot. The problems with buttons are that they can be clunky, take up too much space on a screen, and take longer to download than text links. This is because buttons are a type of graphics.

Text Links
There also are two examples of text links in the table. Linked text can take any form or color. However, people familiar with the Internet know that bright blue, underlined text has become a standard sign of a hyperlink. The plain, black text doesn’t look like a link. It just looks like text. Even if it was a different color, people still would think of it only as text. They may not realize they can click on it.

Designers sometimes stay away from such standards or design conventions. Some seek to come up with more creative solutions instead. There is nothing wrong with that, but keep in mind that such standards became conventions for a good reason—they work. When designing a Web site’s interface, sticking with navigation elements that are obvious or easy to spot will make the site easier to use. For example, setting hyperlinks in blue, underlined text is clear to the user. Text links are great for navigation because they load very quickly and are easy to spot.

Drop-down Menus
Drop-down menu
Drop-down menus are great when there isn’t much screen space in an interface. Look at the example of a drop-down menu shown here. The darker pink bar across the top is the main menu bar. It lists the links for "About Us," "Products," "Services," "Portfolio," and "Contact Us." When each of these links is clicked, a submenu drops open below it. Any menus within the submenu pop out to the side. Notice how the actual menu bar in this example only takes up a small amount of space when it’s not expanded. In this way, drop-down menus save screen real-estate. This is the amount of space available on a screen to display information.

Drop-down menus are also great ways to organize information on multiple levels. For example, a menu may have five items in it, each with several subheadings. Drop-down menus can organize this hierarchy of information. The example shows three different levels of information. "About Us" is at the top level, "Employee Profiles" is at the second level, and the individual profile for Craig Jonathan is at the third and lowest level.

The main problem with drop-down menus is that earlier versions of some Internet browsers don’t support that style of menu. Users with these browsers or text readers may not be able to view and use the menu system.

Tabbed Menus
Tab menu
Using tabbed menus is another great way to save screen real-estate. Sometimes, the information on a site can be broken up into a handful of clear categories. Tabs can be used to move between these various sections. Just about everyone has used tabbed separators in three-ring binders or tabbed file folders. When Web site tabs reflect their real-life uses, this navigation becomes intuitive. Look at the example above of a tabbed menu system. You can click on five separate tabbed categories. Each tab leads to a submenu (see the blue hyperlinks at the top of the tab). This overlaps information and saves a lot of screen space.

Look again at the above example. See that the tabbed menu system is made so that the chosen tab (Movies) appears to be in front of the other tabs. That is done by not using a horizontal line to separate the tab itself from the content area. Color can also make it stand out. The color of the open tab is different from the color of the other tabs.


Types of Navigation
There are several ways to organize the information within a Web site or application. This is known as the information structure. You should decide on your information structure before beginning any design. An interface’s navigation tools depend on this structure. There are five types of navigation, or information structures. They are:

Linear
Reciprocal
Sequential
Hierarchical
Web
Linear Navigation
Linear navigation is a one-way, sequential order of frames. It only moves forward. The user only has the option to go to the next frame. Linear navigation presents information like a slide show in which you can’t go backwards to parts you’ve already seen.

Pages connected with right arrows, showing that moving back is not possible.
Linear navigation is used when the information structure of the application is very simple and needs to be shown in order. It’s also good when users are not as comfortable with computer technology and/or interactive applications. This type of navigation is good for tutorials and training modules. For these, it’s important for the information to be given in order. It keeps the learner moving forward.

Reciprocal Navigation
Reciprocal navigation is very similar to linear navigation. The difference is that the user is able to move back and forth between frames. Reciprocal navigation presents information like a book. You can flip pages from beginning to end, and you can also flip back and forth between pages to review earllier content.

Pages connected with double direction arrows.
Reciprocal navigation is also good when information needs to be shown in order or when users are not comfortable with computers and/or interactive applications. In an interface that uses reciprocal navigation, the two main navigation elements provided are "Next" and "Back" buttons. This is similar to a linear navigation. "Escape" and "Exit" buttons are also frequently used. Users are unlikely to get confused because the navigation choices are limited. Because they are so simple. these are good information structures for users who may not be comfortable in an online environment.


Sequential Navigation
When the information structure of an application is a little more complicated, you might be able to use sequential navigation. Sequential navigation shows frames in a straight line. This is similar to linear or reciprocal navigation because it shows frames in a certain order. However, some frames break off into secondary sets of linear frames.

Multi-level pages connected with single direction arrows.
This is a common type of navigation used with a simple menu system. It is often used in tutorials and training modules. In sequential navigation, the menu may give five links that must be viewed in order. Each link leads you to a short, linear tutorial. At the end of the tutorial, you are taken back to the menu and given the option to click the next link in the menu.

The online course you are taking now uses a form of sequential navigation. You move linearly through each module one at a time. But within each module there may be multiple pages that you must view linearly as well. Sequential navigation can be set up linearly or reciprocally. With the ROADS system that Advanced Academics uses, the navigation is reciprocal. You are able to move back and forth between the pages at will. Take a moment to look at the navigation elements of this system.

Navigation bar.
The navigation bar at the top of the page lets you move back and forth between ROADS sections, or modules. In the image above, the row of frames at the top of the sequential navigation represents these modules. Within each module, a smaller navigation bar lets you move back and forth between the pages. The second row represents these individual module pages.

When designing navigation, be certain not to leave users hanging. Provide a "Home" or "Back" button, as well as an "Escape" or "Exit" button, on every page. This gives users the option to move forward, back, or out of the application at any time. The more complex the application’s information structure, the more aware the designer must be of the navigation built into the interface. Navigational controls must be on every page to which an application links.


Hierarchical Navigation
The most commonly used navigation system is hierarchical. Hierarchical navigation organizes groups of information structures into many levels. It is used for more complex information structures. Hierarchical navigation actually includes a variety of other navigation styles.

Look at the illustration of a hierarchical navigation structure shown below.

Multi-level pages and multi-directional arrows.
The frame at the very top is the main frame. This is where the menu is found. The frames in the second row (level) mark the different menu items. From here, some frames break off into groups of linearly-organized frames. Others contain submenu systems. Do you see how a hierarchical system can use other forms of navigation?

Because hierarchical navigation systems provide more options, they give the user a sense of control. This is good for the user because he can choose where he wants to go. If the user is new at using computers, this freedom might be bad. Hierarchical navigation gives the user so many choices that it may confuse or overwhelm him.


Navigation
Menu Systems
Whether users are novices or experts, they typically act the same way when visiting a Web site. Most users are in a hurry. They don’t take the time to figure out how a Web site is organized. They dive right in and click on links. They just dig through the application, trying different options and links until they find what they want. It is important to design a logical menu that gives about five to eight items. The number should not go above eight no matter what form the menu system takes. This is true whether it’s a drop-down menu, list of links, row of buttons, or a tabbed system. A more complex menu system will only confuse your user. This will make her have to think much more than she wants to. So keep the menu simple. By using no more than eight items, it will also fit on the first screen that appears when the user logs in. This simplicity will mean that users don’t need to “cursor” down in order to see the entire menu.

Users tend to click the first menu option or link that seems like it might give the information they want. Even if there is a better option below it, users don’t continue looking. They just click and go. Because of this, you must name menu items clearly.

Making your site less confusing will make it more successful. To avoid confusion, menu items should be intuitive. Users should be able to know exactly what the menu item has to offer before they click on it by reading its title.

Look at the examples below.

Sample buttons.
Let’s say a user has concerns about an order she recently placed with a company. She visits the company’s Web site to find an e-mail address. When the user sees the options above, she will be confused. Each of these options could contain the needed information. When designing these types of user options, you should ask yourself the following questions:

Can I minimize the number of menu options by combining one or more of them? Can I rename the menu buttons to better distinguish them from one another? Neither one of these strategies may be an option for you. If you use multiple links, provide the information in question (the e-mail address) in each of these application areas. That way, no matter which button the user chooses to click, she will find what she's looking for.


Sitemaps
Example Site Map
Sometimes, users just can’t figure out a menu system. They may not be patient enough to try. A sitemap can be provided when the Web site has a complex information structure. A sitemap is an organized hierarchy of links to every page or frame in a Web site. Sitemaps can be organized in multiple ways.

Look at the graphic to the right. It is a sample sitemap for the Web site of a small bookstore. This is just one example of how a sitemap can be organized visually. Like all sitemaps, each frame or page is listed individually. The information structure, or the hierarchy of the site, is shown visually. The levels of the hierarchy are easy to see. It is obvious that the highest level of the hierarchy contains three links: "Books," "Movies," and "Customer Support." These three main menu items (links) are separated from the submenus. They appear at the left of the screen and away from the other links. This makes the main menu items stand out. Another way to tell each main menu item apart is to use different colors. This example shows each level in the menu in a different color. The different colors reinforce and emphasize the three items in the highest level of the hierarchy. The submenu items are set apart as well. They appear in the center of the screen, while the lowest level of the hierarchy appears on the far right. Each item in this site map also links back to its named frame or page.


Marking Location
Just like Web sites that use linear or reciprocal navigation, Web sites with hierarchical navigation should give the user a sense of context. This lets users know where they are within the site. Context is a little more complicated with hierarchical Web sites than simply providing a "Page x of x" note or another simple progress tracker. There are many ways to display options within menu systems to let users know where they are within a site. The following graphic displays some of the more common methods.

Examples of user location markers.
Breadcrumbs
Users need more guidance in more complex sites. Users need to know the scale of the Web site they are working with. They need to know how big the application is. They need to know where they are within the application in relation to other frames or areas of the site. Users also want to have an idea of where they are going. How many frames will they be looking at?

Breadcrumbs are often used to give the user a sense of context. Breadcrumbs are lists of links that show the hierarchy of the frames that the user has visited to reach his current location within a Web site. Breadcrumbs tell users where they are in relation to the Web site as a whole. The whole idea of a breadcrumb is that the user can leave something behind everywhere he goes. Imagine dropping breadcrumbs everywhere you go while eating a sandwich! Breadcrumbs keep track of where users are and where they’ve been. They also help you find your way back to a point you want to go to. It works the same as dropping breadcrumbs along a path in the woods.

Example of breadcrumb links.
Notice the symbols used between the links in the example above. The symbols that separate these layers of information can vary. In the example, the greater than symbol (>) is used. This is the most common symbol in situations like this. It works well because it looks like forward movement. It also suggests that the links listed first are larger, or higher in the hierarchy. Other symbols, like forward slashes (⁄), colons (:), or straight vertical lines (|) can also be used.

Notice the size of the text. Small text is used because breadcrumbs are not a main part in an interface. There is usually a main menu system in addition to the breadcrumbs. Notice also how the last item in the breadcrumb is a different color than the rest of the text. This last item shows the user’s current location. It should stand out in some way by being either bold or colored.


Navigation
Web Navigation
Web navigation, as its name suggests, is the most common type of navigation used in Web sites. Web navigation shows many frames or sites of information that are linked to other related frames or sites. This is exactly how the Internet is organized. Countless Web sites are available. They all linked to each other in a variety of ways. The frames or sites involved in a Web navigation system are not grouped into organized categories. They are just linked to each other as needed.

Wb navigation of multiple pages linked to multiple pages.
Web navigation is very pleasing. It gives the user the greatest sense of control. The user has many options of where to go. However, this type of navigation can also be confusing. It’s really easy for users to miss pieces of information if they don’t click on all the links. Many users are just looking for one piece of information on a site. Since most aren’t looking to view every single piece of information on the site, this type of navigation is very good.

Providing a Sense of Context
In simple information structures, like the ones that use linear or reciprocal navigation systems, users can’t really get lost. However, users do need a sense of context to know where they are in relation to the Web site as a whole. This is needed when there are several pages within one site. It’s important to provide a logo or title on each page of the site to help make sure users always know where they are. This is very important because it’s easy to click on a link that leads a user to an entirely different Web site without the user's knowledge.

Web site interfaces also should provide a sense of where the user is within the site. Have you ever stopped to use a directory at a shopping mall or amusement park? After you find where you want to go, what’s the next thing you look for? Where you are! You look for that little star or dot labeled "You Are Here." What good is a map if you don’t know where you are in relation to everything else on it? Users have the same need when working their way through Web sites. They want to know where they are.

With Web sites that use linear or reciprocal navigation, such as online tutorials, users usually want to know a number of things. They want to know how long an application will take to complete (how many pages there are), how far along they are, and how many pages are left for them to see. Giving this guidance is rather easy. Notice how Advanced Academics’ ROADS interface provides a "Page x of 2" cue that tells you exactly where you are within a lesson. Cues like this keep viewers grounded. It also helps them complete the process by letting them see their progress.


There are several ways you can show cues of users’ progress. The progress tracker below uses bubbles to mark frames or pages. The green bubble (the next to last one in the progress tracker) shows the user’s location within the site. As you can see, the user has one more frame to see before he reaches the end of the line of Web pages.


Web site visitors must be able to see their navigation options right away. They also must be able to find their way around a Web site. Navigation should be intuitive. Navigation elements such as buttons, text links, drop-down menus, and tabbed menus make it easy for visitors to find their way around. Once at the Web site, where users go next is defined by the site’s information structure. There are five types of structures: linear, reciprocal, sequential, hierarchical, and Web. In simple information structures, like the ones that use linear or reciprocal navigation systems, users can’t get lost. However, users need a sense of context to know where they are in relation to the application as a whole. It’s important to make sure users always know where they are. Designers do that by using various types of visual cues. These can be progress trackers that use bubbles or page numbers to mark which page of how many pages the user is viewing. It is the designer’s job to give navigation and context on a Web site.



Question Number 1	Points: 5.00/5.00
Question Text
Which of the following is the amount of space available on a screen to display information?
Your Answer
C. Screen real-estate
Question Number 2	Points: 5.00/5.00
Question Text
Which of the following should interfaces include to lead users where they want to go?
Your Answer
D. Visual cues
Question Number 3	Points: 5.00/5.00
Question Text
Which type of navigation only involves forward motion?
Your Answer
B. Linear
Question Number 4	Points: 5.00/5.00
Question Text
Which of the following is a way to organize information that has multiple levels?
Your Answer
B. Drop-down menus
Question Number 5	Points: 5.00/5.00
Question Text
Which of the following is a great way to save screen space when information on a site can be broken up into clearly defined categories?
Your Answer
D. Tabbed menus

Designers must keep in mind a number of things when designing an interface that users will access across the Internet.

Why Interface Design Differs for Internet Versus Local Access
Interactive applications or Web sites hosted on the Internet differ from applications that are hosted on a CD-ROM, hard drive, or local server. The most important difference is that designers have less power over interfaces that are hosted online. They can’t control what kind of computers the users may have. They can’t see what programs users are running. Designers have to create Web-based interfaces flexible enough to be used by many users and computers in a variety of environments. However, there are other reasons to think about these elements.

Information from a local hard drive or a CD-ROM on a user's computer responds very quickly. When a user works with an interactive application or Web page from across the Internet, however, the interaction can be affected by the Internet itself. When the application or content must first travel through the Internet, the download time will increase. Think about these factors when designing Web-based interfaces.


Seven Things Designers Must Consider When Designing for the Web
Designers can’t just think about the different ways a site may be accessed. They also must think about the design itself. There are seven specific things to think about. They are listed in the graphic to the right. The graphic summarizes the seven key principles you must keep in mind when designing interfaces for use on the Web.

Notice that many of these are the same as those for designing any other type of interface. These seven items are an ideal checklist to keep handy when designing various interfaces, regardless of access method.

Relevance of Content
For content to be relevant, designers must make sure all content and design elements included on the Web site meet the following adjectives:

Necessary
Non-distracting
Organized
Accessible
Get rid of content you don’t need
. A good way to judge if an element is needed is to take it away. Then see if the site still works well without it. If the element is unnecessary or redundant, get rid of it.

Avoid distractions
. Avoid distracting online visitors with animated GIFs, blinking or scrolling text, or sound files. These files take extra time to download. They also snatch viewers’ attention away from what’s really important—the content of the Web site.

Organize content
. Be certain the content included on the Web site is organized and easy to find and read.

Make content accessible.
Make certain viewers can find the source of the information on the Web site easily. This way, if they want to contact you, they can. Have a link to your e-mail address or at least to the home page on every page of the Web site.


Ease of Navigation
For a Web site to be easy to navigate, its design should be simple and intuitive. Designers need to make sure the navigation structure reflects the information on the site and is clearly organized. For easy navigation, designers must build so users can do the following things:

Get to places easily
Determine which elements are clickable and which are not
Locate navigation controls easily
Understand menu options dependent upon how they are labeled
Access the home page quickly
Use reliable internal links
Remain within the site easily
Identify the current Web site quickly
Make it easy to get places
Users should be able to tell exactly where they are within an application. They should be able to get anywhere they need to be. They should also be able to find the information they need in the least number of steps or clicks possible.

Make it clear which elements are clickable
Clickable items should be obvious. Use highlighted graphics or text. Text links should be blue and/or underlined.

Keep navigation controls in view and on every page
Don’t put navigation tools at the bottom of the page unless they are at the top as well. This forces users to scroll down to the bottom of your page to reach them. Keep in mind that you shouldn’t force users to return to the home page after viewing each page of your Web site. Provide navigation tools on every page so they can easily navigate elsewhere.

Label menu options clearly
Label links and menu options clearly so users know exactly what to expect when clicking on a link.

Provide a link to your homepage on every page
Users who become lost in a Web site have at least been to the home page before. It's a familiar space. Visitors can feel comfortable there. Keep this in mind when designing your Web pages. Visitors may get confused about navigation, or they may be unable to remember where they saw something important. For Web users, this is the equivalent of being lost in the woods. Give your visitors an easy marker to get back to the home page. It’s more likely they will successfully find what they’re looking for if they start over from the beginning. Install a link back to your Web site's home page on every page within the site.

Test your links to keep them reliable
Test your links regularly. Be certain to test the site after you’ve uploaded it to the Internet. Don’t test it only from your hard drive.

Limit external links to keep your users from getting lost
Limit the number of links that lead to external sites. Your viewers may get lost in cyberspace. Plus, there’s no reason to encourage them to leave your site if you have what they need!

Identify yourself
Make it clear to the user just whose Web site they are visiting. Make sure the name of the Web site or the company logo appears on every page.

Ease of Navigation
For a Web site to be easy to navigate, its design should be simple and intuitive. Designers need to make sure the navigation structure reflects the information on the site and is clearly organized. For easy navigation, designers must build so users can do the following things:

Get to places easily
Determine which elements are clickable and which are not
Locate navigation controls easily
Understand menu options dependent upon how they are labeled
Access the home page quickly
Use reliable internal links
Remain within the site easily
Identify the current Web site quickly
Make it easy to get places
Users should be able to tell exactly where they are within an application. They should be able to get anywhere they need to be. They should also be able to find the information they need in the least number of steps or clicks possible.

Make it clear which elements are clickable
Clickable items should be obvious. Use highlighted graphics or text. Text links should be blue and/or underlined.

Keep navigation controls in view and on every page
Don’t put navigation tools at the bottom of the page unless they are at the top as well. This forces users to scroll down to the bottom of your page to reach them. Keep in mind that you shouldn’t force users to return to the home page after viewing each page of your Web site. Provide navigation tools on every page so they can easily navigate elsewhere.

Label menu options clearly
Label links and menu options clearly so users know exactly what to expect when clicking on a link.

Provide a link to your homepage on every page
Users who become lost in a Web site have at least been to the home page before. It's a familiar space. Visitors can feel comfortable there. Keep this in mind when designing your Web pages. Visitors may get confused about navigation, or they may be unable to remember where they saw something important. For Web users, this is the equivalent of being lost in the woods. Give your visitors an easy marker to get back to the home page. It’s more likely they will successfully find what they’re looking for if they start over from the beginning. Install a link back to your Web site's home page on every page within the site.

Test your links to keep them reliable
Test your links regularly. Be certain to test the site after you’ve uploaded it to the Internet. Don’t test it only from your hard drive.

Limit external links to keep your users from getting lost
Limit the number of links that lead to external sites. Your viewers may get lost in cyberspace. Plus, there’s no reason to encourage them to leave your site if you have what they need!

Identify yourself
Make it clear to the user just whose Web site they are visiting. Make sure the name of the Web site or the company logo appears on every page.

Length of Download Time
Web site visitors share one common complaint. Web pages take too long to download! When a slow response occurs, users often choose to visit other Web sites and leave the one you designed. When this happens, your visitors may never return. To make sure users are not chased away by slow downloads, designers should take the following steps:

Make sure image files are the appropriate size and not oversized
Use thumbnails when multiple images are needed, or when full images are bandwidth intensive
Avoid flashy graphics and multimedia files
Make sure image files are the appropriate size.
Don’t present huge images, graphics, or other files that will take a long time to load. Many people don’t have high-speed Internet or the latest and greatest computers. You should think of these users when designing. The resolution of your images should be no more than 72-100 dpi (dots per inch). They should also be no larger than 20K in size.

Use thumbnails when multiple images are needed.
When a page presents several images, use thumbnails. These are small images that usually are linked to larger versions of the original images. Using thumbnails for a page where there are several images (like a photo gallery) reduces the time it takes for the images to load. It gives users the option to preview images then click only on the ones they need. This makes for faster load times overall.

Avoid flashy graphics and multimedia files.
Flashy graphics and multimedia files will slow down the Web site’s response time. They also may distract your viewer from the content of your site. Whenever possible, use simple graphics. Use multimedia files only when required. You might also give users the option of accessing a "Flash – high graphics" version or a "text only" version.

Compatibility
As previously stated, you cannot control what software and computers a Web site visitor uses when accessing your site. Therefore, you must:

Make certain your site can be viewed on all browsers and still appear relatively the same
Make certain your site can be viewed on all platforms
Make certain your site can be viewed on all browsers.
Every browser displays Web sites a little differently. Internet Explorer, Mozilla Firefox, and Apple Safari are common browsers. You should always test your site on each of these browsers and any others your audience may be likely to use. This will let you make sure your Web pages load well on each browser. Many browsers read coding differently. You may need to change your code in order to make it appear correctly.

Make sure your site can be viewed on all platforms.
Web sites may load differently on PC computers than they do on Apple computers. Test your Web site on both platforms to make sure it loads and runs well on both.


Visual Appeal
As much as we’d like to think that looks don’t matter, a visually appealing Web site is vital to holding a visitor’s attention. To make certain you don’t lose visitors to other sites, Web designers should create a design that will meet the following criteria:

Keep it simple
Be consistent
Use quality appealing and appropriate graphics
Keep it simple.
The visual appeal of your Web site is key. Visitors often decide in less than a second whether to stay or leave. This judgment is often based on the visual appeal of the site. A clean, organized Web page looks professional and respectable. Avoid clutter and other distracting elements. Simplicity will give viewers a straightforward, distraction-free page to search.

Be consistent.
Use one design style, color scheme, layout, and font list throughout the Web site. Use colors that contrast well. Design one layout and use it on each page. Use the same fonts and font sizes on each page.

Use quality graphics.
Pay attention to the quality of your graphics. Stretching graphics creates fuzzy images and jagged edges. Web site graphics need to look professional and appealing to keep visitors interested and at your site.

Designers have little power or control over what systems and software visitors use to look at Web sites. As a result, Web designers must keep in mind seven specific design concepts. These will help designers to create flexible, Web-based interfaces that can be used by a multitude of visitors regardless of the computing environment. Those seven concepts are:

Relevance of the content
Ease of navigation
Consistency of format
Legibility of type
Length of download time
Compatibility
Visual appeal


Question Number 1	Points: 5.00/5.00
Question Text
What is the most effective way to identify text links?
Your Answer
A. Blue and/or underlined
Question Number 2	Points: 2.00/2.00
Question Text
WYSIWYG-based interfaces tend to confuse users and should be avoided.
Your Answer
False
Question Number 3	Points: 5.00/5.00
Question Text
How do viewers perceive a poorly designed interface?
Your Answer
C. Unprofessional
Question Number 4	Points: 5.00/5.00
Question Text
What is the extension .com an example of?
Your Answer
B. TLD
Question Number 5	Points: 5.00/5.00
Question Text
What is indicated in red in the following Web page address? http://www.google.co.jp
Your Answer
D. Top level domain
Question Number 6	Points: 0.00/5.00
Question Text
Which type of navigation is illustrated?


Your Answer
A. Hierarchical
Question Number 7	Points: 5.00/5.00
Question Text
Which of the following Web pages is not contained within the site www.website.ext? (Choose all that apply.)
Your Answer
7508322:C. www.website.link ,7508323:D. www.website.web/web.html
Question Number 8	Points: 5.00/5.00
Question Text
What is the name of the part of the URL highlighted in red in the address below?  http://www.advancedacademics.com/about.html
Your Answer
A. Domain name
Question Number 9	Points: 5.00/5.00
Question Text
To which of the following can a hyperlink be used to connect? (Choose all that apply.)
Your Answer
7508336:A. A JPG file ,7508337:B. A PDF document ,7508338:C. Another location on the same Web page ,7508339:D. Another Web page
Question Number 10	Points: 5.00/5.00
Question Text
Which of the following URL addresses will take the user to the same site as: www.advancedacademics.com?
Your Answer
B. www.advancedacademics.com/index.html
Question Number 11	Points: 5.00/5.00
Question Text
Why should links be tested regularly?
Your Answer
A. To keep them reliable
Question Number 12	Points: 5.00/5.00
Question Text
What does the menu system on your DVD player illustrate?
Your Answer
A. Interface
Question Number 13	Points: 5.00/5.00
Question Text
Which type of navigation is illustrated?


Your Answer
B. Linear
Question Number 14	Points: 5.00/5.00
Question Text
A design includes too much essential information that the audience already knows. What area of the audience analysis did the designer fail to address?
Your Answer
D. Understanding
Question Number 15	Points: 5.00/5.00
Question Text
What does knowing a user's understanding of technology help a designer to determine?
Your Answer
A. Level of support the interface needs to provide
Question Number 16	Points: 5.00/5.00
Question Text
The acronym AUDIENCE serves to remind you of what to consider when analyzing an audience. The "U" stands for "understanding." How does this play into the audience analysis?
Your Answer
D. The designer needs to consider how much the audience already knows about the content around which the design is centered.
Question Number 17	Points: 5.00/5.00
Question Text
What should a good interface design incorporate?
Your Answer
B. Icons and functionalities that reflect the world in which we live
Question Number 18	Points: 5.00/5.00
Question Text
Which type of navigation is simliar to a book because users can move back and forth between frames?
Your Answer
C. Reciprocal
Question Number 19	Points: 5.00/5.00
Question Text
The acronym AUDIENCE serves to remind you of what to consider when analyzing an audience. In the acronym, what does the "C" stand for?
Your Answer
D. Context
Question Number 20	Points: 2.00/2.00
Question Text
Web navigation gives the user a sense of control.
Your Answer
True
Question Number 21	Points: 5.00/5.00
Question Text
Where should your homepage link be placed?
Your Answer
C. Every page
Question Number 22	Points: 5.00/5.00
Question Text
What's another name for a Web site address?
Your Answer
C. URL
Question Number 23	Points: 2.00/2.00
Question Text
Designers have more power over interfaces that are hosted online than those hosted on a CD-ROM or hard drive.
Your Answer
False
Question Number 24	Points: 2.00/2.00
Question Text
The Internet is a part of the World Wide Web.
Your Answer
False
Question Number 25	Points: 5.00/5.00
Question Text
Which type of navigation is illustrated?


Your Answer
C. Reciprocal
Question Number 26	Points: 5.00/5.00
Question Text
What is the extension .net an example of?
Your Answer
B. TLD
Question Number 27	Points: 5.00/5.00
Question Text
What type of problem might occur while a designer is assessing an audience's demographics?
Your Answer
D. The designer might jump to conclusions and apply stereotypes to the audience.
Question Number 28	Points: 5.00/5.00
Question Text
How can you judge the relevancy of a design element?
Your Answer
D. Take it away and determine if the site works well without it.
Question Number 29	Points: 5.00/5.00
Question Text
What is the name of the part of the URL highlighted in red in the address below?   https://roads.advancedacademics.com/news.html
Your Answer
B. Extension
Question Number 30	Points: 2.00/2.00
Question Text
It's important for designers to make sure clickable items appear clickable when designing Web pages.
Your Answer
True

What is HTML?
Have you ever wondered how Web pages are created? Hypertext Markup Language, or HTML for short, is the language used to create content that is shown on the World Wide Web. HTML is used to create Web pages so that people can see the Web page regardless of the computer or browser that they choose to use. Every Web page you see is made up of HTML. As a matter of fact, the Web page you are using right now to view this course content is made up of HTML. HTML is the structure behind the site that you don’t see.

Think of a human body system. Without organs like the lungs and heart, a human couldn’t live. The organs keep the person alive. Other parts of the body, such as DNA, determine how the person looks. When you see a person, you don’t see his or her organs or DNA. You only see the person. HTML works in a similar way. HTML code is what makes the Web site work and decides how it looks. When you visit a Web page, you don’t see the HTML code. You just see the page.

Let’s take a look at some HTML code. If you click on "View" in the tool bar of your Web browser and select "Source" or "Page Source," you will see the HTML code that builds this Web page.


How to view the HTML source for a web page in Firefox: View > Page Source


How to view the HTML source for a web page in Internet Explorer: View > Source


Writing HTML
All you need to create a Web page using HTML is a text editor like Notepad or TypePad. Notepad comes with almost all versions of Windows. If you’re using a Mac (Macintosh or Apple Computer), you should use TypePad to create HTML. You can use a PC or a Mac to create or view HTML pages. You don’t even have to be online while you write HTML.

HTML is made up of tags. Tags are words or abbreviated words closed in brackets. Tags give instructions to the browser. For example, <HTML> is the tag that is used to mark the beginning of a piece of HTML code. Open up one of these text-editor programs. We’ll jump right in and create our first HTML page.

Open a text editor program.

In Windows you can find Notepad by clicking on your "Start" menu and choosing "All Programs" and "Accessories." On a Mac, open the "Applications" window and choose "TypePad."

Create a new document.

Usually, text-editor programs will open up with a new document template already loaded. If this isn’t the case for you, simply click "New" under the "File" menu.

Type or copy and paste the text below into your new document.

You probably won't understand what you're copying into the text editor. Don't worry about that. This is just for practice.

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<h1>Hello World!</h1>

<p>This is my first Web page and I have no idea what I'm typing.</p>

</body>

</html>

Save the document by choosing "Save As" in the "File" menu.

In the "Save in:" drop-down menu, choose "Desktop."

In the "Save as type:" drop-down menu, choose "Hyper Text Markup Language file."

If "Hyper Text Markup Language file" is not an available option, choose "All Files."

Name the file "index.html" and click "OK."


Opening HTML Files
Now that you’ve created and saved your first HTML file, you should see the icon for it on your computer desktop. If you double-click the icon, it will open your Web site in an Internet browser. See how easy it is to create a Web page?

Screenshot of the simple web page created.

Editing HTML Files
What if you want to edit your HTML file? If you double-click the file, it opens in an Internet browser. It does not open in the text editor program you used to create it. You’ll have to open the text editor first if you want to view the file in the text-editor screen. Then, choose "Open" from the "File" menu. Browse to the file that you should have saved on your desktop and click "Open." From there, you can edit the file.

HTML Practice Exercise
Navigate to three sites on the Internet and view the source for each site. Identify the opening and closing <html> tags. Also identify the <title> and <body> tags.


Formatting HTML
When you type HTML code into a text editor, you may be taking care to keep letters within tags lowercase. Capitalization doesn’t really matter when writing HTML code. HTML code is not case sensitive. For example, each of the following sets of code works the same:

<p> = <P>

<html> = <HTml>

<tABle> = <table>

Even though your code will work either way, it is a best practice to use all lowercase letters. This makes it easier for you and other people to read your code when looking at the source code in the background.

Extra spaces don’t matter either, but it is a best practice to get rid of them. Spaces between letters within a word itself will not let the browser read the command. For example, <ht ml> is not a valid tag.

<p > = <p>

<b> Bold </b> = <b>Bold</b>

<ht ml> ≠ <html>


HTML Tags
Using a text editing program, open this HTML file. Now take a look at the code in this file. Notice all the brackets: < and >. These sets of brackets and the text within them are called HTML tags. HTML code is made up of tags. Almost all HTML tag sets have an opening tag and a closing tag.

Opening Tag < >
Closing Tag </ >
Look at the code again. Can you find any sets of opening and closing tags? You'll notice that the very first line contains an opening tag: <html>. The very last line contains the matching closing tag: </html>. You’ll also see the body tags: <body> and </body>.

Now you know how to identify HTML tags. Let's take a close look at each of them and break them down. For the most part, each set of HTML tags has three main parts:

Opening Tag
Contents
Closing Tag

The abbreviations or words contained within the brackets of each tag stand for the tag’s function or formatting command. For example, "p" is used for a paragraph tag. Inside these tags would be paragraph text. "Table" is used for a table tag. This makes it easy to memorize HTML tags.

On the Web page itself, you don’t actually see any of the HTML tags. So in the example above, you wouldn’t actually see the <p> or the </p>. The contents between the opening and closing tags are what you see on the Web page. For this example, you would only see "Paragraph text" on the Web page.


Structuring HTML Codes
There is another thing you should notice when looking at the HTML code that you just opened. The code for a Web page begins with an <html> tag, an opening tag. The page also ends with a corresponding closing tag, </html>. All HTML pages begin and end with opening and closing <html> tags:

<html>

</html>

This opening HTML tag tells the computer that HTML code is about to begin. At the end of the page, the closing HTML tag tells the computer that the HTML code has ended.

The next tag that you would see on an HTML page is head tag, <head>. The head tags means "heading or header." It usually contains the title of the HTML page. As a matter of fact, you'll often find the title tag, <title> and </title>, within the header tags. The <head> tag might also contain comment information. This could be the Web page author’s name and date of creation.

<html>

<head>

<title>My First Web Page</title>

</head>

</html>

Remember, the title of the Web page appears in the title bar of the Internet browser when you’re viewing the page. It also appears in the minimized window when you’ve got the page minimized. The title of the Web page in the html code above is "My First Web Page."

Before we go on, look again at the code above. Notice how each line is indented differently. HTML code is often structured this way to make it easier to read. You can see that the head tags are indented to the same point. The other corresponding tags <html> and </html> are indented to the same distance. This makes it easier to see where the header starts and ends.


Structuring HTML Code, Continued
After the header, the second part of the HTML page is the body. The <body> tags contain everything that you will see on a Web page.

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

Main content of webpage

</body>

</html>



Question Number 1	Points: 5.00/5.00
Question Text
What are the contents of the following HTML tag set?
<body>Hello.</body>
Your Answer
D. Hello.
Question Number 2	Points: 5.00/5.00
Question Text
What does the following code result in? <B>bold</b>
Your Answer
C. bold
Question Number 3	Points: 5.00/5.00
Question Text
HTML is made up of which of the following?
Your Answer
C. Tags
Question Number 4	Points: 5.00/5.00
Question Text
Which of the following is a closing tag? (Choose all that apply.)
Your Answer
7508685:B. </b> ,7508686:C. </p>
Question Number 5	Points: 5.00/5.00
Question Text
Which of the following is the language used to create content that is shown on the World Wide Web?
Your Answer
B. HTML
Question Number 6	Points: 5.00/5.00
Question Text
In the HTML tag below, which part is highlighted in red?
<p>paragraph</p>
Your Answer
A. Closing tag
Question Number 7	Points: 5.00/5.00
Question Text
Which of the following is an opening tag? (Choose all that apply.)
Your Answer
7508680:A. <b>,7508682:C. <html>

Heading Tags
You may already know the main HTML structure tags. They are <html>, <head>, <title>, and <body>. Now we’re going to learn about some of the more common tags that are used within the body of an HTML page. First, there are the heading tags. These tags are used to create headings for your Web page.

There are six heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <h1> is the largest font size. These heading tags get progressively smaller until you reach <h6>. Heading tags also make the text bold. Look at the examples below.

<h1>Heading 1</h1> = Heading 1

<h2>Heading 2</h2> = Heading 2

<h3>Heading 3</h3> = Heading 3

<h4>Heading 4</h4> = Heading 4

<h5>Heading 5</h5> = Heading 5

<h6>Heading 6</h6> = Heading 6


Paragraph Tag
The paragraph tag <p> is used to create chunks of text, like paragraphs. HTML automatically adds an extra line break between sets of paragraph tags.

HTML Code	Becomes	Results
<p>This is the first
paragraph.</p><p>This is the
second paragraph.</p>


This is the first paragraph.

This is the second paragraph.

You don’t have to use heading or paragraph tags to add text to a Web page. You can simply type text within the body of your Web page. It will be displayed on the page.

HTML Code	Becomes	Results
<body>
This is the text that you want to appear on your Web page.

It will all appear on one line even if you press the "return" key on your keyboard because there are no formatting tags within the text.
</body>


This is the text that you want to appear on your Web page. It will all appear on one line even if you press the "return" key on your keyboard because there are no formatting tags within the text.


Break Tag
What if you wanted two lines of text but you didn’t want the extra line break in between that the paragraph tags create? The break tag <br /> creates a single line break. Sometimes this is written <br>.

HTML Code	Becomes	Results
This is the first line of text. <br />This is the second line of text.


This is the first line of text.
This is the second line of text.


Blockquote Tag
Another way to format text on a Web page is to use the blockquote tag. This tag is used to indent full blocks of text.

HTML Code	Becomes	Results
This paragraph does not use the blockquote tag.
<blockquote>This paragraph uses the blockquote tag.</blockquote>


This paragraph does not use the blockquote tag.

This paragraph uses the blockquote tag.

Notice how there are no paragraph or break tags used in the example above. The blockquote tag automatically adds a single line break above and below the text inside the tag set.

You can also use multiple blockquote tags in order to indent a block of text even further. Look at the example below. Always be sure to add an end blockquote tag </blockquote> at the end of the indented text. If you indent using two blockquotes, you should end with two ending </blockquote> tags.

<blockquote><blockquote>This text will be indented twice as much as if you’d just use one blockquote tag.</blockquote></blockquote>


Horizontal Rule Tag
Another common HTML tag is the horizontal rule tag <hr>. This inserts a horizontal line onto the Web page like the one shown above under the "Horizontal Rule Tag" heading. You can change the length of the horizontal line by adding size tags to it such as <hr width=50%>. See an example of this below.


Comment Tag
The comment tag is another useful tag. It is used to add text to the HTML document that will not appear on the Web page. Internet browsers completely ignore the contents of a comment tag. You might be wondering why you’d ever want to use a comment tag. The comment tag contains text for people who are reading your code. You can use the comment tag to credit other coders (authors) when you borrow their code. You can also type a comment as to why you used that particular text or code. You can also use the comment tag to insert instructions for other coders who might be using your code.

The comment tag looks like this: <!-- -->.

HTML Code	Becomes	Results
<body>
<!--This is where the main content of your web page is.-->
</body>


Notice how nothing appears in the Results column in the table above. That’s because there is no actual content in the body of the HTML code since the Internet browser ignores the comment tag.


Bold and Strong Tags
There are multiple ways to create bold text using HTML. The bold tag <b> makes text bold (darker). The strong tag <strong> has the same visual effect on text. So what’s the difference? There are computer programs called screen readers that are used to "read" Web pages to Web users who have sight problems. For example, blind people use screen readers to "view" a Web page. The screen reader will read all of the text on the Web page to the viewer. It will also read the descriptions of the images and tables on the page. What does this have to do with bold and strong tags? Well, these programs read text within bold tags with emphasis. Text within strong tags is read loudly. You might choose to use either tag dependent upon how you want the text presented in an audio format.

HTML Code	Becomes	Results
<b>Bold Text</b><br />
<strong>Strong Text</strong>


Bold Text
Strong Text


Italics and Emphasis Tags
Just like there are multiple ways to make text bold using HTML, there are also several ways to italicize text. The two most common tags for italicizing text are the italics tag, <i>, and emphasis tag, <em>. The italics tag, <i>, is "read" by a screen reader just like all other text on the screen. The only difference the italics tag makes is a visual one. The emphasis tag, on the other hand, is stressed verbally by the screen reader.

HTML Code	Becomes	Results
<i>Italicized Text</i><br />
<em>Emphasized Text</em>


Italicized Text
Emphasized Text


Big Tags
Changing the size of text in HTML is very easy. To make your text one size bigger, you would use the big tag, <big>. Make sure you use an ending </big> tag at the end of the text you want to make bigger.

HTML Code	Becomes	Results
This text is normal size.<br />
<big>This text is one size bigger.</big><br />
<big><big>This text is two sizes bigger.</big></big>


This text is normal size.
This text is one size bigger.
This text is two sizes bigger.


Small Tags
The small tag <small> works in the same way. It will make your text one size smaller. Note the </small> tags at the end of the coding.

HTML Code	Becomes	Results
This text is normal size.<br />
<small>This text is one size smaller.</small><br />
<small><small>This text is two sizes smaller.</small></small>


This text is normal size.
This text is one size smaller.
This text is two sizes smaller.


Nesting Tags
Tags can also be used within other tags. Using HTML tags within other tags is called nesting tags. You’ve already seen examples of this. The title tag, <title>, always appears within the head tag, <head>. Similarly, several tags are used within the body tag, <body>. Other examples are shown below.

HTML Code	Becomes	Results
<p>Line 1<br />
Line 2<br />
Line 3
</p>
<p>
Line 4<br />
Line 5<br />
Line 6
</p>


Line 1
Line 2
Line 3
Line 4
Line 5
Line 6

<p><b>Bold Text</b></p>


Bold Text

<b><i>Bold and Italicized Text</i></b>


Bold and Italicized Text


HTML Tags Practice Exercise
Try the following problems below. Check to see if your answers are correct by clicking the Show Answer button:

What HTML tag(s) is used to create each of the following?

1.
Bold

Answer Button

Answer :
<b></b>

2.
Large text

Answer Button

Answer :
<big></big>

3.
Emphasis

Answer Button

Answer :
<em></em>

4.
Strong text

Answer Button

Answer :
<strong></strong>

5.
Horizontal rule

Answer Button

Answer :
<hr>

6.
Comment

Answer Button

Answer :
<!-- -->

7.
Largest heading

Answer Button

Answer :
<h1></h1>

8.
Paragraph text

Answer Button

Answer :
<p></p>

9.
Italics

Answer Button

Answer :
<i></i>

10.
Small text

Answer Button

Answer :
<small></small>

11.
Line break

Answer Button

Answer :
<br/>

12.
Indented text

Answer Button

Answer :
<blockquote></blockquote>

Write the HTML code required to create the following:

13.

How to Write HTML Code
A Short Tutorial

Answer Button

14.

HTML Tags
HTML code is made up of tags. Almost all HTML tag sets have an opening tag and a closing tag. Each tag is made up of a piece of text contained within a set of brackets. For example, <p> and <table> are both examples of HTML tags.

The abbreviations or words contained within the brackets of each tag represent the tag's function or formatting command. For example, "p" is used for a paragraph tag and "table" is used for a table tag. This makes it easy to memorize HTML tags.

Answer Button

Answer :

<p><b>HTML Tags</b><br />

HTML code is made up of tags. Almost all HTML tag sets have an opening tag and a closing tag. Each tag is made up of a piece of text contained within a set of brackets. For example, <p> and <table> are both examples of HTML tags. </p>

<p>The abbreviations or words contained within the brackets of each tag represent the tag's function or formatting command. For example, "p" is used for a paragraph tag and "table" is used for a table tag. This makes it easy to memorize HTML tags. </p>



Question Number 1	Points: 5.00/5.00
Question Text
What does the following HTML result in? <h1>Title</h1>
Your Answer
7508785:D.
Title
Question Number 2	Points: 5.00/5.00
Question Text
Which of the following pieces of code results in the following? italics
Your Answer
7508814:A. <b>italics</b> ,7508816:C. <strong>italics</strong>
Question Number 3	Points: 5.00/5.00
Question Text
Which of the following is a heading tag?
Your Answer
7508778:A. <h1> ,7508779:B. <h6>
Question Number 4	Points: 5.00/5.00
Question Text
What does the following HTML result in? <body>Paragraph 1<br />Paragraph 2</body>
Your Answer
C.
Question Number 5	Points: 5.00/5.00
Question Text
Which of the following tags results in an indented paragraph?
Your Answer
A. <blockquote>
Question Number 6	Points: 5.00/5.00
Question Text
What does the following HTML result in?
<p>Paragraph 1</p><p>Paragraph 2</p>
Your Answer
D.
Question Number 7	Points: 5.00/5.00
Question Text
To create text that is one size bigger than normal text, what tag do you use?
Your Answer
B. <big>
Question Number 8	Points: 5.00/5.00
Question Text
Which of the following tags is used to create a paragraph?
Your Answer
B. <p>
Question Number 9	Points: 5.00/5.00
Question Text
Which of the following tags results in a horizontal rule?
Your Answer
A. <hr>
Question Number 10	Points: 5.00/5.00
Question Text
What does the following code result in?
<body>ABC<br />
<!--12345-->DEFG
</body>
Your Answer
D.

Question Number 11	Points: 5.00/5.00
Question Text
What does the following HTML result in?  <body>Paragraph 1
Paragraph 2</body>
Your Answer
A. Paragraph 1 Paragraph 2
Question Number 12	Points: 5.00/5.00
Question Text
Which of the following is the HTML tag for a comment?
Your Answer
A. <!-- -->
Question Number 13	Points: 5.00/5.00
Question Text
Which of the following tags is used to create a line break?
Your Answer
A. <br />
Question Number 14	Points: 5.00/5.00
Question Text
Which of the following pieces of code results in the following? bold words
Your Answer
7508810:A. <b>bold words</b> ,7508813:D. <strong>bold words</strong>
Question Number 15	Points: 5.00/5.00
Question Text
To create text that is one size smaller than normal text, what tag do you use?
Your Answer
D. <small>

HTML tags let you insert various sizes of text, format paragraphs, add horizontal lines, and complete a variety of other tasks. To create a well-designed Web site, you need to have control over the elements that you add. For example, what if you want to add a color to the background of your Web page? Or you want to align your text to the right?

Attributes are used to define HTML tags. For example, to change the background color of a Web page, you would use the bgcolor attribute within the body tag. The bgcolor attribute in the body tag below tells the browser to display the background in the color 000000. This is the code for black.

<body bgcolor="#000000">

In the example above, "bgcolor" is called the attribute and "#000000" is the called value. Every attribute has a value. The value is the definition of the characteristic that the attribute calls for.

You can also use an attribute to display an image as the background of a Web page. In the example below, "background" is the attribute.

<body background="dots.gif">

In HTML all colors are defined by color values from #000000 (black) to #FFFFFF (white). Click here to download a document with the web colors and their values.

Most tags don’t require attributes. For instance, <body> works just fine. But some tags do require attributes. For example, the image tag by itself, <img />, doesn't mean anything because it doesn't have any attributes. The following image tag, on the other hand, contains an attribute that tells the source of the image. It directs the computer to the location where the image is stored. In the example below, "src" is the attribute.

<img src="/images/box.jpg" /> (This tag tells the computer that the box image is in a subdirectory called "images" in the current directory)

Each tag can contain as many attributes as needed. In the image tag below, there are several examples of multiple attributes.

<img src="images/box.jpg" originalAttribute="src" originalPath="images/box.jpg" border="0" width="550" height="220" alt="Picture of a box" />


Hyperlinks
Hyperlinks are the most common uses of attributes. The anchor tag is: <a>. To define a link, you must use the hypertext reference, or href, attribute within the anchor tag. There is then an end anchor </a> tag at the end of the link reference. See how the page name falls between the quotation marks and then brackets. Everything between > and the next < is what you will see as the title of that link in the results area.

HTML Code	 	Results
<a href="link.html" originalAttribute="href" originalPath="link.html">This text links to link.html.</a>


This text links to link.html.
You can also link images by closing the image tag with the anchor tag. Look at the following example.

HTML Code	 	Results
<a href="link.html"><img originalAttribute="href" originalPath="link.html"><img src="fish.gif"></a>


Fish

Hyperlinks Practice Exercise
Try the following problems below. Check to see if your answers are correct by clicking the Show Answer button:

For each of the following, identify what is being linked and to what it is being linked. The first one is answered for you as an example.

<a href="video.html">Video</a>

Show Answer
The text "Video" is being linked to the Web page "video.html."
<a href="application.pdf"><img src="download.gif"></a>

Show Answer
The image "download.gif" is being linked to the .pdf document "application.pdf."
<a href="resume.doc"><img src="resume_button.gif"></a>

Show Answer
The image "resume_button.gif" is being linked to the Web page "resume.doc."
<a href="audio.wav">Play soundtrack</a>

Show Answer
The text "Play soundtrack" is being linked to the file "audio.wav."
<a href="booklist.html"><img src="bookbutton.gif"></a>

Show Answer
The image "bookbutton.gif" is being linked to the Web page "booklist.html."



Question Number 1	Points: 2.00/2.00
Question Text
A tag can only have one attribute.
Your Answer
False
Question Number 2	Points: 5.00/5.00
Question Text
What is the definition of the characteristic that the attribute is calling for?
Your Answer
D. Value
Question Number 3	Points: 5.00/5.00
Question Text
Which of the following are used to define characteristics of HTML tags?
Your Answer
A. Attributes
Question Number 4	Points: 5.00/5.00
Question Text
In the tag below, what part is highlighted in red?

<body bgcolor="#000000">
Your Answer
D. Value
Question Number 5	Points: 5.00/5.00
Question Text
Which of the following would you use to define the background color of a table in a Web page?
Your Answer
A. Attribute
Question Number 6	Points: 5.00/5.00
Question Text
In the HTML code below, identify the attributes.

<a href="link.html" originalAttribute="href" originalPath="link.html" target="new window">
Your Answer
7508914:B. href ,7508916:D. target
Question Number 7	Points: 3.33/5.00
Question Text
In the HTML code below, identify the attributes.

<img src=“/images/box.jpg” originalAttribute="src" originalPath="“/images/box.jpg”" border=“0” width=“550” height=“220” alt=“Picture of a box” />
Your Answer
7508909:A. alt ,7508910:B. border ,7508911:C. img ,7508912:D. src

Ordered Lists
Using HTML, creating ordered or numbered lists is quite easy. The ordered list tag is <ol>. This is easy to remember because the "o" stands for "ordered" and the "l" stands for "list." Each item you want in your list uses the line item (or list item) tag <li>. The "l" stands for line and the "i" for item. Look at the example code below:

HTML Code	 	Results
<ol>
     <li>Line 1</li>
     <li>Line 2</li>
     <li>Line 3</li>
</ol>


Line 1
Line 2
Line 3
The <ol> and <li> will automatically use numbers starting with the number 1 by default. What do you do if you want your ordered list to use letters instead of numbers? This is where you would use attributes. Look at the following example.

HTML Code	 	Results
<ol type=1>
     <li>Line 1</li>
     <li>Line 2</li>
     <li>Line 3</li>
</ol>


Line 1
Line 2
Line 3
<ol type=A>
     <li>Line 1</li>
     <li>Line 2</li>
     <li>Line 3</li>
</ol>


Line 1
Line 2
Line 3
<ol type=a>
     <li>Line 1</li>
     <li>Line 2</li>
     <li>Line 3</li>
</ol>


Line 1
Line 2
Line 3
<ol type=I>
     <li>Line 1</li>
     <li>Line 2</li>
     <li>Line 3</li>
</ol>


Line 1
Line 2
Line 3
<ol type=i>
     <li>Line 1</li>
     <li>Line 2</li>
     <li>Line 3</li>
</ol>


Line 1
Line 2
Line 3
Notice how the letters are either capitalized or lowercased depending on the attribute tag.


Unordered Lists
Creating unordered lists, or bulleted lists, in HTML is very similar to creating ordered lists. To create an unordered list, you just use the unordered list tag <ul>. The "u" stands for "unordered" and "l" for "list." You use list item tags as you used in the ordered lists.

HTML Code	 	Results
<ul>
     <li>Line 1</li>
     <li>Line 2</li>
     <li>Line 3</li>
</ul>


Line 1
Line 2
Line 3
Unordered lists can use three different bullet types. They are discs, circles, and squares. The disc is always used by default if no bullet type is specified. Bullet types are defined using the type attribute.

HTML Code	 	Results
<ul type=disc>
     <li>Line 1</li>
     <li>Line 2</li>
     <li>Line 3</li>
</ul>


Line 1
Line 2
Line 3
<ul type=circle>
     <li>Line 1</li>
     <li>Line 2</li>
     <li>Line 3</li>
</ul>


Line 1
Line 2
Line 3
<ul type=square>
     <li>Line 1</li>
     <li>Line 2</li>
     <li>Line 3</li>
</ul>


Line 1
Line 2
Line 3
Think of using a bullet key on your word processing program. Each time you indent the bulleted list, the bullet changes from solid to clear, to diamonds, etc. The same thing will happen if you use ordered or unordered lists in a nested format.


Tables are usually used to organize information on Web pages. The opening HTML tag for a table is <table>. There are several tags used within the table tag set. For example, there are tags used to create rows and columns. The table row tag, <tr> (“t” for table, “r” for row), is used to create a row. Within each table row tag, table data tags, <td> (“t” for table, and “d” for data), are used to create individual cells.

HTML Code	Results
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Table Headings
Most tables have table headings of some sort. For example, the table we just looked at in the last practice activity has a row of headings at the top.

Task	Assigned To	Deadline	Completion Date
Planning Meeting	Jacob, Lily, Matt, Jeff	May 1	May 1
Write Proposal	Jacob	May 6	May 3
Attend Interview	Lily and Matt	June 18
To create headings, you can use the table data tags, <td>. You can also use bold tags, <b>, nested within the <td> tag.

<tr>

<td><b>Task</b></td>

<td><b>Assigned To</b></td>

<td><b>Deadline</b></td>

<td><b>Completion Date</b></td>

</tr>

It is best to use table header tags, <th>. Table header tags create data cells that are automatically formatted as headers. You don’t have to use the bold tag, <b>.

<tr>

<th>Task</th>

<th>Assigned To</th>

<th>Deadline</th>

<th>Completion Date</th>

</tr>


Table Practice Activity
Try the following problems below. Check to see if your answers are correct by clicking the Show Answer button:

Study the table below. The HTML code to build the table follows. Fill in the blanks with the correct beginning and ending tags needed to format it as the table below shows. Notice that there is a new word string at the bottom. "&npsp" means "non-blank space." The "&" at the beginning identifies it as a command. The ";" at the end ends the command. "&nbsp;" is used when you want to add a space between something that might otherwise run together in the text.

Task	Assigned To	Deadline	Completion Date
Planning Meeting	Jacob, Lily, Matt, Jeff	May 1	May 1
Write Proposal	Jacob	May 6	May 3
Attend Interview	Lily and Matt	June 18
<html>

<head>

<title>Task Schedule</title>

</head>

<body>

<table>

<tr>

_____Task_____

<th>Assigned To</th>

<th>_____</th>

_____Completion Date_____

_____

_____

<td>Planning Meeting</td>

<td>Jacob, Lily, Matt, Jeff</td>

_____May 1_____

<td>May 1</td>

</tr>

<tr>

<td>_____</td>

_____Jacob_____

<td>May 6</td>

_____May 3_____

_____

<tr>

<td>Attend Interview_____

_____Lily and Matt</td>

<td>June 18_____

<td>&nbsp;</td>

</tr>

_____

</body>

</html>

Answer Button


Table Attributes
Attributes can be used on tables to further define the table characteristics. These can be alignment, width, or border width. The table below outlines the most common attributes used in tables.

Attribute	Description	Code	Results
align =

Defines the horizontal alignment of elements

<table align=center>

<tr><td>One</td></tr>

<tr><td>Two</td></tr>

</table>

Elements placed above each other at center.

border =

Defines the width of the border

<table border=3>

<tr><td>One</td></tr>

<tr><td>Two</td></tr>

</table>

Elements with a visible border.

width =

Defines the width of the table

<table width="72">

<tr><td>One</td></tr>

<tr><td>Two</td></tr>

</table>

Elements in a cell that is expanded to the right of the word.

cellspacing =

Specifies how much space (measured in pixels) there should be between the cells in the table

<table border=1 cellspacing=10>

<tr><td>One</td><td>Two</td></tr>

<tr><td>Three</td><td>Four</td></tr>

</table>

Table cell elements with visible space  between them.

cellpadding =

Specifies how much space (measured in pixels) there should be between the contents of the cell and its border

<table border=1 cellpadding=10>

<tr><td>One</td><td>Two</td></tr>

<tr><td>Three</td><td>Four</td></tr>

</table>

Elements in cells with visible space between the content and border.


You are now familiar with HTML tags. HTML also uses something called entitites. Entities are used in HTML for things such as spaces, signs, and symbols. The table below summarizes some of the most common entities used in HTML.

HTML Entity

Resulting Output

Description

&nbsp;

Non-breaking space

&deg;

°
Degree sign

&divide;

÷
Division sign

&ang;

∠
Angle sign

&Delta;

Δ
Delta sign

&asymp;

Approximately equal to
Approximation sign

&ne;

≠
Not equal to sign

&radic;

v
Radical sign

&ge;

≥
Greater than equal to

&le;

≤
Less than or equal to


Non-breaking Space (&nbsp;)
Line spaces that you insert into your HTML code using the return key on your keyboard don't show up on your Web page. To create a line break on your Web page, you have to use a break tag. Similarly, extra spaces added into your HTML code using the spacebar on your keyboard don't show up on the Web page. You could use the tab key all day long and the text would still be run together.

HTML Code	Becomes	Results
One           Two


One Two

So what do you do if you want to indent a paragraph five spaces? You have to use the non-breaking space entity, &nbsp;. The letters stand for "non" "blank" "space." Note how the five &nbsp; below create five spaces between the words "One" and "Two."

HTML Code	Becomes	Results
One &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Two


One           Two



Using Entities in Mathematical and Scientific Documents
A lot of people who write documents that use mathematical or scientific symbols use entities a lot. For instance, you might use &deg; a lot. If you're taking a calculus course, perhaps you would use &Delta; or &Theta.Note how these are "capitalized." If they were small letters, they would not give the right symbol.

Entities Practice Exercise
Try the following problems below. Check to see if your answers are correct by clicking the Show Answer button:

Translate the following pieces of HTML code into text.

1.

&ang;A = &ang;B

Answer Button
2.

x &ge; 52

Answer Button
3.

12 &divide; 2 = 6

Answer Button
4.

12 &divide; 5 &asymp; 2

Answer Button
5.

50&deg;

Answer Button
6.

15 &ne; 23

Answer Button
7.

Answer:
&Delta;ABC

Answer Button
8.

ABC&nbsp;DEF

Answer Button
9.

Answer:
11 &le; 48

Answer Button
10.

&radic;64 = 8

Answer Button

Question Number 1	Points: 5.00/5.00
Question Text
In which of the following does the HTML code result?

<ul type=disc>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
</ul>
Your Answer
C.
• Line 1
• Line 2
• Line 3
Question Number 2	Points: 5.00/5.00
Question Text
In which of the following does the HTML code result?

<ul type=circle>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
</ul>
Your Answer
D.
o Line 1
o Line 2
o Line 3
Question Number 3	Points: 5.00/5.00
Question Text
In which of the following does the HTML code result?

<ol type=1>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
</ol>
Your Answer
A.


Question Number 4	Points: 5.00/5.00
Question Text
Which of the following HTML entities will create a degree sign?
Your Answer
B. &deg;
Question Number 5	Points: 5.00/5.00
Question Text
In which of the following does the HTML code result?

<ol type=I>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
</ol>
Your Answer
C.
I. Line 1
II. Line 2
III. Line 3
Question Number 6	Points: 5.00/5.00
Question Text
Which of the following is the HTML entity for a nonbreaking space?
Your Answer
D. &nbsp;
Question Number 7	Points: 5.00/5.00
Question Text
Which of the following tags creates a row in an HTML table?
Your Answer
D. <tr>
Question Number 8	Points: 0.00/5.00
Question Text
How many columns does this table have?
<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
    <tr>
        <td>Cell 5</td>
        <td>Cell 6</td>
        <td>Cell 7</td>
        <td>Cell 8</td>
    </tr>
</table>
Your Answer
A. 2
Question Number 9	Points: 0.00/5.00
Question Text
Which of the following tags automatically formats a new cell in bold in an HTML table?
Your Answer
B. <td>
Question Number 10	Points: 5.00/5.00
Question Text
Which of the following tags creates a new cell in an HTML table?
Your Answer
C. <td>
Question Number 11	Points: 5.00/5.00
Question Text
What is a piece of HTML code used to create a space, sign, or symbol?
Your Answer
C. Entity
Question Number 12	Points: 5.00/5.00
Question Text
In which of the following does the HTML code result?

<ol type=a>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
</ol>
Your Answer
B.

Cascading Style Sheets (CSS)
Cascading Style Sheets, or CSS as it is more commonly called, is a language used to define the style and format of an HTML page. CSS can be used to define colors, sizes, fonts, and layout of various elements on a web page. For example, you can define your headings to be font style Arial, size 4, bold, and navy blue. Then, you can define your paragraph text to be font style Calibri, size 2, and black. You can define captions to be font style Arial, size 1, and black and so forth. If you have such definitions in your CSS file, your HTML files can simply call for a section of font to be a heading, paragraph, or caption, rather than having to define the font style at every occurrence.

CSS files are created and saved separately from the HTML files that make up a Web site. They are saved with the extension .css and can be referenced by any number of HTML files. For example, if you have a Web site that contains five HTML files, you can create one CSS file that defines the style and format of all five HTML files.

Using CSS allows Web designers to separate the design elements of a Web page from the page’s content. Taking all style and formatting code out of the HTML pages allow the pages to load more quickly because there is less information in the file for the browser to read. Using CSS also helps create consistency in and control of the visual design of a single Web page or an entire site.


The Structure of CSS
CSS is made up of rules. A rule is a statement that defines a style or format for a defined element in a Web page.

Each rule has three parts:

Selector—The part of the Web page that will be affected by the rule
Property—The element whose style and/or format is being defined
Value—The definition, or description, of the property being defined
Let’s look at an example rule and identify the three parts:

body {

color:#ffffff;

}

Selector
In the example above, the selector is “body.” This defines the area of the Web page that will be affected by the rule.

Property
The property is “color,” which defines the color of the text within the body of the Web page.

Value
The value is “#ffffff,” which is the HTML code for white.

Notice that the property and the value are contained within a set of brackets.

CSS rules can contain more than one property and more than one value. For example, you can define both the font color and background color for the body of a Web page using one CSS rule.

body {

color:#ffffff;

background-color:#525252;

}


Creating a CSS File
Let’s build a CSS file together. To create a CSS file, you have to start with an HTML page. Open a text editor like Notepad (PC) or TypePad (Mac) and copy and paste the code in the box below into your editor.

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<h1>Hello World!</h1>

<p>This is my first experience with CSS Style Sheets. Woo hoo!</p>

</body>

</html>

Before we get started with CSS, save your HTML file (using the code above) and view it in a browser. You’ll notice that it’s a plain page with a white background and black text.


<style> Tag
The first thing you are going to do is create a <style> tag within the head tags of your HTML page. Under the <title> tags, type: <style type=”text/css”>. Your head should now look like this:

<head>

<title>Hello World!</title>

<style type="text/css">

</head>

The line you just added tells the browser that the following language is CSS.

Now, let’s add some content to the <style> tag.

<style type=”text/css”>

body {

color: #ffffff;

background-color: #525252;

font-family: Arial, "Lucida Console," sans-serif;

}

h1{

color: #000000;

font-size: x-large;

font-family: Georgia, “Times New Roman”, Times, serif;

</style>

Can you tell what styles we defined above? The body rule tells us that the text color in the body of the Web page will be #ffffff, or white and the background color will be #525252, or dark gray. It also defines the font style to be Arial. It continues to define fonts in order of preference just in case the computer that’s displaying the site doesn’t have one of the fonts you define installed. This prioritized list ends with “sans-serif,” which tells the computer to display any generic sans-serif font if none of the other fonts are installed.

We also added a rule for h1, the heading. The heading will be #000000, or black, in color and x-large in size. The font was defined as Georgia, with Times New Roman and Roman assigned as backups.

Now, save your HTML file and look at it in a browser. Instead of a plain white background with black text, you should now have a gray background with a large black heading in a serif font and white text in a sans-serif font.


Saving a CSS File
You are probably wondering why we’re putting CSS directly into our HTML file when I told you earlier that CSS and HTML files were saved separately. The reason we write our CSS code directly in an HTML files is to see the effect of the CSS code in a Web page as it’s being written. Once you’ve finished writing the CSS and your HTML file is formatted the way you want it, it’s time to separate the CSS from the HTML and save the files separately.

Open the HTML file you just created and copy the following code out of it into a new file:

body {

color: #ffffff;

background-color: #525252;

font-family: Arial, "Lucida Console," sans-serif;

}

h1{

color: #000000;

font-size: x-large;

font-family: Georgia, “Times New Roman”, Times, serif;
}

Save this file as: “style.css” into the same location as your HTML file is saved.

Your HTML file should now have an empty <style> tag:

<style type=”text/css”>

</style>

What you’ll need to do is delete the <style> tag completely and replace it with:

<link rel=”stylesheet” type=”text/css” href=”style.css” originalAttribute="href" originalPath=”style.css”/>

The code above links your HTML and CSS files.

Now save your HTML file.


Double-check the Code
The final code for your style.css file should be:

body {

color: #ffffff;

background-color: #525252;

font-family: Arial, "lucida console," sans-serif;

}

h1{

color: #000000;

font-size: x-large;

font-family: Georgia, “Times New Roman”, Times, serif;
}

The final code for your HTML file should be:

<html>

<head>

<title>Hello World!</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” originalAttribute="href" originalPath="style.css” />

</head>

<body>

<h1>Hello World!</h1>

<p>This is my first experience with CSS Style Sheets. Woo hoo!</p>

</body>

</html>


Practice Exercise
Open your HTML file. The background of the Web page should be dark gray. “Hello World!” should be in extra large, black, serif font. The rest of the text on the page should be white and sans-serif.

Change the look of the Web page by editing the CSS file. Do NOT edit the HTML file. If you’d like, you can use the code below to change the background to light blue and the color of the body text to black. The code below will also change the color of the heading to dark blue.

body {

color: #000000;

background-color: #C9E1FF;

font-family: Arial, "lucida console," sans-serif;

}

h1{

color: #114485;

font-size: x-large;

font-family: Georgia, “Times New Roman”, Times, serif;
}

After you’ve edited and saved your CSS file, open the HTML file in a browser to see how it’s changed.

HTML Files
Web sites are made up of individual Web pages that are linked together. Each Web page is constructed with an HTML file. An HTML file is a text file that contains the code that builds a Web page. For example, if you have a Web site that contains five pages (the home page, a page with your resume, a page with your biography, a page with a photo album, and a page with your contact information), then your site will be made up of five files.

Icons of Image folder and five named files.

Index.html
Notice that one of the HTML files above is named “index.html.” This page is the home page for your Web site. If there is no “index.html” file in the root folder, nothing will be displayed when you navigate to the site address.

Also notice there is an “images” folder above. This is where all the images for this Web site are stored. This folder can have any name, but typically, it’s named “images.”

Creating and Storing HTML Files
You create HTML files on your computer. In order to view those files on the Internet, you have to store them where other computers can access them. If you keep the files on your computer, the files won’t be accessible if you ever turn your computer off. Plus, people will access your computer’s hard drive when they visit your site. This will cause your other computer processes to slow down.

In order to avoid these complications, upload and store HTML files to an FTP server. An FTP server is a computer connected to the Internet that is used to store files. When a computer from anywhere in the world accesses a Web page, that computer simply reads the file from the FTP server where the HTML file is stored.

FTP Services
Where can you find an FTP server on which to store your HTML files? There are several free FTP services out there, such as Google and Yahoo. These free services will allow you a limited amount of space on their FTP servers to store your Web site. Some Internet service providers (ISPs) also provide FTP services along with their Internet packages. Again, ISPs will give you a limited amount of space to use. There are also companies that rent out space on their FTP servers.


Naming Web Page Files
Whether you’re naming HTML, CSS, image, or other types of Web page files, there are a set of rules that you should follow in your naming conventions. A naming convention is a format in which you label, or name, your files.

Naming Convention Rules
Don’t use blanks in file names.
Some browsers cannot read file names that contain blanks. This is because the browsers try to read the words on either side of the blanks as separate names or files. It’s best to avoid using blanks in all file names. But this doesn’t mean you have to smash all the words in a file name together. That can make a file name hard to read. For example, it’s difficult to distinguish the two words in the file name: imagelibrary.html.

There are a couple things you can do to make multi-word file names easier to read. You can use capital letters for the first letter of each word in the file name: ImageLibrary.html. Or you can use an underscore in place of the space: image_library.html.

Don’t use dots, or periods, in file names.
You may be tempted to use a dot in place of a space in a file name. Unfortunately, this isn’t a good idea because many browsers read anything following a dot in a file name as the file’s extension. Instead, use an underscore in place of a space.


Naming Convention Rules (cont’d)
Abbreviate file names.
It’s always good to avoid extremely long file names. Long file names don’t necessarily confuse the browser, but can be difficult for users to keep track of. Try to keep your file names abbreviated to avoid unnecessary typos or other confusion.

Use consistent capitalization in file names.
Even HTML is not case sensitive. Still, it’s important to maintain consistency in the way files are named. Pay attention to how you use capitalization in your file names. Name files in your Web site in similar fashion. It’s easier to keep track of the following set of images:

resume.gif
photos.gif, and
videos.gif
than it is to read the following:

Resume.gif
PHOTOS.gif, and
videos.gif

Naming Convention Dos and Don'ts
Do	Don't
PhotoAlbum.html	Photo Album.html
shopping_cart.gif	shopping cart.gif
shipping_costs.html	shipping.costs.html
smith_resume.html	amanda_smith_education_resume.html


File Organization
The way you organize your files should match the organization of your Web site. Let’s look at an example. Let’s say your site uses hierarchical navigation, as shown below.


Your file organization might look like the following:


In the image above, notice there are four folders and one HTML file in the root folder. One of the folders contains the images for the home page. The other three folders contain the files necessary to create the photos, courses, and resume Web pages.

File Organization Practice Exercise
Create a navigation flowchart for a Web site (or use one you’ve already created) and use it to determine how you will organize the files for your Web site.


Absolute and Relative Paths
An absolute path is a link that calls for a complete URL. The following are examples of absolute paths:

<a href=�https://roads.advancedacademics.com/educator.html�>

<a href=�http://www.nasa.gov/news/index.html�>

<a href=�http://www.whitehouse.gov/administration�>

A relative path, on the other hand, is a link that defines the location of the desired file based on the location of the link. For example, you can link to other files contained within the same folder as the link by simply linking to the Web page name. Look at the following examples.

<a href=�page.html�>

<a href=�image.gif�>


You can also link to files contained in other folders. Look at the file organization illustration to the left. Let�s say you create a path within the �index.html� page to display the �logo.jpg.� As you can see, the �logo.jpg� image is contained within a separate folder than the �index.html� page. But notice that the �images� folder, which contains the �logo.jpg� image, is contained in the same folder as the �index.html� page. Therefore you can simply indicate the folder name where the image is located within the path of your link.

Look at the following example:
<a href=�/images/logo.jpg�>

The �/images/� part of the link above tells the browser to look inside the �images� folder.

As if that wasn�t complicated enough, let�s look at an example that�s a little more complex. What if you are working in the �photos.html� page and you want to link to the �logo.jpg� image? Notice that the �photos.html� file is located within a completely separate folder than the �images� folder where �logo.jpg� is located. In this case, you�ll need to tell the browser to move �up� one directory, or folder, before looking for the file. Look at the following example:

<a href=�../images/logo.jpg�>

Notice that the link above starts with "../". This indicates that the browser should move �up� one directory, or folder, to find the file.



Question Number 1	Points: 5.00/5.00
Question Text
<HTML> is an example of which of the following?
Your Answer
C. Tags
Question Number 2	Points: 5.00/5.00
Question Text
Which HTML tag belongs in the blank in the code below?
<html>

<head>
<title>Shopping Cart</title>

</head>
<body><h1>Contents of shopping cart and prices *BLANK*
</body>

</html>
Your Answer
C. </h1>
Question Number 3	Points: 5.00/5.00
Question Text
What attribute is used to specify how much space there should be between the contents of the cell and its border in an HTML table?
Your Answer
B. Cellpadding
Question Number 4	Points: 5.00/5.00
Question Text
Which HTML tag belongs in the blank in the code below?
<html>

<head>
<title>Movie Titles</title>

</head>
<body><h1>Movie Titles</h1><br><h3>Classics</h3><br><p>List of movies</p><hr> *BLANK* Romance</h3><p>List of movies</p>
</body>

</html>
Your Answer
B. <h3>
Question Number 5	Points: 5.00/5.00
Question Text
In the HTML tag below, which part is highlighted in red?
<td>cell</td>
Your Answer
B. Contents
Question Number 6	Points: 5.00/5.00
Question Text
Which attribute is used to create a hyperlink?
Your Answer
C. href
Question Number 7	Points: 5.00/5.00
Question Text
What is the following an example of?
 p {
color: #676767 }
Your Answer
B. Rule
Question Number 8	Points: 5.00/5.00
Question Text
The <ul> tag is used to create which of the following?
Your Answer
B. Bulleted list
Question Number 9	Points: 5.00/5.00
Question Text
In the tag below, what part is highlighted in red?

<body bgcolor="#000000">
Your Answer
A. Attribute
Question Number 10	Points: 5.00/5.00
Question Text
Which of the following tags is used to create a numbered list?
Your Answer
C. <ol>
Question Number 11	Points: 5.00/5.00
Question Text
Which of the following HTML entities will create a greater than or equal to sign?
Your Answer
C. &ge;
Question Number 12	Points: 5.00/5.00
Question Text
The tag below is an example of which of the following?

<a href=“blue.psd”>
Your Answer
C. Hyperlink
Question Number 13	Points: 5.00/5.00
Question Text
In the following HTML, what is the third item in the list?

<ul type=circle>
    <li>Milk</li>
    <li>Bread</li>
    <li>Apples</li>
    <li>Peas</li>
</ul>
Your Answer
A. Apples
Question Number 14	Points: 5.00/5.00
Question Text
In the HTML tag below, which part is highlighted in red?
<i>italics</i>
Your Answer
A. Closing tag
Question Number 15	Points: 5.00/5.00
Question Text
Which of the following HTML entities will create an angle sign?
Your Answer
A. &ang;
Question Number 16	Points: 5.00/5.00
Question Text
Which attribute is used to specify how much space there should be between the cells in the table?
Your Answer
C. Cellspacing
Question Number 17	Points: 5.00/5.00
Question Text
In the HTML code below, what does the "width" attribute define?
<table width="72">
<tr><td>One</td></tr>
<tr><td>Two</td></tr>
</table>
Your Answer
C. The width of the table
Question Number 18	Points: 5.00/5.00
Question Text
In HTML, what are words or abbreviated words closed in brackets?
Your Answer
C. Tags
Question Number 19	Points: 5.00/5.00
Question Text
What is CSS used for?
Your Answer
D. To define the style and format of one or more Web pages
Question Number 20	Points: 5.00/5.00
Question Text
In the following piece of CSS code, what is "small" called?
 h2 {
font-size: small }
Your Answer
D. Value
Question Number 21	Points: 5.00/5.00
Question Text
Which HTML tag belongs in the blank in the code below?
<html>

<head>
<title>Report Card</title>

</head>
<body><h1>Report Card</h1><br><blockquote>Third Quarter *BLANK*
</body>

</html>
Your Answer
B. </blockquote>
Question Number 22	Points: 5.00/5.00
Question Text
Which of the following HTML entities will create a division sign?
Your Answer
C. &divide;
Question Number 23	Points: 5.00/5.00
Question Text
In the HTML tag below, which part is highlighted in red?
<b>bold</b>
Your Answer
C. Opening tag
Question Number 24	Points: 5.00/5.00
Question Text
Which of the following do you use to create HTML files?
Your Answer
C. Text editor
Question Number 25	Points: 5.00/5.00
Question Text
In the following piece of CSS code, what is "body" called?
body {
color: #ffffff }
Your Answer
C. Selector

Introduction to JavaScript
JavaScript is a scripting language used to add interactivity to Web pages. JavaScript is an object- oriented language. Object-oriented programming is a programming technique that focuses on objects and the actions those objects take rather than data and the logic behind that data.

Object-oriented programming involves objects, properties, and methods. Let’s start by defining these three terms.

Object
You already know what an object is. An object is just a thing. Take a quick look around you and identify a few of the objects you see. Your computer monitor, chair, and chalkboard are all considered objects.
In JavaScript, an object has the same definition. An object is anything you find on a Web page or site such as a window, button, table, or check box.
Property
A property is a characteristic of an object. This term is also the same for other situations. Think about one of the objects you identified earlier. Let’s take your chair, for example. Your chair might have a seat cushion. So, seat cushion is a property of the chair. In JavaScript, an example of a property might be the background color of a table.
Sometimes a property can be considered an object. For example, a cushion can be a property of a chair, but the cushion is actually an object as well. Or a check box can be a property of a form, but it can be an object on its own.
Method
A method is an action taken by an object. When your chair rolls across the floor, the act of rolling is considered a method. Let’s look at a JavaScript example of a method. A document can open, so the act of opening is considered a method.


Dot Syntax
JavaScript uses a method called dot syntax. Dot syntax is the practice of defining objects, properties and methods by listing them separated by a dot (.). Let’s look at some examples of how objects, properties, and methods can be defined using dot syntax.

table.bgcolor=“blue”

In the example code above, you can see an example of an object, a property, and a value. A value is the definition of a property or method. Any value contained in quotation marks is called a string value. In the example above, “table” is the object and “bgcolor,” or background color is the property. “Blue” is the value.

Let’s look at another example. Can you identify the object, property, method, and/or string value below?

document.write()

The example code above contains an object and a method. “Document” is the object. This is easy to spot because objects are always nouns. “Write” is the method. Methods are easy to spot because they are almost always verbs. Plus, methods are always followed up with a set of parentheses (()).

Dot Syntax Practice Problems
Try the following problems below. Check to see if your answers are correct by clicking the Show Answer button:

In each of the following pieces of code, identify the object, property, method, and/or string value.

1.
window.status
Answer Button

answer:
window=object
status=property

2.
image.src
Answer Button

answer:
image=object
src=property

3.
document.open()
Answer Button

answer:
document=object
open=method

4.
button.name
Answer Button

answer:
button=object
name=property

5.
document.bgcolor="black"
Answer Button

answer:
document=object
bgcolor=property
black=value

6.
image.name="border.gif"
Answer Button

answer:
image=object
name=property
border.gif=value

7.
window.closed
Answer Button

answer:
window=object
closed=property

8.
button.click()
Answer Button

answer:
button=object
click=method

9.
window.print()
Answer Button

answer:
window=object
print=method

10.
object.getDate()
Answer Button

answer:
object=object
getDate=method


Events
An event is an action taken by the user. For example, a user might load a Web page, click a button, or submit a form. These actions are all examples of events. JavaScript creates the language to define actions (events) and the effects of those actions (events) upon objects. Statements called event handlers are used to define such actions. An event handler is a programmed response to an event.

Some examples of event handlers are listed below:

onClick—triggers a response when the user clicks on an object
onLoad—triggers a response when the user loads a Web page
onMouseover—triggers a response when the user rolls the mouse cursor over an object
“onClick,” “onLoad,” and “onMouseover” are specific examples of the language that JavaScript allows us to use within our programming.

Variables
In JavaScript, a variable is anything that is assigned a value. In the example below, “bgcolor” is a variable because it’s been assigned the value “black.”

document.bgcolor=“black”

In the next example, “name” is the variable and “border.gif” is the value.

image.name=“border.gif”

It’s important to note that variable names cannot contain spaces or punctuation. Neither can they start with a digit.


Events
An event is an action taken by the user. For example, a user might load a Web page, click a button, or submit a form. These actions are all examples of events. JavaScript creates the language to define actions (events) and the effects of those actions (events) upon objects. Statements called event handlers are used to define such actions. An event handler is a programmed response to an event.

Some examples of event handlers are listed below:

onClick—triggers a response when the user clicks on an object
onLoad—triggers a response when the user loads a Web page
onMouseover—triggers a response when the user rolls the mouse cursor over an object
“onClick,” “onLoad,” and “onMouseover” are specific examples of the language that JavaScript allows us to use within our programming.

Variables
In JavaScript, a variable is anything that is assigned a value. In the example below, “bgcolor” is a variable because it’s been assigned the value “black.”

document.bgcolor=“black”

In the next example, “name” is the variable and “border.gif” is the value.

image.name=“border.gif”

It’s important to note that variable names cannot contain spaces or punctuation. Neither can they start with a digit.

Adding Comments to Scripts
It’s often helpful to add comments to scripts to either remind yourself later what certain scripts have been written for or to help others who read your code to understand what they’re looking at. Comments can be added to scripts so they are visible within the code, but do not show up on the Web page. There are two ways to add comments to your scripts:

//Using two slashes will allow you to add a one-line comment.

/*Using a slash followed with an asterisk will allow you to add multi-line comments.

For multi-line comments, you must indicate the end of your comments with an asterisk followed by a slash: */.

<script>

//No matter what you type here, it won’t show up on your Web page

document.write("This is my first JavaScript page!");

/*

You can also make multi-line comments.

None of this text will appear on your Web page.

*/

</script>


Adding JavaScript to a Web Page
Before we get started, it’s important to note that, unlike HTML, JavaScript is case sensitive. So it’s important to pay close attention as you’re writing JavaScript code.

JavaScript is written directly into HTML files. All JavaScript is contained within <script> tags, which can be put within the <head> tags or the <body> tags. The opening <script>tag tells the browser to start reading the text as JavaScript. The closing </script> tag tells the browser that the JavaScript is ending and to read the following text as HTML.

Copy (ctrl+c) and paste (ctrl+v) the following code into a text editor and save it as a Web page. Then, open it in a browser and see what it looks like. It should be a simple Web page with the statement “This is my first JavaScript page!” on it.

<html>

<body>

<script>

document.write("This is my first JavaScript page!");

</script>

</body>

</html>


Comparisons and Conditionals
Comparisons
There will be times when you want to compare a variable with another variable or with a particular value. For example, you might want a pop-up window to say "Happy Friday!" anytime a visitor comes to a Web site on a Friday. To do this, you'll need to compare the object "Day" with the value "Friday." The following comparison can be used to do this:

Day=="Friday"

A comparison is a line of JavaScript that measures, or compares, a variable against a defined value or another variable. A list of common comparisons is shown in the table below:

Comparison	Function
==

Is equal to

===

Is exactly equal to

>

Is greater than

<

Is less than

>=

Is greater than or equal to

<=

Is less than or equal to

&&

And

||

Or

!

Not



JavaScript Comparisons Practice Exercise
Use the table above to translate the following comparisons. The first one is done for you as an example.

1.
x&&y=="5"

Answer Button
Answer:
Both x and y are equal to "5."

2.
x<=y

Answer Button
Answer:
x is less than or equal to y.

3.
x||y="yes"

Answer Button
Answer:
x or y is equal to "yes."

4.
x>=y

Answer Button
Answer:
x is greater than or equal to y.

5.
x==="0.4"

Answer Button
Answer:
x is exactly equal to "0.4".

6.
x!=y

Answer Button
Answer:
x is not equal to y.

7.
x||y=="0"

Answer Button
Answer:
x or y is equal to "0."

8.
x&&y==="no"

Answer Button
Answer:
Both x and y are exactly equal to "no".

9.
x>y

Answer Button
Answer:
x is greater than y.

10.
x||y>="500"

Answer Button
Answer:
Either x or y is greater than or equal to "500."


Conditionals
Sometimes, you’ll want Web pages to respond differently to different conditions. For example, if it’s before 12:00pm, you might want the page to say “Good morning!” at the top. After 12:00 pm you might want the page to say “Welcome!” You’ve already learned how to use comparisons to determine whether the condition you want exists or not. In other words, you know how to program the browser to determine whether the time is before noon or not.

Defining Variables
The first step in writing a conditional is to define your variables. In order to determine the time, you need to determine the date. Let’s call this variable “Today.”

Today=new Date()

The function “new Date()” will call up all date information, such as month, day, year, and time. To extract the information you need from the new Date, you’ll need to define another variable:

Today=new Date()

Hour=Today.getHours()

In the script shown in red above, you are telling the browser to get the hour information from the variable “Today."

Here is a table of common JavaScript Date and Time functions:

Function	Operation
Date()	Returns a Date object
getDate()	Returns a number (from 1 - 31) representing the date (day of the month) of a Date object.
getDay()	Returns a number (from 0 - 6) representing the day of the week (0 = Sunday, 1 = Monday, etc.)
getMonth()	Returns a number (from 0 - 11) representing the month of the Date object. (0 = January, 1 = February, etc.)
getFullYear()	Returns a four-digit number representing the year of the Date object.
getHours()	Returns a number (from 0 - 23) representing the hour of the Date object.
getMinutes()	Returns a number (from 0 - 59) representing the minute of the Date object.
getSeconds()	Returns a number (from 0 - 59) representing the second of the Date object.


Scripting Conditionals
Assuming you�ve already defined your variables, the following comparison will determine whether the time is before or after noon.

Hour<12

But there�s more to it than that. Now you need to tell the browser to say �Good morning!� if that statement (�Hour<12�) is true and to say �Good afternoon!� if it�s false. To do this, you�ll need to use a conditional, or an if-else statement. A conditional is a statement that instructs the browser to perform different actions under different conditions.

Today=new Date()

Hour=Today.getHours()

if (Hour<12)
{
document.write("Good morning!");
}

The above JavaScript will display �Good morning!� if the time is less than, or before, 12:00 pm. As the statement is written now, though, nothing will happen if the time after 12:00 pm. You need an else statement for that:

if (Hour<12)
{
document.write("Good morning!");
}

else
{
document.write("Welcome!");
}

Let�s look at the entire code all together:


Sometimes you want to perform the same action several times within the same Web page. For instance, you may want several buttons on a Web page that display different information when a user clicks each button. For example, you might have a “Contact Information” button and some “About this Image” buttons. The JavaScript necessary to pull up the alert boxes can be saved as a function so it doesn’t have to be written out for each button.

A function is a set of JavaScript statements that result in an action. Functions are defined within <script> tags in the <head> section of an HTML page. An example function is shown below:

<html>

<head>

<script language="javascript" type="text/javascript">

function AlertBox(message)
{
alert(message)
}

</script>

</head>

</html>


Now, this function can be called any number of times from within the body of the HTML page.

<html>

<head>

<script language="javascript" type="text/javascript">

function AlertBox(message)
{
alert(message)
}

</script>

</head>

<body>

<center><img src=“images/leaf.jpg”><br>

<input type="button" onClick="AlertBox('Image taken on 03/12/09. Copyright John Smith 2009');" value="About this Image" /><br><br>

<input type="button" onClick="AlertBox('Photographer: John Smith; 312-555-4329');" value="Contact Information" />

</center>

</body

</html>

The results of the script above are shown on the next page.



Question Number 1	Points: 5.00/5.00
Question Text
Which of the following is an example of a JavaScript object?
Your Answer
7509239:C. Table ,7509240:D. Window
Question Number 2	Points: 5.00/5.00
Question Text
Which of the following accurately translates the following JavaScript comparison?
Hour<=12
Your Answer
D. The hour is less than or equal to 12.
Question Number 3	Points: 0.00/5.00
Question Text
If you want to repeat a series of JavaScript statements to perform a specific action several times throughout a Web page, which of the following might you use?
Your Answer
B. Comparison
Question Number 4	Points: 3.33/5.00
Question Text
Which of the following is an example of a JavaScript object?
Your Answer
7509241:A. Check box ,7509244:D. Table
Question Number 5	Points: 2.50/5.00
Question Text
Which of the following is an example of a JavaScript object?
Your Answer
7509245:A. Button
Question Number 6	Points: 0.00/5.00
Question Text
Which of the following is an example of a JavaScript property?
Your Answer
7509249:A. Background color ,7509252:D. Table
Question Number 7	Points: 5.00/5.00
Question Text
What is a set of JavaScript statements that result in an action?
Your Answer
C. Function
Question Number 8	Points: 5.00/5.00
Question Text
What is the following script an example of?
 Color==“Blue”
Your Answer
A. Comparison
Question Number 9	Points: 5.00/5.00
Question Text
What is a pop-up window that displays a message for the user and contains an “OK” button ?
Your Answer
A. Alert box
Question Number 10	Points: 5.00/5.00
Question Text
If you want a Web page to display a certain message depending on the time of day, which of the following would you use?
Your Answer
B. Conditional

Checking to See if JavaScript is Enabled
Although most modern browsers support JavaScript, it isn’t always enabled. To check to see if JavaScript is enabled in a visitor’s browser, you’ll need to create two <div> tags within the <body> tags of the Web page. Divisions, or sections of a Web page, are written as <div> tags. The browser will read these <div> tags whether JavaScript is enabled or not.

The first <div> tag will contain the message you want displayed if JavaScript is enabled in the browser. The second <div> tag will contain the message you want displayed if JavaScript is not enabled.

<div id="Enabled" style="visibility:hidden">JavaScript is enabled.</div>

<div id="Disabled">Please enable JavaScript in your browser.</div>

Notice the "id" attribute in each of the <div> tags above. This attribute defines the name of each division. One more attribute to note is the "style" attribute in the "jsEnabled" <div>. This attribute sets the visibility to hidden. As a result, this section will not appear if JavaScript is disabled.

Next, we need to create methods within a set of <script> tags directly after the <div> tags. Only browsers with JavaScript enabled will be able to read this section of the code.

<script language="javascript" type="text/javascript">

        {

       document.getElementById("Enabled").style.visibility = 'visible';

       document.getElementById("Disabled").style.visibility = 'hidden';

        }

</script>

The line "document.getElementById("Enabled").style.visibility=’visible’;" calls for the contents of the "Enabled" <div> to be displayed. The next line, "document.getElementById("Disabled").style.visibility=’hidden’;" calls for the contents of the "Disabled" <div> to be hidden. That way, the "Disabled" message will not show if JavaScript is enabled.


Script
Below, review the entire script needed to check whether JavaScript is enabled in a browser.


<html>

<body>

<div id="Enabled" style="visibility:hidden">JavaScript is enabled.</div>

<div id="Disabled">Please enable JavaScript in your browser.</div>

<script language="javascript" type="text/javascript">

{

document.getElementById("Enabled").style.visibility = 'visible';

document.getElementById("Disabled").style.visibility = 'hidden';

}

</script>

</body>

</html>



Checking for JavaScript Practice Exercise
Try the following problems below. Check to see if your answers are correct by clicking the Show Answer button:

Create an HTML file that checks to see if JavaScript is enabled in a browser. Try changing the messages that are displayed when JavaScript is disabled and when JavaScript is enabled.

Answer Button
Your script will differ, but you can look at the script below as an example. The red bold text shows the message that displays when JavaScript is enabled. The orange bold text shows the message that displays when JavaScript is disabled

<html>

<body>

<div id="Enabled" style="visibilty:hidden">JavaScript is on!

<div id="Disabled" >JavaScript is off!</div>

<script language="javascript" type="text/javascript">

{

document.getElementByld("Enabled").style.visibility = 'visible';

document.getElementByld("Disabled".style.visibility = 'hidden';

}

</script>

<body>

<html>


Redirecting Visitors
One option to offer your visitors who don�t have JavaScript enabled is a non-JavaScript version of your Web page. All visitors will be directed to that page to start. From there, you can direct visitors who have JavaScript enabled to your JavaScript page. Non-JavaScript-enabled visitors will simply remain on the same page.

To send your JavaScript-enabled visitors to another Web page, you need to add the following script within a set of <script> tags in the <head> section of your HTML page.

<!--

window.location="alternate_site.html"

-->

Note: "alternate_site.html" will be replaced with the page you wish the visitors to be redirected to. If it is to another site, the full path to the site page will have to be included within the quotes.

See below for the entire script needed to send your JavaScript-enabled visitors to another Web page.

<html>

<head>

<script type="text/javascript">

<!--

window.location="https://roads.advancedacademics.com"

//-->

</script>

</head>

</html>



The following script will perform the time delayed redirection to an alternative site:

<html>
<head>

<script type="text/javascript">
<!--
function delayer(){
window.location = "../javascriptredirect.php"
}
//-->
</script>
</head>
<body onLoad="setTimeout('delayer()', 5000)">
<h2>Prepare to be redirected!</h2>
<p>This page is a time delay redirect, please update your bookmarks to our new location!</p>

</body>
</html>

Now, let's see the time delayed redirection in action.

This is a link which demonstrates the time delayed redirection in operation.

The most important part of getting the delay to work is being sure to use the JavaScript function setTimeout. We want the delayer() function to be used after 5 seconds or 5000 milliseconds (5 seconds), so we pass the setTimeout() two arguments.

'delayer()'�The function we want setTimeout() to execute after the specified delay.
5000�the number of millisecods we want setTimeout() to wait before executing our function. 1000 miliseconds = 1 second.
Redirecting Visitors Practice Exercise
Try the following problems below. Check to see if your answers are correct by clicking the Show Answer button:

Create an HTML file that sends JavaScript-enabled visitors to another Web page. Try changing the Web page that the visitors are sent to.

Answer Button

JavaScript is a great tool to use if you want to display the time or date on a Web page or call for a specific event to occur depending on the date or time.

Displaying the Date
You can use JavaScript to display the date on a Web page. All you need is one variable and one method:


The script above will display a date in the following format:

Fri Mar 06 2009 09:56:43 GMT-0600 (Central Standard Time)


Formatting the Date
You can specify the format by defining additional variables in your script. Look at the variables in the script below. Don’t worry if you don’t understand all of the script. Just notice how the script defines how the information should be displayed. For example, the day will be displayed as "Sunday," "Monday," or "Tuesday," and so on.


<body>

<script language="javascript" type="text/javascript">

var now=new Date();

var days=new Array( 'Sunday','Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday');

var months=new Array('January','February','March','April','May',
'June','July','August','September','October',
'November','December');

var date=((now.getDate()<10) ? "0" : "") + now.getDate();

function fourdigits(number)

{

return (number > 1000) ? number + 1900 : number;

}

today=days(now.getDay()) + ", " + months(now.getMonth()) + " " +
date + ", " + (fourdigits(now.getYear()));

document.write(Today);

</script>

</body>

Now, look at the following line of script (shown in orange above):

Defines the code with the displayed result.
This variable defines the format of the date: Friday, March 6, 2009.


Displaying a Message Dependent on the Date and/or Time
Take a look at the scripting below. The various parts of the script should look familiar to you.


The first two lines in the script above define the variables. This piece of script calls for an event to occur dependent on the day of the week. But before you can determine the day, you need to determine the date. The variable "Today" calls for

Today=new Date()
The method “new Date()” will call up all date information, such as month, day, year, and time. To extract the information you need from the new Date, the second variable is defined:

Today=new Date()

Day=Today.getDay()
In the box above, the script shown in red tells the browser to get the day information from the variable "Today."

Now let’s look at the conditional:

Today=new Date()

Day=Today.getDay()

if (Day=5)

document.write("Happy Friday!");

}

else

{

document.write("Welcome!");

}


The script starts with a conditional, "Day=5" and goes on to say "If the day is equal to 5, then display 'Happy Friday!' Otherwise, display 'Welcome!'"


Creating a Countdown
The code for creating a countdown on your Web page is shown below. The example below counts down to graduation day. Remember, you don’t have to understand all of the script shown below. But you should be able to identify pieces of it well enough so you can edit the code for your own needs.


Click here for a list of common date/time JavaScript methods.


Working with Images
Creating Rollovers
A rollover is an image that is swapped out with another image when a user rolls a mouse cursor over the original image. To create a rollover, you must have two images that have the same dimensions: the original image and the image that appears when moused over.


It's important to note that the value of the "name" attribute in the image tag - "RolloverImage" - matches the src code in the Mouseover and Mouseout lines, which is "RolloverImage" as well.

onMouseover=RolloverImage src="'images/image01.gif'"
onMouseout=RolloverImage src="/contentserver/content/roadssection/333014/image02.gif">

This value can be anything you'd like it to be, as long as it's the same in all three places in the script.

Examine the following html script for an alternative way to create rollovers:

<html>
<head>
<title> Rollover </title>
<big><center>Advanced Academics</center></big>
<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
 homebuttonup = new Image();
 homebuttonup.src = "images/hardy1.jpg" ;
 homebuttondown = new Image() ;
 homebuttondown.src = "images/hardy2.jpg" ;
}
function buttondown( buttonname )
{
 if (document.images) {
  document[ buttonname ].src = eval( buttonname + "down.src" );
 }
}
function buttonup ( buttonname )
{
 if (document.images) {
  document[ buttonname ].src = eval( buttonname + "up.src" );
 }
}
// -->
</script>
</head>
<body><center>
<a href="https://roads.advancedacademics.com"
onmouseover="buttondown('homebutton')"
onmouseout="buttonup('homebutton')">
<img src="/contentserver/content/roadssection/333014/hardy1.jpg" name="homebutton" border="0" />
</a></center>
</body>
</html>


Creating Slide Shows
As a beginner JavaScript coder, being able to manipulate script is an important skill to have. Let�s look at the script below and see if you can use it to create a slideshow of images. Don�t worry if you don�t understand all of the script. Just make sure you recognize the parts of the script that you would alter to fit the code to your needs.

Variables define image files in slideshow.
Click here to see the slideshow in action.

Question Number 1	Points: 1.66/5.00
Question Text
Which of the following is an example of a JavaScript method?
Your Answer
7509264:D. Write
Question Number 2	Points: 5.00/5.00
Question Text
What is the name of variable in the following JavaScript?

<body>
      <script language="javascript"  type="text/javascript">
            Today=new Date()
            document.write(Today);
      </script>
</body>
Your Answer
C. Today
Question Number 3	Points: 5.00/5.00
Question Text
What tags are used to indicate a division on a Web page?
Your Answer
B. <div> and </div>
Question Number 4	Points: 2.50/5.00
Question Text
Which of the following is an inapporpriate JavaScript variable name?
Your Answer
7509265:A. 01color
Question Number 5	Points: 5.00/5.00
Question Text
Which of the following is an example of a JavaScript property?
Your Answer
7509254:B. Color ,7509255:C. Name
Question Number 6	Points: 5.00/5.00
Question Text
Which of the following accurately translates the following JavaScript comparison?
Day!=2
Your Answer
D. The day is not equal to 2.
Question Number 7	Points: 5.00/5.00
Question Text
What will the browser display as a result of the following JavaScript?

<body>
      <script language="javascript"  type="text/javascript">
            Today=new Date()
            document.write(Today);
      </script>
</body>
Your Answer
D. Today's date
Question Number 8	Points: 5.00/5.00
Question Text
Which of the following is an example of a JavaScript object?
Your Answer
7509239:C. Table ,7509240:D. Window
Question Number 9	Points: 3.33/5.00
Question Text
Which of the following is an example of a JavaScript object?
Your Answer
7509241:A. Check box ,7509244:D. Table
Question Number 10	Points: 5.00/5.00
Question Text
What is the method in the script below?

Today=new Date()

Day=Today.getDay()

      if (Day=1)
      {
      document.write("Class is scheduled for 2pm today.");
      }

      else
      {
      document.write("Welcome!");
      }
Your Answer
B. getDay()
Question Number 11	Points: 0.00/5.00
Question Text
In the following script, what is the name of the JavaScript function?
<input type="button" onClick="AlertBox('Copyright 2009');" value="Copyright Info" />
Your Answer
C. Copyright Info
Question Number 12	Points: 5.00/5.00
Question Text
Which of the following is written as an if-else statement?
Your Answer
C. Conditional
Question Number 13	Points: 5.00/5.00
Question Text
Which of the following is an example of a JavaScript method?
Your Answer
7509259:C. Open ,7509260:D. Print
Question Number 14	Points: 5.00/5.00
Question Text
Where are functions placed within a Web page?
Your Answer
B.  In between <head> tags
Question Number 15	Points: 5.00/5.00
Question Text
In the following script, what will be displayed in the alert box?
<input type="button" onClick="AlertBox('Copyright 2009');" value="Copyright Info" />
Your Answer
C. Copyright 2009
Question Number 16	Points: 5.00/5.00
Question Text
In the following script, what message will be displayed in the browser if JavaScript is enabled?

<html>
      <body>
            <div id="Enabled"  style="visibility:hidden">JavaScript 123</div>
            <div id="Disabled">JavaScript ABC</div>
            <script language="javascript" type="text/javascript">
                  {
                  document.getElementById("Enabled").style.visibility = 'visible';
                  document.getElementById("Disabled").style.visibility = 'hidden';
                  }
            </script>
      </body>
</html>
Your Answer
C. JavaScript 123
Question Number 17	Points: 5.00/5.00
Question Text
Which of the following accurately translates the following JavaScript comparison?
Age===12.5
Your Answer
B. The age is exactly equal to 12.5.
Question Number 18	Points: 2.50/5.00
Question Text
Which of the following is an inapporpriate JavaScript variable name?
Your Answer
7509272:D. table.border
Question Number 19	Points: 5.00/5.00
Question Text
In the following script, what is the filename of the image that appears when the mouse is NOT over it?

<body>
      <script language="javascript"  type="text/javascript">

            <a href=“photos.html”

            onMouseover=Photo_but.src=‘images/photo_button01.gif’”

            onMouseout=Photo_but.src=‘images/photo_button02.gif’”>

            <img src=“images/photo_button02.gif” originalAttribute="src" originalPath="“images/photo_button02.gif”" name=“Photo_but”>

            </a>

      </script>
</body>
Your Answer
D. photo_button02.gif
Question Number 20	Points: 5.00/5.00
Question Text
Which of the following is recommended when creating rollover images?
Your Answer
B. The two images should have the same dimensions.
Question Number 21	Points: 5.00/5.00
Question Text
What is a section of a Web page called?
Your Answer
B. Division
Question Number 22	Points: 5.00/5.00
Question Text
What is an image that is swapped out with another image when a user rolls a mouse cursor over the original image?
Your Answer
D. Rollover