HTML Complate Course English and Hindi Step by Step Basic To Advance Part 04
March 23, 2025 2025-03-23 16:40HTML Complate Course English and Hindi Step by Step Basic To Advance Part 04
HTML Course हमारे HTML कोर्स के साथ वेब डेवलपमेंट सीखें! बेसिक से लेकर एडवांस्ड टॉपिक्स तक, प्रैक्टिकल उदाहरणों के साथ। शुरुआत करने के लिए बिल्कुल सही!”
अब हम CSS (Cascading Style Sheets) का उपयोग करके HTML फॉर्म को स्टाइलिश बनाएंगे। 🚀
HTML Course in Hindi And English
1️⃣ CSS क्या है?
CSS का उपयोग वेब पेज को सुंदर और आकर्षक बनाने के लिए किया जाता है।
- इससे हम फॉन्ट, कलर, बॉर्डर, मार्जिन, पैडिंग आदि को कंट्रोल कर सकते हैं।
- CSS को तीन तरीकों से HTML में जोड़ा जा सकता है:
- Inline CSS –
<style>को सीधे HTML टैग में लिखकर - Internal CSS –
<style>टैग का उपयोग करके - External CSS –
.cssफाइल बनाकर
- Inline CSS –
2️⃣ HTML फॉर्म को CSS से स्टाइल करना
🚀 पहले का सिंपल फॉर्म (बिना स्टाइल का)
👉 अभी यह फॉर्म बहुत सिंपल दिखता है, अब इसे स्टाइलिश बनाते हैं!
3️⃣ CSS के साथ स्टाइलिश फॉर्म
<!DOCTYPE html>
<html>
<head>
<title>स्टाइलिश फॉर्म</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px gray;
width: 300px;
}
label {
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 8px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #28a745;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #218838;
}
</style>
</head>
<body>
<form>
<label>नाम:</label>
<input type="text" name="name" placeholder="अपना नाम दर्ज करें"><br>
<label>ईमेल:</label>
<input type="email" name="email" placeholder="अपना ईमेल दर्ज करें"><br>
<label>पासवर्ड:</label>
<input type="password" name="password" placeholder="अपना पासवर्ड दर्ज करें"><br>
<input type="submit" value="सबमिट करें">
</form>
</body>
</html>
4️⃣ 🔥 इस फॉर्म का आउटपुट कैसा दिखेगा?
✅ बैगग्राउंड हल्के ग्रे रंग का होगा।
#✅ फॉर्म सेंटर में आएगा और सफेद बॉक्स में दिखाई देगा।
✅ इनपुट बॉक्स गोल कोनों (rounded corners) के साथ दिखेंगे।
#✅ “सबमिट करें” बटन हरे रंग का होगा और जब आप माउस से उस पर जाएँगे, तो वह डार्क ग्रीन हो जाएगा।
✅ इस कोड को अपने ब्राउज़र में खोलें और देखें!
html ka use in hindi
web development course in hindi
online html tutorial
html course for beginners
learn html5 free
free html5 course
belajar html gratis
free html course for beginners
best hindi tutorial
web design course details in hindi
html courses for beginners
learnvern certificate image
