Joomla/C2/Formatting-article-in-Joomla/English-timed

Time	Narration
00:01	Welcome to the Spoken Tutorial on Basic Formatting of Articles in Joomla.
00:07	In this tutorial, we will learn about: Article editor in Joomla Basic formatting for an article And styling an article text
00:19	We will also learn how to: Insert lists, Insert a page break and Insert Read More links in articles.
00:28	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
00:46	To follow this tutorial: You should know how to create articles in Joomla
00:51	If not, check the relevant Joomla tutorials on the website.
00:56	Earlier, we learnt to create, edit, delete and copy an article in Joomla.
01:03	Now, let’s learn how to format articles.
01:07	Let’s switch to the Joomla control panel.
01:11	Click on Article Manager.
01:14	Here are the articles we created earlier: “Benefits of Sodium” and “Vitamin A”
01:21	Let us view them on the Digital India webpage.
01:25	Click on Digital India at the top right of the page.
01:29	We can see both our articles here.
01:32	Click on Benefits of Sodium.
01:35	We can see the article is not formatted.
01:38	Let’s go back to the Article Manager.
01:41	Click on the article title “Benefits of Sodium”.
01:45	The editor in which we type the text of the article, is called a WYSIWYG editor.
01:53	WYSIWYG is the abbreviation of 'What You See Is What You Get'.
01:59	It means the article looks the same in the web page as seen in the editing window.
02:05	Look at the menu bar of the editor now.
02:08	The first row has drop-down menus, which have various formatting options.
02:13	You can see the sub-options when you click on them.
02:17	The second row has set of formatting options.
02:20	So here, we see a set of text enhancement options like Bold, Italics, Underline and Strikethrough.
02:28	Next, we see the options to align the text to the left, centre, right and justify.
02:36	These work as in any other text editor.
02:40	After the alignment options, we can see a button named Paragraph.
02:45	When we click on it, we can see various options like Heading 1, Heading 2, etc.
02:51	These are pre-set options provided by Joomla for formatting purposes.
02:56	Headings are very useful in making text easier to read on the screen.
03:01	Headings also define the hierarchy of details.
03:06	Heading 1 defines the most important heading and Heading 6 is the least important.
03:12	Switch to Digital India webpage.
03:15	Here, the text Home is in Heading 1.
03:19	The title of an article in Joomla is in Heading 2.
03:23	Other headings, like Main Menu and Login Form are in Heading 3.
03:29	Notice that the font size keeps decreasing with levels of headings.
03:34	Switch to the Edit Article webpage.
03:37	Let us add one section on food sources of Sodium.
03:41	At the end of the article text, click Enter to begin a new paragraph.
03:46	Type Food Sources: as the heading.
03:50	We will type 3 food sources here – Salt, Processed Food and Canned Food.
04:00	Select the text Food Sources: and in the Paragraph drop-down, select Heading 4.
04:07	Click on Save button.
04:09	Switch to the Digital India webpage and refresh the page.
04:13	Notice that the text Food Sources appears in bold.
04:17	Go back to Edit Article webpage.
04:20	Next to the heading Food Sources, add the text - Let’s look at some food sources of sodium.
04:27	Here, we have added the text in the same paragraph.
04:30	The newly added text becomes part of the heading and is formatted as Heading 4.
04:36	Please note that: The header formatting applies to the entire paragraph and not to particular words.
04:43	To separate this line from the heading, press Enter before the newly added text.
04:49	Then select the text and from the Paragraph drop-down, select the option Paragraph.
04:56	The text is no longer in Heading 4 format.
04:59	Let me add a text line at the top of the page: “Chemical Symbol of Sodium is Na.”
05:07	Select the text line and then from the Paragraph drop-down button, select Pre.
05:14	The Pre option is for preformatted text.
05:17	Preformatted text is displayed in fixed wide font, and preserves both spaces and line breaks.
05:24	Click on Save button.
05:26	Go to the Digital India webpage and refresh it.
05:30	Notice that the newly added text appears in a grey box.
05:34	It also appears in a different font and style.
05:38	Pre style is usually used for text that needs to stand out in an article. This could be poetic stanza, computer code, quotes etc.
05:48	Switch to the Edit Article webpage again.
05:51	Next, we have the bulleted list and numbered list options.
05:56	Let us see how to use them.
05:58	Select the last 3 line items in the article text.
06:03	Now click on bullet list icon and then click on Save button.
06:08	Refresh the Website to see the bulleted list in the article Benefits of Sodium.
06:14	Come back to the Edit Article webpage.
06:17	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
06:34	You can try these on your own and see how they work.
06:38	Let’s look at our article again.
06:41	Here we have 2 sections: Text about introduction of sodium and its benefits and Food Sources.
06:49	Let’s separate these two sections using a horizontal line.
06:53	Keep the cursor before the text Food Sources.
06:57	Now click on the Horizontal Line icon in the formatting tool bar.
07:01	This will insert a horizontal line.
07:04	Save and refresh the Digital India webpage.
07:08	We can see the changes in the article “Benefits of Sodium”.
07:12	Instead of inserting a horizontal line, why not put these 2 sections in 2 different pages? Let’s try doing that.
07:20	Go back to the Edit Article webpage.
07:22	First we will remove the horizontal line.
07:26	So click on it and then press the Backspace key on the keyboard.
07:31	Now place the cursor at the point where we want to insert the Page Break.
07:36	Scroll down and locate the Page Break button at the bottom of the editor window. Click on it.
07:43	It will open an Insert Pagebreak dialog box.
07:47	Enter Sources as Page Title and Food Sources of Sodium as Table of Contents Alias.
07:57	Click on Insert Page Break button.
08:00	You will see a zig-zag line between the two sections.
08:03	Click on Save button.
08:06	Switch to the Digital India webpage and refresh it.
08:10	This page says Page 1 of 2.
08:14	There are Prev and Next buttons below the article text.
08:19	A new block has appeared on the right.
08:22	It helps us navigate to the various pages of the particular article.
08:27	The title of the 2nd page is the Table of Contents Alias we typed earlier…..i.e. Food Sources of Sodium
08:35	Click on Next button.
08:37	Now, the page says Page 2 of 2.
08:41	Notice the Page Title that we typed in the Insert Pagebreak field.
08:46	It has been appended to the title of the article.
08:50	Now, let’s click on the Digital India link to go back to our website’s Homepage.
08:56	Scroll down to see the article Benefits of Sodium.
09:00	Notice here that the full article text is displayed on the Homepage.
09:04	Let us explore how to add a Read More option here.
09:09	This option will show only a part of the article on the Homepage.
09:14	For this article, I’ll insert a Read More link before the text: Daily consumption of sodium, however, depends on a number of factors.
09:22	Go back to the Edit Article webpage.
09:25	Place the cursor at the point where you want to insert the Read More link.
09:30	Now, at the bottom, click on the Read More button next to the Page Break button.
09:36	Scroll up and click on the Save button.
09:39	Switch to the webpage and refresh it.
09:42	We can see the Read More link below the article text here.
09:46	When we click on it, the article Benefits of Sodium opens.
09:50	And it will display the full article in 2 pages, just as we had set it earlier.
09:57	Let us summarise. In this tutorial, we learnt about: Article editor in Joomla Basic formatting of an article Styling an article text.
10:08	We also learnt how to: Insert Lists, Insert Page Break and Insert Read More links in articles.
10:15	Here is an assignment for you: Modify the 4 health benefits of sodium as a numbered list. Center align the heading Food Sources.
10:25	Remove the Read More link and put it just before Food Sources
10:30	Add the text Melting Point 97.72 °C as pre-formatted text along with the current pre-formatted text.
10:40	Hint is to 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.
10:54	The video at the following link, summarizes the Spoken Tutorial project. Please download and watch it.
11:01	The Spoken Tutorial Project Team conducts workshops and gives certificates on passing online tests. For more details, please write to us.
11:11	Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.. More information on this mission is available at the link shown.
11:22	This is Priyanka signing off. Thank you for joining.

Contributors and Content Editors

PoojaMoolya, Sandhya.np14, Venuspriya