panduan belajar html dasar - membuat persamaan matematis di html

Cara Membuat Persamaan Matematika di HTML Menggunakan Tag sup dan sub

Pasti Anda pernah melihat pada sebuah website terdapat pangkat (superscript) seperti x2 ataupun rumus-rumus kimia (subscript) seperti O2. Sedangkan, untuk membuat bentuk tulisan semacam itu diperlukan kode HTML tambahan.

Terkadang, kita perlu membuat bentuk persamaan matematis pada website supaya memudahkan pengunjung untuk membaca persamaan matematis tersebut. Di HTML, kita mempunyai tag <sup> maupun tag <sub> yang berfungsi untuk membuat tulisan menjadi ke atas ataupun ke bawah. Langsung saja kita bahas.

Cara Membuat Pangkat di HTML Dengan Tag <sup>

Cara untuk membuat pangkat pada website adalah dengan menggunakan tag <sup>. Tag <sup> memiliki kepanjangan, yaitu superscript yang artinya tulisan di atas. Cara penulisannya pun cukup mudah. Pertama, Anda perlu membuat file dengan ekstensi .html. Kemudian tuliskan kode program seperti di bawah.

<html>
<head>
<title>Membuat Persamaan Matematika di HTML</title>
</head>
<body>
Luas tanah ini = 250m<sup>2</sup>

Nilai dari 9<sup>2</sup> = 81
</body>
</html>

Sangatlah mudah kan membuat pangkat di HTML? Pastikan untuk membuat tag penutup untuk membatasi tulisan mana yang akan dibuat superscript. Berikut hasil dari kode program di atas.

belajar membuat pangkat di html menggunakan tag sup

Cara Membuat Rumus Kimia di HTML Menggunakan Tag <sub>

Tag <sub> ini merupakan kebalikan dari tag <sup>. Jika tag <sup> membuat tulisan menjadi di atas, maka tag <sub> membuat tulisan menjadi di bawah seperti rumus kimia. Tag <sub> memiliki kepanjangan yaitu subscript. Untuk penulisannya pun hampir sama dengan tag <sup>. Berikut adalah contoh kode programnya.

<html>
<head>
<title>Makinrajin - Membuat Rumus Kimia di HTML</title>
</head>
<body>
Rumus kimia dari Adamantana = C<sub>10</sub>H<sub>16</sub>
</br>
</body>
</html>

Jika Anda berhasil, maka hasilnya akan muncul seperti di bawah ini:

Membuat rumus kimia dengan HTML menggunakan tag sub

Nah, itulah cara membuat tulisan pangkat dan rumus kimia menggunakan tag HTML. Sebenarnya, Anda juga bisa mengguakan persamaan matematis tersebut dengan menggunakan CSS. Berikut adalah potongan kode CSS nya.

CSS untuk superscript (pangkat) :

span.pangkat
{
vertical-align: super;
font-size: x-small;
}

Itu adalah kode CSS nya. Nah, kemudian Anda menggunakan class “pangkat” pada tag <span> untuk membungkus pangkatnya. Jika belum paham CSS, Anda bisa belajar CSS melalui panduan di bawah ini :

Panduan Belajar CSS Dasar Untuk Pemula

panduan belajar css dasar untuk pemula

Anda bisa mengubah value x-small menjadi xx-small, small, ataupun smaller. Jika Anda menggunakan xx-small, maka tulisan yang dihasilkan akan lebih kecil. Jika ingin membuat subscript dengan menggunakan CSS, maka Anda hanya perlu mengganti tulisan super dengan tulisan sub.

Sekian panduan mudah membuat persamaan matematika di HTML dan CSS. Apabila ada yang ingin ditanyakan, silahkan tanyakan melalui kolom komentar. Terima kasih

Anda ingin memiliki web hosting dengan kualitas server tercepat di Indonesia ? Klik di sini

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *