Cara membuat background 2 warna di html

Background berfungsi sebagai gambar, warna dan latar belakang. Penggunaan background yang tepat dapat menarik minat seseorang ketika memandang gambar atau desain tersebut. Dalam hal ini yang kita bahas seputar dunia desain.

Table of Contents Show

Cara Membuat Background 2 Warna di Canva
#1. Menentukan Ukuran Desain
#2. Membuat Background 2 Warna
#3. Menyimpan Desain sebagai PNG
Cara Mengubah Background HTML
1. mengubah warna background HTML
2. Mengubah Background HTML dengan Gambar
Bagaimana cara menambahkan warna latar belakang dalam HTML?
Bagaimana cara memberi warna pada background?
Perintah apa yang diberikan untuk menambahkan background warna?
Bagaimanakah cara mengubah warna background sebuah section pada website?

Oleh karena itu kombinasi dari berbagai warna menjadi salah satu alternatif untuk membuat tampilan background lebih menarik. Di Canva terdapat berbagai jenis background yang dapat digunakan kapan saja.

Akan tetapi tidak semua background yang tersedia dapat kita ubah warnanya sesuai kebutuhan kita. Oleh karena itu pada tutorial ini kita akan menggunakan sebuah elemen untuk membuat background dengan 2, 3, 4 warna. Tinggal disesuaikan saja.

Cara Membuat Background 2 Warna di Canva

Adapun langkah membuat background 2 warna di Canva, kamu dapat mengikuti panduan berikut:

#1. Menentukan Ukuran Desain

1. Jalankan aplikasi Canva di laptop atau smartphone kamu lalu buat desain baru dengan ukuran 1080 x 1080 pixel. Ini opsional ya, kamu dapat menggunakan ukuran lainnya sesuai kebutuhan.

#2. Membuat Background 2 Warna

2. Setelah itu kita akan memanfaatkan elemen gradasi sebagai background pada desain. Ada banyak elemen gradasi di canva, namun yang kita pilih adalah elemen gradasi yang hanya memiliki dua jenis warna.

Pilih tombol + di sebelah bawah desain lalu buka menu Elemen. Kemudian pada kolom pencarian ketik kata kunci “Gradient” lalu pilih opsi Grafis. Di sini terdapat banyak elemen gradasi, silahkan pilih yang memiliki 2 warna saja.

3. Setelah elemen ditambahkan ke dalam desain, ubah ukuran elemen tersebut sehingga menutupi semua area pada halaman. Kamu cukup menggeser lingkaran yang terdapat pada setiap sudutnya untuk mengubah ukuran elemen tersebut.

4. Setelah itu kamu dapat membuat desain di atas elemen gradasi tersebut. Jika diperlukan kamu dapat mengubah warna elemen menyesuaikan dengan tema desain yang kamu buat. Misalnya di sini saya membuat desain bertema Coffee, maka tampilan background harus mengikuti tema supaya terlihat natural.

#3. Menyimpan Desain sebagai PNG

Terakhir simpan gambar tersebut dengan kualitas PNG supaya ketajaman gambarnya tidak menyusut. Caranya pilih tombol Upload di sebelah kanan atas lalu pilih Unduh. Kemudian ganti Jenis File menjadi PNG lalu pilih tombol Unduh.

Nah gimana, mudah sekali kan? Sampai di sini dahulu tutorial cara membuat background 2 warna di aplikasi Canva. Semoga bermanfaat.

Membuat tampilan website yang indah dan menarik adalah tugas seorang designer web, mereka akan berlomba-lomba dan berusaha semaksimal mungkin untuk mendesign website agar terlihat menarik, untuk mendesign web maka seorang designer harus tau cara mengubah background suatu halaman. ini adalah dasar yang perlu dikuasai oleh para design website. Ada berbagai cara dalam mengubah background website, dan umumnya menggunakan CSS atau mengedit manual pada kode HTML itu sendiri. cara mengedit manual pada HTML, adalah cara yang tidak dianjurkan, namun tetap perlu kamu kuasai.

Untuk mengubah background website pada HTML, kita dapat menggunakan Atribut Bgcolor, yang digunakan untuk membuat seluruh background tampil berwarna. Dengan adanya bgcolor ini maka seluruh tag yang ditandai akan berwarna sesuai dengan warna yang kita cantumkan.

Sedangkan, untuk mengubah background menjadi gambar kita hanya perlu mencantumkan atribut Background dan ditambah dengan value url gambar (lokasi gambar).

Cara Mengubah Background HTML

Pertama-tama kita akan membahas tentang cara mengubah background html dengan warna :

1. mengubah warna background HTML

kode atribut yang digunakan adalah sebagai berikut :

bgcolor=”..warna yang dibutuhkan…”;

Jiki kita sisipkan dalam tag <body>, dengan warna merah (red), maka perintahnya akan tampak seperti kode berikut ini:

<html>
<head>
<title> ........<title>
</head>
<body bgcolor="red">

..........

</body>
</html>

Pada kode perintah diatas, kita telah menambahkan atribut bgcolor dengan value red. artinya bahwa halaman tersebut akan berwarna merah. Kita juga dapat menggunakan berbagai warna lainnya seperti “black” dan “yellow”. selain menggunakan kata red ataupun black, kita juga bisa mengisi value dengan kode dari suatu warna.

Untuk mendapatkan kode suatu warna, kita dapat menggunakan software Photoshop, perhatikan gambar berikut ini :

Lihatlah bagian kode yang bertulisan #db28a2 (ini adalah kode yang bisa kita sisipkan dalam HTML Tag), jika kita tuliskan pada atributnya, maka akan tampak seperti bgcolor=”#db28a2″

sekarang, mari kita buat contah lainnya. silahkan buka text editornya, kamu bisa menggunakan notepad ++ ataupun notepad biasa. ketikan kode seperti berikut ini:

<html>
<head>
<title>belajar bgcolor</title>
</head>
<body bgcolor="green">
seperti ini warnanya

</body>
</html>

See also Web Design - How to Construct and Publish the Website

Silahkan simpan perintah kode tersebut dengan nama yang anda inginkan, asalkan disertai dengan ekstensi “.html”, misalnya seperti “aku_belajar.html”, setelah itu anda buka dengan browser kesayangan anda, seperti opera min, google chrome, dan sebagainya. kurang lebih akan tampak seperti berikut ini :

Penjelasan dari kode diatas :

<html> merupakan tag awal dari kode html, dan file html ini ditutup dengan kode perintah </html>
<head> merupakan judul dari tab atau halaman yang telah kita buat. dalam tag ini, kita bisa menyisipkan kode CSS, JavaScript, Iklan, tag meta dan sebagainya. tag head ini perlu kita tutup dengan kode </head>.
<title> tag ini merupakan perintah untuk menyatak suatu judul dari halaman. tag ini terletak diantara <head> dan </head>. tag ini ditutup dengan kode perintah </title>
<body> Tag ini dibuat untuk menampilkan isi halaman kepada user, pada tag inilah kita menyatakan suatu konten artikel, recent post, popular post, dan sebagainya. tag ini diakhiri dengan tag </body>
bgcolor=”green” merupakan suatu atribut yang akan menyatakan bahwa tag ini akan berwarna hijau.

2. Mengubah Background HTML dengan Gambar

Selanjutnya kita akan mengubah background HTML dengan suatu gambar. sekali lagi saya katakan bahwa metode ini tidak dianjurkan untuk membuat website yang dinamis, namun jika ingin membuat website statis, bisa saja. kenapa pada website dinamis tidak dianjurkan ? karena saat ini sudah ada CSS yang mampu mendesign halaman menjadi lebih responsif.

peintah yang digunakan untuk mengubah background halaman, hampir sama dengan bgcolor, cuma yang menjadi templatenya adalah suatu foto atau gambar. atribut yang digunakan adalah background. Berikut ini merupakan cara penulisan atributnya :

background=”…lokasi_gambar…”

Pertama yang harus anda siapkan adalah suatu foto atau gambar, simpan foto dalam satu file bersama dengan file html yang kita buat, disini saya menggunakan gambar dengan nama “ari.jpg”. perhatikan gambar berikut ini :

Oke, sekarang kita langsung saja ketikan kode HTML berikut ini :

<html>
<head>
<title>belajar background</title>
</head>
<body background="ari.jpg">

ini potonya jadi template

</body>
</html>

Pada kode tag <body background=”ari.jpg”> lihat kata “ari.jpg”, nah ini merupakan nama dari foto beserta ekstensinya yaitu “.jpg”, anda juga bisa menggunakan poto dengn nama ekstensi “.png” dan lain-lain, intinya anda harus menyesuaikan perintah diatas dengan poto dan ekstensinya.
jangan lupa, simpan gambar bersama dengan file html yang telah tadi kita buat.

See also Cara Membuat Form Pendaftaran Dengan HTML

jika ingin memisahkan Gambar di folder yang berbeda atau lokasi lain juga bisa. pertama buatlah folder, misalnya folder “gambarku”, lalu simpan gambar dalam folder tersebut. setelah itu kamu tinggal ubah kode html tadi menjadi background=”gambarku/ari.jpg”.

Bagaimana cara menambahkan warna latar belakang dalam HTML?

Jika Anda ingin menggunakan warna-warna dasar pada kode HTML, tikkan nama warna tanpa tagar (“#”) sebagai pengganti kode warna HTML. Sebagai contoh, jika Anda ingin menggunakan warna oranye sebagai warna latar halaman, tikkan background-color: orange; .

Bagaimana cara memberi warna pada background?

Menambahkan atau mengubah warna latar belakang.

Masuk ke Desain > Warna Halaman..

Pilih warna yang Anda inginkan di bawah Warna Tema atau Warna Standar. Jika Anda tidak melihat warna yang Anda inginkan, pilih Warna Lainnya, lalu pilih warna dari kotak Warna..

Perintah apa yang diberikan untuk menambahkan background warna?

Perintah BODY adalah perintah untuk membuat warna latar belakang pada layar, mengubah warna link, mengubah warna dasar link, menampilkan pesan ketika halaman ditutup, dan lain-lain sesuai dengan atribut yang diberikan.