{"id":67,"date":"2017-05-04T17:44:52","date_gmt":"2017-05-04T17:44:52","guid":{"rendered":"https:\/\/integrations.pressbooks.network\/pressbooks101\/chapter\/anchors\/"},"modified":"2020-05-15T01:04:50","modified_gmt":"2020-05-15T01:04:50","slug":"anchors","status":"publish","type":"chapter","link":"https:\/\/integrations.pressbooks.network\/pressbooks101\/chapter\/anchors\/","title":{"raw":"Anchors","rendered":"Anchors"},"content":{"raw":"<div class=\"textbox shaded\">\n\nAnchors are links on a page that bring you to a specific place on that page. They can be very helpful in structuring your Pressbooks chapters\u00a0and drawing readers to specific content on your page with ease.\n\nIn this chapter, you'll learn how to:\n<ul>\n \t<li>Make an anchor<\/li>\n \t<li>Link to an anchor<\/li>\n \t<li>Organize your chapter with anchor links<\/li>\n<\/ul>\n<\/div>\n<h4>How to Make an Anchor<\/h4>\nTo make an anchor, place your cursor next to the place in the chapter where you'd like the anchor link to jump to when clicked by a user. Then click the Anchor button on the WYSIWYG Editor. It looks like this:\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/05\/Screen-Shot-2017-05-02-at-12.12.54-PM.png\"><img class=\"size-full wp-image-62 alignnone\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/04\/Screen-Shot-2017-05-02-at-12.12.54-PM.png\" alt=\"anchor button\" width=\"99\" height=\"70\"><\/a>\n\nIt will create an anchor field where you'll type in the name of your anchor. It's recommended that you make the name something short, contains no spaces, and is descriptive\u00a0(so it's easy to remember). For example, to make a series of anchors for this page, I would use make, link, and organize. They're short and describe the sections of the page.\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/05\/Screen-Shot-2017-05-02-at-12.19.32-PM.png\"><img class=\"size-full wp-image-63 alignnone\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.19.32-PM.png\" alt=\"anchor field\" width=\"419\" height=\"172\"><\/a>\n<h4>How to Link to an Anchor<\/h4>\n<strong>On the Same Page<\/strong>\n\nLinking to an anchor on the same page is as easy as creating a link in Pressbooks. There is only one extra step. Begin by highlighting the text you want the anchor to link to. (Where you want the user to click to go to the content where the anchor is). Then click the Insert\/Edit Link button.\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/05\/Screen-Shot-2017-05-02-at-12.34.20-PM.png\"><img class=\"size-full wp-image-64 alignnone\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.34.20-PM.png\" alt=\"insert link\" width=\"172\" height=\"71\"><\/a>\n\nThen you'll type in the name you gave the anchor in the previous step, proceeded by a hashtag. See below:\n\n<img class=\"aligncenter wp-image-65 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2018-01-25-at-9.36.58-AM.png\" alt=\"Image of the dropdown box that appears when users insert a hyperlink. In this photo, the user has typed the anchor title &quot;#example&quot;). \" width=\"546\" height=\"244\">\n\n<strong>On a Different Page<\/strong>\n\nIf you want to create an anchor that links back to a different part of the book. You'll make the anchor in the same way, but when you link to it you'll want to include a full URL when you insert the link.\n\nYou'll create the link, by highlighting the text and clicking on the link button, then you'll want to type in the full URL of the chapter you are linking to with the #anchorname you created.\n\nFor example, if you were linking the #make anchor we created before on another page, it would look like this:\n\n<a href=\"https:\/\/integrations.pressbooks.network\/pressbooks101\/chapter\/anchors\/#make\">https:\/\/wisc.pb.unizin.org\/pressbooks101\/chapter\/anchors\/#make<\/a>\n<h4>How to Organize your Book with Anchors<\/h4>\nYou can also use anchors to organize the content within your Chapters. Using anchors you can build a Table of Contents style navigation section at the top of your chapter. You can see how this works in action in the <a href=\"https:\/\/integrations.pressbooks.network\/pressbooks101\/chapter\/1-1-one-page-organization\/#onepage\">One Page Organization<\/a>[footnote]This is an example of an anchor that links to a different page.[\/footnote] chapter of this book.\n\nTo do so, it's recommended that you use headings for your sections and then place the anchors next to the section headings, so that they are accessible to readers using a screen reader. See the example below.\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/05\/Screen-Shot-2017-05-02-at-12.32.25-PM.png\"><img class=\"size-full wp-image-66 alignnone\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.32.25-PM.png\" alt=\"anchor links\" width=\"274\" height=\"157\"><\/a>\n\n&nbsp;\n\n&nbsp;\n\n&nbsp;","rendered":"<div class=\"textbox shaded\">\n<p>Anchors are links on a page that bring you to a specific place on that page. They can be very helpful in structuring your Pressbooks chapters\u00a0and drawing readers to specific content on your page with ease.<\/p>\n<p>In this chapter, you&#8217;ll learn how to:<\/p>\n<ul>\n<li>Make an anchor<\/li>\n<li>Link to an anchor<\/li>\n<li>Organize your chapter with anchor links<\/li>\n<\/ul>\n<\/div>\n<h4>How to Make an Anchor<\/h4>\n<p>To make an anchor, place your cursor next to the place in the chapter where you&#8217;d like the anchor link to jump to when clicked by a user. Then click the Anchor button on the WYSIWYG Editor. It looks like this:<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/05\/Screen-Shot-2017-05-02-at-12.12.54-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-62 alignnone\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/04\/Screen-Shot-2017-05-02-at-12.12.54-PM.png\" alt=\"anchor button\" width=\"99\" height=\"70\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/04\/Screen-Shot-2017-05-02-at-12.12.54-PM.png 99w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/04\/Screen-Shot-2017-05-02-at-12.12.54-PM-65x46.png 65w\" sizes=\"auto, (max-width: 99px) 100vw, 99px\" \/><\/a><\/p>\n<p>It will create an anchor field where you&#8217;ll type in the name of your anchor. It&#8217;s recommended that you make the name something short, contains no spaces, and is descriptive\u00a0(so it&#8217;s easy to remember). For example, to make a series of anchors for this page, I would use make, link, and organize. They&#8217;re short and describe the sections of the page.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/05\/Screen-Shot-2017-05-02-at-12.19.32-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-63 alignnone\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.19.32-PM.png\" alt=\"anchor field\" width=\"419\" height=\"172\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.19.32-PM.png 419w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.19.32-PM-300x123.png 300w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.19.32-PM-65x27.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.19.32-PM-225x92.png 225w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.19.32-PM-350x144.png 350w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><\/a><\/p>\n<h4>How to Link to an Anchor<\/h4>\n<p><strong>On the Same Page<\/strong><\/p>\n<p>Linking to an anchor on the same page is as easy as creating a link in Pressbooks. There is only one extra step. Begin by highlighting the text you want the anchor to link to. (Where you want the user to click to go to the content where the anchor is). Then click the Insert\/Edit Link button.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/05\/Screen-Shot-2017-05-02-at-12.34.20-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-64 alignnone\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.34.20-PM.png\" alt=\"insert link\" width=\"172\" height=\"71\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.34.20-PM.png 172w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.34.20-PM-65x27.png 65w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><\/p>\n<p>Then you&#8217;ll type in the name you gave the anchor in the previous step, proceeded by a hashtag. See below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2018-01-25-at-9.36.58-AM.png\" alt=\"Image of the dropdown box that appears when users insert a hyperlink. In this photo, the user has typed the anchor title &quot;#example&quot;).\" width=\"546\" height=\"244\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2018-01-25-at-9.36.58-AM.png 546w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2018-01-25-at-9.36.58-AM-300x134.png 300w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2018-01-25-at-9.36.58-AM-65x29.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2018-01-25-at-9.36.58-AM-225x101.png 225w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2018-01-25-at-9.36.58-AM-350x156.png 350w\" sizes=\"auto, (max-width: 546px) 100vw, 546px\" \/><\/p>\n<p><strong>On a Different Page<\/strong><\/p>\n<p>If you want to create an anchor that links back to a different part of the book. You&#8217;ll make the anchor in the same way, but when you link to it you&#8217;ll want to include a full URL when you insert the link.<\/p>\n<p>You&#8217;ll create the link, by highlighting the text and clicking on the link button, then you&#8217;ll want to type in the full URL of the chapter you are linking to with the #anchorname you created.<\/p>\n<p>For example, if you were linking the #make anchor we created before on another page, it would look like this:<\/p>\n<p><a href=\"https:\/\/integrations.pressbooks.network\/pressbooks101\/chapter\/anchors\/#make\">https:\/\/wisc.pb.unizin.org\/pressbooks101\/chapter\/anchors\/#make<\/a><\/p>\n<h4>How to Organize your Book with Anchors<\/h4>\n<p>You can also use anchors to organize the content within your Chapters. Using anchors you can build a Table of Contents style navigation section at the top of your chapter. You can see how this works in action in the <a href=\"https:\/\/integrations.pressbooks.network\/pressbooks101\/chapter\/1-1-one-page-organization\/#onepage\">One Page Organization<\/a><a class=\"footnote\" title=\"This is an example of an anchor that links to a different page.\" id=\"return-footnote-67-1\" href=\"#footnote-67-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a> chapter of this book.<\/p>\n<p>To do so, it&#8217;s recommended that you use headings for your sections and then place the anchors next to the section headings, so that they are accessible to readers using a screen reader. See the example below.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/05\/Screen-Shot-2017-05-02-at-12.32.25-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-66 alignnone\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.32.25-PM.png\" alt=\"anchor links\" width=\"274\" height=\"157\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.32.25-PM.png 274w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.32.25-PM-65x37.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/Screen-Shot-2017-05-02-at-12.32.25-PM-225x129.png 225w\" sizes=\"auto, (max-width: 274px) 100vw, 274px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-67-1\">This is an example of an anchor that links to a different page. <a href=\"#return-footnote-67-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":14,"menu_order":6,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-67","chapter","type-chapter","status-publish","hentry"],"part":19,"_links":{"self":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/67","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/users\/14"}],"version-history":[{"count":1,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/67\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/67\/revisions\/68"}],"part":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/parts\/19"}],"metadata":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/67\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/media?parent=67"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapter-type?post=67"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/contributor?post=67"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/license?post=67"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}