Memberi Highlight Pada Teks Tertentu

Fleksible??!!! Maksud saya begini,…

Kita dapat memberi efek/tonjolan yang berbeda antara suatu teks tertentu dengan teks lainnya atau bahkan kita dapat memberi background berupa image.

Contohnya begini.

Pada teks yang pertama, saya menginginkan warna backgroundnya hijau dan pada teks yang kedua saya ingin memberikan warna background biru, dan kemudian pada teks yang ketiga, saya ingin memberikan background image, masing-masing seperti di bawah ini.

Tampilan Pertama

NAMAMU

Namamu adalah manis terngiang di telingaku selalu
dalam malam berbisik dalam siang berteriak
namamu adalah sayap kupu-kupu
namamu terbang dalam kalbu
mengigau tidurku
menggumam lamunku

http://yosepnugroho.tripod.com/

Tampilan Kedua

NAMAMU

Namamu adalah manis terngiang di telingaku selalu
dalam malam berbisik dalam siang berteriak
namamu adalah sayap kupu-kupu
namamu terbang dalam kalbu
mengigau tidurku
menggumam lamunku

http://yosepnugroho.tripod.com/

Tampilan Ketiga

NAMAMU

Namamu adalah manis terngiang di telingaku selalu
dalam malam berbisik dalam siang berteriak
namamu adalah sayap kupu-kupu
namamu terbang dalam kalbu
mengigau tidurku
menggumam lamunku

http://yosepnugroho.tripod.com/

Bagaimana cara untuk membuatnya?? Berikut caranya.

Untuk membuat seperti Tampilan Pertama dan Tampilan Kedua, adalah dengan menggunakan kode html dengan format seperti di bawah ini.

<div style="background:#9AFE2E; border:1px dotted #0B3B0B; padding:10px;">
TEKS YANG INGIN DIBERI HIGHLIGHT
</div>

Keterangan

background: #9AFE2E
Adalah kode untuk warna background yang kita dapat ganti dengan warna lainnya sesuai selera masing, untuk kode warna dapat dilihat di sini.

border:1px dotted #0B3B0B
Adalah kode untuk border, di mana kita dapat merubahnya sesuai selera dan kebutuhan masing-masing,
1px menunjukkan ukuran border yaitu sebesar 1 pixel,
dotted menunjukkan style border,
dan #0B3B0B adalah kode warna border.

Padding:10px
Adalah kode yang digunakan untuk memberi jarak atau space dari antara garis dan content (isi), di mana kita juga dapat merubahnya sesuai kebutuhan.

Untuk membuat tampilan yang ketiga adalah dengan kode html dengan format seperti berikut ini.

<div style="background:url(URL_Image); width:400px; height:300px; padding:10px;">

TEKS YANG INGIN DIBERI HIGHLIGHT

</div>

Keterangan

background:url(URL_Image)
Adalah kode image untuk background, kita dapat mengganti URL_image masing-masing

width:400px; height:300px
Adalah kode lebar dan tinggi area yang dapat kita sesuaikan dengan kebutuhan masing-masing.

Selamat Mencoba