illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

45476 ۶ مهر ۹۱
1 2 3 4

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

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

1 2 3 4
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 20 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    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(۷ مهر ۱۳۹۱)

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

        • ‏‏
          محمدسینا معراجیان(۷ مهر ۱۳۹۱)

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

  • ‏‏
    mehdiweb(۶ مهر ۱۳۹۱)

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

    • ‏‏
      محمدسینا معراجیان(۶ مهر ۱۳۹۱)

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

    • ‏‏
      سجاد دریس(۶ مهر ۱۳۹۱)

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

  • ‏‏
    مهدی(۷ مهر ۱۳۹۱)

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

  • ‏‏
    محمّد حسن مهرآذر(۲۰ مرداد ۱۳۹۲)

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

    • ‏‏
      کیوان علی محمدی(۲۰ مرداد ۱۳۹۲)

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

  • ‏‏
    محمّد حسن مهرآذر(۲۰ مرداد ۱۳۹۲)

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

    • ‏‏
      کیوان علی محمدی(۲۰ مرداد ۱۳۹۲)

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

  • ‏‏
    محمّد حسن مهرآذر(۲۰ مرداد ۱۳۹۲)

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

    • ‏‏
      کیوان علی محمدی(۲۰ مرداد ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram