M2

🌐 NIELIT O Level: M2-R5 Prospectus
Module Name: Web Designing & Publishing
Module Code: M2-R5
Duration: 120 Hours (Theory: 48, Practical: 72)

📑 Syllabus Topics (Kya Seekhenge?)
M2 module ka maqsad aapko ek professional Front-end Web Developer banana hai. Isme aap niche diye gaye topics padhenge:
Introduction to Web Design: Website kaise kaam karti hai, Static vs Dynamic websites, aur Web Servers ka basic.
HTML Basics: Tags, Tables, Frames, Forms, aur HTML5 ke naye features. Yeh website ka dhancha (structure) taiyar karta hai.
CSS (Cascading Style Sheets): Website ko sundar banane ke liye colors, fonts, aur layouts set karna. Isme Box Model aur Flexbox jaise zaroori topics hain.
CSS Framework (W3.CSS): Kam mehnat mein responsive design banane ke liye framework ka use karna.
Adaptive & Responsive Design: Website ko Mobile, Tablet aur Desktop ke hisaab se auto-adjust karna seekhna.
JavaScript & Angular JS: Website mein “jaan” daalna (Logic). Jaise form validation ya buttons par action perform karna.
Photo Editor (GIMP): Website ke liye images ko crop, resize aur optimize karna (Open source tool).
Web Publishing & Browsing: Domain name kharidna, Hosting lena, aur FTP (File Transfer Protocol) ke zariye website live karna.

🚀 Uses (Iska Use Kahan Hoga?)
Is course ke baad aap ye sab kar payenge:
Custom Website Building: Kisi bhi business ya startup ke liye website banana.
Responsive Layouts: Aisi sites banana jo mobile aur computer dono par sahi chalein.
Web Optimization: Purani websites ko naya look aur fast speed dena.
Portfolio Creation: Resume ki jagah apni khud ki live website dikhana.

💼 Job Opportunities (Career Options)
Web designing seekhne ke baad market mein in jobs ki bahut demand hai:
Job Role
Description
Web Designer
Website ka visual look aur layout design karna.
UI Developer
User Interface ko code (HTML/CSS) mein convert karna.
Front-end Developer
Website ka wo hissa banana jise user dekhta hai.
Freelance Web Dev
Ghar baithe projects lekar extra income kamana.
Web Consultant
Purani websites ko modern aur SEO-friendly banana.

🎯 Key Benefits
In-Demand Skill: Duniya digital ho rahi hai, isliye har business ko web designer chahiye.
High Paying: Agar aap HTML/CSS/JS mein expert hain, toh salary package kaafi achha milta hai.
Creativity + Logic: Isme aapko design aur coding dono ka maza milega.

*****************************************************************************************************************************

🌐 M2-R5 Unit 1: Introduction to Web Design (Part 1)

Section 1: Types of Websites & Basics (Questions 1-10)

1. “Static Website” ka mukhya “What” (matlab) kya hai?

  • (A) Jiska content user ke hisaab se badalta rahe.
  • (B) Jiska content hamesha fixed rehta hai aur sirf HTML/CSS se banti hai.
  • Ans: B. (Note: Static sites fast hoti hain par update karna mushkil hota hai.)

2. “Dynamic Website” mein data kahan se aata hai?

  • (A) Sirf HTML file se.
  • (B) Database (jaise MySQL) se, jo user ki request par badalta hai.
  • Ans: B. (Example: Facebook, Amazon, ya News sites.)

3. “E-Commerce Website” ka asali uddeshya kya hai?

  • (A) Sirf photo dekhna. (B) Online products kharidna aur bechna.
  • Ans: B.

4. “Responsive Web Design” (RWD) ka kya matlab hai?

  • (A) Website jo sirf laptop par chale.
  • (B) Website jo har screen size (Mobile, Tablet, Desktop) ke hisaab se apne aap ko adjust kar le.
  • Ans: B.

5. “Personal Blog” kis category mein aata hai?

  • (A) Static ya Dynamic, jahan ek vyakti apne vichaar share karta hai.
  • (B) Sirf Government site.
  • Ans: A.

6. “Portal” aur “Website” mein mukhya antar kya hai?

  • (A) Portal ek bada gateway hai jo bahut saari alag-alag services (email, news, search) ek jagah deta hai (e.g. Yahoo, MSN).
  • (B) Dono bilkul ek hi hain.
  • Ans: A.

7. WWW ka full form kya hai?

  • (A) World Wide Web (B) Web World Wide
  • Ans: A. (Inventor: Tim Berners-Lee).

8. Ek Website ka “Home Page” kya hota hai?

  • (A) Sabse aakhri page. (B) Website ka pehla ya default page.
  • Ans: B.

9. “URL” ka full form kya hai?

  • (A) Uniform Resource Locator (B) Unique Resource Line
  • Ans: A. (Example: https://www.google.com).

10. “Web Server” kya hai?

  • (A) Ek software ya computer jo web pages ko store karta hai aur users ko deliver karta hai.
  • (B) Ek browser ka naam.
  • Ans: A.

Section 2: Front-end vs Back-end (Questions 11-20)

11. “Front-end” application ko aur kya kaha jata hai?

  • (A) Server-side (B) Client-side
  • Ans: B. (Why: Kyunki ye user ke browser par dikhta aur chalta hai.)

12. Front-end development ke liye mukhya “Languages” kaunsi hain?

  • (A) Python, PHP, Java.
  • (B) HTML, CSS, aur JavaScript.
  • Ans: B.

13. “Back-end” ka asali kaam kya hota hai?

  • (A) Website ko sundar dikhana.
  • (B) Server, Database, aur Application logic ko manage karna (Jo user ko nahi dikhta).
  • Ans: B.

14. Back-end development ke liye kaunsi language use hoti hai?

  • (A) CSS (B) PHP, Python, Ruby, ya Node.js.
  • Ans: B.

15. “Full Stack Developer” kise kehte hain?

  • (A) Jo sirf HTML jaanta ho.
  • (B) Jo Front-end aur Back-end dono mein expert ho.
  • Ans: B.

16. Front-end mein “CSS” ka kya role hai?

  • (A) Content likhna. (B) Design, Layout aur Styling karna.
  • Ans: B.

17. Data ko “Store” karne ke liye back-end mein kya use hota hai?

  • (A) Browser (B) Database (jaise MySQL, MongoDB).
  • Ans: B.

18. “User Interface” (UI) kiska hissa hai?

  • (A) Front-end (B) Back-end
  • Ans: A.

19. Agar aapko website ka “Button color” badalna hai, toh aap kahan kaam karenge?

  • (A) Back-end (B) Front-end
  • Ans: B.

20. Agar aapko “User Login” logic likhna hai, toh wo kahan hoga?

  • (A) Front-end (B) Back-end
  • Ans: B.

Quick Comparison Table

FeatureStatic WebsiteDynamic Website
DevelopmentEasy & CheapComplex & Costly
ContentFixed (Hardcoded)Changes (from Database)
Tech UsedHTML, CSSHTML, CSS, JS, PHP, MySQL
Best ForSmall Info SitesE-commerce, Social Media

Section 3: Client-Side vs Server-Side Scripting (Questions 21-40)

21. “Scripting Language” ka asali “What” (matlab) kya hai?

  • (A) Sirf text likhna.
  • (B) Aisi programming languages jo doosre software (jaise Browser) ke andar execute hoti hain aur tasks ko automate karti hain.
  • Ans: B.

22. Client-side scripting kahan execute (run) hoti hai?

  • (A) Web Server par. (B) User ke Web Browser (Chrome, Firefox) par.
  • Ans: B.

23. Sabse popular Client-side scripting language kaunsi hai?

  • (A) PHP (B) JavaScript
  • Ans: B. (Note: JavaScript har modern browser dwara support ki jati hai.)

24. Server-side scripting kahan execute hoti hai?

  • (A) User ke mobile par. (B) Remote Web Server par.
  • Ans: B.

25. Client-side scripting ka mukhya “Why” (fayda) kya hai?

  • (A) Database manage karna.
  • (B) Fast response dena (kyunki server tak nahi jana padta) aur interactivity badhana (jaise form validation).
  • Ans: B.

26. Inme se kaunsi ek Server-side scripting language hai?

  • (A) CSS (B) PHP / Python / ASP.NET
  • Ans: B.

27. “Form Validation” (jaise mobile number check karna) ke liye kaunsi scripting behtar hai?

  • (A) Client-side (JavaScript).
  • (B) Sirf Server-side.
  • Ans: A. (Benefit: Ye user ko turant error dikha deta hai bina page reload kiye.)

28. Database se sensitive data (User password) fetch karne ke liye kya use hota hai?

  • (A) Client-side scripting (B) Server-side scripting
  • Ans: B. (Security: Client-side script ko user dekh sakta hai, par server-side script hidden rehti hai.)

29. Client-side script ka code kaun dekh sakta hai?

  • (A) Koi nahi. (B) Koi bhi user ‘View Page Source’ ya ‘Inspect Element’ karke dekh sakta hai.
  • Ans: B.

30. Server-side script ka result browser ko kis roop mein milta hai?

  • (A) Raw PHP code mein. (B) Plain HTML code mein.
  • Ans: B. (Why: Browser sirf HTML samajhta hai, isliye server script ko process karke HTML mein badal deta hai.)

31. “AJAX” ka use karke hum kya kar sakte hain?

  • (A) Website band karna.
  • (B) Page ko reload kiye bina server se data mangwana (Interactivity badhana).
  • Ans: B.

32. Inme se kaunsa task Server-side scripting ka hai?

  • (A) Button ka color change karna.
  • (B) User ka login verify karna aur session manage karna.
  • Ans: B.

33. Client-side scripting mein “DOM” (Document Object Model) ka kya kaam hai?

  • (A) Internet ki speed badhana.
  • (B) Webpage ke structure aur content ko dynamically change karna.
  • Ans: B.

34. Server-side scripting ke liye kiski zaroorat hoti hai?

  • (A) Sirf Notepad ki. (B) Web Server (jaise Apache, Nginx) aur Language Interpreter ki.
  • Ans: B.

35. Client-side scripting kis par depend karti hai?

  • (A) Server ki RAM par. (B) User ke browser aur uski settings par.
  • Ans: B.

36. “VBScript” kis tarah ki language hai?

  • (A) Client-side (B) Server-side
  • Ans: A. (Lekin ab ye purani ho chuki hai aur sirf IE mein chalti thi.)

37. Node.js kya hai?

  • (A) Ek nayi CSS framework.
  • (B) Ek runtime environment jo JavaScript ko Server-side par chalane ki suvidha deta hai.
  • Ans: B.

38. “Cookies” kahan save hoti hain?

  • (A) Server par (B) Client (Browser) ke computer par.
  • Ans: B.

39. Server-side scripting mein “Scalability” ka kya matlab hai?

  • (A) Website ko chota karna. (B) Zyada users aane par server resources ko handle karna.
  • Ans: B.

40. Kya ek website bina kisi scripting ke chal sakti hai?

  • (A) Haan, par wo sirf static content dikhayegi. (B) Nahi.
  • Ans: A.

Quick Comparison: Client-Side vs Server-Side

FeatureClient-Side (JS)Server-Side (PHP/Python)
ExecutionBrowser (Client Machine)Web Server
View SourceVisible to userHidden from user
Primary UseInteractivity, UI, ValidationDatabase, Security, Logic
SpeedVery Fast (No Server Trip)Slightly Slower (Needs Network)

Section 4: Web Editors (Questions 41-50)

41. Web Editor ka mukhya “What” (kaam) kya hai?

  • (A) Internet chalana.
  • (B) HTML, CSS aur JS code likhne aur manage karne ke liye platform dena.
  • Ans: B.

42. Notepad++ kis tarah ka editor hai?

  • (A) Paid aur Heavy.
  • (B) Open-source, Light-weight aur Free.
  • Ans: B. (Tip: Isme ‘Syntax Highlighting’ ka feature hota hai.)

43. Visual Studio Code (VS Code) kis company ne develop kiya hai?

  • (A) Google (B) Microsoft
  • Ans: B.

44. VS Code mein “Extension” ka kya kaam hota hai?

  • (A) Computer ki speed badhana.
  • (B) Editor mein naye features joddna (jaise Live Server ya Prettier).
  • Ans: B.

45. “WYSIWYG” editor ka full form kya hai?

  • (A) What You See Is What You Get. (B) Web Yields Simple In-line Web Graphics.
  • Ans: A. (Example: Adobe Dreamweaver.)

46. Notepad++ mein “Syntax Highlighting” ka kya fayda hai?

  • (A) Code ko rang-biranga (colorful) dikhana taaki tags aur attributes pehchanne mein asani ho.
  • (B) Code ko automatically delete karna.
  • Ans: A.

47. VS Code mein “IntelliSense” ka kya matlab hai?

  • (A) Smart code completion aur suggestion dena.
  • (B) Internet se code copy karna.
  • Ans: A.

48. “IDE” ka full form kya hai?

  • (A) Integrated Development Environment. (B) Internal Data Editor.
  • Ans: A. (Note: VS Code ek powerful editor hai jo IDE ki tarah kaam karta hai.)

49. HTML file ko save karne ke liye mukhya extension kya hai?

  • (A) .txt (B) .html
  • Ans: B.

50. VS Code mein “Live Server” extension ka kya upyog hai?

  • (A) Browser ko refresh kiye bina code ke badlav (changes) ko turant dekhna.
  • (B) Website ko host karna.
  • Ans: A.

Section 5: HTML5 Basic Structure (Questions 51-60)

51. HTML5 document mein sabse pehli line kya honi chahiye?

  • (A) <html> (B) <!DOCTYPE html>
  • Ans: B. (Why: Ye browser ko batata hai ki ye HTML5 document hai.)

52. HTML document ka sara content (images, text, links) kis tag ke andar hota hai?

  • (A) <head> (B) <body>
  • Ans: B.

53. Webpage ka Title (jo browser tab par dikhta hai) kahan likha jata hai?

  • (A) <head> tag ke andar <title> mein. (B) <body> tag mein.
  • Ans: A.

54. HTML mein “Tags” hamesha kin brackets ke beech hote hain?

  • (A) { } (B) < > (Angle Brackets)
  • Ans: B.

55. “Empty Tag” kise kehte hain?

  • (A) Jiska closing tag nahi hota (jaise <br>, <img>).
  • (B) Jiske beech mein kuch nahi likha hota.
  • Ans: A.

56. HTML5 mein “Metadata” (jaise charset) kahan define kiya jata hai?

  • (A) <meta> tag mein jo <head> ke andar hota hai. (B) Footer mein.
  • Ans: A.

57. lang="en" attribute ka <html> tag mein kya kaam hai?

  • (A) Text ka color badalna. (B) Webpage ki primary language (English) specify karna.
  • Ans: B.

58. HTML elements ko “Case-Sensitive” mana jata hai?

  • (A) Haan (B) Nahi (HTML case-insensitive hai, par lower case behtar mana jata hai.)
  • Ans: B.

59. <body> aur </body> ke beech likha gaya text kahan dikhta hai?

  • (A) Browser ke main window area mein. (B) Sirf search engine mein.
  • Ans: A.

60. Ek sahi HTML structure ka sequence kya hai?

  • (A) HTML -> Head -> Body. (B) Body -> Head -> HTML.
  • Ans: A.

Quick Comparison: Notepad++ vs VS Code

FeatureNotepad++VS Code
SpeedVery Fast (Very Light)Moderate (Heavy)
ExtensionsLimitedHuge Library
Best ForQuick Edits / BeginnersLarge Projects / Professionals
Git IntegrationNo (Plugin needed)Built-in

Section 6: HTML Tags – Headings & Paragraphs (61-70)

61. HTML mein kul kitne levels ki headings hoti hain?

  • (A) 5 (B) 6
  • Ans: B. (H1 se H6 tak).

62. Browser heading tags ko kaise display karta hai?

  • (A) Normal text ki tarah.
  • (B) Bold aur text size ke hisaab se bada (H1 sabse bada, H6 sabse chota).
  • Ans: B.

63. Paragraph shuru karne ke liye kaunsa tag use hota hai?

  • (A) <para> (B) <p>
  • Ans: B. (Browser hamesha paragraph ke pehle aur baad mein thoda space/margin chhodta hai.)

64. <p> tag ke andar line change karne ke liye kya use karte hain?

  • (A) <br> (B) Enter key dabana.
  • Ans: A. (Note: HTML source code mein di gayi extra spaces ya lines ko browser ignore kar deta hai.)

65. Text ko “Bold” karne ke liye HTML5 mein kaunsa semantic tag recommend kiya jata hai?

  • (A) <b> (B) <strong>
  • Ans: B. (Dono bold karte hain, par <strong> ka matlab hai ki text “important” hai.)

66. Text ko “Italic” karne ke liye sahi semantic tag kaunsa hai?

  • (A) <i> (B) <em>
  • Ans: B. (EM stands for Emphasized).

67. <pre> tag ka kya kaam hai?

  • (A) Text ko pre-format karna (Jaisa code mein likha hai, bilkul waisa hi dikhana spaces ke saath).
  • (B) Text ko hide karna.
  • Ans: A.

68. Kis tag ka upyog text ko “Highlighter” ki tarah mark karne ke liye hota hai?

  • (A) <high> (B) <mark>
  • Ans: B. (Default color yellow hota hai).

69. <sub> aur <sup> mein kya antar hai?

  • (A) <sub> subscript (neeche, jaise $H_2O$) aur <sup> superscript (upar, jaise $a^2$) ke liye hota hai.
  • (B) Dono ek hi hain.
  • Ans: A.

70. Heading tags (<h1><h6>) kis tarah ke elements hain?

  • (A) Inline elements (B) Block-level elements
  • Ans: B. (Block-level elements hamesha nayi line se shuru hote hain aur puri width lete hain.)

Section 7: Lists & Images (Questions 71-80)

71. “Bullet points” wali list banane ke liye kaunsa tag use hota hai?

  • (A) <ol> (B) <ul>
  • Ans: B. (UL = Unordered List).

72. Unordered list (<ul>) ka default bullet type kya hota hai?

  • (A) Square (B) Disc (Filled circle)
  • Ans: B.

73. List ke items ko define karne ke liye kaunsa tag use hota hai?

  • (A) <list> (B) <li>
  • Ans: B. (LI = List Item).

74. Ordered list (<ol>) mein numbering badalne ke liye kaunsa attribute use hota hai?

  • (A) start (B) type
  • Ans: B. (Example: type="A" ya type="I").

75. “Description List” banane ke liye mukhya tag kaunsa hai?

  • (A) <dl> (B) <ul>
  • Ans: A. (Isme <dt> term ke liye aur <dd> description ke liye hota hai.)

76. <img> tag mein image ka path dene ke liye kaunsa attribute compulsory hai?

  • (A) href (B) src
  • Ans: B. (SRC = Source).

77. Image ki height aur width specify karte waqt units kya hoti hain (agar na likha ho)?

  • (A) Pixels (px) (B) Percentage (%)
  • Ans: A.

78. Kya <img> tag ek “Container” tag hai?

  • (A) Haan (B) Nahi, yeh ek “Empty” ya “Self-closing” tag hai.
  • Ans: B.

79. Website par “Tooltip” (mouse le jane par text dikhna) dikhane ke liye kaunsa attribute use hota hai?

  • (A) alt (B) title
  • Ans: B.

80. Inme se kaunsa image format transparent background support karta hai?

  • (A) .jpg (B) .png
  • Ans: B.

Quick Tag Recap Table

TagFull Form / PurposeExample
<h1>Heading Level 1<h1>Main Topic</h1>
<p>Paragraph<p>This is a line.</p>
<ul>Unordered ListBullets (Disc, Circle, Square)
<ol>Ordered ListNumbers (1, A, i)
<img>Image<img src="pic.jpg" alt="pic">

Section 8: HTML Tables (Questions 81-88)

81. HTML Table shuru karne ke liye kaunsa tag use hota hai?

  • (A) <tab> (B) <table>
  • Ans: B.

82. Table mein heading cell (jo bold aur center hoti hai) ke liye kya use karte hain?

  • (A) <td> (B) <th>
  • Ans: B. (TH = Table Header).

83. Do ya do se zyada “Columns” ko merge karne ke liye kaunsa attribute use hota hai?

  • (A) rowspan (B) colspan
  • Ans: B.

84. Do ya do se zyada “Rows” ko merge karne ke liye kaunsa attribute use hota hai?

  • (A) colspan (B) rowspan
  • Ans: B.

85. Table ke upar ek chota sa title/description dene ke liye kaunsa tag use hota hai?

  • (A) <head> (B) <caption>
  • Ans: B.

86. Table ke footer section ko group karne ke liye kaunsa tag hota hai?

  • (A) <tfoot> (B) <bottom>
  • Ans: A. (Note: <thead>, <tbody>, aur <tfoot> semantic tags hain.)

87. Table border ki thickness badalne ke liye <table> tag mein kya likhte hain?

  • (A) border="5" (B) thick="5"
  • Ans: A. (Halaki CSS ka use karna behtar mana jata hai.)

88. Ek table row ke andar cell data dalne ke liye tag hai:

  • (A) <tr> (B) <td>
  • Ans: B. (TD = Table Data).

Section 9: Hyperlinks (Questions 89-93)

89. Hyperlink banane ke liye sahi syntax kya hai?

  • (A) <a src="page.html">Link</a> (B) <a href="page.html">Link</a>
  • Ans: B. (HREF = Hypertext Reference).

90. Link ko ek nayi window ya tab mein kholne ke liye kaunsa attribute use hota hai?

  • (A) target="_self" (B) target="_blank"
  • Ans: B.

91. Webpage ke ek hisse se doosre hisse par jane ke liye (Bookmarking) kya use hota hai?

  • (A) id attribute aur link mein # symbol. (B) Sirf URL.
  • Ans: A. (Example: <a href="#top">Go to Top</a>).

92. Email bhejne ke liye link kaise banate hain?

  • (A) <a href="mailto:abc@xyz.com">Email Us</a> (B) <a href="email:abc@xyz.com">
  • Ans: A.

93. Kisi image ko link ki tarah use karne ka sahi tarika:

  • (A) <a href="url"><img src="img.jpg"></a> (B) <img src="img.jpg" link="url">
  • Ans: A.

Section 10: HTML Forms (Questions 94-100)

94. Form ke saare elements kis tag ke andar hote hain?

  • (A) <input> (B) <form>
  • Ans: B.

95. Single-line text input lene ke liye sahi type kya hai?

  • (A) <input type="text"> (B) <input type="box">
  • Ans: A.

96. Password input karte waqt characters ko dots ya stars mein dikhane ke liye type hai:

  • (A) type="secret" (B) type="password"
  • Ans: B.

97. Kai options mein se “Sirf Ek” (Single Choice) chunne ke liye kya use karte hain?

  • (A) Checkbox (B) Radio Button
  • Ans: B. (Tip: Inka name attribute hamesha same hona chahiye.)

98. Multiple options chunne ke liye (Multiple Choice) kya use hota hai?

  • (A) Radio Button (B) Checkbox
  • Ans: B.

99. Badi “Message” ya “Address” field ke liye kaunsa tag behtar hai?

  • (A) <input type="text"> (B) <textarea>
  • Ans: B.

100. Drop-down list (Selection list) banane ke liye tags ka sahi combination kya hai?

  • (A) <select> aur <option> (B) <list> aur <li>
  • Ans: A.

Quick Table Summary: Forms & Tables

ElementTag/AttributeUsage
Merge ColscolspanTable cells ko horizontal joddna
External Linktarget="_blank"Naye tab mein link kholna
Radio Buttontype="radio"Single choice selection
Text Area<textarea>Multi-line input

🎨 M2-R5 Unit 4: CSS3 Basics (Questions 1-20)

Section 1: Introduction & Types of CSS (1-10)

1. CSS ka full form kya hai?

  • (A) Creative Style Sheets (B) Cascading Style Sheets
  • Ans: B.

2. CSS ka mukhya kaam kya hai?

  • (A) Data store karna. (B) Webpage ke layout aur appearance ko control karna.
  • Ans: B.

3. HTML tag ke andar style attribute ka use karke likhi gayi CSS ko kya kehte hain?

  • (A) Inline CSS (B) External CSS
  • Ans: A. (Example: <h1 style="color:blue;">)

4. <head> section mein <style> tag ke andar likhi gayi CSS ko kya kehte hain?

  • (A) Internal/Embedded CSS (B) Inline CSS
  • Ans: A.

5. Alag se .css file banakar use HTML mein link karne ko kya kehte hain?

  • (A) Internal CSS (B) External CSS
  • Ans: B. (Tip: Yeh sabse behtar tarika mana jata hai badi websites ke liye.)

6. External CSS file ko HTML mein kis tag se link kiya jata hai?

  • (A) <style> (B) <link>
  • Ans: B. (Syntax: <link rel="stylesheet" href="style.css">)

7. Inme se sabse zyada “Priority” (varchasva) kis CSS ki hoti hai?

  • (A) External CSS (B) Inline CSS
  • Ans: B. (Kyunki ye element ke sabse kareeb hoti hai.)

8. CSS file ka sahi extension kya hai?

  • (A) .style (B) .css
  • Ans: B.

9. CSS syntax mein selector kise kehte hain?

  • (A) Wo HTML element jise aap style karna chahte hain.
  • (B) Style ki value ko.
  • Ans: A.

10. CSS mein comment kaise likha jata hai?

  • (A) // comment (B) /* comment */
  • Ans: B.

Section 2: Selectors & Basic Properties (11-20)

11. CSS mein “ID Selector” ke liye kis symbol ka use hota hai?

  • (A) . (Dot) (B) # (Hash)
  • Ans: B. (Example: #header { ... })

12. “Class Selector” ke liye kis symbol ka use hota hai?

  • (A) . (Dot) (B) # (Hash)
  • Ans: A. (Example: .btn { ... })

13. Ek hi page par multiple elements ko ek jaisa style dene ke liye kya behtar hai?

  • (A) ID Selector (B) Class Selector
  • Ans: B. (Kyunki ID unique hoti hai, Class ko repeat kiya ja sakta hai.)

14. Universal Selector (jo saare elements par apply hota hai) kaunsa hai?

  • (A) * (Asterisk) (B) all
  • Ans: A.

15. Text ka color badalne ke liye kaunsi property use hoti hai?

  • (A) text-color (B) color
  • Ans: B.

16. Background color lagane ke liye sahi property kya hai?

  • (A) bg-color (B) background-color
  • Ans: B.

17. Text ko center karne ke liye property hai:

  • (A) align: center (B) text-align: center
  • Ans: B.

18. Font ka size badalne ke liye property hai:

  • (A) text-size (B) font-size
  • Ans: B. (Units: px, em, rem).

19. Font style (jaise Arial, Verdana) badalne ke liye property hai:

  • (A) font-family (B) font-style
  • Ans: A.

20. CSS declaration hamesha kis symbol se end hoti hai?

  • (A) , (Comma) (B) ; (Semicolon)
  • Ans: B.

Quick CSS Hierarchy Table

PriorityCSS TypeDescription
1 (Highest)Inline CSSTag ke andar likhi gayi
2Internal CSS<head> ke andar likhi gayi
3External CSS.css file se linked
4 (Lowest)Browser DefaultBrowser ki apni settings

Section 3: CSS Box Model (Questions 21-30)

21. CSS “Box Model” mein mukhya char elements ka sahi kram (bahar se andar) kya hai?

  • (A) Margin -> Border -> Padding -> Content
  • (B) Content -> Padding -> Border -> Margin
  • Ans: A.

22. “Padding” ka asali kaam kya hai?

  • (A) Border ke bahar space banana.
  • (B) Content aur Border ke beech ki khali jagah (inner space) ko manage karna.
  • Ans: B.

23. “Margin” ka asali kaam kya hai?

  • (A) Element ke border ke bahar ki khali jagah (outer space) ko manage karna.
  • (B) Text ko bold karna.
  • Ans: A. (Tip: Margin do alag elements ke beech doori banata hai.)

24. Agar aap padding: 10px 20px 30px 40px; likhte hain, toh 20px kahan apply hoga?

  • (A) Top (B) Right
  • Ans: B. (Clockwise rule: Top, Right, Bottom, Left).

25. Kis property ka upyog element ki total width aur height mein padding aur border ko include karne ke liye kiya jata hai?

  • (A) box-sizing: border-box;
  • (B) display: block;
  • Ans: A. (Note: Isse layout calculations asaan ho jati hain.)

26. Element ke charo taraf border lagane ki shorthand property kya hai?

  • (A) border: 5px solid red;
  • (B) border-width: 5px;
  • Ans: A. (Order: Width, Style, Color).

27. Border ke konon (corners) ko “Round” (gol) karne ke liye kaunsi property use hoti hai?

  • (A) border-radius (B) corner-curve
  • Ans: A.

28. margin: auto; ka upyog aksar kyu kiya jata hai?

  • (A) Element ko page ke center mein lane ke liye (Horizontal centering).
  • (B) Border hatane ke liye.
  • Ans: A.

29. Inme se kaunsa “Border Style” valid nahi hai?

  • (A) dotted (B) transparent-line
  • Ans: B. (Valid styles: solid, dotted, dashed, double, groove, etc.)

30. Content ki width set karne ke liye property hai:

  • (A) width (B) size
  • Ans: A.

Section 4: CSS Backgrounds (Questions 31-40)

31. Background mein koi image lagane ke liye sahi syntax kya hai?

  • (A) background-image: url('img.jpg');
  • (B) background-image: img.jpg;
  • Ans: A.

32. Agar background image ko repeat hone se rokna ho, toh kya use karenge?

  • (A) background-repeat: no-repeat;
  • (B) background-repeat: stop;
  • Ans: A.

33. Background image ko screen par ek hi jagah “Fix” karne ke liye (taki wo scroll na ho):

  • (A) background-attachment: fixed;
  • (B) background-pin: yes;
  • Ans: A.

34. Background image ka size poore container mein fit karne ke liye property hai:

  • (A) background-size: cover;
  • (B) background-size: full;
  • Ans: A.

35. CSS mein “Linear Gradient” lagane ke liye kaunsi property use hoti hai?

  • (A) background: linear-gradient(direction, color1, color2);
  • (B) color: gradient;
  • Ans: A.

36. Background image ki position (center, top, etc.) set karne ke liye property hai:

  • (A) background-position (B) image-align
  • Ans: A.

37. Kya ek element mein multiple background images lagayi ja sakti hain?

  • (A) Haan, comma (,) se alag karke. (B) Nahi.
  • Ans: A.

38. “Opacity” property ka kya kaam hai?

  • (A) Element ko transparent (paradarshi) banana. (Range: 0.0 to 1.0)
  • (B) Text ko bada karna.
  • Ans: A.

39. rgba(255, 0, 0, 0.5) mein ‘a’ ka kya matlab hai?

  • (A) Alpha (Transparency control). (B) Absolute.
  • Ans: A.

40. Background color ko sirf content tak hi सीमित (limit) rakhne ke liye property:

  • (A) background-clip: content-box; (B) background-origin: content;
  • Ans: A.

Quick Box Model Calculation Example:

Agar ek element ki width: 200px, padding: 10px, aur border: 5px hai, toh uska total space kitna hoga?

  • Total Width = 200 + 10(left) + 10(right) + 5(left) + 5(right) = 230px.

Section 5: CSS Text Properties (Questions 41-50)

41. Text ke beech ki khali jagah (spacing) badhane ke liye kaunsi property use hoti hai?

  • (A) word-spacing (B) letter-spacing
  • Ans: B. (Note: word-spacing shabdon ke beech aur letter-spacing aksharon ke beech space deta hai.)

42. Text ko “Underline” karne ke liye sahi property kya hai?

  • (A) text-style: underline; (B) text-decoration: underline;
  • Ans: B. (Tip: Link se underline hatane ke liye text-decoration: none; use hota hai.)

43. Sare text ko “Capital Letters” (UPPERCASE) mein badalne ke liye property hai:

  • (A) text-transform: uppercase; (B) text-convert: capital;
  • Ans: A.

44. “Line Height” property ka mukhya “Why” (fayda) kya hai?

  • (A) Font size badhana.
  • (B) Do lines ke beech ki vertical doori (leading) ko control karna taaki text padhne mein asaan ho.
  • Ans: B.

45. Text ke piche “Shadow” lagane ke liye sahi syntax kya hai?

  • (A) text-shadow: 2px 2px 5px red; (B) shadow-text: red 2px;
  • Ans: A. (Order: Horizontal, Vertical, Blur-radius, Color).

46. Text ko “Bold” karne ke liye font-weight ki value kya ho sakti hai?

  • (A) bold ya 700 (B) heavy
  • Ans: A.

47. “Italic” karne ke liye sahi property kya hai?

  • (A) font-italic (B) font-style: italic;
  • Ans: B.

48. Text ko “Justify” karne ke liye kaunsi property use hoti hai?

  • (A) text-align: justify; (B) align-content: full;
  • Ans: A. (Isse dono sides ke margins barabar ho jate hain.)

49. CSS mein “Indentation” (pehli line ko thoda aage khiskana) ke liye property hai:

  • (A) text-indent (B) margin-left
  • Ans: A.

50. text-overflow: ellipsis; ka kya matlab hai?

  • (A) Text ko gayab karna. (B) Badi line ko kaat kar aakhri mein teen dots (…) dikhana.
  • Ans: B.

Section 6: Fonts & Tables (Questions 51-60)

51. CSS mein “Web Safe Fonts” kise kehte hain?

  • (A) Jo fonts sirf internet se download hote hain.
  • (B) Wo fonts jo lagbhag har computer aur browser par pehle se install hote hain (e.g. Arial, Times New Roman).
  • Ans: B.

52. Agar primary font load na ho, toh backup font dene ko kya kehte hain?

  • (A) Font-backup (B) Font-family (Fallback system)
  • Ans: B. (Example: font-family: Arial, sans-serif;)

53. Google Fonts ko website mein jodne ke liye kiska use hota hai?

  • (A) @import ya <link> tag ka. (B) Sirf Image tag ka.
  • Ans: A.

54. CSS Table mein “Double Border” ko single border mein badalne ke liye property hai:

  • (A) border-collapse: collapse; (B) border-single: yes;
  • Ans: A.

55. Table cells ke beech ki doori (space) set karne ke liye property hai:

  • (A) border-spacing (B) cell-padding
  • Ans: A.

56. Table ke <caption> ki position (Top ya Bottom) badalne ke liye property hai:

  • (A) caption-side (B) text-align
  • Ans: A.

57. “Zebra-Striped” table (ek row dark, ek light) banane ke liye kaunsa selector use hota hai?

  • (A) tr:nth-child(even) (B) tr:all-even
  • Ans: A.

58. Table cells ke andar content aur border ke beech space dene ke liye kya use karte hain?

  • (A) margin (B) padding (TD aur TH par apply karke).
  • Ans: B.

59. CSS mein font-size: 1.2em; ka kya matlab hai?

  • (A) 12 pixels. (B) Parent element ke font size ka 1.2 guna (times).
  • Ans: B.

60. Khali table cells ko chhupane (hide) ke liye property hai:

  • (A) empty-cells: hide; (B) display: none;
  • Ans: A.

Quick Recap: Text vs Font

PropertyPurposeExample
ColorText ka rangcolor: blue;
Font-FamilyWriting styleArial, sans-serif
Text-DecorationUnderline/Nonenone (for links)
Line-HeightVertical spacing1.5

Section 7: CSS Layouts – Display & Float (61-70)

61. CSS mein “Display” property ki default value kya hoti hai (zyadatar elements ke liye)?

  • (A) inline (B) block
  • Ans: B. (Note: <div>, <h1>, <p> block-level hote hain, jabki <span> aur <a> inline hote hain.)

62. display: none; aur visibility: hidden; mein kya antar hai?

  • (A) display: none element ko hata deta hai aur jagah bhi nahi gherta, jabki visibility: hidden element ko chhupa deta hai par jagah gheri rehti hai.
  • (B) Dono bilkul ek jaise hain.
  • Ans: A.

63. Kisi element ko uske parent ke left ya right side “Shift” karne ke liye kya use hota hai?

  • (A) float (B) align
  • Ans: A. (Example: float: left;)

64. Float property ke asar ko khatam karne ke liye (taaki niche wala content overlap na ho) kaunsi property use hoti hai?

  • (A) stop (B) clear
  • Ans: B. (Example: clear: both;)

65. “Inline-block” ka kya fayda hai?

  • (A) Yeh element ko line mein rakhta hai par use Width aur Height dene ki suvidha bhi deta hai.
  • (B) Yeh element ko invisible kar deta hai.
  • Ans: A.

66. “Overflow” property ka kya kaam hai?

  • (A) Content ko bada karna.
  • (B) Jab content apne box se bahar nikalne lage, toh use handle karna (Scrollbar dikhana ya hide karna).
  • Ans: B.

67. Website ka layout banane ke liye “Float” ka upyog ab kam kyu ho gaya hai?

  • (A) Kyunki ab Flexbox aur Grid jaisi behtar technologies aa gayi hain.
  • (B) Kyunki Float mobile par kaam nahi karta.
  • Ans: A.

68. z-index property ka upyog kab kiya jata hai?

  • (A) Elements ki horizontal positioning ke liye.
  • (B) Overlapping elements ka “Stack Order” (kaunsa upar dikhega) tay karne ke liye.
  • Ans: B. (Note: Yeh sirf positioned elements par kaam karta hai.)

69. Block-level element ki width default roop se kitni hoti hai?

  • (A) 0% (B) 100% (Parent container ki poori width).
  • Ans: B.

70. “Box-sizing: border-box” ka sabse bada fayda layout mein kya hai?

  • (A) Padding aur Border ko element ki total width ke andar hi rakhta hai.
  • (B) Background color change karta hai.
  • Ans: A.

Section 8: Positioning & Flexbox (71-80)

71. “Position: static” (Default) ka kya matlab hai?

  • (A) Element normal document flow ke hisaab se position hota hai.
  • (B) Element screen par fix ho jata hai.
  • Ans: A.

72. “Position: relative” ka kya kaam hai?

  • (A) Element ko uski “Original Position” se thoda upar-neeche ya left-right khiskana.
  • (B) Element ko browser window se chipkana.
  • Ans: A.

73. “Position: absolute” element kiske relative position hota hai?

  • (A) Hamesha Browser window ke.
  • (B) Apne sabse kareebi “Positioned” Parent element ke.
  • Ans: B.

74. Website ka “Navigation Bar” ya “Header” scroll karne par bhi upar hi dikhe, iske liye kya use karenge?

  • (A) position: fixed; (B) position: absolute;
  • Ans: A.

75. “Position: sticky” ka kya matlab hai?

  • (A) Yeh Relative aur Fixed ka mishran hai (Ek point tak scroll hota hai phir fix ho jata hai).
  • (B) Yeh hamesha screen ke beech mein rehta hai.
  • Ans: A.

76. “Flexbox” ka mukhya focus kya hai?

  • (A) Sirf text style karna.
  • (B) Ek dimensional (Row ya Column) layout ko flexible aur responsive banana.
  • Ans: B.

77. Flexbox shuru karne ke liye parent container par kya apply karte hain?

  • (A) display: flex; (B) layout: flex;
  • Ans: A.

78. Flex items ko “Horizontally” center karne ke liye kaunsi property use hoti hai?

  • (A) align-items: center; (B) justify-content: center;
  • Ans: B.

79. Flex items ko “Vertically” center karne ke liye kaunsi property use hoti hai?

  • (A) align-items: center; (B) justify-content: center;
  • Ans: A. [Image showing flexbox properties like justify-content and align-items visual guide]

80. flex-direction: column; ka kya matlab hai?

  • (A) Items ek ke upar ek (Vertical) dikhengi.
  • (B) Items ek ke baad ek (Horizontal) dikhengi.
  • Ans: A.

Quick Positioning Summary Table

ValueBehavior
StaticDefault flow, no top/left properties.
RelativeMoves relative to its normal position.
AbsoluteMoves relative to its positioned ancestor.
FixedFixed relative to the viewport (doesn’t scroll).
StickySwitches between relative and fixed based on scroll.

Section 9: W3.CSS Framework Basics (81-90)

81. W3.CSS kya hai?

  • (A) Ek programming language.
  • (B) Ek modern, responsive CSS framework jo website design ko fast banata hai.
  • Ans: B. (Tip: Iske liye kisi JavaScript ya jQuery ki zaroorat nahi hoti.)

82. W3.CSS ko website mein kaise include karte hain?

  • (A) <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  • (B) <script src="w3.css"></script>
  • Ans: A.

83. W3.CSS mein “Responsive Grid” system kitne columns par adharit hota hai?

  • (A) 10 (B) 12
  • Ans: B. (Note: w3-col class ka use karke hum screen ko 12 hisson mein baant sakte hain.)

84. Element mein padding aur container effect dene ke liye kaunsi class use hoti hai?

  • (A) .w3-padding (B) .w3-container
  • Ans: B. (Yeh default 16px left/right padding deta hai.)

85. W3.CSS mein background color badalne ke liye sahi class kaunsi hai?

  • (A) .w3-color-red (B) .w3-red
  • Ans: B.

86. Card jaisa effect (shadow) dene ke liye kaunsi class use hoti hai?

  • (A) .w3-card (B) .w3-shadow
  • Ans: A. (Tip: .w3-card-4 se thodi gehri shadow milti hai.)

87. Text ko center karne ke liye W3.CSS class hai:

  • (A) .w3-text-center (B) .w3-center
  • Ans: B.

88. W3.CSS mein “Mobile-First” ka kya matlab hai?

  • (A) Website sirf mobile par chalegi.
  • (B) Design sabse pehle mobile screens ke liye optimize kiya jata hai aur phir badi screens ke liye.
  • Ans: B.

89. Image ko responsive (screen ke hisaab se fit) banane ke liye class hai:

  • (A) .w3-image (B) .w3-responsive
  • Ans: A.

90. Table ko “Striped” (ek row dark, ek light) banane ke liye class hai:

  • (A) .w3-striped (B) .w3-table-all
  • Ans: A.

Section 10: Responsive Web Design & Media Queries (91-100)

91. Responsive Web Design (RWD) ka mukhya component kya hai?

  • (A) Fluid Grids, Flexible Images, aur Media Queries.
  • (B) Sirf High-speed internet.
  • Ans: A.

92. Media Queries likhne ke liye kis symbol se shuruat hoti hai?

  • (A) @media (B) #media
  • Ans: A.

93. “Viewport” meta tag ka upyog kyu kiya jata hai?

  • (A) Browser ki speed badhane ke liye.
  • (B) Browser ko ye batane ke liye ki website ko screen size ke hisaab se kaise scale karna hai.
  • Ans: B. (Syntax: <meta name="viewport" content="width=device-width, initial-scale=1.0">)

94. Media query mein max-width: 600px ka kya matlab hai?

  • (A) Styles sirf un screens par apply honge jinka size 600px ya usse kam hai.
  • (B) Styles sirf 600px se badi screens par chalenge.
  • Ans: A.

95. Responsive design mein units (%) aur (em/rem) ka upyog kyu kiya jata hai?

  • (A) Kyunki pixels (px) fixed hote hain aur screen ke saath badalte nahi hain.
  • (B) Kyunki ye units sasti hoti hain.
  • Ans: A.

96. “Breakpoints” kise kehte hain?

  • (A) Internet band hona.
  • (B) Wo specific screen widths jahan website ka layout badal jata hai (e.g. 768px for tablets).
  • Ans: B.

97. Inme se kaunsa framework “Bootstrap” ka ek halka (lightweight) alternative hai?

  • (A) W3.CSS (B) JavaScript
  • Ans: A.

98. Responsive design mein “Hamburger Menu” (3 lines) ka upyog aksar kahan hota hai?

  • (A) Desktop navigation mein. (B) Mobile navigation mein (jagah bachane ke liye).
  • Ans: B.

99. W3.CSS mein w3-half class desktop par kitni width leti hai?

  • (A) 100% (B) 50% (Kyunki ye 12 mein se 6 columns leti hai).
  • Ans: B.

100. Kya W3.CSS ko use karne ke liye jQuery library zaroori hai?

  • (A) Haan (B) Nahi, ye pure CSS par adharit hai.
  • Ans: B.

Quick Table: W3.CSS Classes Recap

EffectW3.CSS Class
Shadow/Card.w3-card
Round Corners.w3-round
Grid Column.w3-col
Responsive Table.w3-responsive
Button Color.w3-button .w3-blue

🧠 M2-R5 Unit 6: JavaScript Basics (Questions 1-20)

Section 1: Introduction & Syntax (1-10)

1. JavaScript ka mukhya “Why” (kaam) kya hai?

  • (A) Webpage ko static banana.
  • (B) Webpage ko interactive banana aur client-side logic handle karna.
  • Ans: B.

2. JavaScript code ko HTML mein kis tag ke andar likha jata hai?

  • (A) <js> (B) <script>
  • Ans: B.

3. External JavaScript file ka extension kya hota hai?

  • (A) .java (B) .js
  • Ans: B.

4. JavaScript mein “Variables” declare karne ke liye kaunse keywords use hote hain?

  • (A) var, let, const (B) int, string, float
  • Ans: A. (Note: let aur const modern ES6 features hain.)

5. const keyword ka use kab kiya jata hai?

  • (A) Jab variable ki value ko badalna na ho (Constant).
  • (B) Jab variable ko delete karna ho.
  • Ans: A.

6. Browser ke “Console” mein kuch print karne ke liye kya command hai?

  • (A) document.write() (B) console.log()
  • Ans: B. (Tip: Yeh debugging ke liye sabse zyada use hota hai.)

7. User ko ek “Pop-up message” dikhane ke liye kaunsa function use hota hai?

  • (A) alert() (B) popup()
  • Ans: A.

8. JavaScript “Case-sensitive” language hai?

  • (A) Haan (B) Nahi
  • Ans: A. (Matlab: myVar aur myvar do alag variables hain.)

9. JavaScript mein single-line comment kaise likhte hain?

  • (A) /* comment */ (B) // comment
  • Ans: B.

10. JavaScript ko “Client-side” scripting kyu kehte hain?

  • (A) Kyunki ye user ke browser par execute hoti hai. (B) Kyunki ye server par chalti hai.
  • Ans: A.

Section 2: Data Types & Operators (11-20)

11. JavaScript mein x = "5" + 5; ka result kya hoga?

  • (A) 10 (B) “55”
  • Ans: B. (Concept: Jab string aur number ko + karte hain, toh JavaScript use “Concatenation” kar deta hai.)

12. Inme se kaunsa ek valid Data Type nahi hai?

  • (A) Boolean (B) Float-point (JS mein sirf Number hota hai).
  • Ans: B.

13. typeof operator ka kya kaam hai?

  • (A) Variable ki value check karna. (B) Variable ka data type pata karna.
  • Ans: B.

14. = aur === mein kya antar hai?

  • (A) = value assign karta hai, === value aur data type dono check karta hai (Strict equality).
  • (B) Dono ek hi hain.
  • Ans: A.

15. JavaScript mein “Undefined” ka kya matlab hai?

  • (A) Variable declare kiya gaya hai par value nahi di gayi. (B) Variable delete ho gaya hai.
  • Ans: A.

16. Array ko declare karne ka sahi tarika kya hai?

  • (A) var colors = ["Red", "Green"]; (B) var colors = (1:"Red", 2:"Green");
  • Ans: A. [Image showing JavaScript array structure with index and values]

17. “Null” aur “Undefined” mein kya antar hai?

  • (A) Null ek “intentional” empty value hai, Undefined ka matlab value abhi tak di hi nahi gayi.
  • (B) Dono same hain.
  • Ans: A.

18. JavaScript mein “Increment” operator kaunsa hai?

  • (A) ++ (B) +=
  • Ans: A.

19. User se input lene ke liye kaunsa pop-up function use hota hai?

  • (A) confirm() (B) prompt()
  • Ans: B.

20. JavaScript file ko HTML ke kis section mein link karna behtar mana jata hai?

  • (A) <head> (B) <body> ke bilkul niche (taaki HTML pehle load ho jaye).
  • Ans: B.

Quick Comparison: var vs let vs const

KeywordScopeRe-assignable?
varFunction ScopeHaan
letBlock ScopeHaan
constBlock ScopeNahi

Section 3: Conditional Statements (Questions 21-30)

21. JavaScript mein “if” statement ka sahi syntax kya hai?

  • (A) if x = 5 then (B) if (x == 5)
  • Ans: B. (Condition hamesha parentheses () ke andar hoti hai.)

22. Agar “if” condition galat (false) ho, toh kaunsa block chalta hai?

  • (A) else (B) then
  • Ans: A.

23. Multiple conditions check karne ke liye kiska use hota hai?

  • (A) else if (B) if all
  • Ans: A.

24. “Switch” statement ka use kyu kiya jata hai?

  • (A) Loop chalane ke liye.
  • (B) Ek hi variable ki alag-alag values (cases) ko check karne ke liye.
  • Ans: B. (Tip: Har case ke baad break lagana zaroori hai.)

25. Switch statement mein agar koi bhi case match na ho, toh kya chalta hai?

  • (A) else (B) default
  • Ans: B.

26. “Ternary Operator” (Short-hand if-else) ka symbol kya hai?

  • (A) ? : (B) ??
  • Ans: A. (Example: var result = (age > 18) ? "Adult" : "Minor";)

27. Logical “AND” operator kaunsa hai?

  • (A) || (B) &&
  • Ans: B. (Dono conditions sahi honi chahiye.)

28. Logical “OR” operator kaunsa hai?

  • (A) || (B) &&
  • Ans: A. (Koi bhi ek condition sahi ho toh kaam chal jayega.)

29. if (5 == "5") ka result kya hoga?

  • (A) true (B) false
  • Ans: A. (Kyunki == sirf value check karta hai, data type nahi.)

30. if (5 === "5") ka result kya hoga?

  • (A) true (B) false
  • Ans: B. (Kyunki === value aur data type dono check karta hai.)

Section 4: Loops & Functions (Questions 31-40)

31. “For” loop ka sahi syntax kya hai?

  • (A) for (initialization; condition; increment)
  • (B) for (condition; increment; initialization)
  • Ans: A.

32. “While” loop kab tak chalta hai?

  • (A) Sirf ek baar. (B) Jab tak di gayi condition “true” rehti hai.
  • Ans: B.

33. “Do-While” loop ki khasiyat kya hai?

  • (A) Yeh kabhi nahi chalta.
  • (B) Yeh kam se kam ek baar zaroor chalta hai, chahe condition galat hi kyu na ho.
  • Ans: B.

34. Loop ko beech mein hi rokne (stop) ke liye kaunsa keyword use hota hai?

  • (A) stop (B) break
  • Ans: B.

35. Loop ki current iteration ko skip karke agli iteration par jane ke liye:

  • (A) skip (B) continue
  • Ans: B.

36. JavaScript mein function declare karne ka sahi tarika kya hai?

  • (A) function myFunction() { } (B) def myFunction():
  • Ans: A.

37. Function se koi value wapas bhejne ke liye kaunsa keyword use hota hai?

  • (A) get (B) return
  • Ans: B.

38. “Local Variable” kise kehte hain?

  • (A) Jo function ke bahar declare ho.
  • (B) Jo sirf ek function ke andar declare ho aur wahi use kiya ja sake.
  • Ans: B.

39. JavaScript mein “Events” (jaise button click) par function call karne ke liye attribute hai:

  • (A) onclick (B) onaction
  • Ans: A. (Example: <button onclick="myFunc()">Click Me</button>)

40. “Anonymous Function” kise kehte hain?

  • (A) Jiska koi naam nahi hota. (B) Jo kabhi khatam nahi hota.
  • Ans: A. (Example: var x = function() { ... };)

Quick Loop Comparison Table

Loop TypeWhen to Use?Min. Iterations
ForJab iterations ki sankhya pata ho.0
WhileJab condition par depend karna ho.0
Do-WhileJab kaam kam se kam 1 baar karna ho.1

Section 5: DOM (Document Object Model) Manipulation (41-50)

41. DOM ka full form kya hai?

  • (A) Document Object Model (B) Data Object Management
  • Ans: A. (Concept: Browser webpage ko ek ‘Tree’ structure mein dekhta hai jise DOM kehte hain.)

42. Kisi HTML element ko uski “ID” se pakadne ke liye kaunsa method use hota hai?

  • (A) document.getElementByName() (B) document.getElementById()
  • Ans: B.

43. HTML element ke andar ka text badalne ke liye sahi property kya hai?

  • (A) .innerHTML ya .textContent (B) .changeText
  • Ans: A.

44. JavaScript ke zariye kisi element ka CSS style badalne ka sahi tarika kya hai?

  • (A) element.style.color = "red"; (B) element.color = "red";
  • Ans: A.

45. document.querySelector(".myClass") kya return karega?

  • (A) Saare elements jinki class ‘myClass’ hai.
  • (B) Pehla element jo ‘.myClass’ class se match karta hai.
  • Ans: B. (Tip: Saare elements ke liye querySelectorAll use hota hai.)

46. Naya HTML element create karne ke liye kaunsa method hai?

  • (A) document.createElement() (B) document.newTag()
  • Ans: A.

47. Kisi element ke attribute (jaise image ka src) ko badalne ke liye method hai:

  • (A) setAttribute() (B) changeAttribute()
  • Ans: A.

48. window object aur document object mein kya antar hai?

  • (A) window poora browser tab hai, document uske andar ka webpage content hai.
  • (B) Dono ek hi hain.
  • Ans: A.

49. Event Listener jodne ka sabse modern tarika kaunsa hai?

  • (A) element.addEventListener("click", function)
  • (B) element.onclick()
  • Ans: A. (Benefit: Ek hi element par multiple listeners jode ja sakte hain.)

50. Form submit hone par page reload rokne ke liye kya use karte hain?

  • (A) event.preventDefault() (B) stop.reload()
  • Ans: A.

Section 6: JS Objects & AngularJS Basics (51-60)

51. JavaScript Object declare karne ka sahi tarika kya hai?

  • (A) var person = {name: "Rahul", age: 25};
  • (B) var person = ["Rahul", 25];
  • Ans: A. (Objects curly braces {} mein hote hain.)

52. Object ki property access karne ka tarika kya hai?

  • (A) person.name ya person["name"] (B) person->name
  • Ans: A.

53. AngularJS kya hai?

  • (A) Ek CSS framework.
  • (B) Ek JavaScript-based open-source Front-end framework jise Google ne banaya hai.
  • Ans: B.

54. AngularJS application shuru karne ke liye kaunsa directive use hota hai?

  • (A) ng-app (B) ng-init
  • Ans: A.

55. HTML element ki value ko application data se “Bind” karne ke liye directive hai:

  • (A) ng-model (B) ng-bind
  • Ans: A. (Yeh Two-way data binding ke liye use hota hai.)

56. AngularJS mein “Expressions” kaise likhe jate hain?

  • (A) {{ expression }} (B) [[ expression ]]
  • Ans: A. (Double curly braces).

57. HTML elements ko repeat karne ke liye (jaise list dikhane ke liye) kaunsa directive hai?

  • (A) ng-repeat (B) ng-list
  • Ans: A.

58. AngularJS mein ng-init ka kya kaam hai?

  • (A) Application data ko initialize (shuruaati value dena) karna.
  • (B) Application ko band karna.
  • Ans: A.

59. MVC pattern ka full form kya hai (jo AngularJS use karta hai)?

  • (A) Model View Controller (B) Main Video Coder
  • Ans: A.

60. AngularJS kis tarah ki applications banane ke liye best hai?

  • (A) SPA (Single Page Applications). (B) Sirf Static sites.
  • Ans: A.

Quick Table: Common AngularJS Directives

DirectivePurpose
ng-appAngularJS app ko define/shuru karta hai.
ng-modelInput fields ko variable se connect karta hai.
ng-bindData ko HTML tag ke andar display karta hai.
ng-clickClick event par function chalata hai.

Ab hum M2-R5 Unit 5: Photo Editor ki taraf badhte hain. Exam mein aksar images ko web ke liye optimize karne aur basic editing tools par sawal aate hain.

Yahan Photoshop aur GIMP ke basic concepts par Questions 61 se 80 hain:


Section 7: Photo Editor Basics & Tools (61-70)

61. Web design mein Photo Editor ka mukhya “Why” (zaroorat) kya hai?

  • (A) Code likhne ke liye.
  • (B) Images ko resize karne, optimize karne aur graphics banane ke liye.
  • Ans: B.

62. GIMP ka full form kya hai?

  • (A) General Image Manipulation Program. (B) GNU Image Manipulation Program.
  • Ans: B. (Tip: Yeh ek free aur open-source software hai.)

63. “Raster Image” (jaise Photos) kis se bani hoti hain?

  • (A) Lines aur Curves se. (B) Hazaron chote-chote “Pixels” se.
  • Ans: B.

64. Image ka f फालतू (extra) hissa hatane ke liye kaunsa tool use hota hai?

  • (A) Selection Tool (B) Crop Tool
  • Ans: B.

65. “Lasso Tool” ka upyog kyu kiya jata hai?

  • (A) Seedhi line khinchne ke liye. (B) Free-hand selection banane ke liye.
  • Ans: B.

66. Photo Editor mein “Layers” ka kya fayda hai?

  • (A) Image ki quality kam karna.
  • (B) Alag-alag elements (text, image, shapes) ko bina ek-dusre ko distrub kiye edit karna.
  • Ans: B.

67. Ek jaisa color wala area select karne ke liye sabse fast tool kaunsa hai?

  • (A) Magic Wand Tool (B) Pencil Tool
  • Ans: A.

68. Image ki brightness aur contrast badalne ke liye kahan jana padta hai?

  • (A) Tools menu (B) Image -> Adjustments
  • Ans: B.

69. “Resolution” kya hota hai?

  • (A) Image ki file ka naam. (B) Pixels per inch (PPI), jo image ki clarity tay karta hai.
  • Ans: B.

70. Web ke liye standard resolution kitna mana jata hai?

  • (A) 300 PPI (B) 72 PPI
  • Ans: B. (Note: Print ke liye 300 PPI behtar hota hai.)

Section 8: File Formats & Editing (71-80)

71. Inme se kaunsa format “Lossy Compression” ka example hai?

  • (A) PNG (B) JPEG
  • Ans: B. (Isme file size chota hota hai par thodi quality kam ho jati hai.)

72. Transparancy (khali background) ke liye sabse best format kaunsa hai?

  • (A) JPEG (B) PNG-24
  • Ans: B.

73. GIMP ki default “Project File” ka extension kya hota hai?

  • (A) .psd (B) .xcf
  • Ans: B. (Note: Photoshop ke liye .psd hota hai.)

74. Image ko bina pixels kharab kiye bada karne wali technique ko kya kehte hain?

  • (A) Rasterizing (B) Vector Scaling
  • Ans: B. (Vector images pixels se nahi banti.)

75. “Clone Stamp Tool” ka kya kaam hai?

  • (A) Image ko delete karna. (B) Image ke ek hisse ko copy karke dusre hisse par paint/paste karna.
  • Ans: B. (Tip: Yeh purani photos repair karne ke kaam aata hai.)

76. “Opacity” 0% hone par layer kaisi dikhegi?

  • (A) Poori tarah Invisible (Transparent). (B) Bilkul dark.
  • Ans: A.

77. Text likhne ke liye kaunsa icon/tool use hota hai?

  • (A) Brush Tool (B) Type Tool (T icon)
  • Ans: B.

78. “Feathering” ka kya matlab hai?

  • (A) Selection ke edges (kinaron) ko soft/smooth banana. (B) Image ko rotate karna.
  • Ans: A.

79. Web ke liye image save karte waqt “Optimizing” ka kya matlab hai?

  • (A) High quality aur bade size mein save karna.
  • (B) File size ko kam karna taaki website jaldi load ho sake.
  • Ans: B.

80. GIMP mein image ko JPEG mein badalne ke liye kaunsa option use karte hain?

  • (A) Save As (B) Export As
  • Ans: B.

Quick File Format Guide

FormatTransparencyCompressionBest For
JPEGNahiLossyPhotographs
PNGHaanLosslessLogos, Graphics
GIFHaanLossySmall Animations
SVGHaanN/A (Vector)Icons (Scalable)

Section 9: Web Hosting & Publishing (Questions 81-90)

81. Web Publishing ka asali matlab kya hai?

  • (A) Website ka code likhna.
  • (B) Website files ko web server par upload karna taaki log use internet par dekh sakein.
  • Ans: B.

82. “Domain Name” kya hota hai?

  • (A) Ek computer hardware.
  • (B) Website ka ek unique pata (address) jaise www.nielit.gov.in.
  • Ans: B.

83. DNS ka full form kya hai?

  • (A) Domain Name System (B) Data Network Service
  • Ans: A. (Kaam: Ye domain name ko IP address mein badalta hai.)

84. Files ko local computer se server par bhejne ke liye kaunsa protocol use hota hai?

  • (A) HTTP (B) FTP
  • Ans: B. (FTP = File Transfer Protocol).

85. “Web Hosting” kya hai?

  • (A) Ek tareeka internet chalane ka.
  • (B) Server par wo “Space” (jagah) jahan aapki website ki files store hoti hain.
  • Ans: B.

86. URL ka sahi format kaunsa hai?

  • (A) protocol://domain/path (B) domain/path://protocol
  • Ans: A. (Example: https://www.google.com/search)

87. Inme se kaunsa ek “FTP Client” software ka example hai?

  • (A) FileZilla (B) Notepad++
  • Ans: A.

88. “HTTP” aur “HTTPS” mein mukhya antar kya hai?

  • (A) HTTPS zyada fast hai.
  • (B) HTTPS secure hai kyunki ye data ko encrypt (SSL/TLS) karta hai.
  • Ans: B.

89. .edu extension kis tarah ki website ke liye use hota hai?

  • (A) Commercial (B) Educational
  • Ans: B.

90. “Search Engine” ka mukhya kaam kya hai?

  • (A) Website host karna. (B) Internet par maujood jankari ko index karna aur search karne par dikhana.
  • Ans: B. (Example: Google, Bing, DuckDuckGo).

Section 10: Browsing & Protocols (Questions 91-100)

91. Web Browser ka mukhya kaam kya hai?

  • (A) HTML/CSS code ko interpret karke webpage ki tarah dikhana.
  • (B) Code likhna.
  • Ans: A.

92. Browser mein “Cache” ka kya upyog hai?

  • (A) Password yaad rakhna.
  • (B) Website ke temporary data ko store karna taaki agli baar site jaldi load ho.
  • Ans: B.

93. “Cookie” kya hoti hai?

  • (A) Ek virus.
  • (B) Ek choti text file jo website aapke browser par save karti hai (user preference yaad rakhne ke liye).
  • Ans: B.

94. “IP Address” ka full form kya hai?

  • (A) Internet Protocol (B) Internal Procedure
  • Ans: A. (Example: 192.168.1.1)

95. IPv4 address kitne bits ka hota hai?

  • (A) 32-bit (B) 128-bit
  • Ans: A. (IPv6 128-bit ka hota hai.)

96. Website par “Broken Link” ka kya matlab hai?

  • (A) Wo link jo khulne par 404 Error (Page not found) dikhaye.
  • (B) Wo link jo bahut slow chale.
  • Ans: A.

97. “World Wide Web” (WWW) ke inventor kaun hain?

  • (A) Bill Gates (B) Tim Berners-Lee
  • Ans: B.

98. “Metadata” jo search engines ke liye zaroori hai, wo HTML mein kahan likha jata hai?

  • (A) <head> section mein <meta> tags ke andar.
  • (B) <footer> mein.
  • Ans: A.

99. Server-side par hone wali problem ke liye kaunsa status code aata hai?

  • (A) 404 (B) 500 (Internal Server Error)
  • Ans: B.

100. Ek responsive website banane ke baad uski testing sabse zaroori kahan hai?

  • (A) Sirf ek browser par.
  • (B) Alag-alag browsers aur screen sizes (Cross-browser testing) par.
  • Ans: B.

Quick Revision Table: Protocols & Ports

ProtocolPurposeDefault Port
HTTPWeb page transfer80
HTTPSSecure web transfer443
FTPFile transfer21
DNSDomain to IP53