{"id":665,"date":"2020-01-02T19:33:08","date_gmt":"2020-01-03T00:33:08","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=665"},"modified":"2026-01-20T20:01:22","modified_gmt":"2026-01-20T20:01:22","slug":"links","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/links\/","title":{"rendered":"Links"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1702\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/14\/2020\/01\/mike-alonzo-Xe7za0JtTeM-unsplash-scaled-1.jpg\" alt=\"\" class=\"wp-image-952\" srcset=\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/mike-alonzo-Xe7za0JtTeM-unsplash-scaled-1.jpg 2560w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/mike-alonzo-Xe7za0JtTeM-unsplash-scaled-1-300x199.jpg 300w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/mike-alonzo-Xe7za0JtTeM-unsplash-scaled-1-1024x681.jpg 1024w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/mike-alonzo-Xe7za0JtTeM-unsplash-scaled-1-768x511.jpg 768w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/mike-alonzo-Xe7za0JtTeM-unsplash-scaled-1-1536x1021.jpg 1536w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/mike-alonzo-Xe7za0JtTeM-unsplash-scaled-1-2048x1362.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\">Photo by&nbsp;<a href=\"https:\/\/unsplash.com\/@mikezo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Mike Alonzo<\/a>.<\/figcaption><\/figure>\n\n\n\n<p>The concept of \u201cbrowsing\u201d or \u201csurfing\u201d the web comes from the act of moving quickly from one webpage to another. By the end of this lesson, you\u2019ll learn how to:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create links from one website to another&nbsp;<\/li>\n\n\n\n<li>Create links from one page to another on the same website<\/li>\n\n\n\n<li>Link an email address that opens your default email application with an email addressed to someone&nbsp;<\/li>\n\n\n\n<li>Link in a new browser window or tab<\/li>\n\n\n\n<li>Link from one part of a webpage to another part of the same webpage&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Open your homepage (within your webdev folder), index.html, in Visual Studio Code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Linking From One Website to Another <\/strong><\/h2>\n\n\n\n<p>Here\u2019s an example of a link to an external website: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"http:\/\/nmi.cool\/webdev\/\"&gt;Web Development Workbook&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Let\u2019s break this down. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\u201c<strong>URL<\/strong>\u201d&gt;<strong>Link Preview Text<\/strong>&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Notice links consist of four elements: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>An opening tag &#8211; <strong>a href<\/strong><\/li>\n\n\n\n<li>The URL, in quotes <\/li>\n\n\n\n<li>The link preview text, between the tags. This is what the user sees on your page.<\/li>\n\n\n\n<li>A closing tag &#8211; <strong>&lt;\/a&gt;<\/strong><\/li>\n<\/ul>\n\n\n\n<p>If we were to preview this file, we&#8217;d just see the link preview text:<br><br><a href=\"https:\/\/nmi.cool\/webdev\" target=\"_blank\" rel=\"noreferrer noopener\">Web Development Workbook<\/a><\/p>\n\n\n\n<p class=\"has-light-gray-background-color has-background\"><strong>Important Note: <\/strong>All the links in this reading belong in the &lt;body&gt; of your HTML files. Don&#8217;t get it mixed up with stylesheets. Those links go in the &lt;head&gt; of your HTML files. Not sure what a stylesheet is\u2014 don&#8217;t worry, we&#8217;ll talk about it soon! <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Styling and writing links<\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#0000ee\"><span style=\"text-decoration: underline\">By default, links are blue and underlined.<\/span> <\/p>\n\n\n\n<p class=\"has-dark-gray-color has-text-color\">While you can change the style of links to not be blue and underlined (via CSS), it&#8217;s best to leave <em>some<\/em> indicator that they are interactive, whether that&#8217;s changing the color and making links bold, using text-transform: uppercase, or even placing very important links in button.<\/p>\n\n\n\n<p>When deciding what to make your link preview text, explain where the link is going, rather than saying \u201cclick here,\u201d or something along those lines. The following example is a great resource for styling links\u2014and shows a way to make a link really stand out.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/css-tricks.com\/css-basics-styling-links-like-boss\/\">Learn more about STYLING links<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Uniform Resource Locator<\/h2>\n\n\n\n<p>When linking to an external website (you know, any website that isn\u2019t yoursite.com), you\u2019ll use the entire URL. For instance, this is the entire URL of the NMI&#8217;s website: <a href=\"https:\/\/nmi.cool\/\">https:\/\/nmi.cool\/<\/a>.<br><br>URL, commonly referred to as a web address, stands for <strong>Uniform Resource Locator<\/strong>. This is the address you type in the browser to access a webpage. <\/p>\n\n\n\n<p>The full web address, with all characters (including the <strong>http:\/\/<\/strong>) is referred to as an <strong>absolute URL. <\/strong>Keep reading to learn about the other types of URLs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"link-same\"><strong>Linking to web pages in the same website<\/strong><\/h2>\n\n\n\n<p><strong>Relative URLs<\/strong> on the other hand, are pages that live in the same site. When you\u2019re linking webpages on the same website, you don\u2019t need to use the full URL. Instead, you use the file path. Chances are, this will include folder names unless your files live at the same level.<\/p>\n\n\n\n<p>On your homepage at your root directory (index.html, the one not in any folders), link your webdev index:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"webdev\/index.html\"&gt;Web Development&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>These links consist of the same four elements, except, instead of typing in a URL, you type in the file path. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>An opening tag &#8211; <strong>a href<\/strong><\/li>\n\n\n\n<li>The <strong>file path<\/strong>, in quotes  <\/li>\n\n\n\n<li>The link preview text, between the tags. This is what the user sees on your page.<\/li>\n\n\n\n<li>A closing tag &#8211; <strong>&lt;\/a&gt;<\/strong><\/li>\n<\/ul>\n\n\n\n<p>When you&#8217;re done, upload your new and improved index.html to the server. <\/p>\n\n\n\n<p><code>Tip: For an in-depth look at absolute URLs vs relative URLs check out this <a rel=\"noreferrer noopener\" href=\"https:\/\/youtu.be\/Gs9bL4MI0x4\" data-type=\"URL\" data-id=\"https:\/\/youtu.be\/Gs9bL4MI0x4\" target=\"_blank\">handy YouTube tutorial<\/a>! It's also a good video to watch if you're still feeling a little uncertain about file paths!<\/code> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Linking an Email Address<\/strong><\/h2>\n\n\n\n<p>Type in <strong>mailto<\/strong> followed by the email address. This will open an email in  the user&#8217;s default mail application. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"mailto:yourname@uga.edu\"&gt;Email Me&lt;\/a&gt; <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Links in a New Browser Window\/Tab<\/strong><\/h2>\n\n\n\n<p>To link in a new window or tab (will vary depending on browser and the user\u2019s settings), you add the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>target=\"_blank\"<\/code><\/pre>\n\n\n\n<p>Here&#8217;s what it looks like in action:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"<a href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"https:\/\/www.w3schools.com\/&quot; (opens in a new tab)\">https:\/\/www.w3schools.com\/\"<\/a> target=\"_blank\"&gt;W3Schools&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Usually, if you\u2019re linking to another website in a new tab, it&#8217;s because you want the user to return to your website when they\u2019re done. Typically, a good rule of thumb is to make external links\u2014links to another site\u2014open in a new tab.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Link from one part of a webpage to another part of the same webpage <\/strong><\/h2>\n\n\n\n<p>It\u2019s pretty popular to see websites that are designed to look like one really, really long page. Instead of making the user scroll and scroll and scroll to find their desired content, these websites add navigation through links.<br><br>The only difference about this navigation is that instead of including links that open new webpages, these links jump the user down (or up) to a specific part of that <strong>same <\/strong>webpage. <br><br>For instance, maybe you\u2019re creating an online portfolio and you want users to immediately be able to find your contact information so they can offer you an exciting job in web development. <br><br>Before you can add such a link, you must create an identifier that names a particular section of your webpage.<\/p>\n\n\n\n<p>Create a new HTML file called <strong>links.html<\/strong>. Save it in your playground folder.<\/p>\n\n\n\n<p>Copy and paste the following dummy (placeholder) text: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"<\/code><\/pre>\n\n\n\n<p>Add a horizontal line <strong>&lt;hr \/&gt;<\/strong> and paste the dummy text again. Do this until you have three sections of dummy text and two lines separating them. Here\u2019s what it should look like when you preview:<\/p>\n\n\n\n<p>&#8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&#8221;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-dark-gray-color has-css-opacity has-dark-gray-background-color has-background is-style-wide\" \/>\n\n\n\n<p>&#8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&#8221;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-dark-gray-color has-css-opacity has-dark-gray-background-color has-background is-style-wide\" \/>\n\n\n\n<p>&#8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&#8221;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-white-color has-css-opacity has-white-background-color has-background is-style-wide\" \/>\n\n\n\n<p>Add an h2 element to each section. We\u2019ll name them About, Experience and Contact, for no particular reason. When you\u2019re done, your code should look like this: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &nbsp;&nbsp;&nbsp;&lt;h2&gt; About &lt;\/h2&gt;\n &nbsp;&nbsp;&nbsp;\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"\n &nbsp;&nbsp;&nbsp;&lt;hr \/&gt;\n &nbsp;&nbsp;&nbsp;&lt;h2&gt;Experience&lt;\/h2&gt;\n &nbsp;&nbsp;&nbsp;\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"\n &nbsp;&nbsp;&nbsp;&lt;hr \/&gt;\n &nbsp;&nbsp;&nbsp;&lt;h2&gt;Contact&lt;\/h2&gt;\n &nbsp;&nbsp;&nbsp;\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\" <\/code><\/pre>\n\n\n\n<p>Now let\u2019s add an <strong>id attribute<\/strong> to each h2 element\u2014meaning, go back and edit the h2 tags to look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2 id=\"about\"&gt; About &lt;\/h2&gt;\n\n&lt;h2 id=\"experience\"&gt;Experience &lt;\/h2&gt;\n\n&lt;h2 id=\"contact\"&gt; Contact &lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<p>When naming attributes, always start with a letter, not a number. <\/p>\n\n\n\n<p>To link to an element with an id attribute, you use the same &lt;a href&gt; attribute, but instead of typing in a relative or absolute URL, <strong>you type in a hashtag (#) followed by the ID attribute:<\/strong>&nbsp; <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"#about\"&gt;About&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Here\u2019s how we link to those attributes we just defined (&lt;br&gt; added to create line breaks). Go ahead and add this to the top of the body section:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"#about\"&gt;About&lt;\/a&gt;&lt;br&gt;\n&lt;a href=\"#experience\"&gt;Experience&lt;\/a&gt;&lt;br&gt;\n&lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Sometimes, you\u2019ll see this type of link used at the bottom of the page that says Top or Home to get users back to the top of a really long page. <\/p>\n\n\n\n<p>When you&#8217;re done, save the file and preview it in Chrome. Add it to your playground folder. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The concept of \u201cbrowsing\u201d or \u201csurfing\u201d the web comes from the act of moving quickly from one webpage to another. By the end of this lesson, you\u2019ll learn how to:&nbsp; Open your homepage (within your webdev folder), index.html, in Visual Studio Code. Linking From One Website to Another Here\u2019s an example of a link to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-665","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=665"}],"version-history":[{"count":4,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/665\/revisions"}],"predecessor-version":[{"id":6403,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/665\/revisions\/6403"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}