Memberi Warna Pada Teks Dan Background Halaman Website Dengan HTML

dalam HTML
Hosting Murah Berkualitas

Setelah anda mempelajari Artikel dan Video Tutorial yang saya ajarkan sebelumnya di Modul Tutorial yang ada pada Menu, sekarang pada kesempatan kali ini saya akan ajarkan materi lain kepada anda tentang bagaimana caranya Memberi Warna Pada Teks Dan Background Halaman Website Dengan HTML sebagai lanjutan dari materi-materi pembelajaran HTML sebelumnya.

Saya asumsikan bahwa anda sudah menguasai materi-materi pembelajaran HTML yang sebelumnya saya ajarkan. Untuk memperkaya pengetahuan anda tentang HTML ini, sekarang kita lanjutkan materi HTML ini ke Tutorial HTML berikutnya.

Pada artikel ini kita akan belajar bagaimana caranya memberi warna pada teks pada halaman website anda dan bagaimana pula cara memberi warna pada background halaman website anda. Untuk melakukan hal ini kita akan menggunakan dua tag yang berbeda tata letaknya pada kode HTML anda. Untuk jelasnya silahkan disimak baik-baik penjelasan berikut ini.

Memberi Warna Pada Teks Dengan HTML

Cara untuk melakukan pemberian warna pada teks yang ada pada halaman website, kita akan menggunakan tag <FONT COLOR>. Berdasarkan sejarah, penggunaan warna pada teks web page itu diperkenalkan pertama kali oleh Explorer 1.0 dengan menggunakan atribut COLOR pada elemen tag FONT.

Cara mendefinisikan warna pada tag <FONT COLOR> ini ada dua cara, yaitu dengan menggunakan nama warnanya langsung dalam bahasa inggris dan dengan menggunakan kode RGB atau Hex Code suatu warna.

Contoh penggunaan dengan menggunakan nama warnanya langsung dalam bahasa inggris adalah sebagai berikut : <FONT COLOR=”red”>

Untuk Nama warna lainnya dalam bahasa inggris ini bisa anda simak contoh lainnya disini :

Aqua, Black, Blue, Green, White, Red, Yellow, Olive, Fuchsia, Silver, Lime, Navy, Purple, Gray, Teal, Maroon

Kode Nama warna diatas bisa anda pakai nanti pada penggunaan tag <FONT COLOR> tadi diatas sebagai variasi penggunanaan.

Sedangkan penggunaan dengan menggunakan kode RGB suatu warna adalah sebagai berikut : <FONT COLOR=”#FF0000″>

kode #FF0000 diatas disebut Hex Code. Penulisannya diawali dengan karakter pagar “#” lalu diikuti kode RGB nya.

Untuk mengetahui kode RGB atau Hex Code lainnya ini silahkan lihat daftarnya dibawah ini :

#FF0000 = Hex Code untuk Warna Merah

#0000FF = Hex Code untuk Warna Biru

#FFFF00 = Hex Code untuk Warna Kuning

#FFFFFF = Hex Code untuk Warna Putih

#00FFFF = Hex Code untuk Warna Cyan

#888888 = Hex Code untuk Warna Abu-abu

#00FF00 = Hex Code untuk Warna Hijau

#FF8800 = Hex Code untuk Warna Orange

#000000 = Hex Code untuk Warna Hitam

#AA8800 = Hex Code untuk Warna Coklat

#004488 = Hex Code untuk Warna Navy

atau anda bisa juga melihat tabel dibawah ini :

daftar hex code html

Nama warna dan Kode RGB atau Hex Code diatas baru sebagian saja dari kode-kode yang ada tapi lumayan untuk pembelajaran HTML anda. Silahkan digunakan dalam pembelajaran anda sebagai pilihan variasi warna.

Tentang bagaimana cara penggunaannya silahkan anda buka Notepad anda lalu copy paste kode-kode HTML dibawah ini.

<html>
<header>
<title>
Memberi Warna Pada Teks Dengan HTML
</title>
</header><body><font color=”red”>ini contoh teks berwarna red tanpa penggunaan Tag Font Size</font><br><font color=”green”>ini contoh teks berwarna green tanpa penggunaan Tag Font Size</font><br><font size=6 color=”aqua”>ini contoh teks berwarna aqua dengan penggunaan Tag Font Size 6</font><br><font size=6 color=”olive”>ini contoh teks berwarna olive dengan penggunaan Tag Font Size 6</font><br><font size=6 color=”fuchsia”>ini contoh teks berwarna fuchsia dengan penggunaan Tag Font Size 6</font><br><font size=5 color=”#00FF00″>ini contoh teks berwarna Hex Code #00FF00 dan penggunaan Tag Font Size 5</font><br></body>
</html>

Setelah kode diatas di copy paste pada Notepad anda, silahkan save dengan nama file yang anda inginkan misalnya nama file nya adalah memberiwarnapadateks.html jangan lupa kasih tanda titik dibelakang nama filenya seperti contoh tadi lalu beri ekstensi .html agar ketika disave nantinya menjadi file HTML.

Jika sudah tersimpan, maka silahkan anda cari file yang baru saja anda simpan tadi lalu klik 2x untuk melihat tampilannya di browser. Tampilannya harusnya seperti gambar dibawah ini.

Tampilan Kode Memberi Warna Pada Teks HTML

Pada kode HTML diatas saya gunakan tag lain yang sudah saya bahas pada artikel sebelumnya yaitu penggunaan tag <FONT SIZE>. Untuk merefresh ingatan anda atau jika anda belum membacanya silahkan baca dulu artikel saya sebelumnya yang berjudul Memformat Ukuran Huruf Tetap dan Penggunaan Heading Dengan HTML agar anda lebih faham cara penggunaannya.

Silahkan anda cermati kode-kode HTML yang baru saja anda buat diatas tadi, dan bedakan mana yang menggunakan nama warna dalam bahasa inggris dan mana yang menggunakan Kode RGB atau Hex Code.

Memberi Warna Pada Background Halaman Website Dengan HTML

Setelah anda faham bagaimana cara penggunaan <Font Color> untuk mewarnai teks diatas, maka sekarang waktunya anda belajar bagaimana caranya memberi warna pada Background Halaman website anda.

Tag yang digunakan untuk memberi warna pada Background Halaman website anda adalah tag <BGCOLOR>. Tag <BGCOLOR> ini tata letaknya berbeda pada penggunaan <Font Color> diatas.

Tag <Font Color> tadi diletakkan di antara tag <BODY> pembuka dan tag </BODY> penutup, sedangkan penggunaan <BGCOLOR> ini dia melekat pada tag <BODY> itu sendiri. Untuk memahaminya lihat contoh penggunaannya :

<body BGCOLOR=”black”>

Pada contoh diatas bila kita eksekusi nantinya background halaman website anda akan berwarna hitam. Untuk melihat hasilnya silahkan anda copy paste kode-kode berikut pada notepad anda. Lakukan cara yang sama seperti cara diatas tadi. Simpan filenya dalam bentuk HTML lalu klik 2x untuk melihat hasil tampilannya. Kode untuk melihat penggunaan tag <body BGCOLOR=”black”> diatas tadi adalah sebagai berikut :

<html>
<header>
<title>
Memberi Warna Pada Background Halaman Website Dengan HTML
</title>
</header><body bgcolor=”black”><font color=”red”>ini contoh teks berwarna red tanpa penggunaan Tag Font Size</font><br><font color=”green”>ini contoh teks berwarna green tanpa penggunaan Tag Font Size</font><br><font size=6 color=”aqua”>ini contoh teks berwarna aqua dengan penggunaan Tag Font Size 6</font><br><font size=6 color=”olive”>ini contoh teks berwarna olive dengan penggunaan Tag Font Size 6</font><br><font size=6 color=”fuchsia”>ini contoh teks berwarna fuchsia dengan penggunaan Tag Font Size 6</font><br><font size=5 color=”#00FF00″>ini contoh teks berwarna Hex Code #00FF00 dan penggunaan Tag Font Size 5</font><br></body>
</html>

Maka tampilannya akan seperti gambar dibawah ini :

Tampilan Kode Memberi Warna Pada Background Html

Jika anda belum faham benar dengan langkah-langkah yang saya jelaskan pada artikel ini, maka silahkan anda langsung tonton saja Video Tutorialnya. melalui Link yang dibawah ini. Atau Jika anda ingin melihat semua Video Tutorial Pembelajaran Website lainnya yang sudah saya upload ke youtube, maka silahkan anda kunjungi saja channelnya dengan klik link ini

https://www.youtube.com/channel/UCyHUJtWm75DPmaJ93L5trog

Untuk memudahkan anda mendapatkan Update Video terbarunya, maka silahkan anda klik tombol SUBSCRIBE atau LANGGANAN di channel youtube tadi GRATIS tidak dipungut biaya sepeserpun.

Sedangkan jika anda ingin Memaksimalkan Pengetahuan Tentang Komputer, maka silahkan klik

https://www.youtube.com/channel/UCCN00g4lvoawk5tWsU-_syA

Jangan lupa klik tombol SUBSCRIBE nya untuk ber LANGGANANGRATIS di channel youtube KE-2 saya ini untuk memudahkan anda mendapatkan UPDATE VIDEO TERBARU dari saya.

Sekian dulu bahasan artikel dari saya yang berjudul Memberi Warna Pada Teks Dan Background Halaman Website Dengan HTML ini. Nantikan terus update-update terbaru di website peterwebs.com ini agar nantinya anda jadi lebih kaya lagi akan pengetahuan tentang ilmu website. Sekian semoga bermanfaat.

Tags: #belajar html #html #membangun website #tutorial website #web design

author
Penulis: 
Saya adalah Seorang Blogger yang aktif dan konsen di bidang programming, web design, graphic design dan bisnis online. Saya juga tertarik pada bidang Parenting, Kesehatan dan informasi bermanfaat lainnya.
Cara Posting Artikel Di Website Berbasis WordPress
Cara Posting Artikel Di Website Berbasis WordPress
Pada saat yang lalu saya sudah membahas
Konfigurasi WordPress Yang Penting Untuk Diketahui
Konfigurasi WordPress Yang Penting Untuk Diketahui
Pada kesempatan yang lalu saya sudah membahas
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Bagi anda yang ingin memiliki banyak website
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Langkah pertama yang harus anda lakukan ketika
Cara Membeli Domain Dan Hosting
Cara Membeli Domain Dan Hosting
Salah satu persyaratan untuk bisa memiliki sebuah
Cara Install WordPress Di Localhost Dengan Xampp
Cara Install WordPress Di Localhost Dengan Xampp
Sebagai lanjutan dari pembelajaran membangun website, kali
Cara Install WebServer XAMPP Dan Cara Mendownload Software XAMPP
Cara Install WebServer XAMPP Dan Cara Mendownload Software XAMPP
Sebelum anda memulai untuk belajar membuat website,
Cara Memasukkan Video Ke Halaman Website Dengan HTML
Cara Memasukkan Video Ke Halaman Website Dengan HTML
Pada kesempatan yang lalu saya sudah share
Cara Mengcapture Gambar Di Komputer Dengan Screen Grab Pro
Cara Mengcapture Gambar Di Komputer Dengan Screen Grab Pro
Kali ini saya akan sharing bagaimana caranya

Beri komentar "Memberi Warna Pada Teks Dan Background Halaman Website Dengan HTML"

Baca juga×

Top