Cara Memasukkan Gambar dengan HTML

PDF download Unduh PDF
Disusun bersama Tyrone Showers

Referensi

PDF download Unduh PDF

Menambahkan gambar ke situs atau profil jejaring sosial adalah cara yang bagus untuk memperindah laman web Anda. Kode HTML untuk memasukkan gambar juga tidak sulit, dan sering dijadikan sebagai salah satu pelajaran pertama bagi para pemula HTML.

Bagian 1
Bagian 1 dari 2:

Memasukkan Gambar

PDF download Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/59\/Insert-Images-with-HTML-Step-1-Version-10.jpg\/v4-460px-Insert-Images-with-HTML-Step-1-Version-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/59\/Insert-Images-with-HTML-Step-1-Version-10.jpg\/v4-728px-Insert-Images-with-HTML-Step-1-Version-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Unggah gambarnya . Terdapat banyak layanan hosting gambar gratis, misalnya Picasa Web Album, Imgur, Flickr, atau Photobucket. Baca persyaratannya dengan teliti. Beberapa layanan bisa mengurangi kualitas gambar, atau menghapus gambar Anda bila gambar tersebut dilihat terlalu banyak orang (karena hal ini akan menghabiskan bandwidth dari layanan hosting tersebut).
    • Beberapa layanan hosting mengizinkan Anda untuk mengunggah gambar menggunakan peranti administrator dari blog tersebut.
    • Bila Anda menggunakan hosting web berbayar, unggah gambarnya ke situs milik Anda sendiri menggunakan layanan FTP . Sebaiknya Anda membuat direktori "gambar" agar berkas-berkas Anda tertata rapi. [1]
    • Jika ingin menggunakan gambar dari situs lain, mintalah izin kepada pemilik situs. Jika diizinkan, unduh gambarnya, lalu unggah gambar tersebut ke sebuah situs hosting gambar.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/40\/Insert-Images-with-HTML-Step-2-Version-8.jpg\/v4-460px-Insert-Images-with-HTML-Step-2-Version-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/40\/Insert-Images-with-HTML-Step-2-Version-8.jpg\/v4-728px-Insert-Images-with-HTML-Step-2-Version-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Buka dokumen HTML untuk laman web yang ingin Anda gunakan untuk menampilkan gambar tersebut.
    • Jika Anda ingin memasukkan gambar di suatu forum, Anda bisa langsung mengetiknya di dalam kiriman. Banyak forum yang menggunakan sistem ubah suaian ( custom ) bukannya HTML. Mintalah bantuan dari para peserta forum lain jika tindakan ini tidak berhasil.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c7\/Insert-Images-with-HTML-Step-3-Version-8.jpg\/v4-460px-Insert-Images-with-HTML-Step-3-Version-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c7\/Insert-Images-with-HTML-Step-3-Version-8.jpg\/v4-728px-Insert-Images-with-HTML-Step-3-Version-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Carilah tempat di bodi HTML yang ingin Anda sisipkan gambar. Tulis tag <img> di sini. Ini merupakan tag kosong, yang artinya tag ini berdiri sendiri, tanpa ada tag penutup. Yang harus Anda lakukan untuk menampilkan gambar adalah dengan memasukkannya ke dalam dua tanda kurung sudut ini.
    • <img>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d2\/Insert-Images-with-HTML-Step-4-Version-9.jpg\/v4-460px-Insert-Images-with-HTML-Step-4-Version-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d2\/Insert-Images-with-HTML-Step-4-Version-9.jpg\/v4-728px-Insert-Images-with-HTML-Step-4-Version-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Kunjungi laman situs yang Anda gunakan untuk mengunggah gambar. Klik kanan gambarnya ("Control"+klik di Mac) dan pilih "Copy Image Location". Anda juga bisa mengeklik "View Image" jika hanya ingin melihat gambarnya saja di suatu laman, kemudian salin URL tersebut ke bilah alamat ( address bar ).
    • Apabila Anda mengunggah gambar ke direktori gambar di situs Anda sendiri, tautkan gambar tersebut dengan /images/ [namaberkas] . Jika tindakan ini tidak berhasil, mungkin direktori gambarnya berada di direktori lain. Pindahkan gambarnya ke direktori root .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/Insert-Images-with-HTML-Step-5-Version-7.jpg\/v4-460px-Insert-Images-with-HTML-Step-5-Version-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/Insert-Images-with-HTML-Step-5-Version-7.jpg\/v4-728px-Insert-Images-with-HTML-Step-5-Version-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Mungkin Anda telah mengetahui bahwa atribut HTML harus dimasukkan ke dalam tag agar dapat dimodifikasi. Atribut Src merupakan singkatan dari "source", yang akan memberi tahu peramban ( browser ) di mana tempat untuk menemukan gambarnya. Tulis src=" " dan tempelkan URL gambarnya di antara dua tanda kutip tersebut. Lihat contoh di bawah ini:
    • <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/26\/Insert-Images-with-HTML-Step-6-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-6-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/26\/Insert-Images-with-HTML-Step-6-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-6-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Secara teknis, HTML Anda telah memiliki semua hal yang diperlukan agar dapat menampilkan gambar, tetapi sebaiknya Anda juga menambahkan atribut alt . Ini akan memberi tahu peramban, teks apa yang harus ditampilkan ketika gambarnya tidak dapat dimuat. Yang lebih penting, ini akan membantu mesin telusur untuk mencari tahu tentang isi gambar Anda, dan membuat pembaca layar dapat menggambarkan gambar tersebut pada pengunjung laman tunanetra. [2] Ikuti contoh ini, dan gantilah teks yang ada di dalam tanda kutip:
    • <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="anjingku sedang makan jeruk">
    • Apabila gambar tersebut tidak begitu penting bagi isi laman, sertakan atribut alt tanpa menggunakan teks (alt=""). [3]
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7e\/Insert-Images-with-HTML-Step-7-Version-5.jpg\/v4-460px-Insert-Images-with-HTML-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/Insert-Images-with-HTML-Step-7-Version-5.jpg\/v4-728px-Insert-Images-with-HTML-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Simpan berkas HTML tersebut ke situs web Anda. Kunjungi laman yang baru Anda sunting, atau segarkan ( refresh ) laman tersebut bila Anda telah membukanya. Sekarang gambar Anda pasti akan terlihat. Apabila ukurannya tidak tepat atau Anda kurang puas dengan gambarnya karena alasan lain, teruskan ke bagian selanjutnya.
    Iklan
Bagian 2
Bagian 2 dari 2:

Penyesuaian Opsional

PDF download Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/Insert-Images-with-HTML-Step-8-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-8-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/Insert-Images-with-HTML-Step-8-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-8-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Untuk mendapatkan hasil terbaik, ubah ukuran gambarnya menggunakan perangkat lunak penyunting gambar gratis , lalu unggah versi barunya. Mengatur lebar dan tinggi gambar menggunakan HTML akan memerintahkan peramban untuk memperkecil atau memperbesar gambar, yang hasilnya bisa tidak konsisten di semua peramban dan bisa menimbulkan galat ( error ) pada tampilan peramban (jarang terjadi). [4] Bila Anda menginginkan penyesuaian yang cepat dan berguna, gunakan format di bawah ini:
    • <img src="http://example.com/example.png" alt="display this" width=200 height=200> (Jumlah piksel, atau lebih banyak "piksel CSS" yang nyaman diterapkan pada ponsel di HTML5.) [5] [6]
    • Atau <img src="http://example.com/example.png" width=100% height=10%> (Persentase dimensi laman web, atau persentase elemen HTML yang berisi gambar tersebut.)
    • Apabila Anda hanya memasukkan satu atribut (lebar atau tinggi), peramban akan mempertahankan rasio lebar:tingginya.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/Insert-Images-with-HTML-Step-9-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-9-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/Insert-Images-with-HTML-Step-9-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-9-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Atribut title bisa digunakan untuk menambahkan komentar atau informasi tambahan tentang gambar tersebut. Misalnya, Anda bisa memberi kredit pada artisnya di sini. Biasanya, teks ini akan muncul ketika pengunjung laman mengarahkan kursor di atas gambar tersebut.
    • <img src="http://example.com/example.png" title="Foto karya J. Godfrey">
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/36\/Insert-Images-with-HTML-Step-10-Version-5.jpg\/v4-460px-Insert-Images-with-HTML-Step-10-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/36\/Insert-Images-with-HTML-Step-10-Version-5.jpg\/v4-728px-Insert-Images-with-HTML-Step-10-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Agar sebuah gambar bisa berperan pula sebagai tautan, sisipkan tag gambar di dalam tag hipertaut ( hyperlink ) <a></a> . Lihat contohnya di bawah ini:
    • <a href="http://www.urloflink.com><img src="http://urlofimage.com/image.gif"></a>
    Iklan

Tips

  • Pastikan URL yang Anda masukkan telah menyertakan format berkas gambarnya (.jpg, .gif, dsb).
  • Biasanya, Anda harus menggunakan gambar yang memiliki format berkas .gif, .jpeg, .jpg, atau .png. [7] Format berkas yang lain mungkin tidak akan ditampilkan dengan benar di semua peramban.
  • Simpan cadangan gambarnya di komputer, untuk berjaga-jaga.
  • Gambar GIF sangat bagus untuk logo atau kartun, sedangkan gambar JPEG sangat bagus untuk gambar yang kompleks seperti foto.
Iklan

Peringatan

  • Jangan melakukan " hotlink " dengan memasukkan URL milik situs web orang lain. Tindakan ini akan menghabiskan bandwidth di situs orang tersebut, tanpa membawa pengunjung ke lamannya. Selain merupakan etiket yang buruk, gambar yang dimasukkan dari hasil hotlink akan hilang jika situs yang digunakan sebagai tautan sudah tidak ada. Jika pemilik situs mengetahui perbuatan Anda, dia bahkan bisa mengganti gambar yang muncul di situs Anda. [8]
Iklan

wikiHow Terkait

Cara
Mengunduh Video Apapun dari Situs Web Manapun Secara Gratis
Cara
Mencari Tanggal Terbit Situs Web
Cara
Memperbaiki Masalah Akses ke Situs Web Tertentu
Cara
Mengunduh Gambar dari Google Maps
Cara
Mengetahui Akun Facebook Palsu
Cara
Meletakkan Pintasan Situs di Desktop
Cara
Melacak Alamat IP
Cara
Menemukan Nama Penulis Situs Web
Cara
Mengunduh Video Streaming
Cara
Mudah Mencari dan Menemukan Informasi Seseorang Menggunakan Gambar
Panduan Lengkap Character AI
Cara
Mengubah Tampilan Latar Belakang pada Zoom
Cara
Mengetahui Lokasi Saat Ini pada Google Maps
Cara
Menguji Koneksi (Ping) Alamat IP Lain
Iklan

Referensi

  1. ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
  2. ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
  3. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
  4. ↑ http://www.htmlcodetutorial.com/images/_IMG_WIDTH.html
  5. ↑ http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
  6. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
  7. ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
  8. ↑ http://www.webweaver.nu/html-tips/hotlinking.shtml

Tentang wikiHow ini

Bahasa lain
Halaman ini telah diakses sebanyak 73.740 kali.

Apakah artikel ini membantu Anda?

Iklan