HTML — Web Design Grade 10

HTML (HyperText Markup Language) is the coding language used to build web pages. In IT CAPS, you create basic static web pages using HTML tags.

What is HTML?

HTML uses tags — keywords inside angle brackets <like this> — to mark up content. Most tags come in pairs: an opening tag and a closing tag (with a slash).

HTML — basic tag structure

<tagname>content here</tagname>

Basic Page Structure

Every HTML file must have this skeleton

Leave nothing out — examiners check for the doctype, html, head, title, and body tags.

HTML — complete page skeleton

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>

    <!-- page content goes here -->

  </body>
</html>

Tag	Purpose
`<!DOCTYPE html>`	Declares this is an HTML5 document
`<html> … </html>`	Root element — wraps the entire page
`<head> … </head>`	Metadata — not visible on the page (title, CSS links)
`<title> … </title>`	Text shown in the browser tab
`<body> … </body>`	Everything visible on the page
`<!-- comment -->`	Comment — not displayed, for notes only

Headings

Six levels: <h1> is the largest/most important; <h6> is the smallest.

HTML

<h1>Main Page Heading</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>

Paragraphs & Text Formatting

HTML

<p>This is a paragraph of text.</p>

<p>This word is <b>bold</b> and this is <i>italic</i>.</p>
<p>This is <strong>strong</strong> and this is <em>emphasised</em>.</p>

<br>   <!-- line break (no closing tag) -->
<hr>   <!-- horizontal rule / divider line -->

Lists

HTML — unordered (bullet) list

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Mangoes</li>
</ul>

HTML — ordered (numbered) list

<ol>
  <li>Wake up</li>
  <li>Go to school</li>
  <li>Learn IT</li>
</ol>

Links (Hyperlinks)

The href attribute specifies the destination URL.

HTML

<!-- Link to an external website -->
<a href="https://www.google.com">Go to Google</a>

<!-- Link to another page in the same folder -->
<a href="page2.html">Go to Page 2</a>

<!-- Open link in a new tab -->
<a href="https://www.google.com" target="_blank">Open in new tab</a>

Images

The <img> tag has no closing tag. src = image path; alt = alternative text (for accessibility and when image fails to load).

HTML

<img src="photo.jpg" alt="A beautiful sunset" width="400" height="300">

<!-- Image from same folder -->
<img src="logo.png" alt="School logo">

Tables

Tag	Meaning
`<table>`	Creates the table
`<tr>`	Table row
`<th>`	Table header cell (bold, centred)
`<td>`	Table data cell
`border="1"`	Attribute to show borders (old method)

HTML — table example

<table border="1">
  <tr>
    <th>Name</th>
    <th>Mark</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>72</td>
  </tr>
</table>

Background & Font Colour (Inline)

HTML — body background and font

<body bgcolor="lightblue">

<font color="red" size="5" face="Arial">This text is red</font>

Complete Example Page

HTML — full working example

<!DOCTYPE html>
<html>
  <head>
    <title>IT Study Guide</title>
  </head>
  <body bgcolor="white">
    <h1>IT Study Guide</h1>
    <p>Welcome to the <b>IT Study Guide</b> for Grade 10.</p>
    <hr>

    <h2>Topics Covered</h2>
    <ul>
      <li>Algorithms</li>
      <li>Delphi Programming</li>
      <li>HTML</li>
    </ul>

    <h2>Visit Our School</h2>
    <a href="https://www.school.co.za">Click here</a>

    <h2>School Logo</h2>
    <img src="logo.png" alt="School logo" width="200">
  </body>
</html>

Grouping Content — div and span

Sometimes you need to group elements together to style or position them as a unit, even though there's no tag for "that specific group." <div> and <span> exist for exactly this — they add no meaning or default appearance of their own, they're just containers.

Block vs inline container

<div>
  <p>This paragraph and the next one are grouped inside a <div>.</p>
  <p>A <div> always starts on its own new line (block-level).</p>
</div>

<p>Just one word in this sentence is <span>highlighted</span> using a span, which does not start a new line (inline).</p>

<div> is block-level (stacks vertically, takes the full width available) and is used to group larger sections. <span> is inline (sits within a line of text) and is used to mark a small piece of text. Both are usually combined with CSS classes or IDs to apply styling.

Common HTML Tag Reference

Tag	Purpose
`<h1>…<h6>`	Headings (largest to smallest)
`<p>`	Paragraph
`<br>`	Line break
`<hr>`	Horizontal line
`<b>` / `<strong>`	Bold text
`<i>` / `<em>`	Italic text
`<u>`	Underlined text
`<ul>` / `<ol>` / `<li>`	Unordered / ordered list / list item
`<a href="">`	Hyperlink
`<img src="" alt="">`	Image
`<table> <tr> <th> <td>`	Table structure
`<div>`	Block-level container
`<span>`	Inline container

← PreviousString Manipulation (T2–T3) Next →Digital Technologies & ICT (T1)