Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

Links and Linking Absolute Beginners Course in Web Development Edit
Last Update:2024-10-16 11:59:29
The Change:2024-10-16 10:33:26


Linking is one of the most important assets to web development. This is a tutorial coming from an absolute beginners point of view. There are 2 major kinds of links. There are inbound links and outbound links. Lets illustrate both examples.

Inbound Links

An inbound link is a link that is linked within your website. You will "link" the pages together using an "anchor" element. On this web-page you will see a lot of inbound links in the menu above. As long as the links start with https://a1websitepro.com you know it is an inbound link because it resides on this server. There are 2 different ways to write inbound links.

Inbound Link Method #1

In this method we are going to use the complete URL {Universal resource Locator}. This is a fancy way of saying web address. 
<a href="http://yourwebsite.com/page.html">Page Anchor text</a>
 

Inbound Link Method #2

Since we are working within our domain we do not have to put the first part of the URL in. We can use a "relative" link address. Here is an example. 
<a href="page.html">Page Anchor text</a>
 

Outbound Linking

Outbound linking requires you to put the full URL in the link. Like method #1 above you must include the domain name. here is an example of our Facebook page outbound link. 
<a href="https://www.facebook.com/pages/A1WebsitePro/139087542802830">Outbound Link Anchor text</a>
 

Jump Anchor Links

You may want to use jump anchor links. This will put a link on you page that will jump to a certain section of the page. The first thing you want to do is set and id in a tag. 
<p id="foo">This is a paragraph tag with the id of foo</p>
Now create the link at the top of the page. 
<a href="#foo">Jump To Foo</a>
You can jump down on a page or even jump up on a page.

target=""

If you wanted your link to open in a new tab on the users browser use the target="_new" attribute in the link. 
<a href="https://facebook.com" target="_new">Outbound Anchor Text</a>

rel="nofollow"

If you do not want search engine spiders to follow your links use rel="nofollow". Webmasters use this method when linking to sites that they do not want to pass page rank to. 
<a href="https://facebook.com" rel="nofollow" target="_new">Outbound Anchor Text with nofollow</a>

Codes for Today's Lesson

Here are the codes for both pages that we used in today lesson.

index.html file

<html>
<head>
<title>All About Links</title>
</head>
<body>
<a href="inbound.html" target="_blank" rel="nofollow" title="Learn Linking">Inbound Link</a>
<a href="https://a1websitepro.com/links-and-linking-absolute-beginners-course-in-web-development/">Click Here</a>
<a href="#foo">Link To Foo</a>

<h2 id="boo">Heading 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>Heading 2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>Heading 3</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>Heading 4</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>Heading 5</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>Heading 6</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>Heading 7</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>Heading 8</h2><a href="#boo">Top</a>
<p id="foo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>

inbound.html

<html>
<head>
<title>Inbound Link Example Page</title>
</head>
<body>
<h1>Inbound Link Example Page</h1>
</body>
</html>
  Next Lesson