HTML and Web Design (Grade 12 NSC Matric Computer Application Technology): Revision Notes
Creating a Website
Understanding website purpose and user needs
When creating any website, the most important first step is understanding what your website should achieve. Every successful website has a clear purpose that matches what users actually need from it.
For example, a news website needs to provide up-to-date information about current events. If a news website showed pictures of dogs and cats instead of real news, it wouldn't be very successful because it's not meeting users' expectations.
This means you must always consider both the purpose of your website and what your target users want to gain from visiting it before you start building anything.
Planning your website content
Let's look at a practical example to understand this better. Mandla is a young entrepreneur who wants to start a baked goods business serving customers in the Pretoria and Johannesburg areas. He's decided he needs a website to help his business succeed.
Mandla's website needs to serve a specific purpose: helping customers see what products he offers and how to place orders. Based on this purpose, his website should include:
- The name of his company
- A clear list of available products with prices
- Contact information so customers can place orders
Practical Example: Mandla's Website Planning
Business Goal: Start a baked goods business in Pretoria/Johannesburg
Website Purpose: Help customers discover products and place orders
Required Content:
- Company name and branding
- Product list with pricing
- Contact details for orders
This planning stage helps ensure the website will actually be useful for both Mandla and his potential customers.
Basic HTML document structure
Every HTML webpage follows the same basic structure, just like how every house needs a foundation, walls, and a roof. Here's how to create the basic framework:
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
</body>
</html>
The HTML document has two main sections:
- Head section: Contains information about the page (like the title that appears in the browser tab)
- Body section: Contains all the content that visitors will actually see on the webpage
When creating your HTML file, always save it with the .html extension (for example: Mandla.html) so browsers know how to display it properly.
Creating content with HTML tags
Headings and paragraphs
Once you have your basic structure, you can start adding content inside the body section. Use heading tags to create titles and paragraph tags for regular text:
<h1>Freshly baked goods only a click away</h1>
<p>Do you live in the Johannesburg or Pretoria area?</p>
<p>Do you have a love of freshly baked goods?</p>
<p>Then Mandla's Baked Goods is the place for you</p>
Creating tables
Tables are perfect for displaying organised information like product lists with prices. Here's how to create a table structure:
HTML Table Structure Example
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Cakes</td>
<td>R 230</td>
</tr>
<tr>
<td>Cupcakes</td>
<td>R 80</td>
</tr>
</table>
Adding contact information
Don't forget to include ways for customers to get in touch:
<p>Place your order now by contacting Mandla at MandlaBakes@mail.com or phoning 012 111 558</p>
Contact information is essential for business websites as it allows customers to complete their purchase or ask questions about products.
Basic styling and formatting
To make your website more visually appealing, you can add basic styling using CSS. Here are some simple techniques:
Centre-align table text:
<td style="text-align:centre">Product Name</td>
Add background colours and text colours:
<h1 style="background-color: blue; colour: white">Your Heading</h1>
Add borders to tables:
<table border="2">
CSS Styling Example
To create a professional-looking heading with blue background and white text:
<h1 style="background-color: blue; colour: white">Mandla's Baked Goods</h1>
This applies background-color and colour properties directly to the HTML element.
These styling techniques help make your website more professional and easier to read.
File management and saving
When working with HTML files, proper file management is crucial:
- Use a text editor like Notepad++ to write your HTML code
- Always save your files with the .html extension
- Choose meaningful filenames (like Mandla.html rather than untitled.html)
- Save your work regularly to avoid losing progress
- Test your webpage by opening the HTML file in a web browser
Best Practice Tip
Always test your webpage by opening the HTML file in a web browser after saving. This helps you catch any coding errors and see exactly how your website will appear to visitors.
Key Points to Remember:
- Plan first: Always determine your website's purpose and what users need before you start coding
- Structure matters: Every HTML document needs a basic structure
- Tables are powerful: Usetags to display organised information like product lists
- Styling enhances usability: Basic CSS styling makes websites more professional and easier to read
- File management is key: Save with .html extension and use meaningful filenames to stay organised