Images in HTML PowerPoint How images are used in HTML

Adding Images in HTML Images are defined with the 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 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: 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: image or text that will be hyperlinked - a space must be between the a & href (hyperlink reference) - the website that the image or text is leading to must be in quotes - be sure to include or everything past this tag will be hyperlinked - web addresses should be written with

Let’s Try One Open a new notepad Images Learning Images Today in class we are learning how to insert an image ______