09162352304
[email protected]

آموزش HTML مقدماتی؛ معرفی فهرست، Block و Class در HTML

درس 9/9 | زمان مطالعه: 20 حداقل
آموزش HTML مقدماتی؛ معرفی فهرست، Block و Class در HTML

در درس‌های پیشین آموزش HTML ‌مقدماتی، هر بار به معرفی یک یا دو عنصر از HTML پرداختیم و با ارائه نمونه کدهای کاربردی، شما را با نحوه نوشتن کدها برای هر منظور خاص آشنا می‌کردیم. این بار هم به سه عنصر فهرست، block و class در HTML پرداخته و برای هر مورد چندین نمونه کد ارائه خواهیم کرد.

فهرست در HTML

فهرست‌های مورد استفاده در یک سند HTML به دو صورت منظم و نامنظم هستند که هر یک کدنویسی مخصوص به خود را دارد. در ادامه با انواع این فهرست‌ها آشنا خواهیم شد.

فهرست نامنظم در HTML

فهرست‌های نامنظم با تگ <ul> و هر یک از آیتم‌های فهرست با تگ <li> آغاز می‌شوند. آیتم‌های فهرست (list item) به صورت پیش‌فرض به وسیله دایره‌های توپر سیاه‌رنگ (bullet) نشانه‌گذاری می‌شوند:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

انتخاب نشانگر آیتم در فهرست نامنظم

در HTML، ویژگی list-style-type در CSS برای تعریف استایل نشانگر آیتم موجود در لیست به کار می‌رود. 

  • مقدار disc نشانگر آیتم فهرست را به شکل دایره تو پر تبدیل می‌کند:

 

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

  • مقدار circle نشانگر آیتم فهرست را به شکل دایره تو خالی تبدیل می‌کند:

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

  • مقدار square نشانگر آیتم فهرست را به شکل مربع تبدیل می‌کند:

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

  • مقدار none باعث می‌شود آیتم‌های فهرست بدون نشانگر باشند:

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

 

فهرست منظم در HTML

فهرست‌های منظم با تگ <ol> و هر یک از آیتم‌های فهرست با تگ <li> مشخص می‌شوند. آیتم‌های فهرست به صورت پیش‌فرض به وسیله اعداد نشانه‌گذاری می‌شوند:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

خصوصیت Type در فهرست منظم HTML

ویژگی type از تگ <ol> نوع نشانگر آیتم‌های فهرست را تعریف می‌کند

  • "type=”1: آیتم‌های فهرست با اعداد شماره‌گذاری می‌شوند (به صورت پیش‌فرض):

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

  • "type=”A: آیتم‌های فهرست با حروف بزرگ شماره‌گذاری می‌شوند:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

  • "type=”a: آیتم‌های فهرست با حروف کوچک شماره‌گذاری می‌شوند:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

  • "type=”I: آیتم‌های فهرست با اعداد رومی بزرگ شماره‌گذاری می‌شوند:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

  • "type=”i: آیتم‌های فهرست با اعداد رومی کوچک شماره‌گذاری می‌شوند:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

فهرست های توصیفی در HTML

در زبان HTML از فهرست‌های توصیفی (Description list) برای طراحی سایت هم پشتیبانی می‌شود. فهرست توصیفی در واقع فهرستی از عبارات است که برای هر کدام توصیفی آورده شده است. تگ <dl> فهرست توصیفی، تگ <dt> عبارت (نام) و تگ <dd> هر عبارت را تعریف می‌کنند:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

فهرست های تو در تو در HTML

فهرست‌ها را می‌توان به صورت تو در تو (یعنی فهرست در فهرست) ایجاد کرد:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

هر یک از آیتم‌های فهرست خود می‌توانند حاوی یک فهرست جدید و دیگر عناصر HTML مثل تصاویر و لینک باشند.

فهرست های افقی

فهرست‌های افقی HTML را می‌توان با استفاده از CSS به روش‌های مختلف ایجاد کرد. یکی از روش‌های محبوب ایجاد فهرست به شکل افقی برای ایجاد منو است:

<!DOCTYPE html>
<html>
<head>

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

عناصر Block و Inline در HTML

 تمام عناصر HTML با توجه به نوع خود دارای یک مقدار نمایش پیش‌فرض هستند. این مقدار برای بیشتر عناصر به صورت block یا inline است.

عناصر Block-Level

یک عنصر block-level همیشه در یک خط جدید آغاز شده و تمام عرض موجود را اشغال می‌کند (تا جایی که بتواند به سمت چپ و راست کشیده می‌شود). عنصر <div> یک عنصر block-level است

<div>Hello</div>
<div>World</div>

 

عناصر Block-Level در HTML:

 

 

عناصر Inline

عنصر inline در یک خط جدید شروع نشده و فقط عرض مورد نیاز را اشغال می‌کند:

<span>Hello</span>
<span>World</span>

 

عناصر Inline در HTML:

 

عنصر <Div>

عنصر <div> اغلب به عنوان محفظه‌ی عناصر دیگر HTML مورد استفاده قرار می‌گیرد. وقتی از این عنصر به همراه CSS استفاده می‌شود، می‌توان از آن برای استایل دادن به block های محتوا استفاده کرد:

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <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>
</div>

 

عنصر <Span>

عنصر <span> اغلب به عنوان محفظه‌ای برای متن به کار برده می‌شود. این عنصر نیاز به هیچ‌گونه خصوصیتی (attribute) نداشته اما معمولا از خصوصیت‌های style و class برای آن استفاده می‌شود. وقتی عنصر <span> همراه با CSS به کار برده می‌شود می‌توان از آن‌ برای استایل دادن به بخش‌هایی از متن استفاده کرد:

<h1>My <span style="color:red">Important</span> Heading</h1>

 

خصوصیت Class در HTML

خصوصیت class در HTML یک یا چند نام کلاس را برای یک عنصر HTML مشخص می‌کند. می‌توان برای اجرای وظایف مشخص که دارای نام کلاس مشخص هستند، نام کلاس یا class name را با CSS یا جاوا اسکریپت به کار برد. در مثال زیر از CSS برای استایل دادن به تمام عناصری که داری نام کلاس “city” هستند، استفاده شده است:

<style>
.city {
    background-color: tomato;
    color: white;
    padding: 10px;

</style>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

خصوصیت class را می‌توان با هر نوع عنصر HTML به کار برد.

 

استفاده از خصوصیت Class در جاوا اسکریپت

جاوا اسکریپت می‌تواند با استفاده از روش getElementsByClassName() به عناصری که دارای نام کلاس مشخصی هستند دسترسی داشته باشد. در مثال زیر نشان می‌دهد که وقتی کاربر روی یک دکمه کلیک می‌کند، تمام عناصری که دارای نام کلاس “city” هستند مخفی می‌شود:

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

 

کلاس های متعدد

عناصر HTML می‌توانند دارای بیش از یک نام کلاس باشند و هر نام کلاس باید با یک فاصله از بقیه جدا شود. در مثال زیر عناصر دارای نام کلاس “city” و عناصر دارای نام کلاس “main” استایل داده شده‌اند:

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

در مثال بالا اولین عنصر h2 به کلاس‌های “city” و “main” تعلق دارد.

 

کلاس مشابه، تگ متفاوت

تگ‌های متفاوت مانند <h2> و <p> می‌توانند دارای نام کلاس مشابه بوده و در نتیجه استایل مشابهی هم داشته باشند:

<h2 class="city">Paris</h2>

<p class="city">Paris is the capital of France</p>

 

درس نهم  از مجموعه آموزش HTML مقدماتی به پایان رسید. توصیه می‌شود موارد گفته شده در این درس را چندین بار انجام داده و با استفاده از منابع آنلاین، کدهای دیگری را هم امتحان کنید.  طراحی سایت اصولی، نیازمند تمرین و تکرار درس‌هایی است که می‌آموزید. HTML به عنوان بلوک‌های سازنده سایت شما، باید اصولی و گام به گام آموخته شود. با لیداوب همراه باشید تا با استفاده از دوره‌های ‌آموزش مقدماتی و پیشرفته طراحی سایت و سئو، به یک طراح سایت حرفه‌ای تبدیل شوید.