LAPORAN PRAKTIKUM MONITORING BERBASIS WEB

LAPORAN PRAKTIKUM MONITORING BERBASIS WEB
Modul III
“Cascade Style Sheet”
Disusun Oleh :
Fahmi Ahmad Husaeni
201302025
Dosen pengampu :
Deni Kurnia S.Pd, M.T
Program Studi :
Teknik Mekatronika
POLITEKNIK ENJINERING INDORAMA
PURWAKARTA
2015
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
DAFTAR ISI
HALAMAN JUDUL ................................................................................................ i
KATA PENGANTAR .............................................................................................ii
DAFTAR ISI.......................................................................................................... iii
BAB I PENDAHULUAN ........................................................................................ 1
1.1 Latar Belakang ............................................................................................. 1
1.2 Tujuan .......................................................................................................... 1
BAB II PEMBAHASAN ......................................................................................... 2
2.1 Landasan Teori............................................................................................. 2
2.1.1 Cascade Style Sheet ......................................................................... 2
2.1.2 Dasar Penulisan CSS ........................................................................ 2
2.2 Alat dan Bahan ............................................................................................. 2
2.3 Langkah Kerja .............................................................................................. 3
2.4 Analisa Hasil Praktikum .............................................................................. 6
BAB III PENUTUP ................................................................................................. 8
3.1 Kesimpulan ................................................................................................... 8
3.2 Tabel Penilaian .............................................................................................. 8
DAFTAR PUSTAKA .............................................................................................. 9
iii
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
BAB II
PEMBAHASAN
2.1 Landasan Teori
2.1.1 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.
2.1.2 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
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
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
5
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
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
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
Tanggal :
Nama :
Nim
:
8
Capaian Hasil
DAFTAR PUSTAKA
Devianto, Rudi. Cara Cepat Menguasai CSS “ebook”
9