Sahabat
Techno-Media pada kesempatan kali ini
Tech-Me akan membahas tntang Percobaan Form dengan HTML dan CSS
Kita akan perkenalan dulu dengan CSS
- TUJUAN
Memahami dan mengetahui fungsi dari CSS (Cascading Style Sheets) sebagai bahasa pemrograman guna mengatur desain dan layout web.
- ALAT DAN BAHAN
1. Satu unit PC
2. Aplikasi Notepad++
3. Software web server local XAMPP
4. Web browser
5. Lembar kerja percobaan.
- LANGKAH - LANGKAH PERCOBAAN
Sebelum memulai percobaan menggunakan CSS, ikuti petunjuk di bawah ini terlebih dahulu
1. Buatlah folder baru di desktop dan beri nama folder tersebut dengan NIM Anda.
2. Untuk menyimpan file dari Notepad ke bentuk .css, jangan lupa untuk menuliskan .css dalam kolom “File name”, dan mengganti type file menjadi “All Types”.
3. Untuk menyimpan file dari Notepad ke bentuk .html, jangan lupa untuk menuliskan .html dalam kolom “File name”, dan mengganti type file menjadi “All Types”.
Percobaan pertama Langkah percobaan praktek pertama :
1. Buka aplikasi
Notepad++ atau sejenisnya yang anda sukai.
2. Lalu Copy kan kode berikut kedalam
Notepad++
<html>
<head>
<link href="css.css" rel="stylesheet" />
</head>
<body>
<table width="70%" align="center">
<?php include 'header.php'; ?>
<tr>
<td width="70%">
<div id="isi" class="button3">
<h1 style="color:blue:font:bold 16px Candara, arial, tahoma;">Ayo Minum Vitacripit!</h1>
<img src="fb-art.png">
<html>
<head>
<title>Buku Tamu</title>
</head>
<body>
<h1>Buku Tamu</h1>
<br />
Silahkan isi buku tamu di bawah ini untuk meninggalkan pesan Anda!<br /><br />
<form action="thanks.php" method="post">
Nama Lengkap* : <br />
<input name="nama" type="text" placeholder="Dhiemas Ganisha" required=""><br /><br />
Email* : <br />
<input name="email" type="text" placeholder="dhimasganisha@gmail.com" required=""><br /><br />
Jenis Kelamin* : <br />
<input type="radio" name="jk" value="Laki-Laki" required="">Laki-Laki</input>
<input type="radio" name="jk" value="Perempuan" required="">Perempuan</input> <br /><br />
Produk Yang Diinginkan* : <br />
<input type="checkbox" name="produk" value="Susu Sapi">Susu Sapi</input> <input type="checkbox" name="produk2" value="Susu Kambing">Susu Kambing</input><br /><br />
Kantor Cabang* :
<select name="cabang" >
<option>--PILIH--</option>
<option value="Bandung">Bandung</option>
<option value="Jakarta">Jakarta</option>
<option value="Surabaya">Surabaya</option>
</select><br /><br />
Pesan* : <br />
<textarea cols="70" rows="15" name="pesan" placeholder="pesan anda..." required=""></textarea><br /><br />
<b>INFO:</b> HARAP SEMUA KOLOM *(required) DI ISI!</br>
<input type="submit" name="kirim" value="Kirim">
<input type="reset" value="Hapus">
</form>
</body>
</html>
</div>
<?php include 'footer.php'; ?>
</td>
</tr>
<tr>
<td colspan="2" height="50" class="footer">
<p style="color:blue;font:bold 12px candara, arial, tahoma;text-align:center";>
Copyright by <a href="index.php">PT. VitaIndo</a>
</p>
</td>
</tr>
</table>
</body>
</html>
3. Save file tersebut dengan nama index.php
4. Dan coba jalankan file tersebut.. pasti nanti bakal ada yang salah . Kenapa? di script tersebut saya memasukkan
<?php include 'header.php'; ?> dan
<?php include 'footer.php'; ?> yang artinya ada file
header.php yang harus kita buat. Silahkan copas kode dibawah ini
header.php
<tr>
<td colspan="2"><img src="gmbr.jpg"/></td>
</tr>
<tr>
<td colspan="2">
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a href="#">Depan</a></td>
<td align="center"><a href="#">Profil</a></td>
<td align="center"><a href="#">Produk</a></td>
<td align="center"><a href="index.php?p=" name="p">Buku Tamu</a></td>
<td align="center"><a href="#">Forum</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
footer.php
<td width="30%" class="table-menu">
<br><br><br><br><br><br><br>
<center>
<h3>Kunjungi Kami</h3>
<a href="http://Facebook.com"><button class="button1"><b>Facebook</b></button></a>
<a href="http://twitter.com"><button class="button2"><b>Twitter</b></button></a>
<a href="http://lazada.co.id"><button class="button3"><b>Lazada</b></button></a>
</center>
</td>
<style type="text/css">
table{
border-collapse:collapse;
border:1px solid black;
}
#menu{
height:40px;
width:100%;
background:url(hitam.png) repeat-x;
}
#menu table{
border:none;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14 px Candara, Arial, Tahoma;
}
#isi{
padding: 10 10 10 10;
}
#isi p{
color:black;
font:11 px candara, arial, tahoma;
padding-bottom:5px;
}
#isi img{
border:1px solid black;
width:80px;
height:100px;
}
.table-menu{
vertical-align:top;
border-collapse:collapse;
border:1px solid black;
background-color:purple;
}
.footer{
background-color:#f95e5e;
}
.button1{
background-color:blue;
}
.button2{
background-color:blue;
}
.button3{
background-color:orange;
}
.button4{
background-color:black;
}
.post-body img {max-width:98% !important;
}
</style>
Lalu silahkan anda save dengan yang sudah saya jelaskan di atas tersebut. dan Jalankan web dengan menggunakan XAMPP. Selanjutnya saya akan membahas
Bagaimana caranya form berjalan dengan menggunakan PHP
KESIMPULAN
Sampai sini saya dapat simpulkan bahwa Membuat webiste untuk pemula bisa menggunakan Kode Tabel dan menggunakan PHP yang masih awal. dan pastikan kode dalam CSS dan HTML tersebut sesuai. jika di HTML lihat di
<class="table-menu"> seperti itu.
Daftar Pustaka
DonnyHandoko Blog | Materi
Tutorial Belajar Blog | Kode Box for script
BACA JUGA -> HP Android RAM 2GB Termurah 2017
