Images in HTML PowerPoint How images are used in HTML.
7
<html> <head> <title> Images in HTML PowerPoint </title> </head> <body> How images are used in HTML </body> </html>
-
Upload
marcia-johnston -
Category
Documents
-
view
217 -
download
0
Transcript of Images in HTML PowerPoint How images are used in HTML.
<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:<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 (hyperlink reference)- 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://
Let’s Try One• Open a new notepad• <html>• <head><title>Images</title></head>• <body>• <h1>Learning Images</h1>• <p>Today in class we are learning how to
insert an image</p>• < img src=“______.____” />• <a href: “___________.com”>______</a>
