diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/id/web/guide | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/id/web/guide')
| -rw-r--r-- | files/id/web/guide/api/index.html | 26 | ||||
| -rw-r--r-- | files/id/web/guide/api/webrtc/index.html | 34 | ||||
| -rw-r--r-- | files/id/web/guide/css/getting_started/index.html | 32 | ||||
| -rw-r--r-- | files/id/web/guide/css/media_queries/index.html | 630 | ||||
| -rw-r--r-- | files/id/web/guide/grafis/index.html | 48 | ||||
| -rw-r--r-- | files/id/web/guide/html/forms/index.html | 340 | ||||
| -rw-r--r-- | files/id/web/guide/html/html5/index.html | 179 | ||||
| -rw-r--r-- | files/id/web/guide/index.html | 55 |
8 files changed, 1344 insertions, 0 deletions
diff --git a/files/id/web/guide/api/index.html b/files/id/web/guide/api/index.html new file mode 100644 index 0000000000..4e0e34c483 --- /dev/null +++ b/files/id/web/guide/api/index.html @@ -0,0 +1,26 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +<p>Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.</p> + +<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2> + +<p>{{ListGroups}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li> + <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li> + <li><a href="/en-US/docs/Learn">Learning web development</a></li> +</ul> diff --git a/files/id/web/guide/api/webrtc/index.html b/files/id/web/guide/api/webrtc/index.html new file mode 100644 index 0000000000..93c1a489eb --- /dev/null +++ b/files/id/web/guide/api/webrtc/index.html @@ -0,0 +1,34 @@ +--- +title: WebRTC +slug: Web/Guide/API/WebRTC +translation_of: Web/API/WebRTC_API +--- +<p><strong>WebRTC</strong> (RTC mengacu pada <em>Real-Time Communications</em>) adalah sebuah teknologi yang memungkinkan pengiriman audio atau video serta berbagi data antar peramban web (<em>peer</em>). Sebagai sebuah standar, WebRTC menghadirkan fitur pada peramban web untuk berbagi data dan melakukan telekonferensi secara <em>peer-to-peer</em>, tanpa perlu memasang <em>plugins</em> atau aplikasi pihak ketiga.</p> + +<p>Komponen WebRTC dapat diakses melalui JavaScript API, di antaranya: Nework Stream API, yang merepresentasikan audio atau video dalam bentuk data <em>stream</em>; PeerConnection API, yang memungkinkan dua atau lebih pengguna untuk berkomunikasi langsung melalui peramban web; dan DataChannel API, yang memungkinkan bentuk komunikasi lainnya secara <em>real-time</em> untuk <em>gaming</em>, <em>text chat</em>, <em>file transfer</em>, dan lainnya.</p> + +<div class="note"> +<p><span style="color: #000000;"><strong>Catatan:</strong> Dokumentasi ini sedang dalam proses pemindahan ke <a href="/id/docs/Web/API/WebRTC_API">laman baru</a>.</span></p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Komunikasi <em>peer-to-peer</em> pada WebRTC</a></dt> + <dd>Bagaimana cara melakukan komunikasi <em>peer-to-peer</em> menggunakan WebRTC API.</dd> + <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Pengantar arsitektur WebRTC</a></dt> + <dd>WebRTC memiliki banyak bagian di dalamnya, dan itu sangat membingungkan. Artikel ini bertujuan untuk menjelaskan bagian-bagian tersebut, dan bagaimana semuanya bekerja.</dd> + <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics">Dasar-dasar WebRTC</a></dt> + <dd>Setelah Anda memahami arsitektur WebRTC, Anda dapat melanjutkan ke artikel selanjutnya yang akan menjelaskan proses pengembangan aplikasi dasar RTC yang bekerja pada peramban web.</dd> +</dl> + +<h2 id="Referensi">Referensi</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Navigator.getUserMedia">Navigator.getUserMedia</a></dt> + <dd>API yang berfungsi untuk menangkap media (audio atau video).</dd> + <dt><a href="/en-US/docs/Web/API/RTCPeerConnection"><span style="color: #0095dd;">RTCPeerConnection</span></a></dt> + <dd>Antarmuka yang berfungsi untuk menangani data <em>streaming</em> antar dua <em>peer</em>.</dd> + <dt><a href="/en-US/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt> + <dd>Antarmuka yang berfungsi untuk mengirimkan data antar <em>peer</em>.</dd> +</dl> diff --git a/files/id/web/guide/css/getting_started/index.html b/files/id/web/guide/css/getting_started/index.html new file mode 100644 index 0000000000..c37ce973fa --- /dev/null +++ b/files/id/web/guide/css/getting_started/index.html @@ -0,0 +1,32 @@ +--- +title: Getting started with CSS +slug: Web/Guide/CSS/Getting_started +translation_of: Learn/CSS/First_steps +--- +<p><span class="seoSummary">This tutorial introduces you to the basic features and language (the syntax) for <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers. </span></p> +<p>The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">lists</a> more advanced resources.</p> +<nav class="fancyTOC"> + <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">What is CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Why use CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">How CSS works</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascading and inheritance</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selectors</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Readable CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Text styles</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Color</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Content</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Lists</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tables</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav> +<h2 id="What_you_need_to_get_started">What you need to get started</h2> +<ul> + <li>A text editor</li> + <li>A modern browser</li> + <li>Some experience working with a text editor and browser</li> +</ul> +<p>Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.</p> +<p><strong>Note:</strong> The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.</p> +<h2 id="How_to_use_this_tutorial">How to use this tutorial</h2> +<p>To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.</p> +<h3 id="Part_I_The_Basics_of_CSS">Part I: The Basics of CSS</h3> +<p>On each page, use the <em>Information</em> section to understand how CSS works. Use the <em>Action</em> section to try using CSS on your own computer.</p> +<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p> +<p>To understand CSS in more depth, read the information that you find in boxes captioned <em>More details</em>. Use the links there to find reference information about CSS.</p> +<h3 id="Part_II_The_Scope_of_CSS">Part II: The Scope of CSS</h3> +<p>A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.</p> +<ol> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></li> +</ol> diff --git a/files/id/web/guide/css/media_queries/index.html b/files/id/web/guide/css/media_queries/index.html new file mode 100644 index 0000000000..3fe883c5f6 --- /dev/null +++ b/files/id/web/guide/css/media_queries/index.html @@ -0,0 +1,630 @@ +--- +title: Media query CSS +slug: Web/Guide/CSS/Media_queries +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +<p><span class="seoSummary">M<strong>edia query</strong> terdiri dari jenis media dan paling sedikit satu ekspresi yang membatasi lingkup style sheets dengan menggunakan fitur media, seperti lebar, tinggi, dan warna. Media query, ditambahkan di <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, memungkinkan tampilan konten disesuaikan dengan alat penampil tertentu tanpa harus mengubah konten itu sendiri.</span></p> + +<h2 id="Sintaks">Sintaks</h2> + +<p>Media query terdiri dari jenis media (<a class="internal" href="/en-US/docs/CSS/@media" title="/en-US/docs/CSS/@media">media type</a>) dan dapat, sesuai dengan spesifikasi CSS3, mengandung satu atau lebih ekspresi, diekspresikan sebagai fitur media, baik benar (true) atau salah (false). Hasil query adalah benar jika jenis media yang disebutkan dalam media query cocok dengan jenis alat yang digunakan untuk menampilkan dokumen <strong>dan</strong> semua ekspresi di dalam media query adalah benar.</p> + +<pre class="brush: html"><code class="brush: html"><!-- Media query CSS pada elemen link --> +</code><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> + +<code class="brush: html"><!-- Media query CSS di dalam style sheet --> +<style> +@media (max-width: 600px) { + .facet_sidebar { + display: none; + } +} +</style></code></pre> + +<p>Ketika sebuah media query adalah benar, style sheet atau aturan style yang bersangkutan diterapkan, sesuai dengan aturan cascading normal. Style sheet dengan media query yang menempel pada tag <code><link></code> <a href="http://scottjehl.github.com/CSS-Download-Tests/" title="http://scottjehl.github.com/CSS-Download-Tests/">masih akan diunduh</a> bahkan jika media query tersebut adalah salah (false) (namun tidak akan diterapkan).</p> + +<p>Kecuali jika Anda menggunakan operator <code>not</code> atau <code>only</code>, jenis media adalah opsional dan jenis <code>all</code><span style="line-height: 1.572;"> akan diterapkan</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">.</span></p> + +<h3 id="Operator_logika">Operator logika</h3> + +<p>Anda dapat merancang media query kompleks menggunakan operator logika, termasuk <code>not</code>, <code>and</code>, dan <code>only</code>. Operator <code>and</code> digunakan untuk menggabungkan banyak fitur media (<a href="#Media_features" title="#Media_features">media features</a>) ke dalam satu media query tunggal, setiap fitur terkait harus benar (true) agar query benar (true). Operator <code>not</code> digunakan untuk menegasikan keseluruhan media query. Operator <code>only</code> digunakan untuk menerapkan suatu style hanya jika keseluruhan query cocok, berguna untuk mencegah browser lama menerapkan style-style tertentu. Jika Anda menggunakan operator-operator <code>not</code> atau <code>only</code>, Anda <em>harus</em> menyebutkan jenis media secara eksplisit.</p> + +<p>Anda juga dapat menggabungkan banyak media query dalam sebuah daftar terpisah koma; jika ada media query di dalam daftar yang benar (true), keseluruhan pernyataan media adalah benar (true). Hal ini setara dengan operator <code>or</code>.</p> + +<h4 id="and">and</h4> + +<p>Kata kunci <code>and</code> digunakan untuk menggabungkan banyak fitur media menjadi satu, seperti menggabungkan fitur media dengan jenis media. Media query dasar, sebuah fitur media tunggal dengan jenis media <code>all</code> secara implisit, dapat terlihat seperti ini:</p> + +<pre class="brush: css">@media (min-width: 700px) { ... }</pre> + +<p>Namun, jika, Anda menginginkan hal ini diterapkan hanya untuk tampilan lanskap, Anda dapat menggunakan operator <code>and</code> untuk menggabungkan fitur-fitur media tersebut.</p> + +<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Sekarang media query di atas hanya akan benar jika lebar viewport adalah 700px atau lebih dan dalam tampilan lanskap. Namun, jika, Anda hanya menginginkan hal ini untuk diterapkan jika jenis media tampilan adalah TV, Anda dapat menggabungkan fitur-fitur ini dengan jenis media menggunakan operator <code>and</code>.</p> + +<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Sekarang, media query di atas hanya akan diterapkan jika jenis media adalah TV, lebar viewport adalah 700px atau lebih, dan tampilan adalah lanskap.</p> + +<h4 id="daftar_terpisah_koma">daftar terpisah koma</h4> + +<p>Daftar terpisah koma adalah seperti operator logika <code>or</code> ketika digunakan dalam media query. Ketika menggunakan daftar media query terpisah koma, jika ada media query yang benar (true), style or style sheet akan diterapkan. Setiap media query di dalam daftar terpisah koma diperlakukan sebagai query individual, dan setiap operator yang diterapkan pada satu media query tidak mempengaruhi yang lainnya. Ini berarti daftar media query terpisah koma dapat ditujukan untuk fitur, jenis, dan kondisi media yang berbeda.</p> + +<p>Sebagai contoh, seandainya Anda ingin menerapkan seperangkat style jika alat penampil memiliki lebar minimum 700px atau alat genggam dalam moda lanskap, Anda dapat menulis sebagai berikut:</p> + +<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> + +<p>Pada contoh di atas, jika saya menggunakan perangkat <code>screen</code> dengan lebar viewport 800px, pernyataan media akan benar (true) karena bagian pertama, yang diinterpetasikan sebagai <code>@media all and (min-width: 700px)</code> akan berlaku pada perangkat saya dan oleh karena itu benar (true), terlepas dari fakta bahwa perangkat <code>screen</code> saya akan gagal dalam pengecekan jenis media <code>handheld</code> di media query kedua. Demikian pula, jika saya menggunakan perangkat genggam <code>handheld</code> dalam moda lanskap dengan lebar viewport 500px, walaupun media query pertama gagal karena lebar viewport tidak sesuai, media query kedua akan berhasil dan oleh karena itu pernyataan media akan menghasilkan nilai benar (true).</p> + +<h4 id="not">not</h4> + +<p>Kata kunci <code>not</code> berlaku pada keseluruhan media query dan memberikan nilai benar (true) jika media query akan sebaliknya memberikan nilai salah (false) (seperti fitur query <code>monochrome</code> pada warna tampilan atau lebar layar 600px dengan <code>min-width: 700px</code>). Sebuah <code>not</code> hanya akan menegasikan media query yang ditetapkan dan bukan setiap media query jika ada dalam daftar media query terpisah koma. Kata kunci <code>not</code> tidak dapat digunakan untuk menegasikan sebuah fitur query individual, hanya untuk media query secara keseluruhan. Sebagai contoh<span style="line-height: 1.572;">, </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> dievaluasi paling akhir dalam query berikut ini:</span></p> + +<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... } +</pre> + +<p>Ini berarti bahwa query tersebut dievaluasi seperti ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... } +</pre> + +<p>... bukan seperti ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> + +<p>Sebagai contoh lain, lihat media query berikut ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color) +</pre> + +<p>Yang dievaluasi seperti ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> + +<h4 id="only">only</h4> + +<p><span style="line-height: 21px;">Kata kunci </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> mencegah browser lama yang tidak mendukung media query dengan fitur media menerapkan style yang disediakan:</span></p> + +<pre class="brush: html"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> +</pre> + +<h3 id="Pseudo-BNF_(untuk_Anda_yang_gemar_hal_seperti_ini)">Pseudo-BNF (untuk Anda yang gemar hal seperti ini)</h3> + +<pre>media_query_list: <media_query> [, <media_query> ]* +media_query: [[only | not]? <media_type> [ and <expression> ]*] + | <expression> [ and <expression> ]* +expression: ( <media_feature> [: <value>]? ) +media_type: all | aural | braille | handheld | print | + projection | screen | tty | tv | embossed +media_feature: width | min-width | max-width + | height | min-height | max-height + | device-width | min-device-width | max-device-width + | device-height | min-device-height | max-device-height + | aspect-ratio | min-aspect-ratio | max-aspect-ratio + | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio + | color | min-color | max-color + | color-index | min-color-index | max-color-index + | monochrome | min-monochrome | max-monochrome + | resolution | min-resolution | max-resolution + | scan | grid</pre> + +<p>Media query adalah case insensitive. Media query yang melibatkan jenis media yang tidak diketahui selalu salah (false).</p> + +<div class="note"><strong>Catatan:</strong> Tanda kurung wajib digunakan di sekitar ekspresi; jika tidak digunakan akan mengakibatkan kesalahan.</div> + +<h2 id="Fitur_media">Fitur media</h2> + +<p>Sebagian besar fitur media dapat diawali dengan "min-" atau "max-" untuk mengekspresikan batasan "lebih dari atau sama dengan" atau "kurang dari atau sama dengan". Hal ini menghindari penggunaan simbol "<" dan ">", yang mungkin akan menyebabkan konflik dengan HTML dan XML. Jika Anda menggunakan fitur media tanpa nilai tertentu, ekspresi tersebut akan bernilai benar (true) jika nilai fitur adalah bukan-nol.</p> + +<div class="note"><strong>Catatan:</strong> Jika sebuah fitur media tidak sesuai untuk alat di mana browser dijalankan, ekspresi yang melibatkan fitur media tersebut adalah selalu salah (false). Sebagai contoh, meng-query rasio aspek dari suatu alat aural selalu bernilai salah (false).</div> + +<h3 id="color">color</h3> + +<p><strong>Nilai:</strong> {{cssxref("<color>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max prefixes:</strong> ya</p> + +<p>Menunjukkan jumlah per komponen warna dari alat penampil. Jika alat tersebut bukan alat yang memiliki warna, nilai ini adalah nol.</p> + +<div class="note"><strong>Catatan:</strong> Jika komponen warna memiliki jumlah bit yang berbeda per komponen warna, angka yang paling kecillah yang digunakan. Sebagai contoh, jika sebuat layar menggunakan 5 bit untuk biru dan merah dan 6 bit untuk hijau, maka alat tersebut dianggap menggunakan 5 bit per komponen warna. Jika suat alat menggunakan warna terindeks, jumlah bit minimum per komponen warna dalam tabel warna yang digunakan.</div> + +<h4 id="Contoh">Contoh</h4> + +<p>Untuk menerapkan style sheet pada semua alat berwarna:</p> + +<pre class="brush: css">@media all and (color) { ... } +</pre> + +<p>Untuk menerapkan style sheet pada alat yang memiliki paling sedikit 4 bit per komponen warna:</p> + +<pre class="brush: css">@media all and (min-color: 4) { ... } +</pre> + +<h3 id="color-index">color-index</h3> + +<p><strong>Nila:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menunjukkan jumlah entri dalam tabel pencarian warna untuk alat penampil.</p> + +<h4 id="Contoh_2">Contoh</h4> + +<p>Untuk menunjukkan bahwa suatu style sheet harus diterapkan pada semua alat yang menggunakan warna terindeks, Anda dapat melakukan:</p> + +<pre class="brush: css">@media all and (color-index) { ... } +</pre> + +<p>Untuk menerapkan style sheet pada alat berwarna terindeks dengan paling sedikit 256 warna:</p> + +<pre class="brush: html"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +</pre> + +<h3 id="aspect-ratio">aspect-ratio</h3> + +<p><strong>Nilai:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menggambarkan rasio aspek daerah tampilan dari alat penampil. Nilai ini terdiri dari dua integer positif dipisahkan oleh karakter garis miring ("/"). Ini menunjukkan rasio piksel horisontal (angka pertama) terhadap piksel vertikal (angka kedua).</p> + +<h4 id="Contoh_3">Contoh</h4> + +<p>Berikut ini memilih style sheet khusus untuk digunakan ketika daerah tampilan paling tidak selebar tingginya.</p> + +<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> + +<p>Ini memilih style ketika rasio aspek adalah 1:1 atau lebih. Dengan kata lain, style-style ini hanya akan diterapkan ketika area penampil adalah bujursangkar atau lanskap.</p> + +<h3 id="device-aspect-ratio">device-aspect-ratio</h3> + +<p><strong>Nilai:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menggambarkan rasio aspek dari alat penampil. Nilai ini terdiri dari dua integer positif dipisahkan oleh karakter garis miring ("/"). Hal ini menunjukkan rasio piksel horisontal (yang pertama) terhadap piksel vertikal (yang kedua).</p> + +<h4 id="Contoh_4">Contoh</h4> + +<p>Berikut ini memilih style sheet khusus yang digunakan untuk tampilan layar lebar.</p> + +<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> + +<p>Ini memilih style ketika rasio aspek adalah 16:9 atau 16:10.</p> + +<h3 id="device-height">device-height</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menggambarkan tinggi alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).</p> + +<h4 id="Contoh_5">Contoh</h4> + +<p>Untuk menerapkan style sheet pada sebuah dokument ketika ditampilkan pada layar yang memiliki panjang kurang dari 800 piksel, Anda dapat menggunakan ini:</p> + +<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> +</pre> + +<h3 id="device-width">device-width</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menggambarkan lebar alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).</p> + +<h4 id="Contoh_6">Contoh</h4> + +<p>Untuk menerapkan style sheet pada sebuah dokumen ketika ditampilkan pada layar yang memiliki lebar kurang dari 800 piksel wide, Anda dapat menggunakan ini:</p> + +<pre class="brush: html" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> + +<h3 id="grid">grid</h3> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Menentukan apakah alat penampil adalah sebuah alat grid atau bitmap. Jika alat tersebut berbasis grid (seperti terminal TTY atau layar telepon dengan hanya satu font), nilai adalah 1. Jika tidak, nilai adalah nol.</p> + +<h4 id="Contoh_7">Contoh</h4> + +<p>Untuk menerapkan suatu style pada alat genggam dengan layar selebar 15-karakter atau kurang:</p> + +<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... } +</pre> + +<div class="note"><strong>Catatan:</strong> Unit "em" memiliki arti khusus untuk alat grid; karena lebar pasti "em" tidak dapat ditentukan, 1em diasumsikan selebar satu sel grid secara horisontal, dan tingginya satu sell secara vertikal.</div> + +<h3 id="height">height</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Fitur media <code>height</code> (tinggi) menggambarkan tinggi permukaan rendering alat penampil (seperti tinggi viewport atau kotak halaman pada sebuah printer).</p> + +<div class="note"><strong>Catatan:</strong> Ketika user mengubah ukuran window, Firefox mengganti style sheets dengan yang paling sesuai berdasarkan media query menggunakan fitur media <code>width</code> dan <code>height</code>.</div> + +<h3 id="monochrome">monochrome</h3> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menunjukkan jumlah bit per piksel pada alat monokrom (keabuan). Jika alat tersebut bukan monokrom, nilai alat tersebut adalah 0.</p> + +<h4 id="Contoh_8">Contoh</h4> + +<p>Untuk menerapkan style sheet pada semua alat monokrom:</p> + +<pre class="brush: css">@media all and (monochrome) { ... } +</pre> + +<p>Untuk menerapkan style sheet pada alat monokrom dengan paling sedikit 8 bit per piksel:</p> + +<pre class="brush: css">@media all and (min-monochrome: 8) { ... } +</pre> + +<h3 id="orientation">orientation</h3> + +<p><strong>Nilai:</strong> <code>landscape</code> | <code>portrait</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Menunjukkan apakah viewport dalam mode lanskap (tampilan lebih lebar daripada tingginya) atau potret (tampilan lebih tinggi daripada lebarnya).</p> + +<h4 id="Contoh_9">Contoh</h4> + +<p>Untuk menerapkan style sheet hanya pada orientasi potret:</p> + +<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre> + +<h3 id="resolution">resolution</h3> + +<p><strong>Nilai:</strong> {{cssxref("<resolution>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menunjukkan resolusi (kepadatan piksel) alat penampil. Resolution mungkin disebutkan dalam dots per inch (dpi - titik per inci) atau dots per centimeter (dpcm - titik per sentimeter).</p> + +<h4 id="Contoh_10">Contoh</h4> + +<p>Untuk menerapkan style sheet pada alat dengan resolusi paling sedikit 300 dpi:</p> + +<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... } +</pre> + +<p>Untuk mengganti sintaks lama <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2)</span>:</p> + +<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre> + +<h3 id="scan">scan</h3> + +<p><strong>Nilai:</strong> <code>progressive</code> | <code>interlace</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/TV")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Menggambarkan proses pemindaian alat penampil televisi.</p> + +<h4 id="Contoh_11">Contoh</h4> + +<p>Untuk menerapkan style sheet hanya pada televisi pemindai progresif:</p> + +<pre class="brush: css">@media tv and (scan: progressive) { ... } +</pre> + +<h3 id="width">width</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Fitur media <code>width</code> menggambarkan lebar permukaan rendering alat penampil (seperti lebar jendela dokumen, atau lebar kotak halaman sebuah printer).</p> + +<div class="note"><strong>Catatan:</strong> Ketika user mengubah ukuran jendela, Firefox mengganti style sheets yang sesuai berdasarkan media query menggunakan fitur media <code>width</code> dan <code>height</code>.</div> + +<h4 id="Contoh_12">Contoh</h4> + +<p>Jika Anda ingin menentukan sebuah style sheet untuk perangkat genggam, atau perangkat layar dengan lebar lebih besar dari 20em, Anda dapat menggunakan query ini:</p> + +<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } +</pre> + +<p>Query Media ini menentukan style sheet yang berlaku untuk media cetak lebih lebar dari 8,5 inci:</p> + +<pre class="brush: html"><link rel="stylesheet" media="print and (min-width: 8.5in)" + href="http://foo.com/mystyle.css" /> +</pre> + +<p>Query ini menentukan style sheet yang digunakan saat lebar viewport adalah antara 500 dan 800 pixel:</p> + +<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... } +</pre> + +<h2 id="Fitur_Media_Spesifik_Mozilla">Fitur Media Spesifik Mozilla</h2> + +<p>Mozilla menawarkan beberapa fitur media spesifik Gecko. Beberapa di antaranya mungkin diusulkan sebagai fitur media resmi.</p> + +<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Meneriman prefiks min/max:</strong> tidak</p> + +<p>Jika perangkat memungkinkan gambar untuk muncul dalam menu, ini adalah 1; jika tidak, nilainya adalah 0. Ini berhubungan dengan <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> CSS {{ cssxref(":-moz-system-metric(images-in-menus)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> no</p> + +<p>Jika user telah mengkonfigurasi perangkat mereka untuk menggunakan tampilan "Graphite" pada Mac OS X, ini adalah 1. Jika pengguna menggunakan tampilan biru standar, atau bukan pada Mac OS X, ini adalah 0.</p> + +<p>Ini berkaitan dengan <a href="/en-US/docs/CSS/Pseudo-classes" style="line-height: 1.5;" title="Pseudo-classes">pseudo-class</a><span style="line-height: 1.5;"> CSS </span><span style="line-height: 1.5;">{{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}</span><span style="line-height: 1.5;">.</span></p> + +<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Jika user menggunakan Maemo dengan tema asli, ini adalah 1; jika menggunakan tema Fremantle yang lebih baru, ini adalah 0.</p> + +<p>Ini berkaitan dengan <a href="/en-US/docs/CSS/Pseudo-classes" style="line-height: 1.5;" title="Pseudo-classes">pseudo-class</a><span style="line-height: 1.5;"> CSS </span><span style="line-height: 1.5;">{{ cssxref(":-moz-system-metric(maemo-classic)") }}</span><span style="line-height: 1.5;">.</span></p> + +<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<number>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Memberikan jumlah piksel perangkat per piksel CSS.</p> + +<div class="geckoVersionNote"> +<p><strong>Jangan gunakan fitur ini. </strong></p> + +<p>Tapi gunakanlah fitur <code>resolution</code> dengan <span style="line-height: 1.5;">unit </span><code style="font-style: normal; line-height: 1.5;">dppx</code><span style="line-height: 1.5;">.</span></p> + +<p><br> + <code>-moz-device-pixel-ratio</code> mungkin digunakan sebagai kompatibilitas dengan Firefox lebih tua daripada 16 dan <code>-webkit-device-pixel-ratio</code> dengan browser-browser berbasis <span style="line-height: 1.5;">WebKit</span><span style="line-height: 1.5;"> yang tidak mendukung </span><code style="font-style: normal; line-height: 1.5;">dppx</code><span style="line-height: 1.5;">.</span></p> + +<p>Contoh:</p> + +<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Browsers berbasis Webkit */ + (min--moz-device-pixel-ratio: 2), /* Browsers yang lebih tua (sebelum Firefox 16) */ + (min-resolution: 2dppx), /* Cara standar */ + (min-resolution: 192dpi) /* fallback <span style="font-size: 1rem;">dppx </span><span style="font-size: 1rem;">*/ </span></pre> + +<p>Lihat <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">artikel CSSWG</a> ini untuk praktek kompatibilitas yang baik terkait <code>resolution</code> dan <code>dppx</code>.</p> +</div> + +<div class="note"><strong>Catatan</strong>: Fitur media ini juga diimplementasikan oleh Webkit sebagai <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. Prefiks min dan max seperti diimplementasikan oleh Gecko dinamakan <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> dan <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; tetapi prefiks yang sama seperti yang diimplementasikan oleh Webkit dinamakan <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> dan <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> + +<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> + +<p><strong>Nilai:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Menunjukkan versi sistem operasi mana yang sedang digunakan saat ini. Saat ini hanya diimplementasikan pada Windows. Nilai-nilai yang mungkin adalah:</p> + +<ul> + <li><code>windows-xp</code></li> + <li><code>windows-vista</code></li> + <li><code>windows-win7</code></li> + <li><code>windows-win8</code></li> +</ul> + +<p>Ini disediakan untuk aplikasi skins dan kode chrome lainnya agar dapat beradaptasi untuk bekerja dengan baik dengan versi sistem operasi saat ini.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> no</p> + +<p>Jika user interface perangkat menampilkan tombol panah kembali di akhir scrollbar, ini adalah 1. Jika tidak, bernilai 0.</p> + +<p>Ini berkaitan dengan <a href="/en-US/docs/CSS/Pseudo-classes" style="line-height: 1.5;" title="Pseudo-classes">pseudo-class</a><span style="line-height: 1.5;"> CSS </span><span style="line-height: 1.5;">{{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.</span></p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<h4 id="Example">Example</h4> + +<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> + +<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p> + +<ul> + <li><code>aero</code></li> + <li><code>luna-blue</code></li> + <li><code>luna-olive</code></li> + <li><code>luna-silver</code></li> + <li><code>royale</code></li> + <li><code>generic</code></li> + <li><code>zune</code></li> +</ul> + +<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome("21") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE("9.0") }}</td> + <td>{{ CompatOpera("9") }}</td> + <td>{{ CompatSafari("4") }}</td> + </tr> + <tr> + <td>grid</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} (<code>grid</code> media type is not supported)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>resolution</td> + <td>{{ CompatChrome("29") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;<br> + {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>scan</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} (<code>tv</code> media type is not supported)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> + <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li> + <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> + <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li> + <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li> +</ul> diff --git a/files/id/web/guide/grafis/index.html b/files/id/web/guide/grafis/index.html new file mode 100644 index 0000000000..43fb9b5954 --- /dev/null +++ b/files/id/web/guide/grafis/index.html @@ -0,0 +1,48 @@ +--- +title: Grafis dalam web +slug: Web/Guide/Grafis +tags: + - 2D + - 3D + - Canvas + - Grafik + - MDN + - OpenGL + - Web + - WebRTC +translation_of: Web/Guide/Graphics +--- +<p><span class="seoSummary">Situs web moderen dan aplikasi sering membutuhkan tampilan grafis.</span> Gambar statis dapat dengan mudah ditamilkan dengan menggunakan elemen <code>{{HTMLElement("img")}}</code> , atau mengatur tampilan background dari elemen HTML dengan menggunakan properti css<code> {{cssxref("background-image")}}</code>. anda sering menginginkan tampilan grafis melayang, atau memanipulasi gambar dari gambar nyatanya. <span class="seoSummary">Artikel ini memberikan wawasan tentang bagaimana anda dapat melakukannya</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Grafik_2D">Grafik 2D</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt> + <dd>Elemen <code>{{HTMLElement("canvas")}}</code> menyediakan API untuk menggambar grafik 2D menggunakan javascript.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd><strong>Scalable Vector Graphics</strong> (SVG) memungkinkan anda menggunakan garis, kurva, dan bentuk geometris lain untuk membuat grafik. Dengan menghindari penggunaan bitmap, Anda dapat membuat gambar yang bersih dengan skala berbagai ukuran.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Lihat Semua...</a></span> </p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Grafik_3D">Grafik 3D</h2> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>Sebuah panduan untuk memulai menggunakan WebGL, API grafis 3D untuk Web. Teknologi ini memungkinkan anda menggunakan standar OpenGL ES dalam konten Web.</dd> +</dl> + +<h2 id="Video">Video</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Menggunakan HTML5 audio dan video</a></dt> + <dd>Embedding video dan / atau audio di halaman web dan mengendalikan pemutaran nya.</dd> + <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> + <dd>RTC pada WebRTC artinya Real-Time Communications, teknologi yang memungkinkan streaming audio/video serta berbagi data antar browser pengguna (peers).</dd> +</dl> +</div> +</div> diff --git a/files/id/web/guide/html/forms/index.html b/files/id/web/guide/html/forms/index.html new file mode 100644 index 0000000000..9daf1d6077 --- /dev/null +++ b/files/id/web/guide/html/forms/index.html @@ -0,0 +1,340 @@ +--- +title: HTML forms guide +slug: Web/Guide/HTML/Forms +translation_of: Learn/Forms +--- +<p><span class="seoSummary">Panduan ini adalah seri dari artikel-artikel yang akan membantu anda menguasai form HTML.</span> Form HTML adalah tool yang paling poweful untuk berinteraksi dengan para pengguna; namun, karena beberapa alasan sejarah dan teknis, tidak jelas bagaimana cara menggunakannya hingga pontensi penuhnya. Dalam panduan ini, kita akan membahas seluruh aspek dari form HTML, struktur form untuk pemberian style, mulai dari penanganan data sampai widget buatan. Anda akan mempelajari bagaimana menikmati kekuatan yang mereka miliki!</p> +<h2 id="Articles">Articles</h2> +<ol> + <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Form HTML pertama saya</a></li> + <li><span><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">Cara membuat struktur form HTML</a></span></li> + <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Form Widget native</span></a></li> + <li>CSS dengan form HTML + <ol> + <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Pemberian style form HTML</span></a></li> + <li><a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Pemberian style form HTML Lanjut</a></li> + <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabel kompatibilitas property widget form</a></li> + </ol> + </li> + <li><span><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Mengirim dan menerima data form</a></span></li> + <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validasi data form</a></li> + <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Bagaimana cara membuat gidget form buatan</a></li> + <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Mengirimkan form melalui JavaScript </a> + <ol> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Menggunakan object FormData</a></li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> +</ol> +<h2 id="Dokumentasi_HTML">Dokumentasi HTML</h2> +<h3 id="Elemen-elemen_HTML">Elemen-elemen HTML</h3> +<table> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Related DOM interface</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">{{HTMLElement("button")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> + <td style="vertical-align: top;">Elemen <code>button</code> menampilkan tombol yang dapat diklik.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> + <td style="vertical-align: top;">Elemen <span style="font-family: Courier New;">datalist</span> menampung kumpulan dari elemen {{ HTMLElement("option") }} yang merepresentasikan pilihan-pilihan yang mungkin untuk nilai dari elemen form lainnya.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> + <td style="vertical-align: top;"><span style="font-family: Courier New;">fieldset</span> digunakan untuk menggabungkan beberapa elemen form dalam sebuah form.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("form")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> + <td style="vertical-align: top;">Elemen <code>form</code> merepresentasikan bagian dari dokumen yang memiliki elemen interaktif yang memungkinkan pengguna mengirimkan informasi ke web server.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("input")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> + <td style="vertical-align: top;">Elemen <code>input</code> digunakan untuk membuat kontrol interaktif untuk form.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> + <td style="vertical-align: top;">Elemen <code>keygen</code> memfasilitasi pembuatan key secara otomatis dan pengiriman public ke sebagai bagian dari form HTML.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("label")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> + <td style="vertical-align: top;">Elemen <code>label</code> merepresentasikan judul dari sebuah item dalam antar muka user</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> + <td style="vertical-align: top;">Elemen <code>legend</code> merepresentasikan judul utama dari konten parentnya {{ HTMLElement("fieldset") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> + <td style="vertical-align: top;">Elemen <code>meter</code> merepresentasikan nilai skalar dalam jangkauan yang diketahui atau nilai fraksi.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> + <td style="vertical-align: top;">Elemen <code>optgroup </code>membuat grup dari pilihan-pilihan dalam sebuah elemen {{ HTMLElement("select") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("option")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> + <td style="vertical-align: top;">Elemen HTML<em> </em><code>option<em> </em></code>digunakan untuk membuat kontrol yang merepresentasikan item yang terdapat dalam sebuah elemen {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} atau {{ HTMLElement("datalist") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("output")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> + <td style="vertical-align: top;">Element <code>output</code> merepresentasikan hasil dari sebuah kalkulasi.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> + <td style="vertical-align: top;">Element <code>progress</code> digunakan untuk menampilkan progress dari sebuah tugas.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("select")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> + <td style="vertical-align: top;">Elemen <code>select</code> merepresentasikan kontrol yang menyajikan pilihan-pilihan menu.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> + <td style="vertical-align: top;">Elemen <code>textarea</code> merepresentasikan sebuah kontrol edit dengan multi baris.</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>Note:</strong> All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.</p> +</div> +<h3 id="HTML_Attributes">HTML Attributes</h3> +<table class="standard-table"> + <thead> + <tr> + <th>Attribute Name</th> + <th>Elements</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>accept</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>List of types the server accepts, typically a file type.</td> + </tr> + <tr> + <td style="white-space: nowrap;">accept-charset</td> + <td>{{ HTMLElement("form") }}</td> + <td>List of supported charsets.</td> + </tr> + <tr> + <td>action</td> + <td>{{ HTMLElement("form") }}</td> + <td>The URI of a program that processes the information submitted via the form.</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td> + </tr> + <tr> + <td>autofocus</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>The element should be automatically focused after the page loaded.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>challenge</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>A challenge string that is submitted along with the public key.</td> + </tr> + <tr> + <td>checked</td> + <td>{{ HTMLElement("input") }}</td> + <td>Indicates whether the element should be checked on page load.</td> + </tr> + <tr> + <td>cols</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of columns in a textarea.</td> + </tr> + <tr> + <td>data</td> + <td>{{ HTMLElement("object") }}</td> + <td>Specifies the URL of the resource.</td> + </tr> + <tr> + <td>dirname</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td> </td> + </tr> + <tr> + <td>disabled</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the user can interact with the element.</td> + </tr> + <tr> + <td>enctype</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines the content type of the form date when the <code>method</code> is POST.</td> + </tr> + <tr> + <td>for</td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Describes elements which belongs to this one.</td> + </tr> + <tr> + <td>form</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates the form that is the owner of the element.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>high</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the lower bound of the upper range.</td> + </tr> + <tr> + <td>keytype</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Specifies the type of key generated.</td> + </tr> + <tr> + <td>list</td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifies a list of pre-defined options to suggest to the user.</td> + </tr> + <tr> + <td>low</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the upper bound of the lower range.</td> + </tr> + <tr> + <td>max</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Indicates the maximum value allowed.</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Defines the maximum number of characters allowed in the element.</td> + </tr> + <tr> + <td>method</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td> + </tr> + <tr> + <td>min</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>Indicates the minimum value allowed.</td> + </tr> + <tr> + <td>multiple</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> + </tr> + <tr> + <td>name</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Name of the element. For example used by the server to identify the fields in form submits.</td> + </tr> + <tr> + <td>novalidate</td> + <td>{{ HTMLElement("form") }}</td> + <td>This attribute indicates that the form shouldn't be validated when submitted.</td> + </tr> + <tr> + <td>optimum</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the optimal numeric value.</td> + </tr> + <tr> + <td>pattern</td> + <td>{{ HTMLElement("input") }}</td> + <td>Defines a regular expression which the element's value will be validated against.</td> + </tr> + <tr> + <td>placeholder</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Provides a hint to the user of what can be entered in the field.</td> + </tr> + <tr> + <td>readonly</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the element can be edited.</td> + </tr> + <tr> + <td>required</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether this element is required to fill out or not.</td> + </tr> + <tr> + <td>rows</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of rows in a textarea.</td> + </tr> + <tr> + <td>selected</td> + <td>{{ HTMLElement("option") }}</td> + <td>Defines a value which will be selected on page load.</td> + </tr> + <tr> + <td>size</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> + </tr> + <tr> + <td>src</td> + <td>{{ HTMLElement("input") }}</td> + <td>The URL of the embeddable content.</td> + </tr> + <tr> + <td>step</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>target</td> + <td>{{ HTMLElement("form") }}</td> + <td> </td> + </tr> + <tr> + <td>type</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>Defines the type of the element.</td> + </tr> + <tr> + <td>usemap</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>value</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Defines a default value which will be displayed in the element on page load.</td> + </tr> + <tr> + <td>wrap</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indicates whether the text should be wrapped.</td> + </tr> + </tbody> +</table> +<h3 id="Normative_reference">Normative reference</h3> +<ul> + <li><a href="http://www.w3.org/TR/html5/forms.html" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML5 Specification (Forms)</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li> +</ul> diff --git a/files/id/web/guide/html/html5/index.html b/files/id/web/guide/html/html5/index.html new file mode 100644 index 0000000000..48e2349af7 --- /dev/null +++ b/files/id/web/guide/html/html5/index.html @@ -0,0 +1,179 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +tags: + - HTML + - HTML5 + - NeedsTranslation + - References + - TopicStub + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +<p><span class="seoSummary"><strong>HTML5</strong> adalah evolusi terbaru dari standard yang mendefinisikan <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Istilah ini merepresentasikan dua konsep yang berbeda:</p> + +<ul> + <li><span class="seoSummary">Ini adalah versi baru dari <em>bahasa</em> HTML, dengan <em>element</em>, <em>attribute</em>, dan <em>behaviour </em>baru,</span></li> + <li><span class="seoSummary">dan sebuah <strong>teknologi</strong> dengan kelengkapan yang lebih besar yang memungkinkan situs Web dan aplikasi yang lebih beragam dan lebih berguna. Kelengkapan ini kadang-kadang disebut <em>HTML5 and friends</em> dan sering disingkat menjadi <em>HTML5</em> saja</span>.</li> +</ul> + +<p>Dirancang untuk dapat digunakan oleh semua pengembang<em> </em>Web Terbuka, Berikut ini adalah tautan halaman referensi ke beberapa <em>resource</em> tentang teknologi HTML5, diklasifikasikan ke dalam beberapa kelompok berdasarkan fungsinya masing-masing.</p> + +<ul> + <li><em>Semantik</em>: memungkinkan Anda untuk mendeskripsikan konten dengan lebih presisi.</li> + <li><em>Konektivitas</em>: memungkinkan Anda untuk berkomunikasi dengan server dengan cara baru dan inovatif.</li> + <li><em>Offline & Storage</em>: memungkinkan halaman <em>web</em> untuk menyimpan data di sisi <em>client</em> secara local dan beroperasi secara <em>offline</em> dengan lebih efisien.</li> + <li><em>Multimedia</em>: membuat <em>video</em> dan <em>audio</em> terbaik di Web Terbuka.</li> + <li><em>Grafik 2D/3D & Efek</em>: memungkinkan lebih banyak pilihan presentasi yang lebih beragam.</li> + <li><em>Performa & Integrasi</em>: memberikan optimalisasi pemakaian yang lebih cepat dan lebih baik dari perangkat keras komputer.</li> + <li><em>Akses Perangkat</em>: memungkinkan untuk menggunakan berbagai perangkat <em>input</em> dan <em>output</em>.</li> + <li><em>Styling</em>: memberi keleluasaan kepada para penulis untuk menulis tema yang lebih canggih.</li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="Semantik" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantik</h2> + +<dl> + <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document"><em>"Sections" </em>dan <em>"outlines"</em> pada HTML5</a></dt> + <dd>Sebuah tampilan pada elemen baru yaitu <em>outline</em> dan<em> section</em> pada HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</dd> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Menggunakan fungsi "<em>audio</em>" dan "<em>video</em>" pada HTML5</a></dt> + <dd>Elemen {{HTMLElement("audio")}} dan {{HTMLElement("video")}} ditanamkan sehingga kita dapat memanipulasi sebuah konten multimedia.</dd> + <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5"><em>"Forms"</em> pada HTML5</a></dt> + <dd>Perbaikan pada form di HTML5: the constraint validation API, beberapa attribute baru, nilai baru untuk {{HTMLElement("input")}} atribut {{htmlattrxref("type", "input")}} dan elemen baru yaitu {{HTMLElement("output")}}.</dd> + <dt>Elemen-elemen baru Semantik</dt> + <dd>Disamping section, media dan form elements, there are numerous new elements, like {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, or {{HTMLElement("meter")}} and {{HTMLElement("main")}}, increasing the amount of <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">valid HTML5 elements</a>.</dd> + <dt>Perbaikan pada {{HTMLElement("iframe")}}</dt> + <dd>Using the {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} attributes, authors can now be precise about the level of security and the wished rendering of an {{HTMLElement("iframe")}} element.</dd> + <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd>Allows directly embedding mathematical formulas.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduction to HTML5</a></dt> + <dd>This article introduces how to indicate to the problem that you are using HTML5 in your web design or web application.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a></dt> + <dd>The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd> +</dl> + +<h2 id="Connectivity" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivity</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> + <dd>Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> +</dl> + +<h2 id="Offline_storage" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline & storage</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: the application cache</a></dt> + <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM Storage)</a></dt> + <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt> + <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> + +<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> + <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt>Track and WebVTT</dt> + <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd> +</dl> + +<h2 id="3D_graphics_effects" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, graphics & effects</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> + <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API for <code><canvas></code> elements</a></dt> + <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd> + <dt> </dt> +</dl> +</div> + +<div class="section"> +<h2 id="Performance_integration" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance & integration</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> + <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>JIT-compiling JavaScript engines</dt> + <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable attribute: transform your website to a wiki!</a></dt> + <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> + <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt> + <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt> + <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>Allows control of animations rendering to obtain optimal performance.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd> +</dl> + +<h2 id="Device_access" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Device access</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt> + <dd>Handlers to react to events created by a user pressing touch screens.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt> + <dd>Let browsers locate the position of the user using geolocation.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt> + <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd> +</dl> + +<h2 id="Styling" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Styling</h2> + +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p> + +<dl> + <dt>New background styling features</dt> + <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd> + <dt>More fancy borders</dt> + <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd> + <dt>Animating your style</dt> + <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd> + <dt>Typography improvement</dt> + <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd> + <dt>New presentational layouts</dt> + <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a>, and the <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> +</dl> +</div> +</div> + +<h4 id="External_References_Html5_Tutorial">External References<br> + <br> + <a href="http://www.html5andcss3.org" title="http://www.html5andcss3.org"><span style="color: #0000cd;">Html5 Tutorial</span></a><br> + </h4> + +<p> </p> diff --git a/files/id/web/guide/index.html b/files/id/web/guide/index.html new file mode 100644 index 0000000000..5e7889fa77 --- /dev/null +++ b/files/id/web/guide/index.html @@ -0,0 +1,55 @@ +--- +title: Paduan Pengembang Web +slug: Web/Guide +tags: + - Landing + - Paduan + - TopicStub + - Web +translation_of: Web/Guide +--- +<p><span class="seoSummary"><strong>Artikel ini memberikan informasi untuk membantu anda menggunakan teknologi dan API secara spesifik.</strong></span></p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/id/docs/Learn/HTML">Area Belajar HTML</a></dt> + <dd class="landingPageList"><strong>HyperText Markup Language (HTML)</strong> merupakan inti bahasa untuk hampir semua konten Web. Hampir keseluruhan yang anda lihat di layar browser, pada dasarnya, menggunakan HTML.</dd> + <dt class="landingPageList"><a href="/id/docs/Learn/CSS">Area Belajar CSS</a></dt> + <dd class="landingPageList"><strong>Cascading Style Sheets (CSS)</strong> adalah bahasa stylesheet yang digunakan untuk mendeskripsikan tampilan dokumen yang ditulis di HTML.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Events">Paduan pegembang Event</a></dt> + <dd class="landingPageList">Events mengacu baik pada pola desain yang digunakan untuk penanganan secara <em>asynchronous</em> pada berbagai peristiwa di halaman web dan penamaan, karakterisasi, dan penggunaan sejumlah besar peristiwa dari berbagai tipe.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Graphics">Grafis di Web</a></dt> + <dd class="landingPageList">Website modern dan aplikasi sering memerlukan menyajikan grafis dari berbagai kecanggihan.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/API">Paduan Web API</a></dt> + <dd class="landingPageList">Daftar semua Web API dan apa yang dihasilkan.</dd> + <dt><a href="/id/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd><strong>JavaScript</strong> adalah bahasa scripting yang ampuh digunakan untuk membuat aplikasi Web.</dd> + <dt class="landingPageList"><a href="/id/docs/Localizations_and_character_encodings">Lokalisasi dan pengkodean karakter</a></dt> + <dd class="landingPageList">Browser memproses teks sebagai Unicode secara internal. Namun, cara merepresentasikan karakter dalam bentuk bytes <strong>(character encoding)</strong> yang digunakan untuk mengirim teks melalui jaringan ke browser. <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">Spesifikasi HTML menyarankan penggunaan UTF-8 encoding</a> (dimana mewakili semua Unicode), dan terlepas dari pengkode-an yang digunakan, dibutuhkan konten Web untuk mendeklarasikan pengkode-an tersebut.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Mobile">Pengembangan Mobile Web</a></dt> + <dd class="landingPageList">Halaman ini memberikan gambaran dari beberapa teknik utama yang dibutuhkan desain Website sehingga berjalan dengan baik di perangkat mobile. Jika anda mencari informasi di proyek Mozilla's Firefox OS, lihat halaman <a href="/id/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>. Atau anda mungkin tertarik pada detail tentang <a href="/id/Mozilla/Firefox_for_Android">Firefox for Android</a>.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Performance">Optimasi dan kinerja</a></dt> + <dd class="landingPageList">Ketika membangun modern Web apps dan situs, sangat penting untuk membuat konten yang bekerja dengan cepat dan efisien. Ini memungkinkan situs bekerja dengan baik pada keduanya, sistem Desktop yang kuat dan perngkat genggam yang lemah.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></dt> + <dd class="landingPageList">Platform Web menyediakan metode yang berbeda dari parsing and serializing XML, dengan masing-masing pro dan kontra.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/WOFF">Open Web Font Format (WOFF)</a></dt> + <dd class="landingPageList"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>) adalah file format font yang gratis untuk semua pengguna di web.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Using_FormData_Objects">Menggunakan Objek FormData</a></dt> + <dd class="landingPageList">Objek <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> memungkinkan anda menkompilasi serangkaian <code>key/value pairs</code> untuk dikirim menggunakan <code>XMLHttpRequest</code>. Utamanya ditujukan untuk mengirim format data, namun dapat digunakan secara terpisah dari format dengan tujuan untuk mengirim keyed data. Pengiriman dengan format yang sama dengan bentuk method <code>submit()</code> digunakan untuk mengirim data jika bentuk tipe encoding ditetapkan ke <code>"multipart/form-data"</code>.</dd> + <dt class="landingPageList"><a href="/id/docs/Glossary">Glosarium</a></dt> + <dd class="landingPageList">Menjelaskan berbagai istilah teknis terkait Web dan Internet.</dd> +</dl> +</div> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="/id/docs/Web/Reference" title="/en-US/docs/Web/Reference">Referensi Pengembang Web</a></li> +</ul> |