Pemrograman Web:UTS
Appearance
MenuUtama.html
<html>
<head>
<title>Web</title>
h1 {
text-align: center;
}
h2 {
text-align: center;
}
p {
text-align: center;
}
.kt-header {
width: 83%;
height: 80px;
background-color: blueviolet;
text-align: center;
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
.kt-body-section {
display: flex;
margin: 10px 10px;
}
.kt-sidebar {
width: 10%;
height: 330px;
text-align: center;
padding: 20px;
background-color: rgb(93, 196, 62);
}
.kt-main-body {
width: 69%;
height: 330px;
border-radius: 5px;
text-align: left;
margin: 0 10px 0 10px;
padding: 20px;
background-color: aquamarine;
}
.kt-footer {
width: 83%;
height: 50px;
padding: 9px;
text-align: center;
color: azure;
background-color: black;
}
</style>
</head>
<body>
<div class="kt-header">
<h1>Web</h1>
</div>
<div class="kt-body-section">
<div class="kt-sidebar">
<h1>Menu</h1>
<h3><a href="MenuUtama.html">Home</a></h3>
<h3> <a href="Tips.html">Tips dan trik</a></h3>
<h3> <a href="TentangAku.html">Tentang Aku</a></h3>
<h3> <a href="Foto.html">Galeri Foto</a></h3>
</div>
<div class="kt-main-body">
<h1>Selamat Datang di Web</h1>
<hr>
<h2>Silahkan pilih menu yang teredia</h2>
<p><a href="Tips.html">Tips dan trik</a></p>
<p><a href="TentangAku.html">Tentang Aku</a></p>
<p><a href="Foto.html">Galeri Foto</a></p>
</div>
</div>
<footer>
<div class="kt-footer">
<p>All rights reserved Web</p>
</div>
</footer>
</body>
</html>
Tips.html
<html>
<head>
<title>Web</title>
<style type = "text/css" media = "all">
h1 {
text-align: center;
}
.kt-header {
width: 83%;
height: 80px;
background-color: blueviolet;
text-align: center;
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
.kt-body-section {
display: flex;
margin: 10px 10px;
}
.kt-sidebar {
width: 10%;
height: 330px;
text-align: center;
padding: 20px;
background-color: rgb(93, 196, 62);
}
.kt-main-body {
width: 69%;
height: 330px;
border-radius: 5px;
text-align: left;
margin: 0 10px 0 10px;
padding: 20px;
background-color: aquamarine;
}
.kt-footer {
width: 83%;
height: 50px;
padding: 9px;
text-align: center;
color: azure;
background-color: black;
}
</style>
</head>
<body>
<div class="kt-header">
<h1>Web</h1>
</div>
<div class="kt-body-section">
<div class="kt-sidebar">
<h1>Menu</h1>
<h3><a href="MenuUtama.html">Home</a></h3>
<h3> <a href="Tips.html">Tips dan trik</a></h3>
<h3> <a href="TentangAku.html">Tentang Aku</a></h3>
<h3> <a href="Foto.html">Galeri Foto</a></h3>
</div>
<div class="kt-main-body">
<h1>Halaman Tips & Trik site</h1>
<hr>
<p>Beberapa perintah yang sering digunakan adalah:</p>
<ul>
<li>Pengaturan Paragraf</li>
<ul type="a">
<li><PRE> -------- </PRE> digunakan untuk mengatur Paragraf PREFORMATED TEXT</li>
<li><P> -------- </P> digunakanuntuk berpindah atau membuat Paragraf Normal</li>
<li><BLOCKQUOTE> -------- </BLOCKQUOTE> untuj mengatur paragraf kutipan</li>
</ul>
<li>Pengaturan Font/Huruf</li>
<ul type="disc">
<li><FONT SIZE>"X"</FONT SIZE> digunakan untuk mengatur ukuran dan warna teks</li>
<li><B> -------- </B> digunakan untuk cetak tebal teks</li>
<li><I> -------- </I> digunakan untuk cetak miring teks</li>
<li><U> -------- </U> digunakan untuk cetak bergaris bawah teks</li>
</ul>
</ul>
</div>
</div>
<footer>
<div class="kt-footer">
<p>All rights reserved Web</p>
</div>
</footer>
</body>
</html>
Tentang.html
<html>
<head>
<title>Web</title>
<style type = "text/css" media = "all">
h1 {
text-align: center;
}
.kt-header {
width: 83%;
height: 80px;
background-color: blueviolet;
text-align: center;
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
.kt-body-section {
display: flex;
margin: 10px 10px;
}
.kt-sidebar {
width: 10%;
height: 330px;
text-align: center;
padding: 20px;
background-color: rgb(93, 196, 62);
}
.kt-main-body {
width: 69%;
height: 330px;
border-radius: 5px;
text-align: left;
margin: 0 10px 0 10px;
padding: 20px;
background-color: aquamarine;
}
.kt-footer {
width: 83%;
height: 50px;
padding: 9px;
text-align: center;
color: azure;
background-color: black;
}
</style>
</head>
<body>
<div class="kt-header">
<h1>Web</h1>
</div>
<div class="kt-body-section">
<div class="kt-sidebar">
<h1>Menu</h1>
<h3><a href="MenuUtama.html">Home</a></h3>
<h3> <a href="Tips.html">Tips dan trik</a></h3>
<h3> <a href="TentangAku.html">Tentang Aku</a></h3>
<h3> <a href="Foto.html">Galeri Foto</a></h3>
</div>
<div class="kt-main-body">
<h1>Halaman Tentang Aku Site</h1>
<hr>
<p>Nama: Kang Tain</p>
<p>NIM: 83737373737</p>
<p>Fakultas: TKA-12.1</p>
<p>Email: tain@kangtain.com</p>
<h4 style="text-align: center;">Jika tidak bisa berguna untuk orang lain maka jangan merigukan orang lain</h4>
</div>
</div>
<footer>
<div class="kt-footer">
<p>All rights reserved Web</p>
</div>
</footer>
</body>
</html>
Foto.html
<html>
<head>
<title>Web</title>
<style type = "text/css" media = "all">
h1 {
text-align: center;
}
img {
height: 75%;
}
.kt-header {
width: 83%;
height: 80px;
background-color: blueviolet;
text-align: center;
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
.kt-body-section {
display: flex;
margin: 10px 10px;
}
.kt-sidebar {
width: 10%;
height: 330px;
text-align: center;
padding: 20px;
background-color: rgb(93, 196, 62);
}
.kt-main-body {
width: 31%;
height: 330px;
text-align: left;
margin: 0 10px 0 10px;
padding: 20px;
background-color: aquamarine;
padding-left: 20%;
padding-right: 20%;
}
.kt-footer {
width: 83%;
height: 50px;
padding: 9px;
text-align: center;
color: azure;
background-color: black;
}
.kt-padding {
padding-left: 10%;
padding-right: 10%;
}
</style>
</head>
<body>
<div class="kt-header">
<h1>Web</h1>
</div>
<div class="kt-body-section">
<div class="kt-sidebar">
<h1>Menu</h1>
<h3><a href="MenuUtama.html">Home</a></h3>
<h3> <a href="Tips.html">Tips dan trik</a></h3>
<h3> <a href="TentangAku.html">Tentang Aku</a></h3>
<h3> <a href="Foto.html">Galeri Foto</a></h3>
</div>
<div class="kt-main-body">
<h1>Halaman Galeri Foto Site</h1>
<img src="wa-hacked.png" class="kt-padding" alt="WA Hacked">
</div>
</div>
<footer>
<div class="kt-footer">
<p>All rights reserved Web</p>
</div>
</footer>
</body>
</html>