1. INSERTING IMAGES IN HTML
Presentation by Nobel Mujuji BSc. Hon Information Systems (WUA)
2. INTRODUCTION
This tutorial will show how to add images to your pages.
image elements
img tag is used to put an image in an HTML document
src 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 (
3. 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.
4. 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.
6. 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”>
7. 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.
8. HTML Image Link Code:
<a href="http://www.facebook.com" target="_blank">
<img src="ahman.gif" />
</a>
