HOW TO WRITE HTML CODE 14


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:

https://html-online.com/editor/

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.

Beginning test

 

Hello

This is an example of how to use this online HTML editor. Let’s do a bullet point list:

  • Cats
  • Dogs
  • Mouse

It also has emoticons¡  cool embarassed tongue-out

Now let´s do a table

 
Animals Size Color
Cat Medium White
Dog Large Brown
Mouse Small Grey

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

HTML EDITOR

HTML EDITOR

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.

Table properties

Table properties

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.

Mazatlan Sunser

Mazatlan Sunset

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.

Your friend

Ruben

 

 


About Ruben

I was born in Mazatlan, Sinaloa, Mexico. I am an Electronic Engineer and father of three beautiful kids, two males and one female. I like movies, tv series and console games. I am an entrepreneur and blogger and I want to help people to realize their dreams.


Leave a comment

Your email address will not be published. Required fields are marked *

14 thoughts on “HOW TO WRITE HTML CODE

  • Gregory

    Ironically, tables are often the element that new HTML programmers have the most problems with. I myself needed to learn this lesson the hard way, so I hope this page serves the new coders well. Well done.

    • Ruben Post author

      I don´t have any experience with html coding, but you really don´t need it. With this online html editor you can do almost everything you can with html, and tables are nice looking on webpages.

  • Will

    thanks for the education. i am fairly new to the blogging world and i know nothing about html. i feel i am gradually learning a little here and there with trial and error, so i’m glad i found this post. i will definitely use this to insert tables into my posts when necessary. great post!

  • Jude

    This article brings back fond memories. I started out learning how to create websites through HTML coding. That was in 1998 when I first took an HTML course. It was the craze back then. These days, with WYSIWYG editors, website creation has become so convenient. Though I don’t code anymore, I am able to look into the coding for WordPress and tweak it if necessary.

  • Lee

    I once did some basic training for HTML and CSS through a site called Code Academy. If anyone is Interested in learning how to code I would really recommend this free training resource. They say learning how to code is like learning a language and I was, and still am trying to learn a language(spanish) so I felt I couldn’t give the time needed to learn both. So thanks for sharing this tip on how to simplify the process I sure in will come in handy in the future.

    • Ruben Post author

      That´s why they are name programming language, I used to know how to program when I was t the university, but programming languages have evolve and new ones have been born. If you ever need help or have a doubt with Spanish I can help you. Thanks for your comment.

  • Furkan

    I was using a WordPress table plugin which just sucked because it was not compatible with some other plugin. This is why I wanted to get in HTML coding and I think I can easily create simple tables which is actually all I need.

    • Ruben Post author

      Hi Melani, I don´t think you need to know html as this is a plug in that works with WordPress. WordPress users don´t need to know html but it is very useful if you do because you can modify the code so the final result is more to your taste. Also you can not do text tables on WordPress, and is a little complicate to do it with html, that´s why this online html editor can help.

  • Juan Zayas

    Very Informative article Ruben. I honestly had no clue all this was going on in wordpress. I have a lot of learning to do with html. Good to know I have a reference to look back on with your post.

    • Ruben Post author

      Yes, there are a lot of things happening on the background of WordPress, it has to convert all of our inputs (text, lists, images, etc) to html language, and it is almost transparent to us. Imagine if we had to do it by writing HTML code, many of us wouldn`t be bloggers.