Class 11 Web Application-803 practical file should include exercises and a project based on HTML, CSS, GIMP, and JavaScript, as per the CBSE...

Class 11 Web Application-803 practical file should include exercises and a project based on HTML, CSS, GIMP, and JavaScript, as per the CBSE syllabus. The practical component carries significant marks (50 out of 100 total marks, with 30 in the lab test).

803-Web Application Practical File Class XI

Your practical file should document specific exercises and a comprehensive project, with each entry following a standard format (e.g., Aim, Theory/Concept, Procedure, Code with comments, Output, and Discussion).

[VIEW PRACTICAL QUESTIONS-WEB APPLICATION]

Download Book Web application-803 [Download]

1. HTML and CSS Exercises

These exercises focus on building static web pages.

Basic Structure: Create a webpage using fundamental HTML tags (<html>, <head>, <title>, <body>, headings <h1> to <h6>, paragraphs <p>, line breaks <br>, horizontal rules <hr>)
Formatting and Styles: Use font tags, bold <b>, italics <i>, underline <u>, superscript <sup>, and subscript <sub>.
Lists and Tables: Implement ordered <ol>, unordered <ul>, and definition <dl> lists. Create tables using <table>, <tr>, <th>, <td> tags with attributes like border, rowspan, and colspan.
Images and Multimedia: Embed images (<img> tag with src, width, height, alt attributes) and multimedia files (audio and video) into a webpage.
Links and Forms: Create internal and external hyperlinks using the anchor tag <a>. Design forms with text boxes, radio buttons, checkboxes, password fields, and combo boxes.
CSS Implementation: Demonstrate the three ways of implementing CSS (inline, internal, and external style sheets) to control elements like color, background, font, alignment, and the box model.

2. Multimedia Design Exercises (GIMP)

These tasks involve basic image manipulation using GIMP (GNU Image Manipulation Program).

Image Editing: Use drawing and selection tools (rectangle, ellipse, intelligent scissors) to create and edit images.
Layers and Filters: Work with layers and apply various filters to an image.
Creative Projects: Design simple items like a brochure, advertisement, e-invite, or poster using GIMP tools.

3. JavaScript Exercises

These exercises introduce dynamic content and basic scripting logic.

Basic Programs: Write simple JavaScript programs using variables, data types, and operators (e.g., for simple calculations).
Control Flow: Implement conditional statements (if, if...else, switch) and loops (for, while, do-while) for decision making and iteration.
Browser Interaction: Use built-in functions and objects like window, location, and history, and create popup boxes (alert, confirm).

4. Project Work

The project should integrate most of the concepts learned. A good project would be a simple static website (e.g., for a school, a personal portfolio, or a small business) using multiple HTML pages linked together, enhanced with CSS for styling, and possibly including some basic JavaScript functionality.

5.Practical File Format

Index: A clear table of contents listing all experiments and the project, with page numbers.
Certificate: A standard school certificate page signed by the teacher and principal.
Experiment Pages: For each entry, include:

Aim: A brief description of the objective.
Theory: The underlying concepts (e.g., definition of a specific HTML tag, CSS property, or JavaScript function).
Code: The actual code used, with appropriate comments.
Output: A screenshot or printout of the webpage/result.

Viva Voce Questions: Potential questions and answers related to the experiment's concepts.

Project Report: Detailed documentation of your main project, including planning, design, code, and final output.

Questions for 803-Web Application Practical File Class XI

HTML & CSS Questions (1-10)

Create a simple static webpage about your school, using headings (<h1> to <h6>), paragraphs, and horizontal rules.
Design a resume/CV using an HTML table. Ensure you use rowspan and colspan attributes to merge cells appropriately.
Create an HTML form that accepts user details, including name (text input), gender (radio buttons), hobbies (checkboxes), city (dropdown list), and a submit button.
Implement three types of lists (ordered, unordered, and definition lists) to display a menu for a restaurant.
Embed an image of your favorite place on a webpage. Use the src, alt, width, and height attributes to control its display.
Link multiple HTML pages (e.g., Home, About Us, Contact Us) using the anchor tag <a>. Ensure external links open in a new browser tab.
Apply CSS to a webpage using all three methods: inline, internal (embedded), and external style sheets. Explain which method has the highest priority.
Use CSS properties like color, background-color, font-family, font-size, and text-align to enhance the appearance of an HTML page.
Implement the CSS Box Model using the div tag to demonstrate content, padding, border, and margin differences.
Design a simple navigation bar for a website using an unordered list and CSS to style it horizontally.

GIMP Questions (11-14)

Open an image in GIMP and use various selection tools (e.g., Rectangle Select, Ellipse Select, Fuzzy Select) to select different parts of the image.
Work with layers: Open two different images, copy one onto the other as a new layer, and adjust its opacity and position.
Apply a filter (e.g., Gaussian Blur, Old Photo, or any artistic filter) to a specific layer of an image.
Design a basic e-invite or poster using drawing tools, text, and different layers in GIMP.

JavaScript Questions (15-20)

Write a JavaScript program to input two numbers from a user using prompt() and display their sum, difference, product, and quotient using alert() or document.write().
Create a function in JavaScript that checks if a user is eligible to vote (age >= 18) and displays an appropriate message.
Implement a program using loops (e.g., for or while) to print the multiplication table of a given number.
Differentiate between the == and === operators in JavaScript with a practical example.
Create an HTML page with a button that, when clicked, uses JavaScript to change the background color of the webpage.
Use a switch statement in JavaScript to display the name of the day corresponding to a number input by the user (1 for Monday, 2 for Tuesday, etc.)

Here are the solutions for the first five HTML questions.

Question 1: Simple School Webpage

This code uses <h1> for the main heading, <p> for paragraphs, and <hr> for a horizontal line.
html

[<!DOCTYPE html>
<html>
<head>
<title>My School</title>
</head>
<body>
<h1>Welcome to ABC School</h1>
<hr>
<p>Our school is a place where students receive quality education. We offer various facilities to enhance learning. Students participate in sports, cultural events, and clubs </p>
<h2>Our Facilities</h2>
<p>We have modern classrooms equipped with the latest technology, a well-stocked library, and spacious sports facilities.</p>
<hr>
</body>
</html>]

Question 2: Resume/CV Table

This example uses rowspan to make the "Contact Info" cell span two rows and colspan to make the "Skills" header span two columns.
html

[<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body>
<h2>John Doe Resume</h2>
<table>
<tr>
<th rowspan="2">Contact Info</th>
<td>Email: john@example.com</td>
</tr>
<tr>
<td>Phone: 555-1234</td>
</tr>
<tr>
<th colspan="2">Education</th>
</tr>
<tr>
<td>Degree</td>
<td>University Name, Year</td>
</tr>
<tr>
<th colspan="2">Skills</th>
</tr>
<tr>
<td colspan="2">HTML, CSS, JavaScript, GIMP</td>
</tr>
</table>
</body>
</html>]

Question 3: HTML Form

This form includes input types for text, radio buttons (single choice), checkboxes (multiple choices), and a dropdown list

[<!DOCTYPE html>
<html>
<head>
<title>User Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="/submit_page" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>

<label>Hobbies (Select all that apply):</label><br>
<input type="checkbox" id="hobby1" name="hobbies" value="reading">
<label for="hobby1">Reading</label><br>
<input type="checkbox" id="hobby2" name="hobbies" value="gaming">
<label for="hobby2">Gaming</label><br>
<input type="checkbox" id="hobby3" name="hobbies" value="sports">
<label for="hobby3">Sports</label><br><br>

<label for="city">Choose a city:</label>
<select id="city" name="city">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="bangalore">Bangalore</option>
</select><br><br>

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

Question 4: Three Types of Lists

This example uses an unordered list (<ul>), an ordered list (<ol>), and a definition list (<dl>) to structure a menu.

[<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu Lists</title>
</head>
<body>
<h2>Our Menu Highlights</h2>

<h3>Appetizers (Unordered List)</h3>
<ul>
<li>Spring Rolls</li>
<li>Paneer Tikka</li>
<li>French Fries</li>
</ul>

<h3>Main Courses (Ordered List)</h3>
<ol>
<li>Dal Makhni</li>
<li>Hakka Noodles</li>
<li>Cheese Chilly</li>
</ol>

<h3>Definitions (Definition List)</h3>
<dl>
<dt>Dal Makhni</dt>
<dd>- A popular North Indian dish with lentils.</dd>
<dt>Hakka Noodles</dt>
<dd>- Indo-Chinese style stir-fried noodles.</dd>
</dl>
</body>
</html>]

Question 5: Embed an Image

The <img> tag is a self-closing tag used to embed an image. You'll need an image file (e.g., sunset.jpg) in the same folder as your HTML file for this to work.

[<!DOCTYPE html>
<html>
<head>
<title>Image Embedding</title>
</head>
<body>
<h2>My Favorite Place</h2>

<img src="sunset.jpg" alt="A beautiful sunset view" width="500" height="300">
<p>This is a picture of a serene sunset.</p>
</body>
</html>]

Question 6: Linking Multiple Pages

This requires three separate files (index.html, about.html, contact.html).
File 1: index.html

[<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<h2>Home Page</h2>
<p>Welcome to our website! Use the links below to navigate.</p>

<a href="about.html">About Us</a> |
<a href="contact.html">Contact Us</a> |

<a href="https://www.google.com" target="_blank">Visit Google</a>
</body>
</html>]

File 2: about.html

[<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
</head>
<body>
<h2>About Us Page</h2>
<p>We are a company dedicated to web development.</p>
<a href="index.html">Go Home</a>
</body>
</html>]

File 3: contact.html

[<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<h2>Contact Us Page</h2>
<p>Reach us at contact@example.com.</p>
<a href="index.html">Go Home</a>
</body>
</html>]

Question 7: Implementing All Three CSS Methods

This solution demonstrates inline style (highest priority), internal CSS (second priority), and external CSS (lowest priority).

File 1: styles.css (External Stylesheet)

[p {
color: green; /* This will be overridden by internal and inline styles */
border: 1px solid black;
padding: 10px;
}]

File 2: styles.html

[<!DOCTYPE html>
<html>
<head>
<title>CSS Implementation</title>

<link rel="stylesheet" href="styles.css">

<style>
p {
color: blue; /* Overrides the external green color */
font-weight: bold;
}
</style>
</head>
<body>
<h2>CSS Styling Priority Demo</h2>
<p>This paragraph is blue and bold (Internal CSS).</p>

<p style="color: red; font-style: italic;">
This paragraph is red, italic, and bold (Inline CSS). It has the highest priority.
</p>
</body>
</html>]

Question 8: Basic CSS Properties

Using CSS to change colors, fonts, alignment, etc.

[<!DOCTYPE html>
<html>
<head>
<title>CSS Styling</title>
<style>
body {
background-color: #f0f0f0; /* Light gray background */
font-family: 'Arial', sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: #333;
font-size: 16px;
text-align: justify;
padding: 15px;
background-color: white;
}
</style>
</head>
<body>
<h1>Applying CSS Styles</h1>
<p>
This page uses CSS to set the background color of the body, center the main heading,
and change the font, size, and color of the paragraph text.
</p>
</body>
</html>]

Question 9: The CSS Box Model

This example highlights how padding, border, and margin affect the actual space an element takes up.

[<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<style>
.box {
background-color: lightblue;
width: 200px; /* Content width */
padding: 20px; /* Space between content and border */
border: 5px solid blue; /* Border around padding */
margin: 30px; /* Space outside the border (distance from other elements) */
text-align: center;
}
.container {
border: 2px solid red;
padding: 10px;
}
</style>
</head>
<body>
<h2>CSS Box Model Demonstration</h2>
<div class="container">
<div class="box">
Content Box
</div>
</div>
<p>
The box above has a width of 200px (content), plus 40px padding (20px left/right), plus 10px border (5px left/right). The total width is 250px. The margin of 30px pushes it away from the red container border and the paragraph below it.
</p>
</body>
</html>]

Question 10: Horizontal Navigation Bar

This uses CSS to remove list bullets and display list items side-by-side.

[<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar</title>
<style>
ul.navbar {
list-style-type: none; /* Remove bullets */
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333; /* Dark background */
}
ul.navbar li {
float: left; /* Display items horizontally */
}
ul.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none; /* Remove underlines from links */
}
ul.navbar li a:hover {
background-color: #111; /* Hover effect */
}
</style>
</head>
<body>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<h2>Horizontal Navigation Bar</h2>
<p>This is a simple navigation bar created using an unordered list and CSS.</p>
</body>
</html>]

Here are the solutions/procedures for the GIMP questions (11-14). These instructions describe the steps you would take within the GIMP application for your practical file.

Question 11: Using Selection Tools in GIMP

Aim: To demonstrate the use of various selection tools in GIMP.

Procedure:

Open GIMP and load an image (File > Open).
Select the Rectangle Select Tool from the toolbox (or press R). Click and drag a rectangular area of the image.
Select the Ellipse Select Tool (press E). Draw a circular or oval selection over another part of the image.
Select the Fuzzy Select Tool (Magic Wand, press U). Click on an area of a uniform color (e.g., the sky or a solid background) to select all connected pixels of a similar color.
Select the Intelligent Scissors tool. Click around an object with defined edges; the tool attempts to follow the edges automatically. Double-click the first point to finalize the selection.
Right-click the selections and choose Edit > Cut or Edit > Copy to demonstrate that the selection is active.
Use Select > None to deselect all areas before moving to the next tool.
Output: Screenshots of the GIMP interface showing different active selection outlines.

Question 12: Working with Layers and Opacity

Aim: To practice using layers, copying between images, and adjusting layer opacity.

Procedure:

Open GIMP. Open two different images (File > Open).
In the first image (source), select the entire canvas (Select > All).
Copy the selection (Edit > Copy or Ctrl+C).
Switch to the second image (destination).
Paste the image as a new layer (Edit > Paste as > New Layer or Ctrl+Shift+V).
Locate the Layers Dialog (usually on the right side). The new layer should appear at the top.
Ensure the new layer is selected. Use the Move Tool (press M) to reposition the pasted image.
In the Layers Dialog, find the Opacity slider and reduce the value (e.g., to 50%) to make the top layer semi-transparent, blending it with the background layer.
Save the final combined image (File > Export As...).
Output: A screenshot of the GIMP window showing two layers in the Layers Dialog and the resulting semi-transparent image composite.

Question 13: Applying a Filter

Aim: To apply a creative filter to a specific part of an image.

Procedure:

Open an image in GIMP.
Use a selection tool (e.g., the Ellipse Select Tool) to select a specific area where you want the filter applied (e.g., a person's face or an object).
Make sure the correct layer is active in the Layers Dialog.
Go to the top menu bar and select Filters.
Navigate to a category, for instance, Filters > Blur > Gaussian Blur or Filters > Artistic > Photocopy.
A dialog box for the filter will appear. Adjust the settings (e.g., blur radius) and click "OK".
The filter is applied only to the selected area.
Save the image (File > Export As...).
Output: A screenshot showing the original image next to the filtered image, highlighting the localized filter effect.

Question 14: Designing a Basic Poster/E-invite

Aim: To create a simple graphic design using GIMP's text and drawing tools.

Procedure:

Create a new image (File > New) with appropriate dimensions for a poster (e.g., 800x1200 pixels).
Use the Bucket Fill Tool to set a background color.
Add a new transparent layer for text (Layer > New Layer).
Use the Text Tool (press T) to add a title (e.g., "Annual Sports Day"). Format the font, size, and color using the tool options panel.
Add another new layer for design elements. Use the Paintbrush Tool, Pencil Tool, or Rectangle/Ellipse Select Tools with the bucket fill to add shapes or borders.
Experiment with filters or layer modes to enhance the look.
Ensure all layers are correctly arranged in the Layers Dialog.
Save the working file (File > Save as .xcf) and export the final poster (File > Export As... as .png or .jpg).
Output: A screenshot of the final designed poster/e-invite.

Here are the solutions for the JavaScript questions (15-20), which can be placed within the <script> tags in an HTML file for testing.

Question 15: Simple Calculator using prompt() and alert()

This script takes input from the user and displays results using pop-up boxes.

[<!DOCTYPE html>
<html>
<head>
<title>JS Calculator</title>
</head>
<body>
<h2>Basic Calculator</h2>
<p>Click the button to perform calculations.</p>
<button onclick="calculate()">Start Calculator</button>

<script>
function calculate() {
// prompt() returns strings, so we use parseFloat()
let num1 = parseFloat(prompt("Enter the first number:"));
let num2 = parseFloat(prompt("Enter the second number:"));

if (!isNaN(num1) && !isNaN(num2)) {
let sum = num1 + num2;
let difference = num1 - num2;
let product = num1 * num2;
let quotient = num1 / num2;

let results = "Sum: " + sum + "\n";
results += "Difference: " + difference + "\n";
results += "Product: " + product + "\n";
results += "Quotient: " + quotient;

alert(results);
} else {
alert("Invalid input. Please enter numbers.");
}
}
</script>
</body>
</html>]

Question 16: Voting Eligibility Function (If/Else)

This script checks a condition (age >= 18) using an if-else statement.

[<!DOCTYPE html>
<html>
<head>
<title>Voting Eligibility</title>
</head>
<body>
<h2>Check Voting Status</h2>
<label for="ageInput">Enter your age:</label>
<input type="number" id="ageInput">
<button onclick="checkEligibility()">Check</button>
<p id="resultArea"></p>

<script>
function checkEligibility() {
let age = document.getElementById("ageInput").value;
let resultArea = document.getElementById("resultArea");

if (age >= 18) {
resultArea.textContent = "You are eligible to vote!";
resultArea.style.color = "green";
} else {
resultArea.textContent = "You are not eligible to vote yet.";
resultArea.style.color = "red";
}
}
</script>
</body>
</html>]

Question 17: Multiplication Table using a Loop

This uses a for loop to generate a simple multiplication table.

[<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
</head>
<body>
<h2>Multiplication Table of 7</h2>
<p>The table will be generated below:</p>
<p id="tableOutput"></p>

<script>
window.onload = function() {
let number = 7;
let output = "";

for (let i = 1; i <= 10; i++) {
let result = number * i;
output += number + " x " + i + " = " + result + "<br>";
}

document.getElementById("tableOutput").innerHTML = output;
};
</script>
</body>
</html>]

Question 18: Differentiating == and ===

This demonstrates the difference between the equality operator (==) which performs type coercion, and the strict equality operator (===) which checks both value and type.

[<!DOCTYPE html>
<html>
<head>
<title>Equality Operators</title>
</head>
<body>
<h2>`==` vs `===` Demonstration</h2>
<p>Open the browser console (F12) to see the output.</p>

<script>
let num = 10; // A number type
let str = "10"; // A string type

// Using == (Equality - checks value only after coercion)
if (num == str) {
console.log("== Result: 10 == '10' is true (Type coercion happens)");
} else {
console.log("== Result: False");
}

// Using === (Strict Equality - checks value AND type)
if (num === str) {
console.log("=== Result: True");
} else {
console.log("=== Result: 10 === '10' is false (Different types)");
}
</script>
</body>
</html>]

Question 19: Change Background Color with a Button

This uses a JavaScript function to manipulate the Document Object Model (DOM) to change the body's style property.

[<!DOCTYPE html>
<html>
<head>
<title>Change Background</title>
</head>
<body>
<h2>Dynamically Change Background Color</h2>
<button onclick="changeBackground()">Change Background to Blue</button>

<script>
function changeBackground() {
// Select the body element and change its CSS property
document.body.style.backgroundColor = "lightblue";
}
</script>
</body>
</html>]

Question 20: Day of the Week using switch Statement

The switch statement is a cleaner alternative to multiple if...else if statements for multiple possible values.

[<!DOCTYPE html>
<html>
<head>
<title>Day of the Week</title>
</head>
<body>
<h2>Find the Day Name</h2>
<label for="dayNumber">Enter a number (1-7):</label>
<input type="number" id="dayNumber" min="1" max="7">
<button onclick="findDay()">Find Day</button>
<p id="resultDay"></p>

<script>
function findDay() {
let dayNum = parseInt(document.getElementById("dayNumber").value);
let dayName;

switch (dayNum) {
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
case 4:
dayName = "Thursday";
break;
case 5:
dayName = "Friday";
break;
case 6:
dayName = "Saturday";
break;
case 7:
dayName = "Sunday";
break;
default:
dayName = "Invalid number. Enter 1-7.";
}

document.getElementById("resultDay").textContent = dayName;
}
</script>
</body>
</html>]

803-Web Application Practical File Class XI

803-Web Application Practical File Class XI

1. HTML and CSS Exercises

2. Multimedia Design Exercises (GIMP)

3. JavaScript Exercises

4. Project Work

5.Practical File Format

Questions for 803-Web Application Practical File Class XI

HTML & CSS Questions (1-10)

GIMP Questions (11-14)

JavaScript Questions (15-20)

Here are the solutions for the first five HTML questions.

Question 2: Resume/CV Table

Question 3: HTML Form

Question 4: Three Types of Lists

Question 5: Embed an Image

Question 6: Linking Multiple Pages

Question 7: Implementing All Three CSS Methods

Question 8: Basic CSS Properties

Question 9: The CSS Box Model

Question 10: Horizontal Navigation Bar

Question 11: Using Selection Tools in GIMP

Question 12: Working with Layers and Opacity

Question 13: Applying a Filter

Question 14: Designing a Basic Poster/E-invite

Question 15: Simple Calculator using prompt() and alert()

Question 16: Voting Eligibility Function (If/Else)

Question 17: Multiplication Table using a Loop

Question 18: Differentiating == and ===

Question 19: Change Background Color with a Button

Question 20: Day of the Week using switch Statement

COMMENTS

/fa-clock-o/ WEEK TRENDING$type=list

RECENT WITH THUMBS$type=blogging$m=0$cate=0$sn=0$rm=0$c=4$va=0

RECENT$type=list-tab$date=0$au=0$c=5

REPLIES$type=list-tab$com=0$c=4$src=recent-comments

RANDOM$type=list-tab$date=0$au=0$c=5$src=random-posts

/fa-fire/ YEAR POPULAR$type=one

Pageviews

Translate

Footer Social$type=social_icons