Build Your Own Business Website header image

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 7 – Creating Links in HTML

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Well, that discussion about HTML lists in WordPress brings us to the subject of links in WordPress. Links in HTML are also elements. Let’s come over to the visual editor and take a look at this.

A Way Users Navigate Pages

Links in HTML are the way in which the reader click jumps from one place to another. So for example, we’re here in our test page, we could come along and pick the About page and then we can click add link and then we can choose a page About The Barking Chihuahua Cafe. Note that it automatically gives us some of our attribute options so it includes this title and we can choose to open the link in a new tab. Let’s click on that, say add link and update this.

Links are Inline Elements

Links are inline elements. Note that when we put our link in here, it didn’t start a new paragraph right? It’s not like the blockquote that automatically wants to create a new line. This stays inside the line, it doesn’t have its own height or width. It fits inside of the paragraph and if we come over and take a look at it, here is our a tag. This is our link.

Attributes

So the opening tag is all the way to here, it’s title is About. Let’s just grab this whole thing and let’s put it in a text format here for a second. So, here’s your opening a tag. It’s first attribute is title, it’s second attribute is href, it’s third attribute is target then the content of that tag is the About page and then this is your closing link tag.

We call them a link but actually technically they are anchors so these are anchor tags that link off to other locations and they have a title. Well, it can take many different attributes. In this case, we’ve taken the title attribute which is going to show up when we hover over the link, we get the actual place where we’re going to go to which is our href and then an instruction to open up a new page with that link, that’s the third attribute.

So if we save this and refresh it, now we have our About page. If we hover over it, note there’s the title pops up and if we go to it, we go to a brand new page and it tooks us over to that specific location.

Links as Anchors

Links can also be used as anchors to a specific location on a page. So for example, you can take your link and link it to something else inside the same page. So let’s say that we want to take this link here and we want to jump down to the bottom of the page from that link.

What we could do here is come over to this h3 and say, id=”bottom”, this works both with id and with name. Then we come back up here to our a tag and then the href now, instead of being this address, now what we do is say #bottom, and update it. Then refresh it, click on that and it’s dropped us down to this right here.

You can also use this anchor tag to jump to a place on a different page. So for example, we could take this url, come over to our menu and edit that page. Let’s just take the mocha, add the link. Now we’re going to the page itself plus #bottom, add that link update.

Let’s view that page and it’s going to jump us right over to that spot. Come down here to mocha and click on it and there we are down here at the bottom, right? So that’s how links work, that’s the structure of links and anchors.

0 Comments… add one
0 comments… add one

Leave a Comment