Seiring dengan perkembangan zaman, website
semakin memiliki banyak peminat. Baik untuk membantu bisnis perorangan maupun
perusahaan. Nah, dalam membangun sebuah website, kamu juga harus mempelajari
tentang bahasa pemrograman seperti HTML. Lantas, bagaimana cara membuat spasi HTML? Yuk, simak di sini!
Apa Itu HTML?
HTML atau Hypertext Markup Language
merupakan bahasa yang berfungsi untuk membuat suatu halaman website.
Kode dalam bahasa ini dapat memastikan format gambar maupun teks dalam web
menjadi lebih tepat saat diakses melalui browser internet. Tanpa HTML, browser
tidak akan bisa menampilkan teks maupun elemen lain.
Bahasa ini umumnya terdiri dari beberapa tag
yang tersusun dalam bentuk kode atau simbol tertentu untuk menentukan letak
elemen dalam suatu halaman website. Kode atau simbol tersebut kemudian
dimasukkan dalam sebuah file sehingga bisa menampilkan halaman atau
tampilan yang mudah dimengerti oleh pengguna internet.
Nah, salah satu komponen penting dalam HTML ada space.
Karena spasi dapat membuat teks lebih mudah untuk pengunjung baca dan pahami.
Sehingga akan memberi kenyamanan pada setiap pengunjung website.
Cara Membuat Spasi
HTML
Agar dapat membuat spasi, kamu bisa menggunakan
berbagai cara sesuai dengan kebutuhan website. Berikut adalah beberapa cara
yang dapat kamu terapkan:
1. Menggunakan Kode
Cara menambahkan spasi pada HTML yang pertama adalah dengan memanfaatkan kode non
breaking space atau . Kode ini bisa kamu gunakan saat membutuhkan
spasi dengan jumlah satu. Artinya, saat kamu menuliskan kode , maka
sama saja dengan mengetikkan satu tombol spasi.
Berikut contoh kode atau script penggunaan kode non
breaking space:
<html>
<head>
<title>Contoh
Penggunaan Non Breaking Space</title>
</head>
<body>
<h2>ini adalah contoh menggunakan spasi non breaking space</h2>
</body>
</html>
Hal yang perlu kamu perhatikan
dari script atau kode tersebut adalah seberapa banyak pun menuliskan
, maka hasilnya akan tetap satu spasi. Ini terjadi karena kode
tersebut memang hanya mengenali jumlah spasi satu klik.
Jika kamu ingin
membuat lebih dari satu spasi, maka jumlah juga harus lebih dari
satu di antara satu kata dengan kata lain. Berikut contoh script atau
kode penggunaan untuk spasi lebih dari satu:
<html>
<head>
<title>Contoh
Penggunaan Non Breaking Space</title>
</head>
<body>
<h2>ini adalah contoh menggunakan spasi non breaking space</h2>
</body>
</html>
Penggunaan spasi dengan
memanfaatkan non breaking space atau memiliki kelebihan. Di
mana kode ini akan membantu kamu membuat satu kesatuan kata yang tidak terpisah baris
meskipun ukuran web kecil. Selain itu, penulisan bisa kamu ganti dengan tanda titik (.) sehingga menjadi lebih
praktis.
2. Menggunakan Kode  
Adakah cara yang lebih praktis dari ?
Bisakah kamu membuat dua spasi HTML
tanpa mengetikkan dua kode? Jawabannya, tentu bisa. Kamu dapat menggunakan kode
  untuk membuat jarak antara dua kata menjadi dua spasi tanpa harus
menuliskan kode sebanyak dua kali. Berikut contoh penulisan script atau
kodenya:
<html>
<head>
<title>Contoh
Penggunaan  </title>
</head>
<body>
<h2>ini adalah contoh menggunakan spasi dua kali</h2>
</body>
</html>
Jadi, jika tidak ingin repot
karena harus membuat spasi dua kali. Lebih baik, kamu menggunakan kode
  karena dapat akan menampilkan jarak spasi dua kali antar kata secara
otomatis.
3. Menggunakan Kode  
Cara membuat spasi selanjutnya adalah dengan
kode  . Perbedaannya dengan dan   adalah jumlah
spasi yang lebih banyak. Jika memiliki satu spasi dan  
memiliki dua spasi. Maka, dengan menggunakan   kamu bisa menuliskan
empat spasi antar kata sekaligus.
Kelebihan penggunaan kode  , yaitu
memudahkan saat kamu membutuhkan penulisan dengan spasi lebar. Sehingga tidak
perlu mengetikkan kode berulang-ulang. Cukup dengan mengetik satu kode saja,
maka sudah langsung otomatis ditampilkan jarak spasi lebar.
Berikut contoh script penggunaan kode
&emsp untuk membuat empat spasi antar satu kata dengan kata lain:
<html>
<head>
<title>Contoh
Penggunaan Kode Empat Spasi</title>
</head>
<body>
<h2>ini adalah contoh menggunakan empat spasi</h2>
</body>
</html>
Jika kamu ingin melihat perbedaan spasi dengan
kode ,  , dan  , maka bisa menggunakan script
sebagai berikut:
<html>
<head>
<title>Cara Membuat
Spasi HTML</title>
</head>
<body>
<h2>contoh penggunaan spasi</h2>
<h2>sampel penggunaan spasi</h2>
<h2>contoh penggunaan spasi</h2>
</body>
</html>
Contoh script di atas
akan menghasilkan tampilan yang berbeda. Hal yang perlu kamu ingat, yaitu
penggunaan kode   dan   tidak mempengaruhi pemotongan baris.
Berbeda dengan yang bisa mempengaruhi pemotongan pada setiap
baris.
4. Menggunakan Word Spacing
Selain menggunakan ketiga cara yang sesuai
penjelasan di atas, masih ada satu cara lain yang bisa kamu gunakan. Mengatur spasi HTML juga bisa kamu tentukan
dengan nilai tertentu. Hal tersebut bertujuan agar dapat menyesuaikan kebutuhan
apabila jarak spasi terlalu pendek atau panjang.
Cara ini bernama word spacing, di
mana penggunaannya juga membutuhkan kode CSS. Word spacing berfungsi
jika kamu ingin membuat paragraf HTML yang memiliki jarak antar kata tetap.
Berikut contoh script penggunaan word spacing:
<html>
<head>
<title>Contoh
Penggunaan Word Spacing</title>
</head>
<body>
<p
style="word-spacing: 1em;">contoh penggunaan spasi dengan aturan
nilai tertentu sesuai kebutuhan </p>
</body>
</html>
Pada kode di atas terdapat
penulisan 1 em yang artinya jarak antar kata yaitu 1 em atau 1 spasi. Sehingga,
menjadi lebih lebar dan penggunaannya bisa kamu atur sesuai keinginan. Em
sendiri adalah salah satu satuan ukuran untuk menentukan jarak spasi. Selain
itu, kamu juga bisa menggunakan persen
atau px.
Satuan ukuran antara em, px, maupun persen
masing-masing memiliki kelebihan yang bisa kamu pelajari saat belajar CSS.
Jadi, jika kamu ingin menggunakan kode word spacing, sebaiknya
pelajari tentang CSS agar tampilan web lebih menarik. Cara mengetahui perbedaan
spasi dari tampilan website, cobalah dengan kode berikut ini:
<html>
<head>
<title>Cara Membuat
Spasi HTML</title>
</head>
<body>
<h2>contoh penggunaan spasi</h2>
<h2>sampel penggunaan spasi</h2>
<h2>contoh penggunaan spasi</h2>
<p style="word-spacing:
1em;"><h2>sampel pengaturan spasi</h2></p>
</body>
</html>
Setelah menuliskan kode tersebut, kamu akan melihat perbedaan tampilan dengan jelas antara penggunaan kode ,  ,   dan word spacing.
Sudah Mengerti Cara Membuat Spasi HTML?
Itulah empat cara yang bisa kamu lakukan untuk membuat spasi HTML. Masing-masing cara di atas bisa kamu gunakan sesuai dengan kebutuhan. Ingat! Pengaturan spasi dalam website akan mempengaruhi kenyamanan pengguna saat membaca konten artikel. Jadi, pastikan kamu memilih kode yang tepat, ya!
Posting Komentar untuk "Cara Membuat Spasi HTML dengan Mudah dan Praktis"