🌐 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

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>

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>

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 செய்ய பயன்படுகிறது.

ICT Computer Tuition Class Local Edexcel Cambridge | Python PHP Web Development Student Project Help

Main Menu

Friday, August 21, 2026

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