Membuat Halaman web dinamis menggunakan HTML CSS dan JavaScript
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 :
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.
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.
UPDATE !!!
Kalian bisa mendownload source code dari coding diatas sekarang. Silahkan download melalui link berikut ini.
>> KLIK DISINI <<
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 © 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>
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.
UPDATE !!!
Kalian bisa mendownload source code dari coding diatas sekarang. Silahkan download melalui link berikut ini.
>> KLIK DISINI <<
0 Response to "Membuat Halaman web dinamis menggunakan HTML CSS dan JavaScript"
Post a Comment