initial commit

9 files changed, 1521 insertions, 0 deletions

diff --git a/files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html b/files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html
new file mode 100644
index 0000000000..76600c89ea
--- /dev/null
+++ b/files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html
@@ -0,0 +1,117 @@
+---
+title: Akan terlihat seperti apa website kamu?
+slug: Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda
+tags:
+  - Aset
+  - Desain
+  - Fonts
+  - 'I10n:prioritas'
+  - Konten
+  - Pemula
+  - Pengkomposisian
+  - Sederhana
+  - Usang
+  - belajar
+  - pelan-pelan
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Akan terlihat seperti apa website kamu?</em> Diskusikan terlebih dahulu perencanaan dan desain pekerjaan yang harus kamu lakukan untuk websitemu sebelum menulis code, termasuk "Informasi apa saja yang websitemu tawarkan?" "Font dan warna apa saja yang kamu inginkan?" "Apa yang websitemu lakukan?"</p>
+</div>
+
+<h2 id="Hal_penting_yang_pertama_Perencanaan">Hal penting yang pertama: Perencanaan</h2>
+
+<p>Sebelum melakukan sesuatu, kamu pasti perlu ide. Apa yang harus benar-benar websitemu lakukan? Pada dasarnya sebuah website dapat melakukan apapun, tapi untuk percobaan pertama kamu harus membuat sesuatunya sederhana. <span id="result_box" lang="id"><span>Kita akan mulai</span> <span>dengan membuat</span> <span>halaman web</span> <span>sederhana dengan</span> <span>judul</span><span>,</span> <span>gambar</span><span>,</span> <span>dan</span> <span>beberapa paragraf</span></span>.</p>
+
+<p>Untuk memulai, kamu harus menjawab beberapa pertanyaan berikut ini:</p>
+
+<ol>
+ <li><strong>Tentang apa websitemu? </strong>Apakah kamu suka anjing, New York, atau Pacman?</li>
+ <li><strong>Informasi apa yang akan kamu sajikan? </strong>Tulis sebuah judul dan beberapa paragraf, dan pikirkan gambar yang ingin kamu tampilkan di halaman website.</li>
+ <li><strong>Akan terlihat seperti apa websitemu, </strong>dalam kondisi paling sederhana. Apa warna latar belakang? Apa jenis huruf yang tepat: formal, kartun, bold and loud, halus?</li>
+</ol>
+
+<div class="note">
+<p><strong>Catatan</strong>: Proyek yang kompleks perlu pedoman rinci yang masuk ke semua rincian warna, jenis huruf, jarak antara item pada halaman, gaya penulisan yang sesuai, dan sebagainya. Hal ini kadang-kadang disebut panduan desain atau buku merk, dan kamu bisa melihat contohnya di <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Pedoman Firefox OS</a>.</p>
+</div>
+
+<h2 id="Gambar_desainnya">Gambar desainnya</h2>
+
+<p>Selanjutnya, ambil pulpen dan kertas lalu buat sketsa kasar bagaimana tampilan web kamu nantinya. Untuk web pertamamu, tidak banyak yang akan digambar, tapi kamu harus terbiasa melakukan hal ini. Akan sangat membantu — dan gambarnya tidak perlu sebagus lukisan Van Gogh!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Catatan</strong>: Bahkan nyatanya, dalam website yang kompleks, tim desain biasa nya membuat sketsa kasar dulu, setelah itu baru membuat desain digital nya dengan editor grafik atau teknologi web.</p>
+
+<p>Dalam tim yang membangun web, biasanya ada seorang desainer grafis dan seorang {{Glossary("UX", "user-experience")}} (UX) desainer. Desainer grafis kerjaanya memperindah tampilan website. Desainer UX kerjaanya lebih abstrak dalam menangani pengalaman dan interaksi pengguna dengan website.</p>
+</div>
+
+<h2 id="Memilih_aset">Memilih aset</h2>
+
+<p>Sampai disini, lebih baik mulai memilih konten apa yang akan kamu tampilan dalam halaman webmu.</p>
+
+<h3 id="Teks">Teks</h3>
+
+<p>Kamu harus menulis paragraf dan judul di awal. Jangan sampai lupa.</p>
+
+<h3 id="Warna_tema">Warna tema</h3>
+
+<p>Untuk memilih warna, lihat <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">Color Picker</a> dan pilih warna kesukaanmu. Saat kamu mengklik sebuah warna, kamu akan melihat 6-karakter kode yang aneh seperti <code>#660066</code>. Itulah yang disebut kode hex <em>(</em>kependekan dari hexadecimal<em>)</em>. Kopi kodenya ke tempat aman supaya bisa dipakai nanti.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="Gambar">Gambar</h3>
+
+<p>Untuk memilih gambar, lihat <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a> dan cari sesuatu yang cocok.</p>
+
+<ol>
+ <li>Ketika kamu sudah menemukan yang kamu inginkan, klik gambarnya.</li>
+ <li>Pilih <em>View image</em>.</li>
+ <li>Di halaman selanjutnya, klik kanan pada gambar (Ctrl + klik di Mac), pilih <em>Save Image As...</em>, dan pilih tempat untuk menyimpan gambarnya. Bisa juga dikopi alamat webnya dari bar alamat perambanmu supaya bisa dipakai nanti.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
+
+<p>Perlu diingat bahwa kebanyakan gambar di web, termasuk Google Images, memiliki hak cipta. Untuk mengurangi kemungkinan kamu melanggar hak cipta, gunakan filter lisensi dari Google. klik di tombol <em>Tool</em>, lalu pilih opsi <em>Usage rights</em> yang muncul di situ. Kamu sebaiknya pilih opsi semacam <em>Labeled for reuse</em>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16598/updated-google-images-licensing.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Font">Font</h3>
+
+<p>Untuk memilih font:</p>
+
+<ol>
+ <li>Pergi ke <a href="http://www.google.com/fonts">Google Fonts</a> dan cari di situ sampai kamu menemukan yang pas. kamu juga bisa menyaring yang berada di kanan layar supaya pencarian lebih mudah</li>
+ <li>Klik <em>Add to collection</em> tepat di sebelah nama font.</li>
+ <li>Klik <em>Use</em> di panel bagian bawah.</li>
+ <li>Di halaman selanjutnya, gulung ke bawah ke seksi 3 dan 4, dan kopi baris kode yang diberi Google ke teks editor untuk dipakai nantinya.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<h2 id="Dalam_modul_ini">Dalam modul ini</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Menginstal perangkat lunak dasar</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website kamu?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Berurusan dengan file</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML dasar</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS dasar</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript dasar</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublish website kamu</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Bagaimana web bekerja</a></li>
+</ul>
diff --git a/files/id/learn/getting_started_with_the_web/css_basics/index.html b/files/id/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..110abc26fe
--- /dev/null
+++ b/files/id/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,291 @@
+---
+title: CSS dasar
+slug: Learn/Getting_started_with_the_web/CSS_basics
+tags:
+  - CSS
+  - CodingScripting
+  - 'I10n:priority'
+  - Pemula
+  - Styling
+  - Web
+  - belajar
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>CSS <em>(Cascading Style Sheets) </em>adalah kode yang kamu gunakan untuk memberikan gaya pada halaman web kamu. <em>Dasar-dasar CSS </em>akan menjelaskan apa sajakah yang kamu butuhkan untuk memulai. Kami akan menjawab pertanyaan-pertanyaan seperti: Bagaimana saya dapat membuat teks saya menjadi berwarna hitam atau merah? Bagaimana saya dapat membuat konten saya tampil sedemikian rupa pada layar? Bagaimana saya dapat mendekor halaman web saya dengan latar belakang gambar atau warna-warna?</p>
+</div>
+
+<h2 id="Apakah_CSS_itu">Apakah CSS itu?</h2>
+
+<p>Seperti HTML, CSS bukanlah sebuah bahasa pemrograman. CSS juga bukanlah sebuah bahasa <em>markup </em>— ia adalah suatu bahasa <em>style sheet</em>. Artinya, dengan CSS kamu dapat mengaplikasikan gaya pada elemen-elemen yang ada dalam dokumen HTML. Sebagai contoh, untuk membuat teks pada seluruh elemen paragraf dalam satu halaman HTML menjadi berwarna merah, kamu akan menulis CSS sebagai berikut:</p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>Salin ketiga baris dari kode CSS tersebut ke dalam suatu <em>file </em>baru di teks editor kamu, lalu simpan <em>file </em>tersebut sebagai <code>style.css</code> di direktori <code>styles</code> kamu.</p>
+
+<p>Namun kita masih perlu untuk mengaplikasikan CSS tersebut ke dokumen HTML kamu. Jika tidak, CSS tersebut tidak akan berpengaruh pada bagaimana <em>browser </em>akan menampilkan dokumen HTML tersebut. (Kalau kamu belum mengikuti proyek kami, bacalah <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> dan <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> untuk mencari tahu apa saja yang perlu kamu lakukan sebelumnya.)</p>
+
+<ol>
+ <li>Buka <em>file</em> <code>index.html</code> kamu dan letakkan baris berikut di suatu tempat di bagian <em>head</em> (di antara <em>tag</em> <code>&lt;head&gt;</code> dan <code>&lt;/head&gt;</code>):
+
+  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Simpan <code>index.html</code> dan buka halaman tersebut di <em>browser</em> kamu. Seharusnya muncul tampilan seperti ini:</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Jika teks paragraf kamu sekarang berwarna merah, selamat! Kamu berhasil menulis CSS pertama kamu.</p>
+
+<h3 id="Bagian-bagian_dari_sebuah_CSS_ruleset">Bagian-bagian dari sebuah CSS <em>ruleset</em></h3>
+
+<p>Mari kita lihat CSS di atas dengan sedikit lebih detil:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>Struktur di atas merupakan sebuah <strong><em>rule set</em></strong> (atau sering disebut <em>"rule"</em> supaya lebih singkat). Perhatikan nama dari masing-masing bagian di atas:</p>
+
+<dl>
+ <dt><em>Selector</em></dt>
+ <dd>Nama elemen HTML di awal <em>rule set</em>. <em>Selector</em> menandai satu atau lebih elemen yang akan diberikan gaya (contoh di sini menggunakan elemen <code>p</code>). Untuk memberikan gaya pada elemen lain, kamu bisa mengubah <em>selector</em> sesuai elemen yang kamu inginkan.</dd>
+ <dt><em>Declaration</em></dt>
+ <dd>Suatu peraturan seperti <code>color: red;</code> yang menentukan properti mana dari elemen yang ingin kamu beri gaya.</dd>
+ <dt><em>Properties</em></dt>
+ <dd>Cara kamu memberikan gaya terhadap elemen HTML (contoh di sini, <code>color</code> adalah properti dari {elemen {htmlelement("p")}}.) Di dalam CSS, kamu memilih properti mana saja yang ingin kamu berikan gaya di peraturan kamu.</dd>
+ <dt><em>Property value</em></dt>
+ <dd>Sebelah sisi kanan properti setelah tanda titik dua, kita memiliki nilai properti, yang memilih satu dari banyak kemungkinan penampilan untuk properti yang diberikan (ada banyak sekali nilai-nilai <code>color</code> selain <code>red</code>).</dd>
+</dl>
+
+<p>Perhatikan juga bagian-bagian lain dari sintaks di atas:</p>
+
+<ul>
+ <li>Masing-masing <em>rule set </em>(selain <em>selector</em>) harus dibungkus dengan sepasang kurung kurawal (<code>{}</code>).</li>
+ <li>Dalam masing-masing deklarasi, kamu harus menggunakan tanda titik dua (<code>:</code>) untuk memisahkan properti dari nilai-nilainya.</li>
+ <li>Dalam masing-masing <em>rule set,</em> kamu harus menggunakan tanda titik-koma (<code>;</code>) untuk memisahkan satu deklarasi dengan deklarasi berikutnya.</li>
+</ul>
+
+<p>Untuk memodifikasi banyak nilai properti sekaligus, kamu hanya perlu menggunakan tanda titik-koma sebagai pemisah, seperti ini:</p>
+
+<pre class="brush: css">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Memilih_banyak_elemen">Memilih banyak elemen</h3>
+
+<p>Kamu juga dapat memilih lebih dari satu tipe elemen dan mengaplikasikan sebuah <em>rule set </em>untuk semua tipe elemen. Untuk melakukannya, kamu dapat menuliskan lebih dari satu <em>selector </em>dipisahkan dengan tanda koma. Sebagai contoh:</p>
+
+<pre class="brush: css">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="Beragam_tipe_selector">Beragam tipe <em>selector</em></h3>
+
+<p>Ada banyak sekali tipe <em>selector </em>yang berbeda. Di atas, kita hanya mempelajari <em><strong>element selectors</strong></em>, yang memilih seluruh elemen dari tipe yang diberikan di dokumen HTML yang diberikan. Namun kita dapat membuat pilihan yang lebih spesifik daripada itu. Berikut adalah beberapa tipe <em>selector </em>lain yang sering dijumpai:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nama <em>selector</em></th>
+   <th scope="col">Apa yang dipilih</th>
+   <th scope="col">Contoh</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><em>Element selector </em>(kadang-kadang juga disebut sebagai <em>tag </em>atau <em>type selector</em>)</td>
+   <td>Seluruh elemen HTML dari tipe yang diberikan.</td>
+   <td><code>p</code><br>
+    Memilih <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td><em>ID selector</em></td>
+   <td>Elemen pada halaman dengan ID yang diberikan (pada halaman HTML yang diberikan, kamu hanya boleh memiliki satu elemen per ID).</td>
+   <td><code>#my-id</code><br>
+    Memilih <code>&lt;p id="my-id"&gt;</code> atau <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td><em>Class selector</em></td>
+   <td>Satu atau lebih elemen pada halaman dengan kelas yang ditentukan (banyak <em>class instances </em>yang dapat muncul di sebuah halaman).</td>
+   <td><code>.my-class</code><br>
+    Memilih<code>&lt;p class="my-class"&gt;</code> dan <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td><em>Attribute selector</em></td>
+   <td>Satu atau lebih elemen pada halaman dengan atribut yang ditentukan.</td>
+   <td><code>img[src]</code><br>
+    Memilih <code>&lt;img src="myimage.png"&gt;</code> namun tidak memilih <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td><em>Pseudo-class selector</em></td>
+   <td>Satu atau lebih elemen yang ditentukan, namun hanya ketika elemen tersebut sedang berada pada <em>state </em>tertentu, seperti sedang di-<em>hover</em>.</td>
+   <td><code>a:hover</code><br>
+    Memilih <code>&lt;a&gt;</code>, namun hanya ketika <em>mouse pointer </em>sedang meng-<em>hover </em><em>link</em>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ada banyak sekali <em>selector </em>lain yang dapat dieksplor, dan kamu dapat menemukan daftar yang lebih detil di <em><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a></em> kami.</p>
+
+<h2 id="Fonts_dan_teks"><strong><em>Fonts</em></strong> dan teks</h2>
+
+<p>Setelah mengeksplor dasar-dasar CSS, mari kita tambahkan aturan-aturan lain dan informasi pada <em>file</em> <code>style.css</code> kita agar contoh yang kita buat memiliki tampilan yang lebih baik. Kita dapat memulai dengan membuat <em>fonts </em>dan teks kita untuk terlihat sedikit lebih baik.</p>
+
+<ol>
+ <li>Pertama-tama, kembalilah dan temukan <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">keluaran dari Google Fonts</a> yang kamu simpan di tempat yang aman. Tambahkan elemen {{htmlelement("link")}} di suatu tempat pada bagian <em>head </em>dari <code>index.html</code> kamu (di manapun di antara <em>tag </em><code>&lt;head&gt;</code> dan <code>&lt;/head&gt;</code>). Elemen <em>link</em> tersebut akan terlihat seperti ini:
+
+  <pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+ </li>
+ <li>Selanjutnya, hapus aturan yang sudah ada yang kamu miliki di <em>file </em><code>style.css</code>.</li>
+ <li>Tambahkan baris berikut, dan ubah baris <em>placeholder </em>dengan <code>font-family</code> sungguhan yang kamu dapatkan dari Google Fonts. (<code>font-family</code> berarti jenis <em>font </em>yang ingin kamu gunakan untuk teks.) Aturan ini mengatur jenis <em>font </em>dan ukuran <em>font </em>dasar secara global untuk seluruh halaman (karena <code>&lt;html&gt;</code> merupakan <em>parent element </em>dari seluruh halaman, dan semua elemen di dalam halaman tersebut mewarisi <code>font-size</code> dan <code>font-family</code> yang sama):
+  <pre class="brush: css">html {
+  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
+  font-family: placeholder: this should be the rest of the output you got from Google fonts
+}</pre>
+
+  <div class="note">
+  <p><strong>Catatan</strong>: Apapun yang ada di dalam sebuah dokumen CSS antara <code>/*</code> dan <code>*/</code> adalah <strong>komentar CSS</strong>, yang akan diabaikan oleh <em>browser </em>ketika <em>browser </em>sedang mengolah kode untuk ditampilkan. Komentar berguna bagi kamu untuk menulis catatan-catatan yang membantu terkait apa yang sedang kamu lakukan.</p>
+  </div>
+ </li>
+ <li>Sekarang kita akan menentukan <em>font size </em>untuk elemen-elemen berisi teks yang ada di dalam <em>body </em>HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, dan {{htmlelement("p")}}). Kita juga akan menengahkan posisi teks pada <em>heading </em>dan menentukan <em>line height </em>serta <em>letter spacing </em>pada konten bagian <em>body </em>agar dapat lebih mudah dibaca:
+  <pre class="brush: css">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Kamu dapat menyesuaikan nilai-nilai <code>px</code> tersebut untuk mendapatkan desain yang kamu inginkan, namun secara umum desain kamu seharusnya akan terlihat seperti ini:</p>
+
+<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Semua_tentang_boks">Semua tentang boks</h2>
+
+<p>Satu hal yang akan kamu sadari tentang menulis CSS adalah banyak hal dalam CSS sebenarnya terkait dengan boks — mengatur ukuran, warna, posisi, dan lain-lain. Kebanyakan dari elemen-elemen HTML yang ada di halaman kamu dapat dilihat sebagai banyak boks yang saling bertumpuk di atas satu sama lain.</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>Pada prinsipnya, susunan CSS didasari oleh <em>box model. </em>Masing-masing blok akan menempati tempat di halaman kamu dengan properti sebagai berikut:</p>
+
+<ul>
+ <li><code>padding</code>, ruang di sekitar konten (e.g., di sekitar teks paragraf)</li>
+ <li><code>border</code>, garis solid yang ada di luar <em>padding</em></li>
+ <li><code>margin</code>, ruang di luar elemen</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>Pada bagian ini kita juga menggunakan:</p>
+
+<ul>
+ <li><code>width</code> (lebar dari sebuah elemen)</li>
+ <li><code>background-color</code>, warna di belakang konten dan <em>padding </em>sebuah elemen</li>
+ <li><code>color</code>, warna dari konten elemen (biasanya berupa teks)</li>
+ <li><code>text-shadow</code>: mengatur <em>drop shadow </em>pada teks di dalam elemen</li>
+ <li><code>display</code>: mengatur tampilan sebuah elemen (untuk sekarang, abaikan hal ini)</li>
+</ul>
+
+<p>Ayo kita mulai menambahkan lebih banyak CSS pada halaman kita! Terus tambahkan aturan-aturan baru sampai ke bagian bawah halaman, dan jangan takut untuk bereksperimen dengan menggonta-ganti nilai-nilai untuk melihat bagaimana hasilnya.</p>
+
+<h3 id="Mengganti_warna_halaman">Mengganti warna halaman</h3>
+
+<pre class="brush: css">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Aturan ini mengatur warna latar belakang seluruh halaman. Gantilah kode warna di atas menjadi warna apapun <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">yang Anda pilih ketika Anda merencanakan situs Anda</a>.</p>
+
+<h3 id="Mengatur_body">Mengatur <em>body</em></h3>
+
+<pre class="brush: css">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Sekarang kita akan mengatur elemen {{htmlelement("body")}}. Ada beberapa deklarasi di sini, jadi mari kita bahas semuanya satu per satu:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — aturan ini memaksa <em>body </em>untuk selalu memiliki lebar sepanjang 600 piksel.</li>
+ <li><code>margin: 0 auto;</code> — ketika kamu mengatur dua nilai pada dua properti seperti<code> margin</code> atau <code>padding</code>, nilai pertama akan memengaruhi sisi atas dan bawah dari elemen (pada contoh ini, buatlah <code>0</code>), dan nilai kedua akan memengaruhi sisi kiri dan kanan  (di sini, <code>auto</code> adalah sebuah nilai khusus yang dapat membagi ruang horizontal yang ada secara adil antara kiri dan kanan). Kamu juga dapat menggunakan satu, tiga, atau empat nilai seperti yang didokumentasikan <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">di sini</a>.</li>
+ <li><code>background-color: #FF9500;</code> — sama seperti sebelumya, aturan ini menentukan warna latar belakang elemen. Kita sudah menggunakan warna merah kejinggaan untuk bagian <em>body</em>, namun teruslah bereksperimen.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — kita memiliki empat nilai yang mengatur <em>padding </em>untuk membuat sedikit ruang di sekitar konten kita. Saat ini, kita menentukan tidak ada <em>padding </em>pada sisi atas dari <em>body, </em>dan ada <em>padding </em>sepanjang 20 piksel di sisi kiri, bawah, dan kanan. Nilai-nilai di atas mengatur bagian atas, kanan, bawah, dan kiri secara berurutan.</li>
+ <li><code>border: 5px solid black;</code> — aturan ini mengatur <em>border </em>setebal 5 piksel berwarna hitam di seluruh sisi <em>body</em>.</li>
+</ul>
+
+<h3 id="Mengatur_posisi_dan_memberikan_gaya_pada_judul_halaman_utama_kita">Mengatur posisi dan memberikan gaya pada judul halaman utama kita</h3>
+
+<pre class="brush: css">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Kamu mungkin sudah menyadari bahwa ada jarak yang cukup jelek di bagian atas <em>body</em>. Hal tersebut terjadi karena beberapa <em>browser </em>mengaplikasikan gaya yang bersifat <em>default </em>ke elemen {{htmlelement("h1")}} element (salah satunya), meski kamu belum memberikan CSS apapun sama sekali! Kedengarannya buruk, namun kita juga menginginkan halaman web yang belum diberikan gaya juga memiliki keterbacaan yang mendasar. Untuk menghilangkan jarak tersebut, kita dapat merubah gaya <em>default </em>tersebut dengan mengatur  <code>margin: 0;</code>.</p>
+
+<p>Selanjutnya, kita mengatur bagian atas dan bawah <em>padding </em>menjadi 20 piksel, dan membuat warna dari teks <em>heading </em>agar sama dengan warna latar belakang HTML.</p>
+
+<p>Sebuah properti menarik yang kita gunakan adalah <code>text-shadow</code>, di mana properti ini akan mengaplikasikan bayangan teks ke konten teks dari sebuah elemen. Empat nilai dari properti tersebut adalah sebagai berikut:</p>
+
+<ul>
+ <li>Nilai piksel pertama mengatur <em><strong>horizontal offset</strong></em> bayangan dari teks — seberapa jauh bayangan tersebut berada (secara horizontal): sebuah nilai negatif seharusnya akan memindahkan bayangan tersebut ke sisi kiri.</li>
+ <li>Nilai piksel kedua mengatur <em><strong>vertical offset</strong></em> bayangan dari teks — seberapa jauh bayangan tersebut berada (secara vertikal), pada contoh ini, sebuah nilai negatif akan memindahkannya ke atas.</li>
+ <li>Nilai piksel ketiga mengatur <em><strong>blur radius </strong></em>dari bayangan — nilai yang lebih besar akan membuat bayangan yang lebih kabur.</li>
+ <li>Nilai keempat mengatur warna dasar dari bayangan.</li>
+</ul>
+
+<p>Cobalah untuk bereksperimen dengan berbagai nilai berbeda dan lihat hasilnya!</p>
+
+<h3 id="Memposisikan_gambar_ke_tengah">Memposisikan gambar ke tengah</h3>
+
+<pre class="brush: css">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Akhirnya, kita akan memposisikan gambar ke tengah untuk membuatnya terlihat lebih baik. Kita dapat menggunakan trik  <code>margin: 0 auto</code> lagi seperti yang telah kita lakukan pada bagian <em>body</em>, namun ada satu hal lagi yang perlu dilakukan. Elemen {{htmlelement("body")}} adalah <em><strong>block level</strong></em>, di mana elemen tersebut menempati ruang di halaman dan kita juga dapat mengaplikasikan margin dan nilai-nilai <em>spacing </em>lain pada elemen tersebut. Di sisi lain, gambar adalah contoh dari <em>inline element, </em>yang berarti kita tidak dapat melakukan hal yang sama. Sehingga untuk mengaplikasikan <em>margin </em>pada gambar, kita harus memberikan gambar tersebut perlakuan seperti <em>block level</em> menggunakan <code>display: block;</code>.</p>
+
+<div class="note">
+<p><strong>Catatan</strong>: Jangan khawatir jika kamu belum memahami <code>display: block;</code>dan perbedaan antara <em>block-level </em>dan <em>inline</em>. Kamu akan memahaminya seiring dengan waktu kamu mempelajari CSS lebih dalam. Kamu dapat menemukan lebih lanjut tentang nilai-nilai <em>display </em>yang tersedia di <a href="/en-US/docs/Web/CSS/display">halaman referensi <em>display</em></a> kami.</p>
+</div>
+
+<h2 id="Kesimpulan">Kesimpulan</h2>
+
+<p>Jika kamu sudah mengikuti seluruh instruksi di artikel ini, seharusnya kamu memiliki sebuah halaman yang tampak seperti ini (kamu juga dapat <a href="http://mdn.github.io/beginner-html-site-styled/">melihat versi kami di sini</a>):</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Jika Kamu mengalami kebingungan, kamu bisa membandingkan hasilmu dengan <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">contoh sampel kode kami di Github</a>.</p>
+
+<p>Di sini, kita hanya baru saja membahas sedikit tentang CSS. Untuk mempelajari lebih lanjut, kunjungi halaman <em><a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic </a></em><a href="https://developer.mozilla.org/en-US/Learn/CSS">milik kami</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<h2 id="Dalam_modul_ini">Dalam modul ini</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Menginstal perangkat lunak dasar</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website kamu?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Berurusan dengan file</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML dasar</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS dasar</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript dasar</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublish website kamu</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Bagaimana web bekerja</a></li>
+</ul>
diff --git a/files/id/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/id/learn/getting_started_with_the_web/how_the_web_works/index.html
new file mode 100644
index 0000000000..e59c3083bb
--- /dev/null
+++ b/files/id/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -0,0 +1,96 @@
+---
+title: Bagaimana Web Bekerja
+slug: Learn/Getting_started_with_the_web/How_the_Web_works
+tags:
+  - DNS
+  - HTTP
+  - IP
+  - Klien
+  - Pemula
+  - Server
+  - TCP
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{Previous("Learn/Getting_started_with_the_web/Publishing_your_website")}}</p>
+
+<div class="summary">
+<p><em>Bagaimana cara web bekerja </em>menyediakan pandangan sederhana apa yang terjadi ketika anda melihat halaman web di browser komputer atau handphone.</p>
+</div>
+
+<p>Teori ini bukan dasar menulis kode web dalam jangka pendek, namun sebelum anda memulai anda akan mendapatkan keuntungan dari memahami apa yang terjadi di belakang.</p>
+
+<h2 id="Klien_dan_server">Klien dan server</h2>
+
+<p>Komputer yang terhubung ke web dinamakan <strong>client </strong>dan <strong>servers</strong>. Diagram sederhana dari cara mereka berinteraksi seperti berikut:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p>
+
+<ul>
+ <li>Klien merupakan pengguna web yang terhubung dengan internet di perangkat mereka (contohnya, komputer anda terhubung dengan Wi-Fi, atau handphone terhubung dengan jaringan mobile) dan software untuk mengakses web tersedia di perangkat tersebut (biasanya web browser seperti Firefox atau Chrome).</li>
+ <li>Server adalah komputer yang menyimpan halaman web, situs, atau aplikasi web. Ketika perangkat klien ingin mengakses halaman web, salinan dari halaman web diunduh dari server ke mesin klien untuk ditempilkan di browser pengguna.</li>
+</ul>
+
+<h2 id="Bagian_lain_dari_toolbox">Bagian lain dari toolbox</h2>
+
+<p>Klien dan server yang di jabarkan di atas tidak menceritakan semuanya. Banyak sekali bagian lain yang terlibat, dan kita akan membahasnya.</p>
+
+<p>Saat ini, mari kita bayangkan bahwa web adalah sebuah jalan. Pada ujung jalan adalah klien, seperti halnya rumah anda. Di ujung jalan yang lain adalah server, seperti halnya pasar atau swalayan dimana anda membeli sesuatu.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Sebagai tambahan dari klien dan server, kita juga membutuhkan:</p>
+
+<ul>
+ <li><strong>Koneksi internet</strong>: Memungkinkan anda mengirim dan menerima data dari web. Pada dasarnya seperti jalan antara rumah anda dan pasar.</li>
+ <li><strong>TCP/IP</strong>: Transmission Control Protocol dan Internet Protocol merupakan protokol komunikasi yang menjelaskan bagaiman data harus berjalan di web. Seperti halnya mekanisme transportasi yang memungkinkan anda berada ditempat untuk memesan, pergi ke pasar, dan membeli yang anda butuhkan. Contohnya seperti sepeda motor atau mobil (atau dengan jalan kaki).</li>
+ <li><strong>DNS</strong>: Domain Name System seperti halnya buku alamat untuk website. Ketika anda menuliskan alamat web di browser, browser melihat DNS sebelum mengambil halaman web di website. Browser perlu mencari tahu di server mana website berada, sehingga bisa mengirimkan pesan HTTP ke tempat yang benar. Seperti saat anda mencari alamat pasar dimana barang yang anda cari tersedia.</li>
+ <li><strong>HTTP</strong>: Hypertext Transfer Protocol merupakan {{Glossary("Protocol" , "protocol")}} aplikasi yang menjelaskan bahasa untuk klien dan server untuk saling berkomunikasi. Seperti bahasa yang anda gunakan untuk memesan barang.</li>
+ <li><strong>Komponen file</strong>: Seuah website dibuat dari banyak file, seperti bagian atau resep produk yang anda beli di pasar. File ini di bagi menjadi dua jenis:
+  <ul>
+   <li><strong>Berkas kode</strong>: Website dibuat dari HTML, CSS, dan JavaScript, nanti anda juga akan megenal teknologi lainnya.</li>
+   <li><strong>Aset</strong>: Merupakan sekumpulan nama untuk bahan pembuat website, seperti gambar, musik, video, Word document, dan PDF.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Lalu_apa_yang_terjadi_sebenarnya">Lalu apa yang terjadi sebenarnya?</h2>
+
+<p>Ketika anda menuliskan alamat web di browser (dianalogikan seperti berjalan ke pasar):</p>
+
+<ol>
+ <li>Browser menuju ke DNS server dan mencari alamat server yang sebenarnya dimana website berada (anda mencari alamat pasar).</li>
+ <li>Browser mengirim pesan HTTP request ke server meminta salinan dari website untuk di kirim ke klien (anda pergi ke pasar dan memesan barang). Pesan ini, dan semua data dikirim diantara klien dan server, di kirim melalui koneksi internet menggunakan TCP/IP.</li>
+ <li>Server menyetujui permintaan klien, server mengirip pesan "200 OK", yang maksudnya "Tentu anda bisa melihat website tersebut! ini dia", dan kemudian mulai mengirim file website ke browser sebagai bagian - bagian kecil yang disebut data paket (pelayan memberikan barang anda, dan anda membawanya ke rumah anda).</li>
+ <li>Browser menggabungkan bagian - bagian halaman web menjadi sebuah halaman web sempurna dan menampilkannya untuk anda (barang sampai dirumah — barang baru, keren!).</li>
+</ol>
+
+<h2 id="Penjelasan_DNS">Penjelasan DNS</h2>
+
+<p>Alamat web sebenarnya tidak seperti yang kita tuliskan di browser, untaian yang kamu tuliskan di address bar merupakan untaian dari angka seperti ini: 63.245.217.105.</p>
+
+<p>Ini disebut alamat IP, dan ini mewakili lokasi dari web. Akan tetapi, akan sulit untuk mengingat, itulah mengapa Domain Name System server dibuat. Ini adalah server spesial yang mencocokkan alamat yang kamu tulis di web browser (seperti "mozilla.org") ke alamat (IP) address website yang sebenarnya.</p>
+
+<p>Website dapat di jangkau secara langsung melalui IP addresses. Coba buka website Mozilla website dengan menuliskan <code>63.245.217.105</code> ke address bar.</p>
+
+<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h2 id="Penjelasan_Packet">Penjelasan Packet</h2>
+
+<p>Sebelumnya kita menggunakan istilah "packet" untuk menjelaskan format dimana data yang dikirim dari server ke klien. Pada dasarnya data dikirim melalui web, dikirim sebagai ribuan bagian kecil, sehingga pengguna web yang berbeda dapat mengunduh website yang sama dalam waktu yang sama. Jika situs web mengirim sebuah bagian yang besar, hanya satu pengguna yang dapat mengunduh dalam waktu tertentu, dimana akan membuat web sangat tidak efisien dan tidak menyenangkan untuk digunakan.</p>
+
+<h2 id="Lihat_juga">Lihat juga</h2>
+
+<ul>
+ <li><a href="/id/Learn/How_the_Internet_works">Bagaimana Internet Bekerja</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
+</ul>
+
+<h2 id="Kredit">Kredit</h2>
+
+<p>Street photo: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, oleh <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{Previous("Learn/Getting_started_with_the_web/Publishing_your_website")}}</p>
diff --git a/files/id/learn/getting_started_with_the_web/html_basics/index.html b/files/id/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..a2bac009f6
--- /dev/null
+++ b/files/id/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,233 @@
+---
+title: HTML dasar
+slug: Learn/Getting_started_with_the_web/HTML_basics
+tags:
+  - CodingScripting
+  - HTML
+  - 'I10n:prioritas'
+  - Pemula
+  - Web
+  - belajar
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>hyperlink{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML (<strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage) adalah kode yang digunakan untuk mengatur tata letak tampilan halaman web dan isinya. Contohnya, konten dapat disusun dalam bentuk sebuah paragraf, penomoran berbentuk titik, atau menampilkan gambar dan tabel. Seperti judulnya, artikel ini akan memberi kamu pemahaman mendasar tentang HTML dan fungsinya.</p>
+</div>
+
+<h2 id="Jadi_sebenarnya_apa_itu_HTML">Jadi sebenarnya apa itu HTML?</h2>
+
+<p>HTML bukan sebuah bahasa pemrograman; HTML adalah bahasa <em>markup</em> yang mendefinisikan struktur konten kamu. HTML terdiri atas serangkaian <strong>{{Glossary("element", "elements")}}</strong>, yang dapat kamu gunakan untuk menyisipkan atau membungkus konten di dalamnya sehingga mempunyai tampilan tertentu sesuai fungsi elemennya. {{Glossary("Tag", "tags")}} penyisip dapat membuat sebuah kata atau gambar <em>hyperlink</em> ke konten lainnya, memiringkan tulisan, memperbesar atau memperkecil font, dan lain-lain. Lihat contoh konten dibawah ini:</p>
+
+<pre>My cat is very grumpy</pre>
+
+<p>Kalau kita ingin baris ini berdiri sendiri, kita bisa bilang bahwa ini adalah satu paragraf dengan menaruhnya di antara tag paragraf:</p>
+
+<pre class="brush: html">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+
+<h3 id="Anatomi_elemen_HTML">Anatomi elemen HTML</h3>
+
+<p>Mari kita jelajahi elemen paragraf ini lebih jauh.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Bagian utama dari elemen kita adalah:</p>
+
+<ol>
+ <li><strong>Tag pembuka:</strong> Terdiri dari nama elemen (contoh di sini menggunakan p), yang ada di antara <strong>kurung sudut</strong> pembuka dan penutup. Ini menandakan awal elemen atau di mana elemen mulai bekerja — dalam hal ini dimana paragraf dimulai.</li>
+ <li><strong>Tag penutup:</strong> Mirip dengan tag pembuka, bedanya di tag penutup ada garis miring di depan nama elemen. Ini meandakan di mana akhir elemen — dalam hal ini di mana paragraf berakhir. Kebiasaan lupa menulis tag penutup meruapakan suatu kesalahan yang biasa dilakukan pemula yang bisa menyebabkan hasil menjadi ngawur.</li>
+ <li><strong>Konten:</strong> Konten elemen yang dalam hal ini hanya teks.</li>
+ <li><strong>Elemen:</strong> Tag pembuka dan tag penutup serta konten.</li>
+</ol>
+
+<p>Elemen juga boleh memiliki atribut, yang terlihat seperti berikut:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Atribut mengandung informasi ekstra tentang elemen. Atribut tidak tampil di konten aktual. Disini, <code>class</code> adalah nama atribut, dan <code>editor-note</code> adalah nilainya. Atribut <code>class</code> berfungsi memberikan penanda (<em>identifier</em>) pada elemen yang nantinya bisa kamu gunakan untuk diberikan informasi gaya dan lain-lain.</p>
+
+<p>Sebuah atribut harus mempunyai:</p>
+
+<ol>
+ <li>Jarak antara atribut dan nama elemen (atau atribut sebelumnya, kalau elemen sudah mempunyai atribut).</li>
+ <li>Nama atribut, diikuti tanda sama dengan.</li>
+ <li>Petik pembuka dan penutup diantara nilai atribut.        </li>
+</ol>
+
+<h3 id="Elemen_Bersarang">Elemen Bersarang</h3>
+
+<p>Kamu bisa menempatkan satu elemen ke dalam elemen lain — istilah ini disebut <strong>nesting (persarangan)</strong>. Kalau kita ingin buat penekanan bahwa kucing kita "<strong>very</strong> grumpy", kita bisa membungkus kata "very" ke dalam elemen {{htmlelement("strong")}} untuk penekanan.</p>
+
+<pre class="brush: html">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
+
+<p>Tapi kamu harus yakin bahwa elemen kamu benar-benar bersarang: contoh di atas kita buka elemen {{htmlelement("p")}} dulu, lalu elemen {{htmlelement("strong")}}, lalu kita tutup elemen {{htmlelement("strong")}}, lalu elemen {{htmlelement("p")}}. Contoh berikut ini tidak benar:</p>
+
+<pre class="example-bad brush: html">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Elemen harus terbuka dan tertutup dengan benar sehingga mereka jelas berada di mana dari elemen lain. Kalau mereka tumpang-tindih seperti di atas, maka web browser kamu akan membuat tebakan terbaiknya pada apa yang ingin kamu utarakan, yang menyebabkan hasil ngawur. Jadi jangan begitu!</p>
+
+<h3 id="Elemen_kosong">Elemen kosong</h3>
+
+<p>Beberapa elemen tidak punya konten, dan disebut <strong>elemen kosong</strong>. Ambil elemen {{htmlelement("img")}} yang sudah kita punya di HTML kita:</p>
+
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>Elemen ini mengandung 2 attribut, tapi tidak punya tag <code>&lt;/img&gt;</code>, dan tidak punya konten. Ini karena elemen image tidak membungkus konten apapun. Tujuannya adalah mengembed image ke dalam halaman HTML di tempat di berada.</p>
+
+<h3 id="Anatomi_dari_dokumen_HTML">Anatomi dari dokumen HTML</h3>
+
+<p>Sekarang kita akan lihat bagaimana elemen individu digabung membentuk satu halaman HTML utuh. Ayo kunjungi lagi kode di mana kita menaruh contoh <code>index.html</code> kita (yang kita temui dalam artikel <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>):</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Di sini kita punya:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — doctype. Zaman dulu, ketika HTML masih muda (sekitar 1991/2), doctypes berfungsi sebagai penghubung ke satu set aturan yang wajib diikuti halaman HTML supaya disebut halaman HTML yang baik, yang berarti error checking otomatis dan hal berfaedah lainnya. Tapi sekarang ini mereka sudah tidak terlau berguna dan hanya berfungsi sebagai penanda bahwa dokumen kamu bekerja dengan baik.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — elemen {{htmlelement("html")}}. Membungkus semua konten pada satu halaman utuh dan kadang disebut sebagai elemen root.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — elemen {{htmlelement("head")}}. Berguna sebagai wadah bagi semua hal yang kamu inginkan ke dalam halaman HTML yang bukan konten yang ditampilkan ke pengguna. Ini termasuk hal-hal semacam {{Glossary("keyword", "keywords")}} dan deskripsi halaman yang akan kamu tampilkan dalam hasil pencarian, CSS untuk menggayakan konten kamu, deklarasi karakter set, dan lain sebagainya.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — elemen ini mengeset karakter set. Dokumen kamu sebaiknya mengguakan UTF-8 karena berisi karakter paling banyak dari seluruh bahasa di dunia. Prinsipnya dia bisa mengatasi konten tekstual apa saja di dalamnya. Tidak ada alasan untuk tidak menggunakan ini, dan dia bisa mencegah masalah lain yang timbul kemudian.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — elemen {{htmlelement("title")}}. Mengeset judul halaman kamu, yang tampil di browser tab di mana halaman ini diload. Juga digunakan untuk mendeskripsikan halaman ketika kamu membookmark/memfavoritkan halaman.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — elemen {{htmlelement("body")}}. Mengandung semua konten yang ingin kamu tunjukkan ke user, berupa teks, image, video, games, audio track, atau apapunlah.</li>
+</ul>
+
+<h2 id="Image">Image</h2>
+
+<p>Coba lihat elemen {{htmlelement("img")}} ini lagi:</p>
+
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>Seperti dikatakan sebelumnya, dia mengembed image ke dalam halaman sesuai posisinya via artibut <code>src</code>, yang berisi path ke file image kita.</p>
+
+<p>Kita juga telah memasukkan artibut <code>alt</code> (alternative). Dalam atribut ini, kamu menentukan teks deskriptif bagi user yang tidak bisa melihat image, yang mungkin karena:</p>
+
+<ol>
+ <li>User tunanetra. Mereka sering menggunakan tools pembaca screen untuk membaca semua semua alt text.</li>
+ <li>Sesuatu terjadi yang mengakibatkan image tidak tampil. Contohnya, coba sengaja ganti path di dalam atribut <code>src</code> menjadi salah. Kalau kamu simpan dan reload halaman, kamu akan melihat sesuatu seperti ini:</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+
+<p>Kata kunci ini mengandung semua "teks deskriptif". Teks alternatif yang kamu tulis sebaiknya menyediakan cukup informasi kepada pembaca tentang image tersebut. Di contoh ini, teks kita "My test image" tidak bagus. Alternatif lain yang jauh lebih baik untuk logo Firefox kita adalah "The Firefox logo: a flaming fox surrounding the Earth."</p>
+
+<p>Coba gunakan teks alternatif yang lebih baik untuk image kamu.</p>
+
+<div class="note">
+<p><strong>Catatan</strong>: Cari tahu lebih tentang aksesbilitas di <a href="/en-US/docs/Web/Accessibility">Aksesbilitas landing page MDN</a>.</p>
+</div>
+
+<h2 id="Menandai_teks">Menandai teks</h2>
+
+<p>Bagian ini mengkover elemen HTML penting yang kamu gunakan untuk menandai teks.</p>
+
+<h3 id="Headings">Headings</h3>
+
+<p>Elemen heading berfungsi menentukan bahwa bagian tertentu konten kamu berupa heading — atau subheading — dari konten kamu. Sama seperti buku yang punya judul utama, judul bab, dan subjudul, dokumen HTML juga begitu. HTML berisi 6 heading level, {{htmlelement("h1")}}–{{htmlelement("h6")}} meskipun kamu hanya menggunakan paling banyak 3–4:</p>
+
+<pre class="brush: html">&lt;h1&gt;My main title&lt;/h1&gt;
+&lt;h2&gt;My top level heading&lt;/h2&gt;
+&lt;h3&gt;My subheading&lt;/h3&gt;
+&lt;h4&gt;My sub-subheading&lt;/h4&gt;</pre>
+
+<p>Sekarang coba tambahkan judul yang pas ke halaman HTML di atas elemen {{htmlelement("img")}} kamu.</p>
+
+<h3 id="Paragraf">Paragraf</h3>
+
+<p>Seperti dijelaskan sebelumnya, elemen {{htmlelement("p")}} berguna untuk wadah paragraf teks; kamu akan sering menggunakan ini ketika menandai konten teks reguler:</p>
+
+<pre class="brush: html">&lt;p&gt;This is a single paragraph&lt;/p&gt;</pre>
+
+<p>Tambahkan sampel teks kamu (kamu pasti sudah punya dari <a href="/id/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>What should your website look like?</em></a>) ke dalam satu atau lebih paragraf, taruh langsung di bawah elemen {{htmlelement("img")}} kamu.</p>
+
+<h3 id="List">List</h3>
+
+<p>Kebanyakan konten web adalah lists, dan HTML punya special elemen untuk ini. Penandaan list selalu mengandung paling sedikit 2 elemen. Tipe list paling umum adalah terurut and tak-terurut:</p>
+
+<ol>
+ <li><strong>List tak-terurut</strong> ialah list yang urutan itemnya tidak penting, seperti daftar belanja. Ini dibungkus dalam elemen {{htmlelement("ul")}}.</li>
+ <li><strong>List terurut</strong> ialah list yang urutan itemnya penting, seperti resep. Ini dibungkus dalam elemen {{htmlelement("ol")}}.</li>
+</ol>
+
+<p>Tiap item dalam list ditaruh di dalam elemen {{htmlelement("li")}} (item list).</p>
+
+<p>Contohnya, kalau kita ingin mengubah bagian dari fragmen paragraf berikut menjadi list:</p>
+
+<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>
+
+<p>Kita bisa memodifikasi markup ini menjadi:</p>
+
+<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;technologists&lt;/li&gt;
+  &lt;li&gt;thinkers&lt;/li&gt;
+  &lt;li&gt;builders&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;working together ... &lt;/p&gt;</pre>
+
+<p>Coba tambahkan suatu list terurut atau tak-terurut ke halaman contoh kamu.</p>
+
+<h2 id="Link">Link</h2>
+
+<p>Link sangat penting — mereka yang membuat web terlihat seperti web! Untuk menambahkan link, kita harus menggunakan elemen sederhana — {{htmlelement("a")}} — "a" singkatan dari "anchor". Untuk membuat teks menjadi link di paragraf kamu, ikuti langkah ini:</p>
+
+<ol>
+ <li>Pilih teks berikut. Kita pilih teks "Mozilla Manifesto".</li>
+ <li>Bungkus teks ke dalam elemen {{htmlelement("a")}}, seperti ini:
+  <pre class="brush: html">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Berikan elemen {{htmlelement("a")}} atribut <code>href</code>, seperti ini:
+  <pre class="brush: html">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Isi nilai atribut ini dengan alamat web yang ingin kamu link:
+  <pre class="brush: html">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Kamu mungkin memperoleh hasil tak terduga jika kamu buang bagian <code>https://</code> atau <code>http://</code>, disebut <em>protocol</em>, di awal alamat web. Setelah membuat link, klik untuk meyakinkan itu bekerja sebagaimana mestinya.</p>
+
+<div class="note">
+<p><code>href</code> mungkin terlihat seperti pilihan yang abu-abu untuk nama atribut. Selalu ingat bahwa dia singkatan dari <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p>
+</div>
+
+<p>Tambahkan link ke halaman kamu sekarang kalau belum.</p>
+
+<h2 id="Kesimpulan">Kesimpulan</h2>
+
+<p>Jika kamu ikuti semua instruksi di artikel ini, kamu akan melihat halaman seperti berikut (kamu juga bisa <a href="http://mdn.github.io/beginner-html-site/">melihat itu di sini</a>):<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>Kalau kamu buntu, kamu bisa bandingkan kerjaanmu dengan <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">contoh code yang sudah selesai</a> punya kita di GitHub.</p>
+
+<p>Di sini, kita telah menyentuh hanya lapisan luar HTML. Untuk lebih lanjut, pergi ke <a href="/en-US/Learn/HTML">HTML Learning topic</a> kita.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<h2 id="Dalam_modul_ini">Dalam modul ini</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Menginstal perangkat lunak dasar</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website kamu?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Berurusan dengan file</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML dasar</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS dasar</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript dasar</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublish website kamu</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Bagaimana web bekerja</a></li>
+</ul>
diff --git a/files/id/learn/getting_started_with_the_web/index.html b/files/id/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..d788a4d683
--- /dev/null
+++ b/files/id/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,76 @@
+---
+title: Mulai Bekerja dengan Web
+slug: Learn/Getting_started_with_the_web
+tags:
+  - CSS
+  - Desain
+  - Guide
+  - HTML
+  - 'I10n:prioritas'
+  - Index
+  - Pemula
+  - Petunjuk
+  - Teori
+  - publishing
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}</div>
+
+<div class="summary">
+<p>Web <em>Memulai dengan web</em> adalah tulisan ringkas untuk memperkenalkan Anda kepada <em>web development</em>. Anda akan mengatur berbagai <em>tool</em> yang kamu butuhkan untuk membuat sebuah halaman web yang sederhana dan mengunggah kode sederhana Anda.</p>
+</div>
+
+<h2 id="Alur_pembuatan_website_pertama_Anda">Alur pembuatan website pertama Anda</h2>
+
+<p>Banyak sekali hal yang harus dilakukan untuk membuat web profesional, jadi jika Anda benar-benar baru dalam <em>pengembangan web</em>, kami anjurkan Anda untuk mulai dari hal yang kecil. Anda tidak akan membuat sebuah website layaknya Facebook, namun kali ini kamu akan membuat website sederhana, jadi mari kita mulai.</p>
+
+<p>Dengan mengerjakan artikel-artikel berikut, Anda menuju dari nol ke membuat halaman web daring pertama Anda. Berangkat!</p>
+
+<h3 id="Memasang_perangkat_lunak_dasar"><a href="/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Memasang perangkat lunak dasar</a></h3>
+
+<p>Banyak sekali <em>tool</em> yang bisa kamu pilih untuk membuat sebuah website. Jika kamu baru mulai, kamu mungkin akan kebingungan dengan banyaknya editor kode<em>, framework</em>, atau <em>testing tool </em>yang ada di luar sana. Di <a href="/id/Learn/Getting_started_with_the_web/Installing_basic_software">Memasang perangkat lunak dasar</a>, kami akan menunjukkan langkah-langkah dalam pemasangan perangkat lunak yang kamu butuhkan untuk membangun website sederhana Anda.</p>
+
+<h3 id="Akan_seperti_apa_website_Anda_terlihat"><a href="/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website Anda terlihat?</a></h3>
+
+<p>Sebelum Anda mulai menulis kode untuk website Anda, Anda harus merencanakan terlebih dahulu. Informasi apa yang akan Anda muat dalam website tersebut? <em>Font</em> (tulisan) dan warna apa yang akan Anda gunakan? <a href="/id/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Situs Anda akan terlihat seperti apa?</a> Kami menguraikan metode sederhana yang bisa Anda ikuti untuk merencanakan konten dan desain situs web Anda.</p>
+
+<h3 id="Mengurus_berkas"><a href="/id/Learn/Getting_started_with_the_web/Dealing_with_files">Mengurus berkas</a></h3>
+
+<p>Sebuah situs terdiri dari banyak file: wacana, kode, <em>stylesheet</em>, konten media, dan seterusnya. Ketika Anda membangun situs, Anda harus mengatur semua berkas dalam struktur yang baik dan memastikan bahwa semua berkas dapat terhubung satu sama lain. <a href="/id/Learn/Getting_started_with_the_web/Dealing_with_files">Mengurus berkas</a><em> </em>menjelaskan bagaimana caranya Anda mengatur berkas dengan baik dan persoalan apa sajakah yang harus Anda perhatikan.</p>
+
+<h3 id="Dasar-dasar_HTML"><a href="/id/Learn/Getting_started_with_the_web/HTML_basics">Dasar-dasar HTML</a></h3>
+
+<p><em>Hypertext Markup Language</em> (HTML) adalah kode yang Anda gunakan untuk membuat struktur konten website Anda dan memberikannya arti dan tujuan. Contoh, apakah konten yang saya buat terdiri dari paragraf-paragraf, atau terdiri dari daftar-daftar? Apakah saya perlu memasukan gambar-gambar di halaman saya? Apakah saya memiliki tabel data? Tanpa membuat Anda bingung, <a href="/id/Learn/Getting_started_with_the_web/HTML_basics">Dasar-dasar HTML</a> akan memberikan Anda informasi yang cukup untuk membuat Anda familiar dengan HTML.</p>
+
+<h3 id="Dasar-dasar_CSS"><a href="/id/Learn/Getting_started_with_the_web/CSS_basics">Dasar-dasar CSS</a></h3>
+
+<p><em>Cascading Stylesheets</em> (CSS) merupakan kode yang dapat kamu pakai untuk memberikan gaya (<em>style</em>) pada website Anda. Contoh, apakah Anda ingin teks berwarna hitam atau merah? Dimanakah seharusnya konten ditampilkan pada layar? Apa latar belakang gambar dan warna yang seharusnya digunakan untuk mendekorasi website Anda? <a href="/id/Learn/Getting_started_with_the_web/CSS_basics">Dasar-dasar CSS</a> akan membantu Anda memulainya.</p>
+
+<h3 id="Dasar-dasar_JavaScript"><a href="/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Dasar-dasar JavaScript</a></h3>
+
+<p>JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan fitur interaktif di website Anda. Seperti permainan, hal yang akan terjadi ketika tombol ditekan atau data dimasukkan ke dalam <em>form</em> (formulir), penambahan efek <em>styling</em> yang dinamis, animasi, dan banyak lagi. <a href="/id/Learn/Getting_started_with_the_web/JavaScript_basics">Dasar-dasar JavaScript</a> memberikan Anda sebuah ide tentang apa saja yang dapat Anda lakukan dengan bahasa menakjubkan ini, dan cara memulainya.</p>
+
+<h3 id="Mempublikasikan_website_Anda"><a href="/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublikasikan website Anda</a></h3>
+
+<p>Setelah Anda menyelesaikan penulisan kode dan penyusunan berkas dalam pembuatan situs, Anda perlu untuk mempublikasikan website Anda secara <em>online</em> sehingga orang-orang dapat mengaksesnya. <a href="/id/Learn/Getting_started_with_the_web/Publishing_your_website">Publikasi sampel kode Anda</a> menjelaskan bagaimana cara untuk mempublikasikan sampel kode daring Anda dengan sedikit usaha.</p>
+
+<h3 id="Cara_kerja_web"><a href="/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Cara kerja web</a></h3>
+
+<p>Ketika Anda mengakses situs kesukaan Anda, banyak hal rumit yang terjadi di dalamnya yang mungkin Anda tidak ketahui. <a href="/id/Learn/Getting_started_with_the_web/How_the_Web_works">Cara kerja web</a> menguraikan hal-hal yang terjadi ketika Anda melihat halaman web pada komputer Anda.</p>
+
+<p>Sekarang, mari kita atasi hal yang paling membuat pusing, dari manakah Anda harus membeli <em>hosting</em> untuk situs web Anda.</p>
+
+<p>Jawaban pertanyaan ini mungkin terlihat sedikit bias, tapi kenyataannya Anda harus percaya dengan suatu yang Anda yakini. Terdapat banyak situs web yang dapat menawarkan jasa <em>hosting</em> gratis tapi segala hal yang gratis itu tidak selalu bagus. Harga jasa-jasa ini terus berubah-ubah, karenanya dibawah ini adalah beberapa perusahaan yang Anda dapat jadikan sebagai rujukan. (Harap dicatat daftar dibawah ini diurutkan tidak berdasarkan kepercayaan atau harga atau pelayanan, ini daftar acak dan tanpa niat dibayar perusahaan):</p>
+
+<p><a href="https://godaddy.com/">godaddy.com</a>, <a href="https://www.hostgator.com/">hostgator.com</a>, <a href="https://alibabacloud.com/">alibabacloud.com</a>, <a href="https://aws.amazon.com/">Amazon Web Services</a>, <a href="https://www.cluestech.com/">cluestech.com</a>, <a href="https://www.namecheap.com/">namecheap.com</a>, <a href="https://www.bluehost.com/">bluehost.com</a> dan banyak lagi. Sepertinya ini bukan yang terbaik tapi setidaknya memiliki rekam jejak yang baik.</p>
+
+<h2 id="Lihat_juga">Lihat juga</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: Rangkaian video bagus yang menjelaskan dasar-dasar web, ditujukan pada pemula untuk mengembangkan web. Dibuat oleh <a href="https://twitter.com/JeremiePat" rel="noopener">Jérémie Patonnier</a>.</li>
+ <li><a href="/id/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>: Artikel ini menyediakan beberapa latar belakang pada Web — bagaimana hal itu tetjadi, apa standar teknologi web, bagaimana mereka kerja bersamaan, mengapa "web developer" merupakan pilihan karir yang bagus, dan apa jenis-jenis pelatihan terbaik Anda akan mempelajarinya di kursus ini.</li>
+</ul>
+
+<p>{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}</p>
diff --git a/files/id/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/id/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..93abc80228
--- /dev/null
+++ b/files/id/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -0,0 +1,76 @@
+---
+title: Menginstal perangkat lunak dasar
+slug: Learn/Getting_started_with_the_web/Installing_basic_software
+tags:
+  - Browser
+  - 'I10n:prioritas'
+  - Pemula
+  - Setup
+  - Tools
+  - WebMechanics
+  - belajar
+  - editor teks
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousNext("Learn/Getting_started_with_the_web","Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda")}}</p>
+
+<div class="summary">
+<p>Pada bagian <em>Memasang perangkat lunak dasar</em>ini, kami akan menunjukkan kepada Anda apa saja alat yang Anda butuhkan untuk mengembangkan web sederhana, dan cara memasangnya dengan benar.</p>
+</div>
+
+<h2 id="Alat_apa_yang_digunakan_oleh_para_profesional">Alat apa yang digunakan oleh para profesional?</h2>
+
+<ul>
+ <li><strong>Komputer</strong>. Hal ini terdengar sangat jelas bagi beberapa orang, namun sebagian orang membaca artikel ini dari ponsel atau pustaka komputer (computer library). Untuk serius mengembangkan web, sebaiknya menggunakan desktop komputer atau laptop yang dijalankan Windows, macOS, atau Linux.</li>
+ <li><strong>Editor teks</strong>, untuk menulis kode. Ini bisa jadi text editor (spt. <a href="https://code.visualstudio.com/"> Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="http://brackets.io/">Brackest</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, atau <a href="https://www.vim.org/">VIM</a>), atau hybrid editor (spt. <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a> atau <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Editor dokumen kantor tidak cocok untuk hal ini, karena itu tergantung pada element tersembunyi yabg dapat mengganggu mesin penterjemah yang digubakan oleh peramban web.</li>
+ <li><strong>Peramban web</strong>, untuk mencoba kode. Saat ini peramban yang banyak digunakan antara lain <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, dan <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. Kamu juga perlu mencoba apakah situs kamu berjalan baik di perangkat mobile dan semua peramban lama yang masih banyak digunakan pengunjung (seperti IE 8–10.) <a href="https://lynx.browser.org/">Lynx</a>, terminal peramban web berbasis teks, bagus untuk mengetahui bagaimana situs web Anda dijelajahi oleh pengguna yang masalah penglihatan.</li>
+ <li><strong>Editor grafis</strong>, seperti <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, atau <a href="https://www.adobe.com/products/xd.html">XD</a> untuk membuat gambar atau grafis pada halaman web kamu.</li>
+ <li><strong>Version control system</strong>, untuk mengelola berkas di server, proyek yang berkolaborasi dengan sebuah tim, berbagi kode dan aset, serta menghindari konflik editing. Saat ini, <a href="http://git-scm.com/">Git</a> merupakan alat version control yang populer bersama dengan layanan hosting<a href="https://github.com/">GitHub</a> atau <a href="https://gitlab.com/">GitLab</a>.</li>
+ <li><strong>Program FTP</strong>, digunakan pada akun hosting lama untuk mengatur berkas pada (<a href="https://git-scm.com/">Git</a> secara bertahap menggantikan FTP untuk tujuan ini). Banyak sekali program FTP yang tersedia termasuk <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, dan <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>Automation system</strong>, seperti <a href="http://gruntjs.com/">Grunt</a> atau <a href="http://gulpjs.com/">Gulp</a> untuk menjalankan tugas berulang secara otomatis, seperti meminimalisir code dan menjalankan serangkaian test.</li>
+ <li><em>Templates</em>, <em>libraries</em>, <em>frameworks</em>, dan sebagainya, untuk mempercepat menulis fungsi umum.</li>
+ <li>Dan masih banyak lainnya!</li>
+</ul>
+
+<h2 id="Alat_apa_saja_yang_sebenarnya_saya_butuhkan_sekarang">Alat apa saja yang sebenarnya saya butuhkan sekarang?</h2>
+
+<p>Daftar di atas sepertinya sedikit "menakutkan", tapi untungnya, Anda bisa mulai mengembangkan web tanpa harus tahu banyak tentang hal-hal ini. Pada artikel ini, kita akan membuat Anda siap dengan sesuatu yang paling sederhana, yaitu sebuah pengubah teks dan beberapa peramban web.</p>
+
+<h3 id="Memasang_text_editor">Memasang text editor</h3>
+
+<p>Anda mungkin sudah punya <em>text editor</em> bawaan pada komputer Anda. Secara default Windows mempunyai <a href="https://en.wikipedia.org/wiki/Notepad_%28software%29">Notepad</a> dan macOS mempunyai <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. <strong>Distro</strong> Linux beragam; Ubuntu mempunyai <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> secara default.</p>
+
+<p>Untuk mengembangkan web, Anda bisa melakukan lebih dari Notepad atau TextEdit. Kami sarankan mulai dengan <a href="https://code.visualstudio.com/">Visual Studio Code</a>, yang merupakan editor teks gratis, yang menawarkan tinjauan langsung (live preview) dan petunjuk kode.</p>
+
+<h3 id="Memasang_peramban_modern">Memasang peramban modern</h3>
+
+<p>Untuk saat ini, kita akan memasang dua peramban web desktop untuk menguji kode kita. Pilih sistem operasi kamu di bawah ini dan klik link yang relevan untuk mengunduh installer untuk peramban kesukaan Anda:</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> (Windows 10 hadir dengan Edge secara default; Jika kamu punya Windows 7 atau di atasnya, Anda bisa memasang Internet Explorer 11 atau di atasnya; jika tidak, Anda harus memasang peramban alternatif)</li>
+ <li>macOS: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari hadir dengan iOS and macOS secara default)</li>
+</ul>
+
+<p>Sebelum melanjutkan, kamu harus memasang minimum dua dari browser tersebut untuk pengujian.</p>
+
+<h3 id="Memasang_server_web_lokal">Memasang server web lokal</h3>
+
+<p>Beberapa contoh perlu dijalankan oleh server web agar dapat bekerja. Anda dapat mengetahui cara melakukan ini di <a href="https://developer.mozilla.org/id/docs/Learn/Common_questions/set_up_a_local_testing_server">Bagaimana Anda membuat server pengujian lokal?</a></p>
+
+<p>{{PreviousNext("Learn/Getting_started_with_the_web", "Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda")}}</p>
+
+<h2 id="Dalam_modul_ini">Dalam modul ini</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Memasang perangkat lunak dasar</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website Anda terlihat?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Mengurus berkas</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/HTML_basics">Dasar-dasar HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/CSS_basics">Dasar-dadar CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Dasar-dasar JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublikasikan website Anda</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Cara kerja web</a></li>
+</ul>
diff --git a/files/id/learn/getting_started_with_the_web/javascript_basics/index.html b/files/id/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..f1fb4295df
--- /dev/null
+++ b/files/id/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,398 @@
+---
+title: Dasar JavaScript
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - Beginner
+  - CodingScripting
+  - JavaScript
+  - Web
+  - belajar
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+</div>
+
+<div class="summary">
+<p>JavaScript adalah bahasa pemograman yang digunakan untuk menambahkan fitur interaktif pada website anda, seperti ketika ingin membuat game, melakukan perubahan ketika mengklik tombol, efek dinamik, animasi, dan masih banyak lagi. Tutorial ini adalah dasar dari JavaScript yang akan memberikan gambaran apa yang bisa anda buat dengan JavaScript.</p>
+</div>
+
+<h2 id="Apakah_JavaScript_yang_Sebenarnya">Apakah JavaScript yang Sebenarnya?</h2>
+
+<p>{{Glossary("JavaScript")}} adalah bahasa pemograman yang sangat matang dan dapat dikolaborasikan dengan dokumen {{Glossary("HTML")}} dan digunakan untuk membuat website yang interaktif. JavaScript diciptakan oleh Brendan Eich yang juga co-founder dari Mozilla project, Mozilla Foundation dan Mozilla Corporation.</p>
+
+<p>Anda dapat melakukan banyak hal dengan JavaScript. Anda akan memulai dari fitur sederhana seperti menentukan layout, membuat respon ketika mengklik button, caousels, dan gallery gambar. Namun pada akhirnya ketika anda sudah mendapat banyak pengetahuan anda juga akan dapat membuat game, animasi 2D dan 3D, aplikasi yang berhubungan dengan database, dan masih banyak lagi.</p>
+
+<p>JavaScript sendiri adalah bahasa yang cukup komplek namun sangat fleksibel, dan banyak Developer (Programmer) telah menyediakan tool yang berdiri diatas core JavaScript agar anda dapat menggunakan fungsi - fungsi ekstra, tool tersebut sebagai berikut :</p>
+
+<ul>
+ <li>Application Programming Interfaces ({{Glossary("API","APIs")}}) dibangun pada web browser agar memungkinkan anda melakukan apapun dari dinamik dokumen HTML dan set CSS yang anda buat, untuk menangkap dan memodifikasi video dari web cam, atau membuat animasi 3D dan sampel audio.</li>
+ <li>API pihak ketiga menyediakan akses bagi Developer untuk menghubungkan aplikasi mereka pada website atau aplikasi lain layaknya facebook dan twitter. Pernahkan anda login soundcloud dengan facebook ? itu API pihak ketiga.</li>
+ <li>Frameworks pihak ketiga dan libraries dapat digabungkan pada HTML sehingga memungkinkan Developer membangun website atau aplikasi dengan cepat.</li>
+</ul>
+
+<p>Karena artikel ini hanya sebagai pengenalan, kami tidak ingin membingungkan anda pada tingkat ini dengan membahas secara detail tentang apa perbedaan antara inti bahasa javascript dan perbedaan alat yang digunakan di atas. Anda bisa belajar semuanya nanti pada <a href="/en-US/docs/Learn/JavaScript">Area Belajar JavaScript </a>, dan pada semua bagian MDN.</p>
+
+<p>Di bawah ini kami akan memperkenalkan anda pada beberapa aspek dari inti bahasa, dan anda juga bisa bermain dengan beberapa fitur API Browser. Selamat Bersenang-senang!</p>
+
+<h2 id="Contoh_Hello_World">Contoh "Hello World"</h2>
+
+<p>Judul diatas terdengar menarik bukan ?. JavaScript adalah salah satu bahasa yang sangar menarik dari banyak teknologi web yang lain. dan jika anda mengikuti tutorial ini dengan baik, anda dapat menambahkan dimensi baru dan hal lain yang kreatif pada website anda. </p>
+
+<p>Namun, JavaScript sedikit lebih rumit dari pada HTML dan CSS, dan anda akan belajar sedikit demi sedikit, dan tetaplah belajar pada langkah-langkah kecil yang kami berikan. Untuk memulainya, kami akan menunjukkan bagaimana cara menambah beberapa skrip JavaScript yang sangat sederhana pada halaman Anda, yakni dengan contoh cara membuat "Hello, world!" (<a href="http://en.wikipedia.org/wiki/%22Hello,_world!%22_program">contoh standar pada dasar pemrograman</a>.)</p>
+
+<div class="warning">
+<p><strong>Penting</strong>: Jika anda belum mengikuti semua kursus kami, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">download contoh kode berikut</a> dan gunakan untuk memulai.</p>
+</div>
+
+<div class="note">
+<p><strong>Catatan</strong>: Alasan kita menepatkan elemen {{htmlelement("script")}} di bawah file html adalah ketika HTML di muat oleh browser untuk ditampilkan pada sebuah file. Jika JavaScript dimuat pertama kali dan seharusnya mempengatuhi HTML di bawahnya, kemungkinan ini tidak bisa bekerja, oleh karena itu JavaScript dimuat sebelum HTML bekeja seperti seharusnya. Oleh karena itu, strategi yang terbaik biasanya adalah di bawah halaman.</p>
+</div>
+
+<ol>
+ <li>Pertama-tema, buka situs percobaan anda, dan buatlah sebuah file baru bernama <code>main.js</code>. Simpan di dalam folder <code>scripts</code>.</li>
+ <li>Selanjutnya, buka file <code>index.html</code> Anda, dan masukkan elemen berikut pada sebuah baris bari sebelum tag penutup <code>&lt;/body&gt;</code>:
+  <pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Ini sama halnya dengan cara kerja elemen {{htmlelement("link")}} untuk CSS — ini menempatkan JavaScript ke halaman, sehingga dapat memberikan pegaruh pada HTML (CSS, dan lainnya pada halaman).</li>
+ <li>Sekarang tambahkan kode berikut pada file <code>main.js</code>:
+  <pre class="brush: js">var myHeading = document.querySelector('h1');
+myHeading.innerHTML = 'Hello world!';</pre>
+ </li>
+ <li>Sekarang pastikan file HTML dan JavaScript disimpan, dan muat <code>index.html</code> di browser. Anda seharusnya mendapatkan hasil seperti berikut: <img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<h3 id="Apa_yang_Terjadi">Apa yang Terjadi?</h3>
+
+<p>Jadi text heading anda telah diubah menjadi "Hello world!" mengunakan JavaScript. Kita melakukannya dengan menggunakan fungsi {{domxref("Document.querySelector", "querySelector()")}} untuk mendapatkan referensi untuk heading, dan menyimpannya di variabel <code>myHeading</code>. Ini sama halnya seperti yang kita lakukan saat menggunakan CSS selector — kita menginginkan untuk melakukan sesuatu ke sebuah elemen, maka kita perlu memilihnya terlebih dahulu.</p>
+
+<p>Setelah itu, kita tambahkan nilai dari variabel <code>myHeading</code>  properti {{domxref("Element.innerHTML", "innerHTML")}}  ( dimana mewakili konten heading) ke "Hello world!".</p>
+
+<h2 id="Kursus_Kilat_Bahasa_Dasar">Kursus Kilat Bahasa Dasar</h2>
+
+<p>Mari kita jelaskan beberapa fitur dasar dari bahasa JavaScript, untuk memberi anda pemahaman lebih dalam bagaimana semuanya bekerja. Lebih baik lagi, fitur ini umum diterapkan pada semua bahasa pemrograman. Jika anda memahami fundamental ini, anda berada pada jalur untuk menguasai segala pemrograman!</p>
+
+<div class="warning">
+<p><strong>Penting</strong>: Pada artikel ini, coba masukkan contoh kode ke konsole browser anda dan lihat apa yang terjadi. Untuk detail tentang konsole browser, lihat <a href="/en-US/Learn/Discover_browser_developer_tools">Temukan Browser alat pengembang</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Catatan</strong>: Fitur seperti ini sangat umum pada semua bahasa pemrograman. Jika anda dapat memahami dasar ini, anda akan mampu memulai pemrograman apapun.</p>
+</div>
+
+<h3 id="Variabel">Variabel</h3>
+
+<p>{{Glossary("Variable", "Variables")}} merupakan wadah yang dapat anda beri nilai. Anda bisa memulai mendeklarasikan variabel dengan keyword <code>var</code>, diikuti nama yang anda inginkan:</p>
+
+<pre class="brush: js">var myVariable;</pre>
+
+<div class="note">
+<p><strong>Catatan</strong>: Semua baris di JS harus diakhiri dengan semi-colon (;), untuk menandakan akhr baris kode. Jika anda tidak menambahkanya, anda bisa mendapatkan hasil yang tidak diinginkan.</p>
+</div>
+
+<div class="note">
+<p><strong>Catatan</strong>: Anda bisa memanggil variabel apa saja, tapi ada beberapa pembatasan (lihat <a href="http://www.codelifter.com/main/tips/tip_020.shtml">artikel ini tentang aturan penamaan variabel</a>.)</p>
+</div>
+
+<div class="note">
+<p><strong>Catatan</strong>: JavaScript sangat case sensitive — <code>myVariable</code> sangat berbeda dengan variabel <code>myvariable</code>. jika anda mendapatkan masalah pada kode anda, periksa huruf besar/kecil (casing)!</p>
+</div>
+
+<p>Setelah mendeklarasikan sebuah variabel, anda bisa menambahkan nilai:</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p>Anda dapat mengambil nilai dengan memangil nama variabel:</p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p>Anda bisa melakukan operasi ini dalam satu baris jika anda menginginkanya:</p>
+
+<pre class="brush: js">var myVariable = 'Bob';</pre>
+
+<p>Setelah memberikan nilai pada variabel, setelah itu anda bisa mengubah nilainya:</p>
+
+<pre>var myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>Catat bahwa variabel memiliki <a href="/en-US/docs/Web/JavaScript/Data_structures">Tipe data</a> yang berbeda:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Variabel</th>
+   <th scope="col">Penjelasan</th>
+   <th scope="col">Contoh</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Teks String. Untuk menamdakan bahwa variabel adalah sebuah string anda perlu menambahkan tanda kutip.</td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>Angka/number. Angka tidak menggunakan tanda kutip.</td>
+   <td><code>var myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>Nilai True/False. <code>true</code>/<code>false</code> merupakan keyword spesial di JS, dan tidak perlu menggunakan kutip.</td>
+   <td><code>var myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Struktur yang memungkinkan anda menyimpan lebih dari satu nilai dalam sebuah reference.</td>
+   <td><code>var myVariable = [1,'Bob','Steve',10];</code><br>
+    Panggil setiap member array seperti ini: <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>Pada dasarnya, semua. Semuanya di javascript adalah sebuah objek, dan dapat disimpan dalam variabel. Ingatlah untuk anda belajar.</td>
+   <td><code>var myVariable = document.querySelector('h1');</code><br>
+    All of the above examples too.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Jadi kenapa kita memerlukan variabel? Baik, variable dibutuhkan dalam berbagai hal menarik di pemrograman. Jika nilainya tidak berubah, maka anda tidak dapat melakukan sesuatu hal yang bersifat dinamis, seperti menyesuaikan pesan salam ke pengunjung website anda, atau mengubah gambar yang tampil di galeri, dan masih banyak lagi.</p>
+
+<h3 id="Komentar">Komentar</h3>
+
+<p>Anda dapat menambahkan komentar di kode Javascript, seperti halnya pada CSS. Di JavaScript, sebaris komentar ditulis seperti berikut:</p>
+
+<pre class="brush: js">// Ini adalah komentar</pre>
+
+<p>Namun anda juga dapat menggunakan lebih dari satu baris komentar seperti yang  anda lakukan pada CSS:</p>
+
+<pre class="brush: js">/*
+Ini adalah komentar
+lebih dari satu baris
+*/</pre>
+
+<h3 id="Operator">Operator</h3>
+
+<p>{{Glossary("operator")}} pada dasarnya adalah simbol matematika yang bertindak atas dua nilai (atau variabel yang berisi nilai) dan menghasilkan nilai baru. Pada tabel dibawah anda bisa melihat beberapa operator yang sederhana, disertai contoh untuk anda coba di konsole browser.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Operator</th>
+   <th scope="col">Penjelasan</th>
+   <th scope="col">Simbol</th>
+   <th scope="col">Contoh</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">penambahan / penggabungan</th>
+   <td>Digunakan untuk menambahkan nilai satu dengan lainnya menjadi sebuah nilai baru, atau menggabungkan dua teks string.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">pengurangan, Perkalian, pembagian</th>
+   <td>Yang ini hasilnya sama seperti yang kita kenal di matematika dasar.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // perkalian di JS menggunakan tanda bintang (*)<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">operator penugasan</th>
+   <td>Anda telah melihat ini sebelumnya, penugasan di JS digunakan untuk memberikan nilai pada variabel.</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Operator kesetaraan</th>
+   <td>Melakukan tes untuk melihat apakah suatu nilai sama dengan nilai pembanding, dan mengembalikan nilai hasil berupa boolean <code>true</code>/<code>false</code> .</td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Negasi, tidak sama dengan</th>
+   <td>Sering digunakan bersama operator kesetaraan, operator negasi di JS sama dengan logical NOT — membalik nilai <code>true</code> menjadi <code>false</code> dan sebaliknya.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>Ekspresi dasarnya bernilai <code>true</code>, namun pada pernamdingan mengembalikan nilai <code>false</code> karena kita menggunakan negasi:</p>
+
+    <p><code>var myVariable = 3;<br>
+     !myVariable === 3;</code></p>
+
+    <p>Disini kita mencoba "Apakah  <code>myVariable</code> NOT ( tidak ) sama dengan 3". Mengembalikan nilai <code>false</code>, karena disitu pembandingnya sama dengan 3.</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Disana masih banyak lagi yang dapat anda pelajari, tapi ini dulu yang kita cukup pahami. Lihat <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operator dan ekspressi</a> untuk daftar yang lebih lengkap.</p>
+
+<div class="note">
+<p><strong>Catatan</strong>: Mencampur tipe data akan memyebabkan hasil yang tidak kita duga ketika melakukan perhitungan, jadi hati - hati ketika memberikan nilai pada variabel pastikan memberikan nilai yang sesuai, dan mendapatkan hasil sesuai yang anda inginkan. Misalnya menuliskan <code>"35" + "25"</code> pada konsol. Kenapa anda tidak mendapatkan nilai yang anda inginkan? karena tanda kutip mengubah angka menjadi teks string — anda hanya mendapatkan nilai string yang digabungkan, dan bukan angka yang ditambahkan. Jika anda memasukkan <code>35 + 25</code>, anda akan mendapatkan nilai yang sesuai.</p>
+</div>
+
+<h3 id="Kondisional">Kondisional</h3>
+
+<p>Kondisional adalah struktur kode yang memungkinkan anda untuk menguji apakah ekspresi mengembalikan nilai yang benar atau tidak, dan kemudian menjalankan perintah lain tergantung pada hasilnya. Bentuk umum dari kondisional disebut <code>if ... else</code>. Contoh seperti berikut:</p>
+
+<pre class="brush: js">var esKrim = 'coklat';
+if (esKrim === 'coklat') {
+  alert('Yay, Aku suka eskrim coklat!');
+} else {
+  alert('Hahhh, tapi sukanya coklat...');
+}</pre>
+
+<p>Ekspresi didalam <code>if ( ... )</code> dalah pengujian — disini menggunakan operator kesetaraan (seperti yang dijelaskan sebelumnya) untuk membandingkan variabe <code>esKrim</code> dengan string <code>coklat</code> untuk melihat keduanya sama. Jika hasil perbandingan mengembalikan nilai <code>true</code>, kode blok pertama akan dijalankan. Jika tidak, akan di lewati dan kode blok selanjutnya akan di jalankan, tepatnya setelah statement <code>else</code>.</p>
+
+<h3 id="Fungsi">Fungsi</h3>
+
+<p>{{Glossary("Function", "Functions")}} merupakan cara encapsulasi fungsi yang ingin anda gunakan kembali, jadi anda dapat memanggil dengan hanya sebuah nama fungsi, dan tidak harus menulis semua kodenya lagi setiap kali anda ingin menggunakannya kembali. Anda telah melihat beberapa fungsi diatas, seperti:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">var myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('Halo!');</pre>
+ </li>
+</ol>
+
+<p>Fungsi ini merupakan built-in browser untuk anda gunakan kapanpun.</p>
+
+<p>Jika anda melihat sesuatu yang mirip dengan nama variabel, tapi menggunakan tanda kurung — <code>()</code> — setelahnya, anda dapat memastikan bahwa itu adalah fungsi. Fungsi terkadang menggunakan {{Glossary("Argument", "arguments")}} — bit data yang dibutuhkan untuk dapat menjalankan fungsinya. Argumen di tulis di dalam tanda kurung, dan dipisahkan dengan koma jika memiliki lebih dari satu argumen.</p>
+
+<p>Misal, Fungsi <code>alert()</code> membuat kotak pop-up terlihat pada jendela browser, namun kita perlu membaerikan string sebagai sebuah argumen untuk mengatakan pada fungsi <code>alert()</code>pesan apa yang harus di tampilkan pada kotak po-pup.</p>
+
+<p>Berita bagusnya adalah kita dapat membuat fungsi anda sendiri — pada contoh berikut kita menulis sebuah fungsi sederhana dengan menggunakan dua argumen dan mengalikannya menjadi nilai baru:</p>
+
+<pre class="brush: js">function kalikan(angka1,angka2) {
+  var hasil = angka1 * angka2;
+  return hasil;
+}</pre>
+
+<p>Coba jalankan fungsi diatas pada konsole, kemudian coba gunakan fungsi anda beberapa kali, misal.:</p>
+
+<pre class="brush: js">kalikan(4,7);
+kalikan(20,20);
+kalikan(0.5,3);</pre>
+
+<div class="note">
+<p><strong>Catatan</strong>: Statement <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> mengatakan pada browser untuk mengembalikan nilai variabel <code>hasil</code> keluar dari fungsi sehingga dapat digunakan. Hal ini diperlukan karena variabel yang didefinisikan di dalam blok kode atau cakupan fungsi hanya akan tersedia didalam fungsi itu sendiri. Hal ini disebuat variable {{Glossary("Scope", "scoping")}} (baca <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">lebih lanjut tentang variable scoping disini</a>.)</p>
+</div>
+
+<h3 id="Events">Events</h3>
+
+<p>Untuk membuat hal yang interaktif pada website, anda perlu menggunakan event — kode struktur ini mendengarkan setiap hal yang terjadi pada browser, dan kemudian memungkinkan anda menjalankan kode sebagai respon pada hal yang terjadi tersebut. Contoh yang paling terjadi adalah <a href="/en-US/docs/Web/Events/click">click event</a>, dimana di suarakan oleh browser ketika mouse anda mengklik pada elemen seperti link, tombol atau yang lainnya. Untuk menunjukkannya, coba tambahkan kode berikut pada konsol anda, kemudian coba klik pada halaman web tersebut:</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}</pre>
+
+<p>Banyak sekali cara untuk melampirkan event pada sebuah elemen; disini kita memilih elemen HTML dan membuat properti handler <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> yang sama dengan fungsi anonim (fungsi tanpa nama) yang berisi kode yang ingin kita jalankan ketika event terjadi.</p>
+
+<p>Catat bahwa</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>
+
+<p>sama dengan</p>
+
+<pre class="brush: js">var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>Hanya untuk lebih pendek saja menuliskannya.</p>
+
+<h2 id="Meningkatkan_contoh_website_kita">Meningkatkan contoh website kita</h2>
+
+<p>Sekarang kita meninjau beberapa dasar JavaScript, mari tambahkan bebrapa fitur dasar ke contoh situs kita untuk memberi anda satu langkah kepada suatu yang mungkin.</p>
+
+<h3 id="Menambahkan_pengubah_gambar">Menambahkan pengubah gambar</h3>
+
+<p>Pada bagian ini kita akan menambahkan gambar lain pada situs kita, dan tambahkan beberapa Javascript sederhana untuk mengubah antara keduanya ketika gambar di-klik.</p>
+
+<ol>
+ <li>Pertama, cari gambar lain yang ingin anda gunakan di situs anda. Pastikan ukurannya sama dengan gambar pertama, atau kurang lebih sama.</li>
+ <li>Simpan gambar pada folder <code>images</code> anda.</li>
+ <li>Pada file <code>main.js</code> , tuliskan kode JavaScript berikut (Jika kode Javascript hello world masih disana, hapus saja):
+  <pre class="brush: js">var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Simpan semua file dan muat <code>index.html</code> di browser. Sekarang kita klik gambarnya, seharusnya berubah tampilannya menjadi gambar yang satunya!</li>
+</ol>
+
+<p>Kita menyimpan referensi ke elemen gambar Kita dalam variabel myImage. Selanjutnya, Kita membuat fungsi tanpa nama (fungsi "anonim") pada property variabel pengendali event onclick. Sekarang, setiap kali elemen gambar ini diklik:</p>
+
+<ol>
+ <li>Kita mendapatkan nilai atribut src dari gambar.</li>
+ <li>Kita menggunakan kondisional untuk memeriksa apakah nilai src sama dengan path gambar asli:
+  <ol>
+   <li>Jika ya, kita mengubah nilai src ke path gambar kedua, memaksa gambar lain dimuat dalam elemen {{htmlelement ("image")}}.</li>
+   <li>Jika tidak (artinya harus sudah mengalami perubahan), kita mengubah nilai src kembali ke jalur gambar asli, untuk membalikkannya kembali ke semula.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Menambahkan_pesan_selamat_datang_yang_dinamis">Menambahkan pesan selamat datang yang dinamis</h3>
+
+<p>Selanjutnya, Kita akan menambahkan sedikit kode lagi untuk mengubah judul halaman untuk menyertakan pesan pembuka yang dinamis saat pengguna pertama kali masuk ke situs. Pesan pembuka ini akan bertahan saat pengguna meninggalkan situs dan kemudian kembali lagi. Kita juga akan menyertakan opsi untuk mengubah pengguna dan oleh karena itu pesan selamat datang diperlukan setiap waktu.</p>
+
+<ol>
+ <li>Pada <code>index.html</code>, <span id="result_box" lang="id"><span>Tambahkan baris berikut sebelum elemen</span></span> {{htmlelement("script")}}:
+
+  <pre class="brush: html">&lt;button&gt;Change user&lt;/button&gt;</pre>
+ </li>
+ <li><code>Pada main.js</code>, <span id="result_box" lang="id"><span> tambahkan kode berikut di bagian bawah file, persis seperti yang tertulis - ini mengacu pada tombol baru yang akan kita tambahkan, judulnya, dan simpan pada variabel:</span></span>
+  <pre class="brush: js">var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>Sekarang tambahkan fungsi berikut untuk mengatur ucapan yang dinamis - ini belum berinteraksi tapi nanti akan kita gunakan:
+  <pre class="brush: js">function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+}</pre>
+  Fungsi ini berisi fungsi <a href="/id/docs/Web/API/Window.prompt"><code>prompt()</code></a> yang menampilkan kotak dialog seperti <code>alert()</code>. Perbedaannya adalah <code>prompt()</code> meminta pengguna untuk memasukkan data, dan menyimpan data tersebut dalam variabel saat tombol dialog OK ditekan. Dalam kasus ini, kita meminta pengguna memasukkan namanya. Selanjutnya, kita memanggil API yang disebut localStorage, yang memungkinkan kita menyimpan data di browser, dan mengambilnya nanti. Kita menggunakan fungsi setItem <code>LocalStorage ()</code> untuk membuat dan menyimpan item data yang disebut 'name', dan menetapkan nilainya ke variabel myName yang berisi nama pengguna yang dimasukkan. Akhirnya, kita mengatur innerHTML dari judul ke string, ditambahk nama penggunanya.</li>
+ <li>Selanjutnya, tambahkan blok <code>if ... else</code> — kita bisa memanggil kode inisialisasi, sebagai pengatur saat aplikasi pertama kali dimuat:
+  <pre class="brush: js">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
+}</pre>
+  Blok kode pertama kali menggunakan operator negasi (logical NOT) untuk memeriksa apakah item data ada - jika tidak ada, fungsi <code>setUserName()</code> dijalankan untuk membuatnya. Jika sudah ada (misalnya pengguna mengaturnya saat mereka mengunjungi situs), kita mengambil nama yang tersimpan dengan menggunakan <code>getItem()</code> dan menetapkan innerHTML dari judul ke string, ditambah nama pengguna, sama seperti yang kita lakukan di dalam <code>setUserName()</code>.</li>
+ <li>Terakhir, letakkan pengendali event di bawah <code>onclick</code> pada tombolnya, sehingga saat diklik fungsi <code>setUserName()</code> dijalankan. Hal ini memungkinkan pengguna untuk mengatur nama baru kapan pun mereka mau dengan menekan tombol:
+  <pre class="brush: js">myButton.onclick = function() {
+  setUserName();
+}</pre>
+ </li>
+</ol>
+
+<p>Sekarang saat pertama kali mengunjungi situs, akan meminta nama pengguna kemudian memberi pesan yang dinamis kepada anda. Kemudian Anda bisa mengganti nama kapan saja dengan menekan tombol. Sebagai bonus tambahan, karena namanya tersimpan di dalam localStorage, tetap ada setelah situs ditutup, jadi pesan yang dinamis akan tetap ada saat Anda membuka situs ini lagi!</p>
+
+<h2 id="Kesimpulan">Kesimpulan</h2>
+
+<p>Jika Anda telah mengikuti semua petunjuk dalam artikel ini, halaman yang Anda buat harus terlihat seperti ini (Anda juga dapat <a href="http://mdn.github.io/beginner-html-site-scripted/">melihat versi kami di sini</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>Jika Anda terjebak kebingungan, Anda selalu bisa membandingkan pekerjaan Anda dengan contoh kode yang telah <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">kami selesaikan di Github</a>.</p>
+
+<p>Di sini, kita hanya benar-benar menenepuk permukaan JavaScript. Jika Anda telah menikmati pembelajarannya dan ingin belajar lebih dalam dengan studi Anda, masuklah ke <a href="/id/docs/Web/JavaScript/Guide">Panduan JavaScript</a> kami.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/id/learn/getting_started_with_the_web/mengelola_file/index.html b/files/id/learn/getting_started_with_the_web/mengelola_file/index.html
new file mode 100644
index 0000000000..04cc90ec4b
--- /dev/null
+++ b/files/id/learn/getting_started_with_the_web/mengelola_file/index.html
@@ -0,0 +1,123 @@
+---
+title: Berurusan dengan file
+slug: Learn/Getting_started_with_the_web/Mengelola_file
+tags:
+  - CodingScripting
+  - File
+  - HTML
+  - 'I10n:prioritas'
+  - Panduan
+  - Pemula
+  - Teori
+  - website
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<blockquote>
+<h2 id="LearnSidebar">{{LearnSidebar}}</h2>
+</blockquote>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Suatu website terdiri atas banyak <em>file, </em>seperti konten teks, kode,<em> stylesheet</em>, konten media, dan lain-lain. Ketika kamu sedang membuat sebuah website, kamu perlu merangkai <em>file-file</em> ini menjadi sebuah struktur yang sesuai pada komputermu, memastikan <em>file-file</em> tersebut saling terhubung antara satu dengan lainnya, dan memastikan semua konten sudah benar sebelum akhirnya kamu <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">unggah mereka ke suatu <em>server</em></a>. Bagian ini akan membahas isu-isu yang perlu kamu ketahui sehingga kamu dapat membuat struktur <em>file </em>yang sesuai untuk website kamu.</p>
+</div>
+
+<h2 id="Di_mana_website_kamu_berada_dalam_komputermu">Di mana website kamu berada dalam komputermu?</h2>
+
+<p>Ketika kamu sedang mengerjakan satu website lokal pada komputer pribadimu, kamu harus menyimpan semua <em>file</em> terkait pada satu folder sesuai dengan struktur website yang diunggah ke <em>server</em>. Folder ini dapat kamu simpan di manapun sesukamu, tetapi kamu harus meletakkannya di suatu tempat yang mudah ditemukan, seperti Desktop, pada<em> </em>folder Home, atau pada folder <em>root</em> dari <em>hard drive</em> kamu.</p>
+
+<ol>
+ <li>Pilih tempat untuk menyimpan proyek-proyek websitemu. Buatlah sebuah folder dengan nama <code>web-projects</code> (atau nama lain yang serupa). Di sinilah proyek-proyek websitemu akan disimpan. </li>
+ <li>Di dalam folder sebelumnya, buat lagi satu folder untuk menyimpan website pertamamu. Berilah nama <code>test-site</code> (atau nama lainnya yang lebih menarik).</li>
+</ol>
+
+<h2 id="Catatan_untuk_pengaturan_huruf_kapital_dan_penggunaan_spasi">Catatan untuk pengaturan huruf kapital dan penggunaan spasi</h2>
+
+<p>Kamu akan menyadari bahwa di artikel ini, kami akan meminta kamu untuk menamai folder dan<em> file</em> dalam huruf kecil tanpa spasi. Hal ini karena:</p>
+
+<ol>
+ <li>Banyak komputer, terutama <em>web server</em>, bersifat <em>case-sensitive </em>(sensitif terhadap huruf kapital dan kecil). Sebagai contoh, jika kamu meletakkan gambar pada situs seperti <code>test-site/GambarSaya.jpg</code>, dan kemudian pada file lain kamu akan memanggil gambar tersebut dengan  <code>test-site/gambarsaya.jpg</code>, maka kemungkinan hal tersebut tidak akan berhasil. </li>
+ <li>Peramban, <em>web server</em> dan bahasa pemrograman tidak menangani spasi secara konsisten. Contohnya. jika kamu menggunakan spasi pada nama <em>file</em>mu, beberapa sistem akan memperlakukannya sebagai dua nama <em>file</em>. Beberapa server akan mengganti spasi pada nama <em>file</em>mu dengan "%20" (kode karakter untuk spasi pada URI) sehingga akan merusak semua tautanmu. Akan lebih baik bila kamu memisahkan kata-kata menggunakan tanda hubung (-), dibandingkan <em>underscore </em>(_): <code>file-saya.html</code> vs. <code>file_saya.html</code>.</li>
+</ol>
+
+<p>Jawaban singkatnya adalah kamu sebaiknya menggunakan tanda hubung (-) untuk nama <em>file </em>mu. Mesin pencari Google memperlakukan tanda hubung sebagai pemisah kata, namun ia tidak memperlakukan <em>underscore </em>sebagai hal yang sama. Atas dasar hal tersebut, sebaiknya kamu membiasakan diri menulis nama folder dan <em>file </em>dengan huruf kecil, tanpa spasi, dan dengan kata-kata yang dipisahkan oleh tanda hubung, kecuali bila kamu tahu apa yang kamu lakukan. Hal ini dapat membantumu terhindar dari masalah ke depan.</p>
+
+<h2 id="Bagaimana_struktur_yang_harus_kamu_gunakan_untuk_websitemu">Bagaimana struktur yang harus kamu gunakan untuk websitemu?</h2>
+
+<p>Berikutnya, mari kita lihat struktur seperti apa yang diperlukan oleh website percobaan kita. Hal yang paling sering kamu temukan pada proyek website apapun yang kita buat adalah sebuah <em>file</em> indeks HTML dan folder untuk menyimpan gambar, <em>file</em> CSS, dan <em>file </em>script. Ayo buat sekarang juga:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: <em>File</em> ini secara umum berisi halaman beranda, yaitu gambar dan teks yang bisa dilihat orang saat pertama kali membuka websitemu. Dengan menggunakan pengedit teks, buat sebuah <em>file</em> baru bernama <font face="consolas, Liberation Mono, courier, monospace">index.html </font>dan simpan di dalam folder <font face="consolas, Liberation Mono, courier, monospace"> <code>test-site</code>.</font></li>
+ <li><strong>Folder <code>images</code></strong>: Folder ini berisi semua gambar yang akan digunakan pada websitemu. Buatlah sebuah <em>folder</em> bernama <code>images</code> di dalam <em>folder</em> <code>test-site</code>. </li>
+ <li><strong>Folder </strong><em><strong><code>styles</code></strong></em>: Folder ini berisi kode CSS yang digunakan untuk kontenmu (contoh: pengaturan teks dan warna latar belakang). Buat folder bernama <code>styles</code> di dalam folder <code>test-site</code>.</li>
+ <li><strong>Folder <code>scripts</code></strong>: Folder ini berisi semua kode JavaScript yang digunakan untuk menambah fungsionalitas interaktif pada websitemu. Buat <em>folder</em> bernama <code>scripts</code> di dalam <em>folder </em><code>test-site</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Catatan</strong>: Pada komputer Windows, kamu mungkin mengalami kesulitan saat melihat nama file, karena Windows memiliki opsi <em><strong>Hide extensions for known file types</strong></em> yang aktif secara <em>default</em>. Umumnya, kamu dapat mematikannya dengan masuk ke Windows Explorer, pilih <strong><em>Folder options..</em>.</strong>, hilangkan centang pada kotak cek <em><strong>Hide extensions for known file types</strong></em>, lalu klik <strong>OK</strong>. Untuk informasi spesifik mengenai versi Windowsmu, kamu dapat melakukan pencarian di web.</p>
+</div>
+
+<h2 id="JalurPath_file">Jalur/<em>Path file</em></h2>
+
+<p>Agar <em>file-file</em> dapat berkomunikasi antara satu dengan lainnya, kamu harus menyediakan sebuah<em> path file</em> — sebuah rute sehingga satu file dapat mengetahui di mana lokasi file yang lainnya. Untuk mendemonstrasikannya, kita akan memasukkan sedikit HTML ke dalam file <code>index.html</code>, dan membuatnya menampilkan gambar yang kamu pilih pada artikel <a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">"Akan terlihat seperti apa website kamu?"</a> </p>
+
+<ol>
+ <li>Salin gambar yang kamu pilih sebelumnya ke folder <code>image</code>.</li>
+ <li>Buka<em> file</em> <code>index.html</code>, dan tambahkan kode berikut ke dalam file sama seperti di bawah. Abaikan maksud dari semuanya untuk saat ini — kita akan melihat struktur lebih detilnya di seri berikut.
+  <pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>My test page<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>My test image<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+ </li>
+ <li>Baris <code>&lt;img src="" alt="My test image"&gt;</code> adalah kode HTML yang menyisipkan gambar ke dalam halaman. Kita perlu memberitahu HTML di mana letak gambar tersebut. Gambar berada pada folder <em>images</em> yang sejajar dengan file <code>index.html</code>. Untuk menelusuri struktur file dari <code>index.html</code> ke gambar kita, jalur <em>file </em>yang kita butuhkan adalah <code>images/your-image-filename</code>. Sebagai contoh, gambar tersebut kami namai  <code>firefox-icon.png</code>, sehingga jalur <em>file</em>-nya menjadi <code>images/firefox-icon.png</code>.</li>
+ <li>Sisipkan jalur<em> file</em> tersebut ke dalam kode HTML kamu di antara tanda petik pada kode <code>src=""</code>.</li>
+ <li>Simpan file HTML, kemudian buka halaman tersebut pada peramban webmu (<em>double-click file</em>). Kamu akan melihat halaman web barumu menampilkan gambarmu!</li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Beberapa aturan umum untuk jalur file:</p>
+
+<ul>
+ <li>Untuk menghubungkan ke <em>file</em> target pada direktori yang sama dengan HTML yang terkait, cukup gunakan nama <em>file</em> seperti <code>my-image.jpg</code>.</li>
+ <li>Untuk menghubungkan sebuah <em>file</em> ke sebuah subdirektori, tuliskan nama direktori pada awal jalur file dengan tambahan tanda garis miring (/) seperti <code>subdirectory/my-image.jpg</code>.</li>
+ <li>Untuk menghubungkan <em>file</em> target pada direktori <strong>sebelum </strong><em>file</em> HTML terkait, tulis dua titik (..). Sebagai contoh, jika <code>index.html</code> berada di dalam <em>subfolder</em> <code>test-site</code> dan <code>my-image.jpg</code> berada pada<em> folder </em><code>test-site</code>, kamu harus menghubungkan <code>my-image.jpg</code> dengan <code>index.html</code> menggunakan <code>../my-image.jpg</code>.</li>
+ <li>Kamu dapat mengombinasikan aturan-aturan tersebut sesuai kebutuhanmu, seperti <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li>
+</ul>
+
+<p>Untuk sekarang, itulah semua yang perlu kamu ketahui.</p>
+
+<div class="note">
+<p><strong>Catatan</strong>: Sistem <em>file</em> pada Windows biasanya menggunakan garis miring terbalik (\), bukan garis miring (/), contohnya <code>C:\windows</code>. Hal ini tidak masalah pada HTML — bahkan jika kamu sedang mengembangkan websitemu di Windows, kamu tetap dapat menggunakan garis miring di kodemu.</p>
+</div>
+
+<h2 id="Apa_lagi_yang_harus_dilakukan">Apa lagi yang harus dilakukan?</h2>
+
+<p>Begitulah untuk saat ini. Struktur foldermu seharusnya terlihat seperti ini:</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Dalam_modul_ini">Dalam modul ini</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Menginstal perangkat lunak dasar</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website kamu?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Berurusan dengan file</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML dasar</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS dasar</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript dasar</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublish website kamu</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Bagaimana web bekerja</a></li>
+</ul>
diff --git a/files/id/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/id/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..ad9eaa3f64
--- /dev/null
+++ b/files/id/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,111 @@
+---
+title: Publishing your website
+slug: Learn/Getting_started_with_the_web/Publishing_your_website
+tags:
+  - Beginner
+  - 'I10n:priority'
+  - Learn
+  - NeedsTranslation
+  - Web
+  - publishing
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Setelah anda selesai menulis kode dan mengatur file yang membentuk website anda, anda perlu menaruh file - file tersebut secara online agar orang lain bisa menemukannya. Artikel ini menunjukan bagaimana kode sederhana anda online dengan sedikit usaha.</p>
+</div>
+
+<h2 id="Apa_pilihannya">Apa pilihannya?</h2>
+
+<p>Menerbitkan sebuah website bukanlah topik yang sederhana, terutama karena banyak sekali cara yang bisa digunakan. Pada artikel ini kita tidak akan membahas keseluruhan cara. Namun, kita akan membahas pro dan kontra dari ketiga strategi yang sangat luas dari pandangan pemula, dan kita akan mencoba salah satu cara untuk digunakan.</p>
+
+<h3 id="Mencari_hosting_dan_nama_domain">Mencari hosting dan nama domain</h3>
+
+<p>Jika anda ingin mengontrol keseluruhan website anda, maka anda perlu menyisikan uang untuk membeli:</p>
+
+<ul>
+ <li>Hosting — menyewa penyimpanan file pada perusahaan hosting <a href="/id/Learn/What_is_a_web_server">web server</a>. Taruh semua file website anda pada peyimpanan tersebut, dan web server akan menyajikan konten anda ke pengguna web yang memintanya.</li>
+ <li><a href="/id/Learn/Understanding_domain_names">Nama Domain</a> — alamat unik dimana orang bisa mengunjungi website anda, seperti halnya <code>http://www.mozilla.org</code>, atau <code>http://www.bbc.co.uk</code>. Anda menyewa nama domain untuk beberapa tahun dari <strong>domain registrar</strong>.</li>
+</ul>
+
+<p>Setiap website professional menerbitkan website dengan cara ini.</p>
+
+<p>Sebagai tambahan, anda memerlukan program {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (lihat <a href="/id/Learn/How_much_does_it_cost#Software">Berapa mahal harganya: software</a> untuk lebih detail) untuk mengirim file website ke server. Program FTP sangat bervariasi, tapi umumnya anda perlu login ke web server anda menggunakan detail yang diberikan oleh perusahaan hosting anda (mis. username, password, host name). Kemudian program akan menampilkan file lokal dan file di web server ada dalam dua jendela, jadi anda bisa mentransfernya dari komputer lokal ke web server dan sebaliknya:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Tips_mencai_hosting_dan_domain">Tips mencai hosting dan domain</h4>
+
+<ul>
+ <li>Disini kami tidak mempromosikan perusahaan hosting dan registrar nama domain, Cukup cari "web hosting" dan "domain names" di pencarian untuk mencari perusahaan yang menjual nama domain. Hampir semua perusahaan memberikan fitur untuk mecari nama domain yang anda inginkan.</li>
+ <li>Internet service provider untuk rumah dan kantor biasanya memberikan hosting terbatas untuk website anda. Ketersediaan fitur akan sangat terbatas, namun sangat bagus untuk anda bereksperimen  — hubungi mereka dan minta informasi!</li>
+ <li>Banyak sekali layanan gratis yang tersedia seperti <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, dan <a href="https://wordpress.com/">WordPress</a>. Sekali lagi, anda akan mendapatkan apa yang anda bayar, namun sangat ideal untuk eksperimen awal. Layanan gratis umumnya tidak memerlukan software FTP untuk mengupload — anda hanya cukup drag and drop di tampilan website saja.</li>
+ <li>Seringkali perusahaan memberikan hosting dan domain dalam satu paket.</li>
+</ul>
+
+<h3 id="Menggunakan_alat_online_seperti_GitHub_Google_App_Engine_atau_Dropbox">Menggunakan alat online seperti GitHub, Google App Engine atau Dropbox</h3>
+
+<p>Beberapa alat yang memungkinkan anda menerbitkan website secara online:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> merupakan situs "social coding". Memungkinkan anda untuk mengupload repositori kode ke penyimpanan di <a href="http://git-scm.com/">Git</a> <strong>version control system. </strong>Anda juga berkolaborasi pada sebuah proyek, dan sistemnya secara default adalah open-source, yang artinya semua orang dapat melihat kode anda di GitHub, untuk gunakan, belajar dan mengembangkan kode tersebut. GitHub memliki fitur yang sangat berguna yaitu <a href="https://pages.github.com/">GitHub Pages</a>, yang memungkinkan anda untuk menampilkan website kode langsung di Web.</li>
+ <li><a href="https://cloud.google.com/appengine/" title="App Engine - Platform as a Service — Google Cloud Platform">Google App Engine</a> merupakan sebuah platform yang powerfull yang memungkinkan anda untuk membangun dan menjalankan aplikasi pada infrastruktur google — apakah anda perlu membangun aplikasi web multi-tier dari awal atau meng-host website statik. Lihat <a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Bagaimana cara anda meng-host website anda di Google App Engine?</a> untuk informasi lengkap.</li>
+ <li><a href="https://www.dropbox.com/">Dropbox</a> merupakan sistem penyimpanan file yang memungkinkan anda menyimpan file di web dan juga memungkinkan kita untuk mengaksesnya di setiap komputer. Semua orang dengan koneksi internet dapat mengakses setiap folder dropbox jika folder tersebut anda buat secara publik. Jika folder tersebut bersi file website, maka akan secara otomatis akan disajikan sebagai halaman web. Lihat <a href="http://www.dropboxwiki.com/tips-and-tricks/host-websites-with-dropbox">Cara Host Websites dengan Dropbox</a> untuk informasi lengkapnya.</li>
+</ul>
+
+<p>Tidak seperti hosting umumnya, alat tersebut dapat digunakan secara gratis, tapi anda hanya mendapatkan fitur terbatas atau yang hanya disediakan.</p>
+
+<h3 id="Menggunakan_IDE_berbasis_web_seperti_Thimble">Menggunakan IDE berbasis web seperti Thimble</h3>
+
+<p>Banyak sekali aplikasi web yang <span id="result_box" lang="id"><span>meniru lingkungan pengembangan situs web, memungkinkan anda untuk menulis HTML, CSS, dan JavaScript, kemudian menampilkan hasil kode itu saat diberikan sebagai situs web - semuanya ada dalam satu tab browser.</span> <span>Secara umum alat ini cukup mudah, bagus untuk dipelajari, dan gratis (untuk fitur dasar), dan mereka meng-host halaman yang anda berikan di alamat web yang unik.</span> <span>Namun, fitur dasarnya cukup terbatas, dan aplikasi biasanya tidak menyediakan ruang hosting untuk aset (seperti gambar).</span></span></p>
+
+<p><span id="result_box" lang="id"><span>Cobalah bermain dengan beberapa contoh ini, dan lihatlah mana yang paling Anda sukai:</span></span></p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://thimble.mozilla.org">Thimble</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Penerbitan_Melalui_Github_Pages">Penerbitan Melalui Github Pages</h2>
+
+<p>Sekarang mari kami menuntun anda melalui cara mudah menerbitkan situs anda melalui GitHub Pages.</p>
+
+<ol>
+ <li>Pertama, <a href="https://github.com/">daftar akun GitHub</a> dan verifikasi alamat email anda.</li>
+ <li>Selanjutnya, anda perlu <a href="https://github.com/new">membuat repository</a> untuk menempatkan file anda.</li>
+ <li>Pada halaman ini, pada kolom <em>Nama Repository</em>, tulis <em>username</em>.github.io, dimana <em>username</em> merupakan username akun github anda. Sebagai contoh, teman kita rmsubekti perlu menuliskan <em>rmsubekti.github.io</em>.<br>
+  Juga centang <em>Initialize this repository with a README</em> kemudian klik <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>Setelah itu, seret konten folder website anda ke repository dan klik <em>Commit changes</em>.<br>
+
+  <div class="note">
+  <p><strong>Catatan</strong>: Pastikan folder website anda memiliki file <em>index.html</em>.</p>
+  </div>
+ </li>
+ <li>
+  <p>Sekarang kunjugi<em> username</em>.github.io dari browser anda untuk melihat website anda di sajikan secara online. Sebagai contoh, untuk username <em>chrisdavidmills</em>, maka kunjugi <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>.</p>
+
+  <div class="note">
+  <p><strong>Catatan</strong>: Mungkin akan memakan waktu sedikit lama agar website anda dapat disajikan. Jika tidak segera disajikan, anda mungkin perlu menunggu beberapa menit kemudian coba lagi.</p>
+  </div>
+ </li>
+</ol>
+
+<p>Pelajari lebih lanjut, kunjungi <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>
+
+<h2 id="Bacaan_lebih_lanjut">Bacaan lebih lanjut</h2>
+
+<ul>
+ <li><a href="/id/Learn/What_is_a_web_server">Apa itu web server</a></li>
+ <li><a href="/id/Learn/Understanding_domain_names">Memahamin nama domain</a></li>
+ <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li>
+</ul>
+
+<p>{{PreviousNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works")}}</p>