Membuat tampilan form login dengan HTML dan CSS

<p>         Selamat siang sobat, berjumpa lagi dengan saya si ADMIN blog dunia it kita, semoga sobat sekalian memahami isi dari postingan kali ini. Dan kali ini ane akan memberikan postingan ang insya allah bermanfaat bagi pemula-pemula yang ingin belajar sedikit mengenai <b>css</b>,<br /> <br />       CSS digunakan untuk mempercantik tampilan dari suatu website, kali ini ane akan memberikan turotial membuat tampilan login atau form login yang sedikit lebih menarik karena di berikan suatu bantuan dari css.<br /> <br />       Berikut tampilan login yang akan kita buat pada kesempatan hari ini sobat :<br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGJjJAWkoQAaVlQiEycoQYuUiEOoUC_AXcP3MkYdvA4qx_QbQ-H3MQUobe0CgIi4X7OAFahNyJFHcqHZdycFBqe9D1hBjX2W2LKZT-7dwWv7sO0jUdwDvYOAIARZ4edHTu4ddgSVqyrzBb/s1600/login.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGJjJAWkoQAaVlQiEycoQYuUiEOoUC_AXcP3MkYdvA4qx_QbQ-H3MQUobe0CgIi4X7OAFahNyJFHcqHZdycFBqe9D1hBjX2W2LKZT-7dwWv7sO0jUdwDvYOAIARZ4edHTu4ddgSVqyrzBb/s400/login.jpg" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">form login</td></tr> </tbody></table>  Nah minimal kita harus bisa membuat tampilan seperti yang ada diatas sobat, ok langsung aja kita mulai tutorialnya ,ikuti dengan baik ya sobat,,bismilah dulu biar kita tenang !.<br /> <br />      Yang pertama buatlah sebuah folder dengan nama terserah anda ,,, contoh <b>latih_login</b>, nah setelah itu buka text editor anda , kalau saya memakai adobe dreamweafer cs5, kalau saya sarankan anda juga memakai text editor ini juga , karena aplikasi ini menarik jika kita mengetikkan sedikit kita akan tau bantuan codernya dengan cara menekan pada keyboard anda ctrl+space.<br /> <br />      Jika anda sudah membuka text editor anda, maka buatlah file baru dengan nama index.html, caranya tekan ctrl+n atau new, save ajja di folder anda tadi,,oh ya gan ingat save atau simpan folder anda tadi di folder <b>xampp</b> didalam folder <b>htdocts </b>nanti kita membuatnya juga pakai xampp ya jangan lupa dinyalakan .<br /> <br />     Ok di file index.html tadi silahkan ketikkan codingnya seperti dibawah ini. dibawah ini saya share dengan screenshoot saja agar sobat praktik bukannya copas dari koding saya,,,<br /> <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8AjOS63yIBV5xfHpL97JZ4rrDXV9ISpfFjoxjfmxfO0TxhUkDk7rLj4YDNTYDvH3TVoBomeSY2GcBbRfe7QUnV5iGqB2-b7LFn95K9-QBWkwxQ7wVhUVFSzyQ0sO1Flqur7DsElZ06T11/s1600/login+2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8AjOS63yIBV5xfHpL97JZ4rrDXV9ISpfFjoxjfmxfO0TxhUkDk7rLj4YDNTYDvH3TVoBomeSY2GcBbRfe7QUnV5iGqB2-b7LFn95K9-QBWkwxQ7wVhUVFSzyQ0sO1Flqur7DsElZ06T11/s1600/login+2.jpg" /></a></div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;">   Setelah koding dalam index.html sudah jadi maka langsung ajja kita buat file css-nya, file CSS-nya saya buat dengan nama index.css, lalu save didalam folder yang sama namun buat folder lagi dengan nama <b>css, </b>nah masukkan file css tadi didalam folder css. ini adalah kodingnya,</div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7R6G01TS9fJq41wt877w9EEUYwNEL-Q3nvO7-WDY1t_voTST-aK5lEdfO2aqPAMixOzdUtPbMKS67gbRp2bVc6ZJI1Z4m1OPSzsKuUE4eneQE76qVA4MdR65_pLOyYnYcKqn6j5TlYa7H/s1600/css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7R6G01TS9fJq41wt877w9EEUYwNEL-Q3nvO7-WDY1t_voTST-aK5lEdfO2aqPAMixOzdUtPbMKS67gbRp2bVc6ZJI1Z4m1OPSzsKuUE4eneQE76qVA4MdR65_pLOyYnYcKqn6j5TlYa7H/s1600/css.jpg" /></a></div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;">  Nah silahkan sobat ketik dengan benar ya ,,</div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Berikut adalah kode yang penting berguna untuk memanggil file css tadi </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6bJMKUJyrNuYtB_MnOPYjSKsPS6rH4FHNSgbY1bkT57oqQ3RrbJyT2gs8SWtKqG_FAR3WbQwCsbMSZZPcpVR09Vcc0ln_s7l2USXdJlQIQAw7XUkCNhyphenhyphen-egXrxQvbEe0_YkodFUhq5pt/s1600/link.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6bJMKUJyrNuYtB_MnOPYjSKsPS6rH4FHNSgbY1bkT57oqQ3RrbJyT2gs8SWtKqG_FAR3WbQwCsbMSZZPcpVR09Vcc0ln_s7l2USXdJlQIQAw7XUkCNhyphenhyphen-egXrxQvbEe0_YkodFUhq5pt/s1600/link.jpg" /></a></div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Nah itu adalah membuat tampilan sebuah form login dengan bantuan css, sehingga menjadi lebih menarik sobat,<br />semoga artikel ini bermanfaat untuk anda , dan anda bisa belajar dengn yang namanya css, langung ajja ini adalah alamatnya w3scholl, langsung aja anda ketikkan di mesin pencarian, nanti pasti mbah google faham.<br /><br />sekian dari saya sobat semoga bermanfaat untuk anda pemula, </div> <div class="separator" style="clear: both; text-align: left;">    salam sejahtera ,</div> <div class="separator" style="clear: both; text-align: left;"> wassalamu'alaikum wr. wb</div> </p>

         Selamat siang sobat, berjumpa lagi dengan saya si ADMIN blog dunia it kita, semoga sobat sekalian memahami isi dari postingan kali ...