Selasa, 27 September 2016

Membuat Layout Web Sederhana menggunakan HTML dan CSS dengan Menu Horizontal

By  at 13.00    No comments
Assalamu'alaikum Wr Wb.

Hai Teman-teman pada kesempatan kali ini saya akan melanjutkan Tutorial yang sebelumnya dan saya sekarang akan Membuat Layout Web Sederhana dengan Menu Horizontal.

A. Pengertian
    Layout adalah suatu elemen desain yang ditempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu.

B. Jangka Waktu
    Saya membutuhkan waktu sekitar 60 Menit.

C. Alat dan Bahan
  • Laptop/PC
  • Text Editor
D. Tahap Pelaksanaan

1. Pertama-tama buka text editor, disini saya menggunakan sublime text.
2. Setelah itu tulis script-script di bawah ini dengan nama beranda.html

<!DOCTYPE html>
<html>
<head>
    <title>HALAMAN WEB KU DEWE</title>
    <style>
        #atas{
            margin-left: 50px;
            width: 72%;
            height: 70px;
            background: #9A12B3;
            border-top-left-radius: 60px;
        }
        h2{
            padding-top: 20px;
            padding-left: 300px;
            color: #36D7B7;
            font-family: Purisa;
        }
        #nav{
            margin-top: -19px;
            margin-left: 50px;
            width: 72%;
            height: 40px;
            background: #222;
            border-bottom: 7px solid#4183D7;
        }
        .menu li{
            display: inline-block;
            padding: 10px;
        }
        .menu li a{
            text-decoration: none;
            color: #19B5FE;
        }
        #content{
            margin-left: 50px;
            width: 912px;
            height: 400px;
            background: #D2527F;
            padding: 30px;
            color: #fff;
        }
        #bawah{
            margin-left: 50px;
            width: 72%;
            height: 40px;
            background: #52B3D9;
            color: #fff;
            margin-top: -20px;
        }
        p{
            padding-top: 9px;
            margin-left: 360px;
        }
    </style>
</head>
<body>
<div id="atas">
    <h2>WEB SMK HASAN KAFRAWI</h2>
</div>
<div id="nav">
    <ul class="menu">
        <li><a href="">Menu 1</a></li>
        <li><a href="">Menu 2</a></li>
        <li><a href="">Menu 3</a></li>
    </ul>
</div>
<div id="content">
    KONTEN WEB SMK HASAN KAFRAWI
</div>
<div id="bawah">
    <p>Copy Right by @Nikmah_Sya</p>
</div>
</body>
</html>

#Kode di atas saya gabungkan html dan css nya, supaya mudah untuk dicoba.
#Dan di bawah ini adalah hasil  dari script-script di atas.


E. Hasil yang di dapatkan
    Kita bisa membuat Layout sendiri sesuai keinginan keingnan kita sendiri.

F. Referensi
    Sekian dari saya, tentang tutorial Membuat layout web sederhana, semoga bermanfaat dan selamat mencoba.

Wassalamu'alaikum Wr Wb.

0 komentar:

Posting Komentar