Your SEO optimized title

Membuat Layout/Kerangka Website Sederhana dengan HTML dan CSS - Sebelum memulai artikel kali ini mungkin pembaca bisa membaca artikel tentang tips sebelum belajar membuat desain web. Karna pada artikel ini penulis akan membahas bagaimana caranya membuat layout atau kerangka website sederhana dengan menggunakan HTML dan CSS.

Sebelum kita membuat sebuah website tentunya kita harus membuat kerangkanya terlebih dahulu. tutorial cara membuat kerangka website ini sangatlah penting untuk pembaca yang akan bergelut di dunia web desain. okelah., langsung saja kita simak langkah-langkahnya dibawah ini.

Berikut langkah-langkah cara membuat layout atau kerangka website sederhana dengan menggunakan HTML dan CSS:

Membuat Kerangka Dasar

Dalam tahapan pembuatan kerangka dasar digunakan bahasa pemrograman HTML. Di dalam kerangka ini kita akan buat kerangka dari header, content, sidebar dan footer yang merupakan layout dasar pembuatan website. Silahkan ikuti code dibawah ini dan simpan file dengan nama index.html.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Layout Website Sederhana</title>
</head>
<body>
<div class=”wrap”>
</div>
</body>
</html>

Code diatas merupakan code dasar dari halaman web yang menggunakan HTML. Apabila kamu buka di web browser, maka akan muncul halaman kosong. Mungkin kawan-kawan akan bertanya apa fungsi dari code

<div class=”wrap”>
</div>

Deretan code tersebut berfungsi untuk membuat halaman website terletak ditengah-ditengah dengan rapi.

Oke, kita lanjut dengan membuat bagian header. Bagian ini terletak di bagian atas halaman website yang berisi judul atau konten lainnya. Silahkan ikuti code berikut ini dan letakkan setelah bagian wrap.

<div class=”header”>
<h1>HEADER</h1>
</div>

Setelah header, kini kita membuat bagian konten dan sidebar. Kedua bagian ini letaknya sejajar namun berbeda ukuran. Konten terletak di kiri dengan ukuran kurang lebih 66% dari ukuran penuhnya. Sedangkan sidebar akan kita buat di sebelah kanan dengan ukuran 26%. Ikuti code berikut ini dan letakkan dibawah code bagian header yang telah kita buat.

<div class=”main”>
<div class=”content”>
            <h2>Content</h2>
            <p>Halo kawan, ini konten website</p>
</div>

<div class=”sidebar”>
            <h2>Sidebar</h2>
</div>

<div class=”clear”></div>

</div>

Mungkin kamu akan bertanya, apa fungsi dari code dibawah ini?

<div class=”clear”></div>

Oke, saya akan jawab. Bagian konten dan sidebar terletak sejajar. Oleh sebab itu, kita harus membuat komponen berikutnya kembali pada posisinya dan tidak mengikuti posisi sidebar atau konten. Bisa dikatakan code tersebut adalah penetral atau clearfix.

Bagian kerangka terakhir adalah footer. Footer sesuai namanya terletak di bagian paling bawah website. Biasanya berisi informasi berupa credit, menu atau komponen lainnya. Ikuti code berikut dan letakkan dibawah clearfix.

<div class=”footer”>
<center><p>Copyright © 2015 by Asrul Nur Rahim – All Right Reserved</p></center>
</div>

Oke kawan, tahapan membuat kerangka sudah usai. Berikut hasil coding dari tahapan kerangka, silahkan dicek.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Layout Website Sederhana</title>
</head>
<body>
<div class="wrap">
    <div class="header">
            <h1>HEADER</h1>
    </div>

    <div class="main">
        <div class="content">
            <h2>Content</h2>
            <p>Halo kawan, ini konten website</p>
        </div>

        <div class="sidebar">
            <h2>Sidebar</h2>
        </div>

        <div class="clear"></div>

    </div>

    <div class="footer">
        <center><p>Copyright © 2015 by Asrul Nur Rahim – All Right Reserved</p></center>
    </div>

</div>
</body>
</html>

Sekarang coba buka hasil pembuatan kerangka website pada web browser. Maka akan terlihat tampilan dari header sampai footer yang masih belum teratur seperti pada gambar.

Mempercantik Tampilan

Untuk mempercantik tampilan kita menggunakan bahasa pemrograman CSS. Pada tahapan ini kita mengatur berbagai properti komponen web seperti warna, lebar, tinggi , posisi dan lainnya.

Berikut merupakan syntax CSS untuk mempercantik tampilan. Ikuti dan simpan file dengan nama style.css.

* {margin:0}

body {
            font-family:arial,segoe ui;
}

.wrap {
            width:1000px;
            margin:0 auto;
}



.header {
            width:auto;
            background:#09C;
            padding:20px;
            color:#fff;
}

.main {
            width:100%;
            background:#6F9;
}

.content {
            float:left;
            width:66%;
            background:#FF9;
            padding:2%;
            min-height:400px;
}

.sidebar {
            float:right;
            width:26%;
            background:#6F9;
            padding:2%;

}

.clear {clear:both}

.footer {
            width:auto;
            padding:5px 10px;
            background:#333;
            color:#fff;

}

Menghubungkan HTML dan CSS

Setelah kawan mempercantik tampilan dengan CSS, belum ada efek yang muncul ketika web kamu buka di web browser. Mengapa? Karena HTML (index.html) dan CSS (style.css) belum dihubungkan.

Untuk menghubungkan keduanya, ikuti code dibawah ini dan letakkan dibawah tag </title>.

<link rel=”stylesheet” href=”style.css”/>

Setelah itu coba cek kembali hasilnya di web browser. Bagaimana? Apakah sudah mirip dengan gambar dibawah ini?

Sekian tutorial membuat layout website sederhana dengan HTML dan CSS. Walaupun sederhana namun penuh makna. Semoga bermanfaat.

Judul : Membuat Layout/Kerangka Website Sederhana dengan HTML dan CSS
Deskripsi : Membuat Layout/Kerangka Website Sederhana dengan HTML dan CSS - Sebelum memulai artikel kali ini mungkin pembaca bisa membaca artikel tenta...

Membuat Layout/Kerangka Website Sederhana dengan HTML dan CSS

Belum ada komentar untuk "Membuat Layout/Kerangka Website Sederhana dengan HTML dan CSS"

Post a Comment