Cara Membuat Template Website HTML dan CSS

Cara Membuat Template Website HTML dan CSSShare on FacebookTwitterTwitter

1. Blank Page

Agar kita lebih memahami cara pembuatan Template website, kita akan membuatnya mulai dari 0 tanpa bantuan framework, Untuk membuat Template Website dari lembaran kosong, pertama kita persiapkan dulu file baru dengan ekstensi .html, agar komputer mengetahui kalau itu file HTML.
  1. Buka Notepad
  2. Langsung saja save as dengan File name: Template.html
  3. Ganti Save as type: menjadi All Files (*.*)
Buka file tadi, seharusnya langsung terbuka dengan browser (Firefox, Chrome, Internet Explorer, dll)

blank page html file

2. Type Encode HTML

Setelah kita buat file Halaman Kosong (blank page), sekarang kita beritahukan browser bahwa file tersebut adalah HTML, dan sekalian kita beri Nama (title) untuk browser :
  1. Buka file Template.html menggunakan notepad (Open with => notepad)
  2. Masukkan code berikut, lalu save
sketsa template<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Template Website HTML dan CSS</title>
    </head>
    <body>
       
    </body>
</html>


3. Sketsa Template

Sebelum membuat template, kita pasti sudah mempunyai perencanaan, atau sketsa tampilan template, untuk tutorial ini ane buat sketsa pembagian halaman kurang lebih seperti ini:


4. Membagi Kolom Template (HTML)

Perhatikan gambar sketsa diatas, untuk memulai code template, kita membutuhkan 7 kolom utama yang nanti akan kita jadikan sebagai nama id:
  1. Container (Kolom Luar)
  2. Logo
  3. Header
  4. Menu
  5. Content
  6. Sidebar
  7. Footer
Buka file Template.html menggunakan notepad,
dibawah code <body> akan kita buat Element DIV sesuai urutan sketsa diatas:

Code Pembagian Kolom

<div id="container">
    <div id="logo"></div>
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="footer"></div>
</div>
Setiap kolom akan berisi object yang kemungkinan bisa merusak ukuran kolom aslinya, jadi disetiap ID kolom harus kita beri satu lagi DIV yang mengatur object di dalamnya, untuk membedakan kolom utama dan isinya, kita bisa beri nama class untuk masing masing DIV.

class isi kolom template

Sekarang code kolom kita di atas akan menjadi seperti ini:

ID Kolom dan Class Isi di dalamnya

<div id="container">
    <div id="logo">
        <div class="isi-logo">
            LOGO
        </div>
    </div>
    <div id="header">
        <div class="isi-header">
            HEADER
        </div>
    </div>
    <div id="menu">
        <div class="isi-menu">
            MENU
        </div>
    </div>
    <div id="content">
        <div class="isi-content">
            CONTENT
        </div>
    </div>
    <div id="sidebar">
        <div class="isi-sidebar">
            SIDEBAR
        </div>
    </div>
    <div id="footer">
        <div class="isi-footer">
            FOOTER
        </div>
    </div>
</div>

5. Persiapan Design Template

Tidak ada aturan paten dalam mendesign, karena semua orang mempunyai selera yang berbeda, jadi untuk segala macam hiasan akan kita lewati dulu, sekarang kita hanya fokus mengatur tata letak agar template website kita sesuai dengan rencana (sketsa).

Untuk memulai code CSS, kita edit bagian head dan tambahkan code style
<style type="text/css">
    /*isi code css nantinya ada di sini*/
</style>


Di dalam code style inilah, kita akan menambahkan code CSS sesuai sketsa

6. Code CSS Template Website

  • CSS Reset
    Code html atau body terkadang menyimpan margin atau padding secara otomatis, jadi sebelum memulai menulis CSS alangkah baiknya kita mereset margin dan padding menjadi 0 (nol):

    /* Reset Code */
    html, body {
        margin: 0;
        padding: 0;
    }


  • CSS Global
    Code ini merupakan kumpulan dari jenis yang sama, untuk mempermudah pengeditan secara massal, bila style memang sama :

    /* Global Style */
    #logo, #header, #menu, #content, #sidebar, #footer{
        position:relative;
        float   :left;
    }
    .isi-logo, .isi-header, .isi-menu, .isi-content, .isi-sidebar, .isi-footer{
        border : 1px solid #179053;
        padding: 15px;
        margin : 15px;
        background: #dddddd;
    }


  • CSS Untuk layar komputer / laptop
    Disini kita hanya akan mengatur lebar dan tinggi agar sesuai sketsa, untuk pewarnaan dan lainnya nanti mengikuti selera dan isi dari postingan itu sendiri

    /* Kolom */
    #container{ width: 100%;}
    #logo{ width:30%;}
    #header{ width:70%;}
    #menu{ width:100%;}
    #content{ width:70%;}
    #sidebar{ width:30%; }
    #footer{ width:100%; }

    /* Isi Kolom */
    .isi-logo{ min-height:50px; }
    .isi-header{ min-height:50px; }
    .isi-menu{ min-height:20px; }
    .isi-content{ min-height:200px; }
    .isi-sidebar{ min-height:200px; }
    .isi-footer{ min-height:50px; }


  • CSS Untuk layar HP
    Untuk layar HP kita batasi sampai 490px, kalau kita perhatikan dalam gambar sketsa, perubahan hanya terjadi pada ID content dan ID sidebar, jadi perubahan untuk HP hanya seperti ini:

    /*Layar HP*/
    @media screen and (max-width:490px){
        #content{ width:100%;}
        #sidebar{ width:100%; }
    }


Sampai dengan langkah ini, kita sudah berhasil membuat template website yang masih kosong, Template ini bisa diterapkan ke semua jenis website, karena hanya memakai standard HTML dan CSS, Selanjutnya tinggal kita sesuaikan dengan code tambahan yang lain.

Code Template Website HTML dan CSS

Berikut code lengkap template dalam file Template.html:

Template.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Template Website</title>
        <style type="text/css">
            /* Reset Code */
            html, body {
                margin: 0;
                padding: 0;
            }
            /* Global Style */
            #container, #logo, #header, #menu, #content, #sidebar, #footer{
                position:relative;
                float:left;
            }
            .isi-logo, .isi-header, .isi-menu, .isi-content, .isi-sidebar, .isi-footer{
                border : 1px solid #179053;
                padding: 15px;
                margin:15px;
                background: #dddddd;
            }
            /* Kolom */
            #container{ width: 100%;}
            #logo{ width:30%;}
            #header{ width:70%;}
            #menu{ width:100%;}
            #content{ width:70%;}
            #sidebar{ width:30%; }
            #footer{ width:100%; }

            /* Isi Kolom */
            .isi-logo{ min-height:50px; }
            .isi-header{ min-height:50px; }
            .isi-menu{ min-height:20px; }
            .isi-content{ min-height:200px; }
            .isi-sidebar{ min-height:200px; }
            .isi-footer{ min-height:50px; }

            /*Layar HP*/
            @media screen and (max-width:490px){
                #content{ width:100%;}
                #sidebar{ width:100%; }
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="logo">
                <div class="isi-logo">
                    LOGO
                </div>
            </div>
            <div id="header">
                <div class="isi-header">
                    HEADER
                </div>
            </div>
            <div id="menu">
                <div class="isi-menu">
                    MENU
                </div>
            </div>
            <div id="content">
                <div class="isi-content">
                    CONTENT
                </div>
            </div>
            <div id="sidebar">
                <div class="isi-sidebar">
                    SIDEBAR
                </div>
            </div>
            <div id="footer">
                <div class="isi-footer">
                    FOOTER
                </div>
            </div>
        </div>

    </body>
</html>