HTML & CSS Study I

Memulai dengan HTML

1. Memulai dengan HTML
Apa itu HTML & CSS?
Sebagian besar situs web dibuat dengan bahasa yang disebut HTML dan CSS. Dengan mempelajari dua bahasa ini,
Anda akan dapat membuat situs web seperti gambar dibawah.

Cara Kerja HTML

Mari kita mulai pelajaran kita dengan HTML! Aturan pertama penulisan code HTML adalah mengapit teks
dengan tag. Tag dapat memberikan arti seperti judul atau tautan pada teks.

Tag Pembuka dan Tag Penutup

Sebagian besar element HTML memerlukan sepasang tag, tag pembuka dan tag penutup, dengan teks disisipkan di
antara keduanya. Saat menggunakan tag penutup, pastikan untuk meletakkan /.

2. Judul dan Paragraf

Tag Judul
Tag judul digunakan untuk memformat element judul. Tag ini bervariasi mulai dari <h1> hingga <h6>, <h1> menjadi
yang terbesar dan <h6> menjadi yang terkecil (※ h mewakili heading (judul)).
Tag Paragraf
Tag <p> menentukan paragraf (※ p mewakili paragraf). Teks yang diapit oleh tag seperti <h2> dan <p> dimulai di
baris baru.

Menggunakan Judul dan Paragraf

Tag <h1>...<h6> digunakan sesuai ukuran dan signifikansi judul seperti ditunjukkan di bawah. Untuk teks yang bukan
merupakan judul, gunakan tag <p>.

Komentar
Teks yang diapit oleh <!-- --> menjadi komentar. Komentar tidak ditampilkan di browser. Komentar sangat berguna
untuk menjelaskan code Anda.

3. Tautan
Tag Tautan (1)
Anda dapat dengan mudah membuat tautan dengan tag <a> (※ a mewakili anchor (penambat)). Teks dalam
tag <a> ditampilkan di browser sebagai teks tautan.

Tag Tautan (2)

Setiap tautan memiliki tujuan. Jadi, agar tautan berfungsi, Anda harus menentukan URL tujuan di
element <a> dengan menambahkan atribut href. Seperti yang ditampilkan pada gambar di sisi kiri, URL tujuan masuk
ke bagian url dari <a href="url">.

Atribut HTML
Pada HTML, Anda dapat menentukan atribut seperti href di tag pembuka (※ lihat gambar di sisi kiri).
Selalu letakkan nilai atribut dalam tanda kutip ganda ".

4. Gambar
Tag Gambar
Tag <img> digunakan untuk menampilkan gambar. Kita dapat menetapkan gambar dengan menentukan url di
atribut src seperti berikut: <img src="url">. Perhatikan bahwa tag <img> tidak memerlukan tag penutup karena tidak
ada teks yang diapit.

5. Daftar
Daftar (1)
Anda dapat membuat daftar dengan mengapit teks dengan tag <li>. Jangan khawatir, kita akan membahas
tag <ul> di slide berikutnya.
Daftar (2)
Jenis daftar akan berubah tergantung pada tag yang Anda gunakan. Dengan tag <ul> Anda dapat membuat daftar
dengan bullet. Jika element Anda "bersarang" seperti gambar dikiri bawah ini, element yang menutupi akan
menjadi induk dan element yang ditutupi akan menjadi anak-nya.

Identasi
Untuk element bersarang, praktik yang baik adalah mensejajarkan code dengan indentasi. Meskipun tidak
diperlukan, indentasi dapat memudahkan Anda untuk melihat hubungan induk-anak, terutama pada saat code Anda
sudah mulai banyak dan rumit (※ untuk membuat indentasi, tekan tombol "tab" di awal baris).

Memulai dengana CSS

6. Warna
Apa itu CSS?
CSS digunakan untuk mendesain situs web. Dengan CSS, Anda dapat mengubah hal-hal seperti warna, ukuran,
dan spasi pada element HTML. Gambar disisi kiri hanya terdiri dari HTML saja. Dengan menerapkan CSS, Anda dapat
menentukan style seperti tata letak, sesuai contoh yang ditampilkan disisi kanan.

Cara Kerja CSS

CSS ditulis dalam file terpisah dari HTML. Anda dapat menerapkan CSS ke element HTML dengan menentukan
"dimana", "apa", dan "bagaimana" Anda ingin mengubahnya. Pada contoh dibawah, CSS diterapkan ke
element <h1> ("dimana"), dan warnanya ("apa") diubah menjadi merah ("bagaimana"). Element HTML yang
ditargetkan disebut sebagai Selector.
Warna
Mari kita pelajari property color (warna)! Di CSS, warna ditentukan oleh nilai heksadesimal seperti color: #ff0000;.
Anda tidak perlu menghafal nilai heksadesimal warna tersebut, karena Anda dapat mencarinya secara online.

Syntax CSS
Ada beberapa hal yang harus diingat saat menulis CSS. Seperti HTML, Anda harus selalu mengindentasi code CSS
seperti gambar di bawah. Selain itu, perhatikan bahwa anda harus menambahkan titik dua : di akhir property CSS
dan titik koma ; diakhir baris seperti gambar dibawah.

Komentar CSS
Seperti di HTML, Anda dapat menulis komentar di file CSS. Namun di CSS, komentar harus diapit oleh /* */.

7. Ukuran Font dan Jenis Font

Ukuran Font
Ukuran font dapat ditetapkan dengan property font-size. Satuan umum untuk menentukan font-
size adalah px (piksel).
Jenis Font
Dengan property font-family, Anda dapat menentukan jenis font. Anda dapat melakukan ini dengan menetapkan
font-family: nama font; Jika nama font berisi spasi, Anda harus mengapitnya dengan tanda petik ganda.

Aneka Ragam Font

Saat menetapkan property font-family, Anda dapat menentukan berbagai jenis font seperti serif dan sans-serif.
Anda tidak perlu mengingat nama font karena anda bisa mencarinya secara online.

8. Lebar, Tinggi dan Warna Latar Belakang

Warna Latar Belakang
Property background-color memungkinkan Anda untuk mengubah warna latar belakang. Anda dapat menetapkan
warna latar belakang seperti menetapkan property color. Selain itu, jika huruf yang sama memanjang
seperti #dddddd, ini dapat disingkat menjadi #ddd.

Lebar dan Tinggi

Untuk mengubah lebar dan tinggi element, gunakan property width (lebar) dan height (tinggi). Unit kedua element
ini dapat ditentukan dengan px, sama seperti font-size.
9. Class
Menetapkan CSS ke Element Tertentu
Jika ada beberapa element <li> di code Anda, menerapkan CSS seperti gambar dibawah akan mengubah semua
element <li> menjadi merah. Jadi, bagaimana cara mengubah hanya satu element <li> menjadi merah?

Memberi Label Pada tag

Anda dapat melakukannya dengan memberi label pada element yang ditargetkan dengan menggunakan
atribut class. Dengan menambahkan class ke tag HTML, Anda dapat menerapkan CSS yang berbeda ke setiap
element. Saat menerapkan CSS ke class selector, perhatikan bahwa titik . diperlukan di depan nama class.

Menetapkan CSS ke Beberapa Tag

Seperti gambar dibawah, Jika Anda menetapkan nama class yang sama kebeberapa element HTML, CSS yang sama
akan diterapkan untuk semuanya.

Syntax untuk Class

Seperti disebutkan sebelumnya, nama selector class selalu dimulai dengan titik. Jika Anda lupa memberikan titik, CSS
tidak akan diterapkan. Perhatikan bahwa selector class dimulai dengan titik, tetapi tag tidak demikian.
Layout (Tata Letak) Dasar
10. Struktur HTML (1)
Struktur HTML
Di dokumen HTML, ada beberapa aturan yang harus Anda ikuti. Misalnya, element <head> dan <body> wajib berada
didalam apitan element <html> (※ Lihat gambar di sisi kiri). Element <head> berisi informasi dokumen sementara
element <body> berisi konten yang terlihat di browser.

Menentukan Versi HTML

Disetiap dokumen HTML, Anda harus memulai dengan deklarasi DOCTYPE. Ini akan memastikan versi HTML situs
web Anda adalah yang terbaru. Kita akan menggunakan <!DOCTYPE html>, untuk menentukan versi HTML secara
otomatis. Jangan terlalu khawatir tentang versi ini, cukup ingat bahwa ini adalah hal yang harus selalu Anda lakukan.

<head> Tag
Element <head> berisi settingan dokumen HTML yang tidak terlihat dibrowser. Ada tiga element yang harus Anda
letakkan di <head>. Kita akan lihat masing-masing element ini dipelajaran berikutnya.

11. Struktur HTML (2)

Konten dalam Tag <head>
Dalam element <head>, kita akan menentukan
1) pengcodean karakter,
2) judul situs web, dan
3) tautan ke file CSS.
Anda tidak harus menghapalnya, namun mari kita lihat arti element ini.

Karakter Encoding
Dengan menentukan pengcodean karakter di atribut charset seperti <meta charset="utf-8">, Anda dapat mencegah
situs web menjadi kacau. UTF-8 adalah karakter encoding yang direkomendasikan untuk HTML5.

Judul untuk Situs Web Anda

Element <title> menentukan judul dokumen. Seperti yang ditampilkan pada gambar disisi kanan, judul yang
ditentukan di element <title> hanya akan muncul di tab browser.

Menautkan File CSS

Pada latihan kita, code CSS yang Anda tulis di stylesheet.css akan langsung muncul di jendela "Jawaban Anda".
Namun umumnya tidak demikian. Anda harus membuat tautan antara HTML dan file CSS dengan menentukan <link
rel="stylesheet"> di dokumen HTML Anda. Anda dapat menentukan nama file CSS menggunakan atribut href.
12. Layout Dasar
Layout
Layout (tata letak) adalah salah satu bagian paling penting dalam membuat situs web. Layout situs web yang akan
Anda buat umumnya terdiri dari tiga bagian seperti yang ditampilkan pada gambar dibawah.

Tag <div>
Kita akan membuat tata letak dengan element <div> (※ "div" mewakili "divisi"). Tag <div> digunakan untuk
mengelompokkan element. Seperti contoh dibawah, layout dibagi menjadi tiga element <div> dengan nama
class header, main, dan footer.

Pelengkap Tag Otomatis

Mulai dari sini, Anda akan menulis banyak tag. Untuk mencegah kesalahan ketik, mari kita gunakan fungsi
autocomplete di editor. Seperti yang ditampilkan di bawah, Anda dapat memasukkan nama tag dan menekan
tombol "tab" untuk menyelesaikan tag (※ Tergantung pada tag, beberapa atribut yang tidak dinginkan dapat
tersisipkan, jadi lakukan ini dengan hati-hati).

Header
13. Struktur Header
Header
Setelah tata letak dasar selesai dikerjakan, sekarang mari kita mengerjakan beberapa detailnya. Pertama, kita akan
membuat header seperti gambar dibawah.
Struktur Header
Mari kita periksa struktur header. Ada logo "Progate" dan daftar. Mari kita kelompokkan kedua bagian ini
menggunakan element <div> seperti yang ditampilkan di bawah.

Menghapus Bullet dari Daftar Item

Dengan menerapkan property list-style di element <li>, Anda dapat menghilangkan bullet. Karena kita tidak
menginginkan bullet didaftar kita, mari kita tetapkan list-style ke none.

14. Layout Header

Menyejajarkan Header Secara Horizontal
Umumnya, element yang ditulis di HTML disejajarkan secara vertikal. Untuk menyejajarkannya secara horizontal, kita
membutuhkan CSS. Di pelajaran ini, kita akan mempelajari cara membuat tata letak horizontal seperti yang
ditampilkan gambar disisi kanan bawah.

Property Float
Dengan menggunakan property float, Anda dapat menyejajarkan element secara horizontal. Seperti yang
ditampilkan pada contoh, menentukan float: left; akan mengatur element secara bersisian dari kiri ke kanan.
Menyejajarkan Item Daftar Secara Bersisian
Mari kita mulai mengatur item daftar diheader secara bersisian. Dengan menerapkan float: left; ke setiap
element <li> , Anda dapat menyejajarkannya secara horizontal dari kiri ke kanan.

Menyejajarkan Logo dan Daftar

Kemudian, mari kita letakkan logo header dan keseluruhan daftar secara bersisian. Dengan menerapkan float:
left; ke header-logo seperti yang ditampilkan dibawah, Anda dapat menyejajarkan logo dan keseluruhan daftar
secara horizontal.

15. Padding
Menyesuaikan Ruang
Mari kita sesuaikan ruang antara element di header sehingga logo dan daftar di header ditempatkan diposisi yang
sesuai seperti yang ditampilkan dibawah.

Menambahkan Ruang ke Element

Jika Anda ingin menambahkan ruang ke element, Anda dapat menggunakan property padding. Dengan
menerapkan padding: 〇〇 px;, ruang yang ditentukan akan ditambahkan ke semua sisi element.
Menetapkan Padding ke Sastu Sisi Saja
Anda mungkin ingin menambahkan ruang hanya ke satu sisi element. Dalam kasus ini, Anda dapat menggunakan
property seperti padding-top, padding-right, padding-bottom dan padding-left. Misalnya, untuk menambahkan
ruang dibagian atas, tetapkan padding-top: 〇〇 px;.

Shorthand Padding
Anda dapat menggunakan shorthand saat menerapkan padding. Anda dapat menerapkan padding ke beberapa sisi
menggunakan satu property saja. Saat empat nilai ditentukan, padding diterapkan searah jarum jam dari bagian atas.
Saat dua nilai ditentukan, padding diterapkan dalam urutan "atas/bawah" dan "kanan/kiri".

Footer
16. Struktur Footer
Footer
Sekarang, kita akan mengerjakan tata letak footer. Sama seperti header, mari kita periksa desain dan strukturnya.
Disisi kiri footer terdapat logo, dan di sisi kanan terdapat daftar.

Struktur Footer
Saat membuat header, kita menerapkan float dan padding ke setiap element <li>. Karena itu, property CSS juga
diterapkan ke element <li> di footer. Menurut Anda, bagaimana kita dapat menerapkan property CSS ini hanya ke
tag <li> di header?

Selector Bersarang
Dengan menambahkan li setelah header-list (dengan spasi di antara keduanya), Anda dapat menerapkan CSS hanya
ke element <li> di header-list. Ini memungkinkan Anda untuk menerapkan CSS yang berbeda ke element <li> di
header dan element <li> di footer.

17. Layout Footer

Mengatur Ulang Logo dan Daftar
Mari kita lihat gambar dibawah. Logo dan daftar menu footer masing-masing berada diujung kiri dan kanan. Kita
telah mempelajari cara menyejajarkan element dari kiri menggunakan float: left, namun bagaimana jika kita mau
menyejajarkannya dari kanan?

Float: right
Dengan float: right, Anda dapat menyejajarkan element secara horizontal dari kiri ke kanan.

Memosisikan Element ke Kiri dan kanan

Dengan menggabungkan float: left; dan float: right;, Anda dapat meletakkan logo dan daftar menu footer di baris
dari kiri kekanan. Mari kita terapkan float: left; ke selector footer-logo sehingga posisinya akan ke tepi kiri, dan
menerapkan float: right; ke selector footer-list untuk memindahkannya ke tepi kanan.

Konten
18. Layout Bagian Utama
Mari kita beralih ke layout bagian utama! Seperti yang ditampilkan dibawah, layout utama terdiri dari tiga element,
yaitu copy-container, contents, dan contact-form. Ini mungkin akan sedikit lebih rumit daripada layout lain yang
telah kita buat. Tapi jangan khawatir! Kami akan menjelaskan setiap langkahnya.

Menerapkan CSS ke Sebagian Teks

Pada gambar di bawah, perhatikan bahwa titik (.) di element <h1> "HELLO WORLD." berwarna merah. Kami akan
menunjukkan cara menerapkannya.

Tag <span>
Anda dapat menerapkan CSS ke sebagian teks dengan mengapitnya di tag <span>. Gambar dibawah
mengilustrasikan hal ini dengan menerapkan color: red; ke selector span. Tidak ada baris baru yang dimasukkan
sebelum atau setelah element <span>.
Element block dan inline
Di HTML, beberapa element akan dimulai dibaris baru dan beberapa tidak. Element block seperti div akan di mulai
dibaris baru, dan diperluas ke keseluruhan lebar element induknya. Sedangkan Element inline seperti span hanya
mengambil lebar secukupnya saja.

19. Struktur Konten

Konten
Bagian berikutnya adalah konten. Pertama, mari kita buat bagian layout konten. Kita memerlukan judul dan
4 contents-item.

20. Batas
Pada gambar di bawah, element <h3> memiliki garis batas dibawahnya. Dipelajaran ini, kita akan belajar cara
membuatnya.

Syntax untuk Batas

Anda dapat menambahkan batas dengan property border. Seperti yang ditampilkan pada gambar, Anda dapat
menentukan lebar, style, dan warna. Gunakan property border untuk menerapkan batas ke semua sisi. Untuk
menambahkan batas kesisi tertentu, gunakan salah satu property berikut: border-bottom, border-top, border-left,
atau border-right.
21. Padding dan Margin
Ruang di dalam dan di luar batas
Seperti ditampilkan di bawah, ada ruang yang ditambahkan diatas dan dibawah garis batas. Pada slide berikutnya,
kita akan mempelajari cara menambahkan ruang didalam dan diluar garis batas.

Padding dan Margin

Sebelumnya kita menggunakan property padding untuk memberikan ruang disekitar element. Namun, padding
hanya menambahkan ruang di dalam batas. Untuk menambahkan ruang di luar batas, anda dapat menggunakan
property margin. Anda dapat menentukan nilai margin seperti menentukan nilai padding.

Model Kotak
Property margin, border dan padding yang telah kita bahas sejauh ini didasarkan pada konsep model kotak. Setiap
element HTML memiliki batas (secara default, sebagian besarnya tidak terlihat). Ruang diluar batas kotak adalah
margin, sedangkan ruang diantara batas dan teks adalah padding.

Shorthand Margin
Seperti property padding, Anda dapat menentukan margin secara satu per satu disetiap sisinya, atau sekaligus
menggunakan satu property saja.
Formulir
22. Layout Formulir (1)
Formulir
DIpelajaran ini, kita akan membuat formulir pertanyaan seperti gambar dibawah ini! Ayo langsung mulai!

23. Layout Formulir (2)

Tag <input> dan <textarea>
elanjutnya, mari kita lihat cara membuat bidang input. Tag <input> digunakan untuk menerima satu baris teks,
sementara tag <textarea> digunakan untuk menerima beberapa baris teks. Perhatikan bahwa tag <input> tidak
membutuhkan tag penutup.

Tombol Submit (Kirim)

Kita juga dapat membuat tombol submit (kirim) dengan menambahkan atribut type ke element <input>. Saat Anda
menetapkan atribut type ke submit, element <input> menjadi tombol submit (kirim) seperti gambar di bawah.
Secara default, teks yang ditampilkan ditombol adalah "Submit".

Atribut Nilai
Jika diinginkan, Anda dapat mengubah teks yang ditampilkan di tombol submit (kirim) dengan menentukan
atribut value. Dengan atribut ini, kita dapat mengubah nama tombol submit menjadi apapun, seperti Kirim.
Menerapkan CSS ke Beberapa Seelector
Anda dapat mengelompokkan CSS yang sama dengan memisahkan beberapa selector dengan koma , seperti yang
ditunjukkan pada gambar tengah. Dengan melakukan hal tersebut, Anda dapat menerapkan CSS yang sama ke
berbagai selector. Untuk situs web kita, mari terapkan CSS yang sama ke element <input> dan <textarea>
menggunakan metode ini.

HTML & CSS Study II

Layout (Tata letak) Dasar
1. Persiapan
HTML/CSS Tingkat Advance
Dalam pelajaran ini, kita akan mengembangkan halaman web modern seperti gambar dibawah ini.
Bersiaplah untuk belajar banyak pengetahuan baru tentang pengembangan web!

2. Layout dasar
Layout Halaman Web
Halaman web yang akan kita kerjakan, akan memiliki layout (tata letak) HTML seperti gambar dibawah ini.

<header> dan <footer>

Dikarenakan banyak halaman web yang memiliki header dan footer, HTML memiliki tag untuk keduanya. Selain
menggunakan <div class="header"> dan <div class="footer"> seperti pada pelajaran sebelumnya, kita juga dapat
menggunakan tag <header> dan <footer>. Cara ini adalah cara yang lebih umum digunakan.
Bagian Atas Halaman
3. Layout Bagian Atas
Selanjutnya, kita akan mengerjakan bagian atas halaman web. Lihat layout HTML-nya digambar bawah ini.

Background-image
Bagian atas halaman yang akan kita kerjakan memiliki background image (gambar latar belakang). Kita dapat
menentukan gambar ini dengan menggunakan CSS property background-image yang harus ditulis seperti
ini: background-image: url(URL);.

Background-size
Pada saat mengunakan property background-image, jika gambar yang ditentukan memiliki size lebih kecil dari
tempat yang disediakan, gambar tersebut akan diduplikasikan hingga memenuhi seluruh ruang yang ada. Jika Anda
ingin memperbesar gambar untuk memenuhi ruanganya tanpa duplikasi, Anda dapat mengunakan property
CSS background-size: cover;.

Menengahkan Posisi Element

Untuk menengahkan class container secara horizontal. Kita dapat melakukannya dengan menentukan margin kiri &
kanan ke auto. Perhatian, Anda harus menentukan width terlebih dahulu sebelum menerapkan settingan ini. Untuk
sekarang, Anda tidak perlu memahami arti class container.
4. Transparansi dan Spasi Antar Huruf
Dengan membandingkan halaman web yang kita kerjakan dengan hasil akhir yang diinginkan, kita dapat melihat
perbedaannya sebagai berikut:
・Huruf judul agak transparan
・Jarak antar huruf di "BELAJAR CODING" lebih besar.

Opacity
Untuk membuat element menjadi transparan, Anda dapat menggunakan CSS property opacity. Nilai yang dapat
Anda tentukan untuk opacity adalah antara 0.0 dan 1.0, dimana 0.0 adalah yang paling transparan.

Letter-spacing
Sedangkan untuk jarak antar huruf, Anda dapat menggunakan CSS property letter-spacing.

5. Membuat Tombol
Didalam pelajaran ini kita akan belajar membuat tombol dengan menggunakan tag <a>. Karena tag <a> adalah
element inline, kita tidak dapat menentukan ukuran dan penspasiannya. Namun jangan khawatir, kita akan cari tahu
bagaimana mengatasi hal ini.
Element Inline-block
Element inline-block memiliki karakteristik seperti element block dan inline. Seperti halnya element inline,
element inline-block akan disejajarkan secara horizontal. Selain itu, ukuran dan spasinya juga dapat dirubah, sama
seperti pada element block.

Display
Tag <a> adalah element inline secara default, namun Anda dapat menggunakan CSS property display untuk
mengaturnya. Property display dapat memiliki nilai block, inline-block, atau inline.

Menentukan Beberapa Class

Jika Anda memiliki beberapa element dengan CSS yang memiliki sedikit variasi, Anda dapat mengekstrak CSS umum
dan CSS individu ke class yang berbeda, lalu menentukan keduanya. Anda dapat menentukan beberapa class dengan
memisahkannya menggunakan spasi.

6. Menyesuaikan Layout
Mari kita sesuaikan layout halaman kita dengan berfokus pada hal-hal berikut:
・Mengubah warna tombol saat sedang ditunjuk kursor
・Membulatkan sudut tombol
・Menyejajarkan teks ketengah
:hover
Bila kursor menunjuk suatu element, maka element tersebut berada dalam status hover. Dengan menambahkan
selector :hover seperti gambar dibawah ini, kita dapat menentukan tingkah lakunya pada saat element dalam
status hover. Di code Anda, pastikan untuk tidak menempatkan spasi di kedua sisi : seperti gambar ditengah.

Border-radius
Selanjutnya, untuk membulatkan sudut element, kita dapat menggunakan CSS property border-radius. Semakin
besar nilainya, semakin bulat sudutnya.

Text-align
Property text-align dapat digunakan untuk menyejajarkan element inline dan inline-block. Nilai yang dapat anda
tetapkan untuk property text-align adalah left, center, atau right.

Margin: 0 auto dan text-align: center

Kita tahu bahwa margin: 0 auto dan text-align: center dapat digunakan untuk menengahkan element. Mari kita lihat
perbedaan di antara keduanya. Kita menggunakan margin untuk element block seperti container, dan text-
align untuk element inline dan inline-block seperti tombol dan teks.
7. Menggunakan Ikon
Di pelajaran ini, kita akan belajar cara menggunakan ikon seperti gambar dibawah.

Font Awesome
Anda dapat dengan mudah mencari ikon menggunakan Font Awesome. Disana, banyak ikon tersedia yang dapat
Anda gunakan untuk halaman web Anda. Buka https://fontawesome.com/ untuk melihat daftar ikon yang dapat
Anda gunakan.

Menggunakan Font Awesome

Anda dapat menggunakan Font Awesome dengan mengikuti langkah-langkah berikut.
1. Muatkan link CSS Font Awesome didalam tag <head> pada halaman HTML anda.
2. Tambahkan tag <span> dengan class fa dan fa-nama ikon (Anda dapat menemukan nama ikon pada
halaman Font Awesome.)

Header
8. Layout Header
Mari kita lanjutkan ke bagian header. Layout HTML untuk header halaman yang akan kita kerjakan ditampilkan
dalam gambar dibawah ini. Perhatikan bahwa warna latar belakang header sedikit transparan.
Opacity dan rgba
Sebelumnya, kita telah menggunakan opacity untuk membuat element menjadi transparan. Namun,
masalah opacity adalah seluruh element menjadi transparan, termasuk element turunannya. Jika kita hanya ingin
membuat warna latar belakangnya saja yang menjadi transparan, kita dapat menggunakan rgba.

rgb
Untuk mengetahui tentang rgba, kita harus terlebih dahulu memahami rgb. rgb adalah cara untuk menentukan
warna dengan kombinasi tiga nilai yakni, red (merah), green (hijau), dan blue (biru). Cara kerjanya sama seperti
format heksadesimal (misalnya, #ffffff) yang telah kita pelajari sebelumnya.

rgba
rgba dapat digunakan saat Anda ingin menentukan transparansi warna. Disini, Anda menentukan empat nilai
untuk rgba, dimana nilai keempatnya (alpha), menentukan transparansi, dimana 0.0 adalah yang paling transparan
dan 1.0 adalah yang paling penuh. Contoh dibawah menunjukkan perbedaan antara rgba dan opacity.

9. Membuat Tautan Login

Di pelajaran kali ini, kita akan membuat tautan untuk log in.
10. Menyempurnakan Login
Mari kita sempurnakan tautan log in kita dengan:
・Menambahkan animasi hover.
・Menengahkan teks Log in secara vertikal.

Transition
CSS property transition dapat digunakan untuk menambahkan animasi. Anda dapat
menentukan target dan durasi animasinya. Target dapat berupa property, seperti color, namun kita akan lebih
sering menentukannya ke all agar dapat diterapkan ke semua property. transition sering digunakan dengan
selector hover.

Line-height
CSS property line-height dapat digunakan untuk menentukan tinggi yang ditempati baris.

Menggunakan line-height untuk Menengahkan Teks Secara Vertikal

line-height juga dapat digunakan untuk menengahkan teks secara vertikal. Karena teks tersebut akan ditempatkan
dibagian tengah line-height, menyamakan nilai untuk height dan line-height akan menengahkan teks didalam
barisnya secara vertikal.
Memperluas Tag <a>
Dikarenakan tag <a> adalah element inline, sebagai tombol, tag ini hanya menempati ruang settingi teks. Hasilnya,
kita hanya dapat mengklik area teks. Kita dapat memperbaikinya dengan membuat tag <a> menjadi element block,
ini akan memperluas area tombol hingga seukuran element induknya.

Daftar Pelajaran
11. Layout Daftar Pelajaran
Mari kita lanjutkan ke bagian daftar pelajaran. Layout HTML ditampilkan dalam gambar di bawah ini. Kita juga akan
mempelajari cara mengubah ketebalan teks.

Font-wight
CSS Property font-weight memungkinkan Anda untuk mengubah ketebalan teks. Anda dapat menentukan nilai
seperti normal dan bold. Karena tag <h1> ~ <h6> memiliki default font-weight: bold;, Anda dapat menentukan font-
weight: normal; untuk mengubah ketebalan tulisannya ke normal.

12. Menyejajarkan Bagian Pelajaran

Sekarang mari kita kerjakan bagian daftar pelajaran. Perhatikan gambar dibawah, setiap pelajaran diberi lebar 25%.
Menentukan Ukuran dengan %
Dengan menggunakan %, kita dapat menghitung width berdasarkan width element induknya dengan lebih mudah.
Hal yang sama berlaku untuk property height.

Layout Setiap Pelajaran

Layout HTML setiap pelajaran ditampilkan dalam gambar di bawah ini.

13. Menyesuaikan Layout

Element yang Bertumpang-tindih
Sekarang mari kita sesuaikan layout setiap bagian pelajaran. Umumnya di HTML, element tidak pernah bertumpang-
tindih. Namun jika diperlukan, Anda dapat mengaturnya dengan menggunakan CSS. Dalam latihan ini, kita akan
mempelajari caranya melalui latihan menempatkan teks di bagian atas gambar.

Position: absolute;
Anda dapat menggunakan CSS position: absolute; untuk membuat element bertumpang-tindih. Dengan position:
absolute;, Anda dapat menentukan posisinya relatif terhadap sudut kiri atas halaman web, menggunakan
property top dan left.
Position: relative;
Anda dapat mengubah titik referensi untuk position: absolute dengan menetapkan position: relative; ke element
ancestornya (element yang terhubung tapi terletak jauh diatas element induk). Dengan cara ini, element yang
memiliki position: absolute yang ditetapkan akan diposisikan relatif terhadap sudut kiri atas element ancestor.

Bagian Pesan
14. Layout Bagian Pesan
Mari kita lanjutkan ke bagian pesan dihalaman web kita. Perhatikan gambar dibawah untuk layout HTML bagian
pesan yang akan kita kerjakan.

15. Membuat Tombol 3D

Mari kita pelajari cara membuat tombol agar terlihat 3D dengan menambahkan bayangan ke tombol tersebut. Selain
itu, kita juga akan mempelajari cara mengubah jenis kursor mouse.

Box-shadow
CSS property box-shadow digunakan untuk menambahkan bayangan ke element apapun. Kita dapat
menggunakannya dengan menentukan panjang horizontal, panjang vertikal, dan warnanya.
cursor
CSS property cursor dapat digunakan untuk mengubah jenis kursor mouse seperti gambar dibawah ini. Beberapa tag
HTML seperti tag <a> memiliki default CSS property cursor sebagai pointer.

16. Menerapkan CSS Berdasarkan Klik

Menekan Tombol
Mari kita tambahkan beberapa CSS property ke tombol, untuk membuatnya terlihat seperti ditekan saat Anda
mengkliknya. Kita dapat mewujudkannya dengan melakukan hal-hal berikut saat tombol di klik:
・Menghilangkan bayangan
・Menurunkan posisi tombol sesuai panjang bayangan

:active
Selector :active dapat digunakan untuk menambahkan CSS ini pada saat element sedang diklik, pelajari contoh
dibawah ini.

Membatalkan CSS
Anda dapat menghilangkan bayangan dengan menentukan box-shadow: none;. Banyak CSS property yang dapat
dibatalkan dengan menentukan nilainya ke none.
Penggunaan position: relative;
Sebelumnya, kita telah belajar cara menggunakan position: relative; dengan position: absolute;, tetapi perannya
yang sebenarnya adalah untuk memosisikan element relatif terhadap posisi normalnya. Seperti position: absolute;,
Anda dapat menggunakan CSS property top dan left.

Menekan Tombol
Kita akan menambahkan CSS berikut untuk membuat tombol terlihat seperti telah ditekan.
・Atur box-shadow ke none
・Gunakan position: relative; dengan top untuk menurunkan posisi element sesuai panjang bayangan

Footer
17. Footer
Layout Footer
Sekarang mari kita kerjakan footer. Pelajari layout HTML untuk footer yang ditampilkan dalam gambar dibawah ini.

Memperbaiki Header
18. Memperbaiki Header
Menahan Posisi Header
Terakhir, mari kita pelajari cara menahan element diposisi tertentu, sehingga kita dapat menahan header dibagian
atas halaman bahkan saat Anda menggulir ke bawah.

Menahan Posisi Element

Kita dapat menggunakan position: fixed; untuk menempatkan element dan menahannya diposisi tertentu dilayar.
Kita dapat mengatur ini dengan cara menggabungkannya dengan CSS property top dan left.

Urutan Tumpukan element

Kita tahu bahwa kita dapat menggunakan property position untuk membuat element bertumpang-tindih, tetapi
terkadang element tersebut tidak ditumpuk sesuai urutan yang kita inginkan. Dalam gambar dibawah ini, gambar
ikon ditumpuk di bagian atas header. Mari kita pelajari cara memperbaikinya.

z-index
CSS property z-index memungkinkan Anda mengubah urutan tumpukan element. Element dengan z-index lebih
besar akan ditampilkan di bagian atas. Perlu diingat bahwa z-index hanya akan berlaku bila digabungkan dengan
property position.
HTML & CSS Study III
Desain Web yang Responsive
1. Persiapan
Karena width ditetapkan menjadi 1170px di pelajaran sebelumnya, halaman web kita menjadi kebesaran untuk
perangkat dengan layar lebih kecil. Dengan menerapkan Desain Web Responsive, kita dapat mengoptimalkan layout
halaman web kita agar sesuai dengan setiap ukuran layar.

Media Queries
2. Menggunakan Media Queries
Media Query
Sekarang, kita akan mempelajari tentang media queries. Property CSS ini digunakan untuk mengotomatiskan
pengadaptasian halaman web sesuai dengan ukuran perangkat.

Menggunakan Media Query

Mari pelajari cara menulis media queries. Syntax-nya adalah sebagai berikut: @media (kondisi) { .... }. CSS property
yang didalam { } akan diterapkan hanya jika kondisinya terpenuhi.

Max-width dan min-width

Dalam menerapkan media queries, kita dapat menentukan max-width atau min-width sebagai kondisi. Jika max-
width: 1000px dipilih, CSS akan diterapkan untuk layar yang berukuran 1000px atau kurang. Sebaliknya, untuk min-
width: 500px, CSS akan diterapkan hanya untuk ukuran layar 500px atau lebih.
Breakpoint
Nilai yang ditetapkan untuk max-width atau min-width disebut dengan breakpoint (titik penentu). Kita akan
menggunakan 670px sebagai breakpoint untuk smartphone, dan 1000px untuk tablet.

3. Layout dengan Media Queries

Dalam pelajaran sebelumnya, kita belajar cara mengganti warna teks berdasarkan lebar perangkat. Sekarang mari
kita pelajari cara mengubah layout (tata letak).

Mengubah Lebar Menggunakan Media Query

Jika Anda memiliki beberapa item dalam satu baris, item tersebut akan terlihat kecil saat ditampilkan di perangkat
yang berukuran kecil. Ayo kita perbaiki dengan mengubah lebar setiap item untuk perangkat yang lebih kecil.

4. Box-sizing
Gambar dikiri menunjukkan apa yang akan terjadi jika padding ditambahkan ke item didalam latihan sebelumnya.
Keberadaan empat item dengan lebar 25% & padding akan menyebabkan lebar keseluruhan melebihi 100%,
sehingga item terakhir diturunkan kebaris baru. Untuk memperbaikinya, gunakan box-sizing: border-box;.
Cara Kerja box-sizing
Dengan mengatur property box-sizing ke border-box, width sebuah element akan
menyertakan padding dan border. Karena itu, layout tidak akan pecah ketika Anda
menambahkan padding atau border (berbeda halnya dengan margin).

Menerapkan CSS ke Semua Element

Anda dapat menggunakan selector * saat ingin menerapkan CSS ke semua element, seperti dalam gambar di bawah
ini. Praktik yang bagus adalah dengan menerapkan box-sizing: border-box; ke semua element agar penyesuaian
layout halaman web dapat dilakukan dengan lebih mudah.

Menjadikan Halaman anda Responsive

5. Persiapan Desain yang Responsive
Membuat Halaman yang Responsive
Kita telah mempelajari dasar-dasar Desain Web yang Responsive. Mari mempraktikkannya dengan menerapkannya
ke halaman web yang telah kita kerjakan dalam pelajaran sebelumnya. Sebelum itu, kita harus mempersiapkan
beberapa hal.

viewport
Untuk bersiap menerapkan Desain Web Responsive ke halaman web kita, kita harus menetapkan viewport di dalam
tag <head>. Tanpa viewport, media queries tidak akan berfungsi dengan baik di tablet dan smartphone. Anda tidak
perlu mengingat isi viewport, jika Anda lupa, tinggal dicari secara online saja.
Width: 100%
Di pelajaran sebelumnya, kita telah menetapkan width menjadi 1170px, jadi ini tidak akan pas dengan perangkat
berlayar lebih kecil. Mari ganti width menjadi 100% untuk mengakomodasi semua lebar perangkat.

6. Layout Tablet
Memuat responsive.css
Kita dapat menulis media queries kita dalam stylesheet.css, namun kita akan meletakkannya dalam file yang
berbeda yaitu di responsive.css. Hal ini dilakukan agar code CSS kita lebih rapi dan mudah dibaca. Pastikan untuk
memuat tautan ke file responsive.css dibawah viewport.

Lebar Halaman Bagian Pelajaran

Ayo kita mulai dengan layout tablet. Lebar layar tablet tidak akan cukup untuk menampung empat pelajaran dalam
satu baris. Kita dapat memperbaiki ini dengan meletakkan dua pelajaran per barisnya. Hal ini dapat dicapai dengan
mengubah width dari lesson menjadi 50%.

7. Memperbaiki Layout yang Responsive

Memperbaiki Latar Belakang
Karena kita telah mengubah layout bagian pelajaran menjadi dua baris, mereka tidak lagi muat didalam bagian latar
belakang yang telah diberikan. Hal ini terjadi karena height dari lesson-wrapper ditetapkan menjadi 580px. Di
pelajaran ini kita akan memperbaikinya, agar height dari lesson-wrapper akan ditentukan oleh turunannya.

Float dan Element Induk

Secara default, height suatu element ditentukan oleh turunannya. Namun, berbeda jika semua element turunan
diberikan CSS property float. Dalam skenario ini, height induk akan menjadi 0. Ini karena element yang
diberi float tidak akan mempengaruhi induknya.

Menghapus float
Mari pelajari cara menambahkan height ke element induk ketika element anak/turunan memiliki CSS property float.
Kita dapat melakukannya dengan menambahkan tag <div> yang diberikan CSS property clear: left;. clear: left; akan
membatalkan status float milik element turunan, sehingga height-nya akan kembali mempengaruhi height element
induk.

8. Layout Smartphone (1)

Dipelajaran ini, mari kita kerjakan layout untuk smartphone. Untuk ukuran layar smartphone, kita akan
menetapkan breakpoint ke 670px. Akan tetapi, sebelum itu mari kita ubah width dari lesson menjadi 100% untuk
membuat layout satu kolom.
Mensejajarkan footer
Selain itu, tetapkan footer agar sejajar dengan bagian tengah.

9. Layout Smartphone (2)

Menyesuaikan Tombol
Dipelajaran ini, kita akan membuat tombol dengan lebar sepanjang layar, sehingga lebih mudah ditekan. Kita juga
akan menyesuaikan margin antara tombol.

10. Membuat font-size Responsive

Font yang lebih kecil akan lebih pas untuk layar yang lebih kecil. Jadi, mari sesuaikan font untuk setiap perangkat.

11. Max-width
Menangani Layar Extra Besar
Kita telah mempelajari cara menyesuaikan layout untuk perangkat kecil. Bagaimana dengan perangkat berlayar extra
besar?
Misalnya, jika kita melihat halaman web kita di layar berukuran 2000px, bagian pelajaran akan menjadi terlalu
renggang.
Max-width
Karena kita menetapkan width dari container menjadi 100%, maka bagian pelajaran akan menjadi terlalu luas untuk
layar yang sangat besar. Kita dapat memperbaikinya dengan menetapkan max-width. Seperti contoh dibawah, kita
telah menetapkan max-width ke 1170px, sehingga konten didalamnya akan selalu berada dalam batasan ini.

12. Menjadikan Header Responsive

Terakhir, mari terapkan header yang berbeda untuk smartphone. Karena keseluruhan menu tidak muat dilayar kecil
seperti smartphone, kita akan memindahkan menu ini dan menampilkannya di ikon menu. Dengan cara ini, menu
hanya akan muncul jika ikon ditekan.

Menyembunyikan dan Menampilkan Element

Kita akan menyembunyikan ikon menu secara default dan hanya menampilkannya jika lebar perangkat 670px atau
lebih kecil. Untuk menyembunyikan element, kita dapat menggunakan display: none;. Untuk menampilkan element
yang tersembunyi, gunakan display: block;.

HTML & CSS Flexbox

Ap aitu Flexbox
1. Persiapan
Flexbox, modul layout CSS. Banyak, contohnya, hingga saat ini, kita menggunakan float untuk menyejajarkan item
secara horizontal. Tapi, kini kita dapat menggunakan Flexbox untuk melakukan hal yang sama dengan lebih efisien.
Sebelum kita mulai, mari kita lihat apa yang akan kita buat dalam pelajaran ini.

Apa Kegunaan Flexbox

Dengan Flexbox, Anda dapat dengan mudah membuat layout berbeda seperti gambar di bawah.
Menerapkan Flexbox
2. Display: flex
Apa itu display: flex
Menetapkan display: flex pada element induk akan menumpuk element turunannya secara horizontal.

Cara menggunakan display: flex

Kapan pun Anda menginginkan item agar bertumpuk secara horizontal, tetapkan display: flex; ke element induk.

3. Flex: auto
Apa itu flex: auto
Ketika Anda menetapkan flex: auto ke suatu element, element tersebut akan meluas untuk mengisi seluruh ruang
lebar milik element induknya.

Cara menggunakan flex: auto

Jika Anda memiliki element yang ingin diluaskan selebar element induk, tetapkan flex: auto.
Desain Responsive
4. Flex-wrap: wrap
Apa itu flex-wrap: wrap?
Dengan menetapkan flex-wrap: wrap, satu baris element akan dapat dibungkus ke dalam banyak baris berdasarkan
ukuran element.

Cara menggunakan flex-wrap: wrap

Tetapkan flex-wrap: wrap pada element induk yang akan membungkus. Nilai width milik element tersebut harus
ditentukan terlebih dahulu. Kali ini, karena kita ingin membagikan daftar menjadi dua baris, kita akan
mengatur width: 50%.

Tinjauan Ukuran Persentase

Mari meninjau ulang cara menggunakan persentase ukuran element. Ketika menggunakan persentase % untuk tinggi
dan lebar element, ukuran element tersebut akan menyesuaikan diri ke ukuran induknya secara relatif.

5. Media Queries
Membungkus pada Layar yang Lebih Kecil
Menggunakan media Queries
Untuk membuat situs responsive, kita akan menggunakan media queries yang telah kita pelajari di HTML Study III.
Kita akan membuat agar wrap untuk daftar item hanya dijalankan ketika lebar layar memenuhi kriteria yang telah
kita tetapkan.

6. Flex-direction
Menggunakan Satu Kolom untuk Layar Terkecil

Apa itu flex-direction: column?

Menetapkan flex-direction: column akan membuat semua element bertumpuk secara vertikal.

Cara Menggunakan flex-direction: column

Untuk element yang ingin Anda susun secara vertikal, berikan flex-direction: column pada element induknya.
Menengahkan Element Block
Mari meninjau ulang bagaimana cara menengahkan element blok. Dengan mengatur margin: 0
auto dan width sebuah element, Anda dapat menengahkannya. Karena kita sudah mengatur lebar element untuk
layar selebar 1000px dan di bawahnya, sekarang, kita hanya perlu mengatur margin.

Menggunakan Media Queries

Dengan menggunakan media queries, kita akan membuat daftar item menjadi kolom tunggal pada ukuran layar
670px dan ke bawah.