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 tag defines an image in an HTML page. The 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 tag creates a holding space for the referenced image. Tip: To link an image to another document, simply nest the tag inside tags.

Image Attributes and Values AttributeValueDescription align top bottom middle left right Specifies the alignment of an image according to surrounding elements alttextSpecifies an alternate text for an image borderpixelsSpecifies the width of the border around an image heightpixelsSpecifies the height of an image hspacepixelsSpecifies the whitespace on left and right side of an image srcURLSpecifies the URL of an image vspacepixelsSpecifies the whitespace on top and bottom of an image widthpixelsSpecifies the width of an image titletextSpecifies a LABEL for an image

Example of Image tag

Add Copyright Text to Images Type © to create the copyright symbol. © 2013 Khawarizmi College, All rights reserved. In this example, a line break tag ( ) puts the copyright text on a new line. The copyright text appears in the browser window.

Center an Image Click before the tag and type. Click inside the tag and type ALIGN=”center”. Click after the closing bracket of the tag and type. The image appears centered on the Web page. Example

Stop Text Wrap Click where you want to end the text wrap and type, 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 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:

Create an Image Banner At the top of the page, before any body text, type, replacing ? with the path to the banner file you want to use. Type WIDTH=”? ” within the tag, replacing ? with a value in pixels. Type HEIGHT=”? ” within the tag, replacing ? with a value in pixels. The Web browser displays the image as a banner at the top of the page. Example:

Lab3 Write 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