If you are a blogger, then you have some experience with HTML code even without knowing programming. Blogging platforms like WordPress have an integrated HTML editor in which everything you write is formatted automatically into HTML code.
You have two windows on WordPress, Visual and Text. In the Visual window you have a view on how you are going to see the final result of what you are doing, and in the Text window, you actually see the HTML code corresponding on what you are writing.
For example, if you want to write “hello” with bold letters, in the visual window you just select hello and then select the B on top of your WordPress editor, and that`s it. If you would like to do it manually you need to go to the Text window and write <strong>Hello</strong>. Everything between the <strong> and </strong> will be Bold. The / slash indicates the end of a command, in this case <strong> indicates the beginning of the Bold command and you finish it with </strong>.
There are a lot of commands or HTML tags, but we don´t need to know them to write HTML code.
But, why should we know how to do this if we already have the WordPress editor?
If you are an entrepreneur then you probably will try to do some kind of e-commerce, and some of the sites that do e-commerce requires you to write a description of the product that you are selling, and (these sites won´t tell you this secret) if you use HTML code within your product´s description it will be a lot more readable and this will help you to get more sale conversions.
Another reason could be that the WordPress editor doesn’t have all the options available for HTML, like doing a text table.
Let´s get to business.
HOW TO WRITE HTML CODE
The secret is an online HTML editor. It is very similar to the WordPress editor so if you use it it won´t be difficult for you to learn it. Click to this site:
Erase everything and start doing your writing, and after you are finished, copy the content of the source window and then paste it into your Text window on WordPress. I am going to do a text table to see how it works.
This is an example of how to use this online HTML editor. Let’s do a bullet point list:
It also has emoticons¡
Now let´s do a table
End of test
Wow, this is my first time doing an HTML table and I had my doubts, I didn`t know if WordPress would support all the HTML tags, but it seems it does.
Here is an image of what I did
At first, when you select the Table icon (it is next to the emoticons icon) you are presented with a scroll down menu, in which you can select the size of the table just as you would do with a text editor like MS Word. Once you do it you just start adding text to the table. Be aware that the default option will be a table without the borders, you just have to select the table, then some options will appear down the table. Select table properties are the first icon from the left.
As you can see in the image, input a number in the Border section. 0 is for no borders.
Once you have all your work done, the next step is to paste the content of the source window onto your WordPress document or in any other site that needs HTML content, as some of the e-commerce sites, like Amazon.
If you are going to use it on your WordPress site, what I do is to mark the place where I want to insert the content in the visual window with “XXXX”, then I go to the Text window, look for my “XXXX”, I erase the “XXXX” and then I paste the content from the HTML editor. This is the same procedure that I do when I want to paste affiliate links.
There is something else that I want to share with you, and it is related to images. In WordPress, if you want to insert an image you need first to upload that image to your WordPress site and then you can use it by the Add Media function. This is very practical but what happens when you want to add an image to a site that you can´t upload the image beforehand? This is what happened to me in an e-commerce site when I was doing a description of my product with HTML.
First, you need to upload your image to an online server from where you can download from. I tried some but then I found out a solution, to use Google Photos.
I already use it with my cellular camera, every time I take a picture it automatically uploads to my account of Google Photos. But there is a problem, you can´t use these photos or pictures to directly link them to a post or a blog, or to any other site that you want to show an image. And then I found a way to go around this, https://ctrlq.org/google/photos/
The procedure is very straightforward:
- Open your Google Photos
- Choose the picture you want to use
- Click on it
- Select the Share icon
- Click on Get Link
- Copy the link
- Paste the link in https://ctrlq.org/google/photos/ in “PASTE GOOGLE PHOTOS LINK HERE”
- Click on “GENERATE CODE”
Here you get two options, Direct link (URL) or Image Embed Code. If you are going to use the URL then go to your online HTML editor, select Insert/Edit Image
- In the source, field paste the URL
- In the Image Description input a text that can replace the image in the case that it cannot be upload.
If you want to use the Image Embed Code just copy it then paste it on your online HTML editor in the source window.
The embed code can be used directly on WordPress, just paste it where you want to show the picture in your text window. If you want to use the Image URL on WordPress you can do it from the Add Media -> Insert from URL.
The next image is directly from my Google Photos, I didn´t upload it to the Media Library.
This can be very useful when you need to create an appealing description, text, article or anything that you need to use HTML code and you don´t know HTML language, or if you just want to do more with HTML than WordPress let us do.
Please leave me a comment if you have any doubt, or just share your experience with HTML if you have any.