Mabaki ya HTML

Wato wengi wa tovuti huonyesha maudhui ya kila siku kama visirini na mawasiliano.

Tumia inaonyesha <div> katika mpangilio wa HTML

Maelezo:<div> inaonyesha kwa kujenga mpangilio, kwa sababu inaweza kufikiria kwa rahisi kwa kutumia CSS.

Mivuno hii inatumia mita div kumi na tatu kuunda muundo wa mabara matatu:

Mifano

<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 ni mji mkuu wa Uingereza. Ni mji wa wakazi wengi zaidi katika nchi ya UK,
na eneo la mji la kati la wakazi wengi sana kuliko 13 milioni.
</p>
<p>
Inapokeza kwenye Ndege ya Thames, London imewaona kuwa makao kubwa kwa micha wa 2000 kuzingatia ya Roma, ambao walitoa jina lake Londinium.
historia yake inayotumia katika muundo wa wanafunzi, ambao waliamua kumwambia Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Tafuta kwa mafanikio

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>

Inaumia wavuti kwa muundo wa HTML5

Maelezo mpya ya HTML5 inasabisha maelezo ya eneo mbalimbali za wavuti:

Vifungu vya Semanticsi ya HTML5

header Inasabisha maelezo ya kina ya maelezo au sehemu
nav Inasabisha mkono wa viungo vya nia
section Inasabisha sehemu ya maelezo
article Inasabisha maelezo ya kina inayozungumza kwa njia ya kina na inaandikwa kwa ukweli
aside Inasabisha maelezo yaliyopo kwenye nje ya kina
footer Inasabisha pendekezo la maelezo au sehemu ya kina
details Inasabisha maelezo ya kina
summary Inasabisha kipendekezo cha elementi ya details

Mivuno hii inatumia <header>, <nav>, <section>, na <footer> kuunda muundo wa mabara matatu:

Mifano

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London ni mji mkuu wa Uingereza. Ni mji wa wakazi wengi zaidi katika nchi ya UK,
na eneo la mji la kati la wakazi wengi sana kuliko 13 milioni.
</p>
<p>
Inapokeza kwenye Ndege ya Thames, London imewaona kuwa makao kubwa kwa micha wa 2000 kuzingatia ya Roma, ambao walitoa jina lake Londinium.
historia yake inayotumia katika muundo wa wanafunzi, ambao waliamua kumwambia Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Tafuta kwa mafanikio

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; 
}

Muundo wa HTML kwa kifaa cha table

Maelezo:Kifaa cha <table> hakijatengwa kwa kumwengenea kifaa cha muundo.

Kifaa cha <table> kilichotengwa kwa kumwengenea data ya tablica.

Matumizi ya kifaa cha <table> kinaweza kumwengenea muundo kwa sababu inaweza kutumia CSS kumtumia maelezo ya kifaa cha <table>:

Mifano

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    Kifaa cha table kilichotengwa kwa kumwengenea kama kifaa cha muundo.
  </td>
</tr>
</table>
</body>

Tafuta kwa mafanikio

CSS

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