ЁЯМР G.C.E. A/L ICT (родрооிро┤் роКроЯроХроо்)
Unit 10: HTML5 рооூро▓роо் Multimedia Websites роЙро░ுро╡ாроХ்роХுродро▓்
World Wide Web (WWW) роОрой்ро▒ாро▓் роОрой்рой?
ро╡ро░ைропро▒ை: Internet рооூро▓роо் роЕрогுроХроХ்роХூроЯிроп, роТрой்ро▒ோроЯொрой்ро▒ு hyperlinks рооூро▓роо் роЗрогைроХ்роХрок்рокроЯ்роЯ web pages рооро▒்ро▒ுроо் web resources-роХро│ிрой் родொроХுрок்рокு.
Internet ≠ WWW
- Internet: рооிроХрок்рокெро░ிроп network infrastructure
- WWW: Internet-роРрок் рокропрой்рокроЯுрод்родி web pages-роР роЕрогுроХுроо் роТро░ு service
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-рой் ро╡роХைроХро│்
- 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 роОрой்ро▒ாро▓் роОрой்рой?
ро╡ро░ைропро▒ை: рокро▓ ро╡роХைропாрой information рооро▒்ро▒ுроо் services-роР роТро░ே web interface рооூро▓роо் рокропройро░ுроХ்роХு ро╡ро┤роЩ்роХுроо் website.
роЙродாро░рогроо்: Student Portal (Login, Results, Attendance, Timetable, Assignments, Announcements).
Website Objective (роиோроХ்роХроо்)
Website роЙро░ுро╡ாроХ்роХுро╡родрой் рооுроХ்роХிроп роиோроХ்роХроо் роОрой்рой роОрой்рокродை рооுродро▓ிро▓் родீро░்рооாройிроХ்роХ ро╡ேрог்роЯுроо்.
роЙродாро░рогроо் - School Website Objectives:
- School information ро╡ро┤роЩ்роХுродро▓்.
- Students-роХ்роХு announcements ро╡ро┤роЩ்роХுродро▓்.
- Parents-роХ்роХு important information ро╡ро┤роЩ்роХுродро▓்.
- School events рокро▒்ро▒ி родெро░ிро╡ிроХ்роХுродро▓்.
- Contact information ро╡ро┤роЩ்роХுродро▓்.
Contents рооро▒்ро▒ுроо் Structure
роТро░ு website-ро▓் родேро╡ைропாрой web pages-роР рооுродро▓ிро▓் identify роЪெроп்роп ро╡ேрог்роЯுроо்.
роЙродாро░рогроо் - Educational Website Structure:
Home
│
├── About
├── Lessons
├── Past Papers
├── Videos
── Downloads
└── Contact
Navigation Structure
User роТро░ு page-ро▓ிро░ுрои்родு рооро▒்ро▒ொро░ு page-роХ்роХு роОро╡்ро╡ாро▒ு роЪெро▓்ро▓ ро╡ேрог்роЯுроо் роОрой்рокродை navigation structure родீро░்рооாройிроХ்роХிро▒родு.
Good Navigation-рой் рокрог்рокுроХро│்: Simple, Clear, Consistent, Easy to understand, Easily accessible.
HTML роОрой்ро▒ாро▓் роОрой்рой?
HTML = HyperText Markup Language
Web pages-рой் structure роЙро░ுро╡ாроХ்роХрок் рокропрой்рокроЯுрод்родрок்рокроЯுроо் markup language. роЗродு programming language роЕро▓்ро▓ (Variables, Loops, Conditions роЗро▓்ро▓ை).
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.
рооுроХ்роХிроп 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-ро▓் роХாроЯ்роЯாродு) |
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>
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 (<img>)
<img src="school.jpg" alt="School Logo">
- src: Image file location
- alt: Alternative text (Image load роЖроХாро╡ிроЯ்роЯாро▓் роХாроЯ்роЯுроо்)
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 |
colspan рооро▒்ро▒ுроо் rowspan
colspan: роЗро░рог்роЯு роЕро▓்ро▓родு роЕродро▒்роХு рооேро▒்рокроЯ்роЯ columns-роР роТрой்ро▒ாроХ merge роЪெроп்роп.
<td colspan="2">Total</td>
rowspan: роЗро░рог்роЯு роЕро▓்ро▓родு роЕродро▒்роХு рооேро▒்рокроЯ்роЯ rows-роР merge роЪெроп்роп.
<td rowspan="2">ICT</td>
Hyperlink (<a> Tag)
роТро░ு web page роЕро▓்ро▓родு resource-роЗро▓ிро░ுрои்родு рооро▒்ро▒ொро░ு web page/resource-роХ்роХு роЪெро▓்ро▓ роЙродро╡ுроо் clickable link.
<a href="...">Link Text</a>
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>
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
ЁЯМР 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>