Scribd Logo
Unggah

Selamat datang di Scribd!

  • Tutorial Membuat Layout Website Sederhana Dengan HTML Dan CSS

    Diunggah oleh

    samsung J6
    40 tayangan8 halaman

    Judul Asli

    Jagocoding.com - Tutorial_Membuat_Layout_Website_Sederhana_dengan_HTML_dan_CSS

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    40 tayangan8 halaman

    Tutorial Membuat Layout Website Sederhana Dengan HTML Dan CSS

    Diunggah oleh

    samsung J6

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 8

    Tutorial Membuat Layout Website Sederhana

    dengan HTML dan CSS


    Oleh: I Wayan Dharmana

    Halo kawan, apa kabar? Semoga di awal bulan Ramadhan ini kawan
    pembaca tetap semangat untuk mencari ilmu. Nah, pada kesempatan ini
    saya akan membahas tentang membuat layout website sederhana dengan
    HTML dan CSS. Untuk membuat website kita harus memiliki pemikiran
    tentang bagaimana layout dari sebuah web...

    Halo kawan, apa kabar? Semoga di awal bulan Ramadhan ini kawan pembaca tetap semangat untuk
    mencari ilmu. Nah, pada kesempatan ini saya akan membahas tentang membuat layout website
    sederhana dengan HTML dan CSS.

    Untuk membuat website kita harus memiliki pemikiran tentang bagaimana layout dari sebuah
    website tersebut. Maka dari itu tutorial ini sangatlah penting bagi kawan pembaca yang baru
    mengenal HTML dan CSS. Mau tahu bagaimana cara membuat layout sederhana website? Simak
    langkah-langkah selanjutnya.

    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 &copy; 2014 by Wayan Dharmana – 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 &copy; 2014 by Wayan Dharmana – 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.

    Tentang Penulis
    I Wayan Dharmana
    Seorang putra kelahiran Bali yang kini menjadi seorang programmer di
    salah satu perusahaan di Denpasar. Namun siapa sangka, pria yang
    bersekolah di SMKN 1 Denpasar ini juga seorang Blogger dan Freelancer.
    Selain itu juga mengelola bisnis web development www.indipixel.com dan
    penyedia hosting Lapak Server.

    Anda mungkin juga menyukai