سبد (0)

فیلم آموزش html

  • SSE چیست؟

    23 شهریور 1397

    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

  • آموزش HTML5

    02 آذر 1399

    آموزش HTML5 (اچ تی ام ال 5) - معرفی

    HTML5 (اچ تی ام ال 5) یک استاندارد جدید برای HTMLاست.

    نسخه قبلی HTML یعنی HTML 4.01 در سال 1999 آمده است و از آن سال تا کنون، وب تغییرات زیادی کرده است.

    HTML5(اچ تی ام ال 5) هنوز در حال پیشرفت است. با این حال مرورگرهای اصلی، بیشتر عناصر و APIهای جدید در HTML5 (اچ تی ام ال 5) را پشتیبانی می کنند.

    آموزش HTML5 (اچ تی ام ال 5) با استفاده از مثال ها در هر فصل

    در این خودآموز، برای آموزش HTML از صدها مثال استفاده شده است.

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

    مثال (مقدمه آموزش HTML5)

    <!DOCTYPE HTML>
    <html>
    <body>

    <video width="320" height="240" controls>
    <source src="/movie.mp4" type="video/mp4">
    <source src="/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>

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

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

    HTML5 (اچ تی ام ال 5) چگونه شروع شد؟

    HTML5 (اچ تی ام ال 5) یک همکاری بین W3C و WHATWG است و در سال 2006 تصمیم گرفتند که یک نسخه جدید از HTML را ایجاد کنند.

    • W3C مخفف World Wide Web Consortium است و روی XHTML 2.0 مشغول کار بوده است.
    • WHATWG مخفف Web Hypertext Application Technology Working Group است و روی وب فرم ها و Applicationها مشغول کار بوده است.

    بعضی از قوانین که در HTML5 (اچ تی ام ال 5) بنا نهاده شد:

    • ویژگی های جدید باید براساس DOM, CSS, HTML و JavaScript باشد.
    • کاهش نیاز به Pluginهای خارجی (مانند Flash)
    • بهبود مدیریت خطا
    • افزایش نشانه گذاری(markup) برای کاهش اسکریپت نویسی در صفحات وب
    • HTML5 (اچ تی ام ال 5) باید مستقل از دستگاه باشد.
    • پروسه های پیشرفت باید برای عموم قابل رویت باشد.

    اعلان <DOCTYPE!>

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

    در HTML5 (اچ تی ام ال 5) تنها یک اعلان <DOCTYPE!> وجود دارد و بسیار ساده است:

    <!DOCTYPE html>

    آموزش یک مثال ساده

    در مثال زیر، یک صفحه HTML5 (اچ تی ام ال 5) با حداقل تگ های مورد نیاز آورده شده است:

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

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

    </html>

    آموزش ویژگیهای جدید در HTML5 (اچ تی ام ال 5)

    بعضی از ویژگیهای خیلی جالب که در HTML5 (اچ تی ام ال 5) آموزش خواهید دید:

    • آموزش عنصر <canvas> برای نقاشی دو بعدی
    • آموزش عنصر <video> و <audio> برای پخش صدا و تصویر
    • آموزش ذخیره سازی محلی (Local)
    • آموزش عناصر <article>, <footer>, <header>, <nav>, <section> برای مشخص کردن محتوی
    • آموزش ابزارهای جدید برای ساخت فرم، مانند: تقویم، تاریخ، زمان، ایمیل، آدرس وب و جستجو

    پشتیبانی از HTML5 (اچ تی ام ال 5) در مرورگرها

    HTML5 (اچ تی ام ال 5) هنوز یک استاندارد رسمی نیست، و مرورگرها بصورت کامل آنرا پشتیبانی نمی کنند.

    اما مرورگرهای اصلی (Safari, Chrome, Firefox, Opera, Internet Explorer) ویژگی های جدید HTML5 (اچ تی ام ال 5) را در نسخه های جدیدشان اضافه کرده اند.

    READ MORE

  • آموزش XHTML

    02 آذر 1399

    XHTML در واقع HTMLی است که مانند XML نوشته شده است.

    XHTML چیست؟

    Wiki

    • XHTML مخفف کلمات EXtensible HyperText Markup Language (زبان علامتگذاری ابرمتن قابل توسعه) می باشد.
    • XHTML تقریبا مشابه HTML 4.01 می باشد.
    • XHTML نسخه سخت گیرتر و تمیزتر HTML می باشد.
    • XHTML در واقع HTMLی است که مانند XML تعریف شده است.
    • XHTML در سال 2000 توسط W3C پیشنهاد شد.
    • XHTML توسط اکثر مرورگرها پشتیبانی می شود.

    چرا XHTML؟

    Wiki

    بسیاری از صفحات در اینترنت، حاوی کدهای HTML نادرست هستند.

    کد HTML زیر با توجه به اینکه از قوانین HTML پیروی نکرده (تگ <h1> و <p> بسته نشده) باز هم به درستی نمایش داده خواهد شد:

    <html>
    <head>
    <title>This is bad HTML</title>
    <body>
    <h1>Bad HTML
    <p>This is a paragraph
    </body>

    XML سیستم گرامر ایجاد زبان های علامتگذاری دلخواه است و سندها باید به درستی و با فرمت درست نشانه گذاری شوند.

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

    بنابراین با ترکیب توانایی های HTML و XML نسخه XHTML توسعه یافت.

    مهم ترین تفاوت های بین XHTML و HTML

    Wiki

    ساختار سند:

    • آوردن DOCTYPE در XHTML الزامی است.
    • آوردن خصوصیت xmlns در تگ <html> الزامی است.
    • آوردن تگ های <html>، <head>، <title> و  <body> الزامی می باشد.

    نحوه نوشتن عناصر:

    • برای استفاده عناصر به صورت تودرتو باید نظم آنها حفظ شود.
    • عناصر XHTML باید همیشه بسته شوند.
    • عناصر XHTML باید با حروف کوچک نوشته شوند.
    • یک سند XHTML باید یک عنصر ریشه ای داشته باشند. (کل عناصر موجود در سند، در یک عنصر ریشه ای قرار داده شوند)

    نحوه نوشتن خصوصیت ها:

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

    نوشتن <!...DOCTYPE> الزامی است

    Wiki

    یک سند XHTML باید حاوی اعلان DOCTYPE باشد.

    عناصر <html>، <head>، <title> و <body> باید در سند آورده شوند و نوشتن خصوصیت xmlns در تگ <html> الزامی است.

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

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

    <html xmlns="http://www.w3.org/1999/xhtml">

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

    <body>
    ......
    </body>

    </html>

    نحوه تبدیل HTML به XHTML

    Wiki

    1. یک <!DOCTYPE> از XHTML به خط اول هر صفحه اضافه کنید.
    2. خصوصیت xmlns را به عناصر html هر صفحه اضافه کنیم.
    3. تمامی نام عناصر را به حروف کوچک تغییر دهیم.
    4. تمای تگ های تهی را ببنیدیم.
    5. تمامی نام های عناصر را به حروف کوچک تغییر دهیم.
    6. تمامی مقادیر عناصر را داخل دابل کوتیشن بگذارید.

    اعتبار سنیجی XHTML با استفاده از W3C

    Wiki

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

    READ MORE

  • اجرای کدهای javascript در پشت پرده

    23 شهریور 1397

    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

    17 شهریور 1397

    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

    23 شهریور 1397

    مثال (اعلان 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

    23 شهریور 1397

    انواع ورودی جدید در 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

    23 شهریور 1397

    در 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

    18 شهریور 1397

    صداها در 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

    23 شهریور 1397

    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 در HTML

    23 شهریور 1397

    مثال

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

    <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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

    23 شهریور 1397

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

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

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