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: Article editor in Joomla. Basic formatting for an article And styling an article text
Show Slide 3 Learning Objectives continued: Same as narration	We will also learn how to: Insert lists Insert a page break and Insert Read More links in articles.
Show Slide 4 Versions and OS	For this tutorial, we will be using: Ubuntu Linux OS 14.04 Joomla 3.4.1 Apache, MySQL and PHP obtained through XAMPP 5.5.19
Show Slide 5 Prerequisites	To follow this tutorial: You should know how to create articles in Joomla If not, check the relevant Joomla tutorials on the website.
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: “Benefits of Sodium” and “Vitamin A”
	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: Decrease and increase indent Un-do and Redo Insert links, images, tables, etc. Subscript, superscript and special characters 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: Text about introduction of sodium and its benefits and Food Sources.
	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 Sources as Page Title and Food Sources of Sodium as Table of Contents Alias.
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: Article editor in Joomla. Basic formatting of an article Styling an article text
Switch to Slide 9: Same as narration	We also learnt how to: Insert Lists Insert Page Break and Insert Read More links in articles.
Slide 10 & 11: Assignment	Here is an assignment for you: Modify the 4 health benefits of sodium as a numbered list. Center align the heading Food Sources. Remove the Read More link and put it just before Food Sources Add the text Melting Point 97.72 °C as pre-formatted text along with the current pre-formatted text. Hint: Use special characters to get the text °C in the article. Save the article. Refresh the Homepage. Observe the changes and understand what has happened.
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 conducts workshops and gives certificates on passing online tests. 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.

Contributors and Content Editors

Itspriyanka, Nancyvarkey, Nirmala Venkat