HTML Layouts
आपकी वेबसाइट को अच्छा दिखने के
लिए वेब पेज layout बहुत महत्वपूर्ण है, इसलिये हमे अपने वेब पेज layout का layout
बहुत ध्यानपूर्वक डिजाइन करना चाहिए ।
Website के Layouts
ज्यादातर websites अपना content बहुत से columns मे बनाती है (magazine या newspaper की तरह).वेबपेज में बहुत से columns <div> या <table> elements का प्रयोग करके बनाये जाते है। CSS का प्रयोग elements का स्थान निर्धारित करने के लिये, या पेज के लिये backgrounds या colorful look तैयार करने के लिये किया जाता है।
नोट : यह भी संभव है कि हम HTML tables से layouts का निर्माण कर सकते है, पर
tables को tabular data प्रदर्शित करने
के लिये डिजाइन किया जाता है – ना कि एक layout tool की तरह!
<div> Elements का प्रयोग करके Layouts का निर्माण
The div element एक block level element है, जिसका उपयोग HTML elements को आपस मे जोडने (grouping) के लिये किया जाता है।निम्न उदाहरण मे एक multiple column layout बनाने के लिये 5 div elements का प्रयोग किया गया है।
|
<html>
<body>
<div
id="container" style="width:500px">
<div
id="header" style="background-color:#FFA500;">
<h1
style="margin-bottom:0;">Main Title of Web
Page</h1></div>
<div
id="menu"
style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div
id="content"
style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes
here</div>
<div
id="footer"
style="background-color:#FFA500;clear:both;text-align:center;">
Copyright ©
http://mahaanindia.blogspot.in </div>
</div>
</body>
</html>
|
|
Tables का प्रयोग करके Layouts का निर्माण
layouts बनाने का एक आसान तरीका HTML <table> tag का प्रयोग करके बनाना भी है।वेबपेज में बहुत से columns <div> or <table> elements का प्रयोग करके बनाये जाते है। CSS का प्रयोग elements का स्थान निर्धारित करने के लिये, या पेज के लिये backgrounds या colorful look तैयार करने के लिये किया जाता है।
निम्न उदाहरण मे 3 rows और 2 columns के साथ एक table बनाई गयी है – पहली और आखिरी row colspan attribute का उपयोग करके दोनो columns को span करती है।
|
<html>
<body>
<table width="500" border="0"> <tr><td colspan="2" style="background-color:#FFA500;"> <h1>Main Title of Web Page - Learn Web-designing in hindi </h1> </td></tr> <tr><td style="background-color:#FFD700;width:100px;"> <b>Menu</b><br>HTML<br> CSS<br>JavaScript</td> <td style="background-color:#EEEEEE;height:200px;width:400px;"> Content goes here</td> </tr> <tr>
<td
colspan="2"
style="background-color:#FFA500;text-align:center;">
Copyright © mahaanindia.blogspot.in</td> </tr></table>
</body>
</html>
|
|
नोट : CSS को उपयोग करने का सबसे बडा लाभ यह है कि, यदि आप CSS code को एक बाहरी (external) style sheet मे रखते है, आपके लिये अपनी site को maintain करना बहुत आसान हो जायेगा। आप सिर्फ़ एक फ़ाइल मे बदलाव करके अपनी site के सभी पेजों के layout मे बदलाव कर सकते
नोट : क्योकि advanced layouts बनने मे बहुत टाइम लेते है, इसलिए template का उपयोग एक आसान तरीका है, free website templates के लिये आप Google में सर्च कर सकते है। (free website templates या templates एक pre-built website layouts होते है जिनमें आप थोडा सा अपनी आवश्यकता के अनुरुप बदलाव करके उपयोग कर सकते)
No comments:
Post a Comment