Class VIII Chapter 7 Images, Links and Frames in HTML 5

CHAPTER 7
IMAGES, LINKS AND FRAMES IN HTML 5

TEST YOUR SKILLS

Tick the correct option.
a. Which of the following attributes is not used with the <IMG> tag? – (II) FRAME
b. It is a highlighted text or image, which when clicked takes to another web page –
(III) HYPERLINK
c. Which of the following is not a form element in HTML? – (IV) <IMG>
d. Which of these attributes is used in internal linking? – (II) HREF
e. Which of these attributes is used to specify the height of the frame on the web page? –
(I) HEIGHT

Write 'T' for true and ‘F’ for false.

a. The default colour of the visited link is blue – FALSE
b. We cannot specify the width and height of an image in a webpage. – FALSE
c. PNG image file format stands for Portable Ink Group – FALSE
d. TEXTAREA tag is used to create a multi-line text box that can accept long text value -
TRUE
e. FORM tag is used to create the form boundary on the web page. – TRUE
Fill in the blanks using the words from the help box.
a. A link that connects to another place on the same web page is called an____________
– Internal link
b. The ___________ tag is used to link two web pages - <A>
c. ____________ tag with the <OPTION> tag allows us to create a drop-down list. –
SELECT.
d. The <FRAME> tag is used under the __________ tag. - <FRAMESET>
e. _______ tag is used to create the controls or fields to take the input from the user in the
form of text, selection and click. - <INPUT>

Short answer type questions.

a. what does HREF stands for?
❖ HREF stands for Hypertext Reference.
b. What is a the purpose of ALINK attribute?
❖ ALINK attribute is used to set the color of the active link.
c. Define frames.
❖ Frames are the different sections or parts of a web page. The <IFRAME> tag of HTML
allows you to divide a browser window into many sections or parts.

Ms. Anuradha D Page 1

Class VIII Chapter 7 Images, Links and Frames in HTML 5

d. what is the use of the BORDER attribute in the ,<IMG> tag?

❖ BORDER specifies the thickness of the border surrounding the image.

Long answer type questions.

a. Explain the purpose of the following attributes in HTML

1. ACTION
❖ This attribute is used to specify the action that will take place when we
submit the form values. It takes the URL of another web page or an e-mail
address to receive the information.
2. METHOD
❖ It specifies the type of method form will use to accept the values entered
into form fields. The most commonly used values for this attribute are
POST and GET.
3. TYPE
❖ This attribute is used to specify the type of field we want to create. It takes
one of the predefined values.
b. Define any two attributes used with the <IMG> tag.
❖ SRC attributes: It specifies the source or URL of the image that has to be inserted in
the web page. For example, <IMG SRC=”C:/Mydocuments/lily.jpg”>
❖ WIDTH: It specifies the width of the image in the web page. For example, < IMG
SRC=”C:/Mydocuments/lily.jpg” WIDTH=”50%”>
❖ HEIGHT: It specifies the height of the image in the web page. For example, < IMG
SRC=”C:/Mydocuments/lily.jpg” HEIGHT=”50%”>
❖ ALIGN attribute: It aligns the image with respect to the text placed adjacent to the
image. Image can be aligned left, right, middle, bottom and top. For example, <IMG
SRC=”lily.jpg” ALIGN=”right”>
❖ BORDER: It specifies the thickness of the border surrounding the image. For
example, < IMG SRC=”C:/Mydocuments/lily.jpg” BORDER=”2”>
❖ ALT: It specifies the alternate text to be displayed in the web browser, if the
provided image is not found. For example, < IMG SRC=”C:/Mydocuments/lily.jpg”
ALT=”Image not found”>
c. Describe all the attributes of the <FRAME> tag.
❖ SRC: It is used to specify the URL of the web page which you want to display in the
frame.
❖ HEGHT: It is used to specify the height of the frame
❖ WIDTH: It is used to specify the width of the frame
❖ NAME: It is used to specify the name of the frame. This name can be used in the
TARGET attribute of the <A> tag.

Ms. Anuradha D Page 2

Class VIII Chapter 7 Images, Links and Frames in HTML 5

d. Write HTML code to add audio in a web page.

<HTML>
<HEAD>
<TITLE> AUDIO </TITLE>
</HEAD>
<BODY>
<H1> WELCOME TO MUSICAL WORLD</H1>
<P ALIGN="CENTER">
<IMG SRC="C:/USERS/HP/DESKTOP/WORKPLACE.JPG" WIDTH="450PX"
HEIGHT="450PX" ALIGN="middle" BORDER="15" ALT="IMAGE IS NOT
FOUND" >
</P>
<AUDIO SRC ="C:/Users/hp/Downloads/vaayaenveerastarmusiqcomringtone-10314-1-
67375.mp3" AUTOPLAY CONTROLS> </AUDIO>
</BODY>
</HTML>

Application based questions.

1. Sunil wants to divide his web page into three columns. Which HTML tag
can he use for this purpose? - <IFRAME> TAG
2. Divya wants to add some images on the webpage. Which tag should she use
to do this? - <IMG> TAG

HTML Codes
1. IMG tag
<HTML>
<HEAD>
<TITLE> IMAGE TAG</TITLE>
</HEAD>
<BODY>
<IMG SRC="C:/USERS/HP/DESKTOP/workplace.jpg"
WIDTH="200PX" HEIGHT="200PX" ALIGN="middle"
BORDER="2" alt ="Image Not found">
</BODY>
</HTML>
Ms. Anuradha D Page 3
Class VIII Chapter 7 Images, Links and Frames in HTML 5

2. ANCHOR Tag – Intralinking

<HTML>
<HEAD>
<TITLE> HOME PAGE </TITLE>
</HEAD>
<BODY>
<H1> DELHI WORLD PUBLIC SCHOOL </H1>
<HR COLOR="RED">
<H3> WELCOME TO DELHI WORLD PUBLIC SCHOOL </H3>
<P>
<BR> <A HREF="C:/Users/hp/Desktop/HTML CLASS 8
IMAGE/IMAGE.HTML" target="_blank" > ADMISSIONS </A>
<BR> <A HREF="C:/Users/hp/Desktop/HTML CLASS 8
IMAGE/IMAGE.HTML"> EVENTS </A>
</P>
</BODY>
</HTML>
3. ANCHOR Tag – Interlinking
<HTML>
<HEAD>
<TITLE> INTERNAL LINKING</TITLE>
</HEAD>
<BODY>
<H3 STYLE="TEXT-ALIGN:CENTER;">
<BR> <A HREF="#ROSE"> ABOUT ROSE </A>
<BR> <A HREF="#LOTUS "> ABOUT LOTUS </A>
</H3>
<BR><BR><BR>
<H3> <A ID="ROSE"> ABOUT ROSE </A></H3>
<P> ABOUT ROSE NEED TO WRITE </P>
<BR><BR><BR>
<H3> <A ID="LOTUS"> ABOUT LOTUS </A></H3>
<P> ABOUT LOTUSNEED TO WRITE </P>
</BODY>
</HTML>
Ms. Anuradha D Page 4
Class VIII Chapter 7 Images, Links and Frames in HTML 5

4. Audio tag
<HTML>
<HEAD>
<TITLE> AUDIO </TITLE>
</HEAD>
<BODY>
<H1> WELCOME TO MUSICAL WORLD</H1>
<AUDIO SRC
="C:/Users/hp/Downloads/vaayaenveerastarmusiqcomringtone-10314-
1-67375.mp3" AUTOPLAY CONTROLS> </AUDIO>
</BODY>
</HTML>
5. Video tag
<HTML>
<HEAD>
<TITLE> Video </TITLE>
</HEAD>
<BODY>
<H1> WELCOME TO MUSICAL WORLD</H1>
<P ALIGN="CENTER">
<video SRC ="C:/Users/hp/Downloads/New folder/Robo fest
Presentation.mp4" WIDTH="300" HEIGHT="300" AUTOPLAY
CONTROLS> </video>
</P>
</BODY>
</HTML>
6. Frame Tag
<HTML>
<HEAD>
<TITLE> FRAMES </TITLE>
</HEAD>
<IFRAME SRC="C:\Users\hp\Desktop\HTML CLASS 8
IMAGE/AN3CHOR.HTML" NAME="IFRAME1" WIDTH="30%"
HEIGHT="100%" STYLE="FLOAT:LEFT;"></iframe>

Ms. Anuradha D Page 5

Class VIII Chapter 7 Images, Links and Frames in HTML 5

<IFRAME SRC="C:\Users\hp\Desktop\HTML CLASS 8

IMAGE/ANCHORTAG.HTML" NAME="IFRAME2"
WIDTH="70%" HEIGHT="100%" STYLE="position:absolute;">
</iframe>
</HTML>
7. Login Form
<HTML>
<HEAD>
<TITLE> Login Form </TITLE>
</HEAD>
<BODY BGCOLOR="LIGHTYELLOW">
<FORM>
USER NAME : <INPUT TYPE="TEXT" NAME="USER
NAME"><BR><BR>
PASSWORD: <INPUT TYPE="PASSWORD"
NAME="PASSWORD"><BR><BR>
<INPUT TYPE="CHECKBOX">REMEMBER ME NEXT TIME
<BR>
<INPUT TYPE="BUTTON" VALUE="LOG IN">
<INPUT TYPE="BUTTON" VALUE="SIGN IN">
</FORM>
</BODY>
</HTML>
8. Registration Form
<HTML>
<HEAD>
<TITLE> REGISTRATION Form </TITLE>
</HEAD>
<BODY BGCOLOR="LIGHTYELLOW" TEXT="BLUE">
<CENTER>
<H1> REGISTRATION FORM </H1></center>
<FORM>
Name: <INPUT TYPE="TEXT"><BR><BR>
FATHER'S NAME : <INPUT TYPE="TEXT" ><BR><BR>
AGE IN YEARS: <INPUT TYPE="TEXT"><br><BR>
Ms. Anuradha D Page 6
Class VIII Chapter 7 Images, Links and Frames in HTML 5

GENDER:<INPUT TYPE="RADIO" NAME="GENDER"> MALE

<INPUT TYPE="RADIO" NAME="GENDER">FEMALE <INPUT
TYPE="RADIO" NAME="GENDER">OTHER<BR><BR>
ADDRESS: <TEXTAREA ROWS="4" COLS="80"> </textarea>
<br>
hobbies:<br>
<input type="checkbox"> Playing cricket<br>
<input type="checkbox"> Listening to music<br>
<input type="checkbox"> reading books<br>
<br><br>
Enroll for class:
<select>
<option>class 1
<option>class 2
<option>class 3
<option>class 4
<option>class 5
<option>class 6
<option>class 7
<option>class 8
<option>class 9
</select>
<br><br>
<input type="submit" value="submit"> <input type="reset"
value="reset">
</FORM>
</BODY>
</HTML>

Ms. Anuradha D Page 7