PWPB : Pertemuan 2

 

Membuat Halaman Saran

Melanjutkan dari materi sebelumnya, kita sudah membuat 3 halaman web statis. Yaitu Beranda, Kontak dan Profil. Kali ini kita akan membuat halaman Saran & Kritik, yang isinya adalah sebuah tabel dan form yang dikombinasikan agar terlihat lebih rapi seperti saat kita membuat halaman Kontak.

Langkah pertama kita buka dulu editor HTMLnya, disini saya menggunakan Sublime sebagai editornya. Langsung saja buka folder tempat kita menyimpan file-file HTML yang sudah pernah kita buat pada materi sebelumnya, jika kalian melewatkan materi sebelumnya maka akan kebingungan disini.

Lanjut, kita buka file index.html lalu tambahkan link file saran.html seperti berikut ini

Jika sudah, lalu save. Lakukan hal yang sama pada halaman profil.html dan kontak.html, jika tidak, maka tombol Saran pada tiap halaman tidak akan muncul.

Silakan dijalankan dengan cara klik kanan > Open in Browser

Kita sudah mempunyai link menuju halaman Saran, namun saat diklik tidak menampilkan apapun karena kita belum membuat halaman Saran.

Untuk membuat halaman Saran, kita buka kembali index.html, pilih File > Save as..
berinama saran.html dan jalankan kembali. Maka kita telah membuat halaman saran, tapi belum ada isinya.

Sekarang kita fokus pada halaman saran.

Pada halaman ini, kita akan membuat Form dan Tabel. Bisa kalian copy kode html di bawah ini dan paste di saran.html, taruh tepat di bawah tag <hr>

<form>  <table>  <tr>       <td>       <fieldset>       <legend>Saran & Kritik</legend>       <table>  <tr>       <td><p><label>Nama</label></p></td>       <td>:</td>       <td><input type="text" name="nama"></td>  </tr>  <tr>  <td><p><label>Email</label></p></td>  <td>:</td>  <td><input type="text" name="nama" placeholder="contoh@gmail.com"></td>  </tr>  <tr>       <td><p><label>Saran/Kritik</label></p></td>       <td>:</td>       <td><textarea></textarea></td>  </tr>  <tr>       <td></td>       <td></td>       <td><input type="submit" name="kirim" value="Kirim">           <input type="reset" name="batal" value="Batal">       </td>  </tr>  </table>  </fieldset>  </td>  </tr>  </table>  </form>

 

 

Jika sudah, lalu simpan dan jalankan di browser. Maka hasilnya akan seperti gambar berikut ini\

Sampai disini kita sudah membuat halaman saran. Kita bisa mengubah posisi form yang kita buat berada di tengah dengan menambahkan atribut align = “center” pada tag <table>

Pertemuan berikutnya, kita akan membuat halaman Galeri, yang isinya adalah tabel yang berisi foto atau gambar.