📘 M2-R5 – Web Designing & Publishing Practical Question Paper (PDF with Solution)

Agar aap O Level ka M2-R5 (Web Designing & Publishing) module prepare kar rahe ho, to yahaan se aap sabhi previous year ke practical papers PDF format me, solutions ke sath download kar sakte ho or practical paper ke questions bhi read kar sakte ho. Ye sab papers NIELIT ke latest pattern ke according hain, aur completely free hain.

🔍 M2-R5 Practical Paper Me Kya Aata Hai?

Is module me aapko HTML, CSS aur web design ke basic tools ka use karke practical tasks diye jaate hain. Yeh exam aapki web development ki basic skills check karta hai.

Exam Pattern Highlights:

HTML se structure banana
CSS se styling karna
Tables, forms aur multimedia (images, video) ka use
Final web page ka output browser me preview
Files ko host karne ke basic steps (optional)

🧩 Topics Jo Practical Me Puchhe Jaate Hain

HTML Tags (heading, paragraph, image, link, list, table)
CSS (inline, internal) – colors, fonts, spacing
Forms – input, checkbox, radio, button
Web page layout with sections & styling
Multimedia integration (image/video)
Uploading files aur zip karna (kabhi-kabhi diya jata hai)

📥 M2-R5 Practical Papers PDF Download (With Solution)

Yahan niche diye gaye table me aapko M2-R5 ke sabhi practical paper PDF format me milenge. Har ek paper ke sath solution bhi diya gaya hai jisse aap samajh sako ki answer kaise likhna hota hai:

📄 Paper	🔗 Download Link
M2-R5 Practical Set 1	Download PDF
M2-R5 Practical Assignment	Download PDF

📝 Note: Agar koi link kaam nahi kar raha, to aap Comment kar sakte ho.

🧪 O Level M1-R5 Practical Questions with Solution

Is module ke exam me aksar aise practical tasks diye jaate hain jisme aapko HTML aur CSS ka use karke web pages design karne hote hain. Isiliye humne kuch important practice questions with solution bhi include kiye hain jo aapko actual paper pattern samajhne me madad karenge. Inhe karte waqt aapko tag use, layout design aur styling ka real-time experience milega.

Question: 1.
Write a HTML program to design a form which should allow to enter your personal data ( Hint: make use of text field, password field, e-mail, lists, radio buttons, checkboxes, submit button).

Code:

<!doctype html>
<html>
<head>
<title>Form</title>
</head>
<body bg-color="yellow">
<form align="center">
Name: <input type="text" name="Name"><br><br>
Password :<input type="password" name="psw"> <br><br>
Email-Id :<input type="email"> <br><br>
List :<ol><li>IT tools</li>
<li>Web Design</li>
<li>Python</li>
<li>lot</li>
</ol><br><br>
Gender: Male <input type="radio" value="Male" name="gender">
Female <input type="radio" value="Female" name="gender"> <br><br>
Qualification : 10th <input type="checkbox" name="Qlfy" value="10th">
12th <input type="checkbox" name="Qlfy" value="12th"><br><br>
<button Value="Submit">Submit</button>
</form>
</body>
</html>

Output:

Question: 2.
Write Html 5 code with CSS as follows-

To create form to accept name,age, email address, from the user.
Create a submit button to send the data.
The heading of the form should have a background colour and a different font style.

Code:

<html>
<head>
<style>
h1
{
font-family: Cambria;
background-color: Black;
color: White;
text-align: center;
}
</style>
</head>
<body>
<h1>HTML Forms</h1>
<form>
<b>
Name:
<input type=”text” id=”name” name=”name” placeholder=”Name”><br><br>
Age:
<input type=”text” id=”age” name=”age” placeholder=”Age” ><br><br>
E-mail:
<input type=”text” id=”email” name=”email” placeholder=”E-mail” ><br><br>
<input type=”submit” value=”Submit”>
</b>
</form>
</body>
</html>

Output:

Questions: 3.
Create an HTML file (e.g. first_page.html) that specifies a page that contains a heading and two paragraphs of text. As the texts in the heading and paragraphs you can use any texts you like.

Code:

<!doctype html>
<html>
<head>
<title>First_Page.html</title>
</head>
<body>
<h1>Web Design</h1>
<p>This is a module of o level.</p>
<p>This is second module of o level.</p>
</body>
</html>

Output:

Question: 4.
Write a HTML Code to create Registration Form.

Code:

<html>
<head>
<title>
Registration Page
</title>
</head>
<body>
<br>
<h1><center><font color=”red”> Registration Form</font></center></h1>
<form><h3> <center>
Firstname <input type=”text” name=”firstname” size=”15″/> <br> <br>
Middlename:
<input type=”text” name=”middlename” size=”15″/> <br> <br>
Lastname:
<input type=”text” name=”lastname” size=”15″/> <br> <br>
Course :
<select>
<option value=”Course”>Course</option>
<option value=”BCA”>BCA</option>
<option value=”BBA”>BBA</option>
<option value=”B.Tech”>B.Tech</option>
<option value=”MBA”>MBA</option>
<option value=”MCA”>MCA</option>
<option value=”M.Tech”>M.Tech</option>
</select>
<br>
<br>
Gender :
<br>
<input type=”radio” name=”male”/> Male <br>
<input type=”radio” name=”female”/> Female <br>
<input type=”radio” name=”other”/> Other
<br>
<br>
Phone :
<input type=”text” name=”country code” value=”+91″ size=”2″/>
<input type=”text” name=”phone” size=”10″/> <br> <br>
Address
<br>
<textarea cols=”80″ rows=”5″ value=”address”>
</textarea>
<br> <br>
Email:
<input type=”email” id=”email” name=”email”/> <br>
<br> <br>
Password:
<input type=”Password” id=”pass” name=”pass”> <br>
<br> <br
Re-type password:
<input type=”Password” id=”repass” name=”repass”> <br> <br>
<input type=”button” value=”Submit”/>
</form>
</body>
</html>

Output:

Questions: 5.
Write html code to generate following output.

1. Coffee
2. Tea
3. Black Tea
4. Green Tea
5. Milk

Code:

<!doctype html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Black Tea</li>
<li>Green Tea</li><li>Milk</li>
</ol>
</body>
</html>

Output:

Question: 6.
Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and outputs HTML text that displays the resulting values in an HTML table format.

Code:

<!DOCTYPE html>
<html>
<head>
  <title>Number Table</title>
</head>
<body>
  <script>
    document.write("<table border='1'>");
    document.write("<tr><th>Number</th><th>Square</th><th>Cube</th></tr>");
    for (var n = 0; n <= 10; n++) {
      document.write("<tr><td>" + n + "</td><td>" + (n * n) + "</td><td>" + (n * n * n) + "</td></tr>");
    }
    document.write("</table>");
  </script>
</body>
</html>

Output:

Question: 7.
Write HTML Code to demonstrate the use of Anchor Tag for the Following: –
1. Creating a web link that opens in a new window.
2. Creating a web link that opens in the same window.
3. Making an image a hyperlink to display second image.

Code:

<!doctype html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
New Window:
<a href="http://google.com" target="_blank">Google.com</a>
Same Window:
<a href="http://google.com" target="_self">Google.com</a>
<br><br>Img Hyperlink :
<a href="C:\Users\datab\OneDrive\Desktop\bhagat ji.jpg">
<img
src="C:\Users\datab\OneDrive\Desktop\led.jpg"></a>
</body>
</html>

Output:

check yourself!

Question: 8.
WAP to print the calculator.

Code:

<!DOCTYPE html>
<html>
<head>
  <title>Simple Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
    }

    .calculator {
      display: inline-block;
    }

    input[type="text"] {
      width: 160px;
      height: 30px;
      font-size: 18px;
      text-align: right;
      margin-bottom: 10px;
    }

    .buttons input[type="button"] {
      width: 35px;
      height: 35px;
      font-size: 16px;
      margin: 3px;
      border: 1px solid black;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div class="calculator">
  <form name="form">
    <input type="text" name="textView" readonly /><br>

    <div class="buttons">
      <input type="button" value="1" onclick="insert(1)">
      <input type="button" value="2" onclick="insert(2)">
      <input type="button" value="3" onclick="insert(3)">
      <input type="button" value="+" onclick="insert('+')"><br>

      <input type="button" value="4" onclick="insert(4)">
      <input type="button" value="5" onclick="insert(5)">
      <input type="button" value="6" onclick="insert(6)">
      <input type="button" value="-" onclick="insert('-')"><br>

      <input type="button" value="7" onclick="insert(7)">
      <input type="button" value="8" onclick="insert(8)">
      <input type="button" value="9" onclick="insert(9)">
      <input type="button" value="*" onclick="insert('*')"><br>

      <input type="button" value="0" onclick="insert(0)">
      <input type="button" value="/" onclick="insert('/')">
      <input type="button" value="=" onclick="equal()">
      <input type="button" value="C" onclick="clearInput()">
    </div>
  </form>
</div>

<script>
  function insert(num) {
    document.form.textView.value += num;
  }

  function equal() {
    var exp = document.form.textView.value;
    if (exp) {
      document.form.textView.value = eval(exp);
    }
  }

  function clearInput() {
    document.form.textView.value = "";
  }
</script>

</body>
</html>

Output:

Question: 9.
Create an html page with following specifications
Title should be about my City. Place your City name at the top of the page in large text and in blue color. Add names of landmarks in your city each in a different color, style and typeface. One of the landmark, your college name should be blinking. Add scrolling text with a message of your choice.

Code:

<!DOCTYPE html>
<html>
<head>
<title>About My City</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}h1 {
}
color: blue;
font-size: 50px;
.landmark {
}
margin: 10px 0;
#college {
Sya
font-size: 24px;
}
font-weight: bold;
color: red;
animation: blink 1s infinite;
@keyframes blink {
}
0%, 100% { opacity: 1; }
50% { opacity: 0; }
.scrolling-text {
}
margin-top: 30px;
color: green;
font-size: 20px;
font-style: italic;
overflow: hidden;
white-space: nowrap;
}
.scrolling-text span {
display: inline-block;
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
}
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
</style>
</head>
<body>
<h1>My City</h1>
<div class="landmark" style="color: orange; font-family: 'Times New
Roman', Times, serif;">
Central Park
</div>
<div class="landmark" style="color: purple; font-family: 'Courier New',
Courier, monospace;">
City Museum
</div>
<div class="landmark" id="college">
My College
</div>
<div class="landmark" style="color: teal; font-family: Verdana, Geneva,
Tahoma, sans-serif;">
Grand Library
</div>
<div class="scrolling-text">
<span>Welcome to My City! Discover the beauty and charm of our
landmarks!</span>
</div>
</body>
</html>

Output:

Question: 10.
WAP to design a form which should allow to enter your personal data.

Code:

<html>
<head>
<title> Admission Form</title>
</head>
<body><center><h1> <font color=red> Welcome To OLevelStudy.com </font></h1></center>
<form>
<table width=”80%” align=”center” border=”2″> <tr><th colspan=”2″>Addmision Form</th></tr>
<tr><td> Full Name:</td>
<td><input type=”text” placeholder=”Enter your Full name”></td></tr>
<tr><td>Select Your Gender</td>
<td><input type=”radio” checked name=”Gender” value=”Male”> Male
<input type=”radio” name=”Gender” value=”Female”> Female</td></tr>

<tr>
<td>Select Course</td>
<td><select> <option value=”0″>–Select Course–</option>
<option value=”MCA”>MCA</option>
<option value=”BCA”>BCA</option>
<option value=”CCC”>CCC</option>
<option value=”DCA”>DCA</option>
<option value=”ADCA”>ADCA</option>
</select></td>
</tr>

<tr><td>Qualifications</td>
<td>
<input type=”checkbox” name=”qly”>10<sup>th</sup> <input type=”checkbox” name=”qly”>12<sup>th</sup>
<input type=”checkbox” name=”qly”>ITI <input type=”checkbox” name=”qly”> Diploma
<input type=”checkbox” name=”qly”>PolyTechnic <input type=”checkbox” name=”qly”> Diploma</td>
<tr><tr> <td>Enter Your Email</td>
<td><input type=”email” name=”email” placeholder=”e.g. [email protected]”></td></tr
<tr>
<td>Create New Password</td> <td><input type=”Password”></td> </tr>
<tr>
<td colspan=”2″ align=”center”>
<input type=”Submit” value=”Submit”>
<input type=”Reset” value=”Reset”></td>
</tr>
</table>
</form>
</body>
</html>

Output:

Questions: 11.
Create an html page containing the polynomial expression as follows:

Code:

a0+ a1x+ a2x 2 + a3 x3.
<span>a<sup>0</sup></span>+
<span>a<sup>1</sup>x</span>+
<span>a<sup>2</sup>x<sup>2</sup></span>+
<span>a<sup>3</sup>x<sup>3</sup></span>its text.

Output:

–

Question: 12.
WAP to print the table like this.

Code:

<html>
<body>
<center>
<table border=”1″ width=”400″ cellpadding=”10px;”>
<tr>
<td align=”right”>Country</td> <td colspan=”2″ align=”center”>Population(In Crores)<tr>

<tr>
<td rowspan=”3″ align=”right”>INDIA</td>
<td align=”right”>1998</td><td align=”right”>85</td></tr>
<tr><td align=”right”>1999</td><td align=”right”>98</td></tr>
<tr><td align=”right”>2000</td><td align=”right”>100</td>
</tr>

<tr>
<td rowspan=”3″ align=”right”>England</td>
<td align=”right”>1998</td><td align=”right”>30</td></tr>
<tr><td align=”right”>1999</td><td align=”right”> 35</td></tr>
<tr><td align=”right”>2000</td><td align=”right”> 48</td>
</tr>

<tr>
<td rowspan=”3″ align=”right”>Srilanka</td>
<td align=”right”>1998</td><td align=”right”>25</td>
</tr>

<tr>
<td align=”right”>1999</td> <td align=”right”>30</td></tr>
<tr><td align=”right”>200</td><td align=”right”>35</td>
</tr>
</table>
</body>
</html>

Output:

Question: 13.
Create an html page with red background with a message “warning” in large size blinking. Add scrolling text “read the message” below it.

Code:

<!DOCTYPE html>
<html>
<head>
<title>warning</title>
<style>
background-color:red;
body{
}
h1{
font-size:95px;
color:yellow;
}
text-align:center;
font-weight:bold;
animation: blink 1s infinite;
@keyframes blink {
0%,100%{opacity:1;}
50%{opacity:0}
}
h3{
color:white;
font-size:35px;
}
</style>
</head>
<body>
<h1>Warning</h1>
<marquee><h3>Read the massage</h3></marquee>
</body>
</html>

Output:

Check yourself!

Question: 14.
To create the HTML document as shown in the question, you need to create one main file named mainfileFrame.html and six separate frame files in the same location.

Code:

mainfileFrame.html

<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows=”20%, 40%, 40%”>
<frame name=”top” src=”frame1.html”>
<frameset cols=”50%, 50%”>
<frame name=”left” src=”frame2.html”>
<frame name=”Right” src=”frame3.html”>
</frameset>
<frameset cols=”,,*”>
<frame name=”left” src=”frame4.html”>
<frame name=”center” src=”frame5.html”>
<frame name=”right” src=”frame6.html”>
</frameset>
</frameset>
</html>

frame1.html

<html>
<body bgcolor=”pink”>
<font face=”Algerian” size=”4″>
First Frame Name and Address
</font>
</body>
</html>

frame2.html

<html>
<body bgcolor=”yellow”>
<font face=”Arial” size=”4″>
This is second frame
</font>
</body>
</html>

frame3.html

<html>
<body bgcolor=”green”>
<font face=”Algerian” size=”4″>
This is Third Frame
</font>
</body>
</html>

frame4.html

<html>
<body bgcolor=”green”>
<font face=”Arial Black” size=”4″>
This is Fourth Frame
</font>
</body>
</html>

frame5.html

<html>
<body bgcolor=”blue”>
<font face=”Arial Black” size=”4″>
This is Fifth Frame
</font>
</body>
</html>

frame6.html

<html>
<body bgcolor=”orange”>
<font face=”Algerian” size=”4″>
This is Sixth Frame
</font>
</body>
</html>

Output:

Questions: 15.
Write a HTML page to print Hello world in bold & Italic Form.

Code:

<!doctype html>
<html>
<head>
<title>HTML Page </title>
</head>
<body>
<i><b>Hello World</b></i>
</body>
</html>

Output:

Check yourself!

✅ M2-R5 (Web Designing) ke liye Viva MCQ:

🔎 Note: Web Designing ke practical ke baad viva me HTML, CSS, hosting, aur website elements ke basic MCQs puchhe jaate hain. Inhe achhe se practice karne ke liye aap yahaan se full MCQ set access kar sakte hain:
👉 M2-R5 Viva MCQ Practice – Click Here

🧠 Preparation Tips – M2-R5 Practical Ke Liye

✅ Daily 1 HTML + CSS task practice karo
✅ Har tag ko ek baar khud likho, copy-paste se avoid karo
✅ Form design ka structure samajho – input types yaad raho
✅ Web page banane ke baad uska browser output check karo
✅ File ko .zip format me banana bhi practice me lo (agar pucha jaaye to)

❓ FAQs – Students ke Common Sawal

Q1: M2-R5 ke practical me kitne questions aate hain?
Usually 1 ya 2 major web page design tasks diye jaate hain, jisme structure + style dono karna hota hai.

Q2: Kya paper me HTML code likhna hota hai ya banana bhi hota hai?
Aapko HTML + CSS ka code likhna hota hai aur output file ko system me run karna hota hai.

Q3: Kya har bar same pattern follow hota hai?
Haan, har baar pattern similar hota hai. Tag types aur layout change hote hain, lekin base structure same hi rehta hai.

📌 Final Suggestion

M2-R5 module practical me achha score lana hai to:

👉 Har tag aur CSS property ko hands-on try karo
👉 Apne web page ka screenshot lena bhi sikh lo
👉 Practice karte waqt har ek file ko sahi tarike se save karo
👉 Jitne zyada practice sets solve karoge, utna easy lagega exam me

📢 Aap kya karein abhi:

PDFs download karo
Apna folder banao aur practice start karo
Doston ke sath ye link share karo taaki sab ko help ho
Main Practical Page pe wapas jaake baaki modules bhi check karo

“Website banana seekh jaoge, to duniya online dikhne lagegi!”

🔗 Bookmark kar lo ye page – naye papers add hote rahenge!
💬 Koi doubt ho to comment ya contact form ka use karo

🔍 M2-R5 Practical Paper Me Kya Aata Hai?

🧩 Topics Jo Practical Me Puchhe Jaate Hain

📥 M2-R5 Practical Papers PDF Download (With Solution)

🧪 O Level M1-R5 Practical Questions with Solution

✅ M2-R5 (Web Designing) ke liye Viva MCQ:

🧠 Preparation Tips – M2-R5 Practical Ke Liye

❓ FAQs – Students ke Common Sawal

📌 Final Suggestion

Leave a Reply Cancel reply