Belajar hal-hal baru memang menyenangkan sekaligus mengasyikkan apalagi hal yang kita pelajari itu erat
kaitannya dengan hoby kita atau pun pekerjaan kita. Dalam hal ini admin tengah belajar pemrograman web yang
mana sekiranya ilmu yang saya dapatkan dapat saya share ke teman-teman.
Suatu desain akan bernilai indah atau tidak maka semua itu tidak akan pernah lepas dari kreativitas dan
imajinitas pembuat desain itu sendiri. Akan tetapi desain yang akan kita bahas kali ini ialah sebuah desain
Halaman Website.
Sebuah Halaman Website memiliki desain dasar yang mana dengan desain dasar tersebut anda dapat
memodifikasi agar menjadi lebih indah dan sedap dipandang mata akan tetapi tetap menyertakan komponen-
komponen penting dari halaman website tersebut.
Setelah mengetahui bagian-bagian dari halaman website maka selanjutnya kita perlu mempelajari pemrograman
web yang mana akan kita bahas satu persatu di bawah ini.
1. Langkah Awal
Buatlah sebuah kode HTML sederhana yang dibuat melalui Notepad dan Save dengan nama belakang "html".
Jika anda keberatan, bisa kita pakai dengan Element sederhana dibawah ini:
<html>
<!-- bagian kepala -->
<head>
<style>
/* CSS di tag ini */
</style>
</head>
<div id='wrapper'>
</div>
</div>
<div style='clear:both'>
<!-- BAGIAN BAWAH DARI INTI POST DAN WIDGET -->
<!-- tambahkan elemen footer disini -->
<!-- anda juga harus membuat element DIV terlebih dahulu –>
</body>
</html>
Save kode diatas dengan nama Project.html
Coba anda preview dengan membuka melalui Browser, pasti tidak terbentuk bukan? untuk itu, anda diharuskan
memberikan Properties Sederhana terlebih dahulu guna memberikan letak yang anda inginkan.
Tata letak didasarkan pada css "float" dan juga "width" , serta dibatasi dengan "clear: both" didasar kedua
element tersebut untuk meratakan bahwa element telah disamakan.
Misalkan kita akan membuat tata letak seperti ini :
KepalaBadanWidget
#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}
Lihatlah dahulu jadinya, kemudian Edit beberapa item, tambahkan beberapa tag sesuka kalian ;)
Maksudnya apa? Anda diharapkan untuk menggandakan Project.html sebelum proses ke-4 untuk menghindari
kesalahan template pada blog. Periksalah kembali sebelum melanjutkan langkah berikutnya!
<html>
<!-- bagian kepala -->
<head>
<style>
/* CSS HERE */
</style>
</head>
<!-- bagian badan -->
<body>
<div id='wrapper'>.....
Ganti kode bercetak miring dan tebal diatas dengan kode seperti ini:
Jangan lupa untuk memberikan CSS yang tadi kita tulis, sehingga menjadi seperti ini:
Anda diharuskan untuk merubah Static Content dengan Dinamic Content yang telah disediakan oleh Blogger.
<body>
<div id='wrapper'>
<!-- Nantinya akan dijadikan Judul blog -->
<div class='bagian-kepala'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
</div>
<!-- Tempat dimana posting anda akan muncul -->
<div class='bagian-post'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<!-- Tempat dimana Widget anda berada -->
<div class='bagian-widget'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
</div>
<div style='clear:both'>
</body>
Simpanlah proyek anda, dan kemudian anda coba penerapannya pada Blog anda. Sehingga anda dapat melihat
hasilnya! hmmm, untuk refreshing coba anda minum teh anda dahulu, kemudian lanjut lagi ;)
Anda harus backup template terlebih dahulu. Atau anda bisa membuat blog baru untuk bereksperiment.
CSS itu sangatlah penting, kenapa ? karena css adalah bagian terpenting dalam suatu situs web. CSS ini sendiri
yang mengatur tata-letak dari suatu Element yang berantakan menjadi elemen yang teratur dan nyaman untuk
dilihat. Tidak hanya mengatur sebuah Elemen, CSS juga dapat mengatur Warna, Dekorasi, Bingkai(Border),
hingga Gambar latar. Untuk kali ini, mari kita mulai mengedit sebagian CSS pada blog agar terlihat menarik ;)
Final Kode :
Dan jika sobat pusing dengan pembahasan saya yang panjang dan berbelit-belit di atas sobat dapat mempelajari
template dasar yang sudah saya buat di bawah ini.
<html>
<!-- bagian kepala -->
<head>
<title>Desain Website</title>
<style>
/* CSS */
#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.header{
height: 100px;
background-color:#ff0000;
margin: 10px 10px 1px 10px;
padding: 10px;
border: 2px solid #000000;
}
.bagian-post{
float: right; /* Gunakan untuk memposisikan Widget di kiri */
width: 525px;
height:400px;
margin: 0 10px 1px 0;
padding: 10px;
background-color: #ffffff;
border: 2px solid #000000;
}
.bagian-widget{
float: left; /* Gunakan untuk memposisikan Widget di Kanan */
width: 205px;
height:400px;
margin: 0 1px 1px 10px;
padding: 10px;
background-color:#FFFF33;
border: solid 2px #000000;
}
.footer{
width: 800x;
background-color: #00FF00;
margin: 0 10px 10px 10px;
padding: 10px;
text-align: center;
border: 2px solid #000000;
}
</style>
</head>
<!--Bagian Postingan-->
<div class='bagian-post'>
<h3>Inilah Template Buatan Pertaman Saya</h3>
<p>Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman
Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman
Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman
Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman
Web....!!!</p>
</div>
<div style='clear:both'>
<!-- bagian footer-->
<div class='footer'>
<p>Copyright 2013. Desain template by Juned al~Bughisy</p>
</div>
</body>
</html>
Demikian pembahasan kali ini mengenai desain website, dan jika anda merasa artikel ini bermanfaat silahkan di
share akan tetapi jangan lupan untuk mencantumkan link sebagai sumbernya.
Terimakasih…!!!