Dalam HTML, gambar disisipkan menggunakan tag. img.
Tag img - kosong, ini berisi atribut dan tidak memiliki tag penutup.
Untuk menampilkan gambar pada halaman, gunakan atribut src. Src berasal dari sumber, yang berarti Sumber. Nilai atribut src adalah url gambar.
Baris di atas berarti bahwa gambar berada di direktori (folder) yang sama dengan file html itu sendiri yang merujuk ke gambar ini. Katakanlah Anda memiliki folder htmlyang berisi index.html dengan kode di atas dan gambar itu sendiri dengan nama image.jpg.
Dalam hal ini, ketika Anda membuka index.html di browser Anda akan melihat gambar ini. Jika Anda memilikinya di tempat lain (pada folder di atas atau di bawah), maka Anda akan melihat bidang putih atau persegi panjang kecil dengan palang merah (gagal memuat gambar).
| Perhatian! Segera belajar melacak dua hal: alamat yang benar dari gambar dan ejaan nama itu sendiri. Karena dengan kesalahan lalai dalam salah satu parameter ini, gambar TIDAK akan ditampilkan, dan Anda dapat menghabiskan sejumlah waktu dan saraf. |
Gambar tidak selalu berada di direktori (folder) yang sama dengan file itu sendiri, sehingga jalur resep akan dijelaskan lebih khusus nanti.
Atribut tag img
Selain src, tag img memiliki atribut lain yang bertanggung jawab untuk ukuran gambar yang ditampilkan, tanda tangannya, dan banyak lagi.
src - alamat gambar
lebar - lebar gambar
tinggi - Tinggi gambar
judul - tanda tangan yang ditampilkan saat Anda mengarahkan kursor ke gambar
alt - teks alternatif. Diperlukan untuk pencarian robot dan pengindeksan gambar
perbatasan - ketebalan batas gambar. 0 - tanpa batas, 1 - batas tertipis, dll.
| Semua atribut bersifat opsional. Minimum adalah src sehingga browser tahu dari mana mendapatkan gambar. |
Alamat gambar yang dimasukkan (contoh)
Umumnya gambar tidak disimpan dalam folder yang sama dengan dirinya sendiri file html. Untuk melakukan ini, folder dibuat di direktori yang sama gambar (atau img, rasanya dan warnanya). Dan semua gambar yang diperlukan sudah ditempatkan di dalamnya. Dalam hal penyimpanan terpisah, perlu meresepkan alamat yang berbeda untuk atribut src
Jika file tersebut berada di folder di atas, maka
Anda juga dapat menyisipkan gambar secara umum dari situs lain, tanpa mengunduhnya ke folder Anda. Untuk melakukan ini, Anda harus memiliki koneksi Internet yang stabil dan kira-kira kode berikut, di mana Anda memasukkan alamat gambar di Internet di alamat:
Gambar latar belakang HTML
Sebagai a gambar latar belakang file dengan ekstensi dapat muncul gif, jpg, jpeg dan png. Jika ukuran gambar lebih kecil dari jendela browser, gambar akan secara otomatis mengisi latar belakang yang tersisa. Masuk tubuh gunakan atribut latar belakangdi mana kita meresepkan path ke gambar
Cara membuat gambar sebagai latar belakang dalam html, kode, contoh, latar belakang, gambar.
Sebelum meletakkan gambar di latar belakang, Anda perlu mempertimbangkan bahwa, tergantung pada resolusi gambar, latar belakang akan menjadi layar penuh, atau hanya akan menempati sebagian kecil!
Gambar di latar belakang dapat dimasukkan ke dalam beberapa cara:
1. Masukkan kode ke halaman itu sendiri.
Untuk melihat ini, bagaimana tampilannya, kami akan membuat halaman baru untuk setiap opsi.
Gambar sebagai latar belakang halaman - HTML
Pertama, pertimbangkan metode pengaturan gambar latar belakang di situs menggunakan atribut latar belakang tag tubuh:
Seperti pada contoh di atas, selain gambar, disarankan untuk menunjukkan warna latar belakang (itu akan ditampilkan di situs ketika halaman dimuat), yang akan dikombinasikan dengan gambar latar belakang dan membuat kontras dengan teks di situs. Misalnya, jika Anda menggunakan warna putih teks pada situs, maka Anda harus menentukan warna latar belakang gelap dan mengatur gambar latar belakang gelap. Dalam hal ini, teks akan mudah dibaca.
Catatan: Disarankan agar Anda mengatur gambar latar belakang dan warna latar belakang tidak menggunakan HTML, tetapi menggunakan CSS. Dalam hal ini, kode akan valid dan lebih benar.
Gambar sebagai latar belakang halaman - CSS
Dalam CSS, warna latar belakang dan gambar latar belakang dapat diatur dengan satu properti. latar belakang:
Di sini menggunakan properti background-attachment latar belakang halaman sudah diperbaiki, dan menggunakan properti background-repeat pengulangan gambar horizontal diatur. Tetapi perlu mempertimbangkan bahwa gambar latar belakang harus "dijahit" di sepanjang tepi dengan baik.
Jika Anda ingin meregangkan gambar latar belakang ke ukuran penuh dari jendela browser, gunakan properti ukuran latar belakang: 100%,
Di pembuat situs Nubex, untuk situs apa pun Anda dapat menggunakan gambar besar sebagai latar belakang dan memperbaikinya.
