لیست ها در html

لیست ها در HTML

آموزش کامل لیست ها در HTML تگ ul تگ li  و تگ ol

آموزش کامل لیست ها در HTML

در این جلسه ی آموزشی قصد دارم به شما آموزش دهم که لیست ها در html چه هستند، چه کاربردی دارند و اینکه چطور می توان از آنها استفاده کرد.

انواع لیست ها در html

  1. لیست های غیر ترتیبی: این نوع لیست ها در واقع ترتیب خاصی ندارند به این شکل میباشد.
  •  .
  • .
  • .
  • .
  • .
  •  
  1. لیست های ترتیبی: و نوع دوم لیست ها به این گونه می باشند که به ترتیب از یک تا …. بی نهایت ادامه خواهند داشت.

مانند زیر:

  1. .
  2. .
  3. .
  4. .
  5. .

لیست ها در html به چه دردی می خورند؟

یکی از مهم ترین عناصر موجود در html لیست ها می باشند که می توانید به راحتی موارد زیبایی را با آنها خلق کنید.

برای یکی از مهم ترین کاربرد های لیست ها در دنیای وب می توان هدر یا منوی وبسایت ها نیز اشاره کرد.

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

خانه       درباره ی ما      تماس باما       آموزش ها

در قسمت بالایی سایت ما هم این موارد وجود دارند.

یک نکته!!

در صورتی که خواستید کد های html و css یک صفحه ی وب در در مرورگر ها مشاهده کنید کافیست که کلید F12 را بفشارید تا بتوانید کد های آن صفحه را مشاهده کنید همچنین می توانید بر روی صفحه ی مورد نظر کلیک راست کرده و گزینه ی inspect را انتخاب کنید.

به همین راحتی و خوشمزه گی…

تگ ul در html و اهمیت آن در لیست ها در html

شما اگر به خوبی قسمت ساخت جدول با html را به یاد داشته باشید، گفته شد که تمامی عناصر جداول درون این پدیده قرار می گیرند.

تگ ul در html  نیز به این گونه است که تمامی پدیده های لیست های نامرتب که قصد ساختن آنها را دارید در این تگ قرار می گیرند.

تگ li

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

ما قصد داریم کدی بنویسیم که خروجی زیر را دریافت کنیم:

  • مثال یک
  • مثال دوم
  • مثال سوم
  • مثال چهارم

به نظر شما باید چه کدی را بنویسید قبل از اینکه کد زیر را بخوانید خودتان کمی تلاش کنید تا حرفه ی کد نویسی در شما تقویت شود.

کد خروجی بالا

 

توضیح

تمامی موارد در جلسات قبلی توضیح داده شده است به جر محتویات تگ body

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

سپس شما چهار تگ li را مشاهد می کنید که مقادیر لیست های نامرتب شما می باشند.

 

تگ ol

سومین تگی که در جلسه ی لیست ها در html به شما آموزش می دهیم این تگ پر کاربرد است.

این تگ هم مانند تگ ul است با این تفاوت که در صورتی که شما قصد ساختن یک لیست مرتب داشته باشید باید از این تگ استفاده کنید.

ساخت لیست مرتب با html

در صورتی بخواهید لیست مرتبی مانند زیر داشته باشید می بایست که کدی را که در ادامه در اختیار شما قرار می دهیم را در ویرایشگر متن خود وارد کرده و خروجی بگیرید.

  1.  مثال اول
  2. مثال دوم
  3. مثال سوم
  4. مثال چهارم

کد خروجی بالا

 

توضیح همه ی موارد  در بالا ی همین آموزش داده شده است ولی بازهم توضیح کوتاهی خدمت شما ارائه می دهم

توضیحات محتویات تگ body

در قسمت اول تگ ol می باشد که نشانگر این است که شما قصد ساختن یک لیست مرتب دارید سپس هم که تگ های li می باشند که به گونه ای مقادیر لیست را بیان می کنند.

شما تا اینجا توانسته اید جداول دلخواه خود را به راحتی بساید همچنین قادر هستند از آموزش های css هم که در جلسات گذشته داده شد استفاده کنید و پروژه های زیبایی را با کمک این دو زبان خلق کنید.

دیگر مورد دیگری در مورد با لیست ها باقی نمانده اند.

پایان جلسه ی لیست ها در html

نوشتهٔ قبلی
متا تگ رفرش و ریدایرکت صفحات با html
نوشتهٔ بعدی
ساخت لیست کشویی با html

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست