Gambar adalah bagian yang sangat penting dari sebuah halaman web karena meningkatkan tampilan halaman web dan meningkatkan interaksi pelanggan. USP beberapa situs web adalah cara mereka mengatur gambar yang berbeda di halaman web mereka & menambahkan rasa ke dalamnya. Di dalam Artikel gambar, kita akan memahami cara menyematkan gambar di halaman web menggunakan HTML dengan urutan sebagai berikut:
Cara Menambahkan Gambar Dalam HTML
Untuk menyematkan gambar di halaman web HTML memberi Anda menandai. Hal penting lainnya yang perlu diingat adalah,
tidak memiliki tag penutup. scr Atribut digunakan untuk menentukan jalur gambar, yang dapat berupa url atau jalur gambar dari sistem / server. Mari kita mulai dengan sintaks dasar gambar embedding di halaman web menggunakan HTML.
Sintaksis
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Kode sampel
Gambar HTML Menyematkan Gambar di Halaman Web
Mirip dengan tag lain, ada berbagai atribut yang terkait dengan menandai. Mari kita lihat masing-masing satu per satu, pahami kebutuhan mereka & cara menggunakannya.
Tag Gambar HTML
- Alt Atribut
Atribut alt adalah teks alternatif untuk gambar. Alasan mengapa atribut alt diperkenalkan adalah jika karena alasan apapun gambar tidak dapat dimuat maka teks alternatif akan muncul memberikan gambaran tentang gambar. Alasan gambar tidak dimuat mungkin karena koneksi internet yang lambat atau gambar tidak berada di sumber yang diberikan, dll.
Jika gambar berada di dalam folder yang sama dengan file HTML, Anda dapat menentukan nama file secara langsung. Jika tidak, Anda harus memberikan jalur absolut dari file gambar tersebut.
Nilai atribut alt harus mendeskripsikan gambar.
Contoh
Gambar HTML Menyematkan Gambar di Halaman Web
belajar ssis langkah demi langkah
- Lebar dan Tinggi Gambar
Atribut gaya digunakan untuk mengatur tinggi & lebar gambar. Dalam atribut gaya, Anda menentukan gaya CSS.
Gambar HTML Menyematkan Gambar di Halaman Web
Beberapa poin penting saat menyematkan gambar di halaman web menggunakan HTML adalah:
- Atribut lebar dan tinggi ditentukan dalam piksel.
- Anda juga dapat menentukan lebar dan tinggi gambar dalam persentase. Ini akan mempertimbangkan persentase menurut keseluruhan halaman web.
- Jika Anda hanya menentukan salah satunya, maka setelan lainnya akan disesuaikan.
- Menyematkan Gambar menggunakan URL
HTML juga memberi Anda fleksibilitas di mana Anda dapat memilih gambar dari server lain hanya dengan menentukan URL. Anda dapat menggunakan server terpisah untuk menghosting gambar & kemudian menyematkan gambar tersebut menggunakan URL.
Gambar HTML Menyematkan Gambar di Halaman Web
- Gambar sebagai Tautan
Anda juga dapat menggunakan gambar sebagai link di mana pengguna dapat mengklik gambar tersebut dan membuka halaman web baru. Untuk melakukannya, Anda hanya perlu meletakkan file hari masuk menandai.
Gambar HTML Menyematkan Gambar di Halaman Web
- Gambar Mengambang
Anda juga dapat menyesuaikan perataan gambar menggunakan properti float CSS. Semua properti CSS harus ditentukan di atribut style.
Gambar HTML
- Peta Gambar
Ini adalah salah satu fitur penting yang disediakan oleh HTML. tag membantu dalam mendefinisikan peta gambar. Anda pasti bertanya-tanya apa itu peta gambar. Gambar-peta adalah gambar dengan area yang dapat diklik
Gambar HTML
- Gambar latar belakang
Anda juga dapat menambahkan gambar latar belakang di halaman web. Anda hanya perlu menggunakan properti CSS yaitu gambar latar belakang di tag gaya dan menambahkannya ke elemen HTML.
apa arti __init__ dengan python
Gambar HTMLGambar latar belakang
Elemen BODY
Dengan ini kita sampai pada akhir dari Blog Gambar HTML ini.Sekarang setelah menjalankan cuplikan di atas Anda akan mengerti cara memasukkan gambar dalam HTML. Semoga blog ini informatif dan menjadi nilai tambah bagi Anda.
Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini termasuk pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar blog 'Gambar HTML' dan kami akan menghubungi Anda kembali.