Your SlideShare is downloading. ×
Andy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMG
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Andy Garcia- Presentation:IMG

142

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
142
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Hello Class my name is Andy Garcia and today I will be teaching you how to use the img tag to place images into your web page.
  • Images have many functions on a web page. They can be used to indicate the website the viewer is on, such as a logo. It can be used to provide a visual to context on the page. Or to just add some to make the page look fun and cool!
  • .
  • In order to place an image into your web page, you will need to use this html code. Let’s break down the different tags used in this code to generate an image on your web page.First img.Img: Tells the browser that there is an image in the html document.src: is the source where the image will come from, this is where you would put the wed address of the image.alt: Sometimes the person viewing your page may not be able to view the image, this alternative description gives the viewer a description of the image.The tag can be used alone in a text editor, when you open the code in browser you will see the stand alone image.Notice that the img tag is not close again with the img hash tag, just once with a hash tag.
  • First lets get out code into the text editor, if you put the code into note pad, you will be able to save it as a index.html and open it as a web page later.
  • Now lets browse the internet to find an image, I searched for a Korean Girl band called After School.Since I use a PC I right click the image and copy the image url.
  • Paste the url into the first set of quotes, which will generate the image in the html code. In the second set of quotes put a description of the image. I put After School as the title.Finally Save the code and see what the image looks like on your web page!
  • And there you have it! The img tag in action! I hope you all learned how to use this tag and how useful it will be for you as you progress in your web design skills. Please ask me for help if you ever need it!
  • Transcript

    • 1. Web Design 2830 How to use the HTML tag IMG By Andy Garcia
    • 2. Why put images on your webpage?
    • 3. The Code<img src="website.jpg " alt="Image name " />
    • 4. The Code<img src="website.jpg " alt="Image name " />Img: Tells the browser that there is an image in the htmldocument.
    • 5. The Code<img src="website.jpg " alt="Image name " />Img: Tells the browser that there is an image in the htmldocument.src: is the source where the image will come from, this is whereyou would put the wed address of the image.
    • 6. The Code<img src="website.jpg " alt="Image name " />Img: Tells the browser that there is an image in the htmldocument.src: is the source where the image will come from, this is whereyou would put the wed address of the image.alt: Sometimes the person viewing your page may not be able toview the image, this alternative description gives the viewer adescription of the image.
    • 7. How do I use this code?• First lets get the code into a text editor.
    • 8. How do I use this code?• Browse the internet and copy the image url.
    • 9. How do I use this code?• Paste the url into the first set of quotes in the code.

    ×