sim bab 2 praktek

62
BAB II Proyek Web/HTML Menggunakan Microsoft FrontPage Nama Kelompok: Ulfa Pratiwi P. (021111133) Novi Wijayanti (021111157) Dosen: Dr.Wonny A.R,MM.,SE Fakultas Ekonomi Universitas Pakuan

Upload: rainbi

Post on 23-Jun-2015

165 views

Category:

Education


1 download

DESCRIPTION

praktek

TRANSCRIPT

Page 1: Sim bab 2 praktek

BAB II

Proyek Web/HTML Menggunakan Microsoft FrontPage

Nama Kelompok:Ulfa Pratiwi P. (021111133)Novi Wijayanti (021111157)

Dosen: Dr.Wonny A.R,MM.,SE

Fakultas Ekonomi Universitas Pakuan

user
Page 2: Sim bab 2 praktek

Tujuan Pembelajaran

- Memahami kelebihan dan kelemahan merancang halaman Web dengan menggunakan FrontPage.

- Mampu membuat sebuah halaman Web dasar.

- Mengetahui bagaimana cara mengontrol format kata-kata dan gambar-gambar pada sebuah halaman web.

user
Page 3: Sim bab 2 praktek

- Mengetahui bagaimana cara menciptakan tabel-tabel dan daftar-daftar pada sebuah halamn Web.

- Mengetahui bagaimana cara menciptakan link ke halaman Web lain, e-mail, dan bagian-bagian halaman Web yang lain.

user
Page 4: Sim bab 2 praktek

PENDAHULUAN

FrontPage merupakan suatu aplikasi peranti lunak yang mudah digunakan untuk membuat halaman Web yang sederhana. Penggunaan editor teks untuk membuat sebuah halaman Web memerlukan waktu yang lebih banyak dan sedikit lebih sulit, namun memberikan anda kontrol yanh lebih besar terhadap desain halaman Web tersebut.

Suatu contoh tahap demi tahap menggambarkan teknik-teknik dan konsep-

user
Page 5: Sim bab 2 praktek

Konsep yang akan dibutuhkan untuk proyek ini. Dengan mempelajari contoh ini.

user
Page 6: Sim bab 2 praktek

MEMBUAT DOKUMEN FRONTPAGE

Instruksi-instruksi ini secara umum akan mengarahkan Anda kepada perintah dan subperintah yang akan mendapatkan efek yang diinginkan. Microsoft FontPage memiliki banyak ikon yang dapat melakukan operasi yang sama dengan satu klik mouse saja. Jika Anda memindahkan kursor ke atas suatu ikon dan menunggu sebentar,sebuah kotak penjelasan akan muncul dan memberitahu apa yang akan terjadi jika suatu ikon di-klik.

user
Page 7: Sim bab 2 praktek

Mulailah dengan membuka program Microsoft FrontPage. Klik tombol “Start” di bagian sebelah kiri layar. Kemudian pilih “All Programs”

user
Page 8: Sim bab 2 praktek

dan klik dua kali program “Microsoft FrontPage”.

ini

Page 9: Sim bab 2 praktek

Layar Awal Front Page

Page 10: Sim bab 2 praktek

Gantilah judul proyek dengan memilih perintah “File” diikuti dengan subperintah “Save As”

Page 11: Sim bab 2 praktek

bisa dilihat contoh ini menyimpan file untuk halaman Web pada desktop komputer dan menggunakan nama asli file “index.htm”

Page 12: Sim bab 2 praktek

Ketik “University Pizza” pada halaman tersebut. Tekan tombol “Enter” pada papan ketik untuk membuat kalimat lain di halaman web. Tandailah kata-kata “University Pizza” dan kemudian pilihlah poin 18 untuk ukuran font dari menu drop-down.

Page 13: Sim bab 2 praktek
Page 14: Sim bab 2 praktek

Selanjutnya pilihlah perintah “format” diikuti dengan subperintah “paragraph” dan pilihlah pilihan “center”

Page 15: Sim bab 2 praktek
Page 16: Sim bab 2 praktek

DAFTAR BERTANDA

Selanjutnya, buatlah daftar lokasi. Ketik kata “Locations”. Perlu dicatat bahwa jika “Locations” muncul di tengah-tengah halaman dengan huruf-huruf besar maka itu berarti Anda tidak memindahkan kursor ke bawah membuat garis baru setelah Anda mengetikkan “University Pizza” tadi. Ini mudah untuk diperbaiki, tandailah “Locations” dan kemudian pilihlah perintah “Format” diikuti dengan subperintah”Paragraph” dan “Alignment” dari pilihan menu drop-down. Buatlah agar paragraph terjajar ke kiri (“Left”).

user
Page 17: Sim bab 2 praktek
Page 18: Sim bab 2 praktek

Klik ikon daftar bertanda seperti yang ditampilkan Figur di bawah ini.

user
Page 19: Sim bab 2 praktek

Kemudian masukan tiga frase “Commuter Parking Lot,” “Recreation Center,” dan “101 North Main Street,” dan tekan kunci “Enter” setelah Anda mengetik tiap frase. Anda akan melihat bahwa sebuah bulatan muncul setelah Anda masukkan “101 North Main Street.” Hanya tekan kunci “Enter” lagi dan bulatan ini akan mengilang, dan Anda akan dapat mengetikkan kembali informasi untuk halaman Web tersebut.

Page 20: Sim bab 2 praktek
Page 21: Sim bab 2 praktek

TABEL

Mengetahui bagaimana cara membuat tabel pada halaman Web merupakan sebuh keahlian yang penting. Tabel memungkinkan Anda untuk mengontrol format halaman di sisi lebarnya. Biasanya, teks hanya akan terketik begitu saja di halaman Web. Tabel merupakan sesuatu yang sederhana untuk dimasukkan, dan memungkinakan Anda untuk mengontrol tampilan halaman Web tersebut.

user
Page 22: Sim bab 2 praktek

Jaga agar kursor Anda terletak di bawah daftar lokasi. Pilihlah perintah “Table,” subperintah “Insert,” dan kemudian pilihlah pilihan “Table,” seperti yang ditunjukkan gambar berikut. Pada layar yang tampil, pilihlah tabel dengan empat kolom dan empat baris. Anda dapat melihat sel-sel tabel. Nanti Anda akan mempelajari bagaimana cara menyembunyikan garis-garis sel.

user
Page 23: Sim bab 2 praktek
Page 24: Sim bab 2 praktek

Tandailah judul-judul kolom (“Topping,” “Small,” “Medium,” “Large”), satu demi satu atau seluruh barisan. Lalu pilihlah perintah “Format” diikuti dengan subperintah “Font.” Dari jendela yang muncul pada pilihan “Font Style,” pilihlah “Italic.”

user
Page 25: Sim bab 2 praktek

Sekarang pilihlah ulang semua sel di dalan tabel dan pindahkan nilai-nilai di dalam sel ke tengah. Ini dapat dilakukan (dengan meng-highlight semua sel) dengan cara memilih perintah “Format” diikuti dengan subperintah “Paragraph” dan kemudian memilih pilihan alignment “Center.”

Page 26: Sim bab 2 praktek
Page 27: Sim bab 2 praktek
Page 28: Sim bab 2 praktek

MENAMBAHKAN GAMBAR

Gambar dapat menjadi sebuah bentuk komunikasi yang memiliki kekuatan pada suatu halaman Web. Geserlah kursor dua baris di bawah tabel, lalu klik perintah “Insert” diikuti dengan subperintah “Picture.” Akhirnya pilihlah “Clip Art,” seperti yang ditunjukkan gambar berikut.

user
Page 29: Sim bab 2 praktek
Page 30: Sim bab 2 praktek

Ketika layar selanjutnya, ketiklah kata “pizza” dan pilihlah sebuah gambar untuk digunakan. Gambar-gambar ini memiliki menu drop-down yang memberi Anda kesempatan untuk memasukkan gambar ke dalam halaman Web. Setelah Anda memasukkan gambar tersebut, tekanlah kunci “Enter” dua kali untuk membuat halaman Web bergerak turun. Tergantung pada setting FrontPage yang sudah ada, Anda dapat menemukan kursor terletak di tengah setelah Anda memasukkan gambar ke dalam halaman Web. Untuk memindahkan kursos ke sebelah kiri, klik “Format” diikutidengan subperintah :Paragraph.” Pada “Alignment,” pilihlah “Left.”

user
Page 31: Sim bab 2 praktek
Page 32: Sim bab 2 praktek

Sekarang setelah Anda memasukkan gambar ke dalam halman Web, waktunya untuk menyimpan file Anda..

user
Page 33: Sim bab 2 praktek

Gambar yang Anda ambil dari clip art Microsoft berbentuk Windows Media Format (WMF), tapi Anda harus menyimpannya dalam bentuk yang lebih dikenal oleh halaman Web. Ketika Anda mengklik tombol “Picture Opitions,”

Page 34: Sim bab 2 praktek

pilihlah format file “GIF”. Kemudian klik “OK” untuk menyimpan file tersebut dengan nama file yang baru.Simpanlah file FrontPage Anda secara berkala. Kebanyakan siswa menyimpan file mereka setiap 10 menit. Ini di sebabkan karena jika suatu masalah komputer terjadi, misalnya listrik mati, hanya hasil kerja selama sepuluh menit yang akan hilang

Page 35: Sim bab 2 praktek
Page 36: Sim bab 2 praktek
Page 37: Sim bab 2 praktek

DAFTAR BERNOMOR

Sekarang harus menambahkan sebuah daftar bernomor ke dalam halaman Web.Tiga alasan telah diberikan untuk memesan pizza dari University Pizza. Pertama-tama harus memasukan kalimat “Why order from us?” pada halaman web tersebut. Kemudian tekan kunci “Enter” untuk mendapatkan baris baru.

Page 38: Sim bab 2 praktek
Page 39: Sim bab 2 praktek

Pilihlah ikon bernomor dan masukkan tiga alasan. Ingatlah bahwa setelah memasukkan alasan yang ketiga dan menekan kunci “Enter”, angka 4 akan muncul pada daftar. Tekanlah kunci “Enter” sekali lagi dan ini akan mengakhiri isian untuk daftar bernomor.

Page 40: Sim bab 2 praktek
Page 41: Sim bab 2 praktek

LINK HALAMAN WEB

bagian akhir dari ini adalah untuk menciptakan tiga jenis link : sebuah link untuk alamat e-mail, sebuah link untuk halaman Web yang lain, dan sebuah link untuk bagian lain halaman Web tersebut. Perangkat ini khususnya berguna unuk memberikan suatu cara bagi orang yang membaca halaman Web tersebut untuk mengirimkan e-mail kepada orang yang menciptakannya.

Page 42: Sim bab 2 praktek

Klik perintah “Insert” diikuti dengan subperintah “Hyperlink”.

Page 43: Sim bab 2 praktek

Amat sangat penting untuk memilih “E-mail Address” sebagai jenis hyperlink. Pada bagian “Text To Display”, masukkan kalimat “Contact Us” pada bagian “E-mail Address”, masukkan alamat e-mail Anda. Ketika mengetik, Frontpage secara otomatis memasukkan “malto:” ke awal alamat e-mail Anda. Bagian terakhir yang harus di isi adalah “subject”. Masukkan frase “Pizza Delevery”

Page 44: Sim bab 2 praktek
Page 45: Sim bab 2 praktek

Selanjutnya akan membuat sebuah link untuk halaman Web sekolah Anda. Sekali lagi, klik perintah “insert” diikuti dengan subperintah “Hyperlink”. Kali ini pastikan memilih kotak “Existing File or Web Page” di bawah kolom “Link to”. Pada bagian “Text to Display”, ketikan “Link to My School”. Pada bagian “Address”, ketikan http://WWW.PIZZAHUT.COM

Page 46: Sim bab 2 praktek
Page 47: Sim bab 2 praktek
Page 48: Sim bab 2 praktek

Sekarang tempatkan kursor di bagian atas halaman, klik mouse sekali untuk menempatkan kursor sebelum “U” di “University Pizza”. Sekarang pilihlah perintah “insert” diikuti dengan subperintah “Bookmark”. Sebuah jendela akan muncul menanyakan nama bagi pembatas buku (Bookmark). Masukkan “Beginning” sebagai namanya. Sebuah ikon bendera kecil akan tampil di depan “University Pizza”

Page 49: Sim bab 2 praktek
Page 50: Sim bab 2 praktek
Page 51: Sim bab 2 praktek

Hasilnya akan seperti ini

Page 52: Sim bab 2 praktek

Pindahkan kursor ke bagian bawah halaman Web. Pilihlah perintah “Insert” diikuti dengan subperintah “Hyperlink”. Ketika sebuah jendela muncul, pastikan memilih “Place in this Document” dari kolom “Link to”. Masukkan “Go to Top of Page” pada bagian yang berlabel “Text to display”. Pastikan mengklik “Beginning” sebagai pembatas buku untuk link tersebut. Setelah memilih tombol “Ok”, link anda ke atas halaman akan selesai

Page 53: Sim bab 2 praktek
Page 54: Sim bab 2 praktek

Hasilnya akan seperti ini

Page 55: Sim bab 2 praktek

MELIHAT HALAMAN WEB YANG TELAH DIKERJAKAN

Di bagian bawah layar FrontPage terdapat tiga pilihan: Normal, HTML, dan Priview. Klik “Priview” dan Anda akan mellihat bagaimana halaman Web akan ditampilkan pada browser.

Page 56: Sim bab 2 praktek
Page 57: Sim bab 2 praktek

Klik link “Contact Us”, sebuah jendela yang berinteraksi dengan program e-mail anda akan terbuka. Pada bagian “To”, Anda dapat melihat alamat e-mail Anda. Pada bagian subject, Anda akan melihat “Pizza Delivery”, jika tulisan-tulisan ini tidak muncul, maka kemungkinan komputer anda tidak mengizinkan untuk mengirimkan e-mail atau Anda belum membuat link dengan benar.

Page 58: Sim bab 2 praktek
Page 59: Sim bab 2 praktek

KELEBIHAN dan KEKURANGAN FRONTPAGE

Apa yang ditampakkan oleh halaman Web bukanlah apa yang digunakan oleh Browser Web tersebut untuk membuat halaman tersebut. Jika anda mengklik tab “HTML” atau “Split” di bagian bawah jendela FrontPage, akan tampil kode komputer yang diproses oleh browser Internet Anda. Periksalah kode yang dihasilkan untuk menghasilkan halaman Web tersebu dan cobalah untuk menemukan gambar dan link yang Anda tempatkan dihalaman Web tersebut.

Page 60: Sim bab 2 praktek

Kebanyakan orang merasa mudah menggunakan FrontPage untuk membuat halaman Web. Tetapi, harus membuat berbagai asumsi dan default untuk membuat sebuah halaman Web. Ini akan menghasilkan file komputer yang panjang sekadar untuk melakukan tugas yang sederhana. Keuntungan menggunakan FrontPage untuk membuat halaman Web adalah kemudahan penggunaannya. Kelemahannya adalah kode HTML (kode yang diproses oleh browser Internet) yang dihasilkan tidak efisien. Komputer dan peranti lunak semakin murah, sementara biaya gaji dan upah semakin tinggi. Oleh karena itu, kebanyakan organisasi mengandalkan peranti lunak seperti FrontPage untuk menghemat biaya karyawan.

Page 61: Sim bab 2 praktek

DAFTAR PUSTAKA

Raymond McLeod, Jr dan George P. Schell. Sistem Informasi Manajemen, edisi 10. Jakarta : Salemba Empat., 2008.

user
Page 62: Sim bab 2 praktek