Asslamualaikum Wr. Wb.
Hari ini saya belajar membuat halaman utama atau HOME menggunakan bootstrap untuk membuat website yang responsive.
Apa sih Desain Website Responsive itu? Desain Web Responsif (bahasa Inggris:Responsive Web Design (RWD))
adalah sebuah metode atau pendekatan sistem web desain yang bertujuan
memberikan pengalaman berselancar yang optimal dalam berbagai perangkat,
baik mobile maupun komputer meja.
Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat
mobile berukuran kecil maupun perangkat komputer meja dengan ukuran
monitor besar. Ukuran huruf, user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi
layar monitor yang tersedia. Hasilnya pengguna akan merasakan
pengalaman mudah membaca, nyaman dan melihat informasi web tersebut sama
dengan jika ia melihat melalui perangkat komputer meja.
Sumber Keterangan : https://id.wikipedia.org
Tutorial :
1. Buka web browser tuliskan Bootstrap template.
2. Pilih all free bootstrap theme & templates-startbootstrap lalu cari desain yang anda sukai klik privew and Downloads.
3. Kemudian Download lah template tersebut.
4. Exstrack file yang sudah di download tadi kemudian masuk ke foldernya cari index.html klik kanan open with text editor atau bluefish silahkan mengeditnya contoh seperti punya saya ini yang sudah saya edit.
Scriptnya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Thoni" >
<title>Blog Post - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/blog-post.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style>
body {
background-color: cyan;
}
</style>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">HOME</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="Profil.html">Profil</a>
</li>
<li>
<a href="galery.html">Galery</a>
</li>
<li>
<a href="artikel.html">Artikel</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Post Content Column -->
<div class="col-lg-8">
<!-- Blog Post -->
<!-- Title -->
<h1>Membuat Halaman Utama</h1>
<!-- Author -->
<p class="lead">
by <a href="Profil.html">Achmad Sulthoni</a>
</p>
<hr>
<!-- Date/Time -->
<hr>
<!-- Preview Image -->
<img class="img-responsive" src="website.jpeg" alt="">
<hr>
<!-- Post Content -->
<p>
Situs web (bahasa Inggris: website) adalah suatu halaman web yang saling berhubungan yang umumnya berada pada peladen yang sama berisikan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisasi.[1] Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server web yang dapat diakses melalui jaringan seperti Internet, ataupun jaringan wilayah lokal (LAN) melalui alamat Internet yang dikenali sebagai URL. Gabungan atas semua situs yang dapat diakses publik di Internet disebut pula sebagai World Wide Web atau lebih dikenal dengan singkatan WWW. Meskipun setidaknya halaman beranda situs Internet umumnya dapat diakses publik secara bebas, pada praktiknya tidak semua situs memberikan kebebasan bagi publik untuk mengaksesnya, beberapa situs web mewajibkan pengunjung untuk melakukan pendaftaran sebagai anggota, atau bahkan meminta pembayaran untuk dapat menjadi aggota untuk dapat mengakses isi yang terdapat dalam situs web tersebut, misalnya situs-situs yang menampilkan pornografi, situs-situs berita, layanan surel (e-mail), dan lain-lain. Pembatasan-pembatasan ini umumnya dilakukan karena alasan keamanan, menghormati privasi, atau karena tujuan komersil tertentu.
Sebuah halaman web merupakan berkas yang ditulis sebagai berkas teks biasa (plain text) yang diatur dan dikombinasikan sedemikian rupa dengan instruksi-instruksi berbasis HTML atau XHTML, kadang-kadang pula disisipi dengan sekelumit bahasa skrip. Berkas tersebut kemudian diterjemahkan oleh peramban web dan ditampilkan seperti layaknya sebuah halaman pada monitor komputer.
Halaman-halaman web tersebut diakses oleh pengguna melalui protokol komunikasi jaringan yang disebut sebagai HTTP, sebagai tambahan untuk meningkatkan aspek keamanan dan aspek privasi yang lebih baik, situs web dapat pula mengimplementasikan mekanisme pengaksesan melalui protokol HTTPS.
</p>
<hr>
<!-- Blog Comments -->
<!-- Comments Form -->
<div class="well">
<h4>Beri Saya Saran atau Kritikan:</h4>
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Kirim</button>
</form>
</div>
<hr>
<!-- Posted Comments -->
<!-- Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="1.jpg" alt="" width="80px" height="80px">
</a>
<div class="media-body">
<h4 class="media-heading">Perakitan komputer
<small>Februari 28, 2016 at 9:30 PM</small>
</h4>
<i> Saya dengan teman-teman ini belajar merakit komputer hingga sampai siap di gunakan </i>
</div>
</div>
<!-- Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="2.jpg" alt="" width="80px" height="80px">
</a>
<div class="media-body">
<h4 class="media-heading">Pembuatan Kabel LAN
<small>Februari 28, 2016 at 9:30 PM</small>
</h4>
<i>Saya dengan teman teman ini belajar membuat kabel LAN tipe Straight</i>
<!-- Nested Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="3.jpg" alt="" width="80px" height="80px">
</a>
<div class="media-body">
<h4 class="media-heading">Pengecekan Hasil Dengan tester RJ45
<small>februari 28, 2014 at 9:30 PM</small>
</h4>
Setelah kabel selesai di buat kemudian test kabel LAN menggunakan tester RJ45 untuk mengetahui apa ada kesalahan atau tidak.
</div>
</div>
<!-- End Nested Comment -->
</div>
</div>
</div>
<!-- Blog Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Blog Search Well -->
<div class="well">
<h4>Blog Search</h4>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<!-- /.input-group -->
</div>
<!-- Blog Categories Well -->
<div class="well">
<h4>BACA BERITA</h4>
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a href="https://www.detik.com/">Detik.com</a>
</li>
<li><a href="http://www.liputan6.com">Liputan6.com</a>
</li>
<li><a href="http://www.merdeka.com">Merdeka.com</a>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a href="http://www.sindonews.com/"> sINDOnews.com</a>
</li>
<li><a href="http://kompas.co.id/">Kompas.com</a>
</li>
<li><a href="http://news.viva.co.id/">News Viva.com</a>
</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
<!-- Side Widget Well -->
<div class="well">
<h4>Sekilas Info Berita Terkini</h4>
<img class="media-object" src="4.png" alt="" width="80px" height="80px">
<p> Tim Rio Haryanto Bosan di Papan Bawah
CNN Indonesia | Jumat, 11 Maret 2016 Bos Manor Racing, Dave Ryan,
mengatakan bahwa timnya tak tertarik lagi mengikuti Formula 1 hanya sekadar balapan tanpa tujuan yang jelas. </p>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Achmad Sulthoni</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hasilnya :
5. - Jika saya klik pada menu Profil kita akan langsung masuk ke profil.
-Jika saya klik pada menu Artikel kita akan langsung masuk ke artikel dan kalau saya mengeklik backhome saya akan kembali ke halaman utama atau home.
6. Untuk membuat tampilan berpindah pada saat kita mengeklik menu atau judul saya menggunakan :
<a href="isi nama folder yg ingin ditampilkan berikutnya">isi nama menunya </a>
contoh :
7. Berikut ini contoh kalau tampilan website yang saya buat tadi sudah responsive.
Tampilan pada Komputer :
Tampilan pada mobile menunya pun pindah tempat secara otomatis yang tadinya di atas menjadi Dropdown :
Dan juga menu sekilas info berita terkini yang tadinya di samping menjadi di bawah :
Sekian dulu dari saya semoga bermanfaat bagi anda semuanya.
Wassalamualaikum Wr. Wb.
1 komentar:
Terima kasih gan, artikel & tutorial "Membuat Halaman Utama Website Responsive" ini sangat-sangat membantu 🙂
lengkap sekali, Pasti sangat bermanfaat terutama bagi para pemula. Sukses selalu.
Salam kenal.
Kunjungi website kampus saya : http://www.atmaluhur.ac.id
Kunjungi website saya : https://risma.mahasiswa.atmaluhur.ac.id
Posting Komentar