Blog

HTML, WordPress and website content III: Tips for adding content

In WordPress you can use at least two different editors (visual editor and text editor), you can see the pics of them in the first article of this series.   

The visual editor offers some elementary options to modify your text, add links or quotations and do it just by clicking a button. So it is as easy to use as any other simple text redactors.

The text editor is maybe less often used, here the content of the page are shown as HTML code and some knowledge in it is needed to achieve the desired results. In general, it is not convenient to add all the page content in the text editor, but you should know enough about it to understand how different elements on your page are marked here.

Now let’s see some examples where HTML knowledge comes useful.

WP and tables

If you want to use tables in your content pages, learning some HTML may be inevitable. Default visual editor in WordPress does not have the functionality to create tables. Even if with your page template comes some fancier visual composer, you may soon discover that even there you need to use HTML for tables.

Yes, there are plugins to help with this problem, but sometimes it is not in content managers hands to add those plugins.

You can make tables somewhere else and copy them into your page, but without HTML you won´t be able to add extra rows or columns. So every time you need to add a row, you have to make a new table.

Tables can help out when you need to change default content layout of the content page and there is no other way to do it (CSS-code is not accessible or you just have no knowledge in this area, no page building plugins like Visual Composer or Cornerstone, calling out web developer would be overkill). The table helps you make text appear in columns or show photos with captions side by side and so on.

WP, extra spaces and empty rows

Sometimes we just want more empty space between different parts of our content. Pushing enter or spacebar does not help us here, no matter how many times you hit them in the row, the browser reads the result as you have pushed the key just once.

To add extra space between words or letters, you must find in the text editor the place where you want it and then add    or   as many times as needed.

To add empty row(s) between elements add    or   as paragraph(s) between those elements:

<p>&nbsp;</p>

WP and links

Now and again there may be problems with links: they may not work at all (for example the file or page won’t open, instead of the picture there are empty) or take you to the old page or on the test page.

It can happen when you change domain name (most commonly, in this case, the links send you back to the old address), inserted link is flawed or someone while editing the page content has deleted important part of the link or element code.

If there are only a few flawed links, you can quickly check in the text editor, if the link address and element tags are in place and correct, and if necessary, make corrections. You can check the links in the visual editor as well, but it takes more time as you need to make many extra clicks for that.

When you add internal links (other pages, media files, CSS-files etc) to your content page it is best to delete protocol and domain name (http://www.yourdomain.xx) and check that the remaining part of the address starts with the slash.  This way you minimize the broken or flawed links´ problem when in future you need to change the domain name.

WP and embedding other web pages

It can happen that you want to add some videos or documents on your website the way, that visitor could see the content without leaving your page. For example, you found a great video on Youtube or made a quiz in Google Forms. You do not want that visitors have to leave your page by clicking the link to show or use them.

That is why we have embedding function. Simply said – you can go to Youtube or Google Drive, open the video or document you want to share with your web page visitors and copy the HTML code for embedding and paste it into the text editor on the page you want to show the content.

This piece of code marks HTML element <iframe> and you must paste it precisely in the text editor because if you paste it in the visual editor your visitors see the code, not the video or the document you wanted to share.

Element <iframe> makes it possible to embed another web page within the current web page, and it comes at least with one attributesrc. This attribute tells which page should be shown. Beside that attribute, we may see for example attributes for height, width or allowing fullscreen mode.

WP and the speed of editor

Even these days can happen that connection is slow or the amount of content makes the page slow or there is something else that influence the page speed but you still have to change something on the page.

In this case, sometimes text editor opens (shows the content of the page) quicker than the visual editor. So when you often need to make little changes in this conditions, it just may be less time consuming to use the text editor.

When the content of the page is very long, then use Find window, which opens if you click CTRL+F.

Summary

Knowing HTML is useful when

  • you need to add tables or rows to the already existing table
  • after changing the domain name some links won´t work
  • you need extra space between letters or words
  • you need more space between elements than page template gives
  • You want to embed something into your page (videos from Youtube, documents from Google Drive etc)
  • you need to do minor fixes on the content of slowly loading content page

These were just a few examples where knowledge in HTML comes useful. If you want to know more about HTML –  visit  W3Schools.com. There you can learn everything you need to know about this subject.

Loading Facebook Comments ...

Share Your Thoughts!

Copyright ©2005-. All Rights Reserved.