Web Burble   How_To_Build_A_Website


How To Create A WordPress Website

speed up outlook

go tour thailand



Editors for creating posts and articles in your website would have a WYSIWYG visual editor with many buttons for formatting and a plain text HTML coding editor. If the tools on the editor cannot perform a particular feature then manually coding the HTML could be an option.




A CMS may have a default editor included that could be fairly basic with limited features available. Downloading a different editor Add-On extension could be a preferred solution. Many of these editors are free and some are paid downloads. You would then go to the Global settings of the CMS and select which editor to use.

 If you are using Joomla! as your CMS then the best free editor would be the JCE Editor. They also have a Pro version but the free version is an excellent editor that has a very familiar easy to use interface. It also has a code editor if you want to edit the HTML. Download the zip installation file onto your PC and install it from within the Joomla! Extension Manager. Don't forget to make the editor the default using the Joomla! system admin section for which editor to use in articles.  i.e.   System -> Global Configuration -> Site Settings-> Default Editor

Turn on any "versions" option if this is available or create constant unpublished copies so that your previous content can be used in the event the current content is lost or "messed up" badly.

Be careful because some editors will "clean" code and re-format the HTML to a standard. Some of your manually written code could then disappear. An option may exist in the editor to not clean and format code.

To make the editor WYSIWYG to work correctly and the editor content to look the same as your published web page, then the editor may need to be pointed to your current templates CSS file(s). These files have script code that determines the formatting of fonts, colors, links, sizes, etc. An option should exist in the editors component or system setup to use the "default" template files, or you may need to manually enter the file path(s). A template could have more than one CSS file. The editor would typically have a seperate control panel in the CMS system that is used to configure the various settings for the editor but this depends on the CMS you are using and the editor and some systems may have limited control on what can be configured.


Writing Articles

Make a list of keywords and long tail keywords to include in your articles. Search engines will index your content to what is written and if the keywords match what Internet users are searching then this increases the chances of your website being listed in that search. But, write quality content for the visitor so your website maintains a good reputation with search engines. Keyword "stuffing" on pages can harm SEO.

Keep your content original. Do not copy content from other websites or yours will suffer from having a bad reputation with search engines.

Maintain fresh and current content and archive older articles and posts that would be irrelevant to current trends or has outdated information. The entire website can be perceived as stale and visitors will not return. Having visitors return is crucial in maintaining an increasing audience. Returning visitors can be monitored in analytical apps such as Google Analytics in Reporting->Audience-> Behaviour -> New vs Returning.

new vs returning



Ensure all photos included in the content have a good description. Search engine bots that index sites cannot know what the image actually depicts. An image name of DSC_45567 which would be a name given to the image by the digital camera is meaningless. Short descriptive names are best, e.g.  snow_leopard.jpg . The image link properties should also have the "alt" (alternative description)  "Snow Leopard"  included so that if the image link is incorrect or slow to load, the alternative text will display on the web page.

Quality images are very important. Having blurry or boring photographs will not keep the visitors on your site. Processing digital images and enhancing the image with photo software on a computer before uploading is highly recommended. When a photo is taken in a digital camera the image is generally set with the default profile unless you have selected the appropriate scene setting such as "vivid" for flowers or "portrait" for close up people etc. Colors can be washed out and the image could do with a small amount of sharpening. Cropping the image can also improve the quality by removing unattractive items that detract from the main subject.

Size all images to the required height and width for the website. Today's digital cameras can produce very large images which are good for printing but far too big for displaying on a website. Images displayed in a web browser will re-size automatically depending on the screen it is displayed on and what page element it is placed into. If you place the image into a paragraph of text and the paragraph takes up 50% of the overall width of the web page which is set to a maximum of 1900 pixels, then the image should be re-sized to 950 pixels in width because this would be the maximum pixels it will ever be displayed. If the website page is displayed on a smaller screen such as a mobile cell phone or tablet then the web browser will re-scale the image to display correctly. But in this example, if the image is too small (less than the 950 pixel) and it is displayed on a PC screen, it will either look too small or be blurry, depending on the settings. If you were to upload the un-sized image to the web server and use that for including in web pages then the web browser would need to load the full image and re-scale it down to the correct size. This would make the page load times significantly longer than necessary and could make the page "jumpy" as the image is altered to fit.


Common supported image formats

JPG    These are compressed image files that are commonly created in a digital camera as the default. This format is described as "lossy" because the higher the compression, the smaller the file size and subsequently the lower the quality of the image. These file types are very commonly used in web pages because the compression level can be easily adjusted in imaging software to suit quality and load times.

BMP   Bitmap images have no compression and maintain the original quality but are poor performers in regards to web page load times due to large file sizes.

PNG   Portable Network Graphics can maintain a high quality but usually have a larger file size than a JPG.

GIF    Graphics Interchange Format type files are very small compared to the other formats and very good for page load times but only support a limited color range. They are only suitable for simple graphic images and logos that have solid areas of the exact same color.


Structured Content

Creating pages with properly structured content is important so that search engines can understand the content and subject matter. Using headings effectively can benefit SEO. The main heading of the page should be set to use the "<h1>"  HTML tag. This often is performed automatically by the template management system which will use the menu item name or the page title if this has been set to be automatically included at the top of the web page. You do not need to manually code the tags in the HTML, simply highlight the text you want as a heading or sub-heading and select the appropriate menu item. An example is shown below of what a typical editor will display to select headings. Use the other types as sub-headings. You would probably use only a single "<h1>"  in any one page. Use as many <h2> tags as required with sub-headings <h3> etc.



Tables & Divs

Regular layout of content uses paragraphs but multiple columns of content can be set out within "Tables" or "Divs".

Tables of content should only be used for data such as train timetables or result sets from some analysis. The table would need a Table Header to describe the content and column headers to describe each column content. Search engines would see this layout as tabular information. This layout should not be used for regular content such as articles because it may not be good for SEO.

Content such as articles in a multiple column format need to be set out using  <Div>  tags to be good for SEO. Search engines will see this as regular content. Header tags <h1> and sub-header tags <h2>, <h3> etc. would provide the search engine the description for the content under each "Div".


Below is an example of 3 columns of text using DIV tags in the HTML script of the web page. Each Div can have its own formatting such as background color and type of font. The example has the first row containing 3 headings and the second row containing the text. They line up just like a "Table". There are two parts to achieve this formatting. Firstly, the CSS file for the template requires some script to be added to interpret the Div types that replicate a table, table row, and table cells. Secondly, the Div script is added to the HTML script in the editor.


Gravida gravida sem vestibulum vitae nonummy tempus.

Suspendisse sed nullam eros ultricies suscipit.

Velit turpis dignissim hendrerit sit eleifend.

Lorem ipsum dolor sit amet quis. Quis sodales consequat imperdiet turpis neque. Iusto urna pede. Facilisi nam nulla tempor massa tempus nec orci adipiscing sit diam leo aliquam eget et pharetra ante mi. In ultricies enim felis mauris phasellus. Amet facilisis parturient. Ac proin sapien.
Enim luctus dui neque odio vel. Vitae ipsum nunc lorem turpis amet sed justo metus eros ut turpis vitae leo erat. Proin arcu quisque. Leo adipiscing non morbi orci in. Lectus eu et pede wisi vivamus magna sapien nec arcu nulla sollicitudin laoreet a morbi. In in cras. Suspendisse suscipit.
Viverra hymenaeos odio. Pellentesque praesent lacinia pharetra elit ac. Vitae quam nulla. Neque cupiditate sit non ornare est. Mauris massa eget. Ac proin sapien. Malesuada nunc erat. Cupidatat nec nec. Ante non amet dui tincidunt vitae. Torquent libero irure laoreet mattis risus.


Warning: Create a backup of the article before attempting any direct HTML script editing.

Add the lines below into the HTML script within the editor. This can usually be achieved by selecting, for example, the "html" or "toggle" button which changed the editor into HTML script mode. The script below is the very minimum required to create Div columns. To add extra columns, copy and paste everything in a "divTableRow" class block of script into the "divTableBody". The lines of script code have only been colored to make it easier to understand the structure logic.

To create header tags such as <h2> like in the example above, from within the WYSIWYG  editor, highlight the text and select "Heading 2" or whatever your editor has for creating a header tag. The <div> tag in the cell will change to a <h2> tag, but the "class" remains as a "divTableCell"  
e.g.  <h2 class="divTableCell">FIRST ROW. FIRST CELL OF TEXT</h2>

Each divTableCell can be (inline) styled individually, but this is not recommended.
e.g.   <div class="divTableCell"  style="width: 33%; background-color: #693333; color: #ffffff; margin-left: auto; margin-right: auto;">FIRST ROW. FIRST CELL OF TEXT</div>    

Best practice is to create CSS classes for styling instead of this inline "style" because it will save time and reduce duplicated script in the HTML web page.

The script code below is colored to provide clarity to the structure so that you can see the start and end <div> tags easily for each table, body, row and cell element.

 <div class="divTable">
   <div class="divTableBody">
      <div class="divTableRow">
         <div class="divTableCell">FIRST ROW. FIRST CELL OF TEXT</div>
         <div class="divTableCell">FIRST ROW. SECOND CELL OF TEXT</div>
         <div class="divTableCell">FIRST ROW. THIRD CELL OF TEXT</div>
      <div class="divTableRow">
         <div class="divTableCell">SECOND ROW. FIRST CELL OF TEXT</div>
         <div class="divTableCell">SECOND ROW. SECOND CELL OF TEXT</div>
         <div class="divTableCell">SECOND ROW. THIRD CELL OF TEXT</div>


Warning: Create a backup of the Cascading Style Sheet (CSS) file that is used by your website template before attempting any direct script editing.

Copy and paste these "class" lines of script to the end of the CSS file that is used by your website template. Extra styling properties can be added to each class for the  .divTableCell  to change padding, text alignment, font color etc.


  display: table;
  width: 100%;  
.divTableBody {
  display: table-row-group;
.divTableRow {
  display: table-row;  
.divTableCell {  
  display: table-cell;
  padding: 3px 3px;
  text-align: left;


Now you can write your required content into the columns using the WYSIWYG editor.


© 2019 Adrian Butterly WebBurble.Com. All Rights Reserved.