1. syntax web
Hasil output dari program diatasa :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Collapsing
Navbar </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</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="#">Politeknik Aceh</a>
</div>
<div class="collapse
navbar-collapse" id="myNavbar">
<ul class="nav
navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tentang Kami <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Visi dan
Misi.html">Visi dan Misi</a></li>
<li><a href="Tentang Politeknik aceh.html ">Tentang Politeknik aceh</a></li>
<li><a href="Organisasi
Politeknik Aceh.html">Organisasi Politeknik
Aceh</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Program Studi <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Teknik Informatika</a></li>
<li><a href="#">Akuntansi</a></li>
<li><a href="#">Elektronika</a></li>
<li><a href="#">Mekantronika</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Kemahasiswaan <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">TBEM</a></li>
<li><a href="#">HMJ</a></li>
<li><a href="#">UKM</a></li>
<li><a href="#">Ekskul</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a href="#"><span class="glyphicon
glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon
glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<button type="button" class="btn btn-default">Programing</button>
<button type="button" class="btn btn-primary">Multimedia</button>
<button type="button" class="btn btn-success">Networking</button>
<button type="button" class="btn btn-info">Desain Graphic</button>
<button type="button" class="btn btn-warning">Robotic</button>
<button type="button" class="btn btn-danger">Enginering</button>
</div>
<div class="container">
</div>
</div>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<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="image5.jpg" alt="Networking Engeenering" width="460" height="345">
<div class="carousel-caption">
<h3>Networking Engeenering</h3>
<p>The atmosphere in Chania has a touch of
Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="image6.jpg" alt="Web Desain" width="460" height="345">
<div class="carousel-caption">
<h3>Web Desain</h3>
<p>The atmosphere in Chania has a touch of
Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="image7.jpg" alt="Desain Graphic" width="460" height="345">
<div class="carousel-caption">
<h3>Desain Graphic</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="image8.jpg" alt="Cisco Engeenering" width="460" height="345">
<div class="carousel-caption">
<h3>Cisco Engeenering</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</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><div
class="container"></br>
<ul class="nav
nav-tabs">
<li class="active"><a href="#">Hal 1</a></li>
<li><a href="#">Hal 2</a></li>
<li><a href="#">Hal 3</a></li>
<li><a href="#">Hal 4</a></li>
<li><a href="#">Hal 5</a></li>
</ul>
</div>
</body>
</html>
Hasil output dari program diatasa :
hasil webnya ada di link download ada dibawah ini :
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon