Jump to content

Pemrograman Web:UTS

From Wiki
Revision as of 23:55, 22 November 2022 by Kangtain (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
  • 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>&lt;PRE&gt; -------- &lt;/PRE&gt; digunakan untuk mengatur Paragraf PREFORMATED TEXT</li>
                    <li>&lt;P&gt; -------- &lt;/P&gt; digunakanuntuk berpindah atau membuat Paragraf Normal</li>
                    <li>&lt;BLOCKQUOTE&gt; -------- &lt;/BLOCKQUOTE&gt; untuj mengatur paragraf kutipan</li>
                </ul>
                <li>Pengaturan Font/Huruf</li>
                <ul type="disc">
                    <li>&lt;FONT SIZE&gt;"X"&lt;/FONT SIZE&gt; digunakan untuk mengatur ukuran dan warna teks</li>
                    <li>&lt;B&gt; -------- &lt;/B&gt; digunakan untuk cetak tebal teks</li>
                    <li>&lt;I&gt; -------- &lt;/I&gt; digunakan untuk cetak miring teks</li>
                    <li>&lt;U&gt; -------- &lt;/U&gt; 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>