హెచ్టిఎంఎల్ లేఆఉట్

వెబ్సైట్లు తరచుగా బహుళ గమనంగా కంటెంట్ చూపిస్తాయి (పత్రికలు మరియు పత్రికలు వంటివి).

డివ్ ఎలమెంట్ యొక్క హ్ట్మ్ల్ లేఆఉట్

注释：డివ్ ఎలమెంట్ సాధారణంగా లేఆఉట్ టూల్స్ అవుతుంది, ఎందుకంటే క్లాస్స్ ద్వారా సులభంగా లొకేషన్ చేయవచ్చు.

ఈ ఉదాహరణలో నాలుగు <div> ఎలిమెంట్స్ బహుళ నిలువు సజ్జన రూపకల్పన చేయడానికి ఉపయోగించబడ్డాయి:

ప్రత్యామ్నాయం

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
లండన్<br>
పారిస్<br>
టోక్యో<br>
</div>
<div id="section">
<h1>London</h1>
<p>
లండన్ ఇంగ్లాండ్ రాజధాని పట్టణం. ఇది యునైటెడ్ కింగ్డమ్ లో అత్యంత జనాభా కలిగిన పట్టణం అగును,
కరువు ప్రాంతంలో 13 మిలియన్ జనాభా ఉంది.
</p>
<p>
థమ్స్ నది మీద ఉన్న లండన్ రెండు వేల సంవత్సరాల నుంచి ప్రధాన స్థానంలో ఉంది,
ఇది రోమనులు స్థాపించినప్పుడు లండినియమ్ అనే పేరును పెట్టారు అనే చరిత్రతో ముందుకు పోతోంది, ఇది రోమనులు స్థాపించారు అనే చరిత్రతో ముందుకు పోతోంది.
</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 కొత్త సెమాంటిక్ ఎలిమెంట్స్ వెబ్ పేజీల వివిధ భాగాలను నిర్వచించగలవు:

హెచ్టిఎంఎల్5 సెమాంటిక్ ఎలమెంట్స్

header డాక్యుమెంట్ లేదా సెక్షన్ యొక్క హెడర్ నిర్వచించండి
nav నావిగేషన్ లింకుల కంటైనర్ నిర్వచించండి
section డాక్యుమెంట్ లో సెక్షన్ నిర్వచించండి
article స్వతంత్రమైన సమాచారం అనే అంశాన్ని నిర్వచించండి
aside కంటెంట్ బాహ్యంగా ఉన్న విషయాలను నిర్వచించండి (ఉదాహరణకు సైడ్బార్)
footer డాక్యుమెంట్ లేదా సెక్షన్ యొక్క పేజీ పాదం నిర్వచించండి
details అదనపు వివరాలను నిర్వచించండి
summary details మూలకం యొక్క శీర్షిక నిర్వచించండి

ఈ ఉదాహరణలో <header>, <nav>, <section>, మరియు <footer> ఉపయోగించబడ్డాయి బహుళ నిలువు సజ్జన రూపకల్పన చేయడానికి:

ప్రత్యామ్నాయం

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
లండన్<br>
పారిస్<br>
టోక్యో<br>
</nav>
<section>
<h1>London</h1>
<p>
లండన్ ఇంగ్లాండ్ రాజధాని పట్టణం. ఇది యునైటెడ్ కింగ్డమ్ లో అత్యంత జనాభా కలిగిన పట్టణం అగును,
కరువు ప్రాంతంలో 13 మిలియన్ జనాభా ఉంది.
</p>
<p>
థమ్స్ నది మీద ఉన్న లండన్ రెండు వేల సంవత్సరాల నుంచి ప్రధాన స్థానంలో ఉంది,
ఇది రోమనులు స్థాపించినప్పుడు లండినియమ్ అనే పేరును పెట్టారు అనే చరిత్రతో ముందుకు పోతోంది, ఇది రోమనులు స్థాపించారు అనే చరిత్రతో ముందుకు పోతోంది.
</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 布局

注释：

元素不是作为布局工具而设计的。

元素的作用是显示表格化的数据。

使用

元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

ప్రత్యామ్నాయం

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="గమనిక" 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>