4. Kegiatan Belajar 4 : Menyajikan Cascading Style Sheet untuk Memformat Tampilan Teks
a. Tujuan Pembelajaran.
Setelah mengikuti kegiatan belajar 4 diharapkan peserta didik dapat :
1) Memahami style-style dasar CSS untuk memformat tampilan teks
2) Menerapkan beberapa style untuk memformat tampilan teks.
3) Menyajikan CSS untuk memformat tampilan teks pada sebuah halaman web
b. Uraian materi.
Agar lebih menark, 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
text-decoration
Menentukan dekorasi/hiasan pada teks
text-indent
Menentukan jarak inden dari baris pertama dalam teks-blok
text-shadow
Menentukan efek bayangan pada teks
text-transform
Mengatur huruf besar-huruf kecil dari teks
Pemrograman Web
Page | 59
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 :
nilai HEX misalnya, "#ff0000"
nilai RGB misalnya, "rgb(255,0,0)"
nama dari warna tersebutmisalnya "red"
Format penulisan untuk pemberian warna pada text menggunakan CSS adalah 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>
Blok CSS
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>
Pemrograman Web
Page | 62
</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>
Pemrograman Web
Page | 63
<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>
Pemrograman Web
Page | 64
<HEAD> <TITLE>Format Text </TITLE> <STYLE ="text/css"> p {text-indent: 2cm } </STYLE> </HEAD> <BODY> <p> Dengan 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) 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) ataupun client-side
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut :
Gambar 4.5 penerapan CSS untuk pengaturan text indent
Pemrograman Web
Page | 65
6) Pengubahan huruf besar dan huruf kecil dari sebuah teks/text-
transform
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
Pemrograman Web
Page | 66
</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) Pemberian efek bayangan pada teks/Text shadow
Text-shadow digunakan untuk memberikan efek bayang pada sebuah teks. Berikut adalah format penulisan CSS dengan text-shadow
Selector { text-shadow: koordinatX koordinatY nilaiWarnaTeksBayangan;}
Contoh : penulisan text shadow h1 { text-shadow: 2px 2px #ff0000; }
Berikut ini adalah contoh penerapan dari style tersebut : <!DOCTYPE html> <html> <head> <style> h1 {text-shadow:2px 3px #FF0000;} </style> </head>
Pemrograman Web
Page | 67
<body> <h1>Efek Text-shadow </h1> <p><b>Catatan:</b> Internet Explorer Versi 9 dan sebelumnya tidak support pada text-shadow property.</p> </body> </html>
Bila listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar 4.7 penerapan CSS untuk pemberian efek bayangan
8) Pengaturan Text Alignment
Properti text-align digunakan untuk mengatur alignment horizontal teks. Teks dapat ditulis rata kiri, rata kanan, rata kanan kiri ataupun ditulis center. Ketika text-align diset “justify", setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar). Format penulisan CSS untuk text alignment
selector {text-align:nilai text-align;}
Berikut adalah contoh dari penulisan style text-align yang disisipkan di selector h1 dan paragraf.
h1 {text-align:center;} p.tanggal {text-align:right;} p.utama {text-align:justify;}
Pemrograman Web
Page | 68
pada selector p.tanggal dan p.utama artinya CSS akan diberikan ke paragraf dengan pemanggilan kelas “tanggal” dan “utama”. Untuk lebih lengkapnya dapat dilihat pada contoh berikut :
<!DOCTYPE html> <html> <head> <style> h1 {text-align:center;} p.tanggal {text-align:right;} p.utama {text-align:justify;} </style> </head> <body> <h1>Contoh CSS text-align</h1> <p class="tanggal">07 Desember 2013</p> <p class="utama">Properti text-align digunakan untuk mengatur alignment horizontal teks. Teks dapat ditulis rata kiri, rata kanan, rata kanan kiri ataupun ditulis center. Ketika text-align diset “justify", setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar). Format penulisan CSS untuk text alignment.selector {text- align:nilai text-align;} Berikut adalah contoh dari penulisan style text-align yang disisipkan di selector h1 dan paragraf. h1 {text-align:center;} p.tanggal {text-align:right;} p.utama {text-align:justify;} pada selector p.tanggal dan p.utama artinya CSS akan diberikan ke paragraf dengan pemanggilan kelas “tanggal” dan “utama”. Untuk lebih lengkapnya dapat dilihat pada contoh berikut :</p>
Pemrograman Web
Page | 69
<p><b>Catatan:</b> Baris ini adalah contoh penulisan tanpa CSS</p> </body> </html>
Bila listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar 4.8 penerapan CSS untuk pengaturan text-align
c. Rangkuman.
Dari paparan materi pembahasan kegiatan belajar menyajikan cascading style sheet untuk memformat tampilan teks dapat dibuat rangkuman materi sebagai berikut :
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 color, direction, letter-spacing,line-height, text-align,text-decoration, text-indent, text-shadow, text-transform, unicode-bidi, vertical-align,white-space, word-spacing
Format penulisan untuk pemberian warna pada text menggunakan CSS adalah sebagai berikut : selector {color:nilai warna}
Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut selector { letter-spacing:nilai spasi;}
Format penulisan CSS untuk mengaturan dekorasi teks adalah sebagai berikut selector {text-decoration : nilai text-decoration }
Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut selector { word-spacing:nilai spasi;}
Pemrograman Web
Page | 70
Format penulisan untuk pengaturan jarak indentasi text adalah sebagai berikut selector { text-indent:nilai indent}
. Format penulisan CSS untuk pengaturan text indent adalah sebagai berikut selector { text-transform:nilai text transform}
format penulisan CSS dengan text-shadow adalah
Selector {text-shadow: koordinatX koordinatY nilaiWarnaTeksBayangan ;}
Format penulisan CSS untuk text alignment selector {text-align:nilai text-align;}
d. Tugas.
Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam kegiatan ini masing-masing kelompok kerjakan tugas berikut :
1. Buatlah tampilan halaman web dengan memberikan style pada teks yang digabungkan dengan tabel serta gambar seperti pada contoh berikut
2. Buatlah tampilan teks dalam fielset dengan memberikan style pada teksnya seperti pada gambar berikut :
Pemrograman Web
Page | 71
3. Kemudian secara bergantian masing-masing kelompok mempresentasikan hasilnya didepan kelas.
Pemrograman Web
Page | 72
e. Tes Formatif.
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya pada lembar jawaban test formatif yang telah disediakan.
1. Sebutkan sedikitnya 5 properti dari pengaturan teks menggunakan CSS
2. Tuliskan format penulisan CSS untuk memberikan warna pada teks
3. Tuliskan format penulisan CSS untuk memberikan efek bayangan
4. Tuliskan format penulisan CSS untuk pengaturan spasi antar karakter pada
paragraf
5. Tuliskan format penulisan CSS untuk pengaturan spasi antar kata pada
paragraf
