Scribd Logo
Unggah

Selamat datang di Scribd!

  • Contoh Desain Sederhana Halaman Web Dengan Bootstrap

    Diunggah oleh

    hilman rismana
    86 tayangan6 halaman

    Judul Asli

    CONTOH DESAIN SEDERHANA HALAMAN WEB DENGAN BOOTSTRAP

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    86 tayangan6 halaman

    Contoh Desain Sederhana Halaman Web Dengan Bootstrap

    Diunggah oleh

    hilman rismana

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    CONTOH DESAIN SEDERHANA HALAMAN WEB

    DENGAN BOOTSTRAP

    1.1 Tools Yang digunakan

    1. File Bootstrap ( bisa diunduh di http://getbootstrap.com/ ).


    2. jQuery (bisa diunduh di http://jquery.com/ ) dan cara menggunakannya
    bisa lihat di http://www.ilmugrafis.com/web-jquery.php?page=cara-
    menggunakan-jquery
    3. Text Editor
    Silahkan gunakan text editor yang disukai seperti:
    - Notepad
    - Notepad++ ( https://notepad-plus-plus.org/ )
    - Sublime Text ( http://www.sublimetext.com/ )
    - Adobe Dreamweaver (versi Terserah aja)

    1.2 Cara menggunakan Bootstrap

    Pertama, download http://getbootstrap.com/ (saya menggunakan versi 3.3.4) buat


    folder (nama terserah, misal praktikum). Ekstrak zip bootstrap, copy semua folder
    (css, img, js) ke dalam folder praktikum. lalu buat file dengan nama index.html .

    Gambar 1.1 Folder Praktikum

    24
    25

    Kedua, download jQuery di http://jquery.com/download/ dan letakkan file nya di


    folder js seperti dibawah ini:

    Gambar 1. 2 Folder js

    Ketiga, isi file index.html jangan lupa untuk menambahkan !DOCTYPE di awal
    karena kita akan menggunakan HTML5

    Tambahkan seperti dibawah ini:


    26

    Penjelasan:

    1.2.1 meta name="viewport" umumnya digunakan


    untuk mengatur tampilan browser pada mobile
    device dan tablet.
    1.2.2 Pada tag content="width=device-width untuk
    mengatur lebar tampilan awal browser disesuaikan
    dengan lebar layar mobile device.
    1.2.3 Pada tag initial-scale=1.0 untuk mengatur level
    zoom dari tampilan pada saat ditampilkan. Semakin
    besar nilai scale nya semakin besar tampilannya.

    1.3 Membuat Menu Dropdwon

    Tambahkan link ke file bootstrap.css di folder css dalam tag <head> dan include
    javascript files di paling akhir dari tag <body> , jangan di atas.
    27

    Gambar 1. 3 Menu

    Kalau dikecilkan layarnya maka menjadi seperti ini:

    Gambar 1. 4 Menu Dropdown


    28

    1.4 Membuat Bagian Banner Halaman

    Tambahkan Coding berikut:

    Kemudian tambahkan css <style></style> di head

    Kemudian untuk merapikan tampilannya ubah navbar-static-top menjadi navbar-


    fixed-top

    Gambar 1. 5 Banner Halaman


    29

    1.5 Membuat Bagian Konten Halaman Web

    Untuk membuat konten halaman atau isi halaman web


    silahkan ketikkan coding berikut:

    untuk bagian Footer, silahkan ketikkan coding berikut:

    Gambar 1. 6 Hasil Akhir Halaman Web Sederhana yang Responsive

    Anda mungkin juga menyukai