Laporan Praktikum Pemrograman Web Modul 5

LAPORAN PRAKTIKUM

PEMROGRAMAN WEB

MODUL 5

Disusun Oleh :

NUGROHO ARI SAPUTRO

L200120105

JURUSAN TEKNIK INFORMATIKA

FAKULTAS KOMUNIKASI DAN INFORMATIKA

UNIVERSITAS MUHAMMADIYAH SURAKARTA

A. TUJUAN

Memahami dan mengetahui fungsi dari CSS (Cascading Style Sheet) sebagai bahasa pemrograman guna mengatur desain dan layout web.

B. LANDASAN TEORI

CSS (Cascading Style Sheet) adalah sebuah cara untuk memisahkan isi dengan layout dalam halaman-halaman web yang dibuat. CSS memperkenalkan template yang berupa style untuk membuat dan mempermudah penulisan dari halaman-halaman yang dirancang.

Penerapan CSS

1. Inline Style
CSS yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja. Biasanya teknik ini digunakan pada pemformatan khusus pada sebuah elemen HTML dan tidak digunakan untuk memformat seluruh dokumen web.
2. Internal Style
Pada teknik ini style diletakkan pada tengah tag antara tag <head> dan </head>. Aturan-aturan dalam style ini diatur sedemikian rupa untuk digunakan pada suatu tempat maupu untuk keseluruhan situs.
3. Import Style
Dengan teknik ini sebuah style tidak disimpan pada halaman tersebut. Namun untuk menghubungkannya dengan halaman web yang dibuat, dengan menggunakan inport yang terdapat pada style CSS.
4. Eksternal Style
Dengan menggunakan teknik ini, dapat memanggil style CSS pada file CSS yang diinginkan menggunakan perintah "Link rel" yang berfungsi untuk menghubungkan kedalam sebuah style CSS eksternal dengan nama yang telah ditentukan.

C. ALAT DAN BAHAN

1. PC / Komputer

2. Notepad ++

3. Browser Google Chrome

4. Internet

5. Modul Praktikum Pemrograman Web

D. LANGKAH PRAKTIKUM

1. Percobaan 1

- Buka aplikasi notepad++

- Ketikkan script berikut kedalam notepad++ :

- Simpan file dengan nama border.html

- Buka file dengan web browser.

- Lihat hasilnya :

2. Percobaan 2

- Buka aplikasi notepad++

- Ketikkan script berikut kedalam notepad++ :

- Simpan file dengan nama gambar.html

- Buka file dengan web browser.

- Lihat hasilnya :

3. Percobaan 3

- Buka aplikasi notepad++

- Ketikkan script berikut kedalam notepad++ :

- Simpan file dengan nama bayangan.html

- Buka file dengan web browser.

- Lihat hasilnya :

4. Percobaan 4

- Buka aplikasi notepad++

- Ketikkan script berikut kedalam notepad++ :

- Simpan file dengan nama hyperlink.html

- Buka file dengan web browser.

- Lihat hasilnya :

5. Percobaan 5

- Buka aplikasi notepad++

- Ketikkan script berikut kedalam notepad++ :

- Simpan file dengan nama style.css

- Buka lebar kerja baru pada notepad++, kemudian tulis script berikut :

<html>
<head>
<title> Form</title>
<link rel='stylesheet' 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" class='border'>
<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><textarea name="txtAlamat" cols="40" rows="2" id="txtAlamat"></.ontextarea></td>
</tr>
<tr>
 <td class='td'>kota</td>
 <td>:</td>
 <td><textarea name="txtKota"type="text" id="txtKota"></textarea.on></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>

- Simpan dengan nama file form.html

- Buka file dengan web browser.

- Lihat hasilnya :

E. TUGAS

Buatlah border form pada percobaan 5 m3nggunakan salah satu style border pada percobaan 1.
Buka notepad++
Ketikkan script berikut :

<textarea cols="56" name="" rows="12">
<html>
<head>
<title> Form</title>
<link rel='stylesheet' 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" class='border'>
<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><textarea name="txtAlamat" cols="40" rows="2" id="txtAlamat"></textarea.on></td>
</tr>
<tr>
 <td class='td'>kota</td>
 <td>:</td>
 <td><textarea name="txtKota"type="text" id="txtKota"></textarea.on></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>

Simpan dengan nama tugas.html dan lihat hasilnya :

NGOPREK - NGOPREK IT

Rabu, 22 Oktober 2014

Laporan Praktikum Pemrograman Web Modul 5

Tidak ada komentar:

Posting Komentar