Jumat, 21 April 2017

Tutorial Sublime Text 3 – #10 Emmet (Bagian 1)

        Hai – hai man-teman sahabat lupacode, selamat datang kembali diblog lupacode – Tutorial Pemrograman Dalam pembahasan meteri kemarin kita telah belajar mengenai sublime text, dan pada materi sebelumnya kita telah membahas mengenai Tutorial Sublime Text 3 – #9 Snippet bagi sahabat lupacode yang kebetulan baru saja mampir ke dalam blog ini, silahkan dipelajari dulu materi – materi yang sebelumnya dari pembahasan yang pertama. Karna didalam setiap materi pembahasan disini itu saling berhubungan antara materi sebelumnya dan materi selanjutnya. Atau sahabat dan teman – teman lupacode dapat langsung menuju pada halaman Daftar Isi disana seluruh pembahasan dari mulai materi yang pertama sampai dengan materi yang saat ini kita bahas tersedia disana.

Sublime text 3 - Plugin Emmet

     Pada pembahasan materi kali ini saya ingin melanjutkan pembahasan mengenai sublime text dimana kita  telah membahas banyak mengenai sublime text dengan ide agar kalian lebih jagoan menggunakan sublime text dan lebih cepat lagi ngoding nya dengan menggunakan sublime text sebagai editor kesayangan.
      Kali ini yang akan kita bahas mengenai plugin dari sublime text yang menurut saya keren sekali khususnya untuk para web desainer yang biasa bekerja dengan html dan css. Plugin yang akan kita pelajari yaitu namanya Emmet dan kalian bisa lihat di website nya  yaitu di www.emmet.io dan katanya ini adalah toolkit spesial untuk para web developer dan dia juga plugin untuk banyak sekali text editor populer salah satunya sublime text, yang katanya meningkatkan workflow kita pada saat kita ngoding html dan css khususnya.
     Lalu selain sublime text banyak sekali text editor yang bisa di instal kan plugin ini, jadi untul temen – temen yang  menggunakan text editor lain silahkan instal saja untuk code editor yang kalian sukai, tapi sekarang kita akan mencobanya khusus di sublime text. Oke tanpa berlama lama lagi kita langsung akan coba saja
     Sebelumnya gini, ceritanya saya mempunyai sebuah folder yang didalam nya terdapat satu buah file html yang didalmnya terdapat struktur sederhana seperti ini


<!DOCTYPE html>
<html>
<head>
 <title>Belajar Emmet</title>
</head>
<body>
 <div class="container">
  <div class="header">
   <ul class="nav">
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
    <li><a href="">Link 4</a></li>
   </ul>
  </div>
  <div class="main">
   <h2>Judul Artikel</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat.</p>
  </div>
 </div>
</body>
</html>

     Jadi ceritanya saya punya sebuah struktur html sederhana seperti diatas, dimana didalamnya ada div dengan class container yang membungkus semuanya lalu didalamnya saya punya dua buah div ada header dan ada main, didalam header saya punya ul classnya nav dan didalamnya ada li dan seterusnya, jadi kita ga usah lihat hasilnya yang akan saya bahas kali ini gimana caranya kita bisa menulis struktru html diatas dengan sangat cepat
     Sekarang kita coba pakai plugin yang namanya emmet yang tadi saya bilang sangat keren itu hehe, sebelum kita bisa pakai emmet ya tentu saja setiap plugin itu harus kita instal dulu. Cara menginstal nya sama dengan menginstal plugin seperti biasa yang sudah kita bahas pada materi materi yang sebelumnya, kalian bisa masuk kedalam menu Preference -> package control atau kalian bisa tekan shortcut nya dengan menakan CTRL + SHIFT + P lalu tulis saja install maka kita akan menunggu dulu,karna dia sedang mendownload daftar repositori nya, nah setelah muncul dan ini adalah plugin yang bisa kita install

Sublime text 3 - Plugin Emmet 1

     Lalu kemudian kita ketik emmet jadi dulu kalau kalian ada yang pernah tau namanya zen-coding dan sekarang berubah nama menjadi emmet

Sublime text 3 - Plugin Emmet 2

    Kalau sudah kemudian kita tekan enter dan kita tunggu nanti dia akan menginstal dan ini tergantung koneksi internet yang kita pakai bisa cepat atau lambat. Nah kalau sudah selesai nanti dia akan muncul seperti ini

Sublime text 3 - Plugin Emmet 3

      Dan kita disarankan untuk merestart sublime text nya terlebih dahulu. nah sekarang kita akan coba membuat dengan emmmet yah.
    Untuk membuat struktur html menggunakan emmet, kita tidak perlu mengetik html kemudian menakan tab, yang perlu kita lakukan adalah tekan tanda seru ! lalu tekan tab ya jadi emmet menggantikan html tab dengan tanda seru tab. Kemudian dia lebih lengkap ada atribut lang kemudian ada meta charset dan ini adalah standar html 5


<!DOCTYPE html>
<html lang="en">
<head>
         <meta charset="utf-8">
         <title></title>
</head>
<body>
</body>
</html>

     Kemudian sekarang didalam body kita bisa tulis yang saya sebut keren tadi yah, dengan menggunakan emmet untuk membuat sebuah struktur html sederhana seperti contoh diatas yang perlu kita lakukan adalah menulis syntax nya seperti ini

.container>(header>ul.nav>li*4>a{link $})+(.main>h2{judul artikel}+p>lorem 20)

      Kemudian kursornya saya taruh di akhir kemudian saya tekan tab, maka otomatis dibuatkan sama persis seperti contoh diatas

Sublime text 3 - Plugin Emmet 4

     Sama seperti contoh struktur sederhana html diatas dimana ada container dan didalam nya ada header class nya nav dan seterusnya. Dan kalian juga bisa lihat link nya juga otomatis terurut. Sekarang mungkin kalian bertanya – tanya ko bisa jadi seperti itu yah ? jadi sekali lagi, emmet ini gunanya untuk menterjemaah kan syntax yang tadi saya tuliskan menjadi syntax html. Jadi sebetulnya fasilitas emet itu ada macam – macam

1 . Menyingkat HTML / HTML Abbreviation
2 . Menyingkat CSS
3 . Action lainnya

Silahkan kalian bisa lihat saja di website nya www.emmet.io

      Mungkin itu dulu untuk pembahasan awal mengenai emmet ini jadi nanti untuk membahas plugin emmet ini saya akan bagi menjadi 3 artikel, karna waktu saya untuk menulis juga kelamaan yah, mungkin sangat panjang sekali jika saya membahas mengenai dasar emmet nya saja menjadi satu artikel atau satu pembahasan.
       Ini yang pertama tentang pendahuluan nya tentang bagaimana tadi kita telah pelajari kemampuan dari emmet ini yah lalu didalam materi selanjutnya saya akan bahas mengenai syntax emmet untuk menyingkat html. Jadi nanti akan saya jelaskan secara detail mengenai syntax yang tadi saya tuliskan diatas dan nanti didalam artikel yang terakhir atau bagian 3 saya akan membahas tentang syntax untuk menyingkat css.
     Jadi sampai sini dulu untuk pembahasan sublime text mengenai plugin emmet bagian 1 nya, selanjutnya kita akan langsung masuk kedalam pembahasan emmet bagian 2 yaitu TutorialSublime Text 3 – #11 Emmet (Bagian 2)

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon