initial commit

2 files changed, 251 insertions, 0 deletions

diff --git a/files/zh-tw/learn/common_questions/index.html b/files/zh-tw/learn/common_questions/index.html
new file mode 100644
index 0000000000..4aafae4a32
--- /dev/null
+++ b/files/zh-tw/learn/common_questions/index.html
@@ -0,0 +1,135 @@
+---
+title: Common questions
+slug: Learn/Common_questions
+tags:
+  - CodingScripting
+  - Infrastructure
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p>
+
+<h2 id="How_the_Web_works">How the Web works</h2>
+
+<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_does_the_Internet_work"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the Internet work?</a></h3>
+ </dt>
+ <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd>
+ <dt>
+ <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3>
+ </dt>
+ <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd>
+ <dt>
+ <h3 id="What_is_a_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></h3>
+ </dt>
+ <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd>
+ <dt>
+ <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3>
+ </dt>
+ <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd>
+ <dt>
+ <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3>
+ </dt>
+ <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd>
+ <dt>
+ <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3>
+ </dt>
+ <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd>
+</dl>
+
+<h2 id="Tools_and_setup">Tools and setup</h2>
+
+<p>Questions related to the tools/software you can use to build websites.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3>
+ </dt>
+ <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd>
+ <dt>
+ <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3>
+ </dt>
+ <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd>
+ <dt>
+ <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3>
+ </dt>
+ <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd>
+ <dt>
+ <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3>
+ </dt>
+ <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd>
+ <dt>
+ <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3>
+ </dt>
+ <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd>
+ <dt>
+ <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3>
+ </dt>
+ <dd>
+ <div>
+ <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p>
+ </div>
+ </dd>
+ <dt>
+ <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3>
+ </dt>
+ <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd>
+ <dt>
+ <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3>
+ </dt>
+ <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd>
+ <dt>
+ <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3>
+ </dt>
+ <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd>
+ <dt>
+ <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3>
+ </dt>
+ <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd>
+</dl>
+
+<h2 id="Design_and_accessibility">Design and accessibility</h2>
+
+<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3>
+ </dt>
+ <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd>
+ <dt>
+ <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3>
+ </dt>
+ <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd>
+ <dt>
+ <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3>
+ </dt>
+ <dd>This article introduces the basic concepts behind web accessibility.</dd>
+ <dt>
+ <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3>
+ </dt>
+ <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd>
+ <dt>
+ <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3>
+ </dt>
+ <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd>
+</dl>
+
+<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2>
+
+<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li>
+</ul>
diff --git a/files/zh-tw/learn/common_questions/what_is_a_web_server/index.html b/files/zh-tw/learn/common_questions/what_is_a_web_server/index.html
new file mode 100644
index 0000000000..d8bb301ab1
--- /dev/null
+++ b/files/zh-tw/learn/common_questions/what_is_a_web_server/index.html
@@ -0,0 +1,116 @@
+---
+title: 何謂網路伺服器？
+slug: Learn/Common_questions/What_is_a_web_server
+translation_of: Learn/Common_questions/What_is_a_web_server
+---
+<div class="summary">
+<p><span class="seoSummary">本文章將講解網路伺服器是什麼、如何運作、還有他們的重要性。</span></p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">要求：</th>
+   <td>你要知道 <a href="/zh-TW/docs/Learn/How_the_Internet_works">Internet 是怎麼運作的</a>、並<a href="/zh-TW/docs/Learn/page_vs_site_vs_server_vs_search_engine">知道網頁、網站、網路伺服器的不同</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標：</th>
+   <td>你將知道網路伺服器是什麼、並大致了解它的運作原理。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p>「網路伺服器」（web server）可以指軟體、也可以指硬體、還可以指它們共同運作的狀態。</p>
+
+<ol>
+ <li>以硬體來說，web server 是存放網路伺服器軟體、還有網站檔案（如 HTML 文件、圖片、CSS 樣式表、JavaScript 檔案）的電腦。它會連上網際網路（Internet）並能和其他連上網的設備做物理數據交換。</li>
+ <li>以軟體來說，web server 包含了一連串控制網路用戶如何訪問託管檔案──至少有 HTTP 伺服器──的檔案。HTTP 伺服器是其中一個部份，它理解 {{Glossary("URL","URLs")}}（網路地址）與 {{Glossary("HTTP")}}（瀏覽器用來觀察網頁的協議）。它能透過域名（domain name）訪問託管的網站（如 <code>mozilla.org</code>）、並將其內容遞送到終端用戶（end-user）的設備上。</li>
+</ol>
+
+<p>以最基本的層面來說，如果瀏覽器需要網路伺服器所託管的檔案，它就需要透過 HTTP 發送對該檔案的請求。如果請求已經傳送到正確的（硬體）網路伺服器，那 HTTP（軟體）伺服器就會接受請求、找出所請求的文件（假若不是接著回傳 <a href="/zh-TW/docs/Web/HTTP/Status/404">404</a> 頁面）、再透過 HTTP 回傳給瀏覽器。</p>
+
+<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p>
+
+<p>要發布網站，你需要一個靜態或動態的網路伺服器。</p>
+
+<p><strong>靜態網路伺服器</strong>（static web server）、或是 stack，由（硬體的）電腦和（軟體的） HTTP 伺服器組成。之所以稱為「靜態」是因為伺服器只會給你的瀏覽器，傳送「事先寫好的」（as-is）檔案。</p>
+
+<p><strong>動態網路伺服器</strong>（dynamic web server）除了靜態網路伺服器以外、還附加了一些軟體：通常是應用伺服器（application server）與資料庫（database）之所以稱為「動態」是因為：應用伺服器會在託管檔案，透過 HTTP 伺服器傳送到瀏覽器之前更新之。</p>
+
+<p>例如說，要生成瀏覽器看到的最終網頁，應用伺服器會使用從資料庫讀取資料的 HTML 模板（HTML template）填補之。像 MDN 或維基百科（Wikipedia）這樣的網站也有上千個網頁：但它們全都不是「真的」HTML 文件，而是少數的 HTML 模板、還有龐大的資料庫。如此一來，要維護並傳送資料、都會變得很容易。</p>
+
+<h2 id="主動學習">主動學習</h2>
+
+<p><em>目前還沒有好用的內容。<a href="https://developer.mozilla.org/zh-TW/docs/MDN/Getting_started">請考慮貢獻一下</a>。</em></p>
+
+<h2 id="深入一點……">深入一點……</h2>
+
+<p>如同我們講過的：要取得網頁，瀏覽器會向伺服器發送一個在伺服器內，尋找某個檔案的請求。如果伺服器找到了檔案，就會讀取它、按需求處理、並回傳檔案。讓我們逐步檢視它們。</p>
+
+<h3 id="託管檔案">託管檔案</h3>
+
+<p>首先，網路伺服器要儲存網站檔案，也就是所有 HTML 文件、和附屬的 asset：asset 包含了圖片、CSS 樣式表、JavaScript 檔案、字型檔、還有影片。</p>
+
+<p>技術上來說，你可以把它們都放在自己的電腦裡面，但放在網路伺服器上面會方便許多，理由是伺服器：</p>
+
+<ul>
+ <li>永遠開機並運轉</li>
+ <li>永遠連上網際網路</li>
+ <li>永遠都有相同的 IP 地址（不是所有{{Glossary("ISP", "網際網路提供者")}}都給家庭用戶提供固定的 IP 地址）</li>
+ <li>由第三方提供者維護</li>
+</ul>
+
+<p>因此，找到優秀的託管提供者，是建立網站的重點之一。好好探索各大公司提供的服務、並選擇一個符合需求、預算也能負擔的方案（服務的價格從免費到上千美元都有）。你可以<a href="https://developer.mozilla.org/zh-TW/Learn/How_much_does_it_cost#Hosting">在這篇文章</a>找到更多資訊。</p>
+
+<p>一旦找到適合的網絡託管解決方案，你只要<a href="/zh-TW/docs/Learn/Upload_files_to_a_web_server">把文件上傳到網路伺服器</a>就行了。</p>
+
+<h3 id="透過_HTTP_溝通">透過 HTTP 溝通</h3>
+
+<p>接下來，網路伺服器會支援 {{Glossary("HTTP")}}（<strong>H</strong>yper<strong>t</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol，超文本傳輸協議）。顧名思義，HTTP 會指定兩台電腦之間，該如何傳送超文本（例如 linked web document）。</p>
+
+<p>協議（{{Glossary("Protocol")}}）是一套兩台電腦間該如何溝通的規則。HTTP 是文本性、無狀態的協議。</p>
+
+<dl>
+ <dt>文本性（Textual）</dt>
+ <dd>所有指令都是純文字、人類也容易理解。</dd>
+ <dt>無狀態（Stateless）</dt>
+ <dd>無論伺服器還是瀏覽器，都不會記得他們上一次的溝通。像是伺服器，如果只依賴 HTTP 的話，它就不會記得你輸入的帳號密碼、或是在交易中採取了哪些步驟。要完成這樣的任務，你需要應用伺服器（我們將在其他文章中介紹這種技術）。</dd>
+</dl>
+
+<p>HTTP 提供了用戶端與伺服器端，該如何溝通的明確規則。我們將在之後的<a href="https://developer.mozilla.org/zh-TW/docs/Web/HTTP">技術文章</a>內講解 HTTP 本身。目前，我們會先聚焦在：</p>
+
+<ul>
+ <li>只有用戶端能發出 HTTP 請求，也只有伺服器能接受它。相對地，也只有伺服器能回應用戶端的 HTTP 請求。</li>
+ <li>如果透過 HTTP 請求檔案，用戶端必須提供檔案的 {{Glossary("URL")}}。</li>
+ <li>網路伺服器<strong>必須回應</strong>所有的 HTTP 請求，最起碼需要回應錯誤訊息。</li>
+</ul>
+
+<p><a href="https://developer.mozilla.org/zh-TW/404"><img alt="MDN 404 錯誤頁面範例" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"> </a>在網路伺服器裡面，HTTP 伺服器負責處理和回答傳入的請求。</p>
+
+<ol>
+ <li>HTTP 伺服器接收請求後，會先檢查請求的 URL 是否匹配現有文件。</li>
+ <li>如果匹配，網路伺服器會把檔案內容回傳給瀏覽器。不然，應用伺服器會建立需要的檔案。</li>
+ <li>如果都沒有用的話，網路伺服器會回傳錯誤訊息給瀏覽器，最常見的就是「404 Not Found」。（這個錯誤很常見，所以許多網頁設計師花了相當多的心力設計 <a href="http://www.404notfound.fr/" rel="external">404 錯誤頁面</a>。）</li>
+</ol>
+
+<h3 id="靜態與動態內容">靜態與動態內容</h3>
+
+<p>大略上來說，伺服器能儲存動態與靜態的內容。「靜態」是指「提供事先寫好的」。靜態網站設定上最簡單，所以我們建議選擇靜態內容，作為你的第一個網站。</p>
+
+<p>「動態」指的是伺服器處理內容、甚至從資料庫即時產生。這個解決方案提供了更多靈活性，但技術會變得難以駕馭、令網站明顯複雜許多。</p>
+
+<p>以你目前閱讀的頁面為例。在託管的伺服器裡面，有個應用伺服器會從資料庫取得內容、規範化、再把它塞進某些 HTML 模板裡面。這裡的應用伺服器，是以 Python 語言的 Django 框架為基礎，所組建的 <a href="/zh-TW/docs/MDN/Kuma">Kuma</a>。Mozilla 團隊基於 MDN 的特殊需求開發了 Kuma，不過也有很多相似、但使用其他技術的應用程式。</p>
+
+<p>從海量的應用伺服器裡面選一個推薦，是個大難題。有些應用程式會迎合特定的類別，如部落格、百科、電子商務。其他還有更通用的 {{Glossary("CMS")}}（content management systems，內容管理系統）。如果要建立動態網站，花點時間找個符合需求的工具。除非想學習伺服器端程式設計（也是個扣人心弦的領域！），否則不用建立屬於自己的應用伺服器。那樣只是在{{Interwiki("wikipedia", "重造輪子")}}。</p>
+
+<h2 id="下一步">下一步</h2>
+
+<p>熟悉了伺服器以後可以：</p>
+
+<ul>
+ <li>讀讀<a href="/zh-TW/docs/Learn/How_much_does_it_cost">how much it costs to do something on the web</a></li>
+ <li>了解<a href="/zh-TW/docs/Learn/What_software_do_I_need">various software you need to create a website</a></li>
+ <li>移駕到<a href="/zh-TW/docs/Learn/Upload_files_to_a_web_server">how to upload files on a web server</a>之類的實戰。</li>
+</ul>