initial commit

9 files changed, 1519 insertions, 0 deletions

diff --git a/files/zh-tw/learn/getting_started_with_the_web/css_basics/index.html b/files/zh-tw/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..f51f584cf8
--- /dev/null
+++ b/files/zh-tw/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,273 @@
+---
+title: CSS 基本
+slug: Learn/Getting_started_with_the_web/CSS_basics
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><strong>階層樣式表</strong> (Cascading Stylesheets；CSS) 可用以塑造網站的特殊風格。例如這段文字要用一般的黑色，或是改用紅色標明重點？某段重要內容應該置於畫面的何處？想用什麼背景圖片及顏色裝飾你的網站？〈<a href="https://developer.mozilla.org/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本概念</a>〉帶你入門。</p>
+</div>
+
+<h2 id="CSS到底是什麼">CSS到底是什麼?</h2>
+
+<p>跟 HTML 一樣，CSS 既非標準程式語言，也不是標記語言, 而是一種風格頁面語言（<em>style sheet language</em>）：它能讓你在 HTML 文件中的元素（element）上套用不同的頁面樣式（style）。例如, 當想要將 HTML 頁面上所有段落元素（paragraph elements）裡的文字<strong>全部</strong>轉換成紅色，你會在CSS裡寫:</p>
+
+<pre class="brush: css notranslate" dir="rtl">p {
+  color: red;
+}</pre>
+
+<p>試看看在你的編輯器上建立新的檔案 <code>style.css</code> 並貼上這三行 CSS 程式碼，並存到你的<code>styles</code> 目錄。</p>
+
+<p>但我們還需要把 CSS 套用在 HTML 文件上。否則 CSS 的樣式效果，不會在瀏覽器的 HTML 檔案顯示。（如果你還未跟上我們的專案，請閱讀 <a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> 和 <a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> 以找出你需要什麼）</p>
+
+<ol>
+ <li>打開 <code>index.html</code> 文件，然後將下面一行貼到 head，也就是 <code>&lt;head&gt;</code> 和 <code>&lt;/head&gt;</code> 標籤之間。
+
+  <pre class="brush: html notranslate">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>存檔 <code>index.html</code> 並且在瀏覽器載入。你應該可以看到下面的頁面。</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">如果你的段落文字現在變成紅色, 恭喜, 你已經成功撰寫你的第一份 CSS！</p>
+
+<h3 id="解析_CSS_ruleset">解析 CSS ruleset</h3>
+
+<p>讓我們深入解析下列的 CSS：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>整個架構我們稱為規則集<strong> (rule set)，或是簡稱為規則 (rule) </strong>也可以。（也注意名字裡面的單獨部分）</p>
+
+<dl>
+ <dt>選擇器（Selector）</dt>
+ <dd>在這個規則的最前頭為 HTML 的元素名。它將決定你 HTML 裡什麼元素將被你接下來的設定影響（在這個範例中,就是 段落元素 <code>p</code>）。若要改變欲影響的元素，只要更改選擇器就行了。</dd>
+ <dt>宣告（Declaration）</dt>
+ <dd>單一個規則，例如 <code>color: red;</code> 指定了這個元素的呈現樣貌。</dd>
+ <dt>屬性 (Properties)</dt>
+ <dd>修改屬性是改變你HTML元素的一種方法 . (在這範例中, <code>color</code> 是段落（<code>p</code>）元素的一種屬性.) 在CSS中, 你可以選擇哪些屬性用來影響 rule.</dd>
+ <dt>屬性值 (Property value)</dt>
+ <dd><strong>屬性值 </strong> 就是位於屬性右邊，在冒號（<code>:</code>）之後，從眾多的可能樣式選出一個給予屬性（範例中就是從眾多的 <code>color</code> 樣式中選出 <code>red</code>）</dd>
+</dl>
+
+<p>注意語法其他重要的部分：</p>
+
+<ul>
+ <li>每一個規則當中，除了選擇器名稱以外，其他都必須被大括號（<code>{}</code>）給包住.</li>
+ <li>在每一個宣告裡面，屬性跟屬性值之間必須用冒號(<code>:</code>) 做區分。</li>
+ <li>在每一個規則裡面可以包含有許多宣告，但不同的宣告之間必須使用分號 (<code>;</code>) 來區分。</li>
+</ul>
+
+<p>下面是一個簡單的CSS規則範例。注意每個宣告都是以冒號(<code>:</code>)來指定屬性值，並且宣告之間都是以分號做區分 (<code>;</code>) 。</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="選擇多個元素">選擇多個元素</h3>
+
+<p>你可以選擇數種元素（elements）並同時用在同一個 rule set 上。可以用逗號（,）包含數個選擇器，如：</p>
+
+<pre class="brush: css notranslate">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="選擇器的不同類型">選擇器的不同類型</h3>
+
+<p>選擇器有很多種類。到目前為止，我們只看到了<strong>元素選擇器（element selector）</strong>，它選取了指定 HTML 檔案下的所有選定元素。不過，我們還有更多選擇器。以下有一些常見類型：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">選擇器名</th>
+   <th scope="col">選取/控制什麼</th>
+   <th scope="col">範例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>元素選擇器，有時也稱作標籤或類型選擇器（Element selector、tag or type selector)</td>
+   <td>指定所有 HTML 元素中的特定元素</td>
+   <td><code>p</code><br>
+    選取 <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>ID 選擇器（ID selector）</td>
+   <td>指定頁面上的特定 ID 元素（單一 HTML 頁面中，每個 ID 只能綁定一個元素）</td>
+   <td><code>#my-id</code><br>
+    控制 <code>&lt;p id="my-id"&gt;</code> 或 <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Class 選擇器（Class selector）</td>
+   <td>指定頁面上的特定 class 元素（單一 HTML 頁面中，class 屬性可以被多個元素使用）</td>
+   <td><code>.my-class</code><br>
+    控制 <code>&lt;p class="my-class"&gt;</code> 與 <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>屬性選擇器（Attribute selector）</td>
+   <td>指定頁面上的特定屬性元素</td>
+   <td><code>img[src]</code><br>
+    控制 <code>&lt;img src="myimage.png"&gt;</code> 但不控制 <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>虛擬 class 選擇器（Pseudo-class selector）</td>
+   <td>在特定的情況下，指定頁面的元素，例如懸停時。</td>
+   <td>
+    <p><code>a:hover</code><br>
+     控制 <code>&lt;a&gt;</code>, 但只有在滑鼠游標停留在連結上時.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>還有很多值得探索的選擇器，你可以在我們的選擇器導引章節 <a href="/zh-TW/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a> 看到更多介紹。</p>
+
+<h2 id="文字與字體">文字與字體</h2>
+
+<p>現在我們已經瀏覽過一些CCS的基礎，接下來我們開始增加更多的規則和資訊到我們的style.css檔案，讓我們範例中的字型和文字看起來更好.</p>
+
+<ol>
+ <li>第一步, 我們回到 <a href="https://wiki.developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">output from Google Fonts</a> 找到你存的字體。 加上 <code>&lt;link ... &gt;</code> 這個元素在你的 <code>index.html</code>文件裡的head中（在 <code>&lt;head&gt;</code> 跟 <code>&lt;/head&gt;</code> 任何位置中）。<br>
+  這一段code將頁面連結到樣式表，將Open Sans字體系列與網頁一起下載，並讓你在HTML元素上使用自己的樣式表進行設置。 它看起來會像:
+  <pre class="brush: html notranslate">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+ </li>
+ <li>下一步, 刪除<code>style.css文件中</code>其他現有的字體。這是個很好的嘗試, 但紅色字體看起來真的有點醜。</li>
+ <li>把下面這行加在這個地方, 取代 placeholder line with the actual <code>font-family</code> line you got from Google 字體. (<code>font-family</code> 是指你想在文件中使用的字體.)<br>
+  這規則<br>
+  此規則首先為頁面設置整體的基本字體和字型(因 <code>&lt;html&gt;</code> 是整個頁面的父元素, 頁面中所有的元素會繼承同樣的字體和字型):
+  <pre class="brush: css notranslate">html {
+  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
+  font-family: placeholder: this should be the rest of the output you got from Google fonts
+}</pre>
+
+  <div class="note">
+  <p><strong>Note</strong>: 我已增加了對於 "px" 的說明在上面. 任何在 CSS document 中 <code>/*</code>  <code>*/</code> 內的文字是 <strong>CSS 說明</strong>, 瀏覽器在編譯時會忽略掉. 這是一個可以用來說明你做了什麼的幫助訊息.</p>
+  </div>
+ </li>
+ <li>現在我們將會在HTML body中為包含文字的元素設置字體大小，<code>&lt;h1&gt;</code>,<code>&lt;li&gt;</code>,<code>&lt;p&gt;</code>。我們也設置標題居中，並在正文內容上設置一些行高和間距，使其更具可讀性</li>
+ <li>
+  <pre class="brush: css notranslate">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>你可以依自己喜好修改 <code>px</code> 的值。你目前的工作成果可能如下圖所示：</p>
+
+<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="CSS：和塊（box）密不可分">CSS：和塊（box）密不可分</h2>
+
+<p>當你在編寫 CSS，設定尺寸、顏色及位置時，你會發現它有著如同箱子（塊，box）的概念。多數在網頁上的 HTML 元素就像是箱子一般相互堆疊而成。</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>CSS佈局主要基於「box 模型」。在頁面空間的每個 box 都有下列屬性：</p>
+
+<ul>
+ <li><code>padding:</code>內容周圍的空格（例如，段落文字周圍）</li>
+ <li><code>border:</code> 位於矩形內容外部的實線</li>
+ <li><code>margin:</code> 元素外部的空間</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>在本節中，我們還使用：</p>
+
+<ul>
+ <li><code>width:</code>（元素的寬度）</li>
+ <li><code>background-color:</code>元素內容和矩形內容後面的顏色</li>
+ <li><code>color:</code> 元素內容的顏色（通常是文字）</li>
+ <li><code>text-shadow:</code>在元素內的文字上設置陰影</li>
+ <li><code>display:</code> 設置元素的顯示模式（後面會詳細介紹）</li>
+</ul>
+
+<p>所以，讓我們開始對我們的頁面添加更多 CSS！繼續將這些新規則添加到<code>style.css</code>頁面底部，不需要害怕多方嘗試去改值設定來了解結果。</p>
+
+<h3 id="改變頁面顏色">改變頁面顏色</h3>
+
+<pre class="brush: css notranslate">html {
+  background-color: #00539F;
+}</pre>
+
+<p>這條規則將會套用到整個頁面的背景顏色。根據你在<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">規劃網站時選擇的顏色</a>修改其中的顏色代碼。</p>
+
+<h3 id="設定_body_的風格（styling）">設定 body 的風格（styling）</h3>
+
+<pre class="brush: css notranslate">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>接下來修改 <code>body</code> 元素。以下依序介紹一些常見的宣告：</p>
+
+<ul>
+ <li><code>width: 600px;</code> — 將 body 寬度固定為 600 像素</li>
+ <li><code>margin: 0 auto;</code> — When you set two values on a property like <code>margin</code> or <code>padding</code>, the first value affects the element's top <strong>and</strong> bottom side (make it <code>0</code> in this case), and the second value the left <strong>and</strong> right side (here, <code>auto</code> is a special value that divides the available horizontal space evenly between left and right). You can also use one, three, or four values, as documented <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">here</a>.</li>
+ <li><code>background-color: #FF9500;</code> — as before, this sets the element's background color. I used a sort of reddish orange for the body as opposed to dark blue for the <code>html</code> element. Go ahead and experiment. Feel free to use <code>white</code> or whatever you like.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — we have four values set on the padding, to make a bit of space around our content. This time we are setting no padding on the top of the body, and 20 pixels on the left, bottom and right. The values set top, right, bottom, left, in that order.</li>
+ <li><code>border: 5px solid black;</code> — this simply sets a 5 pixel wide solid black border on all sides of the body.</li>
+</ul>
+
+<h3 id="設定我們主要頁面標題的位置（Positioning）和風格（styling）">設定我們主要頁面標題的位置（Positioning）和風格（styling）</h3>
+
+<pre class="brush: css notranslate">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some <strong>default styling</strong> to the {{htmlelement("h1")}} element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting <code>margin: 0;</code>.</p>
+
+<p>Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the html background color.</p>
+
+<p>One rather interesting property we've used here is <code>text-shadow</code>, which applies a text shadow to the text content of the element. Its four values are as follows:</p>
+
+<ul>
+ <li>The first pixel value sets the <strong>horizontal offset</strong> of the shadow from the text — how far it moves across: a negative value should move it to the left.</li>
+ <li>The second pixel value sets the <strong>vertical offset</strong> of the shadow from the text — how far it moves down, in this example; a negative value should move it up.</li>
+ <li>The third pixel value sets the <strong>blur radius</strong> of the shadow — a bigger value will mean a more blurry shadow.</li>
+ <li>The fourth value sets the base colour of the shadow.</li>
+</ul>
+
+<p>Again, try experimenting with different values to see what you can come up with.</p>
+
+<h3 id="把圖像置中">把圖像置中</h3>
+
+<pre class="brush: css notranslate">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Finally, we'll center the image to make it look better. We could use the <code>margin: 0 auto</code> trick again as we did earlier for the body, but we also need to do something else. The body element is <strong>block level</strong>, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are <strong>inline</strong> elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using <code>display: block;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Don't worry if you don't yet understand <code>display: block;</code> and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our <a href="/en-US/docs/Web/CSS/display">display reference page</a>.</p>
+</div>
+
+<h2 id="結論">結論</h2>
+
+<p>看完了以上的介紹並依照各個步驟實做，你應該能自己寫出這樣的網頁（如下， <a href="http://mdn.github.io/beginner-html-site-styled/" rel="noopener">view it here</a>):</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>如果哪裡卡關了，你可以隨時造訪 Github 上的 <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css" rel="noopener">finished example code</a> ，看看裡面的 code 和你寫的哪裡不同。</p>
+
+<p>這篇文章觸及的是非常基本的 CSS 介紹，若你有興趣想進一步了解，歡迎參考 <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>。</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..8411bdbe86
--- /dev/null
+++ b/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -0,0 +1,117 @@
+---
+title: 與各式各樣檔案打交道
+slug: Learn/Getting_started_with_the_web/Dealing_with_files
+tags:
+  - HTML
+  - 初學者
+  - 指南
+  - 網站
+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>一個網站會包含許多檔案: 文字內容、程式碼、樣式表、影音內容......等。每當你建立一個網站時，你需要將這些檔案在你的電腦上合理架構好。以確保它們能夠互相溝通，並讓內容正常顯示。然後你接著才能<a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a>。本篇文章將探討你應該注意的一些議題，以便讓你能夠為你的網站設定好合理的檔案架構。</p>
+</div>
+
+<h2 id="你的網站在哪裡">你的網站在哪裡?</h2>
+
+<p>當你正在你自己的電腦上編輯你的網站時，你應該將所有相關的檔案放在同一個資料夾中，這反映到未來在伺服器上的檔案架構。這個資料夾可以放在任何地方，但你應該會放在一個容易找到的地方，對吧！像是你的桌面，你的家目錄，或是你硬碟的根目錄。</p>
+
+<ol>
+ <li>找到一個地方來存放你的網站專案。首先，建立一個新資料夾並命名為 <code>web-projects</code> (或類似名稱)。 這裡將存放你的各種網站專案.</li>
+ <li>在上述資料夾底下，建立另一個資料夾來存放你的第一個網站，請將這個資料夾命名為 <code>test-site</code> (或其他有創意的名稱).</li>
+</ol>
+
+<h2 id="留意大小寫與空格">留意大小寫與空格</h2>
+
+<p>你將注意到在本篇文章中，我們會要求你在命名檔案或是資料夾時，只使用小寫並且避免使用空格。這是因為：</p>
+
+<ol>
+ <li>許多的電腦尤其是網路伺服器，是大小寫區分的(case-sensitive)。所以假設你放了圖片在你的網站上而路徑是 <code>test-site/MyImage.jpg</code>，然後另一個檔案你想放在 <code>test-site/myimage.jpg</code>，這可能是無法運作的。</li>
+ <li>瀏覽器、伺服器、以及各種程式語言對於空格的處理並不是一致的。舉例來說，如果你在檔名中使用了空格，有些系統會將其視為兩個檔名，有些伺服器會將空格替換成 "%20" (這是空格在 URIs 中的表示法)，並破壞了你的連結。我們建議使用底線(underscores)與破折號(dashes)來隔開單字。例如：<code>my-file.html</code> 或是 <code>my_file.html</code>.</li>
+</ol>
+
+<p>也因為這些原因，你應該盡量在命名資料夾與檔案時使用小寫並避免使用空格，這樣一來將能夠減少一些不必要的錯誤。</p>
+
+<h2 id="你的網站架構應該如何">你的網站架構應該如何?</h2>
+
+<p>下一步，我們要看看我們的測試網站應該具有什麼樣的架構。我們的網站專案最常見的東西就是一個HTML檔案與專門放圖片、樣式檔案、腳本檔案的資料夾們。讓我們來看看下面：</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: 這個檔案會包含你的首頁內容，也就是別人一進到你的網站時所看到的文字與圖片。使用你的文字編輯器，建立一個新檔案命名為 <code>index.html</code> ，並將它存到 <code>test-site</code> 這個資料夾下。</li>
+ <li><strong><code>images</code> folder</strong>: 這個資料夾包含了所有網站會用到的圖片，建立一個新資料夾命名為 <code>images</code> ，並將它存到 <code>test-site</code> 這個資料夾下。</li>
+ <li><strong><code>styles</code> folder</strong>: 這個資料夾包含了能夠設計你的網站的CSS碼(例如：設定文字與背景顏色)，建立一個資料夾命名為 <code>styles</code>，並將它存到 <code>test-site</code> 這個資料夾下。</li>
+ <li><strong><code>scripts</code> folder</strong>: 這個資料將包含能夠使網站具有互動性的JavaScript程式碼。(例如：按下按鈕後會載入資料)。建立一個資料夾命名<code> scripts</code> ，並將它存到 <code>test-site</code> 這個資料夾下。</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: 在Windows的電腦上，你可能在設定副檔名上會遇到一些困難。因為Windows預設會將已知的檔案類型名稱隱藏。一般來說你可以將這項設定關掉，只需要去檔案總管，選擇「資料夾選項」並取消選取「隱藏已知檔案類型的副檔名」，並點選 <strong>OK </strong>。有關不同版本的Windows的設定方法，請利用搜尋引擎搜尋。</p>
+</div>
+
+<h2 id="檔案路徑">檔案路徑</h2>
+
+<p>要讓一個檔案能夠與另一個檔案"溝通"，你需要提供一個他們之間的相對檔案路徑以讓檔案能夠找到另一個檔案在哪裡。為了要展示，我們將插入一小段的HTML到我們的 <code>index.html</code> 檔案中，並且讓它顯示你在 <a href="/zh-TW/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"What will your website look like?" </a>這篇文章中所選的圖片。</p>
+
+<ol>
+ <li>複製你選的圖片並放到 <code>images</code> 資料夾中。</li>
+ <li>打開你的 <code>index.html</code>，並複製貼上下面這段code。先別擔心這些code代表什麼意思，我們會在後面的時候講解它們代表的意義。
+  <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><code>&lt;img src="" alt="My test image"&gt;</code> 這行是一段將圖片插入到頁面中的 HTML code，我們必須告訴HTML圖片在哪。我們知道圖片在  <em>images</em> 資料夾中，而  <em>images</em> 資料夾就跟 <code>index.html </code>在同一目錄下。為了要在檔案系統結構中從 <code>index.html</code> 走到我們的圖片，我們需要將檔案路徑設為<code>images/your-image-filename</code>. 舉例來說，我們的圖片命名為 <code>firefox-icon.png，所以這裡的檔案路徑即為 </code><code>images/firefox-icon.png</code>.</li>
+ <li>將檔案路徑貼到你的 HTML code 中的<code> src=""</code> 的雙引號之間。</li>
+ <li>將你的 HTML 檔案存檔，並且滑鼠雙擊HTML檔案來打開它，你應該會看到一個新的網頁並展示著你的圖片!</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>一些有關路徑的規則:</p>
+
+<ul>
+ <li>要連結一個目標檔案到在同一個目錄下的HTML檔案，只需要檔案名稱就可以了。例如 <code>my-image.jpg</code>。</li>
+ <li>為了要參照到在子目錄下的檔案，在路徑前面加上該目錄的名稱，並接著加上一個斜線(/)。例如： <code>subdirectory/my-image.jpg</code>.</li>
+ <li>為了要連結到一個在 HTML file 的上層目錄的檔案，你需要使用兩個點點(..)。例如：index.html是在<code>test-site 這個目錄的一個子目錄下，而 my-image.png</code> 是在<code> test-site 這個目錄</code>下，HTML file 要參照 <code>my-image.png</code> 必須使用 <code>../my-image.png</code>。</li>
+ <li>你可以混和著使用以上的規則，例如 <code>../subdirectory/another-subdirectory/my-image.png</code>.</li>
+</ul>
+
+<p>至此，你已經知道目前需要知道的了。</p>
+
+<div class="note">
+<p><strong>Note</strong>: Windows的檔案系統會傾向使用反斜線(\)，而非斜線(/)。例如 <code>C:\windows</code>. 這並沒有關係，即使你是在Windows上開發網站，你仍然應該在程式碼中使用斜線(/)。</p>
+</div>
+
+<h2 id="還有什麼需要被完成的">還有什麼需要被完成的?</h2>
+
+<p>目前先這樣吧。你的資料夾裡面現在應該長得像這樣：</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a></li>
+   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a></li>
+   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a></li>
+   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基本概念</a></li>
+   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本概念</a></li>
+   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基本概念</a></li>
+   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a></li>
+   <li><a href="/zh-TW/Learn/Getting_started_with_the_web/How_the_Web_works">網站的運作方式</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/zh-tw/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/zh-tw/learn/getting_started_with_the_web/how_the_web_works/index.html
new file mode 100644
index 0000000000..05ac9e4d7b
--- /dev/null
+++ b/files/zh-tw/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -0,0 +1,101 @@
+---
+title: 網路如何運作
+slug: Learn/Getting_started_with_the_web/How_the_Web_works
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>〈網路如何運作〉將簡單介紹</em>，當你透過電腦或手機瀏覽器瀏覽網頁時，究竟發生什麼事。</p>
+</div>
+
+<p>短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。</p>
+
+<h2 id="用戶與伺服器">用戶與伺服器</h2>
+
+<p>連接到網路的電腦稱為<strong>用戶端</strong>（client）與<strong>伺服器端</strong>（server）。彼此的連結原理如圖所示：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p>
+
+<ul>
+ <li>用戶端是網路用戶的典型上網設備（像是連到 Wi-Fi 的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是 Firefox 或 Chrome 之類的瀏覽器）。</li>
+ <li>伺服器端是放著網頁、網站、或者  app 的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。</li>
+</ul>
+
+<h2 id="百寶箱的其他魔法">百寶箱的其他魔法</h2>
+
+<p>剛剛描述的用戶/伺服器端還不是一切，我們還要講述其他部份，才能說完整個故事。</p>
+
+<p>現在把網路想像成一條大道。大道的一端是用戶端，就像你家一樣；另一端則是伺服器，就像是你要去血拼的商店。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>除了用戶與伺服器之外，我們還需要和這些朋友們打招呼：</p>
+
+<ul>
+ <li><strong>網路連線</strong>：讓你可以在網路傳送與接收資料。基本上就像是家裡到商店一樣。</li>
+ <li><strong>TCP/IP</strong>：傳輸控制協定和網際網路協定（Transmission Control Protocol and Internet Protocol）是定義資料如何在網路通行的通訊協定。這就像是方便你去商店買東西的交通工具。在這裡本例中，這就像是車子、腳踏車、或其他你想得到的交通工具。</li>
+ <li><strong>DNS</strong>：網域名稱系統（Domain Name Servers）就像是網站的電話簿。當你在瀏覽器輸入網址時，瀏覽器會在取得網站前，先去看 DNS 以查到網站的真實地址。瀏覽器需要找到哪個伺服器在託管指定的網站、這樣才能把 HTTP 訊息傳送到對的地方（可以參考下文）。這就像你在去商店前會先翻開電話簿，才好去商店一般。</li>
+ <li><strong>HTTP</strong>超文本傳輸協定（Hypertext Transfer Protocol）是定義用戶端語言，和伺服器如何對話的應用{{Glossary("Protocol" , "協議")}}。可以想成你買東西時會用來溝通的語言。</li>
+ <li><strong>Component files</strong>：網站由許多不同的文件組成，如同商店內許多不同的商品。這些檔案分為以下類型：
+  <ul>
+   <li><strong>程式檔</strong>：網站主要是由 HTML、CSS、JavaScript 建立，雖然你知會看到其他工具或技術。</li>
+   <li><strong>Asset</strong>：這是構成網站其他內容的集體名稱，裡面可能包含圖像、音樂、影片、Word、PDF……之類的。</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="所以我說到底發生了啥？">所以我說到底發生了啥？</h2>
+
+<p>當你在瀏覽器輸入網址時（你可以想像說自己要走去商店時）：</p>
+
+<ol>
+ <li>瀏覽器會先去 DNS 伺服器尋找託管網站的伺服器，其真實位置所在（如同你去尋找商店的地址）</li>
+ <li>瀏覽器向伺服器傳送 HTTP 訊息，請求伺服器向用戶端傳送網站的複本（如同去商店下訂單）。在用戶端及伺服器的之間，請求訊息與其他資訊，會使用 TCP/IP 在網路連線之間傳送。</li>
+ <li>伺服器如果允許用戶端請求，伺服器就會傳送「200 OK」訊息，意味著「好，你可以閱覽這個網站，那我給你網站資料囉～」並開始對瀏覽器以一小串稱作「資料封包」的組合形式，傳送網站的檔案。這就像是商店給你商品，你接著把它們都帶回家一樣</li>
+ <li>瀏覽器把一小塊一小塊的東西，組合成完整的網站，並把它呈現起來－－商品送到家門口後，閃亮亮的新貨在你眼前，超棒的啦！</li>
+</ol>
+
+<h2 id="講講_DNS">講講 DNS</h2>
+
+<p>真正的網址，並不是在瀏覽器的網址列上，輸入好記好讀的字串，就能找到你最愛的網站。它們其實是一串特殊的數字，看起來就像是這樣：63.245.215.20</p>
+
+<p>這叫做 {{Glossary("IP Address", "IP 地址")}}，網路上它擁有獨一無二的位置。不過，記數字果然不簡單吧？這就是要發明域名伺服器的原因。他們會把你在瀏覽器輸入的網址（例如 mozilla.org）和網站的真實位置（IP）相匹配</p>
+
+<p>網站能直接透過其 IP 位置訪問之：在瀏覽器的網址列輸入 <code>63.245.215.20</code> 的話，可以走到 Mozilla 的網站。</p>
+
+<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h2 id="再講講封包">再講講封包</h2>
+
+<p>稍早我們用了「封包」來描述從伺服器傳到用戶端的資料格式。這裡的「封包」是什麼意思呢？通常資料在網路傳送時，會傳送上千個小資料，這樣在同一時間和同一網站，才能有很多用戶下載內容。如果網站只傳送一個大傢伙過去，那在同一時間就只能有一個用戶能下載，網路會變得很慢、很無聊...</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Learn/Common_questions/How_does_the_Internet_work">How the Internet works</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
+</ul>
+
+<h2 id="製作群">製作群</h2>
+
+<p>街頭的照片：<a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>、作者是<a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>。</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="在模塊裡面">在模塊裡面</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a></li>
+ <li id="What_will_your_website_look_like"><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a></li>
+ <li id="Dealing_with_files"><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a></li>
+ <li id="HTML_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基礎</a></li>
+ <li id="CSS_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本</a></li>
+ <li id="JavaScript_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基礎</a></li>
+ <li id="Publishing_your_website"><a href="/zh-TW/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a></li>
+ <li id="How_the_web_works"><a href="/zh-TW/Learn/Getting_started_with_the_web/How_the_Web_works">網路如何做動</a></li>
+</ul>
diff --git a/files/zh-tw/learn/getting_started_with_the_web/html_basics/index.html b/files/zh-tw/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..f59eb8eab7
--- /dev/null
+++ b/files/zh-tw/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,232 @@
+---
+title: HTML 基礎
+slug: Learn/Getting_started_with_the_web/HTML_basics
+tags:
+  - HTML
+  - Web
+  - 學習
+  - 寫程式
+  - 新手
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML（<strong>H</strong>ypertext <strong>M</strong>arkup <strong>L</strong>anguage），中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成，可能包含了段落、清單、圖片或表格...等。透過這篇文章，希望能幫助大家對 HTML 及其功能有基本的認識。</p>
+</div>
+
+<h2 id="HTML_到底是什麼？">HTML 到底是什麼？</h2>
+
+<p>HTML 是一種<em>標記語言（markup language）</em>，而非一般熟知的程式設計語言；它會告訴瀏覽器該如何呈現你的網頁──單純簡易或是極其複雜的頁面都沒問題。HTML 包含了一系列的<strong>元素（{{Glossary("element", "elements")}}）</strong>，而元素包含了<strong>標籤（{{Glossary("tag", "tags")}}）</strong>與<strong>內容（content）</strong>，我們用標籤來控制內容的呈現樣貌，例如字體大小、斜體粗體、在文字或圖片設置超連結等。舉例來說，請看看以下這個句子：</p>
+
+<pre>My cat is very grumpy</pre>
+
+<p>如果我們想讓這個句子自成一個段落，那麼可以在它前後分別加上段落標籤 ({{htmlelement("p")}})，它就變成一個段落元素了：</p>
+
+<pre class="brush: html">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+
+<h3 id="HTML_元素的組成">HTML 元素的組成</h3>
+
+<p>讓我們來仔細的觀察一下，內容、標籤和元素的關係：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>我們可以看到基本的架構：</p>
+
+<ol>
+ <li><strong>起始標籤 （The opening tag）：</strong>先打角括弧，也就是大於、小於的符號「&lt; &gt;」，裡面再放入元素名稱，如上面的例子「&lt;p&gt;」。起始標籤代表這個元素從這裡開始。</li>
+ <li><strong>結束標籤 （The closing tag）：</strong> 與起始標籤一樣，只是在元素名稱前面多了個<em>前置斜線</em>「/」。很容易理解地，內容的最後加上結束標籤，代表這個元素的尾端。在寫HTML時，很容易忘了最後的結束標籤，提醒大家要多注意唷！</li>
+ <li><strong>內容（The content）：</strong> 這個元素的內容，以上面的例子來說，內容就是這句文字。</li>
+ <li><strong>元素（The element）：</strong> 由起始標籤、結束標籤、內容所組成。</li>
+</ol>
+
+<p>元素還可以有「屬性（Attribute）」，請大家看看下面的例子：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>屬性能提供更多的資訊（當然，這個資訊是幫助我們更有效及方便編輯，不會呈現在網頁上），屬性包含了屬性名稱與值，你可以利用屬性設定這個元素的色彩、對齊方式、圖表的格線等等。</p>
+
+<p>屬性的組成包含：</p>
+
+<ol>
+ <li>在元素名稱和屬性之間有一個空格（如果有多個屬性，屬性之間也需要有空格）</li>
+ <li>屬性名稱後面接著等於符號「=」</li>
+ <li>屬性包在起始標籤裡面，如範例所示</li>
+</ol>
+
+<h3 id="巢狀元素">巢狀元素</h3>
+
+<p>元素裡面可以在放進元素，我們稱之為「<strong>巢狀元素（nesting element）</strong>」。例如這個句子：「我的貓有夠無敵臭臉」，若你想強調「有夠無敵」，我們就可以把「有夠無敵」這四個字自成一個顯示為粗體的元素 {{htmlelement("strong")}} :</p>
+
+<pre class="brush: html">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
+
+<p>要注意的是，每個元素都有自己的起始和結束標籤，一層一層的包覆。所以最外層是&lt;p&gt;  ，接著&lt;strong&gt; ；先結束strong元素，所以先寫&lt;/strong&gt;，最外面才是 &lt;/p&gt;。</p>
+
+<pre class="example-bad brush: html">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>如果元素的起始和結束標籤錯置（如上方），那麼瀏覽器只能自行判斷你想呈現的樣子，可能會完全不如預期！所以在做巢狀元素時要多注意唷！</p>
+
+<h3 id="空元素">空元素</h3>
+
+<p>有些元素沒有內容，我們稱為「<strong>空元素（empty elements）</strong>」。 以這個圖片元素 {{htmlelement("img")}} 為例：</p>
+
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>它有兩個屬性，但是沒有結束標籤，也沒有裡面的內容。因為圖片元素是直接把圖檔嵌在 HTML 網頁上。</p>
+
+<h3 id="HTML_文件的架構">HTML 文件的架構</h3>
+
+<p>讓我們來看看一個完整的HTML頁面它所包含的要素（以下範例的程式碼出自這篇文章：<a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>）：</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>我們可以看到：</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — 文件類型（doctype）。 在 HTML 發展初期（約莫 1991/2 的年代）文件類型是用來連結一些應遵守的規則，有點像自動校正的功能。然而，現在大家其實不太管文件類型，它就是個必須放在程式碼中的東西，現階段大家只需要知道這點就夠了。</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — <code>&lt;html&gt;</code> 元素，又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> —  <code>&lt;head&gt;</code> 元素，裡面放的是你想涵括的重要資訊，但<strong>不會顯示於網頁瀏覽者眼前的</strong>。例如，顯示於搜尋結果的關鍵字、頁面說明<em>、</em>CSS、字元實體集...等。</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> —  <code>&lt;body&gt;</code> 元素，包含了<strong>所有會顯示於網頁瀏覽者眼前的內容。</strong> 無論是文字、圖片、影面、互動遊戲...等。</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — 這個元素指定了你的文件使用utf-8這種字元編碼， 建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — 呈現於網頁瀏覽者眼前的網頁標題。</li>
+</ul>
+
+<h2 id="圖片">圖片</h2>
+
+<p>再讓我們複習一下圖片元素：</p>
+
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>如同我們前面提到，圖片元素是直接把圖檔嵌在HTML網頁上，它是透過圖片來源（<code>src</code> ，source）這個屬性，提供了連到圖片檔案的路徑。</p>
+
+<p>我們也可以加上<code>alt</code> (alternative) 這個屬性。在網頁瀏覽者無法正確看到圖片時，你希望對他們呈現什麼樣的說明文字。這種狀況會發生通常是因為:</p>
+
+<ol>
+ <li>許多視能障礙的網頁瀏覽者，會使用「Screen Readers」這樣的工具，利用說明文字（alt text）來了解網頁要呈現的圖片內容。</li>
+ <li>就是有些東西出錯了。例如，你誤植了圖片來源的路徑，你可能就會看到類似以下的文字：</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+
+<p>說明文字應該要好好呈現這個圖片的內容，上面這個例子就很差。好的例子像是：「Firefox  Logo：有一隻狐狸繞著地球」</p>
+
+<div class="note">
+<p><strong>注意</strong>：你可以在 <a href="/zh-TW/docs/Web/Accessibility">MDN's Accessibility landing page</a> 查看無障礙頁面的資訊。</p>
+</div>
+
+<h2 id="標記文字">標記文字</h2>
+
+<p>這個段落將為大家介紹如何標記文字（讓這些文字如何呈現）。</p>
+
+<h3 id="文件標題_heading"><strong>文件標題</strong> (heading)</h3>
+
+<p>讓你呈現這些內容的主題，就像一本書有書名、章節名稱和副標題，一份HTML文件也有類似的概念。HTML最多可以有六層的heading， {{htmlelement("h1")}}–{{htmlelement("h6")}} ，雖然通常我們只使用3至4層：</p>
+
+<pre class="brush: html">&lt;h1&gt;My main title&lt;/h1&gt;
+&lt;h2&gt;My top level heading&lt;/h2&gt;
+&lt;h3&gt;My subheading&lt;/h3&gt;
+&lt;h4&gt;My sub-subheading&lt;/h4&gt;</pre>
+
+<p>請試試在 {{htmlelement("img")}} 上方，加上合適的heading。</p>
+
+<h3 id="段落_paragraph"><strong>段落 (paragraph)</strong></h3>
+
+<p>如上面介紹過的，{{htmlelement("p")}} elements 包含文字段落，在呈現一般文字時，這是我們最常用到的。</p>
+
+<pre class="brush: html">&lt;p&gt;This is a single paragraph&lt;/p&gt;</pre>
+
+<p><strong>請試試在這裡 <a href="/zh-TW/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>What should your website look like?</em></a><em> </em>的圖片（&lt;img&gt; element）下方，加上幾段文字。</strong></p>
+
+<h3 id="清單_list"><strong>清單 (list)</strong></h3>
+
+<p>清單至少會包含兩個元素，以下是最常見的清單類，無順序性與有順序性的：</p>
+
+<ol>
+ <li><strong>無順序性清單（Unordered lists）</strong> 代表這些項目的順序改變，不影響任何是，例如購物清單。項目會包含在  {{htmlelement("ul")}} 裡面。</li>
+ <li><strong>有順序性清單（Ordered lists）</strong>代表這些項目的順序是有意義的，例如食譜裡的製作步驟。項目會包含在 {{htmlelement("ol")}} 裡面。</li>
+</ol>
+
+<p>每個項目則分別放在{{htmlelement("li")}} (list item) element裡面。</p>
+
+<p>例如，我們想把以下這段文字變成清單：</p>
+
+<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>
+
+<p>寫法如下：</p>
+
+<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;technologists&lt;/li&gt;
+  &lt;li&gt;thinkers&lt;/li&gt;
+  &lt;li&gt;builders&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;working together ... &lt;/p&gt;</pre>
+
+<p><strong>請試試在練習網頁，加上一個清單。</strong></p>
+
+<h2 id="連結_link">連結 (link)</h2>
+
+<p>連結對於網頁來說是非常重要的。要加上連結，我們需要用到這個元素 — {{htmlelement("a")}} —  <em>a</em> 代表了「anchor」。要讓文字變成連結的步驟如下：</p>
+
+<ol>
+ <li>選擇一些文字，例如「Mozilla Manifesto」。</li>
+ <li>把他們包在這個&lt;a&gt; 元素裡：
+  <pre class="brush: html">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>在&lt;a&gt; element 中加上href attribute這個屬性：
+  <pre class="brush: html">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>屬性質就是你要連結網址：
+  <pre class="brush: html">&lt;a href="https://www.mozilla.org/zh-TW/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>網址的開頭使用<code>https://</code> 或 <code>http://</code> （網路文字傳送標準的不同）可能會給你不一樣的結果。因此，在寫連結時，請自己先點擊過，確認無誤。</p>
+
+<p><strong>請試試在練習網頁加上一個超連結。</strong></p>
+
+<div class="note">
+<p><code>href</code> 這個屬性名稱比較不直觀，不太好記，但它代表的是：<em><strong>h</strong>ypertext <strong>ref</strong>erence</em>的縮寫。</p>
+</div>
+
+<h2 id="sect1"></h2>
+
+<h2 id="結論">結論</h2>
+
+<p>看完了以上的介紹並依照各個步驟實做，你應該能自己寫出這樣的網頁（如下， <a href="http://mdn.github.io/beginner-html-site/">view it here</a>):<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>如果哪裡卡關了，你可以隨時造訪Github上的 <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">finished example code</a> ，看看裡面的code和你寫的哪裡不同。</p>
+
+<p>這篇文章觸及的是非常基本的HTML介紹，若你有興趣想進一步了解，歡迎參考 <a href="/zh-TW/Learn/HTML">HTML Learning page</a>。</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li>
+ <li id="What_will_your_website_look_like"><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
+ <li id="Dealing_with_files"><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
+ <li id="HTML_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
+ <li id="CSS_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
+ <li id="JavaScript_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
+ <li id="Publishing_your_website"><a href="/zh-TW/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
+ <li id="How_the_web_works"><a href="/zh-TW/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
+</ul>
diff --git a/files/zh-tw/learn/getting_started_with_the_web/index.html b/files/zh-tw/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..f2629247fc
--- /dev/null
+++ b/files/zh-tw/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,59 @@
+---
+title: Web 入門
+slug: Learn/Getting_started_with_the_web
+tags:
+  - Beginner
+  - CSS
+  - Design
+  - Guide
+  - HTML
+  - Index
+  - NeedsTranslation
+  - TopicStub
+  - publishing
+  - theory
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>〈Web 入門〉</em>是一系列簡潔的文章，介紹網頁開發的實用範例。你將運用相關工具建構簡易網頁並發布自己的程式碼。</p>
+</div>
+
+<h2 id="替你的第一個網站說故事">替你的第一個網站說故事</h2>
+
+<p>建立個人網站需要很多功夫。如果你才剛開始接觸網頁設計，我們建議大家可以先從小地方著手。不是要你立刻就寫出跟「Facebook」一樣規模的網站，但自己架一個上線的網站一點都不難，現在就開始吧！</p>
+
+<p>只要依序看過以下的系列文章，你將初學者蛻變成會架設自己的第一個上線網頁，Let's go！</p>
+
+<h3 id="安裝基本軟體"><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a></h3>
+
+<p>現有許多工具可建構網站。如果你剛起步，你可能不知從何選擇程式碼編輯器、框架、測試工具等等。我們將透過〈<a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a>〉逐步引領你安裝基本的網頁開發軟體。</p>
+
+<h3 id="你的網站看起來會是什麼樣子？"><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a></h3>
+
+<p>在開始為自己的網站寫程式碼之前，你應該先規劃要呈現哪些資訊？要採用哪種字體與顏色？你可依照〈<a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a>〉所提供的簡易方法，照著來規劃網站的內容與設計。</p>
+
+<h3 id="與各式各樣檔案打交道"><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a></h3>
+
+<p>一個網站包含許多檔案：文字內容、程式碼、樣式表、多媒體內容等等。當建立網站時，你需要將這些檔案組合成清晰的架構，並確保它們能彼此互動溝通。〈<a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a>〉將引領你安排合理的檔案架構，以及你應該注意的問題。</p>
+
+<h3 id="HTML_基本概念"><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基本概念</a></h3>
+
+<p>超文字標籤語言 (Hypertext Markup Language；HTML) 可用以建構網頁內容，並賦予其含意和用途。例如某段內容要分為多個段落，或是用項目符號列成幾個重點？要在網頁插入圖片？這裡需要以資料表格整理嗎？如果這些沒有嚇到你，〈<a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基本概念</a>〉將提供足夠的資訊。</p>
+
+<h3 id="CSS_基本概念"><a href="/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本概念</a></h3>
+
+<p>串接樣式表 (Cascading Stylesheets；CSS) 可用以塑造網站的特殊風格。例如這段文字要用一般的黑色，或是改用紅色標明重點？某段重要內容應該置於畫面的何處？想用什麼背景圖片及顏色裝飾你的網站？〈<a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本概念</a>〉帶你入門。</p>
+
+<h3 id="JavaScript_基本概念"><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基本概念</a></h3>
+
+<p>程式設計語言 JavaScript 可為你的網站增加互動功能，例如動畫、遊戲、按下按鈕的後續動作、將資料輸入表單、動態套用樣式的效果等等。〈<a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基本概念</a>〉將帶你瞭解此一有趣的程式語言及其能耐，並讓你快速入門。</p>
+
+<h3 id="將你的網站發佈上線"><a href="/zh-TW/docs/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a></h3>
+
+<p>在寫完程式碼並整理好檔案之後，接著就是將網站發佈上線，讓其他人可以瀏覽、欣賞內容。〈<a href="/zh-TW/docs/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a>〉將帶領你以最輕鬆的方法發佈你的範例程式碼。</p>
+
+<h3 id="網站的運作方式"><a href="/zh-TW/docs/Learn/Getting_started_with_the_web/How_the_Web_works">網站的運作方式</a></h3>
+
+<p>在瀏覽喜愛的網站時，你可能未意識到瀏覽器正於背景中運作著許多複雜事情。〈<a href="/zh-TW/docs/Learn/Getting_started_with_the_web/How_the_Web_works">網站的運作方式</a>〉將簡略說明網頁瀏覽時所發生的大小事。</p>
diff --git a/files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..c9874db847
--- /dev/null
+++ b/files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -0,0 +1,73 @@
+---
+title: 安裝基本軟體
+slug: Learn/Getting_started_with_the_web/Installing_basic_software
+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>在本文中，你會知道有哪些 Web 開發的簡易工具，以及正確的安裝方式。</p>
+</div>
+
+<h2 id="專家都用哪些工具？">專家都用哪些工具？</h2>
+
+<ul>
+ <li><strong>電腦</strong>，這東西對某些人來說再合理不過了，但可能有人用自己的手機，或在圖書館電腦上讀這篇文章。若要真正著手開發 Web，最好還是弄一台桌電或筆電（Windows、Mac、Linux 都行）。</li>
+
+ <li><strong>文字編輯器</strong>，用來寫程式碼。可以是文字編輯器（如 <a href="https://code.visualstudio.com/">Visual Studio Code</a>、<a href="https://notepad-plus-plus.org/">Notepad++</a>、<a href="https://www.sublimetext.com/">Sublime Text</a>、<a href="https://atom.io/">Atom</a>、<a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>、<a href="https://www.vim.org/">VIM</a>）、也可以是混合式編輯器（如 <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a> 或 <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>）。辦公室軟體的文件編輯器並不適合，因為它們依賴許多會干擾瀏覽器排版引擎的隱藏元素。</li>
+ <li><strong>Web 瀏覽器</strong>，可測試寫好的程式碼。目前最常用的瀏覽器有 <a href="https://www.mozilla.org/zh-TW/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="https://www.apple.com/safari/">Safari</a>、<a href="http://windows.microsoft.com/zh-tw/internet-explorer/download-ie">Internet Explorer</a> 與 <a href="https://www.microsoft.com/zh-tw/windows/microsoft-edge">Micrososft Edge</a>。你也可以測試自己網站在行動裝置上呈現的效果，若目標讀者分佈甚廣，你可能必須用舊版瀏覽器（如 IE 6–8）測試。</li>
+ <li><strong>圖像編輯器</strong>，如 <a href="http://www.gimp.org/">GIMP</a>、<a href="http://www.getpaint.net/">Paint.NET</a>、<a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> 都可用來為自己的網站添增圖案。</li>
+
+ <li><strong>版本控制系統</strong>，可讓團隊用以協作某個專案、分享程式碼與外部檔案，更可避免編輯作業發生衝突、還可以管理伺服器的檔案。目前 <a href="http://git-scm.com/">Git</a> 是最常見的版本控制工具；<a href="https://github.com/">GitHub</a> 與 <a href="https://gitlab.com">GitLab</a> 則是最常用的程式碼分享服務。</li>
+ <li><strong>FTP 程式</strong>，可將網頁上傳至比較老的網路託管伺服器，以利使用者檢視──前述的 <a href="http://git-scm.com/">Git</a> 近年來漸漸取代了 FTP──可用的 (S)FTP 程式有 <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>自動化系統，</strong>如 <a href="http://gruntjs.com/">Grunt</a> 或 <a href="http://gulpjs.com/">Gulp</a> 可自動執行重複性的作業，例如縮減程式碼並執行測試作業。</li>
+ <li>範本、函式庫、框架......等等，都能加速寫出一般功能。</li>
+ <li>及其他更多工具！</li>
+</ul>
+
+<h2 id="我實際需要、立刻需要哪些工具？">我實際需要、立刻需要哪些工具？</h2>
+
+<p>上面一長串看起來好像很嚇人，但其實剛接觸 Web 開發時，不需了解所有的東西。我們先幫你設定最低限度的必要工具：文字編輯器和幾款主流瀏覽器。</p>
+
+<h3 id="安裝文字編輯器">安裝文字編輯器</h3>
+
+<p>你的電腦裡很可能已經提供基本的文字編輯器了。Windows 本身就有 <a href="https://zh.wikipedia.org/wiki/記事本">記事本</a>；OS X 已提供 <a href="https://zh.wikipedia.org/wiki/文字編輯 (應用程式)">文字編輯</a>；Linux 各版本不太一樣：例如 Ubuntu 就有 <a href="https://zh.wikipedia.org/wiki/Gedit">gedit</a>。</p>
+
+<p>而針對 Web 開發，其實有著比 Notepad 或 TextEdit 好很多的工具。我們推薦使用 <a href="https://code.visualstudio.com/">Visual Studio Code</a>，因為這個自由編輯器有提供即時預覽、以及程式碼提示。</p>
+
+<h3 id="安裝常用瀏覽器">安裝常用瀏覽器</h3>
+
+<p>目前我們會安裝數款 Web 瀏覽器的桌面版，以利測試我們所寫的程式碼。先在下方找到自己所用的作業系統，再點擊你愛用的瀏覽器連結：</p>
+
+<ul>
+ <li>Linux：<a href="https://www.mozilla.org/zh-TW/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://brave.com">Brave</a>。</li>
+ <li>Windows：<a href="https://www.mozilla.org/zh-TW/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/zh-TW/internet-explorer/download-ie">Internet Explorer</a>、<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Micrososft Edge</a>、<a href="https://brave.com">Brave</a>。（Edge 是 Windows 10 的預設瀏覽器；如果你用的是 Windows 8 或之後版本，可以安裝 IE 10 或更高版本；否則應安裝其他瀏覽器替代）</li>
+ <li>macOS：<a href="https://www.mozilla.org/zh-TW/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="https://www.apple.com/safari/">Safari</a>、<a href="https://brave.com">Brave</a>。（Safari 是 iOS 與 OS X 的預設瀏覽器）</li>
+</ul>
+
+<p>在著手開發之前，應先安裝至少兩款瀏覽器以利後續測試。</p>
+
+<div class="blockIndicator note">
+<p>Internet Explorer 與當今的 web 不相容，可能會讓專案跑不動。</p>
+</div>
+
+<h3 id="安裝伺服器軟體">安裝伺服器軟體</h3>
+
+<p>有些例子需要使用伺服器軟體。你可以在 <a href="/zh-TW/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a> 找到作法。</p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="於本模塊">於本模塊</h2>
+
+<ul>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基本概念</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本概念</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基本概念</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/How_the_Web_works">網站的運作方式</a></li>
+</ul>
diff --git a/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.html b/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..e4c01763c9
--- /dev/null
+++ b/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,440 @@
+---
+title: JavaScript 基礎
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - JavaScript
+  - 初學
+  - 學習
+  - 寫程式
+  - 新手
+  - 網頁
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div style="font-family: Microsoft jhenghei;">{{LearnSidebar}}</div>
+
+<div style="font-family: Microsoft jhenghei;">{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary" style="font-family: Microsoft jhenghei;">
+<p>JavaScript 是一個可以幫您在網站裡加入互動功能的程式語言（舉例來說，一個遊戲可能會在按鈕按下或資料被輸入表單內時回應、動態更改樣式、以及展示動畫等）。這篇文章會幫助您踏上學習這個令人興奮的語言的旅程，並展示她可以實現的所有可能。</p>
+</div>
+
+<h2 id="所以_JavaScript_到底是什麼？">所以 JavaScript 到底是什麼？</h2>
+
+<p>{{Glossary("JavaScript")}} 是一個成熟的動態程式語言，應用於 {{Glossary("HTML")}} 文件（document）上時，就可以為網頁提供動態的互動功能。JavaScript 是由 Mozilla project、Mozilla Foundation 和 Mozilla Corporation 的創辦人 Brendan Eich 所發明的。</p>
+
+<p>你可以用 JavaScript 實現許多事情。你可以先從簡單的特性開始，如跑馬燈、相簿、動態版型、回應按鈕點擊等。在你熟悉的這個程式語言以後，甚至可以製作遊戲、2D平面以及立體的圖像、資料庫系統等等的應用！</p>
+
+<p>JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 JavaScript 核心為基礎為她撰寫了相當多的工具，讓各位可以感到事半功倍。這些工具包括：</p>
+
+<ul>
+ <li>內建在瀏覽器內的應用程式介面（Application Programming Interfaces，{{Glossary("API","APIs")}}）提供了多樣化的功能，像是動態產生 HTML 以及設定 CSS 樣式、擷取以及處理從使用者的網路攝影機錄下的影像、製作立體圖形或是聲音樣本。</li>
+ <li>第三方 API 允許開發者將他們的網頁與其他如 Twitter 或 Facebook 提供的內容合併在一起。</li>
+ <li>第三方框架和函式庫允許您將這些元件套用在您的 HTML 文件內，讓您可以迅速地建立網頁或應用程式。</li>
+</ul>
+
+<h2 id="「Hello_world」範例程式">「Hello world」範例程式</h2>
+
+<p>前面所述的功能聽起來令人興奮，而她也的確符合這樣的期待— JavaScript 是眾多令人感到興奮的網路科技之一，您會因為選擇利用她來製作網頁而進入一個嶄新且充滿創意及力量的次元。</p>
+
+<p style="font-family: Microsoft jhenghei;">但無論如何，要讓 JavaScript 跟 HTML 和 CSS 合作無間的話，可能還要費一些功夫。現在您將會從一些細小的地方開始著手，接著一步步地往前進。首先，我們將會向您展示如何將一些基本的 JavaScript 給加入您的頁面中，並且打造一個<em>「hello world!」</em>的範例（<a href="https://zh.wikipedia.org/zh-tw/Hello_World">這同時也是許多程式語言的標準範例程式</a>）。</p>
+
+<div class="warning">
+<p><strong>注意</strong>：如果您還沒有學習過先前的課程，<a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">請您下載這個範例程式碼</a>，並以此開始練習。</p>
+</div>
+
+<ol style="font-family: Microsoft jhenghei;">
+ <li>首先，進入您測試網頁的資料夾中，並建立一個名為 <code>main.js</code> 的檔案，再將她存放於 <code>scripts</code> 資料夾內。</li>
+ <li>接著，開啟 <code>index.html</code> 檔案，並在 <code>&lt;/body&gt;</code> 這個結束標籤之前的位置，使用一行新的空間來輸入以下的元素：
+  <pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>我們做的事情，基本上跟新增一個 CSS 的 {{htmlelement("link")}} 元素是相同的概念 — 我們將 JavaScript 給導入這個頁面中，讓她來影響 HTML（以及 CSS、還有任何頁面上的東西）。</li>
+ <li>再來我們把以下的程式碼新增到 <code>main.js</code> 檔案內：
+  <pre class="brush: js">var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';</pre>
+ </li>
+ <li>現在請您將修改過的 HTML 和 JavaScript 給存檔，再用瀏覽器讀取 <code>index.html</code>。您應該會看到以下的內容：<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>備註</strong>：我們選擇將 {{htmlelement("script")}} 元素放在接近 HTML 檔案底部的原因，是因為瀏覽器是依照程式碼存在檔案中的順序來讀取 HTML 檔案的。如果 JavaScript 先被瀏覽器讀取了，那她應該要去影響她之後的 HTML 程式碼，但有時候卻行不通，因為她比應該產生改變的 HTML 還要早被讀取到。因此，把她放在接近檔案底部的位置，通常都會是一個不錯的策略。</p>
+</div>
+
+<h3 id="發生什麼事了？">發生什麼事了？</h3>
+
+<p>所以您的標題文字已經被 JavaScript 修改成「Hello world!」了。我們先使用了一個叫做 {{domxref("Document.querySelector", "querySelector()")}} 的函式來取得了我們標題參考（Reference），並且將她存在一個叫做 <code>myHeading</code> 的變數裡面。這跟我們在操作 CSS 時使用的選擇器是相似的。當您想要更動某個元素時，首先您要將她選取起來。</p>
+
+<p>之後，我們將變數 <code>myHeading</code> 中 {{domxref("Element.innerHTML", "innerHTML")}} 特性的值設為「Hello world!」。</p>
+
+<div class="note">
+<p><strong>備註</strong>：Both of the features you used above are parts of the <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, which allows you to manipulate documents.</p>
+</div>
+
+<h2 id="語言基礎速成">語言基礎速成</h2>
+
+<p>接著我們來解釋一下 JavaScript 基本特性，以讓您更加地了解她是如何運作的。更好的事情是，這些特性基本上也存在於所有程式語言中。所以如果您可以充分理解這些基礎知識，您就可以撰寫程式來創造無限可能！</p>
+
+<div class="warning">
+<p>注意：在這篇文章中，請您試著將範例程式碼輸入到 JavaScript 主控台中，並觀察發生了什麼事。如果您想要了解更多 JavaScript 主控台的細節，請參閱 <a href="https://developer.mozilla.org/zh-TW/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>。</p>
+</div>
+
+<h3 id="變數（Variables）">變數（Variables）</h3>
+
+<p>變數（{{Glossary("Variable", "Variables")}}）是可以用來儲存數值的容器。要宣告一個變數，首先要用關鍵字 <code>var</code> 來開頭，並在後面輸入您想要用來呼叫她的名字：</p>
+
+<pre class="brush: js">let myVariable;</pre>
+
+<div class="note" style="font-family: Microsoft jhenghei;">
+<p><strong>備註</strong>：在 JavaScript 檔案內的每行內容都需要在結尾加上分號，以標示出這行結束的位置。只有在需要於單行中隔開敘述句時，分號才是絕對需要的。然而，有些人相信在每一個敘述句結尾加上分號才是最佳實踐。這裡有其他何時要加或不加分號的規則——請參考 <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript</a> 以瞭解更多資訊。</p>
+</div>
+
+<div class="note">
+<p><strong>備註</strong>：基本上您可以幫變數取任何名字，不過還是有一些限制的（請參閱<a href="http://www.codelifter.com/main/tips/tip_020.shtml">這篇文章</a>以了解變數的命名規則）。假如不太確定，可以<a href="https://mothereff.in/js-variables">檢查變數名稱</a>來看看是否合法。</p>
+</div>
+
+<div class="note">
+<p><strong>備註</strong>：JavaScript 是會區分大小寫字母的——<code>myVariable</code> 就跟 <code>myvariable</code> 不相同。如果您的程式碼出現了一些問題，可以試著檢查一下字母的大小寫！</p>
+</div>
+
+<p>宣告了一個變數之後，您可以為她指定一個數值：</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p>您可以呼叫這個變數的名字來取得這個值：</p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p>如果您有需要，您也可以在一行之內同時做完這兩件事情：</p>
+
+<pre class="brush: js">let myVariable = 'Bob';</pre>
+
+<p>當您把一個數值指定給一個變數之後，您也可以再次改變它：</p>
+
+<pre>let myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>請記得這些變數有著不同的<a href="/zh-TW/docs/Web/JavaScript/Data_structures">資料型態</a>：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">變數</th>
+   <th scope="col">說明</th>
+   <th scope="col">範例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>字串，一段文字。如果要將字串指定給一個變數，您應該將內容用引號給框起來。</td>
+   <td><code>let myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>數值，一個數字。數字不被引號框起來。</td>
+   <td><code>let myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>布林值，一個  True（真）/False（假）數值。<code>true</code>/<code>false</code> 是 JavaScript 內的特殊關鍵字，不需要用引號將她框住。</td>
+   <td><code>let myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>陣列，一個可以儲存多個數值在單一參考中的結構。</td>
+   <td>
+    <p><code>let myVariable = [1,'Bob','Steve',10];</code><br>
+     可以用這個方式來呼叫陣列的每一個成員：<code>myVariable[0]、myVariable[1]</code> 等等。</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>物件。基本上，JavaScript 內的所有東西都可以視為一個物件，而且可以被存放在變數裡。請將這個概念記下來。</td>
+   <td><code>let myVariable = document.querySelector('h1');</code><br>
+    這個項目之前的所有例子也都是物件。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>所以為什麼我們需要變數？這個嘛，我們寫程式時可以做的任何有趣的事情，都需要有變數的參與。如果數值不會更動，那您也無法做任何動態的事情，像是客製化一個歡迎訊息、或是變更相簿裡的圖片。</p>
+
+<h3 id="註解（Comments）">註解（Comments）</h3>
+
+<p>您可以在您的 JavaScript 程式碼中加入註解，就像您在撰寫 CSS 時做的事情一樣：</p>
+
+<pre class="brush: js">/*
+Everything in between is a comment.
+*/</pre>
+
+<p>如果您的註解只有一行，我們通常會簡單將註解放在兩個斜線的後方，像以下的範例：</p>
+
+<pre class="brush: js" style="font-size: 14px;">// This is a comment
+</pre>
+
+<h3 id="運算子（Operators）">運算子（Operators）</h3>
+
+<p>運算子（ {{Glossary("operator")}}）是一個數學符號，可以讓兩個數值（或是變數）交互作用以後產生結果。您可以從以下的表格中看到一些最簡單的運算子，並將範例輸入 JavaScript 主控台來測試看看。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">運算子</th>
+   <th scope="col">說明</th>
+   <th scope="col">符號</th>
+   <th scope="col">範例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">相加／連接</th>
+   <td>用於將兩個數字相加，或是將兩個字串連接在一起。</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    'Hello ' + 'world!';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>減、乘、除</p>
+   </th>
+   <td>這些運算子就跟基礎數學計算中在做的事情相同。</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // 在 JavaScript 中，相乘運算子是個星號<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">指定運算子</th>
+   <td>您已經見過她了：這可以將一個數值指定給一個變數。</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">等價運算子</th>
+   <td>測試兩個數值是否相等，並且回傳一個 <code>true</code>/<code>false</code> 的結果。</td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">否定、不相等</th>
+   <td>通常會跟相等運算子搭配使用，否定運算子在 JavaScript 中代表邏輯非（NOT）—她可以將 <code>true </code>轉換為 <code>false</code> ……等。</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>第一個敘述句回傳的是 <code>true</code>，但我們使否定運算子，使得對照組的敘述句回傳了 <code>false</code>：</p>
+
+    <p><code>var myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>在這裏，我們測試了「<code>myVariable </code>是否不等於 3」的一個敘述。這個敘述回傳的是 <code>false</code>，因為她確實等於 3。</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>其實還有更多的運算子等的您去探索，但我們將在這裡先打住。您可以參照這篇<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators">運算式與運算子</a>以取得完整的列表。</p>
+
+<div class="note">
+<p><strong>備註</strong>：混合使用多種資料型態的話，可能會在計算時產生一些奇怪的結果，所以您要謹慎地為變數選用正確的資料類型。舉個例子：在主控台中輸入  <code>"35" + "25"</code>。為什麼您沒有得到您所想要的結果？因為使用引號框住數字會將她轉換成字串，所以您其實是將兩個字串給連接起來，而不是將她們給相加。如果您輸入的是 <code>35 + 25</code>，您將會得到正確的結果。</p>
+</div>
+
+<h3 id="條件（Conditionals）">條件（Conditionals）</h3>
+
+<p>條件是種程式碼結構，可以讓您測試某個陳述式會不會回傳真值，並根據不同的結果執行不同程式碼。最常見的形式是 <code>if ... else</code> 。以下是一個範例：</p>
+
+<pre class="brush: js">let iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}</pre>
+
+<p>在 <code>if ( ... )</code> 裡面的陳述式就是一個測試—這將會使用到等價運算子（如先前所描述的）來比較變數 <code>iceCream</code> 和字串 <code>chocolate</code> 兩者是否相等，如果在比較之後回傳了 <code>true</code>，接著就執行第一個區塊內的程式碼。如果不是，就略過第一個區塊的程式碼並轉而執行寫在執行在 <code>else 之後、</code>第二個區塊內的程式碼。</p>
+
+<h3 id="函式（Functions）">函式（Functions）</h3>
+
+<p>函式（{{Glossary("Function", "Functions")}}）是一種將需要重複使用的功能打包裝起來的方法，所以當要再次執行這些功能的時候，就可以呼叫這個函式來達成，而不是一再的重新撰寫程式碼。您在先前的篇幅中其實已經看過一些函式了，例如：</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">let myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p>這些函式是瀏覽器為您內建的，您可以自由地使用。</p>
+
+<p>如果您看到某些很像是變數名稱的東西，但是後面帶有括號 — <code>()</code> — 的話，表示這可能是一個函式。函式通常會接收參數（{{Glossary("Argument", "arguments")}}）—這是一些可以讓她完成工作的必要資料。這些參數會被寫在括號裡面，如果有不只一個參數的話，彼此間要用逗號隔開。</p>
+
+<p>舉例來說，<code>alert()</code> 這個函式會在瀏覽器內視窗內產生一個彈出視窗，但是我們必須要傳給她一個字串當作參數，告訴這個函式，該把什麼東西放到這個彈出視窗裡。</p>
+
+<p>好消息是：您可以定義您自己的函式 — 底下的這個範例中，我們將會為您帶來一個簡單的函式，她會接收兩個數字當作參數，並將其相乘：</p>
+
+<pre class="brush: js">function multiply(num1,num2) {
+  let result = num1 * num2;
+  return result;
+}</pre>
+
+<p>您可以試著在主控台中執行上述的函式，然後再用不同的參數來測試這個函式幾次，例如：</p>
+
+<pre class="brush: js">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p><strong>備註</strong>：<a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> 陳述式會要求瀏覽器將 <code>result </code>變數回傳，以利後續使用。這是必要的，不然在函式內定義的變數就只能在函式內使用。這個現象叫作變數的有效使用範圍（{{Glossary("Scope", "scoping")}}）（請參閱<a href="/zh-TW/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">這篇文章以了解變數的有效使用範圍</a>）</p>
+</div>
+
+<h3 id="事件（Events）">事件（Events）</h3>
+
+<p>如果要在網頁上創造真正的互動功能，您將會需要事件（Events） — 這是一種可以監聽瀏覽器發生了什麼事情的程式碼結構，接著她會允許您執行其他程式碼以回應這些事件。最明顯的事件就是 <a href="/zh-TW/docs/Web/Events/click">click event</a> 了，當瀏覽器裡的某個東西被滑鼠點選時，這個事件就會被觸發。如果要測試一下這個事件，請您把底下的程式碼輸入到主控台內，接著用滑鼠點選目前的網頁：</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}</pre>
+
+<p>有許多的方法可以把事件跟網頁元素結合在一起。在底下的程式碼中，我們先選擇了 HTML 元素，並把這個元素的 <code><a href="/zh-TW/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> 處理器設定為一個匿名函式，裡面裝著在滑鼠點選事件發生時，要執行的程式碼：</p>
+
+<p>請特別注意到以下這段程式碼：</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>
+
+<p>產生的結果將會與下面這段程式碼相同</p>
+
+<pre class="brush: js">var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>只是上面那段寫起來比較簡短罷了。</p>
+
+<h2 id="徹底加強我們的範例網頁">徹底加強我們的範例網頁</h2>
+
+<p>到目前為止，我們已經學會一些 JavaScript 的基礎知識了，接下來讓我們幫這個網頁新增一些很酷的特色，並給您一些靈感。</p>
+
+<h3 id="加入一個圖片變換器">加入一個圖片變換器</h3>
+
+<p>在這個小節中，我們將在這個網頁裡添加一個圖片，以及一些簡單的 JavaScript，當這個圖片被滑鼠點選的時候，就會在兩個圖片之間互相切換。</p>
+
+<ol>
+ <li>首先，先去找張您可以為您的網頁增添光彩的圖片。請盡量找一張尺寸跟第一張圖相同的圖片、或至少是張相似尺寸的圖片。</li>
+ <li>將圖片存放到 <code>images</code> 資料夾內。</li>
+ <li>編輯您的 <code>main.js</code> 檔案，並且將以下的 JavaScript 輸入到檔案內（如果您還有看見那段 hello world 的 JavaScript，請把她們給刪除）：
+  <pre class="brush: js">var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    let mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>請將全部檔案儲存，並用瀏覽器開啟 <code>index.html</code>。現在請您點選圖片，她應該會切換成另外一張！</li>
+</ol>
+
+<p>在這裡，我們把一個圖片元素的參考存進了 <code>myImage</code> 變數裡。接著，我們把這個變數的 <code>onclick</code> 事件處理器設定為一個匿名函式。現在，每當這個圖片被點選一次：</p>
+
+<ol>
+ <li>我們會去取得圖片中 <code>src</code> 屬性的數值</li>
+ <li>我們用一個條件判斷式，來檢查 <code>src</code> 的數值是否跟原始圖片的位址相同：
+  <ol>
+   <li>如果兩者相同，那我們就把 <code>src</code> 的數值更改為第二個圖片的位址，也就是在  {{htmlelement("image")}} 元素裡強迫讀取另外一張圖片。</li>
+   <li>如果兩者不同（也就是圖片已經被切換過了），我們就把 <code>src</code> 的數值更改為原始圖片的位址，圖片就會被切換回原來那張。</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="添加個客製化的歡迎訊息">添加個客製化的歡迎訊息</h3>
+
+<p>接著我們再來添加一些程式碼，在使用者瀏覽這個網頁的時候，將網頁標題改為客製化的歡迎訊息。這個歡迎訊息會一直保留著，直到使用者離開這個網頁為止。我們也會添加個切換使用者的選項，並且一併更改歡迎訊息。</p>
+
+<ol>
+ <li>編輯 <code>index.html</code> 檔案，並將下列程式碼置於 {{htmlelement("script")}} 元素之前：
+
+  <pre class="brush: html">&lt;button&gt;Change user&lt;/button&gt;</pre>
+ </li>
+ <li>編輯 <code>main.js</code> 檔案，並將下列程式碼一字不漏地置於檔案的最末端 — 這些程式碼將會取得新按鈕、標題的參考，並把它們存在變數裡：
+  <pre class="brush: js">var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>現在，將以下的函式加進去以設定客製化的歡迎訊息 — 這些函式目前還不會產生作用，但我們等一下會用到她們：
+  <pre class="brush: js">function setUserName() {
+  let myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+}</pre>
+  這個函式包含了一個會產生一個對話視窗的 <a href="/zh-TW/docs/Web/API/Window.prompt"><code>prompt()</code></a> 函式，有點像 <code>alert()</code>，只是 <code>prompt()</code> 會要求使用者輸入一些資料，並在使用者點選<code>確認</code>之後，將內容儲存在一個變數裡面。接著，我們呼叫一個名稱為 <code>localStorage</code> 的 API，這個 API 可以讓使用者先將一些資料儲存在瀏覽器裡面，之後有需要的話再取出來使用。我們使用 localStorage 的 <code>setItem()</code> 函式來建立並且把資料儲存到一個名稱為 <code>'name'</code> 的變數裡，再把包含者用者名字的 <code>myName</code> 的值指定給她。最後，我們將一個字串跟使用者的名字指定給標題的 <code>innerHTML</code> 特性：</li>
+ <li>接著，加入這個 <code>if ... else</code> 區塊 — 因為她會在程式一開始被讀取的時候就被啟用，我們稱她為初始化程式碼：
+  <pre class="brush: js">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  let storedName = localStorage.getItem('name');
+  myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
+}</pre>
+  這個區塊一開始使用了邏輯負運算子（邏輯非）來檢查 <code>name</code> 這個物件是否存在。如果沒有，那就執行 <code>setUserName()</code> 這個函式並且創造她。如果有了（例如：使用者已經在上一次造訪網頁時就設定過了），我們就使用 <code>getItem()</code> 函式來取得儲存的名字，並且將標題的 <code>innerHTML</code> 特性設定為一個字串加上使用者的名字，也就是我們在 <code>setUserName()</code> 函式裡做的事情。</li>
+ <li>最後，把以下的 <code>onclick</code> 事件處理器跟按鈕綁定，如此一來，每次點選按鈕時就會執行 <code>setUserName()</code>。這將允許使用者透過點選那個按鈕來重新設定一個新的名字：
+  <pre class="brush: js">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>現在當您造訪這個網頁時，她會詢問您的名字，並且給您一個客製化過的歡迎訊息。在這之後，您也可以隨時透過點選那個按鈕來更改名字。順帶一提，因為這組客製化過的訊息是存在 localStorage 裡的，所以即使您將網頁關起來，她還是會保留著，所以當您下次開啟這個網頁時，這段客製化的訊息依然會出現！</p>
+
+<h3 id="用戶名稱是否為null">用戶名稱是否為null</h3>
+
+<p>當您運行範例並出現提示您輸入用戶名稱的對話框時，請嘗試按下<em>取消 </em>鈕。您會看到一個標題顯示著"Mozilla is cool, null"。這是因為當您取消提示時，該值將會被設為null。null在Javascript中的一個特殊值，基本上用來表示沒有任何值。</p>
+
+<p>再試試按下OK，但不輸入任何名字。您將會看到"Mozilla is cool,"，該結果的原因非常簡單的可以理解。</p>
+
+<p>如果你想避免產生這些問題，您應該檢查使用者是否輸入了null或是空白的名字。試著透過修改<code>setUserName()</code>來應對這些問題，結果如下：</p>
+
+<pre>function setUserName() {
+  let myName = prompt('Please enter your name.');
+  if(!myName || myName === null) {
+    setUserName();
+  } else {
+    localStorage.setItem('name', myName);
+    myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+  }
+}</pre>
+
+<p>用人類的語言來理解，如果<code>myName</code>沒有值或是它的值是<code>null</code>，再次從頭執行<code>setUserName()。</code>如果<code>myName</code>有值（如果上述條件是不為真）．將值存入<code>localStorage</code>並將值設定給標頭檔的文件。</p>
+
+<h2 id="結語">結語</h2>
+
+<p>如果您已經照著這篇文章的所有步驟做完了，您應該會看到以下的畫面（或者您也可以<a href="https://mdn.github.io/beginner-html-site-scripted/">瀏覽我們製作的版本</a>）：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>如果在過程中遇到了任何問題，您也可以隨時把您的成品與我們 <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">放在 Github 上的範例 </a>相互對照。</p>
+
+<p>在此，我們只稍稍體驗了 JavaScript 的一些皮毛。如果您非常享受這段學習的過程，並想要繼續深究，請您繼續瀏覽我們製作的 <a href="/zh-TW/docs/Web/JavaScript/Guide">JavaScript 指南</a>。</p>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — Dynamic client-side scripting</a></dt>
+ <dd>Our JavaScript learning topic — dive into JavaScript in much more detail.</dd>
+ <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt>
+ <dd>An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.</dd>
+</dl>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li>
+ <li id="What_will_your_website_look_like"><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
+ <li id="Dealing_with_files"><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
+ <li id="HTML_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
+ <li id="CSS_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
+ <li id="JavaScript_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
+ <li id="Publishing_your_website"><a href="/zh-TW/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
+ <li id="How_the_web_works"><a href="/zh-TW/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
+</ul>
diff --git a/files/zh-tw/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/zh-tw/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..355291387a
--- /dev/null
+++ b/files/zh-tw/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,116 @@
+---
+title: 將你的網站發佈上線
+slug: Learn/Getting_started_with_the_web/Publishing_your_website
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>當你完成你的網頁程式碼後，你需要把它放到網路上，這樣人們才可以搜尋得到。這個章節將介紹如何快速的把你的程式碼放到網路上。</p>
+</div>
+
+<h2 id="有哪些選項？">有哪些選項？</h2>
+
+<p>發佈網站並不是一個幾句話就能說得完的課題，主要是因為有太多方法能夠發佈網站。在這個章節中，我們不會介紹所有可能的方法，但是我們會簡單講解三個概念，並從初學者的角度分別說明它們的優缺點，然後一步一步帶你用一個你現階段有辦法完成的方法發佈網站。</p>
+
+<h3 id="取得主機（hosting）和網域名稱（domain_name）">取得主機（hosting）和網域名稱（domain name）</h3>
+
+<p>如果想要完全掌控你發佈的網站，那你可能需要花錢買：</p>
+
+<ul>
+ <li>主機：跟主機租借商（hosting company）的<a href="/zh-TW/docs/Learn/Common_questions/What_is_a_web_server">網路伺服器</a>（web server）租一個放置檔案的空間。你把你建置的網頁檔案放到這個空間中，然後想要連結到網頁的人就能透過網頁伺服器連結到你的網站。</li>
+ <li><a href="/zh-TW/Learn/Understanding_domain_names">網域名稱</a>(domain name)：人們可以透過這個獨特的網址來尋找你的網站，像是 <code>http://www.mozilla.org</code> 或 <code>http://www.bbc.co.uk</code>。你需要向<strong>網域名稱註冊商(domain registrar)</strong>租借網域名稱。</li>
+</ul>
+
+<p>許多專業的網站是用這個方法發佈的。</p>
+
+<p>除此之外，你還會需要一個 {{Glossary("FTP", "File Transfer Protocol (FTP)")}} 程式（點選<a href="/zh-TW/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> 來取得更多資訊），這樣才能真正的把你建置的網頁檔案傳達給伺服器。FTP 程式很廣泛，但一般來說，你可以用你公司提供的資訊，像是使用者名稱、密碼以及host name來登入你的網頁伺服器，它就會以兩個視窗的形式分別顯示你電腦裡的檔案和你網頁伺服器上的檔案，然後你就可以移動你的檔案。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="租借主機和網域的方法">租借主機和網域的方法</h4>
+
+<ul>
+ <li>在這裡我們不介紹特定的主機租借商(hosting companies)或網域名稱註冊商(domain name registrars)，你只要搜尋「web hosting」與「domain names」就能找到。所有的註冊商都會提供方法，讓你檢查你想要的網域名稱可否使用、或有沒有被註冊過。</li>
+ <li>你的 {{Glossary("ISP", "網路供應商")}} 可能會提供有限制的主機，這可以讓你發佈一些比較簡易的網站，雖然會有些限制，但嘗試使用它來發佈你的第一個網站也是很不錯的 — 聯絡並詢問他們！</li>
+ <li>有些公司提供免費的服務，像是 <a href="https://neocities.org/">Neocities</a>、<a href="https://www.blogger.com">Blogger</a>和 <a href="https://wordpress.com/">WordPress</a>，但是我要強調，你付出多少得到多少，不過使用它們來發佈你的第一個網站何嘗不是一個理想的方法? 而且免費的服務大部分不需要FTP程序來上傳檔案，你只需要用它們提供的介面來移動檔案。</li>
+ <li>有些公司同時提供主機(hosting)和網域(domains)的服務。</li>
+</ul>
+
+<h3 id="使用線上工具，像是_GitHub_或_Google_App_Engine">使用線上工具，像是 GitHub 或 Google App Engine</h3>
+
+<p>使用工具來發佈網站：</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> 可以交流程式的平台，它提供你一個空間來存放程式碼，這個空間是基於 <a href="http://git-scm.com/">Git</a> 的<strong>版本控制系統，</strong>你能夠透過系統共同編輯平台上的程式專案，而這個系統是開放資源，也就是說全世界的人都可以找到你的 GitHub code，包括使用它、從中學習並將它改得更好。GitHub 提供一個非常實用的工具— <a href="https://pages.github.com/">GitHub Pages</a>，它能讓你發佈網站。</li>
+ <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> 是一個強大的平台，不管是要從頭建置 multi-tiered web 程式還是託管靜態網站，它都能讓你在 Google 的基礎下建置和運行應用程式。點選 <a href="/zh-TW/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> 以獲得更多資訊。</li>
+</ul>
+
+<p>這類工具和託管不同，通常他們都是免費的，不過功能當然也會受限。</p>
+
+<h3 id="透過如_Thimble_這樣的網路_IDE">透過如 Thimble 這樣的網路 IDE</h3>
+
+<p>有些 web app 會模擬網站的開發環境，讓你能執行 HTML, CSS, JavaScript，顯示程式碼執行結果、並渲染至網站上－－一切都在瀏覽器的一個頁籤內完成。通常這些工具用起來都簡單、學起來簡單、基本功能還是免費的。他們用獨一無二的網址，替你保管渲染好的頁面。不過，基本功能基本上很受限，而且 app 通常都不提供如圖像這種 asset 的託管。</p>
+
+<p>試試以下網站，看看你能想到什麼點子：</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://thimble.mozilla.org">Thimble</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="透過_GitHub_發布">透過 GitHub 發布</h2>
+
+<p>來看看把網站用 Github Pages 發佈多簡單。</p>
+
+<ol>
+ <li>首先註冊 <a href="https://github.com/">GitHub</a> 並驗證電子郵件。</li>
+ <li>接著針對要上傳的檔案<a href="https://github.com/new">建立一個 repository</a>。</li>
+ <li>在頁面的 <em>Repository name</em> 標籤輸入 <em>username</em>.github.io，<em>username</em> 是指你的用戶名。例如我們的好朋友 bobsmith 就會輸入 <em>bobsmith.github.io</em>.<br>
+  另外，請勾選 <em>Initialize this repository with a README</em> 後點選 <em>Create repository</em>。<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>之後，把網站內容拖曳到 repository 目錄，並勾選 <em>Commit changes</em>。
+  <div class="note">
+  <p><strong>注</strong>：請確定目錄內有 <em>index.html</em> 檔案。</p>
+  </div>
+ </li>
+ <li>
+  <p>現在讓瀏覽器連到 <em>username</em>.github.io 來看看你的網站。例如你的用戶名字是 <em>chrisdavidmills</em>，就連到 <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>。</p>
+
+  <div class="note">
+  <p><strong>注</strong>：讓網站上線需要一點時間。如果網站沒有馬上運行，稍等一段時間後再試一次。</p>
+  </div>
+ </li>
+</ol>
+
+<p>想多理解的話，請參考 <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Learn/Common_questions/What_is_a_web_server">何謂網路伺服器</a></li>
+ <li><a href="/zh-TW/Learn/Understanding_domain_names">Understanding domain names</a></li>
+ <li><a href="/zh-TW/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="在本模組內">在本模組內</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a></li>
+ <li id="What_will_your_website_look_like"><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a></li>
+ <li id="Dealing_with_files"><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a></li>
+ <li id="HTML_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基礎</a></li>
+ <li id="CSS_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本</a></li>
+ <li id="JavaScript_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基礎</a></li>
+ <li id="Publishing_your_website"><a href="/zh-TW/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a></li>
+ <li id="How_the_web_works"><a href="/zh-TW/Learn/Getting_started_with_the_web/How_the_Web_works">網路的運作方式</a></li>
+</ul>
diff --git a/files/zh-tw/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/zh-tw/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..cb753a09d2
--- /dev/null
+++ b/files/zh-tw/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,108 @@
+---
+title: 你的網站看起來會是什麼樣子？
+slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>你的網站看起來會是什麼樣子？</em>會說明你該為網站做的規劃與設計，決定自己的「網站該提供哪些資訊？」、「該使用哪些字型與色彩？」，以及「網站又該達到哪些目的？」</p>
+</div>
+
+<h2 id="首要：規劃">首要：規劃</h2>
+
+<p>做任何事之前都需要一些想法。你的網站要達到哪種目的？任何 1 個網站均具備基本作用，但首先你應該保持簡單。我們要先寫出包含了標題、圖像，以及數段文字的簡單網頁。</p>
+
+<p>開始之前，請你先回答下列問題：</p>
+
+<ol>
+ <li><strong>你網站的主題為何？</strong>你喜歡貓貓狗狗？想寫城市遊記？或你愛打電動呢？</li>
+ <li><strong>你對某個主題所提供的資訊到哪種程度？</strong>寫個標題加上幾段文字，或是在網頁上加個圖片。</li>
+ <li>簡單的問：<strong>你網站的外觀為何？</strong>背景顏色？哪種字型比較合適？一般字型？卡通化的字型？又粗又大的字體？還是要纖細淡化的文字呢？</li>
+</ol>
+
+<div class="note">
+<p><strong>注意：</strong>複雜專案就需要更詳細的建構指南，包含所用的顏色、字型、物件之間的留白空間、適合的書寫風格，等等。這些要素有時會統整為設計指南或品牌手冊，你可參閱〈<a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Guidelines</a>〉進一步了解。</p>
+</div>
+
+<h2 id="從頭設計">從頭設計</h2>
+
+<p>接著就是拿紙筆，概略畫出你理想的網站外觀。對自己的第一個簡易網頁，不需考量太多要素或畫得太仔細，應該先養成這個勾勒草圖的習慣。不是要你變成梵谷或畢卡索，但對你以後絕對有幫助！</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>注意：</strong>即便是實際的複雜網站，設計團隊也都會先在紙上勾勒草圖，再接著透過圖檔編輯器或 Web 技術弄出數位版的草稿。</p>
+
+<p>Web 團隊往往編制了圖像設計師與{{Glossary("UX", "使用者經驗")}} (User Experience；UX) 設計師各 1 名。圖像設計師當然是負責整合網站的視覺效果；較屬抽象角色的 UX 設計師則要確定使用者與網站的互動方式。</p>
+</div>
+
+<h2 id="選擇網頁風格">選擇網頁風格</h2>
+
+<p>現在開始組合你想在網頁上呈現的內容。</p>
+
+<h3 id="文字">文字</h3>
+
+<p>你應該已經準備好了一些文章並分好段落。</p>
+
+<h3 id="主題色彩">主題色彩</h3>
+
+<p>可透過<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">選色工具</a>找到你喜歡的顏色。當你點擊其中一種顏色，就會看到如下圖「<code>#660066</code>」的 6 位數字，此即代表該顏色的十六進位 (Hexadecimal) 色碼。請另外找個地方記錄此色碼。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="圖片">圖片</h3>
+
+<p>可透過 <a href="https://www.google.com/imghp?gws_rd=ssl">Google 的圖片搜尋</a>找到適合的圖片。</p>
+
+<ol>
+ <li>找到你想要的圖片時，點選該圖片。</li>
+ <li>按下「查看圖片」按鈕。</li>
+ <li>接著在圖片上點擊滑鼠右鍵 (Mac 則是 Ctrl + click)，選擇「將圖片另存新檔...」，將圖片儲存到你熟悉的位置。或是可複製瀏覽器網址列中的網址，以待往後使用。</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
+
+<div class="note">
+<p><strong>注意：</strong>在網路上可找到的大多數圖片，包含 Google 圖片服務在內，都已註冊了著作權。為了避免自己可能違反著作權法，你可以透過 Google 的授權篩選功能。只要點擊「<strong>搜尋工具</strong>」再找到「<strong>使用權限</strong>」即可：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p>
+</div>
+
+<h3 id="字型">字型</h3>
+
+<p>選用自己喜歡的字型：</p>
+
+<ol>
+ <li>到 <a href="http://www.google.com/fonts">Google Fonts</a> 上捲動清單，直找到你喜歡的字型。你也可以使用左邊的控制功能先行篩選。</li>
+ <li>點擊你想要的字型旁邊「Add to collection」按鈕。</li>
+ <li>點擊頁面底端的「使用 (Use)」按鈕。</li>
+ <li>進入下一頁，捲動到區塊 3 與區塊 4，將 Google 顯示的程式碼複製到你的文字編輯器中，儲存以待稍後利用。</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基本概念</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本概念</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基本概念</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a></li>
+ <li><a href="/zh-TW/Learn/Getting_started_with_the_web/How_the_Web_works">網站的運作方式</a></li>
+</ul>
+
+<p> </p>