Build Your Own Business Website header image

Introduction to HTML for WordPress & Genesis 2 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.

Now that we’ve talked about creating lists in HTML, the next thing we’re going to talk about is creating links in HTML. Obviously, links are fairly easy to create inside the visual editor. That plus no typos is another reason why I like using the visual editor.

Adding a Link to Another Page

So let’s create links and talk about what you can do with them. Let’s begin here on this Test HTML page. Select the text you want to be the link, click on the link and then I’m going to link to existing content and we’ll link to the About page. So click on that. We’ll open up the window in a new tab, add the link and now the link is there.

Link Syntax

Let’s update this and take a look at it in the editor. Here’s our tag. Notice it has the opening a; a is the link or anchor tag that’s what we’re talking about. The first attribute is title, “Work with an Architect who Listens to You”. The second attribute is href and that is the address of the page that we want to go to and the third attribute is target and that’s saying that you want it to open up in a new page. Target=”_blank” is the attribute that makes it open up in a new page.

Let’s come over here and refresh our page and you can see now we’ve got our link, right? The link is an inline element. It didn’t create a new line and if we click on it, it takes us over to this page. That’s what it’s supposed to do and it opens it up in a new page because of what we told it to do.

Linking to a Location on the Page

Now, that’s taking us to a new page. We could also choose to use a link to link to another location in a page. For example, we could come down here and say I want to link it down to this list item. If I want to link to that, all I have to do is give it an id. So, id=”atlantic-cod”.

I’m trying to come up with user names here that are meaningless because I want you to understand that the word here isn’t significant as long as you know what the word is. So id=”atlantic-cod” and then we could come up to this link and instead of this href= we could replace this with # and then that id, “atlantic-cod”.

So href=”#atlantic-cod” and now that is a link specifically to that location on a page. Let’s refresh this and now this anchor drops this down to the bottom of the page. Target=”_blank” is still there which opens it up in a new page so we want to get rid of target=”_blank”. Update that and refresh this and then you can click on this link and it takes you down to that location on the page.

Linking to a Location on a Different Page

So those are two ways in which anchors are used. Anchors are used to take you to another page or to take you to a place on the same page. But they can also take you to a specific place on another page.

For example, we could take the URL of this page and we could come over here to this page and add a link. We’re going to come right here and you do it in the visual view. Let’s add the link and say we want to link to there and then we add the “#atlantic-cod”. Add that, update it, view the page and then when we click on this, it takes us to that place on that page.

Style the Links

We’re going to talk about styling links a little bit later but what should be obvious to you is that links have a couple of different states. They have their regular state just like this and they have a hover state where your mouse is hovering over them. We’ll talk about styling the hover state tomorrow.

Now that we’ve talked about links in HTML, it’s time for us to talk about images in HTML because at that point we’ll start talking about image links.

0 Comments… add one
0 comments… add one

Leave a Comment