<html> <head> <title> Images in HTML PowerPoint </title> </head> <body> How images are used in HTML </body> </html>
Adding Images in HTML Images are defined with the <img> tag Image tags do not have closing tags The src tag must be included; src stands for “source” and this references the URL of the picture The alt tag is optional but recommended; alt stands for alternative text & is used to provide short descriptive info for an image if the user can not view the image
Adding Images in HTML Cont. Only 3 types of images are displayed by all browsers .jpg .gif .png The browser displays the image where you place the <img> tag. Example: If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. **There are some very important differences between these file types but we will discuss those at a later date.**
Adding Images in HTML Cont. For images embedded with text, images can “float” with the text. The align tag can be added to the img tag to make the image either align left or right Images can be resized using HTML tags but it is good practice to keep the picture proportional (this is done to avoid “stretching” of pictures) Height & Width can be added to the tag to resize the image
Adding Images - REVIEW Code View: Browser View: <img src=“car.gif” alt=“green racecar” height=“95” width=“151” align=“right”> Browser View: NOTE: Alternative text is shown when the cursor is placed over the object
Hyperlinking Images & Text in HTML Both text and images can be linked to other pages or images via the hyperlink tag Example: <a href=“http://www.google.com”>image or text that will be hyperlinked </a> - a space must be between the a & href - the website that the image or text is leading to must be in quotes - be sure to include </a> or everything past this tag will be hyperlinked - web addresses should be written with http://