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

PEMAKAIAN FONT FONT KHUSUS UNTUK SIMBOL SIMBOL NOTASI ANGKA LAGU

  PEMAKAIAN FONT FONT KHUSUS UNTUK SIMBOL SIMBOL NOTASI ANGKA LAGU Bagaimana kalau di dalam applikasi pertitur notasi angka dibuatkan sistem teks dengan memakai font parnumstion untuk membuat simbol simbol pada notasi angka lagu Menggunakan font khusus seperti **Parnumstion** untuk membuat simbol-simbol pada notasi angka dalam aplikasi pertitur dapat menjadi solusi yang elegan untuk menampilkan simbol notasi secara visual menarik dan konsisten. Berikut adalah langkah-langkah umum yang dapat kamu lakukan untuk mengimplementasikan sistem teks dengan font ini dalam aplikasi Python, khususnya jika kamu menggunakan tkinter: ### Langkah-langkah Implementasi: 1. **Pastikan Font Tersedia:**    - Unduh dan instal font **Parnumstion** pada sistem yang akan menjalankan aplikasi. Font ini harus diinstal agar bisa digunakan oleh aplikasi tkinter.    - Kamu dapat menempatkan file font (biasanya dengan ekstensi `.ttf`) di folder aplikasi atau menginstalnya secara manual di sis...
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