If you’re a regular reader of Philofaxy, you can’t help but have noticed what a helpful and informative community of commenters visit the site. In the regular Tuesday and Friday ‘Free For All’ topics, dozens of questions are asked and answered every week. Often, the commenter will add a web address that gives further information or serves as an example. Here’s an example of one:
I made that comment before I knew better, so the web address is not a
hyperlink. That means you can’t just click it and be taken there. What
you have to do instead is copy and paste the link into your browser bar.
No biggie, but compare with this example:
Note this time that you are offered not a long web address, but simply some highlighted text. Click anywhere on the highlighted text (although not as it appears above: that’s just an image) and you’ll be taken to the address to which it’s linked.
Hyperlinks like this are easy to create and make it easier for readers of your comments to go and have a look at the page you’re recommending.
To insert a hyperlink into your comment, you just write a very simple piece of HTML code. Here is the format for a hyperlink:
<a href="http://yourlink.com"> your text </a>
When this is included with your comment, you’ll see a piece of highlighted text that simply says: your text and is clickable.
Let’s see an example. I want to add a link on FFAT to a great cartoon that I think is very fitting to the spirit of asking and answering questions. Here is the address: http://xkcd.com/1053/
Notice that I’ve included it here as a hyperlink so you can just click it and go there. Now I want to add it as a link in a comment on FFAT. What I want to say is this:
Here’s a cartoon I think is very relevant to this community.
I want the words ‘a cartoon’ to be clickable and to take readers to the relevant web address.
Here’s what I’ll need to post in the comment box:
Here’s <a href="http://xkcd.com/1053/">a cartoon</a> I think is very relevant to this community.
So here we go...
Hit the ‘publish’ button and here’s the result:
Thank you Ray, I forget that people don't necessarily understand HTML, it is a second language to me!
Thank you so much for this Ray! I always wondered how in the heck people did that!
ReplyDeleteSteve has been an excellent HTML guru to me, and I appreciate this bit of info from you too. I'm definitely in the camp of " HTML as a foreign language!"
(PS I love that cartoon! Yes very fitting to our supportive and fun community here on Philofaxy!)
Yes I think it is nearly 20 years (1993) since I created my first website, the following year I created http://www.pembury.org which consisted of 5 pages!
DeleteBack then a lot of the HTML'tags' didn't exist, you couldn't create tables in HTML, and I use them alot these days. And although I've moved on from creating pure HTML pages in an editor to using content management systems such as Blogger and Wordpress, I still have to get amongst the code to edit the HTML to make it look correct!
A skill that will never be lost.
Of late I've been self learning CSS code which is another form of mark up language... HTML has the grand title of Hyper Text Mark Up Language... CSS - Cascading Style Sheets
Beware the comment box doesn't support all HTML commands!
Oh! I am now one of your 1000 a day. Not for the html which I knew ( although it a pain to type on an ipad!) but for the diet coke and menthos which I had to google! But, I am 41, not 30, so what does that do to the calculation?!!
ReplyDeleteHelen.
Very helpful! Thankyou!
ReplyDeleteSynchronicity is a very weird thing!! I was just thinking yesterday how Steve and others manage to put items on the site which are just "clickable" to access, and was pondering how clever folks are to know these things. Now.... I know too!!! Thanks Ray. xx
ReplyDeletethis is great ... but i have one further sugestion/question - when you click on the highlighted text (the hyperlink) can you set it so that it opens in a new window? For example I am reading Philofaxy and RAy suggests I look at a cartoon ... i click the link and it now opens in place of Philofaxy when I was'nt finished reading the post. I hope my question is clear.
ReplyDeleteYes, it is. All you need to do is add target="_Blank" straight after the URL and before the > sign.
DeleteOh cool! I've never had any training in html, so that's brand new to me. I'm a big fan of xkcd already though. They'll give your brain a workout. Thanks again, Ray.
ReplyDeleteOne word of caution about adding links in comments... links to commercial sites that you have a financial interest in will be removed...
ReplyDeleteWe have a lot of spoof comments that appear on the blog which include a link in them to link back to the authors site, purely to gain them some visitors/customers.
Often the comments don't make a lot of sense in terms of the post they have been posted on, so they tend to stand out like a sore thumb! It's also common for them to be put on old posts so they get held for moderation anyway so the normal reader will not ordinarily see them.
Thanks Ray and Steve - very useful. Is there a way to save the base code so it's easily available - I'd never remember this!
ReplyDeleteMay be save it as a macro, not sure what you could use though it will depend on browser and OS
DeleteSteve
Thanks so much! I was one of those individuals who were horrible with the html coding.
ReplyDeleteSave it in a text file then just copy/paste and remember to change your link to the correct one! :)
ReplyDeleteOr write it in your Filofax?
ReplyDeleteThanks. One question though. In your first example you typed <a=href and in the second example you typed <a href=
ReplyDeleteDoes the = come before href or after and if after is there a space between the a and href (hope my question makes sense!)
Ah that's a typo... now corrected thanks for spotting it!
DeleteSteve
You guys are so very helpful! Thanks so much!
ReplyDeleteWow, this is great! It will be very helpful. Though I have to say, as someone who isn't literate in HTML and knows absolutely nothing about it, I will never remember this. I'd have to refer back to it every time I want to add a link, which is okay. But for me, just copying and pasting a URL from the address bar seems way simpler. However, for the good of the community and in an effort to make things cleaner, I will keep it handy.
ReplyDeleteThanks Ray and Steve!
Thank you for the tutorial! I have to confess though that I prefer the whole URL to be copied and pasted since that let me see where I am going. I would only click on the hyperlinked text if I know or trust the author of the comment (or here where I trust comments are moderated?).
ReplyDeleteYes I favour hyperlinking the URL rather than text. And yes comments are moderated but only at intervals. Comments are not held for moderation before they appear on the blog, if we did that there could be days when comments might sit in the queue for several hours before appearing.
DeleteSteve
If you hover over the link, your browser will show the target address in its status bar at the bottom of the window.
ReplyDelete