files.free-learn.ir › pdf_content › html › learning...  · web view2019-12-19 · آموزش...

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 1

FreeLearn20181@gmail.comhttps://free-learn.ir/

HTML در Listsکار با لیست ها یا

درList میخواهیم با نحوه استفاده از لیست ها در این زبان آشنا شویم، لیست یا HTMLدر این بخش از آموزش HTML به دو دسته تقسیم می شوند، یا بطور کلی میتوان گفت در HTML نوع لیست داریم :۳ ما

لیست نامرتب یاUnordered list لیست مرتب یاOrdered List لیست دارای توضیحات یاDescription List

HTMLلیست های نامرتب در

در این نوع لیست ها ترتیب قرار گرفتن آیتم ها مهم نیست، یعنی مهم نیست که کدام مقدار اولش نوشته شود و کدام آخر، پس بطور کلی لیست های نامرتب لیست هایی هستند که ترتیب قرار گرفتن آیتم ها در آنها مهم

نیست.

آیتم های یک لیست<li> میتوانیم یک لیست نامرتب و با استفاده از تگ <ul> با استفاده از تگ HTMLما در نامرتب را ایجاد نماییم.

حال لطفا به مثال زیر توجه نمایید :

1 >body<

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 2

FreeLearn20181@gmail.comhttps://free-learn.ir/

2

3

4

5

6

7

8

9

10

>ul<

>li<سایت>/li<

>li<آموزشی>/li<

>li<فری>/li<

>li<لرن>/li<

>/ul<

>/body<

امتحان کنید

( اگر خروجی را مشاهده نمایید، میبینید که یک لیست از آیتم های ما ایجاد شدهامتحان کنیدبا کلیک بروی دکمه ) مشکی ایجاد شده است.گلوله توپُرو در کنار هریک از آیتم ها یک

HTMLنوع عالمت گذاری لیست های نامرتب در

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 3

FreeLearn20181@gmail.comhttps://free-learn.ir/

همانطور که در مثال قبلی مشاهده نمودید در حالت پیش فرض آیتم های لیست های نامرتب بصورت دایره توپُر و مقادیرtype این آیتم را با استفاده از صفت نوع عالمت گذاریدر مرورگرها نمایش داده می شوند، ما میتوانیم

زیر تغییر دهیم.

بصورت زیر می باشد :<ul> در تگ typeصفت شکل کلی برای استفاده از

1

2

3

4

>ul type="Value"<

>li<...>/li<

>li<...>/li<

>/ul<

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

مقدار توضیحdisc این گزینه بصورت پیش فرض وجود دارد

circle می شوددایره توخالیعالمت آیتم ها بصورت square می شودمربع توپُرعالمت آیتم ها بصورت

none عالمت گذاری نداشه باشندهیچگونهاین گزینه باعث می شود آیتم ها

:discمقدار مثال برای

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 4

FreeLearn20181@gmail.comhttps://free-learn.ir/

1

2

3

4

5

6

7

8

>body<

>ul type="disc"<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ul<

>/body<

امتحان کنید

:circleمقدار مثال برای

1

2

3

4

5

6

7

8

>body<

>ul type="circle"<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ul<

>/body<

امتحان کنید

:squareمقدار مثال برای

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 5

FreeLearn20181@gmail.comhttps://free-learn.ir/

1

2

3

4

5

6

7

8

>body<

>ul type="square"<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ul<

>/body<

امتحان کنید

:noneمقدار مثال برای

1

2

3

4

5

6

7

8

>body<

>ul type="none"<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ul<

>/body<

امتحان کنید

HTMLلیست های مرتب در

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 6

FreeLearn20181@gmail.comhttps://free-learn.ir/

برای ایجاد یکHTML لیست هایی هستند که آیتم ها یا مقادیر آنها دارای ترتیب می باشند، در لیست های مرتب استفاده نماییم.<li> و برای ایجاد آیتم های لیست از تگ <ol>لیست مرتب باید از تگ

هم باشند. HTMLآیتم های لیست ها چه در نامرتب و چه مرتب میتوانند تصاویر،لینک و دیگر عناصر

حال لطفا به مثال زیر توجه نمایید :

1

2

3

4

5

6

7

8

9

10

>body<

>ol<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ol<

>/body<

امتحان کنید

در این نوع لیست ها نیز همانند لیست های نامرتب ما میتوانیم نحوه شماره گذاری آیتم ها را به دلخواه با تنظیم نماییم.typeاستفاده از مقادیر زیر در صفت

مقدار توضیح۱ شماره گذاری عددی – این مقدار بصورت پیش فرض می باشد

A شماره گذاری با حروف بزرگ انگلیسی

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 7

FreeLearn20181@gmail.comhttps://free-learn.ir/

a شماره گذاری با حروف کوچک انگلیسیI شماره گذاری با حروف بزرگ رومانیi شماره گذاری با حروف کوچک رومانی

:۱مقدار مثال برای

1

2

3

4

5

6

7

8

>body<

>ol type="1"<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ol<

>/body<

امتحان کنید

:Aمقدار مثال برای

1 >body<

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 8

FreeLearn20181@gmail.comhttps://free-learn.ir/

2

3

4

5

6

7

8

>ol type="A"<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ol<

>/body<

امتحان کنید

:aمقدار مثال برای

1

2

3

4

5

6

7

8

>body<

>ol type="a"<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ol<

>/body<

امتحان کنید

:Iمقدار مثال برای

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 9

FreeLearn20181@gmail.comhttps://free-learn.ir/

1

2

3

4

5

6

7

8

>body<

>ol type="I"<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ol<

>/body<

امتحان کنید

:iمقدار مثال برای

1

2

3

4

5

6

7

8

>body<

>ol type="i"<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ol<

>/body<

امتحان کنید

Styleنحوه عالمت گذاری لیست ها با استفاده از صفت

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 10

FreeLearn20181@gmail.comhttps://free-learn.ir/

به راحتی میتوانیم olو ul تگ در درون Typeصفت کمی باالتر همانطور که مشاهده مینمایید، ما با استفاده از نوع عالمت گذاری و یا شماره گذاری آیتم های لیست مون رو مشخص نماییم.

اینکارو به راحتی انجام دهیم، اگر فری لرن رو در بخش هایStyleعالوه بر این ما میتوانیم با استفاده از صفت آشنا شدیم. Style صفت قبلی دنبال کرده باشید میدانید که در بخش های قبلی بطور کامل با

نوع عالمت گذاری هر دو نوع لیست مشخص شده است.Styleدر مثال زیر با استفاده از صفت

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 11

FreeLearn20181@gmail.comhttps://free-learn.ir/

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

>body<

>ul style="list-style-type:circle;"<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ul<

>ol style="list-style-type:upper-alpha;"<

>li<Salam>/li<

>li<Man>/li<

>li<Sadegh>/li<

>li<Hastam>/li<

>/ol<

>/body<

امتحان کنید

HTMLلیست های دارای توضیحات در

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 12

FreeLearn20181@gmail.comhttps://free-learn.ir/

HTMLهمچنین از لیست هایی که دارای توضیحات می باشند نیز پشتیبانی میکند، برای ایجاد یک لیست با <dd> و برای ایجاد توضیحات از تگ <dt> و برای ایجاد آیتم ها از تگ <dl> باید از تگ HTML در توضیحات

استفاده کرد.

1

2

3

4

5

6

7

8

9

10

11

12

>body<

>dl<

>dt<Free-Learn>/dt<

    >dd<» Is Free>/dd<

>dt<My Name>/dt<

    >dd<» Is Sadegh>/dd<

>dt<My Family>/dt<

    >dd<» Is Asadi>/dd<

>/dl<

>/body<

امتحان کنید

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

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 13

FreeLearn20181@gmail.comhttps://free-learn.ir/

نیز ایجاد نماییم، لطفا به مثال زیر توجه نمایید.تودرتو لیست ها را بصورت HTMLما میتوانیم در

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

>body<

>ul<

>li<ONE>/li<

>li<TWO

  >ul<

    >li<Three>/li<

    >li<Four

     >ul<

      >li<Five>/li<

      >li<Six>/li<

     >/ul<

    >/li<

  >/ul<

>/li<

>li<Seven>/li<

>li<Eight>/li<

>/ul<

>/body<

امتحان کنید

HTMLمثال های بیشتر از لیست ها در

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

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 14

FreeLearn20181@gmail.comhttps://free-learn.ir/

: )منوی سایت بصورت افقی)۱مثال شماره

امتحان کنید

: )منوی سایت بصورت عمودی)۲مثال شماره

امتحان کنید