Beranda TKJ Cara Membuat Menu dengan Html dan CSS
Cara Membuat Menu dengan Html dan CSS
Yoo kawan-kawan Otaku-it Disini mimin mau share sedikit mengenai cara membuat menu dengan menggunakan html dan css nah untuk program editornya disini mimin gunakan Visual Studio Code yang bisa didownload disini
yuk langsung saja codingnya dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Otaku-It</title>
<style>
#menu{
padding: 1%;
background-color: black;
}
.textmenu{
color: coral;
margin-left: 5%;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
#footer{
padding: 1%;
margin-top: 27%;
background-color: black;
color: white;
}
#image:hover{
opacity: 0.3;
}
</style>
</head>
<body>
<div id="menu">
<center>
<a class="textmenu" href="index.html">Home</a>
<a class="textmenu" href="about.html">About</a>
<a class="textmenu" href="contact.html"> Contact Us</a>
</center>
</div>
<table border>
<tr>
<td colspan="2">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda facere, rem sed ducimus nisi reiciendis? Nihil facilis rerum, illum consectetur odio reprehenderit, aliquam voluptates repellendus fugiat officiis, sequi at voluptatibus.</p>
</td>
</tr>
<tr>
<td>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, beatae, odio ipsum laboriosam corrupti dolore, saepe exercitationem mollitia cumque recusandae delectus! Alias reprehenderit nostrum dolores, provident voluptatum a aperiam aliquid.</p>
</td>
<td><img id="image" src="usleep.png" alt="img-can-be-loaded" width="300px" height="80px"></td>
</tr>
</table>
<div id="footer">
<center>
Otaku-It
</center>
</div>
</body>
</html>
maka tampilanya akan seperti berikut:
Sekian tutorial dari saya jika belum mengerti dapat berkomentar dibawah ini
Selamat mencoba /('-')/\('-')\ admin@zee
yuk langsung saja codingnya dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Otaku-It</title>
<style>
#menu{
padding: 1%;
background-color: black;
}
.textmenu{
color: coral;
margin-left: 5%;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
#footer{
padding: 1%;
margin-top: 27%;
background-color: black;
color: white;
}
#image:hover{
opacity: 0.3;
}
</style>
</head>
<body>
<div id="menu">
<center>
<a class="textmenu" href="index.html">Home</a>
<a class="textmenu" href="about.html">About</a>
<a class="textmenu" href="contact.html"> Contact Us</a>
</center>
</div>
<table border>
<tr>
<td colspan="2">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda facere, rem sed ducimus nisi reiciendis? Nihil facilis rerum, illum consectetur odio reprehenderit, aliquam voluptates repellendus fugiat officiis, sequi at voluptatibus.</p>
</td>
</tr>
<tr>
<td>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, beatae, odio ipsum laboriosam corrupti dolore, saepe exercitationem mollitia cumque recusandae delectus! Alias reprehenderit nostrum dolores, provident voluptatum a aperiam aliquid.</p>
</td>
<td><img id="image" src="usleep.png" alt="img-can-be-loaded" width="300px" height="80px"></td>
</tr>
</table>
<div id="footer">
<center>
Otaku-It
</center>
</div>
</body>
</html>
maka tampilanya akan seperti berikut:
Sekian tutorial dari saya jika belum mengerti dapat berkomentar dibawah ini
Selamat mencoba /('-')/\('-')\ admin@zee