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

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 5: Line 5:
 
|-
 
|-
 
|| 00:01
 
|| 00:01
−
|| Welcome to the Spoken Tutorial on '''Basic Formatting of Articles in Joomla.'''
+
|| Welcome to the '''Spoken Tutorial''' on '''Basic Formatting of Articles in Joomla.'''
  
 
|-
 
|-
Line 11: Line 11:
 
|| In this tutorial, we will learn about:  
 
|| In this tutorial, we will learn about:  
  
−
'''Article''' editor in '''Joomla'''
+
'''Article editor''' in '''Joomla''',
  
−
Basic formatting for an '''article'''
+
basic formatting for an '''article''' and
  
−
And styling an '''article''' text
+
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'''.
  
 
|-
 
|-
Line 25: Line 25:
 
|| For this tutorial, we will be using:
 
|| For this tutorial, we will be using:
  
−
'''Ubuntu Linux OS''' 14.04
+
'''Ubuntu Linux OS 14.04''',
  
−
'''Joomla''' 3.4.1,  
+
'''Joomla 3.4.1''',  
  
−
'''Apache''' '''MySQL''' and '''PHP''' obtained through '''XAMPP''' 5.5.19
+
'''Apache''', '''MySQL''' and '''PHP''' obtained through '''XAMPP 5.5.19'''.
  
 
|-
 
|-
 
|| 00:46
 
|| 00:46
−
|| To follow this tutorial: You should know how to create '''articles''' in '''Joomla'''
+
|| To follow this tutorial, you should know how to create '''articles''' in '''Joomla'''.
  
 
|-
 
|-
Line 57: Line 57:
 
|-
 
|-
 
|| 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”'''.
  
 
|-
 
|-
 
|| 01:21
 
|| 01:21
−
|| Let us view them on the '''Digital India''' webpage.
+
|| Let us view them on the '''Digital India''' web-page.
  
 
|-
 
|-
Line 89: Line 89:
 
|-
 
|-
 
|| 01:45
 
|| 01:45
−
|| The editor in which we type the text of the '''article''', is called a '''WYSIWYG editor.'''
+
|| The '''editor''' in which we type the text of the '''article''', is called a '''WYSIWYG editor.'''
  
 
|-  
 
|-  
Line 105: Line 105:
 
|-
 
|-
 
|| 02:08
 
|| 02:08
−
|| The first row has drop-down menus, which have various formatting options.
+
|| The first row has drop-down menus which have various formatting options.
  
 
|-
 
|-
Line 133: Line 133:
 
|-
 
|-
 
|| 02:45
 
|| 02:45
−
|| When we click on it, we can see various options like '''Heading 1, Heading 2''', etc.
+
|| When we click on it, we can see various options like '''Heading 1, Heading 2''' etc.
  
 
|-
 
|-
Line 141: Line 141:
 
|-
 
|-
 
||02:56
 
||02:56
−
|| '''Headings''' are very useful in making text easier to read on the screen.
+
|| '''Headings''' are very useful in making text easier to read on the '''screen'''.
  
 
|-
 
|-
Line 225: Line 225:
 
|-
 
|-
 
|| 04:36
 
|| 04:36
−
||Please note that: The '''header formatting''' applies to the entire paragraph and not to particular words.
+
||Please note that the '''header formatting''' applies to the entire paragraph and not to particular words.
  
 
|-
 
|-
Line 261: Line 261:
 
|-
 
|-
 
||05:26
 
||05:26
−
||Go to the '''Digital India''' webpage and refresh it.  
+
||Go to the '''Digital India''' webpage and '''refresh''' it.  
  
 
|-
 
|-
Line 293: Line 293:
 
|-
 
|-
 
||06:03
 
||06:03
−
||Now click on '''bullet list''' icon and then click on '''Save''' button.
+
||Now, click on '''bullet list''' icon and then click on '''Save''' button.
  
 
|-
 
|-
 
||06:08
 
||06:08
−
||Refresh the '''Website''' to see the bulleted list in the '''article Benefits of Sodium'''.
+
||Refresh the '''Website''' to see the bulleted list in the article '''Benefits of Sodium'''.
  
 
|-
 
|-
Line 305: Line 305:
 
|-
 
|-
 
||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 317: Line 317:
 
|-
 
|-
 
||06:41
 
||06:41
−
||Here we have 2 sections: Text about introduction of '''sodium''' and its benefits and '''Food Sources.'''
+
||Here we have 2 sections: text about introduction of '''sodium''' and its benefits and '''Food Sources.'''
  
 
|-
 
|-
Line 325: Line 325:
 
|-
 
|-
 
||06:53
 
||06:53
−
||Keep the cursor before the text '''Food Sources'''.
+
||Keep the '''cursor''' before the text '''Food Sources'''.
  
 
|-
 
|-
Line 337: Line 337:
 
|-
 
|-
 
||07:04
 
||07:04
−
||'''Save''' and refresh the Digital India webpage.
+
||'''Save''' and '''refresh''' the '''Digital India''' web-page.
  
 
|-
 
|-
Line 357: Line 357:
 
|-
 
|-
 
|| 07:26
 
|| 07:26
−
|| So click on it and then press the '''Backspace''' key on the keyboard.
+
|| So, click on it and then press the '''Backspace''' key on the keyboard.
  
 
|-
 
|-
 
||07:31
 
||07:31
−
||Now place the cursor at the point where we want to insert the '''Page Break'''.
+
||Now, place the cursor at the point where we want to insert the '''Page Break'''.
  
 
|-
 
|-
Line 369: Line 369:
 
|-
 
|-
 
||07:43
 
||07:43
−
||It will open an '''Insert Pagebreak''' dialog box.
+
||It will open an '''Insert Pagebreak''' dialog-box.
  
 
|-
 
|-
Line 389: Line 389:
 
|-
 
|-
 
||08:06
 
||08:06
−
||Switch to the '''Digital India''' webpage and refresh it.
+
||Switch to the '''Digital India''' web-page and refresh it.
  
 
|-
 
|-
Line 409: Line 409:
 
|-
 
|-
 
||08:27
 
||08:27
−
||The title of the 2nd page is the '''Table of Contents Alias''' we typed earlier…..i.e. '''Food Sources of Sodium'''
+
||The title of the 2nd page is the '''Table of Contents Alias''' we typed earlier.. i.e. '''Food Sources of Sodium'''.
  
 
|-
 
|-
Line 487: Line 487:
 
|| Let us summarise. In this tutorial, we learnt about:
 
|| Let us summarise. In this tutorial, we learnt about:
  
−
'''Article''' editor in '''Joomla'''
+
'''Article editor''' in '''Joomla''',
  
−
Basic formatting of an '''article'''
+
basic formatting of an '''article''',
  
−
Styling an '''article''' text.
+
styling an '''article''' text.
  
 
|-
 
|-
 
||10:08
 
||10:08
−
||We also learnt how to: Insert '''Lists''', Insert '''Page Break''' and Insert '''Read More links''' in '''articles'''.
+
||We also learnt how to insert '''Lists''', insert '''Page Break''' and insert '''Read More links''' in '''articles'''.
  
 
|-
 
|-
Line 507: Line 507:
 
|-
 
|-
 
|| 10:25
 
|| 10:25
−
|| Remove the '''Read More''' link and put it just before '''Food Sources'''
+
|| Remove the '''Read More''' link and put it just before '''Food Sources'''.
  
 
|-
 
|-
Line 515: Line 515:
 
|-
 
|-
 
|| 10:40
 
|| 10:40
−
|| Hint is to Use '''special characters''' to get the text '''°C''' in the '''article'''  
+
|| Hint is, to use '''special characters''' to get the text '''°C''' in the '''article'''.
  
−
Save the '''article'''
+
'''Save''' the '''article'''.
  
−
Refresh the '''Homepage'''
+
'''Refresh''' the '''Homepage'''.
  
 
Observe the changes and understand what has happened.
 
Observe the changes and understand what has happened.
Line 525: Line 525:
 
|-
 
|-
 
|| 10:54
 
|| 10:54
−
|| The video at the following link, summarizes the '''Spoken Tutorial '''project.
+
|| The video at the following link summarizes the '''Spoken Tutorial '''project.
 
Please download and watch it.
 
Please download and watch it.
  
 
|-
 
|-
 
|| 11:01
 
|| 11:01
−
|| The '''Spoken Tutorial''' Project Team conducts workshops and gives certificates on passing online tests. For more details, please write to us.
+
|| The '''Spoken Tutorial''' Project team conducts workshops and gives certificates on passing online tests. For more details, please write to us.
  
 
|-
 
|-
 
||11:11
 
||11:11
−
||'''Spoken Tutorial Project''' is funded by '''NMEICT, MHRD, Government of India.'''. More information on this mission is available at the link shown.
+
||'''Spoken Tutorial Project''' is funded by '''NMEICT, MHRD''', Government of India. More information on this mission is available at the link shown.
  
 
|-
 
|-
 
||11:22
 
||11:22
−
||This is Priyanka signing off. Thank you for joining.
+
||This is Priyanka, signing off. Thank you for joining.
  
 
|-
 
|-
 
|}
 
|}

Latest revision as of 10:45, 1 August 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 web-page.
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 web-page.
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 web-page 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=43901"