Belajar Dasar Pemrograman Web

Apa itu Website?
Website adalah sebuah halaman yang menampilkan informasi melalui teks

atau gambar. Website dapat diakses melalui internet dengan menggunakan
browser. Website ini unik karena tiap halaman dapat saling terhubung dengan
menggunakan hypertext links. Umumnya sebuah website memuat informasi
yang disediakan secara perorangan, kelompok, atau organisasi. Semua
informasi yang tersedia pada halaman website disimpan pada server.
Website sudah berkembang sangat pesat. Sekarang, website digunakan tidak

hanya untuk media berbagi informasi atau berita. Layaknya sebuah aplikasi
pada komputer dan handphone kita, website dapat digunakan untuk
komunikasi secara real-time, mendengarkan sebuah lagu bahkan photo
editing sekarang dapat dilakukan pada sebuah website.
Memanfaatkan website sebagai alat editing photo. https://pixlr.com/
Website sendiri merupakan teknologi yang sudah ada sejak 30 tahun silam.
Tim Berners-Lee seorang ilmuwan inggris menemukan World Wide
Web (WWW) pada tahun 1989 ketika ia bekerja di CERN (Conseil Européen
pour la Recherche Nucléaire). Web awalnya dibuat dan dikembangkan untuk
memenuhi permintaan dalam berbagi informasi secara otomatis antar
ilmuwan di universitas dan lembaga di seluruh dunia. Web pertama di CERN
didedikasikan sebagai web pertama di dunia dan pada 2013 CERN merilis “a
project to restore this first ever website: info.cern.ch” untuk mengabadikan
website pertama di dunia. Thank you CERN! Thank you Tim Berners-Lee!
Web Server
Seperti yang sudah disebutkan sebelumnya, informasi pada sebuah website
disimpan pada server. Lantas apa itu server? Banyak yang mengira
bahwa server adalah sebuah komputer dengan performa tinggi dan berukuran
besar. Hal tersebut tidak salah karena biasanya komputer yang dijadikan server
memang harus memiliki performa yang tinggi, karena selain untuk menyimpan
data (HTML, CSS dan JS disimpan di sini), server juga harus melakukan
pekerjaan yang cukup berat, yaitu menanggapi, menyediakan dan mengelola data
yang diminta oleh client. Tidak hanya satu client, bisa ratusan bahkan ribuan.
Tetapi pengertian server sebenarnya lebih merujuk pada sebuah software yang

dapat menghubungkan sebuah komputer dengan komputer lain. Jadi penekanan
sebuah server bukan pada sebuah komputernya, melainkan pada rule atau fungsi
dari sebuah komputer tersebut.
HTTP Server
HTTP Server merupakan sebuah software yang dapat menerima transaksi dari
HyperText Transfer Protocol dalam suatu website atau biasa disebut dengan
“HTTP Server”. Banyak software yang dapat melakukan tugas tersebut. Apache
adalah salah satunya yang cukup friendly, gratis dan tersedia untuk seluruh
komputer dengan basis UNIX (termasuk MacOS) dan juga Windows.
DNS Server
Setiap perangkat baik komputer, smartphone, modem, maupun router yang

terkoneksi internet akan memiliki IP Address. Contohnya, komputer yang menjadi
host dari dicoding.com memiliki IP 104.28.20.105, Jika kita menggunakan IP
tersebut untuk mengakses sebuah website, tentu akan repot. Mengingat
kumpulan angka memang dapat seorang manusia lakukan, tapi bagaimana jika
harus mengingat 10 IP? Untuk mengatasinya, dibuatlah Domain Name System
(DNS) yang dapat mengubah/mengarahkan website melalui sebuah nama domain
(“dicoding.com”).
Client
Jika ada penyedia (server) tentu ada pengguna bukan? Perangkat yang meminta
(request) suatu layanan tertentu ke suatu server disebut dengan client. Browser
merupakan salah satu client yang memanfaatkan HTTP Server dalam transaksi
datanya. Jelas, tujuannya adalah untuk mengolah, menampilkan dan melakukan
interaksi dengan dokumen yang disediakan oleh web server. Layaknya sebuah
pelukis, browser mampu menyajikan informasi dalam bentuk visual yang indah,
bersumber dari data mentah yang diperoleh dari server.
Server-side dan Client-side

Dalam pengembangan web, terdapat istilah “Client-Side” atau “Server-side”. Hal
ini merujuk pada sebuah proses yang dilakukan pada sisi client atau di sisi server.
Untuk client side, semua proses terjadi di sisi pengguna, client meminta data ke
server di mana data yang dikirimkan nanti diolah di sisi client. Biasanya data yang
diolah dalam bentuk HTML, CSS dan JavaScript.
Sedangkan untuk server side, semua proses yang terjadi dilakukan di sisi server.
Server side bertanggung jawab untuk merespon data yang diminta oleh client
side. Biasanya server side merupakan tempat di mana terjadinya interaksi
pada database, sehingga sisi client tidak mengetahui prosesnya dan memang
tidak boleh tahu. Client hanya diberikan sebuah data hasil olahan dari sisi server.
Anatomi Website
Kita terbiasa dengan tampilan website yang nampak pada browser, tetapi apakah
kalian tahu bagaimana website dapat tampil demikian? Terdapat 3 (tiga) fondasi
penting dalam membuat website. Yang pertama adalah HTML, yakni salah
satu markup language, yang digunakan untuk membuat struktur dan
menampilkan konten pada World Wide Web (Website). CSS dan JavaScript
merupakan fondasi lainnya yang digunakan untuk mempercantik dan menjadikan
website lebih dinamis dan interaktif.
Main idea: https://www.freecodecamp.org/news/learn-html-in-5-minutes-ccd378d2ab72/
Sama seperti halnya tubuh manusia yang disusun dari kerangka tulang, HTML
pada website berperan sebagai kerangka dasar yang digunakan dalam
menampilkan visual pada website. Tapi jika hanya sebatas kerangka, seorang
manusia akan terlihat menyeramkan dan aneh bukan? Maka dari itu untuk
mempercantik tampilannya kita membutuhkan sebuah kulit. Di sinilah peran CSS.
Setelah memiliki kulit dan nampak cantik, selanjutnya kita membutuhkan sebuah
otak dan otot agar seorang manusia dapat dinamis dan berinteraksi. Dalam
website JavaScript-lah yang berperan dalam membuat website yang dinamis dan
interaktif.
Bagaimana Website bekerja?
Ketika kita mengunjungi dicoding.com, tentu kita membutuhkan sebuah koneksi

internet, karena website memerlukan sebuah web server hosting yang dapat
disimpan di mana saja. Ketika kita menuliskan “dicoding.com” dan menekan enter
pada browser, hal yang pertama dilakukan browser adalah menghubungi Domain
Name System (DNS) server untuk mengarahkan ke alamat server. Kemudian
browser mengirimkan sebuah permintaan (request) agar server mengirimkan
salinan dari informasi yang nantinya ditampilkan pada client (browser). Jika
request tersebut berhasil, maka server menanggapi (response) permintaan
tersebut dan mulai mengirimkan salinan yang dibutuhkan secara berangsur.
Browser menggabungkan bagian-bagian informasi yang diperoleh untuk
kemudian tampil di jendela browser.
Untuk menampilkan informasi pada jendela, browser menggunakan HTML dan

CSS yang dikirimkan dari server. Dengan begitu, informasi dalam bentuk HTML
dan CSS-lah yang dikirimkan server untuk client (browser). Beberapa halaman
website juga membutuhkan informasi ekstra seperti berkas gambar, suara atau
video, tetapi berkas tersebut sebenarnya hanya ditanamkan (embed) pada HTML.
Dan beberapa halaman website sebenarnya juga membutuhkan JavaScript untuk
me-render HTML atau CSS agar dapat menampilkan informasi secara dinamis.
Apa yang kan Kita Pelajari?

Setelah mengetahui tentang anatomi dan bagaimana website bekerja, pada
kelas ini kita akan banyak mempelajari dasar HTML,CSS, dan JavaScript
yang menjadi inti dari pengembangan website.
Pada modul 2 dan 3 kita akan mempelajari rangkaian penggunaan HTML

pada website. Mulai dari pembuatan berkas HTML, mengenal dan
menggunakan elemen, menampilkan gambar dan penyusunan layout.
Kemudian pada modul 4 dan 5 kita akan mempelajari penerapan styling pada
website untuk mempercantik dan membantu dalam penyusunan website.
Sampai modul ini, kita akan membuat sebuah halaman website yang menarik.
Pada modul 6, kita akan belajar bagaimana cara menyusun layout yang
responsif menggunakan flexbox. Dan kita juga akan praktek membuat sebuah
layout dasar kalkulator pada website.
Dan JavaScript akan dibahas pada modul 7. Di sana kita akan belajar dasar-
dasar dari bahasa pemrograman tersebut, dari pengenalan syntax,
penggunaan variabel, tipe data yang ada, iterator dll. Di sana kita juga akan
belajar bagaimana cara memanipulasi “DOM” dengan menggunakan
JavaScript sehingga dapat membuat website yang interaktif.
Pada modul 8, kita akan mempelajari cara mengelola sebuah data atau objek
pada local storage ataupun session storage dengan memanfaatkan Web
Storage. Sampai modul ini, kita akan membuat sebuah proyek kalkulator
sederhana dengan memanfaatkan Web Storage untuk menyimpan histori
perhitungannya.
Dan pada akhir pembelajaran, untuk lulus dari kelas ini, terdapat submission
alias proyek akhir yang harus Anda kirimkan. Proyek tersebut akan kemudian
kami review guna menentukan kelulusan Anda.
Sudah siap belajar dasar pemrograman website? Sebelum memulainya mari

kita persiapkan beberapa tools yang akan digunakan pada kelas ini.
Requirement Tools
Untuk mengikuti kelas ini, terdapat tools yang harus kita siapkan sebelumnya,
yaitu Text Editors dan Browser.
Text Editors
Dalam mengembangkan sebuah website, tentu kita akan banyak menuliskan

sebuah kode HTML, CSS maupun JavaScript. Maka dari itu, langkah awal
yang harus kita siapkan adalah sebuah text editor. Beberapa sistem operasi
sebenarnya sudah menyediakan text editor usungannya sendiri. Contohnya
Windows memiliki Notepad, Linux memiliki Text Editors dan Macintosh
memiliki TextEdit. Ketiga aplikasi tersebut bisa kita gunakan untuk belajar
membuat sebuah website, meskipun masih banyak alternatif text
editor lainnya selama masih dapat menyimpan sebuah plain text dengan
format .html.
Perlu kita perhatikan bahwa kode yang kita tuliskan merupakan sebuah plain
text. Sehingga pastikan kita gunakan text editor yang tepat. Jangan pernah
kita gunakan Microsoft Word untuk menuliskan sebuah kode, karena
aplikasi tersebut menampilkan teks yang telah diformat atau biasa disebut
dengan rich text.
Selain text editors usungan sistem operasi yang kita gunakan, berikut tiga text
editor lainnya yang bisa kita gunakan untuk membuat sebuah website.
Visual Studio Code

Visual Studio Editor merupakan sebuah text editor yang dikembangkan oleh
Microsoft. Dalam text editor ini terdapat fitur debugging, Git control, syntax
highlighting, code completion, snippets dan code refactoring. Visual Studio
Code tersedia untuk sistem operasi Windows, Mac maupun Linux, dan
tentunya text editor ini bisa kita gunakan secara gratis. Untuk mengunduhnya,
silakan kunjungi website berikut: https://code.visualstudio.com/
Atom Editor
Atom merupakan text editor gratis dan juga open source untuk Windows,

Linux dan MacOS. Sama seperti Visual Studio Editor, kedua text editor ini
merupakan editor yang populer digunakan oleh web developer. Untuk
mengunduhnya, silakan kunjungi website berikut: https://atom.io/
Emacs
Editor ini mungkin tidak secanggih opsi-opsi sebelumnya dalam menuliskan

kode HTML, CSS dan JavaScript, namun jika kalian tertarik belajar melalui
proses tanpa fitur yang mempermudah kita dalam menuliskan sebuah kode
tersebut, maka ini merupakan text editor yang cocok untuk dicoba. Emacs
memiliki fitur yang tidak disangka-sangka untuk sebuah text editor,
seperti news reader, kalkulator dan fitur untuk enkripsi/dekripsi file. Emacs
tersedia untuk Windows, Macs maupun Linux secara gratis. Untuk
mencobanya, kalian bisa mengunjungi halaman website
berikut: https://www.gnu.org/software/emacs/
Browser
Seperti yang sudah kita ketahui, untuk mengakses website membutuhkan

sebuah browser. Tentu untuk mengembangkan website juga diperlukan
sebuah browser untuk melihat seperti apa tampak website yang sedang kita
kembangkan. Kita bisa menggunakan browser apa pun untuk mengunjungi
sebuah website, tetapi hasil yang ditampilkan mungkin dapat berbeda pada
setiap browser. Walaupun tampilan pada setiap browser berbeda, pada kelas
ini kalian tidak perlu mencobanya satu per satu untuk melihatnya pada
masing - masing browser. Kami sarankan Anda untuk menggunakan browser
yang populer yaitu Google Chrome atau Mozilla Firefox.
Seperti text editor, sebenarnya sistem operasi sudah mempunyai browser

usungannya masing-masing, misal Microsoft Edge di Windows dan Safari di
MacOS. Akan tetapi kedua browser tersebut tidak memiliki fitur Developer
tools atau Dev Tools seperti yang dimiliki oleh Google Chrome dan Mozilla
Firefox.
Developer Tools atau Dev Tools merupakan suatu alat yang dapat digunakan
untuk melakukan debugging pada sebuah website. Dev Tools ini merupakan
tools yang andal dalam mencari suatu bugs dan memperbaikinya. Bahkan
kita dapat mensimulasikan tampilan website pada sebuah layar smartphone,
sehingga tak perlu repot-repot pakai smartphone untuk melihat
responsibilitas website yang kita kembangkan.
Untuk kalian yang sudah menginstal Google Chrome atau Mozilla Firefox,
artinya kalian siap untuk menuju modul selanjutnya. Jika belum, kalian bisa
mengunduhnya pada website berikut:
Halaman unduh Mozilla Firefox.

Halaman unduh Google Chrome.
Introduction HTML
Seperti yang sudah kita ketahui, HTML berperan sebagai struktur untuk
membangun sebuah halaman website. Dan pada modul ini kita akan mencoba
menuliskan struktur HTML, siap? Pada akhir modul, kita akan membuat halaman
website seperti gambar berikut:
Contoh sebuah halaman pada Website.
Membuat berkas HTML Pertama

Untuk langkah awal tentunya kita membuat sebuah berkas HTML. Kita akan
mencoba membuatnya dari nol dengan menggunakan alat yang ada.
Gunakanlah text editor usungan sistem operasi masing-masing agar kita tahu
bagaimana pengalaman membuat dan menuliskan sebuah kode tanpa
bantuan code completion.
Windows
Langkah awal dalam membuat berkas HTML adalah kita buka Notepad pada

komputer kita. Untuk membukanya bisa melalui beberapa cara, salah satunya
melalui fitur Run yang terdapat pada Windows.
Silakan gunakan kombinasi tombol Windows + R untuk membuka

jendela Run, kemudian tuliskan “notepad”
Kemudian pilih tombol OK, lalu notepad akan muncul pada layar
komputer/laptop kita.
Selanjutnya kita salin dan tempel teks berikut pada notepad.
. Bandung
. Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu
kota provinsi tersebut.
.
.
. Sejarah
. Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya
sungai Citarum oleh lava Gunung Tangkuban Parahu yang lalu membentuk telaga.
Legenda yang diceritakan oleh orang-orang tua di Bandung mengatakan bahwa
nama Bandung diambil dari sebuah kendaraan air yang terdiri dari dua perahu
yang diikat berdampingan yang disebut perahu bandung yang digunakan oleh
Bupati Bandung, R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam
mencari tempat kedudukan kabupaten yang baru untuk menggantikan ibu kota
yang lama di Dayeuhkolot.
.
.
. Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-
Bandung-an Banda Indung, yang merupakan kalimat sakral dan luhur karena
mengandung nilai ajaran Sunda. Nga-Bandung-an artinya menyaksikan atau
bersaksi. Banda adalah segala sesuatu yang berada di alam hidup yaitu di
bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari banda
adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi
tempat Banda berada.
.
.
. Geografis
. Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi
wilayahnya bagaikan sebuah mangkok raksasa, secara geografis kota ini
terletak di tengah-tengah provinsi Jawa Barat, serta berada pada ketinggian
±768 m di atas permukaan laut, dengan titik tertinggi di berada di sebelah
utara dengan ketinggian 1.050 meter di atas permukaan laut dan sebelah
selatan merupakan kawasan rendah dengan ketinggian 675 meter di atas
permukaan laut.
.
.
. Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai
Citarum beserta anak-anak sungainya yang pada umumnya mengalir ke arah
selatan dan bertemu di Sungai Citarum. Dengan kondisi yang demikian, Bandung
selatan sangat rentan terhadap masalah banjir terutama pada musim hujan.
.
.
. Wisata
. Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan
utama dalam menikmati liburan akhir pekan terutama dari masyarakat yang
berasal dari Jakarta sekitarnya. Selain menjadi kota wisata belanja, kota
Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur
peninggalan Belanda.
.
.
. Farm House Lembang
. Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang
tidak pernah sepi pengunjung. Selain karena letaknya strategis, kawasan ini
juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan dalam
bentuk spot swafoto Instagramable.
.
.
. Observatorium Bosscha
. Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt
Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan Teleskop Surya. Refraktor
Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong bintang. Benda
ini diletakkan pada atap kubah sehingga saat teropong digunakan, atap
tersebut harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siapa
pun, tanpa tiket. Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib
mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan jadwal
hari Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap
hari Sabtu.
Sehingga sekarang notepad tampak seperti gambar di bawah ini:
Simpan perubahan pada notepad dengan melakukan Save (ctrl + s pada

keyboard), kemudian pilih lokasi penyimpanan yang kita inginkan. Pada
contoh di bawah ini, berkas HTML akan disimpan pada alamat C ->
WebDasar.
Lalu di dalam folder WebDasar. Kita simpan berkas dengan
nama index.html, jangan lupa pada bagian Save as type kita pilih “All Files
(*.*)” untuk tipe penyimpanannya. Setelah itu, tekan tombol Save.
Setelah berhasil menyimpan berkas index.html, berkas tersebut dapat kita
lihat pada folder yang sudah kita tentukan tadi.
Selamat! Dengan begitu kita sudah membuat berkas HTML pertama. Silakan
buka berkas HTML tersebut menggunakan suatu browser (dalam contoh ini,
kita menggunakan Google Chrome), maka hasilnya akan nampak seperti ini:
MacOS
Langkah awal dalam membuat berkas html adalah buka aplikasi TextEdit,
lakukan pencarian dengan menuliskan “TextEdit”.
Lalu setelah aplikasi TextEdit terbuka, masuk ke preference untuk melakukan
pengaturan pada TextEdit melalui panel atas seperti gambar berikut ini:
Selanjutnya jendela preferences akan terbuka, pada bagian format pastikan

kita memilih Plain text.
Selanjutnya tutup jendela preferences, lalu kita tentukan lokasi untuk
pembuatan berkas HTML baru, Anda bebas menentukkan lokasi sesuai yang
Anda inginkan, tetapi pada contoh gambar dibawah ini kita menyimpannya
pada [user] -> WebDasar.
Setelah menentukkan lokasinya, lalu pilih tombol New Document yang
terletak di pojok kiri bawah dari jendela finder. Selanjutnya akan muncul
tampilan Text Editor kosong seperti ini:
Silakan salin dan tempel konten berikut pada text editor:
. Bandung
.
.
. Sejarah
.
.
.
.
. Geografis
permukaan laut.
.
.
.
.
. Wisata
.
.
.
.
hari Sabtu.
Sekarang text editor akan tampak seperti ini:

Lalu tekan cmd + s pada keyboard dan berikan berkas dengan
nama index.html, kemudian tekan tombol save.
Jika muncul dialog seperti di bawah ini, kita pilih "Use .html".
Maka jika kita buka finder, di dalam folder yang kita tentukan akan terdapat
berkas index.html.
Linux (Ubuntu)
Langkah awal untuk menuliskan berkas HTML adalah membuka text editor.

Bukalah text editor melalui terminal dengan cara mengetikan keyword “gedit”
kemudian tekan enter.
Jika berhasil, maka aplikasi text editor akan terbuka. Silakan salin konten

berikut secara langsung pada text editor.
. Bandung
.
.
. Sejarah
.
.
.
.
. Geografis
permukaan laut.
.
.
.
.
. Wisata
.
.
.
.
hari Sabtu.
Setelah selesai lakukan save dengan memberikan nama “index.html”.
Pada contoh di bawah ini, lokasi berkas index.html akan disimpan pada
directory home -> dicoding -> WebDasar. Kemudian tekan tombol save.
Tampilan awal konten
Informasi yang tampil, nampak berantakan, bukan? Karena standarnya,

browser akan mengabaikan penulisan spasi yang dituliskan secara berulang,
begitu juga dengan line breaks (garis baru). Untuk menuliskan garis baru
pada HTML, kita harus menggunakan sebuah tag <br> yang akan kita bahas
pada modul 3.
Struktur dasar HTML

Website serupa berkas dokumen yang ada seperti koran, majalah atau buku.
Serupa dalam hal memiliki struktur konten layaknya dokumen sehari-hari yang
kita baca. Pada sebuah majalah terdapat judul, gambar yang ditampilkan dan teks
dalam bentuk paragraf. Terkadang, jika konten tersebut panjang terdapat sub-
judul untuk memisahkannya menjadi beberapa bagian.
Judul dan subjudul pada sebuah dokumen menggambarkan suatu hierarki dari
informasi. Misalnya, judul dengan ukuran besar merupakan judul utama dalam
sebuah konten. Kemudian diikuti dengan judul kecil di bawahnya yang
menjelaskan informasi dengan lebih mendetail lagi.
Berkas HTML dasarnya memiliki struktur yang nampak seperti ini:
. <!DOCTYPE html>
. <html>
. <head>
. <title>Judul Halaman</title>
. </head>
. <body>
. <h1>Heading Utama</h1>
. <p>Sebuah Paragraph.</p>
. </body>
. </html>
Kita dapat melihat bahwa struktur dasar HTML dituliskan dari beberapa elemen.
Pada setiap elemen HTML terdapat dua tag, yaitu pembuka tag <> dan penutup
tag </>. Lihat gambar berikut untuk lebih jelasnya.
Di antara tag pembuka dan penutup sebuah elemen, kita dapat meletakkan
sebuah konten. Konten dapat berupa teks ataupun sebuah elemen HTML lain.
Contohnya, elemen <html> memiliki konten yaitu elemen <head> dan juga
elemen <body>. Lalu, elemen <head> memiliki konten berupa elemen <title> yang
di dalamnya memiliki konten berupa teks dari judul halaman yang ditampilkan.
Begitu pula dengan elemen lainnya, sehingga hirarki elemen HTML nampak
seperti ini.
Elemen <html>
Hirarki elemen teratas pada berkas HTML adalah elemen HTML-nya itu sendiri.
Elemen ini digunakan untuk memberitahu kepada browser bahwa ini merupakan
sebuah berkas HTML sekaligus menjadi root dari sebuah berkasnya itu. Seluruh
elemen lainnya tentunya dituliskan pada konten elemen ini.
Elemen <head>
Elemen <head> pada berkas HTML berfungsi sebagai tempat disimpannya
informasi dari dokumen HTML. Informasi dapat berupa elemen meta, style atau
link. Dan juga pada elemen ini judul dari dokumen HTML didefinisikan dengan
menggunakan elemen <title>. Berikut contoh elemen yang berada pada konten
head:
 <title>
 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>
Pada HTML versi 4.01, elemen <head> wajib ada dalam sebuah berkas HTML.
Berikut contoh penulisan sebuah elemen <head> beserta contoh konten di
dalamnya:
. <head>
. <meta charset="utf-8">
. <title>Judul halaman</title>
. <style> Style </style>
. </head>
Tetapi sejak HTML5, penggunaan <head> dapat dihilangkan. Sehingga struktur

dasar berkas HTML menjadi seperti ini:
. <!DOCTYPE html>
. <html>
. <meta charset="utf-8">
. <title>Judul halaman</title>
. <style> Style </style>
. <body>
. <h1>Heading Utama</h1>
. <p>Sebuah Paragraph.</p>
. </body>
. </html>
Elemen <body>
Seluruh konten yang terdapat pada elemen ini akan ditampilkan pada halaman
website. Maka dari itu, elemen ini digunakan untuk menampung seluruh konten
atau elemen yang ditampilkan ke dalam jendela browser. Silakan coba tuliskan
kode berikut, simpan dalam format HTML dan jalankan pada browser:
. <html>
. <head>
. <title>Ini merupakan judul dari dokumen HTML</title>
. </head>
. <body>
. <h1>header yang diletakan di dalam elemen body</h1>
. <p>Ini merupakan sebuah paragraph yang juga diletakan pada sebuah konten
body, sehingga konten ini dapat dilihat oleh pengguna pada jendela browser.</p>
. </body>
. </html>
Maka seluruh konten yang dituliskan di dalam elemen <body> akan nampak pada

browser.
Kecuali jika kita ingin menuliskan sebuah notes pada berkas HTML, kita perlu
gunakan commenting tag (). Semua yang dituliskan di antara tag
komentar tidak akan memberikan pengaruh apa pun, termasuk pada tampilan di
jendela browser. Pada HTML, tag komentar dituliskan seperti ini:
. 

. 
Sebuah komentar berguna untuk memberikan label dan mengorganisir sebuah

dokumen yang panjang, terlebih ketika kita bekerja secara tim.
Identifikasi Elemen pada Halaman Website

Setelah mengetahui struktur dasar HTML, mari kita coba terapkan pada
berkas HTML yang sudah kita buat pada langkah awal. Kita buka kembali
berkas HTML tersebut dan berikan elemen dasar pada sebuah berkas HTML.
. <!DOCTYPE html>
. <html>
. <head>
. </head>
. <body>
.
. </body>
. </html>
. Bandung
.
.
. Sejarah
.
.
.
.
. Geografis
permukaan laut.
.
.
.
.
. Wisata
.
.
.
.
hari Sabtu.
Masukkan seluruh konten pada elemen <body> agar nampak pada browser.
. <!DOCTYPE html>
. <html>
. <head>
. </head>
. <body>
. Bandung
.
.
. Sejarah
.
.
.
.
. Geografis
permukaan laut.
.
.
.
.
. Wisata
.
.
.
.
hari Sabtu.
.
. <body>
. <html>
Dalam mengidentifikasi konten, carilah konten yang paling penting dan

bungkus konten tersebut dengan elemen <h1>. Jangan khawatir apabila
tampilan tidak sesuai dengan yang kita inginkan, karena nanti kalian akan
mengaturnya ketika sudah mempelajari style sheet.
Setelah itu, kita berikan elemen heading dan elemen paragraf sesuai hasil
identifikasi, sehingga kode nampak seperti ini:
. <!DOCTYPE html>
. <html>
. <head>
. </head>
. <body>
.
. <h1>Bandung</h1>
. <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu
kota provinsi tersebut.</p>
.
. <h2>Sejarah</h2>
. <p>Kata Bandung berasal dari kata bendung atau bendungan karena
terbendungnya sungai Citarum oleh lava Gunung Tangkuban Parahu yang lalu
membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di
. Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang
terdiri dari dua perahu yang diikat berdampingan yang disebut perahu bandung
yang digunakan oleh Bupati Bandung, R.A. Wiranatakusumah II, untuk melayari
Ci Tarum dalam mencari tempat kedudukan kabupaten yang baru untuk
. menggantikan ibu kota yang lama di Dayeuhkolot. </p>
.
. <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-
tempat Banda berada.</p>
.
. <h2>Geografis</h2>
. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi
terletak di tengah-tengah provinsi Jawa Barat, serta berada pada
. ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada
di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut dan
sebelah selatan merupakan kawasan rendah dengan ketinggian 675 meter di atas
permukaan laut.</p>
.
. <p>Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan
Sungai Citarum beserta anak-anak sungainya yang pada umumnya mengalir ke
arah selatan dan bertemu di Sungai Citarum. Dengan kondisi yang
. demikian, Bandung selatan sangat rentan terhadap masalah banjir terutama
pada musim hujan.</p>
.
. <h2>Wisata</h2>
. <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan
berasal dari Jakarta sekitarnya. Selain menjadi kota wisata belanja,
. kota Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur
peninggalan Belanda.</p>
.
. <h3>Farm House Lembang</h3>
. <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata
yang tidak pernah sepi pengunjung. Selain karena letaknya strategis, kawasan
ini juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan dalam
bentuk spot swafoto Instagramable.</p>
.
. <h3>Observatorium Bosscha</h3>
. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt
tersebut harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siapapun,
tanpa tiket. Namun, bagi yang ingin
. menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau
lembaga pendidikan, diberikan jadwal hari Selasa sampai Jumat. Sementara
itu, kunjungan individu dibuka setiap hari Sabtu.</p>
.
. </body>
. </html>
Coba save berkas HTML tersebut, kemudian coba buka pada browser.

Selamat, kita sudah berhasil membuat sebuah struktur HTML dasar. Pada
modul selanjutnya, kalian akan lebih dalam mengetahui tentang elemen yang
ada pada HTML.
Berikut catatan penting yang sudah kita pelajari sejauh ini:
 Website : Halaman yang menampilkan informasi melalui teks atau

gambar. Website dapat diakses melalui internet dengan menggunakan
browser.
 Browser : Sebuah perangkat lunak yang dapat menerjemahkan berkas
HTML, CSS dan Javascript yang di dapat dari server untuk ditampilkan
dalam bentuk halaman website.
 HTTP Server : Server berperan pada sebuah website sebagai sebuah
software yang dapat menerima transaksi dari HyperText Transfer
Protocol.
 DNS Server : Server yang dapat mengubah/mengarahkan website
melalui sebuah nama domain.
 Client : Perangkat yang meminta (request) suatu layanan tertentu ke
suatu server.
 HTML : Salah satu markup language, yang digunakan untuk membuat
struktur dan menampilkan content pada World Wide Web (Website).
 CSS : Bahasa yang digunakan untuk mengatur dan mempercantik
tampilan pada website.
 JavaScript : Bahasa pemrograman yang digunakan untuk membantu
website menampilkan informasi secara dinamis.
 Text Editor : Sebuah perangkat lunak yang digunakan untuk mengelola
plain text. Kode HTML, CSS dan Javascript dituliskan menggunakan
perangkat ini.
 Plain text : Teks yang tidak terformat. Format teks yang digunakan
dalam menuliskan berkas HTML, CSS dan Javascript.
 Rich text : Teks terformat. Format teks yang digunakan ketika kita
menuliskan dengan menggunakan Microsoft Word atau teks editor
berbasis WYSIWYG [What You See Is What You Get].
 Element : Sebuah komponen pada HTML yang ditandai dengan tag
pembuka dan penutup.
More About HTML

Pada modul sebelumnya, kita sudah menyiapkan sebuah konten,
menambahkan elemen dasar sebuah berkas HTML (html, head, title dan
body) dan kita mengidentifikasi sebagian konten. Pada materi ini, kita akan
berkenalan lebih dalam mengenai elemen yang ada pada HTML, sehingga
kita dapat memilih elemen yang sesuai dalam menampilkan sebuah konten
pada website yang akan kita bangun nantinya.
Dalam modul ini kita akan mempelajari bagaimana cara menambahkan

elemen seperti paragraf, heading, gambar, list, format teks, hingga
menerapkan struktur layout dasar menggunakan elemen dengan pendekatan
semantic meaning.
Pada akhir modul ini kita akan membuat halaman website yang menerapkan
gambar, list serta elemen lainnya.
Mari kita mulai!
Atribut HTML
Pada modul sebelumnya kita sudah mengenal berbagai macam 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:
. <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 eksplore 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:
. <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
accesskey Menentukan tombol shortcut untuk mengaktifkan/memfokuskan pada sebuah eleme

class Menentukan satu atau lebih classname untuk sebuah elemen.
contenteditable Menentukan konten dari elemen merupakan konten yang dapat diubah atau tidak
data-* Digunakan untuk menyimpan sebuah data pribadi khusus ke halaman atau aplikasi.
dir Menentukan arah teks untuk konten pada suatu elemen.
draggable Menentukan apakah suatu elemen dapat di-drag atau tidak.
dropzone Menentukan apakah data yang di-drag adalah data yang disalin, dipindahkan, atau d
saat dijatuhkan.
hidden Menentukan apakah suatu elemen ditampilkan atau tidak pada browser.
id Menetapkan id pada elemen.
lang Menentukan bahasa pada konten elemen.
spellcheck Menentukan apakah elemen harus diperiksa ejaannya dan tata bahasanya atau 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:

terbendungnya sungai Citarum
. oleh lava
. Gunung Tangkuban Parahu yang lalu membentuk telaga...</p>
.
.
. <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-
Bandung-an Banda Indung, yang
. merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda.
Nga-Bandung-an artinya
. 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.
“Pastikan kita selalu gunakan elemen (tags) dalam

seluruh teks yang ada pada dokumen. Teks yang berada pada
dokumen HTML tanpa tags disebut “anonymous text” dan
ini dapat menyebabkan dokumen HTML menjadi tidak valid.”
Heading
Pada 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 pada 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.
. <h1>Bandung</h1>
.
wilayahnya bagaikan sebuah mangkok raksasa</p>
.
. <h2>Wisata</h2>
. <p>Kota Bandung telah menjadi tujuan utama dalam menikmati liburan akhir
pekan terutama dari masyarakat yang berasal
. dari Jakarta sekitarnya.</p>
.
. <h4>Lokasi</h4>
. <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata
yang tidak pernah sepi pengunjung.</p>
.
. <h4>Kondisi</h4>
. <p>Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa
wisata khas Eropa. Semua itu diterapkan dalam
. bentuk
. spot swafoto Instagramable.</p>
.
. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt
Bimasakti, Refraktor Bamberg,
. 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:

1. Unordered lists : daftar yang ditampilkan tidak memiliki urutan.
2. Ordered lists : daftar yang ditampilkan secara terurut.
3.
Description lists : daftar yang terbuat dari beberapa istilah diikuti

dengan deskripsi dari istilah tersebut.
4.
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:
. <ul>
. <li>Item 1</li>
. <li>Item 2</li>
. <li>Item 3</li>
. <li>Item 4</li>
. </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.
. <ul>
. <li><h1>Sebuah Heading sebagai item list</h1></li>
. <li><h2>Sebuah Heading level 2 sebagai item list</h2></li>
. <li><p>Sebuah paragraf sebagai item list</p></li>
. </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.
. <ul>
. <li>List item 1</li>
. <li>List item 3
. <ul>
. <li>List item 3.1</li>
. </ul>
. </li>
. </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>.
. <ol>
. <li>Langkah pertama</li>
. <li>Langkah kedua</li>
. <li>Langkah ketiga</li>
. <li>Langkah selanjutnya</li>
. </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.
. <ol type="I">
. </ol>
.
. <ol type="A">
. </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>.
. <ol start="7">
. <li>Langkah ketujuh</li>
. <li>Langkah kedelapan</li>
. <li>Langkah kesembilan</li>
. </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> maka 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 modul 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 berikut di bawah dari elemen paragraf pertama pada berkas
HTML.
. …………..
. <body>
. <h1>Bandung</h1>
. <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota
provinsi tersebut.</p>
. <ul>
. <li>Sejarah</li>
. <li>Geografis</li>
. <li>Wisata</li>
. </ul>
. <h2>Sejarah</h2>
. ……...
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:
. <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.
Dan yang kedua 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.
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.
. <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.
. 

. <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.
. 

. <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.
<body>
……
<h2>Sejarah</h2>
<img src="assets/image/history.jpg" alt="sejarah">
…….
<h2>Geografis</h2>
<img src="assets/image/geografis.jpg" alt="geografis">
…….
<h2>Wisata</h2>
…….
<h3>Farm House Lembang</h3>
<img src="assets/image/farm-house.jpg" alt="farm house">
…….
<h3>Observatorium Bosscha</h3>
<img src="assets/image/bosscha.jpg" alt="bosscha">
…….
</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 <blockqoute>, <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.
. <blockquote>
. <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>
. </blockquote>
Berikut tampilan standar ketika kita 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).
. <blockquote cite="https://id.wikipedia.org/wiki/Situs_web">
. <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>
. </blockquote>
Preformatted text
Pada 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:
. <pre>
. SAJAK PUTIH
.
. Bersandar pada tari warna pelangi
. Kau depanku bertudung sutra senja
. Di hitam matamu kembang mawar dan melati
. Harum rambutmu mengalun bergelut senda
.
. Sepi menyanyi, malam dalam mendoa tiba
. Meriak muka air kolam jiwa
. Dan dalam dadaku memerdu lagu
. Menarik menari seluruh aku
.
. Hidup dari hidupku, pintu terbuka
. Selama matamu bagiku menengadah
. Selama kau darah mengalir dari luka
. Antara kita Mati datang tidak membelah...
.
. Karya : Chairil Anwar
. </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.
. <p>Dicoding adalah sebuah perusahaan startup yang bertujuan mengembangkan

ekosistem developer di Indonesia.
. Berdiri sejak 5 Januari 2015, Dicoding memiliki platform pembelajaran
elektronik di laman Dicoding.com.</p>
. <figure>
. <img src="https://i.imgur.com/cs2BJzw.jpg" alt="dicoding" width="200px">
. <figcaption>Dicoding</figcaption>
. </figure>
. <p>Materi perdana yang menjadi magnet dari awal berdirinya Dicoding hingga kini
adalah kelas Menjadi Android Developer
. Expert. Kelas ini dikembangkan oleh Google Developer Expert in Android, Sidiq
Permana dan Head of Dicoding Academy,
. Ahmad Imaduddin. Seperti halnya kelas Picodiploma lain, modul online-nya juga
hadir dalam bentuk buku berjudul sama
. yang telah mendapatkan ijin dan ISBN.</p>
Contoh lainnya, figure ini dapat kita gunakan untuk me-markup sebuah konten
puisi.
. <figure>
. <pre>
. SAJAK PUTIH
.
. Bersandar pada tari warna pelangi
. Kau depanku bertudung sutra senja
. Di hitam matamu kembang mawar dan melati
. Harum rambutmu mengalun bergelut senda
.
. Sepi menyanyi, malam dalam mendoa tiba
. Meriak muka air kolam jiwa
. Dan dalam dadaku memerdu lagu
. Menarik menari seluruh aku
.
. Hidup dari hidupku, pintu terbuka
. Selama matamu bagiku menengadah
. Selama kau darah mengalir dari luka
. Antara kita Mati datang tidak membelah...
. </pre>
. <figcaption>Sajak Putih oleh Charil Anwar</figcaption>
. </figure>
Inline Formatting Text

Kita sudah belajar mengidentifikasi penggunaan elemen pada konten yang
major (besar) dengan menerapkan semantic meaning 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.
. <p>Hubungi kami di</p>

. <ul>
. <li><a href="https://example.com">Website</a></li>
. <li><a href="mailto:info@example.com">Email</a></li>
. <li><a href="tel:+62123456">Telepon</a></li>
. <li><a href="#address">Alamat</a></li>
. </ul>
Selain atribut href, terdapat beberapa khusus yang dapat digunakan pada

elemen ini, antara lain:
Atribut Nilai Deskripsi
download filename Menginstruksikan browser untuk mengunduh pada

ditetapkan daripada mengarahkannya.
href URL Menetapkan target yang akan diarahkan/unduh ket

pengguna menekan hyperlink.
hreflang language_code Menetapkan bahasa dari dokumen target.
ping list_of_URLs Menetapkan URL yang akan diberitahu dengan me

post request ping pada body oleh browser (berjalan
belakang layar) ketika target URL pada hyperlink
Biasanya atribut ini digunakan untuk pelacakan.
no-referrer,
referrerpolicy Menetapkan referensi untuk dikirim pada target.
no-referrer-when-downgrade,
origin,
origin-when-cross-origin,
unsafe-url
alternate,
rel Menetapkan hubungan antara halaman yang ditam
dengan target.
author,
bookmark,
external,
help,
license,
next,
nofollow,
noreferrer,
noopener,
prev,
search,
tag
_blank,
target Menetapkan lokasi ketika membuka target contohn
_parent, sebuah tab, window atau pada tab itu sendiri.
_self,
_top
media media_type Menetapkan tipe media yang digunakan pada targe
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.
. <p><em>Oding</em> adalah seorang pelajar</p>

. <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.
. <p>Kesehatan merupakan hal yang penting, jaga pola makan yang teratur dan
<strong>jangan sampai makan tengah
. 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 ini berbeda dengan <blockquote>, elemen ini digunakan untuk
kutipan pendek yang terletak di dalam baris (inline).
. <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.
. <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:
. <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.
. <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>
.
. <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.
. <p>Ini adalah periode perang saudara. Pesawat ruang angkasa pemberontak,

menyerang dari pangkalan tersembunyi, telah
. memenangkan kemenangan pertama mereka melawan Kekaisaran Galactic yang
jahat. Selama pertempuran,
. <mark>mata-mata
. Pemberontak berhasil mencuri rencana rahasia
. </mark>
. ke senjata pamungkas Kekaisaran, STAR DEATH, stasiun ruang angkasa
. berlapis baja dengan kekuatan yang cukup untuk menghancurkan seluruh
planet.
. </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.
. <p>
. Dicoding Space,<br>
. Jln. Batik Kumeli No. 50.<br>
. Bandung.<br>
. 40123
. </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 pada tiap item pada list.
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Geografis</a></li>
<li><a href="#">Wisata</a></li>
</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, atau bisa 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.
<body>
.......
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Geografis</a></li>
<li><a href="#">Wisata</a></li>
</ul>
<h2 id="sejarah">Sejarah</h2>
.......
<h2 id="geografis">Geografis</h2>
.......
<h2 id="wisata">Wisata</h2>
.......
</body>
Kemudian tuliskan juga id elemen target setelah tanda pagar (#) pada tiap elemen
anchor yang terdapat pada item list.
<body>
.......
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
<h2 id="sejarah">Sejarah</h2>
.......
<h2 id="geografis">Geografis</h2>
.......
<h2 id="wisata">Wisata</h2>
.......
</body>
Setelah menuliskan id elemen pada target anchor, maka hypertext di navigasi

sudah dapat digunakan.
Mengorganisasikan Halaman Konten

Seperti yang sudah disebutkan pada modul sebelumnya, sebuah website memiliki
hierarki konten yang sama seperti dokumen sehari-hari yang kita baca, majalah
dan koran contohnya. Maka hierarki pada sebuah website merupakan hal yang
penting, tentu 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 meaning). 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.
Mari kita bahas satu per satu elemennya.
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.
. <header>
. <h1>Bandung</h1>
. <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu
kota provinsi tersebut.</p>
. <nav>
. <ul>
. <li><a href="#sejarah">Sejarah</a></li>
. <li><a href="#geografis">Geografis</a></li>
. <li><a href="#wisata">Wisata</a></li>
. </ul>
. </nav>
. </header>
Dan elemen <footer> digunakan sebagai informasi hak cipta.
. <article>
. <header>
. <h1>Judul Artikel</h1>
. <h2>Oleh: Dicoding Indonesia</h2>
. </header>
. <p>....... Konten artikel dimulai dari sini ......</p>
. <footer>
. <p>Bagikan artikel ini melalui</p>
. <ul>
. <li>Twitter</li>
. <li>Facebook</li>
. <li>......</li>
. </ul>
. </footer>
. </article>
Perlu kita ketahui bahwa elemen <header> dan <footer> tidak boleh ditulis di

dalam elemen <header> dan <footer> lainnya (bertumpuk/nested).
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>.
. <nav>
. <ul>
. </ul>
. </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 content pada

sebuah halaman, artinya konten utuh yang tidak terkait dengan konten lain,
bisa saja sebuah 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.
. <article>
. <h2>Sejarah</h2>
. <img src="img/history.jpg">
terbendungnya sungai Citarum oleh lava
. Gunung Tangkuban Parahu yang lalu membentuk telaga...</p>
. </article>
. <article>
. <img src="img/geografis.jpg">
wilayahnya bagaikan sebuah mangkok
. raksasa,[9] secara geografis kota ini terletak di tengah-tengah
provinsi Jawa Barat..</p>
. </article>
. <article>
. <h2>Wisata</h2>
. <img src="img/farm-house.jpg">
. <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi
tujuan utama dalam menikmati liburan
. akhir pekan terutama dari masyarakat yang berasal dari Jakarta
sekitarnya...</p>
. </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.
. <main>
. <article>
. ......
. </article>
. <aside>
. <article>
. <header>
. <h2>Kota Bandung</h2>
. <p>Kota Kembang Paris van Java</p>
. <figure>
. <img src="img/bandung-badge.png">
. <figcaption>Lambang</figcaption>
. </figure>
. </header>
. </article>
. </aside>
. </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.
. <article>
. <section>
. <h2 >Wisata</h2>
tujuan utama dalam menikmati liburan
. akhir
. pekan terutama dari masyarakat yang berasal dari Jakarta
sekitarnya. Selain menjadi kota wisata belanja,
. kota Bandung juga dikenal dengan sejumlah besar bangunan lama
berarsitektur peninggalan Belanda.</p>
. </section>
. <section>
. <img src="img/farm-house.jpg">
. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk
morfologi wilayahnya bagaikan sebuah mangkok
provinsi Jawa Barat, serta berada pada
. ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi
di berada di sebelah utara dengan
. ketinggian 1.050 meter di atas permukaan laut dan sebelah selatan
merupakan kawasan rendah dengan
. ketinggian 675 meter di atas permukaan laut.</p>
. </section>
. <section>
. <img src="img/bosscha.jpg">
. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss,
Schmidt Bimasakti, Refraktor Bamberg,
. Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah
jenis teleskop terbesar untuk
. meneropong bintang. Benda ini diletakkan pada atap kubah sehingga
saat teropong digunakan, atap tersebut
. harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siapa
pun, tanpa tiket. Namun, bagi yang ingin
. menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk
instansi atau lembaga pendidikan, diberikan
. jadwal hari Selasa sampai Jumat. Sementara itu, kunjungan
individu dibuka setiap hari Sabtu.
. </p>
. </section>
. </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.
. <!DOCTYPE html>
. <html>
.
. <head>
. <title>Div Element</title>
. <style>
. .shadowbox {
. width: 15em;
. border: 1px solid #333;
. box-shadow: 8px 8px 5px #444;
. padding: 8px 12px;
. background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
. }
. </style>
. </head>
.
. <body>
. <div class="shadowbox">
. <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.
. </p>
. </div>
. </body>
.
. </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”.
. <ul>
. <li>Agil: <span class="phone">08123xxx</span></li>
. <li>Widy: <span class="phone">08222xxx</span></li>
. <li>Gilang: <span class="phone">08333xxx</span></li>
. </ul>
Dengan menggunakan elemen <span>, kita dapat menentukan

sebuah styling pada teks tersebut.
. <style>
. .phone {
. font-weight: bold;
. }
. </style>
.
. <ul>
. <li>Agil: <span class="phone">08123xxx</span></li>
. <li>Widy: <span class="phone">08222xxx</span></li>
. <li>Gilang: <span class="phone">08333xxx</span></li>
. </ul>
Jika kita coba lihat pada browser, akan tampak seperti ini:
Contoh lainnya, kita juga bisa gunakan elemen <span> dalam sebuah paragraf.
. <style>
. .bahan {
. color: red;
. }
. </style>
.
. <p>Untuk membuat sebuah bakso kita membutuhkan <span class="bahan">daging
sapi</span>, <span
. class="bahan">tepung tapioka</span>, <span class="bahan">bawang
merah</span> dan <span class="bahan">bawang
. 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:
Mengorganisasikan Konten pada Halaman Profil

Kita sudah mengenal beberapa elemen yang digunakan untuk
mengorganisasikan halaman, seperti <header>, <footer>, <article>, dan yang
lainnya. Dan juga kita sudah mengenal generic elemen yang digunakan untuk
mengelompokkan elemen secara umum. Sekarang saatnya kita
mengorganisasikan pada halaman profil yang sudah kita buat sebelumnya.
Sebelum mengorganisasikan konten, mari kita tambahkan sebuah konten

untuk diterapkan pada elemen <aside> nantinya. Unduh terlebih dahulu aset
gambar yang akan digunakan pada tautan
berikut: https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Bandung
_coa.png/279px-Bandung_coa.png
Simpanlah gambar tersebut pada folder assets -> images bersama dengan

empat gambar yang lain dan beri nama bandung-badge.png.
Kemudian tuliskan konten berikut di dalam elemen <body> (tuliskan tepat
sebelum penutup tag </body>).
<body>
.......
<h2>Kota Bandung</h2>
<p>Kota Kembang Paris van Java</p>
<figure>
<img src="assets/image/bandung-badge.png">
<figcaption>Lambang</figcaption>
</figure>
</body>
Tuliskan juga konten copyright berikut tepat setelah tag penutup </figure>.
<body>
.......
</figure>
<p>Belajar Dasar Pemrograman Web © 2019, Dicoding Academy</p>
</body>
Setelah menambahkan beberapa konten tersebut, mari saatnya kita

organisasikan konten-konten yang ada agar dapat tercipta struktur halaman
yang baik.
Menetapkan Elemen <header>, <main> dan <footer>.
Mari kita buat konten yang berada pada body menjadi tiga bagian besar yaitu
heading, main dan footer. Kelompokkan konten judul besar dan navigasi
menggunakan elemen <header>.
. <body>
. <header>
. <h1>Bandung</h1>
. <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus
. <ul>
. </ul>
. </header>
. .......
. </body>
Sebelumnya, kita mengetahui bahwa elemen list yang dibuat nantinya akan
dijadikan sebuah navigasi, maka di dalam elemen header ini, kita tambahkan
elemen <nav> untuk membungkus elemen list.
. <body>
. <header>
. <h1>Bandung</h1>
. <nav>
. <ul>
. </ul>
. </nav>
. </header>
. .....
. </body>
Kemudian pada konten copyright (konten paragraf paling akhir pada sebuah
body) yang kita tambahkan sebelumnya, masukkan konten tersebut ke dalam
elemen <footer>.
. <body>
. ....
.
. <footer>
. <p>Belajar Dasar Pemrograman Web © 2019, Dicoding Academy</p>
. </footer>
. </body>
Terakhir, kelompokkan seluruh konten yang terdapat di antara

elemen <header> dan elemen <footer> dengan menggunakan
elemen <main>.
. <body>
. <header>
. ......
. </header>
. <main>
. <h2 id="sejarah">Sejarah</h2>
. <img src="assets/image/history.jpg" alt="sejarah">
terbendungnya sungai Citarum oleh lava Gunung
. Tangkuban Parahu yang lalu membentuk telaga. Legenda yang
diceritakan oleh orang-orang tua di
. Bandung mengatakan bahwa nama Bandung diambil dari sebuah
kendaraan air yang terdiri dari dua perahu yang
. diikat
. berdampingan yang disebut perahu bandung yang digunakan oleh
Bupati Bandung, R.A. Wiranatakusumah II, untuk
. melayari Ci Tarum dalam mencari tempat kedudukan kabupaten yang
baru untuk
. menggantikan ibu kota yang lama di Dayeuhkolot. </p>
.
. <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat
Nga-Bandung-an Banda Indung, yang
. merupakan
. kalimat sakral dan luhur karena mengandung nilai ajaran Sunda.
Nga-Bandung-an artinya menyaksikan atau
. bersaksi.
. Banda adalah segala sesuatu yang berada di alam hidup yaitu di
bumi dan atmosfer, baik makhluk hidup maupun
. benda mati. Sinonim dari banda adalah harta. Indung berarti Ibu
atau Bumi, disebut juga sebagai Ibu Pertiwi
. tempat Banda berada.</p>
.
. <h2 id="geografis">Geografis</h2>
. <img src="assets/image/geografis.jpg" alt="geografis">
morfologi wilayahnya bagaikan sebuah mangkok
provinsi Jawa Barat, serta berada pada
. ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi
di berada di sebelah utara dengan
. ketinggian
. 1.050 meter di atas permukaan laut dan sebelah selatan merupakan
kawasan rendah dengan ketinggian 675 meter
. di
. atas permukaan laut.</p>
.
. <p>Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung
dan Sungai Citarum beserta anak-anak
. sungainya
. yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai
Citarum. Dengan kondisi yang
. demikian, Bandung selatan sangat rentan terhadap masalah banjir
terutama pada musim hujan.</p>
.
. <h2 id="wisata">Wisata</h2>
tujuan utama dalam menikmati liburan akhir
. pekan
. terutama dari masyarakat yang berasal dari Jakarta sekitarnya.
Selain menjadi kota wisata belanja,
. kota Bandung juga dikenal dengan sejumlah besar bangunan lama
.
. <img src="assets/image/farm-house.jpg" alt="farm house">
. <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek
wisata yang tidak pernah sepi pengunjung.
. Selain
. karena letaknya strategis, kawasan ini juga menghadirkan nuansa
wisata khas Eropa. Semua itu diterapkan
. dalam
. bentuk spot swafoto Instagramable.</p>
.
. <img src="assets/image/bosscha.jpg" alt="bosscha">
. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss,
Schmidt Bimasakti, Refraktor Bamberg,
. Cassegrain
. GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis
teleskop terbesar untuk meneropong bintang.
. Benda
. ini diletakkan pada atap kubah sehingga saat teropong digunakan,
atap tersebut harus dibuka. Observatorium
. Bosscha boleh dikunjungi oleh siapapun, tanpa tiket. Namun, bagi
yang ingin
. menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk
instansi atau lembaga pendidikan, diberikan
. jadwal
. hari Selasa sampai Jumat. Sementara itu, kunjungan individu
dibuka setiap hari Sabtu.</p>
.
. <figure>
. <img src="assets/image/badung-badge.png">
. </figure>
. </main>
. <footer>
. ........
. </footer>
. </body>
Maka struktur body pada HTML menjadi seperti ini:

Menggunakan <div>, <aside>, <article>, dan <section> pada
Konten
Kita sudah membagi konten pada elemen <body> secara besar menjadi tiga

bagian. Tetapi belum sampai disitu, pada salah satu bagiannya yaitu pada
elemen <main>, masih terdapat konten yang dapat kita kelompokan. Di sini
kita akan menerapkan generic elemen seperti <div> dan semantic elemen
lainnya seperti <aside>, <article> dan <section> dalam mengelompokkan
elemennya.
Dimulai dari hierarki teratas, dalam elemen <main> kita bagi konten menjadi

dua bagian, yang pertama sebuah konten utama yang dikelompokan
menggunakan <div> dan konten samping yang dikelompokkan
menggunakan <aside>.
. <main>
. <div>
terbendungnya sungai Citarum oleh lava Gunung Tangkuban Parahu yang lalu
membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di Bandung
mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang terdiri
dari dua perahu yang diikat berdampingan yang disebut perahu bandung yang
digunakan oleh Bupati Bandung, R.A. Wiranatakusumah II, untuk melayari Ci
Tarum dalam mencari tempat kedudukan kabupaten yang baru untuk menggantikan
ibu kota yang lama di Dayeuhkolot. </p>
.
. <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari
kalimat Nga-Bandung-an Banda Indung, yang merupakan kalimat sakral dan luhur
karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya menyaksikan
atau bersaksi. Banda adalah segala sesuatu yang berada di alam hidup yaitu
di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari
banda adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu
Pertiwi tempat Banda berada.</p>
.
morfologi wilayahnya bagaikan sebuah mangkok raksasa, secara geografis kota
ini terletak di tengah-tengah provinsi Jawa Barat, serta berada pada
ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada
permukaan laut.</p>
.
. <p>Kota Bandung dialiri dua sungai utama, yaitu Sungai
Cikapundung dan Sungai Citarum beserta anak-anak sungainya yang pada umumnya
mengalir ke arah selatan dan bertemu di Sungai Citarum. Dengan kondisi
yangdemikian, Bandung selatan sangat rentan terhadap masalah banjir terutama
.
. <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah
menjadi tujuan utama dalam menikmati liburan akhir pekan terutama dari
masyarakat yang berasal dari Jakarta sekitarnya. Selain menjadi kota wisata
belanja, kota Bandung juga dikenal dengan sejumlah besar bangunan lama
berarsitektur peninggalan Belanda.
. </p>
.
. <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi
objek wisata yang tidak pernah sepi pengunjung. Selain karena letaknya
strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu
diterapkan dalam bentuk spot swafoto Instagramable.</p>
.
. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda
Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan Teleskop
Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong
bintang. Benda ini diletakkan pada atap kubah sehingga saat teropong
digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh
dikunjungi oleh siapapun, tanpa tiket. Namun, bagi yang ingin menggunakan
teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga
pendidikan, diberikan jadwal hari Selasa sampai Jumat. Sementara itu,
kunjungan individu dibuka setiap hari Sabtu.</p>
. </div>
.
. <aside>
. <figure>
. </figure>
. </aside>
. </main>
Dengan begitu, konten elemen <main> terbagi menjadi dua, yaitu

elemen <div> dan <aside>. Selanjutnya, kita mulai kelompokkan konten lebih
detail lagi pada elemen <div>.
Kita bisa lihat, di dalam elemen <div> terdapat konten yang dapat

digolongkan sebagai artikel. Artikel pertama memuat konten mengenai
sejarah, yang kedua mengenai geografi dan selanjutnya mengenai wisata.
Dengan hasil identifikasi tersebut, maka kita memerlukan tiga buah
elemen <article> untuk mengelompokkan masing-masing konten yang terkait.
Masing-masing elemen <article> akan terdiri dari heading, gambar dan
paragraf.
. <div>
. <article>
. <p>Kata Bandung berasal dari kata bendung atau bendungan
karena terbendungnya sungai Citarum oleh lava Gunung Tangkuban Parahu yang
lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di
Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang
menggantikan ibu kota yang lama di Dayeuhkolot. </p>
.
. </article>
.
. <article>
morfologi wilayahnya bagaikan sebuah mangkok raksasa,secara geografis kota
permukaan laut.</p>
.
mengalir ke arah selatan dan bertemu di Sungai Citarum. Dengan kondisi yang
demikian, Bandung selatan sangat rentan terhadap masalah banjir terutama
. </article>
.
. <article>
.
. <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi
objek wisata yang tidak pernah sepi pengunjung. Selain karena letaknya
strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu
diterapkan dalam bentuk spot swafoto Instagramable.</p>
.
. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda
Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan Teleskop
Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong
bintang. Benda ini diletakkan pada atap kubah sehingga saat teropong
digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh
. </article>
. </div>
Coba kita lihat pada elemen <article> terakhir, konten tersebut memiliki
subjudul lainnya yaitu membahas tentang wisata Farm House dan
Observatorium Bosscha. Maka pada konten ini kita dapat mengelompokkan
juga subjudul beserta kontennya dengan menggunakan elemen <section>.
Sehingga seluruh konten yang berada pada elemen <div> memiliki struktur
seperti ini:
. <div>
. <article>
. Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang
menggantikan ibu kota yang lama di Dayeuhkolot. </p>
.
. </article>
.
. <article>
ini terletak di tengah-tengah provinsi Jawa Barat, serta berada
pada ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di
berada di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut
dan sebelah selatan merupakan kawasan rendah dengan ketinggian 675 meter di
atas permukaan laut.</p>
.
. </article>
.
. <article>
. <section>
. <p>Berada di jalur utama Bandung-Lembang, Farm House
menjadi objek wisata yang tidak pernah sepi pengunjung. Selain karena
letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa.
Semua itu diterapkan dalam bentuk spot swafoto Instagramable.</p>
. </section>
. <section>
. <p>Memiliki beberapa teleskop, antara lain, Refraktor
Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan
Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk
meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat
teropong digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh
. </section>
. </article>
. </div>
Sebelumnya, kita sudah menetapkan atribut id pada elemen heading untuk

dijadikan target navigasi, setelah mengorganisasikan konten seperti ini,
pindahkan atribut id dari heading ke elemen <article> yang membungkus
konten tersebut. Karena elemen <article> lebih menunjukkan keseluruhan
dari konten artikelnya.
Kemudian pada elemen <div> kita juga bisa tambahkan atribut id dan beri

nilai “content.” Hal ini nantinya akan digunakan dalam membantu penyusunan
tata letak (layouting) menggunakan CSS.
. <div id="content">
. <article id="sejarah">
. <h2>Sejarah</h2>
Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang
yang digunakan oleh Bupati Bandung, R.A. Wiranatakusumah II,
. untuk melayari Ci Tarum dalam mencari tempat kedudukan kabupaten yang baru
untuk menggantikan ibu kota yang lama di Dayeuhkolot. </p>
.
. </article>
.
. <article id="geografis">
permukaan laut.</p>
.
. </article>
.
. <article id="wisata">
. <h2>Wisata</h2>
. <section>
. <p>Berada di jalur utama Bandung-Lembang, Farm House
menjadi objek wisata yang tidak pernah sepi pengunjung. Selain karena
letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa.
Semua itu diterapkan dalam bentuk spot swafoto Instagramable.</p>
. </section>
. <section>
. <p>Memiliki beberapa teleskop, antara lain, Refraktor
Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan
Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk
meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat
teropong digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh
. </section>
. </article>
. </div>
Selanjutnya kita perhatikan konten yang berada pada elemen <aside>.

Konten ini tidak terlalu kompleks seperti pada elemen <div>. Sehingga saat
ini, kita cukup mengelompokkan dengan menggunakan satu elemen <article>.
. <aside>
. <article>
. <figure>
. </figure>
. </article>
. </aside>
Good job! Sekarang konten sudah terorganisir dengan baik. Sampai sejauh
ini, struktur pada elemen <main> akan nampak seperti diagram berikut:
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. Yaitu 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.
wikipedia.org
Struktur Dasar Sebuah Tabel
Tabel pada HTML disusun dari tiga buah elemen,

yaitu <table>, <tr> dan <td> atau <th>. Elemen <table> digunakan untuk
menandakan dimulainya 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, dan 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:
<h1>Pemenang Piala Dunia tiga tahun terakhir</h1>
<table>
<tr>
<th>Tahun</th>
<th>Juara 1</th>
<th>Juara 2</th>
<th>Juara 3</th>
</tr>
<tr>
<td>2018</td>
<td>Prancis</td>
<td>Kroasia</td>
<td>Belgium</td>
</tr>
<tr>
<td>2014</td>
<td>Jerman</td>
<td>Argentina</td>
<td>Belanda</td>
</tr>
<tr>
<td>2010</td>
<td>Spanyol</td>
<td>Belanda</td>
<td>Jerman</td>
</tr>
</table>
Jika dibuka pada browser, maka akan tampak seperti ini:

Yang perlu kita ingat lagi, seluruh konten atau data dituliskan pada
elemen <td> ataupun <th>. Kita bisa memberikan konten apa saja di
dalamnya seperti teks, gambar atau bahkan sebuah 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.
<table>
<tr>
<th>18:00</th>
<th>19:00</th>
<th>20:00</th>
</tr>
<tr>
<td colspan="2">Avenger Infinity Wars</td>
<td>It Chapter 2</td>
</tr>
<tr>
<td>One Piece: Stampede</td>
<td>Weathering With You</td>
<td>Gundala</td>
</tr>
<tr>
<td>Gundala</td>
</tr>
</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.
<table border="1">
<tr>
<th>18:00</th>
<th>19:00</th>
<th>20:00</th>
</tr>
<tr>
<td>It Chapter 2</td>
</tr>
<tr>
<td>Weathering With You</td>
<td>Gundala</td>
</tr>
<tr>
<td>Gundala</td>
</tr>
</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.
<table border="1">
<tr>
<th rowspan="3">18:00</th>
<td>Avenger Infinity Wars</td>
</tr>
<tr>
</tr>
<tr>
<td>Gundala</td>
</tr>
</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.
th Menetapkan header yang terkait dengan baris atau

kolom.
colspan=”number” Jumlah kolom dicakup oleh header.
rowspan=”number” Jumlah row yang dicakup oleh header.
headers=”nama header” Mengasosiasikan header dengan header lain.
scope=”row|col|rowgroup|colgroup” Mengasosiasikan header dengan baris, kelompok 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.
Menerapkan Elemen Tabel pada Halaman Profil
Setelah kita mengetahui cara menerapkan tabel pada website, mari kita
perkaya kembali konten pada halaman profil, khususnya konten pada
elemen <aside> yang sudah kita buat. Kita akan menambahkan detail
informasi dari kota Bandung seperti negara luas, bahasa daerah, dan kode
telepon.
Tapi sebelum itu mari kita atur kembali struktur elemen yang di dalam elemen
<aside> tersebut. Saat ini elemen <aside> memiliki struktur seperti ini:
Karena kita akan menambahkan konten lain, maka kita perlu mengelompokan
kembali elemen yang ada di dalam elemen <article>. Kelompokan seluruh
elemen yang ada pada elemen <article> saat ini sebagai header, dan buat
elemen baru yaitu <section> setara dengan elemen <header> tersebut. Pada
elemen <section> ini konten tabel akan ditempatkan. Silakan buka kembali
berkas index.html, dan sesuaikan struktur elemen <aside> seperti berikut:
<aside>
<article>
<header>
<h2>Kota Bandung</h2>
<p>Kota Kembang Paris van Java</p>
<figure>
<img src="assets/image/bandung-badge.png">
<figcaption>Lambang</figcaption>
</figure>
</header>
<section></section>
</article>
</aside>
Sehingga struktur pada elemen <aside> akan menjadi seperti ini:

Selanjutnya pada elemen <section> kita masukan konten berikut:
Informasi Lainnya
Negara
Indonesia
Hari jadi
25 September 1810
Luas Total
167.67 km2
Bahasa Daerah
Sunda
Kode Telepon
+62 22
Sesuaikan konten tersebut dengan menerapkan elemen yang sesuai, salah

satunya gunakan elemen tabel untuk menampung sebagian kontennya.
<section>
<h3>Informasi Lainnya</h3>
<table>
<tr>
<th>Negara</th>
<td>Indonesia</td>
</tr>
<tr>
<th>Hari jadi</th>
<td>25 September 1810</td>
</tr>
<tr>
<th>Luas Total</th>
<td>167.67 km<sup>2</sup></td>
</tr>
<tr>
<th>Bahasa Daerah</th>
<td>Sunda</td>
</tr>
<tr>
<th>Kode Telepon</th>
<td>+62 22</td>
</tr>
</table>
</section>
Maka pada browser akan tampak seperti gambar berikut:
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. Dan karakter lain seperti lebih dari (>) atau kurang dari (<)
walaupun tersedia dalam ASCII character, karakter tersebut tidak dapat
digunakan secara langsung sebagai konten pada HTML, karena karakter
tersebut akan terbaca sebagai sebuah tag.
Untuk menampilkan karakter seperti yang disebutkan tadi, HTML memerlukan
sebuah “escaped” character. 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”
atau “&#169”.
Alhasil, tampilannya sama.
Berikut daftar karakter spesial dengan karakter referensinya.
Karakter Deskripsi Named Numeric

Entity 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 … …
Introduction to Styling
Pada modul pengenalan sudah disinggung seperti apa peran CSS pada
website. Website nampak begitu membosankan dan mengerikan tanpa
adanya CSS. Cascading Style Sheet atau biasa disingkat CSS merupakan
W3C standar yang digunakan untuk mengatur visualisasi berkas yang ditulis
pada HTML. Pada modul ini kita akan belajar penggunaan dasar dari CSS.
Tepatnya mulai dari pembuatan berkas CSS, pengenalan struktur
sintaksnya, hingga menerapkan dasar styling seperti memberikan warna
pada sebuah teks.
CSS syntax berbeda dengan HTML, begitu pula dengan JavaScript. CSS
bukanlah sebuah bahasa pemrograman karena di dalamnya tidak terdapat
logika, tidak dapat membuat sebuah variabel, tidak adanya proses iterasi,
dsb. CSS hanya sebuah declarative language yang digunakan untuk
mendeklarasikan suatu nilai yang nantinya digunakan untuk mengatur seperti
apa sebuah elemen HTML ditampilkan pada browser.
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.
4.
Mari kita bahas satu persatu tahapannya
Memberikan Markup pada Dokumen
Pada modul sebelumnya kita sudah mengenal banyak bagaimana cara untuk
me-markup atau memberikan tag sebuah konten dalam HTML. Mungkin
sebagian dari kita bingung, mengapa kita perlu mengelompokkan sebuah
konten tapi tiada perubahan signifikan pada tampilan browser? Contohnya
seperti elemen <div> yang tidak akan mengubah apapun sebelum kita
menerapkan sebuah styling pada elemennya. Sebenarnya terdapat hubungan
antara struktur dokumen dengan sebuah style sheet. Kita akan memahami ini
seiring kita belajar hingga pembahasan lebih lanjut.
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.
. h1 { color: green; }
.
. p {
. font-size: small;
. font-family: sans-serif;
. }
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 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, agar mudah dibaca dan dipahami.
. p {
. font-size: small;
. /* deklarasikan nilai properti lainnya pada garis baru */
. }
Tapi ingat, walaupun CSS tidak memperhatikan spasi, untuk satuan nilai
seperti px, em dan lainnya harus dituliskan tanpa spasi pada nilainya.
Contohnya:
. h1 {
. margin: 2em;
. }
Jika kita menambahkan spasi di antara satuan dan nilai, maka deklarasi
tersebut tidak akan berfungsi.
. h1 {
. margin: 2 em; /* Deklarasi tidak akan berfungsi karena terdapat spasi
antara nilai dan satuan */
. }
Melampirkan Styling pada Dokumen HTML.

Setelah kita menuliskan rules, maka tahapan selanjutnya adalah melampirkan
atau menerapkan aturan tersebut pada berkas HTML. Sebenarnya, terdapat
tiga cara untuk menerapkan styling pada elemen HTML.
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 me-link-kan berkas .css dengan dokumen HTML, kita dapat gunakan

elemen <link> pada <head> berkas HTML. Contohnya:
. <head>
. <title>Document Title</title>
. <link rel="stylesheet" href="style.css">
. </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.
. <head>
.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.
3.1/css/bootstrap.min.css">
. </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.
. <head>
. <style>
. /*
. * Rules styling dituliskan di sini
. */
. </style>
. </head>
Inline Style
Inline Style merupakan styling yang diterapkan pada elemen HTML dengan

menggunakan atribut style. Contohnya seperti berikut:
. <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.
. <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:

. /* ini merupakan komentar satu baris */
.
. /* CSS juga mendukung komentar lebih dari satu baris,
. seluruh teks yang berada pada pembuka dan penutup sebuah komentar
. akan diabaikan oleh browser sebagai compiler.
. */
Menerapkan Styling Dasar pada Halaman Profil

Sejauh ini kita sudah mengetahui bagaimana menuliskan sebuah rule dan
menggunakannya pada berkas HTML. Sekarang kita coba terapkan beberapa
styling dasar pada halaman profil yang sudah kita buat dari modul-modul
sebelumnya.
Latihan kali ini akan mencakup tahapan seperti pembuatan berkas CSS,
menuliskan rule pada berkas CSS, hingga menghubungkan berkas CSS
dengan HTML.
Di akhir latihan ini kita akan membuat halaman profil tampak seperti ini:
Membuat Berkas CSS
Silakan buka kembali root folder proyek yang telah kita buat dan buka
folder assets.
Jika kita sudah selesai mengikuti latihan pada modul-modul sebelumnya,
maka di dalam folder assets akan terdapat folder image. Sekarang, kita
tambahkan folder baru dan beri nama styles.
Folder styles ini akan kita gunakan untuk menyimpan berkas CSS. Maka
silakan buka folder tersebut dan buat berkas baru dan beri nama style.css.
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:
. body {
. }
Yang kedua, kita tetapkan juga warna pada setiap elemen <h2> dan <h3> yang
digunakan pada berkas HTML dengan menuliskan kode sebagai berikut:
. h2 {
. color: #00a2c6
. }
.
. h3 {
. color: #00a2c6
. }
Dan yang terakhir, kita coba ubah warna background dan warna teks pada
elemen <footer>, serta beri sebuah padding.
. footer {
. padding: 20px;
. color: white;
. background-color: #00a2c6
. }
Sehingga keseluruhan kode pada berkas style.css akan nampak seperti ini:
. body {
. }
.
. h2 {
. color: #00a2c6
. }
.
. h3 {
. color: #00a2c6
. }
.
. footer {
. padding: 20px;
. color: white;
. }
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>:
. <link rel="stylesheet" href="assets/styles/style.css">
Sehingga keseluruhan kode pada elemen head nampak seperti ini:
. <head>
. <title>Kota Bandung</title>
. <link rel="stylesheet" href="assets/styles/style.css">
. </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:
Perubahan pertama terjadi pada tipe font yang ditampilkan pada seluruh
konten yang terdapat di dalam elemen body.
Kemudian perubahan selanjutnya ada pada elemen <h2> dan <h3> dengan
perubahan warna pada teksnya.
Dan perubahan terakhir ada pada elemen <footer> yang berada pada bawah

halaman. Elemen ini akan menerapkan warna background berwarna biru,
teks yang ada di dalamnya berwarna putih dan terdapat padding dalam
menampilkan kontennya.
Selamat! Kita sudah berhasil menerapkan styling dasar pada halaman HTML.

Pada materi selanjutnya, kita akan membahas lebih detail
mengenai styling dan kita akan belajar menyusun layout agar peletakan
elemen dapat lebih presisi.
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.
. h2 {
. color: #00a2c6
. }
.
. h3 {
. color: #00a2c6
. }
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:
. h2, h3 {
. color: #00a2c6
. }
Rule Order
Sesuai dengan namanya, cascading artinya “mengalir.” Demikian halnya dengan, alur

kerja CSS dalam membaca kode, 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:
. <!doctype html>
. <html lang="en">
. <head>
. <title>Judul Berkas</title>
. <style>
. p {
. color: red;
. }
.
. p {
. color: blue;
. }
. </style>
. </head>
. <body>
. <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>
. </body>
. </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.
. <!doctype html>
. <html lang="en">
. <head>
. <title>Judul Dokumen</title>
. <style>
. p {
. color: red !important;
. }
.
. p {
. color: blue;
. }
. </style>
. </head>
. <body>
. <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>
. </body>
. </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 Styling

Pada modul sebelumnya kita sudah mengenal apa itu CSS, bagaimana ia
bekerja, cara penulisan sintaksnya, hingga mengetahui konsep yang ada
seperti inheritance, grouping selector, dan rule order.
Pada modul ini kita akan berkenalan lebih dalam lagi dengan CSS, kita akan
mengenal berbagai macam tipe selector, formatting text, bermain dengan warna,
mengenal apa itu box model, positioning, hingga penyusunan layout pada website
menggunakan teknik floating.
Untuk menerapkan materi yang kita pelajar, pada modul ini juga terdapat
beberapa latihan dalam menerapkan styling pada halaman profil, tentunya pada
akhir modul ini kita dapat membuat halaman profil tampak seperti ini:
More about Selector

Ada banyak jenis selector untuk menargetkan aturan ke elemen tertentu dalam
dokumen HTML. Pada 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 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.
Type Selector
Type Selector menggunakan nama elemen sebagai target untuk diterapkannya

rule. Dengan kata lain, ketika menggunakan selector ini tentu rule akan diterapkan
pada seluruh elemen target yang ada pada dokumen HTML. Contohnya sebagai
berikut:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. /* Semua elemen span */
. span {
. color: red;
. }
. </style>
. </head>
. <body>
. <span>Ini merupakan sebuah teks yang berada pada elemen span. Seharusnya elemen
ini ditampilkan dengan warna teks merah.</span>
. <p>Ini merupakan sebuah teks yang berada pada elemen paragraf, teks ini tidak
seharusnya tidak akan terpengaruh oleh rule.</p>
. <span>Ini merupakan sebuah teks yang berada pada elemen span lainnya. Seharusnya
elemen ini ditampilkan dengan warna teks merah juga.</span>
. </body>
. </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:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. .red {
. color: red;
. }
.
. .skyblue-bg {
. background-color: skyblue;
. }
.
. .fancy {
. text-shadow: 4px 4px 3px #77f;
. }
. </style>
. </head>
. <body>
. <p class="red">Paragraf dengan teks berwarna merah</p>
. <p class="skyblue-bg">Paragraf dengan background berwarna biru langit</p>
. <p class="fancy">Paragraf dengan gaya fancy</p>
. <p>Paragraf yang menampilkan teks dengan warna standar tanpa menerapkan
styling</p>
. </body>
. </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.
. <h1 class="red">Heading dengan teks berwarna merah</h1>

. <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.
. <h1 class="red skyblue-bg">Heading dengan teks berwarna merah dan background biru
langit</h1>
. <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:
. <!doctype html>
. <html lang="en">kita
. <head>
. <style>
. .fancy {
. text-shadow: 4px 4px 3px #77f;
. }
.
. p.fancy {
. text-shadow: 4px 4px 3px #00c8eb;
. }
. </style>
. </head>
. <body>
. <h1 class="fancy">Heading dengan teks bergaya fancy</h1>
. <p class="fancy">Paragraf dengan teks bergaya fancy</p>
. </body>
. </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:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. #special {
. }
. </style>
. </head>
. <body>
. <div id="special">
. <p>Ini merupakan konten di dalam sebuah div yang diberi id special.</p>
. </div>
. <div>
. <p>Ini merupakan konten di dalam sebuah div biasa.</p>
. </div>
. </body>
. </html>
Jika kode di atas dibuka pada browser, maka tampilan akan tampak seperti
ini:
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.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. #special {
. }
. </style>
. </head>
. <body>
. <div id="special">
. <p>Ini merupakan konten di dalam sebuah div yang diberi id special.</p>
. </div>
. <div id="special"> 
. <p>Ini merupakan konten di dalam sebuah div biasa.</p>
. </div>
. </body>
. </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:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
.
. /* <a> element yang menerapkan href attribut */
. a[href] {
. color: blue;
. }
.
. /* <a> element yang menerapkan nilai pada href dengan awalan "#" */
. a[href^="#"] {
. background-color: gold;
. }
.
. /* <a> element yang menerapkan nilai pada href yang mengandung teks
"example" */
. a[href*="example"] {
. background-color: silver;
. }
.
. /* <a> element yang menerapkan nilai pada href yang mengandung teks
"insensitive" tidak mementingkan huruf kapital*/
. a[href*="insensitive" i] {
. color: cyan;
. }
.
. /* <a> element yang menerapkan nilai pada href dengan akhiran ".org"
*/
. a[href$=".org"] {
. color: red;
. }
. </style>
. </head>
. <body>
. <ul>
. <ul>
. <li><a href="#internal">Internal link</a></li>
. <li><a href="http://example.com">Example link</a></li>
. <li><a href="#InSensitive">Insensitive internal link</a></li>
. <li><a href="http://example.org">Example org link</a></li>
. </ul>
. </ul>
. </body>
. </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. Agar dapat lebih mudah memahaminya, mari kita rangkum
dalam sebuah tabel.
Syntax Description
[attr] Menargetkan elemen yang menerapkan atribut attr.
[attr=value] Menargetkan elemen yang menerapkan atribut attr dengan

nilai value.
[attr~=value] Menargetkan elemen yang menerapkan atribut attr dengan salah

satu nilainya adalah value.
[attr^=value] Menargetkan elemen yang menerapkan atribut attr yang

nilainya diawali dengan nilai value.
[attr$=value] Menargetkan elemen yang menerapkan atribut attr yang nilainya

diakhiri dengan value.
[attr*=value] Menargetkan elemen yang menerapkan atribut attr yang nilainya

mengadung value.
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:
. img + p {
. color: green;
. }
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:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. /* Rule akan diterapkan pada elemen paragraf yang berada tepat
setelah elemen img */
. img + p {
. color: green;
. }
. </style>
. </head>
. <body>
. <p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan pada
elemen paragraf ini.</p>
. <img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding
logo" width="400px">
. <p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar. Maka
paragraf ini seharusnya menerapkan rule dengan menampilkan teks berwarna
hijau.</p>
. <p>Ini merupakan paragraf ketiga. Letaknya memang setelah elemen gambar,
namun tidak diletakkan persis setelahnya, sehingga rule tidak akan
diterapkan pada elemen ini.</p>
. </body>
. </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:
. img ~ p {
. color: green;
. }
Rule di atas akan diterapkan pada elemen paragraf yang berada setelah
elemen img selama masih di dalam induk yang sama.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. /* Rule akan diterapkan pada elemen header yang berada tepat setelah
elemen img */
. img ~ p {
. color: green;
. }
. </style>
. </head>
. <body>
. <p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan pada
elemen paragraf ini.</p>
. <img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding
logo" width="400px">
. <p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar. Maka
paragraf ini menerapkan rule dengan menampilkan teks berwarna hijau.</p>
. <div>
. <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>
. </div>
. <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>
. </body>
. </html>

Child Selector (>)
Child Selector menggabungkan dua buah basic selector dengan

menggunakan tanda greater than (>) di antara basic selector-nya. Contohnya
sebagai berikut:
. div > p {
. background-color: yellow;
. }
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 child dari elemen div bukan sebuah hanya turunannya.
Untuk lebih jelas, perhatikan contoh penerapannya berikut:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. /* Rule akan diterapkan pada elemen paragraf yang merupakan child
dari elemen div */
. div > p {
. }
. </style>
. </head>
. <body>
. <div>
. <p>Paragraf pertama. di dalam div.</p>
. <p>Paragraf kedua. di dalam div.</p>
. <section><p>Paragraf ketiga. di dalam div namun bukan sebagai anak elemen
secara langsung.</p></section>
. <p>Paragraf keempat. di dalam div.</p>
. </div>
. <p>Paragraf kelima. di luar div.</p>
. <p>Paragraf keenam. di luar div.</p>
. </body>
. </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 akan
menerapkan rule. Selector ini menggunakan spasi dalam menggabungkan
dua basic selector. Contohnya sebagai berikut:
. div p {
. }
Pada contoh di atas rule akan diterapkan pada seluruh elemen paragraf yang
merupakan turunan dari elemen div. Berikut contoh penerapannya:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. /* Rule akan diterapkan pada elemen paragraf yang merupakan turunan
dari elemen div */
. div p {
. }
. </style>
. </head>
. <body>
. <div>
. <p>Paragraf pertama. di dalam div.</p>
. <p>Paragraf kedua. di dalam div.</p>
. <section><p>Paragraf ketiga. di dalam div namun bukan sebagai anak elemen
secara langsung.</p></section>
. <p>Paragraf keempat. di dalam div.</p>
. </div>
. <p>Paragraf kelima. di luar div.</p>
. <p>Paragraf keenam. di luar div.</p>
. </body>
. </html>

Pseudo Selector
Selain beberapa selector yang sudah kita pelajari, CSS masih memiliki dua
selector lagi yang dapat kita manfaatkan untuk membantu untuk menyeleksi
elemen untuk menerapkan sebuah rule, yakni Pseudo-class dan Pseudo-
elemen.
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.
. a:hover {
. color: blue;
. }
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:
. /* rule akan diterapkan pada sebuah tautan yang belum pernah dikunjungi */
. a:link {
. color: red;
. }
.
. /* rule akan diterapkan pada sebuah tautan yang sudah pernah dikunjungi */
. a:visited {
. color: green;
. }
.
. /* rule akan diterapkan pada sebuah tautan ketika diarahkan dengan kursor */
. a:hover {
. color: pink;
. }
.
. /* rule akan diterapkan pada sebuah tautan ketika ditekan */
. a:active {
. color:orange;
. }
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:
. blockquote::before,
. blockquote::after {
. content: '"';
. font-size: 24px;
. font-style: italic;
. }
Dengan menuliskan rule tersebut, elemen <blockquote> memiliki tanda kutip
pada awal dan akhir elemennya.
. <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.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. /* Rule styling akan diterapkan pada karakter pertama disebuah
paragraf */
. p::first-letter {
. font-size: 32px;
. color: saddlebrown;
. }
. </style>
. </head>
. <body>
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto
deserunt, dicta laudantium quae quam sequi
. soluta vitae! A, architecto beatae, consequuntur et eveniet fuga
laudantium molestias praesentium temporibus, unde
. velit.</p>
. </body>
. </html>
Tampilan yang dihasilkan:
Untuk mengetahui lebih lengkap mengenai apa saja pseudo-elemen 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
Formatting Text (Text and Font

Styling)
Setelah kita tahu bagaimana menerapkan CSS pada berkas HTML,
mengetahui struktur penulisan CSS, dan menggunakan selector sesuai
dengan kebutuhan, apa berikutnya? Kita akan fokus mempelajari secara
detail bagaimana menerapkan styling pada sebuah teks.
Perlu kita ketahui, CSS memisahkan styling untuk font dan teks. Kita harus
tahu kapan seharusnya menetapkan styling pada font atau menetapkannya
pada teks. Mengapa kedua hal tersebut dipisah? Padahal teks dan font
merupakan satu kesatuan, di mana setiap teks pasti menggunakan font untuk
menampilkannya, bukan? Sebabnya, CSS sendiri mempunyai properti untuk
kedua hal tersebut secara masing-masing
Jika kita ingin menetapkan styling pada tampilan teks itu sendiri, gunakanlah

properti font. Contohnya properti font dapat mengatur tipe font, ukuran,
ketebalan, dan lainnya. Sedangkan properti teks digunakan untuk mendukung
hal lainnya dalam menampilkan teks seperti, menetapkan text alignment,
dekorasi, spacing, dan masih banyak lagi. Karena dua hal ini dipisah, mari
kita bahas satu persatu.
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 : Digunakan sebagai shorthand dari properti font yang ada.
Mari kita bahas properti tersebut satu persatu secara mendetail.
font-family
Pada 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.
. body {
. }
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.
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:
. h1 {
. font-size: 1.5em;
. }
Pastikan bahwa saat menuliskan nilai dan satuannya, tidak ada jarak (spasi).
. /* Rule tidak akan diterapkan pada target karena kesalahan penulisan nilai
properti */
. h1 {
. font-size: 1.5 em;
. }
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
em Font size Satuan relatif terhadap ukuran font yang sedang

digunakan pada elemen (contohnya, 2em berarti 2
kali lebih besar dari ukuran font seharusnya).
ex Font height Satuan relatif terhadap tinggi font saat ini, satuan
ini sangat jarang sekali digunakan
rem Font size Mirip seperti em, tetapi rem merupakan satuan
relatif terhadap ukuran font dari root element.
ch Font width Satuan relatif terhadap lebar dari karakter “0” nol.
vw Viewport Satuan relatif terhadap 1% lebar viewport. Contoh

width 1vw = 1% dari lebar viewport. Satuan ini tidak
didukung pada browser IE8 ke bawah.
vh Viewport Satuan relatif terhadap 1% tinggi viewport. Contoh

height 1vh = 1% dari 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.
. body {
. font-size: 16px;
. }
. h1 {
. font-size: 150%; /* 150% dari 16 = 24px */
. }
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.
Pada gambar di atas kita bisa lihat bahwa standarnya browser menampilkan
teks dengan nilai medium. Properti font-size dapat diaplikasikan ke seluruh
elemen yang ada di HTML dan nilainya dapat diturunkan pada elemen
turunannya.
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

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

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:
p {
font: 1em sans-serif;
Text Styling
Pembahasan sebelumnya kita terfokus pada formating bagaimana bentuk
karakter 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:
. p {
. line-height: 2;
. }
. p {
. line-height: 200%;
. }
. p {
. line-height: 2em;
. }
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

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:
. p#first {
. text-indent: 2em;
. }
.
. p#second {
. text-indent: 25%;
. }
.
. p#third {
. text-indent: -35px;
. }
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:
. p#first {
. text-align: left;
. }
.
. p#second {
. text-align: right;
. }
.
. p#third {
. text-align: center;
. }
.
. p#fourth {
. text-align: justify;
. }
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:
. p#letter {
. letter-spacing: 4px;
. }
. p#word {
. word-spacing: 1.5em;
. }
Berikut contoh tampilan jika menerapkan rule di atas:
Kedua elemen ini dapat diaplikasikan ke seluruh elemen yang ada pada
HTML dan nilainya dapat diturunkan pada elemen turunannya.
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 buat 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:
. p#one {
. text-shadow: 1px 1px 0px #000000;
. background-color: #eeeeee;
. color: #666666;
. }
.
. p#two {
. background-color: #dddddd;
. color: #666666;
. }
.
. p#three {
. background-color: #cccccc;
. color: #ffffff;
. }
.
. p#four {
. text-shadow: -1px -1px #666666;
. background-color: #cccccc;
. color: #bbbbbb;
. }
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:
. @font-face {
. font-family: "Dicoding Font";
. src: url('FILE-FONT.TTF');
. }
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.
. p {
. font-family: "Dicoding Font";
. }
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, tekan tombol “+” untuk memilih font
tersebut. Ketika menekan tombol tersebut, Google Font akan menyimpannya
sebagai collection (layaknya fitur cart pada online shop).
Kita juga bisa memilih ketebalan fontnya. Yuk pilih juga versi tebalnya (bold)
dan masukan kembali ke dalam collection.
Setelah selesai memilih font yang dicari, klik pada bar “1 Family Selected”
yang berada di bawah. Setelah itu tampilan akan menjadi seperti ini:
Selanjutnya klik pada tab dengan tulisan @IMPORT dan salin

kode @import beserta URL-nya.
. @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:
. @import url('https://fonts.googleapis.com/css?
family=Quicksand:400,700&display=swap');
.
.
. body {
. }
.
.
. h2, h3 {
. color: #00a2c6
. }
.
.
. footer {
. padding: 20px;
. color: white;
. }
Untuk menerapkan font-nya, kita ubah nilai properti font-family pada body
dengan menambahkan nilai ‘Quicksand’ sebelum generic font sans-serif.
. body {
. font-family: 'Quicksand', sans-serif;
. }
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.
Menetapkan ukuran, ketebalan, dan alignment teks pada Halaman

Profil
Setelah menentukan tipe font baru dalam menampilkan teks, selanjutnya kita
percantik lagi teksnya dengan mengatur ukuran, ketebalan,
dan alignment pada teks. Jika Anda sudah menutup berkas style.css pada
text editor, silakan buka kembali dan ikuti langkah - langkah berikut.
Langkah pertama kita atur ukuran font menjadi 18px pada teks yang berada
di elemen <a> yang merupakan turunan dari elemen <nav>.
. nav a {
. font-size: 18px;
. }
Kemudian kita atur juga ketebalan teksnya menjadi 400 dan hilangkan garis

bawah pada elemen tersebut, sehingga block rule-nya menjadi seperti ini:
. nav a {
. font-size: 18px;
. font-weight: 400;
. text-decoration: none;
. }
Sehingga jika kita preview pada browser, maka ukuran teks pada navigasi
akan tampak lebih besar dan tidak memiliki garis bawah.
Kita bisa memberikan efek tebal pada teks ketika salah satu item navigasi
diarahkan menggunakan kursor. Tambahkan rule baru dengan
memanfaatkan pseudo-class :hover pada elemen <a>.
. nav a:hover {
. }
Sehingga tampilan menjadi seperti ini:
Selanjutnya kita akan membuat teks pada header aside menjadi rata tengah

dengan menggunakan properti text-align. Sebelum itu, untuk memudahkan
menetapkan selector, berikan attribute class pada elemen <article> yang
berada di dalam elemen <aside> dengan nilai profile.
. <aside>
. <article class="profile">
. <header>
. .....
. </header>
. <section>
. .....
. </section>
. </article>
. </aside>
Setelah itu kita dapat menentukan selector dengan mudah untuk

mengatur <header> pada elemen <article> tersebut:
. .profile header {
. }
Maka teks pada header aside akan menjadi rata tengah.
Terakhir, kita buat juga teks pada footer menjadi rata tengah dan tebal
dengan menambahkan properti text-align: center; dan font-weight: bold; pada
footer selector:
. footer {
. padding: 20px;
. color: white;
. background-color: #00a2c6;
. }
Sehingga tampilan footer akan tampak seperti ini:
Color
Warna memberikan kesan hidup pada sebuah website, Jika kita kembali pada
tahun 1993 saat website hanya menampilkan background abu dengan teks hitam,
tentu membosankan sekali, bukan?
Yahoo Search Engine pada tahun 1994, Sumber: https://www.webdesignmuseum.org/
Pada saat itu memang belum tersedia sebuah browser yang dapat mengontrol
warna. Sampai akhirnya Netscape Navigator hadir dan memungkinkan hal
tersebut, walaupun belum sempurna layaknya saat ini. Syukurlah pada saat ini
kita bisa menggunakan properti - properti yang ada pada CSS untuk mengatur
warna pada teks dan background. Terlebih, seluruh browser saat ini sudah
mendukung styling menggunakan CSS sehingga kita tidak perlu lagi memikirkan
kompatibilitasnya.
Pembahasan kali ini kita akan fokus pada warna pada CSS. Anda akan
dikenalkan pada properti yang digunakan untuk mengatur warna teks dan
background. Tapi sebelum itu, mari kita pelajari dahulu bagaimana cara
menetapkan sebuah warna pada CSS.
Menetapkan Nilai Warna

Setiap warna pada layar komputer kita terdiri dari campuran warna merah, hijau,
dan biru. Layar komputer dibuat dari ribuan kotak kecil yang biasa disebut pixel.
Ketika layar monitor tidak menyala maka pixel pun tidak akan menyala. Ketika
layar monitor menyala, tiap pixel dapat menghasilkan warna yang berbeda
sehingga dapat menampilkan gambar.
Di dalam pixel terdapat tiga buah lampu kecil berwarna merah, hijau, dan biru.
Ribuan warna dapat dihasilkan dari kombinasi tiga warna tersebut.
Ketika ingin menetapkan warna, kita tidak perlu menghafal kombinasi dari ketiga
warna tersebut. Banyak pemilih warna yang dapat membantu kita dalam
menetapkan warna yang diinginkan. Contohnya seperti color picker yang ada
pada Photoshop, GIMP atau Gravit Designer.
Kita bisa melihat nilai RGB yang melalui color picker. Lantas bagaimana jika kita
tidak memiliki aplikasi design seperti yang telah disebutkan tadi? Tenang,
sekarang color picker banyak tersedia online, bahkan ketika kita menuliskan
“color picker” pada Google Search, tools tersebut tersedia pada hasil
pencariannya.
Untuk menetapkan nilai warna pada CSS kita dapat menggunakan Numeric
Value dan Predefined Color Name. Apa sih maksud kedua hal tersebut? Mari kita
bahas satu persatu yah.
Numeric Value
Cara yang paling banyak digunakan dalam menetapkan warna adalah dengan
menggunakan numeric value. Apa pasal? Dengan menggunakannya kita dapat
menentukan warna yang kita inginkan dengan tepat. Terlebih dengan
bantuan color picker maka kita tak perlu repot memahami dan mencari nilai kode
warna secara manual.
Berikut contoh penulisan nilai warna pada CSS dengan numeric value:
. /* Warna hijau menggunakan format RGB */

. color: rgb(78,231,23);
.
. /* Warna hijau Menggunakan format HEX */
. color: #4ee717;
.
. /* Warna hijau menggunakan format HSL (hanya di CSS3)*/
. color: hsl(104, 82%, 50%);
Kode tersebut merupakan nilai warna hijau yang dituliskan dalam beberapa
format. Dari kode tersebut kita tahu tidak hanya format RGB yang dapat
digunakan dalam menetapkan warna. Selain RGB ada juga format Hex dan HSL
(Hue, Saturation, Light).
Predefined Color Name
Menentukan warna bisa juga dilakukan selain dengan menggunakan format

angka. Kita bisa menggunakan sebuah kata seperti blue, yellow, red dan lainnya
. color: black;
. color: white;
. color: blue;
Dengan menggunakan kata tentu kita dapat lebih mudah dan cepat dalam
menentukan warna, tetapi mungkin hanya warna dasar yang sudah kita hafal.
Faktanya, varian warna ada banyak jumlahnya! Saat ini hampir seluruh browser
saat ini mendukung 140 nama warna, wow! Kita dapat melihat apa saja warna
yang tersedia pada tautan
berikut: https://www.w3schools.com/colors/colors_names.asp.
Opacity
CSS3 mengenalkan properti opacity yang dapat menspesifikasikan nilai

transparan pada elemen HTML. Nilai dari properti opacity merupakan angka
desimal antara 0.0 hingga 1.0, jika kita menetapkan nilainya 0.5 itu berarti 50%
transparan.
. div#opacity {
. background-color: red;
. opacity: 0.5;
. }
Jika elemen div menerapkan rule tersebut, maka akan tampak seperti ini:
Selain pada elemen, menetapkan opacity juga dapat kita lakukan pada warna.
Untuk melakukannya, gunakan format rgba dan hsla, dimana format ini
merupakan format rgb ditambahkan nilai alpha.
. p {
. color: rgba(78,231,23, 0.5);
. color: hsla(104, 82%, 50%, 0.5);
. }
Text Color (Foreground Color)

Pada modul pengenalan CSS kita sudah mencoba bagaimana mudahnya
mengganti warna pada teks yang ditampilkan. Sejujurnya tidak ada lagi yang
perlu kita bahas disini. Kita dapat dengan mudahnya mengganti warna teks
dengan properti color.
Nilai dari properti color dapat berupa predefined color name atau sebuah numeric

value dengan menggunakan RGB, RGBA, HEX, HSL, ataupun HSLA. Berikut
sebagai contoh, seluruh elemen <p> akan diberi warna abu-abu (gray) dengan
menggunakan beberapa cara yang ada:
. p { color: gray; }
. p { color: #666666; }
. p { color: #666; }
. p { color: rgb(102,102,102); }
Properti color dapat diaplikasikan ke seluruh elemen yang ada pada HTML dan
nilainya dapat diturunkan pada elemen turunannya. Jadi kita bisa mengubah
warna teks pada seluruh dokumen HTML dengan menerapkan properti color pada
elemen <body>, seperti ini:
body {
color: steelblue;
Sehingga tampak seperti ini:

Background Color
CSS memperlakukan setiap elemen HTML seperti berada pada sebuah kotak
(kita akan tahu lebih tentang ini pada pembahasan box model).
Properti background-color dapat mengatur warna untuk background dari kotak
tersebut.
Sama seperti text color, kita dapat menspesifikasikan warna yang dipilih

dengan numeric values atau dengan predefined color name. Properti background-
color akan bernilai transparan jika tidak kita tetapkan.
Kebanyakan browser menetapkan nilai putih sebagai standar untuk

nilai background-color, tetapi nilai standar tersebut dapat pengguna ubah melalui
pengaturan browser-nya. Maka untuk memastikan website kita memiliki tampilan
background putih, kita dapat terapkan nilai background-color: white; pada
elemen <body>.
Biasanya kita juga menerapkan padding saat menetapkan background-color guna

memberi jarak antara konten dan pinggiran kotak elemen.
<!doctype html>
<html lang="en">
<head>
<style>
body {
font-family: sans-serif;
div#content {
background-color: rgb(200, 200, 200);
padding: 20px 15px;
#content > h2 {
background-color: #4c5450;
padding: 15px;
color: white;
#content > h3 {
background-color: #60d0a8;
padding: 15px;
color: white;
#content > p {
background-color: hsl(56, 62%, 85%);
padding: 20px;
</style>
</head>
<body>
<div id="content">
<h2>Lorem Ipsum</h2>
<h3>Dolor sit amet lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus officiis
perspiciatis quidem ratione? Distinctio eos ex expedita iusto necessitatibus velit,
veritatis. Aliquid, debitis dignissimos in iusto magnam nulla sed tempora.</p>
</div>
</body>
</html>
Jika berkas di atas dijalankan pada browser, maka hasilnya akan tampak seperti
ini:
Box Model
Pada pembahasan background-color disinggung bahwa setiap elemen
ditampilkan seperti sebuah boxes atau kotak. Box model merupakan salah
satu konsep dari CSS. Setiap elemen yang dibuat pada HTML akan
menciptakan sebuah kotak untuk menampung kontennya. Layaknya bentuk
kotak pada umumnya, pasti terdapat nilai seperti lebar, tinggi, padding (tebal
lapisan), border (batas), dan juga jarak. Pada CSS nilai - nilai tersebut dapat
kita atur.
Kita mungkin sudah sedikit paham bagaimana konsep box model ini bekerja
dengan mengikuti latihan sebelumnya. Di sini kita akan membahas lebih
lanjut mengenai properti apa saja yang dapat memanipulasi boxes tersebut.
Tapi sebelum itu, kita pahami lebih tentang konsep box pada elemen HTML
agar kita dapat gambaran lebih tentang hal tersebut.
Box Element
Website dicoding.com dengan menerapkan rule * {border: 1px solid red}
Seperti yang kita lihat pada gambar di atas, setiap elemen pada HTML baik
itu block-level atau inline elemen, akan menghasilkan sebuah kotak elemen.
Perhatikan ilustrasi berikut agar lebih jelasnya:
 Content : Merupakan sebuah inti dari kotak elemen yang merupakan

konten dari elemen itu sendiri
 Padding : Area yang menjadi jarak antara border elemen dengan
konten yang ditampilkan. Ketika kita menerapkan background-color
maka warna tersebut diterapkan pada area padding. Penerapan
ukuran padding pada elemen merupakan opsional.
 Border : Merupakan garis yang mencakup konten beserta padding.
Penerapan border pada elemen merupakan opsional.
 Margin : Berbeda dengan padding, margin merupakan area jarak diluar
dari border. Pada ilustrasi diatas, margin ditunjukkan dengan warna
merah muda namun pada aslinya margin selalu transparan dan
penerapan margin pada elemen merupakan opsional.

Edge of element : merupakan batas dari suatu elemen. Di dalamnya

terdapat margin, border, padding dan konten. Pada ilustrasi di atas,
batas elemen ditunjukkan dengan garis putus tetapi pada aslinya batas
elemen selalu tidak terlihat.
Box Dimensions
Secara standar sebuah box yang dihasilkan tiap elemen selalu cukup untuk
menampung konten. Tetapi kita dapat mengatur nilai dimensi dari box tersebut
dengan properti width dan height.
Cara yang paling banyak digunakan dalam menentukan dimensi kotak adalah
dengan menggunakan pixel, persentase, atau ems. Secara tradisional, pixel
merupakan cara yang paling populer karena kita dapat merancang dan
mengontrol ukuran secara akurat.
Berbeda ketika kita menggunakan persentase, ukuran kotak akan relative atau

menyesuaikan dari ukuran lain, seperti ukuran jendela browser atau ukuran induk
yang menaunginya. Sedangkan ketika menggunakan ems, nilai dimensi kotak
akan menyesuaikan berdasarkan ukuran teks yang ditampilkan pada konten
elemen tersebut.
Pada saat ini banyak developer mulai merancang menggunakan persentase dan
ems untuk menetapkan ukuran box agar dapat menyesuaikan dengan berbagai
macam ukuran layar.
<!doctype html>
<html lang="en">
<head>
<style>
.box {
height: 300px;
width: 300px;
background-color: #11C5C6;
}
p {
height: 75%;
width: 75%;
background-color: #FBDD1C;
}
</style>
</head>
<body>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus officiis
perspiciatis quidem ratione? Distinctio eos ex expedita iusto necessitatibus velit,
veritatis. Aliquid, debitis dignissimos in iusto magnam nulla sed tempora.</p>
</div>
</body>
</html>
Berkas di atas jika kita buka melalui browser akan tampak seperti ini:
Pada contoh di atas kita dapat melihat elemen <div> memiliki dimensi elemen

dengan lebar 300px dan tinggi 300px. Di dalamnya terdapat elemen <p> yang
memiliki ukuran elemen 75% dari lebar dan tinggi elemen induknya. Dengan
begitu berarti elemen <p> memiliki ukuran 225px untuk panjang dan lebarnya.
Limiting Dimension
Beberapa website yang ada sekarang menampilkan layout yang dapat melebar

dan menyempit mengikuti ukuran layar pengguna. Pada prinsip tampilan tersebut
mungkin kita memerlukan sebuah limitasi ukuran yang harus ditampilkan agar
konten selalu dapat ditampilkan secara proporsional. Untuk melakukannya kita
manfaatkan properti min-width dan max-width.
 min-width : merupakan properti yang digunakan untuk menetapkan nilai

lebar minimal yang harus dimiliki elemen.
 max-width : merupakan properti yang digunakan untuk menetapkkan nilai
lebar maksimal yang harus dimiliki elemen.
Keduanya merupakan properti yang sangat membantu untuk memastikan konten

halaman dapat terbaca oleh pengguna (terutama ketika pengguna menggunakan
ponsel). Misalnya, kita dapat menggunakan properti max-width untuk memastikan
bahwa baris teks yang muncul tidak terlalu lebar.
<!doctype html>
<html lang="en">
<head>
<style>
.content {
max-width: 800px;
height: 400px;
margin: 0 auto;
background-color: deeppink;
}
p {
font-size: 1.5em;
font-weight: bold;
}
</style>
</head>
<body>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eius
explicabo fuga iusto magni minus odit praesentium, quasi quisquam quos repellat suscipit
tempora tenetur? Assumenda cum laborum officiis quos ratione.</p>
</div>
</body>
</html>
Berkas di atas jika kita buka pada browser akan tampak seperti ini:
Dengan cara yang sama, mungkin kita juga perlu membatasi ukuran panjang. Kita
bisa gunakan min-height dan max-height.
Overflowing Content
Dimensi box yang dihasilkan elemen selalu cukup untuk menampung konten
tetapi hal ini tidak berlaku jika kita tetapkan secara manual panjang dan lebarnya.
Tak jarang terjadi overflow ketika kita menerapkan ukuran pada elemen tetapi
konten di dalamnya begitu banyak. Contohnya seperti berikut:
<!doctype html>
<html lang="en">
<head>
<style>
div {
height: 200px;
width: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet
corporis cupiditate dignissimos error expedita explicabo facere facilis, ipsam itaque
libero modi officiis optio perspiciatis provident quam sequi voluptatem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut corporis facere
harum inventore iure, quisquam recusandae reprehenderit veritatis voluptatum. Ducimus
exercitationem illo nam sapiente suscipit, tenetur ullam ut voluptas!</p>
</div>
</body>
</html>
Untuk menangani kasus seperti ini kita bisa gunakan properti overflow. Properti ini
dapat bernilai:
 visible : Merupakan nilai default pada properti ini. Konten yang tidak
tertampung (overflow) akan tetap ditampilkan seperti pada standarnya.
 hidden : Jika terjadi overflow, maka konten yang tidak tertampung akan
disembunyikan.
 scroll : Memunculkan scroll bar pada pinggir elemen, sehingga konten yang
tidak tertampung akan ditampilkan dengan scroll bar. Jika menggunakan
nilai ini, scroll bar akan tetap muncul walaupun konten tidak terjadi
overflow.
 auto : Sama seperti scroll, bedanya jika tidak terjadi overflow, maka nilai
visible yang akan diterapkan.
Box-sizing
Sebelum CSS3 ukuran lebar dan panjang elemen mengacu pada konten elemen
(content-box). Itu berarti ukuran elemen seluruhnya merupakan nilai panjang dan
lebar yang kita spesifikasikan ditambah dengan nilai padding dan border yang
diterapkan pada elemen. Hal tersebut membuat sebagian developer menjadi sulit
menetapkan ukuran dimensi.
Pada CSS3 kita dapat memilih tipe pengukuran lain dalam menentukan dimensi
elemen. Dengan menggunakan properti box-sizing kita dapat menentukannya
berdasarkan border box, di mana ukuran elemen sudah termasuk content,
padding dan border. Dengan metode ini, hasil elemen yang ditampilkan
(termasuk padding dan border) akan memiliki dimensi yang sama persis seperti
yang kita tentukan.
<!doctype html>
<html lang="en">
<head>
<style>
div {
height: 200px;
width: 200px;
background-color: lightgreen;
border: 10px solid cornflowerblue;
padding: 20px;
}
.content {
box-sizing: content-box;
}
.box {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content">
</div>
<p>Elemen menerapkan <code>box-sizing: content-box;</code> Ukuran box secara

keseluruhan akan menjadi 260px lebar, 260px tinggi; 260 = 200 + 20 + 20 + 10 + 10</p>
<br>
<div class="box">
</div>
<p>Elemen menerapkan <code>box-sizing: border-box;</code> Ukuran box akan tetap 200px

lebar, 200px tinggi meskipun menerapkan padding dan border</p>
</body>
</html>
Border
Border merupakan sebuah garis yang mengelilingi area konten
dan padding (opsional). Kita bisa mengatur tipe, ketebalan, serta warna garis
yang ditampilkan sesuai dengan yang kita inginkan. Kita juga bisa mengatur
dalam menampilkan sebagian atau keseluruhan garis pada elemen. Mari kita
eksplorasi apa saja properties yang dapat mengatur border.
Border Width
Properti border-width digunakan untuk mengatur ketebalan dari border. Nilai dari

properti ini dapat berupa pixel atau menggunakan predefined names value
seperti thin, medium, dan thick. Kita tidak bisa menggunakan nilai persentase (%)
pada properti ini.
Kita dapat mengatur ukuran garis secara individual dengan menggunakan empat
properti terpisah seperti ini:
. .box {
. border-top-width: 2px;
. border-right-width: 1px;
. border-bottom-width: 1px;
. border-left-width: 2px;
. }
Tetapi kita juga dapat menetapkan nilai keempatnya sekaligus dalam satu properti
seperti ini
. .box {
. border-width: 2px 1px 1px 2px; /*top right bottom left*/
. }
Properti border-width dapat ditentukan dengan menggunakan satu, dua, tiga, atau

empat nilai. Berikut penjelasannya:
 Ketika satu nilai ditentukan, maka nilai berlaku untuk empat sisi.
 Ketika dua nilai ditentukan, nilai pertama berlaku untuk sisi atas dan
bawah, nilai kedua untuk sisi kiri dan kanan.
 Ketika tiga nilai ditentukan, nilai pertama berlaku untuk sisi atas, nilai yang
kedua untuk sisi kiri dan kanan, nilai ketiga untuk sisi bawah.
 Ketika empat nilai ditentukan, nilai pertama berlaku untuk sisi atas, nilai
yang kedua untuk sisi kanan, nilai yang ketiga untuk sisi bawah, dan nilai
yang keempat untuk sisi kiri. Urutan tersebut berdasarkan arah jarum jam
(clockwise).
Border Style
Kita bisa menetapkan tipe border dengan menggunakan properti border-style.

Berikut nilai - nilai yang dapat digunakan pada properti ini:
Nilai Penjelasan Gambar

Properti
solid Tipe garis padat (tidak terputus - putus)
dotted Garis yang dibentuk dari serangkaian

titik-titik (jika ketebalan garis 2px, maka
titik-titik akan berukuran 2px dan
memiliki jarak 2px antar titiknya).
dashed Garis yang dibentuk dari serangkaian
garis pendek.
double Garis yang dibentuk dari dua buah garis

padat.
groove Tipe garis yang berbentuk seperti frame
hidden Digunakan untuk menyembunyikan garis

pada elemen.
Kita juga bisa menetapkan tipe garis secara individual pada sisi elemen dengan
menggunakan empat properti terpisah. Contohnya seperti ini:
. .box {
. border-top-style: solid;
. border-right-style: dotted;
. border-bottom-style: groove;
. border-left-style: double;
.
. border-width: 4px;
. border-color: red;
. width: 200px;
. height: 50px;
. }
Jika kita menerapkan rule seperti di atas, maka hasilnya akan tampak seperti ini:
Border Color
Properti terakhir adalah border-color. Properti ini digunakan untuk menentukan

warna pada garis dengan menggunakan nilai RGB, Hex, atau nama warna pada
CSS.
. /* menggunakan rgb format */

. border-color: rgb(80, 138, 212);
.
. /* menggunakan format hex */
. border-color: #4ee717;
.
. /* menggunakan nama warna */
. border-color: red;
Sama seperti properti border yang lain, kita dapat menentukan warna pada

individual sisi pada elemen dengan menggunakan properti yang terpisah.
. border-top-color: #919191;
. border-right-color: #111111;
. border-bottom-color: #4ee717;
. border-left-color: #00c8eb;
Tetapi kita juga dapat menetapkan nilai keempatnya sekaligus dalam satu properti
seperti ini:
. border-color: #919191 #111111 #4ee717 #00c8eb;
Hasilnya seperti ini:
Shorthand
Untuk menerapkan border pada elemen kita harus mendefinisikan seluruh

properti border yang ada. Dimulai dari menetapkan ketebalan (border-width), tipe
(border-type), dan warna (border-color). Jika kita lupa menetapkan salah satu
properti tersebut, maka garis tidak akan nampak pada elemen.
Dengan begitu tentu untuk menetapkan border pada elemen, kita perlu
menuliskan properti yang banyak bukan? Ya memang, tetapi CSS menyediakan
jalan pintas (shorthand) untuk membuat border dengan satu properti saja.
Properti border memiliki tiga buah nilai yang digunakan untuk menentukan
ketebalan, tipe dan warna pada border. Berikut contoh penerapannya:
. .box {
. border: 4px dashed #00a2c6;
. width: 200px;
. }
Hasilnya seperti ini:

Perlu kita perhatikan bahwa penulisan urutan harus benar. Nilai pertama
digunakan untuk ketebalan, yang kedua untuk tipe, dan yang ketiga untuk warna
garis.
Padding
Padding merupakan jarak antara area konten dan border. Padding banyak
diterapkan pada elemen jika elemen tersebut menerapkan warna latar atau pun
border. Padding memberikan sedikit ruang sehingga konten di dalam elemen
dapat lebih nyaman untuk ditampilkan. Contohnya:
<!doctype html>
<html lang="en">
<head>
<style>
p {
border: 4px solid #00a2c6;
width: 275px;
}
p.example {
padding: 10px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae commodi
dignissimos eaque fugiat inventore maiores neque nisi sint. A dolore eaque fuga, iste
minus porro provident sit tempore ullam.</p>
<p class="example">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
assumenda blanditiis cum dignissimos enim esse excepturi illum inventore maiores minima,
nemo nisi obcaecati officia pariatur qui quibusdam sed. Ab, dolorum?</p>
</body>
</html>
Jika berkas di atas dijalankan pada browser, maka akan tampak seperti ini:
Seperti yang kita lihat, paragraf kedua jauh lebih nyaman dibaca karena terdapat
jarak antara teks dan border dari kotak. Kotak pun menjadi sedikit lebar karena
adanya padding.
Pixel merupakan satuan yang sering digunakan dalam menetapkan nilai properti
ini (meskipun kita bisa juga menggunakan persentase atau ems). Jika
menetapkan menggunakan persentase, maka nilai akan menjadi relatif pada
elemen induk atau jendela browser (jika tidak memiliki induk elemen).
Kita dapat menentukan nilai padding yang berbeda untuk masing-masing sisi

elemen dengan menggunakan:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
Atau dengan menggunakan shorthand seperti berikut:

padding: 10px 15px 10px 15px;
Sehingga padding akan diterapkan seperti gambar di bawah ini.
Margin
Seperti halnya padding, margin merupakan ruang atau jarak pada sebuah
elemen. Namun jarak tersebut terletak di luar dari konten dan border elemen.
Margin digunakan untuk menjaga elemen agar tidak bertabrakan satu sama lain
atau dari tepi jendela browser.
Sebelum menerapkan margin
Setelah menerapkan margin 20px.
Margin ini bersifat collapsed, yang artinya dapat menumpuk jika terdapat dua
margin yang saling bertumpukan. Anda bisa melihat pada margin bawah dan
margin atas pada kedua elemen tersebut. Hal itu menjelaskan mengapa jarak
vertikal antar elemen tersebut tidak 40px melainkan 20px. Jika terjadi
pertumpukan margin, maka nilai yang paling besar yang akan diterapkan.
Kita dapat menentukan nilai margin yang berbeda untuk masing-masing sisi

elemen dengan menggunakan:
. margin-top: 10px;
. margin-right: 15px;
. margin-bottom: 20px;
. margin-left: 25px;
Tapi kita juga dapat menggunakan shorthand untuk menetapkan keempat nilai
tersebut dalam satu properti
. margin: 10px 15px 20px 25px;
Kita juga bisa menggunakan dua nilai saja untuk menentukan nilai margin vertikal
dan horizontal.
. margin: 10px 15px; /* top dan bottom bernilai 10px, left dan right bernilai 15px
*/
Centering Content
Bagaimana meletakkan sebuah kotak tepat pada tengah sebuah halaman atau di
dalam elemen induknya? Aturlah margin kanan dan kiri dengan nilai auto. Lebih
lanjut, kita juga harus menentukan lebar dari kotak tersebut (menggunakan
properti width). Jika tidak, kotak akan mengambil lebar penuh pada halaman atau
induk elemen.
Setelah kita menentukan lebar kotak dan mengatur margin kiri dan kanan
menjadi auto, maka secara otomatis browser akan memberi jarak yang sama di
setiap sisi horizontal kotak, sehingga membuat kotak berada di tengah halaman.
Berikut contohnya:
. <!DOCTYPE html>
. <html lang="en">
. <head>
. <meta charset="UTF-8">
. <title>Margin</title>
. <style>
. .center {
. margin: 0 auto;
. }
. .box {
. width: 50%;
. border: 4px solid darkblue;
. padding: 20px;
. margin-bottom: 20px;
. }
. </style>
. </head>
. <body>
. <div class="box">
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur autem
commodi dignissimos dolores ea, eaque,
. earum esse harum illo in incidunt molestias nam non qui recusandae sunt
ullam veniam vero!</p>
. </div>
. <div class="box center">
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi ea, id.
Aliquid consectetur dolorum
. exercitationem ipsam, necessitatibus nostrum pariatur sunt! Accusantium
architecto at dolorem itaque quisquam
. quod soluta sunt voluptatum.</p>
. </div>
. </body>
. </html>
Jika berkas tersebut kita buka pada browser, maka akan tampak seperti berikut:
Display Roles
Kita pernah membahas mengenai inline dan block pada modul HTML
sebelumnya. Kita telah paham bahwa standarnya, tiap elemen HTML memiliki
dua tipe yaitu block dan inline. Untuk lebih jelasnya berikut sifat - sifat yang
ada pada elemen block dan juga inline:
inline element:
 Elemen HTML yang secara default tidak menambahkan baris baru

ketika dibuat.
 Nilai lebar dan tinggi elemen inline sebesar konten di dalamnya, dan
tidak dapat diubah.

Margin dan padding hanya mempengaruhi elemen secara horizontal,

tidak vertikal.
block element:
 Elemen HTML secara default menambahkan baris baru ketika dibuat.

 Jika tidak diatur lebarnya, lebar dari elemen block akan memenuhi
lebari dari browser atau elemen yang menaunginya.
 Kita dapat mengatur dimensi dari elemen block.

Di dalam elemen block, kita dapat menyimpan tag elemen HTML

lainnya.

Dengan menggunakan properti display, kita dapat mengubah sebuah elemen
inline menjadi block, begitupun sebaliknya. Dalam hal ini, properti ini juga
dapat digunakan untuk menyembunyikan elemen yang ditampilkan.
Nilai dari properti ini dapat berupa:
 inline : digunakan untuk mengubah elemen block berperilaku seperti

elemen inline.
 block : digunakan untuk mengubah elemen inline berperilaku seperti
elemen block.
 inline-block : membuat elemen block tidak menambahkan baris baru
ketika dibuat, namun tetap mempertahankan sifat lain dari elemen
block.

none : digunakan untuk menyembunyikan elemen dari halaman.
Properti ini banyak sekali digunakan dalam kasus dalam pembuatan navigasi.
Biasanya navigasi dibuat menggunakan elemen list yang memiliki sifat block,
sehingga item list selalu ditampilkan dalam baris baru. Dengan menggunakan
properti display, kita dapat mengubah perilaku elemen list tersebut dengan
menerapkan inline, sehingga item list dapat ditampilkan secara horizontal.
. <!DOCTYPE html>
. <html lang="en">
. <head>
. <meta charset="UTF-8">
. <title>Display</title>
. <style>
. li {
. display: inline;
.
. margin-left: 5px;
. }
. </style>
. </head>
. <body>
. <ul>
. <li>Home</li>
. <li>Product</li>
. <li>About</li>
. <li>Contact</li>
. </ul>
. </body>
. </html>
Jika berkas tersebut dibuka pada browser, maka akan tampak seperti berikut:
Box Shadow
Pada materi formatting text kita sudah belajar cara menambahkan drop
shadow pada teks. Pada CSS3 kita juga dapat menambahkan drop shadow di
sekitar kotak elemen (tidak termasuk margin) dengan menggunakan
properti box-shadow.
Nilai dan cara kerja dari properti box-shadow mirip seperti text-shadow, yaitu

nilainya menentukan jarak vertikal dan horizontal, tingkat keburaman, dan
warna pada bayangan. Pada box shadow, kita juga dapat menentukan tingkat
sebaran (spread) bayangan. Semakin besar nilai, bayangan yang nampak
akan semakin luas. Berikut contoh penerapan box shadow pada CSS:
. box-shadow: 6px 6px 5px 10px #666666;
Jika rules tersebut diterapkan pada box, maka akan tampak seperti ini:
Berikut penjelasan tiap-tiap nilai dari propertinya:
 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 (opsional) : menentukan tingkat sebaran (spread)
bayangan. Semakin besar nilai yang ditentukan, bayangan yang
nampak pun semakin luas.

Nilai Kelima : menentukan warna yang digunakan pada bayangan.
Rounded Corner
CSS3 memperkenalkan kemampuan untuk membuat rounded corner atau sudut
bundar pada box dengan menggunakan properti border-radius. Nilai dari properti
ini merupakan tingkat lengkungan border dalam pixel.
. .rounded {
. border-radius: 10px;
. }
Jika diterapkan, pinggiran border akan tampak seperti ini:
Kita bisa menetapkan nilai pada individu siku kotak dengan menggunakan
properti yang terpisah, seperti ini:
. .rounded {
. border-top-right-radius: 5px;
. border-bottom-right-radius: 10px;
. border-bottom-left-radius: 5px;
. border-top-left-radius: 10px;
. }
Atau kita dapat menggunakan shorthand sehingga dapat menetapkan keempat

nilainya dalam satu properti.
. .rounded {
. border-radius: 10px 5px 10px 5px;
. }
Maka tiap sisi dari border memiliki ketajaman yang berbeda seperti ini.
Menerapkan Box Model pada Halaman Profil
Pada latihan sebelumnya, kita sudah menerapkan font yang didapatkan dari
Google Font dengan properti font-family dan mengubah warna font dengan
menggunakan properti color. Nah setelah mempelajari komponen box
seperti padding, border, dan margin saatnya kita terapkan pada proyek yang
sudah kita buat sebelumnya. Mulai dari menetapkan ukuran gambar,
membuat efek gaya kartu, dan membuat jumbotron.
Hingga pada akhir latihan ini kita dapat mempercantik tampilan website profil
tampak seperti ini:
Sudah siap? Silakan buka kembali proyeknya dengan text editor yang Anda

miliki.
Menetapkan ukuran pada gambar

Sekarang saatnya kita mulai terapkan apa yang baru kita pelajari. Langkah
pertama mari kita ubah dimensi dari gambar yang kita tampilkan. Pada
berkas style.css, buat rule baru untuk selector .featured-images dengan
properti dan nilai sebagai berikut:
. .featured-image {
. width: 100%;
. max-height: 300px;
. }
Kemudian terapkan rule tersebut pada seluruh elemen gambar kecuali

gambar logo kota Bandung yang terdapat di dalam elemen <aside>. Untuk
menerapkannya kita tuliskan class atribut dengan nilai featured-image.
. <img src="assets/image/history.jpg" class="featured-image" alt="sejarah">

.
. ...
.
. <img src="assets/image/geografis.jpg" class="featured-image" al
t="geografis">
.
. ...
.
. <img src="assets/image/farm-house.jpg" class="featured-image" alt="farm
house">
.
. ...
.
. <img src="assets/image/bosscha.jpg" class="featured-image" alt="bosscha">
Setelah menerapkannya maka tampilan gambar akan menjadi seperti ini:
Gambar yang ditampilkan jadi memenuhi lebar jendela browser. Namun

karena kita menetapkan juga properti max-height, gambar yang ditampilkan
menjadi tidak proporsional. Solusinya kita tambahkan properti object-fit:
cover; dan object-position: center; pada .featured-image selector.
. .featured-image {
. width: 100%;
. max-height: 300px;
. object-fit: cover;
. object-position: center;
. }
Kedua properti tersebut membuat gambar yang ditampilkan dapat

menyesuaikan lebar dan panjang dengan mempertahankan kualitas rasio
aslinya. Tetapi untuk menyesuaikannya terdapat area gambar yang terpotong
atau tidak ditampilkan, tetapi tampilan gambar akan tetap proporsional.
Selanjutnya kita atur juga ukuran gambar logo kota Bandung pada
elemen <aside>. Agar logo tampak tidak terlalu besar kita atur properti width
dengan nilai 200px. Silakan buat rules baru dengan selector .profile img,
kemudian tuliskan properti width dengan nilainya.
. .profile img {
. width: 200px;
. }
Sehingga sekarang logo akan nampak lebih kecil.
Menerapkan card style pada elemen <article>
Selanjutnya kita atur tampilan pada tiap elemen <article>, buat elemen tersebut
bergaya card effect dengan menerapkan properti box-shadow dan border-
radius sehingga hasilnya akan tampak seperti ini:
Pertama kita buat rule baru dengan selector .card, kemudian terapkan properti
dan nilainya sebagai berikut:
. .card {
. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
. }
Selanjutnya terapkan rule tersebut pada seluruh elemen <article> yang ada.

Untuk menerapkannya, tambahkan atribut class dengan nilai card.
. <article id="sejarah" class="card">

.
. ...
.
. <article id="geografis" class="card">
.
. ...
.
. <article id="wisata" class="card">
. ...
.
. <aside>
. <article class="profile card">
. ....
Sekarang tiap sisi elemen <article> akan tampak dikelilingi oleh drop shadow dan

memiliki ujung yang bulat pada tiap sisinya.
Jika dirasa drop shadow tak terlalu jelas, kita bisa mengubah nilainya. Agar
mudah dalam menentukan nilai drop shadow yang kita inginkan, kita bisa
gunakan tools yang tersedia secara online pada tautan
berikut: https://www.cssmatic.com/box-shadow.
Selanjutnya kita perbaiki tepian konten pada card karena tampak terlalu sempit
dari sisi cardnya. Alhasil, konten agak sulit dibaca. Kita bisa mengaturnya dengan
properti margin dan padding. Silakan tambahkan properti dan nilai berikut pada
rule .card:
. .card {
. padding: 20px;
. margin-top: 20px;
. }
Sekarang konten di dalam card lebih proporsional dan mudah dibaca, bukan?
Menerapkan Jumbotron dan Navigasi pada header
Selanjutnya kita akan mengatur header dengan membuat efek jumbotron dan

memperbaiki tampilan navigasi menjadi nampak seperti ini:
Sebagai angkah awal, yuk kita buat rule baru dengan selector .jumbotron lalu
terapkan properti dan nilainya seperti ini:
. .jumbotron {
. font-size: 20px;
. padding: 60px;
. background-color: #00c8eb;
. color: white;
. }
Lalu pada berkas HTML, letakkan elemen <h1> dan <p> yang terdapat

pada <header> dengan menggunakan <div> yang diberikan atribut
class jumbotron. Sehingga struktur HTML pada elemen <header> tampak
seperti ini:
. <header>
. <div class="jumbotron">
. <h1>Bandung</h1>
. </div>
. <nav>
. <ul>
. </ul>
. </nav>
. </header>
Sehingga sekarang header akan nampak dengan efek jumbotron.
Lanjut, kita akan memperbaiki tampilan navigasi agar terlihat cocok dengan
header yang ditampilkan. Seperti biasa, buatlah rule baru dengan
selector nav li. Selector tersebut akan mengatur elemen <li> yang menjadi
turunan dari elemen <nav>, berikan properti dan nilai berikut pada selector
tersebut:
. nav li {
. display: inline;
. list-style-type: none;
. margin-right: 20px;
. }
Nilai inline pada properti display akan membuat elemen <li> menerapkan sifat

inline, sehingga elemen akan ditampilkan tanpa membuat baris baru. Dan
properti list-style-type dengan nilai none akan menghilangkan tanda titik yang
dihasilkan tiap item pada list. Dengan begitu navigasi akan nampak seperti
ini:
Selanjutnya beri background-color dan ubah warna teks pada navigasi agar

nampak sesuai dengan header. Tuliskan rule baru dengan selector nav
kemudian atur background-color dan padding dengan nilai berikut:
. nav {
. background-color: #00a2c6;
. padding: 5px;
. }
Kemudian untuk mengatur warna teks pada navigasi, kita tambahkan properti
color pada selector nav a yang sudah kita buat pada latihan sebelumnya.
. nav a {
. font-size: 18px;
. font-weight: 400;
. text-decoration: none;
. color: white;
. }
Dengan begitu navigasi akan terlihat sesuai dengan header yang ditampilkan.
Pada langkah ini, website yang kita bangun sudah mulai tampak menarik
bukan?
Menyesuaikan Padding dan Margin pada body dan elemen <main>
Terakhir kita akan menyesuaikan margin dan padding yang ditampilkan pada
body dan elemen <main>. Sehingga akan tampak seperti ini:
Pertama kita hilangkan nilai margin dan padding standar browser dengan

menuliskan properti margin dan padding yang diberi
nilai 0 pada body selector.
. body {
. font-family: 'Quicksand', sans-serif;
. margin: 0;
. padding: 0;
. }
Dengan begitu layout yang ditampilkan akan memenuhi seluruh lebar dan
tinggi dari jendela browser.
Tetapi konten yang terdapat di dalam elemen <main> perlu sedikit jarak agar

konten yang ditampilkan sedikit nyaman untuk dilihat. Kita dapat atur jarak
tersebut dengan menambahkan padding pada selector main. Silakan tuliskan
rule baru dengan selector main dan beri nilai 20px pada properti padding.
. main {
. padding: 20px;
. }
Nah sekarang website pun jadi lebih nyaman dilihat.
Pada latihan selanjutnya kita akan memindahkan elemen aside sehingga

berada di samping elemen content. Untuk melakukannya kita harus mengenal
dulu apa itu positioning dan floating. Sampai jumpa di materi selanjutnya ya!
Positioning
Kita sudah mengetahui cara mengubah posisi dari sebuah elemen dengan
menggunakan margin. Namun ketika melakukannya, posisi elemen lain di
sekitarnya akan terpengaruh. Lantas bagaimana jika kita ingin memindahkan
tanpa mengganggu posisi elemen lainnya? Solusinya kita perlu mengubah
positioning schema dengan menggunakan properti position dalam mengontrol
letak elemen tersebut. Berikut nilai dari properti position yang ada pada CSS:
Normal Flow / Static Flow : Merupakan default behaviour yang dimiliki

elemen, di mana setiap elemen block akan ditampilkan dalam baris
baru ketika dibuat. Sehingga setiap elemen block selalu muncul di
bawah dari elemen block sebelumnya. Bahkan jika masih terdapat
ruang kosong pada samping elemennya, mereka tidak akan nampak
bersebelahan.


Relative Positioning : Membuat elemen bisa berpindah posisi ke atas,

kanan, bawah, maupun kiri dari posisi semula atau posisi seharusnya
elemen tersebut berada. Perpindahan posisi ini tidak akan
berpengaruh terhadap posisi elemen di sekitarnya karena ketika
menggunakan relative positioning, elemen tersebut akan dipindahkan
dari normal flow.


Absolute Positioning : Sama seperti relative, elemen akan dipindahkan

keluar dari normal flow sehingga kita dapat memindahkan posisi
elemen ke atas, kanan, bawah, maupun kiri secara leluasa tanpa
mengganggu elemen di sekitarnya. Namun posisinya relatif pada
jendela browser dan induk elemen selama induk elemen juga berada di
luar dari normal flow.

 Fixed Positioning : Merupakan absolute position namun posisinya
selalu relatif pada jendela browser. Bahkan ketika
pengguna scrolling pun, posisinya di layar akan tetap tak berubah.
Sebelum kita membahas satu persatu skema tersebut, mungkin kita perlu
memahami lebih detail lagi apa sebenarnya normal flow atau biasa disebut
“static flow” itu, dan mengapa untuk memindahkan posisi elemen kita perlu
mengeluarkannya dari static flow.
Perbedaan Static Flow dan Non-Static Flow.

Sebenarnya CSS memiliki dua buah flow yang bisa digunakan untuk
menampilkan elemen, yakni static dan non-static. Agar mudah memahami
perbedaan antar keduanya, kita gambarkan sebuah halaman website dengan
tampilan tiga dimensi.
Bayangkan kita memiliki tiga buat elemen div berukuran 200px x 200px yang
masing-masing memiliki warna yang berbeda.
. .box {
. width: 200px;
. height: 200px;
. }
.
. .first {
. background-color: #60d0a8;
. }
.
. .second {
. background-color: #6495ed;
. }
.
. .third {
. background-color: #ffa500;
. }
Karena kita tidak mengatur properti position dari ketiga elemen tersebut,
maka tiap elemen akan ditampilkan dengan static flow seperti ini:
Ketika kita ingin mengubah letak kotak biru (kotak kedua) dengan
menggunakan margin-top: 20px; tentu akan berpengaruh pada posisi elemen
di bawahnya.
. .second {
. margin-top: 20px;
. }
Pada ilustrasi di atas kita bisa lihat bahwa kotak yang berwarna oranye ikut
bergeser ke bawah. Berbeda ketika kita menerapkan properti position yang
dapat membuat elemen keluar dari static flow. Contohnya kita menerapkan
properti position dengan nilai relatif.
. .second {
. position: relative;
. }
Pada tampilan browser mungkin tidak terdapat perbedaan apapun setelah

menerapkan nilai relative pada atribut position. Namun sebenarnya elemen
yang menerapkannya akan diangkat dari luar static flow seperti yang
ditampilkan pada ilustrasi 3D. Sehingga elemen tersebut dapat leluasa
berpindah posisi tanpa mempengaruhi elemen yang berada pada static flow.
Untuk mengubah posisi elemen yang berada di non-static flow, kita dapat
menggunakan properti top, right, bottom, maupun left.
. .second {
. top: 30px;
. left: 10px;
. }
Perlu kita ingat ya, bahwa properti top, left, right dan bottom pada CSS hanya
akan berpengaruh pada elemen yang menerapkan non-static flow (elemen
yang menerapkan nilai relative, absolute, dan fixed pada properti position).
Normal Flow
Dalam flow normal, setiap elemen block ditempatkan di bawah elemen
sebelumnya. Karena ini merupakan cara standar browser memperlakukan
elemen HTML, kita tidak perlu menetapkan nilai properti position ketika ingin
membuat perilaku seperti ini tetapi secara sintaks perilaku ini ditetapkan
dengan nilai static.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. h1 {
. background-color: #aaaaaa;
. padding: 30px;
. }
.
. p {
. width: 450px;
. }
. </style>
. </head>
. <body>
. <h1>Lorem ipsum dolor sit amet.</h1>
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium
iusto non optio vel voluptas? Assumenda
. blanditiis consequatur doloribus porro quasi similique vero voluptatibus.
Adipisci, tenetur.</p>
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
commodi consectetur dolore eligendi, esse fuga
. hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus
reprehenderit saepe, sit soluta vel vero!</p>
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut
corporis deleniti doloremque et excepturi
. expedita labore libero, placeat, quaerat rerum ullam vitae voluptate.
Accusantium et explicabo qui tenetur unde.
. Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
. </body>
. </html>
Pada contoh di atas kita tidak menetapkan nilai lebar pada elemen heading,
tapi bisa kita lihat bahwa elemen heading tersebut mencakup seluruh lebar
ruang yang ada pada jendela browser.
Sedangkan elemen paragraf kita atur lebarnya dengan nilai 450px sehingga
elemen tersebut tidak mencakup seluruh lebar ruang yang ada. Elemen
paragraf selanjutnya tetap ditampilkan di bawahnya meskipun masih terdapat
ruang yang cukup disampingnya.
Hal tersebut merupakan contoh dari gambaran bagaimana flow

normal bekerja.
Relative Positioning
Seperti yang kita ketahui sebelumnya, dengan menetapkan relative pada
properti position, kita dapat melakukan perpindahan posisi elemen ke atas,
kanan, bawah, maupun kiri. Perpindahan posisi yang dilakukan tidak akan
berpengaruh terhadap posisi elemen di sekitarnya karena dengan relative
positioning, elemen tersebut akan dipindahkan dari normal flow. Untuk
menggunakan relative positioning kita tetapkan nilai relative pada properti
position.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. h1 {
. padding: 30px;
. }
.
. p {
. width: 450px;
. }
.
. .relative {
. top: 10px;
. left: 100px;
. }
. </style>
. </head>
. <body>
. <h1>Lorem ipsum dolor sit amet.</h1>
. <p class="relative">Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Accusamus commodi consectetur dolore eligendi, esse fuga hic
laboriosam nobis nostrum, nulla omnis optio pariatur repellendus
corporis deleniti doloremque et excepturi expedita labore libero, placeat,
quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur
unde. Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
. </body>
. </html>
Berkas di atas jika kita buka melalui browser akan tampak seperti:
Pada contoh di atas, setelah menetapkan nilai position pada paragraf kedua,
kita mengubah posisinya menjadi 10 pixel lebih bawah dan 100px lebih ke
kanan dari posisi yang seharusnya. Perlu kita ingat bahwa perpindahan posisi
mengacu pada posisi elemen seharusnya berada.
Absolute Positioning
Ketika properti position diberikan nilai absolute, akan berperilaku sama
dengan relative. Elemen akan dikeluarkan dari normal flow sehingga jika
elemen dipindahkan posisinya tidak akan berpengaruh pada elemen lain di
sekitarnya.
Namun yang membedakannya adalah elemen ini benar-benar tidak dianggap

ada oleh elemen pada normal flow. Akibatnya, lokasi awal elemen yang
diberikan nilai absolute akan ditempati oleh elemen di bawahnya.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. h1 {
. width: 250px;
. }
.
. p {
. width: 450px;
. }
.
. .absolute {
. position: absolute;
. top: 0;
. left: 500px;
. }
. </style>
. </head>
. <body>
. <h1 class="absolute">Lorem ipsum dolor sit amet.</h1>
commodi consectetur dolore eligendi, esse fuga
. hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus
corporis deleniti doloremque et excepturi
. expedita labore libero, placeat, quaerat rerum ullam vitae voluptate.
Accusantium et explicabo qui tenetur unde.
. Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
aliquid asperiores blanditiis cumque eos ex
. expedita facilis laborum maiores necessitatibus neque, officiis pariatur
porro temporibus unde veritatis vitae?
. Beatae dolores error ex fugiat molestias neque placeat quod ratione
repellat veritatis! A culpa cumque, delectus
. distinctio ducimus earum et ex quas quia quis tempore temporibus
veritatis voluptates. Delectus doloremque mollitia
. nobis?</p>
. </body>
. </html>
Jika berkas di atas dibuka pada browser, maka akan tampak seperti ini:
Pada contoh di atas kita bisa lihat bahwa ketika elemen heading menerapkan

properti position dengan nilai absolute maka elemen di bawahnya (paragraf)
akan menempati posisi yang sebelumnya ditempati oleh
elemen heading tersebut.
Dan perpindahan posisi ketika menggunakan absolute akan relatif pada
jendela browser. Kita bisa lihat bahwa elemen heading bergeser 500px dari
kiri. Tapi selain relatif terhadap jendela browser, nilai ini juga dapat relatif
pada elemen yang menaunginya (elemen induk) selama elemen tersebut juga
berada di luar normal flow. Namun jika tidak, elemen akan menghiraukan
elemen induknya tersebut. Contohnya:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. .parent {
. width: 500px;
. margin: 0 auto;
. border: 4px solid black;
. padding: 20px;
. }
. h1 {
. width: 250px;
. }
. .absolute {
. position: absolute;
. top: 0;
. left: 50px;
. }
. </style>
. </head>
. <body>
. <div class="parent">
. <h1 class="absolute">Lorem ipsum dolor sit amet.</h1>
iusto non optio vel voluptas? Assumenda blanditiis consequatur doloribus
porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>
commodi consectetur dolore eligendi, esse fuga hic laboriosam nobis nostrum,
nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel
vero!</p>
corporis deleniti doloremque et excepturi expedita labore libero, placeat,
quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur
unde. Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
aliquid asperiores blanditiis cumque eos ex expedita facilis laborum maiores
necessitatibus neque, officiis pariatur porro temporibus unde veritatis
vitae? Beatae dolores error ex fugiat molestias neque placeat quod ratione
repellat veritatis! A culpa cumque, delectus distinctio ducimus earum et ex
quas quia quis tempore temporibus veritatis voluptates. Delectus doloremque
mollitianobis?</p>
. </div>
. </body>
. </html>
Jika kita buka berkas di atas pada browser maka akan tampak seperti ini:
Pada contoh kode di atas kita bisa lihat pada .parent kita tidak menetapkan
properti position, sehingga elemen yang menerapkannya berada pada flow
normal. Sehingga elemen heading akan menghiraukan elemen induknya.
Berbeda ketika .parent menerapkan properti position dengan nilai yang dapat

mengeluarkannya dari normal flow, contohnya nilai relative.
Dengan begitu posisi elemen heading akan relatif terhadap .parent.
Fixed Positioning
Fixed positioning merupakan absolute position namun posisinya selalu relatif
pada jendela browser (meskipun diletakan di dalam induk elemen diluar dari flow
normal), bahkan ketika pengguna melakukan scrolling posisinya akan tetap
nampak pada posisinya di layar.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. h3 {
. padding: 10px;
. margin: 0;
. width: 100%;
. }
.
. .fixed {
. position: fixed;
. top: 0;
. left: 0;
. }
. </style>
. </head>
. <body>
. <h3 class="fixed">Lorem ipsum dolor sit amet.</h3>
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto no
n optio vel voluptas? Assumenda
blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisc
i, tenetur.</p>
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi co
nsectetur dolore eligendi, esse fuga
hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderi
t saepe, sit soluta vel vero!</p>
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corpori
s deleniti doloremque et excepturi
expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium
et explicabo qui tenetur unde.
Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid as
periores blanditiis cumque eos ex
expedita facilis laborum maiores necessitatibus neque, officiis pariatur porro te
mporibus unde veritatis vitae?
Beatae dolores error ex fugiat molestias neque placeat quod ratione repellat veri
tatis! A culpa cumque, delectus
distinctio ducimus earum et ex quas quia quis tempore temporibus veritatis volupt
ates. Delectus doloremque mollitia nobis?</p>
. </body>
. </html>
Berkas di atas jika kita buka pada browser maka akan tampak seperti ini:
Pada contoh di atas elemen heading diposisikan di sudut kiri atas jendela browser
dengan properti:
. top: 0;
. left: 0;
Ketika pengguna melakukan scrolling pada halaman, elemen heading tetap

berada pada posisi yang sama dan paragraf yang ditampilkan nampak di
belakang elemen heading tersebut.
Floating
Sederhananya properti float dapat membuat elemen berada pada sebelah
kanan atau kiri. Saat diterapkan pada elemen inline, properti float juga
memungkinkan elemen di sekitarnya mengelilingi elemen tersebut (wrap).
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. .container {
. width: 800px;
. padding: 10px;
. }
.
. img {
. float: left;
. margin: 10px;
. }
. </style>
. </head>
. <body>
. <div class="container">
. <img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
asperiores commodi corporis doloribus eum ipsum obcaecati pariatur quam quo,
voluptatum? A, assumenda atque delectus dolore nam natus neque quisquam
repudiandae?</p>
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At deserunt
illum inventore numquam officia recusandae, sit! Ab asperiores delectus
dolor, eius est explicabo impedit ipsa ipsum itaque mollitia neque nihil
nisi officia praesentium sint! Accusantium libero obcaecati provident qui?
Error!</p>
. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam
debitis dolorem eaque eius eos error eum ex facilis fuga ipsa iste iusto
mollitia nam natus necessitatibus praesentium quam qui quod, rerum sed sequi
sint voluptates? Atque enim, ex facere fugiat ipsum mollitia quos sunt. At,
autem commodi dolorum eos, est expedita, incidunt molestias nobis nostrum
officia porro reiciendis saepe voluptatum.</p>
. </div>
. </body>
. </html>
Berkas di atas, jika kita buka melalui browser akan tampak seperti gambar ini:
Selain dalam membuat text wrapping. Float juga merupakan salah satu teknik
dalam membuat layout website. Teknik ini masih banyak digunakan oleh
developer karena sangat mudah dipahami dan tergolong mudah
untuk multiple column seperti gambar berikut
Hal ini dapat dilakukan dengan mudah menggunakan properti float, karena

nilai dari properti ini adalah left dan right. Nilai tersebut menunjukan posisi
elemen harus diletakkan. Contoh penerapannya seperti berikut ini:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. * {
. /* digunakan untuk menghapus seluruh padding dan margin standar
yang diberikan browser pada elemen */
. margin: 0;
. padding: 0;
.
. /* Menggunakan border-box dalam perhitungan dimensi box-nya */
. box-sizing: border-box;
. }
.
. .container {
. width: 800px;
. height: 400px;
. margin: 0 auto;
. }
.
. .left-content {
. line-height: 400px;
. width: 30%;
. height: 100%;
. background-color: #00c7ed;
.
. /* digunakan untuk memindahkan posisi elemen ke sisi kiri
container */
. float: left;
. }
.
. .right-content {
. width: 70%;
. height: 100%;
.
. /* digunakan untuk memindahkan posisi elemen ke sisi kanan
container */
. float: right;
. }
. </style>
. </head>
. <body>
. <div class="left-content">
. <h3>Left Content</h3>
. </div>
. <div class="right-content">
. <h3>Right Content</h3>
. </div>
. </div>
. </body>
. </html>
Berkas di atas jika kita buka pada browser akan tampak seperti berikut:
Dari contoh di atas, kita bisa melihat pada selector .left-content dan .right-
content ditetapkan properti float dengan nilai left dan right, sehingga elemen
tersebut dapat diposisikan secara bersebelahan.
Ketika menggunakan properti float jangan lupa menentukan ukuran lebar dari

propertinya, karena nilai dari lebar menentukan seberapa banyak ruang yang
dicakup oleh elemen. Pada contoh di atas kita menetapkan nilai 30% untuk
konten kiri dan 70% untuk konten sebelah kanan.
Lantas jika nilainya hanya left dan right, bagaimana jika ada lebih dari dua
kolom dalam menyusun layout? Hal tersebut sangat mudah dilakukan. Kita
hanya perlu menetapkan nilai left pada ketiga kolomnya, lantas kolom akan
tampil bersebelahan sesuai urutan penulisan elemen.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. * {
. /* digunakan untuk menghapus seluruh padding dan margin standar
yang diberikan browser pada elemen */
. margin: 0;
. padding: 0;
.
. /* Menggunakan border-box dalam perhitungan dimensi box-nya */
. }
.
. .container {
. width: 800px;
. height: 400px;
. margin: 0 auto;
. }
.
. .left-content {
. width: 33.3%;
. height: 100%;
. background-color: #00c7ed;
. float: left;
. }
.
. .center-content {
. width: 33.3%;
. height: 100%;
. background-color: #d0b541;
. float: left;
. }
.
. .right-content {
. width: 33.3%;
. height: 100%;
. float: left;
. }
. </style>
. </head>
. <body>
. <div class="left-content">
. <h3>Left Content</h3>
. </div>
. <div class="center-content">
. <h3>Center Content</h3>
. </div>
. <div class="right-content">
. <h3>Right Content</h3>
. </div>
. </div>
. </body>
. </html>
Maka akan menghasilkan tampilan seperti gambar berikut:
Permasalahan penerapan float

Properti float terlihat sangat mudah untuk digunakan, baik dalam text
wrapping maupun dalam penyusunan layout. Tetapi bukan berarti ketika
menggunakan properti ini, tiada efek samping atau masalah yang ditimbulkan.
Apa itu?
Jika sebuah elemen induk hanya memiliki satu elemen dengan menerapkan
properti float, ia akan memiliki nilai tinggi 0px. Contohnya seperti berikut:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. .container {
. width: 800px;
. }
.
. img {
. float: left;
. margin: 10px;
. }
. </style>
. </head>
. <body>
. </div>
. </body>
. </html>
Jika dijalankan pada browser akan menghasilkan tampilan seperti:

Pada contoh tersebut kita bisa melihat bahwa elemen gambar berada di
dalam sebuah container div. Tetapi container tersebut tidak memiliki tinggi
senilai gambar yang ditampilkan. Mengapa bisa demikian? Untuk lebih
jelasnya kita coba tambahkan paragraf di dalam container tersebut tanpa
menggunakan properti float.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. .container {
. width: 800px;
. }
.
. img {
. float: left;
. margin: 10px;
. }
. </style>
. </head>
. <body>
adipisci architecto aspernatur dolorem
. doloremque eum excepturi fuga hic, molestias obcaecati officia
perferendis perspiciatis qui saepe ut velit
. veniam vitae voluptatum.</p>
. </div>
. </body>
. </html>
Hasilnya:
Hal ini menunjukkan bahwa elemen yang menerapkan float “tidak dianggap
ada” oleh induk elemen yang menaunginya karena jika menggunakan float,
elemen akan dikeluarkan dari normal flow.
Bagaimana Anda menanganinya?
Terdapat dua cara yang akan kita bahas, yakni dengan pertama,
menggunakan properti clear dan kedua, menetapkan nilai overflow: auto pada
container.
Clear Property
Cara yang pertama adalah dengan menggunakan properti clear.

Properti clear memang dibuat untuk menghilangkan sifat float, dengan
demikian elemen yang menerapkan properti float akan kembali “dianggap
ada”. Namun untuk menerapkan properti ini kita perlu membuat sebuah
elemen kosong (biasanya menggunakan div tanpa konten) yang menerapkan
properti clear.
Nilai dari properti clear merupakan nilai yang digunakan pada properti float
karena properti clear akan menghapus sifat float sesuai dengan nilai yang
ditetapkan. Contohnya seperti ini:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. .container {
. width: 800px;
. }
.
. img {
. float: left;
. margin: 10px;
. }
. .clear {
. clear: left;
. }
. </style>
. </head>
. <body>
. <div class="clear"></div>
. </div>
. </body>
. </html>
Maka hasilnya akan seperti ini:

Jika kita mencoba mengubah clear menjadi clear: right;, maka akan kembali
seperti hasil sebelum menerapkannya.
Lalu bagaimana jika terdapat dua elemen yang menerapkan nilai float
berbeda (left dan right)? Terdapat satu nilai lagi yang dapat menghilangkan
keuda sifat float tersebut, yakni nilai both. Gunakanlah nilai tersebut jika kita
ingin sepenuhnya menghilangkan sifat float pada elemen.
overflow: auto;
Cara yang kedua adalah dengan menetapkan properti overflow: auto; pada

elemen yang menampung elemen float. Sebagian developer lebih memilih
menggunakan cara ini karena lebih praktis dan tidak perlu membuat elemen
baru ketika menggunakannya.
Untuk menerapkannya sangatlah simpel. Cukup tambahkan

properti overflow dengan nilai auto pada container.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. .container {
. width: 800px;
. overflow: auto;
. }
.
. img {
. float: left;
. margin: 10px;
. }
. </style>
. </head>
. <body>
. </div>
. </body>
. </html>
Maka hasilnya akan sama seperti yang dilakukan pada cara pertama..
Menerapkan Positioning dan Float pada

Halaman Profil
Seperti yang sudah disinggung pada latihan sebelumnya, latihan kali ini kita
akan memindahkan elemen aside agar berada di pinggir halaman halaman
detail. Sehingga tampilan website akan terlihat seperti ini:
Namun tidak hanya sampai disitu, latihan kali ini akan sedikit lebih panjang,
karena kita akan menerapkan responsibilitas tampilan pada halaman profil
dengan menggunakan teknik media query. Seperti apa tekniknya? Mari kita
ketahui bersama.
Yang pasti pada akhirnya kita dapat membuat halaman aplikasi tampak
seperti berikut:
Menetapkan float pada #content dan aside
Seperti yang sudah dipelajari, properti float berfungsi untuk memindahkan

suatu elemen untuk berada sebelah di kiri atau di sebelah kanan, dengan
menggunakan nilai right atau left. Ketika menggunakan properti tersebut kita
perlu menetapkan lebar pada elemen yang akan diterapkan properti float
sehingga kita tahu berapa banyak cakupan lebar yang disediakan untuk
elemen tersebut.
Untuk langkah awal, mari kita buat rule baru dengan selector #content dan
tuliskan nilai left pada properti float.
. #content {
. float: left;
. }
Jangan lupa untuk menetapkan nilai lebar juga. Pada kasus kali ini kita
gunakan nilai 75% untuk menetapkan lebar #content.
. #content {
. float: left;
. width: 75%;
. }
Ketika kita buka hasilnya pada browser, tampilan akan jadi berantakan seperti
ini:
Tenang, ini normal. Karena kita belum menetapkan nilai float pada
elemen <aside>, elemen <aside> dan <footer> akan berpindah menempati
ruang yang sebelumnya digunakan oleh #content. Karena kita sudah
mengetahui bahwa elemen yang diberikan nilai float akan dikeluarkan
dari normal flow.
Langkah selanjutnya, kita terapkan juga properti float dengan nilai right pada

elemen <aside>.
. aside {
. float: right;
. }
Jangan lupa untuk menetapkan lebar pada elemennya. Karena sebelumnya

elemen content sudah menerapkan 75% lebar dari parent, berarti elemen
aside hanya dapat memiliki 25% ruang yang tersedia untuk ditempati. Silakan
tetapkan nilai 25% pada properti width untuk elemen aside.
. aside {
. float: right;
. width: 25%;
. }
Jika kita coba membuka berkas HTML dengan apa yang sudah kita terapkan,
maka tampilan akan jadi lebih mengerikan seperti ini:
Hal tersebut disebabkan nilai elemen <main> sekarang memiliki tinggi 0px. Di

mana #content dan elemen <aside> dianggap tidak ada, sehingga
elemen <footer> akan naik mengisi ruang yang kosong. Agar #content dan
elemen <aside> dianggap ada oleh <main> (sebagai induk elemennya) kita
perlu tetapkan nilai overflow: auto; pada main.
Silakan tambahkan properti overflow dengan nilai auto pada selector main

yang sudah kita buat sebelumnya.
. main {
. padding: 20px;
. overflow: auto;
. }
Setelah menerapkan overflow: auto; pada main, tampilan website sudah lebih

baik dan elemen footer sudah berada pada posisi yang seharusnya.
Namun kita perlu memberikan sedikit jarak antara #content dan aside agar

tidak nampak berhimpitan. Tambahkanlah padding-left pada aside agar
konten yang ditampilkan lebih menjorok ke kiri.
Silakan tambahkan properti padding-left dengan nilai 20px pada selector

aside.
. aside {
. float: right;
. width: 25%;
. padding-left: 20px;
. }
Setelah menerapkannya, buka kembali hasilnya pada browser. Voila, ini

hasilnya:
Ups, elemen <aside> sekarang berada di bawah #content karena dengan

menambahkan padding pada <aside>, lebar elemen sudah bukan 25% lagi.
Untuk mengatasinya kita bisa ubah tipe pengukuran untuk dimensi kotaknya.
Masih ingat kan materi tentang box-sizing? Dengan menerapkan nilai border-
box pada properti box-sizing, kita dapat menentukan dimensi kotak dengan
tepat, tanpa dipengaruhi oleh padding dan border.
Mari kita tetapkan pengukuran box-sizing untuk seluruh elemen HTML

dengan menggunakan selector * seperti berikut:
. * {
. }
Setelah menetapkan rule tersebut, maka tampilan website akan kembali
normal.
Menambahkan meta tag viewport
Setelah berhasil membuat layout dengan menggunakan float, apakah terpikir

bagaimana tampilan yang dihasilkan pada mobile device? Tampilan website
kita terlihat baik ketika dibuka menggunakan laptop atau desktop tetapi belum
tentu akan sama pada mobile device.
Pada browser Google Chrome dan Mozilla Firefox terdapat fitur inspection.
Fitur ini sangat bermanfaat bagi developer web dalam membantu
pengembangan website. Jika ingin mempelajari lebih lanjut mengenai fitur ini,
Anda bisa melihat detailnya pada dokumentasi yang tersedia pada tautan
berikut:
 Chrome page inspector (chrome dev tools)


Mozilla Firefox page inspector
Yang jelas pada inspector tersebut terdapat fitur di mana kita dapat
mensimulasikan halaman website dalam tampilan mobile device atau tablet.
Untuk membuka fitur inspector kita bisa gunakan shortcut ctrl + shift + i pada
browser, atau dengan melakukan klik kanan -> inspect / inspect page.
Fitur Inspection pada Google Chrome
Fitur Inspection pada Mozilla Firefox
Kedua gambar di atas menunjukan fitur dari inspection pada Google Chrome
dan Mozilla Firefox. Untuk mensimulasikan tampilan pada mobile device, kita
dapat menekan icon yang dilingkari pada gambar di atas.
Dengan begitu inilah tampilan seperti ini akan muncul:
Di sini kita bisa memilih peranti apa yang akan digunakan untuk
mensimulasikan halaman, untuk melihat tampilan dalam mobile devices, kita
bisa memilih salah satu opsi handphone yang tersedia. Contohnya Pixel 2 XL.
Lalu setelah memilih tampilan pada mobile devices, apakah tampilan website
sekarang sudah nampak baik? Tentu tidak, karena tampilan pada simulasi
device di browser Google Chrome masih berantakan tampak seperti ini.
Untuk mengatasinya, kita perlu menetapkan tag viewport agar dapat responsif
pada peranti mobile.
Viewport merupakan area yang dapat dilihat oleh pengguna kita pada
halaman website. Ukuran viewport bervariasi berdasarkan device-nya.
Ukuran viewport pada sebuah peranti mobile, lebih kecil dibandingkan
dengan layar komputer.
Sebelum adanya tablet ataupun handphone, halaman website didesain hanya

untuk ukuran layar komputer. Dengan begitu banyak sekali website yang
menerapkan tampilan dan ukuran yang static. Maka ketika halaman tersebut
diakses melalui handphone atau tablet, ukuran akan terlalu besar untuk
ditampilkan. Untuk mengatasi permasalahan tersebut kita perlu mengatur
sebuah viewport pada halaman website kita.
Mengatur viewport dapat melalui sebuah tag <meta> yang disisipkan pada

head berkas html. Silakan buka berkas index.html kemudian tambahkan script
berikut di dalam <head>.
. <meta name="viewport" content="width=device-width, initial-scale=1">
Sehingga sekarang tampilan pada mobile device menjadi seperti ini:
Tampilan pada mobile device setelah ditambahkan meta tag viewport
Menetapkan rules pada Ukuran Layar Tertentu
Walaupun sudah menetapkan meta tag viewport, tampilan pada mobile

device belum baik, karena informasi yang ditampilkan pada
elemen <aside> sulit terbaca.
Untuk mengatasi hal ini, CSS menyediakan sebuah fitur yang dapat kita
gunakan untuk menentukan rule hanya pada ukuran viewport tertentu. Fitur
tersebut dinamakan CSS Media Queries. Berikut contoh penulisannya:
. /* Rule yang dituliskan dalam block @media di bawah akan diterapkan pada
device yang memiliki ukuran viewport di bawah 992px */
. @media screen and (max-width: 992px) {
. ........
. }
. /* Rule yang dituliskan dalam block @media di bawah akan diterapkan pada
device yang memiliki ukuran viewport di bawah 600px */
. ........
. }
Canggih bukan? Setelah mengetahui fitur media queries, kita dapat

memperbaiki halaman profil dengan memindahkan elemen <aside> di bawah
dari #content, hanya pada device yang memiliki ukuran layar kecil.
Sehingga <aside> dapat menyesuaikan kembali lebarnya.
Untuk melakukannya kita buat elemen <aside> dan #content memiliki lebar

100% pada layar yang memiliki lebar viewport maksimal 1000px (nilainya
dapat disesuaikan sesuai kebutuhan). Silakan tuliskan kode berikut
pada style.css:

. #content,
. aside {
. width: 100%;
. padding: 0;
. }
. }
Dengan menerapkan media query, sekarang halaman profil dapat

menyesuaikan tampilan ketika diakses oleh peranti mobile.
Selamat! Sampai dengan materi ini kita sudah dapat membuat sebuah
website dengan tampilan yang menarik, Ingin paham lebih jauh tentang
konsep responsive pada website? Anda bisa membaca artikel yang ada pada
blog kami atau bisa membaca dokumentasi yang diberikan oleh Google
mengenai ini.
 Teknik Dasar Tampilan Responsif pada Website


Responsive Web Design Basics
Membuat Sticky Navigation
Ada satu fitur yang mungkin perlu diterapkan lagi pada halaman profil yang
kita buat. Pada halaman profil sudah terdapat sebuah navigasi yang berfungsi
untuk mengarahkan pengguna langsung pada informasi yang dipilih. Tetapi
navigasi tersebut agak sulit diakses ketika pengguna melakukan scrolling
pada halaman website. Pasalnya, navigasi tersebut selalu berada di bawah
jumbotron website. Akibatnya, untuk mengakses navigasi yang dimaksud,
pengguna perlu kembali melakukan scrolling ke atas hingga navigasi kembali
terlihat.
Dari permasalahan di atas, sepertinya kita perlu meletakan navigasi yang

menempel pada jendela browser, sehingga ketika user
melakukan scrolling pada halaman website, navigasi tetap dapat dicangkup
oleh pengguna untuk digunakan.
Terdapat satu nilai properti position yang belum dibahas pada

pembahasan positioning, yaitu sticky positioning yang merupakan nilai
kombinasi dari relative positioning dan fixed positioning.
Dengan menggunakan nilai sticky pada properti position, membuat navigasi

dapat melekat pada jendela browser (layaknya fixed position) tetapi posisi
awalnya tetap menempati posisi di mana ia seharusnya berada
(layaknya relative position). Sehingga tampilan navigasi dapat memiliki sifat
seperti ini:
Untuk menerapkannya cukup mudah, pertama kita tambahkan properti

position dengan nilai sticky dan properti top dengan nilai 0 pada
elemen <nav>.
nav {
background-color: #00a2c6;
padding: 5px;
position: sticky;
top: 0;
Nilai top diperlukan agar ketika pengguna melakukan scrolling, elemen

navigasi tetap berada di atas jendela browser.
Bagaimana agar navigasi dapat menempel pada seluruh halaman? Buat

elemen <header> sebagai induk dari elemen <nav> yang menerapkan
properti display dengan nilai inline. Silakan tuliskan rule berikut pada
berkas style.css.
header {
display: inline;
Setelah menerapkannya, seharusnya kini Navigasi pada halaman profil akan

tampak seperti pada gif di atas.
Responsive Layout menggunakan Flexbox
Sampai tahap ini kita sudah memahami dua pilar yang dalam membentuk sebuah
website, yakni HTML dan CSS, dengan membuat sebuah halaman website
sederhana dalam menampilkan informasi mengenai kota Bandung.
Dalam pengembangannya kita sudah memahami perbedaan block element dan

inline element. Kita juga sudah terapkan konsep semantic structure pada HTML
sehingga kerangka HTML yang dibuat, sesuai dengan fungsi elemennya.
Lalu kita juga sudah memahami bagaimana cara kerja CSS dalam mendekorasi
elemen HTML, menetapkan sebuah selector, membangun layout dengan
menggunakan float, dan mengetahui prinsip pendekatan layout yang responsif
dengan teknik media query.
Selanjutnya kita akan belajar mengenai pilar ketiga dalam pengembangan

website, yaitu JavaScript. Dalam mempelajarinya kita akan coba menyelesaikan
sebuah studi kasus, yakni membuat kalkulator berbasis website. Targetnya pada
akhir kelas ini kita dapat membangun kalkulator sederhana yang tampak gambar
di bawah ini:
Menarik bukan? Tentunya sebelum kita membahas JavaScript lebih jauh, kita
akan belajar bagaimana cara membuat layout kalkulator.
Dalam proses pembuatanya, kita akan mencoba teknik baru dalam penyusunan
layout, yakni menggunakan Flexbox. Teknik ini hadir pada CSS3 dan menjadi
salah satu pendekatan populer dalam penyusunan layout yang responsif.
Nantinya kalkulator yang kita kembangkan ini dapat digunakan dengan baik pada
mobile device.
Flexible Box Model

Jadi apa sebenarnya itu flexbox atau flexible box model? Pada dasarnya flexbox
merupakan mode layout yang mudah dan praktis untuk mengatur elemen dengan
menggunakan sebuah container.
Sebelumnya kita sudah menggunakan teknik float dalam penyusunan layout.

Float memang cukup mudah dipahami tetapi tak cukup praktis untuk digunakan.
Passalnya, kita memerlukan pengukuran dimensi yang tepat agar elemen berada
posisi yang diinginkan.
Dengan Flexbox kita dapat mengatur ukuran secara otomatis dan mampu
beradaptasi dengan ukuran container-nya. Dengan kemampuan flexibelnya,
tampilan layout yang disusun menggunakan flexbox menjadi mobile-friendly.
Selain itu, flexbox dapat dikombinasikan dengan media query, sehingga ia dapat
lebih optimal lagi digunakan pada peranti mobile.
Berikut beberapa konsep dari flexbox yang perlu kita ketahui:
 Dapat mengubah ukuran dimensi elemen dengan menyesuaikan ukuran

yang cocok bagi ruang kosong yang ada pada container-nya.
 Flexbox is directional agnostic. ini berbeda dengan konsep block model di
mana elemen selalu ditampilkan secara vertikal dengan membuat baris
baru. Ini berbeda pula dengan konsep inline model di mana elemen selalu
ditampilkan secara horizontal. Dengan flexbox kita dapat melakukan kedua
hal tersebut dengan mudah.
 Dibuat untuk menyusun layout yang mobile friendly.
Flex Container
Flex container merupakan sebuah elemen yang menampung beberapa flex

item. Karena Parent-child merupakan relasi yang wajib ada dalam penerapan
flexbox, maka setiap flex item harus merupakan anak / child dari flex
container.
Secara default deretan flex-item pada container ditampilkan secara horizontal.

Ketika menggunakan flex, kita tidak perlu mengatur dimensi dari tiap flex item
secara manual untuk mengisi ruang kosong pada container. Sebelum ada
flexbox, hal ini jadi kendala umum. Alih-alih, kita harus melakukan
perhitungan yang tepat agar tak terjadi overflow pada layout yang
ditampilkan.
Untuk membuat sebuah flex container kita gunakan properti display dengan

nilai flex. Dengan demikian seluruh anak dari container tersebut akan menjadi
flex item. Berikut contoh penerapan flexbox untuk membuat tampilan seperti
gambar di atas:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. .container {
. display: flex;
.
. /* Properti lainnya */
. width: 800px;
. height: 250px;
. background-color: #11C5C6;
. padding: 20px;
. margin: 0 auto;
. }
. .box {
. flex-grow: 1;
.
. /* properti lainnya */
. background-color: #FBDD1C;
. margin: 5px;
. }
. </style>
. </head>
. <body>
. <div class="box"></div>
. </div>
. </body>
. </html>
Output dari kode di atas adalah:
Flex Grow
Bisa kita lihat seluruh box di dalam container dapat menyesuaikan ukurannya
sesuai ruang kosong yang ada pada container. Pada box, kita tidak
menetapkan nilai dimensi seperti width dan height. Kita cukup menggunakan
satu properti yakni flex-grow: 1;.
Properti flex-grow ini digunakan untuk memberitahu berapa banyak ukuran

yang harus ditetapkan oleh flex-item. Nilai dari properti ini bukan nilai dari
dimensi asli pada flex item, melainkan nilai yang relatif terhadap ruang
kosong pada flex container.
Jika kita menetapkan nilai yang sama pada seluruh flex item, maka dimensi
dari tiap flex item akan sama rata dan memenuhi ruang kosong yang ada
pada container. Namun jika kita memberikan nilai yang berbeda dari salah
satu itemnya, contohnya nilai yang lebih besar, maka flex item tersebut akan
mencakup ukuran yang lebih besar. Flex item yang lain akan menyusut
menyesuaikan agar tetap masuk pada ruang flex container. Contohnya
seperti berikut:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. .container {
. display: flex;
.
. width: 800px;
. height: 250px;
. padding: 20px;
. margin: 0 auto;
. }
. .box {
. margin: 5px;
. }
.
. .first {
. flex-grow: 1;
. }
. .second {
. flex-grow: 2;
. }
.
. .third {
. flex-grow: 1;
. }
. </style>
. </head>
. <body>
. <div class="box first"></div>
. <div class="box second"></div>
. <div class="box third"></div>
. </div>
. </body>
. </html>
Cara kerja flex-grow mirip seperti potongan kue. Ruang kosong pada elemen
akan dibagi-bagi sesuai besaran nilainya. Contoh di atas memberi kita
gambaran seperti sebuah kue dengan luas total 4, kemudian kue tersebut
dipotong menjadi 3 potong. Potongan yang tengah mendapatkan 2 bagian
dan potongan yang lainnya masing - masing mendapatkan 1 bagian. Maka
potongan yang tengah akan lebih besar dari potongan yang lain.
Betapa fleksibelnya bukan? Yang harus kita ingat, ketika kita mengubah
ukuran dari suatu flex item, maka flex item yang lain pun akan terpengaruh.
Flex Direction
Seperti yang sudah kita ketahui sebelumnya, Flexbox merupakan directional

agnostic, di mana kita dapat mengubah arah flex-item ditempatkan pada
container. Secara default deretan flex-item ditampilkan secara horizontal, namun
kita dapat mengubahnya dengan menetapkan properti flex-direction pada
container-nya.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. .container {
. display: flex;
. flex-direction: column;
.
. width: 800px;
. height: 250px;
. padding: 20px;
. margin: 0 auto;
. }
. .box {
. margin: 5px;
. }
.
. .first {
. flex-grow: 3;
. }
. .second {
. flex-grow: 2;
. }
.
. .third {
. flex-grow: 1;
. }
. </style>
. </head>
. <body>
. <div class="box first"></div>
. <div class="box second"></div>
. <div class="box third"></div>
. </div>
. </body>
. </html>
Ada empat nilai yang bisa digunakan untuk properti flex-direction, antara lain:
 row : merupakan nilai default, di mana deretan flex-item pada container

ditampilkan secara horizontal.
 row-reverse : memiliki sifat yang sama seperti row, namun urutan flex
item-nya ditukar.
 column : Deretan flex-item pada container ditampilkan secara vertikal.
 column-reverse : memiliki sifat yang sama seperti column, namun urutan
flex item-nya ditukar.
Karena properti flex-direction ini, kita dapat membuat dua dimensional layout
dengan menempatkan flex container di dalam flex container, dalam arti lain
sebuah flex container dapat memiliki child berupa flex container lain.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. .flex-column {
. display: flex;
.
. width: 800px;
. height: 300px;
. padding: 20px;
. margin: 0 auto;
. }
.
. .flex-row {
. display: flex;
. flex-direction: row;
. flex-grow: 1;
.
. padding: 20px;
. margin: 5px;
. }
.
. .box {
. flex-grow: 1;
.
. margin: 5px;
. background-color: #fe899a;
. }
. </style>
. </head>
. <body>
. <div class="flex-column">
. <div class="flex-row">
. </div>
. </div>
. </div>
. </body>
. </html>

Hal ini yang akan kita gunakan nanti sebagai dasar dalam membangun layout
kalkulator.
Flex Basis
Selain menggunakan flex-grow, untuk menentukan ukuran flex item, kita bisa
gunakan properti flex-basis. Properti ini mirip seperti width dalam menentukan
dimensi box. Kita bisa menggunakan nilai satuan tetap seperti px, pt, pc, cm dll,
atau kita juga bisa menggunakan satuan persentase %.
Flex-grow ini digunakan ketika kita ingin menetapkan ukuran awal pada sebuah
flex-item. Alhasil, kita dapat mengatur ukuran dengan lebih leluasa. Flex-grow
biasa digunakan ketika kita menerapkan nested flex-container dan terdapat
perbedaan jumlah child pada container-nya. Untuk lebih mudah
menggambarkannya, perhatikan contoh berikut:
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. * {
. }
. .container {
. width: 800px;
. margin: 0 auto;
. }
.
. .flex-column {
. display: flex;
. }
.
. .flex-row {
. display: flex;
. flex-grow: 1;
. }
.
. .box {
. flex-grow: 1;
. background-color: cornflowerblue;
. padding: 40px;
. color: white;
. font-size: 1.5em;
. }
. </style>
. </head>
. <body>
. <div class="box">1</div>
. </div>
. </div>
. </div>
. </div>
. </body>
. </html>

Pada contoh di atas kita memiliki satu buah flex-container column yang di
dalamnya terdapat dua buah flex-container row. Kemudian flex-container row
yang pertama memiliki empat buah flex-item, dan yang kedua memiliki tiga buah
flex-item.
Standarnya ketika kita menggunakan nilai flex-grow: 1 pada seluruh flex-item

yang ada, maka tampilan akan seperti gambar di atas. Namun bagaimana jika kita
ingin mengatur flex-item di row kedua dengan tampilan berbeda seperti di bawah
ini?
Jika kita menggunakan flex-grow, mungkin kita dapat memberikan nilai flex-grow:

2 pada box ke tujuh.
. ....
. <div class="box double">7</div>
. ...
. .....
. .double {
. flex-grow: 2;
. }
Namun hasilnya akan tampak seperti ini:
Sebabya, properti flex-grow tidak menjamin elemen yang menerapkan nilai 2

akan lebih besar 2 kali lipat dari nilai 1.
Flex-grow akan mencari nilai yang sesuai yang dapat dibagi pada flex-items. Agak
terdengar aneh, bukan? Nah, temukan artikel yang cukup menarik yang
membahas permasalahan ini pada tautan berikut.
Sebenarnya bisa saja kita menggunakan flex-grow untuk mendapatkan hasil yang
diinginkan namun kita harus mencari nilai yang pas secara manual. Ini tentunya
akan memakan waktu lebih.
Pada kasus seperti ini, solusinya adalah menggunakan properti flex-basis.

Dengan properti ini kita dapat asumsikan bahwa total ruang kosong pada flex-
container adalah 100%. Jika dibagi rata terhadap empat buah flex-item, maka tiap
itemnya harus memiliki nilai 25%.
. <!doctype html>
. <html lang="en">
. <head>
. <style>
. * {
. }
.
. .container {
. width: 800px;
. margin: 0 auto;
. }
.
. .flex-column {
. display: flex;
. }
.
. .flex-row {
. display: flex;
. flex-grow: 1;
. }
.
. .box {
. flex-basis: 25%;
. background-color: cornflowerblue;
. padding: 40px;
. color: white;
. font-size: 1.5em;
. }
. </style>
. </head>
. <body>
. </div>
. </div>
. </div>
. </div>
. </body>
. </html>
Output kode di atas adalah:

Maka seluruh flex-items akan memiliki ukuran yang sama. Tetapi pada flex-
container baris kedua terdapat 25% ruang bebas, karena jumlah flex-itemnya
hanya tiga. Kita bisa menggunakan ruang kosong tersebut untuk membuat box
tujuh lebih besar dua kali lipat dengan menggunakan nilai flex-basis: 50%;
. ....
. <div class="box double">7</div>
. ...
. .....
. .double {
. flex-basis: 50%;
. }
Membuat Layout Kalkulator
Setelah mengenal dasar penggunaan flexbox, mari sekarang kita terapkan
apa yang sudah kita pelajari dengan membuat dasar layout kalkulator.
Membuat struktur HTML kalkulator
Mari kita membuat sebuah project baru dengan membuat folder baru dan beri
nama folder sesuai keinginan atau pada contoh kali ini kita beri nama
“WebCalculator”. Lalu buka folder tersebut menggunakan teks editor yang
Anda miliki dan buat berkas HTML baru dengan nama “index.html”.
Tampilan project yang dibuka menggunakan Visual Studio Code
Setelah itu, buka berkas index.html dan tuliskan struktur dasar HTML, mulai
dari elemen <html>, <head>, dan <body>.
. <!DOCTYPE html>
. <html>
. <head></head>
. <body></body>
. </html>
Jangan untuk lupa tambahkan elemen <title> di dalam <head>.
. <!DOCTYPE html>
. <html>
.
. <head>
. <title>Web Calculator</title>
. </head>
.
. <body></body>
.
. </html>
Sesuai yang sudah kita pelajari untuk menggunakan flexbox, kita
membutuhkan sebuah container, jadi pada elemen <body> buatlah sebuah
column container. Di dalamnya terdapat empat buah row container dan di
dalam masing masing row container terdapat empat buah item-flex. Maka
tuliskan kode berikut di dalam elemen <body>:
. <div class="flex-container-column">
. <div class="flex-container-row">
. <div class="button"></div>
. </div>
. </div>
. </div>
. </div>
. </div>
Pada kode di atas, elemen column container kita berikan nilai class “flex-
container-column”, tiap elemen row container kita berikan nilai class “flex-
container-row” dan tiap flex item pada row container kita berikan nilai class
“button”.
Kemudian setiap elemen .button, di dalamnya kita berikan teks yang

digunakan untuk melabelkan tiap-tiap tombolnya. Tuliskan teks angka 0
hingga 9 beserta operator-operator yang akan digunakan pada kalkulator
dengan urutan seperti ini:
. <div class="button">7</div>
. <div class="button">+/-</div>
. </div>
. <div class="button">-</div>
. </div>
. <div class="button">+</div>
. </div>
. <div class="button">CE</div>
. <div class="button">=</div>
. </div>
. </div>
Pada .flex-container-row terakhir, terdapat satu flex-item yang tidak diberikan

nilai teks. Item tersebut memang tidak kita butuhkan sehingga kita bisa hapus
elemen tersebut.
Jika kita perhatikan dari beberapa tombol di atas, ada yang berupa tombol
angka, operator dan fungsi. Untuk tombol operator seperti tambah (+) dan
kurang (-) berikan class tambahan dengan nilai “operator”.
. .....
. <div class="button operator">-</div>
. .....
. <div class="button operator">+</div>
Kemudian untuk tombol fungsi seperti negative (+/-), clear (CE), dan equals
(=) berikan class tambahan dengan nilai sesuai dengan fungsinya tersebut.
. ....
. <div class="button negative">+/-</div>
. ....
. <div class="button clear">CE</div>
. ....
. <div class="button equals">=</div>
Penamaan class yang spesifik seperti ini dibutuhkan untuk memudahkan kita
mengambil nilai elemen nanti ketika menggunakan JavaScript, hal ini juga
membantu kita untuk memudahkan penentuan selector untuk styling
menggunakan CSS.
Sebuah kalkulator tentu tidak hanya terdiri dari tombol saja bukan? Tiap
kalkulator pasti memiliki layar untuk menampilkan apa yang pengguna input
dan menampilkan hasil kalkulasinya. Dengan begitu kita membutuhkan
elemen lain yang berfungsi sebagai layar. Tambahkan elemen div baru tepat
di bawah tag pembuka .flex-container-column dan beri atribut class dengan
nilai “display”.
. <div class="display"></div>
. ...........
Kemudian di dalam elemen .display tersebut tambahkan elemen <h1></h1>

sebagai teks yang berfungsi untuk menampilkan angka pada layar tersebut.
. <div class="display">
. <h1 id="displayNumber">0</h1>
. </div>
Sejauh ini struktur kode yang ada pada berkas index.html akan tampak
seperti ini:
. <!DOCTYPE html>
. <html>
.
. <head>
. <link rel="stylesheet" href="assets/style.css">
. </head>
.
. <body>
. </div>
. </div>
. </div>
. </div>
. <div class="button equals">=</div>
. </div>
. </div>
. </body>
.
. </html>
Jika kita buka melalui browser, tampilan saat ini masih terlihat aneh.
Yups, hal tersebut wajar karena <div> tidak akan berpengaruh apa apa
hingga kita memberikan styling pada elemen tersebut.
Menerapkan Flexbox pada Halaman Kalkulator
Setelah kita selesai membuat struktur HTML selanjutnya kita percantik elemen -
elemen tersebut dengan styling.
Buatlah folder baru di dalam project WebCalculator dan berikan nama “assets”.

Kemudian di dalam folder tersebut buatlah berkas css dan berikan nama
“style.css”. Sehingga struktur project kita saat ini akan tampak seperti ini:
Struktur project WebCalculator
Sebelum memulai menuliskan styling pada CSS, jangan lupa untuk hubungkan
berkas style.css sebagai stylesheet pada index.html. Tuliskan tag <link> berikut
ini di dalam elemen <head>:
Untuk memulai menuliskan styling, kita buka berkas style.css. Kita mulai dengan
membuat seluruh elemen menerapkan nilai border-box pada properti box-sizing.
Tuliskan rule berikut pada berkas style.css.
. * {
. }
Lalu kita tetapkan font family pada seluruh teks yang ada di dalam body dengan
menggunakan sans-serif.
. body {
. }
Selanjutnya kita mulai terapkan flexbox pada .flex-container-column dengan

memberikan nilai flex pada properti display. Jangan lupa tetapkan properti flex-
direction: column dan properti pendukung lainnya. Sehingga styling .flex-
container-column akan tampak seperti berikut:
. .flex-container-column {
. display: flex;
.
. /* properti pendukung */
. max-width: 800px;
. margin: 0 auto;
. }
Terapkan juga properti display: flex pada .flex-container-row. Namun kita tidak
harus menerapkan flex-direction pada elemen ini, karena nilai row sudah menjadi
default pada flex-container. Sehingga penulisan styling untuk .flex-container-row
cukup dituliskan seperti berikut:
. .flex-container-row {
. display: flex;
. }
Mari kita lanjut atur styling untuk tombol kalkulatornya. Pada tiap .button kita akan
beri nilai flex-basis sebesar 25% beserta properti pendukung lainnya sehingga
tombol kalkulator akan memenuhi seluruh ruang kosong pada container. Tuliskan
styling berikut untuk .button:
. .button {
. flex-basis: 25%;
.
. font-size: 1.5em;
. padding: 40px;
. background: -webkit-linear-gradient(top, #d2d2d2, #ddd);
. cursor: pointer;
. }
Simpan berkas style.css dan coba buka index.html pada browser. Tampilan akan
nampak seperti ini:
Sekarang sudah terlihat tampilan kalkulator pada umumnya, bukan? Tombol

kalkulator akan memenuhi seluruh ruang kosong pada container terkecuali tombol
yang terdapat pada flex-container-row terakhir karena jumlah button nya hanya
tiga buah.
Agar kontainer terisi penuh, kita buat tombol equals (=) memiliki nilai flex-basis:
50% sehingga tombol tersebut memiliki besar 2 kali dibandingkan dengan tombol
yang lainnya. Tambahkan nilai class “double” pada tombol tersebut.
. <div class="button double">=</div>
Kemudian tetapkan nilai flex-basis: 50%; pada .double seperti berikut:
. .double {
. flex-basis: 50%;
. }
Sehingga sekarang tampilan button pada browser akan tampak seperti ini:
Sejauh ini kode yang terdapat pada style.css dan index.html akan tampak seperti
berikut:
. * {
. }
.
. body {
. }
.
. display: flex;
. max-width: 800px;
. margin: 0 auto;
. }
.
. display: flex;
. }
.
. .button {
. flex-basis: 25%;
. font-size: 1.5em;
. padding: 40px;
. cursor: pointer;
. }
.
. .double {
. flex-basis: 50%;
. }
. <!DOCTYPE html>
. <html>
.
. <head>
. </head>
.
. <body>
. </div>
. </div>
. </div>
. </div>
. <div class="button equals double">=</div>
. </div>
. </div>
. </body>
.
. </html>
Mempercantik tampilan kalkulator
Setelah selesai dengan penerapan flexbox untuk tombol kalkulator, selanjutnya

kita akan mempercantik bagian lain pada kalkulator. Pada bagian kali ini
sebenarnya Anda bisa bebas berekspresi dalam menerapkan styling. Anda bisa
gunakan kemampuan seni Anda ditambah pengetahuan CSS yang sudah Anda
kuasai.
Tapi jika Anda ingin membuat tampilan kalkulator tampak seperti yang sudah
dicontohkan ini:
Anda bisa mengikuti langkah - langkah materi kali ini:
Yang pertama kita akan mempercantik display yang ada pada kalkulator dengan
menambahkan background-color, padding, border, dan lain sebagainya. Untuk itu
mari kita tetapkan styling pada .display dengan nilai - nilai properti sebagai
berikut:
. .display {
. color: white;
. width: 100%;
. background-color: #333333;
. font-size: 2em;
. }
Dengan begitu maka display akan tampak seperti ini:
Selanjutnya kita akan membuat tombol kalkulator yang merupakan sebuah

operator, fungsi negative dan fungsi equals berwarna orange. Dengan begitu kita
perlu menetapkan nilai background-color pada elemen yang memiliki class
.operator, .negative, dan .equals.
. .operator,
. .negative,
. .equals {
. background: orange;
. }
Maka sekarang tombol tersebut akan tampak berwarna orange.
Lalu kita akan membuat efek card pada calculator agar kalkulator tampak seperti
berada pada sebuah kartu yang terdapat bayangan pada tepiannya. Hal ini sudah
pernah kita lakukan pada latihan project halaman profile, masih ingat kan?
Buatlah rule styling baru dengan selector .card, dan beri nilai properti seperti di
bawah ini:
. .card {
. padding: 30px;
. margin-top: 20px;
. }
Kemudian terapkan dengan menambahkan class card pada flex-container

column.
. <div class="flex-container-column card">
Sehingga sekarang kalkulator akan tampak seolah - olah berada di dalam kartu.
Terakhir, kita juga bisa tambahkan sebuah efek lain pada tombol dengan
memanfaatkan pseudo-class :hover. Kita buat efek teks menjadi lebih tebal ketika
kursor diarahkan pada salah satu tombol. Tambahkan rule dengan selector
.botton:hover dengan nilai properties berikut.
. .button:hover {
. }
Sekarang teks pada tombol akan menjadi tebal ketika terdapat kursor yang
diarahkan.
Sejauh ini berikut kode yang ada pada index.html dan style.css:
. <!DOCTYPE html>
. <html>
.
. <head>
. </head>
.
. <body>
. </div>
. </div>
. </div>
. </div>
. </div>
. </div>
. </body>
.
. </html>
. * {
. }
.
. body {
. }
.
. display: flex;
. max-width: 800px;
. margin: 0 auto;
. }
.
. display: flex;
. }
.
. .button {
. flex-basis: 25%;
. font-size: 1.5em;
. padding: 40px;
. cursor: pointer;
. }
.
. .double {
. flex-basis: 50%;
. }
.
. .display {
. color: white;
. width: 100%;
. font-size: 2em;
. }
.
. .operator,
. .negative,
. .equals {
. }
.
. .card {
. padding: 30px;
. margin-top: 20px;
. }
.
. .button:hover {
. }
Responsibilitas pada tampilan mobile
Sejauh ini layout kalkulator yang kita buat sudah cukup baik, namun apakah
sudah cukup baik juga ketika tampil pada device mobile? Untuk melihatnya, kita
bisa coba dengan menggunakan Dev Tools pada browser kita.
Gambar di atas merupakan kalkulator yang kita buat di akses melalui device
Google Pixel 2 XL. Tampilan kalkulator sudah responsif namun, teks tombol
masih terlalu kecil tampilannya. Aspek aksesibilitas penggunanya, kurang.
Agar tampilan lebih optimal pada viewport mobile devices, pertama kita
tambahkan meta tag viewport pada index.html agar tampilan dapat
menyesuaikan dengan beberapa layar yang berbeda.
. <head>
. <meta name="viewport" content="width=device-width, initial-scale=1.0">
. </head>
Dengan begitu ukuran teks dan box dimension akan disesuaikan pada mobile
devices. Namun tampilan tombol akan overflow karena padding pada tiap tombol
yang kita tentukan terlalu besar.
Pada situasi ini kita dapat menggunakan @media query untuk menetapkan nilai
padding yang pas ketika di akses pada mobile device. Tuliskan rule berikut pada
styles.css:

. .button {
. padding: 10px;
. }
. }
Sekarang tampilan tombol akan menerapkan nilai padding yang lebih kecil ketika
diakses menggunakan ukuran layar dengan lebar di bawah 513px.
JavaScript And DOM
Pada modul ini kita akan banyak berkenalan dengan JavaScript. Berbeda
dengan HTML dan CSS, sekarang kita berada di wilayah pemrograman yang
benar-benar memanfaatkan logic dalam penulisan kodenya. Pengembangan
website tidak hanya mengandalkan seni untuk membangun tampilan yang
cantik, melainkan juga memerlukan bahasa pemrograman agar meningkatkan
fungsionalitas dan membuat website lebih interaktif.
Kita akan memulainya dengan memahami apa sebenarnya itu JavaScript,

mencoba menulis dan menggunakannya pada sebuah website. Selanjutnya
kita akan mengenal variabel, fungsi operator, perulangan dan hal lainnya. Kita
juga akan belajar bagaimana memanipulasi elemen menggunakan syntax
JavaScript, menampilkan alert dan mengetahui fungsi - fungsi dari Web API
yang ada seperti document, window dan sebagainya.
Pada akhir modul in kita akan menerapkan apa yang sudah kita pelajari pada
project Web Kalkulator sehingga kalkulator dapat berfungsi sebagai sesuai
yang kita harapkan.
Apa itu JavaScript?

JavaScript merupakan bahasa pemrograman client-side sehingga seluruh
prosesnya berjalan pada sisi pengguna bukan server. JavaScript diperlukan
pada pengembangan website ketika kita membutuhkan suatu interaksi dari
pengguna. Sesungguhnya website hanya menampilkan konten yang statis
jika hanya menggunakan HTML dan CSS.
Karena diolah pada sisi client, JavaScript sangat bergantung pada

pengaturan dan kemampuan browser ketika melakukan sebuah proses
(compiling atau rendering pada DOM). Bahkan pengguna dapat sepenuhnya
tidak mengizinkan JavaScript berjalan pada browser dengan menonaktifkan
dukungan JavaScript pada browser.
Meskipun memiliki nama JavaScript bahasa pemrograman ini sama

sekali tidak ada hubungannya dengan bahasa pemrograman Java.
Sebenarnya pada tahun 1995 Netscape melahirkan bahasa pemrograman ini
dengan nama “LiveScript”, namun pada saat itu bahasa pemrograman Java
sedang populer. Untuk memanfaatkan kepopulerannya, namanya pun diubah
menjadi “JavaScript” dan benar bahasa pemrograman ini pun akhirnya
memiliki popularitas yang tidak kalah dari Java.
Setelah diadopsi di luar Netscape, JavaScript distandarisasi oleh European

Computer Manufacturer’s Association (ECMA) itulah sebabnya terkadang ada
yang menyebutnya dengan ECMAScript.
Terdapat beberapa versi dari JavaScript. Pada tahun 2000 - 2010,
ECMAScript 3 merupakan versi yang banyak digunakan ketika JavaScript
sedang mendominasi. Selama waktu tersebut, ECMAScript 4 sedang dalam
proses pengembangan dengan harapan akan memberikan improvisasi yang
cukup signifikan, namun ambisi tersebut tidak berjalan mulus sehingga pada
tahun 2008 pengembangan ECMAScript 4 ditinggalkan.
Walaupun begitu, ini bukan akhir dari JavaScript. Pengembangan digantikan

dengan ECMAScript 5 dengan mengurangi ambisinya dan hanya melakukan
perbaikan pada hal yang tidak jadi kontroversi. Pembaharuan tersebut
berhasil dan akhirnya ECMAScript 5 rilis pada tahun 2009.
Lalu pada tahun 2015 ECMAScript 6 rilis dengan membawa perubahan yang
cukup besar termasuk ide - ide yang sudah direncanakan untuk versi 4. Mulai
dari itu tiap tahun JavaScript melakukan update bersifat minor.
Menuliskan Syntax Javascript pada HTML

Sama seperti styling, untuk menggunakan JavaScript pada website kita bisa
menerapkannya melalui atribut HTML, embed script, atau menggunakan file
external.
Atribut HTML
Untuk menuliskan JavaScript menggunakan atribut, kita bisa menerapkannya

pada atribut event seperti “onclick”, sehingga JavaScript akan dieksekusi ketika
elemen tersebut ditekan oleh kursor. Contohnya sebagai berikut:
. <button onclick="alert('Anda menekan elemen button!')">Click di sini!</p>
Ada banyak sekali atribut event yang dapat digunakan untuk menuliskan script di
dalamnya. Kita bisa lihat apa saja atributnya pada tautan
berikut: https://www.w3schools.com/tags/ref_eventattributes.asp.
Tentunya atribut tersebut kita gunakan sesuai dengan kebutuhan

kita. onclick merupakan salah satu atribut yang common atau banyak digunakan
karena interaksi tersebut sering pengguna lakukan.
Embedded Script
JavaScript juga dapat dituliskan dengan menanamnya (embedding) pada berkas

HTML dengan menggunakan elemen <script>.
. <script>
. // JavaScript dituliskan di sini.
. </script>
Elemen <script> dapat diletakan di dalam elemen <head> atau <body>. Akan

tetapi jika kita menerapkan banyak script pada elemen <head> proses memuat
halaman akan menjadi lambat, karena HTML akan membaca kode dari atas ke
bawah.
External Script
Metode lainnya yaitu dengan menggunakan berkas external yang berekstensi .js.

Di dalam berkas tersebutlah seluruh JavaScript dituliskan. Keuntungan
menggunakan metode ini adalah script dapat diterapkan pada berbagai berkas
HTML tanpa menuliskan ulang scriptnya (keuntungan yang sama juga ketika kita
menggunakan external css).
Untuk menghubungkan external script dengan berkas HTML, kita gunakan

elemen <script> lalu tambahkan atribut src dengan nilai alamat berkas .js yang
digunakan.
. <script src="berkas-javascript.js"></script>
Sama seperti Embedded Script kita bisa tuliskan elemen script tersebut di dalam

elemen <header> namun direkomendasikan untuk disimpan di dalam
elemen <body> sebelum tag penutup </body>.
Teknik inilah yang akan kita gunakan dalam penerapan JavaScript pada project
kalkulator.
Membuat Berkas JavaScript Pertama

Setelah mengetahui beberapa metode untuk menuliskan JavaScript pada
HTML, mari kita terapkan salah satu metode yang sudah kita ketahui. Kita
akan menerapkan metode external script dengan membuat berkas JavaScript
yang nantinya akan digunakan untuk menuliskan script dari project kalkulator
yang sudah kita buat.
Buka project kalkulator yang sudah kita buat. Di dalam folder assets, buat
berkas baru dengan memberikan nama “kalkulator.js”. Ingat berkas ini harus
diakhiri dengan ekstensi .js. Ekstensi tersebut menandakan bahwa berkas ini
merupakan berkas JavaScript.
Setelah membuat berkas tersebut maka struktur dari proyek kalkulator akan
tampak seperti berikut:
Buka berkas kalkulator.js dan tuliskan kode JavaScript berikut:
. console.log("Selamat Anda berhasil menggunakan JavaScript pada Website")
Jangan khawatir jika Anda belum memahami maksud dari kode tersebut,
nanti akan dijelaskan apa yang sudah kita tuliskan.
Simpan perubahan pada berkas JavaScript tersebut kemudian

buka index.html dan tambahkan elemen <script> dengan atribut src bernilai
alamat berkas kalkulator.js. Tuliskan elemen <script> tepat sebelum closing
tag </body>.
. ...........
. <script src="assets/kalkulator.js"></script>
. </body>
Simpan perubahan pada index.html kemudian kita coba buka halaman

tersebut dengan menggunakan browser. Maka hasilnya akan nampak seperti
ini.
Tidak ada perubahan apa apa bukan? Yups, benar. Tetapi ketika kita
mencoba membuka console pada DevTools kita akan mendapati pesan yang
dituliskan menggunakan JavaScript. Silakan buka console pada DevTools
dengan menekan ctrl+shift+i.
Script yang kita tuliskan sebelumnya berfungsi untuk menampilkan sebuah
data baik itu teks (string) atau variabel, objek, fungsi dsb. Pada console
website console.log() biasanya digunakan sebagai sarana debugging
sederhana untuk mengetahui nilai dari suatu variabel.
Mungkin ini akan membuat Anda bingung jika tidak memiliki dasar
pemrograman. Tak apa, yang terpenting ketika pesan ini muncul
pada console, itu menandakan kita sudah berhasil menerapkan JavaScript
pada website kita.
Dasar JavaScript
Wajar jika kita menemukan banyak buku JavaScript dengan halaman super
tebal karena memang banyak sekali bahasan seputar JavaScript ini. Tetapi
pada materi ini kita rangkum menjadi beberapa pembahasan penting yang
Anda perlu ketahui. Tujuannya agar Anda familier dengan dasar - dasar
JavaScript. Dengan memahami dasar-dasar JavaScript, nantinya diharapkan
kita dapat terus berlatih sehingga terbiasa dengan penggunaan sintaksnya.
Ketika mempelajari bahasa pemrograman apapun pertama kita harus

memahami logika yang mendasari dari penulisan script, meskipun secara
sintaksis setiap bahasa pemrograman berbeda namun secara umum
logikanya akan sama.
Maka dari itu hindari belajar dengan cara menghafal seluruh struktur kode
yang dituliskan, tapi belajarlah dengan memahami tujuan dari kode yang
dituliskan. Dengan memahami kode-kode yang ada dan dipadukan logika
maka kita akan mudah dalam menghadapi suatu masalah - masalah yang
ada ketika mengembangkan suatu aplikasi/web.
Pada akhir materi ini, kita akan mengenal tentang variabel, array, operator
komparasi, if else statement dan masih banyak lagi. Sudah siap belajar?
Mungkin selama pembelajaran dasar JavaScript kita perlu mencoba coba

kode yang sedang dipelajari, disarankan untuk gunakan tools online
seperti glot.io ketika menjalankan kodenya. Atau Anda juga bisa mencobanya
langsung pada console browser melalui DevTools. Silakan baca artikel berikut
sebelum melanjutkan pada materi selanjutnya:
 Glot.io: Code Editor dan Compiler Online Terbaik

 Get Started With Running JavaScript In The Console
Statement
Sebuah script dibangun dari serangkaian statement. Statement merupakan

sebuah perintah yang bertujuan untuk memberitahu apa yang harus dilakukan
browser. Contohnya kode berikut merupakan statement yang menyatakan
bahwa browser harus menampilkan pesan (alert) dengan kalimat “Terima
kasih”.
. alert("Terimakasih.");
Pada akhir kode terdapat tanda titik koma (;) yang digunakan untuk menandai
akhir dari sebuah statement. Meskipun sebenarnya pada JavaScript kita
dapat menghiraukan penulisan titik koma (;) pada akhir statement, tetapi
dalam best practice nya kita biasakan akhiri statement dengan titik koma (;).
Comment
Pada JavaScript juga terdapat fitur komentar. Seluruh teks yang dituliskan
pada tanda komentar akan diabaikan (tidak dianggap ada) atau tidak akan
dieksekusi. Dalam komentar ini kita bisa menuliskan teks untuk mengingatkan
atau menjelaskan kode yang kita tuliskan. Hal ini bisa saja berguna jika kode
yang kita tuliskan akan diubah oleh orang lain. Tapi ingat, jangan terlalu
berupaya dalam menuliskan komentar yang sebenarnya tidak perlu dituliskan.
Terdapat dua metode ketika memberikan komentar. Untuk memberikan

komentar pada satu baris saja, kita bisa gunakan tanda dua buah garis miring
(//) pada awal barisnya.
. // ini merupakan komentar satu baris komentar

.
. // alert("Terimakasih")
Sedangkan untuk menggunakan komentar lebih dari satu baris (multiple lines
comment) kita bisa gunakan tanda /* sebagai pembuka komentar dan tanda */
sebagai penutup komentar. Teks apapun yang berada di antara tanda
tersebut akan dijadikan komentar dan tidak akan dieksekusi.
. /* Ini merupakan komentar dengan lebih dari satu baris

. Teks apapun yang berada disini akan dijadikan komentar.
. Ketika menggunakan ini, jangan lupa untuk menutupnya.
. */
Variabel
Ketika mendengar variabel apakah Anda teringat tentang pelajaran

matematika? Yups, variabel di sini memiliki konsep yang sama. Variabel
umumnya digunakan untuk menyimpan informasi atau nilai yang akan
dikelola di dalam sebuah program.
Sebelum ECMAScript 2015 (ES6) untuk membuat variabel pada JavaScript

kita gunakan keyword var.
. var firstName = "Harry";
Tanda sama dengan (=) digunakan untuk menginisialisasikan nilai pada

variabel, sehingga sekarang variabel firstName memiliki nilai teks “Harry”.
Kita bisa menggunakan apapun yang kita mau untuk menamai sebuah
variabel, tetapi pastikan penamaannya masih masuk akal dengan konteksnya
agar berikutnya kode mudah di-maintenance.
Sebaiknya hindari penamaan variabel dengan istilah umum seperti “data”,

Gunakanlah penamaan variabel yang dapat mendeskripsikan nilai dari
variabel itu sendiri. Berikut beberapa aturan dalam penamaan variabel yang
perlu Anda ketahui:
 Harus dimulai dengan huruf atau underscore (_).

 Dapat terdiri dari huruf, angka, dan underscore (_) dengan berbagai
kombinasi.
 Tidak dapat mengandung spasi (white space), jika penamaan variabel
lebih dari dua kata maka tuliskan secara camelCase.
Contoh firstName, lastName, catName, dll.
 Tidak dapat mengandung karakter spesial (! . , / \ + * = dll.)
Nilai variabel yang diinisialisasi menggunakan var dapat diubah kembali

nilainya, contoh:
. var firstName = "Harry";

. console.log(firstName);
.
. firstName = "Ron";
. console.log(firstName);
.
. /* output:
. Harry
. Ron
. */
Sejak ECMAScript 2015 (ES6) selain var, menginisialisasikan variabel dapat

menggunakan let dan const. ES6 melakukan improvisasi pada deklarasi
variabel karena menggunakan var terdapat beberapa hal yang kontroversial,
salah satunya hoisting.
Apa itu hoisting? sesuai artinya “Mengangkat” variabel yang dideklarasikan

menggunakan var ini dapat diinisialisasi terlebih dahulu sebelum
dideklarasikan, Contoh:
. x = 100;
. var x;
. console.log(x);
.
. /* output: 100 */
Ini dikarenakan proses hoisting, sebenarnya di belakang layar deklarasi

variabel x diangkat ke atas sehingga kode yang tampak seperti ini:
. var x;
. x = 100;
. console.log(x);
.
. /* output: 100 */
Hoisting menjadi kontroversial karena tidak sedikit developer yang dibuat

bingung akan hal ini. Masalah ini sudah terselesaikan jika kita
menggunakan let dalam mendeklarasikan variabel.
. y = 100;
. let y;
. console.log(y);
.
. /* ReferenceError: y is not defined */
Kemudian const digunakan untuk mendeklarasikan sebuah variabel yang

sifatnya immutable atau tidak perlu diinisialisasi kembali. Jika kita
menginisialisasi kembali nilai variabel yang menggunakan const, maka akan
mendapati eror “TypeError: Assignment to constant variable.”
. const z = 100;
. console.log(z);
.
. z = 200;
. console.log(z)
.
. /* TypeError: Assignment to constant variable. */
Dengan begitu sebaiknya kita gunakan let atau const ketika mendeklarasikan

variabel daripada menggunakan var.
Berikut snippet code dari contoh kode yang digunakan pada materi di atas,

Anda bisa mencobanya sendiri dengan mengubah nilai variabel dan
menampilkannya pada console.
https://glot.io/snippets/fhzffeo6bn
Tipe Data
Nilai yang kita tetapkan pada variabel pasti memiliki tipe data. Tipe data
merupakan pengklasifikasian data berdasarkan jenis data tersebut. Pada
JavaScript terdapat beberapa tipe data sebagai berikut:
Undefined
Tipe data ini terbentuk ketika sebuah variabel tidak memiliki nilai, dalam arti
lain ketika kita mendeklarasikan variabel tanpa menginisialisasikan nilainya,
maka variabel tersebut menjadi undefined. Contoh:
. let x;
. console.log(typeof(x));
.
. /* output: undefined */
Pada contoh kode di atas, kita mendeklarasikan variabel x, tetapi kita tidak
menginisialisasikan dengan nilai apapun. Ketika kita memastikan tipe data
dengan menggunakan fungsi typeof() maka menghasilkan output undefined.
Fungsi typeof() digunakan untuk memastikan tipe data pada
variabel dengan mengembalikan tipe data tersebut dalam
bentuk teks
Numbers
Nilai dari tipe data number adalah angka. JavaScript variabel bertipe data
number dituliskan seperti ini:
. let x = 10;
Jika angka tersebut merupakan sebuah bilangan desimal, maka kita bisa
gunakan tanda titik pada pecahan bilangannya.
. let x = 10;
. console.log(typeof(x))
.
. /* output: number */
.
. let y = 17.25;
. console.log(typeof(y))
.
. /* output: number */
Pada tipe data number kita juga dapat melakukan perhitungan aritmatika
seperti penambahan, pengurangan, perkalian, dll. Berikut operator yang
dapat kita gunakan dalam melakukan perhitungan aritmatika pada tipe
data number:
Operator Fungsi Contoh
+ Penambahan 10 + 10 = 20
- Pengurangan 15 - 7 = 8
/ Pembagian 21 / 7 = 3
* Perkalian 9 * 9 = 81
% Sisa hasil bagi 5%2=1
. let a = 12;
. let b = 9;
.
. console.log(a + b)
. console.log(a - b)
. console.log(a * b)
. console.log(a / b)
. console.log(a % b)
.
. /* output:
. 21
. 3
. 108
. 1.3333333333333333
. 3
Pada operator aritmatika juga terdapat operator increment (++)

dan decrement (--). Operator increment dan decrement digunakan untuk
menambahkan atau mengurangi nilai 1 pada nilai variabel yang ada
sekarang.
Operator ini dapat dituliskan sebelum atau sesudah variabel, tetapi hal
tersebut bukan berarti sama. Berikut ketentuannya:
 Jika dituliskan setelah variabel (x++), statement akan mengembalikan

nilai variabel saat ini sebelum ditingkatkan nilainya.
 Jika dituliskan sebelum variabel (++x), statement akan mengembalikan
nilai variabel setelah ditingkatkan nilainya.
Lebih jelasnya berikut contoh kode dalam penerapan operator tersebut,

perhatikan hasil yang di dapat.
. /* Increment dan Decrement */

.
. let postfix = 5;
. console.log(postfix++);
. /* output: 5 */
.
. let prefix = 5;
. console.log(++prefix);
. /* output: 6 */
Strings
Tipe data selanjutnya adalah strings, String ini dasarnya adalah sebuah teks.
Pada JavaScript untuk menetapkan nilai string pada variabel, gunakan
tanda single (‘) atau double quote (“) di antara teksnya. Contohnya:
. let greet = "Hello";

. console.log(typeof(greet))
.
. /* output: string */
Apa pun yang berada di antara tanda double quote atau single

quote merupakan sebuah string, baik itu angka, huruf maupun karakter
spesial.
Pada string juga kita dapat menggunakan operator plus (+). Operator tersebut

pada string berfungsi untuk menggabungkan dua teks yang terpisah menjadi
satu buah teks. Contohnya seperti ini:
. let greet = "Hello";

. let moreGreet = greet + greet;
. console.log(moreGreet);
.
. /* output: HelloHello */
Boolean
Boolean hanya dapat memiliki dua nilai, yakni true atau false. Tipe data ini
menjadi kunci utama dalam penentuan logika, kita akan memahaminya nanti
ketika pembahasan if/else statement. Untuk menetapkan nilai boolean pada
variabel kita bisa menggunakan keyword true atau false.
. let x = true;
. let y = false;
.
. console.log(typeof(x))
. console.log(typeof(y))
.
. /* output:
. boolean
. boolean
. */
Atau kita bisa gunakan operator komparasi seperti lebih dari (>) atau kurang
dari (<). Contohnya:
. const a = 10;
. const b = 12;
.
. let isGreater = a > b;
. let isLess = a < b;
.
. console.log(isGreater);
. console.log(isLess);
.
. /* output:
. false
. true
. */
Null
Yang terakhir adalah null. Serupa dengan undefined, namun null perlu

diinisialisasikan pada variabel. null biasa digunakan sebagai nilai sementara
pada variabel, tapi sebenarnya nilai tersebut “tidak ada”.
Terkadang kita perlu membuat sebuah variabel, namun kita belum

memerlukan nilai apa apa dan tidak ingin terikat oleh tipe data apapun. Nah,
daripada kita tidak menetapkan nilai apapun (variabel akan undefined)
sebaiknya kita beri nilai null pada variabel tersebut, dan ubah nanti ketika kita
membutuhkannya.
Untuk menetapkan null pada variabel, kita dapat gunakan keyword null ketika

variabel tersebut diinisialisasikan.
. let someLaterData = null;
. console.log(someLaterData);
.
. /* output:
. null
. */
Meskipun terdapat beberapa tipe data dalam JavaScript, tetapi variabel pada
JavaScript memiliki sifat tipe data yang dinamis. Artinya, kita dapat
memberikan tipe data yang berubah-ubah pada satu variabel yang sama.
Contohnya:
. let x; // x merupakan undefined

. x = 1 // sekarang x merupakan number
. x = true // sekarang x merupakan boolean
. x = "Harry" // sekarang x merupakan string
Anda bisa mencobanya sendiri dengan berbagai macam tipe data pada
JavaScript dan menampilkannya pada console.
https://glot.io/snippets/fhzkayhcom
Arrays dan Objek
Kita sudah mengenal tipe data dasar yang ada pada JavaScript. Kali ini kita
akan membahas mengenai array dan objek pada JavaScript. Keduanya dapat
menampung lebih dari satu tipe data dasar yang digunakan untuk mengelola
sebuah data.
Arrays
Array merupakan tipe data yang dapat mengelompokkan lebih dari satu nilai
dari tipe data lain dengan menempatkannya pada satu variabel. Contoh:
. let myArray = ["Coklat", 42.5, 22, true, "Programming"];
. console.log(myArray);
.
. /* output:
. [ 'Coklat', 42.5, 22, true, 'Programming' ]
. */
Nilai - nilai yang berada pada array disusun dan diakses secara indexing.
Untuk mengakses nilai di dalam array kita gunakan tanda kurung siku [] yang
di dalamnya berupa angka yang merupakan posisi nilai yang ingin diakses.
. console.log(myArray[1]);
.
. /* output:
. 42.5
. */
Yang perlu kita ketahui adalah nilai index dimulai dari angka 0. Terlihat pada
contoh kode di atas, kita mengakses index ke-1 pada myArray. Nilai yang
muncul adalah nilai ke-2 dari array tersebut, yakni 42.5. Jika kita tidak
mengakses nilai array lebih dari index-nya maka hasilnya akan undefined.
Index terakhir array selalu jumlah nilai array - 1.
. console.log("Panjang nilai myArray adalah " + myArray.length + ".");
.
. /* output:
. Coklat
. 42.5
. 22
. true
. Programming
. undefined
. Panjang nilai myArray adalah 5.
. */
Objek
Objek serupa dengan array yang dapat menampung banyak nilai dengan tipe
data yang beragam. Untuk mengelola data menggunakan objek, bedanya
objek diakses tidak melalui indexing, melainkan menggunakan
pendekatan key-value. Untuk mengakses nilainya kita gunakan key. Key juga
biasa disebut dengan properti.
Untuk menetapkan objek pada variabel gunakan tanda kurung kurawal { }

dalam menginisialisasinya. Kemudian di dalamnya kita tetapkan key: value.
. let object = {key1: "value1", key2: "value2", key3: "value3"}
Dalam menentukan nama key, gunakanlah nama yang dapat

mendeskripsikan dari value-nya. Pada value, kita dapat mengisikan nilai
dengan tipe data apapun, termasuk array. Contoh:
. let user = {firstName: “Harry”, lastName: “Potter”, age: 20, isMuggle:

false, stuff: ["Wand", "Flying Car", "Owl"]};
Dalam menuliskan objek, baris baru tidaklah penting dan tidak akan
berpengaruh apa pun. Sehingga lebih baik setiap kita menetapkan key-
value buatlah baris baru untuk memisahkan antar nilainya, hal ini akan
memudahkan kita dalam memahami struktur data yang berada pada objek.
. let user = {
. firstName: “Harry”,
. lastName: “Potter”,
. age: 20,
. isMuggle: false,
. stuff: ["Magic Wind", "Flying Car", "Owl"]
. };
Kemudian untuk mengakses nilai dari properti objek kita dapat gunakan tanda
titik diikuti dengan nama properti-nya. Contoh:
. console.log("Hallo, nama saya " + user.firstName + " " + user.lastName);

. console.log("Umur saya " + user.age + " tahun");
.
. /* output
. Hallo, nama saya Harry Potter
. Umur saya 20 tahun
. */
Bahkan dalam properti objek, kita dapat menyimpan nilai objek lainnya.
Contohnya properti firstName dan lastName dapat dikelompokan kembali
dalam sebuah objek baru sebagai berikut:
. let user = {
. name: {
. first: "Harry",
. last: "Potter"
. },
. age: 20,
. isMuggle: false,
. stuff: ["Magic Wind", "Flying Car", "Owl"]
. }
Untuk mendapatkan nilainya kita perlu mengakses properti dari

objek user kemudian name. Sehingga penulisannya menjadi seperti berikut:
. console.log("Hallo, nama saya " + user.name.first + " " + user.name.last);

.
. /* output
. Hallo, nama saya Harry Potter
. */
Mungkin seperti itulah gambaran mengenai objek di JavaScript, penting untuk

Anda garis bawahi bahwa dalam mengelola banyak tipe data pada
JavaScript, Anda dapat menggunakan array maupun objek. Pembahasan di
atas cukup sebagai landasan pengetahuan mengenai dua hal itu ya.
Anda bisa mencobanya sendiri dengan mengubah struktur objek atau array
dan menampilkannya pada console.
https://glot.io/snippets/fi5zpzsh6w
Banyak hal sebenarnya yang dapat diceritakan tentang dua hal ini, terutama
untuk objek. Jika Anda ingin tahu lebih dalam, Anda bisa baca
dokumentasinya pada tautan yang disediakan oleh MDN:
 Array : https://developer.mozilla.org/id/docs/Web/JavaScript/Reference
/Global_Objects/Array
 Objek : https://developer.mozilla.org/id/docs/Web/JavaScript/Reference
/Global_Objects/Object
Assignment Operator
Dari contoh kode yang kita gunakan sebelumnya sebenarnya kita sudah
menggunakan assignment operator. Operator ini digunakan untuk
memberikan nilai pada variabel.
Pada dasarnya operator ini adalah tanda sama dengan (=), di mana tanda ini
digunakan untuk menginisialisasi nilai pada variabel. Variabel yang akan
diberikan nilai ditempatkan pada sebelah kiri dan nilainya ditempatkan pada
sebelah kanan (nilai dapat berupa variabel lain atau nilai primitif, array, atau
objek). Di antara keduanya terdapat operator assignment.
. x = y;
Contoh pada statement tersebut kita menginisialisasikan nilai y pada

variabel x, sehingga nilai x sekarang memiliki nilai yang sama dengan y.
Ada beberapa assignment operator tambahan lain dalam menginisialisasikan

nilai pada variabel, atau bisa kita sebut sebagai shortcut dalam menentukan
nilai. Contohnya:
. let x = 10;
. let y = 5
.
. x += y;
.
. console.log(x)
Pada contoh kode di atas bisa terdapat statement x += y; apa itu

artinya? Assignment operator tersebut digunakan sebagai shortcut dari x = x
+ y. Cara ini juga dapat digunakan pada operator aritmatika lain seperti,
perkalian, pengurangan, pembagian, dan lainnya.
. let x = 10;
. let y = 5
.
. x += y; // artinya -> x = x + y;
. x -= y; // artinya -> x = x - y;
. x *= y; // artinya -> x = x * y;
. x /= y; // artinya -> x = x / y;
. x %= y; // artinya -> x = x % y;
.
. console.log(x);
Berikut snippet code dari contoh kode yang digunakan pada materi di atas.

Anda bisa mencobanya sendiri penggunaan operator assignment yang sudah
dipelajari.
Operator Komparasi
Sekarang kita sudah mengetahui bagaimana cara menyimpan nilai pada sebuah
variabel, array, ataupun objek. Nah, selanjutnya kita akan belajar mengenai
operator komparasi sebagai logika dasar dalam membandingkan nilai pada
JavaScript.
Terdapat serangkaian karakter khusus yang disebut dengan operator
pembanding/komparasi yang dapat mengevaluasi dan membandingkan dua nilai.
Berikut daftar operator dan fungsinya:
Operator Fungsi
== Membandingkan kedua nilai apakah sama. (Tidak Identik)
!= Membandingkan kedua nilai apakah tidak sama. (Tidak Identik)
=== Membandingkan kedua nilai apakah identik.
!== Membandingkan kedua nilai apakah tidak identik.
> Membandingkan dua nilai apakah nilai pertama lebih besar dari nilai
kedua.
>= Membandingkan dua nilai apakah nilai pertama lebih besar atau sama
dengan dari nilai kedua.
< Membandingkan dua nilai apakah nilai pertama lebih kecil dari nilai
kedua.
<= Membandingkan dua nilai apakah nilai kedua lebih kecil dari atau sama
dengan nilai pertama.
Ketika kita melakukan perbandingan antara dua nilai, JavaScript akan
mengevaluasi kedua nilai tersebut dan akan mengembalikan boolean dengan nilai
hasil perbandingan tersebut, baik false, atau true. Berikut contohnya:
. let a = 10;
. let b = 12;
.
. console.log(a < b);
. console.log(a > b);
.
. /* output
. true
. false
. */
Perbedaan antara “sama” dan “Identik”
Dalam operator komparasi di JavaScript, hal yang menjadi sedikit “tricky” adalah
membedakan antara “sama” (==) dan “identik” (===).
Kita sudah mengetahui bahwa setiap nilai pasti memiliki tipe data baik itu number,
string atau boolean. Contohnya sebuah string “10” dan number 10 merupakan hal
yang serupa, tetapi keduanya tidak benar-benar sama.
Hal inilah yang membedakan antara sama dan identik pada JavaScript. Jika kita
ingin membandingkan hanya dari kesamaan nilainya kita bisa gunakan == tapi
jika kita ingin membandingkan dengan memperhatikan tipe datanya kita
gunakan ===.
Contohnya sebagai berikut:
. const aString = '10';

. const aNumber = 10
.
. console.log(aString == aNumber) // true, karena nilainya sama-sama 10
. console.log(aString === aNumber) // false, karena walaupun nilainya sama, tetapi
tipe datanya berbeda
.
. /* output
. true
. false
. */
Logical Operators
Terdapat beberapa operator lain yang dapat kita gunakan untuk menetapkan
logika yang lebih kompleks, yakni dengan logical operators. Dengan logical
operator kita dapat menggunakan kombinasi dari dua nilai boolean atau bahkan
lebih dalam menetapkan logika.
Pada JavaScript terdapat tiga buah karakter khusus yang berfungsi

sebagai logical operator, berikut macam-macam logical operator dan fungsinya:
Operator Deskripsi
&& Operator dan (and), logika akan menghasilkan true apabila semua kondisi

terpenuhi (bernilai true).
|| Operator atau (or), logika akan menghasilkan true apabila ada salah satu

kondisi terpenuhi (bernilai true).
! Operator tidak (not), digunakan untuk membalikan suatu kondisi.

Berikut contoh penerapannya pada JavaScript:
. let a = 10;
. let b = 12;
.
. /* AND operator */
. console.log(a < 15 && b > 10); // (true && true) -> true
. console.log(a > 15 && b > 10); // (false && true) -> false
.
. /* OR operator */
. console.log(a < 15 || b > 10); // (true || true) -> true
. console.log(a > 15 || b > 10); // (false || true) -> true
.
. /* NOT operator */
. console.log(!(a < 15)); // !(true) -> false
. console.log(!(a < 15 && b > 10)); // !(true && true) -> !(true) -> false
.
. /* output
. true
. false
. true
. true
. false
. false
. */
Mungkin sebagian dari kita bertanya, sebenarnya apa kegunaan dari nilai boolean
selain hanya menampilkan nilai true dan false saja? Pada pembahasan tipe data
sudah pernah disebutkan bahwa boolean merupakan salah satu kunci dari logika
pemrograman, karena boolean dapat mengontrol aliran pada program.
Lantas bagaimana cara boolean mengontrol sebuah aliran program? Pada bab
selanjutnya, kita akan membahas mengenai if/else statement yang dapat
mengontrol flow pada program, tentunya pada penggunaan statement ini boolean
sangat berperan.

Silakan Anda mencobanya sendiri dengan mengubah beberapa penggunaan
operator komparasi dan menampilkannya pada console.
https://glot.io/snippets/fi6b6h58lz
If/Else Statement
Ketika mengembangkan sebuah program tentu terdapat alur atau flow proses

ketika kode dijalankan. Kita dapat mengontrol alur program ketika suatu
kondisi terjadi, misalkan jika nilai x > 5 maka program harus
melakukan statement a. Jika tidak, program akan menjalankan statement b.
Untuk melakukan hal tersebut, kita dapat menggunakan if/else statement.
If/else statement dapat digambarkan seolah-olah kita memberikan pertanyaan

benar atau salah pada JavaScript, lalu memberikan perintah sesuai jawaban
dari pertanyaan tersebut.
Contohnya, terdapat variabel x dengan nilai 50, kemudian kita bertanya “Hai
JavaScript! Apakah x lebih dari 70?” jika kondisi tersebut benar, maka kita
dapat memerintahkan JavaScript untuk menampilkan nilainya. Jika salah, kita
perintahkan JavaScript untuk menampilkan teks “Nilai kurang dari 70”.
Skenario tersebut dapat dituliskan pada dalam bentuk kode pada JavaScript
seperti berikut:
. let x = 50;
.
. if(x > 70) {
. console.log(x);
. } else {
. console.log("Nilai kurang dari 70");
. }
.
. /* output
. Nilai kurang dari 70
. */
Pada kode di atas, kita menggunakan kata kunci if untuk memberikan

pertanyaan pada JavaScript. Pertanyaan tersebut berupa logical
statement yang sudah kita pelajari pada materi sebelumnya. Logical
statement pada if ditulis di dalam tanda kurung (parentheses). Jika logical
statement tersebut menghasilkan true, maka JavaScript akan mengeksekusi
kode yang berada di dalam block if. Jika logical statement menghasilkan
nilai false, maka kode yang pada block else lah yang akan dieksekusi.
Block else bersifat opsional untuk dituliskan, hal tersebut berarti kita tidak

perlu menuliskannya jika tidak kita manfaatkan. Contohnya:
. let language = "English";

. let greeting = "Selamat Pagi!"
.
. if(language === "English") {
. greeting = "Good Morning!";
. }
.
. console.log(greeting);
.
. /* output
. Good Morning!
. */
Pada kode di atas, nilai greeting memiliki nilai standar “Selamat Pagi!” tetapi

akan ditampilkan berbeda jika language memiliki nilai “English”, pada kasus
ini kita tidak perlu menuliskan block else.
Kita juga dapat memberikan lebih dari satu pertanyaan pada if
statement dengan kata lain, kita dapat memberikan lebih dari satu kondisi
dengan menggabungkan keyword else dan if seperti berikut:
. let language = "French";
. let greeting = "Selamat Pagi"
.
. greeting = "Good Morning!";
. } else if(language === "French") {
. greeting = "Bonjour!"
. } else if(language === "Japanese") {
. greeting = "Ohayogozaimasu!"
. }
.
. console.log(greeting);
.
. /* output
. Bonjour!
. */
Dengan mengubah nilai dari variabel language ke nilai yang lain

seperti “English” atau “Japanese” maka pesan yang ditampilkan
pada console akan ikut berubah.

Silakan Anda mencobanya sendiri sehingga paham dengan cara penggunaan
dari if/statement.
https://glot.io/snippets/fi7an0nsxb
Loop
Sejauh ini kita sudah mengenal array sebagai tempat untuk menyimpan
banyak data. Ada beberapa kasus dimana kita ingin memeriksa setiap item
dalam sebuah array dan melakukan sesuatu dengannya, tetapi kita tidak ingin
menuliskan seluruh daftar nilai pada array secara manual, dan menyibukkan
diri untuk melakukan hal yang berulang. Maka dari itu kita perlu mempelajari
teknik yang dapat mengatasi permasalahan tersebut, teknik ini disebut
dengan loops.
For loop
Terdapat beberapa cara dalam melakukan proses loop pada JavaScript,

namun “for” merupakan salah satu cara yang banyak digunakan. Struktur
dasar dari for tampak seperti berikut:
. for(inisialisasi variabel; test kondisi; perubahan nilai variabel) {

. // do something
. }
Dan berikut contoh penerapan for secara nyata:
. for(let i = 0; i < 5; i++) {

. console.log(i);
. }
.
. /* output
. 0
. 1
. 2
. 3
. 4
. */
Mungkin kode tersebut sulit dipahami jadi mari kita bahas sedikit demi sedikit.
Yang pertama adalah for(), kita memanggil for statement di mana kita

memerintahkan JavaScript seperti ini: “Hai JavaScript! Lakukan perulangan
jika kondisi ini benar”, selanjutnya tentu kita membutuhkan sebuah kondisi
untuk dievaluasi.
Namun sebelum memberikan kondisi, kita dapat membuat sebuah

variabel i sebagai index iterasi dengan memberikan nilai 0 (let i = 0;).
Mengapa kita memberikan nilai 0 pada variabel i? Karena ini merupakan
sebuah habit dimana perhitungan perulangan dimulai dari 0, begitu juga
dengan indexing pada array.
Lalu i < 5; merupakan sebuah kondisi dimana jika kondisinya terpenuhi

proses looping akan dijalankan. Jadi jika kita memberikan kondisi seperti ini: i
< 5; maka proses looping akan terjadi sebanyak 5 kali.
Dan terakhir i++; menunjukan perubahan nilai variabel i di setiap proses

perulangan terjadi. Biasanya perubahan
merupakan increment ataupun decrement dari variabel yang kita tetapkan
sebelumnya (variabel i). Jika kita tidak menetapkan perubahan nilai, proses
perulangan dapat berjalan selamanya! Karena kondisi akan terus terpenuhi.
Lalu { console.log(i); } merupakan statement yang akan dieksekusi pada

setiap proses loop. Kita dapat menuliskan banyak statement di sini selama
berada di dalam tanda { }. Pada kode tersebut kita memerintahkan JavaScript
untuk menampilkan nilai i pada setiap proses perulangan. Sehingga output
akan menghasilkan deretan angka dari 0 hingga 4.
Huft, cukup panjang untuk memahami for loops, mari kita kembali ke tujuan
awal, lantas bagaimana cara memeriksa item dalam array dengan
menggunakan for loop? Kita dapat melakukannya dengan seperti ini:
. const myArray = ["Harry", "Ron", "Hermione", "Tom"];
.
. for(let i = 0; i < myArray.length; i++) {
. console.log(myArray[i]);
. }
.
. /* output
. Harry
. Ron
. Hermione
. Tom
. */
Mudah kan? Kita gunakan i < myArray.length sebagai batasan pada

proses looping, sehingga proses looping tidak lebih dari panjang array.
Kemudian untuk mengakses index array kita manfaatkan nilai variabel i,
dimana variabel i ini terus bertambah nilainya pada tiap proses loop, sehingga
kita bisa mengakses tiap index pada array secara otomatis.
For of loop
Cara lain dalam melakukan looping adalah menggunakan for..of. For of mulai

hadir pada ECMAScript 2015 (ES6). Cara ini jauh lebih sederhana dan
modern dibanding for loop biasa. Struktur dasar dari for of loop nampak
seperti ini:
. for(arrayItem of myArray) {
. // do something
. }
Yups, for of tidak membutuhkan banyak statement untuk melakukan

proses looping pada array. Dengan for..of, nilai tiap array akan diinisialisasi
pada variabel baru yang kita tentukan pada tiap proses looping-nya. Jumlah
proses looping nya pun akan menyesuaikan dengan ukuran dari array.
Sederhananya seperti kita melakukan perintah “Hei JavaScript! Lakukan
perulangan pada myArray, akses tiap nilainya dan simpan pada
variabel arrayItem”. Pada proses looping kita gunakan
variabel arrayItem untuk mengakses tiap nilai dari item myArray.
Agak sulit memang menjelaskan dengan kata-kata, mari kita terjemahkan

dalam kode secara langsung.
. let myArray = ["Harry", "Ron", "Hermione", "Tom"];

.
. for(const arrayItem of myArray) {
. console.log(arrayItem)
. }
.
. /* output
. Harry
. Ron
. Hermione
. Tom
. */
Lebih mudah dan simpel bukan?
Anda bisa mencobanya sendiri, dan pahami cara penggunaan dari for loop
dan for of loop.
https://glot.io/snippets/fi7iwiumv8
Function
Tanpa kita sadari sebenarnya kita sudah menggunakan sebuah fungsi pada
contoh kode yang ada sebelumnya. console.log() (lebih tepatnya pada log())
merupakan sebuah function yang berfungsi untuk menampilkan data pada
console browser. Tapi sebenarnya apa itu function? Bagaimana ia bisa
bekerja?
Function atau fungsi merupakan potongan kecil kode yang tidak akan
dieksekusi sebelum dipanggil. Contoh lain fungsi JavaScript yang sudah ada
pada browser adalah alert(). Ia bertujuan untuk menampilkan pesan dalam
bentuk pop up dialog. Fungsi tersebut sudah ada pada browser dan akan
muncul hanya ketika kita menggunakan/memanggilnya dengan alert().
Atau dalam arti lain, kita dapat berfikir bahwa function merupakan sebuah

variabel yang berisi block logika, dan block logika tersebut akan dieksekusi
ketika variabelnya dipanggil.
Semua fungsi memiliki struktur yang sama. Nama fungsi selalu diikuti dengan
tanda kurung (parentheses) tanpa spasi, lalu terdapat sepasang kurung
kurawal yang berisi logika dari fungsi tersebut.
Terkadang di dalam tanda kurung kita membutuhkan sebuah informasi

tambahan yang disebut dengan arguments. Argument merupakan data yang
digunakan pada fungsi yang dapat mempengaruhi perilaku dari fungsinya
tersebut. Contoh, fungsi alert() dapat menerima argument string yang
digunakan untuk menampilkan teks pada dialog.
Berikut merupakan ilustrasi dari struktur fungsi.

Terdapat dua tipe fungsi pada JavaScript, yakni native function dan custom
function.
Native function merupakan fungsi yang sudah terdapat pada JavaScript atau
Browser sehingga kita tidak perlu membuat hanya tinggal menggunakan saja.
Contohnya alert(), confirm(), Date(), parseInt() dll. Sebenarnya terdapat
ratusan native function yang tersedia.
Custom function merupakan fungsi yang kita buat sendiri, tentu custom

function dibuat menyesuaikan kebutuhan kita. Untuk membuat
sebuah custom function, kita perlu menuliskan keyword function dilanjutkan
dengan menuliskan seluruh struktur fungsinya.
. function greeting() {
. console.log("Good Morning!")
. }
Kemudian kita dapat memanggil fungsinya tersebut dengan

menggunakan greeting().
. function greeting() {
. console.log("Good Morning!")
. }
.
. greeting();
.
. /* output
. Good Morning!
. */
Tetapi jika sebuah fungsi hanya menjalankan baris kode secara sama dirasa
kurang fungsional bukan? Kita dapat membuat fungsi tersebut untuk
menerima argumen dan memanfaatkan argumen untuk mengubah perilaku
dari fungsinya.
Untuk menambahkan argument pada fungsi, tambahkan variabel di dalam

tanda kurung fungsi namun variabel tersebut tidak memerlukan
keyword var, let, ataupun const. Kita juga bisa menambahkan lebih dari satu
argumen dengan memberikan tanda koma antar variabel argumennya.
Contohnya fungsi greeting akan kita ubah dengan menambahkan argument,
sehingga akan nampak seperti ini:
. function greeting(name, language) {
. console.log("Good Morning " + name + "!");
. } else if (language === "French") {
. console.log("Bonjour " + name + "!");
. } else {
. console.log("Selamat Pagi " + name + "!");
. }
. }
Sehingga dalam memanggilnya pun kita perlu mengirimkan dua buah nilai
pada fungsinya seperti berikut:

. console.log("Good Morning " + name + "!");
. console.log("Bonjour " + name + "!");
. } else {
. console.log("Selamat Pagi " + name + "!");
. }
. }
.
. greeting("Harry", "French");
.
. /* output
. Bonjour Harry!
. */
Satu hal lagi, function dapat mengembalikan sebuah nilai. Hal ini benar-benar

sangat berguna dan membuat kita lebih mudah. Dengan nilai kembalian, kita
dapat membuat function yang berfungsi untuk melakukan perhitungan
matematika dan hasilnya dapat langsung kita masukkan ke dalam sebuah
variabel. Contohnya seperti ini:
. function multiply(a, b) {
. return a * b;
. }
.
. let result = multiply(10, 2)
. console.log(result)
.
. /* output
. 20
. */
Untuk membuat nilai kembalian dari fungsi gunakan keyword return diikuti

dengan nilai yang akan dikembalikan. Nilai kembalian tidak hanya number,
bisa saja berupa string, boolean, string, objek ataupun array. Seperti inilah
fungsi greeting() jika kita ubah dengan menetapkan dengan nilai kembalian
string:

. return "Good Morning " + name + "!";
. return "Bonjour " + name + "!";
. } else {
. return "Selamat Pagi " + name + "!";
. }
. }
.
. let greetingMessage = greeting("Harry", "French");
. console.log(greetingMessage);
.
. /* output
. Bonjour Harry!
. */
Yang perlu kita perhatikan lagi, ketika statement return tereksekusi, maka
fungsi akan langsung terhenti dan mengembalikan nilai.
Anda bisa mencobanya sendiri, dan pahami struktur cara penggunaan dari
function.
https://glot.io/snippets/fi85m61lkm
Variable Scope
Sejauh ini kita sudah mengenal function. Ada satu hal lagi yang harus kita tahu
mengenai dasar JavaScript, yakni scoping variable. Ada banyak keadaan di mana
kita membutuhkan variabel untuk diakses di seluruh script yang kita buat. Tetapi
ada juga keadaan di mana kita ingin variabel tersebut hanya dapat diakses pada
cakupan fungsi dan fungsi turunannya saja.
Variabel yang dapat di akses dari seluruh script disebut dengan “globally scoped,”
sementara variabel yang hanya dapat diakses hanya pada function tertentu
disebut dengan “locally scoped.”
Variabel JavaScript menggunakan fungsi untuk mengelola cakupannya, Jika

variabel didefinisikan di luar fungsi, maka variabel akan bersifat global. Jika kita
variabel didefinisikan di dalam fungsi, maka variabel bersifat lokal dan
cakupannya hanya pada fungsi tersebut atau turunannya.
Untuk lebih jelasnya, berikut variabel yang dapat diakses dalam sebuah fungsi:
 Variabel argumen dari fungsinya.

 Lokal variabel yang didefinisikan pada fungsinya.
 Variabel dari induk fungsinya.
 Global variabel.
. // global variable, dapat diakses pada parent() dan child()

. const a = 'a';
.
. function parent() {
. // local variable, dapat diakses pada parent() dan child(), tetapi tidak
dapat diakses diluar dari fungsi tersebut.
. const b = 'b';
.
. function child() {
. // local varible, dapat diakses hanya pada fungsi child().
. const c = 'c';
. }
. }
Kita harus berhati-hati dalam mendefinisikan variabel di dalam fungsi. Pasalnya,

kita bisa mendapatkan hasil yang tidak diperkirakan, contohnya seperti berikut:
. function multiply(num) {
. total = num * num;
. return total;
. }
.
. let total = 9;
. let number = multiply(20);
.
. console.log(total)
.
. /* output
. 400
. */
Mungkin kita berharap nilai total akan tetap 9. Mengingat variabel total pada
fungsi multiply, seharusnya tidak akan berpengaruh untuk kode di luar dari fungsi
tersebut. Hal ini bisa terjadi karena pada fungsi multiply() kita tidak menetapkan
variabel total sebagai cakupan lokal, kita tidak menggunakan keyword const, let,
atau var ketika mendeklarasikan variabel total pada fungsi multiply() sehingga
variabel total menjadi global.
Perlu kita perhatikan bahwa, ketika kita lupa menuliskan

keyword let, const atau var pada script ketika membuat sebuah
variabel, maka variabel tersebut akan menjadi global.
Sebisa mungkin kita harus menghindari pembuatan variabel global, karena

variabel global dapat diakses pada seluruh script yang kita tuliskan. Semakin
banyak variabel global yang kita tuliskan, semakin tinggi kemungkinan variabel
tabrakan (collision) terjadi.
Berikut snippet code dari contoh kode yang digunakan pada materi di atas. Anda
bisa mencobanya sendiri agar paham aturan scoping pada JavaScript.
https://glot.io/snippets/fi89p21vnw
Browser Object
Seperti yang kita tahu, dengan menggunakan JavaScript, website kita dapat
lebih fungsional dan interaktif. Untuk membuat website menjadi interaktif,
tentu JavaScript harus dapat mengontrol elemen yang ada pada website.
Dalam mengontrol browser, JavaScript menggunakan object yang sudah
tersedia dalam browser yakni window.
Pada JavaScript, browser dikenal sebagai window object. Di dalam

objek window itu sendiri terdapat banyak properties dan method yang bisa
digunakan, salah satu yang sudah kita ketahui adalah alert().
Kita bisa melihat secara lengkap apa saja properti, method serta event yang
ada pada objek window melalui console browser dengan
mengetikkan window pada console.
Sungguh banyak bukan? Yups dengan properti dan method tersebut,

JavaScript mampu mengontrol browser melalui syntax. Kita tidak perlu
mengetahui seluruh properti dan method. Berikut beberapa properti
dan method yang sering digunakan seperti:
Property/Method Description
history Sebagai navigasi (go back atau go forward) histori URL browser.
location Mendapatkan URL yang terdapat pada address bar browser.

Property/Method Description
alert() Menampilkan dialog alert dengan pesan dan tombol “ok”.
close() Menutup tab yang aktif.
confirm() Menampilkan dialog dengan pesan dan tombol “ok” dan “cancel”.
Method ini akan mengembalikan nilai boolean sesuai response
dari pengguna.
prompt() Menampilkan dialog dengan pesan dan teks input. Method ini
akan mengembalikan nilai string sesuai response dari pengguna.
Dalam mengakses properti dan method pada objek window, kita bisa
menuliskannya secara langsung tanpa harus memanggil objek window-nya
terlebih dahulu. Karena properti dan method pada window bersifat global.
// mengakses method alert() pada window
window.alert("Hello Browser!")
// Kita juga bisa mengaksesnya seperti ini
alert("Hello Browser!")
Untuk menggunakan properti dan method yang terdapat pada objek window,

tentu syntax JavaScript perlu dijalankan pada browser atau dituliskan pada
console browser. Kita tidak bisa mencobanya pada glot.io seperti saat belajar
sintaks dasar JavaScript, karena glot.io sejatinya tidak memiliki
objek window dan proses kompilasi JavaScript dilakukan menggunakan
teknologi nodeJS. Sehingga jika kita mencoba menjalankan syntax JavaScript
yang berhubungan dengan browser objek akan menyebabkan eror “not
defined”.
Berbeda ketika kita menjalankan syntax tersebut
pada console browser. Method alert() akan berhasil dijalankan dan
memunculkan pesan dialog.
Setelah mengetahui cara penggunaan browser object dan dasar-dasar
JavaScript, dengan menggabungkan pengetahuan keduanya, kita bisa
membuat program sederhana. Contohnya kita bisa membuat program yang
interaktif dengan menggunakan prompt() untuk mendapatkan nilai input dari
pengguna dan alert() untuk menampilkan pesan.
Silakan tuliskan kode berikut ini dan jalankan pada console browser.
const firstName = prompt("Siapa nama depanmu?");
const lastName = prompt("Siapa nama belakangmu?");
const language = prompt("Bisa berbahasa apa?");
const user = {
name: {
first: firstName,
last: lastName,
},
language: language
};
if (user.language === "English") {
alert("Nice to meet you " + user.name.first + " " + user.name.last + "!");
} else if (user.language === "French") {
alert("Ravi de vous rencontrer " + user.name.first + " " + user.name.last

+ "!");
} else if (user.language === "Japanese") {
alert("Hajimemashite, " + user.name.first + " " + user.name.last + "!");
} else {
alert("Senang bertemu dengan Anda " + user.name.first + " " + user.name.last

+ "!");
Maka hasilnya akan tampak seperti ini:
Manipulasi DOM
Sekarang kita sudah memahami bahasa JavaScript dan mengerti peran
penggunaannya dalam browser melalui objek window. Tetapi ada satu hal
lagi yang belum kita ketahui, yakni cara mengakses elemen pada dokumen
HTML.
Pada materi kali ini kita akan eksplorasi tentang DOM Scripting, di mana
nantinya kita dapat memanipulasi elemen, atribut elemen, dan teks yang
tampak pada halaman.
Apa itu DOM?

Sebelumnya disebutkan DOM Scripting, tapi sebenarnya apa itu
DOM? Document Object Model (DOM) memberikan kita jalan untuk
mengakses dan memanipulasi konten pada dokumen. DOM
merupakan application programming interface (API) untuk HTML, XML atau
SVG. Dengan DOM berkas HTML dapat direpresentasikan dalam bentuk
objek yang dapat diakses oleh JavaScript (sebenarnya tidak hanya oleh
JavaScript. DOM juga dapat diakses oleh bahasa pemrograman lain). Melalui
DOM inilah JavaScript dapat memanipulasi elemen beserta atributnya pada
HTML.
Struktur objek DOM digambarkan seperti struktur node tree (pohon simpul).

Disebut pohon karena strukturnya seperti pohon dengan batang induk tunggal
yang bercabang menjadi beberapa cabang anak, masing-masing memiliki
daun. Pada kasus ini induk tunggal batang merupakan elemen <html>,
cabangnya merupakan anak elemen di dalamnya, dan daun adalah konten di
dalam elemen tersebut.
Mari kita ambil contoh pada struktur HTML berikut:
. <!DOCTYPE html>
. <html>
. <head>
. <title>DOM Structure</title>
. </head>
. <body>
. <h1>Hallo Developer!</h1>
. <p>Belajar Dasar Pemrograman Web</p>
. </body>
. </html>
Berdasarkan HTML di atas, maka objek DOM memiliki struktur seperti ini:
Pada contoh yang diberikan di atas DOM terlihat seperti pemetaan dari
sumber berkas HTML. Walaupun sama berkas HTML dan DOM adalah hal
yang berbeda.
Walaupun struktur dari DOM terbentuk berdasarkan berkas HTML, tetapi

terdapat kasus tertentu yang menyebabkan struktur DOM berbeda dengan
struktur HTML. Yakni kasus di mana kita terdapat kesalahan dalam
menuliskan kode HTML.
Mari kita lihat contohnya seperti berikut:
. <!DOCTYPE html>
. <html>
. Hello, World!
. </html>
Pada berkas HTML di atas tidak terdapat elemen <head> dan <body>.
Artinya berkas HTML tersebut tidak valid. Berbeda dengan DOM, walaupun
struktur pada HTML tidak valid, pada DOM object structure akan diperbaiki.
Caranya dengan menambahkan elemen <head> dan <body> secara otomatis
kemudian menempatkan teks di dalam elemen <body>.
Mendapatkan Elemen
Untuk mengakses elemen melalui DOM, kita gunakan properti dari objek
window yang dinamakan dengan document. Objek document
merepresentasikan dokumen dari HTML atau keseluruhan halaman yang
terlihat pada jendela browser. Jika kita lihat nilai dari objek document pada
browser console akan tampak seperti ini:
Pada gambar di atas kita bisa lihat bahwa nilai dari document merupakan
struktur HTML dari halaman yang ditampilkan, di mana terdapat root
element <html> yang di dalamnya ada elemen <head> dan <body>.
Meskipun nilai objek document terlihat hanya seperti struktur HTML saja,

namun objek document memiliki beberapa standar properti dan method yang
digunakan untuk mengakses koleksi elemen di dalamnya. Contohnya kita
dapat mendapatkan elemen <head> yang diakses melalui properti body dari
objek document.
const head = document.head;

Atau mendapatkan elemen <body> dengan properti body.
const body = document.body;

Kedua properties tersebut baik head atau body akan mengembalikan elemen
dalam bentuk objek yang sama seperti document.
Namun bila kita ingin mengakses elemen secara spesifik, kita harus
menggunakan method yang disediakan pada objek document seperti:
Method Contoh Fungsi
getElementById() document.getElementById(“display”); Mengembalikan elemen

memiliki nilai id “display”
getElementsByName() document.getElementsByName(“button” Mengembalikan banyak

) (HTMLCollection) yang m
attribute name dengan n
“button”.
getElementsByClassName() document.getElementsByClassName(“b Mengembalikan banyak

utton”) (HTMLCollection) yang m
attribute class dengan ni
“button”.
getElementsByTagName() document.getElementsByTagname(“div” Mengembalikan banyak

) (HTMLCollection) yang m
<div> elemen
querySelector() document.querySelector(“.button”); Mengembalikan elemen

yang menerapkan class
querySelectorAll() document.querySelectorAll(“.button”);
Mengembalikan banyak
(HTMLCollection) yang
menerapkan class “butto
Pada method di atas ada yang mengembalikan nilai HTML elemen secara
tunggal, ada juga yang mengembalikan banyak nilai HTML elemen yang
biasa disebut HTMLCollections.
Contohnya kita gunakan method document.querySelector(“.button”); untuk

mendapatkan nilai button, maka nilai yang didapatkan adalah elemen tunggal
yang menerapkan class “button” pertama kali.
Untuk mendapatkan seluruh elemen yang memiliki class “button” kita

gunakan method document.querySelectorAll(“.button”); method tersebut akan
mengembalikan banyak nilai elemen button.
Karena HTMLCollection mirip seperti array yang dapat menampung banyak
data di dalamnya, maka HTMLCollection juga memiliki karakteristik mirip
seperti array. HTMLCollection memiliki properti length dan untuk mengakses
nilai individual elemennya menggunakan indexing.
Kita juga dapat melakukan perulangan menggunakan for of pada

HTMLCollection:
for(let item of buttons) {
console.log(item)
}
Dalam menggunakan method querySelector() tentu kita menggunakan query

dalam menentukan target elemen. Untuk menargetkan elemen berdasarkan
attribute class, kita gunakan tanda “.”, sedangkan jika kita menargetkan
dengan menggunakan id, gunakan tanda “#”.
Selain querySelector() masih terdapat method lain yang sudah disebutkan

sebelumnya untuk mendapatkan elemen secara spesifik, Anda bisa mencoba
sendiri method tersebut pada console browser, dan carilah perbedaan fungsi
dari masing-masing method-nya.
Memanipulasi Element
Setelah kita tahu cara mengakses elemen melalui objek document, sekarang

saatnya kita belajar cara memanipulasi elemen yang didapat, seperti
mengubah konten, menambahkan atau mengubah nilai atribut, dan
menambahkan action/event pada elemen.
Memanipulasi Atribut
Untuk mengubah atau menambah nilai atribut pada elemen, apa method
yang kita gunakan? setAttribute() jawabannya. Method ini membutuhkan dua
buah argumen string yang merupakan nama dan nilai dari atributnya.
. someElement.setAttribute("attributName", "attributeValue");
Mari kita ambil contoh. Terdapat struktur web sebagai berikut:
. <!DOCTYPE html>
. <html>
. <head>
. <title>Manipulating Attribute</title>
. </head>
. <body>
. <figure>
. <img id="catImage" src="https://i.ibb.co/9WT6LG6/two-
three.jpg" alt="three-cats" width="600px"/>
. <figcaption id="caption">Tiga Anak Kucing</figcaption>
. </figure>
. </body>
. </html>
Kita buka berkas HTML tersebut pada browser, maka akan muncul tampilan
seperti ini:
Ada yang janggal pada informasi yang ditampilkan di website.
Berdasarkan caption, gambar seharusnya menampilkan 3 ekor kucing. Kita
akan coba memperbaikinya dengan mengubah nilai atribut src pada
elemen <img id=”catImage”> melalui JavaScript. Kita bisa melakukannya
dengan menuliskan kode seperti berikut:
. let catImage = document.querySelector("#catImage");
. catImage.setAttribute("src", "https://i.ibb.co/55VG7vL/three-cat.jpg");
Jalankan kode berikut pada console browser kemudian gambar pada

halaman akan berubah.
Selain mengatur nilai atribut elemen, kita juga dapat mengambil nilai dari
atribut elemen yang sedang diterapkan dengan menggunakan
method getAttribute(). Method tersebut membutuhkan satu buah argumen
string yang merupakan nama atribut dan akan mengembalikan nilai dari
atribut tersebut. Contoh:
. catImage.getAttribute("src");
Memanipulasi Konten Elemen
Dengan JavaScript juga kita dapat mengubah konten yang ada di dalam
HTML. Konten pada elemen disimpan di dalam properti innerHTML (konten
dalam bentuk HTML) atau innerText (konten dalam bentuk Teks). Hasilnya,
dalam memanipulasi konten kita dapat melakukannya dengan mengubah nilai
dari properti tersebut.
. let caption = document.querySelector("#caption");

. caption.innerHTML = '<em>Tiga Anak Kucing</em>'
Lihat perubahan terjadi pada caption gambar! Sekarang caption gambar
tampak miring karena kita membungkus teks dalam elemen emphasize. Kita
dapat memberikan nilai HTML pada konten elemen dengan menggunakan
properti innerHTML.
Berbeda ketika kita menggunakan innerText, nilai apapun yang terdapat pada

properti ini adalah merupakan sebuah teks. Sehingga walaupun kita
menginisialisasi teks yang merupakan sebuah tag html, maka teks tersebut
akan tampil apa adanya tanpa terformat sebagai HTML.
. caption.innerText = "<em>Tiga Anak Kucing</em>";
Jadi pastikan kita tidak salah menggunakan properti ketika ingin mengubah
konten dari elemen.
Membuat dan Menambahkan Elemen Baru
Sebenarnya terdapat beberapa cara dalam membuat elemen HTML baru

menggunakan JavaScript. Bahkan kita bisa gunakan langsung
properti innerHTML dengan menuliskan langsung tag HTML-nya kemudian
menggabungkan dengan nilai yang ada pada elemen (appending). Tapi ini
bukan pendekatan yang baik.
Dalam membuat elemen baru, DOM telah menyediakan method yang

bernama createElement().
. let newElement = document.createElement('p');

Dengan menjalankan perintah tersebut maka terciptalah elemen paragraf
baru yang diinisialisasi pada variabel newElement.
Pada variabel newElement kita dapat memberikan nilai konten dengan

menggunakan properti innerHTML ataupun innerText.
. newElement.innerHTML = 'Anda menekan gambar kucing sebanyak <span

id="count">0</span> kali';
Walaupun sekarang variabel newElement sudah memiliki konten di dalamnya,
tetapi mengapa belum muncul pada jendela browser? Hal tersebut karena
fungsi createElement() hanya akan membuat sebuah elemen baru, tidak
berarti ia akan memasukkannya ke dalam document.body.
Agar elemen baru tampil pada jendela browser, kita perlu memasukkan
elemen tersebut pada body dengan menggunakan fungsi appendChild();
. document.body.appendChild(newElement);
Sekarang elemen baru yang kita buat sudah tampil pada jendela browser.
Menambahkan Aksi (Event) pada Element
Selain mampu mengakses elemen dalam bentuk objek pada halaman,

JavaScript juga mampu menerima event atau kejadian yang terjadi pada
elemen. Hal tersebut dinamakan Event Handler. Event bisa berupa interaksi
dari pengguna seperti click, atau sekedar mengarahkan kursor pada elemen.
Dengan menerapkan event handler, kita dapat menjalankan suatu fungsi
tertentu ketika event terjadi pada elemen.
Untuk menambahkan Event Handler pada elemen kita

gunakan method, addEventListener() pada target element. Method ini
membutuhkan setidaknya dua buah argument.
Yang pertama adalah sebuah string sebagai tipe event-nya. Ada banyak

sekali tipe event yang dapat digunakan pada method addEventListener(),
Anda bisa melihat secara lengkap pada tautan
berikut: https://developer.mozilla.org/en-US/docs/Web/Events. Salah satu
yang banyak digunakan adalah “click”. Event ini akan membaca kejadian
dimana pengguna melakukan click pada element.
Kemudian yang kedua adalah sebuah fungsi yang akan dijalankan

ketika event terjadi. Pada fungsi ini kita dapat memberikan sebuah argumen
yang merupakan object yang berisikan informasi tentang action yang terjadi.
Termasuk informasi mengenai target elemen event-nya (event.target).
Argumen ini biasanya diberikan nama “event”.
Lihat kode berikut untuk menerapkan addEventListener() pada sebuah

elemen.
. catImage.addEventListener('click', function(event) {
. document.querySelector('#count').innerText++;
. });
Dengan menjalankan kode tersebut pada latihan sebelumnya, berarti kita

memberikan sebuah event ‘click’ pada elemen catImage. Ketika gambar
kucing ditekan akan menjalankan fungsi yang menambahkan nilai konten
pada elemen dengan id count.
Seperti itulah dasar-dasar dalam memanipulasi DOM dengan menggunakan

JavaScript. Untuk mengimplementasikan apa yang sudah kita pelajari, pada
materi selanjutnya kita akan coba terapkan logika pada Web Kalkulator agar
dapat berfungsi dengan baik.
Menerapkan JavaScript pada Web Kalkulator
Sejauh ini kita sudah mempelajari bagaimana cara menggunakan JavaScript
pada HTML, bagaimana menuliskan sintaks JavaScript, mengenal tipe data
dan fungsi sintaks yang ada, hingga akhirnya memanipulasi dan memberikan
event pada elemen HTML melalui DOM Object.
Dengan komponen yang sudah disebutkan tadi, sepertinya sekarang kita

sudah cukup bekal untuk memberikan “nyawa” pada Web Kalkulator kita
sehingga dapat berfungsi layaknya sebuah kalkulator pada umumnya. Let’s
do it!
Silakan buka project Web Kalkulator dengan editor favorit kita.

Jika Anda mengikuti seluruh latihan sebelumnya, maka struktur projek tampak
seperti gambar di atas. Kita juga sudah mencoba menghubungkan berkas
JavaScript (kalkulator.js) dengan berkas HTML (index.html) lalu menuliskan
sintaks dasar untuk menampilkan pesan pada console browser.
Selanjutnya kita akan bekerja full pada kalkulator.js. Silakan hapus sintaks

yang sudah kita buat sebelumnya.
. console.log("Selamat Anda berhasil menggunakan JavaScript pada Website")

Langkah pertama adalah buatlah sebuah objek dengan nama calculator. Di
dalamnya terdapat properti yang menggambarkan data dan kondisi dari
kalkulatornya, seperti displayNumber, operator, firstNumber,
dan waitingForSecondNumber. Sehingga kodenya akan nampak seperti ini:
. const calculator = {
. displayNumber: '0',
. operator: null,
. firstNumber: null,
. waitingForSecondNumber: false
. };
Kita gunakan objek ini sebagai tempat menyimpan data dan kondisi pada
calculator, di mana angka yang muncul pada layar kalkulator selalu diambil
dari data calculator.displayNumber.
Properti operator dan firstNumber kita gunakan nilai null terlebih dahulu

karena properti tersebut akan diberikan nilai ketika pengguna melakukan aksi.
Dan properti waitingForSecondNumber merupakan kondisi di mana kalkulator

sedang menunggu pengguna menentukkan angka kedua dalam melakukan
perhitungan.
Setelah membuat object calculator, selanjutnya kita buat fungsi - fungsi umum

yang dilakukan kalkulator seperti meng-update angka pada layar dan
menghapus data pada kalkulator.
. function updateDisplay() {
. document.querySelector("#displayNumber").innerText =
calculator.displayNumber;
. }
.
. function clearCalculator() {
. calculator.displayNumber = '0';
. calculator.operator = null;
. calculator.firstNumber = null;
. calculator.waitingForSecondNumber = false;
. }
Lalu kita buat juga fungsi untuk memasukkan angka ke dalam

nilai displayNumber kalkulator.
. function inputDigit(digit) {
. calculator.displayNumber += digit;
. }
Kemudian kita buat variabel buttons dengan menginisialisasikan nilai seluruh

elemen button yang ada, dan berikan event click pada tiap elemennya.
Untuk mendapatkan nilai seluruh elemen button kita
gunakan querySelectorAll(“#button”) kemudian kita looping nilainya dan
berikan event click pada tiap itemnya.
. const buttons = document.querySelectorAll(".button");
. for (let button of buttons) {
. button.addEventListener('click', function(event) {
.
. // mendapatkan objek elemen yang diklik
. const target = event.target;
.
. inputDigit(target.innerText);
. updateDisplay()
. });
. }
Sehingga keseluruhan kode pada kalkulator.js akan tampak seperti ini:
. operator: null,
. };
.
. }
.
. }
.
. }
.
.
.
.
. updateDisplay()
. });
. }
Sekarang kita coba jalankan index.html pada browser, dan lihat fungsi

kalkulator untuk yang pertama kali.
Uh sangat aneh bukan? Siapa yang ingin gunakan kalkulator seperti itu?
Untuk saat ini tak apa. Setidanya kode yang kita tuliskan sudah berhasil
berjalan dengan baik. Selanjutnya kita akan memperbaiki keanehan-
keanehan yang ada satu per satu.
Saat ini kalkulator masih dapat menampilkan angka 0 di awal bilangan, hal itu
tentu aneh dan tidak pernah terjadi pada kalkulator manapun terkecuali dalam
menampilkan bilangan desimal. Untuk memperbaikinya, pada
fungsi inputDigit(), tambahkan sebuah kondisi dimana
jika displayNumber bernilai ‘0’, maka angka yang pertama dimasukkan
pengguna akan menggantikan keseluruhan nilai displayNumber selain itu,
lakukan seperti biasanya. Untuk melakukannya kita gunakan if-else
statement.
. if(calculator.displayNumber === '0') {
. calculator.displayNumber = digit;
. } else {
. }
. }
Dengan begitu kalkulator tidak akan menampilkan angka 0 diawal bilangan

lagi.
Kemudian kita akan membuat fungsi clear pada kalkulator berjalan dengan

semestinya sehingga dalam mereset kalkulator kita tidak perlu melakukan
reload pada browser seperti yang ditunjukkan pada gif di atas.
Pada event handler, kita tambahkan kondisi dimana ketika event

target merupakan elemen yang menerapkan class clear maka kita akan
panggil fungsi clearCalculator().
.
.
. if(target.classList.contains('clear')) {
. clearCalculator();
. updateDisplay();
. return;
. }
.
. updateDisplay()
. });
Kita bisa memanfaatkan event.classList untuk melihat nilai class apa saja
dalam bentuk array yang ada pada element target, kemudian
menggunakan contains() yang merupakan method dari array yang berguna
untuk memastikan nilai yang terkandung di dalam array tersebut.
Jika kondisi if terpenuhi sudah dipastikan tombol tersebut adalah

tombol clear, sehingga kita perlu memanggil fungsi clearCalculator() dan
mengupdate display kalkulator. Jangan lupa juga untuk gunakan return
statement agar fungsi event handler terhenti sehingga kode yang ada di
bawahnya tidak ikut tereksekusi.
Setelah menerapkan kondisi tersebut maka seluruh kode
pada kalkulator.js akan tampak seperti berikut:
. operator: null,
. };
.
. }
.
. }
.
. if (calculator.displayNumber === '0') {
. } else {
. }
. }
.
.
.
.
. if (target.classList.contains('clear')) {
. updateDisplay();
. return;
. }
.
. updateDisplay()
. });
. }
Selanjutnya kita akan melengkapi beberapa fungsi lainnya yang ada pada
kalkulator, yakni fungsi negative, operator, dan equals. Untuk itu, buat kondisi
lainnya pada event handler, sehingga kode tampak seperti berikut:
.
.
. updateDisplay();
. return;
. }
.
. if(target.classList.contains('negative')) {
. inverseNumber();
. updateDisplay();
. return;
. }
.
. if(target.classList.contains('equals')) {
. performCalculation();
. updateDisplay();
. return;
. }
.
. if(target.classList.contains('operator')) {
. handleOperator(target.innerText)
. updateDisplay();
. return;
. }
.
. updateDisplay()
. });
Jika kita membukanya sekarang, maka eror akan muncul ketika tombol -
tombol fungsi dan operatornya ditekan.
Hal tersebut wajar karena kita belum mendefinisikan seluruh fungsi - fungsi
yang kita dituliskan di atas. Dengan begitu mari kita buat fungsinya mulai
dari inverseNumber()
. function inverseNumber() {
. return;
. }
. calculator.displayNumber = calculator.displayNumber * -1;
. }
Fungsi inverseNumber() cukuplah simple karena kita hanya perlu melakukan
perkalian displayNumber dengan -1, terkecuali jika displayNumber masih
bernilai ‘0’ maka perkalian tidak akan dilakukan.
Sekarang tombol "+/-" sudah berfungsi dengan baik, selanjutnya kita akan

membuat fungsi untuk menetapkan sebuah operator, baik itu + atau - pada
kalkulator. Tuliskan fungsi berikut:
. function handleOperator(operator) {
. if (!calculator.waitingForSecondNumber) {
. calculator.operator = operator;
. calculator.waitingForSecondNumber = true;
. calculator.firstNumber = calculator.displayNumber;
. } else {
. alert('Operator sudah ditetapkan')
. }
. }
Fungsi tersebut membutuhkan satu buah argument yang merupakan sebuah

operator. Nilai operator tersebut bersumber dari innerText tombol operator
yang menjadi event target. Secara prinsip fungsi ini bertujuan untuk
menyimpan operator dan firstNumber dengan nilai displayNumber saat ini
pada object calculator, hanya jika
properti waitingForSecondNumber bernilai false. Namun
jika waitingForSecondNumber bernilai true, browser akan
menampilkan alert() dengan pesan “Operator sudah ditetapkan”
Selain itu, kita ubah juga logika yang terdapat pada fungsi inputDigit() dengan
menambahkan kondisi pengecekkan terhadap nilai operator,
dan displayNumber. Sehingga fungsi inputDigit() akan tampak seperti berikut:
. if (calculator.waitingForSecondNumber && calculator.firstNumber ===
calculator.displayNumber) {
. } else {
. } else {
. }
. }
. }
Perubahan kode bertujuan untuk mengevaluasi "apakah operator baru saja

ditetapkan?". Jika hasil evaluasi benar maka angka pada display sebelumnya
akan dihapus ketika tombol angka pada kalkulator kembali ditekan. Lalu nilai
angka pada display sekarang akan digunakan untuk bilangan kedua dalam
melakukan kalkulasi.
Voila! Sekarang tombol operator sudah dapat menetapkan nilai operator

pada object calculator.
Kita bisa lihat pada console bahwa sekarang nilai
properti operator dan firstNumber tidak lagi null, begitu pula dengan
properti waitingForSecondNumber yang sudah berubah menjadi true.
Kita buat fungsi terakhir yakni performCalculation(). Fungsi ini digunakan

untuk melakukan kalkulasi terhadap nilai - nilai yang terdapat pada
objek calculator, sehingga pastikan kalkulator sudah memiliki
nilai operator dan firstNumber ketika fungsi ini dijalankan.
. function performCalculation() {
. if (calculator.firstNumber == null || calculator.operator == null) {
. alert("Anda belum menetapkan operator");
. return;
. }
.
. let result = 0;
. if (calculator.operator === "+") {
. result = parseInt(calculator.firstNumber)
+ parseInt(calculator.displayNumber);
. } else {
- parseInt(calculator.displayNumber)
. }
.
. calculator.displayNumber = result;
. }
Fungsi tersebut diawali dengan pengecekan nilai-nilai yang dibutuhkan untuk

melakukan kalkulasi. Jika tidak terpenuhi maka proses akan dihentikan.
Namun jika terpenuhi kalkulasi akan dilakukan.
Dalam melakukan kalkulasi terdapat pengecekan tipe operator apa yang akan
dilakukan. Kita juga menggunakan parseInt() untuk mengubah
nilai string menjadi number. Mengapa konversi tipe data dibutuhkan?
Sejatinya kita menggunakan string dalam menampilkan nilai pada jendela
browser, namun untuk proses kalkulasi kita membutuhkan number.
Setelah menambahkan fungsi tersebut, maka seluruh struktur kode pada

berkas kalkulator.js akan tampak seperti ini:
. operator: null,
. };
.
. }
.
. }
.
. if (calculator.waitingForSecondNumber && calculator.firstNumber ===
calculator.displayNumber) {
. } else {
. } else {
. }
. }
. }
.
. function inverseNumber() {
. return;
. }
. calculator.displayNumber = calculator.displayNumber * -1;
. }
.
. function handleOperator(operator) {
. if (!calculator.waitingForSecondNumber) {
. calculator.operator = operator;
. calculator.waitingForSecondNumber = true;
. calculator.firstNumber = calculator.displayNumber;
. } else {
. alert('Operator sudah ditetapkan')
. }
. }
.
. return;
. }
.
. let result = 0;
. } else {
. }
.
. }
.
.
.
.
. updateDisplay();
. return;
. }
.
. if (target.classList.contains('negative')) {
. inverseNumber();
. updateDisplay();
. return;
. }
.
. if (target.classList.contains('equals')) {
. performCalculation();
. updateDisplay();
. return;
. }
.
. if (target.classList.contains('operator')) {
. handleOperator(target.innerText)
. updateDisplay();
. return;
. }
.
. updateDisplay()
. });
. }
Jika kita buka index.html sekarang, seharusnya kalkulator sudah dapat
melakukan kalkulasi.
Selamat! Sejauh ini kita sudah bisa membuat aplikasi web dengan
memanfaatkan pengetahuan yang sudah kita pelajari. Selanjutnya kita akan
mengenal salah satu Web API yang menarik untuk diterapkan pada project
kalkulator kita
Kita sudah sampai di penghujung materi dari kelas ini. Selamat bagi Anda
yang sudah menguasai dasar dari tiga pilar pembentuk website. Pada materi
kali ini kita akan berkenalan mengenai salah satu web API yang menarik
untuk diterapkan pada proyek kalkulator, yakni Web Storage.
Apa itu Web Storage?

Web storage adalah salah satu Web API yang dapat menyimpan data secara
lokal pada sisi client. Berbeda dengan objek atau array, data yang disimpan
pada objek atau array JavaScript bersifat sementara, dan akan hilang jika
terjadi reload atau pergantian URL pada browser. Sedangkan data yang
disimpan pada Web Storage akan bertahan lebih lama karena data akan
disimpan pada storage browser.
Sebelum HTML5, kita melakukan hal ini dengan menggunakan cookies,

namun penyimpanan cookies terbatas. Dengan hadirnya Web Storage kita
dapat menampung data lebih besar dan tentunya lebih aman.
Data yang disimpan web storage tersedia berdasarkan domain. Artinya, data
pada suatu domain web hanya dapat diakses oleh domainnya itu sendiri. Web
storage dapat menampung sebesar 10MB untuk satu domain.
Tipe Web Storage

Web API menyediakan dua tipe Web Storage untuk kita gunakan,
yakni sessionStorage dan localStorage.
Sebelum menggunakan Web Storage baik sessionStorage atau localStorage,

kita perlu memastikan browser support terhadap fitur tersebut, dengan cara:
. if (typeof(Storage) !== "undefined") {
. // Browser mendukung sessionStorage/localStorage.
. } else {
. // Browser tidak mendukung sessionStorage/LocalStorage
. }
Seharusnya browser yang ada pada saat ini sudah mendukung kedua fitur
tersebut. Google Chrome dan Mozilla Firefox tentu memilikinya.
Pada sessionStorage atau localStorage data yang disimpan adalah nilai

primitif seperti number, boolean, atau string. Namun kita juga dapat
menyimpan data berbentuk objek dengan mengubahnya dalam
bentuk string, begitu pula sebaliknya ketika kita ingin menggunakan datanya
kembali.
Untuk menyimpan dan mengakses data pada storage, metode yang

digunakan adalah key-value. Di sini key menjadi sebuah kunci untuk
mengakses data pada storage.
Data yang disimpan pada Web Storage dapat kita lihat menggunakan
DevTools pada tab Application (Google Chrome) atau tab Storage (Mozilla
Firefox).
Data Local Storage pada Google Chrome
Data Local Storage pada Mozilla Firefox
Session Storage
Tipe storage yang pertama adalah Session Storage yang mana digunakan
untuk menyimpan data sementara pada browser. Data akan hilang ketika
browser atau tab browser ditutup.
Untuk menggunakan Session Storage kita gunakan object sessionStorage,

kemudian untuk menyimpan datanya gunakan method setItem(), method ini
membutuhkan dua argumen yakni key dan nilai yang akan dimasukkan.
Kemudian untuk mengakses data yang sudah dimasukkan kita gunakan
method getItem() dan gunakan key sebagai argumen methodnya.
Berikut contoh penerapan dari session storage:
. <!DOCTYPE html>
. <html>
.
. <head>
. <title>Session Storage</title>
. </head>
.
. <body>
. <p>Anda sudah menekan tombol sebanyak <span id="count"></span> kali</p>
. <button id="button">Click Disini!</button>
.
. <script>
. const cacheKey = "NUMBER";
.
. // pengecekkan apakah data sessionStorage dengan key NUMBER
tersedia atau belum
. if (sessionStorage.getItem(cacheKey) === "undefined") {
. // Jika belum maka akan atur dengan nilai awal yakni 0
. sessionStorage.setItem(cacheKey, 0);
. }
.
. const button = document.querySelector("#button");
. const count = document.querySelector("#count");
. let number = sessionStorage.getItem(cacheKey);
. number++;
. sessionStorage.setItem(cacheKey, number);
. count.innerText = sessionStorage.getItem(cacheKey);
. })
. } else {
. alert("Browser tidak mendukung Web Storage")
. }
. </script>
. </body>
.
. </html>
Bisa kita lihat bahwa data yang disimpan pada sessionStorage akan bertahan
jika terjadi reload pada browser, namun data tersebut akan hilang apabila tab
browser atau browser itu sendiri ditutup.
Local Storage
Tipe storage yang kedua adalah Local Storage yang serupa dengan session
storage, namun data yang disimpan tidak akan hilang bila browser atau tabs
browser ditutup. Kita bisa menghapus data pada local storage dengan
method removeItem().
Untuk penggunaan localStorage identik dengan sessionStorage,

perbedaanya storage ini diakses melalui object localStorage.
Berikut contoh penerapan dari local storage:
. <!DOCTYPE html>
. <html>
.
. <head>
. <title>Local Storage</title>
. </head>
.
. <body>
. <p>Anda sudah menekan tombol sebanyak <span id="count"></span> kali</p>
. <button id="button">Click Disini!</button>
. <button id="clear">Hapus Storage</button>
.
. <script>
. const cacheKey = "NUMBER";
.
. // pengecekkan apakah data sessionStorage dengan key NUMBER
tersedia atau belum
. if (localStorage.getItem(cacheKey) === "undefined") {
. // Jika belum maka akan atur dengan nilai awal yakni 0
. localStorage.setItem(cacheKey, 0);
. }
.
. const button = document.querySelector("#button");
. const clearButton = document.querySelector("#clear")
. const count = document.querySelector("#count");
. let number = localStorage.getItem(cacheKey);
. number++;
. localStorage.setItem(cacheKey, number);
. count.innerText = localStorage.getItem(cacheKey);
. });
.
. clearButton.addEventListener('click', function(event) {
. localStorage.removeItem(cacheKey);
. });
. } else {
. alert("Browser tidak mendukung Web Storage")
. }
. </script>
. </body>
.
. </html>
Pada gif di atas kita bisa mengetahui bahwa data yang disimpan
pada localStorage akan bertahan walaupun jendela browser atau tab browser
ditutup, untuk menghapus datanya bisa dengan tombol “Hapus Storage”
dimana tombol tersebut akan memanggil method localStorage.removeItem().
Bagaimana? Cukup mudah kan untuk menggunakan Web Storage?
Selanjutnya kita akan coba terapkan localStorage pada Web Kalkulator yang
kita buat untuk menampung riwayat kalkulasi yang pengguna lakukan.
Menambahkan Riwayat Kalkulasi pada Web

Kalkulator
Kali ini kita akan menerapkan apa yang sudah dipelajari sebelumnya
mengenai Web Storage. Pada kasus ini tipe storage yang cocok untuk
digunakan pada Web Kalkulator adalah localStorage, karena data akan tetap
bertahan meskipun browser sudah tertutup.
Kita akan memisahkan berkas JavaScript yang akan kita buat kali ini dengan
yang sudah kita buat sebelumnya. Jadi untuk langkah awal silakan buka
kembali proyek kalkulator yang sudah kita buat, buat berkas JavaSript baru di
dalam folder assets kemudian beri nama “storage.js”.
Maka struktur proyek sekarang nampak seperti gambar berikut:
Sebelum menuliskan kode pada berkas storage.js, kita siapkan terlebih

dahulu elemen table untuk menampilkan daftar riwayat kalkulasi.
Menyiapkan Tabel Elemen
Silakan buka berkas index.html, kemudian buat elemen div baru dengan

menerapkan nilai class history dan card. Letakan elemen tersebut tepat di
atas tag <script> pada akhir </body>.
. .......
. <div class="history card">
.
. </div>
.
. </body>
Kemudian di dalam elemen <div> tersebut buat

elemen heading dan table seperti pada kode berikut:
. <h2>Riwayat Perhitungan</h2>
. <table>
. <thead>
. <tr>
. <th>Angka Pertama</th>
. <th>Operator</th>
. <th>Angka Kedua</th>
. <th>Hasil</th>
. </tr>
. </thead>
. <tbody id="historyList"></tbody>
. </table>
. </div>
Elemen <tbody> yang kita beri id historyList merupakan elemen yang akan

menampung data dinamis berdasarkan data dari localStorage yang ada. Kita
akan memberi konten pada elemen ini secara dinamis menggunakan
JavaScript nantinya.
Keseluruhan berkas pada index.html sekarang akan nampak seperti ini:
. <!DOCTYPE html>
. <html>
.
. <head>
. <meta name="viewport" content="width=device-width, initial-scale=1.0">
. </head>
.
. <body>
. </div>
. </div>
. </div>
. </div>
. </div>
. </div>
. <h2>Riwayat Perhitungan</h2>
. <table>
. <thead>
. <tr>
. <th>Angka Pertama</th>
. <th>Operator</th>
. <th>Angka Kedua</th>
. <th>Hasil</th>
. </tr>
. </thead>
. <tbody id="historyList"></tbody>
. </table>
. </div>
.
. </body>
.
. </html>
Jika kita buka berkas index.html pada browser akan tampak seperti ini:
Selanjutnya kita akan menerapkan styling pada tabel riwayat agar informasi

pada lebih mudah dibaca.
Menerapkan styling pada tabel riwayat
Sebelumnya kita sudah membuat elemen tabel yang nantinya akan menjadi
tempat informasi riwayat kalkulasi, namun tampilannya masih kurang baik.
Kita akan merombaknya dengan menerapkan CSS pada elemen tersebut.
Silakan buka berkas style.css, kemudian tambahkan rule berikut:
. .history {
. width: 80%;
. margin: 30px auto 0 auto;
. overflow: scroll;
. }
Rule tersebut akan mengatur lebar 80% dari viewport pada

elemen <div> yang menerapkan class history. Kemudian terapkan pada
properti overflow dengan nilai scroll sehingga elemen <div> akan
memiliki scroll bar secara horizontal dan vertikal.
Lalu tambahkan juga rule berikut pada style.css:
. table {
. border-collapse: collapse;
. border-spacing: 0;
. width: 100%;
. border: 1px solid #ddd;
. }
Rule tersebut akan membuat tabel memiliki lebar 100% terhadap parentnya

dan menetapkan border pada tepian tabelnya.
Lanjut kita tambahkan rule berikut untuk mengatur padding pada table

head (<th>) dan table data (<td>) agar ukuran tampak lebih proporsional.
. th,
. td {
. padding: 16px;
. }
Lalu kita tambahkan rule berikut untuk menerapkan backgroud-color pada
element <th> dan <tr>, sementara untuk elemen <tr> kita
manfaatkan pseudo-class dalam selectornya.
. th {
. background-color: orange;
. color: white;
. }
.
. tr:nth-child(even) {
. background-color: #d2d2d2;
. }
Untuk mengoptimalkan tampilan pada perangkat seluler, kita atur

elemen <div> untuk menerapkan width: 100% pada @media query.

. .button {
. padding: 10px;
. }
. .history {
. width: 100%;
. }
. }
Sekarang struktur kode pada berkas styles.css akan tampak seperti ini:
. * {
. }
.
. body {
. }
.
. display: flex;
. max-width: 800px;
. margin: 0 auto;
. }
.
. display: flex;
. }
.
. .button {
. flex-basis: 25%;
. font-size: 1.5em;
. padding: 40px;
. cursor: pointer;
. }
.
. .double {
. flex-basis: 50%;
. }
.
. .display {
. color: white;
. width: 100%;
. font-size: 2em;
. }
.
. .operator,
. .negative,
. .equals {
. }
.
. .card {
. padding: 30px;
. margin-top: 20px;
. }
.
. .button:hover {
. }
.
. .history {
. width: 80%;
. margin: 30px auto 0 auto;
. overflow: scroll;
. }
.
. table {
. border-collapse: collapse;
. border-spacing: 0;
. width: 100%;
. border: 1px solid #ddd;
. }
.
. th,
. td {
. padding: 16px;
. }
.
. th {
. background-color: orange;
. color: white;
. }
.
. tr:nth-child(even) {
. background-color: #d2d2d2;
. }
.
. .button {
. padding: 10px;
. }
. .history {
. width: 100%;
. }
. }
Setelah persiapan tampilan table selesai, selanjutnya kita akan mulai

menerapkan JavaScript untuk mengelola data riwayat kalkulasinya.
Menerapkan localStorage pada Kalkulator
Sebelum kita menuliskan sintaks pada storage.js, pastikan kita sudah

menghubungkan berkas tersebut dengan index.html seperti berikut ini:
. ....
. <script src="assets/storage.js"></script>
. </body>
Pastikan juga kita menghubungkannya sebelum kalkulator.js karena kita

akan menggunakan storage.js pada berkas kalkulator.js. Alhasil,
berkas storage.js perlu dimuat terlebih dahulu.
Setelah kita menghubungkan berkas JavaScript dengan HTML, buka

berkas storage.js. Kemudian buat variabel CACHE_KEY dengan
nilai “calculation_history”.
. const CACHE_KEY = "calculation_history";
Variabel ini digunakan sebagai key untuk mengakses dan menyimpan data
pada localStorage.
Selanjutnya kita buat fungsi checkForStorage() dengan mengembalikan nilai

boolean dari pengecekan fitur Storage pada browser.
. function checkForStorage() {
. return typeof(Storage) !== "undefined"
. }
Fungsi tersebut akan kita gunakan di dalam if statement setiap fungsi

transaksi pada localStorage.
Lalu kita buat juga fungsi untuk menyimpan data riwayat kalkulasi
pada localStorage. Fungsi tersebut memiliki satu argumen yang merupakan
data dari hasil kalkulasi yang nantinya akan dimasukkan ke
dalam localStorage.
. function putHistory(data) {
. if (checkForStorage()) {
. let historyData = null;
. if (localStorage.getItem(CACHE_KEY) === null) {
. historyData = [];
. } else {
. historyData = JSON.parse(localStorage.getItem(CACHE_KEY));
. }
.
. historyData.unshift(data);
.
. if (historyData.length > 5) {
. historyData.pop();
. }
.
. localStorage.setItem(CACHE_KEY, JSON.stringify(historyData));
. }
. }
Banyak istilah kode yang asing pada kode di atas. Mari kita lihat satu per
satu.
Yang pertama fungsi JSON.parse() yang mana digunakan untuk mengubah

nilai objek dalam bentuk string kembali pada bentuk objek JavaScript.
Kemudian JSON.stringify() digunakan untuk mengubah objek JavaScript ke
dalam bentuk String. Seperti yang kita tahu, bahwa localStorage hanya dapat
menyimpan data primitif seperti string, sehingga kita perlu mengubah objek ke
dalam bentuk string jika ingin menyimpan ke dalam localStorage.
JSON sendiri adalah singkatan dari JavaScript Object Notation. JSON

merupakan format yang sering digunakan dalam pertukaran data. Saat ini
JSON banyak diandalkan karena formatnya berbasis teks dan relatif mudah
dibaca.
Lalu di sana juga ada fungsi unshift(), fungsi ini digunakan untuk

menambahkan nilai baru pada array yang ditempatkan pada awal index.
Fungsi ini juga mengembalikan nilai panjang array setelah ditambahkan
dengan nilai baru.
Fungsi pop() di atas merupakan fungsi untuk menghapus nilai index terakhir

pada array, sehingga ukuran array historyData tidak akan pernah lebih dari 5.
Hal ini kita terapkan agar riwayat kalkulasi yang muncul adalah lima hasil
kalkulasi terakhir oleh pengguna.
Dari sini kita bisa mengetahui bahwa data yang disimpan

pada localStorage adalah array yang berisi beberapa objek hasil kalkulasi,
kemudian array tersebut diubah menjadi string. Struktur data tersebut dalam
bentuk string nampak seperti ini:
. [
. {
. "firstNumber": "23",
. "secondNumber": "15",
. "operator": "-",
. "result": 8
. },
. {
. "firstNumber": "23",
. "secondNumber": "6",
. "operator": "-",
. "result": 17
. }
. ]
Selanjutnya kita buat fungsi untuk mendapatkan data dari localStorage. Kita
namakan fungsi tersebut “showHistory().”
. function showHistory() {
. return JSON.parse(localStorage.getItem(CACHE_KEY)) || [];
. } else {
. return [];
. }
. }
Fungsi ini mengembalikan nilai array dari localStorage jika sudah memiliki

nilai sebelumnya melalui JSON.parse(). Namun jika localStorage masih
kosong, fungsi ini akan mengembalikan nilai array kosong.
Lalu yang terakhir, kita tambahkan fungsi untuk merender data riwayat
kalkulasi pada tabel HTML. Fungsi ini diberi nama dengan renderHistory().
. function renderHistory() {
. const historyData = showHistory();
. let historyList = document.querySelector("#historyList");
.
.
. // selalu hapus konten HTML pada elemen historyList agar tidak
menampilkan data ganda
. historyList.innerHTML = "";
.
.
. for (let history of historyData) {
. let row = document.createElement('tr');
. row.innerHTML = "<td>" + history.firstNumber + "</td>";
. row.innerHTML += "<td>" + history.operator + "</td>";
. row.innerHTML += "<td>" + history.secondNumber + "</td>";
. row.innerHTML += "<td>" + history.result + "</td>";
.
.
. historyList.appendChild(row);
. }
. }
Pada akhir berkas storage.js, panggil fungsi renderHistory(); agar data

history muncul ketika website pertama kali dijalankan.
. renderHistory();
Sampai saat ini, struktur kode pada storage.js akan tampak seperti berikut:
. const CACHE_KEY = "calculation_history";

.
. function checkForStorage() {
. return typeof(Storage) !== "undefined";
. }
.
. function putHistory(data) {
. let historyData = null;
. if (localStorage.getItem(CACHE_KEY) === null) {
. historyData = [];
. } else {
. historyData = JSON.parse(localStorage.getItem(CACHE_KEY));
. }
.
. historyData.unshift(data);
.
. if (historyData.length > 5) {
. historyData.pop();
. }
.
. localStorage.setItem(CACHE_KEY, JSON.stringify(historyData));
. }
. }
.
. function showHistory() {
. if (checkForStorage) {
. return JSON.parse(localStorage.getItem(CACHE_KEY)) || [];
. } else {
. return [];
. }
. }
.
. function renderHistory() {
. const historyData = showHistory();
. let historyList = document.querySelector("#historyList");
. historyList.innerHTML = "";
.
. for (let history of historyData) {
. let row = document.createElement('tr');
. row.innerHTML = "<td>" + history.firstNumber + "</td>";
. row.innerHTML += "<td>" + history.operator + "</td>";
. row.innerHTML += "<td>" + history.secondNumber + "</td>";
. row.innerHTML += "<td>" + history.result + "</td>";
.
. historyList.appendChild(row);
. }
. }
.
. renderHistory();
Terakhir kita gunakan fungsi putHistory() yang sudah kita buat ketika

kalkulator melakukan proses kalkulasi, tepatnya pada
fungsi performCalculation() berkas kalkulator.js.
Sebelum memanggil fungsi putHistory(), tentu kita harus menyiapkan data

yang akan dikirimkan sebagai argumen fungsi tersebut.
Pada performCalculation() kita buat variabel baru dengan nama history yang
merupakan objek dari data history yang akan dikirimkan. Struktur objeknya
. const history = {
. firstNumber: calculator.firstNumber,
. secondNumber: calculator.displayNumber,
. operator: calculator.operator,
. result: result
. }
Setelah menyiapkan datanya, barulah kita bisa memanggil

fungsi putHistory() dengan mengirimkan variabel history sebagai argumen
fungsinya. Jangan lupa juga panggil fungsi renderHistory() agar riwayat
kalkulasi langsung tampil pada tabel setelah kalkulasi dilakukan.
Sehingga sekarang struktur kode dari fungsi performCalculation() akan

. return;
. }
.
. let result = 0;
. } else {
. }
.
. // objek yang akan dikirimkan sebagai argumen fungsi putHistory()
. const history = {
. firstNumber: calculator.firstNumber,
. secondNumber: calculator.displayNumber,
. operator: calculator.operator,
. result: result
. }
. putHistory(history);
. renderHistory();
. }
Pada tahap ini seharusnya kalkulator kita sudah dapat menampilkan riwayat
kalkulasi yang dilakukan pengguna.
Selamat, Anda sudah berhasil membuat aplikasi kalkulator berbasis web

dengan baik. Good Job!
Submission
Selamat, akhirnya Anda telah sampai di penghujung pembelajaran. Anda
telah mempelajari dasar HTML, penerapan semantic elemen,
menerapkan styling menggunakan CSS, dan layouting menggunakan float
ataupun flexbox. Anda juga sudah mengerjakan semua latihan yang diberikan
pada kelas ini.
Untuk bisa lulus dan mendapatkan sertifikat dari akademi ini, Anda harus
mengerjakan tugas Halaman Website yang menerapkan semantic
meaning. Tim reviewer akan memeriksa pekerjaan Anda dan
memberikan review pada proyek yang Anda buat.
Kriteria Submission
Berikut kriteria submission yang harus Anda penuhi:
Proyek Halaman Website dengan semantic meaning
 Menerapkan konsep semantic meaning dalam menyusun struktur

website (terdapat
elemen <header>, <footer>, <main>, <article> dan <aside>).
 Tema yang ditampilkan bebas, namun wajib menampilkan identitas
diri yang ditampilkan dalam elemen <aside>.

Menyusun layout dengan menggunakan float atau flexbox.

Berikut sketsa dari struktur website yang bisa dijadikan referensi untuk
mengerjakan submission:
Kesempatan untuk submission Anda diterima

akan lebih besar jika:
 Bebas berkreasi dan kreatif dalam mengerjakan submission.
 Memiliki tampilan yang menarik.
 Memanfaatkan media query dalam menerapkan layout yang responsif.

Menerapkan JavaScript dalam memanipulasi DOM.
Submission Anda akan ditolak jika:

 Tidak memenuhi kriteria yang sudah ditentukan.
 Menggunakan library Bootstrap, Materialize, Foundation ataupun
library lain yang semacamnya untuk menyusun layout.

Menggunakan template yang didapat dari internet.
Kriteria penilaian submission:


Bintang 1: Semua ketentuan terpenuhi, namun terdapat indikasi

plagiat yaitu dengan menggunakan proyek orang lain dan hanya
mengubah kontennya saja.


Bintang 2: Semua ketentuan terpenuhi, namun terdapat kekurangan

pada tampilan aplikasi. Seperti tidak menerapkan responsibilitas,
kombinasi warna tidak tepat, dsb.


Bintang 3: Semua ketentuan terpenuhi, namun hanya mengikuti apa

yang ada pada modul.


Bintang 4: Semua ketentuan terpenuhi dan memiliki tampilan yang
menarik.


Bintang 5: Semua ketentuan terpenuhi, memiliki tampilan yang

menarik serta responsif, dan menerapkan JavaScript dalam
memanipulasi DOM dengan baik.
Ketentuan:
 Di dalam folder proyek tersebut terdiri dari HTML, CSS, JS atau
aset yang Anda gunakan dalam halaman web yang Anda buat.
 Mengirimkan submission dalam bentuk folder Proyek, yang
diarsipkan dalam format ZIP.
 Tim reviewer akan mengulas submission Anda dalam waktu
selambatnya 3 (tiga) hari kerja (tidak termasuk Sabtu, Minggu, dan hari
libur nasional).
 Tidak disarankan untuk melakukan submit berkali-kali karena akan
memperlama proses penilaian.

Anda akan mendapat notifikasi hasil pengumpulan submission Anda

via email, atau Anda dapat mengecek status submission pada akun
Dicoding Anda.
Jika mengalami kesulitan, Anda bisa menanyakan langsung di forum

diskusi. https://www.dicoding.com/academies/123/discussions.
Perhatian!
Sesuai dengan terms of use di Dicoding, submission kelas Dicoding
Academy haruslah hasil karya Anda sendiri.
Kode yang didapatkan dari sumber lain (website, buku, forum, GitHub, dan
lain-lain) hanya digunakan sebagai referensi. Tingkat kesamaannya tidak
boleh lebih dari 70%.
Kami memiliki hak mutlak untuk mengenakan sanksi kepada

peserta plagiat yang melanggar ketentuan di atas. Sanksi tersebut
berupa penangguhan akun Dicoding. Artinya Anda tidak dapat melakukan
submission apapun di kelas Dicoding Academy selama masa penangguhan.
Progress belajar peserta kelas Dicoding Academy pun, otomatis kami reset
ke 0 (nol), tanpa terkecuali.
Kirim Submission untuk menyelesaikan Tutorial ini

Belajar Dasar Pemrograman Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Belajar Dasar Pemrograman Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Apa itu Website?

Website adalah sebuah halaman yang menampilkan informasi melalui teks

Website sudah berkembang sangat pesat. Sekarang, website digunakan tidak

Tetapi pengertian server sebenarnya lebih merujuk pada sebuah software yang

Setiap perangkat baik komputer, smartphone, modem, maupun router yang

Server-side dan Client-side

Bagaimana Website bekerja?

Ketika kita mengunjungi dicoding.com, tentu kita membutuhkan sebuah koneksi

Untuk menampilkan informasi pada jendela, browser menggunakan HTML dan

Apa yang kan Kita Pelajari?

Pada modul 2 dan 3 kita akan mempelajari rangkaian penggunaan HTML

Sudah siap belajar dasar pemrograman website? Sebelum memulainya mari

Dalam mengembangkan sebuah website, tentu kita akan banyak menuliskan

Visual Studio Code

Atom merupakan text editor gratis dan juga open source untuk Windows,

Editor ini mungkin tidak secanggih opsi-opsi sebelumnya dalam menuliskan

Seperti yang sudah kita ketahui, untuk mengakses website membutuhkan

Seperti text editor, sebenarnya sistem operasi sudah mempunyai browser

Halaman unduh Mozilla Firefox.

Contoh sebuah halaman pada Website.

Membuat berkas HTML Pertama

Langkah awal dalam membuat berkas HTML adalah kita buka Notepad pada

Silakan gunakan kombinasi tombol Windows + R untuk membuka

Selanjutnya kita salin dan tempel teks berikut pada notepad.

Sehingga sekarang notepad tampak seperti gambar di bawah ini:

Simpan perubahan pada notepad dengan melakukan Save (ctrl + s pada

Selanjutnya jendela preferences akan terbuka, pada bagian format pastikan

Sekarang text editor akan tampak seperti ini:

Langkah awal untuk menuliskan berkas HTML adalah membuka text editor.

Jika berhasil, maka aplikasi text editor akan terbuka. Silakan salin konten

Tampilan awal konten

Informasi yang tampil, nampak berantakan, bukan? Karena standarnya,

Struktur dasar HTML

Berkas HTML dasarnya memiliki struktur yang nampak seperti ini:

Tetapi sejak HTML5, penggunaan <head> dapat dihilangkan. Sehingga struktur

Maka seluruh konten yang dituliskan di dalam elemen <body> akan nampak pada

.

Sebuah komentar berguna untuk memberikan label dan mengorganisir sebuah

Identifikasi Elemen pada Halaman Website

Dalam mengidentifikasi konten, carilah konten yang paling penting dan

Coba save berkas HTML tersebut, kemudian coba buka pada browser.

Berikut catatan penting yang sudah kita pelajari sejauh ini:

 Website : Halaman yang menampilkan informasi melalui teks atau

More About HTML

Dalam modul ini kita akan mempelajari bagaimana cara menambahkan

Mari kita mulai!

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

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

Dengan menambahkan atribut translate dan memberikan nilai “no” pada elemen

accesskey Menentukan tombol shortcut untuk mengaktifkan/memfokuskan pada sebuah eleme

dir Menentukan arah teks untuk konten pada suatu elemen.

draggable Menentukan apakah suatu elemen dapat di-drag atau tidak.

id Menetapkan id pada elemen.

lang Menentukan bahasa pada konten elemen.

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.

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

“Pastikan kita selalu gunakan elemen (tags) dalam

Pada browser standarnya heading akan ditampilkan dengan tulisan tebal (bold text),

Pada HTML terdapat tiga tipe list:

Description lists : daftar yang terbuat dari beberapa istilah diikuti

Seperti namanya, unordered list merupakan daftar yang tidak mementingkan