Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Internet Junk

VIEWS: 2 PAGES: 66

									Web Teaching
 Materials
   Compendium To
How To Start A Youth
Web Advisory Program




      Nora Harris
     Maria Robinson
  Children’s Hospital Boston
 Web Teaching
   Materials
   Compendium To
How To Start A Youth
Web Advisory Program
      Nora Harris, B.S.
    Maria Robinson, B.A.

The Youth Web Advisory Program
Center for Young Women's Health
 Division of Adolescent Medicine
   Children's Hospital Boston

              2002
                       TABLE OF CONTENTS

Foreword and Acknowledgements                         v
I.   Introduction to the Internet
     A. Basics                                        1
     B. Web Browsers                                  1
     C. Using a Web Browser                           2
     D. Using a Search Engine                         4
     E. Links                                         6
     F. Printing and Downloading from the Web         6
II. Making a Web Page
     A. Introduction                                   7
     B. Important Terms                                9
     C. The Minimal Web Page                          10
     D. More HTML Tags                                12
     E. Basic Font Tricks                             23
     F. Special Characters                            25
     G. Creating Links                                26
     H. Adding Images                                 30
     I. Formatting Graphics                           33
     J. Colors on the Web                             36
     K. Formatting Page Backgrounds and Font Colors   37
     L. Tables                                        40
     M. Things to Consider When Designing a Layout    49
     N. Adding Special Content                        50
     O. Finishing Touches                             53
III. Computer Experience Questionnaire                55



                                    iii
                      Foreword and Acknowledgments
This Web manual was produced as a compendium to the manual, "How to Start a Youth
Web Advisory Program." It is meant to serve as a lesson plan for Web advisors and
instructors to follow in the education of youth advisors on the topics of navigating the
Internet and creating a Web page.

We would like to thank and congratulate the 5 youth advisors who took part in the web
training and created their own youth web pages for The Center for Young Women's
Health website, www.youngwomenshealth.org. Kerry-Ann Gordon, Jennifer Schweon,
Elizabeth Treganowan, Jessenia Velazquez, and Jennifer Ward were essential for the
piloting of the web training section of the Youth Web Advisory Program. We would also
like to thank Liv Herriot for her thorough and creative edits.

This report was produced through the support of the Maternal and Child Health
Bureau/Health Resources and Services Administration (Grant No. 5T71MC00009-10),
the AOL Foundation, the Junior League of Boston, the Cabot Family Charitable Trust,
and the Children's Hospital League.

                                  S. Jean Emans, MD
                                    Marc Laufer, MD
                                    Nora Harris, BS
                                   Lara Hauslaib, BA
                                  Maria Robinson, BA
                               Phaedra Thomas, BSN, RN




            This publication does not necessarily reflect the views of the Maternal
           and Child Health Bureau, Health Resources and Service Administration.

                                              v
I.     Introduction to the Internet
A.     Basics

The Internet was originally set up by scientists as a way to share information with one another
more quickly and efficiently. Before the Internet was created, it was a challenge for scientists
to find ways to share their work with people in different parts of the world. In the early 1960’s,
scientists created a solution to this problem by inventing the first version of the Internet, called
the ARPANET. Using the ARPANET, scientists were able to instantaneously share scientific
papers, questions, thoughts, and ideas with people all over the world. The ARPANET was the
beginning of the Internet that we are familiar with today.

The Internet actually consists of many things: e-mail, the Web, FTP, and more. All of these al-
low for electronic transmission of information from one “server” to another. A server is a com-
puter with special software that allows people to connect to it remotely. When you type in a
Web address, the words directly following the “http://” are the name of the server. For example,
in the address for Diet Coke (http://www.dietcoke.com/), “www.dietcoke.com” is the name for a
server owned by Coke that the Web page sits on. No one ever turns off the server. If it is
turned off, or if something in the computer breaks, then no one can log into the server. When
that happens, we say that the server is “down.”

As you probably know, the Internet is no longer restricted to scientists. Today, over 50% of
Americans use the Internet regularly. You may have one or more e-mail addresses, a home
computer hooked up to an online service, or access to an online service through your school or
library. Some common uses for the Web today include shopping, playing games, visiting chat
rooms, and finding information about things like soft drinks, TV, movies, and musical groups. In
fact, it is likely that you have already visited some or all of these kinds of Web sites, without
ever running into any scientific information. Though some people don’t like that the Web has
taken this direction, these sites still have the same goal as the original inventors of the Inter-
net—to communicate information instantly, 24 hours a day, all over the world.


B.     Web Browsers

If you wish to look at Web pages, you will need a special program called a Web browser. Web
browsers translate the information stored on the server into the Web page that you see on your
computer. There are many different Web browsers, but the most popular is called Internet Ex-
plorer. The second most popular browser is called Netscape Navigator. Internet Explorer
(commonly called “IE”) is put out by Microsoft Corporation, and Netscape is put out by the Net-
scape Corporation.

One problem you will face as you build Web pages is that Web browsers sometimes display
things differently. Each different browser may or may not support all programming languages
and/or features. Even when they do support the language you are using, things can still look
very different from one browser to the next. This forces Web developers to crosscheck all
pages (or at least the important ones) with at least the two major browsers to be sure they work
properly. This is less of a problem for people just starting out in Web design because most
relatively simple pages should look the same in both Netscape and IE.




                                                 1
This is an example of how a Web page appears in Internet Explorer 6.0:




C.     Using a Web Browser

When using a Web browser, you should know the purpose of the different buttons on the tool-
bar (the bar at the top of the window). The exact names and icons used for these buttons may
change depending on which browser you’re using, but they are all similar. The icons below are
from Internet Explorer 6.0.

       The “back” button moves you back to the previous page you were
       looking at. If you click the small arrow to the right of the button,
       you will see a list of all the pages you have seen since you opened
       the browser for your current session. This list is called the history.
       It allows you to quickly go back to a page you saw a while ago.

       The “forward” button does the reverse of the “back” button! If you
       click the small arrow to the right of the button, you will see a list of
       all the pages that are forward from your current page.

       The “refresh” button, sometimes called the “reload” button, will
       load the page again. This can be useful when the page stops
       loading partway through or you have modified the HTML source
       (discussed later) and wish to view your changes.




                                                 2
       The “home” button will take you to whatever is designated as the
       “home” page in the preferences. This is the Web page that loads
       when you first open Netscape or Internet Explorer

       The “search” button opens a sidebar or window where you can
       type in your search terms. The search is run by whoever makes
       the browser, in this case, Microsoft.

       The “print” button prints the page you are currently viewing.



       The “stop” button stops the current page from loading. This is
       useful, for example, if you realize that you don’t want to be on that
       particular page, or if the page is taking too long to load.

       The “history” button opens a sidebar which lists all of the pages in
       your browser’s history. Depending on your personal settings, you
       can set your history to remember just the pages you’ve visited dur-
       ing the past 24 hours up to remembering every page you’ve visited
       in the past 99 days.

       On the far right of the browser is a graphic that tells you when a
       page is finished loading (in IE 6.0, the graphic is this checkered
       flag). This graphic loops through an animation which stops when
       the page is fully loaded onto your screen. For some browsers,
       clicking on this icon will take you to the browser company’s Web
       site.

In the earlier example of a Web page rendered by Internet Explorer, you may have noticed the
Web address (http://artemis.simmons.edu/~harris/) near the top. This address (called the URL)
is written in the “address bar” (also called the “location bar”). The address bar tells you the URL
of the Web site currently on display. All browsers have an address bar, usually placed some-
where close to the top of the browser window. This is the address bar in IE 6.0:




To use the address bar, all you need to do is click once somewhere in it, until there is a blinking
line in it (the cursor). Then you just type in the address and press return. It will then take you
to the URL you specified.

The small arrow to the right of the location bar’s window is another way to view your history. If
you click and hold the left mouse button on this arrow, you will see a list of recent addresses
that have been typed into the address bar.

In the example of the Web page as rendered by Internet Explorer, you may notice that the URL
begins with “http://.” This is how most Web pages are named. However, this is not the only
type of address that can be typed into the address bar.




                                                3
Here is a table of several other ways a URL can begin:

       https    Also for a Web page, but the extra “s” means that the Web page is “se-
                cure.” This means that the information is encrypted (put into secret
                code before it is sent across the Web). This is (or should be) used for
                online purchases or whenever you are submitting sensitive information
                like bank account numbers, social security numbers, etc.

       ftp      Stands for “file transfer protocol.” FTP is a method for transferring files
                from one computer to another. When you download programs, you of-
                ten do this from an ftp site, though you may not know it if the browser
                connects to it for you.

       telnet   Often used for connecting to e-mail. Telnet allows you to remotely con-
                nect to another server, such as a library or e-mail server somewhere
                else, without having to pay long distance!

       file     Use this to view a file on your hard drive. (You’ll see this in action when
                we start building Web pages.)

Although you can use your browser for these other URLs, most people usually use separate
programs for ftp and telnet. For Macintosh computers, the most popular program for ftp is
called Fetch; for Windows-based computers, it’s WS_FTP. The programs commonly used to
telnet are usually called “Telnet.”

You may never use any of these other URLs, but you might run into them as you explore the
Web, so it is helpful to be familiar with these terms.


D.     Using a Search Engine

So far we have assumed that you know the URL of the pages you would like to visit. Some-
times, however, you know what information you’re looking for but you don’t have the address.
When this happens, you will need to use a search engine.

There are hundreds of search engines to choose from. The following is a comparison of several
of the most popular search engines on the Web today:

     Name:           Address:                      Features:
     Yahoo!          http://www.yahoo.com/         Yahoo! is an “index” that lists sites by
                                                   topic. Yahoo!’s index is compiled by hand
                                                   by humans. Sites are submitted to Ya-
                                                   hoo! and Yahoo!’s staff decides whether
                                                   or not to add it to the index.
     Lycos           http://www.lycos.com/         Lycos is another index, but also includes
                                                   a search engine. The search engine
                                                   uses a computer program to find sites,
                                                   therefore eliminating the lag time created
                                                   by using people to index.



                                               4
    HotBot          http://www.HotBot.com/          HotBot uses the same format as Lycos.

    Google          http://www.google.com/          Google is a search engine that uses a
                                                    special mathematical formula to return
                                                    very accurate results for each search.
    AltaVista       http://www.altavista.com/       AltaVista is the largest search engine, so
                                                    it is a good choice when looking for hard-
                                                    to-find information. Recently, they also
                                                    began an index.

All of these search engines allow you to perform a Boolean search (for example: " ‘Web advi-
sory' AND women").

A newer type of search on the Web has live people search the Web and list the best sites on a
particular topic (an example of this is About.com (http://www.about.com/).

Another newer alternative for Web searchers is called a “Meta Search Engine.” These use
special technology to “search the search engines.” Meta Search Engines provide users with
the top search results from each of several popular search engine. Some examples of Meta
Search     Engines    are   Mamma.com       (http://www.mamma.com/)   and    DogPile.com
(http://www.dogpile.com/).

When you perform a search, the pages found by the search engine are displayed in a “results
page.” The following is an example of a results page when searching for “young women’s
health” using Google:




                                                5
When you get the results from a search engine, they are often displayed as the title and/or URL
of the page, with one or both of them a different color from the rest of the text and underlined.
If you place your mouse over these words, you will notice that the normal mouse cursor turns
into a hand. This is because these underlined words are what we call a “link.” To follow a link,
you click the left mouse button once in Windows, or click the mouse button for Macs.


E.      Links

Links are the backbone of the Internet. When you click on a link, it takes you to a new URL.
This new URL could take you somewhere else on the same page, or to another page within the
same site, or to another site altogether. In this way, a “web” of pages is created as each page
links to the next.

Without links, you would have to type in the URL of every single page you wished to visit. That
could be hundreds or thousands of URLs within just one site! This would make the Web diffi-
cult or impossible to use. Therefore, almost every page on the Web has links. You could say
that links are the most important part of the Web.

The default look of links on the Web is blue and underlined, but Web site designers can set
their page to display links in any color he or she chooses, with or without underlining. This de-
sign flexibility can enhance the overall look of a Web site, but it can also cause some problems.
For example, if the designer chooses a color that does not show up well against the back-
ground, the link will be difficult to see. Sometimes the designer may make the links the same
color as the rest of the text. Though this can make the page look a bit nicer on the screen, the
link is useless if your visitors do not notice it. Therefore, it is good practice to set links apart
using a different color, especially within paragraphs of text. It is usually safe to get more crea-
tive with the look of links in menu bars or other places where it is obvious that there should be
links.


F.     Printing and Downloading from the Web

Suppose you’ve used a search engine and found a fabulous site about your favorite band. On
the site there is a section with song lyrics that you’ve been trying to figure out for ages! What
do you do? You have a couple of options:

       1. Print out the page!

       2. Go to File → Save As, and save the file as a “text” file. This can be useful if the
          computer you are using has no printer, and you have a disk that you can save the
          file to. Or you can save it that way and then cut and paste the saved file into a word
          processing document, e-mail, etc. For example, you might want to e-mail the lyrics
          to a friend, or paste them into a document you’re creating with lyrics to your favorite
          songs. Saving the file as text erases all of the formatting within the page. Usually,
          this is not a big problem, but if the information was contained in a table (i.e., a bus
          schedule or a table of airline flights and departure times), you may need to adjust
          the formatting when you open it in your word processing program. If you want only
          some of the words on a page, you can highlight only the text that you want to copy
          and then copy it using the edit menu, just like with Microsoft Word or other word



                                                 6
           processing programs. Then you just open your document or e-mail and paste the
           information into it.

Most browsers also allow you to copy pictures and graphics that you see on the Web. To
download images, by click the right mouse button for Windows (hold down the mouse button for
Macs) and choose the “Save image as...” option in the menu that appears. A box should then
pop up which will allow you to rename the file and choose the folder in which you’d like to save
it. You can also use this technique to save sounds. To save background images, use this
same technique, but click the mouse button over the background in a place where it is not cov-
ered by content.

Saving images from the Web can be a practical way to gather graphics when you are building a
Web page, but if you do this, you must make absolutely sure that the image is not copyrighted.
If you take a copyrighted image and use it on your own page, it is stealing. Even if the image is
not copyrighted, it is good online etiquette (called “netiquette”) to ask the site author’s permis-
sion before you take the image.

You may find links to screensavers on some Web sites. Saving a screensaver is different than
saving images or text. Screensavers are programs. Generally, you can save a program simply
by clicking on the link. The link may take you to a page that gives further instructions, or a dia-
log box may pop up that will allow you to choose where the file should be saved. This will hap-
pen with any file type that the browser cannot read. For example, a ".zip" (Windows com-
pressed file) file or an “.mp3” sound file would bring up a dialog box, while a link to an ".html"
file would bring up another Web page. Download program files with caution. They can contain
viruses that can cause serious damage to the contents of your computer. You should be sure
that the file you are downloading is from a reliable source, and you should scan the file with vi-
rus protection software before installing it on your system.



II. Making a Web Page
A.     Introduction

People create Web pages for a variety of reasons. Some people build pages because they
have an important message that they want to spread. Other people make pages for personal
reasons, like to share family news and photos with far away friends and relatives. Still others
have a product or service that they would like to advertise. Web pages are useful for these and
many other purposes. Most Web pages contain a combination of content (i.e., information
about a business) and links (i.e., links to other Web sites that share your message), though
some sites contain only one or the other.

In order to build a Web page, you must have three important things:

       1. A message (i.e., something to say). Too often, people forget this step!

       2. A server. The server is where you will put your pages when they are built.

       3. A text editor. The text editor is what you will use to compose your Web pages.
          You can use a special Web editing program, a simple text editor (like Windows



                                                7
           Notepad), or any kind of word processing program you like (Word, Claris-
           Works, etc.), as long as it can save in a “Text-Only” format.

Also, although it is not technically necessary, it is a good idea to have a Web browser so
you can test out the pages that you build. Testing your pages in a browser is the only
way to be sure that they will work properly online.

Once you have the three essentials (and hopefully a Web browser), you are ready to begin
building your page. However, the Web does not understand English. The Web speaks its own
language, called HTML (which stands for “HyperText Markup Language”). The browser “reads”
the HTML document and acts as a translator, converting the HTML into what you see on your
screen. The browser does not understand English either, but it understands HTML “elements,”
which tell the browser where to put all of the words and pictures that we see. HTML can also
tell the browser how to find things and how to make things look or behave.

No matter what kind of computer you use to create or view Web pages, the language of the
Web does not change. This is why Web pages must be saved as “Text-Only.” When you save
something this way, you tell the program to use exactly the letters that you typed in, without
adding any special formatting “extras.” This means that you are restricted to typing only “AS-
CII” characters. ASCII characters are all of the letters and numbers on the keyboard when you
only press those keys, or if you press the <SHIFT> key. That means you cannot use special
characters, such as “ñ.” If you try to use any special characters, they will show up as nonsense
characters. You can avoid this issue by writing your Web pages using the plain-text editor that
comes standard with most computers. These programs will only save as “Text-Only,” which will
help keep your HTML clean and simple. For Macintoshes, the plain-text editor would be Sim-
pleText or TeachText, and for Windows it would be Notepad.

You can use a word processing program to write Web pages as long as you make sure to save
your HTML documents as “Text-Only.” One problem with using word processing programs is
that most newer word processing programs use “smart quotes” that curve around the words
they enclose. In HTML documents, smart quotes and “smart” apostrophes (’) will be appear as
nonsense, as shown below:




These word processing programs usually will not turn the smart quotes into “straight quotes”
when you save the file as “Text-Only.” Therefore, when you save the file, you have to open it



                                               8
back up as text-only and replace all of the smart quotes/apostrophes with straight
quotes/apostrophes.

In order to create a Web page, you can either learn HTML or buy one of the many programs
that will build Web pages for you (called “Web editors,” or “WYSIWYG (What You See Is What
You Get) editors”). Two popular WYSIWYG programs are Microsoft FrontPage and Macrome-
dia Dreamweaver. These programs are usually expensive and there is one major drawback:
you lose control over your pages. What you see may be what you get, but what you see may
not be what you want. If you do not understand HTML, you will not be able to make adjust-
ments to your Web pages when you are not happy with the result.

Another problem with WYSIWYG editors is that they sometimes write code that is wrong. They
also can rewrite or delete code that they don’t understand. This is because the editor usually
has a code “proofreading” function built into it that runs automatically. Sometimes, you don’t
even know that the code has been written wrong, or rewritten/deleted, until you look at your
page in a Web browser and discover that it is incorrect. Therefore, even if you get one of these
editors, you may still have to learn HTML to fix whatever goes wrong.

One last drawback to WYSIWYG programs is that HTML is a language that constantly changes
and evolves. This means that if you want your pages to work correctly, you will need buy new
software each time the standards change. If you learn how to write HTML well, you can often
write pages that look better and work better than pages made using WYSIWYG editors, and
you will not need to spend money on software and upgrades.


B.     Important Terms

Here are a few important terms that you’ll need to know and understand when you begin work-
ing with HTML:

Element:      Elements are basically all of the different types of things you can put into a
              document. For example, a paragraph, a header, a list, or a table.

Tag:          A tag is the HTML code which tells the Web browser what kind of element you’re
              using (so it knows how it’s supposed to look), and where it’s supposed to go.
              Tags are always enclosed by <angle brackets>. Most tags have a beginning and
              an end (though not all of them do). A beginning tag is just the tag enclosed by
              the brackets. It goes before any of the content of that section. The end tag is
              nearly the same as the beginning tag, except with a slash (/) after the left bracket.
              Here is an example:

                                  <blah>Here is my content!</blah>

              Notice that this example was written in Courier New font. All HTML code will be
              written in Courier New in this document.




                                                9
Attribute:    An attribute is a descriptor that you can place inside a tag to tell the browser a
              little bit more about what it’s supposed to do with the content which follows the
              "beginning" tag. For example, to center the content or align it to the left or right,
              you can sometimes specify this with an attribute. All attributes are defined in the
              “beginning” tag. Thus, there is only a “beginning” attribute; the attribute is ended
              when the tag that contains it is “ended.” This is how two attributes would be
              placed within the fictitious <blah> tags:

                    <blah attribute=“#1” attribute=“#2”>Here is my con-
                                        tent!</blah>

              Notice that there is one space between the tag and each of the attributes, and
              there are no “end” attributes in the “end” tag. The attribute ends when the tag
              that it describes ends. This is one reason why it is very important to remember to
              include the “end” tags, and to put them in the correct place. Many times, when a
              page does not look right it is because the “end” tags were omitted or were not
              placed in the right location. Also, remember that there should be no spaces
              within each attribute, but there should be a space between the tag and each at-
              tribute.

Pixel:        A pixel is a unit of measurement, just like an inch or a liter. Pixels are used by
              graphic designers and Web developers to describe how big an image is. The im-
              age on a computer screen (or from a printer) is made up of many dots arranged
              in rows. Because these dots sit right next to each other, they blend together to
              make a picture. If you get close to the screen and squint, you can probably see
              the dots. Different screens (and printers) can have different “resolutions,” that is,
              how many dots are placed per inch. This is an absolute, rigid value; it does not
              change based on what the image is supposed to show. Computer screens dis-
              play 72 dots per inch (dpi). Each “dot” is one pixel. Therefore, if you have an im-
              age which is 72 dots, or pixels, high, it will appear as one inch high on something
              with a resolution of 72 dpi. Just a note: in school, when you write measurements,
              you were probably taught to always specify the unit after the number. However,
              when we talk about dimensions on the Web, we only measure in pixels, therefore
              you do not need to include the units. In fact, you should never include the units in
              your HTML tags.

Source        Also called “code,” or just “source.” This refers to the HTML document that is
code:         used to make the Web pages. Looking at the source means looking at the actual
              HTML, as opposed to looking at how it is displayed in the browser.


C.       The Minimal Web Page

Every Web page requires four tags for the browser to know what to do. These are presented
below. Although current Web browsers do not require HTML to be case-sensitive, the most re-
cent HTML standards require all tags to be written using lower-case letters; therefore, it is good
practice to begin using all lower-case letters now, so that your pages will work correctly in the
future. It does not matter what font you use to write the code, or how you space the tags within
the page, but you will probably find that spacing out your tags makes it easier for you to read
and edit your code.



                                               10
Below are the four basic tags:

         <html> ...         These tags go at the very top and the very bottom of the
            </html>         entire Web page. This is how the browser knows which
                            language you’re using.

         <head> ...         The first thing that goes after the beginning <html>. The
            </head>         title is contained in the head. It may also contain other op-
                            tional elements.

         <title> ...        Contains the title of the Web page, exactly as it will appear
            </title>        by the browser. The title goes within the <head> tags.

         <body> ...         Contains the bulk of the content of the Web page. These
            </body>         tags begin right after the closing </head> tag.

A graphical representation of the above description is shown below. This graphic uses colored
boxes to show how some tags/elements are “contained” within others:




Therefore, you can see that <head> ... </head> and <body> ... </body> are on the
same “level,” and both are “contained” within <html> ... </html>. Furthermore, you see
that <title> ... </title> is further “contained” within <head> ... </head>. You
should always “see” how each tag you use is “contained” within another. In the beginning, you
may need to draw out a graphic similar to the one above in order to see this relationship.

The <title> ... </title> tag is very important but is often not given proper considera-
tion. Many people title their pages carelessly, and some people don’t title their pages at all.
However, the information in the title tag is used by the search engines to identify your page in a
results list. The information that you include in your title is what people will use to decide
whether or not to visit your page. Don’t make your title too long, or it will not fit in the space al-
lotted by the browser window. You should also be sure to give each page of your site a unique
title. This way, when people look back at their history, they will be able to tell one page from
another.




                                                 11
This is how the title appears in the browser window:




This page would appear as “Nora’s Web Abode” in a search engine.

Once you’ve placed the four basic tags on a page, you have the outline for an HTML document.
To save your new page, simply go to File → Save As. Choose a name for your file. You can
name your page anything you wish. The only restrictions are that you can only use letters and
numbers (lowercase or upper case) or a hyphen (-) or an underscore (_). You may not use any
spaces. You can get around this though by using the underscore (_) as a space. For example,
you might name your file “my_page.html” or something similar. All HTML documents must have
the extension “.html” at the end. Computers use file extensions to identify different types of files
and associate them with the proper programs. You may already be familiar with file extensions
like “.doc” or “.mp3.”

Without the extension “.html” your Web page will not work. You may also have seen Web
pages that use the extension ".htm," but this extension is outdated. When you save your HTML
file, remember to save the file as “Text-Only” or “Text-Only with Line Breaks.”


D.     More HTML Tags

Now that you have learned the four basic tags that are necessary to create an HTML document,
we’ll move on to some common the tags used to format the text contained within the <body>
... </body> tags of your HTML document.

HTML has the capability of creating “headings.” These headings are usually displayed in a lar-
ger, bolder font than normal text. You can specify six levels of headings, using the numbers 1-
6. Heading one has the biggest text; heading six has the smallest. The tag that is used to de-
fine a a heading is:

                                <hn>My great heading</hn>

Where n is some number, 1-6, of your choice.

The default location for the heading is aligned at the left border of the page. However, some-
times people like the headings to be centered or right justified. To do this, we specify an “at-
tribute” to the heading tag. As discussed earlier, an “attribute” allows us to further specify how
a tag/element is rendered. The attribute we use is the align attribute. We can “define” the
align attribute to align to the left, right, or center. You may notice that these alignments are
similar to the alignment choices in Microsoft Word and most other word processing programs.
To define the align attribute, place an equals sign (=) after the word align, then write
“left,” “right,” or “center,” in quotation marks, depending on how you wish the heading
to be formatted. There must be no spaces within the attribute. However, as mentioned above,



                                                12
there should be one space between the tag and the attribute. Here is how you would set head-
ing one aligned to the center:

                     <h1 align=“center”>My great heading</h1>

A heading usually precedes a block of text. To display running text in your Web page, you may
wish to use the paragraph tag, as shown below:

                            <p>My very short paragraph</p>

In a Web page, a paragraph is simply a block of all of the text between the "beginning" and
"end" of the paragraph tag, separated by one blank line from whatever appears above and be-
low it. The browser will not indent the first word of a paragraph. Also, using the <ENTER> key
to insert a blank line into your text does not mean anything to a Web browser. If you want the
Web browser to display blank lines in your document, you must use the paragraph tag (or the
line break tag, which you will learn about later).

Additionally, the browser cannot display more than one consecutive space between words or
sentences. For example, in this document there are two spaces after every period, with one
space between words. In HTML code, even though you may type more than one space after
the period, it will only show up as one space in a browser, even if you were to type a hundred
consecutive spaces. The <TAB> key is also not recognized in HTML.

When you are writing HTML code in your text editor, you may want to type the beginning <p>
tag, then press <ENTER> before starting your paragraph. Since this tag signals the browser to
write one blank line, having one (almost) blank line in your code can serve as a visual reminder
of what you are doing. This will not affect the way the browser displays the page in any way.

Just as with headings, the default alignment for paragraphs is set to the left border of the page.
However, you can once again use the align attribute to align your paragraph to the left, right,
or center as follows:

                           <p align=“right”>
                           I love to align my text!!</p>

After the “=” sign, you may write either “left,” “right,” or “center.” Remember that
there are no spaces between “align,” the equals sign, and “right,” and that the word
“right” is enclosed in quotation marks. However, there is one space between “p” and
“align.” If you have another attribute to include, you should also separate it from the other
terms with a space, but use no spaces within the attribute. Also, remember that the brackets
enclose the attribute, and that the attribute ends automatically with the “end” paragraph tag.




                                               13
Here’s a look at the code for a bare-bones Web page written in Windows Notepad, including
the tags just covered:




This is how the same page looks when displayed in IE 6.0:




You can also make bulleted and numbered lists using HTML. Both lists have a similar format.
Bulleted lists are called “unordered lists,” while numbered lists are called “ordered lists.” To
make a list, you need a tag before and after the list contents (like the other tags discussed ear-
lier), and tag for each thing listed (called a “list item”).

The code for an unordered list appears below:

                             <ul>
                             <li>Here is my first item</li>
                             <li>Here is the second item</li>
                             </ul>




                                                14
This is how the unordered list will be displayed by a Web browser:




The bullets will look like whatever the browser is programmed to make them look like. Though
you can easily change what the bullets look like in a program like Word, it is complex and be-
yond the scope of this manual to explain how to do so in HTML.

The code for an ordered list appears below:

                             <ol>
                             <li>Here is my first item<li>
                             <li>Here is the second item</li>
                             </ol>

This is how the ordered list will be displayed by a Web browser:




You can also make a list that shows a hierarchy of several listed items. In other words, you can
nest two or more lists to make a “sublist” within a listed item, or a “list within a list.” You can
make a nested list using only bulleted lists, only numbered lists, or a combination of bulleted
and numbered lists.




                                                15
Below is sample code for a nested list:

               <ul>
               <li>E-mail is a great way to stay in touch</li>
               <li>Steps for sending me e-mail: </li>
                   <ol>
                   <li>Turn on the computer</li>
                   <li>Find and open the e-mail program</li>
                   <li>Address the e-mail and write a message</li>
                   <li>Send the e-mail</li>
                   </ol>
               <li>E-mail can be sent at any time of day</li>
               <li>E-mail is sent and received immediately</li>
               </ul>

This is how the above list will be displayed by a Web browser:




Notice the difference between using an ordered (numbered) list and a unordered (bulleted) list.
In the above example, the steps for sending an e-mail are listed in an ordered list. This is be-
cause if you do not follow the steps in order, the e-mail will probably not be sent correctly. On
the other hand, the statements about the convenience of e-mail do not need to be in any par-
ticular order, so they are listed in an unordered list.

In addition, notice how the “nested” ordered list is indented further than the ordered list. Many
people represent this graphically by indenting the nested list in the source code as a reminder.
However, as stated above, whether you do this or not will have no effect the way the page is
displayed in the browser.

If you have trouble visualizing how the above code makes the nested lists, use the trick of lay-
ing out the tags’ relationships to one another using different colored boxes.




                                               16
Below is a graphical representation of how the nested lists fit into the hierarchy of the page:




Each successive "nesting" would be indented further than the previous one. The symbols used
for the bullets change with each successive “nesting.” Different browsers may use different
symbols. The symbols used by the browser to represent the bullets are generally not con-
trolled, and the size of the indentation cannot be set by the page designer. The numbers in a
ordered list will not change, regardless of how they are nested.

One of the biggest issues that Web designers deal with is finding ways to overcome the format-
ting limitations of the various browsers. The fact that browsers cannot display more than one
space between word or characters and lines of text can be a challenge when dealing with cer-
tain kinds of content; for example, if you wish to display computer code, a math equation, or a
poem that includes non-traditional spacing or non-standard characters on your Web page.

Therefore, there is an HTML element that allows you to make “preformatted text.” Basically,
this allows you to override the browser’s display rules. Any text contained within the preformat-
ted text tag will be displayed exactly as it was typed, including any spacing, tab indents, and line
breaks from pressing <ENTER>. However, the text will be displayed in a fixed-width font (often
Courier, although this can usually be set by the user). Below is an example of preformatted
text:




                                                17
           <pre>
           This is how preformatted text looks:

                   See, I can indent, make extra line breaks, and

           make       many    spaces      between my                       words!
           The font for all of this text is Courier.
           </pre>

The <pre> ... </pre> tags are used to make preformatted text. You should note that
whenever preformatted text is used, the browser inserts an empty line between it and whatever
precedes it. Here is the how the above code will look in a browser:




Notice that there is an empty line between the word “and” and the next line, just as there was in
the source. This is because <ENTER> was pressed twice after that word. This is rendered ac-
curately by the browser because it is preformatted text. The browser would have displayed the
words all on one line if this were not preformatted text. As you can see, this is a useful tag for
displaying content in which spacing is important.

People sometimes avoid using this element because the fixed-width fonts are not considered to
be attractive. Also, if preformatted text and “regular” text are both used within the same docu-
ment, the fonts will not match. Unfortunately, for some things, there is no other choice but to
use preformatted text if you want your content to be read correctly.

One alternative that you can use to control line breaks is the <br> tag. This tag will add
“forced” line breaks. The effect of this tag is like what happens when you press <ENTER>.
The characters will be displayed on the next line, with no white space between the two lines of
text. The <br> tag differs from the <p> tag because the <p> tag inserts exactly one line of
white space between the two lines.

The <br> tag is one of those tags which does not have a separate beginning and end tag. You
simply place the tag wherever you would like a line break. For example, this is how to write the
address for the Center for Young Women’s Health at Children’s Hospital Boston:




                                               18
                    <p>
                    The Center for Young Women’s Health<br>
                    Children’s Hospital Boston<br>
                    300 Longwood Ave.<br>
                    Boston, MA 02115
                    </p>

Many people place a carriage return after using the <br> tag as a graphical reminder that there
is a line break. However, as you know, this is not necessary and will not affect how the browser
displays the content. Also, notice that there is no <br> tag after the last line of the address.
This is because you have reached the end of the paragraph, as indicated by the </p> tag.
Therefore, no extra line breaks are needed. This is how the above will be displayed:




One other important difference between the <p> tag and the <br> tag is that you cannot suc-
cessfully add extra lines by using several <p> tags in succession. However, you can use as
many <br> tags as you like in succession to create extra lines. Therefore:

                          <p>
                          I love to use line breaks!<br>
                          <br>
                          <br>
                          <br>
                          Hooray!
                          </p>

will be displayed as:




                                              19
Notice that there are three lines of blank space between the text, though there are four <br>
tags used. This is because the first simply tells the browser to go to the next line. The others
also do the same thing but they also leave one blank line each because there is no text for
those lines. This is why some people place the first <br> on the same line as the text it follows,
then the successive line breaks on their own lines, to represent this effect graphically.

There are reasons that people use the <p> tag, even though the <br> tag is so much more
versatile. One reason is simply that most of us were taught to make paragraphs by using the
<p> tag. This tag is usually fine for most things. Theoretically, you can use the <br> tag in-
stead, and your page should work. One very good reason for using the <p> tag is that this tag
can be assigned attributes for aligning the text, as discussed earlier. These can be very handy.
Though we cannot use the align attribute with the <br> tag, this tag does have its own attrib-
ute. This attribute is clear. It is written similarly to the align attribute discussed earlier. For
example:
                                     <br clear=“blah”>

Remember that there is no closing tag for the <br> tag. Following are the ways to define the
clear attribute:

    clear=“left”           This will cause the next line to start just after anything preced-
                           ing the tag on the left side of the screen. For example, if
                           there is an image that is on the left side of the screen, the
                           new line will start just below this image.

    clear=“right”          Similar to the attribute described above, this will cause the
                           next line to start just after anything preceding the tag on the
                           right side of the screen. For example, if there is an image on
                           the right side of the screen, the new line will start just below
                           this image.

    clear=“all”            This causes the next line to start just below anything at all
                           preceding the tag, regardless of its location.

The clear attribute can be especially useful when using images in a page. Suppose you
have two images on your page, with one on the left of the page, and one on the right. In this
example, suppose that the image on the right extends farther down the page than the one on
the left. Suppose that you want some text to appear directly below the image on the left. To do


                                                20
this, you would use clear=“left” (because the image is on the left side of the screen) di-
rectly before the code for the text. If you did not do this, the words would be displayed next to
the image. Also, as seen in the first picture below, sometimes when images and text are used
together, the image will actually be displayed on top of the text, preventing the user from being
able to read the text. This can be remedied by using the <br> tag and the above attributes.

      Here is the page without using the            Here is the page using clear=“left”:
      clear attribute:




Remember that one of the original intentions of the Web was to distribute papers. Sometimes,
when you are writing a paper, you might wish to use a long quotation from another source.
Normally, it is proper to offset these quotations from the rest of the paragraph by starting the
quotation on a new line, and indenting it in from the margins of the rest of the paper. This is
called a “blockquote.” We can also do this in HTML. The tag for doing this is very easy to re-
member, it’s <blockquote> ... </blockquote>.

Here is the source for making a blockquote:

     <p>
     Endometriosis is an enigmatic disorder which is often over-
     looked by health care providers. Diagnosing endometriosis can
     be difficult.     According to the Center for Young Women’s
     Health:</p>
     <blockquote>
     <p>
     The ONLY way to be 100% certain [in diagnosing endometriosis]
     is to have a procedure called a laparoscopy. A laparoscopy al-
     lows your doctor to look inside your belly at your pelvic or-
     gans with a special lens to identify the endometriosis
     (implants).   Other tests that MAY be ordered by your health
     care provider BEFORE a laparoscopy include blood tests, cul-
     tures to check for infection, ultrasound or an MRI (to make
     sure it’s not something else) (13).
     </p>
     </blockquote>

This is how the above looks in Internet Explorer:




                                               21
You may remember this example from the discussion in the beginning about the errors that can
occur when using word processing programs to write HTML, specifically, due to the use of
“smart quotes/apostrophes” by these programs. Notice that the apostrophes were corrected in
the above example, and display correctly (not as the Õ symbol). Also, notice that at the end of
the quote, there is the number “13” in parentheses. This is often the method used on the Web
for referencing, instead of using superscripts.

Also, notice that the paragraph tags occur inside the blockquote. You may place one or more
paragraphs within the <blockquote> tags, and they will all be indented from both margins.
Finally, the quote is indented by the same amount regardless of the size of the browser window.

Another common HTML element is the horizontal line. These are most often used as section
breaks. The tag for the horizontal line is very easy. It is <hr>, which stands for “horizontal
rule.” Like the <br> tag, there is no end tag. The line will be displayed on its own line, aligned
to the center, extending across the entire page, by default. Thus,

                                              <hr>
will be displayed as:




You can change the thickness of the line, as well as how far it extends across the page, by us-
ing the following attributes:



                                               22
     size=“n”        This attribute adjusts the thickness of the line, in pixels (pixels
                     were discussed in the beginning glossary).

     width=“n”       This attribute adjusts how far the line extends across the page.
                     This can be expressed either as an absolute, that is, an exact
                     number of pixels, or as a percentage of the browser window.

Following are examples of three different ways to define a horizontal rule:

                                <hr>
                                <hr size=“2” width=“100”>
                                <hr size=“10” width=“40%”>




For horizontal rules, the size attribute is the height of the rule, and width attribute is the
length across the page. In the above example, the width attribute is defined in two different
ways: as an “absolute” value and as a “relative” value. The horizontal rule with the
width=“100” shows an absolute value. This means that the rule will always have a width of
exactly 100 pixels across the page, regardless of the size of the browser window or computer
screen. Conversely, the horizontal rule with the width=“40%” shows a relative value. This
means that it will always be 40% of the size of the browser window, no matter how big or small
the window gets.

E.     Basic Font Tricks

Formatting text is another way that web designers control the look of a page. The most basic
text formatting is to use bold, italics, or underline to make certain words stand out. In HTML,
there are two ways to achieve these text effects: “logical” formatting and “physical” formatting.

In “physical” formatting, the tag tells the browser how to display the enclosed text. For exam-
ple, if you want something to be displayed as bold, you would use the <b> ... </b> tag.

In “logical” formatting, the tag describes how the enclosed text is meant to come across, but the
browser decides exactly how to display the effect. For example, you might wish to make some-
thing stand out “strongly” from the rest of the paragraph. You could then use the <strong>
... <strong> tag. In most browsers, this tag will make the text bold. However, this “strong”
effect might look somewhat different from one browser to the next. This is something to con-
sider when using logical styles rather than physical styles. Logical tags can look different in
each different browser, and the display properties of logical tags can even be set by the individ-



                                               23
ual user. Some browsers may not understand some of the logical tags, and will display any
text between the "beginning" and "end" tags as plain text. Therefore, you lose some control
over the display of your pages if you decide to use logical styles.

Below is a chart showing some of the most common physical styles along with their logical
equivalents and the effects they produce:

Usual Effect             Physical Style:                        Logical Style:
Produced:

bold            <b> ... </b>                       <strong> ...       for “strong”
                                                      </strong>       emphasis.


italics         <i> ... </i>                       <em> ...           for “emphasis”
                                                      </em>

                                                   <dfn> ...          for a word to be
                                                      </dfn>          “defined”. Many
                                                                      browsers do not
                                                                      understand this tag.

                                                   <cite> ...         for “citations”
                                                      </cite>

                                                   <var> ...          for showing a
                                                      </var>          “variable” which can
                                                                      be customized.

underline*      <u> ... </u>


fixed-width     <tt> ... </tt>       for           <code> ...         for computer “code”
font                                 “type-           </code>
                                     writer
                                     text”

                                                   <kbd> ...          for “keyboard” entry
                                                      </kbd>          (usually from the
                                                                      user)

                                                   <samp> ...         “sample,” used to
                                                      </samp>         show what some-
                                                                      thing, like an error
                                                                      box, for example,
                                                                      says.

*The <u> ... </u> tag is no longer recommended for use. Instead, the recommended for-
mat is: <span style=“text-decoration: underline”> . . . </span>. The
explanation of this syntax is beyond the scope of this manual.


                                            24
Another way to format text is to change its size. Earlier, when we used headings, we saw that
the level of the heading changed the size of the heading’s font. However, a heading is always
displayed on its own line. Therefore, if we wanted to change the font size of one word within a
line of text, we could not use the <hn> tag to do it. However, we can use the <font> ...
</font> tag and the size attribute to control the size of the font. This is how it is used:

                            <font size=“(+/-)n”>word</font>

where n is the level of the size of the font. Fonts can be sized anywhere from size=“–6” (the
smallest) to size=“+6” (the largest). The default size would be size=“0,” but this is never
written; to use the default size, you simply do not include the size attribute in the <font> tag.
Using this method, the absolute size of the font (i.e., 12pt font or 14pt font) cannot be con-
trolled; the font size is only expressed as a relative value and is dependent on the browser and
the user’s settings. For example, if the user’s default font size is 14 pt. (most people set it at 12
pt.) and if you make size=“+2,” the words will display as two “levels” bigger than 14 pt.

Alternatively, you may specify the size directly using a value ranging from 1 to 7, with 3 as the
default size. However, this is more difficult because HTML font sizes are different from what
you're used to. For example, size=“2” means the words will display in size 12 pt. There are
other attributes for the <font> tag which will be discussed later.

It is important to note that in the most recent version of HTML, the <font> tag is deprecated.
This means that it is not recommended for use under the newest HTML standards. However,
the replacement for the <font> tag involves using Cascading Style Sheets (CSS) and/or the
new style attribute, both of which are beyond the scope of this manual. Currently, the
<font> tag is still supported by Web browsers, but it may not be in the future. Therefore, al-
though the <font> tag still works right now, once you master the basic concepts in this man-
ual, you may want to learn CSS for your future projects.

A good reference for learning how to use CSS can be found at http://www.w3schools.com,
sponsored by the World Wide Web Consortium. The World Wide Web Consortium (called the
W3C) is the organization that maintains and updates the standards for HTML.

F.     Special Characters

We discussed earlier that special letters, like ñ, or é, cannot by understood by HTML. However,
there is a way to “program” HTML to be able to display these special characters. These are
called “character entities.” All character entities start with an ampersand (&) end with a semi-
colon (;). In between is a string of letters that indicates to the browser which special character
to display. Below is a list of some of the most common character entities:

                  Escape sequence       Hint to Remember              Result
                  &lt;                  less than                     <
                  &gt;                  greater than                  >
                  &amp;                 ampersand                     &
                  &nbsp;                non-(line)breaking space      <space>



                                                 25
                  &eacute;             e with an acute accent         é
                  &Egrave;             E with a grave accent          È
                  &uuml;               u with an umlaut               ü
                  &ntilde;             n with a tilde                 ñ

Of these, the character entity &nbsp; is especially useful in HTML. It represents a single blank
space within a line. Remember that no matter how many consecutive spaces you put in your
HTML code, the browser will only read one. You can now use the use the &nbsp; character
entity to insert as many blank spaces as you want to within your text. One common use for
&nbsp; is to place several in a row to create an indented paragraph.

It is important to note that these characters are case sensitive. This can be seen easily by
comparing the example of the escape sequence used to produce the È with all of the other es-
cape sequences shown. In that sequence, we can see that the reason that a capital E is dis-
played is because the “E” is capitalized in the character entity. If the character entity were not
case sensitive, capitalizing the “E” would have no effect, and we would need some other way to
specify that we want the “E” to be capitalized.


G.     Creating Links

Links are the main power behind the Web. Usually, the browser will display a link as a different
color from the rest of the text, and underlined, like so:




There are lots of things that can be linked to in a page. You can link to another page, an im-
age, a sound, a movie, or a program. You can link to something on the same server as your
page, to a page anywhere else on the Web, or even to another part of the same page. Linking
is done by using the “anchor” tags <a> ... </a>.

To use the anchor tags to link, we would insert the following code:

        <a href="http://www.anydomain.com/some_file.xxx">a link</a>


                                               26
This would make the words “a link” display in the look used for links (the default look for a link is
blue and underlined). The user would click on the words “a link” in order to go to the address
"http://www.anydomain.com/some_file.xxx." It is very important that you write the
address exactly as it appears in the filename. Filenames are case sensitive on the Web.
Therefore, the filename:

    http://www.anydomain.com/some_File.xxx (with a capital “F” in the word “file”)

would take you to a different page than:

           http://www.anydomain.com/some_file.xxx (with a lowercase “f”).

Be sure that there are no spaces in the address, and that things like underscores are not over-
looked; if you type the address incorrectly, the link will not work. Also, it is important to remem-
ber to use quotes around the file name, and to always put the extensions on the end. Many
Macintosh users forget to do this, because Macintosh files normally do not have extensions.
With Windows 95 and later, many Windows users are also getting used to not having to work
with extensions.

You may insert any words and as many words as you like between the <a> ... </a> tags.
Usually, it helps to be somewhat descriptive (i.e., “Click here to visit my list of favorite movies”)
so that people know where the link is supposed to take them.

There are two different ways to make a link. You can use an “absolute pathname” or a “relative
pathname.” To make these concepts clear, we will be using files taken from a fictional Web
server called “www.net.com.”

Absolute pathnames use the complete web address. Anyone anywhere on the Web can link to
the file “some_file.xxx” on the www.net.com server by using the absolute pathname. The abso-
lute pathname looks like this:

            <a href="http://www.net.com/some_file.xxx">a link</a>

However, if the Web site you are linking to happens to be on the same server (www.net.com in
this example) as your page then you can use the “relative pathname.” The relative pathname
for the file “some_file.xxx” would look like this:

                          <a href="some_file.xxx">a link</a>

Most people like to use relative pathnames when building a Web site because it is saves time
and it also connects to the server more efficiently. However, you must be careful when using
this method if there are several subdirectories on the server, because the pathname is “relative”
to the page you are writing, in whatever directory it is.

Following is a graphical representation of all of the subdirectories on the fictional www.net.com
server:




                                                 27
In this example, the main directory is www.net.com. The directories “web_pages” and “web im-
ages” are subdirectories of the main directory. The directory “cool_pages” is a subdirectory of
“web_pages” and the directory “random_files” is a subdirectory of “cool_pages.”

It is always a good idea to keep a copy of all of the files on your server on your hard drive as
well. The fictional Webmaster at www.net.com keeps these files saved to her C: drive in a
folder called “Web.” Therefore, if we wanted to make a hierarchy of the files from the
www.net.com server on her hard drive, the hierarchy would look exactly the same as the above
diagram, except that the main directory would be “Web” instead of “www.net.com.”

As indicated by the red arrow, “some_file.xxx” can be found in the “random_files” directory,
which is a subdirectory of the “cool_pages” directory, which is a subdirectory of the
“web_pages” directory, which is a subdirectory of the “Web” directory. Therefore, if you wanted
to write out the absolute path to “some_file.xxx” on the hard drive, it would look like this:

            C:\Web\web_pages\cool_pages\random_files\some_file.xxx

Notice the direction of the slashes. A slash in this direction is called a “backslash.”

If you wanted to write out the absolute path to “some_file.xxx” on the www.net.com server, it
would look similar:

   http://www.net.com/web_pages/cool_pages/random_files/some_file.xxx

Notice that in this path the slashes are now in the opposite direction than the path on the hard
drive. A slash in this direction is called a “forward slash.”

Now that you understand where the path of a file comes from, you will be able to understand
how to use relative pathnames. For example, to create a relative link from the page “in-
dex.html” (found in the “web_pages” directory) to the page “page.html” (also found in the
“web_pages” directory), you would write:

                                    <a href="page.html">


                                                 28
Because both “index.html” and “page.html” are in the same directory, you do not need to in-
clude any additional path information. However, to use a relative pathname to link the page
“page.html” (found in the “web_pages” directory) to “some_file.xxx” (found in the “random_files”
directory), you need to write:

                <a href="cool_pages/random_files/some_file.xxx">

The reason for this is because to get from “page.html” to “some_file.xxx” you must go deeper
into the file heriarchy. That is, you need to tell “page.html” how to get from the “web_pages”
directory to the subdirectory that contains “some_file.xxx.” The slashes take you "forward," or
deeper and deeper into the levels of subdirectories.

To go “backward” (that is, to link to the page “page.html” in the “web_pages” directory from
“some_file.xxx” found in the “random_files” directory, you would also a relative pathname that
looks like this:

                               <a href="../../page.html">

Each “../” tells the browser to go back one directory.

Trying to remember all of these directories can be difficult, especially if you are working with a
large site. The biggest problems can come when adding or deleting levels of directories within
a site. For example, if you decided to put everything in the “web_pages” directory into a new
directory called “stuff,” you would have to fix many relative links. You would have to make
some changes anyway, even if you used absolute links, because the address has still changed
(i.e., from “http://www.net.com/web_pages/page.html” to “http://www.net.com/stuff/page.html”),
regardless of whether you use absolute or relative links. However, if you use absolute path-
names, you would only have to change the pages that link to all of the files within the
“web_pages” directory. If you use relative pathnames, you have to change every page which
links to any file in the “web_pages” directory as well as all of the pages in the “web_pages” di-
rectory that link to a page not in that directory.

Despite these inconveniences, most people still prefer to use relative pathnames. Most com-
mercial Web editors will actually correct the links for you if you move files, which eliminates this
problem. Just to mention again, if the page is not on the same server as the page you are writ-
ing, you always have to use absolute pathnames.

With links, not only can you jump from one page to the next, but you can also jump from one
part of the page to another. This is done somewhat differently than what you’ve seen above.
Let’s say you’re editing an information sheet about osteoporosis, called “calciuminfo.html”. At
the bottom of the page is a list of the amount of calcium in some popular foods. You feel that
you would like people who visit the information sheet to be able to jump directly from the top of
the page to the list at the bottom. You decide that the section you wish to jump to will begin
with the sentence “Now that you’ve ‘boned up’ on calcium knowledge, it’s time for a snack.” If
you wanted to, you could have chosen anywhere else on the page. Remember that the
browser cannot read English, so you can’t just tell it to go to that sentence. Instead, you must
create a “name” for that section, and tell the browser where the section with that name starts.
Let’s call the section “calcium_foods”. To “name” the section, you would use another function
of the anchor tag, as follows:



                                                29
            <a name="calcium_foods">now that you’ve "boned up"</a>

When you link to this section, the browser will jump down and the words “Now that you’ve
‘boned up’” will be at the top of the screen.

Now you will create a link to jump to the named section. At the top of the information sheet,
you decide to write the words “High-calcium foods” and make it link to the section named “cal-
cium_foods,” as shown below:

                 <a href="#calcium_foods">high-calcium foods</a>

Notice the hash mark (the number sign) which precedes the words “calcium_foods.” This tells
the browser to jump to the section that has this “name.” Also, notice that there is no “.html” ex-
tension after the words. You must make sure that the link address exactly matches the name
assigned to the section. It is very important that the address is written this way, or the link will
not work.

You can also use this method to link to a specific section of any page, not just within the same
page. For example, if you were writing a page called “nutrition.html” in the same directory as
“calciuminfo.html” you could make a link to the list of high-calcium foods using the following tag:

     <a href="calciuminfo.html#calcium_foods">High-calcium foods</a>

Notice that this link looks almost the same as in the previous example, but now you must also
include the page name and the section name, shown here by using the page’s relative path-
name followed by the section name. You can also use this same method to get to a section on
a page outside of your server, as long as the owner of that page has the sections set up al-
ready. Remember that you can’t change the code of someone else’s page, so if they do not
have sections set up, you can’t create them yourself.

Another important way that links are used on the Web is to link to an e-mail address. Creating
an e-mail link is similar to create a link to a Web site. However, instead of writing an http:// ad-
dress, you will write “mailto:” followed by the e-mail address. For example, this is how to make
a link to the e-mail address for the Center for Young Women’s Health at Children’s Hospital
Boston:

             <a href="mailto:cywh@tch.harvard.edu">e-mail us!</a>

This works just like a Web link except that instead of opening a new Web page, clicking on the
words “e-mail us!” will open the user’s e-mail program and the address “cywh@tch.harvard.edu”
will be pre-written in the user’s “To:” field. Notice that there are no slashes after the colon in the
“mailto:” sequence. Also notice that there are no spaces in the entire address. You may want
to use the address as the “linked” words (in the example above, the "linked" words were "e-mail
us!"), so that the user can view the address (to write down on paper, for example) without hav-
ing to click on the link.


H.     Adding Images

Images are often an important part of Web pages. There are many formats for saving images,
and each format has its own unique extension. The two formats most commonly used on the


                                                 30
Web are “GIFs” and “JPEGs.” The extension for a GIF is “.gif,” and the extension for a JPG is
either “.jpg” or “.jpeg.” The browser does not care which of the JPEG extensions is used. One
note: sometimes, the file extensions will be capitalized. It is important to note whether your file-
names are capitalized because the image address is case sensitive in HTML, just like the ad-
dress for a link.

In general, GIFs are used for logos or icons, and JPEGs are used for photos. Although JPEGs
are very widely supported, GIFs are the only universally supported image file format. This
means that every single graphical browser can display GIFs.

The tag we use to insert and control images is the <img> tag. There is no ending tag for the
<img> tag. There are several attributes that go along with this tag, but only the three most im-
portant will be discussed in this section.

The first attribute is the src attribute. This is the most important attribute when working with
image files because it tells the browser where to find the image. Therefore, without the src
attribute, the <img> tag is worthless.

Following is an example of how we would link to an image called “image.gif,” located in the
same directory as the page we are writing:

                                   <img src="image.gif">

The image will be displayed exactly where you write the tag. If the tag is between two words,
the image will appear between those words. Also, you may place the image within the <a>
tags, instead of or in addition to words, so that the image can serve as a link. This is how “but-
tons” are made.

The alt attribute is a required attribute in the latest HTML specifications, and although
browsers are not yet enforcing it, it is a good idea to begin using it so that your pages will work
properly in the future. This attribute is used to provide an “alternate text” description of the
graphic image. This is useful for people who use text-based browsers or who have disabled
automatic image-loading to speed up their Web surfing. It is also useful in case a graphical
browser does not load the image properly. When a server goes down or an image is unavail-
able for some other reason, a “broken image” icon will be displayed and the alternate text will
be displayed beside it.

The alt attribute is used like this:

             <img src=“star_picture.gif” alt=“[picture of star]”>

In this example, in a text-based browser or if the image did not load, the words “[picture of star]”
would appear on the page in place of the graphic named “star_picture.gif.” Notice the square
brackets around the words “picture of star” in the example above. These brackets are not re-
quired, but they are helpful to people using text-based browsers because they set the words
apart from the regular text on the page.

The following shows how the above example would be displayed in Internet Explorer if the im-
age were unavailable:




                                                31
One other note: the alt attribute will display whatever text you have included between the quo-
tation marks exactly as it is written, much like when using the <pre> tag. However, unlike pre-
formatted text, pressing <ENTER> will not appear as line breaks. Also, no HTML tags can go
within the alt attribute. If you try to use HTML tags, they will be displayed as is instead of as
translated code. This means alt="[<u>hi</u>]" would be displayed as "[<u>hi</u>]"
rather than as "[hi]."

The third important attribute when working with images is the align attribute, which you should
now be familiar with. The align attribute will align your new image with respect to the rest of
the page, and with the text beside it. Following are the various ways to format the align at-
tribute:

       align=“bottom”         This is the default alignment for the <img> tag. This will cause
                              the text in the same paragraph to be placed next to the image,
                              such that the first line is even with the bottom of the image. All
                              subsequent lines of text appear below the image.

       align=“top”            This will cause the text in the same paragraph to be placed next
                              to the image, such that the first line is even with the top of the
                              image. All subsequent lines of text appear below the image.

       align=“center”         This will cause the text in the same paragraph to be placed next
                              to the image, such that the first line of text starts near the center.
                              All subsequent lines of text appear below the image.

       align=“left”           This will cause the image to be placed on the far left margin of
                              the screen. The words will be placed similarly to align=“top”
                              but instead of only the first line appearing beside the image, the
                              lines of text continue appearing next to the image. This creates a
                              paragraph of text to the right (and below, if long enough) of the
                              image.

       align=“right”          This will cause the image to be placed on the far right margin of
                              the screen. The words will be placed as in align=“left,” ex-
                              cept that they will appear to the left of the image rather than to
                              the right.



                                               32
The next example shows an image that has been aligned using each of the different alignment
choices (each image has been placed in its own paragraph to make it easier to see the attrib-
ute’s effect):




Now that you understand how to use the src, alt, and align attributes with the <img> tag,
here is a template for using them all together:

     <img src="image.xxx" align=“alignment” alt=“[alternate text]”>

The placement of spaces in the above example should be noted. There is one space between
“img” and “src,” with no spaces in the src attribute, then a space before the align attribute
with no spaces within the align attribute, and then a space before the alt attribute with no
spaces within the alt attribute. This syntax should always be used for tags where more than
one attribute is assigned.


I.     Formatting Graphics

Now that you are comfortable with the three most important attributes that are used with the
<img> tag, we will discuss some other attributes that offer more advanced formatting options


                                             33
when working with images. Below is a list of several other helpful attributes associated with the
<img> tag:

        height=“n”       This attribute allows you to specify the height of the image,
                         with n being the size in pixels. You can specify the actual
                         height of the image, or you can change the number of pixels
                         in order to scale the image (make it bigger or smaller). You
                         can also scale the entire image by expressing the height as a
                         percentage of the screen (as we saw with relative sizing of
                         horizontal rules).

        width=“n”        This attribute allows you to specify the width of the image,
                         with n being the size in pixels. You can specify the actual
                         width of the image, or you can change the number of pixels
                         in order to scale the image (make it bigger or smaller). You
                         can also scale the entire image by expressing the width as a
                         percentage of the screen (as we saw with relative sizing of
                         horizontal rules).

        border=“n”       This attribute will cause a border to be drawn around the pe-
                         rimeter of the image, where n is the thickness of the border
                         expressed in pixels. If a border is not specified, no border
                         will appear around the image. However, if the image is used
                         as a link (such as a button), the default is to have a border of
                         one pixel around the image. In that case, you will need to
                         use the border attribute if you wish to override this default.

        hspace=“n”       This attribute allows you to specify how much horizontal
                         white space (both above and below the image) you would
                         like as a buffer between the image and the surrounding con-
                         tent, with n expressed in pixels. You cannot specify a differ-
                         ent amount of white space for the top than the bottom.

        vspace=“n”       This attribute allows you to specify how much vertical white
                         space (both to the left and to the right of the image) you
                         would like as a buffer between the image and the surround-
                         ing content, with n expressed in pixels. You cannot specify a
                         different amount of white space for the right than the left.

None of these attributes are required or necessary, but the height and width attributes are
highly recommended because they speed up the rendering of your pages. This is because
browsers usually load text first, then go back and load the images. The browser will leave a
blank box as a placeholder for the image (showing the alternate text, if there is any) while the
page is loading. Then, once the image is loaded, this area will be resized based on the correct
size of the image. This causes the rest of the content on the page to jump around and slows
down the page load time. This can be avoided if you tell the browser how big the image is
ahead of time.

In order to find the height and width of the image, you can either open the image in a graphic
editor (like Adobe Photoshop™) or you can open it in the browser (in Netscape: File → Open



                                               34
Page, click on "choose file"; in Internet Explorer: File → Open, click on "Browse"). In the image
editor, you may have to search for the area where the dimensions are given (in Photoshop, it’s
in Image → Image Size (but don’t change any of the values, unless you want to resize the im-
age!)). If you view the image in a browser, the dimensions of the graphic will often be displayed
in the area where the title is usually displayed. Often, the dimensions are simply given as nn ×
nn, without specifying which is the height and which is the width. The width is normally the first
number.

Though it is also possible to resize images by using the height and width attributes, there
are several drawbacks to using this method. One is that the image is often distorted when the
browser resizes it. Image editing programs usually retain much better picture quality when re-
sizing images. Also, if you shrink an image using the height and width attributes, it will look
smaller, but the file itself will still big, so it will still take just as long to load on the page. It
makes much more sense to resize the file using your image editor. Not only will the image look
better overall when resized in an image editor, but the file size will then correspond with the im-
age size. This is an especially good idea when you are shrinking an image, because if the file
size gets smaller, the image will load more quickly.

You should not think of using graphics as just a way to display “pictures.” On the Web, you can
use images for many things. Some ways in which graphics become very useful are as page
titles or headings. By using graphics for this purpose, you are able to use any font you want,
with any color you want, and you can add special effects that would be difficult or impossible
using HTML alone.

For example, though you can change the fonts in an HTML document, the user must have that
font installed on his or her computer to be able to view the document using the specified font. If
the user does not have the specified font, the browser will display another font instead. This
becomes a problem when you really want to use a non-standard font. For example, say you
need to display a company logo that uses a specially designed font. You can solve this prob-
lem simply by creating the word using the special font in your graphic editor, saving it, then in-
serting it into your Web page, using the same methods as with any other image. Of course,
you should always write the full text of the graphic in the alt attribute for essential graphics like
titles or logos. Also, you should try to keep the title and logo graphics to a small size so that
they load quickly.

As we discussed earlier, the general rule for using graphics on the Web is to use GIFs for
things like logos or titles and JPEGs for things like photos. However, there are some instances
where you must use the GIF format, due to some special properties that are exclusive to GIFs.

One very useful special property of GIFs is the ability to create “transparent” images. Because
GIFs are the only format that allows for transparency, these are usually called “transparent
GIFs.” A transparent image is created by telling the computer that one color (and only one) is
supposed to be “invisible.” The invisible color will allow the background to show through. In
this way, you can make an image look as if it’s irregularly shaped. This is useful when making
titles, and also because it allows you to vary the shape of the images on your page instead of
having only square or rectangular graphics. However, if you put a border around a transparent
image, the border will still be in a rectangle, because the actual image file is a rectangle. It only
looks as if the image is irregularly shaped because part of it is invisible. You have the option of
removing the border, by setting the border attribute to border=“0.”




                                                  35
                Image without transparency:         Image with transparency:




The other special property of GIFs is the ability to create animated graphics. There are a num-
ber of programs that you can use to create animated GIFs (two examples are Macromedia
Fireworks and Adobe ImageReady). If you choose to create and use animated GIFs, you
should use good judgement in deciding when and where to use them. Too many animated
GIFs will result in a page that is too busy and distracting to your visitors. They can also make
your pages very slow to load.


J.     Colors on the Web

There are 16.7 million colors that computers are theoretically able to use. However, in reality,
computers often only display 256 colors. Even though many people have screens that can dis-
play higher bit depths, they often manually set the screen so that it will only display 256 colors
because many games require this. For this reason, and because it takes more memory to dis-
play more colors (especially at higher screen resolutions), Web designers use far fewer colors
than the maximum 16.7 million.

The list of available colors is even smaller than 256, since there are 40 colors of the 256 that
are not the same for both Macs and PCs. Therefore, Netscape came up with a palette that en-
compasses the 216 colors that Macs and PCs have in common. This group of colors is called
by a few names: the Web Palette, the Web-Safe Palette, the Netscape Palette, the Browser-
Safe Palette, or the Netscape “color cube.” The reason this palette is called a color “cube” is
because you can graphically represent all of the colors in the palette as blocks which you can
combine into a cube.

There are several ways that graphic designers can define colors. One color system, used in
printing, is called the CMYK system. Printers use CMYK because in printing there are three
rolls of colored ink (Cyan, Magenta, and Yellow) and a fourth roll of blacK ink.

Another way is by using the RGB color system. This system allows you to “mix” different levels
of red, green, and blue to create different colors. In the Web-Safe Palette, there are six shades
of each of these three colors that you can use.

There are two different ways to define RGB color values when using a PC: decimal values and
hexadecimal values (there is also a percentage system used by some Macintosh programs).
To define colors in the RGB system, we set the levels of red, green, and blue light separately.
Each color has its own unique “channel” that is independent of the others. There are 256 “lev-
els” of color for each channel, although only 6 of these 256 shades are available in the Web-
Safe Palette.


                                               36
In the decimal system, values for each color channel range from 0 to 255, with “0” being no
color added from the channel, and “255” being all color added from the channel. The browser
safe colors are found at multiples of 51. An example of a color’s decimal RGB value would be
255, 0, 0. This is the decimal value for pure red. This is because 255 is the red value (mean-
ing all color added), and 0 is the value for both green and blue (meaning no color added).
When writing the values for a color, the numbers are always listed in “RGB” order. That is, the
level of red first, followed by the level of green, followed by the level of blue.

Hexadecimal values are the way colors are expressed in HTML. Hexadecimal values are ex-
pressed in strings of 6 numbers preceded by a hash mark (#). The value for each channel is
expressed in a pair of numbers with values ranging from 0 to f (where “0” is no color and “f” is
full color and “a” is the value after “9”). As with decimal values, the pairs are written in RGB or-
der, with the first pair of numbers representing the red channel, the second pair representing
the green channel, etc. Therefore, the hexadecimal value for pure red would be written as
“#ff0000.”A slightly different color red would be “#cd0000” (however, this would not be a
browser safe color). The browser safe colors are the pairs 00, 33, 66, 99, cc, and ff.

If you combine the pure form of each of the three colors (represented as 255, 255, 255 in deci-
mal value or “#ffffff” in hexadecimal value), you will create white. Shades of gray are cre-
ated when all of the values are the same. For example, “#cccccc” is a light shade of gray.

If you use a color outside of the 216 browser safe colors, it may render strangely, depending on
the browser. If a display that is capable of displaying the color is used, then the color will be
displayed properly. However, if an 8-bit display is used, the browser will change the color. Un-
fortunately, there are different things that the browser may do to change the color. One of the
most common things that it will do is “dither” the color. This is most often done by placing dif-
ferent combinations of Web-safe colors next to each other, in the hope that they will blend to-
gether to make it resemble the original color. However, this usually doesn’t work well. In
graphics where there are large blocks of one solid color, like in a background or logo, the
graphic will look “spotted,” as in the example that follows:

              Image without dithering:            Dithered image:




Many graphic editors include a palette of Web-safe colors, in which case, you can simply click
on a color and use it without plugging in numbers!


K.     Formatting Page Backgrounds and Font Colors

Up to now, we have been allowing the computer to pick its own colors (except for graphics).
When the colors are not specified, the browser will generally use whatever it has set for default
colors. However, we can specify what color we would like for virtually everything that has color
on the page. This includes the background, the text, and the links. These are usually set via
attributes placed within the <body> tag.

To create a background with a solid color, we use the following attribute:



                                                37
                                  <body bgcolor="#xxxxxx">

where “#xxxxxx” is a color expressed using the hexadecimal system explained above. Notice
the hash mark (#), which must be included.

Instead of using the hexadecimal value for the color, you may use one of the “named” colors.
Many people like to use the named colors to avoid using the hexadecimal system; but the
downside is that you must look up all of the names for the different shades. Also, only 16 of the
colors are named to display in a standard way. An example of using one of the named colors is
shown below:

                                    <body bgcolor=“cyan”>

You may have come across pages where there is an image or pattern used as a background.
To do this, the browser “tiles” (repeats) a small image across the entire page. For example,
suppose we have a graphic file with white clouds against a light blue sky, which we would like to
use as a background. This file could be called “clouds.jpg”.

To create a background with this image, we would use the following code:

                             <body background="clouds.jpg">

      Below is the image file itself:           Here is that image, used as a background:




Notice that the image “tiles” across the entire window, creating the effect of clouds and sky be-
hind the content of the page. Actually, it is usually a good idea to also set a background color
for a page like this. This is because if a person sets his or her browser so that images do not
load automatically (or if the image is broken), the background image will not load. However, if a
solid color is set as a background color (for example, the light blue color of the sky) then the
page can still look similar.

If one chooses a tasteful, subtle background image the effect can be quite nice. However, if
the background is not chosen carefully the page can be difficult or impossible to read, or else
just hard to look at. For example:




                                               38
Someone might choose this graphic because they like it or because it goes with the theme of
their site, but it is too busy and makes it difficult to read the text. People will generally not go
through the effort to read this and they will go somewhere else for information.

Backgrounds are not the only colors that you can specify. Following are the remaining attrib-
utes that you may use to set the page’s default colors in the <body> tag:

        text="#xxxxxx"            This will set the color for all of the “normal” text on
                                  the page, in the hexadecimal system.

        link="#xxxxxx"            This will set the color for all of the links on the page.

        vlink="#xxxxxx"           When a visitor clicks on a link, then goes back to the
                                  original page, the link that he or she clicked on is
                                  called a “visited link.” It is a good idea to set a sepa-
                                  rate color as the visited link color, to allow the user to
                                  have an easy way to remember which links have al-
                                  ready been explored. This attribute will set the color
                                  for all of the visited links on the page.

        alink="#xxxxxx"           As a visitor clicks on a link, it becomes an “active
                                  link,” which means the mouse is currently clicking on
                                  it. This attribute will set the color for the active links
                                  on the page, in the hexadecimal system. For exam-
                                  ple, if red (“#ff0000”) is set as the color for active
                                  links, then while the mouse button is clicked and held
                                  on the hyperlinked words, the linked words will turn
                                  red.

The following is how you would use the <body> tag to set values for all of the above tags:

    <body bgcolor="#xxxxxx" background="image.xxx" text="#xxxxxx"
    link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">




                                                39
Note: Some people mistakenly add the above line of code in addition to the <body> tag that is
already present. This is not correct! There should only be one <body> tag. If there is already
a <body> tag in your page, then you should just add the attributes to that one, or replace that
one with this line.

Here is the above code inserted into the code for the “bare bones” page:

           <html>
           <head>
           <title>sample bare bones web page</title>
           </head>
           <body bgcolor="#xxxxxx" background="image.xxx"
           text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx"
           alink="#xxxxxx">
           <h1>Sample Bare Bones Web Page</h1>
           <p>
           As you can see, there is little on this page. But, it
           works!!</p>
           <p>
           Hooray, there is now <a
           href="link.html">link</a> on this page!! It is
           getting bigger!</p>
           </body>
           </html>

Although the above tag shows how to change the text color for the entire page, it is not useful
when you would like to change the color of one word. To do this, we would use an attribute of
the <font> tag, the color attribute. Here is how we would make the words “look out!!” ap-
pear in red in HTML:

                     <font color="#ff0000">look out!!</font>


L.     Tables

Most Web pages nowadays use tables to help format the content. There are five tags used for
tables:


        <table> ...               This tells the browser that a table is supposed to go
           </table>               here. Just like with other tags, it goes before and af-
                                  ter the content within the table.

        <caption> ...             This tag lets you write a caption for the table. The
           </caption>             caption can be a title for the table, or a short descrip-
                                  tion. The default location for the caption is top center.

        <tr> ... </tr>            The “table row” tag defines where a new row begins.
                                  The default formatting for each cell in a row is left
                                  aligned and centered vertically.




                                               40
         <th> ... </th>             The “table header” tag lets you make a header for the
                                    column. For example, if you wanted to make a table
                                    with one column with the name of schools in Boston,
                                    and the second with the number of kids in each
                                    school, you can put those labels in the header cells
                                    on top of each column. The default format for the
                                    text within each of these cells is centered and bold.

         <td> ... </td>             The “table data” tag indicates the content for an indi-
                                    vidual cell. You need to use this for each cell. The
                                    default alignment for the cell contents is left aligned
                                    with vertical alignment in the middle (same as for the
                                    <tr> tag).

The following is sample source code for a bare-bones table using all of the above tags:




This is what it looks like in the browser:




Note that you can achieve the same effect as the <th> tag if you format the <td> tag to dis-
play the content as bold and centered.


                                                41
Following is a graphical representation of the code for a 2×2 table, without using the <th> tag.
The light blue boxes represent the content within the cells:




There are a number of attributes that you can use to format virtually everything about a table.
As usual, you can combine attributes within a tag by putting spaces between each consecutive
attribute, and there should never be any spaces within the actual attribute. Below is a list of the
various attributes for working with tables:

       border=“n”                     This will display a border around each cell in the
                                      table, where n is the thickness of the border ex-
                                      pressed in pixels. You cannot turn this border on
                                      and off for each individual cell, like you can in word
                                      processing programs. n can be any integer (whole
                                      number) from 0 (no border) up.

                                      Note: there is no border on the "bare bones" table
                                      as displayed in IE 6.0, because no border is indi-
                                      cated in the source code and the default value is 0.
                                      Other browsers may display a default border size of
                                      1 pixel. If you want to ensure a specific border size,
                                      it is a good idea to specify it. This attribute only
                                      goes in the <table> tag.




                                                42
bgcolor=“#xxxxxx”    You can set the background of a table just as you
                     can set the background for a whole page (as seen
  or                 in the <body> tag). The bgcolor and back-
                     ground attributes can be used with the <table>,
background=“x.xxx”   <th>, and <td> tags.

                     When used with <th> or <td>, the background you
                     specify will only affect that individual cell. When
                     used with the <table> tag, the background will be
                     set for the entire table. You can set the background
                     in the <table> tag but also specify a different
                     background in the <th> or <td> tag that will apply
                     to only that cell.

                     If you use either of these attributes in a table, you
                     should test your page in both Netscape and IE to be
                     sure it is displayed properly in both. They some-
                     times display these differently, especially when a
                     background image is used. This attribute is depre-
                     cated and may not work in the future; you may want
                     to try using CSS instead

cellpadding=“n”      This attribute is used only in the <table> tag. This
                     allows you to specify how much of a “buffer” (white
                     space) should be between the edge of the cell and
                     the content of the cell, in pixels.

cellspacing=“n”      This attribute is used only in the <table> tag. This
                     allows you to specify how much of a “buffer” (white
                     space) should be in between each cell, in pixels.

align=“(left, cen-   This affects the horizontal alignment of the content.
ter, right)”         You can use this with all of the above tags including
                     the <table> tag. This defines how the content is
                     aligned within the tag. Attributes defined in <th>
                     and <td> will override those defined in <tr>. This
                     attribute is deprecated and may not work in the fu-
                     ture; you may want try using CSS instead.

valign=“(top, mid-   This affects the vertical alignment of the content
dle, bottom, base-   within the table cell. You can use this attribute with
line)”               <th>, <tr>, and <td> but not with the <table>
                     tag. This attribute defines how the content is
                     aligned within the cell; i.e., valign=“top” will
                     push all of the content in all cells in the row to the
                     top of their cells, while valign=“bottom” will
                     force all of the content within the cell to align with
                     the bottom border of the cell. Attributes defined in
                     <th> and <td> will override those defined in <tr>.



                              43
       colspan=“n”                   This attribute defines how many columns each cell
                                     will take up. For example, if you have a three-
                                     column table but you want one row of the table to
                                     contain just one piece of data that stretched across
                                     all three columns, you can set that cell to col-
                                     span=“3.” Remember, each row in a table must
                                     have the same number of columns, but the col-
                                     span attribute allows you to “hide” columns by
                                     stretching one cell across more than one column.

       rowspan=“n”                   This works the same as colspan, except it defines
                                     how many rows each cell will take up. For example,
                                     if you have a table with two columns and three
                                     rows, but you want one of the columns to show only
                                     one row, you would set one cell to rowspan=“3.”
                                     Remember, each column in a table must have the
                                     same number of rows, but the rowspan attribute
                                     allows you to “hide” rows by stretching one cell
                                     across more than one row.

       nowrap                        This turns off word “wrapping” within a cell. Word
                                     wrapping is what allows a word to jump to the next
                                     line if it is too long to fit on the line you started to put
                                     it on. Most word processing programs (Microsoft
                                     Word, for example) do this automatically. Web
                                     browsers also do this. This is why you can usually
                                     adjust the size of the browser window and still be
                                     able to read all of the words. However, using the
                                     nowrap attribute can be useful if you want to force
                                     all of the words to stay on the same line, regardless
                                     of the size of the user’s window. This attribute is
                                     deprecated and may not work in the future; you
                                     may want to try using CSS instead.

       width=“n”                     This can be used for all of the table tags. It defines
                                     the width of the table/cell either in pixels (gives an
         or                          exact fixed width), or by a percentage of the window
                                     size, regardless of whether the content actually
       width=“n%”                    needs all of the space given. You cannot define the
                                     height of a row/cell/table.


This is how the <table> tag should look if you are using all of the proper formatting attributes:

       <table width=“n” cellpadding=“n” cellspacing=“n” border=“n”>

It is good practice to always specify a value for each of the above attributes (width is optional
depending on how the table fit into the rest of your page layout). Even if cellpadding,
cellspacing, and border equal zero, it is a good idea to write it into the code because



                                                44
browsers sometimes have different default values for these attributes (such as a default border
of 1 pixel).

One of the most popular reasons for using tables in HTML pages is to create margins. Nor-
mally, page designers have little control over margins, making it a challenge to stop the text
from running right up to edges of the browser window. Lack of margins is considered poor de-
sign, because it causes eyestrain and makes it difficult to read large amounts of text, especially
with the incredibly W I D E screens that are currently popular.

An easy way to use tables to insert margins into your pages is by creating a table with three
columns. The two columns on each side (the margins) should be left blank, with all of the con-
tent in the middle column. By using the attributes of the <table> tags, you can control the
width of the margins. Here is how to make a page with margins ten pixels wide on both sides of
the page:

              <table width=“100%”>
              <tr>
              <td width=“10”>&nbsp;</td>
              <td>
              <p>
              this is the middle cell, where the content of my
              page will go!</p>
              </td>
              <td width=“10”>&nbsp;</td>
              </tr>
              </table>

Notice that in the two side cells, which represent the margins, there is the character entity for
the non-breaking space (&nbsp;). This is because Netscape and Internet Explorer browsers
later than version 3.0 will not display a table cell that has no content. Therefore, without the
character entity &nbsp; to hold the cells open, the margins would not appear. The browser
does not care what actually goes in the cell. It just requires some sort of content so that it is not
empty.

You can also produce margins by putting your content in a table that is centered and set to a
width that is a percentage of the size of the browser window (less than 100%). When this oc-
curs, the size of the margins will change with the size of the browser window, becoming bigger
with a large window, and smaller with a smaller window. Below is an example of this, where the
table width was set at 75% of the browser window.




                                                 45
  Below is the page in a small win- Here is the page in a wide window:
  dow:




Tables can help in controlling your page layout by allowing you to precisely place your content.
Experiment a bit by adjusting the width, align, valign, colspan, and rowspan at-
tributes. Try putting images in different cells from the rest of the paragraph to create different
effects.

Tables can be also be useful when making bulleted lists in which the bullet is an image. Using
tables will help everything to line up much more evenly. You can make a bulleted list by creat-
ing a table with two columns, with the left column in each row containing a bullet, and the right
column containing the content. You will usually want to set valign=“top” and the width of
the cells in the left column to fit the width of the image so that the content of the right-hand cells
lines up nicely next to the bullet. The following is an example of using these techniques to
make a bulleted list:




                                                 46
Several tables are “nested” in this page. Tables are “nested” by placing a table within the cell of
another table. For example, in this page, the entire page is a table with two columns. The left
column, which makes up the sidebar, contains the images of the menu items (“What We Fund,”
etc.), with the background for the cell set as the image of a brick wall with balloons. The right
column makes up the bulk of the page. Another table nested in this column contains all of the
main content. Nested within one of the cells in this table is another table, to make the nested
list shown above. The following page contains sample code (not the real code for this page) to
show how this could be done. Each element of the tables, and the nested tables, are indented
for clarity of reading.




                                                47
<html>
<head>
<title>Getting Involved</title>
</head>
<body bgcolor=“#ffffff”>
<table width=“100%” border=“0” cellpadding=“0”
cellspacing=“0”>
  <tr>
   <td width=“100” background=“bricks.gif”
   valign=“top” align=“left”>                       here is the left sidebar
     <img src=“image1.gif” alt=“menu item 1”>
                 etc.
   </td>                                                   setting WIDTH=100%
   <td width=“100%”>                                       makes the right col-
     <table width=“100%” border=“0” cellpad-               umn extend across
     ding=“0” cellspacing=“0”>
         <tr>
           <td><p>                                             the rest of the
            this is the middle cell, where the                    window
            content of my page will go!</p>
           </td>                                                     This cell
         </tr>                                                       forms the
         <tr>                                                        right-most
           <td align=“center”>                                       column.
            <table width=“100%” border=“0” cell-
            padding=“0” cellspacing=“0”>
               <tr>
                 <td width=“10” valign=“top”><img                Here is the ta-
                 src=“balloon.gif” alt=“o”></td>                 ble
                 <td width=“100%”>first listed                   nested within
                 item</td>                                       one cell. This
               </tr>                                             table forms the
               <tr>                                              bulleted list
                 <td width=“10” valign=“top”><img                seen in the
                 src= “balloon.gif” alt="o"></td>                column on the
                 <td width=“100%”>second listed
                                                                 right, in the
                 item</td>
               </tr>                                             example.
            </table>
           </td>
         </tr>
         <tr>
           <td><p>
            here is another cell filled with
            content!</p>
           </td>
         </tr>
     </table>
   </td>
  </tr>
</table>
</body>
</html>


                                      48
Nesting tables can be difficult. For this reason, it is often very helpful to “turn the borders on,”
or set the border attribute to at least one pixel wide, even if eventually, you will not want the
borders to be visible. It can also be helpful to indent each element of a table and all nested ta-
bles, as shown in the previous sample code. It is very hard to spot a problem in your code if
you can’t easily see what you’re working with. When your tables are nested correctly and work-
ing properly, you can just turn the borders back off by setting the border attribute to “0.”

Nested tables can also be used to put borders around an individual cell. Remember, using the
border attribute will set the borders for every cell in the table; you cannot turn borders on and
off for individual cells. However, you can nest a table of one cell inside a cell, turn the borders
on for the cell in that new table, and it will appear as if you have turned on the borders for just
one cell. But remember, it can be difficult to keep things straight when you do a lot of nesting.
Also, it is best to make your tables as simple as possible, or else your page will take longer to
load.


M.     Things to Consider When Designing a Layout

Although content might seem to be the most important element of your Web page, layout is
equally, if not more important. This is because poor layout makes it difficult to communicate
with your visitors. If your page is unattractive or difficult to navigate, your visitors probably will
not stay on your site long enough to get your message.

When laying out a page, one of the first things to consider is the nature of your content. Is your
page mostly a list of links? A gallery of images? An article? Each of these types of pages
have unique layout needs. A little planning to ensure ease of use, legibility, and attractiveness
can make a big difference.

Be sure to create enough white space in your pages. White space gives the eyes a little rest
and can improve clarity and legibility of your pages. Also, if there is a lot of content, consider
breaking it up into two or more pages. You can also create sections using the anchor tag, then
make a table of contents or an index to link to them.

It is also important to consider the content when choosing colors. A popular design idea is that
a page with mostly text should have a light background with dark text while a page with mostly
graphics should have a dark background. These are general rules, however, and you should
feel free to experiment with your page design until you reach a good balance of what you like
and what your users will like.

It is usually considered good design to maintain the same “look” across all the pages of your
site (color scheme, fonts, etc.). This technique is referred to as creating a “metaphor” for the
site. For example, the metaphor for your site could be a sky background and butterfly images,
with Comic Sans as the font. These three elements are used on all of the pages in the site.
Using a metaphor helps the user to feel as if there is some continuity across different pages
within the same site. Often, sites will use their “company colors” as their metaphor. For exam-
ple, if a company’s logo and letterhead consist of mostly French blue with some burgundy, a
site designer might choose to make the links match the blue color, and visited links to be bur-
gundy.
Another important consideration to take into account is that your visitors may have varying
screen sizes. Today, designers usually assume that the smallest width for a user’s screen will



                                                 49
be 600 pixels. However, some screens can be twice this size or larger. Also, just because the
minimum screen width may be 600 pixels doesn’t mean that the user has to make the browser
window as wide as the screen. These issues must be taken into consideration when you are
deciding whether to use relative or absolute sizing for tables and other visual elements. It is
often safer to use relative sizing if you want your site to look about the same in many different-
sized browser windows (however, sometimes relative sizing can cause items to overlap if the
browser window gets too small). If something on your page must be set to a certain number of
pixels, you should use absolute sizing, but you should never exceed 600 pixels in width.

You should always test your page on several different-sized screens to ensure that everyone,
regardless of screen size, is able to view your pages optimally. When testing various screen
widths, you can even test widths less than 600 pixels by resizing your browser so that it is sig-
nificantly less than 600 pixels wide. This way, you can be absolutely positive that your pages
will always look as nice as possible.

In addition to allowing for different screen sizes, it is also important to allow for different user
settings. In particular, it is important to allow for different default font sizes. You may have cre-
ated a graphic or sized a table cell so that it matches a line of text perfectly. However, if the
user has a different font set as the default font, or if the user has a different default font size,
the pages may not appear as nice to them. Therefore, it can be helpful to test your pages us-
ing different settings. This way, you can determine if these different settings will cause minor or
major changes.

Remember that users have probably chosen their particular settings for a reason. Perhaps a
person’s eyesight is not very good, and 12 pt. Times New Roman is difficult for him or her to
read.


N.     Adding Special Content

You may want to add special content to your pages like sound files or animation. Unfortunately,
adding these kinds of special features can result in some problems. The first problem is that
special content can slow your pages down and this can be a big inconvenience for users with
slow connections. The second problem is that not all browsers support these types of content.
Even if the browsers do support the content, it is common for different browsers and browser
versions to support it differently. This can result in needing to include extra code for each kind
of browser, or having the content only accessible to visitors who use certain browsers. Be-
cause of the variations between browsers, it is especially important that you test your pages on
multiple browsers, including various versions of these browsers, to make sure that your special
content is available to the greatest number of people.

One kind of special content that was briefly mentioned earlier is the “animated GIF.” An “ani-
mated GIF” is a GIF image that produces animated effects. You can make these files the same
way as any other image—you simply make each frame in a graphic editor, then put each frame
together in the program, specifying the desired speed of the animation. If your graphic editor
cannot make animations, there are several shareware programs that can do this for you. Usu-
ally you will need to make each frame in your regular graphic editor, saving each frame as a
separate image. Then you open the animation program and specify the order of the frames
and the timing, and the program creates the animated GIF for you. Once you create your ani-




                                                 50
mation, you can simply insert it into your Web page just like any other kind of image, using the
<img> tag and its attributes.

Remember that having animations can drastically slow the loading of your page. For example,
you have probably noticed that the slowest things to load on most pages are the ads, which are
almost always animated GIFs. The reason animated GIFs are so slow to load is that the size of
the animation is the sum of the frames it is made of. For example, if your image is 6K in size
and you have 5 frames in your animation, your animated GIF is 30K! The bigger the file size,
the longer it takes to load.

Another kind of special content you may wish to add to your pages is sound. When using
sound files, you must take the differences between browsers into account. To place a sound
file in a page, you must first decide how you want the sound to work. You can choose between
having the user click on an icon to play the sound by launching an external player (for example,
Real Player or Windows Media Player), or you can have the sound play automatically when
your page loads.

Allowing the user the option of clicking on the sound file to launch an external player is the
easiest way to add sound to your page and it will work the same for all browsers and platforms.
To do this, you simply create a direct link to the sound file. This makes your sound files acces-
sible to the greatest number of visitors and also gives them control over when (or if) they wish
to play the sound file, rather than forcing visitors to listen to a sound they may not want to hear.

However, if you are certain that you want the sound to play automatically upon loading the
page (usually called a “background” sound), you must use different tags for each kind of
browser. This is because background sound is supported differently based on the browser and
platform you are using.

Netscape has the most options for background sound. Use the <embed> tag to make this “in-
ternal” sound for a page to be viewed in Netscape. There is no end tag for this tag, and it will
not work for visitors using Internet Explorer.

The attributes for the <embed> tag are:

     src="sound.xxx"               Similar to its use in the <img> tag, this tells the
                                   browser where to find the sound file.

     controls=“(console,           This attribute allows you to set what buttons you would
       smallconsole,               like to have visible for the user to use, similar to what
       playbutton,                 you would have on a CD player or tape deck. If you
       pausebutton,                do not specify any controls, the player will be invisible.
       stopbutton, volu-           While this looks nicer, it can be inconvenient for visi-
       melever)”
                                   tors if he or she is at a library, or some place where he
                                   or she cannot make noise, and there is no way to turn
                                   off the music, or lower the volume.

     height=“n”                    Only use this attribute if you set control buttons, using
                                   the control attribute. It allows you to specify how tall
                                   you wish the control buttons to be, in pixels.




                                                51
     width=“n”                     Only use this attribute if you set control buttons, using
                                   the control attribute. It allows you to specify how
                                   wide you wish the control buttons to be, in pixels.

     autostart=“true”              Use this attribute if you would like the sound to begin
                                   as soon as it is loaded. This attribute must be used if
                                   there are no control buttons, since the user will not be
                                   able to manually start the sound him/herself.

     loop=“n” or “true”            This attribute allows you to specify how many times
                                   you would like the player to loop through the sound
                                   file. If you would like the sound to play continuously,
                                   simply specify “true.”

     align=(“bottom,”              This attribute works the same as the align attribute
       “top,” “center,”            for the <img> tag.
       “left,” or
       “right”)”

With Internet Explorer, only “invisible” background sounds can be made. To do this, use the
<bgsound> tag, which has no end tag. The attributes for <bgsound> are:

       src="sound.xxx"                Similar to its use in the <img> and the <embed>
                                      tags, this tells the browser where to find the sound
                                      file.

       loop=(“n,” “-1,” or            This attribute works the same as the loop attribute
         “infinite”)                  for the <embed> tag. Setting loop=“-1” or “in-
                                      finite” will loop the sound continuously.

Keep in mind that the tags for embedding sound files are not part of the WC3’s HTML stan-
dards and support for these tags varies widely. You should try to avoid embedding a back-
ground sound unless it is absolutely necessary to your site.

Although animated graphics and embedded sound files might not be essential page content,
there are some kinds of special content which might be necessary to include in your page. For
example, imagine that you need to put a brochure or form on your Web site that uses many
special font and graphics and has a complicated layout. As you may already know, it can be
very difficult to duplicate this kind of document as a Web page and have it look exactly the way
you want it to for all of your visitors. This is a problem if the document absolutely must appear
correctly (for example, if it is a form that needs to be printed out and mailed in). A popular solu-
tion to this problem is to make your document into an Adobe Acrobat file that can be posted to
your site. These files use the extension “.pdf,” so they are sometimes referred to as “PDF
files.” To make this kind of document, you need a program called Adobe Acrobat.

Once you have created a PDF file, you can insert a link to it in your Web page, the same as
with any other hyperlink. The user must have the Adobe Acrobat Reader program installed on
his or her hard drive in order to read the file. Fortunately, this program is available as a free
download on the Web. To make it easier on the user, many Web developers put a link to the
program’s download site (located on Adobe’s Web site) near the link to the PDF file.


                                                52
You can actually set up a link for downloading any program you wish, not just the Acrobat
Reader, simply by creating a hyperlink. However, because of the abundance of viruses on the
Internet, people may be wary about downloading files (especially program files). If the program
is housed on your server, you must be sure that you have checked it for viruses before allowing
others to download it. You should post the fact that it has been checked for viruses somewhere
near the link to the program.

Web design is always changing, and so are the standards for HTML. As the Internet becomes
more popular and Web sites become more complex, different programming languages with
greater capabilities than HTML are becoming popular for creating interactive and dynamic Web
sites. However, most of these other languages require that you first have a solid understanding
of HTML. This is why it is very important to experiment and explore first with HTML and then
move into the other Web languages that are out there. This way, you will have a better under-
standing of what you can and cannot achieve with HTML, and what languages like JavaScript,
CGI, and Perl can and cannot do for your Web sites.

No matter what languages you use to create your Web pages, remember that making accessi-
ble, legible pages that work properly on all (or at least most) browsers and platforms should al-
ways be your primary goal. Happy HTMLing!


O.     Finishing Touches

You should now be able to make a completely working Web site. Now comes the task of
checking your new Web page! You must make sure that everything shows up the way it was
meant to, and that all of the links work. Nothing is more annoying to Web page visitors than
finding broken links or illegible content.

Testing your page is simple: just open it up in a browser. The best thing to do is to check the
page on as many different types of browsers (including different versions) as you can possibly
get ahold of, and to try your page out at different connection speeds. However, if you can’t test
it in several browsers at different speeds, you should at least check it on the most recent ver-
sions of Netscape and Internet Explorer using a 56K dial-up connection. At the barest mini-
mum, you should check your page on the browser you use yourself with whatever connection
you usually use.




                                               53
Before officially launching you page, here are some questions you should ask yourself:

1. Does all of the text show up?

2. Does all of the text show up in the right places?

3. Is the text aligned correctly?

4. Is the text formatted correctly (check bolding, etc.)?

5. Are the lists formatted correctly?

6. Are there any strange characters (probably due to smart quotes/ apostrophes)?

7. If you used “special characters,” do they show up properly?

8. Do all of the images show up?

9. Are all of the images aligned correctly?

10. Do all of the links work? To check this, you must, by hand, click every single link and
    check where it leads.



                   Congratulations! You’ve finished your first Web page!




                                               54
III.   Computer Experience Questionnaire
Please indicate your experience with the following, with 5 meaning you agree totally with the
statement, or you have a high level of experience; and 1 meaning you totally disagree with the
statement, or you have no experience with the item. (NA= Not applicable.)

1. General Computer Experience:

                                                   I agree                       I disagree

I consider myself computer “literate”                 5      4     3         2          1     NA

I avoid/dislike using computers                       5      4     3         2          1     NA

Technical information confuses me                     5      4     3         2          1     NA

I am comfortable using Windows 95                     5      4     3         2          1     NA

I am comfortable using Macintoshes                    5      4     3         2          1     NA


2. Experience in Specific Areas:

I am comfortable with word processing                 5      4     3         2          1     NA
programs

I am comfortable “surfing the Web”                    5      4     3         2          1     NA

I surf the Web a lot                                  5      4     3         2          1     NA

I surf the Web a lot for fun                          5      4     3         2          1     NA

I use the Web a lot for school projects               5      4     3         2          1     NA

I am comfortable using search engines                 5      4     3         2          1     NA


3. Experience with Specific Programs:

I am comfortable using Microsoft Word                5       4    3      2          1         NA

I am comfortable using Microsoft PowerPoint          5       4    3      2          1         NA

I am comfortable using Netscape Navigator            5       4    3      2          1         NA

I am comfortable using Windows Explorer              5       4    3      2          1         NA




                                              55
4. More Experience:

1. I have been using computers (of any kind) for _______ years.

2. I have access to a computer in the following places (i.e., school, town's public library):
   _______________________________

3. I have access to a computer with Web access in the following places:
   _______________________________

4. I have built at least one web page.     (Circle One)    Yes            No
   (If No, skip to #12)

   5. If you have built more than one web page, indicate how many: _____________

   6. I know how to write HTML without using a program (web editor) to do it for me.
             (Circle One)   Yes          No

   7. I have made at least one web page without using an editor (using HTML I wrote myself).
             (Circle One)    Yes         No

   8. If you have made more than one without using an editor, how many? ______ and how
      many years/months ago)? _________

   9. I use(d) a web editor to build my web page(s).      (Circle One)    Yes          No
      (If No, skip to #12)

       10. What was the name of the web-editing program? _______________________

       11. How proficient are you at using this program? _________________________

12. I have made my own graphics, or manipulated someone else’s graphics by myself:
             (Circle One)  Yes           No

    13. If yes, describe: _______________________________________________________

14. I have used the following image editors (i.e., Photoshop, Microsoft Photo Editor):
     _______________________________________________________________________

15. Please list all experience you have in publication (i.e., on yearbook committee for 3 years
    in layout, editor of school newspaper for one year), and/or any other experience with com-
    puters or the web that you would like to share: __________________________________
    ________________________________________________________________________




                                              56
Notes
 ***

								
To top