1. Open the index.html Open this PowerPoint from the S Drive IDT folder Chapman Images.ppt

2. Images You can add images that have been downloaded to the images folder or link to an image on a webpage. This is the Image tag to insert an image that is located in the images folder. Just look at it. Now go to the W3Schools website below and try out the exercise. Go to the following website and click try it to observe the code. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_image_test Try it Change the width and height amounts in the code. Did the size of the image change?

3. DO: Copy the smiley face image to your images folder. From this website right click on the smiley face image. Save as AND PLACE in the images folder in your portfolio. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_imag e_test http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_imag e_test Then go to the next slide.

4. Open the index.html file Place the code below after the comment that is in your index.html notepad doc. Save and run in chrome. Do you see the smiley face? If so go to the next slide. If not let someone know or go back and look over the instructions.

5. Choose your own banner Now go and find a banner that you want for your web page. I choose this one. Follow the same instructions to place the banner on your webpage. (Delete the smiley face).

6. Go to Unit 3 Type the following between the paragraph tags. Then after the insert the image tag to insert an image from your directory. You can choose any image you want that is appropriate.

7. Use a link to an image on a webpage go to the website below. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_image Try it. This is the tag used to link an image to a web page. Just look at it and go to the next slide.

8. Go to Unit 4 in your index.html doc. Type the following between the tag for Unit 4 This is how you link to an image on the web After the ending tag paste the link below: Save and run in Chrome. Do you see the smiley image.

9. Now go and find an image of you choosing. When you find the image. Right click on the image: Click on copy the URL. Go to the index.html doc and find the tag you just pasted. Highlight the part in red in the code and paste the URL you copied from the webpage. It might be long. Save and run. Do you see the image?