diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
| commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
| tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/learn/html/introduction_to_html | |
| parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
| download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip | |
initial commit
Diffstat (limited to 'files/zh-tw/learn/html/introduction_to_html')
7 files changed, 2966 insertions, 0 deletions
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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">There are many other elements in HTML for formatting text, which we didn't get to in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> 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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To learn how to use lesser-known HTML elements to mark up advanced semantic features.</td> + </tr> + </tbody> +</table> + +<h2 id="說明列表">說明列表</h2> + +<p>In HTML text fundamentals, we walked through how to <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">mark up basic lists</a> in HTML, but we didn't mention the third type of list you'll occasionally come across — <strong>description lists</strong>. 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:</p> + +<pre>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</pre> + +<p>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:</p> + +<pre class="brush: html"><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></pre> + +<p>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.</p> + +<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 addtional background information.</dd> +</dl> + +<p>Note that it is permitted to have a single term with multiple descriptions, for example:</p> + +<dl> + <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> + <dd>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.)</dd> +</dl> + +<h3 id="Active_learning_Marking_up_a_set_of_definitions">Active learning: Marking up a set of definitions</h3> + +<p>It's time to try your hand at description lists; add elements to the raw text in the <em>Input</em> field so that it appears as a description list in the <em>Output</em> field. You could try using your own terms and descriptions if you like.</p> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Bacon +The glue that binds the world together. +Eggs +The glue that binds the cake together. +Coffee +The drink that gets the world running in the morning. +A light brown color.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<dl>\n <dt>Bacon</dt>\n <dd>The glue that binds the world together.</dd>\n <dt>Eggs</dt>\n <dd>The glue that binds the cake together.</dd>\n <dt>Coffee</dt>\n <dd>The drink that gets the world running in the morning.</dd>\n <dd>A light brown color.</dd>\n</dl>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h2 id="Quotations">Quotations</h2> + +<p>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.</p> + +<h3 id="Blockquotes">Blockquotes</h3> + +<p>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 <code><blockquote></code> element page:</p> + +<pre class="brush: html"><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></pre> + +<p>To turn this into a block quote, we would just do this:</p> + +<pre class="brush: html"><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></pre> + +<p>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:</p> + +<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> +<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p> +</blockquote> + +<h3 id="Inline_quotations">Inline quotations</h3> + +<p>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 <code><q></code> page:</p> + +<pre class="brush: html"><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></pre> + +<p>Browser default styling will render this as normal text put in quotes to indicate a quotation, like so:</p> + +<p>The quote element — <code><q></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> + +<h3 id="Citations">Citations</h3> + +<p>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 <code>cite</code>, 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 <code><cite></code> to the quote source in some way:</p> + +<pre class="brush: html"><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></pre> + +<p>Citations are styled in italic font by default. You can see this code at work in our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> example.</p> + +<h3 id="Active_learning_Who_said_that">Active learning: Who said that?</h3> + +<p>Time for another active learning example! In this example we'd like you to:</p> + +<ol> + <li>Turn the middle paragraph into a blockquote, which includes a <code>cite</code> attribute.</li> + <li>Turn part of the third paragraph into an inline quote, which includes a <code>cite</code> attribute.</li> + <li>Include a <code><cite></code> element for each quote</li> +</ol> + +<p>Search online to find appropriate quote sources.</p> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><p>Hello and welcome to my motivation page. As Confucius once said:</p> + +<p>It does not matter how slowly you go as long as you do not stop.</p> + +<p>I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk +(as mentioned in Affirmations for Positive Thinking.)</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> once said:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>It does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>I also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com/index.htm">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> + +<h2 id="Abbreviations">Abbreviations</h2> + +<p>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> + +<pre><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></pre> + +<p>These will come out looking something like this (the expansion will appear in a tooltip when the term is hovered over):</p> + +<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> + +<div class="note"> +<p><strong>Note</strong>: There is another element, {{htmlelement("acronym")}}, which basically does the same thing as <code><abbr></code>, 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 <code><abbr></code>, and has such as similar function that it was felt pointless to have both. Just use <code><abbr></code> instead.</p> +</div> + +<h3 id="Active_learning_marking_up_an_abbreviation">Active learning: marking up an abbreviation</h3> + +<p>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. </p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><p>NASA sure does some exciting work.</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 5em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p> + +<h2 id="Marking_up_contact_details">Marking up contact details</h2> + +<p>HTML has an element for marking up contact details — {{htmlelement("address")}}. This simply wraps around your contact details, for example:</p> + +<pre class="brush: html"><address> + <p>Chris Mills, Manchester, The Grim North, UK</p> +</address></pre> + +<p>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 <em>any</em> 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:</p> + +<pre class="brush: html"><address> + <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p> +</address></pre> + +<h2 id="Superscript_and_subscript">Superscript and subscript</h2> + +<p>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> + +<pre class="brush: html"><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></pre> + +<p>The output of this code looks like so:</p> + +<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> + +<h2 id="Representing_computer_code">Representing computer code</h2> + +<p>There are a number of elements available for marking up computer code:</p> + +<ul> + <li>{{htmlelement("code")}}: For making up generic pieces of computer code.</li> + <li>{{htmlelement("pre")}}: For marking up blocks of fixed width text, in which the whitespace is retained (generally code blocks.)</li> + <li>{{htmlelement("var")}}: For specifically marking up variable names.</li> + <li>{{htmlelement("kbd")}}: For marking up keyboard (and other types of) input entered into the computer.</li> + <li>{{htmlelement("samp")}}: For marking up the output of a computer program.</li> +</ul> + +<p>Let's look at a few examples. You should try having a play with these (try grabbing a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a> sample file):</p> + +<pre class="brush: html"><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></pre> + +<p>The above code will look like so:</p> + +<p>{{ EmbedLiveSample('Representing_computer_code','100%',300) }}</p> + +<h2 id="Marking_up_times_and_dates">Marking up times and dates</h2> + +<p>HTML also provides the {{htmlelement("time")}} element for marking up times and dates in a machine-readable format. For example:</p> + +<pre class="brush: html"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>></pre> + +<p>Why is this useful? Well, there are many different ways that humans write down dates. The above date could be written as:</p> + +<ul> + <li>20 January 2016</li> + <li>20th January 2016</li> + <li>Jan 20 2016</li> + <li>20/06/16</li> + <li>06/20/16</li> + <li>The 20th of next month</li> + <li><span lang="fr">20e Janvier 2016</span></li> + <li><span lang="ja">2016年1月20日</span></li> + <li><span lang="ja">And so on</span></li> +</ul> + +<p><span lang="ja">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 </span>{{htmlelement("time")}} element allows you to attach a unambiguous, machine-readable time/date for this purpose.</p> + +<p>The basic example above just provides a simple machine readable date, but there are many other options that are possible, for example:</p> + +<pre class="brush: html"><!-- Standard simple date --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>> +<!-- Just year and month --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>>January 2016</<span class="pl-ent">time</span>> +<!-- Just month and day --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 January</<span class="pl-ent">time</span>> +<!-- Just time, hours and minutes --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>>19:30</<span class="pl-ent">time</span>> +<!-- You can do seconds and milliseconds too! --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19:30:01.856</<span class="pl-ent">time</span>> +<!-- Date and time --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>>7.30pm, 20 January 2016</<span class="pl-ent">time</span>> +<!-- Date and time with timezone offset--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 January 2016 is 8.30pm in France</<span class="pl-ent">time</span>> +<!-- Calling out a specific week number--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>>The fourth week of 2016</<span class="pl-ent">time</span>></pre> + +<h2 id="Summary">Summary</h2> + +<p>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 <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a> (the <a href="/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text semantics</a> 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.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">超連結(Hyperlinks)真的超級重要 — 它造就了我們現今所熟知的網路。這篇文章將會介紹超連結的使用語法，並且探討建立它們的最佳實踐方法。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">需求：</th> + <td>我們在 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a> 中介紹過的 HTML 基礎，以及在 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 的文字基礎知識</a> 中介紹過的文字格式化技巧。</td> + </tr> + <tr> + <th scope="row">目標：</th> + <td>學習如何有效地使用超連結，並利用它們來連結多個檔案。</td> + </tr> + </tbody> +</table> + +<h2 id="什麼是超連結？">什麼是超連結？</h2> + +<p>超連結可說是網路中最令人振奮的革新技術。當然啦，早在網路技術萌芽之初，它們就已經在那了，它們正是網路之所以被稱為「網路」的最大原因 — 它讓我們的文件能任意地與其他文件(或者資源)相互連結（或是連結文件中的特定部份），讓我們能透過一個簡單的網路位址來經營我們的網路應用（相較之下，本機應用(native apps)就必須要安裝在主機上才能使用）。幾乎所有的網路內容都能被轉換成一個連結，讓網路瀏覽器在這些連結被點擊或觸發之後，跳轉到該網路位址({{glossary("URL")}})上。</p> + +<div class="note"> +<p><strong>Note</strong>: URL 能夠指向 HTML 檔案、純文字檔案、圖片、文字文件、影音檔案等等可存在網路上的東西。如果網路瀏覽器不知道如何顯示或者處理該檔案的話，它會問你想要開啟這個檔案（將檔案交由本機應用來處理）還是要下載該檔案（意即你可以待會兒再處理）。</p> +</div> + +<p>以 BBC 的主頁為例，裡面就包含了非常多的連結，各自連到不同新聞、網站的其它地方(導覽功能)，或者登入/註冊頁面等等。</p> + +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/17032/updated-bbc-website.png" style="display: block; height: 455px; margin: 0px auto; width: 700px;"></p> + +<h2 id="解析連結">解析連結</h2> + +<p>一個基本的連結由 {{htmlelement("a")}} 元素包裹一段文字而成(當然也不一定要是文字，見下方的{{anch("區塊級連結")}})，同時，你需要將網路位址填入 {{htmlattrxref("href", "a")}} 屬性中，這個屬性有時也被叫做<strong>超文字參考(Hypertext Reference)</strong>或<strong>目標(target)</strong>。</p> + +<pre class="brush: html"><p>I'm creating a link to +<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>. +</p></pre> + +<p>這會產生以下結果：</p> + +<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p> + +<h3 id="利用_title_屬性來添加額外資訊">利用 title 屬性來添加額外資訊</h3> + +<p>另外一個你可能會想在連結中附加的屬性是 <code>title</code>，它的目的是攜帶一個補充訊息到連結上，好比說目標網頁有什麼樣的資訊，或者是一些警告訊息，範例如下：</p> + +<pre class="brush: html"><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></pre> + +<p>這將會產生以下結果（當游標移到連結上方時，標題會以提示的形式出現）：</p> + +<p>I'm creating a link to <a class="ignore-external" 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> + +<div class="note"> +<p><strong>Note</strong>: 連結標題只有在游標停在連結上方時才會出現，也就是說那些只依賴鍵盤來瀏覽網頁的人將會很難看到這個訊息，因此，如果說標題資訊對網頁易用性(usability)有著重大影響的話，你應該把它放在大家都看得到的地方，比方說放在一般的文字元素裡。</p> +</div> + +<h3 id="不要只用看的：建立你自己的範例連結">不要只用看的：建立你自己的範例連結</h3> + +<p>主動學習時間！我們想要你用自己的文字編輯器來撰寫一個 HTML 文件(你可以修改我們的<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">入門範本</a>，那應該就很夠用了)。</p> + +<ul> + <li>試著在 HTML 的主體(body)中，加入一個以上的段落或者其他你學過的內容元素。</li> + <li>將一些內容轉換成連結。</li> + <li>增加標題屬性到連結中。</li> +</ul> + +<h3 id="區塊級連結Block-level_links">區塊級連結(Block-level links)</h3> + +<p>就像先前所提到的，你可以將任何內容轉換成連結，就算是<a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">區塊級元素</a>也沒問題！如果你有一張圖片要轉換成連結，你可以把圖片元素放在 <code><a></code> 標籤裡，像這樣：</p> + +<pre class="brush: html"><a href="https://www.mozilla.org/en-US/"> + <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> +</a></pre> + +<div class="note"> +<p><strong>Note</strong>: 在往後的教學中，你還會學到更多的圖片使用技法。</p> +</div> + +<h2 id="快速理解_URL_和路徑">快速理解 URL 和路徑</h2> + +<p>在完全搞懂連結標的(link target)之前，你必須要先瞭解什麼是 URL 和檔案路徑，而這個小節就是要帶你來看這些東西。</p> + +<p>URL 全名為 Uniform Resource Locator (一致資源定位器，俗稱網址)，是一條用來指出某樣東西在網路上的位址的字串。比如說 Mozilla 的英文主頁就是位在 <code>https://www.mozilla.org/en-US/</code>。</p> + +<p>URL 利用路徑來找到檔案，而路徑會指出你所感興趣的檔案位於檔案系統上的什麼地方。現在讓我們來看個簡單的目錄結構範例(請見我們的<a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">建立超連結</a>目錄)。</p> + +<p><img alt="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" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p><code>creating-hyperlinks</code> 是這個目錄結構的<strong>根目錄(root)</strong>，當你在本地端撰寫網站時，你會將整個網站都放在這樣的資料夾中。在我們的根目錄裡有 <code>index.html</code> 和 <code>contacts.html</code> 兩個檔案，在現實的情況中，<code>index.html</code> 會是我們的首頁或者登陸頁面(landing page，網站或它的某部份的進入點)。</p> + +<p>我們的根目錄中有兩個子目錄 — <code>pdfs</code> 和 <code>projects</code>，它們各自都有一個檔案在裡頭，分別是 <code>project-brief.pdf</code> 和 <code>index.html</code>。請記得，你可以很愉快地在一個專案中擁有兩個 <code>index.html</code>，只要它們處在檔案系統上的不同位址。很多網站都會這麼做，第二個 <code>index.html</code> 可能會拿來當作是與專案有關資訊的主登陸頁面。</p> + +<ul> + <li> + <p><strong>在相同目錄裡：</strong>如果你要連結的兩個檔案處在同一個的目錄下，你只需要寫指向的檔案名稱就行了。比方說，如果你想在 <code>index.html</code> (最上層的那個) 中加入一個通往 <code>contacts.html</code> 的超連結，你要用的 URL 就是 <code>contacts.html</code>：</p> + + <pre class="brush: html"><p>Want to contact a specific staff member? +Find details on our <a href="contacts.html">contacts page</a>.</p></pre> + </li> + <li> + <p><strong>往下到子目錄中</strong>：如果你想要在 <code>index.html</code> (還是最上層的那個) 中加入一個指向 <code>projects/index.html</code> 的超連結，在指出你要的檔案之前，你需要先往下進到 <code>projects</code> 目錄裡。要做到這件事，你可以先指出目錄名稱，然後加上一個 /，最後再加上檔案名稱。因此你要寫的 URL 會是 <code>projects/index.html</code>：</p> + + <pre class="brush: html"><p>Visit my <a href="projects/index.html">project homepage</a>.</p></pre> + </li> + <li> + <p><strong>往上到父目錄中</strong>：如果你想要在 <code>projects/index.html</code> 中加入一個指向 <code>pdfs/project-brief.pdf</code> 的超連結，你需要先往上進到 <code>pdf</code> 目錄裡。而「往上移動一個目錄」可以用 <code>..</code> 來表示，因此你要寫的 URL 會是 <code>../pdfs/project-brief.pdf</code>：</p> + + <pre class="brush: html"><p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: 你可以將多個這種語法組成一個較為複雜的 URL，例如：<code>../../../complex/path/to/my/file.html</code>。</p> +</div> + +<h3 id="文件片段_Document_fragments">文件片段 (Document fragments)</h3> + +<p>並不是每次都只能連到文件的頂端，你也可以連到 HTML 文件中的某個部分，而這個部分叫做<strong>文件片段(document fragment)</strong>。要做到這件事，你得先為你要連的元素設定 {{htmlattrxref("id")}} 屬性，通常你可以把連結設在標題(heading)上，像是下面這樣：</p> + +<pre class="brush: html"><h2 id="Mailing_address">Mailing address</h2></pre> + +<p>要連到特定的 <code>id</code>，你得在你的 URL 的後面加上一個 # 號，像這樣：</p> + +<pre class="brush: html"><p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p></pre> + +<p>你甚至可以利用文件片段來連到<em>同個文件的其他部分</em>：</p> + +<pre class="brush: html"><p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p></pre> + +<h3 id="絕對_URL_vs._相對_URL">絕對 URL vs. 相對 URL</h3> + +<p>你會在網路上看到兩個名詞，<strong>絕對 URL(absolute URL)</strong>和<strong>相對 URL(relative URL):</strong></p> + +<p><strong>絕對 URL</strong>：指向網路上的絕對位址，裡頭包含協定({{glossary("protocol")}})和網域名稱({{glossary("domain name")}})。舉個例子，假設一個 web server 的根目錄有一個 <code>projects</code> 目錄，裡面放著一個 <code>index.html</code>，該網站的網域為 <code>http://www.example.com</code>，則網頁可以透過網址 <code>http://www.example.com/projects/index.html</code> 來取得 (或寫成 <code>http://www.example.com/projects/</code> 也行，因為大多的 web server 都能在 URL 沒有明確指出時，自動找尋如 <code>index.html</code> 之類的登陸頁面)。</p> + +<p>絕對 URL 無論在什麼地方使用，它都會代表同一個位址。</p> + +<p><strong>相對 URL</strong>：指向一個檔案的相對位址，這跟我們在先前看到的非常類似。舉例來說，如果我們想要從 <code>http://www.example.com/projects/index.html</code> 連到同一目錄下的 PDF 檔，URL 就只要檔名就好 — 像是 <code>project-brief.pdf</code> — 不需要其它的資訊。如果那個 PDF 放在 <code>projects</code> 中叫做 <code>pdfs</code> 的子目錄裡，其相對連結就是 <code>pdfs/project-brief.pdf</code> (等效的絕對 URL 為 <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>)。</p> + +<p>相對 URL 指向的位址會受到檔案所在的真正位址影響 — 舉例來說，如果我們將 <code>index.html</code> 移出 <code>projects</code>，並放在網站的根目錄中 (也就是在最上層中)，裡頭指向 <code>pdfs/project-brief.pdf</code> 的相對 URL 連結會指到 <code>http://www.example.com/pdfs/project-brief.pdf</code>，而非 <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>。</p> + +<p>當然，<code>project-brief.pdf</code> 和 <code>pdfs</code> 的位置不會因為你移動 <code>index.html</code> 就改變 — 這會使得你的連結指到錯誤的地方，你一定得非常小心！</p> + +<h2 id="連結的最佳實踐">連結的最佳實踐</h2> + +<p>撰寫連結時有幾個最佳實踐方法，現在讓我們來看看吧。</p> + +<ul> +</ul> + +<h3 id="使用明確的字詞">使用明確的字詞</h3> + +<p>要在你的網頁上加入連結非常簡單，但這還不夠，我們必須確保連結能夠被所有讀者取用到，無論他們的背景或者使用的工具為何。比如說：</p> + +<ul> + <li>螢幕閱讀器的使用者會在頁面上的連結間跳來跳去，並且閱讀連結時不看上下文。</li> + <li>搜尋引擎使用連結上的文字來為目標建立索引，因此你可以將關鍵字包含在你的連結文字中，藉此有效地說明連結的對象。</li> + <li>以視覺進行閱讀的讀者對於內文往往匆匆一瞥，他們將注目在明顯的頁面特徵，像是連結，因此具有敘述性的連結文字將對他們有所助益。</li> +</ul> + +<p>我們來看幾個例子：</p> + +<p><em><strong>好的</strong>連結文字：</em><a href="https://firefox.com">下載 Firefox</a></p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + 下載 Firefox +</a></p></pre> + +<p><em><strong>不好的</strong>連結文字：</em><a href="https://firefox.com/">點這裡</a>來下載 Firefox</p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + 點這裡 +</a> +來下載 Firefox</p> +</pre> + +<p>其它小訣竅：</p> + +<ul> + <li>千萬別把 URL 當作連結文字 — URL 看起來醜斃了，更別提當螢幕閱讀器將它逐字唸出時會有多糟。</li> + <li>千萬別用「連結(link)」或「連至(link to)」— 那只是廢話罷了。螢幕閱讀器會直接告訴使用者哪邊有連結；而具有視力的讀者可以直接看出連結，因為連結通常使用不同的顏色，並且設有底線 (一般不會打破這項慣例，因為大家都已經習以為常了)，所以也不用多提。</li> + <li>讓你的連結越短越好 — 太長的連結會使螢幕閱讀器的使用者蒙受其害，因為他們必須從頭聽到尾。</li> + <li>盡量讓連結的文字不一樣，太多重複的連結文字會帶給螢幕閱讀器的使用者麻煩，因為他們可能會從一個連結表中選擇連結，因此若有許多重複的「點這裡」會讓他們相當困惑。</li> +</ul> + +<h3 id="盡可能使用相對連結">盡可能使用相對連結</h3> + +<p>經過之前的說明，你可能會覺得無論如何都應該採用絕對連結，畢竟它們不會像相對連結一樣，因為頁面被搬移而失效。然而，對於相同網站內的連結，你應該盡量使用相對連結 (連到別的網站的連結必須使用絕對連結)，原因如下：</p> + +<ul> + <li>首先，由於相對 URL 通常比絕對 URL 來得短，因此使用它可以增進原始碼的可讀性。</li> + <li>第二，使用相對 URL 比較有效率。當你使用絕對 URL 時，瀏覽器會先查看 server 在域名系統({{glossary("DNS")}}，詳情請見<a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">網路是如何運作的</a>) 上的真實位址，並再從那個位址開始尋找請求的檔案；如果我們使用相對 URL，瀏覽器就可以直接從那個 server 開始搜尋。因此，如果你在可以使用相對 URL 時而去使用絕對 URL，就會迫使你的瀏覽器不斷地進行額外的工作，進而降低效能。</li> +</ul> + +<h3 id="要連到非_HTML_的資源時請先聲明">要連到非 HTML 的資源時請先聲明</h3> + +<p>當連結連至一個需要下載的資源 (像是 PDF 或 Word 文件) 或是串流 (如影音串流) 或是其他有潛在未知影響的東西 (開啟彈出式視窗或者載入 Flash movie) 時，你應該要加上一些文字來預示，以下就是幾個非常惱人的情境：</p> + +<ul> + <li>假設你正處於低頻寬的連線，點擊連結之後，卻開始下載好幾 MB 的東西。</li> + <li>假設你沒有安裝 Flash player，點擊連結之後，卻進到一個需要 Flash 的頁面。</li> +</ul> + +<p>讓我們來看一些可以改善這些情況的方法：</p> + +<pre class="brush: html"><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></pre> + +<h3 id="當連結會觸發下載時，使用下載屬性">當連結會觸發下載時，使用下載屬性</h3> + +<p>當你連結一個需要下載的資源時，你可以使用 <code>download</code> 屬性來提供一個預設的儲存檔名。以下範例是最新版的 Windows 版 Firefox 的下載連結：</p> + +<pre class="brush: html"><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></pre> + +<h2 id="不要只用看的：建立一個導覽選單">不要只用看的：建立一個導覽選單</h2> + +<p>在這次練習中，我們想要你利用導覽列來將許多網頁連結在一起，創造出一個具有多個頁面的網站。這是一個很常見的網站建造方式 — 每一個網頁都使用同樣的網頁結構，其中包含相同的導覽選單，這樣子一來，當連結被點擊時，會讓人以為還留在原地，但內容卻倏忽更迭。</p> + +<p>你需要先在一個目錄中建立下面這四個網頁的複本 (你可以在 <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> 目錄下找到完整的清單)：</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>接著，你可以這麼做：</p> + +<ol> + <li>在指定的地方添加一個無序列表，裡面放著可以連到的網頁名稱。因為導覽選單其實就是一個連結的列表，所以這麼做在語義上沒什麼問題。</li> + <li>把每一個網頁名稱變成超連結。</li> + <li>把導覽選單複製到每一個頁面上。</li> + <li>把每個網頁中，連到自己的連結移除，因為這種連結毫無意義且令人困惑，此外，無連結的文字可以用來提示使用者的所在位置。</li> +</ol> + +<p>完成後的範例應該會長這樣：</p> + +<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Note</strong>: 如果你卡住了，或者不確定有沒有做對，你可以到 <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> 目錄來偷瞄答案。</p> +</div> + +<h2 id="E-mail_連結">E-mail 連結</h2> + +<p>你可以建立一個連結或按鈕，使得它被點擊之後，開啟一個正在撰寫中的電子郵件訊息。這可以透過 {{HTMLElement("a")}} 元素和 <code>mailto:</code> URL scheme 來達成。</p> + +<p>多數情況 <code>mailto:</code> 會填入收信人的電子郵件地址。例如：</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> +</pre> + +<p>它的結果會像是這樣：<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>。</p> + +<p>事實上，電子郵件地址是選填的。如果你將它留空 (也就是說，你的 {{htmlattrxref("href", "a")}} 只寫了 "mailto:")，使用者的 mail client 會開啟一個寄信視窗，其中並沒有指定收信人，這在使用「分享」連結時非常有用，使用者可以自行決定要寄給誰。</p> + +<h3 id="指定細節">指定細節</h3> + +<p>除了電子郵件地址之外，你還可以提供其他資訊，事實上，任何標準的郵件標頭欄位都能被加到 <code>mailto</code> URL 中，常見的有主旨(subject)、副本(cc)以及主體(body) (這個雖然不是真的標頭欄位，但能讓你放一條簡短的訊息在新郵件的主體中)。每個欄位與它的值被定義成一組查詢項(query term)。</p> + +<p>下面是一個包含 cc、bcc(密件副本)、subject 和 body 的範例：</p> + +<pre class="brush: html"><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></pre> + +<div class="note"> +<p><strong>Note:</strong> 每一個欄位的值必須以 URL 編碼，也就是將空白及不可印字元(不可見的字元如縮排(tabs)、回車<span lang="en">(carriage return</span>)、換頁(page breaks)等等)轉換成<a href="http://en.wikipedia.org/wiki/Percent-encoding">百分號編碼</a>。也請注意這裡使用問號(<code>?</code>)來分隔主要 URL 和其他欄位；以 & 來分隔 <code>mailto:</code> URL 中的不同的欄位，這是標準的 URL 查詢記號(query notation)。你可以閱讀 <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">GET 方法</a>來得知有那些常用的查詢記號。</p> +</div> + +<p>以下是 <code>mailto</code> URL 的其他例子：</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="小試身手！">小試身手！</h2> + +<p>你已經讀完這個章節囉，但你有掌握箇中的重點嗎？你可以在繼續閱讀後面的章節之前，先進行一些測驗 — 請前往<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links">小試身手：超連結。</a></p> + +<h2 id="總結">總結</h2> + +<p>總而言之，以上就是超連結的介紹了！ 稍後你在後續的課程中學到如何位連結增添樣式時，還會再碰到它們。HTML 的下一章，我們將繼續討論文字語義(text semantics)，並看一些進階／不常見的特性，相信你會獲益良多的 — 下一站是：進階文字格式化技巧！</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="在本主題中的內容">在本主題中的內容</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">{{glossary("HTML")}} 不僅能夠定義網頁的單獨部分（例如“段落”或“圖片”），還可以使用區塊級元素（例如“標題欄”、“導覽選單”、“主內容列”）來定義網站中的複合區域。本文將探討如何規劃基本的網站結構，並根據規劃的結構來編寫 HTML。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">預備知識:</th> + <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>. How hyperlinks work, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>.</td> + </tr> + <tr> + <th scope="row">學習目標:</th> + <td>學習使用語義標籤來建立文本，建置簡單的網站結構。</td> + </tr> + </tbody> +</table> + +<h2 id="文本的基本組成">文本的基本組成</h2> + +<p>網頁有各式各樣的外觀，但是除了全螢幕影片、遊戲或藝術作品頁面外，都傾向於使用類似的標準元件:</p> + +<dl> + <dt>頁首:</dt> + <dd>通常橫跨於整個頁面頂部有一個大標題。這是網站的主要資訊，通常存在於所有網頁。</dd> + <dt>導覽列:</dt> + <dd>指向網站各個主要區段的超連結。通常用選單按鈕、連結或頁簽來表示。類似於頁首，導航列通常應在所有網頁之間保持一致，否則會讓用戶感到疑惑，甚至無所適從。許多web 設計人員認為導航列是頁首的一部分，而不是獨立的元件，但這並非絕對；還有人認為，兩者獨立可以提供更好的<a href="/en-US/docs/Learn/Accessibility">無障礙</a>訪問特性，因為螢幕可以更清晰地分辨二者。</dd> + <dt>主要內容:</dt> + <dd>中心的大部分區域是當前網頁大多數的獨有內容，例如影片、文章、地圖、新聞等。這些內容是網站的一部分，且會因頁面而異。</dd> + <dt>側邊攔:</dt> + <dd>一些外圍資訊、連結、引用、廣告等。通常與主內容相關（例如一個新聞頁面上，側邊欄可能包含作者資訊或相關文章連結）。</dd> + <dt>頁尾:</dt> + <dd>橫跨頁面底部的狹長區域。和頁首一樣，頁尾是放置共用資訊（比如版權聲明或聯繫方式）的，一般使用較小字體，且通常為次要內容。還可以通過提供快速訪問連結來進行{{Glossary("SEO")}} 。</dd> +</dl> + +<p>一個“典型的網站”可能會這樣佈局:</p> + +<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="用於構造內容的HTML">用於構造內容的HTML</h2> + +<p>上面顯示的簡單範例並不美觀，但對於說明典型的網站佈局範例來說是非常好的。 有些網站上有更多欄，有些則複雜得多，但是您知道了。 使用正確的CSS，您幾乎可以使用任何元素來包裹不同的部分，並使其看起來像您想要的樣子，但是如前所述，我們需要遵守語義並將正確的元素用於正確的運行。</p> + +<p>這是因為視覺效果並不能說明整個故事。 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?</p> + +<div class="note"> +<p><strong>Note</strong>: Colorblind people represent around <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">4% of the world population</a> 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 <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 million such people in the world</a>, while the total population was <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">around 7 billion</a>).</p> +</div> + +<p>In your HTML code, you can mark up sections of content based on their <em>functionality</em> — 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 <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">consequences of not using the right element structure and semantics for the right job</a>.</p> + +<p>To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:</p> + +<ul> + <li><strong>header: </strong>{{htmlelement("header")}}.</li> + <li><strong>navigation bar: </strong>{{htmlelement("nav")}}.</li> + <li><strong>main content: </strong>{{htmlelement("main")}}, with various content subsections represented by {{HTMLElement("article")}}, {{htmlelement("section")}}, and {{htmlelement("div")}} elements.</li> + <li><strong>sidebar: </strong>{{htmlelement("aside")}}; often placed inside {{htmlelement("main")}}.</li> + <li><strong>footer: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Active_learning_exploring_the_code_for_our_example">Active learning: exploring the code for our example</h3> + +<p>Our example seen above is represented by the following code (you can also <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">find the example in our GitHub repository</a>). 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.</p> + +<pre class="brush: html notranslate"><!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></pre> + +<p>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.</p> + +<h2 id="HTML_layout_elements_in_more_detail">HTML layout elements in more detail</h2> + +<p>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 <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a>. For now, these are the main definitions that you should try to understand:</p> + +<ul> + <li>{{HTMLElement('main')}} is for content <em>unique to this page. </em>Use <code><main></code> only <em>once </em>per page, and put it directly inside {{HTMLElement('body')}}. Ideally this shouldn't be nested within other elements.</li> + <li>{{HTMLElement('article')}} encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).</li> + <li>{{HTMLElement('section')}} is similar to <code><article></code>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). It's considered best practice to begin each section with a <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">heading</a>; also note that you can break <code><article></code>s up into different <code><section></code>s, or <code><section></code>s up into different <code><article></code>s, depending on the context.</li> + <li>{{HTMLElement('aside')}} contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).</li> + <li>{{HTMLElement('header')}} represents a group of introductory content. If it is a child of {{HTMLElement('body')}} it defines the global header of a webpage, but if it's a child of an {{HTMLElement('article')}} or {{HTMLElement('section')}} it defines a specific header for that section (try not to confuse this with <a href="/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">titles and headings</a>).</li> + <li>{{HTMLElement('nav')}} contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.</li> + <li>{{HTMLElement('footer')}} represents a group of end content for a page.</li> +</ul> + +<h3 id="Non-semantic_wrappers">Non-semantic wrappers</h3> + +<p>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.</p> + +<p>{{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> + +<pre class="brush: html notranslate"><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></pre> + +<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.</p> + +<p>{{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:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>This isn't really an <code><aside></code>, 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 <code><section></code>, as it isn't part of the main content of the page. So a <code><div></code> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.</p> + +<div class="warning"> +<p><strong>Warning</strong>: 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.</p> +</div> + +<h3 id="Line_breaks_and_horizontal_rules">Line breaks and horizontal rules</h3> + +<p>Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:</p> + +<p><code><br></code> 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> + +<div id="line-break-live-sample"> +<pre class="brush: html notranslate"><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></pre> +</div> + +<p>Without the <code><br></code> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML ignores most whitespace</a>); with <code><br></code> elements in the code, the markup renders like this:</p> + +<p>{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<p><code><hr></code> 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> + +<div id="horizantal-rule-live-sample"> +<pre class="brush: html notranslate"><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></pre> +</div> + +<p>Would render like this:</p> + +<p>{{EmbedLiveSample('horizantal-rule-live-sample', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<h2 id="Planning_a_simple_website">Planning a simple website</h2> + +<p>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!</p> + +<ol> + <li>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.<img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>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.<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>Now, brainstorm all the other (not common to every page) content you want to have on your website — write a big list down.<img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>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")}}.<img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>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.<img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Active_learning_create_your_own_sitemap">Active learning: create your own sitemap</h3> + +<p>Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?</p> + +<div class="note"> +<p><strong>Note</strong>: Save your work somewhere; you might need it later on.</p> +</div> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>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 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a>. We'd advise going through the next article in the series first and not just skipping to it though!</p> + +<h2 id="Summary">Summary</h2> + +<p>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.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">本文將探討 HTML 最基本的部分。首先，我們將會定義元素(elements)、屬性(attributes)以及其它你可能聽過的重要名詞，然後講解該如何使用它們。我們也會告訴你典型的 HTML 頁面以及其中的元素是如何構成的，以及解釋其他重要的基礎語言特性。在此過程中，我們會撰寫一些 HTML 來引發你的興趣！</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">需求:</th> + <td>基礎電腦能力、已安裝<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">需要的基本軟體</a>、並知道如何<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">操作檔案</a>。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>對 HTML 產生初步認識、並練習如何撰寫 HTML 元素。</td> + </tr> + </tbody> +</table> + +<h2 id="什麼是_HTML">什麼是 HTML?</h2> + +<p>{{glossary("HTML")}} (Hypertext Markup Language) 並不是一種程式語言，而是用來告訴瀏覽器該如何呈現網頁的<strong>標記式語言(</strong><em><strong>markup language</strong></em><strong>)</strong>。它可以很複雜也可以很陽春，端看網頁開發者如何構思。HTML 由一系列的元素({{glossary("Element", "elements")}})組成，你將利用它們來圍住、包裹，或者說標記(<em>mark up</em>)網頁中的每個部分，使它們在外表或行為上呈現某種特定風貌。被標籤({{glossary("Tag", "tags")}})包住的內容會變成超連結，或者斜體字，以及諸如此類的功能，舉例來說，請看下列內容: </p> + +<pre>My cat is very grumpy</pre> + +<p>如果我們想要讓這行字獨立出來，不讓它跟其他東西排在一起，我們可以用段落標籤( paragraph tag {{htmlelement("p")}})讓它自成段落：</p> + +<pre class="brush: html"><p>My cat is very grumpy</p> +</pre> + +<div class="note"> +<p><strong>注意</strong>:<br> + HTML 中的元素是不區分大小寫的<em>。</em><br> + 例如 : 一個 {{htmlelement("title")}} 標籤可以寫成<code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTlE></code>，之類的形式，都沒有問題<em>。</em><br> + 通常來說，為了保持一致性(consistency)、可讀性(readability)，以及其他可能的原因，最好還是以小寫來撰寫標籤<em>。</em></p> +</div> + +<h2 id="分析_HTML_元素">分析 HTML 元素</h2> + +<p>讓我們更深入地探索段落中的元素：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>元素中主要的內容有: </p> + +<ol> + <li><strong>起始標籤(opening tag)：</strong>它包含了元素的名字(在這裡是 p)，夾在一對 <strong><、> (angle brackets)</strong>之間。它指明元素從何開始生效 — 在上例中則代表段落的開始。</li> + <li><strong>結束標籤(closing tag)：</strong>結束標籤和起始標籤長得差不多，只不過它在名字前面還多加了一條斜線 (forward slash) 。它表示元素結束的地方 — 在上例中表示該段落的結束。忘記加上結束標籤是初學者常犯的錯誤，這將導致奇怪的結果。</li> + <li><strong>內容(content):</strong> 元素的內容。在上例中就是一段文字。</li> + <li><strong>元素(element):</strong> 以上三者加起來就是元素。</li> +</ol> + +<h3 id="不要光是看_創造你的第一個_HTML_元素">不要光是看: 創造你的第一個 HTML 元素</h3> + +<p>編輯下面輸入區域中的文字，嘗試用 <code><em></code> 和 <code></em></code> 標籤包裹住文字(把 <code><em></code> 放在文字前面來起始元素，把 <code></em></code> 放在後面來結束元素) ，這會使得文字變成斜體字。你可以在下面的輸出區域看到更新後的變化。</p> + +<p>如果你不小心打錯了，你可以按下 <em>Reset</em> 鍵來重置。如果你卡關了，你可以點擊 <em>Show solution</em> 鍵來偷看答案。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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="playable-code" style="min-height: 100px;width: 95%"> + This is my text. +</textarea> + +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js">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 = '<em>This is my text.</em>'; +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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="巢狀元素Nesting_elements">巢狀元素(Nesting elements)</h3> + +<p>你可以把元素放進另一個元素裡面 — 這叫做<strong>巢套(nesting)</strong>。比如說，我們想要強調我們的貓咪<strong>非常</strong>兇，我們可以用{{htmlelement("strong")}}元素來包住 "very" 這個字，這樣就可以標註我們想要強調的字:</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>你必須確保你的元素正確地巢套：在上述範例中，我們先用了 <code>p</code> 元素，然後才用 <code>strong</code> 元素，因此我們必須先關閉 <code>strong</code> 元素，再關閉 <code>p</code> 元素。下面是錯誤示範：</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>這些元素必須要正確地開啟與關閉，它們與其他元素的內外關係要相當明確。如果它們像上例這樣交互重疊，你的網頁瀏覽器將無法解讀，只能盡可能地猜測你的意思，因此你很有可能會得到一個不如預期的結果。所以，別這樣做！！</p> + +<h3 id="區塊級元素_vs._行內元素Block_versus_inline_elements">區塊級元素 vs. 行內元素(Block versus inline elements)</h3> + +<p>在 HTML 中有兩種你應該要知道的重要元素類別 — 區塊級元素(block-level elements)和行內元素(inline elements)。</p> + +<ul> + <li>區塊級元素在頁面中組成一個可見區塊 — 它在頁面中單獨佔據一行，在它前後的內容都將以一個換行分隔。區塊級元素傾向於作為頁面上的結構化元素(structural elements)，舉凡段落、列表、導航選單(navigation menus)、頁尾(footers)等等皆是。區塊級元素不會巢套在行內元素中，但有可能會巢套其他區塊級元素中。 </li> + <li>行內元素指的是放在區塊級元素之中的內容，這些元素只由文件內容的一小部分組成，而非由完整段落或群組式內容組成。一個行內元素不會在文件中產生新的一行，它們通常只會出現在一段文字中，舉例來說，{{htmlelement("a")}} 元素(超連結)，或者強調元素如 {{htmlelement("em")}} 和 {{htmlelement("strong")}}。</li> +</ul> + +<p>以下面這個例子來說：</p> + +<pre class="brush: html"><em>first</em><em>second</em><em>third</em> + +<p>fourth</p><p>fifth</p><p>sixth</p> +</pre> + +<p>{{htmlelement("em")}} 是一個行內元素，所以你可以看到下面的例子中，前三個元素互相緊鄰在同一行，兩兩中間並無任何空白。另一方面，{{htmlelement("p")}} 是一個區塊級元素，所以每個元素都自成一行，並且上下都有一些空間。(這些空間是由於瀏覽器套用預設的<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a>到這些段落上的緣故)。</p> + +<p>{{ EmbedLiveSample('區塊級元素_vs._行內元素Block_versus_inline_elements', 700, 200, "", "") }}</p> + +<div class="note"> +<p><strong>Note</strong>: HTML5 重新定義了元素類別：請見 <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>。新的定義比先前所定義的更為準確且少歧義性，因此它們也同時比 block 和 inline 還來得複雜，所以我們選擇在這裡繼續使用這個觀念。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 在本主題所使用的 block 與 inline 這兩個名詞，不應與 CSS 的 boxes 種類混淆。它們在預設時是很像的，但改變 CSS 的顯示型態(display type)並不會改變元素的類別，也不會影響該元素能包含或被包含的元素類別。HTML5 之所以會重新定義元素類別，部分也是基於此一原因。</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: 你可以查看 block element 與 inline element 分別有哪些元素 — 請見 <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-l</a><a href="/en-US/docs/Web/HTML/Block-level_elements">evel elements</a> 和 <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>。</p> +</div> + +<h3 id="空元素Empty_elements">空元素(Empty elements)</h3> + +<p>不是所有元素都符合起始標籤、內容、結束標籤的格式。有些元素只有一個標籤，這些標籤通常用來在文件中插入/嵌入物件。例如 {{htmlelement("img")}} 元素便是用來在當前位置嵌入圖片檔：</p> + +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>這將會產生下面的結果:</p> + +<p>{{ EmbedLiveSample('空元素Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: 空元素有時也被稱作 <em>void elements。</em></p> +</div> + +<h2 id="屬性Attributes">屬性(Attributes)</h2> + +<p>你也可以在元素中加入屬性，像是：</p> + +<p><img alt='&lt;p class="editor-note">My cat is very grumpy&lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>屬性有著關於元素的額外資訊，但你並不會想要顯示它們。在這個例子中 <code>class</code> 屬性讓你能夠賦予一個元素辨別名稱，稍後就能用這個名稱來指定元素的樣式及其他的東西。</p> + +<p>一個屬性應該要有：</p> + +<ol> + <li>一個空白，用來隔開屬性和元素名稱(或者前一個屬性，如果該元素已經有一個以上的屬性的話)。</li> + <li>屬性名稱以及一個接在其後的等號。</li> + <li>屬性值以及一對包著它的引號。</li> +</ol> + +<h3 id="主動學習_在元素中加入屬性">主動學習: 在元素中加入屬性</h3> + +<p>我們再舉另外一個元素的例子 {{htmlelement("a")}} 代表 anchor (錨)，而這個元素會讓被它包裹住的內容變成一個超連結。它可以和很多種屬性搭配，以下僅列出幾種：</p> + +<ul> + <li><strong><code>href</code></strong>: 這個屬性的值為你想要連到的網址，當連結被點擊時，瀏覽器就會導向到該網站。例如: <code>href="https://www.mozilla.org/"</code>。</li> + <li><strong><code>title</code></strong>: <code>title</code> 屬性用來附加有關連結的其他資訊，像是連結到的網站名稱。例如: <code>title="The Mozilla homepage"</code> 。當游標移動到連結上時，就會以提示的方式顯示。</li> + <li><strong><code>target</code></strong>: <code>target</code> 屬性用來指定要在哪裡打開網頁。例如: <code>target="_blank"</code> 會開啟新分頁。如果你想要在目前的分頁開啟網站，只要忽略這個屬性即可。</li> +</ul> + +<p>請編輯下面輸入區的文字，使它變成一個通往你最喜歡的網站的連結。</p> + +<ol> + <li>首先，加入<code><a></code> 元素。</li> + <li>再來，加入 <code>href</code> 屬性以及 <code>title</code> 屬性。</li> + <li>最後，將 <code>target</code> 屬性設定為在新分頁中開啟。</li> +</ol> + +<p>你將會在底下的輸出區域裡面即時地看到你改動產生的變化。當你完成後，你應該會看到一個連結；當你滑過時，連結將顯示 <code>title</code> 屬性的內容；當你點擊連結時，將會導向到 <code>href</code> 元素中的網址。切記，你需要以空白隔開元素名字以及每一個屬性。 </p> + +<p>如果你不小心打錯了，你可以按下<em> Reset </em>鍵重置。如果你卡關了，可以點擊<em> Show solution</em> 鍵來偷看答案。</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">&lt;p&gt;A link to my favourite website.&lt;/p&gt;</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 2em; + padding: 10px; + border: 1px solid #0095dd; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<p>A link to my <a href="<code>https://www.mozilla.org/</code>" title="The Mozilla homepage" target="_blank">favourite website</a>.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 300) }}</p> + +<h3 id="布林屬性Boolean_attributes">布林屬性(Boolean attributes)</h3> + +<p>你有時會看到一些沒有值的屬性，這完全是可行的。它們叫做布林屬性，他們只能附帶一個值，而這個值一般來說會和屬性的名字一樣。以 {{htmlattrxref("disabled", "input")}} 屬性來說，你可以把它指派為 input 元素的屬性，使得輸入文字的框框變得不能輸入文字。</p> + +<pre><input type="text" disabled="disabled"></pre> + +<p>你可以把它寫得更簡短(在下面的例子中，我們也寫出了沒有 disabled 屬性的 input 元素供你參考，讓你更了解兩者的差別)：</p> + +<pre class="brush: html"><input type="text" disabled> + +<input type="text"> +</pre> + +<p>結果 :</p> + +<p>{{ EmbedLiveSample('布林屬性Boolean_attributes' , 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="忘記加屬性值的引號">忘記加屬性值的引號</h3> + +<p>當你看遍全世界的網頁，你就會發現各種千奇百怪的標記風格(markup style)，包括沒加引號的屬性值。這在某些情況是被允許的，但在其他情況下則會使屬性結果不如預期。沿用我們之前的例子，我們先只用 <code>href</code> 屬性，如下:</p> + +<pre><a href=<code>https://www.mozilla.org/</code>>favourite website</a></pre> + +<p>看起來沒甚麼問題，但是，一旦我們加上 <code>title</code> 屬性時，就會造成錯誤的結果: </p> + +<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>favourite website</a></pre> + +<p>此時瀏覽器會誤解你的標記，認為 <code>title</code> 屬性其實是三個屬性：一個值為 "The" 的標題屬性，以及兩個布林屬性 <code>Mozilla</code> 和 <code>homepage</code>。這絕對不是你想要的結果，而且會導致錯誤或者意想不到的行為。你可以看看下面的示範，把你的游標移到連結上，看看會出現什麼提示!</p> + +<p>{{ EmbedLiveSample('忘記加屬性值的引號', 700, 100) }}</p> + +<p>我們建議不管怎樣都要加屬性引號，避免這些錯誤，同時增加原始碼的可讀性。</p> + +<h3 id="要用單引號還是雙引號_Single_or_double_quotes">要用單引號還是雙引號? (Single or double quotes?)</h3> + +<p>在這個章節中，你會發現所有的屬性都是使用雙引號，而你可能會發現其他人的 HTML 中使用的是單引號。這純粹是個人風格，你可以依照你個人的喜好去使用它們。下面兩行的意思是相同的：</p> + +<pre class="brush: 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></pre> + +<p>但是，你應該確認你沒有混著使用它們。下面這行則會造成錯誤！</p> + +<pre class="brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>如果你在你的 HTML 中使用其中一種引號，你就可以包裹另外一種引號：</p> + +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>不過，如果你想要包裹相同種類的引號，你就必須要用到 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_including_special_characters_in_HTML">HTML entities</a>。例如，以下範例是錯的：</p> + +<pre class="brush: html"> <a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a> </pre> + +<p>你應該要這樣寫：</p> + +<pre class="brush: html"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a> </pre> + +<h2 id="解析_HTML_文檔">解析 HTML 文檔</h2> + +<p>以上講述了 HTML 中個別元素的基礎知識，但是單獨使用它們，並沒有多大用處。所以現在就讓我們來看看如何將這些元素組成一個 HTML 網頁吧：</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>這裡有：</p> + +<ol> + <li><code><!DOCTYPE html></code>: 文件類型(doctype)。 在很久很久以前，當 HTML 還年輕的時候(約莫在西元 1991 年左右)，文件類型是要作為一系列規範的連結，HTML 網頁必須要遵守這些規範才會被當作是好的 HTML，比如說具備自動錯誤檢查和其他有用的東西等。在那個時候，它們看起來像這樣： + + <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + 不過，現在已經沒有人在乎它們了，它們只是個歷史痕跡，需要形式上地被引入，以確保一切正常。<code><!DOCTYPE html></code> 是字數最短的有效 doctype。你只需要知道這些就夠了。</li> + <li><code><html></html></code>: {{htmlelement("html")}} 元素。該元素包裹住頁面的所有內容，有時也被稱作根元素(root element)。</li> + <li><code><head></head></code>: {{htmlelement("head")}} 元素。這個元素放著你想含括的所有重要資訊，這些資訊不會呈現在網頁瀏覽者眼前。這些東西包括，顯示於搜尋結果的關鍵字、頁面說明、CSS 等等。你將會在這個系列的下個章節中學到更多有關這部分的知識。</li> + <li><code><meta charset="utf-8"></code>: 這個元素指定你的文件使用 UTF-8 為字元編碼，這種編碼含有這世上大部分語言的字元，理論上可以處理所有你想放文字內容，因此建議大家都要使用這種編碼，它能幫你免去許多煩惱。</li> + <li><code><title></title></code>: {{htmlelement("title")}} 元素。這是用來設定網頁名稱的，它會顯示在分頁標籤上，當你將該網頁加入書籤或加入最愛時，則是用來形容這個網站。</li> + <li><code><body></body></code>: {{htmlelement("body")}} 元素含括了<em>所有</em>你想要給網頁瀏覽者看到的內容，不管是文字、圖片、遊戲、可以播放的音樂或其他東西。</li> +</ol> + +<h3 id="主動學習_在HTML文檔中加入一些特徵">主動學習: 在HTML文檔中加入一些特徵</h3> + +<p>如果你想試試看在你的電腦上寫一些 HTML，你可以: </p> + +<ol> + <li>複製上面的 HTML 範例。</li> + <li>在你的文字編輯器中建立一個新檔案。</li> + <li>將剛複製的 HTML 範例貼到新開的檔案裡。</li> + <li>將檔案儲存為 <code>index.html</code>。</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: 你也可以在這找到基本的 HTML 範本: <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>。</p> +</div> + +<p>接著你就可以用網頁瀏覽器開啟你的檔案，看看這些原始碼會被渲染(rendered)成什麼樣子，然後編輯原始碼並重新整理瀏覽器，再看看會變成怎樣。目前你的網頁會長這樣：</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">在這個練習中，你可以在自己的電腦中撰寫原始碼，就像上面寫的一樣，或者你可以在底下的範例視窗中進行編輯(該視窗僅表示 {{htmlelement("body")}} 元素的內容) 我們希望你依照以下的步驟逐步前行：</p> + +<ul> + <li>在 {{htmlelement("body")}} 之後，加入這個文件的主要標題。這應該由一個 <code><h1></code> 以及一個 <code></h1></code> 包著。</li> + <li>撰寫段落的內容，這些內容可以是一些你感興趣的事物。</li> + <li>讓其中重要的字詞以粗體顯示，讓它們更加搶眼，你可以用一個 <code><strong></code> 以及一個 <code></strong></code> 包著它們來達成這件事情。</li> + <li>加入一個連結到你的文章段落中，像<a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">前面所講過的那樣</a>。</li> + <li>在這段文字的下面加入一張圖片，<a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">像前面所說的那樣</a>。如果你可以使用不同的圖片(你電腦裡的或網路上的都可以)，你就能獲得加分！！</li> +</ul> + +<p>如果你不小心打錯了，你可以用<em> Reset</em> 鍵重置。如果你卡關了，可以點擊<em> Show solution</em> 鍵來偷看答案。</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"> +&lt;p&gt;This is my page&lt;/p&gt;</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; +} + +img { + max-width: 100%; +} + +.output { + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ + plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ + My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ +<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 600) }}</p> + +<h3 id="HTML中的空格Whitespace">HTML中的空格(Whitespace)</h3> + +<p>在上面的範例中，你可能會發現原始碼中有許多空格，其實這是完全不需要的，下面兩段原始碼會有相同的結果: </p> + +<pre class="brush: html"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p>不管你用多少空格(whitespace，包括空白字元與換行字元)，HTML 的語法分析器都只會留下一個空格。所以說，為什麼要用這麼多空格呢？答案是為了增加可讀性 — 適當的排版會讓人更明白你的原始碼，所以千萬不要把你的原始碼擠成一團，讓它們變得雜亂無章。在我們的 HTML 中，我們將每個巢狀的元素都以兩個空格縮排。原始碼的排版風格(如要用多少空格進行縮排)，可依照個人喜好使用，但你的排版方式應該要一致。</p> + +<h2 id="實體參照Entity_references_引用_HTML_中的特殊字元">實體參照(Entity references): 引用 HTML 中的特殊字元</h2> + +<p>在 HTML 中， <code><</code> 、 <code>></code> 、 <code>"</code> 、 <code>'</code> 和 <code>&</code> 是特殊字元，它們是 HTML 語法的一部份。那麼，要如何使用這些特殊字元呢？比方說，你如果想要用 <code>&</code> (ampersand)或小於符號 <code><</code> (less than sign) 時，要如何避免它們被瀏覽器當成原始碼呢？</p> + +<p>這時候我們就需要用到字元參照(character references)，它們是用來表示特殊字元的編碼，專門用在這種情形上。每個字元參照都是以 & (ampersand) 起頭，以分號 ; (semi-colon) 做結。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">字元</th> + <th scope="col">相應的字元引用</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>如果你英文不錯的話，應該不難發現字元參照其實就是這些字元的英文縮寫，也就是說，"&lt;" 為 less than (小於)；"&gt;" 為 great than (大於)；"&quot;" 為 quotation (引號)；"&apos;" 為 apostrophe (單引號)；"&amp;" 為 ampersand (和號)。你可以透過下面的維基連結來查看 HTML 的字元實體參照。在下面的範例中，你可以看到兩段敘述網頁技術的段落:</p> + +<pre class="brush: 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></pre> + +<p>看到下面的輸出結果，你會發現第一個段落是錯誤的，因為瀏覽器認為第二個 <code><p></code> 是要開啟新段落。而第二個段落就沒問題，因為我們將 < 及 > 換成了字元參照。</p> + +<p>{{ EmbedLiveSample('實體參照Entity_references_引用_HTML_中的特殊字元', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: 你可以在維基百科中找到完整的 HTML 字元實體參照的對照表: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>。請記得只要你的 HTML 的<a href="Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding">字元編碼設定為 UTF-8</a>，你就不需要使用其他字元的實體參照，因為現今的瀏覽器都能應付。</p> +</div> + +<h2 id="HTML_註解">HTML 註解</h2> + +<p>HTML 就像大部分的程式語言，提供了一種能讓我們可以在原始碼中加入註解的方式 — 註解是會被瀏覽器忽略，並且不會被使用者看到的，它們存在的目的是要讓你得以在原始碼中說明你的原始碼是如何運作的、每段原始碼的作用等等。當你已經六個月沒有察看某個網頁的原始碼，而你完全想不起來你做了什麼的時候、或是當你把你的原始碼交給別人一同協作時，註解將會是你的好朋友！</p> + +<p>試著將你 HTML 檔案中的一部份內容變成註解，你需要將內容包裹在特殊的符號 <code><!--</code> 和 <code>--></code>之中，例如：</p> + +<pre class="brush: html"><p>I'm not inside a comment</p> + +<!-- <p>I am!</p> --></pre> + +<p>如你所見，在下方的範例中，第一個段落出現在輸出結果中，但第二個段落並沒有出現。</p> + +<p>{{ EmbedLiveSample('HTML_註解', 700, 100) }}</p> + +<h2 id="總結">總結</h2> + +<p>恭喜你看完了這個章節，我們你能享受這個學習基礎 HTML 的旅程！目前，你應該已經了解 HTML 長什麼樣子、它最基本的運作方式，並且能夠寫出一些元素和屬性。基礎 HTML 大致上就到這裡結束，在單元接下來的章節中，我們將會更深入探討本章節學到的內容並介紹更多 HTML 的觀念。千萬別轉台！</p> + +<div class="note"> +<p><strong>Note</strong>: 目前，在你要開始學更多有關 HTML 的知識時，你可能也想要探索基礎的 <a href="/en-US/docs/Learn/CSS">CSS</a>(Cascading Style Sheets)。CSS 是一種用來為你的網頁增添花樣的語言，例如改變字型、顏色，或改變頁面的布局。你很快就會發現，同時使用 HTML 和 CSS 會帶來很棒的效果。</p> +</div> + +<h2 id="另見"> 另見</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> +</ul> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<h2 id="在本主題中的內容">在本主題中的內容</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML 的其中一件核心工作，就是給出文件的結構和含義（又稱{{glossary("semantics")}}），以便瀏覽器正確顯示。本文章旨在說明 {{glossary("HTML")}} 可透過增加標題、章節、強調、建立清單等，建立結構化的頁面。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">需求：</th> + <td>熟悉基本 HTML、在 <a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a> 有講解。</td> + </tr> + <tr> + <th scope="row">目標：</th> + <td>學習如何標記一個具有文字的基礎頁面賦予它結構及含義— 包含段落, 標題, 列表, 強調文字, 以及引用句</td> + </tr> + </tbody> +</table> + +<h2 id="基本：標題與段落">基本：標題與段落</h2> + +<p>多數結構化的文字由標題及段落構成，不論你是在閱讀故事，翻閱報紙，讀教科書，翻閱雜誌，等等。</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> + +<p>充滿結構性的文字內容讓閱讀經驗變得輕鬆且更加愉悅。</p> + +<p>在HTML裡，每個段落都被包在 {{htmlelement("p")}} 元素中，就像：</p> + +<pre class="brush: html"><p>I am a paragraph, oh yes I am.</p></pre> + +<p>而每個標題需要被包在標題元素中：</p> + +<pre class="brush: html"><h1>I am the title of the story.</h1></pre> + +<p>在HTML裡有六種標題元素：{{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}，跟 {{htmlelement("h6")}}. 每個元素分別代表著在文件中的不同層級; <code><h1></code> 代表主標題, <code><h2></code> 代表副標題, <code><h3></code> 代表更次級的副標題, 依此類推。</p> + +<h3 id="實作架構化階層">實作架構化階層</h3> + +<p>舉例來說，在一個故事裡，<code><h1></code> 將用來代表整個故事的標題，<code><h2></code> 則代表每個章節的標題，而<code><h3></code> 代表每個章節中的副標題，依此類推下去。</p> + +<pre class="brush: 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></pre> + +<p>只要層次結構有意義，要一個元件顯示什麼取決於你。當你在建立類似的文字結構時，只要記得以下幾點：</p> + +<ul> + <li>一個頁面最好只用一個 <code><h1></code> 元素：這是頂層標題，所有其他標題都位於層次結構的下方。</li> + <li>在使用標題元素的時候，要注意層級的順序。不要在<h2>前使用<h3>來標示副標題，這要很容易造成意外的結果。</li> + <li>每次使用標題元素時，雖有六個層級可使用，但應該以使用少於三個層級為目標，除非你真的覺得有必要用到三個以上。有過多層級的文件變得很笨重且很難導航文件架構。在這種情況下，可以考慮把文件內容劃分到多個頁面。</li> +</ul> + +<h3 id="為何我們需要架構？">為何我們需要架構？</h3> + +<p>為了回答這個問題。我們先看看 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> 這個文章（鷹嘴豆泥食譜）的最前端。請先下載這個文件的副本到你的電腦，等一下練習時會用到。這個文件目前包含很多不同的內容，並沒有被標記出架構，唯一的排版只有換行而已。</p> + +<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">所以當你在瀏覽器中打開這份文件時，你將會看到這些文字看起來擠成一團！</span></p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> + +<p>這是因為文件內沒有元素去標示出文件的架構，所以瀏覽器不知道怎麼排版。此外：</p> + +<ul> + <li>使用者造訪一個網站時，時常只是快速的瀏覽內容以找尋他們正在找的相關內容，更常時候，使用者只有看一個頁面內的標題而已（來源：<a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">spend a very short time on a web page</a>）。如果他們沒在短時間內找到實用的資訊，他們就會放棄這個頁面而去其他網頁尋找。</li> + <li>搜尋引擎會把標題作為重要關鍵字來排序搜尋結果。所以如果一個頁面沒有標題，就很難被搜尋引擎排在上方。換句話說，就是沒有達到搜尋引擎最佳化（Search Engine Optimization ({{glossary("SEO")}})）。</li> + <li>視力嚴重受損的使用者通常無法閱覽網頁，而透過螢幕閱讀器（<a href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">screen reader</a>）聽頁面。螢幕閱讀器軟體提供使用者能夠更快速的取得頁面資訊。其中一個方式是透過朗誦出文件的架構，能讓使用者更快地獲得他們在尋找的資訊。所以假如一個頁面沒被恰當地標記架構，就會迫使使用者必須聆聽完整個頁面以取得尋找的資訊。</li> + <li>若要用{{glossary("CSS")}}裝飾頁面，或者讓瀏覽器透過{{glossary("JavaScript")}}做特效，也要用特別的元素來做標記。這樣CSS/JS才知道哪一部分是屬於他們的文件。</li> +</ul> + +<p>以上原因說明為何我們要為內容標示出架構。</p> + +<h3 id="Active_learning_Giving_our_content_structure">Active learning: Giving our content structure</h3> + +<p>Let's jump straight in with a live example. In the example below, add elements to the raw text in the <em>Input</em> field so that it appears as a heading and two paragraphs in the <em>Output</em> field.</p> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. 如果你中途卡關，點擊<em>按鈕來查看答案</em>。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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></pre> + +<pre class="brush: css">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; +}</pre> + +<pre class="brush: js">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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Why_do_we_need_semantics">Why do we need semantics?</h3> + +<p>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.)</p> + +<p>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."</p> + +<pre class="brush: html"><h1>This is a top level heading</h1></pre> + +<p>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).</p> + +<p>On the other hand, you could make any element <em>look</em> like a top level heading. Consider the following:</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span></pre> + +<p>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.</p> + +<h2 id="Lists">Lists</h2> + +<p>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.</p> + +<h3 id="Unordered">Unordered</h3> + +<p>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.</p> + +<pre>milk +eggs +bread +hummus</pre> + +<p>Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:</p> + +<pre class="brush: html"><ul> +milk +eggs +bread +hummus +</ul></pre> + +<p>The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:</p> + +<pre class="brush: html"><ul> + <li>milk</li> + <li>eggs</li> + <li>bread</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Active_learning_Marking_up_an_unordered_list">Active learning: Marking up an unordered list</h4> + +<p>Try editing the live sample below to create your very own HTML unordered list.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><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></pre> + +<pre class="brush: css">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; +}</pre> + +<pre class="brush: js">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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Ordered">Ordered</h3> + +<p>Ordered lists are lists in which the order of the items <em>does</em> matter — let's take a set of directions as an example:</p> + +<pre>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</pre> + +<p>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 <code><ul></code>:</p> + +<pre class="brush: 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></pre> + +<h4 id="Active_learning_Marking_up_an_ordered_list">Active learning: Marking up an ordered list</h4> + +<p>Try editing the live sample below to create your very own HTML ordered list.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><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></pre> + +<pre class="brush: css">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; +}</pre> + +<pre class="brush: js">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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Active_learning_Marking_up_our_recipe_page">Active learning: Marking up our recipe page</h3> + +<p>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 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> 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.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + +<pre class="brush: html"><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></pre> + +<pre class="brush: css">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; +}</pre> + +<pre class="brush: js">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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>If you get stuck, you can always press the <em>Show solution</em> button, or check out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> example on our github repo.</p> + +<h3 id="Nesting_lists">Nesting lists</h3> + +<p>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:</p> + +<pre class="brush: 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></pre> + +<p>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:</p> + +<pre class="brush: 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></pre> + +<p>Try going back to the previous active learning example and updating the second list like this.</p> + +<h2 id="Emphasis_and_importance">Emphasis and importance</h2> + +<p>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.</p> + +<h3 id="Emphasis">Emphasis</h3> + +<p>When we want to add emphasis in spoken language, we <em>stress</em> 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.</p> + +<p>I am glad you weren't late.</p> + +<p>I am <em>glad</em> you weren't <em>late</em>.</p> + +<p>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.</p> + +<p>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> + +<pre class="brush: html"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> + +<h3 id="Strong_importance">Strong importance</h3> + +<p>To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:</p> + +<p>這液體具有<strong>相當強的毒性</strong>。</p> + +<p>我相信你。<strong>千萬</strong>別遲到了！</p> + +<p>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> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> + +<p>You can nest strong and emphasis inside one another if desired:</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong> — +if you drink it, <strong>you may <em>die</em></strong>.</p></pre> + +<h3 id="Active_learning_Lets_be_important!">Active learning: Let's be important!</h3> + +<p>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.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + +<pre class="brush: html"><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></pre> + +<pre class="brush: css">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; +}</pre> + +<pre class="brush: js">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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3> + +<p>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 <strong>presentational elements</strong> and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.</p> + +<p>HTML5 redefined <code><b></code>, <code><i></code> and <code><u></code> with new, somewhat confusing, semantic roles.</p> + +<p>Here's the best rule of thumb: it's likely appropriate to use <code><b></code>, <code><i></code>, or <code><u></code> 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.</p> + +<ul> + <li>{{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...</li> + <li>{{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...</li> + <li>{{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...</li> +</ul> + +<div class="note"> +<p>A kind warning about underline: <strong>People strongly associate underlining with hyperlinks.</strong> Therefore, on the Web, it's best to underline only links. Use the <code><u></code> 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.</p> +</div> + +<pre class="brush: 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></pre> + +<h2 id="總結">總結</h2> + +<p>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 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">create hyperlinks</a>, possibly the most important element on the Web.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">本質上，{{glossary("HTML")}} 是一種非常簡單的語言，由元素所組成。元素可以賦予文字片段不同的意義 (比方說，將它們描述成段落、項目清單，或是表格的一部分)、將文件組織成不同的邏輯區段 (如標頭(header)、三行的內文，或是導覽目錄)，以及在網頁中嵌入圖片或影片等內容。在這個主題中我們將介紹前面兩項，並介紹基本概念以及語法以讓你了解 HTML。</p> + +<h2 id="預備知識">預備知識</h2> + +<p>在開始閱讀之前，你並不需要具備任何 HTML 知識，你只要能夠操作電腦、瀏覽網頁並消化其中的內容即可。你需要<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">建立一個基礎工作環境</a>，並且了解<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">如何建立與管理檔案</a>──這些都屬於我們 <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Web 入門</a> 的一部分。</p> + +<div class="note"> +<p><strong>提示</strong>: 如果您是在某些無法建立個人檔案的電腦/平板/其他裝置上進行，您可以在一些線上 coding program (如 <a href="http://jsbin.com/">JSBin</a> 或 <a href="https://thimble.mozilla.org/">Thimble</a>) 上測試程式碼範例。</p> +</div> + +<h2 id="導覽">導覽</h2> + +<p>這個主題包含以下子題，將帶你了解所有 HTML 的基礎理論，並且提供充足的機會讓你測試所習得的技能。</p> + +<dl> + <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></dt> + <dd>包含 HTML 最基礎的部分──我們將定義元素（elements）、屬性（attributes）以及其他重要術語，並且介紹它們的使用方法。除此之外，我們也將說明典型的 HTML 網頁及其中的元素是如何構成的，並解釋其他重要的基本語言特性。還有，我們也會玩一些 HTML，好引發你的興趣！</dd> + <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">在 head 中有什麼? HTML 中的後設資料(Metadata)</a></dt> + <dd>HTML 文件的 head 是在網頁加載完畢之後，不會顯示在瀏覽器上的部分。其中包含一些資訊，如頁面的標題({{htmlelement("title")}})、{{glossary("CSS")}} 的連結 (當你想利用 CSS 來妝點你的頁面 HTML 時，你會用到它們)、網頁圖示(favicon)的連結，以及 metadata (裡頭承載了有關於該 HTML 的資料，如作者、描述該文件的關鍵詞等。)</dd> + <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文字的基礎知識</a></dt> + <dd>一個 HTML 的主要作用是賦予純文字意義(又稱為<a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Semantics">語義化</a>)，好讓瀏覽器知道如何正確地顯示它。這篇文章將探討如何使用 HTML 來將文字區塊拆解為標題(heading)和段落(paragraph)、強調字詞、建立列表等等。</dd> + <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">建立超連結</a></dt> + <dd>超連結真的非常重要 — 它造就了我們現今所知的網路。這篇文章介紹超連結的使用語法，並且探討建立連結的最佳實踐方法。</dd> + <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">進階文字格式</a></dt> + <dd>在 HTML 中還有許多可以用來格式化文字的元素，但我們沒有在 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文字的基礎知識</a>中提及這些內容。雖然這些元素比較鮮為人知，不過還是相當值得一談。在這篇文章中，你將會學到如何表示引言、描述列表、程式碼、上下標，及聯繫訊息等等。 </dd> + <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文件與網站架構</a></dt> + <dd>除了分別定義網頁的各個成分（例如：段落或是圖片），HTML 還能定義網頁上的區塊（例如：標頭、導航列或是主要內容）。這篇文章將介紹如何規劃一個基本的網頁架構，以及如何透過編寫 HTML 來表示網頁架構。</dd> + <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML 除錯</a></dt> + <dd>如果 HTML 出錯了，卻找不到哪裡有錯誤該怎麼辦？這篇文章將會介紹一些能幫得上忙的實用工具。</dd> +</dl> + +<h2 id="評量">評量</h2> + +<p>下面的評量將測試您對於以上的 HTML 基礎是否已經了解。</p> + +<dl> + <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">標記信件內容</a></dt> + <dd>我們都學過怎麼寫信，而信件也是用來測試我們格式化文字技巧的好例子。在這份測驗中，你將需要以 HTML 將一封信標記成題目要求的樣子。</dd> + <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">組織網頁內容</a></dt> + <dd>這份測驗將要測試你利用 HTML 來組織網頁的能力，該網頁將包含頁眉(header)、頁腳(footer)、導覽列(navigation)、內文(main content)和側邊攔(sidebar)。</dd> +</dl> + +<h2 id="另見">另見</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt> + <dd>Mozilla 基金會所提供的一個優質課程。該課程探索並測驗了很多在本主題中所提及的技術。透過裡頭的六大學習主題，學習者能夠熟悉閱讀、撰寫以及參與網路，並經由實作與合作了解網路基礎。</dd> +</dl> + +<div class="blockIndicator note"> +<h2 id="回饋">回饋</h2> + +<p>請填寫<a href="https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey">問卷</a>以協助改善我們的導覽與教學。</p> +</div> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML 文件的 {{glossary("Head", "head")}} 是網頁在加載完畢之後，不會顯示在瀏覽器上的部分。其中包含一些資訊，如頁面的標題({{htmlelement("title")}})、{{glossary("CSS")}} 的連結 (當你想利用 CSS 來妝點你的頁面 HTML 時，你會用到它們)、網頁圖示(favicon)的連結，以及 metadata (裡頭承載了有關於該 HTML 的資料，如作者、描述該文件的關鍵詞等)。在這一章節裡，我們會討論以上的內容，甚至更多，藉此替你打下標記網頁的根基。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">需求：</th> + <td>對 HTML 的基礎認識，內容我們已在 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a>中提及。</td> + </tr> + <tr> + <th scope="row">目標：</th> + <td>學習 HTML 的 head，了解它的目的、它能包含什麼重要東西，以及它對 HTML 文件產生的影響。</td> + </tr> + </tbody> +</table> + +<h2 id="什麼是_HTML_head">什麼是 HTML head?</h2> + +<p>讓我們再看一次之前所看過的 <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML 文件</a>：</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>HTML 的 head 就是 {{htmlelement("head")}} 元素裡面的內容 — 跟 {{htmlelement("body")}} 元素中的內容不同（當網頁被載入瀏覽器中時，會呈現在頁面上），head 裡的內容不會顯示在頁面上，它的任務是要容納文件的 {{glossary("Metadata", "metadata")}}。在上例中，head 只有這樣：</p> + +<pre class="brush: html"><head> + <meta charset="utf-8"> + <title>My test page</title> +</head></pre> + +<p>假如換作是較大型的網頁，head 裡面可能就會有非常多東西了。現在你可以先到幾個你常去的網站，並利用<a href="/en-US/docs/Learn/Discover_browser_developer_tools">開發者工具</a>來檢視它們的 head。我們在這裡並不打算要向你展示所有能放在 head 中的東西，而是教你使用一些常用的元素，讓你熟悉熟悉它們。總而言之，讓我們開始吧！</p> + +<h2 id="加入標題title">加入標題(title)</h2> + +<p>我們已經看到活生生的 {{htmlelement("title")}} 元素了 — 這東西就是用來為文件加上標題的。你可能會把它跟 {{htmlelement("h1")}} 搞混，{{htmlelement("h1")}} 是用來為網頁主體加上標題的元素，有時也被叫做頁面標題 (page title)，雖然聽起來功能很像，但他們是不同的東西！</p> + +<ul> + <li>{{htmlelement("h1")}} 元素在被載入瀏覽器時顯示在頁面上 — 通常它應該只會出現一次，用來為頁面內容加上標題 (如故事和新聞的標題，或是其他合適的用法)。</li> + <li>{{htmlelement("title")}} 元素是用來代表 HTML 文件標題的 metadata (即非文件內容)。</li> +</ul> + +<h3 id="不要光是看：檢視一個簡單的範例">不要光是看：檢視一個簡單的範例</h3> + +<ol> + <li>在開始這次主動學習之前，請你先到我們的 GitHub repo 中下載一份 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>。要做到這件事情，你可以： + + <ol> + <li>用你的文字編輯器開一個新檔案，並將原始碼複製到裡面，然後再儲存在一個合適的地方。</li> + <li>按下網頁上的 Raw 按鈕，它就會將原始碼以純文字的形式顯示在你瀏覽器的新分頁上。接著點按右鍵，將檔案儲存在你喜歡的地方。</li> + </ol> + </li> + <li>現在在你的瀏覽器中開啟檔案，你看到的東西應該會長這樣： + <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">這樣子你應該可以很清楚地看到哪裡是 <code><h1></code>，而哪裡是 <code><title></code> 了！</p> + </li> + <li>試著開啟文字編輯器，修改兩元素的內容，儲存後再重整網頁，看看有什麼不同。</li> +</ol> + +<p><code><title></code> 元素中的內容也被用在其他地方。舉個例子，如果你想要收藏這個網頁，(在 Firefox 上是<em> 書籤 > 將本頁加入書籤</em> 或按下 URL 列的星星符號)，你就會看到 <code><title></code> 的內容被設為建議的書籤名稱。</p> + +<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>接下來你就會看到，<code><title></code> 的內容也會被用在搜尋當中。</p> + +<h2 id="Metadata_<meta>_元素">Metadata: <meta> 元素</h2> + +<p>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 <code><meta></code> 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.</p> + +<h3 id="指定文件字元編碼">指定文件字元編碼</h3> + +<p>In the example we saw above, this line was included:</p> + +<pre class="brush: html"><meta charset="utf-8"></pre> + +<p>This element simply specifies the document's character encoding — the character set that the document is permitted to use. <code>utf-8</code> 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:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">If you set your character encoding to <code>ISO-8859-1</code>, for example (the character set for the Latin alphabet), your page rendering would be all messed up:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<h3 id="Active_learning_Experiment_with_character_encoding">Active learning: Experiment with character encoding</h3> + +<p>To try this out, revisit the simple HTML template you obtained in the previous section on <code><title></code> (the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>), try changing the meta charset value to <code>ISO-8859-1</code>, and add the Japanese to your page. This is the code we used:</p> + +<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> + +<h3 id="加入作者author和描述description">加入作者(author)和描述(description)</h3> + +<p>Many <code><meta></code> elements include <code>name</code> and <code>content</code> attributes:</p> + +<ul> + <li><code>name</code> specifies the type of meta element it is; what type of information it contains.</li> + <li><code>content</code> specifies the actual meta content.</li> +</ul> + +<p>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:</p> + +<pre class="brush: html"><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."></pre> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, or {{glossary("SEO")}}.)</p> + +<h3 id="Active_learning_The_descriptions_use_in_search_engines">Active learning: The description's use in search engines</h3> + +<p>The description is also used on search engine result pages. Let's go through an exercise to explore this</p> + +<ol> + <li>Go to the <a href="https://developer.mozilla.org/en-US/">front page of The Mozilla Developer Network</a>.</li> + <li>View the page's source (Right/<kbd>Ctrl</kbd> + click on the page, choose <em>View Page Source</em> from the context menu.)</li> + <li>Find the description meta tag. It will look like this: + <pre class="brush: html"><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."></pre> + </li> + <li>Now search for "Mozilla Developer Network" in your favorite search engine (We used Yahoo.) You'll notice the description <code><meta></code> and <code><title></code> element content used in the search result — definitely worth having! + <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: 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 <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — a way to make your site's search results better in the Google search engine.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Many <code><meta></code> features just aren't used any more. For example, the keyword <code><meta></code> element (<code><meta name="keywords" content="fill, in, your, keywords, here"></code>) — 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.</p> +</div> + +<h3 id="其他種類的metadata">其他種類的metadata</h3> + +<p>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.</p> + +<p>For example, <a href="http://ogp.me/">Open Graph Data</a> is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN sourcecode, you'll find this:</p> + +<pre class="brush: html"><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"></pre> + +<p>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.</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">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:</p> + +<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="加入屬於自己的網頁icon">加入屬於自己的網頁icon</h2> + +<p>To further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts.</p> + +<p>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.</p> + +<p>A favicon can be added to your page by:</p> + +<ol> + <li>Saving it in the same directory as the site's index page, saved in <code>.ico</code> format (most browsers will support favicons in more common formats like <code>.gif</code> or <code>.png</code>, but using the ICO format will ensure it works as far back as Internet Explorer 6.)</li> + <li>Adding the following line into your HTML <code><head></code> to reference it: + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>Here is an example of a favicon in a bookmarks panel:</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>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:</p> + +<pre class="brush: html"><!-- 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"></pre> + +<p>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.</p> + +<p>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.</p> + +<h2 id="在HTML中加入CSS和JavaScript">在HTML中加入CSS和JavaScript</h2> + +<p>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.</p> + +<ul> + <li> + <p>The {{htmlelement("link")}} element always goes inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file:</p> + + <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> + </li> + <li> + <p>The {{htmlelement("script")}} element does not have to go in the head; in fact, often it is better to put it at the bottom of the document body (just before the closing <code></body></code> tag), to make sure that all the HTML content has been read by the browser before it tries to apply JavaScript to it (if JavaScript tries to access an element that doesn't yet exist, the browser will throw an error.)</p> + + <pre class="brush: html"><script src="my-js-file.js"></script></pre> + + <p><strong>Note</strong>: The <code><script></code> element may look like an empty element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <code><script></code> element.</p> + </li> +</ul> + +<h3 id="Active_learning_applying_CSS_and_JavaScript_to_a_page">Active learning: applying CSS and JavaScript to a page</h3> + +<ol> + <li>To start this active learning, grab a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.</li> + <li>Open the HTML file in both your browser, and your text editor.</li> + <li>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.</li> +</ol> + +<p>If done correctly, when you save your HTML and refresh your browser you'll see that things have changed:</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. when you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.</li> + <li>The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> example page.</p> +</div> + +<h2 id="預設文件語言">預設文件語言</h2> + +<p>Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang attribute</a> to the opening HTML tag (as seen in the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> and shown below.)</p> + +<pre class="brush: html"><html lang="en-US"></pre> + +<p>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.)</p> + +<p>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> + +<pre class="brush: html"><p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p></pre> + +<p>These codes are defined by the <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> standard. You can find more about them in <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p> + +<h2 id="總結">總結</h2> + +<p>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.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> |