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
Links
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>
For example:
<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
Embedded Images
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.
<img src=”https://thepeasantblog.files.wordpress.com/2016/01/untitled.png>
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!
The Peasant Blog 
So what is the difference between using ‘Visual’ vs. ‘HTML’? Or, why would one want to use this confusing HTML code, when he/she could just use ‘VIsual’ and not worry about the brackets and the code? Thank you.
LikeLike
Good question, the Visual tab is much easier, but the HTML tab gives you more freedom, it also allows you to add links to comments like This. But it gives you the freedom to resize images, choose text to appear if the image doesn’t load etc. But a good way to start is to use Visual and then go into the HTML page and edit the code that it provides!
LikeLiked by 1 person