~York Adult Ed Class~
Downloading and Displaying Images
URL of this page:
http://www.oocities.org/wayne31r/webdesign/images.htm
Image tag basics
<img src="name">
Adds an image.
<img src="name" align=?>
Aligns an image: left, right, center; bottom, top, middle.
<img src="name" border=?>
Sets size of border around an image. It will generally be "zero" if you do not specify otherwise.
<img src="name" height=? width=?>
An image will always load in a browser faster if its size is specified in the tag.
To find the size of an online image in IE, right-click on it and select "properties."
To find its size in Netscape, right-click on it and select "View Image." The size will then show in the title bar.
Using images
Below is a photo that I took with my digital camera and reduced in size using an image-editing program. The name of this image is bryce1-14.jpg, and it has a file size of about 29 KB.
The code of this displayed image is:
<img src="bryce1-14.jpg" width="400" height="267">.
To the right is a single image, which is also tiled in the background as a background image.
Its code in this single image is:
<img src="reptiles.gif" width="171" height="100" align="right">
To use a graphic as a background image, its code must go in the body tag. Example:
<body style="background:url(reptiles.gif)">
To download an image directly from a Web page, place the mouse cursor over the image and right-click. Then click "Save Image As" in the menu that appears. Select the folder that you want to save the file in and choose a name for the file. Click the "Save" button.
Try this exercise:
Save the above bryce1-14.jpg image to a disk and then upload it to your site.
Display Today's Date Dynamically Using Javascript
Exercise 3:
- Today's date is .
- Use the browser's "View Source" to copy and paste the above javascript into your own page.
Source: About.com Web Design.