Difference between revisions of "Joomla/C2/Formatting-article-in-Joomla/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 9: Line 9:
 
|-
 
|-
 
|| 00:07
 
|| 00:07
−
|| In this tutorial, we will learn about: '''Article''' editor in '''Joomla''', Basic formatting for an '''article''', And styling an '''article''' text
+
|| In this tutorial, we will learn about:  
 +
 
 +
'''Article''' editor in '''Joomla'''
 +
 
 +
Basic formatting for an '''article'''
 +
 
 +
And styling an '''article''' text
  
 
|-
 
|-
 
|| 00:19
 
|| 00:19
−
|| We will also learn how to: Insert '''lists''', Insert a '''page break''' and, Insert '''Read More links'''  in '''articles'''.
+
|| We will also learn how to: Insert '''lists''', Insert a '''page break''' and Insert '''Read More links'''  in '''articles'''.
  
 
|-
 
|-
 
|| 00:28
 
|| 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
+
|| 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
  
 
|-
 
|-
Line 404: Line 416:
  
 
|-
 
|-
−
||08;37
+
||08:37
 
||Now, the page says '''Page 2 of 2'''.   
 
||Now, the page says '''Page 2 of 2'''.   
  
Line 473: Line 485:
 
|-
 
|-
 
|| 09:57
 
|| 09:57
−
|| Let us summarise. In this tutorial, we learnt about: '''Article''' editor in '''Joomla''', Basic formatting of an '''article''', Styling an '''article''' text.
+
|| Let us summarise. In this tutorial, we learnt about:
 +
 
 +
'''Article''' editor in '''Joomla'''
 +
 
 +
Basic formatting of an '''article'''
 +
 
 +
Styling an '''article''' text.
  
 
|-
 
|-
Line 481: Line 499:
 
|-
 
|-
 
||10:15
 
||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'''.
+
||Here is an assignment for you:
 +
 
 +
Modify the 4 health benefits of '''sodium''' as a numbered list.
 +
 
 +
'''Center align''' the heading '''Food Sources'''.
  
 
|-
 
|-
Line 493: Line 515:
 
|-
 
|-
 
|| 10:40
 
|| 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.
+
|| 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.
  
 
|-
 
|-

Revision as of 16:30, 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 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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Joomla/C2/Formatting-article-in-Joomla/English-timed&oldid=42353"