Scribd Logo
Unggah

Selamat datang di Scribd!

  • Membuat Kerangka Dasar

    Diunggah oleh

    dafijpr
    129 tayangan6 halaman
    Dokumen tersebut memberikan panduan langkah demi langkah untuk membuat kerangka dasar situs web menggunakan HTML dan CSS, mulai dari membuat tag-tag dasar hingga menghubungkan keduanya untuk mempercantik tampilan.

    Deskripsi Asli:

    Kerangka Dasar

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Dokumen tersebut memberikan panduan langkah demi langkah untuk membuat kerangka dasar situs web menggunakan HTML dan CSS, mulai dari membuat tag-tag dasar hingga menghubungkan keduanya untuk mempercantik tampilan.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    129 tayangan6 halaman

    Membuat Kerangka Dasar

    Diunggah oleh

    dafijpr
    Dokumen tersebut memberikan panduan langkah demi langkah untuk membuat kerangka dasar situs web menggunakan HTML dan CSS, mulai dari membuat tag-tag dasar hingga menghubungkan keduanya untuk mempercantik tampilan.

    Hak Cipta:

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

    Membuat Kerangka WEB dasar

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


    transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <title>kerangka_WEB_mualim</title>
    </head>
    <style type="text/css">
    <!--
    #wrapper {
    margin: auto;
    width: 800px;
    border: 1px solid Blue;
    }
    #header {
    height: 80px;
    border: 1px solid purple;
    }
    #inner {
    float: left;
    margin: 5px 0;
    border: 1px solid black;
    }
    #sidebar {
    float: left;
    margin-right: 20px;
    width: 210px;
    height: 335px;
    border: 1px solid red;
    }
    #center{
    float: left;
    width: 563px;
    height: 335px;
    border: 1px solid green;
    }
    #top{
    height: 80px;
    border: 1px solid red;
    }
    #content {
    float: left;
    margin-right: 10px;
    width: 320px;
    height: 240px;
    border: 1px solid green;
    }
    #right {
    float: right;
    width: 205px;
    height: 200px;
    border: 1px solid red;
    }
    #footer {
    clear: both;
    height: 50px;
    border: 1px solid magenta;
    }
    -->
    </style>
    <body>
    <div id="wrapper">
    <div id="header">
    Header</div>
    <div id="inner">
    <div id="sidebar">
    Sidebar
    </div>
    <div id="center">
    <div id="top">
    Top
    </div>
    <div id="content">
    Content
    </div>
    <div id="right">
    Right
    </div>
    </div>
    </div>
    <div id="footer">
    Footer
    </div>
    </div>

    </body>
    </html>

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

    Anda mungkin juga menyukai