فرمول نویسی در HTML5

منتشرشده در آموزش HTML5
یکشنبه, 12 بهمن 1393 ساعت 17:07

فرمول نویسی در HTML5

در HTML5 عنصر جدیدی به نام MathML معرفی شده است، که امکان قرار دادن فرمول های ریاضی در صفحات را با استفاده از تگ های <math>...</math> فراهم می کند.

بسیاری از مرورگرهای وب می توانند تگ های فرمول نویسی HTML5 را نمایش دهند. اگر مرور گر شما از MathML پشتیبانی نمی کند، ما پیشنهاد می کنیم از آخرین نسخه مرورگر Firefox استفاده کنید.

نمونه ای از فرمول نویسی در صفحات HTML:

در پایین نمونه ای از کدهای فرمول نویسی در یک سند HTML5 را مشاهده می کنید.

<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Pythagorean theorem</title>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <msup><mi>a</mi><mn>2</mn></msup>
        <mo>+</mo>
        <msup><mi>b</mi><mn>2</mn></msup>
        <mo>=</mo>
        <msup><mi>c</mi><mn>2</mn></msup>
      </mrow>
    </math>
  </body>
</html> 

نتیجه کد بالا به این شکل است:

MathML in HTML5

توجه داشته باشید که از فایرفاکس3.5 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.

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

در پایین نمونه ای قواعد نوشتاری مربوط به استفاده از کاراکترها و InvisibleTimes در فرمول نویسی MathML را مشاهده می کنید.

<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>MathML Examples</title>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
       <mrow>
          <mrow>
             <msup>
                <mi>x</mi>
                <mn>2</mn>
             </msup>
             <mo>+</mo>
             <mrow>
                <mn>4</mn>
                <mo>⁢</mo>
                <mi>x</mi>
             </mrow>
             <mo>+</mo>
             <mn>4</mn>
          </mrow>
             <mo>=</mo>
             <mn>0</mn>
        </mrow>
   </math>
</body>
</html>

نتیجه کد بالا به این شکل است:

MathML in HTML5

توجه داشته باشید که اگر قادر به مشاهده نتیجه به صورت بالا نمی باشید، از فایرفاکس3.5 (Firefox) یا نسخه های بالاتراستفاه کنید.

نمونه ای از ایجااد ماتریس در صفحات HTML:

در پایین نمونه ای از یک سند HTML5 را مشاهده می کنید که یک ماتریس ساده 2x2 راایجاد می کند.

<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>MathML Examples</title>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
       <mrow>
          <mi>A</mi>
          <mo>=</mo>
          <mfenced open="[" close="]">
             <mtable>
                <mtr>
                   <mtd><mi>x</mi></mtd>
                   <mtd><mi>y</mi></mtd>
                </mtr>
                <mtr>
                   <mtd><mi>z</mi></mtd>
                   <mtd><mi>w</mi></mtd>
                </mtr>
             </mtable>
         </mfenced>
      </mrow>
   </math>
</body>
</html> 

نتیجه کد بالا به این شکل است:

Matrix in Html5
توجه داشته باشید که اگر قادر به مشاهده نتیجه به صورت بالا نمی باشید، از فایرفاکس3.5 (Firefox) یا نسخه های بالاتراستفاه کنید.

 

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

عضویت در وب استیودنت

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

با ما در ارتباط باشید

سامانه پیامک: 50004657100

تلفن: 02122616859

دورنگار: 02189775650

ایمیل: info @ WebStudent.ir

تارنما: webstudent.ir

انجمن: forum.webstudent.ir

 

JoomShaper