Tutorial Formating Text HTML: Cara Membuat Teks Tanpa Format di HTML

Halo gan. Di postingan sebelumnya, kita sudah membahas cara membuat kutipan di HTML.

Kita review sedikit. Ada 2 cara untuk membuat kutipan di HTML, yakni dengan menggunakan tag <blockquote> dan juga tag <q>.

Tag <blockquote> merupakan tag berjenis block element sedangkan tag <q> adalah tag yang masuk ke dalam jenis inline element.

Kali ini, kita akan bahas cara membuat teks tanpa format di HTML. Maksud dari teks tanpa format adalah apa yang kita ketik di kodingannya akan tampil seperti itu juga di web browser.

membuat teks tanpa format di html

Membuat teks tanpa format dengan tag <pre>

Tag <pre> merupakan singkatan dari Preformatted Text. Tag ini digunakan untuk menampilkan teks apa adanya atau dengan kata lain belum diformat.

Tag <pre> termasuk ke dalam jenis tag block element sehingga akan terpisah dari teks di sekitarnya dan berpindah baris baru.

Seperti ini contoh kode HTML-nya.
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat teks tanpa format di HTML</title>
  </head>
  <body>
    <p>Dibawah ini ada teks yang berantakan karena punya spasi yang banyak.</p>
    <pre>Halo..                                Nama ane Iqbal. Ini berantakan...               karena ada...           banyak ........ spasi.</pre>
  </body>
</html>

Seperti ini jadinya.

membuat teks di html

Terlihat dari gambar di atas, spasi akan tetap ditampilkan apa adanya sesuai dengan kodingannya. Jenis font yang ditampilkan pun berbeda, yakni berjenis "Monospace".

Tag <pre> juga sering kali dipakai untuk menampilkan kode program seperti yang ane lakukan di blog ini. Semua contoh kode yang ane tulis, diapit oleh tag <pre>.  

Namun, ada beberapa karakter yang harus dikonversi terlebih dahulu seperti "<" dan ">". Supaya tidak diterjemahkan sebagai perintah melainkan ditampilkan di web browser. Ini yang disebut dengan HTML Entity.

Membuat teks tanpa format dengan tag <code>

Tag <code> hampir sama dengan tag <pre>. Bedanya, tag <code> merupakan tag berjenis inline element. Selain itu, tag <code> akan menghapus spasi yang jumlahnya lebih dari 1. 

Seperti ini contoh kode HTML-nya.
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat teks tanpa format di HTML</title>
  </head>
  <body>
    <p>HTML merupakan singkatan dari
      <code>Hypertext                             Markup                              Language</code>
    </p>
  </body>
</html>

membuat teks tanpa format di html

Dari gambar di atas terlihat bahwa spasi yang ditampilkan hanya 1, padahal di kode HTML-nya kita tulis beberapa spasi di dalam tag <code>.

Seperti itulah cara membuat teks tanpa format di HTML. Selanjutnya, kita akan bahas cara mengubah arah teks di HTML.


0 Komentar untuk "Tutorial Formating Text HTML: Cara Membuat Teks Tanpa Format di HTML"