Sebelum kita belajar lebih lanjut mengenai html ada baiknya kita men-download dulu kode editor Karena untuk selanjutnya yang akan kita gunakan adalah kode editor bukan notepad seperti sebelumnya ya Jadi yang akan saya lakukan pertama adalah m-download kode editor yang akan saya pakai adalah sublim Tex dan saya akan mencontohkannya pada sistem operasi Windows 7 baik yang pertama yang harus kita lakukan adalah Kita harus mengunjungi website dari Sublime teks ya website-nya ada di sublimetex.com Nah di sini kalian bisa lihat sublimetex adalah teks editor yang memiliki kemampuan yang bagus ya dibanding kalau kita menggunakan notepad kita masuk ke menu download lalu kalian bisa lihat di sini sublem Tex yang sudah versi stabil adalah versi 2 kalau kalian ingin m-download versi 2 silakan download eh pada salah satu link di sini ya kalau misalkan Kalian pakai osx pilih yang ini kalau pakai Windows 32 bit pilih yang ini Windows 64 bit pilih yang ini tapi yang akan kita instal nanti bukan Sublime Tex 2 kita akan instal sublim Tex 3 nah sublim Tex 3 eh masih dalam versi beta tapi enggak apa-apa kita akan pakai karena e menurut saya ini yang paling baru ya jadi akan kita download adalah yang ini yang versi window n kalau sudah di-download software-nya seperti ini kita bisa Langsung instal aja kita dobel klik kita jalankan seperti biasa ya seperti kalian menginstal software-software lain konfigurasinya tidak terlalu eh sulit ya next next finish aja kalau sudah selesai kita bisa lihat eh software-nya sudah reinstal Nah setelah diinstal yang biasa saya lakukan adalah Sebelum saya menjalankannya saya simpan dulu di taskbar jadi saya dulu di dalam tasbar seperti ini ya supaya nanti kita mudah mencarinya tinggal klik aja di sini dan sebelum kita jalankan Ee gimana kalau kita buat dulu folder baru supaya nanti kita bikin E filenya di dalam folder baru ya kita bikin folder baru di sini ini folder kita kasih nama latihan du jadi folder file yang akan kita buat ada di dalam folder ini Oke baru sekarang kita jalankan aplikasinya nah ini adalah tampilan e awal dari aplikasi sublem Tex kalau kita mau buat file baru file html kita klik aja file new kalau kita buat file new nah ini sebetulnya kita sudah bisa tulis di sini misalnya kemarin doc type gitu ya untuk eh sintaks html standar nah tapi biasakan sebelum menuliskan apapun itu kita save dulu ya alasannya supaya Nanti kalian enggak lupa sudahah nulis banyak ternyata belum disave Jadi mendingan dari awal save dulu aja kita save simpan di folder kita desktop html latihan 2 kita kasih nama seperti yang video sebelumnya halaman 1 html Jadi kalian bisa kasih ekstensinya di sini langsung atau kalian tulis nama filenya saja lalu pilih Mau disimpan sebagai apa menyediakan dukungan untuk banyak se file seperti ini mau pilih html tinggal diklik saja klik save Nah kalau misalkan kita sudah save itu kalau kalian lihat di bawah kanan Itu otomatis file-nya akan berubah jadi html sebelumnya tadi kalau kalian belum save Itu pilihannya plain Tex Ini untuk apa Pilihan di sebelah kanan ini pilihannya agar sublem tex-nya tahu kita mau bikin file apa kalau sublem tsnya sudah tahu itu nanti fasilitas fasilitas yang dimiliki sama bahasa pemrograman tadi atau bahasa markup itu bisa kita gunakan contohnya begini misalnya saya ketikan Eh sintaks seperti kemarin ya lebih kecil atau kurung siku eh doc type html ini untuk menentukan kalau ini HTML 5 nah ini lalu Ee Kita buka tag HTML nah Coba kalian lihat warna html ini beda ini yang disebut dengan sytax highlighting jadi untuk menentukan warna sintxs dari bahasa pemugaman tertentu sehingga nanti kalau kalian nulis sintaksnya banyak nanti kelihatan perbedaan antar sintaksnya Terus kalau misalkan Kalian salah misalkan kalian nambahkan spasi di sini itu kalian bisa lihat warnanya berubah J kalian tahu kalau sintaksnya salah Oke ini buka html lalu kita lakukan tutup html ini lihat ini salah satu kemudahan daribl kita buka kurung siku lalu tambahkan slash kemarin ya sebagai tutup html begitu saya tambahkan slash kalian bisa lihat otomatis ditutupkan oleh si sublim teksnya jadi enggak perlu nulis lagi html terus tutup sama halnya seperti pada saat kita nulis head kurung buka head tutup lalu kurung buka lagi slash otomatis ditutupkan sama seperti body body ditutup slash ditutupkan ya tapi e kalian bisa nulis seperti ini manual tapi lama ya sama aja kayak notepad ini hanya dikasih kemudahan sedikit pakai slash head pakai SL body dan SL html s t itu sudahudah ngasih kita kemudahan kalian gak perlu nulis semua ini kalian tinggal tulis html tanpa kurung siku lalu tekan tab nah kalian bisa lihat ajaibs langsung di Tampilkan seluruh sintaks standar html-nya dan kalau kalian lihat sekarang kursornya ada di mana dia otomatis sudah ada di tengah-tengah title Jadi kalian tinggal tulis aja judul halamannya pemr aman web 1 ya lalu untuk menuliskan eh paragrafnya kan Langsung tulis di body kemarin kita nulis apa Hello world gitu ya lalu dibungkus dengan tag p Nah sekarang kalian nulisnya gak enggak perlu begini lagi manual seperti itu ya ggak usah Kalian mau bungkus sebuah teks dengan tag apa misalnya paragraf kalian tinggal tulis P lalu tekan Tab itu otomatis dibuatkan tagp-nya dan kursornya sudah otomatis berada di tengah kalian tinggal tulis Hello world ya lalu paragraf 2 Selamat datang di kuliah pem programan web 1 nah seperti itu ya mudah bukan yang selanjutnya yang akan saya Tunjukkan adalah ini biasanya saya nulisnya menggunakan huruf yang lebih besar dari ini ya kalau mau memperbesar atau memperkecil huruf kalian bisa ke preference font lalu pilih mau larger atau mau smaller atau ada ee shortcut-nya kalau mau bikin hurufnya besar tinggal pencet ktrol lalu tanda tambah ya kalau Mau ee lebih kecil konttrol shift tanda tambah kita coba saya mau hurufnya tambah besar berarti tekan conttrol plus selanjutnya kalau kalian merasa eh skema warna dari halaman ini ee tidak cocok atau kalian enggak suka dengan skema warna kalian bisa pilih di preference ada color scheme ya misalkan kalian enggak suka warna pink dengan background hitam ini kalian tinggal ke preference color scheme nah ini ada banyak yang di eh ditawarkan nama sisabl Tex default-nya macam-macam boleh pilih misalkan yang pertama ini atau mau pilih yang lain ya Saya biasanya menggunakan yang solarized light tapi untuk ee video ini saya pilih yang default-nya aja monokai tadi kita yang pertama pakainya monokai selanjutnya yang akan saya Tunjukkan adalah ini tadi Ee kita membuat file menggunakan menu di sini ya Open eh file terus new file Nah kita biasanya ingin membuka sebuah folder ya misalkan ini saya close saya coba close dulu ya jadi saya buka yang saya ingin saya ingin membuka file yang tadi misalnya ya saya bisa aja open file tapi biasanya yang saya pengin lihat adalah foldernya ya nanti kita dapat dengan mudah menambah dan menghapus file atau mengubah file diasanya saya gunakan Open folder lalu saya pilih folder yang akan kita pakai yang ini misalkan html Saya klik select folder ini akan tampil dua window Nah kita close aja yang pertama window yang kedua ini saya perbesar lagi ini sudah membuka folder html yang kita buat supaya lebih jelas kalian bisa ke menu view lalu sidebar lalu show sidebar nan di sebelah kiri ini akan muncul e folder kita dan di dalamnya ada folder dan file apa saja latihan s ada halaman S latihan du juga ada halaman sat yang kita buat tadi jika ingin menambahkan file baru Kalian tidak usah ke sini lagi ke file new file sudahah kita Klik Kanan di sini new file ya Jadi begitu disave kita tinggal tulis halam2.html begitu otomatis dia menambahkan di sini ya untuk menghilangkan sidebar kalian bisa ke view lagi sidebar hide atau kalian bisa Munculkan menggunakan shortcut nah ini shortcutnya ctrl k lalu ctrl B ya jadi gantian tekan ctrol KP gitu bisa ya kita akan coba saya tekan conttrol KP muncul saya tekan lagi conttrol KP gantian huruf k dan b-nya jangan ditekan bersamaan lalu kalau kita mau membuka dua file sekaligus nanti akan terlihat seperti Tab di browser halaman 2 ini halaman S ya kalau kita gak akan pakai yang halaman S kita close saja kalau kita udah gak butuh sidebarnya kita CL lagi jugatr k okekan di halaman ini juga in ee menuliskan html ya Jadi kita ketik tadi keyword-nya html tab kita kasih judul pemrograman web 1 lu dari sini ketika kursornya berada di akhir e judulnya kalian bisa pcet tab lagi otomatis dia langsung lari ke body jadi itu juga mempermudah kasih paragraf lagi ini adalah halaman du misalnya begitu ya lalu saya save bisa pakai Ctrl S atau file save sama aja itu seperti biasa nah Ketika saya ingin melihat eh halaman web yang sudah dibuat ini di browser itu eh di video sebelumnya kita coba kan kita Buka folder lalu kita buka latihan dua Nah kita buka di file-nya tapi dengan menggunakan sublim text dapat dengan mudah kalian Klik Kanan aja di area sini di mana aja Lalu ada pilihannya Open in browser kalau diklik jadi fileennya akan dibuka secara otomatis menggunakan browser default dari sistem operasi kalian baik sampai sini dulu mungkin pengantar penggunaan sublim teksnya ya ini kalian bisa eksorasi e ini penggunaannya enggak terlalu susah ya atau kalau kalian pengin lihat dokumentasinya gimana cara pakai dengan lebih detail kalian bisa ke website-nya bisa slemtex.com lalu ke menu support lalu Kalian cari support untuk sublemtex 3 di bawah ini ada ada documentation index atau unofficial documentation kalian bisa pilih dua ini lalu pelajari eh misalkan Saya klik yang su t 3 ini pelajari mau menggunakan yang mana baik ya sampai sini dulu kita ketemu di video selanjutnya untuk membahas Lebih Detail mengenai HTM saya sandagali sampai ketemu lagi