Sahabat Webhozz dimanapun berada, pada kesempatan kali ini kita akan belajar langsung untuk membuat sebuah halaman website.
Tentunya kita juga menggunakan Bootstrap.
Seperti pada postingan sebelumnya, kita membutuhkan instalasi Bootstrapnya terlebih dahulu.
Instalasi tersebut, bisa dikunjungi pada link berikut https://www.webhozz.com/blog/belajar-web-design-mengenal-bootstrap/.
Kita juga akan menambahkan menu navbar, seperti postingan sebelumnya https://www.webhozz.com/blog/membuat-navbar-bootstrap/.
Selain itu, juga kita memerlukan beberapa fitur dari Bootstrap seperti berikut ini:
- Carousel, membuat slide gambar bergerak https://getbootstrap.com/docs/4.3/components/carousel/#with-indicators.
- Container, membuat badan utama menu https://getbootstrap.com/docs/4.3/layout/overview/#containers.
- Grid, membuat menu konten terpisah https://getbootstrap.com/docs/4.3/layout/grid/#how-it-works.
- Border, untuk membuat gambar berbentuk bulat https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius.
- Image border-radius, untuk memanggil file gambar bentuk bulat https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius.
- Button, untuk membuat tombol variasi https://getbootstrap.com/docs/4.3/components/buttons/.
Dari semua fitur Bootstrap tersebut, kita akan membuat sebuah halaman website seperti tampilan berikut ini.
Saat discroll ke bawah lagi akan ada tampilan lanjutannya.
Lanjut discroll ke bawah lagi akan ada tampilan lanjutannya.
Hingga scroll sampai tampilan yang paling bawahnya.
Oke, langsung aja kita coba ya :
1 Buat sebuah file HTML, lalu masukkan script berikut ini, yaitu pemanggilan komponen Bootstrap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Belajar Bootstrap</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
2. Lalu kita sisipkan Navbar setelah tag <body>.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Webhozz Training</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
3. Maka akan tampil gambar berikut ini pada browser.
4. Selanjutnya, sediakan beberapa file gambar. Yang mana gambar-gambar ini akan kita gunakan untuk membuat slidernya.
5. Lalu gunakan fitur Carousel dari Bootstrap, bisa dikunjungi disini https://getbootstrap.com/docs/4.3/components/carousel/.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="gambar/sunflower.jpg" class="d-block w-100" alt="Bunga Matahari">
</div>
<div class="carousel-item">
<img src="gambar/ship.jpg" class="d-block w-100" alt="Kapal Berlayar">
</div>
<div class="carousel-item">
<img src="gambar/lake.jpg" class="d-block w-100" alt="Danau">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Pada script di atas, terdapat tag <img> serta atribut src=””. Nah disitu kita isikan nama file gambarnya.
Serta tambahan, masing-masing tag <img> ditambahkan atribut height=””. Tujuannya supaya gambarnya memiliki tinggi yang sama.
6. Maka akan tampil seperti ini pada browser.
7. Lalu kita gunakan fitur Container, Grid, Border, dan Button.
<!--container-->
<br>
<div class="container">
<!--grid-->
<div class="row">
<div class="col">
<center>
<!--image border-radius-->
<img width="80%" src="gambar/webdesign.jpg" alt="Web Design" class="rounded-circle">
<h3>Web Design</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
beatae
molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
voluptas ipsa. Ut adipisci laborum consequuntur.</p>
<!--button-->
<a class="btn btn-primary" href="#">Selengkapnya</a>
</center>
</div>
<div class="col">
<center>
<!--image border-radius-->
<img width="80%" src="gambar/webprogramming.jpg" alt="Web Programming" class="rounded-circle">
<h3>Web Programming</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
beatae
molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
voluptas ipsa. Ut adipisci laborum consequuntur.</p>
<!--button-->
<a class="btn btn-primary" href="#">Selengkapnya</a>
</center>
</div>
<div class="col">
<center>
<!--image border-radius-->
<img width="80%" src="gambar/android.jpg" alt="Android Development" class="rounded-circle">
<h3>Android Development</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
beatae
molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
voluptas ipsa. Ut adipisci laborum consequuntur.</p>
<!--button-->
<a class="btn btn-primary" href="#">Selengkapnya</a>
</center>
</div>
</div>
</div>
Pada contoh script di atas, sudah mencakup Container, Grid, Image, dan Button. Script kode paling atas, kita tambahkan <br>. Supaya containernya memiliki jarak agak kebawah.
8. Maka seperti inilah pada browser.
Jika kita scroll ke bawah, seperti inilah tampilannya.
9. Lalu pada Container tadi, tepatnya di bawah Grid. Kita tambahkan script.
<div class="container">
<div class="row">
...
</div>
<!--kodenya ditambahkan disini-->
</div>
Adapun script yang dimaksud adalah seperti berikut ini.
<!--row untuk membuat media objek-->
<br><br><br>
<div class="row">
<div class="col-md-7" style="padding: 80px;">
<h2>Web Design</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
quos quam fugit, repudiandae doloribus nesciunt.</p>
</div>
<div class="col-md-5">
<img class="img-thumbnail" src="gambar/webdesign.jpg" alt="Web Design">
</div>
</div>
<hr>
<div class="row">
<div class="col-md-5">
<img class="img-thumbnail" src="gambar/webprogramming.jpg" alt="Web Programming">
</div>
<div class="col-md-7" style="padding: 80px;">
<h2>Web Programming</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
quos quam fugit, repudiandae doloribus nesciunt.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-7" style="padding: 80px;">
<h2>Android Development</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
quos quam fugit, repudiandae doloribus nesciunt.</p>
</div>
<div class="col-md-5">
<img class="img-thumbnail" src="gambar/android.jpg" alt="Android Development">
</div>
</div>
<hr>
Pada script kode di atas pada bagian <div class=”col-md-7″>. Kita tambahkan atribut style=”padding:80px;”, supaya teks yang di dalamnya lebih ke dalam lagi tampilannya.
10. Maka seperti inilah tampilannya pada browser, jika kita scroll ke bawah lagi.
Gambar di atas adalah saat halamannya discroll agak ke bawah.
11. Tambahkan fitur Container baru, tepatnya paling bawah setelah Container sebelumnya. Tujuannya disini, kita akan membuat menu Footer.
<br>
<div class="container" style="padding: 30px;">
<p align="center">@copyright 2019 - by: Webhozz <a href="#">Back to Top</a></p>
</div>
Seperti inilah hasilnya pada browser jika kita scroll ke bawah.
12. Maka beginilah script kodenya secara keseluruhan.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Belajar Bootstrap</title>
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Webhozz Training</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
<!--carousel-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="gambar/sunflower.jpg" class="d-block w-100" alt="Bunga Matahari">
</div>
<div class="carousel-item">
<img src="gambar/ship.jpg" class="d-block w-100" alt="Kapal Berlayar">
</div>
<div class="carousel-item">
<img src="gambar/lake.jpg" class="d-block w-100" alt="Danau">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--container-->
<br>
<div class="container">
<!--grid-->
<div class="row">
<div class="col">
<center>
<!--image border-radius-->
<img width="80%" src="gambar/webdesign.jpg" alt="Web Design" class="rounded-circle">
<h3>Web Design</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
beatae
molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
voluptas ipsa. Ut adipisci laborum consequuntur.</p>
<!--button-->
<a class="btn btn-primary" href="#">Selengkapnya</a>
</center>
</div>
<div class="col">
<center>
<!--image border-radius-->
<img width="80%" src="gambar/webprogramming.jpg" alt="Web Programming" class="rounded-circle">
<h3>Web Programming</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
beatae
molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
voluptas ipsa. Ut adipisci laborum consequuntur.</p>
<!--button-->
<a class="btn btn-primary" href="#">Selengkapnya</a>
</center>
</div>
<div class="col">
<center>
<!--image border-radius-->
<img width="80%" src="gambar/android.jpg" alt="Android Development" class="rounded-circle">
<h3>Android Development</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
beatae
molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
voluptas ipsa. Ut adipisci laborum consequuntur.</p>
<!--button-->
<a class="btn btn-primary" href="#">Selengkapnya</a>
</center>
</div>
</div>
<!--row untuk membuat media objek-->
<br><br><br>
<div class="row">
<div class="col-md-7" style="padding: 80px;">
<h2>Web Design</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
quos quam fugit, repudiandae doloribus nesciunt.</p>
</div>
<div class="col-md-5">
<img class="img-thumbnail" src="gambar/webdesign.jpg" alt="Web Design">
</div>
</div>
<hr>
<div class="row">
<div class="col-md-5">
<img class="img-thumbnail" src="gambar/webprogramming.jpg" alt="Web Programming">
</div>
<div class="col-md-7" style="padding: 80px;">
<h2>Web Programming</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
quos quam fugit, repudiandae doloribus nesciunt.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-7" style="padding: 80px;">
<h2>Android Development</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
quos quam fugit, repudiandae doloribus nesciunt.</p>
</div>
<div class="col-md-5">
<img class="img-thumbnail" src="gambar/android.jpg" alt="Android Development">
</div>
</div>
<hr>
</div>
<br>
<div class="container" style="padding: 30px;">
<p align="center">@copyright 2019 - by: Webhozz <a href="#">Back to Top</a></p>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
13. Seperti inilah hasil akhirnya.
Scroll ke bawah lagi.
Scroll ke bawah lagi.
Dan scroll ke bawah lagi.
Perhatikan bagian paling bawah, nah jadi ada footernya kan???
Jadi demikianlah, selamat mencoba dan semoga bermanfaat ya.
