Cara Menggunakan Kode Warna HTML di posting Blog/Website

Oleh Anonim

Cara membuat dan menggunakan instruksi warna HTML untuk posting blog/website

Artikel ini akan menjelaskan bagaimana cara membuat atau menggunakan instruksi warna HTML untuk dipasang di posting blog/website,

Pada umumnya instruksi warna HTML digunakan pada blog/website untuk memberi warna pada bagian-bagian ibarat dibawah ini:

Memberi warna pada bab Teks
Memberi warna pada bab Background
Memberi warna pada bab Border

Cara memberi warna atau menggunakan instruksi warna HTML pada bagian-bagian diatas akan dibahas disini secara detail.

Pertama, mari kita mulai cara memberi warna pada bab teks.

Untuk memberi warna pada bab teks caranya cukup mudah, baik memberi warna pada teks mati maupun teks hidup yang ada link nya. Untuk lebih terperinci lihat dibawah cara penulisan instruksi warna HTML pada bab teks.

<font color="masukkan instruksi warna html disini"> Tulis teks yang akan diberi warna disini </font>

Contoh:

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

Jika diunggah diposting blog karenanya akan ibarat ini:

Tulis teks yang akan diberi warna disini

Selanjut cara memberi script warna pada bab background, simak cara penulisan instruksi warna HTML dibawah:

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

Jika diunggah di blog karenanya akan ibarat ini:

Warna background

Berikutnya cara memberi warna pada bab border, lihat cara memasang instruksi warna HTML pada bab border dibawah:

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

Hasilnya akan terlihat ibarat ini:

Warna border

Sekarang kita gabungkan cara memberi warna di HTML pada bab 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 ibarat ini:

Warna pada teks, background dan border

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

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

Copy instruksi warna HTML dibawah yang mampu digunakan untuk memberi warna pada bab teks dibawah ini:

<font color="blue">
Warna Biru </font>

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

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

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

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

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

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

Hasilnya: Warna Merah
<font color="black">
Warna hitam</font>

Hasilnya: Warna Hitam
<font color="violet">
Warna violet</font>

Hasilnya: Warna violet

<font color="transparent">
Tulis teks warna transparent disini</font>

Hasilnya: Warna transparent itu bening ibarat beling dan tembus pandang jadi tidak terlihat.
<font color="white">
Warna putih</font>

Hasilnya: Warna putih juga tidak terlihat alasannya yakni background blog ini putih juga.

Selanjutnya silahkan Anda copy juga instruksi warna HTML yang berikut ini, yaitu gabungan dari cara memberi warna di HTML pada bab teks, background dan border.

<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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 instruksi warna HTML diatas yang sudah siap digunakan di posting blog/website.

Dan untuk mengetahui lebih banyak perihal instruksi warna HTML baca juga: Cara membuat instruksi warna di posting blog hingga mampu sendiri.