Preview :
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5115100115</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
<body>
<div class="container">
<br>
<div class="container">
<div class="row">
<nav class="nav navbar-default col-md-12">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Tentang</a></li>
</ul>
</div>
</nav>
<div class="col-md-12">
<body style="background-color:black;">
<h1 style="text-align:center;font-size:100%;color:white;">Be grateful, always</h1>
</h4>
</div>
</div>
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.designyourway.net/diverse/inspiringwalp/234864.jpg" width="500" height="300">
</div>
<div class="item">
<img src="http://68.media.tumblr.com/c27df26fad2cdb466ae4af67ba2fc697/tumblr_mwwbflxGQq1qi713so1_500.jpg" width="500" height="300">
</div>
<div class="item">
<img src="http://i.quoteaddicts.com/media/quotes/1/19810-islamic-quotes.jpg" width="500" height="300">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Waterincess
welcome to my blog ^_^
Thursday, April 27, 2017
Saturday, April 1, 2017
ETS Peweb
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kita Bisa</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- sremove-721dc40a5c6ff383852252f845bd41d5 --><script></script><!-- sremove-end -->
<!-- sremove-ec54aaae5568947f433ab2c8d75fca91 --><script></script><!-- sremove-end -->
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
background-color: #336699;
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: black;
padding: 0px;
}
.img-circle {
border-radius: 50%;
width:30%;
}
.banner-img img {
width: 100%;
}
#information {
height: 100%;
width: 100%;
background-color: #336699;
background-size: 100%;
}
#information .kotak {
position: relative;
display: inline-block;
text-align: center;
width: 280px;
height: 180px;
font-size: 15px;
font-family: sans-serif;
color: white;
padding: 20px;
}
#icon-sm a img {
max-width: 7%;
max-height: 7%;
}
.col-sm-4 {
color: #c2d6d6;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img
{
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://aaliizaa.me/kitabisa.html"><img src="https://assets.kitabisa.com/images/site-logo-white.png" style="width:50%" alt="Image"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://aaliizaa.me/kitabisa.html">About</a></li>
<li class="active"><a href="http://aaliizaa.me/galery.html">Galery</a></li>
<li><a href="http://aaliizaa.me/kontak.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container text-center">
<h3>Galeri Kita Bisa</h3>
</div>
</div>
<br>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://static-04.kitabisa.com/31_30173_1490353027_804179_f.jpg" alt="a1" width="360" height="240">
</div>
<div class="item">
<img src="https://static-04.kitabisa.com/31_29163_1488987712_809160_f.png" alt="a2" width="360" height="240">
</div>
<div class="item">
<img src="https://static-03.kitabisa.com/31_29963_1490006986_282042_f.png" alt="a3" width="360" height="240">
</div>
<div class="item">
<img src="https://static-02.kitabisa.com/31_24104_1478932477_107120_f.png" alt="a4" width="360" height="240">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<br><br>
<footer>
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-sm-4">
<h3>Tentang Kami</h3>
<a href="http://aaliizaa.me/kitabisa.html">Team</a></li>
<p>
<a href="#">FAQ</a>
</p>
</div>
<div class="col-sm-4">
<h3>Situs</h3>
<a href="https://kitabisa.com/">kitabisa.com</a></li>
</div>
<div class="col-sm-4">
<h3>Kontak</h3>
<div id="icon-sm">
<a href="https://www.facebook.com/Kitabisadotcom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTx-SbJBEoJvm6hC6ZtcLOBn2n2yIKou1KNtUyY7h6-inQbVUPY23EdZm5IpJML695SZvbhvwAIHSELVxNtibfZ3qec5Zhjm2VmRv30T7ADnBMPr4F7AbQTOlgfv8CkkIdGM4bgtGTeB3c/s1600/001-facebook.png"></a>
<a href="https://twitter.com/kitabisacom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqioU3umf94U_RnC12bLmRu-YpvoxwOa_9OcszS75cqQ1krJo9lRZOp2wRGMr6JEhBxY1LQ4MQlOfNCQGJcKudsKh01AVp1zPlvFlMwB2vgM7psegIkZs7J9DnTeGYbTPwqdf0sy-6rXqG/s1600/002-twitter.png"></a>
<a href="https://instagram.com/kitabisacom/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXO9AMsK5QOmDtvvJV-zYp9PhnLvJO2BXTiXoBtBHx-PpqCoJCr_ZHu_39C9pbOtbAzRBIDXBOsZm8G2bI61FHuf5CKAe5fZUPMTTrjUnVxw4ku4P4noXhfrk5ra-flyR3DU7U5tuDHa8/s1600/004-instagram.png"></a>
<a href=https://www.youtube.com/user/kitabisaindonesia><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5yudz_ZMALfdr4OR-MeMPIVoz_hV6DdbNxZ8VVJKcH4s2Fp9oSMPyjwAdEuC5I2xCXZzSNcsf7zMZDrhXW6V5Vf-311NiVlcy5gQU02lG9fw5nOVOHf04tJSdKRVmoX-buWEHzojhZd_c/s1600/003-youtube.png"></a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
<html lang="en">
<head>
<title>Kita Bisa</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- sremove-721dc40a5c6ff383852252f845bd41d5 --><script></script><!-- sremove-end -->
<!-- sremove-ec54aaae5568947f433ab2c8d75fca91 --><script></script><!-- sremove-end -->
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
background-color: #336699;
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: black;
padding: 0px;
}
.img-circle {
border-radius: 50%;
width:30%;
}
.banner-img img {
width: 100%;
}
#information {
height: 100%;
width: 100%;
background-color: #336699;
background-size: 100%;
}
#information .kotak {
position: relative;
display: inline-block;
text-align: center;
width: 280px;
height: 180px;
font-size: 15px;
font-family: sans-serif;
color: white;
padding: 20px;
}
#icon-sm a img {
max-width: 7%;
max-height: 7%;
}
.col-sm-4 {
color: #c2d6d6;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img
{
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://aaliizaa.me/kitabisa.html"><img src="https://assets.kitabisa.com/images/site-logo-white.png" style="width:50%" alt="Image"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://aaliizaa.me/kitabisa.html">About</a></li>
<li class="active"><a href="http://aaliizaa.me/galery.html">Galery</a></li>
<li><a href="http://aaliizaa.me/kontak.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container text-center">
<h3>Galeri Kita Bisa</h3>
</div>
</div>
<br>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://static-04.kitabisa.com/31_30173_1490353027_804179_f.jpg" alt="a1" width="360" height="240">
</div>
<div class="item">
<img src="https://static-04.kitabisa.com/31_29163_1488987712_809160_f.png" alt="a2" width="360" height="240">
</div>
<div class="item">
<img src="https://static-03.kitabisa.com/31_29963_1490006986_282042_f.png" alt="a3" width="360" height="240">
</div>
<div class="item">
<img src="https://static-02.kitabisa.com/31_24104_1478932477_107120_f.png" alt="a4" width="360" height="240">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<br><br>
<footer>
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-sm-4">
<h3>Tentang Kami</h3>
<a href="http://aaliizaa.me/kitabisa.html">Team</a></li>
<p>
<a href="#">FAQ</a>
</p>
</div>
<div class="col-sm-4">
<h3>Situs</h3>
<a href="https://kitabisa.com/">kitabisa.com</a></li>
</div>
<div class="col-sm-4">
<h3>Kontak</h3>
<div id="icon-sm">
<a href="https://www.facebook.com/Kitabisadotcom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTx-SbJBEoJvm6hC6ZtcLOBn2n2yIKou1KNtUyY7h6-inQbVUPY23EdZm5IpJML695SZvbhvwAIHSELVxNtibfZ3qec5Zhjm2VmRv30T7ADnBMPr4F7AbQTOlgfv8CkkIdGM4bgtGTeB3c/s1600/001-facebook.png"></a>
<a href="https://twitter.com/kitabisacom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqioU3umf94U_RnC12bLmRu-YpvoxwOa_9OcszS75cqQ1krJo9lRZOp2wRGMr6JEhBxY1LQ4MQlOfNCQGJcKudsKh01AVp1zPlvFlMwB2vgM7psegIkZs7J9DnTeGYbTPwqdf0sy-6rXqG/s1600/002-twitter.png"></a>
<a href="https://instagram.com/kitabisacom/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXO9AMsK5QOmDtvvJV-zYp9PhnLvJO2BXTiXoBtBHx-PpqCoJCr_ZHu_39C9pbOtbAzRBIDXBOsZm8G2bI61FHuf5CKAe5fZUPMTTrjUnVxw4ku4P4noXhfrk5ra-flyR3DU7U5tuDHa8/s1600/004-instagram.png"></a>
<a href=https://www.youtube.com/user/kitabisaindonesia><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5yudz_ZMALfdr4OR-MeMPIVoz_hV6DdbNxZ8VVJKcH4s2Fp9oSMPyjwAdEuC5I2xCXZzSNcsf7zMZDrhXW6V5Vf-311NiVlcy5gQU02lG9fw5nOVOHf04tJSdKRVmoX-buWEHzojhZd_c/s1600/003-youtube.png"></a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
Friday, March 31, 2017
Thursday, March 16, 2017
Tugas 3 Formulir Registrasi
<!DOCTYPE html>
<html>
<head>
<title>Form Registrasi Mahasiswa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></script>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
.navbar-default
{
font-family: "Roboto", Helvetica, Arial, sans-serif;
background-color: #009933
}
body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 12px;
line-height: 30px;
color: #000066;
background: #5bc0de;
}
.container {
width: 100%;
margin: 50 auto;
position: relative;
}
}
</style>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" style="color: #FFF">FORMULIR REGISTRASI MAHASISWA</a>
</div>
</div>
</nav>
<div class="container">
<div class="col-sm-4-text-center">
<h1 style="text-align: center">Formulir Registrasi Mahasiswa</h1>
</div>
</div>
<br><br><br>
<div class="container">
<form class="form-horizontal" role="form" method="post" action="send.php">
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="nama">Nama Mahasiswa</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="nama">
</div>
<label class="control-label col-sm-offset-3 col-sm-2" for="NRP">NRP</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="nrp" list="nrplist">
<datalist id="nrplist">
</datalist>
<script>
var counter = 0;
var stringlist = '';
var options = '';
var listnrp = [];
for(var i=1; i<=5; i++)
{
switch(i)
{
case 1:
for(var j=1; j<=5; j++)
{
stringlist += i;
stringlist += j+'100';
listnrp[counter] = stringlist;
stringlist = '';
counter++;
}
break;
case 2:
for(var j=1; j<=5; j++)
{
stringlist += i;
stringlist += j+'100';
listnrp[counter] = stringlist;
stringlist = '';
counter++;
}
break;
case 3:
for(var j=1; j<=8; j++)
{
stringlist += i;
stringlist += j+'100';
listnrp[counter] = stringlist;
stringlist = '';
counter++;
}
break;
case 4:
for(var j=1; j<=4; j++)
{
stringlist += i;
stringlist += j+'100';
listnrp[counter] = stringlist;
stringlist = '';
counter++;
}
break;
case 5:
for(var j=1; j<=2; j++)
{
stringlist += i;
stringlist += j+'100';
listnrp[counter] = stringlist;
stringlist = '';
counter++;
}
break;
}
}
for(var k=0; k<counter; k++)
{
options += '<option value='+listnrp[k]+'>';
}
document.getElementById('nrplist').innerHTML = options;
console.log(options);
</script>
</div>
<label class="control-label col-sm-offset-3 col-sm-2" for="matkul">Mata Kuliah</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="matkul" list="matkullist">
<datalist id="matkullist">
</datalist>
<script>
var matkul = ["Otomata","Pemrograman Web","Kecerdasan Buatan","Perancangan Analisis Algoritma II","Jaringan Komputer","Manajemen Basis Data","Wawasan Teknologi"];
var options = '';
for(var k=0; k<matkul.length; k++)
{
options += '<option value="'+matkul[k]+'">';
}
document.getElementById('matkullist').innerHTML = options;
console.log(options);
</script>
</div>
<label class="control-label col-sm-offset-3 col-sm-2" for="dosen">Dosen</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="dosen">
</div>
<div class="form-group">
<br>
<div class="col-sm-offset-5 col-sm-10", align="center">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
hasil :
<html>
<head>
<title>Form Registrasi Mahasiswa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></script>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
.navbar-default
{
font-family: "Roboto", Helvetica, Arial, sans-serif;
background-color: #009933
}
body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 12px;
line-height: 30px;
color: #000066;
background: #5bc0de;
}
.container {
width: 100%;
margin: 50 auto;
position: relative;
}
}
</style>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" style="color: #FFF">FORMULIR REGISTRASI MAHASISWA</a>
</div>
</div>
</nav>
<div class="container">
<div class="col-sm-4-text-center">
<h1 style="text-align: center">Formulir Registrasi Mahasiswa</h1>
</div>
</div>
<br><br><br>
<div class="container">
<form class="form-horizontal" role="form" method="post" action="send.php">
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="nama">Nama Mahasiswa</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="nama">
</div>
<label class="control-label col-sm-offset-3 col-sm-2" for="NRP">NRP</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="nrp" list="nrplist">
<datalist id="nrplist">
</datalist>
<script>
var counter = 0;
var stringlist = '';
var options = '';
var listnrp = [];
for(var i=1; i<=5; i++)
{
switch(i)
{
case 1:
for(var j=1; j<=5; j++)
{
stringlist += i;
stringlist += j+'100';
listnrp[counter] = stringlist;
stringlist = '';
counter++;
}
break;
case 2:
for(var j=1; j<=5; j++)
{
stringlist += i;
stringlist += j+'100';
listnrp[counter] = stringlist;
stringlist = '';
counter++;
}
break;
case 3:
for(var j=1; j<=8; j++)
{
stringlist += i;
stringlist += j+'100';
listnrp[counter] = stringlist;
stringlist = '';
counter++;
}
break;
case 4:
for(var j=1; j<=4; j++)
{
stringlist += i;
stringlist += j+'100';
listnrp[counter] = stringlist;
stringlist = '';
counter++;
}
break;
case 5:
for(var j=1; j<=2; j++)
{
stringlist += i;
stringlist += j+'100';
listnrp[counter] = stringlist;
stringlist = '';
counter++;
}
break;
}
}
for(var k=0; k<counter; k++)
{
options += '<option value='+listnrp[k]+'>';
}
document.getElementById('nrplist').innerHTML = options;
console.log(options);
</script>
</div>
<label class="control-label col-sm-offset-3 col-sm-2" for="matkul">Mata Kuliah</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="matkul" list="matkullist">
<datalist id="matkullist">
</datalist>
<script>
var matkul = ["Otomata","Pemrograman Web","Kecerdasan Buatan","Perancangan Analisis Algoritma II","Jaringan Komputer","Manajemen Basis Data","Wawasan Teknologi"];
var options = '';
for(var k=0; k<matkul.length; k++)
{
options += '<option value="'+matkul[k]+'">';
}
document.getElementById('matkullist').innerHTML = options;
console.log(options);
</script>
</div>
<label class="control-label col-sm-offset-3 col-sm-2" for="dosen">Dosen</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="dosen">
</div>
<div class="form-group">
<br>
<div class="col-sm-offset-5 col-sm-10", align="center">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
hasil :
Friday, March 3, 2017
Tugas Pemrograman Web 2
Source Code
HTML :
<html lang="em"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="form.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Pemesanan Tiket Kereta Online</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav"
style="background-color: #2789D2">
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Daftar Harga Kelas KA</a></li>
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Daftar Jadwal KA</a></li>
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">..</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">
<span class="glyphicon glyphicon-log-out" style="color: rgb(255, 255, 255);background-color: #2789D2"></span> Logout</a></li>
</ul>
</div>
</div>
</nav>
<div style="padding: 10px">
<table>
<tr>
<td>
<img id="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8rPBEzO9HiUuF97Yep29JFTnQNLu6_NW3bUwqBvqKL1pkKuly1gmRRv2YpcdKNRIn7deGuqL2nvLU7duPuv_V9wutVDM6gtkcZnWcZHHnyC0jeaEzbPeYjE3MEK2I74kKWNe1DeGkIMCc/w1200-h630-p-k-nu/logo+kereta+api.png"
style="width: 200px;height: 100px" >
</td>
<td style="padding-left: 40px">
<h2 style="font-family: arial">Selamat Datang!!!</h2>
</td>
</tr>
</table>
</div>
<hr>
<div class="container">
<form class="form-horizontal" role="form" action="send.php" method="post">
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="pilihan-kereta">Nama Kereta:</label>
<div class="col-sm-3">
<select class="form-control" id="pilihan-kereta">
<option> </option>
<option>Gumarang</option>
<option>Kertajaya</option>
<option>Jayabaya</option>
<option>Anggrek Malam</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tgl-berangkat">Tanggal Berangkat:</label>
<div class="col-sm-3">
<input class="form-control" id="tgl-berangkat" type="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tgl-tiba">Tanggal Tiba:</label>
<div class="col-sm-3">
<input class="form-control" id="tgl-tiba" type="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="jam-berangkat">Jam Berangkat:</label>
<div class="col-sm-3">
<input class="form-control" id="jam-berangkat" type="time">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="jam-tiba">Jam Tiba:</label>
<div class="col-sm-3">
<input class="form-control" id="jam-tiba" type="time">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tempat-asal">Dari:</label>
<div class="col-sm-3">
<select class="form-control" id="tempat-asal">
<option> </option>
<option>Jakarta</option>
<option>Bandung</option>
<option>Surabaya</option>
<option>Semarang</option>
<option>Jogjakarta</option>
<option>Cirebon</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tempat-tujuan">Ke:</label>
<div class="col-sm-3">
<select class="form-control" id="tempat-tujuan">
<option> </option>
<option>Jakarta</option>
<option>Bandung</option>
<option>Surabaya</option>
<option>Semarang</option>
<option>Jogjakarta</option>
<option>Cirebon</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="kelas">Kelas:</label>
<div class="col-sm-3">
<select class="form-control" id="kelas">
<option> </option>
<option>Eksekutif</option>
<option>Bisnis</option>
<option>Ekonomi</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-10">
<button class="btn btn-primary" type="submit">Simpan</button>
<button class="btn btn-warning" type="submit">Batal</button>
</div>
</div>
</form>
</div>
<div align="center" style="margin-top:10px; padding-top: 30px">
<table>
<tr>
<th width="20">No</th>
<th width="170">Nama Kereta</th>
<th width="140">Jadwal Berangkat</th>
<th width="140">Jadwal Tiba</th>
<th width="180">Dari</th>
<th width="180">Ke</th>
<th width="140">Harga(Kelas)</th>
<th></th>
</tr>
<tr>
<td id="td_s">1</td>
<td id="td_s">Argo Laru</td>
<td id="td_s">2014-04-22 - 06.00</td>
<td id="td_s">2014-04-22 - 08.45</td>
<td id="td_s">Gambir, Jakarta Pusat</td>
<td id="td_s">Bandung, Bandung</td>
<td id="td_s">Binis - 90000</td>
<td id="td_s"><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button" class="btn btn-danger">Hapus</button></td>
</tr>
<tr>
<td id="td_s">2</td>
<td id="td_s">Argo Laru</td>
<td id="td_s">2014-04-23 - 13.01</td>
<td id="td_s">2014-04-23 - 15.00</td>
<td id="td_s">Gambir, Jakarta Pusat</td>
<td id="td_s">Surabaya</td>
<td id="td_s">Eksekutif - 100000</td>
<td id="td_s"><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button" class="btn btn-danger">Hapus</button></td>
</tr>
</table>
</div>
</body></html>
CSS :
#judul{
font-family: 'Arial';
font-size: 20;
padding-left: 50px;
}
#head-line:hover{
padding: 0.5px;
background-color: #0099FF;
}
#head-line{
color: white;
padding: 0.5px;
background-color: #0066FF;
}
#img{
width: 20px;
height: auto;
padding-left: 100px;
}
#tabel{
padding: 10px;
border: solid black;
}
th{
border: 1px solid black;
padding: 5px;
}
#td_s{
border: 1px solid black;
padding: 5px;
}
Hasil :
HTML :
<html lang="em"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="form.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Pemesanan Tiket Kereta Online</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav"
style="background-color: #2789D2">
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Daftar Harga Kelas KA</a></li>
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Daftar Jadwal KA</a></li>
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">..</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">
<span class="glyphicon glyphicon-log-out" style="color: rgb(255, 255, 255);background-color: #2789D2"></span> Logout</a></li>
</ul>
</div>
</div>
</nav>
<div style="padding: 10px">
<table>
<tr>
<td>
<img id="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8rPBEzO9HiUuF97Yep29JFTnQNLu6_NW3bUwqBvqKL1pkKuly1gmRRv2YpcdKNRIn7deGuqL2nvLU7duPuv_V9wutVDM6gtkcZnWcZHHnyC0jeaEzbPeYjE3MEK2I74kKWNe1DeGkIMCc/w1200-h630-p-k-nu/logo+kereta+api.png"
style="width: 200px;height: 100px" >
</td>
<td style="padding-left: 40px">
<h2 style="font-family: arial">Selamat Datang!!!</h2>
</td>
</tr>
</table>
</div>
<hr>
<div class="container">
<form class="form-horizontal" role="form" action="send.php" method="post">
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="pilihan-kereta">Nama Kereta:</label>
<div class="col-sm-3">
<select class="form-control" id="pilihan-kereta">
<option> </option>
<option>Gumarang</option>
<option>Kertajaya</option>
<option>Jayabaya</option>
<option>Anggrek Malam</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tgl-berangkat">Tanggal Berangkat:</label>
<div class="col-sm-3">
<input class="form-control" id="tgl-berangkat" type="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tgl-tiba">Tanggal Tiba:</label>
<div class="col-sm-3">
<input class="form-control" id="tgl-tiba" type="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="jam-berangkat">Jam Berangkat:</label>
<div class="col-sm-3">
<input class="form-control" id="jam-berangkat" type="time">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="jam-tiba">Jam Tiba:</label>
<div class="col-sm-3">
<input class="form-control" id="jam-tiba" type="time">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tempat-asal">Dari:</label>
<div class="col-sm-3">
<select class="form-control" id="tempat-asal">
<option> </option>
<option>Jakarta</option>
<option>Bandung</option>
<option>Surabaya</option>
<option>Semarang</option>
<option>Jogjakarta</option>
<option>Cirebon</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tempat-tujuan">Ke:</label>
<div class="col-sm-3">
<select class="form-control" id="tempat-tujuan">
<option> </option>
<option>Jakarta</option>
<option>Bandung</option>
<option>Surabaya</option>
<option>Semarang</option>
<option>Jogjakarta</option>
<option>Cirebon</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="kelas">Kelas:</label>
<div class="col-sm-3">
<select class="form-control" id="kelas">
<option> </option>
<option>Eksekutif</option>
<option>Bisnis</option>
<option>Ekonomi</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-10">
<button class="btn btn-primary" type="submit">Simpan</button>
<button class="btn btn-warning" type="submit">Batal</button>
</div>
</div>
</form>
</div>
<div align="center" style="margin-top:10px; padding-top: 30px">
<table>
<tr>
<th width="20">No</th>
<th width="170">Nama Kereta</th>
<th width="140">Jadwal Berangkat</th>
<th width="140">Jadwal Tiba</th>
<th width="180">Dari</th>
<th width="180">Ke</th>
<th width="140">Harga(Kelas)</th>
<th></th>
</tr>
<tr>
<td id="td_s">1</td>
<td id="td_s">Argo Laru</td>
<td id="td_s">2014-04-22 - 06.00</td>
<td id="td_s">2014-04-22 - 08.45</td>
<td id="td_s">Gambir, Jakarta Pusat</td>
<td id="td_s">Bandung, Bandung</td>
<td id="td_s">Binis - 90000</td>
<td id="td_s"><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button" class="btn btn-danger">Hapus</button></td>
</tr>
<tr>
<td id="td_s">2</td>
<td id="td_s">Argo Laru</td>
<td id="td_s">2014-04-23 - 13.01</td>
<td id="td_s">2014-04-23 - 15.00</td>
<td id="td_s">Gambir, Jakarta Pusat</td>
<td id="td_s">Surabaya</td>
<td id="td_s">Eksekutif - 100000</td>
<td id="td_s"><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button" class="btn btn-danger">Hapus</button></td>
</tr>
</table>
</div>
</body></html>
CSS :
#judul{
font-family: 'Arial';
font-size: 20;
padding-left: 50px;
}
#head-line:hover{
padding: 0.5px;
background-color: #0099FF;
}
#head-line{
color: white;
padding: 0.5px;
background-color: #0066FF;
}
#img{
width: 20px;
height: auto;
padding-left: 100px;
}
#tabel{
padding: 10px;
border: solid black;
}
th{
border: 1px solid black;
padding: 5px;
}
#td_s{
border: 1px solid black;
padding: 5px;
}
Hasil :
Thursday, February 23, 2017
[Nyoba HMTL] Profile Name
Source Code :
<html>
<head>
<title> Profile Name </title>
</head>
<body>
<div align="center">
<font face="arial" size="7" color="blue">
<br> BIODATA <br/>
</font>
<br>
<img src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/292953_469108803111586_897857662_n.jpg?oh=7db834b2f2cea82fec1895609673ef24&oe=59424230" border=4>
</div>
<p>
<font face="verdana" size="3" color="green">
Nama : Ana Alimatus Zaqiyah
<br>
Tempat Tanggal Lahir : Sumenep, 21 Januari 1997
<br>
Alamat : Jalan Kejawan Putih BMA 14, Surabaya
<br>
Hobi : Membaca
<br>
Facebook : <a href="https://www.facebook.com/aaliizaa">Ana Alimatus Zaqiyah</a>
</p>
<br/>
</font>
</body>
</html>
Subscribe to:
Posts (Atom)