इस HTML पाठ में, आप सीखेंगे कि HTML लेआउट क्या है (HTML Layout in Hindi)? और उदाहरण के साथ Layout create करना सीखेंगे, और विभिन्न layouts elements को भी जानेंगे।
यदि आप किसी HTML document के दृश्य तत्वों (visual elements) को अच्छी तरह से arrange, संरचित (structured) और अच्छी तरह से Responsible design करना चाहते हैं, तो आपको HTML layout को समझना चाहिए।
Layout आपके HTML में, CSS डिजाइन के साथ काम करने में मदद करेगा.
Table of Contents
HTML Layout in Hindi (HTML Layout क्या है)
HTML layout एक वेब पेज या वेबसाइट की उपस्थिति को परिभाषित करता है। इसका मतलब है कि HTML लेआउट एक blueprint है जिसका उपयोग वेब पेजों को अच्छी तरह से परिभाषित तरीके से व्यवस्थित करने के लिए किया जाता है।
यह HTML document को नेविगेट करने, समझने में आसान करता है और वेब डिज़ाइन elements को customize करने के लिए HTML tags (All tags list) का उपयोग करता है।
संक्षेप में, एक HTML वेब-पेज लेआउट एक HTML दस्तावेज़ के दृश्य तत्वों की व्यवस्था (arrangement) के साथ काम करता है।
अपनी वेबसाइट को बेहतर लुक देने के लिए वेबपेज लेआउट बहुत जरूरी है।
इसलिए वेबसाइट के लेआउट को शानदार लुक और फील के साथ डिजाइन करने में काफी समय लगता है।
आधुनिक साइटें गतिशील और प्रतिक्रियाशील वेबसाइट बनाने के लिए CSS और JavaScript आधारित frameworks (Bootstrap, Node.js आदि) का उपयोग करती हैं।
आजकल अधिकांश वेबसाइटों में मुख्य रूप से एक header, navigation bar, content area, sidebar और एक footer होता है। चलिए इन सभी elements को समझते है;
HTML Layout Elements in Hindi
निम्नलिखित विभिन्न HTML5 layout elements tag हैं,
जिनका उपयोग किसी वेबसाइट के विभिन्न भागों को संरचित और परिभाषित करने के लिए किया जाता है:
| Layout Elements | Description |
|---|---|
<header> | इस element उपयोग किसी दस्तावेज़ (document) या अनुभाग (section) के लिए header को परिभाषित करने के लिए किया जाता है। |
<nav> | इसका उपयोग नेविगेशन लिंक के लिए एक कंटेनर को परिभाषित करने के लिए किया जाता है |
<section> | यह वेब दस्तावेज़ में एक अनुभाग को परिभाषित करता है। |
<article> | यह layout element प्राथमिक तत्व है, जिसमें वेब पेज के बारे में जानकारी होती है। |
<aside> | इसका उपयोग सामग्री से अलग सामग्री को परिभाषित करने के लिए किया जाता है (जैसे sidebar)। |
<details> | यह अतिरिक्त विवरण को परिभाषित करता है, जिसे उपयोगकर्ता के मांग पर खोल और बंद कर सकता है। |
<summary> | इसका उपयोग <details> तत्व के लिए एक शीर्षक को परिभाषित करने के लिए किया जाता है |
<footer> | वेब दस्तावेज़ या अनुभाग के लिए फ़ुटर (bottom पर एक क्षेत्र) को परिभाषित करता है। |
जैसा कि मैंने ऊपर उल्लेख किया है, आजकल, सभी आधुनिक वेबसाइटें का layout को design करने के लिए सीएसएस और जावास्क्रिप्ट आधारित framework का उपयोग करता हैं।
लेकिन, अगर आप पूछते हैं की “मैं HTML में एक लेआउट पेज कैसे बनाऊं? या HTML में वेबसाइट लेआउट कैसे बनाये?” तो आप अन्य formatting टैग के संयोजन में सरल HTML tables या division tags का उपयोग करके एक अच्छा लेआउट बना सकते हैं।
तो आइए उदाहरण के साथ HTML पेज लेआउट बनाना सीखें।
1. Create HTML Layout in Hindi – Using Tables
केवल HTML का उपयोग करके, वेब पेज का लेआउट बनाने का सबसे सरल और सबसे लोकप्रिय तरीका है HTML <table> tag का उपयोग करके layout को design करना।
जैसा कि आप जानते हैं HTML tables को columns और rows में व्यवस्थित किया गया है, इसलिए आप इन rows और columns का उपयोग किसी भी तरह से कर सकते हैं।
उदाहरण के लिए, निम्न HTML लेआउट उदाहरण 2 columns और 3 rows वाली तालिका (table) का उपयोग करके प्राप्त किया जा सकता है, लेकिन header लेख और footer लेख दोनों columns को colspan विशेषता का उपयोग करके फैलाते हैं –
Example: Create Layout Using only HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using tables</title>
</head>
<body>
<center>
<table width = "80%" border = "1">
<tr>
<td colspan = "2" bgcolor = fff3c2 >
<center>
<h1>HTML Layout using tables (tutorialinhindi.com)</h1>
</center>
</td>
</tr>
<tr valign = "top">
<td bgcolor = fff8dc width = "20%">
<b>Main Menu</b><br />
Course 1<br />
Course 2<br />
Course 3<br />
Course 4 <br>
</td>
<td bgcolor = snow width = "150" height = "200">
Main content area:<br>
Welcome to <a href="https://www.tutorialinhindi.com/">Tutorialinhindi.com </a><br>
This is an example layout using the tables.<br>
I hope you like it 🙂
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = 3f3f3f>
<font color="white">
<center>
This is footer: Copyright © 2021 Tutorialinhindi.com
</center>
</font>
</td>
</tr>
</table>
</center>
</body>
</html>
Ouptut: HTML tables का उपयोग करके बनाए गए layout का design कुछ इस तरह दिखिगा −
नोट: हालाँकि हम HTML tables के साथ एक बहुत अच्छा लेआउट प्राप्त कर सकते हैं, लेकिन तालिकाओं को वास्तव में एक लेआउट उपकरण के रूप में डिज़ाइन नहीं किया गया था। यह tabular data को प्रस्तुत करने के लिए Tables अधिक उपयुक्त हैं।
2. How to make Website Layout in HTML – Using DIV, SPAN
वेबसाइट layout बनाने के लिए <div> और <span> टैग का उपयोग कर सकते है। <div> element एक ब्लॉक स्तर का element है जिसका उपयोग HTML elements को समूहीकृत करने के लिए किया जाता है। जबकि <span> element एक ब्लॉक-स्तरीय तत्व है, HTML तत्व का उपयोग inline स्तर पर तत्वों को समूहीकृत करने के लिए किया जाता है।
नोट: यह उदाहरण कैस्केडिंग स्टाइल शीट (CSS) का उपयोग करता है, इसलिए इस उदाहरण को समझने से पहले आपको यह समझना होगा कि सीएसएस कैसे काम करता है। इसलिए पहले CSS tutorial को पढ़े।
Example: Make website Layout using DIV, SPAN
यहां हम सीएसएस के साथ <div> टैग का उपयोग करके एक वेब पेज लेआउट डिजाइन करने का प्रयास करेंगे, जो आपने पिछले उदाहरण में <table> टैग का उपयोग करके हासिल किया है।
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "margin-top: auto; margin-bottom: auto; margin-left: 50px; margin: 50px">
<div style = "background-color:#fff3c2; width:100%">
<h1 style="text-align:center">Make Website Layout in HTML - Using DIV, SPAN</h1>
</div>
<div style = "background-color: rgb(255, 241, 225) ; height:200px; width:150px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
CSS<br />
JavaScript..
</div>
<div style = "background-color:#eee; height:200px; width:500px; float:left;" >
<p>Main Tutorial content area: Welcome to <a href="https://www.tutorialinhindi.com/">Tutorialinhindi.com </a><br>
This is an example layout using the tables.<br>
I hope you like it :)</p>
</div>
<div style = "background-color:rgb(255, 252, 228); height:200px; width:150px; float:right;">
<div><b>Right Sidebar</b></div>
HTML Tutorial <br />
CSS Tutorial <br />
JavaScript..
</div>
<div style = "background-color:#cae9c8; clear:both">
<center>
Footer Copyright © 2021 Tutorialinhindi.com
</center>
</div>
</div>
</body>
</html>
Output: <div> element का उपयोग करके बनाए गए website का layout design कुछ इस तरह दिखिगा −
निष्कर्ष
अपने इस HTML Layout लेख में, जाना की HTML layout एक संरचना है.
जो किसी भी वेबसाइट पर उपयोगकर्ता नेविगेशन बनाने का एक शानदार तरीका है।
यह एक ऐसा तरीका है, जिससे आप साधारण HTML tags जैसे कि <table> tag का उपयोग करके भी वेब पेज डिजाइन कर सकते हैं।
संक्षेप में, यदि आप एक अच्छा वेब डिजाइनर या वेब डेवलपर बनना चाहते हैं,
तो आपको पेज लेआउट को समझना चाहिए, ताकि आप एक आकर्षक डिज़ाइन बना सकें।
Learn Complete HTML in Hindi
HTML सीखने के लिए आपके पैसे खर्च करने की कोई आवश्यकता नहीं है, हम आपके लिए एक संपूर्ण HTML पाठ्यक्रम पूरी तरह से निःशुल्क बनाए हैं, तो आप HTML सीखना शुरू करने में अपना समय क्यों बर्बाद कर रहे हैं। अभी HTML सीखना शुरू करो:
मुझे उम्मीद है, यह ट्यूटोरियल आपको HTML पेज लेआउट (HTML Layout in Hindi) के बारे में सब कुछ समझने में मदद किया हैं।
