Laporan PWL Modul 5

MODUL 5

“CSS (Cascading Style Sheets)”

A. Tujuan

Dapat memahami dan mengetahui fungsi dari CSS (Cascading Style Sheets) sebagai bahasa pemrograman guna mengatur desain dan layout web

B. Landasan Teori
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Penempatan CSS dalam HTML:

      1.      Inline Style
      2.      Internal Style
      3.      Import Style
4.      Eksternal Style

C. Alat dan Bahan

Alat dan bahan yang digunakan dalam praktikum adalah:

      1.      PC (Personal Komputer) atau Laptop
      2.      Sistem Operasi Windows
3.      Browser (Mozilla Firefox)
4.      Notepad++
5.      Microsoft Word

D. Langkah-langkah Percobaan

Percobaan 1: Border

      1.      Membuat folder baru dengan nama L200120115
      2.      Membuka Notepad++
3.      Mengetik Script berikut :

      4.      Menyimpan file dengan nama border.html
      5.      Membuka file menggunakan browser.
6.      Hasil

Percobaan 2 : Gambar

1. Membuka Notepad++
2. Mengetik Script berikut:

      3.      Menyimpan file dengan nama gambar.html
      4.      Membuka file menggunakan browser.
5.      Hasil

Percobaan 3 : Bayangan

1. Membuka Notepad++
2. Mengetik Script berikut:

      3.      Menyimpan file dengan nama bayangan.html
      4.      Membuka file menggunakan browser.
5.      Hasil

Percobaan 4 : Hyperlink

1. Membuka Notepad++
2. Mengetik Script berikut:

      3.      Menyimpan file dengan nama hyperlink.html
      4.      Membuka file menggunakan browser.
5.      Hasil

Percobaan 5 : Form Menggunakan Ekternal Style

1. Membuka Notepad++
2. Mengetik Script berikut:

      3.      Menyimpan file dengan nama style.css
      4.      Membuka Notepad++
      5.      Mengetik Script berikut:

<html>
<head>
<title>Form</title>
<link rel='styliesheet' type='text/css' href='style.css'>
</head>
<body>
<h2>
<marquee>free registration</marquee></h2>
<form action="proses.php" method="post" name="form">
<table width="68%" border="0" align="center' cellpadding="0">
<tr>
<td class='td' width="15%">Nama</td>
<td width="2%">:</td>
<td width="83%"><input name="txtNama" type="text" id="txtNama"></td>
</tr>
<tr>
<td class='td'>tanggal lahir</td>
<td>:</td>
<td><input name="txtTgl" type="text" id="txtTgl" size="4" maxlength="2">
/
<input name="txtBulan" type="text" id="txtBulan" size="4" maxlength="2">
/
<input name="txtTahun" type="text" id="txtTahun" size="8" maxlength="4"></td>
</tr>
<tr>
<td class='td'>Alamat</td>
<td> </td>
<td><textareaini name="txtAlamat" cols="40" rows="2" id="txtAlamat"></textareaini></td></tr>
<tr>
<td class='td'>Kota</td>
<td> </td>
<td><textareaini name="txtkota" cols="40" rows="2" id="txtKota"></textareaini></td></tr>
<tr>
<td> </td>
<td> </td>
<td><input name="btnKirim" type="submit" id="btnKirim" value="Kirim">
<input name="btnCancel" type="reset" id="btnCancel" value="cancel"></td>
</tr>
</table>
</form>
</body>
</html>

      6.      Menyimpan file dengan nama style.css
      7.      Membuka file menggunakan browser.
8.      Hasil

E. Tugas

      1.      Membuat border form pada percobaan 5 menggunakan salah satu style border
           pada percobaan 1.
             Script

<html>
<head>
<title> Form</title>
<link rel='stylesheet' type='text/css' href='style1.css'>
</head>
<body>
<h2>
<marquee> Free Registration </marquee></h2>
<form action="proses.php" method="post" name="form">
<table width="68%" border="0" align="center" cellpadding="0">
<tr>
 <td class='td' width="15%">Nama</td>
 <td class='td' width="2%">:</td>
 <td class='td' width="83%"><input name="txtNama" type="text" id="txtNama"></td>
</tr>
<tr>
 <td class='td'>tanggal lahir</td>
 <td>:</td>
 <td><input name="txtTgl" type="text" id="txtTgl" size="4" maxlength="2">
 /
 <input name="txtBulan" type="text" id="txtBulan" size="4" maxlength="2">
 /
 <input name="txtTahun" type="text" id="txtTahun" size="8" maxlength="4"></td>
</tr>
<tr>
 <td class='td'>alamat</td>
 <td> </td>
 <td><textareaini name="txtAlamat" cols="40" rows="2" id="txtAlamat"></textareaini></td>
</tr>
<tr>
 <td class='td'>kota</td>
 <td>:</td>
 <td><textareaini name="txtKota"type="text" id="txtKota"></textareaini></td>
</tr>
<tr>
 <td> </td>
 <td> </td>
 <td><input name="btnKirim" type="submit" id="btnKirim" value="Kirim">
 <input name="btnCancel" type="reset" id="btnCancel" value="Cancel"></td>
</tr>
</table>
</form>
</body>
</html>

Hasil

Phantom-Wahyoe

Social Icons

Menu

Blog Archive

Senin, 20 Oktober 2014

Laporan PWL Modul 5

Tidak ada komentar:

Posting Komentar

About Me