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

- visibility ۲۰ mode_comment

لیست ها یکی از پرکاربردترین عناصر موجود در 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

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

comment دیدگاه کاربران
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. از این کد استفاده کنید برای فلش

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

مهدی

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

سجاد دریس

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

HappyMoon

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

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

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

HappyMoon

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

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

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

mehdiweb

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

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

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

سجاد دریس

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

مهدی

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

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

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

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

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

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

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

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

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

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

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

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

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.