Faris Salbari: Maret 2017

HTML:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css">
<title>website KAI</title>

<body class="bodystyles">

<ul>
<li><a class="active" href="#home">Pemesanan Tiket Kereta Api Online</a></li>
<li><a href="#news">Daftar Harga Kelas KA</a></li>
<li><a href="#contact">Daftar Jadwal KA</a></li>
<li><a href="#about">Daftar Pesanan Tiket</a></li>
</ul>

<div class="header">
<img src="kaai.png" alt="LogoKAI" />
<h1>Selamat Datang !!!</h1>
</div>
<br><br>
<hr>
<div>
<table class="tablestyles" >
<form name ="input" action="html_form_action.asp" method="get">
<tr><td> Nama Kereta:</td><td><input type="text" name="name" align="center" id="name" required></td></tr>
<tr><td> Tanggal Berangkat:</td><td><input type="date" name="departdate" align="center" required></td></tr>
<tr><td> Tanggal Tiba:</td><td><input type="date" name="arrivedate" align="center" required></td></tr>
<tr><td> Jam Berangkat:</td><td><input type="time" name="departtime" align="center" required></td></tr>
<tr><td> Jam Tiba:</td><td><input type="time" name="arrivetime" align="center" required></td></tr>
<tr><td> Dari:</td> <td><input type="text" name="from" align="center" required></td></tr>
<tr><td> Ke:</td><td><input type="text" name="to" align="center" required></td></tr>
<tr><td> Kelas:</td><td><select name="Kelas" form="kelasform">
<option value="Eksekutif">Eksekutif</option>
<option value="Bisnis">Bisnis</option>
</select></td></tr>

<tr>
<td><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Simpan</button></td>
<td><button type="button" style="background-color: #f44336; border-radius: 4px; color: white;width: 80px; height: 40px;">Batal</button></td><br>
</tr>

</table>
</div>

<div class="tablestyles1">
<table>
<tr>
<th>No</th>
<th>Nama Kereta</th>
<th>Jadwal Berangkat</th>
<th>Jadwal Tiba</th>
<th>Dari</th>
<th>Ke</th>
<th>Harga(Kelas)</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">Argo Parahyangan</td>
<td align="center">2014-04-22 - 06:00</td>
<td align="center">2014-04-22 - 08:45</td>
<td align="center">Gambir, Jakarta Pusat</td>
<td align="center">Bandung, Bandung</td>
<td align="center">Bisnis - 90.000</td>

<td class="input1"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">Argo Parahyangan</td>
<td align="center">2014-04-23 - 13:01</td>
<td align="center">2014-04-23 - 15:00</td>
<td align="center">Gambir, Jakarta Pusat</td>
<td align="center">Surabaya</td>
<td align="center">Eksekutif - 100.000</td>

<td class="input2"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
</tr>

</table>
</div>

</body>

</head>

</html>

CSS:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}

.header img {
padding-top: 10px;
position: absolute; left:50px; top:50px;
width: 120px;
height: 100px;
}

.header h1 {
position: relative;
top: 23px;
left: 200px;
color: blue;
}

.bodystyles {
background-color: white;
}

.tablestyles input[type=text],input[type=date],input[type=time] {
padding: 10px;
width: 100%;
height: 5px;
border-radius: 4px;
}

.tablestyles {
margin-top: 80px;
margin-left:auto;
margin-right:auto;
}

.tablestyles input[type=submit]{
background-color: red;
text-align:center;
padding: 5px 30px;
}

.tablestyles input[type=reset]{
background-color: blue;
text-align:center;
padding: 5px 30px;
}

.tablestyles1 table{
padding-left: 30px;
}

.tablestyles1 table,.tablestyles1 tr,.tablestyles1 th,.tablestyles1 td[align="center"]{
margin-top: 30px;
border-collapse: collapse;
padding-left: 5px;
padding-right: 30px;
border:1px solid black;
}

.tablestyles1 input[type=submit]{
background-color: red;
padding: auto;
text-align:center;
}

.tablestyles1 input[type=reset]{
background-color: blue;
padding: auto;
text-align:center;

}

Faris Salbari

Jumat, 31 Maret 2017

Design Web UTS

Jumat, 10 Maret 2017

Tugas 2 (Form HTML dan CSS)