Question 1. The data entry operator wants to insert:
1. Photograph
2. Write remarks about the photograph
3. Underline the heading.
He will use:
Answer:
1. Photograph: The <img> tag (with the 'src' attribute) to insert the image file.
2. Write remarks about the photograph: The 'alt' attribute within the <img> tag to provide descriptive text, or the <figcaption> tag inside a <figure> element.
3. Underline the heading: The <u> tag to apply an underline to the heading text.
In simple words: To show a picture on a webpage, use the <img> tag. To add a description or remark for that picture, use the 'alt' attribute, and use the <u> tag to draw a line under your heading.

🎯 Exam Tip: When writing HTML tags in your exam, always remember to include the angle brackets < > and mention key attributes like 'src' for images to score full marks.

 

Question 1. Select the correct tags from the list below and arrange them in the sequence:
1. <Image>
2. <Text>
3. <TextArea>
4. <Img>
5. <UL>
6. <U>

Items to match:
1. Photograph
2. Write remarks about the photograph
3. Underline the heading
Answer:
1. Photograph – <Img>
2. Write remarks about the photograph – <TextArea>
3. Underline the heading – <U>
These tags are essential for structuring media, text inputs, and text styles on a webpage.
In simple words: To show a picture, we use the <img> tag. To write a long comment or remark, we use the <textarea> tag. To draw a line under a heading, we use the <u> tag.

🎯 Exam Tip: Remember that HTML tags are case-insensitive, but it is best practice to write them in lowercase. Always match the specific tag function to its correct name.

 

Question 2. Identify the logical operators in JavaScript.
1. OR
2. AND
3. ||
4. &
5. &&
6. ++
Answer: ||, &&
These operators are used to perform logical operations and return a boolean value of true or false.
In simple words: In JavaScript, we use || to mean "OR" and && to mean "AND" when comparing conditions.

🎯 Exam Tip: Do not confuse the single ampersand (&) which is a bitwise operator with the double ampersand (&&) which is the logical AND operator.

Complete the Following Activity:

 

Question 1. State at least three attributes of <Input>
Answer: Three attributes of the <input> tag are:
1. type (specifies the type of input control to display)
2. name (defines the name of the input element)
3. value (specifies the initial value of the input field)
These attributes help customize how the input field behaves and looks on the form.
In simple words: The <input> tag uses "type" to decide if it is a text box or a button, "name" to identify it, and "value" to set its starting text.

🎯 Exam Tip: Always remember that the 'type' attribute is the most important one for <input> because it defines whether the input is text, password, checkbox, or radio button.

 

Question 1. Complete the web diagram showing the attributes of the <input> tag.
Answer:
The attributes of the <input> tag are:
• Value
• Size
• List
In simple words: The <input> tag in HTML has different attributes like 'value' to set a starting text, 'size' to change how wide the text box is, and 'list' to link it to a list of options.

🎯 Exam Tip: Remember that the <input> tag is one of the most versatile tags in HTML forms, and knowing its key attributes like value, size, and list is essential for scoring full marks.

 

Question 2. Complete the diagram by identifying the correct physical tags used for subscript, italic, and superscript text.
Answer:
• For H₂O (Subscript): <sub>
• For Hello (Italic): <i>
• For a¹² (Superscript): <sup>
In simple words: Use <sub> to make text smaller and lower (like the 2 in water's formula), <i> to tilt text sideways, and <sup> to raise text up high (like a power in math).

🎯 Exam Tip: Do not confuse <sub> (subscript) with <sup> (superscript). A handy trick is to remember 'p' in sup stands for 'power' which always goes up.

 

Question 3. Group the following HTML tags into Paired tags and Empty tags/unpaired tags: <b>, <i>, <u>, <p>, <a>, <br>, <hr>, <img>.
Answer:
• Paired tags: <b>, <i>, <u>, <p>, <a>
• Empty tags/unpaired tags: <br>, <hr>, <img>
In simple words: Paired tags always come in twos with an opening and a closing tag (like <b> and </b>), while empty tags stand alone and do not need a closing tag (like <br> for a line break).

🎯 Exam Tip: Always write the closing slash for paired tags in your theory answers to show the examiner you understand how they open and close properly.

HTML Tags Classification

• Paired Tags: <a>, <form>, <table>, <Title>, <head>
• Empty Tags / Unpaired Tags: <img>, <hr>, <br>

 

Question 4. Write operator names with symbols in boxes.
Answer: The relational operators with their symbols are:
• Less than (<)
• Greater than (>)
• Less than or equal to (<=)
• Greater than or equal to (>=)
• Equal to (==)
• Not equal to (!=)
In simple words: Relational operators are symbols used to compare two values, like checking if one number is bigger, smaller, or equal to another.

🎯 Exam Tip: Remember that the 'equal to' relational operator in JavaScript is written as double equals (==), not a single equal sign (=) which is used for assigning values.

 

Question 5. Complete following program to display multiplication of 6.40 and 300.
<!DOCTYPE html>
<html>
<head><title> Series </title></head>
<body>
Answer:
<!DOCTYPE html>
<html>
<head>
    <title> Series </title>
</head>
<body>
    <script type="text/javascript">
        var num1 = 6.40;
        var num2 = 300;
        var product = num1 * num2;
        document.write("Multiplication of 6.40 and 300 is: " + product);
    </script>
</body>
</html>
In simple words: This program uses a simple JavaScript script inside HTML to multiply 6.40 by 300 and display the result on the screen.

🎯 Exam Tip: Always close your script tags (</script>) and HTML tags properly to ensure the code executes without errors.

Question. Complete the following HTML and JavaScript code:
[______]
var x = [______];
var y = [______];
document.write( x [______] y );
[______]
</html>
Answer:
<!DOCTYPE html>
<html>
<head><title> Series </title></head>
<body>
<script language="javascript">
var x = 6.40;
var y = 300;
document.write( x * y );
</script>
</html>
In simple words: To complete the code, we add the script tag to start JavaScript, set the values of x and y, use the asterisk (*) to multiply them, and close the script tag.

🎯 Exam Tip: Always make sure to use the correct multiplication symbol (*) in programming instead of 'x' or '×'.

 

3. Find out errors if any in the following JavaScript code.

 

Question 1.
var length, breadth;
length=4.5;
breadth=6;
area=1/2*length*breadth;
document.write(“Area of triangle is”area);
Answer:
The concatenation operator '+' is missing in the document.write() statement.
Corrected line:
document.write("Area of triangle is" + area);
In simple words: In JavaScript, when you want to join text and a variable together in a print statement, you must use the plus (+) sign to connect them.

🎯 Exam Tip: Remember that omitting the '+' operator when joining strings and variables in document.write() will cause a syntax error and stop the script from running.

 

4. Solve the following puzzles.

 

Question A. Fill the blocks
1) Across
2. The tag is used to create a table row.
4. Tag to create a form
2) Down
1. The attribute is used to specify the path of a linked document.
3. The tag used to display horizontal ruled line
Answer:
Across
2. <tr>
4. <form>
Down
1. href
3. <hr>
These tags and attributes are fundamental building blocks of HTML structure.
In simple words: This puzzle helps us remember HTML tags like <tr> for table rows, <form> for forms, <hr> for horizontal lines, and the href attribute for links.

🎯 Exam Tip: Always remember to write HTML tags inside angle brackets < > and attributes without brackets when answering crossword puzzles.

 

Question B. Solve the puzzle by finding words with the help of the hint given below.

 

Question 1. Find the JavaScript words in the grid for the following clues:
1. Boolean value.
2. Keyword used in conditional if statement.
3. Built-In function in JavaScript
4. Function to check given value is number or not
5. Keyword used to declare a variable
6. Function used to evaluate given expression

p	z	c	b	e	p	e	s
r	l	o	m	v	d	l	l
s	k	n	s	a	r	s	t
y	e	f	a	l	s	e	d
w	q	i	s	n	a	n	g
v	a	r	o	s	d	y	z
i	l	m	e	n	c	x	i

Answer:
1. False
2. if
3. confirm
4. nan
5. var
6. False

p	z	c	b	e	p	e	s
r	l	o	m	v	d	l	l
s	k	n	s	a	r	s	t
y	e	f	a	l	s	e	d
w	q	i	s	n	a	n	g
v	a	r	o	s	d	y	z
i	l	m	e	n	c	x	i

These terms represent fundamental building blocks of JavaScript programming that control logic and store data.
In simple words: This word search puzzle helps you find important JavaScript terms hidden in a grid of letters. You can find words like "false", "if", "confirm", "nan", and "var" written horizontally, vertically, or even backwards.

🎯 Exam Tip: When solving word search puzzles in exams, look for the first letter of the keyword in the grid first, then check all surrounding directions to find the complete word quickly.

5. Trace the Output of the Following HTML Code.

 

Question 1.
<!DOCTYPE html>
<html>
<head>
<title>Heading tags</title></head>
<body>
<h1 align=left>Information Technology</h1>
<hr>
<h2 align=center>XI Standard</h2>
<h3 align=right>Division</h3>
</body>
</html>
Answer:

This output displays three levels of headings with different alignments separated by a horizontal rule.
In simple words: This code displays "Information Technology" on the left in large letters, draws a line across the page, puts "XI Standard" in the middle, and places "Division" on the right side in smaller letters.

🎯 Exam Tip: When tracing HTML output, pay close attention to the alignment attributes (left, center, right) and heading sizes (h1 is the largest, h3 is smaller).

 

6. Discuss the Following and Answer the Questions.

 

Question 1. A Jr. web designer wants to design a webpage to enter the employee’s name, address. He needs a button to clear the form content and submit the data. Write the different controls he will use to create the web page. State the tags to be used for the controls.
Answer: A Junior Web designer will use the following controls to design the webpage:
1. Text – to create a single-line textbox for employee name.
2. Text or Textarea – If he wants to create a single-line address, the text control is used; otherwise, to create a multiline address, textarea is used.
3. Submit – It is used to submit form data to the server.
4. Reset – It is used to clear form data.

Tags used for the controls are:
1. Employee Name: <input type="text">
2. Address: <input type="text"> or <textarea></textarea>
3. Submit: <input type="submit">
4. Reset: <input type="reset">
Using these standard form elements ensures that user input is captured and processed correctly.
In simple words: To make this form, the designer uses text boxes for the name and address, a submit button to send the info, and a reset button to clear everything and start over.

🎯 Exam Tip: Clearly distinguish between the "control name" (like Textarea) and the actual "HTML tag" (like <textarea>) to secure full marks in web design questions.

 

Question 2. A teacher has asked a student to create a web page to accept numbers and check whether it is between 50 to 100.
List the variable, operators to be used.
Specify the built-in function used and structure used.
Answer:
Program:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script language="Javascript">
//To check whether the given no is between 50 to 100
var n;
n=prompt("Enter any number");
if(n<50 || n>100)
{
alert("it is less than 50, Please Re-Enter");
}
else
{
alert("it is greater than 50. Please Re-Enter");
}
</script>
</body>
</html>

Variables used ‘n’
Operators used Not is equals || less then < grater then > etc
Function is Prompt(), Alert() if then Else. This basic validation script ensures that user input falls within the specified range before proceeding.
In simple words: This program asks the user to type a number. It then checks if the number is smaller than 50 or larger than 100, and shows an alert message on the screen depending on the result.

🎯 Exam Tip: When writing JavaScript programs, always remember to enclose your code within the <script> and </script> tags inside the HTML body. Double-check your conditional operators like || (OR) and && (AND) to avoid logic errors.

 

7. Create Web Pages for the Following

 

Question 1. Write a program using HTML to design your class Time Table.
Answer:
Program <!DOCTYPE html>
<html>
<head><title> Time Table of Class XI</title>
</head>
<body bgcolor="yellow">
<h2>Time Table of Class XI</h2>
<table border="2" bgcolor="skyblue">
<tr>
<th>Period No</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>1</td>
<td>Book Keeping</td>
<td>Economics</td>
<td>Maths</td>
<td>Maths</td>
<td>English</td>
<td>English</td>
</tr>
<tr>
<td>2</td>
<td>Maths</td>
<td>Maths</td>
<td>Book Keeping</td>
<td>Economics</td>
<td>English</td>
<td>IT</td>
</tr>
</table>
</body>
</html>
This code creates a structured grid layout representing a weekly school schedule.
In simple words: This HTML code creates a colorful table to show a school timetable. It uses rows and columns to organize subjects for each period of the day.

🎯 Exam Tip: Remember to use the table, tr, th, and td tags correctly to structure your timetable, and always close your tags to avoid layout errors.

3	Maths	Maths	Book Keeping	Economics	IT	IT
LUNCH BREAK
4	Organization of Commerce	Secretarial Practice	EVS	IT	Economics	English
5	Secretarial Practice	EVS	EVS	IT	Economics	English
SHORT BREAK
6	Organization of Commerce	Secretarial Practice	Maths	Maths	English	—

 

Question 2. Write a program using HTML to create a form and submit it with personal data like name, address, and standard.
Answer:
This form uses standard input fields and a submit button to process user information efficiently.

<!DOCTYPE html>
<html>
<head>
    <title>Personal Data Form</title>
</head>
<body>
    <h2>Personal Data Form</h2>
    <form action="#" method="post">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name" required><br><br>

        <label for="address">Address:</label><br>
        <textarea id="address" name="address" rows="4" cols="30" required></textarea><br><br>

        <label for="standard">Standard:</label><br>
        <input type="text" id="standard" name="standard" required><br><br>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

In simple words: This HTML code creates a simple form where users can type their name, address, and standard. When they click the submit button, this information is sent to the server.

🎯 Exam Tip: Remember to use the correct 'type' attributes for input elements and always include a submit button to make the form functional.

Answer:
Program:
<!DOCTYPE html>
<html>
<head>
<title> Form</title>
</head>
<body bgcolor="#FF0100">
<h1>Personal Data</h1><br><br><br>
Name :<input type=text name=t1><br><br>
Address:<Textarea> Address Here </textarea><p><br>
Class XI <input type=radio name=c1 value=xi>
Class XII <input type=radio name=c1 value=xii><br>
<input type=Submit name=b1 value=Submit>
<input type=reset name=b2 value=Reset>
</body>
</html>
In simple words: This HTML code creates a simple web form with a red background where users can enter their name, address, and select their class (XI or XII) using radio buttons.

🎯 Exam Tip: Always remember to close all HTML tags properly and use appropriate input types like radio for single-choice options to ensure form validation works correctly.

 

Question 3. Write a javascript program to accept two numbers and perform the addition of two numbers by using the mouseover event.
Answer:
<html>
<head>
<title> JavaScript Program </title>
<script language = "JavaScript">
In simple words: This is the beginning of a JavaScript program designed to take two numbers from the user and add them together when a mouseover event occurs.

🎯 Exam Tip: When writing event-driven JavaScript, ensure the event handler (like onmouseover) is correctly linked to the HTML element to trigger the function.

 

Question 1. Write a JavaScript program to accept two numbers from the user using prompt boxes, add them, and display the result when the user moves the mouse pointer over a link.
Answer:
Below is the HTML and JavaScript code to perform the addition of two numbers using the onMouseover event:

<script>
function iload()
{
var c=0
a=parseInt(prompt("Enter 1st no."));
b=parseInt(prompt("Enter 2nd no."));
c=a+b
document.write("Addition is"+c);
}
</script>
</head>
<body><center><br><br><br><br><br>
<a onMouseover="iload();">Addition</a></center>
</body>
</html>

This program utilizes the parseInt() function to convert the user's string input into integers before performing the addition.
In simple words: This code asks the user to type in two numbers when they hover their mouse over the 'Addition' link. It then adds those numbers together and shows the result on the screen.

🎯 Exam Tip: Always remember to use parseInt() when taking numerical input via prompt(), otherwise JavaScript will concatenate the inputs as strings instead of adding them.

 

Question 8. Complete the following.
Answer:
To create the webpage shown in the screenshots that prompts the user for two numbers on a mouseover event and displays their sum, use the following HTML and JavaScript code:

<!DOCTYPE html>
<html>
<head>
    <title>Mouseover Addition</title>
    <script type="text/javascript">
        function calculate() {
            var num1 = prompt("Enter 1st no.");
            var num2 = prompt("Enter 2nd no.");
            var result = parseInt(num1) + parseInt(num2);
            document.write("Addition is " + result);
        }
    </script>
</head>
<body>
    <h2 onmouseover="calculate()">Hover here to add numbers</h2>
</body>
</html>

This script demonstrates how event handlers like onmouseover can trigger interactive JavaScript functions to dynamically process user input.
In simple words: This code asks the user to enter two numbers when they move their mouse over the heading. It then converts those inputs into numbers, adds them together, and shows the total sum on the screen.

🎯 Exam Tip: Remember to use conversion functions like parseInt() or Number() when adding values from a prompt, as prompt() always returns data as a string.

Question 1. Complete the following diagram showing events and when they occur:
Answer:

• onClick: When user clicks an element
• onKeyup: When user releases key
• onMouseup: When user releases a mousebutton over an element

In simple words: This diagram shows different actions (events) a user can do on a webpage, like clicking or releasing a key, and explains exactly when the browser detects them.

🎯 Exam Tip: Remember that event names in JavaScript are case-sensitive, so pay close attention to the capitalization of letters like 'C' in onClick and 'U' in onKeyup/onMouseup.

 

9. Write HTML Code for the following table.

 

Question 1. Write the HTML code to create the following table:

Place	State	Maximum Temperature in °C
Wardha	Maharashtra	47.5
Akola		46.4
Khajuraho	Madhya Pradesh	46.4
Sagar		46.2

Answer:
<!DOCTYPE html>
<html>
<head>
  <title>Temperature Table</title>
</head>
<body>
  <table border="1" style="border-collapse: collapse; width: 50%; text-align: center;">
    <tr>
      <th>Place</th>
      <th>State</th>
      <th>Maximum Temperature in &deg;C</th>
    </tr>
    <tr>
      <td>Wardha</td>
      <td rowspan="2">Maharashtra</td>
      <td>47.5</td>
    </tr>
    <tr>
      <td>Akola</td>
      <td>46.4</td>
    </tr>
    <tr>
      <td>Khajuraho</td>
      <td rowspan="2">Madhya Pradesh</td>
      <td>46.4</td>
    </tr>
    <tr>
      <td>Sagar</td>
      <td>46.2</td>
    </tr>
  </table>
</body>
</html>
In simple words: This HTML code uses the rowspan attribute to merge cells vertically for states like Maharashtra and Madhya Pradesh so they don't have to be written twice.

🎯 Exam Tip: When merging rows vertically, always use the rowspan attribute in the first cell and omit the corresponding cell in the subsequent rows to avoid breaking the table structure.

 

Question 1. Write an HTML program to create a table displaying the maximum temperatures of different places, grouping them by their respective states using the rowspan attribute.
Answer: Below is the complete HTML code to generate the temperature table. This code demonstrates how to structure tabular data cleanly using standard HTML tags.

<html>
<head>
<title>Html Program</title>
</head>
<body>
<table border="1">
<tr bgcolor="pink">
<th>Place</th>
<th>State</th>
<th>Max <br>Temperature <br>in C</th>
</tr>
<tr align="center" bgcolor="skyblue">
<td>Wardha</td>
<th rowspan="2">Maharashtra</th>
<td>47.5</td>
</tr>
<tr align="center" bgcolor="skyblue">
<td>Akola</td>
<td>46.4</td>
</tr>
<tr align="center" bgcolor="skyblue">
<td>Khajuraho</td>
<th rowspan="2">Madhya Pradesh</th>
<td>46.4</td>
</tr>
<tr align="center" bgcolor="skyblue">
<td>Sagar</td>
<td>46.2</td>
</tr>
</table>
</body>
</html>

Rendered Output Table:

Place	State	Max Temperature in C
Wardha	Maharashtra	47.5
Akola		46.4
Khajuraho	Madhya Pradesh	46.4
Sagar		46.2

In simple words: This HTML code creates a table where cities from the same state are grouped together. The rowspan attribute is used to merge the state cell vertically so we do not have to repeat the state name for each city.

🎯 Exam Tip: When using the rowspan attribute, remember that the spanned cell is only defined in the first row; subsequent rows within the span must omit that cell to prevent alignment errors.

Place	State	Max Temperature in C
Wardha	Maharashtra	47.5
Akola		46.4
Khajuraho	Madhya Pradesh	46.4
Sagar		46.2

10. Multiple Choice One Correct Answer

 

Question 1. The default method of submitting form data is __________
(a) Post
(b) Get
(c) Submit
(d) Reset
Answer: (b) Get
In simple words: When you submit a form on a website without specifying a method, the browser automatically uses "Get" to send the data as part of the web address.

🎯 Exam Tip: Remember that 'Get' is the default method and visible in the URL, whereas 'Post' is more secure and hidden from the URL.

 

Question 2. In JavaScript the post increment operator is __________
(a) x++
(b) x--
(c) --x
(d) ++x
Answer: (a) x++
In simple words: The post-increment operator 'x++' uses the current value of x first, and then increases it by 1.

🎯 Exam Tip: Always distinguish between pre-increment (++x) and post-increment (x++) as they affect the order of operations in expressions.