Agar lebih menarik, mudah dalam hal pengaturans serta editing, teks pada
sebuah halaman web dapat diberikan sytle dalam kemasan CSS. Pengaturan
style tersebut meliputi banyak properti, diantaranya adalah pewarnaan,
pemilihan font, spasi dan lain sebagainya. Untuk lebih detailnya dapat dilihat
pada tabel berikut ini.
Properti Keterangan
Color Mengatur warna dari teks
Direction Menentukan arah tulisan/teks
letter-spacing Menambah ataupun mengurangi spasi antar karakter
dalam teks
line-height Mengatur tinggi baris teks
text-align Menentukan batas teks secara horisontal
textdecoration
Menentukan dekorasi/hiasan pada teks
text-indent Menentukan jarak inden dari baris pertama dalam teksblok
text-shadow Menentukan efek bayangan pada teks
texttransform Mengatur huruf besar-huruf kecil dari teks
unicode-bidi Untuk mengeset unicode
vertical-align Menentukan batas teks secara horisontal
white-space Menentukan penulisan white-space pada elemen
word-spacing Menambah ataupun mengurangi spasi antar kata dalam
teks
1) Pengaturan warna pada teks/color
CSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks
dengan CSS dapat menggunakan nilai warna sebagai berikut :
selector {color:nilai warna}
Berikut adalah contoh penulisan warna pada teks yang dituliskan secara
embeded
<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>ini adalah heading 1</h1>
Pemrograman Web
Page | 60
<p>ini adalah paragraph, ditulis dengan warna merah.
Default text-color didefinisakan pada body
selector.</p>
<p class="ex">ini adalah paragraph with class="ex".
dan warna teks biru.</p>
</body>
</html>
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut,
secara otomatis ketika terdapat teks pada tag <body., <h1> dan <p> terkena
style pewarnaan.
Gambar 4.1 penerapan CSS warna teks
2) Pengaturan spasi antar karakterf/letter-spacing
Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk
memberikan jarak (spasi) antar karakter atau huruf. Format penulisan CSS
untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai
berikut :
selector { letter-spacing:nilai spasi;}
Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini
adalah contoh penerapan dari style tersebut :
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
Pemrograman Web
Page | 61
p {letter-spacing: 0.5cm}
h4 {letter-spacing: -2px}
</STYLE>
</HEAD>
<BODY>
<p>Pengaturan Spasi Pada Paragraph</p>
<h4> Header 4</h4>
</BODY>
</HTML>
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut,
Gambar 4.2 penerapan CSS untuk pengaturan spasi pada paragraf teks
3) Pengaturan bentuk-bentuk teks/decoration
Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk
mengatur atau menghapus dekorasi dari teks. Format penulisan CSS untuk
mengaturan dekorasi teks adalah sebagai berikut :
selector {text-decoration : nilai text-decoration }
Nilai dari text-decoration dapat berupa overline, line-through, underline dan
none yang berarti tanpa dekorasi . Berikut ini adalah contoh penerapan dari
style tersebut :
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
em {text-decoration : overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
</STYLE>
</HEAD>
<BODY>
<em>Bentuk Overline</em>
<h2>Header 2, Bentuk Line-through</h2>
<h3>Header 3,Bentuk Underline</h3>
<p><a href="http://www.bem.akakom.ac.id">
Penggunaan Dalam Link,Nilai NONE</a></p>
</BODY>
</HTML>
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut,
Gambar 4.3 penerapan CSS untuk pengaturan dekorasi teks
4) Pengaturan spasi antar kata/word-spacing
Salah satu style dari CSS adalah word-spacing yang dapat digunakan untuk
memberikan jarak (spasi) antar kata. Format penulisan CSS untuk pengaturan
jarak (spasi) antar karakter atau huruf adalah sebagai berikut :
selector { word-spacing:nilai spasi;}
Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini
adalah contoh penerapan dari style tersebut :
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut,
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
p {word-spacing: 1cm}
h2 {word-spacing: 5px}
</STYLE>
</HEAD>
<BODY>
<p>Pengaturan Spasi per Kata sebesar 1 cm</p>
<h2> Peregangan Header 2 sebesar 5 px</h2>
</BODY>
</HTML>
Gambar 4.4 penerapan CSS untuk pemberian efek bayangan
5) Pengaturan jarak indentasi paragraph/text-indent
Text-indent menentukan jarak inden dari baris pertama dalam teks-blok,
sehingga teks pada baris pertama terlihat lebih menjorok kedalam dibanding
teks pada baris yang lain. Format penulisan untuk pengaturan jarak indentasi
text adalah sebagai berikut :
selector { text-indent:nilai indent}
Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini
adalah contoh penerapan dari style tersebut :
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
p {text-indent: 2cm }
</STYLE>
</HEAD>
<BODY>
<p>
Form adalah salah satu bentuk halaman web yang digunakan
untuk menerima masukan dari pengguna,
untuk selanjutnya masukan dari pengguna tersebut diolah
menggunakan bahasa pemrograman web,
baik secara server side scripting(misalkan PHP, JSP)
ataupun client-side scripting (javascript).
</p>
Tanpa text indent.
Form adalah salah satu bentuk halaman web yang digunakan
untuk menerima masukan dari pengguna,untuk selanjutnya
masukan dari pengguna tersebut diolah menggunakan bahasa
pemrograman web,baik secara server side scripting(misalkan
PHP, JSP)
6) Pengubahan huruf besar dan huruf kecil dari sebuah teks/texttransform
Teks-transform properti digunakan untuk menentukan huruf besar dan kecil
dalam teks. Format penulisan CSS untuk pengaturan text indent adalah
sebagai berikut :
selector { text-transform:nilai text transform}
Nilai text transform dapat diisi dengan uppercase,lowercase, capital. Pada
listing kode berikut terlihat CSS dituliskan dalam bentuk CLASS p.besar, p.kecil
dan p.kapital. Hal ini bertujuan untuk memberikan pengaturan yang berbeda
pada paragrafnya.
<STYLE ="text/css">
p.besar {text-transform: uppercase}
p.kecil {text-transform: lowercase}
p.kapital {text-transform: capitalize}
</STYLE>
Berikut ini adalah contoh penerapan dari style tersebut :
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
p.besar {text-transform: uppercase}
p.kecil {text-transform: lowercase}
p.kapital {text-transform: capitalize}
</STYLE>
</HEAD>
<BODY>
<p class="besar">
pengubahan menjadi huruf Besar (Kapital)
</p>
<p class="kecil">
PENGUBAHAN MENJADI HURUF KECIL
</p>
<p class="kapital">
huruf kapital pada setiap awal kata
</p>
</BODY>
</HTML>
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut,
Gambar 4.6 penerapan CSS untuk pengaturan text-transform
7) Pember
0 komentar: