Menulis Kode HTML Secara Cepat dengan Bantuan Zen-Coding

Menulis Kode HTML Secara Cepat dengan Bantuan Zen-Coding

Tutorial Information

ProgramNotepad++
Versionv.6.18
DifficultyStandar
Estimated Time45 Menit
DownloadClick this link

Anda pernah membuat template website? Tentu pada awalnya Anda akan menulis elemen-elemen dasar HTML dengan cara manual atau menulisnya secara berulang atau bahkan copy…

Anda pernah membuat template website? Tentu pada awalnya Anda akan menulis elemen-elemen dasar HTML dengan cara manual atau menulisnya secara berulang atau bahkan copy paste. Namun sekarang ada cara yang lebih cepat lagi. Yaitu menggunakan bantuan zen-coding.

Seperti yang tertulis pada situs (http://code.google.com/p/zen-coding/) bahwa Zen-coding merupakan :
Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code
Jadi semisal Anda akan menulis struktur kode HTML seperti berikut:
<div>
<ul>
	<li>data 1</li>
	<li>data 2/li></li>
	<li>data 3</li>
</ul>
</div>
Apabila menggunakan zen-coding cara penulisannya yaitu :
div>ul>li*3

Yang penting untuk diketahui adalah petunjuk aturan penulisan zen-coding, dapat dipelajari pada URL berikut: http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

Download Zen-coding

Lalu bagaimana Anda dapat menggunakan zen-coding agar dapat menulis kode HTML dengan cepat? Caranya yaitu Anda harus men-install zen-coding sebagai plugin atau Addon pada IDE atau text editor favorit Anda. Berikut ini adalah link dimana Anda dapat mendownload zen-coding sesuai dengan IDE yang Anda gunakan : http://code.google.com/p/zen-coding/downloads/list

Karena texeditor yang saya gunakan adalah Notepad++ maka untuk berikutnya akan saya jelaskan cara men-install dan menggunakan zen-coding pada Notepad++ .

Install Zen-coding pada Notepad++

Langkah-langkah yang dilakukan untuk men-install zen-coding yaitu:

  1. Download plugin zen-coding utuk Notepad++ di sini.
  2. Ekstrak isi file Zen.Coding-Notepad++.[xxx].zip
  3. Copy hasil ekstrak (file NppScripting.dll dan folder NppScripting) ke folder “..\Program Files\Notepad++\plugins\” Anda
  4. Restart kembali Notepad++.
  5. Perhatikan akan muncul menu Zen-coding, klik pada menu tersebut dan Anda akan mengetahui cara penggunaannya.
    Zen Coding Menu

    Zen Coding Menu

Menggunakan Zen-Coding pada Notepad++

Kali ini saya akan berikan 3 contoh sederhana bagamana penulisan zen-coding pada Notepad++ sehingga menghasilkan code yang diinginkan. Yang perlu diperhatikan yaitu tiap IDE memiliki shortcut yang berbeda-beda dalam mengeksekusi zen-coding menjadi HTML. Pada Notepad++ shortcutnya yaitu Ctrl+E.

Contoh 1 : template dasar website

Tulis kode berikut:

html>(head>title)+body

Seleksi satu baris kode tersebut kemudian tekan Ctrl+E untuk mengubahnya menjadi format HTML. Sehingga akan menghasilkan seperti berikut.

Contoh 2 : template dasar website + elemen div untuk header, content, sidebar dan footer

Sekarang mencoba menulis zen-coding yang lebih kompleks

Tulis kode berikut dalam satu baris

html>(head>title)+body>div#head+(div#body>div#sidebar+div#main-content)+div#footer

Seleksi satu baris kode tersebut kemudian tekan Ctrl+E untuk mengubahnya menjadi format HTML. Sehingga akan menghasilkan seperti berikut.

<html>
	<head>
		<title></title>
	</head>
	<body>
		<div id="head"></div>
		<div id="body">
			<div id="sidebar"></div>
			<div id="main-content"></div>
		</div>
		<div id="footer"></div>
	</body>
</html>

Contoh 3 : Template dasar website + elemen div untuk header, content, sidebar dan footer + class sesuai Bootstrap

Bootstrap merupakan front-end framework dari Twitter, dapat dipelajari pada laman berikut http://twitter.github.com/bootstrap/ . Tulis kode berikut dalam satu baris

html>(head>title)+body>(div.navbar>div.navbar-inner>a.brand+ul.nav>li*5>a)+(div.container>div.row>(div.span3>ul.nav.nav-list>li*8>a)+div.span9)+div.footer

Seleksi satu baris kode tersebut kemudian tekan Ctrl+E untuk mengubahnya menjadi format HTML. Sehingga akan menghasilkan seperti berikut.

<html>
	<head>
		<title></title>
	</head>
	<body>
		<div class="navbar">
			<div class="navbar-inner">
				<a href="" class="brand"></a>
				<ul class="nav">
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
				</ul>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="span3">
					<ul class="nav nav-list">
						<li><a href=""></a></li>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
					</ul>
				</div>
				<div class="span9"></div>
			</div>
		</div>
		<div class="footer"></div>
	</body>
</html>

Penutup

Demikian tutorial tentang penulisan zen-coding. Memang pada awalnya agak susah karena belum terbiasa. Namun penulis yakin jika Anda sudah terbiasa maka akan terasa menyenangkan. Dan pastinya Anda bisa sedikit pamer kepada rekan karena menulis zen-coding seakan melakukan sulap, hanya dengan satu baris kode dan tiba-tiba .. abrakadabra .. semua sudah tersaji dengan manis.

Tag: , , , , , , , , ,

12 Comments

Leave Comment
  1. Haqqi says:

    Wooow, kereeen.. kalau saya pake ZenCoding buat NetBeans nih.. :D

  2. Mustofa says:

    akhirnya ada juga yang menulis tentang zen coding. menurut saya sangat membantu sekali tool ini :)

  3. Waaah tulisan saya terbit. *terharu :D

  4. Yoga says:

    Lebih mudah dan nyaman

  5. nonots says:

    Luar biasa skali bapak fikar…ngerii ;-)

  6. linggabee says:

    Saya pakai np++ juga cuman download zen codingnya dari pluggin manager, dan itu menggunakan pyton,
    dan shortcut nya ctrl+alt+enter
    lainya sama… :)

    Salam kenal

  7. Hepindo says:

    alhamdulilah ketemu juga nie sofware…trims ya mas..

  8. hii kereeeenn gan .. baru nyoba ini

    Thanks For shared (Y)

Write Comment

Your email will not be published. The marked label is required.