-->
/

Frame dan Form HTML

Add Comment Edit

LAPORAN PRAKTIKUM
PEMROGRAMAN WEB 1
MODUL III
“Frame dan Form HTML”
Diajukan untuk memenuhi salah satu Mata Kuliah Praktikum Pemrograman Web 1
Dosen Pengampu : Rio Andriyat Krisdiawan, S.Kom., M.Kom.





Disusun Oleh
Reza Adhicahyasmara
20160910092
Sistem Informasi 2016 C



FAKULTAS ILMU KOMPUTER
PROGRAM STUDI SISTEM INFORMASI
UNIVERSITAS KUNINGAN
2018





KATA PENGANTAR

 Puji syukur penulis ucapkan atas kehadirat Allah SWT, karena rahmat dan karunia-Nya penulis diberi kesempatan untuk menyelesaikan Laporan Praktikum Pemrograman Web 1. Shalawat dan salam kita hanturkan kepada junjungan besar Nabi Muhammad SAW beserta keluarganya, sahabatnya, beserta pengikutnya hingga akhir zaman.

Penulis menyusun laporan ini dengan tema Frame dan From HTML. Laporan ini menjelaskan cara pembuatan sebuah dokumen HTML dengan menggunakan frame. Dan cara pembuatan sebuah halaman form dengan menggunakan tag form.

 Tidak lupa juga saya ucapkan terima kasih kepada kedua orang tua kami masing-masing dan terima kasih kepada dosen Pemrograman Web 1 yaitu Rio Andriyat Krisdiawan S.Kom., M.Kom. yang telah membimbing penulis dalam menyusun laporan.

Penulis menyadari bahwa dalam laporan ini masih jauh dari kata sempurna, untuk itu penulis sangat mengharapkan kritik dan saran yang sifatnya membangun guna sempurnanya laporan ini.


Kuningan, 19 Maret 2018
                                                                                                                                         

                                                                                                                Penulis.





DAFTAR ISI

Kata Pengantar
Daftar Isi

BAB I PENDAHULUAN
1.1 Maksud dan Tujuan
1.2 Landasan Teori

BAB II PEMBAHASAN
2.1 Post Test
2.2 Tugas

BAB III PENUTUP
3.1 Kesimpulan

DAFTAR PUSTAKA





BAB I
PENDAHULUAN

1.1 Maksud dan Tujuan
  1. Mampu memahami dan menjelaskan frame dalam dokumen HTML.
  2. Mampu membuat frame sederhana dan link antar frame.
  3. Mampu membuat input data dengan menggunakan tag form.
  4. Mampu membuat halaman web menggunakan frame dengan meyertakan input data.


1.2 Landasan Teori

Frame HTML
Frame merupakan sebuah teknologi yang dipakai untuk menggabungkan beberapa halaman web menjadi satu halaman yang utuh. Dapat juga dikatakan bahwa frame merupakan sarana untuk membagi halaman web menjadi beberapa bagian. Dalam penggunaan frame pada pembuatan halaman-halaman web, dikenal istilah frame dan frameset.

Frameset adalah suatu frame induk yang dapat menampung beberapa frame di dalamnya dan dapat memiliki frameset sendiri. Sedangkan frame sendiri adalah dokumen yang terdapat di dalam frameset dengan border yang mengelilinginya.

Bentuk umum : <frameset atribut ="value"> ... </frameset>

Atribut
Fungsi
Rows
Untuk menentukan jumlah baris
Cols
Untuk mentukan jumlah konten
Border
Untuk menentukan ketebalan bingkai

 

Form HTML
Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah halaman web dapat melakukan interaksi dengan web. Pengunjung dapat memasukan data melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea, submit button, dropdown dan lain-lain.

Selain itu pengunjung  juga dapat melakukan pemilihan data mengunakan elemen select list atau dengan istilah lain combo box atau drop-down list. Form membuat sebuah halaman web menjadi web interaktif dan dinamis, karena form merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna.

Berikut umum : <form atribut="value"> ... </form>
 
Semua input HTML, diletakan diantara <form>. Input HTML adalah komponen-komponen yang terdapat dalam HTML yang digunakan untuk memasukan data.

Bentuk umum input HTML : <input type="type_komponen" name="nama_komponen">




Type
Bentuk Komponen
Text
 
Textbox
 
Radio
 
Select
 
Checkbox
 
File

Button/Submit
 








BAB II
PEMBAHASAN

2.1 Post Test dan Tugas


Post Test
1 Buatlah form login dengan jumlah password yang diinputkan sebanyak 8 karakter!


  
<html>
<head>
 <title>Post Test 1</title>
</head>
<body>
 <table>
  <img align="left" width ="130" heigt="130" src="uniku.jpg"></img>
  <center><h2>UNIVERSITAS KUNINGAN</h2>
  <h3>FAKULTAS ILMU KOMPUTER UNIVERSITAS KUNINGAN</h3>
  <h3>Jalan Tjut Nyak Dhien No.36 Kuningan</h3></td>
 </table>
 <hr size="5" color="blue">
 <center>
 <form>
  <table border="1">
   <td align="center">
    <h2>Login</h2></br>
     <label for="uname"><b>Username</b></label>
     <input type="text" placeholder="Enter Username" name="uname" required>
    </br></br>
     <label for="psw"><b>Password </b></label>
     <input type="password" placeholder="Enter Password" name="psw" required maxlenght="10">
    </br></br>
     <button type="submit">Login</button>
    </br></br>
     <label>
     <input type="checkbox" checked="checked" name="remember"> Remember me
     </label>
    </br></br> 
    <span class="psw">Forgot <a href="#">password?</a></span>
   </td>
  </table>
 </form>
 </center>
</body>
</html>

Hasil tampilan


2. Buatkan halaman website dengan ketentuan yaitu Input Text untuk NIM, NIM sudah ada, tetapi bisa dihapus, Textarea nilainya tidak bisa dihapus, dan Input Text untuk NIM dibatasi sampai 10 karakter

  
<html>
<head>
 <title>Post Test 2</title>
</head>
<body>
 <table>
  <img align="left" width ="130" heigt="130" src="uniku.jpg"></img>
  <center><h2>UNIVERSITAS KUNINGAN</h2>
  <h3>FAKULTAS ILMU KOMPUTER UNIVERSITAS KUNINGAN</h3>
  <h3>Jalan Tjut Nyak Dhien No.36 Kuningan</h3></td>
 </table>
 <hr size="5" color="blue">
 <center>
 <form>
  <table border="1">
   <td>
    <b>Property Readonly</b></br></br>
    NIM : <input type="text" size="10" readonly title="nim" placeholder="20160910092"></input></br></br>    
    <b>Readonly dan Tittle di TextArea</b></br></br>
    Komentar : <textarea cols="50" rows="8" readonly title="Komentar">Komentar di text area tidak bisa dihapus</textarea></br></br> 
    <b>Checked</b></br></br>
    Jenis kelamin : <input type="radio" name="JK" value="L">L</input>
    <input type="radio" name="JK" value="P">P</br></br>
    <b>Maximal Character</b><br></br>
    NIM : <input type="text" size="10" maxlenght="10"></input><br>
   </td>
  </table>
 </form>
 </center>
</body>
</html>

Hasil tampilan



Pertanyaan dan Tugas
1. Buatlah website dengan menggunakan frame untuk mengatur tiap komponen. Diantaranya terdapat frame header, menu,konten, dan footer. Dan buat tampilan yang menarik!

Frame Header 

<html>
<head>
<title>Header</title>
</head>
<body bgcolor="orange">
 <table border="0" align="center" width="100%">
  <tr>
   <td align="left" width="20%"><img src="uniku.jpg" height="150%" width="150%"></td>
   <td align="right" width="80%"><font face="algerian" color="white" size="6"><b>FAKULTAS ILMU KOMPUTER</b></td>
  </tr>
 </table>
<hr size="40" color="blue" align="center">
</body>
</html>


Frame Menu 

<html>
<head>
<title>Menu</title>
</head>
<body>
 <ul>
  <li><a href="#" target="_self">Beranda</a></li>
  <li><a href="#" target="_blank">Akademik</a></li>
  <li><a href="#" target="_blank">Kegiatan</a></li>
  <li><a href="#" target="_self">Kontak</a></li>
 </ul
 <p>&nbsp;</p>
</body>
</html>


Frame Konten 

<html>
<head>
 <title>Post Test 1</title>
</head>
<body>
 <center>
 <br><br><br><form>
  <table border="1">
   <td align="center">
    <h2>Login</h2></br>
     <label for="uname"><b>Username</b></label>
     <input type="text" placeholder="Enter Username" name="uname" required>
    </br></br>
     <label for="psw"><b>Password </b></label>
     <input type="password" placeholder="Enter Password" name="psw" required maxlenght="10">
    </br></br>
     <button type="submit">Login</button>
    </br></br>
     <label>
     <input type="checkbox" checked="checked" name="remember"> Remember me
     </label>
    </br></br> 
    <span class="psw">Forgot <a href="#">password?</a></span>
   </td>
  </table>
 </form>
 </center>
</body>
</html>


Frame Footer

<html>
<head>
 <title>Footer</title>
</head>
<body bgcolor="blue">
 <marquee> <font face="arial" color="white" size="2">20160910092 - Reza Adhicahyasmara - SIC2016 - FKOM UNIKU 2018</marquee>
</body>
</html>


Frame Gabungan

<html>
<frameset rows="16%, 79%, *" border="0">
 <frame src="header.html" name="header">
  <frameset cols="15%, *" border="1">
   <frame src="menu.html" name="menu">
   <frame src="konten.html" name="konten">
  </frameset>
 <frame src="footer.html" name="footer">
</frameset>
</html>

Hasil tampilan












BAB III
PENUTUP

3.1 Kesimpulan
Frame merupakan sebuah teknologi yang dipakai untuk menggabungkan beberapa halaman web menjadi satu halaman yang utuh. Dapat juga dikatakan bahwa frame merupakan sarana untuk membagi halaman web menjadi beberapa bagian. Dalam penggunaan frame pada pembuatan halaman-halaman web, dikenal istilah frame dan frameset.

Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah halaman web dapat melakukan interaksi dengan web. Pengunjung dapat memasukan data melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea, submit button, dropdown dan lain-lain






DFTAR PUSTAKA
 
Modul Praktikum Pemrograman Web 1 (2018), Kuningan, .Kom-UNIKU

Berlangganan update artikel terbaru via email:

0 Response to "Frame dan Form HTML"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel