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