Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML Emojis #251

Closed
wants to merge 3 commits into from
Closed

HTML Emojis #251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
29b0899
feat: add opengraph into META section
Fanreza Oct 2, 2022
f03a58e
feat: add HTML Emojis
Fanreza Oct 2, 2022
d5a8467
feat: add more detailed emojis structure
Fanreza Oct 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 61 additions & 20 deletions HTML/027 HTML Meta/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
# HTML META

### Apa itu HTML meta ?

Tag ```<meta>``` di dalam html mendefinisikan metadata tentang dokumen HTML.
Tag `<meta>` di dalam html mendefinisikan metadata tentang dokumen HTML.
Metadata adalah informasi tentang data.

Tag ```<meta>``` selalu berada di dalam ```<head>``` elemen dan biasanya digunakan untuk menspesifikasikan karakter,
mendeskripsikan halaman, author dari dokumen dan settingan viewport.
Tag `<meta>` selalu berada di dalam `<head>` 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 ```<meta>```.
melalui tag `<meta>`.

### Emmet Abbreviation

Untuk beberapa IDE seperti Visual Studio Code, sudah tersedia emmet yang berguna untuk mempermudah pembuatan tag template HTML termasuk ```<meta>```. 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 `<meta>`. Yaitu dengan mengetik tanda `!` lalu tekan `Enter`.

![preview](./img/emmet.png)

Expand All @@ -26,44 +27,84 @@ Untuk beberapa IDE seperti Visual Studio Code, sudah tersedia emmet yang berguna

```html
<head>
<meta charset="UTF-8">
<meta name="deskripsi" content="Cara PR">
<meta name="keywords" content="Github, PR, Pull request">
<meta name="author" content="Putri Aliya">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="deskripsi" content="Cara PR" />
<meta name="keywords" content="Github, PR, Pull request" />
<meta name="author" content="Putri Aliya" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
```

#### Contoh lain

Keywords untuk search engines:
```<meta name="keywords" content="Github, PR, Pull request">```
`<meta name="keywords" content="Github, PR, Pull request">`

Deskripsi untuk halaman page:
```<meta name="description" content="Cara PR">```
`<meta name="description" content="Cara PR">`

Author dari web
```<meta name="author" content="Putri Aliya">```
`<meta name="author" content="Putri Aliya">`

Refresh dokumen setiap 40 detik
```<meta http-equiv="refresh" content="40">```
`<meta http-equiv="refresh" content="40">`

Setting viewport untuk membuat website terlihat bagus di semua divice
```<meta name="viewport" content="width=device-width, initial-scale=1.0">```
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

### 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 ```<meta>``` harus disertakan disemua halaman web
```<meta name="viewport" content="width=device-width, initial-scale=1.0">```
Elemen `<meta>` harus disertakan disemua halaman web
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
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
<meta property="og:url" content="https://www.linkwebsite.com" />
<!-- Tag ini merepresentasikan link halaman yang akan ditampilkan -->
<meta property="og:title" content="Pengenalan Mengenai Open Graph" />
<!-- Tag ini merepresentasikan judul yang akan ditampilkan -->
<meta
property="og:description"
content="`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."
/>
<!-- Tag ini merepresentasikan deskripsi website yang akan ditampilkan -->
<meta property="og:image" content="https://www.linkwebsite/link-gambar" />
<!-- Tag ini merepresentasikan gambar yang akan ditampilkan -->
```

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/.
42 changes: 42 additions & 0 deletions HTML/034 HTML Emojis/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<!-- Menggunakan Hexadecimal-->
<p>Akan menampilkan &#x1F981;</p> <!--Akan menampilkan 🦁 -->

<!-- Menggunakan Decimal -->
<p>Akan menampilkan &#129409;</p> <!--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 |
| :-------: | :--------------------: |
| &#127999; | Dark skin tone |
| &#127998; | Medium Dark skin tone |
| &#127997; | Medium skin tone |
| &#127996; | Medium Light skin tone |
| &#127995; | Light skin tone |
Comment on lines +23 to +27
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tambahkan backtick pada semua value decimal, agar tidak berubah menjadi warna seperti pada gambar ini.
image


Penggunaan warna kulit dapat ditambahkan setelah kode emoji, sebagai contoh

```HTML
<p><span>&#129306;</span> No skin tone</p> <!--🤚 No skin tone -->
<p><span>&#129306;&#127999;</span> Dark skin tone</p> <!--🤚🏿 Dark skin tone -->
<p><span>&#129306;&#127998;</span> Medium Dark skin tone</p> <!--🤚🏾 Medium Dark skin tone -->
<p><span>&#129306;&#127997;</span> Medium skin tone</p> <!--🤚🏽 Medium skin tone -->
<p><span>&#129306;&#127996;</span> Medium Light skin tone</p> <!--🤚🏼 Medium Light skin tone -->
<p><span>&#129306;&#127995;</span> Light skin tone</p> <!--🤚🏻 Light skin tone -->
```

Referensi: <br />
https://www.w3schools.com/charsets/ref_emoji.asp <br />
https://www.w3schools.com/charsets/ref_emoji_skin_tones.asp