IWT CAT & Exam: Practice Requirements, Lab Tasks & Model Answers

Part IV — Complete practice requirements and revision

23. The project question: every requested change

Reference: Comprehensive HTML5 hands-on case study implementing semantic layout, media integration, and accessible form controls.

The user in this exercise is a junior developer enhancing the HTML5 Practical Learning Page within one HTML file, using native HTML where requested and JavaScript only where specifically needed. The full original question is reproduced in Appendix A. Its complete requirement checklist is:

23.1 Starting-program inventory

The complete, integrated program implementation is structured below:

• Document lang="en", UTF-8, viewport, unfinished description, keywords, author Your Name, robots index, follow, title HTML5 Practical Learning Page, favicon.
• Header HTML5 Web Development Course, strong HTML5 practice website text.
• Navigation to home, about, topics, schedule, media, contact.
• Home explanations, strong/em/mark, horizontal rule, deleted/inserted course text, H₂O, x² + y².
• About articles What is HTML? and Why Learn HTML?.
• Heading practice levels 1–6.
• Unordered topics: document structure, semantics, forms, tables, multimedia.
• Ordered study steps: learn HTML, practice HTML, learn CSS, learn JavaScript.
• Nested frontend/backend lists and description list for HTML/CSS/JavaScript.
• W3C/MDN external links, email and telephone links.
• Figure with images/html5-logo.png, alt HTML5 logo, width/height 250, caption HTML5 Logo.
• Schedule caption Weekly HTML5 Training Schedule; Day/Topic/Duration/Instructor columns. Monday HTML Structure 2 Hours John; Tuesday Text & Headings 2 Hours John; Wednesday Lists & Tables 2 Hours David; Thursday Forms 3 Hours David; Friday Multimedia 2 Hours Sarah. Footer Total Training 11 Hours, with colspan 2 cells.
• Audio audio/sample.mp3, MIME audio/mpeg, controls, fallback.
• Video 500×300, controls, poster images/video-thumbnail.jpg, file video/html-course.mp4, MIME video/mp4, fallback.
• YouTube iframe 560×315, source ending UB1O30fR-EE, title HTML Tutorial, allowfullscreen; embedded example.com 600×300, title Example Website.
• Registration endpoint /submit-form, POST, autocomplete on.
• Full name required 3–50 characters; email required; password required minimum 8; age required 10–100; DOB.
• Gender fieldset: male, female, other, same name gender; required on male expresses group requirement.
• Skills fieldset: HTML, CSS, JavaScript with same name skills and distinct values; JavaScript's visible label is missing in the original fragment.
• Required course selection: empty placeholder, HTML5, JavaScript, Full Stack Development.
• Required message: rows 6, cols 50, minimum 10, placeholder Write your answer here....
• Resume accepts .pdf,.doc,.docx; color; experience slider 0–10, initially 5; website URL; search input.
• Hidden course_id=HTML101; Register and Reset Form.
• Two FAQs: What is HTML5? and Is HTML a programming language? with supplied answers.
• Blockquote The Web is for everyone.; contact Written by Your Name, email example@gmail.com, phone +91 12345 67890.
• Footer © 2026 HTML5 Practical Course. All Rights Reserved. and Back to Top link to #home.

23.2 Implementation notes for interpreting the exercise

These are study guidance, not a claim that the attached starter program already implements the requested changes.

<a href="#main-content">Skip to content</a>
<!-- Existing header/navigation can follow. -->
<main id="main-content">
  <section id="home">
    <p><abbr title="HyperText Markup Language">HTML</abbr></p>
    <!-- Example date only: replace with the actual course date. -->
    <p>Starts <time datetime="2026-09-15">15 September 2026</time>.</p>
  </section>
</main>

:target belongs in CSS, for example section:target { background-color: lightgreen; }, using standard CSS styling. A responsive picture needs a real smaller image and a media condition; no smaller asset was attached. New testimonials, actual start date, extra audio file and backend endpoint also require chosen/example values rather than pretending they already exist in the source.

For exclusive FAQs, give both details elements the same nonempty name; only one may be open. This behavior is defined in the source-linked standard. HTML Standard: details groups

<details name="course-faq">
  <summary>What is HTML5?</summary>
  <p>HTML5 is used to structure web pages and applications.</p>
</details>
<details name="course-faq">
  <summary>Is HTML a programming language?</summary>
  <p>HTML is a markup language.</p>
</details>

For the website datalist, full example URLs such as https://example.com, https://example.dev, and https://example.io preserve the requested endings while satisfying the purpose of a URL input; a bare .com is not a complete URL. A datalist offers suggestions rather than restricting the user to the suggestions.

For table scope, use column headers for Day/Topic/Duration/Instructor, and if days become row headers use row scope there. Adding Saturday changes total training to 15 hours.

For the broken endpoint, the two approaches requested by the question are: implement/deploy the intended POST handler at /submit-form, or change the action to an existing authorized processing endpoint that accepts the form's fields. Both need actual server configuration. A static filename or invented URL is not a working backend simply because it appears in an action attribute.

The starter HTML has defects before these enhancements: an unclosed description meta tag, missing JavaScript checkbox label, and no multipart file-upload encoding. Part V identifies these separately from the exercise's requested additions.

23.3 Joined original programs

Comprehensive Course Registration Form

The following complete code listing implements the practical application project:

<!DOCTYPE html>
<html>
    <head>
        <title>Form</title>
    </head>
    <body bgcolor="pink">
        <center><font color="red" size="7">Application Form</font></center>
        <hr size="5" color="blue" width="400">
        <form action="a.html" method="GET">
            <table align="center" cellspacing="5" cellpadding="5">
              <tr>
                <td>First Name:</td>
                <td><input type="text" name="fname" placeholder=“name" size="30" maxlength="6" /></td>
              </tr>
            <tr>
                <td>Last Name:</td>
                <td><input type="text" name="lname" value="" size="30"/></td>
            </tr>


<tr>            <td>Password:</td>
                <td><input type="password" name="pwd"/></td>
 </tr>
 <tr>            <td>Comments:</td>
<td><textarea rows="8" cols="20" name="comm" placeholder="enter comments"></textarea></td>
            </tr>
<tr>            <td>Language</td>
                <td><input type="checkbox" name="cb1"checked>Hindi
                    <input type="checkbox" name="cb1"> English
                    <input type="checkbox" name="cb1">Punjabi</td>
            </tr>
 <tr><td>Gender:</td>
                <td><input type="radio" name="r1">Male
                    <input type="radio" name="r1">Female</td>
            </tr>


<tr>
                <td>Select fruit:</td>
                <td><select name="s1">
                    <option>----select----</option>
                    <option>Orange</option>
                    <option>Mango</option>
                    <option>Pineapple</option>
                    <option>Strawberry</option>
                </select></td>
            </tr>
            <tr>
                <td>Select Resume</td>
                <td><input type="file"/></td>
            </tr>


<tr>
                <td align="center" colspan="2">
                    <input type="submit" value="REGISTER"/>
                    <input type="reset"  value="CLEAR"/>
                    <input type="button" value="OK"/></td>
            </tr>
        </table>
        </form>
    </body>
</html>

HTML5 Practical Learning & Hands-On Case Study

The following complete code listing implements the practical application project:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- =========================
         META TAGS
         ========================= -->
    <!-- Character encoding -->
    <meta charset="UTF-8">
    <!-- Responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Basic SEO description -->
    <meta name="description"
    <!-- Keywords - less important for modern search engines, but useful for practice -->
    <meta name="keywords"
          content="HTML5, HTML tutorial, web development, forms, tables, semantic HTML">

    <!-- Author -->
    <meta name="author" content="Your Name">

    <!-- Search engine instruction -->
    <meta name="robots" content="index, follow">

 <!-- Page title -->
    <title>HTML5 Practical Learning Page</title>

    <!-- Favicon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>


<body>

    <!-- =========================
         HEADER
         Semantic HTML Element
         ========================= -->

    <header>

        <h1>HTML5 Web Development Course</h1>

        <p>
            Welcome to my <strong>HTML5 practice website</strong>.
            This page demonstrates important HTML concepts.
        </p>

        <!-- =========================
             NAVIGATION
             ========================= -->

        <nav>
<a href="#home">Home</a> |
            <a href="#about">About</a> |
            <a href="#topics">Topics</a> |
            <a href="#schedule">Schedule</a> |
            <a href="#media">Media</a> |
            <a href="#contact">Contact</a>
        </nav>
    </header>
     <main>
         <!-- =========================
             HOME SECTION
             ========================= -->
         <section id="home">
             <h2>Welcome to HTML5</h2>
             <p>
                HTML stands for
                <strong>HyperText Markup Language</strong>.
            </p>
             <p>
                HTML is used to create the
                <em>structure</em> of web pages.

 </p>

            <p>
                You can use HTML to create
                <mark>headings</mark>,
                paragraphs, links, images, tables and forms.
            </p>

            <hr>

            <p>
                Example of deleted text:
                <del>Old HTML course</del>
            </p>

            <p>
                Example of inserted text:
                <ins>New HTML5 course</ins>
            </p>

            <p>
                Chemical formula:
                H<sub>2</sub>O
            </p>

            <p>
                Mathematical example:
                x<sup>2</sup> + y<sup>2</sup>
            </p>
 </section>


        <!-- =========================
             ABOUT SECTION
             ========================= -->

        <section id="about">

            <h2>About HTML5</h2>

            <article>

                <h3>What is HTML?</h3>

                <p>
                    HTML provides the basic structure of a website.
                    It uses elements such as headings, paragraphs,
                    images, links and forms.
                </p>

            </article>


            <article>

                <h3>Why Learn HTML?</h3>

 <p>
                    HTML is the foundation of
                    <strong>web development</strong>.
                    It is easy to learn and is used together with
                    CSS and JavaScript.
                </p>

            </article>

        </section>


        <!-- =========================
             HEADINGS PRACTICE
             ========================= -->

        <section>

            <h2>Heading Examples</h2>

            <h1>Heading Level 1</h1>
            <h2>Heading Level 2</h2>
            <h3>Heading Level 3</h3>
            <h4>Heading Level 4</h4>
            <h5>Heading Level 5</h5>
            <h6>Heading Level 6</h6>

        </section>

 <!-- =========================
             LISTS
             ========================= -->

        <section id="topics">

            <h2>HTML5 Topics</h2>

            <h3>Unordered List</h3>

            <ul>
                <li>HTML Document Structure</li>
                <li>Semantic HTML</li>
                <li>Forms</li>
                <li>Tables</li>
                <li>Multimedia</li>
            </ul>


            <h3>Ordered List</h3>

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

 <h3>Nested List</h3>

            <ol>

                <li>
                    Frontend Development

                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JavaScript</li>
                    </ul>

                </li>

                <li>
                    Backend Development

                    <ul>
                        <li>Node.js</li>
                        <li>Python</li>
                        <li>PHP</li>
                    </ul>

                </li>

            </ol>

<h3>Description List</h3>

            <dl>

                <dt>HTML</dt>
                <dd>Structure of a web page.</dd>

                <dt>CSS</dt>
                <dd>Used to style a web page.</dd>

                <dt>JavaScript</dt>
                <dd>Used to add behavior and interactivity.</dd>

            </dl>

        </section>


        <!-- =========================
             HYPERLINKS
             ========================= -->

        <section>

            <h2>Hyperlinks</h2>

            <p>
                Visit the official

 <a href="https://www.w3.org/" target="_blank">
                    W3C Website
                </a>.
            </p>

            <p>
                Visit
                <a href="https://developer.mozilla.org/" target="_blank">
                    MDN Web Docs
                </a>
                to learn more about HTML.
            </p>

            <p>
                <a href="mailto:example@gmail.com">
                    Send me an Email
                </a>
            </p>

            <p>
                <a href="tel:+911234567890">
                    Call Me
                </a>
            </p>

        </section>


        <!-- =========================
IMAGE
             ========================= -->

        <section>

            <h2>Images</h2>

            <figure>

                <img
                    src="images/html5-logo.png"
                    alt="HTML5 logo"
                    width="250"
                    height="250"
                >

                <figcaption>
                    HTML5 Logo
                </figcaption>

            </figure>

        </section>


        <!-- =========================
             TABLE
             ========================= -->


 <section id="schedule">

            <h2>HTML5 Course Schedule</h2>

            <table border="1">

                <caption>
                    Weekly HTML5 Training Schedule
                </caption>

                <thead>

                    <tr>
                        <th>Day</th>
                        <th>Topic</th>
                        <th>Duration</th>
                        <th>Instructor</th>
                    </tr>

                </thead>


                <tbody>

                    <tr>
                        <td>Monday</td>
                        <td>HTML Structure</td>
                        <td>2 Hours</td>
                        <td>John</td>
 </tr>

                    <tr>
                        <td>Tuesday</td>
                        <td>Text & Headings</td>
                        <td>2 Hours</td>
                        <td>John</td>
                    </tr>

                    <tr>
                        <td>Wednesday</td>
                        <td>Lists & Tables</td>
                        <td>2 Hours</td>
                        <td>David</td>
                    </tr>

                    <tr>
                        <td>Thursday</td>
                        <td>Forms</td>
                        <td>3 Hours</td>
                        <td>David</td>
                    </tr>

                    <tr>
                        <td>Friday</td>
                        <td>Multimedia</td>
                        <td>2 Hours</td>
                        <td>Sarah</td>
                    </tr>
 </tbody>
                <tfoot>
                    <tr>
                        <td colspan="2">
                            Total Training
                        </td>
                        <td colspan="2">
                            11 Hours
                        </td>
                    </tr>
                </tfoot>
            </table>
        </section>
        <!-- =========================
             AUDIO AND VIDEO
             ========================= -->
        <section id="media">
            <h2>Audio and Video</h2>
            <h3>Audio</h3>
            <audio controls>
                <source
                    src="audio/sample.mp3"
                    type="audio/mpeg"
                >
                Your browser does not support audio.
             </audio>
             <h3>Video</h3>
             <video
                width="500"
                height="300"
                controls
                poster="images/video-thumbnail.jpg"
            >
                <source
                    src="video/html-course.mp4"
                    type="video/mp4"
                >
Your browser does not support video.

            </video>

        </section>


        <!-- =========================
             EMBEDDING
             ========================= -->

        <section>

            <h2>Embedded Content</h2>

            <h3>YouTube Video</h3>

            <iframe
                width="560"
                height="315"
                src="https://www.youtube.com/embed/UB1O30fR-EE"
                title="HTML Tutorial"
                allowfullscreen>
            </iframe>


            <h3>Embedded Website</h3>


 <iframe
                src="https://example.com"
                width="600"
                height="300"
                title="Example Website">
            </iframe>

        </section>


        <!-- =========================
             FORM
             ========================= -->

        <section id="contact">

            <h2>Student Registration Form</h2>

            <form
                action="/submit-form"
                method="post"
                autocomplete="on"
            >

                <!-- Text Input -->

                <p>

                    <label for="fullname">
Full Name:
                    </label>

                    <input
                        type="text"
                        id="fullname"
                        name="fullname"
                        placeholder="Enter your full name"
                        required
                        minlength="3"
                        maxlength="50"
                    >

                </p>


                <!-- Email -->

                <p>

                    <label for="email">
                        Email:
                    </label>

                    <input
                        type="email"
                        id="email"
                        name="email"
                        placeholder="example@gmail.com"

required
                    >

                </p>


                <!-- Password -->

                <p>

                    <label for="password">
                        Password:
                    </label>

                    <input
                        type="password"
                        id="password"
                        name="password"
                        required
                        minlength="8"
                    >

                </p>


                <!-- Number -->

                <p>


 <label for="age">
                        Age:
                    </label>

                    <input
                        type="number"
                        id="age"
                        name="age"
                        min="10"
                        max="100"
                        required
                    >

                </p>


                <!-- Date -->

                <p>

                    <label for="dob">
                        Date of Birth:
                    </label>

                    <input
                        type="date"
                        id="dob"
                        name="dob"
                    >
 </p>


                <!-- Radio Buttons -->

                <fieldset>

                    <legend>Gender</legend>

                    <input
                        type="radio"
                        id="male"
                        name="gender"
                        value="male"
                        required
                    >

                    <label for="male">
                        Male
                    </label>


                    <input
                        type="radio"
                        id="female"
                        name="gender"
                        value="female"
                    >
 <label for="female">
                        Female
                    </label>


                    <input
                        type="radio"
                        id="other"
                        name="gender"
                        value="other"
                    >

                    <label for="other">
                        Other
                    </label>

                </fieldset>


                <!-- Checkboxes -->

                <fieldset>

                    <legend>Select Skills</legend>

                    <input
                        type="checkbox"
                        id="html"
 name="skills"
                        value="html"
                    >

                    <label for="html">
                        HTML
                    </label>


                    <input
                        type="checkbox"
                        id="css"
                        name="skills"
                        value="css"
                    >

                    <label for="css">
                        CSS
                    </label>


                    <input
                        type="checkbox"
                        id="javascript"
                        name="skills"
                        value="javascript"
                    >

                    <label for="javascript">

                    </label>

                </fieldset>


                <!-- Select -->

                <p>

                    <label for="course">
                        Choose Course:
                    </label>

                    <select
                        id="course"
                        name="course"
                        required
                    >

                        <option value="">
                            -- Select Course --
                        </option>

                        <option value="html">
                            HTML5
                        </option>





                        <option value="javascript">
                            JavaScript
                        </option>

                        <option value="fullstack">
                            Full Stack Development
                        </option>

                    </select>

                </p>


                <!-- Textarea -->

                <p>

                    <label for="message">
                        Why do you want to learn web development?
                    </label>

                    <br>

                    <textarea
                        id="message"
                        name="message"
 rows="6"
                        cols="50"
                        placeholder="Write your answer here..."
                        required
                        minlength="10"
                    ></textarea>

                </p>


                <!-- File Upload -->

                <p>

                    <label for="resume">
                        Upload Resume:
                    </label>

                    <input
                        type="file"
                        id="resume"
                        name="resume"
                        accept=".pdf,.doc,.docx"
                    >

                </p>


                <!-- Color -->
 <p>

                    <label for="color">
                        Choose Favorite Color:
                    </label>

                    <input
                        type="color"
                        id="color"
                        name="color"
                    >

                </p>


                <!-- Range -->

                <p>

                    <label for="experience">
                        HTML Experience:
                    </label>

                    <input
                        type="range"
                        id="experience"
                        name="experience"
                        min="0"
                       max="10"
                        value="5" >

                </p>


                <!-- URL -->

                <p>

                    <label for="website">
                        Personal Website:
                    </label>

                    <input
                        type="url"
                        id="website"
                        name="website"
                        placeholder="https://example.com"
                    >

                </p>


                <!-- Search -->

                <p>
 <label for="search">
                        Search:
                    </label>

                    <input
                        type="search"
                        id="search"
                        name="search"
                        placeholder="Search something..."
                    >

                </p>


                <!-- Hidden Input -->

                <input
                    type="hidden"
                    name="course_id"
                    value="HTML101"
                >


                <!-- Submit and Reset -->

                <p>

                    <button type="submit">
                        Register
 </button>

                    <button type="reset">
                        Reset Form
                    </button>

                </p>

            </form>

        </section>


        <!-- =========================
             DETAILS / SUMMARY
             ========================= -->

        <section>

            <h2>Frequently Asked Questions</h2>

            <details>

                <summary>
                    What is HTML5?
                </summary>

                <p>
                    HTML5 is the modern version of HTML used
to structure web pages and applications.
                </p>

            </details>


            <details>

                <summary>
                    Is HTML a programming language?
                </summary>

                <p>
                    No. HTML is a markup language used to
                    structure content on the web.
                </p>

            </details>

        </section>


        <!-- =========================
             QUOTATION
             ========================= -->

        <section>

            <h2>Important Quote</h2>
 <blockquote cite="https://www.w3.org/">

                The Web is for everyone.

            </blockquote>

        </section>


        <!-- =========================
             CONTACT INFORMATION
             ========================= -->

        <section>

            <h2>Contact Information</h2>

            <address>

                Written by Your Name.<br>
                Email:
                <a href="mailto:example@gmail.com">
                    example@gmail.com
                </a>
                <br>

                Phone:
                <a href="tel:+911234567890">
 +91 12345 67890
                </a>

            </address>

        </section>

    </main>


    <!-- =========================
         FOOTER
         ========================= -->

    <footer>

        <hr>

        <p>
            &copy; 2026 HTML5 Practical Course.
            All Rights Reserved.
        </p>

        <p>
            <a href="#home">
                Back to Top
            </a>
        </p>
  </footer>
</body>
</html>

24. Quick-answer revision

Key Multiple Choice Questions: The element representing the dominant central content of a document body is <main>; the standard boolean attribute enforcing form input completion prior to submission is required.