Lesson 6: The "H" in HTML

We learned in Lesson 3 that HTML stands for "Hypertext Markup Language." And we also got our toes wet on the topic of "marking up" our content. But what's this "hypertext" part about? If you thought "links," you'd be exactly right! Hypertext (or links) is what makes HTML amazing - it allows us to connect ideas electronically withthe click of a mouse.

Let's Get Started!

Your First Link

Like almost everything else in HTML, links require both an open and a close tag. The tags are <a> and </a>. But UNLIKE the tags we've been working with so far, we also need to tell the link where to point. The piece that tells your browser where to go when you click the link is called the hypertext reference or "href" for short. This is formatted with an equal sign (=) and a uniform resource locator (URL) in quotes.

If we build a really simple link that goes to Google, the code would look like this:

  
	<a href="http://www.google.com">Click Here</a>
  

If we look at that in the browser, here is what we'll see:

Click Here

The Google link is an exampe of what's called a fully-qualified URL. That means it includes everything your browser needs to look up the website from scratch. This includes:

• HTTP:// or HTTPS://: HTTP stands for "hypertext transfer protocol" and it tells your browser whether it's headed to a standard (HTTP) or a secure (HTTPS) connection.
• WWW: Once upon a time, the "www" was included on all URLs, but now-a-days you can purcahse domains that don't need that info. When in doubt, leave it in
• The address (for example, "google.com")
• Additional page address information, qualifiers, search strings or other data (more on this in a bit

Less Qualified?

The previous section gave an example with a fully qualified URL. This is helpful if you need to tell the browser to go someplace comepletely different. For example, if you wanted to tell a friend how to get to your favorite restaurant, you'd probably start by telling them what city it's in.

But what if you're already INSIDE your favorite restaurant and you just need to tell your friend how to get to the bathroom? You wouldn't start with the city -- and HTML is the same. In a link within your own site, you don't need to add information like the "www" or the address. Depending on how you have your files organized, you may only need to identify the page that you want to go to.

For example, this site has a flat file structure. That means that all the lessons are in the same directory. So if I want to go from this lesson to, say, Lesson 1, I only need to identify the page in my address. The code looks like this:

  
	<a href="lesson1.html">Click here for Lesson 1</a>
  

Here's how it looks from your end:

Click here for Lesson 1

I mentioned above that I'm usign a falt directory structure, but what if I'm using folders to grou like content? If we go back to the restaurant analogy, imagine that the restroom is on the second floor by your table is on the first floor. You'd probably say something like "go up the stairs and turn left." HTML does something really similar, but it uses the forward slash (/) to tell your browser that it needs to look in a different level.

Let's take a look. In this example, I have a directory (called "lesson6") with a file in it called "didyoufindme.html"

  
	<a href="/lesson6/didyoufindme.html">Click here</a>
  

Here's how it looks:

Click here

Hitting The Target

There is lots more to learn on URLs but it's more advanced stuff we'll tackle later. For now, there is jsut one more thing to look at -- your target. The target tells your browser whether it should open the link in the same tab or in a new one. As a rule of thumb, it's best to open your link in the same tab if you're staying on the same site. If you're moving to a new site, open a new tab.

To say in the same tab, you don't need to do anything at all. But to open a new tab, you'll have to set your target. To do this, you'll need to add the string target="_blank" to your opening tag. Let's see hot it looks:

  
	<a href="http://www.google.com" Target="_blank">Click Here</a>
  

And here's how that looks on the browser side:

Click Here

Lesson 6: Prove it

Are you ready to experiment with some links? Let's do it! To complete this assignment:

• Create a new HTML document and name it MyLesson6.html
• Create a link to another website of your choice that opens in a new window.
• Create a link to one of your lesson assignments (for example MYLesson5.html) that opens in the same window.

Now for the tricky part! Your files are all in a subdirectory under your name. Can you create a link that goes up one directory to link to one of MY lessons?

When you are done, save the file as MyLesson6.html and upload it to the folder with your name. You can check your work here. If you want to see an example of how this file might look, you can check mine out here.

Back to the lesson plan.