Membuat Halaman web dinamis menggunakan HTML CSS dan JavaScript

    November 17, 2018   No comments

Pada pembahasan kali ini kita akan membahas mengenai cara membuat sebuah halaman web dinamis menggunakan HTML CSS dan JavaScript. Sebelumnya kita telah membahas mengenai Cara Membuat Template Form Login Menggunakan HTML dan CSS. Silahkan dibaca terlebih dahulu agar lebih paham mengenai sebuah website yang baik dan terstruktur.



Sebelum kita membahas mengenai pembahasan kali ini, terlebih dahulu kita siapkan bahan-bahan yang diperlukan yaitu :

  • Notepad++ atau sublime atau Atom
  • File Jquery
  • Niat yang baik
Selanjutnya silahkan buka notepad++ ataupun sublime atau Atom kalian kemudian buatlah sebuah file dengan nama index.hml kemudian buatlah script dibawah ini didalam file tersebut.

index.html



<html> <head> <title>Badan Narkotika Nasional</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> </head> <body> <nav id="navbar"> <img src="img/header.png"> <h1>Portal Coding</h1> <p>Learn All Coding to Expert.</p> <ul class="btn-navbar">         <li><a class="active2" href="index2.php">Beranda</a></li>         <li><a href="#">Artikel</a></li>         <li><a href="#">Tentang</a></li> <li><a href="#">Kontak</a></li>     </ul> <form method="post" action=""> <input type="image" class="btn btn-cari" src="img/search.png"> <input type="text" class="form-search" placeholder="Cari disini"> </form> </nav> <header id="header"> <div id="slider"> <div class="slide"> <img src="img/header2.jpg" class="carousel"> </div> <div class="slide"> <img src="img/header1.jpg" class="carousel"> </div> </div> </header> <aside id="sitebar"> <div class="sitebar1"> <div id="sitebar2"> <div class="header-menuarea"> <img src="img/rss.jpg" class="icon-sitebar"> <h3>Berita populer</h3> </div> <ul class="list-menuarea"> <li><a href="#">Cara mengatasi Gradle Refresh Failed di Android Studio</a></li> <li><a href="#">Membuat Template Form Login menggunakan HTML dan CSS</a></li> <li><a href="#">Membuat CRUD Menggunakan PHP dan MySQL</a></li> <li><a href="#">Sosialisasi Narkotika di SMK Negeri 1 Lahat</a></li> <li><a href="#">Sosialisasi Narkotika di SMK Negeri 1 Lahat</a></li> </ul> </div> </div> <div class="sitebar1"> <div id="sitebar2"> <div class="header-menuarea"> <img src="img/rss.jpg" class="icon-sitebar"> <h3>Recent Post</h3> </div> <ul class="list-menuarea"> <li><a href="#">Sosialisasi Narkotika di SMK Negeri 1 Lahat</a></li> <li><a href="#">Sosialisasi Narkotika di SMK Negeri 1 Lahat</a></li> <li><a href="#">Sosialisasi Narkotika di SMK Negeri 1 Lahat</a></li> <li><a href="#">Sosialisasi Narkotika di SMK Negeri 1 Lahat</a></li> <li><a href="#">Sosialisasi Narkotika di SMK Negeri 1 Lahat</a></li> </ul> </div> </div> </aside> <section id="content"> <div class="list-content"> <h3 class="label">sosialisasi | blog</h3> <video class="img-list-content" autoplay> <source src="img/portalcoding.mp4" type="video/mp4">   </video> <h2>Cara mengatasi Gradle Refresh Failed di Android Studio</h2> <p>Pada pembahasan kali ini kita akan membahas menganai cara mengatasi Gradle.....</p> <a href="artikel.php" class="btn-selengkapnya">Selengkapnya</a> </div> </section> <section id="content"> <div class="list-content"> <h3 class="label">sosialisasi | blog</h3> <img src="img/portalcoding.png" class="img-list-content"> <h2>Membuat CRUD Menggunakan PHP dan MySQL</h2> <p>Pada pembahasan kali ini kita akan membahas menganai cara membuat CRUD mengguna.....</p> <a href="artikel.php" class="btn-selengkapnya">Selengkapnya</a> </div> </section> <section id="content"> <div class="list-content"> <h3 class="label">sosialisasi | blog</h3> <img src="img/portalcoding.png" class="img-list-content"> <h2>Membuat Template Form Login menggunakan HTML dan CSS</h2> <p>Pada pembahasan kali ini kita akan membahas menganai cara membuat template form.....</p> <a href="artikel.php" class="btn-selengkapnya">Selengkapnya</a> </div> </section> <footer id="navfooter"> <div class="parallelogram"> </div> </footer> <footer id="footer"> <p class="copyright">Copyright &copy 2018. Allright Reserved</p> <ul class="footer-icon"> <li><a href="#"><img src="img/fb.png" class="fa-icon"></a></li> <li><a href="#"><img src="img/gp.png" class="fa-icon"></a></li> <li><a href="#"><img src="img/ig.png" class="fa-icon"></a></li> <li><a href="#"><img src="img/in.png" class="fa-icon"></a></li> </ul> </footer> </body> </html>

Setelah itu silahkan buat sebuah file css dengan nama style.css untuk mempercantik website kita tersebut dan simpan kedalam sebuah folder css dan masukkan script berikut ini didalam file tersebut.


Style.css



body { background-color: #f0f1f5; } nav,header,footer,section { margin-left: 25px; } nav { height: 70px; width: 1300px; background-color: #374a94; } nav img { height: 60px; width: 70px; margin: 5px; margin-left: 10px; margin-right: 10px; float: left; } nav h1 { padding-top: 10px; margin-top: -5px; margin-bottom: -10px; font-family: arial; color: #ffffff; } nav p {  font-family: arial; color: #ffffff; } nav ul { margin-top: -50px; list-style-type: none; float: right; margin-right: 300px; } nav ul:after {  content: "";   clear:both;  } nav ul li { float: left ; margin-left: 20px; } nav ul li a { border-radius: 10px; text-decoration: none; padding: 10px; color: #ffffff; font-family: arial; } nav ul li a:hover { background-color: #ffffff; color: #0e0e0e; transition: 0.5s; } .active2 { background: #ffffff; color :#0e0e0e; } .btn { padding: 10px; border-radius: 10px; } .btn-cari { height: 17px; width: 20px; float: right; margin-top: -62px; background: #495b94; margin-right: 10px; } .btn-cari:hover { background: #ffffff; transition: 0.5s; } .form-search { border-radius: 10px; float: right; height: 37px; width: 150px; padding-left: 20px; margin-top: -63px; margin-right: 60px; border: 0px; } header { height: auto; width: 1300px; padding-top: 0px; background-color: #d2d2d2;  /* #d2d2d2 */ } #slider{ width:100%; height:400px; position:relative; overflow:hidden; } #slider img{ width:1300px; height:500px; margin-top: -45px; } #slide h1 { } .slide{ position:absolute; } section { background-color: #ffffff; height: 250px; width: 750px; margin-top: 10px; margin-bottom: 10px; font-family: arial; } section .label { font-size: 15px; padding: 10px; padding-left: 20px; margin-bottom: -20px; text-transform: uppercase; } section h2 { padding: 20px; margin-top: -10px; } .img-list-content { height: 200px; width: 300px; float: left; padding: 20px; } section#content p { margin-top: -40px; padding: 20px; } .btn-selengkapnya { padding: 10px; background: #495b94; text-decoration: none; color: #ffffff; border-radius: 10px; } .btn-selengkapnya:hover { background: rgb(230, 58, 3); transition: 0.5s; } aside { clear: both; height: auto; width: 450px; margin-top: 10px float: right; margin-right: 10px; margin-bottom: 10px; display: block; } aside .header-menuarea { margin-left: 0px; height: 50px; width: 100%; background-color: #495b94; } aside .header-menuarea h3 { margin: 10px; padding-top: 13px; color: #ffffff; font-family: arial; }  aside .icon-sitebar { height: 25px; width: 25px; float: left; padding: 10px; } aside .header-menuarea:hover { background-color: #374a94; transition: 0.5s; } aside .list-menuarea { animation-name: bounce; list-style-type: square; padding: 20px; margin-top: -10px; margin-left: 20px; font-family: arial; font-size: 20px; } .list-menuarea li { padding-bottom: 10px; padding-top: 10px; border-bottom: 2px solid #000; animation-play-state: paused; } .list-menuarea li a { text-decoration: none; color: #000; } .list-menuarea li a:hover { color: #595b94; transition: 0.5s; } .list-menuarea li:hover { padding: 10px; transition: 0.5s; background: #f0f1f5; } .sitebar1 { height: auto; width: auto; padding-top: 5px; padding-bottom: 5px; margin-bottom: 10px; background: #d2d2d2;  } #sitebar2 { margin: 10px; margin-bottom: 20px; height: auto; width: 430px; background-color: #BDC3C7; } #navfooter { height: 400px; width: 1300px; background-color: #495b94; clear: both; padding-bottom: 20px; } footer { margin-top: -10px; height: 70px; width: 1300px; background-color: #374a94; } footer p { color: #ffffff; font-family: arial; padding-top: 10px; margin-right: 20px; float: right } footer .footer-icon { list-style-type: none; float: left; margin-right: 10px; margin-top: 10px; } footer .footer-icon li { float: left; padding: 10px; padding-left: 5px; } footer .footer-icon li .fa-icon { height: 30px; width: 30px; } .fa-icon:hover { background: #000; border-radius: 50%; } .parallelogram {    margin-left: 350px;    opacity:0.8;    filter:alpha(opacity=20);    margin-top: 10px;    height: 100%;    padding-bottom: 10px;    width: 550px;     background: #07CAF3;    transform: skew(-10deg); }







Untuk menjalankan slider di bagian heading, kita membutuhkan sebuah file jquery, silahakan download sebuah file jquery di internet kemudian simpan kedalam sebuah folder js.

Langkah selanjutnya adalah dengan menambahkan kode javascript kedalam file index.html tersebut agar silder dapat berjalan otomatis berikut ini kodingnya. Silahkan masukkan coding berikut ini kedalam file index.html dibawah tag </html>.


<script type="text/javascript">
 $(document).ready(function(){
 // Set Options
 var speed = 500;   // Fade speed
 var autoswitch = true;  // Auto slider options
 var autoswitch_speed = 4000 // Auto slider speed
 
 // Add initial active class
 $('.slide').first().addClass('active');
 
 // Hide all slides
 $('.slide').hide();
 
 // Show first slide
 $('.active').show();
 
 // Next Handler
 $('#next').on('click', nextSlide);
 
 // Prev Handler
 $('#prev').on('click', prevSlide);
 
 // Auto Slider Handler
 if(autoswitch == true){
  setInterval(nextSlide,autoswitch_speed);
 }
 
 // Switch to next slide
 function nextSlide(){
  $('.active').removeClass('active').addClass('oldActive');
  if($('.oldActive').is(':last-child')){
   $('.slide').first().addClass('active');
  } else {
   $('.oldActive').next().addClass('active');
  }
  $('.oldActive').removeClass('oldActive');
  $('.slide').fadeOut(speed);
  $('.active').fadeIn(speed);
 }
 
 // Switch to prev slide
 function prevSlide(){
  $('.active').removeClass('active').addClass('oldActive');
  if($('.oldActive').is(':first-child')){
   $('.slide').last().addClass('active');
  } else {
   $('.oldActive').prev().addClass('active');
  }
  $('.oldActive').removeClass('oldActive');
  $('.slide').fadeOut(speed);
  $('.active').fadeIn(speed);
 }
        });
 
 // Show first slide
 $('.active').show();
 
 // Next Handler
 $('#next').on('click', nextSlide);
 
 // Prev Handler
 $('#prev').on('click', prevSlide);
 
 // Auto Slider Handler
 if(autoswitch == true){
  setInterval(nextSlide,autoswitch_speed);
 }
});
</script>

Setelah semuanya di buat, jangan lupa save kemudian silahkan dijalankan, dan berikut ini adalah hasil dari coding diatas.


Sekian dulu untuk tutorial kali ini, silahkan dipelajari dan di praktekkan, bila ada yang kurang paham bisa bertanya melalui kolom komentar. Nanti akan saya jawab semaksimal mungkin. Jangan lupa shere artikel ini agar bermanfaat bagi yang lainnya. Terima kasih.

Erji Ridho Lubis

Erji Ridho Lubis

Portal Coding Adalah Blog untuk memberikan pembelajaran serta tutorial mengenai berbagai pemrograman komputer.

No comments:
Write Comments

FansPage

Recent Comments

Copyright © 2018 Portal Coding.