Tau stabilo? Pernah menandai tulisan pada buku menggunakan stabilo ? Nah, pada HTML dan CSS juga bisa atau pada website kalian semua juga bisa. Menggunakan Adobe Dreamweaver, Sublime Text atau aplikasi lainnya juga sama saja, gak ada bedanya.
Misalnya, kita akan merubah tulisan yang berada pada tag <p> (hanya contoh ya, kalian bisa gunakan tag mark dimanapun dan pada text manapun yang ingin kalian soroti / highlight). Maka pada tulisan yang ingin kalian rubah background nya alias di highlight, tinggal disisipkan tag tersebut.
<p><mark> contoh membuat highlight <mark>text atau tulisan yang disoroti</mark> seperti menggunakan stabilo pada tulisan di buku</p>
Pada contoh diatas, kalimat “text atau tulisan yang disoroti” dibungkus oleh tag itu artinya tulisan tersebut akan menjadi tulisan yang di highlight atau disoroti seperti gambar ini:
Secara defaultnya, ketika kita hanya memberi tag <mark> maka hasilnya berwarna kuning seperti gambar diatas. Kalo mau merubah warna, bisa dirubah menggunakan CSS, ada 2 cara. Bisa langsung didalam tag <mark> atau menggunakan bantuan CSS eksternal. Kalo menggunakan CSS langsung didalam tag <mark> harus ditambah atribut “style” didalamnya, maka akan jadi seperti ini:
Baca Juga:
<p>contoh membuat highlight <mark style="background: #ff0000;">text atau tulisan yang disoroti</mark> seperti menggunakan stabilo pada tulisan di buku</p>
Pada atribut style tersebut saya berikan warna background, maka warna default dari tag akan tertimpa oleh atribut style tersebut. Disini saya memberikan warna #ff0000 yaitu warna merah dan hasilnya background tulisan tersebut akan menjadi warna merah. Silahkan tentukan warna yang diinginkan.
Cara selanjutnya, kita juga dapat merubahnya didalam file CSS eksternal, tentu CSS ini harus terkait / disisipkan kedalam html yang bersangkutan (yang digunakan). Jika belum tau caranya, silahkan klik disini untuk mempelajari lebih lanjut bagaimana cara menyisipkan file CSS di HTML.
Penulisan property untuk merubah warna tag seperti dibawah ini:
mark {
background: #ff0000;
}
Disini saya memberikan warna yang sama dengan contoh diatas, maka hasilnya akan tetap sama seperti gambar diatas.
Lalu bagaimana kalo ada tag lebih dari satu? Dan ingin memberi warna berbeda-beda pada setiap tag nya ? Apakah bisa menggunakan property CSS di atas?
Jawabannya TIDAK! Karena contoh diatas hanya memanggil tag saja, artinya kita memanggil keseluruhan tag <mark> yang ada untuk merubah warna menjadi #ff0000. Untuk merubah warna background pada setiap tag yang ada kita dapat melakukannya dengan 2 cara juga, via CSS eksternal atau langsung pada tag nya. Tidak berbeda jauh dengan cara sebelumnya yang sudah dijelaskan diatas.
Pertama, akan kita bahas menggunakan CSS. Misalnya pada suatu pos atau laman web HTML terdapat 3 tag dan ingin memberikan warna berbeda-beda. Langkah pertama kita harus memberikan “id” / “class” pada masing-masing tag dan untuk nama id atau class nya silahkan di isi sesuai keinginan.
Kenapa kita kasih id atau class pada setiap tag mark ini ? Karena id atau class yang kita terapkan ini akan kita panggil di CSS nya nanti untuk merubah warna background masing-masing tag, maka pastikan nama id / class ini berbeda-beda. Contohnya saya akan memberikan class pada tag ini dengan nama seperti ini:
<p>contoh membuat highlight <mark class="mark1">text atau tulisan yang disoroti</mark> seperti menggunakan stabilo pada tulisan di buku. <mark class="mark2">Sekarang ceritanya ada banyak</mark> tag mark pada laman atau postingan web html kalian, maka <mark class="mark3">kita harus kasih id atau class</mark> pada masing2 tag mark. Kita lakukan seperti ini untuk keperluan nantinya di CSS</p>
Saya kasih contoh menggunakan class. Lalu apa gunanya id / class yang kalian masukkan ? Setelah seperti ini, kita dapat memanggil masing-masing class yang ada pada tag <mark> kemudian kasih atribut background dengan warna yang kita mau. Dimana manggil masing-masing class ini? Tentu di CSS yang sudah kita buat seperti contoh2 sebelumnya diatas. Misalnya saya kasih warna seperti ini:
.mark1 {
background: #ff0000;
}
.mark2 {
background: #ff9900;
}
.mark3 {
background: #1CC37D;
}
Artinya pada tag <mark> class mark1 saya kasih warna #ff0000, tag <mark> class mark2 saya kasih warna #ff9900 dan pada tag <mark> class mark3 saya kasih warna #1cc37d. Warnanya berbeda setiap masing-masing mark. Hasilnya pun menjadi warna warni penuh warna.
Gak mau ribet ? Ada cara lain yang lebih simple ?
Jawabnnya ADA! Kita bisa lakukan seperti cara sebelumnya yang menggunakan atribut “style” didalam tag <mark>, tapi kali ini tentu kita harus memberikan warna yang berbeda-beda pada setiap atribut tersebut dan tidak kita tidak perlu menggunakan class atau id lagi.
Jadi seperti ini contohnya:
<p>contoh membuat highlight <mark style="background: #FF0000;">text atau tulisan yang disoroti</mark> seperti menggunakan stabilo pada tulisan di buku. <mark style="background: #FF9900;">Sekarang ceritanya ada banyak</mark> tag mark pada laman atau postingan web html kalian, maka <mark style="background: #1CC37D;">kita harus kasih id atau class</mark> pada masing2 tag mark. Kita lakukan seperti ini untuk keperluan nantinya di CSS</p>
Contoh ini sama dengan contoh sebelumnya yang diatas ketika memberikan atribut “style” kedalam tag <mark> tapi kali ini setiap tag <mark> kita berikan warna berbeda-beda maka hasilnya akan sama saja seperti gambar diatas, silahkan dicoba dan lihat hasilnya. Tampak jelas berbeda !
Masih bingung ? Lihat : Video Tutorial Membuat Tulisan Stabilo.
Kesimpulan
Soal menggunakan class, id atau style itu tergantung selera aja. Mana yang lebih disukai, silahkan gunakan ! Saran dari saya, sebaiknya gunakan class / id karena jika suatu saat ingin merubah tulisan-tulisan itu tinggal cari nama class dan id nya saja. Tapi tentu nama id / class nya harus mudah diingat alias gak ribet.