Video: Creating image links

Remember that an image is an inline element and that means that it flows as part of the text and that also means that we get to use images for links. You'll see this a lot, you see an image in a web page and you click on that image and it takes you some place else and everybody is happy. They can use their images as links as it should be. And so, here's an example of how that's done. This is an XHTML file and here's a paragraph, and in that paragraph we have "This paragraph has an image that is also a link." And in fact, you see it down here in the browser.

Creating image links

Remember that an image is an inline element and that means that it flows as partof the text and that also means that we get to use images for links.You'll see this a lot, you see an image in a web page and you click on thatimage and it takes you some place else and everybody is happy.They can use their images as links as it should be.And so, here's an example of how that's done.This is an XHTML file and here's a paragraph, and in that paragraph we have"This paragraph has an image that is also a link."And in fact, you see it down here in the browser.

This paragraph has an image that is also a link.And there is the image and you can see it's got this pretty blue box around it,which ought to tell you that that's a link.You see the browser changes when I move it over that and when I click on it,it will take us to lynda.com because here's the anchor tag,a href=http://www.lynda.com/.So, I click on that and there is the lynda. com web page and I'll press the Back button.It will take us back here.We'll see that the pretty blue box is now purple because that's our visited link color.

And so that's how an image works as link.Well, there are couple things about this that I would like to change.One is the pretty blue box.I'm not actually very fond of it.So, I'd like to get rid of that.How you do that is with the border attribute in the XHTML.So, in the image tag, I'm going to type an attribute here, border=0 and thatgets rid of the box.Go ahead and save it and reload in the browser and the box is gone.That's actually much more attractive, I like that a lot better and so you seewhen I hover my mouse over it, it's obvious that it's a link and I click onit and it takes me to lynda.com and I click the Back button and I'm back hereand everything is good.

Except, you'll notice a little dotted line around it and frankly, there is not away to get rid of that in the Firefox browser.But you'll notice that it extends beyond the image.The image actually ends about there and the dotted line is actually beyond itand enclosing the space after the image.In fact, if I click outside of the image, we'll get rid of the dotted box butyou see that my cursor actually starts changing during that space.That space after the image is part of a link and that's not really what I want.On the other side, it doesn't do that.

So this is just a quirk of the Firefox browser.Actually all the browsers have some kind of a quirk in this same area and I canget rid of all of those quirks with the same technique.The reason that space is part of the link is I actually told it that I wantedthat space to be part of the link because after my image tag I've a new line anda couple of spaces here and then the end of the anchor tag.You see and we remember that the browser will take all of that white spaceincluding the new line and the spaces and folded into one space which is exactlywhat it's done here, so it looks all nice and spaced out in the sentence.

But that's part of the link because I've included that in the A container.So the way to get rid of it is to take the space out of the container to abutthe image tag right up against the A tag.So I'll do that at the beginning, because even though isn't creating that aspart of the link, in other browsers do and then over here at the end, I'll goahead and I'll close up that space as well.And so now our image tag is right up against the anchor tag.

So the end of the begin tag, the anchor tag, there is no space between that atthe beginning of the image tag and then at the end of the image tag here, thereis no space between that and the end tag for the anchor element.So, when I save this and reload in the browser you'll see that you nolonger have this problem.The space is not part of the link anymore and if I click on the link, you'll seethat dotted box is now tight around the image and it's not enclosing the spaceafter it anymore or the space before it.

Now the only problem with this is that this makes it necessarily longer and you know how I am.I like for things to look good in my editor as well as on the page.So I'm going to show you how this can be pretty in the editor and on the page.You notice if I break the line here, and I'll indent it a little bit, that spaceis inside of the anchor begin tag.So that does not actually get rendered by the browser.That's part of the rules.Browser is not allowed to render anything inside of those angle brackets.And so I can do the same thing over here and I'll actually indent that likethat and so the end of the A tag is over here right up against the image andthe end of the image tag is over here right up against the end tag for the A.

And so those spaces and those new lines while they are up on the screen in theeditor and they help to make that pretty, they are not going to be rendered by the browser.So I'll go ahead and I'll save this and I'll reload over here and we'll see thatour problem is still not a problem anymore.Those spaces are still not part of the link anymore.I can click on this and that full square is tight around the image.So in summary, this is how you create links out of images and this is how youmake them work well in the editor and also on the page.

Find answers to the most frequently asked questions about XHTML and HTML Essential Training .

Here are the FAQs that matched your search "" :

Expand all | Collapse all

please wait ...

Q: In this title, the instructor uses tables to create a website design. Is there a way to create this same layout with CSS?

A: This course will be updated to include CSS-based layout techniques within
the next few months. In the meantime, please see Bill's <a href="
http://www.lynda.com/home/DisplayCourse.aspx?lpk2=52341">CSS for
Developers</a> title for more information on coding with CSS.

Q: In the "Understanding the structure of an XHTML document" movie in Chapter 1, where does the "Roses are red," etc, text come from? I don't see it in the code.

A: Notice the <frame src="??"> tags. These reference other .html files that contain the content of the various frames. Details about how frames work can be found in Chapter 6 of the course.

Q: In this title, the instructor uses tables to create a website design. Is there a way to create this same layout with CSS?

A: This course will be updated to include CSS-based layout techniques later in 2012. In the meantime, please see Bill's CSS for Developers title for more information on coding with CSS.

Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.

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.

Already a member ?

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

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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:

new course releases

newsletter

general communications

special notices

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:

new course releases

newsletter

general communications

special notices

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