set to 90% browser width with visible borders.
2. Configure table structure with percentage dimensions:
- Cell A (width 70%): Insert banner j31banner.jpg.
- Cell B (width 30%): Insert balloon image.
- Cell C (width 70%): Embed HTML5 video player with controls:
Browser does not support video.
- Cell D (height 10%): Insert text from j31text.txt formatted as .
- Cell E (width 35%): Insert j31serengeti.jpg; Cell F (width 35%): Insert j31maasai.jpg.
- Cell G (height 10%): Candidate details and caption text in .
3. Add appropriate alternate text (alt) to all still images; maintain image aspect ratios.
4. Create hyperlinks: Image j31maasai.jpg links to j31kenya.htm; image j31serengeti.jpg links to j31tanzania.htm in current window.
5. Attach external stylesheet j31stylesheet.css in :
6. Preview in browser; capture screenshot of browser display and copy raw HTML source code into Evidence Document.
🔹 • Web Layers: Content Layer (HTML structure, text, images, tables), Presentation Layer (CSS styles, colors, layouts), Behavior Layer (JavaScript interactive scripting).
🔹 • HTML Table Architecture: `
`, `` (table row), `` (table data cell), ` ` (table header cell). `rowspan="2"` merges 2 vertical rows. `colspan="3"` merges 3 horizontal columns.🔹 • CSS Syntax: `selector { property: value; }`. Example: `h1 { color: #1F4E79; font-family: Arial, sans-serif; font-size: 24pt; }`.
🔹 • Color Representation: Hexadecimal `#RRGGBB` where each pair ranges from `00` (0) to `FF` (255). Example: Red = `#FF0000`, Green = `#00FF00`, Blue = `#0000FF`, White = `#FFFFFF`, Black = `#000000`.
🔹 • Table Border Collapse: `table, td, th { border: 1px solid black; border-collapse: collapse; }` eliminates double borders.
★ Cambridge / WAEC Model Scenario:
Write the CSS rule to format the `body` background color to yellow, and set all `h1` headings to Blue, font-family Arial with a fallback of any generic sans-serif.
💡 Worked Solution & Rationale:
```css
Card 01
Content Layer
👆 Click / Tap to Reveal Definition
Definition 01
The structural layer of web development defined by HTML (headings, paragraphs, tables, images, hyperlinks).
Card 02
Presentation Layer
👆 Click / Tap to Reveal Definition
Definition 02
The visual styling layer of web development defined by CSS (fonts, colors, margins, layouts).
Card 03
Colspan
👆 Click / Tap to Reveal Definition
Definition 03
HTML table attribute that merges adjacent cells horizontally across multiple columns (e.g. colspan='3').
Card 04
Rowspan
👆 Click / Tap to Reveal Definition
Definition 04
HTML table attribute that merges adjacent cells vertically across multiple rows (e.g. rowspan='2').
Card 05
border-collapse
👆 Click / Tap to Reveal Definition
Definition 05
CSS property that merges adjacent table cell borders into a single solid border, eliminating double borders.
Card 06
Font Stack
👆 Click / Tap to Reveal Definition
Definition 06
A prioritized list of fallback fonts in CSS (e.g. Arial, Helvetica, sans-serif) to ensure consistent aesthetics.
⚠️ Candidate Error Trap:
A candidate wrote this HTML tag to attach an external stylesheet: ``
🎯 Your Detective Mission:
Explain why this tag fails to load the stylesheet and write the correct HTML link tag.
Reveal Examiner Diagnostic & Corrected Fix
✅ Official Examiner Solution:
The `