آموزش HTML - زبان علامت‌گذاری ریاضی(MathML)

زبان MathML در HTML با نام کامل (Mathematical Markup Language) برای قرار دادن معادلات ریاضی و معادلات واکنش‌های شیمیایی در سند HTML استفاده می‌شود.

زبان علامت‌گذاری ریاضی (MathML)

• زبان علامت‌گذاری ریاضی یک زبان علامت‌گذاری مبتنی بر XML است که در سال ۲۰۱۵ معرفی شد.
• این زبان به نمایش فرمول‌های پیچیده ریاضی در قالبی قابل خواندن برای انسان کمک می‌کند.
• این نحوه نمایش همچنین به نرم‌افزارها کمک می‌کند تا درک بهتری از زمینه و مفهوم معادله داشته باشند.
• برای گنجاندن عناصر MathML درون یک صفحه وب، می‌توانیم از تگ <math> در HTML استفاده کنیم.

عناصر MathML در HTML

جدول زیر شامل فهرستی از عناصر MathML است که در HTML استفاده می‌شوند:

هدف از MathML در HTML

استفاده از MathML برای نمایش فرمول‌ها در صفحات وب فنی و ریاضی بسیار مفید است. این موضوع باعث ارائه شفاف محتوای ریاضی در محتواهای یادگیری الکترونیکی، مقالات علمی و الگوریتم‌های پیچیده می‌شود.

زبان MathML فقط در مرورگرهای گوگل کروم و موزیلا فایرفاکس پشتیبانی می‌شود. لطفاً قبل از آزمایش، از پشتیبانی مرورگر خود از MathML اطمینان حاصل کنید.

مثال‌های MathML در HTML

در ادامه چند مثال آورده شده است که نحوه استفاده از عناصر MathML در HTML را نشان می‌دهد.

قضیه فیثاغورس با استفاده از MathML

در این مثال، معادله فیثاغورس را با استفاده از کد HTML می‌سازیم.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Pythagorean theorem</title>
</head>
<body>
   <math>
      <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

در این مثال یک معادله درجه دوم را با استفاده از کد HTML می‌سازیم.

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>
<body>
   <math>
      <mrow>
         <msup>
            <mi>x</mi>
            <mn>2</mn>
         </msup>
         
         <mo>+</mo>
         
         <mn>4</mn>
         <!-- Invisible times operator -->
         <mo>⁢</mo> 
         <mi>x</mi>
         
         <mo>+</mo>
         
         <mn>4</mn>
         
         <mo>=</mo>
         <mn>0</mn>
      </mrow>
   </math>
</body>
</html>

ساخت ماتریس در MathML

مثال زیر را در نظر بگیرید که برای نمایش یک ماتریس ساده ۲ در ۲ استفاده می‌شود:

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>
<body>
   <math>
      <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>

معادله اکسایش-کاهش (Redox) در MathML

در ادامه مثالی از یک معادله شیمیایی اکسایش-کاهش با استفاده از MathML آورده شده است.

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>

<body>
      <math>
      <mrow>
         <msub>
            <mtext>Zn</mtext>
         </msub>
         <mo>+</mo>
         <msub>
            <mrow>
            <mtext>CuSO</mtext>
            <mn>4</mn>
            </mrow>
         </msub>
         
         <!-- Arrow Symbol -->
         <mo>→</mo>
         
         <msub>
            <mrow>
            <mtext>ZnSO</mtext>
            <mn>4</mn>
            </mrow>
         </msub>
         
         <mo>+</mo>
         
         <msub>
            <mtext>Cu</mtext>
         </msub>
      </mrow>
      </math>

</body>
</html>