Membuat Website Dengan Bootstrap, CSS3 dan HTML5
Assamualaikum wr.wb
Gimana kabarnya sahabat forumkoding? Semoga sehat selalu.
Pada kesempatan kali ini saya akan membuat tutorial mengenai pembuatan website Hotel,
dengan script
Selanjutnya teman-teman hapus saja pada bagian search nya karena pada tutorial ini kita tidak akan menggunakan search.
Langkah selanjutnya silahkan teman-teman buat file dengan nama style.css sehingga tampak pada gambar gibawah ini:
Pada file style.css tersebut silahkan teman-teman salin script dibawah ini:
maka hasilnya akan seperti gambar dibawah ini:
Pada tulisan navbar silahkan teman-teman ubah seperti nama website yang teman-teman inginkan diatas hanya contoh saja dan tambahkan script dibawah ini diatas script yang terdapat tulisan Hotel Reservation
dan teman silahkan cari script <ul class="navbar-nav mr-auto"> dan ubah menjadi <ul class="navbar-nav ml-auto">. Sehingga hasilnya seperti dibawah ini:
Dan tambahkan pada file style.css script dibawah ini:
Lalu teman teman tambahkan tag span pada tulisan reservation. untuk script lengkapnya silahkan perhatikan script dibawah ini:
Langkah selanjutnya kita akan membuat jombotron silahlah pergi ke website bootstrap dan copykan scriptnya dbawah script nav. silahkan ubah script jumbotron menjadi seperti dibawah ini:
Lalu pada style.css tambahkan script dibawah ini:
Sehingga hasilnya akan seprti gambar dibawah ini:
Untuk Script lengkapnya pada bagian grid silahkan ikuti script dibawah ini.
Silahkan teman-teman copykan grid pertama jadi kita akan menampilkan 6 gambar pada grid untuk contoh gambarnya seperti dibawah ini:
Untuk Selanjutnya kita akan membuar pembatan antara content room dengan content reservation
untuk scriptnya silahkan ikuti script dibawah ini:
Selanjutnya kita akan membuat suatu descriptsi dari Hotel Reservation ini, untuk scritnya silahkan ikutin script dibawah ini:
Selanjutnya kita akan membuat tampilan about, untuk script htmlnya silahkan ikuti script dibawah ini dan tambahkan pada file index.html
Langkah terakhir kita akan membuat Footer atau tampilan hak cipta untuk scriptnya silahkan ikuti script dibawah ini:
Selamat tampilan website teman-teman sudah jadi ... untuk dapat memfungsinkan menunya silahkan ikuti langkah berikut ini:
Pada bagian jumbotron reservasi silahkan tambahkan script seperti dibawah ini:
Langkah yang paling akhir silahkan teman-teman tambahkan script dibawah ini pada file style.css
Untuk tutorial diatas adalah design yang sederhana .. teman-teman dapat mengembangkannya untuk lebih baik lagi atau sesuai dengan kebutuhan.. yang jelas untuk konsep pembuatannya hampir sama.
Terimakasih telah membaca artikel tentang Membuat Website Dengan Bootstrap, CSS3 dan HTML5, Semoga bermanfaat.. Salam Sukses ;)
By: Muhammad Rizal Supriadi (D4 Informatic Engineering)
Gimana kabarnya sahabat forumkoding? Semoga sehat selalu.
Pada kesempatan kali ini saya akan membuat tutorial mengenai pembuatan website Hotel,
Disini kita mempunyai kewajiban untuk mengamalkan ilmu karena jika ilmu tidak diamalkan seperti halnya pohon yang tidak berbuah atau dapat dikatakan ilmu itu akan sia-sia.
Tahap Persiapan
Apa saja bahan-bahan yang harus disiapkan? berikut adalah bahan-bahan yang harus teman-teman persiapkan:
- Teks Editor seperti (Sublime, Notepade++, Visual Studi Code).
- Buka Website Boostrap untuk menggunaakn stylenya
- Download Bootstrap 4 (css, js). ini akan digunakan sebagai file internal .,, maksudnya kita akan membuat website secara offline.
- Siapkan gambar apa saja yang akan teman-teman tampilkan.
- Buat file index.html sebagai file utama dari design halaman website yang akan teman-teman buat
- Selanjutnya buat file css untuk mengcustom style dari bootstrap supaya seperti yang teman-teman inginkan.
Tahap Pembuatan
Untuk tahap pembuatannya Silahkan teman-teman kunjungi website bootstrapnya dan download folder css dan js nya.. untuk jelasnya silahkan perhatikan gambar dibawah ini.
Silahkan teman-teman tekan tombol download dan extrak file nya pada folder yang teman teman inginkan sehingga pada folder tersebut akan terdapat folder css dan js. seperti gambar dibawah ini..
Langkah selanjutnya silahkan teman-teman buka folder yang terdapat css dan js nya pada teks editor masing-masing saya menggunakan Visual Studio Code, lalu buat file index.html. Setelah itu silahkan teman-teman ketikan tanda (!) pada index.html, silahkan perhatikan gambar dibawah ini.
Silahkan tekan enter maka secara otomatis script akan muncul seperti dibawah ini:
<!DOCTYPE html>Langkah selanjutnya silahkan teman-teman buka website bootstrap dan cari navbar setelah itu copy scriptnya pada bagian body atau teman-teman bisa copykan script dibawah ini:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<nav class="navbar navbar-expand-lg navbar-light bg-light">Maksud dari script diatas adalah kita akan membuat menu untuk dapat menampilkan halaman yang kita tuju nanti. jangan lupa tambahkan pada bagian head untuk memanggil file bootstrapnya
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
dengan script
<link rel="stylesheet" href="css/bootstrap.min.css">Maka akan tampil seperti gambar dibawah ini:
Selanjutnya teman-teman hapus saja pada bagian search nya karena pada tutorial ini kita tidak akan menggunakan search.
Langkah selanjutnya silahkan teman-teman buat file dengan nama style.css sehingga tampak pada gambar gibawah ini:
.navbar-brand{Lalu teman-teman panggi file style.css dengan cara menuliskan perintah bibawah ini :
font-family: Niconne;
font-size: 50px;
font-weight: 800;
}
<link rel="stylesheet" href="style.css">Perintah diatas dimaksudkan untuk memanggil file css yang kita custom stylenya. lalu teman-teman refresh websitenya dengan cara menekan tombol f5.
maka hasilnya akan seperti gambar dibawah ini:
<div class="container">Maksud dari script diatas adalah untuk membuat jarak dari pinggir menjadi sedikit ke tengah.
dan teman silahkan cari script <ul class="navbar-nav mr-auto"> dan ubah menjadi <ul class="navbar-nav ml-auto">. Sehingga hasilnya seperti dibawah ini:
@import url('https://fonts.googleapis.com/css?family=Great+Vibes|Niconne|Satisfy|Volkhov&display=swap');Script tersebut untuk mengubah jenis tulisannya yang tadi kita gunakan yaitu niconne. Untuk menggunakannya teman-teman harus terhubung ke internet terlebih dahulu.
Lalu teman teman tambahkan tag span pada tulisan reservation. untuk script lengkapnya silahkan perhatikan script dibawah ini:
<a class="navbar-brand" href="#">Hotel <span class="reservasi">Reservation</span></a>Dan pada file style.css tambahkan script dibawah ini:
:root {
--primary-color: rgb(241, 105, 47);
}
.reservasi{
color: var(--primary-color);
}
Untuk hasilnya silahkan perhatikan gambar dibawah ini:
Dan silahkan ubah pada bagian menu nya seperti yang teman-teman inginkan
Saya mengubah dan menambahkan script seperti dibawah ini:
<ul class="navbar-nav ml-auto">Lalu pada bagian style.css tambahkan script dibawah ini:
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Rome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reservation</a>
</li>
<li class="nav-item">
<a class="btn btn-primary btn-lg btn-menu" href="#" role="button">Contact</a>
</li>
</ul>
.btn{Sehingga hasilnya menjadi pada gambar berikut:
border-radius: 30px;
background-color: var(--primary-color);
border-color:white;
}
Langkah selanjutnya kita akan membuat jombotron silahlah pergi ke website bootstrap dan copykan scriptnya dbawah script nav. silahkan ubah script jumbotron menjadi seperti dibawah ini:
<div class="jumbotron">
<div class="dark">
<div class="text-center">
<h1 class="display-4">Welcome To The Hotel <span class="food">Reservation</span></h1>
<p class="lead">Enjoy And Explore</p>
</div>
</div>
Lalu pada style.css tambahkan script dibawah ini:
.jumbotron{Untuk Imagenya silahkan teman-teman buat folder dengan nama img dan panggil nama imgnya pada link diatas.
position: relative;
background-image: url(img/hotel1.jpg);
background-size: cover;
background-attachment: fixed;
color: aliceblue;
min-height: 600px;
margin-top: -23px;
}
.dark{
background-color: rgba(0, 0,0, 0.5);
padding: 30px;
border-radius: 100px;
}
Sehingga hasilnya akan seprti gambar dibawah ini:
Untuk Mengubah Style pada tulisan silahkan tambahkan script dibawah ini pada file style.css
.display-4{Untuk Selanjutnya kita akan membuat grid dengan banyak column nyaitu 3, silahkan buka web bootstrap dan ketikan grid lalu pilih yang 3 column. Untuk Scriptnya silahkan copy script dibawah ini:
font-family: Volkhov;
font-size: 400%;
font-weight: 800;
}
<div class="container">Simpan script tersebut dibawah class jumbotron. Lalu selanjutnya kita akan memakan cards pada grid tersebut. Silahkan Ketikan Cards lalu copy dan pastekan pada class col-sm.
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Untuk Script lengkapnya pada bagian grid silahkan ikuti script dibawah ini.
<div class="container">Untuk Pemanggilan gambarnya tergantung dari penyimpanan gambar teman-teman ya. Jika benar pemanggilannya maka akan seperti gambar berikut ini:
<h1 class="display-4">Rooms</h1>
<div class="row">
<div class="col-sm">
<div class="card">
<img class="card-img-top" src="img/kamar3.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm">
<div class="card">
<img class="card-img-top" src="img/kamar2.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm">
<div class="card">
<img class="card-img-top" src="img/kamar3.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
Silahkan teman-teman copykan grid pertama jadi kita akan menampilkan 6 gambar pada grid untuk contoh gambarnya seperti dibawah ini:
Untuk Selanjutnya kita akan membuar pembatan antara content room dengan content reservation
untuk scriptnya silahkan ikuti script dibawah ini:
<div class="reservation1">Pada script diatas silahkan pastekan didalam file index.html dibawah script grid lalu simpan. untuk script cssnya silahkan ikuti script dibawah ini:
<div class="dark">
<div class="text-center">
<h1 class="display-4">The Hotel <span class="food">Reservation</span></h1>
<p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
.reservation1{Silahkan simpan dan jalankan websitenya. Maka hasilnya seperti dibawah ini:
position: relative;
background-image: url(img/hotel3.jpg);
background-size: cover;
background-attachment: fixed;
color: aliceblue;
min-height: 300px;
margin-top: 100px;
margin-bottom: 50px;
}
<div class="container text-center">Tambahkan script diatas kedalam index.html dan untuk style cssnya silahkan tambahkan script dibawa ini pada file style.css
<div class="row">
<div class="col">
<img src="img/hotel3.jpg" class="img-thumbnail banner" alt="...">
</div>
<div class="col">
<img src="img/hotel3.jpg" class="img-thumbnail banner" alt="...">
</div>
<div class="col-7 ">
<a class="navbar-brand" href="#">Hotel <span class="reservasi">Reservation</span></a>
<p class="menus">The Reservation</p>
<p class="deskripsi">
As increasing numbers of consumers want to set out
or take prepared food home, the number of food-service
has skyrocketed. if you are Good Foodie and have a cut
to make some delicious food then its a very good business
opportunity to earn handsome profits.</p>
<a href="#" class="view-menu">Read More</a>
</div>
</div>
</div>
.banner{Jika teman-teman benar dalam pemanggilannya maka hasilnya seperti gambar dibawah ini:
height: 30%;
background-size:cover ;
}
<div class="reservation1">Silahkan teman-teman save, maka tampilannya akan seperti berikut ini:
<div class="dark">
<div class="text-center">
<h1 class="display-4">About <span class="food">The Hotel</span></h1>
<p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<img src="img/hotel3.jpg" class="img-thumbnail banner" alt="...">
</div>
<div class="col-7 ">
<a class="navbar-brand" href="#">About <span class="reservasi">The Hotel</span></a>
<p class="menus">The Hotel</p>
<p class="deskripsi">
As increasing numbers of consumers want to set out
or take prepared food home, the number of food-service
has skyrocketed. if you are Good Foodie and have a cut
to make some delicious food then its a very good business
opportunity to earn handsome profits.</p>
<a href="#" class="view-menu">Read More</a>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col">
<a class="navbar-brand" href="#">About <span class="reservasi">The Hotel</span></a>
<p class="menus">The Hotel</p>
<p class="deskripsi">
As increasing numbers of consumers want to set out
or take prepared food home, the number of food-service
has skyrocketed. if you are Good Foodie and have a cut
to make some delicious food then its a very good business
opportunity to earn handsome profits.</p>
<a href="#" class="view-menu">Read More</a>
</div>
<div class="col-7 ">
<img src="img/hotel3.jpg" class="img-thumbnail banner" alt="...">
</div>
</div>
</div>
<!-- Footer -->Silahkan teman-teman tambahkan pada index.html dan save lalu jalankan .. maka hasilnya seperti berikut ini:
<footer class="py-5 bg-dark text-center text-white">
<p>Copyright 2019 || Powered By Muhammad Rizal Supriadi Web Design and Development</p>
</footer>
Pada bagian jumbotron reservasi silahkan tambahkan script seperti dibawah ini:
<div class="jumbotron" id="reservasi">Tepatnya tambahkan id pada jumbotronnya. setelah itu kita panggil idnya pada menu dengan cara mengedit script pada menu reservasi seperti dibawah ini.
<div class="dark">
<div class="text-center">
<h1 class="display-4">Welcome To The Hotel <span class="food">Reservation</span></h1>
<p class="lead">Enjoy And Explore</p>
</div>
</div>
</div>
<li class="nav-item">Selanjutnya pada class nav tambahkan fixed-top supaya menunya terus mengikuti, untuk scriptnya seperti dibawah ini:
<a class="nav-link" href="#reservasi">Reservation</a>
</li>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">Lalu silahkan teman-teman jalankan websitenya dan lihat perubahan pada navbar nya. jika terus mengikuti berarti teman-teman telah berhasil menerapkannya.
Langkah yang paling akhir silahkan teman-teman tambahkan script dibawah ini pada file style.css
Maksud dari script diatas atau supaya setika kita mengklik menu maka website akan scroll dengan lembut. silahkan teman-teman bandingkan dengan sebelum menggunakan script tersebut. Jika berhasil maka selamat Design website teman-teman telah selesai ..
html {
scroll-behavior: smooth;
}
Untuk tutorial diatas adalah design yang sederhana .. teman-teman dapat mengembangkannya untuk lebih baik lagi atau sesuai dengan kebutuhan.. yang jelas untuk konsep pembuatannya hampir sama.
Terimakasih telah membaca artikel tentang Membuat Website Dengan Bootstrap, CSS3 dan HTML5, Semoga bermanfaat.. Salam Sukses ;)
By: Muhammad Rizal Supriadi (D4 Informatic Engineering)
