<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://
Styling HTML with CSS CSS was introduced together with HTML 4, to provide a better way to style HTML elements. CSS can be added to HTML in the following ways: Inline - using the style attribute in HTML elements Internal - using the <style> element in the <head> section External - using an external CSS file
Inline Styles An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:
Inline Styles <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
HTML Style Example Background Color <!DOCTYPE html> < html> < body style="background-color:yellow;"> < h2 style="background-color:red;">This is a heading</h2> < p style="background-color:green;">This is a paragraph.</p> < /body> < /html>
HTML Style Example Font, Color, and Size <!DOCTYPE html> < html> < body> < h1 style="font-family:verdana;">A heading</h1> < p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> < /body> < /html>
HTML Style Example Text Alignment <!DOCTYPE html> < html> < body> < h1 style="text-align:center;">Center-aligned heading</h1> < p>This is a paragraph.</p> < /body> < /html>
HTML <blockquote> Tag The <blockquote> tag defines a long quotation. Browsers usually indent <blockquote> elements. <blockquote> < p>Here is a long quotation here is a long quotation</p> < /blockquote>
HTML <blockquote> Tag Here comes a long quotation: <blockquote>This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.</blockquote> Notice that a browser inserts white space before and after a blockquote element. It also inserts margins for the blockquote element.
Assignment Summer Vacation Due Tuesday