Setelah menyelesaikan tutorial membuat website sederhana HTML CSS Part 1 sampai Part 5, sekarang kita lanjutkan ke Part 6. Pada tutorial kali ini akan menjelaskan bagaimana cara membuat kontak form sederhana untuk ditempelkan di sidebar sebelah kiri yang sudah dibuat sebelumnya.
Di tutorial sebelumnya sudah disediakan div class subscribe yang diletakkan dibawah div class mediaSosial, nah sekarang tinggal masukkan kode berikut didalam div class subscribe sebagai kontak form:
<h3>Subscribe</h3>
<form>
Nama:<br/><input type="text" required><br/>
Email:<br/><input type="email" required>
<input type="submit" value="Kirim">
</form>
Seperti biasa, tag h3 diatas merupakan judul untuk widget kontak ini silahkan tentukan judul kalian sendiri. Pada pembuatan form HTML memerlukan tag <form>, ini hanya sekedar contoh saja form yang sangat sederhana. Selengkapnya lihat disini tentang membuat form HTML CSS.
Dan tambahkan kode CSS berikut pada file style.css untuk itu:
/* class subscribe */
.buaya .widget .subscribe {
margin: 0 5px;
border-top: 5px solid #333;
}
.buaya .widget .subscribe h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .subscribe input[type="text"] {
width: 95%;
}
.buaya .widget .subscribe input[type="email"] {
width: 95%;
margin-bottom: 5px;
}
.buaya .widget .subscribe input[type="submit"] {
width: 50%;
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class subscribe */
Seperti biasa berikan margin pada pembungkus dan border-top sebagai garis pemisah, silahkan tentukan warna garis sesuai selera kalian.
Pada lebar input form ini saya berikan 95% agar tidak terlalu rapat sisinya dengan batas widget, silahkan tentukan lebar sesuai keperluan website kalian masing-masing.
Pada input type submit / tombol terdapat cursor:pointer artinya ketiak mouse menyentuh bagian ini akan berubah menjadi pointer (jari) bukan panah seperti biasanya, silahkan dihapus dan lihat perbedaannya.
Setelah berhasil membuat kode diatas, silahkan Save dan lihat hasilnya di browser. (lihat gambar)
Gimana, masih mau lanjut ? 😀
Masih bingung ? Lihat : Video Tutorial Membuat Website Part 6. Jika sudah paham, silahkan lanjutkan ke part 7.
Sekarang, jika tidak ada code yang diubah dari part 1 sampai part 6 akan seperti ini:
HTML
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML Rio Bermano</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/satu.jpg">
</header>
<menu>
<li><a href="">Home</a></li>
<li><a href="">Download</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Software</a></li>
<li><a href="">Design</a></li>
<li><a href="">Support</a></li>
<li><a href="contoh-halaman.html">Kontak</a></li>
</menu>
<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKanan-->
</div><!--akhir class recomended-->
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Satu</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Dua</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Tiga</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p>
</div><!--akhir class artikelTerlaris-->
<div class="mediaSosial">
<h3>Let's Connect !</h3>
<a href=""><img src="images/googleplus.png" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/bermanorio" target="_blank"><img src="images/facebook.png" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/bermanorio"><img src="images/twitter.png"></a>
<a href="http://www.instagram.com/riobermano"><img src="images/instagram.png"></a>
<a href=""><img src="images/linkedin.png"></a>
<a href=""><img src="images/youtube.png"></a>
<a href=""><img src="images/pinterest.png"></a>
</div>
<div class="subscribe">
<h3>Subscribe</h3>
<form>
Nama:<br/><input type="text" required><br/>
Email:<br/><input type="email" required>
<input type="submit" value="Kirim">
</form>
</div>
</div>
<div class="artikelTerbaru">
<a href=""><img src="images/lima.jpg"></a>
<a href="https://posciety.com"><h2>Artikel Baru Satu</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Dua</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Tiga</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p>
</div>
</div><!--akhir class buaya-->
</body>
</html>
CSS
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}
menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */
/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 5px;
}
/* class widget */
.buaya .widget {
width: 245px;
float: left;
background-color: #f90;
}
.buaya .widget .artikelTerlaris {
margin: 0 5px;
}
.buaya .widget .artikelTerlaris img {
width: 100px;
height: 50px;
float: left;
margin-right: 2.5px;
}
.buaya .widget .artikelTerlaris h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
text-decoration: none;
color: #000;
}
/* akhir class widget */
/* class artikelTerbaru */
.buaya .artikelTerbaru {
width: 650px;
background-color: #f90;
float: left;
margin-left: 5px;
}
.buaya .artikelTerbaru img {
width: 550px;
margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}
/* akhir class artikelTerbaru */
/* class mediaSosial */
.buaya .widget .mediaSosial {
margin: 5px;
border-top: 5px solid #333;
}
.buaya .widget .mediaSosial h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .mediaSosial img {
width: 30px;
height: 30px;
}
.buaya .widget .mediaSosial img:hover {
opacity: 0.5;
}
/* akhir class mediaSosial */
/* class subscribe */
.buaya .widget .subscribe {
margin: 0 5px;
border-top: 5px solid #333;
}
.buaya .widget .subscribe h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .subscribe input[type="text"] {
width: 95%;
}
.buaya .widget .subscribe input[type="email"] {
width: 95%;
margin-bottom: 5px;
}
.buaya .widget .subscribe input[type="submit"] {
width: 50%;
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class subscribe */
Kesimpulan
Pada tutorial part 6 hanya membuat form saja di sidebar yang sudah disediakan pada part-part sebelumnya. Formulir ini hanya sekedar contoh dan terbilang sangat sederhana, silahkan buat form yang lebih menarik untuk website kalian dan tambahkan bidang / field lain jika memang diperlukan.
Selamat mencoba !