How to Create a Blog Website Using HTML and CSS in Hindi 2021 | Blogger Coding Tutorial | How to code a beautiful website
Hello Guys,
मै निलेश दाधीच (Nilesh Dadheech) स्वागत करता हु आपका मेरे ब्लॉग पर | यहाँ पर मैं आपको बताने वाला हूँ कि कैसे हम HTML और CSS का use करके एक awesome ब्लॉग वेबसाइट create कर सकते है | यह article आपके लिए बहुत ही useful होने वाला है|
आपके मन में भी बहुत सारे doubts आते होंगे कि
What is HTML? (HTML क्या है ?) in Hindi
HTML की Full Form या पूरा नाम Hypertext Markup Language होता हैं. जिसमें प्रत्येक शब्द का अलग-अलग मतलब होता हैं. आइए अब प्रत्येक शब्द का अर्थ जानते हैं. और समझते है कि HTML को Markup Language क्यों कहा जाता हैं?
Hypertext
हाइपरटेक्स्ट वह तरीका है जिसके द्वारा वेब को Explore किया जाता है. यह एक साधारण टेक्स्ट ही होता है. लेकिन, Hypertext अपने साथ किसी अन्य टेक्स्ट को जोड़े रखता है. जिसे Mouse Click टैप से या कुंजि दबाकर सक्रिय किया जाता है.
इसकी यही विशेषता इसे साधारण टेक्स्ट से अलग करती है. हाइपरटेक्स्ट को Hyperlink कहते है.
HTML के Anchor (< a >) Tags के द्वारा किसी भी टेक्स्ट को हाइपरलिंक बनाया जा सकता है. इसके अलावा, इमेज्स, वीडियो, साउण्ड आदि को भी हाइपरलिंक बनाया जा सकता है. इस प्रकार का लिंक डेटा Hypemedia कहलाता है.
Hypertext की एक और विशेषता होती है कि यह रेखीय (linear) नही होता है अर्थात हाइपरटेक्स्ट को किसी भी क्रम में सक्रिय किया जा सकता है.
Markup
HTML वेब डॉक्युमेंट बनाने के लिए “HTML Tags” का उपयोग करती है. प्रत्येक HTML Tag अपने बीच आने वाले टेक्स्ट को किसी प्रकार में परिभाषित करता है. इसे ही Markup कहते है. “<i>” एक HTML Tag है जो अपने बीच आने वाले टेक्स्ट को तिरछा (italic) करता है.
इसे एक उदाहरण से समझते है.
हम एक शब्द लेते है, ‘Nilesh dadheech’ जिसे साधारण लिखा गया है. जो हमें आम टेक्स्ट की तरह ही सीधा “Nilesh dadheech” दिखाई दे रहा है. अब हम इसे HTML के द्वारा Markup करते है. और Markup मे हम इसे तिरछा करते है. जब Nilesh dadheech को इन दोनो चिन्हों <i> </i> के बीच इस तरह <i>Nilesh dadheech</i> लिखा जायगा तो यह शब्द इस तरह तिरछा “Nilesh dadheech” दिखाई देगा. अर्थात इसे तिरछा (italic) Markup किया गया है.
इस पूरी प्रक्रिया को ही मार्क अप करना कहता है. और वेब पर मौजूद सभी वेब डॉक्युमेंट इसी तरह फॉर्मेट किए जाते हैं.
Language
HTML एक भाषा है. क्योंकि यह वेब डॉक्युमेंट बनाने के लिए code-words का इस्तेमाल करती है. जिन्हें Tags कहते है.
What is css in Hindi (CSS kya hai ?) CSSक्या है?
आप जानते है कि HTML द्वारा वेब डॉक्युमेंट्स का ढ़ाँचा (Structure) तैयार किया जाता है. उस ढ़ाँचे को जिस तकनीक से सजाया यानि फॉर्मेट किया जाता है. उस तकनीक को ही सीएसएस नाम दिया गया है.
CSS का उपयोग एक एचटीएमएल डॉक्युमेंट के ढ़ाँचे की दिखावट (Layout), उसकी पृष्ठभूमी (Background), टेक्स्ट का रंग एवं स्टाइल आदि को सजाने एवं नियंत्रित करने के लिए किया जाता है. इस भाषा को स्वतंत्र रुप से लिखा जाता है. इसके अपने Code-Words यानि स्टाइल रूल्स है, जो एक वेबपेज की अलग-अलग प्रकार से फॉर्मेटिंग करते है.
CSS के फायदें – Advantages of CSS in Hindi
CSS इस्तेमाल करने का सबसे बडा फायदा तो हैं आजादी – Freedom. आपको एक काम को बार-बार करने से छुटकारा मिल जाता हैं. इसके अलावा भी CSS इस्तेमाल करने के अनेक फायदे हैं, जिनके बारे में नीचे बताया जा रहा हैं.
Save Time
आप एक बार CSS Rules को लिखते हैं, और उन्हे कई बार Apply कर सकते हैं. आप एक Stylesheet को Multiple webpages पर Apply कर सकते हैं. आपको प्रत्येक नयHTML Document के लिए CSS Rule लिखने की जरूरत नहीं हैं. इसलिए CSS Web Masters का कीमती समय बचाती हैं.
समय की बचत इसका सबसे बड़ा फायदा दिखाई पड़ता है. क्योंकि, आपका रिपिटशन में समय व्यर्थ नहीं हो रहा है. आप हर बार नए के लिए काम कर सकते है.
Increase Page Speed
एक HTML Document में दर्जनोंElements होते हैं. जिनके लिए हमें अलग-अलग Style Rules Set करने पडते हैं. और किसी-किसी में तो इनकी संख्या सैंकडो या हजारों में भी पहुँच जाती हैं.
इसलिए वेबपेज का साइज बढ जाता हैं. लेकिन, CSS की मदद से केवल एक स्टाइलशीट में ही सभी एलिमेंट्स के लिए Style Rules Set कर दिए जाते हैं. जिससे Extra HTML हट जाती हैं. और पेज का साइज कम हो जाता हैं. और इस कारण Page Fast Load होता हैं.
गूगल फास्ट लोड होने वाली वेबसाइट्स को पसंद करता है. इसलिए वेब मास्टर्स के लिए सीएसएस किसी वरदान से कम नहीं है.
Easy to Maintenance
आप पूरी वेबसाइट के लिए सिर्फ एक स्टाइलशीट में CSS Rules Set कर सकते हैं. इसलिए हमे एक फाईल को Manage करने में कोई परेशानी नही आती हैं.
जी हाँ! आप पूरी वेबसाइट के लिए सिर्फ एक ही सीएसएस फाइल में पूरी स्टाइल लिख सकते है. ऐसा करने पर सभी कोड एक जगह पर मौजूद होते है. प्रत्येक एलिमेंट्स के लिए अलग-अलग स्टाइल रूल लिखने की परेशानी से छुटकारा मिल जाता है.
यदि किसी एलिमेंट्स में कुछ बदलाव करना होता है तो उसे ढूँढ़ने के बजाए. स्टाइलशीट से उसे अपडेट करना आसान होता है. इसलिए सीएसएस की मरम्मत आसान और सुविधाजनक है.
Provide Responsive Design
आप HTML से वेबपेज को प्रत्येक डिवाइस के लिए ऑप्टीमाइज नहीं कर सकते हैं. लेकिन, CSS की Media Queries Rules से आप वेबपेज्स को हर डिवाइस और स्क्रीन साइज के हिसाब से Responsive बना सकते हैं.
रेस्पॉन्सिव साइट लेआउट गूगल के दौ सो से अधिक रैंकिंग फैक्टर्स में से एक है. इसलिए, यह खूबी भी वेब मास्टर्स को खूब पसंद आती है.
आप सिर्फ एक कोड के जरिए अपनी डेस्कटॉप साइट को स्मार्टफोन, टैबलेट तथा अन्य डिवाइस के लिए ऑप्टीमाइज कर लेते है. और मोबाइल वर्जन, डेस्कटॉप वर्जन के झंझट से मुक्त रहते है.
What can you do with html and css?
We can create any type of static website by using only html and css.
HTML is the Markup language. we can use html to make a skeleton of our website and we can use css to design our website like colors, animations, hover effects etc.
How to create a blog using html and css OR
Can you make a website with only html and css?
यहाँ पर में आपको विडियो tutorial का use कर के बहुत ही आसान तरीके से समझाने वाला हु कि
How do i create a blog website using html and css?
How do i create a blog using html or How to code a beautiful website by using html and css step by step in Hindi in 2021
How to Create a Blog Website Using HTML and CSS in Hindi Part 1
How to Create a Blog Website Using HTML and CSS in Hindi Part 2
How to Create a Blog Website Using HTML and CSS in Hindi Part 3
How to Create a Blog Website Using HTML and CSS in Hindi Part 4
Related Search for this article
Create a website using html and css in Hindi with source code
Blogger coding tutorial in Hindi
html css blog templates free download
How to create static website using html and css?
How do i create a blog website using html and css in hindi
if you like my articles and tutorials please support us like share and subscribe.
4 Comments
Really this article helped me and I am waiting for more quality educating content from you.
ReplyDeleteThanks ..
As a programmer, you should learn the best programming language used for artificial intelligence, see best programming language to learn
ReplyDeleteThe information displayed in your blog is very important, it will solve the problems of many people. I want to thank you for providing such valuable information. I will share your blog with my friends. I want you to keep giving us such information in the future also. If you want to know more about website designing then you can visit our website. Website Design Dublin plays a major role in website building to provide a good experience to the users.
ReplyDeleteFrom my personal experience, Copycat's Figma to HTML CSS is the best tool. Copycat is a Figma plugin that easily converts your designs to html and just recently added support to Bootstrap.
ReplyDelete