There are many more things that you can do with webpages than we will discuss here. However, one topic is essential for most people: pictures.
There are copyright laws to worry about here. Some pictures that you see on the web are in the public domain. Some, however, are copyright. It's illegal to use those. In this demo, we will images that I made for this purpose and which I hereby give you permission to use for practice purposes. (Needless to say, if you use them for commercial purposes, then given their obvious and undeniable artistic merit, I will have to object.)
In addition to getting pictures from the web (about which more below) you can scan pictures. If anyone needs to do this, let me know and I can arrange for you to use our scanner.
Here is an image:
The tag looks like this:
<img src="blozzum.jpeg"><p>Notice: the main part of the tag is the "word" img, which, of course, stands for "image." The "word" src modifies the tag by telling the browser the source -- where to look for the image, and what image to look for. And the information about the source is in quotes. Because the image is in my own set of files, I simply use its name. If it were at another web site, I would give a full-blown URL. But we will not worry about that for now.
Notice also: I put a "<p>" tag after the image. If I had not done so, the text would simply have begun at the bottom of the image, as though the image were a very big letter. Usually, you don't want that, so usually, you want to add a paragraph or break tag after the image.
How do you get an image into your own account?
There are several ways, but the first step is to get the image onto your own computer (or the computer in the WAM lab.) This is very easy. On a PC, right-click on the image. You wil be given the option of saving it. Save it on your hard drive, with an appropriate name. ("Appropriate" means no spaces and ending with either "jpg" or "jpeg" if the original filename ends that way, or with "gif" if the original filename ends that way.) If you are on a MAC, simply click on the image and hold the mouse button down. Then proced as above.
Once the image is on your desktop, you can move it to your own WAM account. There are several ways to do this. First, you can use an ftp program of some sort. I will describe three versions of this procedure.
If you are working in a wam lab, the programs you need should be on the computer you are using. Otherwise, point your web browser to
http://www.inform.umd.edu/CompRes/H+S/
and click on the "Software Library" link to download what you need. (NOTE: you won't be able to download unless you have logged on via the University's dial-up number.) If you are on a PC, use either of the following two programs: WSFTP or Rapidfile. On a Mac, use Fetch. Any of these programs (menu driven; reasonably intuitive but not all to be explained separately here) willl let you log into your WAM acount. Once in your wam account, you can, with a PC, drag the image file from your hard drive to your account. If you are on a Mac using Fetch, use the "put" command. Fetch is not as easy to use as Rapidfiler of WSFTP, but it is still pretty easy. However you may want to go to a WAM lab when there is someone there who can help you with whichever program you need, or pick a time when we can spend five minutes together in the computer lab.
A warning about Fetch. It has a tendency to cut the bottom portion of images off in transmission. I have no idea why.
Another option: if you use aol or netscape or Eudora or some program that lets you attach files to your email, send the image to your own WAM account. Then, when in your WAM account, open the piece of mail and hit "V" to see the list of attachments. Pick the one with the picture. Hit "S" to save it in a file, naming it whatever is appropriate. Then use "E" to get out of the attachment viewer. (All of this is explained by on-screen prompts.) Then quite PINE. Supposing your image is called "picture.jpeg," do this at the prompt: type
mv picture.jpeg ../pub/picture.jpegThis puts the picture file into your public directory. If you want to name it something other than the name you saved it under, change the name after "pub/".
Doing things with images.
Images can be centered. Simply use the <center> and </center> tags, as you would with text.
Images can be put cheek-by-jowl with text. Notice that this bit of text starts at the top of the image, which is on the left side of the browser window, and continues on down, rather like the sorts of things you sometimes see in books or newspaper columns. The secret is to modify the basic tag with an "align=left" command. The tag, in this case, reads:
<img src="blozzum.jpeg" align=left>If we had written
<img src="blozzum.jpeg" align=left>the image would be on the other side of the browser window.
There are other tag modifications we could also use, including "center," but -- as you may find if you try that one -- you probably won't like the results.
There is one consideration to keep in mind if you align text with images. You have no control -- or very little -- over where the text will leave the image when viewed on someone else's browser, It all depends on things like screen resolution and their choice of default font. So use this trick only if you have enough text to make it work properly. Typically, images are used in this way at the beginning of a document that is largely text.
Images as Links.
It is possible to use an image as a link. Here is an example:
The HTML code here was
<a href="link.html"><img src="go.jpeg"></a>As you can see, we simply put the image where text might otherwise go. You would, of course, put the URL you need in place of "link.html." But notice: there is no "http://" in the link above. The reason it that it is a link to another file in my own directory. The same is true for the main page for the class. Each link is simply to another file in the same directory.
In making your web page, you should ask yourself whether your information might best be broken up into separate files. If so, create each file in exactly the way you created your "index.html" file. But give each file a different name. Any name will do, so long as there are no breaks. I would advise ending the name with "htm" or with "html."
You may have noticed that the image link above has a border arouund it. That's what happens by default when you use images as links. You can get rid of the border around an image link by using the "border" attribute. The code for the following link
is
<a href="link.html"><img src="go.jpeg" border=0></a>Getting rid of a border is often useful when the background of your image is the same color as the background of your page, as in this case:
This button is surely more effective, paltry though its stock of virtue may be, if it has no border:
There is much more that we could say about images, let alone about the web. But this will do for now. Remember that you can get help by calling 301-405-1500, the OITS hotline on campus.
-Allen Stairs
stairs@glue.umd.edu
