HTML ID & Script

CSS/030 CSS Pseudo Elements/README.md

@@ -1,123 +1,125 @@
-## CSS Pseudo Element
+# CSS Pseudo Element
 
-### Apa itu Pseudo Element?
+## Apa itu Pseudo Element?
 
-Pseudo element adalah element semu atau element palsu. Element semu? sebenarnya setiap kita membuat element
+Pseudo element adalah element semu atau element palsu. Element semu? Sebenarnya setiap kita membuat element
 pada HTML, ada element semu yang bisa kita beri style. Pseudo element ditulis menggunakan 2 tanda titik dua (::)
 setelah selector seperti ini.
 
-```
+```css
 selector::pseudo-element {
   property: value;
 }
 ```
 
-> catatan : Pada CSS1 dan CSS2, pseudo element ditulis menggunakan 1 tanda titik dua (:). Tujuan utama
+> Catatan : Pada CSS1 dan CSS2, pseudo element ditulis menggunakan 1 tanda titik dua (:). Tujuan utama
 > perubahan penulisan pseudo element adalah untuk mempermudah membedakan antara pseudo element dan pseudo
 > class. Jangan heran apabila kalian menemukan penulisan pseudo element menggunakan 1 tanda titik dua (:).
 
-### Macam-macam pseudo element
+## Macam-macam pseudo element
+
+### ::first-line
+
+Digunakan untuk menambahkan style pada baris pertama dalam sebuah text.
+
+Contoh :
+
+```css
+p::first-line {
+  color: lightblue;
+}
+
+/*  
+  Baris pertama pada p
+  akan berwarna biru muda
+*/
+```
+
+### ::first-letter
+
+Digunakan untuk menambahkan style pada huruf pertama dalam sebuah text.
+
+Contoh :
 
-#### ::first-line
-
-  Digunakan untuk menambahkan style pada baris pertama dalam sebuah text.
-
-  contoh :
-
-  ```css
-  p::first-line {
-    color: lightblue;
-  }
-
-  /*  
-    baris pertama pada p
-    akan berwarna biru muda
-  */
-  ```
-
-#### ::first-letter
-
-  Digunakan untuk menambahkan style pada huruf pertama dalam sebuah text.
-
-  contoh :
-
-  ```css
-  h1::first-letter {
-    color: lightgreen;
-    font-size: 200%;
-  }
-
-  /*  
-    huruf pertama pada h1 akan berwarna hijau muda
-    dan berukuran lebih besar
-  */
-  ```
-
-#### ::before
-
-  Digunakan untuk menambahkan beberapa konten dan style di belakang/sebelum element. Pseudo element
-  ini termasuk yang paling sering digunakan karena fungsinya yang cukup unik yaitu bisa menambahkan sesuatu
-  pada element kita, bahkan kita bisa memasukkan icon pada pseudo element ini.
-
-  contoh :
-
-  ```css
-  h1::before {
-    content: "Before";
-    background-color: blue;
-  }
-
-  /*
-    Akan muncul tulisan "Before" yang memiliki background color berwarna biru
-    di belakang element h1
-  */
-  ```
-
-#### ::after
-
-  Pseudo element ini kebalikan dari ::before, digunakan untuk menambahkan beberapa
-  konten dan style di depan/setelah element. Pseudo element ini juga cukup sering digunakan.
-
-  Contoh :
-
-  ```css
-  h1::after {
-    content: "After";
-    background-color: green;
-  }
-
-  /*
-    Akan muncul tulisan "After" yang memiliki background color berwarna biru
-    di depan element h1
-  */
-  ```
-
-#### ::marker
-  Pseudo element ini hanya bisa digunakan pada `list-item`, fungsinya untuk memberi style pada penanda dalam list.
-
-  Contoh :
-
-  ```css
-  ul li::marker {
-    color: orange;
-  }
-
-  /*
-    Warna enanda dalam li akan berubah menjadi warna orange.
-  */
-  ```
-
-#### ::selection
-  Digunakan untuk memberi style pada saat user menyorot suatu element seperti
-  meng-klik dan menyeret teks.
-
-  ```css
-  p::selection {
-    color: green;
-    background-color: lightblue;
-  }
-
-  /*
-    Warna background dan warna font akan berubah saat user menyorot element p.
-  */
-  ```
+```css
+h1::first-letter {
+  color: lightgreen;
+  font-size: 200%;
+}
+
+/*  
+  Huruf pertama pada h1 akan berwarna hijau muda
+  dan berukuran lebih besar
+*/
+```
+
+### ::before
+
+Digunakan untuk menambahkan beberapa konten dan style di belakang/sebelum element. Pseudo element
+ini termasuk yang paling sering digunakan karena fungsinya yang cukup unik yaitu bisa menambahkan sesuatu
+pada element kita, bahkan kita bisa memasukkan icon pada pseudo element ini.
+
+Contoh :
+
+```css
+h1::before {
+  content: "Before";
+  background-color: blue;
+}
+
+/*
+  Akan muncul tulisan "Before" yang memiliki background color berwarna biru
+  di belakang element h1
+*/
+```
+
+### ::after
+
+Pseudo element ini kebalikan dari ::before, digunakan untuk menambahkan beberapa
+konten dan style di depan/setelah element. Pseudo element ini juga cukup sering digunakan.
+
+Contoh :
+
+```css
+h1::after {
+  content: "After";
+  background-color: green;
+}
+
+/*
+  Akan muncul tulisan "After" yang memiliki background color berwarna biru
+  di depan element h1
+*/
+```
+
+### ::marker
+
+Pseudo element ini hanya bisa digunakan pada `list-item`, fungsinya untuk memberi style pada penanda dalam list.
+
+Contoh :
+
+```css
+ul li::marker {
+  color: orange;
+}
+
+/*
+  Warna penanda dalam li akan berubah menjadi warna orange.
+*/
+```
+
+### ::selection
+
+Digunakan untuk memberi style pada saat user menyorot suatu element seperti
+meng-klik dan menyeret teks.
+
+```css
+p::selection {
+  color: green;
+  background-color: lightblue;
+}
+
+/*
+  Warna background dan warna font akan berubah saat user menyorot element p.
+*/
+```

HTML/021 HTML Id/README.md

@@ -0,0 +1,72 @@
+# HTML ID
+
+ID adalah attribute pada HTML yang digunakan untuk memberikan tanda pada element HTML yang sifatnya unique.
+Unique? Artinya kalian tidak boleh memiliki element dengan ID yang sama di dalam HTML. Cara mengakses
+ID di dalam CSS adalah dengan tanda pagar (#), misalnya seperti di bawah ini:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>HTML ID</title>
+    <style>
+      #coba-id {
+        color: lightblue;
+        background-color: teal;
+      }
+    </style>
+  </head>
+  <body>
+    <h1 id="coba-id">memberi style pada id</h1>
+  </body>
+</html>
+```
+
+Hasilnya:
+![Cara memberi style pada ID](img/cara-memberi-style-pada-id.png)
+
+## Perbedaan ID dengan class
+
+- Element HTML boleh memiliki class yang sama, sementara ID tidak.
+- ID memiliki `specifity` yang lebih besar dibanding dengan class, apa maksudnya ini? Lihat contoh dibawah agar lebih jelas.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Contoh Specifity Pada ID</title>
+    <style>
+      #ini-id {
+        color: lightgreen;
+        background-color: blue;
+      }
+
+      .ini-class {
+        background-color: red;
+        color: orange;
+      }
+    </style>
+  </head>
+  <body>
+    <h1 id="ini-id" class="ini-class">ID Memiliki Specifity lebih besar dibandingkan class</h1>
+
+    <!-- h1 di atas akan memiliki warna lightgreen dengan background blue, sesuai dengan style yang diberikan pada ID. -->
+    <!-- Hal ini disebabkan karena ID memiliki speficity lebih besar dibandingkan dengan class. -->
+  </body>
+</html>
+```
+
+Hasilnya:
+![Specificity Pada ID](img/specifity-pada-id.png)
+
+> Catatan:
+>
+> - Penulisan ID bersifat case sensitif, berarti `id="test-id"` dengan `id="TEST-ID"` itu berbeda.
+> - Penulisan ID harus memiliki setidaknya 1 karakter.
+> - Penulisan ID tidak boleh diawali dengan angka.
+> - Penulisan ID tidak boleh mengandung spasi, tab, dan sejenisnya.
+
+Referensi:
+
+- [W3School](https://www.w3schools.com/html/html_id.asp)
+- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)

HTML/023 HTML Script/README.md

@@ -0,0 +1,51 @@
+# HTML Script
+
+Dalam HTML, tag `<script>` digunakan untuk menyisipkan script, biasanya menggunakan Javascript. Kenapa
+kita membutuhkan script? Hal ini diperlukan untuk membuat website kita menjadi semakin interaktif.
+Kalian bisa menuliskan script langsung di dalam HTML atau bisa juga dipisah menjadi file
+yang berbeda lalu tambahkan attribute `src=""` untuk menyambungkan script tersebut.
+
+Memanipulasi website dengan Javascript disebut dengan _DOM Manipulation_. Kalian bisa belajar
+tentang _DOM Manipulation_ di repository bellshade [Javascript](https://github.com/bellshade/Javascript/tree/main/learn/DOM).
+
+## Contoh Penggunaan `<script>`
+
+```html
+<html lang="en">
+  <head>
+    <title>Script</title>
+  </head>
+  <body>
+    <h1 id="h1">Belum diklik!</h1>
+    <button id="button">Klik Saya!</button>
+
+    <script>
+      document.getElementById("button").addEventListener("click", function () {
+        document.getElementById("h1").innerText = "Sudah diklik!";
+      });
+    </script>
+  </body>
+</html>
+```
+
+Hasilnya:
+
+- ![Contoh Script](img/contoh-script-1.png)
+- ![Contoh Script](img/contoh-script-2.png)
+
+## Attribute yang ada pada `<script>`
+
+| Attribute        | value                                                                                                                                                              | Deskripsi                                                                                                                                                                                                                                                                  |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `async`          | async                                                                                                                                                              | Digunakan untuk membuat script didownload saat HTML sedang diparse, lalu setelah selesai didownload, script langsung dieksekusi/dijalankan tanpa perlu menunggu pada titik yang memiliki tag `<script>`. (Attribute ini hanya bisa digunakan pada script eksternal)       |
+| `crossorigin`    | `anonymous`, `use-credential`                                                                                                                                      | Membuat mode request menjadi HTTP CORS Request.                                                                                                                                                                                                                             |
+| `defer`          | defer                                                                                                                                                              | Digunakan untuk membuat script didownload pada saat HTML sedang diparse. Setelah selesai didownload, script tidak langsung dieksekusi. Script baru dieksekusi dan dijalankan ketika HTML telah selesai diparse. (Attribute ini hanya bisa digunakan pada script eksternal) |
+| `integrity`      | _hash file_                                                                                                                                                        | Digunakan untuk mengizinkan browser memeriksa script yang diambil untuk memastikan bahwa jangan jalankan apabila sumber dimanipulasi.                                                                                                                                      |
+| `nomodule`       | `true`, `false`                                                                                                                                                    | Digunakan untuk menentukan bahwa script tidak boleh dijalankan di browser yang mendukung modul ES2015.                                                                                                                                                                      |
+| `reffererpolicy` | `no-referrer`, `no-referrer-when-downgrade`, `origin`, `origin-when-cross-origin`, `same-origin`, `strict-origin`, `strict-origin-when-cross-origin`, `unsafe-url` | Digunakan untuk menentukan informasi mana yang akan dikirim saat mengambil script.                                                                                                                                                                                           |
+| `src`            | _URL_                                                                                                                                                              | Digunakan untuk menentukan url dari file script yang akan digunakan.                                                                                                                                                                                                        |
+| `type`           | _scripttype_                                                                                                                                                       | Digunakan untuk menentukan jenis media dari script.                                                                                                                                                                                                                         |
+
+Referensi:
+
+- [W3School](https://www.w3schools.com/html/html_scripts.asp)

HTML/023 HTML Script/script.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Script</title>
+  </head>
+  <body>
+    <h1 id="h1">Belum diklik!</h1>
+    <button id="button">Klik Saya!</button>
+
+    <script>
+      document.getElementById("button").addEventListener("click", function () {
+        document.getElementById("h1").innerText = "Sudah diklik!";
+      });
+    </script>
+  </body>
+</html>