Cara Menambahkan Tautan ke Dalam Gambar

Unduh PDF

Unduh PDF

Dalam Artikel Ini:

Menulis Kode HTML

Mengerti Kode HTML

Artikel Terkait

Referensi

Dengan satu baris kode HTML, Anda bisa menambahkan sebuah gambar yang bisa diklik untuk memindahkan pengunjung ke situs apa pun. Ada dua hal yang dibutuhkan untuk melakukannya. Anda memerlukan URL untuk gambar dan URL untuk situs.

Langkah

Metode 1

Metode 1 dari 2:

Menulis Kode HTML

Unduh PDF

1. 
   1
   Buatlah berkas HTML. Bukalah editor teks, lalu buatlah berkas baru. Simpan berkas sebagai index.html.

   • Anda bisa menggunakan editor teks apa saja, bahkan editor teks sistem yang disediakan oleh Windows, yaitu Notepad, dan juga Mac OS X, yaitu TextEdit.

   • Jika Anda ingin menggunakan editor teks yang dibuat khusus untuk mengerjakan HTML, klik di sini untuk mengunduh Atom, yakni editor teks yang bisa digunakan pada sistem operasi Windows, Mac OS X, dan Linux..

   • Jika menggunakan TextEdit, sebelum Anda mulai menulis dalam berkas HTML, klik menu Format, lalu klik Make Plain Text. Pengaturan ini berfungsi memastikan berkas HTML dimuat dengan baik di dalam peramban web.

   • Pemroses kata seperti Microsoft Word tidaklah bagus untuk menulis kode HTML. Pemroses kata menambahkan karakter dan format yang tidak terlihat, sehingga dapat merusak berkas HTML dan menyebabkan berkas tidak ditampilkan dengan tepat di dalam peramban web.
2. 
   2
   Salin dan rekatkan (copy dan paste) kode HTML standar. Pilih dan salin kode HTML di bawah ini, lalu rekatkan ke dalam berkas index.html.
   

   <a href="URL TUJUAN"><img src="URL GAMBAR" /></a>
3. 
   3
   Temukan URL gambar. Temukan sebuah gambar di dalam internet, lalu klik kanan gambar pilihan Anda. Setelah itu, tergantung pada jenis peramban yang digunakan, klik Copy Image URL, Copy Image Address, atau Copy Image Location.

   • Mozilla Firefox dan Internet Explorer menggunakan istilah Copy Image Location. Chrome menggunakan istilah Copy Image URL. Safari menggunakan istilah Copy Image Address.
4. 
   4
   Tambahkan URL gambar. Di dalam berkas index.html, klik dan geser untuk memilih URL GAMBAR dengan tetikus, lalu tekan CTRL + V untuk merekatkan URL gambar pilihan Anda.
5. 
   5
   Tambahkan URL tujuan. Di dalam berkas index.html, hapus URL TUJUAN, lalu ketikkan http://www.google.com.

   • Anda bisa menggunakan URL apa saja sebagai URL tujuan
6. 
   6
   Simpan berkas HTML.
7. 
   7
   Bukalah berkas HTML dengan peramban web. Klik kanan pada berkas index.html, lalu bukalah berkas tersebut dengan peramban pilihan Anda.

   • Jika gambar tidak muncul ketika peramban dibuka, pastikan bahwa nama berkas gambar ditulis dengan tepat di dalam jendela editor teks index.html.

   • Jika gambar tidak muncul, dan yang muncul adalah kode HTML ketika Anda membuka peramban web, maka berkas index.html Anda tersimpan sebagai rich text document. Cobalah mengedit berkas HTML dengan editor teks yang berbeda.
   Iklan

Metode 2

Metode 2 dari 2:

Mengerti Kode HTML

Unduh PDF

1. 
   1
   Mengertilah tanda jangkar (anchor). Kode HTML terdiri dari tanda pembuka dan tanda penutup. Tanda <a href=""> adalah tanda pembuka, dan </a> adalah tanda penutup. Tanda ini disebut sebagai tanda jangkar dan digunakan untuk menambahkan tautan ke dalam halaman web.

   • Tanda <a memberi tahu peramban untuk menerjemahkan tautan. Kata href merupakan singkatan dari HTML reference, dan tanda = memberi tahu peramban untuk mengambil semua kata di antara " " dan membuatnya menjadi sebuah tautan. URL apa pun dapat disisipkan di antara tanda kutip dua.
   • Tanda </a> memberi tahu peramban bahwa tanda jangkar telah ditutup.
   • Ketika Anda menambahkan teks di antara <a href=""> and </a>, sebuah tautan yang dapat diklik akan terbentuk dalam halaman web. Sebagai contoh, <a href="http://www.google.com">Google</a> akan membuat sebuah tautan untuk mengunjungi situs Google.
2. 
   2
   Mengertilah tanda gambar. Tanda <img> dapat dibuka dan ditutup dalam satu tanda yang sama. Anda dapat menutupnya dengan menulis <img src="" /> atau dengan menulis <img src=""></img>.

   • Tanda <img memberi tahu peramban untuk menerjemahkan gambar. Kata src merupakan singkatan dari kata source (sumber), dan = memberi tahu peramban untuk mengambil semua kata yang terdapat di antara " " dan mendapatkan gambar dari lokasi tersebut.
   • /> memberi tahu peramban untuk menutup tanda gambar.
   • Sebagai contoh, {{samp[|<img src="https://www.google.com/images/srpr/logo11w.png" />}} akan mengambil gambar dari URL tersebut, lalu menampilkannya dalam peramban web.
3. 
   3
   Gunakan kode ini di mana saja. Setelah Anda memahami kode ini, Anda dapat menggunakan <a href="DESTINATION URL"><img src="IMAGE URL" /></a> untuk menambahkan gambar yang dapat diklik ke dalam halaman web apa pun yang dapat menerjemahkan kode HTML.
   Iklan