Rabu, 17 April 2013

Tugas pemograman web

Web ini di buat dengan BOOTSRAP...

MENU UTAMA :

klik gambar untuk zoom
LEARN MORE SEJARAH WWW:

klik gambar untuk zoom
LOGIN :


klik gambar untuk zoom




SOURCE CODE  :

MENU UTAMA :

 <html>
<head>
<title>pweb</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<div class='post-body entry-content'>
</head>
<body>
<br/><br/><br/><br/>
<div class="navbar navbar invention navbar-fixed-top">
    <div class="navbar-inner navbar-inner navbar-inner" class="top">
          <div class="container">
        <ul class="nav" align="center">
              <li class="active"></li>
              <li><a href="tugas.html">HOME</a></li>
              <li><a href="#about">PROFIL</a></li>
              <li><a href="#contact">GALERY</a></li>
              <li><a href="login.html">LOGIN</a></li>
              </li>
               <ul class="nav pull-right">
                 <li>
                        <form class="form-search ">
                            <input type="text" class="input-medium search-query">
                            <button type="submit" class="btn">Search</button>
                        </form>
                 </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</div>

<div class="container-fluid">
      <div class="row-fluid">
        <div class="span2">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Sidebar</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="nav-header">Sidebar</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div>
        <div class="span8">
          <div class="hero-unit">
            <h3>SEJARAH WORLD WIDE WEB ( WWW )</h3>
            <p>Pada tahun 1980, Tim Bernes-Lee , kontraktor independen di Organisasi Eropa untuk
            Riset Nuklir (CERN), Swiss , dibangun Enquire , sebagai database pribadi orang dan model</p>
            <p><a href="sejarah website.html" class="btn btn-primary btn-large">Learn more »</a></p>
          </div>
          <div class="row-fluid">
            <div class="span4">
              <h4>Sejarah internet</h4>
              <p>Sejarah intenet dimulai pada 1969 ketika Departemen Pertahanan Amerika, U.S.
                 Defense Advanced Research Projects Agency(DARPA) memutuskan untukmengadakan </p>
              <p><a class="btn" href="sejarah internet.html">View details »</a></p>
            </div>
            <div class="span4">
              <h4>Pengertian dan sejarah HTML</h4>
              <p>HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan
                 pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami</p>
              <p><a class="btn" href="#">View details »</a></p>
            </div>
            <div class="span4">
              <h4>Sejarah CSS</h4>
              <p>Pada tanggal 17 Agustus 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai
                 bahasa pemrograman standart dalam pembuatan dokumen web. Tujuannya adalah mengurangi </p>
              <p><a class="btn" href="#">View details »</a></p>
            </div>
        </div>
       
<br/>
<div class="item" id="gambar">
    <div class="container">
        <img src="cats.jpg"/>
    </div>
</div>

<footer class="modal-footer">
            <p>&copy; Fahmi sutarno</p>
</footer>
   
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>


LEARN MORE SEJARAH WWW :

<html>
<head>
<title>pweb</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<div class='post-body entry-content'>
</head>
<body>
<br/><br/><br/><br/>
<div class="navbar navbar invention navbar-fixed-top">
    <div class="navbar-inner navbar-inner navbar-inner" class="top">
          <div class="container">
        <ul class="nav" align="center">
              <li class="active"></li>
              <li><a href="tugas.html">HOME</a></li>
              <li><a href="#about">PROFIL</a></li>
              <li><a href="#contact">GALERY</a></li>
              <li><a href="login.html">LOGIN</a></li>
               <ul class="nav pull-right">
                 <li>
                        <form class="form-search ">
                            <input type="text" class="input-medium search-query">
                            <button type="submit" class="btn">Search</button>
                        </form>
                 </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</div>

<div class="container-fluid">
      <div class="row-fluid">
        <div class="span2">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Sidebar</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="nav-header">Sidebar</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div>
       
        <div class="span8" align="justify">
        <div class="hero-unit">
            <h3 align="center">SEJARAH WORLD WIDE WEB ( WWW )</h3>
            <p>Pada tahun 1980, Tim Bernes-Lee , kontraktor independen di Organisasi Eropa untuk Riset Nuklir (CERN), Swiss,
               dibangun Enquire , sebagai database pribadi orang dan model perangkat lunak, tetapi juga sebagai cara untuk bermain dengan hypertext
 ; setiap halaman baru informasi dalam Enquire harus terhubung dengan halaman yang ada.

Pada tahun 1984 Berners-Lee kembali ke CERN, dan dianggap permasalahannya presentasi informasi: fisikawan dari seluruh dunia diperlukan untuk berbagi data, dan tanpa mesin umum dan tidak ada perangkat lunak presentasi umum. Dia menulis sebuah proposal Maret 1989 untuk "database hypertext besar dengan link diketik", tapi itu dihasilkan bunga kecil. Bosnya, Mike Sendall, mendorong Berners-Lee untuk mulai menerapkan sistemnya pada suatu yang baru diperoleh NeXT workstation. Ia menilai beberapa nama, termasuk Mesh Informasi, Tambang Informasi (ditolak karena abbreviates ke TIM, pencipta nama WWW) atau Tambang Informasi (ditolak karena abbreviates untuk MOI yang "Me" dalam bahasa Perancis), tetapi menetap di World Wide Web.
</p>
          </div>
          <br/>
          <br/>
          <ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img src="penguins.jpg" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Java Script</h4>
    <p>Pengertian dan Kegunaan JavaScript untuk … Berbagi adalah suatu perbuatan yang di senangi oleh Tuhan,
       dan bisa dikatakan Ibadah. Berbagi juga sangat sekali disenangi oleh Mbah Google.
       Dari itu Blog Joisetrick akan Berbagi tentang Pengertian dan Kegunaan JavaScript.</p>
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img src="penguins.jpg" data-src="holder.js/64x64">
</a>
<div class="media">
<h4 class="media-heading">Pemograman WEB</h4>
    <p>Pemrograman web diambil dari 2 suku kata yaitu pemrograman dan web. Pemrograman yang dalam bahasa
     English adalah programming dan diartikan proses, cara, perbuatan program (secara bahasa indonesia). </p>
</div>
</div>
</li>
</ul>




<br/>
<div class="item" id="gambar">
    <div class="container">
        <img src="cats.jpg"/>
    </div>
</div>

<footer class="modal-footer">
            <p>&copy; Fahmi sutarno</p>
</footer>
   
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>



LOGIN  :


<!DOCTYPE html>
<html>
<head>
<title>login</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
</head>
<body>

    <div class="container">

      <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input class="input-block-level" placeholder="Email address" type="text">
        <input class="input-block-level" placeholder="Password" type="password">
        <label class="checkbox">
          <input value="remember-me" type="checkbox"> Remember me
        </label>
        <button class="btn btn-large btn-primary" type="submit">Sign in</button>
      </form>

    </div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>



Mohon saran dan komentar........

Tidak ada komentar:

Posting Komentar