MODUL TIK JH 8

Web Design

Membuat Website dengan Google Sites

Oleh : Unggul A.L

MODUL 1

Mengenal Google Sites

Membuat website sering dianggap sulit karena bersifat teknis. Belum lagi, ada
beberapa kebutuhan lain seperti menyediakan hosting. Ini bisa menjadi
tantangan tersendiri bagi pemula, terutama dari sisi keahlian dan biaya.
Namun, tahukah Anda bahwa Google Sites bisa menjadi solusi membuat
website dengan mudah dan gratis? Bagaimana caranya?

Apa Itu Google Sites?

Google Sites adalah platform milik Google yang memungkinkan Anda untuk
membuat website dengan mudah. Platform ini juga gratis seperti halnya
WordPress.com dan Wix.
Dibandingkan dengan platform-platform pembuatan website lainnya, Google
Sites memiliki beberapa keunggulan, di antaranya:

 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.

 Tampilan admin area simpel — Google Sites menawarkan tampilan
admin area yang mudah dipahami. Anda akan mempelajarinya di artikel
ini.

2

 Keamanan terjaga — Sama seperti layanan Google lain yaitu Gmail,
Google Drive dan GDocs, Google Sites aman dari virus dan serangan
hacker.

 Website cepat — Website yang dibuat menggunakan platform ini
dijalankan dengan server Google. Oleh karena itu, kecepatannya tidak
perlu dipertanyakan lagi.

 Fitur sharing — Mengelola website Google Sites sangat mudah,
terutama berkat fitur share seperti halnya menggunakan Google Drive
dan Docs.

Catatan :

Apa Itu Website?

Website adalah sebuah kumpulan halaman pada suatu domain
di internet yang dibuat dengan tujuan tertentu dan saling
berhubungan serta dapat diakses secara luas melalui halaman
depan (home page) menggunakan sebuah browser menggunakan
URL website.
Sebagai contoh, untuk alamat website Niagahoster adalah
https://www.niagahoster.co.id, jika diakses maka akan tampil
home page seperti gambar di bawah.
Sedangkan untuk halaman web adalah bagian yang diberi tanda
kotak berwarna merah.
Ketika diklik akan mengarah ke halaman baru berupa informasi
yang berbeda dengan home page.

3

Sejarah Website

Website pertama kali dibuat oleh Tim Berners-Lee pada akhir 1980an dan
baru resmi online pada tahun 1991.

Tujuan awal Tim Berners-Lee membuat sebuah website adalah supaya lebih
memudahkan para peneliti di tempatnya bekerja ketika akan bertukar atau
melakukan perubahan informasi.

Jika Anda ingin mengetahui seperti apa tampilannya, silakan akses tautan
berikut http://info.cern.ch/. Pada saat itu, website mulai dapat digunakan
secara gratis oleh publik baru diumumkan oleh CERN tepatnya tanggal 30
April 1993.

Website dapat dimiliki oleh individu, organisasi, atau perusahaan. Pada
umumnya sebuah website akan menampilkan informasi atau satu topik
tertentu, meskipun saat ini banyak website yang menampilkan berbagai
informasi dengan topik yang berbeda.

Unsur-Unsur Website

Terdapat 3 unsur yang sangat vital pada website. Tanpa adanya semua unsur
ini, website anda tidak akan pernah ditemukan dan diakses oleh pengguna di
internet. Ketiga unsur yang dimaksud adalah:

1. Domain. Jika website diibaratkan sebagai produk, maka domain
adalah merk. Penggunaan domain yang menarik akan membuat orang
tertarik untuk memasuki suatu website. Dengan pemilihan nama
domain yang unik juga membuat orang mudah mengingatnya untuk
nantinya dikunjungi kembali.

2. Hosting. Tidak kalah pentingnya dengan domain, hosting memiliki
peran untuk menyimpan semua database (script, gambar, video, teks
dan lain sebagainya) yang diperlukan untuk membentuk suatu website.
Banyak sekali penyedia jasa hosting di Indonesia, salah satunya
Niagahoster yang menyediakan hosting terbaik untuk kecepatan akses
website Anda.

3. Konten. Tanpa adanya konten pada website, maka website bisa
dikatakan tidak memiliki tujuan yang jelas. Konten pada website dapat
berupa teks, gambar atau video. Jika dilihat dari konten yang
disuguhkan, terdapat beberapa macam website. Misalnya saja, sosial
media, website berita, website jual beli atau website yang berisi konten
yang berdasarkan minat, bakat serta hobi.

4

Jenis-jenis Website

Website merupakan media untuk menampilkan informasi. Awal
kemunculannya, informasi yang ditampilkan pada website hanya berupa
tulisan.
Saat ini berbagai jenis website dapat Anda temukan dengan mudah, tidak
hanya menampilkan informasi berupa tulisan saja.

Berikut beberapa diantaranya:
1. Website Pribadi
Saat ini tersedia berbagai layanan yang dapat Anda gunakan untuk membuat
website pribadi. Mulai dari yang gratis sampai layanan berbayar.
Untuk yang gratis, Anda harus bersedia memiliki alamat website seperti
www.namalayanan.com/usernameanda atau www.namawebsite.b
logspot.com.
Alamat website seperti contoh di atas tidak disarankan untuk Anda yang ingin
memiliki konten lengkap, seperti dengan adanya video dan banyak gambar.
Biasanya, penyedia layanan website gratis akan memberikan resource yang
terbatas.

5

Selain itu, untuk alamat dari website Anda akan sulit bersaing di mesin

pencari. Oleh karena itu kami menyarankan Anda untuk membuat website

melalui layanan penyedia domain dan hosting.

Sehingga Anda dapat membuat website yang lebih profesional dengan alamat
www.namaanda.com.

Saat ini, ada banyak contoh website yang bisa Anda jadikan inspirasi. Silakan
ikuti tutorial cara membuat website pribadi untuk panduan lebih lengkap.

2. Website Toko Online

Tahukah Anda toko online Indonesia yang paling populer saat ini?

Tentu Anda sudah memiliki jawabannya.

Apakah Anda ingin membuat toko online dengan fungsi yang tidak jauh
berbeda dengan toko online yang ada saat ini?

Jika benar, dengan menggunakan sebuah tool yang tepat Anda bisa
membuatnya dalam hitungan jam bahkan menit, dan website toko online Anda
sudah dapat diakses melalui internet.

Ingin mengetahui cara membuatnya?

Silakan ikuti tutorial mengenai cara membuat toko online yang sudah kami
buat sedemikian rupa sehingga dapat dengan mudah dipahami langkah demi
langkahnya.

3. Blog

Blog biasanya berisi artikel yang bertujuan untuk berbagi pengetahuan, ide
atau pengalaman penulis. Untuk contoh blog adalah apa yang saat ini Anda
sedang baca, yaitu blog Niagahoster.

Tujuan dari blog ini adalah untuk berbagi pengetahuan yang berhubungan
dengan web hosting, internet marketing dan hal lainnya.

Untuk artikel yang diterbitkan setiap blog berbeda-beda, mulai dari satu hari
satu artikel atau bahkan satu artikel dalam satu minggu. Hal ini tergantung
dari kualitas artikel yang dibuat dan jumlah penulisnya.

Jika Anda ingin membuat blog, silakan ikuti tutorial cara membuat blog
dengan langkah-langkah yang mudah dipahami untuk Anda yang baru
pertama membuatnya.

6

Manfaat Website

Website memiliki banyak manfaat di kehidupan kita. Anda bisa mengakses
media sosial menggunakan website. Belanja online juga terjadi di website.
Ketika Anda membutuhkan informasi penting, Anda juga bisa mengaksesnya
melalui website.

Manfaat website tidak hanya itu, masih banyak manfaat yang bisa Anda
dapatkan dari website. Berikut adalah beberapa manfaat website yang penting
untuk Anda ketahui:

1. Bangun Personal Branding

Dimulai dari manfaat website untuk pribadi, yaitu website untuk personal
branding. Dengan website Anda bisa membangun personal branding yang
kuat dan terpercaya.

Anda bisa membagikan hasil karya dan portfolio Anda di website. Baik itu
tulisan, foto, lukisan, gambar, desain grafis, hingga musik. Anda bisa
membangun personal branding yang profesional menggunakan website.

2. Berbagi Cerita dan Informasi

Sudah pernah baca cerita dari Raditya Dika? Atau Mungkin Anda pernah
membaca kisah perjalanan Trinity Traveler. Mereka berdua adalah contoh
blogger yang sukses bermodalkan cerita melalui website.

Anda pun bisa mengikuti jejak mereka dengan mulai membuat blog. Dengan
membuat blog Anda bisa berbagi cerita atau informasi apa saja. Dari traveling,
parenting, teknologi, keuangan, hingga kuliner.

3. Menghasilkan Uang

Ada banyak cara untuk menghasilkan uang menggunakan website. Anda bisa
menjadi blogger atau influencer dan mendapatkan banyak endorsement atau
tawaran kerja sama. Selain itu, Anda juga bisa mendaftarkan website ke Google
AdSense untuk mendapatkan uang dari iklan Google.

Anda juga bisa mengikuti program affiliate marketing untuk menghasilkan
uang dari website. Tugas Anda sebagai affiliate marketer adalah
mempromosikan produk atau jasa dari perusahaan lain di website Anda.
Kemudian Anda bisa mendapatkan komisi jika Anda yang membeli melalui
website Anda.

Kami telah menyediakan panduan tentang cara membuat website untuk Anda.
Anda bisa memanfaatkannya sebagai media untuk menghasilkan uang.

7

TUGAS

1. Sebutkan alamat web yang berkaitan dengan “olahraga”, minimal 5 ?
2. Sebutkan alamat yang berkaitan dengan dunia “fashion” minimal 5 ?
3. Sebutkan alamat web tentang market place atau “toko online”, minimal

5?

PERTANYAAN

1. Jelskan pengertian website menurut pendapat kalian ?
2. Sebutkan unsur--‐unsur yang diperlukan dalam sebuat website ?
3. Sebutkan jenis--‐jenis website yang kalian ketahui ?
4. Jelaskan pengertian dari google sites ?
5. Sebutkan manfaatkan dari pembuatan website ?

8

MODUL 2

Cara Membuat Website dengan Google Sites

Membuat website dengan Google Sites cukup mudah berkat menu
dan tampilan yang simpel. Namun, bagaimanakah cara
menggunakannya? Mari simak di bagian ini.

1. Akses Google Sites

Siapkan dulu akun Google agar dapat menggunakan Google
Sites. Jika sudah punya, segera saja akses Google Sites dan log in
dengan akun Anda. Bisa juga melalui www.sites.google.com
tentu saja sebelumnya kalian harus punya akun di google.

2. Buat Draft Website

Setelah masuk ke Dashboard Google Sites, Anda akan menemukan
beberapa pilihan template di bagian atas halaman. Dengan adanya
template yang siap pakai, Anda bisa mendapatkan desain secara
instan.
Namun, bagaimana jika Anda ingin membuat desain website yang
unik?
Caranya, dengan memilih opsi Blank untuk memulai draft
website Anda, seperti ditunjukkan di bawah ini:

9

3. Kenali Editor Google Sites

Setelah mengklik opsi Blank tadi, Anda akan dibawa menuju
halaman editor Google Sites. Tampilannya seperti di bawah ini:

Seperti yang dapat Anda lihat, editor yang dimiliki Google Sites cukup
sederhana. Namun, mari kenali dulu bagian-bagian di halaman ini.
Untuk memudahkan penjelasan, kami membagi halaman editor Google Sites
menjadi tiga:

 Tengah
 Atas
 Kanan

Bagian Tengah

Bagian tengah di halaman editor Google Sites ini
menunjukkan preview website Anda. Hasil semua kustomisasi
yang dilakukan akan terlihat di bagian ini.

10

Bagian Atas

Di bagian atas, Anda dapat menemukan beberapa tombol, yaitu:

 Undo — Membatalkan perubahan yang dilakukan.
 Redo — Menggunakan kembali perubahan yang baru saja

dilakukan.
 Preview — Melihat versi live website Anda.
 Copy website link — Mengkopi link draft website Anda

untuk diberikan ke orang lain.
 Share with other people — Berfungsi untuk

menunjukkan draft website atau mengajak orang lain
berkolaborasi di draft website yang dikerjakan.
 Setting — Berisi beberapa pengaturan terkait desain
website. Di sini Anda juga dapat menghubungkan website
dengan akun Google Analytics.
 More — Menu untuk menampilkan fungsi tambahan.
Contohnya, version history untuk melihat catatan
perubahan draft dan duplicate site untuk menggandakan
draft website yang sedang dibuat.
 Publish — Tombol untuk mempublikasikan website
setelah draft selesai dibuat.

Bagian Kanan

Terakhir, di bagian kanan, terdapat berbagai menu untuk
melakukan kustomisasi website tiga kategori utama yang
ditampilkan yaitu: Insert, Pages, dan Themes.

Tab Insert berisi jenis-jenis konten yang dapat Anda masukkan
ke halaman website. Misalnya, teks, gambar, tombol, divider,
dan daftar isi. Selain itu, Anda juga dapat menyisipkan widget

11

kalender, Google Maps, YouTube, dan dokumen-
dokumen Google Docs.

Tidak hanya itu, ada enam pilihan layout section yang dapat
Anda pilih di tab ini sesuai kebutuhan website Anda.

12

Fungsi tab Pages cukup jelas, yaitu menampilkan berapa
banyak halaman website yang Anda miliki beserta strukturnya.
Di tab ini juga Anda dapat menambahkan halaman ke website.
Tab terakhir adalah Themes yang memungkinkan Anda untuk
memilih tema dari website yang Anda buat. Sebuah tema
meliputi font tulisan, aksen warna website, dan pilihan latar
belakang untuk bagian banner.

Google Sites menawarkan enam pilihan tema untuk membuat
sebuah website yang menarik dan unik.
Meskipun sudah menentukan satu tema, Anda masih bisa
menentukan ukuran font dan latar belakang yang digunakan.
Cukup klik saja elemen yang digunakan.

13

PERTANYAAN

1. Jelaskan langkah--‐langkah sederhana dalam merancang google sites ?
2. Sebutkan perintah--‐perintah yang terdapat pada menu bagian atas dari

google sites ?
3. Jelaskan fungsi menu publish pada google sites ?
4. Jelaskan unsur--‐unsur yang terdapat dalam sebua themes website ?
5. Sebutkan pembagian editor pada google sites ?

14

MODUL 3

Membuat Desain Website

Sudah mengenal bagian-bagian di editor Google Sites, bukan?
Sekarang, mari membuat desain website Anda.
Sebagai contoh, di bagian ini akan ditunjukkan langkah-langkah
membuat homepage atau halaman utama website.
Pertama, klik teks judul di header dan ganti dengan nama
website Anda. Misalnya, “Test Website”.

Kemudian, klik Text Box di tab Insert untuk memasukkan kolom
teks di bawah header. Anda dapat mengisinya dengan deskripsi
singkat tentang tujuan website Anda.
Ketika kolom teks diklik, Anda dapat mengubah format teks agar
sesuai tampilan yang diinginkan. Opsi formatting yang ditawarkan
mirip dengan yang ada di Microsoft Word atau Google Docs,
termasuk adanya pilihan bold, italic, numbering, dan bullets.

15

Selanjutnya, Anda bisa mulai membuat draft halaman website
tersebut. Caranya, klik dan tarik template layout dari tab Insert.
Di dalam template ini, Anda juga dapat menyisipkan gambar
dan teks.

Jika ada elemen yang tidak dibutuhkan atau kurang sesuai, Anda
dapat menghapusnya dengan mudah. Caranya, letakkan kursor
di atasnya. Lalu, klik ikon tempat sampah di sebelah kiri elemen
tersebut.

16

Jika letak sebuah elemen tidak sesuai keinginan, cukup geser
saja sesuai lokasi yang Anda kehendaki. Jadi, tidak perlu buru-
buru menghapusnya.
Caranya, letakkan kursor di atas elemen dan klik ikon titik-titik
yang ada di sebelah kanan ikon tempat sampah tadi. Tahan
tombol mouse Anda ketika memindahkan elemen tersebut.

TUGAS

Buatlah sebuah wesite sederhana dengan menggunakan google sites sesuai
dengan tema yang telah ditetapkan misalnya : website sekolah, website
perusahaan, website life style, website olah raga dan lain--‐lainnya sesuai
dengan ide dan gagasan yang kalian miliki. Berikan informasi selengkap
mungkin agar pembaca dapat memahami maksud dan tujuan dari
pembuatan website tersebut.

17

Contoh tampilan website sebuat perusahaan seperti di bawah ini :

PERRTANYAAN

1. Jelanskan lagkah--‐langkah untuk masuk ke akun google sites ?
2. Jelaskan cara menambahkan judul website pada google sites?
3. Bagaimana langkah--‐langkah kalian dalam membuat website pada

tugas di atas, berikan penjelasan secara singkat ?
4. Jelaskan cara kalian memilih template yang diinginkan seperti

tampilan di atas ?
5. Jelaskan cara mengisi template pada masing--‐masing bagian dari

website yang kalian buat ?
18

MODUL 4

Mempublikasikan Website

Rancangan website yang selesai baik layout maupun kontennya selanjutnya
dapat kita publish untuk dapat dilihat atau dibaca oleh pengguna internet.
Tujuan utama dari pembuatan website tentu saja tidak boleh di lupakan seperti
untuk promosi, berbagai materi atau tutorial, atau website tentang berita. Jika
websitenya tentang berita maka kita harus selalu update agar pengunjung
selalu melihat atau membaca website yang kita punyai, begitu juga untuk
website tutorial tentu saja kita harus sering menambahkan tutorial baru untuk
memberikan pelayanan kepada pembaca mengenai materi-materi baru.
Apabila Anda sudah selesai dengan draft desain dan konten website, klik
tombol Publish.
Berikutnya, Anda diminta untuk menentukan domain website tersebut seperti
gambar berikut.

19

Pastikan nama yang Anda pilih unik agar tidak muncul pesan
seperti berikut ini:

Langkah berikutnya, cukup klik tombol Publish.
Sebagai platform pembuatan website yang aman, domain yang Anda dapatkan
dari Google Sites sudah menggunakan protokol HTTPS. Hal ini tentu penting
untuk membangun kepercayaan dengan pengunjung dan membantu upaya
SEO Anda.
Sayangnya, domain yang Anda dapatkan sangat panjang dan tidak terlihat
unik. Contohnya, sites.google.com/view/domainku.
Nah, bagaimana jika ingin memiliki domain yang lebih singkat dan mudah
diingat seperti domainku.com?

Cukup sederhana, Anda dapat membuat custom domain untuk website
tersebut.
Jangan khawatir, langkah-langkahnya mudah dan akan kami jelaskan di
bagian selanjutnya. Jika belum memiliki domain, Anda dapat membelinya
terlebih dahulu.

Membeli Domain

Apakah domain itu mahal? Tidak juga.
Harga sebuah domain tergantung di mana Anda membelinya. Di Niagahoster
atau di provider lainnya harganya hampir sama, kalian bisa mendapatkan
domain dengan harga mulai dari Rp 14.000 per bulan.
Selain murah, pilihan ekstensi yang ditawarkan juga beragam. Bukan hanya
ekstensi populer seperti .com dan .net saja. Masih banyak pilihan lainnya.

20

Jadi, jika Anda tidak mendapatkan domain dengan ekstensi
.com tidak perlu berkecil hati.
Lalu, bagaimana cara membeli domain? Mudah saja. Begini
caranya:
Akses halaman cek domain Niagahoster dan ketikkan domain yang
Anda inginkan pada kolom yang tersedia. Pilih ekstensinya, lalu
klik Cek Domain.

21

Apabila domain yang Anda pilih belum digunakan orang lain, klik
tombol Selanjutnya untuk menyelesaikan pembelian.

PERTANYAAN

1. Jelaskan tujuan publish dari sebuah website ?
2. Jelaksan langkah-langkah publikasikan website pada google sites?
3. Jelaskan pengertian domain yang kalian ketahui ?
4. Apa perbedaan domain .com, .net, .org dan .co.id ?
5. Bagaiaman cara mengetahui kalau domain yang akan kita gunakan belum

pernah digunakan oleh orang lain ?

22

MODUL 5

Menghubungkan Domain dengan Google Sites

Dengan memiliki domain sendiri maka kita akan mempunyai nama domain
sesuai dengan keinginan kita hal ini akan memudahkan dalam penulisan pada
URL dan menjadikan alamat URL yang lebih khusus untuk kita sendiri.
Setelah memiliki domain, Anda dapat menggunakannya untuk Google Sites
Anda.
Untuk menghubungkan domain dengan Google Sites, klik tombol Settings di
baris paling atas halaman editor. Tombol ini diwakili oleh ikon roda gerigi,

seperti yang ditunjukkan pada gambar di bawah ini.

Pada menu Settings, klik Custom URLs.

23

Kemudian, Anda dapat mengetikkan domain yang barusan dibeli ke
kolom yang tersedia. Jangan lupa tambahkan www di depan domain
Anda, misalnya www.royalatte.com. Hal ini untuk menghindari kendala
karena penggunaan naked URL atau top level domain.
Setelah kolom tersebut diisi dengan domain Anda, di bawahnya akan
muncul pesan yang meminta Anda untuk memverifikasi kepemilikannya.
Klik verify your ownership.

Bagaimana tahapan melakukan verifikasi kepemilikan?
Silakan log in ke akun Google lagi sebelum masuk ke halaman verifikasi
domain. Klik Select your domain registrar or provider di halaman tersebut
untuk memilih penyedia domain.

24

Jika tidak menemukan nama penyedia hosting Anda, seperti
Niagahoster, pilihlah Other di menu drop-down. Selanjutnya,
Anda akan menemukan pesan seperti di gambar berikut ini:

Pesan tersebut menginstruksikan Anda untuk menambahkan TXT record di
pengaturan DNS domain Anda. Nah, caranya akan dijelaskan pada selanjutnya.

PERTANYAAN

1. Apa tujuan menghubungkan nama domain dengan google sites yang telah
kita buat ?

2. Jelaskan langkah--‐langkah menghubungkan domain dengan google sites ?
3. Jelaskan tujuan penulisan www di depan nama domaian pada google sites

dia atas ?
4. Apa kelebihan penggunaan domain pada google sites di bandingkan tanpa

domain ?
5. Sebutkan nama--‐nama domain dan artinya yang kalian ketahui ?

25

MODUL 6
Membuat Website Sekolah (Header)

Pada latihan kali ini kita akan membuat website sekolah kita, beberapa bahan
yang perlu kita siapkan antara lain :

1. Gambar--‐gambar pendukung
2. Konten seperti profil sekolah, sejarah sekolah, kegiatan, prestasi dan

lainnya.
3. Layout atau tata letak yang kita ingingkan
4. Pengaturan warna sesuai dengan warna khas dari sekolah atau lembaga
Setelah mempersiapkan kebutuhan diatas selanjutny mulai merancang website
melalui situs www.sites.google.com , tentu saja kalian harus mempunyai akun di
situs google. Kemudian pilihlah tanda tambah untuk membuat website baru
seperti di bawah ini :

26

Selanjutnya adalah mengganti judul website dengan nama yang kita inginkan
misalnya “SMP DIGINUSA” kemudian lakukan pengaturan untuk warna huruf,
ukuran huruf dan jenis huruf sesuai dengan keinginan kalian misalnya jenis
huruf : Trebuchet MS, ukuran : 48 dan warna putih. Kalian dapat mengatur
sendiri sesuai selesara kalian

Pada bagian atas tuliskan nama situs misalnya www.smpdigi.com

Jika mempunyai logo sekolah silahkan kalian klik tambahkan logo kemudian
cari gambar logo yang akan dimasukkan:

27

Setelah di klik maka upload gambar atau logo yang akan kita masukkan pada
website.

Setelah diupload maka tampilannya seperti di bawah ini.

28

Mengganti latar belakang atau background klik ubah gambar :

Jika kita mempunyai gambar yang sudah kita desain sendiri maka kita dapat pilih
upload kemudian pilih gambar yang akan kita jaidkan latar belakang, tetapi jika
kita tidak mempunyai gambar kita dapat memilih pilih gambar …

Kemudian pilih salah satu background yang kita inginkan, setelah menentukan
gambar selanjutnya klik pilih:

29

Hasil pembuatan desian bagian header halaman depan website kurang lebih
seperti di bawah ini :

Kalian dapat berkreasi dengan model seperti di atas dengan kreasi kalian
sendiri.

PERTANYAAN

1. Jelaskan cara mengatur judul website diatas , mengganti jenis huruf, warna
dan ukurannya ?

2. Jelaskan cara memasukkan logo pada header website di atas ?
3. Jelaskan perbedaan upload dan pilih gambar pada saat mengganti

background header website di atas ?
4. Jelaskan cara mengganti logo jika ternyata ada kesalahan pada saat pertama

kali memasukkan gambar ?
5. Apa perbedaan logo dan favicon, jelaskan secara singkat ?

30

MODUL 7

Mengatur Layout Website

Setelah pembuatan header selesai selanjuntya adalah membuat layout atau tata
letak wesbsite yang akan kita buat. Kita pilih menu sisipkan atau insert kemudian
pilih tata letak atau layout. Pada pilihan tata letak terdapat beberapa pilihan, kita
dapat memilih salah satu template yang ada.

31

Misalnya kita memilih template dengan model tiga bagian yang terdiri
dari dua bagian paling kiri dan bagian tengah besar seperti di bawah ini :

Setelah menentukan layout, selanjunty kita dapat mengisi layout tersebut dengan
konten yang sesuai dengan kondisi sekolah.
Untuk tanda tanda (+) adalah untuk menambahkan gambar sedangkan klik teks
adalah untuk menambahkan teks sesuai dengan kebutuhan. Misalnya seperti di
bawah ini, untuk editing teks dapat kita lakukan secara langusng dengan memilih
jenis font, ukuran font dan efek yang dapat kita berikan pada teks yang
bersangkutan.
Untuk gambar jika terjadi kesalahan dalam memilih gambar kita dapat
menghapus dengan memilih gambar tong sampah selanjutnya kita upload lagi
gambar yang kita inginkan atau memilih gambar secara online malalui google
drive tempat kita menyimpan gambarnya.
Hasilnya seperti contoh di bawah ini :

32

Begitu juga untuk gambar selanjutnya dan teks selanjutnya caranya sama, namun
isinya berbeda sesuai dengan konten yang akan dimasukkan ke dalam website.

33

Pengaturan layout dan tampilan halaman pertama dari website sekolah teah
selesai dibuat, kalian tinggal menambahkan kontenya agar lebih padat dan
menarik.

PERTANYAAN

1. Jelaskan cara memilih layout pada google sites ?
2. Jelaskan cara menambahkan gambar dan teks pada template website

sekolah tersebut ?
3. Bagaimana cara mengganti gambar yang salah template di atas ?
4. Bagaimana cara mengatur teks ukuran, warna, jenis font, pada template

di atas ?
5. Jelaskan cara merubah format paragraph pada tampilan teks website dia

atas ?

34

MODUL 8
Halaman Profil Sekolah

Pada modul sebelumnya kita sudah berhasil membuat tampilan halaman
depandari website sekolah kota. Selanjutnya kita dapat menambahkan halaman
baru sebagai halaman profil sekolah. Kemudian kita akan buatkan link antar
halaman agar salin terkait satu dengan lainnya.
Klik menu halaman kemudian klik tanda (+) untuk menambahkan halaman baru
pada website.

Kemudian beri nama halaman tersebut sebagai penanda nama halaman dan dapat
kita jadikan tautan atau link untuk navigasi selanjutnya. Kemudian klik selesai jika
sudah cukup.

35

Secara otomatis google sites akan membuatkan kita link pada halaman tersebut
yang terdiri dari Halaman Muka dan Profil, seperti di bawah ini.

Kemudian pada halaman profil ini kita dapat menambahkan template seperti pada
saat kita membuat halaman utama di depan. Klik menu sisipkan kemudian pilih
layout yang diinginkan, contohnya seperti di bawah ini.

36

Kemudian isikan gambar dan konten mengenai profil sekolah sesuai dengan
kondisi sekolah kalian masing--‐masing. Hasilnya kurang lebih seperti di bawah
ini.

Untuk melakukan ujicoba link silahkan kalikan klik link Halaman Muka apakah
website dapat berpindah ke halaman depan jika ya, maka pembuatan halaman
profil sudah benar. Selanjutnya kalian dapat klik link Profil untuk menuju halaman
Profil.

TUGAS

Setelah kalian belajar dan mencoba membuat profil seperti di atas, tugas kalian
adalah membuat Profil sekolah kalian masing--‐masing dengan menggunakan
layout yang berbeda sesuai dengan keinginan kalian. Masukkan gambar sesuai
dengan gambar gedun sekolah kalian masing--‐masing, setelah selesai kalian
dapat malkukan ujicoba link untuk mengetahui apakah link yang kalian buat
sudah sesuai dengan harapan atau belum !

37

PERTANYAAN

1. Jelaskan cara menambahkan halaman Profil pada website sekolah yang
kalian buat di atas ?

2. Bagaimana cara membuat link pada Halaman Muka dan halaman Profil
pada website di atas ?

3. Jelaskan cara memilih layout pada halaman Profil di atas ?
4. Jelaskan cara mengganti jenis huruf dan ukuran huruf pada halaman

Profil website di atas ?
5. Mengapa sewaktu kita membuat halaman baru langusng dibuatkan link

oleh google sites, jelaskan ?

38

MODUL 9
Halaman Sambutan

Pada modul sebelumnya kita telah membuat halaman depan atau halaman muka
kemudian halaman profil, selanjutnya kita akan menambahkan halaman baru
yaitu halaman sambutan dari kepala sekolah mengenai kehadiran website sekolah
ini sebagai sarana informasi, komunikasi dan promosi sekolah. Tugas kalian
adalah melakukan wawancara dengan kepala sekolah untuk mengisi halaman
sekolah ini.
Berikut ini langkah untuk membuat halaman sekolah tersebut :

1. Klik menu halaman (pages) pada sebelah kanan kemudian klik tanda
tambah untuk membuat halaman baru, pilihan halaman baru.

2. Kemudian ketikan nama halaman : Sambutan, klik selesai

39

3. Pada bagian banner atas otomatis akan muncul link untuk halaman
Sambutan dan tampilan halaman sambutan.

4. Langkah berikut nya adalah memilih tata letak/layout yang sesuai dengan
kebutuhan halaman tersebut. Pada menu sebelah kanan pilih Sisipkan atau
Insert. Kemudian pada menu Tata letak atau layout pilih salah satu yang
sesuai. Double klik pada tema yang dipilih.

5. Selanjutnya kalian dapat melakukan editing teks sesuai dengan kondisi di
sekolah kalain masing--‐masing sesuai dengan hasil wawancara kalian
dengan kepala sekolah. Kemudian untuk gambar kalian tambahkan foto
kepala sekolah. Buatlah tampilan halaman ini semenarik mungkin agar
dikunjungi oleh banyak netizen.

6. Tampilannya kurang lebih seperti di bawah ini,

40

TUGAS

Tugas kalian pada pertemuan kali ini adalah membuat halaman sambutan
kepala sekolah seperti pada contoh diatas. Yang harus kalian siapkan
adalah :
1. Foto Kepala Sekolah
2. Hasil wawancara dengan kepala sekolah ( dapat dilakukan

berkelompok)
3. Untuk tampilan sesuai dengan kreatifitas kalian masing--‐masing,

selamat berkarya.

41

PERTANYAAN

1. Jelaskan cara menambahkan halaman Sambutan pada website sekolah
yang kalian buat di atas ?

2. Bagaimana cara membuat nama halaman Sambutan di atas ?
3. Jelaskan cara memilih layout pada halaman Sambutan di atas ?
4. Jelaskan cara menambahkan teks nama kepala sekolah seperti di bawah

ini.

5. Jelaskan cara mengganti huruf menjadi huruf tebal pada halaman
tersebut ?

42

MODUL 10

Halaman Kegiatan

Untuk melengkapi tampilan halaman website sekolah kalian kita dapat
menambahkan halaman baru berupa halaman Kegiatan sekolah. Halaman
kegiatan ini akan menampung informasi semua kegitan yang telah dilakukan oleh
sekolah, khususnya adalah kegiatan berskala besar seperti Upacara peringatan 17
Agustus, Kegiatan bhakti sosial, kegiatan lomba antar SD dan kegiatan lainnya
yang berskala besar atau melibatkan banyak orang.
Kegiatan tersebut sebaiknya perpaduan antara foto atau video dengan ulasan
reportase sehingga seolah--‐olah website ini mampu berbicara kepada setiap
pembaca berita atau netizen tentang kegiatan yang telah dilaksanakan oleh
sekolah.
Berikut ini langkah untuk membuat halaman sekolah tersebut :

1. Klik menu halaman (pages) pada sebelah kanan kemudian klik tanda
tambah untuk membuat halaman baru, pilihan halaman baru.

2. Kemudian pilih halaman baru untuk membuat halaman kegiatan,
ketikkan nama halaman yaitu Kegiatan.
43

3. Maka akan tampil seperti di bawah ini , link otomatis dibuat kemudian
judul halaman juga akan otomatis tampil.

4. Sisipkan tata letak pilihlah layout yang mengandung unsur gambar dan
dibawahnya ada tulisan atau teks, seperti contoh di bawah ini.

5. Selanjutnya adalah mengisi masing--‐masing kegiatan dengan menyisipkan
gambar. Minimal kita akan menampilkan empat gambar dengan penjelasan
di bawahnya.

6. Contoh tampilannya seperti di bawah ini :
44

TUGAS

Tugas kalian pada modul ini adalah menyelesaikan pembuatan halaman
Kegiatan sekolah seperti contoh di atas. Yang harus kalian siapkan adalah
untuk melengkapi halaman ini adalah :
1. Gambar pendukung untu 4 kegiatanseperti di atas
2. Reportase atau ulasan mengenai kegiatan tersebut
3. Membuat tampilan agar lebih menarik, ganti background pada

tampilan halaman dengan tampilan yang menarik dengan cara pilih
menu kanan Latar belakang bagian  Gambar  pilih Gambar, pilih
salah satu background yang diinginkan.

45

PERTANYAAN

1. Jelaskan langkah--‐langkah mengganti background pada bagian isi dari
halaman Kegiatan ?

2. Jelaskan cara menambahkan gambar pada halaman kegitan tersebut dari
komputer kalian atau dari google drive ?

46

MODUL 11

Halaman Extrakurikuler

Halaman extrakurikuler merupakan salah satu halaman yang paling sering
dikunjungi oleh netizen untuk melihat jenis--‐jenis extrakurikuler yang di
sediakan oleh sekolah. Selain melihat kegiatannya tentu juga ingin melihat
prestasi yang pernah dicapai selama kegiatan tersebut dilaksanakan di sekolah.
Siswa aktif atau calon siswa baru dapat melihat potensi atau kemampuan
bakatnya agar dapat tersalurkan dengan mengikuti kegitan extrakurikuler
tersebut. Meraka akan merasa kecewa jika pilihan extrakurikulernya ternyata
tidak ada pada sekolah tersebut. oleh karena itu halaman ini salah halaman favorit
dari netizen.
Berikut ini langkah untuk membuat halaman sekolah tersebut :

1. Klik menu halaman (pages) pada sebelah kanan kemudian klik tanda
tambah untuk membuat halaman baru, pilihan halaman baru.

2. Kemudian pilih halaman baru untuk membuat halaman kegiatan,
ketikkan nama halaman yaitu Extrakurikuler.

47

3. Maka akan tampil halaman secara otomatis disertai dengan link dan judul
halamannya seperti di bawah ini.

4. Sisipkan tata letak atau layout untuk halaman extrakurikuler, pilih tata
letak/layout kemudian pilih tata letak yang diinginkan. Atur juga
backgroundnya agar lebih menarik lagi. Contohnya seperti di bawah ini.
Lakukan klik lagi untuk menambahkan tata letak jika masih kurang.

5. Langkah selanjutnya adalah mengisi konten extrakurikuler yang ada di
sekolah kalian masing--‐masing. Isilah selengkap dan semenarik mungkin
agar tampilan web kalian semakin OK.
48

TUGAS

Tugas kalian pada modul ini adalah menyelesaikan pembuatan halaman
Extrakurikuler sekolah seperti contoh di bawah ini. Yang harus kalian
siapkan adalah untuk melengkapi halaman ini adalah :
1. Gambar pendukung untuk kegiatan extrakurikuler.
2. Reportase atau ulasan mengenai kegiatan tersebut
3. Membuat tampilan agar lebih menarik, ganti background pada

tampilan halaman dengan tampilan yang menarik dengan cara pilih
menu kanan Latar belakang bagian  Gambar  pilih Gambar, pilih
salah satu background yang diinginkan.
4. Berikut ini contah tampilan halaman extra kurikuler.

49

PERTANYAAN

1. Jelaskan langkah--‐langkah untuk membuat layout seperti pada halaman
Extrakurikuler di atas ?

2. Bagaimana caranya menambahkan jika tampilan extra lebih dari 4,
jelaskan langkah--‐langkahnya ?

50