A common problem I see with new bloggers (myself included), is the lack of HTML knowledge.
This is to be expected really, the majority of users generally aren’t that proficient at coding and would even know where to start, or even that things like this are possible!
HTML code always has a beginning and and an end, and always consists of triangle brackets (<>) typically taking this form:
<code> blah blah blah </code>
Alongside this you must use the HTML tab when creating a post
The most often used code (at least by myself) is the link, this follows a very basic format shown below. This code can be used within posts or comments and is a good way of linking to
<a href=”Web Address”> Text Here </a>
<a href=”https://thepeasantblog.wordpress.com”> Click Here</a>
is equal to: Click Here
Obviously any text can be used and any web address, but ensure that the ‘http://’ is included at the beginning! This code is useful as it can be used in comments that only allow text input and don’t have options for adding a link via a button
These can be a little more awkward, and typically you would add these to posts via the ‘Visual’ tab, but they can be used in the HTML tab too.
The most basic option is to use the code below, which simply adds the image in but with no control over size.
You can also add further refinement to images if you want to format them in different ways, you can specify alignment, size, text to display if image doesn’t load among other things.
<img src=”https://thepeasantblog.files.wordpress.com/2016/01/untitled.png” alt=”Nonsense Image” style=”width:128px;height:128px;”>
The style=”width:128px;height:128px;” will force the image to be that size, useful if you know what size the image has to be, for example creating widgets if you know the width the widget has to be.
Alternatively you can use
Combined Links and Images
Combining both Links and Images can be very useful, one example is if you have copied the image from somewhere and you want to link the source. Another use is creating Widgets for the side of your blog, you can use an image that when clicked will link to a certain page (you need to enter the HTML into a ‘Text’ widget).
The basic idea is you put the code for the image where you would normally have the visible text for a link, as shown below. The Normal link text is in bold for clarity.
<a href=”https://thepeasantblog.wordpress.com/2015/12/17/dragons-loyalty-award/”><img src=”https://thepeasantblog.files.wordpress.com/2015/12/dragons-loyalty-award1.png?w=656″ alt=”Image Hasn’t Loaded” width=”300″ height=”300″ /></a>
The result of this code is as shown here:
A further article can be written on the topics you want to see and if you need any help, or would like me to write some code for you, say for a widget, let me know in the comments below!