Friday, 11 May 2018

Membuat Header Dan Link Horizontal

Assalamu'alaikum warohmatulloh wabarokaatuh sobat  masih ingat kemaren kemaren kita belajar membuat link horizontal  nah sekarang kita belajar membuat Header di tambah link horizontal soal nya kebanyakan website kalao saya lihat link horizontal nya di bawah header,,,,ok langsung saja



Membuat Header berikut Link Wana Warni

Ini Code nya Html nya

<!DOCTYPE html>
<html>
<head>
<title>Header dan Link Horizontal</title>
<meta charset="utf-8">
<style>
* {
    box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
</style>
</head>
<body>
<div class="header" style="background-color: #9900CC">
  <h1><font color="#FF6600">Catatan Sederhana</font></h1>
  <p><font color="#C0C0C0">Blog Tentang Berbagi Ebook, Pengetahuan Dan Tutorial.</font></p>
</div>
<div class="topnav"
  <a href="#"><a href="#"><font color="#FF0000" size="4">Link</font></a><font color="#FF0000">
</font>
  <a href="#"><font color="#800080" size="4">Link</font></a><font color="#800080">
</font>
  <a href="#"><font color="#000080" size="4">Link</font></a><font color="#000080">
</font>
  <a href="#"><font color="#008080" size="4">Link</font></a>
</div>
</body>
</html>

ini hasilnya
Header dan link Horizontal

ket
Header nya yang saya kasih warna biru
link horizontal warna warni yang saya kasih warna merah

Jika Sobat Belum Membaca Artikel Membuat Link Horizontal Klik LANJUT 

Alhamdulilah Catatan sederhana membuat header dan link horizontal telah selesai Mohon maaf jika ada kesalahan Wasalamu'alaikum warohmatulloh wabarokaatuh

No comments:

Post a Comment