proyek 2 sistem informasi manajemen
TRANSCRIPT
![Page 1: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/1.jpg)
Proyek Web/HTML Menggunakan Microsoft Front Page
Bab II
Nama Kelompok : Muhammad Weli M. (0211 11 050)
Yulius Purwanto (0211 11 051)
Mochamad Febriandi (0211 11 061 )
Fakultas EkonomiUniversitas Pakuan
![Page 2: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/2.jpg)
TUJUAN BELAJAR
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 saat sebuah halaman Web.
Mengetahui bagaimana cara menciptakan tabel-tabel dan daftar-daftar pada sebuah halaman Web.
![Page 3: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/3.jpg)
Mengetahui bagaimana cara menciptakan link ke halaman Web lain, e-mail, dan bagian-bagian halaman Web yang ada.
![Page 4: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/4.jpg)
Microsoft FrontPage
FrontPage merupakan suatu aplikasi lunak yang mudah digunakan dan dapat digunakan untuk membuat halaman Web yang sederhana. Penggunaan editor test untuk membuat sebuah halaman Web memerlukan waktu yang lebih banyak dan sedikit sulit, namun memberikan kontrol yang lebih besar terhadap desain halaman Web tersebut.
![Page 5: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/5.jpg)
Contoh Halaman WebContoh ini membuat suatu
halaman Web dasar yang menampilkan infromasi kepada pelanggan pontensial. Gambar ini memberikan informasi mengenai University Pizza, lokasinya, dan jenis-jenis pizza yang ditawarkan. Beberapa fitur ini digunakan untuk mengorganisasi informasi di halaman Web tersebut untuk membuatnya lebih efektif: daftar, sebuah gambar, sebuah tabel, dan sederet link.
![Page 6: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/6.jpg)
![Page 7: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/7.jpg)
Contoh halaman Web diatas memiliki tiga link:
1. Contact Usyaitu sebuah link untuk mengirim e-mail.
2. Link to my schoolyaitu sebuah hyperlink untuk halaman Web sekolah.
3. Go to Top of PageMemberikan navigasi untuk halaman Web tersebut.
![Page 8: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/8.jpg)
Halaman Web yang panjang terkadang sebuah membutuhkan bantuan navigasi , sehingga para pengguna dapat melompat ke bagian halaman yang diminati dan melewati informasi-informasi yang tidak di inginkan.
![Page 9: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/9.jpg)
MEMBUAT DOKUMEN FRONTPAGE
Intruksi-intruksi ini secara umum akan mengarahkan kepada perintah dan subperintah yang akan mendapatkan efek yang diinginkan. Microsoft FrontPage memiliki banyak ikon yang dapat melakukan operasi yang sama dengan satu klik mouse saja.
![Page 10: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/10.jpg)
Mulailah membuka program Microsoft Fron Page
Klik tombol “Start” Pilihlah “All Program” dan klik dua kali program “Microsoft
FrontPage
![Page 11: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/11.jpg)
![Page 12: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/12.jpg)
Layar Awal FrontPage
![Page 13: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/13.jpg)
Catetan beberapa hal mengenai layar pembuka yang ditampilkan
1. “Page” di kolom sebelah kiri, yaitu sebuah tampilan halaman Web.
2. “Normal (Desain)” di bagian bawah layar, di mana ditampilkan tampilan yang sedang digunakan normal.
3. “HTML (code)” akan menampilkan kode komputer di belakang halaman Web.
4. “Preview” akan menampilkan halaman yang akan tampil di browser Internet, misalnya Internet Explorer atau Netscape.
![Page 14: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/14.jpg)
Gantilah judul proyek ini dengan memilih perintah “File” lalu pilih “Save As”. Bisa dilihat bahwa contoh ini menyimpan file untuk halaman Web pada desktop komputer dan menggunakan nama asli file “index.htm.”
Pastikan anda menyimpan pekerjaaan anda terlebih dahulu sehingga pekerjaan anda tidak hilang.
![Page 15: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/15.jpg)
Mengubah Judul Proyek
![Page 16: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/16.jpg)
Langkah Awal membuat halaman
Ketik judul “Univesity Pizza” Tekan tombol “Enter” pada papan Tandai kata-kata “Univesity Pizza”
(Seperti yang ditunjukan oleh gambar) Kemudian pilihlah poin 18 untuk ukuran
font dari menu drop-down Pilihlah perintah “Format” diikuti dengan
perintah subperintah “Paragraph”Pilihlah pilihan “Center”. (Seperti yang
ditunjukan oleh gambar)
![Page 17: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/17.jpg)
Perbesar ukuran Teks Membuat Teks ke tengah
![Page 18: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/18.jpg)
Membuat Daftar LokasiKetik “Location”Tandailah “Location”Dan kemudian perintah “Format”Dengan sub perintah “Paragraph” dan
“Alignment” dari pilihan drop-downBuatlah agar paragraph terjajar ke kiri
(“Left”)Kemudian klik icon daftar bertanda seperti
yang ditampilkan pada gambarLalu masukan tiga frase “Commuter Parking
Lot,” ”Recreation Center,”dan”101 North Main Street,”.
Dan tekan kunci “Enter” setelah ketik frase.
![Page 19: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/19.jpg)
Membuat Sebuah Daftar yang Tidak Berurutan
![Page 20: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/20.jpg)
Cara Membuat Table
Pilihlah perintah “Table”, subperintah “Insert”
Kemudian pilihlah perintah “Table” (Seperti yang ditunjukan pada gambar)
Pada layar yang tampil, pilihlah table dengan empat kolom dan empat baris
![Page 21: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/21.jpg)
Membuat Sebuah Tabel
![Page 22: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/22.jpg)
Mengisi Sel-sel table
Isilah sel-sel table dengan informasi ( Yang ditampilkan pada gambar)
Tandailah judul-judul kolom (“Topping,” “ Small,” “Medium,” “Large”, satu demi satu atau seluruh barisan.
Lalu pilihlah “format” diikuti dengan subperintah “Font.”
Dari jendela yang muncul, pada pilihan “Font Style” pilihlah “Italic”
![Page 23: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/23.jpg)
Tabel dengan Sel-Sel yang Sudah Terisi
![Page 24: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/24.jpg)
Menambahkan Gambar
Klik perintah “Insert” di ikuti dengan subperintah “Picture”.
Pilihlah “Clip art” (Seperti yang di tunjukan pada gambar )
![Page 25: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/25.jpg)
Menuju Clip Art
![Page 26: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/26.jpg)
Mencari gambar di Clip Art
Ketika layar selanjutnya muncul, ketika kata “Pizza”
Pilihlah sebuah gambar untuk digunakan
Setelah memasukan gambar tersebut, tekanlah kunci “ENTER” dua kali untuk membuat halaman web bergerak turun
![Page 27: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/27.jpg)
Mencari gambar di Clip Art
![Page 28: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/28.jpg)
Menyimpan Gambar yang sudah dipilih sebagai file GIF
Gambar yang sudah diambil dari clip art Micosoft berbentuk Windows Media Format (WMF) tapi harus menyimpannya dalam bentuk yang dikenali oleh halaman WEB.
Klik tombol “Picture Option”Pilihlah format file “GIF”Kemudian klik “OK” menyimpan file
tersebut dengan nama file yang baru,simpanlah file frontpage anda sekala berkala.
![Page 29: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/29.jpg)
![Page 30: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/30.jpg)
Menambahkan sebuah daftar bernomorAnda harus memasukan kalimat
“why order from us?” pada halaman Web tersebut.
Kemudian tekan kunci “Enter” untuk mendapatkan garis baru.
Lalu pilihlah ikon daftar bernomor (seperti di dalam gambar)
Dan masukan tiga alasan (“pengiriman cepat”) dan menekan kunci “Enter”
![Page 31: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/31.jpg)
Membuat daftar yang bernomor dan berangka
![Page 32: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/32.jpg)
Link Halaman Web
Bagian akhir dari contoh 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. Membuat link bisa berguna untuk pergi ketempat halaman Web lain agar bisa dibaca dan mengirimkan e-mail kepada orang yang menciptakannya.
![Page 33: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/33.jpg)
Memasukan Hyperlink *Klik “Insert”*Di ikuti dengan subperintah “Hyperlink”
![Page 34: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/34.jpg)
Pemilihan Penggunaan Link E-Mail
Pada bagian “Text to display” masukan kalimat “Contact Us”.
Pada bagian “E-mail address,” masukan alamat e-mail anda. Ketika anda mengetik FrontPage secara otomatis memasukan mailto: ke alamat e-mail anda agar link e-mail bekerja dengan browser internet
Pada bagian terakhir anda perlu isi adalah “Subject” Masukan frase “Pizza Delivery.”
ketika seseorang mengklik frase”contact Us” pada halaman Web anda akan dikirimin sebuah pesan dengan judul “Pizza Delivery.”
![Page 35: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/35.jpg)
Pemilihan penggunaan Link E-mail
![Page 36: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/36.jpg)
Membuat sebuah link untuk halaman WebKlik perntah “Insert” di ikuti dengan
subperintah “Hyperlink”Pastikan anda memilih kotak
“Exisiting 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.YOURSCHOOL.EDU.
![Page 37: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/37.jpg)
Membuat sebuah link untuk halaman Web
![Page 38: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/38.jpg)
Membuat Link dengn Bookmark
![Page 39: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/39.jpg)
Melihat Web yang telah di kerjakan
Dibagian bawah layar FrontPage terdapat tiga pilihan : Normal,HTML. dan Preview.Klik Preview anda akan melihat bagaiman halaman Web kan ditampilkan pada browser, apakah contoh yang telah dibuat bekerja dengan baik halaman tersebut tidak harus terlihat persis perhatikan bahwa teks tersebut berbentuk huruf miring pada halaman Web anda sebagaimana halnya teks tersebut pada (Figur P2.1)
![Page 40: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/40.jpg)
Klik link “Contack Us” sebuah jendela yang berinteraksi dengan program e-mail akan terbuka. Pada bagian “To” nda dapat melihat alamat e-mail anda pada bagian subjek.Anda akan melihat “University Pizza” jika tulisan-tulisan ini tidak muncul maka kemungkinan komputer anda tidak diizinkan untuk mengirimkan e-mail atau anda belum membuat link dengan benar.
![Page 41: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/41.jpg)
Tandai link “Link to My School” dan “Go to Top Of Page”. Jika ada link yang tidak berkerja dengan baik, kembali dan pilih tab “normal” (dan keluar dari tampilan “Preview”), anda dapat menandai link yang tidak berkerja dan menghapusnya. Lalu kerjakan kembali contoh tersebut untuk memperbaiki link tersebut.
![Page 42: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/42.jpg)
Kelebihan dan Kekurangan FrontPage
Kebanyakan orang merasa mudah menggunakan FrontPage untuk membuat halaman Web. Tetapi, FrontPage harus membuat berbagai asumsi dan default untuk membuat sebuah halaman Web. Ini akan menghasilkan file komputer yang panjang sekedar untuk melakukan tugas yang sederhana.
![Page 43: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/43.jpg)
Kelebihan FrontPageMenggunakan FrontPage untuk
membuat halaman Web adalah kemudahan penggunanya. 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.
Kerkurangan FrontPageKekurangan Frontpage adalah kode
HTML (kode yang diperoses oleh browser internet) yang dihasilkan tidak effisien.
![Page 44: Proyek 2 sistem informasi manajemen](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e9b0dd8b42a6d068b5088/html5/thumbnails/44.jpg)
SEKIANTERIMA KASIH