Images ADDING IMAGES USING THE IMG ELEMENT Images

Images

ADDING IMAGES USING THE <IMG> ELEMENT

Images are added to a site using the < img > element, which has to carry at least two attributes: src: alt: indicating the source of the image provides a description of the image Example, the following line would add the image called logo. gif into the page < img src=”logo. gif” alt=”Wrox logo” / > Prepared by: Ma'am Daisy 3

The src attribute tells the browser where (url or location) to find the image URL and the URL can be an absolute URL or a relative URL. Example: < img src=”logo. gif” / > Prepared by: Ma'am Daisy 4

Images for your site should always reside on It is not good practice to link to images on other sites your server Most web page authors create a separate directory (or folder) in the web site for images Prepared by: Ma'am Daisy 5

The alt attribute must appear on every <img> element and its value should be a text description of the image. < img src=”logo. gif” alt=”Wrox logo” / > Prepared by: Ma'am Daisy 6

The alt attribute Often referred to as alt text it is important that the value of this attribute really describe the image because: If the browser cannot display the image, this text alternative will be shown instead Web users with visual impairments often use software called a screen reader to read a page to them, in which case the alt text describes the image they cannot see While search engines are very clever, they cannot yet describe or index the contents of an image; therefore, providing a text alternative helps search engines index your pages and helps visitors find your site. Prepared by: Ma'am Daisy 7

The height and the width attribute The height and width attributes specify the height and width of the image, and the values for these attributes are almost always shown in pixels. <img src=”logo. gif” alt=”Wrox Logo” height=” 120” width=” 180” /> Prepared by: Ma'am Daisy 8

The height and the width attribute The values of these attributes can be a percentage of the browser screen Or if the image is inside an element that takes up only part of the page, known as a containing element , then it would be a percentage of the containing element. If you do use a percentage, the number will be followed by a percent sign Prepared by: Ma'am Daisy 9

The height and the width attribute Specifying the size of the image is considered good practice It also helps a page to load faster and more smoothly, because the browser knows how much space to allocate to the image and it can correctly render the rest of the page while the image is still loading Prepared by: Ma'am Daisy 10

The height and the width attribute While you can tell the browser to display images smaller or larger than they really are you should avoid doing this because your image will not be as clear Rather, you should aim to create versions of images at the same size that you will use them on your web pages Programs such as Photoshop, Photoshop Elements, Paint Shop Pro, or GIMP will help you do this Prepared by: Ma'am Daisy 11

The height and the width attribute It is also important not to use images that are bigger than they are shown on screen because the smaller an image, the smaller the size of the file The smaller the file size, the quicker the image loads in the browser Prepared by: Ma'am Daisy 12

The height and the width attribute Likewise, it is important not to show images larger than they really are because it would appear grainy. While it is not a good idea to do so, if you just specify the height or width attribute and leave out the other one, your browser will show the image to scale. It maintains the aspect ratio of an image (its width divided by its height). Prepared by: Ma'am Daisy 13

Example – insert image to html document Prepared by: Ma'am Daisy 14

The height and the width attribute • Example : <p> Fixed size: width 130 height 130 </p> <img src=”images/apple. jpg” alt=”Photo of red apple” width=” 130” height=” 130” /> <p> Enlarged: width 160 (no height specified) </p> <img src=”images/apple. jpg” alt=”Photo of red apple” width=” 160” /> <p> Stretched: width 80 height 150 </p> <img src=”images/apple. jpg” alt=”Photo of red apple” width=” 80” height=” 150” /> Prepared by: Ma'am Daisy 15

The align Attribute (Deprecated) was created to align an image within the page (or if the image is inside an element that is smaller than the full page, it aligns the image within that element). The align attribute was particularly used by authors who wanted text to flow around an image; Prepared by: Ma'am Daisy 16

Example – aligning image Prepared by: Ma'am Daisy 17

ACTIVITY 6