Laporan Praktikum Pemrograman Web Modul IV

LAPORAN PRAKTIKUM

PEMROGRAMAN WEB I

MODUL IV

Disusun Oleh :

Paulus Diki Sugianto

2015091079

SI 2015 A

SISTEM INFORMASI (S1)

FAKULTAS ILMU KOMPUTER

UNIVERSITAS KUNINGAN

2016

CSS (Cascading Style Sheet), Class dan Id CSS

Praktikum

Buat file baru, lalu ketikan kode program di bawah ini:

  Hasil Output :

 Analisis :

• Tag <style> di dalam CSS tag <style> adalah tag yang wajib di gunakan karena tag tersebut adalah tag yang menandakan bahwa program di atas menggunakan CSS.
• Lalu selanjutnya adalah fungsi input yaitu untuk menentukan bentuk yang di gunakan untuk membuat program tersebut, di atas adalah contoh yang menggunkan tipe text yang berarti si perancang membuat program yang bisa di isi secara dinamis. Selain tipe text ada juga submit yaitu adalah untuk mengkonfirmasi data yang telah di isi atau bisa juga di gunakan untuk menuju halaman selanjutnya. Di dalam fungsi input ada juga beberapa properti/atribut seperti yang tercantum dalam script di atas.
• Properti width di dalam fungsi input yaitu untuk ukuran lembar kerja yang digunakan untuk membuat text area dari luas web yang ada pada layar.
• Properti padding yaitu untuk menentukan ukuran dan juga memberi jarak pada text area, seperti contoh di atas yaitu angka pertama untuk menentukan ukuran text area dan angka ke dua yaitu untuk menentukan jarak/menjoroknya text yang kita tulis di dalam text area. Ukuran yang du gunakan dalam properti padding adalah pixel.
• Margin di gunakan untuk menentukan jarak antar text area yang di buat. Semakin besar angka yang di isi makan semakin jauh jarak antar text area.
• Selanjutnya adalah properti display yaitu untuk menentukan jenis tampilan pada web.
• Properti border di gunakan untuk menentukan warna bingkai dan tebal bingkai pada setiap text area. Sedangkan border-radius digunakan untuk menentukan ketajaman sudut bungkai dari text area.
• Box-sizing adalah untuk menentukan panjang dari text area yang di buat. Ukuran yang du gunakan dalam contoh di atas adalah ukuran dari bingkai dasarnya, bukan bingkai dari text area.
• Selanjutnya adalah properti background-color pada fungsi input yang bertipe submit. Yaitu di gunkan untuk memberi warna pada tombol submit yang ada pada web. Sedangkan properti color sendiri yaitu untuk memberi warna tulisan pada tombol submit.
• Di dalam type submit juga menggunakan beberapa properti yang di gunakan pada type text area seperti padding, margin dan lain-lain.
• Properti cursor pada type submit digunakan untuk merubah bentuk cursor jika berada pada tombol submit.
• Properti selanjutnya adalah hover yaitu di gunkan untuk merubah warna submit ketika cursor menyentuh tombol submit.
• Semua itu adalah beberapa properti yang ada pada tag <style> yang di gunakan programer untuk menentukan atau mendisain sebuah web agar memiliki tampilan yang menarik dan juga memudahkan si pengguna web. Selanjutnya adalah isi dari web yang dibuat menggunakan script diatas dengan tag-tag yang sudah di jelaskan pada praktikum sebelumnya. Yaitu dimana NIM, Nama, dan program studi menggunakan tag <label> untuk memberikan judul di masing-masing text area. Dan selanjutnya adalah tag <form action="action_page.php"> yang di gunakan menuju halaman selanjutnya. Adapun beberapa pilihan pada Program studi yang menggunakan tag <option> pada tag <select> 

Pertanyaan dan Tugas

Buatlah Design WEB dengan menggunakan CSS! Dengan tampilan menu CSS seperti berikut :

Coding Pada HTML :

Coding Pada CSS :