Cara Menyisipkan Spasi Dalam HTML
Cara Menyisipkan Spasi Dalam HTML
Ketika Anda menulis kode, spasi ganda yang biasanya dibuat dengan menekan tombol spasi, tombol tabulasi (tab) dan tombol kembali (return) akan diabaikan. HTML hanya membacanya sebagai spasi putih di antara kata, dan hanya menampilkannya sebagai spasi tunggal saja. Meskipun CSS memungkinkan Anda untuk membuat gaya atau penyusunan spasi dan jarak paragraf (indentasi) yang lebih akurat, HTML juga memiliki beberapa perangkat yang bisa Anda gunakan untuk mengatur penjarakan teks.
1
Menyisipkan Spasi dan Tabulasi Tunggal
-
1Sisipkan spasi tetap (non-breaking space). Biasanya, HTML hanya akan menampilkan spasi tunggal di antara dua kata, terlepas dari berapa banyak Anda menekan tombol spasi. Untuk menyisipkan spasi tambahan “secara paksa”, cobalah tikkan atau  . [1] Kode tersebut menampilkan karakter yang disebut sebagai spasi tetap (non-breaking space) yang akan selalu ditampilkan pada halaman.- Karakter ini disebut spasi tetap (atau spasi tanpa pemotongan) karena mencegah adanya pemotongan baris atau spasi pada posisi penempatan karakter. Jika Anda terlalu banyak menggunakan karakter tersebut, peramban akan kesulitan untuk menyisipkan pemotong baris secara rapi sehingga teks menjadi sulit dibaca. [2]
-
2Sisipkan spasi dengan lebar yang beragam. Ada beberapa karakter lain yang dapat memberi perintah pada peramban untuk menampilkan spasi. Peramban yang berbeda mungkin menampilkan karakter tersebut dalam cara yang sedikit berbeda. Akan tetapi, tidak seperti kode , karakter-karakter ini tidak akan memengaruhi pemotongan baris.[3][4]-   — dinamakan berdasarkan blok huruf “N” pada mesin percetakan, spasi “en” (”en” space) memiliki panjang sekitar dua spasi biasa.
-   — spasi “em” (”em” space), memiliki panjang kurang lebih empat spasi biasa.
-
3Tiru tabulasi pada teks menggunakan spasi tetap. Salah satu cara untuk mengatur jarak pada paragraf (dalam hal ini, menjorokkan paragraf) adalah dengan menyisipkan beberapa spasi tetap, seperti “ ”. Langkah ini sebenarnya merupakan solusi untuk HTML saja sehingga penggunaannya tidak disarankan jika Anda menggunakan CSS (dijelaskan dalam langkah terpisah).- Jika Anda memiliki paragraf dengan penempatan teks yang berantakan, cobalah gunakan metode pra penanda.
-
4Buatlah paragraf menjorok menggunakan CSS. Sistem penempatan ruang dan spasi atau margin CSS memberikan petunjuk tampilan secara langsung pada peramban sehingga hasilnya lebih konsisten. Proses penambahannya tidak begitu sulit, bahkan jika Anda tidak memahami penggunaan CSS dan tidak memiliki lembar gaya (style sheet). Di bawah ini merupakan contoh penggunaan CSS untuk menggeser seluruh paragraf ke sisi kanan halaman:[5]- Pada bagian <head></head> di dokumen HTML, sisipkan kode berikut ini:
<style>p.indent{ padding-left: 1.8em }</style>
"p.indent" mengacu pada jenis paragraf (penanda p) dengan nama “indent” (Anda sebetulnya bisa menggantinya dengan nama apa pun yang diinginkan). Elemen-elemen lainnya pada kode berfungsi untuk menambahkan ruang kosong (padding) di sisi kiri paragraf tersebut. - Sekarang, kembali ke bagian utama (tubuh) dokumen HTML. Setiap kali
Anda ingin menjorokkan atau menggeser paragraf ke arah kanan, posisikan
teks paragraf tersebut di antara penanda berikut ini:
<p class="indent"></p> - Untuk menyesuaikan ukuran indentasi atau jarak, ubahlah nilai “1.8” pada kode CSS tersebut. Jangan hapus elemen “em” yang disisipkan setelahnya karena elemen tersebut merupakan ukuran panjang jarak yang berkaitan dengan ukuran huruf yang digunakan. [6]
- Pada bagian <head></head> di dokumen HTML, sisipkan kode berikut ini:
2
Memformat Paragraf yang Lebih Panjang
-
1Gunakan teks yang telah diformat awal. Karakter spasi dari tombol space atau garis baru dari tombol ⌅ Enter yang dimasukkan di dalam penanda <pre></pre> akan ditampilkan sesuai dengan posisi penempatannya. Anda bisa menggunakan kode ini untuk menampilkan contoh kode, puisi, atau teks yang mengharuskan adanya penempatan spasi dan baris baru dengan akurat. [7]- Kekurangan dari penggunaan teks yang telah diformat awal adalah lebar teks. Tidak seperti HTML biasa, teks ini tidak akan mengalami perubahan ukuran agar sesuai dengan ukuran jendela peramban pengguna. [8]
-
2Buatlah baris baru. Penanda <br> berfungsi untuk mengakhiri baris teks yang ada. Anda bisa membuat baris-baris teks kosong dengan beberapa penanda “br”. Mereka yang baru mempelajari HTML dapat menggunakan pendekatan ini. Akan tetapi, setelah Anda mempelajari CSS, pengaturan gaya HTML yang “dipaksakan” seperti ini sebenarnya tidak dianjurkan untuk diikuti. -
3Tandai paragraf menggunakan penanda “p”. Penanda <p></p> yang ditambahkan sebelum dan setelah teks berfungsi untuk menandai teks yang diapit sebagai paragraf. Biasanya, kebanyakan peramban bisa memisahkan satu paragraf dan paragraf lainnya dengan satu baris kosong. Akan tetapi, Anda tidak bisa memastikan gaya atau pengaturan pasti yang digunakan oleh peramban tersebut. [9]
Tips
- Jika Anda menemukan simbol-simbol tambahan yang muncul di dekat kode atau teks setelah Anda mengklik dua kali tampilan akhirnya, carilah kode-kode yang mungkin tidak lengkap (mis. <br, bukan <br>).
- CSS merupakan cara yang lebih hebat dan terprediksi untuk mengatur tata letak halaman situs, termasuk menyesuaikan penjarakan teks.
- Jangan bubuhkan spasi tepat setelah awal penanda dan sebelum akhir penanda. Sebagai contoh, Anda perlu menulisnya sebagai “Spaces <a>Tutorial</a>”, bukan “Spaces<a> Tutorial </a>”.[10]
- Spasi tetap ( ) merupakan salah satu contoh karakter entitas, kode yang merujuk pada karakter yang tidak dapat ditikkan melalui papan tik.
Peringatan
- Karakter HTML untuk tombol Tab ↹ (	) sebenarnya tidak berfungsi seperti yang dibayangkan pada HTML. Dokumen HTML standar tidak memiliki penanda akhir tabulasi sehingga karakter tabulasi tersebut tidak akan berfungsi.
- Selalu tulis rancangan HTML Anda melalui program penyunting kode atau simpan dalam format berkas teks kosong, bukan format berkas program penyunting kata (mis. Microsoft Word). Jika spasi yang disisipkan ditampilkan sebagai simbol-simbol aneh pada peramban web, kemungkinan besar hal itu disebabkan oleh data tambahan pada format berkas yang tidak didesain khusus untuk ditampilkan di internet.
Komentar
Posting Komentar