Scribd
Unggah
79 tayangan

Pengantar Web HTML CSS Bootstrap

Dokumen tersebut membahas pengantar tentang World Wide Web (WWW), HTML, dan CSS. WWW bekerja berdasarkan protokol HTTP, alamat URL, dan HTML digunakan untuk membuat dokumen yang dapat diakses melalui web. HTML adalah bahasa markup standar untuk membuat halaman web dan menggunakan tag-tag untuk menentukan struktur konten. CSS digunakan untuk mendefinisikan gaya tampilan halaman HTML.

Diunggah oleh

Uswatun Hanaz Oj
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
79 tayangan

Pengantar Web HTML CSS Bootstrap

Dokumen tersebut membahas pengantar tentang World Wide Web (WWW), HTML, dan CSS. WWW bekerja berdasarkan protokol HTTP, alamat URL, dan HTML digunakan untuk membuat dokumen yang dapat diakses melalui web. HTML adalah bahasa markup standar untuk membuat halaman web dan menggunakan tag-tag untuk menentukan struktur konten. CSS digunakan untuk mendefinisikan gaya tampilan halaman HTML.

Diunggah oleh

Uswatun Hanaz Oj
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 65

Pengantar Web (HTML,

CSS, Bootstrap)
Teguh Satrio, S.Kom, M.Eng
World Wide Web (WWW)
• WWW bekerja merdasarkan pada tiga
mekanisme berikut:
– Protocol standard aturan yang di gunakan untuk
berkomunikasi pada computer networking,
Hypertext Transfer Protocol (HTTP) adalah
protocol untuk WWW.
– Address WWW memiliki aturan penamaan alamat
web yaitu: URL(Uniform Resource Locator) yang
di gunakan sebagai standard alamat internet.
– HTML digunakan untuk membuat document yang
bisa di akses melalui web.
• http://www.detik.com/index.html
HTML adalah
• HTML adalah bahasa markup standar untuk
membuat halaman Web.
– HTML adalah singkatan dari Hyper Text Markup Language
– HTML menggambarkan struktur halaman Web
menggunakan markup
– Elemen HTML adalah blok bangunan dari halaman HTML
– Elemen HTML diwakili oleh tag
– Tag HTML memberi label potongan konten seperti "judul",
"paragraf", "tabel", dan sebagainya
– Browser tidak menampilkan tag HTML, namun
menggunakannya untuk menampilkan konten halaman
Editor HTML

• Text editor
 Notepad ++
 Sublime Text
 Php designer
• WYSWYG (What You See What You Get)
 Macromedia dreamweaver
 Microsoft frontpage
 Microsoft publisher
Browser dan Editor
• Browser: Browser merupakan software yang
di install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi
halaman web. Browser yang sering di
gunakan biasanya Internet Explorer,
Netscape Navigator, Opera, Mozilla dan
masih banyak yang lainya.
• Editor: Program yang di gunakan untuk
membuat document HTML, ada banyak
HTML editor yang bisa anda gunakan
diantaranya: Notepad, Microsoft FrontPage,
Macromedia Dreamweaver, dan lain-lain.
Struktur Halaman HTML

<Head>
<Title>
Kepala Judul Homepage
<head> </Title>
</Head>

Homepage

<Body>
Isi…Teks
Tubuh
Isi…Tabel.
<body> Isi…Audio, Video, dll.
</Body>
Struktur Halaman HTML
HTML Ekstensi

• Untuk menyimpan file HTML ekstensi


yang digunakan adalah .htm atau html.
• Ekstensi yang paling sering digunakan
adalah .html
Contoh dokumen HTML
• <!DOCTYPE html>
<!DOCTYPE html> mendefiniskan dokumen ini
sebagai HTML5
<html> • <html> adalah elemen root
<head> dari sbuah halaman HTML
<title>Judul Halaman</title> • <head> mengandung
</head> informasi meta tentang
<body> dokumen web
• <title> menentukan judul
<h1>Ini heading</h1>
untuk dokumen
<p>Ini paragraf</p> • <body> berisi konten
</body> halaman yang terlihat
</html> • <h1> mendefinisikan heading
dengan font besar
• <p> mendefinisikan sebuah
paragraf
Tags HTML
• HTML tags digunakan untuk menandai
element HTML
• HTML tags ditandai dua character <and>
• HTML tags ditulis berpasangan seperti <b>
dan </b>
• Tags yang pertama adalah start tag dan tags
kedua adalah end tag
• Teks diantara tag adalah content element
• HTML tags tidak case sensitif , <b> sama
dengan <B>
Cara penulisan tags yang benar

Kombinasi tag bisa digunakan dengan mengikuti aturan sebagai


berikut:
<tag1> <tag2><tag n> ...</tag n> </tag2> <tag1>

Overlaping Tags, penulisan yang


kurang baik karena akan
membingungkan browser untuk
mengeksekusi kode html.

Nested Tags, penulisan yang baik


karena kode html akan lebih mudah
dieksekusi oleh browser.
Basic HTML Tags

Tag Description

<html> Defines an HTML document

<body> Defines the document's body

<h1> to <h6> Defines header 1 to header 6

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a horizontal rule

<!--> Defines a comment


HTML – Dasar
• Heading HTML didefinisikan dengan tag
<h1> sampai <h6>.
• <h1> mendefinisikan judul yang paling
penting / besar. <h6> mendefinisikan judul
yang paling tidak penting /kecil
• Paragraf HTML didefinisikan dengan tag <p>
• Tautan HTML ditentukan dengan tag <a>
• Gambar HTML didefinisikan dengan tag
<img>, File sumber (src), teks alternatif
(alt), lebar, dan tinggi disediakan sebagai
atribut
HTML -Dasar
HTML – Style
• Atribut style HTML, menetapkan style elemen
HTML, bisa dilakukan dengan atribut style.
• Atribut style HTML memiliki sintaks berikut :
<tagname style="property:value;">
• Properti itu adalah properti CSS. Nilai adalah nilai CSS.
• background-color mendefinisikan warna latar
belakang.
• color mendefinisikan warna teks.
• font-family mendefinisikan font.
• font-size mendefinisikan ukuran teks.
• text-align mendefinisikan pelurusan teks horizontal.
HTML - Style
HTML - Formatting

Tag Keterangan
<b> teks tebal
<em> teks yang ditekankan
<i> teks italic / miring
<u> teks bergaris bawah
<small> teks yang lebih kecil
<strong> teks penting / tebal
<sub> teks subscript
<sup> teks superscripted
<ins> teks yang disisipkan
<del> teks yang dihapus
<mark> teks yang ditandai / disorot
HTML - Formatting
HTML Lists

• Daftar unordered dimulai dengan tag <ul>.


Setiap item daftar dimulai dengan tag <li>.
• Item daftar akan ditandai dengan bullet
(lingkaran hitam kecil) secara default.
– Contoh :
<ul>
<li>Sigemplong</li>
<li>Pagilaran</li>
<li>Pantai Sigandu</li>
</ul>
Unordered List
Nilai Deskripsi
disc Mengatur daftar penanda item ke peluru (default)
circle Menetapkan daftar penanda item ke lingkaran
square Menetapkan daftar penanda item ke kotak
none Item daftar tidak akan ditandai

• Contoh :
<ul style="list-style-type:disc">
<li>Sigemplong</li>
<li>Pagilaran</li>
<li>Pantai Sigandu</li>
</ul>
Ordered List
• Atribut tipe tag <ol>, menentukan jenis penanda item daftar
• Contoh :
<ol type="1">
<li>Sigemplong</li>
<li>Pagilaran</li>
<li>Pantai Sigandu</li>
</ol>

Nilai Deskripsi
type="1" Item daftar akan diberi nomor dengan angka (default)
type="A" Item daftar akan diberi nomor dengan huruf besar
type="a" Item daftar akan diberi nomor dengan huruf kecil
Item daftar akan diberi nomor dengan huruf romawi
type="I"
huruf besar
Item daftar akan diberi nomor dengan nomor romawi
type="i"
huruf kecil
Nested
List
Tabel
• Tabel HTML
didefinisikan
dengan tag
<table>.
• Setiap baris
tabel
ditentukan
dengan tag
<tr>.
• Header tabel
didefinisikan
dengan tag
<th>, secara
default, judul
tabel tebal dan
terpusat.
• Data tabel / sel
didefinisikan
dengan tag
<td>.
Span Kolom Tabel
Span Baris Tabel
CSS
• CSS singkatan dari Cascading Style Sheet
• Digunakan untuk mendefenisikan style halaman HTML.
• berfungsi untuk mempercantik penampilan HTML atau
menentukan bagaimana elemen HTML ditampilkan,
seperti menentukan posisi, merubah warna teks atau
background dan lain sebagainya.
• CSS menghemat pekerjaaan, dapat digunakan untuk
mengatur layout dari beberapa halaman web sekaligus.
• CSS ditambahkan dalam HTML melalu 3 cara :
– Inline – dengan menggunakan atribut style pada elemen HTML
– Internal – dengan menggunakan elemen <style> pada bagian
<head>
– External – dengan menggunakan file CSS eksternal
Bagian CSS
• Selector adalah elemen/tag HTML yang
ingin diberi style. Anda dapat
menuliskan langsung nama tag yang
ingin diberi style tanpa perlu
menambahkan tanda <>.
• Pada contoh kode CSS di atas, kita
akan memberi style pada seluruh tag h1
yang terdapat dalam file HTML.
• Jika tag HTML yang ingin diberi style
memiliki id, anda dapat menuliskan
nama id tersebut dengan diawali tanda
kress (#).
#header
• Dan jika tag yang diberi style memiliki
class, maka penulisan selector bisa
dilakukan dengan tanda titik (.) diikuti
dengan nama class.
.artikel
Inline CSS

• Digunakan pada satu elemen HTML


• Menggunakan atribut style dari sebuah
elemen HTML
• Contoh :
– <h1 style="color:blue;">Ini judul berwarna biru</h1>
Internal CSS
• Digunakan pada satu halaman HTML
• Diletakkan pada section <head>, di dalam elemen <style>
• Contoh :

<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>ini adalah heading</h1>


<p>ini adalah sebuah paragraph.</p>

</body>
</html>
External CSS
• Digunakan pada banyak halaman HTML.
• Dengan External CSS dapat merubah tampilan dari
sebuah web site dengan hanya mengubah satu file.
• Menggunakannya dengan menambah link pada section
<head> dari halaman HTML
• Contoh
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
File “styles.css”

body {
background-color:
powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
<html>
Font CSS <head>
<style>
• color pada h1 {
color: blue;
CSS font-family: verdana;
mendefinisikan font-size: 300%;
warna teks. }
p {
• font-family color: red;
pada CSS, font-family: courier;
font-size: 160%;
mendefinisikan }
font teks </style>
</head>
• font-size pada <body>
CSS,
mendefinisikan <h1>This is a heading</h1>
<p>This is a paragraph.</p>
ukuran teks.
• Contoh : </body>
</html>
CSS border, padding, dan margin
• border : membuat garis di sekitar elemen html.
• padding : mengatur padding (spasi) diantara teks dan
border.
• margin : mengatur margin (spasi) diluar border
Contoh :

p {
border: 1px solid powderblue;
padding: 30px;
margin: 50px;
}
Atribut id
• Atribut id untuk mendefinisikan style spesifik untuk
satu elemen khusus
• Atribut id digunakan untuk penamaan elemen HTML
yang memiliki karakteristik unik/berbeda. Tidak
boleh ada dua atau lebih elemen yang mempunyai
ID yang sama
Contoh :

<p id="p01">Paragraf dengan id</p>

Mengatur di css nya sebagai berikut :

#p01 {
color: blue;
}
Contoh id
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>

<p>Sebuah Paragraf.</p>
<p>Sebuah Paragraf.</p>
<p id="p01"> Paragraf dengan id juga </p>

</body>
</html>
Atribut class
• Atribut class untuk mendefinisikan style spesifik
untuk satu elemen khusus
• class digunakan untuk penamaan elemen yang
memiliki karakteristik/struktur sama dan dapat
digunakan berulang kali dalam markup (Kode
HTML)
Contoh :

<p class=“error">Paragraf dengan class</p>

Mengatur di css nya sebagai berikut :

p.error {
color: red;
}
Contoh class <ul id=“menu”>
<li class=“merah”>Beranda</li>
<li>Tutorial</li>
<!DOCTYPE html> <li class=“merah”>Berita</li>
<html> <li>Video</li>
<head> </ul>
<style>
p.error {
color: red; .artikel h1 {
} color : red;
</style> background-color : blue;
</head> font-size : 20px;
<body> }

<p>Sebuah Paragraf.</p>
<pSebuah Paragraf.</p>
<p class="error">Paragraf dengan class</p>
<p>Sebuah Paragraf</p>
<p class="error"> Paragraf dengan class juga</p>

</body>
</html>
CSS Eskternal dengan URL

• CSS Eksternal dapat direferensikan


dengan alamat URL
• Contoh
– <link rel="stylesheet“
href=https://www.w3schools.com/html/styles.css
– <link rel="stylesheet" href="/html/styles.css“
– <link rel="stylesheet" href="styles.css">
Tentang Bootstrap
• Bootstrap adalah framework HTML,
CSS, dan JavaScript yang paling
populer untuk mengembangkan situs
web mobile pertama yang responsif.
• Bootstrap benar-benar bebas untuk
diunduh dan digunakan!
• Bootstrap dikembangkan oleh Mark
Otto dan Jacob Thornton di Twitter, dan
dirilis sebagai produk open source pada
bulan Agustus 2011 di GitHub.
Keuntungan Bootstrap

• Mudah digunakan: Siapa saja yang hanya memiliki


pengetahuan dasar tentang HTML dan CSS bisa mulai
menggunakan Bootstrap
• Fitur responsif: CSS responsif Bootstrap menyesuaikan
ke ponsel, tablet, dan desktop
• Pendekatan Mobile-first: Pada Bootstrap 3, gaya
mobile-first adalah bagian dari kerangka inti
• Kompatibilitas browser: Bootstrap kompatibel dengan
semua browser modern (Chrome, Firefox, Internet
Explorer, Safari, dan Opera)
Dimana Mendapatkan
Bootstrap?
• Download Bootstrap dari getbootstrap.com
• Disertakan Bootstrap dari CDN
• Jika tidak ingin mendownload dan meng-host Bootstrap sendiri,
Anda bisa memasukkannya dari CDN (Content Delivery
Network).
• MaxCDN menyediakan dukungan CDN untuk CSS dan
JavaScript Bootstrap. Anda juga harus menyertakan jQuery:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Struktur Bootstrap
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
Bootstrap Grid System
• Sistem grid Bootstrap memungkinkan hingga 12 kolom
di seluruh halaman.
• Jika tidak ingin menggunakan semua 12 kolom secara
terpisah, dapat mengelompokkan kolom bersama-
sama untuk membuat kolom yang lebih luas
• Sistem grid Bootstrap responsif, dan kolom akan
diatur ulang secara otomatis tergantung pada ukuran
layar.
Grid Classes
• Sistem grid Bootstrap memiliki empat
kelas:
– xs (for phones)
– sm (for tablets)
– md (for desktops)
– lg (for larger desktops)
• Kelas di atas dapat dikombinasikan
untuk menciptakan layout yang lebih
dinamis dan fleksibel.
Struktur Dasar Bootstrap Grid

<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>

• Pertama; buat baris (<div class = "row">).


• Kemudian, tambahkan jumlah kolom yang diinginkan (tag
dengan kelas .col - * - * yang sesuai).
• Perhatikan bahwa angka dalam .col - * - * harus selalu
menambahkan hingga 12 untuk setiap baris.
Contoh Grid
<!DOCTYPE html>
<html> Bootstrap
<head>
<title>Bootstrap : Grid System</title>
<link rel="stylesheet" type="text/css" href="bootstrap-4/css/bootstrap.css">
<script type="text/javascript" src="bootstrap-4/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap-4/js/bootstrap.js"></script>
</head>
<body>
<h3>Cara Menggunakan Bootstrap | Grid System</h1>

<div class="container-fluid">
<div class="col-sm-12 text-center" style="background-color: lightsteelblue;">
<h1>Politeknik Muhammadiyah Pekalongan</h1>
<p>SK Pendirian No. 91/DO/2005 tanggal 24 juni 2005.<br>Politeknik Muhamadiyah Pekalongan telah terakreditasi
oleh BAN-PT dengan No. SK 806/SK/BAN-PT/Akred/PT/VIII/2015</p>
</div>
<div class="row">
<div class="col-sm-4" style="background-color:lavenderblush;">
<h3>D-3 Manajemen Informatika</h3>
<p>Program Studi D-3 Manajemen Informatika Politeknik Muhammadiyah Pekalongan telah terakreditasi oleh
BAN-PT dengan No. SK. 032/BAN-PT/Ak-XII/DPL-III/XII/2012</p>
</div>

<div class="col-sm-4" style="background-color:lavender;">


<h3>D-3 Teknik Mesin Otomotif</h3>
<p> Program Studi D-3 Teknik Mesin Otomotif Politeknik Muhammadiyah Pekalongan telah terakreditasi oleh
BAN-PT dengan No. SK. 024/BAN-PT/Ak-XII/DPL-III/X/2012 </p>
</div>

<div class="col-sm-4" style="background-color:lavenderblush;">


<h3>D-3 Teknik Elektronika</h3>
<p>Program Studi Teknik Elektro Politeknik Muhammadiyah telah terakreditasi berdasarkan SK BAN PT No:
033/BAN-PT/Ak-XII/DPL-II/XII/2012</p>
</div>
</div>
</div>

</body>
</html>
Bootstrap Buttons
• Bootstrap menyediakan beberapa jenis
button/tombol
• Jenis class button bootstrap :
– .btn
– .btn-default
– .btn-primary
– .btn-success
– .btn-info
– .btn-warning
– .btn-danger
– .btn-link
<!DOCTYPE html>
Contoh Bootstrap button
<html>
<head>
<title>Bootstrap Part 1 : Pengertian dan Cara Menggunakan
Bootstrap</title>
<link rel="stylesheet" type="text/css" href="bootstrap-
4/css/bootstrap.css">
<script type="text/javascript" src="bootstrap-4/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap-
4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Cara Menggunakan Bootstrap | Button</h3>

<button type="button" class="btn">Basic</button>


<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>

</body>
</html>
Bootstrap Text/Typography
• Ukuran huruf default
global Bootstrap adalah
14px, dengan garis-tinggi
1,428.
• Ini diterapkan pada
elemen <body> dan
semua paragraf (<p>).
• Selain itu, semua elemen
<p> memiliki margin
bawah yang sama dengan
setengah tinggi baris yang
dihitung (10px secara
default).
• Secara default, Bootstrap
akan menata judul HTML
(<h1> ke (<h6>) dengan
cara berikut:
<small>
Di Bootstrap elemen HTML <small>
digunakan untuk membuat teks sekunder yang
lebih ringan dan ringan dalam judul apapun

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap : Heading</title>
<link rel="stylesheet" type="text/css" href="bootstrap-
4/css/bootstrap.css">
<script type="text/javascript" src="bootstrap-4/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap-
4/js/bootstrap.js"></script>
</head>
<body>

<div class="container">
<h1>Lighter, Secondary Text</h1>
<p>The small element is used to create a lighter, secondary text in any
heading:</p>
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
</div>
<dt>
<div class="container">
<h1>Deskripsi Menu</h1>
<p>Deskripsi Menu minuman:</p>
<dl>
<dt>Coffee</dt>
<dd>- minuman hitam & panas</dd>
<dt>Milk</dt>
<dd>- minuman putih dan dingin</dd>
</dl>
</div>
Blockquotes
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from
another source:</p>
<blockquote>
<p>For 50 years, WWF has been protecting the future of
nature. The world's leading conservation organization, WWF
works in 100 countries and is supported by 1.2 million members
in the United States and close to 5 million globally.</p>
<footer>From WWF's website</footer>
</blockquote>
</div>
Contextual Colors
<div class="container">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through
colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some
information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
</div>
Typographi BS lainnya
Class Keterangan
.lead Membuat paragraf menonjol
.small Mengubah teks yang lebih kecil (set ke 85% dari ukuran induknya)

.text-left Mengubah teks rata kiri-blok


.text-center Mengubah teks rata tengah-blok
.text-right Mengubah teks dengan rata kanan
.text-justify Mengubah teks yang rata kanan kiri
.text-nowrap Mengubah tidak ada teks bungkus
.text-lowercase Mengubah teks menjadi huruf kecil
.text-uppercase Mengubah teks huruf capital
.text-capitalize Mengubah teks yang dikapitalisasi
.initialism Menampilkan teks di dalam elemen <abbr> dalam ukuran font yang sedikit lebih kecil

.list-unstyled Menghapus gaya daftar default dan margin kiri pada item daftar (bekerja pada kedua
<ul> dan <ol>). Kelas ini hanya berlaku untuk item daftar anak-anak segera (untuk
menghapus daftar gaya default dari daftar bersarang, ajukan kelas ini ke daftar
bersarang juga)

.list-inline Tempatkan semua item daftar pada satu baris


.dl-horizontal Garisilah istilah (<dt>) dan deskripsi (<dd>) di elemen <dl> berdampingan. Mulai
seperti default <dl> s, tapi saat jendela browser mengembang, itu akan berbaris
berdampingan

.pre-scrollable Membuat elemen <pre> digulir


Tabel Bootstrap
• Tabel bootstrap dasar hanya terdiri dari padding tipis dan
pembatas horisontal.
<div class="container"> <tr>
<h2>Basic Table</h2> <td>Mary</td>
<p>Tabel Dasar <td>Moe</td>
Bootstap:</p>
<table class="table"> <td>[email protected]</td>
<thead> </tr>
<tr> <tr>
<th>Nama Depan</th> <td>July</td>
<th>Nama <td>Dooley</td>
Belakang</th>
<th>Email</th> <td>[email protected]</td>
</tr> </tr>
</thead> </tbody>
<tbody> </table>
<tr> </div>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
Tabel Bootstrap Basic
Striped Rows

<table class="table table-


striped">
Bordered Table
<table class="table table-
bordered">
Hover Rows
<table class="table table-
hover">
Table Condensed

<table class="table table-


condensed">
Contextual Classes
• Kelas kontekstual dapat digunakan untuk mewarnai baris tabel
atau sel tabel. Kelas yang bisa digunakan adalah: .active,
.success, .info, .warning, and .danger.
<div class="container"> Kode tabel
<h2>Contextual Classes</h2> kontekstual
<p>Contextual classes can be used to
color table rows or table cells. The <tr class="danger">
classes that can be used are: .active, <td>Danger</td>
.success, .info, .warning, and <td>Moe</td>
.danger.</p>
<table class="table"> <td>[email protected]</td>
</tr>
<thead>
<tr class="info">
<tr> <td>Info</td>
<th>Firstname</th> <td>Dooley</td>
<th>Lastname</th>
<th>Email</th> <td>[email protected]</td>
</tr>
</tr>
<tr class="warning">
</thead> <td>Warning</td>
<tbody> <td>Refs</td>
<tr>
<td>Default</td> <td>[email protected]</td>
</tr>
<td>Defaultson</td>
<tr class="active">
<td>[email protected]</td> <td>Active</td>
</tr> <td>Activeson</td>
<tr class="success">
<td>Success</td> <td>[email protected]</td>
</tr>
<td>Doe</td>
</tbody>
<td>[email protected]</td> </table>
</tr> </div>

Anda mungkin juga menyukai