Skip to content
CAT Study Hub

html

7 sub-questions across 1 paper, 16 marks total.

Computer Applications Technology 2026

Question 6 — Web design
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.

Question 6 — Web design
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.

Question 6 — Web design
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.

Question 6 — Web design
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.

Question 6 — Web design
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.

Question 6 — Web design
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.

Question 6 — Web design
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.