HOW TO ADD IMAGES IN WEB PAGES
Adding images to your web pages is always been interesting .A webpage withoutany image looks very dull and boring. Nothing conveys a message better than the combination of a properly formatted text supporting set of images.Images can be used in
a number of ways on a web page such as displaying photographs,drawings,logos,banners,products of the company,maps and charts etc.
HTML provides an easier way to mix text and images on a webpage.
IMAGE FORMATS
GIF(Graphic interchange format)
This format of image uses lossless compression technique.Supports 8 bit colors
Supported by all the browsers
Suitable for text,artwork,icons and cartoons
Larger files size
Extension is .gif
JPEG(Joint photographic experts group)
This format of image uses lossy compression technique.Supports 24-bit colors
Supported by all browsers
Suitable for photographs
Smaller file size as compared to GIF
Extension used is .jpg or .jpeg
PNG(Portable network graphics)
This format of image uses lossless compression techniqueSupports 24-bit colors
Not supported by all browsers
Suitable for text,icons etc
Smaller file size as compared to GIF and JPEG
Extension is .png
IMAGE TAG
The simplest way to place an image in web designing on the webpage is to use <img>tag. Src is also used with image tag which stands for source in web designing.
<img src>
Image tag is not a paired tag so it is optional to use end tag we just close it with (/).
In image tag we mention the path or location of image where it is located and its name
with extension .jpg
<img src=”location\name.jpg”>
ATTRIBUTES OF IMAGE TAG
ALT ATTRIBUTEAlt means alternate text. This attribute is used to give short description about image
or we can say to give an alternative name to image which can be easily recognisable..
HEIGHT AND WIDTH ATTRIBUTE
By using these attributes we can set the height and width of the image according to
our needs.
<IMG SRC= “URL” ALT=” NAME” HEIGHT=”300” WIDTH=”500”/>
HERE IS AN EXAMPLE OF ADDING AN IMAGE TAG TO YOUR CODE
<html>
<head>
<title>
image
</title>
</head>
<body>
<img src="C:\Users\Diksha\Downloads\dewdrops-flora-flower-56866.jpg"height="500"width="600"/>
</body>
</html>
For location of image go to properties of images and copy its name and location
from there. Now by running this code image will be displayed in browser.
ALIGN ATTRIBUTE
After an image is inserted in your webpage,you can determine how image should
be placed in relation to other content of the web page.by default in web designing,an
image is placed by the browser where it is parsed and any text following the image will appear to the right bottom edge of the image.we can change this alignment using align attribute.
EXAMPLE OF USING ALIGN TAG
<IMG SRC=”URL” ALIGN=”VALUE”>
AT SPOT OF VALUE WE CAN ADD:-
TOP:Align the top of image with the top of tallest element on same line
MIDDLE:Align the middle of image with the middle of surrounding text
BOTTOM:Align the bottom of image with the bottom of surrounding text
LEFT:Places an image on the left side of browser window with text wrapped around
the left side of image
RIGHT:Places an image on the right side of browser window with text wrapped around
the right side of image
0 comments:
Post a Comment