laporan pbw 4
TRANSCRIPT
Pemrograman Berbasis WEB
Tugas 4
Oleh
(Yudha Anggara)
(1210651028)
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2013/2014
Pertemuan 5
Pemrograman Berbasis Web
Apa itu CSS?
CSS adalah singkatan dari Cascading Style Sheets.
CSS adalah aliran dari suatu kode ke kode lain yang saling berhubungan.
CSS merupakan kumpulan kode-kode berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan CSS:
Memudahkan dalam penggantian format secara keseluruhan.
Lebih praktis.
Untuk mengubah tampilan web, tanpa mengubah layout utamanya.
Sintax CSS:
Terdiri dari beberapa set peraturan yang memiliki: selector, property, value. selector {property: value;} Selector menunjukkan bagian mana yang hendak diatur/diformat.
Property bagian dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Sintax CSS (cont’d)
Contoh sintaks CSS: h1 {color: red;} Keterangan: Selector: h1
Property: color
Value: red Terjemahan bahasa manusia: mengatur color dari h1 ke red (warna merah)
Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan pemisah koma.
Misalkan mengatur tag-tag h1, h2, h3 menggunakan warna merah, maka CSSnya menjadi: h1, h2, h3 {color: red;}
Penggunaan Multi Property
Untuk mengatur lebih dari satu property gunakan pemisah titik koma ( ; )
Contoh: h1, h2, h3 { color: red; font-family: arial; font-size: 150%; }
CSS Comment
Menggunakan syntax pembuka /* dengan penutup */ untuk menuliskan komentar di CSS. Contoh:
/* tulis komentar anda disini */ p { text-align: justify; /* tulis lagi komentar anda disini */ color: blue; font-family: arial; }
Pemasangan CSS di HTML
Ada 3 cara memasang CSS ke dalam HTML: 1.Inline CSS
2.Embedded CSS
3.Import CSS file
Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML.
Penulisan cara ini tidak memerlukan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika memformat suatu elemen hanya satu kali.
Contoh: <p style=“color:blue;”> isi paragraf. </p>
Embedded CSS
Menempelkan kode CSS diantara tag <head> dan </head> atau dapat juga diantara tag <body> dan </body>
Contoh: <head> <style type=“text/css”> p {color:blue;} </style> </head>
Import CSS File
Kode CSS dituliskan pada file tersendiri berekstensi .css
Kemudian file .css tersebut diimport diantara tag <head> dan </head>
Contoh: <head> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> </head> Pada kode href itulah yang merujuk pada file CSS, yaitu berada pada folder css dengan nama file style.css
Class dan Id Selector
Pada contoh sebelumnya, penggunaan tag HTML sebagai selector.
Misalkan membuat kode CSS untuk tag <h1>, sintaks CSSnya h1 {color: red;}
Sehingga ketika menggunakan tag <h1> maka teksnya berwarna merah.
Jika membutuhkan format tersendiri untuk elemen tertentu bagaimana? Maka dibutuhkan penentuan Class dan ID Selector.
Class Selector
Class selector adalah penulisan selector untuk sekelompok elemen yang sering digunakan pada beberapa elemen.
Format penulisan class selector: .nama_class_selector {property: value;} Deklarasi di HTML menggunakan atribut class.
Contoh: <div class="nama_class_selector"> dan diakhiri dengan tag </div>
Class Selector (cont’d)
Penulisan kode CSS: .tengah {text-align: center;} p.tengah {color: red;} h1.kiri {color:blue;} h1.tengah {color:black;} Pemakaian kode CSS ke HTML:
<p class=“tengah”>Teks tengah akan berwarna merah</p> <div class="tengah"> <h1>Tag h1 tengah akan berwarna hitam</h1> </div> <h1 class="kiri">Tag h1 kiri akan berwarna biru</h1>
ID selector
ID selector digunakan untuk menentukan format style pada elemen tunggal yang unik.
Menggunakan atribut id pada HTML, dan didefinisikan dengan tanda # pada sintaks CSS.
Contoh:
TUGAS 4
Hasil:
