Membuat Website Sederhana Menggunakan HTML dan Bootstrap

Bootstrap merupakan sebuah framework dari CSS yang bersifat Open Source dan Free. Penggunaan boostrap juga sangat mudah. Kita hanya memanggil class-class yang sudah disediakan oleh developer dan kita tinggal memakainya. Tentunya saja kita tidak bisa langsung memanggil class nya sembarangan, karena ada penamaan khusus untuk setiap class yang dipanggil.

                Karena setiap class yang dipanggil merupakan representasi dari sebuah elemen yang ingin kita pakai. Dan jumlah class tersbut sangat banyak, dan tidak mungkin bagi kita untuk mengingatnya karena terdapat sebuah dokumentasi resmi dari bootstrap yang sudah sangat jelas dan detail. Kita bisa mengunjunginya di situs resmi bootstrap. Disana juga sudah diberikan contoh untuk setiap penggunaan classnya. Jadi kita tinggal mengikutinya.

Hal yang harus kita siapkan untuk membuat website menggunakan bootstrap ini adalah:

1. Code editor. Bebas memilih code editor mana saja, disini saya menggunakan VS Code.
2. Koneksi Internet. Karena kita akan menggunakan bootstrap secara online, atau kita bisa mendownload file bootstrap untuk kita gunakan secara offline. Hal itu juga bisa kita lakukan.
3. Browser. Untuk menjalankan website, kita memerlukan browser sebagai perantara untuk menjalankan website kita.

Langkah 1

Buat folder/directory untuk menyimpan file kita. Jika sudah, buka folder tersebut menggunakan code editor kita.

Jika kita menggunakan VS Code kita bisa membuka folder kita dengan cara klik kanan pada folder yang ingin kita buka di VS code. Kemudian “Open With Code”.

Langkah 2

Buat file index.html pada direktori kita. Dan biarkan kosong seperti ini, karena kita akan mengambil “starter template” atau template yang sudah disediakan oleh bootstrap. Template tersebut berisi link yang memanggil file CSS dan Javascript bawaan milik bootstrap.

Selanjutnya kita buka website milik bootstrap dan masuk ke getting started. Selanjutnya kita copy bagian starter template nya dengan mengklik tombol copyseperti gambar di bawah ini.

Maka file index.html kita akan berubah menjadi seperti ini.

Setelah itu, copy kan sintaks atau codingan dibawah ini dan paste ke dalam file index.html

<nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
        <div class="container-fluid"&gt;
          <a class="navbar-brand" href="#"&gt;Navbar</a&gt;
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
            <span class="navbar-toggler-icon"&gt;</span&gt;
          </button&gt;
          <div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
            <ul class="navbar-nav me-auto mb-2 mb-lg-0"&gt;
              <li class="nav-item"&gt;
                <a class="nav-link active" aria-current="page" href="#"&gt;Home</a&gt;
              </li&gt;
              <li class="nav-item"&gt;
                <a class="nav-link" href="#"&gt;Link</a&gt;
              </li&gt;
              <li class="nav-item dropdown"&gt;
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;
                  Dropdown
                </a&gt;
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                  <li&gt;<a class="dropdown-item" href="#"&gt;Action</a&gt;</li&gt;
                  <li&gt;<a class="dropdown-item" href="#"&gt;Another action</a&gt;</li&gt;
                  <li&gt;<hr class="dropdown-divider"&gt;</li&gt;
                  <li&gt;<a class="dropdown-item" href="#"&gt;Something else here</a&gt;</li&gt;
                </ul&gt;
              </li&gt;
              <li class="nav-item"&gt;
                <a class="nav-link disabled"&gt;Disabled</a&gt;
              </li&gt;
            </ul&gt;
            <form class="d-flex"&gt;
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"&gt;
              <button class="btn btn-outline-success" type="submit"&gt;Search</button&gt;
            </form&gt;
          </div&gt;
        </div&gt;
      </nav&gt;

Codingan atau sintaks tersebut berfungsi untuk membuat navbar. Kita bisa mengeceknya dengan membukanya lewat browser kita. Ada sebuah trik jika kita menggunakan Visual Studio Code agar memudahkan kita untuk menjalankan website kita ke sebuah browser, yaitu dengan menggunakan extension “open in browser”. Caranya mudah, yaitu dengan masuk ke menu extension vscode lalu cari extension open in browser, kemudian instal.

Jika, sudah kembali ke file index.html, klik kanan lalu klik open in default browser.

Jika sudah, maka akan tampil seperti berikut ini.

Langkah 3

Membuat carousel. Carousel adalah slideshow yang biasanya berupa gambar, yang di dalamnya bisa terdapat 1 sampai 3 gambar. Biasanya penggunaan carousel ini berguna untuk menyampaikan informasi secara singkat, atau hanya untuk menampilkan gambar saja. Masuk ke dokumentasi bootstrap, lalu cari carousel pada menu pencarian.

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"&gt;
        <div class="carousel-indicators"&gt;
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"&gt;</button&gt;
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"&gt;</button&gt;
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"&gt;</button&gt;
        </div&gt;
        <div class="carousel-inner"&gt;
          <div class="carousel-item active"&gt;
            <img src="..." class="d-block w-100" alt="..."&gt;
            <div class="carousel-caption d-none d-md-block"&gt;
              <h5&gt;First slide label</h5&gt;
              <p&gt;Some representative placeholder content for the first slide.</p&gt;
            </div&gt;
          </div&gt;
          <div class="carousel-item"&gt;
            <img src="..." class="d-block w-100" alt="..."&gt;
            <div class="carousel-caption d-none d-md-block"&gt;
              <h5&gt;Second slide label</h5&gt;
              <p&gt;Some representative placeholder content for the second slide.</p&gt;
            </div&gt;
          </div&gt;
          <div class="carousel-item"&gt;
            <img src="..." class="d-block w-100" alt="..."&gt;
            <div class="carousel-caption d-none d-md-block"&gt;
              <h5&gt;Third slide label</h5&gt;
              <p&gt;Some representative placeholder content for the third slide.</p&gt;
            </div&gt;
          </div&gt;
        </div&gt;
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"&gt;
          <span class="carousel-control-prev-icon" aria-hidden="true"&gt;</span&gt;
          <span class="visually-hidden"&gt;Previous</span&gt;
        </button&gt;
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"&gt;
          <span class="carousel-control-next-icon" aria-hidden="true"&gt;</span&gt;
          <span class="visually-hidden"&gt;Next</span&gt;
        </button&gt;
      </div&gt;

Copy kan codingan berikut dan tempatkan tepat di bawah tag </nav>, atau ikuti panduan seperti gambar berikut.

Kemudian, siapkan 3 gambar dengan resolusi yang bagus untuk dijadikan slide pada carousel kita.

Jika sudah, ubah src pada tag img html yang kita. Arahkan src tersebut ke file gambar kita.

<div class="carousel-inner"&gt;
          <div class="carousel-item active"&gt;
            <img src="office.jpg" class="d-block w-100" alt="..."&gt;
            <div class="carousel-caption d-none d-md-block"&gt;
              <h5&gt;First slide label</h5&gt;
              <p&gt;Some representative placeholder content for the first slide.</p&gt;
            </div&gt;
          </div&gt;
          <div class="carousel-item"&gt;
            <img src="programmer.jpg" class="d-block w-100" alt="..."&gt;
            <div class="carousel-caption d-none d-md-block"&gt;
              <h5&gt;Second slide label</h5&gt;
              <p&gt;Some representative placeholder content for the second slide.</p&gt;
            </div&gt;
          </div&gt;
          <div class="carousel-item"&gt;
            <img src="study.jpg" class="d-block w-100" alt="..."&gt;
            <div class="carousel-caption d-none d-md-block"&gt;
              <h5&gt;Third slide label</h5&gt;
              <p&gt;Some representative placeholder content for the third slide.</p&gt;
            </div&gt;
          </div&gt;

Sehingga berubah menjadi seperti itu. Ingat, kita hanya mengganti src nya saja agar dapat menampilkan gambar pada carousel kita. Setelah selesai, jangan lupa save dengan menekan tombol ctrl + s dan coba kita lihat hasilnya pada browser kita.

<h1 style="text-align: center; margin-top: 100px;"&gt;Profil</h1&gt;
      <center&gt;
        <div class="card" style="width: 18rem;"&gt;
          <img src="profil.jpg" class="card-img-top" alt="..."&gt;
          <div class="card-body"&gt;
            <p class="card-text"&gt;Hai semua, selamat datang di website sederhana saya.</p&gt;
          </div&gt;
        </div&gt;
      </center&gt;

Copy sintaks diatas, dan siapkan gambar sembarang atau biasa kita sebut dengan istilah dummy. Dummy sendiri merupakan data sembarang yang bertujuan untuk megisi konten pada website kita. Maka akan menampilkan seperti berikut.

Itulah tutorial membuat website dari HTML dan Bootstrap. Terlihat sederhana tetapi setidaknya kita tahu akan penggunaan dari bootstrap ini. Karena penggunaan bootstrap ini sangat mudah, dan kita juga dapat mengcustom nya sesuai keinginan. Selamat mencoba, dan sampai bertemu di lain kesempatan. Terimakasih.

arduino indo