Showing posts with label GCE AL ICT. Show all posts
Showing posts with label GCE AL ICT. Show all posts

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.
- No comments:
Labels: , , , , , , ,

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

ЁЯМР 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 BrowserWeb pages-роР рокாро░்рок்рокродро▒்роХாрой software (Chrome, Firefox)
Web ServerWeb pages/files-роР роЪேрооிрод்родு ро╡ро┤роЩ்роХுроо் computer
WebsiteроТрой்ро▒ோроЯொрой்ро▒ு родொроЯро░்рокுроЯைроп web pages родொроХுрок்рокு
Web PageWebsite-рой் роТро░ு individual page
URLWeb resource-рой் рооுроХро╡ро░ி
HTTP/HTTPSBrowser рооро▒்ро▒ுроо் server роЗроЯைропிро▓ாрой communication protocol
HTMLWeb 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>
TagMeaning
<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 роЪெроп்роп рокропрой்рокроЯுроХிро▒родு.
- No comments:
Labels: , , , , , , , , , ,
Subscribe to: Posts (Atom)