| Week 6 - Images and Graphics  | Text on a Web page is fine, and as they say, "content is king", but it sure is boring. This week, we'll learn how to add images to your Web page. Be sure to follow every lesson link. There are many parts to this week's topic, and they'll all be part of the exam. Note: if you didn't receive the previous weeks you can always pick up missed lessons online at: http://webdesign.about.com/c/ec/9lost.htm You can also get the lessons more quickly if you'd like. | |
| Syllabus |
Week 6
- Images
- Finding Images
- Making Images Download Quickly
- Homework
|
|
| Images |
Image Types
There are many different formats of images on computers. But there are only 3 that work in all WEb pages. It's important that you know the different types of Web images as well as how to decide which type to use.
|
Adding Your First Image
When you add an image in HTML, you use the <img> tag. As this article indicates, there are only 2 attributes that are required to add an image, and 2 others that are recommended. A basic image tag looks like this: <img src="imagename.gif" alt="image alternate text" />
|
Image Tag Attributes
There are only 2 attributes that are required to write a valid image: alt and src. But the image tag has a lot of other attributes that can make your images more effective.
|
Posting Your Images
The reason images are so tricky for the novice Web designer is because they aren't attached to the HTML - the HTML acts as a pointer to another file. And in order for that file to be visible, you have to upload it to your Web server. One thing you should be aware of when putting images on your site is where the images will be located. The two easiest ways to write the source (src) of your image is to use the full URL of the image after it's uploaded. Or to put the image in the same directory as the HTML file and use a relative path to the image. Learn more about absolute and relative paths here: http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm
|
| Finding Images |
Free Graphics
Free Graphics are a great way to add images to your Web site. There are lots of clip art sites that offer free images for personal use. Remember: Just because an image is on the Web doesn't mean that it's free. Copyright laws still apply. If you can't find information saying that an image is free to use don't use it. If you have questions about copyright and the Web, review my article on Copyright and Web Sites: http://webdesign.about.com/od/copyright/a/aa081700a.htm Put Scanned Photos on a Web Site
The best and most personal way to get images on your Web site is to take them yourself. If you don't have a digital camera, you'll need a scanner to scan your photos and a graphics software tool to resize them. I use an inexpensive Canon flatbed scanner and Photoshop Elements works great for most photo resizing needs.
|
| Making Images Download Quickly |
Web Images Should be Small
I don't mean small in dimensions, I mean small in file size. Large images are the number one cause of slow downloading Web pages. And slow Web pages are the number one frustration of customers. The tricks to small images are: - Use the right format - GIF for clip art and JPG for photos
- Crop the images - only display what needs to be displayed
- Resize the images - don't use the HTML width and height attributes to resize them, do it in a graphics tool
More Tips for Optimizing Images
|
| Homework |
Practice What You've Learned
|
0 comments:
Post a Comment