�ݺ�ߣ

BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 1
BAB II - INSTALASI DAN KONFIGURASI IDE
Tujuan Pembelajaran:
Setelah mempelajari bab ini siswa diharapkan dapat mampu:
1. Memahami tentang IDE Pemrograman Web Sublime Text
2. Menjelaskan bagaimana membuat HTML
3. Mengetahui dan Menggunakan Aplikasi Sublime Text dan membuat program
HTML sederha
A. Instalasi IDE Sublime Text
Instalasi Sublime Text dapat dilakukan dengan beberapa cara, tergantung
dengan sistem operasi yang digunakan. Sublime Text dapat di unduh secara gratis
di pada situs https://www.sublimetext.com/3
Berikut langkah-langkah menginstal Sublime Text
1. Pastikan komputer terhubung ke internet
2. Selanjutnya unduh Sublime Text sesuai dengan sistem operasi di link
berikut https://www.sublimetext.com/3
3. Setelah selesai unduh maka double klik file hasil unduh tadi
4. Kemudian klik Run

5. Kemudian klik Next
6. Klik Install
7. Klik Finish
B. Menjalankan Sublime Text
1. Buka aplikasi Sublime Text 3. Maka akan muncul tampilan awal seperti
gambar di bawah ini:
2. Klik View lalu arahkan pointer ke tulisan Syntax. Setelah itu, akan muncul
jendela baru. Pilih salah satu bahasa program sesuai dengan apa yang akan
digunakan. Jika ingin membuat file HTML, maka pilih HTML.

3. Tuliskan tag html pada kotak isian. Jika ingin lebih cepat menuliskannya, cukup
dengan menulis html dan tekan TAB di keyboard. Maka secara otomatis tag
html akan muncul.
4. Ketiklah file HTML seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1> This is a Heading </h1>
<p> This is a Paragraphp </p>
</body>
</html>
C. Merubah Tampilan Sublime Text
Di Sublime Text 3, kita bisa mengubah tampilan Color Scheme untuk area teks
editor. Caranya klik menu Preferences lalu sorot Color Scheme. Maka akan mucul
jendela baru. Kemudian pilih salah satu tema. Disini saya memilih tema iPlastic.
D. Membuat File HTML
1. Buka aplikasi Sublime Text 3. Maka akan muncul tampilan awal seperti gambar
di bawah ini:

2. Klik View lalu arahkan pointer ke tulisan Syntax. Setelah itu, akan muncul jendela
baru. Pilih salah satu bahasa program sesuai dengan apa yang akan digunakan.
Jika ingin membuat file HTML, maka pilih HTML.
3. Tuliskan tag html pada kotak isian. Jika ingin lebih cepat menuliskannya, cukup
dengan menulis html dan tekan TAB di keyboard. Maka secara otomatis tag html
akan muncul.
4. Ketiklah file HTML seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1> This is a Heading </h1>
<p> This is a Paragraphp </p>
</body>
</html>

E. Menyimpan File HTML
1. Klik File dan Klik Save
2. Pilih folder untuk menyimpan file, pastikan kita sudah membuat nama folder
untuk menyimpan file HTML, seperti yang terlihat pada gambar dibawah ini
3. Ketik nama file misalnya html_latihan_1, dan pilihlah lokasi penyimpanan file
dan simpan file difolder xampp-htdocs-web (contoh saja untuk folder web)
4. Klik Save
F. Menjalankan File HMTL
1. Sebelum menjalankan file HTML agar dapat tampil di browser terlebih dahulu
kita harus mengaktfikan XAMPP dengna menalankan software XAMPP, lalu klik
Start pada tulisan Apache dan MySQL.
2. Buka browser misalnya Mozila Firefox. Lalu ketikan localhost/ionic/
html_latihan_1.html pada kolom address bar. Lalu tekan Enter di keyboard.
3. Maka berikutnya akan tampil di browser seperti yang terlihat pada gambar
dibawah ini
Selamat! file HTML kita sudah dapat berjalan. Dari percobaan ini kita dapat
melihat bahwa setiap halaman HTML harus diakhiri dengan ekstensi .html. Anda
mungkin juga akan menemukan beberapa halaman juga memiliki ekstensi .htm,
ekstensi ini digunakan untuk mendukung Windows versi lama yang masih
menggunakan ekstensi 3 huruf di belakang sebuah file.

RANGKUMAN :
1. Instalasi Sublime Text dapat dilakukan dengan beberapa cara, tergantung
dengan sistem operasi yang digunakan. Sublime Text dapat di unduh secara
gratis di pada situs https://www.sublimetext.com/3
2. Di Sublime Text 3, kita bisa mengubah tampilan Color Scheme untuk area teks
editor. Caranya klik menu Preferences lalu sorot Color Scheme. Maka akan
mucul jendela baru. Kemudian pilih salah satu tema.
3. Sublime Text 3 adalah salah satu editor IDE yang banyak digunakan di dunia
industry programming karena fitur dan kemampuan dan kemudahan
penggunaannya.
4. Berikut ini adalah struktur dasar HTML yang perlu diketahui oleh para
pemrograman web :
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading </h1>
<p>Paragraphp </p>
</body>
5. Setiap halaman HTML harus diakhiri dengan ekstensi .html. Anda mungkin juga
akan menemukan beberapa halaman yang memiliki ekstensi .htm, ekstensi ini
digunakan untuk mendukung Windows versi lama yang masih menggunakan
ekstensi 3 huruf di belakang sebuah file.

�ݺ�ߣ

Bab2

Recommended

More Related Content

What's hot (19)

Similar to Bab2 (20)

More from TeukuMahawira (20)

Recently uploaded (20)

Bab2