Jumat, 21 April 2017

Tutorial Sublime Text 3 – #11 Emmet (Bagian 2)

          Assalamualaikum Wr. Wb . . 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 – #10 Emmet (Bagian 1) 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 DaftarIsi disana seluruh pembahasan dari mulai materi yang pertama sampai dengan materi yang saat ini kita bahas tersedia disana.

Tutorial Sublime text 3 - Emmet bagian 2 Lupacode.net

     Pada artikel atau materi sebelumnya kita telah mempelajari mengenai plugin emmet, dan kita sudah membahas mengenai bagaimana cara menginstal nya, kemudian syntax penulisannya untuk kita terapkan kedalam html.
      Baiklah pada pembahasan materi kali ini kita akan melanjutkan mengenai plugin emmet yang kemarin dimana pada materi kali ini merupakan materi yang ke dua didalam pembahasan plugin emmet tersebut. sekarang kita akan membahas mengenai syntax – syntax yang dimiliki oleh emmet ini, yang nantinya akan kita gunakan untuk menyingkat kode penulisan html. Pada materi sebelumnya saya hanya menuliskan beberapa karakter lalu ketika saya tekan tab kemudian dibuatkan lah struktur html yang cukup lengkap dan banyak
      Ada beberapa syntax atau keyword yang harus kita ketahui, dan pada materi kali ini kita akan bahas satu – persatu secara detail bagaimana tentang cara penggungaan nya. Baiklah kita mulai saja, ini kita akan melanjutkan dari studi kasus kita yang pada materi sebelumnya yaitu pada bagian 1

* Keyword > “lebih besar dari”
      Keyword yang pertama harus kalian tau di emmet adalah > “lebih besar dari” yah dan ini adalah untuk menyimpan tag didalam tag lain. Contoh nya begini misalnya saya punya elemen div lalu didalam div saya mempunyai sebuah paragraf misalnya, jadi kita hanya perlu menulis seperti ini
div>p
     “Buat elemen div lalu didalam nya tulis elemen p” kemudian simpan kursor nya di akhir lalu tekan tab maka akan dibuatkan seperti ini

<div>
          <p> </p>
</div>

Atau kita juga bisa menambahkan menjadi tumpuk didalam nya, misalkan kita menambahkan span didalam p
div>p>span
      Kemudian seperti biasa letakan kursor nya di akhir lalu tekan tab, maka akan dibuatka span didalam p

<div>
          <p> <span> </span> </p>
</div>

  Oke jadi itu tanda lebih besar dari “>” itu artinya simpan atau buat elemen didalam elemen lain. Lalu yang lebih keren seperti ini, kalau misalkan saya tulis
.container
       Kemudian saya tekan tab, maka akan dibuatkan div dengan class container
<div class=”container”> </div>
       Tapi kalau saya buat paragraf lalu saya tuliskan seperti ini misalnya
p>.tulisan
      ini emmet akan sangat cerdas membaca bahwa didalam p itu yang dibuat bukan lah div melainkan span Karna itu inline dan blok elemen nya
<p><span class=”tulisan”> </span></div>
      Sama juga seperti saya punya ul dan didalamnya saya tulisan misalkan .link
ul>.link
     maka emmet akan dengan sangat cerdas membaca dia akan membuat elemen <li>

<ul>
          <li class=”link”> </li>
</ul>

*Keyword + “tanda plus”
     Kalau plus ini untuk membuat elemen yang sejajar. Jadi bukan anak dari atau elemen didalam nya tapi sejajar dengan elemen yang kita buat. Seperti ini misalkan
div+p
      Saya punya div plus p maka akan dibuat sejajar bukan didalmnya, seperti ini hasilnya

<div> </div>
<p> </p>

Bagaimana paham yah sampai sini, jadi misalkan contoh lagi jika saya tulis seperti ini
div.p+a
maka ini akan membuat sebuah tag div dan didalam nya ada paragraf dan ada a

<div>
          <p></p>
          <a href=””> </a>
</div>

*Keyword * “tanda bintang”
  Kemudian selanjutnya ada keyword tanda bintang atau multipikasi atau perkalian yah, jadi contohnya saya bisa bikin
ul>li*10
      saya mempunyai <ul> lalu didalam nya saya punya <li> dikali 10 lalu saya tekan tab, maka akan dibuatkan ul yang didalmnya ada li sebanyak 10

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Ya jadi ini sangat memudah kan sekali bagi saya.

*Keyword () “kurung buka dan kurung tutup”
        Selanjutnya ada keyword kurung buka dan kurung tutup ini adalah untuk membuatkan grouping. Contohnya seperti yang sudah saya lakukan pada materi sebelum nya yaitu pada bagian 1, atau seperti ini misalnya
.container>(.header>ul>li*4)+(.main>h2)
       Dapat kalian lihat ini seperti matematika saja, jadi group yang pertama ada didalam kurung akan 
sejajar dengan group yang ke dua. Kemudian simpan kursor nya di akhri lalu tekan tab

<div class="container">
<div class="header">
<li></li>
<ul> <li></li>
</ul>
<li></li> <li></li>
<h2></h2>
</div> <div class="main">
</div>
</div>


     Dan kalian dapat lihat sekarang saya mempunyai dua buah div yang sejajar dan masing – masing memiliki elemen di dalamnya.


*Keyword {} “kurung kurawal”
    Selanjutnya ada keyword tanda kurawal dan ini fungsinya untuk membuat text di dalamnya. Misalkan saya akan menuliskan sebuah text di dalam paragraf misalnya seperti ini
P{Hello emmet}
Maka akan dibuat kan sebuah paragraf dengan text hello emmet
<p>Hello emmet</p>

*Keyword $ “tanda dollar”
       Selanjutnya ada keyword tanda dolar, dan ini berfungsi untuk menambah kan urutan angka pada teks. Cotohnya begini, kalau tadi kita sudah mencoba mengisi tulisan pada sebuah tag paragraf
P{Hello emmet} namun sekarang kita tambahkan tanda dolar p{Hello emmet $}
Maka sekarang hasilnya akan seperti ini
<p>Hello emmet 1</p

      Sekarang dia akan menambah angka satu, nah ini akan sangat memudahkan ketika kalian bikin banyak list misalnya atau banyak elemen. Misalnya seperti ini
ul>li*10>{item $}
     Saya punya ul dan didalmnya ada li sebanyak 10, kemudian kita tambahkan tanda dolar sehingga urutannya akan secara otomatis mengurut.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 4</li>
<li>Item 3</li> <li>Item 5</li>
<li>Item 8</li>
<li>Item 6</li> <li>Item 7</li> <li>Item 9</li>
</ul>
<li>Item 10</li>
       Kalian bisa tambahkan dolarnya lebih dari satu untuk menambah kan angka 0  misalkan kalian ingin manambah kan 3 digit sperti ini $$$ maka nanti item pertama akan tertulis 001 dan seterusnya.

*Keyword Lorem
     Masih ingat jika kita menuliskan lorem kemudian kita tekan tab maka akan langsung dibuatkan text acak atau random, dan saya lupa berapa karakter untuk itu entah 80 atau 100 yah, nah kalau kalian pakai emmet  kalian tekan lorem kemudian kalian tekan tab nah dia akan membuat 40 kata ini lebih sedikit

“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”

     kalau ingin lebih banyak kalian dapat tambahkan mau berapa kata, misalnya 100, kalian cukup tulis lorem100 kemudian tekan tab maka secara otomatis akan dibuatkan sebanyak 100 kata nah jadi mudah sekali. Misalkan saya ingin membuat seperti ini
p*4>lorem10
 kemudian saya tekan tab
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed eiusmod</p>
<p>Lorem ipsum dolor sit amet,
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed eiusmod</p>
consectetur adipisicing elit, sed eiusmod</p>
consectetur adipisicing elit, sed eiusmod</p>
<p>Lorem ipsum dolor sit amet,


Saya buat empat buah paragraf dan masing – masing terdapat 10 kata. Jadi itulah syntax – syntax atau keyword – keyword yang dimiliki oleh emmet dan kita sudah mencobanya semua. Sekarang kalian telah mengetahui semua stntax emmet nya, nah saya punya sebuah struktur html seperti dibawah ini

Tutorial Sublime Text 3 – #11 Emmet (Bagian 2)

       Kemudian coba kalian bisa ga bikin struktur html dibawah ini pake satu baris perintah atau syntax dari emmet, nah coba kalian tuliskan syntax nya untuk kalian latihan belajar menggunakan syntax emmet. Kira – kira seperti apa coba kalian latihan sendiri. Nah setelah ini silahkan kalia bisa bermain main dengan syntax nya untuk menghasilkan struktur html yang lain. Jika ada yang bingung atau ada yang mau ditanyakan silahkan seperti biasa tulis saja di kolom komentar yang telah tersedia dibawah postingan ini, atau kalian bisa juga kirim email dengan mengisi form contact pada blog ini, jika tidak ada halangan apapun maka akan saya balas dengan cepat pertanyaan – pertanyaan yang teman teman tanyakan
   Baiklah sampai sini dulu untuk pembahasan materi bagian ke dua kali ini dan kita akan melanjutkan ke dalam materi bagian 3 yaitu Tutorial Sublime Text 3 – #12 Emmet (Bagian3)

2 komentar

pas banget gan,, saya coba d adobe animate sama keknya scriptnya... xml

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