Langsung ke konten utama

Latihan CSS

1. How to style alert buttons



<html>

<head>

<title>Latihan Button</title>

<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>



2. CSS forms

<html>
<head>
<title>Latihan Form</title>
</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=sumbit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px, 20px;
margin: 8px,0;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=sumbit]:hover {
bacground-color: #45a049;
}

div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<body>
<h3>Using CSS to style an HTML Form</h3>

<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    
<label for="1name">Last Name</label>
    <input type="text" id="1name" name="lastname" placeholder="Your last name..">

<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
    <option value="canada">Canada</option>
    <option value="usa">Usa</option>
    </select>
    
    <input type="sumbit" value="Sumbit">
   </form>
  </div>
  
</body>
</html>




3. CSS navigation bar

<html >
<head>
<title>Latihan Navigation Bar</title>
<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>



Komentar

Posting Komentar

Postingan populer dari blog ini

Implementasi Algoritma Divide And Conquer Pada Sorting Dan Searching

1.   Implementasi Algoritma Divide and Conquer Merge sort Beberapa algoritma mengimplementasikan konsep rekursi untuk menyelesaikan permasalahan. Permasalahan utama kemudian dipecah menjadi sub-masalah, kemudian solusi dari sub-masalah akan membimbing menuju solusi permasalahan utama. Pada setiap tingkatan rekursi, pola tersebut terdiri atas 3 langkah. 1. Divide     Memilah masalah menjadi sub masalah 2. Conquer     Selesaikan sub masalah tersebut secara rekursif. Jika sub-masalah tersebut cukup ringkas dan sederhana, pendekatan penyelesaian secara langsung akan lebih efektif 3. Kombinasi     Mengkombinasikan solusi dari sub-masalah, yang akan membimbing menuju penyelesaian atas permasalahan utama Seperti yang telah dijelaskan sebelumnya, Merge sort menggunakan pola divide and conquer. Dengan hal ini deskripsi dari algoritma dirumuskan dalam 3 langkahberpola divide-and-conquer. Berikut menjelaskan langkah kerja dari Merge sort. 1. Divide   ...
Posting Komentar
Baca selengkapnya

Sejarah, Definisi dan Cara Kerja Algoritma Divide and Conquer

    1.          Sejarah Algoritma Devide and Conquer             Awal dari algoritma ini utamanya adalah pengurangan dan penaklukan - masalah       asli secara berturut-turut dipecah menjadi sub-masalah tunggal, dan memang dapat          diselesaikan secara berulang. Pencarian biner, algoritma penurunan-dan-taklukkan 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 diurutkan untuk memfasilitasi pencarian tanggal kembali setidaknya sejauh Babylonia pada 200 SM. Algoritma penurunan-dan-taklukkan kuno lainnya adalah algoritma Euclidean untuk menghitung pembagi persekutuan terbesar dari dua bilangan dengan mengurangi...
Posting Komentar
Baca selengkapnya

Implementasi Algoritma Branch & Bound Pada Masalah Knapsack

   Pengertian Algoritma Branch and Bound Algoritma Branch and Bound atau algoritma B&B adalah salah satu dari algoritma yang digunakan untuk menyelesaikan masalah dalam pencarian jalur. Atau suatu algoritma yang mempelajari bagaimana cara memperkecil suatu Search Tree (pohon pencarian) menjadi sekecil mungkin. Metode ini terdiri dari 2 langkah, yaitu: Branch (Cabang) Membuat semua cabang dari pohon pencarian yang mungkin menuju ke solusi. Bound (Batas) Mencari dan menghitung node yang merupakan active node (E-node) dan node yang merupakan dead node (D-node) dengan menggunakan suatu syarat, yaitu  syarat batas constraint . Teknik Algoritma Branch and Bound Algoritma Branch and Bound dapat menggunakan beberapa titik, yaitu : 1. Least Cost Branch and Bound Teknik ini akan menghitung cost dari setiap node yang ada. Node yang memilki cost terkecil diantara node lain, dianggap memiliki kemungkinan paling besar menuju solusi. Tahap : node yang memiliki cost terendah akan dib...
Posting Komentar
Baca selengkapnya