6. Modul Kegiatan CSS
Penggunaan CSS dalam HTML
6.1 Pokok Bahasan
1. Internal CSS
2. External CSS
3. CLASS dan ID
4. Tag DIV dan SPAN
6.2 Tujuan Praktikum
1. Praktikan mampu memahami maksud dari penggunaan Internal dan External CSS pada Dokumen HTML dan struktur synta-nya.
2. Praktikan mampu menggunakan Class, ID, Div, Span dalam dokumen HTML dan memahami maksud dari penggunaannya.
6.3 Petunjuk Praktikum
1. Praktikan diharapkan mempersiapkan diri dengan mempelajari dan memahami teori HTML dan CSS yang diberikan pada saat perkuliahan teori.
2. Kegiatan praktikum dilakukan dengan cara mempelajari dasar teori dan melakukan langkah-langkah yang diberikan pada subjudul Dasar Teori dan Kegiatan.
3. Pada setiap modul, Praktikan wajib mengerjakan jurnal praktikum berupa laporan dengan format yang telah ditentukan dan diserahkan kepada Asisten Laboratorium.
6.4 Dasar Teori dan Kegiatan
1. Internal CSS
Penggunaan kode CSS dalam dokumen HTML dapat dilakukan dengan 2 cara yaitu Internal dan External. Internal Style Sheet berarti kode-kode CSS berada pada bagian tag Head dokumen HTML, seperti contoh berikut.
| Contoh1: Internal Style Sheet | Modul6-1.html |
| <html> <head> <title>Contoh Internal Style Sheet</title> <style type="text/css"> h1 {color: black; font-family: ”Courir new”, Verdana, Tahoma; } p {color: blue; text-align: center; font-family: tahoma; } </style> </head> <body> <h1>Ini Teks Judul menggunakan H1</h1> <p>Ini merupakan teks atau sebuah paragraf</p> </body> </html> | |
2. External CSS
External Style Sheet berarti kode-kode CSS berada dalam file tersendiri dan terpisah dengan dokumen HTML, artinya ada dua file yang harus dibuat yaitu satu file tempat menyimpan kode-kode CSS dengan extension *.css dan satu file utama misalnya dokumen HTML dengan tambahan tag pemanggil kode CSS, seperti contoh berikut:
| Contoh2: Kode CSS untuk External Style Sheet | Modul6-2a.css |
| h1 {color: red; font-family: "Courir new", Verdana, Tahoma; } p {color: yellow; text-align: center; font-family: tahoma; } | |
| Contoh3: External Style Sheet | Modul6-2b.html |
| <html> <head> <title>Contoh External Style Sheet</title> <link type="text/css" rel="stylesheet" href="modul6-2a.css" /> </head> <body> <h1>Ini Teks Judul menggunakan H1</h1> <p>Ini merupakan teks atau sebuah paragraf</p> </body> </html> | |
Simpan file Modul6-2a.css pada contoh diatas dalam satu direktori dengan Modul6-2b.html, untuk mempermudah pemanggilan. Apabila file css disimpan dalam direktori terpisah maka foldernya disertakan pada bagian href, misalnya: ...href=”folder/file.css”.
Perhatikan file Modul6-2b.html, untuk external style sheet kita menambahkan tag link di tag head HTML dengan parameter-parameter Type, Rel dan Href, dengan Href menunjukkan link file CSS yang dituju.
Dari dua contoh diatas, bisa dilihat perbedaannya dalam penggunaan CSS. Bisa menggunakan Internal Style Sheet ataupun External Style Sheet. Untuk pembuatan situs yang besar, penggunaan External memiliki keunggulan dibandingkan dengan Internal. Tapi untuk alasan Kepraktisan, untuk contoh-contoh dalam modul ini selanjutnya kita akan menggunakan cara Internal, agar memudahkan dalam penganalisaan.
3. CLASS
Class dalam CSS digunakan jika kita ingin memberikan lebih dari satu jenis style pada suatu tag HTML. Terdapat 3 jenis Class, yaitu:
1. Class, terdapat Selector diikuti dengan Titik dan Nama_Class serta Property dan Value. Formatnya adalah: selector.(titik)nama_class{property:value}, kita bisa memberikan nama class dengan apa saja, bebas. Contohnya:
| Contoh4: Contoh Class | Modul6-3.html |
| <html> <head> <title>Contoh Class</title> <style type="text/css"> p.hitam {color: black;} p.merah {color: red;} </style> </head> <body> <p class=”hitam”>Paragraf ini berwarna hitam</p> <p class=”merah”>Paragraf ini berwarna merah</p> <!-- ada dua alternatif untuk mengkustom p --> </body> </html> | |
2. Generic Class, tidak ada Selector tetapi langsung Titik dan Nama_Classs serta Property dan Value. Formatnya: .(titik)nama_class{property:value}, kita bebas memberikan nama untuk nama class-nya. Keuntungan generic class adalah kita bisa memakai style-nya pada tag apaun di kode HTML. Contohnya:
| Contoh5: Contoh Generic Class | Modul6-4.html |
| <html> <head> <title>Contoh Generic Class</title> <style type="text/css"> .biru {color: blue;} .merah {color: red;} </style> </head> <body> <h1 class=”biru”>Judul Berwarna Biru</h1> <p class=”merah”>Paragraf ini berwarna merah</p> <h2 class=”merah”>Judul Berwarna merah</h2> <p class=”biru”>Paragraf ini berwarna biru</p> </body> </html> | |
3. Pseudo Class, merupakan style built-in yang telah ada pada CSS dan didukung oleh beberapa browser. Nama class dari pseudo-class sudah ditentukan. Formatnya: selector:(titik_dua)nama_class{property:value}.
Pada Contoh6 mengenai pseudo class, dari skrip HTML Modul6-5.html yang dibuat akan menghasilkan sebuah tampilan berupa hyperlink yang akan berubah warna tergantung dari kondisinya. Jika link ini telah dikunjungi maka akan berubah ungu, jika pernah dipilih akan berwarna hijau, dan seterusnya. Urutan style CSS untuk selector a harus dibuat seperti contoh tersebut. Jika tidak, style hover dan active tidak akan bekerja dengan semestinya.
| Contoh6: Contoh Pseudo Class | Modul6-5.html |
| <html> <head> <title>Contoh Pseudo</title> <style type="text/css"> a:link {color:blue;} a:visited {color:purple;} a:hover {color:red;} a:active {color:green;} </style> </head> <body> <a href=”www.unsil.ac.id”>Unsil</a> </body> </html> | |
4. ID
Selector ID mirip dengan Generic Class pada CLASS. ID bisa digunakan untuk Tag apapun di HTML dan tidak spesifik untuk satu Tag saja. Perbedaan ID dengan Generic Class adalah ID hanya bisa digunakan sekali dalam kode HTML pada satu halaman sehingga apabila ada Tag lagi yang menggunakan ID yang sudah terpakai maka akan diabaikan. Untuk membuat ID dalam CSS diawali dengan tanda pagar ( # ) lalu diikuti nama ID nya (nama ID bisa apa saja). Formatnya: #nama_id{property:value}.
| Contoh7: Contoh Penggunaan ID | Modul6-6.html |
| <html> <head> <title>Contoh ID</title> <style type="text/css"> #bahaya { color:red; font-family:"Times New Roman", Times, Serif; text-align:left;} #hati-hati { color:yellow; font-family:"Courier New", Courier, Monospace; text-align:center;} #aman { color:green; font-family:Arial, Helvetica, Sans-serif; text-align:right;} </style> </head> <body> <h1 id="bahaya">MERAH</h1> <p id="bahaya">Warna merah menunjukan tanda Bahaya!</p> <h1 id="hati-hati">KUNING</h1> <p id="hati-hati">Warna kuning menunjukan tanda Hati-Hati!</p> <h1 id="aman">HIJAU</h1> <p id="aman">Warna hijau menunjukan tanda Aman!</p> <h4 id="bahaya">Patuhi Rambu Lalu Lintas</h4> </body> </html> | |
Perhatikan listing program pada Contoh7, walaupun menurut aturan ID hanya boleh digunakan sekali saja dalam kode HTML tapi dalam contoh diatas masing-masing ID digunakan sebanyak 2 atau 3 kali dan apabila dijalankan pada browser IE hasilnya baik Heading ataupun Paragrafnya mengikuti style dari ID. Jadi walaupun teori menyatakan hanya boleh menggunakan sekali namun pada kenyataannya bisa digunakan berkali-kali.
Umumnya, kode HTML dan CSS tidak Case Sensitive artinya kita menuliskan kode dalam huruf besar, huruf kecil, campuran besar dan kecil tidak menjadi masalah asalkan namanya tetap sama, misalnya: BODY, body, BoDy merujuk pada tag yang sama yaitu body. Khusus untuk selector CLASS dan ID bersifat Case Sensitive. Sebagai contoh penulisan Yellow dengan yelow akan dianggap beda oleh browser. Agar dapat dijalankan pada banyak platform sebaiknya untuk HTML dan CSS menggunakan huruf kecil semua.
5. Tag DIV
Dengan menggunakan kode HTML, tampilan suatu halaman web dapat dibuat dengan menggunakan metoda Tabel. Untuk mencapai hasil yang sama seperti metoda tabel namun dengan kode yang lebih efisien, kita dapat menggunakan Tag DIV dan CSS. Jadi, Tag DIV membagi suatu halaman web menjadi bagian-bagian halaman, mirip dengan Tag p tetapi membagi dalam bagian yang lebih besar. Tag DIV mempunyai Tag pembuka dan tag penutup: <div></div>.
| Contoh8: Contoh Penggunaan DIV | Modul6-7.html |
| <html> <head> <title>Contoh DIV</title> <style type="text/css"> #bagian-header { background: #0f0; position: absolute; top: 0px; left: 0px; width: 800px; height: 100px;} #bagian-kiri { background: #f00; position: absolute; top: 100px; left: 0px; width: 150px; height: 500px;} #bagian-content { background: #fff; position: absolute; top: 100px; left: 150px; width: 650px; height: 500px;} #bagian-footer { background: #0f0; position: absolute; top: 600px; left: 0px; width: 800px; height: 50px;} </style> </head> <body> <div id="bagian-header">This is Hulu</div> <div id="bagian-kiri">This is Kenca</div> <div id="bagian-content">This is Kontet</div> <div id="bagian-footer">This is Suku</div> </body> </html> | |
Perhatikan, contoh diatas menghasilkan suatu halaman web dengan dimensi tetap dan posisi absolut untuk semua Tag DIV-nya. Ukuran lebar (width), tinggi (height), koordinat posisi (top, left) dari semua DIV dinyatakan dengan pixel. Artinya untuk membuat satu halaman web dengan banyak dimensi kita harus bisa menentukan koordinat-nya. Biasanya penggunaan DIV hanya untuk dasar atau template saja, dimana diantara tag <div></div> dapat disisipkan tag <Table></table>. Coba bandingkan dengan contoh berikut ini:
| Contoh9: Contoh Pembanding dengan Tabel | Modul6-7a.html |
| <html> <head> <title>Contoh DIV-Dengan Table</title> </head> <body topmargin="0" leftmargin="0"> <table border="0" cellpadding="0" cellspacing="0" width="800"> <tr> <td colspan="2" width="800" height="100" bgcolor="#00ff00" valign="top">This is Hulu</td> </tr> <tr> <td width="150" height="500" bgcolor="#ff0000" valign="top">This is Kenca Juga</td> <td width="650" height="500" bgcolor="#ffffff" valign="top">This is Kontet Juga</td> </tr> <tr> <td colspan="2" width="800" height="50" bgcolor="#00ff00" valign="top">This is Suku Juga</td> </tr> </table> </body> </html> | |
6. Tag SPAN
Tag SPAN hampir sama dengan tag DIV, tag Span merubah style dari suatu konten web yang ditutupinya. Perbedaan utama tag span denga tag div adalah tag div secara otomatis akan membagi halaman web walaupun tidak diterapkan style apapun di dalam tag-nya, sedangkan tag span hanya memberi tahu browser untuk memberikan style pada konten yang ditutupinya dan tidak otomatis membagi halaman web. Tag Span mempunyai tag pembuka dan penutup yaitu: <span></span>.
Contoh penggunaan tag span dalam halaman web atau pada sebuah dokumen HTML dapat dilihat pada Contoh10, dengan file Modul6-8.html berikut ini:
| Contoh10: Contoh Penggunaan SPAN | Modul6-8.html |
| <html> <head> <title>Contoh SPAN</title> <style type="text/css"> #merah {color: red} #kuning {color: yellow} #kelabu {color: gray} #merahmuda {color: pink} #biru {color: blue} </style> </head> <body> <p>Balonku Ada Lima</p> <p>Rupa-Rupa Warnanya</p> <p> <span id="merah"><b>Merah</b></span> <span id="kuning"><b>Kuning</b></span> <span id="kelabu"><b>Kelabu</b></span> </p> <p> <span id="merahmuda"><b>Merah Muda</b></span>, dan <span id="biru"><b>Biru</b></span> </p> <p>Meletus Balon Kuning.. DUUOOOOORRRR!</p> <p>Hatiku Sangat Kacau</p> <p>Balonku Tinggal Empat, Kupegang Erat-Erat</p> </body> </html> | |
6.5 Contoh CSS Lainnya
Berikut ini adalah contoh-contoh CSS yang bisa anda gunakan sebagai referensi Bagian terpenting dari memahami CSS adalah mengetahui cara peggunaannya dan property apa saja yang bisa diterapkan.
| Body { scrollbar-face-color : #cccc9a; scrollbar-shadow-color : #cccc9a; scrollbar-highlight-color : #cccc9a; scrollbar-3dlight-color : #cccc9a; scrollbar-darkshadow-color: #cccc9a; scrollbar-track-color : #f4f4d9; scrollbar-arrow-color : #000000; } textarea,input { background : transparent; font-size : 10px; font-family : Verdana, Tahoma; color : #000000; border-top : #000000 1px solid; border-bottom : #000000 1px solid; border-left : #000000 1px solid; border-right : #000000 1px solid; } select,option { background : transparent; font-size :10px; font-family : Verdana, Tahoma; color : #000000; border-top : #000000 1px solid; border-bottom : #000000 1px solid; border-left : #000000 1px solid; border-right : #000000 1px dotted; } a:hover { text-decoration : underline; font-size : 10px; font-family : "Verdana"; color : #ff3300; } a { text-decoration : none; font-size : 10px; font-family : "Verdana"; font-weight : bold; color : #000000; } hr { color : #ffffff; height : 1px; width : 100%;} .mystyle1 { font-family : verdana; font-size : 10px; color : #000000; border : 1px solid #f0f0f0; border-left : 1 solid #f0f0f0; border-right : 1 solid #f0f0f0; border-top : 1 solid #f0f0f0; border-bottom : 1 solid #f0f0f0; bgcolor : #ffffff;} .mystyle2 { font-size : 40px; font-weight : bold; font-family : Verdana, Arial, Helvetica, sans-serif; color : #ffffff; } |
6.6 Jurnal Praktikum
Buka sebuah situs (apa saja) di Internet, yang penting situs tersebut menggunakan dan memanfaatkan CSS. Pelajari file CSS yang dimiliki situs tersebut, lalu buatlah Satu dokumen dengan nama Tugas-xxx.html (xxx diisi dengan NPM anda) mengenai contoh-contoh penerapan CSS yang anda dapatkan kedalam halaman web atau dalam dokumen HTML yang baru.
Jurnal Praktikum dikumpulkan dalam bentuk:
a. Laporan yang berisi Source Code (HTML dan CSS) dan Print Screen tampilan tugas anda pada browser.
Laporan wajib menggunakan kertas A4, Format laporan tanyakan ke Asisten!
b. File Tugas-xxx.html diperlihatkan dan diserahkan pada Asisten Laboratorium.
c. File Tugas-xxx.css diperlihatkan dan diserahkan pada Asisten Laboratorium.
Tugas dikerjakan sendiri-sendiri, tidak diperkenankan melakukan Copy-Paste-Replace terhadap tugas rekan anda. Apabila ditemukan Plagiat (antar teman sekelas atau antar teman beda kelas), maka semua tugas yang ”Sama” tersebut dianggap batal/ tidak mengumpulkan!
No comments:
Post a Comment