创建超链接

这篇翻译不完整。请帮忙从英语翻译这篇文章

超链接真的很重要 - 它们使Web成为一个Web。 本文介绍了创建链接所需的语法,并讨论了链接最佳做法。

前提: 熟悉基本HTML, 包含在 Getting started with HTML. HTML 文本格式, 包含在 HTML text fundamentals.
目标: 学习如何实现一个有效的把多个文件链接在一起的超文本链接。

什么是超链接?

超链接是Web提供的最令人兴奋的创新之一。 好吧,他们从一开始就一直是Web的一个功能,但它们是Web的一个Web - 它们允许我们将我们的文档链接到任何其他文档(或其他资源),我们也可以链接 到文档的特定部分,我们可以在一个简单的网址上提供应用程序(与本地应用程序,这必须安装和所有的业务对比)。几乎任何网络内容可以转换为链接, 点击(或以其他方式激活),将使网络浏览器转到另一个网址(URL。)

注意:URL可以指向HTML文件,文本文件,图像,文本文档,视频和音频文件以及可以在网络上存在的任何其他内容。 如果Web浏览器不知道如何显示或处理文件,它会询问您是否要打开文件(在这种情况下,打开或处理文件的义务传递到设备上的合适的本机应用程序)或 下载文件(在这种情况下,您可以尝试以后处理它。)

例如,BBC主页包含大量的链接,不仅指向多个新闻故事,而且指向网站的不同区域(导航功能),登录/注册页面(用户工具)等等。

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

链接的解剖

通过将文本(或其他内容,见块级链接)转换为<a>元素内的链接来创建基本链接, 给它一个href属性(也称为目标),它将包含您希望链接指向的网址。

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

这给我们以下结果:
I'm creating a link to the Mozilla homepage.

使用<title>添加支持信息

您可能要添加到您的链接的另一个属性是标题; 这旨在包含关于链接的补充有用信息,例如页面包含什么样的信息或需要注意的事情。 例如:

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

这给了我们以下结果(当链接悬停在其上时,标题将作为工具提示出现):

I'm creating a link to the Mozilla homepage.

主动学习:创建您自己的示例链接

主动学习时间:我们希望您使用本地代码编辑器创建一个HTML文档(我们的 getting started template会很好)

  • 在HTML内,尝试添加一个或者多个段落或其他类型你知道的内容。
  • 将某些内容转换为链接。
  • 包含标题属性。

块级链接

如上所述,你可以将一些内容转换为链接, 甚至是 块级元素。如果你想要将一个图像转换为链接 ,你只需把图像放到<a></a>标签中间。

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

Note: You'll find out a lot more about using images on the Web in a future article.

URLs与路径(path)快速入门

要快速地了解链接目标,你需要了解URLs和文件路径。在这一部分你需要实现给予你的信息。

一个URL, 或统一资源定位器 只是一个定义了在网络上的位置的一个文本字符串。 例如Mozilla的英文主页定位在https://www.mozilla.org/en-US/.

URLs使用路径查找文件。路径指定文件系统中您感兴趣的文件所在的位置。看一下一个简单的目录结构的例子 (see the creating-hyperlinks directory.)

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

此目录结构的根目录称为creation-hyperlinks。当在网站上工作时, 你会有一个包含整个网站的目录。在根目录,我们有一个index.html和一个contacts.html文件。在真实的网站上,index.html 将会成为我们的主页或登录页面。

我们的根目录还有两个目录— pdfs 和projects. 它们分别包含单个文件 — 一个 PDF (project-brief.pdf) 和一个index.html 文件。请注意你可以有两个index.html文件在一个项目下的不同的系统文件位置。许多网站就是如此。第二个index.html或许是项目相关信息的主登录界面。

  • 相同目录:如果你想要包含一个超链接(hyperlink)到index.html (顶层的index.html) 指向contacts.html,你只需要指定到想要链接的文件名,因为它与当前文件是在同一个目录的. 所以你应该使用的URL是contacts.html:

    <p>Want to contact a specific staff member?
    Find details on our <a href="contacts.html">contacts page</a>.</p>
  • 向下移动到子目录:如果你想要包含一个超链接到index.html (顶层index.html) 指向 projects/index.html,您需要进入项目目录,然后指明要链接到的文件。 通过指定目录的名称,然后是正斜杠,然后是文件的名称完成。因此您要使用的URL是projects / index.html:

    <p>Visit my <a href="projects/index.html">project homepage</a>.</p>
  • 回到上级目录: 如果你想在projects / index.html中包含一个指向pdfs / project-brief.pdf的超链接,。你必须返回上一个目录级,然后再回到pdf目录. "返回上一个目录级" 使用两个dot表示 — .. — 所以你应该使用的URL是 ../pdfs/project-brief.pdf:

    <p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

Note: You can combine multiple instances of these features into complex URLs, if needed, e.g. ../../../complex/path/to/my/file.html.

Document fragments

It is possible to link to a specific part of an HTML document (known as a document fragment), rather than just to the top of the document. To do this you first have to assign an id attribute to the element you want to link to. It normally makes sense to link to a specific heading, so this would look something like the following:

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

Then to link to that specific id, you'd include it at the end of the URL, preceded by a hash/pound symbol, for example:

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

You can even use the document fragment reference on its own to link to another part of the same document:

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

Absolute versus relative URLs

Two terms you'll come across on the Web are absolute URL and relative URL:

absolute URL: Points to a location defined by its absolute location on the web, including protocol and domain name. So for example, if an index.html page is uploaded to a directory called projects that sits inside the root of a web server, and the web site's domain is http://www.example.com, the page would be available at http://www.example.com/projects/index.html (or even just http://www.example.com/projects/, as most web servers just look for a landing page such as index.html to load if it is not specified in the URL.)

An absolute URL will always point to the same location, no matter where it is used.

relative URL: Points to a location that is relative to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at http://www.example.com/projects/index.html to a PDF file in the same directory, the URL would just be the filename — e.g. project-brief.pdf — no extra information needed. If the PDF was available in a subdirectory inside projects called pdfs, the relative link would be pdfs/project-brief.pdf (the equivalent absolute URL would be http://www.example.com/projects/pdfs/project-brief.pdf.)

A relative URL will point to different places depending on where the file it is used inside is located — for example if we moved our index.html file out of the projects directory and into the root of the web site (the top level, not in any directories), the pdfs/project-brief.pdf relative URL would now point to http://www.example.com/pdfs/project-brief.pdf, not http://www.example.com/projects/pdfs/project-brief.pdf.

There are some best practices to follow when writing links. Let's look at these now.

It's easy to throw links up on your page. That's not enough. We need to make our links accessible to all readers, regardless of their current context and which tools they prefer. For example:

  • Screenreader users like jumping around from link to link on the page, and reading links out of context.
  • Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.
  • Visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. They will find descriptive link text useful.

Let's look at a specific example:

Good link text: Download Firefox

<p><a href="https://firefox.com/">
  Download Firefox
</a></p>

Bad link text: Click here to download Firefox

<p><a href="https://firefox.com/">
  Click here
</a>
to download Firefox</p>

Other tips:

  • Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.
  • Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different colour and underlined (this convention generally shouldn't be broken, as users are so used to it.)
  • Keep your link label as short as possible — long links especially annoy screen reader users, who have to hear the whole thing read out.

From the description above, you might think that it is a good idea to just use absolute links all the time; after all, they don't break when a page is moved like relative links. However, you should use relative links wherever possible when linking to other locations within the same website (when linking to another website, you will need to use an absolute link):

  • For a start, it is a lot easier to scan your code — relative URLs are generally a lot shorter than absolute URLs, which makes reading code much easier.
  • Second, it is more efficient to use relative URLs wherever possible. When you use an absolute URL, the browser starts by looking up the real location of the server by querying the domain name with the DNS, then it goes to that server and finds the file that is being requested. With a relative URL on the other hand, the browser just looks up file that is being requested, on the same server. So if you use absolute URLs where relative URLs would do, you are constantly making your browser do extra work, meaning that it will perform less efficiently.

Linking to non-HTML resources — leave clear signposts

When linking to a resource that will be downloaded (like a PDF or Word document) or streamed (like video or audio) or has another potentially unexpected effect (opens a popup window, or loads a Flash movie), you should add clear wording to reduce any confusion. It can be quite annoying for example:

  • If you are on a low bandwidth connection, click a link and then a multiple megabyte download starts unexpectedly.
  • If you haven't got the Flash player installed, click a link and then suddenly get taken to a page that requires Flash.

Let's look at some examples, to see what kind of text can be used here:

<p><a href="http://www.example.com/large-report.pdf">
  Download the sales report (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
  Watch the video (stream opens in separate tab, HD quality)
</a></p>

<p><a href="http://www.example.com/car-game">
  Play the car game (requires Flash)
</a></p>

Use the download attribute when linking to a download

When you a linking to a resource that is to be downloaded rather than opened in the browser, you can use the download attribute to provide a default save filename. Here's an example with a download link to the Windows version of Firefox 39:

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
   download="firefox-39-installer.exe">
  Download Firefox 39 for Windows
</a>

Active learning: creating a navigation menu

For this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. This is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up.

You'll need to make local copies of the following four pages, in the same directory as one another (see the navigation-menu-start directory if you want a the full listing):

You should:

  1. Add an unordered list in the indicated place on one page, containing the names of the pages to link to. A navigation menu is usually just a list of links, so this is semantically ok.
  2. Turn each page name into a link to that page.
  3. Copy the navigation menu across to each page.
  4. On each page, remove just the link to that same page — it is confusing and pointless for a page to include a link to itself, and the lack of a link acts a good visual reminder of what page you are currently on.

The finished example should end up looking something like this:

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

Note: If you get stuck, or are not sure if you have got it right, you can check the navigation-menu-marked-up directory to see the correct answer.

It is possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resoiurce or page. This is done using the <a> element and the mailto: URL scheme.

In its most basic and commonly used form, a mailto: link simply indicates the email address of the intended recipient. For example:

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

This results in a link that looks like this: Send email to nowhere.

In fact, the email address is even optional. If you leave it out (that is, your href is simply "mailto:"), a new outgoing email window will be opened by the user's mail client that has no destination address specified yet. This is often useful as "Share" links that users can click to send an email to an address of their choosing.

Specifying details

In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the mailto URL you provide. The most commonly used of these are "subject", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). Each field and its value is specified as a query term.

Here's an example that includes a cc, bcc, subject and body:

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

Note: The values of each field must be URL-encoded (that is, with non-printing characters and spaces percent-escaped). Also note the use of the ampersand (&) to separate each field in the mailto: URL. This is standard URL query notation.

Here are a few other sample mailto URLs:

Summary

That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.

文档标签和贡献者

 此页面的贡献者: Primevera, hawm, ziyunfei, danlanxiaohei, c0ldian
 最后编辑者: Primevera,