The Edublogger

Tips, tricks, ideas and help with using web 2.0 technologies and edublogs

Creating Hyperlinks Using HTML

January 28th, 2008 · 10 Comments
Blogging How To · Blogging Tips

Image of Photo in Larry's sidebarLast post on The Edublogger introduced HTML basics and showed readers how to use HTML to add their photo to their blog side bar.

As Kate Olsen highlighted, if you use your photo for your blog avatar, a simple alternative is to add the Avatar Widget to your side bar (learn more about Widgets here!). However with Larry’s “blog makeover” I wanted to add words above and below his sidebar photo which is why I used HTML.

In this post, we will look at how you can create hyperlinks using HTML (Learn about HTML Basics here!)

What Is A Hyperlink?

A hyperlink (commonly called links), on a web page, can be an icon, graphic, or word/sentence that, when clicked with the mouse, takes the user to another location on the web site or to another web site.

People will often use HTML to create hyperlinks to helpful web sites when writing comments on other people’s posts.

Here the HTML you use to create hyperlinks:

<a href=”http://theedublogger.edublogs.org/”>Welcome to the Edublogger</a> produces Welcome to the Edublogger

link.jpg

Here is how I created the Links in Read This Info on Larry’s Blog

I used HTML code for hyperlinks to create a text widget that linked to pages on Larry’s blog which allowed me to reduce the number of pages at the top of his blog (refer to Tips for Blog Makeovers for the reasons why).

Each hyperlink was separated with bullet points using HMTL tags <ul> and <li>

<ul>
<li>potatoes</li>
<li>spinach</li>
<li>lollipops</li>
</ul>

produces

  • potatoes
  • spinach
  • lollipops

Notice you must use the < and > symbols around the HTML Tags and the tag is closed using a ‘/’ (slash) in front of the tag keyword e.g. </ul>

htmlwidget.jpg

Here’s how I created the sub-pages.

pages1.jpg

FINAL THOUGHT

For more experienced widget and HTML users, check out Judy O’Connell’s text widget for displaying Library Things Book Collection.

Another way to add links to your sidebar is using your blogroll which we will cover in the next post.

If you are enjoying reading this blog, please consider Subscribing For Free!

 Tagged: , , ,

Create a free edublog to get your own comment avatar (and more!)

10 responses so far ↓

  • 1    Kate Olson // Jan 28, 2008 at 6:07 am

    Sue,

    As I tweeted to you last night, I used html for the first time ever last night to create a link in a text box in the sidebar of my blog (to create a link to the flickr profile for photo credit for the header image). I had printed out your explanation last week and kept my eyes glued to it as I worked to include this link. Thanks so much for your excellent explanation, I wouldn’t be able to do all this fun stuff half as easily if I didn’t have your wonderful advice to draw from!

    Kate

  • 2    Creating Hyperlinks « Developing Literacy in MST // Jan 28, 2008 at 7:17 pm

    [...] uncategorized. trackback Some of you have been asking how to create hyperlinks in your comments. Click here to find the [...]

  • 3    Mimi, USA // Jan 29, 2008 at 2:12 pm

    Where do you get basic info
    like how do my students see my blog? How does anyone?
    how do they comment?
    What if they don’t have an email?
    How does one start a forum?

  • 4    Sarah Stewart // Jan 31, 2008 at 11:58 am

    In a comment to me on my blog, you suggested I used html to put ‘my profile’ into paragraphs. How do I do that-I do not want to use bullet points. cheers sarah

  • 5    Sue Waters // Jan 31, 2008 at 7:06 pm

    Hi Mimi - I have set up a Getting Started with Edublogs page for this blog. Hopefully this will answer many of your questions. Please let me know if you need additional information.

    Good question Sarah - I was thinking the HTML for paragraphs. Which is [p] at the beginning of the paragraph and [/p] at the end. (Replace the [ brackets with < angled brackets).

  • 6    murcha // Feb 4, 2008 at 10:56 pm

    Thank you Sue, for this post. I looked at coolcatteacher’s blog and saw she had a wiki widget that showed what she was doing with her students at the moment and thought I would love to do something similar.
    So, I shall print off your notes and try to link what I am doing with the students , referring to the url that we might be working on or onto their blogs etc. Thank you for this helpful blog site.

  • 7    Sue Waters // Feb 6, 2008 at 9:15 pm

    Hi Anne (Murcha) - did you have any luck adding the widget to your blog? To grab the same widget for your own wiki you will need to click on your manage space tab on wikispaces - go to the bottom of the page and click on Space Badget which is under Space promotion. Scroll down to the bottom of the page and copy the code from the Live Changes Badge. In your blog drag a Text widget from your Available Widget area to your side bar - then paste in the code. I assume this should work for you as you are using Wordpress.com blog — it won’t work for an Edublogs blog because it contains Javascript.

  • 8    Some help writing blogs « The Winslow/Willink info exchange Weblog // Mar 13, 2008 at 11:13 am

    [...] new for people so if you want some additional information on how to do all of this stuff you can click here. Navigate around this site for some tips including how to add hyperlinks. Of course remember that [...]

  • 9    Are Your Comment Settings Making It Harder For Readers To Comment? | The Edublogger // May 11, 2008 at 12:31 am

    [...] The default setting when you set up a blog with Blogger is only allow people with Blogger or Google accounts to comment. If you use this setting it means when I leave a comment my name is linked to my blogger blog (which I don’t want it to) and I have to manually add my blog name under my comment using HTML. [...]

  • 10    Creating A Blogroll For Your Sidebar | The Edublogger // Jun 14, 2008 at 3:51 am

    [...] Up iGoogle For Your Personal Learning ← Creating Hyperlinks Using HTML Adding a RSS Feed From Feedburner To Your Blog [...]

Leave a Comment

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image