Proyek Web/HTML Menggunakan Microsoft                Front Page                   Bab IINama Kelompok : Muhammad Weli M. (...
TUJUAN BELAJAR Memahami kelebihan dan kelemahan merancang halaman Web dengan menggunakan FrontPage. Mampu membuat sebuah...
 Mengetahui bagaimana cara menciptakan link ke halaman Web lain, e-mail, dan bagian- bagian halaman Web yang ada.
Microsoft FrontPage     FrontPage merupakan suatu aplikasi lunak  yang mudah digunakan dan dapat digunakan  untuk membuat ...
Contoh Halaman Web     Contoh ini membuat suatu halaman Web dasar yang menampilkan infromasi kepada pelanggan pontensial. ...
Contoh halaman Web diatas memilikitiga link:1. Contact Us    yaitu sebuah link untuk mengirim e-mail.2. Link to my school ...
Halaman Web yang panjang terkadangsebuah membutuhkan bantuan navigasi ,sehingga para pengguna dapat melompatke bagian hala...
MEMBUAT DOKUMEN FRONTPAGE    Intruksi-intruksi ini secara umum akan mengarahkan        kepada    perintah dan subperintah ...
Mulailah membuka program Microsoft Fron Page Klik tombol “Start” Pilihlah “All Program” dan klik dua kali program “Micr...
Layar Awal FrontPage
Catetan beberapa hal mengenai layar pembukayang ditampilkan1.  “Page” di kolom sebelah kiri, yaitu sebuah   tampilan halam...
Gantilah judul proyek ini dengan memilihperintah “File” lalu pilih “Save As”. Bisa dilihatbahwa contoh ini menyimpan file ...
Mengubah Judul Proyek
Langkah Awal membuat halaman Ketik judul “Univesity Pizza” Tekan tombol “Enter” pada papan Tandai kata-kata “Univesity ...
Perbesar ukuran Teks   Membuat Teks ke tengah
Membuat Daftar Lokasi Ketik “Location” Tandailah “Location” Dan kemudian perintah “Format” Dengan sub perintah “Paragr...
Membuat Sebuah Daftar yang TidakBerurutan
Cara Membuat Table Pilihlah perintah “Table”, subperintah “Insert” Kemudian pilihlah perintah “Table” (Seperti yang  dit...
Membuat Sebuah Tabel
Mengisi Sel-sel table Isilah sel-sel table dengan informasi ( Yang  ditampilkan pada gambar) Tandailah judul-judul kolom...
Tabel dengan Sel-Sel yang Sudah Terisi
Menambahkan Gambar Klik perintah “Insert” di ikuti dengan  subperintah “Picture”. Pilihlah “Clip art” (Seperti yang di t...
Menuju Clip Art
Mencari gambar di Clip Art Ketika layar selanjutnya muncul, ketika kata  “Pizza” Pilihlah sebuah gambar untuk digunakan...
Mencari gambar di Clip Art
Menyimpan Gambar yang sudah dipilihsebagai file GIF      Gambar yang sudah diambil dari clip art  Micosoft berbentuk Windo...
Menambahkan sebuah daftarbernomor Anda harus memasukan kalimat “why order  from us?” pada halaman Web tersebut. Kemudian...
Membuat daftar yang bernomor dan berangka
Link Halaman Web      Bagian akhir dari contoh ini adalah untuk  menciptakan tiga jenis link: sebuah link untuk  alamat e-...
Memasukan Hyperlink*Klik “Insert”*Di ikuti dengan subperintah “Hyperlink”
Pemilihan Penggunaan Link E-Mail Pada bagian “Text to display” masukan kalimat  “Contact Us”. Pada bagian “E-mail addres...
Pemilihan penggunaan Link E-mail
Membuat sebuah link untuk halaman Web Klik perntah “Insert” di ikuti dengan  subperintah “Hyperlink” Pastikan anda memil...
Membuat sebuah link untuk halaman Web
Membuat Link dengn Bookmark
Melihat Web yang telah di kerjakan      Dibagian bawah layar FrontPage terdapat  tiga pilihan : Normal,HTML. dan Preview. ...
Klik link “Contack Us” sebuah jendela yangberinteraksi dengan program e-mail akanterbuka. Pada bagian “To” nda dapat melih...
Tandai link “Link to My School” dan “Go toTop Of Page”. Jika ada link yang tidak berkerjadengan baik, kembali dan pilih ta...
Kelebihan dan Kekurangan FrontPage     Kebanyakan     orang     merasa     mudah  menggunakan FrontPage untuk membuat  hal...
 Kelebihan FrontPage    Menggunakan FrontPage untuk membuat halaman Web adalah kemudahan penggunanya. Komputer dan perant...
SEKIANTERIMA KASIH
Proyek 2 web html menggunakan microsoft front page
Proyek 2 web html menggunakan microsoft front page
Proyek 2 web html menggunakan microsoft front page
Upcoming SlideShare
Loading in...5
×

Proyek 2 web html menggunakan microsoft front page

399
-1

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
399
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Proyek 2 web html menggunakan microsoft front page

  1. 1. Proyek Web/HTML Menggunakan Microsoft Front Page Bab IINama Kelompok : Muhammad Weli M. (0211 11 050) Yulius Purwanto (0211 11 051) Mochamad Febriandi (0211 11 061 ) Fakultas Ekonomi Universitas Pakuan
  2. 2. 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.
  3. 3.  Mengetahui bagaimana cara menciptakan link ke halaman Web lain, e-mail, dan bagian- bagian halaman Web yang ada.
  4. 4. 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.
  5. 5. Contoh Halaman Web Contoh 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.
  6. 6. 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.
  7. 7. Halaman Web yang panjang terkadangsebuah membutuhkan bantuan navigasi ,sehingga para pengguna dapat melompatke bagian halaman yang diminati danmelewati informasi-informasi yang tidak diinginkan.
  8. 8. 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.
  9. 9. Mulailah membuka program Microsoft Fron Page Klik tombol “Start” Pilihlah “All Program” dan klik dua kali program “Microsoft FrontPage
  10. 10. Layar Awal FrontPage
  11. 11. Catetan beberapa hal mengenai layar pembukayang ditampilkan1. “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.
  12. 12. 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.
  13. 13. Mengubah Judul Proyek
  14. 14. 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)
  15. 15. Perbesar ukuran Teks Membuat Teks ke tengah
  16. 16. 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.
  17. 17. Membuat Sebuah Daftar yang TidakBerurutan
  18. 18. 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
  19. 19. Membuat Sebuah Tabel
  20. 20. 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”
  21. 21. Tabel dengan Sel-Sel yang Sudah Terisi
  22. 22. Menambahkan Gambar Klik perintah “Insert” di ikuti dengan subperintah “Picture”. Pilihlah “Clip art” (Seperti yang di tunjukan pada gambar )
  23. 23. Menuju Clip Art
  24. 24. 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
  25. 25. Mencari gambar di Clip Art
  26. 26. Menyimpan Gambar yang sudah dipilihsebagai 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.
  27. 27. Menambahkan sebuah daftarbernomor Anda 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”
  28. 28. Membuat daftar yang bernomor dan berangka
  29. 29. 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.
  30. 30. Memasukan Hyperlink*Klik “Insert”*Di ikuti dengan subperintah “Hyperlink”
  31. 31. 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.”
  32. 32. Pemilihan penggunaan Link E-mail
  33. 33. 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.
  34. 34. Membuat sebuah link untuk halaman Web
  35. 35. Membuat Link dengn Bookmark
  36. 36. 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)
  37. 37. Klik link “Contack Us” sebuah jendela yangberinteraksi dengan program e-mail akanterbuka. Pada bagian “To” nda dapat melihatalamat e-mail anda pada bagian subjek.Anda akan melihat “University Pizza” jikatulisan-tulisan ini tidak muncul makakemungkinan komputer anda tidak diizinkanuntuk mengirimkan e-mail atau anda belummembuat link dengan benar.
  38. 38. 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.
  39. 39. 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.
  40. 40.  Kelebihan FrontPage Menggunakan 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 FrontPage Kekurangan Frontpage adalah kode HTML (kode yang diperoses oleh browser internet) yang dihasilkan tidak effisien.
  41. 41. SEKIANTERIMA KASIH
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×