0 0 تومان
آموزش طراحی سایت (HTML CSS Javascript) | آتریا
آموزش سی شارپ

html

  • تگ link در HTML

    مثال (تگ link در HTML)

    چگونه از تگ <link> برای اضافه کردن فایل CSS خارجی استفاده کنیم:

    <head>
    <link rel="stylesheet" type="text/css" href="theme.css">
    </head>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ link در HTML

    تگ <link> ارتباط بین یک سند و یک منبع خارجی را تعریف می کند.

    تگ <link> برای پیوند به style sheets (شیوه نامه های خارجی) استفاده می شود.


    پشتیبانی مرورگرها از تگ link در HTML

    عنصر          
    <link> بله بله بله بله بله

    نکته: عنصر <link> یک عنصر خالی است، و فقط شامل attributes (خصوصیت ها) می باشد.

    نکته: این عنصر تنها در قسمت head قرار می گیرد، اما می توان بارها از آن استفاده کرد.


    تفاوت بین HTML 4.01 و HTML5

    بعضی از خصوصیت های موجود در HTML 4.01 در HTML5 پشتیبانی نمی شوند.

    خصوصیت "sizes" یک خصوصیت جدید در HTML5 است.


    Differences Between HTML and XHTML

    در HTML تگ <link> تگ پایانی ندارد.

    در XHTML تگ <link> باید با یک تگ پایانی بسته شود.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    charset char_encoding در HTML5 پشتیبانی نمی شود.
    کاراکترها را برای سند لینک شده کد گذاری می کند.
    href URL location یا آدرس سند لینک شده را مشخص می کند.
    hreflang language_code زبان مربوط به متن سند لینک شده را مشخص می کند.
    media media_query مشخص می کند که سند لینک شده برای چه دستگاهی بهینه شده است.
    rel alternate
    archives
    author
    bookmark
    external
    first
    help
    icon
    last
    license
    next
    nofollow
    noreferrer
    pingback
    prefetch
    prev
    search
    sidebar
    stylesheet
    tag
    up
    الزامی است. رابطه بین سند کنونی و سند لینک شده را مشخص می کند.
    rev reversed relationship در HTML5 پشتیبانی نمی شود.
    رابطه بین سند لینک شده با سند کنونی را مشخص می کند.
    sizes HeightxWidth
    any
    اندازه یا سایز منبع لینک شده را مشخص می کند. فقط برای rel=icon
    target _blank
    _self
    _top
    _parent
    frame_name
    در HTML5 پشتیبانی نمی شود.
    مشخص می کند که سند لینک شده کجا و در چه پنجره ای لود شود.
    type media_type نوع media سند لینک شده را مشخص می کند.

    ویژگی های عمومی تگ link در HTML

    تگ <link> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ link در HTML

    تگ <link> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    آموزش HTML-سی اس اس 

    مرجع اشیاء اچ تی ام ال:تگ link در JavaScript 

  • تگ noframes در HTML

    مثال (تگ noframes در HTML)

    یک صفحه با سه قاب با استفاده از تگ <noframes>:

    <html>

    <frameset cols="25%,50%,25%">
      <frame src="frame_a.htm">
      <frame src="frame_b.htm">
      <frame src="frame_c.htm">
      <noframes>Sorry, your browser does not handle frames!</noframes>
    </frameset>

    </html>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ noframes در HTML

    تگ <noframes> در HTML5 پشتیبانی نمی شود.

    تگ <noframes> یک جایگزین برای مرورگرهایی است که از تگ <frame> پشتیبانی نمی کنند. تگ <noframes>می تواند تمامی عناصری که به صورت نرمال در عنصر <body> در صفحه HTML قرار می گیرد را شامل شود.

    تگ <noframes> را می توان برای لینک کردن به یک نسخه بدون فرم از وب سایت و یا برای نمایش یک پیام به کاربران که اطلاع دهد چه فریم هایی مورد نیاز است، استفاده کرد.

    تگ <noframes> داخل عنصر <frameset> قرار می گیرد.

    نکته: اگر می خواهید یک صفحه حاوی frames، را Validate (اعتبار) کنید لازم است که <DOCTYPE>  به یکی از دو حالت  "HTML Frameset DTD" یا "XHTML Frameset DTD" تنظیم شده باشد.


    پشتیبانی مرورگرها از تگ noframes در HTML

    عنصر          
    <noframes> بله بله بله بله بله

    تفاوت بین HTML 4.01 و HTML5

    تگ <noframes> در HTML5 پشتیبانی نمی شود.


    تفاوت بین  HTML aو XHTML

    نکته مهم: در XHTML Frameset DTD، متن داخل عنصر <noframes> باید داخل عنصر <body> محصور شود.

  • تگ param در HTML

     

    مثال (تگ param در HTML)

    تنظیم پارامتر "autoplay" با مقدار "true":

    <object data="horse.wav">
      <param name="autoplay" value="true">
    </object>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ param در HTML

    تگ <param> برای تعریف پارامترهای  عنصر <object> استفاده می شود.

    نکته: HTML 5 همچنین شامل دو عنصر جدید <audio> و <video> برای پخش صوت و تصویر می باشد.


    پشتیبانی مرورگرها از تگ param در HTML

    تگ <param> در همه مرورگرهای اصلی پشتیبانی می شود. با این حال، فرمت فایل تعریف شده در عنصر <object> ممکن است در همه مرورگرها پشتیبانی نشود.

    عنصر          
    <param> بله بله بله بله بله

    تفاوت بین HTML 4.01 و HTML5

    خصوصیت "type" و "valuetype" در HTML5 پشتیبانی نمی شود.


    تفاوت بین  HTML  و  XHTML

    در HTML تگ <param> تگ پایانی ندارد.

    در XHTML تگ <param> باید با یک تگ پایانی بسته شود، مانند <param />.


    خصوصیت ها

    خصوصیت مقدار توضیحات
    name name یک name برای param مشخص می کند.
    type media_type در HTML5 پشتیبانی نمی شود.
    نوع media پارامتر را مشخص می کند.
    value value یک مقدار برای param مشخص می کند.
    valuetype data
    ref
    object
    در HTML5 پشتیبانی نمی شود.
    مشخص می کند مقدار مورد نظر از چه نوع است.

    ویژگی های عمومی تگ param در HTML

    تگ <param> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ param در HTML

    تگ <param> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    مرجع اشیاء اچ تی ام ال: تگ param در JavaScript 

  • تگ progress در HTML

    مثال (تگ progress در HTML)

    مقدار پیشرفت یک دانلود:

    <progress value="22" max="100"></progress>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ progress در HTML

    تگ <progress> نشان دهنده پیشرفت یک پروسه یا کار است.


    پشتیبانی مرورگرها از تگ progress در HTML

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

    عنصر          
    <progress> 8.0 10.0 16.0 6.0 11.0

    تفاوت بین HTML 4.01 و HTML5

    تگ <progress> یک تگ جدید در HTML5 است.


    نکته ها و ترفندها

    نکته: از تگ <progress> به وسیله JavaScript برای نمایش پیشرفت کار استفاده می کنیم.

    نکته: از تگ <progress> برای نمایش دادن اندازه یا مقیاس استفاده نمی کنیم (به عنوان مثال فضای دیسک استفاده شده و یا ارتباط از نتیجه پرس و جو). برای این کار می توان از تگ <meter> استفاده کنیم.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    max number مشخص می کند که در کل چه مقدار لازم است که پروسه کامل شود.
    value number مشخص می کند که چه مقدار از پروسه پیش رفته است.

    ویژگی های عمومی تگ progress در HTML

    تگ <proress> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ progress در HTML

    تگ <progress> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    مرجع اشیاء اچ تی ام ال: تگ progress در JavaScript 

  • تگ ruby در HTML

    مثال (تگ ruby در HTML)

    حاشیه نویسی ruby:

    <ruby>
    <rt> ㄏㄢˋ </rt>
    </ruby>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ ruby در HTML

    تگ <ruby> حاشیه نویسی ruby را مشخص می کند.

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

    تگ <ruby> همراه با تگ <rp> و تگ <rt> استفاده می شود: تگ <ruby> شامل یک یا چند کاراکتر است که نیاز به تفسیر یا تلفظ صحیح کارکترها دارد، و تگ <rt> برای دادن اطلاعات و اختیار به تگ <rp> که چه چیزی نشان داده شود، هنگامی که مرورگر از حاشیه نویسی ruby پشتیبانی نکند.


    پشتیبانی مرورگرها از تگ ruby در HTML

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

    عنصر          
    <ruby> 5.0 5.5 38.0 5.0 15.0

    تفاوت بین HTML 4.01 و HTML5

    تگ <ruby> یک تگ جدید در HTML5 است.


    ویژگی های عمومی تگ ruby در HTML

    تگ <ruby> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ ruby در HTML

    تگ <ruby> از رویدادهای عمومی در HTML پشتیبانی می کند.

  • تگ samp در HTML

    مثال (تگ samp در HTML)

    قالب متن در یک سند:

    <samp>Sample output from a computer program</samp>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ samp در HTML

    تگ <samp> یک تگ عبارتی است. نمونه خروجی از یک برنامه کامپیوتری را مشخص می کند.

    نکته: استفاده از این تگ توصیه نمی شود. اما برای رسیدن به نتایج بهتر می توانید از CSSاستفاده کنید.

    تمام تگ های تعریفی:

    Tag توضیحات
    <em> متن را به صورت emphasized نمایش می دهد.
    <strong> متن را به صورت strong نمایش می دهد.
    <dfn> جهت تعریف definition term
    <code> متن را به صورت computer code نمایش می دهد.
    <samp> متن را به صورت sample computer code نمایش می دهد.
    <kbd> متن را به صورت keyboard نمایش می دهد.
    <var> متن را به صورت variable نمایش می دهد.

    پشتیبانی مرورگرها از تگ samp در HTML

    عنصر          
    <samp> بله بله بله بله بله

    تفاوت بین HTML 4.01 و HTML5

    تفاوتی وجود ندارد.


    ویژگی های عمومی تگ samp در HTML

    تگ <samp> از ویژگی های عمومی در HTML پشتیبانی می کند.


    رویدادهای عمومی تگ samp در HTML

    تگ <samp> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    آموزش HTML-فرمت دهی متن

  • تگ section در HTML

    مثال (تگ section در HTML)

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

    <section>
      <h1>WWF</h1>
      <p>The World Wide Fund for Nature (WWF) is....</p>
    </section>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ section در HTML

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


    پشتیبانی مرورگرها از تگ section در HTML

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

    عنصر          
    <section> 6.0 9.0 4.0 5.0 11.1

    تفاوت بین HTML 4.01 و HTML5

    تگ <section> یک تگ جدید در HTML5 است.


    ویژگی های عمومی تگ section در HTML

    تگ <section> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ section در HTML

    تگ <section> از رویدادهای عمومی در HTML پشتیبانی می کند.

  • تگ select در HTML

    مثال (تگ select در HTML)

    یک لیست drop-down برای چهار options:

    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ select در HTML

    تگ <select> برای ایجاد یک لیست کشویی (drop-down) استفاده می شود.

    تگ <option> درون عنصر <select> گزینه های موجود در لیست را تعریف می کند.


    پشتیبانی مرورگرها از تگ select در HTML

    عنصر          
    <select> بله بله بله بله بله

    نکته ها و ترفندها

    نکته: عنصر <select> برای کنترل فرم است، و در یک فرم می تواند برای جمع آوری ورودی کاربر استفاده شود.


    تفاوت بین HTML 4.01 و HTML5

    برخی از خصوصیت های جدید در HTML5 اضافه شده است.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    autofocus autofocus مشخص می کند که بعد از لود شدن صفحه، مکان نما بصورت پیشفرض روی آن فیلد قرار گیرد.
    disabled disabled مشخص می کند که لیست drop-down باید غیر فعال باشد.
    form form_id فرم یا فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند.
    multiple multiple مشخص می کند که مقادیر متعددی را می توان یکمرتبه انتخاب کرد.
    name name یک name برای لیست drop-down تعریف می کند.
    required required مشخص می کند که فیلد ورودی قبل از ارسال به سرور باید حتما پر شده باشد.
    size number تعداد مقادیر قابل مشاهده در لیست را مشخص می کند.

    ویژگی های عمومی تگ select در HTML

     تگ <select> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ select در HTML

    تگ <select> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    مرجع اشیاء اچ تی ام ال: تگ select در JavaScript 

  • تگ source در HTML

    مثال (تگ source در HTML)

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

    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ source در HTML

    تگ <source> برای تعیین منابع چند رسانه ای برای عناصر رسانه هایی، مانند<video> و <audio> استفاده می شود.

    تگ <source> به شما اجازه می دهد که سورس های متفاوت صوتی یا ویدیویی برای مرورگر تعیین کنید تا بر اساس نوع کدک یا نوع رسانه ای که پشتیبانی می کند، یکی را انتخاب کند.


    پشتیبانی مرورگرها از تگ source در HTML

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

    عنصر          
    <source> 4.0 9.0 3.5 4.0 10.5

    تفاوت بین HTML 4.01 و HTML5

    تگ <source> یک تگ جدید در HTML5 است.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    media media_query نوع منبع media را مشخص می کند.
    src URL آدرس فایل صوتی یا تصویری را مشخص می کند.
    type media_type نوع media را برای منبع  media مشخص می کند.

    ویژگی های عمومی تگ source در HTML

    تگ <source> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ source در HTML

    تگ <source> از-رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    آموزش HTML5-پخش ویدئو 

    آموزش HTML5-پخش صوت

    مرجع اشیاء اچ تی ام ال: تگ source در JavaScript 

  • تگ strike در HTML

    مثال (تگ strike در HTML)

    مشخص کردن یک متن خط خورده به شرح زیر:

    <p>Version 2.0 is <strike>not yet available!</strike> now available!</p>

    خودتان امتحان کنید »ه

    تعریف و کاربرد تگ strike در HTML

    تگ <strike> در HTML5 پشتیبانی نمی شود. شما می توانید به جای آن از تگ <del> استفاده کنید.

    تگ <strike> یک متن خط خورده را تعریف می کند.


    پشتیبانی مرورگرها از تگ strike در HTML

    عنصر          
    <strike> بله بله بله بله بله

  • تگ strong در HTML

    مثال (تگ strong در HTML)

    قالب متن در یک سند:

    <strong>Strong text</strong>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ strong در HTML

    تگ <strong> یک تگ تعریفی است و متن مهم را تعریف می کند.

    نکته: استفاده از این تگ توصیه نمی شود. اما برای رسیدن به نتایج بهتر می توانید از CSSاستفاده کنید.

    همه تگ های تعریفی:

    Tag توضیحات
    <em> متن را به صورت emphasized نمایش می دهد.
    <strong> متن را به صورت strong نمایش می دهد.
    <dfn> جهت تعریف definition term
    <code> متن را به صورت computer code نمایش می دهد.
    <samp> متن را به صورت sample computer code نمایش می دهد.
    <kbd> متن را به صورت keyboard نمایش می دهد.
    <var> متن را به صورت variable نمایش می دهد.

    پشتیبانی مرورگرها از تگ strong در HTML

    عنصر          
    <strong> بله بله بله بله بله

    تفاوت بین HTML 4.01 و HTML5

    در HTML 4.01، تگ <strong> متن را به صورت  strong emphasized  نشان می دهد، اما در HTML5، متن مهم را معرفی می کند.


    ویژگی های عمومی تگ strong در HTML

    تگ <strong> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ strong در HTML

    تگ <strong> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    آموزش HTML-فرمت دهی متن 

  • تگ sub در HTML

    مثال (تگ sub در HTML)

    متن زیرنویس:

    <p>This text contains <sub>subscript</sub> text.</p>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ sub در HTML

    تگ <sub> متن را به صورت زیرنویس تعریف می کند. زیرنویس ها معمولا به اندازه ی نصف ارتفاع یک کاراکتر پایین تر از بقیه ی کاراکتر قرار می گیرند و گاهی اوقات در یک فونت کوچکتر ارائه می شوند . از زیرنویس می توان برای نمایش فرمول شیمیایی استفاده کرد، مانند: H2O.

    نکته:از تگ <sup> برای تعریف متن به صورت بالانویس استفاده می کنیم.


    پشتیبانی مرورگرها از تگ sub در HTML

    عنصر          
    <sub> بله بله بله بله بله

    تفاوت بین HTML 4.01 و HTML5

    تفاوتی وجود ندارد.


    ویژگی های عمومی تگ sub در HTML

    تگ <sub> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ sub در HTML

    تگ <sub> از رویدادهای عمومی در HTML پشتیبانی می کند.

  • تگ summary در HTML

    مثال (تگ summary در HTML)

    استفاده از عنصر <summary>:

    <details>
    <summary>Copyright 1999-2011.</summary>
    <p> - by Refsnes Data. All Rights Reserved.</p>
    <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
    </details>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ summary در HTML

    تگ <summary> یک عنوان قابل مشاهده برای عنصر <details> تعریف می کند. که عنوان را می توان با استفاده از کلیک کردن باز یا بسته نمایید.


    پشتیبانی مرورگرها از تگ summary در HTML

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

    عنصر          
    <summary> 12.0 پشتیبانی نمی شود پشتیبانی نمی شود 6.0 15.0

    تفاوت بین HTML 4.01 و HTML5

    تگ <summary> یک تگ جدید در HTML5 است.


    نکته ها و ترفندها

    نکته: تگ <summary> باید به صورت اولین عنصر فرزند تگ <details> قرار گیرد.


    ویژگی های عمومی تگ summary در HTML

    تگ <summary> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ summary در HTML

    تگ <summary> از رویدادهای عمومی در HTML پشتیبانی می کند.

  • جابه جا کردن عناصر در HTML5

    کشیدن (Drag) و انداختن (Drop) عناصر، بخشی از استاندارد html5 است.


    کشیدن (Drag) و انداختن (Drop)

    کشیدن و انداختن عناصر یکی از ویژگی های خیلی معمول HTML5است. منظور از کشیدن و انداختن زمانی است که یکی از اشیاء داخل صفحه را بگیرید و به محلی دیگر بکشید و رها نمایید.

    در HTML5 هر عنصری در صفحه می تواند قابل کشیدن (draggable) باشد.


    پشتیبانی مرورگرها

    Internet Explorer Firefox Opera Google Chrome Safari

    مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari جابه جا کردن عناصر را پشتیبانی می کنند.

    توجه: Safari 5.1.2 و نسخه های قدیمی تر آن، جابه جا کردن عناصر را پشتیبانی نمی کنند.


    مثال کشیدن و انداختن عناصر در HTML5

    مثال زیر یک مثال ساده از کشیدن و انداختن است:

    مثال (جابه جا کردن عناصر در HTML5)

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    function allowDrop(ev)
    {
    ev.preventDefault();
    }

    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }
    </script>
    </head>
    <body>

    <div id="div1" ondrop="drop(event)"
    ondragover="allowDrop(event)"></div>

    <img id="drag1" src="/img_logo.gif" draggable="true"
    ondragstart="drag(event)" width="336" height="69">

    </body>
    </html>
    خودتان امتحان کنید »

    مثال بالا ممکن است کمی پیچیده بنظر برسد، اما اجازه بدهید بعد از مرور تمام بخش های آن در پایین قضاوت نمایید.


    عنصر مورد نظر را قابل جا به جا کردن کنید 

    در مرحله اول باید کاری کنید تا عنصر مورد نظرتان، قابل جا به جا شدن باشد.

    برای این منظور باید خاصیت drggable را با مقدار true تنظیم نمایید:

    <img draggable="true">

    تعیین عنصری که می خواهید جا به جا شود

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

    در کد بالا، خاصیت ondragstart عنصر <img>، را با رویداد (drag(event تنظیم کرده ایم. این رویداد تعیین می کند چه عنصری می خواهد جابه جا شود. این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عکس کلیک کرده و سعی می کنید آن را بکشید.

    متد ()dataTransfer.setData اطلاعات عنصری که قرار است کشیده شود، یعنی id آن را دریافت کرده و در حافظه مرورگر قرار می د هد. این id از نوع "Text" بوده و مقدار آن در این مثال drag1 است.

    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }

    عنصر جابه جا شده را کجا می توان رها نمود

    رویداد ondragover مشخص کننده محلی است که داده ی جابه جا شده را می توان رها نمود.

    بصورت پیشفرض، عناصر و داده ها را نمی توان جابه جا نمود. بنابراین باید از این کار جلوگیری نمود.

    این کار هنگامی که رویداد ondragover اتفاق می افتد، با صدا زدن متد ()ev.preventDefault انجام می شود:

    function allowDrop(ev)
    {
    ev.preventDefault();
    }

    رها کردن عنصر جابه جا شده

    پس از انتخاب عنصر و جابه جا کردن آن، باید مکانی که فرود (drop) می آید را تعیین کرده و سپس آنرا رها نمایید.

    در مثال بالا، هنگامی که عکس را در مکان تعیین شده رها می کنید، رویداد ondrop تگ <div> رخ داده و تابع drop را فراخوانی می کند.

    function drop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }

    توضیح کد:

    • بصورت پیشفرض، عناصر و داده ها را نمی توان جابه جا نمود. بنابراین با صدا زدن متد ()ev.preventDefault از این کار جلوگیری می کنیم.
    • توسط متد ()ev.dataTransfer.getData، شناسه یا همان id عنصر drag شده را دریافت می کنیم. این متد شناسه همان نوع داده ای را که در متد ()setData تنظیم کردید، برمی گرداند.
    • این id از نوع "Text" بوده و مقدار آن در این مثال drag1 است.
    • متد ()ev.target.appendChild عنصر انتخاب شده را به تگ div مرتبط می سازد.

    مثال - خودتان امتحان کنید

     جابه جا کرد عکس بین دو محل
    در این مثال، نشان داده شده است که چگونه یک عکس را بین دو عنصر <div> جابه جا کنیم.

  • جداول در HTML

    جداول در HTML

    کالری نام میوه
    44% سیب
    23% موز
    13% پرتقال
    10% دیگر موارد

    مثال - خودتان امتحان کنید

    Wiki

    Tables
    نحوه ایجاد جداول در سند HTML.

    Table borders
    چگونه لبه های جدول را تنظیم کنیم.

    (مثال های بیشتر را می توانید در پایین صفحه ببینید.)


    جداول در HTML

    Wiki

    جداول به وسیله تگ <table> تعریف می شوند.

    یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شوند) و هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شوند)

    td مخفف "table data" است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.

    <table>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

    کد HTML بالا چگونه در یک مرورگر دیده می شود:

    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2

    خصوصیت Border

    Wiki

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

    برای نمایش لبه ها باید خصوصیت Border را تنظیم کنیم.

    مثال (جداول در HTML)

    <table border="1" style="width:300px">
    <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    </tr>
    </table>

    خودتان امتحان کنید »
    Note توجه داشته باشید که اگر بخواهید طبق استاندارهای HTML پیش بروید نباید از ویژگی border استفاده کنید.
    برای تنظیم لبه ها بهتر است از CSSها استفاده کنید.

    با استفاده از خصوصیت border در CSS می توانید لبه ها را تنظیم نمایید:

    مثال (جداول در HTML)

    <style>
    table,th,td
    {
    border:1px solid black;
    }
    </style>

    خودتان امتحان کنید »

    بیاد داشته باشید که لبه ها برای دور جدول و تمام سلول های جدول، تنظیم خواهد شد.


    تبدیل لبه های دو خطی به یک خطی

    Wiki

    با استفاده از خصوصیت border-collapse در CSS می توانید، لبه های دوخطی جدول را به لبه های یک خطی تبدیل کنید:

    مثال (جداول در HTML)

    <style>
    table,th,td
    {
    border:1px solid black;
    border-collapse:collapse
    }
    </style>

    خودتان امتحان کنید »

    تنظیم فاصله ی محتوای سلول ها از لبه

    Wiki

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

    اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود.

    مثال (جداول در HTML)

    th,td
    {
    padding:15px;
    }

    خودتان امتحان کنید »

    تنظیم فاصله سلول ها از یکدیگر

    Wiki

    با استفاده از خصوصیت border-spacing در CSS می توانید فاصله سلول ها از یکدیگر را تنظیم کنید.

    مثال (جداول در HTML)

    table
    {
    border-spacing:5px;
    }

    خودتان امتحان کنید »

    عنوان جدول (Header)

    Wiki

    اطلاعات سرتیتر در یک جدول به وسیله تگ <th> تعریف می شود.

    بیشتر مرورگرها متن را در عنصر <th> به صورت برجسته (bold) و وسط چین نمایش می دهند.

    مثال (جداول در HTML)

    <table style="width:300px">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    </tr>
    </table>

    خودتان امتحان کنید »

    با استفاده از خصوصیت text-align در CSS، می توانیم سرتیترهای جدول بالا را در سمت چپ تنظیم کنیم:

    مثال (جداول در HTML)

    th
    {
    text-align:left;
    }

    خودتان امتحان کنید »

    مثال بیشتر - خودتان امتحان کنید

    Wiki

    Tables without borders
    چگونه جدولی بدون خطوط حاشیه (Border) ایجاد کنیم.

    Table headers
    نحوه ایجاد سرتیترهای جدول.

    Table with a caption
    نحوه اضافه کردن عنوان به یک جدول.

    Table cells that span more than one row/column
    چگونگی تعریف سلول های جدول که بیش از یک سطر یا بیش از یک ستون را شامل می شوند.

    Tags inside a table
    نحوه نمایش عناصر درون عناصر دیگر.

    Cell padding
    چگونه از cellpadding برای ایجاد فاصله بیشتر بین محتوای سلول با حاشیه سلول استفاده کنیم.

    Cell spacing
    چگونه از cellspacing برای افزایش فاصله بین سلول ها استفاده کنیم.

    The frame attribute
    چگونه از خصوصیت "frame" برای کنترل حاشیه های دور جدول استفاده کنیم.


    تگ های جدول در HTML

    Tag توضیحات
    <table> تعریف جدول
    <th> تعریف عنوان جدول (table header)
    <tr> تعریف سطر جدول (table row)
    <td> تعریف سلول جدول (table data)
    <caption> تعریف تیتر جدول (table caption)
    <colgroup> برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
    <col> برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
    <thead> عناوین ستون های یک جدول (header) را گروه بندی می کند
    <tbody> محتویات بدنه یک جدول را گروه بندی می کند
    <tfoot> محتویات انتهای ستون های یک جدول (footer) را گروه بندی می کند
  • چکیده مطالب HTML در یک نگاه

    چکیده مطالب html در یک نگاه

    Wiki

    خلاصه ای از مطالب ارائه شده در مورد HTML در زیر ارائه شده است. آنرا چاپ کنید، تا کنید و در مکانی امن قرار دهید.

    تگ های اصلی یک سند HTML

    <!DOCTYPE html>
    <html>
      <head>
        <title>Title of document goes here</title>
      </head>
      <body>
          Visible text goes here...
      </body>
    </html>

    تگ عنوان در HTML

    Wiki

    <h1>Largest Heading</h1>
    <h2> . . . </h2>
    <h3> . . . </h3>
    <h4> . . . </h4>
    <h5> . . . </h5>
    <h6>Smallest Heading</h6>

    تگ های متن در HTML

    Wiki

    <p>This is a paragraph</p>
    <br /> (line break)
    <hr /> (horizontal rule)
    <pre>This text is preformatted</pre>

    تگ های فرمت بندی متن در HTML

    Wiki

    <em>This text is emphasized</em>
    <strong>This text is strong</strong>
    <code>This is some computer code</code>
    <b>This text is bold</b>
    <i>This text is italic</i>

    تگ لینک در HTML

    Wiki

    Ordinary link:
       <a href="http://www.example.com/">Link-text goes here</a>
    Image-link:
       <a href="http://www.example.com/"><img src="/URL" alt="Alternate Text" /></a>
    Mailto link:
       <a href="mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید">Send e-mail</a>
    Bookmark:
    <a name="tips">Tips Section</a>
    <a href="#tips">Jump to the Tips Section</a>

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

    Wiki

    <ul>
      <li>Item</li>
      <li>Item</li>
    </ul>

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

    Wiki

    <ol>
      <li>First item</li>
      <li>Second item</li>
    </ol>

    تگ لیست های تعریفی در HTML

    Wiki

    <dl>
      <dt>First term</dt>
        <dd>Definition</dd>
      <dt>Next term</dt>
        <dd>Definition</dd>
    </dl>

    تگ جدول در HTML

    Wiki

    <table border="1">
      <tr>
        <th>Tableheader</th>
        <th>Tableheader</th>
      </tr>
      <tr>
        <td>sometext</td>
        <td>sometext</td>
      </tr>
    </table>

    تگ تصویر در HTML

    Wiki

    <img src="/URL" alt="Alternate Text" height="42" width="42">

    تگ Styles در HTML

    Wiki

    <style type="text/css">
      h1 {color:red;}
      p {color:blue;}
    </style>

    <div>A block-level section in a document</div>
    <span>An inline section in a document</span>

    تگ iframe در HTML (صفحه ای داخل صفحه جاری)

    Wiki

    <iframe src="/demo_iframe.htm"></iframe>

    تگ فرم در HTML (ارسال اطلاعات به سرور)

    Wiki

    <form action="http://www.example.com/test.asp" method="post/get">
      <input type="text" name="email" size="40" maxlength="50" />
      <input type="password" />
      <input type="checkbox" checked="checked" />
      <input type="radio" checked="checked" />
      <input type="submit" value="Send" />
      <input type="reset" />
      <input type="hidden" />

      <select>
        <option>Apples</option>
        <option selected="selected">Bananas</option>
        <option>Cherries</option>
      </select>

      <textarea name="comment" rows="60" cols="20"></textarea>
    </form>

    کاراکترهای رزرو شده در HTML

    Wiki

    &lt; is the same as <
    &gt; is the same as >
    &#169; is the same as ©
  • خصوصیت ها در HTML

    خصوصیت ها اطلاعات بیشتری در مورد عناصر HTML می دهند.


    خصوصیت ها در HTML

    Wiki

    • تمام عناصر در HTML دارای خصوصیت هستند.
    • خصوصیت ها اطلاعات بیشتری در مورد یک عنصر می دهند.
    • خصوصیت ها همیشه در تگ شروع نوشته می شوند.
    • خصوصیت ها به صورت روبرو نوشته می شوند: ("مقدار"=نام خصوصیت)

    مثال:

    لینک ها در HTML با تگ <a> تعریف می شوند. آدرس لینک به وسیله خصوصیت href مشخص می شود.

    مثال (خصوصیت ها در HTML)

    <a href="http://www.beyamooz.com">This is a link</a>
    خودتان امتحان کنید »

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

    Wiki

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

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

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

    مثل: 'name='John "ShotGun" Nelson


    نکته: از حروف کوچک برای خصوصیت ها استفاده کنید

    Wiki

    نام خصوصیت و مقدار آن حساس به حروف نمی باشند.

    اما کنسرسیوم World Wide Web یا (w3c) حالت کوچک حروف را برای نام و مقدار خصوصیت ها در HTML 4 توصیه می کند.

    در نسخه های جدید (HTML (X نوشتن حروف کوچک برای خصوصیت ها و مقادیرشان استاندارد شده است.


    در زیر لیستی از بعضی خصوصیت ها که برای عناصر زیادی در HTML استاندارد هستند ارائه شده است:

    خصوصیت مقدار توضیحات
    class

    نام class

    یک class برای عنصر مشخص می کند.

    id id

    id منحصر به فردی را برای عنصر مشخص می کند.

    style

    تعریف style

    یک style درون تگی برای عنصر مشخص می کند.

    title

    متنی که در tooltip نمایش داده می شود

    اطلاعات اضافه ای را برای یک عنصر مشخص می کند (به صورت یک tool tip نشان داده می شود).

  • خلاصه مطالب HTML

    خلاصه HTML

    Wiki

    این خود آموز به شما نحوه استفاده از HTML را برای ایجاد وب سایتتان آموزش داده است.

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

    کلید کار با HTML تگ ها هستند که تعیین می کند که چه محتوایی ایجاد شود.


    حال که HTML را آموختید، قدم بعد چیست؟

    Wiki

    1- CSS

    CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.

    به وسیله CSS، تمام فرمت دهی ها در سند HTML می تواند برداشته شود و در یک فایل جداگانه ذخیره شود.

    برای یادگیری نحوه ایجاد style sheet ها، به آموزش CSS سری بزنید.

    2- JavaScript

    JavaScript می تواند وب سایت شما را پویاتر بسازد.

    یک وب سایت ایستا هنگامی جذاب است که بخواهید تنها اطلاعات خام را نشان دهید اما یک وب سایت داینامیک می تواند به وقایع واکنش نشان دهد و با کاربران تعامل داشته باشد.

    JavaScript محبوب ترین زبان اسکریپت نویسی تحت وب است و با عمده مرورگرها کار می کند. 

    اگر می خواهید در مورد JavaScript بیشتر بدانید به JS HOME مراجعه کنید. 

  • رمزنگاری url در HTML

    رمزنگاری URL، کاراکترها را به فرمتی تبدیل می کند که بتواند بر روی اینترنت مخابره شود.


    URL Encoding (رمزنگاری URL)

    Wiki

    URL ها تنها به وسیله مجموعه کاراکترهای ASCII می توانند بر روی اینترنت فرستاده شوند.

    از آنجایی که URLها اغلب حاوی کاراکترهایی خارج از مجموعه ASCII هستند، باید به فرمت ASCII معتبری تبدیل شوند.

    برای رمزنگاری URL، کاراکترهایی که خارج از مجموعه ASCII هستند، با یک علامت % به همراه دو رقم در مبنای هگزا دسیمال جایگزین می شوند.

    URLها نمی توانند حاوی space باشند. به طور معمول space را با علامت "+" جایگزین می کنند.


    مثال - خودتان امتحان کنید

    Wiki

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

    ورودی های دیگری را امتحان کنید و دکمه Submit را فشار دهید.


    مثال URL Encoding

    Wiki

    Character URL-encoding
    %80
    £ %A3
    © %A9
    ® %AE
    À %C0
    Á %C1
    Â %C2
    Ã %C3
    Ä %C4
    Å %C5
  • رنگ ها در HTML

    رنگ ها با ترکیب نورهای قرمز، آبی و سبز نمایش داده می شوند.


    مقادیر رنگ ها در CSS

    Wiki

    برای ترکیب مقدار رنگ های قرمز، سبز و آبی در HTML، از مبنای هگزا دسیمال (HEX) استفاده می شود.

    کمترین مقداری که می توان به یک منبع نوری داد صفر (در مبنای هگزا دسیمال: 00 ) و بیشترین مقدار255 (در مبنای هگزا:FF) می باشد.

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

    Color Values

    Color Color HEX Color RGB
      #000000 rgb(0,0,0)
      #FF0000 rgb(255,0,0)
      #00FF00 rgb(0,255,0)
      #0000FF rgb(0,0,255)
      #FFFF00 rgb(255,255,0)
      #00FFFF rgb(0,255,255)
      #FF00FF rgb(255,0,255)
      #C0C0C0 rgb(192,192,192)
      #FFFFFF rgb(255,255,255)
    خودتان امتحان کنید »

    شانزده میلیون رنگ مختلف

    Wiki

    ترکیب قرمز، سبز و آبی با مقادیر صفر تا 255، بیش از شانزده میلیون رنگ مختلف ارائه می دهد. (256*256*256)

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

    Red Light Color HEX Color RGB
      #000000 rgb(0,0,0)
      #080000 rgb(8,0,0)
      #100000 rgb(16,0,0)
      #180000 rgb(24,0,0)
      #200000 rgb(32,0,0)
      #280000 rgb(40,0,0)
      #300000 rgb(48,0,0)
      #380000 rgb(56,0,0)
      #400000 rgb(64,0,0)
      #480000 rgb(72,0,0)
      #500000 rgb(80,0,0)
      #580000 rgb(88,0,0)
      #600000 rgb(96,0,0)
      #680000 rgb(104,0,0)
      #700000 rgb(112,0,0)
      #780000 rgb(120,0,0)
      #800000 rgb(128,0,0)
      #880000 rgb(136,0,0)
      #900000 rgb(144,0,0)
      #980000 rgb(152,0,0)
      #A00000 rgb(160,0,0)
      #A80000 rgb(168,0,0)
      #B00000 rgb(176,0,0)
      #B80000 rgb(184,0,0)
      #C00000 rgb(192,0,0)
      #C80000 rgb(200,0,0)
      #D00000 rgb(208,0,0)
      #D80000 rgb(216,0,0)
      #E00000 rgb(224,0,0)
      #E80000 rgb(232,0,0)
      #F00000 rgb(240,0,0)
      #F80000 rgb(248,0,0)
      #FF0000 rgb(255,0,0)

    سایه های خاکستری

    Wiki

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

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

    Gray Shades Color HEX Color RGB
      #000000 rgb(0,0,0)
      #080808 rgb(8,8,8)
      #101010 rgb(16,16,16)
      #181818 rgb(24,24,24)
      #202020 rgb(32,32,32)
      #282828 rgb(40,40,40)
      #303030 rgb(48,48,48)
      #383838 rgb(56,56,56)
      #404040 rgb(64,64,64)
      #484848 rgb(72,72,72)
      #505050 rgb(80,80,80)
      #585858 rgb(88,88,88)
      #606060 rgb(96,96,96)
      #686868 rgb(104,104,104)
      #707070 rgb(112,112,112)
      #787878 rgb(120,120,120)
      #808080 rgb(128,128,128)
      #888888 rgb(136,136,136)
      #909090 rgb(144,144,144)
      #989898 rgb(152,152,152)
      #A0A0A0 rgb(160,160,160)
      #A8A8A8 rgb(168,168,168)
      #B0B0B0 rgb(176,176,176)
      #B8B8B8 rgb(184,184,184)
      #C0C0C0 rgb(192,192,192)
      #C8C8C8 rgb(200,200,200)
      #D0D0D0 rgb(208,208,208)
      #D8D8D8 rgb(216,216,216)
      #E0E0E0 rgb(224,224,224)
      #E8E8E8 rgb(232,232,232)
      #F0F0F0 rgb(240,240,240)
      #F8F8F8 rgb(248,248,248)
      #FFFFFF rgb(255,255,255)

    رنگ های امن در وب

    Wiki

    سال ها پیش، هنگامی که کامپیوتر ها حداکثر 256 رنگ مختلف را پشتیبانی می کردند، لیستی از 216 رنگ مختلف به عنوان یک استاندارد وب پیشنهاد شد و 40 رنگ به عنوان رنگ های سیستمی رزور شد.

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

    اما امروزه از زمانی که کامپیوتر ها توانستند میلیون ها رنگ مختلف را نشان دهد دیگر این امر مهمی نیست. به هر حال، در زیر جدول این پالت رنگی ارائه شده است.

    000000 000033 000066 000099 0000CC 0000FF
    003300 003333 003366 003399 0033CC 0033FF
    006600 006633 006666 006699 0066CC 0066FF
    009900 009933 009966 009999 0099CC 0099FF
    00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
    00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
    330000 330033 330066 330099 3300CC 3300FF
    333300 333333 333366 333399 3333CC 3333FF
    336600 336633 336666 336699 3366CC 3366FF
    339900 339933 339966 339999 3399CC 3399FF
    33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
    33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
    660000 660033 660066 660099 6600CC 6600FF
    663300 663333 663366 663399 6633CC 6633FF
    666600 666633 666666 666699 6666CC 6666FF
    669900 669933 669966 669999 6699CC 6699FF
    66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
    66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
    990000 990033 990066 990099 9900CC 9900FF
    993300 993333 993366 993399 9933CC 9933FF
    996600 996633 996666 996699 9966CC 9966FF
    999900 999933 999966 999999 9999CC 9999FF
    99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
    99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
    CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
    CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
    CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
    CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
    CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
    CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
    FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
    FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
    FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
    FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
    FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
    FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

صفحه2 از3