WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS

Ukuran: px

Mulai penontonan dengan halaman:

Download "WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS"

Sudirman Pranata
7 tahun lalu
Tontonan:

1 WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS Oleh : EMA SETYA KARISNA TI

2 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. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>sebuah file HTML Sederhana</title> 6. </head> 7. <body> 8. <h1>file HTML</h1> <p>ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser</i>.</p> <blockquote> 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 Tzu</small> 15. </blockquote> 16. </body> 17. </html>

3 Simpan file dengan nama bootstrap.html, dan buka file tersebut pada browser. Maka akan tampil seperti ini. 3. Dwonload file di 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. <link rel="stylesheet" href="css/bootstrap.css"> 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. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>sebuah file HTML Sederhana</title> <link rel="stylesheet" href="css/bootstrap.css"> 8. </head> 9. <body> 10. <div class="container"> 11. <h1>file HTML</h1> <p>ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser</i>.</p>

4 <blockquote> 16. 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. 17. <small>lao Tzu</small> 18. </blockquote> 19. </div> 20. </body> 21. </html> 6. Membuat kolom dan baris, tambahkan script dibawah ini tepat setelah </blockquote> pada bootstrap.html.dan buka kembali pada browser. 1. <div class="row"> 2. <div class="span4"> 3. <h2>kolom Pertama</h2> 4. <p>kolom pertama pada baris pertama yang memiliki lebar 4.</p> 5. </div> 6. <div class="span4"> 7. <h2>kolom Kedua</h2> 8. <p>kolom kedua pada baris pertama yang memiliki lebar 4.</p> 9. </div> 10. <div class="span4"> 11. <h2>kolom Ketiga</h2> 12. <p>kolom ketiga pada baris pertama yang memiliki lebar 4.</p> 13. </div> 14. </div> 15. <div class="row"> 16. <div class="span8"> 17. <h2>kolom Pertama</h2> 18. <p>kolom pertama baris kedua, yang memiliki lebar 8. Lorem ipsum dolor sit amet. Lorem nec dapibus egestas sit cursus. Urna dictumst?</p> </div> 21. <div class="span4">

22. <h2>kolom Kedua</h2> 23. <p>kolom kedua baris kedua, yang memiliki lebar 4.</p> 24. </div> 25. </div> 7. Membuat navigasi, menambahkan script berikut ini setelah <body> 1. <div class="navbar"> 2.

5 22. <h2>kolom Kedua</h2> 23. <p>kolom kedua baris kedua, yang memiliki lebar 4.</p> 24. </div> 25. </div> 7. Membuat navigasi, menambahkan script berikut ini setelah <body> 1. <div class="navbar"> 2. <div class="navbar-inner"> 3. <a class="brand" href="#">bootstraptest</a> 4. <ul class="nav"> 5. <li class="active"><a href="#">utama</a></li> 6. <li><a href="#">menu1</a></li> 7. <li><a href="#">menu2</a></li> 8. </ul> 9. </div> 10. </div> 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 <h1>file HTML</h1> 1. <p> 2. Contoh tombol-tombol yang disediakan oleh Bootstrap: 3. </p> 4. <p> 5. <button class="btn btn-danger">tombol Merah</button> 6. <button class="btn btn-primary">tombol Biru</button> 7. <button class="btn btn-success">tombol Hijau</button>

6 8. </p> Maka pada browser akan muncul tampilan seperti ini C. SCREEN SHOOT HASIL DARI CSS Bootswatch.com

dokumen-dokumen yang mirip

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP NURLITA nurlita.icha@gmail.com Abstrak Kali ini kita akan membahas cara membuat layout dengan container bootstrap. Bootstrap adalah suatu framework front-end yang