Attribute

Atribut HTML
Pada sub-modul sebelumnya kita sudah mengenal apa itu elemen. Elemen dituliskan dengan
awalan tag pembuka <> dan diakhiri dengan tag penutup </>. Ada satu hal lagi yang bisa kita
tuliskan pada sebuah elemen, lebih tepatnya pada sebuah tag pembuka, yaitu Attribute. Atribut
ini berfungsi memberikan informasi tambahan pada sebuah elemen. Atribut dituliskan pada tag
pembuka sebuah elemen setelah nama dari elemennya tersebut ditulis. Contohnya:
1. <p lang="id">Kota metropolitan terbesar di Provinsi Jawa Barat,

sekaligus menjadi ibu kota provinsi tersebut.</p>
Pada contoh kode tersebut, kita menetapkan artibut bahasa (dengan penulisan lang) dengan nilai
“id” atau Indonesia (kode bahasa bisa kita explore pada link berikut:
https://www.w3schools.com/tags/ref_language_codes.asp) pada sebuah elemen paragraf.
Untuk menuliskan sebuah atribut kita memerlukan nama dari atribut itu diikuti dengan nilai
atribut tersebut dalam bentuk string (Dituliskan dalam tanda kutip dua). Untuk lebih jelasnya,
perhatikan gambar berikut:
Atribut pada elemen juga dapat dituliskan lebih dari satu. Kita bisa menuliskan kembali seluruh
struktur atribut di samping dari atribut yang sudah ada. Contohnya pada elemen paragraf di atas,
kita akan memberikan sebuah atribut translate, sehingga penulisannya menjadi seperti ini:
1. <p lang="id" translate="no">Kota metropolitan terbesar di Provinsi Jawa

Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
Dengan menambahkan atribut translate dan memberikan nilai “no” pada elemen paragraf
tersebut, maka konten dari elemen yang dimaksud tidak akan diterjemahkan oleh layanan sistem
translate otomatis seperti Google Translate.
Lantas atribut apa saja yang dapat digunakan pada elemen HTML? Pada elemen HTML terdapat
dua jenis atribut, yaitu Global Attribute dan atribut yang hanya bisa digunakan pada elemen
tertentu. Untuk atribut yang spesifik pada sebuah elemen, kita akan mengulasnya pada
pembahasan elemen tersebut. Untuk Global Attribute, berikut daftar atribut yang bisa kita
gunakan di seluruh elemen HTML.
Attribute Description
Menentukan tombol shortcut untuk mengaktifkan/memfokuskan pada sebuah
accesskey
element.
class Menentukan satu atau lebih classname untuk sebuah elemen.
Menentukan konten dari elemen merupakan konten yang dapat diubah atau
contenteditable
tidak.
Digunakan untuk menyimpan sebuah data pribadi khusus ke halaman atau
data-*
aplikasi.
dir Menentukan arah teks untuk konten pada suatu elemen.
draggable Menentukan apakah suatu elemen dapat di-drag atau tidak.
Menentukan apakah data yang di-drag adalah data yang disalin, dipindahkan,
dropzone
atau ditautkan saat dijatuhkan.
hidden Menentukan apakah suatu elemen ditampilkan atau tidak pada browser.
id Menetapkan id pada elemen.
lang Menentukan bahasa pada konten elemen.
Menentukan apakah elemen harus diperiksa ejaannya dan tata bahasanya atau
spellcheck
tidak.
style Menentukan styling secara satu baris untuk suatu elemen.
tabindex Menentukan urutan dari suatu elemen.
title Menentukan informasi tambahan tentang suatu elemen.
translate Menentukan apakah konten elemen harus diterjemahkan atau tidak.
Paragraf
Paragraf adalah elemen paling mendasar dari sebuah dokumen teks. Pada HTML, kita bisa
menunjukkan sebuah paragraf dengan menggunakan elemen <p>. Contohnya seperti ini:
1. <p>Kata Bandung berasal dari kata bendung atau bendungan karena

terbendungnya sungai Citarum
2. oleh lava
3. Gunung Tangkuban Parahu yang lalu membentuk telaga...</p>
4.
5.
6. <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat
Nga-Bandung-an Banda Indung, yang
7. merupakan kalimat sakral dan luhur karena mengandung nilai ajaran
Sunda. Nga-Bandung-an artinya
8. menyaksikan atau bersaksi...</p>
Ketika menggunakan paragraf pada browser, teks selalu ditampilkan dengan garis baru dan
terdapat sedikit jarak (space) antar elemennya. Jarak tersebut nantinya bisa kita atur ketika sudah
menerapkan styling.
Paragraf dapat terdiri dari teks, elemen gambar, dan inline element lainnya. Tetapi hindarilah
penggunaan element paragraf untuk konten seperti heading atau list, karena terdapat elemen lain
yang lebih tepat untuk digunakan.
Heading
Pada sub-modul sebelumnya, kita sudah melihat contoh penggunaan header yang diterapkan
pada konten yang kita siapkan. Kita menggunakan <h1> dan <h2> dalam mengindikasi judul dan
sub judul di dalam kontennya. Pada HTML terdapat <h1> hingga <h6> elemen heading yang
dapat kita gunakan.
Ketika kita menambahkan heading pada konten, Heading ini merepresentasikan garis besar
halaman pada sebuah browser. Alat bantu baca seperti screen reader membaca garis besar
halaman untuk bantu memetakan dan mengarahkan pengguna selama menjelajahi halaman.
Selain itu, heading juga merupakan elemen yang dicari oleh mesin pencarian contohnya Google
Search.
Berikut ini contoh penerapan heading empat level pada sebuah dokumen. Tiap level heading
dituliskan dengan cara yang sama.
1. <h1>Bandung</h1>
2.
3. <h2>Geografis</h2>
4. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi
wilayahnya bagaikan sebuah mangkok raksasa</p>
5.
6. <h2>Wisata</h2>
7. <p>Kota Bandung telah menjadi tujuan utama dalam menikmati liburan akhir
pekan terutama dari masyarakat yang berasal
8. dari Jakarta sekitarnya.</p>
9.
10. <h3>Farm House Lembang</h3>
11. <h4>Lokasi</h4>
12. <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek
wisata yang tidak pernah sepi pengunjung.</p>
13.
14. <h4>Kondisi</h4>
15. <p>Selain karena letaknya strategis, kawasan ini juga menghadirkan
nuansa wisata khas Eropa. Semua itu diterapkan dalam
16. bentuk
17. spot swafoto Instagramable.</p>
18.
19. <h3>Observatorium Bosscha</h3>
20. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss,
Schmidt Bimasakti, Refraktor Bamberg,
21. Cassegrain GOTO, dan Teleskop Surya.</p>
Dari penggunaan elemen heading pada konten tersebut, maka kita bisa membuat garis besar
dokumen seperti berikut:
Pada browser standarnya heading akan ditampilkan dengan tulisan tebal (bold text), dimulai dari
h1 dengan ukuran teks paling besar kemudian berurutan sesuai dengan level heading-nya.
List
Seperti yang sudah disebutkan pada pembahasan paragraf, tidak semua teks dibungkus oleh
paragraf, salah satunya list. Kita pun terbiasa membuat list dalam kehidupan sehari-hari, baik
membuat to-do list atau daftar yang struktur sekalipun.
Pada HTML terdapat tiga tipe list:
 Unordered lists : daftar yang ditampilkan tidak memiliki urutan.

 Ordered lists : daftar yang ditampilkan secara terurut.
 Description lists : daftar yang terbuat dari beberapa istilah diikuti dengan deskripsi dari
istilah tersebut.
Unordered List
Seperti namanya, unordered list merupakan daftar yang tidak mementingkan urutan. Standarnya,
unordered list menampilkan bullet pada tiap item list-nya (tetapi kita bisa mengubahnya dengan
styling).
Untuk menetapkan konten sebagai unordered list kita gunakan <ul></ul> kemudian di dalam
elemen tersebut kita gunakan tags <li></li> untuk menetapkan item pada list tersebut. Contoh
penerapannya sebagai berikut:
1. <ul>
2. <li>Item 1</li>
3. <li>Item 2</li>
4. <li>Item 3</li>
5. <li>Item 4</li>
6. </ul>
Ketika kita membukanya pada browser, maka akan nampak seperti ini:
Di antara tag elemen <li>, kita dapat mengisikan konten apapun termasuk elemen HTML lain.
Contohnya kita dapat memasukan sebuah heading atau paragraf pada item.
1. <ul>
2. <li><h1>Sebuah Heading sebagai item list</h1></li>
3. <li><h2>Sebuah Heading level 2 sebagai item list</h2></li>
4. <li><p>Sebuah paragraf sebagai item list</p></li>
5. </ul>
Seperti yang kita sudah ketahui, maka list item akan menampilkan seperti format header.
Kita juga bisa menyimpan kembali elemen <ul> untuk membuat sebuah nested list.
1. <ul>
2. <li>List item 1</li>
4. <li>List item 3
5. <ul>
6. <li>List item 3.1</li>
9. </ul>
10. </li>
12. </ul>
Ordered List
Ordered list digunakan untuk membuat list yang mementingkan urutan. Contohnya, membuat
daftar instruksi langkah demi langkah sehingga dibutuhkan urutan yang sesuai. Ordered list
bekerja seperti unordered list, namun perbedaanya pada tiap item menampilkan angka bukan
sebuah bullet. Angka yang ditampilkan, otomatis berurut tiap itemnya, sehingga kita tidak perlu
menuliskan secara kasar urutan nomornya. Hal ini tentu mempermudah kita untuk mengorganisir
tiap itemnya.
Untuk menetapkan konten sebagai ordered list kita gunakan <ol></ol>. Sama seperti Unordered
list, tiap item dalam list ditetapkan dengan menggunakan tags <li></li>.
1. <ol>
2. <li>Langkah pertama</li>
3. <li>Langkah kedua</li>
4. <li>Langkah ketiga</li>
5. <li>Langkah selanjutnya</li>
6. </ol>
Ketika kita membukanya pada browser, maka akan nampak seperti ini:
Sama seperti pada unordered list, di antara tag elemen <li> kita dapat mengisikan konten apapun
termasuk elemen HTML lain.
Pada ordered list, tipe urutan angkanya dapat kita atur melalui sebuah atribut type. Contohnya,
selain nomor urutan angka dapat menggunakan alfabet ataupun angka romawi.
1. <ol type="I">
6. </ol>
7.
8. <ol type="A">
13. </ol>
Berikut nilai - nilai yang dapat digunakan pada atribut type pada elemen <ol>:
Nilai Deskripsi
1 Menggunakan angka dalam urutan item (default)
a Menggunakan huruf kecil dalam urutan item
A Menggunakan huruf besar dalam urutan item
i Menggunakan huruf romawi kecil dalam urutan item
I Menggunakan huruf romawi besar dalam urutan item
Selain tipe angka pada urutan, kita juga bisa menetapkan nilai awal pada sebuah ordered list
dengan menggunakan atribut start. Contohnya, jika kita ingin memulai sebuah list dari angka 7,
maka kita tetapkan atribut start dengan nilai 7 pada elemen <ol>.
1. <ol start="7">
2. <li>Langkah ketujuh</li>
3. <li>Langkah kedelapan</li>
4. <li>Langkah kesembilan</li>
6. </ol>
Maka hasilnya list akan dimulai dengan nilai urutan ke-7.
Normalnya urutan list diawali dengan urutan paling rendah dengan menambahkan atribut
reversed pada elemen <ol>, urutan dalam sebuah list akan dibalik. Atribut ini berbeda dengan
atribut yang lain (yang sudah dibahas sebelumnya), atribut ini tidak memerlukan sebuah nilai
ketika menggunakannya. Atribut ini hanya menandakan sebuah list untuk membalikan urutan
angka pada tiap itemnya.
Menambahkan List pada Halaman Profil
Setelah mempelajari penerapan list pada HTML, sekarang kita coba terapkan elemen list yang
berperan sebagai navigasi pada halaman profil yang sebelumnya sudah kita buat.
“Pada langkah ini dan selanjutnya, Sebaiknya gunakanlah teks editor yang disarankan pada
materi text editor agar proses penulisan dan pengelolaan berkas HTML dapat lebih cepat”.
Silakan buka kembali berkas index.html pada teks editor. Tambahkan elemen unordered list di
bawah dari elemen paragraf pertama pada berkas HTML sebagai berikut.
1. …………..
2. <body>
3. <h1>Bandung</h1>
4. <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi
ibu kota provinsi tersebut.</p>
5. <ul>
6. <li>Sejarah</li>
7. <li>Geografis</li>
8. <li>Wisata</li>
9. </ul>
10. <h2>Sejarah</h2>
11. ……...
Sehingga pada browser akan menampilkan list seperti ini.
Gambar
Tanpa gambar sebuah website tentu tidak akan menarik, bukan? Ada beberapa alasan mengapa
website perlu gambar. Contohnya kita perlu menampilkan logo perusahaan, ilustrasi, diagram,
dan sebagainya.
Pada HTML untuk menampilkan sebuah gambar kita bisa menggunakan tag <img>. Berbeda
dengan elemen lain, elemen <img> tidak menuliskan konten di antara tag pembuka dan tag
penutup. Tetapi untuk menetapkan gambar yang ditampilkan kita gunakan sebuah atribut.
Contohnya seperti ini:
1. <img src="https://i.imgur.com/EUUXQcf.png" alt="dicoding">
Maka gambar akan ditampilkan pada browser seperti ini:
Pada contoh kode di atas, perlu kita perhatikan bahwa element <img> merupakan sebuah elemen
kosong (tidak memiliki konten sehingga tidak ada closing tag).
Selain itu, yang perlu kita perhatikan adalah atribut yang ada pada elemen tersebut, terdapat dua
elemen yang harus kita gunakan ketika menerapkan elemen <img>.
Yang pertama, atribut src. Atribut ini berfungsi sebagai sumber dari gambar yang ditampilkan.
Atribut ini dapat bernilai url gambar atau path gambar lokal dari gambar yang digunakan.
Selanjutnya adalah atribut alt. Atribut ini sebenarnya tidak wajib untuk diterapkan, hanya saja
atribut ini akan sangat berguna ketika gambar tidak berhasil ditampilkan. Nilai atribut ini
merupakan gambaran dari gambar yang ditampilkan dalam bentuk tulisan. Sehingga ketika
gambar gagal ditampilkan maka akan memunculkan teks alternatif yang dapat mewakili arti dari
gambar tersebut.
Selanjutnya terdapat atribut lain yang bisa Anda gunakan pada elemen ini, contohnya title. Title
berfungsi sebagai informasi tambahan untuk sebuah gambar. Informasi tersebut akan muncul
ketika kita mengarahkan sebuah cursor pada gambar yang ditampilkan.
Jenis format gambar
Berikut adalah jenis format gambar yang umum digunakan pada pembuatan website.
Nama Ekstensi Format File Keterangan

Graphics Dapat digunakan untuk gambar animasi.
Interchange .gif Ukuran file biasanya kecil.
Format Kualitas gambar terbatas.
Joint Kualitas text pada gambar dapat menjadi buruk.
Photographic Ukuran file lumayan kecil.
.jpg, .jpeg, .jfif, .pjpeg, .pjp
Expert Group Pada website biasanya digunakan untuk gambar
image yang tidak banyak text.
Text lebih bisa terbaca dibandingkan jenis Jpeg.
Portable Network
.png Ukuran file dapat menjadi besar sehingga
Graphics
mengurangi kecepatan memuat situs.
Dibandingkan dengan gambar berkualitas sama
pada jpeg atau png, ukuran file pada webp dapat
WebP .webp menjadi lebih kecil.
Namun tidak semua web browser dapat membaca
webp.
Kualitas gambar terjaga dan ukuran file kecil.
Namun tidak cocok untuk gambar yang terlalu
Scalable Vector
.svg kompleks seperti foto.
Graphics
Pada website biasanya digunakan untuk logo atau
icon.
Mengatur ukuran pada gambar

Untuk mengatur ukuran gambar yang ditampilkan juga tentunya menggunakan sebuah atribut.
Untuk menentukan lebar gambar kita gunakan atribut width, dan untuk menentukan tinggi tentu
gunakan atribut height.
Ketika menggunakan atribut ini disarankan hanya gunakan salah satunya. Terkecuali kita
menentukan nilai lebar dan tingginya sesuai dengan rasio dari ukuran gambar aslinya.
Contohnya, jika kita tetap memaksa untuk menentukan ukuran panjang dan lebar sebuah gambar
tanpa menyesuaikan rasionya, maka gambar yang ditampilkan tidak akan proporsional.
1. <img src="https://i.imgur.com/EUUXQcf.png" alt="dicoding" width="500px"

height="200px"> 
Dengan menetapkan hanya satu atribut ukurannya, maka ukuran lainnya akan mengikuti sesuai
dengan rasio gambar aslinya. Contohnya, kita bisa menetapkan ukuran gambar berdasarkan nilai
lebarnya saja.
1. 

2. <img src="https://i.imgur.com/EUUXQcf.png" alt="dicoding" width="500px">
Atau kita bisa tetapkan ukuran gambar berdasarkan tingginya. Dengan begitu nilai lebar akan
menyesuaikan nilainya berdasarkan rasio gambar aslinya.
1. 

2. <img src="https://i.imgur.com/EUUXQcf.png" alt="dicoding"
height="100px">
Gambar tentu lebih perlu waktu untuk tampil di browser, sehingga tentukanlah ukuran sesuai
kebutuhan.
Menambahkan Gambar pada Halaman Profil
Setelah mempelajari penerapan list pada HTML, sekarang kita coba terapkan elemen gambar
konten yang terdapat di halaman profil yang sebelumnya sudah kita buat.
Sebelum menerapkannya, silakan unduh resource gambar yang digunakan pada latihan melalui
tautan berikut: assets.zip
Pindahkan berkas yang sudah diunduh pada folder yang sama dengan berkas index.html.
Kemudian lakukan ekstraksi pada berkas assets.zip tersebut dengan melakukan Klik Kanan ->
Extract Here.
Jika berhasil, akan terbentuk folder dengan nama assets. Sampai langkah ini, berkas assets.zip
sudah tidak digunakan. Kita bisa menghapusnya.
Pastikan di dalam folder assets -> image terdapat empat berkas gambar yang akan kita gunakan
pada latihan.
Silakan buka kembali berkas index.html pada teks editor. Tambahkan elemen gambar di bawah
elemen heading sesuai kontennya masing-masing.
1. <body>
2. ……
3.
4. <h2>Sejarah</h2>
5. <img src="assets/image/history.jpg" alt="sejarah">
6.
7. …….
8.
10. <img src="assets/image/geografis.jpg" alt="geografis">
11.
12. …….
13.
14. <h2>Wisata</h2>
15.
16. …….
17.
18.
20. <img src="assets/image/farm-house.jpg" alt="farm house">
21.
22.
23. …….
24.
25.
27. <img src="assets/image/bosscha.jpg" alt="bosscha">
28.
29.
30. …….
31. </body>
Perhatikan penulisan nilai dari atribut src. Penulisan sedikit berbeda dengan yang telah kita
pelajari. Penulisan alamat gambar tidak dimulai dengan https://www, karena kita menggunakan
gambar lokal yang ada pada project kita. Sehingga untuk penulisan path-nya mengarah ke lokasi
dari berkas gambar tersebut.
Setelah menambahkan elemen gambar, maka halaman akan nampak seperti ini pada browser.
Teks Terformat
Sejauh ini, kita sudah mengenal paragraf, heading dan juga list pada HTML. Tapi masih ada
beberapa lagi yang merupakan spesial teks format yang dapat kita gunakan yaitu <blockquote>,
<pre>, dan <figure>.
Long quotations
Jika pada konten kita memiliki sebuah kutipan ataupun sebuah testimonial, kita dapat gunakan
format long quotations dengan menggunakan tags <blockquote>. Konten di dalam elemen
<blockquote> ini dapat berupa sebuah paragraf, heading, ataupun list.
1. <blockquote>
2. <p>Situs web (bahasa Inggris: website) adalah sekumpulan halaman web
yang saling berhubungan yang umumnya berada pada peladen yang sama
berisikan kumpulan informasi yang disediakan secara perorangan,
kelompok, atau organisasi.</p>
3. </blockquote>
Berikut tampilan standar ketika sebuah konten berada di dalam <blockquote>.
Pada elemen ini kita dapat menggunakan atribut cite untuk menentukan sumber URL dari sebuah
kutipan (Jika kutipan tersebut bersumber dari sebuah situs website).
1. <blockquote cite="https://id.wikipedia.org/wiki/Situs_web">
2. <p>Situs web (bahasa Inggris: website) adalah sekumpulan halaman web
yang saling berhubungan yang umumnya berada pada peladen yang sama
berisikan kumpulan informasi yang disediakan secara perorangan,
kelompok, atau organisasi.</p>
3. </blockquote>
Preformatted text
Pada sub-modul sebelumnya, kita sudah mengetahui bahwa HTML akan mengabaikan penulisan
spasi yang dituliskan secara berulang dan juga line breaks (baris baru). Tetapi pada beberapa tipe
konten seperti contoh kode atau puisi hal tersebut sangat berarti. Dengan begitu, terdapat sebuah
elemen yang dapat kita gunakan untuk menampilkan konten sesuai yang kita tulis pada text
editor. Untuk menggunakannya, kita gunakan elemen <pre> sebagai pembungkus kontennya.
Perhatikan contoh berikut:
1. <pre>
2. SAJAK PUTIH
3.
4. Bersandar pada tari warna pelangi
5. Kau depanku bertudung sutra senja
6. Di hitam matamu kembang mawar dan melati
7. Harum rambutmu mengalun bergelut senda
8.
9. Sepi menyanyi, malam dalam mendoa tiba
10. Meriak muka air kolam jiwa
11. Dan dalam dadaku memerdu lagu
12. Menarik menari seluruh aku
13.
14. Hidup dari hidupku, pintu terbuka
15. Selama matamu bagiku menengadah
16. Selama kau darah mengalir dari luka
17. Antara kita Mati datang tidak membelah...
18.
19. Karya : Chairil Anwar
20. </pre>
Sehingga pada browser akan menampilkan hasil yang sama seperti yang kita tuliskan.
Figure
Elemen ini digunakan untuk merepresentasikan konten tersendiri (self-contained content) seperti
ilustrasi, diagram, foto atau bisa juga sebuah baris kode. Banyak hal yang dapat digunakan dalam
elemen ini.
Elemen ini digunakan untuk mengkelompokkan blok konten yang dapat dipindahkan posisinya
dari blok utama sebuah dokumen tanpa mempengaruhi arti dari induk dokumen.
Di dalam elemen figure kita dapat menuliskan elemen <figcaption> sebagai sebuah caption
(judul) untuk konten tersebut. Berikut contoh penggunaan figure pada sebuah konten gambar.
1. <p>Dicoding adalah sebuah perusahaan startup yang bertujuan

mengembangkan ekosistem developer di Indonesia.
2. Berdiri sejak 5 Januari 2015, Dicoding memiliki platform
pembelajaran elektronik di laman Dicoding.com.</p>
3. <figure>
4.
<img src="https://i.imgur.com/cs2BJzw.jpg" alt="dicoding" width="200px">
5. <figcaption>Dicoding</figcaption>
6. </figure>
7. <p>Materi perdana yang menjadi magnet dari awal berdirinya Dicoding
hingga kini adalah kelas Menjadi Android Developer
8. Expert. Kelas ini dikembangkan oleh Google Developer Expert in
Android, Sidiq Permana dan Head of Dicoding Academy,
9. Ahmad Imaduddin. Seperti halnya kelas Picodiploma lain, modul
online-nya juga hadir dalam bentuk buku berjudul sama
10. yang telah mendapatkan ijin dan ISBN.</p>
Contoh lainnya, figure ini dapat kita gunakan untuk markup sebuah konten puisi.
1. <figure>
2. <pre>
3. SAJAK PUTIH
4.
5. Bersandar pada tari warna pelangi
6. Kau depanku bertudung sutra senja
7. Di hitam matamu kembang mawar dan melati
8. Harum rambutmu mengalun bergelut senda
9.
10. Sepi menyanyi, malam dalam mendoa tiba
11. Meriak muka air kolam jiwa
12. Dan dalam dadaku memerdu lagu
13. Menarik menari seluruh aku
14.
15. Hidup dari hidupku, pintu terbuka
16. Selama matamu bagiku menengadah
17. Selama kau darah mengalir dari luka
18. Antara kita Mati datang tidak membelah...
19. </pre>
20. <figcaption>Sajak Putih oleh Charil Anwar</figcaption>
21. </figure>
Inline Formatting Text
Kita sudah belajar mengidentifikasi penggunaan elemen pada konten yang major (besar) dengan
menerapkan semantic HTML untuk mengorganisasikan kontennya. Sekarang kita akan mengenal
beberapa formatting text yang digunakan dalam sebuah baris teks (inline text).
Sebelum menjelaskan elemen inline untuk formatting text yang dapat digunakan, sepertinya kita
perlu membahas sekilas mengenai block dan inline.
Standarnya elemen HTML memiliki dua sifat yaitu block dan inline. Elemen yang memiliki sifat
block selalu membuat baris baru ketika menampilkannya, contohnya seperti elemen paragraf,
list, heading, dan lainnya. Berlawanan dengan elemen yang memiliki sifat inline, elemen ini
tidak menambahkan baris baru ketika dibuat. Apa saja elemen tersebut? Mari kita bahas satu
persatu.
Anchor
Apa itu anchor? Anchor (jangkar) merupakan elemen yang digunakan untuk membuat sebuah
hyperlink ke halaman atau website lain, file, alamat email, atau URL lainnya. Untuk
menggunakan elemen ini kita gunakan tag <a>...</a> bersama dengan atribut href untuk
menetapkan sebuah target yang akan dituju.
1. <p>Hubungi kami di</p>

2. <ul>
3. <li><a href="https://example.com">Website</a></li>
4. <li><a href="mailto:info@example.com">Email</a></li>
5. <li><a href="tel:+62123456">Telepon</a></li>
6. <li><a href="#address">Alamat</a></li>
7. </ul>
Selain atribut href, terdapat beberapa atribut khusus yang dapat digunakan pada elemen ini,
antara lain:
Atribut Nilai Deskripsi

Menginstruksikan browser untuk mengunduh pada
download filename
URL yang ditetapkan daripada mengarahkannya.
Menetapkan target yang akan diarahkan/unduh
href URL
ketika pengguna menekan hyperlink.
hreflang language_code Menetapkan bahasa dari dokumen target.
Menetapkan URL yang akan diberitahu dengan
mengirimkan post request ping pada body oleh
ping list_of_URLs browser (berjalan di belakang layar) ketika target
URL pada hyperlink ditekan. Biasanya atribut ini
digunakan untuk pelacakan.
referrerpolicy no-referrer, Menetapkan referensi untuk dikirim pada target.
no-referrer-when-
downgrade,
origin,
origin-when-cross-origin,
unsafe-url
alternate,
author,
bookmark,
external,
help,
license,
next,
Menetapkan hubungan antara halaman yang
rel
nofollow, ditampilkan dengan target.
noreferrer,
noopener,
prev,
search,
tag
_blank,
_parent, Menetapkan lokasi ketika membuka target

target contohnya pada sebuah tab, window atau pada tab
_self, itu sendiri.
_top
media media_type Menetapkan tipe media yang digunakan pada target.
Emphasized text
Gunakan elemen <em> untuk menunjukan bagian kata yang perlu kita tekankan. Elemen ini
menunjukan stress emphasis atau konten/kata yang perlu mendapatkan penekanan atau perhatian
khusus. Berikut contoh penggunaannya.
1. <p><em>Oding</em> adalah seorang pelajar</p>

2. <p>Dia adalah seorang <em>pelajar</em></p>
Pada kalimat pertama, penekanan terdapat pada “siapa” seorang pelajar. Sedangkan pada kalimat
kedua, penekanan terdapat pada “apa” yang sedang ditekuni oleh Oding.
Standarnya pada browser sebuah kata yang ditekankan akan ditampilkan dalam gaya miring pada
teks nya.
Important text
Gunakan elemen <strong> untuk menunjukan sebuah teks yang begitu penting (strong
importance), serius, ataupun mendesak. Dalam arti teks tersebut harus dapat perhatian lebih dari
teks biasa lainnya.
1. <p>Kesehatan merupakan hal yang penting, jaga pola makan yang teratur
dan <strong>jangan sampai makan tengah
2. malam!</strong></p>
Standarnya pada browser sebuah teks yang diberi markup <strong> akan ditampilkan secara
tebal. Dan ketika pengguna menggunakan pembaca layar (screen reader), suara yang terdengar
akan berbeda. Ini mengartikan bahwa teks tersebut penting tidak hanya sekedar tebal.
Short quotations
Gunakan elemen <q> untuk menandai sebuah kutipan dalam sebuah teks. Elemen short quations
berbeda dengan <blockquote>. Elemen ini digunakan untuk kutipan pendek yang terletak di
dalam baris (inline).
1. <p>Sebelum pulang kerja, ia berkata kepadaku: <q>Maaf saya tidak bisa

hadir dalam pertemuan nanti</q></p>
Standarnya pada browser sebuah teks yang diberi markup <q> akan ditampilkan di dalam tanda
kutip (Quotation marks).
Citation
Selain sebuah atribut, <cite> juga merupakan sebuah elemen yang digunakan untuk sebuah
rujukan pada sebuah dokumen, contohnya sebuah buku, majalah, artikel dan lainnya.
1. <p>Informasi selengkapnya bisa Anda dapatkan di <cite><a

href="https://dicoding.com">dicoding.com</a></cite>.</p>
Standarnya pada browser sebuah teks yang diberi markup <cite> akan ditampilkan dengan garis
miring (italic).
Defining terms
Elemen <dfn> digunakan ketika mendefinisikan sebuah istilah (term). Elemen ini harus terletak
pada elemen lain yang menaunginya. Contohnya pada sebuah elemen <p> atau elemen
<section>. Berikut contoh penggunaannya:
1. <p><dfn>Website</dfn> merupakan halaman yang menampilkan informasi

melalui teks atau gambar. Website dapat diakses melalui internet dengan
menggunakan browser.</p>
Standar pada browser yakni sebuah teks yang diberi markup <dfn> akan ditampilkan dengan
garis miring (italic).
Subscript dan Superscript
Subscript <sub> dan superscript <sup> merupakan elemen yang dapat membuat teks yang
ditampilkan nampak kecil, dengan posisi di bawah (sub) atau di atas (sup) dari teks biasanya.
Elemen ini digunakan untuk menunjukan sebuah rumus kimia ataupun matematika.
1. <p>Sukrosa merupakan suatu disakarida yang dibentuk dari monomer-

monomernya yang berupa unit glukosa dan fruktosa,dengan rumus molekul
C<sub>12</sub>H<sub>22</sub>O<sub>11</sub>.</p>
2.
3. <p>Salah satu persamaan paling umum dalam semua fisika adalah
E=MC<sup>2</sup></p>
Jika kita lihat pada browser, tampilan akan tampak seperti ini:
Highlighted text
Untuk menandai atau menyorot sebuah teks kita bisa menggunakan elemen <mark>. Elemen ini
digunakan ketika terdapat sebuah teks yang memiliki peran penting, biasanya teks tersebut
merupakan bagian yang paling relevan atau penting dalam sebuah konteks kalimat.
1. <p>Ini adalah periode perang saudara. Pesawat ruang angkasa pemberontak,

menyerang dari pangkalan tersembunyi, telah
2. memenangkan kemenangan pertama mereka melawan Kekaisaran Galactic
yang jahat. Selama pertempuran,
3. <mark>mata-mata
4. Pemberontak berhasil mencuri rencana rahasia
5. </mark>
6. ke senjata pamungkas Kekaisaran, STAR DEATH, stasiun ruang angkasa
7. berlapis baja dengan kekuatan yang cukup untuk menghancurkan seluruh
planet.
8. </p>
Standarnya pada browser teks yang diberi markup <mark> akan ditampilkan dengan background
kuning dan teks hitam.
Line Break
Terkadang kita mungkin perlu menambahkan sebuah baris baru pada sebuah baris teks (termasuk
di dalam paragraf), tetapi kita mengetahui bahwa browser akan mengabaikan sebuah penulisan
spasi ganda ataupun garis baru, sehingga kita memerlukan sebuah tanda yang dapat digunakan
untuk memberitahu browser untuk “Tambahkan garis baru di sini!”.
Inline line break element atau <br> dapat digunakan untuk memberitahu browser untuk
memberikan sebuah garis baru pada baris teks. Sama seperti gambar, elemen ini merupakan
elemen kosong sehingga kita tidak membutuhkan sebuah tag penutup.
1. <p>
2. Dicoding Space,<br>
3. Jln. Batik Kumeli No. 50.<br>
4. Bandung.<br>
5. 40123
6. </p>
Jika kita lihat pada browser, maka tampilan akan tampak seperti ini:
Menerapkan Anchor pada Navigasi Halaman Profil
Sebelumnya, pada halaman profil yang kita buat, sudah ada sebuah list sebagai navigasi. Namun
demikian, karena belum ada elemen anchor, maka navigasi tersebut belum dapat kita gunakan.
Oleh karena itu, mari kita tambahkan elemen anchor pada tiap item list-nya.
Silakan buka kembali berkas index.html pada text editor. Tambahkan elemen anchor di setiap
item list.
1. <ul>
2. <li><a href="#">Sejarah</a></li>
3. <li><a href="#">Geografis</a></li>
4. <li><a href="#">Wisata</a></li>
5. </ul>
Setelah menambahkan elemen anchor pada item list, maka tampilan item list akan nampak
menjadi hyperlink.
Namun ketika salah satu item dipilih, tidak akan terjadi apa apa, karena pada atribut href kita
belum menetapkan sebuah target. Nilai href dapat berupa sebuah URL untuk mengarahkan ke
sebuah halaman yang berbeda. Selain itu juga berupa tanda pagar (#) diikuti dengan id elemen
untuk mengarahkan tampilan pada elemen sesuai id yang ditentukan (masih dalam satu
halaman).
Maka dari itu, mari kita berikan atribut id pada sebuah elemen yang akan menjadi target
navigasi. Berikan atribut id pada seluruh elemen <h2> dengan id sesuai dengan kontennya.
1. <body>
2. .......
3. <ul>
4. <li><a href="#">Sejarah</a></li>
5. <li><a href="#">Geografis</a></li>
6. <li><a href="#">Wisata</a></li>
7. </ul>
8. <h2 id="sejarah">Sejarah</h2>
9. .......
10.
11. <h2 id="geografis">Geografis</h2>
12. .......
13.
14. <h2 id="wisata">Wisata</h2>
15. .......
16. </body>
Kemudian tuliskan juga id elemen target setelah tanda pagar (#) pada tiap elemen anchor yang
terdapat pada item list.
1. <body>
2. .......
3. <ul>
4. <li><a href="#sejarah">Sejarah</a></li>
5. <li><a href="#geografis">Geografis</a></li>
6. <li><a href="#wisata">Wisata</a></li>
7. </ul>
8. <h2 id="sejarah">Sejarah</h2>
9. .......
10.
11. <h2 id="geografis">Geografis</h2>
12. .......
13.
14. <h2 id="wisata">Wisata</h2>
15. .......
16. </body>
Setelah menuliskan id elemen pada target anchor, maka hypertext di navigasi sudah dapat
digunakan.
Semantic HTML - Mengorganisasikan Halaman Konten
Seperti yang sudah disebutkan pada sub-modul sebelumnya, sebuah website memiliki hierarki
konten yang sama seperti dokumen sehari-hari yang kita baca, misalnya seperti majalah, dan
koran. Sehingga, hierarki pada sebuah website merupakan hal yang penting. Namun, tentu saja
elemen yang terdapat pada HTML perlu kita kelompokkan menjadi beberapa bagian.
Sebelum HTML5, kita mengelompokan suatu elemen HTML yang memiliki konten serupa
dalam sebuah generic element <div> (kita akan membahas div secara dalam nanti). Kita
mengelompokkan sebuah header website dengan menggunakan <div>, membuat sebuah
navigation dengan menggunakan <div> juga, artikel atau section yang lainnya. Kita biasa
gunakan atribut class atau id untuk mengindikasikan peran dari elemen tersebut. Hal ini
membuat struktur pada website hilang (semantic meaningless).
Pada HTML5 kita dikenalkan pada beberapa elemen yang dapat digunakan dalam
mengelompokkan sebuah elemen dengan lebih jelas dan memiliki arti (semantic HTML).
Elemen-elemen ini memiliki nama sesuai dengan fungsi atau peran dari elemen tersebut.
Kedua contoh gambar di atas menunjukkan struktur halaman yang sama. Di mana, pada contoh
yang pertama banyak elemen <div> yang dapat diubah dengan layout elemen HTML5.
Header dan Footer
Elemen ini dapat kita gunakan untuk:
 Sebuah header dan footer utama yang muncul pada awal dan akhir di sebuah halaman
<body>.
 Header digunakan sebagai pengantar atau pembuka konten dalam sebuah elemen
<article> atau <section>.
 Footer digunakan sebagai catatan kaki pada sebuah elemen <article> atau <section>.
Pada contoh dibawah ini elemen <header> digunakan untuk menampilkan nama situs dan
navigasi utama.
1. <body>
2. <header>
3. <h1>Bandung</h1>
4. <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus
menjadi ibu kota provinsi tersebut.</p>
5. <nav>
6. <ul>
10. </ul>
11. </nav>
12. </header>
13. </body>
Dan elemen <footer> digunakan sebagai informasi hak cipta.
1. <body>
2. <header>
3. <h1>Bandung</h1>
4.
<p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi
ibu kota provinsi tersebut.</p>
5. <nav>
6. <ul>
10. </ul>
11. </nav>
12. </header>
13. <footer>
14. © 2019, Dicoding Academy
15. </footer>
16. </body>
Selain itu, elemen <header> dan <footer> dapat digunakan pada sebuah elemen <article> atau
<section>. Header biasanya menampung judul dan penulis, footer dapat menampung sebuah link
untuk membagikan artikel pada sebuah sosial media.
1. <article>
2. <header>
3. <h1>Judul Artikel</h1>
4. <h2>Oleh: Dicoding Indonesia</h2>
5. </header>
6. <p>....... Konten artikel dimulai dari sini ......</p>
7. <footer>
8. <p>Bagikan artikel ini melalui</p>
9. <ul>
10. <li>Twitter</li>
11. <li>Facebook</li>
12. <li>......</li>
13. </ul>
14. </footer>
15. </article>
Perlu kita ketahui bahwa elemen <header> dan <footer> tidak boleh ditulis di dalam elemen
<header> dan <footer> lainnya (bertumpuk/nested).
Main
Element <main> digunakan untuk menampung/mewadahi konten utama (dominan) dalam

<body>. Konten main dapat terdiri dari banyak section, ataupun artikel, atau konten apapun di
dalam elemen main, selama termasuk konten utama yang dimiliki oleh website.
1. <body>
2. <header>
3. 
4. </header>
5. <main>
6. <section>
7. <article>
8. <p>Sebuah article</p>
9. </article>
10. </section>
11. <article>
12. <p>Sebuah article lain</p>
13. </article>
14. </main>
15. <footer>
16. 
17. </footer>
18. </body>
Catatan:  merupakan tag komentar pada HTML, teks yang terdapat di antara tag tersebut,
tidak akan ditampilkan pada website. Fungsinya untuk memberikan komentar saja/catatan.
Karena elemen <main> merupakan berisi dari inti konten pada website, jangan gunakan elemen
main lebih dari satu pada berkas HTML.
Nav
Elemen <nav> digunakan untuk menampung sebuah navigasi yang sifatnya penting (major),
contohnya navigasi utama pada sebuah website.
Tapi tidak menjamin pada sebuah website hanya ada satu navigasi. Contohnya, sebuah akhir
artikel pada blog terdapat tautan navigasi menuju artikel yang dianggap relevan dengan artikel
yang telah kita baca. Navigasi tersebut tidak dianggap sebagai navigasi yang penting, sehingga
kita tidak perlu menggunakan elemen <nav> untuk menampilkannya.
Pada pembahasan header dan footer, kita sudah melihat contoh penggunaan dari elemen <nav>
yang diletakkan pada elemen <header>.
1. <nav>
2. <ul>
6. </ul>
7. </nav>
Sebuah navigation pada dasarnya sangat berguna untuk aksesibilitas website kita. Contohnya
ketika pengguna website kita menggunakan screen reader dalam mengunjungi website,
pengguna akan mudah mencari bagian yang dia inginkan tanpa harus menelusuri seluruh konten
website.
Articles
Elemen <article> bertindak sebagai container untuk independen konten pada sebuah halaman,
artinya konten utuh yang tidak terkait dengan konten lain. Bisa saja konten yang dimasud berupa
artikel blog, komentar, forum post, dan konten lainnya.
Jika sebuah halaman terdapat beberapa artikel, maka tiap artikel tersebut seharusnya berada pada
elemen article-nya masing-masing.
1. <article>
2. <h2>Sejarah</h2>
3. <img src="img/history.jpg">
4. <p>Kata Bandung berasal dari kata bendung atau bendungan karena
terbendungnya sungai Citarum oleh lava
5. Gunung Tangkuban Parahu yang lalu membentuk telaga...</p>
6. </article>
7. <article>
9. <img src="img/geografis.jpg">
10. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk
morfologi wilayahnya bagaikan sebuah mangkok
11. raksasa,[9] secara geografis kota ini terletak di tengah-tengah
provinsi Jawa Barat..</p>
12. </article>
13. <article>
14. <h2>Wisata</h2>
15. <img src="img/farm-house.jpg">
16. <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi
tujuan utama dalam menikmati liburan
17. akhir pekan terutama dari masyarakat yang berasal dari Jakarta
sekitarnya...</p>
18. </article>
Elemen <article> dapat berada pada elemen <article> lainnya (nested) selama artikel tersebut
berkaitan dengan induk elemen <article> yang menampungnya.
Aside
Elemen <aside> memiliki dua tujuan, tergantung kita menempatkannya di dalam sebuah elemen
<article> atau tidak.
Ketika elemen ini ditempatkan di dalam elemen <article>, pada elemen ini dapat berisikan
informasi yang berhubungan dengan artikel tersebut, tetapi bukan bagian dari konten artikelnya
itu sendiri (dipisahkan dari konten utama).
Ketika elemen ini ditempatkan di luar dari elemen <article>, pada elemen ini dapat berisikan
informasi yang berhubungan pada keseluruhan halaman.
Elemen <aside> biasanya terletak di samping dari sebuah elemen yang menampungnya.
1. <main>
2. <article>
3. ......
4. </article>
5. <aside>
6. <article>
7. <header>
8. <h2>Kota Bandung</h2>
9. <p>Kota Kembang Paris van Java</p>
10. <figure>
11. <img src="img/bandung-badge.png">
12. <figcaption>Lambang</figcaption>
13. </figure>
14. </header>
15. </article>
16. </aside>
17. </main>
Section
Sebuah elemen yang memiliki kesamaan konten dan memiliki sebuah heading di dalamnya dapat
dikelompokkan dengan menggunakan elemen <section>. Dengan begitu elemen ini dapat
digunakan pada sebuah elemen <article> yang memiliki konten panjang dan berpotensi untuk
dikelompokkan.
Di dalam sebuah <section> sebaiknya terdapat elemen heading (h1 - h6), yang menjadi elemen
pertama yang dituliskan pada sebuah section untuk menunjukkan judul atau tema dari bagian
konten yang dikelompokkan.
1. <article>
2. <section>
3. <h2 >Wisata</h2>
4. <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah
menjadi tujuan utama dalam menikmati liburan
5. akhir
6. pekan terutama dari masyarakat yang berasal dari Jakarta
sekitarnya. Selain menjadi kota wisata belanja,
7. kota Bandung juga dikenal dengan sejumlah besar bangunan lama
berarsitektur peninggalan Belanda.</p>
8. </section>
9. <section>
11. <img src="img/farm-house.jpg">
12. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk
morfologi wilayahnya bagaikan sebuah mangkok
13. raksasa,[9] secara geografis kota ini terletak di tengah-
tengah provinsi Jawa Barat, serta berada pada
14. ketinggian ±768 m di atas permukaan laut, dengan titik
tertinggi di berada di sebelah utara dengan
15. ketinggian 1.050 meter di atas permukaan laut dan sebelah
selatan merupakan kawasan rendah dengan
16. ketinggian 675 meter di atas permukaan laut.</p>
17. </section>
18. <section>
20. <img src="img/bosscha.jpg">
21. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda
Zeiss, Schmidt Bimasakti, Refraktor Bamberg,
22. Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss
adalah jenis teleskop terbesar untuk
23. meneropong bintang. Benda ini diletakkan pada atap kubah
sehingga saat teropong digunakan, atap tersebut
24. harus dibuka. Observatorium Bosscha boleh dikunjungi oleh
siapa pun, tanpa tiket. Namun, bagi yang ingin
25. menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk
instansi atau lembaga pendidikan, diberikan
26. jadwal hari Selasa sampai Jumat. Sementara itu, kunjungan
individu dibuka setiap hari Sabtu.
27. </p>
28. </section>
29. </article>
Generic Element
Setelah mengenal beberapa elemen yang ada, bagaimana jika tidak terdapat elemen sesuai yang
mampu menggambarkan konten kita? Dalam dunia nyata, jenis informasi sangat beragam dan
mungkin tidak semua semantik elemen yang kalian ketahui dapat menggambarkan jenis
informasinya. Untungnya, HTML menyediakan dua tipe elemen umum (generic element) yang
bisa kita kustomisasi untuk menggambarkan konten kita dengan tepat.
Terdapat dua generic elemen yang dapat kita manfaatkan.
Div
Yang pertama elemen <div>, elemen ini merupakan sebuah wadah (container) yang bersifat
umum untuk menampung beberapa konten. Elemen ini tidak akan memberikan efek apapun pada
konten atau layout sebelum menerapkan sebuah style menggunakan CSS.
Sebagai sebuah wadah yang murni, elemen <div> tidak merepresentasikan apapun. Elemen ini
lebih sering digunakan untuk mengelompokkan sebuah konten sehingga dapat memudahkan
styling dengan menggunakan atribut class atau id.
1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>Div Element</title>
6. <style>
7. .shadowbox {
8. width: 15em;
9. border: 1px solid #333;
10. box-shadow: 8px 8px 5px #444;
11. padding: 8px 12px;
12. background-image: linear-gradient(180deg, #fff, #ddd 40%,
#ccc);
13. }
14. </style>
15. </head>
16.
17. <body>
18. <div class="shadowbox">
19. <p>Paragraf ini berada di dalam elemen div, namun akan
ditampilkan sama seperti paragraf biasanya. Elemen ini lebih sering
digunakan untuk mengelompokkan sebuah konten sehingga dapat memudahkan
styling dengan menggunakan atribut class atau id.
20. </p>
21. </div>
22. </body>
23.
24. </html>
Nah, jika kita menerapkan styling seperti di atas, maka akan terlihat efek dari penggunaan div
ini.
Span
Yang kedua elemen <span>, elemen ini memberikan manfaat yang sama seperti <div>, bedanya
elemen ini digunakan sebagai phrase elements dan tidak terdapat line breaks ketika
menggunakannya. Sederhananya, <span> merupakan sebuah <div> yang digunakan dalam
sebuah baris teks yang dapat diwadahi oleh paragraf, list, heading atau lainnya.
Mari kita ambil contoh. Tidak ada elemen pada inline element yang memiliki arti untuk
menampung sebuah informasi telepon. Maka dari itu, tiap item pada nomor telepon bisa
ditampung dalam elemen <span> dan diklasifikasikan (menggunakan atribut class) dengan nilai
“phone”.
1. <ul>
2. <li>Agil: <span class="phone">08123xxx</span></li>
3. <li>Widy: <span class="phone">08222xxx</span></li>
4. <li>Gilang: <span class="phone">08333xxx</span></li>
5. </ul>
Dengan menggunakan elemen <span>, kita dapat menentukan sebuah styling pada teks tersebut.
1. <style>
2. .phone {
3. font-weight: bold;
4. }
5. </style>
6.
7. <ul>
8. <li>Agil: <span class="phone">08123xxx</span></li>
9. <li>Widy: <span class="phone">08222xxx</span></li>
10. <li>Gilang: <span class="phone">08333xxx</span></li>
11. </ul>
Jika kita coba lihat pada browser, akan tampak seperti ini:
Contoh lainnya, kita juga bisa gunakan elemen <span> dalam sebuah paragraf.
1. <style>
2. .bahan {
3. color: red;
4. }
5. </style>
6.
7. <p>Untuk membuat sebuah bakso kita
membutuhkan <span class="bahan">daging sapi</span>, <span
8. class="bahan">tepung tapioka</span>, <span class="bahan">bawang
merah</span> dan <span class="bahan">bawang
9. putih</span> kemudian satu sendok makan <span class="bahan">gula</span>
dan <span class="bahan">garam.</span></p>
Jika kita coba lihat pada browser, akan tampak seperti ini:
Table
Ada beberapa jenis informasi yang perlu ditampilkan dalam bentuk tabel, contohnya klasmen
olahraga atau sebuah jadwal layaknya kalender. Ketika kita membuat sebuah tabel, pastinya kita
akan banyak bermain dengan baris dan kolom. Pada materi ini kita akan belajar bagaimana cara
membuat dan mengorganisir sebuah tabel pada HTML.
Tapi sebelum itu, apa sih sebenarnya tabel dalam HTML itu? Elemen <table> pada HTML
merepresentasikan data tabular atau informasi yang disajikan dalam sebuah tabel. Tabel sendiri
disajikan dalam dua dimensi yang terdiri dari baris dan kolom (cell) yang berisikan sebuah data.
Berikut contoh data sepakbola yang disajikan dalam bentuk tabel.
Struktur Dasar Sebuah Tabel
Tabel pada HTML disusun dari tiga buah elemen, yaitu <table>, <tr> ,dan <td> atau <th>.
Elemen <table> digunakan untuk menandakan dimulai dan diakhirinya sebuah konten tabel dan
juga sebagai wadah untuk tabel itu sendiri. Kemudian, elemen <tr> digunakan untuk membuat
sebuah baris baru yang di dalamnya terdapat elemen <td> atau <th> sehingga menghasilkan
sebuah cell.
Elemen <td> yang berarti “table data” selain membuat cell elemen ini juga merupakan tempat
di mana data pada tabel ditampung. Selanjutnya untuk elemen <th> atau “table header”
digunakan untuk menentukan sebuah header pada kolom datanya. Untuk lebih jelasnya
perhatikan ilustrasi berikut:
Cukup mudah, kan? Sekarang mari kita ubah menjadi penerapan elemen HTML.
Berdasarkan ilustrasi di atas, kita dapat menuliskan sebuah struktur dasar tabel pada HTML
seperti berikut:
1. <h1>Pemenang Piala Dunia tiga tahun terakhir</h1>

2.
3. <table>
4. <tr>
5. <th>Tahun</th>
6. <th>Juara 1</th>
7. <th>Juara 2</th>
8. <th>Juara 3</th>
9. </tr>
10. <tr>
11. <td>2018</td>
12. <td>Prancis</td>
13. <td>Kroasia</td>
14. <td>Belgium</td>
15. </tr>
16. <tr>
17. <td>2014</td>
18. <td>Jerman</td>
19. <td>Argentina</td>
20. <td>Belanda</td>
21. </tr>
22. <tr>
23. <td>2010</td>
24. <td>Spanyol</td>
25. <td>Belanda</td>
26. <td>Jerman</td>
27. </tr>
28. </table>
Perlu kita ingat, bahwa seluruh konten atau data dituliskan pada elemen <td> ataupun
<th>. Kita bisa memberikan konten apa saja di dalamnya seperti teks, gambar, atau tabel
lainnya. Spanning Cell
Terkadang kita membutuhkan sebuah sel yang mencakup untuk dua kolom ataupun dua baris
sekaligus. Dalam aplikasi seperti Microsoft Word, hal ini biasa kita kenal sebagai merging cell
atau menggabungkan sebuah sel. Ini memang menjadi sebuah fitur dasar dalam membuat sebuah
tabel. Sehingga, pada HTML pun kita dapat melakukan hal tersebut.
Pada HTML hal ini lebih dikenal sebagai Spanning cell yang artinya menjangkau atau
merentangkan sebuah ukuran sel lebih dari ukuran yang biasanya. Dengan spanning cell kita
dapat membuat sebuah tabel yang lebih kompleks, tetapi akan membuat markup yang kita tulis
menjadi sedikit sulit dibaca.
Column Spans
Untuk merentangkan sebuah kolom (column spanning) kita bisa menggunakan atribut colspan
pada elemen <td> atau <th>. Berikut contoh untuk penggunaan colspan sehingga sebuah header
mencangkup dua kolom.
1. <table>
2. <tr>
3. <th>18:00</th>
4. <th>19:00</th>
5. <th>20:00</th>
6. </tr>
7. <tr>
8. <td colspan="2">Avenger Infinity Wars</td>
9. <td>It Chapter 2</td>
10. </tr>
11. <tr>
12. <td>One Piece: Stampede</td>
13. <td>Weathering With You</td>
14. <td>Gundala</td>
15. </tr>
16. <tr>
19. </tr>
20. </table>
Maka sebuah elemen yang menggunakan atribut colspan akan mencakup ruang kolom sesuai
nilai dari atribut itu sendiri.
Untuk lebih jelasnya, kita bisa tambahkan atribut border pada elemen <table> agar terdapat garis
pada tepi selnya.
1. <table border="1">
2. <tr>
3. <th>18:00</th>
4. <th>19:00</th>
5. <th>20:00</th>
6. </tr>
7. <tr>
9. <td>It Chapter 2</td>
10. </tr>
11. <tr>
13. <td>Weathering With You</td>
15. </tr>
16. <tr>
19. </tr>
20. </table>
Tampilan pada browser:

Row Spans
Untuk merentangkan sebuah baris (row spanning) kita dapat menggunakan atribut rowspan.
Sama seperti column spanning, tetapi atribut ini akan merentangkan sebuah sel ke bawah.
Berikut contohnya.
1. <table border="1">
2. <tr>
3. <th rowspan="3">18:00</th>
4. <td>Avenger Infinity Wars</td>
5. </tr>
6. <tr>
8. </tr>
9. <tr>
11. </tr>
12. </table>
Perhatikan elemen <th> yang diberi nilai atribut rowspan. Elemen tersebut berada pada baris
pertama dan akan memakan tiga baris ke bawahnya. Jadi pada baris tersebut kita membutuhkan
dua buah elemen (<th> dan <td>) dan pada baris selanjutnya (baris dua dan tiga) kita hanya perlu
satu buah elemen <td> saja. Sehingga jika dilihat pada browser akan nampak seperti ini:
Elemen dan Atribut pada Tabel
Sejauh ini, Anda sudah mengetahui penerapan dasar untuk sebuah tabel pada HTML.
Sebenarnya masih terdapat beberapa anggota elemen dan atributnya yang dapat digunakan pada
tabel. Karena elemen ini jarang digunakan sehingga kita akan mengenal secara ringkas dan
merangkumnya dalam sebuah tabel berikut:
Elemen dan Atribut Description
table Menetapkan elemen tabel.
td Menetapkan sebuah sel dalam baris tabel.
colspan=”number” Jumlah kolom yang dicakup oleh sel.
rowspan=”number” Jumlah baris yang dicakup oleh sel.
headers=”nama header” Mengasosiasikan data sel dengan header.
Menetapkan header yang terkait dengan baris atau
th
kolom.
colspan=”number” Jumlah kolom dicakup oleh header.
rowspan=”number” Jumlah row yang dicakup oleh header.
headers=”nama header” Mengasosiasikan header dengan header lain.
Mengasosiasikan header dengan baris, kelompok
scope=”row|col|rowgroup|colgroup”
baris, kolom atau kelompok kolom.
tr Menetapkan sebuah baris pada tabel.
caption Memberikan judul pada sebuah tabel.
col Menetapkan sebuah kolom.
colgroup Menetapkan sebuah kelompok kolom.
tbody Mengidentifikasi sebuah body dalam tabel.
tfoot Mengidentifikasi sebuah footer dalam tabel.
thead Mengidentifikasi sebuah header dalam tabel.
Special Character
Terdapat beberapa karakter spesial seperti copyright symbol © yang tidak termasuk ke dalam
standar kelompok ASCII characters, di mana ASCII characters hanya menyediakan karakter
seperti huruf, nomor, dan beberapa simbol dasar. Karakter lain seperti lebih dari (>) atau kurang
dari (<) walaupun tersedia dalam ASCII character, karakter tersebut tidak dapat digunakan
secara langsung sebagai konten pada HTML. Hal tersebut dikarenakan karakter tersebut akan
terbaca sebagai sebuah tag.
Untuk menampilkan karakter seperti yang disebutkan tadi, HTML memerlukan sebuah
“escaped” karakter. Escaping artinya adalah tidak menuliskan karakter itu sendiri, melainkan
menggantinya dengan nilai numeric atau character reference pada karakternya.
Terdapat dua cara untuk melakukannya, yakni dengan menetapkan nilai numerik (numeric entity)
atau menggunakan nama singkatan yang sudah ditetapkan untuk masing-masing karakternya
(named entity). Semua referensi karakter dimulai dengan “&” dan diakhiri dengan “;”.
Contohnya untuk menggunakan simbol copyright, kita dapat menggunakan “&copy”
1. <p>Belajar Dasar Pemrograman Web © 2019, Dicoding Academy</p>
atau “&#169”.
1. <p>Belajar Dasar Pemrograman Web © 2019, Dicoding Academy</p>
Alhasil, tampilannya sama.
Berikut daftar karakter spesial dengan karakter referensinya.
Karakter Deskripsi Named Entity Numeric Entity

non-breaking space
& Ampersand & &
’ Apostrophe ' '
< Kurang dari (less-than) < <
> Lebih dari (greater-than) > >
© Hak cipta (copyright) © ©
® Merek dagang terdaftar (registered trademark) ® ®
™ Merek dagang (trademark) ™ ™
£ Pound £ £
¥ Yen ¥ ¥
€ Euro € €
– En-dash – –
— Em-dash — —
‘ Kutip tunggal kiri ‘ ‘
’ Kutip tunggal kanan ’ ’
“ Kutip ganda kiri “ ”
” Kutip ganda kanan ” ”
• Bullet • •
... Horizontal ellipsis … …
Keuntungan Menggunakan CSS
Dengan menerapkan CSS, tampilan website kita akan lebih menarik. Berikut beberapa
keuntungan yang didapatkan ketika kita menerapkan CSS.
 Dapat mengontrol dan menerapkan layout secara presisi. Dengan menggunakan CSS kita bisa
membuat sebuah website seperti dokumen cetak dengan desain yang menarik dan presisi.
 Menghindari pekerjaan yang berulang-ulang dalam menerapkan styling. Kita dapat menetapkan
styling pada beberapa berkas HTML hanya dengan menggunakan satu berkas CSS.
 Didukung banyak browser. Seluruh browser saat ini minimal sudah mendukung CSS versi 2.
Untuk browser yang populer seperti Chrome dan Firefox sudah mendukung CSS versi 3.
Sudah jelas, bukan? Tiada alasan kita tidak menerapkan CSS. Terkecuali dukungan pada browser
yang terkadang berbeda setiap vendornya (contohnya vendor prefixes), tapi hal tersebut tidak
menjadi masalah ketika kita tahu di mana letak perbedaan dan cara penerapannya.
Bagaimana Style Sheet Bekerja?
Sebuah style sheet bekerja melalui tahapan berikut:
1. Dimulai dari sebuah dokumen yang telah ditandai dengan tag elemen HTML.
2. Menuliskan aturan styling untuk menentukan bagaimana elemen HTML akan ditampilkan.
3. Melampirkan aturan styling yang sudah dibuat pada dokumen HTML. Ketika browser
memuat dokumen, tampilan elemen yang ditampilkan akan menyesuaikan dengan aturan
styling yang sudah ditetapkan.
Mari, kita bahas satu persatu tahapannya.
Menuliskan Aturan Styling
Sebuah style sheet dibuat terdiri dari satu atau lebih aturan styling (biasa disebut dengan rules
atau rule-sets) yang mendeskripsikan bagaimana sebuah elemen atau sebuah kelompok elemen
ditampilkan dalam jendela browser.
Langkah awal belajar CSS adalah dengan memahami sebuah bagian rule. Berikut ini dua contoh
rules yang dituliskan dalam sebuah CSS. Rule yang pertama menetapkan sebuah warna hijau
pada elemen <h1> dan rule yang kedua menetapkan ukuran font dan tipe font pada sebuah
elemen paragraf.
1. h1 { color: green; }
2.
3. p {
4. font-size: small;
5. font-family: sans-serif;
6. }
Dalam penggunaan CSS, terdapat dua bagian dalam sebuah rule. Yang pertama adalah identitas
elemen atau elemen yang akan menerapkan rule (singkatnya kita akan sebut selector) dan yang
kedua adalah deklarasi atau instruksi yang akan diterapkan pada sebuah selector.
Selector
Pada contoh di atas, h1 dan p digunakan sebagai selector. Selector ini dipanggil melalui tipe
elemennya, dan ini merupakan teknik dasar dari pemanggilan selector. Properti dan nilainya
yang terdapat pada declaration/declaration block akan diterapkan pada seluruh elemen <h1>
dan <p> yang ada pada dokumen HTML. Pada sub-modul selanjutnya kita akan mengetahui
berbagai cara lainnya untuk menetapkan selector dengan lebih canggih lagi.
Declarations
Bagian deklarasi terdiri dari pasangan properti dengan nilainya. Kita bisa menetapkan lebih dari
satu deklarasi pada satu rule, contohnya seperti pada selector p di atas. Kita menetapkan lebih
dari satu deklarasi pada declaration block. Setiap deklarasinya harus diakhiri dengan semicolon
(;) sebagai tanda diakhirinya sebuah deklarasi.
Karena CSS tidak memperhatikan spasi (sama seperti bahasa pemrograman pada umumnya),
sebaiknya penulisan deklarasi selalu diawali dengan garis baru supaya mudah dibaca dan
dipahami.
1. p {
4. /* deklarasikan nilai properti lainnya pada garis baru */
5. }
Tapi ingat, walaupun CSS tidak memperhatikan spasi, untuk satuan nilai seperti px, em dan
lainnya harus dituliskan tanpa spasi pada nilainya. Contohnya:
1. h1 {
2. margin: 2em;
3. }
Jika kita menambahkan spasi di antara satuan dan nilai, maka deklarasi tersebut tidak akan
berfungsi.
1. h1 {
2. margin: 2 em; /* Deklarasi tidak akan berfungsi karena terdapat spasi
antara nilai dan satuan */
3. }
CSS Comments
CSS comments digunakan untuk menjelaskan kode, dan dapat membantu ketika Anda mengedit
kode sumber di lain waktu. Apa yang tertulis akan diabaikan oleh browser dan tidak ditampilkan
di browser, sehingga dapat menjadi opsi baik untuk memberi catatan atau informasi dokumentasi
pada kode.
Seperti contoh yang beberapa kali telah Anda lihat di atas, CSS comments ditempatkan pada
elemen <style> dengan cara penulisan dimulai dengan /* dan diakhiri */ seperti contoh berikut:
1. p {
4. /* memilih sans-serif sesuai hasil diskusi klien pada 2 Jan 2021*/
5. }
External Style Sheet
External Style Sheet merupakan berkas terpisah yang di dalamnya hanya terdapat sebuah rules.
Berkas ini harus berekstensi .css, dan berkas ini nantinya dihubungkan pada dokumen HTML.
Cara ini merupakan yang paling powerful dalam menerapkan styling. Karena dengan cara ini,
satu berkas styling (.css) dapat digunakan oleh banyak berkas HTML.
Untuk menyambungkan berkas .css dengan dokumen HTML, kita dapat menggunakan elemen
<link> pada <head> berkas HTML. Contohnya:
1. <head>
2. <title>Document Title</title>
3. <link rel="stylesheet" href="style.css">
4. </head>
Pada elemen <link> tersebut, kita tetapkan berkas CSS yang digunakan dengan menggunakan
atribut href dan beri nilai “stylesheet” pada atribut rel sebagai relationship (hubungan) antara
berkas style.css dengan dokumen HTML.
Pada contoh di atas kita tahu bahwa berkas css yang digunakan merupakan berkas lokal (berkas
yang berada pada komputer/server kita sendiri). Nilai atribut href juga dapat berupa berkas .css
yang tersedia melalui sebuah URL.
Contohnya, banyak pengembang menggunakan bootstraps.min.css untuk membantu penyusunan

layout website-nya. Kita bisa menggunakannya pada berkas HTML dengan langsung menuliskan
URL untuk berkas tersebut.
1. <head>
3.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstra
p/4.3.1/css/bootstrap.min.css">
4. </head>
min.css merupakan penamaan format berkas .css yang sudah di-minify atau sudah diminimalkan
dengan menghilangkan white space yang tidak digunakan
Embedded Style Sheet
Embedded Style Sheet merupakan kumpulan rules yang dituliskan dalam berkas HTML dengan
menggunakan elemen <style>. Dengan begitu rules yang dituliskan hanya dapat dicakup oleh
satu berkas HTML. Penulisan rules harus dituliskan dalam elemen <style> dan ditempatkan di
dalam <head> dari berkas HTML.
1. <head>
3. <style>
4. /*
5. * Rules styling dituliskan di sini
6. */
7. </style>
8. </head>
Inline Style
Inline Style merupakan styling yang diterapkan pada elemen HTML dengan menggunakan
atribut style. Contohnya seperti berikut:
1. <h1 style="color: green">Kota Bandung</h1>
Untuk menambahkan styling properties lainnya (multiple properties), kita tuliskan dengan
menggunakan semicolon (;) sebagai pemisah antar styling properties-nya.
1. <h1 style="color: green; margin-top: 2em">Kota Bandung</h1>
Inline styles hanya diterapkan pada elemen di mana atribut style diterapkan. Teknik ini
seharusnya dihindari terkecuali benar-benar diperlukan untuk menggantikan sebuah styling yang
ditetapkan pada Embedded Style Sheet atau External Style Sheet.
Commenting in Style
Pada contoh kode di atas, kita sudah melihat sebuah teks pada rule yang dimulai dari /* dan
diakhiri dengan */. Teks tersebut merupakan commenting line di dalam sebuah CSS. Sama
seperti commenting pada HTML dan bahasa pemrograman lainnya, Teks yang dijadikan sebuah
komentar tidak akan diproses oleh browser (sebagai compiler) atau lebih tepatnya “diabaikan”.
Berikut adalah contoh memberikan komentar pada CSS:
1. /* ini merupakan komentar satu baris */

2.
3. /* CSS juga mendukung komentar lebih dari satu baris,
4. seluruh teks yang berada pada pembuka dan penutup sebuah komentar
5. akan diabaikan oleh browser sebagai compiler.
6. */
Menulis Rules pada Berkas CSS
Untuk latihan awal, kita bisa coba menuliskan sebuah rule styling pada beberapa elemen HTML
yang ada pada latihan sebelumnya.
Yang pertama, tetapkan tipe font ‘sans-serif’ sebagai font yang digunakan pada seluruh elemen
yang ada di dalam <body>. Silakan buka berkas style.css yang sudah kita buat pada text editor
dan tuliskan kode berikut:
1. body {
3. }
Yang kedua, kita tetapkan juga warna pada setiap elemen <h2> dan <h3> yang digunakan pada
berkas HTML dengan menuliskan kode sebagai berikut:
1. h2 {
2. color: #00a2c6
3. }
4.
5. h3 {
6. color: #00a2c6
7. }
Dan yang terakhir, kita coba ubah warna background dan warna teks pada elemen <footer>, serta
beri sebuah padding.
1. footer {
2. padding: 20px;
3. color: white;
4. background-color: #00a2c6
5. }
Sehingga keseluruhan kode pada berkas style.css akan nampak seperti ini:
1. body {
3. }
4.
5. h2 {
6. color: #00a2c6
7. }
8.
9. h3 {
10. color: #00a2c6
11. }
12.
13. footer {
14. padding: 20px;
15. color: white;
17. }
Menghubungkan Berkas CSS dengan HTML
Setelah kita menuliskan rules pada berkas style.css, langkah selanjutnya adalah menghubungkan
berkas style.css tersebut sebagai stylesheet pada berkas HTML agar elemen yang ditampilkan
dapat menerapkan rules yang kita tetapkan.
Silakan kita buka kembali berkas index.html, kemudian tambahkan kode berikut di dalam
elemen <head>:
1. <link rel="stylesheet" href="assets/styles/style.css">
Sehingga keseluruhan kode pada elemen head nampak seperti ini:
1. <head>
2. <title>Kota Bandung</title>
3. <link rel="stylesheet" href="assets/styles/style.css">
4. </head>
Simpan perubahan pada berkas index.html, kemudian coba buka berkas tersebut pada browser.
Jika kita berhasil menerapkan styling pada berkas HTML, maka pada browser akan tampak
seperti ini:
CSS Conception
Sebelum membahas lebih detail mengenai styling, terdapat beberapa konsepsi dalam CSS yang
harus kita pahami.
Inheritance
Styling HTML bersifat inheritance yang artinya dapat mewarisi properti style “tertentu” pada
elemen yang ada di dalamnya. Contohnya pada rules yang kita tuliskan untuk elemen <body>
akan diterapkan pada seluruh elemen yang ada di dalam elemennya (body). Contoh lainnya, pada
rules yang diterapkan pada elemen <footer> dengan properti color yang bernilai white, akan
diterapkan pada seluruh elemen yang ada di dalam <footer>. Hal ini menjadi alasan mengapa
memahami struktur dokumen itu penting.
Group Selector
Jika kita menerapkan rule yang sama pada beberapa selector yang berbeda, di CSS kita dapat
menggabungkan selector tersebut sehingga dapat meminimalisir penulisan kode yang berulang.
Contohnya pada styling yang sudah kita buat sebelumnya, terdapat rule yang serupa antara h2
dan h3.
1. h2 {
2. color: #00a2c6
3. }
4.
5. h3 {
6. color: #00a2c6
7. }
Jika terdapat kasus seperti ini, kita dapat menuliskan dua selector sekaligus dalam satu struktur
rule. Gunakan tanda koma (,) untuk memisahkan tiap selector-nya. Silakan kita buka kembali
berkas style.css dan gabungkan rule untuk elemen <h2> dan <h3> menjadi seperti ini:
1. h2, h3 {
2. color: #00a2c6
3. }
Rule Order
Sesuai dengan namanya, cascading artinya “mengalir.” Demikian halnya dengan alur kerja CSS
dalam membaca kode yang mengalir dari atas ke bawah. Karena itu kita harus memperhatikan
urutan dalam penulisan rules, terutama saat terjadi sebuah konflik.
Konflik dapat terjadi karena kita dapat menerapkan beberapa styling pada satu dokumen HTML.
Contohnya, apa yang seharusnya ditampilkan pada browser ketika eksternal css mengharuskan
elemen <p> menampilkan warna merah, tetapi pada embedded css <p> harus menampilkan
warna biru? Kembali pada alur kerja CSS yang membaca dari atas ke bawah, sehingga warna
yang akan diterapkan adalah warna yang paling akhir didefinisikan.
Untuk lebih jelasnya, kita bisa lihat contoh berikut:
1. <!doctype html>
2. <html lang="en">
3. <head>
4. <title>Judul Berkas</title>
5. <style>
6. p {
7. color: red;
8. }
9.
10. p {
11. color: blue;
12. }
13. </style>
14. </head>
15. <body>
16. <p>Sesuai dengan namanya cascading yang artinya <q>mengalir</q>, alur
kerja CSS dalam membaca kode pun seperti itu.
17. Mengalir dari atas ke bawah sehingga kita harus memperhatikan
urutan dalam penulisan rules <i>styling</i></p>
18. </body>
19. </html>
Maka pada browser elemen <p> menerapkan warna biru pada tulisannya.
Tetapi kita bisa membuat sebuah property styling agar dianggap penting oleh browser untuk
diterapkan dan tidak memperhatikan urutan. Kita bisa menambahkan keyword !important pada
akhir nilai propertinya.
1. <!doctype html>
2. <html lang="en">
3. <head>
4. <title>Judul Dokumen</title>
5. <style>
6. p {
7. color: red !important;
8. }
9.
10. p {
11. color: blue;
12. }
13. </style>
14. </head>
15. <body>
16. <p>Sesuai dengan namanya cascading yang artinya <q>mengalir</q>, alur
kerja CSS dalam membaca kode pun seperti itu. Mengalir dari atas ke
bawah sehingga kita harus memperhatikan urutan dalam penulisan
rules <i>styling</i></p>
17. </body>
18. </html>
Sehingga warna yang diterapkan pada teks paragraf adalah merah.
Gunakan !important ketika memang benar-benar dibutuhkan saja. Sebaiknya kita pahami aturan
urutan pada CSS dengan baik sehingga meminimalisir penggunaan tanda tersebut.
Berikut catatan yang sudah kita pelajari sejauh ini tentang styling:
 Rule : Sebuah aturan styling yang harus diterapkan pada elemen HTML, dalam sebuah
rule terdapat selector dan deklarasi properti styling.
 Selector : Sebuah bagian dari rule, yang mengidentifikasi target elemen untuk
menetapkan sebuah rule.
 Declaration : Sebuah bagian dari rule, yang terdiri dari pasangan properti dan nilainya.
 External Style Sheet : Berkas terpisah yang di dalamnya hanya terdapat sebuah rules yang
akan digunakan pada website.
 Embedded Style Sheet : Kumpulan rules yang dituliskan dalam berkas HTML dengan
menggunakan elemen <style>.
 Inline Style : styling yang diterapkan pada elemen HTML dengan menggunakan atribut
style.
More about Selector
Ada banyak jenis selector untuk menargetkan aturan ke elemen tertentu dalam dokumen HTML.
Pada sub-modul sebelumnya, kita sudah mengetahui salah satu cara dasar dalam menggunakan
selector. Sekarang, mari kita bahas lebih detail mengenai macam macam selector yang ada.
Selector Basic
Pada sub-modul sebelumnya kita sudah mengetahui apa itu selector, dan menggunakannya. Yang
kita gunakan tersebut merupakan selector basic. Sebenarnya terdapat beberapa macam dari
selector basic, yakni:
 Type Selector
 Class Selector
 ID Selector
 Attribute Selector
 Universal Selector
Mari kita bahas satu persatu tipe selector basic yang ada.
1. <!doctype html>
2. <html lang="en">
3. <head>
5. <style>
6. /* Semua elemen span */
7. span {
8. color: red;
9. }
10. </style>
11. </head>
12. <body>
13. <span>Ini merupakan sebuah teks yang berada pada elemen span.
Seharusnya elemen ini ditampilkan dengan warna teks merah.</span>
14. <p>Ini merupakan sebuah teks yang berada pada elemen paragraf, teks
ini tidak seharusnya tidak akan terpengaruh oleh rule.</p>
15. <span>Ini merupakan sebuah teks yang berada pada elemen span lainnya.
Seharusnya elemen ini ditampilkan dengan warna teks merah juga.</span>
16. </body>
17. </html>
Jika berkas tersebut dibuka pada browser, maka teks yang berada pada setiap elemen <span>
akan berwarna merah.
Class Selector
Class selector menetapkan target elemen berdasarkan nilai dari atribut class yang diterapkan
pada elemennya. Untuk penulisan selector, awali dengan tanda titik (.) kemudian lanjutkan
dengan nama class-nya. Contoh:
1. <!doctype html>
2. <html lang="en">
3. <head>
5. <style>
6. .red {
7. color: red;
8. }
9.
10. .skyblue-bg {
11. background-color: skyblue;
12. }
13.
14. .fancy {
16. text-shadow: 4px 4px 3px #77f;
17. }
18. </style>
19. </head>
20. <body>
21. <p class="red">Paragraf dengan teks berwarna merah</p>
22. <p class="skyblue-bg">Paragraf dengan background berwarna biru
langit</p>
23. <p class="fancy">Paragraf dengan gaya fancy</p>
24. <p>Paragraf yang menampilkan teks dengan warna standar tanpa
menerapkan styling</p>
25. </body>
26. </html>
Jika berkas tersebut dibuka pada browser, maka akan nampak seperti ini:
Class bersifat shareable, sehingga dapat diterapkan pada banyak elemen dengan tipe elemen
yang berbeda-beda. Misalkan sebuah class red dapat diterapkan pada elemen paragraf dan juga
heading untuk menampilkan teks berwarna merah.
1. <h1 class="red">Heading dengan teks berwarna merah</h1>

2. <p class="red">Paragraf dengan teks berwarna merah</p>
Tidak hanya itu, sebuah elemen juga mungkin memiliki banyak nilai class, sehingga kita dapat
menerapkan lebih dari satu rule atau gabungan rule pada elemen target. Untuk menggunakannya,
pada atribut class kita cukup tuliskan nama kelasnya dan pisahkan tiap nilai kelasnya dengan
spasi.
1. <h1 class="red skyblue-bg">Heading dengan teks berwarna merah dan

background biru langit</h1>
2. <p class="red fancy">Paragraf dengan teks berwarna merah dan bergaya
fancy</p>
Kita juga bisa menargetkan elemen secara spesifik yang memiliki sebuah class. Bagaimana jika
kita ingin menerapkan gaya yang berbeda ketika menggunakan kelas bergaya keren alias fancy
pada sebuah paragraf? untuk melakukannya, pada selector kita tuliskan nama elemen target
diikuti dengan titik (.) kemudian nama kelasnya. Perhatikan contoh berikut:
1. <!doctype html>
2. <html lang="en">
3. <head>
5. <style>
6. .fancy {
8. text-shadow: 4px 4px 3px #77f;
9. }
10.
11. p.fancy {
12. text-shadow: 4px 4px 3px #00c8eb;
13. }
14. </style>
15. </head>
16. <body>
17. <h1 class="fancy">Heading dengan teks bergaya fancy</h1>
18. <p class="fancy">Paragraf dengan teks bergaya fancy</p>
19. </body>
20. </html>
Jika berkas tersebut dibuka pada browser, maka gaya fancy yang diterapkan pada elemen
heading dan elemen paragraf akan berbeda.
ID Selector
ID selector menetapkan target elemen berdasarkan nilai dari atribut id yang diterapkan pada
elemennya. Sama seperti class, atribut id dapat diterapkan pada seluruh elemen HTML, dan
kebanyakan atribut ini digunakan untuk memberikan sebuah arti pada generic element seperti
<div> dan <span>. Namun atribut id ini tidak bersifat shareable, yang artinya nilai id ini harus
unik dan digunakan pada satu elemen saja.
Untuk menetapkan selector dengan menggunakan id, kita gunakan tanda octothorpe (#) atau
lebih familiar disebut dengan hash. Berikut contohnya:
1. <!doctype html>
2. <html lang="en">
3. <head>
5. <style>
6. #special {
8. }
9. </style>
10. </head>
11. <body>
12. <div id="special">
13. <p>Ini merupakan konten di dalam sebuah div yang diberi id
special.</p>
14. </div>
15. <div>
16. <p>Ini merupakan konten di dalam sebuah div biasa.</p>
17. </div>
18. </body>
19. </html>
Yang harus kita perhatikan kembali adalah id ini bersifat unik. Jika kita ingin menerapkan
sebuah rule pada banyak elemen, sebaiknya gunakan atribut class, bukan dengan id.
1. <!doctype html>
2. <html lang="en">
3. <head>
5. <style>
6. #special {
8. }
9. </style>
10. </head>
11. <body>
12. <div id="special">
13. <p>Ini merupakan konten di dalam sebuah div yang diberi id
special.</p>
14. </div>
15. <div id="special"> 
16. <p>Ini merupakan konten di dalam sebuah div biasa.</p>
17. </div>
18. </body>
19. </html>
Attribute Selector
Attribute selector merupakan cara menetapkan target elemen berdasarkan sebuah atribut yang
digunakan atau bahkan bisa lebih spesifik dengan nilainya. Contohnya sebagai berikut:
1. <!doctype html>
2. <html lang="en">
3. <head>
5. <style>
6.
7. /* <a> element yang menerapkan href attribut */
8. a[href] {
9. color: blue;
10. }
11.
12. /* <a> element yang menerapkan nilai pada href dengan awalan
"#" */
13. a[href^="#"] {
14. background-color: gold;
15. }
16.
17. /* <a> element yang menerapkan nilai pada href yang mengandung
teks "example" */
18. a[href*="example"] {
19. background-color: silver;
20. }
21.
22. /* <a> element yang menerapkan nilai pada href yang mengandung
teks "insensitive" tidak mementingkan huruf kapital*/
23. a[href*="insensitive" i] {
24. color: cyan;
25. }
26.
27. /* <a> element yang menerapkan nilai pada href dengan akhiran
".org" */
28. a[href$=".org"] {
29. color: red;
30. }
31. </style>
32. </head>
33. <body>
34. <ul>
35. <ul>
36. <li><a href="#internal">Internal link</a></li>
37. <li><a href="http://example.com">Example link</a></li>
38. <li><a href="#InSensitive">Insensitive internal link</a></li>
39. <li><a href="http://example.org">Example org link</a></li>
40. </ul>
41. </ul>
42. </body>
43. </html>
Jika kode di atas dibuka pada browser, maka tampilan akan tampak seperti ini:
Dari kode di atas terlihat banyak sekali kondisi yang dapat diterapkan pada atribut selector.
Supaya lebih mudah untuk dipahami, mari kita rangkum dalam sebuah tabel berikut.
Syntax Description
[attr] Menargetkan elemen yang menerapkan atribut attr.
[attr=value] Menargetkan elemen yang menerapkan atribut attr dengan nilai value.
Menargetkan elemen yang menerapkan atribut attr dengan salah satu nilainya
[attr~=value]
adalah value.
Menargetkan elemen yang menerapkan atribut attr yang nilainya diawali dengan
[attr^=value]
nilai value.
Menargetkan elemen yang menerapkan atribut attr yang nilainya diakhiri dengan
[attr$=value]
value.
Menargetkan elemen yang menerapkan atribut attr yang nilainya mengadung
[attr*=value]
value.
Universal Selector
Universal selector digunakan untuk diterapkan pada seluruh elemen. Tetapi selector ini juga bisa
secara spesifik menargetkan sebuah elemen dengan menggabungkan bersama selector yang
lainnya. Berikut ini contohnya:
1. <!doctype html>
2. <html lang="id">
3. <head>
5. <style>
6. /* Menargetkan seluruh tipe elemen */
7. * {
8. color: green;
9. }
10. /* Menargetkan seluruh tipe elemen yang mengandung nilai "en" pada
atribut lang */
11.
12. *[lang^=en] {
13. font-style: italic;
14. }
15.
16. /* Menargetkan seluruh tipe elemen yang memiliki nilai
"warning" pada atribut class */
17. *.warning {
18. color: red;
19. }
20.
21. /* Menargetkan seluruh tipe elemen yang memiliki nilai
"content" pada atribut id */
22. *#content {
23. border: 1px solid blue;
24. padding: 20px;
25. }
26.
27. </style>
28. </head>
29. <body>
30. <p>Ini merupakan paragraf biasa atau tidak menerapkan atribut apapun.
Maka teks pada paragraf ini akan berwarna
31. hijau</p>
32. <p lang="en-us">This is an English paragraph contains en-us value of
lang attribute, so this text will be green and
33. italic.</p>
34.
35. <h1>Ini merupakan sebuah header biasa</h1>
36. <h1 lang="en-us">This is an English Header</h1>
37.
38. <p class="warning">Perhatikan paragraf ini! Paragraf ini merupakan
paragraf yang memiliki kelas bernilai warning,
39. sehingga teks dari paragraf ini akan berwarna merah</p>
40.
41. <div id="content">
42. <p>Ini merupakan sebuah teks di dalam sebuah div yang memiliki id
bernilai "content", seharusnya paragraf ini
43. dibungkus dalam border yang memiliki padding 20px</p>
44. </div>
45. </body>
46. </html>
Hasilnya:
Combinators
Kita sudah mengetahui beberapa basic selector yang ada pada CSS. Tidak hanya sampai disitu,
CSS Selector dapat berisi lebih dari satu basic selector. Di antara basic selector, kita dapat
menyertakan sebuah kombinator.
Ada empat kombinator yang dapat kita gunakan yaitu: Adjacent Sibling Selector, General
Sibling Selector, Child Selector, dan Descendant Selector.
Adjacent Sibling Selector (+)
Adjacent Sibling Selector menggabungkan dua buah basic selector dengan menggunakan tanda +
di antara keduanya. Contohnya seperti ini:
1. img + p {
2. color: green;
3. }
Adjacent Sibling Selector terdiri dari dua buah target elemen, namun hanya elemen kedua yang
menerapkan rule selama elemen tersebut dituliskan langsung setelah elemen pertama pada berkas
HTML. Selain itu kedua elemen tersebut harus berada di dalam induk elemen yang sama. Pada
contoh di atas rule akan diterapkan pada elemen paragraf yang berada tepat setelah elemen
gambar. Berikut contoh penerapannya:
1. <!doctype html>
2. <html lang="en">
3. <head>
5. <style>
6. /* Rule akan diterapkan pada elemen paragraf yang berada tepat
setelah elemen img */
7. img + p {
8. color: green;
9. }
10. </style>
11. </head>
12. <body>
13. <p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan
pada elemen paragraf ini.</p>
14. <img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding
logo" width="400px">
15. <p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar.
Maka paragraf ini seharusnya menerapkan rule dengan menampilkan teks
berwarna hijau.</p>
16. <p>Ini merupakan paragraf ketiga. Letaknya memang setelah elemen
gambar, namun tidak diletakkan persis setelahnya, sehingga rule tidak
akan diterapkan pada elemen ini.</p>
17. </body>
18. </html>
Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:
General Sibling Selector (~)
Mirip seperti Adjacent Sibling Selector namun rules akan diterapkan pada seluruh elemen kedua
yang berada setelah elemen pertama. Dengan catatan, induknya sama, walaupun posisi dari
elemen kedua tidak berada tepat setelahnya. General Sibling Selector menggunakan tanda ~
untuk menetapkan elemenya. Contohnya seperti berikut:
1. img ~ p {
2. color: green;
3. }
Rule di atas akan diterapkan pada elemen paragraf yang berada setelah elemen img selama masih
di dalam induk yang sama.
1. <!doctype html>
2. <html lang="en">
3. <head>
5. <style>
6. /* Rule akan diterapkan pada elemen header yang berada tepat
setelah elemen img */
7. img ~ p {
8. color: green;
9. }
10. </style>
11. </head>
12. <body>
13. <p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan
pada elemen paragraf ini.</p>
14. <img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding
logo" width="400px">
15. <p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar.
Maka paragraf ini menerapkan rule dengan menampilkan teks berwarna
hijau.</p>
16. <div>
17. <p>Ini merupakan paragraf ketiga, letaknya setelah elemen gambar,
namun paragraf ini dibungkus di dalam div sehingga paragraf ini tidak
akan menerapkan rule styling karena tidak memiliki induk yang sama.</p>
18. </div>
19. <p>Ini merupakan paragraf empat. Letaknya memang setelah elemen gambar
dan memiliki induk yang sama seperti elemen gambar, sehingga elemen ini
akan menerapkan rule dengan menampilkan teks berwarna hijau.</p>
20. </body>
21. </html>
Child Selector (>)
Child Selector menggabungkan dua buah basic selector dengan menggunakan tanda greater than
(>) di antara basic selector-nya. Contohnya sebagai berikut:
1. div > p {
2. background-color: yellow;
3. }
Pada contoh di atas, rule akan diterapkan pada seluruh elemen paragraf yang berada di dalam
elemen div secara langsung. Dalam arti lain, elemen paragraf merupakan anak dari elemen
div secara langsung. Untuk lebih jelas, perhatikan contoh penerapannya berikut:
1. <!doctype html>
2. <html lang="en">
3. <head>
5. <style>
6. /* Rule akan diterapkan pada elemen paragraf yang merupakan child
dari elemen div */
7. div > p {
9. }
10. </style>
11. </head>
12. <body>
13. <div>
14. <p>Paragraf pertama. di dalam div.</p>
15. <p>Paragraf kedua. di dalam div.</p>
16. <section><p>Paragraf ketiga. di dalam div namun bukan sebagai anak
elemen secara langsung.</p></section>
17. <p>Paragraf keempat. di dalam div.</p>
18. </div>
19. <p>Paragraf kelima. di luar div.</p>
20. <p>Paragraf keenam. di luar div.</p>
21. </body>
22. </html>
Descendant Selector (space)
Descendant Selector mirip seperti child selector namun hierarkinya lebih luas, karena rule akan
diterapkan pada seluruh elemen yang menjadi turunannya walaupun secara tidak langsung. Basic
selector pertama yang dituliskan pada selector ini menjadi induknya dan basic selector yang
kedua merupakan elemen yang akan menerapkan rule. Selector ini menggunakan spasi dalam
menggabungkan dua basic selector. Contohnya sebagai berikut:
1. div p {
3. }
Pada contoh di atas rule akan diterapkan pada seluruh elemen paragraf yang merupakan turunan
dari elemen div. Berikut contoh penerapannya:
1. <!doctype html>
2. <html lang="en">
3. <head>
5. <style>
6. /* Rule akan diterapkan pada elemen paragraf yang merupakan
turunan dari elemen div */
7. div p {
9. }
10. </style>
11. </head>
12. <body>
13. <div>
14. <p>Paragraf pertama. di dalam div.</p>
15. <p>Paragraf kedua. di dalam div.</p>
16. <section><p>Paragraf ketiga. di dalam div walaupun bukan sebagai
anak elemen secara langsung, namun termasuk dalam
turunannya.</p></section>
17. <p>Paragraf keempat. di dalam div.</p>
18. </div>
19. <p>Paragraf kelima. di luar div.</p>
20. <p>Paragraf keenam. di luar div.</p>
21. </body>
22. </html>
Pseudo Selector
Selain beberapa selector yang sudah kita pelajari, CSS masih memiliki dua selector lagi yang
dapat kita manfaatkan membantu menyeleksi elemen dalam menerapkan sebuah rule, yakni
Pseudo-class dan Pseudo-element.
Sebelum menjelaskan lebih detail tentang kedua selector tersebut, perlu kita ketahui pseudo
selector berbeda dari selector yang sudah dibahas sebelumnya, selector ini menargetkan elemen
pada bagian yang “tidak terlihat” seperti sifat pada elemen, sehingga untuk menetapkannya, kita
tidak bisa menggunakan selector biasa. Salah satu contoh yang paling sering kita terapkan adalah
:hover, Pseudo Selector tersebut kita gunakan untuk menetapkan rule ketika cursor diarahkan ke
target elemen.
1. a:hover {
2. color: blue;
3. }
Contoh kode di atas merupakan salah satu pseudo-class selector dimana elemen anchor akan
menerapkan warna biru ketika kursor diarahkan pada elemen tersebut.
Mari kita bahas lebih detail mengenai pseudo-class selector dan pseudo-element selector.
Pseudo-class Selector
Pseudo-class merupakan sebuah class “semu” yang sebenarnya ada pada tiap elemen HTML.
Pada contoh sebelumnya kita sudah mengetahui salah satu pseudo-class selector, dengan
menggunakan selector ini kita dapat memilih elemen berdasarkan class yang tidak nampak pada
dokumen. Kita bisa menetapkan rule hanya ketika sebuah tautan telah dikunjungi (:visited) atau
ketika sebuah elemen diarahkan dengan kursor (:hover).
Untuk menggunakan pseudo-class kita gunakan tanda titik dua (:) pada basic selector kemudian
diikuti dengan pseudo-class nya. Berikut contoh penerapan beberapa pseudo-class pada sebuah
elemen anchor:
1. /* rule akan diterapkan pada sebuah tautan yang belum pernah dikunjungi
*/
2. a:link {
3. color: red;
4. }
5.
6. /* rule akan diterapkan pada sebuah tautan yang sudah pernah dikunjungi
*/
7. a:visited {
8. color: green;
9. }
10.
11. /* rule akan diterapkan pada sebuah tautan ketika diarahkan dengan
kursor */
12. a:hover {
13. color: pink;
14. }
15.
16. /* rule akan diterapkan pada sebuah tautan ketika ditekan */
17. a:active {
18. color:orange;
19. }
Maka hasilnya akan seperti ini:
Tidak hanya yang dicontohkan di atas, ada banyak sekali class semu yang menjadi standar
pseudo-classes dalam CSS. Kita pun bisa melihat indeks standar yang ada pada pseudo-class
pada tautan resmi Mozilla berikut: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-
classes
Pseudo-elemen Selector
Sama seperti pseudo-class, pseudo-elemen merupakan sebuah elemen “semu” yang sebenarnya
ada tetapi tidak tampak secara tertulis pada berkas HTML. Selector ini biasa digunakan ketika
kita ingin menambahkan sebuah konten tepat sebelum dan setelah sebuah elemen paragraf.
Alhasil kita tidak perlu menuliskan struktur elemen tersebut pada berkas HTML. Cukup
manfaatkan pseudo-elemen ::before dan ::after kemudian tuliskan konten tersebut cukup pada
CSS. Contohnya kita ingin menambahkan tanda kutip sebelum dan sesudah elemen blockquote.
Seperti ini cara menuliskannya:
1. blockquote::before,
2. blockquote::after {
3. content: '"';
4. font-size: 24px;
5. font-style: italic;
7. }
Dengan menuliskan rule tersebut, elemen <blockquote> memiliki tanda kutip pada awal dan
akhir elemennya.
1. <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Aut eius error explicabo ipsum molestiae necessitatibus nesciunt
possimus reprehenderit sed voluptates. Aliquam aspernatur autem est
nobis officia praesentium quas recusandae rem.</blockquote>
Tampilan yang dihasilkan:
Untuk menggunakan pseudo-elemen kita gunakan dua buah tanda titik dua (::) kemudian diikuti
dengan pseudo-elemen nya. Sebenarnya kita bisa menggunakan satu buah tanda tanda titik dua
(:) namun kita perlu membedakannya dengan pseudo-class. Karena itulah baiknya ketika
menggunakan pseudo-elemen, gunakanlah dua buah titik dua (::).
Pseudo-element tidak hanya ::before dan ::after. Dengan pseudo-elemen kita juga dapat
menentukan rule pada awal karakter konten elemen.
1. <!doctype html>
2. <html lang="en">
3. <head>
5. <style>
6. /* Rule styling akan diterapkan pada karakter pertama disebuah
paragraf */
7. p::first-letter {
8. font-size: 32px;
10. color: saddlebrown;
11. }
12. </style>
13. </head>
14. <body>
15. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Architecto deserunt, dicta laudantium quae quam sequi
16. soluta vitae! A, architecto beatae, consequuntur et eveniet fuga
laudantium molestias praesentium temporibus, unde
17. velit.</p>
18. </body>
19. </html>
Tampilan yang dihasilkan:

Untuk mengetahui lebih lengkap mengenai apa saja pseudo-element yang dapat kita manfaatkan,
kita bisa melihat dokumentasi resmi yang diberikan Mozilla pada tautan
berikut: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Font Styling
Ketika kita membuat sebuah dokumen teks, termasuk dokumen cetak, langkah awal kita
biasanya adalah menentukan jenis font yang akan digunakan. Pada pengembangan website pun
demikian. Dalam CSS, font ditentukan dengan menggunakan beberapa paket properti font. Kita
bisa atur tipe font, ukuran, ketebalan, dan gaya. Berikut ini merupakan properti font yang akan
kita pelajari antara lain:
 font-family : Menetapkan jenis font yang akan diterapkan pada target.

 font-size : Menentukan ukuran pada teks.
 font-weight : Menentukan ketebalan pada teks.
 font-style : Menetapkan styling yang diterapkan pada teks.
 font-variant : Menentukan teks untuk menggunakan gaya small caps (huruf kapital kecil).
 font : Shorthand dari properti font yang ada.
Mari kita bahas properti tersebut satu persatu secara mendetail.
font-family
Pada sub-modul pengenalan CSS kita sudah mencoba menggunakan font properties ini untuk
mengubah standar font yang ditampilkan pada browser dengan menggunakan font-family pada
elemen body.
1. body {
3. }
Sehingga menghasilkan tampilan:
Pada rule tersebut kita mengubah standar font yang digunakan browser dengan font ‘sans-serif’.
Sebenarnya untuk nilai dari properti ini dapat lebih dari satu (dikenal sebagai font stack).
Tujuannya adalah sebagai fallback jika terjadi kegagalan dalam menggunakan font yang kita
gunakan.
Untuk menuliskan lebih dari satu nilai font, berikut aturan yang harus kita perhatikan:
 Seluruh nilai font yang bukan merupakan generic font families, yang mana harus
dituliskan secara kapital. Contohnya “Arial” bukan dituliskan “arial”.
 Gunakan tanda koma (,) untuk memisahkan antara nilai font yang digunakan.
 Selalu tanda kutip (“) untuk membungkus nilai font yang memiliki spasi pada namanya
(Contohnya “Open Sans”).
Mungkin kita bertanya-tanya mengapa perlu memberikan lebih dari satu nilai pada font-family?
Hal tersebut penting karena tidak semua browser mendukung semua jenis font. Memberikan
lebih dari satu nilai font dapat menawarkan alternatif tampilan font pada browser. Terutama jika
font utama yang diterapkan tidak didukung oleh browser yang digunakan.
Bagaimana urutan prioritasnya? Mulai dari jenis font yang pertama dituliskan. Jika font pertama
didukung oleh browser maka browser akan menggunakannya, jika tidak lantas browser akan
memeriksa nilai font yang kedua dan menggunakannya (jika didukung), demikian dan
seterusnya.
Pastikan untuk menggunakan generic font families pada akhir nilai properti font-family, karena
nilai ini dipastikan didukung oleh seluruh browser saat ini. Lantas apa saja nilai dari generic font
families ini? Berikut nilai-nilai generic font families yang dapat kita gunakan untuk fallback
mechanism:
 serif : jenis font yang memiliki runcing pada garis akhir karakternya. Times New Roman
merupakan salah satu jenis serif font.
 sans-serif : jenis font yang tidak meruncing pada garis akhir karakternya. Contohnya
“Open Sans”, “Fira Sans” dan lainnya.
 monospace : jenis font yang memiliki nilai lebar tiap karakternya sama. Consolas
merupakan salah satu jenisnya.
 cursive: jenis font yang tampak seperti handwriting atau hasil tulisan tangan.
 fantasy : jenis font yang merepresentasikan karakteristik yang menyenangkan.
 system-ui : jika menerapkan nilai ini maka font yang diterapkan akan sama seperti font
yang digunakan pada sistem operasi kita.
 math : jenis font yang digunakan untuk penulisan rumus-rumus matematika.
 emoji : jenis font yang digunakan untuk menampilkan emoji.
 fangsong : jenis font yang menampilkan gaya penulisan Chinese.
Dalam memilih jenis font terdapat istilah yang dinamakan web safe font. Web safe font adalah
jenis font yang umumnya sudah pasti tersedia di sebagian besar komputer. Sehingga dapat
dipastikan bahwa website akan terlihat sebagaimana mestinya pada browser. Berikut merupakan
beberapa contoh font yang masuk ke kategori ini.
 Arial (sans-serif)
 Verdana (sans-serif)
 Helvetica (sans-serif)
 Tahoma (sans-serif)
 Trebuchet MS (sans-serif)
 Times New Roman (serif)
 Georgia (serif)
 Garamond (serif)
 Courier New (monospace)
 Brush Script MT (cursive)
font-size
Mengubah nilai font pada sebuah dokumen adalah hal yang sangat wajar terjadi, begitu pula
pada website. Untuk menetapkan ukuran font kita kita perlu menerapkan properti font-size. Kita
bisa menetapkan nilai dari properti ini dengan menuliskan langsung nilai dan satuannya.
Contohnya seperti ini:
1. h1 {
2. font-size: 1.5em;
3. }
Pastikan bahwa saat menuliskan nilai dan satuannya, tidak ada jarak (spasi).
1. /* Rule tidak akan diterapkan pada target karena kesalahan penulisan

nilai properti */
2. h1 {
3. font-size: 1.5 em;
4. }
Satuan dalam menetapkan ukuran font terdapat dua jenis. Yang pertama relative, yakni satuan
yang nilainya tergantung pada sesuatu hal, contohnya ukuran dari viewport, induk elemen
ataupun ukuran teks standar. Dan yang kedua adalah absolute, yakni satuan yang nilainya telah
ditentukan atau digunakan dalam dunia nyata.
Berikut merupakan nilai satuan yang dapat kita manfaatkan dalam menetapkan ukuran font
beserta fungsinya:
Relative unit
Satuan Relative to Fungsi

Satuan relatif terhadap ukuran font yang sedang digunakan pada
em Font size elemen (contohnya, 2em berarti 2 kali lebih besar dari ukuran font
seharusnya).
Satuan relatif terhadap tinggi font saat ini, satuan ini sangat jarang
ex Font height
sekali digunakan
Mirip seperti em, tetapi rem merupakan satuan relatif terhadap ukuran
rem Font size
font dari root element.
ch Font width Satuan relatif terhadap lebar dari karakter “0” nol.
Satuan relatif terhadap 1% lebar viewport. Contoh 1vw = 1% dari
vw Viewport width lebar viewport. Satuan ini tidak didukung pada browser IE8 ke
bawah.
Satuan relatif terhadap 1% tinggi viewport. Contoh 1vh = 1% dari
vh Viewport height tinggi viewport. Satuan ini tidak didukung pada browser IE8 ke
bawah.
Absolute unit
Satuan Fungsi
px Menetapkan nilai font berdasarkan ukuran pixel
pt Menetapkan nilai font berdasarkan points (1/72 inch di CSS2.1)
pc Menetapkan nilai font berdasarkan picas (1 pica = 12 point)
mm Menetapkan nilai font berdasarkan millimeters
cm Menetapkan nilai font berdasarkan centimeters
in Menetapkan nilai font berdasarkan inches
Selain dengan menetapkan nilai dan satuannya secara langsung, untuk mengatur ukuran font kita
juga bisa gunakan nilai persentase.
1. body {
2. font-size: 16px;
3. }
4. h1 {
5. font-size: 150%; /* 150% dari 16 = 24px */
6. }
Pada contoh ini ukuran font dari elemen <h1> seharusnya memiliki ukuran 16px karena
mewarisi dari induk elemennya (body). Tetapi di bawahnya terdapat rule yang menargetkan
secara spesifik untuk elemen <h1> untuk menerapkan ukuran font sebesar 150% dari ukuran
induknya. Maka elemen <h1> akan nampak 50% lebih besar dari elemen lain yang ada di
dalam <body>.
Dan yang terakhir kita juga bisa menentukan ukuran font dengan menuliskan kata kunci secara
spesifik yang tersedia pada CSS. Kata kunci tersebut adalah: xx-small, x-small, small, medium,
large, x-large, dan xx-large.
Kata kunci tersebut tidak ada kaitannya dengan pengukuran tertentu (bukan ukuran yang
absolute) tetapi nilainya diubah secara konsisten satu sama lain.
font-weight
Setelah mengenal font families dan font size, selanjutnya ada juga font-weight yang digunakan
untuk mengatur ketebalan dari font yang ditampilkan. Nilai dari properti ini dapat ditentukan
dengan menggunakan numeric values (100 sampai 900) atau dengan menggunakan descriptive
terms (normal, bold, bolder, dan lighter).
Properti font-weight dapat diaplikasikan ke seluruh elemen yang ada di HTML dan nilainya
dapat diturunkan pada elemen turunannya.
font-style
Properti selanjutnya adalah font-style. Properti ini digunakan untuk menentukan postur dari teks
yang ditampilkan, apakah bentuknya vertikal (normal) atau miring (italic dan oblique).
Italic dan oblique keduanya menampilkan teks yang miring. Perbedaanya adalah italic
menerapkan tipe miring (italic font version) dari suatu font sedangkan oblique adalah font
normal yang hanya dibuat miring.
Properti font-style dapat diaplikasikan ke seluruh elemen yang ada di HTML dan nilainya dapat
diturunkan pada elemen turunannya.
font-variant
Kita yang terbiasa dengan aplikasi document editor seperti Microsoft Word tentu tahu atau sudah
mencoba fitur small caps. Fitur ini dapat membuat teks menjadi kapital tetapi dituliskan secara
kecil dan merapat, seperti ini:
Untuk membuat tulisan seperti gambar di atas, kita bisa memanfaatkan properti font-variant
dengan nilai small-caps pada propertinya.
Properti font-variant dapat diaplikasikan ke seluruh elemen yang ada di HTML dan nilainya
Shorthand
Menspesifikasikan masing-masing nilai properti font akan menghasilkan banyak sekali kode
repetitif. Dengan begitu CSS memberikan suatu “jalan pintas” untuk menuliskan properti-
properti tersebut ke dalam satu properti yaitu font.
Dengan menggunakan properti font kita dapat menuliskan beberapa properti hanya dalam satu
properti pada satu rule.
Nilai dari properti font merupakan nilai dari seluruh properti dari font yang sudah kita bahas.
Tiap nilai dipisahkan menggunakan spasi. Pada properti ini urutan nilai merupakan hal yang
penting, sehingga jangan sampai salah urutan dalam menuliskannya. Kesalahan penulisan atau
urutan menyebabkan seluruh struktur rule menjadi tidak valid.
Walaupun begitu kita bisa tidak menuliskan seluruh nilai properti yang ada, tetapi nilai dari
properti font-size dan font-family wajib ada ketika menggunakan properti ini. Berikut contohnya
penulisan minimal ketika kita menggunakan properti font:
1. p {
2. font: 1em sans-serif;
3. }
Text Styling
Pembahasan sebelumnya kita terfokus pada formating bentuk karakter yang ditampilkan dengan
menggunakan beberapa properti font yang ada. Sekarang kita akan mempelajari bagaimana
seorang developer bisa memberikan formatting pada keseluruhan teks yang ada pada baris
paragraf, seperti menetapkan inden, jarak antar baris, kata dan huruf, dan sebagainya. Maka dari
itu, mari kita bahas satu persatu.
Line Height
Properti line-height digunakan untuk mengatur jarak minimal dari garis dasar ke garis dasar
dalam menampilkannya teks pada halaman. Jika kita terbiasa dengan software dokumen editor
seperti Microsoft Word, properti ini mirip dengan fungsi line height.
Pada penjelasan di atas disebutkan “minimal”, karena jika terdapat sebuah karakter yang tinggi
atau besar dalam sebuah baris, maka tinggi dari baris pun akan menyesuaikan agar jarak tetap
mengakomodirnya.
Berikut merupakan contoh tiga cara berbeda dalam menerapkan tinggi baris dua kali lebih tinggi
dari ukuran font:
1. p {
2. line-height: 2;
3. }
4. p {
5. line-height: 200%;
6. }
7. p {
8. line-height: 2em;
9. }
Cara pertama merupakan cara yang paling mudah digunakan, karena kita dapat menentukan nilai
hanya dengan satu angka, di mana angka tersebut nantinya dikalikan dengan nilai font-size
sebelum diterapkan pada nilai properti line-height. Contohnya, ukuran font standar pada paragraf
adalah 16 pixel. Kita definisikan properti line-height dengan nilai 2, maka nilai properti line-
height seharusnya adalah 16 pixel * 2 = 32 pixel (dua kali lebih besar dari ukuran font).
Properti line-height dapat diaplikasikan ke seluruh elemen yang ada pada HTML dan nilainya
Text Indent
Dalam membuat sebuah dokumen tidak jarang kita membutuhkan jarak/lekuk di awal paragraf.
Hal tersebut dapat dilakukan pada website dengan menerapkan properti text-indent. Kita dapat
menentukan nilai properti ini melalui perhitungan panjang dalam px, em, dan in atau bisa
menggunakan nilai persentase (%). Nilai persentase dihitung berdasarkan lebar dari induk
elemen. Berikut merupakan contoh penggunaannya:
1. p#first {
2. text-indent: 2em;
3. }
4.
5. p#second {
6. text-indent: 25%;
7. }
8.
9. p#third {
10. text-indent: -35px;
11. }
Jika elemen menerapkan rule tersebut, akan tampak seperti ini:
Pada contoh ke tiga kita bisa melihat bahwa pada nilai properti ini dapat diberikan nilai negatif.
Jika kita menggunakannya, maka baris pertama pada paragraf akan keluar dari batas elemen
yang menampungnya (biasa disebut hanging indent).
Perlu diingat kembali, properti ini hanya berpengaruh pada awal baris paragraf. Jika kita ingin
menetapkannya untuk seluruh baris kita dapat gunakan margin atau padding, keduanya akan
dibahas pada materi box model.
Text Alignment
Kita bisa mengatur text alignment pada website seperti kita melakukannya pada aplikasi
Microsoft Word dengan menggunakan properti text-align. Untuk standarnya, properti ini bernilai
left atau biasa kita sebut rata kiri. Tetapi jika kita menerapkan atribut language dengan nilai
bahasa yang arah bacanya berlawanan, maka standarnya akan menggunakan right atau rata
kanan.
Berikut ini nilai yang dapat digunakan pada properti text-align:
Nilai Properti Fungsi

text-align: left Membuat perataan teks pada ujung kiri
text-align: right Membuat perataan teks pada ujung kanan
text-align: center Membuat perataan teks secara menengah
text-align: justify Membuat perataan teks yang setara pada ujung kiri dan kanannya
Bagaimana? Pasti kita sudah familiar dengan nilai-nilai tersebut? Berikut contoh penggunaan
dari properti text-align:
1. p#first {
2. text-align: left;
3. }
4.
5. p#second {
6. text-align: right;
7. }
8.
9. p#third {
10. text-align: center;
11. }
12.
13. p#fourth {
14. text-align: justify;
15. }
Jika elemen menerapkan rule tersebut, akan tampak seperti ini:

Text Decoration
Properti ini paling populer digunakan ketika kita ingin membuat garis bawah atau underline pada
teks. Tapi tak hanya itu, ada beberapa nilai lain yang dapat kita gunakan untuk properti ini.
Detailnya sebagai berikut:
Nilai properti Fungsi

text-decoration: underline Memberikan garis bawah (underline) pada teks
text-decoration: overline Memberikan garis atas (overline) pada teks
text-decoration: line-through Memberikan efek tulisan dicoret (strikethrough)
text-decoration: none Menghilangkan dekorasi teks yang ada pada elemen
Dengan menggunakan text-decoration, kita dapat menghilangkan efek underline pada link yang
ditampilkan dengan memberikan nilai text-decoration: none pada elemen <a>.
Text Transform
Pasti kita pernah mencoba fitur pada document editor yang dapat mengubah kapitalisasi pada
teks, bukan? Fitur ini sangat membantu di kala kita ingin mengubah kapitalisasi tanpa harus
menuliskan kembali teksnya. Pada CSS juga terdapat fitur serupa, yaitu dengan menggunakan
properti text-transform. Ketika kita menerapkan properti text-transform pada elemen teks, maka
kapitalisasi akan berubah ketika halaman di-render tanpa harus mengubahnya pada dokumen
HTML.
Properti ini dapat berisikan nilai sebagai berikut:
Nilai Properti Fungsi

text-transform: none Teks yang ditampilkan sama seperti yang dituliskan
text-transform: capitalize Membuat huruf pertama besar pada tiap katanya
text-transform: lowercase Membuat seluruh teks menggunakan huruf kecil
Text-transform: uppercase Membuat seluruh teks menggunakan huruf besar
Seperti ini contoh tampilan ketika menerapkan properti dan nilai di atas
Word and Letter Spacing
Properti selanjutnya yang bisa kita gunakan untuk formating teks adalah letter-spacing dan word-
spacing. Seperti namanya, properti ini digunakan untuk mengatur spasi atau jarak pada teks.
Properti letter-spacing digunakan untuk mengatur jarak antar huruf, sedangkan word-spacing
digunakan untuk mengatur jarak antar kata. Berikut contohnya:
1. p#letter {
2. letter-spacing: 4px;
3. }
4. p#word {
5. word-spacing: 1.5em;
6. }
Berikut contoh tampilan jika menerapkan rule di atas:

Kedua elemen ini dapat diaplikasikan ke seluruh elemen yang ada pada HTML dan nilainya
Text Shadow
Memberikan bayangan pada teks telah menjadi hal yang umum digunakan meskipun tidak
memiliki dukungan di semua browser. Pada CSS untuk membuat bayangan pada teks (atau biasa
disebut drop shadow) kita dapat gunakan properti text-shadow.
Nilai dari properti ini cukup rumit karena membutuhkan tiga buah nilai dan satu buah nilai warna
sehingga membutuhkan empat nilai dalam satu properti untuk menentukan bayangannya.
 Nilai pertama : menunjukkan seberapa jauh ke kiri atau kanan (horizontal) bayangan
harus ditampakkan.
 Nilai kedua : menunjukkan jarak ke atas atau ke bawah (vertical) bayangan harus
ditampakkan.
 Nilai Ketiga (opsional) : menentukan tingkat keburaman yang harus diterapkan pada
bayangan.
 Nilai Keempat : menentukan warna yang digunakan pada bayangan.
Berikut ini contoh penggunaan dari properti drop shadow:
1. p#one {
2. text-shadow: 1px 1px 0px #000000;
3. background-color: #eeeeee;
4. color: #666666;
5. }
6.
7. p#two {
9. background-color: #dddddd;
10. color: #666666;
11. }
12.
13. p#three {
15. background-color: #cccccc;
16. color: #ffffff;
17. }
18.
19. p#four {
20. text-shadow: -1px -1px #666666;
21. background-color: #cccccc;
22. color: #bbbbbb;
23. }
Berikut contoh tampilan jika menerapkan rule di atas:

Menggunakan Font dari Google Font
Kita sudah mengetahui bagaimana cara mengubah font pada website dan juga mengetahui tipe
font standar yang tersedia pada browser. Berbicara tentang tipe font, ketika kita menjelajah
beberapa website yang ada di internet tidak jarang kita menemukan website yang menggunakan
font yang unik atau font yang tidak dimiliki pada komputer kita. Lantas bagaimana cara font
tersebut dapat ditampilkan?
Untuk hal ini, CSS memiliki fitur yang digunakan untuk memasukan font external ke dalam
CSS, yakni menggunakan @font-face. Berikut contoh penulisan @font-face pada CSS:
1. @font-face {
2. font-family: "Dicoding Font";
3. src: url('FILE-FONT.TTF');
4. }
Kode tersebut berfungsi untuk mendefinisikan custom font, dengan nama “Dicoding Font”.
Ketika mendefinisikan custom font, kita juga membutuhkan berkas font, bisa dilihat berkas font
pada contoh adalah ‘FILE-FONT.TTF”.
Setelah mendefinisikan font-face, maka font-family dengan nama “Dicoding Font” siap
diterapkan pada elemen HTML.
1. p {
2. font-family: "Dicoding Font";
3. }
Pada kelas ini kita tidak akan membahas secara detail mengenai @font-face. Jika ingin
mempelajarinya, Anda bisa mengunjungi dokumentasi Mozilla pada tautan berikut:
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face. Mengapa kita tak mempelajari
hal ini secara detail? Karena sekarang terdapat cara yang lebih mudah dan sering digunakan oleh
web developer, yakni menggunakan font dari Google Font.
Google Font, layanan Google untuk memudahkan kita mendesain font pada website. Google
Font banyak menyediakan tipe font gratis yang dapat kita manfaatkan. Saat materi ini ditulis,
Google Font memiliki lebih dari 960 jenis font.
Perlu jadi catatan bahwa Google Font hanya dapat digunakan ketika komputer dalam keadaan
online. Jika kita sedang mengembangkan website dalam keadaan offline, sebaiknya gunakan
pendekatan @font-face.
Untuk menggunakan font yang disediakan Google Font, langkah awal yaitu mengunjungi
website google font pada tautan berikut: https://fonts.google.com/
Saat ini kita akan mencari font dengan nama “Quicksand.” Lakukan pencarian font tersebut pada
search bar yang tersedia pada website tersebut.
Jika sudah menemukan font yang dicari, kemudian pilih dan kita akan diarahkan ke halaman
berikut.
Tekan tombol “+ Select this style” untuk memilih font dengan ukuran yang diinginkan. Di sini
kita contohkan dengan memilih font ukuran Regular 400. Ketika menekan tombol tersebut,
Google Font akan menyimpannya sebagai selected families (pilih tombol pada pojok kanan atas
untuk melihat selected families).
Kita juga bisa memilih ketebalan fontnya. Yuk, pilih juga versi tebalnya (Bold 700) dan masukan
kembali ke dalam collection. Setelah selesai memilih font yang dicari, maka tampilan dari
selected families akan tampak seperti ini:
 Teks yang disalin
1. @import url('https://fonts.googleapis.com/css?
family=Quicksand:400,700&display=swap');
Kemudian buka kembali berkas style.css pada project kita dan sisipkan kode tersebut pada baris
paling awal. Sehingga keseluruhan kode pada berkas style.css seperti ini:
1. @import url('https://fonts.googleapis.com/css?
family=Quicksand:400,700&display=swap');
2.
3.
4. body {
6. }
7.
8.
9. h2, h3 {
10. color: #00a2c6
11. }
12.
13.
14. footer {
15. padding: 20px;
16. color: white;
18. }
Untuk menerapkan font-nya, kita ubah nilai properti font-family pada body dengan
menambahkan nilai ‘Quicksand’ sebelum generic font sans-serif.
1. body {
2. font-family: 'Quicksand', sans-serif;
3. }
Dengan begitu tampilan font pada halaman website akan menggunakan Quicksand.
Bagaimana? Mudah kan? Sebenarnya google font menggunakan teknik yang sama, yakni
menggunakan @font-face. Jika kita coba buka URL yang ada pada script @import tadi pada
browser, hasilnya adalah sebuah kode CSS di mana terdapat banyak @font-face dituliskan
disana.
Dengan fungsi @import pada CSS, seolah-olah kode tersebut dituliskan pada berkas style.css
yang kita buat.

Attribute

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Attribute

Uploaded by

Copyright:

Available Formats

Atribut HTML

1. <p lang="id">Kota metropolitan terbesar di Provinsi Jawa Barat,

1. <p lang="id" translate="no">Kota metropolitan terbesar di Provinsi Jawa

1. <p>Kata Bandung berasal dari kata bendung atau bendungan karena

Pada HTML terdapat tiga tipe list:

 Unordered lists : daftar yang ditampilkan tidak memiliki urutan.

Maka hasilnya list akan dimulai dengan nilai urutan ke-7.

Menambahkan List pada Halaman Profil

Sehingga pada browser akan menampilkan list seperti ini.

1. <img src="https://i.imgur.com/EUUXQcf.png" alt="dicoding">

Maka gambar akan ditampilkan pada browser seperti ini:

Jenis format gambar

Nama Ekstensi Format File Keterangan

Mengatur ukuran pada gambar

1. <img src="https://i.imgur.com/EUUXQcf.png" alt="dicoding" width="500px"

1.

1.

Berikut tampilan standar ketika sebuah konten berada di dalam <blockquote>.

1. <p>Dicoding adalah sebuah perusahaan startup yang bertujuan

Inline Formatting Text

1. <p>Hubungi kami di</p>

Atribut Nilai Deskripsi

_parent, Menetapkan lokasi ketika membuka target

1. <p><em>Oding</em> adalah seorang pelajar</p>

1. <p>Sebelum pulang kerja, ia berkata kepadaku: <q>Maaf saya tidak bisa

1. <p>Informasi selengkapnya bisa Anda dapatkan di <cite><a

1. <p><dfn>Website</dfn> merupakan halaman yang menampilkan informasi

Subscript dan Superscript

1. <p>Sukrosa merupakan suatu disakarida yang dibentuk dari monomer-

1. <p>Ini adalah periode perang saudara. Pesawat ruang angkasa pemberontak,

Menerapkan Anchor pada Navigasi Halaman Profil

Semantic HTML - Mengorganisasikan Halaman Konten

Elemen ini dapat kita gunakan untuk:

Dan elemen <footer> digunakan sebagai informasi hak cipta.

Element <main> digunakan untuk menampung/mewadahi konten utama (dominan) dalam

Terdapat dua generic elemen yang dapat kita manfaatkan.

Struktur Dasar Sebuah Tabel

1. <h1>Pemenang Piala Dunia tiga tahun terakhir</h1>

Tampilan pada browser:

Elemen dan Atribut pada Tabel

Contohnya untuk menggunakan simbol copyright, kita dapat menggunakan “&copy”

1. <p>Belajar Dasar Pemrograman Web &copy; 2019, Dicoding Academy</p>

Alhasil, tampilannya sama.

Berikut daftar karakter spesial dengan karakter referensinya.

Karakter Deskripsi Named Entity Numeric Entity

Bagaimana Style Sheet Bekerja?

Sebuah style sheet bekerja melalui tahapan berikut:

Mari, kita bahas satu persatu tahapannya.

Menuliskan Aturan Styling

External Style Sheet

Contohnya, banyak pengembang menggunakan bootstraps.min.css untuk membantu penyusunan

Embedded Style Sheet

1. <h1 style="color: green">Kota Bandung</h1>

1. <h1 style="color: green; margin-top: 2em">Kota Bandung</h1>

Berikut adalah contoh memberikan komentar pada CSS:

1. /* ini merupakan komentar satu baris */

Menulis Rules pada Berkas CSS

Menghubungkan Berkas CSS dengan HTML

1. <link rel="stylesheet" href="assets/styles/style.css">

Sehingga keseluruhan kode pada elemen head nampak seperti ini:

Untuk lebih jelasnya, kita bisa lihat contoh berikut:

Sehingga warna yang diterapkan pada teks paragraf adalah merah.

More about Selector

1. <h1 class="red">Heading dengan teks berwarna merah</h1>

1. <p>Belajar Dasar Pemrograman Web © 2019, Dicoding Academy</p>