Knowing how to link your code to other documents is important.

Absolute References

Absolute references (sometimes called external links) connect to pages in other domains. In the href attribute of the tage the full URL of the page, image, or other resources you would like to link to is specified. Once example might be your quest to list some of the greatest bakeries of all time. Since you want to link to the bakeries themselves and not to files that you wrote, you would use an absolute reference.

The code I used to create the links is:

        <a href = "">Washtenaw Dairy</a>
        <a href = "">The Dexter Bakery</a>       

If any of these businesses change their URL my links will not work any longer.

Relative References

Relative references connect to pages within your domain. The the href attribute of the tag only the folder (if any) and filename is specified. Some examples of when you might use relative refereces would be in your navigation bar or links to your own images.

The code I used to create the links is:

        <a href = "fontawesome.html">Code from this week's lecture on FontAwesome lecture </a>
        <a href = "images/WD_donut.jpg"> A picture from a subfolder.</a>
        <a href = "../week1/firstPage.html">Code from previous week's lecture.></a>

Images as Links

More an dmore people are moving away from textual prompts to ones that are graphics based. This is to make the page look "nicer". I can redo the externaal link to Washtenaw Dairy using a picture instead of words.

  • Washtenaw Dairy
  • Something to keep in mind though is that not everyoen can see the image, or they may not realize that the image is a link. As you become more confident in your coding you will want to make sure to have people test your pages so that you can make it an optimal experience for as many people as possible.

    Embedded Links

    Every tag can have an id attribute. The id attribute gives a name to a very specific setion of the page. You can use that id to link directly to a part of your page instead of just to the page in general. This is a great way to allow people to quickly jump to a specific section on your page.

    1. Absolute References
    2. Relative References
    3. Images as Links
    4. Embedded References

    When you click on any of the links above, teh browser will bring that section into focus. It may be the case the bottom two links don't appear to do anything, but that may be because the content is already visible on your screen.

    Here is the cde I used to create those four links

                    <a href = "#absolute">Absolute References</a>
                    <a href = "#relative">Relative References</a>
                    <a href = "#images">Images as Links</a>
                    <a href = "#embedded">Embedded References</a>

    **Don't forget that you can chose "View Source" from your browser to take a closer look at the code I created to create these links.