Membuat Web Yang Responsip dan Cantik

Tutorial Pembuatan web yang Responsip dan Dinamis.

kali ini kita akan membuat sebuah web tentang pariwisata dan kuliner dari kabupaten natuna, kali ini akan kita bahas dari awal proses pembuatan hingga selesai

langsung saja hal yang harus kita persiapkan yaitu:

PC, atau leptop dan sejenisnya untuk bekerja
lalu pastikan telah di instal XAMPP sebagai brouser dari web yang kita buat
lalu pastinya kita ekstrakkan fail css, javascrip, dan jquary dan di simpan kedalam projek yang akan kita jadikan web contoh pormat penyimpanan Localdisk C:/xampp/htdoc/folder kita
pada tutorial kali ini kita akan membuat fail yang namanya praktikum, lalu kita simpan
setelah itu kita masukkan fail css, dan javascrip daro botstrep dan jquary
lalu kita buat sebuah dokumen dan simpan denngan nama index.php , kenapa kita gunakan php?, karena takut ada beberapa aksi atau perintah nantinya dari php sendiri, jika di gunakan format html maka tidak akan berjalan, namun bis di imbangi dengan adanya javascrip.adapun codingnya sebagai berikut. <!DOCTYPE html>

<html>

<head>

<title>Praktikum</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

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

<style>

* {box-sizing:border-box}

body {font-family: Verdana,sans-serif;}

.mySlides {display:none}

/* Slideshow container */

.slideshow-container {

max-width: 70%;

max-height: 5%

position: relative;

margin: auto;

}

/* Caption text */

.text {

color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

}

/* Number text (1/3 etc) */

.numbertext {

color: #f2f2f2;

font-size: 12px;

padding: 8px 12px;

position: absolute;

top: 0;

}

/* The dots/bullets/indicators */

.dot {

height: 13px;

width: 13px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

}

.active {

background-color: #717171;

}

/* Fading animation */

.fade {

-webkit-animation-name: fade;

-webkit-animation-duration: 1.5s;

animation-name: fade;

animation-duration: 1.5s;

}

@-webkit-keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

@keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

.text {font-size: 11px}

}

</style>

</head>

<body >

<img class="img-responsive" src="asset/img/heder2.png" alt="">

<nav class="navbar navbar-inverse">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Praktikum Web</a>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Menu Utama</a></li>

<li><a href="alam.php">Wisata</a></li>

<li><a href="kuliner.php">Kuliner</a></li>

<li><a href="cara.php">Petunjuk</a></li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li><a href="#"><span class="glyphicon glyphicon-user"></span> Hendra Zulpiadi </a></li>

<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login </a></li>

</ul>

</div>

</div>

</nav>

<div class="container">

<div class="slideshow-container">

<div>

<div class="mySlides fade">

<div class="numbertext">1 / 3</div>

<img class="img-responsive" src="asset/img/mesjid_agung.jpg" style="width:100%" style="height: 20%">

<div class="text">Tajmahal in Indonesia</div>

</div>

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>

<img class="img-responsive" src="asset/img/KERNAS-NATUNA.jpg" style="width:100%" style="height: 20%">

<div class="text">Khas NATUNA</div>

</div>

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>

<img class="img-responsive" src="asset/img/alifston.jpg" style="width:100%" style="height: 20%">

<div class="text">Taman Batu</div>

</div>



<div class="mySlides fade">

<div class="numbertext">1 / 3</div>

<img class="img-responsive" src="asset/img/pantai tanjung.jpg" style="width:100%" style="height: 20%">

<div class="text">Pantai tanjung</div>

</div>

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>

<img class="img-responsive" src="asset/img/pasung.jpg" style="width:100%" style="height: 20%">

<div class="text"> kue pasung</div>

</div>

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>

<img class="img-responsive" src="asset/img/p3.jpg" style="width:100%" style="height: 20%">

<div class="text">Pulau tiga</div>

</div>

</div>

<br>

<div style="text-align:center">

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

</div>

</div>



<script>

var slideIndex = 0;

showSlides();

function showSlides() {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot");

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

slideIndex++;

if (slideIndex > slides.length) {slideIndex = 1}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

setTimeout(showSlides, 2000); // Change image every 2 seconds

}

</script>



<div class="row">

<div class="col-md-4 portfolio-item">

<a href="alam.php">

<img class="img-responsive" src="asset/img/tanjung-senubing2.jpg" alt="">

</a>

<h3>

<a href="alam.php">Wisata Alam Natuna</a>

</h3>

<p>Natuna adalah sebuah kabupaten yang ada di dalam gugusan pulau-pulau, di dalam nya masih menyimpan kekayaan alam yang masih asli dengan laut yang luas membentang, pantai yang memanjang dengan pasir yang putih, laiy yang biru, hutan yang hijau dan denah penduduk yang penuh memadati pesisir pantai</p>

<p>maka dari itu banyak sekali memberikan destinasi pantai dan taman bawah laut yang indah, daratan yang luas ditambah ciri masyarakat yang ramah dan mudah bergaul,dan tidak terlalu menutup diri,namun tetap menjaga nilai luhur budaya dan adan daerah</p>

<p>demikian penampakan alam yang dapat kita nikmati dari NATUNA , sebuah mutiara di ujung utara indonesia</p>

</div>

<div class="col-md-4 portfolio-item">

<a href="kuliner.php">

<img class="img-responsive" src="asset/img/KERNAS-NATUNA.jpg" alt="">

</a>

<h3>

<a href="kuliner.php">Kuliner Khas </a>

</h3>

<p>NATUNA , penuh dengan keberagaman dan keindahan alam yang membentang luas, anugrah tuhan yang besar terdapat di ujun utara indonesia, selain budaya dan alam yang mempesona Natuna juga memiliki kuliner yang unik dan lezat dan patut untuk di coba, dengan rasa dan bentuk yang khas, dan hanya di jumpai di natuna saja</p>

</div>

<div class="col-md-4 portfolio-item">

<a href="kuliner.php">

<img class="img-responsive" src="asset/img/Perjalanan.jpg" alt="">

</a>

<h3>

<a href="kuliner.php"> Paket Perjalanan </a>

</h3>

<p>NATUNA. salah satu kabupaten yang ada di profinsi kepulauan riau, yang dapat di akses baik melalui jalur laut maupun udara, dan menempuh jarak dan waktu yang cukup lama intuk datang ke kabupaten yang satu ini</p>

</div>

</div>



<footer>

<div class="row">

<div class="col-lg-12">

<p>Copyright © Hendzu98 -2017-</p>

</div>

</div>



</footer>

</div>

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

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

</body>

</html>
disini coding nya di buat sedemikian rupa dengan telah kita koneksikan ke dalam fail botsrep dan jquary
lalu buat dokumen beikutnya untuk menu wisata alam dengan nama alam.php codingnya sebagai berikut <!DOCTYPE html>

<html>

<head>

<title>Praktikum</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

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

</head>

<body >

<img class ="img-responsive" src="asset/img/heder2.png" alt="">

<nav class="navbar navbar-inverse">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Praktikum Web</a>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav">

<li ><a href="index.php">Menu Utama</a></li>

<li class="active"><a href="alam.php">Wisata</a></li>

<li><a href="kuliner.php">Kuliner</a></li>

<li><a href="cara.php">Petunjuk</a></li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li><a href="#"><span class="glyphicon glyphicon-user"></span> Hendra Zulpiadi </a></li>

<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login </a></li>

</ul>

</div>

</div>

</nav>

<div class="container">



<div class="row">

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="asset/img/Pantai-sisi.jpg" alt="">

</a>

<h3>

<a href="#">Pantai Sisi, Kemilau Wisata Natuna</a>

</h3>

<p>Pantai Trikora, salah satu tujuan wisata yang sayang jika dilewatkan kala Anda berkunjung ke Pulau Bintan. Bagimana tidak, pesona alam yang alami dengan pasir putih dan ombak yang landai, memberikan sensasi tersendiri saat liburan bersama keluarga dan kerabat. Pantai ini menjadi salah satu pantai terindah yang banyak dikunjungi wisatawan di Pulau Sumatra.</p>

</div>

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="asset/img/p3.jpg" alt="">

</a>

<h3>

<a href="#">Pulau Tiga, Destinasi Wisata Pantai dan Bawah Laut Natuna</a>

</h3>

<p>Pantai Kuta salah satu destinasi wisata favorit di Bali. Bagi wisatawan yang berkunjung Ke Bali merasa belum lengkap liburnya jika tidak mampir ke Pantai Kuta yang lokasinya mudah ditempuh kendaraan</p>

</div>

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="asset/img/pantai tanjung.jpg" alt="">

</a>

<h3>

<a href="#">Pantai Tanjung, Bunguran Timur Natuna</a>

</h3>

<p>Raja Ampat Adalah Nama Yang Diberikan Untuk Kepulauan Ini Dan Berasal Dari Mitos Lokal. Empat Pulau Utama Yang Ditemukan Disini Adalah Waigeo, Misool, Salawati Dan Batanta. Terletak Di Bagian Ujung Barat Laut Dari Kepala Burung Peninsula Di Provinsi Papua Barat Di Indonesia, Raja Ampat Atau Empat Raja Merupakan Salah Satu Kepulauan Yang Sangat Eksotis Dan Mengagumkan Di Indonesia. Raja Ampat Papua Juga Menjadi Surga Bagi Pecinta Diving.</p>

</div>

</div>

<div class="row">

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="asset/img/tanjung-senubing.jpg" alt="">

</a>

<h3>

<a href="#">Tanjung Senubeng, Indah Dengan Perjalanan Sejarahnya</a>

</h3>

<p>Pantai Trikora, salah satu tujuan wisata yang sayang jika dilewatkan kala Anda berkunjung ke Pulau Bintan. Bagimana tidak, pesona alam yang alami dengan pasir putih dan ombak yang landai, memberikan sensasi tersendiri saat liburan bersama keluarga dan kerabat. Pantai ini menjadi salah satu pantai terindah yang banyak dikunjungi wisatawan di Pulau Sumatra.</p>

</div>

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="asset/img/mesjid_agung.jpg" alt="">

</a>

<h3>

<a href="#">Masjid Agung Natuna, Tajmahalnya Indonesia</a>

</h3>

<p>Pantai Kuta salah satu destinasi wisata favorit di Bali. Bagi wisatawan yang berkunjung Ke Bali merasa belum lengkap liburnya jika tidak mampir ke Pantai Kuta yang lokasinya mudah ditempuh kendaraan</p>

</div>

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="asset/img/alifston.jpg" alt="">

</a>

<h3>

<a href="#">Taman Batu, Alif Stoon Natuna</a>

</h3>

<p>Raja Ampat Adalah Nama Yang Diberikan Untuk Kepulauan Ini Dan Berasal Dari Mitos Lokal. Empat Pulau Utama Yang Ditemukan Disini Adalah Waigeo, Misool, Salawati Dan Batanta. Terletak Di Bagian Ujung Barat Laut Dari Kepala Burung Peninsula Di Provinsi Papua Barat Di Indonesia, Raja Ampat Atau Empat Raja Merupakan Salah Satu Kepulauan Yang Sangat Eksotis Dan Mengagumkan Di Indonesia. Raja Ampat Papua Juga Menjadi Surga Bagi Pecinta Diving.</p>

</div>

</div>



<footer>

<div class="row">

<div class="col-lg-12">

<p>Copyright © Hendzu98 -2017-</p>

</div>

</div>



</footer>

</div>

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

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

</body>

</html>
setelah itu kita buat lagi dokumen baru dengan nama kuliner.php dengan koding sebagai berikut<!DOCTYPE html>

<html>

<head>

<title>Praktikum</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

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

</head>

<body >

<img class ="img-responsive" src="asset/img/heder2.png" alt="">

<nav class="navbar navbar-inverse">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Praktikum Web</a>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav">

<li ><a href="index.php">Menu Utama</a></li>

<li ><a href="alam.php">Wisata</a></li>

<li class="active"><a href="kuliner.php">Kuliner</a></li>

<li><a href="cara.php">Petunjuk</a></li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li><a href="#"><span class="glyphicon glyphicon-user"></span> Hendra Zulpiadi </a></li>

<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login </a></li>

</ul>

</div>

</div>

</nav>

<div class="container">



<div class="row">

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="asset/img/lempar.jpg" alt="">

</a>

<h3>

<a href="#">Lempar, si Pulat Bakar</a>

</h3>

<p>Pantai Trikora, salah satu tujuan wisata yang sayang jika dilewatkan kala Anda berkunjung ke Pulau Bintan. Bagimana tidak, pesona alam yang alami dengan pasir putih dan ombak yang landai, memberikan sensasi tersendiri saat liburan bersama keluarga dan kerabat. Pantai ini menjadi salah satu pantai terindah yang banyak dikunjungi wisatawan di Pulau Sumatra.</p>

</div>

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="asset/img/KERNAS-NATUNA.jpg" alt="">

</a>

<h3>

<a href="#">Kernas, Gorengan Khas Natuna</a>

</h3>

<p>Pantai Kuta salah satu destinasi wisata favorit di Bali. Bagi wisatawan yang berkunjung Ke Bali merasa belum lengkap liburnya jika tidak mampir ke Pantai Kuta yang lokasinya mudah ditempuh kendaraan</p>

</div>

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="asset/img/tabol saguk.jpg" alt="">

</a>

<h3>

<a href="#">Tabol Saguk, Makanan Istimewa Dari Pohon Rumbia</a>

</h3>

<p>Raja Ampat Adalah Nama Yang Diberikan Untuk Kepulauan Ini Dan Berasal Dari Mitos Lokal. Empat Pulau Utama Yang Ditemukan Disini Adalah Waigeo, Misool, Salawati Dan Batanta. Terletak Di Bagian Ujung Barat Laut Dari Kepala Burung Peninsula Di Provinsi Papua Barat Di Indonesia, Raja Ampat Atau Empat Raja Merupakan Salah Satu Kepulauan Yang Sangat Eksotis Dan Mengagumkan Di Indonesia. Raja Ampat Papua Juga Menjadi Surga Bagi Pecinta Diving.</p>

</div>

</div>

<div class="row">

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="#" alt="">

</a>

<h3>

<a href="#"> </a>

</h3>

<p> </p>

</div>

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="asset/img/Pasung.jpg" alt="">

</a>

<h3>

<a href="#">Pasung, yang Lembut dan Gurih</a>

</h3>

<p>Pantai Kuta salah satu destinasi wisata favorit di Bali. Bagi wisatawan yang berkunjung Ke Bali merasa belum lengkap liburnya jika tidak mampir ke Pantai Kuta yang lokasinya mudah ditempuh kendaraan</p>

</div>

<div class="col-md-4 portfolio-item">

<a href="#">

<img class="img-responsive" src="#" alt="">

</a>

<h3>

<a href="#"> </a>

</h3>

<p> </p>

</div>

</div>



<footer>

<div class="row">

<div class="col-lg-12">

<p>Copyright © Hendzu98 -2017-</p>

</div>

</div>



</footer>

</div>

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

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

</body>

</html>
setelah itu kita bisa menambahkan hal yang lainnya sesuai kenginan, untuk sementara disini dulu proses pembuatan kita,
untuk melihat hasilnya pastikan semua documen telah tersimpan dan coding dalam keadaan benar
untuk mengaksesnya silahkan membuka brouser yang ada, lalu ketikkan http://localhost/nama_file maka akan muncul bentuk tampilan dari yang kiita buat
untuk hasil tampilan web yang telah kita buat seperti ini
demikian untuk lebih jelasnya telah di siapkan format dasar webnya agar bisa di utak atik kembali oleh kawan kawan, silahkan berkreasi dengan web ini , silahkan klik di sini

demikian tutorial kai ini, semoga bermanfaat

terima kasih

CodeComunity

Cari Blog Ini

Membuat Web Yang Responsip dan Cantik

Tutorial Pembuatan web yang Responsip dan Dinamis.

Komentar

Posting Komentar