PRAKTIK WEB DESAIN 1

-

  Latihan - CSS


1. Cara membuat color button

<!DOCTYPE html>
<html>
<head>
<style>
    .btn {

      border: none;
      color: white;
      padding: 14px 28px;
      font-size: 16px;
      cursor: pointer;
}
 

.success {background-color:#4CAF50;} /* Green */
.success:hover {background: #46a049;}
.info {background-color: #2196F3;} /* Blue */
.info:hover {background: #0b7dda;}
.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}
.danger {background-color: #f44336;} /* Red */
.danger:hover {background: #da190b;}
.default {background-color: #e7e7e7; color: black;} /* Gray */
.default:hover {background: #ddd;}

</style>
</head>

<body>
<h1>Alert Buttons</h1>
    <button class="btn success">Success</button>
    <button class="btn info">Info</button>
    <button class="btn warning">Warning</button>
    <button class="btn danger">Danger</button>
    <button class="btn default">Default</button>

</body>
</html

CONTOH HASIL : 


 2. Cara membuat Table Form

<!DOCTYPE html>
<html>
<head>
<style>
 input [type=text], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;

}
 input[type=submit] {
     width: 100%;
     background-color: #4CAF50;
     color: white;
     padding: 12px 20px;
     margin: 8px 0;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }
 
  input[type=submit]:hover {
    background-color: #45a049;
 }
 
 div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
 }

</style>
</head>

<body>
<h3>Using CSS to sytle an HTML Form</h3>
 <div>
    <form action="/action_page.php">
    <p><label for="fname">First Name</label></p>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    <p><label for="lname">Last Name</label></p>
    <input type="text" id="lname" name="lasttname" placeholder="Your last name..">
    <p><label for="country">Country</label></p>
    <select id="country" name="country">
    <option value="australia">Australia</option>
    <option value="canada">Canada</option>
    <option value="usa">USA</option>

      </select>
        <input type="submit" value="Submit" >
    </form>

 </div>
</body>
</html>

COTOH HASIL :




3. Cara membuat Table Navigation Bar

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: arial; }
    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: 14px 16px;
      text-decoration: none;
    }
    li a:hover:not(.active){
      background-color: #111;
    }
    .active {
      background-color: #4CAF50;
    }

</style>
</head>

<body>
 <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>

 </ul>
</body>
</html>

CONTOH HASIL :



 4. Cara membuat DropDown Menu

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family:arial; }
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }
    li {
      float: left;
    }
    li a, .dropbtn {
      display: inline-block;
      color: white;
      texet-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    li a:hover, .dropdown:hover, .dropbtn {
      background-color: red;
    }
    li.dropdown {
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2);
      z-index: 1;
    }
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    .dropdown-content a:hover {background-color: #f1f1f1}
    .dropdown:hover .dropdown-content {
      display: block;
}
</style>
</head>

<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
  <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
  <a href="#">Link 1></a>
  <a href="#">Link 2></a>
  <a href="#">Link 3></a>

    </div>
  </li>
</ul>
 
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>

CONTOH HASIL : 




Comments

Post a Comment

Popular posts from this blog

Perkembangan dan sejarah Read Only Memory(ROM)

-
Image
 PERKEMBANGAN SEJARAH ROM Pada postingan kali ini saya akan membahas tentang perkembangan ROM (Read Only Memory), manfaat ROM dan cara kerja atau prinsip kerja ROM, yang juga merupakan tugas ketiga dalam mata kuliah perangkat keras, semoga bermanfaat. Perkembangan ROM (Read Only Memory) ROM (Read Only Memory) biasa juga disebut sebagai firmware merupakan jenis memori yang isinya tidak hilang ketika tidak mendapat aliran listrik dan pada awalnya isinya hanya bisa dibaca. ROM pada komputer disediakan oleh vendor komputer yang berisi program dan data. Di dalam sebuah PC, ROM biasa disebut sebagai BIOS (Basic Input/Output System) atau ROM-BIOS. Instruksi dalam BIOS inilah yang akan dijalankan oleh mikroprosesor ketika komputer mulai dihidupkan. Umumnya proses yang terkandung dalam BIOS secara berurutan adalah sebagai berikut: Memeriksa isi CMOS. Membuat penanganan interupsi (Interrupt Handlers) dan pengendali piranti (device    driver). Menginisialisasi register dan...
Read more

Sejarah, Definisi dan Cara Kerja Algoritma Divide and Conquer

-
Image
Nama: Kinanti Anggraini Utami NPM: 20312085 Kelas: IF20C Sejarah, Definisi dan Cara Kerja Algoritma Divide and Conquer  Sejarah Divide & Conquer Pada zaman dahulu, divide and conquer merupakan strategi militer yang dikenal dengan nama divide ut imperes. saat ini strategi tersebut menjadi strategi fundamental di dalam imlmi komputer dengan nama divide and qonqer. algoritma divide dan qonquer ini ditemukan oleh seorang ilmuan Rusia bernama Anatolii Alexeevich Karatsuba pada tahun 1960. pada mulanya beliau menemukan algoritma yang lebih mangkus untuk mengalikan dua buah bilangan bulat yang besar. Algoritma divide and conquer di mana sub-masalah berukuran kira-kira setengah dari ukuran aslinya, memiliki sejarah yang panjang. Sementara deskripsi yang jelas tentang algoritma pada komputer muncul pada tahun 1946 dalam sebuah artikel oleh John Mauchly, gagasan untuk menggunakan daftar item yang disortir untuk memfasilitasi pencarian berasal dari setidaknya sejauh Babylonia pada 200 SM....
Read more

Implementasi Algoritma Divide And Conquer Pada Sorting dan Searching

-
Image
  Nama       : Kinanti Anggraini Utami NPM      : 20312085 Kelas       : IF 20  Implementasi Algoritma Divide And Conquer Pada Sorting dan Searching Komputer pada awalnya diciptakan sebagai perangkat untuk melakukan kalkulasi secara otomatis dan akurat. Meskipun awalnya hanya berfokus pada kalkukasi numerik, komputer modern yang dijumpai sekarang telah melakukan kalkulasi pada banyak hal, seperti teks ataupun gambar. Berbagai kalkulasi dan analisa yang dilakukan komputer biasanya diimplementasikan melalui perangkat lunak. Dengan semakin besarnya ruang lingkup hal-hal yang dilakukan oleh komputer, perangkat lunak yang dikembangkan juga menjadi semakin kompleks. Algoritma, sebagai bagian dari perangkat lunak yang melakukan pemrosesan, juga memerlukan berbagai teknik baru. Misalkan, untuk menghitung total jumlah dari bilangan-bilangan yang ada di dalam sebuah list, kita dapat menggunakan perulangan se...
Read more