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.

Sahretech

Membuat Website Berita Sederhana Dengan Bootstrap

Kerangka Web yang Akan Dibuat

Menyiapkan File

Membuat Menu

Membuat Headline News

Membuat Daftar Berita

Membuat Peta

Membuat Footer

Script Lengkap

Hasil Akhir

No comments

Kategori Pemrograman

Popular

Facebook