bahan kuliah sisdal

Belajar Membuat Website

Mata kuliah Sistem Informasi Sumberdaya Lahan Jurusan Tanah FP Unsri

Oleh :

Muhammad Riyadi

muhammad.riyadi@gmail.com

Wisnu Benny

wisnu.benny@gmail.com

dan

Momon Sodik Imanudin

Momon2001hk@yahoo.com.hk

Indralaya

25 Maret 2009

BEM Universitas Sriwijaya

Microsoft Frontpage 2003

Untuk membangun sebuah website / situs diperlukan editor web, sebagai contoh adalah : MS-Frontpage, Adobe Macromedia Dreamweaver dsb-nya.

Untuk memulai Frontpage 2003

Klik Start > Programs > Microsoft Office > Microsoft Office Frontpage 2003

Dan ini adalah tampilan dari MS Frontpage 2003

Untuk memulai pembuatan sebuah website / situs

Klik File > New

Pada bagian Task Pane (bagian di sebelah kanan) akan tampil seperti ini :

Pilih pada bagian New Web site lalu klik One page Web site...

Dan akan muncul jendela seperti ini :

Lalu tentukan posisi folder website yang akan kita bangun. Pada bagian sebelah kanan di Options, Specify the location of the new Web site :

Bisa diatur didalam My Documents atau folder lainnya.

ganti menjadi

Pada bagian nama mysite, seperti pada contoh blok gambar diatas ganti dengan nama latihan.

Jika sudah klik tombol OK.

Lalu akan muncul tampilan seperti diatas.

Dan tampilan Frontpage akan berubah menjadi tampilan seperti ini :

Ada satu folder dan satu file utama dalam pembuatan website, yaitu : folder images untuk menyimpan gambar-gambar/foto-foto dan file index.htm sebagai halaman utama untuk tampilan utama dari sebuah website.

Sebagai latihan pertama buat file baru.Dengan cara klik : File > New, pada bagian Task Panes akan klik Blank page dan akan tampil seperti tampilan di bawah ini :

Nama file akan menjadi new_page_1.htm

Buatlah contoh kalimat seperti pada contoh gambar di bawah ini :

Caranya hanya dengan mengklik pada bagian toolbar diatas.

Selain itu Frontpage juga bisa mengantur tebal (bold) , miring dan bergarisbawah di sebuah kalimat. Dengan cara mengklik pada bagian toolbar diatas

Selain itu juga dapat mengatur jenis, ukuran, dan warna, dari font yang kita gunakan.

Dengan cara mengklik pada bagian toolbar atas juga

untuk jenis dan ukuran font sedangkan untuk warna dari font gunakan pada bagian toolbar diatasnya.

Selain itu juga, kita dapat menentukan heading dari website yang akan kita gunakan dengan cara mengklik pada bagian Style di sebelah kiri toolbar di bagian atas.

Heading dimulai dari 1 s/d 6, 1 ukuran nya lebih besar sedangkan 6 ukurannya lebih kecil.

Di Frontpage bisa juga menggunakan daftar urutan baik itu urutan tak berutut (unodered) atau urutan dengan berutut (ordered).

Untuk daftar urutan tak berurut dapat menggunakan pada bagian toolbar diatas. Dan akan tampil seperti gambar dibawah ini :

Sedangkan daftar urutan dengan berurut dapat menggunakan pada bagian toolbar diatas. Dan akan tampil seperti gambar dibawah ini :

Simpan file dengan cara mengklik tombol atau File > Save / File > Save As...

Beri nama file latihan1.htm.

Lalu ganti judul website pada tombol Change title...

Dan ganti dengan judul : Latihan Pertama

Jika sudah klik OK lalu klik tombol Save

Buatlah file baru lagi dengan cara mengklik tombol pada bagian toolbar.

Dan akan muncul judul file dengan nama new_page_2.htm

Sekarang kita coba untuk memasukan gambar, biasaya gambar yang dimasukan di website menggunakan extensi *.jpg / *.gif

Caranya dengan mengklik tombol pada toolbar.

Dan akan muncul jendela, cari di folder c:\pelatihan banyak beberapa contoh gambar yang dapat kita masukan.

Pilih file yang akan dimasukan lalu klik tombol Insert

Dan akan tampil seperti tampilan di bawah ini :

Untuk mengatur ukuran foto atau gambar, gunakan titik pada setiap sudut gambar/foto yang kita masukan dengan cara drag mouse / menahan tombol kiri dan mengeserkan mouse.

Jika gambar diatur segera simpan file tersebut dengan nama file : latihan2.htm

Ganti judul webnya dengan menggunakan judul Latihan Kedua

Lalu akan tampilan perintah untuk penyimpan file gambar di dalam folder website yang sudah kita tentukan tadi / Save Embedded Files

Masukan file gambar didalam folder images

Dengan cara mengklik tombol Change Folder ...

Dan akan munucl pilihan folder yang akan kita gunakan

Pilih folder images lalu klik OK

Dan pada bagian folder akan berganti menjadi images/

Lalu klik OK

Dan sekarang gambar sudah berada di dalam folder images

Sekarang kita coba untuk memasukan gambar latar dari website yang kita buat sebagai contoh masukan gambar sinchan_bg.gif pada folder c:\pelatihan

Dengan cara File > Properties...

Dan akan muncul jendela seperti ini :

Pada bagian tab sebelah atas klik Formatting

lalu klik kotak pada Background picture untuk diaktifkan gambar mana yang akan dijadikan background

Klik tombol Browse...

Lalu cari folder dimana folder, dimana folder menyimpan contoh gambar yang akan dijadikan latar belakang website (c:\pelatihan). Pilihlah file sinchan_bg.gif sebagai contoh gambar.

Dan klik Open dan kembali ke Properties sebelumnya lalu Klik OK

Dan akan muncul contoh gambar seperti di bawah ini :

Sekarang kita mencoba masukan gambar berekstensi GIF yang bisa latar belakangnya transparant dan sesuai dengan gambar/warna di belakangnya dan gambar berekstensi GIF dapat juga sebagai gambar animasi/bergerak.

Seperti contoh yang kita masukan file sinchan_baeh.gif

Lalu simpan kembali dan akan muncul bahwa ada permintaan untuk di copykan ke dalam folder website yang sudah ditentukan, arahkan ke folder images, dan secara otomatis gambar langsung masuk ke folder images/

Klik OK

Sekarang kita bisa melihat hasil yang sudah dibuat dengan cara mengklik pada bagian toolbar di bawah yaitu dengan mengklik tombol preview.

Untuk kembali ke menu membuat klik tombol Design kembali.

Selanjutnya kita akan memasukan gambar berekstensi GIF yang bergerak/animasi dengan cara seperti biasa memasukan gambar, ambil file sinchan_animasi1.gif, atau yang lainnya seperti sinchan_animasi2.gif, sinchan_animasi3.gif, jet.gif dan mercusuar.gif.

Jika di lihat gambar belum bergerak untuk melihatnya dengan cara mengklik kembali Preview pada bagian bawahnya.

Sebagai contoh gambar extensi GIF yang bergerak/animasi dengan backgroundnya transparant sesuai dengan warna/gambar latar dari website adalah gambar jet.gif

Selanjutnya kita akan melihat hasil yang sudah kita buat dilihat di browser Internet Explorer dengan cara :

File > Preview in Browser > Microsoft Internet Explorer 6 F12

Atau bisa juga dengan menekan tombol pada keyboard yaitu F12

Dan akan ada pertanyaan jika kita belum menyimpan file yang sudah kita buat.

Klik Yes

Untuk kembali ke Microsoft Frontpage klik pilihan Microsoft FontPage pada sebelah kiri MS Internet Explorer di bagian toolbar windows di bawah, seperti pada gambar diatas.

Pada gambar diatas latihan2.htm adalah posisi file yang sedang terbuka jika ingin membukanya dapat mengklik nama file yang akan dibuka pada bagian Folder List di sebelah kiri daerah kerja kita.

Misalkan kita akan membuka file latihan1.htm

Atau bisa juga dengan mengklik pada bagian atas dibawah toolbar yaitu daftar nama file yang sudah kita buka.

Untuk melihat hasil pada latihan1.htm kita langsung klik pada bagian Preview atau F12.

Dan akan tampil hasil seperti ini :

Selanjutnya kembali ke Frontpage dan buka file index.htm pada bagian Folder List

Di file index.htm kita akan membuat link / hubungan dengan halaman lainnya yaitu link ke halaman latihan1.htm dan latihan2.htm atau bisa juga link ke halaman website luar atau bisa juga e-mail.

Untuk memluainya dengan cara mengklik tombol dan akan muncul jendela Insert Hyperlink

Sebagai contoh link pertama yaitu latihan1.htm pilih/klik file latihan1.htm dan pada bagian Address akan muncul file latihan1.htm dan di bagian atas Text to display ganti dengan Latihanku yang pertama dari Latihan Pertama yang diambil dari judul website yang kita buat sebelumnya.

Jika sudah klik OK

Atur biar posisi turun kebawah dengan menekan tombol enter

Klik kembali tombol / Insert Hyperlink lalu masukan file kedua, latihan2.htm lalu ganti Text to display dengan Latihanku yang kedua.

Dan akan muncul tampilan seperti ini :

Selanjutnya kita dapat juga memasukan Alamat website seperti : http://www.unsri.ac.id atau alamat email seperti riyadi@plado.co.id

Untuk memasukan alamat website klik kembali tombol pada bagian Address masukan alamat website yang akan di tampilkan misalkan http://www.unsri.ac.id

Klik OK

Sedangkan untuk memasukan alamat email yaitu dengan cara memilih pilihan pada bagian Link to: di sebelah kiri pada jendela Insert Hyperlink

Masukan E-Mail address : dengan email kita sebagai contoh riyadi@plado.co.id dan secara otomatis di depan alamat email kita akan masuk juga tulisan mailto:

Dan pada bagian Text to display: ganti dengan tulisan Alamat Email Gue.

Lalu klik OK

Lalu simpan dan di tampilkan pada Internet Explorer dan dapat mencoba sendiri.

Selanjutnya kembali ke frontpage untuk mencoba mengubah warna latar, warna link yang akan kita gunakan secara keseluruhan.

Dengan cara klik File > Properties pada bagian Tab di atasnya pilih Formatting dan pada bagian Colors akan banyak pilihan seperti Background, Text, Hyperlink, Visited Hyperlink, dan Active Hyperlink, semua pada posisi warna standar.

Silahkan ganti warna yang sesuai dengan selera kita dan pas bagi mata pengunjung website yang kita buat.

Jika sudah klik OK

Dan akan berubah warna yang sesuai dengan selera masing-masing.

Selanjutnya kita akan membuat contoh tabel pada halaman tersebut.

Dengan cara klik

Dan buat tabel dengan baris/rows berjumlah 4 dan kolom berjumlah 4

Dan akan muncul seperti pada gambar di bawah ini :

Dan kita dapat mengatur besar sel/kolom yang kita inginkan dengan men-Drag mouse pada garis pembatas setiap sel / kolom

Beri judul dari masing-masing kolom pertama yaitu No dan kolom kedua Nama dan di kolom ketiga Kelahiran, dan di kolom keempat dikosongkan kita akan mencoba menggabungan judul kolom ketiga dan keempat. Dan pada baris kedua dan kolom ketiga isi dengan Tempat dan pada baris kedua dan kolom keempat dengan Tanggal, lalu tebalkan semua judul dari setiap kolom dengan cara memblok dua kolom.

Seperti pada contoh gambar di bawah ini

Langkah selanjutnya adalah menggabungkan/merge kolom No dengan baris keduanya, kolom Nama dengan baris keduanya, dan kolom kelahiran dengan kolom di sebelahnya.

Sebagai contoh kolom No diblok dengan baris di bawah nya lalu klik kanan mouse dan akan muncul menu lalu pilih Merge Cells

Selanjutnya kolom Nama dengan baris di bawah nya, dan kolom Kelahiran dengan kolom disebelahnya dengan mengikuti aturan seperti diatas tadi.

Lalu masukan data-data yang ingin kita masukan.

Simpan.

Sekarang kita akan membuat frame yaitu dengan cara membuat file baru lalu pada bagian Task Panes pada bagian sebelah kanan, pilih blank page dan akan muncul jendela Page Templates seperti yang sudah dijelas di materi pertama kali tadi.

Pilih pada bagian tab Frames Pages dan pilih Banner and Contents

Lalu klik OK

Dan akan akan tampil seperti ini :

Untuk dibagian atas buat File baru dengan menklik tombol New Page dan begitu juga di sebelah kiri bawah yaitu New Page juga sedangkan di bagian sebelah kanan bawah panggil file yang sudah kita buat yaitu index.htm sebagai halaman utama, yaitu Set Initial Page... dan akan tampil seperti ini :

Pada bagian atas beri judul sebagai contoh Website Latihan Pertamaku, dan buat supaya menjadi heading 1 di bagian style.

dan dibagian sebelah kiri bawah buat menu seperti pada contoh di bawah ini yaitu dengan menglink-kan seperti pada halaman index.htm yang sudah di buat sebelumnya.

Buat link Halaman Utama ke index.htm, Latihan Pertama ke latihan1.htm, Latihan Kedua ke latihan2.htm, Website Unsri ke http://www.unsri.ac.id dan Email Gue ke mailto:riyadi@plado.co.id, supaya penampilan lebih bagus dari masing-masing frame bagian frame yang berada judul diatas buatlah warna yang berbeda dengan cara yang sudah di jelaskan di atas yaitu dengan membuka menu File > Properties dari masing frame kita klik terlebih dahulu.

Dan akan tampil seperti ini :

Simpan keseluruhan frame, dan termasuk frame utama.

Yang pertma adalah menyimpan frame pada bagian atas yaitu judul dari website yang dibuat beri nama file judul.htm dan beri judul websitenya : Judul

Selanjutnya adalah menyimpan halaman menu di sebelah kiri bawah beri nama filenya menu.htm dan judulnya adalah Menu

Selanjutnya adalah frame utama yaitu dengan memberi nama file frame.htm dan judul website yang akan dibuat adalah Website Latihan Pertamaku

Dan selanjutnya adalah melihat hasil yang sudah ditampilkan di browser Internet Explorer.

Selesai sudah website latihan pertama kita yang sudah dibuat.

Latihan :

Buatlah website pribadi kita yang sederhana dengan menggunakan frontpage dengan menggunakan nama folder website dan akan dipublikasikan di internet jika waktu mencukupi untuk mempulkasikannya di internet.

Buatlah file :

1. index.htm => yaitu frame utama yang ditimpa dengan isinya frame berisi judul.htm, menu.htm dan sambutan.htm
2. judul.htm adalah frame pada bagian atas dari file index.htm, berisi link-link/menu dari halaman yang sudah kita buat nantinya.
3. sambutan.htm (Halaman Utama), adalah halaman utama yang akan tampil pada tampilan pertama sekali kita akan membuka website dan merupakan bagian dari frame utama index.htm
4. biodata.htm (Biodataku) => berisi biodata tentang diri kita, yang nantinya akan di link-kan di menu.htm
5. album.htm (Album Foto) => berisi kumpulan foto-foto tentang kita, yang nantinya akan di link-kan di menu.htm
6. favorit.htm (Website Favorit) => berisi kumpulan website yang sering dikunjungi, nantinya akan di link-kan di menu.htm
7. email.htm (Emaiku) => ke alamt email kita, nantinya akan di link-kan juga di menu.htm

Publikasi di Internet

Untuk mempublikasikan di internet kita menggunakan Geocities Yahoo alamatnya adalah http://geocities.yahoo.com

Ini adalah hosting gratis, untuk mempublikasikannya kita harus mendaftarkan terlebih dahulu sebagai user di Yahoo apabila sudah ada user/email di Yahoo tidak harus mendaftar / register kembali dan sudah bisa digunakan.

Buka alamat http://geocities.yahoo.com

Apabila kita belum memliki user/email di Yahoo lakukan pendaftaran / register di Sign Up Now, dan apabila sudah memiliki user/email di Yahoo langsung klik Sign in di bagian atas.

Tampilan diatas adalah apabila kita sudah memiliki user/email di yahoo tinggal di input saja Yahoo ID dan Passwordnya.

Jika belum silahkan klik Sign Up

Diatas adalah contoh tampilan untuk registrasi untuk menjadi user di Yahoo dan dapat menggunakan Geogities ikutilah langkah selanjutnya

Apabila berhasil akan muncul tampilan seperti ini :

Selanjutnya kita akan dipersilahkan untuk menggunakan Geocities secara gratis tp harus mengisi beberapa isian terlebih dahulu

Dan akan muncul seperti ini apabila sudah berhasil :

Untuk memulai kil Build your site now!

Dan inilah tampilan Control Panel untuk Geocities dan kita akan siap untuk menguploadnya dengan menggunakan File Manager

Klik bagian Manage lalu Klik File Manager

lalu Klik Open File Manager

Untuk mengupload dengan cara klik tombol Upload Files di sebelah kanan.

Masukan file-file yang berekstensi .htm aja jangan folder. Seperti

album.htm, biodata.htm, favorit.htm, index.htm, judul.htm, menu.htm, dan sambutan.htm

karena form input untuk mengupload hanya ada 5 maka untuk menambahkannya dengan cara mengklik tombol Add more files 2 kali, karena file yang akan kita upload ada 7 files

Dan apabila sudah dimasukan filenya satu persatu klik tombol Upload Files pada bagian bawah

Tampilan diatas adalah tampilan files yang diupload sudah berhasil.

Selanjutnya klik File Manager untuk kembali dan membuat folder bernama images

Dengan cara mengklik tombol New pada Subdirectories pada bagian bawah

Masukan nama folder images

Lalu klik tombol Create Subdirectory

Lalu klik folder images pada File Manager

Untuk mengupload file-file gambar di folder images dengan mengklik Upload Files

Files yang akan diupload ada 12 maka harus ditambah form inputan sebanyak 7 buah

Lalu klik tombol Upload Files

Apabila sudah selesai akan muncul pesan seperti ini :

Sekarang kita akan melihat hasilnya pada bagian klik View My Site