From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../advanced_text_formatting/index.html | 456 ++++++++++ .../creating_hyperlinks/index.html | 326 +++++++ .../document_and_website_structure/index.html | 283 ++++++ .../getting_started/index.html | 626 ++++++++++++++ .../html_text_fundamentals/index.html | 953 +++++++++++++++++++++ .../learn/html/introduction_to_html/index.html | 61 ++ .../the_head_metadata_in_html/index.html | 261 ++++++ 7 files changed, 2966 insertions(+) create mode 100644 files/zh-tw/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/zh-tw/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/zh-tw/learn/html/introduction_to_html/index.html create mode 100644 files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.html (limited to 'files/zh-tw/learn/html/introduction_to_html') diff --git a/files/zh-tw/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/zh-tw/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..3b5786613b --- /dev/null +++ b/files/zh-tw/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,456 @@ +--- +title: Advanced text formatting +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +tags: + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+ +

There are many other elements in HTML for formatting text, which we didn't get to in the HTML text fundamentals article. The elements described in this article are less well-known, but still useful to know about (and this is still not a complete list by any means.) In here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.

+ + + + + + + + + + + + +
Prerequisites:Basic HTML familiarity, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals.
Objective:To learn how to use lesser-known HTML elements to mark up advanced semantic features.
+ +

說明列表

+ +

In HTML text fundamentals, we walked through how to mark up basic lists in HTML, but we didn't mention the third type of list you'll occasionally come across — description lists. The purpose of these lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers. Let's look at an example of a set of terms and definitions:

+ +
soliloquy
+In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
+monologue
+In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
+aside
+In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information
+ +

Description lists use a different wrapper than the other list types — {{htmlelement("dl")}}; in addition each term is wrapped in a {{htmlelement("dt")}} (description term) element, and each description is wrapped in a {{htmlelement("dd")}} (description description) element. Let's finish marking up our example:

+ +
<dl>
+  <dt>soliloquy</dt>
+  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
+  <dt>monologue</dt>
+  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
+  <dt>aside</dt>
+  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
+</dl>
+ +

The browser default styles will display description lists with the descriptions indented somewhat from the terms. MDN's styles follow this convention fairly closely, but also embolden the terms for extra definition.

+ +
+
soliloquy
+
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
+
monologue
+
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
+
aside
+
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.
+
+ +

Note that it is permitted to have a single term with multiple descriptions, for example:

+ +
+
aside
+
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.
+
In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)
+
+ +

Active learning: Marking up a set of definitions

+ +

It's time to try your hand at description lists; add elements to the raw text in the Input field so that it appears as a description list in the Output field. You could try using your own terms and descriptions if you like.

+ +

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Quotations

+ +

HTML also has features available for marking up quotations; which element you use depends on whether you are marking up a block or inline quotation.

+ +

Blockquotes

+ +

If a section of block level content (be it a paragraph, multiple paragraphs, a list, etc.) is quoted from somewhere else, you should wrap it inside a {{htmlelement("blockquote")}} element to signify this, and include a URL pointing to the source of the quote inside a {{htmlattrxref("cite","blockquote")}} attribute. For example, the following markup is taken from the MDN <blockquote> element page:

+ +
<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+ +

To turn this into a block quote, we would just do this:

+ +
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+ +

Browser default styling will render this as an indented paragraph, as an indicator that it is a quote; MDN does this, but also adds some extra styling:

+ +
+

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

+
+ +

Inline quotations

+ +

Inline quotations work in exactly the same way, except that they use the {{htmlelement("q")}} element. For example, the below bit of markup contains a quotation from the MDN <q> page:

+ +
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q></p>
+ +

Browser default styling will render this as normal text put in quotes to indicate a quotation, like so:

+ +

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

+ +

Citations

+ +

The content of the {{htmlattrxref("cite","blockquote")}} attribute sounds useful, but unfortunately browsers, screenreaders, etc. don't really do much with it. There is no way to get the browser to display the contents of cite, without writing your own solution using JavaScript or CSS. If you want to make the source of the quotation available on the page, a better way to mark it up is put the {{htmlelement("cite")}} element next to the quote element. This is really meant to contain the name of the quote source — i.e. the name of the book, or name of the person that said the quote — but there is no reason why you couldn't link the text inside <cite> to the quote source in some way:

+ +
<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+<cite>MDN blockquote page</cite></a>:
+</p>
+
+<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+
+<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
+<cite>MDN q page</cite></a>.</p>
+ +

Citations are styled in italic font by default. You can see this code at work in our quotations.html example.

+ +

Active learning: Who said that?

+ +

Time for another active learning example! In this example we'd like you to:

+ +
    +
  1. Turn the middle paragraph into a blockquote, which includes a cite attribute.
    2. +
  2. Turn part of the third paragraph into an inline quote, which includes a cite attribute.
    3. +
  3. Include a <cite> element for each quote
    4. +
+ +

Search online to find appropriate quote sources.

+ +

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

Abbreviations

+ +

Another fairly common element you'll meet when looking around the Web is {{htmlelement("abbr")}} — this is used to wrap around an abbreviation or acronym, and provide a full expansion of the term (included inside a {{htmlattrxref("title")}} attribute.) Let's look at a couple of examples:

+ +
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
+
+<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
+ +

These will come out looking something like this (the expansion will appear in a tooltip when the term is hovered over):

+ +

We use HTML to structure our web documents.

+ +

I think Rev. Green did it in the kitchen with the chainsaw.

+ +
+

Note: There is another element, {{htmlelement("acronym")}}, which basically does the same thing as <abbr>, and was intended specifically for acronyms rather than abbreviations. This however has fallen into disuse — it wasn't supported as well in browsers as well as <abbr>, and has such as similar function that it was felt pointless to have both. Just use <abbr> instead.

+
+ +

Active learning: marking up an abbreviation

+ +

For this simple active learning assignment, we'd like you to simply mark up an abbreviation. You can use our sample below, or replace it with one of your own. 

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 350) }}

+ +

Marking up contact details

+ +

HTML has an element for marking up contact details — {{htmlelement("address")}}. This simply wraps around your contact details, for example:

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, UK</p>
+</address>
+ +

One thing to remember however is that the <address> element is meant for marking up the contact details of the person who wrote the HTML document, not any address. So the above would only be ok if Chris had written the document the markup appears on. Note that something like this would also be ok:

+ +
<address>
+  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

Superscript and subscript

+ +

You will occasionally need to use superscript and subscript when marking up items like dates, chemical formulae, and mathematical equations so they have the correct meaning. The {{htmlelement("sup")}} and {{htmlelement("sub")}} elements handle this job. For example:

+ +
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
+<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
+ +

The output of this code looks like so:

+ +

My birthday is on the 25th of May 2001.

+ +

Caffeine's chemical formula is C8H10N4O2.

+ +

If x2 is 9, x must equal 3 or -3.

+ +

Representing computer code

+ +

There are a number of elements available for marking up computer code:

+ + + +

Let's look at a few examples. You should try having a play with these (try grabbing a copy of our other-semantics.html sample file):

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, stop poking me!');
+}</code></pre>
+
+<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
+
+<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
+
+
+<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+ +

The above code will look like so:

+ +

{{ EmbedLiveSample('Representing_computer_code','100%',300) }}

+ +

Marking up times and dates

+ +

HTML also provides the {{htmlelement("time")}} element for marking up times and dates in a machine-readable format. For example:

+ +
<time datetime="2016-01-20">20 January 2016</time>
+ +

Why is this useful? Well, there are many different ways that humans write down dates. The above date could be written as:

+ + + +

But these different forms cannot be easily recognised by the computers — what if you wanted to automatically grab the dates of all events in a page and insert them into a calendar? The {{htmlelement("time")}} element allows you to attach a unambiguous, machine-readable time/date for this purpose.

+ +

The basic example above just provides a simple machine readable date, but there are many other options that are possible, for example:

+ +
<!-- Standard simple date -->
+<time datetime="2016-01-20">20 January 2016</time>
+<!-- Just year and month -->
+<time datetime="2016-01">January 2016</time>
+<!-- Just month and day -->
+<time datetime="01-20">20 January</time>
+<!-- Just time, hours and minutes -->
+<time datetime="19:30">19:30</time>
+<!-- You can do seconds and milliseconds too! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Date and time -->
+<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
+<!-- Date and time with timezone offset-->
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
+<!-- Calling out a specific week number-->
+<time datetime="2016-W04">The fourth week of 2016</time>
+ +

Summary

+ +

That marks the end of our study of HTML text semantics. Bear in mind that what you have seen during this course is not an exhaustive list of HTML text elements — we wanted to try to cover the essentials, and some of the more common ones you will see in the wild, or at least might find interesting. To find way more HTML elements, you can take a look at our HTML element reference (the Inline text semantics section would be a great place to start.) In the next article we will look at the HTML elements you'd use to structure the different parts of an HTML document.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..059cfa427c --- /dev/null +++ b/files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,326 @@ +--- +title: Creating hyperlinks +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+ +

超連結(Hyperlinks)真的超級重要 — 它造就了我們現今所熟知的網路。這篇文章將會介紹超連結的使用語法，並且探討建立它們的最佳實踐方法。

+ + + + + + + + + + + + +
需求：我們在 HTML 入門 中介紹過的 HTML 基礎，以及在 HTML 的文字基礎知識 中介紹過的文字格式化技巧。
目標：學習如何有效地使用超連結，並利用它們來連結多個檔案。
+ +

什麼是超連結？

+ +

超連結可說是網路中最令人振奮的革新技術。當然啦，早在網路技術萌芽之初，它們就已經在那了，它們正是網路之所以被稱為「網路」的最大原因 — 它讓我們的文件能任意地與其他文件(或者資源)相互連結（或是連結文件中的特定部份），讓我們能透過一個簡單的網路位址來經營我們的網路應用（相較之下，本機應用(native apps)就必須要安裝在主機上才能使用）。幾乎所有的網路內容都能被轉換成一個連結，讓網路瀏覽器在這些連結被點擊或觸發之後，跳轉到該網路位址({{glossary("URL")}})上。

+ +
+

Note: URL 能夠指向 HTML 檔案、純文字檔案、圖片、文字文件、影音檔案等等可存在網路上的東西。如果網路瀏覽器不知道如何顯示或者處理該檔案的話，它會問你想要開啟這個檔案（將檔案交由本機應用來處理）還是要下載該檔案（意即你可以待會兒再處理）。

+
+ +

以 BBC 的主頁為例，裡面就包含了非常多的連結，各自連到不同新聞、網站的其它地方(導覽功能)，或者登入/註冊頁面等等。

+ +

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

+ +

解析連結

+ +

一個基本的連結由 {{htmlelement("a")}} 元素包裹一段文字而成(當然也不一定要是文字，見下方的{{anch("區塊級連結")}})，同時，你需要將網路位址填入 {{htmlattrxref("href", "a")}} 屬性中，這個屬性有時也被叫做超文字參考(Hypertext Reference)或目標(target)。

+ +
<p>I'm creating a link to
+<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
+</p>
+ +

這會產生以下結果：

+ +

I'm creating a link to the Mozilla homepage.

+ +

利用 title 屬性來添加額外資訊

+ +

另外一個你可能會想在連結中附加的屬性是 title，它的目的是攜帶一個補充訊息到連結上，好比說目標網頁有什麼樣的資訊，或者是一些警告訊息，範例如下：

+ +
<p>I'm creating a link to
+<a href="https://www.mozilla.org/en-US/"
+   title="The best place to find more information about Mozilla's
+          mission and how to contribute">the Mozilla homepage</a>.
+</p>
+ +

這將會產生以下結果（當游標移到連結上方時，標題會以提示的形式出現）：

+ +

I'm creating a link to the Mozilla homepage.

+ +
+

Note: 連結標題只有在游標停在連結上方時才會出現，也就是說那些只依賴鍵盤來瀏覽網頁的人將會很難看到這個訊息，因此，如果說標題資訊對網頁易用性(usability)有著重大影響的話，你應該把它放在大家都看得到的地方，比方說放在一般的文字元素裡。

+
+ +

不要只用看的：建立你自己的範例連結

+ +

主動學習時間！我們想要你用自己的文字編輯器來撰寫一個 HTML 文件(你可以修改我們的入門範本，那應該就很夠用了)。

+ + + + + +

就像先前所提到的，你可以將任何內容轉換成連結，就算是區塊級元素也沒問題！如果你有一張圖片要轉換成連結，你可以把圖片元素放在 <a> 標籤裡，像這樣：

+ +
<a href="https://www.mozilla.org/en-US/">
+  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
+</a>
+ +
+

Note: 在往後的教學中，你還會學到更多的圖片使用技法。

+
+ +

快速理解 URL 和路徑

+ +

在完全搞懂連結標的(link target)之前，你必須要先瞭解什麼是 URL 和檔案路徑，而這個小節就是要帶你來看這些東西。

+ +

URL 全名為 Uniform Resource Locator (一致資源定位器，俗稱網址)，是一條用來指出某樣東西在網路上的位址的字串。比如說 Mozilla 的英文主頁就是位在 https://www.mozilla.org/en-US/。

+ +

URL 利用路徑來找到檔案，而路徑會指出你所感興趣的檔案位於檔案系統上的什麼地方。現在讓我們來看個簡單的目錄結構範例(請見我們的建立超連結目錄)。

+ +

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

+ +

creating-hyperlinks 是這個目錄結構的根目錄(root)，當你在本地端撰寫網站時，你會將整個網站都放在這樣的資料夾中。在我們的根目錄裡有 index.html 和 contacts.html 兩個檔案，在現實的情況中，index.html 會是我們的首頁或者登陸頁面(landing page，網站或它的某部份的進入點)。

+ +

我們的根目錄中有兩個子目錄 — pdfs 和 projects，它們各自都有一個檔案在裡頭，分別是 project-brief.pdf 和 index.html。請記得，你可以很愉快地在一個專案中擁有兩個 index.html，只要它們處在檔案系統上的不同位址。很多網站都會這麼做，第二個 index.html 可能會拿來當作是與專案有關資訊的主登陸頁面。

+ + + +
+

Note: 你可以將多個這種語法組成一個較為複雜的 URL，例如：../../../complex/path/to/my/file.html。

+
+ +

文件片段 (Document fragments)

+ +

並不是每次都只能連到文件的頂端，你也可以連到 HTML 文件中的某個部分，而這個部分叫做文件片段(document fragment)。要做到這件事，你得先為你要連的元素設定 {{htmlattrxref("id")}} 屬性，通常你可以把連結設在標題(heading)上，像是下面這樣：

+ +
<h2 id="Mailing_address">Mailing address</h2>
+ +

要連到特定的 id，你得在你的 URL 的後面加上一個 # 號，像這樣：

+ +
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
+ +

你甚至可以利用文件片段來連到同個文件的其他部分：

+ +
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>
+ +

絕對 URL vs. 相對 URL

+ +

你會在網路上看到兩個名詞，絕對 URL(absolute URL)和相對 URL(relative URL):

+ +

絕對 URL：指向網路上的絕對位址，裡頭包含協定({{glossary("protocol")}})和網域名稱({{glossary("domain name")}})。舉個例子，假設一個 web server 的根目錄有一個 projects 目錄，裡面放著一個 index.html，該網站的網域為 http://www.example.com，則網頁可以透過網址 http://www.example.com/projects/index.html 來取得 (或寫成 http://www.example.com/projects/ 也行，因為大多的 web server 都能在 URL 沒有明確指出時，自動找尋如 index.html 之類的登陸頁面)。

+ +

絕對 URL 無論在什麼地方使用，它都會代表同一個位址。

+ +

相對 URL：指向一個檔案的相對位址，這跟我們在先前看到的非常類似。舉例來說，如果我們想要從 http://www.example.com/projects/index.html 連到同一目錄下的 PDF 檔，URL 就只要檔名就好 — 像是 project-brief.pdf — 不需要其它的資訊。如果那個 PDF 放在 projects 中叫做 pdfs 的子目錄裡，其相對連結就是 pdfs/project-brief.pdf (等效的絕對 URL 為 http://www.example.com/projects/pdfs/project-brief.pdf)。

+ +

相對 URL 指向的位址會受到檔案所在的真正位址影響 — 舉例來說，如果我們將 index.html 移出 projects，並放在網站的根目錄中 (也就是在最上層中)，裡頭指向 pdfs/project-brief.pdf 的相對 URL 連結會指到 http://www.example.com/pdfs/project-brief.pdf，而非 http://www.example.com/projects/pdfs/project-brief.pdf。

+ +

當然，project-brief.pdf 和 pdfs 的位置不會因為你移動 index.html 就改變 — 這會使得你的連結指到錯誤的地方，你一定得非常小心！

+ +

連結的最佳實踐

+ +

撰寫連結時有幾個最佳實踐方法，現在讓我們來看看吧。

+ + + +

使用明確的字詞

+ +

要在你的網頁上加入連結非常簡單，但這還不夠，我們必須確保連結能夠被所有讀者取用到，無論他們的背景或者使用的工具為何。比如說：

+ + + +

我們來看幾個例子：

+ +

好的連結文字：下載 Firefox

+ +
<p><a href="https://firefox.com/">
+  下載 Firefox
+</a></p>
+ +

不好的連結文字：點這裡來下載 Firefox

+ +
<p><a href="https://firefox.com/">
+  點這裡
+</a>
+來下載 Firefox</p>
+
+ +

其它小訣竅：

+ + + +

盡可能使用相對連結

+ +

經過之前的說明，你可能會覺得無論如何都應該採用絕對連結，畢竟它們不會像相對連結一樣，因為頁面被搬移而失效。然而，對於相同網站內的連結，你應該盡量使用相對連結 (連到別的網站的連結必須使用絕對連結)，原因如下：

+ + + +

要連到非 HTML 的資源時請先聲明

+ +

當連結連至一個需要下載的資源 (像是 PDF 或 Word 文件) 或是串流 (如影音串流) 或是其他有潛在未知影響的東西 (開啟彈出式視窗或者載入 Flash movie) 時，你應該要加上一些文字來預示，以下就是幾個非常惱人的情境：

+ + + +

讓我們來看一些可以改善這些情況的方法：

+ +
<p><a href="http://www.example.com/large-report.pdf">
+  下載銷售報告(PDF, 10MB)
+</a></p>
+
+<p><a href="http://www.example.com/video-stream/" target="_blank">
+  觀看影片(將在新分頁開啟串流，HD 畫質)
+</a></p>
+
+<p><a href="http://www.example.com/car-game">
+  遊玩賽車遊戲(需要 Flash)
+</a></p>
+ +

當連結會觸發下載時，使用下載屬性

+ +

當你連結一個需要下載的資源時，你可以使用 download 屬性來提供一個預設的儲存檔名。以下範例是最新版的 Windows 版 Firefox 的下載連結：

+ +
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
+   download="firefox-latest-64bit-installer.exe">
+  下載Windows上的最新版Firefox (64-bit) (English, US)
+</a>
+ +

不要只用看的：建立一個導覽選單

+ +

在這次練習中，我們想要你利用導覽列來將許多網頁連結在一起，創造出一個具有多個頁面的網站。這是一個很常見的網站建造方式 — 每一個網頁都使用同樣的網頁結構，其中包含相同的導覽選單，這樣子一來，當連結被點擊時，會讓人以為還留在原地，但內容卻倏忽更迭。

+ +

你需要先在一個目錄中建立下面這四個網頁的複本 (你可以在 navigation-menu-start 目錄下找到完整的清單)：

+ + + +

接著，你可以這麼做：

+ +
    +
  1. 在指定的地方添加一個無序列表，裡面放著可以連到的網頁名稱。因為導覽選單其實就是一個連結的列表，所以這麼做在語義上沒什麼問題。
    2. +
  2. 把每一個網頁名稱變成超連結。
    3. +
  3. 把導覽選單複製到每一個頁面上。
    4. +
  4. 把每個網頁中，連到自己的連結移除，因為這種連結毫無意義且令人困惑，此外，無連結的文字可以用來提示使用者的所在位置。
    5. +
+ +

完成後的範例應該會長這樣：

+ +

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

+ +
+

Note: 如果你卡住了，或者不確定有沒有做對，你可以到 navigation-menu-marked-up 目錄來偷瞄答案。

+
+ +

E-mail 連結

+ +

你可以建立一個連結或按鈕，使得它被點擊之後，開啟一個正在撰寫中的電子郵件訊息。這可以透過 {{HTMLElement("a")}} 元素和 mailto: URL scheme 來達成。

+ +

多數情況 mailto: 會填入收信人的電子郵件地址。例如：

+ +
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+
+ +

它的結果會像是這樣：Send email to nowhere。

+ +

事實上，電子郵件地址是選填的。如果你將它留空 (也就是說，你的 {{htmlattrxref("href", "a")}} 只寫了 "mailto:")，使用者的 mail client 會開啟一個寄信視窗，其中並沒有指定收信人，這在使用「分享」連結時非常有用，使用者可以自行決定要寄給誰。

+ +

指定細節

+ +

除了電子郵件地址之外，你還可以提供其他資訊，事實上，任何標準的郵件標頭欄位都能被加到  mailto URL 中，常見的有主旨(subject)、副本(cc)以及主體(body) (這個雖然不是真的標頭欄位，但能讓你放一條簡短的訊息在新郵件的主體中)。每個欄位與它的值被定義成一組查詢項(query term)。

+ +

下面是一個包含 cc、bcc(密件副本)、subject 和 body 的範例：

+ +
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
+  Send mail with cc, bcc, subject and body
+</a>
+ +
+

Note: 每一個欄位的值必須以 URL 編碼，也就是將空白及不可印字元(不可見的字元如縮排(tabs)、回車(carriage return)、換頁(page breaks)等等)轉換成百分號編碼。也請注意這裡使用問號(?)來分隔主要 URL 和其他欄位；以 & 來分隔 mailto: URL 中的不同的欄位，這是標準的 URL 查詢記號(query notation)。你可以閱讀 GET 方法來得知有那些常用的查詢記號。

+
+ +

以下是 mailto URL 的其他例子：

+ + + +

小試身手！

+ +

你已經讀完這個章節囉，但你有掌握箇中的重點嗎？你可以在繼續閱讀後面的章節之前，先進行一些測驗 — 請前往小試身手：超連結。

+ +

總結

+ +

總而言之，以上就是超連結的介紹了！ 稍後你在後續的課程中學到如何位連結增添樣式時，還會再碰到它們。HTML 的下一章，我們將繼續討論文字語義(text semantics)，並看一些進階／不常見的特性，相信你會獲益良多的 — 下一站是：進階文字格式化技巧！

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

+ +

在本主題中的內容

+ + diff --git a/files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..2a4a379123 --- /dev/null +++ b/files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,283 @@ +--- +title: Document and website structure +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

{{glossary("HTML")}} 不僅能夠定義網頁的單獨部分（例如“段落”或“圖片”），還可以使用區塊級元素（例如“標題欄”、“導覽選單”、“主內容列”）來定義網站中的複合區域。本文將探討如何規劃基本的網站結構，並根據規劃的結構來編寫 HTML。

+ + + + + + + + + + + + +
預備知識:Basic HTML familiarity, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals. How hyperlinks work, as covered in Creating hyperlinks.
學習目標:學習使用語義標籤來建立文本，建置簡單的網站結構。
+ +

文本的基本組成

+ +

網頁有各式各樣的外觀，但是除了全螢幕影片、遊戲或藝術作品頁面外，都傾向於使用類似的標準元件:

+ +
+
頁首:
+
通常橫跨於整個頁面頂部有一個大標題。這是網站的主要資訊，通常存在於所有網頁。
+
導覽列:
+
指向網站各個主要區段的超連結。通常用選單按鈕、連結或頁簽來表示。類似於頁首，導航列通常應在所有網頁之間保持一致，否則會讓用戶感到疑惑，甚至無所適從。許多web 設計人員認為導航列是頁首的一部分，而不是獨立的元件，但這並非絕對；還有人認為，兩者獨立可以提供更好的無障礙訪問特性，因為螢幕可以更清晰地分辨二者。
+
主要內容:
+
中心的大部分區域是當前網頁大多數的獨有內容，例如影片、文章、地圖、新聞等。這些內容是網站的一部分，且會因頁面而異。
+
側邊攔:
+
一些外圍資訊、連結、引用、廣告等。通常與主內容相關（例如一個新聞頁面上，側邊欄可能包含作者資訊或相關文章連結）。
+
頁尾:
+
橫跨頁面底部的狹長區域。和頁首一樣，頁尾是放置共用資訊（比如版權聲明或聯繫方式）的，一般使用較小字體，且通常為次要內容。還可以通過提供快速訪問連結來進行{{Glossary("SEO")}} 。
+
+ +

一個“典型的網站”可能會這樣佈局:

+ +

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

+ +

用於構造內容的HTML

+ +

上面顯示的簡單範例並不美觀，但對於說明典型的網站佈局範例來說是非常好的。 有些網站上有更多欄，有些則複雜得多，但是您知道了。 使用正確的CSS，您幾乎可以使用任何元素來包裹不同的部分，並使其看起來像您想要的樣子，但是如前所述，我們需要遵守語義並將正確的元素用於正確的運行。

+ +

這是因為視覺效果並不能說明整個故事。 We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

+ +
+

Note: Colorblind people represent around 4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion).

+
+ +

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job.

+ +

To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

+ + + +

Active learning: exploring the code for our example

+ +

Our example seen above is represented by the following code (you can also find the example in our GitHub repository). We'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>My page title</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Here is our main header that is used across all the pages of our website -->
+
+    <header>
+      <h1>Header</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
+
+    <!-- Here is our page's main content -->
+    <main>
+
+      <!-- It contains an article -->
+      <article>
+        <h2>Article heading</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>Subsection</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Another subsection</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- the aside content can also be nested within the main content -->
+      <aside>
+        <h2>Related</h2>
+
+        <ul>
+          <li><a href="#">Oh I do like to be beside the seaside</a></li>
+          <li><a href="#">Oh I do like to be beside the sea</a></li>
+          <li><a href="#">Although in the North of England</a></li>
+          <li><a href="#">It never stops raining</a></li>
+          <li><a href="#">Oh well...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- And here is our main footer that is used across all the pages of our website -->
+
+    <footer>
+      <p>©Copyright 2050 by nobody. All rights reversed.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Take some time to look over the code and understand it — the comments inside the code should also help you to understand it. We aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS. We'll wait for this until you start to study CSS layout as part of the CSS topic.

+ +

HTML layout elements in more detail

+ +

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference. For now, these are the main definitions that you should try to understand:

+ + + +

Non-semantic wrappers

+ +

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some {{glossary("CSS")}} or {{glossary("JavaScript")}}. For cases like these, HTML provides the {{HTMLElement("div")}} and {{HTMLElement("span")}} elements. You should use these preferably with a suitable {{htmlattrxref('class')}} attribute, to provide some kind of label for them so they can be easily targeted.

+ +

{{HTMLElement("span")}} is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

+ +
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
+him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
+play, the lights should be down low]</span>.</p>
+ +

In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.

+ +

{{HTMLElement("div")}} is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

+ +
<div class="shopping-cart">
+  <h2>Shopping cart</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Total cost: $237.89</p>
+</div>
+ +

This isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a  <section>, as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.

+ +
+

Warning: Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.

+
+ +

Line breaks and horizontal rules

+ +

Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:

+ +

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

+ +
+
<p>There once was a man named O'Dell<br>
+Who loved to write HTML<br>
+But his structure was bad, his semantics were sad<br>
+and his markup didn't read very well.</p>
+
+ +

Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace); with <br> elements in the code, the markup renders like this:

+ +

{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}

+ +

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

+ +
+
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
+<hr>
+<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.</p>
+
+ +

Would render like this:

+ +

{{EmbedLiveSample('horizantal-rule-live-sample', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Planning a simple website

+ +

Once you've planned out the structure of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called {{glossary("Information architecture")}}. In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages, this can be fairly simple, and fun!

+ +
    +
  1. Bear in mind that you'll have a few elements common to most (if not all) pages — such as the navigation menu, and the footer content. If your site is for a business, for example, it's a good idea to have your contact information available in the footer on each page. Note down what you want to have common to every page.the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. +
  2. Next, draw a rough sketch of what you might want the structure of each page to look like (it might look like our simple website above). Note what each block is going to be.A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. +
  3. Now, brainstorm all the other (not common to every page) content you want to have on your website — write a big list down.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. +
  4. Next, try to sort all these content items into groups, to give you an idea of what parts might live together on different pages. This is very similar to a technique called {{glossary("Card sorting")}}.The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. +
  5. Now try to sketch a rough sitemap — have a bubble for each page on your site, and draw lines to show the typical workflow between pages. The homepage will probably be in the center, and link to most if not all of the others; most of the pages in a small site should be available from the main navigation, although there are exceptions. You might also want to include notes about how things might be presented.A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. +
+ +

Active learning: create your own sitemap

+ +

Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?

+ +
+

Note: Save your work somewhere; you might need it later on.

+
+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find a detailed assessment that tests these skills at the end of the module; see Structuring a page of content. We'd advise going through the next article in the series first and not just skipping to it though!

+ +

Summary

+ +

At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/zh-tw/learn/html/introduction_to_html/getting_started/index.html b/files/zh-tw/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..b68ccd2b73 --- /dev/null +++ b/files/zh-tw/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,626 @@ +--- +title: Getting started with HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

本文將探討 HTML 最基本的部分。首先，我們將會定義元素(elements)、屬性(attributes)以及其它你可能聽過的重要名詞，然後講解該如何使用它們。我們也會告訴你典型的 HTML 頁面以及其中的元素是如何構成的，以及解釋其他重要的基礎語言特性。在此過程中，我們會撰寫一些 HTML 來引發你的興趣！

+ + + + + + + + + + + + +
需求:基礎電腦能力、已安裝需要的基本軟體、並知道如何操作檔案。
目標:對 HTML 產生初步認識、並練習如何撰寫 HTML 元素。
+ +

什麼是 HTML?

+ +

{{glossary("HTML")}} (Hypertext Markup Language) 並不是一種程式語言，而是用來告訴瀏覽器該如何呈現網頁的標記式語言(markup language)。它可以很複雜也可以很陽春，端看網頁開發者如何構思。HTML 由一系列的元素({{glossary("Element", "elements")}})組成，你將利用它們來圍住、包裹，或者說標記(mark up)網頁中的每個部分，使它們在外表或行為上呈現某種特定風貌。被標籤({{glossary("Tag", "tags")}})包住的內容會變成超連結，或者斜體字，以及諸如此類的功能，舉例來說，請看下列內容:  

+ +
My cat is very grumpy
+ +

如果我們想要讓這行字獨立出來，不讓它跟其他東西排在一起，我們可以用段落標籤( paragraph tag {{htmlelement("p")}})讓它自成段落：

+ +
<p>My cat is very grumpy</p>
+
+ +
+

注意:
+ HTML 中的元素是不區分大小寫的。
+ 例如 : 一個 {{htmlelement("title")}} 標籤可以寫成<title>, <TITLE>, <Title>, <TiTlE>，之類的形式，都沒有問題。
+ 通常來說，為了保持一致性(consistency)、可讀性(readability)，以及其他可能的原因，最好還是以小寫來撰寫標籤。

+
+ +

分析 HTML 元素

+ +

讓我們更深入地探索段落中的元素：

+ +

+ +

元素中主要的內容有: 

+ +
    +
  1. 起始標籤(opening tag)：它包含了元素的名字(在這裡是 p)，夾在一對 <、> (angle brackets)之間。它指明元素從何開始生效 — 在上例中則代表段落的開始。
    2. +
  2. 結束標籤(closing tag)：結束標籤和起始標籤長得差不多，只不過它在名字前面還多加了一條斜線 (forward slash) 。它表示元素結束的地方 — 在上例中表示該段落的結束。忘記加上結束標籤是初學者常犯的錯誤，這將導致奇怪的結果。
    3. +
  3. 內容(content): 元素的內容。在上例中就是一段文字。
    4. +
  4. 元素(element): 以上三者加起來就是元素。
    5. +
+ +

不要光是看: 創造你的第一個 HTML 元素

+ +

編輯下面輸入區域中的文字，嘗試用 <em> 和 </em> 標籤包裹住文字(把 <em> 放在文字前面來起始元素，把 </em> 放在後面來結束元素) ，這會使得文字變成斜體字。你可以在下面的輸出區域看到更新後的變化。

+ +

如果你不小心打錯了，你可以按下 Reset 鍵來重置。如果你卡關了，你可以點擊 Show solution 鍵來偷看答案。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

巢狀元素(Nesting elements)

+ +

你可以把元素放進另一個元素裡面 — 這叫做巢套(nesting)。比如說，我們想要強調我們的貓咪非常兇，我們可以用{{htmlelement("strong")}}元素來包住 "very" 這個字，這樣就可以標註我們想要強調的字:

+ +
<p>My cat is <strong>very</strong> grumpy.</p>
+ +

你必須確保你的元素正確地巢套：在上述範例中，我們先用了 p 元素，然後才用 strong 元素，因此我們必須先關閉 strong 元素，再關閉 p 元素。下面是錯誤示範：

+ +
<p>My cat is <strong>very grumpy.</p></strong>
+ +

這些元素必須要正確地開啟與關閉，它們與其他元素的內外關係要相當明確。如果它們像上例這樣交互重疊，你的網頁瀏覽器將無法解讀，只能盡可能地猜測你的意思，因此你很有可能會得到一個不如預期的結果。所以，別這樣做！！

+ +

區塊級元素 vs. 行內元素(Block versus inline elements)

+ +

在 HTML 中有兩種你應該要知道的重要元素類別 — 區塊級元素(block-level elements)和行內元素(inline elements)。

+ + + +

以下面這個例子來說：

+ +
<em>first</em><em>second</em><em>third</em>
+
+<p>fourth</p><p>fifth</p><p>sixth</p>
+
+ +

{{htmlelement("em")}} 是一個行內元素，所以你可以看到下面的例子中，前三個元素互相緊鄰在同一行，兩兩中間並無任何空白。另一方面，{{htmlelement("p")}} 是一個區塊級元素，所以每個元素都自成一行，並且上下都有一些空間。(這些空間是由於瀏覽器套用預設的CSS styling到這些段落上的緣故)。

+ +

{{ EmbedLiveSample('區塊級元素_vs._行內元素Block_versus_inline_elements', 700, 200, "", "") }}

+ +
+

Note: HTML5 重新定義了元素類別：請見 Element content categories。新的定義比先前所定義的更為準確且少歧義性，因此它們也同時比 block 和 inline 還來得複雜，所以我們選擇在這裡繼續使用這個觀念。

+
+ +
+

Note: 在本主題所使用的 block 與 inline 這兩個名詞，不應與 CSS 的 boxes 種類混淆。它們在預設時是很像的，但改變 CSS 的顯示型態(display type)並不會改變元素的類別，也不會影響該元素能包含或被包含的元素類別。HTML5 之所以會重新定義元素類別，部分也是基於此一原因。

+
+ +
+

Note: 你可以查看 block element 與 inline element 分別有哪些元素 — 請見 Block-level elements 和 Inline elements。

+
+ +

空元素(Empty elements)

+ +

不是所有元素都符合起始標籤、內容、結束標籤的格式。有些元素只有一個標籤，這些標籤通常用來在文件中插入/嵌入物件。例如 {{htmlelement("img")}} 元素便是用來在當前位置嵌入圖片檔：

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

這將會產生下面的結果:

+ +

{{ EmbedLiveSample('空元素Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: 空元素有時也被稱作 void elements。

+
+ +

屬性(Attributes)

+ +

你也可以在元素中加入屬性，像是：

+ +

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

+ +

屬性有著關於元素的額外資訊，但你並不會想要顯示它們。在這個例子中 class 屬性讓你能夠賦予一個元素辨別名稱，稍後就能用這個名稱來指定元素的樣式及其他的東西。

+ +

一個屬性應該要有：

+ +
    +
  1. 一個空白，用來隔開屬性和元素名稱(或者前一個屬性，如果該元素已經有一個以上的屬性的話)。
    2. +
  2. 屬性名稱以及一個接在其後的等號。
    3. +
  3. 屬性值以及一對包著它的引號。
    4. +
+ +

主動學習: 在元素中加入屬性

+ +

我們再舉另外一個元素的例子 {{htmlelement("a")}} 代表 anchor (錨)，而這個元素會讓被它包裹住的內容變成一個超連結。它可以和很多種屬性搭配，以下僅列出幾種：

+ + + +

請編輯下面輸入區的文字，使它變成一個通往你最喜歡的網站的連結。

+ +
    +
  1. 首先，加入<a> 元素。
    2. +
  2. 再來，加入 href 屬性以及 title 屬性。
    3. +
  3. 最後，將 target 屬性設定為在新分頁中開啟。
    4. +
+ +

你將會在底下的輸出區域裡面即時地看到你改動產生的變化。當你完成後，你應該會看到一個連結；當你滑過時，連結將顯示 title 屬性的內容；當你點擊連結時，將會導向到 href 元素中的網址。切記，你需要以空白隔開元素名字以及每一個屬性。 

+ +

如果你不小心打錯了，你可以按下 Reset 鍵重置。如果你卡關了，可以點擊 Show solution 鍵來偷看答案。

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 300) }}

+ +

布林屬性(Boolean attributes)

+ +

你有時會看到一些沒有值的屬性，這完全是可行的。它們叫做布林屬性，他們只能附帶一個值，而這個值一般來說會和屬性的名字一樣。以 {{htmlattrxref("disabled", "input")}} 屬性來說，你可以把它指派為 input 元素的屬性，使得輸入文字的框框變得不能輸入文字。

+ +
<input type="text" disabled="disabled">
+ +

你可以把它寫得更簡短(在下面的例子中，我們也寫出了沒有 disabled 屬性的 input 元素供你參考，讓你更了解兩者的差別)：

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

結果 :

+ +

{{ EmbedLiveSample('布林屬性Boolean_attributes' , 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

忘記加屬性值的引號

+ +

當你看遍全世界的網頁，你就會發現各種千奇百怪的標記風格(markup style)，包括沒加引號的屬性值。這在某些情況是被允許的，但在其他情況下則會使屬性結果不如預期。沿用我們之前的例子，我們先只用 href 屬性，如下:

+ +
<a href=https://www.mozilla.org/>favourite website</a>
+ +

看起來沒甚麼問題，但是，一旦我們加上 title 屬性時，就會造成錯誤的結果: 

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>
+ +

此時瀏覽器會誤解你的標記，認為 title 屬性其實是三個屬性：一個值為 "The" 的標題屬性，以及兩個布林屬性 Mozilla 和 homepage。這絕對不是你想要的結果，而且會導致錯誤或者意想不到的行為。你可以看看下面的示範，把你的游標移到連結上，看看會出現什麼提示!

+ +

{{ EmbedLiveSample('忘記加屬性值的引號', 700, 100) }}

+ +

我們建議不管怎樣都要加屬性引號，避免這些錯誤，同時增加原始碼的可讀性。

+ +

要用單引號還是雙引號? (Single or double quotes?)

+ +

在這個章節中，你會發現所有的屬性都是使用雙引號，而你可能會發現其他人的 HTML 中使用的是單引號。這純粹是個人風格，你可以依照你個人的喜好去使用它們。下面兩行的意思是相同的：

+ +
<a href="http://www.example.com">A link to my example.</a>
+
+<a href='http://www.example.com'>A link to my example.</a>
+ +

但是，你應該確認你沒有混著使用它們。下面這行則會造成錯誤！

+ +
<a href="http://www.example.com'>A link to my example.</a>
+ +

如果你在你的 HTML 中使用其中一種引號，你就可以包裹另外一種引號：

+ +
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+ +

不過，如果你想要包裹相同種類的引號，你就必須要用到 HTML entities。例如，以下範例是錯的：

+ +
 <a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
+ +

你應該要這樣寫：

+ +
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
+ +

解析 HTML 文檔

+ +

以上講述了 HTML 中個別元素的基礎知識，但是單獨使用它們，並沒有多大用處。所以現在就讓我們來看看如何將這些元素組成一個 HTML 網頁吧：

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

這裡有：

+ +
    +
  1. <!DOCTYPE html>: 文件類型(doctype)。 在很久很久以前，當 HTML 還年輕的時候(約莫在西元 1991 年左右)，文件類型是要作為一系列規範的連結，HTML 網頁必須要遵守這些規範才會被當作是好的 HTML，比如說具備自動錯誤檢查和其他有用的東西等。在那個時候，它們看起來像這樣： + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + 不過，現在已經沒有人在乎它們了，它們只是個歷史痕跡，需要形式上地被引入，以確保一切正常。<!DOCTYPE html> 是字數最短的有效 doctype。你只需要知道這些就夠了。
    2. +
  2. <html></html>: {{htmlelement("html")}} 元素。該元素包裹住頁面的所有內容，有時也被稱作根元素(root element)。
    3. +
  3. <head></head>: {{htmlelement("head")}} 元素。這個元素放著你想含括的所有重要資訊，這些資訊不會呈現在網頁瀏覽者眼前。這些東西包括，顯示於搜尋結果的關鍵字、頁面說明、CSS 等等。你將會在這個系列的下個章節中學到更多有關這部分的知識。
    4. +
  4. <meta charset="utf-8">: 這個元素指定你的文件使用 UTF-8 為字元編碼，這種編碼含有這世上大部分語言的字元，理論上可以處理所有你想放文字內容，因此建議大家都要使用這種編碼，它能幫你免去許多煩惱。
    5. +
  5. <title></title>: {{htmlelement("title")}} 元素。這是用來設定網頁名稱的，它會顯示在分頁標籤上，當你將該網頁加入書籤或加入最愛時，則是用來形容這個網站。
    6. +
  6. <body></body>: {{htmlelement("body")}} 元素含括了所有你想要給網頁瀏覽者看到的內容，不管是文字、圖片、遊戲、可以播放的音樂或其他東西。
    7. +
+ +

主動學習: 在HTML文檔中加入一些特徵

+ +

如果你想試試看在你的電腦上寫一些 HTML，你可以: 

+ +
    +
  1. 複製上面的 HTML 範例。
    2. +
  2. 在你的文字編輯器中建立一個新檔案。
    3. +
  3. 將剛複製的 HTML 範例貼到新開的檔案裡。
    4. +
  4. 將檔案儲存為 index.html。
    5. +
+ +
+

Note: 你也可以在這找到基本的 HTML 範本: MDN Learning Area Github repo。

+
+ +

接著你就可以用網頁瀏覽器開啟你的檔案，看看這些原始碼會被渲染(rendered)成什麼樣子，然後編輯原始碼並重新整理瀏覽器，再看看會變成怎樣。目前你的網頁會長這樣：

+ +

A simple HTML page that says This is my page在這個練習中，你可以在自己的電腦中撰寫原始碼，就像上面寫的一樣，或者你可以在底下的範例視窗中進行編輯(該視窗僅表示 {{htmlelement("body")}} 元素的內容) 我們希望你依照以下的步驟逐步前行：

+ + + +

如果你不小心打錯了，你可以用 Reset 鍵重置。如果你卡關了，可以點擊 Show solution 鍵來偷看答案。

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 600) }}

+ +

HTML中的空格(Whitespace)

+ +

在上面的範例中，你可能會發現原始碼中有許多空格，其實這是完全不需要的，下面兩段原始碼會有相同的結果: 

+ +
<p>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</p>
+ +

不管你用多少空格(whitespace，包括空白字元與換行字元)，HTML 的語法分析器都只會留下一個空格。所以說，為什麼要用這麼多空格呢？答案是為了增加可讀性 — 適當的排版會讓人更明白你的原始碼，所以千萬不要把你的原始碼擠成一團，讓它們變得雜亂無章。在我們的 HTML 中，我們將每個巢狀的元素都以兩個空格縮排。原始碼的排版風格(如要用多少空格進行縮排)，可依照個人喜好使用，但你的排版方式應該要一致。

+ +

實體參照(Entity references): 引用 HTML 中的特殊字元

+ +

在 HTML 中， < 、 > 、 " 、 ' 和 & 是特殊字元，它們是 HTML 語法的一部份。那麼，要如何使用這些特殊字元呢？比方說，你如果想要用 & (ampersand)或小於符號  < (less than sign) 時，要如何避免它們被瀏覽器當成原始碼呢？

+ +

這時候我們就需要用到字元參照(character references)，它們是用來表示特殊字元的編碼，專門用在這種情形上。每個字元參照都是以 & (ampersand) 起頭，以分號 ; (semi-colon) 做結。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
字元相應的字元引用
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

如果你英文不錯的話，應該不難發現字元參照其實就是這些字元的英文縮寫，也就是說，"&lt;" 為 less than (小於)；"&gt;" 為 great than (大於)；"&quot;" 為 quotation (引號)；"&apos;" 為 apostrophe (單引號)；"&amp;" 為 ampersand (和號)。你可以透過下面的維基連結來查看 HTML 的字元實體參照。在下面的範例中，你可以看到兩段敘述網頁技術的段落:

+ +
<p>In HTML, you define a paragraph using the <p> element.</p>
+
+<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
+ +

看到下面的輸出結果，你會發現第一個段落是錯誤的，因為瀏覽器認為第二個 <p> 是要開啟新段落。而第二個段落就沒問題，因為我們將 < 及 > 換成了字元參照。

+ +

{{ EmbedLiveSample('實體參照Entity_references_引用_HTML_中的特殊字元', 700, 200, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: 你可以在維基百科中找到完整的 HTML 字元實體參照的對照表: List of XML and HTML character entity references。請記得只要你的 HTML 的字元編碼設定為 UTF-8，你就不需要使用其他字元的實體參照，因為現今的瀏覽器都能應付。

+
+ +

HTML 註解

+ +

HTML 就像大部分的程式語言，提供了一種能讓我們可以在原始碼中加入註解的方式 — 註解是會被瀏覽器忽略，並且不會被使用者看到的，它們存在的目的是要讓你得以在原始碼中說明你的原始碼是如何運作的、每段原始碼的作用等等。當你已經六個月沒有察看某個網頁的原始碼，而你完全想不起來你做了什麼的時候、或是當你把你的原始碼交給別人一同協作時，註解將會是你的好朋友！

+ +

試著將你 HTML 檔案中的一部份內容變成註解，你需要將內容包裹在特殊的符號 <!-- 和 -->之中，例如：

+ +
<p>I'm not inside a comment</p>
+
+<!-- <p>I am!</p> -->
+ +

如你所見，在下方的範例中，第一個段落出現在輸出結果中，但第二個段落並沒有出現。

+ +

{{ EmbedLiveSample('HTML_註解', 700, 100) }}

+ +

總結

+ +

恭喜你看完了這個章節，我們你能享受這個學習基礎 HTML 的旅程！目前，你應該已經了解 HTML 長什麼樣子、它最基本的運作方式，並且能夠寫出一些元素和屬性。基礎 HTML 大致上就到這裡結束，在單元接下來的章節中，我們將會更深入探討本章節學到的內容並介紹更多 HTML 的觀念。千萬別轉台！

+ +
+

Note: 目前，在你要開始學更多有關 HTML 的知識時，你可能也想要探索基礎的 CSS(Cascading Style Sheets)。CSS 是一種用來為你的網頁增添花樣的語言，例如改變字型、顏色，或改變頁面的布局。你很快就會發現，同時使用 HTML 和 CSS 會帶來很棒的效果。

+
+ +

 另見

+ + + +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

在本主題中的內容

+ + diff --git a/files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..fc0e2eff89 --- /dev/null +++ b/files/zh-tw/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,953 @@ +--- +title: 基本 HTML 文字 +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

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

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

基本：標題與段落

+ +

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

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

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

+ +

在HTML裡，每個段落都被包在 {{htmlelement("p")}} 元素中，就像：

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

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

+ +
<h1>I am the title of the story.</h1>
+ +

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

+ +

實作架構化階層

+ +

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

+ +
<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>
+ +

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

+ + + +

為何我們需要架構？

+ +

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

+ +

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

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

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

+ + + +

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

+ +

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. 如果你中途卡關，點擊按鈕來查看答案。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

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 {{htmlelement("h1")}} 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."

+ +
<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:

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

This is a {{htmlelement("span")}} 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 {{htmlelement("ul")}} element — this wraps around all the list items:

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:

+ +
<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.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

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 {{htmlelement("ol")}} element, rather than <ul>:

+ +
<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.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

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.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

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:

+ +
<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:

+ +
<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 {{htmlelement("em")}} (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 {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below).

+ +
<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 {{htmlelement("strong")}} (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 {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below).

+ +
<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:

+ +
<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.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Italic, bold, underline...

+ +

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} 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.

+ + + +
+

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.

+
+ +
<!-- 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.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/zh-tw/learn/html/introduction_to_html/index.html b/files/zh-tw/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..47c9f80769 --- /dev/null +++ b/files/zh-tw/learn/html/introduction_to_html/index.html @@ -0,0 +1,61 @@ +--- +title: HTML介紹 +slug: Learn/HTML/Introduction_to_HTML +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

本質上，{{glossary("HTML")}} 是一種非常簡單的語言，由元素所組成。元素可以賦予文字片段不同的意義 (比方說，將它們描述成段落、項目清單，或是表格的一部分)、將文件組織成不同的邏輯區段 (如標頭(header)、三行的內文，或是導覽目錄)，以及在網頁中嵌入圖片或影片等內容。在這個主題中我們將介紹前面兩項，並介紹基本概念以及語法以讓你了解 HTML。

+ +

預備知識

+ +

在開始閱讀之前，你並不需要具備任何 HTML 知識，你只要能夠操作電腦、瀏覽網頁並消化其中的內容即可。你需要建立一個基礎工作環境，並且了解如何建立與管理檔案──這些都屬於我們 Web 入門 的一部分。

+ +
+

提示: 如果您是在某些無法建立個人檔案的電腦/平板/其他裝置上進行，您可以在一些線上 coding program (如 JSBin 或 Thimble) 上測試程式碼範例。

+
+ +

導覽

+ +

這個主題包含以下子題，將帶你了解所有 HTML 的基礎理論，並且提供充足的機會讓你測試所習得的技能。

+ +
+
HTML 入門
+
包含 HTML 最基礎的部分──我們將定義元素（elements）、屬性（attributes）以及其他重要術語，並且介紹它們的使用方法。除此之外，我們也將說明典型的 HTML 網頁及其中的元素是如何構成的，並解釋其他重要的基本語言特性。還有，我們也會玩一些 HTML，好引發你的興趣！
+
在 head 中有什麼? HTML 中的後設資料(Metadata)
+
HTML 文件的 head 是在網頁加載完畢之後，不會顯示在瀏覽器上的部分。其中包含一些資訊，如頁面的標題({{htmlelement("title")}})、{{glossary("CSS")}} 的連結 (當你想利用 CSS 來妝點你的頁面 HTML 時，你會用到它們)、網頁圖示(favicon)的連結，以及 metadata (裡頭承載了有關於該 HTML 的資料，如作者、描述該文件的關鍵詞等。)
+
HTML 文字的基礎知識
+
一個 HTML 的主要作用是賦予純文字意義(又稱為語義化)，好讓瀏覽器知道如何正確地顯示它。這篇文章將探討如何使用 HTML 來將文字區塊拆解為標題(heading)和段落(paragraph)、強調字詞、建立列表等等。
+
建立超連結
+
超連結真的非常重要 — 它造就了我們現今所知的網路。這篇文章介紹超連結的使用語法，並且探討建立連結的最佳實踐方法。
+
進階文字格式
+
在 HTML 中還有許多可以用來格式化文字的元素，但我們沒有在 HTML 文字的基礎知識中提及這些內容。雖然這些元素比較鮮為人知，不過還是相當值得一談。在這篇文章中，你將會學到如何表示引言、描述列表、程式碼、上下標，及聯繫訊息等等。 
+
文件與網站架構
+
除了分別定義網頁的各個成分（例如：段落或是圖片），HTML 還能定義網頁上的區塊（例如：標頭、導航列或是主要內容）。這篇文章將介紹如何規劃一個基本的網頁架構，以及如何透過編寫 HTML 來表示網頁架構。
+
HTML 除錯
+
如果 HTML 出錯了，卻找不到哪裡有錯誤該怎麼辦？這篇文章將會介紹一些能幫得上忙的實用工具。
+
+ +

評量

+ +

下面的評量將測試您對於以上的 HTML 基礎是否已經了解。

+ +
+
標記信件內容
+
我們都學過怎麼寫信，而信件也是用來測試我們格式化文字技巧的好例子。在這份測驗中，你將需要以 HTML 將一封信標記成題目要求的樣子。
+
組織網頁內容
+
這份測驗將要測試你利用 HTML 來組織網頁的能力，該網頁將包含頁眉(header)、頁腳(footer)、導覽列(navigation)、內文(main content)和側邊攔(sidebar)。
+
+ +

另見

+ +
+
Web literacy basics 1
+
Mozilla 基金會所提供的一個優質課程。該課程探索並測驗了很多在本主題中所提及的技術。透過裡頭的六大學習主題，學習者能夠熟悉閱讀、撰寫以及參與網路，並經由實作與合作了解網路基礎。
+
+ +
+

回饋

+ +

請填寫問卷以協助改善我們的導覽與教學。

+
diff --git a/files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..db41ab4ec4 --- /dev/null +++ b/files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,261 @@ +--- +title: What’s in the head? Metadata in HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +tags: + - 初學者 +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

HTML 文件的 {{glossary("Head", "head")}} 是網頁在加載完畢之後，不會顯示在瀏覽器上的部分。其中包含一些資訊，如頁面的標題({{htmlelement("title")}})、{{glossary("CSS")}} 的連結 (當你想利用 CSS 來妝點你的頁面 HTML 時，你會用到它們)、網頁圖示(favicon)的連結，以及 metadata (裡頭承載了有關於該 HTML 的資料，如作者、描述該文件的關鍵詞等)。在這一章節裡，我們會討論以上的內容，甚至更多，藉此替你打下標記網頁的根基。

+ + + + + + + + + + + + +
需求：對 HTML 的基礎認識，內容我們已在 HTML 入門中提及。
目標：學習 HTML 的 head，了解它的目的、它能包含什麼重要東西，以及它對 HTML 文件產生的影響。
+ +

什麼是 HTML head?

+ +

讓我們再看一次之前所看過的 HTML 文件：

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

HTML 的 head 就是 {{htmlelement("head")}} 元素裡面的內容 — 跟 {{htmlelement("body")}} 元素中的內容不同（當網頁被載入瀏覽器中時，會呈現在頁面上），head 裡的內容不會顯示在頁面上，它的任務是要容納文件的 {{glossary("Metadata", "metadata")}}。在上例中，head 只有這樣：

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

假如換作是較大型的網頁，head 裡面可能就會有非常多東西了。現在你可以先到幾個你常去的網站，並利用開發者工具來檢視它們的 head。我們在這裡並不打算要向你展示所有能放在 head 中的東西，而是教你使用一些常用的元素，讓你熟悉熟悉它們。總而言之，讓我們開始吧！

+ +

加入標題(title)

+ +

我們已經看到活生生的 {{htmlelement("title")}} 元素了 — 這東西就是用來為文件加上標題的。你可能會把它跟 {{htmlelement("h1")}} 搞混，{{htmlelement("h1")}} 是用來為網頁主體加上標題的元素，有時也被叫做頁面標題 (page title)，雖然聽起來功能很像，但他們是不同的東西！

+ + + +

不要光是看：檢視一個簡單的範例

+ +
    +
  1. 在開始這次主動學習之前，請你先到我們的 GitHub repo 中下載一份 title-example.html page。要做到這件事情，你可以： + +
      +
    1. 用你的文字編輯器開一個新檔案，並將原始碼複製到裡面，然後再儲存在一個合適的地方。
      2. +
    2. 按下網頁上的 Raw 按鈕，它就會將原始碼以純文字的形式顯示在你瀏覽器的新分頁上。接著點按右鍵，將檔案儲存在你喜歡的地方。
      3. +
    +
    2. +
  2. 現在在你的瀏覽器中開啟檔案，你看到的東西應該會長這樣： +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.這樣子你應該可以很清楚地看到哪裡是 <h1>，而哪裡是 <title> 了！

    +
    3. +
  3. 試著開啟文字編輯器，修改兩元素的內容，儲存後再重整網頁，看看有什麼不同。
    4. +
+ +

<title> 元素中的內容也被用在其他地方。舉個例子，如果你想要收藏這個網頁，(在 Firefox 上是 書籤 > 將本頁加入書籤 或按下 URL 列的星星符號)，你就會看到 <title> 的內容被設為建議的書籤名稱。

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

接下來你就會看到，<title> 的內容也會被用在搜尋當中。

+ +

Metadata: <meta> 元素

+ +

Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the {{htmlelement("meta")}} element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of <meta> element that can be included in your page's <head>, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.

+ +

指定文件字元編碼

+ +

In the example we saw above, this line was included:

+ +
<meta charset="utf-8">
+ +

This element simply specifies the document's character encoding — the character set that the document is permitted to use. utf-8 is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,If you set your character encoding to ISO-8859-1, for example (the character set for the Latin alphabet), your page rendering would be all messed up:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +

Active learning: Experiment with character encoding

+ +

To try this out, revisit the simple HTML template you obtained in the previous section on <title> (the title-example.html page), try changing the meta charset value to ISO-8859-1, and add the Japanese to your page. This is the code we used:

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

加入作者(author)和描述(description)

+ +

Many <meta> elements include name and content attributes:

+ + + +

Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page. Let's look at an example:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="The MDN Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications.">
+ +

Specifying an author is useful in a few ways: it is useful to be able to work out who wrote the page, if you want to contact them with questions about the content. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.

+ +

Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed Search Engine Optimization, or {{glossary("SEO")}}.)

+ +

Active learning: The description's use in search engines

+ +

The description is also used on search engine result pages. Let's go through an exercise to explore this

+ +
    +
  1. Go to the front page of The Mozilla Developer Network.
    2. +
  2. View the page's source (Right/Ctrl + click on the page, choose View Page Source from the context menu.)
    3. +
  3. Find the description meta tag. It will look like this: + 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    +
    4. +
  4. Now search for "Mozilla Developer Network" in your favorite search engine (We used Yahoo.) You'll notice the description <meta> and <title> element content used in the search result — definitely worth having! +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Note: In Google, you will see some relevant subpages of MDN listed below the main MDN homepage link — these are called sitelinks, and are configurable in Google's webmaster tools — a way to make your site's search results better in the Google search engine.

+
+ +
+

Note: Many <meta> features just aren't used any more. For example, the keyword <meta> element (<meta name="keywords" content="fill, in, your, keywords, here">) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.

+
+ +

其他種類的metadata

+ +

As you travel around the web, you'll find other types of metadata, too. A lot of the features you'll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.

+ +

For example, Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN sourcecode, you'll find this:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

One effect of this is that when you link to MDN on facebook, the link appears along with an image and description: a richer experience for users.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter also has its own similar proprietary metadata, which has a similar effect when the site's URL is displayed on twitter.com. For example:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

加入屬於自己的網頁icon

+ +

To further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts.

+ +

The humble favicon, which has been around for many years, was the first icon of this type, a 16 x 16 pixel icon used in multiple places. You'll see favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.

+ +

A favicon can be added to your page by:

+ +
    +
  1. Saving it in the same directory as the site's index page, saved in .ico format (most browsers will support favicons in more common formats like .gif or .png, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
    2. +
  2. Adding the following line into your HTML <head> to reference it: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Here is an example of a favicon in a bookmarks panel:

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

There are lots of other icon types to consider these days as well. For example, you'll find this in the source code of the MDN homepage:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.

+ +

Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code.

+ +

在HTML中加入CSS和JavaScript

+ +

Just about all websites you'll use in the modern day will employ {{glossary("CSS")}} to make them look cool, and {{glossary("JavaScript")}} to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the {{htmlelement("link")}} element and the {{htmlelement("script")}} element, respectively.

+ + + +

Active learning: applying CSS and JavaScript to a page

+ +
    +
  1. To start this active learning, grab a copy of our meta-example.html, script.js and style.css files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.
    2. +
  2. Open the HTML file in both your browser, and your text editor.
    3. +
  3. By following the information given above, add {{htmlelement("link")}} and {{htmlelement("script")}} elements to your HTML, so that your CSS and JavaScript are applied to your HTML.
    4. +
+ +

If done correctly, when you save your HTML and refresh your browser you'll see that things have changed:

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

Note: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our css-and-js.html example page.

+
+ +

預設文件語言

+ +

Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the lang attribute to the opening HTML tag (as seen in the meta-example.html and shown below.)

+ +
<html lang="en-US">
+ +

This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set (allowing it to appear correctly in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both French and English, but is pronounced differently.)

+ +

You can also set subsections of your document to be recognised as different languages. For example, we could set our Japanese language section to be recognised as Japanese, like so:

+ +
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

These codes are defined by the ISO 639-1 standard. You can find more about them in Language tags in HTML and XML.

+ +

總結

+ +

That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

-- cgit v1.2.3-54-g00ecf