Introduction to Web Pages

Overview

Topic 1, Part 1

Web Page Components and Functions

Table of Contents:

Main Web Page Components
Diagram of Functional Components of Web Page

 

  

 

Main Web Page Components

These are the three main components of all Web pages when viewing them with a Web browser:

  • Header - this is located at the top of the Web page as large text (or as a graphic of text), and is the first thing that the user sees. It often consists of either a site logo or title. Often, the title in the Header of a web page matches the Page Title.

    The Page Title, different from the Header, is the name that shows up at the top of the Web page window in the Title Bar. (See the diagram at the bottom of this page.) The Title of a web page identifies or names the page. The browser also may record it in the History or Go menus, and the user may keep a record of it in the Bookmark (or Favorites) menu. Search engines often use the Page Title when cataloguing Web pages.  You will be learning how to make a Page Title for each web page.
  • Body - This includes all the other information (written text or graphics) on the page.

    Graphics include various kinds of images, pictures, buttons, clip art, cartoons, and photos.

    Hyperlinks are also in the Body - they are usually either click-able text underlined in blue, or a click-able image. When the mouse cursor is placed over text (or an image) that is hyper-linked, it will change from an arrow to a pointing hand.

When you click on a hyperlink, it takes you to another area - another Web page (internal to the site), another Web site (external to the site), or a hyperlink can also jump to another part of the same Web page you are viewing.

Here's a summary description of various types of links found in the Body:

Text (or Hypertext) link: An underlined set of text, highlighted in a color different from surrounding text, that links (via a Web page address) to another Web page when the user clicks on the highlighted text. Text that is highlighted like this is called a ' hot spot.'

Graphic (or Button) link: A graphic, button or picture on a Web page that links (via a hidden Web page address) to another Web page or location when the user clicks on the image (a 'hot-spot'). Images (a button or other type of graphic) that are hyperlinked sometimes have colored borders.  

  • Footer - this element is located at the bottom of every Web page. The footer typically contains items such as copyright notices, the webmaster's e-mail address (or link), the company or organization that sponsors the site, disclaimers, a last revision date, a link back to the home page, a "what's new" link, or even a textual (hyperlinked) site menu. The footers should remain consistent from page to page.

Unseen Elements - there are a number of things that can't be seen on a web page - i.e., META tags (that allow you to identify the author of the page, provide a site or page description, and offer "key words" for use in indexing the page by search engines), invisible table borders, etc., that are contained in the HTML source code of each page.

Back to Top

Diagram of Functional Components of Web Page

The diagram and descriptions below identify some distinct functional components of a Web page:

Visit the following site to view examples of basic Web page components:

Basic HTML: Web Page Components
http://www.bu.edu/webcentral/learning/html/basics/components.html

 Back to Top

Topic 1, Part 2

What Makes the Various Parts of a Web Page Work?

Table of Contents:

How a Web Browser Functions
How to See the Actual HTML Coding

We view Web pages through a software program on a computer called a Web browser, for example:

  • Netscape Communicator
  • Internet Explorer

The browser does two things:

  • interprets the Web page address that is called for and sends out a request to the exact location for the web page file (on a Web server computer somewhere else)
  • the browser reads the HTML file and formats it into a page that can be read on your computer screen, after the Web server responds by sending back to the browser the HTML file (and related graphics files) for the Web page requested
 
 

What Does a Web Browser Do?

A Web browser reads an HTML file from the Hard Drive of a computer, either your computer or the Web to which you're connected.

What you see on a transmitted Web page on your computer screen (when using a browser) looks like a word processing or desktop publishing document. In reality, the Web page exists as a TEXT-ONLY file on a computer hard drive, written with HTML code.

When a Web browser reads an HTML file it reads the file just as you would read it, starting from the top left to the bottom right of the document, executing the commands in that order. It builds the page on-the-fly from the instructions in the HTML code Tags. It inserts graphics from separate files and displays them at the size and location where instructed.

Note about HTML

HTML (hyper-text markup language) is a type of programming language whose commands instruct the Web browser how to format or display the Web page into a hyper-linked World Wide Web page on the screen. The HTML source code is not visible on the actual Web page.
 

One more thing:

A web site is normally composed of a series or collection of Web pages (each with a unique URL or address). This is similar to the concept of a book having many pages.

Back to Top

  
   

 

How to See the Actual HTML Coding

You can see the HTML for a Web page by going to the VIEW menu and selecting the Source or Page Source command.

Macintosh Screenshot

View of Sample Source Code

A Caution about Viewing Source Code for Web Pages with Navigational Frames

Pages with Navigation Frames on the Left (above)

Note: With websites that use FRAMES (there's a stationary navigation bar on the left and pages that change on the right), you need to be more careful about viewing the HTML Source Code.

With a framed page, you need to select the frame desired before viewing the Source.

Netscape users on a Windows computer:
If there is a framed page, first right-click with your mouse on the right side of the Web page and select "Open Frame in New Window" before viewing the Source code.

Netscape users on a Macintosh computer:
If there is a framed page, first click and hold with your mouse on the right side of the Web page and select "New Window with this Frame" before viewing the Source code.

Explorer users on a Windows computer:
If there is a framed page, first right-click on the right side of the Web page and from the menu that appears, select "View Source." To return to the screen you were reading after viewing the HTML source code, close the HTML source code window.

Back to Top

Assignment #1: Find Components of This Web Page

CLICK HERE and the contents of this course web page (unframed) will open up in a new browser window. Using that Web page (the one in the new window) as your example, identify the different parts of a Web page.

1.       View the HTML source code for the Web page (as explained above). Select and copy approximately the first 10 lines of the HTML code. Paste them into the first part of a Word document

2.       What is the "Page Title" for the Web page?

Find the part of the HTML source code that includes the page title. You will find it enclosed between the phrases <title> and </title>. These bracketed Tags indicate the beginning and end of the title text.

3.       What is the first and last tag for the Web page? (Tags are enclosed in brackets)

4.       Now close the window that displays the HTML source code.

5.       What is the file name for a graphic on the page (see "How-to" below)?

How to find the file name of a graphic:

o        On a Windows computer, right-click with the mouse button on the graphic, and you will be presented with a pop-up menu of choices. You can select Save Image (or Picture) As... and the next window ought to show you the current graphic file name (in the File name text box), ending in either .gif or .jpg. Or right-click on a graphic and select Properties in the pop-up menu. The next window ought to identify the graphic file name, ending in either .gif or .jpg.

6.       Identify one link on the page and the Web page address that it links to. Note: It is recommended that you use the "How Stuff Works" link under the illustration near the top of the page.

One way to find the address of a link:

Move your cursor over the hot spot (e.g., usually a blue underlined piece of text) and read the corresponding address at the bottom of the screen.

Print your Word document with answers to the above questions.

Please note:at the top of your document page, type "Answers to Web Assignment # 1 Questions". (don't forget your name)

Back to Top

Topic 2

Critical Evaluation of Web Pages

  

Topic Objective:

  • View Web sites and Web pages on the Internet that give criteria for evaluating the various qualities of existing Web pages.
  • View examples of classroom Web sites to help develop ideas for your own final project.

Topic Overview:

In this topic you will learn some rules of good Web page design and you will visit many good examples of education Web sites. You will learn one way to evaluate Web pages.

This topic is divided into two parts, including one assignment in each part:

  • Part 1: Design Layout of Web Pages
    • Assignment #2: Your Web Site Criteria
  • Part 2: Practicing Web Site Evaluation
    • Assignment #3: Web Site Evaluation

Each of these parts is related to the assignment that follows it.

 Topic 2, Part 1

Design Layout of Web Pages

Table of Contents:

Web Layout Planning and Design
Visual Layout
Functional Layout
Content and Information
Web Site Evaluation Criteria and Guidelines
Tips for Designing Web Sites
Assignment #2

 

Introduction to Web Layout Planning and Design

Like any document you present to others, it's a good idea to spend some time thinking through the way that information is presented, physically laid out, and designed on a web page. Always consider the primary goals of your web pages (or site) - What do you intend to say to your audience?

The Visible Page

One thing that is very important to remember is that only a small part of an entire web page is displayed in a browser window at any one time - usually just the Header and a small portion of the Body. Therefore, what is designed to be displayed first should be important and prominent (before scrolling down), similar to a newspaper's major headlines that appear "above the fold."

Caution: All Web-page/site designers need to be aware that because HTML is cross-platform (it can run on both Macintosh and Windows-based computers), and can be displayed on various kinds of computers, monitors, and with different browser types or versions, there are often compromises that must be made. Pages must be made somewhat 'generic.' Specifying the exact size and kind of font or window size, for instance, doesn't guarantee that the viewer will see what you see.

There are three specific areas of Web layout planning that you'll need to consider when creating your own Web pages later in this course:

 

Areas to Plan in Web Layout and Design

 

Back to Top

Questions and Concerns Regarding Visual Layout

The better pages are those that typically follow most of these techniques (best design practices):

- Is each page identified with a brief summary or highlight at the top of each page - what you see in your Web browser before scrolling?

- Are the purpose and the content of the Web site clear? Is the title of each page informative? (Provide a descriptive and unique title for each page, because these are used by search engines to identify pages.) Are headings clear and descriptive, to provide cues to the reader about how the site is organized?

- Are graphics used to highlight sections of the page or to offer content, or are they merely decorative?

- Is the design style of the Web site standardized and consistent? Does each page use similar backgrounds, text colors, link colors, navigational elements (bars, buttons or aids), logos, page titles, headers and footers (copyright information, e-mail address, etc.), and are these things consistently positioned or placed on all pages?

- Are the font and background colors attractive, readable, the right size and easy to look at? Is there enough 'white space'? Have you avoided clashing text and colorful backgrounds (see below)

This is OVERKILL - WAY TOO LARGE!

 

- Do the icons clearly represent what is intended? Are items and information on a page positioned or aligned (vertically or horizontally) to be read more easily?

- Are the pages text-intensive (unless intended for printing, which requires fewer graphics) or not? Is there a good blend of text and graphics? Have you avoided gratuitous graphics and too many distracting, blinking animated images? (See below)

Other Definite No-No's

- Is the home page attractive, with strong eye appeal? Does it make you want to continue exploring?

- Is the Web page readable (without scrolling) on various sizes of monitors or screen resolutions, or with customized font and font size choices? (Have you used a readable font size - at least 10 pt. - on your page?) And have you made sure you don't mix serif and sans-serif fonts within the text?

 

Questions and Concerns Regarding Functional Layout

- Are buttons, hyperlinks, and image links clearly labeled (and obvious) as to their destinations? Is there a site map page or navigation bar? Is there always a link back to the Home page? Are links sufficient to move both forward and backward through the site?
(see examples below)

Navigational Buttons and Site Navigation Bar
(examples)

- Are site navigational aids provided in both graphics and as hyperlinked text (as above)?

- Have you avoided a splash screen (an introductory title page) that often serves only as decoration before the site's home page?

- Is there a similar layout from page to page, so you know what to expect and so you know that you’re in the same site?

- Is the site intuitive, or is it likely that it may be misunderstood?

- How much scrolling down the Web page is involved?

- Does everything work well together? Can you move easily, from page to page, link to link, item to item, without getting confused or lost? Can you "back" out of the site, or do you get stuck looping between pages?

- Is the site 'sticky', meaning that it is mostly inward-focused and designed to keep you there, or is the site mostly pointing outward to other sites?

- Is the material broken up into multiple pages that are connected by links to keep the page content focused? Are your most important links and information placed higher on the page ('above the fold' or scroll line)? Are links descriptively labeled?

- Can you find your way around and easily locate a particular page from any other page? Is navigation awkward or not? Is information buried on the site? Beginning at the home page, how many clicks away are visitors from the information that they are looking for? (Note: Most design articles on the Web suggest that visitors should not be any farther than three clicks away from the information that they are looking for.)

- Does the Web site appeal only to one audience? (A Web page designed for students will be different from one that is designed for educators and other adults.)

Back to Top

Questions and Concerns Regarding the Content and Information on Web Pages

- Content is the most critical element of a web site. Make sure you're placing your most important content somewhere near the top of your site's navigational hierarchy (or located by the fewest possible clicks away from the home page). Two of the biggest sins of Web page authoring is to have outdated material, and to have dead (or broken) links.

- What is the relative value of the Web site's informational content  in comparison to the range of information resources available on this topic?

- To increase readability, use shorter sentences, and use lists to break up longer sentences. Avoid long scrolling pages.

- If a page is unfinished, it is highly recommended that it not be posted - with an "Under Construction" graphic (see below)

A Definite No-No

- Does the text follow basic rules of grammar, spelling and literary composition?

- Is the purpose of the Web page clearly stated?

- How complete and accurate are the information and the links provided?

- Has the site been designed for a user with a 56K modem connection speed? Do pages load quickily?

- Who is the author or producer? Is contact information for the author or producer included in the document? In the footer, who is providing the "information" you are viewing, and what might be their point of view or bias?

- Can you identify the host of the Web site by looking at the Web site address (domain name)? What is the authority or expertise of the individual or group that created this site? When were the Web pages produced? Last revised?

- If there are lots of graphics, do they load quickly, and are they well positioned? If there is multimedia on the site (audio files – sound and music, video, etc.), does it serve a purpose? Does it support the online content without being distracting?

- Consider offering 'printable' (you see "Printer-Friendly Copy" buttons frequently on web pages) or alternative forms of the web page (downloadable word-processing or text documents, or .pdf files).

(Optional) For practice in recognizing elements of 'Bad Web Design,' visit the following site and after reading the directions, click on the stopwatch to start critiquing a web site (identifying flaws and problems).

Two Minute Offense
http://www.fixingyourwebsite.com/2minuteoffense/2minute.php

Back to Top

Web Site Evaluation Criteria and Guidelines

You can find many examples of Web site evaluation grids or checklists on the Internet. Many such checklists use these five general criteria:

  1. Accuracy
  2. Authority
  3. Objectivity
  4. Currency
  5. Coverage

Visit one or two of the following Web sites for other views of evaluation criteria for Web sites:

Evaluating Web Pages: A Web Quest
http://mciunix.mciu.k12.pa.us/~spjvweb/evalwebteach.html
Here's an excellent Web Quest on the subject designed to be used with 9th-12th grade students.

Evaluating Web Sites
http://www.lesley.edu/library/guides/research/evaluating_web.html
Please note their list of Hoax websites (visit some of them too) and see how difficult it may be to distinguish authentic sites from harmful or hateful ones.

Evaluating Web Sites: Criteria and Tools
http://www.library.cornell.edu/okuref/research/webeval.html

Evaluating Web Resources
http://www2.widener.edu/Wolfgram-Memorial-Library/webevaluation/webeval.htm
This site includes sophisticated evaluation modules for various types of web pages (i.e., advocacy, business/marketing, news, informational, personal, etc.). It also includes a PowerPoint presentation for download on Web Resource Evaluation Techniques.

Evaluating Web Sites (Multnomah County Library System, Portland, OR)
http://www.multnomah.lib.or.us/lib/homework/webeval.html

Evaluating Web Pages - Guide to Library Research
http://www.lib.duke.edu/libguide/evaluating_web.htm

Evaluating Web Sites (Phil Stohrer, Media Specialist at Portage West Middle School, Portage, MI)
http://www.edcen.ehhs.cmich.edu/~pstohrer/eval.html

Visit a few of the following Web site addresses – they are very helpful guides for creating Web sites, and for establishing the criteria for evaluating the quality of a Web site (both good and bad).

Kathy Schrock’s Guide for Educators: Critical Evaluation Information
http://discoveryschool.com/schrockguide/eval.html

How to Tell if You Are Looking at a Great Web Site
http://www.ala.org/parentspage/greatsites/criteria.html
Developed by the Association for Library Service to Children, a division of the American Library Association.

Blue Web'n Site Evaluation Rubric
http://www.kn.pacbell.com/wired/bluewebn/rubric.html

NetMechanic
http://www.netmechanic.com/
A great technically-oriented site that provides HTML code help (checks tags, links, download time, browser compatibility, etc) and much more.

Optional: The article below discusses the need to properly handle electronically distributed information. Misinformation takes many forms including spam, hoaxes, lies, and incorrect information:

Fraud and Deception on the Internet
http://marylaine.com/lies.html

Back to Top

 

 

Tips for Designing Web Sites

Also browse one or two of these articles about the most common Web Design Mistakes that Web authors make:

The Rules: Ten Things All Web Authors Should Know
http://www.pantos.org/atw/f-35426.html

Top Ten Mistakes Revisited Three Years Later
http://www.useit.com/alertbox/990502.html

The Top 10 Ways to Improve Your Web Page
http://jeffglover.com/ss.php

Assignment # 2: Your Web Site Criteria

Create your own list of the top five criteria that you believe are the most important in evaluating web site content and design. Print your list and turn it in to your grade-level basket.