Wednesday, September 16, 2026

Cambridge-Lower-Secondary-Computing-7-Ben-Barnes-Tristan-Kirkpatrick-Etc-Z-Library Notes Online Class Unit 7 - 1 - 2 Python Interactive Mode, Python Script Mode, IDLE, Python Variables, Print Statement, Python Comments, Fix Python Errors, ICT Programming

ЁЯРН Python Basics: Modes, Variables & Comments

Interactive Mode, Script Mode, Error Correction, and Variables

ЁЯУЪ About this guide: Complete, exam-friendly notes for learning Python Programming Basics. Master the difference between Interactive and Script modes, learn how to fix errors, add comments, and use variables with the print() statement.
Concept 1

What is Interactive Mode?

When you launch Python IDLE, you see the Python Shell with the >>> prompt. This is Interactive Mode, which allows individual Python commands to be typed directly and carried out immediately.

>>> print("Hello world")
Hello world
>>> (7+6)*2
26
>>> 
          
⚠️ Important: Python is case-sensitive. You must type commands using lower-case letters (e.g., print, not Print). Also, you do not need the print command for basic calculations in the shell.
Keywords

Essential Vocabulary

  • Interactive mode: The Python shell allows commands to be entered and run immediately.
  • Python shell: The interactive mode environment where commands are typed directly.
  • Print statement: A Python command used to output text or values onto the screen.
  • Case sensitive: Able to distinguish between capital and small letters.
  • Interpreter: Translates Python code into machine code line by line.
  • Machine code: The binary language a computer uses to carry out instructions.
Practice

Interactive Mode Practice Tasks

  • Enter: print("Welcome to the Python Shell")
  • Enter a command to print your name: print("Your Name")
  • Fix the error: print("Hello World) (Missing closing quotation mark).
  • Fix the calculation: (7+3*2 is missing a bracket. Correct it to (7+3)*2 to get 20.
  • Try four of your own math commands (remember * is for multiplication).
  • Get Python to add 150 and 23, then multiply by 3: (150 + 23) * 3
Concept 2

What is Script Mode?

In Interactive Mode, code cannot be saved. Script Mode uses a text editor (like Notepad) to write, save, and run multiple lines of code as a complete program.

Steps to Create & Run:

  1. Create: In the Python shell, select File → New File.
  2. Type: Enter your code (e.g., print("Hello world")).
  3. Save: Select File → Save As. Name it HelloWorld.py (the .py extension is required).
  4. Run: Select Run → Run Module (or press F5). The output appears in the Shell window.
Concept 3

Correcting Errors in Script Mode

If there is an error, Python highlights it in red and provides an error message.

Print("Hello World")
# Error: NameError: name 'Print' is not defined
          

How to fix: Open the program, correct the mistake (change Print to print), save, and run again.

Concept 4

Adding Comments

Comments explain what the code does. The Python interpreter ignores them. Start a comment with a hash (#) symbol.

# This is an Adventure Game about The Digital Sweet Shop
# The program was written by me

print("Welcome to The Digital Sweet Shop")
print() # This prints a blank line
          
Keywords

Script Mode Vocabulary

  • Script mode: Python's text editor, allowing programmers to enter a list of commands executed together.
  • Execute: Another word for running a program.
  • Comments: Text entered by a programmer to improve code readability; starts with # in Python.
Practice

Hands-On Practice Tasks

  • Create a New File in IDLE.
  • Type: print("Welcome to my first program in Python")
  • Add a line to print your favourite hobby.
  • Save as My First Program.py and Run (F5).
  • Add these lines:
    print("Did you know Python can do calculations? The line below displays 10")
    print(7+3)
    print("How about this? The calculation below should display 25")
    print(7+3*2+5)
                  
  • Fix the error: The last line outputs 18, not 25. Correct it to print((7+3)*2+5) and add a # comment above it explaining the BIDMAS/PEMDAS fix.
  • New Program: Create Maths Favourites.py that prints your name, favourite number, and favourite calculation (e.g., "Name: Adnan", "Favourite number: 7", "Favourite calculation: multiplication").
Concept 5

What is a Variable?

A variable is a named location in the computer's memory that stores data of a particular type. Data can be assigned directly in the code or from user input.

name = "Ardeel"
age = 12
address = "Station Road"
colour = "Red"
          
Concept 6

Printing with Variables

To print a variable alongside text, do not put the variable name in quotation marks. Use a comma to join the text and the variable.

print(name)
# Output: Ardeel

print("Your name is", name)
# Output: Your name is Ardeel

print("Your name is", name, ". Nice to meet you.")
# Output: Your name is Ardeel . Nice to meet you.
          
ЁЯФС Keyword:
  • Variable: A named memory location used to store data of a given type during program execution; a variable can change value as the program runs.
Practice

Variable Practice Tasks

  • Create a new file and type:
    name = "Ardeel"
    age = 12
    address = "Station Road"
    colour = "Red"
    print("Your name is", name)
                  
  • Add code to display the age: print("You are", age, "years old")
  • Complete the program to say: print("You live at", address)
  • Complete the program to say: print(colour, "is your favourite colour")
  • Final Task: Create a new program showing your name, age, address, and favourite colour. Save and run it.

❓ Frequently Asked Questions (FAQ)

Q: What is the difference between Python Interactive Mode and Script Mode? A: Interactive Mode (Python Shell) allows you to type and execute single lines of code immediately, but they cannot be saved. Script Mode uses a text editor to write, save (.py), and run multiple lines of code as a complete program.
Q: What is a variable in Python? A: A variable is a named location in the computer's memory used to store data of a particular type. Variables can change their value as the program runs.
Q: How do you add comments in Python? A: In Python, you add comments by starting a line with a hash (#) symbol. The Python interpreter ignores any text on a line after the # symbol, making it useful for explaining code.
Q: Why is Python considered case-sensitive? A: Python is case-sensitive, meaning it distinguishes between uppercase and lowercase letters. For example, 'print' is a valid command, but 'Print' will cause a NameError.

Wednesday, September 9, 2026

Unit 7.1 Edexcel Cambridge ICT Computer Science Block It Out: Moving from Blocks to Text | ICT Notes Complete study notes for Unit 7.1 ICT. Learn how to move from block-based programming (Scratch) to text-based programming (Python), including algorithms, flowcharts, syntax, and math formulas

ЁЯУШ Unit 7.1: Block It Out

Moving from Blocks to Text-Based Programming

ЁЯУЪ About this guide: Complete, exam-friendly notes for Unit 7.1 ICT. Learn how to transition from block-based programming (Scratch) to text-based programming (Python), including the IPO model, algorithms, flowcharts, syntax, and essential mathematical formulas.
Concept 1

How Does a Calculator Work? (The IPO Model)

A calculator works exactly like a computer program using the Input → Processing → Output model.

StageWhat happens (Example: 10 + 5)
InputEntering numbers (10 and 5)
OperationPressing the Addition button (+)
ProcessingThe calculator performs 10 + 5
OutputThe answer (15) appears on screen
Concept 2

Scenario: Breaking Down the Ashoka Trees Problem

Given: Existing trees = 13, Planted today = 28, Planted tomorrow = 36.

  • Q1: Total trees? New trees (28 + 36 = 64) + Existing (13) = 77 trees.
  • Q2: Trees planted per worker-hour? Total trees (64) ÷ Total worker-hours (10 workers × 8 hours = 80) = 0.8 trees/hour.
  • Q3: Remaining trees for 4 workers? 6 workers planted 48 trees (6 × 8). Remaining = 64 - 48 = 16. Trees per remaining worker = 16 ÷ 4 = 4 trees each.
ЁЯОп Exam Tip: Breaking a large problem into smaller, manageable steps is called decomposition. Always solve step-by-step!
Concept 3

What is Programming?

Programming means giving instructions to a computer so that it can perform a specific task (e.g., adding numbers, calculating area, finding an average).

Concept 4

Scratch (Block-Based) vs. Python (Text-Based)

FeatureScratch (Block-Based)Python (Text-Based)
MethodDrag-and-drop graphical blocksTyping code instructions
DifficultyEasy for beginnersRequires learning syntax
ErrorsFewer typing errors (blocks fit)Typing/syntax errors are possible
Use CaseLearning programming logicReal-world applications & software
⭐ Remember: ЁЯз▒ Scratch = Blocks | ⌨️ Python = Text
Concept 5

What is Syntax?

Syntax means the rules and structure that must be followed when writing programming code. It is like grammar in English.

English: ❌ "I school go" → ✅ "I go to school."
Python: If syntax is incorrect, the program will produce an error.

Concept 6

What is Python & IDLE?

Python: A powerful text-based programming language used for websites, AI, data processing, and automation. Named by Guido van Rossum (inspired by Monty Python).

IDLE: Stands for Integrated Development and Learning Environment. It is the tool/environment used to write, edit, run, and test Python code.

Concept 7

Variables, Values, and the IPO in Python

  • Value: A piece of data (e.g., 10, 3.5).
  • Variable: A named container that stores a value (e.g., age = 15, where age is the variable and 15 is the value).
# Python IPO Example
number1 = int(input("Enter number 1: "))  # ЁЯУе Input
number2 = int(input("Enter number 2: "))  # ЁЯУе Input
answer = number1 + number2                # ⚙️ Processing
print(answer)                             # ЁЯУд Output
          
Concept 8

Arithmetic Operators in Python

OperatorMeaningPython ExampleAnswer
+Addition5 + 38
-Subtraction5 - 32
*Multiplication5 * 315
/Division6 / 32
⚠️ Note: Python uses * for multiplication, NOT ×.
Concept 9

What is an Algorithm?

An algorithm is a step-by-step sequence of instructions used to solve a problem.

Example (Add two numbers): 1. Start → 2. Enter first number → 3. Enter second number → 4. Add them → 5. Display answer → 6. Stop.

Concept 10

What is a Flowchart?

A flowchart is a visual diagram that shows the sequence of actions in a program. It helps programmers plan before coding.

SymbolPurpose
OvalStart / Stop
RectangleProcess / Calculation
DiamondDecision (Yes/No)
ParallelogramInput / Output
ArrowDirection of flow
Concept 11

Why Do We Test Programs?

Testing ensures the program works correctly. It helps us find errors, check calculations, verify inputs, and ensure the output matches the expected result (e.g., if 10 + 5 outputs 20, there is an error).

Concept 12

Essential Mathematical Formulas

  • Area of a square: length × length (e.g., 5 × 5 = 25)
  • Area of a triangle: ½ × base × height (e.g., ½ × 10 × 6 = 30)
  • Perimeter of a rectangle: 2 × (length + width) (e.g., 2 × (10 + 5) = 30)
  • Average of three numbers: (Num1 + Num2 + Num3) ÷ 3 (e.g., (10 + 20 + 30) ÷ 3 = 20)
Concept 13

Important Exam Keywords

KeywordEasy Meaning
GUIGraphical User Interface (icons, menus, drag-and-drop)
ValueData or number used in a program
SyntaxRules/structure for writing code
ProcessingComputer working on input to produce output
Concept 14

ЁЯза Super-Easy Memory Map

PROBLEM ↓ ALGORITHM ↓ FLOWCHART ↓ PROGRAM ↓ INPUT ↓ PROCESSING ↓ OUTPUT ↓ TEST

ЁЯОп Exam Tip: If asked "What is text-based programming?", write: "Programming that requires the programmer to type instructions/code using the syntax of a programming language, such as Python."

❓ Frequently Asked Questions (FAQ)

Q: What is the difference between block-based and text-based programming? A: Block-based programming (like Scratch) uses graphical, drag-and-drop blocks to create programs, making it easier for beginners. Text-based programming (like Python) requires typing code and following specific syntax rules, and is used for real-world applications.
Q: What is the IPO model in computing? A: The IPO model stands for Input → Processing → Output. It describes how a computer or program receives data (Input), works on it (Processing), and produces a result (Output).
Q: What is an algorithm and a flowchart? A: An algorithm is a step-by-step method to solve a problem. A flowchart is a visual diagram that uses standard symbols (like ovals, rectangles, and diamonds) to show the sequence of actions in that algorithm.
Q: What is IDLE in Python? A: IDLE stands for Integrated Development and Learning Environment. It is the default software environment used to write, edit, run, and test Python programs.

ЁЯОУ Expert ICT, Coding, School Classes, Digital Marketing & University Project Guidance

Struggling with your university final year project? Want to master coding, upscale your business with expert digital marketing, or learn absolute computer basics from scratch? We offer high-quality individual and group online classes conducted in English, Sinhala, or Tamil mediums. Get guaranteed academic success and professional growth with tailored guidance.


ЁЯОУ University Final Year Project Guidance & AI

Get specialized, end-to-end mentoring and technical support to pass your degree or master's program with flying colors:

  • ЁЯПл Targeted Institutes: Expert guidance tailored for BIT UCSC, UoM, SLIIT, NIBM, and other leading universities.
  • ЁЯФм Postgraduate Support: Comprehensive assistance for MSc Software Final Year Projects.
  • ЁЯдЦ AI & Smart Applications: Step-by-step implementation of AI, Machine Learning (ML), and automation modules.
  • ✅ Guaranteed Success: Help with documentation, system architecture, coding, and viva preparation.

ЁЯПл School ICT & Corporate Beginner Classes

  • ЁЯТ╗ Non-IT Staff Computer Basics: Absolute beginner-friendly online classes covering essential computer skills, office tools, and internet operations.
  • ЁЯОТ Primary & Secondary (Grades 1-10): Interactive online ICT classes tailored to build strong foundations from early ages.
  • ЁЯУЭ Exam Prep: Dedicated training packages for GCE O/L, GCE A/L ICT, and GIT exams.
  • ЁЯМН Global Syllabuses: Complete curriculum coverage for Local, Edexcel, and Cambridge in English & Tamil Mediums.

ЁЯУв Software Development & Digital Marketing Services

  • ⚙️ Software & Web Development: Professional custom software application and website development built using PHP & MySQL.
  • ЁЯОп Social Media Management: Content creation, publishing, and channel management for Facebook, Instagram, TikTok, and YouTube.
  • ЁЯУИ Ad Boosting: Highly targeted paid advertising campaigns to drive leads, traffic, and sales to your business.

ЁЯУЮ Connect With Us Instantly

Book your slot for online classes or get a premium tech service quote today!

ЁЯТм WhatsApp: +94 729622034

ЁЯУз Email: ITClassSL@gmail.com


ЁЯМР Explore Our Resources & Communities

Stay updated with our latest tutorials, project ideas, and student guides across all our official platforms:

Friday, August 28, 2026

G.C.E. A/L ICT Unit 10.6-10.8 Tamil | PHP, MySQL & Web Publishing A/L ICT Tamil, Unit 10 PHP MySQL, Web Development Tamil, HTML Forms GET POST, Database Connectivity, Web Hosting, GCE AL ICT 2026

ЁЯТ╗ G.C.E. A/L ICT (родрооிро┤் роКроЯроХроо்)

Unit 10.6 - 10.8: Web Authoring, PHP, MySQL & Publishing

ЁЯУМ роЗрои்родрок் рокாроЯрод்родிрой் роиோроХ்роХроо்: Competencies 10.6, 10.7 & 10.8-ро▓் Web Authoring Tools, Static vs Dynamic Web Pages, PHP Basics, HTML Forms, GET/POST, MySQL Database Connectivity рооро▒்ро▒ுроо் Website Publishing роЖроХிропро╡ро▒்ро▒ை Theory, Code Examples, рооро▒்ро▒ுроо் Exam Q&A ро╡роЯிро╡ிро▓் роОро│ிрооைропாроХроХ் роХро▒்ро▒ுроХ்роХொро│்ро│ро▓ாроо்.
10.6

Web Authoring Tool & WYSIWYG

Web Authoring Tool: Web Pages-роР роЙро░ுро╡ாроХ்роХро╡ுроо், родிро░ுрод்родро╡ுроо், роиிро░்ро╡роХிроХ்роХро╡ுроо் рокропрой்рокроЯுрод்родрок்рокроЯுроо் рооெрой்рокொро░ுро│் (роО.роХா: Adobe Dreamweaver, Visual Studio Code, KompoZer).

WYSIWYG: "What You See Is What You Get". родிро░ைропிро▓் роиாроо் роХாрогுроо் ро╡роЯிро╡рооே роЗро▒ுродிропாроХ Web Page-ро▓் родோрой்ро▒ுроо் ро╡роЯிро╡рооாроХ роЗро░ுроХ்роХுроо்.

роирой்рооைроХро│்: Web Development роОро│ிродாроХிро▒родு, ро╡ேроХрооாроХ роЙро░ுро╡ாроХ்роХро▓ாроо், Visual Editing, Code Assistance (Syntax Highlighting, Auto-completion).

Static vs Dynamic

Static vs Dynamic Web Pages

Static Web PageDynamic Web Page
рооுрой்роХூроЯ்роЯிропே роиிро░்рогропிроХ்роХрок்рокроЯ்роЯ родроХро╡ро▓்роХро│்User Input/Database роЕроЯிрок்рокроЯைропிро▓் рооாро▒ுроо்
Developer рооாро▒்ро▒ுроо் ро╡ро░ை рооாро▒ாродுроиேро░роо், User Action роЕроЯிрок்рокроЯைропிро▓் роЙро░ுро╡ாроХுроо்
HTML роороЯ்роЯுроо் рокோродுроо்PHP, MySQL, JavaScript родேро╡ை
Architecture

Dynamic Website Architecture Flow

USER → Web Browser → HTTP Request → Web Server
                                          ↓
                                        PHP
                                          ↓
                                -------------------
                                ↓                 ↓
                            Processing          MySQL
                                                  ↓
                                               Database
                                                  ↓
                                                Result
                                                  ↓
                                                 PHP
                                                  ↓
                                             HTML Output
                                                  ↓
                                            Web Browser
          
PHP Basics

PHP Variables & Data Types

PHP Variable роОрок்рокோродுроо் $ роХுро▒ிропீроЯ்роЯுроЯрой் родொроЯроЩ்роХுроо்.

<?php
$name = "Kamal";      // String
$age = 18;            // Integer
$marks = 85.5;        // Float
$passed = true;       // Boolean

echo "Name: " . $name; // String Concatenation (.)
?>
          
Arrays

PHP Arrays (Indexed & Associative)

Indexed Array:

$students = array("Kamal", "Nimal", "Sunil");
echo $students[0]; // Output: Kamal (Index starts at 0)
          

Associative Array:

$student = array("name" => "Kamal", "age" => 18);
echo $student["name"]; // Output: Kamal
          
Control

Control Structures (if, else, loops)

// if...elseif...else
$marks = 75;
if ($marks >= 75) {
    echo "A";
} elseif ($marks >= 65) {
    echo "B";
} else {
    echo "S";
}

// for Loop
for ($i = 1; $i <= 5; $i++) {
    echo $i; // Output: 12345
}

// foreach Loop (for Arrays)
$names = array("Kamal", "Nimal");
foreach ($names as $name) {
    echo $name;
}
          
Functions

PHP Functions

Code Reusability-роХ்роХாроХ Functions рокропрой்рокроЯுрод்родрок்рокроЯுроХிрой்ро▒рой.

function add($a, $b) {
    return $a + $b;
}
$result = add(10, 20);
echo $result; // Output: 30
          
Form Elements

рооுроХ்роХிроп HTML Form Elements

  • Text: <input type="text" name="username">
  • Password: <input type="password" name="pass">
  • Radio: (роТро░ு Option роороЯ்роЯுроо்) <input type="radio" name="gender" value="Male"> (роТро░ே name роЗро░ுроХ்роХ ро╡ேрог்роЯுроо்)
  • Checkbox: (рокро▓ Options) <input type="checkbox" name="subject" value="ICT">
  • Select: <select name="district"><option value="Colombo">Colombo</option></select>
  • Fieldset: Related controls-роР group роЪெроп்роп <fieldset> рооро▒்ро▒ுроо் <legend> рокропрой்рокроЯுроо்.
GET vs POST

GET vs POST Method (рооிроХ рооுроХ்роХிропроо் ⭐)

GET MethodPOST Method
Data URL-ро▓் роХாрогрок்рокроЯுроо்Data Request Body-ро▓் роЕройுрок்рокрок்рокроЯுроо்
Search/Retrieval-роХ்роХு роПро▒்ро▒родுData Submission (Login/Register)-роХ்роХு роПро▒்ро▒родு
URL-роР Bookmark роЪெроп்ропро▓ாроо்Form Data рокொродுро╡ாроХ Bookmark роЪெроп்ропрок்рокроЯாродு
Password-роХ்роХு рокொро░ுрод்родрооாройродு роЕро▓்ро▓Password рокோрой்ро▒ sensitive data-роХ்роХு ро╡ிро░ுроо்рокрод்родроХ்роХродு
URL Length ро╡ро░роо்рокு роЙро│்ро│родுрокெро░ிроп Data-роХ்роХு роЪிро▒рои்родродு
PHP Processing

PHP рооூро▓роо் Form Data рокெро▒ுродро▓்

// HTML Form
<form action="process.php" method="post">
    <input type="text" name="name">
    <input type="submit" value="Submit">
</form>

// process.php
<?php
$name = $_POST["name"]; // method="post" → $_POST
echo "Name: " . $name;
?>
          
ЁЯОп роиிройைро╡ிро▓் ро╡ைроХ்роХ: method="get" → $_GET | method="post" → $_POST
MySQL Basics

Database роЕроЯிрок்рокроЯை роЪொро▒்роХро│்

  • Database: родொроЯро░்рокுроЯைроп Data-роХро│ிрой் родொроХுрок்рокு.
  • Table: родொроЯро░்рокுроЯைроп Records-роР роЪேрооிроХ்роХுроо் роЕрооைрок்рокு.
  • Row/Record: роТро░ு рооுро┤ுрооைропாрой Data Record.
  • Column/Field: роТро░ு роХுро▒ிрок்рокிроЯ்роЯ Attribute (роО.роХா: Name, Age).
  • Primary Key: роТро╡்ро╡ொро░ு Record-роР родройிрод்родுро╡рооாроХ роЕроЯைропாро│роо் роХாрогுроо் Field (роО.роХா: StudentID).
SQL Commands

рооுроХ்роХிроп SQL Commands (CRUD)

-- 1. CREATE Database & Table
CREATE DATABASE school;
USE school;
CREATE TABLE student (
    id INT PRIMARY KEY,
    name VARCHAR(50),
    age INT
);

-- 2. INSERT (Add Data)
INSERT INTO student (id, name, age) VALUES (1, 'Kamal', 18);

-- 3. SELECT (Retrieve Data)
SELECT * FROM student;
SELECT name, age FROM student WHERE id = 1;

-- 4. UPDATE (Modify Data)
UPDATE student SET age = 19 WHERE id = 1;

-- 5. DELETE (Remove Data)
DELETE FROM student WHERE id = 1;
          
⚠️ роОроЪ்роЪро░ிроХ்роХை: DELETE FROM student; роОрой்ро▒ு WHERE роЗро▓்ро▓ாрооро▓் роХொроЯுрод்родாро▓் Table-ро▓் роЙро│்ро│ роЕройைрод்родு Records-роХро│ுроо் роиீроХ்роХрок்рокроЯுроо்!
Connectivity

PHP & MySQL Connectivity

<?php
// 1. Connection роЙро░ுро╡ாроХ்роХுродро▓்
$conn = new mysqli("localhost", "root", "", "school");

// 2. Connection роЪро░ிрокாро░்род்родро▓்
if ($conn->connect_error) {
    die("Connection failed");
}

// 3. Form Data-ро╡ை Save роЪெроп்родро▓் (INSERT)
$name = $_POST["name"];
$age = $_POST["age"];
$sql = "INSERT INTO student (name, age) VALUES ('$name', '$age')";
$conn->query($sql);
echo "Data saved";

// 4. Database-ро▓ிро░ுрои்родு Data рокெро▒ுродро▓் (SELECT)
$result = $conn->query("SELECT * FROM student");
while ($row = $result->fetch_assoc()) {
    echo $row["name"] . "<br>";
}
?>
          
Publishing

Local vs Internet Publishing

Local PublishingInternet Publishing
Local Computer/Intranet-ро▓் роЗропроЩ்роХுроо்Remote Server-ро▓் роЗропроЩ்роХி рокொродுро╡ாроХ роЕрогுроХроХ்роХூроЯிропродு
XAMPP, WAMP рокோрой்ро▒ро╡ை рокропрой்рокроЯுроо்Web Hosting Service родேро╡ை
http://localhost/ рооூро▓роо் роЕрогுроХро▓ாроо்Domain/Subdomain рооூро▓роо் роЕрогுроХро▓ாроо்
Development & Testing-роХ்роХு роороЯ்роЯுроо்Production Website-роХ்роХு
Steps

Internet Publishing рокроЯிроХро│்

  1. Website роЙро░ுро╡ாроХ்роХுродро▓் & Local-ро▓் Test роЪெроп்родро▓்
  2. Web Hosting Account рокெро▒ுродро▓்
  3. Website Files (HTML, PHP, CSS, Images) Upload роЪெроп்родро▓்
  4. MySQL Database роЙро░ுро╡ாроХ்роХி Configure роЪெроп்родро▓்
  5. Domain/Subdomain роЗрогைрод்родро▓்
  6. Online Website-роР Test роЪெроп்родро▓்
Performance

Website Performance-роР рокாродிроХ்роХுроо் роХாро░рогிроХро│்

  • Image/File Size: рокெро░ிроп Files Loading-роР рооெродுро╡ாроХ்роХுроо் (Compress роЪெроп்роп ро╡ேрог்роЯுроо்).
  • HTTP Requests: роЕродிроХ Images/CSS/JS Files роЕродிроХ Requests родேро╡ைрок்рокроЯுрод்родுроо்.
  • Server Performance: Slow Server Response Time-роР роЕродிроХро░ிроХ்роХுроо்.
  • Database Efficiency: родிро▒рооைропро▒்ро▒ SQL Queries (роО.роХா: родேро╡ைропிро▓்ро▓ாрод SELECT *) рооெродுро╡ாроХ்роХுроо்.
  • Caching: роЕроЯிроХ்роХроЯி рокропрой்рокроЯுрод்родрок்рокроЯுроо் Resources-роР роЪேрооிрод்родு ро╡ைрок்рокродு ро╡ேроХрод்родை роЕродிроХро░ிроХ்роХுроо்.
  • Bandwidth & Internet Speed: User-рой் Network ро╡ேроХроо்.

ЁЯУЭ A/L рооாродிро░ி ро╡ிройாроХ்роХро│்

Q1

Static рооро▒்ро▒ுроо் Dynamic Web Page-роХ்роХு роЗроЯைропிро▓ாрой ро╡ேро▒ுрокாроЯ்роЯை ро╡ிро│роХ்роХுроХ.

ро╡ிроЯை: Static Web Page рооுрой்роХூроЯ்роЯிропே роиிро░்рогропிроХ்роХрок்рокроЯ்роЯ родроХро╡ро▓்роХро│ைроХ் роХாроЯ்роЯுроо். Dynamic Web Page роОрой்рокродு User Input, Database роЕро▓்ро▓родு роиேро░роо் рокோрой்ро▒ роиிрокрои்родройைроХро│ிрой் роЕроЯிрок்рокроЯைропிро▓் роЙро│்ро│роЯроХ்роХрод்родை роЙро░ுро╡ாроХ்роХுроо் роЕро▓்ро▓родு рооாро▒்ро▒ுроо்.

Q2

GET рооро▒்ро▒ுроо் POST роЗроЯைропே роЗро░рог்роЯு ро╡ேро▒ுрокாроЯுроХро│ைроХ் роХுро▒ிрок்рокிроЯுроХ.

ро╡ிроЯை: 1. GET-ро▓் Data URL-ро▓் роХாрогрок்рокроЯுроо், POST-ро▓் Request Body-ро▓் роЕройுрок்рокрок்рокроЯுроо். 2. GET Search/Retrieval-роХ்роХு роПро▒்ро▒родு, POST Password рокோрой்ро▒ sensitive data submission-роХ்роХு ро╡ிро░ுроо்рокрод்родроХ்роХродு.

Q3

`school` роОрой்ро▒ рокெропро░ிро▓் Database рооро▒்ро▒ுроо் `student` Table роЙро░ுро╡ாроХ்роХுроо் SQL Command роОро┤ுродுроХ.

CREATE DATABASE school;
USE school;
CREATE TABLE student (
    id INT PRIMARY KEY,
    name VARCHAR(50),
    age INT
);
          
Q4

HTML Form-ро▓் User Name рокெро▒்ро▒ு `save.php`-роХ்роХு POST method рооூро▓роо் роЕройுрок்рокுроо் Code роОро┤ுродுроХ.

<form action="save.php" method="post">
    Name: <input type="text" name="name">
    <input type="submit" value="Save">
</form>
          
Q5

Website Performance-роР рокாродிроХ்роХுроо் роРрои்родு роХாро░рогிроХро│ைроХ் роХுро▒ிрок்рокிроЯுроХ.

ро╡ிроЯை: 1. Image/File Size, 2. Server Performance, 3. HTTP Requests роОрог்рогிроХ்роХை, 4. Database Query Efficiency, 5. Caching.

⚡ One-Minute Revision Sheet

ЁЯФе рооுро┤ு Flow рооройродிро▓் ро╡ைрод்родிро░ுроХ்роХ:
HTML FORM → GET / POST → PHP → MySQL → SQL QUERY → DATABASE → PHP → HTML → BROWSER

ЁЯФС Key Keywords:
WYSIWYG = What You See Is What Get
$_GET / $_POST = Form Data рокெро▒
PRIMARY KEY = Unique Record Identifier
Local Publishing = XAMPP/WAMP (Testing)
Internet Publishing = Web Hosting + Domain

❓ роЕроЯிроХ்роХроЯி роХேроЯ்роХрок்рокроЯுроо் роХேро│்ро╡ிроХро│் (FAQ)

Q: WYSIWYG роОрой்ро▒ாро▓் роОрой்рой? A: WYSIWYG роОрой்рокродு 'What You See Is What You Get' роОрой்рокродрой் роЪுро░ுроХ்роХроо். роЗродрой் рокொро░ுро│், родிро░ைропிро▓் роиாроо் роХாрогுроо் ро╡роЯிро╡рооே роЗро▒ுродிропாроХ Web Page-ро▓் родோрой்ро▒ுроо் ро╡роЯிро╡рооாроХ роЗро░ுроХ்роХுроо் роОрой்рокродாроХுроо்.
Q: Static Web Page рооро▒்ро▒ுроо் Dynamic Web Page-роХ்роХு роЗроЯைропிро▓ாрой ро╡ேро▒ுрокாроЯு роОрой்рой? A: Static Web Page рооுрой்роХூроЯ்роЯிропே роиிро░்рогропிроХ்роХрок்рокроЯ்роЯ родроХро╡ро▓்роХро│ைроХ் роХாроЯ்роЯுроо். Dynamic Web Page роОрой்рокродு User Input, Database роЕро▓்ро▓родு роиேро░роо் рокோрой்ро▒ роиிрокрои்родройைроХро│ிрой் роЕроЯிрок்рокроЯைропிро▓் роЙро│்ро│роЯроХ்роХрод்родை роЙро░ுро╡ாроХ்роХுроо் роЕро▓்ро▓родு рооாро▒்ро▒ுроо்.
Q: HTML Form-ро▓் GET рооро▒்ро▒ுроо் POST method-роХ்роХு роЗроЯைропிро▓ாрой ро╡ேро▒ுрокாроЯு роОрой்рой? A: GET method-ро▓் Data URL-ро▓் роХாрогрок்рокроЯுроо் рооро▒்ро▒ுроо் Search/Retrieval-роХ்роХு роПро▒்ро▒родு. POST method-ро▓் Data Request Body-ро▓் роЕройுрок்рокрок்рокроЯுроо் рооро▒்ро▒ுроо் Password рокோрой்ро▒ sensitive data submission-роХ்роХு ро╡ிро░ுроо்рокрод்родроХ்роХродு.
Q: PHP рооூро▓роо் MySQL Database-роЙроЯрой் роОро╡்ро╡ாро▒ு роЗрогைрок்рокродு? A: PHP-ропிро▓் `new mysqli("localhost", "username", "password", "database_name")` роОрой்ро▒ code-роРрок் рокропрой்рокроЯுрод்родி MySQL Database-роЙроЯрой் роЗрогைрок்рокு роЙро░ுро╡ாроХ்роХрок்рокроЯுроХிро▒родு.

Tuesday, August 25, 2026

Complete G.C.E. A/L ICT Unit 10.5 (CSS - Style Sheets, Selectors, Formatting) and 10.6 (Web Authoring Tools) notes in Tamil with code examples and exam Q&A

ЁЯОи G.C.E. A/L ICT (родрооிро┤் роКроЯроХроо்)

Unit 10.5: CSS (Style Sheets) & Unit 10.6: Web Authoring Tools

ЁЯУМ роЗрои்родрок் рокாроЯрод்родிрой் роиோроХ்роХроо்: Unit 10.5-ро▓் CSS роЕроЯிрок்рокроЯைроХро│், Selectors, Insertion Methods, Formatting рооро▒்ро▒ுроо் Unit 10.6-ро▓் Web Authoring Tools рокро▒்ро▒ி Theory, Examples, Code Blocks, рооро▒்ро▒ுроо் Question & Answer ро╡роЯிро╡ிро▓் роОро│ிрооைропாроХроХ் роХро▒்ро▒ுроХ்роХொро│்ро│ро▓ாроо்.
10.5.1

Style Sheet / CSS роОрой்ро▒ாро▓் роОрой்рой?

CSS = Cascading Style Sheets

HTML elements-рой் родோро▒்ро▒роо் (Appearance) рооро▒்ро▒ுроо் ро╡роЯிро╡рооைрок்рокு (Formatting) роЖроХிропро╡ро▒்ро▒ை роХроЯ்роЯுрок்рокроЯுрод்род рокропрой்рокроЯுрод்родрок்рокроЯுроо் ро╡ிродிроХро│ிрой் родொроХுрок்рокு.

  • HTML → Web page-рой் structure/content роЙро░ுро╡ாроХ்роХுроХிро▒родு
  • CSS → Web page-рой் appearance/design рооாро▒்ро▒ுроХிро▒родு
h1 {
    color: blue;
    font-size: 30px;
}
CSS Benefits

CSS роЗрой் рооுроХ்роХிроп роирой்рооைроХро│்

  • Web page-рой் design-роР роОро│ிродாроХ рооாро▒்ро▒ рооுроЯிропுроо்
  • роТро░ே Style-роР рокро▓ elements-роХ்роХு рокропрой்рокроЯுрод்род рооுроЯிропுроо்
  • Code duplication роХுро▒ைроХிро▒родு
  • Website maintenance роОро│ிродாроХிро▒родு
10.5.2

CSS Syntax

selector {
    property: value;
}
рокроХுродிрокொро░ுро│்роЙродாро░рогроо்
SelectorроОрои்род element-роХ்роХு stylep, h1
PropertyроОродை рооாро▒்ро▒ ро╡ேрог்роЯுроо்color, font-size
ValueроОро╡்ро╡ாро▒ு рооாро▒்ро▒ ро╡ேрог்роЯுроо்red, 20px
p {
    color: red;
    font-size: 20px;
}
10.5.3

CSS Comments

CSS code-роР browser-ро▓் display роЪெроп்ропாрооро▓் developer-роХ்роХு explanation роОро┤ுрод рокропрой்рокроЯுроХிро▒родு.

/* This is a comment */

/* Heading style */
h1 {
    color: green;
    font-size: 30px;
}
⚠️ Exam Point: CSS comment → /* comment */ | HTML comment → <!-- comment -->
4 Types

роиாрой்роХு рооுроХ்роХிроп CSS Selectors

SelectorSymbolрокропрой்рокாроЯுроЙродாро░рогроо்
ElementNoneTag name рооூро▓роо்p { }
ID#роТро░ு specific element#special { }
Class.рокро▓ elements-роХ்роХு.important { }
GroupCommaрокро▓ selectors-роХ்роХுh1, h2, p { }
1. Element Selector

Element Selector

HTML element рокெропро░ை роиேро░роЯிропாроХ рокропрой்рокроЯுрод்родுро╡родு.

p {
    color: blue;
}

h1 {
    color: red;
}
2. ID Selector

ID Selector (#)

HTML: <p id="special">Important Message</p>

#special {
    color: red;
    font-size: 25px;
}
ЁЯОп роиிройைро╡ிро▓் ро╡ைроХ்роХ: ID → # (роТро░ே роТро░ு element-роХ்роХு роороЯ்роЯுроо்)
3. Class Selector

Class Selector (.)

HTML: <p class="important">Hello</p>

.important {
    color: green;
    font-weight: bold;
}
ЁЯОп роиிройைро╡ிро▓் ро╡ைроХ்роХ: Class → . (рокро▓ elements-роХ்роХு)
4. Group Selector

Group Selector (,)

рокро▓ selectors-роХ்роХு роТро░ே style рокропрой்рокроЯுрод்род comma рокропрой்рокроЯுрод்родுро╡родு.

h1, h2, p {
    color: blue;
}
ID vs Class

ID vs Class - ро╡ேро▒ுрокாроЯு

IDClass
# рокропрой்рокроЯுрод்родрок்рокроЯுроо். рокропрой்рокроЯுрод்родрок்рокроЯுроо்
роТро░ு element-роХ்роХு роороЯ்роЯுроо் (Unique)рокро▓ elements-роХ்роХு
Example: #headerExample: .box
3 Ways

Inline, Internal, External CSS

TypeCSS роЗро░ுроХ்роХுроо் роЗроЯроо்рокропрой்рокாроЯு
InlineHTML tag-роХ்роХுро│்Single element
Internal<style> tagSingle webpage
External.css fileMultiple webpages
1. Inline CSS

Inline CSS (Style Attribute)

HTML tag-рой் роЙро│்ро│ே style attribute рокропрой்рокроЯுрод்родுро╡родு.

<p style="color:red;">Hello World</p>
  • Advantage: роТро░ு element-роХ்роХு роЙроЯройроЯிропாроХ style роХொроЯுроХ்роХ рооுроЯிропுроо்
  • Disadvantage: Code duplication, Maintenance роХроЯிройроо்
2. Internal CSS

Internal CSS (<style> Tag)

HTML document-рой் <head> рокроХுродிропிро▓் <style> tag рокропрой்рокроЯுрод்родுро╡родு.

<head>
<style>
p {
    color: blue;
    font-size: 20px;
}
</style>
</head>
3. External CSS

External CSS (.css File)

CSS code-роР родройிропாрой .css file-ро▓் роЪேрооிрод்родு HTML document-роХ்роХு link роЪெроп்ро╡родு.

HTML-ро▓்:

<link rel="stylesheet" href="style.css">

style.css-ро▓்:

body {
    background-color: lightblue;
}

h1 {
    color: red;
}
⭐ рооிроХ рооுроХ்роХிропрооாрой роирой்рооை: роТро░ே CSS file-роР рокро▓ HTML pages рокропрой்рокроЯுрод்род рооுроЯிропுроо். Website maintenance рооிроХро╡ுроо் роОро│ிродாроХிро▒родு.
Background

A. Background Color & Image

/* Background Color */
body {
    background-color: lightblue;
}

/* Background Image */
body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
Text

B. Text Formatting

p {
    color: red;
    text-align: center;
}

text-align values: left, right, center, justify

Fonts

C. Font Properties

p {
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    color: blue;
}
Links

D. Link States

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:hover {
    color: red;  /* Mouse pointer link-рой் рооேро▓் роЪெро▓்ро▓ுроо்рокோродு */
}

a:active {
    color: green;
}
⭐ рооிроХ рооுроХ்роХிропрооாройродு: hover = mouse pointer link-рой் рооேро▓் роЪெро▓்ро▓ுроо்рокோродு роиிро▒роо் рооாро▒ுроо்
Lists

E. List Formatting

ul {
    list-style-type: square;
    /* values: disc, circle, square, none */
}

ol {
    list-style-type: upper-roman;
}
Tables

F. Table Formatting

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background-color: navy;
    color: white;
}

td {
    padding: 8px;
}

th, td {
    border: 1px solid black;
}
Full Example

рооுро┤ுрооைропாрой Practical Example

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
    background-color: lightblue;
    font-family: Arial;
}
h1 {
    color: darkblue;
    text-align: center;
}
p {
    color: black;
    font-size: 18px;
}
.important {
    color: red;
    font-weight: bold;
}
#special {
    background-color: yellow;
}
a:hover {
    color: red;
}
table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    padding: 10px;
}
</style>
</head>
<body>
<h1>My School</h1>
<p>Welcome to my website.</p>
<p class="important">Important Notice</p>
<p id="special">Special Message</p>
<a href="#">Visit Us</a>
<table>
<tr><th>Name</th><th>Marks</th></tr>
<tr><td>Kamal</td><td>85</td></tr>
</table>
</body>
</html>

ЁЯУЭ рооுроХ்роХிроп Exam Q&A

Q1

What is CSS?

Answer: CSS stands for Cascading Style Sheets. It is used to control the appearance and formatting of HTML elements in web pages.

Q2

Write the basic syntax of CSS.

selector {
    property: value;
}
Q3

How do you write a comment in CSS?

/* This is a CSS comment */
Q4

Name four CSS selectors.

  • Element selector
  • ID selector
  • Class selector
  • Group selector
Q5-Q6

ID vs Class Selector Representation

ID: # symbol - #header { color: blue; }

Class: . symbol - .menu { color: red; }

Q7

Name three ways of inserting CSS.

  • Inline CSS
  • Internal CSS
  • External CSS
Q8-Q9

Practical CSS Questions

Make all h1 red & centered:

h1 {
    color: red;
    text-align: center;
}

Change background to yellow:

body {
    background-color: yellow;
}
Q10

Advantage of external CSS?

Answer: External CSS allows the same style rules to be applied to multiple HTML pages. It also makes website maintenance and design changes easier.

10.6.1

Web Authoring Tool роОрой்ро▒ாро▓் роОрой்рой?

Web pages-роР роЙро░ுро╡ாроХ்роХ, edit роЪெроп்роп рооро▒்ро▒ுроо் manage роЪெроп்роп роЙродро╡ுроо் software/application-роХро│் Web Authoring Tools роОройрок்рокроЯுроо்.

Examples:

  • Adobe Dreamweaver
  • Microsoft Expression Web
  • Visual Studio Code
  • KompoZer
  • BlueGriffon
Uses

Web Authoring Tool-рой் рокропрой்рокாроЯுроХро│்

  • Web page роЙро░ுро╡ாроХ்роХро▓ாроо்
  • HTML code роОро┤ுродро▓ாроо்
  • CSS роЪேро░்роХ்роХро▓ாроо்
  • Images & Hyperlinks роЪேро░்роХ்роХро▓ாроо்
  • Tables роЙро░ுро╡ாроХ்роХро▓ாроо்
  • Text formatting роЪெроп்ропро▓ாроо்
  • Web page preview рокாро░்роХ்роХро▓ாроо்
  • Files save/manage роЪெроп்ропро▓ாроо்
Steps

Webpage роЙро░ுро╡ாроХ்роХுроо் Steps

  • Step 1: Authoring tool-роР open роЪெроп்ропро╡ுроо்
  • Step 2: New HTML document роЙро░ுро╡ாроХ்роХро╡ுроо்
  • Step 3: Page title роЪேро░்роХ்роХро╡ுроо்
  • Step 4: Heading & paragraph роЪேро░்роХ்роХро╡ுроо்
  • Step 5: Images роЪேро░்роХ்роХро╡ுроо்
  • Step 6: Hyperlinks роЪேро░்роХ்роХро╡ுроо்
  • Step 7: CSS рооூро▓роо் appearance рооாро▒்ро▒ро╡ுроо்
  • Step 8: Preview роЪெроп்ропро╡ுроо்
  • Step 9: .html extension-ро▓் save роЪெроп்ропро╡ுроо்
  • Step 10: Images/CSS files-роР роЪро░ிропாрой folder-ро▓் ро╡ைроХ்роХро╡ுроо்
Exam Q&A

10.6 рооுроХ்роХிроп Exam Q&A

Q1. What is a Web Authoring Tool?

A: Software used to create, edit, format and manage web pages.

Q2. Give two examples.

A: Adobe Dreamweaver, Microsoft Expression Web

Q3. What can be created?

A: Web pages containing text, images, hyperlinks, tables and other web elements.

Q4. Purpose of previewing?

A: To see how the web page will appear in a web browser before publishing.

Q5. File extension for HTML?

A: .html (Example: index.html)

Q6. Purpose of HTML?

A: Define the structure and content of a web page.

Q7. Purpose of CSS?

A: Control the appearance and presentation of HTML elements.

Quick Notes

HTML vs CSS - ро╡ேро▒ுрокாроЯு

HTMLCSS
StructureAppearance
ContentDesign
Heading tagHeading colour
Paragraph tagFont size
Image tagImage presentation
Link tagLink appearance
Selectors

CSS Selectors Summary

Element → p, h1
ID      → #id
Class   → .class
Group   → h1, h2, p (comma)
Insertion

CSS Insertion Methods

Inline   → style attribute
Internal → <style> tag
External → .css file + <link>
Memory Trick

ЁЯФе A/L Memory Trick

CSS = "Change Style Simply"

Selectors - E I C G:
Element | ID | Class | Group

Insertion - I I E:
Inline | Internal | External

HTML = Structure | CSS = Style | Authoring Tool = Create/Edit Web Pages
Must Write CSS

роиீроЩ்роХро│் роХроЯ்роЯாропроо் роОро┤ுродрод் родெро░ிрои்родிро░ுроХ்роХ ро╡ேрог்роЯிроп CSS

/* CSS Example */

body {
    background-color: lightblue;
    font-family: Arial;
}

h1 {
    color: red;
    text-align: center;
}

p {
    font-size: 18px;
}

#special {
    color: green;
}

.important {
    font-weight: bold;
}

a:hover {
    color: red;
}

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 10px;
}

роЗрои்род code-роР рокுро░ிрои்родுроХொрог்роЯு роОро┤ுродрод் родெро░ிрои்родாро▓் 10.5-ро▓் ро╡ро░ுроо் theory + structured/practical CSS questions-роХ்роХு роиро▓்ро▓ роЕроЯிрок்рокроЯை роХிроЯைроХ்роХுроо்.

❓ роЕроЯிроХ்роХроЯி роХேроЯ்роХрок்рокроЯுроо் роХேро│்ро╡ிроХро│் (FAQ)

Q: CSS роОрой்ро▒ாро▓் роОрой்рой? A: CSS роОрой்рокродு Cascading Style Sheets роЖроХுроо். роЗродு HTML elements-рой் родோро▒்ро▒роо் (Appearance) рооро▒்ро▒ுроо் ро╡роЯிро╡рооைрок்рокு (Formatting) роЖроХிропро╡ро▒்ро▒ை роХроЯ்роЯுрок்рокроЯுрод்род рокропрой்рокроЯுрод்родрок்рокроЯுроо் ро╡ிродிроХро│ிрой் родொроХுрок்рокாроХுроо்.
Q: CSS-рой் роЕроЯிрок்рокроЯை syntax роОрой்рой? A: CSS-рой் роЕроЯிрок்рокроЯை syntax: selector { property: value; } - роОроЯுрод்родுроХ்роХாроЯ்роЯு: p { color: red; font-size: 20px; }
Q: CSS Selectors-рой் ро╡роХைроХро│் ропாро╡ை? A: роиாрой்роХு рооுроХ்роХிроп CSS Selectors: 1. Element Selector (p, h1), 2. ID Selector (#header), 3. Class Selector (.menu), 4. Group Selector (h1, h2, p).
Q: HTML-ро▓் CSS роЪேро░்роХ்роХுроо் рооூрой்ро▒ு ро╡ро┤ிроХро│் ропாро╡ை? A: рооூрой்ро▒ு ро╡ро┤ிроХро│்: 1. Inline CSS (style attribute рооூро▓роо்), 2. Internal CSS (<style> tag рооூро▓роо் head-ро▓்), 3. External CSS (.css file-роР <link> рооூро▓роо் роЗрогைрод்родро▓்).
Q: Web Authoring Tool роОрой்ро▒ாро▓் роОрой்рой? A: Web Authoring Tool роОрой்рокродு web pages-роР роЙро░ுро╡ாроХ்роХ, edit роЪெроп்роп рооро▒்ро▒ுроо் manage роЪெроп்роп роЙродро╡ுроо் software роЖроХுроо். роОроЯுрод்родுроХ்роХாроЯ்роЯுроХро│்: Adobe Dreamweaver, Microsoft Expression Web, Visual Studio Code, KompoZer.