Cara Membuat Kode Warna HTML di posting Blog/Website

Artikel ini akan menjelaskan bagaimana cara menggunakan kode warna HTML untuk dipasang di posting blog/website, Ok, pada umumnya kode warna HTML digunakan pada blog/website untuk membuat warna pada bagian-bagian seperti dibawah ini:

1. Membuat kode warna HTML pada bagian Teks
2. Membuat kode warna HTML pada bagian Background
3. Membuat kode warna HTML pada bagian Border

Cara membuat atau menggunakan kode warna HTML pada bagian-bagian diatas akan dibahas disini secara lengkap.

Pertama, mari kita mulai cara membuat kode warna HTML pada bagian teks.

Untuk membuat kode warna HTML pada bagian teks caranya cukup mudah, baik membuat warna pada teks mati maupun teks hidup yang ada link nya. Untuk lebih jelas lihat dibawah cara penulisan kode warna HTML pada bagian teks.

• <font color="#ff0000"> Tulis teks yang akan diberi warna disini </font>

Jika diunggah diposting blog hasilnya akan seperti ini:

• Tulis teks yang akan diberi warna disini

Selanjut cara membuat kode warna HTML pada bagian background, simak cara penulisan kode warna HTML dibawah:

• <div style="background:#ff0000;heigth:auto;width:150px;"> Warna background</div>

Jika diunggah di blog hasilnya akan seperti ini:

• Warna background

Berikutnya cara membuat kode warna HTML pada bagian border, lihat cara memasang kode warna HTML pada bagian border dibawah:

• <div style="border:5px inset #ff0000;heigth:auto;width:150px;"> Warna border</div>

Hasilnya akan terlihat seperti ini:

• Warna border

Sekarang kita gabungkan cara membuat kode warna HTML pada bagian teks, background dan border.

• <div style="background:#0000ff;color:#ffffff;text-align:center;border:5px inset #ff0000;heigth:auto;width:150px;"> Warna pada teks, background dan border</div>

Hasilnya akan terlihat seperti ini:

• Warna pada teks, background dan border

Setelah memahami bagaimana cara menggunakan kode warna HTML pada bagian teks, background dan border, untuk selanjutnya Anda tinggal mengatur sendiri jenis warna yang di inginkan, dan Anda juga bisa mengatur sendiri tinggi dan lebar kotak kolom dan mengatur ketebalan border.

Namun ika Anda tak mau ambil pusing dengan membuat kode warna HTML sendiri, mungkin akan menghambat waktu berharga Anda, silahkan Anda tinggal copy saja kode warna HTML dibawah ini yang sudah siap digunakan sesuai dengan kemauan dan kepentingan Anda.

Copy kode warna HTML yang bisa digunakan untuk membuat warna pada bagian teks dibawah ini:

1. <font color="blue">
   Warna Biru </font> Hasil membuat kode warna tersebut akan seperti ini: Warna Biru


2. <font color="yellow">
   Warna Kuning </font> Hasilnya: Warna Kuning


3. <font color="green">Warna Hijau</font> Hasilnya: Warna Hijau


4. <font color="orange">Warna Orange</font> Hasilnya: Warna Orange


5. <font color="gold">
   Warna Emas</font> Hasilnya: Warna Emas


6. <font color="silver">
   Warna Perak</font> Hasilnya: Warna Perak


7. <font color="red">
   Warna Merah </font> Hasilnya: Warna Merah


8. <font color="black">Warna hitam</font> Hasilnya: Warna Hitam


9. <font color="violet">Warna violet</font> Hasilnya: Warna violet


10. <font color="transparent">Tulis teks warna transparent disini</font>Hasilnya: Warna transparan itu bening seperti kaca dan tembus pandang jadi karena tidak terlihat sengaja tidak dipasang contohnya.


11. <font color="white">Warna putih</font> Hasilnya: Warna putih juga tidak terlihat karena background blog ini putih juga.

Selanjutnya silahkan Anda copy juga kode warna HTML yang berikut ini, yaitu gabungan dari cara membuat kode warna HTML pada bagian teks, background dan border.

1. <div style="background:blue;color:#ffffff;border:0px inset red;height:auto;width:200px;">
   Teks warna putih, background warna biru, border 0 warna merah </div>
   
   Hasilnya:
   Teks warna putih, background warna biru, border 0 warna merah
   
   
   
2. <div style="background:yellow;color:#000000;border:0px inset red;height:auto;width:200px;">
   Teks warna hitam, background warna kuning, border 0 warna merah </div>
   
   Hasilnya:
   Teks warna hitam, background warna kuning, border 0 warna merah
   
   
   
3. <div style="background:green;color:#ffffff;border:0px inset red;height:auto;width:200px;">
   Teks warna putih, background warna hijau, border 0 warna merah </div>
   
   Hasilnya:
   Teks warna putih, background warna hijau, border 0 warna merah
   
   
   
4. <div style="background:orange; color:#000000;text-align:center;valign:middle;border:0px inset red;height:auto;width:200px;">
   Teks posisi ditengah warna hitam, background warna orange, border 0 warna merah </div>
   
   Hasilnya:
   Teks posisi ditengah warna hitam, background warna orange, border 0 warna merah
   
   
   
5. <div style="background:gold;color:#000000;text-align:center;valign:middle; border:0px inset red;height:auto;width:200px;">
   Teks posisi ditengah warna hitam, background warna emas, border 0 warna merah </div>
   
   Hasilnya:
   Teks posisi ditengah warna hitam, background warna emas, border 0 warna merah
   
   
   
6. <div style="background:silver;color:#ff0000;text-align:right;valign:middle; border:5px inset #006400;height:auto;width:200px;">
   Teks posisi di kanan warna merah, background warna perak, border 5px warna hijau </div>
   
   Hasilnya:
   Teks posisi di kanan warna merah, background warna perak, border 5px warna hijau
   
   
   
7. <div style="background:red;color:#ffffff;text-align:right;valign:middle; border:0px inset #006400;height:auto;width:200px;">
   Teks posisi di kanan warna putih, background warna merah, border 0px warna hijau </div>
   
   Hasilnya:
   Teks posisi di kanan warna putih, background warna merah, border 0px warna hijau
   
   
   
8. <div style="background:black;color:#ffffff;text-align:left;valign:middle; border:0px inset #006400;height:auto;width:200px;"gt;
   Teks posisi di kiri warna putih, background warna hitam, border 0px warna hijau </div>
   
   Hasilnya:
   Teks posisi di kiri warna putih, background warna hitam, border 0px warna hijau
   
   
   
9. <div style="background:violet;color:#ffffff;text-align:left;valign:middle; border:0px inset #006400;height:auto;width:200px;padding-left:10px;">
   Teks posisi di kiri warna putih, background warna violet, border 0px warna hijau </div>
   
   Hasilnya:
   
   Teks posisi di kiri warna putih, background warna violet, border 0px warna hijau
   
   
   
   
   
10. <div style="background:transparent;color:#ff0000;text-align:left;valign:middle; border:2px inset #0000ff;height:auto;width:200px;padding-left:10px;">
    Teks posisi di kiri warna merah, background warna transparent, border 2px warna biru </div>
    
    Hasilnya:
    
    Teks posisi di kiri warna merah, background warna transparent, border 2px warna biru
    
    
    
    
    
11. <div style="background:white;color:#006400;text-align:left;valign:middle; border:2px inset violet;height:auto;width:200px;padding-left:10px;">
    Teks posisi di kiri warna hijau, background warna putih, border 2px warna violet </div>
    
    Hasilnya:
    
    Teks posisi di kiri warna hijau, background warna putih, border 2px warna violet
    
    

Silahkan Anda copy kode warna HTML diatas yang sudah siap digunakan di posting blog/website.

Dan untuk mengetahui lebih banyak tentang kode warna HTML baca juga: Cara membuat kode warna di posting blog sampai bisa sendiri. Jangan lupa silahkan Anda copy kode warna HTML diatas yang sudah siap digunakan di posting blog/website .

Posted by Sakri

Jika artikel ini cukup bermanfaat silahkan bagikan artikel ini ke:

Facebook Twitter Google+