Below is a set of HTML practical exercises that align with the syllabus for Competency 10: Develops websites incorporating multimedia technologies (using HTML5) . Each exercise includes a description, syllabus coverage, aim, and HTML code.
Exercise 10.1: Basic HTML Structure
Description: Write an HTML file to create a simple webpage with a title, heading, and paragraph.
Syllabus Coverage: Building blocks of a web page (html, head, body).
Aim: Introduce students to the basic structure of an HTML document.
1 2 3 4 5 6 7 8 9 10 11 | <!-- HTML Code --> <!DOCTYPE html> <html> <head> <title>Basic HTML Page</title> </head> <body> <h1>Welcome to My Webpage</h1> <p>This is a simple HTML page.</p> </body> </html> |
Exercise 10.2: Text Formatting
Description: Write an HTML file to format text using headings, paragraphs, bold, italic, and underline tags.
Syllabus Coverage: Text formatting (h1 to h6, p, b, i, u).
Aim: Teach students how to format text in HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- HTML Code --> <!DOCTYPE html> <html> <head> <title>Text Formatting</title> </head> <body> <h1>Main Heading</h1> <p><b>Bold Text</b></p> <p><i>Italic Text</i></p> <p><u>Underlined Text</u></p> </body> </html> |
Exercise 10.3: Adding Comments
Description : Write an HTML file that includes comments to explain the purpose of different sections.
Syllabus Coverage : Adding comments in HTML.
Aim : Teach students how to use comments for better code readability.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- HTML Code --> <!DOCTYPE html> <html> <head> <title>HTML Comments</title> </head> <body> <!-- This is the main heading --> <h1>Main Heading</h1> <!-- This is a paragraph --> <p>This is a paragraph with some <b>bold text</b>.</p> </body> </html> |
Exercise 10.4: Background Color and Images
Description : Write an HTML file to set a background color and add an image to the webpage.
Syllabus Coverage : Background color and images.
Aim : Teach students how to enhance the appearance of a webpage using background and images.
1 2 3 4 5 6 7 8 9 10 11 | <!-- HTML Code --> <!DOCTYPE html> <html> <head> <title>Background and Images</title> </head> <body style="background-color: lightblue;"> <h1>Welcome to My Webpage</h1> <img src="example.jpg" alt="Example Image" width="300" height="200"> </body> </html> |
Exercise 10.5: Creating Lists
Description: Write an HTML file to create ordered, unordered, and definition lists.
Syllabus Coverage: Lists (ol, ul, dl).
Aim: Teach students how to organize content using lists.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!-- HTML Code --> <!DOCTYPE html> <html> <head> <title>HTML Lists</title> </head> <body> <h1>Ordered List</h1> <ol> <li>First Item</li> <li>Second Item</li> </ol> <h1>Unordered List</h1> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <h1>Definition List</h1> <dl> <dt>HTML</dt> <dd>Hypertext Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl> </body> </html> |
Exercise 10.6: Creating Tables
Description: Write an HTML file to create a table with rows, columns, headers, and merged cells.
Syllabus Coverage: Tables (table, tr, th, td, merging rows/columns).
Aim: Teach students how to organize data into tables.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!-- HTML Code --> <!DOCTYPE html> <html> <head> <title>HTML Tables</title> </head> <body> <h1>Student Information</h1> <table border="1"> <tr> <th>Name</th> <th>Age</th> <th>Grade</th> </tr> <tr> <td>Alice</td> <td>20</td> <td>A</td> </tr> <tr> <td colspan="2">Bob</td> <td>B</td> </tr> </table> </body> </html> |
Exercise 10.7: Adding Hyperlinks
Description : Write an HTML file to create hyperlinks for internal navigation, external links, and bookmarks.
Syllabus Coverage : Hyperlinks (a), local links, external links, bookmarks.
Aim : Teach students how to link pages and sections within a webpage.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!-- HTML Code --> <!DOCTYPE html> <html> <head> <title>Hyperlinks</title> </head> <body> <h1>Links</h1> <a href="#section1">Go to Section 1</a><br> <a href="https://www.example.com" target="_blank">Visit Example Website</a> <h2 id="section1">Section 1</h2> <p>This is section 1.</p> </body> </html> |
Exercise 10.8: Embedding Multimedia
Description : Write an HTML file to embed audio and video files into a webpage.
Syllabus Coverage : Multimedia objects (audio, video).
Aim : Teach students how to include multimedia content in webpages.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!-- HTML Code --> <!DOCTYPE html> <html> <head> <title>Multimedia</title> </head> <body> <h1>Audio</h1> <audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <h1>Video</h1> <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video element. </video> </body> </html> |
Exercise 10.9: Creating Forms
Description : Write an HTML file to create a form with input fields, radio buttons, checkboxes, and a submit button.
Syllabus Coverage : Forms (form, input, button).
Aim : Teach students how to collect user input using forms.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!-- HTML Code --> <!DOCTYPE html> <html> <head> <title>HTML Forms</title> </head> <body> <h1>Registration Form</h1> <form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label>Gender:</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br><br> <label>Hobbies:</label> <input type="checkbox" id="reading" name="hobbies" value="reading"> <label for="reading">Reading</label> <input type="checkbox" id="traveling" name="hobbies" value="traveling"> <label for="traveling">Traveling</label><br><br> <button type="submit">Submit</button> </form> </body> </html> |
Exercise 10.10: Grouping Form Data
Description : Write an HTML file to group form data using the (fieldset) tag.
Syllabus Coverage : Grouping form data (fieldset, legend).
Aim : Teach students how to organize form elements logically.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!-- HTML Code --> <!DOCTYPE html> <html> <head> <title>Grouped Form</title> </head> <body> <h1>Registration Form</h1> <form action="/submit" method="post"> <fieldset> <legend>Personal Information</legend> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> </fieldset> <fieldset> <legend>Preferences</legend> <label>Hobbies:</label> <input type="checkbox" id="reading" name="hobbies" value="reading"> <label for="reading">Reading</label> <input type="checkbox" id="traveling" name="hobbies" value="traveling"> <label for="traveling">Traveling</label><br><br> </fieldset> <button type="submit">Submit</button> </form> </body> </html> |
Exercise 10.11: Saving Form Data
Description : Write an HTML file to save form data into a database (simulated with JavaScript alerts).
Syllabus Coverage : Saving form data into a database.
Aim : Introduce students to the concept of saving form data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!-- HTML Code --> <!DOCTYPE html> <html> <head> <title>Save Form Data</title> </head> <body> <h1>Registration Form</h1> <form onsubmit="saveData(event)"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <button type="submit">Submit</button> </form> <script> function saveData(event) { event.preventDefault(); const name = document.getElementById("name").value; const email = document.getElementById("email").value; alert(`Data Saved:\nName: ${name}\nEmail: ${email}`); } </script> </body> </html> |
Above exercises comprehensively cover the HTML-related topics in your syllabus, including basic structure , text formatting , lists , tables , hyperlinks , multimedia , forms , and grouping form data . They are designed to progressively build students’ skills while aligning with the learning outcomes.
Below are advanced HTML practical exercises that go beyond the syllabus, exploring modern and cutting-edge concepts in web development. These exercises will help you deepen your understanding of HTML and its capabilities in building dynamic, interactive, and feature-rich web applications.
Exercise 1: Semantic HTML for Accessibility
Description : Write an HTML file using semantic tags to improve accessibility and SEO.
What You Learn : Semantic HTML elements like (header, footer, article, section, and nav) for better structure and accessibility.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!-- HTML Code --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Semantic HTML</title> </head> <body> <header> <h1>My Website</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <section id="home"> <h2>Welcome</h2> <p>This is the home section of the website.</p> </section> <section id="about"> <h2>About Us</h2> <article> <h3>Our Mission</h3> <p>We aim to create accessible and modern websites.</p> </article> </section> <section id="contact"> <h2>Contact</h2> <address> Email: <a href="mailto:info@example.com">info@example.com</a><br> Phone: +123 456 7890 </address> </section> </main> <footer> <p>© 2023 My Website. All rights reserved.</p> </footer> </body> </html> |
Exercise 2: Advanced Forms with Input Types
Description : Create a form using advanced HTML5 input types like date, color, range, and file.
What You Learn : Modern HTML5 input types for enhanced user experience.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!-- HTML Code --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Advanced Forms</title> </head> <body> <h1>Advanced Form</h1> <form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email" required><br><br> <label for="dob">Date of Birth:</label> <input type="date" id="dob" name="dob"><br><br> <label for="color">Favorite Color:</label> <input type="color" id="color" name="color"><br><br> <label for="range">Volume:</label> <input type="range" id="range" name="volume" min="0" max="100"><br><br> <label for="file">Upload File:</label> <input type="file" id="file" name="file"><br><br> <button type="submit">Submit</button> </form> </body> </html> |
Exercise 3: Embedding Interactive Maps
Description : Embed an interactive Google Map into a webpage using the (iframe) tag.
What You Learn : Embedding third-party content like maps into webpages.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!-- HTML Code --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Map</title> </head> <body> <h1>Our Location</h1> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3960.853875004663!2d79.8598933750574!3d6.927078693043955!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2596bda2e1c5f%3A0x2c63e344ab3f1db5!2sColombo!5e0!3m2!1sen!2slk!4v1698570000000!5m2!1sen!2slk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"> </iframe> </body> </html> |
Exercise 4: Customizing Scrollbars
Description : Customize scrollbars using the ::-webkit-scrollbar pseudo-element (WebKit browsers only).
What You Learn : Styling browser components like scrollbars.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!-- HTML Code --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Scrollbar</title> <style> body { height: 200vh; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; } ::-webkit-scrollbar-thumb:hover { background: #555; } </style> </head> <body> <h1>Scroll Down to See Custom Scrollbar</h1> </body> </html> |
Exercise 5: Creating a Responsive Grid Layout
Description : Use CSS Grid to create a responsive layout without relying on frameworks like Bootstrap.
What You Learn : Building modern, responsive layouts using native HTML and CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!-- HTML Code --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Grid Layout</title> <style> .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .grid-item { background-color: lightblue; padding: 20px; text-align: center; } </style> </head> <body> <div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> <div class="grid-item">Item 4</div> </div> </body> </html> |
Exercise 6: Adding Dark Mode Toggle
Description : Add a dark mode toggle button to switch between light and dark themes using HTML and CSS variables.
What You Learn : Using CSS variables and JavaScript for interactivity.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!-- HTML Code --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dark Mode Toggle</title> <style> :root { --bg-color: #ffffff; --text-color: #000000; } body { background-color: var(--bg-color); color: var(--text-color); transition: all 0.3s ease; } .toggle-btn { padding: 10px 20px; background-color: #333; color: white; border: none; cursor: pointer; } .dark-mode { --bg-color: #222; --text-color: #ffffff; } </style> </head> <body> <h1>Dark Mode Toggle</h1> <button class="toggle-btn" onclick="toggleDarkMode()">Toggle Dark Mode</button> <script> function toggleDarkMode() { document.body.classList.toggle('dark-mode'); } </script> </body> </html> |
Exercise 7: Embedding YouTube Videos
Description : Embed a YouTube video into a webpage using the (iframe) tag.
What You Learn : Embedding multimedia content from external platforms.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!-- HTML Code --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YouTube Video</title> </head> <body> <h1>Embedded YouTube Video</h1> <iframe width="560" height="315" src="https://www.youtube.com/watch?v=MDLn5-zSQQI" title="YouTube Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </body> </html> |
Exercise 8: Creating a Parallax Scrolling Effect
Description : Create a parallax scrolling effect using HTML and CSS.
What You Learn : Adding depth and interactivity to webpages with parallax effects.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!-- HTML Code --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parallax Scrolling</title> <style> body, html { margin: 0; padding: 0; height: 100%; font-family: Arial, sans-serif; } .parallax { height: 100vh; background-image: url('background.jpg'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .content { padding: 50px; background-color: #f4f4f4; text-align: center; } </style> </head> <body> <div class="parallax"></div> <div class="content"> <h1>Welcome to My Website</h1> <p>Scroll down to see the parallax effect.</p> </div> <div class="parallax"></div> </body> </html> |
Exercise 9: Building a Modal Popup
Description : Create a modal popup that appears when a button is clicked.
What You Learn : Adding interactive UI components like modals.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!-- HTML Code --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modal Popup</title> <style> .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover { color: black; } </style> </head> <body> <button id="open-modal">Open Modal</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>This is a modal popup!</p> </div> </div> <script> const modal = document.getElementById("myModal"); const btn = document.getElementById("open-modal"); const span = document.getElementsByClassName("close")[0]; btn.onclick = () => { modal.style.display = "block"; }; span.onclick = () => { modal.style.display = "none"; }; window.onclick = (event) => { if (event.target === modal) { modal.style.display = "none"; } }; </script> </body> </html> |
Exercise 10: Adding Microdata for SEO
Description : Add microdata to a webpage to improve search engine optimization (SEO).
What You Learn : Structured data for better indexing by search engines.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- HTML Code --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Microdata for SEO</title> </head> <body> <div itemscope itemtype="http://schema.org/Book"> <h1 itemprop="name">The Great Gatsby</h1> <p>Author: <span itemprop="author">F. Scott Fitzgerald</span></p> <p>Published: <time itemprop="datePublished" datetime="1925">1925</time></p> <p>ISBN: <span itemprop="isbn">978-0743273565</span></p> </div> </body> </html> |
These exercises explore advanced HTML concepts such as semantic HTML , modern input types , embedding maps and videos , custom scrollbars , responsive grids , dark mode toggles , parallax effects , modals , and microdata for SEO . They provide practical, real-world applications of HTML and will help you explore areas beyond the syllabus.