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/. diff --git a/HTML/034 HTML Emojis/README.md b/HTML/034 HTML Emojis/README.md new file mode 100644 index 0000000..532c86c --- /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_, dan agar browser memahami kalau kita sedang menampilkan _character_ kita harus mengawali dengan `&#` dan diakhiri dengan `;`. + +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