REKAYASA PERANGKAT LUNAK

004 <html>

006 <head>

008 <meta name="generator" content="Bluefish 2.0.3" >

010 <title>Universitas Budi Luhur</title>

012 <link href="budi1.css" rel="stylesheet" type=text/css>

014 <link href="http://cdn2.iconfinder.com/data/icons/fugue/icon/hammer_screwdriver.png" rel="shortcurt icon" type="img/jpg" />

016 </head>

018 <body>

019
020 <table align="center" bgcolor="#E0DADB" border="0" width="600" height="600">

021
022 <tr><td class="header" colspan="3" valign="top"><center>Universitas Budi Luhur</center></td></tr>

023
024 <tr><td class="navbar" colspan="3" ><center>Menu || Profil || About</center></td></tr>

025
026 <tr><td class="left-sidebar" valign="top"></td>

027
028 <td class="content-main" valign="top">

029
030 <form id="formku" >

031
032 <center>

033
034 <fieldset>

035
036 <h5><u>Formulir Pendaftaran Mahasiswa Baru</u>

040 <p>

041
042 <label>Nama     </label>

043
044 <input type="number" name="Nama" size="20" required="required">

045
046 </p>

047
048

049
050 <p>

051
052 <label>TTL      </label>

053
054 <input type="text" name="Nama" size="20" required="required">

055
056 </p>

057
058

059
060 <p>

061
062 <label>Alamat    </label>

063
064 <input type="text" name="Alamat" size="20" maxlength="25" required="required">

065
066 </p>

070 <p>

072 <label>Telepon     </label>

073
074 <input type="number" name="Nama" size="20" maxlength="12" required="required">

075
076 </p>

077
078

079
080 <p>

081
082 <label>Agama    </label>

083
084 <input type="text" name="Agama" size="20" required="required">

085
086 </p>

087
088

089
090 <p>

091
092 <br><input name="Submit" type="submit" value="Submit" />

093
094 </p>

095
096

097
098 </center>

099
100 </fieldset>

101
102 </form>

103
104

105
106 </td>

107
108 <td class="right-sidebar" valign="top" align="left"> </td>

109
110 </tr>

111
112 <tr><td class="footer" bgcolor="#9C6774" colspan="3"><center>©Anugrah Bagus Susilo</center></td></tr>

113
114 </table>

115
116 </body>

117
118 </html>
Kode CSS nya
view source
print?
01 /* CSS Document */
02

03
04 /* -- Newbieilmu.wordpress.com-- */

05 .header
06

07 {
08

09 font-size:34px;
10

11 background-color:756E70;
12

13 color:#FFFFFF;
14

15 position:relative;
16

17 width:600;
18

19 height:70;
20

21 }
22

23 .navbar
24

25 {
26

27 width:600;
28

29 height:30;
30

31 background-color:#9C6774;
32

33 }
34

35 .left-sidebar
36

37 {
38

39 background-color:#756E70;
40

41 width:200;
42

43 height:450;
44

45 }
46

47 .content-main
48

49 {
50

51 background-color:#D1CBCC;
52

53 width:400;
54

55 height:450;
56

57 }
58

59 .right-sidebar
60

61 {
62

63 background-color:#756E70;
64

65 width:200;
66

67 height:450;
68

69 }
70

71 }
72

73 .footer
74

75 {
76

77 width:700;
78

79 height:50;
80

81 background-color:#756E70;*/
82

83 }

Membuat halaman web sederhana dengan html dan css
April 20, 2011 2 Comments
html adalah bahasa pemrograman inti untuk membuat halaman web, untuk membuat halaman web biasanya html dikombinasikan dengan script css agar tampilannya lebih dinamis dan mudah di edit. css adalah cascading style sheet dimana fungsinya untk mempercantik halaman web html. untuk contohnya adalah seperti berikut:
1. pertama kita ketik kodehtml berikut (copas juga bisa, hehe):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>belajar membuat halaman web dengan html dan css</title>
</head>
<body>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>
2. kemudian kita buat kode css nya seperti ini :
body {
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.header {
height: 220px;
width: 900px;
background-color: #003366;
}
.leftcol {
float: left;
height: auto;
width: 225px;
background-color: #333333;
}
.rightcol {
float: right;
height: auto;
width: 675px;
background-color: #9999FF;
}
.footer {
clear: both;
height: 30px;
width: 900px;
background-color: #000033;
}
kemudia taruh kode css tersebut dibawah kode ‘</head>’ dan diawal script tambahkan <script>, kemudia di akhir kode tambahkan tag script penutup ‘</script>’ , karena disini kita membuat css yang embeded dengan html artinya kode css menyatu dengan kode htmlnya (css di halaman html).
sehingga kode lengkapnya seperti ini :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>belajar membuat halaman web dengan html dan css</title>
<style type=”text/css”>
<!–
body {
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.header {
height: 220px;
width: 900px;
background-color: #003366;
}
.leftcol {
float: left;
height: auto;
width: 225px;
background-color: #333333;
}
.rightcol {
float: right;
height: auto;
width: 675px;
background-color: #9999FF;
}
.footer {
clear: both;
height: 30px;
width: 900px;
background-color: #000033;
}
–>
</style>
</head>
<body>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>
90-=-==================

FORM SEDERHANA
Form adalah salah satu tag HTML yang dipakai untuk penempatan input-input yang akan diisikan oleh user untuk dieksekusi selanjutnya. Nah, bagi seorang web developer istilah form pasti udah ga asing lagi, soalnya semua data yang akan dimasukkan ke dalam database, pasti bakal via form ini.
Tapi, apakah kalian tau gimana cara bikin form yang efektif? maksud efektif di sini adalah supaya kita gak kesulitan pas membuat style buat form itu.
Nah, seperti yg udah diketahui, tag form adalah sebagai berikut:
<form action="register.php" method="post">
...
</form>
Buat sebagian orang, mengatur form supaya rapi, tata letaknya teratur, mereka menggunakan table sebagai tempat nempatin elemen input yang ada di form, contohnya kayak gini:
<form action="register.php" method="post">
<table>
<tr>
<td><label for="nama_lengkap">Nama Lengkap</label></td>
<td><input id="nama_lengkap" type="text" /></td>
</tr>
<tr>
<td><label for="nama_panggilan">Nama Panggilan</label></td>
<td><input id="nama_lengkap" type="text" /></td>
</tr>
<tr>
<td><label for="nama_panggilan">Nama Panggilan</label></td>
<td><textarea id="nama_lengkap"></textarea</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="kirim" /></td>
</tr>
</table>
</form>
Hmm… sebenernya cara di atas itu tidak salah sih, cuman menurutku cara kayak gitu tuh sangat merepotkan, soalnya kita harus bikin table sebagai pemampang elemen inputnya, dan itu sangat cape menurutku… banyak alasan kalo cara itu ga efektif, contoh lain adalah di saat di mana kita bikin suatu fungsi maupun class (bukan CSS) di PHP dan kita akan merender setiap elemen form secara independen, maksudnya berdiri sendiri, tanpa bantuan tag table sebelum elemen dan di akhir elemen input…
Lagian kan semua tag [input] di html ada berbagai macam, ada buat text, textarea, submit, combobox, dsb… nah berarti kalo kita bikin style CSSnya kita harus memberikan class di setiap elemen, soalnya ga bisa klo kita membuat style untuk semua tag [input], jadi setiap elemen [input] harus dikasih class…
Sekarang kita langsung coba mengimplementasikan struktur html kayak di atas klo qta bikin style buat CSSnya… gimana caranya? pasti bakal kayak gini:
<form action="register.php" method="post">
<table>
<tr>
<td><label for="nama_lengkap">Nama Lengkap</label></td>
<td><input id="nama_lengkap" type="text" class="textfield" /></td>
</tr>
<tr>
<td><label for="nama_panggilan">Nama Panggilan</label></td>
<td><input id="nama_lengkap" type="text" class="textfield" /></td>
</tr>
<tr>
<td><label for="nama_panggilan">Nama Panggilan</label></td>
<td><textarea id="nama_lengkap" class="textarea"></textarea</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="kirim" class="button" /></td>
</tr>
</table>
</form>
Ada cara yang lebih efektif, dan berdiri sendiri, maksudnya kita bakal bikin setiap baris input tanpa menggunakan awalan [table] dan akhiran [/table] dan tidak memberikan class di setiap elemen, juga ga ngeborosin tag (kayak tr td)… di sini kita akan menggunakan div… menurut Cheyuz ini yang paling efektif… (gak tau menurut kalian )
<form action="register.php" method="post">
<div class="input text">
<label for="nama_lengkap">Nama Lengkap</label>
<input id="nama_lengkap" type="text" />
</div>
<div class="input text">
<label for="nama_panggilan">Nama Panggilan</label>
<input id="nama_panggilan" type="text" />
</div>
<div class="input textarea">
<label for="nama_panggilan">Nama Panggilan</label>
<textarea id="nama_panggilan"></textarea>
</div>
<div class="input submit">
<input type="submit" value="kirim" />
</div>
</form>
Sekarang, ayo kita bandingkan hasil keduanya kalo ga pake CSS:
Memakai Form

Nama Lengkap
Nama Panggilan
Komentar

Memakai Div (efektif)
Nama Lengkap
Nama Panggilan
Komentar

Gimana gimana??? loh loh kok tampilan form yang kedua (memakai div) malah ancur???
Hehe… tenang, itu adalah murni sebelum dikasi css… sekarang coba kita lihat klo udah pake css…
#form2{ background: #eee; padding: 5px; } #form2 table{ border-spacing: 0; } #form2 tr{ background: #dfebff; padding: 5px; } #form2 tr:hover{ background: #eef4ff; } #form2 td{ padding: 5px; } #form2 label{ font-weight: 900; cursor: pointer; } #form2 .textfield{ padding: 5px; border: 1px solid #ccc; } #form2 .textfield:hover{ border: 1px solid #000; } #form2 .textfield:focus{ border: 1px solid #f00; } #form2 .button{ background: #b0d0ff; border: 1px solid #ccc; cursor: pointer; } #form2 .button:hover{ background: #b7efaa; }
Ini style yang pake Table

Ini style yang pake Div

Gimana? hasilnya sama kan? hmm sebenernya sama… cuman di sini kita bakal ngeliat pengaruhnya kalo kita bikin pake framework misalnya… dan hasil dari render elemen inputan cakephp juga kayak gini lho… satu elemen input dengan ngerender 1 inputan… kalo contoh hasil render kayak gini lebih efektif:
<div class="input text">
<label for="nama_lengkap">Nama Lengkap</label>
<input id="nama_lengkap" type="text" />
</div>
dibanding yang ini:
<tr>
<td><label for="nama_lengkap">Nama Lengkap</label></td>
<td><input id="nama_lengkap" type="text" class="textfield" /></td>
</tr>
Soalnya untuk yang pake table harus diawali dengan [table] dan diakhiri dengan [/table]..
Oia lupa, ni CSS buat form yang tadi di atas, silakan dipelajari, dan lihat mudah yang mana :
CSS untuk form table
form{
background: #eee;
padding: 5px;
}
form table{
border-spacing: 0;
}
form tr{
background: #dfebff;
padding: 5px;
}
form tr:hover{
background: #eef4ff;
}
form td{
padding: 5px;
}
form label{
font-weight: 900;
cursor: pointer;
}
form .textfield{
padding: 5px;
border: 1px solid #ccc;
}
form .textfield:hover{
border: 1px solid #000;
}
form .textfield:focus{
border: 1px solid #f00;
}
form .button{
background: #b0d0ff;
border: 1px solid #ccc;
cursor: pointer;
}
form .button:hover{
background: #b7efaa;
}
CSS untuk form div
form{
background: #eee;
padding: 5px;
}
form div.input{
background: #dfebff;
padding: 5px;
}
form div.input:hover{
background: #eef4ff;
}
form div.text input:hover{
border: 1px solid #000;
}
form div.text input:focus{
border: 1px solid #f00;
}
form div.input label{
float: left;
width: 120px;
font-weight: 900;
cursor: pointer;
}
form div.input label:hover{
color: #f00;
}
form div.text input{
padding: 5px;
border: 1px solid #ccc;
}
form div.submit input{
background: #b0d0ff;
border: 1px solid #ccc;
cursor: pointer;
margin-left: 125px;
}
form div.submit input:hover{
background: #b7efaa;
}

Laman

Senin, 18 November 2013

CSS keren

Jumat, 27 September 2013

REKAYASA PERANGKAT LUNAK

Mengenai Saya