Joomla/C2/Formatting-article-in-Joomla/English
Visual Cue | Narration |
Show Slide 1:
Formatting Articles in Joomla. |
Welcome to the Spoken Tutorial on Basic Formatting of Articles in Joomla. |
Show Slide 2
Learning Objectives: Same as narration |
In this tutorial, we will learn about:
|
Show Slide 3
Learning Objectives continued: Same as narration |
We will also learn how to:
|
Show Slide 4
Versions and OS |
For this tutorial, we will be using:
|
Show Slide 5
Prerequisites |
To follow this tutorial:
|
Show Slide 6
Prior Knowledge |
Earlier, we learnt to create, edit, delete and copy an article in Joomla.
Now, let’s learn how to format articles. |
Switch to the browser with Joomla Control Panel open. | Let’s switch to the Joomla control panel. |
Click on Article Manager | Click on Article Manager.
Here are the articles we created earlier:
|
Let us view them on the Digital India webpage. | |
Click on Digital India | Click on Digital India at the top right of the page. |
We can see both our articles here. | |
Click on “Benefits of Sodium” | Click on Benefits of Sodium. |
We can see the article is not formatted. | |
Click on the admin panel webpage in the browser.
Click on Benefits of Sodium |
Let’s go back to the Article Manager.
Click on the article title “Benefits of Sodium”. |
Point to the editor | The editor in which we type the text of the article, is called a WYSIWYG editor. |
While editing, this text can appear on the screen:
WYSIWYG : 'What You See Is What You Get'. |
WYSIWYG is the abbreviation of 'What You See Is What You Get'. |
It means the article looks the same in the web page as seen in the editing window. | |
Point to the menu bar in the editor | Look at the menu bar of the editor now. |
Point to some options in the first row.
Now click on any 2 for demo |
The first row has drop-down menus, which have various formatting options.
You can see the sub-options when you click on them. |
Point to some options in the 2nd row. | The second row has sets of formatting options. |
Point to each icon in the first set | So here, we see a set of text enhancement options like
Bold, Italics, Underline and Strikethrough. |
Point to each icon in the second set | Next, we see the options to align the text to the left, centre, right and justify. |
These work as in any other text editor. | |
Point to Paragraph button
|
After the alignment options, we can see a button named Paragraph. |
Click on Paragraph | When we click on it, we can see various options like Heading 1, Heading 2, etc.
These are pre-set options provided by Joomla for formatting purposes. |
Show Slide 7: Headings in Joomla | Headings are very useful in making text easier to read on the screen.
Headings also define the hierarchy of details. |
Highlight Heading 1
Highlight Heading 6 |
Heading 1 defines the most important heading and Heading 6 is the least important. |
Switch to the Digital India webpage.
Highlight Home. |
Switch to Digital India webpage.
Here, the text Home is in Heading 1. |
Highlight Benefits of Sodium | The title of an article in Joomla is in Heading 2. |
Highlight Main Menu, Login Form | Other headings, like Main Menu and Login Form are in Heading 3. |
Notice that the font size keeps decreasing with levels of headings. | |
Switch back to Edit Article webpage | Switch to the Edit Article webpage. |
Let us add one section on food sources of Sodium. | |
Point the cursor to the end of the article>> Press Enter. | At the end of the article text, click Enter to begin a new paragraph. |
Type: Food Sources:
Salt Processed Food Canned Food |
Type Food Sources: as the heading.
We will type 3 food sources here – Salt, Processed Food and Canned Food. |
Select Food Sources >> Click on Paragraph button>> Select Heading 4 | Select the text Food Sources: and in the Paragraph drop-down, select Heading 4. |
Click on Save | Click on Save button. |
Switch to the webpage and press F5 | Switch to the Digital India webpage and refresh the page. |
Highlight Food Sources | Notice that the text Food Sources appears in bold. |
Switch to Edit Article webpage | Go back to Edit Article webpage. |
Type: Let’s look at some sources of sodium | Next to the heading Food Sources, add the text -
Let’s look at some food sources of sodium. |
Point to the added text | Here, we have added the text in the same paragraph.
The newly added text becomes part of the heading and is formatted as Heading 4. |
Please note that:
The header formatting applies to the entire paragraph and not to particular words. | |
Press Enter. | To separate this line from the heading, press Enter before the newly added text. |
Select the text >> Click on Paragraph button→ Paragraph | Then select the text and from the Paragraph drop-down, select the option Paragraph.
The text is no longer in Heading 4 format. <<PAUSE>> |
Place the cursor at the top of the page >>
Type Chemical Symbol of Sodium is Na |
Let me add a text line at the top of the page:
“Chemical Symbol of Sodium is Na.” |
Select the new text line. Click on Paragraph → Pre. | Select the text line and then from the Paragraph drop-down button, select Pre. |
Highlight the text line | The Pre option is for preformatted text.
Preformatted text is displayed in fixed wide font, and preserves both spaces and line breaks. |
Click on Save | Click on Save button. |
Switch to the Digital India webpage and press F5 | Go to the Digital India webpage and refresh it.
Notice that the newly added text appears in a grey box. It also appears in a different font and style. |
Highlight the new text line | Pre style is usually used for text that needs to stand out in an article.
This could be poetic stanza, computer code, quotes etc. |
Switch to Edit Article. | Switch to the Edit Article webpage again.
<<PAUSE>> |
Point to the list options.
|
Next, we have the bulleted list and numbered list options.
Let us see how to use them. |
Select the last 3 lines | Select the last 3 line items in the article text. |
Click on bulleted list >> click on Save button | Now click on bullet list icon and then click on Save button. |
Refresh the Homepage | Refresh the Website to see the bulleted list in the article Benefits of Sodium.
<<PAUSE>> |
Click on Edit Article webpage. | Come back to the Edit Article webpage. |
Point the 3rd row icons one by one. | The third row has some advanced formatting options like:
You can try these on your own and see how they work. |
<<PAUSE>> | |
Let’s look at our article again. | |
Point to the article sections health benefits of sodium and sources of sodium | Here we have 2 sections:
|
Let’s separate these two sections using a horizontal line. | |
Point the cursor before Sources of Sodium text. | Keep the cursor before the text Food Sources. |
Click on Horizontal Line icon. | Now click on the Horizontal Line icon in the formatting tool bar.
This will insert a horizontal line. |
Click on Save button >> Switch to the webpage and press F5 | Save and refresh the Digital India webpage.
We can see the changes in the article “Benefits of Sodium”. |
Instead of inserting a horizontal line, why not put these 2 sections in 2 different pages?
Let’s try doing that. | |
Switch to Edit Article webpage. | Go back to the Edit Article webpage. |
Click on the horizontal line >> Press Backspace key. | First we will remove the horizontal line.
So click on it and then press the Backspace key on the keyboard. |
Place the cursor at the point | Now place the cursor at the point where we want to insert the Page Break. |
Scroll down >> Locate Page Break button >> Click on it | Scroll down and locate the Page Break button at the bottom of the editor window.
Click on it. |
It will open an Insert Pagebreak dialog box. | |
Page Title: Sources
Table of Contents: Sources of Sodium |
Enter
|
Click on Insert Page Break button >> Point to the zig-zag line between the two sections. | Click on Insert Page Break button.
You will see a zig-zag line between the two sections. |
Click on Save button | Click on Save button. |
Switch to the Digital India webpage and press F5 | Switch to the Digital India webpage and refresh it. |
Highlight Page 1 of 2. | This page says Page 1 of 2. |
Highlight Prev and Next. | There are Prev and Next buttons below the article text. |
Highlight block on the right. | A new block has appeared on the right.
It helps us navigate to the various pages of the particular article. |
Point to the Title in the block on the right | The title of the 2nd page is the Table of Contents Alias we typed earlier…..
i.e. Food Sources of Sodium |
Click on Next button. | Click on Next button. |
Highlight Page 2 of 2. | Now, the page says Page 2 of 2. |
Highlight Sources in Benefits of sodium - Sources | Notice the Page Title that we typed in the Insert Pagebreak field. |
Continue the highlight and point to the Title | It has been appended to the title of the article.
<<PAUSE>> |
Click on Digital India | Now, let’s click on the Digital India link to go back to our website’s Homepage. |
Scroll down to show the article Benefits of Sodium. | Scroll down to see the article Benefits of Sodium.
Notice here that the full article text is displayed on the Homepage. |
Let us explore how to add a Read More option here.
This option will show only a part of the article on the Homepage. | |
On the Homepage, point to the text:
Daily consumption of…….. |
For this article, I’ll insert a Read More link before the text:
Daily consumption of sodium, however, depends on a number of factors. |
Switch to Edit Article webpage | Go back to the Edit Article webpage. |
Place the cursor before Daily consumption of ….. | Place the cursor at the point where you want to insert the Read More link. |
Click on Read More button. | Now, at the bottom, click on the Read More button next to the Page Break button. |
Click on Save button. | Scroll up and click on the Save button.
Switch to the webpage and refresh it. |
Highlight Read More: Benefits of sodium | We can see the Read More link below the article text here. |
Click on Read More: Benefits of sodium | When we click on it, the article Benefits of Sodium opens.
And it will display the full article in 2 pages, just as we had set it earlier. |
<<PAUSE>>
Let us summarise. | |
Switch to Slide 8:
Summary: Same as narration |
In this tutorial, we learnt about:
|
Switch to Slide 9:
Same as narration
|
We also learnt how to:
|
Slide 10 & 11:
Assignment |
Here is an assignment for you:
Hint: Use special characters to get the text °C in the article.
|
Show Slide 12:
(About Spoken Tutorial Project) |
The video at the following link, summarizes the Spoken Tutorial project.
Please download and watch it. |
Show Slide 13:
(About Spoken Tutorial Project) |
The Spoken Tutorial Project Team
For more details, please write to us. |
Show Slide 14:
(Acknowledgement) |
Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.. More information on this mission is available at the link shown. |
This is Priyanka signing off. Thank you for joining. |