سبد (0)

تبلیغات

فیلم آموزش html

  • SSE مخفف کلمات Server-Sent Events است و امکان دریافت پیام های یک طرفه از سمت سرور بصورت اتوماتیک را فراهم می کند.


    (SSE (Server-Sent Events - پیام های یک طرفه

    SSE قابلیت جدیدی در Html5است که به مرورگر این امکان را می دهد تا Updateهای ارسالی از طرف سرور را دریافت کند.

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

    مثال هایی از SSE: تغییر عناوین خبرها، نتایج ورزشی، تغییر در شاخص ها و نمودارهای سایت های اقتصادی و ...


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

     Firefox Opera Google Chrome Safari

    مرورگرهای Firefox, Opera, Chrome, Safari امکان دریافت پیام های یک طرفه از سمت سرور را پشتیبانی می کنند.

    توجه: Internet Explorer امکان ارسال پیام های یکطرفه را پشتیبانی نمی کند.


    دریافت اطلاعات ارسالی از سرور

    شیء EventSource برای دریافت اطلاعات در Updateهای ارسالی از طرف سرور به کار می رود.

    بلافاصله بعد از ایجاد شیء EventSource، این شیء تمام رویدادهایی که در URL تنظیم شده اتفاق می افتد را گوش می دهد (Listening).

    شکل کلی استفاده از این شیء بصورت زیر است:

    مثال (SSE چیست؟)

    var source=new EventSource("demo_sse.php");
    source.onmessage=function(event)
      {
      document.getElementById("result").innerHTML+=event.data + "<br>";
      };
    خودتان امتحان کنید »

    توضیح کد بالا: 

    • در خط اول یک شی جدید EventSource با نام source ایجاد کرده و صفحه demo_sse.php را به عنوان URL یا آدرس فایلی که Update را به صفحه ارسال می کند تعیین کرده ایم.
    • - هر زمان که Update جدیدی دریافت شود رویداد onmessage اجرا می شود.
    • - هر زمان که رویداد onmessage اجرا می شود نتیجه خروجی در عنصر با id معادل "result" به روز رسانی می شود. (آپدیت ارسالی در شی event.data قرار دارد)

    چک کردن پشتیبانی مرورگر از SSE

    بهتر است قبل از هر چیز پشتیبانی مرورگر از SSE را بررسی کنیم تا در هر حالت کد خود را بر مبنای آن بنویسیم.

    قطعه کد زیر بررسی می کند که آیا مرورگر از متد SSE پشتیبانی می کند یا خیر و کد لازم را در هر صورت اجرا می نماید:

    if(typeof(EventSource)!=="undefined")
      {
      // Yes! Server-sent events support!
      // Some code.....
      }
    else
      {
      // Sorry! No server-sent events support..
      }

    کد سمت سرور

    برای اینکه مثال بالا عمل کند باید صفحه ای وجود داشته باشد که قابلیت تولید و ارسال Update را داشته باشد. برای مثال یک صفحه PHPیا ASP

    کد سمت سرور برای ارسال آپدیت بسیار ساده است. کافی است در صفحه PHP یا ASP، مقدار خاصیت Content-Type صفحه را بر روی مقدار text/event-stream تنظیم نمایید. حالا می توانید جریان ارسال اطلاعات را شروع نمایید.

    کد PHP:

    <?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');

    $time = date('r');
    echo "data: The server time is: {$time}\n\n";
    flush();
    ?>

    کد ASP به زبان VB:

    <%
    Response.ContentType="text/event-stream"
    Response.Expires=-1
    Response.Write("data: " & now())
    Response.Flush()
    %>

    توضیح کد:

    • مقدار خاصیت Content-Type صفحه را بر روی مقدار text/event-stream تنظیم نمایید.
    • مشخص نمایید که صفحه نباید اطلاعات را Cashe (ذخیره) نماید.
    • داده ها را برای ارسال آماده نمایید، همواره با کلمه data شروع می شود.
    • با استفاده از متد ()Flush، نتیجه را به صفحه درخواست کننده ارسال نمایید.

    شیء EventSource

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

    رویداد توضیحات
    onopen

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

    onmessage

    زمانی اتفاق می افتد که یک پیام دریافت شود.

    onerror

    زمانی که یک خطا رخ دهد اتفاق می افتد.

    READ MORE
  • Web Worker یک کد JavaScript است که در پشت پرده، بدون اینکه بر کارآیی صفحه تأثیری داشته باشد، اجرا می شود.


    web worker چیست؟

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

    Web Worker یک کد JavaScriptاست که در پشت پرده، مستقل از اسکریپت های دیگر بدون اینکه بر روی کارآیی و عملکرد صفحه تاثیری داشته باشد اجرا می شود. با استفاده از این متد می توان در حین اجرای اسکریپت ها، به صورت عادی به کار با صفحه پرداخته و به کلیک کردن و انجام سایر امور مورد نظر خود بپردازید.


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

    Internet Explorer Firefox Opera Google Chrome Safari

    مرورگرهای Internet Explorer 10, Firefox, Opera, Chrome, Safari متد Web Worker را پشتیبانی می کنند.


    مثال Web Worker در HTML5

    در مثال زیر، یک Web Worker ساده ایجاد کرده ایم که با کلیک روی دکمه "Start Worker" شروع به شمارش اعداد می کند:

    مثال (اجرای کدهای javascript در پشت پرده)

    <!DOCTYPE html>
    <html>
    <body>

    <p>Count numbers: <output id="result"></output></p>
    <button onclick="startWorker()">Start Worker</button>
    <button onclick="stopWorker()">Stop Worker</button>
    <br><br>

    <script>
    var w;

    function startWorker()
    {
    if(typeof(Worker)!=="undefined")
    {
      if(typeof(w)=="undefined")
        {
        w=new Worker("demo_workers.js");
        }
      w.onmessage = function (event) {
        document.getElementById("result").innerHTML=event.data;
      };
    }
    else
    {
    document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
    }
    }

    function stopWorker()
    {
    w.terminate();
    }
    </script>

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

    آیا مرورگر از Web Worker پشتیبانی می کند؟

    در مرحله اول باید چک کرد که آیا مرورگر ما از متد Web Worker پشتیبانی می کند یا خیر:

    if(typeof(Worker)!=="undefined")
      {
      // Yes! Web worker support!
      // Some code.....
      }
    else
      {
      // Sorry! No Web Worker support..
      }

    ایجاد فایل Web Worker

    در متد Web Worker کدهای JavaScript مورد نظرمان را در یک فایل خارجی بنام "demo_workers.js" و در بیرون از صفحه قرار می دهیم.

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

    var i=0;

    function timedCount()
    {
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
    }

    timedCount();

    مهمترین نکته در کد بالا متد ()postMessage است، که مقدار خروجی تابع را بصورت یک پیام به صفحه ارسال می کند.

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


    ایجاد یک شیء Web Worker

    اکنون که فایل خارجی Web Worker را در اختیار داریم باید از صفحه HTML، آنرا فراخوانی کنیم.

    این کار بوسیله یک شی Web Worker انجام می شود. کد زیر ابتدا چک می کند که آیا یک شی Web Worker وجود دارد یا خیر، سپس درصورتی که شی وجود نداشته باشد، یک نمونه جدید ساخته و فایل "demo_workers.js" را اجرا می کند.

    if(typeof(w)=="undefined")
      {
      w=new Worker("demo_workers.js");
      }

    برنامه کد موجود در فایل را اجرا کرده و جواب (Message) را به صفحه برمی گرداند.

    حالا از طریق Web Worker می توانیم پیام ها را دریافت و یا ارسال کنیم.

    رویداد "onmessage" را به شیء Web Worker، اضافه می کنیم:

    w.onmessage=function(event){
    document.getElementById("result").innerHTML=event.data;
    };

    هنگامی که جواب از Web Worker برمی گردد، رویداد "onmessage" رخ می دهد و کد داخل آن اجرا می شود. اطلاعات برگشتی از Web Worker در event.data نگهداری می شود.


    خاتمه دادن به یک Web Worker

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

    برای خاتمه دادن به کار یک Web Worker و آزاد کردن منابع مرورگر و کامپیوتر، از متد ()terminate استفاده کنید:

    w.terminate();

    Web Worker و DOM

    از آنجایی که Web Workerها در فایل های خارجی تعریف می شوند، اشیاء JavaScript زیر نمی توانند به آن دسترسی داشته باشند:

    • شیء window
    • شیء document
    • شیء parent
    READ MORE
  • JavaScripts صفحات HTML را پویاتر و جذاب تر می سازد.


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

    Wiki

    Insert a script
    نحوه وارد کردن یک script در یک سند HTML.

    Use of the <noscript> tag
    چاپ یک پیام مناسب برای مرورگرهایی که جاوا اسکریبت را پشتیبانی نمی کنند یا توسط کاربر غیر فعال شده است.


    عنصر script در HTML

    Wiki

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

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

    ممکن است برای تگ <script> خصوصیت type را تنظیم کنیم ("text/javascript") توجه داشته باشید که نیاز به انجام این کار نیست، چون در تمام مرورگرها و در HTML5 زبان اسکریپت پیشفرض، JavaScript است.

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

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

    مثال (استفاده از javascripts در HTML)

    <script type="text/javascript">
    document.write("Hello World!")
    </script>
    خودتان امتحان کنید »

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


    عنصر noscript در HTML

    Wiki

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

    عنصر <noscript> می تواند تمام عناصری را که شما می توانید در عنصر body در یک صفحه HTML پیدا کنید را شامل شود.

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

    مثال (استفاده از javascripts در HTML)

    <script type="text/javascript">
    document.write("Hello World!")
    </script>
    <noscript>Sorry, your browser does not support JavaScript!</noscript>
    خودتان امتحان کنید »

    تگ های Script

    Wiki

    Tag Description
    <script>

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

    <noscript>

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

    READ MORE
  • مثال (اعلان DOCTYPE در HTML)

    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>

    <body>
    The content of the document......
    </body>

    </html>

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

    تعریف و کاربرد اعلان DOCTYPE در HTML

    اعلان <DOCTYPE!> باید در اولین شروع کد نویسی یعنی قبل از تگ <HTML> قرار گیرد.

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

    بدلیل اینکه HTML4.01 بر مبنای SGML است، اعلان <DOCTYPE!> آن به یک DTD اشاره می کند.. DTD قوانین مشخص برای زبان نشانه گذاری است به طوری که مرورگرها ارائه محتوا را به درستی انجام دهند.

    HTML5مبنی بر SGML نمی باشد بنابراین اشاره به یک DTD نیاز ندارد.

    نکته:همیشه <DOCTYPE!> را به صفحه HTML خود اضافه کنید تا مرورگر بداند چه نوع سندی را پیش رو دارد.


    پشتیبانی مرورگرها از اعلان DOCTYPE در HTML

    عنصر          
    <!DOCTYPE> بله بله بله بله بله

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

    در HTML4.01 سه اعلان مختلف <DOCTYPE> وجود دارد ولی در HTML5 فقط یکی وجود دارد.

    <!DOCTYPE html>

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

    نکته:اعلان <DOCTYPE> حساس به حروف بزرگ و کوچک نیست.


    اعلان های  DOCTYPE

    HTML 5

    <!DOCTYPE html>

    HTML 4.01 اکید(Strict)

    این DTD شامل همه ی عناصر و ویژگی های HTML می باشد اما عناصر نمایشی (مانند تگ font) را در بر نمی گیرد. استفاده از FRAMSET (فریم) امکان پذیر نیست.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    HTML 4.01 انتقالی(Transitional)

    این DTD شامل همه ی عناصر و ویژگی های HTML می باشد و همچنین عناصر نمایشی(مانند font) را نیز در بر می گیرد. استفاده از FRAMSET (فریم) امکان پذیر نیست.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    HTML 4.01 فریم ها (Frameset)

    این DTD با HTML4.01 انتقالی یکسان است اما استفاده از FRAMSET (فریم) امکان پذیر است.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

    XHTML 1.0 اکید(Strict)

    این DTD شامل همه ی عناصر و ویژگی های HTML می باشد اما عناصر نمایشی (مانند font) را در بر نمی گیرد. استفاده از FRAMSET (فریم) امکان پذیر نیست. در XHTML تمام تگ ها و ویژگی ها باید با حروف کوچک و مانند XML نوشته شود.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    XHTML 1.0 اتتقالی (Transitional)

    این DTD شامل همه ی عناصر و ویژگی های HTML می باشد اما عناصر نمایشی (مانند font) را در بر می گیرد. استفاده از FRAMSET (فریم) امکان پذیر نیست. در XHTML تمام تگ ها و ویژگی ها باید با حروف کوچک و مانند XML نوشته شود.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    XHTML 1.0 فریم ها( Frameset)

    این DTD با XHTML0.1 انتقالی یکسان است اما استفاده از FRAMSET (فریم) امکان پذیر است.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

    XHTML 1.1

    این DTD با XHTML0.1 اکید یکسان است. اما به شما امکان اضافه کردن ماژول را می دهد.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    READ MORE
  • انواع ورودی جدید در HTML5

    HTML5چند نوع input جدید برای فرم ها دارد. این امکانات اجازه کنترل بهتر و بررسی اعتبار یک ورودی را فراهم می کند.

    در این مطلب به بررسی انواع جدید input می پردازیم:

    • color
    • date
    • datetime
    • datetime-local
    • email
    • month
    • number
    • range
    • search
    • tel
    • time
    • url
    • week

    توجه:درست است که بعضی از مرورگرها از این انواع ورودی جدید پشتیبانی نمی کنند ولی در صورت عدم پشتیبانی هم با آن ها مثل ورودی های متنی ساده برخورد می کنند و مشکلی پیش نمی آید.


    نوع ورودی color

    یک فیلد ورودی که باید حتماً شامل یک رنگ باشد. این نوع ورودی به شما اجازه می دهد یک رنگ را از جعبه رنگ انتخاب نمایید.

    Opera Safari Chrome Firefox Internet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Select your favorite color: <input type="color" name="favcolor">
    خودتان امتحان کنید »

    نوع ورودی Date

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

    Opera Safari Chrome Firefox Internet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Birthday: <input type="date" name="bday">
    خودتان امتحان کنید »

    نوع ورودی datetime 

    به کاربر اجازه می دهد، زمان و تاریخ را بر حسب ساعت جهانی (UTC) انتخاب کند.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Birthday (date and time): <input type="datetime" name="bdaytime">
    خودتان امتحان کنید »

    نوع ورودی datetime-local

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

    OperaSafariChromeFirefoxInternet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Define a date and time control (no time zone):

    Birthday (date and time): <input type="datetime-local" name="bdaytime">
    خودتان امتحان کنید »

    نوع ورودی email

    یک فیلد ورودی برای آدرس ایمیل تعریف می کند. زمانی که Submit اتفاق می افتد، بصورت اتوماتیک معتبر می شود (validated).

    فقط ایمیل بصورت این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید را دریافت می کند.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (انواع ورودی جدید در HTML5)

    E-mail: <input type="email" name="email">
    خودتان امتحان کنید »

    نوع ورودی month

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

    OperaSafariChromeFirefoxInternet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Birthday (month and year): <input type="month" name="bdaymonth">
    خودتان امتحان کنید »

    نوع ورودی number

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

    همچنین می توانید آنرا بصورتی تنظیم کنید که یک محدوده ای از اعداد را بپذیرد.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
    خودتان امتحان کنید »

    خصوصیات زیر محدودیت هایی است که می توانید روی عدد اعمال کنید:

    • maxمقدار بیشترین عدد مجازی که کاربر می تواند وارد کند.
    • minمقدار کمترین عددی که کاربر می تواند وارد نماید.
    • stepفاصله بین اعدای که کاربر مجاز به استفاده است.
    • valueمقدار پیشفرض فیلد را مشخص می کند.

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


    نوع ورودی range

    این نوع ورودی تقریبا مثل همان نوع ورودی number است. فقط نوع range به صورت یک اسلاید بار نمایش داده می شود.

    همچنین می توانید آنرا بصورتی تنظیم کنید که یک محدوده ای از اعداد را بپذیرد.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Define a control for entering a number whose exact value is not important (like a slider control):

    <input type="range" name="points" min="1" max="10">
    خودتان امتحان کنید »

    خصوصیات زیر محدودیت هایی است که می توانید روی عدد ورودی اعمال کنید:

    • maxمقدار بیشترین عدد مجازی که کاربر می تواند وارد کند.
    • minمقدار کمترین عددی که کاربر می تواند وارد نماید.
    • stepفاصله بین اعدای که کاربر مجاز به استفاده است نشان می دهد.
    • valueمقدار پیشفرض فیلد را مشخص می کند. 

    نوع ورودی search

    برای فیلدهای جستجو از این فیلد استفاده می شود، مثل جستجوی سایت و جستجوی گوگل.

    فیلد جستجو مثل یک فیلد متن معمولی است.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Search Google: <input type="search" name="googlesearch">
    خودتان امتحان کنید »

    نوع ورودی tel

    یک فیلد برای ورود شماره تلفن، تعریف می کند.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Telephone: <input type="tel" name="usrtel">
    خودتان امتحان کنید »

    نوع ورودی time

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

    OperaSafariChromeFirefoxInternet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Select a time: <input type="time" name="usr_time">
    خودتان امتحان کنید »

    نوع ورودی url

    نوع وردی url، فیلدی است که باید شامل یک آدرس URL باشد.

    زمانی که فرم submit می شود، بصورت اتوماتیک این فیلد معتبر می شود (validated).

    OperaSafariChromeFirefoxInternet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Add your homepage: <input type="url" name="homepage">
    خودتان امتحان کنید »

    نوع ورودی week

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

    OperaSafariChromeFirefoxInternet Explorer

    مثال (انواع ورودی جدید در HTML5)

    Select a week: <input type="week" name="week_year">
    خودتان امتحان کنید »
    READ MORE
  • در HTML5، عناصر SVG را می توان به طور مستقیم در صفحه HTML جاسازی کرد.


    SVG چیست؟

    • SVG مخفف کلمات Scalable Vector Graphics می باشد. (گرافیک برداری مقیاس پذیر)
    • SVG برای ایجاد گرافیک های برداری در صفحات وب بکار می رود.
    • SVG زبانی برای توصیف گرافیک 2 بعدی در XML است.
    • با Zoom روی گرافیک، کیفیت کاهش نمی یابد.
    • هر المان و خصوصیتی که در SVG دیده می شود، می تواند متحرک شود.
    • SVG یکی از توصیه های کنسرسیوم w3 می باشد.

    SVG نسخه 1.1 در ژانویه 2003 برای اولین بار توسط W3C توصیه شد. شرکت های Sun Adobe, Apple, IBM, Kodak ازجمله شرکت هایی بودند که بر روی این پروژه کار کرده اند.


    مزایای SVG

    مزایای SVG نسبت به سایر فرمت های عکس (مانند GIF و JPEG):

    • عکس های SVG را می توان با هر Editorی، ایجاد و یا ویرایش کرد.
    • حجم این فایل ها از فرمت های پیکسلی کم تر است.
    • این عکس ها قابلیت تغییر اندازه بدون از دست دادن کیفیت را دارند.
    • متون نوشته شده در این عکس ها بصورت TEXT بوده و قابل انتخاب و جستجو می باشد.
    • فایل های SVG کاملا XML هستند.

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

    Internet Explorer Firefox Opera Google Chrome Safari

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


    قراردادن SVG مستقیماً در صفحات HTML

    در HTML5، عناصر SVG را می توان به طور مستقیم در صفحه HTMLجاسازی کرد:

    مثال (ایجاد گرافیک های برداری در HTML5)

    <!DOCTYPE html>
    <html>
    <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
      <polygon points="100,10 40,180 190,60 10,60 160,180"
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
    </svg>

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

    تفاوت های بین SVG و Canvas

    SVG زبانی برای توصیف گرافیک دو بعدی در XML است.

    عنصر <canvas> در HTML5 از طریق اسکریبت نویسی (معمولاً JavaScript) برای رسم اشکال در یک صفحه وب استفاده می کند.

    XML بودن فایل های SVG این امکان را فراهم می سازد، که دسترسی به عناصر موجود در فایل SVG با توجه به مدل DOM امکان پذیر باشد. همچنین می توانید رویدادهای مختلف JavaScript را به هر عنصری اضافه نمایید.

    در SVG، با هر شکل، مانند یک Object برخورد می شود. اگر ویژگی های Object تغییر کند، مرورگر می تواند به طور خودکار دوباره شکل را بازسازی کند.
    در Canvas، با اشکال، پیکسل به پیکسل برخورد می شود و هنگامی که شکل رسم شد، دیگر در مرورگر قابل دسترس نیست. اگر نیاز است که موقعیت آن عوض شود، باید کل شکل، دوباره ترسیم شود.


    مقایسه Canvas و SVG

    جدول زیر مهمترین تفاوت های Canvas و SVG را نشان می دهد:

    Canvas SVG
    • وابسته به Resolution است.
    • رویدادها را پشتیبانی نمی کند.
    • قابلیت rendering متن، ضعیف است.
    • می توان تصویر نهایی را با فرمت jpg. یا png. ذخیره کرد.
    • برای ساخت بازی، مناسب است.
    • مستقل از Resolution عمل می کند.
    • رویدادها را پشتیبانی می کند.
    • برای برنامه هایی با نواحی rendering بزرگ (مانند نقشه های گوگل) مناسب است.
    •  در صورت پیچیدگی، سرعت rendering پایین است. (هر چیزی که از DOM استفاده کند بسیار کند خواهد بود)
    • برای ساخت بازی، مناسب نیست.
    READ MORE
  • صداها در HTML به روش های مختلفی می توانند پخش شوند.


    مشکلات و راه حل های پخش صدا در وب

    Wiki

    اجرای صدا در HTML کار آسانی نیست!

    باید ترفند های زیادی برای اینکه مطمئن شوید فایل صوتی شما در تمام مرورگرها (Internet Explorer, Chrome, Firefox, Safari, Opera) و تمامی سخت افزارها (PC, Mac , iPad, iPhone) اجرا شود به کار ببرید.

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


    پخش صدا با استفاده از Pluginها

    Wiki

    Plugin یک برنامه کامپیوتری کوچک است که قابلیت های استاندارد مرورگرهای وب را گسترش می دهد. Pluginها برای اهداف مختلفی می توانند استفاده شوند. آنها می توانند برای پخش موزیک، نمایش نقشه، تأیید شناسه کاربری بانکی، کنترل ورودی ها کاربر و... بکار روند.

    Pluginها را می توان با استفاده از تگ های <object> یا <embed> به صفحات HTML اضافه نمود.


    پخش صدا با استفاده از عنصر <embed>

    Wiki

    هدف از تگ <embed> درج کردن عناصر multimedia در صفحات HTML است.

    قطعه کد زیر یک فایل MP3 را در صفحه وب درج می کند.

    مثال (پخش صدا در HTML)

    <embed height="50px" width="100px" src="/horse.mp3" />
    خودتان امتحان کنید »

    مشکلات استفاده از عنصر <embed>

    • تگ <embed> در HTML 4 شناخته شده نیست. صفحه شما دارای اعتبار نمی باشد.
    • اگر مرورگر فرمت فایل شما را پشتیبانی نکند، audio پخش نخواهد شد.
    • اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.

    پخش صدا با استفاده از عنصر <object>

    Wiki

    هدف از تگ <object> درج کردن عناصر multimedia در صفحات HTML است.

    قطعه کد زیر یک فایل MP3 را در صفحه وب درج می کند.

    مثال (پخش صدا در HTML)

    <object height="50px" width="100px" data="horse.mp3" />
    خودتان امتحان کنید »

    مشکلات استفاده از عنصر <object>

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

    پخش صدا با استفاده از عنصر <audio>

    Wiki

    عنصر <audio> یک عنصر در HTML 5 می باشد، برای HTML 4 شناخته شده نیست اما در همه مرورگرهای جدید کار می کند.

    مثال (پخش صدا در HTML)

    <audio controls="controls">
      <source src="/horse.mp3" type="audio/mpeg" />
      <source src="/horse.ogg" type="audio/ogg" />
    Your browser does not support this audio
    </audio>
    خودتان امتحان کنید »

    مشکلات استفاده از عنصر <audio>

    Wiki

    • فقط فرمت های Ogg و MP3 و Wav و Vorbis قابل پشتیبانی است و باید یک ویدئو را مانند مثال بالا به چند فرمت تبدیل کنید.
    • عنصر <audio> در مرورگرهای قدیمی شناخته شده نیست.
    • عنصر <audio> در HTML4 و XHTML معتبر نیست.
    مرورگر Ogg Vorbis MP3 WAV
    FireFox 4 beta

    Safari 4

    --

    Chrome 3 (beta)

    --

    Opera 10 (beta)

    --
     IE 8 -- -- --

    بهترین راه حل برای پخش صدا در HTML

    Wiki

    مثال (پخش صدا در HTML)

    <audio controls="controls" height="50px" width="100px">
      <source src="/horse.mp3" type="audio/mpeg" />
      <source src="/horse.ogg" type="audio/ogg" />
    <embed height="50px" width="100px" src="/horse.mp3" />
    </audio>
    خودتان امتحان کنید »

    مثال بالا از دو فرمت متفاوت استفاده می کند. در HTML 5 عنصر <audio> سعی می کند تا ویدئو را با یکی از فرمت های ogg یا mp3  پخش کند. اگر این روش جواب نداد، بخش ویدئو به عنصر <embed> واگذار می گردد. اگر این روش هم جواب نداد، خطایی نمایش داده می شود.

    مشکلات

    Wiki

    • باید ویدئو ها را به فرمت های زیادی تبدیل کنید.
    • عنصر <audio> در HTML 4 و XHTML وجود ندارد.
    • عنصر <embed> در HTML 4 و XHTML اعتبار ندارد.

    نکته: استفاده از اعلان <DOCTYPE html!> در بالای صفحه، مشکل اعتبار را حل می کند.


    Yahoo Media Player - آسانترین راه برای اضافه کردن Audio به سایت

    Wiki

    ساده ترین راه برای اضافه کردن Audio به صفحات وب چیست؟ بطور قطع Yahoo Media Player که به صورت رایگان است، می تواند یک گزینه باشد.

    Yahoo Media Player فایل های mp3 و دیگر فرمت ها را پخش می کند. شما می توانید آنرا به صفحه (یا بلاگ) خودتان با یک خط دستور اضافه کنید و به راحتی صفحه HTML خود را به یک پخش کننده موزیک حرفه ای تبدیل کنید.

    مثال (پخش صدا در HTML)

    <a href="/song.mp3">Play Song</a>

    <script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
    </script>
    خودتان امتحان کنید »

    استفاده از player یاهو رایگان است. برای استفاده از آن کد JavaScript زیر را در پایین صفحه وب خود درج کنید.

    <script src="http://mediaplayer.yahoo.com/js"></script>

    سپس به سادگی توسط تگ <a> به فایل های mp3 خود در HTML اتصال برقرار نمایید. کد JavaScript به صورت اتوماتیک برای هر آهنگ یک دکمه پخش ایجاد می کند. گرچه، هنگامی که روی دکمه کلیک می کنید، یک پخش کننده بزرگ پایین صفحه ظاهر می شود.

    <a href="/song1.mp3">Play Song 1</a>
    <a href="/song2.mp3">Play Song 2</a>
    ...
    ...
    ...

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


    استفاده از تگ <a>

    Wiki

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

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

    مثال (پخش صدا در HTML)

    <a href="/horse.mp3">Play the song</a>
    خودتان امتحان کنید »

    یک نکته در مورد صداهای Inline

    Wiki

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

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

    بهترین پیشنهاد ما به شما این است که تنها زمانی از صداهای Inline در صفحات وب استفاده کنید که کاربر انتظار دارد صدایی را بشنود. مثالی در این مورد صفحه ای است که کاربر با کلیک روی لینکی می خواهد مورد ضبط شده ای را بشنود.


    تگ های Multimedia در HTML

    Wiki

    Tag Description
    <embed> یک عنصر multimedia در صفحات HTML درج می کند
    <object> یک عنصر multimedia در صفحات HTML درج می کند
    <param>

    یک پارامتر برای object تعریف می کند

    <audio>

    صدا را در صفحات HTML درج می کند (تگ جدید در HTML5)

    <video>

    یک ویدئو یا فیلم در صفحات HTML درج می کند. (تگ جدید در HTML5)

    <source>

    در عناصر <video> و <audio> برای مشخص کردن منبع صدا یا فیلم استفاده می شود. (تگ جدید در HTML5)

    <track>

    در عناصر <video> و <audio> برای مشخص کردن متن trackها استفاده می شود. (تگ جدید در HTML5)

    READ MORE
  • HTML5 برای پخش صدا،  استانداردی را به وجود آورده است.


    پخش صدا در وب

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

    امروزه، فایل های صوتی عموماً از طریق یک پلاگین مثل Flash نشان داده می شوند. هر چند همه مرورگرها، پلاگین های مشابهی ندارند.

    HTML5 روش استانداردی را برای پخش فایل های صوتی با استفاده از عنصر <audio> فراهم کرده است.


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

    Internet Explorer Firefox Opera Google Chrome Safari

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

    توجه: Internet Explorer 8 و نسخه های قدیمی تر آن، عنصر <audio> را پشتیبانی نمی کنند.


    عنصر <audio> چگونه کار می کند؟

    برای پخش یک فایل صوتی در HTML5 تمام آن چیزی که نیاز دارید این چند خط کد زیر است:

    مثال (پخص صدا در HTML5)

    <audio controls>
      <source src="/horse.ogg" type="audio/ogg">
      <source src="/horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>
    خودتان امتحان کنید »

    ویژگی controls برای افزودن کنترل های play ،pause و صدا می باشد.

     در صورتی که مرورگر از عنصر <audio> پشتیبانی نمی کند باید بین دو تگ <audio> و <audio/> جمله ای مناسب مانند زیر قرار داده شود:

    Your browser does not support the audio tag.

    تگ <audio> به شما اجازه می دهد که چند تگ <source> داشته باشید. تگ های <source> می تواند به فایل های صوتی مختلفی لینک شوند. مرورگر اولین فرمتی که قابلیت پخش آن را داشته باشد، برای کاربر پخش می کند.

    مثال بالا از یک فایل Ogg استفاده کرده است و در مرورگرهای Firefox, Opera, Chrome کار می کند. برای اینکه فایل صوتی در IE و Safari و نسخه های قبلی Chrome نیز پخش شود، باید از فابل های MP3 استفاده کنید. 

    تمام خصوصیت های تگ <audio>

    Autoplay: در صورت وجود فایل صوتی به محض آماده شدن پخش می شود. مقداری که می گیرد: autoplay

    Controls: دکمه های مختلف مثل play و... را اضافه می کند. مقداری که می گیرد: controls

    Loop: در صورت اتمام فایل صوتی دوباره از اول شروع به پخش می کند. مقداری که می گیرد: loop

    Preload: کاری می کند که صدا در هنگام لود شدن صفحه، آماده پخش شود. مقداری که می گیرد: perload

    Src: آدرس فایلی است که باید پخش شود. مقداری که می گیرد: یک url 


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

    در حال حاضر 3 فرمت تحت پشتیبانی عنصر <audio> قرار دارد.

    • MP3
    • Wav
    • Ogg
     
    Browser MP3 Wav Ogg
    Internet Explorer 9+ YES NO NO
    Chrome 6+ YES YES YES
    Firefox 3.6+ NO YES YES
    Safari 5+ YES YES NO
    Opera 10+ NO YES YES

    MIME Types for Audio Formats

    Format MIME-type
    MP3 audio/mpeg
    Ogg audio/ogg
    Wav audio/wav
    READ MORE
  • مثال

    یک لینک به بیاموز

    <a href="http://www.beyamooz.com">Visit beyamooz.com!</a>

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

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


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

    تگ <a> برای پیوند یک صفحه به صفحه ای دیگر استفاده می شود.

    در تگ <a> مهم ترین خصوصیت href است که نشان می دهد مقصد لینک کجاست.

    به طور پیش فرض، لینک ها در مرورگرها به یکی از روش های زیر، ظاهر می شوند:

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

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

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

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

    نکته 1: اگر ویژگی href تنظیم نشده باشد، هیچ کدام از ویژگی های زیر اثری نخواهند داشت:

    • download
    • hreflang
    • media
    • rel
    • target
    • type

    نکته 2: صفحه لینک شده به طور معمول در پنجره جاری مرورگر نمایش داده می شود، مگر اینکه شما خصوصیت target را برای لینک مذکور تنظیم نمایید.

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


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

    در HTML 4.01 تگ <a> می تواند به صورت یک لینک (hyperlink) یا یک لنگر (anchor) باشد. در HTML5تگ <a> همیشه یک لینک است، اما اگر ویژگی href را نداشته باشد آن تنها یک نگهدارنده مکان برای یک لینک است.

    در HTML5 تعدادی صفت جدید به این تگ اضافه شده و از نسخه HTML4.01 آن نیز تعدادی صفت حذف شده است.


     خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    charset char_encoding در HTML5 پشتیبانی نمی شود.
    مشخص کننده نوع کدینگ کاراکترهای صفحه مقصد است.
    coords coordinates در HTML5 پشتیبانی نمی شود.
    مختصات یک لینک را مشخص می کند.
    download filename دانلود یک لینک را مشخص می کند.
    href URL ایجاد پیوند یا لینک به سندی دیگر را مشخص می کند.
    hreflang language_code مشخص کننده زبان اصلی وپیش فرض صفحه مقصد پیوند است.
    media media_query لینک رسانه یا دستگاه را مشخص می کند.
    name section_name در HTML5 پشتیبانی نمی شود.
    ایجاد لینک نامگذاری شده در یک سند را مشخص می کند. (استاندارد HTML5 خصوصیت id را به جای name برای تعیین اسم برای یک محل مشخص پیشنهاد می دهد)
    rel alternate
    author
    bookmark
    help
    license
    next
    nofollow
    noreferrer
    prefetch
    prev
    search
    tag
    نوع ارتباط بین سند رایج و سند لینک شده را مشخص می کند.
    rev text در HTML5 پشتیبانی نمی شود.
    نوع ارتباط بین سند لینک شده با سند های رایج را مشخص می کند.
    shape default
    rect
    circle
    poly
    در HTML5 پشتیبانی نمی شود.

    ایجاد shape (شکل) از لینک را مشخص می کند.


    target _blank
    _parent
    _self
    _top
    framename
    خصوصیت target مشخص می کند که صفحه ی لینک شده چگونه باز شود.
    type media_type نوع media (رسانه) لینک شده به سند را مشخص می کند.

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

    تگ <a> از خصوصیت های عمومی در HTMLپشتیانی می کند.


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

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


     

    مثال

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

    Create hyperlinks
     چگونه یک لینک ایجاد کنیم.

    An image as a link
     استفاده از یک image (تصویر) به عنوان یک لینک.

    Open a link in a new browser window
     باز کردن یک لینک در پنجره جدید مرورگر.

    Create a mailto link
     لینک به یک پیام پست الکترونیک.

    Create a mailto link 2
     لینکی دیگر به یک پیام پست الکترونیک.

    Link to an element with a specified id
     لینک به یک عنصر با یک شناسه مشخص شده. (در HTML5ساپورت نمی شود)

    Link to a JavaScript
     چگونگی اضافه کردن ویژگی href در جاوا اسکریپت.


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

    آموزش HTML-لینک ها

    READ MORE
  • مثال (تگ abbr در HTML)

    استفاده از تگ <abbr> به شرح زیر:

    The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

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

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

    تگ <abbr> مخفف عبارات یا کلمه ای که از حروف اول کلمات دیگر ترکیب شده  را نشان می دهد، مانند "WWW" یا "NATO".

    شما توسط تگ <abbr> (مخفف) می توانید اطلاعات مفیدی را به مرورگرها، موتور جستجو، سیستم ترجمه و هجی کننده ها ارائه دهید.


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

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

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

    نکته: از title می توان استفاده کرد و عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد. (title یکی از ویژگی های عمومی تگ abbr در HTML است)


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

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


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

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


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

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

    READ MORE
  • مثال (تگ acronym در HTML)

    مخفف مشخص شده مطابق زیر:

    Can I get this <acronym title="as soon as possible">ASAP</acronym>?

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

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

    تگ <acronym> در HTML5پشتیبانی نمی شود شما می توانید از تگ <abbr> استفاده  کنید.

    تگ <acronym> مخفف یک عبارت را نشان می دهد.

    این مخفف ها می توانند طوری بیان شوندکه به نظر می رسد از اول خودشان یک کلمه بوده اند مانندNATO، NASA، ASAP و GUI.

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


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

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

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

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


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

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

    READ MORE
  • مثال (تگ address در HTML)

    <address>
    Written by <a href="mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید">Jon Doe</a>.<br>
    Visit us at:<br>
    مثال.com<br>
    Box 564, Disneyland<br>
    USA
    </address>

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

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

    تگ <address> اطلاعات مربوط به تماس نویسنده یا صاحب یک سند یا مقاله را نشان می دهد.

    اگر تگ <address> در داخل تگ <body> قرار گیرد، اطلاعات مربوط به تماس آن سند را نشان می دهد.

    اگر تگ <address> در داخل تگ <article> قرار گیرد، اطلاعات مربوط به تماس آن مقاله را نشان می دهد.

    متن داخل تگ <address> معمولا به صورت italic (مورب) نمایش داده می شود و اکثر مرورگر ها به ابتدا و انتهای عنصر آدرس یک خط فاصله اضافه می کنند.


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

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

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

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

    نکته: تگ <address> معمولا در کنار سایر اطلاعات در بخش <footer> قرار می گیرد.


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

    در HTML4.01 تگ <address> برای تگ <article> پشتیبانی نمی شود،در نتیجه محتویات آن به عنوان اطلاعات مربوط به تماس با نویسنده یا صاحب آن سند شناخته می شود.


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

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


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

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

    READ MORE
  • مثال (تگ applet در HTML)

    یک applet جاسازی شده در java:

    <applet code="Bubbles.class" width="350" height="350">
    Java applet that draws animated bubbles.
    </applet>

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

    تگ <applet> برای فراخوانی برنامه های کوچک جاوا که تنها سمت کاربر اجرا می شود و اپلت نام دارد استفاده می شود.

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

    تگ  <applet> یک applet، جاسازی شده (embedded) را تعریف می کند.


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

    عنصر          
    <applet> پشتیبانی نمی شود بله بله بله پشتیبانی نمی شود

    نکته: هنوز هم بعضی از مرورگرها تگ <applet> راساپورت می کنند اما نیاز به اضافه کردن plugin جانبی دارند.


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

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


    خصوصیت های الزامی

    خصوصیت مقدار توضیحات
    code URL نام فایل یک applet جاوا را اختصاص می دهد.
    object name اشاره به نمایش سریال (منبع)از یک applet  (یک منبع به applet ما اختصاص می دهد)

    خصوصیت های اختیاری

    خصوصیت مقدار توضیحات
    align left
    right
    top
    bottom
    middle
    baseline
    مشخص می کند applet مورد نظر، چگونه با توجه به عناصر موجود در محیط تراز یا تنظیم شود. 
    alt text اختصاص متن متناوب به applet مورد نظر
    archive URL محل قرارگیری از یک فایل بایگانی شده را مشخص می کند.
    codebase URL به applet مشخص شده در code، یک URL  نسبی پایه اختصاص می دهد.
    height pixels ارتفاع applet را مشخص می کند.
    hspace pixels فاصله های افقی موجود در اطراف یک applet را مشخص می کند.
    name name اختصاص نام برای یک applet (برای استفاده در script ها)
    vspace pixels فاصله های عمودی در اطراف یک applet را تعیین می کند.
    width pixels عرض applet را مشخص می کند.
    READ MORE
  • مثال (تگ area در HTML)

    یک image-map، با نواحی قابل کلیک:

    <img src="/planets.gif" width="145" height="126" alt="Planets"
    usemap="#planetmap">

    <map name="planetmap">
      <area shape="rect" coords="0,0,82,126" href="/sun.htm" alt="Sun">
      <area shape="circle" coords="90,58,3" href="/mercur.htm" alt="Mercury">
      <area shape="circle" coords="124,58,8" href="/venus.htm" alt="Venus">
    </map>

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

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

    تگ <area> منطقه ای را در داخل یک image-map مشخص می کند. (image-map به تصویری گفته می شود که بعضی قسمت های آن قابلیت کلیک کردن است)

    تگ <area> همیشه داخل یک تگ <map> قرار می گیرد.

    نکته:  صفت usemap در تگ <img> با صفت name در تگ <map> مرتبط هستند در نتیجه بین این دو تگ ارتباط برقرار می شود.


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

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

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

    در HTML5 یک سری ویژگی های جدید به این تگ اضافه شده و برخی از ویژگی های HTML4.01 در HTML5 پشتیبانی نمی شود.


    تفوت بین HTML و XHTML

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

    در XHTML تگ <area> باید با تگ پایانی خاتمه یابد.


    خصوصیت ها

     جدید در HTML5.

    خصوصیت مقدار توضیحات
    alt text یک متن جایگزین (alternate) برای area مشخص می کند و همراه با صفت href به کار می رود.
    coords coordinates مشخص کردن مختصات در area
    download filename مشخص کردن منبع دانلود زمانی که کاربر روی یک لینک کلیک می کند.
    href URL مشخص کردن مقصد لینک برای area
    hreflang language_code برای لینک کردن language به سند
    media media query مشخص می کند مقصد لینک شده برای چه media (رسانه) یا دستگاهی بهینه است.
    nohref value در HTML5 پشتیبانی نمی شود.
    مشخص می کند که <area> هیچ لینک مرتبطی ندارد.
    rel alternate
    author
    bookmark
    help
    license
    next
    nofollow
    noreferrer
    prefetch
    prev
    search
    tag
    رابطه بین سند رایج با سند لینک شده را مشخص می کند.
    shape default
    rect
    circle
    poly
    مخصوص شکل دادن به area
    target _blank
    _parent
    _self
    _top
    framename
    مشخص می کند URL(سند لینک شده) کجا باز شود.
    type media_type نوع media (رسانه) لینک شده را مشخص می کند.

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

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


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

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


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

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

    READ MORE
  • مثال (تگ article در HTML)

    <article>
      <h1>Google Chrome</h1>
      <p>Google Chrome is a free, open-source web browser developed by Google,
      released in 2008.</p>
    </article>

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

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

    تگ <article> محتوایی مستقل و جامع را مشخص می کند.

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

    منابع بالقوه برای تگ <article> عبارتند از:

    •  متن پست ها در فروم ها
    • متن مطالب جدید در وبلاگ ها
    • متن خبری در سایت های خبری
    • کامنت ها و نظرات

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

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

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

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

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


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

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


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

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

    READ MORE
  • مثال (تگ aside در HTML)

    <p>My family and I visited The Epcot center this summer.</p>

    <aside>
      <h4>Epcot Center</h4>
      <p>The Epcot Center is a theme park in Disney World, Florida.</p>
    </aside>

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

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

    از تگ aside به دو صورت می توان استفاده نمود:

    1. استفاده از تگ aside بصورت تو در تو در دیگر تگ ها: بعنوان مثال اگر از تگ aside داخل تگ articl استفاده می کنید، محتوایی که برای تگ aside در نظر می گیرید باید با محتوای تگ article ارتباط معنایی داشته باشد.
    2. استفاده از تگ aside برای نمایش ستون های سمت راست و چپ: در این حالت هر محتوایی که لازم است در ستون سمت راست و چپ  قرار گیرد را می توان در تگ aside قرار داد. بعنوان مثال در سایت بیاموز، از ستون سمت راست برای نمایش لیست مطالب، تبلیغات و... استفاده شده است.

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

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

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

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

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


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

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


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

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


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

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

    READ MORE
  • مثال (تگ audio در HTML)

    پخش صدا:

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

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

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

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

    در حال حاضر سه نوع فرمت صوتی در تگ <audio> پشتیبانی می شود که عبارتند از: MP3 ،Wav و Ogg:

    Browser MP3 Wav Ogg
    Internet Explorer YES NO NO
    Chrome YES YES YES
    Firefox NO
    Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3
    YES YES
    Safari YES YES NO
    Opera NO YES YES

    انواع MIME برای فرمت های صوتی:

    Format MIME-type
    MP3 audio/mpeg
    Ogg audio/ogg
    Wav audio/wav

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

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

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

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

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


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

    نکته: هر نوشته ای که بین <audio> و <audio/> قرار گیرد، در مرورگر هایی که این تگ را پشتیبانی نمی کنند نمایش داده خواهد شد.


    خصوصیت ها

    جدید در HTML5.

    خصوصیت مقدار توضیحات
    autoplay autoplay مشخص می کند که فایل صوتی مورد نظر به محض آماده شدن اجرا شود.
    controls controls مشخص می کند که کنترل های صوتی نمایش داده شوند. (مانند دکمه play ،pause و غیره)
    loop loop مشخص می کند که فایل صوتی هر بار پس از اتمام، دوباره اجرا شود.
    muted muted مشخص می کند که خروجی صدا خاموش باشد.
    preload auto
    metadata
    none
    مشخص می کند که فایل صوتی در صورت نیاز چگونه بارگذاری شود.
    src URL URL مربوط به فایل صوتی را مشخص می کند.

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

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


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

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


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

     آموزش HTML-پخش صدا

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

    READ MORE
  • مثال (تگ b در HTML)

    <p>This is normal text - <b>and this is bold text</b>.</p>

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

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

    تگ <b> بخشی از متن را برجسته نمایش می دهد.


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

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

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

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


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

    نکته: با توجه به مشخصات HTML5، تگ <b> باید به عنوان  آخرین راه حلی باشد که به کار می رود و در شرایطی از آن استفاده می کنیم که هیچ تگ مناسب تری موجود نباشد. در HTML5 برای عناوین از تگ ها <h1> تا <h6> ، برای نمایش تاکید شده متن از تگ <em>، برای متن های مهم از تگ <strong> و برای متن های هایلایت شده از تگ <mark> استفاده می کنیم.

    نکته:همچنین می توان از خاصیت font-weight در CSS، جهت برجسته کردن متن استفاده کرد.


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

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


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

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

    READ MORE
  • مثال (تگ base در HTML)

    مشخص کردن یک URL پیش فرض برای تمام لینک های موجود در صفحه:

    <head>
    <base href="http://www.beyamooz.com/images/" target="_blank">
    </head>

    <body>
    <img src="/beyamooz_logo.png" width="24" height="39" alt="Stickman">
    <a href="http://www.beyamooz.com">beyamopz</a>
    </body>

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

    تعریف و کاربرد

    تگ <base> برای تمام URL های نسبی موجود در سند، یک URL هدف و پایه تعیین می کند.

    در هرسند حد اکثر یک <base> می تواند وجود داشته باشد و این تگ باید در <head> قرار گیرد.


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

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

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

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

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


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

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


    تفاوت بین HTML و XHTML

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

    در XHTML تگ <base> باید با تگ پایانی خاتمه یابد.


    خصوصیت ها

    خصوصیت مقدار توضیحات
    href URL برای تمام URL های نسبی موجود در صفحه یک URL پایه مشخص می کند.
    target _blank
    _parent
    _self
    _top
    framename
    برای تمام لینک ها و فرم های موجود در صفحه یک target از قبل تعیین شده مشخص می کند.

    ویژگی های عمومی and Events

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


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

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


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

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

    READ MORE
  • مثال (تگ basefont در HTML)

    مشخص کردن text-color و font-size به طور پیش فرض برای متن در صفحه:

    <head>
    <basefont color="red" size="5">
    </head>

    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>

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

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

    تگ <basefont> در HTML5 پشتیبانی نمی شود، می توانید از CSSاستفاده کنید.

    تگ <basefont> به طور پیش فرض رنگ، سایز و فونت را به تمام متون موجود در سند اختصاص می دهد.


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

    عنصر          
    <basefont> پشتیبانی نمی شود پشتیبانی نمی شود پشتیبانی نمی شود پشتیبانی نمی شود پشتیبانی نمی شود

    نکته: تگ  <basefont> فقط در  Internet Explorer 9 و نسخه های قبل تر از آن را پشتیبانی می کند.


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

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


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

    مثال CSS: نحوه ایجاد text-color از پیش تعیین شده  برای یک صفحه 

    مثال CSS: نحوه ایجاد font-family از پیش تعیین شده برای یک صفحه 

    مثال CSS: نحوه ایجاد font-size از پیش تعیین شده برای یک صفحه

    مطالعه بیشتر درباره ی: آموزش CSS-استایل دهی متن و آموزش CSS-استایل دهی فونت


    خصوصیت های اختیاری

    خصوصیت مقدار توضیحات
    color color در HTML5 پشتیبانی نمی شود.
     مشخص کردن رنگ از پیش تعیین شده برای متن های موجود در سند
    face font_family در HTML5 پشتیبانی نمی شود.
     مشخص کردن یک فونت از پیش تعیین شده برای متن های موجود در سند
    size number در HTML5 پشتیبانی نمی شود.
     مشخص کردن سایز از پیش تعیین شده برای متن های موجود در سند
    READ MORE
  • مثال (تگ bdi در HTML)

    نام های کاربری خارج از زبان اصلی صفحه:

    <ul>
    <li>User <bdi>hrefs</bdi>: 60 points</li>
    <li>User <bdi>jdoe</bdi>: 80 points</li>
    <li>User <bdi>إیان</bdi>: 90 points</li>
    </ul>

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

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

     bdi مخفف Bi-Directiona Isolationl  یعنی جدا سازی دو جهته.

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

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


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

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

    عنصر          
    <bdi> 16.0 پشتیبانی نمی شود 10.0 پشتیبانی نمی شود پشتیبانی نمی شود

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

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


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

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


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

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

    READ MORE
  • مثال (تگ bdo در HTML)

    نمایش برعکس یک متن:

    <bdo dir="rtl">
    This text will go right-to-left.
    </bdo>

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

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

    bdo سرنام واژگان Bi-Directional Override بحساب می آید.

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


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

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

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

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


    خصوصیت ها

    خصوصیت مقدار توضیحات
    dir ltr
    rtl
    الزامی است و جهت متن موجود در داخل تگ <bdo> را مشخص می کند.

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

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


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

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

    READ MORE
  • مثال (تگ big در HTML)

    متن بزرگتر از اندازه ی نرمال:

    <p><big>Bigger text</big></p>

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

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

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

    تگ <big> قسمتی از متن را درشتر نشان می دهد.


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

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

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

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


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

    مثال CSS: مشخص کردنfont-sizes مختلف برای عناصر HTML

    مطالعه بیشتر درباره ی: آموزش CSS-استایل دهی فونت .

    READ MORE
  • مثال (تگ blockquote در HTML)

    بخشی که به عنوان نقل از منبع دیگر آورده شده:

    <blockquote cite="http://www.worldwildlife.org/who/index.html">
    For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
    </blockquote>

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

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

    تگ <blockquote> تعیین کننده بخشی که به نقل از منبع دیگر آورده شده .

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


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

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

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

    نکته: برای نقل قول های کوتاه به صورت درون خطی از تگ <q> استفاده کنید.


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

    در HTML 4.01، تگ <blockquote> یک نقل قول طولانی را مشخص می کند.

    در HTML5، تگ <blockquote> بخشی که به نقل از منبع دیگری است را مشخص می کند.


    تفاوت بین HTML و XHTML

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

    <blockquote>
    <p>Here is a long quotation here is a long quotation.</p>
    </blockquote>


    خصوصیت ها

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

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

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


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

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


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

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

    READ MORE
  • مثال (تگ body در HTML)

    یک مثال ساده با حداقل تگ های مورد نیاز:

    <html>
    <head>
    <title>Title of the document</title>
    </head>

    <body>
    The content of the document......
    </body>

    </html>

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

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

    تگ <body> بدنه یک سند HTMLرا توصیف می کند.

    تگ <body> شامل تمام محتویات یک سند است. مانند:متن، عکس، لینک ها، جدول ها و... 


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

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

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

    در HTML5 تمام ویژگی های طرح (layout attributes) حذف شده است.


    خصوصیت ها

    خصوصیت مقدار توضیحات
    alink color در HTML5 پشتیبانی نمی شود.
     مشخص کننده رنگ مربوط به یک لینک فعال در سند
    background URL در HTML5 پشتیبانی نمی شود.
     مشخص کننده یک تصویر پس زمینه برای سند
    bgcolor color در HTML5 پشتیبانی نمی شود.
     
    مشخص کننده یک رنگ پس زمینه از سند
    link color در HTML5 پشتیبانی نمی شود.
     
    مشخص کننده رنگ مربوط به لینک های موجود در سند
    text color در HTML5 پشتیبانی نمی شود.
     
    مشخص کننده رنگ مربوط به متن های موجود در سند
    vlink color در HTML5 پشتیبانی نمی شود.
     
    مشخص کننده رنگ مربوط به لینک های مشاهده شده در سند

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

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


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

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


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

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

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

    READ MORE
  • مثال (تگ br در HTML)

    انتقال قسمتی از متن به خط بعدی:

    This text contains<br>a line break.

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

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

    تگ <br> یک خط جدید ایجاد می کند، و ادامه متن را به خط بعدی انتقال می دهد. 

    تگ <br> یک عنصر تهی در HTMLاست. این عنصر دارای تگ پایان نیست.


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

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

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

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

    توجه: از تگ <br> برای رفتن به خط جدید و بدون اینکه پاراگراف جدیدی را شروع کنیم استفاده می شود.


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

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


    تفاوت بین HTML و XHTML

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

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


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

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


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

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


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

     آموزش HTML-پاراگراف ها 

    READ MORE
  • مثال (تگ button در HTML)

    ایجاد یک دکمه قابل کلیک شدن:

    <button type="button">Click Me!</button>

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

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

    تگ <button> یک دکمه  قابل کلیک کردن را به وجود می آورد.

    تفاوت دکمه ایجاد شده با تگ<button> و دکمه ایجاد شده با تگ <input> در این است که داخل تگ <button> می توان محتوایی شامل متن یا تصویر گذاشت.

    نکته: همیشه نوع ویژگی ها (attribute) عنصر را مشخص کنید، زیرا مرورگر های مختلف مقادیر مختلفی را به طور پیش فرض برای  عنصر <button> به کار می برند.


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

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

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

    نکته: اگر در یک فرم HTML، از تگ <button> استفاده کنید، مرورگر های مختلف ممکن است مقادیر متفاوتی رو ارسال کنند، به همین دلیل در فرم ها از تگ <input> استفاده کنید.


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

     HTML5  شامل ویژگی ها (attribute) جدیدی است از جمله:autofocus ،form ،formaction ،formenctypy ،formmethod formnovalidate و formtarget.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    autofocus autofocus مشخص می کند یک button (دکمه) بطور خودکار در کانون توجه قرار می گیرد زمانی که صفحه load می شود.
    disabled disabled

     یک button (دکمه) غیر فعال را مشخص می کند.

    form form_id مشخص می کند که یک button متعلق به کدام فرم یا فرم ها می باشد.
    formaction URL مشخص کننده این است که هنگام ارسال یک فرم داده های مربوط به آن به کجا فرستاده شوند. (فقط برای نوع submit)
    formenctype application/x-www-form-urlencoded
    multipart/form-data
    text/plain
    مشخص کننده این است که داده های مربوط به فرم پیش از ارسال آن فرم چگونه رمزگذاری شود. (فقط برای نوع submit)
    formmethod get
    post
    مشخص کننده این است که داده های مربوط به یک فرم چگونه فرستاده شوند(با استفاده از کدام متد HTTP ). (فقط برای نوع submit)
    formnovalidate formnovalidate مشخص کننده این است که داده های یک فرم احتیاجی به سنجش اعتبار ندارند. (فقط برای نوع submit)
    formtarget _blank
    _self
    _parent
    _top
    framename
    مشخص کننده این است که پیغام کجا نمایش داده شود پس از اینکه فرم ارسال می شود. (فقط برای نوع submit)
    name name مشخص کننده یک نام برای button
    type button
    reset
    submit
    مشخص کننده نوع button
    value text مشخص کننده یک مقدار اولیه برای button

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

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


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

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


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

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

    READ MORE
  • مثال (تگ canvas در HTML)

    رسم یک مربع قرمز شناور از طریق تگ<canvas> :

    <canvas id="myCanvas"></canvas>

    <script>
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,80);
    </script>

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

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

    تگ <canvas> به منظور رسم گرافیک های شناورکه از طریق برنامه نویسی (معمولا زبان JavaScript) به کار می رود.

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


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

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

    عنصر          
    <canvas> 4.0 9.0 2.0 3.1 9.0

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

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


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

    نکته: هر گونه متن داخل تگ <canvas> در مرورگر هایی که از آن پشتیبانی نمی کنند نمایش داده می شود.

    نکته: جهت مشاهده مرجع کامل خواص و روش های قابل استفاده با canvas می توانید رجوع کنید به:آموزش HTML5-عنصر canvas 


    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    height pixels مشخص کننده ارتفاع canvas
    width pixels مشخص کننده عرض canvas

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

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


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

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

    READ MORE
  • مثال (تگ caption در HTML)

    یک جدول با عنوان:

    <table>
      <caption>Monthly savings</caption>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>

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

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

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

    تگ <caption> باید بلافاصله بعد از تگ <table> قرار گیرد.

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

    نکته: به طور پیش فرض عنوان جدول در وسط و بالای جدول قرار می گیرد. اگر چه با استفاده از خصوصیت text-align و خصوصیت caption-side در CSS می توان عنوان را در جای دیگر تراز کرد.


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

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

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

    صفت align در HTML5 حذف شده است.


    خصوصیت ها

    خصوصیت مقدار توضیحات
    align left
    right
    top
    bottom
    در HTML5 پشتیبانی نمی شود.
     مشخص می کند که عنوان در کدام جهت تراز شود.

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

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


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

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

    READ MORE
  • مثال (تگ center در HTML)

    تراز متن در مرکز صفحه HTML:

    <center>This text will be center-aligned.</center>

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

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

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

    تگ <center> متن را در وسط صفحه تراز می کند.


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

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

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

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


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

    مثال: Center-align text

    مطالعه بیشتر برای تراز کردن متن با استفاده از: آموزش CSS-استایل دهی متن 

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