Develop simple web pages

# Develop simple web pages ## Objectifs et prérequis This chapter aims to equip Upper Sixth ICT students with the foundational skills to design, structure, and publish simple web pages using HTML. Students will learn to interpret web development concepts within the Cameroonian and African digital context, apply semantic markup correctly, and create accessible, functional web pages aligned with national curriculum standards. By the end of this chapter, learners will be able to distinguish between static and dynamic web content, construct valid HTML documents, and evaluate the usability of simple web interfaces. Prerequisites include basic computer literacy, familiarity with file management (creating, saving, renaming files), and an understanding of what the internet and web browsers are. Prior exposure to basic text editing (e.g., using Notepad or TextEdit) is expected. No prior programming experience is required. --- ## I. Integration activities ### Context and definitions Integration activities in the ICT Upper Sixth curriculum serve as bridging exercises that connect theoretical knowledge to practical application. In the context of web development, these activities prepare students to transition from abstract concepts of the internet and digital communication to hands-on creation of web content. They emphasize real-world relevance, particularly in Cameroon’s growing digital economy, where small businesses, educational institutions, and NGOs increasingly rely on basic web presence for outreach and service delivery. > **Integration activities** are structured, curriculum-aligned tasks designed to reinforce prior learning (e.g., internet basics, file types, digital communication) while introducing new competencies in web development through guided, incremental practice. These activities are not isolated drills but are intentionally sequenced to build confidence and competence. For example, students may first identify HTML elements in existing Cameroonian government or school websites (e.g., MINEDUC, University of Buea), then modify simple templates before creating original pages. ### Facts, dates, and names - The Cameroon National ICT Policy 2020 emphasizes digital literacy as a pillar for youth empowerment and economic inclusion. - As of 2023, over 40% of secondary schools in Cameroon’s Anglophone regions reported using basic web tools for internal communication (MINPOSTEL survey). - Tim Berners-Lee invented the World Wide Web in 1989 at CERN; HTML was first proposed in 1991 as a simple markup language for sharing scientific documents. - The first web page, hosted at info.cern.ch, went live on August 6, 1991, and contained only text and hyperlinks. ### Causes and consequences The push for integration activities stems from the gap between theoretical ICT knowledge and practical employability skills. In Cameroon, many students understand what a website is but cannot create one. This limits their ability to participate in the digital economy, especially in rural areas where digital entrepreneurship is a viable path to self-employment. Consequences of effective integration include: - Increased student engagement through tangible outputs. - Better preparation for national examinations (e.g., GCE Advanced Level ICT practicals). - Enhanced ability to support community initiatives (e.g., creating a webpage for a local youth group or market cooperative). ### Concrete examples (Cameroonian/African context) - Students analyze the homepage of the Cameroon Youth Forum (camyouthforum.org) to identify heading levels, paragraphs, and image tags. - They compare the structure of a simple health awareness page from the Cameroonian Ministry of Public Health with a similar page from Kenya’s ICT Authority (icta.go.ke) to note similarities in layout and use of semantic tags. - In a guided activity, learners use a text editor to recreate a basic version of the University of Bamenda’s faculty page, focusing on correct use of `<h1>`, `<p>`, and `<img>` tags. ### Vocabulary to retenir - **Webpage**: A document accessible via the World Wide Web, typically written in HTML. - **Hypertext**: Text containing links to other texts or resources. - **Markup language**: A system for annotating text to define its structure or presentation. - **Tag**: A code snippet in HTML (e.g., `<p>`) that defines how content should be displayed or structured. - **Element**: A complete HTML construct consisting of an opening tag, content, and closing tag (e.g., `<p>Hello</p>`). - **Attribute**: Additional information provided within an HTML tag (e.g., `src="image.jpg"` in `<img>`). ### Example exam-type question with plan **Question**: You are tasked with creating a simple webpage for a local agricultural cooperative in Buea that sells organic vegetables. The page must include a main heading, a short paragraph describing the cooperative’s mission, and an image of their farm. Using only HTML, write the code for this webpage. Ensure the image is accessible and the structure is semantic. **Plan**: 1. Start with the basic HTML5 document structure: `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, `<body>`. 2. In the `<head>`, set a meaningful `<title>` (e.g., “Buea Organic Farmers Cooperative”). 3. In the `<body>`, use `<h1>` for the main heading: “Welcome to Buea Organic Farmers Cooperative”. 4. Add a `<p>` element with a concise mission statement: “We promote sustainable farming and provide fresh, chemical-free vegetables to local communities.” 5. Insert an `<img>` tag with `src` pointing to a local image file (e.g., “farm.jpg”) and include an `alt` attribute describing the image: “Aerial view of the cooperative’s vegetable farm in Buea”. 6. Save the file as `index.html` and test in a browser. --- ## II. Developing simple web pages using HTML ### Context and definitions This lesson focuses on the practical construction of web pages using HyperText Markup Language (HTML), the standard language for creating content on the web. Students learn to write syntactically correct HTML that structures content meaningfully, ensuring accessibility and compatibility across devices and browsers. The emphasis is on semantic HTML—using tags that convey meaning (like `<header>`, `<article>`, `<footer>`) rather than just visual formatting. > **HTML (HyperText Markup Language)** is the standard markup language used to create and structure content on the World Wide Web, defining elements such as headings, paragraphs, links, and images through tags. > **Semantic HTML** refers to the use of HTML tags that clearly describe their meaning and purpose in both human- and machine-readable terms (e.g., `<nav>` for navigation, `<section>` for thematic grouping). ### Facts, dates, and names - HTML was developed by Tim Berners-Lee in 1991; the first official specification, HTML 2.0, was published by the IETF in 1995. - HTML5, the current living standard, was finalized by the W3C and WHATWG in 2014, introducing new semantic elements and multimedia support. - The World Wide Web Consortium (W3C), founded in 1994 by Tim Berners-Lee, maintains HTML standards to ensure web interoperability. - In Cameroon, the National Agency for Information and Communication Technologies (ANTIC) promotes web standards compliance in government digital services. ### Causes and consequences The shift toward teaching semantic HTML reflects global best practices in web accessibility and search engine optimization (SEO). In Cameroon, where digital inclusion is a national priority, using proper HTML ensures that web content is usable by people with disabilities (e.g., screen reader users) and ranks better in search results—critical for small businesses and educational institutions seeking visibility. Failure to use semantic or valid HTML leads to: - Poor accessibility for users relying on assistive technologies. - Inconsistent rendering across browsers. - Difficulty in maintaining or updating web content. - Reduced credibility and professionalism of online presence. ### Concrete examples (Cameroonian/African context) - Students examine the HTML source of a simple news page from the Cameroon Tribune (camtribune.com) to identify how headings (`<h1>`–`<h6>`), paragraphs (`<p>`), and images (`<img>`) are used. - They compare it with a health outreach page from Uganda’s Ministry of Health (health.go.ug) to note consistent use of `<header>`, `<main>`, and `<footer>` despite different content. - In a lab activity, learners create a webpage for a fictional Cameroonian tech startup, “Silicon Mountain Apps”, using: - `<header>` for the logo and site name, - `<nav>` for navigation links (Home, About, Contact), - `<section>` for service descriptions, - `<footer>` for copyright and social media links. - They validate their code using the W3C Markup Validation Service (validator.w3.org) and correct errors such as missing closing tags or improper nesting. ### Vocabulary to retenir - **DOCTYPE**: A declaration at the start of an HTML document that informs the browser about the version of HTML being used (e.g., `<!DOCTYPE html>` for HTML5). - **Root element**: The `<html>` tag that encloses all other content in an HTML document. - **Head**: The `<head>` section containing metadata (title, character set, links to stylesheets) not visible on the page. - **Body**: The `<body>` section containing all visible content (text, images, links). - **Closing tag**: A tag that marks the end of an element (e.g., `</p>`), formed by a forward slash before the tag name. - **Empty element**: An HTML element that does not contain content or a closing tag (e.g., `<br>`, `<img>`, `<input>`). - **Nesting**: The practice of placing one HTML element inside another (e.g., a `<strong>` tag inside a `<p>` tag). - **Validation**: The process of checking HTML code against official standards to detect errors. ### Example exam-type question with plan **Question**: A community library in Kumba wants to create a simple webpage to promote its weekly reading club for children. The page must include: - A header with the library’s name and logo, - A navigation bar with links to Home, Events, and Contact, - A main section describing the reading club (day, time, age group), - A footer with copyright information and a link to the library’s Facebook page. Using only HTML5 semantic tags, write the complete code for this webpage. Ensure all tags are properly nested and closed. **Plan**: 1. Begin with `<!DOCTYPE html>` to declare HTML5. 2. Open the `<html>` tag. 3. Open the `<head>` tag: - Insert `<meta charset="UTF-8">` for character encoding. - Add `<title>Kumba Community Library – Reading Club</title>`. 4. Close the `</head>` tag. 5. Open the `<body>` tag. 6. Add `<header>`: - Include `<h1>Kumba Community Library</h1>`. - Optionally add `<img src="logo.png" alt="Library logo">` (if image is available). 7. Add `<nav>`: - Create an unordered list (`<ul>`) with list items (`<li>`) containing anchor tags (`<a href="#">Home</a>`, etc.). 8. Add `<main>`: - Insert `<h2>Weekly Reading Club</h2>`. - Add `<p>Every Saturday, 10:00 AM – 12:00 PM. For children aged 6–12.</p>`. 9. Add `<footer>`: - Insert `<p>&copy; 2025 Kumba Community Library. All rights reserved.</p>`. - Add `<a href="https://facebook.com/kumbalibrary">Visit our Facebook page</a>`. 10. Close `</body>` and `</html>`. 11. Save as `index.html` and validate using W3C validator. --- ## Synthèse du chapitre - Integration activities bridge theoretical knowledge (internet basics, file management) to practical web development by guiding students to analyze, modify, and create simple web pages using real-world Cameroonian and African examples. - HTML is the foundational language for structuring web content, using tags to define elements such as headings, paragraphs, images, and links. - Semantic HTML improves accessibility, SEO, and maintainability by using tags that convey meaning (e.g., `<header>`, `<article>`, `<footer>`) rather than just presentation. - A valid HTML5 document requires `<!DOCTYPE html>`, `<html>`, `<head>` (with `<title>` and charset), and `<body>` sections, all properly nested and closed. - Key attributes like `alt` (for images) and `href` (for links) enhance usability and accessibility, especially for users relying on assistive technologies. - Validation via tools like the W3C Markup Validation Service ensures code correctness and cross-browser compatibility. - In Cameroon’s context, simple web pages empower local initiatives—schools, cooperatives, NGOs—to establish a digital presence without requiring advanced programming skills. - Mastery of basic HTML prepares students for GCE Advanced Level ICT practicals and future studies in web design, digital media, or entrepreneurship. --- ## Glossaire - **HTML**: HyperText Markup Language, the standard language for creating web pages. - **Tag**: A code snippet in angle brackets (e.g., `<p>`) that defines an HTML element. - **Element**: A complete HTML construct consisting of an opening tag, content, and closing tag. - **Attribute**: Additional information within an HTML tag (e.g., `src="image.jpg"`). - **Semantic HTML**: Use of HTML tags that convey meaning about the content’s purpose. - **DOCTYPE**: Declaration specifying the HTML version (e.g., `<!DOCTYPE html>` for HTML5). - **Nesting**: Placing one HTML element inside another to create hierarchical structure. - **Validation**: Checking HTML code against official standards to detect errors. - **Alt text**: Descriptive text in the `alt` attribute of an `<img>` tag, crucial for accessibility. - **Header**: `<header>` element, typically containing introductory content or navigation. - **Footer**: `<footer>` element, typically containing copyright, contacts, or related links. - **Main**: `<main>` element, representing the dominant content of the `<body>`.