Cara Membuat Template Sederhana Dengan HTML

Cara membuat template itu gimana sih ? Pertanyaan yang paling sering diajukan oleh para blogger pemula saya, jujur saja, sampai saat ini saya juga masih belum paham betul bagaiamana cara membuat template jika dimulai dari nol alias dasar.

Walaupun demikian, itu tidak membuat saya patah semangat, dan justru memotivasi saya untuk terus belajar, bagaimana cara membuat template.

Karena pada dasarnya, cara membuat template tidak sama dengan cara mengedit template. Dimana saat kita ingin membuat template, kita 'diwajibkan' memulainya dari awal, mulai dari menyusun layout dan sebagianya.

Tapi untunglah banyak sekali software yang tujuannya untuk memudahkan kita dalam membuat template, salah satu yang paling terkenal dan juga merupakan favorit saya adalah Dreamweaver, yang bisa dibilang tool untuk para webdesigner yang paling lengkap sejagad.

Oke kembali ke topik, mungkin Anda akan bertanya 'gak bisa buat template, kok mau buat artikel cara membuat template ?' hmm, disini saya tidak ingin mengajarkan teman-teman bagiamana cara membuat template, melainkan disini saya hanya ingin berbagai 'source' atau file mentah yang bisa kalian gunakan untuk membuat sebuah template yang nantinya template terebut terserah mau diapain, bisa teman-teman jual atau pakai sendiri.

Oke, mungkin langsung saja kita masuk pada pembahasan pertama yaitu mengenai kerangka template itu sendiri :

Struktur Template HTML Dasar

<!doctype html>
<html>
<head>
<meta name="" content="">
<title>Cara CSS Example Template</title>
<link href="" rel="stylesheet" type="text/css"/>
<style type="text/css">

</style>

<script type="text/javascript">

</script>
</head>

<body>

</body>
</html>

Diatas bisa dibilang sebagai kerangka dasar, malah saya lebih sering menyebutnya kerangka paling dasar dari pembuatan sebuah template.

Penjelasan Sederhana :

1. <style type="text/css"> </style>

Ini adalah tempat dimana kita akan meletakkan css

2. <script type="text/javascript"> </script>

Tidak jauh beda dengan kode css diatas, dimana kode ini berfungsi untuk meletakkan syntax javascript

CSS Reset

/* <CSS Reset> */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* <CSS Reset> */

body { background-:url(images/blue_background2.jpg); }

a:link {color:#ebebeb; text-decoration:none; }
a:visited {color:#ebebeb; text-decoration:none;}
a:hover {color:#dedede; text-decoration:none;}
a:active {color:#ebebeb; text-decoration:none;}

h1 { font: bold 55px "Arial";
     color: #ebebeb;
     left: 1px;
     position: absolute;
     top: 1px;}
h2
h3
h4
h5
h6

Sesuai namanya, fungsi dari CSS Reset adalah untuk mereset sebuat css default yang sudah menempel di Browser, sebagai contoh saat kita menuliskan :

<table></table>

Maka secara default tabel yang kita buat akan memiliki border 1px, padahal kita kan tidak menambahkan css :

table {
    border: 1px;
}

Tapi kok tiba-tiba ada border setebal 1px ? nah, itulah fungsi dari css reset, yaitu untuk mereset semua settingan default yang tidak kehendaki (istilah mudahnya).

Layout Sederhana

CSS

.container {
width:950px;
margin:auto;
height:800px;
border:1px #000 solid;
}

.top {
margin:10px 10px 10px 10px;
border:1px #000 solid;
height:100px;
font-size: 50px;
text-align: center;
padding-top: 75px;
font-family: 'times new roman';
}

.left {
 margin:10px 10px 10px 10px;
border:1px #000 solid;
height:500px;
width:200px;
float:left; 
}

.right {
 margin:10px 10px 10px 10px;
border:1px #000 solid;
height:500px;
width:200px;
float:left; 
}

.middle{
margin-top:10px;
border:1px #000 solid;
width:500px;
height:500px;
float:left; 
}

.footer {
clear:both;
margin:10px 10px 10px 10px;
border:1px #000 solid;
height:70px; 
}

 HTML

<div class="container" >

<div class="top">
Cara CSS Header
</div>


<div class="left">
  
</div>


<div class="middle">
  
</div>


<div class="right">
  
</div>
  
<div class="footer">

</div>

</div>

Diatas adalah tampilan tata letak secara sederhana, yang meliputi :

Header
Sidebar (kanan - kiri)
Content
Footer

Bisa dibilang, 4 eleme diataslah yang menjadi patokan tiap kali kita ingin mebuat template baru. Namun kini perkembangan template sudah begitu pesat, terutama web portofolio atau biasa saya sebut, web site unjuk kebolehan.

Mungkin ini saja dari saya, jika ada pertanyaan terkait bagaiaman Cara Membuat Template jangan segan-segan untuk menanyakannya melalui kolom komentar, dan akan saya bantu jawab sebisa saya.

Akhir kata saya ucapkan terimakasih banyak untuk teman-teman semua yang sudah bersedia membaca Cara Membuat Template Sederhana Dengan HTML.

Cara Membuat Template Sederhana Dengan HTML

Sabtu, 17 Mei 2014

Struktur Template HTML Dasar

CSS Reset

Layout Sederhana

Artikel Terkait dengan Cara Membuat Template Sederhana Dengan HTML