📚 கற்றல் முதன்மை க.பொ.த. (சா/த) க.பொ.த. (உ/த) பிற 🌐 lang_switch nav_login
O/L · ICT · பயிற்சி · Simple Web Design (HTML/CSS)

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

Simple Web Design (HTML/CSS) — பயிற்சி (P1 MCQ + P2 கட்டமைப்பு)

பத்திரம் I — பஹுத்தெரிவு (Part 1 · MCQ)

10 வினாக்கள் · ஒவ்வொன்றும் 1 புள்ளி · மொத்தம் 10 புள்ளிகள்
பயிற்சி முறை — ஒவ்வொரு விடையையும் தேர்ந்தவுடன் சரியா/தவறா காட்டப்படும்.
📝 முன்னேற்றம் 0 / 10 பதிலளிக்கப்பட்டது
வினா 1 பல்லூடகத் தொழினுட்பத்தைப் பயன்படுத்தி எளிய இணையத்தளங்களை வடிவமைத்தல் · ★★★★★
HTML எனும் சுருக்கப் பெயரின் முழுவடிவம் என்ன?
விளக்கம்: HTML = HyperText Markup Language. இது இணையப் பக்கங்களை எழுதப் பயன்படும் குறியீட்டு மொழி.
வினா 2 பல்லூடகத் தொழினுட்பத்தைப் பயன்படுத்தி எளிய இணையத்தளங்களை வடிவமைத்தல் · ★★★★★
ஒரு HTML ஆவணத்தின் இரண்டு பிரதான பகுதிகள் எவை?
விளக்கம்: <html> ஒட்டுக்குள் <head> (பக்கம் பற்றிய தகவல்) + <body> (காட்டப்படும் உள்ளடக்கம்) இரண்டு பகுதிகள் உள்ளன.
வினா 3 பல்லூடகத் தொழினுட்பத்தைப் பயன்படுத்தி எளிய இணையத்தளங்களை வடிவமைத்தல் · ★★★★★
பின்வருவனவற்றுள் தடித்த எழுத்தைக் (Bold) காட்டப் பயன்படுவது எது?
விளக்கம்: <b> ஒட்டு உரையைத் தடித்தாக்கும். <i> சாய்வு, <u> அடிக்கோடு, <p> பத்தி.
வினா 4 பல்லூடகத் தொழினுட்பத்தைப் பயன்படுத்தி எளிய இணையத்தளங்களை வடிவமைத்தல் · ★★★★★
ஒரு HTML கோப்பினைச் சேமிக்கும்போது தமிழ் எழுத்துக்கள் சரியாகக் காண்பிக்கப்பட எந்த Encoding தேர்வை மாற்ற வேண்டும்?
விளக்கம்: Notepad இல் Save As செய்யும்போது Encoding ஐ Unicode ஆக மாற்றினால் தமிழ் சரியாகக் காண்பிக்கப்படும்.
வினா 5 பல்லூடகத் தொழினுட்பத்தைப் பயன்படுத்தி எளிய இணையத்தளங்களை வடிவமைத்தல் · ★★★★☆
<ol type="I"> எனும் ஒட்டு எவ்வாறு பட்டியலைக் காட்டும்?
விளக்கம்: type="I" → ரோமன் பேரெழுத்து; type="i" → சிற்றெழுத்து; type="A"/"a" → ஆங்கில எழுத்து; type="1" → இலக்கம்.
வினா 6 பல்லூடகத் தொழினுட்பத்தைப் பயன்படுத்தி எளிய இணையத்தளங்களை வடிவமைத்தல் · ★★★★★
மீவரிக் கொளுவி (hyperlink) உருவாக்க பயன்படும் ஒட்டு எது?
விளக்கம்: <a href="..."> கொளுவியை உருவாக்கும். href என்பது இலக்கு URL.
வினா 7 பல்லூடகத் தொழினுட்பத்தைப் பயன்படுத்தி எளிய இணையத்தளங்களை வடிவமைத்தல் · ★★★★★
அட்டவணையில் ஒரு கலத்தை இரண்டு நெடுவரிசைகளில் விரிக்க பயன்படும் பெறுமதி எது?
விளக்கம்: colspan = நெடுவரிசை விரிப்பு; rowspan = வரிசை விரிப்பு.
வினா 8 பல்லூடகத் தொழினுட்பத்தைப் பயன்படுத்தி எளிய இணையத்தளங்களை வடிவமைத்தல் · ★★★★★
<img> ஒட்டில் "src" பெறுமதி எதைக் குறிக்கும்?
விளக்கம்: src = Source. படத்தின் கோப்புப் பெயர் அல்லது URL. alt = மாற்றுப் பாடம்; width = அகலம்.
வினா 9 பல்லூடகத் தொழினுட்பத்தைப் பயன்படுத்தி எளிய இணையத்தளங்களை வடிவமைத்தல் · ★★★★☆
அரச நிறுவனத்தின் இணையத்தளம் பெரும்பாலும் எந்த நீட்சியைக் கொண்டிருக்கும்?
விளக்கம்: .gov = Government (அரசு). .edu கல்வி, .com வணிகம், .org இலாப நோக்கமற்ற நிறுவனம்.
வினா 10 பல்லூடகத் தொழினுட்பத்தைப் பயன்படுத்தி எளிய இணையத்தளங்களை வடிவமைத்தல் · ★★★★★
CMS எனப்படுவது என்ன?
விளக்கம்: CMS = Content Management System. நிரல் எழுதாமல் வரைபட சாளரத்தினூடாகத் தளத்தை நிர்வகிக்கப் பயன்படும் மென்பொருள் (WordPress, Joomla, Kompozer).
↩ பயிற்சி பக்கம் 📚 அலகுகள்

பத்திரம் II — கட்டமைப்பு வினாக்கள் (Part 2 · Structured)

3 வினாத் தொகுப்புகள் · மொத்தம் 46 புள்ளிகள்
உண்மையான பரீட்சை வடிவம் — முதலில் உங்களே விடை எழுதி, பின் “மாதிரி விடை காட்டு” அழுத்தி ஒப்பிடுங்கள்.
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 புள்ளி)
↩ பயிற்சி 📅 பழைய பரீட்சைகள்
📖 இந்த அலகின் பாடம் ↩ எல்லா அலகுகளும்