دسته ها
دستهها
- php (1)
- امنیت (6)
- اندروید (3)
- اینترنت (2)
- برنامه نویسی (14)
- بوت استرپ (1)
- پایتون (1)
- تازه ها (22)
- ترفند ها (30)
- تکنولوژی های جدید (1)
- جاوا (2)
- جاوا اسکریپت (2)
- سئو (1)
- سخت افزار (4)
- صنعت بازی (1)
- صنعت رباتیک (1)
- طراحی وب (14)
- عکاسی (1)
- فضاهای ذخیره سازی (1)
- فلاتر (1)
- گوشی های هوشمند (1)
- متفرقه (1)
- موبایل (3)
- نرم افزار (17)
- هوش مصنوعی (4)
- وب (1)
- وردپرس (7)
- ویدئو های آموزشی (24)
لیست ها
HTML امکان ساخت لیست های مرتب شده (که عناصر آن معمولاً با اعداد نشان داده می شوند: 1،2،3) و همین طور لیست های نامرتب (که عناصرش معمولاً به جای اعداد با توپک ها نشان داده می شود) را مهیا می کند. HTML کمک می کند تا بتوانیم لیستی از آیتم ها را به همراه استایلی ویژه نمایش دهیم. در این درس با موستانگ ، انواع مختلف این لیست ها را می آموزیم.
لیست های مرتب شده
در زیر مثالی از نحوه ساخت این گونه از لیست ها را مشاهده می کنید:
<p>Here is a list of ordered items:</p>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
لیست های مرتب شده یک ویژگی بنام type دارند که نحوه علامت گذاری اعضا را مشخص می کند.
type=1: یعنی اعضا توسط اعداد علامت گذاری شوند:
<p>Here is a list of ordered items:</p>
<ol type="1">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
type=A: یعنی اعضا توسط حروف بزرگ الفبا علامت گذاری شوند:
<p>Here is a list of ordered items:</p>
<ol type="A">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
type=a: یعنی اعضا توسط حروف کوچک الفبا علامت گذاری شوند:
<p>Here is a list of ordered items:</p>
<ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
type=I: یعنی اعضا توسط حروف بزرگ یونانی علامت گذاری شوند:
<p>Here is a list of ordered items:</p>
<ol type="I">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
type=i: یعنی اعضا توسط حروف کوچک یونانی علامت گذاری شوند:
<p>Here is a list of ordered items:</p>
<ol type="i">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
لیست های نامرتب
در زیر مثالی از نحوه ساخت لیست های نامرتب را مشاهده می کنید:
<p>Here is a list of unordered items:</p>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
برای اینکه استایل لیست را تغییر دهید، می توانید از یکی از ویژگی های CSS بنام list-style-type استفاده کنید که انواع مختلف آن عبارتند از:
- دیسک
- دایره
- مربع
- هیچ کدام
مثالی از استایل دیسک برای لیست:
<p>Here is a list of unordered items:</p>
<ul style="list-style-type: disc">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
مثالی از استایل دایره برای لیست:
<p>Here is a list of unordered items:</p>
<ul style="list-style-type: circle">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
مثالی از استایل مربع برای لیست:
<p>Here is a list of unordered items:</p>
<ul style="list-style-type: square">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
مثالی از استایل هیچ کدام برای لیست:
<p>Here is a list of unordered items:</p>
<ul style="list-style-type: none">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
در زیر می توانید نمایشی از لیست هایی که تاکنون آموختیم را ببینید:
در نهایت
[*] در این درس با لیست ها در html و انواع آن، یعنی لیست های مرتب شده و لیست های نامرتب آشنا شدیم. در درس آینده با موستانگ همراه باشید تا گذاشتن عکس در HTML را بیاموزید.
[*] سوالات و نظرات خود را می توانید در پایین این نوشته و در قسمت دیدگاه ها ثبت کنید. موستانگ از بازخوردهای شما استقبال خواهد کرد. برای تمرین کدنویسی نیز حتماً سری به مانژ بزنید. 🙂