Cara Menggunakan Tag Di HTML

Di kesempatan kali ini saya menjelaskan cara menggunakan tag <pre> di html. Perlu teman-teman ketahui sebelumnya, tag <pre> di HTML biasanya digunakan bagi menulis teks tanpa format. Tag <pre> HTML element digunakan bagi merepresentasikan sebuah blok teks preformatted text. Dan Teks yang ditulis didalam <pre> unsur mempunyai struktur menurut ketetapan tifografi, yang artinya teks tersebut ditulis apa adanya sesuai format yang ditulis didalam file dokumen HTML. <pre> banyak digunakan selaku pembungkus bagi element <code>, dimana didalam element <pre> tersebut terdapat element <code> yang digunakan bagi menulis sourcecode.

Mungkin teman-teman sering melihat situs yang dapat menampilkan syntax code yang mirip dengan diantara tools pemrograman situs yaitu sublime_text. Didalam HTML versi 5, element HTML <pre> tak mempunyai attribute khusus yang dapat digunakan, sedangkan didalam HTML versi 4 terdapat atribut width dan wrap. Dan bagi Atribut-atribut tersebut telah tak 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 karenanya akan menampilkan menurut 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 karenanya akan menampilkan, seperti contoh gambar berikut :

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

Sumber https://kursuswebsite.org

Search This Blog

Bellocian Blog