Online-web-design-course.com 

IMAGES!

Online-web-design-course.com
HOME             RESOURCES             LESSONS             DIRECTORY             ARTICLES             FORUMS

Sponsor Links

Free Image Hosting
Your source for free image hosting - upload your images!

Poker Strategies and Tips
Poker, online poker, poker terms, poker accessories, poker tips and tricks.

Photoshop Tutorials
Over 3,000 tutorials for Photoshop, Flash and 3DS Max!

6,000 Free Fonts
Download over 6,000 Free Fonts for Mac and PC @ FontVillage.com

Buy Website Visitors
1,000 Targeted U.S. Visitors for $3.50 - 30 day guaranteed.

Reading Tarot Cards
Videochat with certified tarot readers & psychics - unlimited tarot cards readings!

Affiliate Software
Start an affiliate program and design to maximize affiliates' productivity

PPC Search Engine
Low cost advertising for your website!

Technical Service Provider
Your number one source for computer repairs and network solutions
 
LESSON 1-07-03: Sizing Images & Adding Image Borders
Google
 

Web Design Lessons > Lesson 1-07-03: Sizing Images & Adding Image Borders

Previous Lesson | Lesson Index | Next Lesson

In order to set a size to an image, we're going to use the "width" and "height" attributes of the <img> tag. These attributes are generally used to preset the size of the images in an HTML document, so that when the document is being downloaded, it doesn't change shape everytime an image loads. Modern browser actually try to find out the width and height of images lacking "width" and "height" attributes before rendering web pages in order to get around this problem, resulting in a slower download time. Therefore, Online Web Design Course recommends the use of "width" and "height" attributes with every single image you use in your HTML documents.

Sidenote: Never, ever use "width" and "height" attributes to shape or resize images. If you wish to change the size of an image, use an image editor. The "width" and "height" attributes should reflect the real width and height of your images. All of the images used in this free online web design course have their "width" and "height" attrributes set.

Setting The Width & Height

In order to set (or PREset, actually) the width and height of your images, you'll need to use the "width" and "height" attributes inside the <img> tag. Surely, you'll need to know the dimensions of your images first.

You can learn the dimensions of your images by right-clicking the image files and selecting "Properties" from the menu. The image dimensions should be written somewhere inside.

Sidenote: If you're using Windows XP, you can just hover your mouse over the image files for a few seconds and see the dimensions inside the description box that'll appear.

After you learn the dimensions of your images, you can set the "width" and "height" attributes correctly. We're going to use our horse picture again as our example. Below is the HTML code you'll have to use in order to set the dimensions of our horse image:

<html>
<head>

</head>
<body>

<img src="image.jpg" alt="The Best Free Online Web Design Course On The Web" width="300" height="225">

</body>
</html>

As you see above, the dimensions of our horse picture are 300x225. The above HTML code will create the same output as the one in web design lesson 1-07-02, but this time our image is much more browser-friendly. The output is below:

The Best Free Online Web Design Course On The Web

Bottom line is... By PREsetting the dimensions of the images you use in your HTML documents, you'll prevent your site from reshaping itself as the images get downloaded and you'll have a faster-rendering website.

Adding Image Borders

You can add borders to your images by using the "border" attribute inside your <img> tags. Image borders are an optional feature, but may sometimes come in handy as far as the design of your website is concerned. Copy the below image to your hard drive if you haven't already done so in web design lesson 1-06-02:

Now let's write down some HTML code:

<html>
<head>

</head>
<body>

<img src="bg.jpg" alt="The Best Free Online Web Design Course On The Web" width="100" height="100" border="1">

</body>
</html>

In the above HTML code, notice that we have changed the filename to "bg.jpg" to reflect the filename of the above image. We've also changed the "width" and "height" attributes to reflect its dimensions. The "border" attribute contains the value of "1", but it can be any number you choose. Let's have a look at the output:

The Best Free Online Web Design Course On The Web

Notice the thin, black border around our image? Yup, that's what the "border" attribute produces!

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

Next lesson of your free online web design course will help you understand the difference between the GIF and JPEG image formats. Let's proceed...

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

Lesson 1-05 HTML Tables
Lesson 1-06 Background Alteration
Lesson 1-07 Images
Lesson 1-07-01 Inserting images into your web pages
Lesson 1-07-02 Adding alternative text to your images
Lesson 1-07-03 Sizing images & adding image borders
Lesson 1-07-04 GIF vs JPEG
Lesson 1-07-05 The PNG format
Lesson 1-07-06 Using spacer images
Lesson 1-08 Hyperlinking
Lesson 1-09 Aligning Your Content

Back To TopWeb Design Course Top

Home  |  Resources  |  Articles  |  Lessons  |  Directory  |  Forums

Contact  |  Submit Article  |  Submit Site

Forums Archive  |  Site Map

Copyright© 2004 Onur Özcan. All Rights Reserved.

Long Distance Phone Service
Online-web-design-course.com

You must set the "ad_network_ads.txt" file to be writable.


 
Partner Links