Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I will be describing the process used to add links to the content of an HTML document.
To get started, we first need to gather together the content we are going to mark up in this tutorial.
To do so, go back to the HTML tutorial home page, find the link labeled "click this link to access the text used in the following tutorials."
Scroll down to where it says creating links, copy that bit of content, and then head over to your HTML editor.
Once you've copied the content we are going to be using in this tutorial, the next step is adding that content to our HTML document.
So, find the open and closed body tag, give yourself a little space, and then paste the content into that space you just created.
Next, go ahead and change the title of the document to seventh HTML document and then save your file.
Here, I'm going to call this one seven and, as usual, I'm going to save it to my desktop for easy reference.
Next we're going to go ahead and add some block level elements to our content.
First, we're going to create a heading by adding an open and close h1 tag around where it says creating links.
Next, we're then going to add an open and closed paragraph tag around this content here and then we're going to go ahead and save our work.
We're going to head over to our Internet browser, we're going to open our document, and, as you can see, we have a heading and we have a paragraph.
The next step, then, is to go in and create some links.
So what we're going to do, is we're going to create a link here where it says W3Schools and we're going to create a link here where it says Worldwide Web Consortium.
The URLs that we're going to add to these links are already loaded in our content so all we got to do is start formatting your links.
So let's go back to our HTML editor.
Adding links to the content of an HTML document is actually a pretty easy process, you simply need to know where to add the tags, what content you want to display, and then you need to know the URL.
So, the first thing we're going to do, is we're going to find where it says W3Schools.
This is the first link we're going to create.
To do so, we start with what is known as the a tag and then at the end of W3Schools we're going to close our a tag.
It's important to understand here that what is included between the open and closed a tag is what's actually going to display on the web page when it's loaded.
So, if we save this, go back to our browser, and refresh our page, you can see that nothing's happened yet because we haven't actually told the Internet browser where the link needs to point to.
To do that, we'll go back to our HTML editor, inside the open part of our a tag we're gonna add some attributes.
The first thing we're going add is the href attribute or the hyperlink reference.
We're going to add a = and then we're going to add our double quotes.
Next, we're going to find the URL for the link we're creating and we're going to include it inside the quotation marks.
So now if we save our work, go back to our browser, as you can see, we now have a link.
It's formatted like a basic link. It's underlined and it's blue to represent that it's a link we haven't gone to yet.
Now, if we clicked on it, and explored it, it would, of course, change color to let us know that it has been clicked before.
So, let's take a look and see what happens.
As you can see, if we click it, we go to the w3schools.com homepage.
Now, if we go back, you'll see that our link has changed color.
It's gone to that purple color to let us know it's a link we've already explored.
OK, so let's go back to our HTML editor, let's build our second link.
So, find where it says World Wide Web Consortiums and go ahead and add a start and end a tag around that bit of content.
Here, again, we're going to add the attribute href=" " inside this link's start tag.
We're then going to find the URL and we're going to paste it between the quotation marks.
Now, if we save our work, go to our web browser, you'll see that we now have two links inside of our content.
The last thing that I want to do to my links is I want to change how this last one here, this one that links to the world Wide web consortium homepage, opens up.
Instead of opening up in the same window, like the W3Schools link did earlier, what I want this to do is I want it to actually open up in a new tab automatically.
To do so, what I'm gonna do is I'm gonna go back to the HTML editor and after the href attribute in the start tag for the World Wide Web consortiums link, I'm gonna add a space.
And I'm gonna type in target equals and then I'm going to add two quotation marks.
Here what I'm going to do is I'm going to add an _ and then I'm going to type in the word blank, which basically tells the Internet browser to create a new tab when the user clicks the link.
So, let's save our work, let's go back to our web browser, let's refresh our page, and then let's see what happens.
As you can see, when they click that link, a new tab is automatically opened up for them, which is useful if you are directing people to content outside of your own web page.
Because where they came from is always accessible and they can always go back to it by simply clicking on its tab.
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.