कैसे करें - एक वेबसाइट बनाएं
एक प्रतिक्रियाशील वेबसाइट बनाने का तरीका जानें जो सभी उपकरणों, पीसी, लैपटॉप, टैबलेट और फोन पर काम करेगी।
स्क्रैच से एक वेबसाइट बनाएं
एक "लेआउट ड्राफ्ट"
वेबसाइट बनाने से पहले पेज डिजाइन का एक लेआउट ड्राफ्ट तैयार करना बुद्धिमानी हो सकती है:
नेविगेशन बार
साइड सामग्री
कुछ पाठ कुछ पाठ..
मुख्य सामग्री
कुछ पाठ कुछ पाठ..
कुछ पाठ कुछ पाठ..
कुछ पाठ कुछ पाठ..
फ़ुटबाल
पहला चरण - मूल HTML पृष्ठ
HTML वेबसाइट बनाने के लिए मानक मार्कअप भाषा है और CSS वह भाषा है जो HTML दस्तावेज़ की शैली का वर्णन करती है। हम एक बेसिक वेब पेज बनाने के लिए HTML और CSS को मिलाएंगे।
नोट: यदि आप HTML और CSS नहीं जानते हैं, तो हमारा सुझाव है कि आप हमारे HTML ट्यूटोरियल को पढ़कर शुरुआत करें ।
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
उदाहरण समझाया गया
<!DOCTYPE html>घोषणा इस दस्तावेज़ को HTML5 के रूप में परिभाषित करती है<html>तत्व एक HTML पृष्ठ का मूल तत्व है<head>तत्व में दस्तावेज़ के बारे में मेटा जानकारी है- तत्व दस्तावेज़ के
<title>लिए एक शीर्षक निर्दिष्ट करता है - तत्व को वर्ण सेट को UTF-8 के रूप में
<meta>परिभाषित करना चाहिए <meta>नाम = "व्यूपोर्ट" वाला तत्व वेबसाइट को सभी उपकरणों और स्क्रीन रिज़ॉल्यूशन पर अच्छा बनाता है<style>तत्व में वेबसाइट के लिए शैलियाँ हैं (लेआउट/डिज़ाइन )<body>तत्व में दृश्यमान पृष्ठ सामग्री है<h1>तत्व एक बड़े शीर्षक को परिभाषित करता है<p>तत्व एक पैराग्राफ को परिभाषित करता है
पृष्ठ सामग्री बनाना
हमारी वेबसाइट के तत्व के अंदर <body>, हम अपने "लेआउट ड्राफ्ट" का उपयोग करेंगे और बनाएंगे:
- एक शीर्षलेख
- एक नेविगेशन बार
- मुख्य सामग्री
- साइड सामग्री
- एक पाद लेख
हैडर
एक हेडर आमतौर पर वेबसाइट के शीर्ष पर स्थित होता है (या शीर्ष नेविगेशन मेनू के ठीक नीचे)। इसमें अक्सर एक लोगो या वेबसाइट का नाम होता है:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
फिर हम हेडर को स्टाइल करने के लिए CSS का उपयोग करते हैं:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
नेविगेशन बार
एक नेविगेशन बार में आपकी वेबसाइट के माध्यम से नेविगेट करने वाले आगंतुकों की सहायता के लिए लिंक की एक सूची होती है:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
नेविगेशन बार को स्टाइल करने के लिए CSS का उपयोग करें:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
विषय
"साइड सामग्री" और "मुख्य सामग्री" में विभाजित एक 2-स्तंभ लेआउट बनाएं।
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
हम लेआउट को संभालने के लिए CSS Flexbox का उपयोग करते हैं:
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
फिर लेआउट को उत्तरदायी बनाने के लिए मीडिया क्वेरीज़ जोड़ें। यह सुनिश्चित करेगा कि आपकी वेबसाइट सभी उपकरणों (डेस्कटॉप, लैपटॉप, टैबलेट और फोन) पर अच्छी दिखे। परिणाम देखने के लिए ब्राउज़र विंडो का आकार बदलें।
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
युक्ति: एक अलग प्रकार का लेआउट बनाने के लिए, बस फ्लेक्स चौड़ाई बदलें (लेकिन सुनिश्चित करें कि यह 100% तक जुड़ जाए)।
युक्ति: क्या आपको आश्चर्य है कि @media नियम कैसे काम करता है? इसके बारे में हमारे सीएसएस मीडिया प्रश्न अध्याय में पढ़ें ।
युक्ति: फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल के बारे में अधिक जानने के लिए, हमारे सीएसएस फ्लेक्सबॉक्स अध्याय को पढ़ें ।
बॉक्स-साइज़िंग क्या है?
आप आसानी से एक साथ तीन फ्लोटिंग बॉक्स बना सकते हैं। हालाँकि, जब आप कुछ ऐसा जोड़ते हैं जो प्रत्येक बॉक्स की चौड़ाई को बढ़ाता है (जैसे पैडिंग या बॉर्डर), तो बॉक्स टूट जाएगा। box-sizingसंपत्ति हमें बॉक्स की कुल चौड़ाई (और ऊंचाई) में पैडिंग और बॉर्डर को शामिल करने की अनुमति देती है, यह सुनिश्चित करते हुए कि पैडिंग बॉक्स के अंदर रहती है और यह टूटती नहीं है ।
आप हमारे CSS Box Sizing Tutorial में बॉक्स-साइज़िंग प्रॉपर्टी के बारे में अधिक पढ़ सकते हैं ।
फ़ुटबाल
अंत में, हम एक पाद लेख जोड़ेंगे।
<div class="footer">
<h2>Footer</h2>
</div>
और इसे स्टाइल करें:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
बधाई हो! आपने शुरू से ही एक प्रतिक्रियाशील वेबसाइट बनाई है।
W3Schools रिक्त स्थान
अगर आप अपनी खुद की वेबसाइट बनाना चाहते हैं और अपनी .html फाइलों को होस्ट करना चाहते हैं, तो हमारे मुफ्त वेबसाइट बिल्डर को आजमाएं , जिसे W3schools Spaces कहा जाता है :
