GCE O/L ICT Lesson 14: Mastering Web Development

Web development is the art and science of creating websites that are functional, accessible, and visually appealing. For GCE O/L ICT students, Lesson 14 introduces the fundamental languages of the web: HTML and CSS.

By combining the structural notes from our LMS with the SchoolICT.net interactive web development tool, you can go from writing your first tag to previewing a live webpage in seconds.

1. Introduction to Web Development

Websites are essentially documents stored on a server and delivered to your browser. The two primary technologies we use to build them are:

• HTML (HyperText Markup Language): The structure of the webpage (like the skeleton of a house).
• CSS (Cascading Style Sheets): The presentation or styling of the webpage (like the paint and decor of a house).

2. Fundamental HTML Tags

HTML uses “tags” enclosed in angle brackets < >. Most tags come in pairs: an opening tag and a closing tag .

Basic Document Structure

Every HTML document must follow this structure:

Essential Content Tags

5. Web Design Principles

A good website must be:

• User-Friendly: Easy to navigate.
• Readable: Clear fonts and high contrast.
• Responsive: Looks good on both computers and mobile phones.
• Consistent: Uses the same colors and fonts throughout.

6. Interactive Learning: Web Development Tool

The best way to learn HTML is to see the result immediately. The SchoolICT.net Web Developing Learning Tool provides a split-screen experience.

Features of the Tool:

• Real-time Editor: Type your HTML and CSS code in the left pane and see the result instantly in the right pane.
• Tag Library: Access a quick-reference list of common tags to insert them into your code automatically.
• Template Gallery: Start with pre-built templates for personal homepages or school projects.
• CSS Styler: Experiment with colors, margins, and fonts using a visual selector to generate CSS code.

7. Web Hosting and Publishing

Once your website is finished, it needs to be “hosted” so others can see it.

• Domain Name: The address people type in (e.g., www.myschool.com).
• Web Hosting: The service that provides the space on a server to store your website files.
• Uploading: The process of moving your files from your computer to the web server (often via FTP).