From dbc000aebd0fa26ed40eb6c648cd262b43ea78c5 Mon Sep 17 00:00:00 2001 From: Devin Winando Date: Fri, 5 Nov 2021 20:14:30 +0700 Subject: [PATCH 1/9] add: menambahkan HTML ID --- .vscode/settings.json | 3 + HTML/021 HTML Id/ID.html | 23 ++++++ HTML/021 HTML Id/README.md | 67 ++++++++++++++++++ .../img/cara-memberi-style-pada-id.png | Bin 0 -> 9281 bytes HTML/021 HTML Id/img/specifity-pada-id.png | Bin 0 -> 14422 bytes HTML/023 HTML Script/README.md | 0 6 files changed, 93 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 HTML/021 HTML Id/ID.html create mode 100644 HTML/021 HTML Id/README.md create mode 100644 HTML/021 HTML Id/img/cara-memberi-style-pada-id.png create mode 100644 HTML/021 HTML Id/img/specifity-pada-id.png create mode 100644 HTML/023 HTML Script/README.md diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..3789aae2 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "discord.enabled": true +} diff --git a/HTML/021 HTML Id/ID.html b/HTML/021 HTML Id/ID.html new file mode 100644 index 00000000..de6f4e89 --- /dev/null +++ b/HTML/021 HTML Id/ID.html @@ -0,0 +1,23 @@ + + + + Specifity + + + +

ID Memiliki Specifity lebih besar dibandingkan class

+ + + + + diff --git a/HTML/021 HTML Id/README.md b/HTML/021 HTML Id/README.md new file mode 100644 index 00000000..5cd333be --- /dev/null +++ b/HTML/021 HTML Id/README.md @@ -0,0 +1,67 @@ +# HTML ID + +ID adalah attribute pada HTML yang digunakan untuk memberikan tanda 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 + + + + HTML ID + + + +

Cara memberi style pada id

+ + +``` + +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 + + + + Contoh Specifity Pada ID + + + +

ID Memiliki Specifity lebih besar dibandingkan class

+ + + + + +``` + +Hasilnya: +![Specificity Pada ID](img/specifity-pada-id.png) + +> Catatan: +> +> - Penulisan ID bersifat _case sensitif_, berarti `id="test-id"` dengan `id="TEST-ID"` akan berbeda. +> - Penulisan ID harus memiliki setidaknya 1 karakter. +> - Penulisan ID tidak boleh diawali dengan angka. +> - Penulisan ID tidak boleh mengandung spasi, tab, dan sejenisnya. diff --git a/HTML/021 HTML Id/img/cara-memberi-style-pada-id.png b/HTML/021 HTML Id/img/cara-memberi-style-pada-id.png new file mode 100644 index 0000000000000000000000000000000000000000..9f0ea68fe6a1e657bec21f80ddcde0675f1b17ec GIT binary patch literal 9281 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 ZSMs4UY-?04M-Byd)6&kO=FfXi{|8v7z}Wx* literal 0 HcmV?d00001 diff --git a/HTML/021 HTML Id/img/specifity-pada-id.png b/HTML/021 HTML Id/img/specifity-pada-id.png new file mode 100644 index 0000000000000000000000000000000000000000..a4183db1a2f38cba73e2e42efd685c961060fb52 GIT binary patch literal 14422 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 literal 0 HcmV?d00001 diff --git a/HTML/023 HTML Script/README.md b/HTML/023 HTML Script/README.md new file mode 100644 index 00000000..e69de29b From 62088f282914797f94cec4d29776f5ef1d89c77b Mon Sep 17 00:00:00 2001 From: Devin Winando Date: Fri, 5 Nov 2021 22:45:43 +0700 Subject: [PATCH 2/9] add: HTML Script --- CSS/030 CSS Pseudo Elements/README.md | 216 ++++++++++--------- HTML/021 HTML Id/ID.html | 23 -- HTML/021 HTML Id/README.md | 11 +- HTML/023 HTML Script/README.md | 43 ++++ HTML/023 HTML Script/img/contoh-script-1.png | Bin 0 -> 4286 bytes HTML/023 HTML Script/img/contoh-script-2.png | Bin 0 -> 4362 bytes HTML/023 HTML Script/script.html | 16 ++ 7 files changed, 176 insertions(+), 133 deletions(-) delete mode 100644 HTML/021 HTML Id/ID.html create mode 100644 HTML/023 HTML Script/img/contoh-script-1.png create mode 100644 HTML/023 HTML Script/img/contoh-script-2.png create mode 100644 HTML/023 HTML Script/script.html diff --git a/CSS/030 CSS Pseudo Elements/README.md b/CSS/030 CSS Pseudo Elements/README.md index 8e1f19e8..6c866b1f 100644 --- a/CSS/030 CSS Pseudo Elements/README.md +++ b/CSS/030 CSS Pseudo Elements/README.md @@ -1,12 +1,12 @@ -## 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 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; } @@ -16,108 +16,110 @@ selector::pseudo-element { > 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. +*/ +``` diff --git a/HTML/021 HTML Id/ID.html b/HTML/021 HTML Id/ID.html deleted file mode 100644 index de6f4e89..00000000 --- a/HTML/021 HTML Id/ID.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - Specifity - - - -

ID Memiliki Specifity lebih besar dibandingkan class

- - - - - diff --git a/HTML/021 HTML Id/README.md b/HTML/021 HTML Id/README.md index 5cd333be..c43093e8 100644 --- a/HTML/021 HTML Id/README.md +++ b/HTML/021 HTML Id/README.md @@ -25,10 +25,10 @@ ID di dalam CSS adalah dengan tanda pagar (#). misalnya seperti di bawah ini: Hasilnya: ![Cara memberi style pada ID](img/cara-memberi-style-pada-id.png) -Perbedaan ID dengan class: +## 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 +- ID memiliki `specifity` yang lebih besar dibanding dengan class. apa maksudnya ini? lihat contoh dibawah agar lebih jelas. ```html @@ -61,7 +61,12 @@ Hasilnya: > Catatan: > -> - Penulisan ID bersifat _case sensitif_, berarti `id="test-id"` dengan `id="TEST-ID"` akan berbeda. +> - 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) diff --git a/HTML/023 HTML Script/README.md b/HTML/023 HTML Script/README.md index e69de29b..fa5dd924 100644 --- a/HTML/023 HTML Script/README.md +++ b/HTML/023 HTML Script/README.md @@ -0,0 +1,43 @@ +# HTML Script + +Dalam HTML, tag ` + + +``` + +Hasilnya: +![Contoh Script](img/contoh-script-1.png) +![Contoh Script](img/contoh-script-2.png) + +## Attribute yang ada pada ` + + From d9ec080664cf2eaadd1ac41f97e8918a40e387c9 Mon Sep 17 00:00:00 2001 From: Devin Winando <77310346+DevinWinando@users.noreply.github.com> Date: Fri, 5 Nov 2021 22:47:11 +0700 Subject: [PATCH 3/9] fix: typo, dsb --- HTML/021 HTML Id/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/HTML/021 HTML Id/README.md b/HTML/021 HTML Id/README.md index c43093e8..98bafdeb 100644 --- a/HTML/021 HTML Id/README.md +++ b/HTML/021 HTML Id/README.md @@ -1,6 +1,6 @@ # HTML ID -ID adalah attribute pada HTML yang digunakan untuk memberikan tanda yang sifatnya _unique_. +ID adalah attribute pada HTML yang digunakan untuk memberikan tanda pada 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: From c7c3fb2f8d9077fe71c953df5434e41ac93956be Mon Sep 17 00:00:00 2001 From: Devin Winando Date: Sat, 6 Nov 2021 07:08:08 +0700 Subject: [PATCH 4/9] fix: menghapus .vscode maaf om, saya lupa buat gitignore jadi .vscodenya kebawa --- .vscode/settings.json | 3 --- HTML/021 HTML Id/README.md | 8 ++++---- HTML/023 HTML Script/README.md | 16 ++++++++++++---- 3 files changed, 16 insertions(+), 11 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 3789aae2..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "discord.enabled": true -} diff --git a/HTML/021 HTML Id/README.md b/HTML/021 HTML Id/README.md index 98bafdeb..18017bb0 100644 --- a/HTML/021 HTML Id/README.md +++ b/HTML/021 HTML Id/README.md @@ -1,7 +1,7 @@ # HTML ID -ID adalah attribute pada HTML yang digunakan untuk memberikan tanda pada yang sifatnya _unique_. -_Unique_? Artinya kalian tidak boleh memiliki element dengan ID yang sama di dalam HTML. Cara mengakses +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 @@ -17,7 +17,7 @@ ID di dalam CSS adalah dengan tanda pagar (#). misalnya seperti di bawah ini: -

Cara memberi style pada id

+

memberi style pada id

``` @@ -61,7 +61,7 @@ Hasilnya: > Catatan: > -> - Penulisan ID bersifat _case sensitif_, berarti `id="test-id"` dengan `id="TEST-ID"` itu berbeda. +> - 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. diff --git a/HTML/023 HTML Script/README.md b/HTML/023 HTML Script/README.md index fa5dd924..b1824ff4 100644 --- a/HTML/023 HTML Script/README.md +++ b/HTML/023 HTML Script/README.md @@ -1,10 +1,13 @@ # HTML Script Dalam HTML, tag `