:: آموزش HTML ، جلسه پنجم ::

سپیده 313

پنجشنبه ۲۱ آذر ۱۳۹۲ ۱۲:۵۷ قبل از ظهر

آموزش HTML ، جلسه پنجم

آشنایی با نحوه ایجاد لیست

در html سه نوع لیست وجود دارد که شامل لیست غیر ترتیبی، لیست ترتیبی و لیست تعریفی می باشد.

لیست غیرترتیبی: برای ایجاد لیست غیرترتیبی از تگ <ul> که مخفف unordered list می باشد، استفاده می شود.
برای اضافه نمودن موارد لیست از تگ <li> که مخفف کلمه list می باشد، استفاده می شود.
اقلام لیست با استفاده از bullet نمایش داده می شود; با استفاده از صفت type در تگ <ul> می توانید نوع bullet ها را تغییر دهید. مقدار پیش فرض این صفت disc (دایره تو پر) می باشد، ; circle دایره توخالی و square مربع تو پر



	

	<html>

	<head>

	  <title>Lists</title>

	</head>

	 

	<body>

	 

	<ul>

	<li> One </li>

	<li> Two </li>

	<li> Three </li>

	</ul>

	 

	<ul type="circle">

	<li> One </li>

	<li> Two </li>

	<li> Three </li>

	</ul>

	 

	</body>

	</html>

***

لیست ترتیبی: برای ایجاد لیست ترتیبی یا ordered list از تگ <ol> استفاده می شود.
برای نمایش لیست ترتیبی، به جای اعداد، از حروف نیز می توانید استفاده نمایید. برای اینکار مقدار صفت type در تگ <ol> را حرف A یا a قرار دهید.



	

	<html>

	<head>

	  <title>Lists</title>

	</head>

	

	<body>

	

	<ol>

	<li> One </li>

	<li> Two </li>

	<li> Three </li>

	</ol>

	

	<ol type="A">

	

	<li> One </li>

	<li> Two </li>

	<li> Three </li>

	

	</ol>

	

	</body>

	</html>

***

همچنین می توانید لیست ها را با یکدیگر ادغام کرده و یک لیست تو در تو یا nested list ایجاد نمایید.



	

	<html>

	<head>

	  <title>Lists</title>

	</head>

	

	<body>

	

	<ol type="a">

	<li> One </li>

	<li> Two </li>

	

	    <ul type="square">

	    <li> One </li>

	    <li> Two </li>

	    <li> Three </li>

	    </ul>

	

	<li> Three </li>

	</ol>

	

	</body>

	</html>

***

لیست تعریفی definition list : از این لیست برای تعریف واژه ها استفاده می شود. برای ایجاد لیست تعریفی از تگ <dl> استفاده می شود. از تگ <dt> (مخفف definition term) برای وارد نمودن واژه موردنظر استفاده می شود. پس از آن تگ <dd> (مخفف define definition) برای تعریف واژه موردنظر اضافه می شود.



	

	<html>

	

	<head>

	  <title>Lists</title>

	</head>

	

	<body>

	

	<p>

	<dl>

	<dt> One </dt>

	<dd> a number after zero </dd>

	

	<dt> Two </dt>

	<dd> a number after one </dd>

	

	<dt> Three </dt>

	<dd> a number after two </dd>

	</dl>

	</p>

	</body>

	</html>