LAPORAN
PRAKTIKUM
PEMROGRAMAN WEB
1
MODUL 4
CSS (Cascading Style Sheet), Class dan Id CSS
Disusun Oleh :
Randi Saputra
2015091085
Sistem Informasi
- A
UNIVERSITAS
KUNINGAN
FAKULTAS ILMU KOMPUTER
2017
====================================
Praktikum 10
<!DOCTYPE
html><html><style>
input[type=text],
select {
width:100%;
padding:12px 20px;
margin:8px 0;
display:inline-block;
border:1px solid #ccc;
border-radius:4px;
box-sizing:border-box;
}
input[type=submit]
{
width:100%;
background-color:4CAF50;
color:white;
padding:14px 20px;
margin:8px 0;
border:none;
border-radius:4px;
cursor:pointer;
}
input[type=submit]:hover
{background-color:#45a049;}
div
{border-radius:5px; background-color:#f2f2f2; padding:20px;}
</style><body>
<h3>Using
CSS to style an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="Nim">NIM</label>
<input type="text" id="nim" name="NIM"
placeholder="Nomor Induk Mahasiswa">
<label for="Nama">Nama</label>
<input type="text" id="nama" name="Nama"
placeholder="Nama Lengkap">
<label for="country">Program Studi</label>
<select id="country" name="country">
<option value="TI S1">Teknik Informatika S1</option>
<option value="SI S1">Sistem Informasi S1</option>
<option value="MI D3">Management Informatika D3</option>
<option value="TI D3">Teknik Informatika D3</option>
</select>
<input type="submit" value="submit">
</form>
</div></body></html>
Hasil Output dari coding html diatas adalah
*analisa
Pada praktikum
diatas kita mengginakan Tag <style>
di dalam CSS tag <style> adalah
tag yang harus di gunakan karena tag tersebut adalah tag yang menandakan bahwa
program di atas menggunakan CSS. Selanjutnya ialah fungsi input yaitu untuk menentukan bentuk yang akan kita gunakan untuk
membuat program tersebut, pada html kali ini merupakan contoh yang menggunkan tipe text yang berarti si user membuat suatu
halaman html yang bisa di isi secara dinamis ketika seseorang mengunjungi
halaman web tersebut.
Selain tipe text yang digunakan, ada juga submit yaitu merupakan untuk mengkonfirmasi data yang telah di isi
setelah emngunjungi halaman web atau bisa juga di gunakan untuk menuju halaman
selanjutnya.
Properti width di dalam fungsi input yaitu untuk
ukuran lembar kerja yang digunakan untuk membuat text area dari luas web yang
ada pada halaman html.
Menggunakan properti
padding yaitu untuk menentukan ukuran
dan juga memberi jarak pada text area,
seperti contoh kali ini 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 satuan yang di gunakan dalam properti padding adalah
pixel.Pada bagian margin kita gunakan untuk menentukan jarak antar text area yang di buat pada halaman html.
Berikutnya properti
display yaitu untuk menentukan jenis tampilan pada web.
Dan properti
border kita gunakan untuk menentukan warna bingkai dan tebal bingkai pada
setiap text area pada halaman html yang kita buat. Untuk border-radius kita gunakan
untuk menentukan ketajaman sudut bungkai dari text area.
Terdapat juga
Box-sizing yang mana ini berfungsi
untuk menentukan panjang dari text area yang di buat pada halman html. Ukuran
yang di gunakan dalam html di atas adalah ukuran dari area dasarnya.
Dan properti
background-color pada halaman html
kali ini yang bertipe submit. Yaitu di gunakan untuk memberi warna pada tombol
submit yang ada pada halaman web. Sedangkan untuk properti color sendiri yaitu untuk memberi warna tulisan pada tombol submit
pada halaman html.
Dan didalam
type submit ini juga menggunakan beberapa properti didalamnya seperti text area
seperti padding, margin dan lain-lain.
Untuk properti
cursor pada type submit ini kita gunakan untuk merubah bentuk cursor jika
berada pada area tombol submit.
Berikutnya hover kali ini kita gunkan untuk merubah
warna submit ketika cursor menyentuh tombol submit pada halaman html.
Diatas
merupakan beberapa jenis properti dari pada tag <style> yang kali ini kita gunakan untuk membuat desain pada
halaman html yang kita buat kali ini. Berikutnya terdapat isi dari halaman html
dibuat menggunakan script yang tertera diatas dengan beberapa penggunaan tag
seperti NIM, Nama, dan program studi dengan menggunakan tag <label> untuk memberikan judul di
masing-masing text area. Dan untuk tag <form
action="action_page.php"> yang kita gunakan menuju halaman
selanjutnya ketika user memmilih link tersebut. Dan terakhir pada pilihan
Program studi yang menggunakan tag <option>
pada dalam tag <select>
TUGAS
Buatlah
Design WEB dengan menggunakan CSS! Dengan menu tampilan CSS seperti berikut :
·
tugasrandi.css
p{
display: inline;
padding: 10px 60px 10px 60px;
color: #ffffff;
border: #cccccc;
background: #cccccc;
}
p:hover{
background: #ffffff;
color: #000000;
}
body{
text-align: left;}
·
tugas.html
<link rel="stylesheet"
type="text/css" href="tugasrandi.css"/>
<body bgcolor="yellow">
<div class="menu">
<p><b><a
href="a">HOME</a></p></b>
<p><b><a
href="a">NEWS</a></p></b>
<p><b><a
href="a">CONTACT</a></p><b>
<p><b><a
href="a">ABOUT</a></p><b>
</div>
</body>
*analisa
Dalam tugas
kali ini script external css menggunakan tag html p (untuk paragraph)
yang nantinya akan kita gunakan pada script html pada saat pemanggilan CSS.
Adanya
elemen display : inline
ini untuk mengidentifikasi elemen dalam baris yang sama dengan elemen lain yang
nantinya posisi akan sejajar pada tampilan halaman html ini.
Dan Padding : 10px 70px 10px 70px kita
gunakan yang mana untuk spasi atau ruang yang ada diantara konten yang ada serta
border yang hanya berjarak 10px dan 70px dst.
Border : #999999 kita gunakan yang mana kode itu
untuk memanggil warna abu-abu pada isi teks dalam konten menu tersebut. Color :
#ffffff untuk warna teks awal yaitu putih. Background : #cccccc kode
ini pun merupakan kode warna untuk abu-abu namun terdapat perbedaan yang
sedikit pada saat tampil pada halaman html.
p:hover {
background: #ffffff; color: #000000; } kita gunakan ketika kursor
mengarah pada menu terkait maka akan muncul perubahan warna baik dari
background nya akan menjadi warna keputihan dan pada teksnya akan berubah
menjadi warna hitam. Untuk pengaturan teksnya pun posisinya rata kiri.
Dan untuk script external CSS dalam
pemanggilan file .css yaitu dengan cara seperti berikut ini :
Adanya tag <link rel="stylesheet" type="text/css"
href="menu1.css"/> yang artinya untuk pemanggilan
file css yag telah kita buat sebelumnya.
Dalam penempatan isi ini, untuk
tampilan menu terdapat pada tag <body> dan penempatanya
berada ditengah-tengah <center> dan
terdapat atribut class dengan value menu. Yang didalamnya terdapat tag <p> yang mana untuk
memberikan paragraph yang akan kita tampilkan pada halama html.
untuk membaca modul secara offline bisa diunduh disini
Tidak ada komentar:
Posting Komentar