آموزش طراحي وب سايت با html: آشنايي با html List

آموزش طراحي وب سايت با html: آشنايي با html List

جلسه چهاردهم: آشنايي با html List

آموزش طراحی وب سایت با Html

HTML List چيست؟

html List يا ليست html در واقع يه يک توسعه دهنده وب اجاره ميدهد تا مجموعه اي از عبارت ها را به صورت يک ليست گروه بندي کند.

برفرض ما ميخواهيم اسامي يک مجموعه را در يک صفحه وب به صورت يک ليست ارائه دهيم. ابتدا با استفاده از تگ h2، يک عنوان به نام Contact براي ليست ها در نظر ميگيريم.

<html>
<body>

<h2> Contact </h2>

</body>
</html>

ابتدا براي ايجاد يک فهرست يک گ باز ئ بسته از نوع <ul> استفاده ميکنيم. همانند زير:

<html>
<body>

<h2> Contact </h2>

<ul>

</ul>

</body>
</html>

برای اضافه کردن یک عبارت یا متن به فهرست به صورت لیست، از تگ <Li> استفاده میکنیم. برای هر عبارتی که میخواهیم اضافه کنیم، یک تگ باز و بسته از نوع <Li> ایجاد میکنیم و عبارت مورد نظر را بین دو تگ باز و بسته <Li> ایجاد میکنیم.

نکته: تگ هاي <Li> در بين تگ باز و و بسته Ul قرار ميگيرند. همانند زير:

<html>
<body>

<h2> My Contact </h2>

<ul>
<li> Amin </li>
<li> Iman </li>
<li> AmirAli </li>
</ul>

</body>
</html>

اکنون پروژه را Save کنيد و فايل html ايجاد شده را باز کنيد. همانطور که ميبينيد. يک عنوان به نام Cantact ايجاد شده که در زير ان مخاطبين من به صورت يک ليست قرار گرفته اند. همانند زير:

ايجاد ليست در html
همانطور که مشاهده ميکنيد، يک ليست براي من ايجاد شد.

نکته: عبارت هایی که به صورت یک لیست برای شما نشان دهده میشود، همانند تصویر بالا، در کنار آن یک نقطه ایجاد خواهد شد.

اکنون ما ميخواهيم يک ليست ايجاد کنيم. سپس هر کدام از عبارت هايي را که درون ليست نوشته شده اند را تعريف کنيم. براي اين کار، به تگ هاي dl,dd و dt احتياج داريم

تگ dl: ابتدا بايد اين تگ را ايجاد کنيم. تگ dl، يک ليست براي ايجاد عبارت ها يا نوشته هايي ايجاد ميکند.

تگ dt: این تگ یک عبارت ایجاد میکند.

تگ dd: با استفاده از این تگ، عباراتی که که با استفاده از تک dt ایجاد کردیم، توصیف میکنیم. به مثال زیر توجه کنید.

نکته: تگ هاي dt و dd بايد در بين تگ باز و بسته dl تعريف شوند. 

<html>
<body>

<dl>
<dt>Steve Jobs</dt>
<dd> Steve Jobs founded Apple </dd>
<dt> Bill Gates </dt>
<dd>Bill Gates is one of the richest people in the world</dd>
</dl>

</body>
</html>

htدر قسمت بالا، ابتدا با استفاده از تگ dl، يک ليست تعريف کرديم تا بتواينم درون آن اطلاعاتي را قرار دهيم. سپس با استفاده از تگ dt، دو دو عبارت تعريف کرديم. عبارت Steve jobs و Bill gates. سپس با استفاده از تگ dd، عبارت هاي Biil gates و Steve jobs را با ایجاد یک متن تعريف ميکنم. با ما همراه بشيد.

محمد امین مکارم

مطالب مرتبط

دیدگاهها

نظر: