IMAGE DIMENSIONS AND SCALING

Two attributes of the <img> tag, height and width, specify the height and width of the image in pixels. Both became part of the HTML 3.2 specification, but they’re deprecated in HTML 4.011 in favor of style sheets.

If you use the actual height and width of the image in these attributes (which you find by opening the image file directly in your browser), some older browsers will load and display your web pages much faster than if you don’t include the values.

Why? Old browsers (Netscape 4 and internet Explorer3) couldn’t alder the layout of pages as they were being loaded, so the size of every element on the page bad to be determined before the page could be displayed. These days, browsers can resize elements on the fly so users don’t have to wait for images to download before the page can be displayed. Even so, providing the proper height and width can help your pages render a bit more smoothly, so you should still include them if possible.

TIP

Not only will browsers usually tell you the size of any image you open (in the title bar of the browser window). Just about any application that lets you view or edit image files will display the dimensions of an image as well.

If the values forbid than height are different from the actual width and hight of the image, your browser will resize the image to fit those dimensions. Because smaller images take unless disk space than larger images and therefore take less time to transfer over the network, you can just create a smaller version and then scale it to the dimension you want on your web page. The downside of this technique ist hat the image scaling algorithms built into browsers are not always the best  If you use the height and width attributes to change the size of an image, be prepared for it to look pretty bad, especially if the aspect ratio is not preserved (in other words, you take a 100-by -100 pixel image and expand it into a 200-by-400 pixel image).

CAUTION

OUTPUT: FIGURE: 7.10 THE UPPER EXAMPLE DOESN’T HAVE IMAGE SPACING, AND THE LOWER EXAMPLE DOES.

OUTPUT:

FIGURE: 7.10 THE UPPER EXAMPLE DOESN’T HAVE IMAGE SPACING, AND THE LOWER EXAMPLE DOES.

NOTE

With cascading style sheets, you can control image borders, space included around images, and how text flows around images. You can also use CSS to control the properties of elements of all kinds, so I’m going to cover them in lesson 7 

IMAGES AND LINKS 

Can an image serve as a link? Sure it can! If you include an <img> tag inside a link tag (<a>), that image serves as a ink itself:

IMAGE AND LINKS

Can an image serve as link? Sure it can! If you include an <img> tag inside a link tag (<a>), that image serves as  link itself:

<a href =”index. Html”> <img src =”uparrow. Gif” alt = “up” /></a>

TIP

IMAGES ON THE WEB

  Images displayed on the web should be converted to one of the formats supported by most browsers: GIR. JPEG, of PNG, GIF and JPEG are the popular standards, and every response to some patent issues with the GIF format. IT’s superior to GIF in almost every respect, but old prowess doesn’t support it. Many other image formats are supported by some browsers and not others. You should avoid them.

Let’s assume that you already have an image you want to put on your web page. How do you get it into GIF or JPEG format so it can be viewed on your page? More image edit – king programs, such as Adobe Photoshop (http://www.adobe;com/), paint shop pro (http://www.jasc. Com/),and CorelDraw (http://www.corelcom/), will convert images to most of the popular formats. You might have to look under the option for save as or export of find the conversion option. There are also freeware and shareware programs for most platforms that do nothing but convert between image formats. Many shareware and demo versions of image editing programs are available at http;///ww.download. com /(search poor “image editors” using the software platform of your choice).

TIP

If you’re a windows user, you can download irafanview, which allows you to view images, and convert them to various formats, at http://www.infanview. Com/. It also provides a number of other image manipulation features that are useful for working with images for the web. Best of all, it’s free for non-commercial use.

To save files in GIF format, look for an option called CompuServe GIF,gif87, GIF89a, or just plain GIF. Any of them will work. If you’re saving your files as JPEG, usually the option will simply be 

JPEG.

Remember how your HTML files have to have an. Html or. Html extension to work properly? Image files have extensions too. For GIF files, the extension is. Gif. For JPEG files, the extensions are. Jpg and .jpeg.

NOTE

DO DON’T TIP

 Do design your pages so that they work in most browser.

Do focus on clear, well-structured content that’s easy to read and understand.

DON’T

Don’t design your pages base on what they look like on your computer system and on your browser.

Throughout this book, I’ll show you examples of HTML code and what they look like when displayed. In examples in which browsers display code very differently, I’ll give you a comparison of how a snippet of code looks in tow very different browses. Through these examples, you’ll get an idea for how different the same page can look from browser to browser.

TIP

Although this rule of designing by structure and not by appearance is the way to produce good HTML, when you surf the web, you might be surprised that the vast majority of websites seem to have been designed with appearance in mind-usually appearance in a particular browser such as Microsoft internet explorer. Don’t be swayed by these designs. If you stick to the rules I suggest, in the end, you web pages and websites will be even more successful. Simply because more people can easily read and use them.