Archive for Februari 2014
Membuat Web dengan HTML dan CSS sederhana
karena ada beberapa kesibukan lain yang
harus di selesaikan akhirnya hari ini saya bisa update postingan lagi,
nah berhubung beberapa hari kemaren ada yang Tanya bagaimana sh cara
membuat template web dan saya melihat hasil karya teman saya yang membuat layout web menggunakan frame.
Berhubung saya paling tidak suka menggunakan frame untuk membuat template web maka
dari itu pada akhirnya saya memberikan sedikit ilmu yang pernah saya
pelajari, yaitu membuat template web menggunakan html dan css. Cara ini
sebenarnya tidak terlalu sulit, cukup dengan memahami struktur dari web
tersebut maka kita bisa menentukan layout tersebut dan siap untuk build
layout. Perhatikan gambar berikut.
Nah dari gambar di atas maka kita bisa simpulkan bahwa pada umumnya web itu pasti memiliki elemen dibawah ini
- Header
- Kontent
- Sidebar
- Footer
<div id="wrapper"><div id="header"></div><div id="page"><div id="konten"><form action="proses.php" method="POST"><table width="300" align="center" bgcolor="#f1f1f1"><tbody><tr><td>Tanggal</td><td>:</td><td><input type="text" name="tanggal" placeholder="Input Date Here" /></td></tr><tr><td>Judul</td><td>:</td><td><input type="text" name="judul" placeholder="Input Title Here" /></td></tr><tr><td>Konten</td><td>:</td><td><input type="text" name="konten" placeholder="masukan konten anda di sini" /></td></tr><tr><td></td><td></td><td><input type="submit" value="simpan" /><input type="submit" value="edit" /></td></tr></tbody></table></form></div><div id="sidebar"></div></div><div id="footer"></div></div>kedua silahkan kopi kode css dibawah ini paste di notepad++ dan beri nama dengan css.css pada folder yang sama dengan file index kemudian jalankan file index.html menggunakan browser sobat masing-masing.
body{background: #f1f1f1;}#wrapper{background: #f1f1f1;border: 1px solid black;width: 960px;margin: 0px auto;height: auto;}#header{background: white;width: 940px;margin: 0px auto;height: 100px;margin-top: 10px;}#page{background: blue;border: 1px solid black;width: 940px;height: 400px;margin:0px auto;margin-top:10px;margin-bottom: 10px;}#konten{background: black;width: 630px;margin: 0px auto;float: left;height: auto;}#sidebar{background: red;float: right;width: 300px;margin: 0px auto;}#footer{background: black;margin: 0px auto;width: 940px;height: 30px;}
nah selesai mudah bukan untuk membuat template web,
mudah mudahan bermanfaat bagi sobat Seedaftt, apabila sobat masih kurang
jelas silahkan bisa PM saya akan coba jelaskan kembali…terimakasih..
h
hhttps://www.blogger.com/blogger.g?blogID=6763424159029219414#editor/target=post;postID=8254797854018572263
