Try   HackMD

Section 12: Links

  • This section introduces the link (or hyperlink, or Web link), the basic hypertext construct. A link is a connection from one Web resource to another.

  • A link has two ends (also called anchors) and a direction. The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).

12.1.1 Visiting a linked resource

  • The default behavior associated with a link is the retrieval of another Web resource.
  • This behavior is commonly and implicitly obtained by selecting the link (e.g., by clicking, through keyboard input, etc.).
<BODY>
...some text...
<P>You'll find a lot more in  <A href="chapter2.html">chapter two</A>. 
See also this <A href="../images/forest.gif">map of the enchanted forest.</A>
</BODY>
  • The href attribute in each source anchor specifies the address of the destination anchor with a URI.
  • The destination anchor of a link may be an element within an HTML document.
    • two ways to achieve it:
      1. by the A element (naming it with the name attribute)
      2. by any other element (naming with the id attribute).
<!-- example for first way -->
<H1>Table of Contents</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Some background</A><BR>
<A href="#section2.1">On a more personal note</A><BR>
...the rest of the table of contents...
...the document body...
<H2><A name="section1">Introduction</A></H2>
...section 1...
<H2><A name="section2">Some background</A></H2>
...section 2...
<H3><A name="section2.1">On a more personal note</A></H3>
...section 2.1...

<!-- example for second way -->
<H1>Table of Contents</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Some background</A><BR>
<A href="#section2.1">On a more personal note</A><BR>
...the rest of the table of contents...
...the document body...
<H2 id="section1">Introduction</H2>
...section 1...
<H2 id="section2">Some background</H2>
...section 2...
<H3 id="section2.1">On a more personal note</H3>
...section 2.1...
  • Authors may insert links in their documents that express other relationships between resources. Links that express other types of relationships have one or more link types specified in their source anchor.
  • The roles of a link defined by A or LINK are specified via the rel and rev attributes.
<HEAD>
...other head information...
<TITLE>Chapter 5</TITLE>
<LINK rel="prev" href="chapter4.html">
<LINK rel="next" href="chapter6.html">
</HEAD>

  • The LINK element may only appear in the head of a document. The A element may only appear in the body.

  • When the A element's href attribute is set, the element defines a source anchor for a link that may be activated by the user to retrieve a Web resource.

  • The source anchor is the location of the A instance and the destination anchor is the Web resource.

  • The retrieved resource may be handled by the user agent in several ways:

    • by opening a new HTML document in the same user agent window
    • opening a new HTML document in a different window
    • starting a new program to handle the resource, etc.
  • The title attribute may be set for both A and LINK to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc.
  • the A and LINK elements support the charset attribute. This attribute allows authors to advise user agents about the encoding of data at the other end of the link.

12.2 The A element

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->
<!ATTLIST A
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
  type        %ContentType;  #IMPLIED  -- advisory content type --
  name        CDATA          #IMPLIED  -- named link end --
  href        %URI;          #IMPLIED  -- URI for linked resource --
  hreflang    %LanguageCode; #IMPLIED  -- language code --
  rel         %LinkTypes;    #IMPLIED  -- forward link types --
  rev         %LinkTypes;    #IMPLIED  -- reverse link types --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  shape       %Shape;        rect      -- for use with client-side image maps --
  coords      %Coords;       #IMPLIED  -- for use with client-side image maps --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  >
  • Start tag: required, End tag: required
  • Attribute definitions
    • name = cdata [CS]
      • This attribute names the current anchor so that it may be the destination of another link. The value of this attribute must be a unique anchor name. The scope of this name is the current document.
    • href = uri [CT]
      • specify the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor
    • hreflang = langcode [CI]
      • specify the base language of the resource designated by href and may only be used when href is specified.
    • type = content-type [CI]
      • gives an advisory hint as to the content type of the content available at the link target address. It allows user agents to opt to use a fallback mechanism rather than fetch the content if they are advised that they will get content in a content type they do not support.
    • rel = link-types [CI]
      • describe the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types.
    • rev = link-types [CI]
      • describe a reverse link from the anchor specified by the href attribute to the current document. The value of this attribute is a space-separated list of link types.
    • charset = charset [CI]
      • specify the character encoding of the resource designated by the link.
  • Attributes defined elsewhere
    • id, class (document-wide identifiers)
    • lang (language information), dir (text direction)
    • title (element title)
    • target (target frame information)
    • tabindex (tabbing navigation)
    • …
  • Examples:
  1. the A element defines a link. The source anchor is the text "W3C Web site" and the destination anchor is "http://www.w3.org/"
For more information about W3C, please consult the 
<A href="http://www.w3.org/">W3C Web site</A>.
  1. To tell user agents what the character encoding of the destination page is, set the charset attribute:
For more information about W3C, please consult the 
<A href="http://www.w3.org/" charset="ISO-8859-1">W3C Web site</A>
  1. Link a defined anchor from the same or another document
  • first, define a anchor named "anchor-one" in the file "one.html".
<!-- in "one.html" -->
...text before the anchor...
<A name="anchor-one">This is the location of anchor one.</A>
...text after the anchor...
  • then, a link defined in the file "two.html" in the same directory as "one.html" would refer to the anchor
<!-- in "two.html" -->
...text before the link...
For more information, please consult <A href="./one.html#anchor-one"> anchor one</A>.
...text after the link...
  • How to?
    • URIs that designate anchors contain a "#" character followed by the anchor name (the fragment identifier). Here are some examples of such URIs:

12.2.1 Syntax of anchor names

  • An anchor name is the value of either the name or id attribute. Anchor names must observe the following rules:
    • Uniqueness: Anchor names must be unique within a document. Anchor names that differ only in case may not appear in the same document.
    • String matching: Comparisons between fragment identifiers and anchor names must be done by exact (case-sensitive) match.
  • Legal example:
<P><A href="#abc">...</A>
...more document...
<P><A name="abc">...</A>
  • Illegal example:
<P><A name="abc">...</A>
<P><A name="ABC">...</A>

  • Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

  • Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.

12.2.3 Anchors with the id attribute

  • The id attribute may be used to create an anchor at the start tag of any element (including the A element).
    • create an anchor in an H2 element. And it is linked to via the A element.
You may read more about this in <A href="#section2">Section Two</A>.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to <A href="#section2">Section Two</A> above
for more details.

NOTE

  • The id and name attributes share the same name space. This means that they cannot both define an anchor with the same name in the same document.
    Like this:
<A href="#a1">...</A>
...
<H1 id="a1">
...pages and pages...
<A name="a1"></A>
  • It is permissible to use both attributes to specify an element's unique identifier for the following elements: A, APPLET, FORM, FRAME, IFRAME,IMG, and MAP. When both attributes are used on a single element, their values must be identical.
<P><A name="a1" id="a1" href="#a1">...</A>
  • Because of its specification in the HTML DTD, the name attribute may contain character references. Thus, the value Dürst is a valid name attribute value, as is Dürst . The id attribute, on the other hand, may not contain character references.

Use id or name?

  • Authors should consider the following issues when deciding whether to use id or name for an anchor name:

    • The id attribute can act as more than just an anchor name (e.g., style sheet selector, processing identifier, etc.).
    • Some older user agents don't support anchors created with the id attribute.
    • The name attribute allows richer anchor names (with entities).

12.2.4 Unavailable and unidentifiable resources

  • A reference to an unavailable or unidentifiable resource is an error.
    • If a user agent cannot locate a linked resource, it should alert the user.
    • If a user agent cannot identify the type of a linked resource, it should still attempt to process it. It should alert the user and may allow the user to intervene and identify the document type.
<!ELEMENT LINK - O EMPTY               -- a media-independent link -->
<!ATTLIST LINK
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
  href        %URI;          #IMPLIED  -- URI for linked resource --
  hreflang    %LanguageCode; #IMPLIED  -- language code --
  type        %ContentType;  #IMPLIED  -- advisory content type --
  rel         %LinkTypes;    #IMPLIED  -- forward link types --
  rev         %LinkTypes;    #IMPLIED  -- reverse link types --
  media       %MediaDesc;    #IMPLIED  -- for rendering on these media --
  >
  • Start tag: required, End tag: forbidden
  • This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times. Although LINK has no content, it conveys relationship information that may be rendered by user agents in a variety of ways (e.g., a tool-bar with a drop-down menu of links).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
  <TITLE>Chapter 2</TITLE>
  <LINK rel="Index" href="../index.html">
  <LINK rel="Next"  href="Chapter3.html">
  <LINK rel="Prev"  href="Chapter1.html">
</HEAD>
...the rest of the document...

  • the rel attribute specifies a forward link and the rev attribute specifies a reverse link.

  • Consider two documents A and B.

    Document A: <LINK href="docB" rel="foo">

    Has exactly the same meaning as:

    Document B: <LINK href="docA" rev="foo">

    Both attributes may be specified simultaneously.

  • When the LINK element links an external style sheet to a document, the type attribute specifies the style sheet language and the media attribute specifies the intended rendering medium or media. User agents may save time by retrieving from the network only those style sheets that apply to the current device.
  • Authors may use the LINK element to provide a variety of information to search engines, including:
    • Links to alternate versions of a document, written in another human language.
    • Links to alternate versions of a document, designed for different media, for instance a version especially suited for printing.
    • Links to the starting page of a collection of documents.

Examples

  1. The examples below illustrate how language information, media types, and link types may be combined to improve document handling by search engines.
    • the hreflang attribute to tell search engines where to find Dutch, Portuguese, and Arabic versions of a document.
    • the charset attribute for the Arabic manual.
    • the lang attribute to indicate that the value of the title attribute for the LINK element designating the French manual is in French.
<HEAD>
<TITLE>The manual in English</TITLE>

<LINK title="The manual in Dutch"
      type="text/html"
      rel="alternate"
      hreflang="nl" 
      href="http://someplace.com/manual/dutch.html">
      
<LINK title="The manual in Portuguese"
      type="text/html"
      rel="alternate"
      hreflang="pt" 
      href="http://someplace.com/manual/portuguese.html">
      
<LINK title="The manual in Arabic"
      type="text/html"
      rel="alternate"
      charset="ISO-8859-6"
      hreflang="ar" 
      href="http://someplace.com/manual/arabic.html">
      
<LINK lang="fr" title="La documentation en Fran&ccedil;ais"
      type="text/html"
      rel="alternate"
      hreflang="fr"
      href="http://someplace.com/manual/french.html">
</HEAD>
  1. In the following example, we tell search engines where to find the printed version of a manual.
<HEAD>
<TITLE>Reference manual</TITLE>
<LINK media="print" title="The manual in postscript"
      type="application/postscript"
      rel="alternate"
      href="http://someplace.com/manual/postscript.ps">
</HEAD>
  1. we tell search engines where to find the front page of a collection of documents.
<HEAD>
<TITLE>Reference manual -- Page 5</TITLE>
<LINK rel="Start" title="The first page of the manual"
      type="text/html"
      href="http://someplace.com/manual/start.html">
</HEAD>

12.4 Path information: the BASE element

<!ELEMENT BASE - O EMPTY               -- document base URI -->
<!ATTLIST BASE
  href        %URI;          #REQUIRED -- URI that acts as base URI --
  >

  • Start tag: required, End tag: forbidden

  • In HTML, links and references to external images are always specified by a URI. Relative URIs are resolved according to a base URI, which may come from a variety of sources. The BASE element allows authors to specify a document's base URI explicitly.

  • When present, the BASE element must appear in the HEAD section of an HTML document, before any element that refers to an external source. There can be only one <base> element in a document.

  • For example, given the following BASE declaration and A declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
   <TITLE>Our Products</TITLE>
   <BASE href="http://www.aviary.com/products/intro.html">
 </HEAD>

 <BODY>
   <P>Have you seen our <A href="../cages/birds.gif">Bird Cages</A>?
 </BODY>
</HTML>

12.4.1 Resolving relative URIs

  • User agents must calculate the base URI according to the following precedences (highest priority to lowest):
  1. The base URI is set by the BASE element.
  2. The base URI is given by meta data discovered during a protocol interaction, such as an HTTP header (see [RFC2616]).
  3. By default, the base URI is that of the current document. Not all HTML documents have a base URI (e.g., a valid HTML document may appear in an email and may not be designated by a URI). Such HTML documents are considered erroneous if they contain relative URIs and rely on a default base URI.
Last changed by 
 
交通大學校園電腦社群策進會
0
1838

Read more

NYCU 課程資訊交流平台

&#x60F3;&#x6CD5;&#x6E90;&#x8D77; &#x73FE;&#x5728;&#x4EA4;&#x5927;&#x6C92;&#x6709;&#x4E00;&#x500B;&#x9019;&#x6A23;&#x7684;&#x5E73;&#x53F0;&#xFF0C;&#x6709;&#x5F88;&#x591A;&#x65B0;&#x8AB2;&#x7A0B;&#x51FA;&#x4F86;&#x6216;&#x662F;&#x820A;&#x8AB2;&#x7A0B;&#x66F4;&#x65B0;&#xFF0C;&#x6BD4;&#x8F03;&#x96E3;&#x627E;&#x5230;&#x8FD1;&#x5E74;&#x7684;&#x8AB2;&#x7A0B;&#x8CC7;&#x8A0A; &#x8A31;&#x591A;&#x4EBA;&#x81EA;&#x5DF1;&#x6709;&#x505A;&#x8AB2;&#x7A0B;&#x7B46;&#x8A18;&#xFF0C;&#x653E;&#x5728;&#x81EA;&#x5DF1;&#x7684; HackMD &#x6216;&#x662F;&#x90E8;&#x843D;&#x683C;&#xFF0C;&#x5982;&#x679C;&#x60F3;&#x8981;&#x516C;&#x958B;&#x5206;&#x4EAB;&#x7D66;&#x5927;&#x5BB6;&#x770B;&#xFF0C;&#x80FD;&#x6709;&#x4E00;&#x500B;&#x5730;&#x65B9;&#x53EF;&#x4EE5;&#x7D71;&#x6574;&#x9019;&#x4E9B;&#x8CC7;&#x8A0A; &#x5E73;&#x53F0;&#x9700;&#x8981;&#x6709;&#x4EBA;&#x53EF;&#x4EE5;&#x9577;&#x4E45;&#x7DAD;&#x8B77;&#xFF0C;CCCA &#x7684;&#x793E;&#x5718;&#x6027;&#x8CEA;&#x5408;&#x9069; &#x76EE;&#x7684; &#x6211;&#x5011;&#x60F3;&#x642D;&#x5EFA;&#x4E00;&#x500B;&#x5E73;&#x53F0;&#x96C6;&#x5408;&#x95DC;&#x65BC; NYCU &#x7684;&#x8AB2;&#x7A0B;&#x8CC7;&#x8A0A;&#xFF0C;&#x5E6B;&#x52A9;&#x5927;&#x5BB6;&#x4E86;&#x89E3;&#x8AB2;&#x7A0B;&#x5167;&#x5BB9;&#x548C;&#x4FEE;&#x8AB2;&#x53C3;&#x8003; &#x4E0D;&#x9650;&#x79D1;&#x7CFB;&#x3001;&#x4E0D;&#x9650;&#x8AB2;&#x7A0B;&#x7A2E;&#x985E;

Aug 17, 2022
[5月座談會] - Scisprint 2022 May in NYCU preparation meeting - 0420

Scisprint 2022 May in NYCU Task Assignment &#x7C89;&#x5C08;&#x767C;&#x6587;&#x5BA3;&#x50B3; &#x6587;&#x6848;: [name=&#x54C1;&#x59A4;]&#x3001;[name=&#x81F3;&#x4F36;] &#x5716;: [name=&#x73EE;&#x541F;]&#x3001;[name=&#x57F9;&#x7504;] (*5/4 &#x66F4;&#x65B0;&#x5167;&#x5BB9;)

Aug 10, 2022
HTML4 Specification

https://www.w3.org/TR/html401/cover.html#minitoc google meet link: https://meet.google.com/jqw-dxae-pxe &#x9031;&#x6B21; &#x65E5;&#x671F; &#x7AE0;&#x7BC0; &#x4E3B;&#x6301; &#x7B46;&#x8A18; 1

Jul 6, 2022
Section 14: Style Sheets

document link 14.1 Introduction to style sheets Style sheets represent a major breakthrough for Web page designers, expanding their ability to improve the appearance of their pages. Style sheets make it easy to specify the amount of white space between text lines, the amount lines are indented, the colors used for the text and the backgrounds, the font size and style, and a host of other details. 14.2 Adding style to HTML 14.2.1 Setting the default style sheet language

Jun 22, 2022
Read more from 交通大學校園電腦社群策進會
Published on HackMD