HTML on my mind

The world of HTML is a myriad of twist and turns that can make you head spin. I think you have to be a very patient person to deal with codes. You can probably gather from my statement that I’m not patient…at least not when it comes to coding. And, you would be right.

However, there is a real satisfaction when your HTML works out and you see a zoom effect on a picture actualise. Now, you may not have use of the zoom effect necessarily, but the fact that you were able to figure out how to add some CSS that made the HTML code work on a particular blogging artifact is pretty exciting stuff.

So, I’ve found a few codes that could be of use when HTML-ing in the blogger sphere that is WordPress.

First, it is worth noting that there are two areas where you can add and edit a post: the Dashboard or the new Editor. I prefer to start with drafts in the ‘old’ dashboard editor before moving on to the ‘new improved’ editor.

Dashboard and Editor screenshot
Figure 1: Dashboard Editor (top) and new Editor screenshot

There are a few excellent presets and buttons within the edit windows, such as the various heading styles and the (+) button to add images. However, for the times where you may wish to affect particular text within the blog in an un-preset type of way, the HTML codes will come to the rescue.

For example, I wanted to have a smaller font for my reference list. Using the heading presets were not applicable in this case, so using HTML codes that determine font, style and size would be useful. See example below where the text is Verdana font size 28.

Verdana font family @ font size 28

This was achieved by using the following code in the HTML tab of the edit window:

Figure 2: Font size and style html code (sourced from w3school.com)
Figure 2: Font size and style HTML code (sourced from w3school.com)

An example of a Font code:

<br /><span style="font-size: 28pt; font-family: Verdana; ">Your Text</span>

You can find font codes via w3school.com and test them via its TryIt Editor (as seen in figure 2 above).


References:

W3schools.com. (2017). HTML font tag. [online] Available at: https://www.w3schools.com/tags/tag_font.asp [Accessed 21 Feb. 2017].

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s