logo wide 2000x350
The article describes how to create content for a web page – the text and images – using a standard document. Because Microsoft Word adds a huge amount of harmful coding to Word documents, it is best to create your web pages using a free word processor called Libre Office. This free program is available for the Microsoft Windows operating system, the Apple Mac operating system and the Linux operating system. Libre Office is also very useful for optimizing and compressing the file sizes of images (with a single right click). Ideally, this should be done on a Linux computer – which comes with Libre Office. But you can get a free copy of Libre Office for any computer at the following link:

https://www.libreoffice.org/download/libreoffice-fresh/

5 Steps for Writing and Posting Joomla Articles with Images
This article describes 5 steps for writing and posting a Joomla article. These five steps are done every time you want to add a new article or a new page to your website.


01


We will cover Steps 1 and 2 in this article, then Step 3 in the next article and Steps 4 and 5 in the final article in Section 4.

Step 1: Write and Post Your First Article – Welcome to our website – as a normal document

02

The first article you should write and post at the top of your Home page is called the Welcome Article. The title is typically Welcome to Our Website! The Welcome Article explains what your website is all about and why viewers should take the time to read it. Like all your other articles and web pages, your first article will consist primarily of a combination of text and images. The first step to creating your Welcome article is to create a normal document of your article. This document will look like the following:

Welcome to our Website!
Introduction Content TEXT


Welcome to our website. Our mission is to help you!
Image 1

03

Main Body Content First Idea TEXT

We offer all kinds of tips to help you achieve your goals.
Image 2

04

Main Body Content Second Idea TEXT

We also provide resources to help you!
Image 3

05

Main Body Content Third Idea TEXT

Finally, we provide a network to help you reach others.
Image 4

06

Conclusion TEXT

Call for Action: Feel free to contact us with any questions you may have!


Most articles and web pages are simply a combination of text and images. A common problem with websites is that they contain too much text and not enough images. As a rule of thumb, there should be at least as much space taken up with images as there is with text. Before posting this article, let’s first review how to get images to add to your article.

Getting Images to Add to your Articles
In the above example, we wrote our first article, called Welcome to our Website. We had four images in this article. But where did they come from? The Internet is very visual. Take your time to find images which support your ideas. Use as many images as possible which show people and especially showing children. Charts, graphs and tables can also be copied as images. Images often convey much more information than text and help readers, and especially beginners, better understand the message you are trying to convey. Avoid simply putting in a bunch of text on your web pages.


Use a Screen Capture tool to Capture Images
One way to get images for your articles and slide shows is to take them with a digital camera. Another is to capture images and screen shots from the Internet using a screen capture tool. In Linux, there is an excellent free screen capture tool called Shutter. In Windows, you can use a free program called Snag Screen.


Reduce the File Size of your images by compressing them

Before posting any images to the Internet, we will need to optimize them. The file size of a normal captured image is over 100KB. Once we are done writing our article and adding all of the images we want, assuming we are using Libre Writer, we can go through the article and right click on each image. Then click Compress. This will turn the image into a JPEG image and also reduce its file size for the web.

After making sure that all the images in your article have a small enough image size and file size, we are ready to create a text only copy of the welcome article and place all of the welcome article images in the images/frontpage/welcomearticle folder.


Step 2: Create a Text Only version of your Article

07

We have previously created a folder structure on our Home computer. This folder structure includes the root folder for your website with an articles folder inside of that and a 00Welcome Articles folder inside of that. After your first article is written, put the document complete with the 4 images in this folder and call the article file 00 Welcome to our Website. The path to this article on your home computer will be mywebsite/articles/00 Welcome Articles/00 Welcome to our Website.

08

Note that each article above is listed twice. The duplicate article has a W in front of the file name to indicate that it is the Web Version or Text Only version of the article. To create this Web version, copy the article and save it AGAIN in the same folder as a new and separate file called W00 Welcome to our Website. Thus, you will have TWO versions of each article. Next, close the first Document and continue working with the WEB version of your Welcome article. Here is what the web version will look like. Note that before removing the images, and replacing them with “placeholder text” this document is an exact copy of the original document.

Welcome to our Website!

Introduction Content TEXT

Welcome to our website. Our mission is to help you!

Image 1

09

Main Body Content First Idea TEXT

We offer all kinds of tips to help you achieve your goals.

Image 2

10

Main Body Content Second Idea TEXT

We also provide resources to help you!

Image 3

11


Main Body Content Third Idea TEXT

Finally, we provide a network to help you reach others.

Image 4

12


Conclusion

Call for Action: Feel free to contact us with any questions you may have!



Next, if you haven’t already done so, create an article image folder for this article inside the front page category images folder we created previously on your home computer.

13

Name the image folder 00welcome. Inside of this 00welcome images folder will be the four images of the welcome article. This should be numbered w01, w02, w03 and w04. So the path to the first image in the Welcome article on your home computer will be mywebsite/images/00welcome/0owelcome/w01.jpg.

To be clear, each of your website articles will require making a folder for its images. If you have a lot of images in your article, it is useful to number them to keep them in order. The first number refers to the article (they are all in the same article). The second number is the image number in the article.

Below are 4 images in our Welcome article:

14


Once you have created the welcome article images folder, if you are using Linux with Libre Writer, right click on each image and click on SAVE GRAPHIC. If you are using MS Word, use Snag Screen to copy jpeg files of every image in the web version of your Welcome article to the images folder. These image files should be numbered, (for example, w01, w02, w03). For the sake of speed, names of images are usually avoided. Also because these image files will be transferred directly to your website, file names for these image files should be in lower case. No spaces or capital letters. It is best to save images as JPG files. So use the drop down arrow to select JPEG. Then give the image a name and click SAVE. Below is what the Text Only (web) version of the Welcome article looks like after the four images have been copied to the images folder and the images have then been deleted from the WEB version of your Word document and replaced by the placeholders, w01, w02, w03 and w04:

Text Only (web) VERSION of Welcome to our Website!

Introduction Content TEXT

W01

Main Body Content First Idea TEXT

W02

Main Body Content Second Idea TEXT

W03

Main Body Content Third Idea TEXT

W04

Conclusion TEXT

Note that the web version does not have any actual images. It now consists only of text – with the w01, w02, etc indicating where the images should be inserted back in to the text one the text itself has been copied and pasted into the website article.

This is what your four image files should look like in the 01welcome images folder on your home computer:

15


Here is what the icon version of this folder looks like:
16


Note that all of the images are under 50 KB. Now that you have created a WEB or TEXT ONLY version of your Welcome Article and your Welcome Article images are organized and placed into their proper folders in the mywebsite/images/00welcome/0welcome folder on your HOME computer, it is time to copy each of these four images into a similar folder on your website server. That is the subject of the next article.