Cara Membuat Halaman Web Responsive Dengan Menggunakan HTML dan CSS - Pada Tutorial kali ini kita akan membahas tentang web yaitu bagaimana cara untuk membuat halaman web dengan HTML dan CSS yang tentu saja respsonsive dengan menggunakan CSS dari Bootstrap.
Tutorial ini dibuat karena penulis merasa bahwa banyak sekali teman-taman yang terjun dalam dunia teknologi informasi khusunya dalam bidan pemrograman belum mengetahui/mengerti bagaimana cara membuat halaman website, termasuk penulis sendiri juga masih pemula dalam bidangnya.
Ahirnya penulis membuatkan tutorial mengenai cara membuat halaman website statis dengan HTML dan CSS yang tentu saja menggunakan CSS dari Bootstrap.
Sebelum di lanjutkan alangkah lebih baiknya Anda memahami terlebih dahulu tentang Pengertian Bootstrap dan Cara Penggunaannya
Klik Disini. Jika Anda sudah memahaminya langsung saja ketutorialnya.
Cara Membuat Template Website Responsive dengan Menggunakan HTML Dan CSS
Disini penulis mencontohkan membuat halaman website statis dengan menggunakan HTML dan CSS dari Bootstrap untuk membuat halaman Inventaris Barang. Anda juga bisa membuat lain dengan cara mengeditnya.
Baiklah, dengan mengucapkan bismillah kita langsung saja praktek bagaimana cara untuk membuat halaman website sederhana dengan menggunakan HTML dan CSS dari Bootstrap ini. Semoga Bermanfaat.
Persiapan Membuat Template Web Responsive Dengan HTML dan CSS
Apa saja yang harus diperlukan dalam pembuatan template website sederhana yang responsive dengan menggunakan HTML dan CSS?
- Gunakan Text Editor yang kamu sukai, disini penulis menggunakan text editor yaitu dengan menggunakan Sublime Text. Anda bisa Mendownload Sublime Text disini
- Download File CSS Bootstrap, disini penulis akan membagikan CSS Bootstrap ini, Download Disini.
Jika persiapan Sudah Selesai langsung saja ke tahap Pembuatannya, yaitu Sebagai Berikut:
Cara Membuat Web dengan HTML dan CSS
1. Buatlah Folder Bebas terlebih dahulu. Disini penulis mencontohkan membuat folde di Desktop yaitu dengan nama Website HTML dan CSS.
2. Kemudian Buka Text Editor Arahkan Ke Folder Tersebut. Dengan Cara File -> Open Folder -> kemudian Pilihlah Folder yang sudah Anda Buat Tadi.
3. Pastikan Sudah tampil seperti dibawah ini.
4. Buat File yang bernama index.html dengan cara yaitu File -> Newfile -> Kemudian Anda Save file tersebut dengan cara File -> Save -> Beri nama file tersebut dengan index.html -> kemudian arahkan lokasi penyimpanannya pada folder yang sudah anda buat tadi.
5. Isikan script pada index.html seperti script dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Website Statis dengan HTML dan CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<!--NAVBAR -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
</nav>
<main class="content">
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
<center><h1>Welcome</h1></center><hr>
<center><h2>Website Statis Dengan HTML dan CSS dari Bootstrap</h2></center>
<p>Ini adalah halaman web Dengan HTML dan CSS yang tampilannya sederhana tentu saja responsive dengan menggunakan CSS dari Bootstrap</p>
</div>
<div class="col-md-3 col-md-pull-9">
<div class="panel panel-color">
<div class="panel panel-heading">
<h2 class="panel-title">
<i class="fa fa-bars"> </i> <strong> Kategori Barang </strong></h2>
</div>
<div class="list-group">
<a href="dapur.html" class="list-group-item"><i class="fa fa-chevron-circle-right"></i> Dapur</a>
<a href="gudang.html" class="list-group-item"><i class="fa fa-chevron-circle-right"></i> Gudang</a>
</div>
</div>
</div>
<!-- AHIR SIDE BAR KATAGORE-->
</div>
</main>
</body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
6. Sekarang Salinlah Folder CSS yang telah Anda Download tadi ke Folder Tersebut.
7. Jalankan Scriptnya. Cara menjalankannya bagaimana? Double Klik file index.html atau dengan cara klik kanan -> Open With -> Cari web browser seperti (google chrome, mozila dan lain-lain) kemudian klik. Maka Akan Tampil Seperti Dibawah ini.
8. Selanjutnya kita akan membuat tampilan seperti HTML, CSS, About Me. Kategori Seperti Dapur dan Gudang, yaitu dengan cara selanjutnya.
9. Buatlah File baru kemudian namakan file tersebut dengan nama html.html. Lakukanlah seperti cara empat.
10. Masukan Script Dibawah dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Website Statis dengan HTML dan CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<!--NAVBAR -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
</nav>
<main class="content">
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
<center><h1>HTML (HYPERTEXT MARKUP LANGUAGE)</h1></center>
<hr>
<h2>1.1 World Wide Web</h2>
<p>Internet merupakan sistem global dari seluruh jaringan komputer yang saling
terhubung. TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di
seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW) merupakan bagian dari
internet yang paling cepat berkembang dan paling populer. WWW bekerja berdasarkan pada
tiga mekanisme berikut:</p>
<ul>
<li>Protocol</li>
Standard aturan yang digunakan untuk berkomunikasi pada komputer
networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
<li>address</li>
WWW memiliki aturan penamaan alamat web yaitu URL (Uniform Resource
Locator) yang digunakan sebagai standard alamat internet.
<li>HTML</li>
HTML Digunakan untuk membuat dokumen yang bisa diakses melalui web
</ul>
</div>
<div class="col-md-3 col-md-pull-9">
<div class="panel panel-color">
<div class="panel panel-heading">
<h2 class="panel-title">
<i class="fa fa-bars"> </i> <strong> Kategori Barang </strong></h2>
</div>
<div class="list-group">
<a href="dapur.html" class="list-group-item"><i class="fa fa-chevron-circle-right"></i> Dapur</a>
<a href="gudang.html" class="list-group-item"><i class="fa fa-chevron-circle-right"></i> Gudang</a>
</div>
</div>
</div>
<!-- AHIR SIDE BAR KATAGORE-->
</div>
</main>
</body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
11. Kemudian Jalankan. Hasilnya seperti ini.
12. Selanjutnya untuk membuat CSS dan About me. Caranya sama seperti cara diatas, hanya saja dalam isiannya yaitu dalam tag <body> cukup Anda Rubah.
13. Selanjutnya untuk membuat isian kategori Dapur Dan Gudang, yaitu sebagai berikut ini.
14. Buat File baru. Namakan file tersebut dengan dapur.html kemudian Masukan Script di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<!--NAVBAR -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="aboutme.html">About Me</a></li>
</ul>
</div>
</nav>
<main class="content">
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
<div class="col-md-4">
<ul class="thumbnails">
<div class="thumbnail">
<img src="img/sutil.jpg" alt="sutil">
<center><h3>Sutil</h3></center>
<p>Sutil Ini adalah <a href="#">Baca Selengkapnya</a></p>
</div>
</ul>
</div>
<div class="col-md-4">
<ul class="thumbnails">
<div class="thumbnail">
<img src="img/piring.jpg" alt="sutil"><hr>
<center> <h3>Piring </h3><hr></center>
<p>piring Ini adalah <a href="#">Baca Selengkapnya</a></p>
</div>
</ul>
</div>
<div class="col-md-4">
<ul class="thumbnails">
<div class="thumbnail">
<img src="img/wajan.jpg" alt="sutil">
<center> <h3>Wajan </h3></center>
<p>wajan Ini adalah <a href="#">Baca Selengkapnya</a></p>
</div>
</ul>
</div>
</div>
<div class="col-md-3 col-md-pull-9">
<div class="panel panel-color">
<div class="panel panel-heading">
<h2 class="panel-title">
<i class="fa fa-bars"> </i> <strong> Kategori Barang </strong></h2>
</div>
<div class="list-group">
<a href="dapur.html" class="list-group-item"><i class="fa fa-chevron-circle-right"></i> Dapur</a>
<a href="gudang.html" class="list-group-item"><i class="fa fa-chevron-circle-right"></i> Gudang</a>
</div>
</div>
</div>
<!-- AHIR SIDE BAR KATAGORE-->
</div>
</main>
</body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
15. Maka Akan tampil seperti ini.
Kenapa tampilan gambarnya kosong? Karena Anda belum Membuat folder gambarnya, untuk menampilkan gambarnya, langkah yang harus Anda lakukan yaitu:
16. Buatlah Folder img
17. Kemudian taruhlah gambarnya, disini penulis menaruh gambar yaitu sutil.jpg, piring.jpg dan wajan.jpg. Anda bisa merubahnya sesuai keinginan anda.
18. Jika sudah ditaruh gambar kemudian jalankan maka akan tampil seperti berikut ini.
Untuk Dapat Merubah gambar sesuai nama gambar yang ingin Anda buat, anda masuklah pada bagian file yang bernama dapur kemudian cari script <img src="img/sutil.jpg" alt="sutil">. Rubahlah sesuai keinginan Anda.
19. Selanjutnya dalam pembuatan Gudang cukuplah anda meniru contoh diatas.
Penjelasan :
- Untuk Membuat Script ini supaya menarik penulis menggunakan CSS dari Bootstrap.
- Untuk membuat menu navigasinya yaitu dengan menggunakan Script dibawah ini.
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="aboutme.html">About Me</a></li>
</ul>
</div>
</nav>
- Untuk membuat Kategori pada sidebar yaitu dengan menggunakan script dibawah ini:
<div class="col-md-3 col-md-pull-9">
<div class="panel panel-color">
<div class="panel panel-heading">
<h2 class="panel-title">
<i class="fa fa-bars"> </i> <strong> Kategori Barang </strong></h2>
</div>
<div class="list-group">
<a href="dapur.html" class="list-group-item"><i class="fa fa-chevron-circle-right"></i> Dapur</a>
<a href="gudang.html" class="list-group-item"><i class="fa fa-chevron-circle-right"></i> Gudang</a>
</div>
</div>
</div>
- Untuk membuat Tampilan seperti ini (Lihat gambar dibawah) yaitu dengan menggunakan script dibawah ini:
Yaitu dengan menggunakan Script ini:
<div class="col-md-4">
<ul class="thumbnails">
<div class="thumbnail">
<img src="img/sutil.jpg" alt="sutil">
<center><h3>Sutil</h3></center>
<p>Sutil Ini adalah <a href="#">Baca Selengkapnya</a></p>
</div>
</ul>
</div>
<div class="col-md-4">
<ul class="thumbnails">
<div class="thumbnail">
<img src="img/piring.jpg" alt="sutil"><hr>
<center> <h3>Piring </h3><hr></center>
<p>piring Ini adalah <a href="#">Baca Selengkapnya</a></p>
</div>
</ul>
</div>
<div class="col-md-4">
<ul class="thumbnails">
<div class="thumbnail">
<img src="img/wajan.jpg" alt="sutil">
<center> <h3>Wajan </h3></center>
<p>wajan Ini adalah <a href="#">Baca Selengkapnya</a></p>
</div>
</ul>
</div>
NB : Adapun untuk penjelasan Script yang lainnya Anda bisa membacanya di halama Bootstrap yaitu
Di sini
Sekian tutorial kali ini yaitu membuat website dengan menggunakan HTML dan CSS tentu saja responsive dengan menggunakan CSS dari Bootstrap. Semoga Bermanfaat.
