One of the biggest problems that new bloggers find when using Wordpress is adding links and images to their post, pages and sidebar widgets, especially if they have to use html code to do this.
In the Wordpress post and page editor there is an icon (CHAIN symbol) that you can click on to help you do this and you can then see the code that is created by switching from Visual mode in the editor to HTML (just click on the HTML tab). Note that some text must be highlighted before the link icon is available to use.
But if you are unfamiliar with html code then this probably won’t mean much to you. And despite what others might tell you about blogging with Wordpress, it will really help you if you know a little bit of basic html.
The most useful html for you to know as a Wordpress beginner is the code used for creating links. Links are the essence of the Internet and without them it would just not work.
And if you want to add links, other than those in your blogroll, to sidebar widgets, such as a text widget then you will need to know how to construct the link html code for both text links and images as there is no editor for these widgets like there is for the posts and pages.
The biggest linking problem usually starts with a wish to add affiliate links for blog or website monetization.
So what is a link?
A link is one or more words or text, or an image (photo or banner), that you can click on and that when you do click on it will take you to another web page either on the same site or at a different website. Links are less often referred to by their full name of a hyperlink.
How to Create a Text Link with HTML?
This is the basic html code for a text link:
…and this is what it looks like on a web page:
So you can see that when displayed on a web page (or in the Visual pages/posts editor in Wordpress) the text you see for the link is Home Page and if you click on it that is where it will take you.
The html code for a text link contains the Anchor Text (Home Page) and the destination web page for the link (http://freewptraining.com).
How to Create an Image Link with HTML?
This is the basic html code for creating an image link:
(You can add some text in between the double quotes (“”) for the alt tag to describe the image as this is good for search engine optimization)
…and this is how it is displayed on a web page:
Note that the code is split onto different lines – this makes no difference to the html and I have just displayed it in this way so you can see it easily in the page width of this article.
From this code you can see that you also have to now include the source location in your website’s folders for the image to be displayed.
Remember that when you display affiliate banners the images may be located on the merchant’s website or that of the affiliate network.
If you look at what is displayed for this image link on a web page (or in the Visual page and post editor in Wordpress) you will just see the image (as shown above), but if you click on it you will taken to the web page or site indicated in the html link code above.
The html code for an image link contains no anchor text, but the location of an image to be displayed (http://freewptraining.com/images/wplogo.jpg) instead, and as before it also contains the destination web page that the link is pointing to (http://freewptraining.com) – the home page again.
So this was just a simple introduction to the most useful html code for Wordpress – that for creating links!
Real easy…
Recent Comments