Oleh John Friadi BAB 1

1. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 1
BUKU AJAR
PEMROGRAMAN WEB DAN PERANGKAT
BERGERAK DENGAN APP INVENTOR
Oleh:
John Friadi
2020

2. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 2
KATA PENGANTAR
Puji syukur penulis panjatkan kehadirat Allah SWT atas segala limpahan
rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan Buku Ajar
Pemrograman Web dan Perangkat Bergerak dengan App Inventor.
Ucapan terima kasih yang tidak terhingga penulis sampaikan terkhusus
kepada Pomotor I Prof. Ganefri, Ph.D dan Promotor II Dr. Ridwan, M.Sc.Ed yang
telah membimbing serta memberikan masukan kepada penulis dalam
penyelesaian buku ajar ini.
Buku Ajar yang dikembangkan ini jauh dari kesempurnaan, karena
sempurna hanya milik Allah SWT semata. Segala kesalahan dan kekurangan
dalam penulisan ini merupakan keterbatasan penulis sebagai peneliti.
Besar harapan penulis semoga ini dapat dimanfaatkan dan berguna
untuk kepentingan dan kemajuan dunia pendidikan serta dapat memberikan
informasi dan sumbangan pemikiran demi kemajuan ilmu pengetahuan dan
teknologi dimasa akan datang.
Padang, Februari 2020
Penulis
John Friadi

3. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 3
DAFTAR ISI
KATA PENGANTAR......................................................................................................................2
DAFTAR ISI..................................................................................................................................3
BAB I - KONSEP TEKNOLOGI PEMROGRAMAN WEB...................................................................6
A. Pendahuluan...............................................................................................................6
B.HTML............................................................................................................................6
C.Web Browser ...............................................................................................................7
D. Aplikasi Text Editor IDE...............................................................................................7
RANGKUMAN.........................................................................................................................8
UJI KOMPETENSI ......................................................................Error! Bookmark not defined.
BAB II - INSTALASI DAN KONFIGURASI IDE...................................Error! Bookmark not defined.
A. Instalasi IDE Sublime Text.................................................Error! Bookmark not defined.
B. Menjalankan Sublime Text...............................................Error! Bookmark not defined.
C. Merubah Tampilan Sublime Text .....................................Error! Bookmark not defined.
D. Membuat File HTML.........................................................Error! Bookmark not defined.
E. Menyimpan File HTML .....................................................Error! Bookmark not defined.
F. Menjalankan File HMTL....................................................Error! Bookmark not defined.
RANGKUMAN :.........................................................................Error! Bookmark not defined.
UJI KOMPETENSI ......................................................................Error! Bookmark not defined.
BAB III - FORMAT TEXT DAN HALAMAN WEB...............................Error! Bookmark not defined.
A. Struktur Dasar HTML........................................................Error! Bookmark not defined.
B. Tag Syntax dan Option .....................................................Error! Bookmark not defined.
C. Format Teks Dalam HTML ................................................Error! Bookmark not defined.
RANGKUMAN...........................................................................Error! Bookmark not defined.
UJI KOMPETENSI ......................................................................Error! Bookmark not defined.
BAB IV - FORMAT TABEL DAN HALAMAN WEB ............................Error! Bookmark not defined.
A. Format Tabel pada Halaman Web........................................Error! Bookmark not defined.
1. Tag-Tag Tabel dalam HTML ..............................................Error! Bookmark not defined.
2. Elemen Table Tbody, Thead, Tfoot, Tr, Th, dan Td ...........Error! Bookmark not defined.
3. Cellpadding.......................................................................Error! Bookmark not defined.
4. Cellspacing........................................................................Error! Bookmark not defined.
5. Border ..............................................................................Error! Bookmark not defined.
B. Format Multimedia pada Halaman Web..............................Error! Bookmark not defined.
1. Konsep Tampilan Multimedia dalam HTML......................Error! Bookmark not defined.
2. Tag Menampilkan Gambar ...................................................Error! Bookmark not defined.
3. Tag untuk Audio ...............................................................Error! Bookmark not defined.

4. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 4
4. Tag untuk Video ...............................................................Error! Bookmark not defined.
RANGKUMAN...........................................................................Error! Bookmark not defined.
UJI KOMPETENSI ......................................................................Error! Bookmark not defined.
BAB VI - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEB ............Error! Bookmark not
defined.
A. Format Kaitan pada Halaman Web ......................................Error! Bookmark not defined.
1. Konsep Hyperlink dalam HTML ........................................Error! Bookmark not defined.
2. Tag–Tag untuk Hyperlink..................................................Error! Bookmark not defined.
B. Format Formulir pada Halaman Web...............................Error! Bookmark not defined.
1. Konsep Formulir dalam HTML ..........................................Error! Bookmark not defined.
2. Penggunaan Tag Form......................................................Error! Bookmark not defined.
3. Form Option.....................................................................Error! Bookmark not defined.
4. Metode Get dan Post .......................................................Error! Bookmark not defined.
5. Tipe-Tipe Inputan dalam Form (Text, Password, Radio, Checkbox, Hidden, Button,
Submit, dan File) ......................................................................Error! Bookmark not defined.
RANGKUMAN...........................................................................Error! Bookmark not defined.
BAB VII - PENGENALAN APPINVENTOR ........................................Error! Bookmark not defined.
A. Pendahuluan ....................................................................Error! Bookmark not defined.
B. Berkenalan dengan App Inventor.....................................Error! Bookmark not defined.
RANGKUMAN...........................................................................Error! Bookmark not defined.
UJI KOMPETENSI ......................................................................Error! Bookmark not defined.
BAB VIII - INSTALASI DAN KONFIGURASI APP INVENTOR.............Error! Bookmark not defined.
A. Menyiapkan App Inventor................................................Error! Bookmark not defined.
RANGKUMAN...........................................................................Error! Bookmark not defined.
UJI KOMPETENSI ......................................................................Error! Bookmark not defined.
BAB IX - PENGENALAN IDE APP INVENTOR ..................................Error! Bookmark not defined.
A. Komponen Desainer.........................................................Error! Bookmark not defined.
B. Block Editor ......................................................................Error! Bookmark not defined.
RANGKUMAN...........................................................................Error! Bookmark not defined.
BAB X - MEMULAI APP INVENTOR................................................Error! Bookmark not defined.
A. Memulai App Inventor .....................................................Error! Bookmark not defined.
B. Memanggil Aplikasi App Inventor.....................................Error! Bookmark not defined.
RANGKUMAN...........................................................................Error! Bookmark not defined.
BAB XI - MEMBUAT APLIKASI HELLO PUSS ...................................Error! Bookmark not defined.
A. Membuat Desain..............................................................Error! Bookmark not defined.
B. Membuat Kode Block Program ........................................Error! Bookmark not defined.
C. Menjalankan Aplikasi .......................................................Error! Bookmark not defined.
BAB XII - MEMBUAT APLIKASI LOGIN ...........................................Error! Bookmark not defined.

5. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 5
A. Membuat Desain..............................................................Error! Bookmark not defined.
B. Membuat Kode Block Program ........................................Error! Bookmark not defined.
C. Menjalankan Aplikasi .......................................................Error! Bookmark not defined.

6. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 6
BAB I - KONSEP TEKNOLOGI PEMROGRAMAN WEB
Tujuan Pembelajaran:
Setelah mempelajari bab ini siswa diharapkan dapat mampu
1. Memahami tentang perkembangan teknologi informasi dan internet
2. Menjelaskan tentang HTML dan CSS
3. Mengetahui tentang Web Browser
4. Mengetahui dan Menggunakan Aplikasi Text Editor IDE
A. Pendahuluan
Perkembangan teknologi informasi dan internet sangat cepat sekali dan
berkembang pesat. Perkembangan ini turut mempengaruhi perkembangan bahasa
pemrograman, dimana pemrograman yang semula berbasis desktop, kemudian beralih
ke pemrograman web dan perangkat bergerak.
Seseorang yang ingin belajar bahasa pemrograman web dan harus terlebih
dahulu menguasai HTML. HTML adalah singkatan dari Hypertext Markup Languange.
Format umum yang digunakan dalam pemrograman web. Pemrograman web dan
perangkat bergerak juga tidak terlepas dari kata-kata www (world wide web) yaitu
sebuah istilah yang diberikan untuk seluruh bagian internet yang dapat di akses melalui
web browser. WWW adalah kumpulan dokumen multimedia yang saling bertautan
dengan menggunakan tautan hyperteks.
B. HTML
HTML ada singkatan dari Hypertext Markup Languange. Disebut Hypertext karena
didalam HTML sebuah text dapat berfungsi lain, kita dapat membuatnya menjadi
menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya hanya dengan
mengklik text tersebut. Walapun pada implementasinya nanti tidak hanya text yang
dapat dijadikan link. Disebut Markup Language karena bahasa HTML menggunakan
tanda (mark) untuk menandai bagian-bagian text.
HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam
membuat web, jika hanya menggunakan HTML tampilan web kelihatan sederhana,
perlu didukung bahasa pemrograman yang mendukung untuk memanipulasi kode

7. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 7
HTML seperti JavaScrip dan PHP, tetapi sebelum anda belajar JavaScript dan PHP
memahami HTML merupakan hala yang sangat mendasar.
C. Web Browser
Untuk dapat mempelajari HTML sangat dibutuhkan web browser. Terdapat
beberapa web browser yang cukup banyak digunakan seperti mozila firefox, internet
explorer, google chrome, operasi, safari dll. Anda bebas menggunakan web browser
yang yang ada sukai. Web Browser adalah suatu program yang digunakan untuk
menjelajahi internet atau untuk mencari informasi dari suatu web yang tersimpan
didalam komputer. Untuk menggunakan web browser pengguna dapat mengaksesnya
dengan sangat mudah. User atau pengguna hanya perlu membuka aplikasi kemudian
mengetikkan alamat atau situs yang dituju, biasanya dengan menggunakan format
WWW (world wide web) atau mengetikkan URL (Uniform Source Locator) pada address
bar dilaman web browser.
D. Aplikasi Text Editor IDE
Setelah kita memiliki web browser untuk membuat kode HTML dibutuhkan
aplikasi text editor yang sering disebut dengan IDE (Integrated Development
Environment). Sama seperti web browser, aplikasi text editor juga cukup banyak seperti
Notepad++, Komodo Edit, Dreamweaver, Sublime text dan Visual code. Dukungan tools
untuk pemrograman web dan perangkat bergerak sangat kuat. Seperti yang sudah
dijelaskan sebelumnya kita dapat menggunakan aplikasi text editor IDE seperti
Notepad++, Komodo Edit, Dreamweaver, Sublime text dan Visual code. Untuk materi
pemrograman web di bahan ajar ini kita akan menggunakan Sublime text yang
mempunya cukup banyak fitur dan populer serta banyak digunakan oleh para
programmer di industri digital dan kalangan web developer professional. Sublime Text
adalah sebuah teks editor yang sangat canggih untuk coding, markup dan lain-lain.
Anda akan menyukai antarmuka pengguna yang sangat sederhana. Sublime text
mendukung sejumlah bahasa pemrograman diantaranya C, C++, C#, PHP, CSS, HTML,
ASP dan banyak lagi.

8. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 8
RANGKUMAN
1. Perkembangan teknologi informasi dan internet sangat cepat sekali dan
berkembang pesat. Perkembangan ini turut mempengaruhi perkembangan
bahasa pemrograman, dimana pemrograman yang semula berbasis desktop,
kemudian beralih ke pemrograman web dan perangkat bergerak
2. HTML merupakan bahasa dasar pembuatan web. HTML ada singkatan dari
Hypertext Markup Languange. Disebut Hypertext karena didalam HTML sebuah
text dapat berfungsi lain, kita dapat membuatnya menjadi menjadi link yang
dapat berpindah dari satu halaman ke halaman lainnya hanya dengan mengklik
text tersebut
3. Untuk dapat mengakses web dan html diperlukan aplikasi web browser.
Terdapat beberapa web browser yang cukup banyak digunakan seperti mozila
firefox, internet explorer, google chrome, operasi, safari dll. Anda bebas
menggunakan web browser yang yang ada sukai
4. Web Browser adalah suatu program yang digunakan untuk menjelajahi internet
atau untuk mencari informasi dari suatu web yang tersimpan didalam komputer.
5. Setelah kita memiliki web browser untuk membuat kode HTML dibutuhkan
aplikasi text editor yang sering disebut dengan IDE (Integrated Development
Environment). Sama seperti web browser, aplikasi text editor juga cukup banyak
seperti Notepad++, Komodo Edit, Dreamweaver, Sublime text dan Visual code.