Post on 08-Jul-2015
description
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 1
PEMROGRAMAN BERBASIS WEB
CSS (Cascading Style Sheets)
Oleh : Luszara Lucky Viona
Nim :120651229
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 2
CSS
1. Tujuan Memahami konsep dasar CSS dan penggunaannya pada web.
2. Dasar Teori
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.
3. Keuntungan CSS Memudahkan dalam penggantian format secara keseluruhan. Lebih praktis. Untuk mengubah tampilan web, tanpa mengubah layout
utamanya.
4. Tools Disini telah di sediakan sebuah tampilan web, tinggal
bagaimana kita mengatur dan menyesuaikan tampilannya sesuai dengan keinginan kita.
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 3
File yang sudah ada di dalamnya:
bg-nav header
susuindex.php
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 4
Setelah itu buat file php, , yaitu index.php dengan menggunakan editor apa saja yang anda sukai.
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 5
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 6
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 7
Dari tampilan web diatas, ada beberapa pembahasan cara merubah tampilan melalui script diatas:
1.Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama)
2.Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.
3.Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS
4.Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman.
PEMBAHASAN
1. Menyesuaikan Teks yang dimaksud dengan paragraf pertama.
Berikut adalah PARAGRAF PERTAMA:
DAN INI TEKS YANG AKAN DISESUAIKAN DENGAN PARAGRAF PERTAMA:
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 8
Untuk merubah tampilannya, buka script
Lalu di bawahnya ditambahi dengan script berikut,
Maka Hasilnya:
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 9
2. Membuat menu menjadi sebuah link
Dalam script css, ada script untuk mengatur menu link
1. #menu : untuk membuat background menggunakan gambar bg-nav.jpg dengan perulangan horizontal sesuai tinggi (height) dan lebar (width).
2. #menu table : membuat table tanpa border.
3. #menu a : tag a yaitu anchor untuk mengatur teks link.
4. #menu a:hover : (hover) untuk mengatur fungsi link setelah disorot oleh kursor.
5. #menu td : mengatur teks pada kolom menu.
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 10
Untuk membuat menu navigasi, buka script:
Tambahkan tag anchor dan penutup anchor ppada menu-menu yang akan dijadikan sebuah link:
Hasilnya bisa dilihat dalam tampilan web:
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 11
3. Mengisi bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb) dengan menggunakan css. Berikut kode css yang saya tambahkan, untuk menampilkan daftar artikel dan gambar:
Maka beginilah hasilnya:
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 12
4. Menambahkan teks/ tulisan yang proporsional di bagian header halaman. Tambahkan kode css, seperti berikut:
Maka seperti inilah hasilnya:
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 13
Dan inilah tampilan seluruhnya:
May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a
Page 14
Kesimpulan:
Cascading Style Sheet (CSS) merupakan bahasa pemrograman untuk mengatur tampilan suatu website atau blog. Cascading Style Sheet merupakan bahasa pemrograman yang berguna untuk pembuatan dynamic HTML. Dengan menggunakan Cascading Style Sheet , Anda dapat mengatur atau mempercantik tampilan website atau blog, antara lain mengatur jenis , ukuran, warna front; jarak antara baris dan panjangnya, marjin dan Indentasi, background dan warna, serta masih banyak lagi. Penggunaan Cascading Style sheet (CSS) bukanlah hal yang wajib, tanpa CSS Anda dapat membuat sebuah web tetapi penggunaan CSS (Cascading Style Sheet) dalam pembuatan web merupakan kelebihan tersendiri.
Menggunakan CSS tidak merupakan perangkat lunak tertentu, karena merupakan script yang telah embedded dengan HTML. Anda cukup menggunakan aplikasi notepad untuk menciptakan script CSS sendiri.