Tambahkan link ke gambar di HTML

Pengarang: Christy White
Tanggal Pembuatan: 12 Boleh 2021
Tanggal Pembaruan: 1 Juli 2024
Anonim
Belajar HTML Pemula | 8.1 Membuat Link Gambar
Video: Belajar HTML Pemula | 8.1 Membuat Link Gambar

Isi

Dengan satu baris kode HTML, Anda dapat menambahkan gambar yang dapat diklik ke hampir semua situs web. Ada dua hal yang Anda perlukan agar ini berhasil. Anda membutuhkan URL untuk gambar dan juga URL situs web.

Melangkah

Metode 1 dari 2: Tulis kode HTML

  1. Buat file HTML. Buka editor teks dan kemudian buat file baru. Simpan file sebagai index.html.
      • Anda dapat menggunakan editor teks apa pun yang Anda inginkan, bahkan editor teks sederhana Windows (Notepad) dan Mac OS X (TextEdit).
      • Jika Anda ingin menggunakan editor teks yang ditujukan untuk bekerja dengan HTML, klik di sini untuk mengunduh Atom, editor teks untuk Windows, Mac OS X dan Linux.
      • Jika Anda menggunakan TextEdit, klik menu Format sebelum membuat file HTML, lalu klik Make Plain Text. Pengaturan ini memastikan bahwa file HTML dimuat dengan benar di browser web.
      • Pemroses kata seperti Microsoft Word tidak terlalu bagus untuk menulis HTML, karena mereka menambahkan karakter dan pemformatan yang tidak terlihat yang dapat merusak file HTML dan membuatnya tidak ditampilkan dengan benar di browser web.
  2. Salin dan tempel kode HTML standar. Pilih dan salin kode HTML di bawah ini dan tempelkan ke index.html yang Anda buka.

    a href = "url target"> img src = "url gambar" /> / a>

  3. Temukan URL gambar Anda. Temukan gambar di web, klik kanan dan (tergantung browser Anda) klik Salin URL Gambar, Salin Alamat Gambar, atau Salin Lokasi Gambar.
      • Firefox dan Internet Explorer menggunakan lokasi Salin gambar. Chrome menggunakan Salin URL Gambar. Safari menggunakan Salin Alamat Gambar.
  4. Tambahkan URL gambar. Di file index.html, klik dan seret untuk memilih URL gambar dengan mouse Anda, lalu tekan CTRL + V untuk menempelkan URL.
  5. Tambahkan URL target. Di index.html, hapus url target dan ketik https://www.startpage.com.
      • Anda dapat menggunakan URL apapun sebagai URL target.
  6. Simpan file HTML.
  7. Buka file HTML di browser web. Klik kanan pada index.html dan kemudian buka file ini di browser web pilihan Anda.
      • Jika browser terbuka tetapi Anda tidak melihat gambarnya, pastikan Anda telah mengeja nama file gambar dengan benar di file index.html.
      • Saat browser terbuka, tetapi Anda melihat kode HTML dan bukan gambar latar belakang, index.html Anda disimpan sebagai file .rtf (file teks kaya). Coba edit file HTML di editor teks lain.

Metode 2 dari 2: Pahami kode HTML

  1. Pahami tag anchor. Kode HTML terdiri dari tag pembuka dan penutup. Tag a href = ""> adalah tag awal, dan / a> adalah tag akhir. Ini disebut tag jangkar dan digunakan untuk menambahkan tautan ke halaman web.
    • Itu Sebuah memberi tahu browser untuk membuat tautan. Itu href adalah singkatan dari referensi HTML, itu = memberi tahu browser untuk mengubah semuanya ’ ’ buat tautan. URL apa pun dapat ditempatkan di antara dua tanda kutip.
    • Itu / a> memberi tahu browser bahwa tag jangkar ditutup.
    • Saat Anda menambahkan teks di antara a href = ""> dan / a> teks itu menjadi link yang dapat diklik di halaman web. Contohnya: a href = "https://www.google.com"> Google / a> membuat tautan ke Google.
  2. Pahami tag gambar. Tag img> adalah tag tertutup. Anda dapat menutupnya dengan img src = "" /> atau img src = ""> / img>.
    • Itu img tag memberi tahu browser untuk menampilkan gambar. Itu src adalah singkatan dari source, de = memberi tahu browser untuk menghapus semuanya di antara file ’ ’ dan mengambil gambar dari lokasi itu.
    • Itu /> memberi tahu browser untuk menutup tag gambar.
    • Misalnya: {samp [} mendapatkan gambar dari URL itu, lalu menampilkannya di browser web.
  3. Gunakan kode ini di mana saja. Sekarang setelah Anda mengetahui kode ini, Anda bisa a href = "url target"> img src = "url gambar" /> / a> untuk menambahkan gambar yang dapat diklik ke halaman web manapun dengan kode HTML.