Dokumen tersebut memberikan instruksi tentang cara membuat halaman web dasar menggunakan Microsoft FrontPage dan editor teks Notepad. Ia menjelaskan langkah demi langkah proses pembuatan halaman web, termasuk menambahkan teks, tabel, gambar, dan link menggunakan FrontPage.
2. Dalam proyek ini,anda akan menggunakan Microsoft Frontpage
untuk membuat sebuah halaman Web dasar. Anda akan membuat
halaman web yang sama di proyek 3 tapi dengan sebuah editor
teks, notepad. Tidak ada metode yang lebih baik atau lebih buruk
dibandingkan yang lainnya, mereka hanya berbeda.
Frontpage merupakan suatu aplikasi peranti lunak yang mudah
digunakan dan dapat digunakan untuk membuat halaman Web
yang sederhana. Pengguna editor teks untuk membuat sebuah
halaman Web memerlukan waktu yang lebih banyak dan sedikit
lebih sulit, namun memberikan anda kontrol yang lebih besar
terhadap desain halaman Web tersebut.
Suatu contoh tahap demi tahap menggambarkan teknik-teknik dan
konsep-konsep yang akan dibutuhkan untuk proyek ini.
3. Contoh ini membuat halaman Web dasar yang
menampilkan informasi kepada para pelanggan potensial
seperti yang ditampilkan pada Figur P2.1
4. Gambar ini memberikan informasi mengenai University pizza,
lokasi nya dan jenis-jenis pizza yang ditawarkan beberapa fitur
digunakan untuk mengorganisasi informasi di halaman Web
tersebut untuk membuat nya lebih efektif: daftar, sebuah
gambar, sebuah tabel dan sederet link.
Presentasi dan tampilan dari informasi ini sangat penting. Nama
perusahaan ini, “University Pizza” ditampilkan jelas pada bagian
tengah dan atas halaman Web dengan huruf-huruf besar.
Setelah nama perusahaan , tersedia daftar lokasi dimana pizza
tersebut dapat dibeli, daftar lokasi tersebut menjorok ke dalam
dengan bulatan menandai masing-masing lokasi.
Ini merupakan tampilan yang biasa nya dijumpai dimana tidak
ada tingkat kepentingan lokasi mana yang pertama dan terakhir
5. Lihatlah daftar alasan yang mengikuti ”Way Order us?”
ini adalah sebuah daftar yang berurutan artinya adalah benda yang
terpenting akan ditulis pertama biasanya urutan dituliskan dengan
angka tetapi angka romawi dan huruf-huruf alfabet juga dapat
digunakan atau sebuah bulatan kecil penanda yang biasa
digunakan untuk daftar yang tidak berurutan.
Setelah lokasi-lokasiUniversity Pizza, sebuah tabel menunjukan
daftar harga pizza berdasarkan topping dan ukurannya. Tabel
tersebut terdiri dari empat kolom dan empat garis. Mungkin
seakan-akan tabel ini hanya memiliki tiga baris tetapi label-label
kolom (“Topping,”Medium,”Large”) sebenarnya berada pada baris
pertama.
Gambar seorang juru masak memegang satu baki pizza adalah
sebuah gambar clipart yang disediakan oleh Microsoft. Atau bisa
menggunakan gambar apapun yang di inginkan tetapi gambar ini
pantas digunakan dalam halaman Web yang di promosikan penjual
pizza.
6. Halaman web ini memiliki tiga link yang pertama :
’’Contact Us’’ adalah sebuah link untuk mengirimkan email.
‘’Link to my school’’ adalah sebuah hyperlink untuk halaman Web
sekolah anda. Link yang terakhir
’’Go to Top of page’’ memberikan navigasi untuk halaman Web ini.
Halaman web yang panjang terkadang membutuhkan bantuan
navigasi sehingga para pengguna dapat melompat ke bagian
halaman yang diminati dan melewati informasi-informasi yang
tidak di inginkan.
Ketika mendesain halaman Web lebih baik memiliki sebuah
halaman Web yang panjang dibandingkan beberapa halaman Web
yang pendek sehingga jika para pengguna mencetak halaman
Web tersebut mereka akan mendapatkan semua informasi yang
dibutuhkan sekaligus dan tidak sekedar mencetak sebuah
halaman pendek lain lagi, dan seterusnya hingga semua informasi
tercetak.
7. MEMBUAT DOKUMEN FRONTPAGE
Instruksi-instruksi ini secara umum akan mengarahkan
anda kepada perintah dan subperintah yang akan
mendapatkan efek yang di inginkan.
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
mengunggu sebentar, sebuah kotak penjelaskan akan
muncul dan memberitahu apa yang akan terjadi jika suatu
ikon di-klik.
Mulailah dengan memberikan program Microsoft
Frontpage.
Klik tombol “Start” di bagian sebelah kiri bawah layar,
kemudian pilihlah “All programs” dan klik dua kali program
“Microsoft Frontapage”. Seperti (Figur P2.2) menampilkan
seperti apa layar tesebut akan terlihat ketika anda
10. Pertama, lihatlah kotak bujur sangkar di sekitar tampilan “Page” di
kolom sebelah kiri, melihat sebuah tampilan halaman Web.
Sekarang lihat ke bagian bawah layar dimana ditampilkan “Page”
di kolom sebelah kiri, melihat sebuah tampilan halaman Web
sekarang lihatlah ke bagian layar bawah dimana di tampilkan
“Normal”. Memilih “HTML” akan menampilkan kode komputerdi
belakang halaman Web, dan “Preview” akan menampilkan
halaman yang akan tampil di browser Internet, misalnya Internet
Explorer atau Netscape.
Perlu dicatat juga bahwa jenis font untuk kata-kata yang akan di
ketik di halaman Web adalah Times New Roman. Ukuran karakter-
karakter yang di ketik adalah 12 poin, semakin besar ukuran poin
maka tampilan karakter yang di ketik pun makin besar.
Hal lain yang harus dicatat adalahnama yang otomatis dibuatuntuk
halaman Web ini adalah “new_page_1.htm”
11. Untuk mengganti judul proyek dengan memilih
perintah “File”di ikuti dengan subperintah “Save
As”, bisa di lihat juga contoh menyimpan file untuk
halaman Web pada dekstop komputer dan
menggunakan nama asli file “index.htm.”
mungkin perlu menyimpan proyek anda pada
sebuah disket,CD,USB (Flash Drive) kapanpun
anda menyimpan filetersebut pastikan menyimpan
pekerjaan anda terlebih dahulu sehingga
pekerjaan tidak akan hilang.
12. Ketik “University Pizza” pada halaman tersebut,
tekan tombol “Enter”,tandailah kata-kata
“University Pizza” seperti yang di tunjukan oleh
Figur P2.5
13. kemudian pilihlah poin 18 untuk ukuran font dari menu drop-down.
Ukuran karakter akan menjadi lebih besar ketika anda melakukan
ini, pilihan perintah “Format” diikuti subperintah “Paragraph” dan
pilihlah pilihan “Center,” seperti yang ditunjukan oleh Figur P2.6
14. Daftar bertanda
Selanjutnya buatlah daftar lokasi ketik kata “Locations”
jika “Locations” muncul di tengah-tengah halaman
dengan huruf-huruf besar maka itu berarti anda tidak
dapat memindahkan kursor ke bawah membuat garis
baru setelah anda mengetik “University Pizza” tadi.
Ini mudah di perbaiki “Locations” dan kemudian
pilihlah perintah “Format” diikuti dengan subperintah
“paragraph” dan “ Alignment” dari pilihan menu drop-
down, buatlah agar paragraph terjajar ke kiri (“Left”)
Klik ikon daftar bertanda seperti yang ditampilkan
dalam figur P2.7
16. 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 sebuah bulatan muncul setelah anda
memasukan “101 North Main street.” Hanya
tekan kunci “Enter” lagi dan bulatan ini akan
hilang dan dapat mengetikan kembali
informasi untuk halaman Web tersebut.
17. TABEL
Mengetahui bagaimana cara membuat sebuah
tabel pada halaman Web merupakan sebuah
keahlian yang penting. Tabel memungkinkan anda
untuk mengontrol format halaman disisi lebarnya.
Biasanya teks hanya akan terketik begitu saja di
halaman Web.
Tabel merupakan sesuatu yang sederhana untuk
di masukan dan memungkinkan anda untuk
mengontrol tampilan halaman Web tersebut.
18. Tandailah judul-judul kolom
(“Topping,””Small,””Medium,””Large”) satu demi
satu atau seluruh barisan. Lalu pilih perintah
“Format” diikuti dengan subperintah “Font” dari
jendela muncul,pada pilihan “Font Style.”
Pilihlah “Italic”, pilihlah ulang semua sel di dalam
tabel dan pindahkan nilai-nilai di dalam sel ke
tengah, dapat di lakukan dengan (meng-highlight
semua sel) dengan cara memilih perintah
“Format” diikuti dengan subperintah “Paragraph”
dan kemudian memilih pilihan aligment “Center.”
19. MENAMBAHKAN GAMBAR
Gambar dapat menjadi suatu bentuk komunikasi
yang memiliki kekuatan pada suatu halaman
Web. Contohnya kita akan memasukan gambar
seseorang yang sedang memegang sebuah
pizza, geserlah kursor dua baris dibawah tabael
lalu klik perintah “Insert” diikuti dengan
subperintah “Picture”, pilihlah “clip art” seperti
yang di tunjukan dalam Figur P2.10
21. Gambar-gambar ini memiliki menu drop-down yang
memberi anda kesempatan untuk memasukan gambar
ke dalam halaman Web.
Setelah memasukan gambar tersebut tekan kunci
“Enter” dua kali untuk membuat halaman Web bergerak
turun. Tergantung pada setting Frontpage yang sudah
ada.
Setelah anda memasukan gambar ke dalam halaman
Web,waktu nya untuk menyimpan file anda, gambar
yang di ambil di clipart Microsoft berbentuk Windows
Media Format (WMF) tapi anda harus menyimpannya
dalam bentuk yang lebih dikenali oleh halaman Web
ketika anda mengklik tombol “Picture Options”,pilihlah
format file “GIF”
22. Kemudian klik “OK” dengan
nama file yang baru,simpanlah
secara berkala di sebabkan
karena jika suatu masalah
komputer terjadi misalnya listrik
mati, hanya hasil kerja selama
sepuluh menit yang akan
hilang.
23. DAFTAR BERNOMOR
Anda harus menambahkan sebuah daftar bernomor ke dalam halaman Web ini
tiga alasan diberikan untuk memesan Pizza dari University Pizza, pertama anda
harus memasukan kalimat “Why order from us?” pada halaman web tersebut
kemudian tekan kunci “Enter” untuk mendapatkan baris baru.
Pilihlah ikon yang bernomer (Figur P2.14)
24. Dan masukan tiga alasan yang ditunjukan setelah anda
memasukan alasan yang ketiga (“Pengiriman Cepat”) dan
menekan kunci “Enter”, angka 4 akan muncul pada daftar,
tekanlah kunci “Enter” sekali lagi dan akan mengakhiri isian untuk
daftar bernomor.
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 halaman lain halaman Web tersebut.
Membuat link memeberi kesempatan bagi pengguna untuk pergi
dari satu tempat ke tempat lain. Perangkat ini khususnya berguna
untuk memberikan suatu cara bagi orang yang membaca halaman
Web tersebut untuk mengirimkan e-mail kepada orang yang
menciptakannya.
Klik”Insert” dengan subperintah”Hyperlink” (Figur P2.15)
27. Pada bagian “Teks to display” masukan kalimat “Contack Us” pada
bagian “E-mail Address”,masukan email anda. Ketika anda
mengketik Frontpage secara otomatis memasukan mailto: keawal
alamat e-mail anda diperlukan agar link email anda bekerja
dengan browser internet, bagian terakhir adalah “Subject”
masukan frase “Pizza Delivery” ketika seseorang mengketik frase
“Contack Us” anda akan dikirimin sebuah pesan dengan judul
“Pizza Delivery”.
Selanjutnya anda membuat sebuah link untuk halaman Web
sekolah anda, klik perintah “Insert” diikuti subperintah “Hyperlink”
pastikan anda memilih kotak “Existing File or Web Page” dibawah
kolom
“Link to” pada bagian “Text to Display,” ketikan “Link to My School.”
Pada bagian “Address,” ketikan
HTTP://WWW.YOURSCHOOL.EDU.
28. Awalan http:// pada awal alamat sangat penting memberitahu
browser internet bahwa ia akan menghubungi sebuah halaman
Web menggunakan Hypertext Transfer Protocol (sekelompok
aturan formal) ini mengatur bagaimana browser berinteraksi
dengan transfer insformasi dari server ke Web lain.
Segmen WWW.YOURSCHOOL.EDU adalah alamat situs Web
yang ingin dikunjungi, sebagai contoh
“HTTP//WWW.GOOGLE.COM” akan mengalihkan pengguna ke
halaman Web Google sebuah mesin pencari yang terkenal.
Meskipun kebanyakan orang sudah terbiasa untuk meninggalkan
bagian http// dari alamat Web penting untuk memasukan alamat
Web dengan lengkap.
Membuat link dalam suatu halaman Web membutuhkan suatu
persiapan terkadang halaman Web berukuran panjang dan
pengguna ingin melompat dari satu bagian ke bagian lain tanpa
harus melakukan Scroll pada halaman tersebut.
29. Pastikan anda memiliki satu atau dua baris dibawah Link terakhir
yang anda buat yaitu “Link to My School” dengan menekan kunci
“Enter” sekali atau dua kali kursor ditempatkan setelah link “Link to
My School” sekarang klik untuk menempatkan kursor sebelum “U”
di “University Pizza” pilih perintah “Insert” subperintah “Bookmark”
seperti yang ditunjukan oleh (Figur P2.18)
30. MELIHAT HALAMAN WEB YANG TELAH DIKERJAKAN
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)
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.
31. KELEBIHAN DAN KEKURANGAN FRONTPAGE
Yang di tampakan oleh halaman Web bukanlah apa yang
digunakan oleh browser Web tersebut untukmembuat halaman.
Jika anda mengklik tab “HTML” dibagian bawah jendela FrontPage
akan tampil kode komputer yang diproses oleh browser Web
Internet anda.
Priksalah kode yang dihasilkan untuk menghasilkan halaman Web
dtersebut dan cobalah untuk menemukan bagian-bagian dimana
anda membuat daftar dan tabel. Coba untuk menemukan gambar
dan link yang anda tempatkan dihalaman Web tersebut.
Kebanyakan orang merasa mudah menggunakan Frontpage untuk
memebuat halaman Web tetapi FrontPAge harus membuat
berbagai asumsi dan default untuk membuat sebuah halaman
Web. Ini akan menghasilkan file komputer yang panjang sekadar
untuk melakukan tugas yang sederhana
32. Keuntungan menggunakan FrontPage untuk
membuat halaman Web adalah kemudahan
penggunanya.
Kelemahan nya 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.
