Embed Size (px)
Citation preview
INSERTING IMAGES IN HTML
Presentation by Nobel Mujuji BSc. Hon Information Systems (WUA)
INTRODUCTION
This tutorial will show how to add images to your pages.image elementsimg tag is used to put an image in an HTML documentsrc attribute tells the browser where to find the image.The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.the alt attribute is the alternative description. This is an accessibility consideration, providing meaningful information for users who are unable to see the image (
Image formats
JPEG is short for Joint Photographic Experts Group, and is the most popular among the image formats used on the web.
GIF, short for Graphics Interchange Format, is limited to the 8 bit palette with only 256 colors. GIF is still a popular image format on the internet because image size is relatively small compared to other image compression types.BMP files are image files within the Microsoft Windows operating system. In fact, it was at one point one of the few image formats. These files are large and uncompressed, but the images are rich in color, high in quality, simple and compatible in all Windows OS and programs. BMP files are also called raster or paint images.
TIFF was created by Aldus for ‘desktop publishing’, and by 2009 it was transferred to the control of Adobe Systems. TIFF is popular among common users, but has gained recognition in the graphic design, publishing and photography industry. It is also popular among Apple users.
PNG or (Portable Network Graphics) is a recently introduced format, so not everyone familiar with it. But PNG has been approved as a standard since 1996. It is an image format specifically designed for the web. PNG is, in all aspects, the superior version of the GIF. Just like the GIF format, the PNG is saved with 256 colors maximum but it saves the color information more efficiently. It also supports an 8 bit transparency.
Image attribute
1. Width 2. Height3. Align4. Border 5. Alt
Inserting an image background
<body background=“jellyfish.jpg”>
Inserting an image on top of an image background<img src=“tulips.jpg” width=“400 height=300 ” align=“Right” border=“10”>
html - image links
• Image links are constructed as you might expect, by embedding an <img> tag inside of an anchor element <a>. Like HTML text links, image links require opening and closing anchor tags, but instead of placing text between these opening and closing tags, the developer needs to place an image tag -- with a valid source attribute value of course.
HTML Image Link Code:
<a href="http://www.facebook.com" target="_blank"> <img src="ahman.gif" /></a>
