What is CSS (Cascading Style Sheet) | Inline + Internal + External CSS | CSS Full Course #01 — Transcript

Full transcript

1. 0:00हेलो कोडर आर्मी कैसे हैं आप सब लोग? आई
2. 0:02होप आप सब अच्छे होंगे। और आज से हम शुरू
3. 0:06करने वाले हैं अपने सीएसएस को। अभी तक हम
4. 0:09HTML को क्रिएट कर चुके हैं। सीख चुके हैं
5. 0:13अच्छे से और अपने प्रोजेक्ट को डिप्लॉय
6. 0:15करना भी हमें आ चुका है। लेकिन अभी जो
7. 0:18वेबसाइट हम क्रिएट कर रहे हैं वो सुंदर
8. 0:21नहीं लग रही है। ना ही उनके अंदर कोई कलर
9. 0:24प्रेजेंट है ना उसके अंदर कोई फोंट
10. 0:26प्रेजेंट है। वो सिंपल सी एक नॉर्मल सी
11. 0:29वेबसाइट लग रही है जहां पे सिर्फ कंटेंट
12. 0:32लिखा गया है। लेकिन अगर हमें अपनी वेबसाइट
13. 0:36को सुंदर बनाना है तो उसको हम कैसे बना
14. 0:39सकते हैं वही आज हम सीखेंगे। तो चलिए शुरू
15. 0:44करते हैं मौत के खेल को उससे पहले प्लीज
16. 0:46वीडियो को लाइक कर दो और एक कमेंट कर दो
17. 0:50बेस्ट लेक्चर ऑफ सीएसएस। तो चलिए आते हैं
18. 0:53स्क्रीन पे और मैं आज आपको प्रॉमिस करता
19. 0:56हूं। आज आप एक ऐसा कांसेप्ट सीख के जाओगे
20. 0:59जो आपने आज तक नहीं सीखा होगा। चलिए आते
21. 1:03हैं स्क्रीन पर। तो आज हम पढ़ने वाले हैं
22. 1:06सीएसएस के बारे में। सीएसएस की फुल फॉर्म
23. 1:10है कास्केडिंग
24. 1:12स्टाइल शीट। अच्छा भैया ये है इसकी फुल
25. 1:15फॉर्म। पर इसका मतलब क्या होता है? इसका
26. 1:17मीनिंग हम आने वाले लेक्चर में समझेंगे कि
27. 1:19कास्केडिंग का मतलब क्या होता है? स्टाइल
28. 1:21शीट का मतलब ये है कि मुझे अपनी जो भी
29. 1:23एचटीएमl फाइल है उसको मुझे सुंदर बनाना
30. 1:25है। तो चलो सीधा चलते हैं अपने कोड पार्ट
31. 1:27पे और वहीं से सीखना शुरू करते हैं। तो
32. 1:30इसको खोल दिया है मैंने वीएस कोड के अंदर
33. 1:33और इस तरीके से हमारी फाइल नजर आ रही है।
34. 1:35अभी तक हम HTML पढ़ चुके हैं अच्छे से। तो
35. 1:38HTML की सारी फोल्डर को मैं क्लोज़ कर देता
36. 1:40हूं। और अब हम आ जाते हैं आज अपना CSS
37. 1:43फोल्डर बनाना स्टार्ट।
38. 1:46और इसके अंदर आज हम अपनी फर्स्ट फाइल
39. 1:50बनाते हैं जिसका नाम मैं लिख देता हूं
40. 1:52इनलाइनhtml
41. 1:54ओके ये क्यों लिखा अभी मैं आपको समझाता
42. 1:56हूं। देखो दोस्तों इन फाइल को क्रिएट करने
43. 2:00का बहुत सारे तरीके हमारे पास प्रेजेंट है
44. 2:03कि कितने तरीकों से मैं अपनी सीएसएस को
45. 2:06लगा सकता हूं। तो सबसे पहले हम इसके अंदर
46. 2:08अपना बॉईलर प्लेट कोड को ले आते हैं और
47. 2:10यहां पर हम बना रहे हैं एक जिम की
48. 2:12वेबसाइट। तो मैं H1 लिख के लिख देता हूं।
49. 2:15जिम वेबसाइट
50. 2:18और जैसे ही मैंने यह लिखा अब हम आगे का
51. 2:20काम को शुरू करते हैं। तो यहां पर हमारे
52. 2:22पास होगा कि भैया अब एक्सरसाइज यू हैव टू
53. 2:25डू।
54. 2:27तो यहां पे मैं एक अनऑर्डर लिस्ट बना देता
55. 2:29हूं जिसके अंदर मेरे पास लिस्ट के अंदर
56. 2:33एक्सरसाइज प्रेजेंट होंगी कि हम कौन-कौन
57. 2:35सी एक्सरसाइज करेंगे। जैसे बाईसेप्स हो
58. 2:36गई। लेग्स हो गए। हम बताएंगे कि आपको
59. 2:40चेस्ट करना है।
60. 2:42आपको शोल्डर करना है।
61. 2:47और इस तरीके से मैं इसके अंदर अभी कंटेंट
62. 2:49डाले जा रहा हूं बस। और क्या-क्या करते
63. 2:52हैं हम जिम में ट्राइसेप। कौन-कौन बच्चा
64. 2:53जिम जाता है? एक बार कमेंट करके मुझे बता
65. 2:55दो। हां भैया, हम तो जाते हैं। बस बॉडी
66. 2:57नहीं बन रही है। और एक होती है हमारी बैक
67. 2:59की एक्सरसाइज। और डाइट हमें क्या फॉलो
68. 3:02करनी है? उसको भी लिख देते हैं। तो डाइट
69. 3:05का भी हम दो बना देते हैं। एक वेजिटेरियन
70. 3:07के लिए और एक नॉन वेजिटेरियन के लिए।
71. 3:16वेजिटेरियन।
72. 3:20तो यहां पर मैं एक और ऑर्डर लिस्ट बना
73. 3:22देता हूं जिसके अंदर मैं लिख दूंगा कि
74. 3:25भैया अगर आप वेजिटेरियन हो तो आप पनीर खा
75. 3:27सकते हैं,
76. 3:29आप सोया खा सकते हैं
77. 3:32या फिर आप टूफू खा सकते हैं प्रोटीन को
78. 3:34लेने के लिए।
79. 3:37और अगर आप नॉन वेजिटेरियन हो
80. 3:41यह तो ऑलरेडी हम सीख रखे हैं यार।
81. 3:44नॉन वेजिटेरियन अगर आप हो तो आपको क्या
82. 3:47डाइट फॉलो करनी है? तो यहां पे मैं उसको
83. 3:49भी मेंशन कर देता हूं कि भैया आपको चिकन
84. 3:51खाना है।
85. 3:54आपको एग खाने हैं
86. 3:57और आपको क्या खाना है? मटन।
87. 4:01चलिए तो हमने एक वेबसाइट यहां पर क्रिएट
88. 4:03कर दी है जिसको मैं एक बार ओपन विद लाइव
89. 4:05सर्वर अगर करता हूं तो हमें हमारी वेबसाइट
90. 4:08नजर आ जाएगी कि अभी हमारे पास एक सिंपल सी
91. 4:10वेबसाइट है जिसके अंदर कुछ भी डिजाइनिंग
92. 4:12वगैरह नहीं हो रखी है। कोई भी कलर वगैरह
93. 4:14इसके अंदर प्रेजेंट नहीं है। अब मैं इसको
94. 4:16सुंदर कैसे बना सकता हूं। ओके? तो सबसे
95. 4:18पहले हम सीखेंगे कि हम इसके अंदर इनलाइन
96. 4:21सीएसएस कैसे अप्लाई कर सकते हैं। मान लो
97. 4:23ये जिम वेबसाइट जो मैंने लिखा है इसके
98. 4:25बैकग्राउंड कलर को मैं चेंज करना चाहता
99. 4:26हूं। तो देखो अगर मुझे इस पे अगर सीएसएस
100. 4:29अप्लाई करनी है तो मैं यहां पर लिखता हूं
101. 4:31स्टाईल। हां अब यहां पे आपको देना पड़ता
102. 4:33है प्रॉपर्टी का नाम कि भैया आप क्या करना
103. 4:35चाहते हैं? मैं इसके बैकग्राउंड कलर को
104. 4:37देखो आपको उसने खुद ही ऑप्शन दे दिया कि
105. 4:39मैं इसके बैकग्राउंड कलर को क्या बनाना
106. 4:40चाहता हूं? मेरे पास इतने सारे कलर के
107. 4:42ऑप्शन उसने दे दिए। तो मान लो मैंने
108. 4:44सेलेक्ट कर दिया एक्वा। तो मैंने कहा इसके
109. 4:46बैकग्राउंड कलर को क्या बना दूं? एक्वा
110. 4:47बना दो। जैसे ही हम यहां पे आएंगे तो अब
111. 4:49आपकी वेबसाइट का जो हेडिंग है उसका जो
112. 4:52बैकग्राउंड कलर है वो एक्वा कलर का बन
113. 4:54चुका है। तो इसको कहते हैं हम इनलाइन
114. 4:57सीएसएस को अप्लाई करना। ऐसे ही अगर मैं
115. 5:00चाहता हूं कि मेरा H2 है इसके अंदर भी अगर
116. 5:02मुझे सीएसएस अप्लाई करनी है तो स्टाइल का
117. 5:04प्रयोग करो। तो ये हो जाएगी आपको कौन सी
118. 5:06प्रॉपर्टी लगानी है तो प्रॉपर्टी हो गई
119. 5:08मेरा बैकग्राउंड कलर और इसके बैकग्राउंड
120. 5:10कलर को मैं कर देता हूं यह वाला। तो इस
121. 5:12तरीके से इसका बैकग्राउंड कलर भी चेंज हो
122. 5:14गया। तो इसको कहते हैं हम इनलाइन सीएसएस
123. 5:17जहां पर मैं किसी पर्टिकुलर एलिमेंट पे
124. 5:18जाके डायरेक्ट सीएसएस अप्लाई करता हूं उसी
125. 5:22के सामने जाके। ओके? तो ये हो गया हमारा
126. 5:24किसका एग्जांपल? इनलाइन सीएसएस का। मैं
127. 5:26इसका नाम भी लिख देता हूं इनलाइन सीएसएस
128. 5:29ताकि आपको याद रहे। अब इसके अंदर और भी
129. 5:31हमारे आते हैं। क्या-क्या आते हैं? अब
130. 5:34इसके अंदर आता है हमारे पास एक और आता है
131. 5:37इंटरनल सीएसएस। अब इंटरनल सीएसएस हम कैसे
132. 5:40लगाते हैं? उसको भी समझ लेते हैं। तो मैं
133. 5:42इसी कोड को कॉपी पेस्ट कर लेता हूं। कॉपी
134. 5:44किया। यहां पे कर दिया। तो जो मैंने अभी
135. 5:47इनलाइन सीएसएस लगाई थी इसको मैं हटा देता
136. 5:49हूं।
137. 5:50इनलाइन सीएसएस को हटा दो। ओके? और एक और
138. 5:54बना देता हूं फाइल जिसका नाम मैं लिख देता
139. 5:55हूं एक्सटर्नल CSS। तीन टाइप से हम सीएसएस
140. 5:58को लगा सकते हैं। एक्सटर्नल डॉट html
141. 6:02तीन फाइल मैंने बना दी। ओके? तो पहले हम
142. 6:04जानते हैं इंटरनल hटीएमl में हम क्या करते
143. 6:06हैं। ओके? तो यहां पे हम सीएसएस को कैसे
144. 6:08अप्लाई करते हैं? तो आपको यहां पे कुछ
145. 6:10नहीं करना। आपको एक हेड सेक्शन के अंदर
146. 6:12जाके स्टाइल टैग को यूज़ करना है। और अब आप
147. 6:15यहां पे सीएसएस प्रॉपर्टी को लगा सकते
148. 6:16हैं। मान लो मुझे इस जिम वेबसाइट के
149. 6:19बैकग्राउंड कलर को ब्लू करना है। तो कैसे
150. 6:21मैं कर पाऊंगा? तो सबसे पहले मुझे ये जो
151. 6:24एलिमेंट है ये ये तो H1 तो होता है टैग।
152. 6:27हां। और जो ये पूरा होता है इसको हम क्या
153. 6:29कहते हैं? एलिमेंट कहते हैं। तो सबसे पहले
154. 6:31मुझे इसको सेलेक्ट करना पड़ेगा। तभी तो मैं
155. 6:32बता पाऊंगा कि भैया ये जो H1 है इसके
156. 6:35बैकग्राउंड कलर को ब्लू कर दो। तो मैं
157. 6:37यहां पे बोलूंगा भैया आपको सेलेक्ट करना
158. 6:39है तो H1
159. 6:41इसके बैकग्राउंड कलर को क्या कर दो ब्लू
160. 6:44कर दो जो भी मैं इसका करना चाहता हूं तो
161. 6:46जैसे ही मैंने ये किया और इसको अगर मैं
162. 6:48ओपन विद लाइव सर्वर करता हूं तो आप देखोगे
163. 6:50इसके बैकग्राउंड कलर ब्लू मार्क हो चुका
164. 6:53है तो इसको क्या कहते हैं हम इंटरनल
165. 6:55सीएसएस इनलाइन में मैं डायरेक्ट उस
166. 6:58एलिमेंट पे जाके ही सीएसएस लगाता था लेकिन
167. 7:00यहां पे हम कहां पे जा रहे हैं यहां पे
168. 7:02हमने एक शीट बनाई है स्टाइल टैग और यहां
169. 7:04पे सबसे पहले मुझे एच वन के ऊपर अगर
170. 7:05अप्लाई करना है तो सबसे पहले हमें उस
171. 7:07एलिमेंट को सेलेक्ट करना पड़ता है। इस
172. 7:09एलिमेंट को मैंने सेलेक्ट किया और उसके
173. 7:11बाद जो भी मैंने मुझे उसके अंदर प्रॉपर्टी
174. 7:13अप्लाई करनी है उसको मैं लगा सकता हूं कि
175. 7:14प्रॉपर्टी और उसकी वैल्यू हमारी क्या होने
176. 7:16वाली है। ओके हां मान लो मुझे H2 के
177. 7:19बैकग्राउंड कलर को चेंज करना है। तो यहां
178. 7:21पे मैं क्या कर सकता हूं? तो मैं यहां पे
179. 7:22लिख सकता हूं H2। हां। फिर वही पहले H2 को
180. 7:25सेलेक्ट करना पड़ेगा। अब उसके बैकग्राउंड
181. 7:27कलर को मैं जो मार्क करना चाहता हूं। मान
182. 7:28लो इसके बैकग्राउंड कलर को हम करना चाहते
183. 7:30हैं। एंटी वाइट। तो जैसे ही मैंने इसका
184. 7:32एंटीवाइट करा तो आप देखोगे H2 का कलर चेंज
185. 7:35हो चुका है। इसका भी और इसका भी क्योंकि
186. 7:36H2 क्या थे? दो थे। यह भी H2 टैग है। इसका
187. 7:39भी चेंज हो गया और ये भी H2 था। इसका भी
188. 7:41चेंज हो गया। इसलिए आपको दो-दो चेंजज़ दिख
189. 7:43रहे हैं। तो मैंने क्या कहा? H2 के
190. 7:44बैकग्राउंड कलर को क्या कर दो? एंटिक वाइट
191. 7:46कर दो। इतने आसान तरीके से। तो इसको हम
192. 7:48क्या कह देते हैं? इंटरनल सीएसएस। ओके?
193. 7:50हां। अब एक्सटर्नल सीएसएस हम किसको कहते
194. 7:54हैं? अब एक्सटर्नल में हम क्या करते हैं?
195. 7:57हम अपनी इस फाइल में कुछ भी चेंज नहीं
196. 7:59करते। यहां पर हम इसको ऐसे का ऐसा ही रहने
197. 8:01देते हैं। हम एक एक्सटर्नल शीट बनाएंगे एक
198. 8:04अलग से सीएसएस फाइल। तो इसका नाम रख देते
199. 8:07हैं हम स्टाइल डॉट सीएसएस। इस फाइल के
200. 8:10अंदर मैं कोड लिखूंगा सीएसएस का। ओके?
201. 8:12हां। लेकिन पहले मुझे उसको इसके साथ लिंक
202. 8:15कराना पड़ेगा। है ना? क्योंकि इस फाइल को
203. 8:17थोड़ी ना पता है कि ये सीएसएस यहां पे
204. 8:19लिखी गई है। तो सबसे पहले मुझे उसको लिंक
205. 8:21कराना पड़ेगा। तो लिंक मैं जैसे ही
206. 8:22लिखूंगा तो ये होता है रिलेशनशिप। स्टाइल
207. 8:24शीट है हमारी। हां। और उसका आप लिंक दे
208. 8:26दीजिए। तो मैंने बोल दिया स्टाइल डॉट सीS
209. 8:28के साथ मैंने उसको लिंक करा दिया है। अब
210. 8:30सेम वहां पे कि मुझे इस H1 के बैकग्राउंड
211. 8:33को मान लो अब पिंक करना है तो मैं यहां पे
212. 8:36जाऊंगा H1 टैग को सेलेक्ट किया। सबसे पहले
213. 8:38आपको सेलेक्ट करना पड़ता है बैकग्राउंड कलर
214. 8:41और मैंने यहां पे पिंक कर दिया। जैसे ही
215. 8:43आप यहां पे पिंक करते हो एक्सटर्नल ऑल को
216. 8:45देखोगे इसको अगर ओपन विद लाइव सर्वर करोगे
217. 8:47तो आपको दिखेगा इसका जो बैकग्राउंड कलर है
218. 8:49वो पिंक मार्क हो चुका है। सेम मैं आगे भी
219. 8:52कर सकता हूं। मान लो मुझे H2 के
220. 8:55बैकग्राउंड कलर को जो यह H2 है इसके
221. 8:57बैकग्राउंड कलर को अगर चेंज करना है तो
222. 8:59इसको कैसे कर सकता हूं पहले लिखूंगा
223. 9:01बैकग्राउंड कलर और क्या करना चाहता हूं वो
224. 9:04मुझे बोल देगा तो मैंने कर दिया एकमरीन
225. 9:06इसके बैकग्राउंड कलर को कर दो तो आप
226. 9:07देखोगे इसका बैकग्राउंड कलर एक्वामरीन हो
227. 9:09चुका है तो आज हमने देखे कि हम कैसे
228. 9:12इनलाइन सीएसएस को कैसे अप्लाई कर सकते
229. 9:14हैं। बिल्कुल वहीं पे जाके इंटरनल सीएसएस
230. 9:16के हमें स्टाइल टैग का प्रयोग करना पड़ता
231. 9:18है। उसके बाद मैं वहां लिखता हूं और
232. 9:19एक्सटर्नल सीएसएस में मैं एक्स्ट्रा फाइल
233. 9:21बनाता हूं सीएसएस में और वहां पे मैं अपनी
234. 9:23सीएसएस को लिखता हूं। तो ये तीन तरीके हैं
235. 9:27जिससे आप सीएसएस को अपने कोड के अंदर
236. 9:30इंटीग्रेट कर सकते हैं। अब आप बोलोगे भैया
237. 9:33इन तीनों में से बेस्ट मेथड हम कौन सा
238. 9:36इस्तेमाल करते हैं सबसे ज्यादा टाइम? तो
239. 9:38दोस्तों, हम इनलाइन और इंटरनल को बहुत कम
240. 9:42यूज करते हैं। सबसे कम तो इंटरनल वाला ही
241. 9:44आपका यूज होता है। सबसे ज्यादा आप इसी
242. 9:47एक्सटर्नल वाले को यूज़ करेंगे। किसको? इस
243. 9:49एक्सटर्नल वाले को। ऐसा क्यों मैं कह रहा
244. 9:52हूं? देखो यहां पे हम क्या करते हैं? अगर
245. 9:55मैं यहां पे ऐसा लिख रहा हूं। स्टाइल,
246. 9:57बैकग्राउंड, कलर ये। हां। तो अभी तो मैं
247. 9:59यहां पे सिर्फ एक ही प्रॉपर्टी दे रहा
248. 10:00हूं। मान लो मुझे इसके फोंट साइज को अगर
249. 10:02चेंज करना है। 30 पिक्सल कर दिया। फिर
250. 10:05मैंने और भी सीएसएस प्रॉपर्टी यहां पे लगा
251. 10:07दी। तो आपका जो एचटीएमएल फाइल है वो कितनी
252. 10:09क्लटर लगेगी, कितनी भरी-भरी लगेगी। अभी तो
253. 10:12मैंने सिर्फ इस पे लगाया है। फिर मैं इस
254. 10:13पे भी लगाऊंगा। फिर इस पे भी लगाऊंगा। इस
255. 10:15पे भी हर किसी पे अगर मैं लगाते जाऊंगा तो
256. 10:18मेरी जो फाइल होगी उसमें एचटीएमl के अलावा
257. 10:20सीएसएस भी वहीं पे दिख रही है। और कोड
258. 10:22पढ़ना हमारे लिए मुश्किल होता जाएगा।
259. 10:25क्योंकि एक ही वाले के ऊपर हम मल्टीपल
260. 10:27सीएसएस प्रॉपर्टी लगा सकते हैं। अभी तो
261. 10:29मैंने इसके फॉन्ट के साइज को करा। क्या
262. 10:31पता मैं इसमें बॉर्डर लगा दूं, कुछ भी लगा
263. 10:33दूं। तो भाई मेरा कोड यहां पे बढ़ता
264. 10:35जाएगा। सीएसएस यहां पे बढ़ती जाएगी। इसलिए
265. 10:37हम इसको प्रेफर नहीं करते। ओके? हां,
266. 10:39क्विक चेक के लिए हम इसका इस्तेमाल करते
267. 10:41हैं कि कभी-कभी मैं नहीं चाहता यार
268. 10:42एक्सटर्नल फाइल बनाऊं। थोड़ा-मोटा मुझे
269. 10:44चेंजेस को देखना है। उसके लिए मैं सिर्फ
270. 10:46इनलाइन एचटीएमएल का यूज़ कर लेता हूं।
271. 10:48सॉरी इनलाइन सीएसएस का इस्तेमाल कर लेता
272. 10:50हूं। ओके। अब इसका प्रयोग क्यों नहीं
273. 10:52करते? अब इसका प्रयोग इसलिए नहीं करते।
274. 10:54सेम वही एक तो आप इसी फाइल के अंदर चेंजज़
275. 10:56कर रहे हैं। हां भैया पर ये कोड तो साफ
276. 10:58है। पर अगर आप इसकी और इसकी एडवांटेज
277. 11:01देखेंगे। अब सेम फाइल को किसी और HTML
278. 11:05फाइल के साथ भी इस्तेमाल कर सकते हैं।
279. 11:08यहां पर जो मैं इंटरनल HTML लिखूंगा ये जो
280. 11:11सीएसएस अप्लाई होगी वो सिर्फ इसी HTML पेज
281. 11:13के लिए अप्लाई होगी। लेकिन जब मैं
282. 11:16एक्सटर्नल CSS की बात करता हूं तो सेम
283. 11:18सीएसएस फाइल मल्टीपल जगह इस्तेमाल हो सकती
284. 11:21है। मैं अगर एक और फाइल बना दूं यहां पे
285. 11:23HTML की कोई भी कॉन्टैक्टhl और इसको उसके
286. 11:26साथ इंटीग्रेट करा दूं तो सेम CSS फाइल
287. 11:28उसके साथ भी इंटीग्रेट हो जाएगी। मतलब मान
288. 11:32लो मैंने एक बना दिया कांटेक्ट
289. 11:37और यहां पर मैंने लिख दिया H1
290. 11:43हेलो कोडर आर्मी
291. 11:46और यहां पे मैंने उसको लिंक करा दिया
292. 11:51इस वाले स्टाइल से सीएसएस को मैं इसके साथ
293. 11:54भी इंटीग्रेट करा सकता हूं तो अगर आप
294. 11:55देखोगे तो अगर मैं इसको ओपन विद लाइव
295. 11:58सर्वर करता हूं तो आप देखोगे ये सीएसएस
296. 12:00प्रॉपर्टी इसके साथ भी अप्लाई हो गई। जबकि
297. 12:02मैंने इसको यहां ये देखो इसका बैकग्राउंड
298. 12:04कलर मैंने क्या कर रखा था? पिंक कर रखा
299. 12:05था। किसका? H1 का। तो वो इसके साथ भी
300. 12:07अप्लाई हो जा रही है और इसके साथ भी
301. 12:09अप्लाई हो जा रही है। तो मैक्सिमम केस में
302. 12:11आप देखोगे कि हम एक्सटर्नल सीएसएस को ही
303. 12:14प्रेफर करते हैं। क्योंकि वो मल्टी पेज
304. 12:16वेबसाइट अगर आपकी है मल्टीपल कंपोनेंट्स
305. 12:19अगर आपके पेज के अंदर प्रेजेंट है तो आप
306. 12:20सेम फाइल का इस्तेमाल कर सकते हैं। लेकिन
307. 12:23जब इंटरनल एचटीएमl की बात आएगी तो वो
308. 12:25सिर्फ उसी पेज पे इस्तेमाल हो सकती है।
309. 12:27दूसरे एचटीएमl पेज पे वो इस्तेमाल नहीं हो
310. 12:29पाएगी। तो आई होप आज आपको इन तीनों में
311. 12:32क्लेरिटी आ गई होगी। सबसे ज्यादा हम
312. 12:34एक्सटर्नल सीएसएल का प्रयोग करते हैं।
313. 12:36उसके बाद हम इनलाइन का और बहुत ही कम आप
314. 12:39देखोगे कि हम इंटरनल का प्रयोग कर रहे
315. 12:42होंगे। ओके ओके सर। अब यहां तक हमें
316. 12:44कांसेप्ट समझ आ चुके हैं। अब हम यहां पे
317. 12:48बात करेंगे सेक्टर की कि सेक्टर क्या होते
318. 12:52हैं? और इनका यूज़ केस क्या है? चलिए तो
319. 12:55मैं क्या करता हूं? पहले इन सारे को बंद
320. 12:57कर देता हूं। हां।
321. 13:00और एक नई फाइल बनाते हैं जिसका नाम मैं रख
322. 13:02देता हूं इंडेक्स
323. 13:05और एक रख देता हूं मैं सीएसएस फाइल
324. 13:08स्टाइलरcs
325. 13:11तो इंडेक्स के अंदर मैं कौन सा कोड लिखने
326. 13:13वाला हूं यही इसी कोड को कॉपी पेस्ट कर
327. 13:15लेते हैं
328. 13:18तो मैंने इसी कोड को कॉपी पेस्ट कर दिया
329. 13:20और इस वाली फाइल को इसके साथ इंटीग्रेट
330. 13:22करा देता हूं कि यहां पे हम स्टाइलर वाले
331. 13:24को यूज़ कर रहे हैं। चलिए अब सेक्टर क्या
332. 13:27होते हैं? मान लीजिए अभी हमने जो एक
333. 13:29सेक्टर हम ऑलरेडी देख चुके हैं जिसे कहते
334. 13:31हैं हम एलिमेंट सेक्टर कि मैं किसी
335. 13:33एलिमेंट को सेलेक्ट कर रहा हूं। ठीक है?
336. 13:36उसके टैग के बेसिस पे। जैसे मैं यहां पे
337. 13:38कह सकता हूं कि भैया मैं H1 वाले एलिमेंट
338. 13:40को सेलेक्ट कर रहा हूं या फिर मैं H2 वाले
339. 13:42एलिमेंट को सेलेक्ट कर रहा हूं। या फिर
340. 13:43मैं अनऑर्डर लिस्ट वाले को सेलेक्ट कर रहा
341. 13:45हूं। या फिर मैं लिस्ट वाले को सेलेक्ट कर
342. 13:47रहा हूं। और उसके बेसिस में मैं उसके अंदर
343. 13:49सीएसएस अप्लाई कर रहा हूं। जैसे अभी तक
344. 13:51हमने देखा कि मैंने H1 टॉयलेट टैग को
345. 13:53सेलेक्ट किया। हां। अब यहां पे मैं उसके
346. 13:55ऊपर प्रॉपर्टी लगा सकता हूं कि उसके
347. 13:57बैकग्राउंड कलर को पिंक कर दो। तो आप
348. 13:59देखोगे उसका बैकग्राउंड कलर पिंक हो
349. 14:00जाएगा। तो अगर मैं इसको ओपन विद लाइव
350. 14:02सर्वर करता हूं तो आपको ये कुछ इस तरीके
351. 14:03से नजर आएगा। बाकी को मैं बंद कर देता
352. 14:05हूं। ये देखिए इसका ये कलर पिंक आ गया। तो
353. 14:08ये जो डॉक्यूमेंट है आप इसको भी देख सकते
354. 14:10हैं। एलिमेंट सेक्टर या फिर हम इसको टैग
355. 14:11सेक्टर भी बोलते हैं कि टैग के बेसिस में
356. 14:13मैं सेलेक्ट कर रहा हूं। आप सिर्फ H1 H1
357. 14:15को ही नहीं आप बाकियों को भी सेलेक्ट कर
358. 14:17सकते हैं। मान लो आप अनऑर्डर लिस्ट को
359. 14:19वाले एलिमेंट को सेलेक्ट कर रहे हैं टैग
360. 14:20के बेसिस में। तो अनऑर्डर लिस्ट उसके
361. 14:22बैकग्राउंड कलर को आप चेंज कर दो
362. 14:25एक्वामरीन पे। तो जैसे ही हम यहां पर
363. 14:27देखेंगे तो उसका बैकग्राउंड कलर अनऑर्डर
364. 14:29लिस्ट का एकमरीन हो चुका है। तो इसको हम
365. 14:32क्या करें कि हम टैग के बेसिस में एलिमेंट
366. 14:34को सेलेक्ट कर रहे हैं। मैं क्या कर सकता
367. 14:36हूं? H2 को भी सेलेक्ट कर सकता हूं। तो
368. 14:38आपको यहां पे लिखना है एलिमेंट और ये
369. 14:40ब्रैकेट आएंगे कर्ली वाले और यहां पे आपको
370. 14:42प्रॉपर्टी का नाम और किस प्रॉपर्टी को
371. 14:43आपको अप्लाई करना है। इवन आप यहां पे फोंट
372. 14:46साइज वगैरह भी दे सकते हैं। अभी हम फॉन्ट
373. 14:47साइज के बारे में आगे डिस्कस करेंगे। तो
374. 14:49ये भी आप यहां पे अप्लाई कर सकते हैं कि
375. 14:51इसके फॉन्ट साइज को 30 पिक्सल कर दूं। मान
376. 14:53लो मैं इसको 100 पिक्सल कर दूं तो आप
377. 14:55देखोगे ये बहुत बड़ा हो चुका है। तो इस
378. 14:57तरीके से आप यहां पे काम को कर सकते हैं।
379. 14:59तो इस तरीके से देखा कि मैं किससे एलिमेंट
380. 15:02सेक्टर यहां पे लगा सकता हूं। टैग के
381. 15:03बेसिस में सेलेक्ट कर सकता हूं। अब मैं और
382. 15:05किस-किस के बेसिस में सेलेक्ट कर सकता
383. 15:07हूं। अभी तो हमने देखा मान लो मुझे यहां
384. 15:10पे सेलेक्ट करना है सिर्फ इस H2 वाले को।
385. 15:13सिर्फ इस वाले को। ठीक है? यहां पे H2
386. 15:15दो-दो है ना? अगर मैं सिर्फ ऐसा लिख दूं
387. 15:18कि H2 हां उसके बैकग्राउंड कलर को मान लो
388. 15:22हम करना चाहते हैं ब्लू। लेकिन मैं चाहता
389. 15:25था कि सिर्फ इसी पहले वाले H2 का
390. 15:27बैकग्राउंड कलर ब्लू हो। इसका ना हो। तो
391. 15:29इसको हम कैसे करेंगे? देखो इसमें तो दोनों
392. 15:31का हो गया। क्योंकि H2 क्या है? H2 ये ये
393. 15:33वाला भी था। हां और ये वाला भी था। तो
394. 15:35दोनों का कलर क्या हो गया? बैकग्राउंड कलर
395. 15:37ब्लू हो गया। लेकिन मैं चाहता हूं कि
396. 15:38सिर्फ इसी का हो। तो इसको हम कैसे कर सकते
397. 15:40हैं? तो इस H2 को मैं दे सकता हूं एक आईडी
398. 15:43का नाम। और आईडी मैंने आपको पहले भी बताया
399. 15:45था कि आईडी आपकी हमेशा यूनिक होगी पूरे
400. 15:49HTML पेज में। ओके? हां। तो इसको अगर
401. 15:51मैंने लिख दिया कि इसका नाम मान लो मैंने
402. 15:53आईडी में दे दिया फर्स्ट। हां। तो मैं
403. 15:55आईडी के बेसिस में इस एलिमेंट को सेलेक्ट
404. 15:57कर सकता हूं। तो मान लो अब मैं ये ना करते
405. 16:00हुए मैं आईडी के बेसिस में सेलेक्ट कर रहा
406. 16:02हूं। मैं यहां पे लिख भी देता हूं। सबसे
407. 16:04पहले हमने किसके बेसिस पे सेलेक्ट किया?
408. 16:05हमने सबसे पहले सेलेक्ट किया था। किसके
409. 16:07बेसिस में? टैग या एलिमेंट सेक्टर।
410. 16:13अब हम आईडी के बेसिस पर सेलेक्ट करेंगे।
411. 16:18आईडी बेस सेक्शन। तो आईडी बेस में क्या
412. 16:22होगा कि मैं इस H2 वाले को सेलेक्ट कर
413. 16:24सकता हूं। कैसे करेंगे? आईडी को हम कैसे
414. 16:26सेलेक्ट करते हैं? तो हमने आपको पहले ही
415. 16:29बताया था कि आपको हैश लगाना है और जो आपके
416. 16:31आईडी का नाम है। इस तरीके से हम आईडी के
417. 16:33बेसिस पे सेलेक्ट कर सकते हैं। और अब मैं
418. 16:35बैकग्राउंड कलर को मार्क कर सकता हूं।
419. 16:37क्या? ब्लू। तो आप देखोगे उसका बैकग्राउंड
420. 16:40कलर ब्लू हो जाएगा।
421. 16:42हमने यह देखा सिर्फ इसी का बैकग्राउंड कलर
422. 16:44ब्लू हुआ है। तो आप किसी को भी आईडी दे
423. 16:46सकते हैं। मान लो अगर मैं किसी और को आईडी
424. 16:48देना चाहता हूं। मान लो मैं मेरे पास
425. 16:50दो-दो अनरल लिस्ट हैं। ये वाली भी है,
426. 16:52नीचे वाली भी है। तो मान लो मैं इस वाली
427. 16:53अनरल लिस्ट के बैकग्राउंड कलर को पिंक
428. 16:55करना चाहता हूं। सिर्फ इसी वाली के तो मैं
429. 16:56इसको एक आईडी दे सकता हूं। और इसका नाम
430. 16:59कुछ भी आप रख दें। मान लो मैंने इसको
431. 17:00सेकंड दे दिया। तो मुझे पहले इसको सेलेक्ट
432. 17:02करना पड़ेगा। इस एलिमेंट को कैसे करूंगा?
433. 17:04तो वही आपको क्या करना है? हैश हां जी। एल
434. 17:08जो भी उसका आईडी का नाम है। तो आईडी को हम
435. 17:10हमेशा एस के बेसिस में सेलेक्ट करते हैं।
436. 17:13तो है आईडी यह इसको आप इस तरीके से याद रख
437. 17:16सकते हैं। बैकग्राउंड कलर क्या करना चाहता
438. 17:18हूं? पिंक करना चाहता हूं। जैसे ही मैंने
439. 17:19ये पिंक करा आप देखोगे यहां पे इसका कलर
440. 17:22पिंक हो चुका है। इतना आसान तरीका है।
441. 17:25ओके। हां। अब अगला कौन सा आता हमारे पास?
442. 17:29मैं यहां पे लिख देता हूं कि भैया एस
443. 17:32बेस्ड सेक्शन।
444. 17:35ओके। अगला मैं सेलेक्ट कर सकता हूं
445. 17:37एलिमेंट को क्लास बेस पे। किसके? क्लास
446. 17:39बेस्ड सेलेक्शन।
447. 17:42क्लास बेस्ड सेलेक्शन का मतलब क्या है?
448. 17:44मान लो यहां पे जो अभी हमारी वेबसाइट है,
449. 17:47हां जी, अभी तो इसके अंदर कुछ हुआ नहीं
450. 17:48है। मैं यहां पे चाहता हूं कि ये जो H1 है
451. 17:52और ये जो नीचे वाली अनऑर्डर लिस्ट है,
452. 17:54इसके बैकग्राउंड कलर को क्या करना है
453. 17:56हमें? इसके बैकग्राउंड कलर को ग्रीन करना
454. 17:58है। किसके? इस H1 के और इस अनऑर्डर लिस्ट
455. 18:01के। तो, इसको मैं क्लास दे सकता हूं।
456. 18:03क्लास रिपीट हो सकती है। तो इसको मैंने
457. 18:06क्लास थर्ड रख दिया और इसको भी मैंने
458. 18:08क्लास थर्ड का पार्ट ही रख दिया। ओके?
459. 18:10हां। तो इसका क्लास भी थर्ड है। इसका
460. 18:12क्लास भी थर्ड है। ओके? क्योंकि क्लास
461. 18:15रिपीट हो सकती है। क्लास को हम यूज़ करते
462. 18:17हैं ग्रुपिंग के लिए। ओके? तो थर्ड थर्ड।
463. 18:19तो क्लास को हम कैसे सेलेक्ट कर सकते हैं?
464. 18:21क्लास को सेलेक्ट करने का तरीका है पहले
465. 18:23डॉट। फिर जो भी आपका क्लास का नाम है और
466. 18:25उसके बाद आप वहां पे बैकग्राउंड कलर को दे
467. 18:27सकते हैं कि मैं इसका बैकग्राउंड कलर
468. 18:28ग्रीन करना चाहता हूं दोस्त। तो आप देखोगे
469. 18:30इसका और इसका बैकग्राउंड कलर ग्रीन हो
470. 18:33चुका है। तो कई बार आपके सामने सिचुएशन
471. 18:35आएंगी। मैक्सिमम टाइम आप देखोगे हम क्लास
472. 18:37और आईडी का बहुत ज्यादा प्रयोग कर रहे
473. 18:40होंगे। तो क्लास हो गया किसके लिए?
474. 18:42ग्रुपिंग के लिए। जब मुझे कुछ कुछ चीजों
475. 18:44को ग्रुप करना है वहां पे। ऐसे ही मैं
476. 18:46यहां पे और भी कर सकता हूं। मान लो क्या
477. 18:48मैं आइडियल क्लास दे सकता हूं? हां जी।
478. 18:50मान लो मैंने इसको दे दिया। फोर्थ
479. 18:53और मान लो मैंने
480. 18:56सॉरी इसको ना देते हुए
481. 18:59इसको दे देते हैं और इसको भी मैंने क्लास
482. 19:02दे दी फोर्थ
483. 19:04क्या एक एलिमेंट को क्लास आईडी दोनों मिल
484. 19:06सकती है? हां क्लास भी मिल सकती है आईडी
485. 19:07भी मिल सकती है। उसमें कोई टेंशन लेने
486. 19:09वाली बात नहीं है। तो मैं इसको कैसे कर
487. 19:10सकता हूं कि डॉट फोर्थ
488. 19:13और उसके बैकग्राउंड कलर को भी चेंज कर
489. 19:15सकता हूं। तो बैकग्राउंड कलर चेंज कैसे
490. 19:17करना है? लिख दो जो भी आपको देना है। मान
491. 19:19लो आपको एजर देना है तो एजर उसका
492. 19:20बैकग्राउंड कलर हो जाएगा। एजोर अभी हमें
493. 19:22दिख नहीं रहा है क्योंकि बहुत ही लाइट कलर
494. 19:24है।
495. 19:25तो थोड़ा सा कुछ अलग सा लेते हैं। ब्लू
496. 19:28वायलेट रख देते हैं। तो आप देखोगे इसका भी
497. 19:30और इसका भी बैकग्राउंड कलर ब्लू वायलेट हो
498. 19:32चुका है। तो इस तरीके से हम क्या कर सकते
499. 19:35हैं? हम क्लास बेस भी सिलेक्शन कर सकते
500. 19:37हैं। अगला जो इंपॉर्टेंट है कि हम यहां पर
501. 19:40अप्लाई करेंगे ग्रुप बेस्ड सिलेक्शन। किस
502. 19:43में? ग्रुप के बेस में सिलेक्शन।
503. 19:48यह भी आप बहुत ज्यादा यूज करेंगे। ग्रुप
504. 19:52बेस सिलेक्शन मतलब भैया मान लो मैं यहां
505. 19:54पर चाहता हूं कि जो H1 टैग है उसके
506. 19:56बैकग्राउंड कलर को भी ब्लैक करना है। हां
507. 19:59और जिन-जिन की क्लास फोर्थ है जिस-जिस की
508. 20:01क्लास क्या है? फोर्थ है उनके बैकग्राउंड
509. 20:03कलर को भी वही करना है। ओके? तो हम कैसे
510. 20:05कर सकते हैं? तो सबसे पहले मुझे किसको
511. 20:08सेलेक्ट करना है? इस वाले को। ठीक है? इस
512. 20:10वाली क्लास को सेलेक्ट करना है। इस H1
513. 20:11एलिमेंट को। तो H1 एलिमेंट को कैसे भी
514. 20:13सेलेक्ट कर सकता हूं। H1 को मैं ऐसे भी
515. 20:15सेलेक्ट कर सकता हूं। और किसका और किसको
516. 20:17करना है मुझे मान लो मुझे क्लास फोर्थ
517. 20:19जिसके क्लास में फोर्थ लिखा है तो इसके
518. 20:21इसको इसको भी मैं सेलेक्ट कर सकता हूं तो
519. 20:23कॉमा लगा के आप फोर्थ लिख सकते हैं पर वो
520. 20:27क्लास बेस सिलेक्शन हो रहा है तो डॉट
521. 20:28फोर्थ
522. 20:31तो अब आप यहां पे बैकग्राउंड कलर को चेंज
523. 20:33कर सकते हैं कि बैकग्राउंड कलर मान लो आप
524. 20:35कुछ देना चाहते हैं एक्वा तो अब जैसे ही
525. 20:37यहां पे आएंगे तो इनके बैकग्राउंड कलर
526. 20:39क्या हो चुके होंगे एक्वा हो चुके होंगे
527. 20:40इसका भी और इसका भी तो यहां पे मैंने क्या
528. 20:42किया ग्रुप बेस्ड मैंने H1 में भी लगा
529. 20:45दिया हां जी और जिसकी क्लास फोर्थ थी उस
530. 20:47पे भी लगा दिया। तो उनके बैकग्राउंड कलर
531. 20:48को मैंने क्या कर दिया? एक्वा मार्क कर
532. 20:50दिया। आप और भी क्या इसके साथ ऐड कर सकता
533. 20:52हूं? हां भाई और भी आप ऐड कर सकते हैं।
534. 20:54मान लो आप इस वाले को भी एक्वा कलर करना
535. 20:57चाहते हैं इसके भी तो इसको H2 वाले को भी
536. 20:59आप सेलेक्ट कर सकते हैं। लेकिन अगर आप
537. 21:01इसको H2 के बेस पे सेलेक्ट करेंगे तो इसका
538. 21:03भी कलर हो जाएगा चेंज। है ना? तो हम यहां
539. 21:04पे क्या कर सकते हैं? हम यहां पे इसको
540. 21:06आईडी के बेसिस में सेलेक्ट कर सकते हैं
541. 21:07यूनिकली। तो आप ऐसे करके इसको लिख सकते
542. 21:09हैं कि है क्या था उसका? आईडी था ना? हां।
543. 21:13आईडी फर्स्ट था। यह लीजिए। तो जैसे आपने
544. 21:16वो करा तो भैया इस एक्सेस वाले का
545. 21:18बैकग्राउंड कलर भी एक्वा मार्क हो चुका
546. 21:20है। तो ग्रुप बेस सेक्शन में क्या होता है
547. 21:21कि हम मल्टीपल एलिमेंट को सेलेक्ट कर सकते
548. 21:25हैं एक साथ कॉमा कॉमा कॉमा करके। तो इस
549. 21:28ग्रुप बेस सेक्शन का भी आप बहुत ज्यादा
550. 21:30प्रयोग कर रहे होंगे। तो ये अभी हमने सीखा
551. 21:33कि हम किस तरीके से अपने कोड के अंदर
552. 21:35सीएसएल को अप्लाई कर सकते हैं। और सेक्टर
553. 21:38क्या होते हैं? सेक्टर का सिंपल काम है
554. 21:40एलिमेंट को सेलेक्ट करना। वो आपके टैग के
555. 21:42बेसिस में हो सकते हैं। वो आपके क्लास के
556. 21:44बेसिस में हो सकते हैं। वो आपके आईडी के
557. 21:45बेस में हो सकते हैं। और इवन मैं उनके
558. 21:47ग्रुपिंग करके मल्टीपल एलिमेंट को एक साथ
559. 21:49सेलेक्ट करके या मल्टीपल क्लासेस को
560. 21:50मल्टीपल आईडी को सेलेक्ट करके एक साथ उनके
561. 21:53ऊपर सीएसएल प्रॉपर्टी अप्लाई कर सकता हूं।
562. 21:55जब हम ग्रुपिंग का कोड लिखते हैं। आई होप
563. 21:58यहां पे पॉइंट क्लियर होगा। अब आगे क्या?
564. 22:01अब हम बात करेंगे यहां पे कलर की कि हम
565. 22:04इसके अंदर कौन-कौन से कलर को इंट्रोड्यूस
566. 22:06कर सकते हैं। मान लो अगर मैं ये H1 है।
567. 22:10अभी अगर मैं H1 वाले को कोई कलर देना
568. 22:12चाहता हूं H1 बैकग्राउंड कलर तो मेरे पास
569. 22:16कलर चॉइस करने के कितने तरीके यहां पे
570. 22:18प्रेजेंट होंगे? जैसे मैंने इसको
571. 22:19एक्वामरीन दे दिया। आपने ऐसा लिख दिया। तो
572. 22:21जैसे आप इस पे अगर क्लिक करेंगे ना इसको
573. 22:23अगर आप थोड़ा सा ऐसे करके मूव करोगे तो आप
574. 22:25इसका कलर चेंज कर सकते हैं। ये देख लो
575. 22:29कलर चेंज इसके ऊपर क्लिक करो। इसके ऊपर
576. 22:33क्लिक करो और यहां से भी अगर आप इसको ऊपर
577. 22:36नीचे करते हैं तो इसका कलर चेंज होता
578. 22:38जाएगा। तो आप देखोगे इसका कलर अब क्या हो
579. 22:40चुका है? थोड़ा सा पिंक टाइप का हो चुका
580. 22:42है। तो इस तरीके से आप कलर को सेलेक्ट कर
581. 22:44सकते हैं। अब आप बोलेंगे भैया यहां पे ये
582. 22:46वैल्यूस क्या है?
583. 22:48159 19 161 इनका मतलब है कि रेड कलर ग्रीन
584. 22:54कलर और ब्लू कलर कि मैं रेड कलर की मात्रा
585. 22:58कितनी डाल रहा हूं। मैं ग्रीन कलर की
586. 23:00मात्रा कितनी डाल रहा हूं और ब्लू कलर की
587. 23:02मात्रा कितनी डाल रहा हूं। और इन तीनों को
588. 23:04कलर को मिक्स करके हमारा ये वाला कलर
589. 23:06जनरेट हो रहा है। आरजीबी जो कलर हैं ध्यान
590. 23:10से सुनना मेरी बात। जो आरजीबी कलर है इनके
591. 23:12कॉम्बिनेशन से आप कोई भी कलर को जनरेट कर
592. 23:16सकते हैं। क्या कहा मैंने? आरजीबी जो कलर
593. 23:19हैं रेड, ग्रीन, ब्लू इनके कॉम्बिनेशन से
594. 23:21आप कोई भी कलर को जनरेट कर सकते हैं। मैं
595. 23:23आपको दिखा भी देता हूं यहां पे कि आरजीबी
596. 23:26कलर।
597. 23:28तो अगर मैं आपको यहां पे दिखाऊं। यहां पे
598. 23:30अगर हम आते हैं तो आप यहां पे अगर देखोगे
599. 23:32कि रेड, ग्रीन, ब्लू। तो अगर जैसे मैंने
600. 23:36रेड की वैल्यू पूरी 255 रखी है और इसको
601. 23:38अगर मैं नीचे ले आता हूं तो यह देखो ब्लैक
602. 23:40तो यह दिखा रहा है कि भैया रेड कितना रेड
603. 23:42मुझे मुझे करना है कितना ग्रीन मुझे इसके
604. 23:45ऊपर अप्लाई करना है सॉरी कितना ग्रीन मुझे
605. 23:48इसके ऊपर अप्लाई करना है कितनी ब्लू की
606. 23:50मात्रा मुझे इसके ऊपर अप्लाई करनी है ये
607. 23:52देख लो तो उसके बेसिस में इनका कलर चेंज
608. 23:54हो रहा है तो आप रेड ग्रीन ब्लू के ऊपर जब
609. 23:55भी खेलोगे तो आपका ये कलर चेंज होता रहेगा
610. 23:58ये आप देख सकते हो 8 GB कैलकुलेटर मैंने
611. 24:00रेड को इतना किया तो कलर चेंज हो गया
612. 24:01ग्रीन को थोड़ा और करा तो कलर चेंज हो गया
613. 24:03ये आप देख सकते हो तो ये उसकी मात्राएं
614. 24:05हैं कि कितने पोर्शन में रेड को डालूं,
615. 24:07कितने पोर्शन में ग्रीन को डालूं और कितने
616. 24:08पोर्शन में मैं ब्लू को डालूं। अब ये 8GB
617. 24:11की जो वैल्यू होती है कहां से कहां तक
618. 24:13होती है उसके बारे में डिस्कस कर लेते
619. 24:15हैं। बहुत इंपॉर्टेंट पॉइंट है डिस्कशन
620. 24:16का। RGB जो R की वैल्यू होगी रेड की वो
621. 24:20ज़ीरो से लेके 255 तक आप लिख सकते हैं।
622. 24:23ग्रीन का भी ज़ीरो से लेके 255 तक और ब्लू
623. 24:28की भी आप ज़ीरो से लेके 255 तक वैल्यू कोई
624. 24:32भी लिख सकते हैं। और इन दोनों तीनों के
625. 24:34कॉम्बिनेशन से आपका कलर कोई भी जनरेट हो
626. 24:36जाएगा। क्लियर है? हां। अब इसमें जब मैं
627. 24:40बोल रहा हूं रेड की मात्रा कितनी लेनी है?
628. 24:42ग्रीन की मात्रा कितनी लेनी है? ब्लू की
629. 24:43मात्रा कितनी लेनी है? तो ये कितनी टोटल
630. 24:45मेमोरी लेता होगा? क्या हम सोच सकते हैं
631. 24:47कितनी मेमोरी लेता होगा? अगर आपको कोई कलर
632. 24:50सेलेक्ट करना है तो मैं क्या कर रहा हूं?
633. 24:52जीरो से लेकर 25 तक कोई भी नंबर सेलेक्ट
634. 24:54कर लो। तो मान लो मैंने सेलेक्ट कर लिया
635. 24:56127 रेड। मैंने कहा उसमें ग्रीन की मात्रा
636. 25:00होगी कितनी? 140। मैंने कहा ब्लू की
637. 25:02मात्रा होगी 209। तो इन नंबर को इन तीन
638. 25:06नंबर को हम स्टोर कराते हैं। जैसे अभी
639. 25:08हमने यहां पे देखा कि यहां पे तीन नंबर
640. 25:09स्टोर होते हैं। ओके? हां। अब इस
641. 25:13127 को स्टोर कराने के लिए मुझे कितनी
642. 25:16बिट्स की रिक्वायरमेंट पड़ेगी? इस 140 को
643. 25:18स्टोर कराने के लिए कितनी बिट्स की
644. 25:20रिक्वायरमेंट पड़ेगी? और इस 209 को स्टोर
645. 25:22कराने के लिए कितनी बिट्स की रिक्वायरमेंट
646. 25:24पड़ेगी? तो इसको स्टोर कराने के लिए 8
647. 25:26बिट, इसको भी आठ और इसको भी आठ। तीनों के
648. 25:28लिए मुझे 8-आ बिट्स लगेंगी। 8 बिट इसके
649. 25:31लिए, 8 बिट इसके लिए और 8 बिट इसके लिए।
650. 25:33तो टोटल जो मेमोरी होगी 24 बिट्स। मतलब
651. 25:36तीन बाइट मेमोरी हमारी यहां पे कंज्यूम
652. 25:39होगी। भैया आठ बिट क्यों लगी? आठ बिट
653. 25:42क्यों लगी? अगर मैं 8 टाइम वन लिखता हूं
654. 25:44बाइनरी में 1 2 3 4 5 6 7 8 तो इसका मतलब
655. 25:47हो जाएगा 255। तो आप सबसे बड़ा नंबर 255
656. 25:50रिप्रेजेंट कर सकते हो और सबसे छोटा अगर
657. 25:51मैं आठ बार ज़ीरो लिख दूं तो आप जीरो नंबर
658. 25:53को रिप्रेजेंट कर सकते हो। इसलिए आठ बिट
659. 25:55तो इसको भी मैंने आठ बिट में स्टोर करा
660. 25:57सकता हूं। इसको भी और इसको भी। कोई भी एक
661. 25:58नंबर है। तो आठ 24 बिट हो जाएंगे। और 24
662. 26:01बिट्स का मतलब क्या हो जाएगा? कि ये
663. 26:02कंज्यूम करेगा आपकी तीन बाइट ऑफ मेमोरी।
664. 26:05सिंपल इतना ही है। क्लियर? हां भैया। अब
665. 26:09यहां तक तो हम सीख चुके हैं कि RGB का
666. 26:11मतलब हमारा क्या है? अब आप यहां से मैंने
667. 26:14कहा ना चेंज भी कर सकते हैं। अब अगर आप
668. 26:15यहां पर थोड़ा सा नोटिस करेंगे। मैं मान
669. 26:17लो इसको ऐसा कर देता हूं।
670. 26:21जैसे ही मैं यहां पे ये वाले को
671. 26:24इंट्रोड्यूस कराता हूं। आप देखोगे यहां पे
672. 26:26एक चौथी वैल्यू इंट्रोड्यूस हो चुकी है।
673. 26:27एक और वैल्यू इंट्रोड्यूस हो चुकी है।
674. 26:290.879
675. 26:30ये क्या होती है? ये चौथी वैल्यू क्या है?
676. 26:32इसको कहते हैं हम अल्फा। ये बताएगा
677. 26:35ट्रांसपेरेंसी के बारे में। जो यह चौथी
678. 26:37वैल्यू होती है ना रेड, ग्रीन, ब्लू और यह
679. 26:39होता है अल्फा। कितना ट्रांसपेरेंट यह
680. 26:41होगा। जैसे हम देखें अपनी वेबसाइट को तो
681. 26:43यहां पर हम देखेंगे कि यह कलर अब जैसे ही
682. 26:45देखो मैं इसको ना अगर जीरो कर देता हूं तो
683. 26:48क्या होगा? देखो वो बिल्कुल ट्रांसपेरेंट
684. 26:50हो जाएगा। मैं 0.9 करता हूं तो उस कलर की
685. 26:54ट्रांसपेरेंसी बढ़ जाएगी। तो ज़ीरो में
686. 26:56बिल्कुल ट्रांसपेरेंट है और उसमें वो
687. 26:58डार्क होता जाएगा। तो इसकी वैल्यू जीरो से
688. 26:59लेके वन तक जाती है। मैं अगर इसको 0.2 कर
689. 27:01दूं तो आप देख सकते हो इसकी
690. 27:02ट्रांसपेरेंसी। यह देखो हल्का सा नजर आ
691. 27:04रहा है। 0.5 करूंगा तो देखो थोड़ा और
692. 27:07डार्क हो जाएगा ट्रांसपेरेंसी में। तो
693. 27:09इसको हम कहते हैं ट्रांसपेरेंट वैल्यू। तो
694. 27:12आर जीबी ए का मतलब होता है अल्फा जिसका
695. 27:14मतलब हम ट्रांसपेरेंसी भी इसको मार्क करते
696. 27:16हैं। ऐसे ही अगर मैं एच टू टैग की बात
697. 27:19करूं एक और हमारे पास आता है जिसमें हम
698. 27:21बैकग्राउंड कलर को एचएसएल से मार्क कर
699. 27:23सकते हैं। किससे? एचएसएल। एचएसएल क्या
700. 27:26बताता है? सैचुरेशन और लाइटनेस। V की जो
701. 27:29वैल्यू होगी वो 0 से लेकर 360 तक आपकी कोई
702. 27:32भी वैल्यू हो सकती है। मान लो मैंने 110
703. 27:34डाल दिया। सैचुरेशन आपको डालना पड़ता है
704. 27:37जीरो से लेके 100% तक। मान लो मैंने 50%
705. 27:39डाल दिया और लाइटनेस भी मैंने मान लो 30%
706. 27:42डाल दिया। तो जैसे ही आप इसको डालोगे तो
707. 27:44आप देखोगे आपका H2 इस कलर का दिख रहा है।
708. 27:47तो अगर हम अपने डॉक्यूमेंटेशन में चलते
709. 27:48हैं और यहां पे देखते हैं कि इसमें कलर ने
710. 27:51क्या मार्क करा है को? तो अगर हम थोड़ा सा
711. 27:54नीचे आते हैं तो यहां पे अगर हम देखते हैं
712. 27:57का मतलब है द प्योर कलर इटसेल्फ जो पहली
713. 27:59वैल्यू है एचएसएल में दिस इज अ डिग्री ऑन
714. 28:02दी कलर व्हील कि कितना उसका कलर होगा जीरो
715. 28:05का मतलब होगा रेड 120 का मतलब होगा ग्रीन
716. 28:07और 240 का मतलब होगा ब्लू पैचुरेशन बताता
717. 28:10है कि भैया इस जो कलर है उसकी इंटेंसिटी
718. 28:13कितनी होने वाली है ज़ीरो से 100% के बीच
719. 28:15में बता दो उस कलर की इंटेंसिटी कितनी
720. 28:17होने वाली है तो ये ये बताएगा और लाइटनेस
721. 28:19क्या बताएगा कि इसमें ब्राइटनेस कितनी
722. 28:22आपकी की होगी। तो अगर आप यहां पे देखो अगर
723. 28:24आप 0% रख देते हैं तो वो कंप्लीटली उसको
724. 28:27ब्लैक कर देगा और अगर आप 100% कर दोगे तो
725. 28:29उस कलर को बिल्कुल वाइट कर देगा और 50% का
726. 28:32मतलब है नॉर्मल होगा। जैसे अगर मैं इसको
727. 28:340% रखता हूं तो आप देखोगे हमारी वेबसाइट
728. 28:37कैसी दिखेगी? बिल्कुल इसने ब्लैक कर दिया।
729. 28:38और अगर मैं इसको 100% कर देता हूं तो
730. 28:40बिल्कुल उसको वाइट कर देगा। ठीक? तो
731. 28:43नॉर्मल रेंज हमारी क्या होती है? 50। ये
732. 28:45देखो इस तरीके से। तो इसको भी हम बहुत
733. 28:47ज्यादा इस्तेमाल करते हैं। इवन यहां पे भी
734. 28:50फिर वही कांसेप्ट आ जाता है एक एचएसएल ए
735. 28:52का। तो यहां पे भी हम वही 0 सिक्स मैंने
736. 28:56ये वैल्यू डाल दी। तो आप यहां पे उसके देख
737. 28:58सकते हो कि ट्रांसपेरेंसी उसके अंदर कितनी
738. 29:00होने वाली है जिसके ऊपर भी हम खेल सकते
739. 29:02हैं। ये देख लो ट्रांसपेरेंसी वाली वैल्यू
740. 29:04भी हम यहां पे निकाल सकते हैं। तो अक्सर
741. 29:06केसेस में आप देखोगे हम आरजीबी का ही
742. 29:08इस्तेमाल करते हैं और ए का भी इस्तेमाल
743. 29:10करते ही हैं कभी-कभी। लेकिन ये आप बहुत कम
744. 29:12इस्तेमाल करने वाले हो। बस मुझे इसको कवर
745. 29:15करना था। आपको बताना ताकि आपको आईडिया रहे
746. 29:17कि ये चीजें होती क्या है। अब एक
747. 29:19इंटरेस्टिंग फैक्ट जो मैं अब आपके साथ
748. 29:21डिस्कस करूंगा। पहले इसको थोड़ा सा कमेंट
749. 29:23कर देते हैं। देखो दोस्तों जैसे मैं H1
750. 29:26लिखता हूं। आप कई बार देखोगे कि मैंने
751. 29:29जैसे ही बैकग्राउंड कलर लिखा। अब यहां पे
752. 29:32जैसे ही मैंने मान लो एल इज़ ब्लू को
753. 29:34सेलेक्ट करा। मुझे पता है मैं इसके कलर को
754. 29:35चेंज कर सकता हूं। ऐसे-ऐसे करके और इसके
755. 29:37ऊपर मैं थोड़ा सा ऐसे करके खेल खेल सकता
756. 29:38हूं। तो आप देखोगे इसकी आरजीबी वैल्यू आ
757. 29:41गई। अब ये जो वैल्यू है ये किस फॉर्म में
758. 29:44है? यह मुझे नंबर के फॉर्म में दिख रही
759. 29:46है। इसको मैं हेक्साडेेसिमल फॉर्म में भी
760. 29:48दिखा सकता हूं। हेक्साडेसीिमल फॉर्म।
761. 29:50हेक्साडेसीिमल फॉर्म क्या होती है? मैं
762. 29:52अगर आपको दिखाऊं कलर इन हेक्सा डेेसिमल
763. 29:57आप इसको भी देखोगे। हेक्सा कलर कई का यह
764. 30:00देखो। जैसे यहां पे ये इसकी हेक्साडेसीिमल
765. 30:03वैल्यू 8 GB की जो भी मात्रा है। यह देखो।
766. 30:05यह जो वैल्यू है इसको अगर मैं कॉपी करके
767. 30:07यहां पर पेस्ट करता हूं। इसको हटा के
768. 30:10तो आप देखोगे इसका कलर पैेट अब ग्रीन
769. 30:13दिखेगा। तो आप उसको हेक्साडेेसिमल वैल्यू
770. 30:16में भी दर्शा सकते हैं। तो ये पहली दो
771. 30:18वैल्यू आपका रेड कलर को दिखाती है। अगली
772. 30:20दो वैल्यू ग्रीन को और अगली दो आपके ब्लू
773. 30:23को दर्शाती है। क्लियर? रेड ग्रीन वैल्यू।
774. 30:26तो ये उसकी हो गई हेक्साडेसीिमल फॉर्म। इस
775. 30:29तरीके से भी आप इसको दर्शा सकते हैं। बहुत
776. 30:31जगह आप देखोगे कि आप कलर पैेट सेलेक्ट
777. 30:33करने जा रहे हो तो आपको अक्सर वो
778. 30:35हेक्साडेेसिमल वैल्यू ही देगा। जब आप
779. 30:37ऑनलाइन ढूंढने जाओगे ना कि भैया मुझे कोई
780. 30:39पर्टिकुलर कलर चाहिए तो उस कलर का नाम
781. 30:41नहीं होगा। नाम तो लिमिटेड ही है हमारे
782. 30:44पास। शायद 140 कलर के हमारे पास नाम है।
783. 30:46लेकिन जब हमें एग्जैक्ट वो कलर चाहिए कि
784. 30:49उसमें कितना ग्रीन, कितना रेड, कितना ब्लू
785. 30:51होना चाहिए। तो अक्सर आपको हेक्साडेेसिमल
786. 30:53वैल्यू में इस वैल्यू को दिया जाता है
787. 30:54जिसको आप अक्सर यूज़ कर रहे होंगे। जिसमें
788. 30:56पहली दो वैल्यू आपके रेड कलर को, अगले
789. 30:59ब्लू को और अगले आपके वाइट कलर को
790. 31:01दर्शाएगी। तो यहां पर अगर हम आए और देखें
791. 31:03अगर तो आप यहां पर देख सकते हैं। देखो
792. 31:06यह देख लो 31 रेड की मात्रा है। ग्रीन को
793. 31:10मैं थोड़ा सा ऐसे कर देता हूं। और ब्लू को
794. 31:12अगर मैं ऐसे करके यह कर देता हूं। देखो
795. 31:15कलर का आप देख सकते हो 31 C2 D8 तो आप देख
796. 31:19सकते हो ये अब हमारा नया कलर आया जिसका
797. 31:20बैकग्राउंड कलर ये रहा। तो ये कौन सी
798. 31:22वैल्यू हो गई? ये हेक्साडेसीिमल में इसको
799. 31:24रिप्रेजेंट करने का तरीका है। अब
800. 31:26हेक्साडेसीिमल का मतलब क्या है? कितने
801. 31:28बच्चों को पता है? देखो हेक्साडेसीिमल में
802. 31:30अगर मैं इस नंबर को पकड़ूं
803. 31:33और इसको अगर यहां पर पेस्ट करूं आपका ही
804. 31:36पास यह हेक्साडेेसिमल नंबर है जिसमें पहली
805. 31:38दो बिट रेड कलर को दर्शाएंगी। अगली दो बिट
806. 31:40ग्रीन कलर को और अगली लास्ट की दो बिट
807. 31:42आपके ब्लू कलर को दर्शाएंगी। ये
808. 31:44हेक्साडेेसिमल फॉर्म है। और हेक्साडेेसिमल
809. 31:47फॉर्म में हमारे पास क्या होता है? चार
810. 31:50बिट से हम एक नंबर को दर्शा सकते हैं। तो
811. 31:53ये जो नंबर है ये भी चार बिट का ये थ्री
812. 31:55बिट चार बिट का ये भी चार ये भी चार ये भी
813. 31:57चार ये भी चार। तो टोटल मेरे पास फिर से
814. 31:5924 बिट्स आ गई और 24 बिट्स का मतलब यही कि
815. 32:02ये भी तीन बाइट ऑफ मेमोरी ले रहा है। बस
816. 32:04इसको दर्शाने का ये तरीका है। ओके?
817. 32:06क्योंकि ये शॉर्ट फॉर्म नोटेशन इसका बन
818. 32:08जाता है। ठीक? तो इससे आपको घबराना नहीं
819. 32:10है कि भैया इस हेक्साडेेसिमल फॉर्म में
820. 32:11इसको क्यों लिखा गया है? इसका फॉर्मेट ऐसा
821. 32:13क्यों है? तो सिंपल इसका शॉर्ट नोटेशन
822. 32:15मुझे करना था। तो हमने इसको हेक्साडेेसिमल
823. 32:17फॉर्म में लिख दिया। जिस पे हम बोल सकते
824. 32:19हैं कि ये पहला वाला नंबर चार बिट का है।
825. 32:20ये भी चार, ये भी चार, ये भी चार, ये भी
826. 32:22चार, ये भी चार। तो अगर आप यहां पे देखोगे
827. 32:24यहां पे देखो C भी आ रखा है। देखो C भी आ
828. 32:26रखा है। ये देखो C तो जो हेक्साडेेसिमल
829. 32:28वैल्यूज़ होती है वो कहां से कहां तक होती
830. 32:30है? जीरो से लेके F तक। कि 0 1 2 3 5 4 5
831. 32:336 7 8 9 A B C D डी ई एफ। तो टोटल ये 16
832. 32:36नंबर होते हैं। और इनको दर्शाने के लिए
833. 32:38मुझे चार बिट की रिक्वायरमेंट होती है। आई
834. 32:41होप आपको कांसेप्ट क्लियर होगा। अब यह तो
835. 32:44हमने सीख लिया कि भैया हेक्साडेसीिमल
836. 32:46हमारा क्या होता है। अब इसके आगे हम चलते
837. 32:49हैं। कलर पैटर्न हमें अब समझ आ चुके हैं।
838. 32:51इस तरीके से हम कलर पैेट को सेलेक्ट कर
839. 32:53सकते हैं। अब हम चलते हैं अपने नेक्स्ट
840. 32:55कांसेप्ट पे जिस पे हम बताएंगे फोंट के
841. 32:57बारे में थोड़ी सी बात करते हैं। तो फोंट
842. 33:00क्या होते हैं? मान लो मुझे फों्ट अप्लाई
843. 33:02करने हैं
844. 33:05H1
845. 33:06तो सबसे पहले मान लो ये H1 जो भी है मेरे
846. 33:09पास अगर आप यहां पे देखोगे मुझे इसके साइज
847. 33:11को बढ़ाना है तो मैं इस फॉन्ट के साइज को
848. 33:14कैसे बढ़ा सकता हूं तो इसके साइज को अगर
849. 33:16मुझे बढ़ाना है तो मैं सिंपल यहां पे लिख
850. 33:17सकता हूं फोंट साइज हां तो मेरे पास
851. 33:19अलग-अलग आते हैं। मैं यहां पे लिख सकता
852. 33:21हूं 50 पिक्सल तो आप देखोगे इसका फोंट का
853. 33:23साइज बढ़ चुका है। मैं अगर इसको करूंगा 80
854. 33:26पिक्सल तो अब आप देखोगे इसका साइज बढ़ चुका
855. 33:29है। अब आपका सवाल यह होगा कि भैया यह
856. 33:32पिक्सल का मतलब क्या है? और यह पिक्सल
857. 33:35कितने सेंटीमीटर या मीटर या मिलीमीटर में
858. 33:38कितना होता है? पिक्सल का मतलब मुझे पता
859. 33:39ही नहीं है ना। देखो एक पिक्सेल की फुल
860. 33:41फॉर्म मैं तुम्हें बता देता हूं। जो कि
861. 33:43मुझे इंटरव्यू में पूछी गई थी। पिक्सेल की
862. 33:45फुल फॉर्म है पिक्चर एलिमेंट। अब मैं बता
863. 33:47नहीं पाया था। बहुत बेज्जती मैसेज हुई थी।
864. 33:49मैं सिर्फ पिक्चर ही बोल पाया। एलिमेंट
865. 33:50मैं नहीं बोल पाया। तो आप इसको याद रखना।
866. 33:52लेकिन हमने सुना हुआ है कि यार पिक्सल तो
867. 33:54सुना है कसम ने कि मेरा जो कैमरा है वो 12
868. 33:56मेगापिक्सल का है। बहुत सारे लोग बोलते
869. 33:58हैं। पर पिक्सल का एक्चुअल मीनिंग क्या
870. 34:00है? उसकी फिजिकल यूनिटी कितनी होती है? एक
871. 34:04बार Google करें। वन पिक्सल
872. 34:08इन
873. 34:10इंच।
874. 34:12जैसे आप सर्च करते हो तो ये बता देता है
875. 34:14कि भैया 1 पिक्सल इक्वल टू 1/96 ऑफ़ एन
876. 34:17इंच।
877. 34:19दोस्तों
878. 34:20ऑनलाइन यह जो गलती है यह हर जगह फैल रखी
879. 34:24है।
880. 34:26यह गलत है। ये आपको जो आउटपुट में दिखा
881. 34:28रहा है ना यह गलत है। बिल्कुल गलत है। आप
882. 34:31पिक्सेल को सेंटीमीटर, मीटर किसी में
883. 34:33कैलकुलेट नहीं कर सकते दोस्त। हैं। तो
884. 34:37भैया ये Google गलत बता रहा है। जो बाकी
885. 34:39क्रिएटर हैं जो पढ़ा रहे हैं हमें वो भी
886. 34:41गलत बता रहे हैं। हां भाई वो भी गलत बता
887. 34:43रहे हैं। तो भैया फिर प्रूफ करके दिखाओ
888. 34:45फिर मजा आएगा। मैंने कहा पिक्सल को आप इस
889. 34:48तरीके से कैलकुलेट नहीं कर सकते। वो कितने
890. 34:49इंच का होगा। यह कह रहा है 1 पिक्सल =
891. 34:511/96 ऑफ एन इंच एप्रोक्समेटली इक्वल टू
892. 34:54डैश डैश डैश डैश भैया यार ये तो चैट
893. 34:56जीबीटी भी यही बता रहा है। ये भी यही बता
894. 34:57रहा है और आप अलग बता रहे हो। अरे तभी तो
895. 35:00अलग सीखोगे। हां चलो पिक्सल के एक बारे
896. 35:02में बात करते हैं। पिक्सल क्या होती है?
897. 35:04हमारी जो इमेज होती है उसकी सबसे
898. 35:06स्मालेस्ट यूनिट को पिक्सल कहा जाता है।
899. 35:09मैं आपको दिखाता हूं एक बार। पिक्सल इमेज
900. 35:13जब भी हम इमेज खोलते हैं तो आपको अक्सर जो
901. 35:17कोई भी फोटो अगर आप देखोगे इस पे मान लो
902. 35:19इसी फोटो को मैं बात करूं ये पूरी फोटो है
903. 35:22ये आपको ये स्क्वायर बॉक्स दिख रहे हैं ये
904. 35:23स्क्वायर बॉक्स छोटे-छोटे छोटे-छोटे
905. 35:24छोटे-छोटे हां इन्हीं को पिक्सल कहा जाता
906. 35:27है। इन्हीं को क्या कहा जाता है? पिक्सल्स
907. 35:29ये देख रहे हो ये बॉक्स छोटे-छोटे ये
908. 35:31बॉक्स हो गया। ये बॉक्स हो गया। ये बॉक्स
909. 35:33हो गया। इन छोटे-छोटे को बॉक्स को मिला के
910. 35:35एक इमेज क्रिएट होती है। इसी की सबसे
911. 35:39स्मालेस्ट यूनिट को ही हम पिक्सल कहते
912. 35:42हैं। ओके? अब उसका साइज कितना होगा वो अभी
913. 35:46मैं आपको बताता हूं। डरने की बात नहीं है।
914. 35:48तो अभी हम चलते हैं पहले इस पे। मान लो
915. 35:51मेरे पास कोई ऐसे ही मान लो कोई फोटो है।
916. 35:53ये फोटो है। तो इसमें पिक्सल क्या होगा?
917. 35:55तो देखो आपकी फोटो ना कुछ ऐसे होती है रोज़
918. 35:57एंड कॉलम में। बहुत ही इंपॉर्टेंट चीज बता
919. 36:00रहा हूं। बहुत इसको तो लोग एक्सप्लेन भी
920. 36:02नहीं करते। तभी आप रीज़न जान पाओगे। और आज
921. 36:04आप ये भी सीख जाओगे कि इमेज हमारी सिस्टम
922. 36:06के अंदर कैसे स्टोर होती है। ये मैं आपको
923. 36:09दिखा देता हूं। तो मान लो यह आपकी कोई
924. 36:13इमेज है। इसको हम स्क्वायर रो एंड कॉलम्स
925. 36:16में डिवाइड करते हैं। अब ये छोटे-छोटे जो
926. 36:19आपको बॉक्स दिख रहे हैं ये बॉक्स दिख रहा
927. 36:20है। ये बॉक्स दिख रहा है। ये बॉक्स दिख
928. 36:22रहा है। ये ये इन्हीं को मैं पिक्सल कहता
929. 36:24हूं। ये सबसे स्मालेस्ट जो आपको बॉक्स दिख
930. 36:26रहे हैं ना इन्हीं को हम क्या कहते हैं?
931. 36:28पिक्सल कहते हैं। कि हमारे पास कोई फोटो
932. 36:31थी। जैसे अगर हमारे पास कोई भी फोटो है।
933. 36:32जैसे ये फोटो थी। तो इसको मैंने रोज़ एंड
934. 36:35कॉलम में डिवाइड कर दिया। रोज़ एंड कॉलम कि
935. 36:37ऐसे-ऐसे जगह मैंने लाइन खींची। ऐसे करके
936. 36:39लाइन खींची है हॉरिजॉन्टल वर्टिकल। हां।
937. 36:41और जो सबसे छोटे बॉक्स होंगे उन्हीं को
938. 36:43मैं क्या कह रहा हूं? उन्हीं को मैं
939. 36:45पिक्सल कह रहा हूं। अब यहां पे हम कैसे
940. 36:47इसको स्टोर कराते हैं? उसकी मैं बात करता
941. 36:49हूं। अब यहां पे मैं क्या करता हूं कि इस
942. 36:51बॉक्स के अंदर मान लो कोई कलर हो रखा है।
943. 36:53कोई भी कलर हो सकता है। जैसे अगर यहां पे
944. 36:55देखें यहां पे ये वाइट कलर है। ये वाइट है
945. 36:57इस बॉक्स में। यहां पे ब्लैक है। यहां पे
946. 36:59थोड़ा सा ग्रे है इस बॉक्स में। थोड़ा सा
947. 37:01पिंक है। यहां पे आपका थोड़ा सा ग्रीन कलर
948. 37:04है। तो इन सब कलर को मैं स्टोर कराता हूं
949. 37:07अपने सिस्टम के अंदर। तो अगर मैं आपसे
950. 37:10बोलूं कि यहां पे आपके टोटल कितने पिक्सल
951. 37:12प्रेजेंट हैं? तो 1 2 3 4 5 6 7 ठीक है?
952. 37:17और नीचे को 1 2 3 4 5 6 7 8 9 तो टोटल
953. 37:23हमारे पास कितने पिक्सल हो गए? तो सात
954. 37:25पिक्सल ऐसे करके नौ नीचे को है तो 7 * 9
955. 37:28टोटल हमारे पास 63 पिक्सल हो गए हैं
956. 37:30दोस्तों। कितने? 63 पिक्सल हो गए। तो इन
957. 37:3363 पिक्सल के अंदर कौन-कौन सा कलर
958. 37:37प्रेजेंट है? इस बॉक्स के अंदर कौन सा कलर
959. 37:39प्रेजेंट है? मान लो इसके अंदर रेड कलर
960. 37:40मान लो प्रेजेंट था। इसके अंदर ब्लू, इसके
961. 37:42अंदर ग्रीन। क्योंकि आपकी इमेज ऐसी तो
962. 37:44बनती है कि अगर मैं छोटे-छोटे बॉक्स के
963. 37:46कलर को स्टोर करा दूं कि यहां पे कौन सा
964. 37:47कलर है? यहां पे कौन सा है? और सबको मैं
965. 37:49स्टोर अपने सिस्टम के अंदर करा दूं। तो
966. 37:51मैं कह सकता हूं ना कि मैंने इमेज को
967. 37:53स्टोर कर लिया है। अब वो कलर क्या हो सकता
968. 37:56है? जैसे अगर मान लो यहां पे रेड है तो
969. 37:58रेड को मैंने स्टोर करा दिया। ठीक है? उस
970. 38:00उस पर्टिकुलर पिक्सल के कलर को मैंने
971. 38:02स्टोर करा दिया। तो एक पिक्सल के कलर को
972. 38:04जब मैंने स्टोर कराया तो मान लो वहां पे 8
973. 38:06GB की जो भी मात्रा थी रेड, ग्रीन, ब्लू
974. 38:08की मान लो ऐसे करके थी 200, 12 और 19 ऐसे
975. 38:12करके मैंने इसको मेंशन कर दिया। तो मुझे
976. 38:15पता है यह कितनी मेमोरी लेगा? यह तीन बाइट
977. 38:17ऑफ मेमोरी लेगा। ऐसे ही मान लो यहां पे
978. 38:19ग्रीन कलर प्रेजेंट था तो मैंने इस ग्रीन
979. 38:21कलर वाले को भी स्टोर करा दिया कि यहां पे
980. 38:23जो ग्रीन कलर है उस वह कैसा दिख रहा है
981. 38:25RGB में क्योंकि मैं RGB वैल्यू को ही
982. 38:27स्टोर कराता हूं क्योंकि कलर को मुझे
983. 38:28स्टोर करना है इस बॉक्स के कलर को इस
984. 38:30बॉक्स के इस बॉक्स से जैसे यहां पे ये
985. 38:31फोटो थी सेम अगर मैं किसी और फोटो को ओपन
986. 38:34करता हूं तो सेम कि इस बॉक्स में कौन सा
987. 38:36कलर है इसमें कौन सा है इसमें इसमें इसमें
988. 38:38तो मेरे पास यहां पे टोटल 63 बॉक्स हैं और
989. 38:4063 के 63 बॉक्स के मुझे कलर को स्टोर करना
990. 38:43पड़ेगा तो इस बॉक्स के कलर को भी गड़ा
991. 38:45दिया इसके भी इसके भी इसके भी तो इस तरीके
992. 38:47से मैं कलर को स्टोर कराता गया दोस्तों
993. 38:48यहां पे। तो मान लो इसका जो कलर था ऐसा था
994. 38:51कि रेड की मात्रा इतनी थी। ब्लू ग्रीन की
995. 38:53मात्रा इतनी और जो ब्लू था वो था इतना
996. 38:56मात्रा में। तो ये भी आपका कितना लेगा? 3
997. 38:58बाइट। तो टोटल आपकी मेमोरी कितनी कंज्यूम
998. 39:01होगी दोस्तों? बताइए। इंटू मैं अगर इसको 3
999. 39:03बाइट कर दूं ये तो होगा कि मेरे पास टोटल
1000. 39:0663 पिक्सल हैं। हर कोई तीन-तीन बाइट ले
1001. 39:08रहा है। तो टोटल ये कितने हो जाएंगे? आपके
1002. 39:10टोटल मेमोरी ये कितने लेगा? 6 * 3 = 18
1003. 39:13189 बाइट ऑफ मेमोरी ये लेगा। तो आपका जो
1004. 39:16इमेज का साइज हो जाएगा वो 189 बाइट का हो
1005. 39:19जाएगा दोस्तों सिंपली। इस तरीके से आप
1006. 39:21इमेज का साइज को निकाल सकते हैं। तो हम
1007. 39:23क्या करते हैं? हमारे पास कोई भी फोटो है
1008. 39:25उसको रोज़ एंड कॉलम में बांटो। हां। और जो
1009. 39:28सबसे छोटा बॉक्स होगा वही हमारा पिक्सल
1010. 39:31कहलाया जाता है। उस पिक्सल के कलर को नोट
1011. 39:33कर लो। तो अगर मैंने हर एक पिक्सल के कलर
1012. 39:35को नोट कर लिया कि भैया इसका कलर क्या था?
1013. 39:38इसका कलर क्या था? तो मैं कह सकता हूं कि
1014. 39:39मैंने इमेज को स्टोर कर लिया तो इस तरीके
1015. 39:42से हमने इमेज को स्टोर कर लिया और टोटल
1016. 39:44कितनी मेमोरी लगी? 189 बाइट्स 63 पिक्सल
1017. 39:46को स्टोर करना था। हर एक 3 बाइट लेता था।
1018. 39:48तो 189 बाइट्स में मैंने पूरे डाटा को
1019. 39:50स्टोर कर दिया है। आई होप यह पॉइंट क्लियर
1020. 39:53होगा। इवन अगर आप देखोगे जैसे मेरे पास यह
1021. 39:56फोन है। मैं इससे फोटो खींचता हूं ऐसे
1022. 39:58करके क्लिक। है ना? अब ये जो फोन है जब
1023. 40:01मैंने इससे फोटो क्लिक करी तो आपने एक
1024. 40:04अक्सर देखा होगा कि जो हमारा फोन अक्सर
1025. 40:06होता है वो होता है 16:यो 9 में। कि 16
1026. 40:09ऐसे और नाइन ऐसे। अक्सर आपने देखा होगा
1027. 40:12उसका जो रेोल्यूशन होता है 16:9 में हम
1028. 40:14उसको कहते हैं। ओके? मान लो मैंने जो इसकी
1029. 40:16फोटो खींची है अक्सर आपने देखा होगा यह
1030. 40:18वाला देखा होगा कि 1920 * 1080
1031. 40:23ऐसे करके पिक्सल कि भैया इसका मतलब क्या
1032. 40:26होता है? आपने देखा होगा कि आपकी जो इमेज
1033. 40:28है 1920 * 1080 पिक्सल में है। तो इसका
1034. 40:30मतलब क्या है? कि 1920 पिक्सल ऐसे करके
1035. 40:32लगाए गए हैं। ऐसे करके और 1080 आपके नीचे
1036. 40:36को। एक ये ये ऐसे करके। ठीक है? 1920
1037. 40:40कैसे? 1 2 3 4 5 अप टू 1920 और 1080 का
1038. 40:44मतलब 1 2 3 4 5 ऐसे करके नीचे को तो ये हो
1039. 40:47गया आपके पास टोटल आपके इतने पिक्सल हैं
1040. 40:49और एक पिक्सल कितनी मेमोरी ले रहा है तो
1041. 40:50भैया 3 बाइट ऑफ मेमोरी ले रहा है तो ये
1042. 40:52एप्रोक्स आपका 6 MB के अराउंड आ जाता है
1043. 40:56अगर आप इसको कैलकुलेट करते हैं एप्रोक्स
1044. 40:58कह रहा हूं मैं तो इस तरीके से आपकी
1045. 41:00कैलकुलेशन हैपन होती है। अब आप खुद देखो
1046. 41:03कि अगर इस सेम इमेज को सेम इमेज को मैंने
1047. 41:07फोन में खोला है। उसको क्या करना है कि
1048. 41:09उसको ऐसे करके बनाने हैं पिक्सल कि 1920
1049. 41:12पिक्सल 1920 बॉक्सेस मुझे इधर को बनाने
1050. 41:14हैं और 1080 बॉक्सेस मुझे नीचे को बनाने
1051. 41:16हैं। तो ऐसे करके ये क्रिएट हो जाएगा कि
1052. 41:18मान लो ऐसे करके एक इधर उसके बगल में एक
1053. 41:21और पिक्सल उसके बगल में एक और पिक्सल और
1054. 41:23सेम नीचे को भी ऐसे नीचे को 1080 पिक्सल
1055. 41:26बनाने हैं उसे और इधर को उसको 1920 पिक्सल
1056. 41:28बनाने हैं। Okay? हां। अब आप खुद देखो।
1057. 41:31अगर मैं सेम इमेज को अपने फोन में खोलता
1058. 41:34हूं और सेम इमेज को जो ये सेम इमेज है,
1059. 41:38सेम इमेज है। इस सेम इमेज को अगर मैं अपने
1060. 41:41किस में खोलता हूं? अपने कंप्यूटर में
1061. 41:44खोलता हूं या फिर अपने टीवी में खोलता
1062. 41:46हूं। अब उसको पता है कि भैया उसको 1920 यह
1063. 41:49छोटे-छोटे बॉक्सेस ऐसे करके बनाने हैं और
1064. 41:521080 बॉक्सेस ऐसे-से करके बनाने हैं। नीचे
1065. 41:54को बनाने हैं। अब बताओ कि क्या यहां पे जो
1066. 41:58पिक्सल का साइज होगा क्या उसकी वैल्यू को
1067. 42:01हम कैलकुलेट कर सकते हैं? क्योंकि मुझे
1068. 42:02पता होगा यहां पे जो पिक्सल का साइज होगा
1069. 42:04वो बड़ा-बड़ा होगा। क्योंकि अगर मैं बोलूं
1070. 42:06यह भी आपका 16:9 का ही है। इसका जो
1071. 42:09रेोल्यूशन है 16:9 का ही है। और यहां पर
1072. 42:11उसको 1920 पिक्सल लगाने हैं। ऐसे करके
1073. 42:14हॉरिजॉन्टली ऐसे करके और यहां पे भी उसे
1074. 42:181920 पिक्सल लगाने हैं। नीचे वाले में भी
1075. 42:20अगर आप सेम फोटो को बड़े में खोलते हो।
1076. 42:23यहां पे भी मान लो इसका रेोल्यूशन भी 16:9
1077. 42:25है। यहां पे भी उसे 1920 पिक्सल लगाने
1078. 42:27हैं। तो आप देख सकते हैं ना कि यहां पे जो
1079. 42:29पिक्सल का साइज होगा वो बड़ा होगा। तो हम
1080. 42:31यह नहीं कह सकते कि जो पिक्सल है वो उसको
1081. 42:35हम इंच में और सेंटीमीटर में कैलकुलेट कर
1082. 42:37रहे हैं। नहीं कर सकते। आप खुद देख लो ना
1083. 42:40यहां पे कि मुझे 1920 * 1080 का मतलब क्या
1084. 42:42है? कि 1920 बॉक्सेस ऐसे करके होंगे और
1085. 42:451080 नीचे करके होंगे। जैसे यहां पे थे कि
1086. 42:477 * 9 तो से ऐसे करके थे और नाइन ऐसे करके
1087. 42:50थे। ऐसे हर उसमें। तो आप खुद देख लो कि
1088. 42:53अगर मेरे पास छोटी स्क्रीन हुई उसमें अगर
1089. 42:54मुझे खोलना हो एक उस इस सेम इमेज को तो
1090. 42:57यहां पे आप देख सकते हो कि जो बॉक्सेस का
1091. 42:59साइज होगा वो छोटा होगा लेकिन वही यहां पे
1092. 43:01जो बॉक्स का साइज होगा वो बड़ा आएगा तो
1093. 43:03यहां पे हम नहीं कह सकते कि भैया उसका
1094. 43:05साइज इतना ही होगा वो उतने सेंटीमीटर होगा
1095. 43:06या उतना मिलीमीटर होगा और मैं बताऊं ये
1096. 43:08मिसकंसेप्शन कहां से आया ये तब आया जिस
1097. 43:11इंसान ने पहली बार ये कांसेप्ट लेके आया
1098. 43:14था ये वाला जो आपका आंसर आपको दिखाता है
1099. 43:16ना ये 1 पिक्सल इक्वल टू 1 96 ऑफ एन इंच
1100. 43:19ये कांसेप्ट यहां से आया था कि जो उस
1101. 43:21इंसान ने जिसने सबसे पहले ये कांसेप्ट
1102. 43:23दिया था उसके कंप्यूटर स्क्रीन के बेसिस
1103. 43:25पे आया था ये। उन्होंने उसके कंप्यूटर के
1104. 43:28स्क्रीन के बेसिस में उसको नाप लिया था।
1105. 43:30लेकिन आज वो ट्रू नहीं है क्योंकि आज
1106. 43:31हमारे पास जो स्क्रीन होती है अलग-अलग
1107. 43:33उसमें होती है। अलग-अलग वे में होती हैं।
1108. 43:35तो आई होप आपको ये पूरा कांसेप्ट क्लियर
1109. 43:38होगा। अगर आज से अगर आपको कोई पूछे कि
1110. 43:41पिक्सल का साइज कितना होता है? तो ये आंसर
1111. 43:44मत देना। उसको बोलना पिक्सल का कोई साइज
1112. 43:46नहीं होता। वो स्क्रीन पे डिपेंड करता है।
1113. 43:49ठीक है? बड़ी स्क्रीन हुई तो भैया आपका
1114. 43:51पिक्सल का साइज बढ़ जाएगा। छोटी स्क्रीन
1115. 43:53हुई तो उसमें घट जाएगा। अगर सेम रेोल्यूशन
1116. 43:56है हमारे पास कि मुझे इसी रेज़ोल्यूशन की
1117. 43:58इमेज कि 1920 को आपको ऐसे करके दिखाना है।
1118. 44:001080 को आपको ऐसे-ऐसे करके दिखाना है। तो
1119. 44:02टोटल मेरे पास इनटू 3 बाइट्स क्योंकि एक
1120. 44:04पिक्सल हमारे तीन बाइट ऑफ मेमोरी लेता है।
1121. 44:05तो ये आ गई हमारी 6 MB और हां एक और चीज
1122. 44:09अब आप कैलकुलेट मत करने लग जाना अपने फोन
1123. 44:11से। आपने जब भी कोई फोटो खींची हां आपने
1124. 44:13उसका रेज़ोल्यूशन देख लिया। आपने उसको 3
1125. 44:15बाइट से मल्टीप्लाई करा। आप बोलोगे यार
1126. 44:17भैया पर मेरे फोन के अंदर तो वो सिर्फ 1
1127. 44:20MB ही मेमोरी ले रहा है। ऐसा कैसे हो रहा
1128. 44:22है? मेरे फोन के अंदर भैया वो तो 1 MB
1129. 44:26मेमोरी ले रहा है। तो मेरे दोस्त इसके बाद
1130. 44:28भी कंप्रेशन की टेक्निक यूज़ होती है जिसको
1131. 44:30आप डीएसए वगैरह में सीख सकते हैं कि हम इस
1132. 44:32इमेज को और कंप्रेस करके 1 MB तक ले जाते
1133. 44:35हैं। तो ये वाला है जब हम इमेज को कंप्रेस
1134. 44:37नहीं कर रहे हैं। ओके? ये बिल्कुल रॉ डेटा
1135. 44:40है। तो आई होप आज आपको ये कांसेप्ट क्लियर
1136. 44:42होगा। तो हम आ जाते हैं इधर अपने कोड में।
1137. 44:45तो यहां पे हमने समझ लिया पिक्सल का कोई
1138. 44:47भी आपका क्या नहीं होता एक साइज नहीं होता
1139. 44:49मिलीमीटर सेंटीमीटर जब मैंने पहली बार ये
1140. 44:51कांसेप्ट पढ़ा था तो मुझे वैसे ही लगता था
1141. 44:52कि हां होता होगा लेकिन बाद में मेरी जब
1142. 44:54मैंने सोचा क्योंकि इंटरनेट में ऑल ओवर द
1143. 44:56इंटरनेट यही वैल्यू दे रखी थी तब मैंने
1144. 44:58बहुत ज्यादा रिसर्च करी तब जाके मुझे आंसर
1145. 45:00प्राप्त हुआ तो अगर आज आपको ये कांसेप्ट
1146. 45:03क्लियर हुआ है तो लिख दो भैया स्वाद आ
1147. 45:06चुका है हमें अच्छे से ओके अब हम आगे
1148. 45:10बढ़ते हैं मान लीजिए मेरे पास कोई ये
1149. 45:12लिस्ट है इसके साइज को मुझे अब डिफाइन
1150. 45:14करना है किसके इस लिस्ट के साइज को मुझे
1151. 45:16डिफाइन करना है। तो इसको मैं कैसे बना
1152. 45:18सकता हूं? मान लो ये लिस्ट लिखा फॉनट साइज
1153. 45:20और इसको मैंने मार्क कर दिया 1 ईएम। ईएमबी
1154. 45:24होता है। ये ईएमए क्या होता है? ये कहता
1155. 45:26है कि जो मेरा साइज होगा वो मेरे जो
1156. 45:28पैरेंट है उसके मल्टीपल में होगा। तो जैसे
1157. 45:31मैं ये लिस्ट को देखूं ये एलआई को देखूं।
1158. 45:33इसका पैरेंट कौन होगा? पैरेंट और चाइल्ड
1159. 45:35का रिलेशनशिप पहले कैसे हम निकालते हैं?
1160. 45:36उसको देखते हैं। जैसे ये बॉडी है। तो बॉडी
1161. 45:39का जो डायरेक्ट है ये H1 भी उसका चाइल्ड
1162. 45:41होगा। ये H2 भी उसका चाइल्ड होगा। अनऑर्डर
1163. 45:44लिस्ट भी उसका चाइल्ड है। यह H2 भी उसका
1164. 45:47चाइल्ड है। हां। तो सेम जैसे यह लिस्ट है
1165. 45:49यह वाला लिस्ट। तो इसका पैरेंट कौन हो
1166. 45:51जाएगा? जो ठीक उससे एक लेवल ऊपर होगा। तो
1167. 45:53लिस्ट से एक लेवल ऊपर कौन है? अनऑर्डर
1168. 45:54लिस्ट है। तो अनऑर्डर लिस्ट उसका पैरेंट
1169. 45:56हो गया। सेम अगर आपको H1 का पैरेंट ढूंढना
1170. 45:59है। देखना उससे एक लेवल ऊपर कौन है? भैया
1171. 46:00बॉडी है। क्योंकि ये बॉडी के अंदर पैक हो
1172. 46:02रखा है। एक लेवल ऊपर। तो ये इसके अंदर ही
1173. 46:04है ना? बॉडी के अंदर ही तो है ये। H1 देखो
1174. 46:05बॉडी यहां पे हमारी एंड हो रही है। हां।
1175. 46:07तो H1 का पैरेंट कौन हो गया? ये बॉडी हो
1176. 46:09गया। सेम अगर मैं बोलूं कि भैया इसका
1177. 46:11पैरेंट कौन होगा इस लिस्ट वाले का। तो यह
1178. 46:13किसके अंदर रैप है? इस अनऑर्डर लिस्ट इस
1179. 46:15ऑर्डर लिस्ट वाले का। तो इसका पैरेंट यह
1180. 46:17हो जाएगा। तो यहां पे हम क्या कह रहे हैं
1181. 46:19कि भैया जो भी आपका लिस्ट है उसका जो साइज
1182. 46:22होगा वो कितना होगा? वो अपने पैरेंट के
1183. 46:24हिसाब से होगा। कि भैया मान लो अगर पैरेंट
1184. 46:26है जैसे मान लो अगर मैं इस लिस्ट की बात
1185. 46:28करता हूं तो मैंने इसका लिख दिया 1 ईएम।
1186. 46:30इस लिस्ट का साइज लिख दिया मैंने 1 ईएम।
1187. 46:32तो 1 ईएम का मतलब है अगर इस अनऑर्डर लिस्ट
1188. 46:34का फॉन्ट का साइज मान लो 20 पिक्सल है। तो
1189. 46:37इसका भी 20 पिक्सल ही होगा। तो 1 * जो भी
1190. 46:40पैरेंट का आपका साइज है अगर मैंने 2m कर
1191. 46:42दिया मैंने यहां पर अगर लिखूं अनऑर्डर
1192. 46:45लिस्ट
1193. 46:46फोंट साइज 20 पिक्सल ओके तो अगर मैंने
1194. 46:51लिस्ट को 1 ईएम करा है तो भैया लिस्ट
1195. 46:53किसके अंदर है इस अनऑर्डर लिस्ट के तो ये
1196. 46:55अपने पैरेंट के वन के मल्टीपल में चला
1197. 46:57जाएगा तो इसका साइज भी 20 पिक्सल ही आएगा
1198. 46:59अगर इसको मैं टू कर दूं तो इसका मतलब हो
1199. 47:02जाएगा कि मेरा साइज 40 पिक्सल हो जाएगा कि
1200. 47:042 * 20 अगर मैं इसको थ्री कर दूं तो थ्री
1201. 47:06तो अपने पेरेंट के रिलेटिव में उसके फों्ट
1202. 47:09का साइज कितना होने वाला है वो आपको ईएम
1203. 47:11या इसको हम एम भी बोलते हैं सिंपल कि उसके
1204. 47:13बेसिस में मेरे साइज को डिफाइन करा जाएगा।
1205. 47:16मेरे पैरेंट के जो मेरा डायरेक्ट पैरेंट
1206. 47:17है। ठीक? तो सेम यहां पे भी कि इस वाली
1207. 47:20लिस्ट के इसके बेसिस में उसके साइज को
1208. 47:21डिफाइन करा जाएगा इस ऑर्डर लिस्ट के बेसिस
1209. 47:23पे। क्लियर है ये पॉइंट? हां भैया। अब और
1210. 47:25क्या-क्या है हमारे पास? एक आता हमारे पास
1211. 47:27कौन? मान लो मैंने पकड़ लिया किसी h1 को।
1212. 47:31या मैंने h2 को पकड़ लिया। मैंने लिख दिया
1213. 47:33की भैया आपका जो फॉनट का साइज होगा, वो
1214. 47:35होगा 2m। तो यह बताएगा कि जो मेरा साइज
1215. 47:38होगा वो ट्वाइस होगा। जो मेरा रूट एलिमेंट
1216. 47:41है। रूट एलिमेंट हम किसको बोलेंगे? जो ये
1217. 47:44सब किसके अंदर पैक हैं? इस hटीएमl hटीएमl
1218. 47:47ही हमारा रूट एलिमेंट होता है। तो अगर इस
1219. 47:49hटीएमएल का फॉन्ट साइज
1220. 47:53अगर hटीएमl वाले का फोंट साइज अगर मैं
1221. 47:55यहां पे 40 पिक्सल कर दूं तो इसका साइज हो
1222. 47:58जाएगा आपका 80 पिक्सल। रूट का पैरेंट का
1223. 48:01नहीं जो रूट है और रूट हमेशा ये आपका
1224. 48:03एचटीएमएल वाला होने वाला है कि भैया जो
1225. 48:05अगर एचटीएमएल का साइज मेरा कितना है फोंट
1226. 48:07का 20 पिक्सल सॉरी 40 पिक्सल है तो मेरा
1227. 48:10हो जाएगा उसका डबल 80 तो अगर मैं इसको
1228. 48:12थ्री कर दूं तो ये हो जाएगा आपका 120
1229. 48:15पिक्सल तो इस तरीके से हम इसके साइज को भी
1230. 48:16बता सकते हैं। और कैसे-कैसे हम बता सकते
1231. 48:19हैं। मान लो मैं अगर यहां पे पकड़ लूं।
1232. 48:23चलो अभी H2 को रहने देते हैं।
1233. 48:26अब अगर मैं एक और आता है कि H2 को मैं ऐसे
1234. 48:29करके भी लिख सकता हूं कि मेरा जो फों्ट
1235. 48:30साइज होगा वो वन ऑफ व्यू पोर्ट विड्थ
1236. 48:33होगा। जैसे ही मैंने इसको वन व्यू पोर्ट
1237. 48:34विड्थ करा तो आप देखोगे कि H2 वाले का
1238. 48:37साइज कितना छोटा हो गया। तो अगर मैंने
1239. 48:39इसको टू कर दिया तो ये हो जाएगा टू ऑफ़
1240. 48:42व्यू पोर्ट विड्थ। तो ये क्या बताता है?
1241. 48:44व्यू पोर्ट विड्थ का मतलब क्या है? व्यू
1242. 48:46पोर्ट विड्थ का मतलब है कि ये जो आपकी
1243. 48:48विज़िबल स्क्रीन है इसकी आप विड्थ को देखो।
1244. 48:50इसकी आप विड्थ को देखो। ये विड्थ देखो आप
1245. 48:53ये विड्थ यहां से लेके यहां तक इसकी विड्थ
1246. 48:54है। तो जो इसका ये साइज होगा इसका ये जो
1247. 48:57साइज होगा ये 2% होगा अगर मैंने टू लिखा
1248. 49:00है तो 2% ऑफ व्यूप विड्थ विड्थ के 2% के
1249. 49:03बराबर उसके फॉन्ट का साइज होगा। तो अगर
1250. 49:05मैं इसको 100% मानूं तो ये 2% होगा इस
1251. 49:08पूरे व्यू विड्थ के। सेम आप यहां पर अगले
1252. 49:11पे भी अप्लाई कर सकते हैं। मान लो मैं अगर
1253. 49:13यहां पर लिख दूं कि जो मेरा लिस्ट एलिमेंट
1254. 49:16है लिस्ट वाले को मैं कमेंट कर देता हूं।
1255. 49:18जो मेरा लिस्ट वाला है उसका जो फोंट साइज
1256. 49:22है अगर मैंने लिख दिया थ्री ऑफ़ व्यूप
1257. 49:26हाइट। तो व्यूपॉट हाइट का मतलब क्या होगा?
1258. 49:28यहां से लेके यहां तक। ठीक है? इसके 3% तो
1259. 49:31आप देखोगे ये 3% के बराबर उसकी व्यूप हाइट
1260. 49:34होगी। ठीक है? जो उसका फों्ट का साइज
1261. 49:36होगा। अगर इसको मैं पांच कर दूं तो आप
1262. 49:38देखोगे वो पांच के बराबर हो जाएगा। तो
1263. 49:39देखो वो साइज अब आपका बढ़ने लग गया। ये
1264. 49:41देख लो इस तरीके से। तो व्यूप हाइट ये
1265. 49:44देखो ये व्यूप की हाइट है। तो इसके कितने
1266. 49:47का 5% तो ये हो गया आपके पास व्यूप विड्थ।
1267. 49:50ये हो गया आपके पास व्यूप हाइट। अगला क्या
1268. 49:52होता है हमारे पास? अगर हम देखें अगर हम
1269. 49:54यहां पे देखें हमारे पास अभी एक है
1270. 49:55परसेंटेज वाला। परसेंटेज क्या होता है? अ
1271. 49:57परसेंटेज यूनिट डिफाइन अ साइज दैट इज़
1272. 49:59रिलेटेड टू द साइज ऑफ़ इट्स डायरेक्ट
1273. 50:01पैरेंट एलिमेंट।
1274. 50:03कि जो मेरा डायरेक्ट पैरेंट एलिमेंट है
1275. 50:06उसके रिलेटिव में मेरा साइज कितना होगा?
1276. 50:08तो अगर मैं उसको कर दूं 50% तो मेरा जो भी
1277. 50:11हाइट होगी जो भी मेरा फॉन्ट का साइज होगा
1278. 50:13मेरे पैरेंट के 50% होगा। तो अगर मेरा
1279. 50:16पैरेंट का जैसे अगर हम यहां पे देखें अ
1280. 50:19यहां पे चलते हैं पहले। जैसे अगर मैं यहां
1281. 50:21यहां पे इसको लिख दूं इसको अभी कमेंट कर
1282. 50:22देते हैं कि मैंने लिख दिया फों्ट का जो
1283. 50:25साइज होगा
1284. 50:27यह होगा 50% तो इसका मतलब ये होगा कि जो
1285. 50:30ये लिस्ट है जो ये लिस्ट वाला एलिमेंट
1286. 50:32हमें यहां पे दिख रहा है इसका जो फोंट का
1287. 50:35साइज होगा वो अनऑर्डर लिस्ट के 50% के
1288. 50:37फॉनट के साइज के बराबर होगा तो अगर
1289. 50:38अनऑर्डर लिस्ट का 50 पिक्सल है तो इसका हो
1290. 50:41जाएगा कितना 25 पिक्सल उसका आधा हो जाएगा
1291. 50:43तो उसके परसेंटेज के बेसिस पे तो अब हम
1292. 50:46यहां पे अगर देखें अपने आउटपुट को तो हमें
1293. 50:47यहां पे ये दिख सकता है कि ये सब के सब
1294. 50:49छोटे हो चुके हैं। ओके? हां। तो परसेंटेज
1295. 50:52का मतलब पता है कि भैया डायरेक्ट जो
1296. 50:54पैरेंट है उसके बेसिस पे मेरा साइज कितना
1297. 50:56आएगा? आई होप ये पॉइंट क्लियर होगा। अब
1298. 50:59हमने ये सारे एग्जांपल समझ लिए। अब और
1299. 51:01हमारे पास क्या-क्या है? इसको हम कमेंट कर
1300. 51:04लेते हैं। ऐसे ही हमारे पास फोंट साइज के
1301. 51:06अलावा फोंट फैमिली भी हमारे पास आता है कि
1302. 51:09मैं कौन सा फॉनट की फैमिली को इस्तेमाल
1303. 51:11करना चाहता हूं। तो इतने सारे आपके पास
1304. 51:13फोंट की फैमिली है। तो जैसे ही मैं इसको
1305. 51:15लिखता हूं एक तो आप देखिएगा कि भैया पहले
1306. 51:17मैं जो फोंट फैमिली H2 के लिए यूज़ करूंगा
1307. 51:19वो ये वाली करूंगा कि मेरा फॉन्ट कैसे
1308. 51:21दिखेगा H2 वाले का। तो अगर मैं H2 को अगर
1309. 51:23आपको दिखाऊं तो इसका फॉन्ट चेंज हो चुका
1310. 51:25है। है ना? हां। अब कई बार ऐसा होता है कि
1311. 51:28किसीकि ब्राउज़र के अंदर ये गिल साइंस
1312. 51:29प्रेजेंट नहीं है। तो फिर वो इस वाले को
1313. 51:31अप्लाई करेगा। मान लो ये वाला फॉन्ट भी
1314. 51:34ब्राउज़र के अंदर एप्लीकेबल नहीं है। मतलब
1315. 51:37मतलब प्रेजेंट नहीं है तो वो कैलबरी को
1316. 51:39अप्लाई करेगा। अगर यह भी नहीं है तो इसको
1317. 51:41नहीं है तो लास्ट में इसको क्योंकि यह तो
1318. 51:43सबके अंदर प्रेजेंट रहता ही है। तो यह फॉल
1319. 51:45बैक आपका मैकेनिज्म है। तो सबसे पहले हम
1320. 51:47इसको देख रहे थे। अगर यह प्रेजेंट नहीं
1321. 51:49हुआ ब्राउज़र के अंदर मतलब जिस ब्राउज़र के
1322. 51:50अंदर आपका कोड रेंडर हो रहा है मान लो
1323. 51:52वहां पे गिल सेंस को सपोर्ट नहीं दिया
1324. 51:54जाता है। तो वो इस वाले को के ऊपर फॉल बैक
1325. 51:56करेगा। वरना इसके ऊपर वरना इसके ऊपर लास्ट
1326. 51:58में इसके ऊपर। ये हो जाता है आपका क्या?
1327. 51:59फोंट फैमिली। अब फॉन्ट फैमिली आपके
1328. 52:01अलग-अलग टाइप के प्रेजेंट हैं। अगला होता
1329. 52:03है हमारे पास फोंट वेट। कि हमारा जो फों्ट
1330. 52:06है उसका वेट कितना होने वाला है? तो आपको
1331. 52:08मैं दिखाऊं जैसे मैंने 300 लिखा तो आप
1332. 52:09देखोगे इसका वेट दिखा आपको चेंजेस ये e को
1333. 52:12देखना एक्सेस वाले को देखना मैं अगर इसको
1334. 52:14500 कर दूं आपको खुद दिख जाएगा। ये देखो
1335. 52:17अब थोड़ा मोटा हो चुका है। ये कहां तक
1336. 52:19जाता है? ये 100 से लेके 900 वैल्यू तक
1337. 52:21जाता है। तो फॉन्ट का वेट हमारा बढ़ रहा
1338. 52:23है। तो आपको क्या ये याद रखने की जरूरत है
1339. 52:25सब कुछ? नहीं। वो आपको यहीं पे ऑप्शन सब
1340. 52:27कुछ दे देगा। और क्या-क्या होता है हमारे
1341. 52:29पास? फॉन्ट साइज देख लिया। फॉन्ट फैमिली
1342. 52:30दे दिया। फॉन्ट स्टाइल देख लिया है। और
1343. 52:32फोंट का हमने अभी तक स्टाइल नहीं देखा।
1344. 52:34सॉरी। तो फॉन्ट स्टाइल में हम देखें तो हम
1345. 52:36इटैलिक करना चाहते हैं। कौन सा करना चाहते
1346. 52:37हैं? अगर मैं इसको इटैलिक करूं तो वो मुझे
1347. 52:39इटैलिक वे में दिखना स्टार्ट हो जाएगा। तो
1348. 52:41यही यहां पे हमारे सारे काम होते हैं। अब
1349. 52:44यहां तक तो हम फोंट के बारे में काफी कुछ
1350. 52:45सीख चुके हैं। अब कई फॉनट ऐसे होते हैं कि
1351. 52:47जो हमारे ब्राउज़र के अंदर मान लो यहां पे
1352. 52:49प्रेजेंट नहीं है। ऑनलाइन कहीं प्रेजेंट
1353. 52:51है। मुझे उनको इस्तेमाल करना है। तो मान
1354. 52:53लो Google फोंट्स एक बहुत ही बढ़िया
1355. 52:56वेबसाइट है हमारे पास। जहां से मैं फॉनट्स
1356. 52:58का इस्तेमाल कर सकता हूं। तो यहां जैसे ही
1357. 53:00मैं Google फॉनट्स के अंदर आया। अब यहां
1358. 53:02पे आपके पास अलग-अलग फॉनट्स प्रेजेंट हैं।
1359. 53:03मान लो मैं अपनी वेबसाइट के अंदर ये वाला
1360. 53:05फॉन्ट इस्तेमाल करना चाहता हूं। तो मैंने
1361. 53:06इस पे क्लिक किया। हां। तो मान लो मुझे
1362. 53:08इसको यूज़ करना है तो मैं गेट फॉन्ट पे
1363. 53:10क्लिक करूंगा। तो आपके पास ये फॉन्ट आ
1364. 53:12जाएगा। तो ये गेट एंबेड कोड पर जैसे ही
1365. 53:14मैं क्लिक करूंगा इसका मेरे पास कोड आ
1366. 53:16जाएगा। ये कह रहा है कि भैया पहले इसको
1367. 53:17लिंक करा दो। तो मैंने कॉपी कोड को कॉपी
1368. 53:19किया। पहले सबसे पहले इसको हम अपने कोड के
1369. 53:21अंदर लिंक करा देंगे क्योंकि ये जो कोड है
1370. 53:25जो ये फॉन्ट है ये ऑनलाइन प्रेजेंट है। यह
1371. 53:27मेरे इस सिस्टम के अंदर प्रेजेंट नहीं है।
1372. 53:29तो हमने इसको लिंक करा दिया। उसके बाद अगर
1373. 53:31आपको इसको इस्तेमाल करना है तो आप इसको
1374. 53:33कॉपी कर दो जो ये अंदर का कोड है ये वाला
1375. 53:36ये वाली फॉन्ट फैमिली इसको आप कॉपी कर
1376. 53:38देना तो इसको मैं कॉपी करके यहां ले आता
1377. 53:40हूं मान लो मुझे इसके अंदर ये वाला
1378. 53:42इस्तेमाल करना है इसको हटा देते हैं इसको
1379. 53:44मैं इस्तेमाल करना चाहता हूं और इस तरीके
1380. 53:46से मैंने दिखा दिया आप बस यहां पे वेट
1381. 53:48मेंशन कर दें क्योंकि इसके पास वेट अभी
1382. 53:49प्रेजेंट है नहीं तो मैं मान लो 300 वाला
1383. 53:51इस्तेमाल करना चाहता हूं तो अब आप देखोगे
1384. 53:54इसको तो ये देखो एक्सरसाइज इस तरीके से
1385. 53:56दिख रहा है जो फॉन्ट मुझे चाहिए था अगर
1386. 53:58इसको 500 कर दूं अपने हिसाब से मैं उसके
1387. 54:00साइज को देख सकता हूं। तो ये 500 साइज का।
1388. 54:02तो इस तरीके से हम Google फॉन्ट का
1389. 54:03इस्तेमाल कर सकते हैं जो कि ऑनलाइन
1390. 54:05प्रेजेंट है। अगर फ्यूचर में आपको कोई और
1391. 54:07फॉन्ट देखना है। जैसे अगर मैं मान लो मैं
1392. 54:09बैक आया यहां पे। अब मुझे मान लो कोई और
1393. 54:12मान लो मुझे रोबोटो वाला यूज़ करना है। तो
1394. 54:14मैं इस पे आया। हां। तो गेट फॉन्ट को
1395. 54:16क्लिक कर दो। तो आप देखोगे आपके अंदर दो आ
1396. 54:17चुके हैं। अब मुझे ये वाला इस्तेमाल करना
1397. 54:19है। ये वाला है ना? हां। तो गेट फॉन्ट पे
1398. 54:22हम चले गए थे। गेट एंबेडेड कोड। तो आप देख
1399. 54:24सकते हो कि भैया यहां पे मेरे पास सारा
1400. 54:25कोड प्रेजेंट है। रोबोटो वाले का कोड मेरे
1401. 54:28पास यह रहा। यह वाला यह नीचे वाला और उसका
1402. 54:30जो स्टाइलिंग का लिंक शीट है वो यह रहे।
1403. 54:32तो हम इनको भी कॉपी पेस्ट कर सकते हैं। तो
1404. 54:35मान लो अगर आपको फ्यूचर में यह वाला पहला
1405. 54:36वाला फॉन्ट चाहिए इसको आप डिलीट कर सकते
1406. 54:38हो। सिर्फ यही चाहिए तो गेट एंबेड करके आप
1407. 54:40इसके कोड को ले सकते हैं। इस तरीके से शीट
1408. 54:42का लिंक और जो भी आपका कोड होगा उसको आप
1409. 54:44यहां पे कॉपी पेस्ट कर सकते हैं। बस आपको
1410. 54:46यहां पे वेट को मेंशन करना पड़ेगा कि आपको
1411. 54:48कितना उसका वेट चाहिए। तो अब हमने सीख
1412. 54:51लिया है कि हमारा फोंट क्या होता है? वेट,
1413. 54:53व्यूपट विड्थ, हाइट और ये सारे कांसेप्ट
1414. 54:56हमारे क्लियर हो चुके हैं। फोंट का स्टाइल
1415. 54:58भी हमने देख लिया है। अब आपके लिए होमवर्क
1416. 54:59है कि फॉनट का शॉर्टहैंड प्रॉपर्टी क्या
1417. 55:02होती है? इसको एक बार देखना है। ये आपके
1418. 55:04लिए होमवर्क है। अब आपको क्या करना है? जो
1419. 55:07भी मैंने आज आपको सिखाया है, उनके ऊपर
1420. 55:09आपको आज काम करना है। ये क्या हो गया मेरे
1421. 55:12को में? इसको हटा देते हैं। ये लो। ठीक
1422. 55:15है? तो ये रहा। तो आज आपको बैठना है,
1423. 55:19प्रैक्टिस करना है। जो भी मैंने सिखाया
1424. 55:20है, इनको प्रैक्टिस करो और हां जो भी आपको
1425. 55:24अलग-अलग टाइप के दिखे होंगे कि भैया मैं
1426. 55:25इतना सारा याद कैसे रख पाऊंगा? देखो
1427. 55:28दोस्तों, यह आपका डीएसए नहीं है कि आपको
1428. 55:30सब कुछ रटने की जरूरत है। आप ऑनलाइन टूल
1429. 55:33की हेल्प ले सकते हो। जहां पे भी आपको
1430. 55:34दिक्कत आई। जितना ज्यादा प्रैक्टिस करोगे
1431. 55:37क्योंकि यहां पे पढ़ने के लिए बहुत ज्यादा
1432. 55:39है। चीजें सिंपल हैं। बस उनको एक बार बैक
1433. 55:42ऑफ द माइंड रख दो कि हां आपने ये चीजें
1434. 55:44देखी है। ये काम कैसे करती हैं और जितनी
1435. 55:46हम प्रैक्टिस करते जाएंगे हमारी चीजें और
1436. 55:49बेटर होती जाएंगी। तो आज के लेक्चर को
1437. 55:51यहीं तक ही रखते हैं। और अगर आज आप लास्ट
1438. 55:54तक बने हुए हैं और आपको अगर अच्छे से
1439. 55:56स्वाद आ चुका है तो कमेंट कर दो कि भैया
1440. 55:59बेस्ट लेक्चर ऑफ सीएसएस और इमेज वाला
1441. 56:01कांसेप्ट अगर आपको चमका है अच्छे से
1442. 56:04क्योंकि आज हमने यह भी जाना कि पिक्सल
1443. 56:06क्या होता है? उसकी कोई फिक्स्ड लेंथ नहीं
1444. 56:08होती है। आप ऑनलाइन जाके देख लो। बहुत
1445. 56:11मिसकंसेप्शन है। तो हमने वो भी क्लियर
1446. 56:13करी। अब मैं मिलता हूं आपको नेक्स्ट
1447. 56:15लेक्चर में। तब तक के लिए जय हिंद जय
1448. 56:17भारत।
1449. 56:19आ