Kelompok : - Dinna H021110003 - Anne. F021110015 - Dwi wira 021100033.

Presentasi berjudul: "Kelompok : - Dinna H021110003 - Anne. F021110015 - Dwi wira 021100033."— Transcript presentasi:

1

2 Kelompok : - Dinna H021110003 - Anne. F021110015 - Dwi wira 021100033

3 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 sebuah halaman Web - Mengetahui bagaimana cara menciptakan tabel-tabel dan daftar-daftar pada sebuah halaman Web - Mengetahui bagaimana cara menciptakan link ke halaman Web lain,e-mail, dan bagian-bagian halaman Web lain.

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

5 Contoh ini membuat halaman Web dasar yang menampilkan informasi kepada para pelanggan potensial seperti yang ditampilkan pada Figur P2.1

6 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

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

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

9 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 melakukan navigasi dari “Start” ke “Microsoft Frontpage”

10 Berikut P2.2 (Memulai Microsoft Frontpage)

11 Layar pembuka yang di tampilkan di Frontpage (Figur P2.3)

12 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”

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

14 Ketik “University Pizza” pada halaman tersebut, tekan tombol “Enter”,tandailah kata-kata “University Pizza” seperti yang di tunjukan oleh Figur P2.5

15 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

16 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

17 Figur P2.7 membuat sebuah daftar yang tidak berurutan

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

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

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

21 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

22 P2.10 Menuju Clip Art

23 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”

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

25 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)

26 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 Figur P2.15 Memasukan Hyperlink

28 Dan (Figur P2.16) akan muncul (Pemilihan Penggunaan Link E-mail)

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

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

31 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)

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

33 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

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

35 TERIMA KASIH