Welcome to HTML practice exercises! These exercises will help you master fundamental HTML concepts through hands-on practice. Each exercise includes requirements, hints, and complete solutions.
Exercise 1: Personal Profile Page
Create a personal profile webpage that includes your basic information, education details, and skills.
Requirements:
- Use appropriate HTML5 structure with header, main, and footer
- Include a profile picture (use placeholder if needed)
- Add your name as the main heading
- Create sections for About Me, Education, and Skills
- Use unordered list for skills
- Add contact information in the footer
- Apply text formatting (bold, italic where appropriate)
Hints:
Start with the basic HTML5 structure. Use <header>, <main>, and <footer> tags. For the profile image, you can use a placeholder service like “https://via.placeholder.com/150”. Use <ul> and <li> for the skills list.
Exercise 2: Course Registration Form
Create a course registration form for BCA students to select their elective subjects.
Requirements:
- Create a form with proper structure
- Include text fields for student name and ID
- Add radio buttons for gender selection
- Include checkboxes for elective subjects (at least 4 options)
- Add a dropdown for semester selection
- Include a textarea for additional comments
- Add submit and reset buttons
- Use fieldset and legend for form sections
Hints:
Use <form> tag with appropriate action and method. For radio buttons, use the same name attribute to group them. For checkboxes, each should have a unique name or use array notation. Use <select> and <option> for dropdown.
Exercise 3: University Timetable
Create a weekly class timetable for BCA students using HTML tables.
Requirements:
- Create a table with days of the week as columns
- Include time slots as rows
- Use table headers for days and times
- Merge cells for lectures spanning multiple periods
- Add different background colors for different subjects
- Include a caption for the table
- Add appropriate borders and spacing
Hints:
Use <table>, <tr>, <th>, and <td> tags. Use colspan and rowspan attributes to merge cells. Apply inline styles for background colors or use CSS classes.
Exercise 4: College Department Page with Navigation
Create a college department homepage with navigation menu and multiple sections.
Requirements:
- Create a navigation menu with links to different sections
- Use header with college logo and name
- Include sections for Home, About, Courses, Faculty, and Contact
- Add images for faculty members (placeholders)
- Create an ordered list for course curriculum
- Add a footer with copyright information
- Use semantic HTML5 tags throughout
Hints:
Use <nav> for navigation, <section> for content areas, and <article> for faculty profiles. Create anchor links for navigation to different sections on the page.
Exercise 5: Student Feedback Form
Create a comprehensive student feedback form for college courses.
Requirements:
- Include text inputs for student information
- Add radio buttons for rating scales (1-5)
- Include checkboxes for course aspects (content, teaching method, etc.)
- Add a dropdown for course selection
- Include a large textarea for additional comments
- Add a date picker for feedback date
- Include submit button with confirmation message
- Use proper labels for all form elements
Hints:
Use <input type="date"> for date selection. Group related form elements using <fieldset>. Use the required attribute for mandatory fields. Implement a rating system using radio buttons with values 1 through 5.
Exercise Solutions
Below you’ll find the complete solutions for all exercises. Try to complete the exercises on your own before checking the solutions!
Solution 1: Personal Profile Page
profile.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Personal Profile</title>
</head>
<body>
<header>
<h1>John Doe</h1>
<img src="https://via.placeholder.com/150" alt="Profile Picture">
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>I am a <strong>BCA student</strong> passionate about web development.
I enjoy creating <em>interactive and user-friendly</em> websites.</p>
</section>
<section id="education">
<h2>Education</h2>
<p>Bachelor of Computer Applications - XYZ University (2022-2025)</p>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML5 & CSS3</li>
<li>JavaScript</li>
<li>Python Programming</li>
<li>Database Management</li>
</ul>
</section>
</main>
<footer>
<p>Contact: john.doe@email.com | Phone: +1234567890</p>
<p>© 2024 John Doe. All rights reserved.</p>
</footer>
</body>
</html>
Solution 2: Course Registration Form
registration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Course Registration</title>
</head>
<body>
<h1>BCA Course Registration Form</h1>
<form action="submit.php" method="post">
<fieldset>
<legend>Student Information</legend>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="id">Student ID:</label>
<input type="text" id="id" name="student_id" required>
<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>
</fieldset>
<fieldset>
<legend>Course Selection</legend>
<label for="semester">Semester:</label>
<select id="semester" name="semester">
<option value="3">Semester 3</option>
<option value="4">Semester 4</option>
<option value="5">Semester 5</option>
<option value="6">Semester 6</option>
</select>
<br><br>
<label>Elective Subjects:</label><br>
<input type="checkbox" id="web" name="electives[]" value="web_development">
<label for="web">Advanced Web Development</label><br>
<input type="checkbox" id="mobile" name="electives[]" value="mobile_app">
<label for="mobile">Mobile Application Development</label><br>
<input type="checkbox" id="data" name="electives[]" value="data_science">
<label for="data">Data Science Fundamentals</label><br>
<input type="checkbox" id="cyber" name="electives[]" value="cyber_security">
<label for="cyber">Cyber Security</label>
<br><br>
<label for="comments">Additional Comments:</label><br>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>
</fieldset>
<br>
<input type="submit" value="Register">
<input type="reset" value="Clear Form">
</form>
</body>
</html>
Solution 3: University Timetable
timetable.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BCA Class Timetable</title>
<style>
table { border-collapse: collapse; width: 100%; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: center; }
th { background-color: #4CAF50; color: white; }
.theory { background-color: #e8f5e8; }
.lab { background-color: #fff3e0; }
.break { background-color: #f5f5f5; font-style: italic; }
</style>
</head>
<body>
<h1>BCA Semester 4 Timetable</h1>
<table>
<caption>Weekly Class Schedule (9:00 AM - 4:00 PM)</caption>
<tr>
<th>Time/Day</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>9:00-10:00</th>
<td class="theory">Database Management</td>
<td class="theory">Operating Systems</td>
<td class="lab">Web Development Lab</td>
<td class="theory">Software Engineering</td>
<td class="theory">Computer Networks</td>
</tr>
<tr>
<th>10:00-11:00</th>
<td class="theory">Database Management</td>
<td class="theory">Operating Systems</td>
<td class="lab" rowspan="2">Web Development Lab</td>
<td class="theory">Software Engineering</td>
<td class="lab">DBMS Lab</td>
</tr>
<tr>
<th>11:00-12:00</th>
<td class="theory">Computer Networks</td>
<td class="lab">Programming Lab</td>
<!-- Web Development Lab continues -->
<td class="lab" rowspan="2">Networking Lab</td>
<td class="lab" rowspan="2">DBMS Lab</td>
</tr>
<tr>
<th>12:00-1:00</th>
<td class="break" colspan="2">LUNCH BREAK</td>
<td class="break">LUNCH BREAK</td>
<!-- Networking Lab continues -->
<!-- DBMS Lab continues -->
</tr>
<tr>
<th>1:00-2:00</th>
<td class="theory">Web Technologies</td>
<td class="theory">Mathematics</td>
<td class="theory">Computer Networks</td>
<td class="theory">Operating Systems</td>
<td class="theory">Web Technologies</td>
</tr>
<tr>
<th>2:00-3:00</th>
<td class="lab">Programming Lab</td>
<td class="theory">Mathematics</td>
<td class="theory">Software Engineering</td>
<td class="lab">OS Lab</td>
<td class="theory">Database Management</td>
</tr>
<tr>
<th>3:00-4:00</th>
<td class="lab">Programming Lab</td>
<td class="break">Library</td>
<td class="break">Self Study</td>
<td class="lab">OS Lab</td>
<td class="break">Sports</td>
</tr>
</table>
</body>
</html>
Note: Due to space limitations, we’ve shown three complete solutions. The remaining solutions follow similar patterns with appropriate HTML structure for each exercise requirement.
Additional Practice Tips:
1. Always validate your HTML using the W3C Validator
2. Use semantic HTML5 tags for better structure and SEO
3. Practice creating accessible forms with proper labels
4. Experiment with different table layouts and form elements
5. Try to recreate real-world websites to improve your skills