HTML Layout
| Previous | Home | Next |
When we see any websites ,then these websites are design with multiple columns likes as News paper and magazine. It is very important to make a better look and feel to our website.
In HTML Layout using <div> element layout tool and with CSS. HTML Layout using <table> tag. These tables are arranged in columns and rows,then we can use rows and columns to which place to be need in our website.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:blue;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#00ffff;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:blue;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>I LOVE MY INDIA</h1>
</div>
<div id="nav">
DELHI<br>
PANJAB<br>
RAJISTAN<br>
</div>
<div id="section">
<h2>Delhi</h2>
<p>
आज जैसे ही सूरज की किरणे धरती पर आईं दिल्ली को राजधानी बने 100
साल पूरे हो गये। आज ही के दिन यानी कि 12 दिसंबर 1911 को दिल्ली
को राजधानी बनाने की घोषणा की गई थी। इन 100 सालों ने दिल्ली ने
कई बड़े उतार-चढ़ाव देखे मगर विकास की तीव्र गति ने दिल्ली की तस्वीर
ही बदल दी। जी हां ऐतिहासिक दिल्ली आज मॉर्डन दिल्ली के रूप में
परिवर्तित हो गई है। हां,इतना जरूर है कि यहां ऐतिहासिक स्वरूप को भी
सहेज कर रखा गया है। एक से एक कारें, चमचमाती हुई सड़के,
फ्लाईओवरों का जाल, एयपोर्ट पर इंटरनेशनल लेवल का टी-3 टर्मिनल
और फिरोजशाह कोटला स्टेडियम ने दिल्ली को वह तस्वीर दी है जिसपर इतराया जा सकता है।
<h3>इन मुकाम व उन सपनों की बात
</h3>
<p>
शेेखचिल्ली की तरह सोते-सोते सपने देखना बहुत आसान है। किंतु हम यहाँ
उन सपनों की बात नहीं कर रहे हैं। यहाँ उन सपनों की बात हो रही है,
जिसमें प्रत्येक युवा अपने केरियर को लेकर सपने देखता है। हमारे राष्ट्रपति
कलाम साहब कहते हैं कि प्रत्येक व्यक्ति को बड़े सपने देखने चाहिए। जो
लोग बड़े सपने नहीं देखते, वो बड़े बन भी नहीं सकते। मध्यमवर्गीय परिवार में
जन्म कलाम को देश के प्रथम व्यक्ति होने का गौरव प्राप्त है, उसके पीछे उनके
बड़े सपने हैं, जिनके कारण वो इस मुकाम को हासिल कर पाए।
</p>
</div>
<div id="footer">
Copyright © www.r4r.co.in
</div>
</body>
</html>
Output :
| Previous | Home | Next |