Unit 7 – Images

Presentation 1

Web Programming

Revision

1. Define Hyperlink?

2. Name the two types of Hyperlinks?

3. Name the tag and its attribute used to create a Link?

4. How will you change the colour of the Hyperlinks?

5. Write the use of Target attribute.

Objectives

At the end of this presentation, you will be able to• Insert images into your Web page• Format the Images

Hands-On!

• Open the HTML file Image.html in C:\HTML\Unit7\Hands On Folder in Internet Explorer.

• This HTML document illustrates how to insert images in a Webpage.

Image Tag

• Images can be inserted into a Web page using <IMG> tag.

• Src attribute to specify the image to be displayed.

• Example:

<IMG Src=”Pinakki.gif”>

Formatting Images

• Image can be formatted using the attributes of <IMG> tag.

• These attributes are explained in the Table shown in the next slide.

Formatting Images

Lab Exercise

1. Open D7_1.html in Internet Explorer.

a. Identify the tag which is used to insert the image in source code D7_1.html.

b. Name the attributes which are used in source code D7_1.html.

Lab Exercise

2. Open D7_1.html in Internet Explorer. a. View the code in Notepad.b. Change the border style as thicker.c. Increase the height and width of the

image to 50.

Lab Exercise

3. 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.

Activity 2.7.1

1. Create a Web page that explains the <IMG> tag as shown in Figure.

2. Save the HTML file as Activity1.html in C:\HTML\Unit 7\Activity folder.

3. The hyperlink More about Images at the bottom of the page should be linked to the Web page given in Activity2.

Activity 2.7.1 Contd.

Hyperlink Images

• Images can also be used as Hyperlink.

Hands-On!

• Open the HTML file Imagelink.html in C:\HTML\Unit7\Hands On Folder in Internet Explorer.

• This HTML document illustrates how to use images as hyperlink.

• The output is shown in the next slide

Hands-On!

Lab Exercise

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:.

When you click on the text “National Flower”, the following description should be displayed in the same page using internal hyper link.

Lab Exercise Contd.

Summary

In this presentation, you learnt the following:• Images can be inserted into a Web page

using <IMG> tag. • Images can be formatted using the attributes

of <IMG> tag.• Images can also be used as Hyperlink.

Assignment

1. Name the attributes that are used to change the size of the image in a Web page.

2. Write how you will insert images in your Web page?