Atribut digunakan untuk menampilkan gambar pada halaman src. Src berasal dari sumber yang artinya Sumber. Nilai dari atribut src adalah url gambar.

Baris di atas berarti gambar tersebut berada di direktori (folder) yang sama dengan file html itu sendiri yang tertaut ke gambar tersebut. Katakanlah Anda memiliki sebuah folder html, yang berisi indeks.html dengan kode di atas dan gambar itu sendiri dengan judulnya gambar.jpg.

Dalam hal ini, saat membuka indeks.html Anda akan melihat gambar ini di browser Anda. Jika Anda memilikinya di tempat lain (folder lebih tinggi atau lebih rendah), Anda akan melihat bidang putih atau persegi panjang kecil dengan tanda silang merah (gambar tidak dapat dimuat).

atribut tag img

src- alamat gambar
lebar- lebar gambar
tinggi- tinggi gambar
judul- tanda tangan yang muncul saat Anda mengarahkan kursor ke gambar
alternatif- teks alternatif. Dibutuhkan untuk robot pencarian dan pengindeksan gambar
berbatasan- ketebalan batas gambar. 0 - tanpa batas, 1 - batas tertipis, dll.

Alamat gambar yang disisipkan (contoh)

Kalau filenya ada di folder di atas, ya

Anda juga dapat menyisipkan gambar 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 dalam HTML

Saat menyiapkan situs web apa pun, selain fungsionalitas, desain juga sangat penting. Inilah yang menentukan gaya dan desain perusahaan atau orang tertentu yang membuat situs web tersebut. Menyesuaikan warna latar belakang dan gambar sangatlah mudah dengan mengikuti petunjuk di artikel ini.

• masukkan baris:

Periksa halaman web Anda. Anda akan melihat bahwa latar belakang telah diganti dengan teks Anda.

• background-repeat : “Nilai.” Opsi untuk nilai Anda dapat berupa: “repeat-x” – mengulangi gambar latar belakang Anda secara horizontal dan vertikal. “repeat-y” – pengulangan hanya secara vertikal. “no-repeat” – gambar dibekukan di tempatnya dan tidak terulang. “spasi” – seluruh halaman akan diisi dengan jumlah salinan gambar maksimum, yang terluar akan dipotong. “bulat” – opsi yang sama, tetapi tepi gambar akan diskalakan dengan hati-hati;
• lampiran latar belakang: “Nilai.” Jika Anda mengganti tag “scroll” dan bukan kata Value, gambar akan bergulir bersama situsnya. “diperbaiki” – latar belakang tetap tidak berubah saat menggulir;
• ukuran latar belakang: Nilai Nilai2. Di sini nilainya harus bernilai piksel. Misalnya: 100px 200px. Selain piksel, nilai persentase juga diterima. Ini adalah opsi untuk mengisi halaman dengan gambar. Selain angka, Anda dapat memasukkan dua parameter: “contain” – mengisi halaman dengan gambar sepanjang sisi panjangnya dan “cover” – mengisi halaman dengan gambar sepanjang lebarnya.

Setelah Anda mengetahui dasar-dasar mengisi halaman dengan latar belakang HTML, Anda siap membuat situs web pertama Anda.

Hari baik untuk semua orang yang ingin belajar dan mempelajari sesuatu yang baru! Pernahkah Anda memperhatikan tampilan website yang dalam perkembangannya pembuatnya terlalu malas untuk mendesain background halamannya? Dan saya melakukannya. Kelihatannya buruk. Seringkali, karena kurangnya pembagian yang biasa antara berbagai jenis informasi, informasi tersebut menjadi tercampur dan tidak ada keinginan untuk melihat lebih jauh pada sumber daya web tersebut.

Untuk mencegah bencana seperti itu terjadi pada proyek Anda, saya memutuskan untuk menulis artikel dengan topik: “Cara membuat latar belakang halaman dalam html.” Setelah membaca publikasinya, Anda akan mempelajari alat apa yang dapat Anda gunakan untuk mengatur desain latar belakang, cara memperbaiki atau mengubah latar belakang, dan banyak lagi yang akan membantu membuat situs Anda menarik. Sekarang mari kita mulai!

Alat dasar untuk mengatur latar belakang halaman web

Untuk mengatur gambar latar belakang, pengembang bahasa web menyediakan atribut latar belakang. Ini tersedia dalam html dan css.

Dalam bahasa markup, ini adalah atribut dari tag body, dan dalam style sheet, ini adalah properti universal yang memungkinkan Anda mengatur hingga 5 karakteristik latar belakang secara bersamaan. Background merupakan elemen yang cukup fleksibel yang dapat digunakan untuk mengatur background berupa satu warna, gambar berwarna, atau bahkan animasi.

Nah, untuk mengatur gambar background melalui unit html cukup tulis kode berikut: ... dan alih-alih kata "alamat file", masukkan jalur ke gambar.

Namun, harap diperhatikan! Jika Anda ingin melihat kanvas satu warna sebagai latar belakang, ditentukan oleh nilai dari palet warna, maka ini dilakukan dengan menggunakan atribut bgcolor.

Misalnya, ..., kami telah menetapkan latar belakang hitam untuk situs kami.

Warna dalam css dan html ditentukan dengan kata bahasa Inggris (misalnya, merah) atau kode khusus, yang terdiri dari tanda # dan enam karakter setelahnya (misalnya, #FFDAB9).

Saat Anda mengetikkan opsi kedua dalam perangkat lunak khusus untuk pengembang, palet akan secara otomatis muncul di depan Anda. Jika Anda baru mulai mempelajari bahasa web ini, Anda dapat mencari kode warna di Internet.

Latar belakang sebagai properti dalam cascading style sheet

Itu diatur baik dalam file terpisah dengan gaya css, atau dalam sebuah elemen

Pada catatan ini kita dapat menyimpulkan pekerjaan kita. Bergabunglah dengan barisan pelanggan setia saya, ajukan pertanyaan jika ada yang kurang jelas, dan jangan serakah dengan link ke blog saya, tapi bagikan ke teman-teman Anda. Saya berharap Anda mendapatkan pengalaman belajar yang menyenangkan. Sampai jumpa!

Browser modern memungkinkan Anda menambahkan gambar latar belakang dalam jumlah berapa pun ke suatu elemen, mencantumkan parameter setiap latar belakang yang dipisahkan dengan koma. Cukup menggunakan properti latar belakang universal dan menentukan satu latar belakang terlebih dahulu dan yang kedua dipisahkan dengan koma.

Bagaimana cara meregangkan latar belakang hingga lebar penuh jendela?

Untuk menskalakan latar belakang, gunakan properti background-size; atur nilainya menjadi 100%, maka latar belakang akan menempati seluruh lebar jendela browser. Untuk browser versi lama, Anda harus menggunakan properti tertentu dengan awalan, seperti yang ditunjukkan pada contoh 1.

Bagaimana cara menambahkan gambar latar belakang ke halaman web?

Untuk menambahkan gambar latar belakang ke halaman web, atur jalur ke gambar dalam nilai url properti gaya latar belakang, yang kemudian ditambahkan ke pemilih isi.

Apakah mungkin membuat latar belakang animasi?

Animasi adalah teknik yang cukup ampuh yang dapat menghidupkan dokumen apa pun, sehingga tidak mengherankan jika teknologi Flash, yang menambahkan kartun interaktif ke halaman web, menjadi sangat populer. Format grafik GIF juga mendukung animasi sederhana dengan mengubah bingkai secara berurutan. Jadi, dengan menggunakan gambar dalam format ini, dimungkinkan untuk menganimasikan tidak hanya gambar individual, tetapi juga latar belakang halaman web atau elemen tertentu.

Pertama, Anda perlu membuat gambar animasi dalam format GIF, untuk itu Anda dapat menggunakan Adobe Photoshop atau program lain yang sesuai untuk tujuan ini. Ada juga perpustakaan file animasi siap pakai yang dapat digunakan sebagai gambar latar belakang. Selanjutnya, gambar ditambahkan sebagai latar belakang menggunakan properti gaya latar belakang, seperti yang ditunjukkan pada Contoh 1.

Bagaimana cara menempatkan gambar latar belakang di pojok kanan bawah halaman?

Untuk mengontrol posisi gambar latar belakang pada halaman, properti gaya posisi latar belakang digunakan; properti ini secara bersamaan mengatur koordinat horizontal dan vertikal gambar. Untuk membatalkan pengulangan gambar latar belakang, gunakan properti background-position dengan nilai no-repeat .

Bagaimana cara mencegah pengulangan latar belakang?

Secara default, gambar latar belakang diulang secara horizontal dan vertikal, membentuk mosaik di seluruh bidang halaman web. Namun, perilaku latar belakang ini tidak selalu diperlukan, terutama saat menempatkan satu gambar, jadi menambahkan nilai no-repeat ke properti gaya latar belakang akan membantu.

Bagaimana saya bisa membuat latar belakang hanya berulang secara vertikal?

Pengulangan latar belakang biasanya diperlukan untuk membuat garis dekoratif atau gradien yang terikat pada ketinggian elemen halaman web atau jendela. Dalam kasus seperti itu, pengulangan latar belakang secara vertikal akan menghasilkan gambar yang konsisten, berapa pun ukuran elemennya. Hanya pada awalnya Anda harus memastikan bahwa gambar latar belakang diulang tanpa jahitan.

Halo semuanya! Pelayan Anda yang rendah hati menghubungi Anda dengan sebagian materi yang berguna dan praktis tentang topik cara mengatur latar belakang untuk sebuah situs web. Ini adalah permulaan tata letak html dan di sini saya akan menunjukkan dengan jelas dengan contoh bagaimana Anda dapat membuat latar belakang yang indah untuk sebuah situs yang pasti akan menarik pengguna Internet dan menambah orisinalitas.

Jika Anda perhatikan, sebagian besar pebisnis online menggunakan latar belakang unik pada halaman penjualan dan langganan mereka. Hari ini kita akan menganalisis komponen teknis dari proses ini.

Jadi, pertama-tama kita perlu, tentu saja, sebuah gambar. Ada satu situs yang sangat bagus di Internet asing tempat Anda dapat mengunduh berbagai macam gambar untuk latar belakang situs web. Jumlah mereka sangat banyak di sana. Situs tersebut bernama Pola Halus.

Ini muncul pertama kali dalam daftar mesin pencari Google, jadi saya merekomendasikannya untuk bekerja. Anda juga dapat menemukan sejumlah besar situs lain jika Anda mengetik di mesin pencari sesuatu seperti “pola gambar latar belakang”, “unduh gambar latar belakang untuk situs” dan seterusnya.

Jika Anda tidak memiliki masalah dengan bahasa Inggris, Anda akan memahaminya tanpa kesulitan.

Pada artikel ini saya telah memilih topik dan disebut tweed. Anda dapat mengunduhnya.

Ini adalah tampilannya dalam versi kecil di situs web

Pertama, buat dokumen baru di program

Dan sebelum mengeditnya, pastikan untuk menyimpannya dengan nama, misalnya indeks.html dan membuat folder di komputer, misalnya Anda dapat membuat folder “Situs saya” dan meletakkan file indeks kita (index.html) di dalamnya. Sebaiknya buat folder dalam bahasa Inggris agar browser tidak bingung dan menampilkan situs secara tidak benar.

Selain itu, di folder utama "situs saya" Anda perlu membuat dua subfolder lagi, di satu folder kita akan menempatkan semua gambar kita dan itu akan disebut "gambar", dan yang lainnya akan kita beri nama "CSS" (gaya berjenjang lembar) dan letakkan file di sana gaya.css

Sekarang kita dapat mengerjakan dokumen kita. Langkah selanjutnya adalah memasukkan kode HTML kosong, yang disebut kerangka utama tempat semuanya dimulai. Anda dapat mendownloadnya secara langsung. Selanjutnya, kami akan menyalin semuanya dari file ini dan mentransfernya ke file program kami. Hasil akhirnya akan seperti berikut

Di sebelah nama file Anda akan melihat floppy disk berwarna merah. Jadi jika berwarna merah berarti file belum disimpan, pastikan untuk mengklik tombol simpan agar floppy disk berubah menjadi biru.

Pada tag judul Anda dapat mengubah judul dokumen, misalnya Anda dapat menjadikannya “Halaman web pertama saya”. Dan pastikan halaman Anda disimpan dalam pengkodean UTF-8

Sebaliknya, jika ada pengkodean yang berbeda, misalnya windows-1251, maka teks dokumen di browser akan ditampilkan dalam hieroglif. Anda dapat mengubah pengkodean di bagian “Encodings – Encode in Utf-8 (tanpa BOM)” pada toolbar program.

Dan jangan lupa untuk menyimpan setiap tindakan yang kita lakukan.

Sekarang mari kita mulai membuat latar belakang di dokumen kita. Saya akan segera mengatakan bahwa semua tindakan kita pada desain halaman web akan dilakukan menggunakan cascading style sheet yang disebut CSS, yaitu, kita akan membuat bingkai dalam html, dan kita akan membawanya ke gaya dan tampilan yang indah menggunakan CSS.

Dengan cara ini Anda akan mengajari diri Anda sendiri urutan tindakan yang benar. Anda tidak boleh menangani gaya secara langsung di dokumen HTML; lebih baik meletakkannya di dokumen terpisah.

Untuk melakukan ini, dalam program Notepad++ kami, kami akan membuat file lain dan menyebutnya Style.css dan menyimpannya di folder css baru, yang akan ditempatkan di folder bersama “Situs saya”

Besar! Agar browser kita dapat menampilkan halaman dengan benar, kita perlu menghubungkan style sheet ke dokumen html kita. Begini cara melakukannya

Kita langsung masuk ke seluruh baris di atas. Dengan garis ini kita menghubungkan style sheet kita.
Sekarang kita akan menentukan gambar latar belakang untuk tag tubuh kita melalui style sheet. Untuk melakukan ini, kita membuat struktur berikut di dokumen style.css (ambil saja dan tulis di kode program)

Mari saya jelaskan sedikit di sini. Atribut background memiliki banyak nilai, salah satunya adalah background-repeat, yang bertanggung jawab untuk meregangkan gambar latar belakang kita untuk dokumen web.

LATAR BELAKANG-ULANG:

REPEAT //(meregangkan secara horizontal dan vertikal) REPEAT-X // (meregangkan secara horizontal saja) REPEAT-Y //(meregangkan secara vertikal saja) NO-REPEAT //(jangan mengulang gambar latar belakang)

Dalam kasus kami, kami mereplikasi gambar kecil kami secara vertikal dan horizontal. Hasilnya, seluruh halaman terisi dengan gambar kita. Ini tampilannya di browser:

Saya juga membuat pilihan situs khusus untuk Anda di mana Anda dapat mengunduh latar belakang yang indah untuk situs tersebut