Chapter 3

Adding Images in HTML

Agenda• Understanding Web Page Images • Prepare Your Images for the Web • Insert an Image • Specify an Image Size • Add Alternative Text • Create an Image Label • Add Copyright Text to Images • Align an Image Horizontally • Align an Image Vertically • Center an Image • Wrap Text Between Images • Stop Text Wrap • Set an Image Border • Add Space Around an Image • Add a Background Image • Create an Image Banner

Understanding Web Page Images

• You can currently use only three image file formats on the Web: GIF, JPG, and PNG– A new format, SVG, is not yet in common use

• These formats all compress images to create smaller files– Knowing which file format to use for which type of image

is important

• If you choose the wrong file type, your image won’t compress or display properly

GIF (Graphics Interchange Format)• GIF uses a lossless compression technique,

meaning that no color information is discarded when the image is compressed

• The color depth of GIF is 8-bit, allowing a palette of no more than 256 colors

• GIF excels at compressing and displaying flat color areas, making it the logical choice for line art and color graphics

GIF Transparency• With GIF files, you can choose any one color in an

image to appear as transparent in the browser• The background color or pattern will show

through the areas that you have designated as transparent

• Using transparent areas allows you to create graphics that appear to have an irregular outside shape, rather than being bounded by a rectangle

Transparent and nontransparent GIFs

GIF Animation

• The GIF format lets you store multiple images and timing information about the images in a single file

• This means that you can build animations consisting of multiple static images that play continuously, creating the illusion of motion

JPG or JPEG (Joint Photographic Experts Group)

• JPG is best for photographs or continuous tone images

• JPGs are 24-bit RGB images that allow millions of colors

• JPGs use a “lossy” compression routine especially designed for photographic images– When the image is compressed, some color

information is discarded, resulting in a loss of quality from the original image

JPG (continued) • When you create the JPG file, you can also

manually balance the amount of compression versus the resulting image quality

• The higher the compression, the lower the image quality– You can play with this setting to create files that are as

small as possible but still look good

• Many photos can sustain quite a bit of compression while still maintaining image integrity

PNG (Portable Network Graphics)

• A royalty-free file format that is intended to replace GIF

• This lossless format compresses 8-bit images to smaller file sizes than GIF

• PNG supports transparency and interlacing but not animation

SVG (Scalable vector graphics)

• A new standard from the W3C• A language for describing two-dimensional

graphics using XML• SVG graphics are scalable to different display

resolutions and are printable• Not yet supported by most browsers

Insert an Image • The <img> tag defines an image in an HTML

page.• The <img> tag has two required attributes: src

and alt.• Note: Images are not technically inserted into

an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

• Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.

Image Attributes and ValuesAttribute Value Description

align

topbottommiddleleftright

Specifies the alignment of an image according to surrounding elements

alt text Specifies an alternate text for an image

border pixels Specifies the width of the border around an image

height pixels Specifies the height of an image

hspace pixels Specifies the whitespace on left and right side of an image

src URL Specifies the URL of an image

vspace pixels Specifies the whitespace on top and bottom of an image

width pixels Specifies the width of an image

title text Specifies a LABEL for an image

<img src="balloons_sm.jpg" width="200" height="267" alt="Hot Air Balloon image" border="0" title="Up, up and away in a hot air balloon"/>

Example of Image tag

Add Copyright Text to Images

• Type &copy; to create the copyright symbol.<IMG src=“image1.jpg”><br>&copy; 2013 Khawarizmi College , All rights reserved.

• In this example, a line break tag• (<BR>) puts the copyright text on a new line.• The copyright text appears in the browser

window.

Center an Image • Click before the <IMG> tag and• type <DIV>.• Click inside the <DIV> tag and type

ALIGN=”center”.• Click after the closing bracket of• the <IMG> tag and type </DIV>.• The image appears centered on the Web page.Example<div align=“center”> <img src=“img1.jpg></div>

Stop Text Wrap • Click where you want to end thetext wrap and type <BR CLEAR=”?”>, replacing ? With the margin you want to clear, either left, right, or all.• The text wrapping ends at the selected point

on the page.• In this example, the next• paragraph starts on a different• line from the images.

Add a Background Image

Click inside the <BODY> tag and type BACKGROUND=”?”, replacing ? with the path to the image file you want to use.The Web browser displays the image as the page background.Example: <body background=“image1.jpg”>

Create an Image Banner

• At the top of the page, before any body text, type <IMG SRC=”?”>, replacing ? with the path to the banner file you want to use.

• Type WIDTH=”? ” within the <IMG> tag, replacing ? with a value in pixels.

• Type HEIGHT=”? ” within the <IMG> tag, replacing ? with a value in pixels.

• The Web browser displays the image as a banner at the top of the page.

• Example: <img src=“img1.gif” width=“468” height=“60”><BR>

Lab3Write a code in HTML to achieve the following tasks:• Insert an Image • Specify an Image Size • Add Alternative Text • Create an Image Label • Add Copyright Text to Images • Align an Image Horizontally • Align an Image Vertically • Center an Image • Wrap Text Between Images • Stop Text Wrap • Set an Image Border • Add Space Around an Image • Add a Background Image • Create an Image Banner