OTOMATISASI PERKANTORAN

Transkripsi

1 JILID 2 IRFA RIDH A K.N. OTOMATISASI PERKANTORAN NAMA:... KELAS :...

2 Mengoperasikan Website UNTUK SMK KELAS X SEMESTER II OTOMATISASI PERKANTORAN 2

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 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 3

4 DAFTAR ISI 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 Kegiatan Pembelajaran I : Akses Internet A. Tujuan Pembelajaran B. Uraian Materi C. Ringkasan Materi Asah Kemampuan Kegiatan Pembelajaran II: Mengidentifikasi Pengertian HTML A. Tujuan Pembelajaran B. Uraian Materi C. Ringkasan Materi

5 D. Tes Formatif Kegiatan Pembelajaran III: Membuat website dengan icrosoft Frontpage A. Tujuan Pembelajaran B. Uraian Materi C. Ringkasan Materi D. Tugas E. Tes Formatif III. Penutup Glosarium Daftar Pustaka

6 PETA KEDUDUKAN Presentasi Publishing Memproduksi Dokumen Website 6

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

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 8

9 D. Tujuan Akhir Setelah mempelajari modul ini peserta didik diharapkan: Kompetensi Menguraikan cara mengoperasikan webside Tujuan Akhir 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? 9

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 AKSES INTERNET KEGIATAN PEMBELAJARAN I 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. 10

11 Negara Nama Domain Keterangan donesia id kelola di negara Indonesia alaysia my kelola di negara Malaysia hina cn kelola di negara China merika Serikat us kelola di negara AS com omain untuk bisnis net perator internet obal dunia org ganisasi masyarakat edu ndidikan gov ganisasi Pemerintah mil ganisasi 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 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 Contohnya: dan lain-lain. Umumnya perusahaan 11

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 ( ), 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) 12

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 Koneksi ini menyediakan layanan web dan 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). 13

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

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). 15

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 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 dan masih banyak yang lain. Situs Pencarian Informasi Informasi aktual di Indonesia, misalnya dan informasi perusahaan misalnya dan (gambar 1.b) 16

17 Pencarian Data Tersedia situs pencari kualifikasi dunia, misalnya dan (gambar 1.c) 17

18 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 dan masih banyak yang lain. ASAH KEMAMPUAN A. Asah Teori 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 c. WWW b. HTTP d. URL 2. Dalam penulisan sebuah situs yang akan dikunjungi selalu diawali... a. HTML c. WWW b. HTTP d. URL 3. Teks yang berfungsi untuk mengakses file atau halaman web yang lain disebut... a. Hyperlink b. Protocol c. ISP 18

19 d. URL 4. Tombol yang digunakan untuk menghentikan proses loading sebuah halaman web adalah... a. Back c. Stop b. Forward d. Home 5. Tombol yang digunakan untuk melihat web yang telah dikunjungi beberapa saat terakhir adalah... a. History c. Favorite b. Forward 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. c. Chatting b. Mailing list 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 19

20 d. teks II. Jawablah pertanyaan berikut dengan singkat dan jelas. 1. Isilah domain dan keterangan berikut ini. omain com edu gov ganisasi pemerintah militer id us jp 2. Perhatikan gambar berikut, kemudian isilah keterangan di bawah ini berdasarkan gambar. terangan nyedia internet ganisasi masyarakat Isilah titik-titik di bawah ini! Keterangan a... f... b... g... c... h... d... i... e... j... 20

21 B. Asah Praktik 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 Lakukan cara mengakhiri internet dengan cara lain selain nomor Jika merasa belum lancar berlatihlah dengan lancar dalam membuka dan mengakhiri internet. 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. 21

22 PENGERTIAN HTML (HYPERTEXT MARKUP LANGUAGE) KEGIATAN PEMBELAJARAN II A. Tujuan Pembelajaran 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 perintahperintah 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. menjadi : Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi 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 22

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). 23

24 <body></body> sebagai isi halaman web. : mendefinisikan text beserta formatnya yang hendak ditampilkan 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 ( 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 24

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 25

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... _{cetak subscript} - Untuk huruf sebagai superscript... ^{cetak superscript} - 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 26

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 27

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? 28

29 MEMBUAT WEBSITE DENGAN MICROSOFT FRONTPAGE KEGIATAN PEMBELAJARAN III A. Tujuan Pembelajaran 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 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. 29

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 + 30

31 S Cara membuka file : tekan Ctrl + O Cara memindahkan file, gambar, kalimat dan lainlain : 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 31

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 32

33 33

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 34

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 35

36 Berikut hasilnya: Membuat meta keyword Page properties === custom === add 36

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 37

38 Melihat hasil website di IE Tambahan: Membuat website berada di tengah browser 38

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 39

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 : ^teks contoh : Jan 12^th hasilnya Jan 12th 3. Huruf Subscript : _teks contoh : H₂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 40

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

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 ,- per tahun dan untuk web hosting kira-kira Rp ,-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. 42

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 43

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

45 7) Agar website dapat tampil pada saat pengunjung akses ke 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:

46 2. Sebutkan langkah-langkah dalam membuat hyperlink! Jawab: Fasilitas apa saja yang diberikan Microsoft Frontpage dalam membuat web? Jawab: Bagaiman cara merubah baground halaman web? Jawab: Sebutkan beberapa macam perangkat lunak yang kamu ketahui untuk membuat web selain microsoft frontpage! Jawab:

47 HTML Internet www IE office automat ion / OA Bahasa yang menggunakan tanda-tanda tertentu yang harus ditafsirkan oleh browser. Interconnected network adalah kumpulan komputer yang saling berhubungan dalam bentuk jaringan komputer dan melalui saluran komunikasi. Layanan internet yang sering digunakan untuk menerima informasi dalam berbagai format. Internet Explorer merupakan salah satu contoh web browser. Otomatisasi perkantoran 47

48 membuat website, Simarmata, Janner Pengenalan Teknologi Komputer dan Informasi. CV ANDI OFFSET: Yogyakarta. N, Fairus H Terampil Menggunakan Internet. Ganeca Exact: Bekasi