Sabtu, 22 April 2017

Tutorial Sublime Text 3 – #12 Emmet (Bagian 3)

       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 – #11 Emmet (Bagian 2) 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.

Lupacode - Tutorial sublime text emmet

       Kita masih akan melanjutkan materi tutorial sebelumnya yaitu masih dalam materi sublime text dimana pada artikel kali ini kita sudah masuk kedalam bagian terakhir dalam materi pembahasan mengenai plugin emmet. Ini merupakan materi tutorial bagian 3 dimana pada bagian1 dan 2 telah kita bahas pada artikel sebelumnya, jika kalian belum mempelajari materi yang sebelumnya maka saya sarankan terlebih dahulu untuk mempelajari materi materi sebelumnya.
       Baiklah sekarang kita akan mencoba yang CSS dalam menggunakan plugin emmet, pada materi sebelumnya kita telah membuat sebuah struktur html sederhana dengan menggunakan perintah atau syntax dari emmet tersebut. untuk css misalkan saya mempunya sebuah file css, dan saya ingin memberi style pada sebuah div yang berada didalam folder yang sama. Kita masih menggunakan folder latihan yang sebelumnya diaman kemarin kita sudah memuat file index.html sebagai contoh. Sekarang saya sudah membuat satu file css dan saya beri nama style.css
        Didalam css jika kita ingin memberikan sebuah style pada elemen tertentu, misalkan saya ingin memberikanstyle pada class container,. Maka saya tuliskan seperti ini


.container{
 Widht: 20px;
 Height: 20px;
  }

       Jika kita menggunakan fasilitas sublime text biasa dan kita menuliskan nya satu persatu secara manual, nah tidak kalau untuk emmet. Didalam emmet misalkan kita ingin menuliskan widht:20px; maka kita cukup menuliskan w20 kemudian kita tekan tab, ,maka otomatis akan dibuatkan widht sebesar 20px.
widht:20px;
       Begitupun untuk heigt juga sama, kita hanya perlu tuliskan saja h20 maka akan dibuatkan height sebesar 20px. Kalau mau persen widhtnya agar responsive kalian cukup tulis w80p widht 80 dan p untuk persen, maka akan langsung dibuatkan
widht:20%;
     Lalu misalkan saya mau kasih margin, kalau dalam sublime text kita tuliskan margin: 20px; tapi kalau dengan menggunakan emmet kita cukup m20 kemudian tekan tab, maka akan langsung dibuatkan margin sebesar 20px untuk ke empat sisinya. Gimana kalau saya mau ngatur sisi sisinya berbeda ? kalian ingat kan kalau saya tulis margin: 20px auto; itu artinya  dan kanan 20% sedangkan untuk atas dan bawahnya adalah auto, kalau pakai emmet kalian cukup tulis m20-auto kemudian kita tekan tab maka akan langsung dibuatkan seperti contoh diatas.
        Untuk padding juga sama kita tuliskan p10-20-30-40 kemudian kita tekan tab
padding: 10px 20px 30px 40px;
Berarti ini atas kanan bawah dan kiri. Sekarang kita coba lagi misalkan saya mau kasih color maka saya cukup tulis c kemudian tekan tab
Color: #000;
Kita akan langsung dibuatkan dengan nilai otomatis warna nya adalah hitam.

     Sekarang misalnya kita mau tulis background color, kita cukup tulis bgc kemudian kita tekan tab
background-color: #fff;
kalau misalkan kita mau memberikan color sendiri, kita cukup ketik c#0 kemudian tekan tab maka akan dibuatkan
color: #000;
untuk background color juga sama kita hanya cukup ketikan bgc kemudian # kemudian code color nya. Misalnya seperti ini bgc#123123; kemudian tekan tab
background-color: #123123;
   Masih banyak yang lain yang belum saya kasih contoh disini, nanti kalian tinggal lihat dokumentasi nya saja. tapi dengan ini saja ini sudah mempercepat coding saya di css dan html.
      Lalu selanjutnya ini yang keren juga misalnya saya menuliskan border-radius: seperti itu yah lalu saya isi border-radius: 30px; ini adalah property css 3 mungkin sekarang sudah di support untuk semua browser. Tapi ada property yang ga di support oleh semua browser dan kalian ingin ngasih vendor prefict kita tambahkan diatasnya –webkit-border-radius: 30px; terus nanti ada mozilla, opera dan lain sebagainya dan cukup ribet kalau kita tuliskan satu persatu dengan emmet kalian cukup tulis –bdrs lalu tekan tab


-webkit-border-radius: ;
-moz-border-radius: ;
-ms-border-radius: ;
-o-border-radius: ;
border-radius: ;
    dan kita tinggal tulis misakan 30px lalu semua nya berubah dan kita tinggal menekan esc untuk mengembalikan kursor nya menjadi satu.
       Kemudian yang terakhir kalau kalian bekerja dengan css pada saat menulisakan atribut nya atau menuliskan property nya emmet itu melakukan parzi searching sama seperti mungkin kalau kita tekan CTRL+SHIFT+P untuk command palette seperti yang pernah kita bahas pada materi sebelumnya.
    Misalnya jika kita akan menambahkan background-image maka kita tidak perlu menuliskan semua huruf yang ada pada background image tersebut, kita cukup menuliskan huruf apa saja yang ada didalam kata background image tersebut, misalkan saya tulis baim maka otomatis paziz searching berlaku disini dan sublime text akan langsung menawarkan pilihan yang kita maksud.
      Contoh lain misalkan saya ingin menambahkan font family maka saya tidak perlu menuliskan semua kata tersebut, yang hanya perlu saya tuliskan adalah huruf yang ada di kata font family terserbut. Maka secara otomatis sublime text akan menawarkan pilihan yang kita maksud dan kita tinggal klik saja atau tekan enter saja. Atau misalkan saya ingin menambahkan text-decoration kata text yang didepan nya bisa saya lewat dan saya hanya perlu tulis deco maka sublime text sudah menawarkan pilihan yang saya maksud.
        Oke mungkin sampai sini kalian sudah bisa lihat bahwa emmet itu sangat memudahkan, dan itu adalah salah satu plugin yang sangat populer di sublime text dan silahkan kalian instal serta kalian elajari sendiri lebih dalam lagi mengenai emmet.
       Kalau kalian ingin melihat secara detailnya kalian dapat kembali balik lagi mengunjungi halam website nya yaitu www.emmet.io atau kalian bisa juga masuk langsung ke halaman documentasi nya docs.emmet.io atau kalian dapat mengklik documentation pada halaman utama emmet nya. Dan kalian akan langsung diarahkan kesini

Lupacode - Tutorial sublime text emmet 1

         Kalian dapat lihat disana banyak sekali penjelasan mengenai emmet itu, kalian bisa coba – coba sendiri dan kembangkan sendiri agar kalian dapat lebih menguasai lagi syntax – syntax emmet itu. Dan saya yakin ini akan jauh lebih membantu dalam hal coding kalian, kalian bisa ngoding dengan sangat cepat apabila kaian sudah tau shortcut atau perintah – perintah yang harus kalian gunakan untuk mempercepat coding kalian 
      Baiklah sampai sini dulu untuk pembahasan materi mengenai emmet bagian ke tiga ini, dimana ini adalah materi terakhir dalam membahas mengenai emmet. Selanjutnya kita masih dalam pembahasan mengenai sublime text dan kita akan lanjutkan ke dalam materi selanjutnya yaitu :

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