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

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

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

[email protected]://free-learn.ir/

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

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

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

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

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

نیست.

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

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

1 >body<

https://free-learn.ir/%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1-%DB%8C%DA%A9-%D9%81%D8%A7%DB%8C%D9%84-html/

https://free-learn.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%86%D8%AD%D9%88%D9%87-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%81%D8%A7%DB%8C%D9%84-html/

https://free-learn.ir/category/web_design/html_tutorial/




2

3

4

5

6

7

8

9

10

>ul<

>li<سایت>/li<

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

>li<فری>/li<

>li<لرن>/li<

>/ul<

>/body<

امتحان کنید

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

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

https://files.free-learn.ir/Try/html/html_learn/Tryit_html_Lists_T1.html

https://free-learn.ir/

mailto:[email protected]




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

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

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

1

2

3

4

>ul type="Value"<

>li<...>/li<

>li<...>/li<

>/ul<

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

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

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

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

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




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مقدار مثال برای






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 لیست هایی هستند که آیتم ها یا مقادیر آنها دارای ترتیب می باشند، در لیست های مرتب استفاده نماییم.<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 شماره گذاری با حروف بزرگ انگلیسی


https://free-learn.ir/%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%AC%D8%AF%D8%A7%D9%88%D9%84-%DB%8C%D8%A7-tables-%D8%AF%D8%B1-html




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<





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مقدار مثال برای






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نحوه عالمت گذاری لیست ها با استفاده از صفت






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

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

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

https://free-learn.ir/%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%B5%D9%81%D8%AA-style-%D8%AF%D8%B1-html

https://free-learn.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AA%DA%AF-ol-%D8%AF%D8%B1-html/

https://free-learn.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AA%DA%AF-ul-%D8%AF%D8%B1-html/




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همچنین از لیست هایی که دارای توضیحات می باشند نیز پشتیبانی میکند، برای ایجاد یک لیست با <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لیست های تودرتو در


https://free-learn.ir/%D8%AA%D9%88%D8%B6%DB%8C%D8%AD%D8%A7%D8%AA-%DB%8C%D8%A7-comments-%D8%AF%D8%B1-html/

https://free-learn.ir/%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%B5%D9%81%D8%A7%D8%AA-%DB%8C%D8%A7-attributes-%D8%AF%D8%B1-html/




نیز ایجاد نماییم، لطفا به مثال زیر توجه نمایید.تودرتو لیست ها را بصورت 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مثال های بیشتر از لیست ها در


https://free-learn.ir/%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%DB%8C%D8%A7-images-%D8%AF%D8%B1-html




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


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




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

Documents