HTML and Web Design: An Overview Revision Notes for Grade 12 NSC Matric Computer Application Technology

HTML and Web Design: An Overview

Introduction to Web Design

The internet has transformed how we share and access information. By 2018, over 1.8 billion websites existed worldwide, covering virtually every topic imaginable. Each website consists of individual web pages that work together to present information to users.

Web pages might appear complex, but they're actually built from simple components called “building blocks” or tags. These tags work like instructions that tell your web browser exactly how to display text, images, and other content on the screen.

There are two main types of web pages you'll encounter:

Static web pages: These display the same content every time you visit them, like an online brochure.
Dynamic web pages: These change based on user input or database information, like social media feeds or online shopping sites.

infoNote

You can create your first web page using nothing more than a simple text editor like Notepad++. This is because web pages are primarily made up of text-based instructions that browsers can interpret and display.

Understanding HTML Fundamentals

HTML (HyperText Markup Language) is the foundation for creating web pages. Think of HTML as a special language that web browsers understand — when you write instructions in HTML, browsers know exactly how to display your content.

chatImportant

HTML is a coding language used to create web pages.
Tags are building blocks that tell the browser how to display words, images, and videos.
By combining different tags, you can create rich, formatted web pages.

HTML follows a structured approach where content is organised hierarchically. Just like a book has chapters, sections, and paragraphs, HTML pages have a logical structure that browsers follow to display content correctly.

HTML Syntax and Structure Rules

When writing HTML code, you must follow specific rules to ensure browsers can interpret your instructions correctly.

Tag Structure Basics

infoNote

Container Tags Work in Pairs

Most HTML tags work in pairs, known as container tags.
An opening tag starts an instruction, like <p>.
A closing tag ends the instruction, like </p>.
The closing tag includes a forwards slash before the tag name.
Content goes between the opening and closing tags.

Empty Tags

Some tags don't need closing tags and are called empty tags.
Examples include line breaks (<br>) and horizontal rules (<hr>).
These tags perform single actions rather than containing content.

chatImportant

Writing Conventions You Must Follow:

HTML tags should be written in lowercase.
Proper nesting is essential — tags must close in reverse order of opening.
Consistent indentation makes code readable.

Essential HTML Tags Reference

Understanding the most important HTML tags gives you the foundation to create well-structured web pages.

Tag	Purpose	Example Usage
`<html>`	Defines the entire HTML document	`<html> ... </html>` wraps all content
`<head>`	Contains page information and metadata	`<head><title>Page Title</title></head>`
`<title>`	Sets the page title shown in browser tabs	`<title>My Website</title>`
`<body>`	Contains all visible page content	`<body> ... visible content ... </body>`
`<p>`	Creates paragraphs of text	`<p>This is a paragraph.</p>`
`<br>`	Inserts a line break	`Line 1<br>Line 2`
`<hr>`	Creates a horizontal line	`<hr>`
`<b>`	Makes text bold	`<b>Bold text</b>`
`<i>`	Makes text italic	`<i>Italic text</i>`
`<h1>` to `<h6>`	Creates headings of different sizes	`<h1>Main Title</h1>` (largest) to `<h6>Smallest Heading</h6>`
`<center>`	Centres content horizontally	`<center>Centred text</center>`
`<a>`	Creates clickable links	`<a href="https://google.com">Visit Google</a>`
`<img>`	Displays images	`<img src="photo.jpg" alt="Description">`

List Tags for Organised Content

Tag	Purpose	Example Usage
`<ol>`	Creates numbered (ordered) lists	`<ol><li>First</li><li>Second</li></ol>`
`<ul>`	Creates bulleted (unordered) lists	`<ul><li>First</li><li>Second</li></ul>`
`<li>`	Defines individual list items	Used inside `<ol>` or `<ul>` tags

lightbulbExample

Creating a Basic Web Page Structure

<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is my first paragraph of text.</p>
    <p>This is my <b>second</b> paragraph with some <i>formatted</i> text.</p>
  </body>
</html>

This example shows the basic structure every HTML page should follow, with proper nesting and container tags.

HTML Attributes Explained

HTML attributes provide additional information about elements and help customise their behaviour or appearance. Think of attributes as adjectives that describe HTML elements in more detail.

How attributes work:

Attributes are placed inside the opening tag, after the tag name.
They follow the format: attribute="value".
Multiple attributes can be used in a single tag.
Attribute names are written in lowercase.
Attribute values are enclosed in quotation marks.
Different attributes are separated by spaces.

infoNote

Common Attribute Examples:

src in <img> specifies the image file location.
href in <a> specifies the link destination.
alt in <img> provides alternative text for accessibility.
style can add inline CSS styling to any element.

chatImportant

Key Attribute Rules:

Always use quotation marks around attribute values.
Separate multiple attributes with spaces.
Some attributes are required (like src for images).
Others are optional but improve accessibility and functionality.

Understanding attributes allows you to create more sophisticated and user-friendly web pages by providing browsers with detailed instructions about how elements should behave and appear.

bookmarkSummary

Key Points to Remember

HTML is the foundation language for creating web pages — it uses tags as building blocks to structure content and tell browsers how to display information.
Tags work in pairs for most elements, but some empty tags like <br> and <hr> work alone.
Structure matters — proper nesting and organisation create clean, functional web pages.
Attributes enhance functionality — they add more detail and control to elements.
Practice builds proficiency — start with basic tags, then move to more complex HTML as you gain confidence.

HTML and Web Design: An Overview (Grade 12 NSC Matric Computer Application Technology): Revision Notes