1. Write short notes on <img> tag along with its attributes.
The HTML <img> tag is used to embed an image in a web page.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it
has no closing tag
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "C:\Users\ADC-013\Desktop\[Link]" alt = "Test Image" />
</body>
</html>
Image Attributes:
Attribut Value Description
e
src URL Specifies URL or location of an image, where image is stored
align Top Specifies alignment of an image according to surrounding elements.
Bottom
Middle
Left
right
alt text Specifies an alternate text for an image
title text Specifies title text as pop-up tips.
border pixels Specifies width of border around an image.
height pixels Specifies the height of an image
width pixels Specifies the width of an image
[Link] about how to create hyperlinks in html.
The <a>(anchor) tag defines a hyperlink, which is used to link from one page to
another.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red.
In HTML, <A> element defines a hyperlink. This element is called anchor tag.
Syntax: <A href=”url”>Link text</A>
<A> Attributes
Attribute Value Description
href URL Specifies URL of the page the link goes to.
target _blank Specifies where to open the linked document.
_parent
_self
shape Default
Rect Specifies shape of a link
Circle
[Link] about while loop in Javascript.
Loops can execute a block of code as long as a specified condition is true. The while loop
loops through a block of code as long as a specified condition is true.
Syntax
while (condition) {
// code block to be executed
}
<html>
<body>
<script type = "text/javascript">
<!--
var count = 0;
[Link]("Starting Loop ");
while (count < 10) {
[Link]("Current Count : " + count + "<br />");
count++;
}
[Link]("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
[Link] Onload Event.
The onload event occurs when an object has been loaded.
onload is most often used within the <body> element to execute a script once a web page has
completely loaded all content (including images, script files, CSS files, etc.).
The onload event can be used to check the visitor's browser type and browser version, and
load the proper version of the web page based on the information.
The syntax is as follows
<element onload="myScript">
For example
<html>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
Function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>
[Link] short notes on Events and Event handlers in Javascript.
The change in the state of an object is known as an Event. When javascript code is
included in HTML, js react over these events and allow the execution. This process of
reacting over the events is called Event Handling.
<input type=”button” value=”click me” onclick=”alert(‘you clicked me’);”>
The above code tells Javascript engine that when the onclick event occurs,the event
handler having single statement alert(‘you clicked me’);should be executed.
Some of the HTML events and their event handlers are:
Mouse events:
Event Handler:
onclick, onmouseover, onmouseout, onmousedown, onmouseup, onmousemove.
Keyboard events:
Event Handler:
onkeydown & onkeyup
[Link] is a form in html?
The HTML <form> element defines a form that is used to collect user input:
<form>
form elements
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like: text fields, checkboxes,
radio buttons, submit buttons, and more.
The <form> element can contain one or more of the following form elements:
● <input>
● <textarea>
● <button>
● <select>
● <option>
Form Attributes
name Form name Specifies name of a form.
method get Specifies the HTTP method to use when sending form-data
post Get-form data is appended to URL when submitted
post-form data is not appended to URL
action URLForm Specifies where to send the form-data when a form is
Attributes submitted
target _blank Specifies where to display the response that is received after
_self submitting the form
_parent
_top
[Link] short notes on <marquee> tag.
The <marquee> is used to create a scrolling text or an image. It is used to make the text or
image scroll horizontally across or vertically down the web page.
Attribute Description
width provides the width or breadth of a marquee. For example width="10" or
width="20%"
height provides the height or length of a marquee. For example height="20" or
height="30%"
direction provides the direction or way in which your marquee will allow you to scroll.
The value of this attribute can be: left, right, up or down
scrolldelay provides a feature whose value will be used for delaying among each jump.
scrollamou provides value for speeding the marquee feature
nt
behavior provides the scrolling type in a marquee. That scrolling can be like sliding,
scrolling or alternate
loop provides how many times the marquee will loop
bgcolor provides a background color where the value will be either the name of the
color or the hexadecimal color-code.
<html>
<head>
<title>Marquee tag</title>
</head>
<body>
<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>
<marquee behavior="scroll" direction="up" scrollamount="1">Slow
Scrolling</marquee>
<marquee behavior="slide" direction="right" scrollamount="12">Little Fast
Scrolling</marquee>
<marquee behavior="alternate" direction="left" scrollamount="20">Fast
Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast
Scrolling</marquee>
</body>
</html>
9(a). write about table tag and its attribute
HTML table tag
Table tags are used for displaying
data in rows and columns. The
HTML tables allow web authors
to arrange data like text, images,
links, other tables, etc. into rows
and columns of cells. The HTML
tables are created using the
<table> tag in which the A table ,
is divided into rows with the
<tr>, which stands for table row,
and each row is divided into data
cells with the <td> tag can
contain text, links, images list,
forms. Etc.
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a
table for formatting.
<col> It is used with <colgroup> element to specify
column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan = "2">Hillary</td>
<td>Advanced Web</td>
<td>75</td>
</tr>
<tr>
<td>Operating Syatem</td>
<td>60</td>
</tr>
<tr>
<td rowspan = "2">Lary</td>
<td>Advanced Web</td>
<td>80</td>
</tr>
<tr>
<td>Operating Syatem</td>
<td>75</td>
</tr>
<tr>
<td colspan="3">Total Average: 72.5</td>
</tr>
</table>
9(b)Explain in detail Frames in html in detail?
HTML is used to divide your browser window into multiple sections called [Link]
frame can load a separate HTML document.
Frames allow us to display more than one HTML document in same browser window
simultaneously.
A collection of frames in the browser window is known as a frameset. The window is divided
into frames in a similar way the tables are organized: into rows and columns.
To use frames on a page we use <frameset> tag instead of <body> tag.
The <frameset> tag defines, how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines
vertical frames.
Each frame is indicated by <frame> tag and it defines which HTML document shall open into
the frame.
<FRAMESET> ATTRIBUTES
Attribute Value Description
Cols Column size Specifies number of columns and their width.
Rows Row size Specifies number of rows and their width.
<FRAME> ATTRIBUTES
Attribute Value Description
frameborder 0 or 1 Specifies whether or not to display border around frame.
Src URL Specifies the URL or location of document to show in a
frame
Name Frame name Specifies name of frame
scrolling Yes, no, Specifies whether or not to display scrollbars in a frame
auto
marginheigh pixels Specifies top and bottom margins of frame.
t
marginwidth pixels Specifies left and right margins of frame.
Program-1
<html>
<head>
<title>frame-1</title>
<head>
<body bgcolor=”pink”>
This is frame-1
</body>
</html>
Program-2
<html>
<head>
<title>frame-2</title>
<head>
<body bgcolor=”yellow”>
This is frame-2
</body>
</html>
Program-3
<html>
<head>
<title>mainframe</title>
<head>
<frameset cols=”50%,50%”>
<frame src=[Link]>
<frame src=[Link]>
</body>
</html>
10. (a) CSS and types:
CSS stands for cascading style sheets, it describes how html documents are to be
appeared on screen, it saves lot of time, loads page very fast, it is very easy to
understand.
There are 3 types of CSS we can insert on html
1. Inline CSS
2. Internal CSS
3. External CSS
Inline : it is written directly inside the html body part, it is used only to the
specific tag or which they applied,
<hytml>
<body>
<h1 style=”color:red; font-size:10 ;> inline applied </h1>
</html>
Internal CSS: it is also called embedding style sheet, it is written in head section
of style part o html. It is used to add unique style for single document.
<html>
<head>
<style>
h1
Color:red;
Font-size : 10;
</style>
</head>
<body>
<h1> the internal style sheet applied </h1>
</body>
</html>
External CSS: it is used when the user want to make changes to the multiple
pages at a time, in this type we have to design two files CSS file and HTML file.
Css file contains only css style code, and saved with .css, on html file we write a
link in head section to execute style of target css file.
Css file: [Link]
Body { bgcolor:green}
H1 { color : blue}
Html file:
<head>
<link rel=”stylesheet” type=”text/css” href=[Link]”>
</head>
<body>
<h1>External sheet</h1>
</body>
10)b)Explain in detail about various filters and transitions.
filters
CSS filter Property adds the visual effects like blur and brightness to an element(Probably
image).
The filter property is a string of filter descriptions that uses a function like notation
CSS Syntax
filter: function(value)
Filter functions:n
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert()
| opacity() | saturate() | sepia() | url();
ex:
<html>
<head>
<style>
img {
filter: grayscale(100%);
}
</style>
</head>
<body>
<h1>The filter Property</h1>
<p>Convert the image to grayscale:</p>
<img src="[Link]" alt="Pineapple" width="300" height="300">
</body>
</html>
transitions
CSS transitions allows you to change property values smoothly, over a given duration.
To create a transition effect, you must specify two things:
● the CSS property you want to add an effect to
● the duration of the effect
transition
● transition-delay
● transition-duration
● transition-property
● transition-timing-function
Note: If the duration part is not specified, the transition will have no effect, because the
default value is 0.
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
The transition effect will start when the specified CSS property (width) changes value.
Now, let us specify a new value for the width property when a user mouses over the
<div> element:
div:hover {
width: 300px;
}
ex:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>test</div>
</body>
</html>
Specify the Speed Curve of the Transition
The transition-timing-function property specifies the speed curve of the transition effect.
The transition-timing-function property can have the following values:
● ease - specifies a transition effect with a slow start, then fast, then end slowly (this is
default)
● linear - specifies a transition effect with the same speed from start to end
● ease-in - specifies a transition effect with a slow start
● ease-out - specifies a transition effect with a slow end
● ease-in-out - specifies a transition effect with a slow start and end
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier
versions.</p>
</body>
</html>
11)a) Explain about array in java script with suitable example.
An array is a special type of variable, which can store multiple values
using special syntax. Every value is associated with numeric index starting with 0.
The following figure illustrates how an array stores values.
1.2 Declaring and Allocating Arrays :-
An array in JavaScript can be defined and initialized in two ways, Array literal
and Array constructor syntax.
1.2.1 Array Literal
Array literal syntax is simple. It takes a list of values separated by a comma and
enclosed in square brackets.
Syntax:
Syntax: var <array-name> = [element0,element1,element2,..elementN];
Example :
var stringArray = ["one", "two", "three"];
var numericArray = [1, 2, 3, 4];
var decimalArray = [1.1, 1.2, 1.3];
var booleanArray = [true, false, false, true];
var mixedArray = [1, "two", "three", 4];
4 Array Properties
Array includes "length" property which returns number of elements in the array.
Use for loop to access all the elements of an array using length property.
Example Program on Array Literal
<html>
<head>
<title>JavaScript Arrays</title>
</head>
<body>
<script>
var arr=["Hello",10,"World",4.87];
for (var i=0;i<[Link];i++)
{
[Link](arr[i] + "<br/>");
}
</script>
</body>
</html>
Some methods associated with array
• concat( ): Joins two or more arrays, and returns a copy of the joined arrays
• join( ): Joins all elements of an array into a string
• pop( ): Removes the last element of an array, and returns that element
• push( ): Adds new elements to the end of an array, and returns the new length
• reverse( ): Reverses the order of the elements in an array
• shift( ): Removes the first element of an array, and returns that element
• sort( ): Sorts the elements of an array
• toString( ): Converts an array to a string, and returns the result
• unshift( ): Adds new elements to the beginning of an array, and returns the new
length
11) b)Explain the function supported in java script with suitable example?
The javascript Date object can be used to get year, month and day.
Syntax: Date( )
Date(milliseconds)
Date(datestring)
Date(year,month,date[hour,minute,second,millisecond])
Ex:
<html>
<body>
<script>
var dt=Date();
[Link](“Date and Time:” +dt);
</script>
</body>
</html>
o/p: Date and Time:Thu Dec 10 2020 10:42:44 GMT+0530 (India Standard Time)
Below is a table of some of commonly used member functions of the Date object:
Methods Description
Date( ) Returns todays date and time.
getDate() Get the date as a number (1-31)
getDay() Get the weekday as a number (0-6)
getFullYear( Get the year as a four digit number (yyyy)
)
getHours() Get the hour (0-23)
getMonth() Get the month as a number (0-11)
getSeconds() Get the second (0-59)
getTime() Get the time (milliseconds since January 1, 1970)
Ex:
<html>
<body>
<script type=”text/javascript”>
var dt=new Date(“December 20,2020 23:15:00”);
[Link](“getDate():” +[Link]());
[Link](“getMonth():” +[Link]() );
[Link](“getHours():” +[Link]());
[Link](“getMinutes():” +[Link]());
[Link](“getSeconds():” +[Link]());
</script>
</body>
</html>
o/p:getDate():20getMonth():11getHours():23getMinutes():15getSeconds():0
In Javascript, the Math object provides you properties and methods for mathematical
constants and functions. All the properties and methods of Math object are static and can be
called by using Math as an object without creating it.
Math Properties
Syntax: var var_name=[Link];
ex:
<html>
<body>
<script>
var pi_val=[Link];
[Link](“The value of PI is “, +pi_val);
</script>
</body>
</html>
o/p:The value of PI is 3.141592653589793
Here is a list of all properties of Math object and their descriptions.
Property Description
Math.E Returns Euler’s number
[Link] Returns PI
[Link] Returns square root
Math.LOG2 Returns base 2 logarithm of E
Math.LOG10 Returns base 10 logarithm of E
E
Math Methods
If you want to use a member function, which performs a calculation, you would write
something like this:
Syntax: var fname=[Link](x);
<html>
<body>
<script>
var sqrt_val=[Link](25);
[Link](“\n The square root value of 25 is” +sqrt_val);
</script>
</body>
</html>
o/p:The square root value of 25 is 5
Below is a table of commonly used member functions of the Math object.
Method Description
s
abs(x) returns the absolute (positive) value of x
cos(x) returns the cosine (a value between -1 and 1) of the angle x
log(x) Returns the natural logarithm (base E) of x
max(x,z) Returns larger of two variables x and z.
min(x,z) Returns smaller of two variables x and z.
pow(x,z) returns the value of x to the power of z
random() returns a random number between 0 (inclusive), and 1 (exclusive)
round(x) returns the value of x rounded to its nearest integer:
sin(x) returns the sine (a value between -1 and 1) of the angle x
sqrt(x) returns the square root of x
tan(x) Returns the tangent of an angle
12)a) Explain about Keyboard related events.
Events that occur when user presses a key on the keyboard, belongs to the KeyboardEvent
Object.
Event Types
Event Description
onkeydow The event occurs when the user is pressing a key
n
onkeypress The event occurs when the user presses a key
onkeyup The event occurs when the user releases a key
<html>
<head>
<script type="text/javascript">
function keyDown()
{
alert("key pressed");
}
function keyUp()
{
alert("key released");
}
function keyPress()
{
alert("key pressed and released");
}
</script>
</head>
<body>
on key down:<input type="text" onKeyDown="keyDown()"><br>
on key up:<input type="text" onKeyUp="keyUp()"><br>
on key press:<input type="text" onKeyPress="keyPress()"><br>
</body>
</html>
12.b) Explain about Mouse Events.
In JavaScript, our primary way of dealing with the mouse is through events.
Event Description
onclick The event occurs when the user clicks on an element
ondblclick The event occurs when the user double-clicks on an element
onmousedow The event occurs when the user presses a mouse button over an element
n
onmousemov The event occurs when the pointer is moving while it is over an element
e
onmouseout The event occurs when a user moves the mouse pointer out of an element, or
out of one of its children
onmouseover The event occurs when the pointer is moved onto an element, or onto one of
its children
onmouseup The event occurs when a user releases a mouse button over an element
onclick and ondblclick
<html>
<head>
<script type="text/javascript">
function sayHello()
{
alert("Hello");
}
function saybye()
{
alert("bye");
}
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Hello"><br>
<input type="button" ondblclick="saybye()" value="bye"><br>
</body>
</html>
onMouseMove and onMouseUp
<html>
<head>
<script type="text/javascript">
function mouseUp()
{
alert("the mouse button is released on image");
}
function mouseMove()
{
alert("the mouse moves over image");
}
</script>
</head>
<body>
<img src="[Link]" onMouseUp="mouseUp()"><br>
<img src="[Link]" onMouseMove="mouseMove()"><br>
</body>
</html>
onMouseOver and onMouseOut
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
alert("the mouse button is over the image");
}
function mouseOut()
{
alert("the mouse moved out of the image");
}
</script>
</head>
<body>
<img src="[Link]" onMouseOver="mouseOver()"><br>
<img src="[Link]" onMouseOut="mouseOut()"><br>
</body>
</html>
13) a)Explain in detail about XML-DOM
DOM is an acronym stands for Document Object Model. It defines a standard way to access
and manipulate documents.
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure, and style
of a document."
The HTML DOM defines a standard way for accessing and manipulating HTML documents.
It presents an HTML document as a tree-structure.
In other words: The XML DOM is a standard for how to get, change, add, or delete XML
elements.
The XML DOM is:
A standard object model for XML
A standard programming interface for XML
Platform- and language-independent
A W3C standard
<?xml version=”1.0”?>
<bookstore>
<book category=”cooking”>
<title language=”english”>harry potter</title>
<author>J K Rowling</author>
<year>2004</year>
<price>299</price>
</book>
<book category=”web”>
<title language=”english”>computer fundamentals</title>
<author>P K Sinha</author>
<year>2003</year>
<price>240</price>
</book>
</bookstore>
The XML DOM views an xml document as a tree structure. The tree structure is called a
node tree. All the nodes in tree have a relationship to each other.
13.(b). Explain in detail about X-query(XML Query)
Query is a query language that is designed to query xml data. Query refers to action of
retrieving data from database. XQuery for xml is just like sql for databases.
XQuery makes use of XPath, a language that describes a way to locate and process items in
XML documents. The specifications of XPath and XQuery are closely related. In XQuery,
XPath expressions can be simple queries or parts oXf larger queries.
XQuery can be used to:
Extract information to use in a Web Service
Generate summary reports
Transform XML data to XHTML
Search Web documents for relevant information
Features of xquery:
It is easy to learn if you have knowledge of sql.
It is built on XPath expressions.
All major databases support xquery.
For example
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
The XQuery is as follows
doc("[Link]")/bookstore/book/title
doc("[Link]")/bookstore/book[price<30]
The XQuery above will extract the following:
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>