Coding HTML Bootstrap

<!DOCTYPE html>

<html>

<head>

<title>Tugas 2 PWEB</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

<link href="asset/css/sukripsi.css" rel="stylesheet">





</head>

<body>

<div class="row">

<header id="header">

<div class="container">

<div class="row">

<div class="span4">

<div class="logo">

<a href="index.html"><h1><span class="logo-prefix">NTB</span> <span class="logo-sufix">Sumbawa</span></h1></a>

<div class="logo-desc">Mari Belajar Bersama :)</div>

</div>

</div>

<div class="span4">

<div class="banner pull-right">

<img src="http://placehold.it/290x60"/>

</div>

</div>

<div class="span4">

<span class="call-info pull-right">For information call : <strong>Aji:081915880613</strong></span>

<div class="search-form pull-right">

<form>

<div class="input-append">

<input type="text" id="appendedInputButtons" placeholder="Type keyword ..." class="span2">

<button type="button" class="btn btn-primary">Search</button>

</div>

</form>

</div>

</div>

</div>

</div>

</header>

</div>

<div class="row">


<div class="navbar">

<div class="navbar-inner">

<div class="container" style="width: auto;">

<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">Menu</a>

<a href="index.html" class="brand"><i class="icon-home icon-white"></i></a>

<div class="nav-collapse collapse">

<ul class="nav">

<li class="active"><a href="index.html">Home</a></li>

<li><a href="blog.html">Umum</a></li>

<li><a href="blog.html">Kuliah</a></li>

<li><a href="blog.html">Praktikum</a></li>

<li class="dropdown">

<a href="#" data-toggle="dropdown" class="dropdown-toggle">Lainnya <b class="caret"></b></a>

<ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">

<li>

<a href="galleries.html">Galleries</a>

<a href="contact.html">Contact Us</a>

<a href="signup.html">Sign Up</a>

</li>

</ul>

</li>

</ul> 

</div> 

</div>

</div>

</div>

</div>

</div>

<div class="row">


<div class="row">

<div class="span8">

<div id="myCarousel" class="carousel slide">

<div class="carousel-inner">

<div class="item active">

<img alt="" src="asset/img/1.JPG" />

<div class="carousel-caption">

<h4>Pra Muskom IMM FTI</h4>

<p>Bertempat di Masjid Gedhe Kauman(Masjid Raya Daerah Istimewa Yogyakarta),

yang di bangun pada Minggu, 29 Mei 1773 dan selesai pada tahun 1931.</p>

</div>

</div>

<div class="item">



<h4>Sewaktu Ospek :D</h4>

<p>Ketika ospek hari terakhir, kelompok kami yang dinamakan mainboot mewakili

Fakultas Teknik Industri untuk tampil membawakan sebuah Pensi dengan

tema pusi estafet, dan pembawa acara di depan itu adalah AIK :D

</p>

</div>

</div>

<div class="item">

<img alt="" src="asset/img/3.jpg" />


<h4>LULUS</h4>

<p>Mengenang kembali ketika kita semua telah menyelseikan wajib belajar 12 tahun

di saat itu hampir semua orang yang berhasil/lulus merayakan kelulusannya

dengan mencoret, mendatangani, dan mempilok baju putih abu-abu mereka.</p>

</div>

</div>

<div class="item">



<h4>Jalan-Jalan Men</h4>

<p>Air Terjun JOBEN, LOMBOK TIMUR </p>

</div>

</div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>

<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

</div>

</div>

<div class="span4">

<div class="box green-gradient-box tab-widget">

<ul class="nav nav-tabs">

<li class="active"><a data-toggle="tab" href="#1"><i class="icon-ok"></i> Terbaru</a></li>

<li class=""><a data-toggle="tab" href="#2"><i class="icon-star"></i> Terpopuler</a></li>

<li class=""><a data-toggle="tab" href="#3"><i class="icon-comment"></i> Komentar</a></li>

</ul>

<div class="tab-content">

<div id="1" class="tab-pane active">

<ul class="newest">

<li>

<a href="detail.html">Neymar akan ke Eropa, jika hanya bersama Barcelona</a>

<span class="post-attr"> - kurang dari 1 menit lalu</span>

</li>

<li>

<a href="detail.html">Barca kembali mencetak Rekor dan Sejarah baru</a>


</li>

<li>

<a href="detail.html">Mario Gotze, tolak masuk Arsenal</a>

<span class="post-attr"> - 5 menit lalu</span>

</li>

<li>

<a href="">Peristiwa Mencekam, Cebongan</a>


</li>

<li>

<a href="detail.html">Panggung "Jakarta Night Festival" Dipasang, Thamrin Padat</a>


</li>

<li>

<a href="">UN (Ujian Nasional) di undur hingga 3 hari, di bagian Timur Indonesia</a>


</li>

<li>

<a href="">Cara Membuat Blog lebih menarik</a>


</li>

<li>

<a href="">Teknik Informatika UAD, memenangi lomba pembuatan software terbaik seJogja</a>


</li>

</ul>

</div>

<div id="2" class="tab-pane">

<ul class="popular">

<li>

<a href="detail.html">Neymar akan ke Eropa, jika hanya bersama Barcelona</a>

<span class="post-attr"> - dibaca 2349 kali</span>

</li>

<li>

<a href="detail.html">Barca kembali mencetak Rekor dan Sejarah baru</a>


</li>

<li>

<a href="detail.html">Mario Gotze, tolak masuk Arsenal</a>

<span class="post-attr"> - dibaca 249 kali </span>

</li>

<li>

<a href="detail.html">Peristiwa Mencekam, Cebongan</a>


</li>

<li>



</li>

</ul>

</div>

<div id="3" class="tab-pane">

<ul class="commented">

<li>

<a href="detail.html">Jokowi Cek Bendung Katulampa</a>

<span class="post-attr"> - 4564 komentar</span>

</li>

<li>



</li>

<li>



</li>

<li>



</li>

<li>



</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="row">


<div class="well welcome-message centered">

<h4>Everything is gonna be alright :) ok <a href="#" class="btn btn-primary">Learn More <i class="icon icon-caret-right"></i></a></h4>

</div>

</div>

</div>

<article class="row">


<div class="row">

<div class="span4">

<div class="box">

<h3 class="box-title"><span>Umum</span></h3>

<img src="asset/img/5.jpg" class="img-rounded"/>

<h3><a href="detail.html">Apakah persepakbolaan Indonesia akan maju ?</a></h3>

<p>

Apakah Sepak bola di Negri ini akan maju ? Semua itu tergantung dari kinerja PSSI dan dukungan Masyarakat Indonesia.

<br/><br/>

<a href="detail.html" class="btn btn-primary">read more</a>

</p>

<ul class="other-posts">

<li>



</li>

<li>



</li>

<li>

<a href="detail.html">Sambut Tahun Baru, Pemuda Bikin Tenda Musik</a>


</li>

<li>



</li>

<li>



</li>

</ul>

</div>

</div>

<div class="span4">

<div class="box">

<h3 class="box-title"><span>Kuliah</span></h3>


<h3><a href="detail.html">Info Bea-Mahasiswa Tahun 2013</a></h3>

<p>

Info Bea-Mahasiswa 2013 bagi Mahasiswa Reguler UAD asal dari DIY semester 3 dan 5 yang kurang mampu. Dinas Pendidikan Pemuda dan Olahraga DIY akan memberikan Bantuan Biaya Pendidikan bagi

<br/><br/>


</p>


<li>

<a href="detail.html">Pendaftaran Beasiswa UAD 2013</a>


</li>

<li>

<a href="detail.html">Pendaftaran UKM </a>


</li>

<li>

<a href="detail.html">Forum.tif.uad.ac.id</a>


</li>

<li>

<a href="detail.html">Teknik Informatika UAD TerAkreditasi B</a>


</li>

<li>

<a href="detail.html">Pes 2013 Competition</a>


</li>

</ul>

</div>

</div>

<div class="span4">

<div class="box">

<h3 class="box-title"><span>Praktikum</span></h3>


<h3><a href="detail.html">Info Praktikum </a></h3>

<p>

tif.uad.ac.id

<br/><br/>


</p>


<li>

<a href="detail.html">Praktikum Kalkulus</a>


</li>

<li>

<a href="detail.html">Praktikum Pemrograman Web</a>


</li>

<li>

<a href="detail.html">Praktikum Algoritma dan Pemrograman</a>


</li>

<li>

<a href="detail.html">Praktikum Matematika Diskrit</a>


</li>

<li>

<a href="detail.html">Praktikum Logika Informatika</a>


</li>

</ul>

</div>

</div>

</div>

</div>

</article>

<div class="row">


<div class="well welcome-message centered">

<h4> <a href="#" class="btn btn-primary">Learn More <i class="icon icon-caret-right"></i></a></h4>

</div>

</div>

</div>

<footer>


<div class="row">




<div id="MESSAGE" class="row">


</div>


<div class="row">

<div class="span6">

<form>

<label>Type Your Message Here</label><br>

<label>Name</label>

<input class="span6" type="text" placeholder="Your Name">

<label>Email Address</label>

<input class="span6" type="text" placeholder="[email protected]">

<label>Your Message</label>

<textarea class="input-xlarge span6" id="textarea" rows="6" placeholder="Type your message here."></textarea>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

<div class="span6">

<iframe width="500" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&[email protected],-0.128005&ie=UTF8&z=12&t=m&iwloc=near&output=embed"></iframe>

</div>

</div>

</div>

</div>

<hr>



<div class="row">

<div class="span3">

<h4>About Us</h4>

<p>Lorem ipsum dolor sit amet consectetuer lobortis nulla purus dolor interdum. In a Nam Nulla tincidunt dui mauris Integer nibh felis dui.

Amet id Cras id mattis ligula semper dolor cursus ac Maecenas.

Sed et In nibh eros sit ipsum odio id ante cursus.</p>

</div> 

<hr class="visible-phone">

<div class="span3">

<h4>Flickr Photos</h4>

<ul class="flickr">

<li><a href="#"><img src="http://farm9.staticflickr.com/8084/8326686890_75a5464821_s.jpg"/></a></li>

<li><a href="#"><img src="http://farm9.staticflickr.com/8501/8314291539_d43363b065_s.jpg"/></a></li>

<li><a href="#"><img src="http://farm9.staticflickr.com/8501/8306883629_6b9537965c_s.jpg"/></a></li>

<li><a href="#"><img src="http://farm9.staticflickr.com/8496/8289327500_f43c87c215_s.jpg"/></a></li>

</ul>

</div>

<div class="span3">

<h4>Kelompok Studi</h4>

<ul class="tag-cloud">

<li><a href="#">Kelompok Studi Web</a></li>

<li><a href="#">Kelompok Studi Linux</a></li>

<li><a href="#">Kelompok Studi Multimedia</a></li>

</ul>

</div>

<div class="span3">

<h4>Subscribe to our Newsletter</h4>

<form class="footer-form">

<fieldset>

<label>Get our email weekly newsletter</label>

<input type="text" placeholder="Enter your email">

<span class="help-block">No spam, we promise!</span>

<button class="btn btn-primary" type="submit">Subscribe</button>

</fieldset>

</form>

</div> 

</div> 

</div>

<div class="bottom-line">


<div class="row">

<p class="pull-left">© 2012 Designed by <a target="_blank" href="http://twitter.com/Ajii_Hehe">@hahahedo23</a></p>

<p class="pull-right"><a href="#">Back to top</a></p>

</div>

</div>

</div>

</footer>

<script src="asset/js/jquery-1.7.2.min.js"></script>

<script src="bootstrap/js/bootstrap.js"></script>

<script src="asset/js/main.js"></script>

</body>

</html>

Coding HTML Bootstrap

Documents

Transcript of Coding HTML Bootstrap