Joomla/C2/Formatting-article-in-Joomla/English-timed
From Script | Spoken-Tutorial
Revision as of 11:59, 14 February 2018 by Venuspriya (Talk | contribs)
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 articleSave 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. |