From cef4cf3b7038a7f03d222ccd51d429510d765393 Mon Sep 17 00:00:00 2001 From: Acla Putra Date: Sat, 18 Dec 2021 01:06:31 +0700 Subject: [PATCH 1/2] docs: Menambahkan Materi 016 HTML Picture README.md & index.html sebagai contoh project --- HTML/016 HTML Picture/README.md | 60 ++++++++++++++++++++++++++++++++ HTML/016 HTML Picture/index.html | 46 ++++++++++++++++++++++++ 2 files changed, 106 insertions(+) create mode 100644 HTML/016 HTML Picture/README.md create mode 100644 HTML/016 HTML Picture/index.html diff --git a/HTML/016 HTML Picture/README.md b/HTML/016 HTML Picture/README.md new file mode 100644 index 00000000..93fcf8d7 --- /dev/null +++ b/HTML/016 HTML Picture/README.md @@ -0,0 +1,60 @@ +# HTML Picture + +## Apa itu HTML Picture? + +HTML memiliki sebuah elemen `` 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 + +``` + +ada juga child dari `` ini yaitu `` dan `` + +```html + + + + +``` + +untuk menampilkan gambar, kita perlu mengarahkan tag `` kepada file yang kita inginkan melalui atribut `src="url"` atau bisa juga `src="imagepath"` + +Belum belajar tag html img ? -> [HTML Image](https://github.com/bellshade/HTML-CSS/tree/main/HTML/015%20HTML%20Images) + +Terdapat beberapa attribut yang biasa digunakan dalam tag ``, yaitu: +- **srcset** - Digunakan untuk mengarahkan path dari suatu gambar. +- **sizes** - Digunakan untuk mengatur ukuran gambar. +- **media** - Digunakan untuk mengatur media query. + +## contoh Kode +```html + + + + + gambarku + +``` +atau +```html + + + + + kucing-kawin + +``` +## contoh pengimplementasiannya: +1. silahkan buka index.html di bagian atas, 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) \ No newline at end of file diff --git a/HTML/016 HTML Picture/index.html b/HTML/016 HTML Picture/index.html new file mode 100644 index 00000000..13e8c8ac --- /dev/null +++ b/HTML/016 HTML Picture/index.html @@ -0,0 +1,46 @@ + + + + + + + HTML PICTURE + + + +

HTML PICTURE

+ +
+ + + + + + +
+ + \ No newline at end of file From fbf5cea59f0e919480ffa309f096cf871599e2e2 Mon Sep 17 00:00:00 2001 From: Dhafit Farenza <87353624+dhafitf@users.noreply.github.com> Date: Mon, 20 Dec 2021 20:19:01 +0700 Subject: [PATCH 2/2] docs: memperbaiki penggunaan huruf --- HTML/016 HTML Picture/README.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/HTML/016 HTML Picture/README.md b/HTML/016 HTML Picture/README.md index 93fcf8d7..549114a3 100644 --- a/HTML/016 HTML Picture/README.md +++ b/HTML/016 HTML Picture/README.md @@ -6,12 +6,12 @@ HTML memiliki sebuah elemen `` yang sangat berguna dalam melakukan memb 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 +## Contoh kode ```html ``` -ada juga child dari `` ini yaitu `` dan `` +Ada juga child dari `` ini yaitu `` dan `` ```html @@ -20,16 +20,16 @@ ada juga child dari `` ini yaitu `` dan `` ``` -untuk menampilkan gambar, kita perlu mengarahkan tag `` kepada file yang kita inginkan melalui atribut `src="url"` atau bisa juga `src="imagepath"` +Untuk menampilkan gambar, kita perlu mengarahkan tag `` kepada file yang kita inginkan melalui atribut `src="url"` atau bisa juga `src="imagepath"` -Belum belajar tag html img ? -> [HTML Image](https://github.com/bellshade/HTML-CSS/tree/main/HTML/015%20HTML%20Images) +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 ``, yaitu: - **srcset** - Digunakan untuk mengarahkan path dari suatu gambar. - **sizes** - Digunakan untuk mengatur ukuran gambar. - **media** - Digunakan untuk mengatur media query. -## contoh Kode +## Contoh kode ```html @@ -47,14 +47,14 @@ atau kucing-kawin ``` -## contoh pengimplementasiannya: -1. silahkan buka index.html di bagian atas, 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. +## 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! +Semoga bermanfaat! -Source: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) \ No newline at end of file +Source: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)