saya akan langsung memberikan materi tentang bagaimana caranya memerikan warna latar belakang pada sebuah halaman web.
Kalau Anda memperhatikan setiap halaman web, pastinya masing-masing memiliki ciri khas warna dasar latar belakang nya. Ada yang putih, abu-abu, biru, hijau, atau bahkan warna-warna yang tidak bisa kita sebutkan jenisnya sebab warna latar belakang tersebut dibuat dengan kode Hexadesimal menggunakan CSS. Nah lho, apa itu warna dalam format Hexadesimal dan CSS?
Tidak perlu khawatir kawan, sedikit-demi sedikit kita belajar, maka hasilnya akan menjadi bukit (gitu toh kata orang-orang...??). Blog ini akan membahas lengkap tentang HTML, namun saya tidak akan langsung memposting sekaligus (Jari n pikiran saya bisa stress lah..hehe). Jika kalian mengikuti langkang demi langkah isi dari postingan blog ini, saya yakin Anda akan memahami tentang HTML (Ingat! Hafal dengan Paham itu beda lho...).
Kalau begitu saya akan mendefinisikan beberapa cara dalam membuat warna pada latar belakang halaman web. Ada dua cara untuk memberikan warna latar belakang;
1. Langsung mewarnai di dalam tag body tersebut.
2. Mewarnai melalui CSS (Cascending Style Sheet) dengan cara memberikan ID atau Class terlebih dahulu pada tag body-nya.
Kali ini saya akan memberikan postingan dengan cara yang pertama di atas, untuk cara kedua akan saya bahas di postingan berikutnya.
Langkah awal:
Buka HTML editor (Saya sarankan menggunakan Notepad++, karena dapat membedakan fungsi atau jenis tag dengan cara membedakan warna teks).
Pastikan Anda langsung mengaktifkan mode HTML pada menu Language lalu pilih HTML Maka akan tampil halama seperti dibawah ini:
Setelah itu, mulailah mengetikkan tag dasar dari HTML, sperti <html>,<head>,<title>,<body>, dan lain sebagainya seperti yang telah dipelajari sebelumnya tentang postingan Mengenal Bagian HTML.
Baiklah, saya akan memerikan contoh sederhana, silahkan Copy Paste kan kode HTML dibawah ini, namun sebaiknya Anda mengetikkan sendiri agar terbiasa :
<html>
<head>
<title>Memberi Warna Latarr Belakang</title>
</head>
<center>
<body bgcolor="black" text="white">
<h1>Warna latar belakang akan berwana Hitam sedangkan warna teks adalah Putih</h1>
</body>
<center>
</html>
Lihat gambar berikut:
Setelah itu, simpan file dengan nama latihan_bg.html pada folder latihan Anda (terserah dimana saja). Setelah itu klik 2xatau bisa juga dengan cara klik kanan lalu -> open with (Pilih browser yang Anda sukai, misal: Mozilla).
Maka pada browser akan menghasilkan tampilan seperti ini:
Bagaimana? Mudah bukan?
So, silahkan Anda pelajari dengan cara mengganti-ganti warna pada tag <body bgcolor="black" text="white">.Tag attribut bgcolor artinya warna untuk latar belakang, sedangkan tag dengan atribut text adalah untuk mewarnai teks. Anda dapat menggunakan nama warna yang telah dikenali oleh browser, seperti red, yellow, white, black, blue, green, brown, dll. Atau Anda juga dapat menggunakan warna berpola Hexadesimal dengan ploa #000 atau #000000. Warna pada Hexadesimal artinya memberikan kombinasi 16 satuan pada tiap digit mulai dari 0 sampai F (total 16 satuan). Pada pearnaan menggunakan Hexadesimal Anda haruss meletakkan tanda "#" sebelum menuliskan nilaiHexadesimal-nya.
Sebagai Contoh, ubahlah pola warna pada tag sebelumnya menjadi seperi dibawah ini:
<html>
<head>
<title>Memberi Warna Latarr Belakang</title>
</head>
<center>
<body bgcolor="#000000" text="#ffffff">
<h1>Warna latar belakang akan berwana Hitam sedangkan warna teks adalah Putih</h1>
</body>
<center>
</html>
Perhatikan yang teks yang berwarna merah, terdapat perubahan nilai pada tag atribut bgcolor dan text. Jika Anda jalankan kembali, maka akan menampilkan warna latar belakang dan teks yang sama. Kerana #000000 artinya berwarnaHitam sedangkan #ffffff artinya berwarna Putih. Pola dari pewarnaan Hexadesimal adalah setiap 2 digit untuk pola 6 digit dan 1 digit untuk pola 3 digit, yang masing-masing kombinasi dari warna red, green, dan blue. Jika Anda ingin memerikan warna yang berbeda, silahkan kombinasikan sendiri dengan kreatifitas Anda.
Sampai Jumpa di pelajaran tentang HTML berikutnya... ^_^ v
Jika Anda seorang pemula yang belum paham, silahkan berkomentar, dan saya akan siap untuk menjawab pertanyaan Anda.
Terima Kasih!
0 komentar:
Posting Komentar