Jade HTML

Author: Sebut saja caha

Hypertext Markup Language atau yang biasa dikenal sebagai HTML merupakan sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan.

Walaupun sudah banyak mengalami revisi, penambahan ekstensi dan fitur baru namun struktur dasar HTML pun tetap sama. Biasanya penulisan HTML ini dimulai dengan <html> dan ditutup </html>.

Kesalahan penulisan HTML ini sering terjadi. Tidak seperti compiler pada Bahasa-bahasa lain yang cenderung menunjukkan kesalahan pada penulisan atau menunjukkan pesan error, HTML tidak memiliki compiler/rendering yang mengecek satu per satu tulisan tersebut ataupun menunjukkan pesan error, untuk mengetahui salah atau betulnya apa yang ditulis melalui tampilan yang dihasilkan. Tidak jarang kesalahan itu berasal dari kurangnya symbol-simbol khusus atau bahkan kurang nya tag.

Hal ini mengakibatkan menyebalkan dan membosankan, untuk mengurangi hal-hal tersebut tidak jarang text editor menyediakan ekstensi tambahan, seperti emmet, untuk melengkapi tulisan dengan satu TAB, ataupun beautify yang berfungsi sekedar merapikan tampilan kodingan saja, yang lumrahnya jika kodingan rapi maka kesalahan pun lebih mudah terdeteksi.

Sekarang kekurangan syntax, symbol dan tag sudah bisa lebih diminimalisir lagi melalui Jade HTML.

Jade HTML adalah Node Template Engine dengan performa tinggi yang dipengaruhi oleh Haml dan diimplemetasikan dengan Javascript.

Perbedaan

!!! 5
html(lang="en")
  head
    title= pageTitle
    :javascript
      | if (foo) {
      |    bar()
      | }
  body
    h1 Jade - node template engine
    #container
      - if (youAreUsingJade)
         You are amazing
      - else
         Get on it!
         Get on it!
         Get on it!
         Get on it!

!!! 5

html(lang="en")

head

title= pageTitle

:javascript

| if (foo) {

| bar()

| }

body

h1 Jade - node template engine

#container

- if (youAreUsingJade)

You are amazing

- else

Get on it!

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      //<![CDATA[
      if (foo) {
        bar()
      }
      //]]>
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container">
      <p>You are amazing</p>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

//<![CDATA[

if (foo) {

bar()

}

//]]>

</script>

</head>

<body>

<h1>Jade - node template engine</h1>

<p>You are amazing</p>

</div>

</body>

</html>

Jade HTML mereduksi symbol-symbol yang ada pada HTML biasa. Seperti contoh diatas Jade HTML memudahkan dalam penulisan < div id=” ”> dengan cukup menuliskan tanda kress (“#”) saja layaknya CSS. Selain itu, jade HTML juga mereduksi penutupan pada masing-masing tag. <tag> dan </tag> menandakan sebuah syntax yang akan dieksekusi. Sehingga muncul pertanyaan bagaimana cara menentukan Batasan-batasan pada syntax jika tidak ada penutup dari sytax tersebut.

Jade HTML memanfaatkan whitespace. Untuk menjadi child dari sebuah tag, tag lainnya harus lebih menjorok kedalam sebanyak satu tab.

Contohnya :

Body

   H1 Jade node

   #container

Body

H1 Jade node

#container

Apabila baris diatas diterjemahkan ke dalam HTML biasanya.

<body>
    <h1> Jade node </h1>
    <div id=”container”> </div>
</body>

<body>

</body>

Dikarenakan h1 menjorok kedalam sebanyak satu tab maka h1 akan menjadi child dari body sedangkan container berada posisi yang sejajar dengan h1 sehingga container tidak menjadi child dari h1

Kemudian akan muncul kembali pertanyaan, bisakah Jade HTML langsung melakukan rendering pada browser seperti HTML biasanya?. Saying sekali belum, untuk bisa melakukan rendering pada browser Jade HTML harus di compile terlebih dahulu.

Selamat mengenal Jade HTML, jika bingung cara menggunakannya tunggu postingan kami selanjutnya ya ^^

Perbedaan

Bagikan ini: