Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to CSS-LAPORAN
Similar to CSS-LAPORAN (20)
Recently uploaded
Recently uploaded (11)
CSS-LAPORAN
- 1. LAPORAN PEMROGRAMAN WEB CSS (Cascading Style Sheets) Disusun oleh: (MOH SYAHID) (1210651273) JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2014
- 2. 1. Tujuan Perkuliahan Memahami konsep dasar CSS dan penggunaannya pada web. 2. Keuntungan CSS - Memudahkan dalam penggantian format secara keseluruhan. - Lebih praktis. - Untuk mengubah tampilan web, tanpa mengubah layout utamanya. 3. Tampilan Index.php 4. Penjelasan Source Code/Program Penjelasan kode: <style> embedded CSS artinya penulisan css diantara tag<head>dan </head> atau juga diantara tag<body></body>
- 3. Penjelasan kode: table sebagai selector border-colapse artinya properti colapse nilai border artinya menentukan apakah batasan pada table disusutkan , 1px artinya ukuran pixel ,pixel titik pada layar #menu # artinya id selector untuk menentukan style pada elemen tunggal yang unik , atribut id digunakan dalam sintax HTML dan didefinisikakan #pada sintax CSS.#menu sebagai selector height mengatur tinggi element width mengatur lebar element background mengatur background dalam satu deklarasi nilainya url yang dituju. Penjelasan kode #menu table id selector dalam css #menu table sebagai selector border property border artinya menentukan apakah batasan pada table disusutkan nilainya none #menu a artinya id selector untuk menu a /link propertinya color untuk warna nilai white Penjelasan kode: #menu id selector a:hover artinya berlaku untuk semua elemen <a> menjadi id selector properti backgroud –color warna background nilainya #00ff66 color property nilainya green font-family artinya menentukan keluarga huruf teks,pemilihan huruf secara otomatis dilakukan browser jika jenis huruf tersedia nilainya Arabic , elemen <a> propertinya color 66cc66 #menu td artinya id menu untuk table baris height mengatur tinggi
- 4. element nilainya 40px artinya 40pixel text-align artinya menentukan penjajaran horizontal teks nilainya center artinya tengah vertical-align artinya menentukan penjajaran vertical teks nilainya middle property color nilainya #fff font menjadi property nilainya bold artinya tebal 14pixel Penjelasan kode: #isi id selector property padding artinya mengatur batas tepi dalam semua elemen dalam satu deklarasi nilainya 10 10 #isi p id selector isi p property color nilainya black properti font artinya mengatur huruf dalam satu deklarasi nilainya 11 pixel properti paddang- button artinya menentukan batas tepi dalam bawah nilainya 5pixel #isi ul id selector isi ul property color warna nilianya black penjelasanya sama seperti di id selector #isi p. Penjelasan kode : #isi img id selector isi img propertinya border artinya menentukan apakah batasan pada table disusutkan nilainya 1pixel width artinya mengatur lebar element nilianya 80pixel heigth artinya mengatur tinggi element nilainya 100pixel .table-menu artinya nama kelas selector propertinya vertical-align artinya menentukan penjajaran vertical teks nilainya top atas border-colasper artinya properti colapse nilainya collapse properti border artinya mengatur semua border dalam satu deklrasi nilainya 1pixel backround-color artinya menentukan warna sebagai background nilainya #0066cc font-familiy artinya menentukan keluarga huruf teks,pemilihan huruf secara otomatis dilakukan browser jika jenis huruf tersedia nilainya cambaria font-size artinya menentukan ukuran huruf nilainya 15pixel.
- 5. Penjelasan kode: #content_left id selector content artinya menambahkan atau mengisikan conten buatan setelah atau sebelum pada elemen left artinya kiri property floaf artinya menentukan suatu elemen mengambang nilaianya left property width artinya mengatur lebar element nilainya 236pixel height artinya mengatur tinggi element nilainya 62pixel property margin artinya mengatur batas tepi luar semua elemen dalam satu deklrasai nilainya 0 padding mengatur batas tepi dalam semua elemen dalam satu deklrasari nilainya 0. Penjelasan kode: untuk penjelasanya sama dengan yang di atas cuman yang membedakan adalah line artinya menentukan tinggi conten .
- 6. Penjelasan kode: #content_left_mid.section id selector propertinya margin artinya artinya mengatur batas tepi luar semua elemen dalam satu deklrasai nilainya 0 , property padding artinya mengatur batas tepi dalam semua elemen dalam satu deklrasari nilainya 20pixel section.section_title nama kelas selector propertinya height artinya mengatur tinggi element nilainya 25pixel font_family artinya menentukan keluarga huruf teks,pemilihan huruf secara otomatis dilakukan browser jika jenis huruf tersedia nilainya cambaria, font size menentukan ukuran huruf teks nilainya 10pixel font-weight menentukan ketebalan huruf nilainya bold artinya tebal, proprty color /warna nilainya white , propert background nilainya #cccc6 property margin artinya mengatur batas tepi luar semua elemen dalam satu deklrasai nilainya 0 0 10pixel property padding nilianya. 2pixel Penjelasan kode: .footer nama kelas selector propertinya backgroud artinya menentukan warna dalam backround nilainya yellow, property magin artinya mengatur batas tepi luar semua elemen dalam satu deklrasai nilainya 0 property padding artinya mengatur batas tepi dalam semua elemnt dalam satu deklrasi nilinya 5pixel properti font-family artinya menentukan keluarga huruf teks,pemilihan huruf secara otomatis dilakukan browser jika jenis huruf tersedia nilainya arial font-size ukuran huruf nilainya 15pixel text-align artinya menentukan penjajaran horizontal teks nilainya center/tengah property color nilinya #adad7b.
- 7. Penjelasan kode : judul title Form pembelian susu <link rel> artinya membuat code link nama filenya href link filenya tyle filenya. Penjelasan kode: membuat table width menentukan lebar table align tata letak <tr>membuat kolom table colspan, img untuk mengambil gambar. Penjelasan kode: <div id >artinya id selector di tag HTML width artinya menentukan lebar table <a href >artinya membuat kode link .kalau di css # kalau di html menggunkan atribut id Penjelasan kode : <td>membuat baris dalam table <div id=”isi”> id selector di dalam tag HTML <h1>heading color/warna nilainya blue , font/huruf nilainya bold atau tebal 16pixel <img>mengambil gambar src nama gambar yang mau di ambil<p>pragraf<ul><li>list.
- 8. Penjelasan kode: <div id>artinya id selector di dalam tag HTML . Penjelasan kode: <div id>id selector di dalam tag HTML membuat @copy dan menglinkkan style color /warna footer dan tata letak center <p>artinya pragraf <tr>artinya membuat colom <td>membuat baris di dalam kolom