Catatan Si April

Cara membuat form menggunakan CSS dan HTML

    Ok! Selama ini kita hanya selalu sibuk dengan membahas mengenai jaringan komputer, dan sekarang ini kita coba ganti pokok pembahasan kita sekaligus untuk merefresing otak agar tidak bosan dengan pembahasan yang lewat-lewat.

   Dan sengaja saya pilih yaitu pemrograman web yang mana nantinya kita mengunakan dua bahasa pemrograman yang kita gabung menjdi satu.



   Ok langsung saja pertama kita buat file html-nya tentunya kita sudah mengenal apa namanya html yah kan! dan kebetulan sudah saya coding file html-nya yaitu seperti di bawah ini;

"<html>
<head>
<title>coba</title>
<link href="on.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">

 
<div class="header">
Web April waruwu
</div>
<center>
<div class="content">
 <h5> SMK S TERUNA</h5><BR>
<table>


<tr>
<td>Nama</td><td>:</td><td><input type="text" name="nama"</td>
</tr>

<tr>
<td>Nis</td><td>:</td><td><input type="text" name="nis"</td>
</tr>

<tr>
<td>Nspn</td><td>:</td><td><input type="text" name="nspn"</td>
</tr>

<tr>
<td>Nip</td><td>:</td><td><input type="text" name="nspn"</td>
</tr>

<tr>
<td>Alamat</td><td>:</td><td><input type="text" name="nama"</td>
</tr>

<tr>
<td>&nbsp;</td><td>&nbsp;</td><td><input type="submit" name="proses" value="Proses"</td>
</tr>

</tr>
</table>
</div>


<div class="footer">
 <i> <marquee> Design By:April waruwu  </i></marquee>
</div>

</div>
</body>
</html>"


     Nah itu masih tag html-nya doang kode css-nya adalah sebagai berikut;

"*{margin:0px; padding:0px;}
.wrapper{
width:600px;
height:400px;
margin:200px auto;
}

body{
margin:0px;
padding:0px;

}
.header{
width:100%;
height:40px;
background-color:gray;
color:white;
text-align:center;
font-size:24px;
font-weight:bold;
line-height:40px;
margin:0px;
padding:auto;
}
.content{
width:100%;
height:250px;
background-color:#dcdcdc;
padding-top:50px;
padding-left:auto;
padding-right:auto;
}
.footer{
width:100%;
height:40px;
background-color:gray;
}"

 nah jika kedua file diatas di jalankan maka akan tampil seperti gambar berikut;
 seperti itu jadi tinggal copy codingannya selesai jalankan dia!! OK.

1 comment:

Comment Yang Jelas