Cara Membuat Web

Nama Kelompok :

    Semuel Manimabi ( 58413365 )
    Nabil Iswar Siregar ( 56413254 )
    Raditya Muhammad R ( 57413111 )

Disini saya akan menjelaskan tentang bagaimana cara membuat Web sederhan dengan menggunakan np++, dan bootsttrap. karena menurut saya labih mudah dan gampang membuat web menggunakan np++. nah sekarang kita kan masuk ke tahap pembuatan web nya :

Langkah pertama masukkan kodingan di bawah ini :

<!DOCTYPE html>
<html>
<head>
<title> DAZCOMES FC </title>
   <meta name="viewport" content= "width=device-width,initial-scale=1.0">
   
   <link href="css/bootstrap.css" rel="stylesheet" media="screen">
   <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
   <link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
   <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
   <link href="css/docs.css" rel="stylesheet">
   <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
   
    
</head>

saya akan menjelasakan sedikit bagaimana cara kerja dan fungsi kodingan ini, berfungsi untuk memanggil bootstrap nya, atau dengan kata lain cssny.

jika sudah lanjut kan tahap kedua nya masukkan kodingan di bawah ini :

<div class="navbar navbar-fixed-top">
   <div class="container-fluid">
    <div class="row-fluid">
     <div class="span12">
      <div class="span1"></div>
      <div class="span6">
       <div class="btn-group" data-toggle="buttons-checkbox">
        <a href= "index.html"><button class="btn btn-default btn-inverse" type="button">HOME</button></a>
        <a href= "PROFILE.HTML"><button class="btn btn-default btn-inverse" type="button">PROFILE</button></a>
        <a href="TENTANG DFC.HTML"><button class="btn btn-default btn-inverse" type="button">TENTANG DAZCOMES</button></a>
        <a href="PEMAIN.HTML"><button class= "btn btn-default btn-inverse" type="button">SQUAD</button></a>
        <a href="GALERY.HTML"><button class= "btn btn-default btn-inverse" type="button">GALERY</button></a>
        <a href="CONTACK.HTML"><button class= "btn btn-default btn-inverse" type="button">CONTACK</button></a>
       </div>
      </div>
     </div>
    </div>
     <div class="span7"> <h3>DAZCOMES FOOTBALL CLUB</h3></div>
   </div>
</div>

kodingan di atas ini berfungsi untuk membuat navbar dan button atau pilihan menu pada website kita.

jika sudah lanjutkan tahap berikut nya :

<br><br><br>
<div class="container-fluid">
<div class ="row">
   <div class="span3">
<br>
   </div>
<div class="container-fluid">
   <div class ="row">
   

    <div class="span11 offset1">
     <div id="myCarousel" class ="carousel slide">
      <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">
      <div class="item active">
       <img src="zzz.jpg" alt="">
        <div class="carousel-caption">
         <div class="span1">
          <img src="x.jpg"class="img-circle" alt="">
         </div>
         <div class="span7">
         <h1>Dazcomes   FC</h1>
         </div>
        </div>
      </div>
      <div class="item">
       <img src="qqq.jpg" alt="">
       <div class="carousel-caption">
        <div class="span1">
          <img src="x.jpg"class="img-circle" alt="">
         </div>
         <div class="span7">
          <h1>Dazcomes   FC</h1>
         </div>
       </div>
      </div>
      <div class="item">
       <img src="www.jpg" alt="">
       <div class="carousel-caption">
         <div class="span1">
          <img src="x.jpg"class="img-circle" alt="">
         </div>
         <div class="span7">
          <h1>Dazcomes   FC</h1>
         </div>
       </div>
      </div>
     </div>
       <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
     </div>
    </div>
    </div>
</div>
</div>
</div>

nah kalau kodingan yang ini berfungsi untuk memberikan atau memasukan gambar kedalam web site kita, sekaligus membat slide pada gambar tersebut, dengan menggunakan mycarousel. catatan : gambar yang ingin kita masukkan harus disipan didalam satu folder bersama dengan folder web site yang ingin kita buat.

selanjut nya masukkan kodingan berikut :

<BR><br><br>

<div class="span3"></div>

<div class ="span7">

<p>

Selamat datang di web dazcomes fc bagi pecinta futsal khususnya para penggemar dazcomes fc. Maksud dan tujuan website ini adalah untuk mempererat tali persaudaraan sesama pendukung dazcomes fc dalam berinteraksi, berbagi info dan berdiskusi mengenai berbagai hal menyangkut klub kebanggaan kita bersama. Forum yang ada juga kami upayakan agar bisa menjadi sarana one stop shopping bagi para pendukung untuk mengakses berbagai macam hal mengenai dazcomes fc, kami menyadari masih banyak kekurangan dan berbagai perbaikan yang mungkin masih perlu dilakukan demi penyempurnaan website kita bersama ini, saran dan kritikan akan kami terima untuk kebaikan website ini.

Semoga website ini bermanfaat bagi kita sesama para penggemar Barcelona dan kecintaan kita terhadap sepakbola. Sekian dan terima kasih.

</p>

    <p>

    Pada etape ini dazcomes kembali menjadi penentu dalam futsal club. Pada tanggal 24 Mei 2014 berhasil mengangkat Piala pertama nya dan pada tanggal 20 Desember, untuk pila kedua nya. Selain itu, bersama iqomathul tim ini berhasil merebut dua pila . Sebelum bergabungnya pelatih asal depok, tim ini hanya mampu masuk ke perempat final pada tahun 2012-2013.



    Pada bulan Juni 2013, iqimathul mulai bergabung dengan dazcomes. Dan telah maraih dua titel dan bergai sambutan meriah akan kehadirannya.

    </p><BR><br><br>

</div>

</div>

penjelasan nya kodingan ini diggunakan untuk memasukkan isi tau konten dari website kita.

dan yang terkair masukkan kodingan berikut ini :



<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<script src="js/google-code-prettify/prettify.js"></script>

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

    <script>

      !function ($) {

        $(function(){

          // carousel demo

          $('#myCarousel').carousel()

        })

      }(window.jQuery)

    </script>

</body>

</html>

kodingan ini adalah script sebagai pentup yag juga berfungsi untuk memanggil script yang ada pada bootstrap nya, jika kita tidak memasukkan ini maka sebagian dari kodingan yang kita masukkan tidak akan terbaca.

catatan : jika kita membuka jangan lupa untuk di tutup contoh <div> maka harus ditutup lagi dengan </div>. dan semua foto yang inggin kita masukkan ke website harus disampan kedalam satu folder dengan dolder website nya dan folder bosttrap, agar lebih mempermudah untuk memmangil nya.

demikian sedikit penjelasan saya tentang bagaimana cara membuat website semoga dapat membantu terimah kasih.

Alamat Web : http://www.dazcomes.hol.es/

Siregar's Blog

Cari Blog Ini

Cara Membuat Web

Komentar

Posting Komentar