基本 HTML 文字 - 學習該如何開發 Web

基本 HTML 文字
==========

* 前頁
* Overview: Introduction to HTML
* 次頁

HTML 的其中一件核心工作，就是給出文件的結構和含義（又稱semantics (en-US)），以便瀏覽器正確顯示。本文章旨在說明 HTML 可透過增加標題、章節、強調、建立清單等，建立結構化的頁面。

|  |  |
| --- | --- |
| 需求： |
 熟悉基本 HTML、在
 Getting started with HTML
 有講解。
  |
| 目標： |
 學習如何標記一個具有文字的基礎頁面賦予它結構及含義— 包含段落, 標題,
 列表, 強調文字, 以及引用句
  |

基本：標題與段落
--------

多數結構化的文字由標題及段落構成，不論你是在閱讀故事，翻閱報紙，讀教科書，翻閱雜誌，等等。

![An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals/newspaper_small.jpg)

充滿結構性的文字內容讓閱讀經驗變得輕鬆且更加愉悅。

在 HTML 裡，每個段落都被包在 `<p>` (en-US) 元素中，就像：

```html
<p>I am a paragraph, oh yes I am.</p>
```

而每個標題需要被包在標題元素中：

```html
<h1>I am the title of the story.</h1>
```

在 HTML 裡有六種標題元素：`<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US)，跟 `<h6>` (en-US). 每個元素分別代表著在文件中的不同層級; `<h1>` 代表主標題, `<h2>` 代表副標題, `<h3>` 代表更次級的副標題, 依此類推。

### 實作架構化階層

舉例來說，在一個故事裡，`<h1>` 將用來代表整個故事的標題，`<h2>` 則代表每個章節的標題，而`<h3>` 代表每個章節中的副標題，依此類推下去。

```html
<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The dark night</h2>

<p>
  It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...
</p>

<h2>Chapter 2: The eternal silence</h2>

<p>
  Our protagonist could not so much as a whisper out of the shadowy figure ...
</p>

<h3>The specter speaks</h3>

<p>
  Several more hours had passed, when all of a sudden the specter sat bolt
  upright and exclaimed, "Please have mercy on my soul!"
</p>
```

只要層次結構有意義，要一個元件顯示什麼取決於你。當你在建立類似的文字結構時，只要記得以下幾點：

* 一個頁面最好只用一個 `<h1>` 元素：這是頂層標題，所有其他標題都位於層次結構的下方。
* 在使用標題元素的時候，要注意層級的順序。不要在
前使用
來標示副標題，這要很容易造成意外的結果。
* 每次使用標題元素時，雖有六個層級可使用，但應該以使用少於三個層級為目標，除非你真的覺得有必要用到三個以上。有過多層級的文件變得很笨重且很難導航文件架構。在這種情況下，可以考慮把文件內容劃分到多個頁面。
### 為何我們需要架構？

為了回答這個問題，我們先看看 text-start.html 這個文章（鷹嘴豆泥食譜）的最前端。請先下載這個文件的副本到你的電腦，等一下練習時會用到。這個文件目前包含很多不同的內容，並沒有被標記出架構，唯一的排版只有換行而已。

所以當你在瀏覽器中打開這份文件時，你將會看到這些文字看起來擠成一團！

![A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals/screen_shot_2017-03-29_at_09.20.35.png)

這是因為文件內沒有元素去標示出文件的架構，所以瀏覽器不知道怎麼排版。此外：

* 使用者造訪一個網站時，時常只是快速的瀏覽內容以找尋他們正在找的相關內容，更常時候，使用者只有看一個頁面內的標題而已（來源：spend a very short time on a web page）。如果他們沒在短時間內找到實用的資訊，他們就會放棄這個頁面而去其他網頁尋找。
* 搜尋引擎會把標題作為重要關鍵字來排序搜尋結果。所以如果一個頁面沒有標題，就很難被搜尋引擎排在上方。換句話說，就是沒有達到搜尋引擎最佳化（Search Engine Optimization (SEO)）。
* 視力嚴重受損的使用者通常無法閱覽網頁，而透過螢幕閱讀器（screen reader）聽頁面。螢幕閱讀器軟體提供使用者能夠更快速的取得頁面資訊。其中一個方式是透過朗誦出文件的架構，能讓使用者更快地獲得他們在尋找的資訊。所以假如一個頁面沒被恰當地標記架構，就會迫使使用者必須聆聽完整個頁面以取得尋找的資訊。
* 若要用CSS裝飾頁面，或者讓瀏覽器透過JavaScript做特效，也要用特別的元素來做標記。這樣 CSS/JS 才知道哪一部分是屬於他們的文件。

以上原因說明為何我們要為內容標示出架構。

### Active learning: Giving our content structure

Let's jump straight in with a live example. In the example below, add elements to the raw text in the *Input* field so that it appears as a heading and two paragraphs in the *Output* field.

If you make a mistake, you can always reset it using the *Reset* button. 如果你中途卡關，點擊*按鈕來查看答案*。
```

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
My short story I am a policewoman and my name is Trish.

My legs are made of cardboard and I am married to a fish.</textarea
>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

var htmlSolution =
  "<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>";
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Why do we need semantics?

Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (Do any countries use red to mean "go"? I hope not.)

In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the `<h1>` (en-US) element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

```html
<h1>This is a top level heading</h1>
```

By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above).

On the other hand, you could make any element *look* like a top level heading. Consider the following:

```html
<span style="font-size: 32px; margin: 21px 0; display: block;"
 >Is this a top level heading?</span
>
```

This is a `<span>` (en-US) element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (you'll find out more about these later on in the course). We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.

Lists
-----

Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.

### Unordered

Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.
```

milk
eggs
bread
hummus
```

Every unordered list starts off with a `<ul>` (en-US) element — this wraps around all the list items:

```html
<ul>
  milk eggs bread hummus
</ul>
```

The last step is to wrap each list item in a `<li>` (en-US) (list item) element:

```html
<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>
```

#### Active learning: Marking up an unordered list

Try editing the live sample below to create your very own HTML unordered list.
```

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
milk
eggs
bread
hummus</textarea
>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

var htmlSolution =
  "<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>";
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Ordered

Ordered lists are lists in which the order of the items *does* matter — let's take a set of directions as an example:
```

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road
```

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an `<ol>` (en-US) element, rather than `<ul>`:

```html
<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>
```

#### Active learning: Marking up an ordered list

Try editing the live sample below to create your very own HTML ordered list.
```

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">
Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road</textarea
>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

var htmlSolution =
  "<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>";
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Active learning: Marking up our recipe page

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.
```

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">
Quick hummus recipe

  This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.

  Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.

  Ingredients

  1 can (400g) of chick peas (garbanzo beans)
  175g of tahini
  6 sundried tomatoes
  Half a red pepper
  A pinch of cayenne pepper
  1 clove of garlic
  A dash of olive oil

  Instructions

  Remove the skin from the garlic, and chop coarsely
  Remove all the seeds and stalk from the pepper, and chop coarsely
  Add all the ingredients into a food processor
  Process all the ingredients into a paste
  If you want a coarse "chunky" hummus, process it for a short time
  If you want a smooth hummus, process it for a longer time

  For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.

  Storage

  Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.

  Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea
>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

var htmlSolution =
  '<h1>Quick hummus recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

If you get stuck, you can always press the *Show solution* button, or check out our text-complete.html example on our github repo.

### Nesting lists

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

```html
<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, process it for a longer time.</li>
</ol>
```

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

```html
<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>
    Process all the ingredients into a paste.
    <ul>
      <li>
        If you want a coarse "chunky" hummus, process it for a short time.
      </li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>
```

Try going back to the previous active learning example and updating the second list like this.

Emphasis and importance
-----------------------

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

### Emphasis

When we want to add emphasis in spoken language, we *stress* certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

I am glad you weren't late.

I am *glad* you weren't *late*.

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

In HTML we use the `<em>` (en-US) (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a `<span>` (en-US) element and some CSS, or perhaps an `<i>` (en-US) element (see below).

```html
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
```

### Strong importance

To emphasize important words, we tend to stress them in spoken language and **bold** them in written language. For example:

這液體具有**相當強的毒性**。

我相信你。**千萬**別遲到了！

In HTML we use the `<strong>` (en-US) (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a `<span>` (en-US) element and some CSS, or perhaps a `<b>` (en-US) element (see below).

```html
<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>
```

You can nest strong and emphasis inside one another if desired:

```html
<p>
  This liquid is <strong>highly toxic</strong> — if you drink it,
  <strong>you may <em>die</em></strong
 >.
</p>
```

### Active learning: Let's be important

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.
```

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">
<h1>Important notice</h1>
<p>On Sunday January 9th 2010, a gang of goths were
  spotted stealing several garden gnomes from a
  shopping center in downtown Milwaukee. They were
  all wearing green jumpsuits and silly hats, and
  seemed to be having a whale of a time. If anyone
   has any information about this incident, please
    contact the police now.</p></textarea
>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

var htmlSolution =
  "<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>";
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Italic, bold, underline

The elements we've discussed so far have clearcut associated semantics. The situation with `<b>` (en-US), `<i>` (en-US), and `<u>` (en-US) is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as **presentational elements** and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

HTML5 redefined `<b>`, `<i>` and `<u>` with new, somewhat confusing, semantic roles.

Here's the best rule of thumb: it's likely appropriate to use `<b>`, `<i>`, or `<u>` to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

* `<i>` (en-US) is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...
* `<b>` (en-US) is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...
* `<u>` (en-US) is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...

**備註：** A kind warning about underline: **People strongly associate underlining with hyperlinks.** Therefore, on the Web, it's best to underline only links. Use the `<u>` element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

```html
<!-- scientific names -->
<p>
  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) is the most common
  hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p>
  Someday I'll learn how to
  <u style="text-decoration-line: underline; text-decoration-style: wavy;"
 >spel</u
 >
  better.
</p>

<!-- Highlight keywords in a set of instructions -->
<ol>
  <li><b>Slice</b> two pieces of bread off the loaf.</li>
  <li>
    <b>Insert</b> a tomato slice and a leaf of lettuce between the slices of
    bread.
  </li>
</ol>
```

總結
--

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

* 前頁
* Overview: Introduction to HTML
* 次頁


HTML表格的基礎 - 學習該如何開發 Web

HTML表格的基礎
=========

* Overview: Tables
* 次頁  (en-US)

這篇文章將帶你從列、格、標頭，以及將各格以數欄、數列的方式合併等基礎開始探索 HTML 表格。

|  |  |
| --- | --- |
| 先備知識: | HTML的基礎(見介紹HTML) |
| 目標: | 對HTML表格有基本的認識 |

什麼是表格?
------

表格是一個由列和欄組成的結構化資料(tabular data)。表格能幫助你快速查看不同資料類型間的關聯值。例如人和年紀、一周當中的某天或是地方游泳池的時間表。

![A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.](/zh-TW/docs/Learn/HTML/Tables/Basics/numbers-table.png)

![A swimming timetable showing a sample data table](/zh-TW/docs/Learn/HTML/Tables/Basics/swimming-timetable.png)

表格在人類社會當中被廣泛使用且已經有很久的歷史，如下是美國 1800 年的人口普查紀錄表格。

![A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.](/zh-TW/docs/Learn/HTML/Tables/Basics/1800-census.jpg)

這也難怪 HTML 的開創者要提供一個在網路建立和呈現表格化資料的方法。

### 表格是怎麼運作的呢?

表格是精確的，資訊可以透過列和欄位名稱之間的視覺關聯輕鬆呈現。觀察以下表格，利用列和欄目名稱找出有 62 個衛星的類木行星。

有關太陽系星球的資訊 (真實資料取自 Nasa's Planetary Fact Sheet - Metric**. )**

|  | 名稱 | 質量(1024kg) | 直徑 (km) | 密度(kg/m3) | 重力(m/s2) | 一天的長度(小時) | 和太陽的距離(106km) | 平均溫度 (°C) | 衛星的數目 | 備註 |
| 陸地行星 | 水星 | 0.330 | 4,879 | 5427 | 3.7 | 4222.6 | 57.9 | 167 | 0 | 最接近太陽 |
| 金星 | 4.87 | 12,104 | 5243 | 8.9 | 2802.0 | 108.2 | 464 | 0 |  |
| 地球 | 5.97 | 12,756 | 5514 | 9.8 | 24.0 | 149.6 | 15 | 1 | 我們的世界 |
| 火星 | 0.642 | 6,792 | 3933 | 3.7 | 24.7 | 227.9 | -65 | 2 | 紅色星球 |
| 類木行星 | 氣態巨行星 | 木星 | 1898 | 142,984 | 1326 | 23.1 | 9.9 | 778.6 | -110 | 67 | 最大的星球 |
| 土星 | 568 | 120,536 | 687 | 9.0 | 10.7 | 1433.5 | -140 | 62 |  |
| 冰質巨行星 | 天王星 | 86.8 | 51,118 | 1271 | 8.7 | 17.2 | 2872.5 | -195 | 27 |  |
| 海王星 | 102 | 49,528 | 1638 | 11.0 | 16.1 | 4495.1 | -200 | 14 |  |
| 矮行星 | 冥王星 | 0.0146 | 2,370 | 2095 | 0.7 | 153.3 | 5906.4 | -225 | 5 | 在2006年被從行星類別中除名，但這還些爭議。 |

在正確執行之下，就連視障者都可以把表格資料詮釋為 HTML 格式的表格。一份成功的 HTML 表格就應該如此提升視障者的使用經驗。

### 表格樣式

你也可以在 GitHub 上看看實際範例 ! 而你也許會注意到那裡的表格似乎更容易閱讀。那是因為這裡的表格只有加上很少樣式，而 GitHub 上的版本卻應用上了更多明顯的 CSS 。

需要弄清楚的一點是 : 要讓表格在網頁上有效呈現需要提供紮實的 HTML 架構和 CSS 樣式資訊，但將在這個模組中聚焦在 HTML 的部分。若想瞭解 CSS 的部分，可以在完成這部分閱讀之後造訪表格樣式設計 (en-US)的文章。

在這個單元裡我們將不會聚焦在 CSS 上，但是我們提供基本的 CSS 樣式表讓你做使用，這將會使你製作的表格比起毫無修飾的預設樣式更方便閱讀。你能在這找到樣式表，並且你也能找到一個適用於樣式表的HTML 模版 — 他們能一起讓你有個好起點來實驗 HTML 表格。

### 當何時你不應該使用 HTML 表格?

 HTML 表格應該被使用在結構化資料(tabular data)上 — 這就是它們被設計的目的。
 不幸地是，許多人習慣使用 HTML 表格去排版他們的網頁，例如: 使用一列去當 header，一列當做內容欄位，一列當作 footer...等等，你能在我們的輔助學習單元裡的頁面輸出 (en-US)發現更多細節以及一個範例。它曾經被這麼使用是因為 CSS 過去在不同瀏覽器之間的支援程度十分可怕; 如今，已非常少在用表格做排版，但你仍然可能在網路的一些邊邊角角見到。

 簡單來說，使用表格排版而非使用CSS 排版技術是一件很糟的事情。
 下列是主要原因:

1. **表格排版會減少對視障使用者的輔助** : 視障者使用的螢幕閱讀器 (en-US)會翻譯存在於 HTML 網頁的標籤並對使用者念出內容。由於表格並不是正確的排版工具，並且標示方式遠複雜於 CSS 排版技術，所以螢幕閱讀器輸出的內容會使他們的使用者感到困惑。
2. **表格會產生標籤雜燴(tag soup)**: 就像上面提到的，表格排版通常會比一般適當的輸出技術包含更複雜的標籤結構。這會導致程式碼本身更難撰寫、維護及 debug。
3. **表格不會自適應(automatically responsive)**: 當你使用合適的排版容器(像是{htmlelement("header")}, `<section>` (en-US)) 或是 `<div>`),它們的寬度相對於父層預設為 100%，而表格的預設大小是依據它們的內容物，所以當表格樣式要有效的在不同的裝置之間運行時，會需要做額外的測量調整。
主動學習:建造你第一個表格
-------------

關於表格的理論我們已經談論夠了，所以，來深入實際的例子並建立一個簡單的表格吧!

1. 第一件事，在自己的電腦複製一份新的空白模板.html 以及 簡易表格.css
2. 每一個表格裡的內容都是由這兩個標籤所組成:**`<table></table>`** 將這些放入你的 HTML 中的 body。
3. 表格裡最小的容器是表格儲存格，由\*\*`<td>` (en-US)\*\*元素所組成('td' 代表 'table data')。將下列的程式碼加入你的表格標籤之中:

```html
<td>Hi, I'm your first cell.</td>
```

4. 如果我們想要一個四格儲存格寬的列(row), 我們需要複製這些標籤三次。
 將你的表格內容更新成這樣:

```html
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
```

就像你看到的，儲存格不會在各自的下方，它們彼此自動排列在同一列上。每個 `<td>` 元素會創造單個儲存格並且使它們據在同一行，我們新增的每一個儲存格都會使列更長。

要讓這個列停止增加並開始在下一列增加連續的儲存格的話，我們需要用 **`<tr>` (en-US)** 元素 ('tr' 代表 'table row')，現在來探討一下:

1. 放置四個你已新增在 `<tr>` 標籤裡的儲存格, 像這樣:

```html
<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
```

2. 現在你已經製作了一列了，可以再繼續做一、二列 — 每個列都需要被額外的 `<tr>` 元素包裹住, 並且每個儲存格都須包含在一個 `<td>` 內
### 結果

表格應該會看起來像下面這樣:
```

<table>
  <tr>
    <td>Hi, I'm your first cell.</td>
    <td>I'm your second cell.</td>
    <td>I'm your third cell.</td>
    <td>I'm your fourth cell.</td>
  </tr>

  <tr>
    <td>Second row, first cell.</td>
    <td>Cell 2.</td>
    <td>Cell 3.</td>
    <td>Cell 4.</td>
  </tr>
</table>
```

```
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
```

**備註：** 你也可以在 GitHub 上看到 simple-table.html (see it live also).

用 <th> 加上標頭元素
-------------

 現在，讓我們把注意力轉移到表格的標頭(table header) — 存在於一列或一欄開頭的特別儲存格並且定義了欄或列中內容的資料型態 (舉個例子, 看看這篇文章中第一個範例裡 的"Person" 和 "Age" 儲存格 )。
 為了說明為什麼它們很有用，請看下面的表格例子, 首先是程式碼:

```html
<table>
  <tr>
    <td> </td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>
```

```
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
```

這是實際渲染出的表格:

這裡的問題在於，當你找到想知道的資料時，並不容易去找到資料之間對應的位置。如果欄跟列能有個明顯的標示，會比較好理解。

### 主動學習 : 表格標頭

讓我們來繼續改善這個表格吧!

1. 首先, 複製 dogs-table.html and minimal-table.css 檔案到你的電腦。
 這份 HTML 裡包含跟底下你看到的一樣的狗狗範例。
2. 為了在語意上和視覺上辨識表格的標頭，你可以使用 **`<th>` (en-US)** 元素 ('th' 代表 'table header')。它的運作方式跟 `<td>` 完全相同，除了它表示的是標頭而非一般儲存格外。
 繼續修改你的 HTML 將所有外圍的 `<td>` 元素變成 `<th>` 元素。
3. 儲存你的 HTML 並在瀏覽器上執行，現在你應該可以看到標頭應有的樣子。

**備註：** 你可以在 GitHub 上的dogs-table-fixed.html找到我們寫好的完整的範例(直接看看長怎樣).

### 標頭為什麼實用?

我們已經部分解答了這個問題 — 當有標頭清楚標示時，它能更簡單的使你找到資料並讓整體設計看起來更完整。

**備註：** 表格標頭有具備預設樣式 — 粗體並置中，即使你不加上你自己的表格樣式，他們仍然能被凸顯。

表格標頭還有一個額外的好處 — 伴隨著 `作用域(scope)` 屬性 (我們將會在下一個章節中學到)，當要連結每個標頭而所有資料都在同一列或欄時，這能允許表格使用起來更無障礙。並且，螢幕閱讀器能一次性讀出完整一列或一欄的資料，這是非常實用的。

允許列或欄的儲存格合併
-----------

有時我們想要儲存格涵蓋複數的列或欄，來看看下列顯示常見動物名稱的簡單例子。在某些案例，我們想要將名字代表雄性或雌性顯示在動物名字旁邊，但有些不需要，這種情況下我們只想將動物名字橫跨整個表格。

初始架構會看起來像這樣:

```html
<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>
```

```
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
```

但輸出的不如我們想要的樣子:

我們需要一種方式讓"Animals", "Hippopotamus", 和 "Crocodile" 橫跨兩個欄位, 然後讓 "Horse" and "Chicken" 向下合併兩列儲存格。幸運地是，表格標頭和儲存格有 `colspan` 和 `rowspan` 屬性，可以讓我們這樣做。 兩者都接受無單位的數值等同於你想合併的列或欄的數量。舉例來說，`colspan="2"` 會讓這個儲存格合併兩欄。

來使用 `colspan` 和 `rowspan` 來改善這麼表格吧!

1. 首先，複製一份我們的 animals-table.html 和 minimal-table.css 檔案在你的電腦上。這個 HTML 包含跟上面同樣的動物範例。
2. 接著，使用 `colspan` 來讓 "Animals", "Hippopotamus", 和 "Crocodile" 合併橫跨兩個欄位。
3. 最後, 使用 `rowspan` 來讓 "Horse" and "Chicken" 合併橫跨兩列。
4. 儲存並在瀏覽器上檢視你改善後的程式碼。

**備註：** 你可以在 GitHub 上的 animals-table-fixed.html 找到我們寫好的完整的範例 (see it live also).

Providing common styling to columns
-----------------------------------

### Styling without <col>

在我們繼續下去前，我們將要告訴你這節文章最後一個重點。HTML 有一個一次定義一整欄樣式資訊的方法 — **`<col>` (en-US)** **`<colgroup>` (en-US)** 元素。These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on *every* `<td>` or `<th>` in the column, or use a complex selector such as `:nth-child()` (en-US).

**備註：** Styling columns like this is limited to a few properties: `border` (en-US), `background` (en-US), `width`, and `visibility` (en-US). To set other properties you'll have to either style every `<td>` or `<th>` in the column, or use a complex selector such as `:nth-child()` (en-US).

Take the following simple example:

```html
<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>
```

```
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}
```

Which gives us the following result:

This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a `class` set on all three in a real project and specify the styling in a separate stylesheet).

### Styling with <col>

Instead of doing this, we can specify the information once, on a `<col>` element. `<col>` elements are specified inside a `<colgroup>` container just below the opening `<table>` tag. We could create the same effect as we see above by specifying our table as follows:

```html
<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>
```

Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank `<col>` element — if we didn't, the styling would just be applied to the first column.

If we wanted to apply the styling information to both columns, we could just include one `<col>` element with a span attribute on it, like this:

```html
<colgroup>
  <col style="background-color: yellow" span="2" />
</colgroup>
```

Just like `colspan` and `rowspan`, `span` takes a unitless number value that specifies the number of columns you want the styling to apply to.

### Active learning: colgroup and col

Now it's time to have a go yourself.

Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.

Recreate the table by following the steps below.

1. First, make a local copy of our timetable.html file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.
2. Add a `<colgroup>` element at the top of the table, just underneath the `<table>` tag, in which you can add your `<col>` elements (see the remaining steps below).
3. The first two columns need to be left unstyled.
4. Add a background color to the third column. The value for your `style` attribute is `background-color:#97DB9A;`
5. Set a separate width on the fourth column. The value for your `style` attribute is `width: 42px;`
6. Add a background color to the fifth column. The value for your `style` attribute is `background-color: #97DB9A;`
7. Add a different background color plus a border to the sixth column, to signify that this is a special day and she's teaching a new class. The values for your `style` attribute are `background-color:#DCC48E; border:4px solid #C1437A;`
8. The last two days are free days, so just set them to no background color but a set width; the value for the `style` attribute is `width: 42px;`

See how you get on with the example. If you get stuck, or want to check your work, you can find our version on GitHub as timetable-fixed.html (see it live also).

Summary
-------

That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people.

* Overview: Tables
* 次頁  (en-US)


將你的網站發佈上線 - 學習該如何開發 Web

將你的網站發佈上線
=========

* 前頁
* Overview: Getting started with the web
* 次頁

當你完成你的網頁程式碼後，你需要把它放到網路上，這樣人們才可以搜尋得到。這個章節將介紹如何快速的把你的程式碼放到網路上。

有哪些選項？
------

發佈網站並不是一個幾句話就能說得完的課題，主要是因為有太多方法能夠發佈網站。在這個章節中，我們不會介紹所有可能的方法，但是我們會簡單講解三個概念，並從初學者的角度分別說明它們的優缺點，然後一步一步帶你用一個你現階段有辦法完成的方法發佈網站。

### 取得主機（hosting）和網域名稱（domain name）

如果想要完全掌控你發佈的網站，那你可能需要花錢買：

* 主機：跟主機租借商（hosting company）的網路伺服器（web server）租一個放置檔案的空間。你把你建置的網頁檔案放到這個空間中，然後想要連結到網頁的人就能透過網頁伺服器連結到你的網站。
* 網域名稱 (en-US)(domain name)：人們可以透過這個獨特的網址來尋找你的網站，像是 `http://www.mozilla.org` 或 `http://www.bbc.co.uk`。你需要向**網域名稱註冊商**（domain registrar）租借網域名稱。

許多專業的網站是用這個方法發佈的。

除此之外，你還會需要一個 File Transfer Protocol (FTP) 程式（點選 How much does it cost: software (en-US) 來取得更多資訊），這樣才能真正的把你建置的網頁檔案傳達給伺服器。FTP 程式很廣泛，但一般來說，你可以用你公司提供的資訊，像是使用者名稱、密碼以及 host name 來登入你的網頁伺服器，它就會以兩個視窗的形式分別顯示你電腦裡的檔案和你網頁伺服器上的檔案，然後你就可以移動你的檔案。

![](/zh-TW/docs/Learn/Getting_started_with_the_web/Publishing_your_website/ftp.jpg)

#### 租借主機和網域的方法

* 在這裡我們不介紹特定的主機租借商(hosting companies)或網域名稱註冊商(domain name registrars)，你只要搜尋「web hosting」與「domain names」就能找到。所有的註冊商都會提供方法，讓你檢查你想要的網域名稱可否使用、或有沒有被註冊過。
* 你的 網路供應商 (en-US) 可能會提供有限制的主機，這可以讓你發佈一些比較簡易的網站，雖然會有些限制，但嘗試使用它來發佈你的第一個網站也是很不錯的 — 聯絡並詢問他們！
* 有些公司提供免費的服務，像是 Neocities、Blogger和 WordPress，但是我要強調，你付出多少得到多少，不過使用它們來發佈你的第一個網站何嘗不是一個理想的方法? 而且免費的服務大部分不需要 FTP 程序來上傳檔案，你只需要用它們提供的介面來移動檔案。
* 有些公司同時提供主機(hosting)和網域(domains)的服務。
### 使用線上工具，像是 GitHub 或 Google App Engine

使用工具來發佈網站：

* GitHub 可以交流程式的平台，它提供你一個空間來存放程式碼，這個空間是基於 Git 的\*\*版本控制系統，\*\*你能夠透過系統共同編輯平台上的程式專案，而這個系統是開放資源，也就是說全世界的人都可以找到你的 GitHub code，包括使用它、從中學習並將它改得更好。GitHub 提供一個非常實用的工具— GitHub Pages，它能讓你發佈網站。
* Google App Engine 是一個強大的平台，不管是要從頭建置 multi-tiered web 程式還是託管靜態網站，它都能讓你在 Google 的基礎下建置和運行應用程式。點選 How do you host your website on Google App Engine? (en-US) 以獲得更多資訊。

這類工具和託管不同，通常他們都是免費的，不過功能當然也會受限。

### 透過如 Thimble 這樣的網路 IDE

有些 web app 會模擬網站的開發環境，讓你能執行 HTML, CSS, JavaScript，顯示程式碼執行結果、並渲染至網站上－－一切都在瀏覽器的一個頁籤內完成。通常這些工具用起來都簡單、學起來簡單、基本功能還是免費的。他們用獨一無二的網址，替你保管渲染好的頁面。不過，基本功能基本上很受限，而且 app 通常都不提供如圖像這種 asset 的託管。

試試以下網站，看看你能想到什麼點子：

* JSFiddle
* Glitch
* JS Bin
* CodePen

![](/zh-TW/docs/Learn/Getting_started_with_the_web/Publishing_your_website/jsbin-screen.png)

透過 GitHub 發布
------------

來看看把網站用 Github Pages 發佈多簡單。

1. 首先註冊 GitHub 並驗證電子郵件。
2. 接著針對要上傳的檔案建立一個 repository。
3. 在頁面的 *Repository name* 標籤輸入 *username*.github.io，*username* 是指你的用戶名。例如我們的好朋友 bobsmith 就會輸入 *bobsmith.github.io*。
 另外，請勾選 *Initialize this repository with a README* 後點選 *Create repository*。
 ![](/zh-TW/docs/Learn/Getting_started_with_the_web/Publishing_your_website/github-create-repo.png)
4. 之後，把網站內容拖曳到 repository 目錄，並勾選 *Commit changes*。

**備註：** 請確定目錄內有 *index.html* 檔案。
5. 現在讓瀏覽器連到 *username*.github.io 來看看你的網站。例如你的用戶名字是 *chrisdavidmills*，就連到 chrisdavidmills.github.io。

**備註：** 讓網站上線需要一點時間。如果網站沒有馬上運行，稍等一段時間後再試一次。

想多理解的話，請參考 GitHub Pages Help.

參閱
--

* 何謂網路伺服器
* Understanding domain names (en-US)
* How much does it cost to do something on the web? (en-US)
* Deploy a Website: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.
* Cheap or Free Static Website Hosting by Scott Murray has some useful ideas on available services.
* 前頁
* Overview: Getting started with the web
* 次頁


與各式各樣檔案打交道 - 學習該如何開發 Web

與各式各樣檔案打交道
==========

* 前頁
* Overview: Getting started with the web
* 次頁

一個網站會包含許多檔案: 文字內容、程式碼、樣式表、影音內容......等。每當你建立一個網站時，你需要將這些檔案在你的電腦上合理架構好。以確保它們能夠互相溝通，並讓內容正常顯示。然後你接著才能將你的網站發佈上線。本篇文章將探討你應該注意的一些議題，以便讓你能夠為你的網站設定好合理的檔案架構。

你的網站在哪裡?
--------

當你正在你自己的電腦上編輯你的網站時，你應該將所有相關的檔案放在同一個資料夾中，這反映到未來在伺服器上的檔案架構。這個資料夾可以放在任何地方，但你應該會放在一個容易找到的地方，對吧！像是你的桌面，你的家目錄，或是你硬碟的根目錄。

1. 找到一個地方來存放你的網站專案。首先，建立一個新資料夾並命名為 `web-projects` (或類似名稱)。 這裡將存放你的各種網站專案.
2. 在上述資料夾底下，建立另一個資料夾來存放你的第一個網站，請將這個資料夾命名為 `test-site` (或其他有創意的名稱).
留意大小寫與空格
--------

你將注意到在本篇文章中，我們會要求你在命名檔案或是資料夾時，只使用小寫並且避免使用空格。這是因為：

1. 許多的電腦尤其是網路伺服器，是大小寫區分的(case-sensitive)。所以假設你放了圖片在你的網站上而路徑是 `test-site/MyImage.jpg`，然後另一個檔案你想放在 `test-site/myimage.jpg`，這可能是無法運作的。
2. 瀏覽器、伺服器、以及各種程式語言對於空格的處理並不是一致的。舉例來說，如果你在檔名中使用了空格，有些系統會將其視為兩個檔名，有些伺服器會將空格替換成 "%20" (這是空格在 URIs 中的表示法)，並破壞了你的連結。我們建議使用底線(underscores)與破折號(dashes)來隔開單字。例如：`my-file.html` 或是 `my_file.html`.

也因為這些原因，你應該盡量在命名資料夾與檔案時使用小寫並避免使用空格，這樣一來將能夠減少一些不必要的錯誤。

你的網站架構應該如何?
-----------

下一步，我們要看看我們的測試網站應該具有什麼樣的架構。我們的網站專案最常見的東西就是一個 HTML 檔案與專門放圖片、樣式檔案、腳本檔案的資料夾們。讓我們來看看下面：

1. **`index.html`**: 這個檔案會包含你的首頁內容，也就是別人一進到你的網站時所看到的文字與圖片。使用你的文字編輯器，建立一個新檔案命名為 `index.html` ，並將它存到 `test-site` 這個資料夾下。
2. **`images` folder**: 這個資料夾包含了所有網站會用到的圖片，建立一個新資料夾命名為 `images` ，並將它存到 `test-site` 這個資料夾下。
3. **`styles` folder**: 這個資料夾包含了能夠設計你的網站的 CSS 碼(例如：設定文字與背景顏色)，建立一個資料夾命名為 `styles`，並將它存到 `test-site` 這個資料夾下。
4. **`scripts` folder**: 這個資料將包含能夠使網站具有互動性的 JavaScript 程式碼。(例如：按下按鈕後會載入資料)。建立一個資料夾命名`scripts` ，並將它存到 `test-site` 這個資料夾下。

**備註：** 在 Windows 的電腦上，你可能在設定副檔名上會遇到一些困難。因為 Windows 預設會將已知的檔案類型名稱隱藏。一般來說你可以將這項設定關掉，只需要去檔案總管，選擇「資料夾選項」並取消選取「隱藏已知檔案類型的副檔名」，並點選 **OK** 。有關不同版本的 Windows 的設定方法，請利用搜尋引擎搜尋。

檔案路徑
----

要讓一個檔案能夠與另一個檔案"溝通"，你需要提供一個他們之間的相對檔案路徑以讓檔案能夠找到另一個檔案在哪裡。為了要展示，我們將插入一小段的 HTML 到我們的 `index.html` 檔案中，並且讓它顯示你在 "What will your website look like?" (en-US) 這篇文章中所選的圖片。

1. 複製你選的圖片並放到 `images` 資料夾中。
2. 打開你的 `index.html`，並複製貼上下面這段 code。先別擔心這些 code 代表什麼意思，我們會在後面的時候講解它們代表的意義。

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image" />
  </body>
</html>
```

3. `<img src="" alt="My test image">` 這行是一段將圖片插入到頁面中的 HTML code，我們必須告訴 HTML 圖片在哪。我們知道圖片在 *images* 資料夾中，而 *images* 資料夾就跟 `index.html`在同一目錄下。為了要在檔案系統結構中從 `index.html` 走到我們的圖片，我們需要將檔案路徑設為`images/your-image-filename`. 舉例來說，我們的圖片命名為 `firefox-icon.png`，所以這裡的檔案路徑即為 `images/firefox-icon.png`.
4. 將檔案路徑貼到你的 HTML code 中的 `src=""` 的雙引號之間。
5. 將你的 HTML 檔案存檔，並且滑鼠雙擊 HTML 檔案來打開它，你應該會看到一個新的網頁並展示著你的圖片!

![A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world](/zh-TW/docs/Learn/Getting_started_with_the_web/Dealing_with_files/website-screenshot.png)

一些有關路徑的規則:

* 要連結一個目標檔案到在同一個目錄下的 HTML 檔案，只需要檔案名稱就可以了。例如 `my-image.jpg`。
* 為了要參照到在子目錄下的檔案，在路徑前面加上該目錄的名稱，並接著加上一個斜線(/)。例如： `subdirectory/my-image.jpg`.
* 為了要連結到一個在 HTML file 的上層目錄的檔案，你需要使用兩個點點(..)。例如：index.html 是在 `test-site` 這個目錄的一個子目錄下，而 `my-image.png` 是在 `test-site` 這個目錄下，HTML file 要參照 `my-image.png` 必須使用 `../my-image.png`。
* 你可以混和著使用以上的規則，例如 `../subdirectory/another-subdirectory/my-image.png`.

至此，你已經知道目前需要知道的了。

**備註：** Windows 的檔案系統會傾向使用反斜線(\)，而非斜線(/)。例如 `C:\windows`. 這並沒有關係，即使你是在 Windows 上開發網站，你仍然應該在程式碼中使用斜線(/)。

還有什麼需要被完成的?
-----------

目前先這樣吧。你的資料夾裡面現在應該長得像這樣：

![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](/zh-TW/docs/Learn/Getting_started_with_the_web/Dealing_with_files/file-structure.png)

* 前頁
* Overview: Getting started with the web
* 次頁


JavaScript 基礎 - 學習該如何開發 Web

JavaScript 基礎
=============

* 前頁
* Overview: Getting started with the web
* 次頁

JavaScript 是一個可以幫你在網站裡加入互動功能的程式語言（舉例來說，一個遊戲可能會在按鈕按下或資料被輸入表單內時回應、動態更改樣式、以及展示動畫等）。這篇文章會幫助你踏上學習這個令人興奮的語言的旅程，並展示她可以實現的所有可能。

所以 JavaScript 到底是什麼？
--------------------

JavaScript 是一個成熟的動態程式語言，應用於 HTML 文件（document）上時，就可以為網頁提供動態的互動功能。JavaScript 是由 Mozilla project、Mozilla Foundation 和 Mozilla Corporation 的創辦人 Brendan Eich 所發明的。

你可以用 JavaScript 實現許多事情。你可以先從簡單的特性開始，如跑馬燈、相簿、動態版型、回應按鈕點擊等。在你熟悉的這個程式語言以後，甚至可以製作遊戲、2D 平面以及立體的圖像、資料庫系統等等的應用！

JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 JavaScript 核心為基礎為她撰寫了相當多的工具，讓各位可以感到事半功倍。這些工具包括：

* 內建在瀏覽器內的應用程式介面（Application Programming Interfaces，APIs）提供了多樣化的功能，像是動態產生 HTML 以及設定 CSS 樣式、擷取以及處理從使用者的網路攝影機錄下的影像、製作立體圖形或是聲音樣本。
* 第三方 API 允許開發者將他們的網頁與其他如 Twitter 或 Facebook 提供的內容合併在一起。
* 第三方框架和函式庫允許你將這些元件套用在你的 HTML 文件內，讓你可以迅速地建立網頁或應用程式。
「Hello world」範例程式
-----------------

前面所述的功能聽起來令人興奮，而她也的確符合這樣的期待— JavaScript 是眾多令人感到興奮的網路科技之一，你會因為選擇利用她來製作網頁而進入一個嶄新且充滿創意及力量的次元。

但無論如何，要讓 JavaScript 跟 HTML 和 CSS 合作無間的話，可能還要費一些功夫。現在你將會從一些細小的地方開始著手，接著一步步地往前進。首先，我們將會向你展示如何將一些基本的 JavaScript 給加入你的頁面中，並且打造一個\*「hello world!」\*的範例（這同時也是許多程式語言的標準範例程式）。

**警告：** 如果你還沒有學習過先前的課程，請你下載這個範例程式碼，並以此開始練習。

1. 首先，進入你測試網頁的資料夾中，並建立一個名為 `main.js` 的檔案，再將她存放於 `scripts` 資料夾內。
2. 接著，開啟 `index.html` 檔案，並在 `</body>` 這個結束標籤之前的位置，使用一行新的空間來輸入以下的元素：

```html
<script src="scripts/main.js"></script>
```

3. 我們做的事情，基本上跟新增一個 CSS 的 `<link>` (en-US) 元素是相同的概念 — 我們將 JavaScript 給導入這個頁面中，讓她來影響 HTML（以及 CSS、還有任何頁面上的東西）。
4. 再來我們把以下的程式碼新增到 `main.js` 檔案內：

```js
var myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";
```

5. 現在請你將修改過的 HTML 和 JavaScript 給存檔，再用瀏覽器讀取 `index.html`。你應該會看到以下的內容：
 ![](/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics/hello-world.png)

**備註：** 我們選擇將 `<script>` 元素放在接近 HTML 檔案底部的原因，是因為瀏覽器是依照程式碼存在檔案中的順序來讀取 HTML 檔案的。如果 JavaScript 先被瀏覽器讀取了，那她應該要去影響她之後的 HTML 程式碼，但有時候卻行不通，因為她比應該產生改變的 HTML 還要早被讀取到。因此，把她放在接近檔案底部的位置，通常都會是一個不錯的策略。

### 發生什麼事了？

所以你的標題文字已經被 JavaScript 修改成「Hello world!」了。我們先使用了一個叫做 `querySelector()` 的函式來取得了我們標題參考（Reference），並且將她存在一個叫做 `myHeading` 的變數裡面。這跟我們在操作 CSS 時使用的選擇器是相似的。當你想要更動某個元素時，首先你要將她選取起來。

之後，我們將變數 `myHeading` 中 `innerHTML` (en-US) 特性的值設為「Hello world!」。

**備註：** Both of the features you used above are parts of the Document Object Model (DOM) API, which allows you to manipulate documents.

語言基礎速成
------

接著我們來解釋一下 JavaScript 基本特性，以讓你更加地了解她是如何運作的。更好的事情是，這些特性基本上也存在於所有程式語言中。所以如果你可以充分理解這些基礎知識，你就可以撰寫程式來創造無限可能！

**警告：** 在這篇文章中，請你試著將範例程式碼輸入到 JavaScript 主控台中，並觀察發生了什麼事。如果你想要了解更多 JavaScript 主控台的細節，請參閱 Discover browser developer tools (en-US)。

### 變數（Variables）

變數（Variables (en-US)）是可以用來儲存數值的容器。要宣告一個變數，首先要用關鍵字 `var` 來開頭，並在後面輸入你想要用來呼叫她的名字：

```js
let myVariable;
```

**備註：** 在 JavaScript 檔案內的每行內容都需要在結尾加上分號，以標示出這行結束的位置。只有在需要於單行中隔開敘述句時，分號才是絕對需要的。然而，有些人相信在每一個敘述句結尾加上分號才是最佳實踐。這裡有其他何時要加或不加分號的規則——請參考 Your Guide to Semicolons in JavaScript 以瞭解更多資訊。

**備註：** 基本上你可以幫變數取任何名字，不過還是有一些限制的（請參閱這篇文章以了解變數的命名規則）。假如不太確定，可以檢查變數名稱來看看是否合法。

**備註：** JavaScript 是會區分大小寫字母的——`myVariable` 就跟 `myvariable` 不相同。如果你的程式碼出現了一些問題，可以試著檢查一下字母的大小寫！

宣告了一個變數之後，你可以為她指定一個數值：

```js
myVariable = "Bob";
```

你可以呼叫這個變數的名字來取得這個值：

```js
myVariable;
```

如果你有需要，你也可以在一行之內同時做完這兩件事情：

```js
let myVariable = "Bob";
```

當你把一個數值指定給一個變數之後，你也可以再次改變它：
```

let myVariable = 'Bob';
myVariable = 'Steve';
```

請記得這些變數有著不同的資料型態：

| 變數 | 說明 | 範例 |
| --- | --- | --- |
| String (en-US) | 字串，一段文字。如果要將字串指定給一個變數，你應該將內容用引號給框起來。 | `let myVariable = 'Bob';` |
| Number | 數值，一個數字。數字不被引號框起來。 | `let myVariable = 10;` |
| Boolean |
 布林值，一個 True（真）/False（假）數值。`true`/`false`
 是 JavaScript 內的特殊關鍵字，不需要用引號將她框住。
  | `let myVariable = true;` |
| Array | 陣列，一個可以儲存多個數值在單一參考中的結構。 |
`let myVariable = [1,'Bob','Steve',10];`可以用這個方式來呼叫陣列的每一個成員：`myVariable[0]、myVariable[1]`
 等等。
  |
| Object |
 物件。基本上，JavaScript
 內的所有東西都可以視為一個物件，而且可以被存放在變數裡。請將這個概念記下來。
  | `let myVariable = document.querySelector('h1');`這個項目之前的所有例子也都是物件。 |

所以為什麼我們需要變數？這個嘛，我們寫程式時可以做的任何有趣的事情，都需要有變數的參與。如果數值不會更動，那你也無法做任何動態的事情，像是客製化一個歡迎訊息、或是變更相簿裡的圖片。

### 註解（Comments）

你可以在你的 JavaScript 程式碼中加入註解，就像你在撰寫 CSS 時做的事情一樣：

```js
/\*
Everything in between is a comment.
\*/
```

如果你的註解只有一行，我們通常會簡單將註解放在兩個斜線的後方，像以下的範例：

```js
// This is a comment
```

### 運算子（Operators）

運算子（ operator (en-US)）是一個數學符號，可以讓兩個數值（或是變數）交互作用以後產生結果。你可以從以下的表格中看到一些最簡單的運算子，並將範例輸入 JavaScript 主控台來測試看看。

| 運算子 | 說明 | 符號 | 範例 |
| --- | --- | --- | --- |
| 相加／連接 | 用於將兩個數字相加，或是將兩個字串連接在一起。 | `+` | `6 + 9;'Hello ' + 'world!';` |
| 減、乘、除 | 這些運算子就跟基礎數學計算中在做的事情相同。 | `-`, `*`, `/` | `9 - 3;8 * 2; // 在 JavaScript 中，相乘運算子是個星號9 /
3;` |
| 指定運算子 | 你已經見過她了：這可以將一個數值指定給一個變數。 | `=` | `var myVariable = 'Bob';` |
| 等價運算子 |
 測試兩個數值是否相等，並且回傳一個 `true`/`false`
 的結果。
  | `===` | `var myVariable = 3;myVariable === 4;` |
| 否定、不相等 |
 通常會跟相等運算子搭配使用，否定運算子在 JavaScript
 中代表邏輯非（NOT）—她可以將 `true` 轉換為
 `false` ……等。
  | `!`, `!==` |
 第一個敘述句回傳的是
 `true`，但我們使否定運算子，使得對照組的敘述句回傳了
 `false`：

`var myVariable = 3;!(myVariable === 3);`

 在這裏，我們測試了「`myVariable` 是否不等於
 3」的一個敘述。這個敘述回傳的是 `false`，因為她確實等於 3。

``var myVariable = 3;`myVariable !== 3;` |

其實還有更多的運算子等的你去探索，但我們將在這裡先打住。你可以參照這篇運算式與運算子以取得完整的列表。

**備註：** 混合使用多種資料型態的話，可能會在計算時產生一些奇怪的結果，所以你要謹慎地為變數選用正確的資料類型。舉個例子：在主控台中輸入 `"35" + "25"`。為什麼你沒有得到你所想要的結果？因為使用引號框住數字會將她轉換成字串，所以你其實是將兩個字串給連接起來，而不是將她們給相加。如果你輸入的是 `35 + 25`，你將會得到正確的結果。

### 條件（Conditionals）

條件是種程式碼結構，可以讓你測試某個陳述式會不會回傳真值，並根據不同的結果執行不同程式碼。最常見的形式是 `if ... else` 。以下是一個範例：

```js
let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite...");
}
```

在 `if ( ... )` 裡面的陳述式就是一個測試—這將會使用到等價運算子（如先前所描述的）來比較變數 `iceCream` 和字串 `chocolate` 兩者是否相等，如果在比較之後回傳了 `true`，接著就執行第一個區塊內的程式碼。如果不是，就略過第一個區塊的程式碼並轉而執行寫在執行在 `else` 之後、第二個區塊內的程式碼。

### 函式（Functions）

函式（Functions (en-US)）是一種將需要重複使用的功能打包裝起來的方法，所以當要再次執行這些功能的時候，就可以呼叫這個函式來達成，而不是一再的重新撰寫程式碼。你在先前的篇幅中其實已經看過一些函式了，例如：

```js
let myVariable = document.querySelector("h1");
```

```js
alert("hello!");
```

這些函式是瀏覽器為你內建的，你可以自由地使用。

如果你看到某些很像是變數名稱的東西，但是後面帶有括號 — `()` — 的話，表示這可能是一個函式。函式通常會接收參數（arguments）—這是一些可以讓她完成工作的必要資料。這些參數會被寫在括號裡面，如果有不只一個參數的話，彼此間要用逗號隔開。

舉例來說，`alert()` 這個函式會在瀏覽器內視窗內產生一個彈出視窗，但是我們必須要傳給她一個字串當作參數，告訴這個函式，該把什麼東西放到這個彈出視窗裡。

好消息是：你可以定義你自己的函式 — 底下的這個範例中，我們將會為你帶來一個簡單的函式，她會接收兩個數字當作參數，並將其相乘：

```js
function multiply(num1, num2) {
  let result = num1 \* num2;
  return result;
}
```

你可以試著在主控台中執行上述的函式，然後再用不同的參數來測試這個函式幾次，例如：

```js
multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);
```

**備註：** `return` 陳述式會要求瀏覽器將 `result`變數回傳，以利後續使用。這是必要的，不然在函式內定義的變數就只能在函式內使用。這個現象叫作變數的有效使用範圍（scoping (en-US)）（請參閱這篇文章以了解變數的有效使用範圍）

### 事件（Events）

如果要在網頁上創造真正的互動功能，你將會需要事件（Events） — 這是一種可以監聽瀏覽器發生了什麼事情的程式碼結構，接著她會允許你執行其他程式碼以回應這些事件。最明顯的事件就是 click event (en-US) 了，當瀏覽器裡的某個東西被滑鼠點選時，這個事件就會被觸發。如果要測試一下這個事件，請你把底下的程式碼輸入到主控台內，接著用滑鼠點選目前的網頁：

```js
document.querySelector("html").onclick = function () {
  alert("Ouch! Stop poking me!");
};
```

有許多的方法可以把事件跟網頁元素結合在一起。在底下的程式碼中，我們先選擇了 HTML 元素，並把這個元素的 `onclick` (en-US) 處理器設定為一個匿名函式，裡面裝著在滑鼠點選事件發生時，要執行的程式碼：

請特別注意到以下這段程式碼：

```js
document.querySelector("html").onclick = function () {};
```

產生的結果將會與下面這段程式碼相同

```js
var myHTML = document.querySelector("html");
myHTML.onclick = function () {};
```

只是上面那段寫起來比較簡短罷了。

徹底加強我們的範例網頁
-----------

到目前為止，我們已經學會一些 JavaScript 的基礎知識了，接下來讓我們幫這個網頁新增一些很酷的特色，並給你一些靈感。

### 加入一個圖片變換器

在這個小節中，我們將在這個網頁裡添加一個圖片，以及一些簡單的 JavaScript，當這個圖片被滑鼠點選的時候，就會在兩個圖片之間互相切換。

1. 首先，先去找張你可以為你的網頁增添光彩的圖片。請盡量找一張尺寸跟第一張圖相同的圖片、或至少是張相似尺寸的圖片。
2. 將圖片存放到 `images` 資料夾內。
3. 編輯你的 `main.js` 檔案，並且將以下的 JavaScript 輸入到檔案內（如果你還有看見那段 hello world 的 JavaScript，請把她們給刪除）：

```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");
  }
};
```

4. 請將全部檔案儲存，並用瀏覽器開啟 `index.html`。現在請你點選圖片，她應該會切換成另外一張！

在這裡，我們把一個圖片元素的參考存進了 `myImage` 變數裡。接著，我們把這個變數的 `onclick` 事件處理器設定為一個匿名函式。現在，每當這個圖片被點選一次：

1. 我們會去取得圖片中 `src` 屬性的數值
2. 我們用一個條件判斷式，來檢查 `src` 的數值是否跟原始圖片的位址相同：
    1. 如果兩者相同，那我們就把 `src` 的數值更改為第二個圖片的位址，也就是在 `<image>` (en-US) 元素裡強迫讀取另外一張圖片。
    2. 如果兩者不同（也就是圖片已經被切換過了），我們就把 `src` 的數值更改為原始圖片的位址，圖片就會被切換回原來那張。
### 添加個客製化的歡迎訊息

接著我們再來添加一些程式碼，在使用者瀏覽這個網頁的時候，將網頁標題改為客製化的歡迎訊息。這個歡迎訊息會一直保留著，直到使用者離開這個網頁為止。我們也會添加個切換使用者的選項，並且一併更改歡迎訊息。

1. 編輯 `index.html` 檔案，並將下列程式碼置於 `<script>` 元素之前：

```html
<button>Change user</button>
```

2. 編輯 `main.js` 檔案，並將下列程式碼一字不漏地置於檔案的最末端 — 這些程式碼將會取得新按鈕、標題的參考，並把它們存在變數裡：

```js
var myButton = document.querySelector("button");
var myHeading = document.querySelector("h1");
```

3. 現在，將以下的函式加進去以設定客製化的歡迎訊息 — 這些函式目前還不會產生作用，但我們等一下會用到她們：

```js
function setUserName() {
  let myName = prompt("Please enter your name.");
  localStorage.setItem("name", myName);
  myHeading.innerHTML = "Mozilla is cool, " + myName;
}
```

這個函式包含了一個會產生一個對話視窗的 `prompt()` (en-US) 函式，有點像 `alert()`，只是 `prompt()` 會要求使用者輸入一些資料，並在使用者點選`確認`之後，將內容儲存在一個變數裡面。接著，我們呼叫一個名稱為 `localStorage` 的 API，這個 API 可以讓使用者先將一些資料儲存在瀏覽器裡面，之後有需要的話再取出來使用。我們使用 localStorage 的 `setItem()` 函式來建立並且把資料儲存到一個名稱為 `'name'` 的變數裡，再把包含者用者名字的 `myName` 的值指定給她。最後，我們將一個字串跟使用者的名字指定給標題的 `innerHTML` 特性：
4. 接著，加入這個 `if ... else` 區塊 — 因為她會在程式一開始被讀取的時候就被啟用，我們稱她為初始化程式碼：

```js
if (!localStorage.getItem("name")) {
  setUserName();
} else {
  let storedName = localStorage.getItem("name");
  myHeading.innerHTML = "Mozilla is cool, " + storedName;
}
```

這個區塊一開始使用了邏輯負運算子（邏輯非）來檢查 `name` 這個物件是否存在。如果沒有，那就執行 `setUserName()` 這個函式並且創造她。如果有了（例如：使用者已經在上一次造訪網頁時就設定過了），我們就使用 `getItem()` 函式來取得儲存的名字，並且將標題的 `innerHTML` 特性設定為一個字串加上使用者的名字，也就是我們在 `setUserName()` 函式裡做的事情。
5. 最後，把以下的 `onclick` 事件處理器跟按鈕綁定，如此一來，每次點選按鈕時就會執行 `setUserName()`。這將允許使用者透過點選那個按鈕來重新設定一個新的名字：

```js
myButton.onclick = function () {
  setUserName();
};
```

現在當你造訪這個網頁時，她會詢問你的名字，並且給你一個客製化過的歡迎訊息。在這之後，你也可以隨時透過點選那個按鈕來更改名字。順帶一提，因為這組客製化過的訊息是存在 localStorage 裡的，所以即使你將網頁關起來，她還是會保留著，所以當你下次開啟這個網頁時，這段客製化的訊息依然會出現！

### 用戶名稱是否為 null

當你運行範例並出現提示你輸入用戶名稱的對話框時，請嘗試按下*取消* 鈕。你會看到一個標題顯示著"Mozilla is cool, null"。這是因為當你取消提示時，該值將會被設為 null。null 在 Javascript 中的一個特殊值，基本上用來表示沒有任何值。

再試試按下 OK，但不輸入任何名字。你將會看到"Mozilla is cool,"，該結果的原因非常簡單的可以理解。

如果你想避免產生這些問題，你應該檢查使用者是否輸入了 null 或是空白的名字。試著透過修改`setUserName()`來應對這些問題，結果如下：
```

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;
  }
}
```

用人類的語言來理解，如果`myName`沒有值或是它的值是`null`，再次從頭執行`setUserName()。`如果`myName`有值（如果上述條件是不為真）．將值存入`localStorage`並將值設定給標頭檔的文件。

結語
--

如果你已經照著這篇文章的所有步驟做完了，你應該會看到以下的畫面（或者你也可以瀏覽我們製作的版本）：

![](/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics/website-screen-scripted.png)

如果在過程中遇到了任何問題，你也可以隨時把你的成品與我們 放在 Github 上的範例 相互對照。

在此，我們只稍稍體驗了 JavaScript 的一些皮毛。如果你非常享受這段學習的過程，並想要繼續深究，請你繼續瀏覽我們製作的 JavaScript 指南。

See also
--------

JavaScript — Dynamic client-side scripting

Our JavaScript learning topic — dive into JavaScript in much more detail.

Learn JavaScript

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.

* 前頁
* Overview: Getting started with the web
* 次頁


CSS 基本 - 學習該如何開發 Web

CSS 基本
======

* 前頁
* Overview: Getting started with the web
* 次頁

**階層樣式表** (Cascading Stylesheets；CSS) 可用以塑造網站的特殊風格。例如這段文字要用一般的黑色，或是改用紅色標明重點？某段重要內容應該置於畫面的何處？想用什麼背景圖片及顏色裝飾你的網站？〈CSS 基本概念〉帶你入門。

CSS 到底是什麼?
----------

跟 HTML 一樣，CSS 既非標準程式語言，也不是標記語言, 而是一種風格頁面語言（*style sheet language*）：它能讓你在 HTML 文件中的元素（element）上套用不同的頁面樣式（style）。例如, 當想要將 HTML 頁面上所有段落元素（paragraph elements）裡的文字**全部**轉換成紅色，你會在 CSS 裡寫:

```css
p {
  color: red;
}
```

試看看在你的編輯器上建立新的檔案 `style.css` 並貼上這三行 CSS 程式碼，並存到你的`styles` 目錄。

但我們還需要把 CSS 套用在 HTML 文件上。否則 CSS 的樣式效果，不會在瀏覽器的 HTML 檔案顯示。（如果你還未跟上我們的專案，請閱讀 Dealing with files 和 HTML basics 以找出你需要什麼）

1. 打開 `index.html` 文件，然後將下面一行貼到 head，也就是 `<head>` 和 `</head>` 標籤之間。

```html
<link href="styles/style.css" rel="stylesheet" type="text/css" />
```

2. 存檔 `index.html` 並且在瀏覽器載入。你應該可以看到下面的頁面。

![A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.](/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-styled.png)如果你的段落文字現在變成紅色, 恭喜, 你已經成功撰寫你的第一份 CSS！

### 解析 CSS ruleset

讓我們深入解析下列的 CSS：

![](/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics/css-declaration-small.png)

整個架構我們稱為規則集 **(rule set)，或是簡稱為規則 (rule)** 也可以。（也注意名字裡面的單獨部分）

選擇器（Selector）

在這個規則的最前頭為 HTML 的元素名。它將決定你 HTML 裡什麼元素將被你接下來的設定影響（在這個範例中,就是 段落元素 `p`）。若要改變欲影響的元素，只要更改選擇器就行了。

宣告（Declaration）

單一個規則，例如 `color: red;` 指定了這個元素的呈現樣貌。

屬性 (Properties)

修改屬性是改變你 HTML 元素的一種方法 . (在這範例中, `color` 是段落（`p`）元素的一種屬性.) 在 CSS 中, 你可以選擇哪些屬性用來影響 rule.

屬性值 (Property value)

**屬性值** 就是位於屬性右邊，在冒號（`:`）之後，從眾多的可能樣式選出一個給予屬性（範例中就是從眾多的 `color` 樣式中選出 `red`）

注意語法其他重要的部分：

* 每一個規則當中，除了選擇器名稱以外，其他都必須被大括號（`{}`）給包住.
* 在每一個宣告裡面，屬性跟屬性值之間必須用冒號(`:`) 做區分。
* 在每一個規則裡面可以包含有許多宣告，但不同的宣告之間必須使用分號 (`;`) 來區分。

下面是一個簡單的 CSS 規則範例。注意每個宣告都是以冒號(`:`)來指定屬性值，並且宣告之間都是以分號做區分 (`;`) 。

```css
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}
```

### 選擇多個元素

你可以選擇數種元素（elements）並同時用在同一個 rule set 上。可以用逗號（,）包含數個選擇器，如：

```css
p,
li,
h1 {
  color: red;
}
```

### 選擇器的不同類型

選擇器有很多種類。到目前為止，我們只看到了**元素選擇器（element selector）**，它選取了指定 HTML 檔案下的所有選定元素。不過，我們還有更多選擇器。以下有一些常見類型：

| 選擇器名 | 選取/控制什麼 | 範例 |
| --- | --- | --- |
|
 元素選擇器，有時也稱作標籤或類型選擇器（Element selector、tag or type
 selector)
  | 指定所有 HTML 元素中的特定元素 | `p`選取 `<p>` |
| ID 選擇器（ID selector） | 指定頁面上的特定 ID 元素（單一 HTML 頁面中，每個 ID 只能綁定一個元素） | `#my-id`控制 `<p id="my-id">` 或
 `<a id="my-id">` |
| Class 選擇器（Class selector） |
 指定頁面上的特定 class 元素（單一 HTML 頁面中，class
 屬性可以被多個元素使用）
  | `.my-class`控制
 `<p class="my-class">` 與
 `<a class="my-class">` |
| 屬性選擇器（Attribute selector） | 指定頁面上的特定屬性元素 | `img[src]`控制
 `<img src="myimage.png">` 但不控制
 `<img>` |
| 虛擬 class 選擇器（Pseudo-class selector） | 在特定的情況下，指定頁面的元素，例如懸停時。 |
`a:hover`控制 `<a>`,
 但只有在滑鼠游標停留在連結上時.
  |

還有很多值得探索的選擇器，你可以在我們的選擇器導引章節 Selectors guide (en-US) 看到更多介紹。

文字與字體
-----

現在我們已經瀏覽過一些 CCS 的基礎，接下來我們開始增加更多的規則和資訊到我們的 style.css 檔案，讓我們範例中的字型和文字看起來更好.

1. 第一步, 我們回到 output from Google Fonts 找到你存的字體。 加上 `<link ... >` 這個元素在你的 `index.html`文件裡的 head 中（在 `<head>` 跟 `</head>` 任何位置中）。
 這一段 code 將頁面連結到樣式表，將 Open Sans 字體系列與網頁一起下載，並讓你在 HTML 元素上使用自己的樣式表進行設置。 它看起來會像:

```html
<link
 href="http://fonts.googleapis.com/css?family=Open+Sans"
 rel="stylesheet"
 type="text/css" />
```

2. 下一步, 刪除`style.css文件中`其他現有的字體。這是個很好的嘗試, 但紅色字體看起來真的有點醜。
3. 把下面這行加在這個地方, 取代 placeholder line with the actual `font-family` line you got from Google 字體. (`font-family` 是指你想在文件中使用的字體.)
 這規則
 此規則首先為頁面設置整體的基本字體和字型(因 `<html>` 是整個頁面的父元素, 頁面中所有的元素會繼承同樣的字體和字型):

```css
html {
  font-size: 10px; /\* px means 'pixels': the base font size is now 10 pixels high \*/
  font-family: placeholder: this should be the rest of the output you got from Google fonts
}
```

**備註：** 我已增加了對於 "px" 的說明在上面. 任何在 CSS document 中 `/*` `*/` 內的文字是 **CSS 說明**, 瀏覽器在編譯時會忽略掉. 這是一個可以用來說明你做了什麼的幫助訊息.
4. 現在我們將會在 HTML body 中為包含文字的元素設置字體大小，`<h1>`,`<li>`,`<p>`。我們也設置標題居中，並在正文內容上設置一些行高和間距，使其更具可讀性

```css
h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
```

你可以依自己喜好修改 `px` 的值。你目前的工作成果可能如下圖所示：

![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](/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-font-small.png)

CSS：和塊（box）密不可分
---------------

當你在編寫 CSS，設定尺寸、顏色及位置時，你會發現它有著如同箱子（塊，box）的概念。多數在網頁上的 HTML 元素就像是箱子一般相互堆疊而成。

![a big stack of boxes or crates sat on top of one another](/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics/boxes.jpg)

CSS 佈局主要基於「box 模型」。在頁面空間的每個 box 都有下列屬性：

* `padding:`內容周圍的空格（例如，段落文字周圍）
* `border:` 位於矩形內容外部的實線
* `margin:` 元素外部的空間

![three boxes sat inside one another. From outside to in they are labelled margin, border and padding](/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics/box-model.png)

在本節中，我們還使用：

* `width:`（元素的寬度）
* `background-color:`元素內容和矩形內容後面的顏色
* `color:` 元素內容的顏色（通常是文字）
* `text-shadow:`在元素內的文字上設置陰影
* `display:` 設置元素的顯示模式（後面會詳細介紹）

所以，讓我們開始對我們的頁面添加更多 CSS！繼續將這些新規則添加到`style.css`頁面底部，不需要害怕多方嘗試去改值設定來了解結果。

### 改變頁面顏色

```css
html {
  background-color: #00539f;
}
```

這條規則將會套用到整個頁面的背景顏色。根據你在規劃網站時選擇的顏色修改其中的顏色代碼。

### 設定 body 的風格（styling）

```css
body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}
```

接下來修改 `body` 元素。以下依序介紹一些常見的宣告：

* `width: 600px;` — 將 body 寬度固定為 600 像素
* `margin: 0 auto;` — When you set two values on a property like `margin` or `padding`, the first value affects the element's top **and** bottom side (make it `0` in this case), and the second value the left **and** right side (here, `auto` 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 here (en-US).
* `background-color: #FF9500;` — 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 `html` element. Go ahead and experiment. Feel free to use `white` or whatever you like.
* `padding: 0 20px 20px 20px;` — 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.
* `border: 5px solid black;` — this simply sets a 5 pixel wide solid black border on all sides of the body.
### 設定我們主要頁面標題的位置（Positioning）和風格（styling）

```css
h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}
```

You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some **default styling** to the `<h1>` (en-US) 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 `margin: 0;`.

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.

One rather interesting property we've used here is `text-shadow`, which applies a text shadow to the text content of the element. Its four values are as follows:

* The first pixel value sets the **horizontal offset** of the shadow from the text — how far it moves across: a negative value should move it to the left.
* The second pixel value sets the **vertical offset** of the shadow from the text — how far it moves down, in this example; a negative value should move it up.
* The third pixel value sets the **blur radius** of the shadow — a bigger value will mean a more blurry shadow.
* The fourth value sets the base colour of the shadow.

Again, try experimenting with different values to see what you can come up with.

### 把圖像置中

```css
img {
  display: block;
  margin: 0 auto;
}
```

Finally, we'll center the image to make it look better. We could use the `margin: 0 auto` trick again as we did earlier for the body, but we also need to do something else. The body element is **block level**, 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 **inline** elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using `display: block;`.

**備註：** Don't worry if you don't yet understand `display: block;` 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 display reference page (en-US).

結論
--

看完了以上的介紹並依照各個步驟實做，你應該能自己寫出這樣的網頁（如下， view it here):

![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.](/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-final.png)

如果哪裡卡關了，你可以隨時造訪 Github 上的 finished example code ，看看裡面的 code 和你寫的哪裡不同。

這篇文章觸及的是非常基本的 CSS 介紹，若你有興趣想進一步了解，歡迎參考 CSS Learning topic。

* 前頁
* Overview: Getting started with the web
* 次頁


網路如何運作 - 學習該如何開發 Web

網路如何運作
======

* 前頁
* Overview: Getting started with the web

*〈網路如何運作〉將簡單介紹*，當你透過電腦或手機瀏覽器瀏覽網頁時，究竟發生什麼事。

短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。

用戶與伺服器
------

連接到網路的電腦稱為**用戶端**（client）與**伺服器端**（server）。彼此的連結原理如圖所示：

![](/zh-TW/docs/Learn/Getting_started_with_the_web/How_the_Web_works/simple-client-server.png)

* 用戶端是網路用戶的典型上網設備（像是連到 Wi-Fi 的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是 Firefox 或 Chrome 之類的瀏覽器）。
* 伺服器端是放著網頁、網站、或者 app 的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。
百寶箱的其他魔法
--------

剛剛描述的用戶/伺服器端還不是一切，我們還要講述其他部份，才能說完整個故事。

現在把網路想像成一條大道。大道的一端是用戶端，就像你家一樣；另一端則是伺服器，就像是你要去血拼的商店。

![](/zh-TW/docs/Learn/Getting_started_with_the_web/How_the_Web_works/road.jpg)

除了用戶與伺服器之外，我們還需要和這些朋友們打招呼：

* **網路連線**：讓你可以在網路傳送與接收資料。基本上就像是家裡到商店一樣。
* **TCP/IP**：傳輸控制協定和網際網路協定（Transmission Control Protocol and Internet Protocol）是定義資料如何在網路通行的通訊協定。這就像是方便你去商店買東西的交通工具。在這裡本例中，這就像是車子、腳踏車、或其他你想得到的交通工具。
* **DNS**：網域名稱系統（Domain Name Servers）就像是網站的電話簿。當你在瀏覽器輸入網址時，瀏覽器會在取得網站前，先去看 DNS 以查到網站的真實地址。瀏覽器需要找到哪個伺服器在託管指定的網站、這樣才能把 HTTP 訊息傳送到對的地方（可以參考下文）。這就像你在去商店前會先翻開電話簿，才好去商店一般。
* **HTTP**超文本傳輸協定（Hypertext Transfer Protocol）是定義用戶端語言，和伺服器如何對話的應用協議。可以想成你買東西時會用來溝通的語言。
* **Component files**：網站由許多不同的文件組成，如同商店內許多不同的商品。這些檔案分為以下類型：
    + **程式檔**：網站主要是由 HTML、CSS、JavaScript 建立，雖然你知會看到其他工具或技術。
    + **Asset**：這是構成網站其他內容的集體名稱，裡面可能包含圖像、音樂、影片、Word、PDF……之類的。
所以我說到底發生了啥？
-----------

當你在瀏覽器輸入網址時（你可以想像說自己要走去商店時）：

1. 瀏覽器會先去 DNS 伺服器尋找託管網站的伺服器，其真實位置所在（如同你去尋找商店的地址）
2. 瀏覽器向伺服器傳送 HTTP 訊息，請求伺服器向用戶端傳送網站的複本（如同去商店下訂單）。在用戶端及伺服器的之間，請求訊息與其他資訊，會使用 TCP/IP 在網路連線之間傳送。
3. 伺服器如果允許用戶端請求，伺服器就會傳送「200 OK」訊息，意味著「好，你可以閱覽這個網站，那我給你網站資料囉～」並開始對瀏覽器以一小串稱作「資料封包」的組合形式，傳送網站的檔案。這就像是商店給你商品，你接著把它們都帶回家一樣
4. 瀏覽器把一小塊一小塊的東西，組合成完整的網站，並把它呈現起來－－商品送到家門口後，閃亮亮的新貨在你眼前，超棒的啦！
講講 DNS
------

真正的網址，並不是在瀏覽器的網址列上，輸入好記好讀的字串，就能找到你最愛的網站。它們其實是一串特殊的數字，看起來就像是這樣：63.245.215.20

這叫做 IP 地址，網路上它擁有獨一無二的位置。不過，記數字果然不簡單吧？這就是要發明域名伺服器的原因。他們會把你在瀏覽器輸入的網址（例如 mozilla.org）和網站的真實位置（IP）相匹配

網站能直接透過其 IP 位置訪問之：在瀏覽器的網址列輸入 `63.245.215.20` 的話，可以走到 Mozilla 的網站。你可以使用 DNS 查找工具查找網站的 IP 地址。

再講講封包
-----

稍早我們用了「封包」來描述從伺服器傳到用戶端的資料格式。這裡的「封包」是什麼意思呢？通常資料在網路傳送時，會傳送上千個小資料，這樣在同一時間和同一網站，才能有很多用戶下載內容。如果網站只傳送一個大傢伙過去，那在同一時間就只能有一個用戶能下載，網路會變得很慢、很無聊...

參見
--

* How the Internet works (en-US)
* HTTP — an Application-Level Protocol
* HTTP: Let's GET It On!
* HTTP: Response Codes
製作群
---

街頭的照片：Street composing、作者是Kevin D。

* 前頁
* Overview: Getting started with the web


你的網站看起來會是什麼樣子？ - 學習該如何開發 Web

你的網站看起來會是什麼樣子？
==============

* 前頁
* Overview: Getting started with the web
* 次頁

\*你的網站看起來會是什麼樣子？\*會說明你該為網站做的規劃與設計，決定自己的「網站該提供哪些資訊？」、「該使用哪些字型與色彩？」，以及「網站又該達到哪些目的？」

首要：規劃
-----

做任何事之前都需要一些想法。你的網站要達到哪種目的？任何 1 個網站均具備基本作用，但首先你應該保持簡單。我們要先寫出包含了標題、圖像，以及數段文字的簡單網頁。

開始之前，請你先回答下列問題：

1. \*\*你網站的主題為何？\*\*你喜歡貓貓狗狗？想寫城市遊記？或你愛打電動呢？
2. \*\*你對某個主題所提供的資訊到哪種程度？\*\*寫個標題加上幾段文字，或是在網頁上加個圖片。
3. 簡單的問：\*\*你網站的外觀為何？\*\*背景顏色？哪種字型比較合適？一般字型？卡通化的字型？又粗又大的字體？還是要纖細淡化的文字呢？

**備註：** 複雜專案就需要更詳細的建構指南，包含所用的顏色、字型、物件之間的留白空間、適合的書寫風格，等等。這些要素有時會統整為設計指南或品牌手冊，你可參閱〈Firefox OS Guidelines〉進一步了解。

從頭設計
----

接著就是拿紙筆，概略畫出你理想的網站外觀。對自己的第一個簡易網頁，不需考量太多要素或畫得太仔細，應該先養成這個勾勒草圖的習慣。不是要你變成梵谷或畢卡索，但對你以後絕對有幫助！

![](/zh-TW/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/website-drawing-scan.png)

**備註：** 即便是實際的複雜網站，設計團隊也都會先在紙上勾勒草圖，再接著透過圖檔編輯器或 Web 技術弄出數位版的草稿。

Web 團隊往往編制了圖像設計師與使用者經驗 (en-US) (User Experience；UX) 設計師各 1 名。圖像設計師當然是負責整合網站的視覺效果；較屬抽象角色的 UX 設計師則要確定使用者與網站的互動方式。

選擇網頁風格
------

現在開始組合你想在網頁上呈現的內容。

### 文字

你應該已經準備好了一些文章並分好段落。

### 主題色彩

可透過選色工具找到你喜歡的顏色。當你點擊其中一種顏色，就會看到如下圖「`#660066`」的 6 位數字，此即代表該顏色的十六進位 (Hexadecimal) 色碼。請另外找個地方記錄此色碼。

![](/zh-TW/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/color-picker.png)

### 圖片

可透過 Google 的圖片搜尋找到適合的圖片。

1. 找到你想要的圖片時，點選該圖片。
2. 按下「查看圖片」按鈕。
3. 接著在圖片上點擊滑鼠右鍵 (Mac 則是 Ctrl + click)，選擇「將圖片另存新檔...」，將圖片儲存到你熟悉的位置。或是可複製瀏覽器網址列中的網址，以待往後使用。

![](/zh-TW/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images.png)

**備註：** 在網路上可找到的大多數圖片，包含 Google 圖片服務在內，都已註冊了著作權。為了避免自己可能違反著作權法，你可以透過 Google 的授權篩選功能。只要點擊「**搜尋工具**」再找到「**使用權限**」即可：

![](/zh-TW/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images-licensing.png)

### 字型

選用自己喜歡的字型：

1. 到 Google Fonts 上捲動清單，直找到你喜歡的字型。你也可以使用左邊的控制功能先行篩選。
2. 點擊你想要的字型旁邊「Add to collection」按鈕。
3. 點擊頁面底端的「使用 (Use)」按鈕。
4. 進入下一頁，捲動到區塊 3 與區塊 4，將 Google 顯示的程式碼複製到你的文字編輯器中，儲存以待稍後利用。
* 前頁
* Overview: Getting started with the web
* 次頁


安裝基本軟體 - 學習該如何開發 Web

安裝基本軟體
======

* Overview: Getting started with the web
* 次頁

在本文中，你會知道有哪些 Web 開發的簡易工具，以及正確的安裝方式。

專家都用哪些工具？
---------

* **電腦**，這東西對某些人來說再合理不過了，但可能有人用自己的手機，或在圖書館電腦上讀這篇文章。若要真正著手開發 Web，最好還是弄一台桌電或筆電（Windows、Mac、Linux 都行）。
* **文字編輯器**，用來寫程式碼。可以是文字編輯器（如 Visual Studio Code、Notepad++、Sublime Text、Atom、GNU Emacs、VIM）、也可以是混合式編輯器（如 Dreamweaver 或 WebStorm）。辦公室軟體的文件編輯器並不適合，因為它們依賴許多會干擾瀏覽器排版引擎的隱藏元素。
* **Web 瀏覽器**，可測試寫好的程式碼。目前最常用的瀏覽器有 Firefox、Chrome、Opera、Safari、Internet Explorer 與 Micrososft Edge。你也可以測試自己網站在行動裝置上呈現的效果，若目標讀者分佈甚廣，你可能必須用舊版瀏覽器（如 IE 6–8）測試。
* **圖像編輯器**，如 GIMP、Paint.NET、Photoshop 都可用來為自己的網站添增圖案。
* **版本控制系統**，可讓團隊用以協作某個專案、分享程式碼與外部檔案，更可避免編輯作業發生衝突、還可以管理伺服器的檔案。目前 Git 是最常見的版本控制工具；GitHub 與 GitLab 則是最常用的程式碼分享服務。
* **FTP 程式**，可將網頁上傳至比較老的網路託管伺服器，以利使用者檢視 ── 前述的 Git 近年來漸漸取代了 FTP── 可用的 (S)FTP 程式有 Cyberduck、Fetch、FileZilla。
* \*\*自動化系統，\*\*如 Grunt 或 Gulp 可自動執行重複性的作業，例如縮減程式碼並執行測試作業。
* 範本、函式庫、框架......等等，都能加速寫出一般功能。
* 及其他更多工具！
我實際需要、立刻需要哪些工具？
---------------

上面一長串看起來好像很嚇人，但其實剛接觸 Web 開發時，不需了解所有的東西。我們先幫你設定最低限度的必要工具：文字編輯器和幾款主流瀏覽器。

### 安裝文字編輯器

你的電腦裡很可能已經提供基本的文字編輯器了。Windows 本身就有記事本；OS X 已提供文字編輯；Linux 各版本不太一樣：例如 Ubuntu 就有 gedit。

而針對 Web 開發，其實有著比 Notepad 或 TextEdit 好很多的工具。我們推薦使用 Visual Studio Code，因為這個自由編輯器有提供即時預覽、以及程式碼提示。

### 安裝常用瀏覽器

目前我們會安裝數款 Web 瀏覽器的桌面版，以利測試我們所寫的程式碼。先在下方找到自己所用的作業系統，再點擊你愛用的瀏覽器連結：

* Linux：Firefox、Chrome、Opera、Brave。
* Windows：Firefox、Chrome、Opera、Internet Explorer、Micrososft Edge、Brave。（Edge 是 Windows 10 的預設瀏覽器；如果你用的是 Windows 8 或之後版本，可以安裝 IE 10 或更高版本；否則應安裝其他瀏覽器替代）
* macOS：Firefox、Chrome、Opera、Safari、Brave。（Safari 是 iOS 與 OS X 的預設瀏覽器）

在著手開發之前，應先安裝至少兩款瀏覽器以利後續測試。

**備註：** Internet Explorer 與當今的 web 不相容，可能會讓專案跑不動。

### 安裝伺服器軟體

有些例子需要使用伺服器軟體。你可以在 How do you set up a local testing server? (en-US) 找到作法。

* Overview: Getting started with the web
* 次頁


HTML 基礎 - 學習該如何開發 Web

HTML 基礎
=======

* 前頁
* Overview: Getting started with the web
* 次頁

HTML（**H**ypertext **M**arkup **L**anguage），中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成，可能包含了段落、清單、圖片或表格...等。透過這篇文章，希望能幫助大家對 HTML 及其功能有基本的認識。

HTML 到底是什麼？
-----------

HTML 是一種*標記語言*（markup language），而非一般熟知的程式設計語言；它會告訴瀏覽器該如何呈現你的網頁 ── 單純簡易或是極其複雜的頁面都沒問題。HTML 包含了一系列的**元素**，而元素包含了標籤 (en-US)與內容，我們用標籤來控制內容的呈現樣貌，例如字體大小、斜體粗體、在文字或圖片設置超連結等。舉例來說，請看看以下這個句子：
```

My cat is very grumpy
```

如果我們想讓這個句子自成一個段落，那麼可以在它前後分別加上段落標籤（`<p>` (en-US)），它就變成一個段落元素了：

```html
<p>My cat is very grumpy</p>
```

### HTML 元素的組成

讓我們來仔細的觀察一下，內容、標籤和元素的關係：

![](/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-small.png)

我們可以看到基本的架構：

1. **起始標籤**：先打角括弧，也就是大於、小於的符號「< >」，裡面再放入元素名稱，如上面的例子「<p>」。起始標籤代表這個元素從這裡開始。
2. **結束標籤**：與起始標籤一樣，只是在元素名稱前面多了個*前置斜線*「/」。很容易理解地，內容的最後加上結束標籤，代表這個元素的尾端。在寫 HTML 時，很容易忘了最後的結束標籤，提醒大家要多注意唷！
3. **內容**：這個元素的內容，以上面的例子來說，內容就是這句文字。
4. **元素**：由起始標籤、結束標籤、內容所組成。

元素還可以有「屬性（Attribute）」，請大家看看下面的例子：

![](/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-attribute-small.png)

屬性能提供更多的資訊（當然，這個資訊是幫助我們更有效及方便編輯，不會呈現在網頁上），屬性包含了屬性名稱與值，你可以利用屬性設定這個元素的色彩、對齊方式、圖表的格線等等。

屬性的組成包含：

1. 在元素名稱和屬性之間有一個空格（如果有多個屬性，屬性之間也需要有空格）
2. 屬性名稱後面接著等於符號「=」
3. 屬性包在起始標籤裡面，如範例所示
### 巢狀元素

元素裡面可以在放進元素，我們稱之為「**巢狀元素（nesting element）**」。例如這個句子：「我的貓有夠無敵臭臉」，若你想強調「有夠無敵」，我們就可以把「有夠無敵」這四個字自成一個顯示為粗體的元素 `<strong>` (en-US) :

```html
<p>My cat is <strong>very</strong> grumpy.</p>
```

要注意的是，每個元素都有自己的起始和結束標籤，一層一層的包覆。所以最外層是<p> ，接著<strong> ；先結束 strong 元素，所以先寫</strong>，最外面才是 </p>。

```html
<p>My cat is <strong>very grumpy.</p></strong>
```

如果元素的起始和結束標籤錯置（如上方），那麼瀏覽器只能自行判斷你想呈現的樣子，可能會完全不如預期！所以在做巢狀元素時要多注意唷！

### 空元素

有些元素沒有內容，我們稱為「**空元素（empty element）**」。 以這個圖片元素 `<img>` (en-US) 為例：

```html
<img src="images/firefox-icon.png" alt="My test image" />
```

它有兩個屬性，但是沒有結束標籤，也沒有裡面的內容。因為圖片元素是直接把圖檔嵌在 HTML 網頁上。

### HTML 文件的架構

讓我們來看看一個完整的 HTML 頁面它所包含的要素（以下範例的程式碼出自這篇文章：Dealing with files）：

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>
```

我們可以看到：

* `<!DOCTYPE html>` — 文件類型（doctype）。 在 HTML 發展初期（約莫 1991/2 的年代）文件類型是用來連結一些應遵守的規則，有點像自動校正的功能。然而，現在大家其實不太管文件類型，它就是個必須放在程式碼中的東西，現階段大家只需要知道這點就夠了。
* `<html></html>` — `<html>` 元素，又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。
* `<head></head>` — `<head>` 元素，裡面放的是你想涵括的重要資訊，但**不會顯示於網頁瀏覽者眼前的**。例如，顯示於搜尋結果的關鍵字、頁面說明、CSS、字元實體集...等。
* `<body></body>` — `<body>` 元素，包含了**所有會顯示於網頁瀏覽者眼前的內容。** 無論是文字、圖片、影面、互動遊戲...等。
* `<meta charset="utf-8">` — 這個元素指定了你的文件使用 utf-8 這種字元編碼， 建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。
* `<title></title>` — 呈現於網頁瀏覽者眼前的網頁標題。
圖片
--

再讓我們複習一下圖片元素：

```html
<img src="images/firefox-icon.png" alt="My test image" />
```

如同我們前面提到，圖片元素是直接把圖檔嵌在 HTML 網頁上，它是透過圖片來源（`src`，source）這個屬性，提供了連到圖片檔案的路徑。

我們也可以加上 `alt`（alternative）這個屬性。在網頁瀏覽者無法正確看到圖片時，你希望對他們呈現什麼樣的說明文字。這種狀況會發生通常是因為:

1. 許多視能障礙的網頁瀏覽者，會使用「Screen Readers」這樣的工具，利用說明文字（alt text）來了解網頁要呈現的圖片內容。
2. 就是有些東西出錯了。例如，你誤植了圖片來源的路徑，你可能就會看到類似以下的文字：

![](/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics/alt-text-example.png)

說明文字應該要好好呈現這個圖片的內容，上面這個例子就很差。好的例子像是：「Firefox Logo：有一隻狐狸繞著地球」

**備註：** 你可以在 MDN's Accessibility landing page 查看無障礙頁面的資訊。

標記文字
----

這個段落將為大家介紹如何標記文字（讓這些文字如何呈現）。

### 文件標題

讓你呈現這些內容的主題，就像一本書有書名、章節名稱和副標題，一份 HTML 文件也有類似的概念。HTML 最多可以有六層的文件標題（heading），`<h1>` (en-US)–`<h6>` (en-US) ，雖然通常我們只使用 3 至 4 層：

```html
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
```

請試試在 `<img>` (en-US) 上方，加上合適的文件標題。

### 段落

如上面介紹過的，`<p>` (en-US) 元素包含文字段落，在呈現一般文字時，這是我們最常用到的。

```html
<p>This is a single paragraph</p>
```

**請試試在這裡*你的網站看起來會是什麼樣子？*的圖片（<img> 元素）下方，加上幾段文字。**

### 清單

清單（list）至少會包含兩個元素，以下是最常見的清單類，無順序性與有順序性的：

1. **無順序性清單**（Unordered list）代表這些項目的順序改變，不影響任何是，例如購物清單。項目會包含在 `<ul>` (en-US) 裡面。
2. **有順序性清單**（Ordered list）代表這些項目的順序是有意義的，例如食譜裡的製作步驟。項目會包含在 `<ol>` (en-US) 裡面。

每個項目則分別放在`<li>` (en-US) (list item) element 裡面。

例如，我們想把以下這段文字變成清單：

```html
<p>
  At Mozilla, we’re a global community of technologists, thinkers, and builders
  working together ...
</p>
```

寫法如下：

```html
<p>At Mozilla, we’re a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ...</p>
```

**請試試在練習網頁，加上一個清單。**

連結
--

連結（link）對於網頁來說是非常重要的。要加上連結，我們需要用到這個元素 — `<a>` (en-US) — *a* 代表了「anchor」。要讓文字變成連結的步驟如下：

1. 選擇一些文字，例如「Mozilla Manifesto」。
2. 把他們包在這個<a> 元素裡：

```html
<a>Mozilla Manifesto</a>
```

3. 在<a> element 中加上 href attribute 這個屬性：

```html
<a href="">Mozilla Manifesto</a>
```

4. 屬性質就是你要連結網址：

```html
<a href="https://www.mozilla.org/zh-TW/about/manifesto/"
 >Mozilla Manifesto</a
>
```

網址的開頭使用`https://` 或 `http://` （網路文字傳送標準的不同）可能會給你不一樣的結果。因此，在寫連結時，請自己先點擊過，確認無誤。

**請試試在練習網頁加上一個超連結。**

**備註：** `href` 這個屬性名稱比較不直觀，不太好記，但它代表的是：**h**ypertext **ref**erence 的縮寫。

結論
--

看完了以上的介紹並依照各個步驟實做，你應該能自己寫出這樣的網頁（如下， view it here):

![A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text](/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics/finished-test-page-small.png)

如果哪裡卡關了，你可以隨時造訪 Github 上的 finished example code ，看看裡面的 code 和你寫的哪裡不同。

這篇文章觸及的是非常基本的 HTML 介紹，若你有興趣想進一步了解，歡迎參考 HTML Learning page。

* 前頁
* Overview: Getting started with the web
* 次頁


何謂網路伺服器？ - 學習該如何開發 Web

何謂網路伺服器？
========

本文章將講解網路伺服器是什麼、如何運作、還有他們的重要性。

|  |  |
| --- | --- |
| 要求： |
 你要知道
 Internet 是怎麼運作的 (en-US)、並知道網頁、網站、網路伺服器的不同 (en-US)。
  |
| 目標： | 你將知道網路伺服器是什麼、並大致了解它的運作原理。 |

概要
--

「網路伺服器」（web server）可以指軟體、也可以指硬體、還可以指它們共同運作的狀態。

1. 以硬體來說，web server 是存放網路伺服器軟體、還有網站檔案（如 HTML 文件、圖片、CSS 樣式表、JavaScript 檔案）的電腦。它會連上網際網路（Internet）並能和其他連上網的設備做物理數據交換。
2. 以軟體來說，web server 包含了一連串控制網路用戶如何訪問託管檔案 ── 至少有 HTTP 伺服器 ── 的檔案。HTTP 伺服器是其中一個部份，它理解 URLs（網路地址）與 HTTP（瀏覽器用來觀察網頁的協議）。它能透過域名（domain name）訪問託管的網站（如 `mozilla.org`）、並將其內容遞送到終端用戶（end-user）的設備上。

以最基本的層面來說，如果瀏覽器需要網路伺服器所託管的檔案，它就需要透過 HTTP 發送對該檔案的請求。如果請求已經傳送到正確的（硬體）網路伺服器，那 HTTP（軟體）伺服器就會接受請求、找出所請求的文件（假若不是接著回傳 404 頁面）、再透過 HTTP 回傳給瀏覽器。

![Basic representation of a client/server connection through HTTP](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server/web-server.svg)

要發布網站，你需要一個靜態或動態的網路伺服器。

**靜態網路伺服器**（static web server）、或是 stack，由（硬體的）電腦和（軟體的） HTTP 伺服器組成。之所以稱為「靜態」是因為伺服器只會給你的瀏覽器，傳送「事先寫好的」（as-is）檔案。

**動態網路伺服器**（dynamic web server）除了靜態網路伺服器以外、還附加了一些軟體：通常是應用伺服器（application server）與資料庫（database）之所以稱為「動態」是因為：應用伺服器會在託管檔案，透過 HTTP 伺服器傳送到瀏覽器之前更新之。

例如說，要生成瀏覽器看到的最終網頁，應用伺服器會使用從資料庫讀取資料的 HTML 模板（HTML template）填補之。像 MDN 或維基百科（Wikipedia）這樣的網站也有上千個網頁：但它們全都不是「真的」HTML 文件，而是少數的 HTML 模板、還有龐大的資料庫。如此一來，要維護並傳送資料、都會變得很容易。

主動學習
----

*目前還沒有好用的內容。請考慮貢獻一下。*

深入一點……
------

如同我們講過的：要取得網頁，瀏覽器會向伺服器發送一個在伺服器內，尋找某個檔案的請求。如果伺服器找到了檔案，就會讀取它、按需求處理、並回傳檔案。讓我們逐步檢視它們。

### 託管檔案

首先，網路伺服器要儲存網站檔案，也就是所有 HTML 文件、和附屬的 asset：asset 包含了圖片、CSS 樣式表、JavaScript 檔案、字型檔、還有影片。

技術上來說，你可以把它們都放在自己的電腦裡面，但放在網路伺服器上面會方便許多，理由是伺服器：

* 永遠開機並運轉
* 永遠連上網際網路
* 永遠都有相同的 IP 地址（不是所有網際網路提供者 (en-US)都給家庭用戶提供固定的 IP 地址）
* 由第三方提供者維護

因此，找到優秀的託管提供者，是建立網站的重點之一。好好探索各大公司提供的服務、並選擇一個符合需求、預算也能負擔的方案（服務的價格從免費到上千美元都有）。你可以在這篇文章 (en-US)找到更多資訊。

一旦找到適合的網絡託管解決方案，你只要把文件上傳到網路伺服器 (en-US)就行了。

### 透過 HTTP 溝通

接下來，網路伺服器會支援 HTTP（**H**yper**t**ext **T**ransfer **P**rotocol，超文本傳輸協議）。顧名思義，HTTP 會指定兩台電腦之間，該如何傳送超文本（例如 linked web document）。

協議（Protocol）是一套兩台電腦間該如何溝通的規則。HTTP 是文本性、無狀態的協議。

文本性（Textual）

所有指令都是純文字、人類也容易理解。

無狀態（Stateless）

無論伺服器還是瀏覽器，都不會記得他們上一次的溝通。像是伺服器，如果只依賴 HTTP 的話，它就不會記得你輸入的帳號密碼、或是在交易中採取了哪些步驟。要完成這樣的任務，你需要應用伺服器（我們將在其他文章中介紹這種技術）。

HTTP 提供了用戶端與伺服器端，該如何溝通的明確規則。我們將在之後的技術文章內講解 HTTP 本身。目前，我們會先聚焦在：

* 只有用戶端能發出 HTTP 請求，也只有伺服器能接受它。相對地，也只有伺服器能回應用戶端的 HTTP 請求。
* 如果透過 HTTP 請求檔案，用戶端必須提供檔案的 URL。
* 網路伺服器**必須回應**所有的 HTTP 請求，最起碼需要回應錯誤訊息。

![MDN 404 錯誤頁面範例](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server/mdn-404.jpg) 在網路伺服器裡面，HTTP 伺服器負責處理和回答傳入的請求。

1. HTTP 伺服器接收請求後，會先檢查請求的 URL 是否匹配現有文件。
2. 如果匹配，網路伺服器會把檔案內容回傳給瀏覽器。不然，應用伺服器會建立需要的檔案。
3. 如果都沒有用的話，網路伺服器會回傳錯誤訊息給瀏覽器，最常見的就是「404 Not Found」。（這個錯誤很常見，所以許多網頁設計師花了相當多的心力設計 404 錯誤頁面。）
### 靜態與動態內容

大略上來說，伺服器能儲存動態與靜態的內容。「靜態」是指「提供事先寫好的」。靜態網站設定上最簡單，所以我們建議選擇靜態內容，作為你的第一個網站。

「動態」指的是伺服器處理內容、甚至從資料庫即時產生。這個解決方案提供了更多靈活性，但技術會變得難以駕馭、令網站明顯複雜許多。

以你目前閱讀的頁面為例。在託管的伺服器裡面，有個應用伺服器會從資料庫取得內容、規範化、再把它塞進某些 HTML 模板裡面。這裡的應用伺服器，是以 Python 語言的 Django 框架為基礎，所組建的 Kuma。Mozilla 團隊基於 MDN 的特殊需求開發了 Kuma，不過也有很多相似、但使用其他技術的應用程式。

從海量的應用伺服器裡面選一個推薦，是個大難題。有些應用程式會迎合特定的類別，如部落格、百科、電子商務。其他還有更通用的 CMS（content management systems，內容管理系統）。如果要建立動態網站，花點時間找個符合需求的工具。除非想學習伺服器端程式設計（也是個扣人心弦的領域！），否則不用建立屬於自己的應用伺服器。那樣只是在重造輪子。

下一步
---

熟悉了伺服器以後可以：

* 讀讀how much it costs to do something on the web (en-US)
* 了解various software you need to create a website (en-US)
* 移駕到how to upload files on a web server (en-US)之類的實戰。


跨瀏覽器測試 - 學習該如何開發 Web

跨瀏覽器測試
======

此模組專注於測試網路專案的跨瀏覽器領域。在此，我們會辨認你的目標閱聽者（例如你最該對什麼樣的用戶、瀏覽器、還有設備操心？）如何做測試、不同類型的程式碼會碰上的主要問題、如何解決/減輕這些問題、哪些工具最能幫你測試和修復問題、還有如何用自動化加速測試。

先決條件
----

在使用文章所述的工具前，你應該確實理解 HTML、CSS、JavaScript 核心語言的基本。

指引
--

跨瀏覽器測試介紹 (en-US)

這篇文章將透過給予跨瀏覽器測試概覽重點、回答諸如「何謂跨瀏覽器測試？」、「你最有可能碰上什麼問題？」、「測試、找出、並解決錯誤的主要方法有哪些？」的問題，以作為模組的開頭。

測試進行策略 (en-US)

接著，我們將針對測試執行深入研究、確定目標受眾（像是什麼瀏覽器、設備、或其他需要確認的地方）、低測試策略（low fi testing strategies，讓自己取得需要的設備、虛擬機、還有 adhoc 測試）、進階測試策略（自動化以及使用專用工具）、還有用戶群組間的測試。

處理常見的 HTML 與 CSS 問題 (en-US)

在這裡，我們將關注可能遇上的，常見跨瀏覽器 HTML 與 CSS 程式相關問題，還有能預防或修復淺在問題的工具。這裡面會有語法標示（linting code）、CSS 前輟處理、使用瀏覽器工具找出問題、使用 polyfill 支援瀏覽器、處理響應式網頁問題...等等。

處理常見的 JavaScript 問題

我們會開始觀察常見的跨瀏覽器 JavaScript 程式問題，以及修復的辦法。使用瀏覽器工具追蹤並解決問題、使用 Polyfill 與函式庫解決問題、在老舊瀏覽器實作新功能...等等。

處理常見的無障礙問題 (en-US)

我們要關注無障礙網頁，並提供常見問題的資訊、如何簡易測試、還有使用檢測/自動化工具，以排查無障礙問題。

功能檢測實做 (en-US)

功能檢測牽涉到確定瀏覽器是否支持某個程式碼，是否依賴他執行不同的程式碼，以便部分瀏覽器能提供可執行的體驗，而不是直接崩潰/錯誤。本文詳細介紹如何編寫自己的簡單功能檢測，如何使用函式庫來加速實現，以及用於功能檢測的本機功能，例如 `@supports`。

自動化測試介紹

每天在好幾個瀏覽器與設備上，運行手動測試數次，既乏味又浪費時間。要有效率的處理這種事，就要開始熟悉自動化工具。我們會在這篇文章看看有哪些可用的工具、如何使用它們、以及如何使用如 Sauce Labs 與 Browser Stack 的商業化瀏覽器測試程式之基本講述。

設定你的自動化測試環境 (en-US)

我們會在這篇文章教你如何安裝自己的自動化測試環境、並透過 Selenium/WebDriver 以及 Node 的測試函式庫如 selenium-webdriver 來跑你的測試。我們還會講測試環境如何與上篇文章所講述的商業軟體做整合。


理解 JavaScript 前端框架 - 學習該如何開發 Web

理解 JavaScript 前端框架
==================

JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師透過千錘百鍊的工具，建立擴展性高、互動性強的網路程式。多數公司也視 JavaScript 框架為重要的前端工具。因此多數前端工程師，會需要擁有前端框架的技能。

身為一位富有抱負的前端工程師，學習前端框架時，可能很難確定要從哪裡開始：五花八門的框架可供選擇、隨時還有新的框架出現。儘管大多數框架用途類似，但實作方法千變萬化。而在使用框架時，也需要考慮無數情形。

在這裡，我們旨在理解前端框架方面，提供舒適的學習曲線：我們不會詳細說明 React/ReactDOM 或 Vue 亦或其他特定框架的資訊。框架開發團隊早就針對這方面，寫出了詳細的文件。相反地，我們想先著重回答更基本的問題：

* 為什麼要用框架？它能解決什麼問題？
* 選用框架時要考慮哪些問題？或甚至，我需要框架嗎？
* 框架擁有什麼功能？一般來說他們怎麼作動，或實作方面有哪些不同？
* 這些框架與「Vanilla JavaScript」（譯註：Vanilla JavaScript 是指原生 JavaScript）或 HTML 有什麼關係？

之後，我們將針對坊間主要框架提供教學，以便提供足夠鑽研下去的背景資訊。我們希望以務實且不忘基本實做（如無障礙）的方法，來理解框架這回事。

**從「前端框架簡介」開始吧。**

先決條件
----

在理解前端框架前，你需要對 web 核心技術：HTML、CSS、以及最重要的JavaScript，擁有基本程度的理解。

如果理解構建框架的 Web 技術，你的程式會更豐富（richer）且更專業，同時也能更有信心地除錯。

概觀性教學
-----

1. 前端框架介紹

我們從整體概述來探討框架、提供 JavaScript 與框架的簡要歷史、框架存在的理由、他們提供什麼東西、如何決定選擇哪個框架、以及前端框架的的替代方案。

2. 框架的主要功能 (en-US)

大多數主要的 JavaScript 前端框架在更動 DOM、處理瀏覽器事件、還有提供良好的開發體驗方面，使出了不同的方法。這篇文章將探討「四大框架」的主要功能、看看他們如完成高層次工作、以及這四個框架的相異之處。

React 教學
--------

**備註：** 最近一次測試成功的 React 教學在 2020 年五月。版本為 React/ReactDOM 16.13.1 與 create-react-app 3.4.1。

如果想看看最新的程式，可以從我們的 todo-react repository 或互動性的 https://mdn.github.io/todo-react-build/ 看。

1. 開始學 React

在這裡我們將開始與 React 打招呼。我們將探索其背景和用途的一些細節、在自己的電腦建立 React 全家桶、還有建立與把玩簡單的程式，以理解 React 是怎麼跑的。

2. 建立我們的 React todo list

我們的任務是驗證 React 的概念（proof-of-concept）：我們將建立一個能讓使用者添加、編輯、刪除需要的工作，同時在不刪除工作的情況下，將它們標記為完成。本文將完成 `App` 組件的基本架構與樣式，以便為下個文章將探討的組件定義與響應性做準備。

3. 把 React app 組件化 (en-US)

現在，我們的 app 整個黏在一起了。在做其他事情前，最好把這個程式切成一個個能管理，描述性也好的組件（component）。React 本身對組件的定義不多：那是取決於你的考量！我們將展示如何以聰明的方法，把程式切成一個個組件。

4. 響應性 React：事件與狀態 (en-US)

在組件化以後，現在開始把原本靜態的 UI，能開始與我們實際互動，並修改資料吧。在這裡除了做這件事以外，我們還會深入探討事件和狀態。

5. 響應性 React：編輯、過濾、條件式過濾 (en-US)

在初學 React 之路即將結束前（至少從現在來說），我們將在 Todo list app 裡面，添加畫龍點睛的主要功能：包括編輯已存在的工作、透過給定條件過濾全部、已完成、或未完成的工作。我們將不斷探討條件式 UI 渲染。

6. React 無障礙 (en-US)

在教學最後，我們將削除最後的障礙：像是能增進可用性，同時降低鍵盤與螢幕報讀用戶困惑的 focus 管理。

7. React 的資源 (en-US)

最後的最後，我們將提供鑽研 React 所需的資源。

Ember 教學
--------

**備註：** 最近一次測試成功的 Ember 教學在 2020 年五月。版本為 Ember/Ember CLI 3.18.0。

如果想看看最新的程式，可以從我們的 ember-todomvc-tutorial repository 或互動性的 https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ 看。注意：部分功能沒有放在教學裡面。

1. 開始學 Ember (en-US)

首先我們將探討 Ember 的原理與用途，還有如何安裝 Ember 全家桶，建立簡單的 app，最後還有完成開發環境。

2. Ember app 架構與組件 (en-US)

In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.

3. 響應性 Ember：事件、類別、狀態 (en-US)

此時，我們將開始給 app 添加一些響應性，從而能夠添加和顯示新的待辦事項。在此過程中，我們將研究如何在 Ember 中使用事件，創建組件類以包含用於控制交互功能的 JavaScript 程式，以及設置服務來跟踪應用程序的資料狀態。

4. 響應性 Ember：Footer 功能、條件式渲染 (en-US)

現在是時候開始處理我們應用程序中的 Footer 功能了。在這裡，我們將更新待辦事項計數器，以顯示仍需完成的正確待辦事項數量，並將樣式正確應用於已完成待辦事項（即已選中復選框的位置）。我們還將連接「清除完成」按鈕。在此過程中，我們將學習在模板中使用條件式渲染的知識。

5. Ember 的路由 (en-US)

在本文中，我們學習了路由，有時也稱為基於 URL 的過濾。我們將使用它為三個 Todo 視圖（「全部」、「活動」、「已完成」）中的每個視圖提供唯一的 URL。

6. Ember 的資源與除錯 (en-US)

最後的最後，我們將提供鑽研 Ember 所需的資源，以及好用的相關資訊。

Vue 教學
------

**備註：** 最近一次測試成功的 Vue 教學在 2020 年五月。版本為 Vue 2.6.11。

如果想看看最新的程式，可以從我們的 todo-vue repository 或互動性的 https://mdn.github.io/todo-vue/dist/ 看。

1. 開始學 Vue

我們首先來介紹 Vue 吧。首先我們將聊聊 Vue 的背景、理解如何安裝新的專案、研究專案的整體架構與單一組件、如何讓專案在自己的電腦執行、並準備好建立一個新範例。

2. 建立第一個 Vue 組件

現在來開始鑽研 Vue 並建立第一個組件吧：我們將給 todo list 的各個單元建立獨立的組件。在此同時，我們將學習一些重要概念：比如說在組件內使用組件、透過 prop 傳送資料、還有儲存資料的狀態。

3. 渲染 Vue 組件的列表 (en-US)

現在我們已經有了一個能動的組件；現在將要給我們的 App 添加 `ToDoItem` 這個組件了。在這裡，我們將專精於如何給 `App.vue` 組件，添加一組 todo 的資料，接著使用 `v-for` 指令（directive）讓 `ToDoItem` 透過迴圈顯示出來。

4. 寫一個 todo 表單：Vue 的事件、方法、model (en-US)

我們已經放了一些資料，同時也透過迴圈把 `ToDoItem` 渲染出來了。接下來，我們將讓使用者輸入 todo 項目、同時需要文字 `<input>`、submit 之後的事件觸發、還有能控制資料的 model。這些就是我們會探討的重點。

5. 透過 CSS 樣式化 Vue 組件 (en-US)

我們的程式看起來終於要漂亮一點了。我們將探討如何透過 CSS 樣式化 Vue 組件。

6. 使用 Vue 的計算屬性 (en-US)

在這裡我們將使用 Vue 的計算（computed）屬性，加上一個 counter 已便顯示完成工作的數量。計算屬性的功能與 methods 類似，但它只會在資料更新時變動資料。

7. Vue 的條件式渲染：編輯已存在的待辦 (en-US)

現在來添加一個還沒探討到的重要功能吧：那就是編輯已經存在的項目。要完成這件事，我們將借用 Vue 在條件式渲染的長才——也就是 `v-if` 與 `v-else`——在現有 todo 項目視圖間切換，同時編輯能更新的視圖。我們還會探討如何添加刪除待辦的功能。

8. 重點管理 Vue ref (en-US)

我們快講完 Vue 了。最後要看的功能是 focus 管理，或者換句話說，如何消除鍵盤用戶的障礙。我們會看看怎麼透過 Vue ref 完成這件事：這是一項能透過虛擬 DOM、或組件的內部 DOM 結構，直接訪問 DOM 節點的進階功能。

9. Vue 的資源 (en-US)

最後的最後，我們將提供鑽研 Vue 所需的資源，以及有用的資訊。

Svelte 教學
---------

**備註：** Svelte tutorials last tested in August 2020, with Svelte 3.24.1.

If you need to check your code against our version, you can find a finished version of the sample Svelte app code as it should be after each article, in our mdn-svelte-tutorial repo. For a running live version, see our Svelte REPL at https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2.

1. Getting started with Svelte

In this article we'll provide a quick introduction to the Svelte framework. We will see how Svelte works and what sets it apart from the rest of the frameworks and tools we've seen so far. Then we will learn how to setup our development environment, create a sample app, understand the structure of the project, and see how to run it locally and build it for production.

2. Starting our Svelte Todo list app

Now that we have a basic understanding of how things work in Svelte, we can start building our example app: a todo list. In this article we will first have a look at the desired functionality of our app, then we'll create a `Todos.svelte` component and put static markup and styles in place, leaving everything ready to start developing our To-Do list app features, which we'll go on to in subsequent articles.

3. Dynamic behavior in Svelte: working with variables and props

Now that we have our markup and styles ready we can start developing the required features for our Svelte To-Do list app. In this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status.

4. Componentizing our Svelte app (en-US)

The central objective of this article is to look at how to break our app into manageable components and share information between them. We'll componentize our app, then add more functionality to allow users to update existing components.

5. Advanced Svelte: Reactivity, lifecycle, accessibility (en-US)

In this article we will add the app's final features and further componentize our app. We will learn how to deal with reactivity issues related to updating objects and arrays. To avoid common pitfalls, we'll have to dig a little deeper into Svelte's reactivity system. We'll also look at solving some accessibility focus issues, and more besides.

6. Working with Svelte stores (en-US)

In this article we will show another way to handle state management in Svelte — Stores. Stores are global data repositories that hold values. Components can subscribe to stores and receive notifications when their values change.

7. TypeScript support in Svelte (en-US)

We will now learn how to use TypeScript in Svelte applications. First we'll learn what TypeScript is and what benefits it can bring us. Then we'll see how to configure our project to work with TypeScript files. Finally we will go over our app and see what modifications we have to make to fully take advantage of TypeScript features.

8. Deployment and next steps (en-US)

In this final article we will look at how to deploy your application and get it online, and also share some of the resources that you should go on to, to continue your Svelte learning journey.

Angular 教學
----------

**備註：** Angular 教學的最後測試時間為 2021 年四月，使用 Angular CLI（NG）11.2.5。

如果你需要根據我們的版本檢查程式碼，可以在 angular-to-do-example 上找到範例程式碼的最終版本。

1. Angular 新手入門

在本文中，我們將會探索 Angular 所提供的功能、安裝必備工具、建立範例應用程式，並進一步瞭解 Angular 的基本架構。

2. 開始開發我們的 Angular 待辦事項應用程式

此刻，我們已準備好使用 Angular 來創建我們的待辦事項應用程式。完成後的應用程式將具有顯示待辦項目列表，並包含編輯、刪除與新增項目等功能。在本篇中，你將學到應用程式的結構，以及建立一個可顯示待辦項目的基礎列表。

3. 使用樣式點綴我們的 Angular 應用程式

現在，我們已經建立了基本的應用程式結構，並加入了內容，接著我們就要來對應用程式進行樣式的調整，透過本篇文章來學習如何使用樣式點綴我們的 Angular 應用程式。

4. 建立一個項目元件

元件為你提供了一種組織應用程式的方式。本篇文章將引導你建立一個元件，來處理待辦列表中的各個待辦項目，並增加標示完成、編輯以及刪除的功能。在本篇也將介紹 Angular 事件模型

5. 過濾待辦事項

現在，讓我們繼續增加功能，以允許用戶過濾待辦項目，以便他們可以查看進行中、已完成或所有待辦項目。

6. 構建 Angular 應用程序和更多資源

這篇文章內容涵蓋，如何建立一個產品版（production）的應用程式，以及提供後續的學習資源。

該選什麼框架？
-------

我們在最初發布的文章集，主要介紹了 React/ReactDOM、Ember、Vue。之所以選中這三個框架是因為：

* 它們在一段時間內，依舊是最受歡迎的選擇：如同多數軟體工具一般，選擇持續開發中、不太可能下星期就棄掉、還有可能藉由這份技能來找工作的軟體，才是明智的選擇。
* 它們都擁有活躍的社群與良好的文件。在剛開始理解複雜的概念時，這方面至關重要。
* 我們不可能把*所有的*框架都寫進來。因為你沒辦法在前端日新月異的情況下即時更新。
* 初學者在選擇需要理解的概念方面，會是個蠻麻煩的問題。因此，盡可能精簡會對初學者的幫助很大。

先講一下：我們選什麼框架**並不是**因為他們最棒，而是因為我們認同他們：這些框架在較吻合以上的考量要點。

我們以本來希望在一開始包含更多框架，但最後決定先發布，之後再追加其它教學，而非延後。如果屬意的框架沒放進去、而你也想幫忙的話，來和我們聊聊吧！透過 Matrix、Discourse、或 mdn-admins list 與我們聯繫。


Git and GitHub - 學習該如何開發 Web

Git and GitHub
==============

所有開發者都將使用到一些**版本控制系統** ( **V**ersion **C**ontrol **S**ystem, 簡稱 **VCS** ), 這種工具讓人們可以與其他開發者同公開發一個專案同時避免了不必要的重複與衝突，如果遇到什麼問題，也可以及時回退到之前的版本。當今最流行的**版本控制系統**（至少在網路開發者中是這樣的）是 **Git**，和與之關聯的程式社區網站 **GitHub**。這篇短文將帶你簡單地了解他們。

概述
--

版本控制系統在軟體開發過程中是不可或缺的：

* 我們很少獨自完成一個專案，而在分工合作的同時我們都會有與他人的工作相衝突的風險：尤其是當兩個人同時嘗試修改同一段程式碼的時候。所以我們需要有相應的機制用以避免這種情況。
* 不管是自己一人或與他人一起開發專案時，總希望能夠程式碼能夠及時保存，這樣就可以避免像電腦突然損壞而丟失程式碼的局面。
* 如果後期發現了問題，我們可能還會想要回到比較早的版本。有些人在做自己的專案時透過創建同一文件的不同版本，例如 `myCode.js`, `myCode_v2.js`, `myCode_v3.js`, `myCode_final.js`, `myCode_really_really_final.js` 之類的文件用於保存歷史版本，但這個方法不可靠，且容易出錯。
* 不同的團隊成員也會需要創建他們自己的獨特的版本（在 Git 中叫做**branches**（分支）），他們在這裡添加一些新的功能特性，然後通過一些可控的方法（在 GitHub 中我們使用**pull request**（提取要求））將其合併到原來的主幹項目中。

版本控制系統提供了能夠滿足以上需求的工具。 Git 是版本控制系統的範例，而GitHub是一個為個人或團隊操作 Git 儲存庫( Git Repositories) 提供了 Git 伺服器和一系列非常實用的工具的網站+基礎設施。它提供了回報程式碼錯誤、檢查工具以及分配任務和任務狀態等項目管理工具等等。

**備註：** Git 實際上是一個*分散式*版本控制系統，這意味著包含程式碼庫的儲存庫的完整副本是在你的電腦上（以及其他所有人）上創建的。 你可以對自己的副本進行更改，然後將這些更改推送回伺服器，管理員將決定是否將你的更改與主副本合併到主幹上。

**嘗試成為一位前端網頁程式開發者?**

我們準備了一系列的課程當中包括核心的資訊，讓你往你的目標(成為一位前端網頁程式開發者)邁進。

**開始學習** (en-US)

事前準備
----

要使用 Git 和 GitHub，你需要:

* 一台有安裝 Git 的電腦 (請參考 Git 下載頁面)。
* 一個工具來使用 Git，取決於你喜歡用哪類型工具，你可以使用一個 Git GUI client（我們建議使用 GitHub Desktop, SourceTree or Git Kraken）或就使用 terminal window。即便你傾向使用 GUI，實際上使用 terminal window 可以幫助你學習一些 git 的基本指令。
* 一個 GitHub 帳號。如果你還沒有帳號，建議使用提供的連結去註冊一個帳號並開始用。

就事前必備知識而言，你無需了解所有有關 Web 開發，Git /GitHub 的知識即可開始使用此版本控制系統。 但是，建議你了解一些開發程式碼的知識，並嘗試把一些程式碼存儲在你的儲存庫中！

最好還具有一些基本的終端機知識，例如在目錄之間移動，創立文件以及修改系統的 `PATH`。

**備註：** Github 不是唯一網站/工具集讓你使用 Git。 你可以嘗試其它替代方法，例如 GitLab，也可以嘗試設置自己的 Git 伺服器並使用它來取代 GitHub。在本章節中，我們僅停留在 GitHub 使用教學上。

其它指南
----

請注意，下面的連結將你帶到外部站點上的資源。最終，我們的目標是開設自己的專屬 Git / GitHub 課程，但目前，這些課程將幫助你掌握相關主題。

Hello, World（來自 GitHub）

這是一個很好的起點-本實用指南可讓你直接使用 GitHub，學習 Git 的基礎知識，例如創建儲存庫和分支，進行提交以及合併提取要求。

Git 使用手冊（來自 GitHub）

這本 Git 手冊更深入地介紹了版本控制系统是什麼，儲存庫是什麼，基本 GitHub 模如何運行，Git 命令和範例等等。

Forking Projects 分叉專案（來自 GitHub）

當你想為別人的程式碼做貢獻時，Forking Projects 分叉專案是必不可少的。本指南說明了方法。

關於提取要求（來自 GitHub）

有用的指南，用於管理請求請求，將建議的程式碼更改傳遞給人們的儲存庫以供考慮。

掌握問題（來自 GitHub）

問題就像是 GitHub 項目的論壇，人們可以在其中提出問題和報告問題，還可以管理更新（例如，分配人員來解決問題，澄清問題，讓人們知道問題已解決）。本文將提供你有關問題的必備知識。

**備註：** 你還可以用 Git 跟 GitHub 來完成更多的事情，但我們認為，如果你想要有效地使用 Git，上面的這些知識是至少應該具備的。當你更深入地了解 Git 時，你將會意識到，當你開始使用更加複雜的指令時會更容易出錯。但不要擔心，即使是專業的網路工程師有時都會感到困惑，並通過網路檢索或Flight rules for Git和 Dangit, git! 這樣的網站來尋找答案。

也可以參考以下
-------

* 【理解 GitHub 流程】
* 【指令列表】
* 【掌握 Markdown 格式】（在網頁上、評論區常用的格式以及`.md` 文件所使用的格式，GitHub 中的介紹文件(readme.md)即用這種格式書寫）。
* 【入門 Github 頁面】（如何在 GitHub 上發布示例和網站）。
* 【學習 Git 的分支結構】
* 【Git 中的飛行法則】（ 在 Git 中實現特定功能的非常有用的方法介紹綱要，包括如何在出錯時糾錯等）。
* 【該死的 Git，Git !】（另一個十分有用的方法介紹綱要，特別是在出錯的時候進行糾正的方法）。