Belajar Membuat Website
Mata kuliah Sistem Informasi Sumberdaya Lahan Jurusan Tanah FP Unsri
Oleh :
Muhammad Riyadi
Wisnu Benny
dan
Momon Sodik Imanudin
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 :
- index.htm => yaitu frame utama yang ditimpa dengan isinya frame berisi judul.htm, menu.htm dan sambutan.htm
- judul.htm adalah frame pada bagian atas dari file index.htm, berisi link-link/menu dari halaman yang sudah kita buat nantinya.
- 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
- biodata.htm (Biodataku) => berisi biodata tentang diri kita, yang nantinya akan di link-kan di menu.htm
- album.htm (Album Foto) => berisi kumpulan foto-foto tentang kita, yang nantinya akan di link-kan di menu.htm
- favorit.htm (Website Favorit) => berisi kumpulan website yang sering dikunjungi, nantinya akan di link-kan di menu.htm
- 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
