HTML Subjective
Question
Explain the usage of the <IFRAME> tag in HTML. Also, discuss the
various attributes of the <IFRAME> tag.
Ans .The HTML <IFRAME> tag is used to specify an inline frame. It allows you to divide a Web page into sections or frames. Each section can be used to display an individual Web page. Therefore, the <IFRAME> tag is used to embed an HTML Web page within another Web page. The embedded Web page is said to be contained within the other Web page, which is known as the containing page. The following attributes can be used with the <IFRAME> tag:
src: Is used to specify the location or the URL of the Web page to be embedded inside the frame.
name: Is used to assign a name to the frame.
seamless: Is a boolean attribute, which instructs the browser to display the frame as a part of the containing Web page. If this attribute is used, the frame is displayed without scroll bars and border.
srcdoc: Is used to specify an HTML code that defines the content to be displayed inside the frame.
height: Is used to set the height of the frame.
width: Is used to set the width of the frame.
What do you mean by loop constructs? Discuss the various loop constructs in JavaScript.Ans. Loop constructs are used to repeatedly execute one or more lines of code. In JavaScript, the following loop constructs can be used:
while
do...while
for
The while loop is used to repeatedly execute a block of statements till a condition evaluates to true. The while statement always checks the condition before executing the statements in the loop. The syntax for the while loop is:
while (expression)
{
statements;
}
The do...while loop construct is similar to the while loop construct. However, the statements within the do...while loop are executed before the condition is checked as compared to the while loop, where the statements within the block are executed after the condition is checked. Therefore, the statements within the do...while loop are executed at least once, in comparison to the while loop, where the statements in the block are not executed when the condition evaluates to false for the very first time. It has the following syntax:
do
{ Statements;
}
while(condition)
The for loop allows the execution of a block of code depending on the result of the evaluation of the test condition. It has the following syntax:
for (initialize variable; test condition; step value)
{// code block
}
Write the code to retrieve the users' location on the click event of a button by using the getCurrentPosition() method. The location coordinates that are retrieved need to be displayed inside the <P></P> tag.
Ans. <!DOCTYPE HTML>
<HTML>
<BODY>
<P ID="disp_location">Click here to know your location coordinates:</P>
<BUTTON onclick="getLocation()">Get Location</Button>
<SCRIPT>
var geo=document.getElementById("disp_location");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(getPosition);
}
else{geo.innerHTML="Geolocation is not supported by this browser.";}
}
function getPosition(position)
{
geo.innerHTML="Latitude: " + position.coords.latitude +
"<BR>Longitude: " + position.coords.longitude;
}
</SCRIPT>
</BODY>
</HTML>
What is a function? How can you create a function in JavaScript?
Ans. A function is a self-contained block of statements that has a name and is defined to perform a specific task. A function can be defined once but can be executed repeatedly. Functions can either be built-in or user-defined.
In JavaScript, functions can be created by using the keyword, function, followed by the function name and the parentheses, ().A function can optionally accept a list of parameters. The parameters that a function accepts are provided in parentheses and separated by commas. The function can use the values passed in these parameters to perform certain operations. The following syntax is used to create functions:
function [functionName] (Variable1, Variable2)
{
//function statements
}
Write the JavaScript code to create a clock that updates every one second to display the current time inside a <DIV> element on the Web page.
Ans. <!DOCTYPE HTML>
<HTML>
<HEAD>
<SCxRIPT type="text/javascript">
function clockTime()
{
var todayDate=new Date();
var hrs=todayDate.getHours();
var mns=todayDate.getMinutes();
var scs=todayDate.getSeconds();
mns=check(mns);
scs=check(scs);
document.getElementById('displayTime').innerHTML=hrs+":"+mns+":"+scs;
t=setTimeout('clockTime()',1000);
}
function check(t)
{
if (t<10)
{
t="0" + t;
}
return t;
}
</SCRIPT>
</HEAD>
<BODY onload="clockTime()">
<DIV ID="displayTime"></DIV>
</BODY>
</HTML>
Define canvas. Also, discuss how can you create a canvas and use it for drawing graphic objects in HTML.Ans. A canvas is an area on a Web page that acts as a container for embedding graphic objects. It allows dynamic rendering of bitmap images and 2D shapes by using JavaScript. To create a canvas and use it for drawing, you need to perform the following tasks:
1. Define the canvas
2. Access the canvas
A canvas is defined by using the <CANVAS> tag in the body section of the HTML document. Its important attributes are height, width, style, and ID. You can define a canvas by using the following code within the <BODY> tag:
<CANVAS ID="myCanvas" width="300" height="300" style="border:1px solid black">
</CANVAS>
To actually draw graphic objects on the canvas, you need to access the canvas in the JavaScript code. You can write the following code in the <BODY> tag to access the canvas that you have defined earlier:
<SCRIPT>
var c=document.getElementByID("myCanvas");
var ctx=c.getContext("2d");
</SCRIPT>
Write a code to create a table in HTML, as shown in the following figure.
Ans. <!DOCTYPE HTML><HTML>
<BODY>
<TABLE border = "1">
<THEAD>
<TR><TH colspan= "4">Sales Record</TH></TR>
<TR> <TH> Product ID </TH> <TH> Description</TH> <TH> Quantity</TH><TH> Price</TH></TR>
</THEAD>
<TFOOT>
<TR><TD colspan= "3"> Total price </TD> <TD>$12</TD></TR>
</TFOOT>
<TBODY>
<TR><TD>101</TD><TD>Notebook</TD><TD>50</TD><TD>$5</TD></TR>
<TR><TD>121</TD><TD>Pen</TD><TD>100</TD><TD>$7</TD></TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
What do you understand by preloading the images associated with a Web page? How is preloading of images implemented in JavaScript?
Ans. Preloading images is a technique to load images in the browser cache before the script on the Web page is executed and the Web page is rendered in the browser window. This helps to avoid any delay in loading images from their respective locations, and then displaying these images on the Web page.
The Image object can be used to preload images in an application. To use the Image object, an instance of the Image object needs to be created and the actual images need to be attached to the Image object in the head section. It ensures that the images are loaded in memory before the body of the page gets loaded. The following syntax is used to create an instance of the Image object:
var Imagename= new Image([Width], [Height]);
After instantiating an image object, you need to associate the image with the Image object. For this, the src attribute of the Image object is used as shown in the following code:
Imagename.src="ImageURL",
where, ImageURL is the URL of the image.
What is the use of the <FIELDSET> tag in HTML? Also, briefly discuss the tags and attributes associated with the <FIELDSET> tag.
Ans. The <FIELDSET> tag is used to combine and group related fields in a form. It creates a box around the selected fields.
The <LEGEND> tag is used along with the <FIELDSET> tag to define a caption for the fieldset. It is the simplest way of organizing form elements along with their description in such a way that it is easier for a user to understand.
The <FIELDSET> tag can have the following attributes:
disabled: The disabled attribute is used to indicate that a group of fields should be shown disabled when the page loads.
form: The form attribute is used to specify the name of one or more forms to which the <FIELDSET> tag belongs.
name: The name attribute is used to specify the name for the fieldset.
Write the code to create a canvas of desired dimension on a Web page and then draw a circle inside it. In addition, you need to apply a radial gradient comprising any four colors on the circle drawn on the canvas.
Ans. <!DOCTYPE HTML>
<HTML> <BODY>
<CANVAS ID="myCanvas" width="300" height="300" style="border:1px solid black">
</CANVAS>
<SCRIPT>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grad=ctx.createRadialGradient(75,50,5,90,60,100);
grad.addColorStop(0.2,"orange");
grad.addColorStop(0.4,"green");
grad.addColorStop(0.6,"yellow");
grad.addColorStop(0.8,"red");
ctx.fillStyle=grad;
ctx.beginPath();
ctx.arc(80, 90, 50, 0, Math.PI*2, false);
ctx.fill();
ctx.closePath();
</SCRIPT>
</BODY>
</HTML>
Ans .The HTML <IFRAME> tag is used to specify an inline frame. It allows you to divide a Web page into sections or frames. Each section can be used to display an individual Web page. Therefore, the <IFRAME> tag is used to embed an HTML Web page within another Web page. The embedded Web page is said to be contained within the other Web page, which is known as the containing page. The following attributes can be used with the <IFRAME> tag:
src: Is used to specify the location or the URL of the Web page to be embedded inside the frame.
name: Is used to assign a name to the frame.
seamless: Is a boolean attribute, which instructs the browser to display the frame as a part of the containing Web page. If this attribute is used, the frame is displayed without scroll bars and border.
srcdoc: Is used to specify an HTML code that defines the content to be displayed inside the frame.
height: Is used to set the height of the frame.
width: Is used to set the width of the frame.
What do you mean by loop constructs? Discuss the various loop constructs in JavaScript.Ans. Loop constructs are used to repeatedly execute one or more lines of code. In JavaScript, the following loop constructs can be used:
while
do...while
for
The while loop is used to repeatedly execute a block of statements till a condition evaluates to true. The while statement always checks the condition before executing the statements in the loop. The syntax for the while loop is:
while (expression)
{
statements;
}
The do...while loop construct is similar to the while loop construct. However, the statements within the do...while loop are executed before the condition is checked as compared to the while loop, where the statements within the block are executed after the condition is checked. Therefore, the statements within the do...while loop are executed at least once, in comparison to the while loop, where the statements in the block are not executed when the condition evaluates to false for the very first time. It has the following syntax:
do
{ Statements;
}
while(condition)
The for loop allows the execution of a block of code depending on the result of the evaluation of the test condition. It has the following syntax:
for (initialize variable; test condition; step value)
{// code block
}
Write the code to retrieve the users' location on the click event of a button by using the getCurrentPosition() method. The location coordinates that are retrieved need to be displayed inside the <P></P> tag.
Ans. <!DOCTYPE HTML>
<HTML>
<BODY>
<P ID="disp_location">Click here to know your location coordinates:</P>
<BUTTON onclick="getLocation()">Get Location</Button>
<SCRIPT>
var geo=document.getElementById("disp_location");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(getPosition);
}
else{geo.innerHTML="Geolocation is not supported by this browser.";}
}
function getPosition(position)
{
geo.innerHTML="Latitude: " + position.coords.latitude +
"<BR>Longitude: " + position.coords.longitude;
}
</SCRIPT>
</BODY>
</HTML>
What is a function? How can you create a function in JavaScript?
Ans. A function is a self-contained block of statements that has a name and is defined to perform a specific task. A function can be defined once but can be executed repeatedly. Functions can either be built-in or user-defined.
In JavaScript, functions can be created by using the keyword, function, followed by the function name and the parentheses, ().A function can optionally accept a list of parameters. The parameters that a function accepts are provided in parentheses and separated by commas. The function can use the values passed in these parameters to perform certain operations. The following syntax is used to create functions:
function [functionName] (Variable1, Variable2)
{
//function statements
}
Write the JavaScript code to create a clock that updates every one second to display the current time inside a <DIV> element on the Web page.
Ans. <!DOCTYPE HTML>
<HTML>
<HEAD>
<SCxRIPT type="text/javascript">
function clockTime()
{
var todayDate=new Date();
var hrs=todayDate.getHours();
var mns=todayDate.getMinutes();
var scs=todayDate.getSeconds();
mns=check(mns);
scs=check(scs);
document.getElementById('displayTime').innerHTML=hrs+":"+mns+":"+scs;
t=setTimeout('clockTime()',1000);
}
function check(t)
{
if (t<10)
{
t="0" + t;
}
return t;
}
</SCRIPT>
</HEAD>
<BODY onload="clockTime()">
<DIV ID="displayTime"></DIV>
</BODY>
</HTML>
Define canvas. Also, discuss how can you create a canvas and use it for drawing graphic objects in HTML.Ans. A canvas is an area on a Web page that acts as a container for embedding graphic objects. It allows dynamic rendering of bitmap images and 2D shapes by using JavaScript. To create a canvas and use it for drawing, you need to perform the following tasks:
1. Define the canvas
2. Access the canvas
A canvas is defined by using the <CANVAS> tag in the body section of the HTML document. Its important attributes are height, width, style, and ID. You can define a canvas by using the following code within the <BODY> tag:
<CANVAS ID="myCanvas" width="300" height="300" style="border:1px solid black">
</CANVAS>
To actually draw graphic objects on the canvas, you need to access the canvas in the JavaScript code. You can write the following code in the <BODY> tag to access the canvas that you have defined earlier:
<SCRIPT>
var c=document.getElementByID("myCanvas");
var ctx=c.getContext("2d");
</SCRIPT>
Write a code to create a table in HTML, as shown in the following figure.
Ans. <!DOCTYPE HTML><HTML>
<BODY>
<TABLE border = "1">
<THEAD>
<TR><TH colspan= "4">Sales Record</TH></TR>
<TR> <TH> Product ID </TH> <TH> Description</TH> <TH> Quantity</TH><TH> Price</TH></TR>
</THEAD>
<TFOOT>
<TR><TD colspan= "3"> Total price </TD> <TD>$12</TD></TR>
</TFOOT>
<TBODY>
<TR><TD>101</TD><TD>Notebook</TD><TD>50</TD><TD>$5</TD></TR>
<TR><TD>121</TD><TD>Pen</TD><TD>100</TD><TD>$7</TD></TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
What do you understand by preloading the images associated with a Web page? How is preloading of images implemented in JavaScript?
Ans. Preloading images is a technique to load images in the browser cache before the script on the Web page is executed and the Web page is rendered in the browser window. This helps to avoid any delay in loading images from their respective locations, and then displaying these images on the Web page.
The Image object can be used to preload images in an application. To use the Image object, an instance of the Image object needs to be created and the actual images need to be attached to the Image object in the head section. It ensures that the images are loaded in memory before the body of the page gets loaded. The following syntax is used to create an instance of the Image object:
var Imagename= new Image([Width], [Height]);
After instantiating an image object, you need to associate the image with the Image object. For this, the src attribute of the Image object is used as shown in the following code:
Imagename.src="ImageURL",
where, ImageURL is the URL of the image.
What is the use of the <FIELDSET> tag in HTML? Also, briefly discuss the tags and attributes associated with the <FIELDSET> tag.
Ans. The <FIELDSET> tag is used to combine and group related fields in a form. It creates a box around the selected fields.
The <LEGEND> tag is used along with the <FIELDSET> tag to define a caption for the fieldset. It is the simplest way of organizing form elements along with their description in such a way that it is easier for a user to understand.
The <FIELDSET> tag can have the following attributes:
disabled: The disabled attribute is used to indicate that a group of fields should be shown disabled when the page loads.
form: The form attribute is used to specify the name of one or more forms to which the <FIELDSET> tag belongs.
name: The name attribute is used to specify the name for the fieldset.
Write the code to create a canvas of desired dimension on a Web page and then draw a circle inside it. In addition, you need to apply a radial gradient comprising any four colors on the circle drawn on the canvas.
Ans. <!DOCTYPE HTML>
<HTML> <BODY>
<CANVAS ID="myCanvas" width="300" height="300" style="border:1px solid black">
</CANVAS>
<SCRIPT>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grad=ctx.createRadialGradient(75,50,5,90,60,100);
grad.addColorStop(0.2,"orange");
grad.addColorStop(0.4,"green");
grad.addColorStop(0.6,"yellow");
grad.addColorStop(0.8,"red");
ctx.fillStyle=grad;
ctx.beginPath();
ctx.arc(80, 90, 50, 0, Math.PI*2, false);
ctx.fill();
ctx.closePath();
</SCRIPT>
</BODY>
</HTML>
No comments:
Post a Comment