Tag Archives: html

Creating Hyperlinks Using HTML

Modified on by
14

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.com/”>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.

Other posts in our “blog makeover” series include:

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

How To Add Your Photo to Your Blog Side Bar

Modified on by
35

Our next posts in our “blog makeover” series provides an excellent opportunity to respond to Dina Strasser suggestion to do:

a follow-up post on how to (and the limits to) customizing widgets. For example, I’d like to include on my sidebar a simple link to my Twitter page (no updates).

It is recommended you read the previous post on Getting more out of Widgets prior to reading this post.

Basic knowledge of HTML provides greater ability for customizing text widgets; means you can embed photos in your side bar, link to pages on your blog or other websites, write text using bold and italics.

What is HTML?

HTML is a bit like RSS, for bloggers there is no need to fully understand it but helpful if we learn the basics of how to use.

HTML is short for “Hyper Text Markup Language” and a language used to tell a browser how to organise the layout of a web page it has downloaded from the WWW e.g. influences if text is bold, italics, a heading, bullet points.

When you write a post or page inside your blog dashboard you don’t worry HTML because the Visual Editor does it for you. If you click on the Code tab it shows the HTML code in your text.

html.jpg

Basic knowledge of HTML is really helpful for tasks like customizing widgets and writing comments on blogs.

Examples of HTML used to highlight text include:

  • <strong> tag makes text strong e.g. I <strong>really like</strong> this idea produces I really like this idea.
  • <em> emphasizes text e.g. I <em>really like</em> this idea produces I really like this idea.

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. </strong>

Here’s how you can use HTML to add your photo to your Blog Side Bar

<img src=”http://theedublogger.com/files/2008/01/question.jpg” alt=”question mark” />
producesquestion mark

This is how I embedded Larry’s photo on his blog. Personal connection is important for readers — adding Larry’s photo means his readers now know more about who he is i.e. they can visualise him.

imagehtml.jpg

Final Thought

As Kevin pointed out:

if you doing a blog maker make sure you write a post to invite your readers to comment on your changes. Readers who read your post via RSS won’t be aware of the change because everything will look the same in their feed reader.

Remember to pop past Larry Ferlazzo’s Website of The Day blog and give him feedback on his makeover!

Dina Strasser request for tips on adding “a simple link to my Twitter page (no updates)” will be covered in my next post.

It does take time to get used to using HTML; the key with technologies is willingness to experiment. As you become experienced with using HTML you will recognise opportunities that can be enhanced with it’s use.

Other posts in our “blog makeover” series include:

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