Cara membuat menu pada website

Kali ini Computer Clock Could akan memberi tau scrip membuat menu pada website.

berikut adalah codennya :

simpan code ini dengan nama index.html (atau terserah kmu,yg penting ad .html)

<!doctype html>
<html>
   <head>
          <title> Computer Cloud Coding </title>
          <link href="style.css" type="text/css" rel="stylesheet" >
   </head>
<body>
          <div id="pertama">
            <nav>
               <img src="img/fb.png">
                  <ul>
                       <li><a href="">Home</a></li>
                       <li><a href="">Home</a></li>
                       <li><a href="">Home</a></li>
                       <li><a href="">Home</a></li>
                       <li><a href="">Home</a></li>
                 </ul>
             </nav>
           </div>
</body>
</html>

Catatan :

<link href="style.css" type="text/css" rel="stylesheet" > = untuk memanggil file yang berupa css atau untuk gaya website.
<a href=""> di dalam <li> berfungsi untuk memberikan arah alamat yang ingin dituju.

maka hasilnya akan seperti ini :

Setelah itu kita kasih stylennya, berikut adalah code scripnnya :

simpan scrip ini dengan nama style.css , bisa juga kita ganti namannya, asal perlu di ingat saat difile index.html kita buka dan kita ganti di :
<link href="(nama folder style kmu).css" rel="stylesheet" type="text">

* {
     padding: 0px;
     margin: 0px;
}

a {
     text-decoration: none;
     color: #000;
}

#pertama {
     background-color: blue;
     height: 65px;
}

img {
     padding: 5px 10px;
     width: 50px;
}

ul {
     float: right;
}

li{
     list-style: none;
     line-height: 60px;
     display: inline-block;
     font-size: 18px;
     margin: center;
     margin-right: 20px;
}

ul li a:hover {
     color: #fff;
}

Catatan :

text-decoration: none; untuk menghilangkan garis bawah pada menu.
padding: 5px 10px; = pada px pertama untuk rata atas dan bawah , dan px yang kedua untk rata kanan dan kiri.
list-style: none; = untuk menghilangkan titik yang ada di depan tulisan menu.
display: inline-block; = untuk mengubah menu yang tadinya ke bawah menjadi kesamping.
ul li a:hover = untuk memberikan efek hover bisa berupa warna , garis, kotak , dan lain-lain.
jika pada div diberikan id="pertama" , maka saat memberikan simbol di css berupa # (pagar) , jika memakai class="pertama", maka saat memberikan simbol di css berupa . (titik).

setelah kita menulis scrip style.css dan telah di save , maka coba kamu buka lagi file index.html dan pasti hasilnya akan seperti ini :