LAPORAN PRAKTIKUM MONITORING BERBASIS WEB

Transkripsi

1 LAPORAN PRAKTIKUM MONITORING BERBASIS WEB Modul III Cascade Style Sheet Disusun Oleh : Fahmi Ahmad Husaeni Dosen pengampu : Deni Kurnia S.Pd, M.T Program Studi : Teknik Mekatronika POLITEKNIK ENJINERING INDORAMA PURWAKARTA 2015

2 KATA PENGANTAR Puji syukur penulis panjatkan kehadirat Allah SWT karena atas rahmat dan kuasa-nya penulis dapat menyelesaikan laporan praktikum mata kuliah Monitoring Berbasis Web tepat pada waktunya. Laporan ini disusun berdasarkan praktikum modul III yang telah dilaksanakan sebelumnya. Dalam penulisan dan pelaksanaan kegiatan praktikum penulis banyak mendapat masukan dari berbagai pihak, untuk itu penulis ingin mengucapkan terima kasih kepada segenap pihak yang telah berkontribusi kepada penulis, yaitu : 1. Bpk. Deni Kurnia S.Pd M.T selaku dosen pengampu mata kuliah Monitoring Berbasis Web. 2. Rekan-rekan program studi Teknik Mekatronika yang telah berkontribusi yang tidak bisa penulis sebutkan satu persatu. Penulis menyadari bahwasanya konten dalam laporan ini masih jauh dari kata sempurna. Hal ini dikarenakan dari ilmu dan pengalaman penulis yang masih terbatas dan berkembang. Untuk itu, penulis sangat mengharapkan kritik dan saran yang membangun demi terciptanya suatu kesempurnaan dimasa yang akan datang. Akhir kata, penulis berharap semoga apa yang penulis sampaikan dalam laporan ini dapat menjadi tambahan ilmu bagi yang membaca dan mempelajarinya. Purwakarta, September 2015 Penulis ii

3 DAFTAR ISI HALAMAN JUDUL... i KATA PENGANTAR... ii DAFTAR ISI... iii BAB I PENDAHULUAN Latar Belakang Tujuan... 1 BAB II PEMBAHASAN Landasan Teori Cascade Style Sheet Dasar Penulisan CSS Alat dan Bahan Langkah Kerja Analisa Hasil Praktikum... 6 BAB III PENUTUP Kesimpulan Tabel Penilaian... 8 DAFTAR PUSTAKA... 9 iii

4 BAB I PENDAHULUAN 1.1 Latar Belakang Web atau biasa disebut website telah menjadi salah satu media untuk mencurahkan segala bentuk kreativitas manusia, baik seni, politik, ekonomi dan sains. Seiring berjalannya waktu, teknologi perancangan web pun kian berkembang. Tidak hanya dari segi program dan fungsi, kini aspek estetika pun menjadi daya jual yang patut diperhitungkan. Banyak sekali web yang dibangun dengan desain unik demi meningkatkan jumlah visitor / pengunjung yang mengakses web tersebut. Dengan pengunjung yang makin meningkat akan membuat web tersebut menjadi terkenal dan akan membuat para pembuat iklan tertarik untuk memuat iklannya. Tentunya hal tersebut akan menjadi ladang penghasilan bagi si pembuat website. CSS merupakan salah satu script / pemrograman dibuat untuk mempercantik tampilan web. Penggunaan CSS dalam perancangan website semakin digemari dan bahkan menjadi suatu kebutuhan bagi si perancang web. Dengan CSS, perancang web akan terbantu untuk membuat interface yang unik dan menarik serta tidak perlu melakukan setting berulang kali untuk tiap halaman web. 1.2 Tujuan Setelah melaksanakan praktikum ini, mahasiswa diharapkan mampu : 1. Membuat web berbasis HTML dan CSS. 1

5 BAB II PEMBAHASAN 2.1 Landasan Teori Cascade Style Sheet Style Sheet adalah text sederhana dengan eksitensi (.css) yang ditulis menurut aturan bahasa pemrograman yang merujuk rekomendasi dari CSS 1 atau CSS 2 dari W3C/ World Wide Web (w3.org) yang merupakan badan gabungan dari pemilik web, universitas, perusahaan ( seperti : Microsoft, Netscape, Apple, Opera, Mozilla dan Macromedia) tak luput juga para ahli dalam bidang web. W3C dapat dikatakan sebagai acuan atau pedoman dalam menentukan teknologi paling muktakir pada web, tujuannya adalah untuk mengurangi kekacauan Kode pada sebuah web serta mempermudah akses web oleh user dari berbagai macam Browser Dasar Penulisan CSS Selektor {Dekalarator}; Selektor adalah tag dari penulisan HTML biasa, misal H1, H2, p, b dll. Sedangkan deklarator adalah yang memerintahkan browser untuk membuat tampilan pada selector sesuai dengan perintah pada deklarator. Selektor ID Fungsi dari selektor ID adalah untuk memberi tanda supaya pada tag HTML yang sudah diberi ID bisa diberi format lain. Selektor Class Untuk selektor Class fungsinya sama dengan selektor ID namun pada selektor Class anda bisa memberi lebih dari satu selector class tetapi pada selektor ID anda tidak bisa memberi nama ID yang sama. 2.2 Alat dan Bahan 1. PC atau Laptop 2. HTML editor (Coffee Cup, Notepad ++) 3. Website yang telah dibuat sebelumnya. 2

6 2.3 Langkah Kerja Fitur yang akan ditambahkan pada web adalah fitur login untuk member. 1. Buka HTML editor. 2. Buka rancangan web sebelumnya / index.html. 3. Ketikan tag seperti berikut pada index.html : Keterangan : Tag tersebut terletak pada bagian kolom bagian kanan tabel. Tag div berfungsi untuk mengelompokan tag-tag yang bertujuan untuk memudahkan identifikasi pada saat penambahan style. Penambahan Id berfungsi untuk penanda style pada file css. 4. Jalankan file index.html pada browser. Berikut tampilannya: 3

7 A B Gambar 1.0 Tampilan Tanpa CSS (A) Dengan CSS (B) 5. Untuk mendapatkan tampilan seperti gambar 1.0 B. Ketikan script CSS dibawah pada notepad++ atau Coffee Cup : 4

8 5

9 Keterangan : Penambahan CSS dilakukan dengan metode link. Selektor dibuat berdasarkan id pada tag HTML. Deklarator berisi style berbeda-beda untuk setiap form. 2.4 Analisa Hasil Praktikum Penambahan style menggunakan CSS dibutuhkan id agar style bisa tertuju pada tag yang diinginkan. Misal, penggunaan warna background pada tag unordered list pada left side bar dan right side bar. Jika kedua tag unordered list tersebut memiliki id sama, maka keduanya akan mendapatkan style yang sama. Karena background pada left side bar sudah ditentukan diawal (warna cokelat), maka untuk memisahkan style adalah 6

10 dengan membuat id berbeda. Pada script css baris no. 86 merujuk pada tag unordered list right side bar dengan id= right. Sedangkan script baris no.90 merujuk pada tag unordered list left side bar dengan id= left. Dengan begitu, walaupun mempunyai tag sama, tetapi settingan dapat dilakukan terpisah. Hal tersebut berlaku untuk form. Jika ingin setiap form memiliki settingan style yang berbeda, maka harus menggunakan id yang berbeda pula. Bentuk style pada tag dengan link dapat diubah dengan menggunakan block. Maksudnya adalah link tidak lagi menggunakan underline, tapi ketika mouse / pointer berada diatas link, maka pada link tersebut akan muncul block dengan warna tertentu sesuai settingan. Lihat script css baris 90. Style garis berbentuk lingkaran terputus pada gambar 1.0 B merupakan gambar sebuah lingkaran kecil (titik) yang diulang / repeat. Lihat script css no. 70. Screenshot Web Gambar 1.1 Web Dengan Penambahan Member Login 7

11 BAB III PENUTUP 3.1 Kesimpulan Tag HTML pada perancangan web digunakan untuk membuat interface web. Namun, tag HTML memiliki keterbatasan dalam mengolah lebih jauh style interface. Untuk itu, penambahan CSS memungkinkan perancang untuk membuat interface web lebih variatif. Namun, penggunaan CSS harus memperhatikan id pada tag-tag yang akan diberikan style didokumen HTML. Jika tag-tag tertentu (yang ingin dihias) tidak diberi id, maka style bisa mempengaruhi tag-tag yang lainnya yang tidak akan diberikan style. Semakin banyak tag yang ingin mempunyai tampilan beda, semakin banyak pula id nya. Tentunya hal tersebut menjadi kesulitan sendiri karena penulisan tag id lumayan merepotkan terutama bagi pengguna HTML 4. Tapi di HTML 5, tag id bisa dipersingkat dengan hanya menuliskan id-nya saja. 3.2 Tabel Penilaian Praktikan Instruktur Capaian Keterampilan Capaian Hasil Tanggal : Nama : Nim : 8

12 DAFTAR PUSTAKA Devianto, Rudi. Cara Cepat Menguasai CSS ebook 9