M02 un07 p01

343 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
343
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

M02 un07 p01

  1. 1. Unit 7 – Images Presentation 1 Web Programming
  2. 2. Revision <ul><li>1. Define Hyperlink ? </li></ul><ul><li>2. Name the two types of Hyperlinks ? </li></ul><ul><li>3. Name the tag and its attribute used to create a Link ? </li></ul><ul><li>4. How will you change the colour of the Hyperlinks? </li></ul><ul><li>5. Write the use of Target attribute. </li></ul>
  3. 3. Objectives <ul><li>At the end of this presentation, you will be able to </li></ul><ul><li>Insert images into your Web page </li></ul><ul><li>Format the Images </li></ul>
  4. 4. Hands-On! <ul><li>Open the HTML file Image.html in C:HTMLUnit7Hands On Folder in Internet Explorer. </li></ul><ul><li>This HTML document illustrates how to insert images in a Webpage. </li></ul>
  5. 5. Image Tag <ul><li>Images can be inserted into a Web page using <IMG> tag. </li></ul><ul><li>Src attribute to specify the image to be displayed. </li></ul><ul><li>Example: </li></ul><ul><li><IMG Src=”Pinakki.gif”> </li></ul>
  6. 6. Formatting Images <ul><li>Image can be formatted using the attributes of <IMG> tag. </li></ul><ul><li>These attributes are explained in the Table shown in the next slide. </li></ul>
  7. 7. Formatting Images
  8. 8. Lab Exercise <ul><li>Open D7_1.html in Internet Explorer. </li></ul><ul><ul><li>Identify the tag which is used to insert the image in source code D7_1.html. </li></ul></ul><ul><ul><li>Name the attributes which are used in source code D7_1.html. </li></ul></ul>
  9. 9. Lab Exercise <ul><li>2. Open D7_1.html in Internet Explorer. </li></ul><ul><ul><li>View the code in Notepad. </li></ul></ul><ul><ul><li>Change the border style as thicker. </li></ul></ul><ul><ul><li>Increase the height and width of the </li></ul></ul><ul><ul><li>image to 50. </li></ul></ul>
  10. 10. Lab Exercise <ul><li>Open Malaysia.html that you have created under the folder in your name in C:. Insert the picture for National Flower, Fruits and display the output as shown in the following Figure. </li></ul>
  11. 11. Activity 2.7.1 <ul><li>1. Create a Web page that explains the <IMG> tag as shown in Figure. </li></ul><ul><li>2. Save the HTML file as Activity1.html in C:HTMLUnit 7Activity folder. </li></ul><ul><li>3. The hyperlink More about Images at the bottom of the page should be linked to the Web page given in Activity2. </li></ul>
  12. 12. Activity 2.7.1 Contd.
  13. 13. Hyperlink Images <ul><li>Images can also be used as Hyperlink. </li></ul>
  14. 14. Hands-On! <ul><li>Open the HTML file Imagelink.html in C:HTMLUnit7Hands On Folder in Internet Explorer. </li></ul><ul><li>This HTML document illustrates how to use images as hyperlink. </li></ul><ul><li>The output is shown in the next slide </li></ul>
  15. 15. Hands-On!
  16. 16. Lab Exercise <ul><li>4. Write a HTML code to display the output as given in the following Figure using <IMG> and <A> tag. Save the file as Flag.html under the folder in your name in C:. </li></ul><ul><li>When you click on the text “National Flower”, the following description should be displayed in the same page using internal hyper link. </li></ul>
  17. 17. Lab Exercise Contd.
  18. 18. Summary <ul><li>In this presentation, you learnt the following: </li></ul><ul><li>Images can be inserted into a Web page using <IMG> tag. </li></ul><ul><li>Images can be formatted using the attributes of <IMG> tag. </li></ul><ul><li>Images can also be used as Hyperlink. </li></ul>
  19. 19. Assignment <ul><li>Name the attributes that are used to change the size of the image in a Web page. </li></ul><ul><li>Write how you will insert images in your Web page? </li></ul>

×