Menambahkan Gambar Dari URL – HTML

Menambahkan Gambar Dari Url Html



Dalam HTML, gambar membuat situs web lebih menarik dan menarik perhatian orang. Ini memungkinkan pengembang untuk menyesuaikan halaman web mereka dengan gambar yang berbeda. Selain itu, mereka dapat menambahkannya langsung dari internet dengan menyalin URL dari gambar yang diinginkan dan kemudian menentukannya sebagai nilai dari “ src ” di dalam tag gambar. Selain itu, pengembang dapat menambahkan gambar dengan bantuan properti CSS yang dikenal sebagai “ gambar latar belakang ”.

Posting ini akan menjelaskan secara singkat metode untuk menambahkan gambar dari URL.

Bagaimana Cara Menambahkan Gambar Dari URL di HTML/CSS?

Dalam HTML/CSS, tersedia dua metode untuk menambahkan gambar menggunakan URL, yang tercantum di bawah ini:







Metode 1: Tambahkan Gambar dengan Menggunakan Elemen

” elemen adalah elemen batal tunggal yang tidak memiliki konten anak dan tag penutup. “ src ' dan ' semuanya ” adalah dua atribut utama yang digunakan di dalam tag “ ”.



Mari kita lihat petunjuk yang diberikan di bawah ini untuk menambahkan gambar menggunakan elemen !



Langkah 1: Buat Wadah div

Pertama, buat wadah div dengan menggunakan “

” tag. Kemudian, masukkan “ kelas ” atribut dan berikan nama ke kelas sesuai keinginan.





Langkah 2: Sisipkan Tajuk

Selanjutnya, gunakan tag tajuk yang diperlukan dari “

' ke '
” tag. Misalnya, kita akan menggunakan tag

dan menambahkan teks tertentu sebagai heading di dalam tag pembuka dan penutup.


Langkah 3: Tambahkan Gambar Menggunakan URL

Setelah itu, tambahkan “ ” dan sisipkan atribut yang tercantum di bawah ini di dalam tag gambar:



  • src ” atribut digunakan untuk menambahkan file media. Untuk tujuan itu, luncurkan browser web yang Anda inginkan dan salin URL gambar yang diinginkan.
  • Kemudian, tentukan URL sebagai nilai dari “ src ” atribut.
  • Lanjut, ' semuanya ” digunakan untuk menambahkan nama gambar saat tidak ditampilkan karena alasan tertentu.
  • tinggi ” properti menentukan tinggi elemen sesuai dengan nilai yang diberikan.
  • lebar ” digunakan untuk mengatur lebar elemen:
< div kelas = 'img-container' >

< h2 > Tambahkan Gambar Dengan URL < / h2 >

< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' semuanya = 'Gambar!' tinggi = '400px' lebar = '300px' / >

< / div >

Menurut output yang diberikan di bawah ini, gambar yang ditentukan telah berhasil ditambahkan:



Metode 2: Menambahkan Gambar Menggunakan Properti CSS di HTML

Pengembang juga dapat menambahkan gambar dari URL menggunakan CSS “ gambar latar belakang ” CSS. untuk tujuan ini, ikuti langkah-langkah yang diberikan di bawah ini.

Langkah 1: Sisipkan Tajuk

Pertama, sisipkan teks heading dengan bantuan tag pembuka dan penutup

.

Langkah 2: Buat Kontainer div

Selanjutnya, buat wadah div dengan menggunakan tag

dan tambahkan atribut kelas dengan namanya:

> Tambahkan Gambar Dengan URL >

= 'wadah-img' > >

Langkah 3: Akses Kontainer

Sekarang, akses kelas melalui pemilih titik “ . ” dan nama kelas yang telah dibuat sebelumnya.

Langkah 4: Tambahkan Gambar Menggunakan Properti CSS 'background-image'.

Setelah itu, terapkan properti CSS yang tercantum di bawah ini untuk menambahkan gambar dari URL di dalam kelas:

.img-wadah {

tinggi : 400px ;

lebar : 250px ;

background-size : berisi ;

Gambar latar belakang : url ( https : //gambar-gambar .pexels .com/foto/ 2260800 /pexels-foto- 2260800 .jpeg? mobil = kompres & cs = tinysrgb&w = 1260 &h = 750 &dpr = satu )

}

Dalam kode yang disediakan di atas:

  • tinggi ” properti digunakan untuk mengatur ketinggian elemen.
  • lebar ” digunakan untuk menentukan ukuran lebar elemen.
  • background-size ” digunakan untuk mengatur ukuran elemen latar belakang.
  • gambar latar belakang ” properti menambahkan gambar di bagian belakang elemen. Untuk tujuan yang sesuai ini, “ url() ” digunakan untuk menambahkan gambar dan menempelkan URL gambar di fungsi “ () ”.

Keluaran

Anda telah mempelajari berbagai metode untuk menambahkan gambar dari URL.

Kesimpulan

Untuk menambahkan gambar dari URL, pengembang dapat menggunakan tombol “ ” tag. Kemudian, masukkan “ src ” dan tetapkan URL sebagai nilai 'src'. Selanjutnya, pengguna dapat menambahkan gambar dari URL dengan menggunakan CSS “ gambar latar belakang ' Properti. Tulisan ini telah menyatakan metode untuk menambahkan gambar dari URL dalam HTML/CSS.