unslug ms: move

5 files changed, 625 insertions, 0 deletions

diff --git a/files/ms/web/api/canvas_api/index.html b/files/ms/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..bfd9cd5f2b
--- /dev/null
+++ b/files/ms/web/api/canvas_api/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/web/api/canvas_api/tutorial/index.html b/files/ms/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..2e656a8d46
--- /dev/null
+++ b/files/ms/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,159 @@
+---
+title: Melukis Grafik dengan Canvas
+slug: HTML/Canvas/Melukis_Grafik_dengan_Canvas
+translation_of: Web/API/Canvas_API/Tutorial
+translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas
+---
+<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/web/guide/index.html b/files/ms/web/guide/index.html
new file mode 100644
index 0000000000..051accb9a5
--- /dev/null
+++ b/files/ms/web/guide/index.html
@@ -0,0 +1,98 @@
+---
+title: Web Development
+slug: Web_Development
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+translation_of: Web/Guide
+translation_of_original: Web_Development
+---
+<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>
diff --git a/files/ms/web/html/element/index.html b/files/ms/web/html/element/index.html
new file mode 100644
index 0000000000..038d44abd8
--- /dev/null
+++ b/files/ms/web/html/element/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/web/html/index.html b/files/ms/web/html/index.html
new file mode 100644
index 0000000000..9bc6c1add7
--- /dev/null
+++ b/files/ms/web/html/index.html
@@ -0,0 +1,80 @@
+---
+title: HTML
+slug: HTML
+translation_of: Web/HTML
+translation_of_original: 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>