NETBEANS, HTML5, dan CSS3 (study membuat form input)
Selalu menarik untuk mecoba-coba membuat aplikasi di Netbeans, selain karena software builder ini cepet upgade nya tentunya karena GRATIS !! Ini baru alasan utama. Dengan Netbeans 7.3 (walaupun masih beta) menulis program jadi terasa mudah seperti ada yang membantu (tentu saja si reserved words). Begitupun dengan menulis HTML di netbeans begitu mudah. Contoh masalah kali ini, mari kita buktikan dengan membuat form input, dan supaya indah tentunya dengan menambahkannya dengan scriptCSS. So...let's we try !!
Setelah anda buka Netbeans anda, silakan ketik kode HTML seperti di bawah ini,
Dari seluruh kode di atas, tidak semua harus anda ketik, karena sebagian kode (lebih banyak komentar di system, juga header program) generated byNetbeans, hasil dari kode HTML ini bila di Run seperti tampilandi bawah ini,
memang HTML belum menyajikan keindahan dalam mendesain tampilan form input seperti tampilan halaman di samping, untuk itu anda dapat menambahkan script CSS-nya sebagai berikut, Oh ya deklarasi CSS di tulis seperti ini di headerHTML :
Ada di header HTML di atas, berikut adalah ScriptCSS-nya,untuk membuat file baru CSS, pilih File, New File ..., HTML/JavaScript, Cascading Style Sheet, terus tulis script berikut :
Dan..! ini hasil nya, berubah bukan...! Jadi silakan dicoba.
Ini isi HTML di kotak pertama sama dengan di kotak list CSSnya, dah bener belum nih, klo diperhatikan di form CSS kode yg di upload adl kode HTML sm persis dg yg atasnya..coba dikoreksi dl ya !!
Ini isi HTML di kotak pertama sama dengan di kotak list CSSnya, dah bener belum nih, klo diperhatikan di form CSS kode yg di upload adl kode HTML sm persis dg yg atasnya..coba dikoreksi dl ya !!
BalasHapusok makasih infonya mas ABdul, sudah sy koreksi
BalasHapuseh maaf sy berusaha menupload SCRIPT CSS, nya tp tidak tampil lgi, di tolak di blogspot kyknya..mohon maaf
BalasHapusOL BROW...! knp tidka ditulus aja tu CSSnya, klo di copas tidak bisa to..?dimasukkan ke text box juga di blog to...?
BalasHapuswah CSS-nya ndak di pudate lagi nih...??
BalasHapusmaaf ini CSS-nya
BalasHapus/*
Document : newcss
Created on : Dec 4, 2012, 2:05:57 PM
Author : baNoe
Description:
Purpose of the stylesheet follows.
*/
root {
display: block;
}
body {
background-color: #f9f9f9;
color: #222;
font-family:Cantarell, Verdana,sans-serif;
font-size: 12px;
}
input[type="submit"]:: -moz-focus-inner,
input[type="button"]::-moz-focus-inner {border : none; }
input[type="submit"]:focus, input[type="button"]:focus {
outline : none;
}
.clear {clear: both; }
#formbiodata {
width: 400px;
height: 400px;
margin: 20px auto;
padding: 50px 0;
border-radius: 5px;
-moz-border-radius: 5px; /*utk firefox 3.5 kebawah*/
box-shadow: 10px 10px 5px #888888;
border: 1px solid #FFF;
overflow: hidden;
position: relative;
}
#formbiodata input, #formbiodata select {
background: 'url(/images/input.png') no-repeat;
color: #888;
border: 1px solid #ccc;
font-family: Cantarell, Verdana, sans-serif;
font-weight: bold;
font-size: 12px;
width: 300px;
height: 35px;
padding: 0 25px;
margin: 14px 0;
float: left;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#formbiodata input.button {
background: none repeat scroll 0 0 #A3D62F;
border: 1px solid #3B6E22;
border-radius: 8px 8px 8px 8px;
color: #FFFFFF;
cursor: pointer;
width: 85px;
height: 38px;
position: relative;
bottom: 15px;
left: 300px;
width: 70px;
}
formbiodata label {
color: #666;
font-size: 12px;
font-weight: bold;
line-height: 14px;
float: right;
margin: 23px -25px;
width: 270px;
}
/* #formbiodata h1, #formbiodata h2 {
font-size: Verdana, sans-serif;
text-align: center;
font-size: 16px;
text-shadow: 1px 1px 2px #222;
} */
header h1 {
font-size: 30px;
margin: 1px;
}
header h1 {
font-size: 20px;
float: left;
margin-left: 14px;
text-shadow: 2px 2px 5px #333;
}
header h1 {
color: #993333;
}
header h1 {
font-size: 16px;
}
p {
clear: both;
}
#formbiodata h1 span { color: #a90329; }
terima kasih....?
BalasHapusada project hatml di netbeans lagi ta???
(maaf klo tutorialnya singkat mas ALi) klo sample netbeansnya belum sempat nulis lagi ... lgi penasaran ama si robot ijo nih..!
Hapus