Proyek 2 web html menggunakan microsoft front page
Transcript of Proyek 2 web html menggunakan microsoft front page
![Page 1: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 Ekonomi
Universitas Pakuan
![Page 2: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/2.jpg)
TUJUAN BELAJAR
Memahami kelebihan dan kelemahanmerancang halaman Web dengan menggunakanFrontPage.
Mampu membuat sebuah halaman Web dasar.
Mengetahui bagaimana cara mengontrol format kata-kata dan gambar-gambar pada saat sebuahhalaman Web.
Mengetahui bagaimana cara menciptakantabel-tabel dan daftar-daftar pada sebuahhalaman Web.
![Page 3: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/3.jpg)
Mengetahui bagaimana cara menciptakanlink ke halaman Web lain, e-mail, dan bagian-bagian halaman Web yang ada.
![Page 4: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/5.jpg)
Contoh Halaman WebContoh ini membuat suatu halaman Web
dasar yang menampilkan infromasi kepadapelanggan pontensial. Gambar ini memberikaninformasi mengenai University Pizza, lokasinya, dan jenis-jenis pizza yang ditawarkan. Beberapafitur ini digunakan untuk mengorganisasiinformasi di halaman Web tersebut untukmembuatnya lebih efektif: daftar, sebuahgambar, sebuah tabel, dan sederet link.
![Page 6: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/6.jpg)
![Page 7: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/7.jpg)
Contoh halaman Web diatas memilikitiga link:
1. Contact Us
yaitu sebuah link untuk mengirim e-mail.
2. Link to my school
yaitu sebuah hyperlink untuk halaman Web sekolah.
3. Go to Top of Page
Memberikan navigasi untuk halaman Web tersebut.
![Page 8: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/8.jpg)
Halaman Web yang panjang terkadangsebuah membutuhkan bantuan navigasi ,sehingga para pengguna dapat melompatke bagian halaman yang diminati danmelewati informasi-informasi yang tidak diinginkan.
![Page 9: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/9.jpg)
MEMBUAT DOKUMEN FRONTPAGE
Intruksi-intruksi ini secara umum akanmengarahkan kepada perintah dansubperintah yang akan mendapatkan efekyang diinginkan. Microsoft FrontPagememiliki banyak ikon yang dapat melakukanoperasi yang sama dengan satu klik mousesaja.
![Page 10: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/11.jpg)
![Page 12: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/12.jpg)
Layar Awal FrontPage
![Page 13: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/13.jpg)
Catetan beberapa hal mengenai layar pembukayang ditampilkan
1. “Page” di kolom sebelah kiri, yaitu sebuahtampilan halaman Web.
2. “Normal (Desain)” di bagian bawah layar, dimana ditampilkan tampilan yang sedangdigunakan normal.
3. “HTML (code)” akan menampilkan kodekomputer di belakang halaman Web.
4. “Preview” akan menampilkan halaman yangakan tampil di browser Internet, misalnyaInternet Explorer atau Netscape.
![Page 14: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/14.jpg)
Gantilah judul proyek ini dengan memilihperintah “File” lalu pilih “Save As”. Bisa dilihatbahwa contoh ini menyimpan file untuk halamanWeb pada desktop komputer dan menggunakannama asli file “index.htm.”
Pastikan anda menyimpan pekerjaaan andaterlebih dahulu sehingga pekerjaan anda tidakhilang.
![Page 15: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/15.jpg)
Mengubah Judul Proyek
![Page 16: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 darimenu drop-down
Pilihlah perintah “Format” diikuti denganperintah subperintah “Paragraph”
Pilihlah pilihan “Center”. (Seperti yang ditunjukan oleh gambar)
![Page 17: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/17.jpg)
Perbesar ukuran Teks Membuat Teks ke tengah
![Page 18: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/18.jpg)
Membuat Daftar Lokasi
Ketik “Location”
Tandailah “Location”
Dan kemudian perintah “Format”
Dengan sub perintah “Paragraph” dan“Alignment” dari pilihan drop-down
Buatlah agar paragraph terjajar ke kiri (“Left”)
Kemudian klik icon daftar bertanda seperti yang ditampilkan pada gambar
Lalu masukan tiga frase “Commuter Parking Lot,” ”Recreation Center,”dan”101 North Main Street,”.
Dan tekan kunci “Enter” setelah ketik frase.
![Page 19: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/19.jpg)
Membuat Sebuah Daftar yang TidakBerurutan
![Page 20: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 denganempat kolom dan empat baris
![Page 21: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/21.jpg)
Membuat Sebuah Tabel
![Page 22: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 satuatau seluruh barisan.
Lalu pilihlah “format” diikuti dengansubperintah “Font.”
Dari jendela yang muncul, pada pilihan “Font Style” pilihlah “Italic”
![Page 23: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/23.jpg)
Tabel dengan Sel-Sel yang Sudah Terisi
![Page 24: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/24.jpg)
Menambahkan Gambar
Klik perintah “Insert” di ikuti dengansubperintah “Picture”.
Pilihlah “Clip art” (Seperti yang di tunjukanpada gambar )
![Page 25: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/25.jpg)
Menuju Clip Art
![Page 26: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 untukmembuat halaman web bergerak turun
![Page 27: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/27.jpg)
Mencari gambar di Clip Art
![Page 28: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/28.jpg)
Menyimpan Gambar yang sudah dipilihsebagai file GIF
Gambar yang sudah diambil dari clip art Micosoft berbentuk Windows Media Format (WMF) tapi harus menyimpannya dalambentuk yang dikenali oleh halaman WEB.
Klik tombol “Picture Option”
Pilihlah format file “GIF”
Kemudian klik “OK” menyimpan file tersebutdengan nama file yang baru,simpanlah file frontpage anda sekala berkala.
![Page 29: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/29.jpg)
![Page 30: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/31.jpg)
Membuat daftar yang bernomor dan berangka
![Page 32: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/33.jpg)
Memasukan Hyperlink
*Klik “Insert”*Di ikuti dengan subperintah “Hyperlink”
![Page 34: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/35.jpg)
Pemilihan penggunaan Link E-mail
![Page 36: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/36.jpg)
Membuat sebuah link untuk halaman Web
Klik 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 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/37.jpg)
Membuat sebuah link untuk halaman Web
![Page 38: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/38.jpg)
Membuat Link dengn Bookmark
![Page 39: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/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 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/41.jpg)
Tandai link “Link to My School” dan “Go toTop Of Page”. Jika ada link yang tidak berkerjadengan baik, kembali dan pilih tab “normal” (dankeluar dari tampilan “Preview”), anda dapatmenandai link yang tidak berkerja danmenghapusnya. Lalu kerjakan kembali contohtersebut untuk memperbaiki link tersebut.
![Page 42: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/42.jpg)
Kelebihan dan Kekurangan FrontPage
Kebanyakan orang merasa mudahmenggunakan FrontPage untuk membuathalaman Web. Tetapi, FrontPage harus membuatberbagai asumsi dan default untuk membuatsebuah halaman Web. Ini akan menghasilkan filekomputer yang panjang sekedar untukmelakukan tugas yang sederhana.
![Page 43: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/43.jpg)
Kelebihan FrontPage
Menggunakan FrontPage untuk membuathalaman Web adalah kemudahan penggunanya.Komputer dan peranti lunak semakin murah,sementara biaya gaji dan upah semakin tinggi.Oleh karena itu, kebanyakan organisasimengandalkan peranti lunak seperti FrontPageuntuk menghemat biaya karyawan.
Kerkurangan FrontPage
Kekurangan Frontpage adalah kode HTML(kode yang diperoses oleh browser internet)yang dihasilkan tidak effisien.
![Page 44: Proyek 2 web html menggunakan microsoft front page](https://reader034.fdocuments.net/reader034/viewer/2022050808/559cf6b61a28ab84438b4806/html5/thumbnails/44.jpg)
SEKIANTERIMA KASIH