Langsung ke konten utama

Tutorial Bootstrap: Menyisipkan Bootstrap ke HTML



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.
Menambahkan bootstrap ke dalam proyek
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:
Hello bootstrap
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.

Komentar

Posting Komentar

This Message

Postingan populer dari blog ini

Pemograman R Studio

  Metode Numerik Menggunakan R Pengantar Gambaran Isi Buku Cara Berkontribusi dalam Buku Ini Ucapan Terima Kasih Lisensi 1  Bahasa Pemrograman R 1.1  Sejarah R 1.2  Fitur dan Karakteristik R 1.3  Kelebihan dan Kekurangan R 1.4  RStudio 1.5  Menginstall R dan RStudio 1.6  Working Directory 1.6.1  Mengubah Lokasi Working Directory 1.6.2  Mengubah Lokasi Working Directory Default 1.7  Memasang dan Mengaktifkan Paket R 1.8  Fasilitas Help 1.8.1  Mencari Help dari Suatu Perintah Tertentu 1.8.2  General Help 1.8.3  Fasilitas Help Lainnya 1.9  Referensi 2  Kalkulasi Menggunakan R 2.1  Operator Aritmatik 2.2  Fungsi Aritmetik 2.3  Operator Relasi 2.4  Operator Logika 2.5  Memasukkan Nilai Kedalam Variabel 2.6  Tipe dan Struktur Data 2.7  Vektor 2.7.1  Membuat vektor 2.7.2  Missing Values 2.7.3  Subset Pada Vektor 2.7.4  Operasi Matematis Menggunakan Vektor ...
Posting Komentar
Baca selengkapnya

MIGRASI DATABASE DARI SQLite KE MySQL (Part-1)

  MIGRASI DATABASE DARI SQLite KE MySQL (Part-1) Pemakaian yang mana lebih baik dalam membuat database_musik di mysql atau Exel yang cell Cell pada tabel dilakukan operasi fungsi logika matematika. Untuk keperluan membuat database atau tabel yang memerlukan operasi logika atau matematika, seperti yang Anda sebutkan, MySQL jauh lebih baik dibandingkan Excel. Berikut adalah beberapa alasan mengapa MySQL lebih disarankan: 1. **Kapasitas dan Skalabilitas**: MySQL dapat menangani jumlah data yang jauh lebih besar daripada Excel. Ini penting jika Anda berencana untuk menyimpan banyak data atau melakukan operasi yang kompleks di atas data tersebut. 2. **Kekuatan dan Kinerja**: MySQL dirancang khusus untuk memproses query dan operasi basis data dengan cepat. Ini termasuk operasi matematika, logika, dan agregasi data yang umum dilakukan dalam aplikasi. 3. **Fleksibilitas Struktur**: Dalam MySQL, Anda dapat dengan mudah menentukan struktur tabel yang kompleks dan melakukan kueri yang lebih r...
Posting Komentar
Baca selengkapnya

Cara Menjadi Pengembang Front End – Keterampilan Front End Web Dev

  Menyumbangkan Belajar coding —  kurikulum 3.000 jam gratis 10 JUNI 2022 / #PENGEMBANGAN UJUNG DEPAN Bagaimana Menjadi Pengembang Front End – Keterampilan Front End Web Dev Joel Olawanle Beberapa profesional dengan bayaran tertinggi di dunia adalah pengembang front-end.  Mereka menggunakan pengetahuan dan bakat mereka untuk merancang situs web yang menarik dan ramah pengguna. Pengembang front-end tidak memerlukan gelar atau sertifikat sekolah untuk bekerja.  Sebaliknya, mereka harus memahami dasar-dasar pengembangan front-end, bahasa pemrograman, dan kerangka kerja pengembangan front-end. Dalam panduan ini, Anda akan belajar bagaimana menjadi pengembang front end dengan terlebih dahulu memahami apa yang dimaksud dengan pengembangan front end, keterampilan teknis dan soft skill yang diperlukan, bahasa dan kerangka kerja yang tersedia, dan beberapa langkah untuk memulai. Seorang pengembang front-end di Amerika Serikat dapat memperoleh rata-rata $86,178 per tahun, menu...
Posting Komentar
Baca selengkapnya