Cara Membuat Header Web Sederhana HTML

hmmm karena sudah dua postingan dan hal utama terlupakan yaitu header. ya ... header biasa diisi dengan tema web atau judul web. setelah dua postingan yang membahas tentang struktur web sederhana menggunakan html dan cara membuat tampilan body ternyata ada yang terlupakan hhehe

Kita tambahkan tag <header>...</header> setelah tag <body> jadi nanti header ini berada di atas konten artikel dan konten widget yang telah kita buat sebelumnya.

Baca Juga : Cara Membuat Navbar Responsive Website HTML CSS Sederhana


Nah ... setelah kita implimentasikan kodenya, strukturnya jadi seperti kode di atas. kita dapat menyisipkan kode css pada bagian tag yang kita ingin rubah, pada kode tersebut di bagian header saya menambahkan beberapa script css seperti background, padding dan color, background.

Berfungsi untuk memberikan warna pada header, padding untuk mengatur tampilan objek agar lebih enak dilihat dan color berfungsi untuk mengatur warna tulisan.

Jika kode tersebut kita buka di browser akan menampilkan seperti ini :

Nah.. tampilannya lumayan lah ya ada warnanya biru hehe. Membuat tampilan web itu gampang-gampang susah, dibilang gampang ya susah hehe. Jiwa seni harus ikut serta dalam pembuatannya karena tampilan merupakan hal pertama yang dilihat pengunjung web.

Namun membuat tampilan web bukan serta merta hanya sebatas tampilan saja masih banyak hal yaitu bagian logikanya ...hehe

Postingan selanjutnya saya akan mengajak untuk membahas tentang footer biar lengkap ada title, header, body dan footer


Qoute lama

" Tidak ada kata terlambat untuk belajar "

Tulisan di atas merupakan tulisan awal saya tentang tutorial mengenai cara membuat header sederhana, sekarang saya akan menambahkan beberapa kode html dan css untuk teman - teman semua karena saya rasa tampilan di atas sangat sederhana. Berikut tampilan header yang akan kita bahas

tampilan header sederhana gapunyakode
HTML
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Dashboard Ga Punya Kode</title>
</head>

<body>
<h1>Dashboard Ga Punya Kode</h1>
<div class="nav-header">
<ul>
<li>
<a class="active" href="#home">Home</a>
</li>
<li class="dropdown">
<a class="dropbutton" href="#">DropdownMenu</a>
<label class="dropdown-content">
<a href="#">Menu 1</a>
    <a href="#">Menu 2</a>
    <a href="#">Menu 3</a>
</label>
</li>

<li class="form-login">
<form action="">
<label>Username:</label>
<input type="text" name="username">

<label>Password:</label>
<input type="text" name="password">

<input type="submit" value="LogIn">
</form>
</li>
</ul>
</div>
<!--layout-->
<div class="container"><!--kode gambar pada html -->
<div class="image-overlay">
<div class="overlay">
  <div class="box">
  <h2>Ga Punya Kode</h2>
  </div>
</div>
<a href="https://www.gapunyakode.blogspot.com">
<img src="works.jpeg" alt=" " >
</a>
</div>
</div>
</body>
</html> 

CSS
body {
  margin: 15px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
}

.active {
  background-color: #FF0B7B;
}

li label {
color: white;
}
.form-login {
float: right;
margin-top: 10px;
margin-right: 10px;
}

form {
margin-left: 45px;
}
h2 {
margin-left: 45px;
}

img {
    width: 100%;
    height: 250px;
    border-radius: 10px;
}
//--- dropdown ----//
li a {

}
.dropbutton {
    background-color: black;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: fixed;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1; 
    opacity: 0.7;
}

.dropdown-content a {
    color: black;
    padding: 16px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #d8d8d8}

.dropdown:hover .dropdown-content {
    display: block;
    margin-top: 0px;
}

.dropdown:hover .dropbtn {
    background-color: #f9f9f9;
}
// The overlay code

.image-overlay {
  position: relative;
  overflow: hidden;
  text-align: center;
  width: 20%;
  line-height: 120px;
  height: 120px;
  background: #103B51;
  border-radius: 10px;
  box-shadow: 0 5px 1px #f9f9f9;
  cursor:pointer;
}
.image-overlay:hover .overlay{
    opacity: 0.5;
  }
.overlay{
  position: absolute;
  border-radius: 10px;
  opacity: 0;
  background: #f9f9f9;
  @include transition (opacity .5s ease-in-out);
}

.box {
  font-size: 20px;
  font-weight: 200;
  color: black;
  padding: 0;
  width: 1246px;
  height: 225px;
  text-align: center;
  margin-left: 0px;
}

.image-overlay img {
  width: 100%;
  height: 250px;
  border-radius: 10px;
}

Tempatkan kode css tersebut diantara <head> dan </head> jangan lupa memberikan kode <style> </style>. Untuk lebih lengkapnya teman - teman bisa cek beberapa artikel klik pada menu tentang design nanti ada beberapa artikel yang membahas tentang cara membuat design web sederhana terbaru dari saya.

Terima Kasih

0 Response to "Cara Membuat Header Web Sederhana HTML "

Post a Comment

Silahkan berkomentar Sob tapi untuk beberapa komentar yang tidak sesuai seperti link aktif dan hal-hal yang tidak baik tidak akan ditampilkan !. Terima kasih

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel