طرح‌های HTML

وب‌سایت‌ها اغلب محتوا را به صورت چند ستونی نمایش می‌دهند (مانند مجلات و روزنامه‌ها).

استفاده از عناصر <div> در ترتیب HTML

نکته:عنصر <div> اکثر مواقع به عنوان ابزار ترتیب استفاده می‌شود، زیرا می‌توان به راحتی از طریق CSS آن را قرار داد.

یہ مثال چار <div> عناصر استعمال کرکے کثیر ستون لائی آؤٹ قائم کرتا ہے:

مثال

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

آزمایش کنید

CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

HTML5 استعمال کرکے ویب سائٹ کا لائی آؤٹ

HTML5 کی نئی معنوی عناصر ویب پورٹل کی مختلف حصوں کی تعریف فراہم کرتی ہیں:

عناصر معنایی HTML5

header document یا section کی header کی تعریف
nav navigation links کا container کی تعریف
section document میں section کی تعریف
article independent self-contained articles کی تعریف
aside content کے باہر کا محتوا (مثلاً sidebars) کی تعریف
footer document یا section کی صفحہ پیر کی تعریف
details extra details کی تعریف
summary details عناصر کی عنوان کی تعریف

یہ مثال <header>, <nav>, <section>, اور <footer> استعمال کرکے کثیر ستون لائؤت قائم کرنے کے لئے استعمال ہوتا ہے:

مثال

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

آزمایش کنید

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

چیدمان HTML با استفاده از جدول

نکته:عنصر <table> به عنوان ابزار چیدمان طراحی نشده است.

عنصر <table> برای نمایش داده‌های جدولی طراحی شده است.

استفاده از عنصر <table> می‌تواند تأثیر چیدمان را ایجاد کند، زیرا می‌توان از طریق CSS سبک عنصر جدول را تنظیم کرد:

مثال

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    عنصر جدول به عنوان ابزار چیدمان طراحی نشده است.
  </td>
</tr>
</table>
</body>

آزمایش کنید

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>