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>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 |