Std 12 Practical Questions and Solutions

Q1: Creating an HTML Form using KompoZer                                     

  • Design a simple HTML form in KompoZer that collects basic user information. Your form should include the following fields:
  • Full Name (Text field)
  • Email (Text field)
  • Gender (Radio buttons: Male, Female, Other)
  • Date of Birth (Date field)
  • Submit Button
  • Instructions:

1. Properly label each field.

2. Use HTML5 form elements wherever necessary.

3. Ensure that the form is structured properly and looks organized.

Q2: Styling a Webpage using CSS                                                          

  • Using KompoZer, create a simple webpage and style it with CSS. The webpage should contain the following elements:
  • A heading, “Welcome to My Webpage.”
  • A paragraph with a short introduction about yourself.
  • Use the following CSS properties to style the page:
  • Background color for the body.
  • Font size and color for the text.
  • Borders and padding for the paragraph.
  • Instructions:
  • Use internal CSS to apply styles.
  • Make sure the text is clearly visible and properly aligned.
  • Ensure the page is visually appealing.

Q3: Designing a School Plaza Website Using KompoZer (with JavaScript) 

                                                                                                          

  • Create a “School Plaza” website using KompoZer with two interconnected pages. The website should contain the following:
  • Page 1 (Home Page):
  • A header with the title “School Plaza.”
  • A brief paragraph introducing the website and the services available (e.g., school events, announcements, resources).
  • A navigation menu with links to the following:
  • “About Us”
  • “Contact Us” (Link to the second page).
  • “Facilities”
  • A section to display a list of school events (use an unordered list).
  • Page 2 (Contact Us Page):
    • A simple form where visitors can send queries. The form should include:
  • Name
  • Email
  • Subject (Dropdown with options like Admission, Events, General Inquiry).
  • Message (Text area)
  • A button that, when clicked, displays a JavaScript alert with the message, “Thank you for your inquiry!”.
  • Instructions:

1. Ensure that the navigation links work correctly between the two pages.

2. Use CSS to style the navigation bar and form elements.

3. Use JavaScript for form validation or to trigger an alert on form submission.

  • Note:
  • Save and submit all the files (HTML, CSS, and JavaScript) as part of your answer.
  • Ensure all work is done using KompoZer.

Solutions for the above Practical Questions      

Q1: Creating an HTML Form using KompoZer

Instructions: Design a simple HTML form that collects basic user information using KompoZer.

Step-by-Step Solution:

  1. Open KompoZer and start with a new blank document (File > New).
  2. Insert the form:
  • Go to Insert > Form > Form and create a form element.
  1. Add fields:
  • Full Name (Text field):
    • Inside the form, go to Insert > Form > Textbox and label it “Full Name”. Set its name attribute as fullname.
  • Email (Text field):
    • Similarly, insert another textbox labeled “Email” and set the name attribute as email.
  • Gender (Radio buttons):
    • Insert radio buttons via Insert > Form > Radio Button.
    • Add 3 options: “Male”, “Female”, and “Other”, each with respective name as gender and value as Male, Female, and Other.
  • Date of Birth (Date field):
    • Insert a date field with Insert > Form > Textbox and label it “Date of Birth”. Set its name attribute as dob and type as date.
  • Submit Button:
    • Insert a submit button by Insert > Form > Button, then set the button type as “Submit”.
  1. Structure the form:
  • Use paragraph breaks (<br>) or tables to organize the layout if needed for clean spacing.
  1. Save the form as an HTML file by going to File > Save As.

Code Preview:

<form action="#" method="post">
  <label for="fullname">Full Name:</label><br>
  <input type="text" id="fullname" name="fullname"><br><br>

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

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

  <label for="dob">Date of Birth:</label><br>
  <input type="date" id="dob" name="dob"><br><br>

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

Q2: Styling a Webpage using CSS

Step-by-Step Solution:

  1. Open KompoZer and create a new HTML file.
  2. Create the webpage content:
  • Insert a heading by going to Insert > Heading > H1 and type “Welcome to My Webpage”.
  • Insert a paragraph by Insert > Paragraph and write a short introduction about yourself.
  1. Apply CSS styling:
  • Use internal CSS by inserting the following in the <head> section:
    • Go to Source view and type the style tags:
      html ¨K18K
  1. Save the file as index.html.

Code Preview:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome to My Webpage</title>
  <style>
    body {
      background-color: #f0f8ff;
    }
    h1 {
      font-size: 24px;
      color: darkblue;
    }
    p {
      font-size: 16px;
      color: #333;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Webpage</h1>
  <p>Hello, I am [Your Name]. I enjoy learning web development and creating simple websites.</p>
</body>
</html>

Q3: Designing a School Plaza Website Using KompoZer (with JavaScript)

Step-by-Step Solution:

  1. Page 1 (Home Page):
  • Title and Header:
    • Insert a heading with the text “School Plaza” using Insert > Heading > H1.
  • Introduction Paragraph:
    • Add a brief paragraph introducing the website using Insert > Paragraph.
  • Navigation Menu:
    • Insert hyperlinks using Insert > Link for “About Us”, “Contact Us”, and “Facilities”. Ensure “Contact Us” links to contact.html.
  • School Events (Unordered List):
    • Insert an unordered list for school events using Insert > List > Unordered List.
  1. Page 2 (Contact Us Page):
  • Contact Form:
    • Insert a form with fields for Name, Email, Subject (Dropdown), and Message (Text area).
  • JavaScript Alert:
    • Use the Source view and include this JavaScript in the form’s submit button:
      html ¨K25K ¨K26K
  1. CSS Styling:
  • Use internal CSS similar to Q2 to style the navigation bar and form.
  1. Save both pages as index.html and contact.html.

Code Preview for Page 1 (Home Page):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>School Plaza</title>
  <style>
    nav {
      background-color: #333;
      padding: 10px;
    }
    nav a {
      color: white;
      padding: 10px;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <h1>School Plaza</h1>
  <p>Welcome to our school website. Explore events, announcements, and more.</p>

  <nav>
    <a href="#">About Us</a>
    <a href="contact.html">Contact Us</a>
    <a href="#">Facilities</a>
  </nav>

  <h2>School Events</h2>
  <ul>
    <li>Annual Day</li>
    <li>Sports Meet</li>
    <li>Science Fair</li>
  </ul>
</body>
</html>

Code Preview for Page 2 (Contact Us Page):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <script>
    function showAlert() {
      alert("Thank you for your inquiry!");
    }
  </script>
</head>
<body>
  <h1>Contact Us</h1>
  <form action="javascript:void(0);" onsubmit="showAlert()">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br><br>

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

    <label for="subject">Subject:</label><br>
    <select id="subject" name="subject">
      <option value="admission">Admission</option>
      <option value="events">Events</option>
      <option value="inquiry">General Inquiry</option>
    </select><br><br>

    <label for="message">Message:</label><br>
    <textarea id="message" name="message"></textarea><br><br>

    <button type="submit">Submit</button>
  </form>
</body>
</html>

                                                                  

Leave a Reply

Your email address will not be published. Required fields are marked *