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

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.  Mengetahui bagaimana cara menciptakan
link ke halaman Web lain, e-mail, dan bagian-
bagian halaman Web yang ada.

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

7. Contoh halaman Web diatas memiliki
tiga 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.

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

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

10. Mulailah membuka program Microsoft Fron Page
 Klik tombol “Start”
 Pilihlah “All Program”
 dan klik dua kali program “Microsoft FrontPage

12. Layar Awal FrontPage

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

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

15. Mengubah Judul Proyek

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

17. Perbesar ukuran Teks Membuat Teks ke tengah

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

19. Membuat Sebuah Daftar yang Tidak
Berurutan

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

21. Membuat Sebuah Tabel

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

23. Tabel dengan Sel-Sel yang Sudah Terisi

24. Menambahkan Gambar
 Klik perintah “Insert” di ikuti dengan
subperintah “Picture”.
 Pilihlah “Clip art” (Seperti yang di tunjukan
pada gambar )

25. Menuju Clip Art

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

27. Mencari gambar di Clip Art

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

30. Menambahkan sebuah daftar
bernomor
 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”

31. Membuat daftar yang bernomor dan berangka

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

33. Memasukan Hyperlink
*Klik “Insert”
*Di ikuti dengan subperintah “Hyperlink”

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

35. Pemilihan penggunaan Link E-mail

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

37. Membuat sebuah link untuk halaman Web

38. Membuat Link dengn Bookmark

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

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

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

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

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

44. SEKIAN
TERIMA KASIH