OTOMATISASI · OTOMATISASI PERKANTORAN MODUL SIS WA 3 KATA PENGANTAR Puji syukur kehadirat Allah Swt atas segala rahmat, taufiq dan hidayahnya sehingga kami masih diberi kesempatan

MODUL SISWA

IRFA

RIDH

A K.N.

OTOMATISASI

PERKANTORAN

NAMA: ..................................

KELAS :..................................

JILID 2

OTOMATISASI PERKANTORAN MODUL

SISWA

2

UNTUK SMK KELAS X

SEMESTER II

OTOMATISASI PERKANTORAN

Mengoperasikan Website


SISWA

3

KATA PENGANTAR

Puji syukur kehadirat Allah Swt atas segala rahmat, taufiq dan hidayahnya sehingga

kami masih diberi kesempatan untuk menyajikan sebuah modul yang berjudul

“Otomatisasi Perkantoran”. Kami juga mengucapkan terima kasih kepada Bapak

dosen matakuliah Pengembangan Bahan Ajar yang telah mengajarkan dan

membimbing kami untuk membuat modul ini.

Pembelajaran kelas X jenjang Pendidikan Menengah Kejuruan yang disajikan

dalam modul ini juga tunduk pada ketentuan kurikulum 2013. Modul ini disusun

sebaik mungkin dan tentunya dalam praktikya di lapangan, seorang guru yang paling

mengerti situasi dan kondisi dari sisi mana yang harus diterapkan dan sisi mana yang

belum bisa diterapkan. Modul siswa ini berisi materi pembelajaran yang membekali

peserta didik dengan pengetahuan, keterampilan dalam menyajikan pengetahuan

yang dikuasai secara kongkrit dan abstrak, dan sikap sebagai makhluk yang

mensyukuri anugerah alam semesta yang dikaruniakan kepadanya melalui

pemanfaatan yang bertanggung jawab.

Kami menyadari bahwa modul ini belum sempurna, karena itu kami sangat

mengharapkan saran-saran yang sifatnya membangun dari rekan guru ataupun

stakeholder pendidikan lainnya.

Malang, 26 November 2014

Penyusun


SISWA

4

Halaman sampul .................................................................................................. 1

Halaman franci .................................................................................................... 2

Kata pengantar ..................................................................................................... 3

Daftar Isi .............................................................................................................. 4

Peta kedudukan modul ......................................................................................... 6

I. Pendahuluan

A. Deskripsi ....................................................................................................... 7

B. Prasyarat ...................................................................................................... 7

C. Petunjuk Penggunaan Modul ..................................................................... 7

Untuk peserta didik

Untuk Pendidik

D. Tujuan akhir ................................................................................................ 9

E. Cek kemampuan ......................................................................................... 9

II. Pembahasan

Rencana Belajar Siswa ......................................................................................... 10

Kegiatan Pembelajaran I : Akses Internet

A. Tujuan Pembelajaran ................................................................................. 10

B. Uraian Materi .............................................................................................. 10

C. Ringkasan Materi ........................................................................................ 18

Asah Kemampuan ................................................................................................... 18

Kegiatan Pembelajaran II: Mengidentifikasi Pengertian HTML


B. Uraian Materi .............................................................................................. 22

C. Ringkasan Materi......................................................................................... 27

DAFTAR ISI


SISWA

5

D. Tes Formatif ................................................................................................. 28

Kegiatan Pembelajaran III: Membuat website dengan icrosoft Frontpage


B. Uraian Materi .............................................................................................. 29

C. Ringkasan Materi......................................................................................... 45

D. Tugas ............................................................................................................. 45

E. Tes Formatif ................................................................................................. 45

III. Penutup

Glosarium ............................................................................................................................................... 47

Daftar Pustaka ....................................................................................................................................... 48


SISWA

6

PETA KEDUDUKAN MODUL

Presentasi Publishing

Website Memproduksi

Dokumen


SISWA

7

A. Deskripsi

Otomatisasi dimulai di pabrik dan menyebar ke kantor dalam bentuk otomatisasi

kantor (office automation) atau OA. Awalnya OA dimaksudkan untuk membantu pekerja

sekretariat dan administratif, kemudian meningkat pada tingkat manajer dan profesional

sebagai pemakai untuk meningkatkan produktifitas mereka. Sedikitnya ada 11 penerapan OA,

ada yang menggunakan komputer ada pula yang tidak. Penerapan OA dipengaruhi oleh

jenis organisasi, pilihan pribadi manajer, dan sumberdaya OA yang tersedia.

Manfaat Automatisasi Perkantoran merupakan kaitan berbagai komponen dalam

menangani informasi; mulai dari input hingga distribusi dengan memanfaatkan bantuan

teknologi secara optimal dan campur tangan manusia secara minimal. Dengan demikian

akan membuat informasi menjadi lebih mudah dan murah digunakan, dipindahkan, dan

dirawat. Pada akhirnya dapat meletakkan lkatan yang kuat untuk integrasi informasi sehingga

perusahaan mampu berkompetisi lebih baik (competitive advantage).

Dengan mempelajari bahan ajar ini, siswa dapat menerapkan ilmu yang diperoleh dalam mata

pelajaran otomatisasi perkantoran, Sistem Informasi Manajemen dan Jaringan Komputer.

B. Prasarat

Sebelum mempelajari modul ini, Anda dipersyaratkan telah memiliki

kemampuan awal berupa kemampuan dalam melakukan presentasi menggunakan

power point dan mengoperasikan microsoft publisher (Aplikasi Bahan Cetak) sebagai

otomatisasi menghasilkan dokumen bahan cetak, juga mampu mengakses internet

dengan lancar. Selain itu Anda telah mempelajari modul-modul tertentu dengan tuntas

seperti terlihat pada peta kedudukan modul dengan menunjukkan bukti autentik.

C. Petunjuk Penggunaan modul

Untuk Peserta Didik

1. Petunjuk Umum

a. Bacalah bahan ajar dengan seksama, terutama bagian instruksi.

b. Pahami tujuan Anda mempelajari bahan ajar, sasaran yang diharapkan, tingkat

penguasaan yang diharapkan serta waktu yang ditargetkan.

c. Kerjakanlah tugas dan latihan yang terdapat di dalamnya dengan jujur tanpa

melihat kunci jawaban sebelum anda mengerjakannya.


SISWA

8

d. Gunakan teknik membaca cepat dalam mempelajari bahan ajar.

e. Laporkan kemajuan anda kepada pendidik sebelum anda melanjutkan ke

bahan ajar selanjutnya.

2. Anda diperbolehkan bertanya kepada pendidik jika dianggap perlu.

3. Usahakan menyelesaikan setiap bahan ajar lebih cepat dari waktu yang

ditetapkan.

4. Jika ada bagian yang belum Anda pahami, cobalah terlebih dahulu

mendiskusikan dengan teman yang sedang mengerjakan bagian yang sama,

sebelum Anda bertanya pada pendidik. Kalau perlu, Anda harus berusaha mencari

tahu jawabannya pada sumber yang lain.

5. Tingkat pemahaman minimal yang diharapkan sebesar 75%, jika tingkat

penguasaan Anda kurang dari 75%, pelajari materi/ bagianbagian dari bahan ajar

yang belum Anda kuasai, atau mintalah saran–saran dari pendidik. Ikuti

ketentuan yang berlaku dalam setiap bahan ajar sebelum Anda melanjutkan ke

bagian lain atau ke bahan ajar berikutnya.

Untuk Pendidik

1. Pastikan bahwa siswa yang akan mempelajari bahan ajar ini telah

mempelajari bahan ajar prasyarat secara tuntas.

2. Informasikan kepada peserta didik / siswa bagaimana cara menggunakan modul,

metode pemelajaran, cara penilaian, bahan / alat yang digunakan dalam

pemelajaran dan durasi waktu pemelajaran serta metode penilaiannya.

3. Berikan perhatian khusus pada perencanaan jenis kegiatan, tempat kegiatan

belajar, dan waktu penyelesaian akhir pembelajaran agar mereka dapat belajar

efektif dan efisien untuk mencapai kompetensi

4. Berikan motivasi, bimbingan, dan pendampingan pada siswa agar semngat

belajarnya meningkat.

5. Mencatat pencapaian kemajuan siswa, menindaklanjuti dan memberikan umpan

balik atas pencapaian belajar siswa.

6. Memberikan test akhir apabila peserta didik sudah kompeten dalam penguasaan

modul ini


SISWA

9

D. Tujuan Akhir

Setelah mempelajari modul ini peserta didik diharapkan:

Kompetensi Tujuan Akhir

Menguraikan cara mengoperasikan webside

1. Mampu mencari informasi lewat internet.

2. Mampu membuat halaman web sederhana.

3. Mampu mengoperasikan webside dengan baik dan benar.

E. Cek Kemampuan

Untuk mengetahui kemampuan yang sudah Anda miliki, silahkan Anda isi pernyataan

berikut ini :

Berilah tanda cheklist (v) pada kolom yang tersedia !!

No. Pernyataan Ya Tidak

1. Apakah Anda tahu yang dimaksud dengan Internet?

2. Apakah Anda tahu untuk apa internet digunakan?

3. Apakah Anda dapat menyebutkan cara menjalankan

internet?

4. Apakah Anda tahu yang dimaksud dengan HTML ?

5 Apakah Anda tahu cara membuat web sederhana?

6. Dapatkah Anda mengoperasikan Web dengan

benar?


SISWA

10

Rencana belajar Siswa

Kompetensi : Mengoperasikan Webside

Kegiatan Pembelajaran I : Akses Internet

Kegiatan Pembelajaran II : Mengdentifikasi pengertian HTML

Kegiatan Pembelajaran III : Menggunakan perangkat lunak untuk menciptakan web site

Alokasi Waktu : 3 x 3 JP

A. Tujuan Pembelajaran

Setelah mempelajari kegiatan pembelajaran ini, Anda diharapkan mampu:

Mengetahui istilah-istilah dalam Internet

Memahami macam-macam Tipe Koneksi Internet

Mampu menjalankan dan mengakhiri Internet

Memahami penggunaan Internet

B. Uraian Materi

1. Mengenal Istilah Internet

Internet adalah kumpulan komputer yang saling berhubunga dalam bentuk

jaringan. Beberapa istilah internet aalah sebagai berikut:

Domain

Domain adalah nama yang sudah distandarkan di internet. Setiap negara

memiliki nama domain.

AKSES INTERNET KEGIATAN

PEMBELAJARAN I


SISWA

11

Negara Nama Domain Keterangan

Indonesia id Dikelola di negara Indonesia

Malaysia my Dikelola di negara Malaysia

China cn Dikelola di negara China

Amerika Serikat us Dikelola di negara AS

Global dunia

com Domain untuk bisnis

net Operator internet

org Organisasi masyarakat

edu Pendidikan

gov Organisasi Pemerintah

mil Organisasi Militer

Sistem pendaftaran di internet bebas terbuka dan yang lebih dulu mendaftar

diakui sebagai pemilik. Sebagai contoh Telkom mendaftarkan nama plasa

dalam domain com., sehingga nama plasa.com (dipisahkan titi/dot)

merupakan situs resmi internet milik Telkom.

Klasifikasi Nama

Untuk memudahkan dalam mengingat, internet membagi nama dalam

beberapa klasifikasi, seperti berikut:

Klasifikasi untuk perusahaan, klasifikasi ini menggunakan dua huruf

yait co diikuti nama negara. Sebagai contoh Telkom menggunakan

nama telkom.co.id karena merupakan perusahaan di Indonesia.

Klasifikasi penyedia internet, khusus penyedia internet, diberi

klasifikasi net, misalnya adalah telkom.net.id

Klasifikasi organisasi sosial, menggunakan or.

Klasifikasi pemerintah, menggunakan klasifikasi go/gov.

Dengan demikian, sebuah institusi dapat mendaftarkan namanya sesuai

dengan klasifikasi dan negara yang mengelolanya. Sebagai contoh pendaftaran

nama situs dapat dilakukan oleh Telkom melalui Telkomnet. Kunjungi

www.telkom.net.id untuk mendapatkan informasi lebih lanjut.

Penanaman Komputer Berbasis Web

Di internet ada suatu konvensi untuk memberi penanaman komputer

yang tersambung ke jaringan internet yang dapat diakses secara terbuka.

Konvensi/kebiasaan yang dipakai adalah dengan nama depan www atau

www.perusahaan.klas.negara. Contohnya: www.telkom.co.id,

www.plasa.com, www.telkom.net, dan lain-lain. Umumnya perusahaan

http://www.telkom.net.id/

http://www.perusahaan.klas.negara/

http://www.telkom.co.id/

http://www.plasa.com/

http://www.telkom.net/


SISWA

12

menggunakan nama yang umum, jadi kita dapat menebak-nebak dan

mencobanya (setelah dapat akses ke Internet).

Internet Phobia

Banyak iklan komputer dan ISP mengesankan bahwa internet sangat

sulit dan modern. Namun kita tidak perlu khawatir, karena sesungguhnya

internet sangat mudah dioperasikan, dan satu hal fakta yang sering

disembunyikan, sebagian besar pengguna internet adalah orang awam yang

kurang paham mengenai jaringan.

Internet sebagai jaringan komputer global telah terbukti dapat

mempermudah pemakainya untuk berkomunikasi dan memperoleh informasi.

Berikut ini beberapa fasilitas yang dimiliki oleh internet, antara lain surat

elektronik (e-mail), kelompok diskusi (mailing list), file server/transfer,

web/distributed multimedia database, serta video dan suara.

2. Tipe Koneksi Internet

Dalam melakukan penyambungan atau koneksi dengan internet, terdapat

beberapa cara yang disesuaikan dengan tingkat pengaksesan dan komunikasi internet.

Ada beberapa tipe koneksi dari internet, yaitu seperti berikut:

Online atau Dial. Account melalui internet provider account ini sering disebut

pula sebagai shell account. Penggunaan account ini lebih terbatas, lebih

diutamakan pada biaya yang rendah. Online accounts biasanya oleh disediakan

dari beberapa instansi, yaitu internet provider, online service secara komersial,

universitas pemerintahan, atau organisasi nonprofit.

Koneksi SLIP/PPP. Dengan SLIP/PPP, transfer data lebih cepat sehingga

kamu dapat menjalankan program yang ada di internet. Kamu tidak perlu

mengirim tidak perlu mengirim data per karakter melalui modem.

Jalur yang disewakan atau leased line, untuk memakai line atau jalur yang

disewakan perlu memakai TCP/IP software pada suatu LAN. Untuk membuat

suatu jalur yang dapat disewakan, sangat kompleks dan diperlukan waktu lama.

Biasanya perusahaan yang menggunakan line ini untuk dijual kembali ke

perusahaan menengah atau kecil.

Internet kabel, yaitu sistem yang terhubung ke internet melalui kabel yang

digunakan untuk TV (tv cable)


SISWA

13

Koneksi satelit, yaitu menggunakan fasilitas satelit untuk menerima layanan

internet.

Integrated services digital network (ISDN), yaitu menggunakan saluran telepon

digital dengan kecepatan transfer yang lebih cepat dibandingkan salura telepon

biasa.

Wireless connections, yaitu akses internet tanpa kabel yang biasanya digunakan

untuk pagers, telepon seluler, dan PDA.

Web TV, diperkenalkan tahun 1966. Koneksi ini menyediakan layanan web dan

e-mail menggunakan perangkat telivisi.

3. Menjalankan/Memulai Internet

Kita dapat memulai atau menjalankan internet dengan menggunakan langkah

berikut ini.

1) Nyalakan komputer. Tunggu sampai komputer menampilkan area kerja

(dekstop) Windows 95/98/XP/ME.

2) Pilih tombol Start yang ada di taksbar.

3) Pilih menu Program, Internet Explorer, kemudian tunggu sampai jendela

program Internet Explorer ditampilkan (gambar 1.a).


SISWA

14

4. Fungsi Menu dan Ikon pada Internet

Kamu sudah dapat memulai internet. Lihatlah Gambar 1.a kembali, untuk

melihat elemen-elemen dasar internet secara umum. Bagian-bagian dasar dari internet

yang perlu diketahui, seperti berikut.

Ikon kontrol menu (control menu icon), digunakan untuk mengontrol jendela

yang sedang aktif.

Baris judul (title bar), berisi nama halaman situs (web site) dan nama program

aplikasi Internet yang sedang aktif. Baris judul ini dapat juga digunakan untuk

memindahkan jendela ke posisi lain.

Keterangan :

1. Title Bar : Berisi judul dari website yang kita buka

2. Menu Bar : Sederetan menu yang jika diklik akan memunculkan sub menu dibawahnya. Menu bar terdiri

dari File, Edit, View, Favorites, Tools, dan help

3. Standard Toolbar : Berisi icon-icon standar

pengoperasian internet

4. Address Bar : merupakan bagian tempat mengetikkan

alat web yang akan dikunjungi 5. Link : penghubung ke alamat website tanpa mengetikkan

alamatnya di address bar. Dapat ditambah dan dikurangi 6. Workspace : Tempat ditampilkannya halaman web yang

diminta

7. Status Bar : menunjukkan proses loading halaman web

http://2.bp.blogspot.com/_QmP0EdpSA-Y/TUo-4d6whXI/AAAAAAAAAE0/M3KRHxMVK2c/s1600/jendela+ie.png


SISWA

15

Baris menu (menu bar), berisi sederetan menu yang akan membantu kita dalam

proses surfing di internet. Setiap menu memunyai sub menu dan fungsi sesuai

dengan nama menunya. Baris menu berisi barisan perintah berupa menu, seperti

menu File, Edit, View, Favourite, Tools dan Help.

Baris toolbar (toolbars), berisi tombol-tombol yang digunakan untuk menjalankan

suatu perintah-perintah yang sering digunakan.

Standard button, terdiri atas tombol-tombol standar yang sering digunakan pada

saat kita mengakses internet.

Ikon Fungsi

Icon Back berfungsi untuk kembali ke halaman sebelumnya yang

sudah diakses.

Icon Forward berfungsi untuk kembali ke halaman sebelum di

back dan untuk ke halaman berikutnya lagi menggunakan

tombol ini.

Icon Stop berfungsi untuk menghentikan brosur yang sedang

mengakses penampilan suatu situs web .

Icon Refresh berfungsi untuk mengulangi kembal;I proses

penampilan situs web.

Icon Home berfungsi untuk membuka fasilitas area pencarian data

atau informasi di internet.

Icon Search berfungsi untuk membuka fasilitas area pencarian data

atau informasi di internet.

Icon Favorites untuk menampilkan daftar alamat internet yang

pernah kita simpan sehingga memudahkan kita untuk

mengakses kembali.

Icon Media untuk menampilkan jendela windows media.com yang

berisi program musik,video,dan film.

Icon History untuk menampilkan daftar alamat yang pernah

dikunjungi pada hari ini maupun pada hari sebelumnya.

Icon Mail untuk mengaktifkan fasilitas Outbook Express dari

Internet Eksplorer.

Icon Print untuk mencetak halaman situs yang terbuka.

Icon Edit With Microsoft Programmer

(Ms.front

page,Ms.excel,Ms.word,Mrs.word pad ) untuk mengedit atau

membuat data melalui program microsoft.

Icon Discuss untuk menampilkan discussion bar pada internet

explorer(pada Windows XP).

http://3.bp.blogspot.com/--EJGrFLpuxA/T1b-xAsYJmI/AAAAAAAAACY/Ib8n9xLF9Oc/s1600/ff.JPG

http://4.bp.blogspot.com/-PBvGj0yNH9s/T1b-oZKIrlI/AAAAAAAAABY/Lh3H3x45sXc/s1600/12.JPG

http://1.bp.blogspot.com/-jw-F1RlfskU/T1b-mjtdCvI/AAAAAAAAABA/0vkbWgesOrc/s1600/1.JPG

http://4.bp.blogspot.com/-jtx-K2QeNco/T1b-qgrcalI/AAAAAAAAABg/rhfx2Oaw_As/s1600/2.JPG

http://1.bp.blogspot.com/-luX8PF2R3Uk/T1b-rx5iG8I/AAAAAAAAABo/tFPVAMe8D4o/s1600/3.JPG

http://2.bp.blogspot.com/-XxLim05abk0/T1b-s4Zi3II/AAAAAAAAABw/-FE-6o_1oQ0/s1600/4.JPG

http://1.bp.blogspot.com/-69vZmoGSaZI/T1b-uEdeecI/AAAAAAAAAB0/R6kmNckif7o/s1600/5.JPG

http://2.bp.blogspot.com/-PUhb6cVJXNY/T1b-ut4i3oI/AAAAAAAAAB8/KeK8xaWhlc0/s1600/6.JPG

http://3.bp.blogspot.com/-alUnK1-93gM/T1b-vFKCdJI/AAAAAAAAACE/lzJBG66lSaY/s1600/7.JPG

http://1.bp.blogspot.com/-fs1OkqJKkJU/T1b-wB1fj5I/AAAAAAAAACM/06gyeHRuazA/s1600/8.JPG

http://1.bp.blogspot.com/-9f4FMuScFIY/T1b-wrEeXoI/AAAAAAAAACU/7kEb_JvrHgM/s1600/9.JPG

http://2.bp.blogspot.com/-MNNp-S_5EIw/T1b-nV-nteI/AAAAAAAAABE/o3MOC07Pbm8/s1600/10.JPG

http://3.bp.blogspot.com/-wNMMywhrg6o/T1b-n7xwm9I/AAAAAAAAABM/0uPccl4GcgU/s1600/11.JPG


SISWA

16

Address bar URL (universal resource locator), digunkan untuk mengetikkan

alamat situs web yang akan dikunjungi. Misalnya, kamu mau mengunjungi situs

Program Ekstensi FEUA, maka pada kotak address bar ini ketikkan

http://ekstensi-feua.or.id. Lalu, tekan tombol ENTER atau klik tombol GO yang

terletak di ujung kotak address bar ini maka browser akan membuka situs tersebut.

Baris penggulung (scroll bar), untuk menggeser layar ke kiri atau ke kanan,

gunakan baris penggulung mendatar (horizontal scroll bar) dan untuk menggeser

layar ke atas atau ke bawah, gunakan baris penggulung tegak (vertical scrool bar).

Titik sisip (insertion point), terbentuk garis vertikal yang berkedip-kedip. Setiap

karakter yang kita ketik akan muncul pada posisi titik sisip ini. Posisi titik sisip

berada pada address bar tempat penulisan URL.

Baris status (status bar), berfungsi untuk menampilkan alamat dari hyperlinks

yang sedang disorot.

Baris taskbar (taskbar bar), akan menampilkan file yang aktif atau sedang dibuka.

Pada baris status ini ditampilkan pula nama file untuk memperhatikan file yang

sedang aktif.

Tombol ukuran (isizing button)

5. Sumber Informasi dari Internet

Seperti yang telah dikemukakan di atas, internet adalah gudang informasi, mulai

dari hal-hal yang kecil sampai pada hal-hal yang di luar pikiran kita, tinggal bagaimana

cara kita memanfaatkannya. Banyak sekali situs yang berfungsi sebagai mesin pencari

di internet saat ini, seperti www.yahoo.com, www.google.com, www.catcha.co.id,

www.hotbot.com, www.incari.com, www.excite.com, www.looksmart.com dan masih

banyak yang lain.

Situs Pencarian Informasi

Informasi aktual di Indonesia, misalnya www.detik.com dan www.replubika.co.id,

informasi perusahaan misalnya www.telkom.co.id dan www.telkomsel.com.

(gambar 1.b)

http://ekstensi-feua.or.id/

http://www.yahoo.com/

http://www.google.com/

http://www.catcha.co.id/

http://www.hotbot.com/

http://www.incari.com/

http://www.excite.com/

http://www.looksmart.com/

http://www.detik.com/

http://www.replubika.co.id/

http://www.telkom.co.id/

http://www.telkomsel.com/


SISWA

17

Pencarian Data

Tersedia situs pencari kualifikasi dunia, misalnya www.google.com dan

www.msn.com. (gambar 1.c)


http://www.msn.com/


SISWA

18

ASAH KEMAMPUAN

6. Mengakhiri Internet

Setelah selesai bekerja dengan internet, kita dapat mengakhirinya dengan

menggunakan langkah berikut.

1) Pilih salah satu langkah berikut untuk mengakhiri penggunaan internet.

pilih dan klik menu File, Exit (Alt+F4)

klik tombol close (X) yang berada di pojok kanan atas jendela internet.

Klik dua kali ikon kontrol menu yang berada di pojok kiri atas dari jendela

internet.

2) Tunggu sampai jendela internet ditutup.

C. Ringkasan Materi

Internet sebagai jaringan komputer global yang terbukti dapat mempermudah

pemakai untuk berkomunikasi dan mendapatkan informasi. Banyak sekali situs yang

berfungsi sebagai mesin pencari di internet saat ini, seperti www.yahoo.com,

www.google.com, www.catcha.co.id, www.hotbot.com, www.incari.com,

www.excite.com, www.looksmart.com dan masih banyak yang lain.

Kerjakan soal-soal berikut di buku tugasmu.

I. Pilihlah satu jawaban yang paling benar.

1. Kode yang digunakan untuk membuat sebuah halaman web disebut.....

a. HTML

b. HTTP

c. WWW

d. URL

2. Dalam penulisan sebuah situs yang akan dikunjungi selalu diawali......

a. HTML

b. HTTP

c. WWW

d. URL

3. Teks yang berfungsi untuk mengakses file atau halaman web yang lain disebut......

a. Hyperlink

b. Protocol

c. ISP

A. Asah Teori

http://www.yahoo.com/


http://www.catcha.co.id/

http://www.hotbot.com/

http://www.incari.com/

http://www.excite.com/

http://www.looksmart.com/


SISWA

19

d. URL

4. Tombol yang digunakan untuk menghentikan proses loading sebuah halaman web

adalah.........

a. Back

b. Forward

c. Stop

d. Home

5. Tombol yang digunakan untuk melihat web yang telah dikunjungi beberapa saat

terakhir adalah......

a. History

b. Forward

c. Favorite

d. Media

6. Proses memindahkan file dari komputer kita ke komputer lain disebut......

a. Download

b. Upload

c. Copy

d. Cut

7. Program yang dibagikan secara gratis di internet dan di download secara bebas

disebut......

a. Shareware

b. Freeware

c. Program tiruan

d. Program versi percobaan

8. Fasilitas internet yang dapat digunakan untuk bercakap-cakap melalui internet

adalah......

a. E-mail

b. Mailing list

c. Chatting

d. Newsgroup

9. Untuk mengakses web dibutuhkan soft-ware yang disebut browser. Salah satu

contoh browser terpopuler adalah......

a. Internet explorer

b. Microsoft Office

c. Photoshop

d. Outlook Express

10. Chat Groups/internet Relay Chat (IRC) adalah forum tempat pemakai saling

berdiskusi atau berbincang-bincang dengan pemakai lain dengan......

a. gambar

b. suara

c. video


SISWA

20

d. teks

II. Jawablah pertanyaan berikut dengan singkat dan jelas.

1. Isilah domain dan keterangan berikut ini.

2. Perhatikan gambar berikut, kemudian isilah keterangan di bawah ini berdasarkan

gambar.

Isilah titik-titik di bawah ini!

Keterangan

a ................................................ f ...........................................

b ................................................ g ...........................................

c ................................................ h ...........................................

d ................................................ i ...........................................

e ................................................. j ...........................................

Domain Keterangan

com

Penyedia internet

Organisasi masyarakat

edu

gov

Organisasi pemerintah militer

id

us

jp

http://2.bp.blogspot.com/_QmP0EdpSA-Y/TUo-4d6whXI/AAAAAAAAAE0/M3KRHxMVK2c/s1600/jendela+ie.png


SISWA

21

Praktikkan dengan benar.

1. Aktifkan internet dari menu Start dengan benar.

2. Lakukan langkah mengakhiri internet dari baris menu.

3. Lakukan membuka internet selain cara yang dilakukan pada nomor 1.

4. Lakukan cara mengakhiri internet dengan cara lain selain nomor 2.

5. Jika merasa belum lancar berlatihlah dengan lancar dalam membuka dan mengakhiri

internet.

B. Asah Praktik

SELAMAT MENCOBA!

C. TUGAS

Carilah informasi pada buku, majalah, koran, internet atau sumber lain tentang hal-hal

sebagai berikut.

No Permasalahan

1 Pengertian internet

2 Fungsi internet

3 Tipe-tipe koneksi

4 Contoh-contoh informasi yang diperoleh dari internet

5 Situs-situs yang berhubungan dengan pelajaran sekolah

Kemudian, buatlah laporannya dan presentasikan di depan kelas.


SISWA

22


Setelah mempelajari kegiatan pembelajaran ini, Anda diharapkan mampu:

Memahami pengertian HTML (HyperText Mark up Language)

Mengetahui struktur dasar suatu file HTML

Mengetahui beberapa tag HTML dasar yang sering digunakan

B. Uraian Materi

1. Pengertian HTML (Hypertext Mark up Language)

HTML ( Hypertext Markup Language ) adalah bahasa dasar untuk web scripting bersifat

Client Side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik,

serta multimedia dan juga untuk menghubungkan antar tampilan web page atau yang lebih

dikenal dengan Hyperlink.

Tidak diperlukan suatu program editor khusus untuk menggunakan kode perintah-

perintah HTML, kita dapat menggunakan Notepad, Edit Plus ataupun editor lainnya yang

berbasis GUI ( Graphical User Interface ) seperti Microsoft Front Page, Dreamweaver CS3,

Adobe Golive dan sebagainya,namun dengan program-program ini kita tidak perlu mengetik

kode HTMLnya, semua perintah diwujudkan secara Icon Base. Sebagai seorang pengembang

aplikasi web maka kemampuan penguasaan kode-kode HTML sangat diperlukan, dengan

demikian kita mampu menguasai program-program editor lainnya. Untuk dapat menguasai

kode-kode HTML sangat disarankan menggunakan editor teks misalnya Notepad .

Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi

menjadi :

Hypertext

Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu

naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk

mengikuti link ini maka web browser akan memindahkan tampil an pada bagian lain dari

naskah atau dokumen yang kita tuju. Hal terpenting dalam HTML adalah Hypertext. Karena

Hypertext berfungsi sebagai suatu penghubung anatara halaman web yang satu dengan halan

PENGERTIAN HTML

(HYPERTEXT MARKUP LANGUAGE)

KEGIATAN

PEMBELAJARAN II


SISWA

23

web lainnya. Link-link inilah yang menjadi ciri khas dan sekaligus membentuk world wide

web, yaitu jaringan halaman-halaman web yang saling terhubung satu sama lain.

Markup

Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu

intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan

ditampilkan pada World Wide Web.

Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan

kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format

suatu naskah atau dokumen.

Mengenal File HTML

File-file HTML merupakan dokumen text yang diformat menggunakan HTML,

maka untuk melakukan penulisan maupun editing dokumen HTML dapat menggunakan

berbagai macam editor, dalam hal ini menggunakan notepad.

2. Struktur Dasar Dokumen HTML

Struktur dasar dokumen HTML berisi elemen atau tag seperti pada gambar:

Gambar 2.a Struktur Dasar HTML

Keterangan:

<html></html> : mendefinisikan bahwa text yang berada diantara kedua tag

tersebut adalah file HTML.

<head></head> : mendefinisikan head dalam sebuah file HTML. Di dalam tag ini

kita bisa meletakkan tag-tag TITLE, BASE, LINK, SCRIPT, STYLE & META.

<title></title> : mendefinisikan judul yang hendak ditampilkan pada browser.

Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser

Anda (pada title bar).


SISWA

24

<body></body> : mendefinisikan text beserta formatnya yang hendak ditampilkan

sebagai isi halaman web.

Aturan penulisan HTML adalah sebagai berikut :

1. Memilki struktur minimal dari dokumen HTML.

<HTML>

<head>

<title>Judul Web Page</title>

</head>

<body>

Isi artikel anda di sini

</body>

</HTML>

2. Bentuk tulisan pada point 1 disebut TAG. Tag memiliki pembuka <TAG>, tetapi tidak semua

Tag mempunyai penutup </TAG>. Tag memberi instruksi interpreter kepada browser.

3. Di dalam Tag HTML terdapat atribut Tag, yang mana atribut tersebut berbeda-beda antar

tag yang satu dengan tag yang lainnya.

4. Penulisan Tag bersifat Non Case Sensitive, ini berarti bahwa penulisan tag huruf besar dan

atau huruf kecil akan dianggap sama. Sebagai contoh <HTML> akan sama dengan <html>

atau <HtmL>.

5. Setelah tanda "<" harus langsung diikuti oleh nama Tag dan ditutup tanda ">", tidak boleh

ada spasi, angka, tanda baca dan nama Tag tidak dapat dibuat sendiri dan harus mengikuti

standar W3C, yaitu sebuah lembaga atau organisasi internasional yang mengatur

standarisasi web ( http://www.w3c.org).

6. Dalam dokumen HMTL diperlukan tag <HEAD></HEAD>, dalam tag ini diletakkan judul

web page dengan menggunakan tag <TITLE>judul Web</TITLE>, sedangkan di dalam tag

<BODY></BODY> berisikan isi dari web page kita. Untuk ekstensi dari file HTML perlu

ditambahkan .html atau .htm dibelakang nama filenya. Misalnya Uji Coba.html

http://www.w3c.org/


SISWA

25

7. Penulisan tag-tag HTML tidak akan terpengaruh oleh perintah langsung keyboard seperti

penekanan tombol enter atau spasi, sehingga diperbolehkan menyusun tag-tag HTML

secara countinue horizontal seperti berikut ini :

<HTML><HEAD><TITLE>Judul</TITLE></HEAD>..... dan seterusnya.

Atribut di dalam TAG.

• Tag <BODY> memiliki atribut : <BODY bgcolor=#......"background="....."

Dalam HTML nilai warna yang dapat diberikan pada atribut bgcolor adalah menggunakan

aturan komposisi RGB ( Red-Green-Blue) dengan angka hexadecimal maksimal adalah FF

(setara dengan 255 decimal) tiap komposisinya. Sebagai contoh bila diinginkan untuk

memberikan warna merah (Red) maka nilainya "#FF0000", warna hijau nilainya adalah

"#00FF00" dll. Adapun untuk nilai atribut background adalah nama file gambar lengkap dengan

lokasi folder dan ekstensi filenya. Format gambar yang didukung oleh HTML antara lain JPEG,

PNG dan GIF

• HEADING.

Digunakan untuk menampilkan format huruf yang besar dan dicetak tebal, biasanya digunakan

untuk judul atau topik utama dari sebuah paragraf, ukurannya dari terbesar <H1> sampai

terkecil <H6>, sedangkan untuk mengatur posisi heading digunakan atribut "align". Contoh <H1

align="..."> ditutup dengan </H1> yang nilai atributnya dapat diisi nilai LEFT untuk rata kiri,

RIGHT untuk rata kanan dan CENTER untuk rata tengah.

• PARAGRAF

Untuk memformat paragraf agar dapat rata kiri, rata kanan, rata tengah dan justify digunakan

tag pembuka <P align="..."> dan ditutup dengan </p>, adapun isi dari atribut "align" adalah

LEFT,RIGHT,CENTER dan JUSTIFY. Antara paragraf dalam HTML akan dibatasi secara otomatis

oleh sebuah jeda baris.

• BREAKING NOW

Tag <BR> ini digunakan untuk berpindah ke baris baru dalam isi dokumen. Ini adalah salah satu

tag HTML yang tidak memiliki tag penutup


SISWA

26

• HORIZONTAL RULER

Tag yang digunakan untuk membuat garis horizontal adalah <HR>, adapun atribut yang dimiliki

"align" untuk perataan, "size" untuk mengatur ketebalan garisnya dalam pixel (px) dan "width"

untuk mengatur lebar garisnya (dalam pixel atau persen). Penggunaan satuan persen (%)

memiliki arti bahwa ukuran garis horizontal akan diambil persentase terhadap WIDTH dari

tampilan jendelanya. Tag <HR> juga tidak memiliki tag penutup.

• PREFORMAT

Fasilitas ini tampilan akan diformat sama persis dengan isi yang ada di dalam Tag

<PRE>isi</PRE>. Di dalam tag <PRE> tombol enter untuk ganti baris atau spasi untuk jeda

dapat digunakan.

• BOLD, ITALIC, UNDER LINE, SUBSCRIPT, SUPERSCRIPT dan STRIPE

Cara memberikan efek huruf dalam dokumen HTML adalah sebagai berikut :

- Untuk huruf tebal (bold).............. <b>cetak tebal</b>

- Untuk huruf miring (italic) ............. <i>cetak miring</i>

- Untuk huruf dengan garis bawah (underline) ......... <u>garis bawah</u>

- Untuk huruf sebagai subscript .......... <sub>cetak subscript</sub>

- Untuk huruf sebagai superscript ......... <sup>cetak superscript</sup>

- Untuk huruf yang dicoret (strike) ............<s>cetak strike</s>

• LIST

Dalam dokumen HTML dapat menampilkan datar list seperti bullet & Numbering pada aplikasi

program Microsoft Word. Ada dua macam list, yaitu UnorderList ( mirip bullets ) dan

OrderedList ( Mirip Numbering )

Pada Unorderlist digunakan tag <UL> sebagai pembuka dan tag </UL> sebagai tag penutup.

Untuk item-item list yang ada di dalamnya digunakan tag <LI> untuk mengawalinya.

Unorderedlist mempunyai atribut "type" yaitu bentuk dari bulletnya. Ada beberapa jenis type


SISWA

27

yaitu DISC (default) untuk lingkaran tidak berlubang, CIRCLE untuk bentuk lingkaran

berlubang, SQUARE untuk kotak. Orderedlist juga memiliki atribut tipe untuk menentukan tipe

penomorannya, tipe tersebut adalah

1 untuk penomoran 1,2,3,….

A untuk penomoran A,B,C,….

I untuk penomoran I,II,III,IV …

a untuk penomoran a,b,c …

i untuk penomoran i,ii,iii, …

Bila kita tidak mendifinasikan tipenya, maka secara default Ordered List akan memberikan

penomoran angka ( 1,2,3 … )

• KOMENTAR DALAM HTML

Komentar dalam tag HTML menggunakan tanda <!— sebagai pembuka dan tanda -- >

sebagai penutup. Komentar tidak akan diinterpreter oleh we browser, hanya menjadi

keterangan saja.

Untuk membuat kode HTML kita bisa menggunakan editor notepad dan

menyimpannya dengan berekstensi .htm atau .html. Namun, sekarang sudah banyak

program publikasi web khusus, diantaranya Microsoft Frontpage, Lotus Pastsite,

Macromedia dreamweaver dan ini banyak digunakan oleh para desainer web. Program

ini menyediakan berbagai fitur untuk membantu Anda mendesain serta membuat

halaman-halaman web multimedia tanpa harus mengetahui pemograman HTML. (akan

dibahas pada bab selanjutnya)

C. Rangkuman

HTML (HyperText Mark up Language) merupakan suatu bahasa yang menggunakan

tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser

agar halaman tersebut dapat ditampilkan secara benar. Tidak diperlukan suatu program editor

khusus untuk menggunakan kode perintah-perintah HTML, namun kita bisa menggunakan

editor notepad dan menyimpannya dengan berekstensi .htm atau .html. Namun, sekarang sudah


SISWA

28

banyak program publikasi web khusus, diantaranya Microsoft Frontpage, Lotus Pastsite,

Macromedia dreamweaver dan ini banyak digunakan oleh para desainer web.

D. Tes Formatif

Diskusikan dengan teman sebangkumu, kemudian tulis jawaban di kertas.

1. Uraikan pengertian HTML menurut pendapat Anda?

2. Apa saja File-file yang ada dalam HTML?

3. Gambarlah Struktur Dasar HTML secara sederhna!

4. Sebutkan kelebihan HTML dibandingkan dengan dokumen yang lain!

5. Bagaiman cara memberikan efek huruf pada dokumen HTML supaya terlihat menarik?


SISWA

29


Setelah menyelesaikan kegiatan belajar ini siswa dapat:

1) Memahamai halaman frontpage

2) Membuat website dengan microssoft frontpage

3) Mengopersikan website dengan microsoft frontpage

B. Uraian materi

Microsoft FrontPage (atau Microsoft Office FrontPage) merupakan sebuah program

aplikasi editor HTML yang berbasis WYSIWYG dan juga bertindak sebagai alat bantu

administrasi situs web yang dikembangkan oleh Microsoft untuk jajaran sistem operasi

Windows. Aplikasi ini merupakan bagian dari Microsoft Office dari tahun 1997 hingga 2003.

Salah satu fitur yang terkenal dari FrontPage adalah dukungannya terhadap template Web

yang otomatis yang terintegrasi. Perbedaan utama antara template Web dengan template HTML

yang dibuat oleh produk lainnya adalah bahwa template yang dibuat oleh FrontPage mencakup

sistem navigasi otomatis yang mampu menciptakan tombol-tombol yang dianimasikan untuk

beberapa halaman yang telah ditambahkan oleh pengguna.

1. Pengenalan halaman frontpage

Pastikan dalam komputer telah terinstall program frontpage. Klik start dan cari program

frontpage.

MEMBUAT WEBSITE DENGAN

MICROSOFT FRONTPAGE

KEGIATAN

PEMBELAJARAN

III


SISWA

30

KETERANGAN:

A. Membuka halaman baru

B. Membuka file

C. Menyimpan file

D. Jenis-jenis huruf

E. Melihat hasil web di internet explorer

F. Ukuran huruf

G. Membuat huruf tebal

H. Membuat huruf miring

I. Membuat huruf bergaris bawah

J. Paragraf lurus arah kiri

K. Paragraf tengah

L. Paragraf lurus kanan

M. Paragraf lurus kanan kiri

N. Menyisipkan link/halaman website

a) Menu tambahan lain adalah :

Cara mengkopi file, kalimat, gambar dan lain-lain : tekan Ctrl + huruf “C”(copy) lalu

tekan Ctrl + huruf “ V” (paste) untuk melihat hasilnya Cara menyimpan file : tekan Ctrl +


SISWA

31

S Cara membuka file : tekan Ctrl + O Cara memindahkan file, gambar, kalimat dan lain-

lain : Klik kanan cut, lalu arahkan kursor pada tempat yang akan dipindahkan tekan

paste Cara membatalkan hal yang telah kita lakukan. Misal kita tidak jadi

menghapus tulisan maka tekan saja Ctrl + huruf “Z” maka pekerjaan kita akan kembali

ke sebelumnya.

b) Untuk membuat tulisan pada kolom hasil caranya :

Blok tulisan dengan cara arahkan mouse ke arah tulisan lalu klik kiri tahan sampai

tulisan berwarna hitam, lepaskan lalu klik pada menu diatas. Kalau ingin memberi

efek tebal pada tulisan berarti klik gambar G. Dan lakukan hal yang sama untuk memberi

efek pada tulisan-tulisan lain Cara lain memblok tulisan yaitu arahkan mouse ke

tulisan yang akan diblok lalu tekan shift bersamaan dengan t panah ke kiri, kanan, atas

atau bawah.

Membuat table dan menyisipkan gambar:

Caranya : Klik menu table - insert – table

Misal pada baris 3 dan kolom 3 maka hasilnya


SISWA

32

Memasukkan gambar pada table

Insert === Picture === From file ( jika letak gambar berupa file)

Jika sudah menemukan file yang akan kita sisipkan maka klik Ok. Hasilnya

seperti diatas saya menyisipkan gambar. Disini bisa menyisipkan gambar

dalam format file JPEG, JPG maupun GIF

Membuat hyperlink

Langkah-langkahnya :

1) Blok tulisan yang akan disisipin link website

2) Klik kanan mouse

3) Klik menu hyperlink

4) Tentukan alamat linknya

5) Tentukan target framenya

6) Klik Ok


SISWA

33


SISWA

34

Menghubungkan halaman web satu dengan halaman web lain :

1) Buatlah beberapa halaman dalam website dan simpan dalam file

2) Blok tulisan misal : halaman 1 lalu klik kanan mouse

3) Klik hyperlink


SISWA

35

4) Masukkan halaman website sesuai dengan file yang telah disimpan

5) Klik Ok

6) Lakukan hal yang sama untuk file-file yang lain

7) Untuk mengetes halaman website apakah sudah terhubung ataukah

belum silahkan klik preview pada bagian bawah halaman frontpage

Selesai, tinggal menyesuaikan saja untuk yang lainnya. Sebelumnya

simpan dulu nama filenya dalam folder yang sama, baru dihubungkan

halaman yang satu dengan yang lain sesuai dengan nama file masing-masing.

Membuat judul/title website


SISWA

36

Berikut hasilnya:

Membuat meta keyword

Page properties === custom === add


SISWA

37

Catatan: untuk memasukkan keyword pastikan kata-katanya ada pada isi website agar

lebih mudah masuk ke search engine. Jangan memasukkan keyword (kata kunci)

Yang tidak ada hubungannya dengan isi website.

Membuat meta description:

Page properties === custom === add

Mewarnai background website


SISWA

38

Melihat hasil website di IE

Tambahan: Membuat website berada di tengah browser


SISWA

39

Perintah-perintah dasar HTML

Perintah HTML mempunyai struktur umum, yaitu didahului dengan <HTML>

dan ditutup dengan </HTML>. Judul diawali dengan <HEAD><TITLE> dan

ditutup dengan </TITLE></HEAD>. Isi website diapit dengan <BODY> dan


SISWA

40

</BODY>. Perintah HTML dapat kita ketikkan dengan huruf kecil atau

capital atau campuran antara keduanya. Berikut beberapa perintah HTML :

1. Memperbesar teks :

a) <H1>teks</H1> semakin besar angkanya semakin kecil teksnya== H1 lebih

besar dari H3

b) <basefont size=6>teks</font> semakin besar angkanya semakin besar teksnya

c) <font size=”6”>teks</font> semakin besar angkanya semakin besar teksnya

d) <big>teks</big> teks berukuran besar

e) <small>teks</small> teks berukuran kecil

2. Huruf Superscript : <sup>teks</sup> contoh : Jan 12<sup>th</sup> hasilnya

Jan 12th

3. Huruf Subscript : <sub>teks</sub> contoh : H<sub>2</sub>O

hasilnya H2O

4. Huruf cetak tebal : <b>teks</b> contoh : Huruf <b>tebal</b>

hasilnya Huruf tebal

5. Huruf cetak miring : <i>teks</i> contoh : Huruf <i>miring</i> hasilnya

Huruf miring

6. Huruf bergaris bawah : <u>teks</u> contoh Huruf <u>bergaris bawah</u>

hasilnya Huruf bergaris bawah

7. Teks rata kanan :

a) <h1 align=”right”>teks</h1>

b) <p align=”right”>teks</p>

8. Teks rata kiri :

a) <h3 align=”left”>teks</h3> h3 untuk menentukan ukuran teks

b) <p align=”left”>teks</p>

9. Teks rata tengah :

a) <center>teks</center>

b) <h5 align=”center”>teks</center> h5 untuk menentukan ukuran teks

c) <p align=”center”>teks</p>

10. Teks rata kiri kanan :

a) <h1 align=”justify”>teks</h1>

b) <p align=”justify”>teks</p>

11. Paragraf : <p>teks</P>

12. Baris baru : <br> Satu <br> berarti satu baris


SISWA

41

Di atas adalah perintah-perintah dasar HTML namun dengan menggunakan front page

tidak perlu pusing dengan bahasa HTML, tapi jika ingin mengetahuinya silahkan klik aja

menu HTML pada halaman frontpage.

Berikut contohnya:

Selanjutnya setelah halaman web telah selesai di buat, kemudian agar

halaman web dapat dilihat oleh seluruh orang di dunia hendaklah mempersiapkan 2

komponen yang harus yaitu domain dan web hosting. Domain adalah nama dan

alamat dari sebuah website contohnya namadomain.com dan Web Hosting adalah

tempat meletakkan file-file website pada server yang terhubung dengan jaringan

internet. Saat ini banyak sekali perusahaan di indonesia maupun di luar negeri

yang bergerak di bidang jasa pendaftaran domain dan penyediaan paket web

hosting.


SISWA

42

Dengan tingkat persaingan yang ketat saat ini, sampai-sampai ada beberapa

perusahaan domain dan hosting yang memberikan layanannyasecara gratis dan

dapat memanfaat hal tersebut untuk membuat website dengan biaya hampir nol, sebab

biaya normal untuk pembelian domain kirakira Rp.80.000,- per tahun dan untuk web

hosting kira-kira Rp. 360.000,-pertahun untuk paket pemula. Bila membuat website

untuk kepentingan personal atau bisnis kecil, bisa mengambil domain dan web hosting

gratis dan bila membuat website untuk kepentingan bisnis besar, tentunya

sebaiknya menggunakan domain dan web hosting yang berbayar, hal ini

dikarenakan dengan kebutuhan spesifikasi web hosting yang diberikan untuk

menunjang kebutuhan website. Dan setelah mempersiapkan domain dan hosting,

langkah selanjutnya baru membuat website.

Website tersebut dapat buat dengan menggunakan website builder yang

disediakan oleh perusahaan tempat membeli web hosting atau bisa juga menggunakan

fasilitas fantastico pada cpanel web hosting untuk menginstall software seperti blog

wordpress, CMS, forum phpbb dan lainlainnya, dan selain itu juga bisa membuat

website sendiri baik melalui template atau membuatnya dari dasar dengan

menggunakan software seperti FrontPage, Dreamweaver atau software lainnya.

Apabila Domain dan webhosting telah dimiliki, selanjutnya halaman web yang

telah di buat di frontpage langsung dapat kita publish/upload ke web hosting

dengan langkah - langkah seperti dibawah ini :

1) Klik File>open .... seperti di gambar. Pilih website yang telah dibuat

menggunakan frontpage.


SISWA

43

2) Website yang telah dibuat akan tampil dan terlihat nama file serta folder yang

menjadi bagian dari website. Dalam gambar ditampilkan contoh sederhana untuk

ilustrasi saja.

3) Klik File>Publish site....... seperti di gambar.

4) Di windows remote Web Properties klik tombol FTP. Di kotak Remote

website location isi dengan alamat FTP seperti di gambar (ganti

website-.com dengan nama domain). Di kotak FTP Directory isi dengan


SISWA

44

/ public_html. Pastikan tidak salah ketik dan klik OK setelah semuanya

benar.

5) Isilah Username dan Password ketika ditanyakan Alamat FTP domain ,

username dan password dapat ditemukan di email yang dikirimkan ke

pada saat account web hosting diaktivasi

6) Setelah berhasil login, kotak kiri adalah Local (file di komputer) dan kotak

kanan adalah Remote (folder di web hosting). Pilih file atau folder yang

akan di-upload di kotak Local dan klik tombol arah kanan di tengah untuk

copy ke server. Proses upload akan selesai setelah meng-copy semua file

website dari Local ke Remote.


SISWA

45

7) Agar website dapat tampil pada saat pengunjung akses ke

www.website-.com, pastikan semua file dan folder website di copy ke

/public_html dan file/halaman utama diberi nama index.html atau

index.htm.

C. Ringkasan Materi

Microsoft FrontPage (atau Microsoft Office FrontPage) merupakan sebuah program

aplikasi editor HTML yang berbasis WYSIWYG. Salah satu fitur yang terkenal dari FrontPage

adalah dukungannya terhadap template Web yang otomatis yang terintegrasi. Pengenalan

halaman frontpage membantu kita memahami hal yang perlu disiapkan dalam membuat web.

D. Tugas

1. Siapkan program Microsoft Frontpage di komputer.

2. Buatlah website dengan menggunakan microsoft frontpage!

3. Setelah selesai membuat, laporkan tugas tersebut kepada Guru!

E. Tes Formatif

1. Apakah yang dimaksud dengan Microsoft Frontpage?

Jawab:

.....................................................................................................................................................................................

.....................................................................................................................................................................................

...........................................................................................................................................................................


SISWA

46

2. Sebutkan langkah-langkah dalam membuat hyperlink!

Jawab:

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

..............................................................................................................................................................................

3. Fasilitas apa saja yang diberikan Microsoft Frontpage dalam membuat web?

Jawab:

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

..........................................................................................................................................................................

4. Bagaiman cara merubah baground halaman web?

Jawab:

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

...........................................................................................................................................................................

5. Sebutkan beberapa macam perangkat lunak yang kamu ketahui untuk membuat web

selain microsoft frontpage!

Jawab:

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.....................................................................................................................................................................................

.........................................................................................................................................................................


SISWA

47

HTML Bahasa yang menggunakan tanda-tanda tertentu yang harus ditafsirkan oleh browser.

Internet Interconnected network adalah kumpulan komputer yang saling berhubungan dalam bentuk jaringan komputer dan melalui saluran komunikasi.

www Layanan internet yang sering digunakan untuk menerima informasi dalam berbagai format.

IE Internet Explorer merupakan salah satu contoh web browser.

office automation / OA

Otomatisasi perkantoran


SISWA

48

membuat website, http://www.ilmukomputer.com

Simarmata, Janner. 2005. Pengenalan Teknologi Komputer dan Informasi. CV ANDI OFFSET:

Yogyakarta.

N, Fairus H. 2007. Terampil Menggunakan Internet. Ganeca Exact: Bekasi.

http://tugastik6.blogspot.com/2012/03/icon-icon-internet-explorer.html

http://iceinspirasi.blogspot.com/2014/10/modul-otomatisasi-perkantoran.html

http://id.wikipedia.org/wiki/Microsoft_FrontPage http://coretanasal.blogspot.com/2008/08/teori-dasar-html.html

http://www.ilmukomputer.com/

http://tugastik6.blogspot.com/2012/03/icon-icon-internet-explorer.html

http://iceinspirasi.blogspot.com/2014/10/modul-otomatisasi-perkantoran.html

http://id.wikipedia.org/wiki/Microsoft_FrontPage

http://coretanasal.blogspot.com/2008/08/teori-dasar-html.html

Documents

OTOMATISASI · OTOMATISASI PERKANTORAN MODUL SIS WA 3 KATA PENGANTAR Puji syukur kehadirat Allah Swt atas segala rahmat, taufiq dan hidayahnya sehingga kami masih diberi kesempatan