Images can really change the look of a Web page, and it’s
pretty rare to find a page that does not use at least a few images. Images are
not actually included themselves in an HTML document. Rather, you use a tag to
tell the browser the name and location of the image file. When the browser
loads the document, it automatically retrieves the image and displays it at the
proper location on the page.
You use the
<img> tag to display the image. There is
no closing </img> tag – The information about the image is part of the
tag itself. The most basic use of the <img> tag is as follows:<img src='url' />
The
src attribute
identifies the image file. It is specified as a URL (as defined earlier in the
chapter). It’s essential that you specify the image URL correctly. If the
browser cannot locate the image file it displays a small box with a red X in
it, like this:
Specifying the Image
URL
In order to avoid the problem of broken image links on your
Web pages, you need to understand how to specify the image URL in an
<img> tag. There are two types of
URL’s you can use: relative and absolute.
A relative URL gives the location of the image file relative
to location of the HTML document that contains the tag. This is the type of
image URL you will use when the image file is on the same server as the
document =, which is almost always the case. If the image file and Web page are
in the same folder, then all you need to include is the image file name, as in
this example:
<img src=logo.gif />
The browser translates this as “the file logo.gif in the
same folder on the same server as the current document.” Keeping your HTML
documents and images together in the root folder is okay for small Website, but
a separate folder for the images (usually called images) is generally preferred.
This folder will be a subfolder of the root folder where the HTML document is
located.
For example the image located at
root/images/
Then, you would write an
<img>
tag like this:<img src='images/logo.gif' />
Another situation has the Web page and the image in separate
subfolders.
In this case, you would write the
<img> tag as follows<img> src='../images/logo.gif' />
The .. notation means “move up one folder level,” so this
URL will be translated as “move up one folder level and then down to the images
subfolder to find the file logo.gif.
Using relative URLs in
<img>
tag is common practice. You just have to be sure the URL is correct! One
disadvantage is that if you move either the Web page or the image to another
folder, you must change all the URLs to reflect the new location. This is one
reason to select a good folder structure for your Website and stick with.
An absolute URL specifies the precise location of the image
file (and the location of the Web page itself does not matter). An absolute URL
identifies the Website, the file name, and the folder (if the file is not the
site’s root folder). Here’s an example:
<img src='https://www.google.co.in/images/srpr/logo11w.png' />
You can use an absolute URL to refer to a file that is on
any Website in the world. Of course, without permission you cannot display
someone else’s images on your Web page.
Image Size Attributes
When you use a basic
<img> tag, the browser will
display the image at its “natural” size. You can see how big this is when you
preview the Web page you are working on, but you can get idea ahead of time if
you know the pixel size of the image. These simple formulae give you the
approximate “natural” size of an image.
Display width in inches = horizontal image pixels / 96
Display height in inches = vertical image pixels / 96
You can modify the display size of an image by using the
width and height attributes in the
<img>
tag. Here’s an example:<img src='logo.gif' width='160' height='140' />
This will tell the browser to display the image 160 pixels
wide and 140 pixels high. The picture will be expanded or shrinked as needed.
Note:
Maintaining the images
aspect ratio (the ratio of its width to height) is quite important. Let us see
the example below:
If you have an image
with its original size of 400 × 200 pixels, so its aspect ratio is 2:1. Now, if
you change its size to 600 × 200 pixels then aspect ratio will be 3:1. If, you
use different aspect ratio there are complete chances of image displayed as
somewhat different from original in clarity. So, it is advised to keep the
original ratio same. In this case 600 × 300 pixels size will be a nice option
giving aspect ratio 2:1 as original.
You can determine the
pixels dimensions of an image by opening it in any graphics program and using
the Image Size command, or something similar, to display the size. Windows XP
users have it even easier- simply locate the IMAGE file in Windows Explorer and
point at the file name (do not click) – a small pop up window will appear with
information about the image, including its pixels dimensions.
While you can use the
width and height attributes to display an image at a smaller than normal size,
I recommended it’s better to use a graphics program such as Adobe Photoshop or
Paint Shop Pro to make a copy of the image at size you want it and use that.
This will save download time and your users will see faster-loading pages!!
Other <img> Tag Attributes
This section describes a few other attributes of the
<img> tag that help control images
on your Web Pages. You use the alt
attribute to specify alternate text for the image. This text is displayed in
the browser if it is unable to download the image or if the person visiting
your site has images turned off.<img> tag that uses both the alt and border attributes:<img src='http://sherly.mobile9.com/download/media/295/ifyoucandr_V5KhXElM.png' border='4' alt='Rocking Life' />
The final
<img>
tag attributes is align. It is used to control the way text wraps around an
image when the <img> tag is
within a paragraph.
The
align and border tags are not supported in XHTML.
In addition they are not recommended in XHTML 4.01. The default alignment is
bottom – the image appears inline with the text at the bottom and no wrapping,
meaning that there are blank areas to the right and left of the image. You get
this result if you do not include the align attributes in the <img> tag. For aligning to the
right it can be given as align='right'.
0 comments:
Post a Comment