From 29b0899fdfadf9801902c9bf610b46f5a2403211 Mon Sep 17 00:00:00 2001 From: Fanreza Date: Sun, 2 Oct 2022 09:27:12 +0700 Subject: [PATCH 1/4] feat: add opengraph into META section --- HTML/027 HTML Meta/README.md | 81 +++++++++++++++++++++++++++--------- 1 file changed, 61 insertions(+), 20 deletions(-) diff --git a/HTML/027 HTML Meta/README.md b/HTML/027 HTML Meta/README.md index 827d3b9..07de9cb 100644 --- a/HTML/027 HTML Meta/README.md +++ b/HTML/027 HTML Meta/README.md @@ -1,22 +1,23 @@ # HTML META + ### Apa itu HTML meta ? -Tag `````` di dalam html mendefinisikan metadata tentang dokumen HTML. +Tag `` di dalam html mendefinisikan metadata tentang dokumen HTML. Metadata adalah informasi tentang data. -Tag `````` selalu berada di dalam `````` elemen dan biasanya digunakan untuk menspesifikasikan karakter, -mendeskripsikan halaman, author dari dokumen dan settingan viewport. +Tag `` selalu berada di dalam `` elemen dan biasanya digunakan untuk menspesifikasikan karakter, +mendeskripsikan halaman, author dari dokumen dan settingan viewport. Metadata tidak akan terlihat di halaman website namun akan terlihat didalam source code. Metadata digunakan oleh browser (cara menampilkan konten atau memuat ulang halaman web), mesin pencari/search engines (keyword), dan layanan web lainnya. Ada metode untuk membiarkan web desainer untuk mengambil kendali atas viewport (area yang terlihat oleh pengguna dari halaman web), -melalui tag ``````. +melalui tag ``. ### Emmet Abbreviation -Untuk beberapa IDE seperti Visual Studio Code, sudah tersedia emmet yang berguna untuk mempermudah pembuatan tag template HTML termasuk ``````. Yaitu dengan mengetik tanda `!` lalu tekan `Enter`. +Untuk beberapa IDE seperti Visual Studio Code, sudah tersedia emmet yang berguna untuk mempermudah pembuatan tag template HTML termasuk ``. Yaitu dengan mengetik tanda `!` lalu tekan `Enter`. ![preview](./img/emmet.png) @@ -26,44 +27,84 @@ Untuk beberapa IDE seperti Visual Studio Code, sudah tersedia emmet yang berguna ```html - - - - - + + + + + ``` #### Contoh lain Keywords untuk search engines: -`````` +`` Deskripsi untuk halaman page: -`````` +`` Author dari web -`````` +`` Refresh dokumen setiap 40 detik -`````` +`` Setting viewport untuk membuat website terlihat bagus di semua divice -`````` +`` ### Setting viewport -Area pandang (Viewport) adalah area halaman web yang terlihat oleh pengguna. Area ini bervariasi dengan perangkat viewport akan +Area pandang (Viewport) adalah area halaman web yang terlihat oleh pengguna. Area ini bervariasi dengan perangkat viewport akan terlihat lebih kecil di layar ponsel daripada di layar komputer. -Elemen `````` harus disertakan disemua halaman web -`````` +Elemen `` harus disertakan disemua halaman web +`` Ini memberi browser instruksi untuk mengontrol dimensi dan skala halaman web. -```width=device-width``` mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat). +`width=device-width` mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat). -```initial-scale=1.0``` mengatur tingkatan zoom pertama saat halaman web pertama kali dimuat. +`initial-scale=1.0` mengatur tingkatan zoom pertama saat halaman web pertama kali dimuat. Referensi : https://www.w3schools.com/tags/tag_meta.asp +### Open Graph + +`Open Graph` merupakan protocol dalam integrasi website kedalam sosial media, seperti Facebook, Twitter, LinkedIn, dll. +Dengan `Open Graph` kita dapat mengontrol informasi apa saja yang dapat ditampilkan pada sosial media ketika kita membagikan link website kita. + +protocol ini pertama kali diperkenalkan oleh `Facebook` pada tahun 2010. + +cara menambahkan open graph pada website + +```html + + + + + + + + +``` + +Open Graph dapat berguna untuk kebutuhan SEO, dengan menambahkan informasi yang detail di website kita, maka akan memudahkan mesin pencari untuk menampilkan website kita di halaman pencarian. + +Lalu bagaimana cara kita mengecek apakah Open Graph sudah benar-benar terintegrasi dengan website kita? + +beberapa sosial media memiliki _debugger_ nya masing masing, contohnya + +Facebook: https://developers.facebook.com/tools/debug/ + +Twitter: https://cards-dev.twitter.com/validator + +LinkedIn: https://www.linkedin.com/post-inspector/ + +Pinterest: https://developers.pinterest.com/tools/url-debugger/ + +atau kalian bisa menggunakan tools pada https://www.opengraph.xyz/ +Referensi: https://ogp.me/. From f03a58e10f6bb854d2115dfd658014a915d7e63c Mon Sep 17 00:00:00 2001 From: Fanreza Date: Sun, 2 Oct 2022 15:31:58 +0700 Subject: [PATCH 2/4] feat: add HTML Emojis --- HTML/034 HTML Emojis/README.md | 42 ++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 HTML/034 HTML Emojis/README.md diff --git a/HTML/034 HTML Emojis/README.md b/HTML/034 HTML Emojis/README.md new file mode 100644 index 0000000..3927ab6 --- /dev/null +++ b/HTML/034 HTML Emojis/README.md @@ -0,0 +1,42 @@ +# HTML Emojis + +HTML dapat menampilakan sebuah emojis dengan menggunakan _decimal_ atau _hexadecimal_ + +sebagai contoh + +```HTML + +

Akan menampilkan 🦁

+ + +

Akan menampilkan 🦁

+``` + +Daftar emojis dapat kamu lihat disini https://unicode.org/emoji/charts/full-emoji-list.html + +## Emojis dengan tone warna kulit + +Beberapa emoji memiliki tone warna kulit yang berbeda beda, berikut contoh tone warna kulitnya, + +| Decimal | Warna | +| :-------: | :--------------------: | +| 🏿 | Dark skin tone | +| 🏾 | Medium Dark skin tone | +| 🏽 | Medium skin tone | +| 🏼 | Medium Light skin tone | +| 🏻 | Light skin tone | + +Penggunaan warna kulit dapat ditambahkan setelah kode emoji, sebagai contoh + +```HTML +

🤚 No skin tone

+

🤚🏿 Dark skin tone

+

🤚🏾 Medium Dark skin tone

+

🤚🏽 Medium skin tone

+

🤚🏼 Medium Light skin tone

+

🤚🏻 Light skin tone

+``` + +Referensi:
+https://www.w3schools.com/charsets/ref_emoji.asp
+https://www.w3schools.com/charsets/ref_emoji_skin_tones.asp From d5a8467b62c20076ce3adb47e243fb04ed7ce0c6 Mon Sep 17 00:00:00 2001 From: Fanreza Date: Sun, 2 Oct 2022 15:35:30 +0700 Subject: [PATCH 3/4] feat: add more detailed emojis structure --- HTML/034 HTML Emojis/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/HTML/034 HTML Emojis/README.md b/HTML/034 HTML Emojis/README.md index 3927ab6..532c86c 100644 --- a/HTML/034 HTML Emojis/README.md +++ b/HTML/034 HTML Emojis/README.md @@ -1,6 +1,6 @@ # HTML Emojis -HTML dapat menampilakan sebuah emojis dengan menggunakan _decimal_ atau _hexadecimal_ +HTML dapat menampilakan sebuah emojis dengan menggunakan _decimal_ atau _hexadecimal_, dan agar browser memahami kalau kita sedang menampilkan _character_ kita harus mengawali dengan `&#` dan diakhiri dengan `;`. sebagai contoh From c07e0305461dbf8af1cf2be62b7571dd56974cec Mon Sep 17 00:00:00 2001 From: Fanreza Date: Sun, 2 Oct 2022 18:48:41 +0700 Subject: [PATCH 4/4] feat: add emoji preview for tone and adding backtick for decimal --- HTML/034 HTML Emojis/README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/HTML/034 HTML Emojis/README.md b/HTML/034 HTML Emojis/README.md index 532c86c..1cb0850 100644 --- a/HTML/034 HTML Emojis/README.md +++ b/HTML/034 HTML Emojis/README.md @@ -18,13 +18,13 @@ Daftar emojis dapat kamu lihat disini https://unicode.org/emoji/charts/full-emoj Beberapa emoji memiliki tone warna kulit yang berbeda beda, berikut contoh tone warna kulitnya, -| Decimal | Warna | -| :-------: | :--------------------: | -| 🏿 | Dark skin tone | -| 🏾 | Medium Dark skin tone | -| 🏽 | Medium skin tone | -| 🏼 | Medium Light skin tone | -| 🏻 | Light skin tone | +| Decimal | Warna | Preview | +| :---------: | :--------------------: | --------- | +| `🏿` | Dark skin tone | 🏿 | +| `🏾` | Medium Dark skin tone | 🏾 | +| `🏽` | Medium skin tone | 🏽 | +| `🏼` | Medium Light skin tone | 🏼 | +| `🏻` | Light skin tone | 🏻 | Penggunaan warna kulit dapat ditambahkan setelah kode emoji, sebagai contoh