diff options
Diffstat (limited to 'files/id/learn')
42 files changed, 6882 insertions, 0 deletions
diff --git a/files/id/learn/accessibility/index.html b/files/id/learn/accessibility/index.html new file mode 100644 index 0000000000..7206a2393b --- /dev/null +++ b/files/id/learn/accessibility/index.html @@ -0,0 +1,63 @@ +--- +title: Accessibility +slug: Learn/Accessibility +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies <strong>responsibly</strong> so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics), <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.</p> + +<h2 id="Overview">Overview</h2> + +<p>When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.</p> + +<ul> + <li>Sites should be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like Alexa and Google Home.</li> + <li>Applications should be understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities.</li> + <li>Sites should also not cause harm: web features like motion can cause migraines or epileptic seizures.</li> +</ul> + +<p><strong>By default, HTML is accessible, if used correctly.</strong> Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>To get the most out of this module, it would be a good idea to either work through at least the first two modules of the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> + <dd>This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> + <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose . This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> + <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> + <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> + <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> + <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></dt> + <dd> + <p>In the assessment for this module, we present to you a simple site with several accessibility issues that you need to diagnose and fix.</p> + </dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today"><font><font>Mulai Bangun Aplikasi Web yang Dapat Diakses Hari Ini</font></font></a><font><font> - serangkaian tutorial video yang luar biasa oleh Marcy Sutton.</font></font></li> + <li><a href="https://dequeuniversity.com/resources/"><font><font>Sumber daya Universitas Deque</font></font></a><font><font> - termasuk contoh kode, referensi pembaca layar, dan sumber daya bermanfaat lainnya.</font></font></li> + <li><a href="http://webaim.org/resources/"><font><font>Sumber daya WebAIM</font></font></a><font><font> - termasuk panduan, daftar periksa, alat, dan lainnya.</font></font></li> + <li><a href="https://www.w3.org/WAI/ER/tools/"><font><font>Daftar Alat Evaluasi Aksesibilitas Web</font></font></a><font><font> - termasuk daftar alat evaluasi aksesibilitas web.</font></font></li> +</ul> diff --git a/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html b/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html new file mode 100644 index 0000000000..b4431bfc93 --- /dev/null +++ b/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html @@ -0,0 +1,98 @@ +--- +title: Bagaimana cara kerja Internet +slug: Learn/Common_questions/Bagaimana_cara_kerja_Internet +tags: + - Pemula + - Tutorial + - Web + - WebMechanics +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +<div class="summary"> +<p>Artikel ini membahas apa itu Internet dan bagaimana ia bekerja.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prasyarat:</th> + <td>Tidak ada, namun kami mendorong Anda untuk membaca <a href="/id/docs/Learn/Thinking_before_coding">Artikel tentang menetapkan tujuan proyek</a> terlebih dahulu</td> + </tr> + <tr> + <th scope="row">Tujuan:</th> + <td>Anda akan mempelajari dasar-dasar infrastruktur teknis Web dan perbedaan antara Internet dan Web.</td> + </tr> + </tbody> +</table> + +<h2 id="Ikhtisar">Ikhtisar</h2> + +<p><strong>Internet</strong> merupakan tulang punggung dari Web, infrastruktur teknis yang memungkinkan Web tersedia. Pada dasarnya, Internet adalah jaringan besar komputer yang berkomunikasi bersama-sama.</p> + +<p><a href="http://en.wikipedia.org/wiki/Internet#History" rel="external">Sejarah Internet agak tidak jelas</a>. Ini dimulai pada 1960-an sebagai proyek penelitian yang didanai oleh tentara AS, kemudian berkembang menjadi infrastruktur publik pada 1980-an dengan dukungan dari banyak universitas publik dan perusahaan swasta. Berbagai teknologi yang mendukung Internet telah berevolusi dari waktu ke waktu, tetapi cara kerjanya tidak banyak berubah: Internet adalah cara untuk menghubungkan komputer bersama-sama dan memastikan bahwa, apa pun yang terjadi, mereka menemukan cara untuk tetap terhubung.</p> + +<h2 id="Active_Learning">Active Learning</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: A 5 minute video to understand the very basics of Internet by Aaron Titus.</li> +</ul> + +<h2 id="Menyelam_lebih_dalam">Menyelam lebih dalam</h2> + +<h3 id="Sebuah_jaringan_sederhana">Sebuah jaringan sederhana</h3> + +<p>Ketika dua komputer perlu berkomunikasi, Anda harus menghubungkannya, baik secara fisik (biasanya dengan menggunakan <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">Kabel Ethernet</a>) atau nirkabel (seperti sistem <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> atau <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Semua komputer modern dapat memungkinkan koneksi tersebut.</p> + +<div class="note"> +<p><strong>Catatan:</strong> Untuk sisa artikel ini, kita hanya akan berbicara tentang kabel fisik, tetapi jaringan nirkabel bekerja dengan cara yang sama.</p> +</div> + +<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> + +<p>Jaringan seperti itu tidak terbatas pada dua komputer. Anda dapat menghubungkan banyak komputer sesuai keinginan. Tapi dapat menjadi rumit dengan mudah. Jika Anda mencoba menghubungkan, katakanlah, sepuluh komputer, Anda memerlukan 45 kabel, dengan sembilan colokan per komputer!</p> + +<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> + +<p>Untuk mengatasi masalah ini, setiap komputer di jaringan terhubung ke komputer kecil khusus yang disebut router. <em>Router</em> ini hanya memiliki satu pekerjaan: perumpamaannya seperti pemberi sinyal di stasiun kereta api, memastikan bahwa pesan yang dikirim dari komputer tertentu tiba di komputer tujuan yang tepat. Untuk mengirim pesan ke komputer B, komputer A harus mengirim pesan ke <em>router</em>, yang pada gilirannya meneruskan pesan ke komputer B dan memastikan pesan tidak dikirim ke komputer C.</p> + +<p>Setelah kita menambahkan <em>router</em> ke sistem, jaringan dari 10 komputer kita membutuhkan 10 kabel: satu pasang untuk setiap komputer dan <em>router</em> dengan 10 colokan.</p> + +<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> + +<h3 id="Jaringan_dalam_jaringan">Jaringan dalam jaringan</h3> + +<p>Sejauh ini bagus. Tapi bagaimana dengan menghubungkan ratusan, ribuan, miliaran komputer? Tentu saja satu <em>router</em> tidak dapat menskalakan sejauh itu, tetapi, jika Anda membaca dengan seksama, kami mengatakan bahwa <em>router</em> adalah komputer seperti yang lain, jadi apa yang membuat kita tidak bisa menghubungkan dua <em>router</em> bersama? Tidak ada, jadi ayo lakukan itu.</p> + +<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> + +<p>Dengan menghubungkan tiap komputer ke <em>router</em>, kemudian tiap <em>router</em> ke <em>router</em>, kita dapat menskalakan tanpa batas.</p> + +<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> + +<p>Jaringan semacam itu sangat dekat dengan apa yang kita sebut Internet, tetapi kita kehilangan sesuatu. Kita membangun jaringan itu untuk tujuan kita sendiri. Ada jaringan lain di luar sana: teman-teman Anda, tetangga Anda, siapa pun dapat memiliki jaringan komputer sendiri. Tapi itu tidak benar-benar memungkinkan untuk memasang kabel di antara rumah Anda dan seluruh dunia, jadi bagaimana Anda menangani ini? Nah, sudah ada kabel yang terhubung ke rumah Anda, misalnya, tenaga listrik dan telepon. Infrastruktur telepon sudah menghubungkan rumah Anda dengan siapa pun di dunia sehingga itu adalah kabel yang sempurna yang kita butuhkan. Untuk menghubungkan jaringan kita ke infrastruktur telepon, kita memerlukan peralatan khusus yang disebut <em>modem</em>. <em>Modem</em> ini mengubah informasi dari jaringan kita menjadi informasi yang dapat dikelola oleh infrastruktur telepon dan sebaliknya.</p> + +<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> + +<p>Maka kita terhubung ke infrastruktur telepon. Langkah selanjutnya adalah mengirim pesan dari jaringan kami ke jaringan yang ingin dijangkau. Untuk melakukan itu, kita akan menghubungkan jaringan ke Penyedia Layanan Internet (ISP). ISP adalah perusahaan yang mengelola beberapa <em>router</em> khusus yang menghubungkan semua bersama-sama dan juga dapat mengakses router ISP lain. Jadi pesan dari jaringan kita dibawa melalui jaringan jaringan ISP ke jaringan tujuan. Internet terdiri dari seluruh infrastruktur jaringan ini.</p> + +<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> + +<h3 id="Mencari_komputer">Mencari komputer</h3> + +<p>Jika Anda ingin mengirim pesan ke komputer, Anda harus menentukan komputer mana. Jadi setiap komputer yang terhubung ke jaringan memiliki alamat unik untuk mengidentifikasinya, yang disebut "alamat IP" (di mana IP adalah singkatan dari Internet Protocol). Ini adalah alamat yang dibuat dari serangkaian empat angka yang dipisahkan oleh titik-titik, misalnya: <code>192.168.2.10</code>.</p> + +<p>Itu boleh-boleh saja untuk komputer, tetapi kita manusia memiliki waktu yang sulit mengingat alamat semacam itu. Untuk mempermudah, kita bisa mengubah alamat IP dengan nama yang dapat dibaca manusia disebut <em>nama domain</em>. Misal, <code>google.com</code> adalah <em>nama domain</em> yang digunakan di atas alamat IP <code>173.194.121.32</code>. Jadi menggunakan nama domain adalah cara termudah bagi kita untuk mencapai komputer melalui Internet.</p> + +<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h3 id="Internet_dan_Web">Internet dan Web</h3> + +<p>Seperti yang Anda lihat, ketika kita menjelajah Web dengan browser Web, kita biasanya menggunakan <em>nama domain</em> untuk mencapai situs web. Apakah itu berarti Internet dan Web adalah hal yang sama? Tidak sesederhana itu. Seperti yang kita lihat, Internet adalah infrastruktur teknis yang memungkinkan miliaran komputer terhubung bersama-sama. Di antara komputer tersebut, beberapa komputer (disebut server Web) dapat mengirim pesan yang dapat dimengerti oleh browser web. Internet adalah infrastruktur, sedangkan Web adalah layanan yang dibangun di atas infrastruktur. Perlu dicatat ada beberapa layanan lain yang dibangun di atas Internet, seperti email dan IRC.</p> + +<h2 id="Langkah_selanjutnya">Langkah selanjutnya</h2> + +<ul> + <li><a href="/id/Learn/Getting_started_with_the_web/How_the_Web_works">Cara web bekerja</a></li> + <li><a href="/id/docs/Learn/page_vs_site_vs_server_vs_search_engine">Memahami perbedaan antara halaman web, web site, web server dan search engine</a></li> + <li><a href="/id/docs/Learn/Understanding_domain_names">Memahami nama domain</a></li> +</ul> diff --git a/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html b/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html new file mode 100644 index 0000000000..c50aeff182 --- /dev/null +++ b/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html @@ -0,0 +1,180 @@ +--- +title: Bagaimana saya mulai mendesain situs web saya? +slug: Learn/Common_questions/Berfikir_sebelum_membuat_kode +tags: + - Beginner + - Composing + - Menulis + - NeedsActiveLearning + - Pemula + - needsSchema +translation_of: Learn/Common_questions/Thinking_before_coding +--- +<p class="summary">Artikel ini mencakup langkah pertama yang sangat penting dari setiap proyek: tentukan apa yang ingin Anda capai dengannya.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prasyarat:</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Tujuan:</th> + <td>Belajar untuk menentukan tujuan untuk memberikan arahan untuk proyek website Anda.</td> + </tr> + </tbody> +</table> + +<h2 id="Ikhtisar">Ikhtisar</h2> + +<p><span class="seoSummary">Ketika memulai dengan proyek web, banyak orang fokus pada sisi teknis. Tentu saja Anda harus terbiasa dengan teknik kesenian Anda, tetapi yang penting adalah apa yang ingin Anda capai. Ya, tampaknya sudah jelas, tetapi terlalu banyak proyek gagal bukan karena kurangnya pengetahuan teknis, tetapi karena kurangnya tujuan dan visi.</span></p> + +<p>Jadi, ketika Anda mendapatkan ide dan ingin mengubahnya menjadi sebuah situs web, ada beberapa pertanyaan yang harus Anda jawab sebelum yang lain:</p> + +<ul> + <li>Apa yang sebenarnya ingin saya capai?</li> + <li>Bagaimana situs web akan membantu saya mencapai tujuan saya?</li> + <li>Apa yang perlu dilakukan, dan dalam urutan apa, untuk mencapai tujuan saya?</li> +</ul> + +<p>Semua ini disebut <em>ide proyek</em> dan merupakan langkah pertama yang diperlukan untuk mencapai tujuan Anda, apakah Anda seorang pemula atau pengembang yang berpengalaman.</p> + +<h2 id="Active_Learning">Active Learning</h2> + +<p><em>Belum ada pembelajaran aktif yang tersedia. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Tolong, pertimbangkan untuk berkontribusi.</a></em></p> + +<h2 id="Menyelam_lebih_dalam">Menyelam lebih dalam</h2> + +<p>Sebuah proyek tidak pernah dimulai dengan sisi teknis. Musisi tidak akan pernah membuat musik apa pun kecuali mereka terlebih dahulu memiliki gagasan tentang apa yang ingin mereka mainkan — dan hal yang sama berlaku untuk pelukis, penulis, dan pengembang web. Teknik menempati urutan kedua.</p> + +<p>Teknik jelas sangat penting. Musisi harus menguasai instrumen mereka. Tetapi musisi yang baik tidak akan pernah bisa menghasilkan musik yang bagus tanpa ide. Karena itu, sebelum terjun ke sisi teknis — misalnya, kode dan alat — Anda harus mundur dulu dan memutuskan secara terperinci apa yang ingin Anda lakukan.</p> + +<p>Diskusi satu jam dengan teman adalah awal yang baik, tetapi tidak memadai. Anda harus duduk dan menyusun ide-ide Anda untuk mendapatkan pandangan yang jelas tentang jalan apa yang harus Anda ambil untuk mewujudkan ide-ide Anda. Untuk melakukan ini, Anda hanya perlu pena dan kertas dan beberapa waktu untuk menjawab setidaknya pertanyaan-pertanyaan berikut.</p> + +<div class="note"> +<p><strong>Catatan:</strong> Ada banyak cara untuk melaksanakan ide proyek. Kita tidak bisa meletakkan semuanya di sini (keseluruhan buku tidak akan cukup). Apa yang akan kami sajikan di sini adalah metode sederhana untuk menangani apa yang para profesional sebut sebagai <a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">Project Ideation</a>, <a href="http://en.wikipedia.org/wiki/Project_planning">Project Planning</a>, dan<a href="http://en.wikipedia.org/wiki/Project_management">Project Management</a>.</p> +</div> + +<h3 id="Apa_yang_sebenarnya_ingin_saya_capai">Apa yang sebenarnya ingin saya capai?</h3> + +<p>Ini adalah pertanyaan yang paling penting untuk dijawab, karena itu mendorong segalanya. Buat daftar semua tujuan yang ingin Anda capai. Bisa apa saja: menjual barang untuk menghasilkan uang, mengekspresikan pendapat politik, bertemu teman baru, bermain musik dengan musisi, mengumpulkan gambar kucing, atau apa pun yang Anda inginkan.</p> + +<p>Misalkan Anda seorang musisi. Anda bisa berharap demikian:</p> + +<ul> + <li>Biarkan orang lain mendengarkan musik Anda.</li> + <li>Jual barang.</li> + <li>Temui musisi lain.</li> + <li>Bicara tentang musik Anda.</li> + <li>Ajarkan musik melalui video.</li> + <li>Publikasikan foto kucing Anda.</li> + <li>Temukan gadis / pacar baru.</li> +</ul> + +<p>Setelah Anda memiliki daftar seperti itu, Anda perlu memprioritaskan. Pesanlah tujuan dari yang paling penting hingga yang tidak penting:</p> + +<ol> + <li>Mencari teman laki-laki/perempuan.</li> + <li>Biarkan orang lain mendengarkan musik Anda.</li> + <li>Bicara tentang musik Anda.</li> + <li>Temui musisi lain.</li> + <li>Jual barang.</li> + <li>Ajarkan musik melalui video.</li> + <li>Publikasikan foto kucing Anda.</li> +</ol> + +<p>Melakukan latihan sederhana ini — menulis tujuan dan menyortirnya — akan membantu Anda keluar ketika Anda harus mengambil keputusan. (Haruskah saya menerapkan fitur ini, gunakan layanan ini, buat desain ini?)</p> + +<p>Jadi sekarang Anda memiliki daftar tujuan yang diprioritaskan, mari beralih ke pertanyaan berikutnya.</p> + +<h3 id="Bagaimana_sebuah_situs_web_dapat_membawa_saya_ke_tujuan_saya">Bagaimana sebuah situs web dapat membawa saya ke tujuan saya?</h3> + +<p>Jadi Anda memiliki daftar sasaran dan Anda merasa perlu situs web untuk mencapai sasaran itu. Apakah kamu yakin?</p> + +<p>Mari kita lihat kembali contoh kita. Kami memiliki lima tujuan yang terhubung dengan musik, satu tujuan yang terkait dengan kehidupan pribadi (menemukan pasangan Anda yang signifikan), dan foto-foto kucing yang sama sekali tidak terkait. Apakah masuk akal untuk membangun satu situs web untuk mencakup semua tujuan itu? Apakah itu perlu? Lagi pula, skor layanan web yang ada dapat membawa Anda ke tujuan Anda tanpa membangun situs web baru.</p> + +<p>Menemukan seorang gadis / pacar adalah kasus utama di mana lebih masuk akal untuk menggunakan sumber daya yang ada daripada membangun situs yang sama sekali baru. Mengapa? Karena kita akan menghabiskan lebih banyak waktu membangun dan memelihara situs web daripada benar-benar mencari seorang gadis / pacar. Karena tujuan kita adalah yang paling penting, kita harus menghabiskan energi kita untuk meningkatkan alat yang ada daripada memulai dari awal. Sekali lagi, ada begitu banyak layanan web yang sudah tersedia untuk menampilkan foto yang tidak sepadan dengan upaya untuk membangun situs baru hanya untuk menyebarkan berita tentang betapa lucunya kucing kita.</p> + +<p>Lima tujuan lainnya semuanya terhubung dengan musik. Tentu saja ada banyak layanan web yang dapat menangani tujuan ini, tetapi masuk akal dalam hal ini untuk membangun situs web khusus kami sendiri. Situs web semacam itu adalah cara terbaik untuk <em>mengumpulkan </em>semua hal yang ingin kami terbitkan di satu tempat (baik untuk tujuan 3, 5, dan 6) dan mempromosikan <em>interaksi</em> antara kami dan publik (baik untuk tujuan 2 dan 4). Singkatnya, karena semua tujuan ini berkisar pada topik yang sama, memiliki segalanya di satu tempat akan membantu kita memenuhi tujuan kita dan membantu pengikut kita terhubung dengan kita.</p> + +<p>Bagaimana situs web dapat membantu saya mencapai tujuan saya? Dengan menjawab itu, Anda akan menemukan cara terbaik untuk mencapai tujuan Anda dan menyelamatkan diri dari usaha yang sia-sia.</p> + +<h3 id="Apa_yang_perlu_dilakukan_dan_dalam_urutan_apa_untuk_mencapai_tujuan_saya">Apa yang perlu dilakukan, dan dalam urutan apa, untuk mencapai tujuan saya?</h3> + +<p>Sekarang setelah Anda tahu apa yang ingin Anda capai, saatnya untuk mengubah tujuan-tujuan tersebut menjadi langkah-langkah yang dapat ditindaklanjuti. Sebagai catatan tambahan, tujuan Anda tidak harus ditentukan. Mereka berevolusi dari waktu ke waktu bahkan dalam perjalanan proyek, terutama jika Anda menghadapi hambatan yang tidak terduga atau hanya mengubah pikiran Anda.</p> + +<p>Daripada melalui penjelasan panjang, mari kita kembali ke contoh kita dengan tabel ini:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tujuan</th> + <th scope="col">Hal yang harus dilakukan</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;"> + <p>Biarkan orang lain mendengarkan musik Anda</p> + </td> + <td> + <ol> + <li>Rekam musik</li> + <li>Siapkan beberapa file audio yang dapat digunakan online (Bisakah Anda melakukan ini dengan layanan web yang ada?)</li> + <li>Berikan orang akses ke musik Anda di beberapa bagian situs web Anda</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Bicara tentang musik Anda</td> + <td> + <ol> + <li>Tulis beberapa artikel untuk memulai diskusi</li> + <li>Tentukan bagaimana tampilan artikel</li> + <li>Publikasikan artikel-artikel di situs web (Bagaimana melakukan ini?)</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Bertemu musisi lain</td> + <td> + <ol> + <li>Berikan cara agar orang lain menghubungi Anda (Email? Facebook? Telepon? Mail?)</li> + <li>Tetapkan bagaimana orang akan menemukan saluran kontak itu dari situs web Anda</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Jual barang</td> + <td> + <ol> + <li>Buat barangnya </li> + <li>Simpan barangnya</li> + <li>Temukan cara untuk menangani pengiriman</li> + <li>Temukan cara untuk menangani pembayaran</li> + <li>Buat mekanisme di situs Anda agar orang memesan</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Ajarkan musik melalui video</td> + <td> + <ol> + <li>Rekam pelajaran video </li> + <li>Siapkan file video yang dapat dilihat secara online (Sekali lagi, dapatkah Anda melakukan ini dengan layanan web yang ada?)</li> + <li>Berikan orang akses ke video Anda di beberapa bagian situs web Anda</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p>Dua hal yang perlu diperhatikan. Pertama, beberapa item ini tidak terkait dengan web (mis., Rekam musik, tulis artikel). Seringkali aktivitas offline itu lebih penting daripada sisi web proyek. Dalam penjualan, misalnya, jauh lebih penting dan memakan waktu untuk menangani persediaan, pembayaran, dan pengiriman daripada membangun situs web tempat orang dapat memesan.</p> + +<p>Kedua, menetapkan langkah-langkah yang dapat ditindaklanjuti mengarah ke pertanyaan baru yang perlu Anda jawab. Biasanya ternyata ada lebih banyak pertanyaan daripada yang kita duga sebelumnya. (Misalnya, haruskah saya belajar bagaimana melakukan semua ini sendiri, meminta seseorang untuk melakukannya untuk saya, atau menggunakan layanan pihak ketiga?)</p> + +<h2 id="Kesimpulan">Kesimpulan</h2> + +<p>Seperti yang Anda lihat, ide sederhana "Saya ingin membuat situs web" menghasilkan daftar tugas yang panjang, yang hanya tumbuh lebih lama saat Anda memikirkannya. Segera mungkin terlihat luar biasa, tetapi jangan panik. Anda tidak perlu menjawab semua pertanyaan dan Anda tidak perlu melakukan semuanya dalam daftar Anda. Yang penting adalah memiliki visi tentang apa yang Anda inginkan dan bagaimana menuju ke sana. Setelah Anda memiliki visi yang jelas itu, Anda perlu memutuskan bagaimana dan kapan melakukannya. Sederhanakan tugas-tugas besar menjadi langkah-langkah kecil yang dapat ditindaklanjuti. Dan langkah-langkah kecil itu akan menambah pencapaian besar.</p> + +<p>Dari artikel ini, Anda sekarang dapat membuat rencana kasar untuk membuat situs web. Langkah selanjutnya mungkin membaca <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">how the Internet works</a>.</p> diff --git a/files/id/learn/common_questions/index.html b/files/id/learn/common_questions/index.html new file mode 100644 index 0000000000..b63f533a9a --- /dev/null +++ b/files/id/learn/common_questions/index.html @@ -0,0 +1,135 @@ +--- +title: Pertanyaan Umum +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - NeedsTranslation + - TopicStub + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Bagian Area Pembelajaran ini dirancang untuk memberikan jawaban atas pertanyaan umum yang mungkin muncul, yang bukan merupakan bagian dari jalur pembelajaran inti terstruktur (misal artikel pembelajaran <a href="/id/docs/Learn/HTML">HTML</a> atau <a href="/id/docs/Learn/HTML">CSS</a>). Artikel ini dirancang untuk bekerja sendiri.</p> + +<h2 id="Bagaimana_Web_bekerja">Bagaimana Web bekerja</h2> + +<p>Bagian ini mencakup mekanika web —pertanyaan yang berkaitan dengan pengetahuan umum tentang ekosistem Web dan bagaimana cara kerjanya.</p> + +<dl> + <dt> + <h3 id="Bagaimana_cara_kerja_Internet"><a href="/id/docs/Learn/Common_questions/Bagaimana_cara_kerja_Internet">Bagaimana cara kerja Internet?</a></h3> + </dt> + <dd><strong>Internet</strong> merupakan tulang punggung dari Web, infrastruktur teknis yang memungkinkan Web. Pada dasarnya, Internet adalah jaringan besar komputer yang berkomunikasi bersama-sama. Artikel ini membahas bagaimana internet bekerja, pada tingkat dasar.</dd> + <dt> + <h3 id="Apa_perbedaan_antara_webpage_website_web_server_dan_search_engine"> <a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Apa perbedaan antara webpage, website, web server, dan search engine?</a></h3> + </dt> + <dd>Pada artikel ini kami akan menjelaskan beragam konsep yang berhubungan dengan: webpage, website, web server, dan search engine. Konsep ini akan membingungkan bagi pemula yang baru mempelajari tentang Web, atau (pernah) melakukan kesalahan. Yuk, kita pelajari satu persatu konsep tersebut.</dd> + <dt> + <h3 id="Apa_yang_dimaksud_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">Apa yang dimaksud URL?</a></h3> + </dt> + <dd>Dengan {{Glossary("Hypertext")}} dan {{Glossary("HTTP")}}, URL sebuah konsep utama dari Web. Mekanisme ini digunakan oleh {{Glossary("Browser","browsers")}} untuk memperoleh sumber publikasi pada web.</dd> + <dt> + <h3 id="Apa_yang_dimaksud_nama_domain"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">Apa yang dimaksud nama domain?</a></h3> + </dt> + <dd>Nama domain adalah bagian dari infrastruktur Internet. Nama domain ini merupakan alamat sebuah web yang dapat dibaca oleh manusia yang berasal dari web server yang tersedia di Internet.</dd> + <dt> + <h3 id="Apa_yang_dimaksud_dengan_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">Apa yang dimaksud dengan web server?</a></h3> + </dt> + <dd>Kata "Web server" dapat diartikan sebagai sebuah perangkat keras (hardware) atau perangkat lunak (software) yang melayani website kepada klien diseluruh dunia, atau keduanya dapat bekerja sekaligus. Pada artikel ini kita akan mempelajari bagaimana web server bekerja, dan mengapa hal ini sangat penting.</dd> + <dt> + <h3 id="Apa_yang_dimaksud_dengan_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">Apa yang dimaksud dengan hyperlinks?</a></h3> + </dt> + <dd>Di artikel ini, kita akan mempelajari apa yang dimaksud dengan hyperlink dan kenapa hal ini begitu penting.</dd> +</dl> + +<h2 id="Peralatan_dan_pengaturan">Peralatan dan pengaturan</h2> + +<p>Pertanyaan yang berhubungan dengan peralatan/software yang dapat anda gunakan untuk membangun website.</p> + +<dl> + <dt> + <h3 id="Berapa_banyak_biaya_yang_dibutuhkan_untuk_membuat_website"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Berapa banyak biaya yang dibutuhkan untuk membuat website?</a></h3> + </dt> + <dd>Ketika anda akan launching sebuah website, anda (mungkin) biasa saja tidak akan mengeluarkan biaya apapun. Di artikel ini, kita akan berdiskusi berapa banyak biaya yang dibutuhkan dan apa saja yang anda dapatkan dari yang anda bayar (atau yang anda dapat secara gratis).</dd> + <dt> + <h3 id="Software_yang_Saya_butuhkan_untuk_membuat_sebuah_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">Software yang Saya butuhkan untuk membuat sebuah website?</a></h3> + </dt> + <dd>Di artikel ini kami akan menjelaskan komponen software apa saja yang anda butuhkan untuk mengedit, upload, atau menampilkan sebuah website.</dd> + <dt> + <h3 id="Text_editor_apa_saja_yang_tersedia"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">Text editor apa saja yang tersedia?</a></h3> + </dt> + <dd>Di artikel ini kami menjelaskan hal utama tentang pemilihan dan instalasi text editor untuk pengembangan web.</dd> + <dt> + <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3> + </dt> + <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd> + <dt> + <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3> + </dt> + <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd> + <dt> + <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3> + </dt> + <dd> + <div> + <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p> + </div> + </dd> + <dt> + <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3> + </dt> + <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd> + <dt> + <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3> + </dt> + <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd> + <dt> + <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3> + </dt> + <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd> + <dt> + <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3> + </dt> + <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd> +</dl> + +<h2 id="Design_and_accessibility">Design and accessibility</h2> + +<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p> + +<dl> + <dt> + <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3> + </dt> + <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd> + <dt> + <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3> + </dt> + <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd> + <dt> + <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3> + </dt> + <dd>This article introduces the basic concepts behind web accessibility.</dd> + <dt> + <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3> + </dt> + <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd> + <dt> + <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3> + </dt> + <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd> +</dl> + +<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2> + +<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li> +</ul> diff --git a/files/id/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/id/learn/common_questions/pages_sites_servers_and_search_engines/index.html new file mode 100644 index 0000000000..622e047b09 --- /dev/null +++ b/files/id/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -0,0 +1,118 @@ +--- +title: >- + What is the difference between webpage, website, web server, and search + engine? +slug: Learn/Common_questions/Pages_sites_servers_and_search_engines +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +<div class="summary"> +<p><span class="seoSummary">In this article, we describe various web-related concepts: web pages, websites, web servers, and search engines. These terms are often confused by newcomers to the web or are incorrectly used. Let's learn what they each mean!</span></p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>You should know <a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">how the Internet works</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Be able to describe the differences between a web page, a website, a web server, and a search engine.</td> + </tr> + </tbody> +</table> + +<h2 id="Summary">Summary</h2> + +<p>As with any area of knowledge, the web comes with a lot of jargon. Don't worry, we won't overwhelm you with all of it (we have a <a href="/en-US/docs/Glossary">glossary</a> if you're curious). However, there are a few basic terms you need to understand at the outset, since you'll hear these expressions all the time as you read on. It's easy to confuse these terms sometimes since they refer to related but different functionalities. In fact, you'll sometimes see these terms misused in news reports and elsewhere, so getting them mixed up is understandable!</p> + +<p>We'll cover these terms and technologies in more detail as we explore further, but these quick definitions will be a great start for you:</p> + +<dl> + <dt>web page</dt> + <dd>A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's Safari. These are also often called just "pages."</dd> + <dt>website</dt> + <dd>A collection of web pages which are grouped together and usually connected together in various ways. Often called a "web site" or simply a "site."</dd> + <dt>web server</dt> + <dd>A computer that hosts a website on the Internet.</dd> + <dt>search engine</dt> + <dd>A web service that helps you find other web pages, such as Google, Bing, Yahoo, or DuckDuckGo. Search engines are normally accessed through a web browser (e.g. you can perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a web page (e.g. <a href="https://www.bing.com/">bing.com</a> or <a href="https://duckduckgo.com/">duckduckgo.com</a>).</dd> +</dl> + +<p>Let's look at a simple analogy — a public library. This is what you would generally do when visiting a library:</p> + +<ol> + <li>Find a search index and look for the title of the book you want.</li> + <li>Make a note of the catalog number of the book.</li> + <li>Go to the particular section containing the book, find the right catalog number, and get the book.</li> +</ol> + +<p>Let's compare the library with a web server:</p> + +<ul> + <li>The library is like a web server. It has several sections, which is similar to a web server hosting multiple websites.</li> + <li>The different sections (science, math, history, etc.) in the library are like websites. Each section is like a unique website (two sections do not contain same books).</li> + <li>The books in each section are like webpages. One website may have several webpages, e.g., the Science section (the website) will have books on heat, sound, thermodynamics, statics, etc. (the webpages). Webpages can each be found at a unique location (URL).</li> + <li>The search index is like the search engine. Each book has its own unique location in the library (two books cannot be kept at the same place) which is specified by the catalog number.</li> +</ul> + +<h2 id="Active_learning">Active learning</h2> + +<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="Deeper_dive">Deeper dive</h2> + +<p>So, let's dig deeper into how those four terms are related and why they are sometimes confused with each other.</p> + +<h3 id="Web_page">Web page</h3> + +<p>A <strong>web page</strong> is a simple document displayable by a {{Glossary("browser")}}. Such documents are written in the {{Glossary("HTML")}} language (which we look into in more detail in <a href="/en-US/docs/Web/HTML">other articles</a>). A web page can embed a variety of different types of resources such as:</p> + +<ul> + <li><em>style information</em> — controlling a page's look-and-feel</li> + <li><em>scripts</em> — which add interactivity to the page</li> + <li><em>media</em> — images, sounds, and videos.</li> +</ul> + +<div class="note"> +<p><strong>Note: </strong>Browsers can also display other documents such as {{Glossary("PDF")}} files or images, but the term <strong>web page</strong> specifically refers to HTML documents. Otherwise, we only use the term <strong>document</strong>.</p> +</div> + +<p>All web pages available on the web are reachable through a unique address. To access a page, just type its address in your browser address bar:</p> + +<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p> + +<h3 id="Web_site">Web site</h3> + +<p>A <em>website</em> is a collection of linked web pages (plus their associated resources) that share a unique domain name. Each web page of a given website provides explicit links—most of the time in the form of clickable portion of text—that allow the user to move from one page of the website to another.</p> + +<p>To access a website, type its domain name in your browser address bar, and the browser will display the website's main web page, or <em>homepage </em>(casually referred as "the home"):</p> + +<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p> + +<p>The ideas of a <em>web page</em> and a <em>website</em> are especially easy to confuse for a <em>website</em> that contains only one <em>web page.</em> Such a website is sometimes called a <em>single-page website.</em></p> + +<h3 id="Web_server">Web server</h3> + +<p>A <em>web server</em> is a computer hosting one or more <em>websites</em>. "Hosting" means that all the <em>web pages </em> and their supporting files are available on that computer. The <em>web server</em> will send any <em>web page</em> from the <em>website</em> it is hosting to any user's browser, per user request.</p> + +<p>Don't confuse <em>websites</em> and <em>web servers</em>. For example, if you hear someone say, "My website is not responding", it actually means that the <em>web server</em> is not responding and therefore the <em>website</em> is not available. More importantly, since a web server can host multiple websites, the term <em>web server</em> is never used to designate a website, as it could cause great confusion. In our previous example, if we said, "My web server is not responding", it means that multiple websites on that web server are not available.</p> + +<h3 id="Search_engine">Search engine</h3> + +<p>Search engines are a common source of confusion on the web. A search engine is a special kind of website that helps users find web pages from <em>other</em> websites.</p> + +<p>There are plenty out there: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, and many more. Some are generic, some are specialized about certain topics. Use whichever you prefer.</p> + +<p>Many beginners on the web confuse search engines and browsers. Let's make it clear: A <em><strong>browser</strong></em> is a piece of software that retrieves and displays web pages; a <strong><em>search engine</em></strong> is a website that helps people find web pages from other websites. The confusion arises because, the first time someone launches a browser, the browser displays a search engine's homepage. This makes sense, because, obviously, the first thing you want to do with a browser is to find a web page to display. Don't confuse the infrastructure (e.g., the browser) with the service (e.g., the search engine). The distinction will help you quite a bit, but even some professionals speak loosely, so don't feel anxious about it.</p> + +<p>Here is an instance of Firefox showing a Google search box as its default startup page:</p> + +<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Dig deeper: <a href="/en-US/docs/Learn/What_is_a_web_server">What is a web server</a></li> + <li>See how web pages are linked into a web site: <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Understanding links on the web</a></li> +</ul> diff --git a/files/id/learn/common_questions/set_up_a_local_testing_server/index.html b/files/id/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..0bc57c45d2 --- /dev/null +++ b/files/id/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,108 @@ +--- +title: Bagaimana Anda menyiapkan server pengujian lokal? +slug: Learn/Common_questions/set_up_a_local_testing_server +tags: + - Express + - Flask + - Node + - Pemula + - Python + - django + - server-side + - servers + - sisi-server +translation_of: Learn/Common_questions/set_up_a_local_testing_server +--- +<div class="summary"> +<p>Artikel ini menjelaskan cara menyiapkan server pengujian lokal sederhana di komputer Anda, dan dasar-dasar penggunaannya.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prasyarat:</th> + <td>Anda harus terlebih dahulu mengetahui <a href="/id/docs/Learn/Common_questions/Bagaimana_cara_kerja_Internet">bagaimana cara kerja Internet</a>, dan <a href="/id/docs/Learn/What_is_a_Web_server">apa itu server Web.</a></td> + </tr> + <tr> + <th scope="row">Tujuan:</th> + <td>Anda akan belajar cara mengatur server pengujian lokal.</td> + </tr> + </tbody> +</table> + +<h2 id="Berkas_lokal_vs._berkas_remote">Berkas lokal vs. berkas remote</h2> + +<p>Di sebagian besar area pembelajaran, kami memberi tahu Anda untuk hanya membuka contoh Anda secara langsung di browser — ini dapat dilakukan dengan mengklik ganda file HTML, <em>drag and drop</em> ke jendela browser, ataupun memilih <em>File</em> > <em>Open...</em> dan menavigasi ke file HTML. Ada banyak cara untuk mencapai ini.</p> + +<p>Jika alamat web diawali dengan <code>file://</code> diikuti oleh path menuju file di hard drive lokal anda, maka berkas lokal digunakan. Sebaliknya, jika Anda melihat salah satu contoh kami dihosting di GitHub (atau contoh di beberapa remote server lain), alamat web diawali dengan <code>http://</code> atau <code>https://</code>, untuk menunjukkan berkas tersebut diterima melalui HTTP.</p> + +<h2 id="Masalah_dengan_menguji_file_lokal">Masalah dengan menguji file lokal</h2> + +<p>Beberapa contoh tidak akan berjalan jika Anda membukanya sebagai file lokal. Hal ini dapat disebabkan oleh berbagai alasan, yang paling mungkin adalah:</p> + +<ul> + <li><strong>Mereka menampilkan permintaan <span lang="en-US">asynchronous</span>.</strong> Beberapa <span lang="en-US">browser</span> (termasuk Chrome) tidak akan menjalankan permintaan <span lang="en-US">async</span> (lihat <a href="/id/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Mengambil data dari server</a>) jika anda langsung menjalankan contoh dari berkas lokal. Ini karena pembatasan keamanan (untuk lebih lanjut tentang keamanan web, baca <a href="/id/docs/Learn/Server-side/First_steps/Website_security">Keamanan situs web</a>).</li> + <li><strong>Mereka menampilkan bahasa <span lang="en-US">server side</span>.</strong> Bahasa Server-side (seperti PHP maupun Python) memerlukan server khusus untuk menginerpretasi kode dan menyerahkan hasil.</li> +</ul> + +<h2 id="Menjalankan_server_HTTP_lokal_sederhana">Menjalankan server HTTP lokal sederhana</h2> + +<p>Untuk mengatasi masalah async request, kita perlu menguji contoh-contoh tersebut dengan menjalankannya melalui server web lokal. OCara paling mudah untuk melakukan ini untuk tujuan kita adalah menggunakan <code>SimpleHTTPServer</code> module pada Python.</p> + +<p>Untuk melakukannya:</p> + +<ol> + <li> + <p>Install Python. Jika anda menggunakan Linux atau Mac OS X, seharusnya sudah tersedia di sistem Anda. Jika anda pengguna Windows, Anda bisa mendapatkan installer dari situs Python dan ikuti instruksi untuk menginstalnya:</p> + + <ul> + <li>Pergi ke <a href="https://www.python.org/">python.org</a></li> + <li>Di bawah bagian Unduh, klik tautan untuk Python "3.xxx".</li> + <li>Pada bagian bawah halaman, pilih <em>Windows x86 executable installer</em> lalu download.</li> + <li>Setelah download selesai, jalankan file tersebut.</li> + <li>Pada halaman awal installer, pastikan anda menceklis "Add Python 3.xxx to PATH" pada checkbox.</li> + <li>Klik <em>Install</em>, kemudian klik <em>Close</em> ketika instalasi selesai.</li> + </ul> + </li> + <li> + <p>Bka command prompt (Windows) / terminal (OS X/Linux) anda. tuk mengecek apakah Python telah terinstal, ketikkan perintah berikut:</p> + + <pre class="brush: bash">python -V</pre> + </li> + <li> + <p>Ini seharusnya mengembalikan nilai versi. Jika ini OK, arahkan ke direktori yang ada di dalam contoh Anda, menggunakan perintah <code>cd</code>.</p> + + <pre class="brush: bash"># masukkan nama direktori untuk memasukkannya, misalnya +cd Desktop +# gunakan dua titik untuk melompat satu tingkat direktori jika perlu +cd ..</pre> + </li> + <li> + <p>Ketikkan perintah berikut untuk menjalankan server di direktori tersebut:</p> + + <pre class="brush: bash"># Jika versi Python yang dikembalikan di atas adalah 3.X +python -m http.server +# Jika versi Python yang dikembalikan di atas adalah 2.X +python -m <code>SimpleHTTPServer</code></pre> + </li> + <li> + <p>Secara default, ini akan menjalankan konten-konten dalam direktori pada web server local, di port 8000. Anda dapat pergi ke server ini dengan pergi ke url <code>localhost:8000</code> di web browser anda. Disini anda akan melihat daftar isi dari direktori — klik pada berkas HTML yang akan anda jalankan.</p> + </li> +</ol> + +<div class="note"> +<p><strong>Catatan</strong>: Jika anda sudah menjalankan sesuatu di port 8000, anda dapat memilih port lain dengan menjalankan perintah server diikuti dengan nilai port alternatif, misal <code>python -m http.server 7800</code> (Python 3.x) atau <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Anda kemudian dapat mengakses konten Anda di <code>localhost:7800</code>.</p> +</div> + +<h2 id="Menjalankan_bahasa_sisi_server_secara_lokal">Menjalankan bahasa sisi server secara lokal</h2> + +<p>Modul <code>SimpleHTTPServer (python 2.0) http.server (python 3.0)</code> pada Python sangat berguna, tetapi tidak tahu cara menjalankan kode yang ditulis dalam bahasa seperti Python, PHP atau JavaScript. Untuk mengatasinya Anda akan butuh sesuatu yang lebih — apa yang Anda perlukan tergantung pada bahasa sisi server yang Anda coba jalankan. Beberapa contoh antara lain:</p> + +<ul> + <li>Untuk menjalankan kode Python server-side, anda butuh web framework Python. Anda dapat mengetahui cara menggunakan framework Django dengan membaca <a href="/id/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> juga merupakan alternatif yang baik (sedikit lebih berat) dibandingkan dengan Django. Untuk menjalankannya anda perlu <a href="/id/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">menginstall Python/PIP</a>, kemudian menginstall Flask menggunakan perintah <code>pip3 install flask</code>. Pada titik ini Anda seharusnya dapat menjalankan contoh-contoh Python Flask menggunakan misalnya <code>python3 python-example.py</code>, lalu menavigasi ke <code>localhost:5000</code> di browser anda.</li> + <li>Tuk menjalankan kode server-side Node.js (JavaScript), Anda harus menggunakan raw node maupun framework yang dibangun di atasnya. Express adalah pilihan yang bagus — lihat juga <a href="/id/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li> + <li>Untuk menjalankan kode server-side PHP, jalankan <a href="http://php.net/manual/en/features.commandline.webserver.php">PHP's built-in development server</a>:</li> +</ul> + +<pre class="shellcode">$ cd jalan/ke/kode/php/anda +$ php -S localhost:8000</pre> diff --git a/files/id/learn/css/index.html b/files/id/learn/css/index.html new file mode 100644 index 0000000000..b20c1b0586 --- /dev/null +++ b/files/id/learn/css/index.html @@ -0,0 +1,67 @@ +--- +title: Learn to style HTML using CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - NeedsTranslation + - Style + - Topic + - TopicStub + - length + - specificity +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Cascading Stylesheets — or {{glossary("CSS")}} — is the first technology you should start learning after {{glossary("HTML")}}. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. So for example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>You should really learn the basics of HTML before attempting any CSS. We'd recommend that you work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module first — you can then learn about:</p> + +<ul> + <li>CSS, starting with the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module</li> + <li>More advanced <a href="/en-US/Learn/HTML#Modules">HTML modules</a></li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages</li> +</ul> + +<p>Once you understand the very fundamentals of HTML, we recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't really learn CSS without knowing HTML.</p> + +<p>Before starting this topic, you should also have at least basic familiarity with using computers and using the Web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> before attempting this topic, however, it isn't absolutely necessary; much of what is covered in the CSS basics article is also covered in our Introduction to CSS module, albeit in a lot more detail.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> + <dd>This module gets you started with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> + <dd>Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new, fangled layout tools like flexbox.</dd> + <dt>Responsive design (TBD)</dt> + <dd>With so many different types of devices able to browse the Web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD, explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution, and explore the technologies available for serving different videos and images depending on such features.</dd> +</dl> + +<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage.</p> + +<p>From the beginning, the things you'll do most are to apply colors to HTML elements and their backgrounds, change the size, shape, and position of elements, and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet!</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> + <dd>The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd> +</dl> 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><head></code> dan <code></head></code>): + + <pre class="brush: html"><link href="styles/style.css" rel="stylesheet" type="text/css"></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><p></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><p id="my-id"></code> atau <code><a id="my-id"></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><p class="my-class"></code> dan <code><a class="my-class"></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><img src="myimage.png"></code> namun tidak memilih <code><img></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><a></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><head></code> dan <code></head></code>). Elemen <em>link</em> tersebut akan terlihat seperti ini: + + <pre class="brush: html"><link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></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><html></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"><p>My cat is very grumpy</p></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"><p>My cat is <strong>very</strong> grumpy.</p></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"><p>My cat is <strong>very grumpy.</p></strong></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"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>Elemen ini mengandung 2 attribut, tapi tidak punya tag <code></img></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"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="My test image"> + </body> +</html></pre> + +<p>Di sini kita punya:</p> + +<ul> + <li><code><!DOCTYPE html></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><html></html></code> — elemen {{htmlelement("html")}}. Membungkus semua konten pada satu halaman utuh dan kadang disebut sebagai elemen root.</li> + <li><code><head></head></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><meta charset="utf-8"></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><title></title></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><body></body></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"><img src="images/firefox-icon.png" alt="My test image"></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"><h1>My main title</h1> +<h2>My top level heading</h2> +<h3>My subheading</h3> +<h4>My sub-subheading</h4></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"><p>This is a single paragraph</p></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"><p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p></pre> + +<p>Kita bisa memodifikasi markup ini menjadi:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of</p> + +<ul> + <li>technologists</li> + <li>thinkers</li> + <li>builders</li> +</ul> + +<p>working together ... </p></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"><a>Mozilla Manifesto</a></pre> + </li> + <li>Berikan elemen {{htmlelement("a")}} atribut <code>href</code>, seperti ini: + <pre class="brush: html"><a href="">Mozilla Manifesto</a></pre> + </li> + <li>Isi nilai atribut ini dengan alamat web yang ingin kamu link: + <pre class="brush: html"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></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></body></code>: + <pre class="brush: html"><script src="scripts/main.js"></script></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"><button>Change user</button></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"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>My test page<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + </li> + <li>Baris <code><img src="" alt="My test image"></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> diff --git a/files/id/learn/how_to_contribute/index.html b/files/id/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..0a64757fc1 --- /dev/null +++ b/files/id/learn/how_to_contribute/index.html @@ -0,0 +1,108 @@ +--- +title: Cara berkontribusi untuk Area Belajar di MDN +slug: Learn/How_to_contribute +tags: + - Dokumentasi + - MDN + - MDN Meta + - Proyek MDC + - belajar + - kontribusi +translation_of: Learn/How_to_contribute +--- +<p>{{LearnSidebar}}</p> + +<p><span style="line-height: 1.5;">Jika Anda berada disini, itu mungkin karena Anda tertarik berkontribusi dalam Area Belajar MDN. Itu berita bagus!</span></p> + +<p><span class="seoSummary">Pada halaman ini, Anda akan menemukan semua hal yang Anda butuhkan untuk mulai membantu menigkatkan konten pembelajaran MDN. Ada banyak hal yang dapat Anda lakukan, tergantung pada seberapa waktu yang anda miliki dan apakah Anda seorang pemula, seorang pengembang web, atau seorang guru</span>.</p> + +<div class="note"> +<p><strong>Catatan:</strong> Jika Anda telah menjadi kontributor MDN, jangan ragu untuk memeriksa ulang halaman status dokumentasi untuk melacak pekerjaan yang sudah dilakukan dan melihat apa yang menjadi prioritas menulis.</p> +</div> + +<div class="note"> +<p><strong>Catatan:</strong> Kontributor menggunakan <a href="https://trello.com/b/LDggrYSV"> Trello board</a> untuk mengorganisir diri. Jika Anda ingin menggunakannya, hanya dengan membuat akun <a href="https://trello.com/signup">Trello</a> dan ping <a href="/en-US/docs/MDN/Contribute/Drivers_and_curators">Jeremie</a> untuk memberikan Anda akses tulis ke papan.</p> +</div> + +<h2 id="Saya_seorang_pemula">Saya seorang pemula</h2> + +<p>Mengagumkan! Pemula sangat penting untuk menciptakan dan memberikan umpan balik pada materi pembelajaran. Anda memiliki perspektif yang unik pada artikel ini sebagai bagian dari target pengunjung, yang dapat membuat Anda menjadi Anggota yang sangat berharga dari tim kami. memang, jika Anda menggunakan salah satu artikel kami untuk mempelajari sesuatu dan Anda terjebak, atau menemukan artikel yang membingungkan dalam berbagai cara, Anda dapat memperbaikinya atau biarkan kami tahu tentang masalahnya sehingga kami dapat memperbaikinya.</p> + +<p><span id="result_box" lang="id"><span title="Contributing is also a great way to have some fun while learning new stuff.">Kontribusi juga merupakan cara yang bagus untuk bersenang-senang sambil belajar hal-hal baru. </span><span title="If you ever feel lost or have questions, don't hesitate to reach us on our mailing list or IRC channel (see at the bottom of this page for details). + +">Jika Anda pernah merasa kebingungan atau memiliki pertanyaan, jangan ragu untuk menghubungi kami di </span></span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">mailing list kami</a><span lang="id"><span title="If you ever feel lost or have questions, don't hesitate to reach us on our mailing list or IRC channel (see at the bottom of this page for details). + +"> atau </span></span><a href="/en-US/docs/MDN/Community#Get_into_IRC">Saluran IRC</a> <span lang="id"><span title="If you ever feel lost or have questions, don't hesitate to reach us on our mailing list or IRC channel (see at the bottom of this page for details). + +"> (lihat di bagian bawah halaman ini untuk rincian).</span><br> + <br> + <span title="Here are some suggested ways you can contribute: + +">Berikut adalah beberapa cara yang disarankan untuk Anda dapat berkontribusi:</span></span></p> + +<dl> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Tambahkan tag ke artikel kami</a> (<em>5 menit</em>)</dt> + <dd><span lang="id"><span title="Tagging MDN content is one of the easiest ways to contribute to MDN.">Pemberian tag konten MDN adalah salah satu cara termudah untuk berkontribusi MDN. </span><span title="As many of our features use tags to help present information in context, helping with tagging is a very valuable contribution.">Seperti banyak fitur kami menggunakan tag untuk membantu menyajikan informasi dalam konteks, membantu dengan pemberian tag merupakan kontribusi yang sangat berharga. </span><span title="Take a look at the lists of glossary entries and learning articles without any tags to get started. +">Lihatlah </span></span><a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">daftar istilah </a><span lang="id"><span title="Take a look at the lists of glossary entries and learning articles without any tags to get started. +">dan </span></span><a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">artikel pembelajaran</a><span lang="id"><span title="Take a look at the lists of glossary entries and learning articles without any tags to get started. +"> tanpa tag untuk memulai.</span></span></dd> + <dt><a href="/en-US/docs/Glossary">Membaca dan meninjau daftar istilah</a> (<em>15 menit</em>)</dt> + <dd><span lang="id"><span title="As a beginner, we need your fresh eyes looking at our content.">Sebagai pemula, kita perlu mata segar Anda untuk melihat konten kami. </span><span title="If you find a glossary entry hard to understand, it means that entry needs to be improved.">Jika Anda menemukan entri glossary yang sulit untuk dipahami, itu berarti bahwa entrinya perlu ditingkatkan. </span><span title="Feel free to make any change you think is necessary.">Jangan ragu untuk membuat perubahan yang Anda anggap perlu. </span><span title="If you do not think you have the necessary skill to edit the entry yourself, at least tell us on our mailing list. +">Jika Anda tidak berpikir Anda memiliki keterampilan yang diperlukan untuk mengedit entri sendiri, setidaknya memberitahu kami di </span></span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">mailing list kami</a>.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Menulis daftar istilah baru</a> (<em>1 jam</em>)</dt> + <dd><span lang="id"><span title="This is the most effective way to learn something new.">Ini adalah cara yang paling efektif untuk belajar sesuatu yang baru. </span><span title="Pick a concept you want to understand, and as you learn about it, write a glossary entry about it.">Pilih sebuah konsep yang ingin Anda pahami, dan saat Anda belajar tentang hal itu, tulislah daftar istilah tentang hal itu. </span><span title='Explaining something to others is a great way to "fix" the knowledge into your brain, and to help you make sense of things yourself, all while helping other people.'>Menjelaskan sesuatu kepada orang lain adalah cara yang bagus untuk "memperbaiki" pengetahuan ke dalam otak Anda, dan membantu Anda memahami diri sendiri, sambil membantu orang lain. </span><span title="Everybody wins! +">Setiap orang menang!</span></span></dd> + <dt><a href="/en-US/Learn/Index">Membaca dan meninjau artikel pembelajaran </a>(<em>2 jam</em>)</dt> + <dd><span lang="id"><span title="This is very much like reviewing glossary entries (see above);">Hal ini sangat mirip meninjau daftar istilah (lihat di atas); </span><span title="it just takes more time, since these articles are typically quite a bit longer.">itu hanya membutuhkan waktu lebih lama, karena artikel ini biasanya sedikit lebih lama.</span></span></dd> +</dl> + +<h2 id="Saya_seorang_pengembang_web">Saya seorang pengembang web</h2> + +<p><span id="result_box" lang="id"><span title="Fantastic!">Fantastis! </span><span title="Your technical skills are just what we need to be sure we provide technically accurate content for beginners.">Keterampilan teknis Anda adalah apa yang kami butuhkan untuk memastikan kami menyediakan konten teknis yang akurat untuk pemula. </span><span title="As this specific part of MDN is dedicated to learning the Web, be sure your explanations are as simple as possible, without being so simple that they're not useful.">Karena ini adalah bagian tertentu dari MDN didedikasikan untuk belajar Web, pastikan penjelasan Anda sesederhana mungkin, tanpa begitu sederhana itu tidak akan berguna. </span><span title="It's more important to be understandable than to be overly precise. + +">Ini lebih penting untuk dimengerti daripada menjadi terlalu tepat.</span></span></p> + +<dl> + <dt><a href="/en-US/docs/Glossary">Membaca dan meninjau daftar istilah </a>(<em>15 menit</em>)</dt> + <dd><span id="result_box" lang="id"><span title="As a web developer, we need you to make sure our content is technically accurate without being too pedantic.">Sebagai pengembang web, kita perlu Anda untuk memastikan konten kami secara teknis akurat tanpa terlalu bertele-tele. </span><span title="Feel free to make any change you think is necessary.">Jangan ragu untuk membuat perubahan yang Anda anggap perlu. </span><span title="If you want to discuss the content before editing, ping us on our mailing list or IRC channel. +">Jika Anda ingin mendiskusikan isi sebelum mengedit, ping kami di </span></span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">mailing list</a> kami atau <a href="/en-US/docs/MDN/Community#Get_into_IRC">Saluran IRC</a>.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Menulis daftar istilah baru</a> (<em>1 jam</em>)</dt> + <dd><span class="message_content">Menjelaskan istilah teknis merupakan cara yang sangat baik untuk belajar menulis yang akurat sekaligus sederhana secara teknis. Para pemula akan berterima kasih kepada Anda atas hal ini. Kami memiliki </span><a href="/en-US/docs/Glossary#Contribute">banyak istilah yang belum terdefinisikan</a><span class="message_content">, yang membutuhkan perhatian Anda. Pilih salah satu dan kerjakan</span>.</dd> + <dt><a href="/en-US/Learn/Index">Membaca dan meninjau artikel pembelajaran</a> (<em>2 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="This is the same deal as with reviewing glossary entry (see above);">Ini adalah hal yang sama seperti meninjau entri glossary (lihat di atas);</span><span title="it just takes a bit more time as those articles are quite a bit longer. +"> hanya saja membutuhkan sedikit lebih banyak waktu karena artikelnya sedikit panjang.</span></span></dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Menulis artikel pembelajaran baru </a>(<em>4 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="MDN is lacking simple straightforward articles about using web technologies (HTML, CSS, JavaScript, etc).">MDN kurang artikel sederhana tentang menggunakan teknologi web </span></span>(<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, d<span lang="id"><span title="MDN is lacking simple straightforward articles about using web technologies (HTML, CSS, JavaScript, etc).">ll). </span><span title="We also have old content on MDN that deserves to be reviewed and reshaped.">Kami juga memiliki konten lama di MDN yang layak untuk dikaji dan dibentuk kembali. </span><span title="Push your skills to the limit to make web technologies usable even by beginners. +">Dorong kemampuan Anda sampai batas untuk membuat teknologi web yang dapat digunakan bahkan oleh pemula</span></span>.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Buat latihan, contoh kode atau alat pembelajaran aktif</a> (<em>? hours</em>)</dt> + <dd><span id="result_box" lang="id"><span title='All our learning articles require what we call "active learning" materials, because people learn best by doing something themselves.'>Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif", karena orang belajar lebih baik dengan melakukanya sendiri. Materi</span><span title="Such materials are exercises or interactive content that help a user to apply and manipulate the concepts detailed in an article."> tersebut adalah latihan atau konten interaktif yang membantu pengguna untuk menerapkan dan memanipulasi ricnian konsep dalam sebuah artikel. </span><span title="There are many possible ways to make active learning content, from creating code samples with JSFiddle or similar, to building fully hackable interactive content with Thimble.">Ada banyak cara yang mungkin untuk membuat konten pembelajaran yang aktif, dari menciptakan contoh kode dengan </span></span><a href="http://jsfiddle.net" rel="external">JSFiddle</a><span lang="id"><span title="There are many possible ways to make active learning content, from creating code samples with JSFiddle or similar, to building fully hackable interactive content with Thimble."> atau serupa, untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan </span></span><a href="https://thimble.webmaker.org/" rel="external">Thimble</a><span lang="id"><span title="There are many possible ways to make active learning content, from creating code samples with JSFiddle or similar, to building fully hackable interactive content with Thimble.">. </span><span title="Unleash your creativity!">Lepaskan kreativitas Anda</span></span>!</dd> +</dl> + +<h2 id="Saya_seorang_Pengajar">Saya seorang Pengajar</h2> + +<p><span id="result_box" lang="id"><span title="MDN has a long history of technical excellence, but we lack a good sense of the best way to teach concepts to newcomers.">MDN memiliki sejarah panjang keunggulan teknis, tapi kami tidak memiliki rasa yang baik dari cara terbaik untuk mengajarkan konsep untuk pendatang baru. </span><span title="This is where we need you, as a teacher or educator.">Di sinilah kami perlu Anda, sebagai pengajar atau pendidik. </span><span title="You can help us ensure that our materials provide a good, sensible educational track for our readers. + +">Anda dapat membantu kami memastikan bahwa materi yang kami berikan baik, jalur pendidikan yang masuk akal bagi pembaca kami.</span></span></p> + +<dl> + <dt><a href="/en-US/docs/Glossary">Membaca dan meninjau daftar istilah </a>(<em>15 menit</em>)</dt> + <dd><span id="result_box" lang="id"><span title="Check out a glossary entry and feel free to make any changes you think are necessary.">Periksa daftar istilah dan jangan takut untuk membuat perubahan yang menurut Anda perlu. </span><span title="If you want to discuss the content before editing, ping us on our mailing list or IRC channel. +">Jika Anda ingin mendiskusikan konten sebelum mengedit, ping kami di </span></span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">mailing list</a> atau<a href="/en-US/docs/MDN/Community#Get_into_IRC"> Saluran IRC </a>kami.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Menulis daftar istilah baru</a> (<em>1 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="Clear, simple definitions of terms and basic overviews of concepts in the glossary are critical in meeting beginners' needs.">Jelas, definisi sederhana dari istilah dan ikhtisar dasar konsep dalam daftar istilah penting dalam memenuhi kebutuhan pemula '. </span><span title="Your experience as an educator can help create excellent glossary entries;">Pengalaman Anda sebagai seorang pendidik dapat membantu membuat daftar istilah yang sangat baik; </span><span title="we have many undefined terms which need your attention.">kami memiliki <a href="/en-US/docs/Glossary#Contribute">banyak istilah yang belum terdefinisikan</a> yang perlu Anda perhatikan. </span><span title="Pick one and go for it. +">Pilih satu dan kerjakan.</span></span></dd> + <dt><a href="/en-US/docs/tag/needsSchema">Tambahkan ilustrasi dan/ atau skema artikel</a> (<em>1 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="As you might know, illustrations are an invaluable part of any learning content.">Seperti yang anda ketahui, ilustrasi merupakan bagian penting dari isi pembelajaran apapun. </span><span title="This is something we often lack on MDN and your skills can make a difference in that area.">Ini adalah sesuatu yang kita sering kekurangan di MDN dan keterampilan Anda dapat membuat perbedaan di area itu. </span><span title="Check out the articles that lack illustrative content and pick one you'd like to create graphics for. +">Kunjungi <a href="/en-US/docs/tag/needsSchema">artikel yang kekurangan konten ilustrasi</a> dan pilih salah satu yang Anda inginkan untuk membuat ilustrasi.</span></span></dd> + <dt><a href="/en-US/Learn/Index">Membaca dan meninjau artikel pembelajaran</a> (<em>2 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="This is similar to reviewing glossary entries (see above), but it requires more time since the articles are typically quite a bit longer. +">Hal ini mirip dengan meninjau daftar istilah (lihat di atas), tetapi membutuhkan lebih banyak waktu karena artikel biasanya sedikit lebih panjang.</span></span></dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Menulis artikel pembelajaran baru</a> (<em>4 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="We need simple, straightforward articles about the Web ecosystem and other functional topics around it.">Kita perlu artikel yang mudah tentang ekosistem Web dan topik fungsional lain di sekitarnya. </span><span title="Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset. +">Karena ini artikel pembelajaran perlu mendidik daripada mencoba untuk benar-benar menutupi segala sesuatu yang perlu diketahui, pengalaman Anda dalam mengetahui apa yang harus diliput dan bagaimana hal itu akan menjadi aset besar.</span></span></dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Buat latihan, kuis atau alat pembelajaran interaktif</a> (<em>? jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title='All our learning articles require what we call "active learning" materials.'>Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif". Materi</span><span title="Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article."> tersebut adalah latihan atau konten interaktif yang membantu pengguna belajar untuk menggunakan dan memanipulasi konsep yang dirincikan dalam sebuah artikel. </span><span title="There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with Thimble.">Ada banyak hal yang dapat Anda lakukan di sini, dari membuat kuis untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan <a href="https://thimble.webmaker.org/">Thimble</a>. </span><span title="Unleash your creativity! +">Lepaskan kreativitas Anda!</span></span></dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Buat jalur studi</a> (<em>? jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="In order to provide progressive and comprehensible tutorials, we need to shape ou content into pathways.">Dalam rangka memberikan tutorial yang progresif dan mudah dipahami, kita perlu membentuk konten jalur studi. </span><span title="It's a way to gather existing content and figure what are the missing learning article to write.">Ini adalah cara untuk mengumpulkan konten yang ada dan mencari apa kekurangan artikel pembelajaran untuk menuliskannya.</span></span></dd> +</dl> diff --git a/files/id/learn/html/howto/index.html b/files/id/learn/html/howto/index.html new file mode 100644 index 0000000000..ef45d155ad --- /dev/null +++ b/files/id/learn/html/howto/index.html @@ -0,0 +1,142 @@ +--- +title: Menggunakan HTML dalam masalah umum +slug: Learn/HTML/Howto +translation_of: Learn/HTML/Howto +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Daftar berikut menunjukkan solusi untuk masalah umum sehari-hari yang harus kamu selesaikan dengan menggunakan HTML.</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Struktur_Dasar">Struktur Dasar</h3> + +<p>Penerapan HTML yang paling dasar adalah struktur dokumen. Jika kamu baru mengenal HTML, kamu harus mulai dengan ini.</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">Cara membuat dokumen HTML dasar</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">Cara membagi halaman web menjadi beberapa bagian yang logis</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">Cara mengatur struktur judul dan paragraf yang tepat</a></li> +</ul> + +<h3 id="Dasar_semantik_tingkat_dasar">Dasar semantik tingkat dasar</h3> + +<p>HTML mengkhususkan dalam memberikan informasi semantik untuk dokumen, jadi HTML menjawab banyak pertanyaan yang mungkin kamu miliki tentang bagaimana cara menyampaikan pesan kamu dengan baik di dokumen kamu.</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Cara membuat list item dengan HTML</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Cara menekankan (stressed) atau menekankan (empashed) konten</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Cara menambahkan text important</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">Cara menampilkan kode komputer dengan HTML</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">Cara membuat anotasi gambar dan grafik</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Bagaimana menandai singkatan dan membuatnya bisa dimengerti</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">Bagaimana menambahkan quote dan cite ke halaman web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Hyperlinks">Hyperlinks</h3> + +<p>Salah satu alasan utama HTML adalah memudahkan navigasi {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Bagaimana cara membuat hyperlink</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Cara membuat daftar isi dengan HTML</a></li> +</ul> + +<h3 id="Gambar_multimedia">Gambar & multimedia</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">Bagaimana cara menambahkan gambar ke halaman web</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Bagaimana cara menambahkan video ke halaman web</a></li> +</ul> + +<h3 id="Scripting_styling">Scripting & styling</h3> + +<p>HTML hanya mengatur struktur dokumen. Untuk mengatasi masalah tampilan, gunakan{{glossary("CSS")}}, atau gunakan scripting atau javascript untuk membuat halaman Anda interaktif.</p> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Cara menggunakan CSS dalam halaman web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Cara menggunakan JavaScript dalam halaman web</a></li> +</ul> + +<h3 id="Embedded_content">Embedded content</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Cara mengembed halaman web di dalam halaman web lain</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">Bagaimana cara menambahkan konten Flash dalam halaman web</a></li> +</ul> +</div> +</div> + +<h2 id="Masalah_yang_tidak_umum_atau_tingkat_lanjut">Masalah yang tidak umum atau tingkat lanjut</h2> + +<p>Selain dasar-dasarnya, HTML sangat kaya dan menawarkan fitur-fitur canggih untuk memecahkan masalah yang kompleks. Artikel ini membantu kamu menangani kasus penggunaan yang kurang umum yang mungkin kamu hadapi:</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Forms_Formulir">Forms (Formulir)</h3> + +<p>Forms adalah struktur HTML kompleks yang dibuat untuk mengirim data dari halaman web ke server web. Kami mendorong kamu untuk membaca panduan lengkap kami. Di sinilah kamu harus memulai:</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">Cara membuat formulir Web sederhana</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Bagaimana menyusun formulir Web</a></li> +</ul> + +<h3 id="Tabular_information_Informasi_Tabel">Tabular information ( Informasi Tabel)</h3> + +<p>Beberapa informasi, yang disebut data tabular, perlu diatur ke dalam tabel dengan kolom dan baris. Itu salah satu struktur HTML paling kompleks, dan menguasainya tidaklah mudah:</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">Cara membuat tabel data</a></li> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Bagaimana membuat tabel HTML dapat diakses</a></li> +</ul> + +<h3 id="Data_representation_Representasi_data">Data representation (Representasi data)</h3> + +<ul> + <li>Bagaimana merepresentasikan nilai numerik dan kode dengan HTML — Lihat <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Superscript_and_subscript">Superscript and Subscript</a>, dan <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">Representasi kode komputer</a>.</li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Cara menggunakan atribut data</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Sematik_text_tingkat_lanjut">Sematik text tingkat lanjut</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/br">Cara membuat garis baru</a></li> + <li>How to mark changes (added and removed text) — see the {{htmlelement("ins")}} and {{htmlelement("del")}} elements.</li> +</ul> + +<h3 id="Advanced_images_multimedia">Advanced images & multimedia</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Bagaimana cara menambahkan gambar responsif ke halaman web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Bagaimana cara menambahkan gambar vektor ke halaman web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Bagaimana cara menambahkan peta di atas gambar</a></li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>HTML tidak monolingual. Alat ini menyediakan sesuatu untuk menangani masalah internasionalisasi umum.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Setting_the_primary_language_of_the_document">Bagaimana cara menambahkan banyak bahasa ke dalam satu halaman web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Marking_up_times_and_dates">Bagaimana menampilkan waktu dan tanggal dengan HTML</a></li> +</ul> + +<h3 id="Performa">Performa</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">Cara membuat halaman HTML yang dimuat dengan cepat</a></li> +</ul> +</div> +</div> + +<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p> + +<div id="gtx-trans" style="position: absolute; left: 50px; top: 3011.2px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/id/learn/html/index.html b/files/id/learn/html/index.html new file mode 100644 index 0000000000..8f5726db10 --- /dev/null +++ b/files/id/learn/html/index.html @@ -0,0 +1,58 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - HTML + - Panduan + - Pemula + - Pengenalan + - Topik + - belajar +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Untuk membangun websites, Anda harus mengetahui tentang {{Glossary('HTML')}} — teknologi dasar yang digunakan untuk menentukan struktur halaman web,yaitu HTML. HTML adalah kerangka dari suatu halaman web. Anda dapat menggunakan HTML untuk menentukan konten mana yang termasuk dalam paragraf, judul, link, gambar, input form, multimedia player dan lain-lain.</p> + +<p class="summary"></p> + +<h2 id="Jalur_belajar">Jalur belajar</h2> + +<p>Idealnya, Anda harus memulai perjalanan belajar dengan mempelajari HTML. Memulai dengan membaca <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. Anda kemudian dapat melanjutkan untuk belajar tentang topik yang lebih maju seperti:</p> + +<ul> + <li><a href="/en-US/docs/Learn/CSS">CSS</a>, dan bagaimana menggunakan css untuk menghias HTML (Contohnya mengubah ukuran teks dan font yang digunakan, menambahkan batas dan menaruh bayangan, tatak letak halaman Anda dengan beberapa kolom, menambahkan animasi dan efek visual lainnya.)</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, dan bagaimana menggunakannya untuk menambahkan fungsi dinamis pada halaman web (Contohnya mencari lokasi Anda dan menandakannya di peta, membuat elemen UI muncul/hilang saat Anda mengganti tombol, menyimpan data pengguna secara lokal di komputer mereka, dan banyak-banyak lagi.)</li> +</ul> + +<p>Sebelum topik dimulai, Anda harus mempunyai paling sedikit akrab menggunakan komputer, dan menggunakan web secara pasif (yaitu hanya melihat, yang mengkonsumsi konten). Anda harus memiliki lingkungan kerja dasar yang diatur seperti yang terperinci dalam <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, dan memahami bagaimana membuat dan mengelola file, seperti yang dijelaskan dalam <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — keduanya merupakan bagian dari modul <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a>.</p> + +<p>Dianjurkan agar Anda bekerja melalui <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>sebelum mencoba topik ini, namun hal itu tidak mutlak diperlukan; sebgaian besar dari apa yang tercakup dalam artikel <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> juga dibahas dalam modul <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>, meskipun dalam detail lebih banyak.</p> + +<h2 id="Modul">Modul</h2> + +<p>Topik ini berisi modul berikut, dalam urutan yang disarankan untuk mengerjakannya. Anda pasti harus mulai dengan yang pertama.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Pengenalan tentang HTML</a></dt> + <dd>Modul ini mengatur panggung, membuat Anda terbiasa dengan konsep dan sintaks penting, melihat penerapan HTML ke teks, cara membuat hyperlink, dan cara menggunakan HTML untuk menyusun halaman web.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>Modul ini membahas bagaimana menggunakan HTML untuk menyertakan multimedia di halaman web Anda, termasuk berbagai cara agar gambar dapat disertakan, dan bagaimana cara menyematkan video, audio, dan bahkan seluruh halaman Web lainnya.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt> + <dd>Mewakili data tabular pada halaman web dengan cara yang dapat dimengerti, {{glossary("Accessibility", "accessible")}} bisa menjadi tantangan tersendiri. Modul ini mencakup markup tabel dasar, beserta fitur yang lebih kompleks seperti menerapkan caption dan ringkasan.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt> + <dd>Forms adalah bagian yang sangat penting dari Web — ini memberikan banyak fungsi yang Anda butuhkan untuk berinteraksi dengan situs web, misalnya. Mendaftar dan masuk, mengirim umpan balik, membeli produk, dan banyak lagi. Modul ini akan membantu Anda memulai dengan membuat bagian-bagian client-side.</dd> +</dl> + +<h2 id="Memecahkan_masalah_HTML_biasa">Memecahkan masalah HTML biasa</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">Gunakan HTML untuk memecahkan masalah umum</a> menyediakan tautan ke bagian konten yang menjelaskan cara menggunakan HTML untuk memecahkan masalah yang sangat umum saat membuat laman web: menangani judul, menambahkan gambar atau video, menekankan konten, membuat formulir dasar, dll.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN</dt> + <dd>Petunjuk utama masuk untuk HTML dokumentasi di MDN, termasuk elemen rinci dan referensi atribut - jika Anda ingin mengetahui atribut elemen atau nilai apa yang dimiliki atribut, misalnya, ini adalah tempat yang tepat untuk memulai.</dd> +</dl> +</div> diff --git a/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html b/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..acddef0b53 --- /dev/null +++ b/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,362 @@ +--- +title: Adding vector graphics to the Web +slug: Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web +tags: + - Gambar + - Grafik + - Pemula + - Raster + - SVG + - Vektor + - belajar + - iframe + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div class="summary"> +<p>Grafik vektor sangat berguna dalam banyak keadaan — mereka memiliki ukuran file kecil dan sangat skalabel, sehingga mereka tidak terlalu besar ketika diperbesar atau meledak hingga ukuran besar. Dalam artikel ini kami akan menunjukkan kepada Anda bagaimana memasukkan satu di halaman web Anda.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Anda harus tahu <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">basics of HTML</a> dan bagaimana caranya <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">insert an image into your document</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Pelajari cara menyematkan gambar SVG (vektor) ke halaman web.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: Artikel ini tidak bermaksud mengajarkan Anda SVG; hanya apa itu, dan bagaimana menambahkannya ke halaman web.</p> +</div> + +<h2 id="Apa_itu_grafik_vektor">Apa itu grafik vektor?</h2> + +<p>Di web, Anda akan bekerja dengan dua jenis gambar — <strong>gambar raster</strong>, dan <strong>gambar vektor</strong>:</p> + +<ul> + <li><strong>Gambar raster</strong> didefinisikan menggunakan kisi-kisi piksel - file gambar raster berisi informasi yang menunjukkan dengan tepat di mana setiap piksel ditempatkan, dan persis apa warna yang seharusnya. Popular web raster formats include Bitmap (<code>.bmp</code>), PNG (<code>.png</code>), JPEG (<code>.jpg</code>), and GIF (<code>.gif</code>.)</li> + <li><strong>Gambar vektor</strong> didefinisikan menggunakan algoritme - file gambar vektor berisi definisi bentuk dan jalur yang dapat digunakan komputer untuk mengetahui seperti apa gambar itu ketika ditampilkan di layar. The {{glossary("SVG")}} format memungkinkan kita membuat grafik vektor yang kuat untuk digunakan di Web.</li> +</ul> + +<p>Untuk memberi Anda gambaran tentang perbedaan antara keduanya, mari kita lihat sebuah contoh. Anda dapat menemukan contoh ini langsung di repo Github kami sebagai <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> — itu menunjukkan dua gambar yang tampaknya identik berdampingan, dari bintang merah dengan bayangan hitam. Perbedaannya adalah yang kiri adalah PNG, dan yang kanan adalah gambar SVG.</p> + +<p>Perbedaannya menjadi jelas ketika Anda memperbesar halaman - gambar PNG menjadi pixelated saat Anda memperbesar karena berisi informasi di mana masing-masing piksel harus (dan apa warna). Ketika diperbesar, setiap piksel hanya bertambah ukurannya untuk mengisi beberapa piksel pada layar, sehingga gambar mulai tampak ganjil. Namun gambar vektor terus terlihat bagus dan segar, karena berapapun ukurannya, algoritma tersebut digunakan untuk mencari tahu bentuk-bentuk pada gambar, dengan nilai-nilai yang hanya diskalakan karena semakin besar.</p> + +<p><img alt="Two star images" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p> + +<p><img alt="Two star images zoomed in, one crisp and the other blurry" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p> + +<div class="note"> +<p><strong>Note</strong>: Gambar-gambar di atas sebenarnya semua PNG - dengan bintang kiri di setiap kasus mewakili gambar raster, dan bintang kanan mewakili gambar vektor. Again, go to the <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> demo for a real example!</p> +</div> + +<p>Selain itu, file gambar vektor jauh lebih ringan daripada raster mereka, karena mereka hanya perlu memegang beberapa algoritma, daripada informasi tentang setiap pixel dalam gambar secara individual.</p> + +<h2 id="What_is_SVG">What is SVG?</h2> + +<p><a href="/en-US/docs/Web/SVG">SVG</a> is an {{glossary("XML")}}-based bahasa untuk menggambarkan gambar vektor. Ini pada dasarnya markup, seperti HTML, kecuali bahwa Anda memiliki banyak elemen berbeda untuk menentukan bentuk yang ingin Anda tampilkan di gambar Anda, dan efek yang ingin Anda terapkan pada bentuk-bentuk itu. SVG adalah untuk menandai grafik, bukan konten. Di ujung paling sederhana dari spektrum, Anda memiliki elemen untuk membuat bentuk sederhana, seperti {{svgelement("circle")}} dan {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)</p> + +<p>Sebagai contoh sederhana, kode berikut ini membuat lingkaran dan persegi panjang:</p> + +<pre class="brush: html"><svg version="1.1" + baseProfile="full" + width="300" height="200" + xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="black" /> + <circle cx="150" cy="100" r="90" fill="blue" /> +</svg></pre> + +<p>This creates the following output:</p> + +<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Dari contoh di atas, Anda mungkin mendapat kesan bahwa SVG mudah untuk handcode. Ya, Anda dapat membuat kode tangan SVG sederhana dalam editor teks, tetapi untuk gambar yang kompleks ini dengan cepat mulai menjadi sangat sulit. For creating SVG images, most people use a vector graphics editor like <a href="https://inkscape.org/en/">Inkscape</a> or <a href="https://en.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a>. Paket-paket ini memungkinkan Anda untuk membuat berbagai ilustrasi menggunakan berbagai alat grafis, dan membuat perkiraan foto (misalnya fitur Trace Bitmap dari Inkscape.)</p> + +<p>SVG memiliki beberapa keuntungan tambahan selain yang dijelaskan sejauh ini:</p> + +<ul> + <li>Teks dalam gambar vektor tetap dapat diakses (yang juga bermanfaat bagi Anda {{glossary("SEO")}}).</li> + <li>SVG cocok untuk styling / scripting, karena setiap komponen gambar adalah elemen yang dapat ditata melalui CSS atau dituliskan melalui JavaScript.</li> +</ul> + +<p>Jadi mengapa ada orang yang mau menggunakan grafik raster di atas SVG? Nah, SVG memang memiliki beberapa kelemahan:</p> + +<ul> + <li>SVG bisa menjadi rumit dengan sangat cepat, artinya ukuran file bisa bertambah; SVG yang kompleks juga dapat mengambil waktu pemrosesan yang signifikan di browser.</li> + <li>SVG bisa lebih sulit untuk dibuat daripada gambar raster, tergantung pada jenis gambar apa yang Anda coba buat.</li> + <li>SVG tidak didukung di peramban yang lebih lama, jadi mungkin tidak cocok jika Anda perlu mendukung versi Internet Explorer yang lebih lama dengan situs web Anda (SVG mulai didukung pada IE9.)</li> +</ul> + +<p>Grafik raster bisa dibilang lebih baik untuk gambar presisi kompleks seperti foto, karena alasan yang dijelaskan di atas.</p> + +<div class="note"> +<p><strong>Note</strong>: Di Inkscape, simpan file Anda sebagai Plain SVG untuk menghemat ruang. Juga, silakan lihat ini <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">article describing how to prepare SVGs for the Web</a>.</p> +</div> + +<h2 id="Adding_SVG_to_your_pages">Adding SVG to your pages</h2> + +<p>In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.</p> + +<h3 id="The_quick_way_htmlelementimg">The quick way: {{htmlelement("img")}}</h3> + +<p>To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a <code>height</code> or a <code>width</code> attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a>.</p> + +<pre class="brush: html"><img + src="equilateral.svg" + alt="triangle with all three sides equal" + height="87" + width="100" /></pre> + +<h4 id="Pros">Pros</h4> + +<ul> + <li>Sintaks gambar cepat dan dikenal dengan teks bawaan yang tersedia di <code>alt</code> attribute.</li> + <li>You can make the image into a hyperlink easily by nesting the <code><img></code> inside an {{htmlelement("a")}} element.</li> + <li>File SVG dapat di-cache oleh browser, menghasilkan waktu pemuatan yang lebih cepat untuk setiap halaman yang menggunakan gambar yang dimuat di masa depan.</li> +</ul> + +<h4 id="Cons">Cons</h4> + +<ul> + <li>You cannot manipulate the image with JavaScript.</li> + <li>If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)</li> + <li>You cannot restyle the image with CSS pseudoclasses (like <code>:focus</code>).</li> +</ul> + +<h3 id="Troubleshooting_and_cross-browser_support">Troubleshooting and cross-browser support</h3> + +<p>For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your <code>src</code> attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:</p> + +<pre class="brush: html"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> + +<p>Anda juga dapat menggunakan SVG sebagai gambar latar belakang CSS, seperti yang ditunjukkan di bawah ini. Dalam kode di bawah ini, browser lama akan tetap dengan PNG yang mereka pahami, sementara browser yang lebih baru akan memuat SVG:</p> + +<pre class="brush: css"><code>background: url("fallback.png") no-repeat center;</code> +<code>background-image: url("image.svg"); +background-size: contain;</code></pre> + +<p>Like the <code><img></code> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.</p> + +<p>Jika SVG Anda tidak muncul sama sekali, itu mungkin karena server Anda tidak diatur dengan benar. Jika itu masalahnya, ini <a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">article will point you in the right direction</a>.</p> + +<h3 id="How_to_include_SVG_code_inside_your_HTML">How to include SVG code inside your HTML</h3> + +<p>Anda juga dapat membuka file SVG dalam editor teks, menyalin kode SVG, dan menempelkannya ke dokumen HTML Anda — this is sometimes called putting your <strong>SVG inline</strong>, or <strong>inlining SVG</strong>. Pastikan cuplikan kode SVG Anda dimulai dan diakhiri dengan <code><a href="/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> tags (don't include anything outside those.) Berikut adalah contoh yang sangat sederhana dari apa yang mungkin Anda tempel ke dalam dokumen Anda:</p> + +<pre class="brush: html"><svg width="300" height="200"> + <rect width="100%" height="100%" fill="green" /> +</svg> +</pre> + +<h4 id="Pros_2">Pros</h4> + +<ul> + <li>Menempatkan inline SVG Anda menghemat permintaan HTTP, dan karenanya dapat mengurangi sedikit waktu pemuatan Anda.</li> + <li>You can assign <code>class</code>es and <code>id</code>s to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any <a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">SVG presentation attribute </a>as a CSS property.</li> + <li>Inlining SVG adalah satu-satunya pendekatan yang memungkinkan Anda menggunakan interaksi CSS (like <code>:focus</code>) and CSS animations on your SVG image (even in your regular stylesheet.)</li> + <li>Anda dapat membuat markup SVG menjadi hyperlink dengan membungkusnya dengan {{htmlelement("a")}} element.</li> +</ul> + +<h4 id="Cons_2">Cons</h4> + +<ul> + <li>Metode ini hanya cocok jika Anda menggunakan SVG hanya di satu tempat. Duplikasi membuat pemeliharaan intensif sumber daya.</li> + <li>Kode SVG tambahan meningkatkan ukuran file HTML Anda.</li> + <li>Browser tidak dapat men-cache inline SVG karena akan men-cache aset gambar biasa, sehingga halaman yang menyertakan gambar tidak akan memuat lebih cepat setelah halaman pertama berisi gambar dimuat.</li> + <li>You may include fallback in a {{svgelement("foreignObject")}} element, tetapi browser yang mendukung SVG masih mengunduh gambar yang mundur. Anda perlu mempertimbangkan apakah overhead tambahan benar-benar berharga, hanya untuk mendukung browser yang usang.</li> +</ul> + +<ul> +</ul> + +<h3 id="How_to_embed_an_SVG_with_an_htmlelementiframe">How to embed an SVG with an {{htmlelement("iframe")}}</h3> + +<p>Anda dapat membuka gambar SVG di browser Anda seperti halnya halaman web. Jadi menanamkan dokumen SVG dengan <code><iframe></code> is done just like we studied in <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a>.</p> + +<p>Here's a quick review:</p> + +<pre class="brush: html"><iframe src="triangle.svg" width="500" height="500" sandbox> + <img src="triangle.png" alt="Triangle with three unequal sides" /> +</iframe></pre> + +<p>Ini jelas bukan metode terbaik untuk memilih:</p> + +<h4 id="Cons_3">Cons</h4> + +<ul> + <li><code>iframe</code>s do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for <code>iframe</code>s altogether.</li> + <li>Selain itu, kecuali SVG dan halaman web Anda saat ini memiliki yang sama {{glossary('origin')}}, Anda tidak dapat menggunakan JavaScript di halaman web utama Anda untuk memanipulasi SVG.</li> +</ul> + +<h2 id="Active_Learning_Playing_with_SVG">Active Learning: Playing with SVG</h2> + +<p>Di bagian pembelajaran aktif ini kami ingin Anda bersenang-senang bermain SVG untuk bersenang-senang. Di bagian <em>Input</em> di bawah ini Anda akan melihat bahwa kami telah menyediakan beberapa sampel untuk Anda mulai. Anda juga dapat pergi ke <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, cari tahu lebih detail tentang mainan lain yang bisa Anda gunakan di SVG, dan coba juga itu. Bagian ini adalah tentang mempraktekkan keterampilan riset Anda, dan bersenang-senang.</p> + +<p>If you get stuck and can't get your code working, you can always reset it using the <em>Reset</em> button.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="width: 95%;min-height: 200px;"> + <svg width="100%" height="100%"> + <rect width="100%" height="100%" fill="red" /> + <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> + <polygon points="120,0 240,225 0,225" fill="green"/> + <text x="50" y="100" font-family="Verdana" font-size="55" + fill="white" stroke="black" stroke-width="2"> + Hello! + </text> + </svg> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution" disabled> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const htmlSolution = ''; +let solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Summary">Summary</h2> + +<p>Artikel ini telah memberi Anda tur singkat tentang apa itu vektor grafik dan SVG, mengapa mereka berguna untuk diketahui, dan bagaimana memasukkan SVG ke dalam halaman web Anda. Itu tidak pernah dimaksudkan sebagai panduan lengkap untuk mempelajari SVG, hanya sebuah petunjuk sehingga Anda tahu apa itu SVG jika Anda bertemu dalam perjalanan Anda di Web. Jadi jangan khawatir jika Anda belum merasa sudah ahli SVG. Kami telah menyertakan beberapa tautan di bawah ini yang mungkin membantu Anda jika Anda ingin pergi dan mencari tahu lebih lanjut tentang cara kerjanya.</p> + +<p>Pada artikel terakhir modul ini, kami akan mengeksplorasi gambar responsif secara terperinci, dengan melihat alat-alat HTML yang memungkinkan Anda membuat gambar Anda bekerja lebih baik di berbagai perangkat.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started">SVG tutorial</a> on MDN</li> + <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Quick tips for responsive SVGs</a></li> + <li><a href="https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan's tutorial on responsive SVG images</a></li> + <li><a href="https://www.w3.org/TR/SVG-access/">Accessibility benefits of SVG</a></li> + <li><a href="https://css-tricks.com/scale-svg/">How to scale SVGs </a>(it's not as simple as raster graphics!)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> diff --git a/files/id/learn/html/multimedia_dan_embedding/index.html b/files/id/learn/html/multimedia_dan_embedding/index.html new file mode 100644 index 0000000000..fe111da30c --- /dev/null +++ b/files/id/learn/html/multimedia_dan_embedding/index.html @@ -0,0 +1,73 @@ +--- +title: Multimedia dan Embedding +slug: Learn/HTML/Multimedia_dan_embedding +tags: + - Asesmen + - Audio + - CodingScripting + - Flash + - HTML + - Image + - Landing + - Multimedia + - Panduan + - Pemula + - Pengembedan + - SVG + - Video + - Web + - belajar + - iframe + - imagemap + - img + - responsif +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the web come alive with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.</p> + +<h2 id="Persyaratan">Persyaratan</h2> + +<p>Sebelum memulai modul ini, kamu harus punya pengetahuan mendasar tentang HTML dasar, seperti dicover sebelumnya dalam <a href="https://developer.mozilla.org/id/docs/Learn/HTML/Pengenalan_HTML">Pengenalan HTML</a>. Kalau kamu belum bekerja melalui modul ini (atau sesuatu yang serupa), kerja dulu di situ, lalu kembali lagi!</p> + +<div class="note"> +<p><strong>Catatan</strong>: Kalau kamu bekerja pada komputer/tablet/device lain yang mana kamu tidak bisa membuat <em>file</em>mu sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program coding daring macam <a href="https://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Petunjuk">Petunjuk</h2> + +<p>Module ini berisi artikel berikut yang akan mengantar kamu melalui semua fundamental mengembed multimedia dalam halaman web.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Image dalam HTML</a></dt> + <dd>Ada tipe multimedia lain yang dipertimbangkan, tapi itu logis jika mulai dengan elemen {{htmlelement("img")}} yang untuk mengembed image sederhana ke dalam halaman web. Di artikel ini kita akan melihat bagaimana menggunakan itu lebih dalam, termasuk dasar, menganotasi itu dengan caption menggunakan {{htmlelement("figure")}}, dan bagaimana itu dikaitkan dengan CSS background images.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Konten video dan audio</a></dt> + <dd>Berikutnya, kita akan melihat bagaimana menggunakan elemen {{htmlelement("video")}} dan {{htmlelement("audio")}} HTML5 untuk mengembed video dan audio dalam halaman kita, termasuk dasar, menyediakan akses ke format <em>file</em> berbeda ke peramban berbeda, menambah caption dan subtitle, dan bagaimana menambah fallback untuk peramban jadul.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Dari <object> ke <iframe> — teknologi pengembedan lain</a></dt> + <dd>Pada poin ini kita akan mengambil langkah menyamping, melihat pasangan elemen yang dipakai untuk mengembed beragam tipe konten ke dalam halaman web: elemen {{htmlelement("iframe")}}, {{htmlelement("embed")}} dan {{htmlelement("object")}}. <code><iframe></code> dipakai untuk mengembed halaman web lain, dan 2 lainnya untuk mengembed PDF, SVG, dan bahkan Flash — teknologi yang jarang, tapi masih ada saja.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Menambah grafis vektor ke web</a></dt> + <dd>Grafis vektor bisa berfaedah dalam beberapa situasi. Tidak seperti format reguler macam PNG/JPG, mereka tidak terdistorsi/terpixelasi ketika dizoom-in — tetap mulus ketika discale. Artikel ini memperkenalkan kamu ke grafis vektor dan bagaimana memasukkan format {{glossary("SVG")}} populer ke dalam halaman web.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Image responsif</a></dt> + <dd>Dengan berbagai tipe device yang mampu meramban web — dari ponsel mobile ke komputer desktop — konsep esensial untuk menguasai dunia web modern web world ialah desain responsif. Ini menunjukkan kreasi halaman web yang otomatis menyesuaikan fitur mereka dengan beragam ukuran layar, resolusi, dan lain sebagainya. Ini akan dibahas mendetil dalam modul CSS lebih lanjut, tapi untuk sekarang, kita akan melihat tools yang tersedia bagi HTML untuk membuat responsif image, termasuk elemen {{htmlelement("picture")}}.</dd> +</dl> + +<h2 id="Asesmen">Asesmen</h2> + +<p>Asesmen berikut akan menguhi pemahamanmu tentang HTML dasar yang dicover dalam panduan di atas:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Halaman splash Mozilla</a></dt> + <dd>Dalam asesmen ini, kita akan menguji pengetahuanmu tentang beberapa teknik yang didiskusikan dalam artikel modul, membuat kamu menambah beberapa image dan video ke halaman splash funky tentang Mozilla!</dd> +</dl> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></dt> + <dd>Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt> + <dd> + <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in this <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).</p> + </dd> +</dl> diff --git a/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html b/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html new file mode 100644 index 0000000000..e13790b7f4 --- /dev/null +++ b/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html @@ -0,0 +1,251 @@ +--- +title: Responsive images +slug: Learn/HTML/Multimedia_dan_embedding/Responsive_images +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div> +<p class="summary"><font>Pada artikel ini, kita akan belajar tentang konsep gambar responsif - gambar yang bekerja dengan baik pada perangkat dengan ukuran layar, resolusi, dan fitur lain yang sangat berbeda - dan melihat alat apa yang disediakan HTML untuk membantu mengimplementasikannya. </font><font>Ini membantu meningkatkan kinerja di berbagai perangkat yang berbeda. </font><font>Gambar responsif hanyalah salah satu bagian dari</font> <a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">responsive design</a>, topik CSS masa depan yang dapat Anda pelajari.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Anda harus sudah mengetahui <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">basics of HTML</a> dan cara <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">add static images to a web page</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Learn how to use features like {{htmlattrxref("srcset", "img")}} and the {{htmlelement("picture")}} element to implement responsive image solutions on websites.</td> + </tr> + </tbody> +</table> + +<h2 id="Why_responsive_images">Why responsive images?</h2> + +<p>Let's examine a typical scenario. <font>Situs web tipikal mungkin berisi gambar tajuk dan beberapa gambar konten di bawah tajuk. </font><font>Gambar header kemungkinan akan menjangkau seluruh lebar header, dan gambar konten akan cocok di suatu tempat di dalam kolom konten. </font><font>Berikut ini contoh sederhana:</font></p> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p> + +<p>Ini bekerja dengan baik pada perangkat layar lebar, seperti laptop atau desktop (you can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">see the example live</a> and find the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">source code</a> on Github.) Kami tidak akan banyak membahas CSS dalam pelajaran ini, kecuali untuk mengatakan bahwa:</p> + +<ul> + <li>The body content has been set to a maximum width of 1200 pixels — in viewports above that width the body remains at 1200px and centers itself in the available space. In viewports below that width, the body will stay at 100% of the width of the viewport.</li> + <li>The header image has been set so that its center always stays in the center of the header, no matter what width the heading is set at. If the site is being viewed on a narrower screen, the important detail in the center of the image (the people) can still be seen, and the excess is lost off either side. It is 200px high.</li> + <li>The content images have been set so that if the body element becomes smaller than the image, the images start to shrink so that they always stay inside the body, rather than overflowing it.</li> +</ul> + +<p><font>Namun, masalah muncul ketika Anda mulai melihat situs di perangkat layar sempit. </font><font>Header di bawah ini terlihat baik-baik saja, tetapi mulai mengambil banyak ketinggian layar untuk perangkat seluler. </font><font>Dan pada ukuran ini, sulit untuk melihat orang-orang di dalam gambar konten pertama.</font></p> + +<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p> + +<p>An improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. A second cropped image could be displayed for a medium width screen device, like a tablet. This is commonly known as the <strong>art direction problem</strong>.</p> + +<p>In addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. And conversely, a small <a href="/en-US/docs/Glossary/Raster_image">raster image</a> starts to look grainy when displayed larger than its original size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a>). This is called the <strong>resolution switching problem</strong>.</p> + +<p><font>Sebaliknya, tidak perlu untuk menampilkan gambar besar di layar secara signifikan lebih kecil dari ukuran yang dimaksudkan. </font><font>Melakukannya dapat menghabiskan bandwidth; </font><font>khususnya, pengguna seluler tidak ingin membuang bandwidth dengan mengunduh gambar besar yang ditujukan untuk desktop, ketika gambar kecil dilakukan untuk perangkat mereka. </font><font>Idealnya, Anda akan memiliki beberapa resolusi yang tersedia dan melayani ukuran yang sesuai tergantung pada perangkat yang mengakses data di situs web.</font></p> + +<p><font>Untuk membuat segalanya lebih rumit, beberapa perangkat memiliki layar resolusi tinggi yang membutuhkan gambar lebih besar dari yang Anda harapkan untuk ditampilkan dengan baik. </font><font>Ini pada dasarnya adalah masalah yang sama, tetapi dalam konteks yang sedikit berbeda.</font></p> + +<p><font>Anda mungkin berpikir bahwa gambar vektor akan menyelesaikan masalah ini, dan mereka melakukannya pada tingkat tertentu - mereka berukuran kecil dalam ukuran dan skalanya dengan baik, dan Anda harus menggunakannya sedapat mungkin. </font><font>Namun, mereka tidak cocok untuk semua jenis gambar. </font><font>Gambar vektor sangat bagus untuk grafik, pola, elemen antarmuka, dll. Sederhana, tetapi mulai menjadi sangat kompleks untuk membuat gambar berbasis vektor dengan jenis detail yang akan Anda temukan di katakanlah, foto. </font><font>Format gambar raster seperti JPEG lebih cocok untuk jenis gambar yang kita lihat dalam contoh di atas.</font></p> + +<p>This kind of problem didn't exist when the web first existed, in the early to mid 90s — back then the only devices in existence to browse the Web were desktops and laptops, so browser engineers and spec writers didn't even think to implement solutions. <em>Responsive image technologies</em> were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (<em>resolution switching</em>), or different images suitable for different space allocations (<em>art direction</em>).</p> + +<div class="note"> +<p><strong>Note</strong>: The new features discussed in this article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — are all supported in release versions of modern desktop and mobile browsers (including Microsoft's Edge browser, although not Internet Explorer.) </p> +</div> + +<h2 id="How_do_you_create_responsive_images">How do you create responsive images?</h2> + +<p><font>Di bagian ini, kita akan melihat dua masalah yang diilustrasikan di atas dan menunjukkan bagaimana menyelesaikannya menggunakan fitur gambar HTML yang responsif. </font><font>Anda harus mencatat bahwa kami akan fokus pada HTML</font> {{htmlelement("img")}}s for this section, seperti yang terlihat di area konten dari contoh di atas - gambar di header situs hanya untuk dekorasi, dan karenanya diimplementasikan menggunakan gambar latar belakang CSS. <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS arguably has better tools for responsive design</a> than HTML, and we'll talk about those in a future CSS module.</p> + +<h3 id="Resolution_switching_Different_sizes">Resolution switching: Different sizes</h3> + +<p>So, what is the problem that we want to solve with resolution switching? We want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. The standard {{htmlelement("img")}} element traditionally only lets you point the browser to a single source file:</p> + +<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> + +<p>We can however use two new attributes — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — to provide several additional source images along with hints to help the browser pick the right one. You can see an example of this in our <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> example on Github (see also <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">the source code</a>):</p> + +<pre class="brush: html"><img srcset="elva-fairy-480w.jpg 480w, + elva-fairy-800w.jpg 800w" + sizes="(max-width: 600px) 480px, + 800px" + src="elva-fairy-800w.jpg" + alt="Elva dressed as a fairy"></pre> + +<p>The <code>srcset</code> and <code>sizes</code> attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line. Each value contains a comma-separated list, and each part of those lists is made up of three sub-parts. Let's run through the contents of each now:</p> + +<p><strong><code>srcset</code></strong> mendefinisikan set gambar yang kami akan memungkinkan browser untuk memilih di antara, dan berapa ukuran masing-masing gambar. Setiap rangkaian informasi gambar dipisahkan dari yang sebelumnya dengan koma. Untuk masing-masing, kami menulis:</p> + +<ol> + <li>An <strong>image filename</strong> (<code>elva-fairy-480w.jpg</code>)</li> + <li>A space</li> + <li>The image's <strong>intrinsic width in pixels</strong> (<code>480w</code>) — note that this uses the <code>w</code> unit, not <code>px</code> as you might expect. This is the image's real size, which can be found by inspecting the image file on your computer (for example, on a Mac you can select the image in Finder and press <kbd>Cmd</kbd> + <kbd>I</kbd> to bring up the info screen).</li> +</ol> + +<p><strong><code>sizes</code></strong> mendefinisikan serangkaian kondisi media (mis. lebar layar) dan menunjukkan ukuran gambar apa yang terbaik untuk dipilih, ketika kondisi media tertentu benar - ini adalah petunjuk yang telah kita bicarakan sebelumnya. Dalam hal ini, sebelum setiap koma kami menulis:</p> + +<ol> + <li>A <strong>media condition</strong> (<code>(max-width:600px)</code>) — you'll learn more about these in the <a href="/en-US/docs/Learn/CSS">CSS topic</a>, but for now let's just say that a media condition describes a possible state that the screen can be in. In this case, we are saying "when the viewport width is 600 pixels or less".</li> + <li>A space</li> + <li>The <strong>width of the slot</strong> the image will fill when the media condition is true (<code>480px</code>)</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: For the slot width, you may provide an absolute length (<code>px</code>, <code>em</code>) or a length relative to the viewport (<code>vw</code>), but not percentages. You may have noticed that the last slot width has no media condition (this is the default that is chosen when none of the media conditions are true). The browser ignores everything after the first matching condition, so be careful how you order the media conditions.</p> +</div> + +<p>So, with these attributes in place, the browser will:</p> + +<ol> + <li>Look at its device width</li> + <li>Work out which media condition in the <code>sizes</code> list is the first one to be true</li> + <li>Look at the slot size given to that media query</li> + <li>Load the image referenced in the <code>srcset</code> list that <strong>most closely</strong> matches the chosen slot size</li> +</ol> + +<p>And that's it! At this point, if a supporting browser with a viewport width of 480px loads the page, the <code>(max-width: 600px)</code> media condition will be true, and so the browser chooses the <code>480px</code> slot. The <code>elva-fairy-480w.jpg</code> will be loaded, as its inherent width (<code>480w</code>) is closest to the slot size. The 800px picture is 128KB on disk, whereas the 480px version is only 63KB — a saving of 65KB. Now, imagine if this was a page that had many pictures on it. Using this technique could save mobile users a lot of bandwidth.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: When testing this with a desktop browser, if the browser fails to load the narrower images when you've got its window set to the narowest width, have a look at what the viewport is (you can approximate it by going into the browser's JavaScript console and typing in <code><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">document</span>.<span class="cm-property">querySelector</span>(<span class="cm-string">'html'</span>).<span class="cm-property">clientWidth</span></span></span></span></code>). Different browsers have minimum sizes that they'll let you reduce the window width to, and they might be wider than you'd think. When testing it with a mobile browser, you can use tools like Firefox's <code>about:debugging</code> page to inspect the page loaded on the mobile using the desktop developer tools.<br> + <br> + To see which images were loaded, you can use Firefox DevTools's <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> tab.</p> +</div> + +<p>Older browsers that don't support these features will just ignore them. Instead, those browsers will go ahead and load the image referenced in the {{htmlattrxref("src", "img")}} attribute as normal.</p> + +<div class="note"> +<p><strong>Note</strong>: In the {{htmlelement("head")}} of the example linked above, you'll find the line <code><meta name="viewport" content="width=device-width"></code>: this forces mobile browsers to adopt their real viewport width for loading web pages (some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or design).</p> +</div> + +<h3 id="Resolution_switching_Same_size_different_resolutions">Resolution switching: Same size, different resolutions</h3> + +<p>If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using <code>srcset</code> with x-descriptors and without <code>sizes</code> — a somewhat easier syntax! You can find an example of what this looks like in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (see also <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p> + +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, + elva-fairy-480w.jpg 1.5x, + elva-fairy-640w.jpg 2x" + src="elva-fairy-640w.jpg" + alt="Elva dressed as a fairy"> +</pre> + +<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">In this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):</p> + +<pre class="brush: css">img { + width: 320px; +}</pre> + +<p>In this case, <code>sizes</code> is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the <code>srcset</code>. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the <code>elva-fairy-320w.jpg</code> image will be loaded (the 1x is implied, so you don't need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the <code>elva-fairy-640w.jpg</code> image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.</p> + +<h3 id="Art_direction">Art direction</h3> + +<p>To recap, the <strong>art direction problem</strong> involves wanting to change the image displayed to suit different image display sizes. For example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. It would probably be better to show a smaller, portrait image on mobile, which zooms in on the person. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.</p> + +<p>Returning to our original <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> example, we have an image that badly needs art direction:</p> + +<pre class="brush: html"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> + +<p>Let's fix this, with {{htmlelement("picture")}}! Like <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> and <code><audio></code></a>, the <code><picture></code> element is a wrapper containing several {{htmlelement("source")}} elements that provide different sources for the browser to choose from, followed by the all-important {{htmlelement("img")}} element. The code in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> looks like so:</p> + +<pre class="brush: html"><picture> + <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> + <source media="(min-width: 800px)" srcset="elva-800w.jpg"> + <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> +</picture> +</pre> + +<ul> + <li>The <code><source></code> elements include a <code>media</code> attribute that contains a media condition — as with the first <code>srcset</code> example, these conditions are tests that decide which image is shown — the first one that returns true will be displayed. In this case, if the viewport width is 799px wide or less, the first <code><source></code> element's image will be displayed. If the viewport width is 800px or more, it'll be the second one.</li> + <li>The <code>srcset</code> attributes contain the path to the image to display. Just as we saw with <code><img></code> above, <code><source></code> can take a <code>srcset</code> attribute with multiple images referenced, as well as a <code>sizes</code> attribute. So, you could offer multiple images via a <code><picture></code> element, but then also offer multiple resolutions of each one. Realistically, you probably won't want to do this kind of thing very often.</li> + <li>In all cases, you must provide an <code><img></code> element, with <code>src</code> and <code>alt</code>, right before <code></picture></code>, otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true (you could actually remove the second <code><source></code> element in this example), and a fallback for browsers that don't support the <code><picture></code> element.</li> +</ul> + +<p>This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:</p> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> + +<div class="note"> +<p><strong>Note</strong>: You should use the <code>media</code> attribute only in art direction scenarios; when you do use <code>media</code>, don't also offer media conditions within the <code>sizes</code> attribute.</p> +</div> + +<h3 id="Why_cant_we_just_do_this_using_CSS_or_JavaScript">Why can't we just do this using CSS or JavaScript?</h3> + +<p>When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which has shaved an average of 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like <code>srcset</code>. For example, you couldn't load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript, and then dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.</p> + +<ul> +</ul> + +<h3 id="Use_modern_image_formats_boldly">Use modern image formats boldly</h3> + +<p>There are several exciting new image formats (such as <a href="/en-US/docs/Glossary/webp">WebP</a> and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.</p> + +<p><code><picture></code> lets us continue catering to older browsers. You can supply MIME types inside <code>type</code> attributes so the browser can immediately reject unsupported file types:</p> + +<pre class="brush: html"><picture> + <source type="image/svg+xml" srcset="pyramid.svg"> + <source type="image/webp" srcset="pyramid.webp"> + <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> +</picture> +</pre> + +<ul> + <li>Do <em>not </em>use the <code>media</code> attribute, unless you also need art direction.</li> + <li>In a <code><source></code> element, you can only refer to images of the type declared in <code>type</code>.</li> + <li>Use comma-separated lists with <code>srcset</code> and <code>sizes</code>, as needed.</li> +</ul> + +<h2 id="Active_learning_Implementing_your_own_responsive_images">Active learning: Implementing your own responsive images</h2> + +<p>For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <code><picture></code>, and a resolution switching example that uses <code>srcset</code>.</p> + +<ol> + <li>Write some simple HTML to contain your code (use <code>not-responsive.html</code> as a starting point, if you like).</li> + <li>Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this).</li> + <li>Use the <code><picture></code> element to implement an art direction picture switcher!</li> + <li>Create multiple image files of different sizes, each showing the same picture.</li> + <li>Use <code>srcset</code>/<code>size</code> to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.</li> +</ol> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>You've reached the end of this article, but can you remember the most important information? You can find a detailed assessment that tests these skills at the end of the module; see <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a>.</p> + +<h2 id="Summary">Summary</h2> + +<p>That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:</p> + +<ul> + <li><strong>Art direction</strong>: The problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in for a mobile layout. You can solve this problem using the {{htmlelement("picture")}} element.</li> + <li><strong>Resolution switching</strong>: The problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low density screens. You can solve this problem by using <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a> (SVG images) and the {{htmlattrxref("srcset", "img")}} with {{htmlattrxref("sizes", "img")}} attributes.</li> +</ul> + +<p>This also draws to a close the entire <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun!</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby's excellent introduction to responsive images</a></li> + <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Responsive Images: If you’re just changing resolutions, use srcset</a> — includes more explanation of how the browser works out which image to use</li> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("picture")}}</li> + <li>{{htmlelement("source")}}</li> +</ul> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div> +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> +</div> diff --git a/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html b/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..5563c68fd3 --- /dev/null +++ b/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html @@ -0,0 +1,293 @@ +--- +title: Document and website structure +slug: Learn/HTML/Pengenalan_HTML/Document_and_website_structure +tags: + - HTML + - Halaman + - Panduan + - Pemula + - Script Coding + - Situs + - Tata letak + - blocks + - semantic +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Selain mendefinisikan setiap bagian halaman Anda (seperti "paragraf" atau "gambar"), {{glossary("HTML")}} juga menawarkan sejumlah elemen tingkat blok yang digunakan untuk menentukan area situs web Anda (seperti "header", "menu navigasi", "kolom konten utama"). Artikel ini membahas cara merencanakan struktur situs web dasar, dan menulis HTML untuk mewakili struktur ini.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>. How hyperlinks work, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Learn how to structure your document using semantic tags, and how to work out the structure of a simple website.</td> + </tr> + </tbody> +</table> + +<h2 id="Bagian_dasar_dari_suatu_dokumen">Bagian dasar dari suatu dokumen</h2> + +<p>Halaman web dapat dan akan terlihat sangat berbeda satu sama lain, tetapi mereka semua cenderung berbagi komponen standar yang sama, kecuali halaman menampilkan video layar penuh atau permainan, adalah bagian dari semacam proyek seni, atau hanya terstruktur dengan buruk:</p> + +<dl> + <dt>header (tajuk):</dt> + <dd>Biasanya strip besar di bagian atas dengan tajuk besar, logo, dan mungkin tagline. Ini biasanya tetap sama dari satu halaman web ke yang lain.</dd> + <dt>navigation bar (bilah navigasi):</dt> + <dd>Tautan ke bagian utama situs; biasanya diwakili oleh tombol menu, tautan, atau tab. Seperti tajuk, konten ini biasanya tetap konsisten dari satu halaman web ke halaman web lainnya - memiliki navigasi yang tidak konsisten pada situs web Anda hanya akan menyebabkan pengguna yang bingung dan frustrasi. Banyak perancang web menganggap bilah navigasi sebagai bagian dari tajuk daripada komponen individual, tetapi itu bukan keharusan; pada kenyataannya, beberapa juga berpendapat bahwa memiliki dua terpisah lebih baik untuk aksesibilitas, karena pembaca layar dapat membaca dua fitur lebih baik jika mereka terpisah.</dd> + <dt>main content (konten utama):</dt> + <dd>Area besar di tengah yang berisi sebagian besar konten unik dari halaman web yang diberikan, misalnya, video yang ingin Anda tonton, atau cerita utama yang Anda baca, atau peta yang ingin Anda lihat, atau berita utama, dll. Ini adalah satu bagian dari situs web yang pasti akan bervariasi dari halaman ke halaman!</dd> + <dt>sidebar (bilah samping):</dt> + <dd>Beberapa info tambahan, tautan, kutipan, iklan, dll. Biasanya, ini kontekstual dengan apa yang terkandung dalam konten utama (misalnya pada halaman artikel berita, bilah sisi mungkin berisi bio penulis, atau tautan ke artikel terkait) tetapi ada juga merupakan kasus di mana Anda akan menemukan beberapa elemen berulang seperti sistem navigasi sekunder.</dd> + <dt>footer:</dt> + <dd>Strip di bagian bawah halaman yang umumnya berisi cetakan, pemberitahuan hak cipta, atau info kontak. Ini adalah tempat untuk menaruh informasi umum (seperti header) tetapi biasanya, informasi itu tidak penting atau sekunder untuk situs web itu sendiri. Footer juga terkadang digunakan untuk {{Glossary("SEO")}} tujuan, dengan menyediakan tautan untuk akses cepat ke konten populer.</dd> +</dl> + +<p>A "typical website" could be structured something like this:</p> + +<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="HTML_for_structuring_content">HTML for structuring content</h2> + +<p>The simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and <strong>use the right element for the right job</strong>.</p> + +<p>This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?</p> + +<div class="note"> +<p><strong>Note</strong>: Colorblind people represent around <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">4% of the world population</a> or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 million such people in the world</a>, while the total population was <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">around 7 billion</a>).</p> +</div> + +<p>In your HTML code, you can mark up sections of content based on their <em>functionality</em> — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">consequences of not using the right element structure and semantics for the right job</a>.</p> + +<p>Untuk menerapkan mark up semantik tersebut, HTML menyediakan tag khusus yang dapat Anda gunakan untuk mewakili bagian tersebut, misalnya:</p> + +<ul> + <li><strong>header: </strong>{{htmlelement("header")}}.</li> + <li><strong>navigation bar: </strong>{{htmlelement("nav")}}.</li> + <li><strong>main content: </strong>{{htmlelement("main")}}, with various content subsections represented by {{HTMLElement("article")}}, {{htmlelement("section")}}, and {{htmlelement("div")}} elements.</li> + <li><strong>sidebar: </strong>{{htmlelement("aside")}}; often placed inside {{htmlelement("main")}}.</li> + <li><strong>footer: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Active_learning_exploring_the_code_for_our_example">Active learning: exploring the code for our example</h3> + +<p>Our example seen above is represented by the following code (you can also <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">find the example in our GitHub repository</a>). Kami ingin Anda melihat contoh di atas, dan kemudian melihat daftar di bawah untuk melihat bagian apa yang membentuk bagian visual apa.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + + <title>My page title</title> + <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> + <link rel="stylesheet" href="style.css"> + + <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer--> + <!--[if lt IE 9]> + <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> + <![endif]--> + </head> + + <body> + <!-- Here is our main header that is used across all the pages of our website --> + + <header> + <h1>Header</h1> + </header> + + <nav> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">Our team</a></li> + <li><a href="#">Projects</a></li> + <li><a href="#">Contact</a></li> + </ul> + + <!-- A Search form is another commmon non-linear way to navigate through a website. --> + + <form> + <input type="search" name="q" placeholder="Search query"> + <input type="submit" value="Go!"> + </form> + </nav> + + <!-- Here is our page's main content --> + <main> + + <!-- It contains an article --> + <article> + <h2>Article heading</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> + + <h3>Subsection</h3> + + <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> + + <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> + + <h3>Another subsection</h3> + + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> + + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- the aside content can also be nested within the main content --> + <aside> + <h2>Related</h2> + + <ul> + <li><a href="#">Oh I do like to be beside the seaside</a></li> + <li><a href="#">Oh I do like to be beside the sea</a></li> + <li><a href="#">Although in the North of England</a></li> + <li><a href="#">It never stops raining</a></li> + <li><a href="#">Oh well...</a></li> + </ul> + </aside> + + </main> + + <!-- And here is our main footer that is used across all the pages of our website --> + + <footer> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </footer> + + </body> +</html></pre> + +<p>Luangkan waktu untuk melihat kode dan memahaminya - komentar di dalam kode juga akan membantu Anda untuk memahaminya. Kami tidak meminta Anda untuk melakukan banyak hal lain dalam artikel ini, karena kunci untuk memahami tata letak dokumen adalah menulis struktur HTML yang baik, dan kemudian meletakkannya dengan CSS. Kami akan menunggu ini sampai Anda mulai mempelajari tata letak CSS sebagai bagian dari topik CSS.</p> + +<h2 id="HTML_layout_elements_in_more_detail">HTML layout elements in more detail</h2> + +<p>It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a>. For now, these are the main definitions that you should try to understand:</p> + +<ul> + <li>{{HTMLElement('main')}} is for content <em>unique to this page. </em>Use <code><main></code> only <em>once </em>per page, and put it directly inside {{HTMLElement('body')}}. Ideally this shouldn't be nested within other elements.</li> + <li>{{HTMLElement('article')}} encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).</li> + <li>{{HTMLElement('section')}} is similar to <code><article></code>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). It's considered best practice to begin each section with a <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">heading</a>; also note that you can break <code><article></code>s up into different <code><section></code>s, or <code><section></code>s up into different <code><article></code>s, depending on the context.</li> + <li>{{HTMLElement('aside')}} contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).</li> + <li>{{HTMLElement('header')}} represents a group of introductory content. If it is a child of {{HTMLElement('body')}} it defines the global header of a webpage, but if it's a child of an {{HTMLElement('article')}} or {{HTMLElement('section')}} it defines a specific header for that section (try not to confuse this with <a href="/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">titles and headings</a>).</li> + <li>{{HTMLElement('nav')}} contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.</li> + <li>{{HTMLElement('footer')}} represents a group of end content for a page.</li> +</ul> + +<h3 id="Non-semantic_wrappers">Non-semantic wrappers</h3> + +<p>Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some {{glossary("CSS")}} or {{glossary("JavaScript")}}. For cases like these, HTML provides the {{HTMLElement("div")}} and {{HTMLElement("span")}} elements. You should use these preferably with a suitable {{htmlattrxref('class')}} attribute, to provide some kind of label for them so they can be easily targeted.</p> + +<p>{{HTMLElement("span")}} is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:</p> + +<pre class="brush: html"><p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid +him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the +play, the lights should be down low]</span>.</p></pre> + +<p>Dalam hal ini, catatan editor seharusnya hanya memberikan arahan ekstra untuk sutradara drama; tidak seharusnya memiliki makna semantik tambahan. Untuk pengguna yang terlihat, CSS mungkin akan digunakan untuk menjauhkan catatan sedikit dari teks utama.</p> + +<p>{{HTMLElement("div")}} is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:</p> + +<pre class="brush: html"><div class="shopping-cart"> + <h2>Shopping cart</h2> + <ul> + <li> + <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p> + <img src="../products/3333-0985/thumb.png" alt="Silver earrings"> + </li> + <li> + ... + </li> + </ul> + <p>Total cost: $237.89</p> +</div></pre> + +<p>This isn't really an <code><aside></code>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a <code><section></code>, as it isn't part of the main content of the page. So a <code><div></code> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.</p> + +<div class="warning"> +<p><strong>Warning</strong>: Div sangat nyaman digunakan sehingga mudah digunakan terlalu banyak. Karena mereka tidak memiliki nilai semantik, mereka hanya mengacaukan kode HTML Anda. Berhati-hatilah untuk menggunakannya hanya ketika tidak ada solusi semantik yang lebih baik dan cobalah untuk mengurangi penggunaannya seminimal mungkin jika tidak, Anda akan kesulitan memperbarui dan memelihara dokumen Anda.</p> +</div> + +<h3 id="Line_breaks_and_horizontal_rules">Line breaks and horizontal rules</h3> + +<p>Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:</p> + +<p><code><br></code> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:</p> + +<div id="line-break-live-sample"> +<pre class="brush: html"><p>There once was a man named O'Dell<br> +Who loved to write HTML<br> +But his structure was bad, his semantics were sad<br> +and his markup didn't read very well.</p></pre> +</div> + +<p>Without the <code><br></code> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML ignores most whitespace</a>); with <code><br></code> elements in the code, the markup renders like this:</p> + +<p>{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<p><code><hr></code> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:</p> + +<div id="horizantal-rule-live-sample"> +<pre class="brush: html"><p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p> +<hr> +<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.</p></pre> +</div> + +<p>Would render like this:</p> + +<p>{{EmbedLiveSample('horizantal-rule-live-sample', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<h2 id="Planning_a_simple_website">Planning a simple website</h2> + +<p>Setelah Anda merencanakan struktur laman web sederhana, langkah logis berikutnya adalah mencoba mencari tahu konten apa yang ingin Anda tempatkan di seluruh situs web, halaman apa yang Anda butuhkan, dan bagaimana mereka harus diatur dan terhubung satu sama lain untuk pengalaman pengguna terbaik. This is called {{glossary("Information architecture")}}. Dalam situs web besar dan kompleks, banyak perencanaan yang dapat dilakukan dalam proses ini, tetapi untuk situs web sederhana dari beberapa halaman, ini bisa sangat sederhana, dan menyenangkan!</p> + +<ol> + <li>Ingatlah bahwa Anda akan memiliki beberapa elemen yang umum untuk sebagian besar (jika tidak semua) halaman - seperti menu navigasi, dan konten footer. Jika situs Anda untuk bisnis, misalnya, sebaiknya informasi kontak Anda tersedia di catatan kaki di setiap halaman. Catat kesamaan yang ingin Anda miliki untuk setiap halaman.<img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>Selanjutnya, buatlah sketsa kasar tentang bagaimana Anda ingin struktur setiap halaman terlihat (mungkin terlihat seperti situs web sederhana kami di atas). Catat apa yang akan menjadi setiap blok.<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>Sekarang, tukar pikiran semua konten lain (tidak umum untuk setiap halaman) yang ingin Anda miliki di situs web Anda - tulis daftar besar.<img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>Selanjutnya, cobalah untuk mengurutkan semua item konten ini menjadi grup, untuk memberi Anda gambaran tentang bagian apa yang bisa hidup bersama di halaman yang berbeda. Ini sangat mirip dengan teknik yang disebut {{glossary("Card sorting")}}.<img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>Sekarang cobalah untuk membuat sketsa peta situs kasar - miliki gelembung untuk setiap halaman di situs Anda, dan gambarlah garis untuk menunjukkan alur kerja khas antar halaman. Beranda mungkin ada di tengah, dan tautan ke sebagian besar jika tidak semua yang lain; sebagian besar halaman di situs kecil harus tersedia dari navigasi utama, meskipun ada pengecualian. Anda mungkin juga ingin memasukkan catatan tentang bagaimana hal-hal disajikan.<img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Active_learning_create_your_own_sitemap">Active learning: create your own sitemap</h3> + +<p>Coba lakukan latihan di atas untuk situs web ciptaan Anda sendiri. Anda ingin membuat situs tentang apa?</p> + +<div class="note"> +<p><strong>Note</strong>: Simpan pekerjaan Anda di suatu tempat; Anda mungkin membutuhkannya nanti.</p> +</div> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>Anda telah mencapai akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? Anda dapat menemukan penilaian terperinci yang menguji keterampilan ini di akhir modul; see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a>. Kami menyarankan untuk membaca artikel berikutnya dalam seri ini terlebih dahulu dan tidak hanya melewatkannya saja!</p> + +<h2 id="Ringkasan">Ringkasan</h2> + +<p>Pada titik ini, Anda harus memiliki ide yang lebih baik tentang bagaimana membuat struktur halaman web / situs. Pada artikel terakhir modul ini, kita akan mempelajari cara men-debug HTML.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html b/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..bbee58cc80 --- /dev/null +++ b/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html @@ -0,0 +1,1047 @@ +--- +title: Teks mendasar HTML +slug: Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Salah satu tugas utama HTML adalah memberikan struktur dan makna teks (dikenal juga sebagai {{glossary("semantics")}}) dengan begitu peramban dapat menampilkannya dengan benar. Artikel ini menjelaskan cara {{glossary("HTML")}} digunakan untuk membuat struktur halaman teks dengan menambahkan judul dan paragraf, menekankan kata-kata, membuat daftar, dan lainnya.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prasyarat:</th> + <td>Familiar dengan dasar-dasar HTML, dicakup dalam <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.</td> + </tr> + <tr> + <th scope="row">Hal yang dipelajari:</th> + <td>Mempelajari cara menandai halaman dasar teks untuk memberikan struktur dan tujuan — termasuk paragraf, judul, daftar, penekanan, dan kutipan.</td> + </tr> + </tbody> +</table> + +<h2 id="Dasar-dasarnya_Judul_dan_paragaf">Dasar-dasarnya: Judul dan paragaf</h2> + +<p>Sebaguan besar struktur teks terdiri dari judul dan paragraf, st structured text consists of headings and paragraphs, ntah Anda membaca sebuah kisah, koran, buku pelajaran, majalah, dsb.</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> + +<p>Konten yang terstruktur membuat pengalaman membaca lebih mudah dan lebih menyenangkan.</p> + +<p>Dalam HTML, setiap paragraf dirangkap element {{htmlelement("p")}}, seperti berikut.</p> + +<pre class="brush: html"><p>I am a paragraph, oh yes I am.</p></pre> + +<p>Setiap judul juga dirangkap dalam sebuah element "heading":</p> + +<pre class="brush: html"><h1>I am the title of the story.</h1></pre> + +<p>Terdaoat beberapa element heading (judul) — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, dan {{htmlelement("h6")}}. Setiap element mewakili level konten yang berbeda dalam dokumennnya; <code><h1></code> mewakili judul utama, <code><h2></code> mewakili sub judul, <code><h3></code> mewakili sub-sub judul, dan seterusnya.</p> + +<h3 id="Menerapkan_susunan_struktural">Menerapkan susunan struktural</h3> + +<p>Untuk contohnya, dalam sebuah kisah, <code><h1></code> mewakili judul kisahnya, <code><h2></code> mewakili judul setiap babnya dan <code><h3></code> mewakili sub-bagian setiap babnya, dan seterusnya.</p> + +<pre class="brush: html"><h1>The Crushing Bore</h1> + +<p>By Chris Mills</p> + +<h2>Chapter 1: The dark night</h2> + +<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p> + +<h2>Chapter 2: The eternal silence</h2> + +<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p> + +<h3>The specter speaks</h3> + +<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p></pre> + +<p>Sebenarnya terserah Anda element yang digunakan, selama susunannya masuk akal. Anda perlu mengingat beberapa prakter terbaik saat Anda membuat struktur seperti:</p> + +<ul> + <li>Lebih baik Anda hanya menggunakan <code><h1></code> sekali per halaman — ini adalah judul teratas, dan semua yang lain berada di bawah tingkat ini.</li> + <li>Pastikan Anda menggunakan headung dalam tingkatan urut yang benar. Jangan menggunakan <code><h3></code> untuk mewakili sub-judul subheadings, diikuti <code><h2></code> untuk mewakili sub-sub judul — ini tidak masuk akal dan akan membuat hasil yang aneh.</li> + <li>Dari enam level heading yang tersedia, Anda harus menargetkan tidak nenggunakn lebih dari tiga oer halaman, kecuali jika Anda merasa itu diperlukan. Documents with many levels (i.e., a deep heading hierarchy) become unwieldy and difficult to navigate. On such occasions, it is advisable to spread the content over multiple pages if possible.</li> +</ul> + +<h3 id="Why_do_we_need_structure">Why do we need structure?</h3> + +<p>To answer this question, let's take a look at <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — the starting point of our running example for this article (a nice hummus recipe). You should save a copy of this file on your local machine, as you'll need it for the exercises later on. This document's body currently contains multiple pieces of content — they aren't marked up in any way, but they are separated with linebreaks (Enter/Return pressed to go onto the next line).</p> + +<p>However, when you open the document in your browser, you'll see that the text appears as a big chunk!</p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> + +<p>This is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. Furthermore:</p> + +<ul> + <li>Users looking at a web page tend to scan quickly to find relevant content, often just reading the headings to begin with (we usually <a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">spend a very short time on a web page</a>). If they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else.</li> + <li>Search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. Without headings, your page will perform poorly in terms of {{glossary("SEO")}} (Search Engine Optimization).</li> + <li>Severely visually impaired people often don't read web pages; they listen to them instead. This is done with software called a <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">screen reader</a>. This software provides ways to get fast access to given text content. Among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. If headings are not available, they will be forced to listen to the whole document read out loud.</li> + <li>To style content with {{glossary("CSS")}}, or make it do interesting things with {{glossary("JavaScript")}}, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it.</li> +</ul> + +<p>We therefore need to give our content structural markup.</p> + +<h3 id="Active_learning_Giving_our_content_structure">Active learning: Giving our content structure</h3> + +<p>Let's jump straight in with a live example. In the example below, add elements to the raw text in the <em>Input</em> field so that it appears as a heading and two paragraphs in the <em>Output</em> field.</p> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + + + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">My short story I am a policewoman and my name is Trish. + +My legs are made of cardboard and I am married to a fish.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + + + + + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Why_do_we_need_semantics">Why do we need semantics?</h3> + +<p>Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (Do any countries use red to mean "go"? I hope not.)</p> + +<p>In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."</p> + +<pre class="brush: html"><h1>This is a top level heading</h1></pre> + +<p>By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above).</p> + +<p>On the other hand, you could make any element <em>look</em> like a top level heading. Consider the following:</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span></pre> + +<p>This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (you'll find out more about these later on in the course). We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.</p> + +<h2 id="Lists">Lists</h2> + +<p>Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.</p> + +<h3 id="Unordered">Unordered</h3> + +<p>Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.</p> + +<pre>milk +eggs +bread +hummus</pre> + +<p>Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:</p> + +<pre class="brush: html"><ul> +milk +eggs +bread +hummus +</ul></pre> + +<p>The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:</p> + +<pre class="brush: html"><ul> + <li>milk</li> + <li>eggs</li> + <li>bread</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Active_learning_Marking_up_an_unordered_list">Active learning: Marking up an unordered list</h4> + +<p>Try editing the live sample below to create your very own HTML unordered list.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + + + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">milk +eggs +bread +hummus</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + + + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + + + + + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Ordered">Ordered</h3> + +<p>Ordered lists are lists in which the order of the items <em>does</em> matter — let's take a set of directions as an example:</p> + +<pre>Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</pre> + +<p>The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <code><ul></code>:</p> + +<pre class="brush: html"><ol> + <li>Drive to the end of the road</li> + <li>Turn right</li> + <li>Go straight across the first two roundabouts</li> + <li>Turn left at the third roundabout</li> + <li>The school is on your right, 300 meters up the road</li> +</ol></pre> + +<h4 id="Active_learning_Marking_up_an_ordered_list">Active learning: Marking up an ordered list</h4> + +<p>Try editing the live sample below to create your very own HTML ordered list.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + + + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + + + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + + + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Active_learning_Marking_up_our_recipe_page">Active learning: Marking up our recipe page</h3> + +<p>So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + + + + + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Quick hummus recipe + + This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. + + Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. + + Ingredients + + 1 can (400g) of chick peas (garbanzo beans) + 175g of tahini + 6 sundried tomatoes + Half a red pepper + A pinch of cayenne pepper + 1 clove of garlic + A dash of olive oil + + Instructions + + Remove the skin from the garlic, and chop coarsely + Remove all the seeds and stalk from the pepper, and chop coarsely + Add all the ingredients into a food processor + Process all the ingredients into a paste + If you want a coarse "chunky" hummus, process it for a short time + If you want a smooth hummus, process it for a longer time + + For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. + + Storage + + Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. + + Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + + + + + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + + + + + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Quick hummus recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>If you get stuck, you can always press the <em>Show solution</em> button, or check out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> example on our github repo.</p> + +<h3 id="Nesting_lists">Nesting lists</h3> + +<p>It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:</p> + +<pre class="brush: html"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste.</li> + <li>If you want a coarse "chunky" hummus, process it for a short time.</li> + <li>If you want a smooth hummus, process it for a longer time.</li> +</ol></pre> + +<p>Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:</p> + +<pre class="brush: html"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste. + <ul> + <li>If you want a coarse "chunky" hummus, process it for a short time.</li> + <li>If you want a smooth hummus, process it for a longer time.</li> + </ul> + </li> +</ol></pre> + +<p>Try going back to the previous active learning example and updating the second list like this.</p> + +<h2 id="Emphasis_and_importance">Emphasis and importance</h2> + +<p>In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.</p> + +<h3 id="Emphasis">Emphasis</h3> + +<p>When we want to add emphasis in spoken language, we <em>stress</em> certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.</p> + +<p>I am glad you weren't late.</p> + +<p>I am <em>glad</em> you weren't <em>late</em>.</p> + +<p>The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.</p> + +<p>In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below).</p> + +<pre class="brush: html"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> + +<h3 id="Strong_importance">Strong importance</h3> + +<p>To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:</p> + +<p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p> + +<p>In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below).</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> + +<p>You can nest strong and emphasis inside one another if desired:</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong> — +if you drink it, <strong>you may <em>die</em></strong>.</p></pre> + +<h3 id="Active_learning_Lets_be_important!">Active learning: Let's be important!</h3> + +<p>In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + + + + + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Important notice</h1> +<p>On Sunday January 9th 2010, a gang of goths were + spotted stealing several garden gnomes from a + shopping center in downtown Milwaukee. They were + all wearing green jumpsuits and silly hats, and + seemed to be having a whale of a time. If anyone + has any information about this incident, please + contact the police now.</p></textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + + + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + + + + + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3> + +<p>The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as <strong>presentational elements</strong> and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.</p> + +<p>HTML5 redefined <code><b></code>, <code><i></code> and <code><u></code> with new, somewhat confusing, semantic roles.</p> + +<p>Here's the best rule of thumb: it's likely appropriate to use <code><b></code>, <code><i></code>, or <code><u></code> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.</p> + +<ul> + <li>{{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...</li> + <li>{{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...</li> + <li>{{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...</li> +</ul> + +<div class="note"> +<p>A kind warning about underline: <strong>People strongly associate underlining with hyperlinks.</strong> Therefore, on the Web, it's best to underline only links. Use the <code><u></code> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.</p> +</div> + +<pre class="brush: html"><!-- scientific names --> +<p> + The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) + is the most common hummingbird in Eastern North America. +</p> + +<!-- foreign words --> +<p> + The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>. +</p> + +<!-- a known misspelling --> +<p> + Someday I'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better. +</p> + +<!-- Highlight keywords in a set of instructions --> +<ol> + <li> + <b>Slice</b> two pieces of bread off the loaf. + </li> + <li> + <b>Insert</b> a tomato slice and a leaf of + lettuce between the slices of bread. + </li> +</ol></pre> + +<h2 id="Summary">Summary</h2> + +<p>That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">create hyperlinks</a>, possibly the most important element on the Web.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> + + + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/id/learn/html/pengenalan_html/index.html b/files/id/learn/html/pengenalan_html/index.html new file mode 100644 index 0000000000..367ef45712 --- /dev/null +++ b/files/id/learn/html/pengenalan_html/index.html @@ -0,0 +1,64 @@ +--- +title: Pengenalan HTML +slug: Learn/HTML/Pengenalan_HTML +tags: + - CodingScripting + - HTML + - Link + - Pengenalan HTML + - Struktur + - Teks + - head + - semantic +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Pada intinya, {{glossary("HTML")}} adalah bahasa yang cukup sederhana yang tersusun dari <a href="/en-US/docs/Glossary/Element">elemen</a>, yang bisa diaplikasikan pada teks untuk menambah perbedaan maksud dalam dokumen (Apakah paragraf? Apakah daftar dengan butir? Apakah bagian dari sebuah tabel?), membentuk struktur dokumen menjadi satu bagian logikal (Apakah memiliki <em>header</em>? Apakah berbentuk tiga kolom? Apakah sebuah menu navigasi?), dan menempatkan konten seperti gambar dan video pada satu halaman. Modul ini akan memperkenalkan dua hal dulu, dan memperkenalkan konsep fundamental dan sintaks yang harus kamu ketahui untuk memahami HTML.</p> + +<h2 id="Prasyarat">Prasyarat</h2> + +<p>Sebelum memulai modul ini, kamu tidak harus memiliki pengetahuan mengenai HTML, tapi kamu setidaknya harus sudah terbiasa menggunakan komputer dan menggunakan web secara pasif (misalnya, hanya membuka-buka dan menikmati kontennya). Kamu harus memiliki perlengkapan dasar (seperti dijelaskan dalam <a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Menginstal perangkat lunak dasar</a>), dan memahami cara membuat dan mengelola <em>file </em>(seperti dijelaskan dalam <a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Berurusan dengan file</a>). Keduanya adalah bagian dari modul untuk pemula yang berjudul <a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web">Mengenal apa itu web</a>.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Jika kamu menggunakan komputer/tablet/alat lain yang tidak bisa membuat <em>file</em> sendiri, kamu bisa mencoba (banyak) contoh kode di aplikasi pemrograman daring seperti <a href="http://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<p>Modul ini berisi artikel-artikel berikut, yang akan mengajarkan kamu mengenai semua teori dasar HTML dan memberimu kesempatan untuk menguji beberapa keterampilan.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Mulai bekerja dengan HTML</a></dt> + <dd>Mengkover dasar-dasar HTML, untuk memulai — kita mendefinisikan elemen, atribut, dan istilah penting lainnya, dan menunjukkan di mana posisi mereka dalam HTML. Kita juga tunjukkan bagaimana tipikal halaman HTML terstruktur dan bagaimana elemen HTML tersetruktur, dan menjelaskan fitur dasar penting lainnya. Selain itu, kita akan bermain dengan beberapa HTML supaya kamu tertarik!</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Apa yang ada di head? Metadata dalam HTML</a></dt> + <dd><a href="/en-US/docs/Glossary/Head">Head</a> dokumen HTML merupakan bagian yang tidak tampil dalam peramban web ketika halaman dimuat. Dia mengandung informasi seperti halaman {{htmlelement("title")}}, link ke {{glossary("CSS")}} (jika kamu ingin memberi gaya konten HTML mu dengan CSS), link ke kustom favicons, dan metadata (data tentang HTML, misalnya siapa yang menulis, dan kata kunci penting yang menjelaskan dokumen tersebut).</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamental teks HTML</a></dt> + <dd>Salah satu dari tugas utama HTML ialah memberi teks arti (juga disebut <a href="/en-US/docs/Glossary/Semantics">semantic</a>), sehingga peramban tahu cara yang benar untuk menampilkannya. Artikel ini melihat bagaimana menggunakan HTML untuk memecah blok teks menjadi satu struktur headings dan paragraf, tambah penekanan/kepentingan ke dalam kata-kata, membuat list, dan banyak lagi.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Membuat hyperlinks</a></dt> + <dd>Hyperlinks sangat penting — merekalah yang membuat web menjadi web. Artikel ini menunjukkan syntaks yang dibutuhkan untuk membuat link, dan mendiskusikan praktek terbaik untuk link.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Pemformatan teks maju</a></dt> + <dd>Banyak elemen lain dalam HTML untuk pemformatan teks yang tidak kita dapatkan dalam artikel <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">fundamental teks HTML</a>. Elemen ini kurang dikenal, tapi masih berfaedah untuk diketahui. Dalam artikel ini kamu akan belajar tentang menandai quotasi, deskripsi list, kode komputer dan text terkait lain, subscript dan superscript, informasi kontak, dan banyak lagi.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struktur dokumen dan website</a></dt> + <dd>Selain mendefinisi bagian individu halaman kamu (seperti sebuah "paragraf" atau "gambar"), HTML juga digunakan untuk mendefinisi area website kamu (seperti header," "menu navigasi," atau "kolom konten utama.") Artikel ini melihat ke dalam bagaimana merencanakan struktur web dasar dan bagaimana menulis HTML untuk mewakili struktur ini.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Mendebug HTML</a></dt> + <dd>Menulis HTML itu bagus, tapi kalau sesuatu buruk terjadi, dan kamu tidak bisa mengatasinya? Artikel ini akan memperkenalkan kamu pada beberapa tools yang berfaedah untuk itu.</dd> +</dl> + +<h2 id="Latihan">Latihan</h2> + +<p>Latihan-latihan berikut akan menguji pemahaman kamu mengenai HTML dasar yang ada pada panduan-panduan di atas.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Menandai huruf</a></dt> + <dd>Kita semua belajar menulis huruf cepat atau lambat; itu juga contoh berfaedah untuk menguji keahlian memformat. Dalam asesmen ini, kamu akan diberi huruf untuk ditandai.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Menandai halaman konten</a></dt> + <dd>Asesmen ini menguji kemampuanmu menggunakan HTML untuk menstrukturisasi halaman konten sederhana, yang berisi header, footer, menu navigasi, konten utama, dan sidebar.</dd> +</dl> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Dasar literasi web 1</a></dt> + <dd>Kursus Mozilla foundation terbaik yang menjelajahi dan menguji banyak kemampuan dalam modul Pengenalan HTML. Pelajar akan akrab dengan bacaan, tulisan, dan berpartisipasi dalam web di modul 6-bagian ini. Cari tahu fondasi web melalui produksi dan kolaborasi.</dd> +</dl> diff --git a/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html b/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..2535589f38 --- /dev/null +++ b/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html @@ -0,0 +1,116 @@ +--- +title: Structuring a page of content +slug: Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To test knowledge of web page structures, and how to represent a prospective layout design in markup.</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point">Starting point</h2> + +<p>To get this assessment started, you should go and grab the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">zip file containing all the starting assets</a>.</p> + +<p><br> + The zip file contains:</p> + +<ul> + <li>The HTML you need to add structural markup to.</li> + <li>CSS to style your markup.</li> + <li>Images that are used on the page.</li> +</ul> + +<p>Create the example on your local computer, or alternatively use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> +</div> + +<h2 id="Project_brief">Project brief</h2> + +<p>Untuk proyek ini, tugas Anda adalah mengambil konten untuk beranda situs web pengamatan burung dan menambahkan elemen struktural ke dalamnya sehingga dapat memiliki tata letak halaman yang diterapkan padanya. Perlu memiliki:</p> + +<ul> + <li>Header yang merentang lebar penuh dari situs yang berisi judul utama untuk halaman, logo situs, dan menu navigasi. Judul dan logo muncul berdampingan setelah penataan diterapkan, dan navigasi muncul di bawah kedua item.</li> + <li>Area konten utama yang mengandung dua kolom - blok utama yang berisi teks sambutan, dan bilah samping berisi thumbnail gambar.</li> + <li>Footer yang berisi informasi hak cipta dan kredit.</li> +</ul> + +<p>You need to add a suitable wrapper for (Anda perlu menambahkan pembungkus yang cocok untuk:):</p> + +<ul> + <li>The header</li> + <li>The navigation menu</li> + <li>The main content</li> + <li>The welcome text</li> + <li>The image sidebar</li> + <li>The footer</li> +</ul> + +<p>You should also:</p> + +<ul> + <li>Apply the provided CSS to the page by adding another {{htmlelement("link")}} element just below the existing one provided at the start.</li> +</ul> + +<h2 id="Hints_and_tips">Hints and tips</h2> + +<ul> + <li>Use the <a href="https://validator.w3.org/nu/">W3C Nu HTML Checker</a> to catch unintended mistakes in your HTML, CSS, and SVG — mistakes you might have otherwise missed — so that you can fix them.</li> + <li>You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.</li> + <li>The provided CSS is designed so that when the correct structural elements are added to the markup, they will appear green in the rendered page.</li> + <li>If you are getting stuck and can't envisage what elements to put where, draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block. This is extremely helpful.</li> +</ul> + +<h2 id="Example">Example</h2> + +<p>The following screenshot shows an example of what the homepage might look like after being marked up.</p> + +<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>.</li> + <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for Structuring a page of content".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> + +<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/id/learn/html/tabel/index.html b/files/id/learn/html/tabel/index.html new file mode 100644 index 0000000000..b8fe3a2d8a --- /dev/null +++ b/files/id/learn/html/tabel/index.html @@ -0,0 +1,36 @@ +--- +title: HTML Tables +slug: Learn/HTML/Tabel +translation_of: Learn/HTML/Tables +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Salah satu tugas umum di HTML adalah menyusun data secara tabular dan untuk tujuan tersebut maka disediakan sejumlah elemen dan atribut. HTML yang ditambah sedikit CSS untuk styling akan memudahkan untuk menampilkan tabel informasi pada website seperti jadwal pelajaran, jadwal kolam renang atau statistik tentang dinosaurus atau tim sepakbola favoritmu. Modul ini akan memberi apa yang anda ingin ketahui tentang menyusun data tabular dengan HTML.</p> + +<p class="summary"></p> + +<h2 id="Prasayarat">Prasayarat</h2> + +<p>Sebelum memulai modul ini, anda harus sudah menguasai dasar HTML — Lihat <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Jika anda berkerja di komputer/tablet/atau perangkat lain yang tidak memiliki kemampuan untuk membuat file sendiri, anda dapat mencoba (sebagian besar) contoh kode pada program coding online seperti <a href="http://jsbin.com/">JSBin</a> atau <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<p>Modul ini berisi artikel berikut :</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></dt> + <dd>Artikel ini membawa anda mengawali pembahasan tabel HTML, mencakup dasar mengenai baris dan sel, heading, membuat sel span untuk kolom dan baris berganda, dan bagaimana untuk mengelompokan semua sel di dalam sebuah kolom untuk tujuan styling.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></dt> + <dd>Modul ini mengulas beberapa fitur lanjutan tabel HTML — seperti caption/rangkuman dan mengelompokan baris dalam bagian judul tabel, bodi atau footer — dan juga melihat aksesibilitas tabel untuk melihat kesalahan pengguna</dd> +</dl> + +<h2 id="Penilaian">Penilaian</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></dt> + <dd>pada penilaian tabel, kami menyediakan anda data planet dalam tata surya kita, dan membantu menyusunnya dalam tabel HTML.</dd> +</dl> diff --git a/files/id/learn/index.html b/files/id/learn/index.html new file mode 100644 index 0000000000..3e9329375a --- /dev/null +++ b/files/id/learn/index.html @@ -0,0 +1,97 @@ +--- +title: Belajar Pengembangan Web +slug: Learn +tags: + - Index + - Landing + - Pemula + - Web +translation_of: Learn +--- +<div> +<h1 id="V-neckline_necklines_are_ideal_for_the_following_body_types">V-neckline necklines are ideal for the following body types:</h1> + +<p>Because it gives a vertical impression to the outfit worn, the V-neckline can give the illusion of a slimmer, more elongated, and taller silhouette. Adapted to all body types, the V-neck can, depending on the depth chosen, create a balanced look.</p> + +<p>A V-neckline is particularly recommended for silhouettes with broad shoulders and for people who have a large bust or a very short neck. While, overall, depending on the shape of the neckline, moreover, you're petite, skinny or voluptuous, the V-neck flatters and suits all body types.</p> + +<p>If you want to buy some stylish and fashionable dresses you can visit <strong><a href="https://lailoo.com/collections/bonanza-satrangi">bonanza satrangi</a></strong> online store and find the latest gorgeous and stylish dresses with good quality.</p> + +<h2 id="What_is_a_square_neckline">What is a square neckline?</h2> + +<p>The square collar is a neckline whose shape, on the front, evokes that of a square or a rectangle. This neckline falls straight and visually cuts the bust. This is a perfect style for women with large breasts as well as those with small breasts. However, it is not recommended for women with a square face as it will make it look too masculine.</p> + +<h2 id="Square_necklines_are_ideal_for_the_following_body_types">Square necklines are ideal for the following body types:</h2> + +<p>Pyramid morphology</p> + +<p>If you are a woman with a small neck and narrow shoulders, this type of neckline will help you lengthen your neck. In addition, if you have a round face or a pyramid-shaped body, a square neckline will help you rebalance the lines of your face as well as those of your figure. Finally, the square neckline is ideal for women with large breasts because it offers a sophisticated structure to the neckline without revealing too much.</p> + +<p><strong><a href="https://lailoo.com/collections/bonanza-satrangi">Latest bonanza satrangi sale</a> </strong>2020 offers new designs and best quality dresses for men and women.</p> + + + +<h2 id="What_is_a_dancers_neckline">What is a dancer's neckline?</h2> + +<p>The dancer neckline is a very indented rounded neckline which owes its name to the leotard worn by the dancers. </p> + +<p>Black dress with dancer collar, fitted and sleeveless</p> + +<h2 id="Dancing_necklines_are_ideal_for_the_following_body_types">Dancing necklines are ideal for the following body types:</h2> + +<p>Hourglass morphology</p> + +<p>Pyramid morphology</p> + +<p>This simple cut neckline is very flattering and fits almost any figure. Very high cut, this wide and deep neckline lengthens the neck and highlights the collarbones. Whether you are petite or tall, this neckline will suit you. The dancer collar works particularly well on people with narrow shoulders. Indeed, this neckline balances the defects as well as the proportions.</p> + +<p><strong><a href="lailoo.com/collections/nishat-linen">Nishatlinen</a></strong> provides the latest summer lawn and cotton dresses with unique designs. If you want to buy these stylish and stunning dresses you can visit <strong><a href="lailoo.com/collections/nishat-linen">nishat linen</a> </strong>online store.</p> + +<p>Accompany your tops with a dancer collar or your dresses with this neckline of a collar that follows its flared shape. Lightweight, layered necklaces or earrings will not compete with your cleavage and may even create a perfect lengthening effect if you are petite.</p> + +<h2 id="What_is_a_halter_or_halter_neckline">What is a halter or halter neckline?</h2> + +<p>The halter neckline or halter neckline consists of two triangular points of fabric, of variable width according to the desired effect. These cutouts run down the chest to the back of the neck. Sometimes the halter neckline is made from a single piece of fabric that is tied or tied with a drawstring or tie at the nape of the neck. </p> + + + +<h2 id="Avoid_this_neckline_if">Avoid this neckline if:</h2> + +<p>You have a downward shoulder line</p> + +<p>Broad or square shoulders</p> + +<p>If you have beefy arms, broad shoulders, or a voluminous chest, avoid wearing a dress or halter top. Indeed, this neckline will tend to make you appear wider than you are.</p> + +<h2 id="How_to_wear_the_halter_neckline_or_the_halter_neck">How to wear the halter neckline or the halter neck?</h2> + +<p>No collar is needed with this particular neckline. Opt for a pair of trendy earrings or, more simply, let this spectacular neckline speak for itself.</p> + +<h2 id="What_is_a_sweetheart_neckline_or_sweetheart_neckline">What is a sweetheart neckline or sweetheart neckline?</h2> + +<p>This neckline has a neckline whose shape, on the front, evokes the graphics of the upper part of a heart. This very feminine neckline is mainly associated with strapless dresses, with off the shoulders. However, a few clothes with long sleeves and thin straps may also feature a heart-shaped neckline. This neckline shape is mostly found on wedding dresses and evening gowns but is increasingly found on casual clothes like tank tops or feminine tops.</p> + +<p>The sweetheart neckline adapts very easily to all body types and to all sizes. It is suitable for small breasts as well as medium or larger breasts. Small women, with small breasts and narrow shoulders will opt for this sweetheart neckline to appear more voluptuous. Finally, the vertical hollow of this neckline visually lengthens the face and balances the proportions of the silhouette of the wearer.</p> + +<h2 id="Which_keyhole_neckline_is_best">Which keyhole neckline is best?</h2> + +<p>The “keyhole” neckline is very close to the halter neckline (or halter) except that the converging diagonal lines meet at the beginning of the neck to form a small slit similar to the shape of a keyhole. This very versatile neckline can have several shapes: it can be in the form of a discreet slot on a top or a dress or adopt a more or less important oval or round shape, closed by a seam, a tie to tie or a fastening system (button, clip, etc.).</p> + +<p>Correctly positioned, this opening can give the impression of wearing a jewel and, depending on the height or it is located, this opening can reveal more or less the neckline.</p> + +<p>Short black dress, with a keyhole neckline.</p> + +<h2 id="Keyhole_necklines_are_ideal_for_the_following_body_types">Keyhole necklines are ideal for the following body types:</h2> + +<p>Keyhole necklines can be tailored to fit most figures and women of all ages. The effect depends on the height at which the opening is located. If you have a petite bust, this neckline can magnify your cleavage and provide an illusion of volume.</p> + +<h2 id="Avoid_this_neckline_if_2">Avoid this neckline if:</h2> + +<p>You have a round body shape and a voluminous chest. Indeed, located on a voluminous chest, this low-cut keyhole neckline could harm your elegance by revealing your chest a little too much.</p> + +<h2 id="In_conclusion">In conclusion:</h2> + +<p>There are many other forms of necklines and necklines and this list cannot be exhaustive, however, we have no doubt that this guide will guide you on the forms adapted to your face and your body type. Now you should be able to find the perfect top or the perfect dress to flatter your figure as well as your facial features. </p> + + +</div> diff --git a/files/id/learn/javascript/building_blocks/index.html b/files/id/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..14142a20ba --- /dev/null +++ b/files/id/learn/javascript/building_blocks/index.html @@ -0,0 +1,42 @@ +--- +title: JavaScript building blocks +slug: Learn/JavaScript/Building_blocks +translation_of: Learn/JavaScript/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Pada modul ini, kita lanjutkan cakupan semua fitur dasar JavaScript, arahkan perhatian kita pada jenis blok kode yang biasa ditemukan seperti pernyataan kondisional, perulangan, fungsi, dan <em>events</em>. Anda pernah melihat dasar ini sudah ada di kursus, tapi hanya sebentar - di sini kami akan membahas semuanya secara jelas.</p> + +<h2 id="Persyaratan">Persyaratan</h2> + +<p>Sebelum memulai modul ini, Anda harus memiliki beberapa pemahaman mengenai dasar-dasar dari <a href="/id/docs/Learn/HTML/Introduction_to_HTML">HTML</a> dan <a href="/id/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, <span id="result_box" lang="id"><span>dan Anda juga harus sudah mengerjakan modul kami sebelumnya</span></span> , <a href="/id/docs/Learn/JavaScript/First_steps">Memulai JavaScript</a>.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Jika Anda bekerja di komputer / tablet / perangkat lain dimana Anda tidak memiliki kemampuan untuk membuat <em>file </em>sendiri, Anda bisa mencoba (sebagian besar) contoh kode dalam program pengkodean online seperti <a href="http://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/conditionals">Membuat keputusan di kode Anda — kondisional</a></dt> + <dd>Dalam bahasa pemrograman apapun, kode perlu untuk membuat keputusan dan melakukan tindakan yang sesuai pada masukan yang berbeda. Misalnya dalam permainan, jika jumlah nyawa pemain adalah 0, maka permainannya berakhir. Dalam aplikasi cuaca, jika yang dilihat adalah pagi hari maka akan tampil grafik matahari terbit dan jika sudah malam hari maka akan menunjukkan bintang dan bulan. Pada artikel ini kita akan membahas bagaimana struktur kondisional bekerja dalam JavaScript.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Looping_code">Kode perulangan</a> <a href="/id/docs/Learn/JavaScript/Building_blocks/Looping_code">(<em>looping</em>)</a></dt> + <dd>Terkadang Anda membutuhkan tugas yang dilakukan lebih dari sekali dan berulang-ulang. Misalnya melihat daftar banyak nama. Dalam pemrograman, <em>loop </em>melakukan pekerjaan ini dengan sangat baik. Di sini kita akan melihat struktur perulangan di JavaScript.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Functions">Fungsi — blok kode yang bisa digunakan kembali</a></dt> + <dd>Konsep penting lainnya dalam berkode adalah <strong>fungsi</strong>. <strong>Fungsi </strong>memungkinkan Anda untuk menyimpan bagian kode yang melakukan satu tugas di dalam blok yang ditetapkan, dan kemudian memanggil kode itu kapan pun Anda memerlukannya kemudian menggunakan satu perintah pendek untuk memanggilnya daripada harus mengetikkan kode yang sama beberapa kali. Pada artikel ini kita akan mengeksplorasi konsep dasar di balik fungsi seperti sintaks dasar, bagaimana cara memanggil dan mendefinisikan fungsi, ruang lingkup, dan parameternya.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Membangun fungsi sendiri</a></dt> + <dd>Dengan sebagian besar teori esensial yang telah dibahas dalam artikel sebelumnya, artikel ini akan memberikan pengalaman praktik. Di sini Anda akan mendapatkan beberapa latihan dengan membangun fungsi Anda sendiri. Ikutilah jalannya, kami juga akan menjelaskan beberapa rincian lebih lanjut mengenai fungsi.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Return_values">Fungsi mengembalikan suatu nilai</a></dt> + <dd>Ada satu konsep penting yang bisa kita diskusikan dalam kursus ini, untuk menutup fungsi kita bisa mengembalikan suatu nilai. Beberapa fungsi tidak mengembalikan nilai yang signifikan setelah selesai, tapi ada juga yang melakukannya. Penting untuk memahami apa nilai mereka, bagaimana memanfaatkannya dalam kode Anda, dan bagaimana membuat fungsi Anda sendiri mengembalikan nilai yang berguna.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Events">Perkenalan events</a></dt> + <dd>Events adalah tindakan atau kejadian yang terjadi di sistem yang Anda gunakan dalam pemrograman, dimana sistem memberi tahu Anda sehingga Anda dapat meresponsnya dengan cara apa pun jika diinginkan. Misalnya jika pengguna mengeklik tombol pada laman web, Anda mungkin ingin menanggapi tindakan tersebut dengan menampilkan kotak informasi. Pada artikel akhir ini kita akan membahas beberapa konsep penting seputar events, dan melihat bagaimana mereka bekerja di browser.</dd> +</dl> + +<h2 id="Penilaian">Penilaian</h2> + +<p>Penilaian berikut akan menguji pemahaman Anda tentang dasar-dasar JavaScript yang tercakup dalam panduan di atas.</p> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galeri Gambar</a></dt> + <dd>Sekarang setelah melihat fundamental dari bangunan blok di JavaScript, kami akan menguji pengetahuan Anda tentang loop, fungsi, kondisional dan events dengan membangun barang yang cukup umum yang akan Anda lihat di banyak situs web yaitu galeri gambar yang dibuat dengan JavaScript.</dd> +</dl> diff --git a/files/id/learn/javascript/client-side_web_apis/index.html b/files/id/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..171c0647b7 --- /dev/null +++ b/files/id/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,50 @@ +--- +title: Client-side web APIs +slug: Learn/JavaScript/Client-side_web_APIs +tags: + - API + - Artikel + - CodingScripting + - DOM + - JavaScript + - Landing + - Latihan + - Media + - Module + - Pemula + - WebAPI + - data +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Ketika menulis JavaScript <em>client-side</em> untuk website atau aplikasi, anda tidak akan berkembang jauh sebelum memulai cara menggunakan API — yaitu sekumpulan <em>interface</em> untuk memanifulasi berbagai aspect pada browser dan operating sistem dimana situs dijalankan, atau cara mengolah data dari website atau <em>service </em>yang lain. Didalam modul kali ini, kita akan menjelajahi apa itu API dan bagaimana cara menggunakan beberapa API yang sangat umum yang mungkin anda akan temukan dalam pekerjaan Development anda.</p> + +<h2 id="Prasyarat">Prasyarat</h2> + +<p>Untuk mendapatkan hasil maksimal dalam modul ini, diharuskan bagi anda menyelesaikan tahapan modul JavaScript pada seri-seri (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>, dan <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>). Keseluruhan modul tersebut cukup banyak melibatkan cara-cara penggunaan API yang sederhana, dikarenakan akan sulit untuk menulis contoh-contoh JavaScript <em>client-side </em>yang sangat berguna tanpa mereka! Disini kita meningkat pada satu level, dengan mengharapkan pengetahunan lebih mendalam tentang <em>core </em>pemrograman JavaScript dan mengeksplorasi banyak contoh Web API yang umum.</p> + +<p>Pengetahuan dasar mengenai <a href="/en-US/docs/Learn/HTML">HTML</a> dan <a href="/en-US/docs/Learn/CSS">CSS</a> juga akan sangat berguna.</p> + +<div class="note"> +<p><strong>Catatan:</strong> Jika anda sedang bekerja dengan <em> </em>perangkat dimana anda tidak mendapatkan kemampuan untuk membuat <em>file -file</em> anda sendiri, anda dapat mencoba (hampir semua) contoh <em>code</em> pada sebuah program pemrograman online semisal <a href="http://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Pengenalan tentang Web API</a></dt> + <dd>Sebagai permulaan, kita akan memulai melihat mengenai API dari sebuah level yang tinggi — tentang apa itu API, bagaimana cara API bekerja, bagaimana cara menggunakannya pada program kita, dan bagaimana mereka dibentuk secara terstruktur? Kita juga akan melihat apa perbedaan utama antara <em>Class-class</em> API dan jenis penggunaan sepert apa yang mereka miliki.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Cara memanipulasi dokumen</a></dt> + <dd>Ketika sedang menulis website dan aplikasi, satu hal yang sangat penting yang anda ingin lakukan adalah menemukan berbagai cara untuk memanipulasi dokumen-dokumen web. Hal ini biasanya dilakukan menggunakan <em>Document Object Model</em> (DOM), sekumpulan API untuk mengontrol HTML dan memperindah tampilan informasi yang menekankan penggunaan objek {{domxref("Document")}}. Pada artikel ini, kita akan melihat bagaimana cara menggunakan DOM secara detail, we'll look at how to use the DOM in detail, bersamaan dengan berbagai API menarik lainnya yang dapat mengubah ruang lingkup anda dengan cara-cara yang menarik.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Cara mengambil data dari server</a></dt> + <dd>Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entirely new page. This seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept, and look at technologies that make it possible, such as {{domxref("XMLHttpRequest")}} and the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></dt> + <dd>The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></dt> + <dd>The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (<a href="/en-US/docs/Web/SVG">SVG</a>) language, to APIs for drawing on HTML {{htmlelement("canvas")}} elements, (see <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> and <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ths article provides an introduction to the Canvas API, and further resources to allow you to learn more.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></dt> + <dd>HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></dt> + <dd>Modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. This article explains the very basics of how these work.</dd> +</dl> diff --git a/files/id/learn/javascript/client-side_web_apis/introduction/index.html b/files/id/learn/javascript/client-side_web_apis/introduction/index.html new file mode 100644 index 0000000000..20cd0d7214 --- /dev/null +++ b/files/id/learn/javascript/client-side_web_apis/introduction/index.html @@ -0,0 +1,278 @@ +--- +title: Introduction to web APIs +slug: Learn/JavaScript/Client-side_web_APIs/Introduction +translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">First up, we'll start by looking at APIs from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? We'll also take a look at what the different main classes of APIs are, and what kind of uses they have.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, a basic understanding of <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>, JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">first steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>).</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To gain familiarity with APIs, what they can do, and how you can use them in your code.</td> + </tr> + </tbody> +</table> + +<h2 id="What_are_APIs">What are APIs?</h2> + +<p>Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place.</p> + +<p>As a real-world example, think about the electricity supply in your house, apartment, or other dwellings. If you want to use an appliance in your house, you simply plug it into a plug socket and it works. You don't try to wire it directly into the power supply — to do so would be really inefficient and, if you are not an electrician, difficult and dangerous to attempt.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14317/plug-socket.png" style="display: block; height: 472px; margin: 0px auto; width: 700px;"></p> + +<p><em>Image source: <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">Overloaded plug socket</a> by <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, on Flickr.</em></p> + +<p>In the same way, if you want to say, program some 3D graphics, it is a lot easier to do it using an API written in a higher level language such as JavaScript or Python, rather than try to directly write low level code (say C or C++) that directly controls the computer's GPU or other graphics functions.</p> + +<div class="note"> +<p><strong>Note</strong>: See also the <a href="/en-US/docs/Glossary/API">API glossary entry</a> for further description.</p> +</div> + +<h3 id="APIs_in_client-side_JavaScript">APIs in client-side JavaScript</h3> + +<p>Client-side JavaScript, in particular, has many APIs available to it — these are not part of the JavaScript language itself, rather they are built on top of the core JavaScript language, providing you with extra superpowers to use in your JavaScript code. They generally fall into two categories:</p> + +<ul> + <li><strong>Browser APIs</strong> are built into your web browser and are able to expose data from the browser and surrounding computer environment and do useful complex things with it. For example, the <a href="/en-US/docs/Web/API/Geolocation/Using_geolocation">Geolocation API</a> provides some simple JavaScript constructs for retrieving location data so you can say, plot your location on a Google Map. In the background, the browser is actually using some complex lower-level code (e.g. C++) to communicate with the device's GPS hardware (or whatever is available to determine position data), retrieve position data, and return it to the browser environment to use in your code. But again, this complexity is abstracted away from you by the API.</li> + <li><strong>Third party APIs</strong> are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example, the <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> allows you to do things like displaying your latest tweets on your website. It provides a special set of constructs you can use to query the Twitter service and return specific information.</li> +</ul> + +<p> </p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + +<p> </p> + +<h3 id="Relationship_between_JavaScript_APIs_and_other_JavaScript_tools">Relationship between JavaScript, APIs, and other JavaScript tools</h3> + +<p>So above, we talked about what client-side JavaScript APIs are, and how they relate to the JavaScript language. Let's recap this to make it clearer, and also mention where other JavaScript tools fit in:</p> + +<ul> + <li>JavaScript — A high-level scripting language built into browsers that allows you to implement functionality on web pages/apps. Note that JavaScript is also available in other programming environments, such as <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a>. But don't worry about that for now.</li> + <li>Browser APIs — constructs built into the browser that sit on top of the JavaScript language and allow you to implement functionality more easily.</li> + <li>Third party APIs — constructs built into third-party platforms (e.g. Twitter, Facebook) that allow you to use some of those platform's functionality in your own web pages (for example, display your latest Tweets on your web page).</li> + <li>JavaScript libraries — Usually one or more JavaScript files containing <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Custom_functions">custom functions</a> that you can attach to your web page to speed up or enable writing common functionality. Examples include jQuery, Mootools and React.</li> + <li>JavaScript frameworks — The next step up from libraries, JavaScript frameworks (e.g. Angular and Ember) tend to be packages of HTML, CSS, JavaScript, and other technologies that you install and then use to write an entire web application from scratch. The key difference between a library and a framework is “Inversion of Control”. When calling a method from a library, the developer is in control. With a framework, the control is inverted: the framework calls the developer's code.</li> +</ul> + +<h2 id="What_can_APIs_do">What can APIs do?</h2> + +<p>There are a huge number of APIs available in modern browsers that allow you to do a wide variety of things in your code. You can see this by taking a look at the <a href="https://developer.mozilla.org/en-US/docs/Web/API">MDN APIs index page</a>.</p> + +<h3 id="Common_browser_APIs">Common browser APIs</h3> + +<p>In particular, the most common categories of browser APIs you'll use (and which we'll cover in this module in greater detail) are:</p> + +<ul> + <li><strong>APIs for manipulating documents</strong> loaded into the browser. The most obvious example is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM (Document Object Model) API</a>, which allows you to manipulate HTML and CSS — creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page, or some new content displayed, for example, that's the DOM in action. Find out more about these types of API in <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a>.</li> + <li><strong>APIs that fetch data from the server</strong> to update small sections of a webpage on their own are very commonly used. This seemingly small detail has had a huge impact on the performance and behaviour of sites — if you just need to update a stock listing or list of available new stories, doing it instantly without having to reload the whole entire page from the server can make the site or app feel much more responsive and "snappy". APIs that make this possible include <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. You may also come across the term <strong>Ajax</strong>, which describes this technique. Find out more about such APIs in <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>.</li> + <li><strong>APIs for drawing and manipulating graphics</strong> are now widely supported in browsers — the most popular ones are <a href="/en-US/docs/Web/API/Canvas_API">Canvas</a> and <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, which allow you to programmatically update the pixel data contained in an HTML {{htmlelement("canvas")}} element to create 2D and 3D scenes. For example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the Canvas API, or create a complex 3D scene with lighting and textures using WebGL. Such APIs are often combined with APIs for creating animation loops (such as {{domxref("window.requestAnimationFrame()")}}) and others to make constantly updating scenes like cartoons and games.</li> + <li><strong><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a></strong> like {{domxref("HTMLMediaElement")}}, the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, and <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> allow you to do really interesting things with multimedia such as creating custom UI controls for playing audio and video, displaying text tracks like captions and subtitles along with your videos, grabbing video from your web camera to be manipulated via a canvas (see above) or displayed on someone else's computer in a web conference, or adding effects to audio tracks (such as gain, distortion, panning, etc).</li> + <li><strong>Device APIs</strong> are basically APIs for manipulating and retrieving data from modern device hardware in a way that is useful for web apps. We've already talked about the Geolocation API accessing the device's location data so you can plot your position on a map. Other examples include telling the user that a useful update is available on a web app via system notifications (see the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a>) or vibration hardware (see the <a href="/en-US/docs/Web/API/Vibration_API">Vibration API</a>).</li> + <li><strong>Client-side storage APIs</strong> are becoming a lot more widespread in web browsers — the ability to store data on the client-side is very useful if you want to create an app that will save its state between page loads, and perhaps even work when the device is offline. There are a number of options available, e.g. simple name/value storage with the <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>, and more complex tabular data storage with the <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a>.</li> +</ul> + +<h3 id="Common_third-party_APIs">Common third-party APIs</h3> + +<p>Third party APIs come in a large variety; some of the more popular ones that you are likely to make use of sooner or later are:</p> + +<ul> + <li>The <a href="https://dev.twitter.com/overview/documentation">Twitter API</a>, which allows you to do things like displaying your latest tweets on your website.</li> + <li>The <a href="https://developers.google.com/maps/">Google Maps API</a> allows you to do all sorts of things with maps on your web pages (funnily enough, it also powers Google Maps). This is now an entire suite of APIs, which handle a wide variety of tasks, as evidenced by the <a href="https://developers.google.com/maps/documentation/api-picker">Google Maps API Picker</a>.</li> + <li>The <a href="https://developers.facebook.com/docs/">Facebook suite of APIs</a> enables you to use various parts of the Facebook ecosystem to benefit your app, for example by providing app login using Facebook login, accepting in-app payments, rolling out targetted ad campaigns, etc.</li> + <li>The <a href="https://developers.google.com/youtube/">YouTube API</a>, which allows you to embed YouTube videos on your site, search YouTube, build playlists, and more.</li> + <li>The <a href="https://www.twilio.com/">Twilio API</a>, which provides a framework for building voice and video call functionality into your app, sending SMS/MMS from your apps, and more.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You can find information on a lot more 3rd party APIs at the <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a>.</p> +</div> + +<h2 id="How_do_APIs_work">How do APIs work?</h2> + +<p>Different JavaScript APIs work in slightly different ways, but generally, they have common features and similar themes to how they work.</p> + +<h3 id="They_are_based_on_objects">They are based on objects</h3> + +<p>APIs are interacted with in your code using one or more <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>, which serve as containers for the data the API uses (contained in object properties), and the functionality the API makes available (contained in object methods).</p> + +<div class="note"> +<p><strong>Note</strong>: If you are not already familiar with how objects work, you should go back and work through our <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a> module before continuing.</p> +</div> + +<p>Let's return to the example of the Geolocation API — this is a very simple API that consists of a few simple objects:</p> + +<ul> + <li>{{domxref("Geolocation")}}, which contains three methods for controlling the retrieval of geodata.</li> + <li>{{domxref("Position")}}, which represents the position of a device at a given time — this contains a {{domxref("Coordinates")}} object that contains the actual position information, plus a timestamp representing the given time.</li> + <li>{{domxref("Coordinates")}}, which contains a whole lot of useful data on the device position, including latitude and longitude, altitude, velocity and direction of movement, and more.</li> +</ul> + +<p>So how do these objects interact? If you look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> example (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">see it live also</a>), you'll see the following code:</p> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { + var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); + var myOptions = { + zoom: 8, + center: latlng, + mapTypeId: google.maps.MapTypeId.TERRAIN, + disableDefaultUI: true + } + var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions); +});</pre> + +<div class="note"> +<p><strong>Note</strong>: When you first load up the above example, you should be given a dialog box asking if you are happy to share your location with this application (see the {{anch("They have additional security mechanisms where appropriate")}} section later in the article). You need to agree to this to be able to plot your location on the map. If you still can't see the map, you may need to set your permissions manually; you can do this in various ways depending on what browser you are using; for example in Firefox go to > <em>Tools</em> > <em>Page Info</em> > <em>Permissions</em>, then change the setting for <em>Share Location</em>; in Chrome go to <em>Settings</em> > <em>Privacy</em> > <em>Show advanced settings</em> > <em>Content settings</em> then change the settings for <em>Location</em>.</p> +</div> + +<p>We first want to use the {{domxref("Geolocation.getCurrentPosition()")}} method to return the current location of our device. The browser's {{domxref("Geolocation")}} object is accessed by calling the {{domxref("Navigator.geolocation")}} property, so we start off by using</p> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre> + +<p>This is equivalent to doing something like</p> + +<pre class="brush: js">var myGeo = navigator.geolocation; +myGeo.getCurrentPosition(function(position) { ... });</pre> + +<p>But we can use the dot syntax to chain our property/method access together, reducing the number of lines we have to write.</p> + +<p>The {{domxref("Geolocation.getCurrentPosition()")}} method only has a single mandatory parameter, which is an anonymous function that will run when the device's current position has been successfully retrieved. This function itself has a parameter, which contains a {{domxref("Position")}} object representing the current position data.</p> + +<div class="note"> +<p><strong>Note</strong>: A function that is taken by another function as an argument is called a <a href="/en-US/docs/Glossary/Callback_function">callback function</a>.</p> +</div> + +<p>This pattern of invoking a function only when an operation has been completed is very common in JavaScript APIs — making sure one operation has completed before trying to use the data the operation returns in another operation. These are called <strong><a href="/en-US/docs/Glossary/Asynchronous">asynchronous</a> operations</strong>. Because getting the device's current position relies on an external component (the device's GPS or other geolocation hardware), we can't guarantee that it will be done in time to just immediately use the data it returns. Therefore, something like this wouldn't work:</p> + +<pre class="brush: js example-bad">var position = navigator.geolocation.getCurrentPosition(); +var myLatitude = position.coords.latitude;</pre> + +<p>If the first line had not yet returned its result, the second line would throw an error, because the position data would not yet be available. For this reason, APIs involving asynchronous operations are designed to use {{glossary("callback function")}}s, or the more modern system of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>, which were made available in ECMAScript 6 and are widely used in newer APIs.</p> + +<p>We are combining the Geolocation API with a third party API — the Google Maps API — which we are using to plot the location returned by <code>getCurrentPosition()</code> on a Google Map. We make this API available on our page by linking to it — you'll find this line in the HTML:</p> + +<pre class="brush: html"><script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script></pre> + +<p>To use the API, we first create a <code>LatLng</code> object instance using the <code>google.maps.LatLng()</code> constructor, which takes our geolocated {{domxref("Coordinates.latitude")}} and {{domxref("Coordinates.longitude")}} values as parameters:</p> + +<pre class="brush: js">var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);</pre> + +<p>This object is itself set as the value of the <code>center</code> property of an options object that we've called <code>myOptions</code>. We then create an object instance to represent our map by calling the <code>google.maps.Map()</code> constructor, passing it two parameters — a reference to the {{htmlelement("div")}} element we want to render the map on (with an ID of <code>map_canvas</code>), and the options object we defined just above it.</p> + +<pre class="brush: js">var myOptions = { + zoom: 8, + center: latlng, + mapTypeId: google.maps.MapTypeId.TERRAIN, + disableDefaultUI: true +} + +var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);</pre> + +<p>With this done, our map now renders.</p> + +<p>This last block of code highlights two common patterns you'll see across many APIs. First of all, API objects commonly contain constructors, which are invoked to create instances of those objects that you'll use to write your program. Second, API objects often have several options available that can be tweaked to get the exact environment you want for your program. API constructors commonly accept options objects as parameters, which is where you'd set such options.</p> + +<div class="note"> +<p><strong>Note</strong>: Don't worry if you don't understand all the details of this example immediately. We'll cover using third party APIs in a lot more detail in a future article.</p> +</div> + +<h3 id="They_have_recognizable_entry_points">They have recognizable entry points</h3> + +<p>When using an API, you should make sure you know where the entry point is for the API. In The Geolocation API, this is pretty simple — it is the {{domxref("Navigator.geolocation")}} property, which returns the browser's {{domxref("Geolocation")}} object that all the useful geolocation methods are available inside.</p> + +<p>The Document Object Model (DOM) API has an even simpler entry point — its features tend to be found hanging off the {{domxref("Document")}} object, or an instance of an HTML element that you want to affect in some way, for example:</p> + +<pre class="brush: js">var em = document.createElement('em'); // create a new em element +var para = document.querySelector('p'); // reference an existing p element +em.textContent = 'Hello there!'; // give em some text content +para.appendChild(em); // embed em inside para</pre> + +<p>Other APIs have slightly more complex entry points, often involving creating a specific context for the API code to be written in. For example, the Canvas API's context object is created by getting a reference to the {{htmlelement("canvas")}} element you want to draw on, and then calling its {{domxref("HTMLCanvasElement.getContext()")}} method:</p> + +<pre class="brush: js">var canvas = document.querySelector('canvas'); +var ctx = canvas.getContext('2d');</pre> + +<p>Anything that we want to do to the canvas is then achieved by calling properties and methods of the content object (which is an instance of {{domxref("CanvasRenderingContext2D")}}), for example:</p> + +<pre class="brush: js">Ball.prototype.draw = function() { + ctx.beginPath(); + ctx.fillStyle = this.color; + ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); + ctx.fill(); +};</pre> + +<div class="note"> +<p><strong>Note</strong>: You can see this code in action in our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">bouncing balls demo</a> (see it <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">running live</a> also).</p> +</div> + +<h3 id="They_use_events_to_handle_changes_in_state">They use events to handle changes in state</h3> + +<p>We already discussed events earlier on in the course, in our <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a> article — this article looks in detail at what client-side web events are and how they are used in your code. If you are not already familiar with how client-side web API events work, you should go and read this article first before continuing.</p> + +<p>Some web APIs contain no events, but some contain a number of events. The handler properties that allow us to run functions when events fire are generally listed in our reference material in separate "Event handlers" sections. As a simple example, instances of the <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> object (each one represents an HTTP request to the server to retrieve a new resource of some kind) have a number of events available on them, for example the <code>load</code> event is fired when a response has been successfully returned containing the requested resource, and it is now available.</p> + +<p>The following code provides a simple example of how this would be used:</p> + +<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; +var request = new XMLHttpRequest(); +request.open('GET', requestURL); +request.responseType = 'json'; +request.send(); + +request.onload = function() { + var superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<div class="note"> +<p><strong>Note</strong>: You can see this code in action in our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> example (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">see it live</a> also).</p> +</div> + +<p>The first five lines specify the location of resource we want to fetch, create a new instance of a request object using the <code>XMLHttpRequest()</code> constructor, open an HTTP <code>GET</code> request to retrieve the specified resource, specify that the response should be sent in JSON format, then send the request.</p> + +<p>The <code>onload</code> handler function then specifies what we do with the response. We know the response will be successfully returned and available after the load event has required (unless an error occurred), so we save the response containing the returned JSON in the <code>superHeroes</code> variable, then pass it to two different functions for further processing.</p> + +<h3 id="They_have_additional_security_mechanisms_where_appropriate">They have additional security mechanisms where appropriate</h3> + +<p>WebAPI features are subject to the same security considerations as JavaScript and other web technologies (for example <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>), but they sometimes have additional security mechanisms in place. For example, some of the more modern WebAPIs will only work on pages served over HTTPS due to them transmitting potentially sensitive data (examples include <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> and <a href="/en-US/docs/Web/API/Push_API">Push</a>).</p> + +<p>In addition, some WebAPIs request permission to be enabled from the user once calls to them are made in your code. As an example, you may have noticed a dialog like the following when loading up our earlier <a href="/en-US/docs/Web/API/Geolocation">Geolocation</a> example:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14313/location-permission.png" style="border-style: solid; border-width: 1px; display: block; height: 188px; margin: 0px auto; width: 413px;"></p> + +<p>The <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> asks for permission in a similar fashion:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14315/notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>These permission prompts are given to users for security — if they weren't in place, then sites could start secretly tracking your location without you knowing it, or spamming you with a lot of annoying notifications.</p> + +<h2 id="Summary">Summary</h2> + +<p>At this point, you should have a good idea of what APIs are, how they work, and what you can do with them in your JavaScript code. You are probably excited to start actually doing some fun things with specific APIs, so let's go! Next up, we'll look at manipulating documents with the Document Object Model (DOM).</p> + +<p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li> +</ul> diff --git a/files/id/learn/javascript/first_steps/index.html b/files/id/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..6f7e166951 --- /dev/null +++ b/files/id/learn/javascript/first_steps/index.html @@ -0,0 +1,63 @@ +--- +title: Memulai Javascript +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Article + - Assessment + - Beginner + - Guide + - JavaScript + - Landing + - Operator + - String + - Variables +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Pada modul Javascript pertama kita, kita akan mengawali dengan menjawab beberapa pertanyaan fundamental seperti "Apa itu JavaScript?", "seperti apa?", dan "untuk apa?", sebelum anda melanjutkan belajar menulis javascript pertama kali. Setelah itu, kita akan mendiskusikan beberapa kunci block pembangun secara detail, Seperti variable, string, number dan array.</p> + +<h2 id="Persyaratan">Persyaratan</h2> + +<p>Sebelum memulai modul ini, anda tidak perlu memiliki pemahaman javascript sebelumnya, namun anda perlu setidaknya pernah menggunakan HTML and CSS. Anda disarankan belajar dari modul berikut sebelum memulai di javascript:</p> + +<ul> + <li><a href="/id/docs/Learn/Getting_started_with_the_web">Memulai dengan Web</a> (dimana didalamnya terdapat <a href="/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Pengenalan dasar JavaScript </a>)</li> + <li><a href="/id/docs/Web/Guide/HTML/Introduction">Pegenalan HTML</a></li> + <li><a href="/id/docs/Learn/CSS/Introduction_to_CSS">Pengenalan CSS</a></li> +</ul> + +<div class="note"> +<p><strong>Catatan</strong>: jika anda bekerja dengan menggunakan computer/tablet/perangkat lainnya dimana anda tidak memiliki kemampuan untuk membuat file anda sendiri, anda bisa mencoba (sangat disarankan) contoh kode di online coding program seperti <a href="http://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Apa itu JavaScript?</a></dt> + <dd>Selamat datang di Kursus Javascript MDN untuk pemula! pada artikel pertama kita akan melihat javascript dari level tertinggi, menjawab pertanyaan seperti "Apa itu javascript?", dan "untuk apa?", dan memastikan anda nyaman dengan tujuan dari JavaScript.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/A_first_splash">Percikan pertama Javascript</a></dt> + <dd>Sekarang anda akan belajar teori tentang JavaScript, dan apa yang bisa anda lakukan dengan itu, kita akan memberikan anda kursus kilat pada dasar JavaScript melalui tutorial yang praktis. Disini anda akan membuat permainan sederhana "Guess the number" langkah demi langkah.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/What_went_wrong">Apa yang salah? Memecahkan Masalah JavaScript</a></dt> + <dd>Ketika anda membangun permainan "Guess the number" pada artikel sebelumnya, anda mungkin telah menemukan bahwa itu tidak berjalan dengan baik. Jangan takut — artikel ini akan membantu anda memecahkan masalah tersebut dengan memberikan anda beberapa tips sederhana untuk mencari dan memperbaiki error di program javascript.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Variables">Menyimpan informasi yang anda butuhkan — Variable</a></dt> + <dd>Setelah membaca beberapa artikel, anda perlu mengetahui apa itu javascript, apa yang bisa dimanfaatkan bagi anda, bagaimana menggunakannya dengan teknologi web lain, dan seperti apa fitur utama dari level tertinggi. Pada artikel ini kita akan kembali ke hal yang lebihdasar, melihat bagaimana bekerja dengan hal paling dasar pada block pembangun JavaScript — Variable.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Math">Matematika dasar di JavaScript — number dan operator</a></dt> + <dd>Pada poin ini anda akan mendiskusikan matematika di JavaScript — bagaimana kita mengabungkan operator dan fitur lain untuk berhasil memanipulasi angka melakukan perintah kita.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Strings">Penanganan text — strings di JavaScript</a></dt> + <dd>Selanjunya kita akan mengalihkan perhatian kita pada string — ini adalah potongan teks di programming. Pada artikel ini kita akan melihat pada semua hal umum yang sangat perlu anda tahu tentang string ketika belajar JavaScript, seperti membuat string, memunculkan tanda kutip pada string, dan menggabungkanya.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Useful_string_methods">Metod string yang berguna</a></dt> + <dd>Sekarang kita telah melihat pada dasar string, mari kita beralih dan mulai memikirkan tentang operasi apa yang berguna yang bisa kita gunakan dengan method built-in pada string, seperti mencari panjang teks string, menggabung dan memisahkan string, mensubtitusi sebuah karakter pada string ke lainnya, dan banyak lagi.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt> + <dd>Pada artikel terakhir pada modul ini, kita akan melihat pada array — cara rapi untuk menyimpan daftar item pada sebuah nama variabel. Disini kita akan melihat kenapa ini berguna, kemudian mencari tahu bagaimana membuat array, mengambil, menambah, dan menghapus item yang tersimpan pada array, dan banyak lagi.</dd> +</dl> + +<h2 id="Penilaian">Penilaian</h2> + +<p>Penilaian berikut akan menguji pemahaman anda tentang dasar javascrip berdasarkan paduan yang telah diberikan.</p> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt> + <dd>Pada penilaian ini anda ditugaskan mengambil beberapa pengetahuan yang anda dapatkan dari modul artikel ini dan menerapkannya dengan membuat sebuah aplikasi seru yang menghasilkan cerita konyol secara acak. Selamat Bersenang — senang!</dd> +</dl> diff --git a/files/id/learn/javascript/first_steps/what_is_javascript/index.html b/files/id/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..f85ec8b2e1 --- /dev/null +++ b/files/id/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,433 @@ +--- +title: What is JavaScript? +slug: Learn/JavaScript/First_steps/What_is_JavaScript +tags: + - 3rd party + - API + - Artikel + - Bahasa Indonesia + - Browser + - Coding + - JavaScript + - Learn + - Pemula + - programming +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Selamat datang di kursus Javascript MDN tingkat pemula ini! Di artikel ini kita akan melihat JavaScript dari level tinggi, menjawab pertanyaan seperti "Apa itu?" dan "Bagaimana kamu dapat melakukannya", dan memastikan kamu nyaman dengan kegunaan JavaScript </p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, a basic understanding of HTML and CSS.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To gain familiarity with what JavaScript is, what it can do, and how it fits into a web site.</td> + </tr> + </tbody> +</table> + +<h2 id="Definisi_Tingkat_Tinggi">Definisi Tingkat Tinggi</h2> + +<p>JavaScript merupakan bahasa pemrograman yang memungkinkan anda untuk melakukan sesuatu yang kompleks di halaman web — ketika halaman web dibuka, pasti ada sesuatu selain menampilkan halaman statis dan informasi — halaman web akan menampilkan konten terbaru, map interaktif, animasi 2D/3D, scrolling video, dan lain-lain. — Apabila semua itu ada di sebuah halaman web, sudah pasti halaman itu menggunakan bahasa JavaScript. JavaScript merupakan lapisan/layer ketiga dari <em>standard web technologies</em>, yang pertama <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a> dan kedua <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>. Anda dapat melihat dokumentasinya di link yang di sediakan.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>{{glossary("HTML")}} merupakan bahasa markup untuk membuat kerangka dan memberikan konten terhadap halaman web. sebagai contoh, membuat <em>paragraph, headings, </em>dan <em>data tables, </em>atau menyematkan gambar dan video di halam web.</li> + <li>{{glossary("CSS")}} adalah bahasa yang digunakan untuk mengubah gaya/<em>styling </em>pada halaman HTML kita, sehingga terlihat lebih menarik. sebagai contoh, mengatur warna background dan font, mengatur layout konten dengan kolom yang banyak.</li> + <li>{{glossary("JavaScript")}} adalah bahasa program yang memungkinkan kita membuat konten terupdate secara dinamis, mengontrol multimedia, membuat animasi, dan membuat apa saja (Oke, tidak semua bisa dibuat oleh JavaScript, tetapi ini sangatlah luar biasa karena, hanya beberapa baris kode kalian dapat membuat hal yang menakjubkan di JavaScript.)</li> +</ul> + +<p>Mari kita buat label teks sederhana sebagai contoh. kita bisa gunakan HTML untuk strukturnya.</p> + +<pre class="brush: html"><p>Player 1: Chris</p></pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> + +<p>Lalu kita tambahkan CSS agar terlihat menarik.</p> + +<pre class="brush: css">p { + font-family: 'helvetica neue', helvetica, sans-serif; + letter-spacing: 1px;j + text-transform: uppercase; + text-align: center; + border: 2px solid rgba(0,0,200,0.6); + background: rgba(0,0,200,0.3); + color: rgba(0,0,200,0.6); + box-shadow: 1px 1px 2px rgba(0,0,200,0.4); + border-radius: 10px; + padding: 3px 10px; + display: inline-block; + cursor: pointer; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> + +<p>Dan yang terakhir, kita akan menambahkan JavaScript sehingga kita bisa menambahkan <em>Player</em>:</p> + +<pre class="brush: js" dir="rtl">var para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + var name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +} +</pre> + +<p>{{ EmbedLiveSample('Definisi_Tingkat_Tinggi', '', '', '', 'Learn/JavaScript/First_steps/What_is_JavaScript') }}</p> + +<p>Coba kalian klik label teks yang sudah kita buat dan lihat apa yang terjadi!. Kalian akan diminta menuliskan nama untuk Player 1. (Note: Kalian bisa melihat demo ini di GitHub — <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">source code</a>, atau <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">live preview</a>)</p> + +<p>JavaScript bisa melakukan sesuatu lebih dari yang diatas! — mari kita jelajahi lebih tentang JavaScript.</p> + +<h2 id="Lalu_apa_yang_bisa_dilakukannya">Lalu apa yang bisa dilakukannya?</h2> + +<p>Inti dari bahasa JavaScript terdiri dari beberapa fitur umum pada bahasa program lainnya yang memungkinkan kita:</p> + +<ul> + <li>Menyimpan nilai-nilai didalam variabel. Diatas merupakan contoh untuk penyimpanan variabel <code>name</code>, kita meminta teks label untuk menambahkan nama baru untuk disimpan ke variabel <code>name</code>.</li> + <li> + <p>Operasi dalam teks (atau "string" dalam ketentuan pemrograman). Contoh diatas kita mengambil string "Player 1: " dan menggabungkan variabel <code>name</code> untuk membuat label teks yang lengkap menjadi, "Player 1: Chris".</p> + </li> + <li> + <p>Menjalankan kode sebagai respon terhadap <em>event</em> yang sedang terjadi di halaman web. Sebagai contoh seperti diatas, kita menggunakan <em>event </em>{{Event("click")}} untuk mendeteksi apabila kita telah meng-klik label teks "Player 1 : Chris" maka JavaScript akan dijalankan.</p> + </li> + <li>Dan masih banyak lagi.</li> +</ul> + +<p>What is even more exciting however is the functionality built on top of the core JavaScript language. So-called <strong>Application Programming Interfaces</strong> (<strong>APIs</strong>) provide you with extra superpowers to use in your JavaScript code.</p> + +<p>APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and <em>then</em> put them together to make a bookshelf.</p> + +<p>They generally fall into two categories.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + +<p><strong>Browser APIs</strong> are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:</p> + +<ul> + <li>The {{domxref("Document_Object_Model","DOM (Document Object Model) API")}} allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc. Everytime you see a popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the DOM in action.</li> + <li>The {{domxref("Geolocation","Geolocation API")}} retrieves geographical information. This is how <a href="https://www.google.com/maps">Google Maps</a> is able to find your location, and plot it on a map.</li> + <li>The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies —see <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> and <a href="http://webglsamples.org/">webglsamples</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> like {{domxref("HTMLMediaElement")}} and {{domxref("WebRTC API", "WebRTC")}} allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a> to get the idea).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a> in more detail when you get closer to delivering production code (i.e. real code that real customers will use).</p> +</div> + +<p><strong>Third party APIs</strong> are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:</p> + +<ul> + <li>The <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> allows you to do things like displaying your latest tweets on your website.</li> + <li>The <a href="https://developers.google.com/maps/">Google Maps API</a> allows you to embed custom maps into your website, and other such functionality.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p> +</div> + +<p>There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!</p> + +<h2 id="What_is_JavaScript_doing_on_your_page">What is JavaScript doing on your page?</h2> + +<p>Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.</p> + +<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).</p> + + + + + +<h4 id="sect1" style="display: block; margin: 0px auto;"></h4> + + + +<p>The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.</p> + +<p>This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS were there to affect, then errors would occur.</p> + +<h3 id="Browser_security">Browser security</h3> + +<p>Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.</p> + +<div class="note"> +<p><strong>Note</strong>: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.</p> +</div> + +<h3 id="JavaScript_running_order">JavaScript running order</h3> + +<p>When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:</p> + +<pre class="brush: js">var para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + var name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +}</pre> + +<p>Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.</p> + +<p>If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — <code>TypeError: para is undefined</code>. This means that the <code>para</code> object does not exist yet, so we can't add an event listener to it.</p> + +<div class="note"> +<p><strong>Note</strong>: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.</p> +</div> + +<h3 id="Interpreted_versus_compiled_code">Interpreted versus compiled code</h3> + +<p>You might hear the terms <strong>interpreted</strong> and <strong>compiled</strong> in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it.</p> + +<p>Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example C/C++ are compiled into assembly language that is then run by the computer.</p> + +<p>JavaScript is a lightweight interpreted programming language. Both approaches have different advantages, which we won't discuss at this point.</p> + +<h3 id="Server-side_versus_client-side_code">Server-side versus client-side code</h3> + +<p>You might also hear the terms <strong>server-side</strong> and <strong>client-side</strong> code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this JavaScript module we are explicitly talking about <strong>client-side JavaScript</strong>.</p> + +<p>Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, and ASP.NET. And JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> topic.</p> + +<h3 id="Dynamic_versus_static_code">Dynamic versus static code</h3> + +<p>The word <strong>dynamic</strong> is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.</p> + +<p>A web page with no dynamically updating content is referred to as <strong>static</strong> — it just shows the same content all the time.</p> + +<h2 id="How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</h2> + +<p>JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.</p> + +<h3 id="Internal_JavaScript">Internal JavaScript</h3> + +<ol> + <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere sensible.</li> + <li>Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.</li> + <li>Next, go to your text editor and add the following in your head — just before your closing <code></head></code> tag: + <pre class="brush: html"><script> + + // JavaScript goes here + +</script></pre> + </li> + <li>Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: + <pre>document.addEventListener("DOMContentLoaded", function() { + function createParagraph() { + var para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); + } + + var buttons = document.querySelectorAll('button'); + + for(var i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); + } +});</pre> + </li> + <li>Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a <code>.html</code> file? Did you add your {{htmlelement("script")}} element just before the <code></head></code> tag? Did you enter the JavaScript exactly as shown? <strong>JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.</strong></p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p> +</div> + +<h3 id="External_JavaScript">External JavaScript</h3> + +<p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p> + +<ol> + <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li> + <li>Replace your current {{htmlelement("script")}} element with the following: + <pre class="brush: html"><script src="script.js" defer></script></pre> + </li> + <li>Inside <code>script.js</code>, add the following script: + <pre class="brush: js">function createParagraph() { + var para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +} + +var buttons = document.querySelectorAll('button'); + +for(var i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + </li> + <li>Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code, and making it reusable across multiple HTML files. Plus the HTML is easier to read without huge chunks of script dumped in it.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p> +</div> + +<h3 id="Inline_JavaScript_handlers">Inline JavaScript handlers</h3> + +<p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p> + +<pre class="brush: js example-bad">function createParagraph() { + var para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +}</pre> + +<pre class="brush: html example-bad"><button onclick="createParagraph()">Click me!</button></pre> + +<p>You can try this version of our demo below.</p> + +<p>{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline <code>onclick</code> handler to make the function run when the button is pressed.</p> + +<p><strong>Please don't do this, however.</strong> It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you wanted the JavaScript to apply to.</p> + +<p>Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:</p> + +<pre class="brush: js">var buttons = document.querySelectorAll('button'); + +for (var i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<p>This might be a bit longer than the <code>onclick</code> attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.</p> + +<div class="note"> +<p><strong>Note</strong>: Try editing your version of <code>apply-javascript.html</code> and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?</p> +</div> + +<h3 id="Script_loading_strategies">Script loading strategies</h3> + +<p>There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.</p> + +<p>In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.</p> + +<p>In the internal example, you can see this structure around the code:</p> + +<pre class="brush: js">document.addEventListener("DOMContentLoaded", function() { + ... +});</pre> + +<p>This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">learn about events</a> later in the course).</p> + +<p>In the external example, we use a more modern JavaScript feature to solve the problem, the <code>async</code> attribute, which tells the browser to continue downloading the HTML content once the <code><script></code> tag element has been reached.</p> + +<pre class="brush: js"><script src="script.js" async></script></pre> + +<p>In this case both the script and the HTML will load simultaneously and the code will work.</p> + +<div class="note"> +<p><strong>Note</strong>: In the external case, we did not need to use the <code>DOMContentLoaded</code> event because the <code>async</code> attribute solved the problem for us. We didn't use the <code>async</code> solution for the internal JavaScript example because <code>async</code> only works for external scripts.</p> +</div> + +<p>And old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the <code></body></code> tag), so that it would load after all the HTML has been parsed. The problem with this solution (and the <code>DOMContentLoaded</code> solution seen above) is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site. This is why <code>async</code> was added to browsers!</p> + +<h4 id="async_and_defer">async and defer</h4> + +<p>There are actually two ways we can bypass the problem of the blocking script — <code>async</code> and <code>defer</code>. Let's look at the difference between these two.</p> + +<p>Async scripts will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use <code>async</code> when the scripts in the page run independently from each other and depend on no other script on the page.</p> + +<p>For example, if you have the following script elements:</p> + +<pre class="brush: html"><script async src="js/vendor/jquery.js"></script> + +<script async src="js/script2.js"></script> + +<script async src="js/script3.js"></script></pre> + +<p>You can't rely on the order the scripts will load in. <code>jquery.js</code> may load before or after <code>script2.js</code> and <code>script3.js</code> and if this is the case, any functions in those scripts depending on <code>jquery</code> will produce an error because <code>jquery</code> will not be defined at the time the script runs.</p> + +<p>Defer will run the scripts in the order they appear in the page and execute them as soon as the script and content are downloaded:</p> + +<pre class="brush: html"><script defer src="js/vendor/jquery.js"></script> + +<script defer src="js/script2.js"></script> + +<script defer src="js/script3.js"></script></pre> + +<p>All the scripts with the <code>defer</code> attribute will load in the order they appear on the page. So in the second example, we can be sure that <code>jquery.js</code> will load before <code>script2.js</code> and <code>script3.js</code> and that <code>script2.js</code> will load before <code>script3.js</code>.</p> + +<p>To summarize:</p> + +<ul> + <li>If your scripts can run independently without dependencies then use <code>async</code>.</li> + <li>If your scripts depend on other scripts load them using <code>defer</code> and put their corresponding <code><script></code> elements in the order you want the browser to execute them.</li> +</ul> + +<h2 id="Comments">Comments</h2> + +<p>As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:</p> + +<ul> + <li>A single line comment is written after a double forward slash (//), e.g. + <pre class="brush: js">// I am a comment</pre> + </li> + <li>A multi-line comment is written between the strings /* and */, e.g. + <pre class="brush: js">/* + I am also + a comment +*/</pre> + </li> +</ul> + +<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p> + +<pre class="brush: js">// Function: creates a new paragraph and append it to the bottom of the HTML body. + +function createParagraph() { + var para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +} + +/* + 1. Get references to all the buttons on the page and sort them in an array. + 2. Loop through all the buttons and add a click event listener to each one. + + When any button is pressed, the createParagraph() function will be run. +*/ + +var buttons = document.querySelectorAll('button'); + +for (var i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<h2 id="Summary">Summary</h2> + +<p>So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.</p> + +<p>JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>, getting you to jump straight in and build your own JavaScript examples.</p> + +<ul> +</ul> + +<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/id/learn/javascript/index.html b/files/id/learn/javascript/index.html new file mode 100644 index 0000000000..bdcf5aeedb --- /dev/null +++ b/files/id/learn/javascript/index.html @@ -0,0 +1,57 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - JavaScript + - JavaScript Pemula + - Landing + - Module + - Pemula +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} adalah bahasa pemrograman yang memungkinkan anda mengimplementasikan hal kompleks di halaman web — setiap halaman web tidak hanya berdiam disana dengan menampilkan informasi statis untuk anda lihat — menampilkan update setiap waktu, peta interaktif, animasi grafis 2D/3D, scrolling video jukeboxes, dll. — anda bisa memastikan bahwa disanalah JavaScript terlibat.</p> + +<h2 id="Jalur_Belajar">Jalur Belajar</h2> + +<p>JavaScript dapat dikatakan sulit untuk dipelajari dibandingkan teknologi terkait seperti <a href="/en-US/docs/Learn/HTML">HTML</a> dan <a href="/en-US/docs/Learn/CSS">CSS</a>. Sebelum mencoba belajar JavaScript, disarankan anda telah mengetahui setidaknya kedua teknologi tersebut, dan mungkin yang lain juga. Mulailah dengan modul belajar berikut:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Memulai dengan Web</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Pengenalan HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Pengenalan CSS</a></li> +</ul> + +<p>Memiliki pengalaman bahasa pemrograman lain juga bisa sangat membantu anda memahami Javascript.</p> + +<p>Setelah mengetahui dasar javascript , anda bisa belajar topik yang lebih lanjut, seperti:</p> + +<ul> + <li>Mendalami JavaScript, seperti yang diajarkan di <a href="/en-US/docs/Web/JavaScript/Guide">Paduan JavaScript</a> kami</li> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> +</ul> + +<h2 id="Modul_Belajar">Modul Belajar</h2> + +<p>Pada topik ini berisi modul berikut, dengan urutan yang disarankan untuk belajar.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">Dasar JavaScript</a></dt> + <dd>Pada modul pertama ini, kita akan menjawab beberapa pertanyaan fundamental seperti "apa itu JavaScript?", "seperti apa itu javascript?", dan "untuk apa?", sebelum melanjukan untuk menuntun anda berlatih menulis javascript untuk pertama kali. Setelah itu, kita akan mendiskusikan beberapa kunci fitur Javascript secara detail, seperti variabel, strings, number dan array.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">Block Pembangun JavaScript</a></dt> + <dd>Pada modul ini, kita melanjutkan memperluas cakupan pada semua kunci fitur fundamental Javascript, beralih pada tipe kode block yang umum digunakan seperti pernyataan kondisional, perulangan, fungsi, dan event. Anda tentu telah melihatnya di pembelajaran, tapi hanya sepintas — disini kita akan mendiskusikannya dengan lebih eksplisit.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Mengenal Objek JavaScript</a></dt> + <dd>Di JavaScript, kebanyakan diantaranya adalah objek, dari fitur inti javascript seperti string dan array sampai pada API browser dibangun diatas JavaScript. Anda juga bisa membuat objek anda sendiri untuk merangkum fungsi dan variabel terkait menjadi paket yang lebih efisien. Sifat orientasi objek dari javascript sangat penting untuk dipahami jika anda ingin meningkatkan pengetahuan pada bahasa dan menulis kode yang lebih efisien, karena itu disini kami telah menyediakan modul ini untuk membantu anda. Disini kita belajar teori objek dan sintak secara detail, melihat bagaimana anda bisa membuat objek anda sendiri, dan menjelaskan apa itu data JSON dan bagaimana menggunakannya.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web API</a></dt> + <dd>Ketika menulis client-side JavaScript untuk Website atau aplikasi, anda tidak akan lebih jauh sebelum memulai menggunakan API — antarmuka untuk memanipulasi aspek berbeda dari browser dan sistem operasi dimana situs berjalan, atau bahkan data dari website lain atau services. Pada modul ini kita akan membahas apa itu API, dan bagaimana menggunakan API yang umum digunakan pada pembangunan kode anda. </dd> +</dl> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript di MDN</a></dt> + <dd>Poin utama untuk inti dokumentasi Javascript di MDN — dimana anda mencari referensi yang luas pada semua aspek dari dan beberapa tutorial lanjutan untuk mendalami pengalaman menggunakan Javascript.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd>Seri terbaik dari tutorial video untuk anda belajar matematika yang perlu dipahami untuk menjadi programer yang lebih efektif, oleh <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> diff --git a/files/id/learn/javascript/objects/dasar-dasar/index.html b/files/id/learn/javascript/objects/dasar-dasar/index.html new file mode 100644 index 0000000000..6c273b51a3 --- /dev/null +++ b/files/id/learn/javascript/objects/dasar-dasar/index.html @@ -0,0 +1,261 @@ +--- +title: Dasar-dasar Objek JavaScript object +slug: Learn/JavaScript/Objects/Dasar-dasar +translation_of: Learn/JavaScript/Objects/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Pada artikel ini, kita akan melihat beberapa hal mendasar dalam sintaks Javascript Objek dan meninjau kembali beberapa fitur JavaScript yang telah kita bahas pada bab sebelumnya .</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prasyarat:</th> + <td>Mengetahui dasar komputer literasi, memahami tentang dasar HTML dan CSS, memahami dasar javascript (lihat <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> dan <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).</td> + </tr> + <tr> + <th scope="row">Tujuan:</th> + <td>Untuk memahami teori dasar tentang pemrograman berbasis objek, dan bagaimana hubungannya dengan Javascript dan bagaimana memulai bekerja menggunakan JavaScript objects.</td> + </tr> + </tbody> +</table> + +<h2 id="Dasar_Objek">Dasar Objek</h2> + +<p>Objek adalah kumpulan data yang saling berkaitan secara data maupun fungsionalitas (yang terdiri dari beberapa variabel dan fungsi yang disebut properti (properties) dan metode (method) ketika digunakan dalam objek). </p> + +<p>Untuk memulainya, silakan salin file <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>, yang berisi tentang contoh kecil dari apa yang kita bahas. Kita akan menggunakan file ini sebagai dasar untuk mempelajari sintaks objek dasar. Saat mempelajarinya anda harus memiliki <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">developer tools JavaScript console</a>.</p> + +<p>Seperti banyak hal dalam JavaScript, membuat objek dimulai dengan mendefinisikan dan menginisialisasi beberapa variabel. Coba anda gunakan baris kode berikut pada kode JavaScript yang sudah ada dalam file, simpan lalu refresh:</p> + +<pre class="brush: js notranslate">const person = {};</pre> + +<p>Now open your browser's <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">JavaScript console</a>, enter <code>person</code> into it, and press <kbd>Enter</kbd>/<kbd>Return</kbd>. You should get a result similar to one of the below lines:</p> + +<pre class="brush: js notranslate">[object Object] +Object { } +{ } +</pre> + +<p>Congratulations, you've just created your first object. Job done! But this is an empty object, so we can't really do much with it. Let's update the JavaScript object in our file to look like this:</p> + +<pre class="brush: js notranslate">const person = { + name: ['Bob', 'Smith'], + age: 32, + gender: 'male', + interests: ['music', 'skiing'], + bio: function() { + alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }, + greeting: function() { + alert('Hi! I\'m ' + this.name[0] + '.'); + } +}; +</pre> + +<p>After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:</p> + +<pre class="brush: js notranslate">person.name +person.name[0] +person.age +person.interests[1] +person.bio() +person.greeting()</pre> + +<p>You have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!</p> + +<div class="note"> +<p><strong>Note</strong>: If you are having trouble getting this to work, try comparing your code against our version — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.</p> +</div> + +<p>So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. <code>name</code> and <code>age</code> above), and a value (e.g. <code>['Bob', 'Smith']</code> and <code>32</code>). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:</p> + +<pre class="brush: js notranslate">const objectName = { + member1Name: member1Value, + member2Name: member2Value, + member3Name: member3Value +};</pre> + +<p>The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's <strong>properties</strong>. The last two items are functions that allow the object to do something with that data, and are referred to as the object's <strong>methods</strong>.</p> + +<p>An object like this is referred to as an <strong>object literal</strong> — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.</p> + +<p>It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.</p> + +<h2 id="Dot_notation">Dot notation</h2> + +<p>Above, you accessed the object's properties and methods using <strong>dot notation</strong>. The object name (person) acts as the <strong>namespace</strong> — it must be entered first to access anything <strong>encapsulated</strong> inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:</p> + +<pre class="brush: js notranslate">person.age +person.interests[1] +person.bio()</pre> + +<h3 id="Sub-namespaces">Sub-namespaces</h3> + +<p>It is even possible to make the value of an object member another object. For example, try changing the name member from</p> + +<pre class="brush: js notranslate">name: ['Bob', 'Smith'],</pre> + +<p>to</p> + +<pre class="brush: js notranslate">name : { + first: 'Bob', + last: 'Smith' +},</pre> + +<p>Here we are effectively creating a <strong>sub-namespace</strong>. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:</p> + +<pre class="brush: js notranslate">person.name.first +person.name.last</pre> + +<p><strong>Important</strong>: At this point you'll also need to go through your method code and change any instances of</p> + +<pre class="brush: js notranslate">name[0] +name[1]</pre> + +<p>to</p> + +<pre class="brush: js notranslate">name.first +name.last</pre> + +<p>Otherwise your methods will no longer work.</p> + +<h2 id="Bracket_notation">Bracket notation</h2> + +<p>There is another way to access object properties — using bracket notation. Instead of using these:</p> + +<pre class="brush: js notranslate">person.age +person.name.first</pre> + +<p>You can use</p> + +<pre class="brush: js notranslate">person['age'] +person['name']['first']</pre> + +<p>This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called <strong>associative arrays</strong> — they map strings to values in the same way that arrays map numbers to values.</p> + +<h2 id="Setting_object_members">Setting object members</h2> + +<p>So far we've only looked at retrieving (or <strong>getting</strong>) object members — you can also <strong>set</strong> (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:</p> + +<pre class="brush: js notranslate">person.age = 45; +person['name']['last'] = 'Cratchit';</pre> + +<p>Try entering the above lines, and then getting the members again to see how they've changed, like so:</p> + +<pre class="brush: js notranslate">person.age +person['name']['last']</pre> + +<p>Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these in the JS console:</p> + +<pre class="brush: js notranslate">person['eyes'] = 'hazel'; +person.farewell = function() { alert("Bye everybody!"); }</pre> + +<p>You can now test out your new members:</p> + +<pre class="brush: js notranslate">person['eyes'] +person.farewell()</pre> + +<p>One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. We could get those values like this:</p> + +<pre class="brush: js notranslate">let myDataName = nameInput.value; +let myDataValue = nameValue.value;</pre> + +<p>We could then add this new member name and value to the <code>person</code> object like this:</p> + +<pre class="brush: js notranslate">person[myDataName] = myDataValue;</pre> + +<p>To test this, try adding the following lines into your code, just below the closing curly brace of the <code>person</code> object:</p> + +<pre class="brush: js notranslate">let myDataName = 'height'; +let myDataValue = '1.75m'; +person[myDataName] = myDataValue;</pre> + +<p>Now try saving and refreshing, and entering the following into your text input:</p> + +<pre class="brush: js notranslate">person.height</pre> + +<p>Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.</p> + +<h2 id="What_is_this">What is "this"?</h2> + +<p>You may have noticed something slightly strange in our methods. Look at this one for example:</p> + +<pre class="brush: js notranslate">greeting: function() { + alert('Hi! I\'m ' + this.name.first + '.'); +}</pre> + +<p>You are probably wondering what "this" is. The <code>this</code> keyword refers to the current object the code is being written inside — so in this case <code>this</code> is equivalent to <code>person</code>. So why not just write <code>person</code> instead? As you'll see in the <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a> article, when we start creating constructors and so on, <code>this</code> is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different <code>person</code> object instances may have different names, but we want to use their own name when saying their greeting).</p> + +<p>Let's illustrate what we mean with a simplified pair of person objects:</p> + +<pre class="brush: js notranslate">const person1 = { + name: 'Chris', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +const person2 = { + name: 'Deepti', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>In this case, <code>person1.greeting()</code> outputs "Hi! I'm Chris."; <code>person2.greeting()</code> on the other hand outputs "Hi! I'm Deepti.", even though the method's code is exactly the same in each case. As we said earlier, <code>this</code> is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.</p> + +<h2 id="Youve_been_using_objects_all_along">You've been using objects all along</h2> + +<p>As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than in our own basic custom examples.</p> + +<p>So when you used string methods like:</p> + +<pre class="brush: js notranslate">myString.split(',');</pre> + +<p>You were using a method available on an instance of the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> class. Every time you create a string in your code, that string is automatically created as an instance of <code>String</code>, and therefore has several common methods and properties available on it.</p> + +<p>When you accessed the document object model using lines like this:</p> + +<pre class="brush: js notranslate">const myDiv = document.createElement('div'); +const myVideo = document.querySelector('video');</pre> + +<p>You were using methods available on an instance of the <code><a href="/en-US/docs/Web/API/Document">Document</a></code> class. For each webpage loaded, an instance of <code>Document</code> is created, called <code>document</code>, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods and properties available on it.</p> + +<p>The same is true of pretty much any other built-in object or API you've been using — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, and so on.</p> + +<p>Note that built in objects and APIs don't always create object instances automatically. As an example, the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:</p> + +<pre class="brush: js notranslate">const myNotification = new Notification('Hello!');</pre> + +<p>Again, we'll look at constructors in a later article.</p> + +<div class="note"> +<p><strong>Note</strong>: It is useful to think about the way objects communicate as <strong>message passing</strong> — when an object needs another object to perform some kind of action often it sends a message to another object via one of its methods, and waits for a response, which we know as a return value.</p> +</div> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a>.</p> + +<h2 id="Summary">Summary</h2> + +<p>Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our <code>person</code> object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.</p> + +<p>In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.</p> + +<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> diff --git a/files/id/learn/javascript/objects/index.html b/files/id/learn/javascript/objects/index.html new file mode 100644 index 0000000000..a1ddfe032a --- /dev/null +++ b/files/id/learn/javascript/objects/index.html @@ -0,0 +1,54 @@ +--- +title: Memperkenalkan objek JavaScript +slug: Learn/JavaScript/Objects +tags: + - Artikel + - Asesmen + - CodingScripting + - JavaScript + - Objek + - Panduan + - Pemula + - Tutorial + - belajar +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Dalam JavaScript, banyak hal adalah objek, dari fitur inti JavaScript seperti string dan array sampai API browser dibangun atas JavaScript. Kamu bahkan bisa membuat objek sendiri untuk membungkus function dan variabel yang berhubungan menjadi package yang efisien, dan bertindak sebagai wadah data praktis. Sifat JavaScript yang berorientasi object penting untuk dipahami jika kamu ingin melangkah lebih jauh dengan pengetahuanmu tentang bahasanya, oleh karena itu kami menyediakan modul ini untuk membantumu. Di sini kita mengajarkan teori objek dan syntax secara detil, lalu melihat bagaimana cara membuat objekmu sendiri.</p> + +<h2 id="Persyaratan">Persyaratan</h2> + +<p>Sebelum mulai modul ini, kamu harus punya beberapa pemahaman dengan dasar-dasar dari modul <a href="https://developer.mozilla.org/id/docs/Web/Guide/HTML/Introduction">Pengenalan HTML</a> dan <a href="https://developer.mozilla.org/id/docs/Learn/CSS/Introduction_to_CSS">Pengenalan CSS</a> sebelum mulai JavaScript.</p> + +<p>Kamu juga harus punya pemahaman tentang JavaScript dasar sebelum melihat objek JavaScript secara detil. <span id="result_box" lang="id"><span>Sebelum mencoba modul ini</span></span>, pahami dulu <a href="/id/docs/Learn/JavaScript/First_steps">Langkah pertama JavaScript</a> dan <a href="/id/docs/Learn/JavaScript/Building_blocks">Blok bangunan JavaScript</a>.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Jika kamu bekerja di komputer /tablet /perangkat lain di mana kamu tiak punya kemampuan membuat file sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program pengkodean online seperti <a href="http://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Basics">Dasar Objek</a></dt> + <dd> + <p>Dalam artikel pertama tentang objek JavaScript, kita akan melihat syntax dasar objek JavaScript dan meninjau kembali beberapa fitur JavaScript yang telah kita lihat sebelumnya, mengulangi fakta bahwa banyak fitur yang telah kamu hadapi sebelumnya, yang mana itu sebenarnya objek.</p> + </dd> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript berorientasi object untuk pemula</a></dt> + <dd>Dengan dasar-dasar yang sudah dilalui, kita sekarang akan fokus pada JavaScript berorientasi objek (OOJS) - artikel ini menyajikan pandangan dasar teori pemrograman berorientasi objek (OOP), kemudian membahas bagaimana JavaScript mengemulasikan kelas objek melalui fungsi konstruktor, dan cara membuat objek secara instan.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Object_prototypes">Prototipe objek</a></dt> + <dd>Prototipe adalah mekanisme di mana objek JavaScript mewarisi fitur satu sama lain, dan mereka bekerja secara berbeda dengan mekanisme pewarisan dalam bahasa pemrograman berorientasi objek klasik. Pada artikel ini kita mengeksplorasi perbedaan itu, menjelaskan bagaimana rantai prototipe bekerja, dan melihat bagaimana properti prototipe dapat digunakan untuk menambahkan metode pada konstruktor yang ada.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Inheritance">Pewarisan/Inheritance pada JavaScript</a></dt> + <dd>Dengan sebagian besar rincian OOJS sudah dijelaskan, artikel ini menunjukkan bagaimana membuat kelas objek "child" (konstructor) yang mewarisi fitur dari kelas "parent" mereka. Selain itu, kami menyajikan beberapa saran, kapan dan di mana kamu bisa menggunakan OOJS..</dd> + <dt><a href="/id/docs/Learn/JavaScript/Objects/JSON">Bekerja dengan data JSON</a></dt> + <dd>JavaScript Object Notation (JSON) adalah format standar untuk mewakili data terstruktur sebagai objek JavaScript, yang biasanya digunakan untuk mewakili dan mentransmisi data di situs web (misalnya mengirimkan beberapa data dari server ke klien, sehingga dapat ditampilkan di laman web). Kamu akan sering menjumpainya, jadi dalam artikel ini, kami memberikan semua yang kamu butuhkan untuk bekerja dengan JSON menggunakan JavaScript, termasuk mengakses item data dalam objek JSON dan menulis JSONmu sendiri.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Object_building_practice">Latihan membangun objek</a></dt> + <dd>Pada artikel sebelumnya, kita melihat semua teori esensial dari objek JavaScript dan sintak secara detil, sehingga memberi dasar kokoh untuk mulai membangun. Di artikel ini, kita melakukan latihan praktik, memberimu beberapa latihan lagi dalam membangun objek JavaScript sendiri untuk menghasilkan sesuatu yang menyenangkan dan berwarna — beberapa bola pantul berwarna.</dd> +</dl> + +<h2 id="Asesmen">Asesmen</h2> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Menambahkan fitur pada demo bola pantul kita</a></dt> + <dd>Dalam asesmen ini, kamu diharapkan menggunakan demo bola pantul dari artikel sebelumnya sebagai titik awal, dan menambahkan beberapa fitur baru dan menarik.</dd> +</dl> diff --git a/files/id/learn/server-side/django/development_environment/index.html b/files/id/learn/server-side/django/development_environment/index.html new file mode 100644 index 0000000000..79cb6b884a --- /dev/null +++ b/files/id/learn/server-side/django/development_environment/index.html @@ -0,0 +1,423 @@ +--- +title: Setting up a Django development environment +slug: Learn/Server-side/Django/development_environment +translation_of: Learn/Server-side/Django/development_environment +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</div> + +<p class="summary">Sekarang setelah Anda tahu apa gunanya Django, kami akan menunjukkan kepada Anda cara mengatur dan menguji lingkungan pengembangan Django di Windows, Linux (Ubuntu), dan macOS - sistem operasi apa pun yang Anda gunakan, artikel ini akan memberi Anda apa yang Anda butuhkan untuk dapat mulai mengembangkan aplikasi Django.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Pengetahuan dasar tentang penggunaan terminal / baris perintah dan cara menginstal paket perangkat lunak pada sistem operasi komputer pengembangan Anda.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Untuk memiliki lingkungan pengembangan untuk Django (2.0) yang berjalan di komputer Anda.</td> + </tr> + </tbody> +</table> + +<h2 id="Gambaran_lingkungan_pengembangan_Django">Gambaran lingkungan pengembangan Django</h2> + +<p>Django membuatnya sangat mudah untuk mengatur komputer Anda sendiri sehingga Anda dapat mulai mengembangkan aplikasi web. Bagian ini menjelaskan apa yang Anda dapatkan dengan lingkungan pengembangan, dan memberikan gambaran umum dari beberapa opsi pengaturan dan konfigurasi Anda. Sisa dari artikel ini menjelaskan metode yang <em>disarankan</em> untuk menginstal lingkungan pengembangan Django di Ubuntu, macOS, dan Windows, dan bagaimana Anda dapat mengujinya.</p> + +<h3 id="Apa_itu_Django_development_environment">Apa itu Django development environment?</h3> + +<p>The development environment adalah instalasi Django di komputer lokal Anda yang dapat Anda gunakan untuk mengembangkan dan menguji aplikasi Django sebelum menyebarkannya ke lingkungan produksi.</p> + +<p>Alat utama yang disediakan Django sendiri adalah seperangkat skrip Python untuk membuat dan bekerja dengan proyek Django, bersama dengan<em> server web pengembangan</em> sederhana yang dapat Anda gunakan untuk menguji lokal (yaitu pada komputer Anda, bukan pada server web eksternal) Aplikasi web Django di browser web komputer Anda.</p> + +<p>Ada alat periferal lain, yang merupakan bagian dari lingkungan pengembangan, yang tidak akan kita bahas di sini. Ini termasuk hal-hal seperti editor teks atau IDE untuk mengedit kode, dan alat manajemen kontrol sumber seperti Git untuk mengelola berbagai versi kode Anda dengan aman. Kami berasumsi bahwa Anda telah menginstal editor teks.</p> + +<h3 id="Apa_saja_opsi_pengaturan_Django">Apa saja opsi pengaturan Django?</h3> + +<p>Django sangat fleksibel dalam hal bagaimana dan di mana ia dapat diinstal dan dikonfigurasi. Django dapat:</p> + +<ul> + <li>Installed on different operating systems.</li> + <li>Diinstal dari sumber, dari Python Package Index (PyPi) dan dalam banyak kasus dari aplikasi manajer paket komputer host.</li> + <li>Dikonfigurasi untuk menggunakan salah satu dari beberapa basis data, yang mungkin juga perlu diinstal dan dikonfigurasi secara terpisah.</li> + <li>Jalankan di lingkungan sistem utama Python atau dalam lingkungan virtual Python yang terpisah.</li> +</ul> + +<p>Masing-masing opsi ini memerlukan konfigurasi dan pengaturan yang sedikit berbeda. Subbagian berikut menjelaskan beberapa pilihan Anda. Untuk sisa artikel ini, kami akan menunjukkan kepada Anda cara mengatur Django pada sejumlah kecil sistem operasi, dan pengaturan itu akan diasumsikan sepanjang sisa modul ini.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Opsi instalasi lain yang mungkin dicakup dalam dokumentasi resmi Django. Kami menautkan ke <a href="#" id="See_also">appropriate documents below</a>.</p> +</div> + +<h4 id="Sistem_operasi_apa_yang_didukung">Sistem operasi apa yang didukung?</h4> + +<p>Aplikasi web Django dapat dijalankan di hampir semua mesin yang dapat menjalankan bahasa pemrograman Python 3: Windows, macOS, Linux / Unix, Solaris, dan lain-lain. Hampir semua komputer harus memiliki kinerja yang diperlukan untuk menjalankan Django selama pengembangan.</p> + +<p>In this article, we'll provide instructions for Windows, macOS, and Linux/Unix.</p> + +<h4 id="Versi_Python_apa_yang_harus_digunakan">Versi Python apa yang harus digunakan?</h4> + +<p>Kami menyarankan Anda menggunakan versi terbaru yang tersedia - pada saat penulisan ini adalah Python 3.8.2.</p> + +<p>Python 3.5 or later can be used if needed (Python 3.5 support will be dropped in future releases).</p> + +<div class="note"> +<p><strong>Catatan</strong>: Python 2.7 tidak dapat digunakan dengan rilis Django saat ini (The Django 1.11.x series adalah yang terakhir untuk mendukung Python 2.7).</p> +</div> + +<h4 id="Di_mana_kita_bisa_mengunduh_Django">Di mana kita bisa mengunduh Django?</h4> + +<p>Ada tiga tempat untuk mengunduh Django:</p> + +<ul> + <li>Repositori Paket Python (PyPi), menggunakan alat <em>pip</em>. Ini adalah cara terbaik untuk mendapatkan versi stabil terbaru dari Django.</li> + <li>Gunakan versi dari manajer paket komputer Anda. Distribusi Django yang dibundel dengan sistem operasi menawarkan mekanisme instalasi familiar. Namun perlu dicatat bahwa versi paket mungkin sudah cukup lama, dan hanya dapat diinstal ke lingkungan sistem Python (yang mungkin bukan yang Anda inginkan).</li> + <li>Instal dari sumber. Anda bisa mendapatkan dan menginstal versi terkini dari Django dari sumber. Ini tidak disarankan untuk pemula tetapi diperlukan saat Anda siap untuk mulai berkontribusi kembali ke Django itu sendiri.</li> +</ul> + +<p>Artikel ini menunjukkan cara menginstal Django dari PyPi, untuk mendapatkan versi stabil terbaru.</p> + +<h4 id="Database_yang_mana">Database yang mana?</h4> + +<p>Django mendukung empat database utama (PostgreSQL, MySQL, Oracle, dan SQLite), dan ada perpustakaan komunitas yang menyediakan berbagai tingkat dukungan untuk database SQL dan NoSQL populer lainnya. Kami menyarankan Anda memilih database yang sama untuk produksi dan pengembangan (meskipun Django mengabstraksikan banyak perbedaan database menggunakan Object-Relational Mapper (ORM), there are still <a href="https://docs.djangoproject.com/en/2.1/ref/databases/">potential issues</a> that are better to avoid).</p> + +<p>Untuk artikel ini (dan sebagian besar modul ini) kita akan menggunakan database <em>SQLite</em>, yang menyimpan datanya dalam file. SQLite dimaksudkan untuk digunakan sebagai basis data yang ringan dan tidak dapat mendukung konkurensi tingkat tinggi. Namun, ini adalah pilihan yang sangat baik untuk aplikasi yang hanya bersifat baca-saja.</p> + +<div class="note"> +<p><strong>Catatan: </strong>Django dikonfigurasi untuk menggunakan SQLite secara default ketika Anda memulai proyek situs web Anda menggunakan alat standar (<em>django-admin</em>). Ini adalah pilihan yang bagus ketika Anda memulai karena tidak memerlukan konfigurasi atau pengaturan tambahan.</p> +</div> + +<h4 id="Menginstal_seluruh_sistem_atau_dalam_lingkungan_virtual_Python">Menginstal seluruh sistem atau dalam lingkungan virtual Python?</h4> + +<p>Ketika Anda menginstal Python3 Anda mendapatkan lingkungan global tunggal yang dibagikan oleh semua kode Python3. Meskipun Anda dapat menginstal paket Python apa pun yang Anda suka di lingkungan, Anda hanya dapat menginstal satu versi tertentu dari setiap paket pada suatu waktu.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Aplikasi python yang diinstal ke dalam lingkungan global berpotensi dapat saling bertentangan (mis. Jika mereka bergantung pada versi berbeda dari paket yang sama).</p> +</div> + +<p>Jika Anda menginstal Django ke lingkungan default / global maka Anda hanya akan dapat menargetkan satu versi Django di komputer. Ini bisa menjadi masalah jika Anda ingin membuat situs web baru (menggunakan Django versi terbaru) sambil tetap mempertahankan situs web yang bergantung pada versi yang lebih lama.</p> + +<p>Akibatnya, pengembang Python / Django berpengalaman biasanya menjalankan aplikasi Python dalam lingkungan virtual Python independen. Ini memungkinkan beberapa lingkungan Django berbeda di satu komputer. Tim pengembang Django sendiri merekomendasikan agar Anda menggunakan lingkungan virtual Python!</p> + +<p>Modul ini mengasumsikan bahwa Anda telah menginstal Django ke lingkungan virtual, dan kami akan menunjukkan caranya di bawah ini.</p> + +<h2 id="Memasang_Python_3">Memasang Python 3</h2> + +<p>Untuk menggunakan Django Anda harus menginstal Python di sistem operasi Anda. Jika anda menggunakan <em>Python 3</em> maka anda juga akan memerlukan <a href="https://pypi.python.org/pypi">Python Package Index</a> tool — <em>pip3</em> — yang digunakan untuk mengelola (menginstal, memperbarui, dan menghapus) paket / pustaka Python yang digunakan oleh Django dan aplikasi Python Anda yang lain.</p> + +<p>Bagian ini menjelaskan secara singkat bagaimana Anda dapat memeriksa versi Python apa yang ada, dan menginstal versi baru sesuai kebutuhan, untuk Ubuntu Linux 18.04, macOS, dan Windows 10.</p> + +<div class="note"> +<p><strong>Note</strong>: Bergantung pada platform Anda, Anda mungkin juga dapat menginstal Python / pip dari manajer paket sistem operasi sendiri atau melalui mekanisme lain. Untuk sebagian besar platform, Anda dapat mengunduh file instalasi yang diperlukan dari <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> dan menginstalnya menggunakan metode spesifik platform yang sesuai.</p> +</div> + +<h3 id="Ubuntu_18.04">Ubuntu 18.04</h3> + +<p>Ubuntu Linux 18.04 LTS sudah terdapat Python 3.6.6 secara default. Anda dapat melihatnya dengan menjalankan perintah berikut di bash terminal:</p> + +<pre class="brush: bash notranslate"><span style="line-height: 1.5;">python3 -V + Python 3.6.6</span> +</pre> + +<p>Namun, alat Python Package Index yang akan dibutuhkan untuk dapat memasang packages Python 3 (termasuk Django) tidak tersedia secara default. Jadi, Anda dapat memasang pip3 di bash terminal menggunakan:</p> + +<pre class="brush: bash notranslate">sudo apt install python3-pip +</pre> + +<h3 id="macOS">macOS</h3> + +<p>macOS "El Capitan" dan versi terbaru yang lainnya tidak tersedia Python 3 didalamnya. Anda dapat melihatnya dengan menjalankan perintah di bash terminal:</p> + +<pre class="brush: bash notranslate"><span style="line-height: 1.5;">python3 -V + </span>-bash: python3: command not found</pre> + +<p>Anda dapat dengan mudah memasang Python 3 (bersamaan dengan pip3) di<a href="https://www.python.org/"> python.org</a>:</p> + +<ol> + <li>Download installer yang dibutuhkan: + <ol> + <li>Pergi ke <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> + <li>Pilih tombol <strong>Download Python 3.8.2</strong> (versi minor yang tepat mungkin berbeda)</li> + </ol> + </li> + <li>Cari file tersebut dengan menggunakan <em>Finder, </em>double-click file tersebut. Ikuti perintah pada proses instalasi.</li> +</ol> + +<p>Sekarang Anda dapat mengonfirmasi keberhasilan instalasi dengan melihat versi Python 3 seperti yang ditunjukkan dibawah:</p> + +<pre class="brush: bash notranslate"><span style="line-height: 1.5;">python3 -V + Python 3.8.2</span> +</pre> + +<p>Anda dapat pula mengecek bahwa <em>pip3 </em>sudah terpasang dengan melihat list packages yang tersedia:</p> + +<pre class="brush: bash notranslate">pip3 list</pre> + +<h3 id="Windows_10">Windows 10</h3> + +<p>Windows doesn't include Python by default, but you can easily install it (along with the <em>pip3</em> tool) from<a href="https://www.python.org/"> python.org</a>:</p> + +<ol> + <li>Download the required installer: + <ol> + <li>Go to <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> + <li>Select the <strong>Download Python 3.8.2</strong> button (the exact minor version number may differ).</li> + </ol> + </li> + <li>Instal Python dengan mengklik dua kali pada file yang diunduh dan mengikuti petunjuk instalasi</li> + <li>Pastikan untuk menandai kotak yang berlabel "Add Python to PATH"Pastikan untuk menandai kotak yang berlabel</li> +</ol> + +<p>You can then verify that Python 3 was installed by entering the following text into the command prompt:</p> + +<pre class="brush: bash notranslate"><span style="line-height: 1.5;">py -3 -V + Python 3.8.2</span> +</pre> + +<p>The Windows installer incorporates <em>pip3</em> (the Python package manager) by default. You can list installed packages as shown:</p> + +<pre class="brush: bash notranslate"><span style="line-height: 1.5;">pip3 list</span> +</pre> + +<div class="note"> +<p><strong>Note</strong>: Pemasang harus mengatur semua yang Anda butuhkan agar perintah di atas berfungsi. Namun jika Anda mendapatkan pesan bahwa Python tidak dapat ditemukan, Anda mungkin lupa menambahkannya ke jalur sistem Anda. Anda dapat melakukan ini dengan menjalankan penginstal lagi, memilih "Modify", dan centang kotak berlabel "Add Python to environment variables" di halaman kedua.</p> +</div> + +<h2 id="Using_Django_inside_a_Python_virtual_environment">Using Django inside a Python virtual environment</h2> + +<p>Perpustakaan yang akan kami gunakan untuk membuat lingkungan virtual kami adalah <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux and macOS) dan <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), yang pada gilirannya keduanya menggunakan alat virtualenv. The wrapper tools menciptakan antarmuka yang konsisten untuk mengelola antarmuka di semua platform.</p> + +<h3 id="Menginstal_perangkat_lunak_lingkungan_virtual">Menginstal perangkat lunak lingkungan virtual</h3> + +<h4 id="Ubuntu_virtual_environment_setup">Ubuntu virtual environment setup</h4> + +<p>Setelah menginstal Python dan pip Anda dapat menginstal <em>virtualenvwrapper</em> (which includes <em>virtualenv</em>). Panduan instalasi resmi dapat ditemukan <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">here</a>, atau ikuti instruksi di bawah ini.</p> + +<p>Install the tool using <em>pip3</em>:</p> + +<pre class="brush: bash notranslate"><code>sudo pip3 install virtualenvwrapper</code></pre> + +<p>Kemudian tambahkan baris berikut di akhir file startup shell Anda (ini adalah nama file tersembunyi <strong>.bashrc</strong> di direktori home Anda). Ini mengatur lokasi di mana lingkungan virtual seharusnya hidup, lokasi direktori proyek pengembangan Anda, dan lokasi skrip yang diinstal dengan paket ini:</p> + +<pre class="brush: bash notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 +export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 ' +export PROJECT_HOME=$HOME/Devel +source /usr/local/bin/virtualenvwrapper.sh</code> +</pre> + +<div class="note"> +<p><strong>Note</strong>: The <code>VIRTUALENVWRAPPER_PYTHON</code> and <code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS </code>variables point to the normal installation location for Python3, and <code>source /usr/local/bin/virtualenvwrapper.sh</code> points to the normal location of the <code>virtualenvwrapper.sh</code> script. If the <em>virtualenv</em> doesn't work when you test it, one thing to check is that Python and the script are in the expected location (and then change the startup file appropriately).<br> + <br> + You can find the correct locations for your system using the commands <code>which virtualenvwrapper.sh</code> and <code>which python3</code>.</p> +</div> + +<p>Kemudian muat ulang file startup dengan menjalankan perintah berikut di terminal:</p> + +<pre class="brush: bash notranslate"><code>source ~/.bashrc</code></pre> + +<p>Pada titik ini Anda akan melihat banyak skrip dijalankan seperti yang ditunjukkan di bawah ini:</p> + +<pre class="brush: bash notranslate"><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject +... +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</code> +</pre> + +<p>Sekarang Anda dapat membuat lingkungan virtual baru dengan perintah <code>mkvirtualenv</code> .</p> + +<h4 id="macOS_virtual_environment_setup">macOS virtual environment setup</h4> + +<p>Pengaturan <em>virtualenvwrapper</em> pada macOS hampir persis sama dengan di Ubuntu (sekali lagi, Anda dapat mengikuti instruksi dari <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">official installation guide</a> atau di bawah). </p> + +<p>Install <em>virtualenvwrapper</em> (and bundling <em>virtualenv</em>) using <em>pip</em> as shown.</p> + +<pre class="brush: bash notranslate"><code>sudo pip3 install virtualenvwrapper</code></pre> + +<p>Then add the following lines to the end of your shell startup file.</p> + +<pre class="brush: bash notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 +export PROJECT_HOME=$HOME/Devel +source /usr/local/bin/virtualenvwrapper.sh</code></pre> + +<div class="note"> +<p><strong>Note</strong>: The <code>VIRTUALENVWRAPPER_PYTHON</code> variable points to the normal installation location for Python3, and <code>source /usr/local/bin/virtualenvwrapper.sh</code> points to the normal location of the <code>virtualenvwrapper.sh</code> script. If the <em>virtualenv</em> doesn't work when you test it, one thing to check is that Python and the script are in the expected location (and then change the startup file appropriately).</p> + +<p>For example, one installation test on macOS ended up with the following lines being necessary in the startup file:</p> + +<pre class="brush: bash notranslate">export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3 +export PROJECT_HOME=$HOME/Devel +source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh</pre> + +<p>You can find the correct locations for your system using the commands <code>which virtualenvwrapper.sh</code> and <code>which python3</code>.</p> +</div> + +<p>These are the same lines as for Ubuntu, but the startup file is the differently named hidden file <strong>.bash_profile</strong> in your home directory.</p> + +<div class="note"> +<p><strong>Note</strong>: If you can't find <strong>.bash_profile</strong> to edit in the finder, you can also open this in the terminal using nano.</p> + +<p>The commands look something like this:</p> + +<pre class="notranslate"><code>cd ~ # Navigate to my home directory +ls -la #List the content of the directory. YOu should see .bash_profile +nano .bash_profile # Open the file in the nano text editor, within the terminal +# Scroll to the end of the file, and copy in the lines above +# Use Ctrl+X to exit nano, Choose Y to save the file.</code> +</pre> +</div> + +<p>Then reload the startup file by making the following call in the terminal:</p> + +<pre class="brush: bash notranslate"><code>source ~/.bash_profile</code></pre> + +<p>At this point, you may see a bunch of scripts being run (the same scripts as for the Ubuntu installation). You should now be able to create a new virtual environment with the <code>mkvirtualenv</code> command.</p> + +<h4 id="Windows_10_virtual_environment_setup">Windows 10 virtual environment setup</h4> + +<p>Installing <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> is even simpler than setting up <em>virtualenvwrapper</em> because you don't need to configure where the tool stores virtual environment information (there is a default value). All you need to do is run the following command in the command prompt:</p> + +<pre class="notranslate"><code>pip3 install virtualenvwrapper-win</code></pre> + +<p>Now you can create a new virtual environment with the <code>mkvirtualenv</code> command</p> + +<h3 id="Creating_a_virtual_environment">Creating a virtual environment</h3> + +<p>Setelah Anda menginstal <em>virtualenvwrapper</em> or <em>virtualenvwrapper-win</em> then working with virtual environments is very similar on all platforms.</p> + +<p>Sekarang anda dapat membuat lingkungan baru dengan perintah <code>mkvirtualenv</code> .Saat perintah ini berjalan, Anda akan melihat lingkungan sedang disiapkan (apa yang Anda lihat sedikit <em>platform-specific</em>). Ketika perintah selesai lingkungan virtual baru akan aktif - Anda dapat melihat ini karena awal prompt akan menjadi nama lingkungan dalam tanda kurung (di bawah ini kami menunjukkan ini untuk Ubuntu, tetapi baris terakhir mirip untuk Windows / macOS) .</p> + +<pre class="notranslate"><code>$ mkvirtualenv my_django_environment + +Running virtualenv with interpreter /usr/bin/python3 +... +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details +(my_django_environment) ubuntu@ubuntu:~$</code> +</pre> + +<p>Sekarang Anda berada di dalam lingkungan virtual Anda dapat menginstal Django dan mulai mengembangkan.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Mulai sekarang dalam artikel ini (dan memang modul) asumsikan bahwa setiap perintah dijalankan dalam lingkungan virtual Python seperti yang kita atur di atas.</p> +</div> + +<h3 id="Menggunakan_lingkungan_virtual">Menggunakan lingkungan virtual</h3> + +<p>Hanya ada beberapa perintah berguna lainnya yang harus Anda ketahui (ada lebih banyak dalam dokumentasi alat, tetapi ini adalah yang akan Anda gunakan secara teratur):</p> + +<ul> + <li><code>deactivate</code> — Keluar dari lingkungan virtual Python saat ini</li> + <li><code>workon</code> — Daftar lingkungan virtual yang tersedia</li> + <li><code>workon name_of_environment</code> — Aktifkan lingkungan virtual Python yang ditentukan</li> + <li><code>rmvirtualenv name_of_environment</code> — Hapus lingkungan yang ditentukan.</li> +</ul> + +<h2 id="Installing_Django">Installing Django</h2> + +<p>Setelah Anda membuat lingkungan virtual, dan memanggil <code>workon</code> untuk memasukkannya, kamu dapat menggunakan <em>pip3 </em>untuk menginstal Django. </p> + +<pre class="brush: bash notranslate">pip3 install django~=2.2</pre> + +<p>Anda dapat menguji bahwa Django diinstal dengan menjalankan perintah berikut (ini hanya menguji apakah Python dapat menemukan modul Django):Anda dapat menguji bahwa Django diinstal dengan menjalankan perintah berikut (ini hanya menguji apakah Python dapat menemukan modul Django):</p> + +<pre class="brush: bash notranslate"># Linux/macOS +python3 -m django --version + 2.2.12 + +# Windows +py -3 -m django --version + 2.2.12 +</pre> + +<div class="note"> +<p><strong>Catatan</strong>: Jika perintah Windows di atas tidak menampilkan modul django, cobalah:</p> + +<pre class="brush: bash notranslate">py -m django --version</pre> + +<p>Pada Windows, skrip <em>Python 3</em> diluncurkan dengan mengawali perintah dengan <code>py -3</code>, meskipun ini dapat bervariasi tergantung pada instalasi spesifikasi anda. Coba hilangkan <code>-3 </code> jika anda menemukan masalah dengan perintah, Di Linux / macOS, perintahnya adalah <code>python3.</code></p> +</div> + +<div class="warning"> +<p><strong>Penting</strong>: Sisa <strong>modul ini </strong>menggunakan perintah <em>Linux</em> untuk menjalankan Python 3 (<code>python3</code>) . Jika anda bekerja pada <em>Windows </em>cukup ganti awalan ini dengan: <code>py -3</code></p> +</div> + +<h2 id="Menguji_instalasi_Anda">Menguji instalasi Anda</h2> + +<p>Tes di atas berfungsi, tetapi tidak terlalu menyenangkan. Tes yang lebih menarik adalah membuat proyek kerangka dan melihatnya bekerja. Untuk melakukan ini, pertama-tama navigasikan di command prompt / terminal Anda ke tempat Anda ingin menyimpan aplikasi Django Anda. Buat folder untuk situs pengujian Anda dan navigasikan ke dalamnya.</p> + +<pre class="brush: bash notranslate">mkdir django_test +cd django_test +</pre> + +<p>Anda kemudian dapat membuat situs kerangka baru bernama "<em>mytestsite</em>" menggunakan alat <strong>django-admin</strong> seperti yang ditunjukkan. Setelah membuat situs, Anda dapat menavigasi ke folder tempat Anda akan menemukan skrip utama untuk mengelola proyek, bernama <strong>manage.py</strong>.</p> + +<pre class="brush: bash notranslate">django-admin startproject mytestsite +cd mytestsite</pre> + +<p>Kita dapat menjalankan <em>development web server</em> dari dalam folder ini menggunakan <strong>manage.py</strong> dan perintah <code>runserver</code> , seperti yang ditunjukkan.</p> + +<pre class="brush: bash notranslate">$ python3 manage.py runserver +Performing system checks... + +System check identified no issues (0 silenced). + +You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions. +Run 'python manage.py migrate' to apply them. + +December 16, 2018 - 07:06:30 +Django version 2.2.12, using settings 'mytestsite.settings' +Starting development server at http://127.0.0.1:8000/ +Quit the server with CONTROL-C. +</pre> + +<div class="note"> +<p><strong>Catatan: </strong>Perintah di atas menunjukkan perintah Linux / macOS. Anda dapat mengabaikan peringatan tentang "15 migrasi yang belum diterapkan" pada titik ini!</p> +</div> + +<p>Setelah server berjalan, Anda dapat melihat situs dengan menavigasi ke URL berikut di browser web lokal Anda:<code>http://127.0.0.1:8000/</code>. Anda akan melihat situs yang terlihat seperti ini:<br> + <img alt="Django Skeleton App Homepage - Django 2.0" src="https://mdn.mozillademos.org/files/16288/Django_Skeleton_Website_Homepage_2_1.png" style="height: 714px; width: 806px;"></p> + +<ul> +</ul> + +<h2 id="Ringkasan">Ringkasan</h2> + +<p>Anda sekarang memiliki lingkungan pengembangan Django dan berjalan di komputer Anda.</p> + +<p>Di bagian pengujian Anda juga melihat secara singkat bagaimana kami dapat membuat situs web Django baru menggunakan <code>django-admin startproject</code>, dan jalankan di browser Anda menggunakan server web pengembangan (<code>python3 manage.py runserver</code>). Pada artikel selanjutnya, kami memperluas proses ini, membangun aplikasi web yang sederhana namun lengkap.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/intro/install/">Quick Install Guide</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/install/">How to install Django — Complete guide</a> (Django docs) - termasuk informasi tentang cara menghapus Django</li> + <li><a href="https://docs.djangoproject.com/en/2.1/howto/windows/">How to install Django on Windows</a> (Django docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</p> + +<h2 id="Dalam_modul_ini">Dalam modul ini</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/id/learn/server-side/django/index.html b/files/id/learn/server-side/django/index.html new file mode 100644 index 0000000000..c95aa6f162 --- /dev/null +++ b/files/id/learn/server-side/django/index.html @@ -0,0 +1,67 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - CodingScripting + - Pemula + - Python + - Server-side programming + - belajar + - django +translation_of: Learn/Server-side/Django +--- +<div>{{LearnSidebar}}</div> + +<p>Django merupakan sebuah web framework server-side yang sangat populer dan unggul. Modul ini menunjukan mengapa Django adalah salah satu web server frameworks yang paling populer, bagaimana mempersiapkan sebuah lingkungan pengembangan, dan bagaimana memulai menggunakan Django untuk membuat aplikasi web milik Anda.</p> + +<h2 id="Persyaratan">Persyaratan</h2> + +<p>Sebelum memulai modul ini, Anda tidak perlu memiliki pengetahuan tentang Django. Anda perlu mengetahui apa itu server-side web programming dan web frameworks, idealnya dengan membaca topik di modul <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>.</p> + +<p>Pengetahuan umum tentang konsep pemrograman dan <a href="/en-US/docs/Glossary/Python">Python</a> sangat direkomendasikan, tetapi tidak penting untuk memahami konsep inti.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Python adalah salah satu bahasa pemrograman termudah bagi pemula untuk dibaca dan dimengerti. Disarankan, jika Anda ingin memahami modul ini dengan lebih baik maka ada banyak buku dan tutorial gratis yang tersedia di internet (programmers baru barangkali ingin memeriksa halaman <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python untuk Non Programmers</a> di wiki python.org).</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Pengenalan Django</a></dt> + <dd>Dalam artikel pertama Django kita menjawab pertanyaan "Apa itu Django?" dan memberi Anda sebuah gambaran tentang apa yang membuat web framework ini spesial. Kita akan menjelaskan mengenai fitur utama-nya, termasuk beberapa fungsi lanjutan yang tidak dapat kami bahas secara rinci dalam modul ini. Kita juga akan menunjukan Anda beberapa bagian utama aplikasi Django, untuk memberi gambaran tentang apa yang dapat dilakukan sebelum Anda memasangnya dan mulai bermain.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Menyiapkan lingkungan pengembangan Django</a></dt> + <dd>Sekarang Anda sudah tahu apa itu Django, Kita akan menunjukan Anda bagaimana untuk mempersiapkan dan menguji sebuah lingkungan pengembangan Django pada Windows, Linux (Ubuntu), dan Mac OS X -- apapun sistem operasi yang Anda gunakan, artikel ini akan memberi apa yang Anda inginkan untuk dapat mulai mengembangkan aplikasi Django.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Situs Perpustakaan Lokal</a></dt> + <dd>Artikel pertama dalam rangkaian tutorial praktis kami menjelaskan apa yang akan Anda pelajari, dan memberikan gambaran umum tentang "perpustakaan lokal", contoh situs yang akan Kita kerjakan dan kembangkan di artikel berikutnya.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Membuat kerangka website</a></dt> + <dd>Artikel ini menjelaskan bagaimana Anda dapat membuat sebuah "skeleton (kerangka)" website sebagai dasar, yang kemudian dapat Anda gunakan untuk diisi dengan pengaturan situs, <strong>urls</strong>, <strong>models</strong>, <strong>views</strong>, dan <strong>templates</strong>.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Menggunakan Models</a></dt> + <dd>Artikel ini menunjukan bagaimana untuk mendefinisikan models untuk website <em>LocalLibrary</em> — models mewakili sebuah struktur data yang ingin disimpan dalam data aplikasi kita, dan juga memperbolehkan Django untuk menyimpan data didalam sebuah database untuk kita(dan memodifikasinya nanti). Hal ini menjelaskan apa itu model, bagaimana hal itu di deklarasikan, dan beberapa jenis field (attribute suatu data) utama.Hal ini juga secara singkat menunjukkan beberapa cara utama untuk mengakses data model.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin situs</a></dt> + <dd>Sekarang setelah kita membuat models untuk website <em>LocalLibrary</em>. Kita akan mengunakan situs Django Admin untuk menambahkan beberapa data buku "sebenarnya". Pertama Kita akan menunjukkan Anda bagaimana cara mendaftarkan models dengan situs admin (admin site), lalu kita akan menunjukkan cara masuk dan membuat beberapa data. Pada akhirnya Kita menunjukkan beberapa cara untuk lebih meningkatkan penyajian situs admin.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Membuat home page Kita</a></dt> + <dd>Kita telah mengetahui bahwa untuk menambahkan sebuah kode untuk menampilkan halaman penuh pertama kita -- sebuah homepage untuk <em>Locallibrary </em>yang menunjukkan berapa banyak record yang Kita miliki dari masing-masing tipe model dan menyediakan link navigasi sidebar ke halaman Kita yang lain. Sepanjang jalan kita akan mendapatkan pengalaman praktek dalam menulis URL maps dan views, mendapatkan records dari sebuah database, dan menggunakan templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: List umum dan detail views</a></dt> + <dd>Tutorial ini mengembangkan website <em>Locallibrary</em> Kita, menambahkan list dan detail untuk books dan authors. Di sini kita akan belajar tentang <em>generic class-based views (sebuah tampilan berbasis class)</em>, dan menampilkan bagaimana mereka dapat mengurangi jumlah kode yang harus Anda tulis untuk kasus penggunaan umum. Kita juga akan membahas URL secara lebih rinci, menunjukkan bagaimana melakukan pencocokan pola dasar.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt> + <dd>Tutorial ini mengembangkan website <em>LocalLibrary</em> kita, menambahkan session-based visit-counter ke sebuah home page. Ini adalah contoh yang relatif sederhana, namun ini menunjukkan bagaimana Anda dapat menggunakan sesi framework untuk menyediakan perilaku konsisten bagi pengguna anonymous(anonim) di situs Anda sendiri.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and perizinan</a></dt> + <dd>Pada tutorial ini Kami akan menunjukan Anda bagaimana untuk memperbolehkan pengguna untuk masuk ke situs Anda dengan akun mereka, dan bagaimana mengatur apa yang dapat mereka lakukan dan melihat berdasarkan pada apakah <span class="short_text" id="result_box" lang="id"><span>mereka login dan <em>perizinan</em> mereka</span></span>. Sebagai bagian dari demonstrasi ini, kita akan memperluas website <em>LocalLibrary</em>, menambahkan halaman masuk dan logout, dan halaman pengguna dan staf untuk melihat buku-buku yang telah dipinjam.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Bekerja dengan forms</a></dt> + <dd>Dalam tutorial ini Kami akan menunjukkan cara bekerja dengan <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> di Django, dan khusunya cara termudah untuk menulis Forms untuk membuat, memperbaru, dan menghapus model Instances. Sebagai bagian dari demonstrasi ini, Kita akan memperluas website <em>LocalLibrary</em> sehingga pustakawan dapat memperbarui buku, dan membuat, memperbarui, dan menghapus penulis menggunakan formulir kita sendir(bukan menggunakan aplikasi admin).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Menguji aplikasi web Django</a></dt> + <dd>Seiring berkembangnya website mereka menjadi lebih sulit untuk dilakukan pengujian secara manual -- bukan hanya karena adanya lebih banyak tes, namun, karena interaksi antar komponen menjadi lebih kompleks, perubahan kecil di satu area dapat memerlukan banyak tes tambahan untuk memverifikasi pengaruhnya terhadap area lain. Salah satu cara untuk mengurangi masalah ini adalah dengan menulis tes secara otomatis, yang dapat dengan mudah dan handal dijalankan setiap kali Anda melakukan perubahan. Tutorial ini menunjukkan bagaimana mengotomatisasi <em>pengujian unit</em> dari situs Anda menggunakan Django's test framework.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Meluncurkan Django untuk produksi</a></dt> + <dd>Sekarang Anda telah membuat (dan menguji) website <em>LocalLibrary</em> yang hebat, Anda akan menginstallnya pada public web server sehingga bisa diakses oleh staf perpustakaan dan anggota melalui internet. Artikel ini memberikan gambaran umum tentang bagaimana Anda bisa menemukan host untuk menyebarkan situs web Anda, dan apa yang perlu Anda lakukan agar situs Anda siap masuk produksi.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Keamanan aplikasi web Django</a></dt> + <dd>Melindungi data pengguna merupakan bagian penting dari setiap desain situs web. Kita sebelumnya menjelaskan beberapa ancaman keamanan yang lebih umum dalam artikel <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — artikel ini memberikan demonstrasi praktis tentang bagaimana perlindungan built-in (yang secara default terinstall) Django menangani ancaman tersebut.</dd> +</dl> + +<h2 id="Penilaian">Penilaian</h2> + +<p>Penilaian berikut akan menguji pemahaman Anda tentang bagaimana membuat situs web menggunakan Django, seperti yang dijelaskan dalam panduan yang tercantum di atas.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt> + <dd>Dalam penilaian ini Anda akan menggunakan beberapa pengetahuan yang telah Anda pelajari dari modul ini untuk membuat blog Anda sendiri.</dd> +</dl> diff --git a/files/id/learn/server-side/django/tutorial_local_library_website/index.html b/files/id/learn/server-side/django/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..21ed6a040e --- /dev/null +++ b/files/id/learn/server-side/django/tutorial_local_library_website/index.html @@ -0,0 +1,90 @@ +--- +title: 'Django Tutorial: The Local Library website' +slug: Learn/Server-side/Django/Tutorial_local_library_website +translation_of: Learn/Server-side/Django/Tutorial_local_library_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</div> + +<div>Pada artikel pertama ini dalam seri latihan praktek menjelaskan apa yang akan Anda pelajari, dan menyediakan sebuah gambaran mengenai percobaan website "local library" Kita akan bekerja dan terus berkembang pada artikel-artikel selanjuntya.</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Read the <a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django Introduction</a>. For the following articles you'll also need to have <a href="/en-US/docs/Learn/Server-side/Django/development_environment">set up a Django development environment</a>. </td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To introduce the example application used in this tutorial, and allow readers to understand what topics will be covered. </td> + </tr> + </tbody> +</table> + +<h2 id="Gambaran">Gambaran</h2> + +<p>Selamat datang di tutorial django MDN "Local Library", dimana kita akan mengembangakn sebuah website yang memungkinkan untuk mengatur sebuah katalog untuk perpustakaan lokal. </p> + +<p>Pada seri ini Anda akan:</p> + +<ul> + <li>Menggunakan alat Django untuk membuat sebuah kerangka website dan aplikasi.</li> + <li>Memulai dan memberhentikan development server.</li> + <li>Membuat models untuk mempresentasikan data aplikasi Anda.</li> + <li>Menggunakan Django admin site untuk menempati data situs Anda.</li> + <li>Membuat views untuk mengembalikan suatu data yang spesifik sebagai tanggapan atas permintaan-permintaan yang berbeda, dan templates untuk me-render data tersebut ke HTML untuk ditampilkan kedalam browser.</li> + <li>Membuat mappers untuk menyatukan URL yang berbeda dengan spesifik views.</li> + <li>Menambahkan user authorization dan sessions untuk mengontrol perilaku dan akses.</li> + <li>Bekerja dengan forms.</li> + <li>Menulis test code untuk app Anda.</li> + <li>Menggunakan Django security secara efektif.</li> + <li>Men-deploy aplikasi anda kedalam produksi</li> +</ul> + +<p>Anda sudah belajar mengenai beberapa topik-topik yang akan dibahas. Pada akhir seri tutorial Anda seharusnya cukup tahu untuk mengembangkan aplikasi simple Django secara pribadi.</p> + +<h2 id="The_LocalLibrary_website">The LocalLibrary website</h2> + +<p><em>LocalLibrary</em> is the name of the website that we'll create and evolve over the course of this series of tutorials. As you'd expect, the purpose of the website is to provide an online catalog for a small local library, where users can browse available books and manage their accounts.</p> + +<p>This example has been carefully chosen because it can scale to show as much or as little detail as we need, and can be used to show off almost any Django feature. More importantly, it allows us to provide a <em>guided</em> path through the most important functionality in the Django web framework:</p> + +<ul> + <li>In the first few tutorial articles we will define a simple <em>browse-only </em>library that library members can use to find out what books are available. This allows us to explore the operations that are common to almost every website: reading and displaying content from a database.</li> + <li>As we progress, the library example naturally extends to demonstrate more advanced Django features. For example we can extend the library to allow users to reserve books, and use this to demonstrate how to use forms, and support user authentication.</li> +</ul> + +<p>Even though this is a very extensible example, it's called <em><strong>Local</strong>Library</em> for a reason — we're hoping to show the minimum information that will help you get up and running with Django quickly. As a result we'll store information about books, copies of books, authors and other key information. We won't however be storing information about other items a library might store, or provide the infrastructure needed to support multiple library sites or other "big library" features. </p> + +<h2 id="Im_stuck_where_can_I_get_the_source">I'm stuck, where can I get the source?</h2> + +<p>As you work through the tutorial we'll provide the appropriate code snippets for you to copy and paste at each point, and there will be other code that we hope you'll extend yourself (with some guidance).</p> + +<p>If you get stuck, you can find the fully developed version of the website <a href="https://github.com/mdn/django-locallibrary-tutorial">on Github here</a>.</p> + +<h2 id="Summary">Summary</h2> + +<p>Now that you know a bit more about the <em>LocalLibrary</em> website and what you're going to learn, it's time to start creating a <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">skeleton project</a> to contain our example.</p> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/id/learn/server-side/first_steps/index.html b/files/id/learn/server-side/first_steps/index.html new file mode 100644 index 0000000000..b085099081 --- /dev/null +++ b/files/id/learn/server-side/first_steps/index.html @@ -0,0 +1,39 @@ +--- +title: Server-side website programming first steps +slug: Learn/Server-side/First_steps +translation_of: Learn/Server-side/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p>Pada module server-side ini, akan menjawab beberapa pertanyaan mendasar mengenai pemrograman server-side--, apa itu ?, apa bedanya dengan pemrograman client-side ?, kenapa pemmogrmaan ini sangat berguna. Kemudian akan diberikan penjelasan singkat dari beberapa framework pemrograman server-side populer, bersamaan dengan petunjuk bagaimana memilih framework yang paling cocok untuk website Anda. </p> + +<h2 id="Prasyarat">Prasyarat</h2> + +<p>Sebelum memulai modul ini, Anda tidak harus memiliki pengetahuan apapun mengenai pemgrograman server-side, atau jenis pemrograman lainnya.</p> + +<p>Anda perlu untuk mengeti "bagaimana web bekerja". Kami sarankan Anda baca terlebih dahulu topik - topik berikut:</p> + +<ul> + <li>Apa itu web server</li> + <li>Apa software yang butuhkan untuk membuat sebuah website ?</li> + <li>Bagaimana cara mengupload file ke web server.</li> +</ul> + +<p>Dengan pemahaman dasar diatas, Anda akan siap untuk belajar dengan modul ini. </p> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt>Pengenalan web<a href="/en-US/docs/Learn/Server-side/First_steps/Introduction"> server side</a></dt> + <dd>Welcome to the MDN beginner's server-side programming course! In this first article we look at Server-side programming from a high level, answering questions such as "what is it?", "how does it differ from client-side programming?", and "why it is so useful?". After reading this article you'll understand the additional power available to websites through server-side coding.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></dt> + <dd>Now that you know the purpose and potential benefits of server-side programming we're going to examine in detail what happens when a server receives a "dynamic request" from a browser. As most website server-side code handles requests and responses in similar ways, this will help you understand what you need to do when writing your own code.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></dt> + <dd>The last article showed you what a server-side web application needs to do in order to respond to requests from a web browser. Now we show how web frameworks can simplify these tasks, and help you choose the right framework for your first server-side web application.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></dt> + <dd>Website security requires vigilance in all aspects of website design and usage. This introductory article won't make you a website security guru, but it will help you understand the first important steps you can take to harden your web application against the most common threats.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>This "overview" module doesn't have any assessement because we haven't yet shown you any code. We do hope at this point you have a good understanding of what sorts of functionality you can deliver using server-side programming and you have made a decision about what server-side web framework you will use to create your first website.</p> diff --git a/files/id/learn/server-side/index.html b/files/id/learn/server-side/index.html new file mode 100644 index 0000000000..b497257371 --- /dev/null +++ b/files/id/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +title: Server-side website programming +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p> + +<p>Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.</p> + +<p>In the modern world of web development, learning about server-side development is highly recommended.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p> + +<p>A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p> + +<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> +</ul> + +<p>With that basic understanding you'll be ready to work your way through the modules in this section. </p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . </p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> + <dd>This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt> + <dd>This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.</dd> +</dl> diff --git a/files/id/learn/web_mechanics/index.html b/files/id/learn/web_mechanics/index.html new file mode 100644 index 0000000000..c1cb59bd12 --- /dev/null +++ b/files/id/learn/web_mechanics/index.html @@ -0,0 +1,29 @@ +--- +title: Mekanisme Web +slug: Learn/Web_Mechanics +tags: + - MekanismeWeb + - Pemula +translation_of: Learn/Common_questions +--- +<p>Kompetensi ini merepresentasikan pemahaman Anda mengenai ekosistem web. Kami pecah pengetahuan yang Anda butuhkan kedalam bentuk yang lebih kecil, yakni detil keahliannya.</p> + +<p>{{NoteStart}}<em>Mekanisme web</em> berfokus pada sisi fungsional dari ekosistem web, bukan pada sisi teknis, dimana pembahasannya berada pada <em><a href="/en-US/docs/Learn/skills/Infrastructure">Infrastruktur</a>.</em>{{NoteEnd}}</p> + +<h2 id="Keahlian_Dasar">Keahlian Dasar</h2> + +<p>Mulailah dari sini jika Anda belum akrab dengan web. Kami juga menyarankan Anda untuk mengunjungi ke halaman <a href="/en-US/docs/Glossary">glosarium </a>kami untuk bantuan dalam memahami berbagai jargon yang ada pada web.</p> + +<p>{{ArticlesByTag({"tags":["WebMechanics","Beginner"]})}}</p> + +<h2 id="Keahlian_Menengah">Keahlian Menengah</h2> + +<p>Jika Anda sudah pernah mengenal web, di sini ada beberapa detail yang dapat Anda pelajari lebih lanjut:</p> + +<p>{{ArticlesByTag({"tags":["WebMechanics","Intermediate"]})}}</p> + +<h2 id="Keahlian_Lanjutan">Keahlian Lanjutan</h2> + +<p>Jika Anda adalah seorang pembuat web yang berpengalaman, Anda mungkin tertarik untuk mempelajari keahlian yang luar biasa.</p> + +<p>{{ArticlesByTag({"tags":["WebMechanics","Advanced"]})}}</p> |