Tutorial Bootstrap: Menyisipkan Bootstrap ke HTML

Selamat datang di tutorial pertama Bootstrap. Bootstrap adalah sebuah framework CSS untuk mengatur tampilan web agar menjadi lebih bagus dan responsive. Pada tutorial pertama ini, saya akan membahas cara menyisipkan Bootstrap ke dalam HTML. Sebelum memulai, silahkan anda unduh dulu Bootstrap-nya di getbootstrap.com.

Menyisipkan Bootstrap ke Halaman Web

Mari kita membuat sebuah direktori bernama belajar-bootstrap. Kemdudian ekstrak Bootstrap yang sudah diunduh tadi ke dalam direktori tersebut. Extrak direktori bisa dilakukan dengan drag-drop.

Kemudian, ubahlah nama bootstrap-3.3.6-dist menjadi bootstrap. Perubahan nama ini bertujuan untuk memudahkan penulisan kode penyisipan bootstrap di HTML. Selanjutnya buatlah berkas HTML baru bernama hello_bootstrap.html dengan isi sebagai berikut.

<!DOCTYPE html>
<html>
<head>
    <title>Hello Bootstrap</title>
    
    <!– menyisipkan bootstrap –>
    <link rel=“stylesheet” href=“bootstrap/css/bootstrap.min.css” />
</head>

<body>

    <h1>Hello Bootstrap!</h1>
    <p>Selamat datang di tutorial framework bootstrap</p>

</body>
</html>

Setelah itu, cobalah buka file HTML yang sudah dibuat. Maka, anda akan mendapatkan tampilan seperti ini:

Tampilan seperti gambar di atas, menyatakan Bootstrap sudah berhasil di sisipkan ke halaman web atau HTML. Kode yang perlu anda perhatikan adalah:

<link rel=“stylesheet” href=“bootstrap/css/bootstrap.min.css” />

Kode tersebut berfungsi untuk membuat relasi antara file HTML dengan CSS eksternal. Atribut rel menyatakan relasinya, sedangkan href untuk menentukan alamat lokasi file-nya.

Bila anda menggunakan bootstrap yang online (CDN), maka anda harus memberikan nilai href dengan alamat URL. Contoh:

<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

Kesimpulan

Jadi, kita hanya membutuhkan satu baris kode untuk menyisipkan bootstrap ke dalam HTML. Kode itu merupakan tag <link>. Tag ini berfungsi untuk merelasikan dokumen HTML dengan dokumen yang lainnya.

Nah, sekian dulu tutorial pertama ini. Intinya, saya ingin mengajarkan cara menyisipkan Bootstrap ke dalam proyek dan HTML. Kalau ada yang belum jelas, silahkan ditanyakan melalui komentar di bawah. Sampai jumpa pada tutorial berikutnya.

BAHASA PEMOGRAMAN

Cari Blog Ini