تخفیف ویژه

آموزش HTML (قسمت 7) : کار با لیست ها در HTML

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۰۶ مهر ۱۳۹۱

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

امروزه از لیست‌ها به همراه زبان CSS برای کنترل ظاهر نمایشی آن ها، به منظور ایجاد جلوه‌های گرافیکی، همچون منوهای درختی، منوهای افقی و عمودی، تب‌ها و... استفاده میشود.

دسته بندی لیست‌ها

همانطور که گفتیم لیست‌ها به سه دسته اصلی تقسیم می‌شوند:

  • لیست‌های نامرتب
  • لیست‌های مرتب
  • لیست‌های تعریفی یا توضیحی

1. لیست‌های نامرتب : در این نوع لیست‌ها ترتیب قرارگیری عناصر لیست مهم نبوده، و معمولا برای لیست کردن آن‌ها از bullet‌های دایره ای توپر، تو خالی، و مربع استفاده میشود، که البته با استفاده از css میتوان bullet مورد نظر را جایگزین آنها کرد. مثال:

  • Eggs
  • Cheese
  • Milk
  • Papadums
  • Tickle-me Elmo
  • Dr Who Remote Control Dalek

2. لیست‌های مرتب : در این نوع لیست‌ها ترتیب قرارگیری عناصر لیست مهم بوده و برای نمایش ترتیب آن‌ها از اعداد یا حروف انگلیسی یا رومی استفاده می‌شود. مثال:

  1. Remove the outer casing by pushing the plastic rivets through.
  2. Disconnect the main power harness from the inner unit.
  3. Remove connection to the glow plug.
  4. Extract unit, keeping upright at all times.

3. لیست‌های تعریفی : از این گونه لیست‌ها هنگامی که می‌خواهیم یکسری از آیتم هایی که یک بخش عنوان و یک توضیح برای آن عنوان دارند را نمایش دهیم، استفاده می‌کنیم. مثال:

Spam
unsolicited email sent in the hope of increasing sales of some product, or simply for the purposes of annoying people
Spammer
someone who sends out spam email and therefore deserves to develop a nasty incurable disease of some kind
Spam Filter
a tool used in email to 'filter out' likely spam messags, usually placing them in a dedicated junk messages folder or similar

بسیار خب، حالا شما را با تگ هایی که برای ایجاد چنین لیستهایی استفاده میشود، آشنا خواهیم کرد.

تگ <ol> برای ایجاد لیست‌های مرتب : از این تگ برای ایجاد لیست‌های مرتب استفاده می‌شود. برای ایجاد آیتم‌های این لیست می‌بایست از تگ <li> (مخفف list Item) در داخل تگ <ol> استفاده نمود. این تگ از صفت‌های زیر پشتیبانی میکند.

Type : با استفاده از این صفت می‌توان نوع bullet کنار آیتم را مشخص نمود. این صفت مقادیر زیر را می‌پذیرد:

  1. a : برای نمایش حروف کوچک انگلیسی
  2. A : برای نمایش حروف بزرگ انگلیسی
  3. i : برای نمایش حروف کوچک رومی
  4. I : برای نمایش حروف بزرگ رومی
  5. 1 : برای نمایش اعداد به عنوان bullet برای آیتم‌ها ( مقدار پیشفرض این صفت همین مقدار است)

Start:این صفت مشخص می‌کند که شماره گذاری لیست ما باید از چندمین کاراکتر از انواعی که در صفت type مشخص شده شروع شود. به عنوان مثال اگر مقدار صفت type برابر با A بود مقدار 3 برای صفت start به معنی شروع لیست از کاراکتر C خواهد بود.

Compact : این صفت بولین موجب فشرده نمایش داده شدن آیتم‌های لیست خواهد شد. البته این صفت دیگر در هیچ مرورگری پشتیبانی نمی‌شود.

تگ <ul> برای ایجاد لیست‌های نامرتب : از این تگ برای ایجاد لیست‌های نامرتب استفاده میشود. برای ایجاد آیتم‌های لیست ، از تگ <li> در داخل تگ <ul> استفاده میشود. این تگ از صفت‌های زیر پشتیبانی می‌کند.

type : با استفاده از این صفت میتوان نوع bullet کنار آیتم را مشخص کرد. این صفت مقادیر زیر را می‌پذیرد:

  • circle : یک دایره توخالی را به عنوان bullet نمایش می‌دهد.
  • disc : یک دایره توپر سیاه رنگ را به عنوان bullet نمایش می‌دهد.
  • square : یک مربع توپر سیاه رنگ را به عنوان bullet نمایش می‌دهد.

Compact : این صفت بولین موجب فشرده نمایش داده شدن آیتم‌های لیست خواهد شد. البته این صفت دیگر در هیچ مرورگری پشتیبانی نمی‌شود.

تگ <dl> برای ایجاد لیست‌های تعریفی : برای ایجاد لیست‌های تعریفی از تگ <dl> استفاده می‌شود. هر لیست تعریفی از چند عنوان و توضیحات آن عنوان تشکیل می‌شود. برای ایجاد هر عنوان از تگ <dt> و برای ایجاد توضیح از تگ <dd> استفاده میشود. تگ <dl> فقط از صفت compact پشتیبانی می‌کند. که بازم هیچ مرورگری از این صفت پشتیبانی نمی‌کند!!:D

در زیر شما می‌توانید یک لیست تعریفی را مشاهده کنید.

<dl>
<dt>Spam</dt>
<dd>unsolicited email sent in the hope of increasing sales of some product, or simply for the purposes of annoying people</dd>
<dt>Spammer</dt>
<dd>someone who sends out spam email and therefore deserves to develop a nasty incurable disease of some kind</dd>
<dt>Spam Filter</dt>
<dd>a tool used in email to 'filter out' likely spam messags, usually placing them in a dedicated junk messages folder or similar</dd>
</dl>

نتیجه در مرورگر :

تگ <dl>

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

type : از این صفت برای تغییر دادن نوع bullet مربوط به یک آیتم لیست به غیر از آن نوعی که در صفت type تگ‌های ul  و ol تنظیم شده است استفاده می‌شود. این صفت برای تگ <li> همان مقادیری را که در تگ <ol> و <ul> میگیرد، به عنوان مقدار می‌پذیرد. به مثال زیر دقت کنید:

<ul type="disc">
<li>Eggs</li>
<li type="circle">Cheese</li>
<li>Milk</li>
<li>Papadums</li>
<li>Tickle-me Elmo</li>
<li>Dr Who Remote Control Dalek</li>
</ul>

نتیجه در مرورگر :

تگ <ol>

value : از این صفت برای تغییر دادن عدد کنار یک آیتم از لیست استفاده می‌شود. در واقع ما می‌توانیم ترتیب نمایش اعداد کنار یک آیتم را با این صفت به هم بزنیم. این صفت یک عدد صحیح را به عنوان مقدار می‌پذیرد. به مثال زیر دقت کنید :

<ol>
<li>Eggs</li>
<li>Cheese</li>
<li>Milk</li>
<li value="99">Papadums</li>
<li>Tickle-me Elmo</li>
<li>Dr Who Remote Control Dalek</li>
</ol>

نتیجه در مرورگر :

تگ <ul>

لیست‌های تو در تو

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

<h1>Menu</h1>

<ol>
<li>Home Page</li>
<li>Educations
<ul>
<li>HTML Tutorials</li>
<li>CSS Tutorials</li>
</ul>
</li>
<li> Facilities
<ul>
<li> Submit </li>
<li>Forum </li>
<li> Ads </li>
</ul>
</li>
<li> About Us </li>
</ol>

نتیجه در مرورگر :

لیست تو در تو

تا اینجا آموزش کار با لیست‌ها به پایان رسید. در مطلب بعدی به کار با جداول در HTML  و معرفی تگ <table>خواهیم پرداخت.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

محمّد حسن مهرآذر

خیر منظور من اینه که مثلا نوشتید Home Page و همون جا تگ رو بستید ولی در Eduction این کار انجام نشده؟ ❓

کیوان علی محمدی

دوست عزیز،اگه نگاه کنی سجاد برای این قسمت حالت زیر منو ایجاد کرده،برای همین تگ رو بعد از تگ ul داخلی بسته.

محمّد حسن مهرآذر

سلام ببخشید چرا در قسمت Eduction تگ رو نبستید؟

کیوان علی محمدی

سلام مگه میشه تگ بسته نشه؟بعد از کلمه Education یه لیست دیگه قرار گرفته،بعد از این لیست تگ بسته شده.

محمّد حسن مهرآذر

سلام ببخشید در عبارت HTML Tutorials اگه بخوایم دایره رو تو پر سیاه کنیم باید چه کاری کنیم؟

کیوان علی محمدی

سلام برای اون لیست توی css از خاصیت list-style:disc استفاده کن.

مهدی

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

mehdiweb

سپاس گذارم سجاد جان
منتظر آموزش های css از طرف شما هستیم 😀
این آموزش ویدویی جاوا اسکریپ توسط اقا لقمان تا قسمت 8 اومد . میشه ازتون بپرسین بقیش چی شد ؟

سجاد دریس

سلام.
باشه دو سه هفته دیگه که آموزش html تموم شد، آموزش css رو شروع می کنم.
درمورد آموزش های ویدیویی هم همونطور که سینا جان گفت، کلا همگی درگیر درس و مشقیم، 😀
دعا کنین واسمون 😳

محمدسینا معراجیان

آقا لقمان درگیر مسائل مربوط به دکتراشون هستن یکم سرشون شلوغه کلا این یه سال رو از همه معذرت می خوایم هممون درگیر کنکوریم !
پایدار باشید

مهدی

با سلام به داداس سجاد گل
خیلی خوبه آموزش ها
میشه در اینده مانند همین سری آموزش ها رو ابتدا برای css و سپس برای javascript اریه کنید ؟
یقین دارم که استقال خوبی میشه
سپاس

HappyMoon

خیلی ممنون. شرمنده که مزاحم شدم، من خودم از تالارگفتمان به شدت متنفرم سعی میکنم تا بشه وارد تالارها نشم. خلاصه که خیلی ببخشید.
ممنون از توضیحاتتون.

محمدسینا معراجیان

اشتباه می کنید انجمن ها جزو بهترین چیزهای ممکن هستند واقعا ! البته انجمن های خوبش!

HappyMoon

اما من تاحالا تو هر انجمنی رفتم جز دعوا و کل کل چیزی دستگیرم نشده واسه همین سعی میکنم وارد هیچ انجمنی نشم. 🙂 امیدوارم انجمن این سایت مثل بقیه انجمن ها نباشه. 😳

محمدسینا معراجیان

درسته بستگی به انجمنش داره انجمن ما هم تازه تاسیس شده یکم طول میکشه تا بکشه بالا

سجاد دریس

سلام.
لطف داری مهدی جان.
چشم اگه عمری باقی موند.. آموزش css رو میدم.
اما جاوا اسکریپت رو فکر نکنم، چونکه آقا لقمان داره آموزش ویدیویش رو میده.و اونوقت میشه تکرار.!
ولی چشم، حالا شاید جاوااسکریپت هم آموزشش رو دادم.

HappyMoon

من یه سوال دارم میشه همینجا جواب بدین؟
این اینترفیس که میگن یعنی چی؟ ❓ ❓ ❓

سجاد دریس

سلام.
راستش خودم هم فقط میدونم که این کلمه به معنی رابط هست و کارو کاربرشو نمیدونم 😀
….یه مقاله تو نت پیدا کردم. اینم خلاصش:
اینترفیس قراردادی است که تولید کننده یک کلاس خود را ملزم به رعایت آن میداند این قرار داد signature اعضای public کلاس شامل متدها رخدادها و خصوصیات کلاس را مشخص میکند
اما اینکه اینترفیس چه کاربردی دارد بحث گسترده ای است که کاملا با مباحث design pattern همراه خواهد بودو بسیار فراتر از توضیح در یک یا چند پست میگردد ، اینترفیس از ارکان اصلی تولید برنامه به روش شی گراست و بدون آن برنامه نویسی بر اساس اصول oo ناممکن است
از آنجائیکه ایده اصلی مدل شی گرایی برگرفته از زندگی روزمره انسان و ارتباطات موجود در آن است بهترین مثال را میتوان از همین واقعیات انتخاب کرد.
شما فرض کن یک اتومبیل بنز خریدی ، بنظر شما که یک کاربر این اتومبیل هستی نحوه رانندگی با آن تفاوتی با اتومبیلی از نوع دیگر دارد جواب منفی است چون شرکت مرسدس بنز خود را ملزم به رعایت اینترفیس اتومبیل در تولیدمحصولات خود کرده و این اینترفیس مشخص میکند که اتومبیل باید گاز ، کلاج، فرمان و غیره داشته باشد و شما چون آموزش دیدی که با اینترفیس اتومبیل کار کنی قادر خواهی بود پشت فرمان هر نوع ماشینی بنشینی و از آن استفاده کنی و کلا اگر دقت کنی مفهوم اینترفیس در تمام ابعاد زندگی ما وجود دارد و توانایی ما در استفاده از اشیا مختلف به خاطر پیاده سازی اینترفیسی مشخص توسط این اشیا و دانش ما در استفاده از این اینترفیسها میباشد.
در مبحث نرم افزار و در طراحی و پیاده سازی به روش شی گرایی هم اینترفیس همان مقدار اهمیت دارد که در زندگی روزمره اما اینکه ما استفاده نمیکنیم مبحثی جداست ، ساده ترین و دم دست ترین مثال نرم افزاری که میتوانم ذکر کنم همین متد Dispose است که بارها از آن استفاده کرده ایم ، استفاده ای که از این متد میکنیم این است که منابع unmanaged را در آن release میکنیم . اما اینکه این متد کی و چگونه فراخوانی میشود موضوعی است که ما را با کاربرد اینترفیس آشنا میکند. در دات نت منابع managed به وسیله gc آزاد میشوندو آزاد سازی سایر منابع به عهده برنامه نویس است . وقتی gc میخواهد یک شی را از حافظه پاک کند ابتدا بررسی میکند تا ببیند آیا این شی از نوع کلاسی است که اینترفیس IDisposable را پیاده سازی کرده است یا خیر در صورتی که جواب مثبت بود gc متوجه میشود که این شی احتمالا منابع unmanage ای را هم در اختیار گرفته که آنها نیز باید آزاد شوند و از آنجا که با اینترفیس IDisposable آشناست میداند این کلاس یک متد عمومی به صورت void Dispose دارد و با فراخوانی آن تمام منابع unmanage را آزاد خواهد کرد. این سلسله کارها به این دلیل با موفقیت صورت گرفت که هم تولید کننده کلاس ومصرف کننده آن(gc) با هم در مورد اینترفیس IDisposable توافق کرده اند . از این مثالها در خود محیط دات نت و ابزار ویژوال استودیو فراوان است. در مورد برنامه هایی که ما تولید میکنیم هم در صورت استفاده صحیح در کد نویسی و البته بینش صحیح در فاز طراحی بی اندازه مفید است و در صورت استفاده نادرست جز گرفتاری و زیاد شدن زمان پیاده سازی هیچ خاصیت دیگری ندارد.
——
::. درضمن از بقیه دوستان خواهش می کنم نظراتی که میدن در مورد همون پست باشه و اگه سوال یا مشکل دیگه ای دارن توی انجمن های سایت مطرح کنن.

مسعود

سلام آقا سجاد:اميدوارم حالت خوب باشه لازم ميدونم ابتدا تشكر كنم از زحمتي كه ميكشي براي مردم. اما در ادامه چند سؤال دارم لطفا اگه ميشه بچگونه برام جواب بنويسيد چون من تو برنامه نويسي اصلا وارد نيستم و دارم خودم فضولي قالب هاي وبلاگم رو مي كنم .البته جسارته كه از شما اينجور مي خام (ميدونم شما سطح آموزشتون بالاس .من بايد بشينم واز اول برنامه نويشي كاركنم ولي دارم از آموزشاتون يه چيزايي مي فهمم.) ببخشيد فقط يه خواهشه اگه ممكنه؟
1- ميخام فيلم يا فلش رو تو وبلاگ خودم نشون بدم لينك نكنم برا جاي ديگه از چه كدي استفاده كنم وكجاي قالب تو ويرايش بزارم؟
2- بعضي وقتا برا تمرين من چيزايي رو از كد هاي برنامه هاي آموزشيتون كپي مي كنم و با پسوند اچتمل هم سيو مي كنم ولي مرور گر حروف به هم ريخته را نشون ميده با وجودي كه با يوتي اف 8 هم ذخيره مي كنم اشكال كارم كجاس؟
3- از كجا بدونم مختصات متن داخل وبلاگ كجاي قالبه مثل رنگ و فونت متن، رنگ زمينه متن، بك گراند متن،الاين و عرض متن و… ميخام تغييراتي بدم تجربي ياد بگيرم ميشه برام توضيح بدين؟
4- براي استفاده از CSS وجاوا اسكريپت كه داخل قالب بگنجونم نمي فهمم كجا بزارم كه جاي دلخواهم نشون داده بشه؟
5- اين قاب هاي كنار متن كه لينك ها و موضوعات وآرشيو وتبليغات وغيره توش نشون داده مي شه را چه جوري ويرايشش كنم وعلامت مشخصا اين قاب ها تو قالب چيه تا بتونم پيداش كنم؟
6- تا حدودي با طراحي هم آشنام مي خوام اگه بشه ظاهر وبلاگ را خودم طراحي كنم چه جوري مار كنم؟
سؤالاتم زياده فعلا بيشتر باعث عصبانيتتون نمي شم ممكن هس جواب رو برام ايميل كنين تا آنلاين نباشين كه وقت ارزشمندتون رو نگرفته باشم
خيلي از محبتتون تشكر مي كنم
😳 😳 😳

سجاد دریس

سلام.
خواهش میکنم نظر لطفتونه
اما جواب سوالاتون
1. از این کد استفاده کنید برای فلش

&lt;object data=&quot;flashs/fc.swf&quot; width=&quot;120&quot; height=&quot;240&quot; border=&quot;5&quot;&gt;
 &lt;param name=&quot;src&quot; value=&quot;flashs/fc.swf&quot; /&gt;
 &lt;param name=&quot;quality&quot; value=&quot;low&quot; /&gt;
 &lt;param name=&quot;loop&quot; value=&quot;false&quot; /&gt;
&lt;/object&gt;

2. نمیدونم.
3. روی عنصر (متن، دکمه، تصویر) موردنظرتون کلیک راست کنید و گزینه inspect element رو انتخاب کنید، تا کدهای هر قسمت براتون نشون داده بشه.
4.اینجا رو بخونید.
5.به این قسمت ها بلوک block گفته میشه و حتما توی قالب همچین اسمی دارند.
6.باید با استفاده از css و html طراحیش کنید و بعد با یکی از سیستم های مدیریت محتوا، یا سیستم های وبلاگدهی ستش کنید..اگر منتظر بمونید پس از تموم شدن سری آموزشی css آموزش طراحی قالب رو خواهیم داشت

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.