5. FINAL FORMATTING: ADD AN IMAGE OR TWO AND SOME LINKS
Saving and incorporating an image from the web
Now you're going to add an image to your fledgling HTML effort. To incorporate an image from the web into your own document, you must first save it to your own directory. To try this out (just in case you don't believe us), we must first come up with an image for you to use in your page. Ah, how about the happy computer at the top of this page? Stop complaining, you can find one that you like better later.
First you'll use your mouse to place the cursor over the image of the happy hacker at the top of the page. Click on this image and hold down the button (click on the right mouse button if you're using a PC). A menu of commands should drop down before you. Select "Save this Image as . . ." You'll want to make sure that your image file's title is something you can remember. Let's call this image "happycomputer.gif." After changing the "Save As" line, if necessary, save the image to the directory we've created, the one containing your HTML document.
Since the image file called "happycomputer.gif" is now stored in the same directory as your HTML document, you'll point the browser to this file (your image source) by adding this line to your document:
<img SRC = "happycomputer.gif">
When the page loads in a browser, the image will appear on the page at the spot where you've requested it. Remember: whenever you use text or images that you've found on the web, you must always follow the guidelines for use posted by the web site's creator. If there are no guidelines posted, you must contact the creator and ask for permission to use the material.
Adding a Few Links
Anchors are special destination points within a document, allowing you to add links to different parts of the document, such as separate sections, a table of contents, or the top of the page. We'll now add an anchor at the top of the page, along with a link at the bottom to bring us back up to the top of the page:
<A NAME= "top_of_page"></A> [Creates and names an anchor; we're putting this one at the top of the page]
. . .
<A HREF="#top_of_page">To Top of Page</A> [Creates a link that, when clicked, will jump the user back up to our anchor, at the top of the page]
In addition, we'll add a link to the email address of the page's author (that'll be you, when you stop screwing around and finish your page):
<A HREF="mailto:[email protected]">Shari Saunders</A>
When a visitor clicks on this link, her browser will activate her default email application, and open a new, blank message. The message will already be addressed to you, and the user will only have to fill in her message and hit the "send" icon or command.
You may also want to add a list of your favorite links, if your page is intended to reflect your hobbies or interests. We'll add just one of our favorite links (check it out--we couldn't make this stuff up if we tried):
<A HREF="http://www.cia.gov/cia/ciakids/index.html">Visit the CIA Homepage for Kids!</A>
Final Formatting: Sample Page
With a little bit of final formatting, here's a sample page we've constructed to illustrate the HTML tags we've been working with in this SYW and in "SoYouWanna learn the basics of HTML?"):
<HTML>
<HEAD>
<TITLE>Shari Saunders' Awesome (Yet Modest) Web Page!</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF"
LINK="#0000FF"
ALINK="#FF0000"
VLINK="#800080">
<!-- Note that we've added color instructions, which go inside the brackets of the "body" tag. Since we've left all of the colors on the defaults, we normally could have just left these instructions out. -->
<A NAME= "top_of_page"> </A>
<!-- Our anchor -->
<P><CENTER><H1>Shari Saunders: My Home Page</H1></CENTER>
<P>This is a professional page of great distinction. Thanks for visiting.
<P><CENTER><img SRC="happycomputer.gif"></CENTER>
<!-- The image -->
<HR>
<P><H2>Professional Activities</H2>
<P><OL>
<LI>Worked for CIA as undercover liaison:
<UL>
<LI>Spread disinformation re: U.S. activities
<LI> Performed online surveillance of public figures
</UL>
<LI>Worked at ice cream stand at Franklin County Fair
</OL>
<HR>
<P><H2>Contact Information:</H2>
<A HREF="mailto:[email protected]">Shari Saunders</A>
<!-- Contact information link -- to send email to the site's creator -->
<P><H2>Links You May Like:</H2>
<P> <A HREF="http://www.cia.gov/cia/ciakids/index.html">Visit the CIA Homepage for Kids!</A>
<P> <A HREF="designpageFULL.html#para7.1">Back to our previously scheduled SYW</A>
<P><A HREF="#top_of_page">To Top of Page</A>
<!-- The link to our anchor-->
</BODY>
</HTML>
