Cara Membuat Background Color di HTML

By Posted on

Cara Membuat Background Color di HTML – Jika Anda sedang belajar membuat halaman web menggunakan HTML dan ingin menambahkan warna latar belakang (background color) untuk meningkatkan tampilan, Anda berada di tempat yang tepat! Dalam panduan ini, saya akan menjelaskan langkah-langkahnya secara detail agar mudah dipahami oleh pemula. Menambahkan background color merupakan salah satu langkah penting dalam membuat halaman web yang menarik dan estetis. Dengan pemahaman yang tepat tentang HTML dan CSS, Anda dapat mengubah tampilan halaman web Anda sesuai dengan preferensi dan kebutuhan Anda.

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat background color di html:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Background Color di HTML

1. Buat Folder Project “Background Color”

Langkah pertama adalah membuat folder khusus untuk proyek ini di dalam komputer Anda. Anda dapat memberinya nama sesuai keinginan, misalnya “project-background-color“.

2. Buat Sebuah File “background_color.html”

Sekarang, mari buat file HTML untuk halaman web kita. Buka editor teks favorit Anda (seperti Notepad, Sublime Text, atau Visual Studio Code) dan buat file baru dengan nama “background_color.html“.

Baca Juga:  Cara Membuat Video Autoplay di HTML

Berikut ini source code html yang harus Anda tambahkan untuk membuat background color di html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="background">
        <div class="content">
            <h1>Welcome to My Website</h1>
            <p>This is a sample text. You can add any content here.</p>
            <button>Click Me</button>
        </div>
    </div>
</body>
</html>
 

3. Buat File “style.css”

Sekarang, mari buat file CSS untuk mengatur tampilan halaman web kita. Buat file baru dengan nama “style.css” di dalam folder proyek yang sama.

Berikut ini source code css yang harus Anda tambahkan untuk membuat background color di html:

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.background {
    /* background-image: url('img/background_image.jpg'); Ganti 'background-image.jpg' dengan path gambar jika Anda ingin menambahkan gambar*/
    background-size: cover;
    background-position: center;
    height: 100%;
    background-color:#14aad3; /* warna background website berada disini*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    text-align: center;
    color: white;
}

h1 {
    font-size: 3em;
}

p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #4CAF50; /* Warna tombol */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049; /* Warna tombol saat dihover */
}
 

4. Mengubah Tampilan Background Color

Anda dapat mengubah warna latar belakang halaman web dengan mengedit kode CSS di file “style.css“. Cari bagian yang mengatur properti background-color pada elemen body dan ubah nilainya sesuai warna yang Anda inginkan. Anda juga dapat menyesuaikan warna teks dan elemen lain sesuai keinginan.

Baca Juga:  Cara Membuat Garis Horizontal di HTML

5. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan yang Anda buat. Buka file “background_color.html” menggunakan browser web Anda untuk melihat hasilnya. Jika semua langkah dilakukan dengan benar, Anda seharusnya dapat melihat halaman web dengan latar belakang warna yang telah Anda tentukan.

Preview hasil

Berikut ini preview hasil background color di html jika Anda berhasil membuatnya:

Dengan mengikuti panduan ini, Anda telah berhasil membuat halaman web sederhana dengan latar belakang warna menggunakan HTML dan CSS. Selamat mencoba dan semoga berhasil!

Jangan ragu untuk menjelajahi lebih lanjut tentang HTML dan CSS untuk meningkatkan pengetahuan Anda dalam membuat halaman web yang menarik dan fungsional. Semoga artikel ini bermanfaat bagi Anda!

Related posts: