CSS Tutorial Part 2 : Mengubah Background Menggunakan CSS

Assalammualaikum Wr.Wb.

Create-script - haii gaesss....kali ini saya akan sharing tentang bagaimana cara mengubah background pada HTML, menggunakan CSS. bagaimana caranya?....mari kita simak pembahasannya berikut ini...

A. PENDAHULUAN

Pengertian

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Latar Belakang

background atau lebih sering disebut dengan gambar latar belakang ini merupakan salah satu bagian terpenting dalam pembuatan Web design. penggunaan background atau latar belakang ini digunakan untuk mempercantik tampilan di HTML.

Maksud dan Tujuan

agar dapat mengubah background pada HTML

Hasil yang Diharapkan

dapat mengubah background pada HTML menggunakan CSS

B. ALAT DAN BAHAN

Text Editor
Web Browser

C. PEMBAHASAN
Background atau Latar Belakang merupakan salah satu bagian terpenting dalam pembuatan sebuah Web Design, hal ini bertujuan untuk mempercantik halaman Website kita. dalam HTML Latar Belakang dibedakan menjadi Background Warna dan Background Gambar.

Cara Mengubah Background atau Latar Belakang dengan CSS

Contoh Pertama : Mengganti Background dengan warna

buat file HTML dan file CSS...pertama buat file HTML (namanya terserah saja) kemudian ketikkan Script Berikut :

<!DOCTYPE html>
<html>
<head>
<title>Mengubah Background Menggunakan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Mengubah Background Menggunakan CSS</h2>
</body>
</html>

yang kedua buat file bernama style.css, ketikkan script berikut :

body{
background: blue;
color: white;
}

kemudian save bersama dengan file HTML nya tadi

kemudian save dan buka di web browser anda, maka hasilnya akan seperti berikut :

Penjelasan, terdapat atribut :

background : atribut ini digunakan untuk mengatur warna background.
color : digunakan untuk mengatur warna tulisan atau text

Contoh Kedua : Mengganti Background dengan Gambar

Buat file HTML, kemudian isikan Script berikut :

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>

</body>
</html>

yang kedua adalah, ketikkan script CSS berikut :

    body{

    background: url(server.jpg);
    background-repeat: no-repeat;
    background-size: cover;

    color: white;

    }

kemudian save bersama satu folder, dan letakkan file fotonya satu folder dengan script nya.

kemudian jika sudah, buka file HTML nya di web browser sobat, maka hasilnya akan menjadi seperti ini :

Penjelasan :
didalam script CSS terdapat script background: url('CREATE.png');
property background digunakan untuk memberi background
didalam url merupakan tempat untuk memasukkan gambarnya, contoh, pada script diatas terdapat CREATE.png, nah. CREATE.png adalah nama gambar yang akan saya gunakan sebagai background. kalian dapat menyesuaikan dengan nama foto kalian

D. HASIL YANG DIDAPATKAN

kita dapat mengubah background di HTML menggunakan CSS. Mengubah dalam bentuk mengubah backgroundnya menjadi warna maupun mengubah backgrounnya dengan gambar.

E. KESIMPULAN

Mengganti Background di HTML tidaklah sulit, kita hanya perlu menambahkan selector bernama body, dan mengisikan atribut dan values sesuai yang kita inginkan

F. REFERENSI

Malas Ngoding

Sekian Sharing saya pada kesempatan kali ini...semoga Bermanfaat.....

Wassalammualikum Wr.Wb.

Share this