Hay, apa
kabar semuanya.. ketemu lagi nih sama saya. Kali ini saya akan membagikan
tutorial tentang Membuat Form Biodata dengan html dan css.
Sebelum kita
membuat formnya apa itu HTML dan CSS?
Hyper Text Markup Language (HTML) adalah sebuah
bahasa
markah yang digunakan untuk membuat sebuah halaman web, menampilkan
berbagai informasi di dalam sebuah penjelajah
web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas
format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan
kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan
dalam format ASCII
normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari
sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan
percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah
sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML
saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya
oleh World Wide Web Consortium (W3C). HTML
dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka
bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi
tinggi di Jenewa).
Cascading Style Sheet (CSS)
merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga
akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama
halnya styles dalam aplikasi pengolahan kata seperti Microsoft
Word yang dapat mengatur beberapa style, misalnya heading, subbab,
bodytext, footer, images, dan style lainnya untuk
dapat digunakan bersama-sama dalam beberapa berkas (file).Pada umumnya
CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. 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
Silahkan
copy script di bawah ini untuk lebih mudahnya :
<html>
<head>
<title>Input Biodata</title>
<style type='text/css' >
#button1 {
padding-left:20px;
text-align:left;
}
#button2 {
padding-right:20px;
text-align:right;
}
#kepala {
font-family:algerian,snap itc;
font-size:25px;
height:50px;
}
#kaki {
height:30px;
}
#tabel1 {
background-color:dodgerblue;
width:410;
padding:10px;
box-shadow:black 0px 0px 4px 1px;
border-radius:20px 20px 20px 20px;
}
#tabel2 {
background-color:dodgerblue;
padding:10px;
box-shadow:black 0px 0px 4px 1px;
border-radius:20px 0px 20px 0px;
}
#tabel1_isi {
background-color:black;
color:white;
width:400; height:200;
padding:5px;
}
</style>
<body bgcolor='cornflowerblue'>
<br/>
<form action='index.jsp' method='get'>
<table id='tabel1' align='center' border='0' >
<tr id='kepala'>
<th colspan='2' id='kepala'>BIODATA SISWA</th>
</tr>
<tr>
<td colspan='2'>
<table align='center' id='tabel1_isi' border='0'>
<tr>
<td id='kolom1'>NIS :</td>
<td><input type='text' name='nis' size='10' required></td>
</tr>
<tr>
<td id='kolom1'>Nama :</td>
<td><input type='text' name='nama' size='hobi0' required></td>
</tr>
<tr>
<td id='kolom1'>Alamat :</td>
<td><input type='text' name='alamat' size='hobi0' required></td>
</tr>
<tr>
<td id='kolom1'>No. Telp :</td>
<td><input type='text' name='no_telp' size='hobi0' required></td>
</tr>
<tr>
<td id='kolom1'>Hobi :</td>
<td><input type='text' name='hobi' size='hobi0' required></td>
</tr>
</table>
</td>
</tr>
<tr id='kaki'>
<td id='button1'>
<input type='submit' value='proses'/>
</td>
<td id='buttonhobi'>
<input type='reset' value='clear'/>
</td>
</tr>
</div>
</table>
<br/>
<table id='tabel2' align='center'>
<%
String nis = request.getParameter("nis");
String nama = request.getParameter("nama");
String alamat = request.getParameter("alamat");
String no_telp = request.getParameter("no_telp");
String hobi = request.getParameter("hobi");
%>
<tr bgcolor='black' style='color:white'>
<th width='30'>No</th>
<th width='50'>Nis</th>
<th width='150'>Nama</th>
<th width='200'>Alamat</th>
<th width='120'>No. Telp</th>
<th width='100'>Hobi</th>
</tr>
<tr>
<td>1</td>
<td><% out.println(nis); %></td>
<td><% out.println(nama); %></td>
<td><% out.println(alamat); %></td>
<td><% out.println(no_telp); %></td>
<td><% out.println(hobi); %></td>
</form>
</body>
</html>
<head>
<title>Input Biodata</title>
<style type='text/css' >
#button1 {
padding-left:20px;
text-align:left;
}
#button2 {
padding-right:20px;
text-align:right;
}
#kepala {
font-family:algerian,snap itc;
font-size:25px;
height:50px;
}
#kaki {
height:30px;
}
#tabel1 {
background-color:dodgerblue;
width:410;
padding:10px;
box-shadow:black 0px 0px 4px 1px;
border-radius:20px 20px 20px 20px;
}
#tabel2 {
background-color:dodgerblue;
padding:10px;
box-shadow:black 0px 0px 4px 1px;
border-radius:20px 0px 20px 0px;
}
#tabel1_isi {
background-color:black;
color:white;
width:400; height:200;
padding:5px;
}
</style>
<body bgcolor='cornflowerblue'>
<br/>
<form action='index.jsp' method='get'>
<table id='tabel1' align='center' border='0' >
<tr id='kepala'>
<th colspan='2' id='kepala'>BIODATA SISWA</th>
</tr>
<tr>
<td colspan='2'>
<table align='center' id='tabel1_isi' border='0'>
<tr>
<td id='kolom1'>NIS :</td>
<td><input type='text' name='nis' size='10' required></td>
</tr>
<tr>
<td id='kolom1'>Nama :</td>
<td><input type='text' name='nama' size='hobi0' required></td>
</tr>
<tr>
<td id='kolom1'>Alamat :</td>
<td><input type='text' name='alamat' size='hobi0' required></td>
</tr>
<tr>
<td id='kolom1'>No. Telp :</td>
<td><input type='text' name='no_telp' size='hobi0' required></td>
</tr>
<tr>
<td id='kolom1'>Hobi :</td>
<td><input type='text' name='hobi' size='hobi0' required></td>
</tr>
</table>
</td>
</tr>
<tr id='kaki'>
<td id='button1'>
<input type='submit' value='proses'/>
</td>
<td id='buttonhobi'>
<input type='reset' value='clear'/>
</td>
</tr>
</div>
</table>
<br/>
<table id='tabel2' align='center'>
<%
String nis = request.getParameter("nis");
String nama = request.getParameter("nama");
String alamat = request.getParameter("alamat");
String no_telp = request.getParameter("no_telp");
String hobi = request.getParameter("hobi");
%>
<tr bgcolor='black' style='color:white'>
<th width='30'>No</th>
<th width='50'>Nis</th>
<th width='150'>Nama</th>
<th width='200'>Alamat</th>
<th width='120'>No. Telp</th>
<th width='100'>Hobi</th>
</tr>
<tr>
<td>1</td>
<td><% out.println(nis); %></td>
<td><% out.println(nama); %></td>
<td><% out.println(alamat); %></td>
<td><% out.println(no_telp); %></td>
<td><% out.println(hobi); %></td>
</form>
</body>
</html>
- Setelah mengcopy Save dengan nama sesuai keingin anda, kalo saya index.html, dan simpan pada xammp/htedoc seperti gambar di bawah ini :
L nya, Seperti gambar di bawah ini :
4. Setelah itu buka Tab baru dengan alamat Localhost/Tugas,
5. Maka akan keluar tampilan seperti di bawah ini :
SELESAI. !! Semoga Bermanfaat dan SELAMAT MENCOBA ,..
Download PDFnya Disini
http://ilmusoftwarekomputer.blogspot.co.id/2013/12/membuat-aplikasi-web-berbasis-jsp.html
Wassalamu'alaikum Wr.Wb
SMK HASAN KAFRAWI
0 komentar:
Posting Komentar