Cara Mengatur Latar Belakang Di Situs Web

Daftar Isi:

Cara Mengatur Latar Belakang Di Situs Web
Cara Mengatur Latar Belakang Di Situs Web

Video: Cara Mengatur Latar Belakang Di Situs Web

Video: Cara Mengatur Latar Belakang Di Situs Web
Video: CSS Dasar - 6 - Background 2024, Desember
Anonim

Desain situs apa pun didasarkan pada gambar dan warna latar belakang, seperti rumah di atas fondasi. Jika Anda memiliki keinginan untuk mengganti fondasi khas sumber daya Internet Anda dengan sesuatu yang lebih individual, maka Anda harus mulai dengan pengembangan desain. Dan ketika sudah siap, bagian teknis murni akan tetap ada, yaitu mengganti desain lama dari latar belakang situs yang ditentukan dalam kode sumber halaman dengan yang baru. Ada beberapa cara untuk menerapkan ini dalam praktik.

Cara mengatur latar belakang di situs web
Cara mengatur latar belakang di situs web

instruksi

Langkah 1

Pertama, Anda perlu mencari tahu cara latar belakang diatur dalam versi situs saat ini. Untuk melakukan ini, buka kode HTML halaman. Anda dapat melakukan ini dengan editor teks sederhana dengan mengunduh file dari server terlebih dahulu. Atau Anda dapat menggunakan editor halaman sistem manajemen konten, jika Anda menggunakannya. Editor halaman tidak perlu mengunduh file, tetapi memodifikasinya langsung di server menggunakan browser sebagai antarmuka. Kode HTML (HyperText Markup Language) halaman yang Anda buka terdiri dari baris instruksi untuk browser. Mereka menggambarkan jenis, tampilan, dan lokasi masing-masing elemen halaman web. Instruksi ini biasanya disebut sebagai "tag". Urutan tag itu sendiri dalam kode halaman juga mematuhi aturan bahasa HTML - mereka dibagi menjadi beberapa blok, yang pertama harus berupa blok judul yang dimulai dengan tag dan diakhiri. Itu harus diikuti oleh blok yang lebih menarik minat Anda sekarang - isi dokumen. Ini terbatas pada tag dan. Di tag pembuka blok ini (), Anda dapat memasukkan informasi tentang latar belakang halaman. Informasi seperti itu di dalam tag disebut "atribut". Atribut tag body yang mengatur warna latar belakang dilambangkan sebagai bgcolor dan dalam kodenya mungkin terlihat seperti ini: Di sini kita mengatur warna latar belakang untuk halaman menjadi perak. Browser dapat mengenali beberapa warna dengan namanya, tetapi agar tidak salah, lebih baik menunjukkan kode heksadesimalnya. Versi ini dengan warna perak dalam ekspresi heksadesimal akan terlihat seperti ini: Jadi, Anda perlu menemukan tag yang dimulai dengan <body dalam kode halaman dan periksa apakah memiliki warna latar belakang. Jika demikian, ganti indikasi warna di dalamnya dengan versi baru Anda dan simpan perubahan ke halaman.

Langkah 2

Latar belakang dalam desain situs Anda saat ini tidak dapat diatur berdasarkan warna, tetapi oleh gambar. Atribut yang sesuai dari tag tubuh disebut latar belakang, dan dapat terlihat seperti ini dalam kode: Di sini, latar belakang adalah gambar bg.jpg

Langkah 3

Saat menjelaskan tampilan halaman dengan desain yang relatif kompleks, gunakan "cascading style sheets" - CSS (Cascading Style Sheets). Blok kode CSS dapat dimasukkan langsung ke dalam kode halaman atau terkandung dalam file eksternal dengan ekstensi "css". Anda perlu mencari tag deskripsi gaya yang dimulai dengan <style di bagian header kode halaman (antara tag dan). Jika berisi link ke file eksternal, akan terlihat seperti ini: @import "style.css"; Berikut ini link ke stylesheet bernama style.css. Anda perlu membuka file yang ditentukan untuk diedit. Dan jika tidak ada tautan, dan setelah tag <style pembuka ada instruksi gaya, maka Anda perlu mengeditnya di sini. Di kedua opsi, di antara deskripsi gaya, Anda perlu mencari yang terkait dengan isi dokumen (tubuh). Blok deskripsi ini mungkin terlihat seperti ini: body {

latar belakang-warna: Perak;

warna hitam;

} Di sini Anda perlu mengganti nilai parameter warna latar belakang dengan nilai warna baru Anda dan lebih baik dalam nilai heksadesimal yang sama. Opsi gambar latar belakang dalam instruksi CSS akan terlihat seperti ini: body {

latar belakang: # C0C0C0 url (img / bg.jpg) repeat-y;

warna hitam;

} Di sini tautan ke gambar serupa dengan yang dibahas di atas, dan # C0C0C0 sebelum tautan berarti bahwa ruang halaman yang tidak ditempati oleh gambar latar belakang akan memiliki latar belakang perak. "Ulangi-y" menunjukkan bahwa gambar latar belakang harus dikalikan sepanjang sumbu Y (vertikal)."Repeat-y" bisa diganti dengan "repeat-x" (replikasi horizontal) atau "no-repeat" (jangan ditiru). Jika Anda tidak menentukan pengulangan sama sekali, maka gambar latar belakang akan ditempatkan ke ruang latar belakang halaman ke segala arah.

Direkomendasikan: