Cara Membuat Template Website dengan Notepad++

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.

Berikut tampilan dasar sebuah halaman website.

Cara Membuat Template Website dengan Notepad++

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>

<head>

<style>
/* CSS di tag ini */
</style>

</head>


<body>

<div id='wrapper'>


<div class='bagian-kepala'>
<h1>Judul BLOG</h1>
</div>


<div class='bagian-post'>
<h3>Ini adalah Judul Posting anda </h3>
</div>

Tulis artikel disini atau sebuah kalimat


<div class='bagian-widget'>
<h2> Judul Widget </h2>

Tulis kalimat disini atau kata-kata yang anda inginkan

</div>
</div>

<div style='clear:both'>


<!-- anda juga harus membuat element DIV terlebih dahulu –>

</body>

<!-- end of Bagian badan –>

</html>

Save kode diatas dengan nama Project.html

2. Berikan CSS pembentuk Tata Letak Sederhana.

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

Maka CSS yang akan kita gunakan adalah seperti ini:

#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;
}

3. Preview, lalu EDIT!

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!

4. Berikan beberapa tag XML template Blog

Karena blog menggunakan XML untuk template, kita harus merubah Tag HTML tersebut menjadi tag HTML.
Perhatikan kode template berikut :

<html>

<head>
<style>
/* CSS HERE */

</style>
</head>

<body>
<div id='wrapper'>.....

Ganti kode bercetak miring dan tebal diatas dengan kode seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Insert CSS Here */
]]></b:skin>
</head>

Jangan lupa untuk memberikan CSS yang tadi kita tulis, sehingga menjadi seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Start CSS HERE */
#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;
}
/* End CSS HERE */
]]></b:skin>
</head>

<body>
<div id='wrapper'>.....

5. Memberi Blogger Tag

Anda diharuskan untuk merubah Static Content dengan Dinamic Content yang telah disediakan oleh Blogger.

Untuk lebih lengkapnya, silahkan pergi ke Link http://support.google.com/blogger/bin/answer.py?hl=en&answer=46888 Cara ini dilakukan agar anda dapat lebih leluasa dalam mengedit dan mengatur dalam "Tata Letak". Selain itu, Dynamic Content juga berfungsi agar Post yang anda publikasi bisa Muncul pada Blog anda. Jika template tidak diberikan Blogger Tag, maka template akan Static, maksudnya ketika anda melakukan pengeditan pada template, post, ataupun widget anda, maka semua tidak akan berubah.

a. Tambahkan element Judul Blog.

Ganti kode yang berwarna biru dengan kode berikut :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>

b. Tambahkan element Post.

Ganti kode yang berwarna hijau diatas dengan kode berikut :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

c. Tambahkan element Widget.

Ganti kode yang berwarna merah dengan kode dibawah ini :

<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>

Sehingga akan terlihat seperti ini :

<body>
<div id='wrapper'>

<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>

<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>

<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>

6. Save dan Upload

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.

7. Sedikit Mengedit Kode CSS Kembali

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 ;)

Mulailah mengedit text dan link yang terdapat di template tersebut:

/* Body atau background tag */
body{
background: #888;
color: #eee;
font: 12px calibri;
}
/* Link atau tautan */
a{ color: orange; }
a:hover{ color: red; }
a:visited{ color: gray; }
a:active{ color:transparent; }
/* Penanggalan pada Posting */
.date-header{ color: orange; }
/* Element Posting */
.date-outer{ border: 1px solid gray; margin: 10px 5px; } /* pembungkus posting */
.post-title{ font: 17px calibri; } /* judul entri */
/* Komentar */
#comments { background : #454545; color : white; } /* Pembungkus kotak Komentar */

Dan selebihnya anda kerjakan sendiri ya ;)

Final Kode :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Inti dari Element */
#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;
}
/* Body atau background tag */
body{
background: #888;
color: #eee;
font: 12px calibri;
}
/* Link atau tautan */a{ color: orange; }
a:hover{ color: red; }
a:visited{ color: gray; }
a:active{ color:transparent; }
/* Penanggalan pada Posting */
.date-header{ color: orange; }
/* Element Posting */
.date-outer{ border: 1px solid gray; margin: 10px 5px; } /* pembungkus posting */
.post-title{ font: 17px calibri; } /* judul entri */
/* Komentar */
#comments { background : #454545; color : white; } /* Pembungkus kotak Komentar */
]]></b:skin>
</head>
<body>
<div id='wrapper'>

<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>

<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>

<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>

</html>

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>

<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>


<body bgcolor="#777">
<div id='wrapper'>


<div class='header'>
<h1>Pemrograman Website</h1>
</div>


<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 class='bagian-widget'>
<h2>Menu Navigasi</h2>
<ul type="square">
<li><a href="tugas lab.html">Beranda</a></li>
<li><a href="Halaman about me.html">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Daftar isi</a></li>
<li><a href="#">Buku Tamu</a></li>
</ul>
</div>

<div style='clear:both'>

<div class='footer'>
<p>Copyright 2013. Desain template by Juned al~Bughisy</p>
</div>

</body>

</html>

Hasilnya kurang lebih seperti gambar di bawah ini.

Demikian pembahasan kali ini mengenai desain website,

Terimakasih…!!!

red devil lovers

Senin, 23 Desember 2013

Cara Membuat Template Website dengan Notepad++

Tidak ada komentar:

Posting Komentar