hyperlinks Archives - Complete, Concrete, Concise https://complete-concrete-concise.com/tag/hyperlinks/ Practical Information Without The Bloat Sun, 12 Mar 2023 13:32:13 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 A Recipe Example with Hyperlinks https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/a-recipe-example-with-hyperlinks/ Mon, 02 Apr 2018 19:37:07 +0000 https://complete-concrete-concise.com/?p=3531 The previous recipe example updated to include hyperlinks to create a table of contents.

The post A Recipe Example with Hyperlinks appeared first on Complete, Concrete, Concise.

]]> The previous sample recipe1 page updated to use hyperlinks.

Contents

  1. A Sample Recipe Page
  2. The Source Code
  3. Notes

A Sample Recipe Page

You can see how the page looks here.

The Source Code

<!DOCTYPE HTML>
<html>
  <head>
    <title>Roasted Swordfish</title>
    <meta charset="utf-8"  />
  </head>
  <body>

    <h1>Roasted Swordfish with Manzanilla Olives, Cherry
       Tomatoes, and Capers</h1>

    <img src="roasted-swordfish.jpg"
      alt="Image of roasted swordfish with olives.">

    <h2>Table of Contents</h2>
    <ol>
      <li><a href="#ingredients">Ingredients</a></li>
      <li><a href="#preparation">Preparation</a></li>
        <ol>
          <li><a href="#the-sauce">The Sauce</a></li>
          <li>
            <a href="#the-swordfish">The Swordfish</a>
          </li>
          <li>
            <a href="#assembling-it">Assembling it</a>
          </li>
        </ol>
      </li>
    </ol>

    <h2 id="ingredients">Ingredients</h2>

    <ul>
      <li>4 six-ounce portions of swordfish, each about
        one inch thick</li>
      <li>1 cup Manzanilla olives</li>
      <li>4 cups of peeled cherry tomatoes in juice</li>
      <li>4 teaspoons capers, rinsed</li>
      <li>2 cloves garlic, sliced</li>
      <li>2 lemons juiced</li>
      <li>1 cup loosely packed parsley leaves</li>
      <li>Olive oil</li>
      <li>Salt and pepper</li>
    </ul>

    <h2 id=preparation>Preparation</h2>

    <h3 id="the-sauce">The Sauce</h3>
    <ol>
      <li>Heat ¼ cup olive oil in a high sided pot over
        medium heat.</li>
      <li>Peel and slice the garlic and add it to the
        warm oil.</li>
      <li>Sauté until the garlic is tender, not browned,
        then add the tomatoes and cook until the tomato
        liquid has reduce by half, about 20 minutes.</li>
      <li>Add the Manzanilla olives, capers, the juice of
        one lemon, parsley, and salt and pepper if needed.
      </li>
      <li>Set aside and keep warm until the swordfish is
        cooked.</li>
    </ol>


    <h3 id="the-swordfish">The Swordfish</h3>
    <ol start="6">
    <li>Season the swordfish with salt and pepper.</li>
    <li>Heat a large sauté pan over medium high heat
      and add about 1/4 cup olive oil.</li>
    <li>When very hot add the swordfish and cook until
      both sides are golden brown, about 3-4 minutes
      per side.</li>
    <li>Set aside on paper towels to absorb any excess
      oil.</li>
    </ol>

    <h3 id="assembling-it">Assembling it</h3>
    <ol start="10">
    <li>As the swordfish comes out of the sauté pan,
      divide the sauce between four warm dinner plates.
    </li>
    <li>Place one piece of fish on each plate.</li>
    <li>Squeeze some lemon on each piece of fish and
      serve while hot.</li>
    </ol>

    <p>----------</p>
    <h2>Credits</h2>
    <p>Recipe courtesy of <a href="http://www.foodista.com/recipe/727C67X3/roasted-swordfish-with-manzanilla-olives-cherry-tomatoes-and-capers" target="_blank">Foodista</a> (opens in a new tab).</p>
    <p>License: <a href="https://creativecommons.org/licenses/by/3.0/" target ="_blank">CC-BY-3.0</a> (opens in a new tab).</p>
    <p><a href="/sample/roasted-swordfish.jpg" download>Download</a> the image.</p>
  </body>
</html>

Notes

  1. An h1 tag was used for the title on the page.
  2. The content of the document was divided into two sections: Ingredients and Preparation using h2 tags.
  3. The preparation section was divided into three sections using h3 tags.
  4. The ingredients were listed using an unordered list.
  5. The directions were listed using an ordered list.
  6. For numbering continuity, the start attribute was used.
  7. An image with alt text was inserted under the main title.
  8. You can see from the src that the image is located in the same directory as the html file.
  9. Hyperlinks were used to create a table of contents for the document.
  10. To make it easier and minimize errors, the ids for the sections are the same as the name of the section. You don’t have to do this, it is easier to remember that Ingredients has the id ingredients rather than id1
  11. Two hyperlinks, linking to external sites, were created at the bottom of the document. Clicking them opens them in a new window or tab.
  12. One hyperlink to allow you to download the image.

Not all the tags we have seen in earlier tutorials were used because they were not needed – just because there are tags doesn’t mean you have to use them.

  1. Recipe and image courtesy of Foodista and licensed CC By 3.0↩

The post A Recipe Example with Hyperlinks appeared first on Complete, Concrete, Concise.

]]> Hyperlinks in HTML https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/hyperlinks-in-html/ Mon, 02 Apr 2018 13:52:24 +0000 https://complete-concrete-concise.com/?p=3512 Hyperlinks were the core idea behind the development of the World Wide Web.

The post Hyperlinks in HTML appeared first on Complete, Concrete, Concise.

]]> It has taken a while, but we’ve finally gotten to hyperlinks – the core idea behind the World Wide Web.

Hyperlinks are connections between two resources:

  1. the current document
  2. and some other resource the user can either navigate to or download

The HTML tag is <a> and it stands for anchor.

Contents

  1. <a> Element
    1. href
    2. target
    3. download
  2. Practical Considerations
  3. Summary
  4. Playing Around
  5. References

<a> Element

As with most HTML tags, hyperlinks are written with a starting <a> and ending </a> tags. Contained between those tags is the content that will serve as a hyperlink. Normally, it is some text, however, it can be an image, or any other part of the document which can be contained between the start and end tags.

<a>This is a hyperlink</a>

While the example above is a hyperlink, it is non-functional because it does not link to another resource – it simply defines a link. To make a link functional, we need to add an attribute to the <a> tag that specifies the URL of the resource.
Using the anchor tag in this way indicates that it is a placeholder for a future hyperlink.

href

The href attribute stands for hyperlink reference and provides the resource URL:

<p>A safe website to use in examples is
  <a href="http://example.com">example.com</a>
</p>

The URL can be an absolute URL or a relative URL.
An absolute URL is the complete URL, e.g.:

  • http://example.com
  • https://complete-concrete-concise.com

A relative URL is a partial URL relative to the current document location. Relative paths follow the Unix / Linux convention:

  • / – the root directory. This is the same as the domain. For example: 
    <a href="/">Take me to the home page</a>

    will jump to the home page of the domain.

  • . – the current path. The paths image.jpg and ./image.jpg both refer to the file image.jpg in the current directory. For example: 
    <a href="./image.jpg">Click to load the image.</a>
<a href="image.jpg">Click to load the image.</a>

    will both load the file image.jpg which is located in the same directory (location) as the .html file.

  • .. – one level up. So ../img/image.jpg refers to the file image.jpg which is located in the img folder which can be accessed by going up one directory level. In other words, the current directory and the img directory are siblings. For example: 
    <a href="../img/image.jpg">Click to load the image</a>

    will load the file image.jpg which is located in the folder img which can be accessed by going up one directory level.

You have seen that anchors can be used to navigate to another page or resource, however, they can also be used to navigate to locations in a document – the Table of Contents at the top of this article is an example.
To navigate to a portion of a document, you need two things:

  1. an identifier in the document which identifies the location
  2. a hyperlink to that identifier.

The identifier is an attribute you add to an opening HTML tag:

<p id="jump-here">Some text we can jump to.</p>

The id attribute value is jump-here and can be used as the value to the href attribute. However, there are a few provisos:

  1. The id value must be unique. It is incorrect to have two ids with the same value in the document.
  2. The id value must not contain spaces.
  3. The id value must contain at least one character.
  4. To be safe, use only:
    • letters
    • digits
    • underscores (_)
    • hyphens (-)
  5. To be extra safe, ensure the id value begins with a letter or underscore (_)
  6. The id value is case-insensitive, so, jump-here is the same as JUMP-HERE1

To reference an internal id in a link, you need to preface the name with the pound sign (#):

<a href="#jump-here">Jump to interesting part</a>

We can put this all together and create a simple table of contents:

<h2>Table of Contents</h2>
<ol>
  <li><a href="#topic1">Topic 1</a></li>
  <li><a href="#topic2">Topic 2</a></li>
  <li><a href="#topic3">Topic 3</a></li>
  <li><a href="#topic4">Topic 4</a></li>
</ol>

<p>Just some padding text, for no other purpose than
  having some text.</p>

<h2 id="topic1">Topic 1</h2>

<p>It is nice for each section to have some content.
  It doesn't need to be long, just long enough.</p>

<h2 id="topic2">Topic 2</h2>

<p>The content in <strong>Topic 2</strong> should
not be the same as in <strong>Topic 1</strong>.</p>

<h2 id="topic3">Topic 3</h2>

<p>After a while, it gets hard to come up with new
content. This is why people use <i>lorem ipsum</i></p>

<h2 id="topic4">Topic 4</h2>

<p>Lorem ipsum dolor sit amet, eum invenire erroribus
  id. At solum tamquam voluptatum his. Id ius omnis
  labitur adipiscing, ut tollit discere deseruisse per.
  Ea accumsan reprimique concludaturque eam, ut sed
  suas consetetur. Cum imperdiet referrentur in. Usu
  postulant philosophia id.</p>

Notice that each topic header has a unique id value and to navigate to those ids, we prepend the pound symbol to the name in the href attribute.
You can also use anchors and ids to create footnotes:

<p>Sometimes, it is nice to be able to put
  <a id="fnref1" href="#fn1">footnotes</a> in your
  documents because the content doesn't really belong
  in the main flow of the document</p>
<p>To see the effect, you will need to copy the next
  few paragraphs a many times, so the footnote scrolls
  off the bottom of the page.</p>
<p>Lorem ipsum dolor sit amet, eum invenire erroribus
  id. At solum tamquam voluptatum his. Id ius omnis
  labitur adipiscing, ut tollit discere deseruisse per.
  Ea accumsan reprimique concludaturque eam, ut sed
  suas consetetur. Cum imperdiet referrentur in.
  Usu postulant philosophia id.</p>
<p>In mea sumo disputationi. Te pri quodsi laoreet.
  Etiam dicta an vis, nec et mnesarchum incorrupte
  constituam, facer mandamus sea ei. Sale assum no
  vel, id labores inciderint vix. Diam accusata
  appellantur cum te, mel ne ornatus eleifend
  adversarium.</p>
<h2>Footnotes</h2>
<p>----------</p>
<p id="fn1"><strong>1.</strong> This is a footnote and
  it has a link to return back to your location in the
  document.
  <a href="#fnref1">↩</a>
</p>

I didn’t do a traditional footnote with the little superscript2 because we haven’t covered the tag yet. Nevertheless, you can see that it is possible to:

  1. create a footnote (or just notes) section in your documents
  2. jump or navigate to those sections
  3. return to the location were the jump was made from.
  4. add ids to anchor tags and navigate to them

You can also navigate to a specific location in any document by appending the id to the URL:

<a href="http://example.com/index.html#reference">
  Reference material
</a>

The code fragment above, creates a hyperlink which instructs the browser to load the document index.html from the domain example.com and to jump to the location on the page having an id with the value of reference.

target

By default, clicking on a hyperlink loads the resource into the current context (i.e. your current browser window or tab).
Setting the attribute target to “_blank” will cause the resource to open in a new window or tab:

<a href="http://example.com" target="_blank">Click to
  open in a new window or tab.</a>

download

Sometimes, you want a hyperlink to download a resource instead of loading it. This can be done using the download attribute:

<a href="http://example.com/file.zip" download="file.zip">
  Click to download.
</a>

The example above will prompt the user to download file.zip. If download has a value, it will be used as the default name for the resource being downloaded (the user can change it before downloading). If no value is given for download, the user will be prompted for a suitable filename. Obviously, if you are assigning a value to the download attribute, ensure it is a sensible filename.3

Practical Considerations

A good hyperlink is one that lets the user know exactly what they are going to get when they click on it. In other words, it should be informative.
Avoid vague or generic terms or phrases. For example, the following are not considered “good” hyperlinks:

<a href="http://example.com"> Click here!</a>

<a href="http://example.com"> Read more.</a>

<p>
  Get more information
  <a href="http://example.com"> here</a>.
</p>

Better hyperlinks would be:

<p> Download
  <a href="http://example.com">
    The Guide to Effective Links
  </a>
</p>

<p>There is so much to learn about the
  <a href="http://example.com">World Wide Web</a>
</p>

<p>
  <a href="http://example.com">Sign up</a>
  and become a member.
</p>

When people read, they tend to skim and notice the first few characters (about the length of 2 short words). If people can’t figure out what the hyperlink is about from the first 2 words, the text of the link is probably suboptimal.
You should also prefer nouns, objects, and concrete things over verbs. The title of a resource, generally, is the appropriate text for a hyperlink.
You can also put a hyperlink on an image:

<a href="big_image.jpg">
  <img src="thumbail.jpg">
</a>

(The example above assumes both images are in the same location as the HTML document.)
You would typically do this to minimize the image size in your document (this leads to faster download and a better user experience). If the user wants to see the full sized image, they can click on the image.
You might also do this if hyperlink text is not good enough. For example, the social media buttons you see on many websites are little images wrapped inside an HTML anchor:

<a href="facebook.com"><img src="fb_thumb.png"></a>

While you can create a link to open in a new window or tab (using target=“_blank”), remember that many people don’t appreciate new windows or tabs opening up without warning. So it is a good idea to warn people:

<p>
  Get a
  <a href="http://example.com" target="_blank">
    Free Sample
  </a>. (Opens in a new tab.)
</p>

Summary

  • The <a> tag is used to create a hyperlink in your document.
  • The hyperlink can be to various types of resources:
    • Documents on other websites
    • Documents on your website
    • Locations within your document
    • Other files or images
  • To create a hyperlink to a part of your document, you need to add an id attribute to an HTML tag in that region and you reference the id by prefacing its value with a pound sign (#)
  • The href attribute takes an absolute or relative URL to a resource.
  • The target attribute allows you to specify the hyperlink should open in a new window or tab.
  • The download attribute allows you to specify the resource should be downloaded.
  • Pick meaningful text for hyperlinks. The user should be able to infer what the hyperlink resource is from just the first few characters (about the length of 2 short words).
  • Images can be used as hyperlinks. This is commonly seen in social media icons.

Playing Around

The best way to learn is to play around with what you have learned.
Some webpage ideas are:

  • update one of your previous webpages to include hyperlinks – for example, replace the images with a smaller “thumbnail” images and create hyperlinks to load the full sized image
  • create a number of recipe pages and a main page that lists all the recipes and links to them. Put a return link on each recipe page back to the main page.
  • if you are feeling extremely adventurous, create a “Choose Your Own Adventure” story. This is a type of story in which the reader reads a short piece of prose (usually 1-3 paragraphs) and has to choose an action at the end, this leads to another page, and so on.
  • create a reference page for yourself. I am pretty sure this tutorial series is not the only resource you are using. Create a page that lists and links to your favourite resources.

References

  1. <a> tag
  2. href attribute
  3. target attribute
  4. download attribute
  5. Effective Hyperlinks
  1. This is not true for XHTML which has case-sensitive id values. Also, there was a bug in Netscape 6 (an ancient browser released in 2000) which treated the values as case-sensitive.↩
  2. You can use <sup> and </sup> for superscript and <sub> and </sub> for subscript. 
    <p>The formula for water is H<sub>2</sub>O.</p>

<p>y = x<sup>2</sup> + 3x + 12</p>

    ↩

  3. Because you have no idea what sort of file system your resource may be downloaded to, it is best to follow these general naming rules:↩
    • avoid spaces in the name
    • use only letters, digits, underscores (_), hyphens (-), and periods
    • preferably start the filename with a letter or underscore
    • keep the name short – preferably no longer than 8 characters + period + 3 characters (e.g. filename.nam)

The post Hyperlinks in HTML appeared first on Complete, Concrete, Concise.

]]>