Media Belajar Bahasa Pemrograman | by APPKEY

HTML/CSSTutorial HTML/CSS 11 : Space HTML Tag, Cara Membuat...

Tutorial HTML/CSS 11 : Space HTML Tag, 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

space-html-tag

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 25 : Mengenal HTML Layout dan Teknik Layout

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 : Style HTML, 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 Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

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

Tutorial Dart 18 : Ayo Mulai, Pelajari Cara Install Flutter

Pada seri tutorial Dart kali ini, Codekey akan menampilkan hal yang sedikit berbeda, yaitu tentang aplikasi-aplikasi yang mendukung pemrograman...

Tutorial SQL 9 : Agregasi SQL, Cara Mengolah data Menggunakan Fungsi Ini

Agregasi data adalah cara runtuh, meringkas, atau mengelompokan data. Agregasi adalah hal yang selalu ada di setiap aplikasi untuk...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 8 : Memahami Array Multidimensi PHP

Pada artikel sebelumnya kami telah membahas tentang array PHP serta membahas sedikit tentang array multidimensi PHP. Pada artikel kali...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial SQL 1 : Belajar SQL, Pengenalan untuk Pemula

Pernahkah Anda mendengar istilah SQL sebelumnya? Saat terjun ke dunia IT khususnya coding pemrograman komputer, SQL adalah salah satu...

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