WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS

Oleh : EMA SETYA KARISNA TI. 12141391

A. PENGERTIAN FRAMEWORK CSS Bootswatch.com Bootswatch merupakan penyedia tema berbagai macam bootstrap dengan berbagai warna yang menarik. Ada banyak tema yang dapat di gunakan dan dapat diunduh secara gratis. Sedangkan framework css bootstrap sendiri merupakam sebuah framework CSS dari twitter, yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.

B. LANGKAH PENGGUNAAN FRAMEWORK YANG DISEDIAKAN OLEH Bootswatch.com 1. Sebagai contoh saya menggambil 1 dari banyak tema bootstrap yang disediakan oleh bootswatch , 2. Pertama buat sebuah file HTML sederhana sebagai berikut,

1. 2. 3. 4. <meta charset="UTF-8"> 5. 6. 7. 8.

File HTML

9. 10.

Ini adalah sebuah file HTML sederhana,

yang dapat

dibuka langsung melalui browser.

11. 12. 13.

Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.

14. <small>Lao 15.

16. 17.

Tzu

Simpan file dengan nama bootstrap.html, dan buka file tersebut pada browser. Maka akan tampil seperti ini.

3. Dwonload file di http://twitter.github.io/bootstrap/ dan ekstrak file bootstrap ditempat yang sama dengan file htmlnya. 4. Masukan bootstrap ke dalam file bootstrap.html, dengan cara menambahkan kode berikut sebelum baris ke 6.

Maka akan tampil seperti ini,

5. Membuat penampung utama yang berisikan keseluruhan konten website, dengan cara membungkusnya menggunakan div dan atribut class bernilai container, sehingga tampilan file html berubah menjadi seperti ini. Kemudian buka pada browser.

1. 2. 3. 4. <meta charset="UTF-8"> 5. 6. 7. 8. 9. 10. 20. 21.

Tzu

6. Membuat kolom dan baris , tambahkan script dibawah ini tepat setelah

pada bootstrap.html.dan buka kembali pada browser. 1. 2. 3. 4. 5. 6. 7. 8.

15.

kedua, yang memiliki lebar 4.

7. Membuat navigasi, menambahkan script berikut ini setelah

1. Maka tampilan pada browser akan berubah seperti ini

8. Membuat tombol, dengan cara memberikan class yang

tepat pada elemen button.tambahkan kode berikut tepat setelah

File HTML

1. 2. 3. 4. 5. 6. 7.

Contoh tombol-tombol yang disediakan oleh Bootstrap:

Tombol Merah Tombol Biru Tombol Hijau

8.

Maka pada browser akan muncul tampilan seperti ini

C. SCREEN SHOOT HASIL DARI CSS Bootswatch.com