آموزش آنلاين و حضوري طراحي سايت

http://www.tahlildadeh.com Translate this page شما در اين سايت آموزشي با مقالات,كتاب,PDF,فيلم هاي آموزشي رايگان و همين طور دوره آموزش برنامه نويسي به زبان هاي C#,HTML5,ASP,MVC,SQL,اندرويد,React,وردپرس .. را ياد مي گيريد

دوشنبه ۲۴ شهریور ۰۴

آموزش List

۰ بازديد

آموزش طراحي سايت - آموزش List

 

آموزش List

  • < ul>- ليست بدون ترتيب. اين ليست آيتم ها را با استفاده از bullet هاي ساده ليست مي كند.
  • < ol> - ليست منظم. اين ليست از نمودارهاي عددي مختلف براي ليست كردن آيتم هاي شما استفاده مي كند.
  • < dl>- ليست تعريف. اين ليست آيتم هاي شما را به همان روشي كه در ديكشنري منظم شده اند، منظم مي كند.

ليست هاي بدون ترتيب HTML

ليست بدون ترتيب مجموعه اي از آيتم هاي مربوط به هم مي باشد كه هيچگونه نظم و ترتيب خاصي ندارند. اين ليست با استفاده از برچسب < ul> در HTML ايجاد مي شود. هر آيتم در ليست با يك bullet مشخص مي شود.


 مثال:

نمونه يك

 

HTML Unordered List

  • Beetroot
  • Ginger
  • Potato
  • Radish

ويژگي type

مي توانيد از ويژگي type براي برچسب < ul> استفاده كنيد تا نوع bullet خود را مشخص كنيد، كه به طور پيش فرض يك ديسك مي باشد. در زير گزينه هاي ممكن را مشاهده مي كنيد.

 

<ultype="square">

<ultype="disc">
<ultype="circle">ul>ul>ul>
 
در زير مثالي را ميبينيد كه در آن از < ul type="square"> استفاده مي كنيم.

نمونه دو




HTML Unordered List



  • Beetroot

  • Ginger

  • Potato

  • Radish



 

در زير مثالي را مي بينيد كه در آن از < ul type="disc"> استفاده كرده ايم.

 

نمونه سه

 




HTML Unordered List



  • Beetroot

  • Ginger

  • Potato

  • Radish


 

در زير مثالي را مي بينيد كه در آن از < ul type="circle"> استفاده كرده ايم.

 

نمونه چهار

 




HTML Unordered List



  • Beetroot

  • Ginger

  • Potato

  • Radish



 

ليست هاي منظم HTML

 

اگر تمايل داريد آيتم هاي خود را به جاي قرار دادن در يك ليست داراي bullet، در يك ليست عددگذاري شده قرار دهيد، مي توانيد از ليست منظم HTML استفاده كنيد. اين ليست با استفاده از برچسب < ol> ايجاد مي شود. شماره گذاري از يك شروع شده و براي هر ليست منظم عنصر بعدي با اضافه شدن يك عدد و به همراه برچسب< li>اضافه مي شود.
مي توانيد از ويژگي type براي برچسب < ol> استفاده كنيم تا نوع شماره گذاريمورد نظر خود را مشخص كنيد. به طور پيش فرض شماره گذاري به وسيله ي عدد انجام مي شود. در زير گزينه هاي ممكن را مشاهده مي كنيد.

 

<ol type="1">

    - Default-Case Numerals.
<oltype="I">
        - Upper-Case Numerals.
<oltype="i">
            - Lower-Case Numerals.
<oltype="a">
                - Lower-Case Letters.
<oltype="A"> - Upper-Case Letters.ol>ol>ol>ol>ol>

در زير مثالي را مي بينيد كه در آن از < ol type="1"> استفاده كرده ايم.

نمونه پنج




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



در زير مثالي را مي بينيد كه در آن از < ol type="I"> استفاده مي كنيم.

 

نمونه شش




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



در زير مثالي را ميبينيد كه در آن از < ol type="i"> استفاده كرده ايم.

 

نمونه هفت

 




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



: مثال

در زير مثالي را مي بينيد كه در آن از < ol type="A"> استفاده كرده ايم.

 

نمونه هشت




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



 

در زير مثالي را مي بينيد كه در آن از< ol type="a"> استفاده كرده ايم.

 

نمونه نه




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



ويژگي start

شما مي توانيد از ويژگي start براي برچسب < ol> استفاده كنيد تا نقطه ي شروع شماره گذاري خود را مشخص كنيد. در زير گزينه هاي ممكن را مشاهده مي كنيد.

<ol type="1" start="4">

    - Numerals starts with 4.
<oltype="I"start="4">
        - Numerals starts with IV.
<oltype="i"start="4">
            - Numerals starts with iv.
<oltype="a"start="4">
                - Letters starts with d.
<oltype="A"start="4">    - Letters starts with D.
ol>ol>ol>ol>ol>
 

در زير مثالي را مي بينيد كه در آن از < ol type="i" start="4"> استفاده مي كنيم.

 

نمونه ده

 




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



ليست هاي تعريف HTML

HTML و XHTML ليست هايي به نام ليست هاي تعريف را پشتيباني مي كنند كه در اين ليست ها ورودي ها مانند ترتيب لغات در ديكشنري قرار مي گيرند. اين ليست يك روش ايده آل براي ارائه يك فهرست از معاني يا ليستي از اصطلاحات يا ليستي از نام ها و مقادير مي باشد.
ليست تعريف از سه برچسب زير استفاده مي كند

 

  • < dl> - شروع ليست را تعريف مي كند.

 مثال:

نمونه يازده




HTML Definition List



HTML

This stands for Hyper Text Markup Language

HTTP

This stands for Hyper Text Transfer Protocol



جهت مشاهده كدها برروي آموزش طراحي سايت كليك نماييد

 



 

آموزش طراحي سايت- آموزش تگ هاي اصلي در Html

۶ بازديد

آموزش طراحي سايت- آموزش تگ هاي اصلي در Html

در اين سري از مقالات آموزش html مي خواهيم به بيان تگ در html بپردازيم.

 

 برچسب هاي تيتر:

هر داكيومنت با يك تيتر آغاز مي شود. شما مي توانيد از اندازه هاي مختلف براي تيترهاي خود استفاده كنيد. HTML داراي شش سطح مي باشد كه از< h1>, < h2>, < h3>, < h4>, < h5> و < h6> عناصر استفاده مي كند. در هنگام نمايش هر تيتر مرور گر يك خط قبل و يك خط بعد از تيتر اضافه مي كند.

مثال:

نمونه يك

 

 

 

 

  Heading Example

 

 

 

This is heading 1

  

 

 

This is heading 2

 

 

 

This is heading 3

 

 

 

This is heading 4

 

 

 

This is heading 5
 

 

 

This is heading 6

 

 

برچسب پاراگراف:

برچسب < p> به روش طراحي متن شما در پاراگراف هاي مختلف اشاره دارد. هر پاراگراف متن بايد بين برچسب بازكننده ي < p> وبستن < /p> قرار بگيرد، همانطور كه در مثال زير مشاهده مي كنيد:

 

نمونه دو

 

 

 

  Paragraph Example

 

 

 

Here is a first paragraph of text.

 

 

 

Here is a second paragraph of text.

 

 

Here is a third paragraph of text.

 

 

 

برچسب شكست لينك

هرزمان كه شما از < br /> عنصر استفاده كنيد، هر چيزي كه آن را دنبال مي كند از خط بعد شروع خواهد شد. اين برچسب نمونه اي از يك عنصرempty مي باشد، زماني كه لازم نيست برچسبي را باز كنيد يا ببنديد چرا كه چيزي براي رفتن بين آنها وجود ندارد.
در بچسب < br />، يك فضاي خالي بين كااكترهاي br و اسلش جلوي آن وجود دارد. اگر شما اين فضا را حذف كنيد، مرورگرهاي قديمي تر در اجراي خط شكست مشكل خواهند داشت، در حاليكه اگر اسلش را حذف كنيد برچسب < br> باقيمانده در HTML معتبر نمي باشد.

 مثال:

نمونه سه

 

 

    Line Break  Example

 

 

 

Hello
         You delivered your assignment ontime.
        Thanks


        Mahnaz   

 

 

 

مركزگذاري متن

مي توانيد با استفاده از برچسب < center> مي توانيد هر محتوايي را در مركز صفحه يا در مركز هر سلول از يك جدول قرار دهيد.


 مثال:

نمونه چهار

 

 

 

    Centring Content Example4

 

 

 

This text is not in the center.

 

 

 

       

 

 

This text is in the center.

        

 

 

 

 

 

خطوط افقي

خطوط افقي براي بخش هاي شكست بصري يك داكيومنت استفاده مي شوند. برچسب < hr> خطي از موقعيت كنوني داكيومنت به حاشيه ي سمت راست ايجاد كرده و خط را طبق آن مي شكند.
به عنوان مثال ممكن است تمايل داشته باشيد بين دو پاراگراف خطي قرار دهيد، همانطور كه در مثال زير ارائه شده است:

 مثال:

نمونه پنج

 

 

 

 

Horizontal Line Example5

 

 

 

This is paragraph one and should be on top

 

 

 


   

 

 

This is paragraph two and should be at bottom


 

 

و باز برچسب< hr /> مثالي از Empty مي باشد كه نيازي به باز كردن يا بستن برچسب نداريد زيرا چيزي براي رفتن بين آنها وجود ندارد.
در عنصر < hr /> يك فضاي خالي بين كاراكترهاي hr و اسلش مقابل آن وجود دارد. اگر اين فضا را حذف كنيد مرورگرهاي قديمي تر در اجراي خط افقي مشكل خواهند داشت. در حاليكه اگر اسلش مقابل آن را حذف كنيد عنصر باقيمانده < hr> مي باشد كه در HTML فاقد اعتبار مي باشد.

 

حفظ طراحي

گاهي اوقات تمايل داريد كه متن فرمت دقيق خود در HTML را دنبال كند، در اين موارد مي توانيد از برچسب پريفرمت < pre> استفاده كنيد.
هر متن بين برچسب باز كننده ي < pre> و برچسب بستن < /pre> طراحي متن منبع را حفظ خواهد كرد.

 مثال:

نمونه شش

 

 

 

Preserve Formatting Example6

 

 

 

    function testFunction( strText ){    alert (strText) }

 

 

 

 

سعي كنيد از همان كد بدون نگهداري آن بين برچسب هاي < pre>...< /pre> استفاده كنيد.

 

فضاهاي غيرشكست:

فرض كنيد مي خواهيد از عبارت "12 Angry Men." استفاده كنيد. در اينجا از مرورگر نمي خواهيد عبارت را بين دو خط به صورت 12 Angry و Men بشكند.

An example of this technique appears in the movie "12 Angry Men."

 

در مواردي كه نمي خواهيد مرورگر متن را بشكند بايد به جاي يك فضاي عادي از فضاي غير شكست استفاده كنيد. براي مثال وقتي "12 Angry Men" را در يك پاراگراف كدگذاري مي كنيد بايد از كدي مانند زير استفاده كنيد:

مثال:

نمونه هفت

 


 

 

 

  Nonbreaking Spaces Example7

 

 

 

 

An example of this technique appears in the movie "12 Angry Men."