Sabtu, 27 Juni 2015

Website User Friendly

Kali ini adalah pembahasan tentang website yang kemarin kita buat yang masih dalam tahap non user friendly atau masih tahap permulaan belum terlalu tertata rapih, kali ini tinggal copy script yang telah saya buat di bawah dan silahkan mempelajarinya, untuk referensi dapat mengunjungi website http://www.w3schools.com/html/default.asp untuk belajar lebih lanjut, ingat seorang yang berhasil adalah orang yang mau berusaha sekuat kemampuannya dan terus mengasah kemampuannya menjadi lebih hebat lagi.

<!DOCTYPE html>
<html lang="id">
<head>
    <title>SLAPPY SHOP</title>
    <style>
        body{
            background-image: url("pantai.png");
            background-repeat: no-repeat;
            width: auto;
            height: auto;
            color: #000000;

        }
        #bungkus{
            width: 900px;
            margin: 0 auto;
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 10px;
        }
        #header{
            background-color: #84ffdb;
            width: 100%;
            margin: 0 auto;
            border-radius: 25px;
            border: 2px solid #8AC007;
        }
        #kiri{
            width: 20%;
            float: left;

        }
        #kanan{
            width: 60%;
            float: right;
            padding-top: 20px;
        }
        #navigasi{
            background-color: #dcd6d3;
            width: 100%;
        }
        li{
            display: inline;
            padding: 20px;
        }
        #home{
            text-align: center;
            href="D:\webserver\htdocs\Slappy\home.php";
        }
        #product{
            text-align: center;
            href=""        }
        #contact{
            text-align: center;
            href=
        }
        #about{
            text-align: center;
            href=
        }
        #gambar{
            width: 100%;
        }
        #content{
            width: 100%;
            padding: 10px;

        }
        #footer{
            width: 100%;
            background-color: #f2ece9;
            text-align: center;
        }
    </style>

</head>
<body>
        <div id="bungkus">
            <div id="header">
                <div id="kiri"><img src="1.png" width="180"></div>
                <div id="kanan">SLAPPY SHOP</div>
                <div style="clear: both"></div>
            </div>
            <div id="navigasi">
                <ul>
                <li id="home">HOME</li>
                <li id="product">PRODUCT</li>
                <li id="contact">CONTACT</li>
                <li id="about">ABOUT</li>
                </ul>
            </div>
            <div id="gambar"><img src="Penguins.jpg" width=100%></div>
            <div id="content">
                lapisan
                Padding membersihkan area di sekitar konten (di dalam perbatasan) dari elemen. Padding dipengaruhi oleh warna latar belakang dari elemen.
                Atas, kanan, bawah, dan padding kiri dapat diubah secara independen menggunakan properti terpisah. Properti bantalan singkatan juga dapat digunakan, untuk mengubah semua judul sekaligus.
            </div>
            <div id="footer">Copyright by Reza Aria</div>
        </div>

</body>
</html>


hasil dari scrict diatas adalah sebagai berikut:














untuk memperbaiki website yang berantakan seperti di atas kita harus belajar mengenai CSS dalam website, CSS (Cashade Style Sheet) adalah bahasa pemograman website untuk mengatur tata letak dari website, untuk website yang sudah rapih untuk pemula akan di bahas pada bahasan selanjutnya. staytuned :D




sumber: acilmedes.blogspot.com (blog: Reza Aria Wiranegara)






Kelompok softskill:


Aldhi Septo Wijanarko 50413596


Jejen Saefulloh       54413619


Reza Aria Wiranegara  57413490


Shesia Rizki Damara   58413441


















Diposting oleh





di




















Label:

















Tidak ada komentar:















Posting Komentar




















        

      










Langganan:
Posting Komentar (Atom)