Cara membuat rumus matematika di web
Kebutuhan untuk menyajikan rumus atau persamaan matematika dalam sebuah website, pada dasarnya dapat dilakukan dengan menggunakan MathML. Namun penggunaan MathML tidak didukung oleh semua browser, alhasil ketika buka dibrowser A dengan di browser B, maka akan ditampilkan hasil yang berbeda pula.
Disamping MathML, kita juga dapat menggunakan MathJax yang merupakan sebuah librari khusus (javascript) yang kaya akan fitur pembuatan persamaan matematika. Namun dalam tutorial kali ini, kita hanya membahas bawaan dari tag HTML.
Mengenal tag <sub> pada HTML
Tag <sub> pada html berfungsi sebagai teks yang bersifat subscript. Maksud dari teks subscript adalah teks yang muncul setengah karakter di bawah garis normal, dan kadang-kadang diberikan dalam font yang lebih kecil. Subscript teks dapat digunakan untuk dalam kebutuhan persamaan matematika ataupun dalam rumus kimia seperti : NH4OH . Jadi 4 disebut dengan subscript.Berikut ini contoh penggunaan tag <sub> :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Formula Kimia</title>
</head>
<body>
<h3>Larutan Amonium Hidroksida merupakan larutan yang bersifat basa</h3>
<p>Formula: NH<sub>4</sub>OH</p>
</body>
</html> Outputnya ditunjukkan oleh Gambar.1 dibawah ini :
Mengenal tag <sup> pada HTML
Tag<sup> pada html berfungsi sebagai teks yang bersifat superscript, yang artinya penulisannya akan ditempakan pada bagian atas seperti kita menulis pangkat dalam persamaan matematika : x2 . Jadi 2 disebut dengan superscript.Berikut ini contoh penggunaan tag <sup> :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Formula Kimia</title>
</head>
<body>
<h3>Larutan Amonium Hidroksida merupakan larutan yang bersifat basa</h3>
<p>Formula: NH<sub>4</sub>OH</p>
<p>Density: 880 kg/m<sup>3</sup></p>
</body>
</html> Outputnya ditunjukkan oleh Gambar.2 dibawah ini :
Mengenal tag<var> pada HTML
Penggunaan tag<var> untuk menyatakan variabel dalam sebuah persamaan matematika seperti :(a+b)2= a2 + b2 + 2abSepintas jika kita melihat, ekspresi matematika tersebut dapat kita buat dengan menggunakan tag
<sup>, tanpa menggunakan tag <var>. Namun yang membedakannya adalah hasil yang ditampilkan dengan menggunakan tag <var> akan tercetak secara italic (miring).Berikut ini contoh penggunaan tag
<var> :<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MathML Examples</title>
</head>
<body>
<h4>Persamaan matematika dengan menggunakan tag<var></h4>
<p><var>(a+b)<sup>2</sup></var>= <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> + <var>2ab</var></p>
<h4>Tanpa menggunakan tag <var></h4>
<p>(a+b)<sup>2</sup>= a<sup>2</sup> + b<sup>2</sup>+ 2ab</p>
</body>
</html> Outputnya ditunjukkan oleh Gambar.3 dibawah ini :
Menggunakan operator matematika pada HTML
Pada penjelasan diatas, kita sudah membahas beserta contoh dengan menggunakantag<sub>, tag <sup> dan tag <var>. Nah sekarang bagaimana seandainya kita ingin menggunakan beberap operator matematika seperti "tidak sama dengan", "lebih besar" dsb.Pada HTML, sudah terdapat operator-operator matematika yang dapat kita gunakan. Untuk melihat kode penulisan untuk tiap operator matematika, silahkan baca tutorial : Memahami Operator Matematika di HTML.
Contoh penerapan operator matematika :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MathML Examples</title>
</head>
<body>
<h4>Menggunakan operator matematika</h4>
<p><var>(a+b)<sup>2</sup></var><var> ≠</var> <var>a(a+b)</var></p>
<h4>Jika diketahui x=10 dan y=5, maka</h4>
<p><var>(x+y)<sup>2</sup>+5</var><var> > </var><var>(x-y)<sup>2</sup>+25</var></p>
</body>
</html> Outputnya ditunjukkan oleh Gambar.4 dibawah ini :
Kesimpulan :
Pada dasarnya dalam HTML sudah mengcover beberap kebutuhan kita dalam pembuatan persamaan matematika ataupun dalam rumus kimia dalam bentuk sederhana. Namun jika mengharapkan hasil yang lebih sempurna persamaannya, kita dapat menggunakan MathJax atau MathML.
