HTML Basics Assignment
A printable handout for students to practice lists, tables, forms, fieldsets, legends, and positioning
Teacher: MUGWANEZA MANZI Audace Class: SWD Level 3
Topic: Basic HTML Structure Submission: One HTML file or printed PDF
Assignment Instructions
Create a simple HTML page that demonstrates the following topics:
Headings, paragraphs, and line breaks
Ordered lists and unordered lists
Tables with rows, columns, and merged cells using colspan and rowspan
Forms with inputs, labels, fieldset, and legend
Positioning using fixed and absolute
Images and basic page structure
Goal: build one page that teaches the basics of HTML clearly and neatly.
Part 1: Lists
Use both ordered and unordered lists.
<h3>My Favorite Subjects</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h3>Things I Need to Learn</h3>
<ul>
<li>Lists</li>
<li>Tables</li>
<li>Forms</li>
</ul>
Part 2: Tables
Make a table with at least 4 columns. Use colspan and rowspan where needed.
Subject Period Exam Total
Math 20 70 90
English 18 72 90
Grand Total 180
<table border="1" cellpadding="8" cellspacing="0">
<tr>
<th>Subject</th>
<th>Period</th>
<th>Exam</th>
<th>Total</th>
</tr>
<tr>
<td>Math</td>
<td>20</td>
<td>70</td>
<td>90</td>
</tr>
<tr>
<td colspan="3">Grand Total</td>
<td>180</td>
</tr>
</table>
Part 3: Forms, Fieldset, and Legend
Use fieldset and legend to group related form elements.
<form>
<fieldset>
<legend>Student Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" /><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" /><br><br>
<label for="class">Class:</label>
<input type="text" id="class" name="class" />
</fieldset>
</form>
Part 4: Positioning
Demonstrate fixed and absolute positioning in one example.
<style>
.fixed-box {
position: fixed;
top: 20px;
right: 20px;
background: #ffd54f;
padding: 10px;
}
.parent {
position: relative;
height: 200px;
border: 1px solid #000;
}
.absolute-box {
position: absolute;
bottom: 10px;
left: 10px;
background: #90caf9;
padding: 10px;
}
</style>
<div class="fixed-box">I stay in one place</div>
<div class="parent">
<div class="absolute-box">I move inside my parent</div>
</div>
Part 5: Full HTML Example
This is a simple model students can study before making their own page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My HTML Page</h1>
<p>This page shows lists, tables, forms, and positioning.</p>
<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Sports</li>
</ul>
<h2>Marks Table</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr>
<th>Subject</th>
<th>Mark</th>
</tr>
<tr>
<td>HTML</td>
<td>95</td>
</tr>
</table>
</body>
</html>
Student Task
Your work:
1. Create one HTML page about yourself or your school.
2. Include at least 1 ordered list and 1 unordered list.
3. Create 1 table with at least 4 columns and 4 rows.
4. Create 1 form that uses fieldset and legend.
5. Use fixed and absolute positioning somewhere in the page.
6. Add a picture, headings, and short paragraphs.
Extra challenge: make your page look neat and easy to read.
Submission Rule
Save your work as [Link] and submit the file, or export it as PDF if requested.