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.
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.
HTML
CSS
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
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.
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.
Jika kode tersebut kita buka di browser akan menampilkan seperti ini :
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
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.
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.
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.androitechnoku.blogspot.com">
<img src="works.jpeg" alt=" " >
</a>
</div>
</div>
</body>
</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.androitechnoku.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;
}
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