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

Penerapan Graf dan Logika dalam Perancangan Rangkaian Digital

  Penerapan Graf dan Logika dalam Perancangan Rangkaian Digital dengan Studi Kasus Jam Digital Advertisement dokumen-dokumen yang mirip Aljabar Boolean. IF2120 Matematika Diskrit. Oleh: Rinaldi Munir Program Studi Informatika, STEI-ITB. Rinaldi Munir - IF2120 Matematika Diskrit SISTEM DIGITAL; Analisis, Desain dan Implementasi, oleh Eko Didik Widianto Hak Cipta 2014 pada penulis GRAHA ILMU Ruko Jambusari 7A Yogyakarta 55283 PENGGUNAAN TABEL KEBENARAN DALAM MERANCANG DESAIN DIGITAL MODUL 6 PROYEK PERANCANGAN RANGKAIAN DIGITAL 2. STUDI PUSTAKA Aplikasi Aljabar Boolean dalam Komparator Digital Aljabar Boolean. Adri Priadana Aljabar Boolean. Rinaldi Munir/IF2151 Mat. Diskrit 1 Aljabar Boolean. Bahan Kuliah Matematika Diskrit Implementasi Greedy Dalam Menemukan Rangkaian Logika Minimal Menggunakan Karnaugh Map MATERI PELATIHAN VHDL UNTUK SINTESIS yang paling umum adalah dengan menspesifikasikan unsur unsur pembentuknya (Definisi 2.1 Menurut Lipschutz, Seymour & Marc Lars Lipson dala...
Posting Komentar
Baca selengkapnya