DAFTAR ISI

DAFTAR ISI .......................................................................................................... 1

BAB I HTML DAN CSS DASAR ........................................................................ 3
A. Pengenalan Dasar HTML ...................................................................... 3
B. Struktur pada HTML ............................................................................ 4
1. Tag HTML........................................................................................... 4
2. Element HTML ................................................................................... 4
3. Tag di dalam Element Head .............................................................. 5
4. Attribut HTML ................................................................................... 6
C. Pengenalan CSS ...................................................................................... 7
1. Struktur Penulisan CSS ..................................................................... 7
2. Teknik Penerapan CSS ...................................................................... 8
3. CSS Properties .................................................................................... 9
4. Selector................................................................................................. 9
5. Selector dengan id dan Class ........................................................... 10
D. Membuat Tabel dengan HTML .......................................................... 11
E. Membuat List dengan HTML ............................................................. 15
F. Membuat Layout ...................................................................................... 16
1. Membuat Layout dengan Table ...................................................... 16
2. Membuat Layout dengan tag <div> ................................................ 18
G. Display & Dimension............................................................................ 21
1. Tag <div> dan <span> ...................................................................... 21
2. Opsi Nilai Display ............................................................................. 21
3. Opsi Nilai Width dan Height ........................................................... 23
H. Box Model & Overflow ........................................................................ 24
1. Pengertian Box Model ...................................................................... 24
2. Property Margin, Padding dan Border .......................................... 24
3. Box Sizing .......................................................................................... 26
4. Overflow ............................................................................................ 27
I. CSS Float................................................................................................... 29
J. CSS Position .............................................................................................. 31
1. Static................................................................................................... 32
 2. Relative .............................................................................................. 32
3. Absolute ............................................................................................. 33
4. Fixed ................................................................................................... 33
K. CSS Background ................................................................................... 34
L. CSS Text ................................................................................................ 35
M. CSS Font ................................................................................................ 40
1. font-family ........................................................................................ 40
2. font-size .............................................................................................. 41
3. font-weight ......................................................................................... 42
4. font-variant ........................................................................................ 43
5. font-style ............................................................................................ 44
6. CSS Shorthand .................................................................................. 44
N. CSS Selector .......................................................................................... 45
1. Selector dengan nama tag ................................................................ 45
2. Selector dengan id dan class ............................................................ 46
3. Selector dengan atribut .................................................................... 47
4. Selector Pseudoclass ......................................................................... 48
O. Membuat Layout Dasar ....................................................................... 48
P. Membuat Daftar Produk ......................................................................... 53
Q. Membuat Menu Dropdown ................................................................. 56
R. Menambahkan Jumbotron ........................................................................ 60
 BAB I
HTML DAN CSS DASAR

A. Pengenalan Dasar HTML

Apa itu HTML ?

Pada tahun 1989, Tim Berners Lee dari organisasi European Organization for
Nuclear Research (CERN) mencetuskan ide untuk menciptakan suatu script bahasa
pemrograman pada suatu dokumen yang kemudian dikenal sebagai HTML. Saat ini
penggunaan dan pengembangan HTML diatur oleh World Wide Web Consortium
(W3C) dan versi terakhir dari HTML yang sekarang digunakan adalah HTML5.
Versi ini memiliki fitur yang lebih baik dari versi HTML sebelumnya. HTML
adalah kepanjangan dari HyperText Markup Language, merupakan bahasa
interpretasi yang digunakan pada sebuah halaman web. HTML itu sendiri bukanlah
sebuah bahasa pemrograman pada umumnya, seperti Java, C, C++, visual basic dan
sejenisnya. HTML mendeskripsikan struktur halaman web yang ditulis dengan
element atau tag yang yang mengapit konten atau teks didalamnya yang akan
ditampilkan pada sebuah halaman web oleh browser. Jadi apapun website yang kita
lihat pasti awalnya dibangun menggunakan HTML.
Apa Fungsi HTML ?
HTML memiliki fungsi untuk menampilkan konten, menghubungkan (link)
antar halaman, memberi struktur dan informasi terkait dengan sebuah halaman web.
Konten sebuah web tidak hanya terbatas pada teks saja, melainkan konten interaktif
lainnya seperti video, audio, gambar dan animasi dapat disisipkan dan ditampilkan
pada halaman web.
Struktur dasar HTML memiliki susunan file seperti berikut ini :

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Judul Halaman</title>
5. </head>
6. <body>
7. <!—- fungsi yang ingin ditampilkan pada web disimpan di tag <body> -->
8. <h1>Halo Dunia !</h1>
9. </body>
10. </html>
B. Struktur pada HTML

Struktur HTML terdiri dari 3 konsep dasar yaitu tag, elemen dan atribut.
1. Tag HTML
Tag HTML adalah suatu penanda untuk menandai elemen-elemen dalam
suatu dokumen HTML. Fungsi tag adalah untuk memberikan instruksi atau
memberitahu kepada browser bagaimana suatu objek di tampilkan berdasarkan tag
yang di gunakan, objek disini bisa berupa teks, video, audio dan gambar.
Tag HTML pada umumnya dibuat berpasangan, ada tag pembuka dan ada tag
penutup. Perbedaan yang terlihat pada tag tutup jika dibandingkan dengan tag buka
adalah tag tutup memiliki garis miring (“/”) pada struktur penulisannya. Lihat
contoh dibawah ini:

1. <!-- Tag buka pada HTML seperti dibawah -->

2. <tag_buka>
3. <!-- Tag tutup pada HTML seperti dibawah -->
4. </tag_tutup>

2. Element HTML
Rangkaian dari tag pembuka, konten dan tag penutup disebut dengan elemen
HTML. Contoh berikut ini adalah elemen heading 1 dan elemen paragraf:

1. <h1>Ini adalah heading 1</h1>

2. <p>Dan ini adalah paragraf</p>

Pada contoh kode di atas, kita memiliki elemen heading 1 yang tersusun dari
tag pembuka <h1>, konten elemen berupa teks bertuliskan Ini adalah heading 1
dan tag penutup </h1>. Kita juga memiliki elemen paragraf yang tersusun dari tag
pembuka <p>, konten teks (Dan ini adalah paragraf) dan tag penutup </p>.
Perbedaan dari kedua elemen ini adalah, elemen heading digunakan untuk
menampilkan judul halaman, sedangkan elemen paragraf digunakan untuk
menampilkan konten paragraf. Bila kita buka di browser, maka elemen heading
akan dicetak lebih besar dan lebih tebal daripada elemen paragraf.
Bila kita memiliki contoh kode seperti ini:

1. <body>
2. <h1>Halo dunia!</h1>
3. <p>Kita sedang belajar pemrograman HTML di <b>Syabaabul Fikri</b></p>

4. </body>
Keterangan:
• <body> disebut tag body (atau tag pembuka body), <h1> adalah tag h1 dan
<p> adalah tag p atau paragraf
• <h1>Halo Dunia!</h1> disebut elemen h1
• <p>Kita sedang belajar pemrograman HTML di <b>Syabaabul
Fikri</b></p> disebut elemen p atau paragraf
• <b>Syabaabul Fikri</b> disebut elemen b atau bold, <b> itu sendiri disebut
tag b atau bold
• semua bagian mulai dari tag pembuka body, berikut subelemen diantara tag
pembuka dan penutup body, hingga tag tutup body disebut dengan elemen
body.
• Penulisan elemen harus lengkap, mulai dari tag pembuka, konten dan tag
penutup. Apa yang sudah dibuka wajib ditutup kembali.
Ada banyak tag yang dapat kita gunakan di dalam HTML untuk menampilkan
konten. Bila kita bagi ke dalam dua area, maka ada tag-tag yang digunakan di dalam
elemen head dan ada tag yang digunakan di dalam elemen body.

3. Tag di dalam Element Head

Elemen yang ada di dalam head berfungsi sebagai informasi dari dokumen
HTML dan tidak akan ditampilkan di layar browser. Beberapa tag yang dapat
digunakan di dalam elemn head diantaranya adalah <meta>, <title>, <style>,
<script> dan <link>.

1. <head>
2. <meta charset="utf-8">
3. <title>Judul halaman</title>
4. <style> Style/CSS </style>
5. <script> Javascript </script>
6. </head>

Ada banyak tag yang dapat kita gunakan untuk menampilkan konten di dalam
elemen body. Ada tag yang berfungsi untuk menampilkan teks, seperti <h1>, <h2>,
<h3>, <h3>, <h4>, <h5>, <p> dan sebagainya.
Ada juga tag untuk memformat teks, seperti <b>, <i>, <strong>, <em>,
<mark>, <del> dan sebagainya.
 Untuk menampilkan gambar Kita dapat menggunakan tag <img>, dan untuk
membuat tautan Kita dapat menggunakan tag <a>.
Di dalam HTML, Kita dapat membuat elemen table dengan menggunakan
kombinasi dari tag <table>, <thead>, <tbody>, <tr>, <th>, dan <td>. Kita juga
dapat membuat list dengan menggunakan kombinasi dari tag <ul>, <ol>, <li>,
<dl>, <dd>, dan <dt>. Terkait pembuatan table dan list akan dibahas secara khusus
di bagian selanjutnya.
Kita juga dapat memasukkan video, audio atau format media lainnya
menggunakan sejumlah tag seperti <object>, <video>, <audio>, <embed>, dan
<iframe>.
Sampai pembahasan ini Kita cukup perlu paham terkait tag dan elemen.
Adapun cara penggunaan tag-tag di atas akan dibahas di bagian khusus setelah ini.
Bila Kita ingin tahu lebih lengkap tag HTML apa saja yang tersedia dapat dilihat di
https://www.w3schools.com/tags/. Jangan kaget bila Kita menemukan banyak tag
di HTML. Kita tak mesti menghapal semuanya, cukup pelajari tag-tag yang akan
Kita gunakan saat membuat web nantinya.
4. Attribut HTML
Atribut memiliki tugas khusus untuk memberikan informasi tambahan pada
sebuah tag.

1. <namatag nama-atribut="nilai-atribut"></namatag>

Dari contoh kode di atas yang dimaksud dengan atribut adalah tambahan yang
ditulis di dalam tag pembuka. Contohnya bila kita hendak membuat tautan atau link,
Kita akan perlu menulis minimal seperti ini:

1. <a href="login.html">Login</a>

Pada contoh kode di atas, kita membuat tautan menggunakan tag <a>. Namun
menggunakan tag <a> saja tidak cukup, karena kita perlu memberi tahu kepada
browser kemana halaman akan dialihkan bila pengguna mengklik tautan Login.
Oleh karena itu, tag <a> dilengkapi dengan atribut href yang harus diisi dengan
nama URL tujuan dari tautan tersebut. Pada contoh di atas, href adalah nama atribut,
dan "login.html" adalah nilai atribut. Nama dan nilai atribut dipisahkan dengan
tanda sama dengan (=).
 Selain tag <a> ada banyak tag lain yang memerlukan atribut. Bila
dikelompokkan, ada dua jenis atribut, yakni atribut global dan atribut spesifik.
Atribut global adalah atribut yang dapat diterapkan pada tag apapun karena sifatnya
yang umum. Contoh atribut global diantaranya adalah class, id, lang, title, style dan
sebagainya. Sedangkan atribut spesifik adalah atribut yang hanya berfungsi pada
tag-tag tertentu, seperti atribut href yang hanya berlaku pada tag <a> dan <link>,
atribut src yang hanya berlaku pada tag <img> dan <script>, dan sebagainya.
C. Pengenalan CSS

CSS singkatan dari Cascading Style Sheeet, yaitu dokumen yang berisi
definisi style untuk sebuah dokumen HTML atau untuk mengatur tampilan dari
dokumen HTML, meliputi layout dokumen, pewarnaan dan tampilan font dan teks
dan lain sebagainya. Penulisan CSS baiknya ditulis terpisah dari konten HTML hal
ini dilakukan untuk meningkatkan daya akses konten pada web dan mengurangi
kerumitan dalam penulisan kode dan struktur dari dokumen HTML.
Dengan adanya CSS, konten dan desain web akan mudah dibedakan,
sehingga 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.

1. Struktur Penulisan CSS

CSS ditulis dengan format penulisan seperti berikut:

1. selector { property:value }
2. selector { property:value; property:value }

Selector adalah bagian CSS yang berfungsi untuk memilih elemen yang akan
dikenai style. Property adalah jenis style yang akan diterapkan pada elemen, dan
value adalah nilai dari property yang digunakan. Property dan value CSS ditulis
diantara kurung kurawal. Bila property CSS yang digunakan lebih dari satu, maka
pisahkan dengan titik koma.
Contoh penulisan CSS:

1. <style>
2. h1 {
3. font-size: 40px;
4. color: orange;
5. }
 6. </style>
7.
8. <h1>Teks Judul</h1>

Pada contoh di atas, kita menulis h1 sebagai selector yang artinya kita ingin
agar elemen <h1> pada HTML dikenai style. Property yang diterapkan adalah font-
size untuk mengatur ukuran font, diset dengan nilai 40px, dan property color untuk
mengatur warna teks, diset dengan nilai orange.
2. Teknik Penerapan CSS
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu external,
internal dan inline.
• Inline Style Sheet
Pada teknik ini kita menulis kode CSS di dalam tag HTML, tepatnya di dalam
atribut style.

1. <h1 style="font-size:40px; color:orange;">

2. Teks Judul
3. </h1>

Teknik ini akan menerapkan style hanya pada elemen yang dikenai style
tersebut.
• Internal Style Sheet
Teknik internal stylesheet adalah menuliskan kode CSS di dalam file
dokumen HTML tapi dikumpulkan di dalam elemen <style>.

1. <style>
2. h1 {
3. font-size: 40px;
4. color: orange;
5. }
6. </style>
7.
8. <h1>Teks Judul</h1>

Teknik ini akan memberlakukan CSS hanya pada dokumen HTML dimana ia
disimpan.
• External Style Sheet
Teknik eksternal stylesheet adalah menuliskan kode untuk style CSS di file
terpisah dengan kode HTML.
Style di definisikan di dalam file, misalkan style.css:
 1. /* style.css */
2. h1 {
3. font-size: 40px;
4. color: orange;
5. }

kemudian style.css ditautkan didalam dokumen HTML menggunakan tag <link>:

1. <!-- index.html-->
2. <link href="style.css" rel="stylesheet" type="text/css" />
3. <h1>Teks Judul</h1>

Maka semua style yang ada di dalam style.css akan diterapkan ke dalam
dokumen HTML. Keuntungan dari teknik ini adalah, CSS dapat diterapkan ke
banyak dokumen HTML sehingga penulisan CSS menjadi lebih efisien.
3. CSS Properties
Property digunakan untuk memilih jenis style apa yang akan diterapkan pada
tag, class, atau id yang telah dipilih pada selector, dan pada satu selector bisa berisi
beberapa property. Pada CSS terdapat banyak sekali property yang dapat digunakan
untuk menghias webisite. Jenis propery CSS diantaranya adalah:
• background
• border
• box model
• layouting
• font & text, dll.
Karena ada begitu banyak property CSS, maka kita tidak perlu menghafal
semuanya, cukup pahami apa fungsi dari property yang akan digunakan. Referensi
property CSS lebih lengkap bisa dilihat di https://www.w3schools.com/cssref/
4. Selector
Pada CSS terdapat selector yang digunakan untuk memilih elemen HTML
yang akan dikenai style. Pemilihan elemen menggunakan nama tag, nilai atribut,
atau pola tertentu. Berikut adalah contoh penulisan selector:

1. h1 { color:red }

Cara membaca selector diatas adalah "Pilih elemen h1 pada document, lalu
set property colornya menjadi red"
 Terdapat dua macam tag selector yaitu single selector dan multiple selector
(menargetkan tag yang berbeda dengan style yang sama), bisa kita lihat pada contoh
dibawah ini:
Contoh single selector

1. h1 { color:red }
2. p { font-size:16px }

Contoh multiple selector (menargetkan tag yang berbeda dengan style

yang sama)

1. h1,h2,h3,p {
2. font-family: "arial", sans-sarif;
3. color: #666;
4. }

5. Selector dengan id dan Class

Selector class digunakan untuk menentukan style juga sama seperti id.
Bedanya adalah jika id hanya boleh dipanggil satu kali saja, class bisa dipanggil
berkali kali pada satu halaman. Selector ini ditulis dengan awalan titik atau dot “.”
pada CSS dan class=“nama-class” pada HTML. Sedangkan selector id hanya
boleh dipanggil satu kali, selain itu untuk Selector ini ditulis dengan awalan pagar
“#” pada CSS dan id=“nama-id” pada HTML. Berikut contoh implementasi
selector id dan class:

1. <style>
2. #higlight {background-color:yellow}
3. .red{color:red}
4. </style>
5.
6. <h1>Penggunaan Selector Class dan Id</h1>
7. <p class="red">Ini selector class</p>
8. <p id="higlight">Ini selector id</p>

EVALUASI
D. Membuat Tabel dengan HTML

Untuk menampilkan data yang terstruktur memiliki banyak cara, mulai dari
menggunakan grafik,sampai dengan menggunakan tabel, namun pada pembahasan
ini kita akan sedikit mengulas tentang menampilkan data menggunakan tabel.
Sebuah tabel terdiri dari dua elemen utama, yaitu baris dan kolom. HTML
sudah menyediakan beberapa elemen untuk membuat sebuah tabel, yaitu <table>,
<tr>, <td>. Sebelum membuat baris dan kolom maka kita harus inisialisasi tabel
terlebih dahulu menggunakan elemen <table>.

1. <table>
2. <!-- Data -->
3. </table>

Selanjutnya, kita menambahkan baris ke dalam tabel tersebut dengan

menggunakan elemen <tr>.

1. <table>
2. <tr>
3. <!-- Isi baris tabel -->
4. </tr>
5. <tr>
6. <!-- Isi baris tabel -->
7. </tr>
8.
9. </table>

Kemudian setiap baris dari tabel tentunya harus diisikan dengan data yang
akan menghasilkan kolom tabel. untuk mengisi data pada kolom tabel pada html
menggunakan elemen <td>.Tetapi, jika ingin membuat baris pertama pada tabel
sebagai header, kita dapat mengisikan baris pertama dengan elemen <th>. Dapat
kita lihat hasil akhir dari tabel yang kita buat sebagai berikut:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Dasar Html</title>
5. </head>
6. <body>
7. <table>
8. <tr>
9. <th>No</th>
10. <th>Nama</th>
11. <th>Alamat</th>
12. </tr>
13. <tr>
14. <td>1</td>
15. <td>Cecep</td>
 16. <td>Cibeber</td>
17. </tr>
18. <tr>
19. <td>2</td>
20. <td>Encup Boy</td>
21. <td>Mandalajaya</td>
22. </tr>
23. <tr>
24. <td>3</td>
25. <td>Roni</td>
26. <td>Mangkabaya</td>
27. </tr>
28. </table>
29. </body>
30. </html>

Maka hasil yang muncul pada browser adalah seperti berikut:

Dapat kita lihat dari gambar diatas, tidak terlihat seperti tabel ya, kita perlu
menambahkan border="1" pada elemen tabel tersebut.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Dasar Html</title>
5. </head>
6. <body>
7. <table border="1">
8. <tr>
9. <th>No</th>
10. <th>Nama</th>
11. <th>Alamat</th>
12. </tr>
13. <tr>
14. <td>1</td>
15. <td>Cecep</td>
16. <td>Cibeber</td>
17. </tr>
18. <tr>
 19. <td>2</td>
20. <td>Encup Boy</td>
21. <td>Mandalajaya</td>
22. </tr>
23. <tr>
24. <td>3</td>
25. <td>Roni</td>
26. <td>Mangkabaya</td>
27. </tr>
28. </table>
29. </body>
30. </html>

Maka hasilnya adalah seperti ini:

Seperti itu kira-kira bentuk table pada HTML. Sekarang kita lanjut pada
fungsi penggabungan baris dan kolom. Pada HTML terdapat perintah colspan dan
rowspan. Colspan adalah perintah untuk menggabungkan beberapa kolom menjadi
satu. Contohnya kalian bisa rubah htmlnya menjadi seperti ini.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Dasar Html</title>
5. </head>
6. <body>
7. <table border="1">
8. <tr>
9. <th colspan="2">No</th>
10. <th>Alamat</th>
11. </tr>
12. <tr>
13. <td>1</td>
14. <td>Cecep</td>
15. <td>Cibeber</td>
16. </tr>
17. <tr>
18. <td>2</td>
19. <td>Encup Boy</td>
20. <td>Mandalajaya</td>
21. </tr>
22. <tr>
23. <td>3</td>
24. <td>Roni</td>
25. <td>Mangkabaya</td>
 26. </tr>
27. </table>
28. </body>
29. </html>

Hasilnya adalah seperti ini:

Lalu ada rowspan yang berfungsi untuk menggabungkan beberapa baris

menjadi satu. Contohnya seperti ini:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Dasar Html</title>
5. </head>
6. <body>
7. <table border="1">
8. <tr>
9. <th>No</th>
10. <th>Nama</th>
11. <th>Alamat</th>
12. </tr>
13. <tr>
14. <td>1</td>
15. <td>Cecep</td>
16. <td rowspan="3">Cibeber</td>
17. </tr>
18. <tr>
19. <td>2</td>
20. <td>Encup Boy</td>
21. </tr>
22. <tr>
23. <td>3</td>
24. <td>Roni</td>
25. </tr>
26. </table>
27. </body>
28. </html>

Hasilnya seperti ini:

E. Membuat List dengan HTML

List/daftar biasanya mengarah pada pengurutan sebuah kata yang didalamnya

terdiri dari poin-poin tersendiri. Sebagai contoh pada tutorial pembuatan makanan
dimana terdapat tahapan-tahapan yang perlu dituliskan secara terurut. Dalam
pembuatan list dibagi menjadi 2 yaitu ordered list (ol) dan unordered list (ul).
Ordered list atau daftar terurut memberikan fasilitas untuk membuat daftar data
secara terurut, sedangkan unordered list digunakan untuk menampilkan daftar data
yang tidak memiliki urutan tertentu, atau yang tidak mementingkan urutan.
Untuk pembuatan ordered list kita menggunakan elemen <ol> (ordered list)
dan isi dari list sendiri dibuat dengan menggunakan elemen <li> (list item),
sedangkan untuk membuat ordered list menggunakan elemen <ul> (unordered list),
dan untuk mengisikan daftar, kita dapat menggunakan elemen <li> (list item).
Berikut contoh penggunaan ordered list dengan tag <ol>:

1. <ol>
2. <li>Ini adalah contoh daftar ordered list</li>
3. <li>Ini adalah contoh daftar ordered list</li>
4. <li>Ini adalah contoh daftar ordered list</li>
5. <li>Ini adalah contoh daftar ordered list</li>
6. <li>Ini adalah contoh daftar ordered list</li>
7. </ol>

Berikut contoh penggunaan unordered list dengan tag <ul>:

1. <ul>
2. <li>Ini adalah contoh daftar unordered list</li>
3. <li>Ini adalah contoh daftar unordered list</li>
4. <li>Ini adalah contoh daftar unordered list</li>
5. <li>Ini adalah contoh daftar unordered list</li>
6. <li>Ini adalah contoh daftar unordered list</li>
7. </ul>

Dan ini adalah contoh implementasi serta output dari <ul> dan <ol>:

1. <ol>
2. Ordered List
3. <li>Ini adalah contoh daftar ordered list</li>
4. <li>Ini adalah contoh daftar ordered list</li>
5. <li>Ini adalah contoh daftar ordered list</li>
6. <li>Ini adalah contoh daftar ordered list</li>
7. <li>Ini adalah contoh daftar ordered list</li>
8. </ol>
9.
10. <ul>
11. Unordered List
12. <li>Ini adalah contoh daftar ordered list</li>
13. <li>Ini adalah contoh daftar ordered list</li>
 14. <li>Ini adalah contoh daftar ordered list</li>
15. <li>Ini adalah contoh daftar ordered list</li>
16. <li>Ini adalah contoh daftar ordered list</li>
17. </ul>

Hasilnya seperti ini:

F. Membuat Layout

1. Membuat Layout dengan Table

Untuk membuat layout sederhana, kita dapat menggunakan tag <table>. Tabel
disusun dari kolom dan baris, kita dapat memanfaatkan kolom dan baris tersebut
menjadi sebuah layout.

1. <table width="100%">
2. <tr>
3. <td colspan="2" style="background:red">
4. <h1>Header</h1>
5. </td>
6. </tr>
7. <tr valign="top">
8. <td width="50" style="background:green">
9. <strong>Sidebar</strong>
10. </td>
11. <td width="100" height="550"style="background:purple">
12. <strong>Halaman Konten</strong>
13. Lorem Ipsum is simply dummy text of the printing and typeset
ting
14. industry.
15. Lorem Ipsum has been the industry's standard dummy text ever
since the
16. 1500s, when an unknown printer took a galley of type and scr
ambled it to
17. make a type specimen book. It has survived not only five cen
turies, but
18. also the leap into electronic typesetting, remaining essenti
ally unchanged.
 19. It was popularised in the 1960s with the release of Letraset
sheets
20. containing Lorem Ipsum passages, and more recently with desk
top publishing
21. software like Aldus PageMaker including versions of Lorem Ip
sum.
22. </td>
23. </tr>
24. <tr>
25. <td colspan="2" style="background:blue">
26. <h1>Footer</h1>
27. </td>
28. </tr>
29. </table>

• colspan digunakan untuk menggabungkan kolom .

• width digunakan untuk mengatur lebar kolom. kita bisa mengisinya dalam
bentuk px maupun %.
• height digunakan untuk mengatur tinggi kolom. kita bisa mengisinya dalam
bentuk px maupun %.

Setelah membuat kerangka layout sederhana, kita dapat mengembangkan

layout tersebut seperti menambahkan navigasi pada kolom sidebar.

1. <ul>
2. <li><a href="home.html">Home</a></li>
3. <li><a href="about.html">About</a></li>
4. <li><a href="contact.html">Contact</a></li>
5. <li><a href="forum.html">Forum</a></li>
6. </ul>

Saat ini membuat layout dengan table mulai ditinggalkan.Membuat layout

dengan table tidak direkomendasikan karena akan menyulitkan kita dalam
mendesain ulang di kemudian hari.
2. Membuat Layout dengan tag <div>
Untuk membuat layout dengan tag <div>, kita membutuhkan style css.
Berikut kita akan membuat kerangka / struktur layout:

1. <div id="header">
2. Header
3. </div>
4. <div id="sidebar">
5. Sidebar
6. </div>
7. <div id="content">
8. Content
9. </div>
10. <div id="footer">
11. Footer
12. </div>

Sintax di atas, akan menghasilkan output seperti di bawah ini, tapi masih
belum terlihat seperti sebuah layout.

Untuk membuatnya menjadi sebuah layout, kita harus menambahkan style

css berdasarkan id yang dipanggil oleh masing-masing <div>.
Berikut kita akan menambahkan style CSS:

1. <style>
2. #header
3. {
4. background : #00ccff;
5. height : 10%;
6. font-size : 1.5em;
7. text-align :center;
8. padding-top : 20px;
9. }
10. #sidebar
11. {
12. background : #99ccff;
13. float : left;
14. height : 400px;
15. width :30%;
16. font-size : 1.5em;
17. text-align :center;
18. padding-top : 20px;
19.
20. }
21. #content
22. {
23. background : #9999ff;
24. float : right;
25. width : 70%;
26. height : 400px;
27. font-size : 1.5em;
28. text-align :center;
29. padding-top : 20px;
30. }
31. #footer
32. {
33. background : #3399ff;
34. clear : both;
35. font-size : 1.5em;
36. text-align :center;
37. }
38. </style>

Lalu kita akan mengaitkan CSS dengan HTML

1. <style>
2. #header
3. {
4. background : #00ccff;
5. height : 10%;
6. font-size : 1.5em;
7. text-align :center;
8. padding-top : 20px;
9. }
10. #sidebar
11. {
12. background : #99ccff;
13. float : left;
14. height : 400px;
15. width :30%;
16. font-size : 1.5em;
17. text-align :center;
18. padding-top : 20px;
19.
20. }
21. #content
22. {
23. background : #9999ff;
24. float : right;
25. width : 70%;
26. height : 400px;
27. font-size : 1.5em;
28. text-align :center;
29. padding-top : 20px;<style>
30. #header
31. {
32. background : #00ccff;
33. height : 10%;
34. font-size : 1.5em;
35. text-align :center;
36. padding-top : 20px;
37. }
38. #sidebar
39. {
40. background : #99ccff;
41. float : left;
42. height : 400px;
43. width :30%;
44. font-size : 1.5em;
45. text-align :center;
46. padding-top : 20px;
47.
48. }
49. #content
50. {
51. background : #9999ff;
52. float : right;
53. width : 70%;
54. height : 400px;
55. font-size : 1.5em;
56. text-align :center;
57. padding-top : 20px;
58. }
59. #footer
60. {
61. background : #3399ff;
62. clear : both;
63. font-size : 1.5em;
64. text-align :center;
65. }
66. </style>
67. <div id="header">
68. Header
69. </div>
70. <div id="sidebar">
71. Sidebar
72. </div>
73. <div id="content">
74. Content
75. </div>
76. <div id="footer">
77. Footer
78. </div>
79. }
80. #footer
81. {
82. background : #3399ff;
83. clear : both;
84. font-size : 1.5em;
85. text-align :center;
86. }
87. </style>

Maka hasilnya akan jadi seperti ini:

G. Display & Dimension

1. Tag <div> dan <span>

Pada tag <div> dan <span> tidak ada fungsi khusus seperti <h1> , <p>,
<img> dan tag semantik lainnya. Tag <div> dan <span> digunakan untuk
mengelompokkan elemen html atau memberi style secara spesifik.
• Default Display Mode
Tag <div> bersifat block.

1. div
2. {
3. display : block;
4. }

Tag <span> bersifat inline.

1. div
2. {
3. display : inline;
4. }

2. Opsi Nilai Display

Block
• membuat baris baru saat dirender
• dapat diset lebar dan tingginya
• bila lebar tidak diset, maka lebar elemen akan memenuhi lebar dari parentnya.
• di dalamnya dapat disimpan elemen bertipe block, inline dan inline block.
• Contoh yang memiliki nilai block : <h1>-<h6> , <p> , <ul>, <ol> , <li>,
<form>, <hr> ...

1. <style>
2. h1,p {background:orange};
3. </style>
4. <h1>Halo Dunia!</h1>
5. <p> Selamat datang di Syabaabul Fikri</p>

Ketika kita tidak menentukan lebarnya, maka lebarnya akan memenuhi

elemen parent.

Sekarang kita coba tentukan lebarnya.

 1. <style>
2. h1,p {background:orange;width:200px;height:75px;}
3. </style>
4. <h1>Halo Dunia!</h1>
5. <p> Selamat datang di Syabaabul Fikri</p>

Ketika disetting lebar dan tingginya, maka lebarnya sesuai dengan yang sudah
disetting.
Inline
• tidak membuat baris baru saat dirender
• lebar dan tinggi sebesar konten yang ada di dalamnya
• lebar dan tingginya tidak dapat diatur
• margin dan padding hanya mempengaruhi elemen secra horizontal, tidak
vertikal
• elemen inline : <b> , <i>, <em> , <strong>, <a>, <span>, <sub>, <sup>,
<mark>, <button>, <input>, <label>, <select>, <textarea>.

1. <style>
2. span {background:orange;}
3. </style>
4. <h1>Halo Dunia!</h1>
5. <p> Selamat datang di<span>Syabaabul Fikri</span></p>

Ketika kita tambahkan witdh dan height pada kelas span, maka tidak
berpengaruh pada outputnya.

1. <style>
2. span {background:orange;width:100px;height:50px;}
3. </style>
4. <h1>Halo Dunia!</h1>
5. <p> Selamat datang di<span>Syabaabul Fikri</span></p>

Inline-Block
• tidak ada elemen html yang default bertipe inline-block
• nilai property display dapat diset manual menjadi inline-block
• sifat dasar sama dengan inline
• inline-block akan berpengaruh dari property width dan height

1. <style>
2. span {background:orange;width:100px;height:50px;display:inline-block;}
3. </style>
4. <h1>Halo Dunia!</h1>
5. <p> Selamat datang di<span>SyabaabulFikri</span></p>

None
Digunakan untuk menyembunyikan elemen dari layar browser.

1. <style>
2. span {background:orange;width:100px;height:50px;display:none;}
3. </style>
4. <h1>Halo Dunia!</h1>
5. <p> Selamat datang di<span>SyabaabulFikri</span></p>

Tulisan SyabaabulFikri pada sintax tersebut disembunyikan.

3. Opsi Nilai Width dan Height
Opsi nilai widht dan height diantaranya : px, %, in, cm, dan lainnya.

Property Dimensi
Property Keterangan
width mengatur lebar elemen
height mengatur tinggi elemen
min-width mengatur lebar minimum elemen
min-height mengatur tinggi minimum elemen
max-width mengatur lebar maksimum elemen
max-height mengatur tinggi maksimum elemen
H. Box Model & Overflow

1. Pengertian Box Model

Setiap elemen di halaman HTML direpresentasikan sebagai sebuah kotak.
Kita bisa mengatur ukuran maupun posisi kotak tersebut dan kita juga dapat
memberi warna / gambar latar untuk kotak tersebut.
Box model memiliki komponen-komponen didalamnya, perhatikan gambar
berikut ini:

Margin => Jarak spasi antara satu elemen dengan elemen lain atau elemen
parentnya. Margin bersifat transparan.
Border => Batas garis yang mengelilingi padding dan content.
Padding => Jarak spasi antara border dan content. Padding bersifat transparan.
Content => Isi dari elemen, bisa berupa text atau elemen lain. Text, gambar atau
elemen lainnya ditampilkan di bagian ini.

2. Property Margin, Padding dan Border

Margin = margin-top, margin-right, margin-bottom, margin-left, margin.
Nilai property : px, %, auto dan margin boleh memiliki nilai negatif.

1. <style>
2. p
3. {
4. background: orange;
5. width : 160px;
6. height : 160px;
7. margin: 20px auto;
8. }
9. </style>
10. <p>Selamat datang di website ku. Disini Kita bisa membaca konten tentang
Syabaabulfikri.</p>

Nilai auto akan menempatkan suatu elemen berada di tengah parent.

 1. <style>
2. p
3. {
4. background: orange;
5. width : 160px;
6. height : 160px;
7. margin: 20px 50px 30px 25px;
8. }
9. </style>
10. <p>Selamat datang di website ku. Disini Kita bisa membaca konten tentang
Syabaabulfikri.</p>

margin: 20px 50px 30px 25px;

• top margin diset 20px
• right margin diset 50px
• bottom margin diset 30px
• left margin diset 25px

Padding = padding-top, padding-right, padding-bottom,padding-left, padding.

Nilai property : px, %, padding tidak boleh bernilai negatif.

1. <style>
2. p
3. {
4. background: orange;
5. width : 160px;
6. height : 160px;
7. padding: 20px 50px 30px 25px;
8. }
9. </style>
10. <p>Selamat datang di website ku. Disini Kita bisa membaca konten tentang
Syabaabulfikri.</p>

padding: 20px 50px 30px 100px;

top padding diset 20px
right padding diset 50px
bottom padding diset 30px
left padding diset 100px
Border = border-top, border-right, border-bottom, border-left, border.

1. border : width style color;

width : ukuran ketebalan border

style : bentuk garis
color : warna dari border

1. border : 2px solid red;

Border Style
Dotted : garis dengan kombinasi bulat-bulat
Dashed : garis dengan kombinasi garis putus-putus
Solid : garis lurus

3. Box Sizing
content-box

1. <style>
2. p
3. {
4. background: orange;
5. width : 160px;
6. height : 160px;
7. padding: 40px;
8. }
9. </style>
10. <p>Selamat datang di website Syabaabul Fikri.</p>
 Apabila menggunakan content-box , maka lebar box akan dijumlahkan
dengan padding. Misal lebar konten 160px dengan padding left 40px dan padding
right 40px, maka total lebar box tersebut menjadi 240px.

border-box

1. <style>
2. p
3. {
4. background: orange;
5. width : 160px;
6. height : 160px;
7. padding: 40px;
8. box-sizing:border-box;
9. }
10. </style>
11. <p>Selamat datang di website Syabaabul Fikri.</p>

Pada border-box ukuran sudah ditentukan 160px, tidak akan dijumlahkan

dengan padding yang Kita tentukan.
4. Overflow
Visible

1. <style>
2. p
3. {
4. background: orange;
5. width : 160px;
6. height : 160px;
7. padding: 40px;
8. box-sizing:border-box;
9. }
10. </style>
11. <p>Selamat datang di website Syabaabul Fikri. Disini Kita bisa membaca a
rtikel mengenai SF.</p>
 Auto

1. <style>
2. p
3. {
4. background: orange;
5. width : 160px;
6. height : 160px;
7. padding: 40px;
8. box-sizing:border-box;
9. overflow:auto;
10. }
11. </style>
12. <p>Selamat datang di website Syabaabul Fikri. Disini Kita bisa membaca a
rtikel mengenai SF.</p>

Pada overflow auto akan ditambahkan scroll apabila konten yang ada
melebihi box yang disediakan, namun bila konten yang ada tidak melebihi box,
maka tidak ditambahkan scroll.
Scroll

1. <style>
2. p
3. {
4. background: orange;
5. width : 160px;
6. height : 160px;
7. padding: 40px;
8. box-sizing:border-box;
9. overflow:scroll;
10. }
11. </style>
12. <p>Selamat datang di website Syabaabul Fikri. Disini Kita bisa membaca a
rtikel mengenai SF.</p>
 Pada overflow scroll, setiap box akan ditambahkan scroll tidak memandang
apakah konten yang ada sedikit ataupun banyak.
Hidden

1. <style>
2. p
3. {
4. background: orange;
5. width : 160px;
6. height : 160px;
7. padding: 40px;
8. box-sizing:border-box;
9. overflow:hidden;
10. }
11. </style>
12. <p>Selamat datang di website Syabaabul Fikri. Disini Kita bisa membaca a
rtikel mengenai SF.</p>

Pada overflow hidden, apabila konten yang ada banyak dan melebihi box,
maka konten sisanya tidak akan ditampilkan.

I. CSS Float

CSS Float digunakan untuk memposisikan elemen dalam sebuat layout

halaman website. Sebuah elemen bisa diposisikan seakan-akan berada mengapung
diantara elemen setelahnya. Beberapa value yang digunakan untuk property float
yaitu : left, right, none. Secara default float memiliki nilai none.
float: none menentukan bahwa sebuah elemen tidak boleh mengapung (float).

1. float: none;
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <title>CSS Float</title>
6. </head>
7. <body>
8. <img src="syabaabulfikri.png">
9. <p>SYABAABUL FIKRI adalah Lembaga Kursus dan Pelatihan Kerja di Cika
long Kabupaten Tasikmalaya - Jawa Barat yang memiliki izin lengkap dan b
erkualitas.
10. Dengan semangat berbagi ilmu dan kecintaan pada dunia pendidikan, Kak Is
mail, S.Kom dkk mendirikan lembaga kursus dan pelatihan kerja di Cikalon
g Kab. Tasikmalaya yang resmi dibuka programnya pada tanggal 04 April 20
13</p>
11. </body>
12. </html>
 Bila kita lihat pada kode diatas float tidak di inisialisasi valuenya maka secara
default bernilai none, sehingga tampilannya akan seperti di bawah ini

float: left digunakan untuk menentukan bahwa sebuah elemen harus

mengapung (float) disebelah kiri dari elemen blok yang menampugnya.

1. float: left;

1. <!DOCTYPE html>
2. <html>
3. <style>
4. img{
5. float: left;
6. padding-right: 10px;
7. }
8. </style>
9. <head>
10. <title>CSS Float</title>
11. </head>
12. <body>
13. <img src="syabaabulfikri.png">
14. <p>SYABAABUL FIKRI adalah Lembaga Kursus dan Pelatihan Kerja di Cika
long Kabupaten Tasikmalaya yang memiliki izin lengkap dan berkualitas. D
engan semangat berbagi ilmu dan kecintaan pada dunia pendidikan, Kak Ism
ail, S.Kom dkk mendirikan lembaga kursus dan pelatihan kerja di Cikalong
Kab. Tasikmalaya yang resmi dibuka programnya pada tanggal 04 April 201
3</p>
15.
16. </body>
17. </html>

Bila kita lihat pada kode diatas kita meletakan float: left pada elemen gambar
sehingga secara otomatis gambar akan diletakan disamping kiri dan text akan
menjorok mengikuti elemen gambar.
 float: right digunakan untuk menentukan bahwa sebuah elemen harus
mengapung (float) disebelah kanan dari elemen blok yang menampugnya.

1. float: right;

1. <!DOCTYPE html>
2. <html>
3. <style>
4. img{
5. float: right;
6. padding-right: 10px;
7. }
8. </style>
9. <head>
10. <title>CSS Float</title>
11. </head>
12. <body>
13. <img src="syabaabulfikri.png">
14. <p>SYABAABUL FIKRI adalah Lembaga Kursus dan Pelatihan Kerja di Cika
long Kabupaten Tasikmalaya yang memiliki izin lengkap dan berkualitas. D
engan semangat berbagi ilmu dan kecintaan pada dunia pendidikan, Kak Ism
ail, S.Kom dkk mendirikan lembaga kursus dan pelatihan kerja di Cikalong
Kab. Tasikmalaya yang resmi dibuka programnya pada tanggal 04 April 201
3</p>
15.
16. </body>
17. </html>

Bila kita lihat pada kode diatas kita meletakan float: right pada elemen
gambar sehingga secara otomatis gambar akan diletakan disamping kanan.

Contoh lain pada implementasi float dapat dilihat di:

www.w3schools.com/cssref/pr_class_float.asp
J. CSS Position

Seperti yang kita tahu, CSS Position itu terdiri dari 4 nilai, yaitu static,
relative, absolute, dan fixed. Secara default, tag-tag yang kita buat itu sudah
memiliki nilai position:static. Berikut kita bahas lebih jauh dari keempat css
position tersebut :
1. Static

1. position: static;

a. Static adalah nilai default dari tiap-tiap elemen ketika tidak diberi properti
position
b. Menggunakan position selain static (non-static),akan membuat sebuah
elemen menjadi seolah olah berbeda dimensi dari elemen lainnya.
c. Elemen yang diberi position selain static dapat menggunakan properti top,
left, bottom dan right untuk mengatur posisinya.

2. Relative

1. position: relative;

a. Ketika kita menggerakan elemen dengan posisi relative (menggunakan

properti top, left. bottom dan right), ruang yang ditempati elemen tersebut
masih ada
b. Ketika kita menggerakan elemen dengan posisi relative, elemen akan
bergerak relatif terhadap posisi semula-nya
c. Jika kita memberi properti top: 0; dan left: 0; maka elemen tidak berubah
posisinya.
3. Absolute

1. position: absolute;

a. Ketika kita menggerakan elemen dengan posisi absolute (menggunakan

properti top, left, bottom dan right), ruang yang ditempati oleh elemen
tersebut dianggap tidak ada.
b. Ketika kita menggerakan elemen dengan posisi absolute, elemen akan
bergerak relatif terhadap posisi dan elemen parent-nya, selama elemen
parent-nya memiliki posisi yang juga non-static.
c. Jika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di
ujung kiri atas dari elemen-nya.

4. Fixed

1. position: fixed;

a. Ketika kita menggerakan elemen dengan posisi fixed (menggunakan

properti top, left, bottom dan right), ruang yang ditempati oleh elemen
tersebut dianggap tidak ada
b. Ketika kita menggerakan elemen dengan posisi absolute, elemen akan
bergerak relatif terhadap window (browser), meskipun elemen parent-nya
bernilai non-static
c. Jika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di
ujung kiri atas dari elemen parent-nya
d. Elemen akan 'terkunci' dan tidak bergerak dari posisinya meskipun halaman
di-scroll
K. CSS Background

Properties background dalam css digunakan untuk mendefinisikan efek

background dalam suatu elemen, Terdapat beberapa properties background yang
dapat digunakan dalam CSS, antara lain :
background-color properti background-color ini adalah untuk menentukan
warna background dari sebuah element. Berikut contoh penggunaanya:

1. body
2. {
3. background-color: #b0c4de;
4. }

Di dalam CSS, warna ditentukan oleh :

• HEX value – seperti “#ff0000”
• RGB value – seperti “rgb(255,0,0)”
• Nama Warna – seperti “red”

background-image properti background-image ini adalah untuk menentukan

background berupa gambar. Contoh penggunaanya :

1. body
2. {
3. background-image: url(image.jpg);
4. }

background-repeat secara default, properti background-repeat mengulang

gambar secara horizontal dan vertikal. Gambar dapat diulang dengan menggunakan
repeat-x atau repeat-y.

1. body
2. {
3. background-image: url(image.jpg);
4. background-repeat: repeat-y;
5. }

background-position kita dapat menentukan posisi background, value yang

dapat digunakan antara lain: left top, left center, left bottom, right top, right center,
right bottom, center top, center center, center bottom.
Contoh penggunaannya yaitu seperti dibawah ini :

1. body {
2. background-image: url(image.jpg);
 3. background-repeat: no-repeat;
4. background-position: center;
5. }

L. CSS Text

Font Style atau Font Styling mempunyai arti yaitu gaya tulisan atau penataan
tulisan. Menurut w3schools font CSS merupakan sebuah properti yang menentukan
gaya font untuk sebuah teks. biasanya properti yang digunakan yaitu untuk
mengatur jenis, ukuran, ketebalan, dan kemiringan suatu tulisan. Font sangat
berguna sekali, misalnya dalam sebuah website/blog yang memiliki tampilan yang
indah tetapi ukuran tulisan yang digunakan terlalu kecil atau terlalu berdekatan, itu
akan menyulitkan pembaca.
color digunakan untuk memberi warna pada tulisan. Warna dapat
dispesifikasikan dengan :
• nama warna seperti red, blue, green dan lainnya.
• kode HEX seperti #fff000, #000000, #ffffff dan lainnya.
• RGB seperti rgb(255,0,0), rgb(32,178,170) dan lainnya.
• body
• {
• color: blue;
• }
•
• h1
• {
• color: green;
• }

1. <html>
2. <head>
3. <title>Mengatur Teks Pada CSS</title>
4. <style type="text/css">
5. p {
6. color: red;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Mengubah warna text pada css</p>
12. </body>
13. </html>

text-align digunakan untuk mengatur format paragraf / teks secara horizontal.

Paragraf/teks dapat diatur rata kanan, rata kiri, tengah dan juga justify.
 1. <style>
2. .center
3. {
4. text-align: center;
5. }
6. .justify
7. {
8. text-align: justify;
9. }
10. .left
11. {
12. text-align: left;
13. }
14. .right
15. {
16. text-align: right;
17. }
18. </style>
19. <h1 class="center">center</h1>
20. <h1 class="justify">justify</h1>
21. <h1 class="left">left</h1>
22. <h1 class="right">right</h1>

Hasilnya seperti ini:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Mengatur Teks Pada CSS</title>
5. <style type="text/css">
6. .rata-kiri {
7. text-align: left;
8. }
9. .rata-kanan {
10. text-align: right;
11. }
12. .rata-tengah {
13. text-align: center;
14. }
15. .sama-rata {
16. text-align: justify;
17. }
18. </style>
 19. </head>
20. <body>
21. <strong>Rata Kiri</strong>
22. <p class="rata-
kiri">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
iusmod tempor incididunt ut labore et dolore magna aliqua.</p>
23. <strong>Rata Kanan</strong>
24. <p class="rata-
kanan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
25. <strong>Rata Tengah</strong>
26. <p class="rata-
tengah">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
27. <strong>Sama Rata</strong>
28. <p class="sama-
rata">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
iusmod tempor incididunt ut labore et dolore magna aliqua.</p>
29. </body>
30. </html>

text-indent memberi indentasi pada paragraf / teks. Satuan untuk text-indent adalah
px dan %.

1. <style>
2. p
3. {
4. text-indent: 50px;
5. }
6. </style>
7. <p>Selamat Datang di Syabaabul Fikri. Mari kursus bersama Syabaabul Fikr
i. Selamat Datang di Syabaabul Fikri. Mari kursus bersama Syabaabul Fikr
i. Selamat Datang di Syabaabul Fikri. Mari kursus bersama Syabaabul Fikr
i.
8. </p>

text-decoration mengatur dekorasi pada teks. Kita dapat memberikan dekorasi

berupa garis bawah, garis atas atau garis di tengah-tengah teks (seperti tulisan yang
dicoret).

1. <style>
2. .overline
3. {
4. text-decoration: overline;
5. }
6. .through
7. {
8. text-decoration: line-through;
 9. }
10. .underline
11. {
12. text-decoration: underline;
13. }
14. .none
15. {
16. text-decoration: none;
17. }
18. </style>
19. <h1 class="overline">overline</h1>
20. <h1 class="through">line-through</h1>
21. <h1 class="underline">underline</h1>
22. <h1 class="none">none</h1>

text-transform mengubah jenis huruf menjadi huruf besar, kecil / kapital :

uppercase digunakan untuk mengubah teks menjadi huruf besar semua.
lowercase digunakan untuk mengubah teks menjadi huruf kecil semua.
capitalize digunakan untuk mengubah huruf pertama pada teks menjadi huruf
besar.

1. <style>
2. h1.uppercase
3. {
4. text-transform: uppercase;
5. }
6. h1.lowercase
7. {
8. text-transform: lowercase;
9. }
10. h1.capitalize
11. {
12. text-transform: capitalize;
13. }
14. h1.none
15. {
16. text-transform: none;
17. }
18. </style>
19. <h1 class="uppercase">uppercase</h1>
20. <h1 class="lowercase">lowercase</h1>
21. <h1 class="capitalize">capitalize</h1>
22. <h1 class="none">none</h1>
letter-spacing berfungsi untuk mengatur spasi atau jarak antar huruf.

1. <style>
2. h1
3. {
4. letter-spacing: 2px;
5. }
6. h2
7. {
8. letter-spacing: -2px;
9. }
10. </style>
11. <h1>Spasi 2px</h1>
12. <h2>Spasi -2px</h2>

word-spacing berfungsi untuk mengatur spasi atau jarak antar kata.

1. <style>
2. .spasi1
3. {
4. word-spacing: 10px;
5. }
6. .spasi2
7. {
8. word-spacing: -5px;
9. }
10. </style>
11. <h1 class="spasi1">Ini adalah Spasi 10px</h1>
12. <h1 class="spasi2">Ini adalah Spasi -5px</h1>
M. CSS Font

Dalam CSS font ada beberapa bagian yang akan dipelajari diantaranya:
1. font-family
Font-family digunakan untuk mengatur jenis font yang akan digunakan.
Property dari font-family mengharuskan kita untuk memilih beberapa nama font
sebagai sistem fallback, yaitu Jika browser tidak mendukung font pertama, maka
akan memilih font berikutnya dan seterusnya.
Pada CSS, nilai dari font-family dikelompokkan menjadi dua bagian:

• Generic family - adalah jenis font standar yang dipersiapkan sebagai pengganti
jika font-family yang kita pilih tidak tersedia/terinstal dalam sistem komputer
kita. (seperti "Serif" atau "Monospace")
• Family name / Nama font - Family Name adalah kelompok font yang memilki
jenis serupa seperti Trebuchet MS Normal, Trebuchet MS Bold, dan Trebuchet
MS Italic (seperti "Times New Roman" atau "Arial").

Jika kita menetapkan Family Name, maka sebaiknya kita juga menambahkan
Generic Family di akhir penulisan properti font-family mengingat adanya
kemungkinan jenis font yang kita pilih tidak tersedia dalam komputer kita. Oleh
karena itu, jika font tersebut benar-benar tidak ditemukan, maka browser akan
menggunakan standar font-nya masing-masing yaitu Generic Family.
Contohnya seperti dibawah ini :

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .serif
6. {
7. font-family: "Times New Roman", Times, serif;
8. }
9. .sansserif {
10. font-family: Arial, Helvetica, sans-serif;
11. }
12. .monospace {
13. font-family: Courier New, Lucida Console, Monospace;
 14. }
15. </style>
16. </head>
17. <body>
18. <h2 class="serif">Serif</h2>
19. <h2 class="sansserif">Sans-serif</h2>
20. <h3 class="monospace">Monospace</h3>
21. </body>
22. </html>

2. font-size
Font size merupakan bagian dari CSS font yang memiliki fungsi sebagai berikut:
• Digunakan untuk mengatur ukuran font.
• Kita dapat menentukan ukuran font dengan px, % atau em.
• Font size dengan px
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h1
• {
• font-size: 40px;
• }
• h2 {
• font-size: 30px;
• }
• p
• {
• font-size: 14px;
• }
• </style>
• </head>
• <body>
• <h1>Heading 1</h1>
• <h2>Heading 2</h2>
• <p>Paragraph.</p>
• </body>
• </html>
font-size dengan em

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1
6. {
7. font-size: 2.5em; /* 40px/16=2.5em */
8. }
9. h2
10. {
11. font-size: 1.875em; /* 30px/116=1.875em */
12. }
13.
14. p
15. {
16. font-size: 0.875em; /* 14px/16=0.875em */
17. }
18. </style>
19. </head>
20. <body>
21. <h1>Heading 1</h1>
22. <h2>Heading 2</h2>
23. <p>Paragraph.</p>
24. </body>
25. </html>

3. font-weight
Font-weight merupakan bagian dari CSS Font yang memiliki fungsi sebagai
berikut:
• Digunakan untuk mengatur ketebalan font.
• Property font-weight antara lain : lighter, normal, 100 sd/900, bold dan bolder.
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• .normal
• {
• font-weight: normal;
• }
•
• .light
• {
• font-weight: lighter;
• }
•
 • .thick
• {
• font-weight: bold;
• }
•
• .thicker
• {
• font-weight: 900;
• }
• .bolder
• {
• font-weight: bolder;
• }
• </style>
• </head>
• <body>
• <h1 class="normal">Normal</h1>
• <h1 class="light">Light</h1>
• <h1 class="thick">Thick</h1>
• <h1 class="thicker">Thicker</h1>
• <h1 class="bolder">Bolder</h1>
• </body>
• </html>

4. font-variant
Digunakan untuk mengubah font menjadi small-caps.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .normal
6. {
7. font-variant: normal;
8. }
9. .small
10. {
11. font-variant: small-caps;
12. }
13. </style>
14. </head>
15. <body>
16. <h1 class="normal">Normal</h1>
17. <h1 class="small">Small-Caps</h1>
18. </body>
19. </html>
5. font-style
Digunakan untuk mengubah font menjadi bercetak miring. Kita dapat
menggunakan property normal, italic dan oblique pada font-style.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .a
6. {
7. font-style: normal;
8. }
9. .b
10. {
11. font-style: italic;
12. }
13. .c
14. {
15. font-style: oblique;
16. }
17. </style>
18. </head>
19. <body>
20. <h1 class="a">Normal.</h1>
21. <h1 class="b">Italic.</h1>
22. <h1 class="c">Oblique.</h1>
23. </body>
24. </html>

line-height digunakan untuk mengatur spasi antar baris. Property yang dapat
kita gunakan pada line-height antara lain normal, px, em.
6. CSS Shorthand
Dari bermacam CSS font di atas, kita dapat menggabungkannya seperti di
bawah ini:

Berikut peraturan dalam penulisannya

N. CSS Selector

Sebelumnya sudah dibahas tentang css selector pada materi css dan style html
dasar, tapi pada materi ini kita akan coba bahas lebih mendalam lagi. Pada css
terdapat selector yang digunakan untuk memilih elemen HTML yang akan dikenai
style, pemilihan elemen menggunakan nama tag, nilai atribut, atau pola tertentu.
Jenis selector antara lain; nama tag, id, class, atribut, complex selector.

1. Selector dengan nama tag

Semisal kita ingin mewarnai body maka langsung saja ketikan selector
body, begitupun dengan h1 , p atau yang lainnya.
Koma pada selector berfungsi untuk memilih elemen lebih dari satu,

1. h1,h2,h3,p
2. {
3. font-family : "arial", sans-sarif;
4. color:#666;
5. }

Jika dilihat pada potongan kode diatas selecteor h1, h2, h3, p berarti elemen
tersebut di set dengan style yang sama.
Spasi pada selector

1. <style>
2. body
3. {
4. background-color : #fff2cc;
5. }
6. p span
7. {
8. background-color: #7CFC00;
9. padding: 4px 3px;
10. }
11. </style>
12. <body>
13. <h1>Ini elemen judul</h1>
14. <p>Ini elemen paragraf dengan <span>highlight</span> pada kata terte
ntu.</p>
15. </body>
 Jika kita lihat pada kode diatas jika kita menambahkan spasi pada selektor
maka style span akan terpengaruh jika elemen tersebut ada didalam tag <p>.
2. Selector dengan id dan class
Selector class digunakan untuk menentukan style juga sama seperti id.
Bedanya adalah jika id hanya boleh dipanggil satu kali saja, class bisa dipanggil
berkali kali pada satu halaman. Selector ini ditulis dengan awalan titik atau dot “.”
pada css dan class=“nama-class” pada HTML. Sedangkan selector id hanya boleh
dipanggil satu kali, selain itu untuk Selector ini ditulis dengan awalan pagar “#”
pada css dan id=“nama-id” pada HTML.
Berikut contoh implementasi selector id dan class:

1. <style>
2. #higlight {background-color:yellow}
3. .red{color:red}
4. </style>
5. <body>
6. <h1>Penggunaan Selector Class dan Id</h1>
7.
8. <p class="red">Ini selector class</p>
9. <p id="higlight">Ini selector id</p>
10. </body>

Selector Spesifik

1. <style>
2. body{
3. background-color: #fff2c;
4. text-align:center;
5. }
6. p{
7. font-size: 20px;
8. }
9. p.small{
10. font-size: 16px;
11. }
12. </style>
13. <body>
14. <h1 class="small">Judul ini tidak terpengaruh class small</h1>
15.
16. <p>Ini elemen paragraf dengan ukuran normal 16px.</p>
17.
18. <p class="small">Ini paragraf dengan ukuran lebih kecil </p>
19.
20. <p class="small">Ini paragraf dengan ukuran normal seperti pertama.<
/p>
21.
22. </body>
 Jika kita lihat pada kode diatas maka hanya paragraf yang memiliki class
small yang akan dikenakan style didalamnya, sedangkan yang tidak terdapat claas
small maka akan dikenakan style yang ada pada tag p{font-size: 20px;}.
Selector Multiple Class

1. <style>
2. body{
3. background-color: #fff2cc;
4. text-align:center;
5. }
6. .red{
7. fcolor: red;
8. }
9. .big {
10. font-size: 20px;
11. }
12. </style>
13. <body>
14. <h1 class="red">Judul ini tidak terpengaruh class small</h1>
15.
16. <p>paragraf ini berwarna default hitam dan teks berukuran normal.</p
>
17.
18. <p class="big">paragraf ini berwarna default hitam dan teks berukura
n normal. </p>
19.
20. <p class="red big">paragraf ini berwarna merah dan berukuran teks 20
px.</p>
21.
22. </body>

Jika kita lihat pada potongan kode diatas terdapat penggunaan class red big
secara bersamaan maka secara otomatis style kedua class tersebut akan dikenakan,
dimana teks didalam tag <p> akan berwarna merah dan memiliki font berukuran
20px.

3. Selector dengan atribut

1. <style>
2. body
3. {
4. background-color: #fff2cc;
5. }
6. input
7. {
8. width: 100%;
9. padding: 10px;
10. }
11. input[type=password]{
12. border: 2px solid red;
13. }
14. </style>
15. <body>
16. <form action="#">
 17. Nama : <br>
18. <input type="text">
19.
20. Password: <br>
21. <input type="password">
22. </form>
23. </body>

Jika kita lihat pada kode diatas, maka input type password akan dikenakan
style pada input[type=password]{border: 2px solid red;}.
4. Selector Pseudoclass
Pseudoclass selector adalah selector CSS yang diikuti oleh titik dua. kita
mungkin sudah sangat familiar dengan beebrapa perintahnya seperti hover:

1. a:hover
2. {
3. /* hover adalah sebuah pseudo class */
4. }

1. <style>
2. body
3. {
4. background-color: #fff2cc;
5. text-align :center;
6. }
7. button
8. {
9. background-color: lightsteelblue;
10. border: 1px solid steelblue;
11. font-size: 20px;
12. padding: 20px 40px;
13. }
14. button:hover
15. {
16. background-color: steelblue;
17. color: white;
18. }
19. </style>
20. <body>
21. <button>Hover Kita</button>
22. </body>

O. Membuat Layout Dasar

Buat folder baru dengan nama latihan-layout dan buat file baru dengan nama
index.html di dalamnya. Tulislah kode HTML berikut pada file index.html:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>My Webpage</title>
 5. <style type="text/css">
6. .header {
7. background-color: #eee;
8. min-height: 50px;
9. }
10. .content {
11. background-color: #ddd;
12. min-height: 500px;
13. }
14. .footer {
15. background-color: #ccc;
16. min-height: 50px;
17. }
18. </style>
19. </head>
20. <body>
21. <div class="header">
22. <h1>Logo Produk</h1>
23. </div>
24.
25. <div class="content">
26. <h2>Our Products</h2>
27. </div>
28.
29. <div class="footer">
30. <p>copyright 2018 My Page</p>
31. </div>
32. </body>
33. </html>

Pada kode di atas, kita membuat 3 buah elemen utama di bawah <body>,
yakni <div> dengan masing-masing class header, content dan footer. Pada <div>
dengan class header, kita akan isi dengan logo dan menu halaman. Pada <div>
dengan class content, kita isi dengan konten dari web kita nanti, yakni daftar artikel.
Dan terakhir pada <div> dengan class footer, kita isi dengan teks copyright.
Bila kita buka halaman html tersebut di browser, maka akan muncul seperti
ini:
 Setiap elemen <div> di atas menjadi baris layout. Karena <div> bersifat
block, maka lebar dari elemennya akan menghabiskan ruang parentnya ke samping.
Bila kita ingin membuat layout boxed, yakni layout halaman dengan jarak pinggir
di kiri dan di kanan, maka kita dapat menyimpan semua <div> tersebut di dalam
satu <div> utama sebagai parentnya.
Ubah kode HTML yang dicetak tebal pada bagian body sehingga menjadi
seperti ini:

1. <body>
2. <div class="container">
3. <div class="header">
4. <h1>Logo Produk</h1>
5. </div>
6.
7. <div class="content">
8. <h2>Our Products</h2>
9. </div>
10.
11. <div class="footer">
12. <p>copyright 2018 My Page</p>
13. </div>
14. </div>
15. </body>

Kemudian pada tag <style> di bagian header, tambahkan CSS berikut untuk
memberi style pada elemen <div> yang berclass container:

1. <style type="text/css">
2. .container {
3. width: 800px;
4. margin: 0 auto;
5. }
6. .header {
7. background-color: #eee;
8. min-height: 50px;
9. }
10. </style>

container berfungsi membungkus konten web. Class ini sama fungsinya

seperti tag <table> dalam pembuatan tabel. Ada dua jenis kelas .container: (1) Kelas
.container yang ukuran lebarnya tetap (fixed) dan (2) kelas .container-fluid yang
ukuran lebarnya mengikuti lebar browser.
Dengan menyimpan ketiga elemen <div> baris di dalam <div> utama, maka
lebar dari setiap <div> anaknya akan mengikuti lebar elemen induknya.
 Perbaharui kode HTML di dalam <div class=”header”></div> menjadi
seperti ini:

1. <div class="header">
2. <h1>Logo Produk</h1>
3. <div class="logo">
4. <img src="https://i.ibb.co/bHbDMsG/logo-2.png">
5. </div>
6. <div class="menu">
7. <ul>
8. <li><a href="#">Home</a></li>
9. <li><a href="#">About</a></li>
10. <li><a href="#">Contact</a></li>
11. </ul>
12. </div>
13. </div>

Bila kita lihat hasilnya di browser, maka gambar dan list menu akan tampil
seperti ini:
 Tambahkan kode CSS berikut pada tag <style> agar tampilannya menjadi
rapi.

1. .header {
2. background-color: #eee;
3. min-height: 50px;
4. text-align: center;
5. }
6. .logo img {
7. width: 200px;
8. }
9. .menu ul {
10. padding: 0;
11. }
12. .menu ul li {
13. display: inline-block;
14. }
15. .menu ul li a {
16. padding: 10px 20px;
17. text-decoration: none;
18. }

Pada CSS di atas, kita menambahkan 3 selector baru, yakni selector untuk
elemen image pada .logo agar ukurannya tidak terlalu besar. Selain itu kita ubah
mode display dari elemen <li> yang defaultnya block menjadi inline-block agar
ditampilkan menyamping. Kita juga menambahkan padding pada setiap link menu
dan membersihkannya dari garis bawah. Tampilan akhirnya akan menjadi seperti
ini:
P. Membuat Daftar Produk

Sekarang kita akan mengisi bagian konten halaman. Bagian konten akan kita
isi dengan daftar produk. Edit kode bagian content menjadi seperti ini:

1. <div class="content">
2. <h2>My Articles</h2>
3. <h2>My Products</h2>
4.
5. <div class="thumbnail">
6. <img src="http://via.placeholder.com/250x150">
7. <h2>Product 2</h2>
8. <p>Rp 250.000</p>
9. </div>
10. </div>

Kemudian pada bagian <style> tambahkan CSS berikut:

1. .thumbnail {
2. background-color: white;
3. text-align: center;
4. padding: 10px;
5. }

Dan hasilnya dapat kita jalankan pada browser kita:

Kita ingin agar dalam satu baris, terdapat 3 buah produk yang ditampilkan.
Sedangkan pada hasil kode yang sudah kita miliki, kita hanya memiliki satu buah
produk yang memenuhi semua lebar baris. Oleh karena itu, kita harus mengatur
width dari elemen .thumbnail agar dalam satu baris dapat masuk 3 buah produk.
Tambahkan baris kode CSS berikut pada bagian selector .thumbnail:

1. .thumbnail {
2. background-color: white;
3. text-align: center;
4. padding: 10px;
5. width: 225px;
6. margin: 10px;
7. }

Kita set widthnya menjadi 225px dengan asumsi dari total lebar parentnya
yang 800px dapat diisi dengan tiga buah kotak thumbnail berukuran 225px. Selain
itu kita juga menambahkan margin pada thumbnail agar jarak satu sama lain tidak
berhimpitan. Hasil akhir dari pembaharuan kode di atas akan menjadi seperti ini:

Tambahkan CSS berikut pada selector .thumbnail:

1. .thumbnail {
2. background-color: white;
3. text-align: center;
4. padding: 10px;
5. width: 225px;
6. margin: 10px;
7. float: left;
8. }
9. .thumbnail img {
 10. width: 100%;
11. }

Pada .thumbnail, kita tambahkan property float:left sehingga ruang sisa dari
setiap barisnya akan kosong dan diisi oleh elemen di bawahnya. Selain itu kita juga
menambahkan selector baru yakni untuk elemen image yang ada di dalam
.thumbnail agar ukuran widthnya mengikuti ukuran dari parentnya.
Hasil akhir dari pembaharuan kode kita akan tampil seperti ini:

Tambahkan CSS overflow:auto pada parent dari .thumbnail, yakni pada

elemen .content:

1. .content {
2. background-color: #ddd;
3. min-height: 500px;
4. overflow: auto;
5. }

Kemudian silahkan cek hasilnya pada browser !

Terakhir kita tinggal merapikan konten untuk footer, dengan menambahkan

padding dan rata tengah. Tambahkan CSS berikut pada bagian selector .footer:

1. .footer {
2. background-color: #ccc;
 3. min-height: 50px;
4. padding: 20px;
5. text-align: center;
6. }

Maka, hasilnya akan tampil seperti pada gambar dibawah ini:

Q. Membuat Menu Dropdown

Misalkan kita ingin bila menu About di header disorot pointer mouse, dia
akan menampilkan submenu, dan bila pointer dijauhkan, submenunya
disembunyikan kembali. Untuk membuat fitur tersebut, kita membutuhkan property
position untuk mengatur tata letak submenunya, dan juga property display untuk
menampilkan dan menyembunyikan submenu.
Tambahkan elemen html berikut di bagian .menu di header:

1. <div class="menu">
2. <ul>
 3. <li><a href="#">Home</a></li>
4. <li><a href="#">About</a></li>
5. <li><a href="#">About</a>
6. <ul class="submenu">
7. <li><a href="#">CV</a></li>
8. <li><a href="#">Education</a></li>
9. <li><a href="#">Portfolio</a></li>
10. </ul>
11. </li>
12. <li><a href="#">Contact</a></li>
13. </ul>
14. </div>

Kemudian tambahkan CSS selector baru di bagian style:

1. ul.submenu {
2. background-color: #eee;
3. border: 1px solid #ccc;
4. text-align: left;
5. }

Kita menambahkan elemen <ul> baru di dalam list menu About. Kemudian
kita juga menambahkan style agar submenu tersebut tampil dengan latar warna dan
border. Hasilnya akan nampak seperti ini:
 Masih belum sesuai dengan yang kita harapkan karena seharusnya list
submenunya tampil ke bawah, bukan ke samping. Hal ini terjadi karena pada bagian
sebelumnya kita memberi style pada elemen <li> agar ditampilkan menyamping
dengan property display:inline-block, sehingga submenu yang juga menggunakan
tag <li> akan terkena dampaknya. Untuk itu kita tambahkan style untuk list yang
khusus ada di dalam .submenu agar ditampilkan dengan display:block lagi:

1. ul.submenu li {
2. display: block;
3. }
4. ul.submenu li a {
5. display: block;
6. padding: 5px 10px;
7. }

Dengan demikian tampilan list submenunya sekarang ditampilkan ke bawah.

Namun posisinya masih tumpang tindih dengan menu utama. Kita akan gunakan
property position:absolute pada .submenu agar ia dapat diposisikan tidak mengikuti
layout bawaannya. Pada bagian selector ul.submenu yang telah kita buat
sebelumnya, tambahkan style berikut:

1. ul.submenu {
2. background-color: #eee;
3. border: 1px solid #ccc;
4. text-align: left;
5. position: absolute;
6. top: 20px;
7. left: 0;
8. }

Maka, tampilannya akan menjadi seperti dibawah ini:

 Seperti yang kita duga, posisinya akan relatif dari jendela browser, bukan dari
parentnya yaitu <li> untuk About. Hal ini terjadi karena saat ul.submenudiberi
property position:absolute, dia akan naik satu layer/lapis ke atas dari elemen lain.
Dan saat property top dan leftnya diset, dia akan memposisikan diri dari elemen
parent yang lapisannya sama, dalam kasus ini yaitu jendela browser.
Kita ingin agar dia relatif dari parent <li>. Maka elemen <li> harus kita
angkat juga satu lapis ke atas, menggunakan property position:relative. Tambahkan
property tersebut pada selector .menu ul li:

1. .menu ul li {
2. display: inline-block;
3. position: relative;
4. }

Hasilnya, .submenu kita sekarang akan diposisikan relatif dari parent <li>.

Terakhir, kita akan sembunyikan .submenu dan hanya menampilkannya bila

pointer mouse berada di atas menu About. Tambahkan CSS berikut pada style:

1. ul.submenu {
2. background-color: #eee;
3. border: 1px solid #ccc;
4. text-align: left;
5. position: absolute;
6. top: 20px;
7. left: 0;
8. display: none;
9. }
10. .menu ul li:hover ul.submenu {
11. display: block;
 12. }

Kita mengubah nilai default property display dari elemen ul.submenu menjadi
none, sehingga dia tidak akan ditampilkan di browser. Kemudian kita membuat
selector baru .menu > ul > li:hover ul.submenuyang artinya pilihul.submenu yang
ada di bawah li yang dihover oleh mouse. Kita ubah property displaynya menjadi
block. Dengan demikian, ul.submenu akan ditampilkan hanya bila parent <li>nya
dihover mouse.

R. Menambahkan Jumbotron

Kita akan menambahkan banner besar atau biasa disebut jumbotron, diantara
header dan content. Tambahkan kode HTML berikut antara elemen .header dan
.content:

1. <div class="jumbotron">
2. <h2>Welcome to My Homepage</h2>
3. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor n
ecessitatibus quae voluptate explicabo architecto fugiat asperiores illo
quibusdam qui mollitia, porro fugit. Illum sapiente modi, ut harum aliq
uam accusamus unde.</p>
4. </div>

Kemudian pada bagian style, tambahkan CSS berikut:

1. .jumbotron {
2. width: 100%;
3. padding: 80px 40px;
4. box-sizing: border-box;
5. text-align: center;
6. color: white;
7. background-color: #aaa;
8. }

Maka, hasil dari kode diatas akan tampil seperti pada gambar dibawah ini:
 Kita sekarang akan mengganti latar warnanya menggunakan gambar. Kita
bisa mengambil gambar yang gratis di internet, salahsatunya dapat Kita unduh dari
website [https://unsplash.com].Website tersebut menyediakan gambar-gambar
berkualitas bagus dan gratis.
Kita akan menggunakan gambar dari web Unsplash dengan url ini:
[https://images.unsplash.com/photo-1515111293107-b0cd6448f5f6?ixlib=rb-
0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4f56141064dbe63db663bb7a2c73b7
1&auto=format&fit=crop&w=1350&q=80]. Kita akan menggunakan langsung url
tersebut pada CSS. Kita dapat mengunduhnya terlebih dahulu dan menyimpannya
di dalam folder project, atau langsung menggunakan url tersebut. Bila Kita
langsung menggunakan url tersebut, gambar tersebut nantinya hanya akan tampil
bila terkoneksi dengan internet.
Tambahkan CSS berikut di bagian selector .jumbotron:

1. .jumbotron {
2. background-color: #aaa;
3. background-image: url(https://images.unsplash.com/photo-
1515111293107-b0cd6448f5f6?ixlib=rb-
0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4f56141064dbe63db663bb7a2c73b71&auto=
format&fit=crop&w=1350&q=80);
4. background-size: cover;
5. }

Kita menambahkan dua buat property, yakni background-image dan

background-cover. Hasil dari tambahan property tersebut akan tampil seperti ini:

Property background-size:cover akan membuat gambar latar ditampilkan

hingga tidak ada area yang tidak tertutup gambar latar.
 Namun kombinasi warna teks dan gambar latar seperti hasil di atas kurang
bagus, karena ada area gambar yang warnanya sama dengan teks, sehingga teks
tidak terbaca dengan jelas. Untuk mengakali ini ada dua strategi. Pertama kita dapat
edit dahulu gambar latarnya di aplikasi image editor dengan menambahkan layer
transparan gelap sehingga warna gambarnya menjadi lebih gelap. Solusi kedua
adalah dengan menambahkan layer transparan di HTML. Kita akan mencoba solusi
kedua.
Tambahkan elemen .overlaypada bagian jumbotron seperti ini:

1. <div class="jumbotron">
2. <div class="overlay"></div>
3. <h2>Welcome to My Homepage</h2>
4. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor n
ecessitatibus quae voluptate explicabo architecto fugiat asperiores illo
quibusdam qui mollitia, porro fugit. Illum sapiente modi, ut harum aliq
uam accusamus unde.</p>
5. </div>

Pada kode di atas kita menambahkan satu elemen <div>dengan nama class
overlay. Elemen ini tidak memiliki konten. Kita akan menggunakannya untuk
membuat semacam lapisan warna gelap yang agak transparan, dan kita posisikan di
atas .jumbotron. Tambahkan CSS berikut:

1. .jumbotron {
2. background-size: cover;
3. position: relative;
4. }
5.
6. .overlay {
7. position: absolute;
8. top: 0;
9. left: 0;
10. width: 100%;
11. height: 100%;
12. background-color: black;
13. opacity: 0.4;
14. }

Hasilnya seperti ini

 Jumbotronnya sekarang nampak lebih gelap dari sebelumnya, karena tertutup
oleh overlay. Kamu dapat mengganti nilai property opacity agar lapisan gelapnya
lebih tebal atau tipis. Nilai opacity berkisar antara 0 dan 1.
Namun jika kita perhatikan, teks di dalam jumbotron juga tertutup overlay.
Kita ingin agar teks tersebut ada di atas overlay, sehingga lebih mudah dibaca.
Tambahkan CSS berikut:

1. .jumbotron h2,
2. .jumbotron p {
3. position: relative;
4. }

Dengan CSS di atas, elemen h2 dan p di dalam jumbotron akan naik ke layer
di atas .overlay.
Terakhir, kita akan ganti font dari teks di jumbotron dengan jenis font lain
yang lebih indah. Kamu dapat membuka website [https://fonts.google.com] dan
memilih font mana yang akan digunakan. Pada tutorial ini kita akan menggunakan
font dengan nama Raleway.
Pertama salin kode <link href=”... >dan simpan di bagian atas
<head>sebelum <style> :

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>My Webpage</title>
5. <link href="https://fonts.googleapis.com/css?family=Raleway" rel="st
ylesheet">
6. <style type="text/css">

Kemudian kita dapat menambahkan kode font-family: 'Raleway', sans-serif;

pada elemen yang ingin kita ganti fontnya. Misalnya saya akan pasang font tersebut
pada .jumbotron:

1. .jumbotron {
2. font-family: 'Raleway', sans-serif;
3. width: 100%;
4. padding: 80px 40px;
5. box-sizing: border-box;
6. text-align: center;
7. color: white;
8. }

Maka tampilannya sekarang, semua konten teks di dalam jumbotron akan

menggunakan font Raleyway.
Silahkan cek hasilnya pada browser kita:

EVALUASI