HTML और CSS का उपयोग करके एक वेबसाइट बनाएं।
हम हमारी वेबसाइट के लिए निम्नलिखित चरणों का उपयोग करेंगे:

1. एक HTML फ़ाइल बनाएं।

<div>

<header>
<h1>मेरी वेबसाइट</h1>
<nav>
<ul>
<li><a href="#home">होम</a></li>
<li><a href="#services">सेवाएं</a></li>
<li><a href="#about">हमारे बारे में</a></li>
<li><a href="#contact">संपर्क करें</a></li>
</ul>
</nav>
</header>

<main>
<section id="home">
<h2>आपका स्वागत है!</h2>
<p>हमारी वेबसाइट में आपका स्वागत है। यहां आपको हमारी सेवाओं के बारे में जानकारी मिलेगी।</p>
</section>

<section id="services">
<h2>हमारी सेवाएं</h2>
<ul>
<li>वेब डिज़ाइन</li>
<li>वेब डेवलपमेंट</li>
<li>डिजिटल मार्केटिंग</li>
<li>ई-कॉमर्स वेबसाइट</li>
</ul>
</section>

<section id="about">
<h2>हमारे बारे में</h2>
<p>हम एक नई युवा वेब डिज़ाइन और वेब डेवलपमेंट कंपनी हैं। हम अपने ग्राहकों के सफल वेब प्रसार के लिए काम करते हैं।</p>
</section>

<section id="contact">
<h2>संपर्क करें</h2>
<form>
<label for="name">नाम:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">ईमेल:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">संदेश:</label><br>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="संदेश भेजें">
</form>
</section>
</main>

<footer>
<p>© मेरी वेबसाइट 2021</p>
</footer>

</div>

2. एक CSS फ़ाइल बनाएं।

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial, sans-serif;
}

header {
background-color: #333;
color: #fff;
padding: 20px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav li {
display: inline-block;
margin-left: 20px;
}

nav a {
color: #fff;
text-decoration: none;
}

main {
padding: 20px;
}

section {
padding: 20px;
margin-bottom: 20px;
}

section h2 {
margin-top: 0;
}

section ul {
list-style: disc;
}

form label {
display: block;
padding-bottom: 5px;
}

form input[type="text"],
form input[type="email"],
form textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}

form textarea {
height: 200px;
}

form input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
}

form input[type="submit"]:hover {
background-color: #555;
}

footer {
background-color: #333;
color: #fff;
text-align:center;
padding: 20px;
}

3. एक जोड़ें स्टाइल शीट CSS फ़ाइल को HTML फ़ाइल में।

<!DOCTYPE html>
<html>
<head>
<title>मेरी वेबसाइट</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>

<header>
<h1>मेरी वेबसाइट</h1>
<nav>
<ul>
<li><a href="#home">होम</a></li>
<li><a href="#services">सेवाएं</a></li>
<li><a href="#about">हमारे बारे में</a></li>
<li><a href="#contact">संपर्क करें</a></li>
</ul>
</nav>
</header>

<main>
<section id="home">
<h2>आपका स्वागत है!</h2>
<p>हमारी वेबसाइट में आपका स्वागत है। यहां आपको हमारी सेवाओं के बारे में जानकारी मिलेगी।</p>
</section>

<section id="services">
<h2>हमारी सेवाएं</h2>
<ul>
<li>वेब डिज़ाइन</li>
<li>वेब डेवलपमेंट</li>
<li>डिजिटल मार्केटिंग</li>
<li>ई-कॉमर्स वेबसाइट</li>
</ul>
</section>

<section id="about">
<h2>हमारे बारे में</h2>
<p>हम एक नई युवा वेब डिज़ाइन और वेब डेवलपमेंट कंपनी हैं। हम अपने ग्राहकों के सफल वेब प्रसार के लिए काम करते हैं।</p>
</section>

<section id="contact">
<h2>संपर्क करें</h2>
<form>
<label for="name">नाम:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">ईमेल:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">संदेश:</label><br>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="संदेश भेजें">
</form>
</section>
</main>

<footer>
<p>© मेरी वेबसाइट 2021</p>
</footer>

</div>

</body>
</html>

इससे आपकी वेबसाइट तैयार हो गई है। इसमें एक मुख्य मेनू, नेविगेशन पंक्तियाँ, पृष्ठों के सेक्शन, फ़ॉर्म और फुटर शामिल हैं। हमने CSS का उपयोग करके सामान्य फ़ॉर्मैटिंग (पृष्ठभूमि, फ़ॉन्ट, रंग, पैडिंग, और मार्जिन) किया है।