Jumat, 15 Februari 2013

Cara Membuat Hyperlink Antar Halaman Dalam Satu Website



Membuat Hyperlink Antar Halaman Dalam satu website
Nah, itu tadi adalah cara untuk membuat hyperlink teks dimana link teks di arahkan/di link-kan ke sebuah alamat website tertentu.

Sekarang bagaimana caranya membuat hyperlink yang diarahkan ke suatu halaman tertentu yang ada di dalam website kita sendiri? dalam contoh kasus ini Ibnu akan membuat halaman website lebih dari satu.

Misalkan, Ibnu akan membuat sebuah halaman utama ( index ), yang nantinya akan memiliki 4 link, untuk dihubungkan ke halaman lainnya, misalnya, dihalaman index tersebut Ibnu akan membuat 4 link yaitu :
  1. Link ke halaman HOME
  2. Link ke halaman PROFIL
  3. Link ke halaman GALERI
  4. Link ke halaman KONTAK

Dengan kondisi seperti itu, maka Ibnu harus membuat 4 buah halaman website dengan nama file home.htm, profil.htm, galeri.htm dan kontak.htm.

Buatlah ke 4 file tersebut lalu simpan didalam folder yang sama yaitu folder 'website' yang sebelumnya sudah Ibnu buat, Adapun cara membuat ke 4 file tersebut adalah sebagai berikut :

Buka halaman FrontPage baru, klik icon http://www.asianbrain.com/hta/bv/img/mv4/module/belajar-frontpage-20.jpgCreate new page, atau melalui menu : 'file' › 'New'

Lalu masukkan tulisan/teks dihalaman kosong tersebut, misalnya : Halaman HOME

Selanjutnya Ibnu save halaman tersebut dengan nama file 'home.htm' ( caranya sama seperti yang dicontohkan diatas ).

Lakukan langkah tersebut berulang-ulang, untuk menyimpan/men-save ke tiga file lainnya, yaitu : profil.htm, galeri.htm dan kontak.htm.

Perhatikan : Untuk memastikan, apakah Ibnu telah berhail melakukan save untuk ke-4 file tersebut, silakan cek dengan cara melihat kedalam folder 'website' nya langsung, pastikan sudah terdapat file-file yang tadi Ibnu save.

Untuk menghubungkan halaman yang satu dengan yang lainnya. Caranya sebagai berikut:
  1. Buat daftar link menu yang akan Ibnu hubungkan, Contoh: karena kita akan menghubungkan 4 buah halaman web maka kita akan menyiapkan 4 buah daftar teks menu yaitu: 'Home', 'Profil', 'Galeri' dan 'Kontak'. Gambar di bawah ini menunjukkan 4 buah teks menu yang sudah disiapkan.

    http://www.asianbrain.com/hta/bv/img/mv4/module/belajar-frontpage-21.jpg
  2. Highlight / Block pada tulisan 'Home' lalu klik tombol kanan mouse dan pilih menu 'Hyperlink'

    http://www.asianbrain.com/hta/bv/img/mv4/module/belajar-frontpage-22.jpg
  3. Pada kotak dialog 'Edit Hyperlink', perhatikan kolom 'Look in:' klik pada kolom 'Look in:' ini untuk mencari nama file halaman web yang akan dituju. Dalam contoh ini menu 'Home' akan dihubungkan dengan halaman web yang sudah diberi nama file 'home.htm'.

    http://www.asianbrain.com/hta/bv/img/mv4/module/belajar-frontpage-23.jpg
    Kalau sudah ketemu file halaman web yang Ibnu tuju selanjutnya Klik 1x pada nama file tersebut lalu klik tombol OK. Dalam contoh ini ditunjukan file yang dituju adalah file dengan nama home.htm.
  4. Kita coba lakukan sekali lagi untuk menghubungkan teks menu 'Profil'. Highlight pada tulisan 'Profil' lalu klik tombol kanan mouse dan pilih menu 'Hyperlink'.

    http://www.asianbrain.com/hta/bv/img/mv4/module/belajar-frontpage-24.jpg
  5. Cari file halaman web dengan nama 'profil.htm', lalu klik 1x pada nama file tersebut lalu klik tombol OK.

    http://www.asianbrain.com/hta/bv/img/mv4/module/belajar-frontpage-25.jpg
  6. Lakukan hal yang sama untuk menghubungkan sisa menu lainnya, yaitu menu, 'galeri' dan 'kontak'.

Jika Sudah Ibnu link-kan semua menunya, maka tampilan halaman web Ibnu akan seperti gambar dibawah ini :

http://www.asianbrain.com/hta/bv/img/mv4/module/belajar-frontpage-26.jpg"Tampilan Akhir setelah semua menu di buat hyperlink"
Langkah selanjutnya, Ibnu save halaman hasil kerja Ibnu barusan dengan nama 'index.htm'.

Untuk menguji apakah hyperlink yang sudah Ibnu buat tersebut sudah berjalan dengan baik, cobalah klik mode 'Preview' dan klik lah pada masing-masing link tersebut.

Atau, Ibnu bisa langsung mengeceknya melalui Browser Internet Explorer Ibnu, caranya :
  • Buka folder 'website'
  • Klik kanan file 'index.htm' pilih 'Open With' › 'Internet Explorer'.

    http://www.asianbrain.com/hta/bv/img/mv4/module/belajar-frontpage-27.jpg"Cara membuka file index.htm
    http://www.asianbrain.com/hta/bv/img/mv4/module/belajar-frontpage-28.jpg"Tampilan halaman web Ibnu di Internet Expolrer"
  • Jika sudah terbuka di Internet Explorer, silakan Ibnu cek satu persatu link menu yang sebelumnya sudah Ibnu buat, klik setiap menu yang ada, jika berhasil terhubung ke halaman yang dimaksud, berarti proses pembuatan link nya sudah berhasil.

Okay, sampai disini Ibnu sudah menguasai materi untuk memasukkan teks ke halaman website, merubah ukuran teks, mengatur posisi teks, merubah warna teks, dan membuat hyperlink pada teks.

Wow... lima materi kini sudah Ibnu kuasai... excellent! :-)

PENTING: Sebelum Ibnu membuat link untuk menghubungkan halaman satu dengan yang lainnya, kumpulkan dulu semua file yang akan di link-kan ke dalam satu folder, hal ini untuk mengihindari kesalahan link ketika file web Ibnu di upload ke Hosting.

1 komentar: