DTS HTML CSS Advanced Material - BHS

Materi HTML&CSS untuk
sertifikasi Microsoft 98-383

Selamat telah menyelesaikan seluruh pelajaran HTML&CSS di
Progate!!
Anda telah memiliki pengetahuan yang cukup untuk membuat

sebuah halaman web namun ada beberapa hal yang bisa Anda
pelajari lebih lanjut untuk naik level skill Anda!
Pada materi ini, Anda mempunyai kesempatan untuk

mempelajari lebih jauh mengenai HTML&CSS! Yang Anda
pelajari disini sesuai dengan requirement untuk mendapatkan
sertifikasi Microsoft 98-383.
Pengetahuan yang Anda perlukan sebelum memulai
Sebelum memulai materi ini, pastikan Anda sudah

menyelesaikan semua hal berikut dengan tepat!
● Pelajaran HTML&CSS di Progate

● Local environment Anda
■ Mac: https://progate.com/docs/html-env
■ Windows: https://progate.com/docs/html-env-win
Jika Anda telah menyelesaikannya namun merasa Anda belum

paham dasarnya dengan baik, silahkan kembali ke Progate
dan pelajari lagi.
Dengan mengulangnya akan membuat Anda semakin terbiasa
dengan penulisan codingan HTML&CSS!
Apa yang akan Anda pelajari
Terdapat 5 bab pada materi ini.
1. Dasar-dasar tambahan HTML

2. Dasar-dasar tambahan CSS
3. Struktur dokumen menggunakan HTML
4. Menampilkan Multimedia menggunakan HTML
5. Style Web Pages menggunakan CSS
Materi-materi tersebut akan memberikan Anda tambahan

pengetahuan dan tips yang belum terdapat di pelajaran
Progate. Sekali lagi, hal yang sudah Anda pelajari cukup untuk
membangun sebuah halaman web tetapi akan lebih baik lagi
jika kita dapat skill lebih!!
Bagaimana belajarnya
Setiap slide dalam materi ini pada dasarnya memiliki deskripsi,

contoh code, dan hasil (tampilannya di browser). Berikut
adalah langkah-langkah yang perlu Anda lakukan.
1. Baca deskripsinya
2. Periksa contoh code dan hasilnya
3. Tulis code di local environment Anda
4. Cobalah untuk mengubah dan otak-atik beberapa code
untuk melihat perbedaan
5. Gunakanlah pembelajaran-pembelajaran di materi ini untuk
mendapatkan sertifikasi Microsoft 98-383
Karena banyak hal yang harus Anda pelajari di materi ini, Anda
tidak perlu terburu-buru. Santai saja dan nikmati prosesnya!!
1. Dasar-dasar HTML
Gambaran bab ini
Pada pelajaran di Progate, Anda sudah mempelajari

dasar-dasar HTML seperti DOCTYPE declaration, <head> dan
<body> tags, penulisan sintaks yang baik dan benar, dan
lain-lain.
Pada bab ini, Anda akan mempelajari tag-tag tambahan atau

pengaturan seperti berikut.
1. Tag <script> dan <noscript>
2. Tag <style>
3. Pengaturan tambahan pada tag <meta>
1. Tag <script> dan <noscript>
Tag <script> digunakan untuk menerapkan code

JavaScript(JS) ke halaman Anda. Anda tidak perlu paham lebih
jauh mengenai JS sekarang, tetapi terkadang JS
dikombinasikan dengan HMTL&CSS agar website lebih
dinamis.
Terdapat 2 cara menggunakan tag <script> :

1. Dilekatkan dengan code JS secara langsung
2. Membaca sebuah file eksternal JS
Ayo cek contoh pada beberapa slide berikutnya dan kami

merekomendasikan Anda untuk benar-benar mengetik contoh
code pada local environment supaya lebih paham proses
kerjanya.
Contoh tag <script>
Pertama-tama, coba lihat hasil dari contoh code. Jika code

JavaScript pada tag <script> bekerja dengan baik, muncul
popup seperti di gambar berikut.
Contoh tag <script>
1. Melekatkan code JS secara langsung pada tag <script>.

( alert() pada baris 10 adalah code JS.)
Contoh tag <script>
2. Membaca file eksternal JS (script.js).

Rangkuman dari tag <script>
Seperti yang sudah dijelaskan, terdapat 2 cara menggunakan

tag <script>namun perlu dicatat bahwa menggunakan file-file
eksternal lebih umum dilakukan karena:
○ Ketika Anda mengetik banyak code JS dan tercampur
dengan code HTML, semakin lama akan sulit membacanya.
○ Ketika Anda menggunakan file-file yang terpisah, Anda hanya
harus mengecek file JS jika ingin mengubah code JS dan
mudah menemukan mana yang harus diubah.
○ Jalan dengan melekatkan secara langsung akan bekerja
dengan baik hanya jika Anda ingin menambahkan beberapa
baris code JS.
Tag <noscript>
Sekarang Anda mengerti bagaimana menggunakan JS pada

file HTML. Namun, Anda juga perlu mengetahui fakta bahwa
pada beberapa kasus, code JS tidak bekerja dengan
sempurna.
Pada saat code JS dijalankan pada browser, kadang-kadang

tidak bisa karena alasan-alasan berikut.
○ Browser terlalu usang/jadul untuk menjalankan JS
○ Pengguna menonaktifkan code JS pada pengaturan
browser.
code di dalam tag <noscript> dijalankan pada situasi di atas.

Mari lihat contoh pada slide berikutnya.
Contoh tag <noscript>
Seperti yang Anda lihat, walaupun code JS diketik pada baris

9, popup tidak muncul. Sebaliknya, karakter tag <noscript>
yang muncul di halaman Anda.
(* Untuk mengecek ini pada local environment, Anda perlu menonaktifkan
JS pada pengaturan browser.)
2. Tag <style>
Pada pelajaran di Progate, Anda telah mengetik code CSS

menggunakan file eksternal (stylesheet.css). Tetapi
dimungkinkan untuk mengetik code pada file html
menggunakan tag <style> tag seperti tag <script> yang
dijelaskan pada bab ini.
Rangkuman tag <style>
Ketika Anda membangun sebuah website, cara paling umum

untuk menggunakan file eksternal untuk menambahkan code
CSS seperti yang Anda pelajari di Progate, tetapi kadangkala
lebih mudah menggunakan tag <style>.
○ Saat sebuah halaman web sangat sederhana dan kecil,

berlebihan jika menambahkan file eksternal.
○ Saat Anda lupa bagaimana properti CSS bekerja, Anda dapat

mengeceknya dengan mudah dengan mengetik di dalam tag
<style>. Dengan begitu, Anda hanya harus mengetik
beberapa baris daripada “membuat file” -> “menambahkan
link di file html” -> “mengetik code CSS pada file eksternal”.
3. Pengaturan tambahan pada tag <meta>
Anda telah menggunakan tag <meta> seperti <meta

charset=”utf-8”> dan <meta name=”viewport”...> pada
pelajaran di Progate.
Pengaturan pada tag <meta> selalu ditambahkan pada elemen

<head> dan mereka adalah metadata yang mana tidak selalu
diperlukan dan tidak ditampilkan pada halaman tetapi
digunakan oleh browser, mesin pencarian, dsb.
Terdapat pengaturan lain yang dapat Anda tambahkan pada
tag <meta>:
■ keywords
■ description
■ author
■ ...
Contoh pengaturan tambahan pada tag <meta>
● keywords
○ Anda dapat mengatur kata kunci untuk mesin pencarian.
● description
○ Anda dapat mengatur deskripsi halaman Anda dan
ditampilkan pada hasil pencarian sebagai cuplikan.
● author
○ Anda dapat mengatur pemilik halaman tersebut.
Akhir bab ini
Slide ini merupakan slide terakhir pada bab ini!
Terkait dengan dasar-dasar HMTL, Anda telah belajar banyak

di Progate namun kami berharap Anda dapat mempelajari
pengetahuan lebih di sini.
Meskipun Anda bisa membuat sebuah halaman web tanpa

pengetahuan yang ada di sini, Anda sekarang memiliki
pemahaman lebih dalam bagaimana code JS bekerja, cara
alternatif menambahkan CSS dan pengaturan lain pada tag
<meta>.
Mari lanjut ke bab 2!!

2. Dasar-dasar CSS
Gambaran bab ini
Pada bab ini, Anda akan mempelajari pengetahuan tambahan

pada CSS sebagai berikut.
1: 3 cara menambahkan CSS (external, internal dan inline)
2: CSS selectors dan pseudo-classes
3: Re-using dan testing rules

1. 3 cara menambahkan CSS
Terdapat 3 cara menambahkan CSS, yakni “inline”, “internal”

dan “external”. Mari lihat perbedaannya!
1. External CSS:
○ Mendefinisikan CSS pada file eksternal seperti
“stylesheet.css” seperti di pelajaran Progate.
2. Internal CSS:
○ Mendefinisikan CSS pada file HTML file menggunakan
tag <style> pada elemen <head> seperti pada bab 1.
3. Inline CSS:
○ Mendefinisikan CSS pada atribut “style” pada setiap
elemen.
Contoh inline CSS
Karena cara “inline” baru bagi Anda, ayo lihat contoh berikut!
Dengan cara ini, Anda dapat menambahkan code CSS pada
setiap elemen menggunakan atribut “style”.
Kapan harus menggunakan 3 cara tersebut
Sekarang Anda mengerti 3 cara menambahkan CSS tetapi apa

yang penting di sini adalah bagaimana penggunaannya
masing-masing!
● Pada banyak situasi, “external CSS” adalah hal pertama

yang harus Anda pikirkan karena mengetik CSS hanya pada
file CSS membuat code Anda menjadi simpel dan mudah
dibaca.
● Di samping itu, Anda dapat menggunakan cara lain ketika
halaman web sangat sederhana dan sedikit untuk beberapa
alasan seperti yang terdapat pada slide rangkuman dari tag
<style> pada bab 1.
● Meskipun jumlah code yang digunakan sedikit, bisa jadi sangat
panjang jika Anda mengetik semuanya di dalam tag <style>.
Pada kasus ini gunakan cara “inline”.
Prioritas CSS yang diaplikasikan pada halaman web
Pada dasarnya, menggabungkan beberapa cara pada code

Anda tidak disarankan karena akan membuat code Anda
menjadi rumit dan kehilangan keuntungan external CSS.
Namun Anda harus ingat apa yang akan terjadi jika Anda
menggabungkan beberapa cara.
Ayo lihat contoh pada beberapa slide berikutnya!

Saat inline CSS digabung dengan cara lain
Inline CSS memiliki prioritas tertinggi. Pada code sampel di

bawah ini, CSS untuk elemen <h1> ditambahkan pada 3 cara
tetapi inline CSS akhirnya diaplikasikan.
Kapan internal CSS dan external css are digabung
Sekarang sudah jelas bahwa pada inline CSS memiliki prioritas

tertinggi namun apa yang akan terjadi jika internal dan external
CSS digabung?
Ini poin kuncinya:

● Sebenarnya, internal dan external CSS memiliki prioritas
yang sama tetapi hanya 1 yang dapat diaplikasikan.
● Ini dapat diputuskan tergantung dari tag <style> dan tag

<link>.
Ayo lihat contoh pada slide selanjutnya!

Ketika internal CSS dan external css digabung
Karena code CSS dibaca dari atas ke bawah, bagian terakhir

menimpa bagian yang sudah ada sebelumnya. Pada contoh di
bawah ini, external CSS diterapkan karena tag <link> diketik
setelah tag <style>.
Rangkuman prioritas CSS
Berikut rangkuman prioritas CSS.
1. Inline CSS
2. External / Internal CSS (tergantung posisi)
3. Browser default (ketika tidak ada css yang ditambahkan)
Sekali lagi, menggabungkan beberapa cara tidak disarankan

tetapi penting untuk mengetahui bagaimana CSS bekerja.
Pada slide sebelumnya, hanya 1 contoh yang ditampilkan

namun mari mencoba mengubah code untuk latihan Anda di
mana internal CSS yang diterapkan!!
2. CSS selectors dan pseudo-classes
Untuk menambahkan CSS ke elemen HTML yang spesifik,

selectors dibutuhkan dan Anda telah menggunakan class
untuk hal tersebut.
Di sini, Anda akan mempelajari cara lain mengatur selectors,

yakni “id”.
Pertama tama, ayo lihat bagaimana menggunakan “id” pada

slide berikutnya!
id selector
Seperti yang Anda lihat pada contoh, Anda bisa menerapkan

CSS ke elemen menggunakan “id”. Perlu dicatat bahwa Anda
perlu menggunakan hash(#) untuk menentukan sebuah elemen
menggunakan dot(.) untuk “class” selectors.
Perbedaan antara id dan class
Id dan class keduanya dapat digunakan untuk menambahkan

CSS ke elemen html tetapi apa perbedaan di antaranya selain
syntaxes?
● id
○ Digunakan untuk menentukan unique id name dan id name
yang sama tidak dapat digunakan pada sebuah dokumen
HTML.
● class
○ Class yang sama dapat digunakan beberapa kali.
Perbedaan antara id dan class
Berikut code simpel dari halaman web sederhana. Karena

“header”, “main-contents” dan “footer” merupakan unique
sections, id dapat digunakan. Namun “title” digunakan pada
banyak bagian, jadi class harus digunakan.
Keuntungan dan kekurangan dari id selector
Sekarang Anda memahami perbedaan antara id dan class, tetapi

Anda tidak harus selalu menggunakan id. Sebenarnya, umum untuk
menggunakan class selectors saja tanpa mencampurkan keduanya.
Keuntungan menggunakan id
● Anda dapat dengan jelas menampilkan bahwa menggunakan id
berarti elemen-elemen hanya digunakan pada halaman html, di
mana akan membuat code Anda mudah dibaca.
Kekurangan menggunakan id
● Sebenarnya, prioritas CSS dari id lebih tinggi dibandingkan class.
Seiring dengan code Anda yang semakin banyak, akan sulit untuk
menemukan CSS mana yang diterapkan.
● Meskipun Anda menggunakan “id” karena unik pada awalnya, CSS
yang sama akan berakhir digunakan pada bagian lain sejalan dengan
Anda menambahkan code baru. Pada akhirnya, id harus diganti
dengan class.
Pseudo-classes
Sebuah “pseudo-class” digunakan untuk menerapkan CSS untuk

keadaan tertentu dari sebuah elemen seperti :hover dan :active.
Seperti yang Anda pelajari di Progate, CSS spesifik dapat
ditambahkan dengan :hover saja ketika sebuah kursor terdapat
pada sebuah elemen. Mari lihat tipe lain dari pseudo-classes.
● :link CSS spesifik dapat ditambahkan pada link yang tidak

dikunjungi.
● :visited CSS spesifik dapat ditambahkan pada link yang
dikunjungi.
● :first-child CSS spesifik dapat ditambahkan pada elemen
pertama di dalam parent element.
Terdapat lebih banyak lagi pseudo-classes tetapi tidak mungkin

menjelaskan semua pada materi ini. Mohon cari tahu mengenai
“pseudo-class” jika Anda berminat!
:link
:link memungkinkan Anda untuk menerapkan sebuah style

enables pada link yang tidak dikunjungi.
Meskipun default color dari link yang tidak dikunjungi berwarna
biru, Anda dapat menggantinya ke warna yang berbeda seperti
di bawah ini.
:visited
:visited memungkinkan Anda untuk menerapkan style ke link

yang dikunjungi.
Meskipun default color yang dari link yang dikunjungi berwarna
ungu, Anda dapat menggantinya ke warna seperti di bawah ini.
unvisited visited
:first-child
:first-child di sini agak sedikit berbeda dari yang sebelumnya

dijelaskan pada bab ini. Dia dapat menambahkan CSS pada
first child dari sebuah elemen yang ditampilkan di bawah ini.
Jika Anda menggunakan :last-child, Anda dapat
menambahkan CSS ke last child dari sebuah elemen.
3. Reusing dan testing rules
Pada bagian ini, Anda akan mempelajari pengetahuan lanjutan

dan tips bagaimana mengetik code dengan lebih baik dan
membangun halaman web yang lebih bagus.
● Reusing (menggunakan ulang) rules

● Font yang aman digunakan untuk web
● Testing pada beberapa browser sebelum mempublikasikan
website Anda
Reusing rules
Anda telah mempelajari perbedaan id dan class, di mana

classes dapat digunakan berulang kali. Ini merupakan
kebiasaan yang baik untuk menentukan style umum pada
sebuah class dan menggunakannya kembali pada beberapa
bagian, yang memungkinkan Anda untuk menghindari
pengetikan code yang sama di beberapa tempat dan tetap
membuat website Anda konsisten.
Sebenarnya Anda telah mendapatkan contoh yang bagus di

pelajaran Progate, lho!
Ayo lihat contoh pada slide berikutnya!

Reusing rules
Ayo pergi ke latihan Progate di bawah ini!

● https://progate.com/html/study/2/18
Seperti yang Anda lihat, terdapat container class yang

mendefinisikan width, padding dan margin, dan hal ini
digunakan pada 5 bagian di index.html. Hal ini merupakan
style yang umum untuk setiap section dan class
memungkinkan Anda untuk menerapkan layout yang konsisten
tanpa tambahan code apapun.
Jenis huruf yang aman untuk web
Font yang aman untuk web dapat digunakan pada banyak

sistem operasi dan browser.
Jika Anda menggunakan browser yang tidak mendukung font

yang ingin Anda gunakan, tampilan website akan menjadi
berbeda dari yang diharapkan.
Jadi akan lebih baik menggunakan font yang aman digunakan

untuk website Anda.
Web safe fonts
Berikut daftar font populer yang biasa digunakan untuk web.

● sans-serif
○ Arial
○ Verdana
○ Helvetica
○ Tahoma
○ Trebuchet MS
● serif
○ Times New Roman
○ Georgia
○ Garamond
● Monospace
○ Courier New
Testing pada beberapa browser sebelum mempublikasikan website Anda
Terakhir, ayo belajar mengenai testing pada beberapa browser.

Karena browser yang berbeda memiliki level berbeda yang
mendukung font, properti CSS dan fitur teknologi lainnya,
penting untuk memastikan jika website Anda bekerja dengan
baik pada kebanyakan browser, termasuk beberapa versi yang
agak lama.
Berikut daftar browser yang setidaknya harus Anda tes.

○ Chrome
○ Safari
○ Firefox
○ Edge
○ Opera
Akhir bab ini
Slide ini merupakan slide terakhir bab ini!
Bab ini mengenalkan Anda teknik dan pengetahuan CSS

tambahan.
Memahami bagaimana CSS bekerja itu penting untuk

mengetikkan code yang lebih baik dan melakukan debug
ketika layout berbeda dari apa yang Anda harapkan.
Juga efisiensi dan konsistensi adalah hal esensial di dalam

CSS. Mohon gunakan reusing dan testing rules ketika
membangun halaman web Anda!
3. Struktur Dokumen
Menggunakan HTML
Overview Bab 3
Di bab ini, Anda akan mempelajar lebih lanjut beberapa tag

HTML yang dapat digunakan untuk membuat struktur
dokumen HTML lebih baik.
Berikut yang akan Anda pelajari pada bab ini!

1. Beberapa tag tambahan untuk mengatur konten (table
tags, br, hr, ol)
2. Tag Semantic
3. Menambahkan navigation (links)
4. Element Form
1. Tag tambahan untuk mengelola kontan
Anda sudah mempelajari banyak jenis tag untuk mengelola

konten seperti tag <div>, <span> dan <ul>. Di bagian ini, kami
akan memperkenalkan tag berikut:
・<table>
・<br>/<hr>
・<ol>
Tag <table>
Dengan tag <table>, Anda dapat membuat tabel seperti

gambar dibawah ini:
Untuk membuat sebuah tabel, Anda juga perlu menggunakan

tag <th>, <tr> dan <td>. Mari kita lihat contoh code di slide
berikutnya!
Tag <table>
Di tag <table>, Anda perlu

menambahkan <tr> untuk membuat
baris dan di dalam tag <tr>, Anda dapat
menambahkan <th> untuk sebuah
header dan <td> untuk konten normal.
Sebagai informasi,
● <tr> artinya “table row”.
● <th> artinya “table header”.
● <td> artinya “table data”.
Secara default, text di dalam <th> adalah

bold and berposisi di tengah, dan text di
dalam <td> adalah normal and berposisi
di kiri.
Properti “border-collapse”
Seperti yang Anda dapat lihat dibawah, ada dua border di

sekitar tabel. Untuk membuatnya hanya satu border, Anda
dapat menggunakan properti border-collapse seperti
border-collapse: collapse;.
Atribut “colspan”
Untuk span (atau merge) sebuah cell ke beberapa kolom, Anda

dapat menggunakan atribut colspan seperti contoh dibawah
ini:
Atribut “rowspan”
Untuk span (atau merge) sebuah cell ke beberapa baris,

Atribut rowspan dapat digunakan seperti contoh dibawah ini:
Tag <br> dan <hr>
Tag <br> memasukkan sebuah spasi (line break), dan tag <hr>
memasukkan spasi (line break) dengan menampilkan sebuah
garis horizontal, seperti contoh berikut:
Tag <ol>
Tag <ol> sangat mirip penggunaannya dengan tag <ul>. Tag

<ol> digunakan untuk membuat sebuah daftar (list), baik itu
dalam urutan angka maupun secara alfabet. Anda dapat
menetapkan atribut seperti reversed, start dan type untuk
mengubah tampilan urutan yang Anda inginkan:
2. Element Semantic
Element Semantic artinya adalah element dengan penamaan

yang lebih jelas. Element Semantic secara jelas mendeskripsikan
arti dan struktur, seperti tag <header> dan <footer> yang Anda
sudah pelajari di HTML&CSS studi 2 di Progate.
● Contoh tag non-semantic: <div>, <span>

● Contoh tag semantic: <header>, <footer> and <form>
Walaupun Anda bisa membuat sebuah halaman web hanya

dengan menggunakan tag <div>, tapi tag itu tidak memberikan
informasi tentang apa isi kontennya. Tag Semantic membuat
coding dan struktur halaman web Anda lebih mudah dimengerti
dengan penamaannya yang jelas.
2. Tag Semantic
Di bagian ini, Anda akan mempelajari tag-tag semantic sebagai

berikut:
■ <nav>
■ <section>
■ <article>
■ <aside>
■ <details>
■ <summary>
■ <figure>
■ <caption>
Tag <nav> Nav
Tag <nav> mendefinisikan sekumpulan navigation links. Tag ini

digunakan untuk menampilkan bahwa bagian didalam tag
tersebut adalah bagian besar / utama. Anda tidak perlu
menggunakan <nav> untuk setiap link.
Tag <section>
Tag <section> mendefinisikan bagian dari sebuah dokumen.

Misalnya dalam sebuah halaman web, terdapat bagian-bagian
seperti “Our Service”, “price”,”FAQ” dan sebagainya. Anda dapat
melakukan hal yang sama dengan menggunakan tag <div> tapi
Anda akan lebih mudah mengerti dimana setiap bagian mulai
dalam codingan Anda saat menggunakan tag <section> tags.
Tag <article>
Tag <article> mendefinisikan konten yang independen

(self-contained) seperti sebuah postingan blog dan berita.
Tag <aside>
Tag <aside> mendefinisikan sebuah konten yang tidak

berhubungan langsung dengan konten utama, seperti contoh
dibawah.
Tag <details> dan <summary>
Tag <details> membuat detail tambahan dimana pengguna

dapat buka / tutup. Tag <summary> digunakan didalam tag
<details> untuk memberikannya sebuah judul.
Tag <figure>
Tag <figure> menspesifikasikan jenis konten seperti foto oatau

sebuah ilustrasi. Anda dapat menambahkan caption dengan
menggunakan tag <figcaption> tag.
* Anda harus menyiapkan file image sendiri saat ingin mencoba membuat
codingan bawah di environment lokal Anda.
Tag <caption>
Tag <caption> digunakan untuk caption sebuah tabel. Tag ini

harus dituliskan setelah tag <table>.
3. Menambahkan Navigation
Beberapa cara untuk menggunakan navigations (links) akan

diperkenalkan di bagian ini. Kita akan membahas hal-hal
berikut!
● Link imiage
● Atribut “target”
● Transisi di halaman yang sama
● Link Relative / absolute
● Hierarki dalam pengaturan folder Anda
Link Image
Anda sudah menguasai cara membuat link text menggunakan

tag <a>. Tapi, sebenarnya Anda juga dapat membuat link
image!
Di contoh dibawah ini, dengan meng-klik gambar logo Progate

akan membawa Anda ke “https://progate.com”
Atribut “target” didalam tag <a>
Dengan menambahkan atribut “target” didalam tag <a> , ini

memungkinkan Anda untuk mengatur bagaimana link tersebut
akan terbuka.
Jika target=”_blank”, ini akan membuat link terbuka di window

/ tab baru
Beberapa target lain yang dapat Anda gunakan di atribut

target:
● _self membuka link di window / tab yang sama (default)
● frame_name membuka link di sebuah iframe
Dalam hal frame_name, Anda akan mempelajari konsep in

lebih dalam lagi di bab 4.
Transisi di halaman yang sama
Saat halaman web Anda terlalu panjang, akan lebih nyaman

bagi pengguna jika ada link-link yang membawa mereka ke
bagian-bagian tertentu pada halaman web Anda.
Ada 2 langkah untuk melakukan hal tersebut:

1. Tambahkan atribut id ke element yang Anda ingin ubah
menjadi link.
2. Tambahkan tag <a> dengan href=”#id_name”. Pastikan
untuk menggunakan hash (#) di awal.
Mari kita lihat contoh bagaimana cara kerja transisi di slide

berikutnya!
Contoh link-link di halaman web yang sama
Link Absolute dan Relative
Saat Anda menentukan link, terdapat 2 cara menulis codingannya:
● Absolute links (atau absolute paths)

○ Ini adalah cara yang paling lumrah digunakan, dan cukup
memasukkan URL
○ Contoh: <a href=”https://progate.com/”>
● Relative links (atau relative paths)

○ Ini mengarahkan ke suatu lokasi spesifik didalam struktur
folder Anda.
○ Contoh: <a href=”/image/progate_logo.png”>
Mari kita pelajar mengenai struktur folder dan bagaimana

menggunakan relative links untuk mengarahkan ke suatu lokasi
spesifik!
Hierarki Folder
Saat Anda ingin mengelola folder Anda dan memisahkan file-fle

ke dalam folder yang berbeda, Anda perlu menguasai cara
relative links bekerja. Di contoh dibawah ini, ada folder mypage
dan fil index.html, folder css dan images ada didalamnya. Dan
beberapa file dan folder berada didalam folder css dan images.
Hierarki Folder (2)
Seperti yang dapat Anda lihat di contoh berikut, ada beberapa

tipe sintaks untuk link:
1. href="./css/stylesheet.css"
2. src="images/progate_logo.png"
3. src="../mypage/images/others/ninjaken.png"
Hierarki Folder (3)
Sintaks ./ dan tanpa simbol artinya mereka mengarahkan ke

lokasi yang sama di dalam file(index.html), sedangkan ../ artinya
1 level keatas dari file yang sekarang.
Mari kita bandingkan antara path

dengan struktur folder!
1. href="./css/stylesheet.css"
2. src="images/progate_logo.png"
3. src="../mypage/images/others/ninj
aken.png"
Kami sangat menyarankan Anda untuk mencoba hal ini di

environment local Anda!
Element Form
Di bagian ini, Anda akan mendalami tentang element <form>.

Anda sudah menguasai tag <input> dan <textarea> di Progate
tapi masih banyak hal lain yang dapat anda pelajari dan
gunakan!
● Atribut “action” dan “method”

● Atribut-atribut untuk <input>
● Tag <label> dan <button>
● Tag <select> dan <option>
● Tag <output>
● Tag <datalist>
● Tag <fieldset>
Atribut “action” dan “method”
Di HTML&CSS studi 1 di Progate, Anda hanya mempelajari

cara membuat layout dari sebuah formulir, tapi Anda perlu
menggunakan attribut action dan method untuk mengirim data
yang diisi oleh pengguna.
Lihatlah slide di link berikut yang menjelaskan mengenai atribut

ini dengan detail:
https://progate.com/php/study/1/20#/48
Sebagai catatan, data akan ditampilkan saat menggunakan

method get, sedangkan jika data nya sensitif, pastikan untuk
menggunakan post.
Atribut untuk <input>
Sebelumnya, Anda sudah menguasai <input type=”submit”> di

Progate. Ada hal-hal lain yang Anda dapat spesifikasikan di atribut
type. Berikut adalah yang sering digunakan oleh web developer pada
umumnya:
● text : sebuah field teks satu baris (default)
● password : field untuk kata sandi dimana karakter inputnya akan
di tutupi (masking, seperti P********)
● radio : Tombol radio dimana pengguna dapat melakukan pilihan
dari berbagai opsi
● checkbox : Box yang dapat dicentang untuk memilih lebih dari
satu opsi
● date: field untuk tanggal
● file : field untuk mengunggah sebuah file
● button: sebuah tombol
Cobalah hal-hal diatas secara mandiri di environment local Anda agar

Anda dapat melihat langsung cara kerja mereka!
Tag <label> dan <button>
Untuk tag-tag yang berhubungan dengan formulir, sangat

direkomendasikan untuk mengggunakan tag semantic seperti
<label> dan <button> untuk aksesibilitas yang lebih baik.
● Tag <label>
○ Atribut for di dalam tag ini harus sama persisi dengan id dari
element didalamnya.
● Tag <button>
○ Dengan tag ini, Anda dapat memasukkan text, jangan lupa
untuk gunakan atribut value saat menggunakan tag <input>.
Tag <select> dan <option>
Untuk membuat drop-down list, dapat menggunakan tag

<select> dan <option>. Jika ingin benar-benar mengirim data
pilihan, atribut name dan value dibutuhkan, seperti contoh
dibawah ini:
Tag <output>
Anda dapat melakukan kalkulasi dan menampilkan hasilnya dengan

menggunakan tag <output> seperti contoh di bawah. Namun, code JS
dibutuhkan agar bekerja dengan benar. Anda tidak harus memahami
secara mendalam saat ini, tapi contoh code dan proses membuat
codingan kalkulasi akan dijelaskan di slide berikutnya!
Tag <output> (2)
1. Buatlah field <input> dan berikan id dan value. value=0 artinya angka
awal adalah 0 dan akan berubah saat ada nilai baru yang di-input di
formulir.
2. Buat element <output> dengan atribut name dan for. Spesifikasikan
id dari form <input> didalam atribut for.
3. Gunakan code JS (oninput) di tag form. Perbarui nilai dari element
<output> dengan menggunakan “result.value=xxx” ( result dalam
kasus ini artinya nilai dari atribut name dari tag <output>). Sehingga,
penghitungannya adalah number1.value + number2.value tapi
method parseInt dibutukan untuk menjalankan kalkulasinya.
Tag <datalist>
Tag <datalist> dapat digunakan untuk membuat daftar pilihan.

Bedanya dengan tag <select> adalah Anda dapat mengetik
karakter-karakternya didalam field input dan fitur
auto-completion tersedia secara otomatis. id dari element
<datalist> harus sama dengan atribut list dari tag <input>.
Tag <fieldset>
Tag <fieldset> digunakan untuk mengelompokkan

element-element yang berhubungan dalam sebuah formulir.
Tag <legend> menambahkan caption pada element-element
fieldset.
Akhir dari Bab
Ini adalah slide terakhir di Bab ini!
Bab ini memperkenalkan Anda skill-skill HTML yang lebih

advanced dibanding apa yang telah Anda pelajari di Progate
dan Bab 1.
Walapun sekarang Anda belum membutuhkannya, pasti Anda

akan kelak menggunakannya, jadi pastikan untuk selalu ngulik
codingan dan proyek Anda agar makin fasih dalam
menggunakan ilmu-ilmu HTML yang lebih advanced ini!
4. Menampilkan berbagai jenis
multimedia menggunakan HTML
Overview Bab Ini
Pada bab ini, Anda akan belajar cara menampilkan video atau
media jenisi lain di halaman web Anda
● Berikut adalah hal-hal yang akan kita bahas:

○ Tag <video>
○ Tag <audio>
○ Tag <track>
○ Tag <iframe>
Tag <video>
Sesuai dengan namanya, tag <video> digunakan untuk embed sebuah file video
● Atribut control di tag <video> memungkinkan pengguna untuk mengatur

interaksi dengan video seperti “start”, “stop”, “skip” dan sebagainya.
● Tag <source> menspesifikasikan asal lokasi (source) videonya. Anda
dapat men-setting berbagai jenis format video dengan menggunakan
beberapa tag <source>, sehingga browser akan memilih format yang
disupport secara otomatis.
● Text didalam tag <video> hanya akan ditampilkan saat browser tidak
mensupport jenis tag <video> tertentu.
Tag <video>
Selain atribut controls, ada juga atribut-atribut seperti

autoplay, muted dan loop yang Anda dapat gunakan.
Beberapa browswer tidak memperbolehkan autoplay, namun
muted autoplay dapat bekerja dengan aman. Menggunakan
atribut loop akan membuat video memutar ulang saat sudah
habis.
Tag <audio>
Tag <audio> digunakan untuk menampilkan file audio di

sebuah halaman web. Penggunaannya sangat mirip dengan
tag <video>.
● Anda dapat menggunakan atribut-atribut yang sama seperti

controls, autoplay, muted dan loop.
● Browser akan memilih secara otomatis jenis file audio yang
disupport, berdasarkan element <source>.
● Text di tag <audio> ditampilkan jika browswer tidak
mensupport tag <audio>.
Tag <track>
Tag <track> dapat digunakan untuk menampilkan text seperti

subtitle dalam sebuah video.
● Pertama, Anda butuh menspesifikasikan jenis text track

menggunakan atribut kind. Nilai seperti “subtitles”,
“captions”, “descriptions” dan seterusnya dapat
dispesifikasikan.
● Atribut srclang diwajibkan saat nilai dari atribut kind adalah
“subtitles”.
Tag <iframe>
Tag <iframe> digunakan untuk menampilkan sebuah halaman

web didalam halaman web! Mungkin Anda sering melihat
video youtube atau google map yang di embed disebuah
website. Ini menggunakan tag <iframe>.
URLs untuk iframe
Tidak semua website memperbolehkan koneksi dari iframe,

namun beberapa seperti google maps dan YouTube
menyediakan URL untuk iframe. Contohnya dalam google
map, ada opsi untuk “share” -> “Embed a map” dan Anda
akan mendapatkan code HTMLnya untuk diembed kedalam
website Anda!
Contoh code iframe
Format basic penulisan code untuk tag iframe:

<iframe src=”URL” title=”description”></iframe>
Seperti yang dijelaskan di slide sebelumnya, di sebagian besar

kasus, Anda akan bisa mendapatkan code HTML dari
website-website lain. Contoh dibawah ini, code iframe didapatkan
dari google maps dan YouTube.
Menambahkan target iframe untuk link
Atribut target dibahas di bab 3, dan sebuah nama iframe dapat

diatur untuk atribut tersebut. Contoh dibawah dimana iframe
dinamakan “iframe_example” pada atribut name dan
digunakan di atribut target pada link tersebut. Saat Anda
mengklik link tersebut, iframe akan terbuka.
Akhir dari Bab ini
Ini adalah slide terakhir dari Bab ini!
Bab ini memperkenalkan Anda cara melakukan embed

berbagai jenis konten multimedia dan concept iframe.
Ilmu yang Anda pelajari disini dapat digunakan untuk membuat

website Anda lebih interaktif karena banyaknya jenis media
yang dapat Anda tampilkan.
Mari kita lanjutkan ke bab terakhir dari materi ini!

5. Style Web Pages menggunakan
CSS
Overview Bab ini
Pada bab ini, Anda akan belajar lebih banyak lagi mengenai
beberapa properti CSS dan layout responsif.
● Berikut hal-hal yang akan Anda pelajari:

1. Properti-properti CSS tambahan
○ Content positioning (overflow, visibility)
○ Text formatting (font-style, font-weight...)
2. Layout responsif
○ Units of measurement
○ Frameworks
1. Properti CSS untuk memposisikan konten
Anda sudah mempelajari banyak properti CSS yang

berhubungan dengan content positioning seperti float,
position: relative dan position: absolute.
Disini, Anda akan mempelajari 2 tambahan properti CSS:

1. Properti overflow
2. Properti visibility
Properti overflow
Properti overflow digunakan saat konten terlalu panjang untuk

muat di sebuah area, seperti contoh di bawah ini:
Properti overflow
There are mainly 3 values which are frequently used for the
overflow property.
❏ overflow: visible;
❏ overflow: hidden;
❏ overflow: scroll;
Let’s see the examples when the values above are added!
overflow: visible;
Dengan overflow: visible; , sebenarnya tidak akan ada yang

berubah. Nilai “visible” adalah nilai default dari properti
overflow, artinya saat tidak ada yang dispesifikasikan,
overflow: visible; berlaku secara otomatis.
overflow: hidden;
Dengan overflow: hidden;, bagian konten yang melebihi area

akan disembunyikan.
Perlu dicatat bahwa properti overflow hanya dapat digunakan
untuk element block dengan height (dalam contoh ini, element
<div> memiliki height 100px).
overflow: scroll;
Dengan overflow: scroll;, bagian konten yang melebihi area

tidak hanya disembunyikan, tapi juga akan ada fungsi scroll
untuk pengguna yang ditampilkan.
Properti visibility
Property visibility menspesifikasikan apakah sebuah element

ditampilkan atau tidak. Dengan visibility: hidden, Anda dapat
menyembunyikan sebuah element seperti contoh berikut. Nilai
defaultnya adalah visibility: visible;.
Properti visibility (2)
Untuk memahami lebih dalam mengenai properti ini, mari kita

periksa perbedaan antara visibility: hidden; dan display: none;
Yang sudah Anda pelajar di Progate!
Coba ubah visibility: hidden; menjadi display: none; pada

class box2 dan lihatlah hasilnya!
2. Properti CSS untuk mengubah format text
Anda sudah menguasai berbagai jenis properti untuk

mengubah format text seperti font-family dan font-size.
Di bagian ini, Anda akan mempelajari lebih dalam mengenai:

1. font-style
2. text decoration
3. indentation
Properti font-style
Properti font-style menspesifikasikan font style pada suatu

text, seperti italic dan oblique. normal nilai default pada
properti ini.
Properti text-decoration
Seperti contoh dibawah ini, properti text-decoration

mendefinisikan ‘dekorasi’ sebuah text seperti “lines”, “styles”
dan “colors”. Anda dapat mengkombinasikan lebih dari satu
nilai untuk properti ini.
Berikutu adalah nilai-nilai yang dapat Anda gunakan:
● Lines: overline, line-through, underline
● Styles: solid, wavy, dotted, dashed, double
● Colors: apapun yang Anda inginkan
Properti text-indent
Properti text-indent menspesifikasikan indentasi pada sebuah

text block.
● Anda dapat mengunakan fixed value (seperti px) atau
relative values (seperti %).
● Saat value negative digunakan, text akan indentasi ke kiri.
● Perlu di catat bahwa Indentasi hanya berlaku di baris
pertama pada setiap text block.
3. Layout Responsif
Anda sudah menguasai layout responsif website di

HTML&CSS study 3 di Progate dan menggunakan % dan px.
Di bagian ini, Anda akan mempelajari unit lain yang dapat

Anda gunakan untuk layout responsif dan juga contoh
framework yang akan membuat pekerjaan Anda lebih efisien.
Bagian ini adalah bagian terakhir pada materi ini!
Ayo Semangat!!
Units of measurement
Di banyak properti CSS, Anda sudah menggunakan px dan %

,dan % lebih sering digunakan untuk layout responsif.
Jenis unit seperti px juga disebut / dikategorikan sebagai

absolute lengths, sedangkan % disebut sebagai relative
lengths.
Karena banyaknya perangkat dengan ukuran layar yang

berbeda-beda, relative lengths jauh lebih sering digunakan.
Mari kita pelajar berbagai jenis unit relative lengths!

em
Dengan em, Anda dapat menspesifikasikan panjang sesuai dengan

font-size pada element tertentu. Hal ini sangat berguna saat
pengguna mengubah settingan browser seperti membuat tampilan
lebih besar atau kecil. CSSnya berdasarkan properti font-size akan
dioptimisasi secara otomatis. Mari kita lihat contoh code dibawah ini!
● line-height dari element <h1> adalah 30px * 1.5 = 45px;

● Saat element tidak memiliki font-size, em akan berlaku berdasarkan
parent element.
■ font-size dari element pertama <p> adalah 20px * 2 = 40px.
■ font-size dari element kedua <p> adalah 20px * 0.8 = 16px.
rem
Dengan rem, Anda dapat menspesifikasikan panjang sesuai diengan

font-size pada root element (<html>). Karena tidak bergantung pada
parent elements, ini membuatnya lebih mudah untuk menghitung nilainya.
● Sebagai default font-size dari root element (<html>) adalah 16px, dimana
font size: 16 * 62.5% = 10px.
● Element pertama <p> adalah 30px dipengaruhi oleh fixed font size dari
parent element <div>.
● Walaupun element kedua <p> masih didalam element <div>, font size nya
adalah 10px * 1.5 = 15px.
Unit vw dan vh
Unit vw dan vh digunakan untuk menetapkan nilai relative terhadap

lebar dan tinggi (width and height) ukuran window browser.
Pada contoh code dibawai ini:

● Font size element <h2> adalah 10% dari height ukuran window browser
● Font-size element <p> adalah 10% dari lebar ukuran window browser.
Mari kita coba untuk mengubah ukuran window browser Anda dan lihat
bagaimana ukuran karakter-karakternya berubah juga!
Frameworks
Karena permintaan akan layout yang responsif meningkat, banyak

frameworks yang diciptakan sehingga pengembang tidak perlu lagi
mengetik code yang sama pada banyak proyek.
Salah satu yang paling populer adalah bootstrap.

https://getbootstrap.com/2.3.2/index.html
Frameworks
Kita tidak belajar lebih jauh mengenai frameworks pada materi ini
tetapi kami akan mengenalkan Anda keuntungan frameworks yang
menggunakan bootstrap sebagai contoh.
Inilah daftar keuntungan menggunakan bootstrap:

● Templates
● Sistem grid
● Dasar CSS untuk elemen HTML
● Komponen pre-styled
Frameworks
Bootstrap menawarkan banyak template yang bisa membantu Anda

membuat website tanpa mengetik banyak code. Anda dapat
mengeceknya di sini.
https://getbootstrap.com/2.3.2/getting-started.html#html-template
Sistem Grid
Saat Anda meluruskan konten secara horizontal, agak merepotkan

jika harus mengatur % pada setiap elemen. Sedangkan bootstrap
akan membagi layar ke dalam 12 kolom dan col-6 spans 6/12 dan
col-5 spans 5/12 pada layar secara otomatis tanpa mengetik code
CSS apapun.
Dasar CSS untuk elemen HTML
Karena banyak dasar CSS pada bootstrap, kami akan

mencontohkan hal yang sederhana. Di bawah code ini, saat Anda
ingin menggunakan teks cetak tebal pada sebuah kalimat, yang
harus Anda lakukan adalah menambahkan tag <span> dan
menambahkan font-weight: bold;. Tetapi pada bootstrap, kurungkan
teks menggunakan <strong> untuk membuatnya menjadi cetak tebal
tanpa menuliskan code CSS apapun.
Komponen Pre-styled
Seperti yang telah dipelajari pada aturan yang sudah pernah Anda
gunakan, Anda dapat mengetik lebih sedikit code dan tetap menjaga
konsistensinya jika Anda bisa menggunakan code yang sama di
banyak tempat. Pada bootstrap, terdapat banyak komponen
pre-styled dan buttons seperti contoh di bawah ini. Anda dapat terus
konsisten menggunakan buttons tanpa mengetik code CSS.
Rangkuman dari frameworks
Terdapat banyak keuntungan pada frameworks yang memungkinkan

Anda untuk membangun website dengan usaha dan waktu yang
lebih sedikit, tetapi tentu saja tidak semua website menggunakan
frameworks tersebut.
Walaupun frameworks dapat disesuaikan, terdapat batasan-batasan

dan tampilan dari website Anda seperti tipikal website yang kurang
kreatif.
(Beberapa orang mengatakan “bootstrap-like” website.)
Penting untuk memahami keuntungan dan kerugian, serta gunakan

secara tepat tergantung situasi.
Akhir bab ini
Slide ini adalah akhir bab dan juga akhir materi!!! Anda telah
melangkah sejauh ini, selamat ya!!
Materi ini mengenalkan Anda pengetahuan tambahan yang dapat

dimanfaatkan untuk website Anda termasuk tags, konkret dan
properti, serta sedikit aturan dan prinsip HTML&CSS.
Meskipun Anda tidak harus mengingat semuanya, Anda dapat buka

kembali jika membutuhkannya.
Semoga Anda dapat menikmati perjalanan coding Anda!!

Terima kasih!!

DTS HTML CSS Advanced Material - BHS

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

DTS HTML CSS Advanced Material - BHS

Diunggah oleh

Hak Cipta:

Format Tersedia

Materi HTML&CSS untuk

sertiﬁkasi Microsoft 98-383

Anda telah memiliki pengetahuan yang cukup untuk membuat

Pada materi ini, Anda mempunyai kesempatan untuk

Sebelum memulai materi ini, pastikan Anda sudah

● Pelajaran HTML&CSS di Progate

Jika Anda telah menyelesaikannya namun merasa Anda belum

Terdapat 5 bab pada materi ini.

1. Dasar-dasar tambahan HTML

Materi-materi tersebut akan memberikan Anda tambahan

Setiap slide dalam materi ini pada dasarnya memiliki deskripsi,

Pada pelajaran di Progate, Anda sudah mempelajari

Pada bab ini, Anda akan mempelajari tag-tag tambahan atau

Tag <script> digunakan untuk menerapkan code

Terdapat 2 cara menggunakan tag <script> :

Ayo cek contoh pada beberapa slide berikutnya dan kami

Pertama-tama, coba lihat hasil dari contoh code. Jika code

1. Melekatkan code JS secara langsung pada tag <script>.

2. Membaca ﬁle eksternal JS (script.js).

Seperti yang sudah dijelaskan, terdapat 2 cara menggunakan

Sekarang Anda mengerti bagaimana menggunakan JS pada

Pada saat code JS dijalankan pada browser, kadang-kadang

code di dalam tag <noscript> dijalankan pada situasi di atas.

Seperti yang Anda lihat, walaupun code JS diketik pada baris

Pada pelajaran di Progate, Anda telah mengetik code CSS

Ketika Anda membangun sebuah website, cara paling umum

○ Saat sebuah halaman web sangat sederhana dan kecil,

○ Saat Anda lupa bagaimana properti CSS bekerja, Anda dapat

Anda telah menggunakan tag <meta> seperti <meta

Pengaturan pada tag <meta> selalu ditambahkan pada elemen

Slide ini merupakan slide terakhir pada bab ini!

Terkait dengan dasar-dasar HMTL, Anda telah belajar banyak

Meskipun Anda bisa membuat sebuah halaman web tanpa

Mari lanjut ke bab 2!!

Pada bab ini, Anda akan mempelajari pengetahuan tambahan

1: 3 cara menambahkan CSS (external, internal dan inline)

2: CSS selectors dan pseudo-classes

3: Re-using dan testing rules

Terdapat 3 cara menambahkan CSS, yakni “inline”, “internal”

Sekarang Anda mengerti 3 cara menambahkan CSS tetapi apa

● Pada banyak situasi, “external CSS” adalah hal pertama

Pada dasarnya, menggabungkan beberapa cara pada code

Ayo lihat contoh pada beberapa slide berikutnya!

Inline CSS memiliki prioritas tertinggi. Pada code sampel di

Sekarang sudah jelas bahwa pada inline CSS memiliki prioritas

Ini poin kuncinya:

● Ini dapat diputuskan tergantung dari tag <style> dan tag

Ayo lihat contoh pada slide selanjutnya!

Karena code CSS dibaca dari atas ke bawah, bagian terakhir

Berikut rangkuman prioritas CSS.

Sekali lagi, menggabungkan beberapa cara tidak disarankan

Pada slide sebelumnya, hanya 1 contoh yang ditampilkan

Untuk menambahkan CSS ke elemen HTML yang spesiﬁk,

Di sini, Anda akan mempelajari cara lain mengatur selectors,

Pertama tama, ayo lihat bagaimana menggunakan “id” pada

Seperti yang Anda lihat pada contoh, Anda bisa menerapkan

Id dan class keduanya dapat digunakan untuk menambahkan

Berikut code simpel dari halaman web sederhana. Karena

Sekarang Anda memahami perbedaan antara id dan class, tetapi

Sebuah “pseudo-class” digunakan untuk menerapkan CSS untuk

● :link CSS spesiﬁk dapat ditambahkan pada link yang tidak

Terdapat lebih banyak lagi pseudo-classes tetapi tidak mungkin

:link memungkinkan Anda untuk menerapkan sebuah style

:visited memungkinkan Anda untuk menerapkan style ke link