Modul Desain Website
Diunggah oleh
Marvel RonaldoModul Desain Website
Diunggah oleh
Marvel RonaldoLaboratorium Komputer Institut Bisnis dan Informatika Stikom Surabaya
MODUL PRAKTIKUM DESAIN dan PEMROGRAMAN
WEBSITE
Pengenalan HTML , CSS dan Bootstrap
PROGRAM STUDI D3 Sistem Informasi
Rachmad Tulus S
0
DAFTAR ISI
BAB I HTML BASIC 1
Waktu Pelaksanaan : 1 x 170 menit 1
1.1 HTML DOCUMENT STRUCTURE 1
1.1.1 HEADING 2
1.1.2 PARAGRAF 2
1.1.3 FONT 4
Latihan 7
BAB II HTML ADVANCE 8
Waktu Pelaksanaan : 1 x 170 menit 8
2.1 Tag HyperLink 8
2.2 Tag IMAGE 9
2.3 Animasi Text dengan tag MARQUEE 10
Latihan 12
BAB III HTML ADVANCE (LANJUTAN) 13
Waktu Pelaksanaan : 1 x 170 menit 13
3.3 LIST 13
3.1.1 ORDERED LIST 13
3.1.2 UNORDERED LIST 14
3.2 TABEL 15
Latihan 20
BAB IV HTML ADVANCE (FORM dan InLine CSS) 21
Waktu Pelaksanaan : 1 x 170 menit 21
4.1 FORM 22
4.1.1 TEXT BOX 22
4.1.2 CHECKBOX 23
4.1.3 RADIO BUTTON 25
4.1.4 SUBMIT dan RESET 26
Page | 1
4.2 Inline Cascading Style Sheet 28
Latihan 30
BAB V HTML (INTERNAL CSS) 31
Waktu Pelaksanaan : 1 x 170 menit 31
Latihan 34
BAB VI HTML (EXTERNAL CSS) 35
Waktu Pelaksanaan : 1 x 170 menit 35
LATIHAN 38
BAB VII GRID SYSTEM LAYOUT 39
Latihan 45
BAB VIII KOMPONEN BOOTSTRAP 46
A. DROPDOWN 46
B. BUTTON GROUPS 47
C. BUTTON DROPDOWN 49
D. NAVS DAN NAVBAR 50
E. BREADCRUMBS 55
F. PAGINATION 55
G. LABEL DAN BADGES 57
H. THUMBNAILS ALERT 58
I. PROGRESS BAR 59
J. MEDIA OBJECT DAN MISC 60
Latihan 63
BAB IX Komponen Web Interaktif Responsif 64
9. Modal 64
9.1 Membuat Modals tanpa JavaScript (Data Attributes) 66
9.2 Modals memanfaatkan grid system bootstrap 68
Latihan 70
BAB X Komponen Web Interaktif Responsif Lanjutan 71
10. Tooltips 71
10.1 Mengatur Arah Tooltips 73
10.2 Pemosisian Tooltips melalui JavaScript 74
10.3 Metode Tooltips 77
Page | 2
Latihan 82
BAB XI Komponen Web Interaktif Responsif Lanjutan 83
11. CAROUSEL 83
Latihan 92
DAFTAR PUSTAKA 93
Page | 3
BAB I HTML BASIC
Waktu Pelaksanaan : 1 x 170 menit
Sebelum
Sebelummengawali
mengawalimateri
materiI I pada
pada praktikum pemrograman desain
praktikum pemrograman desain website,
website,terlebih
terlebihdahulu
dahulu
jawablah
jawablahbeberapa
beberapapertanyaan
pertanyaandibawah
dibawahiniinisebagai
sebagaipengenalan
pengenalandan
danpersiapan
persiapanpraktikum
praktikum
Soal
SoalPre-Test
Pre-Test(Tulis
(TulisTangan)
Tangan)
1.1.Jelaskan perbedaan
Jelaskan perbedaanantara
antarainternet
internetdengan
denganintranet?(berikan contohnya)
intranet?(berikan contohnya)
2.2.Jelaskan apa
Jelaskan apayang kamu
yang ketahui
kamu ketahuitentang
tentangwebsite
websitedan
danweb
webserver?(berikan
server?(berikancontohnya)
contohnya)
3.3.Jelaskan apa
Jelaskan apayang kamu
yang ketahui
kamu ketahuitentang
tentangISP?(berikan
ISP?(berikancontohnya)
contohnya)
4.4.Jelaskan pengertian
Jelaskan pengertiandari
daridomain,
domain,hosting,
hosting,download,
download,dan
danupload?
upload?
5.5.Jelaskan perbedaan
Jelaskan perbedaanantara
antaraSign-In
Sign-Indan
danLog-In?
Log-In?
6.6.Analogikan
Analogikanbagaimana
bagaimanawebsite
websitebekerja!
bekerja!
1.1 HTML DOCUMENT STRUCTURE
Hypertext Markup Languange atau yang biasa disingkat HTML merupakan salah satu bahasa
pemrograman yang digunakan untuk membuat tampilan halaman website. Untuk peng-coding-annya,
bahasa pemrograman HTML menggunakan apa yang disebut sebagai tag. Penulisan tag menggunakan
tanda aritmatika kurang dari dan lebih dari secara bersamaan (<[tag html disini]>). Simbol ini juga
dipakai di beberapa bahasa pemrograman untuk menggambarkan pertidaksamaan pada proses
percabangan atau pengkondisian. Selain itu, penulisan kode perintah atau tag html bersifat tidak case
sensitive sehingga besar kecil kata atau huruf tidak mempengaruhi hasil dari peng-coding-an website.
Dalam HTML sederhana terdiri dari dua bagian yang diantaranya adalah bagian Header dan
Body. Dan untuk memulai peng-coding-an html, terlebih dahulu menuliskan tag <html> diawal baris dan
diakhiri dengan tag </html> sebagai standar penulisan pemrograman web menggunakan HTML. Adapun
contoh penulisannya dapat dilihat dibawah ini.
<html>
<head>
<title>Judul Halaman Website yang muncul di tab address</title>
</head>
<body>
Workspace menuliskan tag – tag html yang lain
</body>
</html>
Page | 4
Tag diatas menjelaskan bahwa website terbagi menjadi beberapa bagian yaitu pada tag <head> yang
digunakan untuk meng-konfigurasi dibagian title bar atau tab address browser. Selain itu didalam tag
<head> dimungkinkan untuk menempatkan bahasa pemrograman web yang lain diantaranya Javascript,
PHP, dan CSS yang bertujuan untuk mengoptimasi tampilan atau kinerja dari website itu sendiri.
Sedangkan didalam tag <body> digunakan untuk meng-konfigurasi konten dari website. Di tag <body>
ini pun dimungkinkan untuk menempatkan bahasa pemrogaraman web yang lain sama seperti pada tag
<head> dengan tujuan yang sama.
Didalam tag <body>, perlu ditambahkan tag-tag html yang lain agar tampilan website menarik
ataupun sesuai dengan kebutuhan user. Beberapa tag html sederhana yang sering digunakan untuk
membuat tampilan website akan kita bahas dibawah ini
1.1.1 HEADING
<Heading> adalah sebuah tag yang digunakan untuk membuat judul atau subjudul didalam
konten atau halaman website. Tag <heading> berbeda dengan tag <title> meskipun secara fungsi sama
sama menampilkan judul akan tetapi perbedaannya hanya pada letak penulisan dan hasil pada tampilan
website. Tag <heading > sendiri memiliki level penulisan yang ditandai dengan angka mulai 1 sampai 6.
Level ini menentukan besar kecilnya font yang digunakan dan bergantung pada peruntukannya, apakah
digunakan sebagai judul utama atau hanya sebagai subjudul. Cara menuliskan tag <heading> dapat kita
lihat dibawah ini.
<html>
<head>
<title>belajar penulisan tag HEADING</title>
</head>
<body>
<h1>HEADING level 1</h1>
<h2>HEADING level 1</h2>
<h3>HEADING level 1</h3>
<h4>HEADING level 1</h4>
<h5>HEADING level 1</h5>
<h6>HEADING level 1</h6>
</body>
</html>
1.1.2 PARAGRAF
Untuk membuat paragraf dalam halaman website, kita menggunakan tag <p>. Pada
penggunaannya, sebelum kita menuliskan paragraf yang kita inginkan,ketikkan <p> didepan huruf
pertama awal paragraf dan diakhiri dengan </p> pada akhir huruf terakhir sebuah paragraf. Dan untuk
mengatur tata letak paragraf, tag <p> memiliki atribut yang disebut align yang digunakan untuk
mengatur rata kiri, kanan, dan tengah. Adapun penulisan atribut disambungkan dengan tag utama
dipisah dengan spasi. Contoh penulisan tag <p> adalah sebagai berikut.
Page | 5
<html>
<head>
<title>belajar Paragraf</title>
</head>
<body>
<p>Hypertext Markup Languange atau yang biasa disingkat HTML merupakan salah satu bahasa
pemrograman yang digunakan untuk membuat tampilan halaman website. Untuk peng-coding-
annya, bahasa pemrograman HTML menggunakan apa yang disebut sebagai tag. Penulisan tag
menggunakan tanda aritmatika kurang dari dan lebih dari secara bersamaan (<[tag html
disini]>).</p>
//tag html paragraf menggunakan atribut
Tag utama atribut
<p align="right">Hypertext Markup Languange atau yang biasa disingkat HTML merupakan
salah satu bahasa pemrograman yang digunakan untuk membuat tampilan halaman website.
Untuk peng-coding-annya, bahasa pemrograman HTML menggunakan apa yang disebut sebagai
tag. Penulisan tag menggunakan tanda aritmatika kurang dari dan lebih dari secara
bersamaan (<[tag html disini]>). </p>
</body>
</html>
Pada dasarnya tag <p> memiliki atribut align default yaitu rata kiri atau align=”left” sehingga apabila
saat ingin merubah atau mengatur letak paragraf dengan rata kiri maka cukup menuliskan tag utamanya
saja yaitu tag <p>. Perlakuan berbeda apabila ingin mengatur letak paragraf atau alignment-nya ingin
dirubah menjadi justified maka diperlukan Cascading Style Sheet (CSS) yang akan dibahas pada bab yang
lain dalam modul ini.
Page | 6
1.1.3 FONT
Tag <font> digunakan untuk mengatur atau memodifikasi tampilan huruf dalam HTML. Dalam
tag <font> memiliki beberapa atribut yang melengkapi agar tag <font> dapat bekerja secara optimal
dalam HTML yang diantaranya adalah
1.1.3.1 FONT SIZE
Atribut size digunakan untuk mengatur besar kecilnya huruf. Value yang digunakan untuk
menggambarkan besar kecilnya huruf mulai dari angka 1 untuk yang terkecil dan angka 7 untuk
mengatur size huruf untuk yang terbesar. Untuk lebih jelasnya, dapat dilihat contoh penerapan tag
<font> beserta atributnya seperti dibawah ini
<html>
<head>
<title>belajar font size</title>
</head>
<body>
<font size=1>font size 1 hasilnya seperti ukuran font 6 dalam ms office</font>
<font size=2>font size 2 hasilnya seperti ukuran font 7 dalam ms office </font>
<font size=3>font size 3 hasilnya seperti ukuran font 8 dalam ms office </font>
<font size=4>font size 4 hasilnya seperti ukuran font 10 dalam ms office </font>
<font size=5>font size 5 hasilnya seperti ukuran font 14 dalam ms office </font>
<font size=6>font size 6 hasilnya seperti ukuran font 18 dalam ms office </font>
<font size=7>font size 7 hasilnya seperti ukuran font 24 dalam ms office </font>
</body>
</html>
1.1.3.2 FONT FACE
Atribut ini digunakan untuk mengatur jenis font yang dibutuhkan dalam pemrograman HTML.
Jenis font yang dikenali HTML sebatas apa yang dikenal pada umumnya oleh aplikasi MS Office sehingga
apabila menggunakan jenis font yang diluar apa yang dikenali MS Office, maka terlebih dulu di-install
didalam komputernya. Atribut face pada saat digunakan dalam pemrograman website harus memakai
tanda petik dua (“ “). Adapun contohnya sebagai berikut
<html>
<head> <title>belajar font face</title> </head>
<body>
<font face=”Arial”> jenis font yang dipakai adalah Arial </font>
<font size=”Calibri”> jenis font yang dipakai adalah Calibri </font>
</body>
</html>
Page | 7
1.1.3.3 FONT COLOR
Atribut dari tag <font> yang satu ini digunakan untuk mengatur warna pada tulisan atau huruf
dalam pemrograman HTML. Ada dua cara dalam menuliskan atribut color dalam tag <font>,yang
pertama adalah langsung menuliskan warna tersebut dalam bahasa inggris seperti RED, GREEN, BLUE.
Kelemahan dari cara ini adalah HTML hanya mengenali warna dasar dalam komposisi warna, jika
menggunakan warna Cyan Magenta Yellow Key (CMYK) maka warna tersebut dalam beberapa
browser tidak dapat mengenali. Untuk cara yang kedua, kita menuliskan warna dengan menggunakan
bilangan hexadecimal mulai dari 0 – 9 dan bilangan ke 10 diganti abjad A sampai F (nilai maksimal)
walaupun secara standar tetap menggunakan warna dasar yaitu RED, GREEN, BLUE dengan komposisi
sebagai berikut
RR GG BB
#000000.
Contoh : #FF0000 untuk warna merah (RR), #00FF00 untuk hijau (green), #0000FF untuk biru (blue)
sehingga apabila kita menggunakan warna Cyan Magenta Yellow Key (CMYK) maka cukup meng-
kombinasi-kan bilangan tersebut dengan warna yang diinginkan cenderung dominan warna dasar yang
mana.
<html>
<head> <title>belajar font color</title> </head>
<body>
<font color=”Red”> warna font yang dipakai adalah RED </font>
<font color=”#0000FF”> warna font yang dipakai adalah BLUE </font>
</body>
</html>
1.1.3.4 TAG HTML
Tag html yang biasa digunakan untuk men-support tag paragraf maupun font yang bertujuan
untuk meng-optimasi tampilan tulisan dalam halaman website diantaranya adalah :
<b>teks</b> digunakan untuk menebalkan huruf, kata, ataupun kalimat.
<i>teks</i> digunakan untuk memiringkan huruf, kata, ataupun kalimat.
<u>teks</u> digunakan untuk menggarisbawahi huruf, kata, ataupun kalimat.
<sub>teks</sub> subscript yang fungsinya digunakan untuk menaruh angka atau huruf dibawah
dari angka atau huruf depannya cth : penulisan O2 menjadi O 2
<sup>teks</sup> superscript yang fungsinya digunakan untuk perpangkatan
<acronym>teks</acronym> sebuah tool tips berisi informasi terhadap tulisan yang di highlight
sehingga saat mouse diarahkan ke tulisan tersebut akan muncul info yang di-set sebelumnya.
Page | 8
Cth : <acronym title =”Hypertext Markup
Language”>HTML</acronym>
Hasil output :
<hr> digunakan untuk memberikan garis horizontal
<br> digunakan untuk membuat baris baru
<center>teks</center> digunakan untuk men-set rata tengah
1.1.3.5 SPECIAL CHARACTER
HTML Code Hasil HTML Code Hasil
© © » >>
® ® Spasi
&Trade; ™ & &
¢ ₵ < <
&Deg; ⁰ > >
« << ± ±
Page | 9
Latihan
1. buatlah sebuah tampilan website seperti dibawah ini
Ketentuan :
Pergunakan tag font beserta atributnya untuk menyelesaikan tugas diatas
Page | 10
BAB II HTML ADVANCE
Waktu Pelaksanaan : 1 x 170 menit
Setelah mempelajari dan memahami
Setelah mempelajari materi pada
dan memahami bab
materi I, maka
pada bab I,kita
makaakan
kitamelanjutkan ke materi
akan melanjutkan ke
selanjutnya
materi selanjutnya tentang HTML Basic. Kita akan mempelajari tentang bagaimana memasukkan
image, hyperlink, dan animasi teks. Sebelum masuk kedalam pembahasan materi, terlebih dahulu
jawablah pertanyaan – pertanyaan dibawah ini untuk me-refresh ingatan terhadap materi pada bab
I.
Soal Pre-Test (Tulis Tangan)
1. Jelaskan definisi HTML!
2. Tuliskan tag untuk membuat paragraf dengan judul daily activity masing-masing beserta atributnya
baik rata kiri, tengah, kanan dan buatlah font dari masing-masing paragraf tersebut dengan
ukuran, warna, dan jenis font yang berbeda-beda di situs web!
2.1 Tag HyperLink
Dalam tampilan website seperti yang kita ketahui pada umumnya, dapat ditemukan sebuah atau
beberapa tulisan berwarna biru dan digarisbawahi dimana pada saat di klik akan merujuk ke halaman
yang sudah ditetapkan oleh developer website. Hal itu yang disebut sebagai hyperlink dalam
pemrograman desain website. Adapun penulisan tag nya menggunakan huruf A atau Anchor. Dalam
penggunaannya, tag <a> atau anchor dapat ditambahkan atribut-atribut yang fungsi dan kegunaannya
berbeda pula. Seperti atribut NAME pada tag <a> digunakan pada satu halaman yang sama yang
berfungsi sebagai page up dan page down dan HREF untuk merujuk ke halaman tertentu apabila
memiliki halaman web lebih dari 1 halaman website. Adapun implementasinya seperti contoh dibawah
ini.
Page | 11
<html>
<head>
<title>belajar hyperlink</title>
</head>
<body>
<a name=”atas”>Jurusan di STIKOM Surabaya</a>
<p>S1 Sistem Informasi <a href=”#s1si”>more info</a></p>
<p>S1 Sistem Komputer </p>
<p>S1 Desain Komunikasi Visual</p>
<p>D3 Sistem Informasi</p>
<p><a name=”s1si”>S1 Sistem Informasi</a> merupakan Jurusan Favorit di Institut Bisnis dan
Informatika STIKOM Surabaya<br>Program Studi ini menghasilkan lulusan yang kompeten dibidang
analis sistem dan programming baik database programming maupun native programming yang
lain.<br>Jangan ragu untuk masuk ke STIKOM Surabaya.</p><br></br>
<p><a href=”#atas”>kembali ke atas</a></p>
</body>
</html>
Pada contoh diatas dapat dilihat bahwa fungsi atribut href masih digunakan pada satu halaman
website. Misalkan apabila ingin merujuk atau link ke halaman web yang lain hanya cukup mengganti <a
href=”#atas”> menjadi <a href=”halaman2.html”> dimana halaman2.html merupakan nama file yang
ingin dirujuk oleh halaman 1 dari website.
2.2 Tag IMAGE
Dalam pembuatan website, salah cara untuk menarik pengunjung untuk melihat website adalah
dengan menambahkan image. Di HTML dimungkinkan untuk menambahkan hal tersebut menggunakan
tag <img> dengan format file yang sering dipakai adalah *.jpg/*.jpeg dan *.gif. Untuk penulisan tag
<img> didalam HTML adalah <img src=”namagambar.jpg” alt=”[keterangan saat menunggu load
gambar]”>. Src adalah atribut dari tag <img> yang digunakan untuk menentukan path tempat image
yang ingin ditampilkan.
Pada saat menggunakan tag <img> ada dua cara agar file gambar dapat dilihat di tampilan web.
Cara yang pertama adalah pastikan bahwa nama file gambar dan ekstensinya sudah sesuai dan taruhlah
file tersebut dalam satu folder dengan file html. Dan cara yang kedua adalah menuliskan path directory-
nya file image yang tersimpan, misalkan <img src=”[C:\Users\Public\Pictures\Sample
Pictures\Desert.jpg]”>. Berikut adalah contoh penerapan tag <img> dalam HTML.
Page | 12
<html>
<head> <title>belajar font color</title> </head>
<body>
<img src=”C:\Users\Public\Pictures\Sample Pictures\Desert.jpg” alt=”pemandangan gurun”>
</body>
</html>
2.3 Animasi Text dengan tag MARQUEE
Tag HTML <marquee> merupakan salah satu tag dalam HTML yang digunakan untuk
menampilkan tulisan animasi berjalan atau running text. Seperti yang diketahui bahwa tag <marquee>
memiliki banyak atribut yang memiliki fungsi masing – masing diantaranya atribut bgcolor digunakan
untuk menentukan warna background dari teks animasi. Behavior di set alternate digunakan untuk teks
animasi bounce (memantul). Direction diset right berarti mulainya teks animasi dari kanan. Loop
digunakan sebagai perulangan berapa kali teks animasi itu bergerak. Scrollamount digunakan untuk
kecepatan teks animasi,bisa ditentukan sesuai keinginan.
<html>
<head><title>belajar marquee</title></head>
<body>
<p align=”center”>
<marquee bgcolor=”yellow”
behavior=”alternate”
direction=”right”
loop=”5”
scrollamount=”10”
scrolldelay=”40”
width=”50%”>
Selamat datang di website STIKOM Surabaya</marquee></p>
</body>
</html>
Dari contoh diatas dapat dijabarkan bahwa tag html marquee akan menjalankan teks animasi
berjalan dengan arah berjalan kiri ke kanan dan menampilkan tulisan yang memantul (bounce) dengan
delay waktu 40 serta melakukan perulangan (looping) sebanyak 5 kali. Adapun outputnya seperti
dibawah ini.
Page | 13
Gambar 2.1 Contoh penggunaan teks marquee
Page | 14
Latihan
Buatlah tampilan halaman website seperti dibawah ini
Ketentuan :
Buatlah link ke halaman web yang lain diantaranya :
1. starwars.html
2. justiceleague.html
3.thor.html
Yang berisi sinopsis atau review dari masing – masing film tersebut dimana di tiap – tiap halaman
terdapat gambar dari film yang direview dengan rata tengah.
Contoh halaman sinopsis
#Link yang dapat membuka dihalaman yang baru tanpa menggunakan klik kanan akan menjadi nilai plus
Page | 15
BAB III HTML ADVANCE (LANJUTAN)
Waktu Pelaksanaan : 1 x 170 menit
Setelah
Setelah mempelajari
mempelajari dandan memahami
memahami materi
materi pada
pada babbab
II, II,
maka maka kita
kita akan
akan melanjutkan
melanjutkan kekemateri
materi
selanjutnyatentang
selanjutnya tentangHTML
HTMLAdvance.
Advance.KitaKitaakan
akanmempelajari
mempelajaritentang
tentangbagaimana
bagaimanamembuat
membuattabel tabeldan
dan
listlistdalam
dalamhalaman
halamanwebsite.
website.Sebelum
Sebelummasuk
masukkedalam
kedalampembahasan
pembahasanmateri,materi,terlebih
terlebihdahulu
dahulujawablah
jawablah
pertanyaan
pertanyaan – –pertanyaan
pertanyaan dibawah
dibawah iniini untuk
untuk me-refresh
me-refresh ingatan
ingatan terhadap
terhadap materi
materi pada
pada bab
bab II.II.
Soal Pre-Test (Tulis Tangan)
1. Jelaskan fungsi hyperlink beserta atributnya dalam HTML
2. Buatlah halaman website tentang tokoh yang menjadi inspirasimu yang kontennya berisi :
- image tokoh dan biodata serta apa yang membuatmu menjadikan tokoh tersebut menjadi
inspirasi
- atur letak image tersebut beserta kalimatnya menggunakan rata kiri, tengah, dan kanan dengan
pembatas garis lurus
3.3 LIST
HTML menyediakan cara - cara untuk membuat sebuah list, antara lain :
- Ordered List
- Unordered List
- Description List
- dll
Seperti yang disebutkan sebelumnya, untuk bab ini hanya membahas tentang tag HTML yang
sering digunakan dalam pembuatan website yaitu bagaimana membuat list dalam bentuk ordered dan
unordered list.
3.1.1 ORDERED LIST
Ordered list biasa digunakan untuk membuat list dimana setiap bagian memiliki urutan
angka, huruf, ataupun romawi. Ordered list dimulai dengan tag <ol> dan diakhiri dengan tag </ol>.untuk
bagian listnya menggunakan tag <li> dimana tag ini dapat ditutup menggunakan tag </li> ataupun tidak
perlu menggunakan tag penutup. Saat menggunakan ordered list, secara default atau otomatis website
akan meng-konversi urutan berdasarkan angka sehingga tidak diperlukan mendefinisikan urutannya
seperti contoh dibawah ini
Page | 16
<html>
<head><title>Belajar Ordered dan UnOrdered List</title></head>
<body>
<h1 align=”center”>Daftar Program Studi di Institut Bisnis dan Informatika STIKOM Sby</h1>
<ol>
<li>S1 Sistem Informasi
<li>S1 Sistem Komputer
<li>S1 DKV</li>
<li>S1 Akuntansi</li>
<li>D3 Sistem Informasi</li>
</ol>
</body>
</html>
Apabila saat membuat list dalam HTML dirasa tidak menginginkan dalam bentuk urutan angka maka
urutan tersebut dapat diganti dengan menambahkan atribut type pada tag <ol> pada saat pembuatan
halaman website. Selain atribut type, tag <ol> mempunyai atribut yang lain yakni start yang fungsinya
digunakan untuk mengawali list dari index yang ke-. Untuk lebih jelasnya lihat tabel dibawah ini
Atribut Fungsi
Type=”” Untuk mengurutkan berdasar angka, huruf (besar/kecil), romawi
Start=”[angka]” Untuk memulai list dari index ke – [angka]
3.1.2 UNORDERED LIST
Selain pembuatan list dengan Ordered List dalam HTML, dapat juga menggunakan cara
Unordered List. Unordered list ini merupakan cara membuat list tanpa menggunakan urutan angka,
huruf, maupun romawi dan menggantinya dengan simbol dot (titik penuh), lingkaran, maupun kotak.
Adapun tag untuk membuat unordered list adalah menggunakan tag <ul>. Adapun contoh penerapan
dalam HTML adalah sebagai berikut
Page | 17
<html>
<head><title>Belajar Ordered dan UnOrdered List</title></head>
<body>
<h1 align=”center”>Daftar Program Studi di Institut Bisnis dan Informatika STIKOM Sby</h1>
<ul>
<li>S1 Sistem Informasi
<li>S1 Sistem Komputer
<li>S1 DKV</li>
<li>S1 Akuntansi</li>
<li>D3 Sistem Informasi</li>
</ul>
</body>
</html>
Seperti yang diketahui bahwa tag <ul> inipun memiliki atribut yang sama seperti tag <ol> yaitu type,
tetapi perbedaannya adalah type pada tag <ul> digunakan untuk mengatur bulleting item pada list
menggunakan dot (titik penuh) atau lingkaran atau kotak penuh. Berikut tabel type tag <ul> untuk
menjelaskan secara detail tentang atribut ini
Atribut Fungsi
type=”circle” Tanda lingkaran
type=”disk” Tanda titik penuh (dot)
type=”square” Tanda kotak
3.2 TABEL
Tabel ini banyak digunakan karena bisa menampilkan informasi dalam bentuk yang ringkas dan
mudah dibaca. Dalam penerapan dalam HTML menggunakan tag <table> dan diakhiri dengan tutupan
tag </table>. Tag <table> memiliki beberapa bagian penting diantaranya :
<caption>[judul tabel]</caption>
Page | 18
Digunakan untuk membuat judul tabel yang diletakkan diluar struktur tabel baik diatas maupun
dibawah tabel.
Page | 19
<th>[judul kolom dalam tabel]</th>
Digunakan untuk membuat judul kolom dalam tabel dan secara otomatis akan dicetak tebal.
<tr>[baris dalam tabel]</tr>
Digunakan untuk menentukan baris dalam tabel.
<td>[isi data atau kolom dalam tabel]</td>
Digunakan untuk mengisi data didalam tabel. Selain itu juga berfungsi membuat kolom dalam tabel
tergantung berapa kali tag ini digunakan.
Untuk lebih jelasnya dapat dilihat dari contoh dibawah ini.
<html>
<head>
<html>
<title>belajar
<head> tabel dalam HTML</title>
</head> <title>belajar tabel dalam HTML</title>
<body>
</head>
<table>
<body>
<caption>Program
<table> Studi STIKOM Surabaya</caption>
<tr> <caption>Program Studi STIKOM Surabaya</caption>
<tr>Program Studi</th>
<th>Nama
<th>Nama Program Studi</th>
<th>Deskripsi</th>
</tr> <th>Deskripsi</th>
<tr> </tr>
<td>S1<tr>
Sistem Informasi</td>
<td>S1iniSistem
<td>Program Studi Informasi</td>
menciptakan lulusan yang handal dalam pemrograman dan analisa
sistem</td> <td>Program Studi ini menciptakan lulusan yang handal dalam pemrograman
dan analisa sistem</td>
</tr>
</tr>
<tr>
<tr>
<td>S1 Sistem Komputer</td>
<td>S1 Sistem Komputer</td>
<td>Program Studi ini menciptakan lulusan yang handal dalam jaringan komputer dan rekayasa
<td>Program Studi ini menciptakan lulusan yang handal dalam jaringan
komputer dan
elektronika rekayasa elektronika robotika</td>
robotika</td>
</tr> </tr>
</table> </table>
</body>
</body>
</html>
</html>
Page | 20
Selain hal diatas, tag <table> juga mempunyai beberapa atribut seperti width (lebar), height
(tinggi), align (letak), colspan, rowspan, dan lain lain. Fungsinya adalah untuk mengatur tampilan tabel
itu mulai dari lebar, tinggi, tata letak kalimat sehingga dapat menjadi informative dan juga memenuhi
secara estetika dalam tampilan website. Dan yang sangat penting adalah atribut colspan dikarenakan
atribut ini digunakan untuk melakukan merge cell dari banyak kolom menjadi satu kolom. Dan rowspan
digunakan untuk melakukan merge cell dari banyak baris menjadi satu baris. Berikut cara menuliskan di
HTML.
<html>
<head>
<html>
<title>belajar
<head> HTML</title>
</head> <title>belajar HTML</title>
</head>
<body>
<table<body>
border="3" align=center>
<table border="3"
<caption>COLSPAN align=center>
dan ROWSPAN</caption>
<tr> <caption>COLSPAN dan ROWSPAN</caption>
<tr>
<td rowspan="2">
<td rowspan="2">baris
baris 1, kolom 1<p>baris 2, kolom 1</td>1, kolom 1<p>baris 2, kolom 1</td>
<td>baris
<td>baris 1, kolom 2</td> 1, kolom 2</td>
</tr> </tr>
<tr>
<tr>
<td>baris 2, kolom 2</td>
<td>baris 2, kolom 2</td>
</tr>
</tr>
<tr>
<tr>
<td colspan="2">baris 3, kolom 1<p>baris 3 kolom 2</td>
<td colspan="2">baris 3, kolom 1<p>baris 3 kolom 2</td>
</tr>
</tr>
</table>
</table>
</body>
</body>
</html>
</html>
Page | 21
Gambar 3.1 hasil tag HTML table dengan rowspan dan colspan
Dan ada beberapa atribut yang lain yang dimiliki oleh tag <table> lain yang dapat dipelajari di
berbagai tutorial yang ada baik offline maupun online diantaranya atribut color, background,
cellspacing, cellpadding.
Page | 22
Latihan
Buatlah tampilan website seperti dibawah ini
1.
2.
Ketentuan :
Pergunakan tag HTML table beserta atributnya untuk mengerjakan soal – soal diatas
Page | 23
BAB IV HTML ADVANCE (FORM dan InLine CSS)
Waktu Pelaksanaan : 1 x 170 menit
Setelah mempelajari
Setelah dan memahami
mempelajari dan memahami materimateri
pada bab
padaIII, maka
bab kita akan
III, maka kita melanjutkan ke materi
akan melanjutkan ke
selanjutnya tentang HTML Form dan Cascading Style Sheet (CSS). Kita akan mempelajari
materi selanjutnya tentang HTML Form dan Cascading Style Sheet (CSS). Kita akan mempelajari tentang
bagaimana membuatmembuat
tentang bagaimana form danformInline CSS CSS
dan Inline dalam
dalam halaman
halamanwebsite.
website. Sebelum masukkedalam
Sebelum masuk kedalam
pembahasan
pembahasanmateri,
materi,terlebih dahulu
terlebih dahulujawablah
jawablahpertanyaan
pertanyaan– pertanyaan
– pertanyaandibawah ini untuk
dibawah me-refresh
ini untuk me-
ingatan
refreshterhadap materi pada
ingatan terhadap babpada
materi III. bab III.
Soal
SoalPre-Test
Pre-Test
1. Buatlah tampilan website seperti dibawah ini
1. Buatlah tampilan website seperti dibawah ini
Ketentuan
Ketentuan: :
1.1.terdapat
terdapatlink
linkmenuju
menuju halaman
halaman lain
lain dan open in
dan open in new
new tab,
tab,yang
yangmenceritakan
menceritakansynopsis
synopsisdari
darigambar
gambar
tersebut
tersebut
Page | 24
4.1 FORM
Tidak sedikit website yang ada saat ini menyertakan satu fitur yang disebut sebagai guest book
untuk pengunjungnya. Didalam fitur tersebut secara sederhana terdapat isian atau input box dan
tombol untuk prosesnya sehingga dapat diolah sedemikian rupa oleh admin website ataupun
developernya. Isian atau input box dan tombol tersebut merupakan komponen form dalam website
yang akan dibahas pada materi berikut ini. Penulisan standar tag <form> dalam pemrograman HTML
adalah sebagai berikut.
<form method=”[POST | GET]” action=”[URL link-nya]”>
<form method=”[POST | GET]” action=”[URL link-nya]”>
…
…
</form>
Atribut method diatas memiliki dua nilai opsional yaitu POST atau GET. Untuk atribut method =”GET”
ini berfungsi untuk mengirim data kedalam server dengan meletakkan data yang akan dikirim tersebut
dibelakang url asal. Sedangkan untuk method=”POST” berbeda prosesenya yaitu mengirim data secara
terpisah sehingga data tersebut tidak ditampilkan dimanapun terutama di url website asal.
Sedangkan untuk atribut action=”url link-nya” digunakan untuk menautkan halaman website
asal ke halaman website yang lain yang sudah disiapkan sebelumnya saat melakukan website
development.
Didalam tag <form> terdapat beberapa komponen yang biasa dipakai diantaranya adalah
4.1.1 TEXT BOX
Text box adalah salah satu komponen dalam tag <form> yang digunakan sebagai inputan data.
HTML menyediakan komponen tersebut dengan cara menuliskan tag <input> disertai dengan atribut
type=”text”. Selain type, tag <input> juga mempunyai atribut name yang digunakan untuk menamai dari
tag <input> tadi serta atribut value yang digunakan untuk memberikan nilai dari tag <input> saat
website tersebut dijalankan dan atribut size untuk men-set ukuran length dari inputan.
Untuk men-set penulisan password pada website, kita cukup mengganti dari atribut type=”text”
menjadi atribut type=”password” sehingga pada saat tampil di website akan dirubah menjadi simbol
“*”. Dan juga dapat menambahkan fungsi required untuk memberikan warning atau error apabila
inputan tersebut tidak boleh dilewati atau di-skip.
Page | 25
<html>
<head><title>belajar form</title></head>
<body>
<form action="[URL Link] ">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value=" ">
<br><br>
</form>
</body>
</html>
Gambar 4.1 Gambar hasil output tag HTML form text box
4.1.2 CHECKBOX
Selain textbox, ada beberapa komponen tambahan yang biasa digunakan saat
pembuatan form dalam website salah satunya adalah checkbox. Seperti yang kita ketahui bahwa dalam
pembuatan form tak lepas dari komponen checkbox yang digunakan sebagai multiple option. Untuk
men-set komponen checkbox tetap menggunakan tag <input> dan cukup mengganti atribut type=”text”
Page | 26
menjadi atribut type=”checkbox” serta ada tambahan fungsi checked apabila menginginkan untuk
secara default tercentang pada saat website dijalankan
<html>
<body>
<form action=" " >
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
BELAJAR PENGGUNAAN CHECKBOX dibawah ini
<br><br>
<input type="checkbox" name="cb1" value="opt1"> option pertama<br>
<input type="checkbox" name="cb2" value="opt2" checked> option kedua menggunakan
default checked<br>
</form>
</body>
</html>
Gambar 4.2 Gambar hasil output tag HTML form check box
Page | 27
4.1.3 RADIO BUTTON
Kalau sebelumnya sudah dibahas tentang atribut type=”checkbox” yang fungsinya adalah
multiple option, sedangkan untuk atribut type=”radio” berfungsi hanya memilih satu option dari semua
option yang ditampilkan. Cara penggunaannya pun sederhana, hanya mengganti atribut
type=”checkbox” menjadi atribut type=”radio” serta dapat menambahkan fungsi checked seperti pada
checkbox yang sudah dibahas sebelumnya. Sedangkan perbedaan selanjutnya antara checkbox dengan
radiobutton adalah terletak pada atribut name-nya. Di radio button, name-nya menggunakan nama
yang sama sedangkan untuk checkbox boleh menggunakan nama yang berbeda – beda. Berikut adalah
contoh penulisan radio button didalam form pada tampilan website.
<html>
<html>
<body>
<body>
<formaction="
<form action="" >" >
Firstname:<br>
First name:<br>
<inputtype="text"
<input type="text"name="firstname"
name="firstname"value="Mickey">
value="Mickey">
<br>
<br>
Lastname:<br>
Last name:<br>
<inputtype="text"
<input type="text"name="lastname"
name="lastname"value="">
value="">
<br><br>
<br><br>
BELAJARPENGGUNAAN
BELAJAR PENGGUNAANCHECKBOX
CHECKBOXdibawah
dibawahiniini
<br><br>
<br><br>
<inputtype="checkbox"
<input type="checkbox"name="cb1"
name="cb1"value="opt1">
value="opt1">option
optionpertama<br>
pertama<br>
<inputtype="checkbox"
<input type="checkbox"name="cb2"
name="cb2"value="opt2"
value="opt2" checked>
checked> option
option kedua
kedua menggunakan
menggunakan
defaultdefault
checked<br>
checked<br>
<br><br>
BELAJAR
<input PENGGUNAAN
type="radio" CHECKBOXvalue="female"
name="rd1" dibawah ini checked> Female menggunakan default
checked<br>
<br><br>
</form>
<input type="radio" name="rd1" value="male"> Male<br>
<input type="radio" name="rd1" value="female" checked> Female menggunakan default
checked<br>
</form>
</body>
</html>
Page | 28
Gambar 4.3 Gambar hasil output tag HTML form radio button
4.1.4 SUBMIT dan RESET
didalam pembuatan form tidak lepas dari adanya tombol,entah itu tombol submit (ok) atau
tombol reset (cancel) atau pemakaiannya bisa digunakan bersamaan. Tombol – tombol tersebut
menggambarkan dan mengatur flow (aliran) dari proses bisnis yang terjadi didalam form dimana tombol
submit digunakan untuk proses bisnis selanjutnya dan tombol reset berfungsi untuk mem-break proses
bisnis yang ada dalam sebuah website. Berikut contoh implementasi penggunaan tombol dalam HTML
<html>
<head><title>belajar form</title></head>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Page | 29
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
BELAJAR PENGGUNAAN CHECKBOX dibawah ini
<br><br>
<input type="checkbox" name="vehicle" value="opt1"> option pertama<br>
<input type="checkbox" name="vehicle" value="opt2" checked> option kedua menggunakan
default checked<br>
<br>
BELAJAR PENGGUNAAN RADIO BUTTON dibawah ini
<br><br>
<input type="radio" name="rd1" value="male"> Male<br>
<input type="radio" name="rd1" value="female" checked> Female menggunakan default
checked<br>
<br><br>
BELAJAR PENGGUNAAN BUTTON dibawah ini
<br><br>
<input type="submit" name="butt1" value="ok" color="red">
<input type="reset" name="butt2" value="batal"> <br>
</form>
</body>
</html>
Page | 30
Gambar 4.4 Gambar hasil output tag HTML form
4.2 Inline Cascading Style Sheet
Inline Cascading Style Sheet atau inline CSS merupakan sebuah format selain HTML yang
digunakan untuk memodifikasi tampilan website. Format ini digunakan pada saat kita ingin mendesain
sebuah tampilan website yang tidak kaku. Inline CSS digunakan untuk memodifikasi satu atau beberapa
baris tag HTML dengan menambahkan atribut style pada tag utamanya. Inline CSS ini dapat berisi segala
macam
<html>elemen – elemen property CSS. Untuk implementasinya dapat dilihat dibawah ini
<html>
<head><title>Inline CSS</title></head>
<head><title>Inline CSS</title></head>
<body<body style="color:
style="color: red;background
red;background : blue;font-family:arial;
: blue;font-family:arial; font-size:
font-size: 25"> 25">
<h1 align="center">STIKOM</h1>
<h1 align="center">STIKOM</h1>
<p>Institut Bisnis dan Informatika STIKOM Surabaya</p>
<p>Institut Bisnis dan Informatika STIKOM Surabaya</p>
</body>
</body>
</html>
</html>
Page | 31
Gambar 4.5 Gambar hasil output tag HTML inline CSS
Page | 32
Latihan
1. Buatlah tampilan website yang berisi form dibawah ini
Ketentuan
Gunakan method post pada form dan pada saat klik tombol Kirim, maka akan membuka
tampilan website baru yang berisi ucapan terima kasih telah mengisi guest book dan sertakan logo
stikom
Page | 33
BAB V HTML (INTERNAL CSS)
Waktu Pelaksanaan : 1 x 170 menit
Setelah
Setelahmempelajari
mempelajaridan
danmemahami
memahamimateri
materi pada
pada bab
bab IV, maka kita
kita akan
akanmelanjutkan
melanjutkankekemateri
materi
selanjutnyatentang
selanjutnya tentangCascading
CascadingStyle
StyleSheet
Sheet (CSS).
(CSS). Kita
Kita akan
akan mempelajari
mempelajaritentang
tentangbagaimana
bagaimanamembuat
membuat
Internal CSS dalam halaman website. Sebelum masuk kedalam pembahasan materi, terlebih dahulu
Internal CSS dalam halaman website. Sebelum masuk kedalam pembahasan materi, terlebih dahulu
jawablah pertanyaan – pertanyaan dibawah ini untuk me-refresh ingatan terhadap materi pada bab
jawablah
IV. pertanyaan – pertanyaan dibawah ini untuk me-refresh ingatan terhadap materi pada bab IV.
Soal Pre-Test
Soal Pre-Test
1.
1.
Ketentuan : pergunakan tag form dengan internal CSS pada paragraf untuk menyelesaikan tugas
diatas.
Ketentuan : pergunakan tag form dengan internal CSS pada paragraf untuk menyelesaikan tugas
diatas.
Internal Cascading Style Sheet merupakan salah satu metode dalam Cascading Style Sheet untuk
memodifikasi tampilan website. Adapun metode ini dituliskan bersamaan dengan penulisan HTML dan
diletakkan dalam struktur tag <head> dan diawali dengan tag <style> dengan atribut type=”” dan
diakhiri dengan tag </style>. Dalam internal CSS, terdapat script selector yanitu class dan id yang secara
penulisan dan fungsi berbeda. Saat menggunakan class dalam internal CSS, maka class tersebut dapat
dipanggil oleh semua elemen atau tag HTML. Adapun cara menuliskannya adalah dengan menggunakan
tanda titik (.). Sedangkan untuk id, hanya digunakan oleh elemen atau tag tertentu dalam HTML
Page | 34
dengan menuliskan pada CSS menggunakan tanda hashtag (#). Berikut adalah cara menuliskan metode
Internal CSS dalam HTML.
<html>
<head>
<style type="text/css">
<html>
body{
<head>
color:#89aebd;
<style type="text/css">
body{ background:green;
font-family:calibri;
color:#89aebd;
font-size:25;
background:green;
text-align:justify;}
font-family:calibri;
font-size:25;
.paragraf{
text-align:justify;}
background:yellow;
font-family:algerian;
.paragraf{
font-size:34px;
background:yellow;
text-align:justify;}
font-family:algerian;
font-size:34px;
#pg{
text-align:justify;}
background:#feacdb;
font-family:arial;
#pg{
font-size:30px;
background:#feacdb;
text-align:justify;}
font-family:arial;
</style>
font-size:30px;
</head>
<body>text-align:justify;}
</style>
<h1 align="center">STIKOM</h1>
</head>
<p id="pg">Institut Bisnis dan Informatika STIKOM Surabaya</p>
<body>
<p class="paragraf">Kuliahnya kids jaman now</p>
<h1
<p align="center">STIKOM</h1>
class="paragraf">biar jadi ahli IT</p>
<p<br><br>
id="pg">Institut Bisnis dan Informatika STIKOM Surabaya</p>
<center>©RAH 2018</center>
</body>
</html>
Page | 35
Gambar 5.1 Output internal CSS dengan tag HTML
Page | 36
Latihan
Buatlah tampilan halaman website seperti dibawah ini
Ketentuan :
Pergunakan internal CSS dengan dikombinasikan dengan tag hyperlink serta tag garis bawah(underline).
Page | 37
BAB VI HTML (EXTERNAL CSS)
Waktu Pelaksanaan : 1 x 170 menit
Setelah
Setelahmempelajari
mempelajaridan memahami
dan memahami materi pada
materi babbab
pada V, maka kita kita
V, maka akanakan
melanjutkan ke materi
melanjutkan ke
selanjutnya tentang Cascading
materi selanjutnya Style Sheet
tentang Eksternal (CSS). Kita
Cascading Styleakan mempelajari
Sheet (CSS). Kitatentang bagaimana membuat
akan mempelajari tentang
Internal CSS membuat
bagaimana dalam halaman website.
Eksternal Sebelum
CSS dalam masuk
halaman kedalam
website. pembahasan
Sebelum materi, terlebih
masuk kedalam dahulu
pembahasan
jawablah pertanyaan
materi, terlebih – pertanyaan
dahulu jawablah dibawah ini untuk
pertanyaan me-refresh
– pertanyaan ingatanini
dibawah terhadap materi padaingatan
untuk me-refresh bab IV.
terhadap materi pada bab V.
Soal Pre-Test
Soal Pre-Test
1. Buatlah halaman website seperti contoh dibawah ini
1. Buatlah halaman website seperti contoh dibawah ini
Dengan ketentuan sebagai berikut
Dengan ketentuan sebagai berikut
Page | 38
External Style Sheet adalah salah satu metode yang digunakan apabila kita ingin menerapkan file
CSS didalam beberapa atau banyak halaman dalam satu website. Idealnya kita cukup menggunakan satu
file external CSS untuk digunakan dalam banyak halaman dengan menggunakan keyword tag <link> yang
diletakkan didalam tag <head>. Tag <link> ini berfungsi sebagai penghubung atau link antara file CSS
dengan
<head>file HTML. Berikut tag lengkap dari <link>
<head>
<link rel=”stylesheet” type=”text/css” href=”[file css]”>
<link rel=”stylesheet” type=”text/css” href=”[file css]”>
</head>
</head>
Keterangan :
<link> digunakan untuk menentukan referensi sumbernya.
Rel=”stylesheet” digunakan untuk menentukan modifikasi halaman menggunakan efek style sheet.
Type=”text/css” digunakan untuk pemanggilan tipe file. Contoh : text/css.
Href=”[file css]” digunakan untuk menentukan path file css yang akan dipakai.
Untuk memperjelas bagaimana penggunaan eksternal CSS, kita dapat membuat contoh
sederhana sebuah tampilan website. Mula – mula yang dibutuhkan adalah membuat file css seperti
dibawah ini.
body{
body{
color:#89aebd;
color:#89aebd;
background:green;
background:green;
font-family:calibri;
font-family:calibri;
font-size:25;
font-size:25;
text-align:justify;}
disimpan text-align:justify;}
dengan nama eksternal.css
Setelah itu, kita membuat satu halaman website menggunakan HTML agar eksternal.css dapat
dijalankan. Adapun contohnya, dapat dilihat dibawah ini
<link rel="stylesheet" type="text/css" href="nw.css">
<html>
<head>
</head>
<title>belajar eksternal CSS </title>
<body> <link rel="stylesheet" type="text/css" href="nw.css">
</head>
<h1 align="center">STIKOM</h1>
<body>
<p>Institut Bisnis dan Informatika STIKOM Surabaya</p>
Page | 39
<h1 align="center">STIKOM</h1>
<p>Institut Bisnis dan Informatika STIKOM Surabaya</p>
<p>Kuliahnya kids jaman now</p>
<p>biar jadi ahli IT</p>
<br><br>
<center>©RAH 2018</center>
</body>
</html>
Dan hasilnya berupa tampilan seperti dibawah ini
Gambar 6.1 Hasil output menggunakan eksternal CSS
Page | 40
LATIHAN
Buatlah tampilan yang sama dengan tugas pre-test pada pertemuan kali ini dengan menggunakan
Eksternal CSS dan tambahkan tentang penyebaran serta habitat aslinya.
Page | 41
BAB VII GRID SYSTEM LAYOUT
Waktu Pelaksanaan : 1 x 170 menit
Saat kita mulai belajar bootstrap sebagai pemula kita akan dihadapkan pada beberapa aturan
membuat web desain salah satunya adalah grid system, grid sistem adalah alat yang akan membantu
kita untuk membuat layout web agar menjadi lebih rapi. Di dalam bootstrap, grid sistem dibagi dalam 12
kolom (col-*) dimana dalam tiap barisnya (.row) yang diset dalam empat model xs (extra small), md
(medium), sm (small), lg (large) sesuai lebar dari layar monitor, sehingga selain membantu kita dalam
membuat layout web yang rapi, grid system bootstrap juga membantu kita membuat layout web yang
responsive.
Seperti yang telah dijelaskan di atas, grid system bootstrap dibagi dalam 12 kolom dan empat
macam ukuruan. empat ukuran tersebut adalah :
1. col-xs-* ini digunakan pada ukuran kurang dari 768px atau seukuran mobile.
2. col-sm-* ini digunakan pada ukuran lebih dari atau sama dengan 768px atau seukuran tablet.
3. col-md-* ini digunakan pada ukuran lebih dari atau sama dengan 992px atau selebar monitor.
4. col-lg-* ini lebih dari atau sama dengan 1200px atau monitor besar.
dari grid diatas kita bisa mengkombinasikan agar kita bisa memperoleh layout web sesuai keinginan kita.
Misalkan :
<div class=”col-md-3 col-xs-3 col-sm-3 col-lg-3”>…</div>
<div class=”col-md-3 col-xs-3 col-sm-3 col-lg-3”>…</div>
Akan membuat tiga kolom saat berada di layar monitor seperti laptop tapi menjadi satu kolom saat
berada dilayar smartphone.
Selain empat macam ukuran diatas, didalam bootstrap terdapat 2 macam class lain yang berguna dalam
membuat layout website yaitu .container dan .row
container membantu kita membuat layout website kita berada di tengah-tengah browser seperti
gambar dibawah ini
Page | 42
Gambar 7.1 Penggunaan Grid dengan container
Gambar 7.2 Penggunaan Grid tanpa container
Dan berikut cara membuat layout website dengan container dan tanpa container.
#dengan container
<div
<divclass="container">
class="container">
<div
<divclass="row">
class="row">
<div
<divclass="col-md-12">...</div>
class="col-md-12">...</div>
</div>
</div>
</div>
</div>
Page | 43
#tanpa container
<divclass="col-md-12">
<div class="col-md-12">
<div class="row">
<div class="row">
<divclass="col-md-12">...</div>
<div class="col-md-12">...</div>
</div>
</div>
</div>
</div>
Row membantu kita untuk membuat baris baru dalam membuat layout. Selain untuk membuat baris
baru layout biasa digunakan ketika kita hendak menambahkan grid didalam grid sebagai berikut :
#Grid Layout dengan cara yang tepat :
<divclass="col-md-3">
<div class="col-md-3">
<div class="row">
<div class="row">
<divclass="col-md-6">
<div class="col-md-6">
<div class="row">
<div class="row">
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<divclass="col-md-9">...</div>
<div class="col-md-9">...</div>
</div>
</div>
</div>
</div>
<divclass="col-md-6">...</div>
<div class="col-md-6">...</div>
</div>
</div>
</div>
</div>
#Grid Layout dengan cara yang kurang tepat :
<divclass="col-md-3">
<div class="col-md-3">
<div class="col-md-6">
<div class="col-md-6">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<divclass="col-md-9"></div>
<div class="col-md-9"></div>
</div>
</div>
<divclass="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
Apabila kita menggunakan cara yang SALAH, layout web yang kita buat akan menjadi rusak terutama
saat dibuka di smartphone atau tablet atau mobile phone dan layout yang seharusnya responsive justru
akan terlihat kacau dan berantakan.
Page | 44
Untuk lebih memahami dan mempelajari Grid Layout web dengan Bootstrap, kita mencoba membuat
desain website yang sederhana seperti terdapat header, navigasi, content, sidebar dan footer.
Terlebih dulu, kita pahami dulu konsep layar dalam bootstrap secara default terdapat 12 kolom
Gambar 7.3 Bootstrap layer 12 kolom
Page | 45
Setelah itu kita buat konsep desain web sederhana seperti dibawah ini :
Header
Navigasi
Gambar 7.4 Contoh penggunaan Grid dalam tampilan bootstrap
Yang perlu diperhatikan adalah saat berpindah baris atau menulis grid didalam grid, kita gunakan
class row untuk mengatur baris dan tampilannya.
<div class="col-md-12">
Berikut tag boostrap desain website seperti dibawah ini :
<div class="row">
<header class="col-md-12">
<div class="col-md-12">
code header di sini
<div class="row">
</header>
<header class="col-md-12">
</div>
code header di sini
<!-- end header -->
</header>
</div>
<div
<!-- endclass="row">
header -->
<div class="col-md-12">Content Sidebar
<divcode navigasi di sini
class="row">
</div>
<div class="col-md-12">
</div>
code navigasi di sini
<!-- end navigasi -->
</div>
</div>
<div
<!-- endclass="row">
navigasi -->
<div class="wrapper">
<div class="col-md-9">
<div class="row"> Footer
<article>
<div class="wrapper">
code content di sini
<div class="col-md-9">
Page | 46
</article>
<article>
</div>
code content di sini
<!-- end posting area -->
</article>
</div>
<div
<!-- endclass="col-md-3">
posting area -->
<aside>
code widget / sidebar di sini
<div class="col-md-3">
</aside>
<aside>
</div>
code widget / sidebar di sini
<!-- end sidebar -->
</aside>
</div>
</div>
</div>
<!-- end sidebar -->
<!-- end wrapper -->
</div>
</div>
<div
<!-- endclass="row">
wrapper -->
<div class="col-md-12">
<footer class="footer">
<div class="row">
code footer di sini
<div class="col-md-12">
</footer>
<footer class="footer">
</div>
code footer di sini
</div>
</footer>
<!-- end footer -->
</div>
</div>
</div>
<!-- end footer -->
</div>
Page | 47
Latihan
Buatlah duplikasi tampilan website dibawah ini
Ketentuan
Pergunakan grid system bootstrap menggunakan container dan div class row
Page | 48
BAB VIII KOMPONEN BOOTSTRAP
Waktu Pelaksanaan : 2 x 170 menit
Setiap website pasti memiliki komponen yang digunakan untuk melengkapi fungsi sebuah
tampilan website. Ambil contoh bahwa disetiap website sederhana sekalipun pasti memiliki navigasi
untuk menjelaskan tujuan dari website itu dibuat. Ada yang dibuat dengan dropdown list atau tombol
maupun menu dan peletakannya bisa diatas atau disamping.
Dalam Bootstrap, semua komponen itu sudah disediakan dan tinggal di copy – paste kedalam
code html yang sudah dibuat. Komponen itu dapat diakses lewat online dengan alamat
https://getbootstrap.com/ atau melalui dokumentasi offline yang dapat didownload pada halaman
website bootstrap. Dalam bab ini akan dibahas mengenai komponen-komponen yang ada pada
bootstrap. Komponen-komponen yang ada pada bootstrap adalah: Dropdowns, Button groups, Button
dropdowns, Navs dan Navbar, Breadcrumbs, Pagination, Labels dan badges, Thumbnails Alerts, Progress
bars, Media object dan Misc.
A. DROPDOWN
Dropdown merupakan menu-menu yang biasanya ditampilkan dalam bentuk
list atau daftar bisa dibuat interaktif dengan Toggleable dropdown JavaScript plugin,
menu kontekstual untuk menampilkan link dalam format daftar. Hal ini dapat dibuat
interaktif dengan dropdown Plugin JavaScript. Untuk menggunakan dropdown, hanya
menyisipkan menu dropdown dalam kelas .dropdown. Berikut contoh dasar untuk
menu dropdown:
1. <div class="dropdown">
2. <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
3. data-toggle="dropdown">
4. STIKOM Surabaya
5. <span class="caret"></span>
6. </button>
7. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
8. <li role="presentation">
9. <a role="menuitem" tabindex="-1" href="#">Mahasiswa</a>
10. </li>
1.1.3.4 <li role="presentation">
2.1.3.4 <a role="menuitem" tabindex="-1" href="#">Dosen</a>
13. </li>
2.2 <li role="presentation">
3.2 <a role="menuitem" tabindex="-1" href="#">Pegawai</a>
16. </li>
A. <li role="presentation" class="divider"></li>
B. <li role="presentation">
C. <a role="menuitem" tabindex="-1"
href="#">https://stikomapps.stikom.edu</a>
20. </li>
21. </ul>
22. </div> Page | 49
Berikut adalah tampilan menu dropdown :
Gambar 8.1 Hasil output dropdown
B. BUTTON GROUPS
Button groups memungkinkan beberapa tombol untuk ditumpuk selaras
bersama- sama pada satu baris. Hal ini berguna ketika anda ingin menempatkan item
seperti tombol alignment bersama-sama. Anda dapat menambahkan pilihan
JavaScript radio dan checkbox style dengan Bootstrap Plugin Button.
Tabel 8.1 penggunaan button group
Kelas Deskripsi Contoh Kode
1. <div class="btn-group">
Kelas ini digunakan pada 2. <button type="button"
dasar penggunaan button class="btn btn-
.btn-group group. Bungkus serangkaian default">Button1</button
button dengan class .btn di >
dalam .btn-group. 3. <button type="button"
class="btn btn-
default">Button2</button
>
4. </div>
Hal ini membantu dalam 1. <div class="btn-toolbar"
menggabungkan set <div class role="toolbar">
.btn-toolbar ="btn-group"> ke dalam <div 2. <div class="btn-
class="btn-toolbar"> untuk group">...</div>
komponen yang lebih 3. <div class="btn-
kompleks. group">...</div>
4. </div>
Page | 50
Kelas-kelas ini dapat 1. <div class="btn-group btn-
.btn-group-lg, diterapkan untuk group-lg">...</div>
.btn-group-sm, button groups tanpa 2. <div class="btn-group btn-
.btn-group-xs mengubah ukuran group-sm">...</div>
masing-masing tombol. 3. <div class="btn-group btn-
group-xs">...</div>
Kelas ini membuat satu 1. <div class="btn-group- vertical">
.btn- set tombol yang muncul 2. ...
group- ditumpuk secara vertikal 3. </div>
vertical bukan horizontal.
Pada tabel 8.1 menjelaskan tentang kelas penting yang disediakan Bootstrap pada
penggunaan button groups.
1.<div class="btn-group">
2.<button type="button" class="btn btn-default">Button1</button>
3.<button type="button" class="btn btn-default">Button2</button>
Berikut contoh penggunaan kelas .btn-group yang dibahas dalam tabel di atas:
Penjelasan kode:
Baris ke 1. Mengunakan kelas “btn-group” dimana pada pembuatan
tombol dikelompokan pada satu baris.
Baris ke 2-4. Membuat tombol dari Button1 sampai Button
3. Hasil outputnya seperti berikut :
Gambar 8.2 Hasil output btn-group
Page | 51
C. BUTTON DROPDOWN
Pada komponen ini akan dibahas tentang cara menambahkan menu button
dropdown dengan menggunakan kelas Bootstrap. Untuk menambahkan dropdown
ke tombol, cukup membungkus tombol dan menu dropdown di .btn-group. Anda
juga dapat menggunakan <span class = "caret"> </ span> yang berfungsi sebagai
indikator bahwa tombol adalah sebuah menu dropdown.
1.1.3 <div class="btn-group">
2.1.3 <button type="button" class="btn btn-default dropdown-
toggle" data- toggle="dropdown">
3.1.3 STIKOM Surabaya <span class="caret"></span>
4.1.3 </button>
5.1.3 <ul class="dropdown-menu" role="menu">
6.1.3 <li><a href="#">nilai</a></li>
7.1.3 <li><a href="#">pembayaran</a></li>
8.1.3 <li><a href="#">informasi</a></li>
9.1.3 <li class="divider"></li>
10.1.3 <li><a href="#">stikomapps.stikom.edu</a></li>
11. </ul>
9. </div>
10. <div class="btn-group">
11. <button type="button" class="btn btn-primary dropdown-
toggle" data- toggle="dropdown">
12. Pens <span class="caret"></span>
13. </button>
14. <ul class="dropdown-menu" role="menu">
18. <li><a href="#">PMB 2018</a></li>
1.1 <li><a href="#">Prestasi</a></li>
2.1 <li><a href="#">Alumni</a></li>
3.1 <li class="divider"></li>
4.1 <li><a href="#">https://stikomapps.stikom.edu</a></li></ul>
5.1 </div>
Contoh berikut menunjukkan dasar tombol dropdown tunggal:
Penjelasan Kode :
Baris ke 2. Mengimplementasikan tombol button dengan fungsi dropdown
Baris ke3. Menyisipkan submenu kedalam menu dropdown STIKOM Surabaya.
Gambar 8.3 Hasil output btn-dropdown
Page | 52
D. NAVS DAN NAVBAR
Bootstrap menyediakan beberapa pilihan yang berbeda untuk elemen
styling navigasi. Semua elemen navigasi dari berbagi markup yang sama dan kelas
dasarnya .nav. Bootstrap juga menyediakan kelas helper, untuk berbagi markup
dan kondisi. Kelas Swap modifier digunakan untuk memindahkan style masing-
masing.
Tabel Navigasi atau Tabs
Untuk membuat menu navigasi tab:
- Mulailah dengan dasar membuat daftar tak berurut dengan class dasar
.nav
- Tambahkan class .nav-tab.
1.1.3.3 <p>contoh tab nav</p>
2.1.3.3 <ul class="nav nav-tabs">
3.1.3.3 <li class="active"><a href="#"><b>HOME</b></a></li>
4.1.3.3 <li><a href="#">ANDROID</a></li>
5.1.3.3 <li><a href="#">ORACLE</a></li>
6.1.3.3 <li><a href="#">VB.Net</a></li>
7.1.3.3 <li><a
href="#">JAVA</a></li> 8.
<li><a
href="#">PHP</a></li> 9.
Berikut contoh penggunaannya
</ul> :
Penjelasan Kode :
● Baris ke 2. Membuat daftar menu dengan menggunakan class nav-tab
● Baris ke3. Menandakan bahwa menu sedang aktif atau
ditampilkan. Berikut adalah hasil outputnya :
Gambar 6.4 Hasil output tabs-nav
Page | 53
Pills navigasi
Pills dasar
Untuk mengaktifkan tab menjadi pil, ikuti langkah yang sama seperti script
tab navigasi di atas, gunakan class .nav-pills untuk menggantikan .nav-tabs.
1.1.1 <p>contoh pills nav</p>
2.1.1 <ul class="nav nav-pills">
3.1.1 <li class="active"><a href="#"><b>HOME</b></a></li>
4.1.1 <li><a href="#">ANDROID</a></li>
5.1.1 <li><a href="#">ORACLE</a></li>
6.1.1 <li><a href="#">VB.Net</a></li>
7.1.1 <li><a
href="#">JAVA</a></li> 8.
<li><a
href="#">PHP</a></li> 9.
</ul> Berikut adalah hasil outputnya:
Gambar 8.5 Hasil output nav-pills
Pills vertikal
Anda dapat menumpuk pil vertikal menggunakan kelas .nav-stacked
disertai class .nav, .nav-pil.
1.1.3.5 <p>contoh pills navigasi vertikal</p>
2.1.3.5 <ul class="nav nav-pills nav-stacked">
3.1.3.5 <li class="active"><a href="#"><b>HOME</b></a></li>
4.1.3.5 <li><a href="#">ANDROID</a></li>
5.1.3.5 <li><a href="#">ORACLE</a></li>
6.1.3.5 <li><a href="#">VB.Net</a></li>
7.1.3.5 <li><a
href="#">JAVA</a></li> 8.
<li><a
href="#">PHP</a></li> 9.
</ul>
Gambar 8.6 Hasil output nav-stacked
Page | 54
Navbar
Navbar adalah fitur bagus dan merupakan salah satu ciri yang menonjol dari situs
Bootstrap. Navbars merupakan komponen meta responsif yang berfungsi sebagai
header navigasi untuk aplikasi atau situs anda. Pada intinya, navbar termasuk styling
untuk nama situs dan navigasi dasar.
Standar Navbar
Untuk menambah standart navbar :
- Tambah kelas .navbar, .navbar-default ke tag <nav>.
- Tambahkan role = "navigasi" pada elemen di atas, untuk membantu dengan
aksesibilitas.
- Tambah kelas header .navbar-header untuk elemen <div>. Sertakan elemen
<a> dengan class navbar-brand. Hal ini akan memberikan teks ukuran yang
sedikit lebih besar.
- Untuk menambahkan link ke navbar, cukup tambahkan daftar unordered
dengan kelas .nav, .navbar-nav.
Berikut contoh penggunaannya :
1. <nav class="navbar navbar-default" role="navigation">
2. <div class="navbar-header">
3. <a class="navbar-brand" href="#">STIKOM Surabaya</a>
4. </div>
5. <div>
6. <ul class="nav navbar-nav">
7. <li class="active"><a href="#">DOSEN</a></li>
8. <li><a href="#">PEGAWAI</a></li>
9. <li class="dropdown">
10. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
11. MAHASISWA
12. <b
class="caret"></b>
13. </a>
1. <ul class="dropdown-menu">
2. <li><a href="#">SANDY KISWOYO</a></li>
3. <li><a href="#">ERLINDA FEBRIA</a></li>
4. <li><a href="#">P BAGASKORO</a></li>
5. <li class="divider"></li>
6. <li><a href="#">Lihat kategori<br>Jurusan</a></li>
7. <li class="divider"></li>
8. <li><a
href="#">https://stikomapps.stikom.
edu</a></li> 22. </ul> </li>
23. </ul></div>
24. </nav>
Page | 55
Berikut adalah hasil outputnya :
Gambar 8.7 Hasil output navbar
Responsif Navbar
Untuk menambahkan fitur responsif terhadap navbar, konten yang anda
butuhkan untuk disisipkan dalam <div> dengan class .collapse, .navbar-collapse.
Collapse terhubung oleh sebuah tombol yang memiliki kelas .navbar-toggle dan
kemudian memiliki dua data-elemen. yang pertama, data-toggle digunakan untuk
memberitahu JavaScript apa yang harus dilakukan dengan tombol. dan yang kedua,
data-target, mengindikasikan elemen untuk beralih. Membuat tombol dengan 3
ikon menggunakan class .icon-bar. Ini akan mengaktifkan unsur-unsur yang berada
di .nav-collapse <div>. Agar fitur ini bekerja, Anda perlu menyertakan Bootstrap
collapse plugin.
Page | 56
1. <nav class="navbar navbar-default" role="navigation">
2. <div class="navbar-header">
3. <button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#example-navbar-collapse">
4. <span class="sr-only">Toggle navigation</span>
5. <span class="icon-bar"></span>
6. <span class="icon-bar"></span>
7. <span class="icon-bar"></span>
8. </button>
9. <a class="navbar-brand" href="#">STIKOM</a>
10. </div>
11. <div class="collapse navbar-collapse" id="example-navbar-collapse">
12. <ul class="nav navbar-nav">
13. <li class="active"><a href="#">iOS</a></li>
14. <li><a href="#">SVN</a></li>
1. <li class="dropdown">
2. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b
class="caret"></b> </a>
3. <ul class="dropdown-menu">
4. <li><a href="#">jmeter</a></li>
19. <li><a href="#">EJB</a></li>
1. <li><a href="#">Jasper Report</a></li>
2. <li class="divider"></li>
3. <li><a href="#">Separated link</a></li>
4. <li class="divider"></li>
5. <li><a href="#">One more separated link</a></li>
25. </ul>
26. </li>
27. </ul>
1. </div>
2. </nav>
Output program :
Gambar 8.8 Hasil output dropdown
Page | 57
E. BREADCRUMBS
Breadcrumbs adalah cara yang tepat untuk menampilkan informasi hirarki
untuk sebuah situs. Dalam kasus blog, breadcrumbs dapat menunjukkan tanggal
penerbitan, kategori, atau tag. Mereka menunjukkan lokasi halaman saat ini dalam
hirarki navigasi.
Sebuah breadcrumb di Bootstrap hanya daftar tidak berurut dengan class
.breadcrumb. Pemisah secara otomatis ditambahkan oleh CSS (bootstrap.min.css)
melalui kelas berikut:
1. .breadcrumb > li + li:before {
2. color: #CCCCCC;
3. content: "/ ";
4. padd
ing: 0 5px;
5. }
Berikut contoh penggunaan breadcumbs :
1. <ol class="breadcrumb">
2. <li><a
href="#">Home</a></li> 3.
<li><a
href="#">2015</a></li>
4. <li class="active">Maret</li>
5. </ol>
Berikut hasil outputnya :
Gambar 8.9 Hasil output breadcumbs
F. PAGINATION
Pagination adalah sebuah teknik untuk lebih mempermudah user agar tidak
scroll terlalu jauh saat inign menampilkan data dalam bentuk yang ratusan hingga
ribuan data. Dengan Menggunakan Pagination, Maka Akan terbentuk Halaman-
halaman yang berurutan untuk menampilkan data-data tersebut.
Bagi Pengguna Bootstrap, CSS yang satu ini cukup populer digunakan dalam
membangun Website yang responsive, membuat pagination sepertinya adalah hal
yang agak sedikit rumit, dan kali ini akan saya ulas seputar cara menggunakan
pagination pada Bootstrap.
Page | 58
Tabel 8.2 kelas penggunaan paginatons
kelas deskripsi contoh kode
<ul class="pagination">
Menambahkan kelas ini untuk <li><a href="#">«</a></li>
.pagination mendapatkan pagination pada <li><a href="#">1</a></li>
halaman Anda. .......
</ul>
Anda dapat menyesuaikan <ul class="pagination">
.disabled,
link dengan menggunakan <li class="disabled"><a
.active
.disabled pada link unclickable href="#">«</a></li>
<li class="active"><a
dan .active untuk href="#">1<span class="sr-
menunjukkan halaman saat only">(current)</span></a></li>
ini. .......
</ul>
.pagination-
Menggunakan kelas ini untuk <ul class="pagination pagination-
lg,
mendapatkan barang-barang lg">...</ul>
.pagination- <ul class="pagination">...</ul>
sm ukuran yang berbeda.
<ul class="pagination pagination-
sm">...</ul>
Pada tabel 8.2 berisi daftar kelas yang disediakan Bootstrap untuk menangani
pagination.
berikut contoh penggunaan standart class .pagination yang dibahas dalam tabel di atas:
1. <ul class="pagination">
2. <li><a href="#">«</a></li>
3. <li><a href="#">1</a></li>
4. <li><a href="#">2</a></li>
5. <li><a href="#">3</a></li>
6. <li><a href="#">4</a></li>
7. <li><a href="#">5</a></li>
8. <li><a href="#">»</a></li>
9. </ul>
Gambar 8.10 Hasil output paginations
Page | 59
G. LABEL DAN BADGES
LABEL
Label yang besar untuk menawarkan jumlah, tips, atau markup lainnya
untuk halaman. Dengan menggunakan class .label untuk menampilkan label seperti
yang ditunjukkan dalam contoh berikut:
1. <h1>Contoh Heading <span class="label label-default">Label</span></h1>
2. <h2>Contoh Heading <span class="label label-default">Label</span></h2>
3. <h3>Contoh Heading <span class="label label-default">Label</span></h3>
4. <h4>Contoh Heading <span class="label label-default">Label</span></h4>
Berikut ini adalah hasil outputnya :
Gambar 8.11 Hasil output label
Anda dapat penampilan label menggunakan kelas modifier label-default, label-
primary, label-succes, label-info, label-warning, label-danger seperti yang ditunjukkan
dalam contoh berikut:
1. <span class="label label-default">Default Label</span>
2. <span class="label label-primary">Primary Label</span>
3. <span class="label label-success">Success Label</span>
4. <span class="label label-info">Info Label</span>
5. <span class="label label-warning">Warning Label</span>
6. <span class="label label-danger">Danger Label</span>
Gambar 8.12 Hasil output dropdown
Page | 60
BADGES
badges mirip dengan label, perbedaan utamanya adalah bahwa sudut budges
lebih bulat. badges terutama digunakan untuk menyorot item baru atau yang belum
dibaca. Untuk menggunakan budges hanya menambahkan <span class = "badge"> pada
link, Bootstrap navs, dan banyak lagi.
Contoh berikut menunjukkan penggunaan badges:
<a href="#">Pesan Masuk Anda <span class="badge">50</span></a>
Gambar 8.13 Hasil output dropdown
H. THUMBNAILS ALERT
Banyak situs membutuhkan cara untuk layout gambar, video, teks, dll dalam
box, Bootstrap memiliki cara mudah untuk melakukan hal ini dengan thumbnail.
Untuk membuat thumbnail menggunakan Bootstrap:
• Tambahkan tag <a> dengan kelas .thumbnail di sekitar link gambar.
• Hal ini menambah empat piksel padding dan border gambar abu-abu.
• Pada hover, sebuah cahaya menguraikan gambar
animasi. Contoh berikut menunjukkan thumbnail default:
1. <div class="row">
2. <div class="col-sm-6 col-md-3">
3. <a href="#" class="thumbnail"><img src="download11.jpg"
alt="Generic placeholder thumbnail">pekarangan rumah</a>
4. </div>
5. <div class="col-sm-6 col-md-3">
6. <a href="#" class="thumbnail">
7. <img src="download2.jpg" alt="Generic placeholder thumbnail">jembatan</a>
1. </div>
2. <div class="col-sm-6 col-md-3">
3. <a href="#" class="thumbnail">
4. <img src="images.jpg" alt="Generic placeholder
thumbnail">terang bulan</a>
1. </div>
2. <div class="col-sm-6 col-md-3">
3. <a href="#" class="thumbnail">
4. <img src="download.jpg" alt="Generic placeholder
thumbnail">teras rumah</a>
1. </div>
2. </div>
Page | 61
Berikut adalah contoh outputnya:
Gambar 8.14 Hasil output thumbnails
I. PROGRESS BAR
Tujuan dari progress bar adalah untuk menunjukkan bahwa aset memuat, dalam
proses, atau bahwa ada tindakan yang terjadi mengenai elemen pada halaman.
Progress bar menggunakan CSS3 transisi dan animasi untuk mencapai beberapa
efeknya. Fitur-fitur ini tidak didukung di Internet Explorer 9 dan di bawah atau versi
Firefox yang lebih tua. Opera 12 tidak mendukung animasi.
Untuk membuat progress bar dasar:
Tambahkan <div> dengan class. progress
Selanjutnya, di dalam di atas <div>, tambahkan kosong <div> dengan class
.progress-bar.
Tambahkan atribut style dengan lebar dinyatakan sebagai persentase. Katakanlah
misalnya, style = "60%"; menunjukkan bahwa progress bar berada di 60%.
1. <div class="progress">
2. <div class="progress-bar" role="progressbar" aria-valuenow="60"
3. aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
4. <span class="sr-only">40% Complete</span>
5. </div>
6. </div>
Page | 62
hasil outputnya :
Gambar 8.15 Hasil output dropdown
Pada Gambar 8.15 ditunjukan hasil dari pengguna komponen progress bar
dengan class .progress-bar.
J. MEDIA OBJECT DAN MISC
● MEDIA OBJECT
Media object adalah style objek abstrak untuk membangun berbagai jenis
komponen (seperti komentar blog, Tweets, dll) yang menampilkan gambar kiri atau
kanan-blok di samping konten tekstual. Tujuan dari objek media adalah membuat
kode untuk mengembangkan blok informasi yang lebih pendek.
Tujuan dari objek media (markup ringan, extendability mudah) dicapai dengan
menerapkan kelas untuk beberapa markup sederhana. Ada dua bentuk kelas pada
objek media yaitu:
- .media: Kelas ini memungkinkan untuk menampilkan objek media (gambar, video,
audio) ke kiri atau kanan blok konten.
- .media-list: Jika Anda sedang mempersiapkan list di mana item akan menjadi
bagian dari list unordered (tak berurutan), gunakan kelas ini. .media-list berguna
untuk komentar panjang atau daftar artikel.
1. <div class="media">
2. <a class="pull-left" href="#">
3. <img class="media-object" src="nobi.jpg"
4. alt="Media Object">
Page | 63
Berikut adalah contoh penggunaan media object :
5. </a>
1. <div class="media-body">
2. <h4 class="media-heading">nobi nobita</h4>
3. ini adalah percobaan media heading
4. <div class="media">
5. <a class="pull-left" href="#">
6. <img class="media-object" src="sizu.jpg" alt="Media Object"></a>
7. <div class="media-body">
8. <h4 class="media-heading">shizuka minamoto</h4>
9. pokoke media heading </div>
10. </div>
11. </div></div>
Berikut adalah hasil
outputnya :
Gambar 8.16 Hasil output media object
Pada gambar 8.16 di tunjukan hasil dari dari penggunaan class media object pada
bootstrap
● MISC
Pada komponen ini terdapat beberapa jenis class dalam penggunaannya: seperti
well, optional classes, close icon dan helper classes.
- Well
Gunakan Well sebagai efek sederhana pada sebuah elemen untuk
memberikan efek masukan pada tampilan.
Page | 64
Lihat contoh penggunaan well berikut :
1. <div class="well">
2. ...
3. </div>
- Optional
Kelas optional adalah pengaturan Kontrol padding dan sudut bulat dengan
dua kelas pilihan pada pengubah. lihat contoh penggunaanya berikut Pada skala
besar :
1. <div class="well well-large">
2. ...
3. </div>
Pada skala kecil :
1. <div class="well well-small">
2. ...
3. </div>
- Close icon
Gunakan close icon generik untuk menolak konten seperti kata modal dan
peringatan. contoh penggunaannya :
1. <button class="close">×</button>
perangkat iOS memerlukan sebuah href="#" untuk me-klik peristiwa, jika
Anda lebih suka menggunakan link.
1. <a class="close" href="#">×</a>
Page | 65
Latihan
Buatkan tampilan website seperti dibawah ini menggunakan navbar, drop down , dan komponen lain
pendukung
Page | 66
BAB IX Komponen Web Interaktif Responsif
Waktu Pelaksanaan : 1 x 170 menit
9. Modal
Modal pada dasarnya adalah kotak dialog atau jendela popup yang digunakan untuk
memberikan informasi penting kepada pengguna atau meminta pengguna untuk mengambil tindakan
yang diperlukan sebelum melanjutkan. Modals secara luas digunakan untuk memperingatkan pengguna
untuk situasi seperti waktu sesi keluar atau untuk menerima konfirmasi akhir mereka sebelum pergi
untuk melakukan tindakan penting seperti menyimpan atau menghapus data penting.
Anda dapat dengan mudah membuat kotak dialog yang sangat cerdas dan fleksibel dengan
plugin modal Bootstrap. Contoh berikut akan menunjukkan kepada Anda cara membuat modal
sederhana dengan header, badan pesan, dan footer berisi tombol tindakan untuk pengguna.
<html>
<html>
<head>
<head>
<title>Example of Bootstrap 3 Modals</title>
<title>Example of Bootstrap 3 Modals</title>
<link rel="stylesheet"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<scripttype="text/javascript">
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$("#myModal").modal('show');
$("#myModal").modal('show');
});
});
</script>
</script>
</head>
</head>
<body>
<div id="myModal" class="modal fade">
<body>
<div class="modal-dialog">
<div id="myModal" class="modal fade">
<div class="modal-content">
<div class="modal-dialog">
<div class="modal-header">
<div class="modal-content">
Page | 67
<button<h4 class="modal-title">Confirmation</h4>
type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
</div>
<div class="modal-body">
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
</div>
<div
<divclass="modal-footer">
class="modal-footer">
<buttontype="button"
<button type="button"class="btn
class="btnbtn-default"
btn-default"data-dismiss="modal">Close</button>
data-dismiss="modal">Close</button>
<buttontype="button"
<button type="button"class="btn
class="btnbtn-primary">Save
btn-primary">Savechanges</button>
changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Gambar 9.1 Tampilan Modal
Page | 68
9.1 Membuat Modals tanpa JavaScript (Data Attributes)
Selain menggunakan script JavaScript, kita dapat mengaktifkan modal Bootstrap dengan
mengklik tombol atau tautan melalui atribut data tanpa menulis kode JavaScript apa pun. Lihat contoh
berikut:
<html>
<html>
<head>
<head>
<title>Example of Bootstrap 3 Modals</title>
<title>Example of Bootstrap 3 Modals</title>
<link rel="stylesheet"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
<style type="text/css">
.bs-example{
.bs-example{
margin: 20px;
margin: 20px;
}
}
</style>
</style>
</head>
</head>
<body>
<body>
<div class="bs-example">
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo
Modal</a>
<!--
<!-- Modal HTML -->Modal HTML -->
<div class="modal
<div id="myModal" id="myModal"fade">
class="modal fade">
<div class="modal-dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-content">
<div class="modal-header">
<div class="modal-header">
Page | 69
<button type="button" class="close" data-dismiss="modal" aria-
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
<h4 class="modal-title">Confirmation</h4>
</div>
</div>
<div class="modal-body">
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
</div>
<div class="modal-footer">
<div class="modal-footer">
<buttontype="button"
<button type="button"class="btn
class="btnbtn-default"
btn-default"data-dismiss="modal">Close</button>
data-dismiss="modal">Close</button>
<buttontype="button"
<button type="button"class="btn
class="btnbtn-primary">Save
btn-primary">Savechanges</button>
changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>
</html>
Dan hasil dari penerapan tag
diatas dapat dilihat pada gambar
dibawah ini
Gambar 9.2 Modals menggunakan Data Attributes (Button)
Page | 70
Gambar 9.3 Output Modals menggunakan Data Attribute
Adapun penjelasan dari tag modals diatas adalah sebagai berikut :
Untuk mengaktifkan modal Bootstrap melalui atribut data, pada dasarnya kita memerlukan dua
komponen - elemen pengontrol seperti tombol atau tautan, dan elemen modal itu sendiri.
● Wadah terluar dari setiap modal dalam dokumen harus memiliki id unik (dalam hal ini id =
"myModal", baris no-5), sehingga dapat ditargetkan melalui target-data (untuk tombol) atau
href (untuk hyperlink) atribut elemen pengontrol (baris no-2).
● Atribut data-toggle = "modal" diperlukan untuk menambahkan elemen pengontrol (baris no-2),
seperti tombol atau jangkar, bersama dengan atribut data-target = "# myModal" atau href = "#
myModal" untuk menargetkan modal khusus untuk beralih.
● Kelas dialog -modal (garis no-6) mengatur lebar serta perataan horizontal dan vertikal dari kotak
modal. Sedangkan kelas .modal-konten menetapkan gaya seperti teks dan warna latar belakang,
perbatasan, sudut membulat, dll.
Sisanya adalah penjelasan sendiri, seperti .modal-header element mendefinisikan header untuk
modal yang biasanya berisi judul modal dan tombol tutup, sedangkan elemen .modal-body berisi konten
yang sebenarnya seperti teks, gambar, bentuk dll. dan elemen .modal-footer mendefinisikan footer yang
biasanya berisi tombol tindakan untuk pengguna.
9.2 Modals memanfaatkan grid system bootstrap
Modals dengan memanfaatkan sistem grid Bootstrap dapat menggunakan cara nesting
.container-fluid dalam .modal-body. Kemudian, gunakan kelas sistem grid normal seperti yang Anda
lakukan di tempat lain.
<div class="modal-body">
<div class="modal-body">
<div class="container-fluid">
<div
<div class="container-fluid">
class="row">
<div class="col-md-4">.col-md-4</div>
<div class="row">
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div<div
class="row">
class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
Page | 71
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-6
<div class="col-md-6 ml-auto">.col-md-6
ml-auto">.col-md-6 .ml-auto</div>
.ml-auto</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-sm-9">
<div class="col-sm-9">
Level 1:
Level 1: .col-sm-9
.col-sm-9
<div class="row">
<div class="row">
<div class="col-8
<div class="col-8 col-sm-6">
col-sm-6">
Level 2:
Level 2: .col-8
.col-8 .col-sm-6
.col-sm-6
</div>
</div>
<div class="col-4
<div class="col-4 col-sm-6">
col-sm-6">
Level 2:
Level 2: .col-4
.col-4 .col-sm-6
.col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Gambar 9.4 Modals dengan memanfaatkan grid System Bootstrap
Page | 72
Latihan
Buatlah tampilan website dibawah ini semirip mungkin dengan menggunakan grida atau tabel
Page | 73
BAB X Komponen Web Interaktif Responsif Lanjutan
Waktu Pelaksanaan : 1 x 170 menit
10. Tooltips
Tooltip adalah pop up kecil yang muncul ketika pengguna menempatkan pointer mouse ke
elemen website seperti tautan atau tombol untuk memberikan petunjuk atau informasi tentang elemen
yang sedang melayang.
Tooltip dapat sangat membantu bagi pengunjung baru situs web Anda karena mereka
memungkinkan pengguna untuk mengetahui tujuan ikon dan tautan dengan menempatkan penunjuk
tetikus ke atasnya.
Langkah 1: Menambahkan Markup Tooltips
Untuk membuat tooltip, hanya perlu menambahkan atribut data-toggle = "tooltip" ke elemen. Teks
Tolltip yang akan ditampilkan pada hover dapat ditentukan menggunakan atribut judul.
Berikut adalah markup standar untuk menambahkan tolltip ke hyperlink.
<a
<ahref="#"
href="#"data-toggle="tooltip"
data-toggle="tooltip"title="Seberapa
title="Seberapateks">
teks">Arahkan
Arahkankursor
kursorke
kesaya
saya</a>
</a>
Demikian pula, dapat menambahkan keterangan alat ke elemen lain seperti tombol, ikon, dll harus
menginisialisasi mereka sendiri dengan tooltip () method.
Langkah 2: Men-trigger Tooltips
Tooltip dapat dipicu melalui JavaScript - cukup panggil saja tooltip () metode Bootstrap dengan id, kelas
atau pemilih CSS dari elemen target dalam kode JavaScript. Itu dapat menginisialisasi tooltip secara
individual atau semua sekaligus. Kode jQuery berikut akan menginisialisasi semua tooltips pada halaman
dengan memilih mereka dengan atribut toggle data.
<!DOCTYPEhtml>
<!DOCTYPE html>
<htmllang="en">
<html lang="en">
<head>
<head>
<metacharset="utf-8">
<meta charset="utf-8">
<metahttp-equiv="X-UA-Compatible"
<meta http-equiv="X-UA-Compatible"content="IE=edge">
content="IE=edge">
<metaname="viewport"
<meta name="viewport"content="width=device-width,
content="width=device-width,initial-scale=1">
initial-scale=1">
<title>ExampleofofBootstrap
<title>Example Bootstrap33Tooltip</title>
Tooltip</title>
Page | 74
<link rel="stylesheet"
ofhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Bootstrap 3 Tooltip</title>
<script
<link src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
<script type="text/javascript">
$('[data-toggle="tooltip"]').tooltip({
$(document).ready(function(){
placement : 'top'
$('[data-toggle="tooltip"]').tooltip({
});placement : 'top'
});});
});</script>
<style type="text/css">
</script>
<style.bs-example{
type="text/css">
margin: 100px 50px;
.bs-example{
} margin: 100px 50px;
</style></head>
}
<body>
</style></head>
<div class="bs-example">
<body>
<div<ul class="list-inline">
class="bs-example">
<ul <li><a href="#" data-toggle="tooltip" title="Default tooltip">Tooltip</a></li>
class="list-inline">
<li><ahref="#"
<li><a href="#"data-toggle="tooltip"
data-toggle="tooltip"title="Default
title="Another tooltip">Another tooltip</a></li>
tooltip">Tooltip</a></li>
<li><ahref="#"
<li><a href="#"data-toggle="tooltip"
data-toggle="tooltip"title="Another
title="A much tooltip">Another
longer tooltip to demonstrate the max-width of
tooltip</a></li>
the Bootstrp tooltip.">Large tooltip</a></li>
<li><a href="#" data-toggle="tooltip" title="A much longer tooltip to demonstrate the max-width of
<li><a href="#"
the Bootstrp data-toggle="tooltip"
tooltip.">Large title="The last tip!">Last tooltip</a></li>
tooltip</a></li>
</ul>
<li><a href="#" data-toggle="tooltip" title="The last tip!">Last tooltip</a></li>
</div>
</ul>
</body>
</div>
</html>
Output
dari
contoh
di atas
akan
terlihat
seperti ini:
Page | 75
Gambar 10.1 Tooltips satu baris
10.1 Mengatur Arah Tooltips
Anda dapat mengatur ujung alat untuk muncul di atas, kanan, bawah, dan kiri dari elemen.
Posisi Tooltips melalui Atribut Data
Contoh berikut akan menunjukkan kepada Anda bagaimana mengatur arah tooltips melalui atribut data.
<!DOCTYPE
<!DOCTYPEhtml> html>
<html lang="en">
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<metacharset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible"
<title>Example of Bootstrap 3 Tooltip content="IE=edge">
Placement</title>
<link name="viewport" content="width=device-width, initial-scale=1">
<meta rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Example of Bootstrap 3 Tooltip Placement</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet"
<script href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
$('[data-toggle="tooltip"]').tooltip();
});
<script type="text/javascript">
</script>
$(document).ready(function(){
<style type="text/css">
.bs-example{
$('[data-toggle="tooltip"]').tooltip();
margin: 60px;
}); }
</style>
</script>
</head>
<style type="text/css">
<body>
<div.bs-example{
class="bs-example">
<ul class="list-inline">
margin: 60px;
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Default tooltip">Tooltip</a></li>
} <li><a href="#" data-toggle="tooltip" data-placement="right" title="Another tooltip">Another
tooltip</a></li>
</style>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="A much longer tooltip to
</head>
demonstrate the max-width of the Bootstrp tooltip.">Large tooltip</a></li>
<body> <li><a href="#" data-toggle="tooltip" data-placement="left" title="The last tip!">Last
tooltip</a></li>
</ul>
</div>
</body> Page | 76
</html>
Page | 77
Output dari contoh di atas akan terlihat seperti ini:
Gambar 10.2 Pengaturan letak tooltips menggunakan data attribute
10.2 Pemosisian Tooltips melalui JavaScript
Contoh berikut akan menunjukkan cara mengatur arah tooltips melalui JavaScript.
<!DOCTYPE
<!DOCTYPE html>
html>
<html
<html lang="en">
lang="en">
<head>
<head>
<meta<meta
charset="utf-8">
charset="utf-8">
<meta<meta
http-equiv="X-UA-Compatible" content="IE=edge">
http-equiv="X-UA-Compatible" content="IE=edge">
<meta<meta
name="viewport" content="width=device-width,
name="viewport" initial-scale=1">
content="width=device-width, initial-scale=1">
<title>Example of Bootstrap
<title>Example 3 Tooltip
of Bootstrap Placement</title>
3 Tooltip Placement</title>
<link rel="stylesheet"
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
type="text/javascript">
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$(".tip-top").tooltip({
$(".tip-top").tooltip({
placement : 'top'
}); placement : 'top'
});
$(".tip-right").tooltip({
$(".tip-right").tooltip({
placement : 'right'
}); placement : 'right'
});
$(".tip-bottom").tooltip({
$(".tip-bottom").tooltip({
placement : 'bottom'
Page | 78
});
placement : 'bottom'
$(".tip-left").tooltip({
});
placement : 'left'
$(".tip-left").tooltip({
}); placement : 'left'
}); });
</script>
});
<style type="text/css">
</script>
.bs-example{
<style type="text/css">
margin: 60px;
.bs-example{
} margin: 60px;
</style>
}
</head>
</style>
<body>
</head>
<div class="bs-example">
<body>
<ulclass="bs-example">
<div class="list-inline">
<li><a
<ul href="#" data-toggle="tooltip" class="tip-top" title="Tooltip on the top side">Tooltip on
class="list-inline">
top</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-top" title="Tooltip on the top side">Tooltip on
<li><a href="#" data-toggle="tooltip" class="tip-right" title="Tooltip on the right side">Tooltip on
top</a></li>
right</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-right" title="Tooltip on the right side">Tooltip on
<li><a href="#" data-toggle="tooltip" class="tip-bottom" title="Tooltip the on bottom side">Tooltip
right</a></li>
on bottom</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-bottom" title="Tooltip the on bottom side">Tooltip
<li><a href="#" data-toggle="tooltip" class="tip-left" title="Tooltip on the left side">Tooltip on
on bottom</a></li>
left</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-left" title="Tooltip on the left side">Tooltip on
</ul>
left</a></li>
</div>
</ul>
</body>
</div>
</html>
</body>
</html>
Page | 79
Output dari contoh di atas akan
terlihat seperti ini:
Gambar 10.3 Pengaturan letak tooltips menggunakan javascript
Pilihan
Ada beberapa opsi yang mungkin dipergunakan ke tooltip () metode Bootstrap untuk menyesuaikan
fungsionalitas plugin tooltip.
Tabel 10.1 Tabel opsi elemen
Name Type Default Value Description
animation boolean true Menerapkan transisi pudar CSS ke tooltip
html boolean false Memasukkan html ke dalam keterangan alat. Jika
salah, metode teks () jQuery akan digunakan untuk
memasukkan konten ke DOM. Gunakan teks jika
Anda khawatir tentang serangan XSS.
placemen string | 'top' Mengatur posisi tooltip - atas | bawah | kiri |
t function benar | mobil. Ketika nilai "otomatis" ditentukan,
itu secara dinamis akan mengarahkan ulang
tooltip.
Sebagai contoh, jika nilai penempatan adalah "auto
top", tooltip akan ditampilkan di bagian atas bila
memungkinkan, jika tidak maka akan ditampilkan
di bagian bawah.
selector string false Jika selektor disediakan, objek tooltip akan
dilampirkan ke target yang ditentukan.
title string | '' Menetapkan nilai judul default jika atribut judul
function tidak ada.
trigger string 'hover focus' Menentukan bagaimana tooltip dipicu - klik |
arahkan | fokus | manual. Perhatikan Anda
melewati pemicu mutliple, ruang dipisahkan, jenis
pemicu.
delay number 0 Menentukan waktu untuk menunda dalam
Page | 80
| object menampilkan dan menyembunyikan tooltip Waktu
untuk menunda dalam menampilkan dan
menyembunyikan keterangan alat (ms) - tidak
berlaku untuk jenis pemicu manual.
Jika nomor diberikan, penundaan diterapkan pada
struktur objek hide / show:
keterlambatan: {show: 500, hide: 100}
container string | false Menambahkan tooltip ke penampung elemen
false spesifik: 'body'
template string '<div Menggunakan basis HTML untuk digunakan saat
class="tooltip" membuat keterangan alat. Judul tooltip akan
role="tooltip">< dimasukkan ke dalam elemen yang memiliki kelas
div .tooltip-inner dan elemen dengan kelas .tooltip-
class="tooltip- panah akan menjadi panah tooltip.
arrow"></div><
Elemen pembungkus terluar harus memiliki
div
.tooltipclass.
class="tooltip-
inner"></div></
div>'
viewport string | { selector: Mengatur tooltip dalam batas-batas elemen ini.
object 'body', padding: Contoh: viewport: '#viewport' atau {selector:
0} '#viewport', padding: 0}
Tooltips dapat diatur menggunakan opsi baik melalui penggunaan atribut data atau JavaScript.
Untuk mengatur opsi tooltips melalui atribut data, cukup tambahkan nama opsi ke data- bersama
dengan nilai yang benar, seperti data-animasi = "false", penempatan data = "bawah", dll.
Namun, JavaScript adalah cara yang lebih disukai untuk mengatur opsi ini karena mencegah dari
pekerjaan yang berulang - ulang. Lihat tooltip's method $ (). Tooltip (opsi) pada bagian di bawah ini
untuk mengetahui cara mengatur opsi untuk tooltips menggunakan JavaScript.
10.3 Metode Tooltips
Ini adalah metode tooltip Bootstrap standar:
$ (). tooltip (opsi)
Metode ini melekat pada tooltip handler ke sekelompok elemen. Ini juga memungkinkan Anda
untuk mengatur opsi untuk tooltips, sehingga Anda dapat menyesuaikannya sesuai dengan kebutuhan
Anda. Contoh berikut akan memasukkan teks yang ditentukan di dalam tooltips jika nilai atribut judul
diabaikan atau hilang dari elemen yang dipilih:
Page | 81
<!DOCTYPE
<!DOCTYPEhtml>
html>
<htmllang="en">
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta
<metahttp-equiv="X-UA-Compatible" content="IE=edge">initial-scale=1">
name="viewport" content="width=device-width,
<title>Example
<meta of Setting
name="viewport" Title for Bootstrap 3 Tooltips</title>
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
<title>Example of Setting Title for Bootstrap 3 Tooltips</title>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
<script type="text/javascript">
$("#myTooltips a").tooltip({
$(document).ready(function(){
title : 'It works in absence of title attribute.'
$("#myTooltips
}); a").tooltip({
}); title : 'It works in absence of title attribute.'
</script>
});
<style type="text/css">
});
.bs-example{
</script> margin: 100px 50px;
} type="text/css">
<style
.bs-example a{
.bs-example{
margin: 25px;
margin: 24px;
font-size: 100px 50px;
}}
</style>
.bs-example a{
</head>
margin: 25px;
<body>
font-size: 24px;
Page | 82
<div class="bs-example">
</style>
<div id="myTooltips">
</head>
<a href="#" data-toggle="tooltip" title="Edit Document"><span class="glyphicon glyphicon-
edit"></span></a>
<body>
<a href="#" data-toggle="tooltip" title="Save Document"><span class="glyphicon glyphicon-floppy-
<div class="bs-example">
disk"></span></a>
<div id="myTooltips">
<a href="#" data-toggle="tooltip" title="Download Document"><span class="glyphicon glyphicon-
download-alt"></span></a>
<a href="#" data-toggle="tooltip" title="Edit Document"><span class="glyphicon glyphicon-
edit"></span></a>
<a href="#" data-toggle="tooltip" title="Settings"><span class="glyphicon glyphicon-
cog"></span></a>
<a href="#" data-toggle="tooltip" title="Save Document"><span class="glyphicon glyphicon-floppy-
disk"></span></a>
</div>
<br> data-toggle="tooltip" title="Download Document"><span class="glyphicon glyphicon-
<a href="#"
download-alt"></span></a>
<p><strong>Note:</strong> Remove the title attribute form any link and place the
mouse pointer over it to see the result.</p>
</div>
</body>
</html>
Output dari tag diatas dapat dilihat pada gambar dibawah ini
Gambar 10.4 metode tooltips
Demikian pula, Anda dapat mengatur opsi lain untuk tooltips menggunakan metode $ ().
Tooltip (opsi). Mari kita pelajari metode lain dari plugin tooltip Bootstrap.
Page | 83
.tooltip('show')
Metode ini memperlihatkan tooltip elemen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Tooltip Methods</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".show-tooltip").click(function(){
$("#myTooltip").tooltip('show');
});
$(".hide-tooltip").click(function(){
$("#myTooltip").tooltip('hide');
});
$(".toggle-tooltip").click(function(){
$("#myTooltip").tooltip('toggle');
});
$(".destroy-tooltip").click(function(){
$("#myTooltip").tooltip('destroy');
});
});
</script>
<style type="text/css">
.bs-example{
margin: 60px;
}
</style>
</head>
<body>
<div class="bs-example">
<p>
<a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Tooltip Example</a>
</p>
<div>
<p>Klik tombol dibawah ini untuk mengontrol tooltip secara manual.</p>
<input type="button" class="btn btn-primary show-tooltip" value="Show">
<input type="button" class="btn btn-warning hide-tooltip" value="Hide">
<input type="button" class="btn btn-success toggle-tooltip" value="Toogle">
Page | 84
}); <input type="button" class="btn btn-danger destroy-tooltip" value="Destroy">
}); </div>
</div>
</script>
</body>
<style type="text/css">
</html>.bs-example{
<input type="button"
margin: 60px; class="btn btn-danger destroy-tooltip" value="Destroy">
}</div>
</div>
</style>
</body>
</head>
</html>
Output dari tag diatas dapat dilihat pada gambar dibawah ini
Gambar 10.5 Tooltips method show
Page | 85
Latihan
Buatlah tampilan website seperti dibawah ini menggunakan komponen tooltip direction
Page | 86
BAB XI Komponen Web Interaktif Responsif Lanjutan
Waktu Pelaksanaan : 1 x 170 menit
11. CAROUSEL
Seperti yang sudah diketahui bersama bahwa bootstrap menyediakan beberapa fitur javascript
dan user tinggal menggunakannya, akan tetapi fitur-fitur tersebut masih belum interaktif. Agar tidak
terlihat monoton kita bisa meng-customize fitur-fitur komponen bootstrap sesuka kita sesuai dengan
selera. Tutorial kali ini saya akan mencoba meng-customize salah satu fitur javascript dari komponen
bootstrap, fitur tersebut ialah Carousel atau bisa disebut Slide.
Dan untuk meng-customize fitur tersebut juga sangat mudah apabila sudah mengetahui titik /
hal penting yang ada dalam fitur tersebut. Mari kita lihat contoh kode dari situs getbootstrap.com untuk
membuat slideshow di bawah ini.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Indicators -->
<ol class="carousel-indicators">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
</ol>
<!-- Wrapper for slides -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-inner">
<div class="item active">
<div class="item active">
<img src="..." alt="...">
<img src="..." alt="...">
<div class="carousel-caption">
<div class="carousel-caption">
...
...
</div>
</div>
</div>
</div>
<div class="item">
<div class="item">
<img src="..." alt="...">
<img src="..." alt="...">
<div class="carousel-caption">
<div class="carousel-caption">
...
...
</div>
</div>
</div>
</div>
...
...
</div>
</div>
<!-- Controls -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Page | 87
Atribut atau elemen yang harus dan penting ada dalam fitur carousel yang pertama adalah
attribute id="...." pada line pertama, attribute data-target="..." dan data-slide-to="..." pada tag li Jika
salah satu atau dua atau ketiga attribute tersebut tidak ada maka carousel tidak akan bekerja, yang
kedua untuk attribute id="...." dan attribute data-target="..." harus memiliki nama / value yang sama,
misalkan jika id="nama-target" maka untuk attribute data-target tinggal ditambah hastag (#) data-
target="#nama-target">
Untuk lebih jelas dalam penggunaan komponen carousel, berikut dibawah ini adalah contoh penerapan
dalam source code secara lengkap
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Activate Bootstrap 3 Carousel via Data Attributes</title>
<title>Activate Bootstrap 3 Carousel via Data Attributes</title>
<link rel="stylesheet"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
<style type="text/css">
.carousel{
.carousel{
background: #2f4357;
background: #2f4357;
margin-top: 20px;
margin-top: 20px;
}
}
.carousel .item{
.carousel .item{
min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}
}
.carousel .item img{
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
margin: 0 auto; /* Align slide image horizontally center */
}
}
.bs-example{
.bs-example{
margin: 20px;
margin: 20px;
}
}
</style>
</style>
</head>
</head>
<body>
<body>
<div class="bs-example">
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- Carousel indicators -->
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</ol>
<!-- Wrapper for carousel items -->
<!-- Wrapper for carousel items -->
Page | 88
<div class="carousel-inner">
<div class="active item">
<img src="/examples/images/slide1.png" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img src="/examples/images/slide2.png" alt="Second Slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img src="/examples/images/slide3.png" alt="Third Slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>
Penjelasan dari source code diatas adalah
Carousel Bootstrap pada dasarnya memiliki tiga komponen - indikator carousel (lingkaran kecil), kontrol
korsel (panah sebelumnya dan selanjutnya) dan item atau slide korsel.
- Wadah terluar dari setiap korsel memerlukan id unik (dalam kasus diatas, id = "myCarousel")
sehingga dapat ditargetkan oleh indikator carousel (baris no-4,5,6) dan kontrol carousel (baris no-
33,36 ) berfungsi dengan benar.
- Atribut data-ride = "carousel" dari elemen .carousel memberitahu Bootstrap untuk segera memulai
animasi carousel (slide show) saat pemuatan halaman. Sedangkan atribut interval data menentukan
waktu tunda antara dua slide.
- Atribut .data-slide-to (baris no-4,5,6) memindahkan posisi slide ke item tertentu (indeks yang
diawali dengan 0) saat mengklik indikator karusel tertentu.
Page | 89
- Slide ditentukan dalam .carousel-inner (baris no-9) dan konten setiap slide didefinisikan dalam
elemen .item yang dapat berupa teks dan gambar.
- Atribut data-slide pada kontrol carousel (baris no-33,36) menerima kata kunci prev atau next, yang
mengubah posisi slide relatif terhadap posisi saat ini.
Sisanya adalah penjelasan sendiri, seperti elemen .carousel menentukan carousel Bootstrap, elemen
.carousel-indikator menunjukkan berapa banyak slide yang ada di korsel dan slide yang saat ini aktif,
elemen .carousel-caption yang digunakan dalam Elemen .item mendefinisikan keterangan untuk slide
itu, dll.
Mengaktifkan carousel melalui JavaScript
Anda juga dapat mengaktifkan carousel secara manual menggunakan JavaScript - cukup panggil metode
carousel () dengan pemilih id atau kelas dari elemen pembungkus dalam kode JavaScript Anda.
<!DOCTYPE
<!DOCTYPEhtml> html>
<html
<htmllang="en">
lang="en">
<head>
<head>
<meta
<metacharset="utf-8">
charset="utf-8">
<meta
<metahttp-equiv="X-UA-Compatible"
http-equiv="X-UA-Compatible"content="IE=edge">
content="IE=edge">
<meta
<metaname="viewport"
name="viewport"content="width=device-width,
content="width=device-width,initial-scale=1">
initial-scale=1">
<title>Activate
<title>ActivateBootstrap
Bootstrap3 3Carousel
Carouselvia
viaJavaScript</title>
JavaScript</title>
<link
<linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
rel="stylesheet"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
$(document).ready(function(){
<script type="text/javascript">
// Activate carousel
$(document).ready(function(){
$("#myCarousel").carousel();
// Activate carousel
$("#myCarousel").carousel();
// Enable carousel control
$(".left").click(function(){
// Enable carousel control
$("#myCarousel").carousel('prev');
$(".left").click(function(){
}); $("#myCarousel").carousel('prev');
$(".right").click(function(){
});
$("#myCarousel").carousel('next');
$(".right").click(function(){
}); $("#myCarousel").carousel('next');
});
// Enable carousel indicators
$(".slide-one").click(function(){
// Enable carousel indicators
$("#myCarousel").carousel(0);
$(".slide-one").click(function(){
}); $("#myCarousel").carousel(0);
$(".slide-two").click(function(){
});
$("#myCarousel").carousel(1);
$(".slide-two").click(function(){
});
$("#myCarousel").carousel(1);
$(".slide-three").click(function(){
}); $("#myCarousel").carousel(2);
});$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
Page | 90
});});
</script>
</script>
<style
<styletype="text/css">
type="text/css">
.carousel{
.carousel{
background:
background:#2f4357;#2f4357;
margin-top: 20px;
margin-top: 20px;
}}
.carousel
.carousel.item{ .item{
min-height:
min-height:280px; 280px;/*/*Prevent
Preventcarousel
carouselfrom
frombeing
beingdistorted
distortedif iffor
forsome
somereason
reasonimage
imagedoesn't
doesn'tload
load*/*/
}}
.carousel
.carousel.item .itemimg{
img{
margin:
margin: 0 auto;/*/*Align
0 auto; Alignslide
slideimage
imagehorizontally
horizontallycenter
center*/*/
}}
.bs-example{
.bs-example{
margin:
margin:20px; 20px;
}}
</style>
</style>
</head>
</head>
<body>
<body>
<div
<divclass="bs-example">
class="bs-example">
<div
<divid="myCarousel"
id="myCarousel"class="carousel
class="carouselslide"slide"data-interval="3000"
data-interval="3000"data-ride="carousel">
data-ride="carousel">
<!--
<!--Carousel
Carouselindicators
indicators--> -->
<ol
<olclass="carousel-indicators">
class="carousel-indicators">
<li<liclass="slide-one
class="slide-oneactive"></li>
active"></li>
<li<liclass="slide-two"></li>
class="slide-two"></li>
<li<liclass="slide-three"></li>
class="slide-three"></li>
</ol>
</ol>
<!--
<!--Wrapper
Wrapperfor forcarousel
carouselitemsitems-->-->
<div class="carousel-inner">
<div class="carousel-inner">
<div
<divclass="active
class="activeitem">
item">
<img
<img src="/examples/images/slide1.png"alt="First
src="/examples/images/slide1.png" alt="FirstSlide">
Slide">
<div class="carousel-caption">
<div class="carousel-caption">
<h3>First
<h3>Firstslide
slidelabel</h3>
label</h3>
<p>Lorem
<p>Lorem ipsumdolor
ipsum dolorsitsitamet,
amet,consectetur
consecteturadipiscing
adipiscingelit.</p>
elit.</p>
</div>
</div>
</div>
</div>
<div
<divclass="item">
class="item">
<img
<imgsrc="/examples/images/slide2.png"
src="/examples/images/slide2.png"alt="Second alt="SecondSlide">
Slide">
<div
<divclass="carousel-caption">
class="carousel-caption">
<h3>Second
<h3>Secondslide slidelabel</h3>
label</h3>
<p>Lorem<p>Lorem
ipsum dolor ipsumsit amet,
dolor consectetur adipiscingadipiscing
sit amet, consectetur elit.</p> elit.</p></div>
</div>
</div>
</div>
<div
<divclass="item">
class="item">
<img
<img src="/examples/images/slide3.png"
src="/examples/images/slide3.png" alt="Third
alt="ThirdSlide">
Slide">
<div class="carousel-caption">
<div class="carousel-caption">
Page | 91
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>
Pilihan
Ada opsi tertentu yang dapat diteruskan ke carousel () metode Bootstrap untuk mengkustomisasi fungsi
korsel. Pilihan dapat dilewatkan melalui atribut data atau JavaScript.
Untuk mengatur opsi modals melalui atribut data, tambahkan nama opsi ke data-, seperti data-interval =
"3000", data-pause = "hover", dll.
Tabel 11.1 opsi elemen carousel
Nama Tipe Nilai Standar Penjelasan
interval number 5000 Menentukan jumlah waktu untuk menunda (dalam
milidetik) antara satu slide ke slide lainnya dalam siklus
otomatis. Jika salah, komidi putar tidak akan otomatis
berputar.
pause string "hover" Menjeda perputaran carouel saat penunjuk mouse
null memasuki carousel dan melanjutkan sliding saat penunjuk
mouse meninggalkan carousel, secara default. Jika disetel
ke nol, carousel tidak akan melakukan jeda saat sliding.
wrap boolean true Menentukan apakah carousel harus berputar terus atau
berhenti di slide terakhir.
Page | 92
keyboard boolean true Menentukan apakah carousel harus bereaksi terhadap
keyboard events. Secara default bernilai benar artinya jika
carousel memiliki fokus Anda dapat pergi ke slide
sebelumnya dan berikutnya menggunakan tombol panah
kiri dan kanan pada keyboard.
Data attribute menyediakan cara mudah untuk mengatur opsi carousel, namun JavaScript adalah cara
yang lebih disukai karena mencegah Anda dari pekerjaan yang berulang. Lihat .carousel (opsi) metode di
bagian bawah ini untuk mengetahui cara mengatur opsi untuk komidi putar menggunakan JavaScript.
Menonaktifkan Auto Sliding di Bootstrap Carousel
Secara default, carousel Bootstrap mulai digeser secara otomatis saat halaman dimuat. Namun, Anda
dapat mematikan geser otomatis ini dengan menyetel opsi interval carousel melalui atribut data seperti
data-interval = "false" pada elemen .carousel, atau melalui JavaScript menggunakan .carousel (opsi),
seperti yang ditunjukkan pada contoh berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Preventing Bootstrap 3 Carousel from Auto Slide</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myCarousel").carousel({
interval : false
});
});
</script>
<style type="text/css">
.carousel{
background: #2f4357;
margin-top: 20px;
}
.carousel .item{
min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}
Page | 93
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="/examples/images/slide1.png" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img src="/examples/images/slide2.png" alt="Second Slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
</div>
</div>
<div class="item">
<img src="/examples/images/slide3.png" alt="Third Slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> Page | 94
</div>
</body>
</html>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>
Page | 95
Latihan
Duplikasilah tampilan website dibawah ini dengan menggunakan nav bar, modal, dan carousel
Page | 96
DAFTAR PUSTAKA
Janah, N. (2018, Agustus 28). Framework CSS : Komponen Bootstrap. Retrieved Agustus 28, 2018, from
ACADEMIA: https://www.academia.edu/12285144/komponen_bootstrap
ONPHPID. (2015, Desember 12). Belajar Bootstrap Mengenal System Grid Bootstrap 3. Retrieved
Agustus 18, 2018, from ONPHPID: https://www.onphpid.com/belajar-bootstrap-mengenal-
system-grid-bootstrap-3.html
Partnership, S. S. (2010). Web Design (HTML+CSS). Surabaya: STIKOM School Partnership.
Unknown. (2016, Mei 21). Tooltip dan Popover (4 direction). Retrieved Agustus 18, 2018, from
tutorialmembuatwebsitesite.wordpress.com:
https://tutorialmembuatwebsitesite.wordpress.com/2016/05/21/tooltip-dan-popover-4-
direction/
Page | 97
Anda mungkin juga menyukai
- Modul Teknologi Jaringan Berbasis Luas Wan Kelas Xi60% (5)Modul Teknologi Jaringan Berbasis Luas Wan Kelas Xi141 halaman
- E-Modul Sukses PPPK Tenaga Pendidik 2023 20240% (1)E-Modul Sukses PPPK Tenaga Pendidik 2023 2024207 halaman
- MODUL AJAR TKJ FASE F - Elemen 3 (Keamanan Jaringan)100% (4)MODUL AJAR TKJ FASE F - Elemen 3 (Keamanan Jaringan)45 halaman
- 60 Soal Administrasi Sistem Jaringan Kelas XII PG100% (7)60 Soal Administrasi Sistem Jaringan Kelas XII PG23 halaman
- MODUL AJAR TKJ FASE F - Elemen 1 (Perencanaan Dan Pengalamatan Jaringan)100% (3)MODUL AJAR TKJ FASE F - Elemen 1 (Perencanaan Dan Pengalamatan Jaringan)53 halaman
- Modul Praktikum Administrasi Server Instal DebianBelum ada peringkatModul Praktikum Administrasi Server Instal Debian160 halaman
- Modul Ajar Informatika SMK Genius Kelas XBelum ada peringkatModul Ajar Informatika SMK Genius Kelas X54 halaman
- MODUL AJAR TKJ FASE F - Elemen 4 (Pemasangan Dan Konfigurasi Perangkat Jaringan)0% (1)MODUL AJAR TKJ FASE F - Elemen 4 (Pemasangan Dan Konfigurasi Perangkat Jaringan)56 halaman
- Tri H - Modul Ajar DPK TJKT - Media Dan Jaringan TelekomunikasiBelum ada peringkatTri H - Modul Ajar DPK TJKT - Media Dan Jaringan Telekomunikasi77 halaman
- Modul Konsentrasi Kejuruan - XI TKJ - Irwan Widodo100% (1)Modul Konsentrasi Kejuruan - XI TKJ - Irwan Widodo105 halaman
- Modul Ajar Administrasi Sistem Jaringan Fase F100% (7)Modul Ajar Administrasi Sistem Jaringan Fase F86 halaman
- Modul AJar Dasar-Dasar Teknik Jaringan Komputer & Telekomunikasi100% (8)Modul AJar Dasar-Dasar Teknik Jaringan Komputer & Telekomunikasi6 halaman
- Ebook Penata Layanan Operasional (Materi)100% (10)Ebook Penata Layanan Operasional (Materi)26 halaman
- Modul 2 - HTML, CSS Dasar Dan Tingkat LanjutBelum ada peringkatModul 2 - HTML, CSS Dasar Dan Tingkat Lanjut30 halaman
- Orientasi Dasar Teknik Komputer Dan JaringanBelum ada peringkatOrientasi Dasar Teknik Komputer Dan Jaringan30 halaman
- Modul Ajar SMK Teknologi Jaringan Kabel Dan Nirkabel: Kelas Xi0% (1)Modul Ajar SMK Teknologi Jaringan Kabel Dan Nirkabel: Kelas Xi21 halaman
- Yayan Adrianova Eka Tuah-Jobsheet-Pemrograman-Web-1Belum ada peringkatYayan Adrianova Eka Tuah-Jobsheet-Pemrograman-Web-19 halaman
- Modul Interaksi Manusia Dan KomputerBelum ada peringkatModul Interaksi Manusia Dan Komputer49 halaman
- 22SIF0033 - HYPERTEXT MARKUP LANGUAGE (HTML) - Part2Belum ada peringkat22SIF0033 - HYPERTEXT MARKUP LANGUAGE (HTML) - Part217 halaman
- Modul Web Programming I - Esty Purwaningsih - 2Belum ada peringkatModul Web Programming I - Esty Purwaningsih - 247 halaman
- Contoh Laporan Prakerin TKJ (Teknik Komputer Jaringan)82% (174)Contoh Laporan Prakerin TKJ (Teknik Komputer Jaringan)23 halaman
- Makalah Tes Tutor - Syiffa Putri MeillaniBelum ada peringkatMakalah Tes Tutor - Syiffa Putri Meillani23 halaman
- Makalah - Pemrograman Web - FITO AZLANBelum ada peringkatMakalah - Pemrograman Web - FITO AZLAN12 halaman
- Laporan Praktikum 3 Sistem Informasi ManajemenBelum ada peringkatLaporan Praktikum 3 Sistem Informasi Manajemen14 halaman
- Laporan Praktikum Pemrograman Web: A.Mika Ilhami 0701202064Belum ada peringkatLaporan Praktikum Pemrograman Web: A.Mika Ilhami 070120206419 halaman
- MODUL 2 KLS XI - Pemrograman Web Perangkat BergerakBelum ada peringkatMODUL 2 KLS XI - Pemrograman Web Perangkat Bergerak9 halaman
- Kelompok 2 - PTI 5B - HTML Dan AUTENTICATIONBelum ada peringkatKelompok 2 - PTI 5B - HTML Dan AUTENTICATION15 halaman
- UTS - NOVIA KRISNA ISTIFARAH - 180312613017 - Off I PDFBelum ada peringkatUTS - NOVIA KRISNA ISTIFARAH - 180312613017 - Off I PDF15 halaman
- MODUL 2 KLS XI - Pemrograman Web Perangkat BergerakBelum ada peringkatMODUL 2 KLS XI - Pemrograman Web Perangkat Bergerak9 halaman
- Penata Layanan Operasional Contoh Soal Teknis85% (27)Penata Layanan Operasional Contoh Soal Teknis9 halaman
- Ebook Penata Layanan Operasional Contoh Soal Teknis95% (22)Ebook Penata Layanan Operasional Contoh Soal Teknis11 halaman
