Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
stevencooper
5,755 PointsI'm having trouble with 2 hypertext links on my 'About' page.
I am trying to insert a link within a paragraph, using the syntax of <p>text<a>hyperlink</a>linked text</p> and only the linked text is clickable.
however, the second time i try to do this, in another paragraph just below the first, exact same syntax, but the whole paragraph is a hyperlink.
here is the exact coding I'm having trouble with: In the Section element I have these almost identical lines of code:
```<p>If you would like to follow me on Facebook, my username is <a href="https://facebook.com/steven.m.cooper.79"</a>Steven.M.Cooper.79</p>
<p>If you would like to follow me on Twitter, my username is <a href="https://twitter.com/SMCooper1956"</a>@SMCooper1956</p>```
Both lines of code are basically identical, however, in this case as shown, the entire "if you would like to follow me on twitter, my username is Steve Cooper" registers as a hyperlink, not just my name doing so.
I tried switching the order of the 2, with twitter above facebook, and the entire line for for facebook became a hyperlink. So whatever I'm missing is affecting the 2d of the 2 lines of code, while the first line of code is as it should be.
Anyone with an idea? Here is all of the code, it's only 47 lines with blank lines.
Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Steven Cooper | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href=“index.html" id="logo">
<h1>Steven Cooper</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/Steve-2.jpg" alt="Photo of Steven Cooper" class="profile-photo">
<h3>About</h3>
<p>Hi, I'm Steve Cooper. This is my design portfolio where I'm sharing photos of my Sheltie 'family'. I enjoy reading, Shelties, sci-fi, computer games, walking for fitness, political activism, and more.</p>
<p>If you would like to follow me on Facebook, my username is <a href="https://facebook.com/steven.m.cooper.79"</a>Steven.M.Cooper.79</p>
<p>If you would like to follow me on Twitter, my username is <a href="https://twitter.com/SMCooper1956"</a>@SMCooper1956</p>
</section>
<footer>
<a href="https://facebook.com/steven.m.cooper.79"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<a href="https://twitter.com/SMCooper1956"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<p>© 2014 Steven M. Cooper.</p>
</footer>
</div>
</body>
</html>
13 Answers
Navid Mirzaie Milani
6,274 Pointsstevencooper you open a link with <a> and you close it with </a> but you have:
<p><a href="https://facebook.com/steven.m.cooper.79"</a>Steven.M.Cooper.79</p>
you shuould have the following syntax
<p><a href="https://facebook.com/steven.m.cooper.79">Steven.M.Cooper.79</a></p>
I hope i answer your question :)
Chris Chambers
5,634 PointsHi Steven!
Try using this syntax instead:
<p>text<a href="hyperlink">linked text</a></p>
You're currently not giving the hyperlink anything to be attached to in the first paragraph which is why it is extending to the next </a>
stevencooper
5,755 PointsAh, but you are incorrect. As you have shown the syntax, when I tried it, the text was there but my username was missing. As soon as I put the closing anchor bracket back at the end of the hyperlink, my name came back.
No one has been able to explain why 2 lines of code that are basically identical, are acting differently. The Top line of code, whether it is to Facebook or Twitter, works correctly, while the second line of code, going to the 2d location, has all the paragraph marked as hyperlink, not just my username for that site.
Chris Chambers
5,634 PointsHi Steven,
The problem is actually in the first paragraph. If you hover over the link in the second paragraph, you'll notice that it is actually pointing to the facebook link from the first. The twitter hyperlink does not start until you open the new <a> tag for your twitter handle.
You are missing the closing bracket on your opening <a> tag, so it isn't closing it until the end of your closing tag </a>. (Look at the color formatting in your code snippet above)
Try it like this:
<p>If you would like to follow me on Facebook, my username is <a href="https://facebook.com/steven.m.cooper.79">Steven.M.Cooper.79</a></p>
<p>If you would like to follow me on Twitter, my username is <a href="https://twitter.com/SMCooper1956">@SMCooper1956</a></p>
Syntax should be:
<a href="http://www.whateverhost.com">Whatever you click to follow the link</a>
If you are leading in with a paragraph, it would look like:
<p>This is my text leading up the dramatic conclusion where I <a href="http://www.whateverhost.com">provide the hyperlink</a>.</p>
Hope that helps!
stevencooper
5,755 PointsSorry, folks, but nothing suggested has worked. with the syntax as shown above, <p>This is my text leading up the dramatic conclusion where I <a href="http://www.whateverhost.com">provide the hyperlink</a>.</p>
Like this, above, my name (or hyperlinked text) isn't shown. when I put the closing anchor brackets in place before my name, my name shows up as a link to twitter, but the paragraph text is linked to my facebook account.
No one has yet come up with the answer that helps. I have researched the syntax and the proper form is the way that it shows. IE, <p>Paragraph text <a href="link url"</a>Linked text</p>
the above syntax works for the first paragraph & link, to Facebook. there IS a closing bracket </a> in the facebook line, so it should not be making the paragraph text in the Twitter link to be hyperlinked to Facebook.
this line of code works the way it's supposed to:
<p>If you would like to follow me on Facebook, my username is <a href="https://facebook.com/steven.m.cooper.79"</a>Steven.M.Cooper.79</p>
the syntax here being <p>Paragraph Text <a href="hyperlink</a>Linked Text</p>
As you can see, there is a closing anchor bracket just before my name.
The following line of text, the second paragraph leading to twitter, syntax is identical yet does not work correctly. This line of code:
<p>If you would like to follow me on Twitter, my username is <a href="https://twitter.com/SMCooper1956"</a>SMCooper1956<p>
In the second line, the paragraph, "If you would like to follow me on Twitter, my username is... links back up to the Facebook, while the hyperlinked text, SMCooper1956, leads to twitter as it should.
I know the proper syntax, that is why I am having such a difficult time figuring out what is wrong.
Please don't tell me to put the closing anchor bracket after my username, all that does is make the username disappear, the text of the paragraph still links to the Facebook link.
Chris Chambers
5,634 PointsSteve:
<p><a> = opening tag </p>
<p></a> = closing tag </p>
<p>< = opening bracket </p>
<p>> = closing bracket </p>
<p>If you would like to follow me on Facebook, my username is <a href="https://facebook.com/steven.m.cooper.79"</a>Steven.M.Cooper.79</p> is missing a closing <b>bracket</b> on the opening <b>tag</b>.
<p>If you would like to follow me on Facebook, my username is <a href="https://facebook.com/steven.m.cooper.79">Steven.M.Cooper.79</a></p> is not.
The line of code you keep quoting is <b>not</b> working correctly as the link is extending past your Facebook user name.
The text (or image) you want to attach the link to goes between the opening and closing tag. <a href="url"> RIGHT HERE </a>
If write it as <a href="url" RIGHT HERE></a>, it does not work as intended.
Did you copy and paste the adjusted code I wrote into your code to test? Please try it.
<p>If you would like to follow me on Facebook, my username is <a href="https://facebook.com/steven.m.cooper.79">Steven.M.Cooper.79</a></p>
<p>If you would like to follow me on Twitter, my username is <a href="https://twitter.com/SMCooper1956">@SMCooper1956</a></p>
stevencooper
5,755 PointsThanks, Chris, for your continued efforts to help.
The first line of code is written and works correctly, whether it links to Facebook or Twitter. The second, identical except for destination, does not work.
There IS a closing anchor bracket ```<p><a href="destination URL"</a>username<p> and it is supposed to be IN FRONT OF my username. That is how the first line of code is written, regardless of which destination is first, Facebook or Twitter.
The second line of code, identical to the first except for the destination url & username, written in the same syntax, does not work correctly. The second line of code, whichever it is, Facebook or twitter, has the text "if you would like to follow me on ______, my username is" as a hyperlink to the first line of code's destination, while my username in the second line of code takes me to the proper destination.
Chris Chambers
5,634 PointsLast try here. If this doesn't clarify things, I sincerely hope you find someone able to explain it more clearly. I'm starting to suspect I'm being trolled, but here goes.
The tag for opening a hyperlink is:
<a href="www.hostname.com/path/page.html">
It is not:
<a href="www.hostname.com/path/page.html"
The fact that no matter what you do, the first link bleeds into the second paragraph should tell you that the first link is not working correctly. Both links are coded incorrectly.
Let's look at a different example from your code:
<a href="https://facebook.com/steven.m.cooper.79"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
Notice the format for the hyperlink here. A closing bracket > follows immediately after the url. The content the link is attached to (the image) does not go inside the <a> tag, it goes between the <a> and the </a>.
You could replace the image <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> with whatever text you want to become the hyperlink.
stevencooper
5,755 PointsChris and everyone else, NO, i am NOT trolling or trying to be deliberately obtuse. I am having these problems, and so far none of the suggested solutions has worked.
I removed one line of the code, the one that directed people to my Twitter account. That left the line of code directing people to my Facebook account. The line of code going to Facebook works, as long as it's the first line of the two. I copied & pasted my facebook link above the remaining line of code, and this is what happened... the NEW first line of code, worked. The second line of IDENTICAL code didn't. the paragraph text was still hyperlinked.
I replaced one of the 2 identical lines of code with the twitter code on top, and the Facebook paragraph text became hyperlinked to my twitter account, while my username went to the proper destination, that being Facebook.
I have checked and there are no open brackets that doesn't have a closing bracket.
Please, if there is an instructor looking at these, I need you to help me out. The best advice of students isn't clearing up the problem, and they are (rightfully) becoming upset, but being upset at me doesn't solve my problem with code.
I thank everyone who has tried to help. I have tried all of your suggestions, yet none of them have worked.
PS. Edited & added later... I just kept messing around with the two lines of code, kept experimenting, and finally got it to work correctly. I believe it was a combination of Chris' & Navids' help that got me in the right direction...I don't know who to give "best answer" to, 'cause you both tried and eventually helped me get my code together. You both have my thnaks.
Chris Chambers
5,634 PointsI'm glad you figured it out Steven. Cheers!
Navid Mirzaie Milani
6,274 PointsI seriously don't understand how you managed to do this but when i just copy and paste your code it works fine.
http://codepen.io/anon/pen/hsdaD
is this what you want as your result?
stevencooper
5,755 PointsThat amazes me, because I still cannot get it to work correctly! No matter which line is first works right. the second line, whichever it is, doesn't. The syntax for both lines of code is correct. both lines of code work correctly if they are the first of the 2 lines. the second line of code works incorrectly, whichever the destination is.
Navid Mirzaie Milani
6,274 PointsI'm kinda getting pissed because we giving you the right solution but you still insist to doing it differently. What you're doing and i'm now gonna say it for the last time otherwise im done with this topic. The reason why your name disappears is not because you're closing your </a> after your name its because you don't put your name between the <a> tags.
<p>THIS IS THE WAY YOU SHOULD MAKE A LINK <a href="https://twitter.com/SMCooper1956">HERE YOUR NAME</a>
you're doing the following and that doesn't work:
<p>YOU SHOULDN'T DO IT LIKE THIS <a href="https://twitter.com/SMCooper1956</a>YOUR NAME GONNA DISSAPEAR</a></p>
stevencooper
5,755 PointsI'm sorry if you are getting upset, i'm not trying to do so. If you look at what i'm saying, writing my name BEFORE the closing anchor bracket makes my name disappear. <p>Paragraph text here ><a>URL LINK>username</a></p> makes my name DISAPPEAR.
the first line of code, <p>Paragraph text><a>hyperlink destination</a>username</p> works. That is the correct syntax, I've researched it by googling. The second line of code doesn't. It does not matter which destination is first, Facebook or Twitter, the text for the second line links to the first destination, while the username takes me to my correct page, either Facebook or Twitter, whichever is second line.
I've sent in a request for help to Treehouse, maybe they can help me figure it out.
Navid Mirzaie Milani
6,274 PointsOke stevencooper can you copy and paste the following code in this link:
http://codepen.io/anon/pen/lmegu
Like you can see both paragraphs now acting like they should and like they you want (i think).
Navid Mirzaie Milani
6,274 PointsChris Chambers hahah i thought the same, im pretty sure that we both do it the right way. Either way i never been in to hyperlinks so much as i was now :p
Navid Mirzaie Milani
6,274 PointsPlease Someone @Teamtreehouse help stevencooper because i'm seriously done, goodluck mate!
stevencooper
5,755 PointsWhen I put the hyperlink closing bracket AFTER my name, my name disappears. Now I can't get it back.
I don't understand why the 2d paragraph text (to twitter) is a hyperlink to my facebook account, with the actual linked text taking me to twitter. the anchor element in the first paragraph (to facebook) is closed where it is supposed to be, before the linked text.
Each of the two lines are identical to each other except for the link URL & Linked text. the syntax is identical
<p> paragraph text<a href="URL"</a>Linked text</p>
stevencooper
5,755 PointsAs I have stated several times, placing the closing anchor bracket AFTER my name causes my name to disappear. I know the proper syntax, the code is not behaving the way it should. if you look, the Facebook paragraph and anchor links are with the closing anchor bracket BEFORE my username and the paragraph closing bracket comes immediately after my name. this line of code works correctly. AGAIN, the first line of code, with my facebook contact, works fine, the way it is supposed to.
The second paragraph is IDENTICAL to the facebook paragraph yet the paragraph text is a link to my facebook account, and only my username for twitter is the proper link.
The question is: Why do the 2 lines of code act differently??
stevencooper
5,755 PointsThanks for trying to help, Chris, but when i use the line of code you tell me to use, my username disappears. I have researched the code, and I have both lines of code correctly written. What's driving me nuts is why the paragraph text for the second paragraph links to facebook. IF you look at my code, there IS a closing anchor bracket before my username for my facebook contact. The Facebook paragraph works correctly. The second, identical except for it linking my twitter account is the one giving me problems.
Actually, it is the 2nd line of code; the line coming first works regardless to where it directs the link, the second line, regardless where it links to, works incorrectly.
stevencooper
5,755 PointsNo, I am not trolling, i am totally confused. When I do things the way you folks have been telling me to do it, the actual paragraph containing the link does not have my name ... with the closing anchor bracket to the right of my name.
I am NOT having trouble the code which puts the logos in place at the bottom of the page. That works.
It also confuses me that all my research show the proper syntax to be <p>Paragraph text<a href="link"</a>username</p>. when i put the closing bracket AFTER my username, my username does not show up.
I just tried removing the twitter line of code, and replaced it with the facebook code by copying, cutting, then pasting, so i have 2 lines of IDENTICAL code. The first line of code works, the second does not. It isn't my coding, i am sure of that.
here are the 2 IDENTICAL lines of code:
<p>If you would like to follow me on Facebook, my username is <a href="https://twitter.com/smcooper1956"</a>SMCooper1956</p>
<p>If you would like to follow me on Facebook, my username is <a href="https://twitter.com/smcooper1956"</a>SMCooper1956</p>
The first line of text is working properly. In the SECOND line of code, the paragraph text, "if you would like to follow me on Facebook, my username is" hyperlinks to the first line of code.
when i had the twitter & facebook codes, i tried switching their order, first Facebook as the first line, then Twitter on the second line. When i reversed the order of the lines of code, the identified text linked to the preceding line of code.
It does not matter, then, in which order the 2 lines of code are in, the second line of code doesn't work like the first line of code.
I apologize if I am not describing my problem correctly, I am trying. I am also trying to understand the answers you kind folks have been putting down here. Nothing I have tried has worked.
I asked for an instructor to help out and haven't had an answer other than to post in the forums. I am having other problems with my workspace that don't make sense. closed paragraphs of just text, with a ```<p> text </p> are being marked in red, which is supposed to show problems. My workspace is cluttered with red, and I have gone line by line and I don't have any 'loner' opening brackets. I don't have the color preview window that Workspace is supposed to have, either.
So, again, NO, i am not trolling, or trying to be obtuse, I don't understand what is going on.
stevencooper
5,755 PointsChris and everyone else, NO, i am NOT trolling or trying to be deliberately obtuse. I am having these problems, and so far none of the suggested solutions has worked.
I removed one line of the code, the one that directed people to my Twitter account. That left the line of code directing people to my Facebook account. The line of code going to Facebook works, as long as it's the first line of the two. I copied & pasted my facebook link above the remaining line of code, and this is what happened... the NEW first line of code, worked. The second line of IDENTICAL code didn't. the paragraph text was still hyperlinked.
I replaced one of the 2 identical lines of code with the twitter code on top, and the Facebook paragraph text became hyperlinked to my twitter account, while my username went to the proper destination.
Navid Mirzaie Milani
6,274 Pointsaah amen you solved it! great mate! goodluck!
stevencooper
5,755 Pointsstevencooper
5,755 Pointswith the closing of the hyperlink </a> after my name as suggested, my name disappears entirely, yet the line leading up to where my name is, is still hyperlinked.
From my viewing of the videos, i believe that the correct syntax is:
<p><a href="link"</a>linked text</p>it works for the first link but not the second, identical link.
see again:
```<p>If you would like to follow me on Facebook, my username is <a href="https://facebook.com/steven.m.cooper.79"</a>Steven.M.Cooper.79</p>
<p>If you would like to follow me on Twitter, my username is <a href="https://twitter.com/SMCooper1956"</a>@SMCooper1956</p>```.both lines are identical except for the actual links going to different places. The text that is hyperlinked in the first line is my facebook username only, while the second hyperlink to twitter has the whole paragraph as a hyperlink.