Imagesppt 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 ID: 739157
Download Presentation The PPT/PDF document "Open the index.html Open this PowerPoin..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Open the index.html
Open this PowerPoint from the S Drive IDT folder Chapman
Images.pptSlide2
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.
<
img
src
=“/images/smiley.gif" alt="Smiley face" width="42" height="42">
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? Slide3
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_image_testThen go to the next slide. Slide4
Open the index.html file
Place the code below after the comment that is in
your index.html
notepad doc.
<body><!-- The content of your web page will go here --><img
src
=“
images/
smiley.gif" alt="Smiley face" width="42" height="42">
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. Slide5
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) . Slide6
Go to Unit 3
Type the following between the paragraph tags. Then after the </p> insert the image tag to insert an image from your directory. You can choose any image you want that is appropriate. Slide7
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.
<a href
="default.asp">
<
img
src
="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>Slide8
Go to Unit 4 in your index.html doc.
Type the following between the <p> </p> tag for Unit 4
This is how you link to an image on the web
After the ending </p> tag paste the link below:
<a href="default.asp">
<
img
src
="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Save and run in Chrome. Do you see the smiley image. Slide9
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.
<a
href
="default.asp"><img
src
="
smiley.gif
" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
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?