New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Up and Running with HTML
Illustration by

Solution: Creating Links


From:

Up and Running with HTML

with James Williamson

Video: Solution: Creating Links

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.
Expand all | Collapse all
  1. 2m 12s
    1. Welcome
      55s
    2. Using the exercise files
      1m 17s
  2. 29m 30s
    1. Learning HTML
      2m 47s
    2. Choosing a code editor
      5m 2s
    3. Exploring basic HTML syntax
      8m 18s
    4. Do I need to learn HTML5?
      5m 6s
    5. Exploring HTML references
      8m 17s
  3. 35m 40s
    1. Exploring an HTML document
      5m 19s
    2. Working with doctype declarations
      4m 3s
    3. Examining the document head
      8m 20s
    4. Looking at the document body
      3m 21s
    5. Adding document structure
      8m 52s
    6. Lab: Coding a basic page
      3m 9s
    7. Solution: Coding a basic page
      2m 36s
  4. 1h 23m
    1. How does HTML format text?
      5m 51s
    2. Adding headings
      7m 24s
    3. Formatting paragraphs
      4m 54s
    4. Controlling line breaks
      3m 50s
    5. Creating lists
      10m 37s
    6. Emphasizing text
      6m 42s
    7. Displaying special characters
      5m 8s
    8. Controlling whitespace
      4m 35s
    9. Inserting images
      9m 20s
    10. Lab: Controlling page content
      13m 57s
    11. Solution: Controlling page content
      10m 55s
  5. 31m 54s
    1. Linking to pages within your site
      6m 45s
    2. Linking to external pages
      3m 2s
    3. Linking to downloadable resources
      2m 25s
    4. Linking to page regions
      8m 0s
    5. Lab: Creating Links
      5m 57s
    6. Solution: Creating Links
      5m 45s
  6. 40m 27s
    1. Examining basic table structure
      5m 10s
    2. Adding content to tables
      6m 20s
    3. Setting table attributes
      7m 42s
    4. Adding table captions
      4m 3s
    5. Defining table headers
      2m 13s
    6. Making table data accessible
      5m 46s
    7. Lab: Building tables
      4m 13s
    8. Solution: Building tables
      5m 0s
  7. 43m 23s
    1. Understanding the relationship between HTML and CSS
      4m 58s
    2. Creating inline styles
      4m 53s
    3. Exploring the style element
      5m 13s
    4. Basic font styling
      9m 24s
    5. Changing color
      4m 55s
    6. Taking styles further
      5m 24s
    7. Lab: Controlling basic styles
      5m 10s
    8. Solution: Controlling basic styles
      3m 26s
  8. 5m 44s
    1. Next steps
      2m 56s
    2. Additional resources
      2m 48s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Up and Running with HTML
4h 32m Beginner Oct 19, 2012

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.

Topics include:
  • Choosing a code editor
  • Coding a basic page
  • Adding headings
  • Formatting paragraphs
  • Creating lists
  • Inserting images
  • Linking to internal and external pages
  • Linking to downloadable content
  • Building tables with headers and captions
  • Creating inline CSS styles
  • Changing the color and font of your text
Subjects:
Web Web Design Web Development
Software:
HTML
Author:
James Williamson

Solution: Creating Links

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with HTML.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.