HTML Joylashuv Maketlari

HTML Joylashuv Maketlari


Ko’pincha vebsaytlar sahifa kontentini(mazmuni) bir necha ustunlar orqali aks ettiradi(gazeta va jurnallar kabi).


Uzbekistan

London
Paris
Tokyo

Tashkent

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

KeepGoing.uz

HTML Joylashuv Maketi <div> Elementi Yordamida

...   <div> element ko’pincha joylashish tartibi vositasi sifatida ishlatiladi, chunki uni CSS yordamida osonlik bilan ixtiyoriy tomonga joylashtirish mumkin.

Quyidagi misolda 4 ta <div> elementi sahifada turli uslubda joylashtiriladi:

Namuna:

<body>

<div id="header">
<h1>Uzbekistan</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="footer">Copyright © Keepgoing.uz</div>

</body>

Namuna:

<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" Yordamida Vebsayt Elementlari Joylashuvi

HTMl5 veb sahifaning turli xil joylarini aniqlash uchun yangi sematik elementlar bilan ta’minlaydi

HTML5 Semantic Elements
  • <header> - Hujjat yoki bo’lim sarlavhasini uchun ajratilgan joy
  • <nav> - Harakatlarni va ularga kerakli linklarni ifodalaydigan konteyner
  • <section> - Hujjatdagi bo'limlar joyini aniqlaydi
  • <article> - O’zi ichida mustaqil ma'lumotlarni saqlaydigan konteyner
  • <aside> - Kontent yonidagi joylani belgilaydi (sidebar)
  • <footer> - Hujjat yoki bo’limning pastki qismidagi joyni belgilaydi
  • <details> - Qo’shimcha qismlarni aniqlaydi
  • <summary> - <details> elementi sarlavhasini belgilaydi

Quyidagi misol <header>, <nav>, <section> va <footer> elementlari yordamida turli xil joylashuv maketlari yaratadi:

Namuna:

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <footer> Copyright © Keepgoing.uz </footer> </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; }

HTML Joylashuv Maketlarini Jadvallar Orqali Ifodalash

...   <table> elementi vebsahifa joylashuvi uchun mo’ljallanmagan.
<table> elementining maqsadi jadvaldagi ma’lumotlarni ko’rsatish hisoblanadi.

HTML joylashuvi <table> elementi yordamida yasalishi mumkin, chunki yasalgan jadvallar CSS orqali ko’rinishini o’zgartirsa bo’ladi

Namuna:

<body>

<table class="lamp"> 
<tr> 
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"> 
  </th>
  <td> 
    Jadvallar vebsahifa joylashuvi uchun mo’ljallanmagan.
    </td>
  </tr>
</table>

</body>

CSS:

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

...   Diqqat: Websayt joylashuvida jadvaldan foydalanish noto’g’i emas, ammo bunday yo’l tavsiya etilmaydi! Web sahifa joylashuv maketida jadvallardan foydalanishdan saqlaning.


Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017