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

آموزش html

  • تگ meter در HTML

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

    استفاده از عنصر meter برای اندازه گیری داده ها در یک محدوده داده (یک مقیاس):

    <meter value="2" min="0" max="10">2 out of 10</meter><br>
    <meter value="0.6">60%</meter>

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

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

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

    مثال:  نحوه استفاده از دیسک، ارتباط از نتیجه جستجو و غیره.

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


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

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

    عنصر          
    <meter> 8.0 پشتیبانی نمی شود 6.0 6.0 11.0

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

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


    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    form form_id یک یه چند فرم که عنصر<meter> به آنها تعلق دارد را مشخص می کند.
    high number  رنجی که به عنوان  مقدار high (زیاد) مطرح شده است را مشخص می کند.
    low number رنجی که به عنوان یک مقدار کم مطرح شده است را مشخص می کند.
    max number رنجی برای مشخص کردن مقدار maximum
    min number رنجی برای مشخص کردن مقدار minimum
    optimum number مشخص می کند که برای اندازه گیری چه مقداری بهینه است. 
    value number الزامی است. مقدار رایج اندازه گیری را مشخص می کند.

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

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


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

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


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

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

  • تگ nav در HTML

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

    مجموعه ای از لینک های ناوبری:

    <nav>
      <a href="/html/">HTML</a> |
      <a href="/css/">CSS</a> |
      <a href="/js/">JavaScript</a> |
      <a href="/jquery/">jQuery</a>
    </nav>

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

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

    تگ <nav> مجموعه ای از لینک های ناوبری را تعریف می کند.

    لازم نیست تمام لینک های صفحه را در تگ <nav> قرار داد. در تگ <nav> فقط لینک های ناوبری اصلی در نظر گرفته می شود. 

    در مرورگرهای با قابلیت screen reader که برای افراد ناتوان ایجاد شده اند می توان مشخص کرد که محتوای عناصری مثل nav مورد بررسی قرار بگیرد یا اینکه قلم گرفته شوند.

    برای آشنایی بیشتر با screen reader به لینک روبرو مراجعه فرمایید: Screen Reader


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

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

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

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

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


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

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


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

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

  • تگ 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> محصور شود.

  • تگ noscript در HTML

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

    استفاده از تگ <noscript>:

    <script>
    document.write("Hello World!")
    </script>
    <noscript>Your browser does not support JavaScript!</noscript>

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

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

    تگ <noscript> برای کاربرانی که script مرورگر خود را غیر فعال کرده اند و یا برای مرورگر هایی که script را پشتیبانی نمی کنند، متنی جایگزین تعریف می کند.

     تگ <noscript> می تواند داخل هر دو تگ <head> و <body> قرار گیرد.

     تگ <noscript> هنگامی که داخل عنصر <head> قرار می گیرد: باید شامل عناصر <link> ،<style> و <meta> باشد.

    محتوای عنصر <noscript> تنها زمانی نشان داده می شود که script پشتیبانی نشود یا در مرورگر کاربر غیر فعال باشد.


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

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

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

    نکته: یگ روش دیگر استفاده از تگ comment (توضیحات) برای مخفی و غیر فعال کردن اسکریپت ها در سمت سرویس دهنده، در مرورگرهایی که آن را پشتیبانی نمی کنند. (به طوری که آنها به صورت متن ساده نمایش داده نمی شود ):

    <script>
    <!--
    function displayMsg()
    {
    alert("Hello World!")
    }
    //-->
    </script> 

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

    در HTML 4.01، تگ <noscript> تنها می تواند در داخل عنصر <body> قرار گیرد.

    در HTML5، تگ <noscript> می تواند داخل هر دو تگ <head> و <body> قرار گیرد.


    تفاوت بین  HTML  و  XHTML

    در XHTML، تگ <noscript> پشتیبانی نمی شود.


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

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


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

    آموزش HTML-جاوا اسکریبت 

  • تگ object در HTML

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

    چگونگی استفاده از تگ <object> برای جاسازی Flash file:

    <object width="400" height="400" data="helloworld.swf"></object>

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

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

    تگ <object> یک شیء جاسازی شده در یک سند HTML را تعریف می کند. از این عنصر به عنوان جاسازی عناصر چند رسانه ای (مانند صوت، تصویر، اپلتهای جاوا، اکتیو ایکس، PDF، و فلش) در صفحه وب خود استفاده کنید.

    شما همچنین می توانید از تگ <object> برای جاسازی صفحه وب دیگر، به سند HTMLخود استفاده کنید.

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


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

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

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

    نکته: یک عنصر <object> باید داخل عنصر <body> قرار گیرد. متن موجود بین دو تگ  <object> و </object> متنی جایگزین، برای مرورگر هایی که این تگ را پشتیبانی نمی کنند.

    نکته:برای تصاویر به جای تگ <object> از تگ <img> استفاده می کنیم.

    نکته: حداقل یکی از خصوصیات  "data" یا "type" باید تعریف شود.


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

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

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

    در HTML5، عناصر object را در داخل فرم ها می توان درج و استفاده کرد.

    در HTML5، عنصر objects دیگر نمی تواند داخل عنصر <head> از یک سند قرار گیرد.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    align top
    bottom
    middle
    left
    right
    در HTML5 پشتیبانی نمی شود.
     تراز بندی عنصر <object> نسبت به عناصر اطراف را مشخص می کند.
    archive URL در HTML5 پشتیبانی نمی شود.
    فضایی که لیستی از URL را برای بایگانی جدا می کند. بایگانی منابع مربوط به object است.
    border pixels در HTML5 پشتیبانی نمی شود.
     پهنای border اطراف عنصر <object> را مشخص می کند.
    classid class_ID در HTML5 پشتیبانی نمی شود.
    مشخص کننده مقدار Class ID برای شی مورد نظر، که در تنظیمات رجیستری ویندوز و یا در یک URL قرار گیرد.
    codebase URL در HTML5 پشتیبانی نمی شود.
    مشخص می کند که code عنصر object کجا یافت می شود.
    codetype media_type در HTML5 پشتیبانی نمی شود.
    نوع media برای کدی که اشاره به صفت classid دارد را مشخص می کند.
    data URL مشخص کننده URL منابعی که برای object مورد استفاده قرار می گیرد.
    declare declare در HTML5 پشتیبانی نمی شود.
    مشخص می کند که object فقط باید معرفی شود و تا زمانی که نیاز نیست ایجاد یا نصب نشود.
    form form_id مشخص کننده یک یا بیشتر فرم هایی که object متعلق به آنهاست.
    height pixels ارتفاع عنصر object را مشخص می کند.
    hspace pixels در HTML5 پشتیبانی نمی شود.
     فضای خالی چپ و راست عنصر object را مشخص می کند.
    name name یک name برای عنصر object مشخص می کند.
    standby text در HTML5 پشتیبانی نمی شود.
    مشخص کننده متنی که هنگام لود شدن object نمایش داده می شود.
    type media_type نوع media داده که در صفت data مشخص شده را تعریف می کند.
    usemap #mapname مشخص کننده name برای نقشه تصویری سمت کاربر که با object مورد استفاده قرار می گیرد.
    vspace pixels در HTML5 پشتیبانی نمی شود.
     فضای خالی بالا و پایین عنصر object را مشخص می کند.
    width pixels عرض عنصر object را مشخص می کند.

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

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


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

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


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

    آموزش HTML-عنصر object

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

  • تگ ol در HTML

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

    دو لیست مرتب متفاوت:

    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>

    <ol start="50">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>

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

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

    تگ <ol> یک لیست مرتب را تعریف می کند. که آن لیست می تواند بر حسب عددی یا الفبایی مرتب شود.

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

    .


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

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

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

    نکته: برای لیست های نامرتب از تگ <ul> استفاده می کنیم.

    نکته: برای استایل دادن به لیست ها از CSS استفاده می کنیم.


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

    استفاده از خصوصیت های "start" و "type" در  HTML 4.01 توصیه نمی شود، اما در HTML5 پشتیبانی می شود.

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

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


    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    compact compact در HTML5 پشتیبانی نمی شود.
     مشخص می کند که لیست باید کوچکتر از حد نرمال نمایش داده شود.
    reversed reversed مشخص می کند که لیست به صورت نزولی مرتب شود.(9 و 8 و 7 و...)
    start number مقدار شروع لیست مرتب را مشخص می کند. 
    type 1
    A
    a
    I
    i
    مشخص می کند که از چه نوع نشانگری در لیست استفاده شود.

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

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


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

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


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

    آموزش HTML-لیست ها 

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

  • تگ optgroup در HTML

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

    گروه بندی گزینه های مرتبط با استفاده از تگ <optgroup> :

    <select>
      <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      </optgroup>
      <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </optgroup>
    </select>

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

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

    تگ <optgroup> برای گروه بندی option های (گزینه ها) مرتبط در یک لیست کشویی استفاده می شود.

    اگر شما دارای یک لیست طولانی از گزینه ها می باشید استفاده از تگ optgroup برای کنترل کردن گزینه ها مرتبط راحت تر است و مورد پسند کاربر نیز می باشد.


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

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

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

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


    خصوصیت ها

    خصوصیت مقدار توضیحات
    disabled disabled مشخص می کند که option-group باید غیر فعال شود.
    label text یک برچسب برای option-group مشخص می کند.

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

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


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

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


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

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

  • تگ option در HTML

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

    یک لیست کشویی با چهار گزینه:

    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

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

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

    تگ <option> یک گزینه برای لیست انتخاب تعریف می کند.

    <option> داخل عنصر <select> یا عنصر <datalist> قرار می گیرد.


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

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

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

    نکته: تگ <option> می تواند بدون به کار بردن هیچ یک از خصوصیات بکار رود، اما شما معمولا به خصوصیت value برای اینکه مشخص کند چه چیزی به سرور ارسال شود نیاز دارید.

    نکته: اگر شما یک لیست طولانی از گزینه ها داشته باشید می توانید، گزینه های مرتبط را به وسیله تگ <optgroup> گروه بندی کنید.


    خصوصیت ها

    خصوصیت مقدار توضیحات
    disabled disabled مشخص می کند که option باید غیر فعال شود.
    label text یک برچسب کوتاه برای option مشخص می کند.
    selected selected مشخص می کند هنگامی که صفحه لود می شود option ها به طور پیش فرض انتخاب شده باشد.
    value text مشخص می کند که چه مقدار به سرور ارسال شود.

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

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


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

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


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

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

  • تگ output در HTML

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

    انجام محاسبات و نشان دهنده نتیجه در عنصر <output> :

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
      <input type="range" id="a" value="50">100
      +<input type="number" id="b" value="50">
      =<output name="x" for="a b"></output>
    </form>

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

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

    تگ <output> نشان دهنده نتیجه یک محاسبه است. (مانند نتیجه محاسبات انجام شده توسط یک اسکریپت)


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

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

    عنصر          
    <output> 10.0 پشتیبانی نمی شود 4.0 5.1 11.0

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

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


    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    for element_id رابطه بین نتیجه برای محاسبات وعنصر استفاده شده در محاسبات را مشخص می کند.
    form form_id مشخص کننده فرم یا فرم هایی است که عنصر output متعلق به آنهاست.
    name name یک name برای عنصر output مشخص می کند.

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

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


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

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

  • تگ q در HTML

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

    یک نقل قول کوتاه:

    <p>WWF's goal is to:
    <q>Build a future where people live in harmony with nature.</q>
    We hope they succeed.</p>

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

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

    تگ <q> یک نقل قول کوتاه را تعریف می کند.

    مرورگرها معمولا علامت نقل قول را در اطراف نقل قول درج می کنند.


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

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

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

    نکته: از عنصر <blockquote> برای نشانه گذاری یک بخش استفاده می شود که به نقل از منبع دیگری است.


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

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


    خصوصیت ها

    خصوصیت مقدار توضیحات
    cite URL آدرس منبع نقل قول را مشخص می کند.

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

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


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

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


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

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

  • تگ rp در HTML

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

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

    <ruby>
    <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
    </ruby>

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

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

    تگ <rp> تعریف می کند که چه چیزی نشان داده شود، اگر مرورگر از حاشیه نویسی ruby پشتیبانی نکند.

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

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


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

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

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

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

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


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

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


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

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

  • تگ s در HTML

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

    متن به صورت خط خورده:

    <p><s>My car is blue.</s></p>
    <p>My new car is silver.</p>

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

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

    تگ <s> مشخص می کند که متن درست، دقیق و مناسب نیست.

    از تگ <s> برای متن جایگزین یا حذف شده نباید استفاده کرد، می توانیم به جای آن از تگ <del> استفاده کنیم .


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

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

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

    عنصر <s> در HTML 4.01، متن را به صورت خط خورده نمایش می دهد و استفاده از آن هم توصیه نمی شود.

    عنصر <s> در HTML5، مشخص می کند که متن درست، دقیق و مناسب نیست.


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

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


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

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

  • تگ script در HTML

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

    script زیر عبارت Hello World را چاپ می کند:

    <script>
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>

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

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

    تگ <script> برای برنامه نویسی سمت کاربر استفاده می شود، مثل JavaScript

    عنصر <script> به دو صورت استفاده می شود یا با نوشتن دستورات درون تگ script یا به صورت یک فایل script خارجی که با خصوصیت src مشخص می شود.

    کاربردهای رایج برای JavaScript: دستکاری تصویر، اعتبار سنجی فرم و تغییرات محتوا بصورت پویا می باشد.


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

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

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

    نکته: اگر از خصوصیت "src" استفاده کنیم , عنصر <script> باید خالی باشد.

    نکته: همچنین عنصر <noscript> زمانی استفاده می شود که script ها در مرورگر غیر فعال شده یا مرورگری است که script سمت کاربر را پشتیبانی نمی کنند.

    نکته: راه های مختلف برای اجرا شدن  script خارجی:

    • اگر خصوصیت "async="async باشد: اسکریپت غیر همزمان با بقیه از صفحه اجرا می شود (زمانی کی که اسکریپت شما به سایر اسکریپت ها وابستگی نداشته باشد).
    • اگر خصوصیت  async ارائه نشود و خصوصیت "defer="defer باشد: اسکریپت پس از بازگذاری کامل صفحه اجرا می شود و تمام دستورات نیز در آخرین مرحله اجرا می شوند.
    • اگر async یا defer هیچکدام ارائه نشوند: اسکریپت بلافاصله اجرا می شود قبل از اینکه مرورگر به بارگذاری آن صفحه ادامه دهد.

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

    خصوصیت "type" در HTML 4 الزامی است، اما در HTML5 اختیاری است.

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

    خصوصیت "xml:space" موجود در HTML 4.01، در HTML5 پشتیبانی نمی شود.


    تفاوت بین HTMLوXHTML

    در XHTML، محتویات درون اسکریپت به عنوان PCDATA# (به جای CDATA) اعلام می شود، بدان معنی است که موجودیت تجزیه خواهد شد.

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

    <script type="text/javascript">
    //<![CDATA[
    var i = 10;
    if (i < 5) {
      // some code
    }
    //]]>
    </script>

    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    async async مشخص می کند که اسکریپت غیر همزمان با بقیه از صفحه اجرا می شود. (فقط برای اسکریپت خارجی)
    charset charset نحوه کد گذاری کاراکترها را در اسکریپت مشخص می کند.
    defer defer مشخص می کند که اسکریپت پس از بازگذاری کامل صفحه اجرا می شود. (فقط برای اسکریپت خارجی)
    src URL مسیر کامل فایلی که دستورات اسکریپت در آن قرار دارد را مشخص می کند.
    type media_type نوع اسکریپت را مشخص می کند.
    xml:space preserve در HTML5 پشتیبانی نمی شود.
    مشخص می کند که  whitespace در کد باید حفظ شود.

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

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


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

    آموزش HTML-جاوا اسکریبت 

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

  • تگ small در HTML

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

    نمایش یک متن کوچکتر:

    <p>W3Schools.com - the world's largest web development site.</p>
    <p><small>Copyright 1999-2050 by Refsnes Data</small></p>

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

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

    تگ <small> متن درونش را یک واحد کوچکتر از متون اطرافش مشخص می کند.


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

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

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

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


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

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


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

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

  • تگ span در HTML

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

    استفاده از عنصر span برای متمایز کردن رنگ قسمتی از متن:

    <p>My mother has <span style="color:blue">blue</span> eyes.</p>

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

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

    تگ <span> یک عنصر درون خطی (inline) در سند است.

    تگ <span> بدون تغییرات بصری هیچ چیز در صفحه نشان نمی دهند.

    تگ <span> راهی را برای اضافه کردن قالب به بخشی از یک متن و یا بخشی از یک سند فراهم می کند.


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

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

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

    نکته: هنگامی که شما از تگ <span> استفاده می کنید، می توانید از ویژگی های CSSیا JavaScriptبرای این تگ استفاده کنید.


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

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


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

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


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

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


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

    آموزش HTML-عنصر div و span  

    مرجع اشیاء اچ تی ام ال: تگ span در 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> بله بله بله بله بله

  • تگ sup در HTML

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

    متن بالانویس:

    <p>This text contains <sup>superscript</sup> text.</p>

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

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

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

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


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

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

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

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


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

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


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

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

  • توضیحات در HTML

    مثال (توضیحات در HTML)

    توضیحات در HTML:

    <!--This is a comment. Comments are not displayed in the browser-->

    <p>This is a paragraph.</p>

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

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


    عنصر          
    <!--...--> بله بله بله بله بله

     


    تفاوت بین HTML4.01 و HTML5

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


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

    نکته: از تگ<--...--!> (توضیحات) می توان برای مخفی و غیر فعال کردن اسکریپت ها در مرورگرهایی که آن را پشتیبانی نمی کنند استفاده کرد.

     

    <script type="text/javascript">
    < !--
    function displayMsg()
    {
    alert("Hello World!")
    }
    //-->
    < /script>

    نکته:برای کامنت کردن کدهای جاوااسکریپت و به منظور جلوگیری از اجرای آن، در انتهای کامنت، از دو اسلش رو به جلو ( // )  استفاده می کنیم.


    Standard خصوصیت ها

    تگ <--..--!> (توضیحات) هیچ یک از ویژگی های استانداردها را پشتیبانی نمی کند.

    مطالعه بیشتر در مورد: مرجع HTML-خصوصیت های عمومی


    رویدادهای عمومی

    تگ <--..--!> (توضیحات) هیچ یک از ویژگی های رویداد را پشتیبانی نمی کند.

    مطالعه بیشتر در مورد: مرجع HTML-رویدادهای عمومی

  • جداول در 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 ©