Web Applications

Portfolio / Practical File – Web Applications Class XI (CBSE 803)

Class 11 · Web Applications

Portfolio / Practical File – Web Applications

The Portfolio / Practical File is a collection of practical programs completed by the student during the Web Applications course. It provides evidence of the student's ability to apply HTML and JavaScript concepts through hands-on programming.

Portfolio Requirement

The practical file should contain the prescribed HTML programs and any five JavaScript programs based on the content covered in the course.

1. HTML Programs

The HTML section of the practical file should include programs based on the following topics:

Images
Lists
Tables
Hyperlinks
Forms

1.1 HTML Program – Images

Task: Create an HTML webpage demonstrating the use of images.

Sample Program

<!DOCTYPE html>
<html>

<head>
    <title>Images in HTML</title>
</head>

<body>

    <h1>My School</h1>

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

    <p>
        This webpage demonstrates the use of an image in HTML.
    </p>

</body>

</html>

Learning Focus

<img> tag
src attribute
alt attribute
Image dimensions

1.2 HTML Program – Lists

Task: Create a webpage demonstrating ordered and unordered lists.

Sample Program

<!DOCTYPE html>
<html>

<head>
    <title>HTML Lists</title>
</head>

<body>

    <h1>My Favourite Subjects</h1>

    <h2>Unordered List</h2>

    <ul>
        <li>Computer Science</li>
        <li>Mathematics</li>
        <li>English</li>
    </ul>

    <h2>Ordered List</h2>

    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>

</body>

</html>

Learning Focus

<ul> – Unordered list
<ol> – Ordered list
<li> – List item

1.3 HTML Program – Tables

Task: Create a webpage containing a table to display student information.

Sample Program

<!DOCTYPE html>
<html>

<head>
    <title>Student Table</title>
</head>

<body>

    <h1>Student Information</h1>

    <table border="1">

        <tr>
            <th>Roll No.</th>
            <th>Name</th>
            <th>Class</th>
        </tr>

        <tr>
            <td>1</td>
            <td>Aarav</td>
            <td>XI-A</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Ananya</td>
            <td>XI-A</td>
        </tr>

    </table>

</body>

</html>

Learning Focus

<table>
<tr> – Table row
<th> – Table heading
<td> – Table data

1.4 HTML Program – Hyperlinks

Task: Create a webpage containing hyperlinks to different websites.

Sample Program

<!DOCTYPE html>
<html>

<head>
    <title>Hyperlinks</title>
</head>

<body>

    <h1>Useful Websites</h1>

    <p>
        <a href="https://www.google.com">
            Google
        </a>
    </p>

    <p>
        <a href="https://www.wikipedia.org">
            Wikipedia
        </a>
    </p>

</body>

</html>

Learning Focus

<a> – Anchor tag
href attribute
External hyperlinks
Link text

1.5 HTML Program – Form

Task: Create a student registration form using suitable form controls.

Sample Program

<!DOCTYPE html>
<html>

<head>
    <title>Student Registration Form</title>
</head>

<body>

    <h1>Student Registration Form</h1>

    <form>

        <label>Name:</label>
        <input type="text" name="name">

        <br><br>

        <label>Email:</label>
        <input type="email" name="email">

        <br><br>

        <label>Password:</label>
        <input type="password" name="password">

        <br><br>

        <label>Gender:</label>

        <input type="radio"
               name="gender"
               value="male">
        Male

        <input type="radio"
               name="gender"
               value="female">
        Female

        <br><br>

        <label>Hobbies:</label>

        <input type="checkbox"
               name="hobby"
               value="reading">
        Reading

        <input type="checkbox"
               name="hobby"
               value="sports">
        Sports

        <br><br>

        <input type="submit" value="Submit">

        <input type="reset" value="Reset">

    </form>

</body>

</html>

Learning Focus

<form>
Text input
Email input
Password input
Radio buttons
Checkboxes
Submit and reset buttons

2. JavaScript Programs

The JavaScript section should contain any five JavaScript programs based on the concepts covered in the prescribed syllabus.

Students should practise programs involving variables, data types, operators, input and output, conditional statements and loops.

2.1 JavaScript Program – Even or Odd

Task: 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>

2.2 JavaScript Program – Greatest of Three Numbers

Task: Accept three numbers and display the greatest number.

<script>

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

let greatest;

if (a >= b && a >= c) {
    greatest = a;
} else if (b >= a && b >= c) {
    greatest = b;
} else {
    greatest = c;
}

document.write("Greatest Number = " + greatest);

</script>

2.3 JavaScript Program – 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>

2.4 JavaScript Program – 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>

2.5 JavaScript Program – 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>

3. Suggested Portfolio File Format

Each practical entry should be presented in a consistent format so that the portfolio clearly records the work completed by the student.

Section	Details
Practical No.	Sequential practical number
Aim	Purpose of the program
Program / Code	Complete HTML or JavaScript code
Output	Expected or actual output / screenshot
Learning Outcome	Concepts demonstrated by the program

Suggested Entry Format

Practical No. 1

Aim: To create an HTML webpage demonstrating the use of images.

Program: Write the complete HTML program.

Output: Attach or record the screenshot of the webpage output.

Learning Outcome: Understand the use of the <img> tag and its attributes.

4. Portfolio Checklist

Requirement	Status
HTML program – Images	Completed / Pending
HTML program – Lists	Completed / Pending
HTML program – Tables	Completed / Pending
HTML program – Hyperlinks	Completed / Pending
HTML program – Forms	Completed / Pending
JavaScript Program 1	Completed / Pending
JavaScript Program 2	Completed / Pending
JavaScript Program 3	Completed / Pending
JavaScript Program 4	Completed / Pending
JavaScript Program 5	Completed / Pending
Outputs / Screenshots	Completed / Pending

5. Good Practices for the Practical File

Write the aim clearly before each program.
Use meaningful filenames for HTML and JavaScript files.
Maintain proper indentation in code.
Use appropriate comments where helpful.
Check the code by executing it before recording the output.
Include the final output or screenshot wherever required.
Keep the programs organised in the prescribed sequence.
Correct syntax errors before final submission.

6. Learning Outcomes

After completing the practical portfolio, students should be able to:

Create basic webpages using HTML.
Insert images and create lists and tables.
Create hyperlinks between webpages and websites.
Design basic HTML forms.
Write and execute basic JavaScript programs.
Use variables, operators and expressions.
Apply conditional statements.
Apply loops to solve repetitive programming tasks.
Test and verify program output.

Important:

The portfolio should reflect the student's own practical work. Students should understand each program and be able to explain the HTML elements, JavaScript statements and logic used in their programs.

Portfolio / Practical File – Web Applications Class XI (CBSE 803)