Modul Pembuatan Website Pembelajaran

KATA PENGANTAR

Modul Pembuatan Website Pembelajaran ini dibuat dengan tujuan agar peserta
mampu membuat website pembelajaran menggunakan platform google sites sebagai
media/sarana komunikasi, pembelajaran, publikasi kepada khalayak pada umumnya dan
peserta pelatihan pada khususnya. Atas nama Pusat Pendidikan dan Pelatihan Badan
Penelitian dan Pengembangan Sumber Daya Manusia Kementerian Komunikasi dan
Informatika, kami mengucapkan penghargaan yang setinggi-tingginya kepada tim penyusun
yaitu Nur Azizah, S.Si, M.Si dan Iman Iskandar, S.Pd, M.Pd yang telah bekerja keras menyusun
modul ini. Kami sangat menyadari bahwa modul ini jauh dari sempurna. Atas segala
kekurangan yang ada pada modul ini, mohon kesediaan pembaca untuk dapat memberikan
masukan yang konstruktif guna penyempurnaan selanjutnya. Semoga modul ini bermanfaat
bagi pembaca.

Semua pihak yang telah membantu proses pembuatan Modul Pembuatan Video
Pembelajaran ini disampaikan penghargaan dan terima kasih atas kerja sama dan
partisipasinya.

Jakarta, Juni 2021
Plt. Kepala Pusat Diklat,

Isnal Digitally
di signed

by Isnaldi

Isnaldi

DAFTAR ISI

KATA PENGANTAR ………………………………………………………………………………………………. ii
DAFTAR ISI ………………………………………………………………………………………………………….. iii
DAFTAR INFORMASI VISUAL ……………………………………………………………………………….. v
DAFTAR TABEL ……………………………………………………………………………………………………. vii
PETUNJUK PENGGUNAAN MODUL ……………………………………………………………………… viii
BAB I PENDAHULUAN …………………………………………………………………………………….. 1

A. LATAR BELAKANG …………………………………………………………………………………… 1
B. DESKRIPSI SINGKAT ………………………………………………………………………………… 1
C. TUJUAN PEMBELAJARAN ………………………………………………………………………… 1

1. HASIL BELAJAR ……………………………………………………………………………………. 1
2. INDIKATOR HASIL BELAJAR …………………………………………………………………. 2
D. MATERI POKOK DAN SUB MATERI POKOK ………………………………………………. 2
BAB II PENGENALAN DAN MANFAAT PLATFORM WEBSITE PEMBELAJARAN …….. 4
A. PENGENALAN WEBSITE PEMBELAJARAN ………………………………………………… 4
B. MANFAAT WEBSITE PEMBELAJARAN ……………………………………………………… 11
C. LATIHAN …………………………………………………………………………………………………. 13
D. RANGKUMAN …………………………………………………………………………………………. 13
E. EVALUASI MATERI …………………………………………………………………………………… 14
F. UMPAN BALIK DAN TINDAK LANJUT ……………………………………………………….. 14
BAB III PEMBUATAN WEBSITE BARU …………………………………..…………………………….. 16
A. PEMBUATAN USER INTERFACE ………………………………………………………………. 17
B. PEMBUATAN HALAMAN WEBSITE …………………………………………………………… 17
C. LATIHAN ………………………………………………………………………………………………….. 18
D. RANGKUMAN ………………………………………………………………………………………….. 18
E. EVALUASI MATERI ……………………………………………………………………………………. 19
F. UMPAN BALIK DAN TINDAK LANJUT ………………………………………………………… 19
BAB IV PENATAAN TAMPILAN WEBSITE ………………………………………………………………. 21
A. MEMBERIKAN NAMA WEBSITE ………………………………………………………………… 23
B. MENGUBAH GAMBAR LATAR BELAKANG, JENIS HEADER, DAN TEMA ………. 25

ii

C. MEMILIH TATA LETAK HALAMAN WEB ………………………………………………….. 29
D. LATIHAN ………………………………………………………………………………………………….. 30
E. RANGKUMAN ………………………………………………………………………………………….. 30
F. EVALUASI MATERI …………………………………………………………………………………… 31
G. UMPAN BALIK DAN TINDAK LANJUT ……………………………………………………….. 31
BAB V PENAMBAHAN KONTEN PEMBELAJARAN ………………………………………………… 33
A. MEMASUKKAN KONTEN BERUPA GAMBAR/FOTO ………………………………….. 34
B. MEMASUKKAN KONTEN BERUPA TEKS …………………………………………………… 35
C. MENDUPLIKAT SECTION ………………………………………………………………………….. 36
D. MEMBUAT HALAMAN BARU …………………………………………………………………… 37
E. MENAMBAHKAN VIDEO YOUTUBE DAN AUDIO PODCAST ………………………. 43
F. LATIHAN …………………………………………………………………………………………………. 47
G. RANGKUMAN …………………………………………………………………………………………. 47
H. EVALUASI MATERI …………………………………………………………………………………… 47
I. UMPAN BALIK DAN TINDAK LANJUT ………………………………………………………… 48
BAB VI MELAKUKAN PUBLIKASI WEBSITE PEMBELAJARAN ………………………………….. 49
A. PENGGUNAAN TOMBOL PUBLISH …………………………………………………………… 49
B. LATIHAN ………………………………………………………………………………………………….. 52
C. RANGKUMAN ………………………………………………………………………………………….. 52
D. EVALUASI MATERI ……………………………………………………………………………………. 52
E. UMPAN BALIK DAN TINDAK LANJUT ………………………………………………………… 53
BAB VII PENUTUP …………………………………………………………………………………………………. 54
A. EVALUASI KEGIATAN BELAJAR ………………………………………………………………….. 54
B. UMPAN BALIK DAN TINDAK LANJUT ………………………………………………………… 55
KUNCI JAWABAN …………………………………………………………………………………………………… 56
DAFTAR PUSTAKA 57

iii

DAFTAR INFORMASI VISUAL 6
17
Gambar 1.1. Computer Based Instruction 18
Gambar 3.1. Sign in ke google sites. 24
Gambar 3.2. Membuat web baru di google sites. 24
Gambar 4.1. Memberi nama website. 25
Gambar 4.2. Memberi nama dokumen situs, nama halaman, dan logo. 25
Gambar 4.3. Menambahkan Logo 26
Gambar 4.4. Tampilan setelah diberi nama halaman dan website 27
Gambar 4.5. Merubah gambar latar belakang halaman web 27
Gambar 4.6. Memilih gambar latar belakang halaman web 28
Gambar 4.7. Hasil merubah gambar latar belakang halaman web. 28
Gambar 4.8. Merubah Jenis Baner pada Halaman Web 29
Gambar 4.9. Mengubah Tema dan Gaya Font 29
Gambar 4.10. Mengatur Tata Letak Isi Halaman Web 34
Gambar 4.11. Mengedit Layout Isi Halaman Web 35
Gambar 5.1. Memasukan Gambar 36
Gambar 5.2. Menambahkan Teks dan Link pada Halaman Web 36
Gambar 5.3. Hasil menambahkan Teks dan Link pada Halaman Web 37
Gambar 5.4. Menduplikasi Konten 37
Gambar 5.5. Menambahkan Halaman Baru 38
Gambar 5.6. Memberi Nama Halaman Baru 38
Gambar 5.7. Hasil tampilan halaman baru 39
Gambar 5.8. Menambahkan konten teks dan gambar 39
Gambar 5.9. Menambahkan Sub Halaman 40
Gambar 5.10. Memberi Nama Sub Halaman 40
Gambar 5.11. Hasil Sub Halaman baru 41
Gambar 5.12. Memasukkan gambar dan teks pada Sub Halaman 41
Gambar 5.13. Memasukan link file bahan tayang 42
Gambar 5.14. Memilih bahan tayang di google drive 42
Gambar 5.15. Memberi Nama Bahan Tayang. 43
Gambar 5.16. Hasil Memasukan Bahan Tayang
Gambar 5.17. Membuat Sub Halaman Baru iv

Gambar 5.18 Menyiapkan Layout untuk materi Link Youtube dan Podcast 44
Gambar 5.19. Memasukkan Link Youtube 44
Gambar 5.20. Halaman Link Youtube yang telah masuk 45
Gambar 5.21. Menggunakan Embed untuk memasukan link Podcast 46
Gambar 5.22. Memasukan link Audio Podcast 46
Gambar 6.1. Melakukan Publikasi Web di Google Sites 50
Gambar 6.2. Menentukan nama dan mempublikasi website (web address) 50
Gambar 6.3. Proses Publikasi 51
Gambar 6.4. Hasil Tampilan Website yang telah Terpublikasi 51

v

DAFTAR TABEL

Tabel 2.1. Keunggulan dan Kekurangan Google Sites

vi

PETUNJUK PENGGUNAAN MODUL

Agar proses pembelajaran berlangsung dengan lancar dan tujuan pembelajaran
tercapai dengan baik, dianjurkan untuk melaksanakan beberapa hal sebagai
berikut:
1. Bacalah secara cermat semua materi yang ada dan pahami tujuan pembelajaran yang
tertera pada setiap awal bab, apabila ada yang hal-hal yang kurang jelas dapat
dilakukan tanya jawab dengan fasilitator dalam kegiatan pembelajaran di kelas;
2. Cobalah untuk mengerjakan latihan dan evaluasi yang ada pada setiap akhir bab pada
modul ini;
3. Bentuklah kelompok diskusi untuk membahas materi-materi tertentu dan studi kasus
yang diberikan untuk memperdalam pemahaman materi; dan
4. Untuk memperluas wawasan, disarankan untuk mempelajari bahan-bahan dari
sumber lain seperti yang tertera pada daftar pustaka di akhir modul ini.

vii

BAB I
PENDAHULUAN

MA. LATAR BELAKANG
embuat website sering dianggap sulit karena bersifat teknis,
termasuk bagi Widyaiswara sebagai tenaga pengajar yang belum
tentu berlatar belakang teknologi informasi atau teknologi
pendidikan. Serta ada beberapa kebutuhan lain dalam pembuatan website seperti
menyediakan hosting. Ini bisa menjadi tantangan tersendiri bagi Widyaiswara,
terutama dari sisi keahlian dan biaya.
Mata Pelatihan ini memfasilitasi Widyaiswara sebagai peserta untuk mengenal
platform website pembelajaran, membuat website baru, mendesain tampilan
website, menambahkan konten dan mempublikasikannya melalui platform google
sites.
B. DESKRIPSI SINGKAT

Mata Pelatihan ini memfasilitasi peserta untuk mengenal konsep dasar
website, opsi membuat website, penggunaan platform google sites, membuat website
baru pada halaman google sites, mendesain tampilan website, menambahkan konten,
dan mempublikasikannya.
C. TUJUAN PEMBELAJARAN
1. Hasil Belajar

Setelah mengikuti pembelajaran ini, peserta diharapkan mampu merancang situs
untuk pembelajaran sesuai kebutuhan.

2. Indikator Hasil Belajar
a. Menjelaskan manfaat platform website pembelajaran;
b. Membuat website baru;
c. Mengkreasikan tampilan website;
d. Menyusun konten pembelajaran di web;
e. Melakukan publikasi website.

D. MATERI POKOK DAN SUB MATERI POKOK
1. Materi Pokok
a. Pengenalan Dan Manfaat Platform Website Untuk Pembelajaran
b. Pembuatan Website Baru
c. Penataan Tampilan Website
d. Penambahan Konten Pembelajaran
e. Melakukan Publikasi.
2. Sub Materi Pokok
a. Pengenalan Website Pembelajaran.
b. Manfaat Website Pembelajaran.
c. Pembuatan User Interface.
d. Pembuatan Halaman Website
e. Memberikan Nama Website.
f. Mengubah gambar latar belakang, jenis header, dan tema.
g. Memilih tata letak halaman web.
h. Memasukkan konten berupa gambar/foto.
i. Memasukkan konten berupa teks.

2

j. Menduplikat Section.
k. Membuat Halaman Baru.
l. Menambahkan video youtube dan audio podcast.

3

BAB II
PENGENALAN DAN MANFAAT
PLATFORM WEBSITE PEMBELAJARAN

Indikator Hasil Belajar:
Setelah mengikuti pembelajaran ini, peserta pelatihan dapat menjelaskan
manfaat platform website pembelajaran

A. PENGENALAN WEBSITE PEMBELAJARAN

SPengertian Website
ebuah situs web (sering pula disingkat menjadi situs saja, website atau site)
adalah sebutan bagi sekelompok halaman web (web page), yang umumnya
merupakan bagian dari suatu nama domain (domain name) atau subdomain di
World Wide Web (WWW) di Internet. Sebuah web page adalah dokumen yang ditulis
dalam format HTML (Hyper Text Markup Language), yang hampir selalu bisa diakses
melalui HTTP, yaitu protokol yang menyampaikan informasi dari server website untuk
ditampilkan kepada para pemakai melalui web browser baik yang bersifat statis maupun
dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-
masing dihubungkan dengan jaringan-jaringan halaman (hyperlink) (Ali Zaki, 2009).

Pembelajaran berbasis Web
Pembelajaran berbasis web adalah proses belajar mengajar yang dilakukan dengan

memanfaatkan jaringan internet, sehingga sering disebut juga dengan e-learning.
Internet merupakan jaringan yang terdiri atas ribuan bahkan jutaan komputer, termasuk
di dalamnya jaringan lokal, yang terhubungkan melalui saluran (satelit, telepon, kabel)

4

dan jangkauanya mencakup seluruh dunia. Internet memiliki banyak fasilitas yang dapat
digunakan dalam berbagai bidang, termasuk dalam kegiatan pendidikan. Fasilitas
tersebut antara lain: e-mail, Telnet, Internet Relay Chat, Newsgroup, Mailing List (Milis),
File Transfer Protocol (FTP), atau World Wide Web (WWW). Pengajaran berbasis web
(WBI) sebagai program pengajaran berbasis hypermedia yang memanfaatkan atribut dan
sumber daya World Wide Web (Web) untuk menciptakan lingkungan belajar yang
kondusif. Konvensi internasional, menyatakan bahwa e-learning merujuk pada
penggunaan berbagai proses dan aplikasi elektronik untuk pembelajaran, termasuk di
dalamnya adalah CBT, WBI, CD, dan lain-lain.

Menurut Rusman (2012) pembelajaran berbasis web memerlukan sebuah model
intruksional yang memang dirancang khusus untuk keperluan pembelajaran. Model
intruksional merupakan komponen vital yang menentukan keefektifan proses belajar.
Adapun model intruksional yang dirancang, interaktivitas antara peserta, Widyaiswara,
pihak pendukung dan materi belajar harus mendapatkan perhatian khusus.

Pembelajaran berbasis web diartikan juga sebagai pembelajaran melalui internet,
intranet, dan halaman web saja. Web based learning dapat diartikan juga sebagai
pemanfaatan web/internet untuk pembelajaran. Pemanfaatan itu dapat berupa sumber
bahan ajar maupun media pembelajaran. Pada perkembangannya web based learning ini
sering disebut elearning (lihat di wikipedia, web based learning di-direct ke E-learning),
meskipun ada yang menyebutkan e-learning ini adalah electronic learning bukan internet
learning.

5

Gambar 2.1.
Computer Based Instruction (dari Bahan Paparan Dr. Robinson Situmorang)

Kelebihan dan Kekurangan Pembelajaran berbasis Web

Kelebihan pembelajaran berbasis web antara lain adalah sebagai berikut:

1. Memungkinkan setiap orang dimanapun, kapanpun, untuk mempelajari apapun.

2. Pebelajar dapat belajar sesuai dengan karakteristik dan langkahnya dirinya sendiri

karena pembelajaran berbasis web membuat pembelajaran menjadi bersifat

individual.

3. Kemampuan untuk membuat tautan (link), sehingga pebelajar dapat mengakses

informasi dari berbagai sumber, baik di dalam maupun luar lingkungan belajar.

4. Sangat potensial sebagai sumber belajar bagi pebelajar yang tidak memiliki cukup

waktu untuk belajar.

6

5. Dapat mendorong pebelajar untuk lebih aktif dan mandiri di dalam belajar
6. Menyediakan sumber belajar tambahan yang dapat digunakan untuk memperkaya

materi pembelajaran.
7. Menyediakan sumber belajar tambahan yang dapat digunakan untuk mencari

informasi yang mereka butuhkan.
8. Isi dan materi pelajaran dapat di-update dengan mudah.

Sedangkan untuk kekurangan pembelajaran berbasis web antara lain adalah sebagai
berikut:
1. Keberhasilan pembelajaran berbasis web bergantung pada kemandirian dan

motivasi pembelajar.
2. Akses untuk mengikuti pembelajaran untuk dengan menggunakan web seringkali

menjadi masalah bagi pembelajar.
3. Pebelajar dapat merasa bosan dan jenuh jika mereka tidak bisa mengakses informasi,

dikarenakan tidak terdapatnya peralatan yang memadai dan bandwidth yang cukup.
4. Dibutuhkan panduan bagi pebelajar untuk mencari informasi yang elevan, karena

informasi yang terdapat di dalam web sangat beragam.
5. Dengan menggunakan pembelajaran berbasis web, pebelajar terkadang merasa

terisolasi, terutama jika terdapat keterbatasan dalam fasilitas.

Pemanfaatan Platform Google Site sebagai Website Pembelajaran
Pada pelatihan WI-Lenial, kita perlu memilih salah satu webhosting yang praktis dan

mudah untuk digunakan oleh Widyaiswara, untuk dipraktekkan. Pilihan kami adalah
Google Sites. Google Sites adalah platform milik Google yang memungkinkan seorang

7

Widyaiswara untuk membuat website dengan mudah. Platform ini juga gratis seperti
halnya WordPress.com dan Wix.

Google Site merupakan suatu tool yang digunakan untuk menciptakan custom
website. Dengan google sites, Anda dapat:
✔ mengembangkan situs sendiri dalam membuat website dan isinya.
✔ memilih kepada siapa saja situs tersebut dibagikan.
✔ menentukan siapa pemiliknya, siapa yang Anda izinkan untuk mengedit dan

memperbaiki situs, dan siapa yang Anda izinkan untuk melihat situs.
✔ membatasi siapa saja yang dapat melihat situs menjadi kelompok kecil dan pribadi

atau
✔ memilih untuk mempublikasikan supaya situs mudah diakses siapa saja di dunia.

Karena situs anda disimpan di dunia maya, situs Anda tersedia untuk perangkat apa
saja yang dapat mengakses internet dan dapat diakses darimana saja yang memiliki
koneksi internet tersedia.

Tabel 2.1. Keunggulan dan Kekurangan Google Sites

Keunggulan Google Sites Kekurangan Google Sites

1. Integrasi dengan Google. 1. Tidak mendukung CRM, fitur

jualan online serta kontrol khusus.

2. Tampilan admin area simple. 2. Tidak ada fasilitas drag serta drop

dalam desain halaman website.

3. Keamanan terjaga. 3. Tidak memiliki dukungan iframe

4. Website cepat. serta script.

8

5. Fitur sharing.
4. Akses dari segala perangkat.
5. Gratis.

Dibandingkan dengan platform-platform pembuatan website lainnya, Google Sites
memiliki beberapa keunggulan, di antaranya:
1. Integrasi dengan Google.

Karena terhubung dengan akun Google Anda, website yang dibuat dengan Google
Sites langsung disimpan di Google Drive. Jadi, Anda tidak perlu susah payah melakukan
backup.
2. Tampilan admin area simple.
Google Sites menawarkan tampilan admin area yang mudah dipahami. Anda akan
mempelajarinya di artikel ini.
3. Keamanan terjaga.
Sama seperti layanan Google lain yaitu Gmail, Google Drive dan GDocs, Google Sites
aman dari virus dan serangan hacker.
4. Website cepat.
Website yang dibuat menggunakan platform ini dijalankan dengan server Google.
Oleh karena itu, kecepatannya tidak perlu dipertanyakan lagi.
5. Fitur sharing.
Mengelola website Google Sites sangat mudah, terutama berkat fitur share seperti
halnya menggunakan Google Drive dan Docs.

9

6. Akses dari segala perangkat.
Situs yang dibuat dengan Google Sites bisa dikases dengan berbagai media misalnya
PC, laptop maupun smartphone

7. Gratis.
Layanan pembuatan situs ini bisa digunakan secara gratis. Penyimpanan online hingga
100 MB.

Google Sites pun memiliki keterbatasan dalam pembuatan website, seperti:
1. Tidak menudkung CRM, fitur jualan online serta kontrol khusus.
2. Tidak ada fasilitas drag serta drop dalam desain halaman website.
3. Tidak memiliki dukungan iframe serta script.

Fitur Google Sites
Apa saja sih fitur yang dimiliki G Sites ini? Banyak sekali fitur yang bisa Anda nikmati
seperti:

✔ Translate atau penerjemah
✔ Pengaturan waktu
✔ Kalkulator
✔ Pencarian atau search
✔ Pencarian File
✔ Jadwal pertemuan
✔ Data Publik
✔ Produk Google lainnya
B. MANFAAT WEBSITE PEMBELAJARAN

10

Bila dirancang dengan baik dan tepat, maka pembelajaran berbasis web bisa menjadi
pembelajaran yang menyenangkan, memiliki unsur interaktivitas yang tinggi,
menyebabkan peserta pelatihan mengingat lebih banyak materi pelatihan, serta
mengurangi biaya-biaya operasional yang biasanya dikeluarkan oleh peserta pelatihan
untuk mengikuti pembelajaran.

Dikarenakan sifatnya maya/virtual, pembelajaran berbasis web dianggap telah
memberikan fleksibilitas terhadap kegiatan pengaksesan materi pelatihan. Penghantaran
materi pelatihan kini tidak lagi tergantung pada medium fisik seperti modul cetak atau
CD-ROM. Materi pelatihan kini berbentuk data digital yang bisa diuraikan melalui
perangkat elektronik seperti computer, smartphone, telepon selular atau piranti
elektronik lainnya.

Disamping beberapa unggulan tersebut, pembelajaran berbasis web juga memiliki
kelemahan, yaitu kurangnya interaksi langsung antara peserta dan Widyaiswara yang
disebabkan oleh banyak faktor teknis. Menyikapi hal tersebut, kruse berpandangan,
dengan semakin majunya teknologi internet dan jaringan dan semakin cepatnya koneksi
internet beberapa tahun belakangan ini, maka kelemahan terbesar dari pembelajaran
berbasis web ini bisa diminimalisasi dalam beberapa tahun ke depan.

Pembelajaran menggunakan google sites memberikan manfaat bagi Widyaiswara
ataupun peserta pengembangan kompetensi, manfaat dari pemanfaatan google sites ini
adalah:

1. Pembelajaran lebih menarik.

11

Dengan menggunakan google sites pembelajaran akan lebih lengkap dan menarik
dikarenakan bisa memanfaatkan fitur-fitur di dalam google sites. Seperti: google docs,
sheet, forms, calender, awesome table dan lain sebagainya.
2. Lebih mudah mendapatkan materi pembelajaran.

Dengan adanya google sites maka materi pembelajaran akan diunggah ke dalam
google sites sehingga peserta ataupun Widyaiswara tidak perlu menggunakan
flashdisc yang bisa menyebabkan banyaknya virus yang masuk ke dalam komputer.
3. Materi pembelajaran tidak mudah hilang.

Materi yang telah diunggah ke dalam google sites akan tetap berada di google sites
dan tidak akan terpengaruh dengan gangguan virus atau yang lainnya.
4. Peserta dapat mendapatkan informasi pembelajaran dengan cepat.

Dengan menggunakan google sites, penggunanya baik peserta ataupun
Widyaiswara dapat mendapatkan informasi mengenai pembelajaran dengan cepat
dengan menggunakan informasi yang diunggah oleh Widyaiswara.
5. Dapat menyimpan RBPMP dan RP di google sites.

Rancang Bangun Pembelajaran Mata Pelatihan (RBPMP) dan Rencana
Pembelajaran (RP) dapat diunggah oleh Widyaiswara ke dalam google sites, peserta
dapat mengetahui pokok bahasan dan sub pokok bahasan pembelajaran pada setiap
pertemuan selanjutnya.
6. Tugas melalui google sites.

Tugas pembelajaran dapat diberikan oleh Widyaiswara melalui google sites,
sehingga peserta tidak tertinggal informasi dan tugas-tugasnya. Tugas pelatihan dapat
diberikan dan dikumpulkan melalui google sites.
C. LATIHAN

12

Tuliskan pendapat Anda tentang urgensi dan manfaat pembelajaran menggunakan
website bagi Widyaiswara!

D. RANGKUMAN
1. Sebuah situs web (sering pula disingkat menjadi situs saja, website atau site) adalah
sebutan bagi sekelompok halaman web (web page), yang umumnya merupakan
bagian dari suatu nama domain (domain name) atau subdomain di World Wide Web
(WWW) di Internet.
2. Pembelajaran berbasis web adalah proses belajar mengajar yang dilakukan dengan
memanfaatkan jaringan internet, sehingga sering disebut juga dengan e-learning.
3. Pembelajaran berbasis Website memiliki kelebihan dan kekurangan.
4. Google Sites adalah platform milik Google yang memungkinkan seorang
Widyaiswara untuk membuat website dengan mudah dan gratis.
5. Dibandingkan dengan platform-platform pembuatan website lainnya, Google Sites
memiliki beberapa keunggulan yaitu integrasi dengan Google, langsung disimpan di
Google Drive, Tampilan admin area simple, menawarkan tampilan admin area yang
mudah dipahami, keamanan terjaga, aman dari virus dan serangan hacker, website
cepat, kecepatan baik, fitur sharing, dan gratis.
6. manfaat dari pemanfaatan google sites ini adalah pembelajaran lebih menarik, lebih
mudah mendapatkan materi pembelajaran, materi pembelajaran tidak mudah
hilang, peserta dapat mendapatkan informasi pembelajaran dengan cepat, dapat
menyimpan RBPMP dan RP di google sites, dan tugas melalui google sites.

E. EVALUASI MATERI

13

Pilihlah jawaban yang tepat pada pertanyaan-pertanyaan di bawah ini!
1. Proses belajar mengajar yang dilakukan dengan memanfaatkan jaringan internet,

sehingga sering disebut juga dengan e-learning, dinamakan...
a. Pembelajaran berbasis aplikasi.
b. Pembelajaran berbasis web.
c. Pembelajaran berbasis android.
d. Pembelajaran berbasis desktop.
2. Kelebihan pembelajaran berbasis web antara lain adalah sebagai berikut, kecuali:
a. Memungkinkan setiap orang dimanapun, kapanpun, untuk mempelajari apapun.
b. Dapat mendorong pebelajar untuk lebih aktif dan mandiri di dalam belajar
c. Menyediakan sumber belajar tambahan yang dapat digunakan untuk

memperkaya materi pembelajaran.
d. Isi dan materi pelajaran tidak dapat di update dengan mudah.
3. Google Sites memiliki beberapa keunggulan, di antaranya:
a. Tampilan admin area simple.
b. Fitur sharing.
c. Berbayar.
d. Akses dari segala perangkat.

F. UMPAN BALIK DAN TINDAK LANJUT
Sejauh mana Anda dapat menyelesaikan Latihan dan Evaluasi Materi yang ada pada

bab ini? Apabila Anda telah mampu menjawab Latihan dan Evaluasi Materi pada Bab ini,
berarti Anda telah menguasai topik ini dengan baik. Akan tetapi, jika Anda masih merasa
ragu dengan pemahaman Anda mengenai materi yang terdapat dalam Bab ini serta

14

adanya keraguan dan kesalahan dalam menjawab Latihan dan Evaluasi Materi, maka
disarankan Anda melakukan pembelajaran kembali secara lebih intensif dengan
membaca ulang materi, membaca bahan referensi, berdiskusi dengan
pengajar/fasilitator dan juga dengan sesama peserta pelatihan lainnya.

15

BAB III
PEMBUATAN WEBSITE BARU

Indikator Hasil Belajar:
Setelah mengikuti pembelajaran ini, peserta pelatihan dapat membuat website baru.

Terdapat dua langkah yang harus dilakukan untuk menentukan metode
pembelajaran berbasis web jenis apa yang cocok diterapkan dalam suatu kondisi
pembelajaran.
Langkah pertama adalah menentukan terlebih dahulu tipe pembelajaran yang akan
disampaikan. Analisis kebutuhan dilakukkan pada langkah ini, untuk menentukan ranah mana
yang akan disentuh dalam oleh proses pembelajaran ini, apakah kognitif, psikomotorik atau
afektif.

Dalam pembelajaran berbasis web untuk mengelompokkan tujuan pembelajaran atau
pelatihan sehingga mengembangkan program dapat mengetahui jenis jenis kemampuan
kognitif yang masing-masingnya membutuhkan penyampaian informasi, latihan dan penilaian
yang berbeda.

Langkah kedua dari pemilihan proses pembelajaran, adalah memilih tipe pembelajaran
berbasis web yang paling tepat sesuai dengan tujuan yang hendak dicapai. Untuk mulai
memilih tipe pembelajaran berbasis web mana yang paling tepat, pertama tentukan ranah
pembelajaran yang paling mempresentasikan tujuan, yaitu kognitif, psikomotor atau afektif
(Rusman, 2014).

16

Berikut ini kita akan mempelajari secara langsung dan terstruktur Langkah-langkah
mudah dalam membuat website untuk pembelajaran melalui platform Google Sites.

A. PEMBUATAN USER INTERFACE.
Masuk ke akun google sites.
Silahkan Anda login ke google sites terlebih dahulu melalui URL berikut ini
https://sites.google.com. Masukkan akun email google anda, lalu klik tombol Next.
Gambar 3.1.
Sign in ke google sites.

Kemudian masukkan kata sandi email anda, lalu klik tombol Next.
B. PEMBUATAN HALAMAN WEBSITE

Setelah Anda berhasil login, selanjutnya Anda akan otomatis dibawa ke halaman
utama google sites seperti gambar dibawah ini:

17

Gambar 3.2.
Membuat web baru di google sites.

Kemudian untuk memulai projek pembuatan website gratis Anda, klik tombol plus
(+) pada halaman utama google sites Anda.
C. LATIHAN
Buatlah akun website baru Anda melalui https://sites.google.com dengan
menggunakan akun email gmail Anda!
D. RANGKUMAN
1. Terdapat dua langkah yang harus dilakukan untuk menentukan metode

pembelajaran berbasis web jenis apa yang cocok diterapkan dalam suatu kondisi
pembelajaran. Langkah pertama adalah menentukan terlebih dahulu tipe
pembelajaran yang akan disampaikan. Langkah kedua dari pemilihan proses
pembelajaran, adalah memilih tipe pembelajaran berbasis web yang paling tepat
sesuai dengan tujuan yang hendak dicapai.

18

2. Langkah-langkah mudah dalam membuat website untuk pembelajaran melalui
platform Google Sites adalah dengan membuat user interface dan pembuatan
halaman Website.

E. EVALUASI MATERI
Pilihlah jawaban yang tepat pada pertanyaan-pertanyaan di bawah ini!

1. Langkah pertama untuk menentukan metode pembelajaran berbasis web jenis apa
yang cocok diterapkan dalam suatu kondisi pembelajaran adalah
a. menentukan terlebih dahulu tujuan pembelajaran yang akan disampaikan.
b. menentukan terlebih dahulu media pembelajaran yang akan disampaikan.
c. menentukan terlebih dahulu tipe pembelajaran yang akan disampaikan.
d. menentukan terlebih dahulu evaluasi pembelajaran yang akan disampaikan.

2. Membuat website baru di google sites dilakukan dengan mengklik…
a. Start a new site.
b. Start a blank site.
c. Start a recent site.
d. Start a project site.

F. UMPAN BALIK DAN TINDAK LANJUT
Sejauh mana Anda dapat menyelesaikan Latihan dan Evaluasi Materi yang ada

pada bab ini? Apabila Anda telah mampu menjawab Latihan dan Evaluasi Materi pada
Bab ini, berarti Anda telah menguasai topik ini dengan baik. Akan tetapi, jika Anda
masih merasa ragu dengan pemahaman Anda mengenai materi yang terdapat dalam
Bab ini serta adanya keraguan dan kesalahan dalam menjawab Latihan dan Evaluasi
Materi, maka disarankan Anda melakukan pembelajaran kembali secara lebih intensif

19

dengan membaca ulang materi, membaca bahan referensi, berdiskusi dengan
pengajar/fasilitator dan juga dengan sesama peserta pelatihan lainnya.

20

BAB IV
PENATAAN TAMPILAN WEBSITE

Indikator Hasil Belajar:
Setelah mengikuti pembelajaran ini, peserta pelatihan dapat mengkreasikan
tampilan website.
Di dalam membangun sebuah website ada dual hal yang harus diperhatikan, yaitu layout dan
desain. Layout merupakan proses penataan tata letak atau pengaturan objek-objek yang terdapat
dalam suatu halaman, sedangkan desain merupakan proses imaginasi dan kreasi seseorang di dalam
mengekpresikan dan menciptakan suatu keindahan, ini tentunya memerlukan estetika dan cita seni
yang tinggi.
Layout meliputi penyusunan dan pembagian tempat dalam suatu halaman. Tata letak dan
susunan yang baik dapat membuat tampilan halaman lebih menarik, rapih dan seimbang, sehingga
enak dilihat dan mudah di baca. Secara umum ada lima layout yang digunakan dalam halaman web,
yaitu :
1. Model Top Index

21

2. Model Buttom Index
3. Model Left Index
4. Model Split
5. Model Alternatif Index

22

Adapun model yang paling banyak digunakan dan sangat familiar terhadap pengguna adalah
model Left Index dan Split.

A. MEMBERIKAN NAMA WEBSITE
Anda perlu memberikan nama untuk website yang Anda buat sehingga nantinya
website Anda mudah untuk dikenal. Beri nama bagian berbeda dari situs Anda:
o Site document name – Masukkan nama unik untuk melacak situs Anda. Nama
dokumen situs hanya dapat dilihat oleh Anda, misalnya “Website Widyaiswara
Milenial”.
o Site name situs — Nama situs muncul di tajuk dan di bilah judul jendela web atau
seluler setelah Anda mempublikasikan situs. Anda harus memiliki 2 atau lebih
halaman di situs web Anda agar nama situs Anda muncul, misalnya nama situsnya
adalah “Widyaiswara Milenial”.
o Page title — Setiap halaman di situs Anda memiliki judul, yang muncul di bagian
atas halaman. Judul halaman juga muncul di menu navigasi, misalnya untuk
halaman pertama kita beri nama “Widyaiswara Milenial”.
o Add Logo — Di bawah site name situs, terdapat icon logo yang bisa digunakan
untuk memberikan identitas pada website. Klik pada “add logo”, lalu pilih “upload
logo” pada brand image, lalu cari logo yang akan dimasukan ke dalam website,
biasanya dengan format JPEG., lalu klik open, maka logo yang dipilih akan masuk
ke header website.

23

Gambar 4.1.
Memberi nama website.

1

2
3

Gambar 4.2.
Memberi nama dokumen situs, nama halaman, dan logo.

1

42

3

24

Gambar 4.3.
Menambahkan Logo.

Gambar 4.4.
Tampilan setelah diberi nama halaman dan website

B. MENGUBAH GAMBAR LATAR BELAKANG, JENIS HEADER, DAN TEMA.
Agar tampilan website Anda terlihat menarik, sebaiknya pilih tampilan untuk situs

Anda. Setiap tema dilengkapi dengan latar belakang yang telah ditetapkan, skema
25

warna, dan pemilihan font. Anda dapat menyesuaikan font, warna, dan latar belakang
nanti, dan anda selalu dapat mengubah tema setelah situs itu dibuat.
1. Ubah gambar latar belakang.

Sebagai contoh kita akan mengubah gambar latar belakang header dengan
menampilkan gambar yang cocok dengan tema websitenya, misalnya karena
website ini bertemakan teknologi maka gambar headernya kita ubah menjadi
gambar laptop/tablet. Untuk mengubahnya, kita sorot gambar headernya
kemudian klik tombol Change image dipojok kiri bawah header, lalu pilih Upload
untuk gambar yang ada di dokumen kita, atau select image untuk memilih
template gambar yang disediakan di google sites. Pada contoh ini kita pilih salah
satu gambar yang tersedia di google sites. Tentukan gambar yang akan diunggah
kemudian klik tombol Open/Select.

Gambar 4.5.
Merubah gambar latar belakang halaman web.

26

Gambar 4.6.
Memilih gambar latar belakang halaman web

Hasilnya terlihat seperti gambar berikut.
Gambar 4.7.

Hasil merubah gambar latar belakang halaman web.

2. Ubah jenis header
Arahkan kursor mouse ke gambar latar belakang dan klik Header type

kemudian pilih satu opsi sesuai dengan yang anda inginkan:
27

o Cover (penutup)
o Large banner (Spanduk Besar)
o Banner
o Title only (Hanya Judul)

Gambar 4.8.
Merubah Jenis Baner pada Halaman Web

3. Ubah tema dan gaya font. Gambar 4.9.
Anda dapat berkreasi dengan Mengubah Tema dan Gaya Font

tampilan situs salah satunya dengan
menentukan gaya tema dan gaya font
yang akan digunakan. Caranya sangat
mudah, dipojok kanan atas anda klik
menu Themes lalu pilih tema yang
cocok dengan kebutuhan situs anda.

28

C. MEMILIH TATA LETAK HALAMAN WEB.
Pada Google Sites Anda dapat memilih layout yang cocok dengan halaman web

Anda, dengan cara klik salah satu layout yang ada di sebelah kanan halaman web.
Gambar 4.10.

Mengatur Tata Letak Isi Halaman Web

Setelah dipilih layoutnya, hasilnya seperti tampilan pada gambar berikut.
Gambar 4.11.

Mengedit Layout Isi Halaman Web

29

D. LATIHAN
Lakukanlah penataan tampilan website yang telah Anda buat dengan memberikan

nama website, nama halaman, logo. Setelah itu ubah gambar latar belakang, jenis
header, dan tema yang Anda inginkan. Langkah selanjutnya silakan Anda pilih layout
untuk isi dari website Anda!

E. RANGKUMAN
1. Di dalam membangun sebuah website ada dual hal yang harus diperhatikan, yaitu
layout dan desain. Layout merupakan proses penataan tata letak atau pengaturan
objek-objek yang terdapat dalam suatu halaman, sedangkan desain merupakan
proses imaginasi dan kreasi seseorang di dalam mengekpresikan dan menciptakan
suatu keindahan, ini tentunya memerlukan estetika dan cita seni yang tinggi.
2. Ada lima layout yang digunakan dalam halaman web, yaitu Model Top Index,
Model Buttom Index, Model Left Index, Model Split, dan Model Alternatif Index.
3. Memberikan nama website dapat dilakukan dengan mengatur site document
name, site name situs, page title, dan add Logo.
4. Agar tampilan website Anda terlihat menarik, sebaiknya pilih tampilan untuk situs
Anda. Setiap tema dilengkapi dengan latar belakang yang telah ditetapkan, skema
warna, dan pemilihan font. Anda dapat menyesuaikan gambar latar belakang,
jenis header, font, warna, dan latar belakang, dan dapat mengubah tema setelah
situs itu dibuat.
5. Memilih tata letak halaman web dapat dilakukan dengan menu layouts pada sisi
kanan halaman.

30

F. EVALUASI MATERI
Pilihlah jawaban yang tepat pada pertanyaan-pertanyaan di bawah ini!

1. Pada bagian Header Website Google Sites dapat diatur nama..
a. Site document, site name situs dan page title.
b. Site picture, site name situs dan page title.
c. Logo, site name situs dan page title.
d. Site name situs dan page title.

2. Untuk mengubah gambar latar belakang pada header dilakukan dengan klik pada..
a. Eksport image.
b. Change image.
c. Merge image.
d. Crop image.

3. Anda dapat berkreasi dengan tampilan situs salah satunya dengan menentukan
gaya tema dan gaya font yang akan digunakan. Caranya dipojok kanan atas Anda
klik menu …
a. Layout.
b. Themes.
c. Colour.
d. Scene.

G. UMPAN BALIK DAN TINDAK LANJUT
Sejauh mana Anda dapat menyelesaikan Latihan dan Evaluasi Materi yang ada pada

bab ini? Apabila Anda telah mampu menjawab Latihan dan Evaluasi Materi pada Bab
ini, berarti Anda telah menguasai topik ini dengan baik. Akan tetapi, jika Anda masih

31

merasa ragu dengan pemahaman Anda mengenai materi yang terdapat dalam Bab ini
serta adanya keraguan dan kesalahan dalam menjawab Latihan dan Evaluasi Materi,
maka disarankan Anda melakukan pembelajaran kembali secara lebih intensif dengan
membaca ulang materi, membaca bahan referensi, berdiskusi dengan
pengajar/fasilitator dan juga dengan sesama peserta pelatihan lainnya.

32

BAB V
PENATAAN KONTEN PEMBELAJARAN

Indikator Hasil Belajar:
Setelah mengikuti pembelajaran ini, peserta pelatihan dapat menyusun konten
pembelajaran yang dibutuhkan pada halaman website.

Dalam melakukan penataan konten pembelajaran berbasis web, perlu
diperhatikan beberapa prinsip yang berperan dalam menentukan
keberhasilan proses pembelajaran ini pada tahap implementasi. Hal
yang membuat pembelajaran berbasis web ini efektif pada dasarnya bergantung pada

pandangan dari pemegang kepentingan. Oleh karenanya sangat sulit untuk

menetukan prinsip utama yang setidaknya harus ada dalam pembelajaran berbasis

web. Menurut Rusman (2011) prinsip pembelajaran berbasis web adalah :

a. Interaksi

Interaksi berarti kapasitas komunikasi dengan orang lain yang tertarik pada

topik yang sama atau menggunakan pembelajaran berbasis web yang sama.

Dalam lingkungan belajar, interaksi berarti kapasitas berbicara baik antar peserta,

maupun antar peseta dengan instruktur. Interaksi membedakan antara

pembelajaran berbasis web dengan pembelajaran berbasis komputer (Computer-

Based-Instruction). Hal ini berarti bahwa mereka yang terlibat dalam

pembelajaran berbasis web tidak berkomunikasi dengan mesin, melainkan

dengan orang lain (baik peserta maupun tutor)yang kemungkinan tidak berada

dalam lokasi bahkan waktu yang sama.

33

b. Ketergunaan
Ketergunaan yang dimaksud disini adalah bagaimana peserta pelatihan

mudah menggunakan web. Terdapat dua elemen penting dalam prinsip
ketergunaan ini yaitu konsisten dan kesederhanaan. Intinya adalah bagaimana
pemgembangan pembelajaran berbasis web ini menciptakan lingkungan belajar
yang konsisten dan sederhana, sehingga peserta tidak mengalami kesulitan baik
dalam proses pembelajaran maupun navigasi konten (materi dan aktivitas belajar
lain).
c. Relevansi

Relevansi diperoleh melalui ketepatan dan kemudahan. Setiap informasi
dalam web hendaknya dibuat sangat spesifik untuk meningkatkan pemahaman
pembelajar dan menghindari bias. Menempatkan konten yang relevan dalam
konteks yang tepat pada waktu yang tepat adalah bentuk seni tersendiri, dan
sedikit pengembangan e-learning yang berhasil melakukan kombinasi ini. Hal ini
melibatkan aspek keefektifan desain konten, serta kedinamisan pencarian dan
penempatan konten (materi).

A. MEMASUKKAN KONTEN BERUPA GAMBAR/FOTO.

Klik ikon (+) pada kotak Gambar 5.1.
sebelah kiri, pilih Upload. Tentukan Memasukan Gambar

gambar yang akan diunggah, klik

Open.

34

B. MEMASUKKAN KONTEN BERUPA TEKS.
Klik kotak sebelah kanan, pada baris pertama anda masukkan judul pelatihan,

sedangkan baris kedua anda masukkan isi deskripsi pelatihan.
Untuk mengatur format teks, anda bisa melakukannya dengan cara klik kotak

teksnya kemudian sorot teks yang akan diubah formatnya, misalnya klik ikon B untuk
memberi cetak tebal.

Sedangkan untuk memberikan tautan pada teks, anda bisa sorot teksnya terlebih
dahulu lalu klik ikon tautan.

Gambar 5.2.
Menambahkan Teks dan Link pada Halaman Web

Perhatikan hasil akhirnya pada tampilan gambar berikut.

35

Gambar 5.3.
Hasil menambahkan Teks dan Link pada Halaman Web

C. MENDUPLIKAT SECTION.
Cara mudah untuk menambah konten dengan tata letak/layout yang sama

dengan sebelumnya, anda bisa memanfaatkan fitur Duplicate Section. Caranya sangat
mudah, anda cukup sorot section sebelumnya hingga muncul icon Duplicate Section
di samping kiri halaman web. Kemudian anda klik ikon tersebut, secara otomatis
sectionnya akan tersalin dibagian bawahnya.

Gambar 5.4.
Menduplikasi Konten

Duplicate section

36

Langkah selanjutnya, lakukan cara yang sama untuk mengubah konten gambar dan konten
teksnya dengan judul pelatihan yang lain sesuai kebutuhan.

D. MEMBUAT HALAMAN BARU DAN SUB HALAMAN BARU.

Untuk menambahkan konten Gambar 5.5.
pembelajaran lainnya seperti “Materi Menambahkan Halaman Baru

Pelatihan”, anda bisa membuat

halaman baru khusus untuk

menampilkan “Materi Pelatihan”.

Caranya sangat mudah, klik menu Page

disamping kanan halaman web, lalu klik

icon New page (+) dibagian bawahnya.

Anda tentukan nama halaman webnya, misalkan “Materi Pelatihan” lalu klik
tombol Done. Perhatikan gambar berikut.

Gambar 5.6.
Memberi Nama Halaman Baru.

Maka halaman baru “Materi Pelatihan” hasil tampilannya sebagai berikut:
37

Gambar 5.7.
Hasil tampilan halaman baru.

Untuk menambahkan konten pada halaman di atas, Anda bisa melakukan cara
yang sama ketika Anda menambahkan konten gambar dan konten teks pada halaman
“Materi Pelatihan”. Hasilnya dapat Anda lihat pada gambar:

Gambar 5.8.
Menambahkan konten teks dan gambar

Gambar
Teks

38

Selanjutnya, di dalam halaman “Materi Pelatihan”, Anda dapat menambahkan
sub halaman yang menjadi konten dalam Materi Pelatihan seperti “Bahan Tayang”
dan “Media Pembelajaran” lainnya yang berbentuk Audio Visual.

Untuk menambahkan sub halaman. Caranya sangat mudah, klik di menu Page
“Materi Pelatihan” ( ), disamping kanan halaman web, lalu klik icon Add Subpage (+)
dibagian bawahnya.

Gambar 5.9.
Menambahkan Sub Halaman

Anda tentukan nama sub halaman webnya, misalkan “Bahan Tayang” lalu klik
tombol Done. Perhatikan gambar berikut.

Gambar 5.10.
Memberi Nama Sub Halaman

39

Maka sub halaman baru “Bahan Tayang” hasil tampilannya sebagai berikut:
Gambar 5.11.

Hasil Sub Halaman baru

Langkah selanjutnya untuk mengisi konten dari sub halaman bahan tayang, maka
kita dapat menginsert link bahan tayang seperti Powerpoint dari Mata Pelatihan yang
sudah kita simpan di dalam google drive.

Anda bisa memilih layout terlebih dahulu, untuk ruang kita menginsert bahan
tayang dan deskripsinya.

Gambar 5.12.
Memasukkan gambar dan teks pada Sub Halaman

40

Untuk menginsert link bahan tayang, Anda klik icon Add (+), Google Drive
Gambar 5.13.

Memasukan link file bahan tayang.

Gambar 5.14.
Memilih bahan tayang di google drive

Setelah link gambar bahan tayang muncul di sub Halaman, selanjutnya tambahkan
Konten teks pada kotak di samping kanan, untuk menuliskan Nomor Mata Pelatihan
dan Judul Bahan Tayangnya. Hasilnya dapat Anda lihat pada gambar:

41

Gambar 5.15.
Memberi Nama Bahan Tayang.

Dengan cara yang sama, duplicate section, lalu Anda bisa menginsert seluruh mata
pelatihan yang Anda ingin munculkan. Hasilnya dapat Anda lihat pada gambar:

Gambar 5.16.
Hasil Memasukan Bahan Tayang

42