initial commit

1 files changed, 291 insertions, 0 deletions

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>