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: Menambahkan Gambar Menggunakan Elemen di HTML
- Metode 2: Menambahkan Gambar Menggunakan Properti CSS di HTML
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 “ Selanjutnya, gunakan tag tajuk yang diperlukan dari “ ' ke ' ” tag. Misalnya, kita akan menggunakan tag Setelah itu, tambahkan “ ” dan sisipkan atribut yang tercantum di bawah ini di dalam tag gambar: Menurut output yang diberikan di bawah ini, gambar yang ditentukan telah berhasil ditambahkan: Pengembang juga dapat menambahkan gambar dari URL menggunakan CSS “ gambar latar belakang ” CSS. untuk tujuan ini, ikuti langkah-langkah yang diberikan di bawah ini. Pertama, sisipkan teks heading dengan bantuan tag pembuka dan penutup Selanjutnya, buat wadah div dengan menggunakan tag Sekarang, akses kelas melalui pemilih titik “ . ” dan nama kelas yang telah dibuat sebelumnya. Setelah itu, terapkan properti CSS yang tercantum di bawah ini untuk menambahkan gambar dari URL di dalam kelas: Dalam kode yang disediakan di atas: Keluaran Anda telah mempelajari berbagai metode untuk menambahkan gambar dari URL. 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.
Langkah 2: Sisipkan Tajuk
dan menambahkan teks tertentu sebagai heading di dalam tag pembuka dan penutup.
Langkah 3: Tambahkan Gambar Menggunakan URL
< 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 >
Metode 2: Menambahkan Gambar Menggunakan Properti CSS di HTML
Langkah 1: Sisipkan Tajuk
.
Langkah 2: Buat Kontainer div
> Tambahkan Gambar Dengan URL
>
Langkah 3: Akses Kontainer
Langkah 4: Tambahkan Gambar Menggunakan Properti CSS 'background-image'.
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 )
}
Kesimpulan