Persyaratan Kemampuan

Seperti yang sudah disebutkan sebelumnya, kelas ini merupakan lanjutan dari kelas Belajar
Dasar Pemrograman Web. Idealnya, Anda telah lulus dari kelas dasar tersebut. Namun jika tidak,
Anda harus memiliki bekal pengetahuan dasar pengembangan web yang mendalam seperti
HTML, CSS dan JavaScript. Berikut ini, detail dari masing-masing yang wajib Anda miliki.

HTML

Sebelum belajar di kelas ini, Anda harus mengetahui cara membuat elemen pada HTML,
mengetahui macam-macam elemen yang ada beserta fungsinya, memahami perbedaan inline dan
block element, hingga memahami fungsi dan cara memberikan atribut pada elemen HTML.

CSS

Selain pengetahuan tentang HTML, Anda juga harus sudah memiliki pengetahuan tentang
styling halaman website menggunakan CSS. Anda sudah terbiasa dengan aturan styling,
penggunaan selector yang benar, tahu mengenai satuan yang pas untuk digunakan dan
penggunaan warna dalam CSS, hingga bisa menyusun website dengan baik dan responsif.

JavaScript

Hal terakhir yang harus Anda pahami adalah JavaScript. Pada titik ini Anda harus sudah
memahami sintaks dasar JavaScript, mengenali tipe data yang ada, dan mengetahui adanya
Browser Object sebagai API antara JavaScript dengan Browser. Anda bisa memanipulasi DOM
dengan menggunakan JavaScript.

Pengenalan Kelas

Selamat datang di kelas Belajar Dasar Pemrograman JavaScript!

Pada kelas ini kita akan belajar hal-hal fundamental yang perlu
Anda ketahui tentang bahasa pemrograman JavaScript pada
lingkungan Node JS. Untuk penggunaan JavaScript pada lingkungan
browser, Anda dapat mempelajarinya pada kelas Belajar Dasar
Pemrograman Web.
Materi yang tersaji ramah untuk pemula, sehingga tidak ada
prasyarat pemrograman yang perlu Anda kuasai untuk belajar di
kelas ini.

Beberapa hal yang akan dipelajari pada kelas ini, antara lain:

 Introduction to JavaScript : Mengenal apa itu JavaScript,

mulai dari sejarah hingga alasan untuk mulai mempelajarinya.
 JavaScript Fundamentals : Materi fundamental terkait
JavaScript, seperti statement, expressions, variabel, tipe data,
dan control flow.
 Data Structure : Menjelaskan bagaimana menyimpan dan
mengelola data yang lebih kompleks menggunakan Object,
Array, Map, Set, dsb.
 Function : Mempelajari bagaimana mengelompokkan kode
menjadi fungsi yang dapat dipanggil ulang.
 Object-Oriented Programming : Memahami konsep OOP
pada JavaScript, bagaimana membuat class, properti, dan
method dari class.
 Functional Programming : Memahami konsep functional
programming seperti perilaku fungsi, anonymous function,
dan higher-order.
 Setup Environment : Proses instalasi lingkungan
pengembangan seperti Node JS dan IDE pada perangkat yang
Anda miliki.
 Module : Mempelajari bagaimana beberapa berkas JavaScript
dapat saling berkomunikasi dan berbagi data satu sama lain.
 Error Handling : Mempelajari bagaimana menangani
kegagalan yang mungkin muncul dalam program, sehingga
tidak berdampak kepada pengguna.
 Concurrency : Mempelajari bagaimana menangani dan
membuat proses asynchronous pada JavaScript.
 Node Package Manager : Mengetahui beberapa library yang
penting untuk ditambahkan ke dalam proyek aplikasi
JavaScript.
 JavaScript Testing : Mempelajari bagaimana melakukan
pengujian otomatis pada kode JavaScript.

Glosarium
 C

Compiler

Program komputer yang menerjemahkan kode yang ditulis dalam

satu bahasa pemrograman ke bahasa lain yang dimengerti oleh
mesin.

Debugging

Proses mengidentifikasi dan menghilangkan error pada aplikasi.

Interpreter

Program untuk menerjemahkan setiap baris kode dari bahasa

pemrograman menjadi bahasa yang dimengerti oleh mesin secara
langsung. Tanpa melalui proses kompilasi.

Library

Sekumpulan sumber daya, biasanya berupa kode atau program,

yang memiliki fungsionalitas tertentu dan bisa digunakan pada
program lain.

Runtime
Lingkungan, platform, atau sumber daya yang menjalankan suatu
kode/program.

String Concatenation

Proses penggabungan dua String atau lebih menggunakan operator

penjumlahan (+).

String Interpolation

Proses mengganti placeholder di dalam String dengan nilai dari

variabel tertentu.

Anatomi Website
Kita terbiasa dengan tampilan website yang nampak
pada browser. Namun apakah kalian tahu bagaimana website dapat
tampil demikian? Terdapat 3 (tiga) fondasi penting dalam
membuat website. Pertama adalah HTML, 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. Hal ini dikarenakan website disimpan
dalam sebuah web server yang dapat diakses di mana saja. Ketika
kita menuliskan “dicoding.com” pada address bar di browser dan
menekan enter pada keyboard, 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 mengirimkan hasil tanggapan (response) dari
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.

Struktur Dasar HTML

Website serupa dengan 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:

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <title>Judul Halaman</title>

5. </head>

6. <body>

7. <h1>Heading Utama</h1>

8. <p>Sebuah Paragraph.</p>

9. </body>

10. </html>

Kita dapat melihat bahwa struktur dasar HTML dituliskan dari

beberapa elemen. Pada setiap elemen HTML terdapat dua tag, yaitu
tag pembuka <> dan tag penutup </>. Lihat gambar berikut untuk
lebih jelasnya.

Di antara tag pembuka dan tag penutup 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 elemen penting lainnya
yang berfungsi menampilkan 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:

1. <head>

2. <meta charset="utf-8">

3. <title>Judul Halaman Anda</title>

 4. <style>

5. /* Kode CSS anda */

6. </style>

7. </head>

Tetapi sejak HTML5, penggunaan <head> dapat dihilangkan. Oleh

karena itu, struktur dasar berkas HTML menjadi seperti ini:

1. <!DOCTYPE html>

2. <html>

3. <meta charset="utf-8">

4. <title>Judul halaman</title>

5. <style> Style </style>

6. <body>

7. <h1>Heading Utama</h1>

8. <p>Sebuah Paragraph.</p>

9. </body>

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

1. <html>

2. <head>

3. <title>Ini merupakan judul dari dokumen HTML</title>

 4. </head>

5. <body>

6. <h1>header yang diletakan di dalam elemen body</h1>

7. <p>Ini merupakan sebuah paragraph yang juga diletakan

pada sebuah konten body, sehingga konten ini dapat dilihat oleh

pengguna pada jendela browser.</p>

8. </body>

9. </html>

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

nampak pada browser.

Kecuali jika kita ingin menuliskan sebuah catatan kecil 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:

1. <!-- Ini merupakan sebuah komentar -->

2. <!-- Ini merupakan

3. sebuah komentar yang

4. terdiri lebih dari satu baris -->

Sebuah komentar berguna untuk memberikan label dan

mengorganisir sebuah dokumen yang panjang, terlebih ketika kita
bekerja secara tim.

Lorem Ipsum
Lorem ipsum adalah teks standar yang ditempatkan untuk
mendemonstrasikan elemen grafis atau presentasi visual seperti
font, tipografi, dan tata letak. Tujuan penggunaan lorem ipsum
sebagai berikut:

1. Sebagai pengisi sementara jika belum ada konten teks.

2. Jika ingin menunjukkan hasil website sementara di mana
audiens diharapkan lebih fokus kepada elemen desain yang
dipresentasikan dan bukan pada isi teks.
Penggunaan lorem ipsum ini biasanya digunakan pada proses
pengembangan (development). Ada berbagai cara untuk membuat
teks lorem ipsum seperti berikut:

1. Gunakan Microsoft Word. Buat dokumen baru dan pada lembar

kerja ketiklah =lorem(), kemudian tekan tombol enter pada
keyboard. Secara otomatis akan muncul teks lorem ipsum.
Kamu juga dapat mengatur jumlah teks yang muncul dengan
cara ketik =lorem(“angka jumlah paragraf yang
diinginkan”, “angka jumlah kalimat pada setiap
paragraf”). Sebagai contoh jika mengetik =lorem(3,4) maka
akan muncul teks sebanyak 3 paragraf dan masing-masing
paragraf terdapat 4 teks.
2. Tersedia banyak situs generator lorem ipsum gratis seperti
pada https://id.lipsum.com/ dan https://loremipsum.io/

Berikut catatan penting yang sudah kita pelajari sejauh ini:

 Website : Halaman yang menampilkan informasi kepada

pengguna berupa teks atau gambar. Website dapat diakses
melalui internet dengan menggunakan browser.
 Browser : Sebuah perangkat lunak yang dapat
menerjemahkan berkas HTML, CSS, dan JavaScript yang
didapat dari web 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 bahasa markup (markup language) yang
digunakan untuk membuat struktur dan menampilkan konten
pada World Wide Web (Website).
 CSS : Bahasa markup 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 ini
digunakan dalam penulisan berkas HTML, CSS, dan Javascript.
 Rich Text : Teks yang terformat. Format teks ini digunakan jika
kita ingin menulis 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.

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

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

sekaligus menjadi ibu kota provinsi tersebut.</p>

Pada contoh kode tersebut, kita menetapkan artibut bahasa

(dengan penulisan lang) dengan nilai “id” atau Indonesia (kode
bahasa bisa kita explore pada link
berikut: https://www.w3schools.com/tags/ref_language_codes.asp )
pada sebuah elemen paragraf.

Untuk menuliskan sebuah atribut kita memerlukan nama dari

atribut itu diikuti dengan nilai atribut tersebut dalam
bentuk string (Dituliskan dalam tanda kutip dua). Untuk lebih
jelasnya, perhatikan gambar berikut:

Atribut pada elemen juga dapat dituliskan lebih dari satu. Kita bisa
menuliskan kembali seluruh struktur atribut di samping dari atribut
yang sudah ada. Contohnya pada elemen paragraf di atas, kita
akan memberikan sebuah atribut translate, sehingga penulisannya
menjadi seperti ini:

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

Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi

tersebut.</p>

Dengan menambahkan atribut translate dan memberikan

nilai “no” pada elemen paragraf tersebut, maka konten dari
elemen yang dimaksud tidak akan diterjemahkan oleh layanan
sistem translate otomatis seperti Google Translate.

Lantas atribut apa saja yang dapat digunakan pada elemen HTML?
Pada elemen HTML terdapat dua jenis atribut, yaitu Global
Attribute dan atribut yang hanya bisa digunakan pada elemen
tertentu. Untuk atribut yang spesifik pada sebuah elemen, kita akan
mengulasnya pada pembahasan elemen tersebut. Untuk Global
Attribute, berikut daftar atribut yang bisa kita gunakan di seluruh
elemen HTML.

Attribute Description
accesskey Menentukan tombol shortcut untuk mengaktifkan/memfokuskan pada sebuah element.
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 ditaut
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:

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

terbendungnya sungai Citarum

2. oleh lava

3. Gunung Tangkuban Parahu yang lalu membentuk telaga...</p>

4.
 5.

6. <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari

kalimat Nga-Bandung-an Banda Indung, yang

7. merupakan kalimat sakral dan luhur karena mengandung nilai

ajaran Sunda. Nga-Bandung-an artinya

8. menyaksikan atau bersaksi...</p>

Ketika menggunakan paragraf pada browser, teks selalu

ditampilkan dengan baris 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 menggunakan elemen (tags) saat menuliskan

teks pada dokumen HTML. Teks yang berada pada dokumen HTML
tanpa tags disebut “anonymous text” dan ini dapat menyebabkan
dokumen HTML menjadi tidak valid.”

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

Pada HTML terdapat tiga tipe list:

  Unordered lists : daftar yang ditampilkan tidak memiliki
urutan.
 Ordered lists : daftar yang ditampilkan secara terurut.
 Description lists : daftar yang terbuat dari beberapa istilah
diikuti dengan deskripsi dari istilah tersebut.

Unordered List

Seperti namanya, unordered list merupakan daftar yang tidak

mementingkan urutan. Standarnya, unordered
list menampilkan bullet pada tiap item list-nya (tetapi kita bisa
mengubahnya dengan styling).

Untuk menetapkan konten sebagai unordered list kita

gunakan <ul></ul> kemudian di dalam elemen tersebut kita
gunakan tags <li></li> untuk menetapkan item pada list tersebut.
Contoh penerapannya sebagai berikut:

1. <ul>

2. <li>Item 1</li>

3. <li>Item 2</li>

4. <li>Item 3</li>

5. <li>Item 4</li>

6. </ul>

Ketika kita membukanya pada browser, maka akan nampak seperti

ini:
Di antara tag elemen <li>, kita dapat mengisikan konten apapun
termasuk elemen HTML lain. Contohnya kita dapat memasukan
sebuah heading atau paragraf pada item.

1. <ul>

2. <li><h1>Sebuah Heading sebagai item list</h1></li>

3. <li><h2>Sebuah Heading level 2 sebagai item list</h2></li>

4. <li><p>Sebuah paragraf sebagai item list</p></li>

5. </ul>

Seperti yang kita sudah ketahui, maka list item akan menampilkan
seperti format header.

Kita juga bisa menyimpan kembali elemen <ul> untuk membuat

sebuah nested list.

1. <ul>

2. <li>List item 1</li>

3. <li>List item 2</li>

4. <li>List item 3

5. <ul>

6. <li>List item 3.1</li>

7. <li>List item 3.2</li>

8. <li>List item 3.3</li>

9. </ul>
 10. </li>

11. <li>List item 4</li>

12. </ul>

Ordered List

Ordered list digunakan untuk membuat list yang mementingkan

urutan. Contohnya, membuat daftar instruksi langkah demi langkah
sehingga dibutuhkan urutan yang sesuai. Ordered list bekerja
seperti unordered list, namun perbedaanya pada tiap item
menampilkan angka bukan sebuah bullet. Angka yang ditampilkan,
otomatis berurut tiap itemnya, sehingga kita tidak perlu menuliskan
secara kasar urutan nomornya. Hal ini tentu mempermudah kita
untuk mengorganisir tiap itemnya.

Untuk menetapkan konten sebagai ordered list kita

gunakan <ol></ol>. Sama seperti Unordered list, tiap item dalam
list ditetapkan dengan menggunakan tags <li></li>.

1. <ol>

2. <li>Langkah pertama</li>

3. <li>Langkah kedua</li>

4. <li>Langkah ketiga</li>

5. <li>Langkah selanjutnya</li>

6. </ol>

Ketika kita membukanya pada browser, maka akan nampak seperti

ini:

Sama seperti pada unordered list, di antara tag elemen <li> kita
dapat mengisikan konten apapun termasuk elemen HTML lain.
Pada ordered list, tipe urutan angkanya dapat kita atur melalui
sebuah atribut type. Contohnya, selain nomor urutan angka dapat
menggunakan alfabet ataupun angka romawi.

1. <ol type="I">

2. <li>Langkah pertama</li>

3. <li>Langkah kedua</li>

4. <li>Langkah ketiga</li>

5. <li>Langkah selanjutnya</li>

6. </ol>

7.

8. <ol type="A">

9. <li>Langkah pertama</li>

10. <li>Langkah kedua</li>

11. <li>Langkah ketiga</li>

12. <li>Langkah selanjutnya</li>

13. </ol>

Berikut nilai-nilai yang dapat digunakan pada atribut type pada

elemen <ol>:

Nilai Deskripsi
 1 Menggunakan angka dalam urutan item (default)
a Menggunakan huruf kecil dalam urutan item
A Menggunakan huruf besar dalam urutan item
i Menggunakan huruf romawi kecil dalam urutan item
I Menggunakan huruf romawi besar dalam urutan item
Selain tipe angka pada urutan, kita juga bisa menetapkan nilai awal
pada sebuah ordered list dengan menggunakan atribut start.
Contohnya, jika kita ingin memulai sebuah list dari angka 7, maka
kita tetapkan atribut start dengan nilai 7 pada elemen <ol>.

1. <ol start="7">

2. <li>Langkah ketujuh</li>

3. <li>Langkah kedelapan</li>

4. <li>Langkah kesembilan</li>

5. <li>Langkah selanjutnya</li>

6. </ol>

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

Normalnya urutan list diawali dengan urutan paling rendah dengan

menambahkan atribut reversed pada elemen <ol>, urutan dalam
sebuah list akan dibalik. Atribut ini berbeda dengan atribut yang
lain (yang sudah dibahas sebelumnya), atribut ini tidak memerlukan
sebuah nilai ketika menggunakannya. Atribut ini hanya
menandakan sebuah list untuk membalikan urutan angka pada tiap
itemnya. Berikut contoh penggunaannya.

1. <ol start="7" reversed>

2. <li>Langkah ketujuh</li>

3. <li>Langkah kedelapan</li>
 4. <li>Langkah kesembilan</li>

5. <li>Langkah selanjutnya</li>

6. </ol>

Jika dijalankan, hasilnya akan tampak seperti berikut.

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 diantara tag pembuka dan tag
penutup sebagaimana tag lainnya. Namun untuk menetapkan gambar yang ditampilkan kita
gunakan sebuah atribut src. Contohnya seperti ini:

1. <img

src="https://raw.githubusercontent.com/dicodingacademy/BelajarDas

arPemrogramanWeb/image-assets/dicoding-logo.png" alt="Dicoding

Logo">

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
atribut yang harus kita gunakan ketika menerapkan elemen <img>.
Yang pertama, atribut src. Atribut ini berfungsi sebagai sumber dari gambar yang ditampilkan.
Atribut ini dapat bernilai url gambar atau path gambar lokal dari gambar yang digunakan.

Selanjutnya adalah atribut alt. Atribut ini sebenarnya tidak wajib untuk diterapkan, hanya saja
atribut ini akan sangat berguna ketika gambar tidak berhasil ditampilkan. Nilai atribut ini
merupakan gambaran dari gambar yang ditampilkan dalam bentuk tulisan. Sehingga ketika
gambar gagal ditampilkan maka akan memunculkan teks alternatif yang dapat mewakili arti dari
gambar tersebut.

Selanjutnya terdapat atribut lain yang bisa Anda gunakan pada elemen ini, contohnya title.
Atribut title berfungsi sebagai informasi tambahan untuk sebuah gambar. Informasi tersebut akan
muncul ketika kita mengarahkan sebuah cursor pada gambar yang ditampilkan.

Jenis format gambar

Berikut adalah jenis format gambar yang umum digunakan pada pembuatan website.

Nama Ekstensi Keterangan

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

Mengatur ukuran pada gambar

Untuk mengatur ukuran gambar yang ditampilkan juga tentunya menggunakan sebuah atribut.
Untuk menentukan lebar gambar kita gunakan atribut width, dan untuk menentukan tinggi tentu
gunakan atribut height.

Ketika menggunakan atribut ini disarankan hanya gunakan salah satunya. Terkecuali kita
menentukan nilai lebar dan tingginya sesuai dengan rasio dari ukuran gambar aslinya.

Contohnya, jika kita tetap memaksa untuk menentukan ukuran panjang dan lebar sebuah gambar
tanpa menyesuaikan rasionya, maka gambar yang ditampilkan tidak akan proporsional.

1. <img

src="https://raw.githubusercontent.com/dicodingacademy/BelajarDas

arPemrogramanWeb/image-assets/dicoding-logo.png" alt="Dicoding

Logo" width="500px" height="200px"> <!-- Jangan lakukan ini! -->

Dengan menetapkan hanya satu atribut ukurannya, maka ukuran lainnya akan mengikuti sesuai
dengan rasio gambar aslinya. Contohnya, kita bisa menetapkan ukuran gambar berdasarkan nilai
lebarnya saja.

1. <!-- Menetapkan ukuran gambar berdasarkan lebar -->

2. <img

src="https://raw.githubusercontent.com/dicodingacademy/BelajarDas

arPemrogramanWeb/image-assets/dicoding-logo.png" alt="Dicoding

Logo" width="500px">
Atau kita bisa tetapkan ukuran gambar berdasarkan tingginya. Dengan begitu nilai lebar akan
menyesuaikan nilainya berdasarkan rasio gambar aslinya.

1. <!-- Menetapkan ukuran gambar berdasarkan tinggi -->

2. <img

src="https://raw.githubusercontent.com/dicodingacademy/BelajarDas

arPemrogramanWeb/image-assets/dicoding-logo.png" alt="Dicoding

Logo" height="100px">

Gambar tentu perlu waktu yang lebih untuk ditampilkan di browser sehingga tentukanlah ukuran
sesuai kebutuhan.

Inline Formatting Text

Pada materi kali ini, 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 block,
yaitu elemen inline. Elemen ini tidak menambahkan baris baru
ketika dibuat. Apa saja elemen tersebut? Mari kita bahas satu
persatu.

Anchor

Apa itu anchor? Anchor (jangkar) merupakan elemen yang

digunakan untuk membuat sebuah hyperlink ke halaman atau
website lain, file, alamat email, atau URL lainnya. Untuk
menggunakan elemen ini kita gunakan tag <a>...</a> bersama
dengan atribut href untuk menetapkan sebuah target yang akan
dituju.

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

2. <ul>

3. <li><a href="https://example.com">Website</a></li>

4. <li><a href="mailto:[email protected]">Email</a></li>

5. <li><a href="tel:+62123456">Telepon</a></li>

6. <li><a href="#address">Alamat</a></li>

7. </ul>

Selain atribut href, terdapat beberapa atribut khusus yang dapat

digunakan pada elemen ini, antara lain:

Atribut Nilai Deskripsi

download filename Menginstruksikan browser untuk mengunduh pada
URL yang ditetapkan daripada mengarahkannya.
href URL Menetapkan target yang akan diarahkan/unduh
ketika pengguna menekan hyperlink.
hreflang language_code Menetapkan bahasa dari dokumen target.
ping list_of_URLs Menetapkan URL yang akan diberitahu dengan
mengirimkan post request ping pada body oleh
browser (berjalan di belakang layar) ketika target
URL pada hyperlink ditekan. Biasanya atribut ini
digunakan untuk pelacakan.
referrerpolicy no-referrer, Menetapkan referensi untuk dikirim pada target.

no-referrer-when-downgrade,

origin,

origin-when-cross-origin,

unsafe-url
rel alternate, Menetapkan hubungan antara halaman yang
ditampilkan dengan target.
 author,

bookmark,

external,

help,

license,

next,

nofollow,

noreferrer,

noopener,

prev,

search,

tag

target _blank, Menetapkan lokasi ketika membuka target

contohnya pada sebuah tab, window atau pada tab itu
_parent, sendiri.

_self,

_top
media media_type Menetapkan tipe media yang digunakan pada target.

Emphasized text

Gunakan elemen <em> untuk menunjukan bagian kata yang perlu

kita tekankan. Elemen ini menunjukan stress emphasis atau
konten/kata yang perlu mendapatkan penekanan atau perhatian
khusus. Berikut contoh penggunaannya.

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

2. <p>Dia adalah seorang <em>pelajar</em></p>

Pada kalimat pertama, penekanan terdapat pada “siapa” seorang
pelajar. Sedangkan pada kalimat kedua, penekanan terdapat pada
“apa” yang sedang dijabati atau diperani oleh Oding.

Standarnya pada browser sebuah kata yang ditekankan akan

ditampilkan dalam gaya miring pada teks nya.

Important text

Gunakan elemen <strong> untuk menunjukan sebuah teks yang

begitu penting (strong importance), serius, ataupun mendesak.
Dalam arti teks tersebut harus dapat perhatian lebih dari teks biasa
lainnya.

1. <p>Kesehatan merupakan hal yang penting, jaga pola makan yang

teratur dan <strong>jangan sampai makan tengah

2. malam!</strong></p>

Standarnya pada browser, sebuah teks yang dibungkus dengan

tag <strong> akan ditampilkan secara tebal. Dan ketika pengguna
menggunakan pembaca layar (screen reader), suara yang
terdengar akan berbeda. Ini mengartikan bahwa teks tersebut
penting tidak hanya sekedar tebal.

Short quotations

Gunakan elemen <q> untuk menandai sebuah kutipan dalam

sebuah teks. Elemen short quotations berbeda
dengan <blockquote>. Elemen ini digunakan untuk kutipan pendek
yang terletak di dalam baris (inline).

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

bisa hadir dalam pertemuan nanti</q></p>

Standarnya pada browser sebuah teks yang

diberi markup <q> akan ditampilkan di dalam tanda kutip
(Quotation marks).

Citation

Selain sebuah atribut, <cite> juga merupakan sebuah elemen yang digunakan untuk sebuah
rujukan pada sebuah dokumen, contohnya sebuah buku, majalah, artikel dan lainnya.

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

href="https://dicoding.com">dicoding.com</a></cite>.</p>

Standarnya pada browser sebuah teks yang diberi markup <cite> akan ditampilkan dengan cetak
miring (italic).

Defining terms
Elemen <dfn> digunakan ketika mendefinisikan sebuah istilah (term). Elemen ini harus terletak
pada elemen lain yang menaunginya. Contohnya pada sebuah elemen <p> atau
elemen <section>. Berikut contoh penggunaannya:

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

informasi melalui teks atau gambar. Website dapat diakses melalui

internet dengan menggunakan browser.</p>

Standar pada browser yakni sebuah teks yang diberi markup <dfn> akan ditampilkan dengan
cetak miring (italic).

Subscript dan Superscript

Subscript <sub> dan superscript <sup> merupakan elemen yang dapat membuat teks yang
ditampilkan nampak kecil, dengan posisi di bawah (sub) atau di atas (sup) dari teks biasanya.
Elemen ini digunakan untuk menunjukan sebuah rumus kimia ataupun matematika.

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

monomernya yang berupa unit glukosa dan fruktosa,dengan rumus

molekul C₁₂H₂₂O₁₁.</p>

2.

3. <p>Salah satu persamaan paling umum dalam semua fisika adalah

E=MC²</p>

Jika kita lihat pada browser, tampilan akan tampak seperti ini:

Highlighted text
Untuk menandai atau menyorot sebuah teks kita bisa menggunakan elemen <mark>. Elemen ini
digunakan ketika terdapat sebuah teks yang memiliki peran penting, biasanya teks tersebut
merupakan bagian yang paling relevan atau penting dalam sebuah konteks kalimat.

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

pemberontak, menyerang dari pangkalan tersembunyi, telah

2. memenangkan kemenangan pertama mereka melawan Kekaisaran

Galactic yang jahat. Selama pertempuran,

3. <mark>mata-mata

4. Pemberontak berhasil mencuri rencana rahasia

5. </mark>

6. ke senjata pamungkas Kekaisaran, STAR DEATH, stasiun ruang

angkasa

7. berlapis baja dengan kekuatan yang cukup untuk menghancurkan

seluruh planet.

8. </p>

Standarnya pada browser teks yang diberi markup <mark> akan ditampilkan dengan background
kuning dan teks hitam.

Line Break

Terkadang kita mungkin perlu menambahkan sebuah baris baru pada sebuah baris teks (termasuk
di dalam paragraf), tetapi kita mengetahui bahwa browser akan mengabaikan sebuah penulisan
spasi ganda ataupun garis baru, sehingga kita memerlukan sebuah tanda yang dapat digunakan
untuk memberitahu browser untuk “Tambahkan garis baru di sini!”.

Inline line break element atau <br> dapat digunakan untuk memberitahu browser untuk
memberikan sebuah garis baru pada baris teks. Sama seperti gambar, elemen ini merupakan
elemen kosong sehingga kita tidak membutuhkan sebuah tag penutup.

1. <p>

2. Dicoding Space,<br>

3. Jln. Batik Kumeli No. 50.<br>

4. Bandung.<br>

5. 40123

6. </p>

Jika kita lihat pada browser, maka tampilan akan tampak seperti ini: