Web Applications

Practical Examination – Web Applications Class XI (CBSE 803)

Class 11 · Web Applications

Practical Examination – Web Applications

The practical examination for Web Applications (Subject Code 803) is designed to assess the student's ability to apply concepts learned in HTML, CSS, GIMP and JavaScript.

The examination is practical and application-oriented. Students should demonstrate that they can create webpages, apply appropriate styling, design multimedia content, and write and execute basic JavaScript programs.

Practical Examination Areas
  • HTML and CSS
  • GIMP
  • JavaScript

1. HTML and CSS Practical

Students should be able to create and format webpages using HTML and CSS. The practical work should demonstrate proper use of HTML elements, webpage structure, hyperlinks, images, lists, tables and forms.

Important HTML Skills

  • Create a basic HTML document.
  • Use headings and paragraphs.
  • Insert images into a webpage.
  • Create ordered and unordered lists.
  • Create and format tables.
  • Create hyperlinks.
  • Create forms using appropriate form controls.
  • Use <div> and <span>.
  • Embed audio and video where required.
  • Organise webpage content logically.

Important CSS Skills

  • Understand the purpose of CSS.
  • Apply CSS to HTML elements.
  • Use inline CSS.
  • Use internal CSS.
  • Use external CSS.
  • Apply colours, fonts and text formatting.
  • Control margins, padding and borders.
  • Understand the CSS box model.
  • Use CSS with <div> elements.
  • Create a visually organised webpage.

Sample HTML and CSS Practical Task

Task: Create a webpage titled "My School" containing a heading, school image, introductory paragraph, list of facilities, a table showing class information and a hyperlink to the school website. Apply CSS to improve the appearance of the webpage.

Sample Solution

<!DOCTYPE html>
<html>

<head>
    <title>My School</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            text-align: center;
        }

        img {
            width: 300px;
        }

        table {
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
        }
    </style>
</head>

<body>

    <h1>My School</h1>

    <p>
        Welcome to my school webpage.
    </p>

    <img src="school.jpg" alt="School Building">

    <h2>Facilities</h2>

    <ul>
        <li>Computer Lab</li>
        <li>Science Lab</li>
        <li>Library</li>
        <li>Sports Ground</li>
    </ul>

    <h2>Class Information</h2>

    <table>
        <tr>
            <th>Class</th>
            <th>Students</th>
        </tr>

        <tr>
            <td>XI-A</td>
            <td>35</td>
        </tr>

        <tr>
            <td>XI-B</td>
            <td>38</td>
        </tr>
    </table>

    <p>
        <a href="https://www.example.com">
            Visit Website
        </a>
    </p>

</body>

</html>

2. GIMP Practical

The GIMP component assesses the student's ability to use a multimedia-design tool for creating and editing graphical content.

Students should be familiar with the GIMP interface, toolbox, filters and layers.

Important GIMP Skills

  • Create a new image with appropriate dimensions.
  • Open and save image files.
  • Use tools available in the GIMP toolbox.
  • Select and manipulate image elements.
  • Add and format text.
  • Resize and crop images.
  • Apply suitable filters.
  • Create and manage layers.
  • Arrange graphical elements effectively.
  • Export the final design in an appropriate format.

Sample GIMP Practical Task

Task: Create a poster for a School Annual Function.

Suggested Content

  • School name
  • Event title
  • Date and time
  • Venue
  • Relevant image or graphic
  • Decorative design elements

Suggested Procedure

  1. Open GIMP.
  2. Create a new canvas with suitable dimensions.
  3. Import an appropriate image if required.
  4. Create separate layers for the background, images and text.
  5. Add the event title.
  6. Add date, time and venue information.
  7. Apply suitable formatting to the text.
  8. Use appropriate filters or effects where required.
  9. Arrange all elements neatly.
  10. Save the editable GIMP file.
  11. Export the final design in the required image format.

3. JavaScript Practical

Students should be able to write, execute and test basic JavaScript programs based on the concepts covered in the chapter.

Important JavaScript Skills

  • Use the <script> tag.
  • Declare and use variables.
  • Work with different data types.
  • Accept input using prompt().
  • Display output using appropriate methods.
  • Perform arithmetic calculations.
  • Use comparison and logical operators.
  • Use built-in functions.
  • Use conditional statements.
  • Use loops.

Sample JavaScript Practical 1: Even or Odd

Task: Write a JavaScript program to accept a number and check whether it is even or odd. 

<script>

let n = Number(prompt("Enter a number:"));

if (n % 2 == 0) {
    document.write("Even Number");
} else {
    document.write("Odd Number");
}

</script>

Sample JavaScript Practical 2: Greatest of Two Numbers

Task: Accept two numbers and display the greater number. 

<script>

let a = Number(prompt("Enter first number:"));
let b = Number(prompt("Enter second number:"));

if (a > b) {
    document.write(a + " is greater");
} else if (b > a) {
    document.write(b + " is greater");
} else {
    document.write("Both numbers are equal");
}

</script>

Sample JavaScript Practical 3: Multiplication Table

Task: Accept a number and display its multiplication table from 1 to 10. 

<script>

let n = Number(prompt("Enter a number:"));

for (let i = 1; i <= 10; i++) {
    document.write(
        n + " × " + i + " = " + (n * i) + "<br>"
    );
}

</script>

Sample JavaScript Practical 4: Factorial

Task: Accept a number and calculate its factorial. 

<script>

let n = Number(prompt("Enter a number:"));
let factorial = 1;

for (let i = 1; i <= n; i++) {
    factorial = factorial * i;
}

document.write("Factorial = " + factorial);

</script>

Sample JavaScript Practical 5: Sum of Natural Numbers

Task: Accept a positive integer and calculate the sum of natural numbers from 1 to that number. 

<script>

let n = Number(prompt("Enter a number:"));
let sum = 0;

for (let i = 1; i <= n; i++) {
    sum = sum + i;
}

document.write("Sum = " + sum);

</script>

Practical Examination Preparation

Students should practise each component regularly rather than memorising individual programs or procedures. The objective is to develop the ability to understand a task and implement an appropriate solution.

HTML and CSS Checklist

  • Can I create a valid HTML document?
  • Can I insert and format images?
  • Can I create ordered and unordered lists?
  • Can I create a table?
  • Can I create hyperlinks?
  • Can I create a form?
  • Can I use <div> and <span>?
  • Can I apply inline, internal and external CSS?
  • Can I apply the CSS box model?
  • Can I format a webpage using CSS?

GIMP Checklist

  • Can I create a new image?
  • Can I use the GIMP toolbox?
  • Can I add and edit text?
  • Can I work with images?
  • Can I create and manage layers?
  • Can I apply filters?
  • Can I save my editable project?
  • Can I export the final design?

JavaScript Checklist

  • Can I correctly use the <script> tag?
  • Can I declare variables?
  • Can I accept numerical input using prompt()?
  • Can I convert input to a number?
  • Can I perform arithmetic operations?
  • Can I use comparison and logical operators?
  • Can I use if...else?
  • Can I use switch?
  • Can I write a for loop?
  • Can I write a while loop?
  • Can I write a do...while loop?
  • Can I identify and correct basic syntax errors?

Practical Examination Strategy

  1. Read the complete task first. Understand what the final output is expected to contain.
  2. Plan before coding or designing. Identify the required HTML elements, CSS properties, design elements or JavaScript logic.
  3. Work systematically. Complete the structure first and then add formatting and enhancements.
  4. Test your work. Check the webpage, graphical design or JavaScript output before submitting it.
  5. Check spelling and syntax. Small errors in HTML, CSS or JavaScript can affect the final output.
  6. Save files correctly. Keep the required source and output files in the appropriate location.
  7. Review the final result. Make sure that all requirements mentioned in the task have been completed.

Suggested Practical Examination Tasks

Area Possible Practical Task
HTML Create a webpage containing images, lists, tables and hyperlinks.
HTML Forms Create a registration or feedback form using appropriate controls.
CSS Apply CSS to format and design a webpage.
GIMP Create a poster, e-invite, brochure or advertisement.
JavaScript Write a program involving input, calculation and output.
JavaScript Write a program using conditional statements.
JavaScript Write a program using a loop.

Key Skills to Demonstrate

A successful practical examination should demonstrate four important abilities:

Understand the Task
↓
Plan the Solution
↓
Implement the Solution
↓
Test and Present the Result

The focus should be on correct implementation, logical thinking, appropriate use of tools and the ability to produce the required output independently.

Quick Revision

Component Core Areas to Practise
HTML Images, Lists, Tables, Hyperlinks, Forms, Div, Span, Audio and Video
CSS Inline, Internal, External CSS, Styling and Box Model
GIMP Toolbox, Filters, Layers and Multimedia Design
JavaScript Variables, Data Types, Operators, Input/Output, Conditions and Loops
Practical Tip:

Do not limit preparation to reading programs or observing demonstrations. Type the programs yourself, create webpages from scratch, practise GIMP designs and test your work repeatedly. Practical skill develops through actual implementation.

More Web Applications Notes

Chapter 1: Basics of Networking – Web Applications Class XI (CBSE 803) Chapter 1: Basics of Networking
→
Chapter 2: Website Building Using HTML and CSS - Web Applications Class XI (CBSE 803) Chapter 2: Website Building Using HTML and CSS
→
Chapter 3: Multimedia Design Using GIMP – Web Applications Class XI (CBSE 803) Chapter 3: Multimedia Design Using GIMP
→
Chapter 4: JavaScript Part 1 – Web Applications Class XI (CBSE 803) Chapter 4: JavaScript Part 1
→
Project Work – Web Applications Class XI (CBSE 803) Project Work
→

← Back to all Web Applications notes