🖥️ தரம் 11 · அலகு 5

பல்லூடகத் தொழினுட்பத்தைப் பயன்படுத்தி எளிய இணையத்தளங்களை வடிவமைத்தல்

Simple Web Design (HTML/CSS)

★★★★★ MCQHTMLCSSStructured

1. இணையத்தளங்கள் ஏன் தேவைப்படுகின்றன?

நீங்கள் ஒரு பாடசாலையின் விளையாட்டுப் போட்டியை ஒழுங்கமைக்கிறீர்கள் என வைத்துக்கொள்வோம். அழைப்பு அட்டை, கால அட்டவணை, புள்ளி அட்டவணை, படங்கள் — இவற்றை ஒரே இடத்தில் வைத்து, உலகின் எவருக்கும் எந்த நேரத்திலும் கிடைக்க வேண்டும். இவ்வாறான தேவைகளுக்காகவே இணையத்தளங்கள் (Web Sites) வடிவமைக்கப்படுகின்றன.

ஒரு இணையத்தளம் என்பது தொடர்புபடுத்தப்பட்ட பல இணையப் பக்கங்களின் (Web Pages) தொகுப்பு ஆகும். ஒவ்வொரு பக்கமும் HTML (HyperText Markup Language) குறிமுறையால் எழுதப்படுகின்றது. பயனர்கள் இவற்றை ஒரு வலைய உலாவியின் (Web Browser) மூலம் பார்வையிடுவர்.

அடிப்படை வரைவிலக்கணம்

இணையத்தளம் (Website) = தொடர்புபடுத்தப்பட்ட இணையப் பக்கங்களின் தொகுப்பு.
இணையப் பக்கம் (Web Page) = HTML குறிமுறையால் எழுதப்பட்ட ஒற்றை ஆவணம்.

2. ஒரு இணையத்தளத்தை வடிவமைப்பதற்கு முன் என்ன தீர்மானிக்க வேண்டும்?

பாடநூலின் 5.1 பிரிவின்படி, இணையத்தள வடிவமைப்பாளர் வடிவமைப்புப் பணியைத் தொடங்கும் முன் பின்வரும் கேள்விகளுக்குப் பதில் தெளிவாக இருக்க வேண்டும். இது தளத்தின் கட்டமைப்பையும் தோற்றத்தையும் நேரடியாகத் தீர்மானிக்கின்றது.

கேள்வி	விளக்கம்
எந்தத் தகவல்களுக்காக? (What)	தளத்தின் நோக்கம் — விற்பனை, கல்வி, செய்தி, அறிவித்தல்.
யாருக்காக? (Whom / Audience)	பயனர் குழு — மாணவர், வாடிக்கையாளர், பொது மக்கள்.
எவ்வாறு? (How)	பக்கங்களுக்கு இடையே செல்லும் வழிமுறை — வழிசெலுத்தல் (Navigation).
பராமரிப்பு எவ்வாறு? (Maintenance)	தளத்தைப் புதுப்பிக்கும் அதிர்வெண்ணும், பொறுப்பாளரும்.

இக்கேள்விகளுக்குரிய பதில்களைச் சேகரித்த பின்னரே இணையத் தளமாதிரியன் (WebSite Template) தயாரிக்கப்படுகின்றது. தளமாதிரியன் என்பது தளத்தின் ஒட்டுமொத்த உருவாக்கத்தைக் காட்டும் முன்வரைபடம்.

3. இணையத்தளமாதிரியனின் (Template) அமைப்பு

பெரும்பாலான பக்கங்கள் ஒரே மாதிரியான பகுதிகளைக் கொண்டிருக்கும் — மேல் தலைப்பு, பக்க வழிசெலுத்தல், உள்ளடக்கம், கீழ் அடிக்குறிப்பு. கீழே ஒரு திட்ட வடிவ வரைபடம் தரப்பட்டுள்ளது.

பாடநூலின் உருவத்திலுள்ள வழிசெலுத்தற் பட்டையில் About, Academics, Admissions, Visitors எனப் பிரதான பகுதிகள் தரப்பட்டுள்ளன. ஒவ்வொரு பிரதான பகுதியின் கீழும் கிளைப் பகுதிகள் உள்ளன — உதாரணமாக Academics இன் கீழ் Degree Programs, Faculty, Distance Learning, Libraries அமைகின்றன.

முக்கிய அமைப்புக் கூறுகள்

Header • Navigation • Side menu • Main content • Footer

செய்து பாருங்கள் — உமது பாடசாலைத் தளத்திற்கு வடிவமைப்பு

உமது பாடசாலையின் இணையத்தளத்தை வடிவமைக்கும்போது About, Academics, News, Contact எனும் நான்கு பிரதான பகுதிகளை எவ்வாறு பிரிப்பீர்? ஒவ்வொன்றின் கீழும் இரண்டு கிளைப் பகுதிகளை எழுதுக.
எடுத்துக்காட்டு விடை: About → History, Vision; Academics → Subjects, Teachers; News → Events, Notices; Contact → Address, Email.

4. HTML — அடிப்படை மொழி

HTML என்பது HyperText Markup Language எனப் பொருள்படும். இது ஒரு குறியீட்டு மொழியே ஒழிய நிரலாக்க (Programming) மொழியல்ல. HTML ஆவணமானது ஒட்டுக்கள் (Tags) மூலம் அதன் உள்ளடக்கத்திற்கு வடிவத்தைக் கொடுக்கிறது. ஒரு ஒட்டு < > அடைப்புக்களுக்கு உள்ளே எழுதப்படும்.

ஒட்டுக்களின் வடிவம்

தொடக்க ஒட்டு: <tagname> | முடிவு ஒட்டு: </tagname>
உள்ளடக்கம் இரண்டு ஒட்டுக்களுக்கும் இடையில் வைக்கப்படும்.

ஒரு HTML ஆவணத்தைத் தயாரிக்க Notepad போன்ற எளிய பாடத் தொகுப்பான் (Text editor) போதுமானது. கோப்பினை .html அல்லது .htm எனும் நீட்சியுடன் (Extension) சேமிக்க வேண்டும். உதாரணம்: myfirst.html. சேமிக்கும்போது Encoding வகையை Unicode ஆக மாற்றினால் தமிழ் எழுத்துக்கள் சரியாகக் காண்பிக்கப்படும்.

5. ஒரு HTML பக்கத்தின் கட்டமைப்பு

ஒவ்வொரு HTML ஆவணமும் <html> ஒட்டினுள் head மற்றும் body எனும் இரண்டு பிரதான பகுதிகளைக் கொண்டிருக்கும்.

<html>
  <head>
    <title>Sri Lanka</title>
  </head>
  <body>
    <h2>Sri Lanka</h2>
    <p>My country.</p>
  </body>
</html>

head: பக்கம் பற்றிய தகவல்களைக் (Page information) கொண்டிருக்கும். <title> ஒட்டிற்குள் எழுதப்படும் சொற்கள் உலாவியின் தாள்பெயராக (Tab title) தோன்றும். body: உலாவியில் காட்டப்பட வேண்டிய அனைத்து உள்ளடக்கங்களும் இங்கே வைக்கப்படும்.

6. பாடம் (Text) வடிவமைப்பு ஒட்டுக்கள்

பாடநூலின் அட்டவணை 5.1 இற்கேற்ப பாடத்தை வடிவமைக்க பயன்படுகின்ற பிரதான ஒட்டுக்கள் கீழே தரப்பட்டுள்ளன.

ஒட்டு	பயன்பாடு	எடுத்துக்காட்டு
`<h1> … <h6>`	தலைப்புகள் — h1 மிகப் பெரியது, h6 மிகச் சிறியது.	`<h1>SRI LANKA</h1>`
`<p>`	பத்தி (Paragraph).	`<p>My country.</p>`
`<b>`	தடித்த எழுத்து (Bold).	`<b>SRI LANKA</b>`
`<i>`	சாய்வெழுத்து (Italic).	`<i>Sri Lanka</i>`
`<u>`	அடிக்கோடு (Underline).	`<u>Sri Lanka</u>`
`<br>`	புதிய வரிக்கு மாற்றல் (Line break) — முடிவு ஒட்டு இல்லை.	`Line 1<br>Line 2`
`<hr>`	கிடைக் கோடு (Horizontal rule).	`<hr>`
`<marquee>`	கிடைத்திசையில் அசையும் பாடம்.	`<marquee>Welcome</marquee>`

பத்தியின் தேர்ப்படுத்தல் (Alignment)

பாடநூலின் அட்டவணை 5.3 இற்கேற்ப <p> ஒட்டிற்கு align எனும் பெறுமதியைச் சேர்த்து பத்தியின் தேர்ப்படுத்தலை மாற்றலாம்.

ஒட்டு	தேர்ப்படுத்தல்
`<p align="left">`	இடது
`<p align="center">`	மத்தி
`<p align="right">`	வலது
`<p align="justify">`	இரு ஓரங்களும் சமாந்தரமாக

வாக்கியங்களுக்கிடையேயான இடைவெளி — ` `

எழுத்து உருபொருள் (Character entity) ஆகிய   என்பது குறிமுறையாக வாக்கியங்களுக்கிடையே இடைவெளியின் அளவை அதிகரிக்க உதவுகின்றது. சாதாரண இடைவெளியானது non-breaking space எனப்படும். தற்போதைய மேலுள்ள உதாரணத்தின் காட்டப்பட்டுள்ள வாக்கியங்களுக்கிடையேயான மாற்றம் வருவிளைவை அவதானிக்க.

எடுத்துக்காட்டு: உரை வடிவமைப்பு

<html>
<head><title>Sri Lanka</title></head>
<body>
  <h2 align="center">SRI LANKA</h2>
  <hr>
  <p align="justify">
    <b>Sri Lanka</b> is an
    island country in the
    <i>Indian Ocean</i>.
  </p>
</body>
</html>

SRI LANKA

Sri Lanka is an island country in the Indian Ocean.

செய்து பாருங்கள் — தடித்த, சாய்வு, அடிக்கோடு

<b><i><u>Welcome</u></i></b> என்பது என்ன காட்டும்?
விடை: Welcome — மூன்று வடிவமைப்புகளும் ஒரே சொல்லுக்குப் பயன்படுத்தப்படும். ஒட்டுக்களின் கூட்டுச் சேர்மானம் ("nesting") உள்ளிருந்து வெளியே முடிய வேண்டும்.

7. பட்டியல்கள் (Lists)

பாடநூலின்படி பட்டியல்கள் மூன்று வகைகளில் உள்ளன: ஒழுங்கற்ற (Unordered), ஒழுங்கமைக்கப்பட்ட (Ordered), விவரணப் (Description) பட்டியல்.

வகை	ஒட்டு	குறிப்பு
ஒழுங்கற்ற பட்டியல்	`<ul> … </ul>`	புள்ளிக் குறியீடுகளுடன். உருப்படிகள் `<li>` இல் வைக்கப்படும்.
ஒழுங்கமைக்கப்பட்ட பட்டியல்	`<ol> … </ol>`	எண்/எழுத்து வரிசையுடன். `type="1"`, `"A"`, `"a"`, `"I"`, `"i"` பெறுமதிகள்.
விவரணப் பட்டியல்	`<dl>`, `<dt>`, `<dd>`	உருப்படியும் அதன் விவரமும் சேர்த்துக் கொடுக்க.

எடுத்துக்காட்டு: ol type="I" — ரோமன் இலக்க பட்டியல்

<ol type="I">
  <li>சிங்களம்</li>
  <li>தமிழ்</li>
  <li>முஸ்லிம்</li>
  <li>பேர்கர்</li>
</ol>

சிங்களம்
தமிழ்
முஸ்லிம்
பேர்கர்

செய்து பாருங்கள் — ஒழுங்கமைக்கப்பட்ட பட்டியலின் type பெறுமதிகள்

type="A" என்றால் என்ன காண்பிக்கப்படும்?
விடை: A, B, C, D … (ஆங்கிலப் பேரெழுத்து). type="a" → a, b, c …; type="I" → I, II, III, IV (ரோமன் பேரெழுத்து); type="i" → i, ii, iii (ரோமன் சிற்றெழுத்து); type="1" → 1, 2, 3 (இந்து அராபிய).

8. மீவரிக் கொளுவிகள் (Hyperlinks)

இணையத்தளத்தின் முக்கிய அம்சமான மீவரி (Hypertext) கொளுவிகள் வாயிலாகவே ஒரு பக்கத்திலிருந்து இன்னொரு பக்கத்திற்குச் செல்ல முடியும். <a> ஒட்டில் href எனும் பெறுமதி கொளுவிக்கப்பட வேண்டிய இடத்தை (URL அல்லது கோப்புப் பெயர்) குறிக்கின்றது.

அடிப்படை அமைப்பு

எடுத்துக்காட்டு

<a href="President.html">President</a>
<a href="http://www.president.gov.lk">Sri Lankan President</a>

முதலாவது — அதே தளத்தில் உள்ள President.html எனும் பக்கத்திற்குக் கொண்டு செல்லும். இரண்டாவது — வெளி இணையத்தளத்திற்குக் கொண்டு செல்லும்.

செய்து பாருங்கள் — அதே பக்கத்தினுள் கொளுவி

ஒரே பக்கத்திற்குள் ஒரு பகுதியிலிருந்து இன்னொரு பகுதிக்குச் செல்ல என்ன பயன்படுத்துவோம்?
விடை: <a name="top"> எனும் பெயர் கொடுத்து, பின்னர் <a href="#top">Back to top</a> எனும் கொளுவியில் # குறியீட்டுடன் பெயரைச் சுட்டலாம்.

9. படங்களைச் சேர்த்தல் (Images)

படங்களை இணைய பக்கத்தில் சேர்க்க <img> ஒட்டு பயன்படுகின்றது. இதற்கு முடிவு ஒட்டு இல்லை. src பெறுமதி பட கோப்பின் இடத்தைக் (Source) குறிக்கின்றது.

பெறுமதி	பயன்பாடு
`src`	பட கோப்பின் பெயர் அல்லது URL.
`alt`	படம் ஏற்றப்படாதபோது காண்பிக்கப்படும் மாற்றுப் பாடம்.
`width` / `height`	படத்தின் அகலம் மற்றும் உயரம் (Pixels).
`align`	தேர்ப்படுத்தல் — left, right, center.

<img src="lion.jpg" alt="Sri Lankan Flag" width="200" height="120">

10. அட்டவணை (Table)

பாடநூலின் 5.2 பிரிவின்படி <table> ஒட்டுக்குள் ஒவ்வொரு வரிசையும் <tr> எனவும், ஒவ்வொரு கலமும் <td> எனவும், தலைப்புக் கலம் <th> எனவும் வைக்கப்படும். <caption> ஒட்டு அட்டவணைக்கு ஒரு தலைப்பினைக் கொடுக்கப் பயன்படுகின்றது.

எடுத்துக்காட்டு: உலகின் முதன்மை மொழிகள்

<table border="1" width="400">
  <caption>Principle Forms</caption>
  <tr>
    <th>Type</th>
    <th>EXTENT(hectares)</th>
  </tr>
  <tr>
    <td>Paddy</td><td>500,000</td>
  </tr>
</table>

Principle Forms
Type	Extent (ha)
Paddy	500,000
Tea	198,000
Rubber	125,000

பாடநூலின்படி colspan மற்றும் rowspan பெறுமதிகள் ஒரு கலத்தை பல நெடுவரிசை அல்லது வரிசைகளில் விரிக்க உதவுகின்றன. cellpadding, cellspacing, bgcolor எனும் பெறுமதிகள் அட்டவணையின் வடிவத்தைக் கட்டுப்படுத்துகின்றன.

செய்து பாருங்கள் — Merge cells

இரண்டு நெடுவரிசைகளில் விரிக்க: <td colspan="2"> … </td>. மூன்று வரிசைகளில் விரிக்க: <td rowspan="3"> … </td>.

11. உள்ளடக்க முகாமைத்துவ முறைமை (Content Management System – CMS)

பாடநூலின் 5.2.2 பிரிவின்படி, HTML குறிமுறையை நேரடியாக எழுதாது, ஒரு வரைபடச் சாளரத்தினூடாக இணையத்தளத்தை உருவாக்கி நிர்வகிக்க உதவும் மென்பொருள் தொகுப்பே CMS ஆகும். இவை பெரும்பாலும் இணைய சேவையிலேயே (Server) இயங்கும். உதாரணமாக:

Kompozer — இலவசமான WYSIWYG (What You See Is What You Get) editor.
OpenElement, Bluegriffon — வரைபட அடிப்படையில் இணைய பக்கங்களை உருவாக்க.
WordPress, Joomla, Drupal — பிரபல்யமான CMS கள்.

CMS இன் நன்மைகள்

• நிரல் எழுதத் தேவையில்லை
• பல உறுப்பினர்கள் ஒரே நேரத்தில் உள்ளடக்கத்தை நிர்வகிக்கலாம்
• தளத்தைப் புதுப்பித்தல் எளிது

12. இணையத்தளத்தை வெளியிடுதல் (Publishing)

தயாரிக்கப்பட்ட இணையத்தளத்தை உலகிற்குக் கிடைக்கச் செய்வதற்கு பின்வரும் மூன்று வளங்கள் தேவை:

புரவலன் (Hosting Service) — இணையத்தளக் கோப்புக்களைச் சேமித்து வைக்கும் சேவையகம் (Server).
புரவலன் பெயர் (Domain Name) — உதாரணம் myweb.lk. பயனர் இதை உலாவியில் தட்டச்சு செய்வார்.
புரவலன் பெயர்ப் பதிவு (Domain Registration) — ஒரு வருடம்/பல வருடங்களுக்கான கட்டணம்.

புரவலன் பெயர்களின் கட்டமைப்பு

பாடநூலின் உரு 5.43 இற்கேற்ப ஒரு புரவலன் பெயர் ".org" போன்ற மூல வர்க்கங்களாகப் பிரிக்கப்பட்டுள்ளது. இது இரண்டு வகையில் தோற்றமற்ற இணையத்துடன் என்று அமைப்பாக்கப்படுகின்றது:

நிறுவன அதிகாரப் படிநிலை (Organizational hierarchy): .com, .edu, .gov, .mil, .net, .int
புவியியல் அதிகாரப் படிநிலை (Geographic hierarchy): .lk, .uk, .fr, .pe, .sp, .jp, .cd, .gr

நீட்சி	கருத்து	பிரயோகம்
`.com`	Commercial	வணிகம்
`.edu`	Education	கல்வி
`.gov`	Government	அரச நிறுவனங்கள்
`.int`	International	சர்வதேசம்
`.net`	Network	வலையமைப்பு வழங்கி
`.org`	Organization	இலாப நோக்கமற்ற நிறுவனம்

முக்கிய விதி

புரவலன் பெயரில் இடைவெளி (Space) இல்லை. சில எழுத்துக்களைச் சேர்க்க Underscore (_) மட்டுமே அனுமதிக்கப்படுகின்றது. இரண்டு முகவரிகள் ஒரே நேரத்தில் ஒரே பெயரைப் பெற முடியாது.

13. சுருக்கம்

கருத்து	முக்கிய புள்ளி
இணையத்தளம்	பல இணையப் பக்கங்களின் தொகுப்பு. HTML மொழியில் எழுதப்படும்.
HTML கட்டமைப்பு	`<html>` → `<head>` + `<body>`.
பாடம் வடிவமைப்பு	`h1–h6, p, b, i, u, br, hr, marquee`.
பட்டியல்	`ul, ol, dl`. `ol type=1/A/a/I/i`.
கொளுவி	`<a href="…"> … </a>`.
படம்	`<img src="…" alt="…" width="…" height="…">`.
அட்டவணை	`table → tr → td/th`. `colspan`, `rowspan`.
CMS	நிரல் எழுதாமல் வரைபட சாளரத்தினூடாகத் தளத்தை நிர்வகித்தல்.
வெளியிடல்	புரவலன் + புரவலன் பெயர் + பதிவு.

📝 பரீட்சை வினாக்கள் (Past paper practice)

உண்மையான பரீட்சை வடிவம் — முதலில் உங்களே எழுதி, பின் மாதிரி விடை பார்க்க.

Paper I — பஹுவிடைத் தெரிவு வினாக்கள் (1 புள்ளி வீதம்)
Web Design (HTML/CSS) தொடர்பான MCQ பயிற்சி — 2021–2022.

G.C.E. O/L 2021–2022 — Paper I

(a) பின்வரும் HTML குறியீட்டில் (code) காணப்படும் பிழையை கண்டுபிடிக்கவும்:
<table border=1>
<tr>
<td>Company Name</td> <td>ABC</td>
<td>Address</td> <td>ABC Ltd</td>
<td>Contact Number</td> <td>0111222222</td>
</tr>
<tr>
<td>XYZ & Sons</td> <td>0117777777</td>
</tr>
</table>

(1) <table> குறிச்சொல்லில் border பண்பு (attribute) இல்லை
(2) ஒவ்வொரு வரிசையிலும் (row) சரியான எண்ணிக்கையில் கலங்கள் (cells) இல்லை
(3) </table> குறிச்சொல் இல்லை
(4) <tr> குறிச்சொல்கள் சரியாக மூடப்படவில்லை (1 புள்ளி)
(b) 31. HTML ஆவணத்தில் hyperlink உருவாக்க எந்த tag பயன்படுகிறது?
(A) <link>
(B) <a href>
(C) <url>
(D) <hyper> (1 புள்ளி)
(c) 32. HTML-ல் படம் (image) செருக எந்த tag பயன்படுகிறது?
(A) <picture>
(B) <image>
(C) <img src>
(D) <photo> (1 புள்ளி)
(d) 33. மேற்கண்ட URL-களில் படம் இணைக்க (link image) சரியான URL எது?
(1) http://www.ndcwb.gov.lk/
(2) http://www.agdept.gov.lk/
(3) http://www.fao.org/images/picture/Fdi/Sri Lanka.jpg
(4) http://www.places.com/images/Sri-Lanka.png
(A) 1 மட்டும்
(B) 3 மட்டும்
(C) 3 மற்றும் 4
(D) 1 மற்றும் 2 (1 புள்ளி)

Paper I — பஹுவிடைத் தெரிவு வினாக்கள் (1 புள்ளி வீதம்)
Web Design (HTML/CSS) தொடர்பான MCQ பயிற்சி — 2023–2024.

G.C.E. O/L 2023–2024 — Paper I

(a) 24. HTML இல் ஒரு பட்டியலை (unordered list) உருவாக்க எந்த tag பயன்படுகிறது?
(A) <ol>
(B) <ul>
(C) <li>
(D) <dl> (1 புள்ளி)
(b) 25. HTML இல் ஒரு image ஐ web page இல் காட்ட எந்த tag பயன்படுகிறது?
(A) <picture>
(B) <photo>
(C) <img>
(D) <image> (1 புள்ளி)
(c) 26. HTML document இன் சரியான அமைப்பு (structure) எது?
(A) <html><head><title></title></head><body></body></html>
(B) <head><html><body></body></html></head>
(C) <body><html><head></head></html></body>
(D) <title><html><head></head><body></body></html></title> (1 புள்ளி)
(d) 35. HTML இல் அட்டவணை (table) உருவாக்க எந்த குறிச்சொல் (tag) பயன்படுகிறது?
(A) <table>
(B) <tab>
(C) <tbl>
(D) <tr>

HTML இல் அட்டவணை உருவாக்க எந்த tag பயன்படுகிறது? (1 புள்ளி)
(e) 36. HTML இல் படத்தை (image) சேர்க்க எந்த குறிச்சொல் (tag) பயன்படுகிறது?
(A) <img src="">
(B) <image src="">
(C) <pic src="">
(D) <photo src="">

HTML இல் படம் சேர்க்க எந்த tag பயன்படுகிறது? (1 புள்ளி)
(f) 37. CSS இல் font-size: 16px; என்பது என்னை குறிக்கிறது?
(A) எழுத்துரு (font) நிறம்
(B) எழுத்துரு அளவு (font size) 16 pixels
(C) எழுத்துரு உடையை (font style)
(D) எழுத்துரு சாய்வை (font italic)

CSS இல் font-size: 16px; என்பது என்ன செய்கிறது? (1 புள்ளி)

Paper II — கட்டமைப்பு வினாக்கள் (Structured Questions)
Web Design (HTML/CSS) பயிற்சி — 2021.

G.C.E. O/L 2021 — Paper II

(a) COVID-19 இலங்கையில் தடுப்பூசி திட்டம் பற்றிய வலைப்பக்கத்தை (HTML) உருவாக்க வேண்டும்.

Sri Lanka\'s strong vaccination programme assisted in controlling COVID-19
• Progress of COVID-19 Immunization as of 11.04.2021

வகை | தொகை
First Dose | 77.6%
Second Dose | 63.9%
Boostered Dose | 19.9%

• Monthly Covid 19 active cases in Sri Lanka from 2020 to 2022
<img src=\'active_cases.png\' width=\'400\' height=\'14\'>

For further information: World Health Organization - http://www.who.int/srilanka

(a)(i) மேலே உள்ள HTML குறியீட்டை மதிப்பாய்வு செய்க. அதில் பயன்படுத்தப்பட்ட 5 HTML குறிச்சொற்களை (tags) பட்டியலிடுக.
(ii) <h1> மற்றும் <h6> குறிச்சொற்களுக்கு இடையே உள்ள வேறுபாடு என்ன?
(iii) HTML பக்கத்தில் ஒரு படத்தை (image) சேர்க்க HTML குறியீட்டை எழுதவும்.
(iv) HTML அட்டவணையில் தலைப்பு (table header) குறிக்க பயன்படும் குறிச்சொல் எது?

(b) பின்வரும் HTML கட்டமைப்பை (structure) நிரப்பவும்:
<html>
<ஆ>
<தலைப்பு>...</தலைப்பு>
</ஆ>
<இ>
...
</இ>
</html> (8 புள்ளி)

Paper II — கட்டமைப்பு வினாக்கள் (Structured Questions)
Web Design (HTML/CSS) பயிற்சி — 2023.

G.C.E. O/L 2023 — Paper II

(a) 7. (a) கீழே கொடுக்கப்பட்ட HTML code ஐ கவனிக்கவும்:

<!DOCTYPE html>
<html>
<head>
<title>Renewable Energy for sustainable development. Sri Lanka will teach</title>
</head>
<body>
<h1>Renewable Energy for Sri Lanka</h1>
<h2>Types of Renewable Energy</h2>
<p>Renewable energy sources are important for sustainable development. Sri Lanka will teach</p>
<ul>
<li>Solar energy</li>
<li>Wind energy</li>
<li>Hydro energy</li>
<li>Biomass energy</li>
<li>Thermal energy</li>
</ul>
<h3>Some challenges and solutions for renewable energy adoption:</h3>
<table border="1">
<tr><th>Challenge</th><th>Solution</th></tr>
<tr><td>High initial cost</td><td>Providing renewable energy solutions</td></tr>
<tr><td>Variable energy production</td><td>Providing energy storage solutions</td></tr>
</table>
<p>For more details: <a href="www.nce.com">National Green Energy</a></p>
</body>
</html>

(i) மேற்கூறிய HTML page browser இல் தோன்றும்போது காட்டப்படும் heading ஆனது எந்த உரை (text) ஆக இருக்கும்?
(ii) <ul> மற்றும் <ol> tags இன் வேறுபாட்டை விளக்குக.
(iii) table இல் border="1" என்பதன் பொருள் என்ன?
(iv) hyperlink ஐ குறிப்பிட எந்த tag பயன்படுகிறது? அதன் syntax எழுதுக.

(b) CSS (Cascading Style Sheets) பயன்படுத்துவதன் நன்மைகளை இரண்டு குறிப்பிடுக.

(c) HTML உரை வடிவமைப்பு (text formatting) tags ஐந்தை எழுதி அவற்றின் பயன்பாட்டை விளக்குக. (10 புள்ளி)
(b) 8. (a) (i) HTML form உருவாக்க பயன்படும் tags ஐ பட்டியலிட்டு விளக்குக.
(ii) CSS இல் class selector மற்றும் id selector இன் வேறுபாட்டை விளக்குக.
(iii) Responsive web design என்றால் என்ன?

(b) கீழ்க்கண்ட வலைத்தளம் (website) அம்சங்களை (features) CSS மூலம் எவ்வாறு செய்வீர்கள் என்று விளக்குக:
(i) heading ஒன்றின் நிறம் (color) சிவப்பாக (red) மாற்றுவது
(ii) paragraph இன் font size 16px ஆக மாற்றுவது
(iii) body background color மஞ்சளாக (yellow) மாற்றுவது (8 புள்ளி)

Paper II — கட்டமைப்பு வினாக்கள் (Structured Questions)
Web Design (HTML/CSS) பயிற்சி — 2024.

G.C.E. O/L 2024 — Paper II

(a) 6. பின்வரும் இணையதளம் (website) ஐ கவனியுங்கள்:

Explore Sri Lanka: the tropical paradise
[வலைத்தள படம் - Sri Lanka tourist website]

Sri Lanka is a tropical paradise, offering golden beaches, beautiful hills, lush forests, warm hospitality, delicious food and rich culture.

Top tourist destinations in Sri Lanka:
1. Explore Sri Lanka Home (இணைப்பு)
2. Sigiriya (triangle bullet)
3. Temple of the Tooth (circle bullet)
4. Yala National Park
5. Galle Fort

best travel: http://www.notravel.lk | Lanka Budget Travels

(i) மேற்கண்ட வலைத்தளப் பக்கத்தை (web page) HTML மூலக்கோடு (HTML source code) மூலம் உருவாக்குங்கள். பின்வரும் HTML கட்டமைப்பை (structure) பயன்படுத்துங்கள்:
- தலைப்பு (h1): Explore Sri Lanka: the tropical paradise
- பத்தி (p): Sri Lanka விவரம்
- க்ரமப்படுத்தாத பட்டியல் (unordered list) உடன் top tourist destinations
- இணைப்பு (hyperlink): http://www.notravel.lk

(ii) மேற்கண்ட HTML பக்கத்தில் CSS பயன்படுத்தி:
- background-color: light blue
- font-size: 16px
- color: dark green
என்று அமைக்கவும்.

(iii) Sigiriya மற்றும் Temple of the Tooth ஆகியவற்றிற்கு வெவ்வேறு bullet வகைகளை (bullet types) காட்டும் HTML code எழுதுங்கள்.

(iv) best travel இணைப்பை (hyperlink) HTML இல் எப்படி குறிப்பிடுவீர்கள்?

(v) HTML ஆவணத்தின் அடிப்படை கட்டமைப்பை (basic structure) விளக்கவும். (20 புள்ளி)

✅ விரைவுச் சோதனை (Quick Check)

முக்கிய புள்ளிகளை உறுதிப்படுத்த — தவறான விடைகள் உங்கள் தவறுப் புத்தகத்தில் சேமிக்கப்படும்.

📝 மேலும் பயிற்சி (Practice more)