Disclaimer: Tulisan ini bukanlah tulisan original, melainkan saya rangkum dari beberapa tulisan-tulisan dari @steemitguide, @indonesia-trail, @abunagaya, @alanmirza, dan @alfarisi. Terima kasih sebelumnya saya ucapkan. Tujuan tulisan ini dibuat sebagai rangkuman tentang bagaimana menata tulisan agar terlihat lebih menarik menggunakan tag html.
Tulisan ini saya tujukan untuk stemian-stemian pemula yang belum tahu bagaimana menata tulisan agar terlihat menarik, dan sekaligus sebagai pengingat bagi stemian senior jikalau lupa tentang tata cara penulisan ini.
DAFTAR ISI:
- Membuat huruf tebal (bold)
- Membuat huruf miring (italic)
- Membuat huruf tercoret (stretch)
- Membuat kalimat kutipan (quote)
- Membuat judul dan sub judul (heading)
- Membuat huruf typewriter (script/code)
- Membuat tulisan berpangkat dibawah/diatas (sub/sup)
- Membuat garis pembatas paragraf (hr)
- Membuat teks ber-link (text link)
- Membuat daftar bullet & numbering
- Membuat tabel (table)
- Membuat teks/paragraf rata tengah/kiri/kanan/kiri-kanan (align text)
- Membuat paragraf dua kolom (2 column paragraph)
- Mengatur posisi gambar dalam paragraf
- Membuat gambar di posisi kanan/kiri paragraf (align image)
Membuat teks tebal, miring, dan tercoret
Ada dua cara untuk membuat teks tebal dan miring, yaitu dengan menggunakan simbol bintang *
dan garis bawah _
. Kalian boleh pilih salah satu dari kedua simbol tersebut. Satu bintang/underline untuk teks miring, dan dua bintang/underline untuk teks tebal. Atau mengkolaborasikannya.
Kode:
Tebal: *Teks disini*
Miring: **Teks disini**
Tebal miring: ***Teks disini***
Hasilnya:
Ini contoh teks miring
Dan ini contoh teks tebal
Kalau digabung jadinya seperti ini.
Atau bisa juga dengan menggunakan markup <i>
dan ditutup dengan </i>
untuk italic, dan <b>
untuk bold.
Contoh:
<i>Ini contoh teks miring</i>
<b>Dan ini contoh teks tebal</b>
<i><b>Kalau digabung jadinya seperti ini.</i></b>
Hasilnya akan sama seperti contoh diatas.
Dan untuk membuat teks tercoret cukup dengan menambah kode berikut diantara teks/kalimat.
Kode:
<del>Dua butir Milkita setara dengan segelas susu</del>
Hasilnya:
Dua butir Milkita setara dengan segelas susu
Membuat teks bergaris bawah
Untuk yang satu ini saya belum tahu caranya, saya sudah coba gunakan markup
<u>
untuk underline, seperti<u>teks disini</u>
, tetapi steemit tidak menampilkan apa-apa.
Saya akan cari tahu lebih lanjut untuk cara membuat teks bergaris bawah ini.
Membuat kalimat kutipan
Ada dua cara dalam menulis kalimat kutipan, cara pertama dengan mengetik markup <blockquote>
dan ditutup dengan </blockquote>
. Namun untuk lebih mudahnya cukup dengan mengetik tanda >
sebelum kalimat.
Contoh:
>"Kalau hidup sekadar hidup, babi di hutan pun hidup. Kalau bekerja sekadar bekerja, kera juga bekerja."
**- Buya Hamka**
Hasilnya:
"Kalau hidup sekadar hidup, babi di hutan pun hidup. Kalau bekerja sekadar bekerja, kera juga bekerja." - Buya Hamka
Contoh diatas saya kombinasikan dengan teks tebal, kalian juga bisa kombinasikan dengan memasukan link sumber seperti berikut ini:
"Menurut Wikipedia, nama asli Buya Hamka adalah Prof. DR. H. Abdul Malik Karim Amrullah, sedangkan Hamka sendiri adalah nama pena yang disingkat dari nama panjangnya.
Membuat judul dan sub judul (Heading)
Cara pertama membuat Heading dan Sub heading dengan cara menambahkan markup <h1>
sebelum judul dan ditutup dengan </h1>
. Cara kedua dengan menggunakan simbol berikut:
Kode:
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Hasilnya:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Membuat teks untuk kode/script
Contohnya adalah seperti teks ini
. Tetapi biasanya digunakan untuk penulisan kode/script, seperti berikut:
<div class="pull-right"><center>link gambar</center></div>
Nah bagaimana cara membuatnya? Cukup memasukan markup <code>
sebelum teks yang dinginkan dan ditutup dengan </code>
. Tetapi perlu diingat bahwa penggunaan <code>
”hanya berlaku untuk penulisan teks biasa saja.” Untuk membuat script/kode seperti contoh diatas bisa menggunakan simbol ( ` ) pada setiap markup. Baik itu tag pembuka maupun tag penutup.
Membuat tulisan berpangkat (sub/sup)
Untuk penulisan pangkat diatas, menggunakan markup <sup>
dan ditutup dengan </sup>
. Dan markup <sub></sub>
untuk pangkat dibawah. *pangkat kok dibawah?
Contohnya:
RRQ O <sup>2</sup>
Oxygen adalah tim terbaik MPL.
ELITE8 <sub>indo</sub>
adalah salah satu tim Moba Analog!
Hasilnya:
RRQ O2 Oxygen adalah tim terbaik MPL.
ELITE8indo adalah salah satu tim Moba Analog!
Membuat garis pembatas
Membuat garis pembatas untuk memisahkan paragraf cukup dengan menambahkan markup <hr>
atau dengan mengetik tanda strip -
sebanyak tiga kali ---
.
Kode:
<hr>
---
Hasilnya:
Membuat teks link
Contoh:
[Ahmad Naufal Mukhtar](http://www.anaufalm.com)
Hasilnya:
Ahmad Naufal Mukhtar
Membuat daftar bullet & numbering
Kode:
* steemit.com
* busy.org
* utopian.io
1. steemit.com
2. busy.org
3. utopian.io
Hasilnya:
- steemit.com
- busy.org
- utopian.io
- steemit.com
- busy.org
- utopian.io
Membuat tabel
Kode:
NO | USERNAME | JABATAN
-|-|-
1 | @levycore | Curator Indonesia
2 | @aiqabrago | Curator Indonesia
3 | @jodipamungkas | Curator Gaming
Hasilnya:
NO | AKUN | JABATAN |
---|---|---|
1 | @levycore | Curator Indonesia |
2 | @aiqabrago | Curator Indonesia |
3 | @jodipamungkas | Curator Gaming |
Membuat teks/paragraf rata tengah/kiri/kanan/kiri-kanan
Contoh:
<p><div class="text-center">
Ini hanya teks sampel, tidak usah dibaca sampai habis. Anda tidak akan mendapatkan apa-apa jika membaca teks ini. Lebih baik anda berhenti sekarang juga. Sudah, jangan diteruskan, tidak ada gunanya.
</div></p>
Hasilnya:
Bagaimana dengan rata kiri atau rata kanan? Kalian cukup mengganti text-center
dengan text-right
atau text-left
.
Untuk membuat paragraf rata kiri-kanan, silakan diganti dengan kodetext-justify
, contohnya sebagai berikut:
Terima kasih @cicisw sudah menambahkan :)
Membuat paragraf dua kolom
Kode:
<p>
<div class=pull-left>
Paragraf 1
</div>
<div class=pull-right>
Paragraf 2
</div>
</p>
Contoh:
Mengatur posisi gambar dalam paragraf
Kode:*
<center>link-gambar</center>
<center>caption-gambar</center>
Contoh:
Untuk mengganti posisi gambar agar berada di kanan, ganti kode <center>
dengan <right>
, dan <left>
untuk berada di posisi kiri.
Membuat gambar di posisi kanan/kiri paragraf
Kode:
<p>
<div class="pull-right">
link-gambar<center>
caption-gambar</center></div>
Teks paragraf disini
</p>
Contoh:
Demikian rangkuman saya mengenai bagaimana menata tulisan agar terlihat lebih menarik menggunakan tag html. Tujuan saya membuat dalam satu postingan semua kode-kode ini adalah sebagai rangkuman, dan untuk memudahkan para stemian agar tidak repot mencari cara-cara lain lagi yang mungkin di postingan lain tidak lengkap. Dan terima kasih sekali lagi kepada @steemitguide, @indonesia-trail, @abunagaya, @alanmirza, @alfarisi, dan juga kurator Indonesia @levycore, @aiqabrago, @jodipamungkas. Terima kasih sudah membaca sampai habis.
Silakan di bookmark. ^^ (Ctrl+D)
Salam.