Difference between revisions of "Joomla/C2/Formatting-article-in-Joomla/English-timed"
From Script | Spoken-Tutorial
Venuspriya (Talk | contribs) (Created page with "{| border=1 || '''Time''' || '''Narration''' |- || 00:01 || Welcome to the Spoken Tutorial on '''Basic Formatting of Articles in Joomla.''' |- || 00:07 || In this tutorial,...") |
Venuspriya (Talk | contribs) |
||
| Line 46: | Line 46: | ||
|| 01:14 | || 01:14 | ||
||Here are the '''articles''' we created earlier: '''“Benefits of Sodium”''' and '''“Vitamin A”''' | ||Here are the '''articles''' we created earlier: '''“Benefits of Sodium”''' and '''“Vitamin A”''' | ||
| − | |||
|- | |- | ||
| Line 141: | Line 140: | ||
|- | |- | ||
| − | || | + | || 03:12 |
|| Switch to '''Digital India''' webpage. | || Switch to '''Digital India''' webpage. | ||
|- | |- | ||
| − | || | + | || 03:15 |
|| Here, the text '''Home''' is in '''Heading 1.''' | || Here, the text '''Home''' is in '''Heading 1.''' | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | || | + | || 03:19 |
|| The title of an '''article''' in '''Joomla''' is in '''Heading 2.''' | || 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'''. | || 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.''' | || Notice that the font size keeps decreasing with levels of '''headings.''' | ||
|- | |- | ||
| − | || | + | ||03:34 |
|| Switch to the '''Edit Article''' webpage. | || Switch to the '''Edit Article''' webpage. | ||
|- | |- | ||
| − | || | + | || 03:37 |
|| Let us add one section on food sources of '''Sodium.''' | || 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. | || At the end of the '''article''' text, click '''Enter''' to begin a new paragraph. | ||
|- | |- | ||
| − | || | + | || 03:46 |
|| Type '''Food Sources:''' as the heading. | || Type '''Food Sources:''' as the heading. | ||
|- | |- | ||
| − | || | + | || 03:50 |
|| We will type 3 food sources here – '''Salt, Processed Food''' and '''Canned Food'''. | || We will type 3 food sources here – '''Salt, Processed Food''' and '''Canned Food'''. | ||
| Line 250: | Line 246: | ||
||05:24 | ||05:24 | ||
||Click on '''Save''' button. | ||Click on '''Save''' button. | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| Line 301: | Line 294: | ||
||06:17 | ||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''' | ||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''' | ||
| − | |||
|- | |- | ||
| Line 350: | Line 342: | ||
||07:22 | ||07:22 | ||
||First we will remove the horizontal line. | ||First we will remove the horizontal line. | ||
| − | |||
| − | |||
|- | |- | ||
| Line 452: | Line 442: | ||
||09:22 | ||09:22 | ||
||Go back to the '''Edit Article''' webpage. | ||Go back to the '''Edit Article''' webpage. | ||
| − | |||
| − | |||
|- | |- | ||
Revision as of 11:59, 14 February 2018
| 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. |
