سبد (0)

آموزش html

  • تگ meta در HTML

    21 شهریور 1397

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

    از عنصر <meta> برای توصیف سند استفاده کنید:

    <head>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Hege Refsnes">
    </head>

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

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

    تگ <meta> اطلاعاتی در مورد سند HTMLفراهم می کند. این داده ها در صفحه، نمایش داده نمی شوند اما توسط ماشین قابل خواندن هستند.

    عنصر <meta> نوعاً برای مشخص کردن نویسنده، کلمات کلیدی، آخرین تغییرات، توضیحاتی در مورد صفحه و دیگر داده های Meta استفاده می شوند.

    داده های meta توسط مرورگر ها (جهت نحوه نمایش محتویات یا بار گذاری مجدد صفحه)، موتور های جستجو (جهت تعیین کلمات کلیدی) و دیگر سرویس های وب استفاده می شود.

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

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

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

    نکته: تگ<meta> همیشه داخل تگ <head> قرار می گیرد.

    نکته: Metadata همیشه به صورت جفت name و value می آید.

    نکته: اگر ویژگی name یا  http-equiv تعریف شده باشد خصوصیت content نیز باید تعریف شود، اگر هیچ یک از این خصوصیت ها تعریف نشده باشند خصوصیت  content هم نمی تواند تعریف شود.

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

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

    در HTML5 خصوصیت جدید charset اضافه شده است، که تعریف charset را آسانتر می کند:

    • HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    • HTML5: <meta charset="UTF-8">

    تفاوت بین  HTML و XHTML

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

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

    مثال

    مثال 1: مشخص کردن کلمات کلیدی برای موتورهای جستجو:

    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

    مثال 2: توضیحی از محتویات یک صفحه:

    <meta name="description" content="Free Web tutorials on HTML and CSS">

    مثال 3: مشخص کردن نویسنده یک صفحه:

    <meta name="author" content="Hege Refsnes">

    مثال 4: Refresh کردن صفحه هر 30 ثانیه یکبار:

    <meta http-equiv="refresh" content="30">

    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    charset character_set کد کردن کاراکترها برای سند HTML
    content text دادن مقداری مرتبط با صفت http-equiv یا name
    http-equiv content-type
    default-style
    refresh    		 فراهم کردن یک HTTP header برای اطلاعات یا مقدار صفت content  
    name application-name
    author
    description
    generator
    keywords    		 یک name برای metadata مشخص می کند.
    scheme format/URI در HTML5 پشتیبانی نمی شود.
    طرحی (scheme) برای تفسیر یا ترجمه مقدار صفت content مشخص می کند.

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

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

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

    آموزش HTML-بخش Head

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

    READ MORE

  • تگ meter در HTML

    21 شهریور 1397

    مثال (تگ 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 

    READ MORE

  • تگ nav در HTML

    21 شهریور 1397

    مثال (تگ 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 پشتیبانی می کند.

    READ MORE

  • تگ noframes در HTML

    21 شهریور 1397

    مثال (تگ 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> محصور شود.

    READ MORE

  • تگ noscript در HTML

    21 شهریور 1397

    مثال (تگ 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-جاوا اسکریبت 

    READ MORE

  • تگ object در HTML

    21 شهریور 1397

    مثال (تگ 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 

    READ MORE

  • تگ ol در HTML

    21 شهریور 1397

    مثال (تگ 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 

    READ MORE

  • تگ optgroup در HTML

    21 شهریور 1397

    مثال (تگ 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 

    READ MORE

  • تگ option در HTML

    21 شهریور 1397

    مثال (تگ 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 

    READ MORE

  • تگ output در HTML

    21 شهریور 1397

    مثال (تگ 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 پشتیبانی می کند.

    READ MORE

  • تگ q در HTML

    21 شهریور 1397

    مثال (تگ 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 

    READ MORE

  • تگ rp در HTML

    21 شهریور 1397

    مثال (تگ 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 پشتیبانی می کند.

    READ MORE

  • تگ s در HTML

    21 شهریور 1397

    مثال (تگ 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 پشتیبانی می کند.

    READ MORE

  • تگ script در HTML

    21 شهریور 1397

    مثال (تگ 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 

    READ MORE

  • تگ small در HTML

    21 شهریور 1397

    مثال (تگ 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 پشتیبانی می کند.

    READ MORE

  • تگ span در HTML

    21 شهریور 1397

    مثال (تگ 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 

    READ MORE

  • تگ strike در HTML

    21 شهریور 1397

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

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

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

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

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

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

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

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

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

  • تگ sup در HTML

    21 شهریور 1397

    مثال (تگ 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 پشتیبانی می کند.

    READ MORE

  • توضیحات در HTML

    23 شهریور 1397

    مثال (توضیحات در 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-رویدادهای عمومی

    READ MORE

  • جداول در HTML

    10 شهریور 1397

    جداول در 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) را گروه بندی می کند
    READ MORE

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

    10 شهریور 1397

    چکیده مطالب 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 ©
    READ MORE

  • خصوصیت ها در HTML

    15 شهریور 1397

    خصوصیت ها اطلاعات بیشتری در مورد عناصر 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 نشان داده می شود).
    READ MORE

  • خصوصیت ها در xHTML

    18 شهریور 1397

    خصوصیت های XHTML همان خصوصیت های HTML است که مانند XML نوشته شده اند.

    خصوصیت های XHTML - قوانین نوشتاری

    Wiki

    • نام خصوصیت ها باید به صورت کوچک نوشته شود.
    • مقادیر خصوصیت ها باید درون دابل کوتیشن باشد.
    • خلاصه نویسی خصوصیت ها ممنوع است.

    نام خصوصیت ها باید با حروف کوچک نوشته شود

    Wiki

    قطعه کد زیر غلط است:

    <table WIDTH="100%">

    این درست است:

    <table width="100%">

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

    Wiki

    قطعه کد زیر غلط است:

    <table width=100%>

    این درست است:

    <table width="100%">

    خلاصه نویسی خصوصیت ها ممنوع است

    Wiki

    قطعه کد زیر غلط است:

    <input checked>
    <input readonly>
    <input disabled>
    <option selected>

    این درست است:

    <input checked="checked" />
    <input readonly="readonly" />
    <input disabled="disabled" />
    <option selected="selected" />
    READ MORE

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

    17 شهریور 1397

    خلاصه 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 مراجعه کنید. 

    READ MORE

  • ذخیره داده ها بر روی کامپیوتر کاربر

    23 شهریور 1397

    ذخیره داده ها بر روی کامپیوتر کاربر (Client)

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

    در HTML5داده ها با هر بار درخواست از سرور ارسال نمی شوند و فقط زمانی که نیاز به آنها داشته باشیم استفاده می شوند. همچنین امکان ذخیره مقدار زیادی اطلاعات بدون تاثیر منفی روی کارایی سایت نیز وجود دارد.

    داده های سایت های مختلف بصورت key/value ذخیره می شوند و هر وب سایت فقط به داده هایی که خودش ذخیره کرده می تواند دسترسی پیدا کند.

    HTML5 از JavaScriptبرای ذخیره سازی و دسترسی به داده ها استفاده می کند.

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

    Internet Explorer Firefox Opera Google Chrome Safari

    مرورگرهای Internet Explorer 8+, Firefox, Opera, Chrome, Safari ذخیره داده ها را پشتیبانی می کنند.

    توجه: Internet Explorer 7 و نسخه های قدیمی تر آن، web storage را پشتیبانی نمی کنند.

    localStorage و sessionStorage 

    HTML5 دو شیء جدید برای ذخیره سازی داده ها بر روی کلاینت معرفی کرده است:

    • localStorage: ذخیره داده ها بدون زمان انقضاء
    • sessionStorage: داده های یک جلسه (session) را ذخیره می کند.

    قبل از استفاده از اشیاء بالا، باید بررسی کنید که مرورگر، localStorage و sessionStorage را پشتیبانی می کند یا نه.

    if(typeof(Storage)!=="undefined")
      {
      // Yes! localStorage and sessionStorage support!
      // Some code.....
      }
    else
      {
      // Sorry! No web storage support..
      }

    شیء localStorage

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

    چگونگی ایجاد و دسترسی به loaclStorage

    مثال (ذخیره داده ها بر روی کامپیوتر کاربر)

    localStorage.lastname="Smith";
    document.getElementById("result").innerHTML="Last name: "
    + localStorage.lastname;
    خودتان امتحان کنید »

    توضیح مثال:

    • ابتدا یک شیء loaclStorage با نام "lastname" و مقدار "Smith" ایجاد شده است.
    • در ادامه مقدار "lastname" را بازیابی می کنیم و سپس محتوای عنصر با شناسه "result" را با آن مقداردهی می کنیم.

    توجه: داده ها همیشه بصورت رشته ای ذخیره می شوند. بیاد داشته باشید که در صورت نیاز باید آنرا تبدیل کنید.

    در مثال زیر، تعداد دفعات کلیک کاربر روی یک دکمه را نشان می دهد. در این کد برای اینکه بتوان شمارنده را افزایش داد، مقدار رشته ای به عددی تبدیل شده است:

    مثال (ذخیره داده ها بر روی کامپیوتر کاربر)

    if (localStorage.clickcount)
      {
      localStorage.clickcount=Number(localStorage.clickcount)+1;
      }
    else
      {
      localStorage.clickcount=1;
      }
    document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
    خودتان امتحان کنید »

    شیء sessionStorage

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

    در مثال زیر، تعداد دفعات کلیک کاربر روی یک دکمه در جلسه جاری را نشان می دهد:

    مثال (ذخیره داده ها بر روی کامپیوتر کاربر)

    if (sessionStorage.clickcount)
      {
      sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
      }
    else
      {
      sessionStorage.clickcount=1;
      }
    document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
    خودتان امتحان کنید »
    READ MORE

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

    17 شهریور 1397

    رمزنگاری 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
    READ MORE

  • رنگ ها در HTML

    10 شهریور 1397

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

    مقادیر رنگ ها در 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
    READ MORE

  • سیستم موقعیت یاب جهانی HTML5

    23 شهریور 1397

    سیستم موقعیت یاب HTML5 برای پیدا کردن موقعیت یک کاربر استفاده می شود.

    سیستم موقعیت یاب جهانی HTMl5

    بوسیله سیستم موقعیت یاب جهانی Html5 می توانید مختصات و موقعیت جغرافیایی یک کاربر را پیدا کرده و به وی نمایش دهید. این سیستم از اطلاات ماهواره ها و ISP ای که به آن متصل هستید، برای اطلاع از موقعیت شما استفاده می کند.

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

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

    Internet Explorer Firefox Opera Google Chrome Safari

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

    توجه: سیستم موقعیت یاب HTML5در دستگاه هایی که دارای GPS هستند (مانند iPhone) دقیق تر کار می کند.

    اطلاع از موقعیت کنونی کاربر

    از متد ()getCurrentPosition برای اطلاع از موقعیت کنونی کاربر استفاده می شود.

    مثال زیر یک کد ساده موقعیت یابی را نشان می دهد که بوسیله آن عرض و طول جغرافیایی مکان کاربر را بر روی صفحه، نمایش می دهد:

    مثال (سیستم موقعیت یاب جهانی HTML5)

    <script>
    var x=document.getElementById("demo");
    function getLocation()
    {
    if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
    else{x.innerHTML="Geolocation is not supported by this browser.";}
    }
    function showPosition(position)
    {
    x.innerHTML="Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
    }
    </script>
    خودتان امتحان کنید »

    توضیح مثال:

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

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

    مدیریت خطاها و عدم جوابگویی سیستم

    ممکن است در فرایند موقعیت یابی، خطا هایی رخ دهد. از پارامتر دوم متد ()getCurrentPosition می توان برای مدیریت خطا های احتمالی استفاده کرد.

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

    مثال (سیستم موقعیت یاب جهانی HTML5)

    function showError(error)
    {
    switch(error.code)
    {
    case error.PERMISSION_DENIED:
    x.innerHTML="User denied the request for Geolocation."
    break;
    case error.POSITION_UNAVAILABLE:
    x.innerHTML="Location information is unavailable."
    break;
    case error.TIMEOUT:
    x.innerHTML="The request to get user location timed out."
    break;
    case error.UNKNOWN_ERROR:
    x.innerHTML="An unknown error occurred."
    break;
    }
    }
    خودتان امتحان کنید »

    توضیح کد:

    • PERMISSION_DENIED: در این حالت کاربر اجازه دسترسی به موقعیت یابی را نداده است.
    • POSITION_UNAVAILABLE: در این حالت یافتن موقعیت صحیح کاربر به علت مشکلات فنی ممکن نیست.
    • TIMEOUT: در این حالت مدت زمان لازم برای اجرای درخواست تمام شده است.
    • UNKNOWN_ERROR: خطای ایجاد شده نا مفهوم است.

    نمایش موقعیت کاربر بر روی یک نقشه

    برای نمایش موقعیت کاربر بر روی یک نقشه، به یک سرویس دهنده مانند Google Maps نیاز دارید:

    مثال (سیستم موقعیت یاب جهانی HTML5)

    function showPosition(position)
    {
    var latlon=position.coords.latitude+","+position.coords.longitude;

    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
    }
    خودتان امتحان کنید »

    در مثال بالا، از طول و عرض جغرافیایی برای نمایش موقعیت کاربر در Google Maps استفاده شده است. (از یک عکس استاتیک استفاده شده است)

    Google Map Script
    در این مثال، چگونگی نمایش یک نقشه تعاملی تر با ابزارهای zoom ،drag و marker نشان داده شده است.

    داده هایی که متد ()getCurrentPosition برمی گرداند

    اگر متد ()getCurrentPosition با موفقیت اجرا شود، یک شیء برمی گرداند. خصوصیت های latitude ,longitude و accuracy همیشه برگردانده می شوند. در جدول زیر دیگر خصوصیت های این شیء آورده شده است:

    خصوصیت توضیحات
    coords.latitude

    عرض جغرافیایی
    coords.longitude

    طول جغرافیایی
    coords.accuracy

    دقت و درستی مکان کاربر
    coords.altitude The altitude in meters above the mean sea level
    coords.altitudeAccuracy The altitude accuracy of position
    coords.heading The heading as degrees clockwise from North
    coords.speed The speed in meters per second
    timestamp The date/time of the response

    متدهای دیگر شیء geolocation

    متد ()watchPosition: مکان فعلی کاربر را برمی گرداند و در صورت جابه جا شدن کاربر، داده را تازه سازی می کند. (مانند دستگاه GPS در یک خودرو)

    متد ()clearWatch: باعث توقف متد ()watchPosition می شود.

    در مثال زیر، متد ()watchPosition، نشان داده شده است. برای تست این مثال، به یک دستگاه GPS دقیق نیاز دارید: (مانند iPhone)

    مثال (سیستم موقعیت یاب جهانی HTML5)

    <script>
    var x=document.getElementById("demo");
    function getLocation()
    {
    if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
    else{x.innerHTML="Geolocation is not supported by this browser.";}
    }
    function showPosition(position)
    {
    x.innerHTML="Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
    }
    </script>
    خودتان امتحان کنید »
    READ MORE

  • شروع کار با HTML

    18 مهر 1397

    چه چیزی نیاز دارید.

    Wiki

     در این سایت شما به هیچ ابزاری برای یاد گیری HTML نیاز ندارید.

    • به هیچ ویرایشگر HTML ی نیاز ندارید.
    • به هیچ سرویس دهنده وبی نیاز ندارید.
    • به هیچ وب سایتی نیاز ندارید.

    نگارش HTML

    Wiki

    HTML می تواند توسط ویرایشگرهای مختلفی مثل Dreamweaver و Visual Studio نگارش و ویرایش شود.

    اما در این خود آموز ما به ویرایشگر ساده متنی (مثل Notepad) برای نگارش HTML نیاز داریم. ما بر این عقیده ایم که استفاده از یک ویرایشگر ساده متنی بهترین راه برای یادگیری HTML است.

    وب آزمایشی خود را ایجاد کنید.

    Wiki

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

    روی هر یک از لینک های زیر راست کلیک نمایید و گزینه "save target as" یا "save link as" را انتخاب نمایید.

    mainpage.htm

    page1.htm

    page2.htm

    بعد از اینکه فایل های بالا را کپی کردید، می توانید با دابل کلیک روی فایل "mainpage.htm" نخستین صفحه وب خود را در عمل ببینید.

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

    Wiki

    ما به شما پیشنهاد می کنیم که هر چه را که از این سایت آموختید با ویرایش فایل وب خود به وسیله یک ویرایشگر متن (مثل Notepad) تجربه کنید.

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

    پسوند HTM یا HTML

    Wiki

    هنگامی که یک فایل HTML را ذخیره می کنید، می توانید از پسوند html یا htm استفاده کنید. تفاوتی نمی کند، این بستگی به شما دارد.

    آموزش تصویری مطلب بالا (فیلم آموزش HTML)
     درس شماره 2 (شروع کار با HTML)  زمان فیلم:  14:58

      خرید و دانلود مستقیم فیلم آموزش HTML - حجم دانلود 766 مگابایت (کلیک کنید +)
    READ MORE

  • شیء Document

    23 شهریور 1397

    HTML DOM Nodes

    در مدل HTML DOM هر چیزی یک گره(Node) است:

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

    کلیه ی توابع و خصوصیت های شیء Document در جاوا اسکریپت

    هنگامی که یک سند HTMLدر یک مرورگر وب بارگذاری می شود، تبدیل به یک شیء سند(document object) می شود.

    شیء سند(document node) در واقع گره ریشه ی سند HTML و تمام گره های دیگر است:

    گره های عنصر، گره های متن، گره های صفت، و گره های کامنت.

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

    نکته: سند(document) یک قسمت از شیء window است و می تواند توسط دستور window.document مورد دسترسی قرار بگیرد.

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

    Object          
    Document بله بله بله بله بله

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

    کلیه توابع و خصوصیت های شیء Document در JavaScript Properties and Methods

    خصوصیت ها و متدهای پیش رو می توانند بر روی اسناد HTML استفاده شوند:

    Property / متد توضیحات
    document.addEventListener()

    این متد، یک شنونده ی رویداد را به document اضافه می کند.
    document.adoptNode()

    گرفتن یک node از یک document دیگر.
    document.anchors

     این خصوصیت، یک مجموعه از عناصر <a> را در صفحه برمی گرداند. این عناصر دارای خصوصیت name هستند.
    document.applets

    این خصوصیت، یک مجموعه از تمام عناصر <applet> را که در صفحه قرار دارند، برمی گرداند.
    document.baseURI

    این خصوصیت، URI پایه و مطلق یک صفحه را برمی گرداند.
    document.body

    این خصوصیت، عنصر <body> از صفحه را ست کرده یا برمی گرداند.
    document.close()

    این متد، جریان خروجی که قبلا توسط document.open باز شده است را می بندد.
    document.cookie

    این خصوصیت، تمام نام و مقدار کوکی ها را در سند برمی گرداند.
    document.createAttribute()

    این متد، یک گره attribute را ایجاد می کند.
    document.createComment()

    این متد، یک گره comment را با یک متن مشخص، ایجاد می کند.
    document.createDocumentFragment()

    این متد، یک گره خالی DocumentFragment را ایجاد می کند.
    document.createElement()

    این متد، یک گره Element را ایجاد می کند.
    document.createTextNode()

    این متد، یک گره Text را ایجاد می کند.
    document.doctype

    این خصوصیت، تعریف نوع سند ، که با سند(document) همراه شده است را برمی گرداند.
    document.documentElement

    این خصوصیت، عنصر Document را از سند برمی گرداند(همان عنصر <html>).
    document.documentMode

    این خصوصیت، حالتی که توسط مرورگر برای ارائه دادن سند استفاده شده است را برمی گرداند.
    document.documentURI

    این خصوصیت، مکان سند را ست کرده یا برمی گرداند.
    document.domain

    این خصوصیت، نام دامنه ای از سرور،که سند را بارگذاری کرده است، برمی گرداند.
    document.domConfig

    منسوخ شده. پیکربندی DOM سند را برمی گرداند.
    document.embeds

    این خصوصیت، یک مجموعه از  تمام عناصر <embed>  از سند را برمی گرداند.
    document.forms

    این خصوصیت، یک مجموعه از تمام عناصر <form> را در سند برمی گرداند.
    document.getElementById()

    این متد، یک عنصر را با یک خصوصیت ID ، با یک مقدار مشخص، را برمی گرداند.
    document.getElementsByClassName()

    این متد، یک لیست از تمام عنصر ها، با یک نام کلاس مشخص را برمی گرداند.
    document.getElementsByName()

    این متد، یک لیست که در بر دارنده ی تمام عناصر با یک نام مشخص است را برمی گرداند.
    document.getElementsByTagName()

    این متد، یک لیست از تمام عنصر ها که دارای یک نام تگ مشخص هستند را برمی گرداند.
    document.head

    این خصوصیت، عنصر <head>  از سند را برمی گرداند.
    document.images

    این خصوصیت، یک مجموعه از تمام عناصر <img> در سند را برمی گرداند.
    document.implementation

    این خصوصیت، شیء DOMImplementation که این سند را بکار می برد، برمی گرداند.
    document.importNode()

    این متد، یک گره را از یک سند دیگر وارد می کند.
    document.inputEncoding

     این خصوصیت، کاراکتر رمزگذاری شده برای سند را برمی گرداند.
    document.lastModified

     این خصوصیت، تاریخ و زمان آخرین دفعه ای که سند تغییر کرده (اصلاح شده) است را برمی گرداند.
    document.links

     یک مجموعه از تمام عناصر <a> و  <area> در سند، که دارای یک خصوصیت href می باشند را برمی گرداند.
    document.normalize()

     این متد، گره های خالی را حذف کرده و گره های مجاور هم را با یکدیگر الحاق می کند.
    document.normalizeDocument()

     این متد، گره های متنی خالی را حذف کرده و گره های مجاور را به یکدیگر الحاق می کند.
    document.open()

     این متد، یک جریان خروجی را برای به دست آوردن خروجی از document.write ، باز می کند.
    document.querySelector()

     این متد، اولین عنصری که با یک سلکتور css مشخص در سند تطابق یابد را برمی گرداند.
    document.querySelectorAll()

     این متد، یک NodeList ایستا را که شامل تمام عناصری است که با یک سلکتور css مشخص در سند تطابق دارند را برمی گرداند.
    document.readyState

     این خصوصیت، وضعیت(لود شدن) سند را برمی گرداند.
    document.referrer

     این خصوصیت url سندی که سند جاری را بارگذاری کرده است،برمی گرداند.
    document.removeEventListener()

     یک شنونده ی رویداد را از سند حذف می کند(که توسط متد addEventListener ایجاد شده است).
    document.renameNode()

    این متد یک گره مشخص شده را تغییر نام می دهد.
    document.scripts

     یک مجموعه از عناصر <script> در سند را برمی گرداند.
    document.strictErrorChecking

     این خصوصیت، مشخص می کند که آیا error-checking اجرا شده است یا نه.
    document.title

     این خصوصیت، عنوان سند را ست کرده یا برمی گرداند.
    document.URL

     این خصوصیت، url کامل سند HTML را برمی گرداند.
    document.write()

     این متد، عبارت های HTML یا کدهای جاوااسکریپت را در سند چاپ می کند.
    document.writeln()

     این متد، شبیه متد ()write می باشد اما یک کاراکتر newline را بعد از هر عبارت، اضافه می کند.

    اخطار!!!

    در هسته ی W3C DOM شیء Document تمام خصوصیت ها و متدها را از شیء گره به ارث می برد.

    بسیاری از این خصوصیت ها و متدهای به کار رفته در سندها، هیچ معنی ندارند.

    از استفاده از این خصوصیت های شیء گره و متدها در اشیاء سند HTML اجتناب کنید.

     Property / متد Reason for avoiding
    document.attributes

    سند ها خصوصیت attribute را ندارند.
    document.hasAttributes()

    سندها خصوصیت attribute را ندارند.
    document.nextSibling

    سندها خصوصیت sibling ندارند.
    document.nodeName

    این همواره document# است.
     document.nodeType

    این همواره 9(DOCUMENT_NODE)است.
    document.nodeValue

    سند ها node value ندارند.
    document.ownerDocument

    سند ها owner document ندارند.
    document.ownerElement

    سند ها owner element ندارند.
    document.parentNode

    سند ها، parent Node  ندارند.
    document.previousSibling

    سند ها sibling ندارند.
    document.textContent

    سند ها text content ندارند.
    READ MORE

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

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