Using Graphics Assignment #11
On-Campus Class
(Read Chapter 3 in the textbook and the Supplemental Notes on the
Weekly Schedule page before starting this assignment. It is fine to ask
questions from me or other classmates but read and try to figure out the
solution first)
- Save the graphic at http://www.oocities.org/tcanada1301/clouds.gif
- To save an image from the Internet, right click on the image/Save
image
- You should save this file to the same location
where you saved your index.html file for last week's assignment. (Example:
My documents folder on your harddrive or on your floppy disk)
- Using the background attribute in the <body> tag, add this as a
background image to your index.html file.
- Upload to Geocities your index.html file in addition to the clouds.gif
file
- Check your webpage to make sure the backgrounds is now clouds
- Email me when this is ready to be graded (subject: #12 background url)
-
Next, you will create a web page and save it as graphic.html
- Demonstrate that you know how to add a websafe bgcolor (background
color) by adding the bgcolor attribute to your <BODY> tag
element in the graphic.html file and change your background color to
something besides white. If it is a dark color and your text does not show
up well, you may add the text attribute to your body element.
Example:<body text="white">
- Save the horse graphic from the following website: http://www.oocities.org/tcanada1301/horse.jpg
to your
floppy disk (or the same location as the other files used for this
assignment.)
- Open your graphic.html file in Notepad.
- Write a story that would be appropriate to use with the horse graphic.
(at least 2-3 paragraphs) Be creative. The rider's name is Bob. The
horse's name is Jazz.
-
Insert the horse graphic into your graphic.html file by using the <img> tag
along with the source attribute to identify your file
- Experiment with the align attribute to experience aligning
text beside an image. The default is to have text above or below the image. I have put up a website with examples
of many of the graphic/text alignment possibilities. Click on the
"examples" hyperlink above and experiment using the different align attributes
until you decide on the alignment you like the best. Add this alignment
attribute to your image tag.
- Check your webpage for gramatical errors. Remember, you are fixing to
publish your work on the Internet.
- Find an image on the WTC website (http://wtc.cc.tx.us) and save it to your
floppy disk (or the same location as the other files used for this
assignment.)
- To save an image from the Internet, right click on the image/Save
Picture As
- Add the original WTC graphic to the bottom of your horse story in your graphic.html file.
- Add an ALT attribute in your IMAGE tag that describes the picture.
- Determine the graphics dimensions in pixels
- To locate the height and width of the graphic from
Internet Explorer, right click on the graphic and click on Properties. From
Netscape, right click on image/View image/Look in the title bar to see the
height and weight dimensions.
- Add the WTC graphic a 2nd time and scale it EITHER up or down by changing the
height and width dimensions of the original graphic. You will use the height
and width attributes to your <img> element. Be careful to preserve
the aspect ratio during the scaling. (click on the link to see
examples)
- Save your work if you haven't already as graphic.html
- upload this file in addition to all pictures you inserted to this file
to your Geocities account
- View this graphic.html webpage online to make sure everything looks
correct.
- Email me after you finish this assignment and are ready for it to be
graded.
-
Please include your URL to this assignment in the email.
(Such as: http://www.oocities.org/yourusername/graphic.html
I want it to be a clickable link in the email. This makes it much easier to access your
assignment to be graded.)
- Subject: #12 graphic url
- You may send me both urls in the same email if you prefer. Please
identify in the subject that this includes both assignments. (background
and graphics)
REMEMBER: You should not copy graphics from other people's websites without their permission. We will discuss copyright issues later in the semester.
REMINDER:
Your exam will be Tuesday, October 8. It will cover
Chapters 1-3 in the WWG textbook along with all of the Supplemental material
that I have provided along with assignments and the links on the Weekly
Schedule.
