HTML का उपयोग करके क्रिएटिव वेब पेज कैसे बनाएं

UI/UX DESIGNING October 4, 2023

Introduction

HTML5 बॉयलरप्लेट एक HTML स्टार्टर कोड है जो आपको वेब पेज बनाने की प्रक्रिया को शुरू करने में मदद करता है। यह आपको कुछ बुनियादी HTML कोड प्रदान करता है जैसे कि <!DOCTYPE html>, <html>, <head>, <title>, <body>, </html>, जो आपको अपना वेब पेज बनाने के लिए आवश्यक है।

HTML5 बॉयलरप्लेट का उपयोग करने के लिए निम्नलिखित कोड को कॉपी और पेस्ट करें

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>

</body>
</html>

एक बार जब आपने यह कोड अपनी फ़ाइल में पेस्ट कर लिया है, तो आप अपना वेब पेज बनाना शुरू कर सकते हैं। आप अपनी फ़ाइल में मटेरियल जोड़ सकते हैं, जैसे कि टेक्स्ट, चित्र और लिंक। आप अपनी फ़ाइल में CSS और JavaScript भी जोड़ सकते हैं।

CSS का उपयोग आपके वेब पेज के स्टाइल को नियंत्रित करने के लिए किया जाता है। आप CSS का उपयोग करके अपने वेब पेज के रंग, फ़ॉन्ट और लेआउट को बदल सकते हैं। JavaScript का उपयोग आपके वेब पेज पर इंटरैक्टिव एलिमेंट जोड़ने के लिए किया जाता है। आप JavaScript का उपयोग करके अपने वेब पेज पर मेनू, फॉर्म और अन्य इंटरैक्टिव एलिमेंट जोड़ सकते हैं।

HTML5 बॉयलरप्लेट का उपयोग करने से आपको बहुत समय और प्रयास बच सकता है। आपको अपने वेब पेज के लिए मूल HTML कोड लिखने की आवश्यकता नहीं है। आपको बस HTML5 बॉयलरप्लेट कोड को कॉपी और पेस्ट करना है और फिर अपना वेब पेज बनाना शुरू करना है।

CSS को HTML से कैसे लिंक करें

CSS को HTML से लिंक करने के लिए, आपको <link> टैग का उपयोग करना होगा। <link> टैग आपके HTML फ़ाइल को CSS फ़ाइल से जोड़ता है।HTML

<link href="css/style.css" rel="stylesheet" type="text/css">

ऊपर का कोड आपके HTML फ़ाइल को css/style.css CSS फ़ाइल से लिंक करता है।

HTML में इनलाइन CSS का उपयोग कैसे करें

इनलाइन CSS का उपयोग करने के लिए, आपको style एट्रिब्यूट का उपयोग करना होगा। style एट्रिब्यूट आपको HTML एलिमेंट्स के स्टाइल को नियंत्रित करने की अनुमति देती है।HTML

<p style="color: red; font-size: 18px;">This is a paragraph with inline CSS.</p>
<div style="background-color: yellow; border: 2px solid black;">This is a div with inline CSS.</div>

ऊपर का कोड एक पैराग्राफ और एक div बनाता है। पैराग्राफ लाल रंग में और 18 पिक्सेल के फ़ॉन्ट आकार में है। div पीली पृष्ठभूमि और 2 पिक्सेल का काला बॉर्डर है।

HTML में आंतरिक CSS का उपयोग कैसे करें

HTML में आंतरिक CSS का उपयोग करने के लिए, आपको <style> एलिमेंट का उपयोग करना होगा। <style> एलिमेंट आपको अपने HTML फ़ाइल में CSS कोड जोड़ने की अनुमति देता है।HTML

<head>
  <style>
    body {
      background-color: lightblue;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: darkblue;
    }
    p {
      font-size: 16px;
    }
  </style>
</head>

ऊपर का कोड आपके वेब पेज की पृष्ठभूमि को हल्का नीला, फ़ॉन्ट को एरियल और फ़ॉन्ट आकार को 16 पिक्सेल सेट करता है। h1 एलिमेंट का रंग गहरा नीला है।

HTML में बाहरी CSS का उपयोग कैसे करें

HTML में बाहरी CSS का उपयोग करने के लिए, आपको <link> टैग का उपयोग करना होगा। <link> टैग आपके HTML फ़ाइल को CSS फ़ाइल से जोड़ता है।HTML

<link href="css/style.css" rel="stylesheet" type="text/css">

ऊपर का कोड आपके HTML फ़ाइल को css/style.css CSS फ़ाइल से लिंक करता है।

HTML में एंकर टैग का उपयोग कैसे करें

एंकर टैग का उपयोग वेब पेज के एक हिस्से से दूसरे हिस्से तक लिंक बनाने के लिए किया जाता है। एंकर टैग को <a> टैग के रूप में जाना जाता है।

एक ही टैब में एंकर टैग का उपयोग कैसे करें

एक ही टैब में एंकर टैग का उपयोग करने के लिए, आपको href एट्रिब्यूट का उपयोग करना होगा। href एट्रिब्यूट आपको उस पृष्ठ को निर्दिष्ट करने की अनुमति देती है जिससे आप लिंक करना चाहते हैं।HTML

<a href="https://www.example.com/">Example.com</a>

ऊपर का कोड एक लिंक बनाता है जो example.com पृष्ठ पर जाता है।

एक अलग टैब में एंकर टैग का उपयोग कैसे करें

एक अलग टैब में एंकर टैग का उपयोग करने के लिए, आपको target एट्रिब्यूट का उपयोग करना होगा। target एट्रिब्यूट आपको वह टैब निर्दिष्ट करने की अनुमति देती है जिसमें आप लिंक को खोलना चाहते हैं।HTML

<a href="https://www.example.com/" target="_blank">Example.com</a>

ऊपर का कोड एक लिंक बनाता है जो example.com पृष्ठ पर जाता है और इसे एक नए टैब में खोलता है।

HTML में छवि टैग का उपयोग कैसे करें

छवि टैग का उपयोग वेब पेज पर चित्र जोड़ने के लिए किया जाता है। छवि टैग को <img> टैग के रूप में जाना जाता है।HTML

<img src="image.png" alt="Image Description">

ऊपर का कोड एक छवि जोड़ता है जिसका नाम image.png है। alt एट्रिब्यूट छवि का एक वैकल्पिक विवरण प्रदान करती है जो उपयोगकर्ताओं के लिए दिखाई देता है यदि छवि लोड नहीं होती है।

HTML में पृष्ठभूमि छवि का उपयोग कैसे करें

पृष्ठभूमि छवि का उपयोग वेब पेज की पृष्ठभूमि के रूप में एक छवि जोड़ने के लिए किया जाता है। पृष्ठभूमि छवि को <style> एलिमेंट में background-image गुण का उपयोग करके सेट किया जाता है।HTML

<style>
  body {
    background-image: url("image.png");
  }
</style>

ऊपर का कोड वेब पेज की पृष्ठभूमि को image.png छवि सेट करता है।

HTML में स्क्रिप्ट टैग का उपयोग कैसे करें

स्क्रिप्ट टैग का उपयोग वेब पेज पर JavaScript कोड जोड़ने के लिए किया जाता है। स्क्रिप्ट टैग को <script> टैग के रूप में जाना जाता है।HTML

<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>

ऊपर का कोड वेब पेज पर script.js स्क्रिप्ट फ़ाइल जोड़ता है।

निष्कर्ष

HTML एक शक्तिशाली भाषा है जिसका उपयोग वेब पेज बनाने के लिए किया जाता है। HTML5 बॉयलरप्लेट एक बढ़िया शुरुआती बिंदु है जो आपको वेब पेज बनाने की प्रक्रिया को शुरू करने में मदद कर सकता है। CSS, JavaScript और अन्य HTML टैग का उपयोग करके, आप अपने वेब पेज को और अधिक आकर्षक और इंटरैक्टिव बना सकते हैं।

Top Categories