Fix Ebook

EBOOK DESAIN WEB
Nama Kelompok :
Rosyid Sidiq (5140411292) {HTML}
M. Yoga Pratama (5140411298) {HTML5}
Peri Waldi Wahyudi (5140411306) {CSS}
Adi Feri Ismail (5140411289) {CSS3}
Ardi Putra (5140411324) {Web Responsive}
DAFTAR ISI
BAB 1 HTML .............................................................................................................................. 11
1.1 HTML ............................................................................................................................ 11
1.2 Elemen ........................................................................................................................... 11
1.3 Atribut............................................................................................................................ 11
1.4 Heading.......................................................................................................................... 12
1.5 Paragraphs ..................................................................................................................... 12
1.6 Style ............................................................................................................................... 13
1.7 Formatting ..................................................................................................................... 14
1.8 Comments ...................................................................................................................... 15
1.9 Colors ............................................................................................................................ 15
1.10 CSS .............................................................................................................................. 15
1.11 Links ............................................................................................................................ 16
1.12 Images.......................................................................................................................... 16
1.13 Tables .......................................................................................................................... 17
1.14 Lists ............................................................................................................................. 19
1.14.1 Unordered List ............................................................................................... 19
1.14.2 Ordered List ................................................................................................... 20
1.14.3 Mengubah Tampilan Ordered List ................................................................. 21
1.14.4 Definition List ................................................................................................ 21
1.14.5 Nested List ..................................................................................................... 22
1.15 Block............................................................................................................................ 24
1.16 Classes ......................................................................................................................... 26
1.17 Iframes ......................................................................................................................... 26
1.18 Javascript ..................................................................................................................... 28
1.19 File Paths ..................................................................................................................... 29
1.20 Head ............................................................................................................................. 29
1.21 Layout .......................................................................................................................... 30
1.22 Responsive................................................................................................................... 30
1.23 Computercode.............................................................................................................. 31
1.24 Entities ......................................................................................................................... 31
1.25 Symbol ......................................................................................................................... 33
1.26 Charset ......................................................................................................................... 34
1.26.1 HTML Character Set...................................................................................... 34
1.26.2 Pada awalnya: ASCII ..................................................................................... 35
1.26.3 Pada Windows: ANSI .................................................................................... 35
1.26.4 Dalam HTML5: Unicode (UTF-8) ................................................................ 36
1
1.27 URL Encoding ............................................................................................................. 36
1.28 XHTML ....................................................................................................................... 37
1.28.1 Apa Itu XHTML? .......................................................................................... 37
1.28.2 Penulisan Tag HTML .................................................................................... 37
1.28.3 XHTML Setiap Elemen Harus Ditutup ......................................................... 37
1.28.4 XHTML Elemen Kosong Juga Ditutup ......................................................... 37
1.28.5 XHTML Setiap Elemen Harus Menggunakan Lowercase ............................ 38
1.28.6 Nilai Atribut Harus Dikutip ........................................................................... 38
1.28.7 Minimasi Atribut Dialarang ........................................................................... 38
1.28.8 Cara Mengkonversi dari HTML ke XHTML ................................................ 38
1.29 Form ............................................................................................................................ 39

1.29.1 Form Elemen .................................................................................................. 39
1.29.2 Input Types .................................................................................................... 40
1.30 Input Atribut ................................................................................................................ 48

1.30.1 Atribut nilai .................................................................................................... 48
1.30.2 Atribut readonly ............................................................................................. 48
1.30.3 Atribut ukuran ................................................................................................ 49
1.30.4 Atribut maxlength .......................................................................................... 49
BAB 2 HTML5 ............................................................................................................................ 50

2.1 Canvas ........................................................................................................................ 50
2.1.1 Pendahuluan dan Pengertian tentang Canvas .................................................. 50
2.1.2 Kanvas Gambar ............................................................................................. 51
2.1.3 Koordinat kanvas ............................................................................................. 52
2.1.4 Draw Line ........................................................................................................ 52
2.1.5 Draw a Circle ................................................................................................... 53
2.1.6 Canvas Gradient ............................................................................................... 54
2.1.7 CreateLinearGradient ....................................................................................... 55
2.1.8 CreateRadialGradient ....................................................................................... 56

2
2.1.9 Canvas Text ..................................................................................................... 57
2.1.10 Canvas Images ............................................................................................... 59
2.2 SVG ............................................................................................................................ 60

2.2.1 Apa itu SVG? ................................................................................................... 60
2.2.2 Membuat Gambar SVG ................................................................................... 61
2.2.3 Contoh SVG Rectangle .................................................................................... 62
2.2.4 Circle ................................................................................................................ 63
2.2.5 Ellipse .............................................................................................................. 63
2.2.6 Line .................................................................................................................. 64
2.2.7 Polygon ............................................................................................................ 65
2.2.8 Polyline ............................................................................................................ 65
2.2.9 Path .................................................................................................................. 66
2.2.10 Text ................................................................................................................ 67
2.2.11 Stroke ............................................................................................................. 68
2.2.12 Blur Effect ...................................................................................................... 68
2.2.13 Drop Shadow ................................................................................................. 69
2.2.14 Linear ............................................................................................................. 70
2.2.15 Radial ............................................................................................................. 71
2.3 Google Maps ................................................................................................................. 72

2.4 Media ............................................................................................................................. 73
2.5 Video ............................................................................................................................. 75
2.6 Audio ............................................................................................................................. 76
2.7 Plug-ins .......................................................................................................................... 77
2.8 Youtube ......................................................................................................................... 78
BAB 3 CSS ................................................................................................................................... 79
3.1 CSS ................................................................................................................................ 79
3.1.1 PENGERTIAN CSS ........................................................................................ 79
3.1.2 APA ITU CSS? ................................................................................................ 80
3.1.3 FUNGSI CSS ................................................................................................... 80

3
3.2 Syntax ............................................................................................................................ 80
3.3 COLOR.......................................................................................................................... 81
3.4 BACKGROUND ........................................................................................................... 82
3.5 BORDER ....................................................................................................................... 82
3.6 Margin ........................................................................................................................... 83
3.7 PADDING ..................................................................................................................... 85
3.8 HEIGHT DAN WIDTH ............................................................................................. 86
3.9 BOX MODEL............................................................................................................. 86
3.10 OUTLINE ............................................................................................................... 87
3.11 TEXT ...................................................................................................................... 88
3.11.1 Text Color ................................................................................................... 88
3.11.2 Text Alignment ........................................................................................... 89
3.11.3 Text Decoration ........................................................................................... 89
3.12 FONT ...................................................................................................................... 91

3.12 ICONS ......................................................................................................................... 92
3.13 LINK............................................................................................................................ 93
3.14 LIST ............................................................................................................................. 94
3.15 TABLE ........................................................................................................................ 97
3.16 DISPLAY .................................................................................................................... 98
3.16.1 Display : Inline ............................................................................................... 98
3.16.2 Display:Block ................................................................................................ 98
3.16.3 Display None ................................................................................................. 99
3.17 MAX-WIDTH ............................................................................................................. 99

3.18 POSITION ................................................................................................................. 100
3.18.1 Static ............................................................................................................ 100
3.18.2 Position: absolute ......................................................................................... 101
Position: relative; .................................................................................................... 102
3.18.3 Position: Fixed........................................................................................... 103
3.19 OVERFLOW ............................................................................................................. 104

3.19.1 Contoh Overflow:auto ................................................................................. 105
3.20 FLOAT ...................................................................................................................... 105

3.21 INLINE-BLOCK ....................................................................................................... 106
3.22 ALIGN ....................................................................................................................... 108
3.22.1 Attribute align pada teks .............................................................................. 108
3.22.2 Attribute align pada image ........................................................................... 108

4
3.23 COMBINATORS ...................................................................................................... 109
3.23.1 Descendant Selector .................................................................................. 109
3.23.2 Child Selector ............................................................................................ 110
3.23.3 Adjacent Sibling Selector .......................................................................... 111
3.23.4 General Sibling Selector............................................................................ 111
3.24 PSEUDO-CLASS ...................................................................................................... 112

3.25 PSEUDO-ELEMEN ............................................................................................. 114
3.26 OPACITY .................................................................................................................. 114
3.26.1 Contoh 1 – Transparansi Gambar ................................................................ 115
3.27 Navigation Bar........................................................................................................... 116

3.27.1 Navigation Bar = Daftar Link. ..................................................................... 116
3.27.2 Navigation Bar Vertikal. ........................................................................... 117
3.27.3 Inline Daftar Produk. ................................................................................. 118
3.28 DROPDOWN ............................................................................................................ 118

3.29 TOOLTIPS ................................................................................................................ 120
3.30 IMAGE GALERY ..................................................................................................... 125
3.31 IMAGE-SPIRIT ........................................................................................................ 128
3.32 ATTRIBUTE SELECTORS ..................................................................................... 129
3.33 FORM ........................................................................................................................ 133
3.34 COUNTERS .............................................................................................................. 134
BAB 4 CSS3 ............................................................................................................................... 135
4.1 Rounded corner ........................................................................................................... 135
4.1.1 CSS3 border-radius - Tentukan Setiap Sudut ................................................ 136
4.2 BORDER IMAGE ....................................................................................................... 137

4.2.1 CSS3 Properti border-image .......................................................................... 138
4.2.2 CSS3 border-image - Nilai Iris Berbeda ........................................................ 139
4.2.3 CSS3 Properti border ..................................................................................... 141
4.3 BACKGROND IMAGE .............................................................................................. 141

4.3.1 Contoh sederhana : ......................................................................................... 142
4.3.2 Multipe bacgrond dalam satu tempat ............................................................. 143
4.3.3 BACGROND PROPERTI ............................................................................. 144
4.4 COLOR........................................................................................................................ 144

4.4.1 Warna CSS3 ................................................................................................... 144
5
4.4.2 Warna RGBA ................................................................................................. 144
4.4.3 HSL singkatan Hue, Saturation dan Lightness. ............................................. 146
4.4.4 Warna HSLA ................................................................................................. 146
4.5 Gradien ........................................................................................................................ 147

4.5.1 SS3 Gradien Linear ........................................................................................ 148
4.5.2 Linear Gradient - Atas ke Bawah (umumnya) ............................................... 148
4.5.3 Linear Gradient - Kiri ke Kanan .................................................................... 149
4.5.4 menggunakan Angles ..................................................................................... 149
4.5.5 Menggunakan Beberapa Stops Warna ........................................................... 151
4.5.6 warna .............................................................................................................. 152
4.5.7 warna .............................................................................................................. 152
4.5.8 warna Penghenti Warna (tidak merata spasi)................................................. 153
4.5.9 menggunakan Transparansi ........................................................................... 154
4.5.10 CSS3 Radial Gradien ................................................................................... 155
4.5.11 Sintaksis ....................................................................................................... 155
4.5.12 Radial Gradient - merata spasi Warna Stops (ini adalah default) ................ 155
4.6 Shadow Effects ......................................................................................................... 156

4.6.1 CSS3 Shadow Effects.................................................................................. 156
4.6.2 Text Shadow effect...................................................................................... 156
4.6.3 Beberapa Bayangan ..................................................................................... 157
4.6.4 CSS3 Properti box-shadow ............................................................................ 157
4.6.5 Kartu-kartu ..................................................................................................... 158
4.6.6 CSS3 Shadow Property .................................................................................. 158
4.7 Text .............................................................................................................................. 159

4.7.1 CSS3 Text Overflow ...................................................................................... 159
4.7.2 CSS3 Word Wrapping ................................................................................... 160
6
4.7.3 CSS3 word-break ........................................................................................... 161
4.7.4 CSS3 Text Properti ........................................................................................ 161
4.8 Font .............................................................................................................................. 162

4.8.1 Font Web CSS3 @ font-face Aturan ............................................................. 162
4.8.2 Berbeda Font Format ..................................................................................... 162
4.8.3 Menggunakan Font Anda Ingin ..................................................................... 163
4.8.4 Menggunakan Teks Bold ............................................................................... 163
4.8.5 CSS3 Font Deskriptor .................................................................................... 165
4.9 2D Transforms ............................................................................................................. 165

4.9.1 Translate ......................................................................................................... 166
4.9.2 Rotate ............................................................................................................. 167
4.9.3 Scale ............................................................................................................... 167
4.9.4 SkewX ............................................................................................................ 168
4.9.5 SkewY ............................................................................................................ 169
4.9.6 Skew............................................................................................................... 170
4.9.7 matrix ............................................................................................................. 171
4.9.8 2D Transform Metode.................................................................................... 172
4.10 3D Transforms ........................................................................................................... 173

4.10.1 rotateX.......................................................................................................... 173
4.10.2 RotateY ........................................................................................................ 173
4.10.3 RotateZ ......................................................................................................... 174
4.10.4 CSS3 Transform Properti ............................................................................. 175
4.11 Transisi CSS3 ............................................................................................................ 175

4.11.1 Cara Menggunakan CSS3 Transisi .............................................................. 175
4.11.2 Tentukan Curve Kecepatan Transisi ............................................................ 176
4.11.3 Menunda Efek Transisi ................................................................................ 177
4.11.4 Properti CSS3 Transition ............................................................................. 177

7
4.12 Animasi...................................................................................................................... 177
4.12.1 Apa CSS3 Animasi? .................................................................................... 177
4.12.2 Aturan @keyframes ..................................................................................... 178
4.12.3 MENGULANG ANIMASI.......................................................................... 179
4.12.4 DELAY ANIMASI ...................................................................................... 179
4.12.5 Jalankan Animasi di Reserve-Direction atau Alternate Cycles ................... 179
4.12.6 Tentukan Curve Kecepatan Animasi ........................................................... 180
4.12.7 CSS3 Animasi Properti ................................................................................ 180
4.13 Images........................................................................................................................ 180

4.13.1 Images bulat ................................................................................................. 180
4.13.2 Gambar responsif ......................................................................................... 181
4.13.3 Gambar transparan ....................................................................................... 181
4.14 Properti objek-fit ....................................................................................................... 182

4.14.1 Properti CSS objek-fit .................................................................................. 182
4.14.2 Semua Nilai dari properti CSS objek-fit ...................................................... 183
4.15 Buttons ....................................................................................................................... 184

4.15.1 Tombol bulat ................................................................................................ 184
4.15.2 Tombol Border Berwarna ............................................................................ 184
4.15.3 Tombol Hoverable ....................................................................................... 185
4.15.3 Tombol bayangan......................................................................................... 185
4.15.4 Tombol dinonaktifkan .................................................................................. 185
4.15.5 Grup Tombol berbatasan.............................................................................. 186
4.15.6 Grup Tombol vertikal .................................................................................. 186
4.15.7 Tombol animasi ........................................................................................... 187
4.15.8 Menambahkan efek "ditekan" pada klik: ..................................................... 188
4.16 Pagination .................................................................................................................. 188

4.16.1 Pagination sederhana ................................................................................... 188
8
4.16.2 Pagination Aktif dan Hoverable.................................................................. 189
4.16.3 Hoverable Efek Transisi .............................................................................. 189
4.16.4 Polos Pagination........................................................................................... 189
4.17 Multi Column ............................................................................................................ 189

4.17.1 CSS3 Multi-kolom Properti ......................................................................... 190
4.18 User Interface ............................................................................................................ 191

4.18.1 CSS3 Ukuran berubah otomatis ................................................................... 191
4.19 Box Sizing ................................................................................................................. 192

4.19.1 Tanpa CSS3 Properti box-sizing.................................................................. 192
4.20 Flexbox ...................................................................................................................... 193

4.20.1 Tata Letak .................................................................................................... 193
4.20.2 flexbox Elements ......................................................................................... 194
4.20.3 Justifi-content............................................................................................... 196
4.21 Media Query .............................................................................................................. 198

4.21.1 CSS2 Diperkenalkan Jenis Media ................................................................ 198
4.21.2 CSS3 Memperkenalkan Media Query ......................................................... 198
4.21.3 Contoh Sederhana Media Query .................................................................. 199
BAB 5 WEB RESPONSIVE .................................................................................................... 200

5.1 WEB RESPONSIVE ................................................................................................... 200
5.1.1 Apa itu Web Responsive? .............................................................................. 200
5.1.2 Cara mengetahui web tersebut responsive ..................................................... 200
5.2 VIEWPORT ................................................................................................................ 202

5.2.1 Apa itu Viewport? .......................................................................................... 202
5.3 GRIDVIEW ................................................................................................................. 204

5.4 MEDIA QUERIES ...................................................................................................... 211
5.5 Max-width dan Min-width .......................................................................................... 212
5.6 Operator Logika........................................................................................................... 213
5.6.1 And................................................................................................................. 213
5.6.2 Not.................................................................................................................. 213
5.6.3 Only................................................................................................................ 213
9
5.7 IMAGES AND VIDEO ............................................................................................... 213
5.8 FRAMEWORK ........................................................................................................... 219
5.8.1 MODEL ......................................................................................................... 219
5.8.2 VIEW ............................................................................................................. 219
5.8.3 CONTROLLER ............................................................................................. 219
5.8.4 FRAMEWORK CSS ..................................................................................... 220
5.8.5 GRID .............................................................................................................. 222
5.8.6 TABLE ........................................................................................................... 224
5.8.7 BUTTON ....................................................................................................... 227
5.8.8 ALERT ........................................................................................................... 229
5.8.9 ICONS............................................................................................................ 231
5.9 TEMPLATE ................................................................................................................ 237
10
BAB 1 HTML
1.1 HTML
HTML (Hyper Text Markup Language) adalah merupakan sebuah dasar ataupun pondasi
bahasa pemrograman sebuah webpage, HTML muncul sebagai standar baru dari kemajuan dan
berkembangnya internet, pada pertama kali muncul internet masih dalam keadaan berbasis text
dimana tampilan sebuah halaman web hanya berisikan sebuah text yang monoton tanpa sebuah
format dokumen secara visual, bayangkan saja sebuah dokumen text yang dikemas dalam bungkus
format seperti tipe file .txt atau sering disebut notepad, tanpa paragraph, satu warna, satu ukuran
huruf tanpa gambar serta tidak adanya visual format dokumen seperti halnya Ms. Word, hal ini
akan sangat membosankan dalam membaca. Dan selain itu pertama kali muncul internet user
mengakses masih menggunakan sebuah terminal, hal itu jelas sangatlah tidak friendly.
Pemrograman HTML muncul seiring perkembangan teknologi dan informasi.
1.2 Elemen
Elemen pada HTML adalah susunan dari tag pembuka sampai tag penutup, elemen html
didefinisikan oleh tag pembuka, lalu di lanjutkan oleh kontent lalu di akhiri oleh tag penutup.
Konsep elemen pada HTML :
<tag_pembuka>isi konten</tag_penutup>
Contoh elemen pada HTML :
<h1>header</h1>
1.3 Atribut
Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi
untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki
pasangan nama dan nilai(value), dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh
menggunakan tanda kutip satu (‘) atau dua (“).
Contoh atribut:
<a href="http://uty.ac.id.com">ini adalah sebuah link</a>
Pada kode HTML diatas, href=”http://uty.ac.id” adalah atribut.href merupakan nama dari atribut,
dan http:// uty.ac.id adalah value atau nilai dari atribut tersebut.
11
1.4 Heading
Heading atau lebih tepatnya TAG Heading merupakan TAG khusus yang disediakan oleh
HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. TAG Heading secara
default ditampilkan oleh browser dengan ukuran lebih besar dan lebih tebal (bold) dari teks biasa.
Tidak hanya sekedar untuk memberikan penampilan yang lebih tegas dan penekanan, TAG
Heading juga sangat penting dalam kaitannya dengan teknik Search Engine Optimization(SEO).
TAG Heading dalam HTML terdiri dari 6 tingkatan berdasarkan tingkat penting dan
ukurannya. TAG Heading tersebut adalah <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>. TAG H1
memiliki ukuran paling besar, sedangkan TAG h6 memiliki ukuran paling kecil.
<h1>header1</h1>
<h2>header2</h2>
<h3>header3</h3>
<h4>header4</h4>
<h5>header5</h5>
<h6>header6</h6>
hasilnya sebagai berikut:
1.5 Paragraphs
HTML menyediakan tag khusus untuk membuat paragraf. Penulisannya menggunakan
huruf p, sebagai berikut :
<p>ini adalah paragraf pertama</p>
<p>ini adalah paragraf kedua</p>
hasilnya sebagai berikut:
12
1.6 Style
HTML <style> element digunakan untuk menyisipkan kode style atau CSS ke dalam sebuah
dokumen web (HTML).
<style> element ditulis di dalam element <head>..</head> yang merupakan bagian kepala
sebuah dokumen HTML. Apabila dituliskan attribute scoped, maka penempatannya boleh ditulis
di bagian manapun di dalam element HTML, yang mana style tersebut hanya berlaku dalam
lingkup element itu sendiri (element yang menaunginya).
Elemen style merupakan satu dari berbagai cara yang dapat digunakan untuk
mengaplikasikan style atau kode CSS kedalam HTML.
<head>
<title>HTML style tag</title>
<style>
p {
color: blue;}
span {
color: red}
</style>
</head>
<body>
<p>Hello World</p>
<span>Helo Dunia</span>
</body>
Hasilnya sebagai berikut:
13
Setelah diberi syle pada p dan span makan isi konten tersebut akan menyesuaikan dengan
style css yang diberikan.
1.7 Formatting
Text formatting yaitu melakukan pengaturan / konfigurasi pada teks yang akan dijadikan
isi dari sebuah halaman web. Pengaturan tersebut akan terlihat secara real, sehingga apa yang
diinputkan pada dokumen HTML akan diperlihatkan oleh web browser. Pengaturan ini format dari
teks meliputi pengaturan heading (penjudulan pada sebuah teks / paragraf), alignment (pengaturan
align atau perataan pada suatu teks / paragraf), dan juga pengaturan font (mengatur jenis, ukuran,
dan warna font pada suatu teks / paragraf).
 <b> - Teks tebal
 <strong> - Teks penting
 <i> - Teks miring
 <em> - Teks yang ditekankan
 <mark> - Teks yang ditandai
 <small> - teks kecil
 <del> - teks yang dihapus
 <ins> - Teks yang disisipkan
 <sub> - teks subscript
 <sup> - teks superscript
Contoh penerapan:
<p>tulisan ini biasa</p>
<p><b>tulisan ini tebal</b></p>
<p><i>tulisan ini miring</i></p>
14
1.8 Comments
Untuk membuat komentar di HTML, kita menggunakan awalan <!– dan penutup –>.
Contohnya penerapan:

1.9 Colors
Perintah dasar memberi warna dan gambar adalah attribut BGCOLOR dan
BACKGROUND. Karena yang akan diberi warna adalah BODY (tubuh) HTML maka attribut
BGCOLOR dan BACKGROUND diletakkan pada tag <BODY>.
<body bgcolor="#ADE8E6">
<h1><font color="#0000CD">Contoh Memberi Warna Background</font></h1>
<p><font color="#000080">untuk mempercantik halaman situs diperlukan
warna2 atau gambar2 sebagai backgroundfont></p>
</body>
1.10 CSS
CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang
digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup
language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS
15
merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML. Untuk
lebih jelasnya tentang CSS nanti dibahas BAB II.
1.11 Links
Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah
ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.
Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a>
setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah
singkatan dari hypertext reference).
Contoh penerapan:
<p>Saya ingin berkunjung kesini
<a href="http://uty.ac.id/">UTY</a></p>
Atribut penting lainnya dari tag <a> adalah target. Atribut ini digunakan untuk
menentukan apakah link yang dituju terbuka di jendela browser saat ini, atau terbuka di jendela
baru.
Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa halaman
web saat ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru, gunakan
atribut target=”_blank”.
Contoh penerapan:
<p> Saya ingin berkunjung ke <a href=”http://uty.ac.id”
target=”_blank”>UTY</a> dan akan terbuka pada tab baru</p>
1.12 Images
img menunjukkan image yang berarti gambar dan oleh karenanya digunakan untuk
menyisipkan gambar. Gambar didalam sebuah dokumen HTML tidak dimasukkan sepenuhnya
16
pada file (.html, misalnya) akan tetapi, hanya merujukkan file sumber gambar tersebut berada
(disimpan).
HTML <img> element memiliki beragam attribute yang dapat ditulis sesuai kebutuhan.
Akan tetapi, hanya dua attribute yang wajib ditulis pada setiap <img /> element,
yaitu srcdan alt attribute. src attribute menujukkan sumber file tersebut berada,
sedangkan altmenujukkan alternatif text yang akan muncul sebagai pengganti apabila gambar
tersebut tidak dapat ditampilkan.
HMTL img element, tidak memiliki tag penutup (end/closing tag), jadi hanya ditulis <img
/> .
Contoh penerapan:
<img src="https://www.askideas.com/media/08/Old-Man-Funny-
Laughing-Picture.jpeg" alt="ganteng" />
1.13 Tables
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas
baris dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi
baris-baris, dan tiap baris dibagi ke dalam cell-cell.
Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag
<td>.Dalam konteks HTML, table mempunyai peranan yang sangat penting. Selain digunakan
untuk menampilkan tabel berisi data, table juga digunakan untuk menyusun teks dalam kolom,
ataupun membuat laporan terstruktur lainnya.
17
Seringkali table digunakan dalam halaman web untuk memperindah tampilan
ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Melihat
begitu banyaknya manfaat yang didapat dengan menggunakan tabel ini maka tabel mulai
diterapkan pemakaiannyaoleh HTML dan kemudian didukung oleh Nescape (browser pertama
yang mempelopori penggunaan table).
Dari masing-masing tag tersebut, tiap tag mempunyai tag penutup yaitu:
Tag <table> mempunyai tag penutup </table>
Tag <tr> mempunyai tag penutup </tr>
Tag <td> mempunyai tag penutup </td>
Berikut saya berikan contoh penerapan tag table:
<head>
<title>TODO supply a title</title>
<style type="text/css">
td{
border: 1px;border-style: solid; margin: 0px;
}
table{
border: 2px;border-style: double;
}
</style>
</head>
<body>
<table>
<tr>
<td>Baris 1 Kolom 1</td>
<td> Baris 1 Kolom 2</td>
</tr>
<tr>
</tr>
</table>
</body>
18
1.14 Lists
Dalam pembuatan sebuah dokumen, list (daftar) merupakan sebuah hal yang tidak dapat
dihindari. Daftar mengenai berbagai hal selalu dapat ditemukan dalam penulisan dokumen. Resep
masakan memiliki daftar bahan yang diperlukan, serta langkah-langkah memasak yang harus
diikuti. Penunjuk jalan memiliki daftar tempat yang dapat dituju, sesuai dengan arah yang akan
diambil. Seorang mahasiswa yang ingin memilih mata kuliah akan dihadapkan dengan daftar mata
kuliah. Banyaknya kegunaan daftar ini menjadikan HTML memberikan sekumpulan elemen
khusus untuk membuat daftar.
Terdapat tiga daftar utama yang dapat dibuat dengan HTML, yaitu:
1. Unordered List (Daftar Tidak Terurut), seperti namanya, memungkinkan kita untuk
membuat daftar dari hal-hal yang tidak memiliki urutan tertentu.
2. Ordered List (Daftar Terurut), kembali lagi, sesuai namanya, memberikan kita fasilitas
untuk membuat daftar hal-hal yang harus diurutkan dengan benar.
3. Definition List (Daftar Definisi), digunakan untuk membuat daftar definisi dari istilah-
istilah yang ada dalam dokumen, digunakan terutama untuk glosarium dan indeks.
Pemilihan list yang akan digunakan sendiri tentunya tergantung kepada konten yang akan
ditulis, serta makna semantik yang diinginkan.
Bagian ini akan membahas bagaimana menggunakan elemen-elemen list pada HTML,
serta cara untuk memperindah tampilan list dengan menggunakan CSS.
1.14.1 Unordered List

Seperti yang telah dijelaskan sebelumnya, unordered list digunakan untuk memberikan
daftar dari hal-hal yang tidak memiliki urutan tertentu, atau yang urutannya tidak penting.
Pembuatan unordered list dilakukan dengan menggunakan elemen ul (unordered list), yang
merupakan sebuah block level element. Untuk mengisikan daftar, kita dapat menggunakan
elemen li (list item).
Contoh penerapan:
<ul>
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
19
</ul>
Nilai-nilai dari list-style-type yang dapat diisikan untuk unordered list yaitu disc, circle,
dan square, none.
li {
list-style-type: none;
}
1.14.2 Ordered List

Seperti namanya, ordered list membuat daftar yang terurut. Elemen untuk pembuatan
ordered list yaitu ol (ordered llist), dan isi dari list sendiri dibuat dengan menggunakan elemen li,
sama seperti pada unordered lsit. Secara standar ordered list akan menggunakan angka sebagai
penanda daftar.
Contoh penerapan:
<ol>
Ordered List
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
</ol>
20
1.14.3 Mengubah Tampilan Ordered List
Sama seperti unordered list, kita juga dapat mengubah penanda daftar agar tidak
menggunakan angka desimal saja. Pengubahan penanda juga menggunakan properti list-style-
type, sama seperti pada unordered list. Adapun nilai-nilai yang dapat digunakan untuk mengubah
penanda pada ordered list yaitu: decimal, lower-roman, lower-greek, upper-alpha, upper-
latin, georgian, decimal-leading-zero, upper-roman, lower-alpha, lower-latin, dan armenian.
li {
list-style-type: lower-roman;
}
Hasilnya seperti berikut:
1.14.4 Definition List

Selain daftar terurut dan tidak terurut, kita juga seringkali menjumpai daftar definisi, yang
memberikan kita penjelasan singkat terhadap sebuah kata atau istilah yang mungkin tidak kita
ketahui. Dalam dunia menulis, daftar ini dikenal dengan nama glosarium.
Membuat glosarium dalam HTML dilakukan dengan menggunakan
elemen dl (definition list), dan kemudian alih-alih menggunakan li untuk mengisikan daftar, kita
menggunakan dua elemen lain, yaitu dt (definition term - istilah yang akan didefinisikan)
dan dd (definition description - penjelasan dari istilah).
Contoh penerapan:
<dl>
<dt>study</dt>
<dd>
21
the devotion of time and attention to acquiring
knowledge
on an academic subject, esp. by means of books
</dd>
<dt>design</dt>
<dd>
a plan or drawing produced to show the look and
function
or workings of a building, garment, or other object
before
it is built or made
</dd>
<dd>
purpose, planning, or intention that exists or is
thought
to exist behind an action, fact, or material object
</dd>
<dt>business</dt>
<dt>work</dt>
<dd>a person's regular occupation, profession, or
trade</dd>
</dl>
1.14.5 Nested List

Salah satu fitur list yang paling menarik dari HTML ialah kemampuan untuk membangun
list di dalam list. Sebuah ordered list dapat dituliskan kembali di dalam unordered list, yang
keduanya berada di dalam definiton list, ataupun sebaliknya. Sama sekali tidak ada batasan dalam
menuliskan list di dalam lsit, selain permasalahan makna semantik tentunya.
Menuliskan kode untuk list di dalam list juga sangat sederhana, dengan langsung
memasukkan list yang ingin ditambahkan ke dalam elemen li.
Contoh penerapan:
22
<ol>
<li> HTML dan CSS Dasar
<ul>
<li>
Elemen, Tag, dan Atribut
<ol>
<li>Elemen</li>
<li>Tag</li>
<li>Atribut</li>
</ol>
</li>
<li>Struktur Dokumen HTML</li>
<li>
Dasar CSS
<ol>
<li>Selector</li>
<li>Property</li>
<li>Value</li>
<li>Sintaks CSS</li>
</ol>
</li>
<li>Mengimplementasikan CSS pada HTML</li>
</ul>
</li>
</ol>
23
1.15 Block
Yang dimaksud dengan elemen block adalah Element HTML yang seberapa pendeknya
elemen itu akan dimulai dengan garis baru dan terus kebawah. bingung yaah? sama ane juga
bingung jelasinnya gimana biar temen-temen ngerti.
Contoh penerapan:
<div style="width: 50px; height: 50px; border: 1px solid black;
background-color: red;"></div>
<div style="width: 70px; height: 50px; border: 1px solid black;
background-color: green"></div>
Pada contoh diatas terlihat tag <div> secara default adalah elemen block. walaupun kita
mengatur lebar sekecil mungkin dan ketika kita membuat elemen div baru maka akan dimulai dari
garis baru lagi. biar lebih jelas lagi kita lihat contoh berikutnya.
a. Elemen P
Elemen P digunakan untuk mendefinisikan suatau paragraf, elemen ini berisi nilai
teks.
Atribut: id, class, dir, lang, style, title, xml: lang, align.
b. Elemen H1, H2, H3, H4, H5, H6
Elemen H digunakan untuk mendefinisikan suatu judul.
Atribut: id, class, dir, lang, style, title, xml: lang.
c. Elemen DL
Elemen DL digunakan untuk mendefinisikan daftar definisi
Atribut: id, class, dir, lang, style, title, xml: lang
d. Eleman DT
Elemen DT digunakan untuk mendefinisikan item pada <dl>, secara format tulisan DT
sejajar ke kiri.
Atribut: id, class, dir, lang, style, title, xml:lang.
e. Elemen DD
Elemen DD digunakan untuk mendefinisikan item pada <dl, secara format tulisan DD
sejajar ke kanan.
f. Elemen OL
Elemen OL digunakan untuk mendefinisikan daftar dengan menampilkan urutan angka
atau huruf
Atribut: id, class, dir, lang, style, title, xml:lang, compact, start, type.
g. Elemen UL
Elemen UL digunakan untuk mendefinisikan daftar tanpa urutan.
Atribut: id, class, dir, lang style, title, xml:lang
h. Elemen LI
Elemen LI digunakan untuk mendefinisikan item dari <ol> atau <ul>
Atribut: id, class, dir, lang style, title, xml:lang, type, value.
24
i. Elemen ADDRESS
Elemen Address digunakan untuk mendefinisikan teks dalam format alamat.
Atribut: id, class, dir, lang style, title, xml:lang.
j. Elemen BLOCKQUOTE
Elemen BLOCKQUOTE digunakan untuk mendefinisikan suatu kutipan, format teks
menjorok kekanan dan memberikan jarak spasi sebelum dan sesudahnya.
Atribut: id, class, dir, lang style, title, xml:lang, cite.
k. Elemen INS
Elemen INS digunakan untuk mendefinisikan teks yang baru ditambahkan pada
dokumen, format penulisan digarisbawahi.
Atribut: id, class, dir, lang style, title, xml:lang, cite, datetime.
l. Elemen DEL
Elemen DEL digunakan untuk mendefinisikan teks yang tidak digunakan pada
dokumen, format penulisan garis ditengah teks.
Atribut: id, class, dir, lang style, title, xml:lang, cite, datetime.
m. Elemen DIV
Elemen DIV digunakan untuk mendefinisikan wadah konten.
Atribut: id, class, dir, lang, style, title, xml:lang, cite.
n. Elemen SPAN
Elemen SPAN digunakan untuk mendefinisikan wadah teks.
o. Elemen HR
Elemen HR digunakan untuk mendefinisikan garis horizontal.
Atribut: id, class, dir, lang, style, title, xml:lang, align, noshade, size, width.
p. Elemen NOSCRIPT
Elemen NOSCRIPT digunakan untuk mendefinisikan kondisi jika browser tidak
mendukung script (javascript)
q. Elemen PRE
Elemen PRE digunakan untuk mendefinisikan paragraf penggunaan teks asli tanpa
format.
Atribut: id, class, dir, lang, style, title, xml:lang, width.
r. Elemen SCRIPT
Sama seperti penjelasan script diatas.
Atribut: type, charset, defer, src, xml:space.
25
1.16 Classes
memberikan beberapa nama Class pada satu elemen didalam Tag HTML, caranya kalian
bisa menambahkan nama Class tersebut dengan memisahkannya menggunakan Space antara nama
pertama, kedua, atau ketiga. Berikut adalah contoh penulisan beberapa nama Class pada satu
elemen.
<head>
<title>TODO supply a title</title>

.body{
background: black;
}
</style>
</head>
<body class="body">
</body>
Pada contoh diatas bisa kalian lihat terdapat tag <body> yang memanggil class body pada
style css.
1.17 Iframes
Menggunakan iframe, mungkin bisa dibutuhkan dalam suatu website. Penggunaannya pun
sangat mudah, hanya tinggal memanggil tag iframe pada html. Dulu bisa
26
menggunakan <frame> tapi saat digunakan di html5 ternyata tidak berfungsi. Oleh karena itu, kita
bisa menggunakan iframe sebagai penggantinya.
Apa sebenarnya fungsi dan bagaimana contoh penggunaannya? iframe bisa digunakan
untuk menampilkan halaman website lain dalam suatu website. Atau menampilkan document
HTML lain dalam sebuah website. Yaa bisa dibilang website dalam website. Contoh
penggunaannya seperti ini.
Jika kita mempunyai sebuah toko online, lalu kita menggunakan JNE sebagai kurirnya,
pasti banyak yang bertanya "ongkir kesini berapa? ongkir kesana berapa?" agar mudah kita bisa
langsung tampilkan saja halaman hitung ongkir yang ada di JNE. Nah, dapatkan alurnya? Kira-
kira seperti itu.
Contoh penerapan:
<iframe src="http://uty.ac.id" scrolling="auto" width="900px"
height="500px" frameborder="0"></iframe>
Keterangan :
 scrolling = untuk menampilkan scroll, ada 3 pilihan : auto, yes dan no.
 width : untuk mengatur lebar iframe (iframe tidak menyesuaikan diri dengan wrapper)
 height : untuk mengatur tinggi
 frameborder : mengatur border iframe
27
1.18 Javascript
JavaScript adalah bahasa pemograman yang sangat matang dan dapat dikolaborasikan
dengan dokumen HTML dan digunakan untuk membuat website yang interaktif. JavaScript
diciptakan oleh Brendan Eich yang juga co-founder dari Mozilla project, Mozilla Foundation dan
Mozilla Corporation.
Anda dapat melakukan banyak hal dengan JavaScript. Anda akan memulai dari fitur
sederhana seperti menentukan layout, membuat respon ketika mengkil button, caousels, dan
gallery gambar. Namun pada akhirnya ketika anda sudah mendapat banyak pengetahuan anda juga
akan dapat membuat game, animasi 2D dan 3D, aplikasi yang berhubungan dengan database, dan
masih banyak lagi.
JavaScript sendiri adalah bahasa yang cukup komplek namun sangat fleksibel, dan banyak
Developer (Programmer) telah menyediakan tool yang berdiri diatas core JavaScript agar anda
dapat menggunakan fungsi - fungsi ekstra, tool tersebut sebagai berikut :
 Application Programming Interfaces (APIs) dibangun pada web browser agar memungkinkan
anda melakukan apapun dari dinamik dokumen HTML dan set CSS yang anda buat, untuk
menangkap dan memodifikasi video dari web cam, atau membuat animasi 3D dan sampel
audio.
 API pihak ketiga menyediakan akses bagi Developer untuk menghubungkan aplikasi mereka
pada website atau aplikasi lain layaknya facebook dan twitter. Pernahkan anda login
soundcloud dengan facebook ? itu API pihak ketiga.
 Frameworks pihak ketiga dan libraries dapat digabungkan pada HTML sehingga
memungkinkan Developer membangun website atau aplikasi dengan cepat.
1. masukkan elemen berikut pada sebuah baris bari sebelum tag penutup </body>:
<script src="scripts/main.js"></script>
2. Ini sama halnya dengan cara kerja elemen <link> untuk CSS — ini
menempatkan JavaScript ke halaman, sehingga dapat memberikan pegaruh pada HTML
(CSS, dan lainnya pada halaman).
3. Sekarang tambahkan ode berikut pada file terpisah(main.js).
var myHeading = document.querySelector('h1');
myHeading.innerHTML = 'Hello world!';
28
1.19 File Paths
Jalur file menggambarkan lokasi file dalam struktur folder situs web. Jalur file digunakan
saat menghubungkan ke file eksternal seperti:
 Web pages
 Images
 Style sheets
 JavaScripts
Absolute File Paths
Adalah URL lengkap ke internet
<img src=" https://www.askideas.com/media/08/Old-Man-Funny-
Laughing-Picture.jpeg " alt="ganteng">
Relative File Paths
Jalur file relatif mengarah ke file yang relatif ke halaman saat ini. Dalam contoh ini path file
menunjuk ke file dalam folder gambar yang terletak di root web saat ini:
<img src="/images/picture.jpg" alt="ganteng">
1.20 Head
<head>elemen
Elemen <head> adalah wadah untuk metadata (data tentang data) dan ditempatkan di antara
tag <html> dan tag <body>. Metadata HTML adalah data tentang dokumen HTML. Metadata tidak
ditampilkan. Metadata biasanya menentukan judul dokumen, kumpulan karakter, gaya, tautan,
skrip, dan informasi meta lainnya. Tag berikut menjelaskan metadata: <title>, <style>, <meta>,
<link>, <script>, dan <base>.
<tittle>elemen
Elemen <title> mendefinisikan judul dokumen, dan diperlukan di semua dokumen HTML /
XHTML. Elemen <title>:
 mendefinisikan judul di tab browser.
 memberikan judul untuk halaman saat ditambahkan ke favorit
 menampilkan judul untuk halaman di hasil mesin pencari
<html>
<head>
<title>Paguyuban Web Desain</title>
</head>
</html>
29
1.21 Layout
Situs web sering menampilkan konten dalam beberapa kolom (seperti majalah atau surat
kabar).
<header> - Mendefinisikan sebuah header untuk dokumen atau
bagian
<nav> - Mendefinisikan sebuah wadah untuk link navigasi
<section> - Mendefinisikan sebuah bagian dalam sebuah dokumen
<article> - Mendefinisikan sebuah artikel mandiri mandiri
<aside> - Mendefinisikan konten selain konten (seperti bilah
sisi)
<footer> - Mendefinisikan footer untuk dokumen atau bagian
<details> - Mendefinisikan rincian tambahan
<summary> - Mendefinisikan sebuah heading untuk
elemen<details>
1.22 Responsive
Desain Web yang Responsif membuat halaman web Anda terlihat bagus di semua
perangkat (desktop, tablet, dan telepon).
Desain Web yang Responsif adalah tentang penggunaan HTML dan CSS untuk mengubah
ukuran, menyembunyikan, mengecilkan, memperbesar, atau memindahkan konten agar terlihat
bagus di layar mana saja.
30
Mengatur Viewport Saat membuat laman web responsif, tambahkan elemen <meta> berikut di
semua laman web Anda:
<html>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<body>
</body>
</html>
Ini akan mengatur area pandang halaman Anda, yang akan memberi petunjuk pada browser
bagaimana mengontrol dimensi dan penskalaan halaman.
1.23 Computercode
HTML <code> tag digunakan untuk menunjukkan sebuah bagian dari kode komputer
(Computer code). Kode komputer mencakup sebuah nama element XML, nama sebuah file,
program komputer, atau kode-kode lainnya yang dapat dikenali oleh komputer.
Dalam penggunaannya, disarankan memakai nama class yang menunjukkan bahasa dari
kode komputer yang digunakan. Contohnya, jika menuliskan kode CSS, maka dapat menggunakan
nama class seperti: "language-css", sehingga dapat ditulis: <code class="language-
css">...</code>.
Element code digunakan untuk memberi markup kode komputer secara inline (dalam
baris), sedangkan untuk mem-blok kode (garis baru), element <code> dapat ditulis didalam
element <pre>
Contoh penerapan:
<pre><code class="language-css">
p {
font-family: Arial;
font-size: 15px;
}
</code></pre>
1.24 Entities
Entitas karakter mempunyai 3 bagian: sebuah ampersand (&), sebuah naina entitas atau
sebuah # dan nomor entitas, dan terakhir adalah sebuah tnada titik koma (; / semicolon). Untuk,
31
menampilkan tanda lebih kecil dalam sebuah HTML maka kita harus menuliskannya : < atau
<
Kelebihan dengan menggunakan nama dibanding dengan nomor adalah nama lebih mudah
diingat.
Kekurangannya adalah tidak semua browser mendukung nama entitas terbaru; sedangkan
dukungan untuk nomor entitas hampir ada pada setiap browser.
Contoh penerapan:
<p>Untuk menuliskan suatu paragraf, maka kita harus menggunakan
tag <p> sebelum paragraf tersebut mulai dituliskan.</p>
Berikut beberapa entitas yang sering digunakan:
Kegunaan Entitas Karakter

Pada artikel Mengenal Apa Itu Parse HTML dan fungsinya, saya sudah singgung mengenai
kegunaan dari entitas karakter yaitu :
32
1. Menghindari error pada tampilan tertentu di blog ketika dibuka di suatu web browser. Hal
ini bisa terjadi karena versi browser yang masih lama (belum diupdate), sehingga suatu
karakter tidak tampil seperti yang diharapkan. Contoh sederhananya adalah seperti
berikut ini.
<img src="......" alt=".....">
Pada web browser versi terbaru / modern, kode html berwarna merah di atas akan
ditampilkan menjadi objek gambar di sebuah halaman web, tetapi karena suatu web
browser ada yang tidak mendukung tanda (<), ("), (>) maka pada tampilan sebuah web
akan menampilkan kode html di atas bukan malah objek gambarnya. Jadi, untuk
mengatasi hal tersebut digunakanlah entitas karakter.
2. Valid HTML5.
3. Blog menjadi lebih seo friendly (Hanya beberapa persen saja).
1.25 Symbol
Banyak simbol matematis, teknis, dan mata uang, tidak ada pada keyboard biasa. Untuk
menambahkan simbol tersebut ke halaman HTML, Anda dapat menggunakan nama entitas HTML.
Jika tidak ada nama entitas, Anda dapat menggunakan nomor entitas, desimal, atau referensi
heksadesimal.
Beberapa symbol pada HTML.
Symbol Number Entity
∀ ∀ ∀
∂ ∂ ∂
∃ ∃ ∃
∅ ∅ ∅
∇ ∇ ∇
∈ ∈ ∈
∉ ∉ ∉
∋ ∋ &ni;
∏ ∏ ∏
33
∑ ∑ ∑
Α Α Α
Β Β Β
Γ Γ Γ
Δ Δ Δ
Ε Ε Ε
Ζ Ζ Ζ
© © ©
® ® ®
€ € €
™ ™ ™
← ← ←
↑ ↑ ↑
→ → →
↓ ↓ ↓
♠ ♠ &spades;
♣ ♣ &clubs;
♥ ♥ &hearts;
♦ ♦ &diams;
1.26 Charset
1.26.1 HTML Character Set
Apa kode character yang tepat untuk digunakan dalam HTML?
34
Dalam HTML5, kode default character adalah UTF-8. Hal ini tidak selalu terjadi. Awal
karakter encoding jaringan adalah kode ASCII. Kemudian, dari HTML 2.0 ke HTML 4.01, ISO-
8859-1 diidentifikasi sebagai standar. Dengan munculnya HTML5 dan XML, UTF-8 telah tiba,
memecahkan banyak masalah pengkodean karakter.
Berikut ini adalah gambaran singkat dari standar pengkodean karakter.
1.26.2 Pada awalnya: ASCII
informasi komputer (nomor, teks, gambar) dalam elektronik adalah biner 1 dan 0
(01000101) untuk menyimpan.
Dalam rangka untuk mengatur penyimpanan karakter alfanumerik, menciptakan ASCII
(nama lengkap dari American Standard Kode untuk Informasi Interchange). Hal ini didefinisikan
sebagai setiap karakter disimpan dengan tujuh digit dukungan biner yang unik 0-9, atas / huruf
kecil alfabet (az, AZ), dan beberapa karakter khusus, seperti $ + - () @ <>.
Sejak ASCII menggunakan byte (7 mewakili karakter, paritas mengindikasikan kontrol
transmisi), sehingga hanya dapat mewakili 128 karakter yang berbeda. Ada 32 karakter ini
dicadangkan untuk digunakan sebagai keperluan kontrol lainnya.
ASCII Kelemahan terbesar adalah bahwa hal itu tidak termasuk huruf non-Inggris.
ASCII masih digunakan secara luas saat ini, terutama dalam sistem komputer yang besar.
Ketika browser mendeteksi ISO-8859-1 di halaman, biasanya

defaultnya adalah ANSI, karena selain ANSI 32 karakter tambahan bahwa
aspek-aspek lain dari ANSI substansial setara dengan ISO-8859-1.
1.26.3 Pada Windows: ANSI

ANSI (juga dikenal sebagai Windows-1252), adalah Windows 95 dan Windows sistem
sebelum set karakter default.
ANSI ASCII merupakan perpanjangan, itu bergabung dengan karakter internasional. Ini
menggunakan seluruh byte (8 bit) untuk mewakili 256 karakter yang berbeda. Sejak menjadi
karakter Windows ANSI menetapkan default, semua browser mendukung ANSI.
Untuk pemahaman mendalam dari ANSI, silakan lihat penuh pengguna ANSI referensi .
Dalam HTML 4 adalah: ISO-8859-1
Karena sebagian besar negara menggunakan karakter selain ASCII, standar HTML 2.0,
mengubah karakter default encoding ISO-8859-1. ISO-8859-1 diperpanjang ASCII, itu bergabung
dengan karakter internasional. Dan ANSI, menggunakan seluruh byte (8 bit) untuk mewakili 256
karakter yang berbeda.
Jika HTML 4 halaman menggunakan karakter yang berbeda set ISO-8859-1, Anda perlu
menentukan dalam tag <meta>, sebagai berikut:
35
<meta http-equiv="Content-Type" content="text/html;charset=ISO-
8859-8">
1.26.4 Dalam HTML5: Unicode (UTF-8)
Karena karakter set yang tercantum di atas terbatas, dalam lingkungan multibahasa tidak
kompatibel, sehingga Konsorsium Unicode (Unicode Consortium) mengembangkan standar
Unicode (Unicode Standard).
Unicode mencakup standar (hampir) semua karakter, tanda baca dan simbol.
Unicode memungkinkan pengolahan, penyimpanan dan transportasi dari teks, dan bahasa
platform-independen.
HTML5 karakter default set UTF-8.

Semua dukungan HTML 4 prosesor UTF-8, semua HTML5 dan prosesor XML
dukungan UTF-8 dan UTF-16.
Untuk pemahaman mendalam dari Unicode (UTF-8), silakan lihat lengkap referensi
manual Unicode .
HTML5 penulisan tag <meta> lebih pendek:
<meta charset="UTF-8">
1.27 URL Encoding

URL hanya dapat menggunakan karakter ASCII set untuk dikirim melalui Internet.
Sejak URL sering berisi karakter di luar ASCII set, URL harus dikonversi ke format
ASCII valid.
URL dikodekan menggunakan "%" diikuti oleh dua nomor heksadesimal untuk
menggantikan karakter non-ASCII.
URL tidak boleh berisi spasi. URL encoding biasanya menggunakan + untuk
menggantikan spasi.
JavaScript, PHP, ASP menyediakan fungsi string URL-encoded.
JavaScript digunakan encodeURI () fungsi, penggunaan PHP rawurlencode () fungsi,
ASP digunakan Server.URLEncode () fungsi.
36
1.28 XHTML
1.28.1 Apa Itu XHTML?
 XHTML adalah singkatan dari EXTensible HyperText Markup Language
 XHTML hampir identik dengan HTML
 XHTML lebih ketat dari HTML
 XHTML adalah HTML yang didefinisikan sebagai aplikasi XML
 XHTML didukung oleh semua browser utama
1.28.2 Penulisan Tag HTML
<! DOCTYPE ....> Wajib Dokumen XHTML harus memiliki deklarasi DOCTYPE
XHTML. Elemen <html>, <head>, <title>, dan <body> juga harus ada, dan atribut xmlns di
<html> harus menentukan namespace xml untuk dokumen. Contoh ini menunjukkan dokumen
XHTML dengan minimal tag yang diperlukan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content
</body>
</html>
Elemen XHTML Harus Berletak dengan Benar
Dalam HTML, elemen satu dengan yang lain bisa terletak secara acak:
<b><i>This text is bold and italic</b></i>
Dalam XHTML, semua elemen harus saling berletak satu sama lain:
<b><i>This text is bold and italic</i></b>
1.28.3 XHTML Setiap Elemen Harus Ditutup
Contoh salah:
<p>This is a paragraph
<p>This is another paragraph
Contoh benar:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
1.28.4 XHTML Elemen Kosong Juga Ditutup
Contoh salah:
37
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
Contoh benar:
A break: <br/>
A horizontal rule: <hr/>
An image: <img src="happy.gif" alt="Happy face" />
1.28.5 XHTML Setiap Elemen Harus Menggunakan Lowercase
Contoh salah:
<BODY>
<P>This is a paragraph</P>
</BODY>
contoh benar:
<body>
<p>This is a paragraph</p>
</body>
1.28.6 Nilai Atribut Harus Dikutip

Contoh salah:
<table width=100%>
contoh benar:
<table width="100%">
1.28.7 Minimasi Atribut Dialarang
Contoh salah:
<input type="checkbox" name="vehicle" value="car" checked />
contoh benar:
<input type="checkbox" name="vehicle" value="car" checked="checke
d" />
1.28.8 Cara Mengkonversi dari HTML ke XHTML
 Tambahkan XHTML <! DOCTYPE> ke baris pertama setiap halaman
 Tambahkan atribut xmlns ke elemen html dari setiap halaman
 Ubah semua nama elemen menjadi huruf kecil
 Tutup semua elemen kosong
 Ubah semua nama atribut menjadi huruf kecil
 Kutipan semua nilai atribut
38
1.29 Form
Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan
diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi
dengan seharusnya.
Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan
dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP yang
digunakan untuk memproses isi data form.
Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian form akan
dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post.
Perbedaan method get dan method post adalah, jika kita mengisi atribut method dengan get(dimana
ini adalah nilai default seandainya atribut method tidak ditulis) maka isian form
akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method
post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password,
atau registrasi user. Data hasil form tidak akan terlihat pada browser.
Struktur dasar form akan terlihat sebagai berikut:
<form action="prosesdata.php" method="post">
...isi form...
</form>
1.29.1 Form Elemen

Dalam belajar HTML dasar, Form merupakan materi yang sangat
penting untuk dipelajari. Form terdiri dari berbagai komponen / elemen. Elemen-
elemen dalam sebuah form berfungsi untuk memasukan data dari user dan
mengirimkannya ke server.
39
1.29.2 Input Types
1.29.2.1 Text Field (tag <input type="text" />)

Elemen form yang digunakan untuk memasukan teks (huruf dan angka)
dalam satu baris. Lebar karakter defaultnya adalah 20 karakter, nameun bisa
kita ubah sesuai keinginan kita.
Penulisan : <input type="text" />
Atribut :
 name : nama dari text field
 id : id dari text field, isinya bisa sama dengan name
 maxlength : maksimal panjang karakter yang bisa diinput
 readonly : tekxt field hanya bisa dibaca, tidak bisa diinput, tapi bisa
diklik
 disabled : tekxt field hanya bisa dibaca, tidak bisa diinput, dan tidak
bisa diklik
 placeholder : diisi dengan petunjuk atau fungsi dari text field, akan
muncul dengan warna yang samar pada text field tersebut
Struktur penulisan number field :
<form name="form1">
nama Depan : <input type="text" name="nmdpn"
maxlength="30" placeholder="nama depan anda"/><br/>
nama Belakang :< input type="text"
name="nmblk" maxlength="30" placeholder="nama belakang
anda"/>
</form>
1.29.2.2 Password Field (tag <input type="password" />)

Elemen form yang digunakan untuk memasukan teks
password dalam satu baris. Karakter yang kita ketik akan muncul
dalam bentuk titik-titik atau bulatan-bulatan hitam. Lebar karakter
defaultnya adalah 20 karakter, nameun bisa kita ubah sesuai
keinginan kita.
40
Penulisan : <input type="password" />
Atribut :
 name : nama dari password field
 id : id dari password field, isinya bisa sama dengan name
 placeholder : diisi dengan petunjuk, akan muncul dengan warna yang
samar pada password field tersebut sebelum password diisi.
<form name="form1">
Password : <input type="password" name="pwd"
maxlength="10" placeholder="kata kunci anda"/>
</form>
1.29.2.3 Number Field (tag <input type="number" />)

Elemen form yang digunakan untuk memasukan angka. Lebar karakter
defaultnya adalah 20 karakter, nameun bisa kita ubah sesuai keinginan kita.
Angka yang dimasukan bisa dibatasi dalam rentang tertentu. Jika nilai yang
dimasukan di luar rentang yang ditentukan, maka akan muncul peringatan.
Untuk menaikan dan menurunkan nilainya bisa menggunakan tombol naik dan
tombol turun.
Penulisan : <input type="number" />
Atribut :
 name : nama dari number field
 id : id dari number field, isinya bisa sama dengan name
 min : nilai minimal yang bisa diinput
 max : nilai maksimal yang bisa diinput
 placeholder : diisi dengan petunjuk, akan muncul dengan warna yang
samar pada number field tersebut sebelum diisi angka.
<form name="form1">
Jumlah : <input type="number" name="angka" maxlength="10"
41
min="1000" max="1000000" placeholder="Jumlah Hutang
Anda"/>
</form>
1.29.2.4 Date Field (tag <input type="date" />)

Elemen form yang digunakan untuk memasukan tanggal. Kita tinggal
memilih tanggal yang diinginkan dari kalender yang disediakan.
Penulisan : <input type="date" />
Atribut :
 name : nama dari date field
 id : id dari date field, isinya bisa sama dengan name
Struktur penulisan date field :
<form name="form1">
Tanggal Lahir: <input type="date" name="tgllahir" />
</form>
1.29.2.5 Range Field (tag <input type="range" />)

Elemen form yang digunakan untuk memasukan nilai dalam rentang
tertentu, nilai defaultnya 0 sampai dengan 100. disajikan dalam bentuk slider
yang bisa digeser untuk menaikan dan menurunkan nilai.
Penulisan : <input type="range" />
Atribut :
 name : nama dari range field
 id : id dari range field, isinya bisa sama dengan name
42
 min : nilai terkecil
 max : nilai terbesar
 value : nilai yang aktif
 step : nilai range penamebahan dan pengurangan
Struktur penulisan :
<form name="form1">
Volume : <input type="range" name="rgnilai" min="0"
max="100" step="1" />
</form>
1.29.2.6 Drop Down List (tag <select> </select>)

Elemen form yang digunakan untuk daftar / list dalam bentuk drop
down. Ada 2 tag yang digunakan yaitu <select> untuk mendefinisilan drop
down list dan <option> untuk mendefinisikan isinya.
Penulisan : <select ><option> isi </option></select>
Atribut :
name : nama dari drop down list (atribut dari tag select)
id : id dari drop down list (atribut dari tag select)
value : isi pilihan dari drop down list (atribut dari option)
<form name="form1">Jurusan :
<select name="Jurusan" id="jurusan">
<option value="TKJ">Teknik Informatika</option>
<option value="TSM">Akuntansi</option>
<option value="RPL">Manajemen</option>
<option value="AP">Teknik Elektro</option>
</select>
</form>
43
1.29.2.7 Text Area (tag <input type="text" />)
Elemen form yang digunakan untuk memasukan teks (huruf dan angka)
lebih dari satu baris.
Penulisan : <textarea>
Atribut :
 name : nama dari text area
 id : id dari text area, isinya bisa sama dengan name
 cols : maksimal panjang karakter yang bisa diinput
 rows : maksimal baris yang bisa diinput
 readonly : textarea hanya bisa dibaca, tidak bisa diinput, tapi bisa diklik
 disabled : textarea hanya bisa dibaca, tidak bisa diinput, dan tidak bisa
diklik
 placeholder : diisi dengan petunjuk atau fungsi dari textarea, akan
muncul dengan warna yang samar pada text field tersebut
<textarea name="pesan" id="pesan" rows="4"
cols="50">
Sesuatu yang paling pertama di hisab atas manusia adalah
sholat.
Jika sholatnya baik maka baik seluruh amalnya.
Jika sholatnya buruk maka buruk seluruh amalnya.
Bagaimana yang tidak permah sholat ????
</textarea>
44
1.29.2.8 Radio Button (tag <input type="radio" />)
Elemen form yang digunakan untuk menentukan satu pilihan di antara
beberapa pilihan yang disediakan.
Penulisan : <input type="radio">
Atribut :
 name : nama dari radio button
 id : id dari radio button, isinya bisa sama dengan name
 value : nilai dari radio buttin
 checked : memberikan tanda pilihan pada salah satu radio button
 disabled : radio button hanya ditampilkan, tidak bisa diinput dan tidak
bisa diklik
<form name="form1">Jurusan yang dipilih :<br>
<input type="radio" name="myRadio" id="myRadio"
value="TKJ" checked="checked">Teknik Informatika <br>
value="TSM">Akuntansi<br>
value="RPL">Manajemen<br>
value="AP">Teknik Elektro<br>
</form>

1.29.2.9 Submit Button (tag <input type="submit" />)
Elemen form yang berupa tombol, digunakan untuk mengirim semua
data isian dalam element form ke server (dalam hal ini file asp, php, jsp atau
yang lainnya, yang dituliskan di dalam atribut action di dalam form di mana
tombol ini ditempatkan) untuk diproses.
Penulisan : <input type="submit">
Atribut :
 name : nama dari submit button
45
 id : id dari submit button, isinya bisa sama dengan name
 value : tulisan yang muncul pada permukaan tombol
 disabled : submit button hanya ditampilkan saja dan tidak bisa diklik
Struktur penulisan submit button :
<form name="form1" action="proses.php">
<p align="center">
nama Sekolah: <br>
<input type="text" name="nm" id="nm" value="Universitas
Teknologi Yogyakarta"><br>
Aamat : <br>
<input type="text" name="alm" id="alm"
value="Yogyakarta"><br>
<input type="submit" name="ok" id="ok" value="Proses"
/>
</p>
</form>
1.29.2.10 Reset Button (tag <input

type="reset" />)
Elemen form yang berupa
tombol, digunakan untuk
membersihkan semua element form yang berupa isian.
Penulisan : <input type="reset">
Atribut :
 name : nama dari reset button
 id : id dari reset button, isinya bisa sama dengan name
 value : tulisan yang muncul pada permukaan tombol
 disabled : reset button hanya ditampilkan saja dan tidak bisa diklik
Struktur penulisan reset button :
<form name="form1" action="proses.php">
<p align="center">
nama Sekolah: <br>
<input type="text" name="nm" id="nm"><br>
Aamat : <br>
<input type="text" name="alm" id="alm" ><br><br>
<input type="reset" name="rst" id="rst"
value="Bersihkan Semua Data" />
</p>
</form>
46
1.29.2.11 Output (tag <output>)
Elemen form yang berfungsi untuk menampilkan hasil perhitungan
matematika dari 2 atau lebih elemen form input text field, number field,
atau range field .
Rumus matematikanya sendiri di tulis di dalam tag <form> dengan
menggunakan atribut oninput.
Penulisan : <output name="x" id="x" for="a b"></output>
Atribut :
 name : nama dari elemen output.
 id : id dari elemen output, isinya bisa sama dengan name
 for : untuk menghubungkan elemen output ini dengan elemen-elemen
yang digunakan di dalam rumus matematika pada tag <form>
Struktur penulisan elemen Output :
<form action=""
oninput = "x.value = parseInt(a.value)
+ parseInt(b.value)
y.value = parseInt(d.value)
- parseInt(e.value)">
Penjumlahan : <br>
<input type="number" name="a" value="10"> +
<input type="number" name="b" value="10"> =
<output name="x" for="a b"></output>
<br><br>
Pengurangan : <br>
<input type="number" name="d" value="10"> -
<input type="number" name="e" value="5"> =
<output name="y" for="d e"></output>
</form>
47
1.30 Input Atribut
1.30.1 Atribut nilai
Atribut nilai menentukan nilai awal untuk bidang masukan:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
1.30.2 Atribut readonly

Atribut readonly menentukan bahwa field input hanya bisa dibaca (tidak dapat diubah):
<form action="">
First name:<br>
48
<input type="text" name="firstname" value="John" readonly>
</form>
1.30.2.1 Atribute Disable

Atribut yang dinonaktifkan Atribut yang dinonaktifkan menentukan bahwa kolom
masukan dinonaktifkan. Bidang masukan yang dinonaktifkan tidak dapat digunakan dan tidak
dapat diklik, dan nilainya tidak akan dikirim saat mengirimkan formulir:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
1.30.3 Atribut ukuran

Atribut ukuran menentukan ukuran (dalam karakter) untuk bidang masukan:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>
1.30.4 Atribut maxlength

Atribut maxlength menentukan panjang maksimum yang diizinkan untuk bidang masukan:
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>
49
BAB 2 HTML5
2.1 Canvas
2.1.1 Pendahuluan dan Pengertian tentang Canvas
Elemen HTML <canvas> digunakan untuk menggambar grafik pada halaman web.
Grafik ke kiri dibuat dengan <canvas>. Ini menunjukkan empat elemen: persegi panjang
merah, persegi panjang gradien, persegi panjang multicolor, dan teks multicolor.
Apa kanvas HTML itu?
Elemen HTML <canvas> digunakan untuk menggambar grafik, dengan cepat, melalui
JavaScript.
Elemen <canvas> hanyalah wadah untuk grafis. Anda harus menggunakan JavaScript
untuk benar-benar menggambar grafis.
Kanvas memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan
menambahkan gambar.
50
2.1.2 Kanvas Gambar
Source code Full
Penjelasan
Untuk membuat elemen dan var canvas dengan menggunkan HTML DOM
getElemenByid()
Digunakan untuk menggambar objek untuk kanvas dan GetContext() untuk built-in objek
HTML yang digunakan untuk menggambar.
51
Digunakan untuk memberi warna di gambar kanvas menggunakan ctx.fillstyle dan
ctx.fillRect untuk menggambar persegi panjang
2.1.3 Koordinat kanvas

Kanvas HTML adalah grid dua dimensi. Sudut kiri atas kanvas memiliki koordinat (0,0)
dan metode ini digunakan: fillRect (0,0,150,75). Ini berarti: Mulai dari sudut kiri atas (0,0) dan
persegi panjang 150x75 piksel.
2.1.4 Draw Line

Untuk menggambar garis lurus pada kanvas, gunakan metode berikut:
 moveTo (x, y) - mendefinisikan titik awal garis
 lineTo (x, y) - mendefinisikan titik akhir dari garis
 Untuk benar-benar menarik garis, Anda harus menggunakan salah satu metode "tinta",
seperti goresan ().
Contoh:
Souce Code:
52
Titik awal pada posisi (0,0), dan titik akhir pada posisi (200.100). Kemudian gunakan
metode stroke () untuk benar-benar menarik garis.
2.1.5 Draw a Circle
53
busur (x, y, r, startangle, endangle) - menciptakan busur / kurva. Untuk membuat lingkaran
dengan busur (): Atur sudut mulai ke 0 dan sudut akhir ke 2 * Math.PI. Parameter x dan y
menentukan koordinat x dan y dari pusat lingkaran. Parameter r menentukan radius lingkaran.
2.1.6 Canvas Gradient

Gradien bisa digunakan untuk mengisi segi empat, lingkaran, garis, teks, dll. Bentuk pada
kanvas tidak terbatas pada warna solid.
Ada dua jenis gradien yang berbeda:
o createLinearGradient (x, y, x1, y1) - menciptakan gradien linier
o createRadialGradient (x, y, r, x1, y1, r1) - menciptakan gradien radial / melingkar
Begitu kita memiliki objek gradien, kita harus menambahkan dua atau lebih warna
berhenti.
Metode addColorStop () menentukan warna berhenti, dan posisinya sepanjang gradien.
Posisi gradien bisa berada di antara 0 sampai 1.
Untuk menggunakan gradien, atur properti fillStyle atau strokeStyle ke gradien, lalu
gambarlah bentuknya (persegi panjang, teks, atau garis).
54
2.1.7 CreateLinearGradient
Hasil Program Linear Canvas
Source Code
55
2.1.8 CreateRadialGradient
Hasil dari Radial Gradient
\
Source Code
56
2.1.9 Canvas Text
Menggambar Teks di atas kanvas
Untuk menggambar teks pada kanvas, properti dan metode yang paling penting adalah:
o font - mendefinisikan properti font untuk teks
o fillText (teks, x, y) - menggambar "isi" teks pada kanvas
o strokeText (teks, x, y) - menggambar teks pada kanvas (tidak ada isi)
Contoh
Hasil dari Run
57
Source Code
58
2.1.10 Canvas Images
Untuk menggambar gambar di kanvas, gunakan metode berikut: drawImage (gambar, x, y)
59
2.2 SVG
SVG adalah singkatan dari Scalable Vector Graphics. SVG mendefinisikan grafis berbasis vektor
dalam format XML.
2.2.1 Apa itu SVG?
 SVG adalah singkatan dari Scalable Vector Graphics
 SVG digunakan untuk mendefinisikan grafis berbasis vektor untuk Web
 SVG mendefinisikan grafis dalam format XML
 Grafik SVG TIDAK kehilangan kualitas apapun jika diperbesar atau diubah ukurannya
 Setiap elemen dan setiap atribut dalam file SVG bisa di animasi
 SVG adalah rekomendasi W3C
 SVG terintegrasi dengan standar W3C lainnya seperti DOM dan XSL
 SVG adalah Rekomendasi W3C
 SVG 1.0 menjadi Rekomendasi W3C pada tanggal 4 September 2001.
 SVG 1.1 menjadi Rekomendasi W3C pada tanggal 14 Januari 2003.
 SVG 1.1 (Edisi Kedua) menjadi Rekomendasi W3C pada tanggal 16 Agustus 2011.
60
Keuntungan SVG
 Keuntungan menggunakan SVG pada format gambar lainnya (seperti JPEG dan GIF) adalah:
 Gambar SVG dapat dibuat dan diedit dengan editor teks apapun
 Gambar SVG bisa dicari, diindeks, scripted, dan dikompres
 Gambar SVG bisa terukur
 Gambar SVG dapat dicetak dengan kualitas tinggi pada resolusi apapun
 Gambar SVG dapat diperbesar (dan gambarnya bisa diperbesar tanpa degradasi)
 SVG adalah standar terbuka
 File SVG adalah XML murni
 Pesaing utama SVG adalah Flash.
 Keuntungan terbesar SVG memiliki lebih dari Flash adalah kepatuhan terhadap standar lainnya
(misalnya XSL dan DOM). Flash mengandalkan teknologi proprietary yang tidak open source.
2.2.2 Membuat Gambar SVG

Gambar SVG dapat dibuat dengan editor teks apapun, namun seringkali lebih mudah untuk
membuat gambar SVG dengan program gambar, seperti Inkscape.
Contoh
Penjelasan Kode SVG: Gambar SVG dimulai dengan elemen <svg> Atribut lebar dan
tinggi elemen <svg> menentukan lebar dan tinggi gambar SVG Elemen <circle> digunakan untuk
menggambar lingkaran Atribut cx dan cy menentukan koordinat x dan y dari pusat lingkaran. Jika
cx dan cy dihilangkan, pusat lingkaran diatur ke (0, 0) Atribut r menentukan jari-jari lingkaran
Atase stroke dan stroke-width mengontrol bagaimana garis besar bentuk muncul. Kami
menetapkan garis besar lingkaran ke "perbatasan" hijau 4px Atribut isi mengacu pada warna di
61
dalam lingkaran. Kami mengatur warna fill menjadi kuning Tag penutup </svg> menutup gambar
SVG Catatan: Karena SVG ditulis dalam XML, semua elemen harus ditutup dengan benar!
2.2.3 Contoh SVG Rectangle
62
2.2.4 Circle
Penjelasan kode: Atribut cx dan cy menentukan koordinat x dan y dari pusat lingkaran. Jika cx dan
cy dihilangkan, pusat lingkaran diatur ke (0,0) Atribut r menentukan jari-jari lingkaran
2.2.5 Ellipse
Penjelasan kode:
o Atribut cx mendefinisikan koordinat x dari pusat elips
o Atribut cy mendefinisikan koordinat y dari pusat elips
o Atribut rx mendefinisikan radius horizontal
o Atribut ry mendefinisikan radius vertical
63
2.2.6 Line
Penjelasan kode: Atribut x1 mendefinisikan awal garis pada sumbu x Atribut y1 mendefinisikan
awal garis pada sumbu y Atribut x2 mendefinisikan ujung garis pada sumbu x Atribut y2
mendefinisikan ujung garis pada sumbu y
64
2.2.7 Polygon
Penjelasan kode:
Atribut poin mendefinisikan koordinat x dan y untuk setiap sudut polygon
2.2.8 Polyline
Point digunakan untuk membuat sudut koordinat untuk membuat lengkungan garis
65
2.2.9 Path
Membuat garis dengan menggunakan beberapa gabungan SVG seperti circle dan polygon
yang membentuk garis sesuai sudut koordinat yang sesuai
66
2.2.10 Text
Transfom digunakan untuk membentuk rotasi dari text
67
2.2.11 Stroke
Digunakan untuk membuat style garis menggunakan perintah stroke
2.2.12 Blur Effect
Penjelasan kode: Atribut id elemen <filter> mendefinisikan nama unik untuk filter Efek blur
didefinisikan dengan elemen <feGaussianBlur> Bagian in = "SourceGraphic" mendefinisikan
bahwa efeknya dibuat untuk keseluruhan elemen Atribut stdDeviiation mendefinisikan jumlah blur
Atribut filter elemen <rect> menghubungkan elemen ke filter "f1"
68
2.2.13 Drop Shadow
Penjelasan kode: Atribut id elemen <filter> mendefinisikan nama unik untuk filter Atribut filter
elemen <rect> menghubungkan elemen ke filter "f1"
69
2.2.14 Linear
Penjelasan kode:
o Atribut id dari tag <linearGradient> mendefinisikan nama unik untuk gradien
o Atribut x1, x2, y1, y2 dari tag <linearGradient> menentukan posisi awal dan akhir gradien
o Rentang warna untuk gradien dapat terdiri dari dua atau lebih warna. Setiap warna
ditentukan dengan tag <stop>. Atribut offset digunakan untuk menentukan di mana warna
gradien mulai dan diakhiri
o Atribut isi menghubungkan elemen elips dengan gradien
70
2.2.15 Radial
Penjelasan kode:
 Atribut id tag <radialGradient> mendefinisikan nama unik untuk gradien
 Atribut cx, cy dan r menentukan lingkaran terluar dan fx dan fy menentukan lingkaran terdalam
 Rentang warna untuk gradien dapat terdiri dari dua atau lebih warna. Setiap warna ditentukan
dengan tag <stop>. Atribut offset digunakan untuk menentukan di mana warna gradien mulai
dan diakhiri
 Atribut isi menghubungkan elemen elips dengan gradient
71
2.3 Google Maps
HTML5 memiliki beberapa fitur terbaru seperti yang sudah saya bahas di New Elements
dan Semantic salah satunya bias menggunakan API, Google memberi akses secara free kepada
user yang ingin memanfaatkan fitur maps,biasanya fitur ini digunakan untuk transaksi online
seperti GOJEK, GRAB , di tutorial ini saya akan review cara memanggil API Google Maps.
72
Source Code diatas digunakan untuk memanggil maps agar tampil di web kita
2.4 Media
HTML Multimedia Multimedia di web adalah suara, musik, video, film, dan animasi. Apa itu
Multimedia? Multimedia hadir dalam berbagai format. Bisa jadi hampir apapun yang bisa Anda
dengar atau lihat. Contoh: Gambar, musik, suara, video, rekaman, film, animasi, dan lainnya.
73
Halaman web sering mengandung elemen multimedia dari berbagai jenis dan format. Dalam bab
ini Anda akan belajar tentang berbagai format multimedia. Dukungan Browser Browser web
pertama hanya mendukung teks saja, terbatas pada satu font dalam satu warna. Kemudian datang
browser dengan dukungan untuk warna dan font, dan gambar! Audio, video, dan animasi telah
ditangani secara berbeda oleh browser utama. Format yang berbeda telah didukung, dan beberapa
format memerlukan program pembantu tambahan (plug-in) untuk bekerja. Semoga ini menjadi
sejarah. Multimedia HTML5 menjanjikan masa depan yang lebih mudah untuk multimedia.
Format Multimedia Elemen multimedia (seperti audio atau video) disimpan dalam file media. Cara
yang paling umum untuk menemukan jenis file, adalah dengan melihat ekstensi file. File
multimedia memiliki format dan ekstensi yang berbeda seperti: .swf, .wav, .mp3, .mp4, .mpg,
.wmv, and .avi. Format Video Umum Videoformats MP4 adalah format baru dan yang akan datang
untuk video internet. MP4 direkomendasikan oleh YouTube. MP4 didukung oleh Flash Players.
MP4 didukung oleh HTML5.
Format Deskripsi File MPEG .mpg .mpeg MPEG. Dikembangkan oleh Moving Pictures Expert
Group. Format video populer pertama di web. Dulu didukung oleh semua browser, tapi tidak
didukung di HTML5 (See MP4). AVI .avi AVI (Audio Video Interleave). Dikembangkan oleh
Microsoft. Biasa digunakan di kamera video dan perangkat keras TV. Dimainkan dengan baik
pada komputer Windows, tapi tidak di browser web. WMV .wmv WMV (Windows Media Video).
Dikembangkan oleh Microsoft. Biasa digunakan di kamera video dan perangkat keras TV.
Dimainkan dengan baik pada komputer Windows, tapi tidak di browser web. QuickTime .mov
QuickTime. Dikembangkan oleh Apple. Biasa digunakan di kamera video dan perangkat keras
TV. Dimainkan dengan baik di komputer Apple, tapi tidak di browser web. (Lihat MP4) RealVideo
.rm .ram RealVideo Dikembangkan oleh Real Media untuk memungkinkan video streaming
dengan bandwidth rendah. Ini masih digunakan untuk video online dan TV Internet, namun tidak
diputar di browser web. Flash .swf Flv Flash. Dikembangkan oleh Macromedia. Seringkali
membutuhkan komponen tambahan (plug-in) untuk bermain di web browser. Ogg .ogg Theora
Ogg. Dikembangkan oleh Yayasan Xiph.Org. Didukung oleh HTML5. WebM .webm WebM.
74
Dikembangkan oleh raksasa web, Mozilla, Opera, Adobe, dan Google. Didukung oleh HTML5.
MPEG-4 atau MP4 .mp4 MP4. Dikembangkan oleh Moving Pictures Expert Group. Berdasarkan
QuickTime. Biasa digunakan pada kamera video yang lebih baru dan perangkat keras TV.
Didukung oleh semua browser HTML5. Disarankan oleh YouTube. Hanya video MP4, WebM,
dan Ogg yang didukung oleh standar HTML5.
2.5 Video
Memainkan Video dalam HTML
o Sebelum HTML5, video hanya bisa dimainkan di browser dengan plug-in (seperti
flashdisk).
o Elemen HTML5 <video> menentukan cara standar untuk menyematkan video di laman
web
Video HTML - Metode, Properti, dan Acara

o HTML5 mendefinisikan metode DOM, properti, dan acara untuk elemen <video>.
o Ini memungkinkan Anda memuat, memutar, dan menjeda video, serta menetapkan durasi
dan volume.
o Ada juga acara DOM yang dapat memberi tahu Anda saat video mulai diputar, dijeda, dll.
Contoh
75
2.6 Audio
Audio di Web
o Sebelum HTML5, file audio hanya bisa dimainkan di browser dengan plug-in (seperti
flashdisk).
o Elemen HTML5 <audio> menentukan cara standar untuk menyematkan audio di halaman
web.
HTML Audio - Cara Kerjanya

o Atribut kontrol menambahkan kontrol audio, seperti permainan, jeda, dan volume.
o Elemen <source> memungkinkan Anda menentukan file audio alternatif yang mungkin
dipilih browser. Browser akan menggunakan format yang dikenali pertama kali.
o Teks antara tag <audio> dan </ audio> hanya akan ditampilkan di browser yang tidak
mendukung elemen <audio>
HTML Audio - Methods, Properties, and Events HTML5 mendefinisikan metode DOM, properti,
dan acara untuk elemen <audio>. Ini memungkinkan Anda memuat, memutar, dan menjeda audio,
serta menetapkan durasi dan volume. Ada juga acara DOM yang dapat memberi tahu Anda saat
audio mulai diputar, dijeda, dll..
Contoh
76
2.7 Plug-ins
Pembantu HTML (Plug-in)

Aplikasi pembantu (plug-in) adalah program komputer yang memperluas fungsionalitas
standar browser web.
Contoh plug-in yang terkenal adalah applet Java.
o Plugin dapat ditambahkan ke halaman web dengan tag <object> atau tag <embed>.
o Plugin dapat digunakan untuk berbagai tujuan: menampilkan peta, memindai virus,
memverifikasi id bank Anda, dll.
Untuk menampilkan video dan audio: Gunakan tag <video> dan <audio>.
o Elemen <object>
o Elemen <object> didukung oleh semua browser.
o Elemen <object> mendefinisikan objek yang disematkan dalam dokumen HTML.
o Ini digunakan untuk menanamkan plug-in (seperti applet Java, pembaca PDF, Flash
Players) di halaman web.
Contoh
77
2.8 Youtube
Format Video? Sebelumnya dalam tutorial ini, Anda telah melihat bahwa harus
mengonversi video ke format yang berbeda untuk membuat mereka bermain di semua browser.
Mengkonversi video ke format yang berbeda bisa jadi sulit dan menyita waktu. Solusi yang lebih
mudah adalah membiarkan YouTube memutar video di halaman web Anda. Id Video YouTube
YouTube akan menampilkan id (seperti XGSy3_Czz8k), saat menyimpan (atau memutar) video.
78
Anda dapat menggunakan id ini, dan merujuk ke video Anda dalam kode HTML. Memainkan
Video YouTube dalam HTML Untuk memutar video Anda di halaman web, lakukan hal berikut:
Upload video ke YouTube Ambil catatan id video Tentukan elemen <iframe> di halaman web
Anda Biarkan atribut src mengarah ke URL video Gunakan atribut lebar dan tinggi untuk
menentukan dimensi pemutar Tambahkan parameter lainnya ke URL (lihat di bawah)
Contoh
BAB 3 CSS
3.1 CSS
3.1.1 PENGERTIAN CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang
menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat
dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang
(background), ukuran font (font sizes) dan lain-lain.
Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak)
disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda
pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser
bagaimana suatu dokumen akan disajikan.
Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style
sheet. Saat menggunakan CSS, Kita tidak perlu menulis font, color atau size pada setiap paragraf,
atau pada setiap dokumen. Setelah Kita membuat sebuah style sheet, Kita dapat menyimpan kode
tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan
79
3.1.2 APA ITU CSS?
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang
mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan
penkita(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan
XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan
XUL bahkan ANDROID.
CSS dibuat untuk memisahkan konten utamadengan tampilan dokumen yang meliputi layout,
warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan
lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah
tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi
kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain
web.
CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan
menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan
lain-lain. Sementaraitu, pemilik konten web bisa menentukan link yang menghubungkan konten
dengan file CSS.
Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan
dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan.
Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan formatting. Dengan
adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan
pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan
dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu
pembuatan web.
3.1.3 FUNGSI CSS

Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog
juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah
tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.
3.2 Syntax
80
Pointer menunjuk ke elemen HTML yang ingin Kita ubah.
Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.
Setiap deklarasi mencakup nama properti CSS dan nilai, dipisahkan oleh titik dua.
Deklarasi CSS selalu berakhir dengan titik koma, dan blok deklarasi dikelilingi oleh kurung
kurawal.
Dalam contoh berikut semua elemen <p> akan berada di tengah-tengah, dengan warna teks merah:
3.3 COLOR
Menentukan warna untuk satu elemen
Contoh :
{ color : red}
{color : #DDEEA1}
81
3.4 BACKGROUND
Menentukan metode untuk peletakan gambar suatu elemen
Contoh :
{width:720px; height:960px; background : url (“namafile.jpg”) }
3.5 BORDER
Border/garis tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif
atau untuk memberi garis batas pemisah dari dua hal. Border properti mendefinisikan width, color,
and style dari batas area pada box/kotak.
CSS memberi Kita pilihan dalam menggunakan border antara lain :
 border-style
82
 border-width
 border-color
 border-individual
Border Style
Properti border-style untuk menentukan bentuk (style) dari tampilan border.
Tak satu pun dari properti border memiliki efek APAPUN kecuali telah menempatkan
properti border-style dahulu!
Ada 9 type border-style values yang umum digunakan dalam CSS :
1. None : mendefinisikan tidak ada border
p{border-style:none;}
2. Dotted : Berarti border berupa (titik)
p{border-style:dotted;}
3. Dashed : Border berupa dashed (garis putus-putus)
P{border-style:dashed;}
4. Solid : Border yang solid
p{border-style:solid;}
5. Double : Mendefinisikan double border, lebar double adalah sama dengan nilai border-
width
P{border-style:double;}
6. Groove : Mendefiniskan sebuah border groove (beralur) 3D, efeknya tergantung pada
nilai border-color
P{border-style:groove;}
7. Ridge : Mendefinisikan sebuah border bergigi (ridge) 3D, efeknya tergantung pada nilai
border-color
P{border-style:ridge;}
8. Inset : Mendefinisikan sebuah border inset 3D,efeknya tergantung pada nilai border-
color
P{border-style:inset;}
9. Outset : Mendefisikan sebuah border outset 3D, efeknya tergantung pada nilai border-
color
P{border-style:outset;}
3.6 Margin
Margin (dalam pengertian CSS) adalah ruang disekitar elemen/konten. Margin akan
membentuk daerah (ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak
memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain. Agar
83
margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float atau diposisikan relative.
Style ini sering diterapkan untuk dapat memindahkan elemen lain di sekitarnya.
Secara visual akan lebih mudah memahami definisi dari margin ini
Margin dapat diatur menggunakan properti margin "shorthand" (yaitu istilah, yang
mewakili empat nilai marjin untuk elemen) atau dengan penulisan stye "longhand". Untuk itu
dibawah saya beri contoh beberapa penulisan margin dalam css.
Contoh penulisan margin pada suatu elemen ("shorthand")
#element { margin: 10px;}
Ini berarti elemen memilki margin yang sama "10px" untuk setiap sisi elemen
#element { margin: 10px 20px; }
Ini berarti elemen memiliki:

-margin-top, margin-bottom : "10px"
-margin-left, margin-right : "20px"
#element { margin: 10px 20px 5px 15px; }
84
Elemen ini memiliki -margin-top : 10px, margin-right: 20px, margin-bottom : 5px, margin-
left: 15px
Berikut penulisan margin style "longhand":
#element { margin-top: 10px; margin-right: 5px; margin-

bottom: 5px; margin-left: 10px;}
3.7 PADDING
Padding adalah sebutan untuk spasi atau ruang diantara konten dan border.
Gambar CSS Box Model berikut bisa menjelaskan dimana letak padding ini.
Seperti yang terlihat, padding berada diantara konten utama dengan border. Jadi, kenapa
saya membahas border dulu sebelum padding?
Ini karena untuk dapat melihat efek padding, kita harus menggunakan border. Tanpa
border, padding akan susah untuk dilihat.
Property padding bisa diisi dengan satuan panjang seperti pixel, persen, em, dll. Sebagai
contoh, untuk membuat padding sebesar 10 pixel, saya bisa menggunakan kode berikut:
<div style="padding: 10px"></div>
85
:100px;
3.8 HEIGHT DAN WIDTH

 Width : untuk menentukan lebar kotak/bidang HTML
contoh : { width:300px; }
 Height: untuk menentukan tinggi kotak/bidang HTML
contoh : { width:100px; }
hasil running : dengan width:300px dan height
3.9 BOX MODEL

 Sebuah elemen HTML dapat kita anggap sebagai sebuah box/ kotak.
 Digunakan pada saat kita akan merancang tampilan sebuah website.
 Pada dasarnya berfungsi sebagai tempat yang membungkus isi dari elemen‐elemen
HTML.
 Tag yang biasanya digunakan untuk merancang tampilan adalah <div>, walaupun tag lain
juga bisa menerapkan box model.
 Terdiri atas 4 bagian: Margin, Border, Padding, Content.
86
3.10 OUTLINE
Outline:value; fungsinya untuk membuat sekeliling bidang/tag/box memiliki style garis
pinggir, sedangkan value masing-masing sisi akan bernilai sama!
contoh kode ini1
<div style="background-
color:blue;width:300px;height:300px;outline-style:solid;outline-
color:red;outline-width:5px;">
anggap
disini
adalah
kontent/isi
</div>
87
3.11 TEXT
3.11.1 Text Color
Properti warna yang digunakan untuk mengatur warna teks.
Dengan CSS, warna yang paling sering ditentukan oleh:
nilai HEX – seperti “# ff0000″

sebuah nilai RGB – seperti “rgb (255,0,0)”
nama warna – seperti “merah”
Warna default untuk halaman didefinisikan dalam pemilih tubuh / body.
contoh :
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
88
3.11.2 Text Alignment
Properti text-align digunakan untuk mengatur alignment horizontal dari sebuah teks.
Teks dapat terpusat, atau berpihak ke kiri atau kanan, atau dibenarkan. Ketika text-
align diatur untuk “membenarkan”, setiap baris ditarik sehingga setiap baris memiliki lebar yang
sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar).
contoh :
h1 {text-align: center;}
3.11.3 Text Decoration

Properti text-decoration digunakan untuk membuat atau menghapus dekorasi dari teks.
Properti text-decoration banyak digunakan untuk menghapus menggaris bawahi dari link
untuk tujuan desain:
contoh :
a {text-decoration: none;}
Hal ininjuga dapat digunakan untuk menghias text :
contoh :
h1 {text-decoration: overline;}
h2 {text-decoration: line-melalui;}
h3 {text-decoration: underline;}
h4 {text-decoration: blink;}
89
3.11.3.1 Text Transformation
Properti teks transform digunakan untuk menentukan huruf besar dan huruf kecil dalam
sebuah teks.
Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau huruf kecil,
atau memanfaatkan huruf pertama dari setiap kata.
contoh :
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
3.11.3.1.2 Text Identation

Properti teks lekukan digunakan untuk menentukan indentasi dari baris pertama dari teks.
contoh :
p {text-indent: 50px;}
90
3.12 FONT
Dalam CSS, ada dua jenis nama Font family :
 Generik Family – sebuah kelompok font family dengan tampilan yang sama (seperti
“Serif” atau “Monospace”)
 Font family – Font family tertentu (seperti “Times New Roman” atau “Arial”)
Generik family Font family Deskripsi

Serif Times New Roman Font serif memiliki garis-
Georgia garis kecil dibagian akhir
pada beberapa karakter
Sans-serif Arial “sans” berarti tanpa-font-
Verdana font ini tidak memiliki garis
diujung karakter
Monospace Courier New Semua karakter huruf
Lucida Console monospace memiliki lebar
yang sama
91
3.12 ICONS
Cara Menambahkan Ikon
Cara termudah untuk menambahkan ikon ke halaman HTML Kita, adalah dengan perpustakaan
ikon, seperti Font Awesome.
Tambahkan nama kelas ikon yang ditentukan ke elemen HTML sebaris (seperti <i> atau
<span>).
Semua ikon di perpustakaan ikon di bawah ini, adalah vektor terukur yang dapat disesuaikan
dengan CSS (ukuran, warna, bayangan, dll.)
Contoh:
92
3.13 LINK
Link adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen yang lain atau
sumber lain, seperti halnya suatu kutipan didalam literatur
Contoh syntak untuk membuat link

<html>
<head>
<style>
a{
color:hotpink;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank"> This is
alink </a></b></p>
</body>
</html>
93
3.14 LIST
List adalahbagian teks didalam dokumen yang berisi daftar item dari suatu kelompok atau group
tertentu, sebagai contoh, didalam situs web yang bertema kuliner, list dapat berupa daftar dari
makanan dan minuman beserta harganya.
List dapat juga berupa prosedur (urutan langkah-langkah) dari suatu pekerjaan tertentu, yag
sifatnya harus dilakukan secara berurutan dari langkah pertama sampai langkah terakhir.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>

94
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Hasil running.
95
96
3.15 TABLE
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas
baris dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi
baris-baris, dan tiap baris dibagi ke dalam cell-cell.
Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag
<td>.
Berikut saya berikan contoh penerapan tag table:
<table border="1">
<tr>
<td> Baris 1 kolom 1 </td>
</tr>
<tr>
</tr>
</table>
97
3.16 DISPLAY
Didalam CSS terdapat banyak beberapa kode, tentunya anda tidak mungkin menghafal satu
persatu, untuk demikian supaya anda mudah mengerti, lebih baik kita mencoba
3.16.1 Display : Inline

Mendefinisikan elemen dalam baris yang sama dengan elemen lain.
Li{ Display:inline; }
Html:
<ul>
<li> CSS </li>
<li> php </li>
<li> Mysql </li>
</ul>
3.16.2 Display:Block
Seperti halnya membuat baris baru pada elemen
Contoh:
.bl{Display:block; Html:
<span class=”bl”>elemen block</span>
<span class=”bl”>ended example</span>
<span class=”bl”>berbagi</span>
98
3.16.3 Display None
Tidak menampilkan elemen/html akan dianggap hilang.
Contoh:
H2.hide{Display:none;}
Html:
<h2 class=”hide”>
Elemen hide </h2>
3.17 MAX-WIDTH
Berfungsi untuk menentukan (mengatur) batas lebar (width) maksimal sebuah elemen yang
ukurannya ditentukan dalam nilai tertentu.
Contoh:
99
max-width: value;
max-width: 100px;
max-width: 20em;
max-width: 10%;
3.18 POSITION
Dalam membuat layout website CSS position property punya peran penting untuk
merancang layout seperti yang kita inginkan, kombinasi antara CSS position property dengan kode
CSS lainnya dimanfaatkan untuk menempatkan elemen tertentu didalam layout.
Sekilas konsep dari CSS position tampak sederhana dan mudah untuk dimengerti bagi
pemula namun faktanya justru sebaliknya menjadi hal yang rumit, padahal keberhasilan
memahaminya sangat membantu si designer, namun untuk membantu memahami CSS position
property ini sebelumnya perlu memahami CSS box model.
CSS position dibagi menjadi 4 property:
 Static
 Relative
 Absolute
 Fixed
3.18.1 Static
Nilai static adalah nilai titik tetap (default).
<div style="width:300px; height: 100px; border: yellow

solid 1px"></div>
<div style="width:300px; height: 300px; border: 1px solid
black;">
red;"></div>
</div>
100
3.18.2 Position: absolute
Nilai absolute memungkinkan untuk menghapus elemen dari wadah div dengan deklarasi
top, bottom, left, right.
Hubungan dengan wadah div nya hanya jika posisi div terakhir memiliki nilai, jika tidak maka
posisinya berhubungan dengan elemen html dengan titik tetapnya pojok kiri atas terhadap area
jendela browser.
div "red" diposisikan di kanan jendela browser (lihat kotak merah di sebelah kanan atas) tidak berada di
dalam div "hitam" karena tidak ada penentuan posisi terakhir sehingga secara defaultnya titik posisi di
tentukan terhadap body.
<div style="width:300px; height: 100px; border: yellow solid

1px"></div>
101
black;">
<div style="width:300px; padding: 10px; border: 1px solid
red; position: absolute; top: 0; right: 50px; text-align:
center;"> position: absolute; top: 0; right: 50px;<div>
</div>
Position: relative;
Nilai relative memungkinkan posisi elemen berhubungan dengan wadah div nya.
Contoh 1:
<div style="width:300px; height: 100px; border: yellow
solid 1px"></div>
black;">
div style="width:200px; height: 200px; padding: 10px; border:
1px solid red; position: relative; top: 20px; left: 20px;">
position: relative; top: 20px; left: 20px;
</div>
</div>
102
3.18.3 Position: Fixed
Elemen yang ada di dalamnya berhubungan dengan elemen html. Titik tetap (default)nya
adalah pojok kiri atas dan tidak pernah berkaitan dengan elemen wadah divnya
<body style="height:900px;">
<p> </p><p> </p>
Position: fixed;<br />
Sampel 1
<div style="width:300px; height: 100px; border: yellow solid
1px"></div>
103
black;">
<div style="width:200px; padding: 10px; border: 1px solid
red; position: fixed; top: 20px; left: 0; text-align:
center;">position: fixed; top: 20px; left: 0;
</div>
</div>
3.19 OVERFLOW
Secara sederhana fungsi dari CSS overflow adalah untuk menyembunyikan,
menampakkan, atau membuat scroll. Dimana fungsi ini bisa diterapkan dalam objek teks ataupun
gambar.
104
Pada objek tertentu, baik posting maupun widget, terkadang ada bagian yang melewati tempat
yang sudah kita tentukan, biasanya kebagian pinggir atau ke bawah. Nah supaya objek tersebut
muncul sesuai dengan yang kita kehendaki, maka digunakanlah syntax overerflow sebagai
solusinya. Mudah-mudahan sobat mengerti apa yang saya maksud pada penjelasan sederhana ini.
Pada penggunaan fungsi overflow biasanya ada 4 alternatif yang bisa kita gunakan :
 overflow:auto
 overflow:scroll
 overflow:hidden
 overflow:display
3.19.1 Contoh Overflow:auto

<div style="background-color:#FBFBFB; border:1px solid #D2D2D2;
padding:10px; width:400px; height:100px; overflow:auto;"> letakkan teks
atau gambar di sini</div>
3.20 FLOAT
 Berfungsi untuk memaksa sebuah elemen menjadi berada di kiri atau dikanan halaman.
 Elemen yang berada setelah elemen yang diberi float akan terpengaruh fungsi float
tersebut.
105
 Elemen yang berada sebelum elemen yang diberi float tidak akan terpengaruh.
 Property:
float:left;
float:right;
Contoh kode css :
#wadah{
height:500px;
width:500px;
float:right;
background-color:#00CC99;
}
 Untuk me‐nonaktifkan fungsi float gunakan:

clear:both;
3.21 INLINE-BLOCK
106
Tipe display ini sering membingungkan bagi para webmaster tentang penggunaannya.
Pada intinya display inline-block itu adalah jenis display yang mirip dengan display inline. Hanya
saja pada display inline-block kita bisa mengatur tinggi dan lebar seleksinya
<html>
<head>
<style>
.gaya-inline {display:inline; background-color:#00CCCC;
width:400px; height:100px;}
.gaya-block {display:block; background-color:#003333;
height:50px;}
.gaya-inline-block {display:inline-block; background-
color:aqua; width:400px; height:40px;}
</style>
</head>
<body>
<section class="gaya-inline"> ini contoh display
inline.</section>
setelah bagian objek yang diberi display inline maka teks
tetap tampil apa adanya. cuma diseleksi saja teksnya.
<br/>
<section class="gaya-block"> ini contoh display
block.</section>
maka bagia ini akan full satu baris digunakan dan yang
diseleksi buka cuma teks saja,tapi satu baris full<br/>
<section class="gaya-inline-block"> ini contoh display inline
block.</section>
bagian yang diseleksi hanya pada teks saja, tapi kita bisa
menambah tinggi dan lebar ke area yang diseleksi.
<br/>
</body>
</html>
107
3.22 ALIGN
Attribute align adalah attribute dalam kode html yang fungsinya berkaitan dengan
pengaturan perataan teks dan pengaturan posisi image. Untuk perataan teks, attribute align dapat
digunakan pada semua blok elemen html yang bermuatan teks. Kita bisa menggunakan attribute
ini pada tag DIV, tag p dan elemen heading (h1 s/d h6).
3.22.1 Attribute align pada teks
 align="right" » Membuat teks rata kanan.
 align="left" » Membuat teks rata kiri.
 align="justify" » Membuat teks rata kanan-kiri.
 align="center" » Membuat teks rata tengah.
3.22.2 Attribute align pada image

Penggunaan attribute align pada image tak hanya sekedar mengatur posisi image, namun
juga berkaitan dengan posisi teks yang digunakan bersama image. Beberapa posisi teks akan
menyertai perubahan posisi image.
 align="right" » Membuat image diposisi kanan dan teks di sebelah kiri.
 align="left" » Membuat image di posisi sebelah kiri dan teks disisi
sebelah kanan.
 align="top" » Image disisi sebelah kiri dan teks disebelah kanan sejajar
dengan terluar bagian atas image.
 align="bottom" » Image disisi sebelah kiri sementara teks disebelah kanan
sejajar dengan sisi terluar bagian bawah image.
 align="middle" » Image disisi sebelah kiri sementara teks disebelah kanan

image sejajar garis tengah horizontal image.
108
3.23 COMBINATORS
div{
background-color: red;
}
Div dalam sintaks css di atas merupakan selector. Sebuah selector dapat memiliki sebih
dari satu selector sederhana. Kita dapat memasukkan combinator pada selector yang sederhana.
Terdapat 4 combinators berbeda dalam css, khususnya css3 :
 Descendant selector
 Child selector
 Adjacent sibling selector
 General sibling selector
Jika kalian pernah belajar css, kalian pasti sudah pernah menggunakan descendant selector.
Karena, descendant selector merupakan combinators yang paling sering digunakan (menurut
saya).
3.23.1 Descendant Selector

Descendant selector akan memilih semua elemen yang cocok berdasarkan keturunan dari
elemen tertentu.
Contoh:
div p{
}
Jika sintaks html-nya seperti di bawah ini :

<div>
<p>Paragraf pertama di dalam div</p>
<span>
<p>Paragraf kedua di dalam div, dan juga di dalam span</p>
109
</span>
<p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>
Css di atas akan membuat semua <p> atau paragraf yang merupakan keturunan dari div
memiliki background berwarna merah, termasuk yang berada di dalam tag <span>. Karena tag
<span> juga masih berada di dalam div.
Jadi, paragraf pertama, kedua dan ketiga akan memilik background berwarna merah karena
berada di dalam div. Sedangkan paragraf keempat dan kelima tidak, karena berada di luar div.
3.23.2 Child Selector
Child selector akan memilih semua elemen yang merupakan anak langsung dari elemen
teretentu.
div > p{
}

<div>
<span>
</span>
</div>
Maka, hanya paragraf pertama dan ketiga saja yang memiliki background berwarna merah.
Paragraf kedua tidak memiliki background berwarna merah karena paragraf kedua bukan
keturunan langsung dari div. Akan tetapi keturunan langsung dari <span> atau bisa dibilang cucu
dari div.
110
3.23.3 Adjacent Sibling Selector
Adjacent sibling selector akan memilih semua elemen yang merupakan saudara kandung (atau
setingkat) dan berdekatan dengan elemen tertentu.
div + p{
}

<div>
<span>
</span>
</div>
Maka, hanya paragraf keempat yang memiliki background berwarna merah. Paragraf
pertama, kedua dan ketiga berada di dalam div, sehingga tidak satingkat dengan div dan merupakan
turunan dari div. Sedangkan paragraf kelima, meskipun saudara (atau setingkat) dengan div namun
tidak berdekatan dengan div. hanya paragraf keempat yang merupakan saudara dari div, dan
letaknya berdekatan dengan div.
3.23.4 General Sibling Selector
General sibling selector akan memilih semua elemen yang merupakan saudara kandung
dari elemen tertentu.
div ~ p{
111
}

<div>
<span>
</span>
</div>
Maka, paragraf keempat dan kelima memiliki background berwarna merah. Karena
paragraf keempat dan kelima merupakan saudara dari div.
3.24 PSEUDO-CLASS
Pseudo Class Selector adalah selector CSS yang digunakan untuk mengakses bagian
tertentu dalam HTML yang tidak ‘terlihat’ (tidak tertulis di dalam HTML) atau bagian dari HTML
yang tidak bisa diakses dengan selector sederhana lain.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
112
color: green;
}
/* mouse over link */

a:hover {
color: hotpink;
}
/* selected link */
a:active { color: blue;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a

link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited
in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS
definition in order to be effective.</p>
</body>
</html>
113
3.25 PSEUDO-ELEMEN
CSS pseudo-elemen yang digunakan untuk menambahkan efek khusus untuk beberapa
penyeleksi.
Syntax.
Syntax dari pseudo-elemen:
selector:pseudo-element {property:value;}
Class CSS juga dapat digunakan dengan pseudo-elemen:

selector.class: pseudo-elemen {properti: nilai;}
lini pertama Pseudo-elemen.
“line-pertama” pseudo-elemen yang digunakan untuk menambah gaya khusus untuk baris
pertama dari teks.
Pada contoh berikut browser format baris pertama dari teks dalam elemen ap sesuai dengan gaya
dalam “line pertama” pseudo-elemen (di mana browser istirahat garis, tergantung pada ukuran
jendela browser):
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
3.26 OPACITY
Opacity effect atau efek transparansi (sering juga disebut blur efect) diciptakan melalui opacity
property. Penyebutan sebagai efek transparansi atau blur effect disebabkan transparansi yang
tercipta ketika opacity property digunakan, Anda bisa menggunakan efek opacity pada box,
image atau obyek lain seperti teks.
114
Meskipun opacity effect dapat digunakan tanpa melibatkan hover effect, namun pada
kenyataannya lebih banyak desain blog/web yang menggabungkan fungsi css opacity property
dan hover effect secara bersamaan. Dalam perkembangan terakhir, setelah css3 mendapat
dukungan penuh dari beberapa browser besar, bahkan efek transparansi (transparency effect) ini
bisa dibuat lebih atraktif dengan menambahkan css3 transition property, css3 animation property
dan css3 transform property. Yang sangat perlu diperhatikan ketika menggunakan opacity
property adalah "penggunaan kode (deklarasi css) yang berbeda untuk Internet Explorer (IE).
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}.
3.26.1 Contoh 1 – Transparansi Gambar
img
{
opacity:0.4;
}
img:hover
{
opacity:1.0;
}
115
3.27 Navigation Bar
Memiliki mudah menggunakan navigasi adalah penting untuk setiap situs web.
Dengan CSS Kita dapat mengubah menu HTML membosankan menjadi tampan bar navigasi.
3.27.1 Navigation Bar = Daftar Link.
Sebuah bar navigasi yang stkitar HTML sebagai dasar.

Dalam contoh kita, kita akan membangun panel navigasi dari daftar HTML stkitar.
Sebuah bar navigasi pada dasarnya adalah daftar link, sehingga menggunakan <ul> dan elemen
<li> masuk akal:
<ul>
<li><a href=”default.asp”>Home</a></li>
<li><a href=”news.asp”>News</a></li>
<li><a href=”contact.asp”>Contact</a></li>
<li><a href=”about.asp”>About</a></li>
</ul>
116
3.27.2 Navigation Bar Vertikal.
Untuk membangun sebuah bar navigasi vertikal kita hanya perlu gaya elemen <a>, selain kode di
atas:
a
{
display:block;
width:60px;
}
Penjelasan:
-display: block – Menampilkan link sebagai elemen blok membuat daerah seluruh link diklik
(tidak hanya teks), dan memungkinkan kita untuk menentukan lebar.
-Lebar: 60px – elemen Blok mengambil lebar penuh yang tersedia secara default. Kami ingin
menentukan lebar 60 px.
Catatan : Selalu tentukan lebar untuk elemen <a> di sebuah bar navigasi vertikal. Jika Kita
menghilangkan lebar, IE6 dapat menghasilkan hasil yang tidak diharapkan.
117
3.27.3 Inline Daftar Produk.
Salah satu cara untuk membangun sebuah bar navigasi horizontal untuk menentukan unsur-unsur
<li> sebagai inline, di samping kode “stkitar” di atas:
li
{
display:inline;
}
3.28 DROPDOWN
Menu web/blog sangat bervariasi salah satunya dibuat dengan css, ada bentuk menu berupa
text maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara
horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga
menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada artikel kali ini kita akan
mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css.
118
Langkah-langkanya sebagai berikut :
Membuat susunan list menu untuk dropdown dalam html, kodenya berikut ini :
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
<ul>
<li><a href="#11">Sub Menu 1</a></li>
</ul>
</li>
<ul>
</ul>
</li>
<ul>
</ul>
</li>
</ul>
Hasil running Dropdowns
119
3.29 TOOLTIPS
Tooltips merupakan tampilan informasi berupa teks maupun gambar yang tampil saat
cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website.
Tujuan dari menggunakan tooltip ini bisa dibilang untuk menghemat waktu si pengunjung
website. Dari tooltip pengunjung bisa mendapatkan penjelasan singkat dari link yang ingin dibaca.
Apabila dari penjelasan singkat itu tidak membuat pengunjung merasa ingin lebih tahu, maka
pengunjung cukup mengabaikan link tersebut. Begitu sebaliknya, apabila pengunjung dibuat
merasa ingin lebih tahu, barulah link tersebut diklik.
Jadi, bagaimana caranya membuat tooltip?
Membuat tooltip bisa dengan menggunakan javascript atau dengan jQuery. Disini kita akan
membuat satu contoh tooltip sederhana dengan menggunakan javascript.
Pertama: Pilih editor yang akan kita gunakan (notepad, notepad++, dreamweaver, dll)
Struktur dasar file html
<html>
<head>
<title>contoh tooltip</title>
</head>
120
<body></body>
</html>
Kemudian setelah tag </title>, tambahkan script css di bawah ini
#tooltip{
position: absolute;
left: -300px;
width: 250px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear
last within this CSS*/
filter:
progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#pointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
</style>
Pada bagian <body>, tambahkan javascript di bawah ini.
121
<script type="text/javascript">
var cursorX=12 //Customize x offset of tooltip

var cursorY=10 //Customize y offset of tooltip
var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV

relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV
relative to pointer image. Tip: Set it to (height_of_pointer_image-1).
document.write('<div id="tooltip"></div>') //write out tooltip DIV

document.write('<img id="pointer" src="arrow2.gif">') //write out
pointer image
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["tooltip"] :
document.getElementById? document.getElementById("tooltip") : ""
var pointerobj=document.all? document.all["pointer"] :

document.getElementById? document.getElementById("pointer") : ""
function ietruebody(){
return (document.compatMode &&
document.compatMode!="BackCompat")? document.documentElement
: document.body
}
function ddrivetip(thetext, thewidth, thecolor){

if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="")
tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
122
}
}
function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth :
window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight :
window.innerHeight-20
var rightedge=ie&&!window.opera? winwidth-event.clientX-cursorX :

winwidth-e.clientX-cursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-cursorY
: winheight-e.clientY-cursorY
var leftedge=(cursorX<0)? cursorX*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the
context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
//position the horizontal position of the menu where the mouse is
positioned
tipobj.style.left=curX+cursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+cursorX+"px"
}
//same concept with the vertical position

if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-cursorY+"px"
123
nondefaultpos=true
}
else{
tipobj.style.top=curY+cursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+cursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
Setelah itu tambahkan tag html berikut ini.
<a href="http://www.proweb.co.id"
onMouseover="ddrivetip('Corporate Web Design')";
onMouseout="hideddrivetip()">Proweb</a>
Sekarang simpan file tersebut dengan format .html dan kemudian jalankan pada browser.
Maka akan terlihat seperti gambar di bawah ini hasilnya.
124
3.30 IMAGE GALERY
Galeri foto berikut ini dibuat dengan CSS:
<html>
<head>
<style type=”text/css”>
div.img
{
margin: 2px;
border: 1px solid # 0000FF;
tinggi: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid # ffffff;
}
div.img a: hover img
{
border: 1px solid # 0000FF;
}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
125
</ style>
</ head>
<body>
<div class=”img”>
<a target=”_blank” href=”klematis_big.htm”>
<img src=”klematis_small.jpg” alt=”Klematis” width=”110″
height=”90″ />
</ a>
<div class=”desc”> Tambahkan deskripsi dari gambar di sini </
div>
</ div>
<a target=”_blank” href=”klematis2_big.htm”>
<img src=”klematis2_small.jpg” alt=”Klematis” width=”110″
height=”90″ />
</ a>
div>
</ div>
height=”90″ />
</ a>
div>
</ div>
height=”90″ />
</ a>
<div class=”desc”> Tambahkan deskripsi dari gambar di sini
</div></ div></ body>
</ html>
126
127
3.31 IMAGE-SPIRIT
Image-sprite adalah koleksi gambar dimasukkan ke dalam satu gambar.
Sebuah halaman web dengan banyak gambar dapat mengambil waktu yang lama untuk memuat
dan menghasilkan permintaan beberapa server.
Menggunakan gambar sprite akan mengurangi jumlah permintaan server dan menghemat
bandwidth.
Contoh:
<html>
<head>
<title>Untitled Document</title>
<style>
#home {
width:46px;
height:44px;
background:url(23319487_415779958819951_724277381926110592
_n.jpg) 0 0;
}
#next{ width:43px; height:44px;
background:url(23319487_415779958819951_724277381926110592
_n.jpg) -91px 0; }
</style>
</head>
<body>
<img id="home" src="logo-medium.png" /><br><br>
<img id="next" src="logo-medium.png" />
</body>
</html>
Running Program: localhost/css
128
3.32 ATTRIBUTE SELECTORS
Attribute Selector atau Atribut Selector adalah selector CSS yang digunakan untuk
‘mencari’elemen HTML dengan menggunakan nilai attribut dari tag HTML. Untuk
menggunakan attribute selector, kita menulisnya di dalam tkita kurung siku, seperti contoh
berikut ini: [href], img[width=”200px”] atau [href$=”.pdf”].
Atribut selector memiliki beberapa fitur yang dibedakan berdasarkan apakah atribut tersebut
berisi nilai tertentu, diawali nilai tertentu, diakhiri nilai tertentu atau mengandung nilai tertentu.
Attribute Selector: [attr]
Aturan penulisan atribut selector pertama kita adalah: [attr] (attr merupakan singkatan
dariattribute). Nilai attr disini dapat diganti dengan atribut HTML yang ingin di cari
Sebagai contoh, untuk membuat warna text menjadi hijau pada seluruh tag HTML yang memiliki
atribut href, maka kode CSSnya adalah sebagai berikut:
[href] {
color:green;
}
129
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Attribut Selector CSS</title>
a[href] {
text-decoration:none;
font-size:24px;
color:blue;
}
a[href^="http://"] {
font-weight: bold;
}
a[href$=".pdf"] {
color:brown;
}
a[title~="link"] {
color:green;
}
a[title|="situs"] {
color:red;
}
a[href*="halaman"] {
font-style: italic;
}
130
</style>
</head>
<body>
<h2>Belajar Attribut Selector CSS</h2>
<br />
<a href="halaman_saja.html">
1. Link ke halaman_saja.html
</a>
<br />
<a href="http://www.duniailkom.com">
2. Link ke http://www.duniailkom.com
</a>
<br />
<a href="halaman_unik.html">
3. Link ke halaman_unik.html
</a>
<br />
<a href="http://www.google.com" >

4. Link ke http://www.google.com
</a>
<br />
<a href="halaman_lain.html">
5. Link ke halaman_lain.html
</a>
<br />
131
<a href="halaman_buku/belajar_css.pdf">
6. Link ke halaman_buku/belajar_css.pdf
</a>
<br />
<a title="link ke kaskus, gan!"

href="http://www.kaskus.com">
7. Link ke http://www.kaskus.com
</a>
<br />
<a title="situs-berita" href="http://www.kompas.com">

8. Link ke http://www.kompas.com
</a>
</body>
</html>
132
3.33 FORM
Form digunakan untuk menerima inputan dari user dan memproses hasil inputan tersebut
ke server. Penggunakan form yang hanya menggunakan HTML saja tidak akan terlalu berguna.
From biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan
akan diproses dengan bahasa pemograman seperti JavaScript atau PHP, dan disimpan di dalam
database MySQL
Perintah atau tag yang digunakan adalah <FORM> dan diakhiri dengan tag </FORM>. Field-
field yang berada diantaranya digunakan untuk menentukan ukuran jenis dari masing-masing
input field. Berikut ini dibahas beberapa elemen yang dapat disertakan dalam suatu form.
Contoh:
Sintak penulisan form :
<form method=”(post) atau get” action=”program_pemroses”>
<!—elemen-elemen from 
</form>
133
3.34 COUNTERS
Counters CSS adalah "variabel" yang dikelola oleh CSS yang nilainya dapat ditambahkan
oleh aturan CSS (untuk melacak berapa kali penggunaannya). Penghitung membiarkan Kita
menyesuaikan tampilan konten berdasarkan penempatannya di dokumen.
Penomoran Otomatis dengan Penghitung

Penghitung CSS seperti "variabel". Nilai variabel dapat bertambah dengan aturan CSS
(yang akan melacak berapa kali penggunaannya).
Untuk bekerja dengan counter CSS kita akan menggunakan properti berikut:
 counter-reset - Membuat atau me-reset sebuah counter

 counter-increment - Menambah nilai counter
 konten - Sisipan konten yang dihasilkan
 counter () atau counter () - Menambahkan nilai penghitung ke elemen
Untuk menggunakan penghitung CSS, pertama-tama harus dibuat dengan counter-reset.
Contoh berikut membuat penghitung untuk halaman (di dalam body selector), lalu
menambahkan nilai counter untuk setiap elemen <h2> dan menambahkan "Section <value of the
counter>:" ke awal setiap elemen
<html>
<head>
<style>
body {
counter-reset:section;
}
h2::before {
counter-increment:section;
content: "section" counter(section) ": ";
}
</style>
</head>
<body>
<h1> Using css counter :</h1>

<h2> HTML tutorial </h2>
<h2> CSS tutorial </h2>
<h2> JavaScript tutorial </h2>
<p><b>Note:</b> IEB support properties only if a !doctype is

specified.</p>
</body>
</html>
134
BAB 4 CSS3
4.1 Rounded corner
Dengan CSS3, Anda dapat memberikan setiap elemen "sudut membulat", dengan
menggunakan properti border-radius.
135
#rcorners1 { #rcorners2 { #rcorners3 {
border-radius: 25px; border-radius:25px; border-radius:
background: border: 2px solid 25px;
#73AD21; #73AD21; background:
padding: 20px; padding: 20px; url(paper.gif);
width: 200px; width: 200px; background-
height: 150px; height: 150px; position: left top;
} } background-repeat:
repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Border Radius adalah singkatan dari 4 elemen ini
 border-top-left-radius,
 border-top-right-radius,
 border-bottom-right-radius
 border-bottom-left-radius
untuk penggunaanya seperti ini
4.1.1 CSS3 border-radius - Tentukan Setiap Sudut
Bila hanya satu nilai untuk properti border-radius, ini akan diterapkan untuk semua 4
sudut sekaligus. Namun, Anda dapat menentukan setiap sudut secara terpisah jika Anda inginkan.
Berikut adalah aturan penggunaanya :
 Empat nilai: nilai pertama berlaku untuk atas kiri, nilai kedua berlaku untuk kanan atas,
nilai ketiga berlaku untuk kanan bawah, dan nilai keempat berlaku untuk sudut kiri
bawah
 Tiga nilai: nilai pertama berlaku untuk atas kiri, nilai kedua berlaku untuk bagian kanan
dan bawah kiri, dan nilai ketiga berlaku untuk kanan bawah
 Dua nilai: nilai pertama berlaku untuk pojok kiri dan kanan bawah, dan nilai kedua
berlaku untuk atas kanan dan sudut kiri bawah
 Satu nilai: keempat sudut dibulatkan sama
136
Berikut adalah tiga contoh:
1. Empat nilai -> border-radius: 15px 50px 30px 5px:
2. Tiga nilai -> border-radius: 15px 50px 30px:
3. Dua nilai -> border-radius: 15px 50px:
4.2 BORDER IMAGE
137
4.2.1 CSS3 Properti border-image
CSS3 properti border-image memungkinkan Anda untuk menentukan gambar yang

akan digunakan sebagai pengganti perbatasan yang normal sekitar elemen atau dengan kata lain
anda menggunakan gambar untuk membuat pembatas .
Properti ini memiliki tiga bagian:
1. Gambar untuk digunakan sebagai perbatasan

2. Dimana untuk mengiris gambar
3. Tentukan apakah bagian tengah harus diulang atau diregangkan
Penulis akan menggunakan gambar berikut (disebut "border.png"):
border-image properti mengambil gambar dan irisan menjadi sembilan bagian.

Kemudian menempatkan sudut di sudut-sudut, dan bagian tengah diulang atau membentang seperti
yang Anda tentukan.
Catatan: Untuk border-image bekerja, elemen juga membutuhkan border set properti!
Di sini, bagian tengah gambar diulang untuk membuat perbatasan:
Berikut adalah codingnya :
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
Berikut Contoh , bagian tengah gambar yang ditarik untuk membuat perbatasan:
138
#borderimg {
padding: 15px;
-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
}
4.2.2 CSS3 border-image - Nilai Iris Berbeda
nilai-nilai irisan yang berbeda benar-benar mengubah tampilan perbatasan:
139
#borderimg1 {
padding: 15px;
-webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
border-image: url(border.png) 50 round;
}
#borderimg2 {
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
padding: 15px;
140
-webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
border-image: url(border.png) 30% round;
}
4.2.3 CSS3 Properti border

Border-Image Properti Singkat Untuk Mengatur Semua Properti Border-
Image- *
Border-Image- Menentukan Path Ke Gambar Yang Akan Digunakan
Source Sebagai Border
Border-Image- Menentukan Cara Mengiris Gambar Border
Slice
Border-Image- Menentukan Lebar Gambar Border
Width
Border-Image- Menentukan Jumlah Tempat Area Gambar Border
Outset Melampaui Kotak Border
Border-Image- Menentukan Apakah Gambar Border Harus Diulang,
Repeat Dibulatkan Atau Diregangkan
4.3 BACKGROND IMAGE
CSS3 berisi beberapa properti latar belakang baru, yang memungkinkan kontrol yang lebih
besar dari elemen latar belakang.Dalam bab ini Anda akan belajar bagaimana menambahkan
beberapa gambar latar belakang untuk satu elemen. Anda juga akan belajar tentang sifat-sifat CSS3
baru sebagai berikut:
 background-size
 background-origin
 background-clip
141
4.3.1 Contoh sederhana :
Codingnya seperti ini :
#example1 {
background:url(img_flwr.gif);
background-repeat: no-repeat;
padding:15px;
}
Codingnya seperti ini

#example2 {
142
background:url(img_flwr.gif);
background-size: 100px 80px;
background-repeat: no-repeat;
padding:15px;
}
4.3.2 Multipe bacgrond dalam satu tempat
#example1 {
background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-
repeat, url(paper.gif) left top repeat;
padding: 15px;
background-size: 50px, 130px, auto;
}
Untuk membuat full bacgrond anda tinggal menggunakan css seperti di bawah ini :
html {
background: url(img_flower.jpg) no-repeat center fixed;
background-size: cover;
}
143
4.3.3 BACGROND PROPERTI
Property Keterangan
background Properti singkat untuk mengatur semua properti latar
belakang dalam satu deklarasi
background-clip Menentukan luas lukisan latar belakang
background- Menentukan satu atau lebih gambar latar belakang untuk
image sebuah elemen
background- Menentukan di mana gambar latar belakang diposisikan
origin
background-size Menentukan ukuran gambar latar belakang
4.4 COLOR
4.4.1 Warna CSS3
CSS mendukung nama warna, heksadesimal dan warna RGB.
Selain itu, CSS3 juga memperkenalkan:
 warna RGBA
 warna HSL
 warna HSLA
 kegelapan
4.4.2 Warna RGBA
RGBA nilai warna merupakan perpanjangan dari nilai warna RGB dengan alpha channel - yang
menentukan opacity untuk warna.
Sebuah nilai warna RGBA ditentukan dengan: RGBA (merah, hijau, biru, alpha). Parameter
alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (penuh buram).
144
#p1 {background-color:rgba(255,0,0,0.3);}
145
4.4.3 HSL singkatan Hue, Saturation dan Lightness.
Sebuah nilai warna HSL ditentukan dengan: HSL (hue, saturation, ringan).
1. Hue adalah gelar pada roda warna (dari 0 sampai 360):

o 0 (atau 360) berwarna merah
o 120 adalah hijau
o 240 berwarna biru
2. Saturasi adalah nilai persentase: 100% adalah penuh warna.
3. Lightness juga persentase; 0% gelap (hitam) dan 100% adalah putih.
Contoh warna
Contoh coding
<style>
#p1 {background-color:hsl(120,100%,50%);}
</style>
4.4.4 Warna HSLA
HSLA nilai warna merupakan perpanjangan dari nilai warna HSL dengan alpha channel yang
menentukan opacity untuk warna.
Sebuah nilai warna HSLA ditentukan dengan: HSLA (hue, saturation, ringan, alpha), dimana
parameter alpha mendefinisikan opacity. Parameter alpha adalah angka antara 0,0 (sepenuhnya
transparan) dan 1,0 (penuh buram).
Contoh warna HSLA :
146
Contoh coding :
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
</style>
4.5 Gradien
CSS3 gradien membiarkan Anda menampilkan transisi halus antara dua atau lebih tertentu
warna.
Sebelumnya, Anda harus menggunakan gambar untuk efek ini. Namun, dengan
menggunakan gradien CSS3 Anda dapat mengurangi waktu download dan penggunaan
bandwidth. Selain itu, unsur dengan gradien terlihat lebih baik ketika diperbesar, karena gradien
yang dihasilkan oleh browser.
CSS3 mendefinisikan dua jenis gradien:
 Linear Gradien (turun / naik / kiri / kanan / diagonal)

 Gradien radial (didefinisikan oleh center mereka)
147
4.5.1 SS3 Gradien Linear
Untuk membuat gradien linier Anda harus menentukan setidaknya dua berhenti warna. berhenti
warna adalah warna yang Anda inginkan untuk membuat transisi halus antara. Anda juga dapat
mengatur titik awal dan arah (atau sudut) bersama dengan efek gradien.
Sintaksis
background: linear-gradient(direction, color-stop1, color-stop2, ...);
4.5.2 Linear Gradient - Atas ke Bawah (umumnya)
Contoh berikut menunjukkan gradien linier yang dimulai di bagian atas. Dimulai merah, transisi
ke kuning:
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax (must be last) */
}
148
4.5.3 Linear Gradient - Kiri ke Kanan
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Dimulai merah, transisi
ke kuning:
Penulisan codingnya seperti ini
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */
}
4.5.4 menggunakan Angles
Jika Anda ingin lebih mengontrol arah gradien, Anda dapat menentukan sudut, bukan arah yang
telah ditetapkan (ke bawah, ke atas, ke kanan, ke kiri, ke kanan bawah, dll).
Contoh:
background: linear-gradient(angle, color-stop1, color-stop2);
Sudut ditentukan sebagai sudut antara garis horizontal dan garis gradien.
149
Contoh berikut menunjukkan bagaimana menggunakan sudut pada gradien linier:
#grad1 {
height: 100px;
background: -webkit-linear-gradient(0deg, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(0deg, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, red, yellow); /* Standard syntax (must be last) */
}
#grad2 {
height: 100px;
}
#grad3 {
height: 100px;
150
}
#grad4 {
height: 100px;
background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, yellow); /* Standard syntax (must be last) */
}
4.5.5 Menggunakan Beberapa Stops Warna
Contoh berikut menunjukkan gradien linier (dari atas ke bawah) dengan beberapa berhenti
warna:
151
4.5.6 warna
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green); /* Standard syntax (must be last) */
}
4.5.7 warna
#grad2 {
height: 200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /*
For Safari 5.1 to 6.0 */
152
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /*
For Firefox 3.6 to 15 */
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /*
Standard syntax (must be last) */
}
4.5.8 warna Penghenti Warna (tidak merata spasi)
#grad3 {
height: 200px;
background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* For Safari 5.1
to 6.0 */
background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* For Opera 11.1 to
12.0 */
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* For Firefox 3.6 to
15 */
background: linear-gradient(red 10%, green 85%, blue 90%); /* Standard syntax (must
be last) */
}
153
Contoh berikut menunjukkan cara membuat gradien linier (dari kiri ke kanan) dengan
warna pelangi dan beberapa teks:
<style>
#grad1 {
height: 55px;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1
to 6.0 */
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to
12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx 3.6 to 15
*/
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax
(must be last) */
}
</style>
4.5.9 menggunakan Transparansi
gradien CSS3 juga mendukung transparansi, yang dapat digunakan untuk menciptakan efek
memudar.
Untuk menambah transparansi, kita menggunakan fungsi RGBA () untuk menentukan berhenti
warna. Parameter terakhir dalam fungsi RGBA () dapat menjadi nilai dari 0 ke 1, dan
mendefinisikan transparansi warna: 0 menunjukkan transparansi penuh, 1 menunjukkan penuh
warna (tidak ada transparansi).
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Dimulai sepenuhnya
transparan, transisi ke warna merah penuh:
Script codingnya seperti ini :

154
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last)
*/
}
</style>
4.5.10 CSS3 Radial Gradien
Sebuah gradien radial didefinisikan oleh pusatnya.
Untuk membuat gradien radial Anda juga harus menentukan setidaknya dua berhenti warna.
4.5.11 Sintaksis
background: radial-gradient(shape size at position, start-color, ..., last-color);
Secara default, bentuknya elips, ukuran terjauh-sudut, dan posisi adalah pusat.
4.5.12 Radial Gradient - merata spasi Warna Stops (ini adalah default)
Contoh berikut menunjukkan gradien radial dengan berhenti warna merata spasi:
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
155
}
</style>
4.6 Shadow Effects

4.6.1 CSS3 Shadow Effects
Dengan css3 anda dapat menambahakan shadow effect pada text Oke pada bab ini anda
akan belajar tentang text shadow ini adalah 2 materi tentang effek shadow,
 text-shadow
 box-shadow
4.6.2 Text Shadow effect

h1 {
text-shadow: 2px 2px;
}
h1 {
text-shadow: 2px 2px red;
}
h1 {
text-shadow: 2px 2px 5px red;
}
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h1 {
text-shadow: 0 0 3px #FF0000;
}
156
4.6.3 Beberapa Bayangan
Untuk menambahkan lebih dari satu bayangan untuk teks, Anda dapat menambahkan daftar
dipisahkan koma bayangan.
Contoh berikut menunjukkan neon cahaya bayangan merah dan biru:
h1 {
text-shadow: 0 0 3px #FF0000,
0 0 5px #0000FF;
}
h1 {
color: white;
text-shadow: 1px 1px 2px black,
0 0 25px blue, 0 0 5px darkblue;
}
h1 {
color: yellow;
text-shadow: -1px 0 black, 0
1px black, 1px 0 black, 0 -1px
black;
}
4.6.4 CSS3 Properti box-shadow
CSS3 box-shadowproperti berlaku bayangan untuk elemen.
Dalam penggunaan yang paling sederhana, Anda hanya menentukan bayangan horizontal dan
vertikal bayangan:
div {
box-shadow: 10px 10px;
}
157
div {
box-shadow: 10px 10px grey;
}
div {
box-shadow: 10px 10px 5px grey;
}
4.6.5 Kartu-kartu
Contoh menggunakan box-shadow properti untuk membuat kartu seperti kertas:
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px
20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
4.6.6 CSS3 Shadow Property

Tabel berikut mencantumkan sifat CSS3 shadow:
Property Description
box-shadow Memberi satu atau lebih shadow
158
text-shadow Memberikan shadow di dalam text
4.7 Text
CSS3 berisi beberapa fitur teks baru.
Dalam bab ini Anda akan belajar tentang sifat-sifat teks berikut:
 text-overflow
 word-wrap
 word-break
4.7.1 CSS3 Text Overflow
CSS3 text-overflowproperti menetapkan konten bagaimana meluap yang tidak ditampilkan

harus memberi isyarat kepada pengguna.
Hal ini dapat dipotong:
Ini adalah beberapa teks panjang yang tidak akan cocok di dalam kotak
Ini adalah beberapa teks panjang yang tidak akan cocok di dalam kotak
Kode CSS adalah sebagai berikut:
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
159
text-overflow: ellipsis;
}
4.7.2 CSS3 Word Wrapping
CSS3 word-wrapproperti memungkinkan kata-kata panjang untuk bisa menjadi rusak dan
membungkus ke baris berikutnya.
Jika kata terlalu panjang untuk muat di dalam area, mengembang luar:
Properti word-wrap memungkinkan Anda untuk memaksa teks untuk membungkus - bahkan jika
itu berarti pemisahan itu di tengah kata:
p{
word-wrap: break-word;
}
160
4.7.3 CSS3 word-break
CSS3 word-breakproperti menetapkan aturan melanggar garis.
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
4.7.4 CSS3 Text Properti
Tabel berikut mencantumkan sifat CSS3 teks baru:
text-align-last Menentukan cara menyelaraskan baris terakhir

teks
text-justify Menentukan bagaimana teks yang dibenarkan harus
disesuaikan dan diberi jarak
text-overflow Menentukan bagaimana konten yang dilipat yang tidak
ditampilkan seharusnya diisyaratkan kepada pengguna
word-break Menentukan aturan melanggar baris untuk skrip non-CJK
word-wrap Memungkinkan kata-kata panjang bisa dipecahkan dan
dibungkus pada baris berikutnya
161
4.8 Font
4.8.1 Font Web CSS3 @ font-face Aturan
font web memungkinkan desainer web untuk menggunakan font yang tidak diinstal pada
komputer pengguna.
Ketika Anda telah menemukan / membeli font yang ingin Anda gunakan, hanya menyertakan file
font pada server web Anda, dan itu akan secara otomatis download ke pengguna bila diperlukan.
Anda "sendiri" font didefinisikan dalam CSS3 @font-faceaturan.
4.8.2 Berbeda Font Format
TrueType Fonts (TTF)
TrueType adalah font standar yang dikembangkan di akhir 1980-an, oleh Apple dan Microsoft.
TrueType format font yang paling umum untuk sistem operasi kedua Mac OS dan Microsoft
Windows.
OpenType Font (OTF)
OpenType adalah format untuk font komputer scalable. Itu dibangun di atas TrueType, dan
adalah merek dagang terdaftar dari Microsoft. font OpenType yang digunakan umumnya hari ini
di platform komputer besar.
Web Open Font Format (WOFF)
WOFF adalah format font untuk digunakan dalam halaman web. Ini dikembangkan pada tahun
2009, dan sekarang menjadi Rekomendasi W3C. WOFF dasarnya OpenType atau TrueType
dengan kompresi dan metadata tambahan. Tujuannya adalah untuk mendukung distribusi font
dari server ke klien melalui jaringan dengan keterbatasan bandwidth.
Web Open Font Format (WOFF 2.0)
Font / OpenType TrueType yang menyediakan kompresi yang lebih baik daripada WOFF 1.0.
SVG Font / Shapes
font SVG memungkinkan SVG untuk digunakan sebagai mesin terbang saat menampilkan teks.
SVG 1.1 spesifikasi mendefinisikan modul font yang memungkinkan penciptaan font dalam
dokumen SVG. Anda juga dapat menerapkan CSS ke dokumen SVG, dan @ font-face aturan
dapat diterapkan untuk teks dalam dokumen SVG.
162
Tertanam Fonts OpenType (EOT)
font EOT adalah bentuk kompak font OpenType dirancang oleh Microsoft untuk digunakan
sebagai font tertanam di halaman web.
4.8.3 Menggunakan Font Anda Ingin
Dalam CSS3 @font-faceaturan Anda harus terlebih dahulu menentukan nama untuk font
(misalnya myFirstFont), dan kemudian arahkan ke file font.
Tip: Selalu gunakan huruf kecil untuk URL font. Huruf besar dapat memberikan hasil yang tidak
diharapkan di IE.
Untuk menggunakan font untuk elemen HTML, merujuk pada nama font (myFirstFont) melalui
font-familyproperti:
4.8.3.1 Contoh
Coding css :
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
}
4.8.4 Menggunakan Teks Bold
Anda harus menambahkan lain @font-faceberisi aturan penjelas untuk teks tebal:
<style> @font-face {
163
src: url(sansation_light.woff);
}
@font-face {
src: url(sansation_bold.woff);
font-weight: bold;
}
div {
}
</style>
<div>
With CSS3, websites can
<b>finally</b> use fonts other than the pre-
selected "web-safe" fonts.
</div>
164
4.8.5 CSS3 Font Deskriptor
Tabel berikut mencantumkan semua deskriptor font yang dapat didefinisikan dalam @font-
faceaturan:
Descriptor Values Description

font-family name Wajib. Mendefinisikan nama untuk font
src URL Wajib. Mendefinisikan URL dari file font
font-stretch normal Pilihan. Mendefinisikan bagaimana font harus
condensed diregangkan. Default adalah "normal"
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
font-style normal Pilihan. Mendefinisikan bagaimana font harus
italic ditata. Default adalah "normal"
oblique
font-weight normal Pilihan. Mendefinisikan keberanian huruf.
bold Default adalah "normal"
100
200
300
400
500
600
700
800
900
unicode-range unicode-range Pilihan. Mendefinisikan berbagai karakter
UNICODE yang didukung font. Defaultnya
adalah "U + 0-10FFFF"
4.9 2D Transforms
transformasi CSS3 memungkinkan Anda untuk menerjemahkan, memutar, skala, dan

condong elemen.Sebuah Transform adalah efek yang memungkinkan unsur bentuk
perubahan, ukuran dan posisi.
CSS3 mendukung 2D dan 3D transformasi.Dalam bab ini Anda akan belajar tentang metode
transformasi 2D berikut:
 translate()
 rotate()
 scale()
165
 skewX()
 skewY()
 matrix()
4.9.1 Translate
translate() Metode bergerak elemen dari posisi saat ini (sesuai dengan parameter yang
diberikan untuk sumbu X dan sumbu Y).
Contoh berikut bergerak <div> elemen 50 piksel ke kanan, dan 100 piksel turun dari
posisi saat ini:
<style>
div {
width: 300px;
height: 100px;
-ms-transform: translate(50px,100px);
/* IE 9 */
-webkit-transform:
translate(50px,100px); /* Safari */
transform: translate(50px,100px); /*
Standard syntax */
}
</style>
166
4.9.2 Rotate
rotate()Metode berputar searah jarum jam merupakan unsur atau berlawanan arah jarum
jam sesuai dengan tingkat tertentu.
Contoh berikut berputar <div> searah jarum jam elemen dengan 20 derajat:
<style>
div {
width: 300px;
height: 100px;
}
div#myDiv {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg); /* Standard syntax */
}
</style>
4.9.3 Scale
Metode meningkatkan atau mengurangi ukuran elemen (sesuai dengan parameter yang
diberikan untuk lebar dan tinggi).
Contoh berikut meningkatkan <div> elemen menjadi dua kali lebar aslinya, dan tiga
kali dari tinggi aslinya:
167
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: green;
-ms-transform: scale(2,2); /* IE 9 */
-webkit-transform: scale(2,2); /* Safari */
transform: scale(2,2); /* Standard syntax */
}
</style>
4.9.4 SkewX
Metode skews elemen di sepanjang sumbu X dengan sudut tertentu.
Contoh berikut skews elemen <div> 10 derajat sepanjang sumbu X:
Coding :
<style>
//Gmbar pertmana
168
div {
width: 300px;
height: 100px;
background-color: teal;
}
//Gambar ke 2
div#myDiv {
-ms-transform: skewX(10deg); /* IE 9 */
-webkit-transform: skewX(10deg); /* Safari */
transform: skewX(10deg); /* Standard syntax */
}
</style>
4.9.5 SkewY
metode ini adalah kebalikan dari skewX Metode skews elemen di sepanjang sumbu Y
dengan sudut tertentu.
Contoh berikut skews elemen <div> 10 derajat sepanjang sumbu Y:
<style>
div {
width: 300px;
height: 100px;
169
}
div#myDiv {
-ms-transform: skewY(10deg); /* IE 9 */
-webkit-transform: skewY(10deg); /* Safari */
transform: skewY(10deg); /* Standard syntax */
}
</style>
4.9.6 Skew
Metode skews elemen sepanjang X dan Y-axis dengan sudut tertentu.
Contoh berikut skews elemen <div> 20 derajat sepanjang sumbu X, dan 10 derajat
sepanjang sumbu Y:
<style>
div {
width: 300px;
height: 100px;
}
div#myDiv {
-ms-transform: skew(20deg,10deg); /* IE 9 */
-webkit-transform: skew(20deg,10deg); /* Safari */
170
transform: skew(10deg,10deg); /* Standard syntax */
}
</style>
4.9.7 matrix
Metode menggabungkan semua 2D transformasi metode menjadi satu.
Matriks () metode mengambil enam parameter, mengandung fungsi matematika, yang

memungkinkan Anda untuk memutar, skala, memindahkan (menerjemahkan), dan condong
elemen.
Parameter adalah sebagai berikut: matriks (scaleX (), skewY (), skewX (), ScaleY (),
translateX (), translateY ())
Contoh :
Codingnya seperti di bawah ini :

<style>
div {
width: 300px;
height: 100px;
}
171
div#myDiv1 {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
}
div#myDiv2 {
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */
transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}
</style>
4.9.8 2D Transform Metode

Fungsi Deskripsi
matrix(n,n,n,n,n,n) Mendefinisikan transformasi 2D, dengan menggunakan
matriks enam nilai
translate(x,y) Mendefinisikan terjemahan 2D, memindahkan elemen
sepanjang sumbu X dan Y
translateX(n) Mendefinisikan terjemahan 2D, memindahkan elemen
sepanjang sumbu X
translateY(n) Mendefinisikan terjemahan 2D, memindahkan elemen
sepanjang sumbu Y
scale(x,y) Mendefinisikan transformasi skala 2D, mengubah lebar
dan tinggi elemen
scaleX(n) Mendefinisikan transformasi skala 2D, mengubah lebar
elemen
scaleY(n) Mendefinisikan transformasi skala 2D, mengubah
tinggi elemen
rotate(angle) Mendefinisikan rotasi 2D, sudut ditentukan dalam
parameter
172
skew(x-angle,y- Mendefinisikan transformasi condong 2D sepanjang
angle) sumbu X dan Y
skewX(angle) Mendefinisikan transformasi miring 2D sepanjang
sumbu X
skewY(angle) Mendefinisikan transformasi miring 2D sepanjang
sumbu Y
4.10 3D Transforms
CSS3 memungkinkan Anda untuk memformat elemen Anda menggunakan
transformasi 3D.
Dalam bab ini Anda akan belajar tentang metode transformasi 3D berikut:
 rotateX()
 rotateY()
 rotateZ()
4.10.1 rotateX
rotateX()Metode berputar elemen di sekitar sumbu X-nya di tingkat tertentu:
berikut penulis akan mencontohkan bagaimana merotasi 150 degre perhatikan gambar
di bawah ini
Syntax
div#myDiv {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg); /* Standard syntax */
}
4.10.2 RotateY
Metode berputar elemen di sekitar nya Y-axis pada derajat tertentu:
173
Berikut enulis akan mencontohkan melakukan rotateY 150 degre perhatikan gambar
berikut
Codingnya seperti berikut ini

div#myDiv {
-webkit-transform: rotateY(150deg); /* Safari */
transform: rotateY(150deg); /* Standard syntax */
}
4.10.3 RotateZ
Metode berputar elemen sekitar Z-sumbu pada derajat tertentu:
Berikut penulis akan mencontohkan melakukan rotasiZ 90 degre

div#myDiv {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg); /* Standard syntax */
}
174
4.10.4 CSS3 Transform Properti
Tabel berikut daftar semua sifat 3D transformasi:
Properti Deskripsi
transform Menerapkan transformasi 2D atau 3D ke sebuah elemen
transform-origin Memungkinkan Anda untuk mengubah posisi pada
elemen yang ditransformasikan
transform-style Menentukan bagaimana elemen bersarang diberikan
dalam ruang 3D
perspective Menentukan perspektif tentang bagaimana elemen 3D
dilihat
perspective-origin Menentukan posisi bawah elemen 3D
backface-visibility Mendefinisikan apakah elemen harus terlihat saat tidak
menghadap layar
4.11 Transisi CSS3

transisi CSS3 memungkinkan Anda untuk mengubah nilai properti (dari satu nilai yang
lain), selama durasi tertentu.
4.11.1 Cara Menggunakan CSS3 Transisi
Untuk membuat efek transisi, Anda harus menentukan dua hal:
 properti CSS untuk menambah efek

 durasi efeknya
Catatan: Jika bagian durasi tidak ditentukan, transisi tidak akan berpengaruh, karena
nilai default adalah 0.
Contoh berikut menunjukkan 100px * 100px red <div> elemen. <Div> elemen juga
telah ditentukan efek transisi untuk properti lebar, dengan durasi 2 detik:
175
Before hover After hover div 300px
Contoh coding :
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
4.11.2 Tentukan Curve Kecepatan Transisi
transition-timing-function properti menentukan kurva kecepatan efek transisi.
Properti transisi-waktu-fungsi dapat memiliki nilai berikut:
 ease - menentukan efek transisi dengan awal yang lambat, kemudian cepat, kemudian
berakhir perlahan (ini adalah default)
 linear - menentukan efek transisi dengan kecepatan yang sama dari awal sampai
akhir
 ease-in - menentukan efek transisi dengan awal yang lambat
 ease-out - menentukan efek transisi dengan ujung yang lambat
 ease-in-out - menentukan efek transisi dengan awal yang lambat dan akhir
 cubic-bezier(n,n,n,n) - memungkinkan Anda menentukan nilai-nilai Anda
sendiri dalam fungsi kubik-bezier
176
4.11.3 Menunda Efek Transisi
“transition-delay” properti menetapkan penundaan (dalam detik) untuk efek transisi.
Contoh berikut memiliki delay 1 second sebelum dibuat Codingnya seperti ini :
div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
4.11.4 Properti CSS3 Transition

Properti Descripton
transition Properti singkat untuk menetapkan empat properti transisi
menjadi satu properti
transition- Menentukan penundaan (dalam detik) untuk efek transisi
delay
transition- Menentukan berapa detik atau milidetik yang dihasilkan
duration efek transisi
transition- Menentukan nama properti CSS efek transisi untuk
property
transition- Menentukan kurva kecepatan efek transisi
timing-function
4.12 Animasi
animasi CSS3 memungkinkan animasi yang paling elemen HTML tanpa menggunakan
JavaScript atau Flash!
4.12.1 Apa CSS3 Animasi?
Animasi memungkinkan elemen secara bertahap berubah dari satu gaya ke yang lain.
Anda dapat mengubah banyak properti CSS yang Anda inginkan, sebanyak yang Anda
inginkan.
177
Untuk menggunakan CSS3 animasi, Anda harus terlebih dahulu menentukan beberapa
keyframes untuk animasi.
Keyframes menahan gaya apa elemen akan memiliki pada waktu tertentu.
4.12.2 Aturan @keyframes
Ketika Anda menentukan gaya CSS di dalam @keyframes aturan, animasi secara bertahap
akan berubah dari gaya saat ini untuk gaya baru pada waktu tertentu.
Untuk mendapatkan animasi untuk bekerja, Anda harus mengikat animasi untuk elemen.
Contoh berikut mengikat "contoh" animasi dengan elemen <div>. animasi akan berlangsung
selama 4 detik, dan secara bertahap akan mengubah background-warna <div> elemen dari
"merah" untuk "kuning":
Contoh coding seperti ini :
/* animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* mengaplikasikan animas ke elemen div */

div {
width: 100px;
height: 100px;
animation-name: example;
animation-duration: 4s;
}
Catatan: Jika animation-durationproperti tidak ditentukan, animasi tidak akan

berpengaruh, karena nilai default adalah 0.
Dalam contoh di atas kita telah ditentukan ketika gaya akan berubah dengan
menggunakan kata kunci "dari" dan "untuk" (yang mewakili 0% (mulai) dan 100% (lengkap)).
Hal ini juga memungkinkan untuk menggunakan persen. Dengan menggunakan persen,
Anda dapat menambahkan banyak perubahan gaya yang Anda inginkan.
Contoh berikut akan mengubah background-warna <div> elemen ketika animasi adalah
25% selesai, 50% selesai, dan lagi ketika animasi adalah 100% selesai:
Contohnya seperti ini :
178
/* animation code */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* mengaplikasikan animas ke elemen div */

div {
width: 100px;
height: 100px;
animation-name: example;
animation-duration: 4s;
}
4.12.3 MENGULANG ANIMASI

Untuk mengulang animasi sebanyak 3 kali anda hanya perlu menambahkan syntax di
bawah ini
animation-iteration-count: 3;
untuk animasi di ulang terus menerus / animasi tak terbatas :
animation-iteration-count: infinite;
4.12.4 DELAY ANIMASI

Untuk melakukan delay 2 detik anda hanya perlu melakukan penambahan coding
seperti di bawah ini
animation-delay: 2s;
4.12.5 Jalankan Animasi di Reserve-Direction atau Alternate Cycles
animation-direction properti digunakan untuk membiarkan animasi berjalan di arah

sebaliknya atau Alternate Cycles
Contoh berikut akan menjalankan animasi di arah sebaliknya anda hanya perlu manbahkan
syntax seperti di bawah ini maka animasi akan berjalan terbalik :
animation-direction: reverse;
Contoh berikut menggunakan nilai " alternate " untuk membuat animasi pertama berjalan ke
depan, kemudian mundur, kemudian maju:
animation-direction: alternate;
179
4.12.6 Tentukan Curve Kecepatan Animasi
animation-timing-function properti menentukan kurva kecepatan animasi.
Properti animation-timing-function dapat memiliki nilai berikut:
 ease - menentukan animasi dengan awal yang lambat, kemudian cepat, kemudian
berakhir perlahan (ini adalah default)
 linear - menentukan animasi dengan kecepatan yang sama dari awal sampai akhir
 ease-in - menentukan animasi dengan awal yang lambat
 ease-out - menentukan animasi dengan ujung yang lambat
 ease-in-out - menentukan animasi dengan awal yang lambat dan akhir
 cubic-bezier(n,n,n,n) - memungkinkan Anda menentukan nilai-nilai Anda
sendiri dalam fungsi kubik-bezier
4.12.7 CSS3 Animasi Properti
Tabel berikut mencantumkan aturan @keyframes dan semua properti animasi:
Properti Description
@keyframes Menentukan kode animasi
animasi Properti singkat untuk mengatur semua properti
animasi
animation Menentukan penundaan untuk memulai animasi
animation-delay Menentukan apakah sebuah animasi harus diputar dalam arah
terbalik atau siklus alternatif
animation-direction Menentukan apakah sebuah animasi harus diputar dalam arah
terbalik atau siklus alternatif
animation-duration Menentukan berapa detik atau milidetik animasi yang
dibutuhkan untuk menyelesaikan satu siklus
animation-fill-mode Menentukan gaya untuk elemen saat animasi tidak diputar (bila
sudah selesai, atau saat ada penundaan)
animation-iteration-count Menentukan berapa kali animasi harus dimainkan
animation-name Menentukan nama animasi @keyframes
animation-play-state Menentukan apakah animasi berjalan atau dijeda
animation-timing- Menentukan kurva kecepatan animasi
function
4.13 Images
4.13.1 Images bulat
Gunakan border-radius properti untuk membuat gambar bulat:
180
img { img {
border-radius: 8px; border-radius: 50%;
} }
4.13.2 Gambar responsif
gambar responsif akan secara otomatis menyesuaikan agar sesuai dengan ukuran layar.
Mengubah ukuran jendela browser untuk melihat efek berikut codingnya :
img {
max-width: 100%;
height: auto;
}
4.13.3 Gambar transparan
Opacity properti dapat mengambil nilai 0,0-1,0. Nilai yang lebih rendah, lebih transparan:
img { img { img {

opacity: 0.2; opacity: 0.5; opacity: 1;
filter: alpha(opacity=20); filter: alpha(opacity=50); filter: alpha(opacity=1);
/* For IE8 and earlier */ /* For IE8 and earlier */ /* For IE8 and earlier */
} } }
181
4.14 Properti objek-fit
properti digunakan untuk menentukan bagaimana sebuah <img> atau <video> harus
diubah ukurannya agar sesuai wadah.
4.14.1 Properti CSS objek-fit
CSS object-fitproperti digunakan untuk menentukan bagaimana sebuah <img> atau

<video> harus diubah ukurannya agar sesuai wadah.
Properti ini memberitahu konten untuk mengisi wadah dalam berbagai cara; seperti
"melestarikan bahwa rasio aspek" atau "meregangkan dan mengambil ruang sebanyak
mungkin".
Lihatlah gambar berikut dari Paris, yang merupakan 400x300 piksel:

img {
width: 200px;
height: 400px;
}
182
Jika kita menggunakan object-fit: cover;itu akan memotong sisi gambar,
melestarikan aspek rasio, dan juga mengisi ruang, seperti ini:
img {
width: 200px;
height: 400px;
object-fit: cover;
}
4.14.2 Semua Nilai dari properti CSS objek-fit
object-fit properti dapat memiliki nilai berikut:
 fill- Ini adalah default. konten yang diganti adalah ukuran untuk mengisi kotak
konten elemen. Jika perlu, objek akan diregangkan atau squished untuk menyesuaikan
 contain - Konten diganti adalah skala untuk mempertahankan rasio aspek sementara
pas dalam kotak konten elemen
 cover- Konten diganti adalah ukuran untuk mempertahankan rasio aspek sementara
mengisi seluruh kotak konten elemen. objek akan dipotong untuk menyesuaikan
 none - Konten diganti tidak diubah ukurannya
 scale-down - Konten tersebut berukuran seakan tidak ada atau berisi yang ditentukan
(akan menghasilkan ukuran objek beton yang lebih kecil)
183
4.15 Buttons
Css syntax :
<style>
.button {
background-color: #4CAF50; (untuk merubah warna tombol)
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; (untuk merubah ukuran tombol)
margin: 4px 2px;
cursor: pointer;
}
</style>
4.15.1 Tombol bulat
untuk membuat button seperti di atas Nampak pinggiranya bulat begini codingnya :
.button3 {border-radius: 8px;}
4.15.2 Tombol Border Berwarna
Coding :
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
184
4.15.3 Tombol Hoverable
Sebelum hover Sesudah mouse hover
.button3 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button3:hover {
background-color: #f44336;
color: white;
}
4.15.3 Tombol bayangan
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
4.15.4 Tombol dinonaktifkan
185
Css nya seperti ini
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
4.15.5 Grup Tombol berbatasan
Css nya seperti ini :

.button {
float: left;
border: 1px solid green;
}
4.15.6 Grup Tombol vertikal
.button {
display: block;
}
186
4.15.7 Tombol animasi
Sebelum hover Ketika mouse berada di buttom
<style>
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
187
}
</style>
</head>
<body>
<h2>Animated Button</h2>
<button class="button" style="vertical-align:middle"><span>Hover </span></button>
</body>
4.15.8 Menambahkan efek "ditekan" pada klik:
Sebeum sesudah
Untuk menambah efek saat mouse hover tinggal di kasih tambahan css seperti di bawah
ini :
.button:hover {background-color: #3e8e41}
4.16 Pagination
4.16.1 Pagination sederhana
Jika Anda memiliki situs web dengan banyak halaman, Anda mungkin ingin menambahkan
beberapa jenis pagination untuk setiap halaman:
Codingnya seperti ini

<style>
.pagination {
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
188
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
4.16.2 Pagination Aktif dan Hoverable
Untuk menambahkan effect hover anda harus menambahkan sytax berikut :
.pagination a:hover:not(.active) {background-color: #ddd;}
Jadi saat mose bergerak di pagination maka bacgrond akan di ubah warna #ddd
4.16.3 Hoverable Efek Transisi

Untuk memberi effect transisi maka tinggal di beri css seperti ini :
.pagination a {
transition: background-color .3s;
}
4.16.4 Polos Pagination
Gunakan border properti untuk menambahkan perbatasan untuk pagination:
.pagination a {
border: 1px solid #ddd; /* Gray */
}
4.17 Multi Column
189
4.17.1 CSS3 Multi-kolom Properti
Dalam bab ini Anda akan belajar tentang sifat-sifat multi-kolom berikut:
 column-count
 column-gap
 column-rule-style
 column-rule-width
 column-rule-color
 column-rule
 column-span
 column-width
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
</style>
Mengatur gab atau jarak antar colum menggunakan syntax di bawah ini :
div {
column-gap: 40px;
}
Menambahkan garis di gab
190
Tingga tambah css nya :
div {
column-rule-style: solid;
}
untuk mengatur tebal garis di gunakkan syntax di bawah ini
div {
column-rule-width: 1px;
}
4.18 User Interface
CSS3 memiliki fitur antarmuka pengguna baru seperti elemen mengubah ukuran,
menguraikan, dan kotak ukuran.
Dalam bab ini Anda akan belajar tentang sifat-sifat antarmuka pengguna berikut:
 resize
 outline-offset
4.18.1 CSS3 Ukuran berubah otomatis
Untuk membuat div yang memunyai ukuran exible di gunkananlah css 3 contohnya saja
penulis akan membuat div yang ukuran panjangnya mengikuti banyak text di dalam div berikut
cssnya menggunazontakan resize : horizontal .
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
191
Hasilnya :
Untuk menambah border berwarna merah maka anda harus menambahkan css seperti
berikut ini
Css nya :
div {
outline: 1px solid red;
outline-offset: 15px;
}
4.19 Box Sizing

box-sizing properti memungkinkan kita untuk memasukkan padding dan perbatasan
di lebar total elemen dan tinggi.
4.19.1 Tanpa CSS3 Properti box-sizing
Secara default, lebar dan tinggi dari elemen dihitung seperti ini:
lebar + bantalan + border = lebar yang sebenarnya dari unsur

ketinggian + bantalan + border = tinggi sebenarnya dari suatu elemen
Ini berarti: Ketika Anda mengatur lebar / tinggi dari elemen, elemen sering muncul lebih
besar dari yang Anda telah menetapkan (karena perbatasan elemen dan padding ditambahkan
ke elemen yang ditentukan lebar / tinggi).
Ilustrasi berikut menunjukkan dua <div> elemen dengan lebar tertentu yang sama dan tinggi:
192
Coding seperti ini :
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
4.20 Flexbox
4.20.1 Tata Letak
Sebelum Fleksibel Box Tata Letak Modul, ada empat mode tata letak:
 Blok, untuk bagian dalam halaman web.

 Inline, untuk teks.
 Tabel, untuk data tabel dua dimensi.
 Diposisikan, untuk posisi eksplisit elemen.
193
Fleksibel Box Tata Letak Modul, membuatnya lebih mudah untuk merancang struktur
tata letak yang fleksibel responsif tanpa harus menggunakan mengapung atau posisi.
4.20.2 flexbox Elements
Sebuah tata letak flexbox terdiri dari elemen induk, dengan satu atau lebih elemen anak.
<style>
.flex-container {
display: flex;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding:20px;
font-size: 30px;
}
</style>
Untuk membuat tampilan seperti di atas anda tinggal menambah syntax flex-direction:
column;
194
Css nya seperti di bawah ini
.flex-container {
display: flex;
flex-direction: column;
background-color: Teal;
}
Untuk membuat tampilan berbaik anda bias menggunakan flex-direction: column-

reverse;
Untuk membuat tampilan urut di gunakan script flex-direction: row;
Untuk membuat tampilan urut di gunakan script flex-direction: row-reverse;
Gunakan nowrap untuk menampilkan semua item dalam satu baris syntaxnya flex-
wrap: nowrap;
195
Untuk membuat tampilan seperti di atas kita gunakan syntax flex-wrap: wrap;
Untuk membuat tampilan terbalik maka anda bias menggunakan syntax flex-wrap:
wrap-reverse;
4.20.3 Justifi-content
Legal Values:
 Center
 flex-start
 flex-end
 space-around
 space-between
center
CSS :
.flex-container {
display: flex;
196
justify-content: center;
}
FLEX-START
CSS :
.flex-container {
display: flex;
justify-content: flex-start;
}
FLEX-END
CSS:
.flex-container {
display: flex;
justify-content: flex-end;
}
SPACE-AROUND
CSS:
.flex-container {
display: flex;
justify-content: space-around;
197
}
CSS:
.flex-container {
display: flex;
justify-content: space-between;
}
4.21 Media Query
4.21.1 CSS2 Diperkenalkan Jenis Media
@media aturan, diperkenalkan pada CSS2, memungkinkan untuk menentukan aturan

gaya yang berbeda untuk jenis media yang berbeda.
Contoh: Anda bisa memiliki satu set aturan gaya untuk layar komputer, satu untuk
printer, satu untuk perangkat genggam, satu untuk perangkat televisi-jenis, dan sebagainya.
Sayangnya jenis media ini tidak pernah mendapat banyak dukungan oleh perangkat,
selain jenis media cetak.
4.21.2 CSS3 Memperkenalkan Media Query
kueri media pada CSS3 memperpanjang CSS2 jenis media ide: Alih-alih mencari jenis
perangkat, mereka melihat kemampuan perangkat.
query media dapat digunakan untuk memeriksa banyak hal, seperti:
 lebar dan tinggi dari viewport

 lebar dan tinggi dari perangkat
 orientasi (adalah tablet / telepon dalam mode landscape atau portrait?)
 resolusi
Menggunakan pertanyaan media adalah teknik populer untuk memberikan sebuah style
sheet disesuaikan dengan tablet, iPhone, dan Android.
198
4.21.3 Contoh Sederhana Media Query
salah satu cara untuk menggunakan query media untuk memiliki bagian CSS alternatif
tepat di dalam style sheet.
Contoh berikut mengubah background-warna lightgreen jika viewport adalah 480 pixel
atau lebih luas (jika viewport kurang dari 480 piksel, latar belakang warna akan menjadi merah
muda):
body {
background-color: pink;
}
@media screen and (min-width: 480px) {

body {
background-color: lightgreen;
}
}
Contoh berikut menunjukkan menu yang akan mengapung di sebelah kiri halaman jika
viewport adalah 480 pixel atau lebih luas (jika viewport kurang dari 480 piksel, menu akan
berada di atas konten):
Css :
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}
Tampilan :
SEBELUM SESUDAH
199
BAB 5 WEB RESPONSIVE
5.1 WEB RESPONSIVE
5.1.1 Apa itu Web Responsive?

Web Responsive adalah sebuah desain yang ada pada website, dimana desain tersebut
bersifat fleksibel terhadap segala perangkat/gadget yang dipakai oleh pengguna. Jadi desain
web tersebut dapat mengikuti dan menyesuaikan terhadap bentuk, besar dan kecil dari sebuah
layar gadget, sehingga dapat lebih efektif dan dapat dibaca dengan maksimal pada setiap
ukuran layar device yang berbeda.
5.1.2 Cara mengetahui web tersebut responsive
Untuk mengetahui apakah web tersebut responsive atau tidak sebenarnya cukup mudah.
Bagi pengguna web browser firefox maka dapat menggunakan tool dari browser tersebut:
- klik menu
- pilih developer
- lalu pilih responsive design
200
bila website tersebut responsive, maka tampilan akan dapat menyesuaikan dengan
ukuran layar.
Contoh: website https://sia.ac.id/
201
5.2 VIEWPORT
5.2.1 Apa itu Viewport?

Viewport adalah area web yang terlihat dari perangkat yang digunakan. Antara
komputer/laptop dan smartphone tentu saja memiliki ukuran viewport yang berbeda. Viewport
berguna untuk mengatur ukuran agar halaman web dapat responsive sesuai dengan ukuran
layar perangkat yang digunakan untuk mengakses halaman web tersebut.
Untuk mengatur viewport pada sebuah web dapat menggunakan tag <meta>.
<meta name=”viewport” content=”width=400”>
agar layout dapat menjadi fleksibel, cara paling mudah adalah dengan memberikan
lebar viewport sesuai dengan ukuran lebar perangkat, yaitu dengan cara:
<meta name=”viewport” content=”width=device-width”>
dengan cara tersebut maka lebar layar akan mengikuti lebar dari layar perangkat yang
digunakan.
Agar pada saat halaman web diakses untuk pertama kali tidak terjadi zoom secara
otomatis, pada content=”” dapat diisi dengan initial-scale=1.
<meta name=”viewport” content=”initial-scale=1”>
dan bila ingin agar halaman web tidak dapat di zoom pada content=”” dapat di isi
dengan maximum-scale=1. Tetapi sebelum menerapkan parameter maximum-scale,
pertimbangkan kembali apakah anda sungguh harus menghalangi pengguna anda untuk
melakukan zoom.
<meta name=”viewport” content=”maximum-scale=1”>
contoh isi parameter lebih dari 1:
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
Contoh koding:
<html>
<head>
<title>Viewport</title>
<meta name="viewport" content="width=1, initial-scale=1">
</head>
<body>
<h1>Belajar Menggunakan Tag Viewport</h1>
<p>
202
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,when an unknown
printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
Hasil pada Browser:
Hasil pada layar kecil:
203
5.3 GRIDVIEW
Grid adalah struktur yang terdiri dari garis-garis horizontal atau gabungan garis vertikal
dan horizontal yang saling bertemu yang digunakan untuk mengatur layout atau interface.
Dengan grid anda dapat membagi suatu layout berdasarkan kolom-kolom, selanjutnya dengan
kolom-kolom ini konten diatur dan ditempatkan.
Grid membantu desainer untuk memetakan elemen-elemen desain yang berbeda untuk
ditempatkan pada layout dan menghubungkan elemen-elemen yang menyusun layout halaman
web tersebut. Sehingga memberi kesan keteraturan pada halaman web, yang pada akhirnya
secara visual menghasilkan struktur layout yang jelas dan terorganisir.
Contoh Grid
204
Apapun metode ataupun teknik yang digunakan dalam mendesain suatu website tentu
prioritasnya utamanya adalah pengguna, bukan pemilik atau si desainer sendiri. Bagaimana
mendesain web yang memudahkan pengguna dalam mengaksesnya, nyaman dalam mencari
informasi yang mereka butuhkan, tidak ada hal-hal yang mengganggu kenyamanan pengguna,
navigasi tidak membingungkan, segala sesuatunya jelas dan teratur. Kata kuncinya adalah user
experience, hal penting dan menjadi pertimbangan utama setiap keputusan di dalam proses
desain.
Pembuatan Grid dapat dilakukan dengan mudah, dengan melakukan pembagian
terhadap ukuran halaman web yang ingin dibangun dengan jumlah kolom Grid yang
diinginkan, dengan memperhitungkan Box Model juga tentunya. Misalkan, jika ingin membuat
halaman berukuran 960 px memiliki 12 Grid, maka dapat melakukan perhitungan berikut:
lebar_grid = 960 / 12
lebar_grid = 80 px
dan dengan memperkirakan box model, jika ingin setiap kolom memiliki jarak 20 px
maka dapat menambahkan margin ke kiri dan ke kanan pada setiap kolom, sebanyak setengah
dari jarak yang diinginkan (10 px), seperti berikut:
konten_grid = 80 - jarak
= 80 - 20
= 60 px
Sehingga ukuran margin kiri dan kanan dari elemen adalah:
margin_kiri_kanan = jarak / 2
= 20 / 2
= 10 px
Dengan perhitungan yang telah dilakukan, maka dapat diperkirakan bentuk dari sebuah
Grid adalah sebagai berikut:
Anda juga dapat membuat grid secara responsive, yaitu dengan membuat lebar 100%.
dengan begitu berapapun ukuran layarnya, maka grid dapat tampil secara penuh.
Untuk perhitungan dapat dilakukan sebagai berikut:
205
lebar_grid = 100% / 12
lebar_grid = 8.33333333%
Untuk margin dan padding sama seperti diatas dan dapat disesuaikan sesuai dengan
keinginan.
Pembuatan kode Grid menggunakan CSS sendiri sangatlah sederhana. Anda dapat
memulai pembuatan kode dengan memberikan nama kelas, untuk setiap ukuran Grid.
Misalnya, anda menggunakan nama kelas “coln” untuk setiap kolom Grid, dengan n adalah
lebar kolom yang diinginkan. Misalnya, kolom berukuran 2 Grid akan memiliki nama kelas
col2, 4 kolom memiliki nama kelas col4, dan seterusnya.
Untuk mengawali, berikan warna serta float kepada seluruh kolom yang ada:
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12{
background: #CCC;
border: solid 1px;
float: left;
height: 30px;
line-height: 30px;
text-align: center;
}
Kemudian, dapat mengaplikasikan perhitungan yang telah dilakukan sebelumnya ke
masing-masing ukuran kolom:
.col12{
width: 100%;
}
.col11{
width: 91.666666667%;
}
.col10{
width: 83.33333333%;
}
.col9{
width: 75%;
}
.col8{
206
width: 66.66666667%;
}
.col7{
width: 58.33333333%;
}
.col6{
width: 50%;
}
.col5{
width: 41.66666667%;
}
.col4{
width: 33.33333333%;
}
.col3{
width: 25%;
}
.col2{
width: 16.66666667%;
}
.col1{
width: 8.33333333%;
}
dan kemudian, row dan box sizing agar grid menjadi teratur. Lalu simpan dengan nama
grid.css
.row::after{
display: table;
content: "";
clear: both;
}
*{
box-sizing:border-box;
}
207
Untuk melihat hasilnya, jalankan kode HTML berikut:
<!DOCTYPE html>
<html>
<head>
<title>Grid View</title>
<link rel="stylesheet" type="text/css" href="grid.css">
</head>
<body>
<div class="row">
<div class="col1">1</div>
</div>
<div class="row">
</div>
<div class="row">
208
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
209
<div class="row">
</div>
<div class="row">
</div>
</body>
</html>
Maka hasilnya akan seperti:
dalam bentuk responsive:
210
5.4 MEDIA QUERIES
Media Query merupakan sebuah teknik css layout yang membebaskan anda untuk
menyeting tampilan dengan CSS di berbagai resolusi dan lebar, tinggi daripada browser yang
sedang digunakan secara spesifik. Maksudnya adalah, anda dapat dengan bebas menyeting
layout pada ukuran 1024 x 800 atau 800 x 400 sesuai dengan keinginan anda.
Ada beberapa macam penempatan CSS @media seperti screen(all), dan print.
Perhatikan contoh kode dibawah ini :
@media all{
.button{
padding: 15px;
}
}
@media print{
.button{
display: none;
211
}
}
Pada @media all semua class button akan memiliki padding sebesar 15 pixel pada saat
halaman tersebut dibuka, dan pada @media print class button akan disembunyikan, sesuai
dengan parameter display: none;. Jadi ketika dicetak maka button tidak akan ikut tercetak
5.5 Max-width dan Min-width

Max-width dan min-width digunakan untuk memberikan kondisi ukuran lebar resolusi.
Nilai min-width dan max-width akan memberi rentan resolusi kapan menggunakan layout
tersebut.
@media screen and (max-width: 600px){
.button{
padding: 15px;
}
}
@media screen and (min-width: 400px){
.button{
padding: 15px;
}
}
Dengan parameter diatas, bila ukuran layar dibawah atau sama dengan 600 pixel, maka
semua class button akan memiliki padding sebesar 15 pixel. Parameter tersebut tidak berlaku
apabila lebar layar lebih dari yang telah di tentukan. Min-width adalah kebalikan dari max-
width, bila ukuran layar lebih besar atau sama dengan 400 pixel, maka semua class button akan
memiliki padding dengan ukuran 15 pixel, dan bila ukuran layar lebih kecil dari ukuran layar
yang sudah ditentukan, maka parameter pada class button tidak berlaku.
212
5.6 Operator Logika
Dalam media query, berlaku sebuah ketetapan yang disebut dengan operator logika.
Dalam hal ini, ada beberapa operator logika yang bisa digunakan seperti not, and, dan only.
5.6.1 And
Operator logika and, seperti yang diketahui hanya akan bernilai true bila kedua
statement sama-sama memiliki nilai true.
@media screen and (max-width: 600px) and (min-width: 400px){
.button{
padding: 15px;
}
}
Dari kode diatas, parameter untuk button hanya akan berlaku bila lebar layar tidak lebih
besar dari 600 pixel dan tidak lebih kecil dari 400 pixel.
5.6.2 Not
Digunakan untuk membalikkan logika.
5.6.3 Only
Digunakan untuk mencegah browser lama yang tidak mendukung media query dengan
fitur media menerapkan style yang disediakan. Operator logika ini tidak memiliki efek pada
web browser modern.
5.7 IMAGES AND VIDEO
Agar gambar dapat responsive pada halaman web, maka dapat menggunakan media
query seperti diatas.
Contoh:
File index.html
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
213
<body>
<div class="gbr">
<img src="uty.png">
</div>
</body>
</html>
File style.css
.gbr{
width: 600px;
margin: auto;
}
.gbr img{
width: 600px;
}
@media (max-width:800px){
.gbr img{
width: 400px;
}
}
.gbr img{
width: 350px;
}
}
.gbr img{
width: 300px;
}
}
Pada kode diatas, class gbr memiliki lebar sebesar 600 pixel. Serta tag img yang
digunakan pada class img juga akan memiliki lebar 600 pixel.
214
Pada @media (max-width:800px) maka tag img pada class gbr akan memiliki ukuran
400 pixel, dan seterusnya sesuai dengan ukuran yang telah di tentukan.
Gambar diatas dengan ukuran 850x500 maka semua aturan pada @media tidak berlaku.
pada resolusi 750x500 maka aturan @media (max-width:800px) diterapkan, dengan

ukuran lebar gambar sebesar 350 pixel.
215
Settingan diatas juga berlaku untuk membuat video secara responsive dengan media
query.
File index.html
216
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="vid">
<video src="video.mp4" type="video/mp4" muted autoplay controls></video>
</div>
</body>
</html>
File style.css
.vid{
width: 600px;
margin: auto;
}
.vid video{
width: 600px;
}
.vid video{
width: 400px;
}
}
.vid video{
width: 350px;
}
}
.vid video{
217
width: 300px;
}
}
Untuk penjelasan sama seperti penjelasan diatas.
Hasilnya akan menjadi seperti berikut:
218
5.8 FRAMEWORK
Framework adalah sebuah software untuk memudahkan para programmer untuk

membuat sebuah aplikasi web yang memiliki berbagai fungsi diantaranya plugin dan konsep
untuk membentuk suatu sistem tertentu agar tersusun dan terstruktur dengan rapi.
Dengan menggunakan framework berarti anda harus bisa menggunakan fungsi-fungsi
dan variabel yang ada di dalam sebuah framework yang digunakan. Pada saat ini framework
terbagi menjadi dua macam, yaitu framework PHP dan framework CSS.
Untuk framework PHP terdiri dari:
- Laravel
- Yii
- Code Igniter
- Symfoni
- Zend Framework
- Cake PHP
- Fuel PHP
- Dll.
Sementara untuk framework CSS terdiri dari:
- Bootstrap
- Gumby
- Foundation
- Less Framework
- JQuery UI
- Unsemantic
- Blue Print CSS
- Dll.
Framework memiliki konsep MVC (Model, View, dan Controller) yaitu suatu metode
untuk memisahkan bagian-bagian dari suatu aplikasi web.
5.8.1 MODEL
Model mewakili struktur data, biasanya model berisi fungsi-fungsi yang membantu
dalam pengelolaan database (CRUD) create, read, update, delete, dll.
5.8.2 VIEW
View adalah bagian yang mengatur tampilan halaman website ke user.
5.8.3 CONTROLLER
Controller merupakan bagian yang menjembatani antara model dan view. Controller
berisi script-script php yang berfungsi untuk memproses suatu data dan mengirimkannya ke
halaman web.
219
Berikut adalah gambaran untuk konsep MVC
halaman web yang dilihat oleh user adalah view. Bila user melakukan request data yang
berhubungan dengan database, maka view tidak dapat langsung mengambil data tersebut
langsung ke model, tetapi harus melalui controller. Setelah user melalukan request data maka
controller akan bertugas untuk mencari data tersebut ke model, lalu mengalihkan data tersebut
kembali ke view agar dapat dilihat oleh user.
5.8.4 FRAMEWORK CSS
Bootstrap adalah sebuah library framework css yang dibuat khusus untuk bagian
pengembangan front-end website. Bootstrap merupakan salah satu framework html, css dan
javascript yang paling populer di kalangan web developer. Pada saat ini hampir semua web
developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih
mudah dan sangat cepat. Karena hanya perlu menambahkan class-class tertentu, misalnya
untuk membuat tombol, grid, navigasi, dll.
Bootstrap juga telah menyediakan kumpulan komponen class interface dasar yang telah
dirancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan.
Selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk
mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat.
220
Dengan menggunakan bootstrap anda juga diberi keleluasaan dalam mengembangkan tampilan
website yang menggunakan bootstrap yaitu dengan cara mengubah tampilan bootstrap dengan
menambahkan class dan css sendiri.
Cara menggunakan bootstrap juga cukup mudah, anda dapat mengunduh bootstrap
langsung pada situs resminya yaitu http://getbootstrap.com/.
sebelum melangkah lebih lanjut, ada baiknya anda mengetahui struktur dari bootstrap
tersebut.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ └── bootstrap-reboot.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.min.js
├── bootstrap.js
└── bootstrap.min.js
Untuk menggunakan bootstrap, sama seperti css pada umumnya.
Anda dapat menyelipkannya pada tag link.
<link rel=”stylesheet” href=”bootstrap/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”bootstrap/js/bootstrap.min.js”>
Untuk menggunakan semua isi dari bootstrap, cukup menggunakan bootstrap.css atau
bootstrap.min.css saja. Berikut ini adalah perbandingan dari file yang ada di bootstrap:
221
File CSS Layout Konten Komponen Utiliti
bootstrap.css Semua Semua Semua Semua
bootstrap.min.css
bootstrap-grid.css Hanya sistem Tidak ada Tidak ada Hanya utilitas
bootstrap-grid.min.css grid flex
bootstrap-reboot.css Tidak ada Hanya reboot Tidak ada Tidak ada
bootstrap-reboot.min.css
Berikut beberapa penjelasan mengenai class-class yang ada di dalam bootstrap.
5.8.5 GRID
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Contoh Grid</h1>
</div>
</div>

<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="text-center"><h4>12</h4></div>
</div>
</div>
</div>
</div>
<div class="row">
222
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>
Class row digunakan untuk membuat grid lebih teratur dan rapi.
223
Class col-sm adalah class untuk menentukan ukuran grid. Terdiri dari 12 ukutan, pada
bootstrap ada empat macam jenis grid, yaitu col-xs (extra small), col-sm (small), col-md
(medium), dan col-lg (large).
Class panel, panel-default, dan panel-body merupakan class yang mengatur bagian
border, padding, dan margin. Karena secara default class col hanya untuk mengatur grid saja.
Hasil:
5.8.6 TABLE
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<h1 class="page-header">Contoh tabel</h1>
</div>
</div>
<div class="panel-heading">
<h3 class="panel-title">Regular Table</h3>
</div>
224

<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>john@gmail.com</td>
<td>London, UK</td>
</tr>
<tr>
<td>Andy</td>
<td>andygmail.com</td>
<td>Merseyside, UK</td>
</tr>
<tr>
<td>Frank</td>
<td>frank@gmail.com</td>
<td>Southampton, UK</td>
</tr>
</tbody>
</table>
</div>

</div>
</body>
</html>
225
Tabel di dalam bootstrap ada beberapa jenis, yaitu regular, bordered, striped, hover,
condensed, condensed-bordered-striped, dan coloured. Untuk menggunakan masing-masing
tabel, cukup tambahkan class pada tag <table> yang dipisahkan oleh spasi.
<table class="table"> //untuk regular tabel
<table class="table table-bordered"> //untuk bordered tabel
<table class="table table-striped"> //untuk striped tabel
<table class="table table-hover"> //untuk hover tabel
<table class="table table-condensed"> //untuk condensed tabel
<table class="table table-condensed table-bordered table-striped">
//untuk condensed-bordered-striped tabel
<table class="table table-"> //untuk regular table
Hasil untuk regular dan bordered tabel:
226
5.8.7 BUTTON
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<h1 class="page-header">Contoh Button</h1>
</div>
</div>
<div class="row">
227
<div class="panel-heading">
<h3 class="panel-title">Default Buttons</h3>
</div>
<h4>Normal Buttons</h4>
<button type="button" class="btn btn-primary">
Primary</button>
<button type="button" class="btn btn-success">
Success</button>
<button type="button" class="btn btn-warning">
Warning</button>
<button type="button" class="btn btn-danger">
Danger</button>
<h4>Disabled Buttons</h4>
<button type="button" class="btn btn-default disabled">
Default</button>
<button type="button" class="btn btn-primary disabled">
Primary</button>
<button type="button" class="btn btn-success disabled">
Success</button>
<button type="button" class="btn btn-warning disabled">
Warning</button>
<button type="button" class="btn btn-danger disabled">
Danger</button>
<h4>Button Sizes</h4>
<button type="button" class="btn btn-primary btn-lg">
Large Button</button>
<button type="button" class="btn btn-primary">
Default</button>
<button type="button" class="btn btn-primary btn-sm">
Small</button>
<button type="button" class="btn btn-primary btn-xs">
Extra Small</button>
228
<button type="button" class="btn btn-primary btn-lg btn-block">
Block level Button
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Untuk membuat button, hanya perlu menyisipkan class btn pada tag button.
Hasil:
5.8.8 ALERT
229
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<h1 class="page-header">Contoh Alert</h1>
</div>
</div>

<div class="alert alert-success " role="alert">
      Alert Sukses
</div>
<div class="alert alert-info " role="alert">
      Alert Info
</div>
<div class="alert alert-warning " role="alert">
      Alert Warning
</div>
<div class="alert alert-danger " role="alert">
      Alert Danger
</div>
</div>

</body>
</html>
berguna sebagai spasi, karena spasi biasa tidak berpengaruh pada print out file
html.
Hasil:
230
5.8.9 ICONS
<i class="fa fa-search-minus"></i>

Untuk class icon, biasanya disisipkan pada tag <i> seperti diatas.
Icon tersebut cukup banyak jumlahnya. Berikut adalah beberapa contohnya:
231
232
233
234
235
236
5.9 TEMPLATE
Secara umum template adalah sebuah dokumen atau file yang memiliki format preset,
digunakan sebagai titik awal untuk aplikasi tertentu sehingga format tidak harus diciptakan
kembali setiap kali digunakan.
Tetapi di dalam web, template lebih dikenal sebagai sebuah desain tampilan halaman
yang berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa
pemrograman (html) dan siap untuk dipakai.
Web template tersebut dapat diunduh secara gratis ataupun berbayar disitus-situs
penyedia template yang ada. Saat ini sudah banyak yang memberikan template secara gratis
baik yang sudah responsive ataupun belum.
Ini adalah salah satu contoh live demo template yang bisa diunduh secara gratis.
237

Fix Ebook

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Fix Ebook

Diunggah oleh

Hak Cipta:

Format Tersedia

EBOOK DESAIN WEB

1.14.2 Ordered List ................................................................................................... 20

1.14.3 Mengubah Tampilan Ordered List ................................................................. 21

1.14.4 Definition List ................................................................................................ 21

1.14.5 Nested List ..................................................................................................... 22

1.26.2 Pada awalnya: ASCII ..................................................................................... 35

1.26.3 Pada Windows: ANSI .................................................................................... 35

1.26.4 Dalam HTML5: Unicode (UTF-8) ................................................................ 36

1.28.2 Penulisan Tag HTML .................................................................................... 37

1.28.3 XHTML Setiap Elemen Harus Ditutup ......................................................... 37

1.28.4 XHTML Elemen Kosong Juga Ditutup ......................................................... 37

1.28.5 XHTML Setiap Elemen Harus Menggunakan Lowercase ............................ 38

1.28.6 Nilai Atribut Harus Dikutip ........................................................................... 38

1.28.7 Minimasi Atribut Dialarang ........................................................................... 38

1.28.8 Cara Mengkonversi dari HTML ke XHTML ................................................ 38

1.29 Form ............................................................................................................................ 39

1.29.2 Input Types .................................................................................................... 40

1.30 Input Atribut ................................................................................................................ 48

1.30.2 Atribut readonly ............................................................................................. 48

1.30.3 Atribut ukuran ................................................................................................ 49

1.30.4 Atribut maxlength .......................................................................................... 49

BAB 2 HTML5 ............................................................................................................................ 50

2.1.2 Kanvas Gambar ............................................................................................. 51

2.1.3 Koordinat kanvas ............................................................................................. 52

2.1.4 Draw Line ........................................................................................................ 52

2.1.5 Draw a Circle ................................................................................................... 53

2.1.6 Canvas Gradient ............................................................................................... 54

2.1.7 CreateLinearGradient ....................................................................................... 55

2.1.8 CreateRadialGradient ....................................................................................... 56

2.1.10 Canvas Images ............................................................................................... 59

2.2 SVG ............................................................................................................................ 60

2.2.2 Membuat Gambar SVG ................................................................................... 61

2.2.3 Contoh SVG Rectangle .................................................................................... 62

2.2.4 Circle ................................................................................................................ 63

2.2.5 Ellipse .............................................................................................................. 63

2.2.6 Line .................................................................................................................. 64

2.2.7 Polygon ............................................................................................................ 65

2.2.8 Polyline ............................................................................................................ 65

2.2.9 Path .................................................................................................................. 66

2.2.10 Text ................................................................................................................ 67

2.2.11 Stroke ............................................................................................................. 68

2.2.12 Blur Effect ...................................................................................................... 68

2.2.13 Drop Shadow ................................................................................................. 69

2.2.14 Linear ............................................................................................................. 70

2.2.15 Radial ............................................................................................................. 71

2.3 Google Maps ................................................................................................................. 72

3.1.2 APA ITU CSS? ................................................................................................ 80

3.1.3 FUNGSI CSS ................................................................................................... 80

3.11.2 Text Alignment ........................................................................................... 89

3.11.3 Text Decoration ........................................................................................... 89

3.12 FONT ...................................................................................................................... 91

3.16.2 Display:Block ................................................................................................ 98

3.16.3 Display None ................................................................................................. 99

3.17 MAX-WIDTH ............................................................................................................. 99

3.18.2 Position: absolute ......................................................................................... 101

Position: relative; .................................................................................................... 102

3.18.3 Position: Fixed........................................................................................... 103

3.19 OVERFLOW ............................................................................................................. 104

3.20 FLOAT ...................................................................................................................... 105

3.22.2 Attribute align pada image ........................................................................... 108

3.23.2 Child Selector ............................................................................................ 110

3.23.3 Adjacent Sibling Selector .......................................................................... 111

3.23.4 General Sibling Selector............................................................................ 111