Unit 7.1 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.

Stage	What happens (Example: 10 + 5)
Input	Entering numbers (10 and 5)
Operation	Pressing the Addition button (+)
Processing	The calculator performs 10 + 5
Output	The 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)

Feature	Scratch (Block-Based)	Python (Text-Based)
Method	Drag-and-drop graphical blocks	Typing code instructions
Difficulty	Easy for beginners	Requires learning syntax
Errors	Fewer typing errors (blocks fit)	Typing/syntax errors are possible
Use Case	Learning programming logic	Real-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

Operator	Meaning	Python Example	Answer
+	Addition	5 + 3	8
-	Subtraction	5 - 3	2
*	Multiplication	5 * 3	15
/	Division	6 / 3	2

⚠️ 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.

Symbol	Purpose
Oval	Start / Stop
Rectangle	Process / Calculation
Diamond	Decision (Yes/No)
Parallelogram	Input / Output
Arrow	Direction 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

Keyword	Easy Meaning
GUI	Graphical User Interface (icons, menus, drag-and-drop)
Value	Data or number used in a program
Syntax	Rules/structure for writing code
Processing	Computer 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:

• 📺 YouTube Tutorials: Subscribe to our Channel
• 💼 Professional Network: Connect on LinkedIn
• ✍️ Tech Blog: Visit our WordPress Site
• ❓ Project Q&A: Follow our Quora Guide Profile
• 📰 Monthly Updates: Read Our Newsletter
• 🌐 Official Portfolios: Wix Site | Google Business | Strikingly Portfolio
• 🗣️ Student Forum: Join our ElaKiri Discussion Thread

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 Page	Dynamic 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 Method	POST 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 Publishing	Internet 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-உடன் இணைப்பு உருவாக்கப்படுகிறது.

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-க்கு style	p, 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

Selector	Symbol	பயன்பாடு	உதாரணம்
Element	None	Tag name மூலம்	p { }
ID	#	ஒரு specific element	#special { }
Class	.	பல elements-க்கு	.important { }
Group	Comma	பல 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 - வேறுபாடு

ID	Class
# பயன்படுத்தப்படும்	. பயன்படுத்தப்படும்
ஒரு element-க்கு மட்டும் (Unique)	பல elements-க்கு
Example: #header	Example: .box

3 Ways

Inline, Internal, External CSS

Type	CSS இருக்கும் இடம்	பயன்பாடு
Inline	HTML tag-க்குள்	Single element
Internal	<style> tag	Single webpage
External	.css file	Multiple 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 - வேறுபாடு

HTML	CSS
Structure	Appearance
Content	Design
Heading tag	Heading colour
Paragraph tag	Font size
Image tag	Image presentation
Link tag	Link 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.

G.C.E. A/L ICT Unit 10 Tamil Medium | HTML5 & Multimedia Web Development, WWW, Website Types, HTML Tags, Tables, Hyperlinks, Audio/Video with exam questions

🌐 G.C.E. A/L ICT (தமிழ் ஊடகம்)

Unit 10: HTML5 மூலம் Multimedia Websites உருவாக்குதல்

📌 இந்தப் பாடத்தின் நோக்கம்: Competency 10-ல் WWW, Website வகைகள், User Requirements Analysis, HTML5 அடிப்படைகள், Tags, Tables, Hyperlinks, Audio/Video ஆகியவற்றை Theory, Examples, HTML Code, மற்றும் Question & Answer வடிவில் எளிமையாகக் கற்றுக்கொள்ளலாம்.

10.1

World Wide Web (WWW) என்றால் என்ன?

வரையறை: Internet மூலம் அணுகக்கூடிய, ஒன்றோடொன்று hyperlinks மூலம் இணைக்கப்பட்ட web pages மற்றும் web resources-களின் தொகுப்பு.

Internet ≠ WWW

• Internet: மிகப்பெரிய network infrastructure
• WWW: Internet-ஐப் பயன்படுத்தி web pages-ஐ அணுகும் ஒரு service

WWW கூறுகள்

WWW-ன் முக்கிய கூறுகள்

கூறு	விளக்கம்
Web Browser	Web pages-ஐ பார்ப்பதற்கான software (Chrome, Firefox)
Web Server	Web pages/files-ஐ சேமித்து வழங்கும் computer
Website	ஒன்றோடொன்று தொடர்புடைய web pages தொகுப்பு
Web Page	Website-ன் ஒரு individual page
URL	Web resource-ன் முகவரி
HTTP/HTTPS	Browser மற்றும் server இடையிலான communication protocol
HTML	Web page-ன் structure உருவாக்கும் markup language
Hyperlink	ஒரு resource-இலிருந்து மற்றொரு resource-க்கு செல்ல உதவும் link

Website வகைகள்

Website-ன் வகைகள்

• Information Website: Government, Health, Weather information வழங்குதல்.
• News Website: Local, International, Sports, Business news.
• Personal Website: ஒரு தனிநபரைப் பற்றிய portfolio (About Me, Education, Skills).
• Educational Website: Online learning, School/University websites, Courses.
• Commercial Website: Online shopping, Company/Product websites.
• Research Website: Research papers, Scientific information, Academic publications.

Web Portal

Web Portal என்றால் என்ன?

வரையறை: பல வகையான information மற்றும் services-ஐ ஒரே web interface மூலம் பயனருக்கு வழங்கும் website.

உதாரணம்: Student Portal (Login, Results, Attendance, Timetable, Assignments, Announcements).

10.2

Website Objective (நோக்கம்)

Website உருவாக்குவதன் முக்கிய நோக்கம் என்ன என்பதை முதலில் தீர்மானிக்க வேண்டும்.

உதாரணம் - School Website Objectives:

• School information வழங்குதல்.
• Students-க்கு announcements வழங்குதல்.
• Parents-க்கு important information வழங்குதல்.
• School events பற்றி தெரிவிக்குதல்.
• Contact information வழங்குதல்.

Content & Structure

Contents மற்றும் Structure

ஒரு website-ல் தேவையான web pages-ஐ முதலில் identify செய்ய வேண்டும்.

உதாரணம் - Educational Website Structure:

Home
│
├── About
├── Lessons
├── Past Papers
├── Videos
── Downloads
└── Contact
          

Navigation

Navigation Structure

User ஒரு page-லிருந்து மற்றொரு page-க்கு எவ்வாறு செல்ல வேண்டும் என்பதை navigation structure தீர்மானிக்கிறது.

Good Navigation-ன் பண்புகள்: Simple, Clear, Consistent, Easy to understand, Easily accessible.

10.3

HTML என்றால் என்ன?

HTML = HyperText Markup Language

Web pages-ன் structure உருவாக்கப் பயன்படுத்தப்படும் markup language. இது programming language அல்ல (Variables, Loops, Conditions இல்லை).

Basic Structure

HTML Document-ன் அடிப்படை Structure

<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    Welcome to my website.
  </body>
</html>
          

• <html>: HTML document-ன் முழு content.
• <head>: Metadata மற்றும் page-related information.
• <title>: Browser tab-ல் காட்டப்படும் title.
• <body>: User browser-ல் பார்க்கும் visible content.

Common Tags

முக்கிய HTML Tags

Tag	பயன்பாடு
<h1> to <h6>	Headings (h1 = மிகப்பெரிய, h6 = மிகச்சிறிய)
<p>	Paragraph
<br>	Line break (புதிய line)
<b>	Bold (தடித்த எழுத்து)
<i>	Italic (சாய்வு எழுத்து)
<u>	Underline (அடிக்கோடு)
<font>	Font properties (size, color) - Syllabus
<!-- -->	Comment (Browser-ல் காட்டாது)

Example

Complete Basic HTML Example

<html>
<head>
    <title>My First Website</title>
</head>
<body bgcolor="yellow">

<h1>Welcome to My Website</h1>

<p>
This is my first web page.
<br>
<b>Important:</b> HTML is easy!
</p>

<!-- This is a comment -->

</body>
</html>
          

Lists

HTML Lists (3 வகைகள்)

1. Ordered List (<ol>): வரிசை எண்களுடன்.

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
          

2. Unordered List (<ul>): Bullet points.

3. Definition List (<dl>): Definition/Description.

• <dl>: Definition List
• <dt>: Definition Term
• <dd>: Definition Description

Images

Images (<img>)

<img src="school.jpg" alt="School Logo">
          

• src: Image file location
• alt: Alternative text (Image load ஆகாவிட்டால் காட்டும்)

Tables

Tables - அடிப்படை Structure

<table border="1">
<caption>Student Results</caption>
<tr>
    <th>Name</th>
    <th>Marks</th>
</tr>
<tr>
    <td>Ahmed</td>
    <td>85</td>
</tr>
</table>
          

Tag	Meaning
<table>	Table
<tr>	Table Row
<th>	Table Heading
<td>	Table Data
<caption>	Table Caption/Title

Merging

colspan மற்றும் rowspan

colspan: இரண்டு அல்லது அதற்கு மேற்பட்ட columns-ஐ ஒன்றாக merge செய்ய.

<td colspan="2">Total</td>

rowspan: இரண்டு அல்லது அதற்கு மேற்பட்ட rows-ஐ merge செய்ய.

<td rowspan="2">ICT</td>

⭐ முக்கிய Exam Point: colspan = columns merge | rowspan = rows merge

10.4

Hyperlink (<a> Tag)

ஒரு web page அல்லது resource-இலிருந்து மற்றொரு web page/resource-க்கு செல்ல உதவும் clickable link.

<a href="...">Link Text</a>

Link Types

3 வகையான Hyperlinks

1. Bookmark/Internal Link: அதே page-ன் வேறு section-க்கு.

<a href="#contact">Go to Contact</a>
...
<h2 id="contact">Contact Us</h2>
          

2. Local Link: அதே website-ல் வேறு page-க்கு.

<a href="about.html">About Us</a>

3. External Link: வேறு website-க்கு.

<a href="https://www.google.com">Google</a>

Multimedia

Audio & Video (HTML5)

Audio:

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>
          

Video:

<video controls width="500">
    <source src="lesson.mp4" type="video/mp4">
</video>
          

controls attribute மூலம் Play, Pause, Volume controls கிடைக்கும்.

📌 A/L Structured Questions

Q1

School Website Home page உருவாக்க HTML code எழுதுக.

<html>
<head>
    <title>My School</title>
</head>
<body>

<h1>ABC National School</h1>

<p>Welcome to ABC National School.</p>

<a href="about.html">About Us</a>

<br><br>

<img src="school.jpg" alt="School Logo">

<h2>Subjects</h2>

<ol>
    <li>ICT</li>
    <li>Mathematics</li>
    <li>Science</li>
</ol>

</body>
</html>
          

Q2

Table உருவாக்க HTML code எழுதுக.

<table border="1">
<caption>Student Marks</caption>
<tr>
    <th>Name</th>
    <th>ICT</th>
    <th>Maths</th>
</tr>
<tr>
    <td>Ahmed</td>
    <td>80</td>
    <td>75</td>
</tr>
<tr>
    <td>Fathima</td>
    <td>90</td>
    <td>85</td>
</tr>
</table>
          

Q3

3 வகையான Hyperlinks-க்கு code எழுதுக.

1. Bookmark: <a href="#contact">Contact</a>

2. Local: <a href="about.html">About Us</a>

3. External: <a href="https://www.google.com">Google</a>

⚡ Quick MCQ Check

• Q: HTML stands for? A: HyperText Markup Language
• Q: Browser title tag? A: <title>
• Q: Ordered list tag? A: <ol>
• Q: Hyperlink attribute? A: href
• Q: Column merge attribute? A: colspan
• Q: Row merge attribute? A: rowspan

⭐ Last-Minute Memory Formulas:
🌐 WWW Components: Browser, Server, Website, Web Page, URL, HTTP, HTML, Hyperlink
HTML Structure: html → head (title) + body (content)
🔗 Links: Bookmark (#id), Local (page.html), External (https://)
📊 Tables: table → tr → th/td | colspan = columns | rowspan = rows
Multimedia: <audio controls> & <video controls>

❓ அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)

Q: WWW என்றால் என்ன? A: World Wide Web (WWW) என்பது Internet மூலம் அணுகக்கூடிய, ஒன்றோடொன்று hyperlinks மூலம் இணைக்கப்பட்ட web pages மற்றும் web resources-களின் தொகுப்பாகும்.

Q: HTML என்பதன் விரிவாக்கம் என்ன? A: HTML என்பது HyperText Markup Language ஆகும். இது web pages-ன் structure உருவாக்கப் பயன்படுத்தப்படும் markup language ஆகும்.

Q: Hyperlink-ன் வகைகள் யாவை? A: Hyperlink-ன் மூன்று முக்கிய வகைகள்: 1. Bookmark/Internal Link (அதே page-ன் வேறு section), 2. Local Link (அதே website-ன் வேறு page), 3. External Link (வேறு website).

Q: colspan மற்றும் rowspan-க்கு இடையிலான வேறுபாடு என்ன? A: colspan என்பது இரண்டு அல்லது அதற்கு மேற்பட்ட columns-ஐ ஒன்றாக merge செய்ய பயன்படுகிறது. rowspan என்பது இரண்டு அல்லது அதற்கு மேற்பட்ட rows-ஐ merge செய்ய பயன்படுகிறது.