O Level M2-R5 (PR2) Web Practical Paper Jan 2026 Solved

The NIELIT O Level M2-R5.1 (PR2: Web Designing and Publishing) Practical examination for the January 2026 session was conducted online from 7 February to 13 February 2026 via the NIELIT Practical Portal. In this hands-on examination (80 Marks Lab Coding + 20 Marks Viva), students designed and previewed web pages directly inside the browser-based code editor. Below, you will find the complete January 2026 PR2 practical question paper with clean, ready-to-run source code covering HTML5 forms, frames, and lists, CSS3 styling and selectors, W3.CSS responsive grid and table layouts, and JavaScript client-side validation and DOM events.

All Previous & Practical Papers- Read Papers

O Level M2-R5.1 (PR2) Practical + Viva Question Paper January 2026 (Solved Web Design Lab Code)

Practical Questions

Q. 1. हरे रंग के बैकग्राउंड (Green Background) के साथ एक HTML पेज बनाएँ जिसमें बड़े आकार (Large Size) और ब्लिंकिंग इफेक्ट (Blinking Effect) के साथ “Welcome” संदेश प्रदर्शित हो, तथा उसके नीचे स्क्रॉल होता हुआ टेक्स्ट (Scrolling Text) “Hello World” जोड़ें।
Create an HTML page with a Green background with a message “Welcome” in large size blinking, and add scrolling text “Hello World”.

Q. 2. ＜header＞, ＜section＞ और ＜footer＞ टैग्स का उपयोग करके तीन सेक्शन — Header, Content और Footer — के साथ एक HTML पेज डिज़ाइन करें।
Design an HTML page with three sections — Header, Content, and Footer — using ＜header＞, ＜section＞, and ＜footer＞ tags.

Q. 3. एक HTML फाइल बनाएँ जो तीन इमेजेस (Three Images) को एक के नीचे एक लंबवत रूप में (Stacked Vertically) प्रदर्शित करे और प्रत्येक इमेज के ठीक नीचे उसका लेबल/शीर्षक (Label underneath each image) दिखाई दे।
Create an HTML file that displays three images stacked vertically with a label underneath each.

Q. 4. एक सैंपल रजिस्ट्रेशन फॉर्म वेबपेज बनाएँ जो उपयोगकर्ता से First Name, Last Name, Roll Number, Email ID, Password और Confirm Password एकत्र (Collect) करे। सभी इनपुट फ़ील्ड अनिवार्य (Mandatory) हैं, दर्ज किया गया ईमेल पता सही प्रारूप (Correct Format) में होना चाहिए, और Password तथा Confirm Password टेक्स्ट बॉक्स में दर्ज किए गए मान समान (Same) होने चाहिए। जावास्क्रिप्ट (JavaScript) का उपयोग करके वैलिडेट करने के बाद, जिस टेक्स्ट बॉक्स में त्रुटि (Error) हो उसके ठीक बगल में लाल रंग (Red Color) में उचित एरर संदेश प्रदर्शित करें।
Create a sample form webpage that collects First Name, Last Name, Roll Number, Email ID, Password, and Confirm Password. All inputs are mandatory, the email address entered should be in the correct format, and the values entered in the Password and Confirm Password text boxes should be the same. After validating using JavaScript, display a proper error message in red color just next to the text box where there is an error.

Q. 5. किसी ऑनलाइन बुक स्टोर वेबसाइट (Online Book Store Website) के लिए आवश्यक निम्नलिखित स्टैटिक वेब पेजेस (Static Web Pages) डिज़ाइन करें और उन्हें नेविगेशन लिंक से जोड़ें:
Design static web pages required for an Online Book Store website consisting of:
(a) Home Page (होम पेज — स्टोर हेडर, नेविगेशन लिंक्स और स्वागत संदेश के साथ)
(b) Login Page (लॉगिन पेज — Username, Password और Login बटन के साथ)
(c) Catalogue Page (कैटलॉग पेज — Book Title, Author और Price की तालिका के साथ)

Q. 6. एक वेब एप्लिकेशन/फॉर्म लिखें जो छात्रों के समूह से निम्नलिखित जानकारी प्राप्त करे और डेटा दर्ज होने पर उसे प्रदर्शित/सबमिट करे:
Write an application/form that receives the following information from a set of students and displays/submits the information once the data is entered:
(a) Student ID
(b) Student Name
(c) Course Name
(d) Date of Birth

Q. 7. एक वेब एप्लिकेशन लागू (Implement) करें जो HTML पेज से उपयोगकर्ता का नाम (Name) और आयु (Age) इनपुट में ले। यदि आयु 18 से कम (Age ＜ 18) है, तो पेज पर “Hello ＜Name＞, you are not authorized to visit this site” संदेश प्रदर्शित करे; अन्यथा “Welcome to this site” प्रदर्शित करे।
Implement a web application that takes Name and Age from an HTML page. If the age is less than 18, it should display a message “Hello ＜Name＞, you are not authorized to visit this site”; otherwise, it should display “Welcome to this site”.

Q. 8. निम्नलिखित समस्याओं के लिए पॉप-अप बॉक्स (Pop-up Boxes) और इवेंट हैंडलिंग के साथ जावास्क्रिप्ट (JavaScript) प्रोग्राम विकसित और प्रदर्शित करें:
Develop and demonstrate JavaScript with pop-up boxes and event handling for the following problems:
(a) onclick फंक्शन का उपयोग करके “Display Date” बटन पर क्लिक करने पर टेक्स्ट बॉक्स (Text Box) के अंदर वर्तमान दिनांक और समय (Current Date & Time) प्रदर्शित हो। / Click on “Display Date” button using onclick function to output/display the Date in a text box.
(b) prompt() बॉक्स का उपयोग करके एक संख्या n इनपुट के रूप में प्राप्त करें और alert() बॉक्स का उपयोग करके n संख्याओं का फैक्टोरियल (Factorial of n) आउटपुट में प्रदर्शित करें। / Input a number n obtained using prompt() and output the Factorial of n using alert().

Q. 9. अपने कॉलेज के बुनियादी ढाँचे (College Infrastructure — जैसे Classrooms, Computer Labs, Library, Sports Complex, Auditorium, Cafeteria आदि) का वर्णन करते हुए अपने HTML पेज को आकर्षक लेआउट प्रदान करने के लिए HTML Table का उपयोग करें।
Use tables to provide layout to your HTML page describing your College Infrastructure.

Q. 10. CSS स्यूडो-एलिमेंट्स (Pseudo-elements: ::first-letter, ::first-line, ::before, और ::after) का उपयोग करके किसी एलिमेंट के पहले अक्षर (First Letter) और पहली पंक्ति (First Line) को स्टाइल करने तथा एलिमेंट की सामग्री से पहले (Before) और बाद में (After) कंटेंट इंसर्ट करने के लिए एक HTML और CSS प्रोग्राम लिखें।
Write a program to style the first letter and line of an element and insert content before and after the content of an element using CSS Pseudo-elements.

Q. 11. एक स्टैटिक रजिस्ट्रेशन पेज (Static Registration Page) डिज़ाइन करें और रजिस्ट्रेशन पेज के निम्नलिखित फ़ील्ड्स को वैलिडेट करने के लिए जावास्क्रिप्ट (JavaScript) लिखें:
Design a static Registration Page and write JavaScript to validate the following fields of the registration page:
(a) First Name: इसमें केवल अक्षर (Alphabets) होने चाहिए और इसकी लंबाई 6 अक्षरों से कम नहीं होनी चाहिए। / Name should contain alphabets and the length should not be less than 6 characters.
(b) Password: इसकी लंबाई 6 अक्षरों से कम नहीं होनी चाहिए। / Password should not be less than 6 characters in length.
(c) Email ID: इसमें कोई अमान्य अक्षर नहीं होना चाहिए और यह मानक पैटर्न ([email protected]) का पालन करना चाहिए। / Email ID should not contain any invalid characters and must follow the standard pattern [email protected].
(d) Mobile Number: इसमें केवल 10 अंक (10 Digits) होने चाहिए। / Mobile number should contain 10 digits only.
(e) Last Name and Address: ये फ़ील्ड खाली (Empty) नहीं होने चाहिए। / Last Name and Address should not be empty.

Q. 12. किसी HTML फॉर्म को वैलिडेट करने के लिए जावास्क्रिप्ट कोड लिखें जो कोई भी फ़ील्ड खाली (Empty) रहने पर अलर्ट बॉक्स (Alert Box: “Please fill all fields”) के माध्यम से चेतावनी संदेश प्रदर्शित करे।
Write JavaScript code to validate a form and alert if any field is empty.

Q. 13. विभिन्न कैरेक्टर फॉर्मेटिंग टैग्स — Bold (＜b＞), Italic (＜i＞), Underline (＜u＞), Subscript (＜sub＞) और Superscript (＜sup＞) — को प्रदर्शित करने के लिए एक HTML पेज बनाएँ और सबस्क्रिप्ट व सुपरस्क्रिप्ट की सहायता से निम्नलिखित गणितीय व्यंजक (Expression) लिखें:
Create a page to show different character formatting (Bold, Italic, Underline, Subscript, Superscript) tags and write the following mathematical expression:
log_b (m^p) = p log_b (m)

Q. 14. HTML का उपयोग करके किसी भी दी गई संख्या का फैक्टोरियल (Factorial of any number) ज्ञात करने के लिए एक जावास्क्रिप्ट (JavaScript) प्रोग्राम लिखें।
Write a JavaScript program to calculate the factorial of any number by using HTML.

Q. 15. किसी ई-कॉमर्स वेबसाइट (E-Commerce Website) के रजिस्ट्रेशन फॉर्म के लिए विभिन्न फॉर्म एलिमेंट्स (Form Elements — जैसे fieldset, legend, text box, radio button, date, textarea, select dropdown, submit और reset बटन) का उपयोग करते हुए एक HTML डॉक्यूमेंट बनाएँ।
Create an HTML document using Form elements for a Registration Form of an E-Commerce website.

Q. 16. अपने HTML वेब पेज में ऑडियो (Audio — ＜audio controls＞) और वीडियो (Video — ＜video controls＞) को एम्बेड (Embed) करने के लिए एक HTML प्रोग्राम लिखें।
Write an HTML program to embed Audio and Video into your HTML web page.

Q. 17. rowspan और colspan एट्रिब्यूट्स का उपयोग करके नीचे दी गई संरचना के अनुसार स्टूडेंट मार्क्स टेबल (HTML Table Structure) बनाने के लिए एक HTML प्रोग्राम लिखें:
Write an HTML program to create the following table structure using rowspan and colspan:
[Header Row 1: Enrollment No. (rowspan=”2″) | Name (rowspan=”2″) | Marks (colspan=”2″)]
[Header Row 2: Physics | Chemistry]
[Data Rows: A01, A02, A03 with student names and marks in Physics and Chemistry]

Q. 18. दो संख्याओं के लिए इनपुट फ़ील्ड (Input Fields for two numbers) और जोड़ (Add), घटाव (Subtract), गुणा (Multiply) तथा भाग (Divide) के चार बटनों के साथ जावास्क्रिप्ट-आधारित कैलकुलेटर (JavaScript-based Calculator) बनाएँ।
Create a JavaScript-based calculator with input fields for two numbers and buttons for Add, Subtract, Multiply, and Divide.

Q. 19. ग्रेडिएंट बैकग्राउंड (Gradient Background), हेडिंग पर शैडो टेक्स्ट (Shadow Text / text-shadow) और बटनों पर गोल कोनों (Rounded Corners / border-radius) के साथ किसी वेब पेज को स्टाइल करने के लिए CSS का उपयोग करें।
Use CSS to style a web page with a gradient background, shadow text on headings, and rounded corners on buttons.

Q. 20. विभिन्न श्रेणियों (जैसे Gold Jewellery, Diamond Jewellery, Silver Jewellery) के अंतर्गत उपलब्ध विभिन्न आभूषणों को प्रदर्शित करते हुए किसी ज्वेलरी शॉप (Jewellery Shop) के लिए सुंदर होम पेज के साथ एक आकर्षक वेब पेज डिज़ाइन करें।
Create an interactive and well-designed website/webpage for a Jewellery Shop displaying different jewellery items available under different categories with a beautiful home page.

Q. 21. एक HTML फाइल विकसित और प्रदर्शित करें जिसमें जावास्क्रिप्ट (JavaScript) शामिल हो, जो prompt() बॉक्स का उपयोग करके इनपुट के रूप में एक संख्या n प्राप्त करे और आउटपुट में प्रथम n फिबोनाची संख्याएँ (First n Fibonacci Numbers) प्रदर्शित करे।
Develop and demonstrate an HTML file that includes JavaScript for the following problem:
Input: A number n obtained using prompt()
Output: The first n Fibonacci numbers

Q. 22. एक टू-डू लिस्ट ऐप (To-Do List Web Application) बनाएँ जो उपयोगकर्ताओं को नए टास्क जोड़ने (Add), टास्क को पूर्ण के रूप में चिह्नित करने (Mark tasks as completed — स्ट्राइकथ्रू/लाइन-थ्रू स्टाइल के साथ) और टास्क को हटाने (Delete) की सुविधा दे।
Create a To-Do List app that allows users to add, delete, and mark tasks as completed.

Q. 23. एक HTML पेज लिखें जिसमें 5 देशों (5 Countries — जैसे India, UK, France, Japan, USA) की सूची वाला एक सिलेक्शन ड्रॉपडाउन बॉक्स (Selection Box — ＜select＞) हो। जब उपयोगकर्ता किसी देश का चयन करे या सूची देखे, तो उसकी राजधानी (Capital) प्रदर्शित हो, तथा राजधानी के फॉन्ट गुणों — रंग (Color), बोल्ड (Bold) और फॉन्ट साइज़ (Font Size) — को कस्टमाइज़ करने के लिए CSS का उपयोग करें।
Write an HTML page that contains a selection box with a list of 5 countries. When the user selects a country, its capital should be printed next in the list, and use CSS to customize the properties of the font of the capital (color, bold, and font size).

Q. 24. “Welcome” नाम से एक वेब पेज बनाएँ जिसमें एक बड़ा शीर्षक “Welcome to My Web Page” हो और आपके बारे में वर्णन करने वाले दो पैराग्राफ हों, जिनमें Bold (＜b＞), Italic (＜i＞) और Underline (＜u＞) फॉर्मेटिंग टैग्स का उपयोग किया गया हो।
Create a web page named “Welcome” that includes a large title “Welcome to My Web Page” and two paragraphs describing yourself using Bold, Italic, and Underline formatting.

Q. 25. “Welcome” शब्द को सेंटर अलाइनमेंट (Center Alignment), बड़े फॉन्ट साइज़ (Large Font Size), बोल्ड (Bold) और अंडरलाइन (Underline) के साथ प्रदर्शित करने के लिए HTML और CSS का उपयोग करें, और जब माउस कर्सर उस टेक्स्ट के ऊपर जाए (:hover) तो उसका रंग बदल जाए।
Use HTML and CSS to show the word “Welcome”, apply center alignment, large size, bold, and underline, and change its color when hovering over the text.

Q. 26. निम्नलिखित सूचियों (Lists) के साथ एक HTML डॉक्यूमेंट बनाएँ:
Create an HTML document with the following lists:
(a) अपनी तीन पसंदीदा पुस्तकों (Three Favorite Books) की एक ऑर्डर्ड लिस्ट (Ordered List — ＜ol＞)। / An Ordered List of three favorite books.
(b) अपने शौक (Your Hobbies) की एक अनऑर्डर्ड लिस्ट (Unordered List — ＜ul＞)। / An Unordered List of your hobbies.
(c) सामान्य HTML टैग्स (जैसे ＜h1＞, ＜p＞, ＜a＞, ＜img＞) की एक डेफिनिशन लिस्ट (Definition List — ＜dl＞, ＜dt＞, ＜dd＞)। / A Definition List of common HTML tags (e.g., h1, p, a, img).

Q. 27. सबस्क्रिप्ट (＜sub＞) और सुपरस्क्रिप्ट (＜sup＞) टैग्स का उपयोग करके निम्नलिखित पॉलीनोमियल एक्सप्रेशन (Polynomial Expression) युक्त एक HTML पेज बनाएँ:
Create an HTML page containing the following polynomial expression using Subscript and Superscript tags:
(a₀ + a₁x + a₂x² + a₃x³) / (b₀ + b₁y + b₂y² + b₃y³ + b₄y⁴)

Q. 28. पैराग्राफ (＜p＞) और लिस्ट टैग्स (＜ul＞ / ＜ol＞) का उपयोग करके अपने विभाग (Your Department — जैसे Computer Science Department, Courses Offered और Department Facilities) का वर्णन करते हुए HTML में एक वेब पेज बनाएँ।
Create a web page with HTML describing your Department using paragraph and list tags.

Q. 29. आवश्यक जावास्क्रिप्ट (JavaScript) सहित एक HTML पेज लिखें जो टेक्स्ट फ़ील्ड से 0 से 999 की रेंज में एक संख्या (Number) इनपुट में ले और उसे शब्दों में (In Words — जैसे 123 को “One Hundred Twenty Three”) प्रदर्शित करे। यह 4 अंकों की संख्या, अक्षरों (Alphabets) या विशेष चिह्नों (Special Characters) को स्वीकार नहीं करना चाहिए।
Write an HTML page including any required JavaScript that takes a number from a text field in the range 0 to 999 and shows it in words. It should not accept 4-digit numbers, alphabets, or special characters.

Viva Questions

Q1. 👨‍🏫 Teacher: क्या <!DOCTYPE html> एक HTML टैग है? इसे कोड के सबसे ऊपर क्यों लिखते हैं? (Is <!DOCTYPE html> an HTML tag? Why do we write it at the top?)

👨‍🎓 Student: सर, <!DOCTYPE html> कोई टैग नहीं है, बल्कि एक Declaration है जो ब्राउज़र को बताता है कि यह वेबपेज HTML5 वर्जन में लिखा गया है। (Sir, <!DOCTYPE html> is not an HTML tag; it is a document type declaration that tells the browser the page is written in HTML5.)

Q2. 👨‍🏫 Teacher: HTML में Tag, Element और Attribute में क्या अंतर है? (What is the difference between a Tag, an Element, and an Attribute?)

👨‍🎓 Student: सर, <p> को Tag कहते हैं, ओपनिंग से क्लोजिंग टैग तक के पूरे भाग (<p>Hello</p>) को Element कहते हैं, और ओपनिंग टैग के अंदर दी जाने वाली प्रॉपर्टी (align="center") को Attribute कहते हैं। (Sir, a Tag is <p>, an Element is the complete structure <p>Hello</p>, and an Attribute provides extra properties inside the opening tag like align="center".)

Q3. 👨‍🏫 Teacher: HTML में Empty या Void टैग्स किसे कहते हैं? चार उदाहरण दीजिए। (What are Empty or Void tags in HTML? Give four examples.)

👨‍🎓 Student: सर, जिन टैग्स को बंद करने (Closing Tag) की ज़रूरत नहीं होती उन्हें Empty टैग कहते हैं, जैसे: <br>, <hr>, <img> और <input>। (Sir, Empty tags do not require a closing tag. Four examples are <br>, <hr>, <img>, and <input>.)

Q4. 👨‍🏫 Teacher: HTML में <b> और <strong> तथा <i> और <em> में क्या अंतर है? (What is the difference between <b> vs <strong>, and <i> vs <em>?)

👨‍🎓 Student: सर, <b> और <i> केवल दिखने में टेक्स्ट को बोल्ड और इटैलिक करते हैं, जबकि <strong> और <em> Semantic टैग्स हैं जो सर्च इंजन (SEO) और स्क्रीन रीडर को बताते हैं कि यह टेक्स्ट महत्वपूर्ण है। (Sir, <b> and <i> only style text visually, whereas <strong> and <em> are semantic tags that indicate strong importance to search engines and screen readers.)

Q5. 👨‍🏫 Teacher:<img> टैग के अंदर alt एट्रिब्यूट क्यों लगाया जाता है? (Why do we use the alt attribute inside the <img> tag?)

👨‍🎓 Student: सर, अगर किसी कारण से वेबपेज पर फोटो लोड न हो पाए, तो alt में लिखा टेक्स्ट वहां दिखाई देता है और यह Image SEO में भी मदद करता है। (Sir, the alt attribute displays alternative text if the image fails to load and improves image SEO and screen-reader accessibility.)

Q6. 👨‍🏫 Teacher: HTML टेबल में colspan और rowspan का क्या काम है? (What is the role of colspan and rowspan in an HTML table?)

👨‍🎓 Student: सर, colspan दो या अधिक कॉलम (Columns) को आपस में जोड़ने (Merge) के काम आता है, जबकि rowspan पंक्तियों (Rows) को ऊपर से नीचे मर्ज करता है। (Sir, colspan merges columns horizontally, whereas rowspan merges rows vertically.)

Q7. 👨‍🏫 Teacher: फॉर्म में Radio Button और Checkbox में से कब किसका उपयोग करते हैं? (When do we use a Radio Button vs a Checkbox in a form?)

👨‍🎓 Student: सर, जब कई विकल्पों में से केवल एक विकल्प चुनना हो (जैसे Gender) तब Radio Button लगाते हैं, और जब एक से ज्यादा विकल्प चुनने हों (जैसे Hobbies) तब Checkbox लगाते हैं। (Sir, we use a Radio Button to allow selecting only one option, and a Checkbox to allow selecting multiple options.)

Q8. 👨‍🏫 Teacher: CSS कितने प्रकार से लगाई जाती है और सबसे ज्यादा Priority किसकी होती है? (What are the ways to apply CSS, and which has the highest priority?)

👨‍🎓 Student: सर, CSS 3 तरीकों से लगती है: Inline, Internal और External CSS। इनमें सबसे ज्यादा प्राथमिकता Inline CSS की होती है। (Sir, CSS is applied in 3 ways: Inline, Internal, and External CSS, with Inline CSS having the highest priority.)

Q9. 👨‍🏫 Teacher: CSS में ID (#) और Class (.) सिलेक्टर में क्या अंतर है? (What is the difference between an ID selector and a Class selector?)

👨‍🎓 Student: सर, ID (#) पूरे पेज पर किसी एक यूनिक एलिमेंट को दी जाती है, जबकि Class (.) को कई एलिमेंट्स पर बार-बार लगाया जा सकता है। (Sir, an ID (#) is unique to a single element on a page, while a Class (.) can be reused on multiple elements.)

Q10. 👨‍🏫 Teacher: CSS Box Model के चार मुख्य भाग कौन-से हैं? (What are the four components of the CSS Box Model?)

👨‍🎓 Student: सर, अंदर से बाहर की ओर इसके चार भाग 1. Content, 2. Padding, 3. Border, और 4. Margin हैं। (Sir, from inside out, the four parts are Content, Padding, Border, and Margin.)

Q11. 👨‍🏫 Teacher: JavaScript में तीन पॉप-अप बॉक्स कौन-से हैं और console.log() क्या करता है? (What are the three pop-up boxes in JavaScript and what does console.log() do?)

👨‍🎓 Student: सर, तीन पॉप-अप बॉक्स alert(), confirm() और prompt() हैं, और console.log() का उपयोग कोड की Debugging के लिए ब्राउज़र कंसोल में आउटपुट देखने हेतु होता है। (Sir, the three dialog boxes are alert(), confirm(), and prompt(), while console.log() prints output in the developer console for debugging.)

Q12. 👨‍🏫 Teacher: JavaScript में var, let और const में क्या अंतर है? (What is the difference between var, let, and const?)

👨‍🎓 Student: सर, var फंक्शन-स्कोप्ड है जिसे दोबारा डिक्लेयर कर सकते हैं, let ब्लॉक-स्कोप्ड है जिसकी वैल्यू अपडेट हो सकती है पर री-डिक्लेयर नहीं, और const की वैल्यू कभी बदली नहीं जा सकती। (Sir, var is function-scoped, let is block-scoped and reassignable, and const is block-scoped and cannot be reassigned.)

Hope aapne M2-R5 (PR2) O Level NIELIT January 2026 ke previous practical papers padh liye hain aur samajh bhi liya hai.

आज तक के सभी ओ-लेवल प्रीवियस पेपर्स को पढ़ना, डाउनलोड करना या मॉक टेस्ट देना है तो नीचे दिए गए बटन को दबाइये!

Apna study experience humse neeche comment box mein zarur share karein. Agar aapko koi galti mile to humein batana na bhoolen. 😊