Cara Menggunakan Tag Di HTML

Pada kesempatan kali ini saya menjelaskan cara menggunakan tag <pre> di html. Perlu teman-teman ketahui sebelumnya, tag <pre> di HTML biasanya digunakan untuk menulis teks tanpa format. Tag <pre> HTML element digunakan untuk merepresentasikan sebuah blok teks preformatted text. Dan Teks yang ditulis didalam <pre> elemen memiliki struktur berdasarkan ketetapan tifografi, yang artinya teks tersebut ditulis apa adanya sesuai format yang ditulis didalam file dokumen HTML. <pre> banyak digunakan sebagai pembungkus untuk element <code>, dimana didalam element <pre> tersebut terdapat element <code> yang digunakan untuk menulis source code.

Mungkin teman-teman sering melihat situs yang bisa menampilkan syntax code yang mirip dengan salah satu tools pemrograman website yaitu sublime_text. Didalam HTML versi 5, element HTML <pre> tidak memiliki attribute khusus yang dapat digunakan, sedangkan didalam HTML versi 4 terdapat atribut width dan wrap. Dan untuk Atribut-atribut tersebut sudah tidak berlaku lagi didalam HTML5.

Berikut contoh kode HTML dengan tag pre :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Menggunakan Tag <pre> Di HTML</title>
</head>
<body>
<pre>
function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.button')
      var options = typeof option == 'object' && option

      if (!data) $this.data('bs.button', (data = new Button(this, options)))

      if (option == 'toggle') data.toggle()
      else if (option) data.setState(option)
    })
  }

$(document)
    .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
      var $btn = $(e.target).closest('.btn')
      Plugin.call($btn, 'toggle')
      if (!($(e.target).is('input[type="radio"], input[type="checkbox"]'))) {
        // Prevent double click on radios, and the double selections (so cancellation) on checkboxes
        e.preventDefault()
        // The target component still receive the focus
        if ($btn.is('input,button')) $btn.trigger('focus')
        else $btn.find('input:visible,button:visible').first().trigger('focus')
      }
    })
    .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
      $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
    })

}(jQuery);

Dari kode tersebut maka akan menampilkan berdasarkan apa code apa yang dituliskan, seperti contoh gambar berikut :

Berikut contoh kode HTML tanpa tag pre :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Menggunakan Tag <pre> Di HTML</title>
</head>
<body>
<div>
function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.button')
      var options = typeof option == 'object' && option

      if (!data) $this.data('bs.button', (data = new Button(this, options)))

      if (option == 'toggle') data.toggle()
      else if (option) data.setState(option)
    })
  }

$(document)
    .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
      var $btn = $(e.target).closest('.btn')
      Plugin.call($btn, 'toggle')
      if (!($(e.target).is('input[type="radio"], input[type="checkbox"]'))) {
        // Prevent double click on radios, and the double selections (so cancellation) on checkboxes
        e.preventDefault()
        // The target component still receive the focus
        if ($btn.is('input,button')) $btn.trigger('focus')
        else $btn.find('input:visible,button:visible').first().trigger('focus')
      }
    })
    .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
      $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
    })

}(jQuery);
</div>	
</body>
</html>

Dari kode tanpa tag pre tersebut maka akan menampilkan, seperti contoh gambar berikut :

Sampai disini penjelasan saya mengenai cara menggunakan tag <pre> di html, semoga bermanfaat.