Membuat Link Gambar Ke Halaman Website Lain Dengan HTML

dalam Web Design
Hosting Murah Berkualitas

Pada artikel sebelumnya saya sudah membahas tentang bagaimana caranya Membuat Link Teks Ke Halaman Website Lain Dengan HTML. Pada artikel sebelumnya tersebut saya sudah mengajarkan kepada anda bagaimana caranya membuat link dalam bentuk teks tersebut agar bisa ngelink ke halaman website lain yang berbeda URL dan ke dokumen lain yang ada dalam 1 komputer ataupun 1 server. Kali ini saya akan lanjutkan ke bahasan berikutnya yaitu tentang bagaimana caranya Membuat Link Gambar Ke Halaman Website Lain Dengan HTML.

Jika sebelumnya kita membuat link dalam bentuk teks, sekarang kita akan membuat link dalam bentuk gambar. Sebelum kita melanjutkan materi yang ada pada artikel ini, jika anda belum mengikuti materi tentang bagaimana caranya membuat link dalam bentuk teks atau hanya sekedar untuk merefresh ingatan anda tentang materi yang sudah saya ajarkan sebelumnya, maka silahkan anda baca dulu artikelnya dengan mengklik linknya disini untuk melihat artikel sebelumnya.

Dalam kaitannya dengan judul artikel ini yaitu tentang membuat link gambar, tentunya anda harus tahu dulu bagaimana caranya menampilkan objek gambar pada halaman HTML anda tersebut. Tentunya saya pun tidak perlu repot mengajarkan lagi bagaimana caranya menampilkan objek gambar tersebut pada halaman HTML anda, karena pada Modul Tutorial sebelumnya sudah saya ajarkan tentang hal tersebut. Jika anda belum mempelajari materi bagaimana caranya menampilkan objek gambar pada halaman HTML anda tersebut, maka silahkan baca dulu artikel saya yang berjudul Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML.

Untuk mempersingkat pembelajaran membuat link gambar ini, kita akan gunakan file latihan sebelumnya yang sudah kita bikin pada artikel Membuat Link Teks Ke Halaman Website Lain Dengan HTML agar waktu kita lebih efektif untuk mempelajari jurus-jurus HTML yang lainnya. Dengan menggunakan file tersebut, kita hanya tinggal menyisipkan sebuah gambar dengan teknik yang sudah kita pelajari pada Modul Pembelajaran sebelumnya yaitu tentang Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML yang lalu untuk menggantikan link teks tadi. Adapun cara untuk melakukan pembuatan link dalam bentuk gambar tersebut, lengkapnya adalah sebagai berikut.

Silahkan anda buka kembali ke 2 file HTML yang sudah kita buat pada Video Tutorial sebelumnya tentang Membuat Link Teks Ke Halaman Website Lain Dengan HTML. Masing-masing dari ke 2 nama file tadi adalah file-1.html dan file-2.html.

Merubah Link Teks pada File file-1.html menjadi link gambar

Pada sub judul ini, kita akan merubah link teks yang ada pada file-1.html menjadi link gambar. Kemudian nanti kita simpan filenya dengan nama link-gambar-1.html.

Sekarang kita buka kode file HTML yang nama filenya file-1.html. Kode nya adalah sebagai berikut.

<html>
<header>
<title>
Membuat Link Ke Halaman Website Lain Dengan HTML
</title>
</header><body bgcolor=”aqua”><font size=5>Ini contoh Link Ke Halaman Website Lain Yang Berbeda Alamat URL</font><br>
<font size=5><a href=”http://www.google.com” target=”_blank”>Klik Link ini untuk Menuju ke Halaman Google</a></font><br><br><br><br><font size=5>Ini contoh Link Ke Halaman File-2 Dalam Satu Komputer Atau Server</font><br>
<font size=5><a href=”file-2.html” target=”_blank”>Klik Link ini untuk Menuju ke Halaman file <i>file-2.html</i></a></font><br><br><br><br></body>
</html>

Dari Kode-kode HTML file-1.html diatas silahkan hapus Tag dan teks yang diberi warna biru diatas, lalu ganti dengan meletakkan tag <Img Src>  di diantara tag <A Href>. Ganti juga nama file yang jadi tujuan link yang ada didalam tag <A Href> dengan nama file tujuannya yaitu file link-gambar-2.html Nanti kodenya akan berubah seperti contoh dibawah ini.

<html>
<header>
<title>
Membuat Link Ke Halaman Website Lain Dengan HTML
</title>
</header><body bgcolor=”aqua”>
<Font size=6>Ini contoh link Gambar ke halaman website lain yang berbeda alamat URL</font><br>
<A Href=”http://www.google.com” target=”_blank”><img src=”kucing.jpg” width=350 height=200 ></img></A>
<br><br><br><br>
<Font size=6>Ini contoh link Gambar ke halaman File-2 dalam 1 komputer atau server</font><br>
<A Href=”link-gambar-2.html” target=”_blank”><img src=”devil.jpg” width=350 height=200 ></img></A>
</body>
</html>

Silahkan simpan kode-kode HTML diatas dengan nama file yang baru misal nama file nya adalah link-gambar-1.html.

Merubah Link Teks pada File file-2.html menjadi link gambar

Sekarang kita lanjutkan dengan mengubah kode-kode HTML yang ada pada file file-2.html sebelumnya. Kode-kode Html yang ada pada file file-2.html sebelumnya ini adalah sebagai berikut.

<html>
<header>
<title>
Membuat Link Ke Halaman Website Lain Dengan HTML
</title>
</header><body bgcolor=”yellow”><font size=5>Ini contoh Link Ke Halaman Website Lain Yang Berbeda Alamat URL</font><br>
<font size=5><a href=”http://www.facebook.com” target=”_blank”>Klik Link ini untuk Menuju ke Halaman Facebook</a></font><br><br><br><br><font size=5>Ini contoh Link Ke Halaman File-1 Dalam Satu Komputer Atau Server</font><br>
<font size=5><a href=”file-1.html” target=”_blank”>Klik Link ini untuk Menuju ke Halaman file <i>file-1.html</i></a></font><br><br><br><br></body>
</html>

Dari Kode-kode HTML file-2.html tadi diatas silahkan lakukan hal yang sama juga seperti apa yang dilakukan pada file file-1.html sebelumnya dengan menghapus Tag dan teks yang diberi warna biru pada contoh kode diatas, lalu ganti dengan meletakkan tag <Img Src>  di diantara tag <A Href>. Jangan lupa ganti juga file tujuan yang ada didalam tag <A Href> dengan file link-gambar-1.html Dan Nanti kodenya akan berubah seperti contoh dibawah ini.

<html>
<header>
<title>
Menyisipkan gambar pada Background dan halaman website Dengan HTML
</title>
</header><body bgcolor=”yellow”>
<Font size=6>Ini contoh link ke halaman website lain yang berbeda alamat URL</font><br>
<A Href=”http://www.facebook.com” target=”_blank”><img src=”meong.jpg” width=350 height=200 ></img></A>
<br><br><br><br>
<Font size=6>Ini contoh link ke halaman File-1 dalam 1 komputer atau server</font><br>
<A Href=”link-gambar-1.html” target=”_blank”><img src=”einstein.jpg” width=350 height=200 ></img></A>
</body>
</html>

Simpan kode-kode HTML diatas dengan nama file yang baru juga misal nama file nya adalah link-gambar-2.html. Agar kedua file HTML link-gambar-1.html dengan link-gambar-2.html yang baru kita buat tadi saling ngelink.

Setelah file HTML link-gambar-1.html  dengan link-gambar-2.html tadi berhasil anda buat, maka sebagai langkah selanjutnya silahkan simpan kedua file HTML tadi pada satu folder yang sama. Lalu anda siapkan juga 4 gambar dalam format JPEG kemudian beri nama file gambar tersebut dengan nama-nama berikut : kucing.jpg, meong.jpg, devil.jpg, einstein.jpg

Ke 4 file gambar tadi nantinya akan ditampilkan sebagai link gambar sebagai pengganti dari link teks yang kita rubah sebelumnya. Simpan juga ke 4 file gambar tadi pada folder yang sama dengan ke 2 file HTML yang baru saja anda buat tadi filenya.

Setelah semuanya lengkap silahkan anda klik 2 x pada file HTML anda untuk melihat tampilannya dalam browser anda. Tampilannya adalah sebagai berikut.

Tampilan File HTML link-gambar-1.html :

Tampilan File HTML link gambar 1

Pada tampilan gambar diatas jika gambar kucingnya di klik maka anda akan diarahkan ke halaman utama google yang dibuka dalam tab baru. Jika gambar dibawahnya yang di klik maka akan diarahkan ke file HTML link-gambar-2.html.

Tampilan File HTML link-gambar-2.html :

Tampilan File HTML link gambar 2

Pada tampilan gambar diatas jika gambar meongnya di klik maka anda akan diarahkan ke halaman utama Facebook yang dibuka dalam tab baru. Jika gambar enstein dibawahnya yang di klik maka anda akan diarahkan kembali ke file HTML link-gambar-1.html.

Bagi anda yang ingin melihat Video Tutorial Prakteknya, maka silahkan anda lihat di video berikut melalui Link yang dibawah ini. Atau Jika anda ingin melihat semua Video Tutorial Pembelajaran lainnya yang sudah saya upload ke youtube, maka silahkan anda kunjungi saja channelnya dengan klik link ini.

Channel Tutorial :

https://www.youtube.com/channel/UC-FBAJCJ8akIf2TG1hf959A

Channel Hiburan :

https://www.youtube.com/channel/UCVNwNddfe0XxxQdD5dZnb0w

Untuk memudahkan anda mendapatkan Update Video terbarunya, maka silahkan anda klik tombol SUBSCRIBE atau LANGGANAN di ke 2 channel youtube tadi GRATIS tidak dipungut biaya sepeserpun.

Jangan lupa klik tombol SUBSCRIBE nya untuk ber LANGGANAN GRATIS di ke 2 channel youtube saya ini untuk memudahkan anda mendapatkan UPDATE VIDEO TERBARU dari saya.

Saya cukupkan sekian dulu artikel saya yang berjudul Membuat Link Gambar Ke Halaman Website Lain Dengan HTML ini. Saya ingatkan lagi bahwa artikel ini adalah kelanjutan dari artikel sebelumnya yang berjudul Membuat Link Text Ke Halaman Website Lain Dengan HTML. Bagi anda yang belum membacanya silahkan anda simak artikel tersebut dulu karena file-file yang dibuat pada video tutorial artikel tersebut dipakai kembali pada saat mempraktekkan materi yang ada pada artikel ini. Selamat praktek dan semoga bermanfaat.

 

Tags: #belajar html #html #kode html #membangun website #tutorial website #web design

author
Penulis: 
Saya adalah Seorang Blogger yang aktif dan konsen di bidang programming, web design, graphic design dan bisnis online. Saya juga tertarik pada bidang Parenting, Kesehatan dan informasi bermanfaat lainnya.
Cara Posting Artikel Di Website Berbasis WordPress
Cara Posting Artikel Di Website Berbasis WordPress
Pada saat yang lalu saya sudah membahas
Konfigurasi WordPress Yang Penting Untuk Diketahui
Konfigurasi WordPress Yang Penting Untuk Diketahui
Pada kesempatan yang lalu saya sudah membahas
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Bagi anda yang ingin memiliki banyak website
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Langkah pertama yang harus anda lakukan ketika
Cara Membeli Domain Dan Hosting
Cara Membeli Domain Dan Hosting
Salah satu persyaratan untuk bisa memiliki sebuah
Cara Install WordPress Di Localhost Dengan Xampp
Cara Install WordPress Di Localhost Dengan Xampp
Sebagai lanjutan dari pembelajaran membangun website, kali
Cara Install WebServer XAMPP Dan Cara Mendownload Software XAMPP
Cara Install WebServer XAMPP Dan Cara Mendownload Software XAMPP
Sebelum anda memulai untuk belajar membuat website,
Cara Memasukkan Video Ke Halaman Website Dengan HTML
Cara Memasukkan Video Ke Halaman Website Dengan HTML
Pada kesempatan yang lalu saya sudah share
Cara Mengcapture Gambar Di Komputer Dengan Screen Grab Pro
Cara Mengcapture Gambar Di Komputer Dengan Screen Grab Pro
Kali ini saya akan sharing bagaimana caranya

Beri komentar "Membuat Link Gambar Ke Halaman Website Lain Dengan HTML"

Baca juga×

Top