1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
---
title: Multimedia dan Embedding
slug: Learn/HTML/Multimedia_dan_embedding
tags:
- Asesmen
- Audio
- CodingScripting
- Flash
- HTML
- Image
- Landing
- Multimedia
- Panduan
- Pemula
- Pengembedan
- SVG
- Video
- Web
- belajar
- iframe
- imagemap
- img
- responsif
translation_of: Learn/HTML/Multimedia_and_embedding
---
<p>{{LearnSidebar}}</p>
<p class="summary">We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the web come alive with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.</p>
<h2 id="Persyaratan">Persyaratan</h2>
<p>Sebelum memulai modul ini, kamu harus punya pengetahuan mendasar tentang HTML dasar, seperti dicover sebelumnya dalam <a href="https://developer.mozilla.org/id/docs/Learn/HTML/Pengenalan_HTML">Pengenalan HTML</a>. Kalau kamu belum bekerja melalui modul ini (atau sesuatu yang serupa), kerja dulu di situ, lalu kembali lagi!</p>
<div class="note">
<p><strong>Catatan</strong>: Kalau kamu bekerja pada komputer/tablet/device lain yang mana kamu tidak bisa membuat <em>file</em>mu sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program coding daring macam <a href="https://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>
<h2 id="Petunjuk">Petunjuk</h2>
<p>Module ini berisi artikel berikut yang akan mengantar kamu melalui semua fundamental mengembed multimedia dalam halaman web.</p>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Image dalam HTML</a></dt>
<dd>Ada tipe multimedia lain yang dipertimbangkan, tapi itu logis jika mulai dengan elemen {{htmlelement("img")}} yang untuk mengembed image sederhana ke dalam halaman web. Di artikel ini kita akan melihat bagaimana menggunakan itu lebih dalam, termasuk dasar, menganotasi itu dengan caption menggunakan {{htmlelement("figure")}}, dan bagaimana itu dikaitkan dengan CSS background images.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Konten video dan audio</a></dt>
<dd>Berikutnya, kita akan melihat bagaimana menggunakan elemen {{htmlelement("video")}} dan {{htmlelement("audio")}} HTML5 untuk mengembed video dan audio dalam halaman kita, termasuk dasar, menyediakan akses ke format <em>file</em> berbeda ke peramban berbeda, menambah caption dan subtitle, dan bagaimana menambah fallback untuk peramban jadul.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Dari <object> ke <iframe> — teknologi pengembedan lain</a></dt>
<dd>Pada poin ini kita akan mengambil langkah menyamping, melihat pasangan elemen yang dipakai untuk mengembed beragam tipe konten ke dalam halaman web: elemen {{htmlelement("iframe")}}, {{htmlelement("embed")}} dan {{htmlelement("object")}}. <code><iframe></code> dipakai untuk mengembed halaman web lain, dan 2 lainnya untuk mengembed PDF, SVG, dan bahkan Flash — teknologi yang jarang, tapi masih ada saja.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Menambah grafis vektor ke web</a></dt>
<dd>Grafis vektor bisa berfaedah dalam beberapa situasi. Tidak seperti format reguler macam PNG/JPG, mereka tidak terdistorsi/terpixelasi ketika dizoom-in — tetap mulus ketika discale. Artikel ini memperkenalkan kamu ke grafis vektor dan bagaimana memasukkan format {{glossary("SVG")}} populer ke dalam halaman web.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Image responsif</a></dt>
<dd>Dengan berbagai tipe device yang mampu meramban web — dari ponsel mobile ke komputer desktop — konsep esensial untuk menguasai dunia web modern web world ialah desain responsif. Ini menunjukkan kreasi halaman web yang otomatis menyesuaikan fitur mereka dengan beragam ukuran layar, resolusi, dan lain sebagainya. Ini akan dibahas mendetil dalam modul CSS lebih lanjut, tapi untuk sekarang, kita akan melihat tools yang tersedia bagi HTML untuk membuat responsif image, termasuk elemen {{htmlelement("picture")}}.</dd>
</dl>
<h2 id="Asesmen">Asesmen</h2>
<p>Asesmen berikut akan menguhi pemahamanmu tentang HTML dasar yang dicover dalam panduan di atas:</p>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Halaman splash Mozilla</a></dt>
<dd>Dalam asesmen ini, kita akan menguji pengetahuanmu tentang beberapa teknik yang didiskusikan dalam artikel modul, membuat kamu menambah beberapa image dan video ke halaman splash funky tentang Mozilla!</dd>
</dl>
<h2 id="Lihat_juga">Lihat juga</h2>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></dt>
<dd>Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.</dd>
<dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt>
<dd>
<p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in this <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).</p>
</dd>
</dl>
|
