Media Belajar Bahasa Pemrograman | by APPKEY

HTML/CSS Tutorial HTML/CSS 11 : Cara Membuat Space pada HTML...

Tutorial HTML/CSS 11 : Cara Membuat Space pada HTML dengan Mudah

-

Pada artikel sebelumnya, Codekey telah membahas tentang cara membuat simbol serta contoh-contoh simbol pada HTML. Kali ini, Codekey akan mengajak Anda untuk memahami tentang space pada HTML.

Ada beberapa cara untuk menerapkan HTML. Jika Anda tertarik untuk tahu, pastikan Anda membaca artikel ini sampai selesai.

Cara Terbaik Menerapkan Space pada HTML

html-11

Ada beberapa cara dan tips yang kami sarankan untuk Anda ikuti ketika menerapkan space pada HTML:

  1. Anda dapat menggunakan pintasan untuk menambahkan spasi yang tidak dapat dipecahkan di sebagian besar pengolah kata. Coba Option + Spasi untuk MacOS, Ctrl + Shift + Spasi untuk MS Word atau OpenOffice, dan Ctrl + Alt + Spasi untuk Windows (sebagai alternatif, Anda dapat menahan Alt dan menekan 0160 pada papan angka).
  2. Anda juga dapat memasukkan dua atau empat spasi sekaligus dengan mengetik & ensp; atau & emsp;.
  3. Spasi yang tidak dapat dipecahkan juga dapat berguna dalam tabel HTML. Menambahkan satu ke sel yang kosong dapat mencegah tabel runtuh di browser yang tidak mendukung sel kosong.
  4. Jika Anda memutuskan untuk menggunakan properti CSS untuk menambahkan ruang kosong, hindari menentukan nilai dalam unit absolut. Mereka tidak akan beradaptasi dengan perubahan font atau ukuran layar, jadi gunakan persentase dan unit em untuk respon yang lebih baik.

Artikel Terkait  Tutorial HTML/CSS 9 : Cara Membuat Table di HTML untuk Pemula

Berikut kami jelaskan tentang jenis space HTML yaitu non-breakable space.

Non-Breakable Space di HTML

Saat Anda menulis teks, katakanlah, Microsoft Word, Anda dapat dengan mudah menambahkan beberapa spasi dalam satu baris.

Namun, pada HTML Anda tidak dapat melakukan itu sehingga HTML memiliki fitur yang disebut whitespace collapse, tidak peduli berapa banyak spasi yang Anda ketik, browser akan menguranginya menjadi satu spasi.

Lantas, bagaimana cara menambahkan spasi di HTML? Opsi termudah adalah entitas ruang yang tidak dapat dipecahkan, dan ada dua cara untuk menambahkannya.

 
 

Anda dapat memasukkannya untuk menambahkan spasi kosong HTML yang tidak dapat diciutkan di antara kata, gambar, atau elemen halaman lainnya. Hal ini juga akan mencegah jeda baris yang tidak diinginkan.

Misalnya, dalam cuplikan kode di bawah ini, Anda dapat melihat cara menambahkan spasi di nomor HTML sebagai pemisah ribuan, dan juga memastikan browser tidak memecahnya.

Belajar HTML Bersama Codekey.

Anda dapat memasukkannya untuk menambahkan spasi kosong HTML yang tidak dapat diciutkan di antara kata, gambar, atau elemen halaman lainnya. Ini juga akan mencegah jeda baris yang tidak diinginkan. Misalnya, dalam cuplikan kode di bawah ini, Anda dapat melihat cara menambahkan spasi di nomor HTML sebagai pemisah ribuan, dan juga memastikan browser tidak memecahnya.

Opsi Lain dalam HTML untuk Space

Dalam beberapa kasus, Anda mungkin ingin menambahkan spasi di HTML untuk memisahkan bagian teks Anda. Non-breakable space sebenarnya bukan pilihan dalam kasus ini.

Anda harus menggunakan space html tag <br> untuk jeda baris atau membungkus paragraf Anda dengan space html tag <p> untuk mendefinisikannya sebagai terpisah. Anda dapat menerapkannya sebagai berikut:

<span>Belajar HTML Bersama Codekey</span><br>
<span>Selamat Belajar!</span>

Satu cara lagi untuk menyimpan semua ruang kosong HTML yang Anda ketikkan adalah memformat teks Anda dengan membungkusnya dalam space html tag <pre>:

<pre>
         A
         |||
        |||||
       |||||||
      |||||||||
     [|||||||||]
<pre>

Teks pra-pemformatan mempertahankan semua spasi HTML dan baris kosong seperti yang Anda ketikkan. Jadi, ini berguna saat Anda perlu menyampaikan makna visual. Pada contoh di atas, Anda melihat gambar ASCII.

Anda juga dapat menggunakan <pre> untuk menulis alamat, puisi, dan teks lain yang mengikuti format tertentu. Secara default, browser menampilkan teks yang telah diformat sebelumnya dalam font dengan lebar tetap. Namun, Anda dapat mengubahnya menggunakan CSS.

Artikel Terkait  Tutorial HTML/CSS 13 : Cara Mudah Memberikan Style pada tag HTML

Alternatif CSS untuk HTML Kosong

Cara-cara menambahkan spasi dalam HTML yang dibahas di atas berguna, tetapi Anda tidak boleh mengandalkannya untuk memberi gaya dan mengubah posisi elemen. Sebagai gantinya, periksa properti CSS ini:

  1. margin menambahkan spasi HTML di sekitar elemen (di luar batas).
  2. padding menambahkan ruang HTML di sekitar konten elemen (di dalam batas).
  3. text-align meratakan teks sesuai dengan nilai yang dipilih (kiri, kanan, tengah, atau rata).
  4. text-indent menambahkan spasi HTML di depan baris teks pertama.

Menggunakan lembar gaya CSS jauh lebih nyaman saat Anda membutuhkan gaya yang konsisten. Anda hanya perlu menyesuaikan satu baris agar perubahan memengaruhi seluruh halaman, bukan melalui setiap paragraf.

Demikianlah penjelasan tentang html space. Space pada HTML sangat penting untuk dipahami untuk bisa bekerja dengan HTML. Jika Anda tertarik untuk belajar HTML pemula, Anda dapat membaca artikel-artikel Codekey seri tutorial HTML sebelumnya.

Codekey tidak hanya menyediakan artikel pembelajaran HTML, tetapi juga bahasa pemrograman lainnya. Kami menyediakan tutorial, materi, pembahasan, tips, serta trik untuk Anda belajar bahasa pemrograman. Pastikan Anda mendapatkan update artikel-artikel terbaru dari situs kami.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial Swift 2 : Tahap Awal Persiapan dan Mengatur Lingkungan Kerja pada Swift

Setelah Anda mengenal bahasa pemrograman Swift 4, langkah selanjutnya adalah Anda perlu memulai pemrograman Swift 4 dengan cara install...

Tutorial Javascript 1 : Pengenalan Javascript untuk Pemula

Ada banyak sekali jenis bahasa pemrograman yang bisa Anda pelajari untuk menjadi seorang programmer profesional. Salah satunya adalah belajar...

Tutorial Javascript 6 : Cara Membuat Event pada Javascript

Event JavaScript adalah tindakan atau proses khusus yang terjadi dalam program atau situs web yang akan Anda kembangkan. Anda...

Tutorial Javascript 2 : Tahap Awal Cara Mudah Menulis Kode di Javascript

Kembali lagi di seri belajar Javascript bersama Codekey! Setelah di postingan sebelumnya Anda belajar Javascript terkait konsep-konsep dasarnya, kini...

Tutorial Dart 1 : Pengenalan Bahasa Pemrogaman Dart untuk Pemula

Halo pembaca setia Codekey! Belajar pemrograman saat ini menjadi keharusan bagi semua orang yang ingin berkarir sebagai programmer, hal...

Tutorial HTML/CSS 3 : Pengenalan Elemen Dasar di HTML

HTML adalah bahasa Markup yang terdiri dari elemen dan tag. Artikel ini akan memberi penjelasan kepada Anda tentang elemen-elemen...

Tutorial Dart 3 : Belajar Menggunakan Syntax atau Perintah dasar Dart

Setelah mengatur lingkungan kerja serta instalasi Dart ke dalam sistem operasi yang kalian miliki, dalam pembuatan suatu program baik...

Tutorial HTML/CSS 1 : Pengenalan HTML untuk Pemula

Jika Anda seorang pemula dalam dunia coding dan ingin mengetahui atau belajar HTML dasar, maka artikel ini akan cocok...

Tutorial Javascript 9 : Cepat dan Mudah Cara Mengurutkan Data Array di Javascript

Pada artikel sebelumnya Anda mungkin telah membaca dan mempelajari tentang Array di JavaScript. Pada artikel kali ini, kami akan...

Tutorial Python 7 : Tutorial Dasar Cara Mengoperasikan String pada Python

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya