Sabtu, 18 Agustus 2018

Editing pada Sublime Text

Assalamualaikum wr wb......

Senang berjumpa lagi dengan teman-teman dalam tutorial lanjutan mengenai Sublime Text. Setelah sebelumnya kita telah belajar bagaimana melakukan Konfigurasi Sublime Text, kali ini kita akan mempelajari cara cepat melakukan editing pada sublime text atau bisa dibilang kita akan belajar apa saja shortcut yang ada pada sublime text dalam melakukan pengeditan.

Baiklah tidak perlu panjang lebar kita langsung saja pada tutorialnya, pertama-tama silahkan teman-teman membuat file dengan eksistensi .html, .php, .css dan .js atau bisa langsung saja mendownloadnya pada link di bawah ini :

FILE LATIHAN

Jika sudah memiliki filenya silahkan teman-teman buka pada sublime text, selanjutnya teman-teman bisa melakukan pengeditan sekarang pada file tersebut, berikut adalah shorcut yang dapat mempermudah teman-teman dalam melakukan pengeditan :

=} Untuk membuat komentar tekan CTRL /, komentar bertujuan agar mempermudah kita dalam memahami code program, contoh perhatikan gambar berikut
Contoh komentar pada file html
 
Contoh komentar pada file php dan javascript
=} Selain dapat digunakan untuk membuat komentar, shorcut diatas juga dapat menonaktifkan script yang sudah kita buat caranya adalah dengan memblok script yang ingin dijadikan komentar, kemudian tekan CTRL /, maka secara otomatis script akan nonaktif dan berubah menjadi komentar, sebagai contoh perhatikan gambar berikut :

Sebelum menekan ctrl /
Sesudah menekan ctrl /
=} Jika teman-teman ingin memunculkan atau menghilangkan tampilan sidebar pada sublime tekan tombol CTRL K, B.

Tampilan Sidebar
=} Untuk membuat lebih dari satu cursor atau Multiple Cursor, tekan dan tahan tombol CTRL kemudian arahkan pada bagian mana cursor lainnya akan diletakan. Tujuan dari multiple cursor ini agar memudahkan kita meuliskan kata atau kode program yang sama hanya dengan satu kali mengetik, untuk lebih jelasnya perhatikan video berikut ini


=} Untuk Menyeleksi satu karakter atau kata arahkan cursor pada bagian tengah kata yang ingin diseleksi lalu tekan CTRL D, dan apabila ingin menyeleksi karakter/kata yang sama dan lebih dari satu, teman-teman dapat mengarahkan kursor pada bagian tengah kata kata lalu tekan tombol Alt + F3, maka secara otomatis semua kata yang sama akan terseleksi.

Demikianlah tutorial kita pada kali ini jika ada hal yang ingin ditanyakan atau ingin memberikan saran silahkan tinggalkan dikolom komentar, dan juga admin mohon maaf jika terdapat kekurangan dalam penulisan tutorial ini.

Terimakasih atas kunjungan teman-teman, sampai jumpa di tutorial selanjutnya.....😆

Sumber :

Kamis, 16 Agustus 2018

Konfigurasi Sublime Text

Assalamualaikum wr wb.....

Jumpa lagi di blog PINIM.NET, pada potingan kali ini kita akan mempelajari bagaimana cara melakukan konfigurasi pada Sublime Text.

Baik langsung saja ke tutorialnya :
  • Untuk memperbesar ukuran huruf tekan (ctrl +) sedangkan untuk memperkecilnya tekan (ctrl -)
  • Untuk merubah warna latar pada sublime text, pilih menu "Preferences >> Color Scheme" lalu silahkan pilih tema warna yang teman-teman sukai
  • Untuk memberikan jarak antar tulisan silahkan pilih menu "Prferences >> Setting" pada bagian "Setting Default", teman-teman cari saja kata "line_padding" dengan menekan (CTRL F), lalu copy "line_padding" dan pastekan pada "Setting User", lalu atur jaraknya sesuai keinginan. Lebih jelasnya perhatikan gambar berikut :


    Jangan lupa untuk disimpan, agar perintahnya dapat dijalankan.
Demikianlah sedikit tutorial bagaimana melakukan konfigurasi pada sublime text, jika ada hal yang ingin ditanyakan atau saran silahkan meninggalkan di kolom komentar, dan mohon maaf jika terdapat kesalahan dalam penulisan kata-kata.

Terimakasih sudah berkunjung di blog ini, nantikan tutorial-tutorial selanjutnya....😄
Wassalamualaikum wr wb....!!!

Cara Download dan Instal SublimeText

Assalamulaikum wr wb..... gmana kbr teman-teman semua? Semoga sehat selalu y....

Pada postingan kali ini kita akan belajar bagaimana cara mendownload serta menginstal sublimetext, setelah kita mengetahui apa itu SublimeText dan fitur apa saja yang ada pada sublimetext pada postingan sebelumnya yang berjudul "Pengenalan SublimeText". Baiklah tanpa panjang lebar kita langsung saja ke tutorialnya.

Cara Download dan Instal Sublime Text :

  • Silahkan teman-teman download terlebih dahulu filenya DISINI
  • Kemudian ekstrak filenya
  • Lalu install Sublime Text (sesuaikan dengan windows dari teman-teman jika 32 bit pakai yang x86 dan 64 bit pakai yang x64)
  • Setelah proses penginstalan selesai, selanjutnya pada folder "Patch", copy file "patchnya" ke folder instalasi di C:\Program Files\Sublime Text 3
  • Jalankan Patchnya dan klik tombol "Patch"
  • Selesai
Nah itulah tutorial singkat bagaimana cara download dan menginstall sublimetext 3, semoga bermanfaat. Jika ada salah-salah kata admin mohon maaf sebesar-besarnya, dan apabila ada hal yang ingin didiskusikan silahkan meninggalkannya pada kolom komentar

Dan saya ucapkan terimakasih telah berkunjung di blog ini, nantikan tutorial-tutorial selanjutnya....😆
Wassalamualaikum wr wb...

Senin, 13 Agustus 2018

Pengenalan SublimeText

Assalamualaikum wr wb.....
hallo teman-teman semua pada postingan kali ini saya ingin mengenalkan sebuah aplikasi yang mungkin buat kalian seorang programmer sudah tidak asing lagi mendengar namanya. Nama aplikasinya adalah SublimeText.

Hasil gambar untuk logo sublimetext

Apa itu SublimeText?

SublimeText merupakan sebuah text editor berbasis Phyton yang sering digunakan oleh kalangan programmer terlebih khusus Web Developer untuk menuliskan sebuah code-cede program, sublimetext ini dapat dijalankan diberbagai sistem operasi dan mendukung berbagai macam bahasa pemrograman, yaitu : C,  C++,  C#,  CSS,  D, Dylan,  Erlang,  HTML,  Groovy,  Haskell,  Java,  JavaScript,  LaTeX,  Lisp,  Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R,  Ruby, SQL, TCL, Textile and  XML

Fitur yang disediakan di SublimeText

Selain kelebihan yang telah disebutkan diatas sublime text juga dilengkapi dengan beberapa fitur, diantaranya sebagai berikut :
a.       Goto Anything
Fitur yang sangat membantu dalam membuka file ataupun menjelajahi isi dari file hanya dengan beberapa keystrokes.
b.      Multiple Selections
Memungkinkan user untuk mengubah banyak baris  sekaligus,  seperti  nama  variabel  dengan  mudah,  dan memanipulasi file lebih cepat dari sebelumnya.
c.       Command Pallete
Dengan fitur ini, user dapat dengan cepat mencari fungsi yang diinginkan, tanpa harus menavigasi melalu menu.
d.      Distraction Free Mode
Bila user memerlukan fokus penuh pada aplikasi ini, fitur ini dapat membantu user dengan memberikan tampilan layar penuh.
e.       Split Editing
Dapatkan  hasil  yang  maksimal  dari  monitor  layar  lebar  dengan dukungan  editing  perpecahan.  Mengedit  sisi  file  dengan  sisi,  atau mengedit dua lokasi di satu file. Anda dapat mengedit dengan banyak baris dan kolom yang user inginkan.
f.       Instant Project Switch
Menangkap semua file yang dimasukkan kedalam project pada aplikasi ini. Terintegrasi dengan fitur Goto Anything untuk menjelajahi semua file yang ada ataupun untuk beralih ke file dalam project  lainnya dengan cepat.
g.      Plugin API
Dilengkapi  dengan  plugin  API  berbasis  Phyton  sehingga  membuat aplikasi ini sangat tangguh.
h.      Customize Anything
Aplikasi  ini  memberikan  user  fleksibilitas  dalam  hal  pengaturan fungsional dalam aplkasi ini.
i.        Cross Platform
Aplikasi ini dapat berjalan hampir disemua  operating system  modern seperti Windows, OS X, dan Linux based operating system.

Untuk link Downloadnya silahkan klik link di bawah ini untuk :

DOWNLOAD


Sabtu, 11 Agustus 2018

Pengenalan HTML

Apa itu HTML?

  • HTML adalah bahasa markup standar untuk membuat halaman web.
  • HTML adalah singkatan dari Hyper Text Markup Language
  • HTML menggambarkan struktur halaman web menggunakan markup
  • Elemen HTML adalah blok pembangun halaman HTML
  • Elemen HTML diwakili oleh tag
  • Tag HTML melabeli potongan konten seperti "pos", "paragraf", "tabel", dan seterusnya

·         Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk merender konten halaman
Contoh dokumen HTML sederhana :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Contoh di atas menjelaskan
  • Deklarasi <! DOCTYPE html> mendefinisikan dokumen ini sebagai HTML5
  • Elemen <html> adalah elemen root dari sebuah halaman HTML
  • Elemen <head> berisi informasi meta tentang dokumen
  • Elemen <title> menentukan judul untuk dokumen
  • Elemen <body> berisi konten halaman yang terlihat
  • Elemen <h1> mendefinisikan heading besar
  • Elemen <p> mendefinisikan sebuah paragraph

Tag HTML


  • Tag HTML adalah nama elemen yang dikelilingi tanda kurung siku:
  • Tag HTML biasanya berpasangan seperti <p> dan </ p>
  • Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
  • Tag akhir ditulis seperti tag awal, tetapi dengan garis miring yang disisipkan sebelum nama tag

Web Browser

Tujuan dari web browser (Chrome, IE, Firefox, Safari) adalah untuk membaca dokumen HTML dan menampilkannya pada browser. Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk menentukan cara menampilkan dokumen, perhatikan gambar dibawah ini :



Struktur Halaman HTML

Di bawah ini adalah visualisasi struktur halaman HTML:



Deklarasi <! DOCTYPE>

Deklarasi <! DOCTYPE> mewakili jenis dokumen, dan membantu browser untuk menampilkan halaman web dengan benar. Hanya harus muncul sekali, di bagian atas halaman (sebelum tag HTML apa pun). Deklarasi <! DOCTYPE> tidak case sensitive artinya dapat ditulis dengan huruf besar maupun kecil. Deklarasi <! DOCTYPE> untuk HTML5 adalah:



Versi HTML

Sejak masa awal web, ada banyak versi HTML:

Version
Year
HTML
1991
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML
2000
HTML5
2014


Sumber : www.w3school.com