initial commit

author: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:42:17 -0500
committer: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:42:17 -0500
commit: da78a9e329e272dedb2400b79a3bdeebff387d47 (patch)
tree: e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ms
parent: 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff)
download: translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz
translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2
translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip
40 files changed, 3465 insertions, 0 deletions
diff --git a/files/ms/_redirects.txt b/files/ms/_redirects.txt
new file mode 100644
index 0000000000..9b0dd72bf2
--- /dev/null
+++ b/files/ms/_redirects.txt
@@ -0,0 +1,6 @@
+# FROM-URL	TO-URL
+/ms/docs/HTML-840092-dup	/ms/docs/HTML
+/ms/docs/HTML/Borang	/ms/docs/Learn/HTML/Forms
+/ms/docs/MDN/Contribute/Howto/Bagaimana	/ms/docs/MDN/Contribute/Howto/Bagaimana_membuat_akaun_MDN
+/ms/docs/MDN/Getting_started	/ms/docs/MDN/Contribute/Getting_started
+/ms/docs/en	/en-US/
diff --git a/files/ms/_wikihistory.json b/files/ms/_wikihistory.json
new file mode 100644
index 0000000000..a68dfc2405
--- /dev/null
+++ b/files/ms/_wikihistory.json
@@ -0,0 +1,233 @@
+{
+  "Glossary": {
+    "modified": "2020-10-07T11:12:28.542Z",
+    "contributors": [
+      "peterbe",
+      "SphinxKnight",
+      "MOMOX9",
+      "wbamberg",
+      "david_ross"
+    ]
+  },
+  "Glossary/AJAX": {
+    "modified": "2019-05-09T03:04:17.498Z",
+    "contributors": [
+      "SphinxKnight",
+      "MOMOX9",
+      "smhaziq"
+    ]
+  },
+  "HTML": {
+    "modified": "2019-03-23T23:34:09.303Z",
+    "contributors": [
+      "akifrabbani",
+      "haboqueferus",
+      "FredB"
+    ]
+  },
+  "HTML/Canvas": {
+    "modified": "2019-03-23T23:34:10.539Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "HTML/Canvas/Melukis_Grafik_dengan_Canvas": {
+    "modified": "2019-03-23T23:34:10.144Z",
+    "contributors": [
+      "haboqueferus"
+    ]
+  },
+  "HTML/Elemen": {
+    "modified": "2019-03-23T23:34:02.244Z",
+    "contributors": [
+      "haboqueferus"
+    ]
+  },
+  "HTML/Tip_menulis_LamanHTML_dengan_pemuatan_pantas": {
+    "modified": "2020-07-16T22:22:33.228Z",
+    "contributors": [
+      "haboqueferus"
+    ]
+  },
+  "Learn": {
+    "modified": "2020-07-16T22:43:44.802Z",
+    "contributors": [
+      "SphinxKnight",
+      "adamika",
+      "arerifx",
+      "jsx"
+    ]
+  },
+  "Learn/Accessibility": {
+    "modified": "2020-12-06T08:33:55.228Z",
+    "contributors": [
+      "hadleyel"
+    ]
+  },
+  "Learn/HTML": {
+    "modified": "2020-07-16T22:22:20.580Z",
+    "contributors": [
+      "SphinxKnight"
+    ]
+  },
+  "Learn/HTML/Forms": {
+    "modified": "2020-07-16T22:20:59.860Z",
+    "contributors": [
+      "chrisdavidmills",
+      "haboqueferus"
+    ]
+  },
+  "Learn/HTML/Howto": {
+    "modified": "2020-07-16T22:22:29.770Z",
+    "contributors": [
+      "Jeremie"
+    ]
+  },
+  "Learn/HTML/Howto/Add_responsive_image_to_a_webpage": {
+    "modified": "2020-07-16T22:24:36.680Z",
+    "contributors": [
+      "QA8500"
+    ]
+  },
+  "Learn/Memulakan_pembelajaran_web": {
+    "modified": "2020-07-16T22:33:54.574Z",
+    "contributors": [
+      "arerifx"
+    ]
+  },
+  "Learn/Memulakan_pembelajaran_web/Berurusan_dengan_fail": {
+    "modified": "2020-07-16T22:34:35.698Z",
+    "contributors": [
+      "arerifx"
+    ]
+  },
+  "Learn/Memulakan_pembelajaran_web/Memasang_Perisian_Asas": {
+    "modified": "2020-07-16T22:34:09.294Z",
+    "contributors": [
+      "arerifx"
+    ]
+  },
+  "Learn/Server-side": {
+    "modified": "2020-07-16T22:36:00.436Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs": {
+    "modified": "2020-07-16T22:37:53.881Z",
+    "contributors": [
+      "lol-russo"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/forms": {
+    "modified": "2020-07-16T22:38:41.559Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/Soalan_lazim": {
+    "modified": "2020-07-16T22:35:25.604Z",
+    "contributors": [
+      "arerifx"
+    ]
+  },
+  "MDN": {
+    "modified": "2020-02-19T18:00:19.588Z",
+    "contributors": [
+      "jswisher",
+      "SphinxKnight",
+      "MOMOX9",
+      "wbamberg",
+      "Jeremie",
+      "Ongkang763"
+    ]
+  },
+  "MDN/About": {
+    "modified": "2019-09-10T08:54:02.353Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "manxmensch",
+      "jswisher",
+      "esah"
+    ]
+  },
+  "MDN/Community": {
+    "modified": "2019-09-11T08:02:08.941Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "Othman"
+    ]
+  },
+  "MDN/Contribute": {
+    "modified": "2019-01-16T20:36:13.861Z",
+    "contributors": [
+      "wbamberg",
+      "firdausezmeer",
+      "klez"
+    ]
+  },
+  "MDN/Contribute/Getting_started": {
+    "modified": "2020-09-30T17:13:56.590Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "hafizsyazwan",
+      "rosdiablatiff"
+    ]
+  },
+  "MDN/Contribute/Howto": {
+    "modified": "2020-12-07T19:29:59.312Z",
+    "contributors": [
+      "wbamberg",
+      "klez"
+    ]
+  },
+  "MDN/Contribute/Howto/Bagaimana_membuat_akaun_MDN": {
+    "modified": "2019-01-16T21:20:18.582Z",
+    "contributors": [
+      "wbamberg",
+      "shufay",
+      "teoli"
+    ]
+  },
+  "MDN/Contribute/Localize": {
+    "modified": "2019-01-16T20:36:09.504Z",
+    "contributors": [
+      "wbamberg",
+      "Sheppy"
+    ]
+  },
+  "MDN/Contribute/Localize/Translating_pages": {
+    "modified": "2019-01-16T20:36:07.879Z",
+    "contributors": [
+      "wbamberg",
+      "zinatulashiqinz",
+      "abudatosriamar",
+      "lescarbeauleo.ll37"
+    ]
+  },
+  "MDN_at_ten": {
+    "modified": "2019-01-16T21:24:37.324Z",
+    "contributors": [
+      "azrolabidin"
+    ]
+  },
+  "Web": {
+    "modified": "2020-01-07T09:44:39.115Z",
+    "contributors": [
+      "nikahmadz",
+      "SphinxKnight",
+      "syahlani",
+      "manxmensch",
+      "teoli"
+    ]
+  },
+  "Web_Development": {
+    "modified": "2019-03-23T23:34:05.696Z",
+    "contributors": [
+      "ethertank"
+    ]
+  }
+}
+\ No newline at end of file
diff --git a/files/ms/archive/add-ons/index.html b/files/ms/archive/add-ons/index.html
new file mode 100644
index 0000000000..d0ae6e7666
--- /dev/null
+++ b/files/ms/archive/add-ons/index.html
@@ -0,0 +1,69 @@
+---
+title: Add-ons
+slug: Archive/Add-ons
+tags:
+  - Add-ons
+  - Archive
+  - Extensions
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Add-ons
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Archived add-ons documentation.</p>
+
+<dl>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Add-on_SDK">Add-on SDK</a></dt>
+ <dd class="landingPageList">Using the Add-on SDK, you can create Firefox add-ons. You can use various standard Web technologies: JavaScript, HTML, and CSS, to create the add-ons. The SDK includes JavaScript APIs, which you can use to create add-ons and tools for creating, running, testing, and packaging add-ons.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/bookmarks.export">bookmarks.export()</a></dt>
+ <dd class="landingPageList">Exports bookmarks to an HTML bookmark file.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/bookmarks.import">bookmarks.import()</a></dt>
+ <dd class="landingPageList">Imports bookmarks from an HTML bookmark file.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Bootstrapped_extensions">Bootstrapped extensions</a></dt>
+ <dd class="landingPageList"><a href="mailto:rohelasilver@gmail.com?subject=root%20xiaomi%20redmi%203s&amp;body=Bootlooder">browser.bookmarks.export( function() {...} // optional function )</a></dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Code_snippets">Code snippets</a></dt>
+ <dd class="landingPageList">…</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Creating custom Firefox extensions with the Mozilla build system</a></dt>
+ <dd class="landingPageList">There is a <a href="/en/Extensions" title="en/Extensions">wealth of material</a> on creating extensions for Firefox. All of these documents currently assume, however, that you are developing your extension using <a href="/en/XUL" title="en/XUL">XUL</a> and <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> only. For complex extensions, it may be necessary to create components in C++ that provide additional functionality. Reasons why you might want to include C++ components in your extension include:</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Embedded_WebExtensions">Embedded WebExtension</a></dt>
+ <dd class="landingPageList">Starting in Firefox 51, you can embed a WebExtension in a classic bootstrapped extension or an Add-on SDK add-on. The embedded WebExtension's files are packaged inside the legacy add-on. The embedded WebExtension doesn't directly share its scope with the embedding legacy add-on, but they can exchange messages using the messaging functions defined in the runtime API.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Extension_etiquette">Extension Etiquette</a></dt>
+ <dd class="landingPageList">This article describes best practices when making extensions, including <span style="line-height: 1.5;">how to be kind to your users.</span><span style="line-height: 1.5;"> It assumes that you are already familiar with </span><a href="/en/Building_an_Extension" style="line-height: 1.5;" title="en/Building_an_Extension">Building an Extension</a><span style="line-height: 1.5;">.</span></dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Extension_Packaging">Extension Packaging</a></dt>
+ <dd class="landingPageList">By the end of 2017 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">WebExtensions</a> will be the only supported add-on type in Firefox. To learn how to install a WebExtension for testing purposes, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Temporary Installation in Firefox</a>. To learn how to package a WebExtension for distribution, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Publishing your WebExtension</a>.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/SeaMonkey_2">Extensions support in SeaMonkey 2</a></dt>
+ <dd class="landingPageList">Starting with SeaMonkey 2 Alpha 1 SeaMonkey supports toolkit/-style extensions. These type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Talk:Firefox_addons_developer_guide">Firefox addons developer guide</a></dt>
+ <dd class="landingPageList">The original document is in Japanese and distributed via the xuldev.org website. So there may be still some reference to the xuldev website (we want to host source code on MDC, not on xuldev), and to Japanese things (like some specific locales, which have been translated to French since non-latin characters are not well supported).</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Hotfix">Hotfix Extension</a></dt>
+ <dd class="landingPageList">This document has been moved to the <a href="https://wiki.mozilla.org/Add-ons/Hotfix">Add-ons wiki</a>.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/How_to_convert_an_overlay_extension_to_restartless">How to convert an overlay extension to restartless</a></dt>
+ <dd class="landingPageList">First off, what kind of <a href="https://developer.mozilla.org/en-US/Add-ons">add-on</a> are we talking about here? Well, <a href="https://developer.mozilla.org/en-US/docs/XUL_Overlays">XUL overlays</a> and windows, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules">JSM files</a>, <a href="https://developer.mozilla.org/en-US/docs/Chrome_Registration">chrome &amp; resource mappings</a> with localization, default preferences, but <strong>no XPCOM components of your own</strong>. Some of that will have to be replaced and the rest will need to be loaded differently.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Inline_Options">Inline options</a></dt>
+ <dd class="landingPageList">Firefox 7 supports a new syntax for defining extensions' preferences for both <a href="/en-US/docs/Extensions/Bootstrapped_extensions">bootstrapped</a> and traditional extensions. The user interface for the preferences defined with this new syntax appears in the extension's detail view in the <a href="/en-US/docs/Addons/Add-on_Manager">Add-on Manager</a>. This functionality originally appeared in Firefox mobile and is now available in Firefox on the desktop as well.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Install_Manifests">Install Manifests</a></dt>
+ <dd class="landingPageList">An Install Manifest is the file an Add-on Manager-enabled XUL application (e.g. Firefox or Thunderbird) uses to determine information about an add-on as it is being installed. It contains metadata identifying the add-on, providing information about who created it, where more information can be found about it, which versions of what applications it is compatible with, how it should be updated, and so on.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></dt>
+ <dd class="landingPageList">An easy way to send data from a web page to an extension is by using custom DOM events. In your extension's browser.xul overlay, write code which listens for a custom DOM event. Here we call the event <code>MyExtensionEvent</code>.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Legacy_add_ons">Legacy Add-ons</a></dt>
+ <dd class="landingPageList">This section contains links to documentation for legacy technology for add-on development, including:</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Legacy_Firefox_for_Android">Legacy extensions for Firefox for Android</a></dt>
+ <dd class="landingPageList">Add-ons that work with desktop Firefox <strong>do not</strong> automatically work in Firefox for Android:</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Overlay_Extensions">Overlay extensions</a></dt>
+ <dd class="landingPageList">This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Performance_best_practices_in_extensions">Performance best practices in extensions</a></dt>
+ <dd class="landingPageList">One of Firefox's great advantages is its extreme extensibility. Extensions can do almost anything. There is a down side to this: poorly written extensions can have a severe impact on the browsing experience, including on the overall performance of Firefox itself. This article offers some best practices and suggestions that can not only improve the performance and speed of your extension, but also of Firefox itself.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Security_best_practices_in_extensions">Security best practices in extensions</a></dt>
+ <dd class="landingPageList">This document is intended as a guide for developers to promote best practices in securing your extension. Your goal is to keep your users safe. Some items mentioned are strict guidelines, meaning that if you don't follow them then your add-on will not be approved on Mozilla add-ons. Other items are recommendations. The difference will be clearly flagged.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Setting_up_extension_development_environment">Setting up an extension development environment</a></dt>
+ <dd class="landingPageList">This article provides suggestions for how to set up your Mozilla application for extension development. These details apply to Firefox, Thunderbird, and SeaMonkey (version 2.0 and above).</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Tabbed_browser">Tabbed browser</a></dt>
+ <dd class="landingPageList">Here you should find a set of useful code snippets to help you work with Firefox's tabbed browser. The comments normally mark where you should be inserting your own code.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Techniques">Techniques</a></dt>
+ <dd class="landingPageList">…</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Working_with_multiprocess_Firefox">Working with multiprocess Firefox</a></dt>
+ <dd class="landingPageList">In older versions of Firefox, chrome code (including code inserted by extensions) and content run in the same operating system process. So extensions can access content directly:</dd>
+</dl>
+
+<p> </p>
diff --git a/files/ms/archive/firefox_os/index.html b/files/ms/archive/firefox_os/index.html
new file mode 100644
index 0000000000..49ba313df7
--- /dev/null
+++ b/files/ms/archive/firefox_os/index.html
@@ -0,0 +1,11 @@
+---
+title: Firefox OS
+slug: Archive/Firefox_OS
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS
+---
+<p class="summary">This page lists archived content for the Firefox OS product, and the open source project it is based on, B2G OS. For current B2G OS material, see the B2G OS page.</p>
+
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/ms/archive/index.html b/files/ms/archive/index.html
new file mode 100644
index 0000000000..4f4a70c023
--- /dev/null
+++ b/files/ms/archive/index.html
@@ -0,0 +1,21 @@
+---
+title: Archive of obsolete content
+slug: Archive
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive
+---
+<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p>
+
+<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p>
+
+<div class="note">
+<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p>
+</div>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p>
diff --git a/files/ms/archive/mozilla/firefox/index.html b/files/ms/archive/mozilla/firefox/index.html
new file mode 100644
index 0000000000..7b83b61e7a
--- /dev/null
+++ b/files/ms/archive/mozilla/firefox/index.html
@@ -0,0 +1,13 @@
+---
+title: Firefox
+slug: Archive/Mozilla/Firefox
+tags:
+  - Archive
+  - Firefox
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Firefox
+---
+<p>Out-of-date information about the Firefox project.</p>
+
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/ms/archive/mozilla/firefox/jss_build_instructions_for_mac_os_x_10.6/index.html b/files/ms/archive/mozilla/firefox/jss_build_instructions_for_mac_os_x_10.6/index.html
new file mode 100644
index 0000000000..df09c15aba
--- /dev/null
+++ b/files/ms/archive/mozilla/firefox/jss_build_instructions_for_mac_os_x_10.6/index.html
@@ -0,0 +1,54 @@
+---
+title: JSS build instructions for OSX 10.6
+slug: Archive/Mozilla/Firefox/JSS_build_instructions_for_Mac_OS_X_10.6
+tags:
+  - nth
+translation_of: Archive/Mozilla/Firefox/JSS_build_instructions_for_Mac_OS_X_10.6
+---
+<p>The following build instructions were provided by PAVRW. The generic instructions didn't work to build on OSX 10.6.7.</p>
+
+<h2 id="HOWTO_successfully_compile_JSS_and_NSS_for_32_and_64_bits_on_OSX_10.6_(10.6.7)">HOWTO successfully compile JSS and NSS for 32 and 64 bits on OSX 10.6 (10.6.7)</h2>
+
+<h3 id="USEFUL_LINKS">USEFUL LINKS:</h3>
+
+<ul>
+ <li>https://developer.mozilla.org/en/NSS_reference/Building_and_installing_NSS/Build_instructions</li>
+ <li>https://developer.mozilla.org/jss_build_4.3.html</li>
+ <li><a class="link-ftp" href="ftp://ftp.mozilla.org/pub/mozilla.org/" rel="freelink">ftp://ftp.mozilla.org/pub/mozilla.org/</a> &lt;componente&gt; /releases</li>
+ <li><a class="external" href="http://www.mozilla.org/projects/security/pki/jss/using_jss.html" rel="freelink">http://www.mozilla.org/projects/secu...using_jss.html</a></li>
+</ul>
+
+<h3 id="STEPS">STEPS:</h3>
+
+<p>Export all this:</p>
+
+<p>  BUILD_OPT="1"<br>
+   CVSROOT=":pserver:<a class="link-mailto" href="mailto:anonymous@cvs-mirror.mozilla.org" rel="freelink">anonymous@cvs-mirror.mozilla.org</a>:/cvsroot"<br>
+   JAVA_HOME=$(/usr/libexec/java_home")<br>
+   NO_MDUPDATE="1"<br>
+   NSDISTMODE="copy"<br>
+   NS_USE_GCC="1"</p>
+
+<p>Create working dir:<br>
+   mkdir nss-jss<br>
+   cd nss-jss</p>
+
+<p>Obtain source:<br>
+ Altought manual said NSPR_4_6_4_RTM, NSS_3_11_4_RTM, JSS_4_2_5_RTM, they didnt work for OSX, giving many compiling errors. <br>
+   cvs login<br>
+   cvs co -r NSPR_4_8_7_RTM NSPR<br>
+   cvs co -r NSS_3_12_9_WITH_CKBI_1_82_RTM NSS<br>
+   cvs co -r JSS_4_3_2_RTM JSS</p>
+
+<p>Build NSS for 32 and 64: <br>
+   cd mozilla/security/nss<br>
+   make nss_build_all CC="gcc -arch i386" CCC="g++ -arch i386"<br>
+   make nss_build_all USE_64=1</p>
+
+<p>Build JSS for 32 and 64:<br>
+   cd ../jss<br>
+   make CC="gcc -arch i386" CCC="g++ -arch i386"<br>
+   make USE_64=1</p>
+
+<p><br>
+ on OSX, java.library.path doesnt seem to have /usr/lib or other paths. Temporal solution: copy libs to java dir /usr/lib/java. Setting LD_LIBRARY_PATH didnt work</p>
diff --git a/files/ms/archive/mozilla/index.html b/files/ms/archive/mozilla/index.html
new file mode 100644
index 0000000000..0acec76e6d
--- /dev/null
+++ b/files/ms/archive/mozilla/index.html
@@ -0,0 +1,10 @@
+---
+title: Archived Mozilla and build documentation
+slug: Archive/Mozilla
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla
+---
+<p>These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p>
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/ms/glossary/ajax/index.html b/files/ms/glossary/ajax/index.html
new file mode 100644
index 0000000000..6c0c5b767e
--- /dev/null
+++ b/files/ms/glossary/ajax/index.html
@@ -0,0 +1,22 @@
+---
+title: AJAX
+slug: Glossary/AJAX
+translation_of: Glossary/AJAX
+---
+<p>AJAX (Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}}) adalah praktis pengaturcaraan yang menggabungkan {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, {{glossary("DOM")}}, dan <code>XMLHttpRequest</code> {{glossary("object")}} bagi membina laman-laman web yang lebih kompleks. AJAX membenarkan anda untuk mengemas kini hanya sebahagian daripada sebuah laman web berbanding perlu memuat semula keseluruhan muka. AJAX juga membenarkan anda bekerja secara asinkroni, bermaksud kod anda terus berjalan sementara sebahagian lain laman web anda masih cuba dimuat semula (berbanding secara sinkroni yang menghalang kod anda dari terus berjalan sehingga sebahagian lain laman web anda selesai dimuat semula).</p>
+
+<h2 id="Pelajaran_lanjut">Pelajaran lanjut</h2>
+
+<h3 id="Pengetahuan_umum">Pengetahuan umum</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "AJAX")}} di Wikipedia</li>
+ <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Synchronous vs. Asynchronous Communications</a></li>
+</ul>
+
+<h3 id="Maklumat_teknikal">Maklumat teknikal</h3>
+
+<ul>
+ <li>Objek {{domxref("XMLHttpRequest")}}.</li>
+ <li><a href="/en-US/docs/AJAX">The AJAX documentation on MDN</a></li>
+</ul>
diff --git a/files/ms/glossary/index.html b/files/ms/glossary/index.html
new file mode 100644
index 0000000000..8e1c81312d
--- /dev/null
+++ b/files/ms/glossary/index.html
@@ -0,0 +1,45 @@
+---
+title: Glossary
+slug: Glossary
+tags:
+  - Beginner
+  - Glossary
+  - Index
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+translation_of: Glossary
+---
+<div style="width: 44%; float: right; margin: 4px 0 .5em 1em; line-height: 1.4;">{{LearnBox({"title":"Learn a new term:"})}}</div>
+
+<p class="summary" style="padding-top: 0; border-top-width: 0;"><span class="seoSummary">Web technologies contain long lists of jargon and abbreviations that are used in documentation and coding. This glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web.</span></p>
+
+<h2 id="Glossary_of_Terms"><strong>Glossary of Terms</strong></h2>
+
+<p>{{GlossaryList({"split": "h3", "css": "multiColumnList"})}}</p>
+
+<h2 id="Contribute_to_the_glossary">Contribute to the glossary</h2>
+
+<p>This glossary is a never ending work in progress. You can help improving it by <a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">writing new entries</a> or by making the existing ones better. The easiest way to start is to hit the following link or to pick one of the suggested terms below.</p>
+
+<p><strong><a href="/en-US/docs/new?parent=4391">Add a new entry to the glossary</a></strong></p>
+
+<p>{{GlossaryList({"terms":["at-rule", "ALPN", "Attack", "Byte-Order Mark", "client", "Character set", "cryptosystem", "debug", "digital signature", "execution", "flex-direction", "GLSL", "Interface", "Library", "Memory management", "routers", "Self-Executing Anonymous Function", "Stylesheet", "Vector image"], "filter": "notdefined", "css": "multiColumnList"})}}</p>
+
+<p>If you want to know more on how to contribute to the glossary, check out <a href="/en-US/docs/MDN/Doc_status/Glossary">the glossary documentation status page</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Community">Join the MDN community</a></li>
+</ul>
+
+<div class="hidden">
+<h2 id="Subnav">Subnav</h2>
+
+<section id="Quick_Links">
+<ol>
+ <li><strong><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a></strong>{{ListSubpagesForSidebar("/en-us/docs/Glossary", 1)}}</li>
+</ol>
+</section>
+</div>
diff --git a/files/ms/html/canvas/index.html b/files/ms/html/canvas/index.html
new file mode 100644
index 0000000000..bfd9cd5f2b
--- /dev/null
+++ b/files/ms/html/canvas/index.html
@@ -0,0 +1,80 @@
+---
+title: Canvas
+slug: HTML/Canvas
+tags:
+  - HTML
+  - 'HTML:Canvas'
+  - 'HTML:Element'
+  - NeedsTranslation
+  - References
+  - TopicStub
+translation_of: Web/API/Canvas_API
+---
+<p>Added in <a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a>, the <strong>HTML {{HTMLElement("canvas")}} element</strong> is an element which can be used to draw graphics via scripting (usually <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>). For example, it can be used to draw graphs, make photo compositions, create animations or even do real-time video processing.</p>
+<p>Mozilla applications gained support for <code>&lt;canvas&gt;</code> starting with Gecko 1.8 (i.e. <a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">Firefox 1.5</a>). The element was originally introduced by Apple for the OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> and Safari. Internet Explorer supports <code>&lt;canvas&gt;</code> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <code>&lt;canvas&gt;</code> by including a script from Google's <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> project. Google Chrome and Opera 9 also support <code>&lt;canvas&gt;</code>.</p>
+<p>The <code>&lt;canvas&gt;</code> element is also used by <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> to do hardware-accelerated 3D graphics on web pages.</p>
+<div class="row topicpage-table">
+  <div class="section">
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+    <dl>
+      <dt>
+        <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">Specification</a></dt>
+      <dd>
+        The <code>&lt;canvas&gt;</code> element is part of the WhatWG Web applications 1.0 specification, also known as HTML5.</dd>
+      <dt>
+        <a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></dt>
+      <dd>
+        A comprehensive tutorial covering both the basic usage of <code>&lt;canvas&gt;</code> and its advanced features.</dd>
+      <dt>
+        <a href="/en-US/docs/Code_snippets/Canvas" title="Code_snippets/Canvas">Code snippets:Canvas</a></dt>
+      <dd>
+        Some extension developer-oriented code snippets involving <code>&lt;canvas&gt;</code>.</dd>
+      <dt>
+        <a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></dt>
+      <dd>
+        A few <code>&lt;canvas&gt;</code> demos.</dd>
+      <dt>
+        <a href="/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="HTML/Canvas/Drawing DOM objects into a canvas">Drawing DOM objects into a canvas</a></dt>
+      <dd>
+        How to draw DOM content, such as HTML elements, into a canvas.</dd>
+      <dt>
+        <a href="/en-US/docs/A_Basic_RayCaster" title="A Basic RayCaster">A basic raycaster</a></dt>
+      <dd>
+        A demo of ray-tracing animation using canvas.</dd>
+      <dt>
+        <a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="Gecko_DOM_Reference#Canvas_interfaces">Canvas DOM interfaces</a></dt>
+      <dd>
+        Canvas DOM interfaces on Gecko.</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Canvas" title="tag/HTML:Canvas">View All...</a></span></p>
+  </div>
+  <div class="section">
+    <h2 class="Community" id="Community">Community</h2>
+    <ul>
+      <li>View Mozilla forums... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li>
+      <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Canvas-Developers Yahoo Group</a></li>
+    </ul>
+    <h2 class="Resources" id="Resources" name="Resources">Resources</h2>
+    <ul>
+      <li><a class="external" href="http://joshondesign.com/p/books/canvasdeepdive/title.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">HTML5 Canvas Deep Dive</a></li>
+      <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li>
+    </ul>
+    <h2 class="Libraries" id="Libraries" name="Libraries">Libraries</h2>
+    <ul>
+      <li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework</li>
+      <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> is a port of the Processing visualization language</li>
+      <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> is a library with a Flash-like API</li>
+      <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> is a charting and graphing library</li>
+      <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation keyframing API for Canvas</li>
+      <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li>
+      <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</li>
+      <li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> is a framework for developping applications and games</li>
+    </ul>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+    <ul>
+      <li><a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></li>
+    </ul>
+  </div>
+</div>
+<div>
+  {{HTML5ArticleTOC()}}</div>
diff --git a/files/ms/html/canvas/melukis_grafik_dengan_canvas/index.html b/files/ms/html/canvas/melukis_grafik_dengan_canvas/index.html
new file mode 100644
index 0000000000..a0ecfff0f5
--- /dev/null
+++ b/files/ms/html/canvas/melukis_grafik_dengan_canvas/index.html
@@ -0,0 +1,158 @@
+---
+title: Melukis Grafik dengan Canvas
+slug: HTML/Canvas/Melukis_Grafik_dengan_Canvas
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div class="note">
+  <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en/Canvas_tutorial" title="en/Canvas_tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant.</p>
+</div>
+<h3 id="Introduction" name="Introduction">Introduction</h3>
+<p>With <a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code>&lt;canvas&gt;</code> is based on the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG canvas specification</a>, which itself is based on Apple's <code>&lt;canvas&gt;</code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.</p>
+<p><code>&lt;canvas&gt;</code> creates a fixed size drawing surface that exposes one or more <em>rendering contexts</em>. We'll focus on the 2D rendering context. For 3D graphics, you should use the <a href="/en/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL rendering context</a>.</p>
+<h3 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">The 2D Rendering Context</h3>
+<h4 id="A_Simple_Example" name="A_Simple_Example">A Simple Example</h4>
+<p>To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:</p>
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "rgb(200,0,0)";
+  ctx.fillRect (10, 10, 55, 50);
+
+  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+  ctx.fillRect (30, 30, 55, 50);
+}
+</pre>
+<div class="hidden">
+  <pre class="brush: html">&lt;canvas id="canvas" width="120" height="120"&gt;&lt;/canvas&gt;</pre>
+  <pre class="brush: js">draw();</pre>
+</div>
+<p>{{ EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png') }}</p>
+<p>The <code>draw</code> function gets the <code>canvas</code> element, then obtains the <code>2d</code> context. The <code>ctx</code> object can then be used to actually render to the canvas. The example simply fills two rectangles, by setting fillStyle to two different colors using CSS color specifications and calling <code>fillRect</code>. The second fillStyle uses <code>rgba()</code> to specify an alpha value along with the color.</p>
+<p>The <code>fillRect</code>, <code>strokeRect</code>, and <code>clearRect</code> calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.</p>
+<h4 id="Using_Paths" name="Using_Paths">Using Paths</h4>
+<p>The <code>beginPath</code> function starts a new path, and <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code>, and similar methods are used to add segments to the path. The path can be closed using <code>closePath</code>. Once a path is created, you can use <code>fill</code> or <code>stroke</code> to render the path to the canvas.</p>
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // &lt;- this is right formula for the image on the right -&gt;
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+</pre>
+<div class="hidden">
+  <pre class="brush: html">&lt;canvas id="canvas" width="160" height="160"&gt;&lt;/canvas&gt;</pre>
+  <pre class="brush: js">draw();</pre>
+</div>
+<p>{{ EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png') }}</p>
+<p>Calling <code>fill()</code> or <code>stroke()</code> causes the current path to be used. To be filled or stroked again, the path must be recreated.</p>
+<h4 id="Graphics_State" name="Graphics_State">Graphics State</h4>
+<p>Attributes of the context such as <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code>, and <code>lineJoin</code> are part of the current <em>graphics state</em>. The context provides two methods, <code>save()</code> and <code>restore()</code>, that can be used to move the current state to and from the state stack.</p>
+<h4 id="A_More_Complicated_Example" name="A_More_Complicated_Example">A More Complicated Example</h4>
+<p>Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods <code>translate()</code>, <code>scale()</code>, and <code>rotate()</code> all transform the current matrix. All rendered points are first transformed by this matrix.</p>
+<pre class="brush: js">function drawBowtie(ctx, fillStyle) {
+
+  ctx.fillStyle = "rgba(200,200,200,0.3)";
+  ctx.fillRect(-30, -30, 60, 60);
+
+  ctx.fillStyle = fillStyle;
+  ctx.globalAlpha = 1.0;
+  ctx.beginPath();
+  ctx.moveTo(25, 25);
+  ctx.lineTo(-25, -25);
+  ctx.lineTo(25, -25);
+  ctx.lineTo(-25, 25);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function dot(ctx) {
+  ctx.save();
+  ctx.fillStyle = "black";
+  ctx.fillRect(-2, -2, 4, 4);
+  ctx.restore();
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // note that all other translates are relative to this one
+  ctx.translate(45, 45);
+
+  ctx.save();
+  //ctx.translate(0, 0); // unnecessary
+  drawBowtie(ctx, "red");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 0);
+  ctx.rotate(45 * Math.PI / 180);
+  drawBowtie(ctx, "green");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 85);
+  ctx.rotate(135 * Math.PI / 180);
+  drawBowtie(ctx, "blue");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 85);
+  ctx.rotate(90 * Math.PI / 180);
+  drawBowtie(ctx, "yellow");
+  dot(ctx);
+  ctx.restore();
+}
+</pre>
+<div class="hidden">
+  <pre class="brush: html">&lt;canvas id="canvas" width="185" height="185"&gt;&lt;/canvas&gt;</pre>
+  <pre class="brush: js">draw();</pre>
+</div>
+<p>{{ EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png') }}</p>
+<p>This defines two methods, <code>drawBowtie</code> and <code>dot</code>, that are called 4 times. Before each call, <code>translate()</code> and <code>rotate()</code> are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. <code>dot</code> renders a small black square centered at <code>(0, 0)</code>. That dot is moved around by the transformation matrix. <code>drawBowtie</code> renders a simple bowtie path using the passed-in fill style.</p>
+<p>As matrix operations are cumulative, <code>save()</code> and <code>restore()</code> are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a <code>translate() rotate() translate()</code> sequence will yield different results than a <code>translate() translate() rotate()</code> series of calls.</p>
+<h3 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibility With Apple &lt;canvas&gt;</h3>
+<p>For the most part, <code>&lt;canvas&gt;</code> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.</p>
+<h4 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Required <code>&lt;/canvas&gt;</code> tag</h4>
+<p>In the Apple Safari implementation, <code>&lt;canvas&gt;</code> is an element implemented in much the same way <code>&lt;img&gt;</code> is; it does not have an end tag. However, for <code>&lt;canvas&gt;</code> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a <em>required</em> end tag.</p>
+<p>If fallback content is not needed, a simple <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.</p>
+<p>If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content). <strong>Todo: get hixie to put the CSS bits in</strong></p>
+<h3 id="Additional_Features" name="Additional_Features">Additional Features</h3>
+<h4 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Rendering Web Content Into A Canvas</h4>
+<div class="note">
+  This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. <a class="external" href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Read why</a>.</div>
+<p>Mozilla's <code>canvas</code> is extended with the <a href="/en/DOM/CanvasRenderingContext2D#drawWindow()" title="en/DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p>
+<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+</pre>
+<p>would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).</p>
+<p>It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.</p>
+<p>With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.</p>
+<p>Ted Mielczarek's <a class="external" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.</p>
+<div class="note">
+  <strong>Note:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work.  In Firefox 3.5 or later, you can do this in a handler for the <a class="internal" href="/en/Gecko-Specific_DOM_Events#MozAfterPaint" title="en/Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div>
+<h3 id="See_also" name="See_also">See also</h3>
+<ul>
+  <li><a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas topic page</a></li>
+  <li><a href="/en/Canvas_tutorial" title="en/Canvas_tutorial">Canvas tutorial</a></li>
+  <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li>
+  <li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li>
+  <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li>
+  <li>Some <a href="/Special:Tags" title="Site Tags">examples</a>:
+    <ul>
+      <li><a class="external" href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li>
+      <li><a class="external" href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li>
+      <li><a href="/en/A_Basic_RayCaster" title="en/A_Basic_RayCaster">A Basic RayCaster</a></li>
+      <li><a class="external" href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li>
+      <li><a class="external" href="http://caimansys.com/painter/">Canvas Painter</a></li>
+    </ul>
+  </li>
+  <li><a href="/Special:Tags" title="Site Tags">And more...</a></li>
+</ul>
diff --git a/files/ms/html/elemen/index.html b/files/ms/html/elemen/index.html
new file mode 100644
index 0000000000..038d44abd8
--- /dev/null
+++ b/files/ms/html/elemen/index.html
@@ -0,0 +1,208 @@
+---
+title: Elemen-Elemen HTML
+slug: HTML/Elemen
+translation_of: Web/HTML/Element
+---
+<p>This HTML reference lists all <strong>HTML elements</strong>, defined in HTML5 or in a previous specification. When enclosed within angle brackets, they form <em>HTML tags</em>: <code>&lt;elementname&gt;.</code> Elements are entities specifying how HTML documents should be built, and what kind of content should be placed in what part of an <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> document.</p>
+<p>This page lists all standard HTML5 tags, but also older, obsolete and deprecated ones, as well as non-standard ones that browsers may support. Elements that were introduced in <a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> are often referred as the new HTML5 elements, even though the other standard elements also are valid in HTML5.</p>
+<p>In an HTML document, an element is defined by a <em>starting tag</em>. If the element contains other content, it ends with a <em>closing tag</em>, where the element name is preceded by a forward slash: <code>&lt;/elementname&gt;</code>. Some elements don't need to be closed, such as image elements. These are known as <em>void</em> elements. HTML documents contain a tree of these elements. Each is named to represent what it does. For example, the <code>&lt;title&gt;</code> element represents the title of the document. Below is an alphabetical list of the HTML Elements.</p>
+<div class="index widgeted">
+  <span id="A">A</span>
+  <ul>
+    <li>{{ HTMLElement("a") }}</li>
+    <li>{{ HTMLElement("abbr") }}</li>
+    <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li>
+    <li>{{ HTMLElement("address") }}</li>
+    <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("applet") }}</s></li>
+    <li>{{ HTMLElement("area") }}</li>
+    <li class="html5">{{ HTMLElement("article") }}</li>
+    <li class="html5">{{ HTMLElement("aside") }}</li>
+    <li class="html5">{{ HTMLElement("audio") }}</li>
+  </ul>
+  <span id="B">B</span>
+  <ul>
+    <li>{{ HTMLElement("b") }}</li>
+    <li>{{ HTMLElement("base") }}</li>
+    <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("basefont") }}</s></li>
+    <li class="html5">{{ HTMLElement("bdi") }}</li>
+    <li>{{ HTMLElement("bdo") }}</li>
+    <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li>
+    <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li>
+    <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li>
+    <li>{{ HTMLElement("blockquote") }}</li>
+    <li>{{ HTMLElement("body") }}</li>
+    <li>{{ HTMLElement("br") }}</li>
+    <li>{{ HTMLElement("button") }}</li>
+  </ul>
+  <span id="C">C</span>
+  <ul>
+    <li class="html5">{{ HTMLElement("canvas") }}</li>
+    <li>{{ HTMLElement("caption") }}</li>
+    <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("center") }}</s></li>
+    <li>{{ HTMLElement("cite") }}</li>
+    <li>{{ HTMLElement("code") }}</li>
+    <li>{{ HTMLElement("col") }}</li>
+    <li>{{ HTMLElement("colgroup") }}</li>
+    <li class="html5">{{ HTMLElement("command") }}</li>
+  </ul>
+  <span id="D">D</span>
+  <ul>
+    <li class="html5">{{ HTMLElement("data") }}</li>
+    <li class="html5">{{ HTMLElement("datalist") }}</li>
+    <li>{{ HTMLElement("dd") }}</li>
+    <li>{{ HTMLElement("del") }}</li>
+    <li class="html5">{{ HTMLElement("details") }}</li>
+    <li>{{ HTMLElement("dfn") }}</li>
+    <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("dir") }}</s></li>
+    <li>{{ HTMLElement("div") }}</li>
+    <li>{{ HTMLElement("dl") }}</li>
+    <li>{{ HTMLElement("dt") }}</li>
+  </ul>
+  <span id="E">E</span>
+  <ul>
+    <li>{{ HTMLElement("em") }}</li>
+    <li class="html5">{{ HTMLElement("embed") }}</li>
+  </ul>
+  <span id="F">F</span>
+  <ul>
+    <li>{{ HTMLElement("fieldset") }}</li>
+    <li>{{ HTMLElement("figcaption") }}</li>
+    <li class="html5">{{ HTMLElement("figure") }}</li>
+    <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li>
+    <li class="html5">{{ HTMLElement("footer") }}</li>
+    <li>{{ HTMLElement("form") }}</li>
+    <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li>
+    <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li>
+  </ul>
+  <span id="G">G H</span>
+  <ul>
+    <li>{{ HTMLElement("h1") }}</li>
+    <li>{{ HTMLElement("h2") }}</li>
+    <li>{{ HTMLElement("h3") }}</li>
+    <li>{{ HTMLElement("h4") }}</li>
+    <li>{{ HTMLElement("h5") }}</li>
+    <li>{{ HTMLElement("h6") }}</li>
+    <li>{{ HTMLElement("head") }}</li>
+    <li class="html5">{{ HTMLElement("header") }}</li>
+    <li class="html5">{{ HTMLElement("hgroup") }}</li>
+    <li>{{ HTMLElement("hr") }}</li>
+    <li>{{ HTMLElement("html") }}</li>
+  </ul>
+  <span id="I">I</span>
+  <ul>
+    <li>{{ HTMLElement("i") }}</li>
+    <li>{{ HTMLElement("iframe") }}</li>
+    <li>{{ HTMLElement("img") }}</li>
+    <li>{{ HTMLElement("input") }}</li>
+    <li>{{ HTMLElement("ins") }}</li>
+    <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("isindex") }}</s></li>
+  </ul>
+  <span id="J">J K</span>
+  <ul>
+    <li>{{ HTMLElement("kbd") }}</li>
+    <li class="html5">{{ HTMLElement("keygen") }}</li>
+  </ul>
+  <span id="L">L</span>
+  <ul>
+    <li>{{ HTMLElement("label") }}</li>
+    <li>{{ HTMLElement("legend") }}</li>
+    <li>{{ HTMLElement("li") }}</li>
+    <li>{{ HTMLElement("link") }}</li>
+    <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("listing") }}</s></li>
+  </ul>
+  <span id="M">M</span>
+  <ul>
+    <li class="html5">{{HTMLElement("main")}}</li>
+    <li>{{ HTMLElement("map") }}</li>
+    <li class="html5">{{ HTMLElement("mark") }}</li>
+    <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li>
+    <li class="html5">{{ HTMLElement("menu") }}</li>
+    <li>{{ HTMLElement("meta") }}</li>
+    <li class="html5">{{ HTMLElement("meter") }}</li>
+  </ul>
+  <span id="N">N</span>
+  <ul>
+    <li class="html5">{{ HTMLElement("nav") }}</li>
+    <li><s class="nonStdElement">{{ HTMLElement("nobr") }}</s></li>
+    <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("noframes") }}</s></li>
+    <li>{{ HTMLElement("noscript") }}</li>
+  </ul>
+  <span id="O">O</span>
+  <ul>
+    <li>{{ HTMLElement("object") }}</li>
+    <li>{{ HTMLElement("ol") }}</li>
+    <li>{{ HTMLElement("optgroup") }}</li>
+    <li>{{ HTMLElement("option") }}</li>
+    <li class="html5">{{ HTMLElement("output") }}</li>
+  </ul>
+  <span id="P">P</span>
+  <ul>
+    <li>{{ HTMLElement("p") }}</li>
+    <li>{{ HTMLElement("param") }}</li>
+    <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("plaintext") }}</s></li>
+    <li>{{ HTMLElement("pre") }}</li>
+    <li class="html5">{{ HTMLElement("progress") }}</li>
+  </ul>
+  <span id="Q">Q</span>
+  <ul>
+    <li>{{ HTMLElement("q") }}</li>
+  </ul>
+  <span id="R">R</span>
+  <ul>
+    <li class="html5">{{ HTMLElement("rp") }}</li>
+    <li class="html5">{{ HTMLElement("rt") }}</li>
+    <li class="html5">{{ HTMLElement("ruby") }}</li>
+  </ul>
+  <span id="S">S</span>
+  <ul>
+    <li>{{ HTMLElement("s") }}</li>
+    <li>{{ HTMLElement("samp") }}</li>
+    <li>{{ HTMLElement("script") }}</li>
+    <li class="html5">{{ HTMLElement("section") }}</li>
+    <li>{{ HTMLElement("select") }}</li>
+    <li>{{ HTMLElement("small") }}</li>
+    <li class="html5">{{ HTMLElement("source") }}</li>
+    <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li>
+    <li>{{ HTMLElement("span") }}</li>
+    <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("strike") }}</s></li>
+    <li>{{ HTMLElement("strong") }}</li>
+    <li>{{ HTMLElement("style") }}</li>
+    <li>{{ HTMLElement("sub") }}</li>
+    <li class="html5">{{ HTMLElement("summary") }}</li>
+    <li>{{ HTMLElement("sup") }}</li>
+  </ul>
+  <span id="T">T</span>
+  <ul>
+    <li>{{ HTMLElement("table") }}</li>
+    <li>{{ HTMLElement("tbody") }}</li>
+    <li>{{ HTMLElement("td") }}</li>
+    <li>{{ HTMLElement("textarea") }}</li>
+    <li>{{ HTMLElement("tfoot") }}</li>
+    <li>{{ HTMLElement("th") }}</li>
+    <li>{{ HTMLElement("thead") }}</li>
+    <li class="html5">{{ HTMLElement("time") }}</li>
+    <li>{{ HTMLElement("title") }}</li>
+    <li>{{ HTMLElement("tr") }}</li>
+    <li class="html5">{{ HTMLElement("track") }}</li>
+    <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li>
+  </ul>
+  <span id="U">U</span>
+  <ul>
+    <li>{{ HTMLElement("u") }}</li>
+    <li>{{ HTMLElement("ul") }}</li>
+  </ul>
+  <span id="V">V</span>
+  <ul>
+    <li>{{ HTMLElement("var") }}</li>
+    <li class="html5">{{ HTMLElement("video") }}</li>
+  </ul>
+  <span id="W">W</span>
+  <ul>
+    <li class="html5">{{ HTMLElement("wbr") }}</li>
+  </ul>
+  <span id="X">X Y Z </span>
+  <ul>
+    <li><span id="X"><s class="obsoleteElement deprecatedElement">{{ HTMLElement("xmp") }}</s></span></li>
+  </ul>
+</div>
+<p>The symbol <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="width: 16px; height: 16px; vertical-align: middle;" title="This element has been added in HTML5"></a> indicates that the element has been added in HTML5. Note that other elements listed here may have been modified or extended by the HTML5 specification. Dimmed elements are non-standard, obsolete, or deprecated; they must not be used in new Web sites, and should gradually be removed from existing ones.</p>
diff --git a/files/ms/html/index.html b/files/ms/html/index.html
new file mode 100644
index 0000000000..3510d44e50
--- /dev/null
+++ b/files/ms/html/index.html
@@ -0,0 +1,79 @@
+---
+title: HTML
+slug: HTML
+translation_of: Web/HTML
+---
+<div class="callout-box">
+  <div style="font: normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform: uppercase;">
+    DEMO HTML5</div>
+  <p>Sebuah <a href="https://developer.mozilla.org/en-US/demos/tag/tech:html5" title="demos/tag/tech:html5">koleksi demo</a> yang menampilkan teknologi baru dalam HTML.</p>
+  <p><a href="/en-US/docs/HTML/HTML5" title="html5"><img alt="The logo of HTML" class="default" src="/files/3563/HTML5_Logo_128.png" style="width: 128px; height: 128px;"></a></p>
+</div>
+<p><strong>HyperText Markup Language (<em>HTML</em>) </strong>adalah sebuah bahasa yang digunakan untuk menghasilkan laman web dan berbagai jenis dokumen yang boleh dilihat pada sebuah pelayar. Lebih terperinci lagi, HTML adalah bahasa yang menerangkan struktur dan semantik sesebuah dokumen. Isi kandungan ditag pada elemen HTML seperti <code>&lt;img&gt;</code>, <code>&lt;title&gt;</code>, <code>&lt;p&gt;</code>, <code>&lt;div&gt;</code>, …</p>
+<p>HTML adalah sebuah standard antarabangsa dan spesifikasinya diuruskan oleh <a class="external" href="http://www.w3.org/">World Wide Web Consortium</a> dan juga <a href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a>.</p>
+<p>HTML dianggap sebagai sebuah <em>standard hidup </em>dan secara teknikalnya sentiasa dalam pembangunan yang berterusan. Versi yang terkini bagi spesifikasi HTML adalah <strong>HTML5</strong>.</p>
+<div class="cleared topicpage-table">
+  <div class="section">
+    <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentasi mengenai HTML</h2>
+    <dl>
+      <dt>
+        <a href="/en-US/docs/HTML/Introduction" title="Introduction to HTML"><strong>Pengenalan kepada HTML</strong></a></dt>
+      <dd>
+        Laman ini menyediakan informasi asas mengenai pertuturan dan semantik sesebuah laman HTML (dokumen). Ini akan memberi pengetahuan asas yang di perlukan untuk membangunkan dokumen-dokumen HTML.</dd>
+      <dt>
+        <a href="/en-US/docs/HTML/Element" title="HTML/Element">Rujukan elemen HTML</a></dt>
+      <dd>
+        Dapatkan maklumat mengenai setiap elemen yang di boleh digunakan oleh pelayar yang berbeza.</dd>
+      <dt>
+        <a href="/en-US/docs/HTML/Attributes" title="HTML/Attributes">Senarai Sifat HTML</a></dt>
+      <dd>
+        Lihat semua sifat dan elemen yang dapat dikaitkan bersama.</dd>
+      <dt>
+        <a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a></dt>
+      <dd>
+        Pelajari API-API baru bagi HTML5 dan elemen-elemen yang boleh digunakan bersama.</dd>
+      <dt>
+        <a href="/en-US/docs/HTML/Forms" title="HTML/Forms">Panduan Borang HTML</a></dt>
+      <dd>
+        Borang HTML adalah sebahagian yang compleks bagi HTML. Panduan ini akan membantu anda dalam memahirinya, daripada struktur hingga ke gaya, daripada penyokongan pelayar hingga ke pengawalan persendirian.</dd>
+      <dt>
+        <a href="/en-US/docs/Web_development/Historical_artifacts_to_avoid" title="HTML/Bad_copy_pasting_habits">Tabiat buruk copy-pasting</a></dt>
+      <dd>
+        Teknologi web sering kali dipelajari dengan cara melihat sumber pada laman yang lain dan menyalin semula laman tersebut. Oleh demikian, ini bermaksud tabiat buruk akan berterusan. Laman ini menyenaraikan sebahagian daripada bentuk tabiat buruk dan menunjukkan anda cara yang betul untuk mencapai matlamat yang dikehendaki.</dd>
+      <dt>
+        <a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Melukis Grafik dengan Canvas</a></dt>
+      <dd>
+        Elemen HTML yang baru untuk grafik yang boleh diprogramkan. <code>&lt;canvas&gt;</code> boleh digunakan untuk menghasilkan graf, elemen UI dan juga penyesuaian persendirian grafik.</dd>
+      <dt>
+        <a href="/en-US/docs/HTML/Tips_for_authoring_fast-loading_HTML_pages" title="HTML/Tips for authoring fast-loading HTML pages">Tip menulis Laman HTML dengan pemuatan pantas</a></dt>
+      <dd>
+        Sesebuah laman web yang optima bukan sahaja menyediakan laman yang lebih bertindak balas dengan pelawat, tetapi juaga mengurangkan beban pada server web and sambungan internet anda.</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/HTML" title="Article tagged: HTML">Lihat Semua...</a></span></p>
+  </div>
+  <div class="section">
+    <h2 class="Community" id="Community" name="Community">Mendapatkan bantuan daripada komuniti</h2>
+    <p>Anda memerlukan bantuan berkaitan HTML dan tidak dapat mencari jawapan di dalam dokumentasi ini?</p>
+    <ul>
+      <li>Runding bersama forum Mozilla yang dedikasi : {{DiscussionList("dev-tech-html", "mozilla.dev.tech.html")}}</li>
+      <li>Pergi ke <a href="http://stackoverflow.com/questions/tagged/html" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a>, sebuah laman soal jawab yang dibina secara kerjasama dan cuba cari jawapan kepada soalan anda. Jika tidak berjaya, anda boleh tujukan soalan anda disana.</li>
+    </ul>
+    <p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html"><em>Jangan lupa mengenai</em> <em>netiquette</em>...</a></span></p>
+    <h2 class="Tools" id="Tools" name="Tools">Alat memudahkan pembangunan html</h2>
+    <ul>
+      <li>Firefox' <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a><span class="external">, sebuah lanjutan popular pada navigasi tersebut membolehkan pengubahsuaian secara langsung CSS pada laman yang dilihat. Sangat praktikal bagi menguji perubahan</span>.</li>
+      <li><a class="external" href="http://validator.w3.org/">HTML Validator</a></li>
+      <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer Extension</a></li>
+      <li><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a></li>
+      <li><a class="external" href="http://prettydiff.com/?html">Pretty Diff</a></li>
+    </ul>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Tools" title="Article tagged: HTML:Tools">Lihat Semua...</a></span></p>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Topik Berkaitan</h2>
+    <ul>
+      <li><a href="/en-US/docs/CSS" title="CSS">Cascading Style Sheets (CSS)</a> digunakan untuk memberi gaya kepada HTML.</li>
+      <li><a href="/en-US/docs/Document_Object_Model_(DOM)" title="Document Object Model (DOM)">Document Object Model (DOM)</a> adalah perwakilan sesebuah dokumen HTML sebagai sebuah pokok.</li>
+      <li><a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> adalah <a href="/en-US/docs/XML" title="XML">XML</a> bagi versi bahasa tersebut.</li>
+    </ul>
+  </div>
+</div>
+<p> </p>
diff --git a/files/ms/html/tip_menulis_lamanhtml_dengan_pemuatan_pantas/index.html b/files/ms/html/tip_menulis_lamanhtml_dengan_pemuatan_pantas/index.html
new file mode 100644
index 0000000000..3fd36727fd
--- /dev/null
+++ b/files/ms/html/tip_menulis_lamanhtml_dengan_pemuatan_pantas/index.html
@@ -0,0 +1,133 @@
+---
+title: Tip menulis Laman HTML dengan pemuatan pantas
+slug: HTML/Tip_menulis_LamanHTML_dengan_pemuatan_pantas
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p>These tips are based upon common knowledge and experimentation.</p>
+<p>An optimized web page not only provides for a more responsive site for your visitors, but also reduces the load on your web servers and Internet connection. This can be crucial for high volume sites or sites which have a spike in traffic due to unusual circumstances such as breaking news stories.</p>
+<p>Optimizing page load performance is not just for content which will be viewed by narrow band dialup or mobile device visitors. It is just as important for broadband content and can lead to dramatic improvements even for your visitors with the fastest connections.</p>
+<h2 id="Tips" name="Tips">Tips</h2>
+<h3 id="Reduce_page_weight" name="Reduce_page_weight">Reduce page weight</h3>
+<p>Page weight is by far the most important factor in page-load performance.</p>
+<p>Reducing page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and CSS into external files, can improve download performance with minimal need for other changes in the page structure.</p>
+<p>Tools such as <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> can automatically strip leading whitespace and extra blank lines from valid HTML source. Other tools can "compress" JavaScript by reformatting the source or by obfuscating the source and replacing long indentifiers with shorter versions.</p>
+<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">Minimize the number of files</h3>
+<p>Reducing the number of files referenced in a web page lowers the number of <a href="/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> connections required to download a page.</p>
+<p>Depending on a browser's cache settings, it may send an <code>If-Modified-Since</code> request to the web server for each CSS, JavaScript or image file, asking whether the file has been modified since the last time it was downloaded.</p>
+<p>By reducing the number of files that are referenced within a web page, you reduce the time required for these requests to be sent, and for their responses to be received.</p>
+<p>If you use background images a lot in your css, you can reduce the amount of HTTP look-ups needed by combining the images into one, known as an image sprite. Then you just apply the same image each time you need it for a background, and adjust the x/y coordinates appropriately. This technique works best with elements that will have limited dimensions, and will not work for every use of a background image. However the fewer http requests and single image caching can help reduce pageload time.</p>
+<p>Too much time spent querying the last-modified time of referenced files can delay the initial display of a web page, since the browser must check the modification time for each CSS or JavaScript file, before rendering the page.</p>
+<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">Reduce domain lookups</h3>
+<p>Since each separate domain costs time in a DNS lookup, page-load time will grow along with the number of separate domains appearing in CSS link(s) and JavaScript and image src(es).</p>
+<p>This may not always be practical; however, you should always take care to use only the minimum necessary number of different domains in your pages.</p>
+<h3 id="Cache_reused_content" name="Cache_reused_content">Cache reused content</h3>
+<p>Make sure that any content that can be cached, is cached, and with appropriate expiration times.</p>
+<p>In particular, pay attention to the <code>Last-Modified</code> header. It allows for efficient page caching; by means of this header, information is conveyed to the user agent about the file it wants to load, such as when it was last modified. Most web servers automatically append the <code>Last-Modified</code> header to static pages (e.g. <code>.html</code>, <code>.css</code>), based on the last-modified date stored in the file system. With dynamic pages (e.g. <code>.php</code>, <code>.aspx</code>), this, of course, can't be done, and the header is not sent.</p>
+<p>So, in particular for pages which are generated dynamically, a little research on this subject is beneficial. It can be somewhat involved, but it will save a lot in page requests on pages which would normally not be cacheable.</p>
+<p>More information:</p>
+<ol>
+  <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li>
+  <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+  <li><a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></li>
+</ol>
+<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">Optimally order the components of the page</h3>
+<p>Download page content first, along with any CSS or JavaScript that may be required for its initial display, so that the user gets the quickest apparent response during page-loading. This content is typically text, and can therefore benefit from text compression in transit, thus providing an even quicker response to the user.</p>
+<p>Any dynamic features that require the page to complete loading before being used, should be initially disabled, and then only enabled after the page has loaded. This will cause the JavaScript to be loaded after the page contents, which will improve the overall appearance of the page load.</p>
+<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Reduce the number of inline scripts</h3>
+<p>Inline scripts can be expensive for page loading, since the parser must assume that an inline script could modify the page structure while parsing is in progress. Reducing the use of inline scripts in general, and reducing the use of <code>document.write()</code> to output content in particular, can improve overall page loading. Use modern <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> methods to manipulate page content for modern browsers, rather than the older approaches based on <code>document.write()</code>.</p>
+<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">Use modern CSS and valid markup</h3>
+<p>Use of modern CSS reduces the amount of markup, can reduce the need for (spacer) images, in terms of layout, and can very often replace images of stylized text -- that "cost" much more than the equivalent text-and-CSS.</p>
+<p>Using valid markup has other advantages. First, browsers will have no need to perform error-correction when parsing the HTML. ((This is aside from the philosophical issue of whether to allow format variation in user input, and then programmatically "correct" or normalize it; or whether, instead, to enforce a strict, no-tolerance input format)).</p>
+<p>Moreover, valid markup allows for the free use of other tools which can <em>pre-process</em> your web pages. For example, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> can remove whitespace and optional ending tags; however, it will refuse to run on a page with serious markup errors.</p>
+<h3 id="Chunk_your_content" name="Chunk_your_content">Chunk your content</h3>
+<p>Tables for layouts are a legacy method that should not be used any more. Layouts utilizing {{ HTMLElement("div") }} blocks, and in the near future, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="en-US/docs/CSS3_Columns">CSS3 Multi-column Layout</a> or <a href="/en-US/docs/Using_flexbox" title="en-US/docs/Using_flexbox">CSS3 Flexible Box Layout</a>, should be used instead.</p>
+<p>Tables are still considered valid markup, but should be used for displaying tabular data. To help the browser render your page quicker, you should avoid nesting your tables.</p>
+<p>Rather than deeply nesting tables as in:</p>
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;</pre>
+<p>use non-nested tables or divs as in</p>
+<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+</pre>
+<p>See also: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> and <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p>
+<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">Specify sizes for images and tables</h3>
+<p>If the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content. This not only speeds the display of the page but prevents annoying changes in a page's layout when the page completes loading. For this reason, <code>height</code> and <code>width</code> should be specified for images, whenever possible.</p>
+<p>Tables should use the CSS selector:property combination:</p>
+<pre>  table-layout: fixed;
+</pre>
+<p>and should specify widths of columns using the <code>COL</code> and <code>COLGROUP</code> html tags.</p>
+<h3 id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">Choose your user-agent requirements wisely</h3>
+<p>To achieve the greatest improvements in page design, make sure that reasonable user-agent requirements are specified for projects. Do not require your content to appear pixel-perfect in all browsers, especially not in down-version browsers.</p>
+<p>Ideally, your basic minimum requirements should be based on the consideration of modern browsers that support the relevant standards. This can include: Firefox 3.6+ on any platform, Internet Explorer 8.0+ on Windows, Opera 10+ on Windows, and Safari 4 on Mac OS X.</p>
+<p>Note, however, that many of the tips listed in this article are common-sense techniques which apply to any user agent, and can be applied to any web page, regardless of browser-support requirements.</p>
+<h2 id="Example_page_structure" name="Example_page_structure">Example page structure</h2>
+<p>· <code>HTML</code></p>
+<dl>
+  <dd>
+    · <code>HEAD</code></dd>
+</dl>
+<dl>
+  <dd>
+    <dl>
+      <dd>
+        · <code>LINK </code>...<br>
+        CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.</dd>
+    </dl>
+  </dd>
+</dl>
+<dl>
+  <dd>
+    <dl>
+      <dd>
+        · <code>SCRIPT </code>...<br>
+        JavaScript files for functions <strong>required</strong> during the loading of the page, but not any DHTML that can only run after page loads.</dd>
+      <dd>
+        Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.</dd>
+    </dl>
+  </dd>
+</dl>
+<dl>
+  <dd>
+    · <code>BODY</code></dd>
+  <dd>
+    · User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.</dd>
+</dl>
+<dl>
+  <dd>
+    <dl>
+      <dd>
+        · <code>SCRIPT </code>...<br>
+        Any scripts which will be used to perform DHTML. DHTML script typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down the initial appearance of the page load.</dd>
+      <dd>
+        Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.</dd>
+      <dd>
+        If any images are used for rollover effects, you should preload them here after the page content has downloaded.</dd>
+    </dl>
+  </dd>
+</dl>
+<h2 id="Example_page_structure" name="Example_page_structure">Use async and defer, if possible</h2>
+<p>Make the javascript scripts such that they are compatible with both the <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> and the <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> and use <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> whenever possible, specially if you have multiple script tags.<br>
+  With that, the page can stop rendering while javascript is still loading. Otherwise the browser will not render anything that is after the script tags that do not have these atributes.</p>
+<p>Note: Even though these attibutes do help a lot for the first time a page is loaded, you should use them but not rely that it will work in all browsers. If you follow all guidelines to make good javascript code, there is no need to change your code.</p>
+<h2 id="Related_Links" name="Related_Links">Related Links</h2>
+<ul>
+  <li>Book: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li>
+  <li><a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html">Site Optimization Tutorial</a> (WebMonkey)</li>
+  <li>The excellent and very complete <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li>
+</ul>
+<div class="originaldocinfo">
+  <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+  <ul>
+    <li>Author(s): Bob Clary, Technology Evangelist, Netscape Communications</li>
+    <li>Last Updated Date: Published 04 Apr 2003</li>
+    <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+    <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+  </ul>
+</div>
+<p> </p>
diff --git a/files/ms/learn/accessibility/index.html b/files/ms/learn/accessibility/index.html
new file mode 100644
index 0000000000..22617a9e99
--- /dev/null
+++ b/files/ms/learn/accessibility/index.html
@@ -0,0 +1,89 @@
+---
+title: Accessibility
+slug: Learn/Accessibility
+tags:
+  - ARIA
+  - Accessibility
+  - Articles
+  - Beginner
+  - CSS
+  - CodingScripting
+  - HTML
+  - JavaScript
+  - Landing
+  - Learn
+  - Module
+  - NeedsTranslation
+  - TopicStub
+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>
+
+<p>The Firefox Accessibility Inspector is a very useful tool for checking out accessibility issues on web pages. The following video provides a nice introduction to it:</p>
+
+<p>{{EmbedYouTube("7mqqgIxX_NU")}}</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<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">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li>
+ <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li>
+ <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li>
+ <li><a href="https://www.w3.org/WAI/ER/tools/">Web Accessibility Evaluation Tools List</a> — includes a list of web accessibility evaluation tools.</li>
+</ul>
diff --git a/files/ms/learn/html/forms/index.html b/files/ms/learn/html/forms/index.html
new file mode 100644
index 0000000000..10e84875de
--- /dev/null
+++ b/files/ms/learn/html/forms/index.html
@@ -0,0 +1,340 @@
+---
+title: Panduan Borang HTML
+slug: Learn/HTML/Forms
+translation_of: Learn/Forms
+---
+<p>Welcome to the Guide to HTML Forms. This guide is a series of articles that will help you master HTML Forms. HTML Forms are a very powerful tool to interact with a user; however, due to historical and technical reasons, it's not always obvious how you use them to their full potential. In this guide, we'll cover all aspects of HTML Forms, from structure to styling, from data handling to custom widgets. You'll learn to enjoy the great power they offer!</p>
+<h2 id="Articles">Articles</h2>
+<ol>
+  <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">My first HTML form</a></li>
+  <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>How to structure an HTML form</span></a></li>
+  <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>The native form widgets</span></a></li>
+  <li>CSS with HTML forms
+    <ol>
+      <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Styling HTML forms</span></a></li>
+      <li><a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+      <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+    </ol>
+  </li>
+  <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a></li>
+  <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a></li>
+  <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to <span>build custom form widgets</span></a></li>
+  <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a>
+    <ol>
+      <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using the FormData object</a></li>
+    </ol>
+  </li>
+  <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+</ol>
+<h2 id="HTML_Documentation">HTML Documentation</h2>
+<h3 id="HTML_Elements">HTML Elements</h3>
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Element</th>
+      <th scope="col">Related DOM interface</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("button")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td>
+      <td style="vertical-align: top;">The <code>button</code> element represents a clickable button.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td>
+      <td style="vertical-align: top;">The <span style="font-family: Courier New;">datalist</span> element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other forms elements.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td>
+      <td style="vertical-align: top;">The <span style="font-family: Courier New;">fieldset</span> is used to group several form elements within a form.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("form")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td>
+      <td style="vertical-align: top;">The <code>form</code> element represents a section of document that contains interactive element that enable a user to submit information to a web server.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("input")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td>
+      <td style="vertical-align: top;">The  <code>input</code> element is used to create interactive controls for forms.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td>
+      <td style="vertical-align: top;">The <code>keygen</code> element exists to facilitate generation of key material, and submission of the public key as part of an HTML form</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("label")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td>
+      <td style="vertical-align: top;">The <code>label</code> element represents a caption for an item in a user interface</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("legend")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td>
+      <td style="vertical-align: top;">The <code>legend</code> element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("meter")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td>
+      <td style="vertical-align: top;">The <code>meter</code> element  represents either a scalar value within a known range or a fractional value.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td>
+      <td style="vertical-align: top;">the <code>optgroup</code> element creates a group of options within a {{ HTMLElement("select") }} element.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("option")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td>
+      <td style="vertical-align: top;">the HTML<em> </em><code>option<em> </em></code>element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("output")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td>
+      <td style="vertical-align: top;">The <code>output</code> element represents the result of a calculation.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("progress")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td>
+      <td style="vertical-align: top;">The <code>progress</code> element is used to view the completion progress of a task.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("select")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td>
+      <td style="vertical-align: top;">The <code>select</code> element represents a control that presents a menu of options.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td>
+      <td style="vertical-align: top;">The <code>textarea</code> element represents a multi-line plain-text editing control.</td>
+    </tr>
+  </tbody>
+</table>
+<div class="note">
+  <p><strong>Note:</strong> All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.</p>
+</div>
+<h3 id="HTML_Attributes">HTML Attributes</h3>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th>Attribute Name</th>
+      <th>Elements</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>accept</td>
+      <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+      <td>List of types the server accepts, typically a file type.</td>
+    </tr>
+    <tr>
+      <td style="white-space: nowrap;">accept-charset</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>List of supported charsets.</td>
+    </tr>
+    <tr>
+      <td>action</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>The URI of a program that processes the information submitted via the form.</td>
+    </tr>
+    <tr>
+      <td>autocomplete</td>
+      <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+      <td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td>
+    </tr>
+    <tr>
+      <td>autofocus</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>The element should be automatically focused after the page loaded.</td>
+    </tr>
+  </tbody>
+  <tbody>
+    <tr>
+      <td>challenge</td>
+      <td>{{ HTMLElement("keygen") }}</td>
+      <td>A challenge string that is submitted along with the public key.</td>
+    </tr>
+    <tr>
+      <td>checked</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td>Indicates whether the element should be checked on page load.</td>
+    </tr>
+    <tr>
+      <td>cols</td>
+      <td>{{ HTMLElement("textarea") }}</td>
+      <td>Defines the number of columns in a textarea.</td>
+    </tr>
+    <tr>
+      <td>data</td>
+      <td>{{ HTMLElement("object") }}</td>
+      <td>Specifies the URL of the resource.</td>
+    </tr>
+    <tr>
+      <td>dirname</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>disabled</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Indicates whether the user can interact with the element.</td>
+    </tr>
+    <tr>
+      <td>enctype</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>Defines the content type of the form date when the <code>method</code> is POST.</td>
+    </tr>
+    <tr>
+      <td>for</td>
+      <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+      <td>Describes elements which belongs to this one.</td>
+    </tr>
+    <tr>
+      <td>form</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Indicates the form that is the owner of the element.</td>
+    </tr>
+  </tbody>
+  <tbody>
+    <tr>
+      <td>high</td>
+      <td>{{ HTMLElement("meter") }}</td>
+      <td>Indicates the lower bound of the upper range.</td>
+    </tr>
+    <tr>
+      <td>keytype</td>
+      <td>{{ HTMLElement("keygen") }}</td>
+      <td>Specifies the type of key generated.</td>
+    </tr>
+    <tr>
+      <td>list</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td>Identifies a list of pre-defined options to suggest to the user.</td>
+    </tr>
+    <tr>
+      <td>low</td>
+      <td>{{ HTMLElement("meter") }}</td>
+      <td>Indicates the upper bound of the lower range.</td>
+    </tr>
+    <tr>
+      <td>max</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+      <td>Indicates the maximum value allowed.</td>
+    </tr>
+    <tr>
+      <td>maxlength</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Defines the maximum number of characters allowed in the element.</td>
+    </tr>
+    <tr>
+      <td>method</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td>
+    </tr>
+    <tr>
+      <td>min</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+      <td>Indicates the minimum value allowed.</td>
+    </tr>
+    <tr>
+      <td>multiple</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+      <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td>
+    </tr>
+    <tr>
+      <td>name</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Name of the element. For example used by the server to identify the fields in form submits.</td>
+    </tr>
+    <tr>
+      <td>novalidate</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>This attribute indicates that the form shouldn't be validated when submitted.</td>
+    </tr>
+    <tr>
+      <td>optimum</td>
+      <td>{{ HTMLElement("meter") }}</td>
+      <td>Indicates the optimal numeric value.</td>
+    </tr>
+    <tr>
+      <td>pattern</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td>Defines a regular expression which the element's value will be validated against.</td>
+    </tr>
+    <tr>
+      <td>placeholder</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Provides a hint to the user of what can be entered in the field.</td>
+    </tr>
+    <tr>
+      <td>readonly</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Indicates whether the element can be edited.</td>
+    </tr>
+    <tr>
+      <td>required</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Indicates whether this element is required to fill out or not.</td>
+    </tr>
+    <tr>
+      <td>rows</td>
+      <td>{{ HTMLElement("textarea") }}</td>
+      <td>Defines the number of rows in a textarea.</td>
+    </tr>
+    <tr>
+      <td>selected</td>
+      <td>{{ HTMLElement("option") }}</td>
+      <td>Defines a value which will be selected on page load.</td>
+    </tr>
+    <tr>
+      <td>size</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+      <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td>
+    </tr>
+    <tr>
+      <td>src</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td>The URL of the embeddable content.</td>
+    </tr>
+    <tr>
+      <td>step</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>target</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>type</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
+      <td>Defines the type of the element.</td>
+    </tr>
+    <tr>
+      <td>usemap</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>value</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+      <td>Defines a default value which will be displayed in the element on page load.</td>
+    </tr>
+    <tr>
+      <td>wrap</td>
+      <td>{{ HTMLElement("textarea") }}</td>
+      <td>Indicates whether the text should be wrapped.</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Normative_reference">Normative reference</h3>
+<ul>
+  <li><a href="http://www.w3.org/TR/html5/forms.html" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML5 Specification (Forms)</a></li>
+  <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li>
+</ul>
diff --git a/files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html b/files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html
new file mode 100644
index 0000000000..0589cda2d8
--- /dev/null
+++ b/files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html
@@ -0,0 +1,170 @@
+---
+title: Add responsive images to a webpage
+slug: Learn/HTML/Howto/Add_responsive_image_to_a_webpage
+translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
+---
+<div class="summary">
+<p><span class="seoSummary">Learn about HTML features you can use to adapt your site's images to various screen sizes and display resolutions.</span></p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>You should already know how to <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">create a basic HTML document</a> and how to <a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">add static images to a webpage.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>Learn how to feed multiple source files to your {{htmlelement("img")}} element, so the browser can pull the right image for the occasion.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note:</strong> Vector images are the ultimate responsive images because the files are small while the images are scalable to any size without loss of definition. <a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_vector_image_to_a_webpage">Use vector images</a> whenever you can; they're even more effective than the techniques described here. This article demonstrates how to use multiple versions of a bitmap image, in different sizes, to provide the best possible output given the current screen size and resolution.</p>
+
+<p>Note also that while this article discusses how to implement responsive images in HTML, <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">sometimes it makes more sense to use CSS</a>.</p>
+</div>
+
+<h2 id="Why_responsive_images">Why responsive images?</h2>
+
+<p>Here's the problem we're solving:</p>
+
+<p>On a webpage, you have a box that must be filled by an image. More precisely, the box must be filled by pixels, so many wide by so many tall. Just how many pixels wide and tall depends on your visitor's device.</p>
+
+<p>You also have an image file, a set number of pixels wide and a set number of pixels tall. The image naturally should display in a box the same number of pixels wide and tall as the image. If the box is significantly too big, the image doesn't have enough pixels and it's going to look grainy. If the box is significantly too small, you're wasting bandwidth and slowing down your page by loading a larger image than you need.</p>
+
+<p><em>Responsive images </em>solves this problem by letting you offer the browser several image files, all showing the same thing but containing different numbers of pixels. That way the browser can load an image that will look sharp enough but won't needlessly slow down the page.</p>
+
+<h2 id="So_how_do_you_do_it">So how do you do it?</h2>
+
+<p>In this section, we'll solve what is, by far, the most common problem: displaying identical image content, just larger or smaller depending on the device. In the next section, we'll look at some less common scenarios.</p>
+
+<p>Remember the {{htmlelement("img")}} element? It lets you point the browser to a single source file:</p>
+
+<pre class="brush: html">&lt;img src="chalet.jpg" alt="Quaint wooden cottage in the Alps"&gt;</pre>
+
+<p>We can use two new attributes, {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} <code>sizes</code> (<strong>in addition to</strong> {{htmlattrxref("alt", "img")}} and {{htmlattrxref("src", "img")}}), to provide several additional source images and enough information to help the browser pick the right one. It looks like this when you're done:</p>
+
+<pre class="brush: html">&lt;img
+    src="chalet.jpg"
+    alt="Quaint wooden cottage in the Alps"
+    srcset="
+        chalet-256.jpg 256w,
+        chalet-512.jpg 512w,
+        chalet-1024.jpg 1024w"
+    sizes="
+        (max-width: 500px) 100vw,
+        (max-width: 900px) 40vw,
+        400px"&gt;
+</pre>
+
+<p><code>srcset</code> and <code>sizes</code> each contain comma-separated lists.</p>
+
+<p><strong>For <code>srcset</code>: </strong>Between the commas, write</p>
+
+<ol>
+ <li>an <strong>image filename</strong> (<code>chalet-256.jpg</code>)</li>
+ <li>a space</li>
+ <li>the image's <strong>inherent width in pixels</strong> (<code>256w</code>)</li>
+</ol>
+
+<p><strong>For <code>sizes</code>: </strong>Between the commas, write</p>
+
+<ol>
+ <li>a <strong>media condition</strong> (<code>(max-width:500px)</code>)</li>
+ <li>a space</li>
+ <li>the <strong>width of the slot</strong> the image will fill when the media condition is true (<code>100vw</code>)</li>
+</ol>
+
+<div class="note">
+<ul>
+ <li>For the slot width, you may provide an absolute length (<code>px</code>, <code>em</code>) or a relative length (<code>vw</code>, that is, percent of viewport width). You may also provide a combination using {{cssxref("calc")}}.</li>
+ <li>The last slot width is the default (for when no media condition is true). Therefore, the last slot width has <strong>no</strong> media condition.</li>
+ <li><code>max-width</code> simply means, "if the user's screen is no wider than X pixels".</li>
+ <li>The browser ignores everything after the first matching condition. Pay attention to the order of the media conditions.</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Why can't the browser just look at the CSS to find out the width of the image slot? </strong></p>
+
+<p>Because the browser's preloader starts downloading images before the main parser has a chance to interpret CSS and JavaScript. You want that, because images are heavy and circumventing the preloader may add another 20% on to your page load time.</p>
+</div>
+
+<h2 id="Advanced_scenarios">Advanced scenarios</h2>
+
+<h3 id="Images_at_different_resolutions_but_one_real-world_size">Images at different resolutions but one real-world size</h3>
+
+<p>If you're supporting multiple display densities, but everyone sees your image at the same real-world size, you should use <code>srcset</code> with x-descriptors and without <code>sizes</code>:</p>
+
+<pre class="brush: html">&lt;img
+    src="chalet.jpg"
+    alt="Quaint wooden cottage in the Alps"
+    srcset="chalet.jpg,
+        chalet-1-5x.jpg 1.5x,
+        chalet-2x.jpg 2x,
+        chalet-3x.jpg 3x"&gt;
+</pre>
+
+<div class="note">
+<ul>
+ <li>
+  <p>Note that <code>1x</code> is implied.</p>
+ </li>
+ <li>
+  <p><code>x</code> means, "this many device pixels for one CSS pixel"</p>
+ </li>
+</ul>
+</div>
+
+<h3 id="Art_direction">Art direction</h3>
+
+<p><strong>Art direction</strong> means cropping an image either 1) to make the main subject easier to see when the image is small or 2) to make a landscape image suitable for a portrait slot (and vice versa). (However, it must be the same image content in all cases. To, say, show phone users a jet and desktop users a ladybug is a misuse of the responsive image mechanism.)<br>
+ Art direction is a more complex problem, and needs a more complex solution: the {{htmlelement("picture")}} element. <code>&lt;picture&gt;</code> is a wrapper containing several {{htmlelement("source")}} elements, followed by the all-important {{htmlelement("img")}} element:</p>
+
+<pre class="brush: html">&lt;picture&gt;
+    &lt;source
+        media="(min-width: 1000px)"
+        srcset="chalet-desktop.jpg"&gt;
+    &lt;source
+        media="(min-width: 700px)"
+        srcset="chalet-tablet.jpg"&gt;
+    &lt;img src="chalet-phone.jpg" alt="Quaint wooden cottage in the Alps"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>Just like <code>&lt;img&gt;</code>, <code>&lt;source&gt;</code> can take <code>srcset</code> and <code>sizes</code>. In a responsive images scenario, do not use <code>&lt;source&gt;</code> and <code>src</code> together.</li>
+ <li><code>&lt;source&gt;</code> may also take a <code>media</code> attribute containing a CSS <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">media query</a>. Use <code>media</code> only in an art direction scenario, because it leaves the browser no choice of which image to use. When you do use <code>media</code>, don't offer media conditions within <code>sizes</code>.</li>
+ <li><strong>In all cases, you must provide an <code>&lt;img&gt;</code> element, with <code>src</code> and <code>alt</code>, right before <code>&lt;/picture&gt;</code>, otherwise no images will appear.</strong></li>
+</ul>
+
+<h3 id="Use_modern_image_formats_boldly">Use modern image formats boldly</h3>
+
+<p>There are several exciting new image formats (think WebP 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>&lt;picture&gt;</code> lets us continue catering to older browsers. Supply MIME types inside <code>type</code> attributes so the browser can immediately reject unsupported file types:</p>
+
+<pre class="brush: html">&lt;picture&gt;
+  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
+  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
+  &lt;img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>Do <em>not </em>use the <code>media</code> attribute, unless you also need art direction.</li>
+ <li>In a <code>&lt;source&gt;</code> element, you can only refer to images of the type declared in <code>type</code>.</li>
+ <li>As before, you're welcome to use comma-separated lists with <code>srcset</code> and <code>sizes</code>, as needed.</li>
+</ul>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby's excellent introduction to responsive images</a></li>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("picture")}}</li>
+ <li>{{htmlelement("source")}}</li>
+ <li><a href="http://responsiveimages.org/">Responsive Images Community Group</a></li>
+</ul>
diff --git a/files/ms/learn/html/howto/index.html b/files/ms/learn/html/howto/index.html
new file mode 100644
index 0000000000..7ce5cf622f
--- /dev/null
+++ b/files/ms/learn/html/howto/index.html
@@ -0,0 +1,153 @@
+---
+title: Learn HTML to solve problems
+slug: Learn/HTML/Howto
+tags:
+  - CodingScripting
+  - HTML
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/HTML/Howto
+---
+<p>Once you've covered <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">the basics</a>, there isn't one right path to learn {{Glossary("HTML")}}. You can pick up whatever you like at your own pace. HTML is simply a set of {{glossary("tag","tags")}} you can use to set up your document structure and add extra functionality to your document. The following articles explain thoroughly, with full working examples, how to use HTML for the most common, frequent Web development tasks. If you need a quick explanation of a tag, please head over to our <a href="/en-US/docs/Web/HTML/Reference">HTML reference</a>.</p>
+
+<h2 id="Common_use_cases">Common use cases</h2>
+
+<p>HTML covers a lot of very common use cases in Web design. It's highly likely you'll come across these scenarios:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basic_structure">Basic structure</h3>
+
+<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Howto/Create_a_basic_HTML_document">How to create a basic HTML document</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">How to set up a proper title hierarchy</a></li>
+</ul>
+
+<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3>
+
+<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Howto/Create_list_of_items_with_HTML">How to create list of items with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">How to stress or emphasize content</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">How to indicate that text is important</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Display_computer_code_with_HTML">How to display computer code with HTML</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">How to indicate exponential notation with HTML</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">How to provide contact information within a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Annotate_images_and_graphics">How to annotate images and graphics</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">How to mark abbreviations and make them understandable</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Add_citations_to_webpages">How to add citations to webpages</a></li>
+ <li><a href="/en-US/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>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Howto/Create_a_hyperlink">How to create a hyperlink</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Create_list_of_items_with_HTML">How to create a table of contents with HTML</a></li>
+</ul>
+
+<h3 id="Images_multimedia">Images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">How to add images to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">How to add video content to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">How to add audio content to a webpage</a></li>
+</ul>
+
+<h3 id="Scripting_styling">Scripting &amp; styling</h3>
+
+<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Howto/Use_CSS_within_a_webpage">How to use CSS within a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li>
+</ul>
+
+<h3 id="Embedded_content">Embedded content</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">How to embed a webpage within another webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">How to add Flash content within a webpage</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2>
+
+<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Forms">Forms</h3>
+
+<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li>
+</ul>
+
+<h3 id="Tabular_information">Tabular information</h3>
+
+<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p>
+
+<ul>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li>
+</ul>
+
+<h3 id="Data_representation">Data representation</h3>
+
+<ul>
+ <li><a class="new" href="/en-US/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
+</ul>
+
+<h3 id="Interactivity">Interactivity</h3>
+
+<ul>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Advanced_text_semantics">Advanced text semantics</h3>
+
+<ul>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li>
+</ul>
+
+<h3 id="Advanced_images_multimedia">Advanced images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">How to add responsive image to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Howto/Add_vector_image_to_a_webpage">How to add vector image to a webpage</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Create_dynamic_and_interactive_images">How to create dynamic and interactive images</a></li>
+</ul>
+
+<h3 id="Internationalization">Internationalization</h3>
+
+<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p>
+
+<ul>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
+ <li><a class="new" href="/en-US/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</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>
diff --git a/files/ms/learn/html/index.html b/files/ms/learn/html/index.html
new file mode 100644
index 0000000000..826dc8c29c
--- /dev/null
+++ b/files/ms/learn/html/index.html
@@ -0,0 +1,48 @@
+---
+title: HTML
+slug: Learn/HTML
+tags:
+  - Beginner
+  - CodingScripting
+  - HTML
+  - NeedsContent
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/HTML
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+<p>{{Glossary('HTML')}} is a major Web technology that defines the structure of a webpage. If you're looking to build websites, you should know about HTML.</p>
+
+<p>It's not hard to pick up the basics, but HTML is also a broad technology with many complex features, so there isn't one correct learning pathway. We suggest you start with the following pages to pick up some skills and knowledge. Move from the first basic skill to the last advanced skill, or just pick a page that looks interesting to you!</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="The_basics">The basics</h2>
+
+<p>Start here if you aren't familiar with HTML:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></dt>
+ <dd>If you've ever wondered what goes on behind the scenes in your Web browser, here's where you can start learning.</dd>
+ <dt><a href="/en-US/Learn/HTML/Howto">Solve common problems with HTML</a></dt>
+ <dd>This series of articles is here to help use HTML to solve very common problems when creating a webpage: Dealing with titles, adding images or videos, emphazing content, starting using form, etc.</dd>
+ <dt><a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">Write a simple page in HTML</a></dt>
+ <dd>In this article you will learn how to create a simple webpage.</dd>
+ <dt><a href="/en-US/Learn/HTML/HTML_tags">What are HTML tags and how to use them</a></dt>
+ <dd>This article covers the very basics of HTML. Find out what tags are and how to use them.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="In_depth">In depth</h2>
+
+<p>Once you're a bit more used to HTML, here's some more detailed stuff to explore:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTML/Reference">HTML reference</a></dt>
+ <dd>In our extensive reference guide, you'll find details about each HTML element and attribute.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/ms/learn/index.html b/files/ms/learn/index.html
new file mode 100644
index 0000000000..4140d61ab2
--- /dev/null
+++ b/files/ms/learn/index.html
@@ -0,0 +1,94 @@
+---
+title: Learning the Web
+slug: Learn
+tags:
+  - Beginner
+  - Index
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Learn
+---
+<div class="summary">
+<p><span style="font-size: 1.25rem;">anda mahu mencipta laman web dan aplikasi web anda sendiri? Anda telah datang ke tempat yang betul!</span></p>
+</div>
+
+<p>Terdapat banyak perkara yang boleh dipelajari tentang rekabentuk dan pembangunan web, tapi jangan risau. Kami di sini untuk untuk membantu anda, sama ada anda hanya mahu mempelajari sedikit kod atau untuk menjadi pembangun web profesional sepenuhnya.</p>
+
+<h2 id="Ke_mana_dahulu">Ke mana dahulu</h2>
+
+<p>Penerangan yang mana terbaik melambangkan anda?</p>
+
+<ul class="card-grid" style="list-style-type: disc;">
+ <li><span>Saya baru belajar</span>
+
+  <p>Selamat datang! Tempat terbaik untuk bermula adalah siri <a href="https://developer.mozilla.org/ms/docs/Learn/Memulakan_pembelajaran_web">Mula Belajar Web</a>. Ia menyediakan semua asas-asas untuk membantu anda bermula dengan pembangunan Web.</p>
+ </li>
+ <li><span>Saya tahu Web</span>
+  <p>Sangat bagus! Kalau begitu kami cadangkan anda mula mendalami lebih dalam teknologi-teknologi Web : <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, dcityan <a href="/en-US/docs/Learn/JavaScript">JavaScript</a></p>
+ </li>
+ <li><span>Saya sudah menguasai Web</span>
+  <p>Hebat! Kalau begitu anda mungkin berminat untuk meneroka <a href="https://developer.mozilla.org/en-US/docs/Web/Guide">Panduan </a>lanjutan dan <a href="https://developer.mozilla.org/en-US/docs/Web/Tutorials">Tutorial</a>. Anda juga boleh mempertimbangkan <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">menyumbang kepada Bahagian Pembelajaran</a> ;)</p>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Nota: </strong>Pada masa hadapan kami merancang untuk menerbitkan lebih banyak laluan pembelajaran, sebagai contoh untuk programmer berpengalaman mempelajari teknik-teknik lanjutan yang spesifik, pembangun asli yang baru dengan Web, atau orang yang hendak belajar teknik-teknik rekabentuk.</p>
+</div>
+
+<p>{{LearnBox({"title":"Quick learning: Vocabulary"})}}</p>
+
+<h2 id="Pembelajaran_dengan_orang_lain">Pembelajaran dengan orang lain</h2>
+
+<p>Jika anda ada soalan atau masih tertanya-tanya ke mana hendak dituju, Mozilla adalah komuniti global merangkumi peminat-peminat Web, termasuk mentor-mentor dan guru-guru yang sedia untuk membantu anda. Berhubunglah dengan mereka melalui WebMaker:</p>
+
+<ul>
+ <li>Bertemu dan berbincang dengan mentor dan guru di <a href="http://discourse.webmaker.org/">Forum Wacana</a>.</li>
+ <li><a href="https://events.webmaker.org/">Cari acara</a> dan belajar web dengan orang-orang hebat.</li>
+</ul>
+
+<h2 id="Berkongsi_pengetahuan">Berkongsi pengetahuan</h2>
+
+<p>Seluruh bahagian pembelajaran ini dibina oleh penyumbang-penyumbang kami. Kami perlukan anda dalam pasukan kami sama ada anda baru bermula, seorang guru, atau seorang pembangun web berkemahiran. Jika anda berminat, cuba lihat di <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">bagaimana anda boleh membantu</a>, dan kami menggalakkan anda untuk bersembang dengan kami di <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Join_our_mailing_lists">senarai mel</a> atau <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Get_into_IRC">saluran IRC</a>. :)</p>
+
+<h6 id="Subnav">Subnav</h6>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/ms/docs/Learn/Memulakan_pembelajaran_web">Mula Mempelajari Web</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/Skills">Belajar Web</a>
+  <ol>
+   <li><a href="https://webmaker.org/en-US/literacy" rel="external">Web Literacy Map</a></li>
+   <li><a href="/en-US/Learn/Web_Mechanics">Web mechanics</a></li>
+   <li><a href="/en-US/Learn/Infrastructure">Infrastructure</a></li>
+   <li><a href="/en-US/Learn/Coding-Scripting">Coding &amp; Scripting</a></li>
+   <li><a href="/en-US/Learn/Design_and_Accessibility">Design &amp; Accessibility</a></li>
+   <li><a href="/en-US/Learn/Composing_for_the_web">Writing &amp; planning</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/ms/docs/Learn#">Belajar teknologi-teknologi</a>
+  <ol>
+   <li><a href="/en-US/Learn/HTML">HTML</a></li>
+   <li><a href="/en-US/Learn/CSS">CSS</a></li>
+   <li><a href="/en-US/Learn/JavaScript">JavaScript</a></li>
+   <li><a href="/en-US/Learn/Python">Python</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/tutorial">Tutorial pembelajaran</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/Learn/tutorial/How_to_build_a_web_site">Bagaimana mencipta sebuah laman web?</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Learn/tutorial/Information_Security_Basics">Asas keselamatan maklumat</a></li>
+  </ol>
+ </li>
+ <li><a href="http://weblitmapper.webmakerprototypes.org/">Rujukan pembelajaran</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/help">Dapatkan bantuan</a>
+  <ol>
+   <li><a href="/en-US/Learn/FAQ">FAQ</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Glossary">Glosari</a></li>
+   <li><a href="http://discourse.webmakerprototypes.org/">Tanyakan soalan-soalan anda</a></li>
+   <li><a href="https://events.webmaker.org/">Bertemu dengan guru dan mentor</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">Bagaimana untuk menyumbang</a></li>
+</ol>
diff --git a/files/ms/learn/memulakan_pembelajaran_web/berurusan_dengan_fail/index.html b/files/ms/learn/memulakan_pembelajaran_web/berurusan_dengan_fail/index.html
new file mode 100644
index 0000000000..41e06b9599
--- /dev/null
+++ b/files/ms/learn/memulakan_pembelajaran_web/berurusan_dengan_fail/index.html
@@ -0,0 +1,103 @@
+---
+title: Berurusan dengan fail
+slug: Learn/Memulakan_pembelajaran_web/Berurusan_dengan_fail
+tags:
+  - Beginner
+  - CodingScripting
+  - Files
+  - Guide
+  - HTML
+  - theory
+  - website
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<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>Sebuah laman web merangkumi banyak fail: kandungan teks, kod, stylesheet, kandungan media, dan sebagainya. Apabila anda membangunkan sebuah laman web, anda perlu menghimpunkan fail-fail ini dalam struktur yang wajar di komputer anda, pastikan fail-fail ini dapat berhubung antara satu sama lain, dan menjadikan kandungan anda nampak betul, sebelum anda akhirnya <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">memuat naik ke pelayan</a>. Berurusan dengan fail membincangkan beberapa isu yang anda patut peka supaya anda boleh menetapkan struktur fail yang wajar untuk laman web anda.</p>
+</div>
+
+<h2 id="Di_manakah_laman_web_anda_patut_berada_di_dalam_komputer_anda">Di manakah laman web anda patut berada di dalam komputer anda?</h2>
+
+<p>Apabila anda mengerjakan laman web anda di  komputer anda sendiri, anda perlu menyimpan fail-fail yang berkaitan di dalam folder tunggal yang mirip dengan struktur fail untuk laman web yang diterbitkan di pelayan. Folder ini boleh berada di mana sahaja anda suka, tetapi anda patut letaknya di tempat yang anda mudah untuk menjumpainya, mungkin di Desktop anda, dalam folder Home, atau di root pemacu keras anda.</p>
+
+<ol>
+ <li>Pilih tempat untuk menyimpan projek-projek laman web anda. Di sini, cipta sebuah folder baru yang dinamakan  <code>web-projects</code> (atau serupa). Di sinilah kesemua projek-projek laman web anda akan berada.</li>
+ <li>Di dalam folder pertama ini, cipta folder lain untuk menyimpan laman web pertama anda. Namakannya <code>test-site</code> (atau sesuatu yang lebih imaginatif).</li>
+</ol>
+
+<h2 id="Catatan_tentang_casing_dan_spacing">Catatan tentang casing dan spacing</h2>
+
+<p>Anda akan perasan bahawa sepanjang artikel ini, kami meminta anda untuk menamakan folder-folder dan fail-fail sepenuhnya dalam huruf kecil tanpa jarak, Ini kerana:</p>
+
+<ol>
+ <li>Kebanyakan komputer, terutamanya pelayan web, adalah case-sensitive. Sebagai contoh, jika anda meletakkan sebuah imej di laman web anda di<code> test-site/MyImage.jpg</code>, dan dalam fail yang lain anda cuba untuk memanggil imej tersebut sebagai <code>test-site/myimage.jpg</code>, ia mungkin tidak berfungsi.</li>
+ <li>Pelayar-pelayar web, pelayan-pelayan web, dan bahasa-bahasa pengaturcaraan tidak mengendalikan ruang dengan konsisten. Sebagai contoh, jika anda menggunakan ruang di dalam nama fail, sesetengah sistem mungkin akan menganggap nama fail tersebut sebagai dua nama. Sesetengah pelayan akan menggantikan ruang tersebut di dalam nama fail anda dengan "%20"(kod karakter untuk ruang dalam URI), merosakkan kesemua pautan anda. Lebih baik untuk mengasingkan perkataan dengan tanda sempang atau garis bawah: <code>my-file.html</code> atau <code>my_file.html</code>.</li>
+</ol>
+
+<p>Untuk sebab-sebab ini, ia adalah sangat baik untuk menjadikan tabiat menulis nama-nama folder dan fail dalam huruf kecil tanpa ruang, sekurang-kurangnya sehingga anda tahu apa yang anda buat. Dengan cara tersebut anda akan kurang terlibat dengan masalah.</p>
+
+<h2 id="Apakah_struktur_yang_patut_dimiliki_laman_web_anda">Apakah struktur yang patut dimiliki laman web anda?</h2>
+
+<p>Seterusnya, mari lihat struktur apa yang laman web kita patut ada. Benda asas utama yang kita akan ada dalam apa-apa projek laman web yang kita cipta adalah fail index HTML dan folder-folder untuk menyimpan imej-imej, fail-fail style, dan fail-fail script. Mari kita cipta ini sekarang:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Secara umumnya fail ini mengandungi kandungan halaman utama, iaitu teks dan imej-imej yang dilihat orang apabila mereka mula-mula pergi ke laman anda. Dengan menggunakan editor teks anda, cipta fail baru dinamakan <code>index.html</code> dan simpan ia di dalam folder <code>test-site</code> anda.</li>
+ <li><strong><code>folder images</code></strong>: Folder ini akan mengandungi kesemua imej yang anda gunakan di laman anda. Cipta sebuah folder dinamakan <code>images</code>, di dalam folder <code>test-site anda.</code></li>
+ <li><strong><code>folder styles</code></strong>: Folder ini akan mengandungi kod CSS yang digunakan untuk mengayakan kandungan anda (sebagai contoh, menetapkan teks dan warna-warna latar belakang). Cipta sebuah folder dinamakan <code>styles</code>, di dalam folder <code>test-site anda.</code></li>
+ <li><strong><code>folder scripts</code></strong>: Folder ini akan mengandungi kesemua kod JavaScript yang digunakan untuk menambah fungsi interaktif ke dalam laman anda (cth. button yang memuatkan data apabila diklik). Cipta sebuah folder dinamakan <code>scripts</code>, di dalam folder <code>test-site anda.</code></li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Dalam komputer Windows, anda mungkin menghadapi masalah melihat nama-nama fail kerana Windows mempunyai satu pilihan yang menjengkelkan dinamakan <strong>Hide extensions for known file types </strong>yang dihidupkan secara default. Secara umumnya, anda boleh mematikannya dengan pergi ke Windows Explorer, memilih pilihan <strong>Folder options...</strong>, menyahtik pada kotak pilihan <strong>Hide extensions for known file types</strong>, kemudian klik <strong>OK</strong>. Untuk maklumat spesifik merangkumi versi Windows anda, lakukan carian Yahoo!</p>
+</div>
+
+<h2 id="Path_fail">Path fail</h2>
+
+<p>Untuk membuat fail-fail berhubung antara satu sama lain, anda perlu menyediakan path antara mereka — secara asasnya sebuah route supaya satu fail tahu di mana fail yang satu lagi. Untuk mendemonstrasikan ini, kita akan memasukkan sedikit HTML ke dalam fail <code>index.html</code>, dan membuatkan ia memaparkan imej yang anda pilih di dalam artikel "Bagaimanakah laman web anda akan kelihatan?"</p>
+
+<ol>
+ <li>Salin imej yang anda pilih sebelum ini ke dalam folder <code>images</code> anda.</li>
+ <li>Buka fail <code>index.html</code> anda, dan masukkan kod di bawah ke dalam fail yang ditunjukkan. Jangan risau tentang apa semua maksud ini buat masa sekarang — kita akan lihat dengan lebih terperinci pada strukturnya nanti dalam siri tersebut.
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>Baris <code>&lt;img src="" alt="My test image"&gt;</code> adalah kod HTML yang memasukkan sebuah gambar ke dalam laman tersebut. Kita perlu beritahu HTML di mana gambar tersebut. Imej tersebut berada dalam direktori <em>images</em> , yang mana dalam direktori sama seperti <code>index.html</code>. Untuk menelusuri struktur fail daripada <code>index.html</code> kepada imej kita, path fail yang kita perlukan adalah <code>images/nama-failimej-anda</code>. Sebagai contoh, imej kita dinamakan <code>firefox-icon.png</code>, jadi path fail adalah <code>images/firefox-icon.png</code>.</li>
+ <li>Masukkan path fail ke dalam kod HTML di antara tanda petikan berganda kod <code>src=""</code>.</li>
+ <li>Save fail HTML anda, kemudian muatkannya di pelayar web anda (klik dua kali fail tersebut). Anda patut boleh lihat halaman web baru anda memaparkan imej anda!</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 peraturan umum untuk path fail:</p>
+
+<ul>
+ <li>Untuk menghubungkan fail sasaran di dalam direktori yang sama dengan fail HTML yang memanggilnya, cuma guna nama fail, cth. <code>imej-saya.jpg.</code></li>
+ <li>Untuk merujuk fail di dalam subdirektori, tulis nama direktori tersebut di hadapan path, tambahan tanda palang ke hadapan, cth. <code>subdirektori/imej-saya.jpg</code>.</li>
+ <li>Untuk menghubungkan fail sasaran di dalam direktori di atas fail HTML yang memanggil, tulis dua titik. Jadi sebagai contoh, jika <code>index.html</code> berada dalam subfolder <code>test-site</code> dan <code>imej-saya.png berada dalam test-site, </code>anda boleh merujuk <code>imej-saya.png </code>daripada <code>index.html menggunakan </code> <code>../imej-saya.png</code>. <code> </code></li>
+ <li>Anda boleh menggabungkan ini sebanyak mungkin yang anda suka, sebagai contoh <code>../subdirektori/subdirektori-lain/imej-saya.png</code>.</li>
+</ul>
+
+<p>Buat masa ini, ini adalah antara kesemua yang anda perlu tahu.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Sistem fail Windows cenderung untuk menggunakan garis palang terbalik, bukannya garis palang ke hadapan, cth. <code>C:\windows</code>. Ini tidak penting  — walaupun anda membangunkan laman web anda dengan Windows, anda masih perlu menggunakan garis palang ke hadapan di dalam kod anda.</p>
+</div>
+
+<h2 id="Apakah_lagi_yang_perlu_diselesaikan">Apakah lagi yang perlu diselesaikan?</h2>
+
+<p>Cukup lah buat masa ini. Struktur folder anda patut kelihatan 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>
diff --git a/files/ms/learn/memulakan_pembelajaran_web/index.html b/files/ms/learn/memulakan_pembelajaran_web/index.html
new file mode 100644
index 0000000000..fd07a2d78a
--- /dev/null
+++ b/files/ms/learn/memulakan_pembelajaran_web/index.html
@@ -0,0 +1,57 @@
+---
+title: Memulakan pembelajaran Web
+slug: Learn/Memulakan_pembelajaran_web
+tags:
+  - Beginner
+  - CSS
+  - Design
+  - Guide
+  - HTML
+  - Index
+  - publishing
+  - theory
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em><strong>Memulakan pembelajaran Web</strong></em> adalah siri ringkas dan padat memperkenalkan anda kepada praktikaliti pembangunan Web. Anda akan menetapkan alatan yang anda perlukan untuk membina halaman web dan menerbitkan kod ringkas anda sendiri.</p>
+</div>
+
+<h2 id="Kisah_laman_web_pertama_anda">Kisah laman web pertama anda</h2>
+
+<p>Ia adalah banyak kerja untuk mencipta laman web yang profesional, jadi jika anda masih baru dalam pembangunan web kami menggalakkan anda supaya bermula daripada bawah. Anda tidak akan mendirikan sebuah lagi Facebook dengan serta merta, namun ianya bukan susah untuk menerbitkan laman web ringkas anda sendiri ke dalam talian, jadi kita akan bermula daripada situ.</p>
+
+<p>Dengan berusaha menerusi artikel-artikel yang disenaraikan mengikut urutan di bawah, anda akan bermula daripada tiada kepada menerbitkan halaman web pertama anda ke dalam talian. Jadi mari kita bermula!</p>
+
+<h3 id="Memasang_perisian_asas"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Memasang perisian asas</a></h3>
+
+<p>Apabila datang kepada soal alatan untuk membina laman web, terdapat banyak pilihan yang boleh dipilih. Jika anda baru sahaja bermula, anda mungkin akan keliru dengan pelbagai jenis editor kod, kerangka kerja, dan alatan pengujian di luar sana. Dalam artikel <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Memasang perisian asas </a>kami menunjukkan anda langkah demi langkah bagaimana untuk memasang hanya perisian yang anda perlukan untuk memulakan sedikit pembangunan asas web.</p>
+
+<h3 id="Bagaimana_laman_web_anda_akan_kelihatan"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Bagaimana laman web anda akan kelihatan?</a></h3>
+
+<p>Sebelum anda mula menulis kod untuk laman web anda, anda patut rancang ia dahulu. Apakah maklumat yang anda hendak tunjuk? Apa font dan warna yang anda gunakan? <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Bagaimana laman web anda akan kelihatan? </a>Kami akan mengariskan cara mudah yang anda boleh ikut untuk merancang kandungan dan rekabentuk laman web anda.</p>
+
+<h3 id="Berurusan_dengan_fail-fail"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Berurusan dengan fail-fail</a></h3>
+
+<p>Sebuah laman web merangkumi banyak fail: kandungan teks, kod, lembaran gaya, kandungan media, dan seterusnya. Apabila anda membina sebuah laman web, anda perlu menghimpunkan fail-fail ini ke dalam struktur yang wajar dan memastikan fail-fail ini dapat berhubung antara satu sama lain. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Berurusan dengan fail-fail</a> menerangkan bagaimana untuk menetapkan struktur fail yang wajar untuk laman web anda dan isu-isu yang anda perlu sedar.</p>
+
+<h3 id="Asas-asas_HTML"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">Asas-asas HTML</a></h3>
+
+<p>Hypertext Markup Language (HTML) adalah kod yang anda guna untuk mengstrukturkan kandungan web anda, dan memberinya makna dan tujuan. Sebagai contoh, adakah kandungan saya adalah satu set perenggan, atau satu senarai titik bullet? Adakah saya ada gambar-gambar di dalam halaman saya? Adakah saya ada jadual data? Tanpa membebankan anda, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">Asas-asas HTML </a>menyediakan maklumat yang cukup untuk membiasakan diri anda dengan HTML.</p>
+
+<h3 id="Asas-asas_CSS"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">Asas-asas CSS</a></h3>
+
+<p>Cascading Stylesheet (CSS) adalah kod yang anda guna untuk menggayakan laman web anda. Sebagai contoh, adakah anda mahu teks hitam atau merah? Di manakah kandungan patut dilukis di atas skrin? Apakah gambar dan warna latar belakang yang patut digunakan untuk menghias laman web anda? <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">Asas-asas CSS </a>akan membawa anda menelusuri apa yang anda perlukan untuk bermula.</p>
+
+<h3 id="Asas-asas_JavaScript"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">Asas-asas JavaScript</a></h3>
+
+<p>JavaScript adalah bahasa pengaturcaraan yang anda guna untuk menambah ciri-ciri interaktif kepada laman web anda, sebagai contoh, permainan, perkara yang berlaku apabila butang ditekan atau data dihantar dalam borang, kesan penggayaan dinamik, animasi, dan banyak lagi. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">Asas-asas JavaScript</a> memberi anda idea apa yang boleh dibuat dengan bahasa yang menarik ini, dan bagaimana untuk bermula.</p>
+
+<h3 id="Menerbitkan_laman_web_anda"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Menerbitkan laman web anda</a></h3>
+
+<p>Sebaik sahaja anda siap menulis kod dan menyusun fail-fail yang menjadikan laman web anda, anda perlu meletakkan semuanya di atas talian supaya orang boleh menjumpainya. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Menerbitkan kod sampel anda</a> menerangkan bagaimana untuk meletakkan kod sampel ringkas anda di atas talian dengan usaha yang sedikit.</p>
+
+<h3 id="Bagaimana_web_berfungsi"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Bagaimana web berfungsi</a></h3>
+
+<p>Apabila anda mengakses laman web kegemaran anda, banyak perkara yang merumitkan berlaku di belakang yang anda mungkin tidak tahu. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Bagaimana web berfungsi</a> menggariskan apa yang berlaku apabila anda melihat paparan halaman web di komputer anda.</p>
diff --git a/files/ms/learn/memulakan_pembelajaran_web/memasang_perisian_asas/index.html b/files/ms/learn/memulakan_pembelajaran_web/memasang_perisian_asas/index.html
new file mode 100644
index 0000000000..2363f77c32
--- /dev/null
+++ b/files/ms/learn/memulakan_pembelajaran_web/memasang_perisian_asas/index.html
@@ -0,0 +1,58 @@
+---
+title: Memasang Perisian Asas
+slug: Learn/Memulakan_pembelajaran_web/Memasang_Perisian_Asas
+tags:
+  - Beginner
+  - Browser
+  - Learn
+  - Setup
+  - Tools
+  - WebMechanics
+  - text editor
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Dalam artikel <em><strong>Memasang Perisian Asas</strong></em>, kami akan tunjuk anda alatan yang anda perlukan untuk melakukan pembangunan web yang mudah.</p>
+</div>
+
+<h2 id="Apakah_alatan_yang_digunakan_profesional">Apakah alatan yang digunakan profesional?</h2>
+
+<ul>
+ <li><strong>Sebuah komputer</strong>.Mungkin itu kedengaran jelas bagi sesetengah orang, tetapi sesetengah daripada anda membaca artikel ini daripada telefon atau komputer perpustakaan. Untuk pembangunan web yang serius, ia adalah lebih baik untuk melabur untuk sebuah komputer desktop (Windows, Mac, Linux).</li>
+ <li><strong>Editor teks</strong>,untuk menulis kod. Boleh jadi editor teks percuma (contohnya <a href="http://notepad-plus-plus.org/">Notepad++</a>, <a href="https://wiki.gnome.org/Apps/Gedit">gedit</a>, <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> or <a href="http://www.barebones.com/products/textwrangler/">Text Wrangler</a>), editor teks komersial (<a href="http://www.sublimetext.com/">Sublime Text</a> atau <a href="https://panic.com/coda/">Coda</a>) atau editor hibrid (<a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>).</li>
+ <li><strong>Pelayar Web </strong>,untuk menguji kod. Pada masa ini, pelayar yang selalu digunakan adalah <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>, dan <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>.</li>
+ <li><strong>Editor grafik</strong>, seperti <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, atau <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, untuk membuat gambar-gambar untuk halaman-halaman web anda..</li>
+ <li><strong>Sistem kawalan versi</strong>, untuk berkolaborasi dalam projek yang melibatkan pasukan, berkongsi kod dan aset, dan mengelak konflik pengeditan. Pada masa ini <a href="http://git-scm.com/">Git</a> adalah alat kawalan versi paling terkenal, begitu juga servis hosting kod <a href="https://github.com/">GitHub</a>, yang berasaskan Git, juga agak terkenal.</li>
+ <li><strong>Program FTP</strong>, untuk memuat naik halaman-halaman web ke pelayan untuk paparan umum. Terdapat banyak program-program ini termasuk <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>Sistem automasi</strong>, seperti <a href="http://gruntjs.com/">Grunt</a> atau <a href="http://gulpjs.com/">Gulp</a>, untuk melaksanakan tugas yang berulang-ulang secara automatik. Sebagai contoh,  mengurangkan kod dan menjalankan ujian-ujian.</li>
+ <li>Templat, library, kerangka kerja, dan lain-lain, untuk mempercepatkan penulisan fungsi lazim.</li>
+ <li>Lebih banyak alatan lain!</li>
+</ul>
+
+<h2 id="Apakah_alatan_yang_saya_perlukan_sekarang">Apakah alatan yang saya perlukan sekarang?</h2>
+
+<p>Itu kelihatan seperti senarai yang menakutkan, tetapi nasib baik anda boleh memulakan pembangunan web tanpa mengetahui apa-apa tentang kebanyakan alatan di atas. Dalam artikel ini kami akan menetapkan anda dengan seminimun alatan — editor teks dan beberapa pelayar web moden.</p>
+
+<h3 id="Memasang_editor_teks">Memasang editor teks</h3>
+
+<p>Anda mungkin sudah ada editor teks asas dalam komputer anda. Secara lalai Windows merangkumi Notepad dan OS X datang dengan TextEdit. Distro Linx bergantung, Ubuntu dalam dengan gedit secara lalai.</p>
+
+<p>Untuk pembangunan Web, anda mungkin boleh buat lebih baik daripada Notepad atau TextEdit. Kami menyarankan anda bermula dengan <a href="http://notepad-plus-plus.org/">Notepad++</a> untuk Windows atau <a href="http://www.barebones.com/products/textwrangler/">Text Wrangler</a> untuk Mac. Kedua-duanya percuma dan lebih berciri penuh berbanding Notepad dan TextEdit.</p>
+
+<h3 id="Memasang_pelayar-pelayar_web_moden">Memasang pelayar-pelayar web moden</h3>
+
+<p>Buat masa ini, kita hanya pasang beberapa pelayar web desktop untuk menguji kod kita di dalamnya. Pilih sistem operasi anda di bawah dan klik pautan yang relevan untuk memuat turun pemasang-pemasang pelayar kegemaran 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> (Jika anda ada Windows 8 atau ke atas, anda boleh memasang IE 10 dan ke atas; jika tidak, anda patut pasang pelayar alternatif lain)</li>
+ <li>Mac: <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 datang dengan iOS dan OS X secara lalai)</li>
+</ul>
+
+<p>Sebelum meneruskan, anda patut pasang sekurang-kurangnya dua daripada pelayar-pelayar ini dan sediakannya untuk pengujian.</p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/ms/learn/server-side/express_nodejs/forms/index.html b/files/ms/learn/server-side/express_nodejs/forms/index.html
new file mode 100644
index 0000000000..6e50f7b27a
--- /dev/null
+++ b/files/ms/learn/server-side/express_nodejs/forms/index.html
@@ -0,0 +1,276 @@
+---
+title: 'Express Tutorial Part 6: Working with forms'
+slug: Learn/Server-side/Express_Nodejs/forms
+tags:
+  - Beginner
+  - CodingScripting
+  - Express
+  - Forms
+  - HTML forms
+  - Learn
+  - NeedsTranslation
+  - Node
+  - TopicStub
+  - server-side
+translation_of: Learn/Server-side/Express_Nodejs/forms
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">In this tutorial we'll show you how to work with HTML Forms in Express, using Pug, and in particular how to write forms to create, update, and delete documents from the database.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Complete all previous tutorial topics, including <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand how write forms to get data from users, and update the database with this data.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Overview">Overview</h2>
+
+<p>An <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Form</a> is a group of one or more fields/widgets on a web page that can be used to collect information from users for submission to a server. Forms are a flexible mechanism for collecting user input because there are suitable form inputs available for entering many different types of data—text boxes, checkboxes, radio buttons, date pickers, etc. Forms are also a relatively secure way of sharing data with the server, as they allow us to send data in <code>POST</code> requests with cross-site request forgery protection.</p>
+
+<p>Working with forms can be complicated! Developers need to write HTML for the form, validate and properly sanitize entered data on the server (and possibly also in the browser), repost the form with error messages to inform users of any invalid fields, handle the data when it has successfully been submitted, and finally respond to the user in some way to indicate success.</p>
+
+<p>In this tutorial we're going to show you how the above operations may be performed in <em>Express</em>. Along the way we'll extend the <em>LocalLibrary</em> website to allow users to create, edit and delete items from the library.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We haven't looked at how to restrict particular routes to authenticated or authorised users, so at this point any user will be able to make changes to the database.</p>
+</div>
+
+<h3 id="HTML_Forms">HTML Forms</h3>
+
+<p>First a brief overview of <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a>. Consider a simple HTML form, with a single text field for entering the name of some "team", and its associated label:</p>
+
+<p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p>
+
+<p>The form is defined in HTML as a collection of elements inside <code>&lt;form&gt;...&lt;/form&gt;</code> tags, containing at least one <code>input</code> element of <code>type="submit"</code>.</p>
+
+<pre class="brush: html">&lt;form action="/team_name_url/" method="post"&gt;
+    &lt;label for="team_name"&gt;Enter name: &lt;/label&gt;
+    &lt;input id="team_name" type="text" name="name_field" value="Default name for team."&gt;
+    &lt;input type="submit" value="OK"&gt;
+&lt;/form&gt;</pre>
+
+<p>While here we have included just one (text) field for entering the team name, a form <em>may</em> contain any number of other input elements and their associated labels. The field's <code>type</code> attribute defines what sort of widget will be displayed. The <code>name</code> and <code>id</code> of the field are used to identify the field in JavaScript/CSS/HTML, while <code>value</code> defines the initial value for the field when it is first displayed. The matching team label is specified using the <code style="font-style: normal; font-weight: normal;">label</code> tag (see "Enter name" above), with a <code style="font-style: normal; font-weight: normal;">for</code> field containing the <code style="font-style: normal; font-weight: normal;">id</code> value of the associated <code style="font-style: normal; font-weight: normal;">input</code>.</p>
+
+<p>The <code>submit</code> input will be displayed as a button (by default)—this can be pressed by the user to upload the data contained by the other input elements to the server (in this case, just the <code>team_name</code>). The form attributes define the HTTP <code>method</code> used to send the data and the destination of the data on the server (<code>action</code>):</p>
+
+<ul>
+ <li><code>action</code>: The resource/URL where data is to be sent for processing when the form is submitted. If this is not set (or set to an empty string), then the form will be submitted back to the current page URL.</li>
+ <li><code>method</code>: The HTTP method used to send the data: <code>POST</code> or <code>GET</code>.
+  <ul>
+   <li>The <code>POST</code> method should always be used if the data is going to result in a change to the server's database, because this can be made more resistant to cross-site forgery request attacks.</li>
+   <li>The <code>GET</code> method should only be used for forms that don't change user data (e.g. a search form). It is recommended for when you want to be able to bookmark or share the URL.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Form_handling_process">Form handling process</h3>
+
+<p>Form handling uses all of the same techniques that we learned for displaying information about our models: the route sends our request to a controller function which performs any database actions required, including reading data from the models, then generates and returns an HTML page. What makes things more complicated is that the server also needs to be able to process data provided by the user, and redisplay the form with error information if there are any problems.</p>
+
+<p>A process flowchart for processing form requests is shown below, starting with a request for a page containing a form (shown in green):<img alt="" src="https://mdn.mozillademos.org/files/14478/Web%20server%20form%20handling.png" style="height: 649px; width: 800px;"></p>
+
+<p>As shown in the diagram above, the main things that form handling code needs to do are are:</p>
+
+<ol>
+ <li>Display the default form the first time it is requested by the user.
+  <ul>
+   <li>The form may contain blank fields (e.g. if you're creating a new record), or it may be pre-populated with initial values (e.g. if you are changing a record, or have useful default initial values).</li>
+  </ul>
+ </li>
+ <li>Receive data submitted by the user, usually in an HTTP <code>POST</code> request.</li>
+ <li>Validate and sanitize the data.</li>
+ <li>If any data is invalid, re-display the form—this time with any user populated values and error messages for the problem fields.</li>
+ <li>If all data is valid, perform required actions (e.g. save the data in the database, send a notification email, return the result of a search, upload a file, etc.)</li>
+ <li>Once all actions are complete, redirect the user to another page.</li>
+</ol>
+
+<p>Often form handling code is implemented using a <code>GET</code> route for the initial display of the form and a <code>POST</code> route to the same path for handling validation and processing of form data. This is the approach that will be used in this tutorial!</p>
+
+<p>Express itself doesn't provide any specific support for form handling operations, but it can use middleware to process <code>POST</code> and <code>GET</code> parameters from the form, and to validate/sanitize their values.</p>
+
+<h3 id="Validation_and_sanitization">Validation and sanitization</h3>
+
+<p>Before the data from a form is stored it must be validated and sanitized:</p>
+
+<ul>
+ <li>Validation checks that entered values are appropriate for each field (are in the right range, format, etc.) and that values have been supplied for all required fields.</li>
+ <li>Sanitization removes/replaces characters in the data that might potentially be used to send malicious content to the server.</li>
+</ul>
+
+<p>For this tutorial we'll be using the popular <a href="https://www.npmjs.com/package/express-validator">express-validator</a> module to perform both validation and sanitization of our form data.</p>
+
+<h4 id="Installation">Installation</h4>
+
+<p>Install the module by running the following command in the root of the project.</p>
+
+<pre class="brush: bash">npm install express-validator --save
+</pre>
+
+<h4 id="Using_express-validator">Using express-validator</h4>
+
+<div class="note">
+<p><strong>Note:</strong> The <a href="https://github.com/ctavan/express-validator#express-validator">express-validator</a> guide on  Github provides a good overview of API. We recommend you read that to get an idea of all its capabilities (including creating custom validators). Below we cover just a subset that is useful for the <em>LocalLibrary</em>.</p>
+</div>
+
+<p>To use the validator in our controllers we have to <em>require</em> the functions we want to use from the <strong>'express-validator/check</strong>' and <strong>'express-validator/filter</strong>' modules, as shown below:</p>
+
+<pre class="brush: js">const { body,validationResult } = require('express-validator/check');
+const { sanitizeBody } = require('express-validator/filter');
+</pre>
+
+<p>There are many functions available, allowing you to check and sanitize data from request parameters, body, headers, cookies, etc., or all of them at once. For this tutorial, we'll primarily be using <code>body</code>, <code>sanitizeBody</code>, and <code>validationResult</code> (as "required" above).</p>
+
+<p>The functions are defined as below:</p>
+
+<ul>
+ <li><code><a href="https://github.com/ctavan/express-validator#bodyfields-message">body(fields[, message])</a></code>: Specifies a set of fields in the request body (a <code>POST</code> parameter) to validate along with an optional error message that can be displayed if it fails the tests. The validation criteria are daisy-chained to the <code>body()</code> method. For example, the first check below tests that the "name" field is not empty and sets an error message "Empty name" if it is not. The second test checks that the age field is a valid date, and using <code>optional()</code> to specify that null and empty strings will not fail validation.
+
+  <pre class="brush: js">body('name', 'Empty name').isLength({ min: 1 }),
+body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(),
+</pre>
+  You can also daisy chain different validators, and add messages that are displayed if the preceding validators are true.
+
+  <pre class="brush: js">body('name').isLength({ min: 1 }).trim().withMessage('Name empty.')
+    .isAlpha().withMessage('Name must be alphabet letters.'),
+</pre>
+
+  <div class="note">
+  <p><strong>Note:</strong> You can also add inline sanitizers like <code>trim()</code>, as shown above. However sanitizers applied here ONLY apply to the validation step. If you want the final output sanitized, you need to use a separate sanitizer method, as shown below.</p>
+  </div>
+ </li>
+ <li><code><a href="https://github.com/ctavan/express-validator#sanitizebodyfields">sanitizeBody(fields)</a></code>: Specifies a body field to sanitize. The sanitization operations are then daisy-chained to this method. For example, the <code>escape()</code> sanitization operation below removes HTML characters from the name variable that might be used in JavaScript cross-site scripting attacks.
+  <pre class="brush: js">sanitizeBody('name').trim().escape(),
+sanitizeBody('date').toDate(),</pre>
+ </li>
+ <li><code><a href="https://github.com/ctavan/express-validator#validationresultreq">validationResult(req)</a></code>: Runs the validation, making errors available in the form of a <code>validation</code> result object. This is invoked in a separate callback, as shown below:
+  <pre class="brush: js">(req, res, next) =&gt; {
+    // Extract the validation errors from a request.
+    const errors = validationResult(req);
+
+    if (!errors.isEmpty()) {
+        // There are errors. Render form again with sanitized values/errors messages.
+        // Error messages can be returned in an array using `errors.array()`.
+        }
+    else {
+        // Data from form is valid.
+    }
+}</pre>
+  We use the validation result's <code>isEmpty()</code> method to check if there were errors, and its <code>array()</code> method to get the set of error messages. See the <a href="https://github.com/ctavan/express-validator#validation-result-api">Validation Result API</a> for more information.</li>
+</ul>
+
+<p>The validation and sanitization chains are middleware that should be passed to the Express route handler (we do this indirectly, via the controller). When the middleware runs, each validator/sanitizer is run in the order specified.</p>
+
+<p>We'll cover some real examples when we implement the <em>LocalLibrary</em> forms below.</p>
+
+<h3 id="Form_design">Form design</h3>
+
+<p>Many of the models in the library are related/dependent—for example, a <code>Book</code> <em>requires</em> an <code>Author</code>, and <em>may</em> also have one or more <code>Genres</code>. This raises the question of how we should handle the case where a user wishes to:</p>
+
+<ul>
+ <li>Create an object when its related objects do not yet exist (for example, a book where the author object hasn't been defined).</li>
+ <li>Delete an object that is still being used by another object (so for example, deleting a <code>Genre</code> that is still being used by a <code>Book</code>).</li>
+</ul>
+
+<p>For this project we will simplify the implementation by stating that a form can only:</p>
+
+<ul>
+ <li>Create an object using objects that already exist (so users will have to create any required <code>Author</code> and <code>Genre</code> instances before attempting to create any <code>Book</code> objects).</li>
+ <li>Delete an object if it is not referenced by other objects (so for example, you won't be able to delete a <code>Book</code> until all associated <code>BookInstance</code> objects have been deleted).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> A more "robust" implementation might allow you to create the dependent objects when creating a new object, and delete any object at any time (for example, by deleting dependent objects, or by removing references to the deleted object from the database).</p>
+</div>
+
+<h3 id="Routes">Routes</h3>
+
+<p>In order to implement our form handling code we will need two routes that have the same URL pattern. The first (<code>GET</code>) route is used to display a new empty form for creating the object. The second route (<code>POST</code>) is used for validating data entered by the user, and then saving the information and redirecting to the detail page (if the data is valid) or redisplaying the form with errors (if the data is invalid).</p>
+
+<p>We have already created the routes for all our model's create pages in <strong>/routes/catalog.js</strong> (in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial</a>). For example, the genre routes are shown below:</p>
+
+<pre class="brush: js">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id).
+router.get('/genre/create', genre_controller.genre_create_get);
+
+// POST request for creating Genre.
+router.post('/genre/create', genre_controller.genre_create_post);
+</pre>
+
+<h2 id="Express_forms_subarticles">Express forms subarticles</h2>
+
+<p>The following subarticles will take us through the process of adding the required forms to out example application. You need to read and work through each one in turn, before moving on to the next one.</p>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form">Create Genre form</a> — Defining our page to create <code>Genre</code> objects.</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form">Create Author form</a> — Defining a page for creating <code>Author</code> objects.</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_book_form">Create Book form</a> — Defining a page/form to create <code>Book</code> objects.</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form">Create BookInstance form</a> — Defining a page/form to create <code>BookInstance</code> objects.</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form">Delete Author form</a> — Defining a page to delete <code>Author</code> objects.</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form">Update Book form</a> — Defining  page to update <code>Book</code> objects.</li>
+</ol>
+
+<h2 id="Challenge_yourself">Challenge yourself</h2>
+
+<p>Implement the delete pages for the <code>Book</code>, <code>BookInstance</code>, and <code>Genre</code> models, linking them from the associated detail pages in the same way as our <em>Author delete </em>page. The pages should follow the same design approach:</p>
+
+<ul>
+ <li>If there are references to the object from other objects, then these other objects should be displayed along with a note that this record can't be deleted until the listed objects have been deleted.</li>
+ <li>If there are no other references to the object then the view should prompt to delete it. If the user presses the <strong>Delete</strong> button, the record should then be deleted.</li>
+</ul>
+
+<p>A few tips:</p>
+
+<ul>
+ <li>Deleting a <code>Genre</code> is just like deleting an <code>Author</code> as both objects are dependencies of <code>Book</code> (so in both cases you can delete the object only when the associated books are deleted).</li>
+ <li>Deleting a <code>Book</code> is also similar, but you need to check that there are no associated <code>BookInstances</code>.</li>
+ <li>Deleting a <code>BookInstance</code> is the easiest of all, because there are no dependent objects. In this case you can just find the associated record and delete it.</li>
+</ul>
+
+<p>Implement the update pages for the <code>BookInstance</code>, <code>Author</code>, and <code>Genre</code> models, linking them from the associated detail pages in the same way as our <em>Book update </em>page.</p>
+
+<p>A few tips:</p>
+
+<ul>
+ <li>The <em>Book update page</em> we just implemented is the hardest! The same patterns can be used for the update pages for the other objects.</li>
+ <li>The <code>Author</code> date of death and date of birth fields, and the <code>BookInstance</code> due_date field are the wrong format to input into the date input field on the form (it requires data in form "YYYY-MM-DD"). The easiest way to get around this is to define a new virtual property for the dates that formats the dates appropriately, and then use this field in the associated view templates.</li>
+ <li>If you get stuck, there are examples of the update pages in <a href="https://github.com/mdn/express-locallibrary-tutorial">the example here</a>.</li>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p><em>Express</em>, node, and third party packages on NPM provide everything you need to add forms to your website. In this article you've learned how to create forms using <em>Pug</em>, validate and sanitize input using <em>express-validator</em>, and add, delete, and modify records in the database.</p>
+
+<p>You should now understand how to add basic forms and form-handling code to your own node websites!</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.npmjs.com/package/express-validator">express-validator</a> (npm docs).</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ms/learn/server-side/express_nodejs/index.html b/files/ms/learn/server-side/express_nodejs/index.html
new file mode 100644
index 0000000000..968f3e40e2
--- /dev/null
+++ b/files/ms/learn/server-side/express_nodejs/index.html
@@ -0,0 +1,77 @@
+---
+title: Express web framework (Node.js/JavaScript)
+slug: Learn/Server-side/Express_Nodejs
+tags:
+  - Beginner
+  - CodingScripting
+  - Express
+  - Express.js
+  - Intro
+  - JavaScript
+  - Learn
+  - NeedsTranslation
+  - Node
+  - Server-side programming
+  - TopicStub
+  - node.js
+translation_of: Learn/Server-side/Express_Nodejs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Express is a popular unopinionated 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.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module you will need to understand what server-side web programming and web frameworks are, ideally by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module. A general knowledge of programming concepts and <a href="/en-US/docs/Web/JavaScript">JavaScript</a> is highly recommended, but not essential to understanding the core concepts.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This website has many useful resources for learning JavaScript<em> in the context of client-side development</em>: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (learning). The core JavaScript language and concepts are the same for server-side development on Node.js and this material will be relevant. Node.js offers <a href="https://nodejs.org/dist/latest-v6.x/docs/api/">additional APIs</a> for supporting functionality that is useful in browserless environments, e.g. to create HTTP servers and access the file system, but does not support JavaScript APIs for working with the browser and DOM.</p>
+
+<p>This guide will provide some information about working with Node.js and Express, and there are numerous other excellent resources on the Internet and in books — some of these linked from <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) and <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></dt>
+ <dd>In this first Express article we answer the questions "What is Node?" and "What is Express?" and give you an overview of what makes the Express web framework special. We'll outline the main features, and show you some of the main building blocks of an Express application (although at this point you won't yet have a development environment in which to test it).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></dt>
+ <dd>Now that you know what Express is for, we'll show you how to set up and test a Node/Express development environment on Windows, Linux (Ubuntu), and Mac OS X. Whatever common operating system you are using, this article should give you what you need to be able to start developing Express apps.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></dt>
+ <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></dt>
+ <dd>This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific routes, templates/views, and databases.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></dt>
+ <dd>This article briefly introduces databases for Node/Express. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <em>LocalLibrary</em> website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways you can access model data.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></dt>
+ <dd>In this tutorial we'll set up routes (URL handling code) with "dummy" handler functions for all the resource endpoints that we'll eventually need in the <em>LocalLibrary</em> website. On completion, we'll have a modular structure for our route handling code, that we can extend with real handler functions in the following articles. We'll also have a really good understanding of how to create modular routes using Express.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></dt>
+ <dd>We're now ready to add the pages that display the <em>LocalLibrary</em> website books and other data. The pages will include a home page that shows how many records we have of each model type, and list and detail pages for all of our models. Along the way we'll gain practical experience in getting records from the database, and using templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></dt>
+ <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Express, using Pug, and in particular how to write forms to create, update, and delete documents from the database.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></dt>
+ <dd>Now you've created an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Installing LocalLibrary on PWS/Cloud Foundry</a></dt>
+ <dd>This article provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a> — this is a full-featured, open source alternative to Heroku, the PaaS cloud service used in Part 7 of the tutorial, listed above. PWS/Cloud Foundry is definitely worth checking out if you are looking for an alternative to Heroku (or another PaaS cloud service), or simply feel like trying something different.</dd>
+</dl>
+
+<h2 id="Adding_more_tutorials">Adding more tutorials</h2>
+
+<div>
+<p>That's the end of the tutorial articles (for now). If you would like to extend it, other interesting topics to cover are:</p>
+
+<ul>
+ <li>Using sessions</li>
+ <li>User authentication</li>
+ <li>User authorisation and permissions</li>
+ <li>Testing an Express web application</li>
+ <li>Web security for Express web applications.</li>
+</ul>
+
+<p>And of course it would be excellent to have an assessment task!</p>
+</div>
diff --git a/files/ms/learn/server-side/index.html b/files/ms/learn/server-side/index.html
new file mode 100644
index 0000000000..b497257371
--- /dev/null
+++ b/files/ms/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/ms/learn/soalan_lazim/index.html b/files/ms/learn/soalan_lazim/index.html
new file mode 100644
index 0000000000..b7fbc07a0f
--- /dev/null
+++ b/files/ms/learn/soalan_lazim/index.html
@@ -0,0 +1,119 @@
+---
+title: Soalan-soalan lazim
+slug: Learn/Soalan_lazim
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p>
+
+<div>
+<h2 id="Soalan-soalan_tentang_HTML_dan_CSS">Soalan-soalan tentang HTML dan CSS</h2>
+
+<p>Anda boleh cuba halaman <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Guna HTML untuk menyelesaikan masalah-masalah lazim</a> dan halaman <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto">Guna CSS untuk menyelesaikan masalah-masalah lazim</a> bagi penyelesaian-penyelesaian biasa kepada masalah-masalah HTML/CSS.</p>
+</div>
+
+<h2 id="Bagaimana_Web_berfungsi">Bagaimana Web berfungsi</h2>
+
+<p>Bahagian ini merangkumkan mekanikal web — soalan-soalan yang berkaitan pengetahuan umum tentang ekosistem Web dan bagaimana ia berfungsi.</p>
+
+<dl>
+ <dt>
+ <h3 id="Bagaimanakah_Internet_berfungsi"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">Bagaimanakah Internet berfungsi?</a></h3>
+ </dt>
+ <dd><strong>Internet</strong> adalah tulang belakang Web, infrastruktur teknikal yang membolehkan Web berfungsi. Pada asasnya, Internet adalah sebuah rangkaian besar yang merangkumi komputer-komputer yang berkomunikasi semuanya sekali. Artikel ini membincangkan bagaimana ia berfungsi, pada peringkat asasnya.</dd>
+ <dt>
+ <h3 id="Apakah_perbezaan_antara_halaman_web_laman_web_pelayan_web_dan_engin_carian"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Apakah perbezaan antara halaman web, laman web, pelayan web, dan engin carian?</a></h3>
+ </dt>
+ <dd>Dalam artikel ini kami menerangkan pelbagai konsep yang berkaitan dengan web: halaman web, laman web, pelayan web, dan engin carian. Istilah-istilah ini sering mengelirukan pendatang baru Web, atau digunakan secara tidak tepat. Mari kita belajar apa makna setiap istilah ini!</dd>
+ <dt>
+ <h3 id="Apakah_itu_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">Apakah itu URL?</a></h3>
+ </dt>
+ <dd>Dengan {{Glossary("Hypertext")}} dan {{Glossary("HTTP")}}, URL adalah salah satu konsep penting Web. Ia adalah mekanisme yang digunakan {{Glossary("Browser","browsers")}} untuk mendapatkan sumber yang telah diterbitkan di web.</dd>
+ <dt>
+ <h3 id="Apakah_itu_nama_domain"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">Apakah itu nama domain?</a></h3>
+ </dt>
+ <dd>Nama-nama domain adalah bahagian penting daripada infrastruktur Internet. Mereka menyediakan alamat yang difahami manusia untuk mana-mana pelayan web yang ada di Internet.</dd>
+ <dt>
+ <h3 id="Apakah_itu_pelayan_web"><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server">Apakah itu pelayan web?</a></h3>
+ </dt>
+ <dd>Istilah "Pelayan Web" boleh merujuk kepada perkakasan atau perisian yang menyediakan laman web kepada klien-klien di seluruh Web  — atau kedua-duanya berfungsi bersama-sama. Dalam artikel ini kami akan pergi ke bagaimana pelayan-pelayan web berfungsi, and kenapa ianya penting.</dd>
+ <dt>
+ <h3 id="Apakah_itu_hyperlink"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">Apakah itu hyperlink?</a></h3>
+ </dt>
+ <dd>Dalam artikel ini, kita akan pergi ke apa itu hyperlink dan kenapa ianya penting.</dd>
+</dl>
+
+<h2 id="Alatan_dan_tetapan">Alatan dan tetapan</h2>
+
+<p>Soalan-soalan yang berkaitan dengan alatan/perisian yang anda boleh gunakan untuk membina laman web.</p>
+
+<dl>
+ <dt>
+ <h3 id="Berapakah_kos_yang_diperlukan_untuk_membina_sesuatu_di_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Berapakah kos yang diperlukan untuk membina sesuatu di Web?</a></h3>
+ </dt>
+ <dd>Anda mungkin tidak perlu membelanjakan apa-apa atau kos anda mungkin melambung tinggi. Dalam artikel ini kami membincangkan berapa banyak kos yang diperlukan untuk semua dan apa yang anda dapat hasil daripada apa yang anda bayar(atau anda tidak bayar).</dd>
+ <dt>
+ <h3 id="Apakah_perisian_yang_saya_perlukan_untuk_membina_laman_web"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">Apakah perisian yang saya perlukan untuk membina laman web?</a></h3>
+ </dt>
+ <dd>Dalam artikel ini kami menerangkan komponen-komponen perisian yang mana anda perlukan apabila anda mengedit, memuat naik, atau memaparkan laman web.</dd>
+ <dt>
+ <h3 id="Apakah_editor_teks_yang_ada"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">Apakah editor teks yang ada?</a></h3>
+ </dt>
+ <dd>Dalam artikel ini kami menekankan beberapa perkara apabila memilih dan memasang editor teks untuk pembangunan web. </dd>
+ <dt>
+ <h3 id="Bagaimanakah_untuk_saya_menetapkan_persekitaran_kerja"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">Bagaimanakah untuk saya menetapkan persekitaran kerja?</a></h3>
+ </dt>
+ <dd>Apabila anda mengerjakan sebuah projek web, anda akan ingin untuk mengujinya di dalam persekitaran komputer anda sebelum anda tunjuknya ke dunia. Sesetengah jenis kod memerlukan sebuah pelayan untuk ujian, dan di dalam artikel ini kami akan menunjukkan anda bagaimana untuk menetapkan satu. Kami juga akan membahas bagaimana untuk menempatkan struktur berskala supaya fail-fail anda tetap tersusun walaupun projek anda berkembang besar.</dd>
+ <dt>
+ <h3 id="Apakah_alatan_pembangun_pelayar_web"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Apakah alatan pembangun pelayar web?</a></h3>
+ </dt>
+ <dd>Setiap pelayar web mempunyai satu set alat pembangun untuk menyahpepijat HTML,CSS dan kod web lain. Artikel ini menerangkan bagaimana untuk menggunakan fungsi-fungsi asas alat pembangun yang disediakan pelayar web anda.</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_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 fo 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>
diff --git a/files/ms/mdn/about/index.html b/files/ms/mdn/about/index.html
new file mode 100644
index 0000000000..08fed85263
--- /dev/null
+++ b/files/ms/mdn/about/index.html
@@ -0,0 +1,99 @@
+---
+title: Perihal MDN
+slug: MDN/About
+translation_of: MDN/About
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubNav("/en-US/docs/MDN")}}</div>
+
+<p>Rangkaian Pembangun Mozilla (MDN) ialah evolusi platform pembelajaran teknologi Web dan perisian yang menguasakan Web, termasuk:</p>
+
+<ul>
+ <li>Piawaian Web seperti <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, dan <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li>
+ <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Pembangunan aplikasi Web Terbuka</a></li>
+ <li><a href="/en-US/docs/Add-ons" title="/en-US/docs/Add-ons">Pembangunan add-on Firefox</a></li>
+</ul>
+
+<h2 id="Misi_kami">Misi kami</h2>
+
+<p>Misi MDN amat mudah: untuk menyediakan dokumentasi yang lengkap, tepat dan bermanfaat dalam semua perkara berkaitan <a href="/en-US/docs/Web">Web terbuka</a>, samada yang disokong oleh perisian yang dibina-Mozilla atau tidak. Jika teknologi terbuka itu didedahkan ke dalam Web, kami mahu mendokumentasikannya.</p>
+
+<p>Tambahan pula, kami menyediakan dokumentasi berkaitan cara untuk <a href="/en-US/docs/Mozilla">membina dan menyumbang kepada projek Mozilla </a>dan <a href="/en-US/Firefox_OS">Firefox OS</a> serta <a href="/en-US/Apps"> pembangunan aplikasi Web</a>.</p>
+
+<p>Jika anda tidak pasti samada liputan topik tertentu perlu dimasukkan ke dalam MDN, baca: <a href="/en-US/docs/Project:MDN/Contributing/Does_this_belong">Adakah liputan topik ini sesuai dengan MDN?</a></p>
+
+<h2 id="Cara_untuk_anda_membantu">Cara untuk anda membantu</h2>
+
+<p>Anda tidak perlu tahu kod—atau menulis kod—untuk boleh membantu MDN! Ada banyak cara untuk anda membantu kami, daripada menyemak artikel bagi memastikan kandungannya masuk akal, sumbangan teks, hingga ke penambahan kod sampel. Malah, ada terlalu banyak cara untuk membantu kami, bermula dengan halaman <a href="/en-US/docs/MDN/Getting_started">Memulakan</a> yang membantu anda memilih tugasan berdasarkan minat dan masa yang anda mahu luangkan!</p>
+
+<p>Anda juga boleh membantu dengan <a href="/en-US/docs/MDN/About/Promote">mempromosikan MDN</a> di dalam halaman blog atau laman web.</p>
+
+<h2 id="Komuniti_MDN">Komuniti MDN</h2>
+
+<p>Komuniti kami adalah global! Kami ada penyumbang dari serata dunia, dalam beberapa bahasa. Jika anda mahu mengetahui lebih lanjut perihal kami, atau anda perlukan apa-apa bantuan berkaitan MDN, sila ikuti perbincangan kami dalam forum atau saluran IRC !</p>
+
+<h2 id="Penggunaan_kandungan_MDN">Penggunaan kandungan MDN</h2>
+
+<h3 id="Hak_cipta_dan_lesen">Hak cipta dan lesen</h3>
+
+<p><strong>Dokumen wiki MDN</strong> telah disediakan daripada hasil sumbangan ramai pengarang, samada dari dalam atau dari luar Yayasan Mozilla. Kecuali dinyatakan sebaliknya, kandungan tersedia di bawah terma <a class="external text" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow" title="http://creativecommons.org/licenses/by-sa/2.5/">Lesen Creative Commons Attribution-ShareAlike</a> (CC-BY-SA), v2.5 atau versi lebih baru. Sila beri atribut "Penyumbang Mozilla" dan sisipkan hiperpautan (dalam talian) atau URL (dalam cetakan) ke halaman wiki tertentu untuk kandungan yang dijadikan sebagai sumber. Sebagai contoh, cara sisipan atribut untuk artikel ini, anda boleh tulis:</p>
+
+<blockquote><a href="https://developer.mozilla.org/en-US/docs/MDN/About">Perihal MDN</a> oleh <a href="https://developer.mozilla.org/en-US/docs/MDN/About$history">Penyumbang Mozilla</a> dilesenkan di bawah <a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>.</blockquote>
+
+<p>Perhatikan bahawa di dalam contoh, "Penyumbang Mozilla" dipautkan ke sejarah petikan halaman. Lihat <a href="http://wiki.creativecommons.org/Marking/Users">Amalan terbaik untuk atribut</a> untuk penjelasan lanjut.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Lihat <a href="/en-US/docs/MDN_content_on_WebPlatform.org" title="/en-US/docs/MDN_content_on_WebPlatform.org">kandungan MDN dalam WebPlatform.org</a> untuk maklumat perihal cara menggunakan semula dan memberikan atribut kandungan MDN dalam laman tersebut.</p>
+</div>
+
+<p>Sampel kod yang disisipkan ke dalam wiki sebelum 20 Ogos, 2010 disediakan di bawah <a class="external" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">lesen MIT</a>; anda perlu sisipkan maklumat atribut yang berikut ke dalam templat MIT: "© &lt;tarikh semakan terakhir halaman wiki&gt; &lt;nama pengarang yang menyediakannya dalam wiki&gt;".</p>
+
+<p>Sampel kod yang disisipkan pada atau selepas 20 Ogos, 2010 adalah <a class="external" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">domain umum</a>. Tiada notis perlesenan diperlukan, tapi jika anda perlukannya,anda boleh gunakan: "Sebarang hak cipta didedikasikan untuk Domain Umum. http://creativecommons.org/publicdomain/zero/1.0/".</p>
+
+<p>Jika anda mahu memberikan sumbangan kepada  wiki, anda perlu menyediakan dokumentasi anda tersedia di bawah lesen Attribution-ShareAlike (atau lesen alternatif yang sudah ditentukan oleh halaman yang sedang anda edit), dan kod sampel tersedia di bawah <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (dedikasi Domain Umum). Menambahkan sumbangan ke dalam wiki ini bermakna anda bersetuju bahawa sumbangan anda akan disediakan di bawah lesen berkenaan.</p>
+
+<p>Beberapa kandungan lama yang tersedia di bawah lesen selain daripada lesen yang dinyatakan di atas; ada dinyatakan pada bahagian bawah halaman dalam bentuk <a class="internal" href="/Archive/Meta_docs/Examples/Alternate_License_Block" title="Project:En/Examples/Alternate License Block">Alternate License Block</a>.</p>
+
+<div class="warning">
+<p><strong>Penting:</strong> Tiada lagi halaman yang boleh dicipta menggunakan lesen alternatif.</p>
+</div>
+
+<p><strong>Hak cipta bahan yang disumbangkan masih kekal milik pengarang kecuali diberikan kepada pihak lain oleh pengarang berkenaan</strong>.</p>
+
+<p>Jika anda ada soalan atau prihatin perihal perkara yang dibincangkan di sini, sila hubungi <a class="external" href="mailto:eshepherd@mozilla.com" rel="nofollow" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a>.</p>
+
+<hr>
+<p>Hak ke atas cap dagangan, logo, tanda perkhidmatan Yayasan Mozilla, serta penampilan dan rekaan laman web ini, tidak dilesenkan di bawah lesen Creative Commons , dan kandungan hasil kerja karangan (seperti logo dan reka bentuk grafik), tidak termasuk dalam kandungan yang dilesenkan di bawah terma tersebut. Jika anda menggunakan teks dokumen, dan mahu menggunakan mana-mana hak cipta, atau anda ada soalan perihal pematuhan kesemua terma perlesenan dalam koleksi kami ini, anda perlu hubungi Yayasan Mozilla di sini: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p>
+
+<h3 id="Memuat_turun_kandungan">Memuat turun kandungan</h3>
+
+<p>Anda boleh memuat turun dari<a href="/media/developer.mozilla.org.tar.gz"> bar tar cermin lengkap MDN</a>. (1.3GB pada 20-02-2016)</p>
+
+<h4 id="Halaman_Tunggal">Halaman Tunggal</h4>
+
+<p>Anda boleh dapatkan kandungan halaman tunggal dalam MDN dengan menambahkan <a href="/en-US/docs/MDN/Kuma/API#Document_parameters">parameter dokumen</a> ke URL untuk menentukan format yang anda mahu.</p>
+
+<h4 id="Alatan_pihak_ketiga">Alatan pihak ketiga</h4>
+
+<p>Anda boleh papar kandungan MDN via alatan pihak ketiga seperti <a href="http://kapeli.com/dash">Dash</a> (untuk Mac OS) dan <a href="http://zealdocs.org/">Zeal</a> (untuk Linux dan Windows).</p>
+
+<p><a href="https://kapeli.com/">Kapeli</a> juga menerbitkan <a href="https://kapeli.com/mdn_offline">dokumen MDN luar talian</a> yang meliputi HTML, CSS, JavaScript, SVG, dan XSLT.</p>
+
+<h3 id="Memautkan_ke_MDN">Memautkan ke MDN</h3>
+
+<p>Lihat artikel ini sebagai panduan <a href="/en-US/docs/MDN/About/Linking_to_MDN">memautkan ke MDN</a> sebagai amalan terbaik apabila membuat pautan.</p>
+
+<h2 id="Melaporkan_masalah_berkaitan_MDN">Melaporkan masalah berkaitan MDN</h2>
+
+<p>Lihat <a href="/en-US/docs/MDN/Contribute/Howto/Report_a_problem">Cara melaporkan masalah dalam MDN</a>.</p>
+
+<h2 id="Sejarah_MDN">Sejarah MDN</h2>
+
+<p>Projek Rangkaian Pembangun Mozilla (a.k.a. Mozilla Developer Center (MDC), a.k.a. <em>Devmo</em>) bermula pada awal 2005, apabila <a class="external" href="http://www.mozillafoundation.org">Yayasan Mozilla</a> mendapat lesen daripada AOL untuk menggunakan kandungan asal Netscape <a href="https://web.archive.org/web/*/devedge.netscape.com" title="Project:en/DevEdge">DevEdge</a>. Kandungan DevEdge digunakan semula sebagai bahan berguna yang kemudiannya dialihkan oleh sukarelawan ke dalam wiki ini supaya mudah dikemaskini dan diselenggara.</p>
+
+<p>Anda boleh ketahui lebih banyak sejarah MDN dalam halaman <a href="/en-US/docs/MDN_at_ten">sambutan ulang tahun ke-10</a> kami, termasuk sejarah lisan oleh beberapa indivudu yang terlibat.</p>
+
+<h2 id="Perihal_Mozilla">Perihal Mozilla</h2>
+
+<p>Samada anda mahu mengetahui lebih lanjut perihal kami, cara untuk menjadi sebahagian anggota <em>Mozilla</em> atau hanya mahu menghubungi kami, anda berada di tempat yang betul. Untuk mengetahui apa yang mendorong dan menjadikan kami berbeza, layari halaman <a href="http://www.mozilla.org/en-US/mission/">misi</a> kami.</p>
diff --git a/files/ms/mdn/community/index.html b/files/ms/mdn/community/index.html
new file mode 100644
index 0000000000..723ce60e71
--- /dev/null
+++ b/files/ms/mdn/community/index.html
@@ -0,0 +1,69 @@
+---
+title: Join the MDN community
+slug: MDN/Community
+translation_of: MDN/Community
+---
+<div>{{MDNSidebar}}</div>
+
+<h2 id="Ringkasan"><font><font>Ringkasan</font></font></h2>
+
+<div class="summary">
+<p><font><font>MDN (yang adalah singkatan untuk Mozilla Pemaju Network) adalah lebih daripada wiki yang lain: Ia adalah satu komuniti dari pemaju yang bekerja bersama-sama untuk membuat MDN sumber cemerlang bagi pemaju yang menggunakan teknologi web terbuka. </font><font>The "kerja" yang berlaku di laman MDN, tetapi "komuniti" juga berlaku melalui (tak segerak) perbincangan dan (serentak) talian chat.</font></font></p>
+</div>
+
+<p><font><font>Kami akan senang jika anda menyumbang kepada MDN, tetapi kita akan menyukainya lebih jika anda mengambil bahagian dalam masyarakat MDN itu. </font><font>Berikut adalah cara untuk berhubung, dalam tiga langkah mudah:</font></font></p>
+
+<ol>
+ <li><font><font>Buat akaun MDN.</font></font></li>
+ <li><font><font>Langgan perbincangan dev-MDC.</font></font></li>
+ <li><font><font>Dapatkan ke IRC.</font></font></li>
+</ol>
+
+<h2 id="Sertai_senarai_mel_kami"><font><font>Sertai senarai mel kami</font></font></h2>
+
+<p><font><font>Untuk berkongsi maklumat dan mengadakan perbincangan yang berterusan, Mozilla mempunyai beberapa berguna </font></font><a href="https://lists.mozilla.org/listinfo"><font><font>senarai mel</font></font></a><font><font> . </font><font>Orang-orang yang tertentu untuk MDN adalah:</font></font></p>
+
+<dl>
+ <dt><a href="https://lists.mozilla.org/listinfo/dev-mdc"><font><font>dev-MDC</font></font></a></dt>
+ <dd><font><font>Senarai ini adalah di mana kita mempunyai perbincangan berterusan mengenai dokumentasi pada MDN. </font><font>Kami bercakap tentang perubahan proses, penambahbaikan yang telah kami lakukan, dan kami menyelesaikan yang ingin bekerja di mana kandungan. </font><font>Ia </font></font><strong><font><font>amat disyorkan</font></font></strong><font><font> bahawa anda menyertai senarai ini jika anda berminat untuk serius menyelam ke dalam dokumentasi pada MDN! </font><font>(Mengapa "dev-MDC"? Pada masa lalu, laman web ini telah dikenali sebagai "Pusat Pemaju Mozilla", atau MDC. Senarai mailing tarikh kembali ke era tersebut, jadi ia dev-MDC.)</font></font></dd>
+ <dt><a href="https://lists.mozilla.org/listinfo/dev-mdn"><font><font>dev-MDN</font></font></a></dt>
+ <dd><font><font>Senarai ini adalah di mana kami mengadakan perbincangan tentang kerja pembangunan pada asas MDN ini </font></font><a href="/en-US/docs/Project:MDN/Kuma"><font><font>Kuma</font></font></a><font><font> platform. </font><font>Jika anda ingin tahu tentang kerja-kerja pembangunan yang sedang berlaku di belakang tabir, mahu terlibat dalam proses membuat decsisions tentang platform, atau bekerja di patch untuk meningkatkan platform, anda pasti perlu melibatkan diri dalam senarai ini.</font></font></dd>
+ <dt><a href="https://lists.mozilla.org/listinfo/mdn"><font><font>MDN</font></font></a></dt>
+ <dd><font><font>Ini senarai mel adalah perancangan dan keutamaan perbincangan peringkat tinggi, untuk laman web MDN dan inisiatif-inisiatif lain yang berkaitan.</font></font></dd>
+</dl>
+
+<p><font><font>Terdapat juga beberapa senarai yang khusus kepada masyarakat penyetempatan MDN. </font><font>Jika komuniti anda adalah sangat besar dan aktif, anda mungkin boleh mendapatkan senarai dicipta untuk komuniti anda; </font><font>hanya meminta kami dan kami akan meneliti perkara itu. </font><font>Pada masa ini, bahasa ini mempunyai senarai: </font></font><a href="https://lists.mozilla.org/listinfo/dev-mdc-es"><font><font>Bahasa Sepanyol</font></font></a><font><font> , </font></font><a href="https://groups.google.com/forum/#!forum/mozilla-translations-ja"><font><font>Jepun</font></font></a><font><font> , dan </font></font><a href="https://lists.mozilla.org/listinfo/dev-mdc-pt"><font><font>Portugis</font></font></a><font><font> .</font></font></p>
+
+<h2 id="Dapatkan_ke_dalam_IRC"><font><font>Dapatkan ke dalam IRC</font></font></h2>
+
+<p><font><font>Internet Relay Chat (IRC) adalah kaedah pilihan kami untuk chat dan masa sebenar perbincangan sehari-hari di kalangan anggota masyarakat. </font><font>Kami menggunakan saluran pada beberapa irc.mozilla.org pelayan untuk perbincangan yang berkaitan dengan MDN.</font></font></p>
+
+<dl>
+ <dt><a href="irc://irc.mozilla.org/mdn" title="irc: //irc.mozilla.org/mdn"><font><font>#mdn</font></font></a></dt>
+ <dd><font><font>Saluran ini adalah saluran utama kami untuk membincangkan kandungan MDN. </font><font>Kami bercakap tentang menulis, organisasi kandungan, dan sebagainya. </font><font>Kami juga mempunyai "sejuk air" perbualan sini-ia adalah satu cara masyarakat kita boleh terus berhubung dan hanya bergaul. </font><font>Ini juga merupakan tempat untuk bercakap mengenai aspek-aspek lain MDN (selain daripada pembangunan platform), seperti Demo Studio, profil, dan sebagainya.</font></font></dd>
+ <dt><a href="irc://irc.mozilla.org/mdndev" title="irc: //irc.mozilla.org/mdndev"><font><font>#mdndev</font></font></a></dt>
+ <dd><font><font>Saluran ini adalah di mana pembangunan pasukan yang kami orang-orang yang menulis kod yang membuat kerja-MDN tergantung keluar dan membincangkan kerja hari ke hari. </font><font>Anda dialu-alukan untuk menyertai dan sama ada mengambil bahagian dalam pembangunan atau hanya bertanya soalan mengenai isu-isu yang anda lihat dengan perisian.</font></font></dd>
+</dl>
+
+<p><font><font>Saluran-saluran ini adalah yang paling mungkin untuk menjadi aktif semasa hari-hari bekerja di Amerika Utara.</font></font></p>
+
+<p><font><font>Jika anda tidak biasa dengan IRC, cara yang paling cepat untuk menyertai menggunakan </font></font><a href="http://scrollback.io/"><font><font>papar bar skrol</font></font></a><font><font> - pelanggan berasaskan web IRC iaitu pra-konfigurasi dengan </font></font><a href="http://scrollback.io/mozdn/"><font><font>MDN</font></font></a><font><font> dan </font></font><a href="http://scrollback.io/mdndev/"><font><font>mdndev</font></font></a><font><font> saluran. </font><font>Anda juga mungkin mahu </font></font><a href="http://wiki.mozilla.org/IRC" title="http://wiki.mozilla.org/IRC"><font><font>mengetahui lebih lanjut mengenai IRC</font></font></a><font><font> dan menggunakan klien IRC dipasang seperti </font></font><a href="https://addons.mozilla.org/en-US/firefox/addon/chatzilla/" title="https://addons.mozilla.org/en-US/firefox/addon/chatzilla/"><font><font>ChatZilla</font></font></a><font><font> . </font><font>Ia dilaksanakan sebagai Firefox add-on, yang menjadikan ia mudah untuk memasang dan menggunakan.</font></font></p>
+
+<h2 id="Sertai_mesyuarat_dua_kali_seminggu_kami_(dan_lain-lain)"><font><font>Sertai mesyuarat dua kali seminggu kami (dan lain-lain)</font></font></h2>
+
+<p><font><font>Setiap minggu lain, masyarakat MDN itu memegang suatu mesyuarat berdasarkan IRC-untuk bertukar-tukar nota, bercakap tentang apa yang kita telah lakukan, dan menyelesaikan apa yang kami ingin lakukan untuk dua minggu akan datang. </font><font>Kami juga bercakap tentang rancangan pembangunan untuk platform MDN itu sendiri, dan sering mendapatkan kemas kini tentang ciri-ciri baru dan akan datang dari laman web ini. </font><font>Ini adalah kasual, mesyuarat menyeronokkan, dan selamat datang semua orang untuk mengambil bahagian.</font></font></p>
+
+<p><font><font>Lihat </font></font><a href="https://wiki.mozilla.org/MDN/Meetings/Community" title="https://wiki.mozilla.org/MDN/Community_meetings"><font><font>Mesyuarat MDN Komuniti</font></font></a><font><font> halaman di wiki Mozilla untuk maklumat mengikut jadual dan juga agenda dan nota untuk mesyuarat yang lalu dan yang akan datang.</font></font></p>
+
+<p><font><font>Lihat </font></font><a href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com"><font><font>Peristiwa kalendar MDN</font></font></a><font><font> untuk ini dan lain-lain mesyuarat, sprint doc, dan acara-acara lain. </font><font>Mesyuarat berulang diringkaskan kepada </font></font><a href="https://wiki.mozilla.org/MDN/Meetings"><font><font>MDN halaman Mesyuarat wiki</font></font></a><font><font> .</font></font></p>
+
+<h2 id="Pentadbir_projek"><font><font>Pentadbir projek</font></font></h2>
+
+<p><font><font>Anda boleh hubungi pentadbir projek MDN melalui e-mel. </font><font>Jika anda ingin bercakap dengan MDN dokumentasi plumbum, namanya adalah {{UserLink ("Sheppy", "Eric Gembala")}}, dan dia gembira untuk cuba menjawab soalan anda, atau membantu anda mencari orang yang tepat untuk berbuat demikian .</font></font></p>
+
+<h2 id="Langkah_seterusnya"><font><font>Langkah seterusnya</font></font></h2>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Contribute" title="/ En-US / docs / Projek: MDN / Menyumbang"><font><font>Menyumbang kepada MDN</font></font></a><font><font> : Lihatlah di sini untuk pemandu untuk bekerja di MDN, dan cadangan untuk perkara yang perlu bekerja pada.</font></font></li>
+ <li><a href="/en-US/docs/Project:MDN/Contributing/Follow_what_s_happening" title="/ En-US / docs / Projek: MDN / Sumbangan / Follow_what_s_happening"><font><font>Ikut apa yang berlaku</font></font></a><font><font> : Lebih banyak cara untuk bersaing dengan MDN, dan Hubungan Mozilla Pemaju amnya.</font></font></li>
+</ul>
diff --git a/files/ms/mdn/contribute/getting_started/index.html b/files/ms/mdn/contribute/getting_started/index.html
new file mode 100644
index 0000000000..434c4deb25
--- /dev/null
+++ b/files/ms/mdn/contribute/getting_started/index.html
@@ -0,0 +1,100 @@
+---
+title: Getting started on MDN
+slug: MDN/Contribute/Getting_started
+translation_of: MDN/Contribute/Getting_started
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p>We are an open community of developers and writers building resources for a better Web, regardless of brand, browser, or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.</p>
+
+<p>Every part of MDN (from the code that makes the site work to the documentation, code samples, and demos) is created by a community of developers and writers. Everyone has something to offer, and we hope you'll join us!</p>
+
+<h2 id="3_Simple_steps_to_MDN">3 Simple steps to MDN</h2>
+
+<p><span class="seoSummary">MDN is a wiki, where <strong>anyone</strong> can add and edit content. You don't need to be a programmer or know a lot about technologies. There are plenty of things that need to be done, from simple tasks such as proofreading and correcting typos to the complex ones such as writing API documentation. This guide will get you started and help steer you toward finding ways <em>you</em> can help improve MDN's content.</span></p>
+
+<p>Contributing is easy and safe. Even if you make a mistake, it's easily fixed; if you don't know exactly how things should look, or your grammar isn't all that great, don't worry about it! We have a team of people whose job it is to make sure that MDN's contents are as good as possible. Someone will be along to make sure your work is tidy and well-written. Share what you know and follow your strengths, and trust in the rest of the community to help make your work even better.</p>
+
+<h3 id="Step_1_Create_an_account_on_MDN">Step 1: Create an account on MDN</h3>
+
+<p>To begin your contributions to MDN, you need to have an account on MDN. For details, please see <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">how to create an account</a>. Note that you'll <a href="https://github.com/join">need a GitHub account</a> before you can create an MDN account, since we use GitHub for authentication at this time.</p>
+
+<p>If your task involves creating new pages, please see {{SectionOnPage("/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages", "Getting page creation permissions")}} for important information about how to get permission to add new pages; for security reasons, new accounts don't have this ability by default.</p>
+
+<h3 id="Step_2_Pick_a_task">Step 2: Pick a task</h3>
+
+<p>Now that you are logged in, read the descriptions of different task types in {{anch("Possible task types", "the list below")}}, and decide which one most appeals to you. You can pick any task you like and begin your contribution.</p>
+
+<h3 id="Step_3_Do_the_task">Step 3: Do the task</h3>
+
+<p>Once you've decided what kind of task you want to do, find a specific page, code example, etc. to work on, and just do it!</p>
+
+<p>Don't worry about doing it perfectly; other MDN contributors are here to help fix errors that slip through. If you have questions as you go, see the <a href="/en-US/docs/MDN/Community">Community</a> page for info on mailing lists and chat channels where you can get answers.</p>
+
+<div class="note">
+<p>If you want to experiment with editing on MDN before doing something "for real", we have a <strong><a href="/en-US/docs/Sandbox">Sandbox</a></strong> page for you to play around in. Please limit your experiments to this page. Please don't make unneeded changes to content pages just to see what happens; that's making a mess for others to clean up or, worse, confusing readers who are just trying to learn something or look something up.</p>
+</div>
+
+<p>When you're done with your chosen task, feel free to pick another item, or see below for <a href="#Other_things_you_can_do_on_MDN">other things you can do on MDN</a>.</p>
+
+<h2 id="Possible_task_types">Possible task types</h2>
+
+<p>There are multiple avenues you can take to contribute to MDN depending on your skill set and interests. Even though some tasks may be daunting, we do have lots of simple activities available. A lot of them need only five minutes (or less!) of your time. Below, along with the task and its short description, you will find the approximate time that each type of task typically takes.</p>
+
+<h3 id="Option_1_I_like_words">Option 1: I like words</h3>
+
+<p>You can help us review or edit existing docs, and apply correct tags to them.</p>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Set the summary for a page</a> (5-15 minutes)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_an_editorial_review">Do editorial reviews</a> (5–30 minutes)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new entry in the Glossary</a> (15 minutes-1 hour)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write an article to help people learn about the web</a> (1-3 hours)</li>
+</ul>
+
+<div class="note">If you are reviewing articles or writing new ones, we ask you to please review the <a href="/en-US/docs/MDN/Contribute/Guidelines/Style_guide">Style Guide</a>. This will help to ensure that articles are consistent.</div>
+
+<h3 id="Option_2_I_like_code">Option 2: I like code</h3>
+
+<p>We need more code samples! You can also help build our site platform, <a href="/en-US/docs/MDN/Kuma">Kuma</a>!</p>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Convert code samples to be "live"</a> (30 minutes)</li>
+ <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved/developer.mozilla.org">Read the Getting Involved Guide</a> (30 minutes)</li>
+ <li><a href="http://kuma.readthedocs.org/en/latest/installation.html">Set up a Kuma build environment</a> (1 hour)</li>
+ <li><a href="https://github.com/mozilla/kuma#readme">Send your code patch to the Kuma codebase</a> (1 hour)</li>
+</ul>
+
+<h3 id="Option_3_I_like_both_words_and_code">Option 3: I like both words and code</h3>
+
+<p>We have tasks that require both technical and language skills, like writing new articles, reviewing for technical accuracy, or adapting documents.</p>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Tag_JavaScript_pages">Tag JavaScript pages</a> (5 minutes)</li>
+ <li><a href="/en-US/docs/MDN/About/Promote">Promote MDN on your own website</a> (5 minutes)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_a_technical_review">Do technical reviews</a> (30 minutes)</li>
+ <li><a href="/en-US/docs/Contribute_to_docs_that_are_currently_needed">Write a new article on a topic that is currently needed</a> (1 hour or more)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create an interactive exercise to help people learn about the web</a> (1 hour or more)</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request">Fix a documentation bug</a> from the <a href="http://www.joshmatthews.net/bugsahoy/?mdn=1">MDN category in Bugs Ahoy</a> (1 hour or more)</li>
+</ul>
+
+<h3 id="Option_4_I_want_MDN_in_my_language">Option 4: I want MDN in my language</h3>
+
+<p>All localization and translation work done on MDN is done by our amazing community of volunteers.</p>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Contribute/Localize/Translating_pages">Translating pages</a> (2 hours) (See <a href="/en-US/docs/MDN/Doc_status/l10nPriority">top priorities</a>)</li>
+ <li>Connect with other localizers listed in <a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">Localization projects</a> (30 minutes)</li>
+</ul>
+
+<h3 id="Option_5_I_found_some_wrong_information_but_I_don't_know_how_to_fix_it">Option 5: I found some wrong information but I don't know how to fix it</h3>
+
+<p>You can report problems by <a class="external" href="https://bugzilla.mozilla.org/form.doc">filing a documentation bug</a>. (5 minutes)</p>
+
+<h2 id="Other_things_you_can_do_on_MDN">Other things you can do on MDN</h2>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Community">Join the MDN Community</a>.</li>
+ <li><a href="/en-US/profile">Fill out your profile</a> so others can know more about you.</li>
+ <li>Learn more about <a href="/en-US/docs/MDN/Contribute">contributing to MDN</a>.</li>
+</ul>
diff --git a/files/ms/mdn/contribute/howto/bagaimana_membuat_akaun_mdn/index.html b/files/ms/mdn/contribute/howto/bagaimana_membuat_akaun_mdn/index.html
new file mode 100644
index 0000000000..f8099f109f
--- /dev/null
+++ b/files/ms/mdn/contribute/howto/bagaimana_membuat_akaun_mdn/index.html
@@ -0,0 +1,38 @@
+---
+title: Bagaimana Membuat Akaun MDN
+slug: MDN/Contribute/Howto/Bagaimana_membuat_akaun_MDN
+tags:
+  - MDN
+  - Panduan
+  - Pemula
+  - Projek MDC
+translation_of: MDN/Contribute/Howto/Create_an_MDN_account
+---
+<div>{{MDNSidebar}}</div><p><span class="seoSummary">Untuk membuat apa-apa perubahan kepada isi MDN (dengan menyunting laman web atau menyumbang suatu demo), anda memerlukan satu profil MDN. Jangan bimbang, anda tidak perlu profil jika anda hanya ingin membaca dan mencari isi MDN! Panduan tersebut akan membantu anda mendirikan akaun MDN anda.</span></p>
+
+<div style="width: 280px;" class="standardSidebar"><strong>Mengapakah MDN memerlukan alamat e-mel saya?</strong><br>
+<br>
+Alamat e-mel anda digunakan dalam pemulihan akaun dan juga diguna oleh pentadbir MDN untuk menghubungi anda mengenai akaun atau aktiviti anda dalam laman web.<br>
+<br>
+Tambahan pula, anda boleh mendaftar untuk menerima notifikasi  (seperti <a href="">apabila laman-laman tertentu diubah</a>) serta mesej (contohnya, jika anda ingin menyertai pasukan ujian beta kami, anda mungkin menerima e-mel tentang ciri-ciri baharu yang memerlukan ujian).<br>
+<br>
+Alamat e-mel anda tidak akan dipaparkan pada MDN dan akan diguna mengikuti <a href="https://www.mozilla.org/privacy/websites/">polisi privasi</a> kami sahaja. </div>
+
+<ol>
+ <li>Anda dapat melihat satu butang yang dilabel "Sign in with" di bahagian teratas semua laman MDN. Menuding tetikus anda pada butang ini (atau ketik padanya jika anda sedang menggunakan alatan bimbit) untuk menunjukkan satu senarai servis pengesahan yang kami menyokong bagi log masuk MDN.</li>
+ <li>Pilih cara log masuk daripada salah satu servis yang dipaparkan. Apa-apa servis yang anda pilih <strong>selain daripada Persona</strong> akan disenaraikan dalam profil awam anda.</li>
+ <li>Ikuti arahan servis tersebut untuk menyambung akaun anda ke MDN.</li>
+ <li>Apabila anda dikembalikan ke MDN, anda akan diminta untuk mendaftarkan satu nama pengguna dan alamat e-mel. <strong>Nama pengguna anda akan dipapar secara awam untuk kredit kerja yang anda lakukan. Janganlah mengguna alamat e-mel anda sebagai nama pengguna. </strong></li>
+ <li>Tekan butang yang dilabel "Create my MDN profile".</li>
+ <li>Jika alamat e-mel yang anda beri di Langkah 4 tidak sama dengan alamat e-mel yang anda guna dengan servis pengesahan, anda perlulah mengesah e-mel anda dan tekan pada link dalam e-mel pengesahan yang akan dihantar kepada anda. </li>
+</ol>
+
+<p>Itu sahaja! Anda mempunyai sebuah akaun MDN dan boleh segera menyunting atau tag laman-laman web, atau serahkan demo! </p>
+
+<p>Anda boleh tekan pada nama anda di bahagian teratas apa-apa laman MDN untuk melihat profil awam anda. Dari situ, anda boleh tekan pada butang "Edit" untuk membuat perubahan kepada profil anda seperti berkongsi lebih banyak tentang minat anda, tambah link-link ke akaun Twitter atau blog anda dan lain-lain lagi.  </p>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Nota: </strong>Nama pengguna baharu tidak boleh mangandungi ruang atau kata "@". Ingatlah nama pengguna anda akan dipapar secara awam untuk menunjukkan kerja yang anda buat!</span></p>
+</div>
+
+<p> </p>
diff --git a/files/ms/mdn/contribute/howto/index.html b/files/ms/mdn/contribute/howto/index.html
new file mode 100644
index 0000000000..650f2b8f59
--- /dev/null
+++ b/files/ms/mdn/contribute/howto/index.html
@@ -0,0 +1,13 @@
+---
+title: How-to guides
+slug: MDN/Contribute/Howto
+tags:
+  - Documentation
+  - Landing
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: MDN/Contribute/Howto
+---
+<div>{{MDNSidebar}}</div><p>These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.</p>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ms/mdn/contribute/index.html b/files/ms/mdn/contribute/index.html
new file mode 100644
index 0000000000..9d602b7b91
--- /dev/null
+++ b/files/ms/mdn/contribute/index.html
@@ -0,0 +1,71 @@
+---
+title: Contributing to MDN
+slug: MDN/Contribute
+tags:
+  - Documentation
+  - Guide
+  - Landing
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: MDN/Contribute
+---
+<div>{{MDNSidebar}}</div><p>Selamat Datang! Dengan melawati laman ini, anda telah mengambil langkah pertama untuk menjadi penumbang kepada MDN. <span class="seoSummary">bantuan yang tersenarai disini meliputi semua aspek dalam menyumbang kepada MDN, termasuk bantuan gaya, bantuan untuk menggunakan alat dan pengedit kami, dan banyak lagi. Sila pastikan anda telah membaca (dan sedia mematuhi) <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">Mozilla Terms</a> sebelum mengedit dan mencipta sebarang halaman.</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="Bantuan_Penyumbang">Bantuan Penyumbang</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Getting_started">Getting started</a></dt>
+ <dd>A quick start guide to getting set up and making your first contribution.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Style_guide">Content and style guide</a></dt>
+ <dd>The MDN content and style guide provides details about writing style, page layout, and content styles, so that the content you write fits in with the rest of MDN's content.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Editor">Editor guide</a></dt>
+ <dd>A complete guide to using MDN's editor.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Reviewing_articles">Reviewing articles</a></dt>
+ <dd>A guide to performing technical and editorial reviews of articles' content, to help us ensure that all content on MDN is as useful and readable as can be!</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Conventions">Terminology and conventions</a></dt>
+ <dd>Our terminology and conventions guide provides information you can use to ensure that you use the correct terminology to describe things.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Community">Working with the MDN community</a></dt>
+ <dd>A guide to working with our community, finding help, and connecting with the people with the answers to the questions that arise while you contribute to MDN.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/FAQ">Frequently asked questions</a></dt>
+ <dd>Tips and answers to the most common questions about contributing to MDN.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Kuma/Contributing">Contributing to Kuma</a></dt>
+ <dd>A guide to contributing to the Kuma project. Kuma is the platform that powers the MDN Web site.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="How_to...">How to...</h2>
+
+<p>Our <a href="/en-US/docs/MDN/Contribute/Howto">how-to guides</a> provide step-by-step instructions to help you accomplish specific tasks when contributing to MDN.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Document_a_CSS_property">How to document a CSS property</a></dt>
+ <dd>A guide to writing documentation of CSS properties. All CSS property documents should match the style and layout described in this article.</dd>
+ <dt>How to document an HTML element</dt>
+ <dd>This guide to documenting HTML elements will ensure that the documents you write match others on MDN.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a></dt>
+ <dd>This guide to tagging pages provides information about our standards for tagging, including lists of tags that have standard meanings on MDN. Following this guide will ensure that your content is properly categorized, more easily searchable, and that our search filtering mechanism works properly with your articles.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Interpret_specifications">How to interpret specifications</a></dt>
+ <dd>This guide will help you to properly interpret standard Web specifications; being able to read these can be an art form, and knowing how to do it will help you produce better documentation.</dd>
+</dl>
+
+<h2 id="Localization">Localization</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Contribute/Localize/Tour">Localization guided tour</a></dt>
+ <dd>This guided tour will teach you how to localize content on MDN.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Localize/Guide">Localization guide</a></dt>
+ <dd>This guide provides details about the localization process for MDN content.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">Localization projects</a></dt>
+ <dd>Find the localization project for your language—or, if there isn't one, learn how to start a new one!</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/ms/mdn/contribute/localize/index.html b/files/ms/mdn/contribute/localize/index.html
new file mode 100644
index 0000000000..ed2a2577cd
--- /dev/null
+++ b/files/ms/mdn/contribute/localize/index.html
@@ -0,0 +1,29 @@
+---
+title: Localizing MDN
+slug: MDN/Contribute/Localize
+tags:
+  - Documentation
+  - Localization
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: MDN/Contribute/Localize
+---
+<div>{{MDNSidebar}}</div><p>MDN is used by people all over the world as a reference and guide to Web technologies, as well as to the internals of Firefox itself. Our localization communities are a key part of the Mozilla project; their work in translating and localizing our documentation helps people around the world develop for the open Web. If you'd like to learn more about our localization teams, join one of the teams, or even start a new localization, this is the place to begin.</p>
+<p>{{LandingPageListSubpages}}</p>
+<h2 id="Localization_tools">Localization tools</h2>
+<p>There are several useful tools that you'll use during localization work:</p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Verbatim</a></dt>
+ <dd>
+  Used for translation of strings across multiple Mozilla projects, including the MDN user interface (as well as the Firefox user interface).</dd>
+ <dt>
+  <a href="http://transvision.mozfr.org/" title="http://transvision.mozfr.org/">Transvision</a></dt>
+ <dd>
+  A utility provided by Mozilla France, which lets you search for occurrences of an English string, finding all the various translations into a target locale that are used throughout Mozilla code. Useful for finding the preferred translations for words or phrases.</dd>
+</dl>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Localization" title="/en-US/docs/Mozilla/Localization">Localization at Mozilla</a></li>
+</ul>
diff --git a/files/ms/mdn/contribute/localize/translating_pages/index.html b/files/ms/mdn/contribute/localize/translating_pages/index.html
new file mode 100644
index 0000000000..e421ff5f9b
--- /dev/null
+++ b/files/ms/mdn/contribute/localize/translating_pages/index.html
@@ -0,0 +1,37 @@
+---
+title: Translating MDN pages
+slug: MDN/Contribute/Localize/Translating_pages
+tags:
+  - Reference
+translation_of: MDN/Contribute/Localize/Translating_pages
+---
+<div>{{MDNSidebar}}</div><p>This article is a basic guide to translating content on MDN, including both the mechanics of translation work and tips on the proper way to handle various types of content.</p>
+
+<h2 id="Starting_a_new_page_translation">Starting a new page translation</h2>
+
+<p>When you come across a page you'd like to translate into your language, follow these steps:</p>
+
+<ol>
+ <li>Click the Languages icon ( ) to open the <strong>Languages</strong> menu, and click <strong>Add a Translation</strong>. The Select Languages page appears.</li>
+ <li>Click the language that you want to translate the page into. The Translating Article view opens with the original language text displayed on the left side of the view.</li>
+ <li>Under <strong>Translate Description</strong>, you can translate the title and optionally the slug into the target language. The slug is the last part of the URL of a page (for example, "Translating_pages" for this article.) Some language communities do not translate the slug, keeping the same slug as English. Compare with other articles in your language to determine the common practice. You can click the minus sign next to <strong>Translate Description</strong> to hide this information when you are done with it, to make more room for the <strong>Translate Content</strong> section.</li>
+ <li>Under <strong>Translate Content</strong>, translate the body of the page.</li>
+ <li>Fill at least one <strong>tag</strong> for the page</li>
+ <li>Click <strong>Save Changes</strong> when you are done.</li>
+</ol>
+
+<div class="note"><strong>Note:</strong> The user interface elements of the Translating Article view are initially shown in English. On subsequent visits to translate a particular article, the UI is shown in the appropriate language if a localization of MDN is available for that language. The MDN user interface can be localized using <a href="https://localize.mozilla.org/projects/mdn/" title="https://localize.mozilla.org/projects/mdn/">Verbatim</a>. See <a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Localizing with Verbatim</a> for details on how to use this tool.</div>
+
+<h2 id="Editing_a_translated_page">Editing a translated page</h2>
+
+<ul>
+ <li>On a translated page, click the <strong>Edit</strong> button (sometimes labeled in the target language). The Translating Article view opens.</li>
+</ul>
+
+<p>If the English version has been changed since the translation was last updated, the Translating Article view shows a source-level "diff" of the changes in the English version. This helps you see what needs to be updated in the translation.</p>
+
+<h2 id="Translating_tags">Translating tags</h2>
+
+<p>It's important that each page is tagged with at least one tag. Even if this is translation.</p>
+
+<p>Some tags are used for search filters, or as conventions between contributors. They should not be translated. To know these tags, read the <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">tagging standards</a>. You are free to create translated tags to group content if this is not covered by one of the standards tags.</p>
diff --git a/files/ms/mdn/index.html b/files/ms/mdn/index.html
new file mode 100644
index 0000000000..e8a9d30964
--- /dev/null
+++ b/files/ms/mdn/index.html
@@ -0,0 +1,39 @@
+---
+title: The MDN project
+slug: MDN
+tags:
+  - Documentation
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: MDN
+---
+<div>{{MDNSidebar}}</div>
+
+<p><strong>MDN Web Docs</strong> is a wiki on which we document the open Web, Mozilla technologies, and other developer topics. Anyone is welcome to add and edit content. You don't need to be a programmer or know a lot about technology; there are many different tasks that need to be performed, from the simple (proof-reading and correcting typos) to the complex (writing API documentation).</p>
+
+<div class="summary">
+<p>The mission of MDN Web Docs is to provide <em>developers</em> with the <em>information</em> they need to <em>easily</em> build projects on the <em>web platform</em>. We invite you to help!</p>
+</div>
+
+<p>We need your help! It's easy. Don't worry about asking for permission or about making mistakes. On the other hand, please get to know the <a href="/en-US/docs/MDN/Community" title="/en-US/docs/MDN/Community">MDN community</a>; we're here to help you! The documentation below should get you started, but don't hesitate to join the discussion in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a>.</p>
+
+<ul class="card-grid">
+ <li><span><a href="/en-US/docs/MDN/Getting_started">Newcomer quick start</a></span>
+
+  <p>Are you new to MDN and want to learn how to help make it better? Start here!</p>
+ </li>
+ <li><span><a href="/en-US/docs/MDN/Contribute">I'm an advanced user</a></span>
+  <p>Access our full, in-depth guide for MDN contributors to learn more once you've gotten comfortable.</p>
+ </li>
+ <li><span><a href="/en-US/docs/MDN/Promote">Spread the word</a></span>
+  <p>If you love MDN, help get the word out! Find art, tools, and guides for promoting MDN.</p>
+ </li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Community">Join the MDN Community</a></li>
+ <li><a href="https://app.zenhub.com/workspace/o/mdn/sprints/boards?repos=121649843,55001853,70901646,134759439,90252175,1352520,3311772,82040629,121278372,33677290,132630865">Scrum board</a></li>
+</ul>
diff --git a/files/ms/mdn_at_ten/index.html b/files/ms/mdn_at_ten/index.html
new file mode 100644
index 0000000000..740ba0c4e2
--- /dev/null
+++ b/files/ms/mdn_at_ten/index.html
@@ -0,0 +1,37 @@
+---
+title: MDN at 10
+slug: MDN_at_ten
+translation_of: MDN_at_ten
+---
+<div class="summary"><span class="seoSummary">Celebrate 10 years of documenting your Web.</span></div>
+
+<div class="column-container">
+<div class="column-8">
+<h2 id="The_history_of_MDN">The history of MDN</h2>
+
+<p>In early 2005, a small team of idealists set out to create a new, free, community-built online resource for all Web developers. Their brilliant but offbeat idea grew into today’s Mozilla Developer Network—the premier resource for all open Web technologies. Ten years later, our global community is bigger than ever, and together we’re still creating documentation, sample code and learning resources for all open Web technologies, including CSS, HTML, JavaScript and everything else that makes the open Web as powerful as it is.</p>
+
+<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">Learn more <span class="offscreen">about the history</span></a></p>
+
+
+<h2 id="Contributing_to_MDN">Contributing to MDN</h2>
+
+<p>For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.</p>
+
+<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Learn more <span class="offscreen">about contributing</span></a></p>
+
+<p> </p>
+
+<p> </p>
+</div>
+
+<div class="column-4">{{TenthCampaignQuote}}</div>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ol>
+ <li><a href="/en-US/docs/MDN_at_ten/">MDN at 10</a></li>
+ <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">The history of MDN</a></li>
+ <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Contributing to MDN</a></li>
+</ol>
+</div>
diff --git a/files/ms/web/index.html b/files/ms/web/index.html
new file mode 100644
index 0000000000..bed0c089a5
--- /dev/null
+++ b/files/ms/web/index.html
@@ -0,0 +1,51 @@
+---
+title: Teknologi Web untuk pembangun
+slug: Web
+tags:
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web
+---
+<p>Teknologi Web membuka peluang yang sangat baik kepada para pembangun. Untuk menguasai teknologi ini, anda perlu tahu bagaimana menggunakannya. Di bawah, anda boleh temukan pautan-pautan kepada Dokumentasi Teknologi Web kami.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Dokumentasi untuk pembangun Web</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Reference">Rujukan pembangun Web</a></dt>
+ <dd>Senarai bagi semua rujukan untuk teknologi-teknologi Web, termasuk rujukan untuk HTML, CSS dan sebagainya.</dd>
+ <dt><a href="/en-US/docs/Web/Guide">Panduan untuk pembagun Web</a></dt>
+ <dd>Panduan untuk Pembangun Web menyediakan tunjuk-cara yang berguna untuk membantu anda menggunakan teknologi Web dengan betul bagi mencapai matlamat atau tujuan anda.</dd>
+ <dt><a href="/en-US/docs/Web/Tutorials">Tutorial untuk para pembangun Web</a></dt>
+ <dd>Senarai tutorial-tutorial yang memimpin anda langkah-demi-langkah dalam mempelajari API, teknologi-teknologi, serta pelbagai topik am lainnya.</dd>
+ <dt><a href="/en-US/docs/Web/Apps">Membangunkan aplikasi Web</a></dt>
+ <dd>Dokumentasi untuk para pembagun aplikasi Web; Web-App sebenarnya adalah aplikasi sekali-tulis, untuk diguna pakai di mobile, desktop, atau Firefox OS.</dd>
+ <dt><a href="/en-US/docs/Code_snippets">Ceraian kod (C<em>ode snippets</em></a>)</dt>
+ <dd>This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in <a href="/en-US/docs/XULRunner">XULRunner</a> applications, as well as in actual Mozilla code itself.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Web">View All...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Web technology references</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Reference/API">Web APIs</a></dt>
+ <dd>Reference material for each of the individual APIs that comprise the Web's powerful scriptability, including the <a href="/en-US/docs/DOM">DOM</a> and all of the related APIs and interfaces you can use to build Web content and apps.</dd>
+ <dt><a href="/en-US/docs/Web/HTML">HTML</a></dt>
+ <dd>HyperText Markup Language is the language used to describe and define the content of a Web page.</dd>
+ <dt><a href="/en-US/docs/Web/CSS">CSS</a></dt>
+ <dd>Cascading Style Sheets are used to describe the appearance of Web content.</dd>
+ <dt><a href="/en-US/docs/SVG">SVG</a></dt>
+ <dd>Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.</dd>
+ <dt><a href="/en-US/docs/Web/MathML">MathML</a></dt>
+ <dd>The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.</dd>
+ <dt><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML {{HTMLElement("canvas")}} elements</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ms/web_development/index.html b/files/ms/web_development/index.html
new file mode 100644
index 0000000000..6f1cac663e
--- /dev/null
+++ b/files/ms/web_development/index.html
@@ -0,0 +1,97 @@
+---
+title: Web Development
+slug: Web_Development
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+translation_of: Web/Guide
+---
+<p><strong>Web development</strong> comprises all aspects of developing a web site or web application.</p>
+<p>Learn how to create anything from a simple web site to complex, highly interactive web sites featuring the latest Web technologies by perusing the articles you'll find here.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2>
+        <h3 id="Technologies">Technologies</h3>
+        <dl>
+          <dt>
+            <a class="internal" href="/en-US/docs/Web_Development/Introduction_to_Web_development" title="en-US/docs/Web Development/Introduction to Web development">Introduction to Web development</a></dt>
+          <dd>
+            A guide to learning how to develop for the Web.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/HTML" rel="internal">HTML</a></dt>
+          <dd>
+            HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/CSS" rel="internal">CSS</a></dt>
+          <dd>
+            Cascading Style Sheets make it possible to do advanced layout and page design on the Web.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/JavaScript" rel="internal">JavaScript</a></dt>
+          <dd>
+            JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/DOM" rel="internal">DOM</a></dt>
+          <dd>
+            The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/AJAX" rel="internal">AJAX</a></dt>
+          <dd>
+            Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a></dt>
+          <dd>
+            Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/SVG" rel="internal">SVG</a></dt>
+          <dd>
+            Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.</dd>
+        </dl>
+        <h3 id="Strategies">Strategies</h3>
+        <dl>
+          <dt>
+            <a class="internal" href="/en-US/docs/Web_Standards" title="en-US/docs/Web Standards">Web standards</a></dt>
+          <dd>
+            Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.</dd>
+          <dt>
+            <a href="/en-US/docs/Web_Development/Responsive_Web_design" title="en-US/docs/Web development/Responsive Web design">Responsive Web design</a></dt>
+          <dd>
+            Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.</dd>
+          <dt>
+            <a href="/en-US/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt>
+          <dd>
+            Best practices for creating websites that do not break when browsers are updated.</dd>
+          <dt>
+            <a href="/en-US/docs/Web_Development/Mobile" title="/en-US/docs/Web development/Mobile">Mobile Web development</a></dt>
+          <dd>
+            Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Mozilla_Web_Developer_FAQ" title="en-US/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt>
+          <dd>
+            Frequently asked questions from Web developers. With answers!</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development" title="en-US/docs/tag/Web_Development">View All...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Community">Community</h2>
+        <ul>
+          <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks blog</a></li>
+          <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li>
+          <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li>
+        </ul>
+        <h2 class="Tools" id="Tools">Tools</h2>
+        <ul>
+          <li><a href="/en-US/docs/Tools" title="en-US/docs/Tools">Main Tools page</a></li>
+          <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a></li>
+          <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a></li>
+          <li><a href="/en-US/docs/Venkman" rel="internal">Venkman</a>, the JavaScript debugger</li>
+          <li><a href="/en-US/docs/DOM_Inspector" rel="internal" title="en-US/docs/DOM Inspector">DOM Inspector</a></li>
+          <li><a href="/en-US/docs/Tools/Scratchpad" title="en-US/docs/Tools/Scratchpad">Scratchpad</a></li>
+        </ul>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development:Tools" title="en-US/docs/tag/Web_Development:Tools">View All...</a></span></p>
+      </td>
+    </tr>
+  </tbody>
+</table>
author	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:42:17 -0500
committer	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:42:17 -0500
commit	da78a9e329e272dedb2400b79a3bdeebff387d47 (patch)
tree	e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ms
parent	1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff)
download	translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip