Membuat Website Berita Sederhana Dengan Bootstrap

Share:
Membuat Website Berita Sederhana Dengan Bootstrap
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar membuat tampilan website berita sederhana dengan menggunakan bootstrap 5. Ikuti selengkapnya di bawah ini.




Kerangka Web yang Akan Dibuat

Tutorial ini cocok untuk pemula yang baru belajar tentang bootstrap. Disini kita akan membuat sebuah tampilan website berita sederhana dari menu, headline news, list berita, form, maps dan footer. Di bawah ini adalah kerangka web yang akan kita buat.

Frame






Menyiapkan File

1. Buatlah sebuah file baru dengan nama index.html.

2. Kali ini kita akan menggunakan bootstrap dalam bentuk CDN. Silahkan copy script di bawah ini dan paste ke dalam file index.html
    
<!DOCTYPE html> <html lang="en">     <head>     <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Bootstrap demo</title> <!-- source css code, imported from outside --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"/>     </head> <body>     <!-- this is menu section --> <!-- this is headline section --> <!-- this is list news section --> <!-- this is maps section --> <!-- this is footer section --> <!-- source javascript is needed to make dynamic components work using a javascript language imported from outside -->         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>     </body> </html>


Membuat Menu

Bootstrap sudah menyediakan beberapa contoh menu yang bisa digunakan dengan mudah. Copy script di bawah ini dan paste di bawah bagian <-- this is menu section -->
    
<nav class="navbar navbar-expand-lg bg-light">     <div class="container">     <a class="navbar-brand" href="#">SuperNews</a> <button     class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">     <a class="nav-link active" aria-current="page" href="#">Home</a>     </li>     <li class="nav-item">     <a class="nav-link" href="#">News</a>     </li>     <li class="nav-item">     <a class="nav-link" href="#">About</a>     </li>     </ul>     </div>     </div> </nav>




Membuat Headline News

Kita akan membuat bagian headline news yang nantinya akan terdapat sebuah gambar besar dengan garis melengkung di setiap sisinya. Untuk membuat garis melengkung kita bisa menggunakan class rounded-4 lalu terdapat judul di bagian bawah. Copy script di bawah ini dan paste di bawah bagian <-- this is headline section -->
    

<div class="container mt-5">     <img class="rounded-4" style="object-fit: cover; width: 100%; height: 400px;" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt=""> <h4 class="mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum porro consequuntur enim optio recusandae, delectus, veritatis quam provident esse animi explicabo debitis iste neque, nulla architecto. Rerum rem impedit nulla!</h4> </div>




Membuat Daftar Berita

Kita akan membuat list atau daftar berita dengan memanfaatkan class card. Dan untuk membuatnya tersusun menjadi 4 bagian setiap baris, kita bisa menggunakan class row dan class col-3. Copy script di bawah ini dan paste di bawah bagian <-- this is list news section -->
    

<div class="container mt-5">     <h3>List of News</h3> <div class="row">     <div class="col-3">     <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p>         </div> <div class="col-3">     <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p>         </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3">     <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div>     </div> </div>




Membuat Peta

Untuk menampilkan peta, kita bisa menggunakan google maps. Buka google maps cari lokasi  bagikan  sematkan peta  copy dan paste di bagian bawah <-- this is maps section -->.
    

<div class="container mt-5">     <iframe     class="rounded-4" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3984.3829736104794!2d104.75456151468782!3d-2.991052340704834!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e3b7606b5245b43%3A0xdc206fa2daf3249a!2sKantor%20Walikota%20Palembang!5e0!3m2!1sid!2sid!4v1659063786258!5m2!1sid!2sid" width="100%" height="350" style="border: 0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div>
Ganti width dan height sesuai keinginan kalian. Disini saya cukup memberikan tinggi 300px dan lebar 100% untuk membuat peta memenuhi lebar layar.



Membuat Footer

Footer adalah bagian bawah pada sebuah website. Biasanya berisi link-link eksternal, alamat, dan info tambahan lainnya yang tidak disebutkan di bagian atas. Copy dan paste di bawah <-- this is footer section -->
    

<div class="bg-light mt-5">     <div class="container p-4 text-center">     Copyright ©2022 All rights reserved | Created By Nabil Sahretech </div> </div>




Script Lengkap

    

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Bootstrap demo</title> <!-- source css code, imported from outside --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous" /> </head> <body> <!-- this is menu section --> <nav class="navbar navbar-expand-lg bg-light"> <div class="container"> <a class="navbar-brand" href="#">SuperNews</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </div> </nav> <!-- this is headline section --> <div class="container mt-5"> <img class="rounded-4" style="object-fit: cover; width: 100%; height: 400px" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <h6 class="mt-3"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum porro consequuntur enim optio recusandae, delectus, veritatis quam provident esse animi explicabo debitis iste neque, nulla architecto. Rerum rem impedit nulla! </h6> </div> <!-- this is list news section --> <div class="container mt-5"> <h3>List of News</h3> <div class="row"> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> <div class="col-3"> <img class="rounded-4" style="object-fit: cover; width: 100%; aspect-ratio: 1/1" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="" /> <p class="mt-3"> <b>Jhon Due | 20-08-2022</b> <br /> Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta accusantium praesentium ducimus </p> </div> </div> </div> <!-- this is maps section --> <div class="container mt-5"> <iframe class="rounded-4" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3984.3829736104794!2d104.75456151468782!3d-2.991052340704834!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e3b7606b5245b43%3A0xdc206fa2daf3249a!2sKantor%20Walikota%20Palembang!5e0!3m2!1sid!2sid!4v1659063786258!5m2!1sid!2sid" width="100%" height="350" style="border: 0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" ></iframe> </div> <!-- this is footer section --> <div class="bg-light mt-5"> <div class="container p-4 text-center"> Copyright ©2022 All rights reserved | Created By Nabil Sahretech </div> </div> <!-- source javascript is needed to make dynamic components work using a javascript language imported from outside --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous" ></script> </body> </html>



Hasil Akhir

Jika semua step sudah kalian lalui. Saatnya kalian bisa melakukan uji coba. Klik kanan pada file lalu pilih browser yang kalian milik. Lalu tampilannya akan tampak seperti gambar di bawah ini.

Tampilan Akhir



Sekian tutorial kita kali ini tentang cara membuat tampilan website berita sederhana dengan menggunakan bootstrap. Semoga bermanfaat, jika ada yang perlu ditanyakan silahkan tanyakan langsung di kolom komentar di bawah ini.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik