HTML - लेआउट
अपनी वेबसाइट को बेहतर रूप देने के लिए एक वेबपेज लेआउट बहुत महत्वपूर्ण है। वेबसाइट के लेआउट को शानदार लुक और फील के साथ डिजाइन करने में काफी समय लगता है।
अब-एक-दिन, सभी आधुनिक वेबसाइटें संवेदनशील और गतिशील वेबसाइटों के साथ आने के लिए CSS और जावास्क्रिप्ट आधारित ढांचे का उपयोग कर रही हैं, लेकिन आप अन्य स्वरूपण टैग के साथ सरल HTML तालिकाओं या विभाजन टैग का उपयोग करके एक अच्छा लेआउट बना सकते हैं। यह अध्याय आपको शुद्ध HTML और इसकी विशेषताओं का उपयोग करके अपने वेबपेज के लिए एक सरल लेकिन काम करने वाला लेआउट बनाने के बारे में कुछ उदाहरण देगा।
HTML लेआउट - तालिकाओं का उपयोग करना
लेआउट बनाने का सबसे सरल और सबसे लोकप्रिय तरीका HTML <table> टैग का उपयोग कर रहा है। इन तालिकाओं को स्तंभों और पंक्तियों में व्यवस्थित किया जाता है, इसलिए आप इन पंक्तियों और स्तंभों का उपयोग कर सकते हैं जो भी आपको पसंद है।
उदाहरण
उदाहरण के लिए, निम्न HTML लेआउट उदाहरण 3 पंक्तियों और 2 स्तंभों के साथ एक तालिका का उपयोग करके प्राप्त किया जाता है, लेकिन शीर्ष लेख और पाद लेख स्तंभ स्तंभों की विशेषता का उपयोग करते हुए दोनों स्तंभों को फैलाता है -
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
एकाधिक कॉलम लेआउट - टेबल का उपयोग करना
आप अपनी वेब सामग्री को कई पृष्ठों में रखने के लिए अपना वेबपृष्ठ डिज़ाइन कर सकते हैं। आप अपनी सामग्री को मध्य कॉलम में रख सकते हैं और आप मेनू का उपयोग करने के लिए बाएं कॉलम का उपयोग कर सकते हैं और विज्ञापन या कुछ अन्य सामान डालने के लिए दाएं कॉलम का उपयोग किया जा सकता है। यह लेआउट हमारे वेबसाइट tutorialspoint.com पर हमारे समान है।
उदाहरण
यहां तीन कॉलम लेआउट बनाने के लिए एक उदाहरण दिया गया है -
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
HTML लेआउट - DIV, SPAN का उपयोग करना
<Div> तत्व एक ब्लॉक स्तर का तत्व है जिसका उपयोग HTML तत्वों को समूहीकृत करने के लिए किया जाता है। जबकि <div> टैग एक ब्लॉक-स्तरीय तत्व है, HTML <span> तत्व का उपयोग इनलाइन स्तर पर तत्वों को समूहीकृत करने के लिए किया जाता है।
यद्यपि हम HTML तालिकाओं के साथ बहुत अच्छे लेआउट प्राप्त कर सकते हैं, लेकिन तालिकाओं को वास्तव में लेआउट टूल के रूप में डिज़ाइन नहीं किया गया था। सारणी डेटा पेश करने के लिए तालिकाओं अधिक अनुकूल हैं।
Note - यह उदाहरण कैस्केडिंग स्टाइल शीट (सीएसएस) का उपयोग करता है, इसलिए इस उदाहरण को समझने से पहले आपको यह समझने की आवश्यकता है कि सीएसएस कैसे काम करता है।
उदाहरण
यहां हम CSS के साथ <div> टैग का उपयोग करके समान परिणाम प्राप्त करने का प्रयास करेंगे, जो भी आपने पिछले उदाहरण में <table> टैग का उपयोग करके प्राप्त किया है।
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
आप CSS के साथ DIV, SPAN का उपयोग करके बेहतर लेआउट बना सकते हैं। CSS की अधिक जानकारी के लिए, कृपया CSS ट्यूटोरियल देखें।