JavaScript adalah bahasa pemrograman yang mudah dipelajari. Sangat mudah untuk menulis program yang berjalan dan melakukan sesuatu. Namun, sulit untuk memperhitungkan semua kasus penggunaan dan menulis kode JavaScript yang kuat
Spasi Teks
Dalam bab ini Anda akan belajar tentang sifat-sifat berikut
- text-indent_
- letter-spacing_
- line-height
- word-spacing
- white-space
Properti text-indent digunakan untuk menentukan lekukan baris pertama teks
Spasi Huruf
Properti letter-spacing digunakan untuk menentukan spasi antar karakter dalam teks
Contoh berikut menunjukkan cara menambah atau mengurangi spasi antar karakter
Tinggi garis
Properti line-height_ digunakan untuk menentukan spasi antar baris
Spasi Kata
Properti word-spacing_ digunakan untuk menentukan spasi di antara kata-kata dalam teks
Contoh berikut menunjukkan cara menambah atau mengurangi ruang antar kata
Ruang Putih
Properti white-space_ menentukan bagaimana ruang putih di dalam elemen ditangani
Contoh ini menunjukkan cara menonaktifkan pembungkusan teks di dalam elemen
Properti Penspasian Teks CSS
PropertyDescriptionletter-spacingMenentukan spasi antar karakter dalam textline-heightMenentukan tinggi baristext-indentMenentukan indentasi baris pertama dalam text-blockwhite-spaceMenentukan cara menangani white-space di dalam elemenword-spacingMenentukan spasi antar kata dalam teksMembuat ruang kosong ekstra, atau spasi putih, di HTML Anda pada halaman web dapat dilakukan dengan berbagai cara tergantung pada ruang yang ingin Anda buat. Bagian berikut berisi berbagai cara untuk membuat ruang ekstra menggunakan HTML dan CSS di editor HTML seperti Dreamweaver atau editor teks seperti Notepad
Membuat spasi ekstra sebelum atau sesudah teks
Salah satu hal yang paling membingungkan bagi pengguna baru yang membuat halaman web adalah mereka tidak dapat menekan bilah spasi beberapa kali untuk membuat spasi tambahan. Untuk membuat spasi ekstra sebelum, sesudah, atau di antara teks Anda, gunakan karakter HTML tambahan (non-breaking space)
Misalnya, dengan frasa "extra space" menggunakan spasi ganda, kita memiliki kode berikut di HTML kita
extra spaceCatatan
Jika Anda menggunakan editor WYSIWYG untuk memasukkan kode di atas, Anda harus berada di tab HTML atau mengedit kode HTML
Tip
Untuk daftar karakter HTML khusus yang diperluas, lihat. Daftar lengkap karakter HTML khusus yang diperluas
Pertahankan spasi dalam teks yang ditempelkan ke halaman
If you are pasting text with extra spaces or tabs, you can use the HTML tag to keep the text formatted. Below is an example of how to paste text with extra spaces using the tag.
This text has lots of spaces_Contoh di atas dilakukan dengan menggunakan kode HTML di bawah ini
- See our HTML tag page for further information on this tag.
Catatan
Jika Anda menggunakan editor WYSIWYG untuk memasukkan kode di atas, Anda harus berada di tab HTML atau mengedit kode HTML
Menciptakan ruang ekstra di sekitar elemen atau objek
Elemen HTML apa pun dapat memiliki spasi tambahan yang ditambahkan ke atas, kanan, bawah, atau kiri. Namun, pastikan Anda memahami perbedaan antara margin dan padding sebelum memutuskan jenis ruang yang ingin Anda tambahkan di sekitar elemen atau objek. Seperti yang terlihat pada gambar di bawah, padding mengelilingi elemen, di dalam border, dan margin di luar border
Contoh di bawah menunjukkan paragraf kita dikelilingi oleh perbatasan, menjorok ke dalam dengan margin, dan dengan spasi di kanan dan bawah
Contoh paragraf dengan margin dan padding
Contoh di atas dibuat menggunakan kode di bawah ini
<p style="margin-left: 2.5em;padding: 0 7em 2em 0;border-width: 2px; border-color: black; border-style:solid;">Example of a paragraph with margin and padding.</p>Di bagian pertama kode, "margin-left. 2. 5em;" menambahkan margin kiri 2. 5 em, yang memberikan tampilan teks indentasi. Seperti yang ditunjukkan oleh contoh, jarak ini berada di luar batas. Di bagian selanjutnya, "padding. 0 7em 2em 0;" mendefinisikan padding atas, kanan, bawah, dan kiri (searah jarum jam). Ada bantalan atas "0", bantalan kanan "7em", bantalan bawah "2em", dan bantalan kiri 0. Sisa dari contoh ini adalah menentukan bagaimana seharusnya tampilan perbatasan
Membuat tab menggunakan CSS dan HTML
Tab dapat dibuat dalam HTML dengan menyesuaikan margin kiri elemen. Misalnya, paragraf ini memiliki margin kiri 2. 5 em dari elemen yang mengandung teks. CSS untuk membuat margin kiri ini ditunjukkan di bawah ini
.tab { margin-left: 2.5em }_Setelah menempatkan kode ini di file CSS kita, kita dapat menerapkan kelas "tab" ke teks apa pun untuk membuat tampilan tab. Nilai margin-left bisa dinaikkan atau diturunkan tergantung kebutuhan Anda
Meskipun kami merekomendasikan metode di atas, CSS margin-left juga dapat ditambahkan sebaris, seperti yang ditunjukkan pada contoh di bawah
<p style="margin-left:2.5em">An example of a 5em left margin.</p>Contoh margin kiri 5em
- Cara membuat indentasi atau tab teks pada halaman web atau dalam HTML
Tambahkan spasi di bawah baris atau paragraf teks
To add extra space below a line or paragraph of text, or push text down lower on the page once, you can use the
tag. Below is an example of how this technique can be applied.
Kode di atas membuat teks yang ditunjukkan di bawah ini
Kalimat ini berisi contoh teks
Seperti yang Anda lihat, dua jeda menambah ruang di atas
Istirahat tambahan dapat ditambahkan jika diperlukan. Namun, kami menyarankan untuk menggunakan yang disebutkan sebelumnya untuk menambahkan padding dan spasi di sekitar teks Anda jika dilakukan di beberapa tempat di halaman
Tambahkan spasi baris di antara baris teks
Jarak antar baris teks dapat disesuaikan dengan menambah dan mengurangi tinggi baris menggunakan CSS agar teks lebih mudah dibaca. Di bawah ini adalah contoh spasi baris ekstra yang ditambahkan ke paragraf teks
<p style="line-height:3.5em;">Text shown below with extra spacing</p>Kode di atas membuat teks yang ditunjukkan di bawah ini
Teks contoh ini adalah contoh bagaimana ruang ekstra antar baris dapat ditambahkan ke teks. Namun, kami tidak akan merekomendasikan penggunaan ruang baris sebanyak ini karena akan membuatnya lebih sulit untuk dibaca. Kami hanya menggunakan spasi baris sebanyak ini sebagai contoh
Dalam contoh kami di atas, kami menggunakan 3. 5 em sebagai ketinggian garis untuk membantu menekankan jarak antar garis. Namun, untuk keterbacaan, sebaiknya gunakan sekitar 1. 7em. Menambahkan beberapa spasi tambahan antar baris selalu meningkatkan keterbacaan teks Anda. Namun, menambahkan terlalu banyak dapat membuatnya lebih sulit untuk diikuti dan dipindai
Tambahkan spasi di sekitar gambar
Untuk menambahkan ruang ekstra di sekitar gambar, gunakan CSS. Untuk menekan teks ke bawah pada halaman, Anda dapat menggunakan
menandai. Di bawah ini adalah contoh bagaimana teknik ini dapat diterapkan