Tutorial selanjutnya dari design web CSS (cascadding style sheet) adalah mengubah text menjadi tebal. Css juga bisa berguna dalam membuat text menjadi tebal, biasanya dalam markup html, kita selalu menggunakan tag <b>diakhir</b> untuk membuat text manjadi tebal. Untuk membuat text menjadi tebal dengan css, cukup menggunkan properti atau kode font-weight.
Penulisan properti lengkapnya seperti berikut
font-weight : bold;
sedangkan penulisan dalam format css nya seperti berikut :
<style type=”text/css”>
…..Target yang di design……
{
font-weight:bold;
}
</style>
Oke, kita akan coba sinkronkan dengan kode html, terutama pada bagian text, dan link. Silahkan buat kode html seperti berikut ini :
<html>
<head>
<style type="text/css">
.tebalkan_coy {font-weight:bold;}
</style>
</head>
<body>
<b>coba perhatikan tulisan ini, ini merupakan text yang di bold dengan kode html. ketika suatu hari aku terdiam dan menangis di bawah pohon. tak lama kemudian ada suara yang jatuh dari sebelah timur, aku menengok dnegan cepat ke arah tersebut<br/> lalu tampak sebuah kapal yang jatuh, akupun berlari ke arah tersebut, siapa tau ada orang yang bisa ku selamatkan<br/> namun naas, semua orang sudah meningggal kecuali satu orang, dia tampak seperti seorang wanita, ya seorang wanita<br/></b><br/><br/>
sekarang bandingkan dengan text dibawah ini :<br/><br/>
<div class="tebalkan_coy">
ini merupakan penebalan dengan style:text/css, lanjutkan ceita diatas. wanita itu tampak berdarah di kepalanya, namun tak banyak. ia tampak meringgis kesakitan.<br/> dan berseru "ahmad ahhmaaadd",,aku cakap dengan keras "kau masih hidup, hai bangun, ayo kita keluar dari sini". wabita itu tampak hanya menyeru nama ahmad dan ahmad, lalu aku,, oke kita kembali lagi ke markup html coy, coba lihat tampak sama.
</div>
</body>
</html>
Silahkan simpan dengan format html seperti (aku.html), silahkan buka dengan klik dua kali. Dan lihat hasilnya akan tampak seperti gambar berikut :
Penjelasan kode :
- <html> + </html> Sebagai tag pembuka dan penutup dari suatu kode html.
- <head> dan </head> di tag ini kita menaruh file css, selain itu di tag ini kita bisa membuat judul artikel dengan tag <title>, menambahkan meta, menambahkan script lainnya.
- <style> dan </style> di taginilah kita menambahkan kode properti
- .tebalkan_coy merupakan target yang akan kita design, seperti pada tag <div class=”tebalkan_coy”>, jika menggunakan “id” seperti <div id=”tebalkan_coy”>, maka ditulis pada tag stylenya menjadi, #tebalkan_coy
- font-weight : merupakan properti untuk mendesign apa yang diinginkan.
- <body> dan </body>, merupakan tag untuk menampilkan isi kepada user
- <b> dan </b> untuk menebalkan suatu text
- <br/> merupakan tag yang digunakan untuk membuat garis baru
- <div> merupakan tag kosong yang berfungsi untuk mengelompokan suatu element tertentu, dengan tag ini, kita akan mudah dalam mendesign halaman.
Oke, materi selesai, mari kita lihat tulisan lainnya.