CTE Module IV
Assignment
Build Web Pages Using HTML5
Total Marks: 30
Part A – Basic Understanding (10 marks)
Instructions: Answer the following short questions.
1. Compare and contrast HTML4 and HTML5 in terms of features, multimedia support,
and browser compatibility. Provide examples where possible.
2. Discuss how metadata contributes to SEO optimization and browser rendering.
Include examples of meta tags that directly affect search engine ranking and
responsiveness.
3. Discuss the role and advantages of using an IDE (Integrated Development
Environment) in HTML development. Mention specific tools and their unique features
that support productivity.
4. Describe the HTML form submission process, detailing how data is transmitted from
client to server. Differentiate between the GET and POST methods, providing use-case
examples for each.
5. Explain the difference between inline and block-level elements, giving one example of
each.
6. Write the syntax for adding an image and explain the purpose of the alt attribute.
7. Why is <marquee> discouraged in modern web design? What can be used instead?
8. What does target="_blank" do in a link?
9. HTML allows embedding of multimedia elements. Discuss the technical and ethical
considerations when adding audio, video, and iframe elements to a webpage.
10. Examine the role of attributes in enhancing the functionality of HTML elements.
Using at least four examples, explain how global and tag-specific attributes impact
webpage interactivity and presentation.
11. Define the following terms:
a) Tag
b) Attribute
c) Element
Practice (20 marks)
Instructions: Type the following tasks in your HTML editor (Notepad++, VS Code, or any
other).
Save your file as [Link].
Create a webpage that includes the following structure:
<!DOCTYPE html> <hr>
<html lang="en"> <h2>My Favorite Subjects</h2>
<head> <ul type="square">
<meta charset="UTF-8"> <li>Web Design</li>
<title>My Exam Practice Page</title> <li>Computer Science</li>
</head> <li>Mathematics</li>
<body> </ul>
<h1>Welcome to My Web Design </body>
Practice</h1> </html>
<p>This page demonstrates <b>HTML
basics</b> learned in class.</p>
Add a background color (lightblue) to your page using the bgcolor attribute of <body>.
Add an image (any image file) using the <img> tag. Include alt text and set the width to
300px.
Insert a hyperlink that opens in a new tab linking to your school’s website.
Save and preview your page in a browser.
Exercise 1 – Basic Table ( 3 marks )
Create a simple table using <table>, <tr>, and <td> tags.
<!DOCTYPE html> <th>Grade</th>
<html lang="en"> <th>Age</th>
<head> </tr>
<meta charset="UTF-8"> <tr>
<title>Basic Table</title> <td>Eliana</td>
</head> <td>10</td>
<body> <td>16</td>
<h2>Student Information</h2> </tr>
<table border="1"> <tr>
<tr> <td>Yonas</td>
<th>Name</th> <td>11</td>
<td>17</td> </table>
</tr> </body> </html>
Add one more row with your own name.
Change the border color using the style attribute.
Exercise 2 – Styled Table with Caption (3 marks)
Apply attributes such as cellpadding, cellspacing, align, and bgcolor.
<table border="2" cellpadding="8" </tr>
cellspacing="5" align="center"
bgcolor="lightyellow"> <tr>
<caption><b>Weekly Class <td>Tuesday</td>
Schedule</b></caption> <td>Science</td>
<tr>
<td>9:00 - 10:00</td>
<th>Day</th> </tr>
<th>Subject</th> <tr>
<th>Time</th> <td>Wednesday</td>
</tr> <td>HTML Practice</td>
<tr> <td>10:00 - 11:00</td>
<td>Monday</td> </tr>
<td>Mathematics</td> </table>
<td>8:00 - 9:00</td>
Center the caption using <caption> and bold formatting.
Add a new column called Teacher Name and fill in appropriate data.
Exercise 3 – Table with Rowspan and Colspan (3 marks)
Merge cells for improved layout presentation.
<table border="1" cellpadding="10" <th>Room</th>
cellspacing="0" align="center"> </tr>
<caption><b>Examination <tr>
Timetable</b></caption> <td>Monday</td>
<tr bgcolor="#f0f0f0"> <td>Math</td>
<th rowspan="2">Day</th> <td>Lab 1</td>
<th colspan="2">Morning <td>Physics</td>
Session</th> </tr>
<th rowspan="2">Afternoon <tr>
Session</th> <td>Tuesday</td>
</tr> <td>English</td>
<tr bgcolor="#f0f0f0"> <td>Room 5</td>
<th>Subject</th> <td>Chemistry</td>
</tr> </table>
Add a new column for Supervisor.
Apply alternate row colors using inline styles (style="background-color:...").
Exercise 4 – Advanced Table with Sections (5 marks)
Use <thead>, <tbody>, and <tfoot> for structured data.
<table border="1" width="70%"
align="center"> <tr><td>John</td><td>Math</td>
<caption><b>Student Result <td>80</td></tr>
Report</b></caption>
<thead bgcolor="#ccc"> <tr><td>Sara</td><td>English</td
<tr> ><td>85</td></tr>
<th>Name</th> </tbody>
<th>Subject</th> <tfoot bgcolor="#eee">
<th>Marks</th> <tr>
</tr> <td
</thead> colspan="2"><b>Average</b></td>
<tbody> <td>85</td>
</tr>
<tr><td>Alice</td><td>Science</td </tfoot>
><td>90</td></tr> </table>
Add a column for “Grade” (A, B, etc.).
Change <tfoot> background color to light gray.
Table
Instructions:
Write the complete HTML code that generates the above table.
Include a <caption> titled Student Roster Table.
Use <thead>, <tbody>, and <tfoot> correctly.
Add borders and cell spacing using attributes or inline CSS.
Lists
Create the following output preview (3 marks)
Write the HTML code that produces the above output.
Use <ul> and <ol> appropriately.
Add a title in the <head> section: List Practice.
Form
Create the following forms in one HTML file. (5 marks)
Instructions:
Create a form with the title Student Feedback Form.
Include input fields for Name and Email.
Use radio buttons for Class (Grades 9–12).
Add a <textarea> for comments.
Add Submit and Reset buttons.
Ensure the form structure is enclosed in <form> ... </form>.
Use required for Name and Email fields.
Add a simple border or background color using inline CSS.