Menambah Imej Daripada URL – HTML

Menambah Imej Daripada Url Html



Dalam HTML, imej menjadikan laman web lebih menarik dan mencapai hasrat orang ramai. Ia membolehkan pembangun menyesuaikan halaman web mereka dengan imej yang berbeza. Selain itu, mereka boleh menambahkannya terus dari internet dengan menyalin URL imej yang dikehendaki dan kemudian menentukannya sebagai nilai ' src ” atribut di dalam teg imej. Selain itu, pembangun boleh menambah imej dengan bantuan sifat CSS yang dikenali sebagai “ imej latar belakang ”.

Siaran ini akan menerangkan secara ringkas kaedah untuk menambah imej daripada URL.

Bagaimana untuk Menambah Imej Daripada URL dalam HTML/CSS?

Dalam HTML/CSS, dua kaedah tersedia untuk menambah imej menggunakan URL, yang disenaraikan di bawah:







Kaedah 1: Tambah Imej dengan Menggunakan Elemen

' elemen ” ialah elemen kosong tunggal yang tidak mempunyai kandungan kanak-kanak dan teg penamat. ' src ” dan “ segala-galanya ” ialah dua atribut utama yang digunakan dalam teg “ ”.



Mari lihat arahan yang diberikan di bawah untuk menambah imej menggunakan elemen !



Langkah 1: Buat Bekas div

Pertama, buat bekas div dengan menggunakan '

” tag. Kemudian, masukkan “ kelas ” atribut dan berikan nama kepada kelas mengikut keinginan.





Langkah 2: Sisipkan Tajuk

Seterusnya, gunakan teg tajuk yang diperlukan daripada “

” kepada “
” tag. Sebagai contoh, kami akan menggunakan teg

dan menambah teks tertentu sebagai tajuk di dalam teg pembukaan dan penutup.


Langkah 3: Tambah Imej Menggunakan URL

Selepas itu, tambah ' ” dan masukkan atribut yang disenaraikan di bawah di dalam teg imej:



  • src ” atribut digunakan untuk menambah fail media. Untuk tujuan itu, lancarkan pelayar web yang anda inginkan dan salin URL imej yang dikehendaki.
  • Kemudian, tentukan URL sebagai nilai ' src ” atribut.
  • Seterusnya, “ segala-galanya ” digunakan untuk menambah nama untuk imej apabila ia tidak ditunjukkan atas sebab tertentu.
  • ketinggian ” sifat menentukan ketinggian elemen mengikut nilai yang diberikan.
  • lebar ' digunakan untuk menetapkan lebar elemen:
< div kelas = 'img-conatiner' >

< h2 > Tambah Imej 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' segala-galanya = 'Imej!' ketinggian = '400px' lebar = '300px' / >

< / div >

Mengikut output yang diberikan di bawah, imej yang ditentukan telah berjaya ditambahkan:



Kaedah 2: Tambah Imej Menggunakan CSS Properties dalam HTML

Pembangun juga boleh menambah imej daripada URL menggunakan CSS “ imej latar belakang ” CSS. untuk tujuan ini, ikuti langkah yang diberikan di bawah.

Langkah 1: Sisipkan Tajuk

Mula-mula, masukkan teks tajuk dengan bantuan teg pembuka dan penutup

.

Langkah 2: Cipta div Container

Seterusnya, buat bekas div dengan menggunakan tag

dan tambahkan atribut kelas dengan namanya:

> Tambah Imej Dengan URL >

= 'bekas img' > >

Langkah 3: Akses Bekas

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

Langkah 4: Tambah Imej Menggunakan Harta CSS 'imej latar belakang'.

Selepas itu, gunakan sifat CSS yang disenaraikan di bawah untuk menambah imej daripada URL di dalam kelas:

.img-container {

ketinggian : 400px ;

lebar : 250px ;

saiz latar belakang : mengandungi ;

Imej latar belakang : url ( https : //imej .pexels .com/photos/ 2260800 /pexels-photo- 2260800 .jpeg? auto = mampat&cs = tinysrgb&w = 1260 &h = 750 &dpr = satu )

}

Dalam kod yang disediakan di atas:

  • ketinggian sifat ” digunakan untuk menetapkan ketinggian elemen.
  • lebar ” digunakan untuk menentukan saiz lebar elemen.
  • saiz latar belakang ” digunakan untuk menetapkan saiz elemen latar belakang.
  • imej latar belakang sifat ” menambah imej di bahagian belakang elemen. Untuk tujuan yang sepadan ini, ' url() Fungsi ' digunakan untuk menambah imej dan menampal URL imej dalam fungsi ' () ”.

Pengeluaran

Anda telah mempelajari tentang kaedah yang berbeza untuk menambah imej daripada URL.

Kesimpulan

Untuk menambah imej daripada URL, pembangun boleh menggunakan ' ” tag. Kemudian, masukkan “ src ” dan tetapkan URL sebagai nilai “src”. Tambahan pula, pengguna boleh menambah imej daripada URL dengan menggunakan CSS “ imej latar belakang ” harta benda. Tulisan ini telah menyatakan kaedah untuk menambah imej daripada URL dalam HTML/CSS.