Rumah Coding Course

"Web Design"
Day 2
CSS
 Apa itu CSS?
• CSS adalah singkatan dari Cascading Style Sheets.
• CSS mengatur bagaimana penampilan setiap elemen HTML pada
halaman web.
• Sebuah file CSS bisa digunakan untuk beberapa halaman website.
 Bagaimana Menggunakan CSS?
• Ada 3 cara menggunakan CSS:
1. Inline: menggunakan atribut style pada elemen HTML. Cara ini
sudah kita bahas pada hari pertama.
2. Internal: menggunakan elemen style pada bagian head dokumen
HTML.
3. External: menggunakan file CSS terpisah.
 Inline CSS
• Inline CSS merupakan cara termudah untuk menggunakan CSS.
• Inline CSS sebenarnya sudah kita bahas pada pertemua pertama.
• Inline CSS digunakan untuk mengatur tampilan (style) untuk sebuah
elemen HTML. Jika terdapat 10 elemen HTML yang akan anda ubah
style-nya, maka anda harus menuliskan manual untuk ke-10 elemen
tersebut.
• Untuk menggunakan inlince CSS, anda bisa menggunakan atribut
style. Misal:
 Internal CSS
• Internal CSS biasa digunakan untuk mengatur tampilan (style)
beberapa elemen dalam 1 dokumen HTML.
• Untuk menggunakan internal CSS, anda bisa meletakan elemen style
di bagian head pada dokumen HTML.
Praktek Menggunakan Internal CSS
 External CSS
• External CSS bisa digunakan untuk mengatur tampilan (style)
beberapa dokumen HTML.
• Untuk menggunakan External CSS, anda bisa membuat sebuah file
dengan ekstensi .css. Misal style.css (nama file bebas).
• Letakan semua property css dalam file style.css.
• Tambahkan link ke file style.css pada dokumen HTML anda di dalam
elemen head. Misal:
 Praktek Menggunakan Eksternal
CSS
index.html style.css
Hasilnya
 Atribut Id
• Selain atribut-atribut yang sudah kita pelajari, ada dua tambahan
atribut yang cukup penting. Yaitu atribut Id dan Class.
• Atribut id, berguna untuk memberikan id unik pada sebuah elemen
HTML. Atribut id harus unik untuk masing-masing elemen dalam
sebuah dokumen html.
• Penamaan id bebas, yang penting unik untuk masing-masing elemen
dalam satu dokumen HTML.
Misal: <h1 id="heading1">Ini adalah heading 1</h1>
• Atribut id bisa digunakan dalam CSS atau Javascript.
 Atribut Class
• Atribut class, berguna untuk memberikan type spesial untuk sebuah
elemen HTML.
• Penamaan class bebas
Misal: <h1 class="heading1">Ini adalah heading 1</h1>
• Atribut class bisa digunakan dalam CSS atau Javascript.
 CSS Selector
• Terdapat beberapa cara bagaiman CSS mengaplikasikan style ke dalam
elemen HTML.
• Cara pertama bisa menggunakan nama elemen. Misal h1{color: blue}.
Artinya memberikan warna teks biru pada semua elemen h1.
• Cara kedua bisa menggunakan nama class. Misal .center{text-align:center}.
Artinya memberikan aligment rata tengah untuk semua elemen yang
memiliki atribut class center.
• Cara ketiga bisa menggunakan id elemen. Misal #heading1{color:black}.
Artinya memberikan warna teks hitam pada elemen dengan id heading1.
• Selector lengkap dapat dilihat
di https://www.w3schools.com/cssref/css_selectors.asp
 Elemen Block dan Inline
• Jenis display dari sebuah elemen HTML adalah salah satu dari 2 jenis,
yaitu block atau inline.
• Elemen yang berjenis block secara default selalu ditampilkan di baris
baru dan mengambil space lebar sebuah dokumen HTML. Hal ini
berarti, jika ada elemen lain, maka akan ditampilkan di bawah elemen
block tadi (tidak mungkin berada di samping kanan).
• Elemen yang berjenis inline secara default selalu ditamplkan pada
baris yang sama dengan elemen sebelumnya.
Elemen Block dan Inline (2)
 Elemen Block
• Salah satu elemen block yang bersifat general adalah div. Elemen div
tidak memiliki arti khusus, akan tetapi sering digunakan sebagai
elemen container.
• Elemen lain yang memiliki sifat block antara lain h1-h6, form, hr, li, ol,
ul, p, table, dll.
 Elemen Inline
• Salah satu elemen inline yang bersifat general adalah span. Sama
seperti elemen div, elemen span tidak memiliki arti khusus, akan
tetapi sering digunakan untuk sebagai container dari elemen teks.
• Elemen lain yang memiliki sifat inline antara lain a, button, i, input,
select, textarea, strong, sub, sup, dll.
 Mini Project 1:
Buatlah halaman
home.html menggunakan
div seperti berikut:
(lihat halaman berikut)
 CSS Float
• Properti float digunakan untuk memposisikan elemen block di
sebelah kiri atau di sebelah kanan.
• Sebagaimana kita tahu, bahwa tidak ada elemen block yang
sejajar dalam baris yang sama. Untuk memaksa elemen block berada
dalam baris yang sama, anda bisa menggunakan properti float.
• Pada mini project 1, div yang berwarna biru seharusnya
menggunakan properti float.
 Mini Project 2:
Modifikasi halaman home.html menjadi
seperti berikut: jika menu sidebar di
hover warna background berubah
(lihat halaman berikut)
 CSS Margin
• Margin digunakan untuk membuat jarak di luar border dari sebuah
elemen HTML.
• Untuk mendefinisikan margin, anda bisa menggunakan properti:
- margin-top: batas atas
- margin-left: batas kiri
- margin-right: batas kanan
- margin-bottom: batas bawah
• Misal div {margin-left: 10px; margin-top: 20px}
 Margin Shorthand
• Selain menggunakan properti di atas, anda bisa juga menggunakan
properti margin. Misal:
- margin: 25px 50px 75px 100px;
Artinya margin-top:25px, margin-right: 50px, margin-bottom: 75px
dan margin-left:100px.
- margin: 25px 75px 100px;
Artinya margin-top:25px, margin-right: 75px, margin-bottom:
75px dan margin-left:100px.
 Margin Shorthand (2)
- margin: 25px 50px;
Artinya margin-top:25px, margin-right: 50px, margin-bottom: 25px
dan margin-left:50px.
- margin: 25px;
Artinya margin-top:25px, margin-right: 25px, margin-bottom:
25px dan margin-left:25px.
 CSS Padding
• Padding digunakan untuk membuat jarak antara konten dan
border dari sebuah elemen HTML.
• Untuk mendefinisikan padding, anda bisa menggunakan properti:
- padding-top: batas atas
- padding-left: batas kiri
- padding-right: batas kanan
- padding-bottom: batas bawah
• Misal div {padding-left: 10px; padding-top: 20px}
 Padding Shorthand
• Selain menggunakan properti di atas, anda bisa juga menggunakan
properti padding. Misal:
- padding: 25px 50px 75px 100px;
Artinya padding-top:25px, padding-right: 50px, padding-bottom:
75px dan padding-left:100px.
- padding: 25px 75px 100px;
Artinya padding-top:25px, padding-right: 75px, padding-bottom:
75px dan padding-left:100px.
 Padding Shorthand (2)
- padding: 25px 50px;
Artinya padding-top:25px, padding-right: 50px, padding-bottom:
25px dan padding-left:50px.
- padding: 25px;
Artinya padding-top:25px, padding-right: 25px, padding-bottom:
25px dan padding-left:25px.
Margin vs Padding
 Pada Mini Project 2, anda
bisa mengkombinasikan margin dan
padding untuk membentuk
tampilan sidebar.
 CSS Hover
• Anda bisa menggunakan CSS selector hover untuk merubah style
elemen saat elemen tersebut sedang ditunjuk oleh mouse.
• Untuk menggunakan selector hover anda bisa memakai selector
:hover. Misal a:hover. Berarti style akan dirubah saat mouse
menunjuk pada elemen a.
Pada Mini Project 2, anda bisa css
hover untuk membuat menu
highlight saat menu item ditunjuk
mouse
 Mini Project 3:
Modifikasi halaman project1, project2
dan project3, jika menu project di klik
maka akan muncul pada div content
(lihat halaman berikut)
 Font Awesome
• Font Awesome merupakan library vector icon yang popular
dikalangan web developer.
• Versi free dari Font Awesome terdiri dari hampir 1400 icon.
• Ada dua cara untuk menggunakan font awesome:
1. Mendownload dari website fontawesome.com
2. Menggunakan CDN sebagai berikut:
 Font Awesome (2)
• Untuk menggunakan Font Awesome sangat mudah, anda hanya perlu
menambahkan class dengan format berikut:
<i class="fa fa-namaicon"></i>
• Perhatikan contoh berikut:

• Untuk icon lengkap, anda bisa melihat di website

https://fontawesome.com/icons?d=gallery
 Font Awesome (3)
• Karena Font Awesome adalah vector, anda juga memberikan warna
dan ukuran sesuai keinginan anda melalui atribut style.
• Untuk mengubah ukuran, anda bisa menggunakan properti font-
size.

• Untuk mengubah warna, anda bisa menggunakan properti color.

 Tugas Mandiri 1:
Buat halaman login.html seperti berikut
(lihat halaman berikut)
Javascript
 Javascript
• Javascript merupakan bahasa pemrograman yang khusus dibuat untuk
mengembangkan website.
• Javascript merupakan komponen ke-3 yang harus dikuasai oleh seorang
web developer setelah HTML dan CSS.
• Perbedaan fungsi dari Javascript dengan 2 komponen lain adalah sebagai
berikut:
1. HTML: Berfungsi untuk mendefinisikan konten/layout dari sebuah web
2. CSS: Berfungsi untuk memberikan style/mempercantik halaman website
3. Javascript: Berfungsi untuk mengatur behaviour dari sebuah halaman
web.
Apa yang bisa dilakukan Javascript?
1. Javascript bisa mengubah konten/isi dari sebuah elemen HTML.
2. Javascript bisa mengubah nilai atribut dari sebuah elemen HTML.
3. Javascript bisa mengubah style CSS dari sebuah elemen HTML.
4. Javascript bisa menyembunyikan elemen HTML
5. Dan masih banyak fungsi lainnya.
 Bagaimana menggunakan
Javascript?
• Sama seperti CSS, anda bisa menggunakan Javascript dengan 3 cara.
1. Di dalam elemen body, menggunakan tag script.
2. Di dalam elemen head, menggunakan tag script.
3. Menggunakan file terpisah dengan menggunakan ekstensi .js. Misal
main.js. Nama file bisa bebas. Kemudian anda harus menambahkan
baris berikut di elemen head dari dokumen HTML:
<script src="main.js"></script>
 Program Javascript Pertama Anda
• Buat sebuah dokumen HTML baru index3.html, lalu ketikan kode
berikut:
1. Menampilkan tanggal dan jam
 Javascript Variable
• Variable adalah komponen untuk menyimpan sebuah nilai.

• Variable bisa bertipe string, integer, boolean, array, dll

2. Mengubah isi elemen HTML
 Javascript getElementsBy
• Pada contoh sebelumya, kita telah mencoba fungsi getElementById.
Fungsi ini adalah untuk mencari elemen HTML dengan id tertentu
pada dokumen HTML.
• Selain getElementById, ada beberapa fungsi lain:
1. getElementsByTagName: mencari elemen HTML berdasarkan nama
tag. Misal: document.getElementByTagName("h1").
2. getElementsByClassName: mencari elemen HTML berdasarkan css
class. Misal: document.getElementByClassName("center").
3. querySelectorAll: mencari elemen HTML berdasarkan css selector.
Misal: document.querySelectorAll("p.center").
 Javascript getElementsBy
• Perhatikan baik-baik perbedaannya, ketiga fungsi terakhir bisa
mengembalikan lebih dari satu elemen, berbeda dengan
getElementById yang hanya mengembalikan 1 elemen.
• Ketiga fungsi terakhir mengembalikan object berupa array.
 Javascript Array
• Array adalah variable spesialsuatu dapat menampung beberapa
nilai dalam satu variable.

• Index dari array dimulai dari 0, jadi untuk mengakses elemen

pertama, anda bisa menggunakan cars[0], dan seterusnya.
3. Mengubah Properti CSS
 Tugas Mandiri 2:
Buat sebuah jam digital. Bagian detik
ticking. Jika detik ganjil, ubah warna
border menjadi biru, jika genap menjadi
merah
(lihat halaman berikut)
 Mini Project 7:
Buat sebuah list, dan sebuah button.
Jika button diklik, setiap item list yang
genap akan berubah menjadi biru dan
tebal (lihat halaman berikut)
 For Loop
• For Loop digunakan jika anda ingin mengulang beberapa code yang
sama tanpa menduplikasi baris code tersebut.
 For Loop (2)
• Pada Mini Project 7, jika anda mengerjakannya secara manual, code
anda akan tampak seperti ini:

• Terjadi banyak pengulangan, anda bisa menghemat baris dengan

menggunakan For Loop. Ingat index sebuah array dimulai dari 0.