Cara Menambahkan Tautan ke Dalam Gambar

PDF download Unduh PDF
Disusun bersama Staf wikiHow

PDF download Unduh PDF

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.

Metode 1
Metode 1 dari 2:

Menulis Kode HTML

PDF download Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/da\/769114-1.jpg\/v4-460px-769114-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/da\/769114-1.jpg\/v4-728px-769114-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/769114-2.jpg\/v4-460px-769114-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/769114-2.jpg\/v4-728px-769114-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/aa\/769114-3.jpg\/v4-460px-769114-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/aa\/769114-3.jpg\/v4-728px-769114-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2b\/769114-4.jpg\/v4-460px-769114-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2b\/769114-4.jpg\/v4-728px-769114-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4e\/769114-5.jpg\/v4-460px-769114-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4e\/769114-5.jpg\/v4-728px-769114-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Di dalam berkas index.html, hapus URL TUJUAN, lalu ketikkan http://www.google.com .
      • Anda bisa menggunakan URL apa saja sebagai URL tujuan
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/39\/769114-6.jpg\/v4-460px-769114-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/39\/769114-6.jpg\/v4-728px-769114-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cc\/769114-7.jpg\/v4-460px-769114-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/769114-7.jpg\/v4-728px-769114-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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

PDF download Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f7\/769114-8.jpg\/v4-460px-769114-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f7\/769114-8.jpg\/v4-728px-769114-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. [1]
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2f\/769114-9.jpg\/v4-460px-769114-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2f\/769114-9.jpg\/v4-728px-769114-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tanda <img> dapat dibuka dan ditutup dalam satu tanda yang sama. Anda dapat menutupnya dengan menulis <img src="" /> atau dengan menulis <img src=""></img>. [2]
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/47\/769114-10.jpg\/v4-460px-769114-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/47\/769114-10.jpg\/v4-728px-769114-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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

wikiHow Terkait

Cara
Membuka Berkas EPUB
Cara
Menonaktifkan McAfee
Cara
Membuat Inden pada Baris Pertama di Setiap Paragraf dalam Microsoft Word
Cara
Memperbarui Driver Nvidia
Cara
Membuka Berkas .Dat
Cara
Menjalankan Berkas HTML di Visual Studio Code
Cara
Menggunakan Tanda Fon Berwarna pada HTML
Cara
Menggunakan Microsoft PowerPoint
Cara
Menandai Teks pada Dokumen PDF
Cara
Mengaktifkan JavaScript di Komputer
Cara
Menjalankan Berkas Python dengan Command Prompt di Windows
Cara
Membuat Program dengan Notepad
Iklan

Referensi

  1. ↑ http://www.w3schools.com/html/html_links.asp
  2. ↑ http://www.w3schools.com/html/html_images.asp

Tentang wikiHow ini

Bahasa lain
Halaman ini telah diakses sebanyak 27.268 kali.

Apakah artikel ini membantu Anda?

Iklan