HTML Exam 1: 20 Comprehensive Challenges

Exercise 1 Page Structure & Head

Create a complete HTML page with the following requirements:

Set the document type (Doctype) to HTML5.
Set the page language to English (`en`) and direction to left-to-right (`ltr`).
Add the character encoding (Charset) as UTF-8.
Set the page title to “My First Exam”.
Add a meta description with the content “Sample page”.

Solution

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>My First Exam</title>
    <meta name="description" content="Sample page">
</head>
<body>
    
</body>
</html>

Exercise 2 Typography

Write HTML to display the following content:

An H1 heading with the text “Introduction to Programming”.
A horizontal rule.
An H2 heading with the text “What is programming?”.
A paragraph that contains the word “important” in bold and “very” in italics.
Add a line break inside the paragraph.

Solution

<h1>Introduction to Programming</h1>
<hr>

<h2>What is programming?</h2>
<p>
    Programming is an <strong>important</strong> <em>very</em> skill today.<br>
    It is the foundation of technology.
</p>

Exercise 3 Links

Create three different types of links:

A text link to “google.com” that opens in a new tab.
An email link that opens the mail client to send to “info@example.com”.
An internal link that jumps to a section with the id “footer”.

Solution

<!-- External link -->
<a href="https://google.com" target="_blank">Google</a>

<!-- Email link -->
<a href="mailto:info@example.com">Contact us</a>

<!-- Internal link -->
<a href="#footer">Go to footer</a>

Exercise 4 Images & Figures

Work with images as follows:

Insert an image “cat.jpg” with a width of 300px.
Add alt text “Cute cat”.
Wrap the image in a `figure` and add a caption titled “Image of the day”.

Solution

<figure>
    <img src="cat.jpg" alt="Cute cat" width="300">
    <figcaption>Image of the day</figcaption>
</figure>

Exercise 5 Nested Lists

Create a nested list structure:

An ordered list for main items: “Fruits”, “Vegetables”.
Inside “Fruits”, add an unordered list with “Apple” and “Banana”.
Make sure all tags are properly closed.

Solution

<ol>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables</li>
</ol>

Exercise 6 Structured Tables

Design a table that includes:

A table head (`thead`) with headers “Product” and “Price”.
A table body (`tbody`) with two data rows.
A table footer (`tfoot`) with a total row.
Add a border to the table (`border=\"1\"`).

Solution

<table border="1">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Pen</td>
            <td>$5</td>
        </tr>
        <tr>
            <td>Notebook</td>
            <td>$10</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$15</td>
        </tr>
    </tfoot>
</table>

Exercise 7 Forms

Create a registration form that includes:

A username field (text) with a label.
A required password field.
An email field with a placeholder.
Submit and reset buttons.

Solution

<form action="/en/register" method="POST">
    <label for="user">Username:</label>
    <input type="text" id="user" name="username">
    <br>
    
    <label for="pass">Password:</label>
    <input type="password" id="pass" name="password" required>
    <br>
    
    <label for="mail">Email:</label>
    <input type="email" id="mail" name="email" placeholder="example@mail.com">
    <br>
    
    <button type="submit">Register</button>
    <button type="reset">Reset</button>
</form>

Exercise 8 Semantic Layout

Use HTML5 semantic elements to build a page structure:

A header containing a title.
A nav bar with two links.
A main section containing an article.
A footer with copyright text.

Solution

<header>
    <h1>My Blog</h1>
</header>

<nav>
    <a href="#">Home</a> | <a href="#">About</a>
</nav>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article text...</p>
    </article>
</main>

<footer>
    <p>&copy; 2024 All rights reserved</p>
</footer>

Exercise 9 Multimedia

Add media files with controls:

An audio file “song.mp3” that autoplays and is muted.
A video file “movie.mp4” with controls and a poster image (`poster=\"poster.jpg\"`).

Solution

<!-- Audio -->
<audio src="song.mp3" autoplay muted></audio>

<!-- Video -->
<video src="movie.mp4" controls poster="poster.jpg"></video>

Exercise 10 Entities & Comments

Do the following:

Write a comment that explains the code below.
Display special entities: the euro sign (€), copyright (©), and a non‑breaking space.
Use the `code` tag to show a simple code snippet.

Solution

<!-- This comment does not appear in the browser -->

<p>Price: 50&euro; | Copyright: &copy; | Space:&nbsp;here</p>

<p>Code: <code>print("Hello")</code></p>

Exercise 11 ARIA Accessibility Intermediate

Create an accessible navigation menu using ARIA:

Create a `nav` with a proper ARIA label (`aria-label`).
Add a dropdown button with an expanded/collapsed state (`aria-expanded`).
Add visually hidden text for screen readers (`sr-only`).
Use `role=\"navigation\"` and `role=\"button\"` correctly.

Solution

<nav aria-label="Main navigation" role="navigation">
    <span class="sr-only">Main navigation</span>
    
    <button role="button" aria-expanded="false" aria-controls="menu-list">
        <span aria-hidden="true">☰</span>
        Menu
    </button>
    
    <ul id="menu-list">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>

Exercise 12 HTML5 APIs - LocalStorage Intermediate

Create a small form that stores data in the browser:

Add a text field for a username (`id=\"username\"`).
Add a “Save” button that stores the value in localStorage.
Add a “Retrieve” button that displays the saved value.
Add a “Clear” button that removes the value from localStorage.

Solution

<div>
    <input type="text" id="username" placeholder="Enter your name">
    <button onclick="localStorage.setItem('name', document.getElementById('username').value)">Save</button>
    <button onclick="alert(localStorage.getItem('name'))">Retrieve</button>
    <button onclick="localStorage.removeItem('name')">Clear</button>
</div>

Exercise 13 Data Attributes Intermediate

Use data attributes to build product cards:

Create a div with `data-product-id`, `data-product-name`, and `data-price`.
Add a “View details” button for each card.
Use JavaScript to read and display the data on click.

Solution

<div class="product" data-product-id="101" data-product-name="Laptop" data-price="3500">
    <h4>Dell Laptop</h4>
    <button onclick="showDetails(this.parentElement)">View details</button>
</div>

<script>
function showDetails(el) {
    alert('Product: ' + el.dataset.productName + ' - Price: ' + el.dataset.price);
}
</script>

Exercise 14 Responsive Images Intermediate

Use the `picture` element for responsive images:

Create a `picture` element with different sources based on screen size.
Use a media query for small screens (`max-width: 600px`).
Add a fallback image using `img`.

Solution

<picture>
    <source media="(max-width: 600px)" srcset="small.jpg">
    <source media="(max-width: 1200px)" srcset="medium.jpg">
    <img src="large.jpg" alt="Responsive image">
</picture>

Exercise 15 Collapsible Content (Details/Summary) Intermediate

Create an FAQ section:

Use `details` with `summary` to create three collapsible questions.
Keep the first question open by default (`open`).
Add varied content inside each question (text, list, link).

Solution

<details open>
    <summary>What are your business hours?</summary>
    <p>We work from 9 AM to 5 PM.</p>
</details>

<details>
    <summary>How can I contact you?</summary>
    <ul>
        <li>Email: info@site.com</li>
        <li>Phone: 123456</li>
    </ul>
</details>

<details>
    <summary>Where are you located?</summary>
    <p>Visit the <a href="#map">map</a> to find us.</p>
</details>

Exercise 16 Dialog Element Advanced

Create a modal dialog:

Use the `dialog` element to create the modal.
Add a button to open it using `showModal()`.
Add a button inside to close it using `close()`.
Add a form inside with `method=\"dialog\"`.

Solution

<button onclick="document.getElementById('myDialog').showModal()">Open dialog</button>

<dialog id="myDialog">
    <h2>Dialog</h2>
    <p>This is an HTML5 dialog.</p>
    <form method="dialog">
        <button>Close</button>
    </form>
</dialog>

Exercise 17 Template Element Advanced

Use the `template` element to create dynamic content:

Create a template that contains a product card.
Use JavaScript to clone the template and update its content.
Append the cloned card to the page.

Solution

<template id="productTemplate">
    <div class="product-card">
        <h3 class="product-name"></h3>
        <p class="product-price"></p>
    </div>
</template>

<div id="products"></div>

<script>
const template = document.getElementById('productTemplate');
const clone = template.content.cloneNode(true);
clone.querySelector('.product-name').textContent = 'Smartphone';
clone.querySelector('.product-price').textContent = '$500';
document.getElementById('products').appendChild(clone);
</script>

Exercise 18 Meter & Progress Advanced

Use meter and progress elements:

Create a `meter` showing battery level (value=\"0.7\" low=\"0.3\" high=\"0.8\").
Create a `progress` showing download progress (value=\"70\" max=\"100\").
Add clear labels for each element.

Solution

<!-- Battery meter -->
<label for="battery">Battery level:</label>
<meter id="battery" value="0.7" min="0" max="1" low="0.3" high="0.8" optimum="0.9">70%</meter>

<!-- Progress bar -->
<label for="download">Download progress:</label>
<progress id="download" value="70" max="100">70%</progress>

Exercise 19 Datalist Suggestions Advanced

Create an input field with suggestions:

Create an input linked to a `datalist` of browsers.
Add 5 options: Chrome, Firefox, Safari, Edge, Opera.
Allow the field to accept other values too.

Solution

<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

Exercise 20 Complete Project: Landing Page Advanced

Build a complete landing page that includes:

A full semantic layout (header, nav, main, footer).
A hero section with a title, description, and CTA button.
A features section using `section` and `article`.
A contact form with validation.
A footer with social links and copyright.

Solution

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
</head>
<body>
    <header>
        <nav aria-label="Main navigation">
            <a href="#hero">Home</a>
            <a href="#features">Features</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <section id="hero">
            <h1>Welcome to our site</h1>
            <p>We provide the best services.</p>
            <a href="#contact">Get started</a>
        </section>

        <section id="features">
            <h2>Our Features</h2>
            <article>
                <h3>High Speed</h3>
                <p>Our services are fast and reliable.</p>
            </article>
            <article>
                <h3>24/7 Support</h3>
                <p>Our team is always available.</p>
            </article>
        </section>

        <section id="contact">
            <h2>Contact Us</h2>
            <form action="/en/submit" method="POST">
                <label for="name">Name:</label>
                <input type="text" id="name" required>
                
                <label for="email">Email:</label>
                <input type="email" id="email" required>
                
                <label for="msg">Message:</label>
                <textarea id="msg" required></textarea>
                
                <button type="submit">Send</button>
            </form>
        </section>
    </main>

    <footer>
        <nav aria-label="Social links">
            <a href="#">Facebook</a>
            <a href="#">Twitter</a>
        </nav>
        <p>&copy; 2024 All rights reserved</p>
    </footer>
</body>
</html>

DevArabi

HTML Course

HTML Exam 1: Fundamentals and Intermediate (20 Comprehensive Challenges)

HTML Exam 1: Fundamentals and Intermediate

DevArabi

HTML Course

HTML Exam 1: Fundamentals and Intermediate (20 Comprehensive Challenges)

HTML Exam 1: Fundamentals and Intermediate

Smart Editor