Cara Membuat Artikel dengan HTML Text Formatting di Blog

Kali ini, izinkan saya berbagi tutorial bagaimana caranya membuat artikel dengan HTML Text Formatting di postingan blog serta cara memasang tag atau atributnya.

Materi ini merupakan bagian terpenting ketika artikel dibuat, khususnya bagi blogger-blogger yang punya web blog bermaterikan blogging, matematika, fisika, dan kimia.

Contohnya seperti penulisan pangkat pada angka matematika, 42 (empat pangkat dua). Bisa kita ubah menjadi 4² (angka 2 menjadi kecil). Menarik, kan?

Catatan: sebelumnya, beberapa tag atribut ini sudah tersedia di Navigasi Menu editor postingan di blogger.com, hanya saja tidak lengkap.

Membuat Teks Tebal pada Teks

Teks Tebal digunakan untuk memberikan penegasan pada teks tertentu. Tag yang digunakan adalah  dan  (bold) atau bisa juga dengan menggunakan tag  dan 

<b>Provinsi Aceh</b>.

Hasilnya: Provinsi Aceh.

Membuat Teks Miring pada Teks

Teks Miring digunakan untuk menegaskan sebuah kata yang memiliki istilah. Tag yang digunakan adalah  dan  (italic) atau bisa juga dengan menggunakan tag  dan  (emphasis).

<i>Blogger Aceh</i>.

Hasilnya: Blogger Aceh.

Membuat Garis Bawah pada Teks

Garis Bawah digunakan untuk menandai teks yang memiliki arti penting atau teks yang sudah disisipkan. Tag yang digunakan adalah  dan  (underline) atau bisa juga dengan menggunakan tag <ins> dan </ins> (insert).

<u>Krue Seumangat</u>.

Hasilnya: Krue Seumangat.

Membuat Teks Tercoret pada Teks

Teks Tercoret digunakan untuk teks yang dihapus tapi tidak ingin dihapus. Tag yang digunakan adalah <strike> dan </strike> atau <s> dan </s> (strikethrough) atau bisa juga dengan menggunakan tag <del> dan </del> (delete).

<strike>Kok bisa min?</strike>

Hasilnya: ~~Kok bisa min?~~

Membuat Pangkat pada Teks HTML

Pangkat pada teks HTML digunakan pada rumus. Ada dua jenis tag pangkat yang digunakan yakni pangkat di atas (superscript) dan pangkat di bawah (subscript).

Tag yang digunakan adalah  dan  (superscript) atau  dan  (subscript).

Contohnya?

Jika elektrolit kuat pada terner memiliki angka H<sup>2</sup>SO<sup>4</sup>, berapa ikatan kovalen polar pada lemahnya? Jawabannya adalah CH<sub>3</sub>CO<sub>0</sub>H dan NH<sub>4</sub>OH.

Hasilnya:

Jika elektrolit kuat pada terner memiliki angka H²SO⁴, berapa ikatan kovalen polar pada lemahnya? Jawabannya adalah CH₃CO₀H dan NH₄OH.

Membuat Tanda Kutip pada Teks HTML

Tanda Kutip digunakan untuk mengutip suatu kalimat yang dirasa penting yang perlu diingat, biasanya identik dengan pesan atau peringatan. Tag yang digunakan adalah <q> dan </q> (quote).

<q>SEO adalah optimasi web blog</q>

Hasilnya: SEO adalah optimasi web blog.

Membuat Marker pada Teks HTML

Marker digunakan untuk menandai teks atau kata kunci penting selayaknya stabilo pada tugas skripsi atau catatan di buku. Tag yang digunakan adalah  dan </marker> (marker).

Oh <mark>ibu</mark>, engkaulah permaisuriku.

Hasilnya: Oh ibu, engkaulah permaisuriku.

Warna marker adalah kuning, bawaan (default). Tapi kawan-kawan bisa menggantinya dengan warna lain, akan tetapi harus menambahkan CSS Style seperti berikut:

Oh <mark style="background-color: #E91E63">ibu</mark>, engkaulah permaisuriku.

Hasilnya: Oh ibu, engkaulah permaisuriku.

Menandai Kode Program pada Teks HTML

Tagnya adalah <pre><code> dan </code></pre> yang berfungsi untuk menandai bagian dari kode program. Digunakan oleh web blog yang bertemakan blogging. Contohnya:

Perhatikan, kodenya dibungkus oleh kotak berwarna merah jambu (pink).

Tag <pre> bersifat block elemen, menampilkan seluruh teks tanpa memformat spasi; sedangkan tag <code> bersifat inline elemen, kebalikannya di mana jika ditemukan spasi dengan jumlah lebih dari 1, maka hanya 1 yang digunakan.

Tag di atas bisa digabungkan atau dipisahkan, seperti ini:

<pre>
......................
</pre>

...atau:

<code>
......................
</code>

...atau:

<pre><code>
......................................
</code></opre>

Beberapa template blogger hanya mendukung tag <pre> dan </pre>.

Adapun bagaimana bentuk atau tampilannya, tergantung pengaturan CSS Style dari template blog yang sedang sobat gunakan. Mau dipercantik? Coba cek di sini, cek di sub-judul Syntax Highlighter.

Menggabungkan Format Teks HTML

Apakah bisa menggabungkan format teks HTML? Bisa. Semisal sobat ingin membuat teks tebal (bold) tapi teksnya harus miring, bisa? Bisa.

<b><i>Kapan kita akan bertaubat?</i></b>

Hasilnya:

Kapan kita akan bertaubat?

Kalau ingin menggabungkan teks seperti di atas, harap dicek lagi tag mana yang ditulis duluan dan tag mana yang terakhir ditulis.

Itulah tutorial bagaimana caranya membuat artikel dengan HTML text formatting di postingan blog serta cara memasang tag atau atributnya.