Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course is designed to quickly lead you through the steps of building an HTML website, from creating a new page to building links and tables. Author James Williamson simplifies the coding process, with straightforward steps you can recreate on your own. The course explains the basic structure of an HTML document, shows how to add text and images, and introduces font styling with CSS. James also offers a bonus design challenge at the end of each chapter, where he asks you to think of a solution before offering his own.
I hope you had a great time working on our Creating Links lab. Let's take a quick look at the finished files so that we can compare your work to the finished version of the files. So here I have the three files, really, that we were editing the most: the links, reference, and syntax.htm. I've got those guys opened up as well as our lab_instructions so we can refer back to them. Well, remember, the first task that we were given was coming up with page navigation, so going to the list we have here and then linking to all of raw files. And yours should look similar to this. You'll notice that each one of the list items' text-- the text inside of it--is wrapped with the link tag.
Notice that the anchor tag is going inside the list item. Now, some of you may have wrapped it around the list item; in this case you want to place it inside the list item but around the text, so make sure the placement of that is correct. Pretty straightforward in terms of links because they're in the same folder, so you're not really having to point them anywhere other than just naming the files. So the href attribute should have been pretty easy. You're just naming the file that they're linking to. Now, for titles I went ahead and just put in the title of the page: Introduction to HTML, HTML syntax. You might have typed in something else, like "Learn more about HTML syntax" or you know "Click here for a reference." That's fine; you just want to be descriptive with that text.
You want that text to be short, concise, to the point, and describe what the contents of that page are going to be. So, as long as you feel like you did that, then don't worry if yours matches mine or not. Then it's also case-insensitive, so it doesn't really matter whether you capitalize them or not. I just thought I should point that out as well. Okay, so this second set of instructions was linking to external sites, and I am going to go to this links.htm page and scroll all the way down to the bottom because the footer is where we were working. So here, the text lynda.com, I've surrounded that with an anchor tag.
The href goes to lynda.com. Remember, since we're using an absolute link here, we want to make sure that the protocol was added as well, so that should be http://www.lynda.com. I have a title here and if you did something that said "Visit lynda.com" or "You can learn it at lynda.com" then you did way more marketing than I did. I just placed in the lynda.com title and that was it, but if you were more descriptive there, then you actually probably did a better job than me. And then finally, here I also use the target attribute of _blank to open that up in a new tab or a new window. So remember, that was one of instructions as well, so yours should say the same thing which is target="_blank".
If, by the way, you happen to do these attributes in a different order--like maybe the target first then title second and href last-- that's fine; it's still going to work. I always like approaching a link with the href first because it's kind of the most important attribute of the link itself, and it makes it to very easy to scan your links and tell where they're going. The second task here, in terms of linking to external sites, was to link to the lynda.com profile on Twitter. Now, you had a bit of a hint here because I had my Twitter profile already linked. So if you went out to twitter and searched for the lynda.com account, this is the URL that you would have found, https for the secure connection, twitter.com/lyndadotcom. And then I have a title here that says Follow lynda.com on Twitter.
You'll notice that I did not do an _blank target here. If you did, that's fine. There is nothing wrong with it. I just didn't mention it, so in that case it becomes more of a personal choice as to whether you will always do that or not. And back to our instructions, our last task was to link to internal sections within our pages. And I'm going to start at reference, because remember, we had this line right here that we wanted to link down to the named character entities table. Now as I mentioned in the previous lab instructions movie that this is a two-step process, and in order for this to work you have to remember to go down to the table and assign an ID at some point down here.
Now, I assigned the ID to the header itself. The h3, I gave it an ID of named. If you use something other than named, that's fine. A little aside here about IDs: you want them to have some type of semantic meaning, so named to your references, the common name character entities. If you named it something like "link" or "jump" or something of that nature, something that's, it doesn't really mean anything, that's fine; it'll still work, but from a readability standpoint, it becomes difficult to figure out what it is that you're referring to. So you might want to make sure that when you create an ID that it has some type of semantic meaning to it.
So I placed the ID on the header. If you put it on the table, that's fine; it's just going to affect exactly sort of where and how far down the page jumps. And then back up in this lead paragraph here, you can see that I took the text named character entities. I wrapped it in a link tag, and I just linked to the hash named, or octothorpe named if you will, href attribute. So, pretty simple, that's exactly what we're doing to jump down the page. If I check this out in the browser and I click on the reference page here, if I click on the named character entities, you'll notice it jumps right down to the table.
I also wanted you to be able to make the jump from the syntax page as well. If you remember, at the very bottom of page, we have a line of text here that says, "You can also find a useful list of character entities on the HTML reference page." Well, let's take a look and how we resolved that. If I go down into the code, you can see right here we have our link. So I'm linking to the reference.htm file, but notice that I'm appending to the end of that particular URL the same pound name reference that we made in the previous file. So if I go to the syntax page and I click on that, it's going to take me directly to the page and directly to that table, which is exactly what we wanted it to do.
Now, I'm guessing hat as you guys went through this lab you probably completed it faster or quicker than you thought you would, and I think the reason for that is that basic link syntax is actually pretty easy to master. So, once you start authoring your own pages, you should be able to confidently create hyperlinks pretty quickly in your HTML. Be sure to explore all the finished files closely to examine the other links on the page, and I really recommend practicing creating links in your own projects as soon as you can. There's really nothing more valuable than the experience that you gain from trying things on your own.
There are currently no FAQs about Up and Running with HTML.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.