تا %60 تخفیف خرید برای 6 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب

در آخرین قسمت از دوره آموزش گام به گام HTML می خواهم بحث لایه های HTML5 برای مدیریت بهتر یک صفحه وب توضیح دهم. شاید به صورت کلی یک صفحه وب شامل یک سربرگ، منو، بخش محتوی، کناره و فوتر باشد. اما چطور می توان بهتر این قسمت ها را مدیریت کرد و یا بعدا بهتر بتوانیم قسمت های مورد نظر را ویرایش کنیم. درست است می توانیم بجای استفاده از تگ های لایه بندی از همان div استفاده کنیم اما این کار مطابق با HTML5 اصولی و درست نیست.

به همین خاطر باید چند قانون ساده را بپذیریم. برای اینکار کافی است که زمانی می خواهیم یک صفحه وب را طراحی کنیم در طراحی قسمت های وبسایت مطمئن باشیم. مثلا برای ساخت قسمت سربرگ محتوای مورد نظر را درون تگ <header> قرار دهید. و یا در طراحی منو ها کافی است تا تگ های ul , li را درون تگ <nav> قرار دهید. این کار خواندن دستورات را بسیار ساده تر می کند. یک مثال کامل از این دستورات را برای تان آماده کرده ام تا بتوانید بهتر متوجه شوید.

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
			
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
   <h1>City Gallery</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>

<article>
  <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>
</article>

<footer>Copyright © W3Schools.com</footer>

</div>

</body>
</html>

حرف پایانی: تا حالا در 22 قسمت آموزش سعی کرده ام به طور تقریبا کامل HTML را آموزش دهم. امیدوارم که موفق بوده باشم.

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند