Grade 10 IT Final Exam (Specialized Focus)
This interactive study companion is custom-tailored to focus solely on **HTML Structuring** and **CSS Styling** concepts. Practice hand-coding layout tables, component styling, relative units, selector specificity, and box model relationships.
HTML Structuring
Covers table tags, semantic layers, lists, anchor parameters, video embeddings, and document structures.
CSS Rules & Specificity
Covers inline/internal styles, Box Model layout coordinates, viewport responsiveness, relative units (rem/em), and specificity weights.
Interactive Blocks
Features a CSS Box Model layers drag-and-drop hierarchy puzzle and a live CSS Selectors weight matcher.
Section A: Multiple Choice Questions (HTML & CSS)
Each correct answer is awarded 1 Mark. Total: 20 Marks.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Dream Vacation Destinations</title> 5 <link rel="stylesheet" href="style-destinations.css"> 6 </head> 7 <body> 8 9 <header> 10 <h1>Welcome to the Travel Portal</h1> 11 </header> 12 13 <nav> 14 <ul> 15 <li><a href="index.html">Home</a></li> 16 <li><a href="gallery.html" title="View breathtaking natural scenes">Gallery</a></li> 17 <li><a href="contact.html">Contact Us</a></li> 18 </ul> 19 </nav> 20 21 <main> 22 <section> 23 <h2>Breathtaking Raja Ampat</h2> 24 <p>Experience its beautiful marine biodiversity:</p> 25 <img src="rajaampat.jpg" alt="A spectacular landscape of Raja Ampat islands" width="400" height="250"> 26 <p>Watch the short documentary below:</p> 27 <iframe width="560" height="315" src="https://www.youtube.com/embed/xyz123" frameborder="0" allowfullscreen></iframe> 28 </section> 29 </main> 30 31 <footer> 32 <p><small>© 2026 Wonderful Indonesia</small></p> 33 </footer> 34 35 </body> 36 </html>
Section B: HTML & CSS Applied Tasks
Total Marks: 60. Type answers and use self-evaluation checkbox tallies.
Self Grading Rubric (Q1)
• Part (a): Block-level elements always start on a new line and stretch to take up the full width available. Inline elements do not start on a new line and only take up as much width as their content needs.
• Part (b): Screen readers can identify landmarks easily (accessibility). Search engines crawl the layout with greater contextual intelligence (SEO optimization).
Scenario: You are a Junior Developer for the "Taste of Sumatra" travel and food campaign. Create a structural HTML document following these guidelines:
- A main header (
h1) titled "Sumatran Culinary Expedition". - A sub-header (
h2) titled "Most Loved Dishes". - An unordered list (
ul) containing at least three typical delicacies (e.g. Rendang, Pempek, Mie Aceh). - A pricing table (
table) with two main columns: "Dish Name" and "Price per Portion". - Populate one sample row: "Rendang" costing "Rp 50,000".
Self Grading Rubric (Q2)
<h1>Sumatran Culinary Expedition</h1>
<h2>Most Loved Dishes</h2>
<ul>
<li>Rendang</li>
<li>Pempek</li>
<li>Mie Aceh</li>
</ul>
<table>
<tr>
<th>Dish Name</th>
<th>Price per Portion</th>
</tr>
<tr>
<td>Rendang</td>
<td>Rp 50,000</td>
</tr>
</table>
Problem Solving: Build an interactive card element titled "Pempek Palembang" using HTML and integrated inline or internal CSS rules.
Task A: Structure Requirements (6 Marks)
• An outer div wrapper with class "food-card".
• An h1 header containing "Pempek Palembang".
• An image component sourcing "pempek.jpg" with alt text.
• A paragraph summarizing the origin story of Pempek.
• An anchor (a) pointing to "gofood.com" with target configured to open in a new tab.
Task B: Style Requirements (6 Marks)
• Spacing: Set padding of 25px and margin of 15px on .food-card.
• H1 Header: Color style to green, align text center.
• Image: Border radius for sleek round corners, fixed width of 350px.
• Interactivity: Apply a hover state pseudo-class so background-color transitions to light gray (#f0f0f0) when moused over.
Self Grading Rubric (Q3)
HTML Component (6 Marks)
CSS Rules (6 Marks)
Interactive Sandbox: Arrange the following layers of the standard CSS Box Model from the innermost layer (where text/images are drawn) to the outermost boundary layer.
Rearrange using the action buttons until the layers align sequentially from inner core to outer envelope.
Sequence innermost (top) to outermost (bottom):
Self Grading Rubric (Q4)
Problem Solving: In CSS, when styles conflict, browsers use specificity rules to decide which declaration wins. Match the selector strings with their correct structural composition values.
Specificity Matching Dashboard
#main-card .title a.btn:hoverSelf Grading Rubric (Q5)
•
#main-card .title a: ID selector (#main-card) is 100, class selector (.title) is 10, element tag (a) is 1. Score: 111 (0, 1, 1, 1).•
.btn:hover: Class selector (.btn) is 10, pseudo-class (:hover) is 10. Score: 20 (0, 0, 2, 0).
Ensuring web layouts look uniform and readable across desktops, tablets, and smartphones is a core requirement of modern web development.
Self Grading Rubric (Q6)
• a) The viewport tag forces the browser to set page dimensions based on the device width, preventing mobile browsers from rendering desktop-width layouts and shrinking them.
• b) "em" calculates sizes relative to its immediate parent element's font size (which can cause compound scaling errors). "rem" is relative directly to the Root element (<html>) font size.