Skip to content
CAT Study Hub
HTML17 marks

Question 6 — Web design

Open 6_YouthInnovate.html in Notepad and in a browser. 1 mark is also awarded for correct closing and nesting of tags overall.

I could not see the contents of 6_YouthInnovate.html or 6_Info.txt, so the answers below show the correct code for you to type or compare with what is already in your file. The two TechnoGeek HTML files in the Practice section show the same kinds of mistakes you will be asked to fix.

6.11 mark

Make the necessary changes to the existing minimum required tags for a valid HTML page.

Show answer
HTML
<html>
 <head>
  <title>Youth Innovate SA</title>
 </head>
 <body>
  ...
 </body>
</html>
<html>
 <head>
  <title>Youth Innovate SA</title>
 </head>
 <body>
  ...
 </body>
</html>

Why this earns the marks

check for each of the six: <html>, <head>, <title> with text, </head>, <body>, and the closing </body></html> — this is the complete minimum skeleton a browser needs to treat the file as valid HTML at all, so each missing or broken piece is its own fault to find and fix. The usual planted faults: a missing closing tag, a title tag without text, or <body> missing — these are deliberately the kinds of errors a human skim-reading the rendered page would never notice (a browser often still displays something even with structural tags missing), which is exactly why marking is based on the source code, not how the page looks.

6.21 mark

Ensure the main heading 'Youth Innovate SA' appears in Arial Black.

Show answer
HTML
<h1><font face="Arial Black">Youth Innovate SA</font></h1>
<h1><font face="Arial Black">Youth Innovate SA</font></h1>

Why this earns the marks

the tag sheet gives <font face='Times New Roman'> for fonts. The attribute is face (not "font" or "type") and the value must be spelled Arial Black, because HTML attribute names are fixed, specific keywords — the browser looks for exactly face=, so a plausible-sounding but wrong attribute name is silently ignored rather than applied. Close the font tag inside the heading to keep nesting correct: <font> must open and close entirely within the <h1> it's styling, the same nesting rule covered in the HTML notes — closing it outside the heading, or not at all, breaks the strict "containers can't partially overlap" requirement.

6.31 mark

Insert the sub-heading 'Township Tech Summit' as a level-3 heading under the main heading.

Show answer
HTML
<h1>...</h1>
<h3>Township Tech Summit</h3>
<h1>...</h1>
<h3>Township Tech Summit</h3>

Why this earns the marks

level 3 = <h3> — the heading tags map directly onto their number, so "a level-3 heading" has exactly one correct tag, not a judgement call about what size looks right. It goes directly below the </h1> line, since "under the main heading" describes document position (the next element after the h1 closes), not visual styling. Do not copy a stray space from the paper before "Township": a leading space inside a heading's text is a minor but real mismatch against the expected content, and is a common, easily-missed slip when typing text straight out of a printed question paper.

6.47 marks

Construct the partners table: cellpadding 3; first row black background with white text; add a bottom row that displays the text found in 6_info.txt. Result looks like the screenshot: header Partner | Logo | Website, a row mLab South Africa | (empty logo) | https://mlab.co.za, and a final merged row "YISA | Community Partners | 2026-06-20".

Show answer
HTML
<table border="1" cellpadding="3">
 <tr bgcolor="black">
  <th><font color="white">Partner</font></th>
  <th><font color="white">Logo</font></th>
  <th><font color="white">Website</font></th>
 </tr>
 <tr>
  <td>mLab South Africa</td>
  <td></td>
  <td><a href="https://mlab.co.za">https://mlab.co.za</a></td>
 </tr>
 <tr>
  <td colspan="3"> (paste the text from 6_info.txt here) </td>
 </tr>
</table>
<table border="1" cellpadding="3">
 <tr bgcolor="black">
  <th><font color="white">Partner</font></th>
  <th><font color="white">Logo</font></th>
  <th><font color="white">Website</font></th>
 </tr>
 <tr>
  <td>mLab South Africa</td>
  <td></td>
  <td><a href="https://mlab.co.za">https://mlab.co.za</a></td>
 </tr>
 <tr>
  <td colspan="3"> (paste the text from 6_info.txt here) </td>
 </tr>
</table>

Why this earns the marks

the seven marks come from: cellpadding="3"; a black background on the first row; white text in that row (needs the font tag in every header cell or equivalent); a new <tr> at the bottom; a single <td> spanning all three columns using colspan="3"; the 6_info.txt text copied correctly; and matching the displayed layout — seven genuinely separate pieces of markup built into one table. Open 6_Info.txt in Notepad and copy the exact text, since the merged bottom row's content is given data, not something you compose yourself. White text on a white page would be invisible, which is why the black background comes first: the two settings only make sense together, and doing them in either order is fine as long as both end up applied — it's the dependency between them (visible text needs contrast with its background) that the marking is checking you understood. If a table already exists, repair it rather than retyping, since the exam rewards fixing specific faults efficiently rather than rebuilding working markup from scratch.

6.52 marks

Ensure the bottom hyperlink correctly navigates to 'press.html' with link text 'Press & Media Kit'.

Show answer
HTML
<a href="press.html">Press &amp; Media Kit</a>
<a href="press.html">Press &amp; Media Kit</a>

Why this earns the marks

one mark for the correct href="press.html" (exact file name, quotes, no typos or "press.htm"), one for the visible link text and a proper closing </a> — the destination and the display text are, as covered in the HTML notes, two completely independent parts of an anchor tag, so each is checked on its own. In HTML the safe way to write an ampersand is &amp;, which the browser displays as &, because a literal & inside HTML source risks being misread as the start of a different character entity — using the named entity instead guarantees the browser renders a plain ampersand rather than something unpredictable. Test by clicking it in the browser: this is the fastest way to catch a filename typo (press.htm instead of press.html), since the link would otherwise look completely correct in the source until someone actually tries to follow it.

6.62 marks

Using 6_PressKit.docx and the two images 6_banner.jpg and 6_hub.jpg, create a single PNG logo named 6_YISALogo.png. Save it in your examination folder.

Show answer
  1. Open 6_PressKit.docx and follow its layout cues. Place 6_banner.jpg and 6_hub.jpg together as instructed (Insert → Pictures; arrange with Wrap Text so they can sit together).

  2. Select both pictures (Ctrl+click), right-click → Group.

  3. Right-click the group → Save as Picture… → choose PNG → name 6_YISALogo.png → save into the exam folder.

  4. Fallback: copy the group, paste into any image tool or use Snipping Tool, and save as PNG.

Why this earns the marks

marks for one combined image, and correct name and format in the right folder — three separate checks on the output file itself, not on the steps used to produce it. A picture file keeps the combined design as one object, which is what the HTML page needs, because an <img> tag can only reference a single image file — there's no HTML markup that combines two separate files into one displayed picture, so the combining has to happen beforehand, in an image or document tool, producing one new file. The extension must be .png, not .jpg, since the task specifically asks for a PNG (a format that, unlike JPG, supports transparency — useful for a logo that might sit over a coloured background), and a mismatched extension is treated as the wrong file even if the image content itself is correct.

6.72 marks

Add 6_YISALogo.png to the top of 6_YouthInnovate.html, centred, width 320, with meaningful alt text.

Show answer
  1. Save (the paper says save, then later close) 6_YouthInnovate.html. Close all open files at the end of the question.

HTML
<body>
 <p align="center"><img src="6_YISALogo.png" width="320" alt="Youth Innovate SA logo"/></p>
 <h1>...</h1>
<body>
 <p align="center"><img src="6_YISALogo.png" width="320" alt="Youth Innovate SA logo"/></p>
 <h1>...</h1>

Why this earns the marks

the image goes first inside body, above the heading ("top of"), because HTML content renders in the exact order it appears in the source — there's no separate "position" property to set, so the only way to make an element appear first is to place its tag first. align="center" on the paragraph centres it (an image itself has no alignment attribute in this tag sheet, so it has to be wrapped in a centred container), width="320" sets size as a plain number of pixels (no unit suffix needed in this older HTML style, unlike modern CSS which would require px), and the alt describes what the logo is, which a screen reader or broken-image box will show, exactly as covered in the HTML links-and-images notes. The file name must match the PNG saved in 6.6 exactly, and the PNG must be in the same folder as the HTML, because src is a file path the browser resolves literally — any mismatch in spelling, case, extension or folder location means the browser simply cannot find the file.

6.81 mark

1 mark is also awarded for correct closing and nesting of tags overall.

Show answer
  1. Re-read the whole file from top to bottom once all other sub-questions are done.

  2. Check every opening tag has a matching closing tag, and that tags close in the reverse order they opened (innermost first) — see the minimum-structure and text-formatting notes.

  3. Pay special attention to tags you edited for 6.2, 6.4 and 6.7, since a forgotten closing </font> or </td> is the most common way to lose this mark.

Why this earns the marks

this mark is awarded once for the document as a whole rather than for any single instruction, so it rewards general HTML hygiene: matched pairs and correct nesting order across every tag you touched, not just the ones named in 6.1–6.7. It exists because every other sub-question in this question asks you to edit markup that's already partly broken, which means there's real risk of forgetting a closing tag or nesting something incorrectly while fixing a different, unrelated fault nearby — this mark specifically checks that your edits didn't leave a new structural problem behind, on top of fixing the ones you were explicitly asked to fix.