पिछली लेख में हमने जाना कि एक वेबपेज में क्या-क्या होना चाहिये । इस लेख में हम उन सभी विभागों को बनाना सीखेंगे ।
एचटीएमएल वेबपेज को दो तरीके से बनाया जा सकता है । पहला तरीका है टेबल का प्रयोग करके तथा दूसरा तरीका DIV एलीमेण्ट का प्रयोग करके । टेबल द्वारा वेबपेज बनाना तो आसान है किन्तु इसको बाद में एडिट करना टेढी खीर है । इसीलिये दूसरा तरीका अर्थात् DIV द्वारा वेबपेज बनाना ज्यादा सही है । सही मायने में वेबपेज DIV द्वारा ही बनाया जाना चाहिये । प्रोफेशनल डेवलपर कभी भी टेबल द्वारा वेबपेज डिजाइन नहीं करते हैं । केवल आवश्यक स्थानों पर ही टेबल का प्रयोग करते हैं ।
यहॉं हम एक साधारण सा पेज DIV एलीमेण्ट की सहायता से बनायेंगे । इस पेज की कोडिंग को आप कापी करके अपने नोटपैड पर पेस्ट करके index.html नाम से सेव करके अपने वेबपेज पर रन करा सकते हैं । आपको वेबपेज का प्रारूप दिख जायेगा ।
कोड निम्नवत है -
<!doctype html>
</html>
HEAD SECTION
<head>
<title>My First Web Page </title>
</head>
<title>My First Web Page </title>
</head>
BODY SECTION
<body style="background:yellow;">
<!--header-->
<div style="width:900px; height:200px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white;" >
</div>
<!--menu-->
<div style="width:880px; height:35px; margin:auto; padding:10px; border:2px solid green; font-family:Times New Roman; font-size:30px; text-align:center; background:white;" >
<nav><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Home</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page2</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page3</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page4</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page5</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page6</a></nav>
</div>
<div style="width:900px; height:600px; margin:auto;">
<!--left divison -->
<div style="width:700px; height:600px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white; float:left;">
</div>
<!-- right divison -->
<div style="width:190px; height:600px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white; float:right;" >
</div>
</div>
<!--footer -->
<div style="width:900px; height:50px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white;" >
</div>
</body>
<!--header-->
<div style="width:900px; height:200px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white;" >
</div>
<!--menu-->
<div style="width:880px; height:35px; margin:auto; padding:10px; border:2px solid green; font-family:Times New Roman; font-size:30px; text-align:center; background:white;" >
<nav><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Home</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page2</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page3</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page4</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page5</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page6</a></nav>
</div>
<div style="width:900px; height:600px; margin:auto;">
<!--left divison -->
<div style="width:700px; height:600px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white; float:left;">
</div>
<!-- right divison -->
<div style="width:190px; height:600px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white; float:right;" >
</div>
</div>
<!--footer -->
<div style="width:900px; height:50px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white;" >
</div>
</body>
</html>
इस कोडिंग का रिजल्ट इस तरह होगा ।
यह कोडिंग दिखने में काफी लम्बी इसलिये है क्यूँकि इसमें स्टाइल्स का प्रयोग सीधे एलीमेण्ट्स में किया गया है । यह जितना कठिन लग रहा है वास्तव में उसका एक प्रतिशत भी कठिन नहीं है । अगले अध्याय में हम इसे आसान करके बनाना सीखेंगे । और आप देखेंगे कि कैसे इस पेज पर दिखने वाली कोडिंग को संक्षिप्त करके मात्र कुछ पंक्तियों तक सीमित कर दिया जाता है ।
Comments
Post a Comment