Cara sematkan (embed) gambar dari internet ke html website dan blog

Mempelajari cara memasukkan gambar di halaman web HTML adalah salah satu langkah penting dalam proses belajar menjadi developer web.

Dalam artikel ini, kita akan membahas cara mudah memasukkan gambar ke dalam halaman web HTML kamu dengan menggunakan link.

Langkah-langkah Memasukkan Gambar di HTML Menggunakan Link :

Siapkan Link Gambar

Pertama-tama, kamu harus memiliki link dari gambar yang ingin kamu masukkan ke dalam halaman HTML. Link ini biasanya berupa URL yang mengarah langsung ke lokasi gambar tersebut di internet. Kamu bisa mendapatkan link ini dengan cara mengupload gambar ke layanan hosting gambar, atau menggunakan gambar yang sudah ada di internet.

Gunakan Tag

Setelah mendapatkan URL dari gambar, kamu perlu menggunakan tag <img> di dalam kode HTML kamu. Tag ini digunakan untuk menampilkan gambar di halaman web. Contoh penggunaan tag tersebut adalah sebagai berikut:

<img src="(URL_GAMBAR)" />

sekalian seting posisi gambar:

<p style="text-align: center;"><img src="(URL_GAMBAR)" /></p>

Ubah teks “URL_GAMBAR” tersebut dengan URL dari gambar yang ingin kamu tampilkan. Pastikan URL tersebut telah tepat dan lengkap agar gambar bisa ditampilkan dengan baik.

Menambahkan Atribut Alt

Selain attribut -src- yang berguna untuk mendefinisikan sumber gambar, tag <img> juga memiliki attribut lain yang bernama -alt-. Atribut ini digunakan untuk memberikan deskripsi alternatif jika gambar tidak dapat ditampilkan. Contoh penggunaan:

<img src="(URL_GAMBAR)" alt="Deskripsi Gambar" />

Ganti teks “Deskripsi Gambar” dengan deskripsi yang cocok untuk gambarmu. Sebagai contoh, jika kamu memasukkan gambar dengan URL https://contoh.com/gambar.jpg dan deskripsi “Gambar Contoh”, kode HTML yang tepat adalah:

<img src="https://contoh.com/gambar.jpg" alt="Gambar Contoh" />

Dengan kode tersebut, gambar akan ditampilkan di halaman webmu. Jika karena suatu alasan (seperti koneksi internet yang buruk atau URL gambar yang salah), gambar tidak bisa ditampilkan, deskripsi “Gambar Contoh” akan ditampilkan sebagai pengganti.

Atribut width dan height

Atribut width dan height adalah atribut yang digunakan untuk menentukan lebar dan tinggi dari gambar. Contoh:

<img src="(URL_GAMBAR)" width="200" height="150" alt="Sawah"/>

Satuan yang digunakan untuk nilai width dan height adalah piksel (px). Jika kita memberikan nilai 200, artinya.. kita memberikan nilai 200px.

Atribut width dan height juga tidak wajib. Tapi baiknya ditambahkan agar ukuran gambar konsisten.

Atribut style

Atribut style merupakan atribut untuk menambahkan style CSS pada sebuah elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek tertentu. Contoh:

<img src="(URL_GAMBAR)" style="width: 160px;border: 3px solid red;" />

<img src="(URL_GAMBAR)" style="width: 160px;border-radius: 10px;" />

<img src="(URL_GAMBAR)" style="width: 100px;height: 100px;border-radius: 100%;" />

Gambar pertama kita berikan style garis (border) dengan ukuran 3px, jenis solid, dan warnanya adalah merah. Lalu gambar kedua, kita berikan style border-radius untuk menciptakan lengkungan pada pojok gambar. Pada gambar ketiga, kita berikan nilai 100% pada border-radius yang akan menciptakan lingkaran.

Membuat Gambar Background

Sebenarnya ini sudah masuk ke dalam pembahasan tentang CSS, tapi tidak apa-apa kita bahas di sini.

Agar gambar bisa ditampilkan sebagai background, maka kita harus menggunakan CSS dengan atribut background-image lalu diisi dengan URL dari gambar. Contoh:

<body style="background-image: url((URL_GAMBAR));">

Membuat Link dengan Gambar

Cara membuat link dengan gambar adalah dengan menggabungkan tag <a> dan tag <img>. Tag <a> harus mengapit tag <img>. Contoh open on tab:

<a href="(LINK URL TUJUAN)"><img src="(URL_GAMBAR)" width="160"/></a>

Contoh open a new tab:

<a href="(LINK URL TUJUAN)" target="_blank"><img src="(URL_GAMBAR)" width="160"/></a>

Membuat Link pada Bagian/Area Gambar tertentu

Link dapat kita buat pada bagian tertentu pada gambar dengan menggunakan tag <map> dan <area>. Contoh:

-----

<p>

</map>

</p>

-----

Membuat gambar rotasi

Gambar di blogger maupun di blog lain dapat di rotasi tanpa edit rotasi gambar. Cukup dengan gambar asliny akemudian di tambahkan kode CSS sehingga gambar dapat berotasi secara otomatis. Pada tampilan "< > tampilan HTML" sertakan kode sumber berikut:

-----

<style>

.mumetAnjir30 {rotate: 30deg;}

.mumetAnjir-45 {rotate: -45deg;}

.mumetAnjir-90 {rotate: -90deg;}

.mumetAnjir180 {rotate: 180deg;}

</style>

</p>

-----

Pada kalimat kode (mumetAnjir180) bisa kalian ganti dengan kalimat bebas yang penting bisa nyambung ke kode sumber yang ada di dalam <style>. Jumlah opsi rotasinya bebas tanpa batas. Berikut contoh hasil nya:

contoh kode sumber gambar:

https://images-cdn.ispot.tv/ad/72IL/default-large.jpg

Normal..

Rotasi 30 derajat..

Rotasi -45 derajat..

Rotasi 120 derajat..

Rotasi 180 derajat..

Catatan tambahan:

pada dasboad blogger gak bakal kelihatan rotasinya, maka dari itu lihat hasil postingan nya pada hasil publish nya.
perputaran gambar dapat menutupi teks postingan maka dari itu beri jarak antar paragraf yang lebih banyak.
putaran sudut mengacu pada putaran searah jarum jam.

Membuat gambar flip / mirroring

Gambar di blogger maupun di blog lain dapat di flip/mirroring tanpa edit flip gambar. Cukup dengan gambar aslinya kemudian di tambahkan kode CSS sehingga gambar dapat bercermin secara otomatis dari sumbu X dan sumbu Y. Pada tampilan "< > tampilan HTML" sertakan kode sumber berikut:

-----

<style>

.flipAnjirHorisontal {transform: scaleX(-1);}

.flipAnjirVertikal {transform: scaleY(-1);}

</style>

</p>

-----

Pada kalimat kode (flipAnjirHorisontal) bisa kalian ganti dengan kalimat bebas yang penting bisa nyambung ke kode sumber yang ada di dalam <style>. Jumlah opsi flip nya bebas tanpa batas. Berikut contoh hasil nya:

Flip Horisontal..

Flip Vertikal..

Kesimpulan

Memasukkan gambar ke dalam halaman web HTML kamu dengan menggunakan link adalah proses yang mudah dan cepat. Cukup temukan URL gambar yang kamu suka, lalu gunakan tag <img> untuk menampilkan gambar tersebut di situs kamu. Selalu ingat untuk menambahkan attribut -alt- sebagai deskripsi alternatif jika gambar tidak bisa ditampilkan.

Anda tertarik belajar dasar html? silahkan klik di sini..

Semoga bermanfaat'ah..

😀

🙏

bobby84arsitek

Cari Blog Ini