Be able to use the <div> tag including to apply styles and classes

Website Authoring – Using the <div> Tag (IGCSE ICT 0417)

Learning Objectives (mapped to Assessment Objectives)

• AO1 – Knowledge & Understanding: Define key ICT concepts, explain the purpose of the <div> element and related attributes, and describe the role of hardware, software, safety, and data‑management principles.
• AO2 – Application: Write correct HTML, CSS and JavaScript snippets; create spreadsheets, database tables, and document layouts; apply safety & e‑safety measures; and produce appropriate communication for a given audience.
• AO3 – Analysis & Evaluation: Critically evaluate ICT solutions, identify common pitfalls (e.g., inline styles, duplicated IDs, missing validation), and suggest improvements such as using external CSS, semantic tags, or more secure data‑handling practices.

---

How This Lesson Aligns with the Cambridge IGCSE ICT (0417) Syllabus

Syllabus Block	Content Covered in These Notes	Relevant AO(s)
1‑5 Computer hardware, input/output, storage, networks, emerging technologies	Brief hardware overview, I/O devices, storage media, basic network concepts, AI/VR/AR fundamentals.	AO1, AO2
6 ICT applications (expert systems, retail, recognition, satellite)	Definitions, key uses, advantages & disadvantages for each application.	AO1, AO3
7 Systems life‑cycle	Analysis, design, documentation, testing, implementation, evaluation – linked to practical tasks.	AO2, AO3
8 Safety & e‑safety	Physical safety, data‑protection legislation, encryption, firewalls, antivirus, 2‑FA, safe internet use.	AO1, AO2
9‑10 Audience & communication	Audience analysis, netiquette, copyright, email‑group collaboration, key Internet protocols.	AO1, AO2
11‑16 File‑management, images, layout, styles, proofing, graphs/charts	File‑compression, image formats, table creation, CSS styling, proof‑reading, chart generation in spreadsheets.	AO2, AO3
17‑21 Document production, databases, presentations, spreadsheets, website authoring	Document styles, relational tables, spreadsheet formulas, slide design, full <div> lesson with CSS & Flexbox.	AO2, AO3

---

1. Core ICT Foundations (Syllabus Blocks 1‑5)

1.1 Computer Hardware & Input/Output

• CPU, RAM, Motherboard, Power Supply – core processing and memory.
• Input devices – keyboard, mouse, scanner, microphone, touch screen.
• Output devices – monitor, printer, speakers, projector.
• Storage media – HDD, SSD, CD/DVD, USB flash, cloud storage.

1.2 Networks & Internet Basics

• LAN, WAN, Wi‑Fi, Ethernet, router, switch.
• Topologies: star, bus, mesh.
• Key protocols: TCP/IP, HTTP/HTTPS, FTP, DNS.

1.3 Emerging Technologies

• Artificial Intelligence (AI) – machine learning, expert systems, voice assistants.
• Virtual Reality (VR) – immersive simulated environments.
• Augmented Reality (AR) – overlay of digital data on the real world.
• Impact on employment, privacy, creativity, and ethics.

---

2. ICT Applications (Syllabus Block 6)

Application	Definition & Key Uses	Advantages	Disadvantages
Expert Systems	Software that mimics decision‑making of a human expert; used in medical diagnosis, financial advice, fault detection.	Fast, consistent decisions; can operate 24 h.	High development cost; requires regular knowledge updates.
Retail Systems	Manage sales, inventory, and customer data; includes POS terminals and e‑commerce platforms.	Improved stock control; faster checkout.	Risk of data breaches; dependence on connectivity.
Recognition Systems	Identify patterns such as faces, fingerprints or voice; used for security, mobile unlocking, personalised services.	Convenient, high security.	Privacy concerns; false‑positive/negative errors.
Satellite Systems	Space‑based platforms for communication, navigation (GPS), and remote sensing.	Global coverage; supports broadcasting and weather monitoring.	Expensive launch and maintenance; signal latency.

AO‑Focused Activity (AO2)

Choose one application, create a 150‑word brochure (using a word‑processor) that lists its key uses, two advantages and two disadvantages, and includes a suitable image (PNG or JPEG). Submit the file for peer review and incorporate feedback.

---

3. Systems Life‑Cycle (Syllabus Block 7)

3.1 Stages

1. Analysis – gather requirements, produce user stories, create data‑flow diagrams.
2. Design – sketch wire‑frames, decide on hardware/software, develop pseudo‑code.
3. Documentation
   • Technical – system architecture, code comments.
   • User – manuals, help screens, video tutorials.
4. Testing – unit, integration, system, acceptance testing; record test results in a test‑log.
5. Implementation – installation, data migration, user training, rollout plan.
6. Evaluation – assess efficiency, usability, reliability, security, and appropriateness using surveys, performance metrics, and cost‑benefit analysis.

3.2 Linking to Papers 2‑3

• Paper 2: design a simple database or spreadsheet and produce documentation (AO2).
• Paper 3: evaluate a given system against criteria such as speed, user‑friendliness, and data‑security (AO3).

AO‑Focused Activity (AO3)

Given a brief description of a school library system, complete a systems evaluation checklist that rates the system on at least five criteria (e.g., speed, ease of use, data protection). Justify each rating with evidence from the description.

---

4. Safety & e‑Safety (Syllabus Block 8)

4.1 Physical Safety

• Ergonomic workstation setup – monitor height, chair adjustment.
• Safe handling of hardware – anti‑static wrist straps, proper cable management.
• Fire safety – location of extinguishers, evacuation routes.

4.2 Data‑Protection Legislation

• GDPR / Data Protection Act – lawfulness, consent, data minimisation, right to access, right to erasure.
• Record‑keeping requirements for schools and businesses.

4.3 Encryption & Network Security

• Symmetric encryption (AES) – same key for encrypt/decrypt.
• Asymmetric encryption (RSA) – public/private key pair.
• Use of TLS/SSL for HTTPS connections.
• Firewalls – packet filtering, stateful inspection.
• Antivirus/anti‑malware – real‑time scanning, regular updates.
• Two‑Factor Authentication (2‑FA) – something you know + something you have.

4.4 Safe Internet Use

• Netiquette – polite language, respect for copyright, no all‑caps shouting.
• Phishing awareness – check sender address, hover over links, never share passwords.
• Use of content‑filtering software and safe‑search settings.

AO‑Focused Activity (AO2)

Produce a one‑page “e‑Safety Checklist” for a school computer lab, covering password policy, software updates, backup procedures, and safe browsing rules. Include a short justification (≤ 50 words) for each item.

---

5. Audience & Communication (Syllabus Blocks 9‑10)

5.1 Audience Analysis

• Identify audience characteristics – age, prior knowledge, interests, cultural considerations.
• Determine appropriate tone, level of detail, and media (text, images, video).

5.2 Copyright & Intellectual Property

• Understand “fair use” for educational purposes.
• Use Creative Commons licences, cite sources, avoid plagiarism.

5.3 Email‑Group Collaboration

• Creating mailing lists, using “Reply‑All” responsibly.
• Version control basics – naming conventions, storing drafts in shared folders.

5.4 Key Internet Protocols (re‑visited)

• HTTP / HTTPS – transfer web pages; HTTPS adds encryption.
• FTP – file transfer between client and server.
• SSL / TLS – secure sockets layer for encrypted communications.

AO‑Focused Activity (AO1 & AO2)

Write a short email (150 words) to a non‑technical parent explaining how the school’s new online learning platform protects student data. Use plain language, include a link to the privacy policy, and apply appropriate netiquette.

---

6. File‑Management, Images, Layout, Styles & Charts (Syllabus Blocks 11‑16)

6.1 File Management & Compression

• Folder hierarchy – logical naming, date‑based sub‑folders.
• Compression formats: ZIP (lossless, widely supported) and RAR (higher compression, proprietary).
• Backup strategies – 3‑2‑1 rule (three copies, two media types, one off‑site).

6.2 Images & Graphic Formats

Format	Typical Use	Lossy / Lossless
JPEG	Photographs, web images	Lossy
PNG	Logos, screenshots, transparent backgrounds	Lossless
GIF	Simple animations	Lossless (8‑bit colour)
SVG	Scalable vector graphics, icons	Lossless (vector)

6.3 Layout & Styles in Documents

• Use of headings (H1‑H6), paragraph styles, bullet/numbered lists.
• Headers & footers – page numbers, document title, author.
• Proof‑reading tools – spell‑check, grammar check, “track changes”.

6.4 Charts & Graphs in Spreadsheets

• Common chart types: bar, line, pie, scatter.
• Data validation – type, range, format, presence checks.
• Exporting charts as PNG/JPEG for inclusion in reports.

AO‑Focused Activity (AO2)

In a spreadsheet, record the monthly sales figures for a small shop (January‑December). Apply data validation to ensure numbers are positive, create a line chart of the trend, and format the sheet with a consistent style (heading, borders, colour theme). Export the chart as an image and insert it into a one‑page report.

---

7. Document Production, Databases, Presentations & Website Authoring (Syllabus Blocks 17‑21)

7.1 Document Production

• Apply paragraph and character styles for consistency.
• Insert tables, images, captions, and cross‑references.
• Use “track changes” for collaborative editing.

7.2 Relational Databases

• Key concepts: table, field, record, primary key, foreign key.
• Simple SELECT query example:

  SELECT FirstName, LastName FROM Students WHERE Year = 10;

• Normalization – avoid duplicate data.

7.3 Spreadsheets

• Formulas: SUM, AVERAGE, IF, VLOOKUP.
• Cell referencing – absolute vs. relative.
• Conditional formatting to highlight key values.

7.4 Presentations

• Consistent slide master (font, colour, logo).
• Use of multimedia – embed video/audio, add speaker notes.
• Effective slide design – “less is more”, high‑contrast text.

7.5 Website Authoring – The <div> Element

7.5.1 What Is a <div>?

The <div> (short for “division”) is a generic block‑level container. It carries no semantic meaning but groups related content so that CSS or JavaScript can act on the whole group.

7.5.2 Basic Syntax

<div>
    …content…
</div>

Because it is block‑level, a <div> starts on a new line and expands to the full width of its parent element.

7.5.3 class vs. id

• class – reusable on many elements; ideal for shared styling.
• id – must be unique on a page; perfect for single‑element targeting (e.g., JavaScript hooks).

<div class="sidebar">…</div>
<div id="mainContent">…</div>

7.5.4 Inline Styles (Quick Demonstration)

<div style="background:#f0f0f0; padding:15px;">
    This box has a light‑grey background and padding.
</div>

Inline styles are useful for short examples, but for larger projects external CSS is preferred for maintainability.

7.5.5 Nesting <div> Elements – Building a Hierarchy

<div class="page">
    <div class="header">…</div>
    <div class="content">
        <div class="article">…</div>
        <div class="sidebar">…</div>
    </div>
    <div class="footer">…</div>
</div>

Nesting creates a clear structure that CSS can target at any level (e.g., .content .sidebar).

7.5.6 Common Pitfalls

• Forgetting the closing </div> – breaks layout.
• Duplicating an id – violates uniqueness and confuses scripts.
• Using only <div> for everything – replace with semantic tags (<header>, <nav>, <section>, <article>, <footer>) where appropriate.

7.5.7 Example: Simple Two‑Column Layout Using Flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Two‑Column Layout</title>
    <style>
        .container { display:flex; gap:10px; }
        .main   { flex:2; background:#e8f5e9; padding:10px; }
        .side   { flex:1; background:#e3f2fd; padding:10px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">
            <h2>Main Content</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="side">
            <h2>Sidebar</h2>
            <p>Curabitur non nulla sit amet nisl tempus convallis.</p>
        </div>
    </div>
</body>
</html>

7.5.8 Quick Reference Table for <div> Attributes

Attribute	Purpose	Example
class	Group multiple elements for shared styling or scripting.	<div class="menu">…</div>
id	Unique identifier for a single element.	<div id="header">…</div>
style	Apply inline CSS declarations.	<div style="color:red;">Red text</div>
title	Tooltip text displayed on hover.	<div title="Info box">Hover me</div>

AO‑Focused Activity (AO2 & AO3)

1. Design a simple web page for a school club using only <div> containers (header, navigation, content, sidebar, footer).
2. Write an external CSS file that styles the page (background colours, padding, fonts, Flexbox layout).
3. Validate the HTML with the W3C validator and correct any errors.
4. Write a short evaluation (150 words) discussing why you chose <div> versus semantic tags, and suggest one improvement (e.g., replace a <div> with <nav>).

---

8. Summary of Key Points for Exam Revision

• Hardware, storage, networks and emerging tech are the foundation for all later topics (AO1).
• Know the purpose, advantages and disadvantages of the four main ICT applications (AO1, AO3).
• Memorise the full systems life‑cycle, especially testing and evaluation (AO2, AO3).
• Safety & e‑safety: legislation, encryption, firewalls, 2‑FA, and safe internet habits (AO1, AO2).
• Audience analysis, netiquette and copyright are essential for communication tasks (AO1, AO2).
• File‑management, image formats, document styles, spreadsheet charts and database basics are tested in practical questions (AO2).
• For website authoring, <div> is the core container; use class/id wisely, avoid inline styles, and prefer external CSS and semantic tags where possible (AO1‑AO3).

---

Suggested Homework / Extension Tasks

1. Create a zip archive of all files from the <div> web‑page activity and submit it for marking (file‑management practice).
2. Produce a 5‑slide presentation that explains the systems life‑cycle, using consistent slide master and speaker notes (presentation skills).
3. Write a short report (300 words) evaluating the security of a hypothetical school website, referencing GDPR, encryption, and 2‑FA (AO3).
4. Design a simple relational database schema for a school timetable and write three SELECT queries (database application).