Last Updated: 7/7/96
WebMaster: Joseph Abruscato jabrusca@moose.uvm.edu
© copyright 1996 Joseph Abruscato

Text

The Line Break tag and the Paragraph tag.

Let's take the BR tag first. It is easy to understand. All it does is stop a line and force a line break at that point. The text that follows a BR tag begins at the left on the very next line. The lines below demonstrate how the BR tag operates

The BR tag is being used right after the letter "t" in point
so you can see its effect.

The P tag acts very differently. First of all it breaks a line just as the BR tag does but the text that follows the P tag is preceded by a line space. The two lines below demonstrate how the P tag operates

Here is a demonstration of the use of the P tag. The P tag is inserted right after the letter "t" in point

Observe the line space that was inserted between this line and the previous sentence. If I had used the BR tag there you would see these lines grouped together.

But this is only one use of the P tag there is more. By inserting an alignment attribute into the tag such as "right" or "center" we are able to place the paragraph so its lines are justified to the right or centered. Wait a second! What about left jus tification??Not to worry. Left justification is accomplished by default by just using the P tag with no attributes.

The following lines show the effect you get by using the P tag with align=right:

Notice that this line is aligned to the right.

So is this one.

You can also use the align attribute to center text. The paragraph that follows this one shows the effect you get with align=center:

.This paragraph is placed within the margins using the P tag with align set to center. You may have some text for which center alignment would provide impact. Of course this text has no reason that I can think of for being aligned at the center.

As usual check my source code to see how it all looks in html.

Notice that if your intention is to right or center justify you must place the P tag with its accompanying attribute set to right or center at the beginning of the paragraph you wish to affect.

How do I sign my page?

People who read your page should be told who created it. Here is a nice format for doing just that. View the source code for this page to see how I did it. Notice the use of the rather strange combination of characters used to create the "©" symbo l within the source code.

Last Updated: 7/7/96
WebMaster: Joseph Abruscato jabrusca@moose.uvm.edu
© copyright 1996 Joseph Abruscato

The Mailto URL

Here is how I use the mailto URL. What it does is create a link that will prompt the reader for the subject and body of a message to the target of the mailto URL. It is supported by most recent versions of most browsers. Read the source code for this docu ment to see how it's done.

Please send comments, suggestions for additional links, notification that a link is broken, or greetings to:

jabrusca@moose.uvm.edu

I wrote the sentence before the mailto URL shown above. I'm sure you can write your own. And, no I don't need any more e-mail than I already get but thanks for the thought.

Unordered lists with "definitions" underneath (aka "glossary list," or "definition list.")

To create the layout shown for the three items below begin by using "UL" no quotes in a tag, then use

  • for each list item (naturally you will have to anchor related URL's in the customary way). End the list with "/UL" no quotes in a tag. Be aware t hat I used tags for bold facing the terms or items in the list. Look at the html source code for this page to see how I did it. Using this approach puts a "bullet" before each item.

    Here is another way to create this type of list. It is formally known as a "definition list." You use a DL tag before the list begins and you end the list with a /DL tag. Each "term" in the list begins with a DT tag. Each "definition" begins with a DD tag. Notice how this approach omits the "bullets" and changes the indenting. I used the B (bold) and /B tags for each "term." Again, look at the source code for this page to see the specifics.

    Web66 Classroom Internet Server Cookbook
    Everything you need to know about how to set up your own server at home or school for the World Wide Web, FTP and Mail. The info here is for both Macintosh and Windows machines.
    Web66 Network Construction Set
    Are you just dying to know how to set up your own LAN (local area network) at schol or at home (if you have a really big house? This is the place to find out. And, if the world is your oyster it also has info on how to set up a WAN (wide area network)
    Web66 SharePages
    If you love B & J's (a famous Vermont company) Chunky Munky, you love the chunks and bits and pieces of goodies you will find here for use on your own home page.

    Using Preformatted Text

    I'll bet you have some documents in your computer that the rest of the world is just dying to see. You know, a letter you wrote to the mayor asking that a week of celebration be approved by the town council to honor your personal achievements, a descri ption of the wonderful capabilities of your pet iguana that you sent to David Letterman, or perhaps a copy of your resume in the event that someone, someplace in cyberspace is in search of the extremely clever, always engaging, extraordinarily handsome/at tractive, near genius human being who looks back at you each time you gaze upon yourself in a mirror. On the other hand, you may have the text of brochures, reports, advertising blurbs or other text samples that you would like to present at yoru site in c lose to the same format in which they exist on your computer. How do you do it? Here is the way:

    Use the tag "PRE" at the beginning of the material and "/PRE" at the end.

    I have some bad news for you. Basically, most browsers will convert your text to courier font (the common typewriter font) and bold face and underlining will not be preserved. Essentially, using the "PRE" and "/PRE" tags preserves white space. So the l ong and short of all this is that these tags are handy if you want to get a text file onto your web site in a quick and dirty way.

    Here is how it will look:

    Hi Uncle Vito:
I hope this note finds you in good health at your brand new retirement condo in Florida.
The weather here in the north has been great. Here are the temperatures
for the last three days:  62  73  65

	Oh, congratulations on winning the lottery. I think of you so much and I really
hope you are feeling well. I miss you so very much.  I'm sure you think of me and
 all the wonderful times we had together. Stay well. Take your medicines. And, 
remember I think of you a real lot. 
						Your Loving Nephew,

						Tony

    Be aware that the browsers will be expecting your line lengths to be 80 characters or less.The best thing to do is to use carriage returns at the end of lines. Also, if want to emphasize something in the text file you can insert "strong" and "/strong" tags.

    "Graphics I: Finding and Placing Inline Images (eg. buttons, balls, icons, arrows etc.)

    Where do I get an inline image?

    In your html document you will be creating a reference to a special UVM file that has an excellent selection of small graphics. This saves file space on Moose. If you don't do this you will have to create many small graphics files and include them all in your Moose home directory. That is not the way to go!

    The inline images available for you to use are from "Daniel's Icon Archive."

    After I locate something I like how do I include it on my home page?

    Oh, it's not hard at all. Here is the anchor you would use for a red ball in the UVM file.

     img src=http://www.uvm.edu/icon/balls/redball.gif

    Can I adjust the position of an inline image?

    Yes, you do have some flexibility. You can adjust it so the top of the image is at the baseline of the text (ie. the text will be "above" the graphic that follows it) , the middle of the im age is at the baseline of the text or the bottom of the image is at
    the baseline of the text. Yes I know it doesn't look it but...what can I tell ya?

    You achieve this adjustment by adding ALIGN=TOP, ALIGN=MIDDLE, or ALIGN=BOTTOM to the tag. These are called the "align attributes." For example a complete tag to have the top of the image at the baseline of the text would be 

     IMG SRC="http://www.






uvm.edu/icon/balls/redball.gif" ALIGN=TOP

    Graphics II: Finding and Placing External Images (eg. larger art, photos)

    The recommended way to do this is to locate the art piece or photo and then it from the web browser to your personal disk. Then use Fetch 3.0(Mac) or FTP(Windows) to place it in your graphics subdirectory (one you may have previously named "pictures" o r "pix" in your public_html directory.) Remember to provide access to the directory not the file by using chmod 755 directory name and use chmod 644 picture name. (If you are doing this with a DOS/Windows machine use FTP to move the file .

    Basic Clip Art Sources

    Oh, don't get too fancy with the graphics. You want good stuff that is simple, effective and fast loading or your reader will.....go......to......sleep.!

    Here are some of my favorite clip art sites:

    A General Source for Clip Art
    This site has clip art for just about any area of interest. A word of caution: be sure you get clip art in gif format. When you get to this page scroll down about half a page until you reach: Theme Specific Sites and/or Archives:. T hat will be your most sensible starting point as it has the index going from "Agriculture" to "Wedding Related." Remeber to carefully read the original page to see if and how the provider of the graphic would like to be credited.
    The Yahoo List of Graphic Goodies--Enjoy
    Personally, I think this is one of the better listings around. The good folks at Yahoo keep it updated continuously so you don't have to worry about url's that lead nowhere.
    Clip Art for Educators
    This is an excellent collection of drawings that are of a size that will fit nicely on a home page. Most important of all...all of these are school related (generally K-12, some could work for higher education related pages.) The page is maintained by Susan Brumbaugh.

    Animated Clip Art Sources

    It may be appropriate to add a few animated images to your page. The key word here is "few." In recent months an easy way of doing this has emerged; namely, the gif89a format. All you have to do is find something you'd like, put it in your pictures file, set the permissions (chmod 644) and reference it in your html page. It is that easy...which is the reason it is being used excessively! A little animation like a number of other things in real life goes a long, long way.

    The First Gallery of Gif Animation
    A small but useful collection of gif89a images.

    Chris's HomePage
    This has a collection of about 15 Gif89a images plus background textures.

    Graham's Page
    This has nice collection of GIF89a images as well as other images.

    GIF89a Animasjone
    This page has some lively Gif89a images. It seems like quite a nice collection. If you happen to read Norwegian you are going to really enjoy the site. If I knew how to say thank you in Norwegian (is it "tak" or "tok")I would say thank you Mr. or Ms. or Mrs. Inettev...whatever.

    Animation Icons (Gif89a)
    These are animated icons! Quite a collection. Do you think they would help you convey the content of your page or distract from it? You be the judge.

    Tru Realities: Non-Javascripted GIF89a AnimationGallery
    More gif89a images than you could imagine in your wildest dreams.

    Yahoo Search Results on gif89A
    What you still want more?Stop it already! OK, I give up here are enough links to keep any seeker if gif89a images busy for days, weeks, months, years....eons (did he say eons?) This is Yahoo's "primo" hit on my gif89a search....it's unbelievable.

    These sites will be helpful to you if you are either a graphics artist/designer or a skilled user of Adobe Photoshop.

    A Site Maintained by the MIT Student Newspaper
    Cruise this site for tips on how to use graphics as well as exceptional examples. Oh, best of all this site also includes sample "backgrounds" for your web page.
    Artists' Graphics Created With Photoshop
    Alf Mateus a graduate student at the University of Florida maintains this site. It has excellent graphics; however, be aware that you will encounter some sophisticated art pieces that would not be appropriate for K-12 school or agency use but might wo rk on your personal home page.

    After I locate something I like and have placed it in my graphics subdirectory (pictures or pix) how do I anchor it to my home page?

    Finally an easy question. Whew!

    My explanation assumes that you have a subdirectory named pix in your public_html directory and that in pix you have a picture of an intestinal bacterium named beano that has been saved as beano.gif.

    At the location that you would like beano.gif to appear include one tag that includes all of the following:

     IMG SRC="pix/beano.gif" ALT="An Intestinal Bacterium"

    The ALT attribute is there for two reasons. If a person is using a text only browser they will see the text you have included with ALT instead of the graphic. (Of course if they are using a text only browser at this point they are probably living in a cave and the lighting is going to be terrible anyway.) The second reason is that some browsers put up the ALT text as the graphic is s l o w l y loading.

    How Do I Include A Background Color?

    There is an ongoing debate about the use of background colors, textures, and even art that appears on the background of a Web page. Some page designers feel that these html features are too often over used. These features can distract the reader from the content and other images on the page and may even make the page impossible to read.(If you cruise the WWW for a bit you'll discover this for yourself.)

    My view is that a light background color if well coordinated with the inline and external graphics can add to a page's impact. So, at the minimum add a light background color.

    With respect to textures, I would be very very careful. Most that I've seen make the text tough to read.

    Finally, backgrounds that contain graphics can work but again be very careful if you go this route. If you are debating whether a particular background is or is not distracting...it probably is.

    What Tag Do I Use To Create A Background Color?

    Do you recall the "body" tag near the beginning of your html document? Background color gets specified within the body tag. All possible background colors have a value that is expressed by the # symbol followed by a combination of six digits and lette rs (math and computer type folks should have figured out by now that this is hexadecimal notation...if you didn't figure it out don't worry about). Mere mortals need only find what combination creates what color and then include that in the BODY tag.

    How Do I Find A Color?

    First go to one of the sites listed below this paragraph. As you wait for the page to appear prepare your mind for some mind boggling color choices. After you have scrolled down the page select a few possibilities by copying and pasting them to an opened Simpletext(Mac) or Notepad(Windows) document. Just bring back the name of the color and the six symbol code to its right. Ignore the values to the left of the color name.

    The only source you will ever need to locate a background color.

    Netscape Background Colors

    At the risk of being boring and yes I really do have to get out more, I used white as a background for my own home page. I think it works pretty well with my opening external graphic. Here is how I "tagged" my page for white:

    BODY BGCOLOR="#FFFFFF" TEXT="#000080"

    Yes, I also did something with my text color...but I'll let you figure that one out!

    Experiment with different background colors but for the bleary eyed web surfer's sake try not to use colors that have appeared to you in dreams or related out of body experiences.

    How Do I Find and Use Background Images (wall paper)?

    Locating and Capturing Background Images (Wall Paper)

    All background images should be very light colored and have minimal contrast with the background color of the page and the text on the page.

    A Source of Background Images
    This page has all kinds of graphics for home pages. To locate the Backgrounds scroll down until you reach the: Backgrounds/Icons/Web Page Material section. You'll find backgrounds in either gif or jpg format--in the case of background images you may use either. Also, carefully read the original page to see if and how the provider of the graphic would like to be credited.
    Archives of the MIT Newspaper
    A superb collection of backgrounds (wall paper) created with Adobe Photoshop. They are in jpg format. Select the one you want, hold down your mouse button and your browser will give you a choice that basically says "save image." Do it and save it to a personal disk. Then use Fetch or FTP to transfer it to your graphics subdirectory in your public_html directory. Of course remember to chmod 644 filename.

    How Do I "TAG" Background Images?

    Well, the simple answer is that you find the image you would like such as a drawing of a peanut called "goober", save it as a gif file, put in in your pictures (pix?) directory, and tag and include it in your BODY tag: 

    BODY BACKGROUND="goober.gif"

    Can I Use My Own Photos or Graphics on My Home Page?

    Well if you are highly motivated to do this you could bring your pictures to the lab, find the handout "Scanning Graphics in the Waterman Lab," on one of the "shelves" of the entry hallway, get thyself to a scanner, and be prepared to devote a few hour s of your life to the mysteries and wonders of Adobe Photoshop. Eventually get your scanned graphic saved in gif or Compuserve gif format (if you've done everything right you will have a file saved to a disk that has the suffix: .gif) Finally, use Fetch(M ac) or FTP (DOS/Windows) to move it as "raw data" to your graphics subdirectory in your public_html directory. Finally, chmod the file with chmod 644 picturename.

    OK, what if I don't want to establish a long term relationship with scanners and graphics software at this juncture in my life....Are there any "free" photographs on the WWW?

    Yes!

    Did you want to know where some are?(Sorry, I just can't help it.)

    Don Tarbet's Page
    This site has some nice photos of people, wildlife, farms etc...all taken in Maine.
    The Ben Meadows Co. Page
    Nice nature photographs but they may take too long to load. If you find something that you really like, capture it, open it with Adobe Photoshop and have fun changing its scale, cropping and whatever....but don't call me you are on your own.
    An Index of Photographs Compiled by Yahoo.
    Five interesting sources of photographs and other clip art. You may find something you like here.
    Eighteen different categories of images including some photographs
    There is quite a range of possibilities here found within categories such as animals, people, weather, astronomy etc.

    How do I include a feedbackform on my home page?

    The bad news.
    Well, strictly speaking you can't. Creating a form is easy (you can discover how to do it in any html reference). The problem is that you also have to write an associated Common Gateway Interface (CGI) script that actually moves any information that i s "written" on the form through our moose server and to your e-mail address. Doing this takes a knowledge of a programming language such as PERL or Visual Basic and official permission to access the guts of our server. You may for some reason be able to do the former but you are not permitted to do the latter.
    The good news.
    Clever folks at UVM have written a script for a generic feedback form and have created the html needed to run the script. The data gathered on the form is not sent to moose at all but is sent to "mole" a server that can be used for our purposes. My th anks to Wesley Wright and possibly others for developing the script and Steve Cavrak for making it available and helping me understand how it works.

    How do I include the form on my page?

    Can You Recommend A SiteWith Links To Pages That Have Designs I Should Study?

    My pleasure completely:

    Web 66
    This extraordinary site shows what you get if you combine the technical and other resources of a major corporation with the public interest mission of a University. This site is sponsored by 3M corporation and the University of Minnesota. It will lead you to an enormous number of sites with a school or education related orientation. Check a few out to see how they get their message out using a WWW page.

    Can Your Recommend A Site That Will Give Me Tips On How To Improve My Home Page?

    My pleasure completely:

    Jeffrey Glover's Page
    Well, you may not care for the actual title of his page--not the title I used above. I think it's fine but then again I spend a lot of time on a university campus. Even if you are a bit put off by his wacky approach and the late night tv language, his content is worth it (you may have to hold your nose). Check out the hot buttons at the bottom of his page for page improvement ideas.

    How To Link To Specific Places On Another Document

    Well there are two ways to do it. One technique is part of HTML 3.0 and may not work for anything but the most recent browsers. It uses the ID tag. I chose a more conservative approach--using the NAME attribute. The following explains what I did.

    Here is the basic idea:

    Creating the anchor in the second document:

    Creating the link in the first document: