ICT Lesson 10 Notes — Web Development

Unit 10

🌐 Full Web Stack

Web
Development

Learn to design and build complete websites using the full web stack — HTML5 for structure, CSS for presentation, PHP for server-side logic and MySQL for database connectivity. Create forms, hyperlinks, multimedia-rich pages, dynamic data-driven sites, and publish them to the web. Covers competency levels 10.1–10.8 from the NIE ICT syllabus.

🌐 World Wide Web

📁 Types of Websites

📐 Website Planning

🏷️ HTML Page Structure

📝 Text Formatting Tags

🖼️ Images & Media

🔗 Hyperlinks (Local/External)

📋 Ordered & Unordered Lists

📊 HTML Tables

🎵 Audio & Video Tags

🎨 CSS Syntax & Selectors

🖌️ Inline / Internal / External CSS

🖼️ Background, Fonts & Text CSS

🔧 Web Authoring Tools

⚡ PHP Introduction

📬 HTML Forms

🗄️ PHP + MySQL Connectivity

💾 Save Form Data to DB

🔍 Retrieve & Display DB Data

🚀 Local & Internet Publishing

🛠️ Web Development Stack

🏗️

HTML5

Structure & content of web pages. Headings, paragraphs, links, tables, forms, images, audio, video.

🎨

CSS3

Presentation & styling. Colours, fonts, layouts, backgrounds. Internal, external & inline styles.

⚙️

PHP

Server-side scripting. Variables, arrays, control structures, functions, form handling, DB connectivity.

🗄️

MySQL

Database back-end. Store, retrieve, update and delete data from web applications via PHP.

🏷️ Essential HTML Tags — Quick Reference

<html>Root element of every HTML page

<head>Contains metadata and title — not displayed

<title>Sets the browser tab title

<body>All visible page content goes here

<h1>–<h6>Headings — h1 largest, h6 smallest

<p>Paragraph of text

<br>Line break — self-closing tag

<a href>Hyperlink — local, bookmark or external

<img src>Embeds an image on the page

<table>Creates a table structure

<tr> <td>Table row and table data cell

<form>Container for input elements — action & method

<input>Text, password, radio, checkbox, submit fields

<select>Drop-down selection list

<audio>Embeds audio content on page

<video>Embeds video content on page

💻 Code Examples — HTML, CSS & PHP

HTML5 — Basic Page Structure

<!-- Basic HTML5 page -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome to ICT</h1>
  <p>Learn web development.</p>
  <a href="../about.html">About</a>
</body>
</html>

CSS — Selectors & Styling

/* Element selector */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

/* Class selector */
.heading {
  color: #3355aa;
  font-size: 24px;
  text-align: center;
}

/* ID selector */
#nav-bar {
  background: #333;
  padding: 10px;
  color: white;
}

PHP — Form Handling & MySQL

<?php
// Connect to MySQL database
$conn = mysqli_connect(
  "localhost", "root",
  "", "school_db"
);

// Get form data (POST method)
$name  = $_POST["name"];
$email = $_POST["email"];

// Insert into database
$sql = "INSERT INTO students
  (name, email)
  VALUES ('$name', '$email')";

mysqli_query($conn, $sql);
mysqli_close($conn);
?>

HTML Form Elements

<form action="save.php"
      method="post">

  <!-- Text input -->
  <input type="text"
    name="name">

  <!-- Radio buttons -->
  <input type="radio"
    name="gender"
    value="Male"> Male

  <!-- Drop-down -->
  <select name="grade">
    <option>12</option>
    <option>13</option>
  </select>

  <input type="submit"
    value="Save">
</form>

📚 Competency Levels — Unit 10

COMPETENCY 10.1 · 8 PERIODS

The World Wide Web

Definition of WWW. Types of websites: information, news, personal, educational, commercial, research, web portals. Analysing content structure and organisation of websites.

COMPETENCY 10.2 · 4 PERIODS

Analysing User Requirements

Defining website objectives, identifying content to display. Creating effective information layout, identifying web pages, content and navigation structure.

COMPETENCY 10.3 · 4 PERIODS

Single Web Page Design (HTML)

HTML building blocks: html, head, title, body. Background colour. Text formatting — h1–h6, p, br, bold, italic, underline. Font size & colour. Comments.

COMPETENCY 10.4 · 16 PERIODS

Linked Web Pages (HTML)

Home page & linked pages. Hyperlinks: bookmarks, local links, external links. Lists: ordered, unordered, definition. Images. Tables (th, tr, td, caption, merging). Multimedia: audio & video.

COMPETENCY 10.5 · 8 PERIODS

CSS Style Sheets

Introduction to CSS. Syntax and comments. Selectors: element, id, class, group. Ways of inserting CSS: internal, external, inline. Formatting: background, text, fonts, links, lists, tables.

COMPETENCY 10.6 · 10 PERIODS

Web Authoring Tools

Introduction to web authoring tools and their purpose. Creating complete web pages using a web authoring tool (e.g. Dreamweaver, Brackets, VS Code).

COMPETENCY 10.7 · 6 PERIODS

Dynamic Web Pages (PHP + MySQL)

Introduction to dynamic web pages. Embedding PHP in HTML. PHP variables, arrays, control structures, functions. MySQL database connectivity. Forms with all input types (text, password, radio, checkbox, select, submit, reset). GET vs POST. Saving & retrieving form data to/from MySQL.

COMPETENCY 10.8 · 4 PERIODS

Publishing & Maintaining Websites

Local publishing (own computer, intranet). Internet publishing — connecting to web service provider, uploading to web server. Free web hosting sites. Factors affecting website performance.

📥 Unit 10 — Available Downloads

📄

Full Notes — Web Development

PDF · 5.0 MB · 70 pages

⬇ Download ZIP

📄

HTML5 Tag Reference Sheet

PDF · 0.7 MB · 4 pages

⬇ Download PDF

📄

CSS Selectors & Properties

PDF · 1.0 MB · 10 pages

⬇ Download PDF

📄

PHP & MySQL Web Programming

PDF · 1.3 MB · 14 pages

⬇ Download PDF

📄

CSS Notes

PDF · 0.9 MB · 10 pages

⬇ Download PDF

WebDevelopment

WebDevelopment

Web
Development

Web
Development