Mukadimah
Bagi blogger yang memuat tulisan matematis, bingkai semacam di samping ini tentu diperlukan untuk melengkapi unsur keindahan pada suatu tulisan. Dua orang teman, ini dan itu, mengingatkan saya akan hal itu.
Di dalam LATEX, dalam modus matematis bentuk tayang (display), bingkai semacam itu tentu dapat dibuat dengan menggunakan perintah \boxed{...} dari paket amsmath. Namun hasilnya hanya dapat memuat rumus (equation) saja dan tampilannya kurang begitu baik.
Tidak ada pilihan lain, kita harus beralih ke modus HTML. Berkat panduan dari sini dan dari sana akhirnya saya dapat menuliskannya kembali untuk Anda.
Teknis Penulisan
Di mana pun pada bagian tulisan kita, letakkan kode berikut ini dalam modus HTML.
<div style="border: 5px double #C92020; padding: 5px; max-width:500px;">
...
</div>
Pada opsi border,
- opsi 5px menyatakan ketebalan garis tepi bingkai; kita dapat mengubahnya sesuai dengan keperluannya;
- opsi double menyatakan bentuk garis tepi bingkai; kita dapat memilih yang lainnya, yaitu: dashed, groove, ridge, inset, atau outset);
- Opsi #C92020 menyatakan warna bingkai dalam bentuk HEX; kita dapat menentukan warna HEX lainnya di situ atau oleh warna dasar, seperti: red, blue, green, yellow.
Pada opsi padding, 5px menyatakan jarak antara teks di dalam bingkai ke tepi bingkai; kita dapat mengubahnya sesuai dengan keperluannya.
Pada opsi max-width, 500px menyatakan lebar bingkai yang mencakup teks di dalamnya; kita dapat mengubahnya sesuai dengan keperluannya.
Kemudian titik tiga itu kita isi oleh teks yang diinginkan di dalam tulisan tersebut.
Kemudian titik tiga itu kita isi oleh teks yang diinginkan di dalam tulisan tersebut.
Sebagai contoh, bila kita nyatakan
<div style="border: 5px double #C92020; padding: 5px; max-width:500px;">
Misalkan $N$ menyatakan banyak angka nol berurutan di hasil akhir dari $n!$, maka
\begin{equation*}
N =\left\lfloor\frac{n}{5}\right\rfloor+\left\lfloor\frac{n}{5^2}\right\rfloor+\left\lfloor\frac{n}{5^3}\right\rfloor+\cdots+\left\lfloor\frac{n}{5^k}\right\rfloor
\end{equation*}
dengan $k$ memenuhi $5^k\le n$.
</div>
maka akan menghasilkan
Misalkan N menyatakan banyak angka nol berurutan di hasil akhir dari n!, maka
N=⌊n5⌋+⌊n52⌋+⌊n53⌋+⋯+⌊n5k⌋
dengan k memenuhi 5k≤n.
Lalu, bagaimana bila kita ingin agar sudut-sudut bingkai itu lengkung seperti tampak pada gambar pada awal tulisan ini?
Untuk hal itu kita harus menambahkan opsi
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
sehingga berbentuk
<div style="border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 5px double #C92020; padding: 5px; max-width:500px;">
...
</div>
Tentu, ukuran kelengkungannya itu dapat kita ubah sesuai dengan yang kita inginkan. Dengan menggunakan opsi kelengkungan tersebut, perhatikan hasilnya berikut ini.
Misalkan N menyatakan banyak angka nol berurutan di hasil akhir dari n!, maka
N=⌊n5⌋+⌊n52⌋+⌊n53⌋+⋯+⌊n5k⌋
dengan k memenuhi 5k≤n.
Bagaimana mudah, bukan?
Penutup
Tidak ada yang tidak mungkin sehubungan dengan hal teknologi informasi, kita hanya perlu meluangkan sedikit waktu untuk mempelajarinya.Demikian semoga bermanfaat.
◻ Adjie Gumarang Pujakelana 2017