bellshade · mergify · Dec 30, 2021 · Dec 17, 2021 · Dec 20, 2021
@@ -0,0 +1,60 @@
+# HTML Picture
+
+## Apa itu HTML Picture?
+
+HTML memiliki sebuah elemen `<picture>` yang sangat berguna dalam melakukan membangun sebuah website. Tanpa gambar website akan terasa sangat membosankan, maka dari itu kalian perlu mempelajari tentang HTML Picture.
+
+HTML Picture memiliki fungsi mirip seperti media query pada CSS, tetapi kita tidak memerlukan CSS untuk menggunakannya, hanya dengan HTML saja sudah bisa membuat img menjadi responsive pada website kalian.
+
+## Contoh kode
+```html
+<picture></picture>
+```
+
+Ada juga child dari `<picture>` ini yaitu `<source>` dan `<img>`
+
+```html
+<picture>
+    <source>
+    <img src="" alt="">
+</picture>
+```
+
+Untuk menampilkan gambar, kita perlu mengarahkan tag `<img>` kepada file yang kita inginkan melalui atribut `src="url"` atau bisa juga `src="imagepath"`
+
+Belum belajar tentang tag HTML img? Silahkan pelajari di [HTML Image](https://github.com/bellshade/HTML-CSS/tree/main/HTML/015%20HTML%20Images)
+
+Terdapat beberapa attribut yang biasa digunakan dalam tag `<source>`, yaitu:
+- **srcset** - Digunakan untuk mengarahkan path dari suatu gambar.
+- **sizes** - Digunakan untuk mengatur ukuran gambar.
+- **media** - Digunakan untuk mengatur media query.
+
+## Contoh kode
+```html
+<picture>
+    <source srcset="img1.png">
+    <source srcset="img2.png">
+    <source srcset="img3.png">
+    <img src="img1.png" alt="gambarku">
+</picture>
+```
+atau
+```html
+<picture>
+    <source media="(min-width: 960px)" srcset="img1.png">
+    <source media="(min-width: 600px)" srcset="img2.png">
+    <source srcset="img3.png">
+    <img src="img1.png" alt="kucing-kawin">
+</picture>
+```
+## Contoh pengimplementasiannya:
+1. Silahkan buka [index.html](index.html), copy dan paste seluruh isi kodenya.
+2. Buka vscode atau IDE favorit kalian.
+3. Buatlah file index.html & jalankan index.html pada browser kalian.
+4. Maka akan terlihat gambar kucing (lagi serius).
+5. Coba kecilkan browser kalian perlahan dari samping.
+6. Maka akan terlihat gambar kucing (lagi serius) berubah menjadi (lagi senyum), berubah lagi menjadi (lagi nangis) seiring browser kalian bertambah kecil.
+
+Semoga bermanfaat!
+
+Source: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML PICTURE</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            text-align: center;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        }
+        /* picture {
+            margin: 0 auto;
+            max-width: 100%;
+        } */
+        .picture-container {
+            width: 100%;
+            margin: 0 auto;
+        }
+        img {
+            max-width: 80%;
+        }
+    </style>
+</head>
+<body>
+    <h1>HTML PICTURE</h1>
+
+    <div class="picture-container">
+        <picture>
+            <source 
+                media="(min-width: 960px)"
+                srcset="https://th.bing.com/th/id/OIP.LrB1Pf9CpRXzjYkPQ1AjBAHaKM?pid=ImgDet&w=1115&h=1536&rs=1"
+            >
+            <source 
+                media="(min-width: 600px)"
+                srcset="https://i.pinimg.com/originals/f7/2a/64/f72a64f5dac334b48f793315479caf39.jpg"
+            >
+            <source srcset="https://th.bing.com/th/id/OIP.qz8zNyxJVXeZQ2NlOE8asQHaEO?pid=ImgDet&rs=1">
+            <img src="https://th.bing.com/th/id/OIP.LrB1Pf9CpRXzjYkPQ1AjBAHaKM?pid=ImgDet&w=1115&h=1536&rs=1" alt="">
+        </picture>
+    </div>
+</body>
+</html>